@import url('slider.css');

/* ------------------------------------------------------------------ */
/* 
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
'Noto Sans KR', 'notokr', sans-serif   'FontAwesome',
/* ------------------------------------------------------------------ */



/* box4 Section - Main Page
/* ------------------------------------------------------------------ */
#box4 {
    margin: 0px 0;
	padding: 50px 0 0;
	height: 100%;
	width: 100%;
    background: #fff;
    border-bottom: 0px solid #e5e5e5;
}
#box4 .box-wrap {
	display: flex;
    flex-wrap: wrap; 
	align-items: stretch;
    margin-bottom: 0;
}
#box4 .box-wrap .box_container {
    position: relative;
	width: calc(100% / 4);
	margin: 0;
}
/* #box4 .box-wrap .box_container:after {
    display: block; content:"";
    width: 1px; height: 100%;
    background: #e5e5e5;
    position: absolute; right:0; top:50%; transform:translateY(-50%);
} */

#box4 .box-wrap .box_container:nth-child(4):after {display: none;}

#box4 .box-wrap .box_container .box-inner {position: relative; height: 100%; padding: 15px 35px 15px 40px; color: #888; transition: .2s ease-in-out; }
#box4 .box-wrap .box_container .box-inner:hover {color: var(--c-point-1);}
#box4 .box-wrap .box_container .box-inner h4 {font-weight: 700; line-height: 1.2; margin-bottom: 0px; text-align: center;}
#box4 .box-wrap .box_container .box-inner h6 {font-weight: 700; line-height: 1.2; color: #aaa; }
#box4 .box-wrap .box_container .box-inner p {font-size: 15px; line-height: 1.5;}
#box4 .box-wrap .box_container .box-inner hr {
	border: solid #666;
	border-width: 1px 0 0;
	width: 30px;
	margin: 10px auto 0px ;
	height: 0;
	clear: both;
	text-align: left;
}
#box4 .box-wrap .box_container .box-inner:hover h4 + hr {	border-color: #003483;}

@media screen and (max-width: 810px) {
    #box4 { padding: 0px 0px;}
	#box4 .box-wrap { flex-wrap: wrap; margin: 0; padding: 0;}
	#box4 .box-wrap .box_container { width: 50%; margin: 0; min-height: 160px; border-bottom: 1px solid #e5e5e5;}
    #box4 .box-wrap .box_container .box-inner { padding: 30px 20px;}
	#box4 .box-wrap .box_container .box-inner h1 {margin-bottom: 20px; font-size: 20px;}
	#box4 .box-wrap .box_container .box-inner a {right: 0; bottom: 5px;}
}

@media screen and (max-width: 640px) {
	#box4 { padding: 0px 0px;}
	#box4 .box-wrap { margin: 0; padding: 0;}
	#box4 .box-wrap .box_container { width: 50%; margin: 0; }
    #box4 .box-wrap .box_container .box-inner { padding: 30px 20px;}
	#box4 .box-wrap .box_container .box-inner h1 {margin-bottom: 20px; font-size: 20px;}
	#box4 .box-wrap .box_container .box-inner a {right: 0; bottom: 5px;}
    #box4 .box-wrap .box_container .box-inner p {font-size: 13px;}
}

/* ------------------------------------------------------------------ */
/* Quick Section - Main Page
/* ------------------------------------------------------------------ */
#box-img4 { padding: 100px 0 100px; text-align: center; background:  linear-gradient(0deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2)), url('../images/box-bg.png') no-repeat 50% 50% / cover; border-bottom: 1px solid #e5e5e5;}
#box-img4 .title {margin-bottom: 60px;}
#box-img4 .title h2 {
    font-size: 24px; color: #666; font-weight: 700; text-align: center; text-transform: uppercase; line-height: 1; letter-spacing: 0.1em
}
/* #box-img4 .title h2:after { content:""; display:block; width:1px; height:30px; margin:30px auto 0px; background:#aaa; } */
#box-img4 .title h2 + p {margin-bottom: 20px; }

#box-img4 .container {display: flex; align-items: stretch;	width: calc(100% + 20px); margin-left: -10px; padding: 0; }
#box-img4 .container .quick-wrap {position: relative; width: calc(100%/4 - 20px); margin: 0 10px;}
#box-img4 .container .quick-wrap a {display: block; height: 100%; padding: 0px 0px; color: #888; border: 1px solid #e5e5e5}
#box-img4 .container .quick-wrap img {display: none;}
#box-img4 .container .quick-wrap .txt-box {padding: 50px 30px 320px;}
#box-img4 .container .quick-wrap .txt-box h4 {font-weight: 700;}
#box-img4 .container .quick-wrap .txt-box hr {width: 30px; margin: 10px auto 20px; border: solid #fff; border-width: 3px 0 0;}
#box-img4 .container .quick-wrap .txt-box p {font-size: 15px; font-weight: 400; line-height: 1.5;}
/* #box-img4 .quick-wrap .quick-inner:hover {background: #333; transition:0.3s ease; } */

