@charset "utf-8";
/*
	Common Layout CSS _ 15.05.18
*/

/*common*/
.inner{max-width:1200px; padding:0 3%; width:100%; position:relative; margin: 0 auto;}
.pdinner{max-width:1600px; padding:0 3%; position:relative; margin: 0 auto;}
.ofh{overflow:hidden;}
.txt-s{font-size:13px;}
.txt-m{font-size:20px;}
.txt-l{font-size:26px;}

.tit_h3{font-size:28px;font-weight:400; color:#323232;  position:relative; letter-spacing:-1px}
.tit_h3:after{content:''; width:60px; height:1px; display:block; background:#505050; margin: 0 auto; margin-top:20px;}
.tit_h4{font-size:26px; color:#323232; font-weight:bold; letter-spacing:-1px}

.tit_h5{color:#000; font-weight:bold; font-size:18px;}

.tit_h4.noLine:after{width:0; height:0px; margin-top:0px;}


.mEnter{display:block;}
.mb{margin-bottom:30px !important}
.bmb{margin-bottom:40px !important}
.pb{padding-bottom:30px !important}
.bpb{padding-bottom:40px !important}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.mo_only{display:block;}

.move_scroll{max-width:768px; overflow-x:auto}

.line_link{display:inline-block; color:#ffffff; padding-bottom:5px; border-bottom:3px solid #ffffff; font-size:0.9em}
.arrow_cir_w:after{content:''; width:28px; height:25px; background:url(../img/ic_arrow_w.png) no-repeat center center; background-size:100%; display:inline-block; vertical-align:middle; margin-left:10px;}

.dpib{display:inline-block}
.dpb{display:block;}

.upper{text-transform:uppercase}
.fwb{font-weight:600}
.fss{font-size:0.8em}
.Tblack{color:#323232}
.Tred{color:#e83428}
.upcase{text-transform:uppercase}

.btn_more{display:inline-block; color:#ffffff; background:#1c3f95; padding:6px 20px; border-radius:500px; vertical-align:middle; position:relative; z-index:1}
.btn_more:after{content:'+'; display:inline-block; margin-left:10px; vertical-align:middle}

.btn_more.wt_btn{border:1px solid #dcdcdc; background:none; }

@media all and (min-width:768px) {

.txt-s{font-size:15px;}
.txt-m{font-size:20px;}
.txt-l{font-size:30px;}

.tit_h4{font-size:30px; letter-spacing:-1px}
.tit_h5{font-size:20px; letter-spacing:-1px}


.mb{margin-bottom:40px !important; }
.bmb{margin-bottom:60px !important;}

.pb{padding-bottom:40px !important}
.bpb{padding-bottom:60px !important}

.mo_only{display:none;}
.move_scroll{max-width:100%;}
.pdinner{padding:0 3%}

.half{width:48.5%; float:left;}
.mr{margin-right:3%;}
.btn_more:after{margin-left:20px}
}

@media all and (min-width:1200px) {

body, html{font-size:17px; line-height:1.5}
.mEnter{display:inline-block;}

.txt-m{font-size:30px;}
.txt-l{font-size:40px;}

.tit_h3:after{margin-top:25px;}

.tit_h4{font-size:30px; }

.tit_h5{font-size:20px; }


.mb{margin-bottom:50px !important}
.bmb{margin-bottom:80px !important}

.pb{padding-bottom:50px !important}
.bpb{padding-bottom:80px !important}
.pdinner{padding:0 20px}



}

/*owl 컨트롤러 css변경*/
.owl-controls{width:100%; margin:0 auto;}

/*owl pagenation css변경 */
.page_btn .owl-page span{width:20px !important; height:20px !important; background:none !important; border:4px solid #ffffff; border-radius:20px; opacity:0.7 }
.page_btn .owl-page.active span{opacity:1;}

.page_btn2 .owl-page span{width:5px !important; height:5px !important; background:#808080 !important; border-radius:20px; position:relative; opacity:1 !important; margin:0 20px !important;}
.page_btn2 .owl-page.active span:before{content:''; width:30px; height:30px; position:absolute; margin-left:-16px; left:50%; margin-top:-16px; top:50%; border:1px solid #808080; border-radius:200px;}

/*owl navigation css변경*/
.owl-theme .owl-controls{position:relative}
.arrow_btn .owl-buttons{position:absolute; width:100%; top:-250px;}
.arrow_btn .owl-buttons div{position:absolute; font-family:'FontAwesome'; text-indent:-999999px; background:none !important; padding:0px !important; margin:0px !important;}
.arrow_btn .owl-buttons div:first-child{left:2%;}
.arrow_btn .owl-buttons div:last-child{right:2%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{content:'\f104'; font-family:'FontAwesome'; position:absolute; left:0; top:0; text-indent:0 !important; font-size:3em;}
.arrow_btn .owl-buttons div.owl-next:after{content:'\f105'; right:0; left:auto;}

.pop_page_btn{position:relative;}
.pop_page_btn .owl-controls{position:absolute; bottom:0px; text-align:right !important}
.pop_page_btn .owl-pagination{display:inline-block; padding:1px 10px; border-radius:500px; height:22px;}
.pop_page_btn .owl-controls .owl-page span{width:10px !important; height:10px !important; background:#505050 !important; margin:2px 4px !important}
.pop_page_btn .owl-controls .active span{background:#8c000a !important}

@media all and (min-width:1200px) {
.arrow_btn .owl-buttons div:first-child{left:-10%;}
.arrow_btn .owl-buttons div:last-child{right:-10%;}
.arrow_btn .owl-buttons div.owl-prev:after,
.arrow_btn .owl-buttons div.owl-next:after{font-size:50px;}
}



/**/
.wrap{max-width:2000px; min-width:320px; width:100%; margin: 0 auto; position:relative;}
@media all and (min-width:1200px) {
.wrap:before{position:absolute; content:''; display:block;  width:100%; left:0; right:0; height:4px;background:#4464a6; z-index:1000;}

}
@media all and (min-width:1400px) {
.wrap .header,
.wrap .mainvisual,
#section02 {padding: 0 3%;}
}
 /*main visual 컨트롤러 및 bg*/  

#section00 .hide{height:0}
.mainvisual {position:relative; overflow:hidden; z-index:1; }
.mainvisual .bx-wrapper .bx-viewpor{background:#323232}
.mainvisual #mainslider li{position:relative; height:600px; }
.mainvisual #mainslider li:before{content:''; display:block; position:absolute; width:100%; height:100%; background:url(../img/main01.jpg) no-repeat center center; background-size:cover !important;}
.mainvisual #mainslider li.main02:before{background:url(../img/main02.jpg) no-repeat center center;}
.mainvisual #mainslider li.main03:before{background:url(../img/main03.jpg) no-repeat center center;}
.mainvisual #mainslider li.main04:before{background:url(../img/main04.jpg) no-repeat center center;}
/*.mainvisual #mainslider li{-webkit-animation:kenburns-top 15s ease-out both;animation:kenburns-top 15s ease-out both}*/
.mainvisual #mainslider li:before{animation: zoomout 1s ease-in-out infinite alternate;    -webkit-animation: zoomout 1s ease-in-out infinite alternate;
animation-iteration-count:1; 	-webkit-animation-iteration-count:1; }
/*.mainvisual #mainslider li:after{content:''; background:url(../img/visu_cover.png) no-repeat center center; width:100%; height:100%; position:absolute; animation:none; background-size:100% auto !important}*/


.mainvisual  #bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1200px;  width:94%; margin:0 auto; left:0; right:0; bottom:15%; text-align:center; min-height:25px; z-index:100}
.mainvisual  #bx-pager li{display:inline-block; margin:0 3px; text-align:center; position:relative;}
.mainvisual  #bx-pager li a{color:#ffffff; opacity:0.9; width:22px; height:22px; display:block}
.mainvisual  #bx-pager li a:before{content:''; position:absolute; display:block; width:14px; height:14px; background:#ffffff;  top:0; left:0; bottom:0; right:0; margin: auto; border-radius:500px;}
.mainvisual  #bx-pager li a.active{ transition:0.3s; opacity:1;}
.mainvisual  #bx-pager li a.active:after{content:''; display:block; position:absolute;  width:100%; height:100%; border:1px solid #ffffff; left:0; top:0; bottom:0; right:0; margin:auto;  border-radius:500px; box-sizing:border-box}

.mainvisual.dot_btn .bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1200px;  width:94%; margin:0 auto; left:0; right:0; bottom:15%; text-align:center; min-height:25px; z-index:100}
.mainvisual.dot_btn .bx-pager .bx-pager-item{display:inline-block; margin:0 3px !important; text-align:center; position:relative; background:none}
.mainvisual.dot_btn .bx-pager .bx-pager-item a{color:#ffffff; opacity:0.9; width:22px; height:22px; display:block}
.mainvisual.dot_btn .bx-pager .bx-pager-item a:before{content:''; position:absolute; display:block; width:14px; height:14px; background:#ffffff;  top:0; left:0; bottom:0; right:0; margin: auto; border-radius:500px;}
.mainvisual.dot_btn .bx-pager .bx-pager-item a.active{ transition:0.3s; opacity:1; background:none}
.mainvisual.dot_btn .bx-pager .bx-pager-item a.active:after{content:''; display:block; position:absolute;  width:100%; height:100%; border:1px solid #ffffff; left:0; top:0; bottom:0; right:0; margin:auto;  border-radius:500px; box-sizing:border-box}


/*.mainvisual.line_btn .bx-pager{position:absolute; color:#ffffff; overflow:hidden;  max-width:1200px;  width:94%; margin:0 auto; left:0; right:0; bottom:15%; text-align:center; min-height:25px; z-index:100}
.mainvisual.line_btn .bx-pager .bx-pager-item{display:inline-block; margin:0 10px !important; text-align:center; position:relative; background:none}
.mainvisual.line_btn .bx-pager .bx-pager-item a{background:#ffffff; opacity:0.3; width:40px; height:7px; display:block; border-radius:0 !Important; position:relative; }
.mainvisual.line_btn .bx-pager .bx-pager-item a:before{content:''; display:block; position:absolute; left:-10px; top:0; bottom:0; border-left: 10px solid transparent;border-bottom:7px solid #ffffff;}
.mainvisual.line_btn .bx-pager .bx-pager-item a:after{content:''; display:block; position:absolute; right:-10px; top:0; bottom:0; border-right: 10px solid transparent;border-top:7px solid #ffffff;}
.mainvisual.line_btn .bx-pager .bx-pager-item a.active{ transition:0.3s; opacity:1; width:60px; }*/


.mainvisual.arr_btn .bx-controls-direction a{width:50px; height:50px; background:#fff; bottom:0; top:auto; right:0;}
.mainvisual.arr_btn .bx-controls-direction a.bx-prev:after{content:''; position:absolute; left:0; right:0; top:0; bottom:0; width:30px; height:30px; margin:auto;  background:url(../img/btn_prev.gif) no-repeat center center; background-size:100% !important}
.mainvisual.arr_btn .bx-controls-direction a.bx-next:after{content:''; position:absolute; left:0; right:0; top:0; bottom:0; width:30px; height:30px; margin:auto;  background:url(../img/btn_next.gif) no-repeat center center; background-size:100% !important}

.mainvisual.arr_btn .bx-controls-direction a.bx-prev{right:51px; left:auto;}
.mainvisual.arr_btn .bx-controls-direction a.bx-next{}

@media all and (min-width:768px) {
.mainvisual #mainslider li{height:750px}/*수치변경시 sublink높이변경*/
.mainvisual  #bx-pager{width:84%; text-align:left;}

}


@media all and (min-width:1024px) {
.mainvisual  #bx-pager{width:1200px; padding:0 20px;}

}

@media all and (min-width:1200px) {
.mainvisual #mainslider li{height:900px}/*수치변경시 sublink높이변경*/
.mainvisual.arr_btn .bx-controls-direction a{width:70px; height:70px;}
.mainvisual.line_btn .bx-pager{bottom:38%;}
}

/*mainvisual 텍스트*/
.mainvisual .visu{position:absolute; top:30%; width:100%;  text-align:center; color:#ffffff; z-index:100; text-align:center;}
.mainvisual .visu a{color:#ffffff}
.mainvisual .visu h5 {font-size:1.2em;  letter-spacing:-0.04em; font-weight:600; line-height:1.2; position:relative;}
.mainvisual .visu h2 {font-size:2em;  letter-spacing:-0.04em; font-weight:800; line-height:1.2; position:relative; padding-bottom:20px; margin-bottom:20px; }
.mainvisual .visu h2:after {position:absolute; display:block; content:''; width:50px; height:3px; bottom:0; left:0; right:0; margin:0 auto; background:#fff;}
.mainvisual .visu p{ position:relative; z-index:10}

.mainvisual .visu .visu_img{position:absolute; left:0; right:0; max-width:600px; width:100%; margin:auto; padding:0 3%}
.mainvisual .visu .visu_img.visu02  {max-width:300px;}

.mainvisual #mainslider li.visu_bg:after{content:''; width:100%; height:51%; bottom:0;  display:block; position:absolute; background:rgba(47,81,150,0.9); background-size:50% auto !important}

@media all and (min-width:600px) {
.mainvisual .visu h5 {font-size:1.8em;}
.mainvisual .visu h2 {font-size:3em}
.mainvisual .visu .visu_img.visu02  {max-width:350px;}

.product-list li {padding:0 10px;}


}

@media all and (min-width:1000px) {
.mainvisual .visu h5 {font-size:2.25em; }
.mainvisual .visu h2 {font-size:3.4em; } 
.mainvisual .visu p {font-size:1.3em; } 
.right_box .rBox {padding:5% 0 20%;}


}

@media all and (min-width:1200px) {
.mainvisual .visu{text-align:left; padding: 0 10%; top:33%}
.mainvisual .visu h5 { font-size:2.7em;}
.mainvisual .visu h2 {padding-bottom:40px; margin-bottom:30px; font-size:4em;}
.mainvisual .visu h2:after {right:auto; }
.mainvisual .visu .visu_img{left:auto; right:10%; top:-100px; padding:0px;  max-width:780px; margin:auto;}
.mainvisual .visu .visu_img.visu02 { right:18%; top:-230px; max-width:550px;}
.mainvisual .visu .visu_img.visu03 { right:10%; top:-100px; max-width:800px;}
.mainvisual .visu .visu_img.visu04 { right:8%;}
.mainvisual #mainslider li.visu_bg:after{background-size:800px auto !important; height:100%; width:47%;}
.mainvisual.line_btn .bx-pager{max-width:100%; width:100%; padding:0 10%; text-align:left;}
.mainvisual.arr_btn .bx-controls-direction a.bx-prev:after,
.mainvisual.arr_btn .bx-controls-direction a.bx-next:after{width:50px; height:50px;}


}

@media all and (min-width:1400px) {
.mainvisual .visu .visu_img{max-width:900px;}
.mainvisual .visu .visu_img.visu03 {top:-150px; max-width:900px;}
.mainvisual .bx-wrapper{z-index:1;}
.mainvisual:after {content:''; position:absolute; left:0; bottom:0; right:0;  height:49.5%; display:block;   z-index:0;}
.mainvisual:before{content:''; position:absolute; left:25px; top:0; bottom:0; width:14px; margin:auto; height:177px; background:url(../img/visu_left_txt.png) no-repeat center center; z-index:2}
}

@media all and (min-width:1600px) {
.mainvisual.arr_btn .bx-controls-direction {position:absolute; right:11%;}
.mainvisual.arr_btn .bx-controls-direction a,
.mainvisual.arr_btn .bx-controls-direction a.bx-prev:after,
.mainvisual.arr_btn .bx-controls-direction a.bx-next:after{width:79px; height:79px;}
.mainvisual.arr_btn .bx-controls-direction a.bx-prev {right:80px;}
}








/*사선*/
.squ_line{position:absolute; width:2000px; left:50%;  margin-left:-1000px; z-index:100; bottom:0; }

.squ_line .rt,
.squ_line .lt{width:50%; position:absolute; left:0; bottom:0; border-bottom:70px solid #ffffff; }

.squ_top {top:0}
.squ_top .rt,
.squ_top .lt{bottom:auto; top:0; border-bottom:0; border-top:70px solid #ffffff}


.squ_line .rt{right:0; left:auto;}

.squ_line .w{border-color:#ffffff;}
.squ_line .b{border-color:#1c3f95;}
.squ_line .g{border-color:#f5f5f5;}

.squ_line .lt{border-right:1000px solid transparent}
.squ_line .rt{border-left:1000px solid transparent}


.bounce-top:hover a:before{-webkit-animation:bounce-top .9s both;animation:bounce-top .9s both}
.kenburns-top{-webkit-animation:kenburns-top 10s ease-out both;animation:kenburns-top 10s ease-out both}
.zmout{animation: zoomout 2s ease-in-out infinite alternate;    -webkit-animation: zoomout 2s ease-in-out infinite alternate; animation-iteration-count:1; 	-webkit-animation-iteration-count:1; }

/*키프레임셋팅*/

@keyframes zoomout {
	0% { transform: scale(1.1); }
    100% {        transform: scale(1.0);    }
}
@-webkit-keyframes scaling {
	From {    -webkit-transform: scale(1.1);}
	To {    -webkit-transform: scale(1.0);}
}
@-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-30px);transform:translateY(-30px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-15px);transform:translateY(-15px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-3px);transform:translateY(-3px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-0px);transform:translateY(-0px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}93%{-webkit-transform:translateY(-4px);transform:translateY(-4px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}25%,55%,75%,87%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}}
@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.1) translateY(-15px);transform:scale(1.1) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}@keyframes kenburns-top{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0);-webkit-transform-origin:50% 16%;transform-origin:50% 16%}100%{-webkit-transform:scale(1.1) translateY(-15px);transform:scale(1.1) translateY(-15px);-webkit-transform-origin:top;transform-origin:top}}



/* ==== Slick Slider Css Ruls === */
.slick-slider{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}.slick-list.dragging{cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block}
.slick-track:before,.slick-track:after{display:table;content:''}.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left /* If RTL Make This Right */ ;height:100%;min-height:1px}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}

/* Arrows */
.arrowSlider {position:relative;}
.slick-arrow{ position:relative; font-size:0;  display:inline-block !important; width: 50px;   height: 50px; cursor: pointer;  border:1px solid #fff; box-shadow:rgba(0,0,0,.2)  0 0 15px; z-index:10}
.slick-arrow:before{content:''; display:block; position:absolute; background:url(../img/btn_prev.gif) no-repeat center; background-size:100% !important; width:50px; height:50px; line-height:50px; left:0; right:0; bottom:0; top:0;  margin:auto;}
.slick-arrow:before{}
.slick-next{right:0;}
.slick-next:before{ background:url(../img/btn_next.gif) no-repeat center;  }

/*Dots*/
.slick-dots{position: absolute;    bottom: -20px;    display: block;    width: 100%;    padding: 0;    margin: 0;   text-align: center; z-index:10}
.slick-dots li{position: relative;  display: inline-block;  width: 20px;  height: 2px;  margin: 0 5px;  padding: 0;   cursor: pointer;}
.slick-dots li button{ font-size: 0;   line-height: 0;  display: block;  width:100%; height:100%; background:#969696; cursor: pointer;  color: transparent;  border: 0;  outline: none;  opacity:0.8}
.slick-dots li.slick-active button{background:#323232; opacity:1}




/*section 공통*/
.section{padding:50px 0; position:relative; }
.section .section_top{text-align:center}
.section .section_top h3{font-size:1.4em; font-weight:800; margin-bottom:15px; line-height:1.2}
.section .section_top h3 span.line_deco{display:block; margin:20px auto; height:5px; width:40px;  position:relative; background:#000000}
.section .section_top h3 span.line_deco:after{content:''; position:absolute; display:inline-block; left:-7px;  border-left: 7px solid transparent; border-bottom:5px solid #000000; box-sizing:border-box}
.section .section_top h3 span.line_deco:before{content:''; position:absolute; border-right:7px solid transparent; border-top:5px solid #000000; right:-7px; bottom:0;}
.section .section_top h3 b{display:block;}
.section .section_top h3 b.tit_s{font-size:15px;}
.section .section_top p{margin-bottom:20px;}

.sq_btn{overflow:hidden; text-align:center}
.sq_btn li{display:inline-block; margin:0 3px}
.sq_btn li a{display:inline-block; padding:12px 15px; background:#4c5159; color:#ffffff; position:relative; font-size:0.9em}
.sq_btn li:first-child a{background:#05235f}
.sq_btn li a:after{content:''; width:15px; height:15px; position:absolute; right:0; bottom:0; border-left:15px solid transparent; border-bottom:15px solid #ffffff; box-sizing:border-box}

@media all and (min-width:768px) {
.section .section_top h3 {font-size:2em}
.section .section_top h3 b.tit_s{font-size:18px;}
.section .section_top p{margin-bottom:40px}
.section{padding:80px 0;}
}

@media all and (min-width:1200px) {
.section .section_top h3{font-size:2.3em}
/*.section{padding:120px 0;}*/
.section{padding:100px 0;}
.sq_btn li a{padding:12px 25px; font-weight:600}
}



/*section 01*/
#section01{text-align:center;   }
#section01:after {position:absolute; display:block; content:''; bottom:0; left:0; right:0; margin:0 auto; height:43%; background:#f8f8f8; z-index:-1}
#section01 .pdinner {max-width:1430px;}
.m_title h3 {font-size:2em; font-weight:800; color:#000; padding-bottom:20px; margin-bottom:20px; position:relative; text-align:center;}
.m_title h3:before {position:absolute; display:block; content:''; bottom:0; left:-37px; right:0; margin:0 auto; width:37px; height:3px; background:#cd1e2a; z-index:1}
.m_title h3:after {position:absolute; display:block; content:''; bottom:0; left:0; right:0; margin:0 auto; width:72px; height:3px; background:#4464a6}

.product-list {position:relative;}
.product-list li {position:relative;}
.product-list li .img {position:relative; width:100%; background-color:#fafafa; overflow:hidden; z-index:1;}
.product-list li .img img {position:relative; transition: transform 0.5s ease; z-index:-1; /*max-width:350px;*/ width:100%;}
.product-list li .img:after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(-180deg, rgba(255,255,255, 0.3) 50%, rgba(0, 0, 0, 1) 100%); opacity:0.5;  transition:all 0.45s ease;}
.product-list li:hover .img img {transform: scale(1.1);}
.product-list li:hover .img:after {content:''; display:block; position:absolute; top:-170px; left:-170px; width:200%; height:180%; background-color:rgba(68,100,166, 0.8); opacity:1; border-radius:170px; transition:all 0.45s ease;}

.product-list li dl {position:absolute; top:70%; left:0; z-index:1;  color:#fff; text-align:left; padding:0 40px;}
.product-list li:hover dl {top:65%;}
.product-list li dt {display:inline; font-size:1.5em; font-weight:700; line-height:1; }
.product-list li:hover .info dd {padding-top:10px;}
.product-list .info dd,
.product-list .more {display:none;}
.product-list li:hover .info dd,
.product-list li:hover .more {display:inline-block;}
.product-list li:hover .more {position:absolute; top:5%; right:5%; z-index:1;}


@media all and (min-width:1200px) {
.product-list .arrowSlider {position:absolute; top:38%; width:100%;}
.product-list .slick-arrow {position:absolute; left:-1%;}
.product-list .slick-arrow.slick-next {right:-1% !important; left:auto;}

}

@media all and (min-width:1600px) {
#section01{margin:0 3%;}
.product-list .arrowSlider {top:35%;}
.product-list .slick-arrow {; left:-8%;}
.product-list .slick-arrow.slick-next {right:-8% !important;}
.slick-arrow,
.product-list .slick-arrow:before {width:75px; height:75px;}

}

/*section 02*/

.rndCenter {background:#575e6c url(../img/bg_center.jpg) no-repeat left top;}
.rndCenter .rnd_txt {max-width:630px; margin:0 auto; text-align:center; padding:15% 0; color:#fff;}
.rndCenter .title {color:#fff; margin-bottom:10%;}
.rndCenter .title h3 {font-size:2em; padding-bottom:5px; font-weight:700}
.rndCenter .title p {}
.rndCenter .rndBox {}
.rndCenter .rndBox ul:after {clear:both; display:block; content:''}
.rndCenter .rndBox ul li {float:left; width:30.3%; margin:0 1.5%; position:relative;}
.rndCenter .rndBox ul li:after {position:absolute; display:block; content:''; width:1px; height:100%; background:#fff; top:0; right:-10px; }
.rndCenter .rndBox ul li:last-child::after {display:none;} 
.rndCenter .rndBox ul li img {max-width:65px;}
.rndCenter .rndBox ul li p {padding-top:15px;}

.right_box:after {clear:both; display:block; content:'';}
.right_box .title {text-align:center; color:#fff; padding-bottom:10%;}
.right_box .title h3 {font-size:1.8em; padding-bottom:5px; font-weight:700}
.right_box .title p {}
.right_box .rBox {position:relative; padding:10% 0; min-height:300px;}
.right_box .rBox .more {margin:0 auto; position:absolute; bottom:5%; right:5%; }
.right_box .rBox .more img {max-width:40px;}
.thai {background:#cd1e2a url(../img/bg_tf.jpg) no-repeat right top; }
.catalog {background:#4464a6 url(../img/bg_cata.png) no-repeat right bottom;  padding-bottom:30%; position:relative; background-size:100%;}
.catalog .ctl_img {position:absolute; bottom:0; left:0; right:0; margin:0 auto; width:100%; text-align:center;}
.catalog .ctl_img img {max-width:60%;}

@media all and (min-width:768px) {
.right_box .rBox {float:left; width:50%; padding:5% 0 10%}
}

@media all and (min-width:1000px) {
.notice {padding:20px; border-right:1px solid #e6e6e6; border-left:1px solid #e6e6e6;}
.catalog .ctl_img {width:70%;}

}

@media all and (min-width:1200px) {
#section02 {padding-bottom:80px;}
#section02:after {clear:both; display:block; content:'';}

.col02Box:after,
.col02Box .notice:after {clear:both; display:block; content:'';}
.rndCenter {float:left; width:55%; height:600px;}
.rndCenter .title {text-align:left; margin-bottom:20%;}
.right_box {float:left; width:45%;}
.right_box .rBox {width:100%; padding:0;}
.right_box .title {text-align:left; padding:7% 0 0 7%}

.thai {background-position:bottom; background-size:100%;}

.catalog .ctl_img {left:auto; right:14%; text-align:right; width:auto;}


}

@media all and (min-width:1400px) {
.right_box .title {padding:7% 0 0 7%; }
.catalog .ctl_img {right:5%;}
.catalog .ctl_img img {max-width:75%;}

.rndCenter .rnd_txt {margin-right:10%;}
.right_box .rBox .more {right:8%; bottom:16%;}
.catalog  {background-size:80%;}


}

@media all and (min-width:1600px) {
.catalog .ctl_img {right:13%;}

}






/*section 03*/
#section03 {padding:0;}
#section03 .line {border-top:1px solid #e6e6e6;}
.col02Box {}
.col02Box:after {clear:both; display:block; content:'';}
.col02Box h4 {font-size:1em; font-weight:700; color:#000; margin-bottom:10px;}
.notice {padding:20px 0; border-bottom:1px solid #e6e6e6; position:relative;}
.notice_li{position:relative; overflow:hidden;}
.notice_li ul{display:block; overflow:hidden; width:100%}
.notice_li ul li{overflow:hidden}
.notice_li ul li a{width: calc(100% - 80px); float:left; display:block; text-overflow: ellipsis; overflow:hidden; white-space:nowrap;}
.notice_li ul li span.date{float:right; text-align:right; font-size:0.9em;}
.notice .btn {position:absolute; right:5px; top:21px;max-width:35px;}

.coctBox:after {clear:both; display:block; content:'';}
.coctBox .coct {padding:20px 0; border-bottom:1px solid #e6e6e6; position:relative;}
.coctBox .coct img {position:absolute; top:21px; right:5px; max-width:35px}
.coctBox .coct h4 {position:relative; padding:5px 0 0 50px;}
.coctBox .coct h4:after {position:absolute; content:''; display:block; left:0; top:0; background-size:40px !important;width:40px; height:40px;}
.coctBox .coct01 h4:after {background:url(../img/ico_und01.png) no-repeat left top;}
.coctBox .coct02 h4:after {background:url(../img/ico_und02.png) no-repeat left top;}
.coctBox .coct03 h4:after {background:url(../img/ico_und03.png) no-repeat left top;}

@media all and (min-width:1000px) {
.col02Box .notice {padding:27px 20px; height:80px;}
.col02Box .notice h4 {float:left; width:20%;}
.col02Box .notice .notice_li {float:left; width:80%; padding-top:2px;}

.coctBox .coct {float:left; width:33.333%; border-right:1px solid #e6e6e6; padding:20px;}
.coctBox .coct img {right:20px;}
.notice .btn {right:20px;}
.coctBox .coct01 {border-left:1px solid #e6e6e6;}
}

@media all and (min-width:1200px) {


.col02Box .notice {float:left; width:40%;}
.col02Box .coctBox {float:left; width:60%;}
.coctBox .coct h4 {font-size:.9em; padding-top:8px;}

}





/*footer*/
#footer{background:#333;  color:#7c7c7c; font-size:0.9em; text-align:center; padding:40px 0px;}
#footer .pdinner{max-width:1600px}
#footer .office {}
#footer .office .off_div {margin-bottom:20px;}
#footer .office .off_div h6 {font-weight:700;}
#footer .office .off_div ul {}
#footer .office .off_div ul li {}
#footer .office .off_div ul li span {font-weight:700;}
#footer address{margin:5px 0;}
#footer p{font-size:0.8em; clear:both; margin-top:20px; border-top:1px solid #484848; padding-top:20px;}
#footer p b{/*font-weight:bold; color:#32b3e3*/}


@media all and (min-width:1000px) {
#footer {text-align:left;}
#footer:after,
#footer .office:after {clear:both; display:block; content:'';}
#footer .fot_logo {float:left ;width:23%; padding:80px 3% 0 0;}
#footer .office {float:left ;width:77%;}
#footer .office .off_div {float:left ;width:50%; padding:50px 0;}
#footer address{margin:10px 0;}

}

@media all and (min-width:1400px) {

#footer .office .off_div {width:45%;}

}


/*page up*/
#pageup {position:fixed; z-index:999; right:1%; bottom:5%; width:50px; height:50px; background-image:url('../img/Htop.png');background-repeat: no-repeat;  background-position:center center; background-size: 50px 50px; display:none; cursor:pointer; z-index:4000;}










/*서브레이아웃*/
#sub_visual{position:relative; padding:110px 0 30px; background:url(../img/subvisual.jpg) no-repeat center center; background-size:cover !important}
/*#sub_visual.sub01{ background:url(../img/subvisu01.jpg) no-repeat center center; }
#sub_visual.sub02{ background:url(../img/subvisu02.jpg) no-repeat center center; }
#sub_visual.sub03{ background:url(../img/subvisu01.jpg) no-repeat center center; }
#sub_visual.sub04{ background:url(../img/subvisu02.jpg) no-repeat center center; }
#sub_visual.sub05{ background:url(../img/subvisu01.jpg) no-repeat center center; }
#sub_visual.sub06{ background:url(../img/subvisu02.jpg) no-repeat center center; }*/
/*
.sub010{ background:url(../img/subvisu10.jpg) no-repeat center center; }
.sub011{ background:url(../img/subvisu10.jpg) no-repeat center center; }*/

#sub_visual{color:#ffffff; text-align:center;}
#sub_visual .tit_h2{font-weight:800; font-size:2em;}
#sub_visual .tit_h2 span{display:block;  margin-bottom:10px; font-size:15px; font-weight:800; letter-spacing:0; text-transform:uppercase; position:relative;}
#sub_visual .tit_h2 b{display:block; line-height:1.2}

@media all and (min-width:768px) {
#sub_visual{border-bottom:0}
#sub_visual .tit_h2{font-size:2.5em; }

#sub_visual p{font-size:18px}
#sub_visual .tit_h2 span:after{position:absolute; right:0; top:0; margin:0}
}

@media all and (min-width:1200px) {
#sub_visual .tit_h2{font-size:3em; line-height:1.8}
#sub_visual p{font-size:18px}
#sub_visual{border-bottom:0;}

}


.sub_tab{display:none}
.sub_con{margin: 0 auto; position:relative; min-height:400px; padding:50px 0% 0px; overflow:hidden}
.sub_con:after{content:''; clear:both; display:block}

/*2depth menu*/
#twodepthNav {position:relative; display:none; margin: 0 auto; background:#1c3f95}
#twodepthNav ul {overflow:hidden; text-align:center}
#twodepthNav ul li {position:relative; width:16%; display:inline-block; text-align:center; max-width:150px}
/*#twodepthNav ul li a:before{content:''; width:1px; height:20px; background:rgba(255,255,255,0.3); position:absolute; left:0; top:0; bottom:0; margin: auto;}*/
#twodepthNav ul li a{color:#ffffff}
/*#twodepthNav ul.li02 li{width:50%;}
#twodepthNav ul.li03 li{width:33.333%;}
#twodepthNav ul.li04 li{width:25%;}
#twodepthNav ul.li05 li{width:20%;}
#twodepthNav ul.li06 li{width:16.66%;}
#twodepthNav ul.li07 li{width:14.28%;}*/
#twodepthNav ul.li09 li{width:10.5%;}
#twodepthNav ul li a{display:block; line-height:60px; position:relative}
#twodepthNav ul li a:after{content:''; position:absolute; bottom:0; left:50%; width:0; height:4px; background:#0083ef; transition:all 0.2s cubic-bezier(0.7, 0, 0.3, 1)}
#twodepthNav ul li:hover a:after{width:60px; margin-left:-30px;}
#twodepthNav ul li a:hover{font-weight:600; transition:0.3s}
#twodepthNav ul li:first-child a:before{width:0}
#twodepthNav ul li.active {background:#ffffff}
#twodepthNav ul li.active a{font-weight:600; color:#323232}
#twodepthNav ul li.active a:after{width:60px; margin-left:-30px;}
/*#twodepthNav ul li.active:after {width:10px; height:10px; content: "";position:absolute; background:#f6c94f; top:43%; right:20px; border-radius:30px}*/

#sidemenu {display:none; position:absolute;width:200px;  z-index:9999; top:0px; left:20px} /*기준*/
#sidemenu h2 {display:block;font-size:1.6em;   text-align:center; line-height:1.2;  color:#fff; min-height:100px; padding:60px 0; /*background:rgba(90,19,40,0.8);*/ background:#29343f; position:relative; text-transform:uppercase;  }
#sidemenu h2 span {display:block; font-size:0.9rem; margin-bottom:10px;}

#sidemenu .snblist{border:1px solid #e6e6e6; border-width:0 1px 1px; background:#ffffff;  margin-bottom:30px}
#sidemenu .snblist li a {position:relative; display: block; padding:13px 20px; font-weight:400; border-bottom:1px solid #e6e6e6; color:#323232}
#sidemenu .snblist li:last-child a{border-bottom:0px;}
#sidemenu .snblist li a[target='_blank']:after {font-family: 'FontAwesome'; font-size:11px; display:inline-block; content:"\f08e"; margin: 0 0 2px 5px; vertical-align: middle;}
#sidemenu .snblist li a:hover {text-indent:5px; 	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease; color:#303030; transition:0.3s}
#sidemenu .snblist li.active a {color:#d10000; font-weight:600}
#sidemenu .snblist li a i:after,#sidemenu .snblist li.active a i:after {
	position: absolute;
	top: 16px;
	font-weight:bold;
	right: 10px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	font-family: FontAwesome;
	content: "\f105";
	font-style:normal;  
	color:#808080
}
#sidemenu .snblist li a:hover i:after{right: 7px;}
#sidemenu .snblist li.active a i:after{color:#d10000}
#sidemenu .snblist li.active a:hover i:after{right:7px;}


#sidemenu .snblist li a i:after {background:rgba(255,255,255,0)}

#sidemenu .snblist li a:hover i:after {
	-webkit-transform: translateY(-50%) translateX(20%);
	-moz-transform: translateY(-50%) translateX(20%);
	-ms-transform: translateY(-50%) translateX(20%);
	-o-transform: translateY(-50%) translateX(20%);
	transform: translateY(0) translateX(20%);
	color:#fff;
	background:rgba(255, 255, 255, 1);
}

#sidemenu .snblist li.select a:hover i:after {
	-webkit-transform: none;
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	transform: none;
	color:#fff;
	background:rgba(255, 255, 255, 1);
}



#fl_menu{display:none;}
.con{position:relative; min-height:500px;}
.conh3{font-size:1.4em; font-weight:500; color:#000000; text-align:center;}
.conh3:after{content:''; width:40px; height:1px; background:#000000; display:block; margin:10px auto 30px;}

.path{display:block;}
.path li{font-size:12px; display:inline-block; vertical-align:top;}
.path li:before{content:'\f105'; font-family:'FontAwesome'; display:inline-block; padding:0px 10px}
.path li:first-child:before{display:none;}

/*패스메뉴
.dropbtn {background:none; width:100%; text-align:left; border:none; display:inline-block; height:auto; position:relative; color:#ffffff; font-size:12px;}
.dropbtn:after{font-family:'FontAwesome'; content:'\f078'; position:absolute; right:10px; color:#ffffff; font-size:8px; line-height:36px;}


.dropmenu {display: none; width:100%; position: absolute;  z-index: 5; border-width:0 1px 1px 1px; margin-top:-1px}
.dropmenu a {display:block; color:inherit; font-size:12px}
.dropmenu.show {display:block;}

.dropmenu ul{padding:10px; background:#1c3f95; }
.dropmenu ul li{padding:5px 0px; font-size:0.9em; cursor: pointer; color:#ffffff; text-align:left; line-height:32px;}
*/





@media all and (min-width:768px) {
.sub_con{padding:50px 0px 0px}
.conh3{font-size:2em}
.conh3:after{margin:20px auto 40px;}

#sub_visual{padding:140px 0px 50px;}
#twodepthNav {position:relative; display:block;}


}

@media all and (min-width:1200px) {
#sub_visual{padding:180px 0px 80px;}
.subwrap{margin: 0 auto; position:relative;}
.sub_tab{display:block;background:#0788c7; padding:10px 0px; text-align:right; color:#ffffff; font-size:0.85em; text-align:right;}
.sub_tab h3, .sub_tab p{display:inline-block; margin-left:15px; color:#fbdf40; font-weight:bold}
.sub_tab h3{color:#ffffff}
.sub_tab h3 span{margin-right:10px; text-transform:uppercase; color:#fbdf40}
.sub_tab p {border-radius:50px; background:#462e16; padding:5px 10px;}

#twodepthNav ul.li02 li{width:25%;}

/*#sub_visual{padding:140px 0 120px;}*/

.sub_con{position:relative; width:100%; margin: 0 auto; min-height:650px; padding:80px 0px 0px}
.con{width:1160px; margin:0 auto; min-height:800px;}
.conh3:after{margin:20px auto 60px;}

}

@media all and (min-width:1640px) {
#sidemenu{display:block}
#fl_menu{display:block; position:absolute; right:20px; z-index:9999; width:125px; top:0px; height:600px}
#fl_menu .label{text-align:center; line-height:80px; font-size:18px; font-weight:bold; background:#29343f; color:#fff;}
#fl_menu ul {text-align:center; padding:10px 0px 30px; background:#ffffff}
#fl_menu ul li a{font-size:16px; font-weight:600; padding:8px 0px}
#fl_menu ul li span{display:block}
#fl_menu .menu{display:block; border:1px solid #dcdcdc}
#fl_menu .menu img{max-width:60px}
#fl_menu .menu .menu_item{display:block; background:#ffffff; color:#323232; }


}

/*컬러패스
#sub_drop{position:relative; background:#1c3f95;  font-size:0.9em}
#sub_drop .home a{display:block; line-height:45px; padding:0 20px; border-left:1px solid #dcdcdc; border-color:rgba(255,255,255,0.2);}
#sub_drop .home{min-width:46px !Important}
#sub_drop .home img{display:inline-block; vertical-align:middle}
#sub_drop .dropdown{float:left; border-right:1px solid #dcdcdc;border-color:rgba(255,255,255,0.2); position:relative;}
#sub_drop .dropdown.deph02{min-width:35%}
#sub_drop .dropbtn {background:#1c3f95;  width:100%; text-align:left; display:inline-block; height:auto; position:relative; line-height:45px; padding:0 25px 0 10px; cursor:pointer; color:#ffffff;}
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:10px; color:#ffffff; font-size:14px; top:0; bottom:0; margin:auto;}

#sub_drop .dropdown ul{}
#sub_drop .dropdown ul li{padding:5px 10px; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #dcdcdc; box-sizing:content-box; left:-1px; width:100%;}
#sub_drop .dropmenu a{display:block; line-height:30px; color:#000000; }
#sub_drop .dropmenu a:hover {color:#1c3f95; font-weight:600;}
#sub_drop .dropdown .show {display:block;}

#sub_drop:after{display:block; content:''; clear:both;}

@media all and (min-width:768px) {
#sub_drop .dropbtn{padding:0 25px 0 20px}
#sub_drop .dropdown ul li{padding:5px 20px; }
#sub_drop .dropdown{min-width:200px}
#sub_drop .dropdown.deph02{min-width:200px}
#sub_drop .dropmenu a{line-height:40px;}
#sub_drop .home a{line-height:60px;} 
#sub_drop .dropbtn {line-height:60px}
#sub_drop .dropbtn:after{right:15px}

}

/*흰색패스*/
#sub_drop{position:relative; border:1px solid #dcdcdc; border-width:1px 0px; z-index:100}
#sub_drop .home a{display:block; line-height:45px; padding:0 20px; border-left:1px solid #dcdcdc}
#sub_drop .home{min-width:46px !Important}
#sub_drop .home img{display:inline-block; vertical-align:middle}
#sub_drop .dropdown{float:left; border-right:1px solid #dcdcdc; position:relative; z-index:101}
#sub_drop .dropdown.deph02{min-width:35%}
#sub_drop .dropbtn {background:#ffffff;  width:100%; text-align:left; display:inline-block; height:auto; position:relative; line-height:45px; padding:0 25px 0 10px; cursor:pointer; color:#000000;}
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:10px; color:#000000; font-size:14px; top:0; bottom:0; margin:auto;}

#sub_drop .dropdown ul{}
#sub_drop .dropdown ul li{padding:5px 10px; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #dcdcdc; box-sizing:content-box; left:-1px; width:100%;}
#sub_drop .dropmenu a{display:block; line-height:30px; color:#000000; }
#sub_drop .dropmenu a:hover {color:#1c3f95; font-weight:600;}
#sub_drop .dropdown .show {display:block;}

#sub_drop:after{display:block; content:''; clear:both;}

@media all and (min-width:768px) {
#sub_drop .dropbtn{padding:0 25px 0 20px}
#sub_drop .dropdown ul li{padding:5px 20px; }
#sub_drop .dropdown{min-width:200px}
#sub_drop .dropdown.deph02{min-width:300px}
#sub_drop .dropmenu a{line-height:40px;}
#sub_drop .home a{line-height:60px;} 
#sub_drop .dropbtn {line-height:60px}
#sub_drop .dropbtn:after{right:15px}

}






/*텍스트효과*/

.motion01{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}
.motion02{animation-name:sub_tt;animation-duration:1000ms;animation-fill-mode:both;animation-delay:200ms;animation-timing-fonction:ease-out;}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt { 
	0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 1;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity:1;}
}
/* Chrome, Safari, Opera */ 
@-webkit-keyframes sub_tt {
    0%   {top: 30px; opacity: 0;}
    100% {top: 0; opacity: 0;}
}
/* Standard syntax */
@keyframes sub_tt {
     0%   {top: 30px; opacity: 0;}
    100% {top: 0px; opacity: 1;}
}






@media all and (max-width:1200px) {
#layerPopup0{top:100px !Important; left:0 !Important;}
#layerPopup1{top:435px !Important; left:0 !Important;}
#layerPopup2{top:770px !Important; left:0 !Important;}
#layerPopup3{top:1105px !Important; left:0 !Important;}
#layerPopup4{top:1440px !Important; left:0 !Important;}
#layerPopup5{top:1775px !Important; left:0 !Important;}
}