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

.slide{position: relative;}
.slide_black_bg{position: absolute; width: 100%; height: 97%; background-color: rgba(0,0,0,0.2); background-image: url("../img/bg_video.jpg"); background-repeat: no-repeat; background-position: center; z-index: -1;}
.slide_box{width: 100%; overflow:hidden; height: auto;}
.slide_box video {width: 100%;}
.mobile_bg{display: none; height:920px; background: url("../img/bg_video.jpg") no-repeat 50%;}

@media all and (min-width:1200px) {
.slide_black_bg {width:100%;}
.slide_box{ height: 950px;}
}

/*common*/

.inner{max-width:1200px; width:100%; position:relative; margin: 0 auto; padding:0 3%;}
.pdinner{max-width: 1500px;padding:0 3%;position:relative;margin: 0 auto;}
.ofh{overflow:hidden;}

.pdw3 {padding:0 3%;}

.mEnter{display:block;}
.pEnter{display:inline;}

.mb10{margin-bottom:10px !important;}
.mb20{margin-bottom:20px !important;}
.mb50{margin-bottom:50px !important;}
.mb60{margin-bottom:60px !important;}
.mb{margin-bottom:30px !important;}
.bmb{margin-bottom:40px !important}
.pb{padding-bottom:30px !important}
.bpb{padding-bottom:40px !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}
.clr_gry {color:#9c9c9c;}
.upcase{text-transform:uppercase}

.btn_more{display:inline-block; color:#ffffff; border:1px solid #ffffff; 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) {
.pEnter{display:block;}
.mb{margin-bottom:40px !important; }
.bmb{margin-bottom:60px !important;}
.bmb2 {margin-bottom:120px !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:16px;}
.mEnter{display:inline-block;}
.mb{margin-bottom:60px !important}
.bmb{margin-bottom:150px !important}

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


/* ==== Slider Image Transition === */
@-webkit-keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes ProgressDots{from{width:0px;}to{width:100%;}}
@keyframes zoomout {	0% { transform: scale(1.1); }    100% {        transform: scale(1.0);    }}
@-webkit-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);}}


/* ==== 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 */
.slick-arrow{position: absolute;top: 40%;text-indent:-999999px;display: block;width: 20px;height: 20px;border:0;cursor: pointer;background: #f8f8f800; /*! border:1px solid #969696; */z-index:10}
.slick-arrow:before{content:'';display:block;position:absolute;font-family:'FontAwesome'; /*! width:20px; */height: 54px;line-height: 20px;left:0;right:0;bottom:0;top:0;margin:auto;text-indent:0;width: 28px;}
.slick-arrow.slick-prev:before{background: url(../img/slick_prev.png) no-repeat;}
.slick-arrow.slick-next:before{background: url(../img/slick_next.png) no-repeat;}
.slick-arrow:before{content:'\f104'; font-size:20px;}
.slick-next{right:0;}
.slick-next:before{content:'\f105'; }

/*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}


/**/
.vided_bg {position:absolute; top:0; left:0; right:0; margin:0 auto; height:300px;  z-index:1; }
.vided_bg:after {position:absolute;display:block; content:'';  width:100%; height:300px; background: linear-gradient(to bottom, rgba(0,0,0,.4) 20%, rgba(0,0,0,0) 100%);}

.main_video {display:none;}
.wrap{/* max-width:2000px; */min-width:320px;width:100%;margin: 0 auto;position:relative;left: 0;right: 0;font-family: pretendard;}
.mainslider{position:relative; margin:0 auto; overflow:hidden}
.mainslider .visu{height:500px; background:#ffffff; position:relative; color:#ffffff;  line-height:1.3}
.mainslider .visu:before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover !important;}
.mainslider .main01:before{background:url(../img/main01.jpg) no-repeat 65% center}
.mainslider .main02:before{background:url(../img/main02.jpg) no-repeat center center}
.mainslider .main03:before{background:url(../img/main03.jpg) no-repeat center center}

.mainslider .slick-active .visu: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;}