#box-img4 .container .quick-wrap:nth-child(1) {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.05)), url('../images/card1.jpg') no-repeat 50% 50% / cover;
}
#box-img4 .container .quick-wrap:nth-child(2) {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.05)), url('../images/card2.jpg') no-repeat 50% 50% / cover;
}
#box-img4 .container .quick-wrap:nth-child(3) {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.05)), url('../images/card3.jpg') no-repeat 50% 50% / cover;
}
#box-img4 .container .quick-wrap:nth-child(4) {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.05)), url('../images/card4.jpg') no-repeat 50% 50% / cover;
}

#box-img4 i, #box-img4 a h4, #box-img4 a p, #box-img4 a:visited h4 {
    text-decoration: none; outline: 0;
    -webkit-transition: color .1s ease-in-out;
            transition: color .1s ease-in-out;
}

/* hover */
#box-img4 a:hover h4, #box-img4 a:hover p { color: var(--c-point-1) !important; }
#box-img4 .container .quick-wrap:hover {
    background: rgba(255,255,255,1); 
    box-shadow: 0 5px 20px rgba(0,0,0,0.3); 
    transition: .1s all;
}
#box-img4 .container .quick-wrap:hover a {color: rgba(255, 255, 255, 0.0)}
#box-img4 .container .quick-wrap:hover .txt-box hr {border: solid var(--c-point-1); border-width: 3px 0 0; }


@media screen and (max-width: 810px) {
    #box-img4 { padding: 60px 20px;}
    #box-img4 h4:after {margin-bottom: 20px}
    #box-img4 p {display: block; }
    #box-img4 .container {width: calc(100% + 20px); margin-left: -10px; }
    #box-img4 .container .quick-wrap {position: relative; width: calc(100%/3 - 10px); margin: 0 5px;}
    #box-img4 .container .quick-wrap .txt-box {padding: 100px 10px;}
}

@media screen and (max-width: 640px) {
    #box-img4 {padding: 60px 20px;}
    #box-img4 .title {margin-bottom: 40px;}
    #box-img4 .title h2:after {height: 30px;}
    #box-img4 .container {flex-wrap: wrap;}
    #box-img4 .container .quick-wrap {width: 100%; margin-bottom: 10px;}
    #box-img4 .container .quick-wrap:nth-child(2) {transform: translateY(0px)}
    #box-img4 .container .quick-wrap:last-child {margin-bottom: 0;}
    #box-img4 .quick-box .quick-txt {opacity:1; transform:scale(1); transition:0.3s ease; }
    #box-img4 .quick-box .quick-txt { background:rgba(0, 0, 0, 0.5); transform:scale(1); opacity:1;}
    #box-img4 .end p {margin-bottom: 0; padding-bottom: 0 ; border-bottom: none}
}


/* line */
.quick-wrap a:before, 
.quick-wrap a:after {
  display: block;
  content: " ";
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.quick-wrap a:before { top: 0; left: 0;}
.quick-wrap a:after {bottom: 0; right: 0;}
.quick-wrap a:hover {border: 0}
.quick-wrap a:hover:before {
  width: 100%;
  height: 100%;
  opacity: 1;
  border-top: 2px solid var(--c-point-1);
  border-right: 2px solid var(--c-point-1);
  transition: width .2s cubic-bezier(0.07, 0.62, 0.61, 1), height 0.1s .15s cubic-bezier(0.07, 0.62, 0.61, 1);
}
.quick-wrap a:hover:after {
  width: 100%;
  height: 100%;
  opacity: 1;
  border-bottom: 2px solid var(--c-point-1);
  border-left: 2px solid var(--c-point-1);
  transition: width .2s cubic-bezier(0.07, 0.62, 0.61, 1), height .1s .15s cubic-bezier(0.07, 0.62, 0.61, 1);
}

/* box1 Section - Main Page
/* ------------------------------------------------------------------ */
#banner2 {
    margin: 0px 0;
	padding: 80px 0 ;
	height: 100%;
	width: 100%;
    background: #fff;
}
#banner2 .box-wrap {
	display: flex;
	align-items: stretch;
    width: calc(100% + 10px);
    margin-left: -5px;
}
#banner2 .box-wrap .box_container {
    position: relative;
	width: calc(100% / 2);
	margin: 0 5px;
    /* background: #111; */
    transition: all .2s ease-in-out;
}
#banner2 .box-wrap .box_container:hover {background: var(--c-point-1) !important; }