.txtLine{display:block; overflow:hidden}
.txtLine em{overflow:hidden; display:block;}
.txtLine em{font-weight:inherit; transform:translate(0, 100%);-webkit-transform:translate(0, 100%); transition: transform .85s cubic-bezier(0.25, 0.46, 0.45, 0.94);-webkit-transition:transform .85s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.slick-active .txtLine em{opacity:1;transform:translate(0, 0);-webkit-transform:translate(0, 0); }


@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);}}


@media all and (min-width:768px) {
.mainslider .visu{height:750px;}
.mainslider .visu h2 .msr{font-size:16px;}
}


@media all and (min-width:1200px) {
.mainslider .visu .txt{top:250px}
/*.mainslider .visu{height:950px;}*/

.mainslider .visu {min-height:900px; max-height:900px; height:100vh;}
.mainslider .visu:before{background-position:center center !important}
.mainslider{position:relative; }
}


/*main visual bg*/

#section00 .hide{height:0}
.mainvisual {position:relative; overflow:hidden; z-index:0}
.mainvisual .bx-wrapper .bx-viewpor{background:#323232}
.mainvisual #mainslider li{position:relative; height:450px; }


.mainvisual #mainslider li:before{content:'';display:block;position:absolute;width:100%;height:100%;background-size:cover !important;}
.mainvisual #mainslider li.main01:before{background:url(/img/main_visual01.jpg) no-repeat center center;}
.mainvisual #mainslider li.main02:before{background: url(/img/main_visual02.jpg) no-repeat center center;}
.mainvisual #mainslider li.main03:before{background: url(/img/main_visual03.jpg) no-repeat center center;}
.mainvisual #mainslider li:before{animation: zoomout 0s ease-in-out infinite alternate;    -webkit-animation: zoomout 0s ease-in-out infinite alternate;}

.mainvisual #mainslider li:after{display:none;}

.mainvisual.dot_btn .bx-pager{position:absolute;color:#ffffff;overflow:hidden;max-width:1200px;width:94%;margin:0 auto;left:0;right:0;bottom: 50px;text-align:center;z-index:100;}
.mainvisual.dot_btn .bx-pager .bx-pager-item{display:inline-block;margin: 0 15px !important;text-align:center;position:relative;background:none; vertical-align: middle;}
.mainvisual.dot_btn .bx-pager .bx-pager-item a{color:#ffffff;opacity:0.9;width: auto; display:block;margin: 0 0px;font-size: 0px; height:auto;}
.mainvisual.dot_btn .bx-pager .bx-pager-item a:before{border-radius: 50%;content:'';/* position:absolute; */display:block;width: 13px;/* background: rgba(244,244,244,0.5); */top:0;left:0;bottom:0;right:0;margin: auto;/* border-radius:500px; */transition: 0.3s;}
.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:before {width: 43px;border-radius:30px;background: rgba(244,244,244,1);}
.mainvisual.dot_btn .bx-pager .bx-pager-item a:before{width:6px;height:6px;border-radius:30px;/* background: rgba(244,244,244,1); */border: 2px solid #fff;}
.mainvisual.dot_btn .bx-pager .bx-pager-item a.active:before {width: 10px;height: 10px;border: 0px;background: #fff;}

#mainslider .txt_box{text-align: center;width: 100% !important;border: none;}
#mainslider .t1{font-size: 13px;margin-bottom: 10px;font-weight: 400;}
#mainslider .t2{font-size: 36px;font-weight: 600;line-height: 1;}
#mainslider .t4{display: none;}
#mainslider .more{margin-top: 59px;}



@media all and (min-width:1200px) {
	.mainvisual #mainslider li{min-height:730px;height: 80vh;background-size: cover !important; max-height:1280px;}
	.mainvisual .bx-wrapper .bx-has-controls-direction{bottom:200px;}
	.mainvisual  #bx-pager{width:1200px; padding:0 20px;}
	.mainvisual.dot_btn .bx-pager {bottom: 80px;}
	.mainvisual.dot_btn .bx-pager .bx-pager-item a{width: auto;margin: 0 1px;}
	.mainvisual.dot_btn .bx-pager .bx-pager-item a:before{width:8px; height:8px;}
	.mainvisual.dot_btn .bx-pager .bx-pager-item a.active:before {width: 12px; height:12px;}
	.mainvisual .visu h2 .yllTxt{font-size:103px;}
	.mainvisual .visu h2:before {right:33%;}
	#mainslider .t1{font-size: 18px;}
    #mainslider .t2{font-size: 70px;}
	#mainslider .line{width: 38px;height: 3px;background: #fff;display: block;}
	#mainslider .t4{display: block;font-size: 20px;color: rgba(244,244,244,0.9);/* margin-top: 36px; */line-height: 1.5;font-weight: 500;margin-bottom: 0px;}
	.pc_inner{max-width: 1240px;margin:0 auto;}
	.pc_inner:after{display:block; clear:both; content:"";}
	.mainvisual .visu {top: 350px;}
	.mainvisual .visu h2:before {right:36%;}
	.mainvisual .visu a{margin:0px;}
	/*.mainvisual #mainslider li:after{content:'';display:block;position:absolute;background:url(../img/scr_down.png)no-repeat;background-size: 90%;width:11px;height:110px;right: 14%;top: 79%;}*/
}


.main_txt {position:absolute;top: 40%;left: 0;right:0;margin:0 auto;/*! text-align: center; */color:#fff;}
.main_txt h2{font-size: 2.2em;font-weight:700;/*! text-align: center; *//* text-align: center; */}
.main_txt p{position:relative;font-size: 1.5em;color: #ffffffc7;/*! text-align: center; *//* text-align: center; */}
.main_txt p.txt_nm {font-size:1.2em; padding-bottom:10px;}

.mainslider .visu .txt{margin: 0 auto; position:absolute; width:100%;  padding:0px 3%; text-align:center; left:0; right:0; top:160px;}
.mainslider .visu h2{  /*webkit-animation:fadeOutRight 0.5s both;       animation:fadeOutRight 0.5s both;*/}
.mainslider .visu h2 .msr{font-size:14px; color:#28cfff}
.mainslider .visu.slick-active h2{ -webkit-animation:fadeInDown  0.5s both  0.5s;    animation:fadeInDown  0.5s both  0.5s;}
.mainslider .visu h2 b{color:#ffffff}
.mainslider .visu p{margin:auto; line-height:1.5}

.mainslider .slick-dots {display:none;}
/*.mainslider .slick-dots{position: absolute;    bottom: 220px;    display: block;    width: 100%;    padding: 0;    margin: 0;   text-align: center; z-index:10}
.mainslider .slick-dots li{position: relative;  display: inline-block;  width: 20px;  height: 20px;  margin: 0 5px;  padding: 0;   cursor: pointer;}
.mainslider .slick-dots li button{ font-size: 0;   line-height: 0;  display: block;  width: 20px;  height: 20px; border-radius:500px;  padding: 5px;  cursor: pointer;  color: transparent;  border: 0;  outline: none;  background:none; border:5px solid #ffffff; opacity:0.5}
.mainslider .slick-dots li.slick-active button{border-color:#28cfff; opacity:1}*/


/*mainslider text css*/
.mainslider h2{font-size:2em; font-weight:700;}
.mainslider p{position:relative; }
.mainslider p.txt_nm {font-size:1.2em; padding-bottom:10px;}
.mainslider .more {margin-top:10px; border:2px solid #fff; display:inline-block; padding:10px;}
.click_h {display:none;}

@media all and (min-width:370px) {
.mainslider h2,
.main_txt h2 {font-size: 2.5em;}
}


@media all and (min-width:768px) {
.mainslider .visu .txt {text-align:left;}
.mainslider p.txt_nm,
.main_txt p.txt_nm {font-size:1.68em;}
.mainslider p,
.main_txt p {font-size:1.2em;font-weight: 500;}
.mainslider .more {margin-top:20px;}
}

@media all and (min-width:980px) {
.mainslider h2,
.main_txt h2 {font-size: 3em;}

}


@media all and (min-width:1200px) {
.main_video {display:block;}
.main_top {position:relative;}
.mainslider {display:none;}
.mainslider .visu .txt {top:280px; max-width:1400px;}
.main_txt {/* top:22%; */max-width: 1400px;z-index:1;} 
.mainslider h2 {font-size:4em; }
.main_txt h2 {font-size: 3em;}
.main_txt p.txt_nm {font-size:2.3em;}
.main_txt p {font-size: 2em;}

.click_h {display:block; position:absolute; z-index:3; right:50px; top:38%; bottom:0; margin:0 auto;  width:7%;}
.click_h ul {position:relative;}
.click_h ul:before,
.click_h ul:after {position:absolute; display:block; content:''; left:0; right:0; margin:0 auto; background:url(../img/acc.png) no-repeat center; width:21px; height:10px; background-size:100%; }
.click_h ul:before {top:-30px;}
.click_h ul:after {bottom:-30px; transform: rotate(180deg)}
.click_h ul li {text-align:center; padding:5px 0 ;}
.click_h ul li a {font-size:14px; font-weight:700; color:#fff;}
.click_h ul li a:hover {background:#004098; padding:5px;}
}


@media all and (min-width:1400px) {
.main_txt {top: 40%;} 
.main_video .background {padding-bottom:50% !important}
}



/*section 공통*/
.sub_tit{ font-size: 15px; color: #0060ba; font-weight: 800;}
.main_tit{font-size: 2.6em;color: #333;font-weight: 800;line-height: 1.3;}
.main_tit2{font-size: 2em;color: #333;font-weight: 800;line-height: 1.3;}
.com_wrap ,
.com_wrap2{padding: 70px 0px;}
.section_top span{display:none;}

@media all and (min-width:768px) {
.section_top span{display:block;width:110px;background:#0060ba;position:absolute;right: 6%;top: 22%;text-align:left;color:#fff;padding:7px 18px;border-radius:30px;font-size: 14px;}
.section_top span:after{display:block; content:''; position:absolute; background:url(../img/ic_arr.png)no-repeat; background-size:100%; width:5px; height:10px; right:15%; top:14px;}
.com_wrap2{padding: 80px 15px 0px 15px;}
}

@media all and (min-width:960px) {
.com_wrap{padding: 100px 0px;}
.com_wrap2{padding: 100px 0px 0px 0px;}
.section_top span{right: 3%;}
}

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


/*section01*/

#section01:before{display: block;clear: both;content: "";background: url(../img/com_bg.png) no-repeat top right;width: 100%;/* background-size: 100%; */height: 680px;position: absolute;z-index: 0;}
#section01 .com_wrap .com_box p{overflow: hidden;}
#section01 .com_wrap .com_box p img{border-radius: 40px 0px 0px 0px;transition: all 0.2s linear;}
#section01 .com_wrap .com_box p:hover img{transform: scale(0.99);}
#section01 .com_wrap .com_box h5{font-size: 1.6em;font-weight: 800;}
#section01 .com_wrap .com_box h5 span{font-size: 14px;color: #0060ba;font-weight: 700;margin-left: 10px;}
#section01 .com_wrap .com_box p{font-size: 1.1em;color:#747474;margin-bottom:20px;}
#section01 .com_wrap:after{display: block; clear: both; content: "";}
#section01:after{display: block;clear: both;content: ""; /*! border-bottom:2px solid #efefef54; */}
#section01 .com_wrap .box{display:flex; flex-wrap:wrap;}

@media all and (min-width:768px) {
#section01 .com_wrap .box .com_box{width:32%; margin-right:2%;}
#section01 .com_wrap .box .com_box:last-of-type{margin-right:0%;}
#section01 .com_wrap .box .com_box p{margin-bottom:0px;}
}

@media all and (min-width:980px) {
#section01 .com_wrap .com_box{/* width:23%; */}
}



/*section02*/

#section02{position:relative; overflow:hidden}
#section02 h3.section_h{font-size:1.4em;  text-align:left;}

#section02:before{display: block;clear: both;content: "";width: 100%;height: 100%;position: absolute;z-index: -99;background: #f8f8f8;}
#section02 .photo_li{position:relative}
#section02 .photo_li li .txt{display:block;position: absolute;width: 100%;color: #fff;bottom: 0;padding: 7%; z-index:3}
#section02 .photo_li li .txt:after{display: block;clear: both;content: ""; width:25px; height:25px; position:absolute; background:url(../img/ico_go.png)no-repeat; right:30px; bottom:30px; background-size:100%;}
#section02 .photo_li li .txt p{font-size: 1.6em;font-weight: 800;margin-bottom: 10px;}
#section02 .photo_li li .txt span{font-weight: 200;font-size: 1.1em;}

#section02 .photo_li li .photo{/* margin-bottom: 100px; */position:relative;/* overflow:hidden; */padding-bottom: 100%;}
#section02 .photo_li li .photo.eff01{background:url(../img/prod_img01.png);background-repeat:no-repeat;background-size:100%;}
#section02 .photo_li li .photo.eff02{background:url(../img/prod_img02.png);background-repeat:no-repeat;background-size:100%;}
#section02 .photo_li li .photo.eff03{background:url(../img/prod_img03.png);background-repeat:no-repeat;background-size:100%;}
/*#section02 .photo_li li .photo.eff04{background:url(../img/prod_img04.png);background-repeat:no-repeat;background-size:100%;}
#section02 .photo_li li .photo.eff05{background:url(../img/prod_img05.png);background-repeat:no-repeat;background-size:100%;}
#section02 .photo_li li .photo.eff06{background:url(../img/prod_img06.png);background-repeat:no-repeat;background-size:100%;}*/
#section02 .photo_li li:nth-child(odd) .photo:before {content:''; width:100%; position:absolute; top:0; left:0; right:0; height:100%;  z-index:1; background:linear-gradient(0deg, #0060ba 0%, rgb(255 255 255 / 0%) 60%)}
#section02 .photo_li li:nth-child(even) .photo:before {content:''; width:100%; position:absolute; top:0; left:0; right:0; height:100%;  z-index:1; background:linear-gradient(0deg, #8c8c8c 0%, rgb(255 255 255 / 0%) 60%)}
#section02 .photo_li li span{display:block; font-weight:600; -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap:break-word; 
line-height: 1.3;
height: 2.6em;
overflow:hidden;
text-overflow:ellipsis;
white-space:normal;
word-break:break-all;
}
#section02 .photo_li .slick-arrow{/* top: 40%; */}
#section02 .photo_li .slick-arrow.slick-prev{left: -80px;position: absolute;color: #f8f8f800;}
#section02 .photo_li .slick-arrow.slick-next{right:-80px;position: absolute;color: #f8f8f800;}

@media all and (min-width:768px) {
#section02 .section_top{overflow:hidden}
#section02 h3.section_h{font-size:2em; padding-left:1.5%; width:40%; float:left;}
#section02 .photo_li ul li{width:30.33%; margin:0 1.5%}
#section02 .photo_li li .photo{margin-bottom: 100px;margin-right: 5%;}

#section02 .photo_li li .txt{padding: 10%;}
#section02 .photo_li li .txt:after{width:20px; height:20px; right:20px; bottom:28px;}
#section02 .photo_li li .txt p{margin-bottom:5px;}
}


@media all and (min-width:1200px) {
#section02 .photo_li li .txt:after{width:25px; height:25px; right:30px; bottom:35px;}
}



/*section03*/
/*#section03:before{display: block;clear: both;content: "";background: url(../img/news_bg.png) no-repeat top right;width: 800px;background-size: 40%;height: 600px;position: absolute;z-index: 0;right: 0;}*/
#section03:before{display: block;clear: both;content: "";width: 100%;height: 900px;position: absolute;z-index: -99;background: #fafafa8f;}
/*#section03 .pdinner:after{display: block;clear: both;content: ""; background: url(../img/news_bg.png) no-repeat top right;width: 800px;background-size: 80%;height: 600px;position: absolute;z-index: -1;right: -20%; top:0;}*/
#section03 .news_box{display:flex; flex-direction: column;}
#section03 .w_box{ background-color: #fff; border: 1px solid #e6e6e6; padding: 30px; margin-bottom: 20px;}

#section03 .w_box p{
  font-size: 1em;
  font-weight:300;
  color:#747474;
  /* margin-bottom: 50px; */
  text-overflow: ellipsis;
  max-width: calc(100% - 0px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  }
#section03 .w_box span.num{color: #8e8e8e;font-size:0.9em;}
#section03 h6{font-size: 1.4em;font-weight: 800;margin: 20px 0;}
#section03 h6.fcw{color:#fff; margin-top:0px; margin-bottom:15px}

#section03 .info_box{display:flex; flex-direction:column; position: relative;}
#section03 .info_box p{color:#fff; font-size: 1em; font-weight:300;}
#section03 .info_box .s_box{padding: 30px; margin-bottom: 20px;}
#section03 .info_box .s_box:after{display: block;clear: both;content: "";width: 25px;height: 25px;position: absolute;background: url(../img/ico_go.png)no-repeat;right: 30px;background-size: 100%;bottom: 20px;}
#section03 .info_box .s_box.green{background: #00a653;position: relative;}
#section03 .info_box .s_box.blue{background: #0060ba;position: relative;}
#section03 .info_box .s_box.navy{background: #08223b;position: relative;}
#section03 .info_box .s_box.gray{background: #77838f;position: relative;}
#section03 .info_box .g_box{background:#77838f;padding: 30px;margin-bottom: 20px;position: relative;}
#section03 .info_box .g_box:after{display: block;clear: both;content: "";width: 30px;height:40px;position: absolute;background: url(../img/ico_add.png)no-repeat;right: 30px;background-size: 100%;bottom: 35%;}

#section03 .section_top span{top: 10%;}

@media all and (min-width:768px) {
#section03 .news_box{flex-direction:row;flex-wrap:wrap;}
#section03 .info_box{flex-wrap: wrap;flex-direction: row;/* margin-bottom: 20px; */}
#section03 .w_box{flex-grow: 1;margin:1%;width: 45%;}

#section03 .info_box .s_box{width:48%; margin:1%;}
#section03 .info_box .g_box{width:99%; margin:1%;}

}


@media all and (min-width:980px) {
#section03 .news_box{flex-wrap: nowrap;margin-bottom: 10px;}
#section03 .info_box{flex-wrap: nowrap;}

#section03 .w_box:first-child{margin-left:0%}
#section03 .w_box:last-child{ margin-right:0%}
#section03 .w_box h6{/* min-height: 60px; */}

#section03 .section_top span{top: 20%;}
#section03 .info_box .s_box{width: 45%;margin: 1%;/* margin-right:2%; */}
#section03 .info_box .s_box:first-of-type{margin-left: 0%;}
#section03 .info_box .s_box:last-of-type{margin-right:0%;}
#section03 .info_box .g_box{/*! width:%; */ margin:0%;}
}

@media all and (min-width:1200px) {
#section03 .info_box .s_box{width: 45%;}
}

/*footer*/
#footer{background: #424242;color: #a0a0a0;padding: 70px 0px;}
#footer:after{display: block; clear: both; content: "";}
#footer > .pdinner{padding:30px 3% 0px;}
#footer h4{font-weight:700;}
#footer .pdinner{max-width:1400px}

#footer .foot_li li{float:left;margin-right: 50px;display:block;color: #c7c7c7;font-size: 0.9em;}
#footer .foot_li:before{display: block;clear: both;content: "";top: 35px;border-bottom: 1px solid #a0a0a0;position:absolute;width: 93%;}
#footer .foot_li:after{display:none;}

#footer .foot_bottom{margin-top: 50px;}
#footer .foot_bottom p{font-size: 0.8em;font-weight: 500;}



@media all and (min-width:768px) {
#footer > .pdinner{padding:50px 3% 0px; overflow:hidden}
#footer .foot_li:before{width:83%}
#footer .foot_li:after{display: block;clear: both;content: "";background: url(../img/logo_black.png) no-repeat;position: absolute;width: 100px;height: 70px;right: 0;top: 20px;}
}

@media all and (min-width:1200px) {
#footer > .pdinner{padding:80px 20px 0px; overflow:hidden}
#footer .foot_li:before{width: 90%;top: 45px;}
}


/*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;}

@-webkit-keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-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}}@keyframes bounce-top{0%{-webkit-transform:translateY(-45px);transform:translateY(-45px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{-webkit-transform:translateY(-24px);transform:translateY(-24px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}65%{-webkit-transform:translateY(-12px);transform:translateY(-12px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}82%{-webkit-transform:translateY(-6px);transform:translateY(-6px);-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 text-pop-up-top
{0%{-webkit-transform:translateY(0);transform:translateY(0);
-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}
100%{-webkit-transform:translateY(-10px);transform:translateY(-10px);
-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}}
@keyframes text-pop-up-top{0%{-webkit-transform:translateY(0);transform:translateY(0);
-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}
100%{-webkit-transform:translateY(-10px);transform:translateY(-10px);
-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}}




/*서브레이아웃*/
#sub_visual{position:relative; padding:130px 0 90px; background:#0098e2;  margin:0 auto;  background:linear-gradient(45deg, #0098e2 0%, #dadf00 100%); background:#808080; background-size:cover !important}
#sub_visual{ background:url(../img/subvis01.jpg) no-repeat center center; }
#sub_visual.sub01{ background:url(../img/subvis01.jpg) no-repeat center center; }
#sub_visual.sub02{ background:url(../img/subvis02.jpg) no-repeat center center; }
#sub_visual.sub03{ background:url(../img/subvis03.jpg) no-repeat center center; }
#sub_visual.sub04{ background:url(../img/subvis04.jpg) no-repeat center center; }
#sub_visual.sub05{ background:url(../img/subvis05.jpg) no-repeat center center; }
#sub_visual.sub06{ background:url(../img/subvis06.jpg) no-repeat center center; }


#sub_visual{color:#ffffff; text-align:center;}
#sub_visual .tit_h2{font-weight:600; 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:2.8em; }
#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.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: 800;color:#000000;text-align:center;margin-bottom:30px;}

/*.conh3:after{content:''; width:40px; height:1px; background:#000000; display:block; margin:10px auto 30px;}*/

.conh4{font-size:1.4em; font-weight:700; color:#000000; text-align:center;}
.conh4: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;}


@media all and (min-width:768px) {
.sub_con{padding:70px 0px 0px}
.conh3{font-size:2em;  margin-bottom:40px;}
.conh3:after{/*! margin:20px auto 40px; */}
.conh4{font-size:2em}
.conh4:after{margin:20px auto 40px;}
#sub_visual{padding:150px 0px 100px;}
#twodepthNav {position:relative; display:block;}
}


@media all and (min-width:1200px) {
#sub_visual{padding:150px 0px 100px;border-bottom: 1px solid #f3f3f3;}
.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;}

.conh3:after{/* content:''; */position:absolute;background-size:cover !important;z-index:0;display: block;width: 40px;height: 3px;background-color: #0060ba;margin: 0 auto;left: 0;/*! top:200px; */bottom: 0;right: 0;}

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

.sub_con{position:relative; width:100%; margin: 0 auto; min-height:650px; padding:60px 0px 0px}
.con{width:1160px; margin:0 auto; min-height:800px;}
.conh3{text-align:left;font-size:2.3em;/* margin-bottom:50px; */position: relative;/* padding-bottom: 30px; */}
.conh3.tac{text-align:center}
.conh3.tac:after{/*! margin:20px auto 60px; */}
.conh3:after{/*! margin:20px 0 60px; */}
.conh4: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; }
}




/*흰색패스*/

.menu_wrap{position:absolute; bottom:0; left:0; right:0; margin:auto; width:100%; max-width:1400px !Important}
#sub_drop{width:100%; position:relative; z-index:10; background:#fff;}

#sub_drop .dropdown{float:left; width:40%; position:relative; z-index:1; display:none}
#sub_drop .dropdown.deph02{width:60%}
#sub_drop .dropdown.deph02:before{content:''; width:1px; height:15px; background:#acacac; opacity:0.5; position:absolute; left:0; top:0; bottom:0; margin:auto}
#sub_drop .dropbtn {width:100%; text-align:left; display:inline-block;  height:auto; position:relative; line-height:55px; padding:0 25px 0 10px; cursor:pointer; color:#000; position:relative; font-weight:600;}
#sub_drop .dropbtn:after{font-family:'FontAwesome'; content:'\f107'; position:absolute; right:20px; color:#acacac; font-size:14px; top:0; bottom:0; margin:auto;}

#sub_drop .dropdown ul{}
#sub_drop .dropdown ul li{padding:5px 10px; text-align:left; }
#sub_drop .dropmenu {display: none;  position: absolute;  z-index: 5; background:#ffffff; border:1px solid #f3f3f3;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;}

#sub_drop .home{display:none; min-width:46px !Important}
#sub_drop .home:before{content:''; width:1px; height:15px; background:#acacac; opacity:0.5; position:absolute; left:0; top:0; bottom:0; margin:auto}
#sub_drop .home a{display:block; line-height:55px; padding:0 10px; text-align:center}
#sub_drop .home img{display:inline-block; vertical-align:middle}

@media all and (min-width:360px) {
#sub_drop{width:94%;margin:auto;}
}


@media all and (min-width:540px) {
#sub_drop .dropdown{display:block; }
#sub_drop{max-width:330px; margin:0}
#sub_drop .dropdown{width:calc(45% - 55px);}
#sub_drop .dropdown.deph02{width:248px}
#sub_drop .home{display:block; width:80px !Important}
#sub_drop .dropbtn{padding:0 25px 0 20px; line-height:60px}
#sub_drop .dropdown ul li{padding:7px 20px; }
}

@media all and (min-width:1200px) {
.menu_wrap{left:0; right:0; margin:auto; width:100%;/*! border-bottom: 1px solid #f3f3f3; */}
#sub_drop{width:100%; left:0; right:auto; max-width:330px;}
#sub_drop .dropdown{min-width:auto !important}
#sub_drop .dropmenu a{line-height:40px;}
#sub_drop .home a{line-height:70px;} 
#sub_drop .dropbtn {line-height:70px}
}

@media all and (min-width:1600px) {
.bg_menu {width:100%; margin:0 auto; }
.bg_menu:after {position:absolute; display:block; content:''; left:0; bottom:0; height:70px; width:20%; background:#fff; z-index:0;/*! border-bottom: 1px solid #f3f3f3; */}
}




/*텍스트효과*/

.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;}
}