#banner2 .box-wrap .box_container a {display: flex; justify-content: space-between; padding: 40px 35px ; color:#666; border: 2px solid rgba(0,0,0,0.1);}
#banner2 .box-wrap .box_container a:hover {color: #fff;}
#banner2 .box-wrap .box_container a .txt-box h3 {font-weight: 700; line-height: 1.2; margin-bottom: 20px; text-transform: uppercase;}
#banner2 .box-wrap .box_container a .txt-box h5 {margin-bottom: 10px; font-weight: 700; line-height: 1.2; color: #ccc; }
#banner2 .box-wrap .box_container a .txt-box p {font-size: 15px; line-height: 1.5;}
#banner2 .box-wrap .box_container a .img-wrap {position: relative;}
#banner2 .box-wrap .box_container a .img-wrap .img-box {  
    width: 80px; height: 80px; 
    position: absolute; top: 50%;
    right: -10px;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
}
#banner2 .box-wrap .box_container a .img-wrap .img-box img {opacity: 0.8;}
#banner2 .box-wrap .box_container a:hover .img-wrap .img-box img {opacity: 1;}

@media screen and (max-width: 640px) {
	#banner2 { padding: 30px 15px;}
	#banner2 .box-wrap { flex-wrap: wrap; margin: 0; width: 100%; }
	#banner2 .box-wrap .box_container { width: 100%; margin: 10px 0;}
    #banner2 .box-wrap .box_container a { padding: 30px 20px;}
	#banner2 .box-wrap .box_container a .txt-box h1 {margin-bottom: 20px; font-size: 20px;}
    #banner2 .box-wrap .box_container a .txt-box h3 {margin-bottom: 0;}
	#banner2 .box-wrap .box_container a .txt-box a {right: 0; bottom: 5px;}
    #banner2 .box-wrap .box_container a .txt-box p {font-size: 13px;}
    #banner2 .box-wrap .box_container a .img-wrap .img-box {width: 60px; height: 60px;}
}

/* ------------------------------------------------------------------ */
/* box2 Section - Main Page
/* ------------------------------------------------------------------ */
#product {
    display: flex;
    flex-wrap: wrap;
    /* background: rgb(0, 87, 177, 1); */
    overflow: hidden;
}

#product .board-ttl {
    width: calc(50% - 240px);
    padding: 0px 0; background: rgba(255, 255, 255, 0.0);
}
#product .board-ttl .inner-wrap {display: flex; width: 100%; padding:80px 60px; text-align: right; }
#product .board-ttl .inner-wrap h2 {margin-right: 20px;margin-bottom: 0px; font-weight: 900;}
/* #product .board-ttl .inner-wrap a {display: block;} */
#product .half-bg {
    width: calc(50% + 240px);
    height: 100%;

}


@media screen and (max-width: 1080px) {
    #product {margin-bottom: 0px; padding: 0; }
    #product .board-ttl {width: 100%;}
    #product .board-ttl .inner-wrap {padding: 60px 0; text-align: center; }
    #product .half-bg {width: 100%;}
}
@media screen and (max-width: 480px) {
    #product .board-ttl .inner-wrap {padding: 40px 0 40px; }
}

/* ------------------------------------------------------------------ */
/* Output Section - Main Page
/* ------------------------------------------------------------------ */
#output {position: relative; padding: 100px 0; background: #eee; overflow: hidden;}
#output:before {
    display: block; content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background: #e5e5e5;
}
#output .output-wrap h6 {
	position: relative;
	margin-bottom: 20px; font-weight: 500; color: #666; text-transform: uppercase;
	border-bottom: 0px solid #ccc;
}
#output .output-wrap h6 .more {position: absolute;right: 0; }
#output .output-wrap h6 .more a {padding: 5px; font-size: 24px; font-weight: 300;}
#output .output-wrap  hr {
	border: solid #666;
	border-width: 3px 0 0;
	width: 100%;
	margin: 5px 0 10px;
	height: 0;
	clear: both;
	text-align: left;
}

#output .output-wrap:hover hr {border-color: #444; width: 100%; text-align: left;}
#output .output-wrap.contact .tel { margin-bottom: 10px !important; font-size: 36px; color: #666; line-height: 1;letter-spacing: 0em; font-weight: 700;}
#output .output-wrap.contact ul li {margin-bottom: 5px; font-size: 13px;}
#output .output-wrap.contact .button {width: 100%; margin-top: 20px; text-align: center;}

/* Board Output */
#output .output-wrap table.board_out {}
#output .output-wrap table.board_output {}
#output .output-wrap table.board_output tbody {}
#output .output-wrap table.board_output tbody tr td {}
#output .output-wrap table.board_output tbody tr td:nth-child(1) img {display: none;} /* dot img */
#output .output-wrap table.board_output tbody tr td:nth-child(3) {color: #aaa; line-height: 30px;} /* date */
#output .output-wrap table.board_output tbody tr td a {line-height: 30px;}

#output .output-wrap table.board_output tbody .board_output_1_tr {line-height: 30px;}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 {}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 a {}
#output .output-wrap table.board_output .board_output_1_tr .bd_out1 a:hover {}


@media screen and (max-width: 810px) {
    #output {padding: 60px 10px; }
	#output .output-wrap {margin-bottom: 30px;}
    #output .output-wrap .board_out {margin-bottom: 30px;}
    #output .output-box:last-child {margin-bottom: 0;}

}
@media screen and (max-width: 640px) {
    #output {padding: 60px 20px; }
    #output:before {display: none;}
}