@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2017-05-30
******************************************************** */

/* ****************** 메인 컨텐츠 :: 공통 ********************** */
#mainContainer { background-color:#fff; overflow:hidden; width:100%; }

@media all and (max-width:1220px){
	
}

@media all and (max-width:800px){

}

@media all and (max-width:480px){

}


/* ****************** 메인 컨텐츠 :: mainVisual ********************** */
#mainVisual {width:100%; overflow:hidden; position:relative; height:900px;}
.visual-img{width:100%; position:relative; overflow:hidden;}
.visual-img li.visual-container img{position:relative; left:50%; margin-left:-960px; 
	-ms-transform: scale(1.2,1.2);
    -o-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
	-webkit-transition:transform 3700ms  ease-in-out ;
	-moz-transition:transform 3700ms ease-in-out ;
	-o-transition:transform 3700ms ease-in-out ;
	-ms-transition:transform 3700ms ease-in-out ;
    transition:transform 3700ms ease-in-out ;
}
.visual-img li.visual-container{position:relative; overflow:hidden;}
.visual-txt-wrap{width:1280px; position:absolute; top:15%; left:0%; right:0%; margin:0 auto; }
.visual-txt{width:100%;}
.visual-txt .slick-dots{position:absolute; left:70px; bottom:0px;}
.visual-txt .slick-dots li{display:inline-block; vertical-align:middle; width:10px; height:10px; border:3px solid #fff; border:3px solid rgba(255,255,255,0.53); text-indent:-9999px; font-size:0; cursor:pointer; border-radius:100%; -moz-border-radius:100%; -webkit-border-radius:100%; -o-border-radius:100%; margin-right:10px;}
.visual-txt .slick-dots li.slick-active{border-color:#fff;}
.visual-txt-inner{width:100%;}
.visual-txt-inner dt, .visual-txt-inner dd{float:left;}
.visual-txt-inner dt{width:44px;}
.visual-txt-inner dt > h4{ line-height:120px; height:120px; color:#1e2188; font-weight:bold; z-index:2; position:relative; 
opacity:0;filter:Alpha(opacity=0);
-moz-transition:all 0.7s, opacity 1.0s;
-ms-transition:all 0.7s, opacity 1.0s;
-webkit-transition:all 0.7s, opacity 1.0s;
-o-transition:all 0.7s, opacity 1.0s;
transition:all 0.7s, opacity 1.0s;	
}
.visual-txt-inner dt > h4 > img{ -moz-transition:all 0.7s, opacity 1.0s;
-ms-transition:all 0.7s, opacity 1.0s;
-webkit-transition:all 0.7s, opacity 1.0s;
-o-transition:all 0.7s, opacity 1.0s;
transition:all 0.7s, opacity 1.0s;
margin-bottom:3%;	

}
/*.visual-txt-inner dt > h4 b{color:#e9460b; margin-right:10px; font-weight:bold; line-height:90px; }*/
.visual-txt-inner dd{padding-left:27px; position:relative; min-width:1400px;}
.visual-txt-inner dd:before{display:block; content:""; position:absolute; top:0; left:0; width:1px; height:0; background-color:#fff; z-index:2; background-color:rgba(255,255,255,0.3);
-moz-transition:height 0.7s, opacity 1.0s;
-ms-transition:height 0.7s, opacity 1.0s;
-webkit-transition:height 0.7s, opacity 1.0s;
-o-transition:height 0.7s, opacity 1.0s;
transition:height 0.7s, opacity 1.0s;
-moz-transition-delay:0.3s;
-ms-transition-delay:0.3s;
-webkit-transition-delay:0.3s;
-o-transition-delay:0.3s;
transition-delay:0.3s;
}
.visual-txt-inner dd > h2, .visual-txt-inner dd > h3, .visual-txt-inner dd > p{position:relative; left:-10%; opacity:0;filter:Alpha(opacity=0); z-index:1;
-moz-transition:left 0.8s, opacity 1.0s;
-ms-transition:left 0.8s, opacity 1.0s;
-webkit-transition:left 0.8s, opacity 1.0s;
-o-transition:left 0.8s, opacity 1.0s;
transition:left 0.8s, opacity 1.0s;
font-weight:300;
line-height:40px;
}
.visual-txt-inner dd > h2{font-size:35px; color:#fff; font-weight:600; letter-spacing:-1px; margin-bottom:20px; 
-moz-transition-delay:0.9s; -ms-transition-delay:0.9s; -webkit-transition-delay:0.9s; -o-transition-delay:0.9s; transition-delay:0.9s; text-shadow: 0 1px 1px rgba(0,0,0,.5); text-align:center;}
.visual-txt-inner dd > h2 > img{ width:450px; height:180px; margin-left:400px; }
.visual-txt-inner dd > h2 em{color:rgba(255,255,255,0.8);}
.visual-txt-inner dd > h3{font-size:32px; color:#fff; font-weight:500; letter-spacing:-0.75px; margin:3% auto 5%;
-moz-transition-delay:0.6s; -ms-transition-delay:0.6s; -webkit-transition-delay:0.6s; -o-transition-delay:0.6s; transition-delay:0.6s; }
.visual-txt-inner dd > h3 span{display:block;}
.visual-txt-inner dd > p{font-size:17.5px; line-height:30px; color:#fff; color:rgba(255,255,255,0.8); letter-spacing:-0.75px; margin-bottom:40px; 
-moz-transition-delay:1.2s; -ms-transition-delay:1.2s; -webkit-transition-delay:1.2s; -o-transition-delay:1.2s; transition-delay:1.2s; min-height:90px;text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.visual-txt-inner dd > a{display:block; width:185px; height:50px; text-align:center; font-size:16px; line-height:50px; color:#fff; letter-spacing:-0.5px; border:1px solid #fff; border:1px solid rgba(255,255,255,0.6); margin-bottom:60px; font-weight:500; background:rgba(255,255,255,0.2);
position:relative; opacity:0;filter:Alpha(opacity=0);
-moz-transition:all 0.6s, opacity 1.0s;
-ms-transition:all 0.6s, opacity 1.0s;
-webkit-transition:all 0.6s, opacity 1.0s;
-o-transition:all 0.6s, opacity 1.0s;
transition:all 0.6s, opacity 1.0s;
-moz-transition-delay:1.5s; -ms-transition-delay:1.5s; -webkit-transition-delay:1.5s; -o-transition-delay:1.5s; transition-delay:1.5s;
}
.material-icons{ width:30px; height:30px; display:inline-block; padding:8px 0 0 15px; }
.material-icons > img{ opacity:0.8;}
.visual-title{position:absolute; right:100px; bottom:0px; font-size:200px; line-height:140px; z-index:98; font-style:italic;}
.visual-title span{letter-spacing:-2px; display:inline-block; font-weight:bold;}
.visual-title span.sam{color:#fff; color:rgba(255,255,255,0.1); }
.visual-title span.woo{color:#fff; color:rgba(255,255,255,0.17);}

/* 수정 :: 180129 
.visual-txt-inner dd > h4{font-size:32px; line-height:40px; color:#fff; font-weight:400; letter-spacing:-0.75px; margin-bottom:20px; text-shadow: 0 1px 1px rgba(0,0,0,.5);}
.visual-txt-inner dd > h4 span{display:block;}
.visual-txt-inner dd > h4 strong, .visual-txt-inner dd > h4 b{float:left; position:relative; left:-10%; opacity:0;filter:Alpha(opacity=0);
-moz-transition:left 0.8s, opacity 1.0s;
-ms-transition:left 0.8s, opacity 1.0s;
-webkit-transition:left 0.8s, opacity 1.0s;
-o-transition:left 0.8s, opacity 1.0s;
transition:left 0.8s, opacity 1.0s;
}
.visual-txt-inner dd > h4 strong{-moz-transition-delay:0.9s; -ms-transition-delay:0.9s; -webkit-transition-delay:0.9s; -o-transition-delay:0.9s; transition-delay:0.9s;}
.visual-txt-inner dd > h4 b{margin-left:30px; font-size:40px; -moz-transition-delay:1.2s; -ms-transition-delay:1.2s; -webkit-transition-delay:1.2s; -o-transition-delay:1.2s; transition-delay:1.2s;}*/



/* Active */
.visual-img li.visual-container.active img{ 
	-ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
}
.visual-txt-inner.active dt > h4,
.visual-txt-inner.active dd > a{opacity:1.0;filter:Alpha(opacity=100);}
.visual-txt-inner.active dd:before{height:100%;}
.visual-txt-inner.active dd > h2,
.visual-txt-inner.active dd > h3,
.visual-txt-inner.active dd > p{left:0; opacity:1.0;filter:Alpha(opacity=100);}
/*.visual-txt-inner.active dd > h4 strong, .visual-txt-inner.active dd > h4 b{left:0; opacity:1.0;filter:Alpha(opacity=100);}*/

@media all and (max-width:1500px){
	.visual-txt-wrap{width:94%; left:3%; margin-left:0;}
	.visual-txt-inner dd{min-width:calc(100% - 73px);}
}

@media all and (max-width:1220px){
	.visual-title{font-size:150px; right:0; line-height:110px;}
}

@media all and (max-width:800px){
	#mainVisual{padding-top:60px; height:auto;} 
	.visual-txt-wrap{top:35%;}
	.visual-txt-inner dt, .visual-txt-inner dd > p, .visual-txt-inner dd:before{display:none;}
	.visual-txt-inner dd{padding-left:0; min-width:auto;}
	.visual-txt-inner dd > h2{font-size:35px; margin-bottom:10%; text-align:left;}
	.visual-txt-inner dd > h3{font-size:18px; margin-bottom:4%;}
	.visual-txt-inner dd > h3 span{display:inline;}
	.visual-txt-inner dd > a{width:110px; height:35px; line-height:35px; font-size:14px; margin-bottom:0;}
	.visual-img li.visual-container img{max-width:100%; left:0; margin-left:0;}
	.visual-title{display:none;}
}

@media all and (max-width:480px){
	.visual-txt-wrap{top:34%;}
	.visual-txt-inner dd > h2{font-size:24px; line-height:28px; margin-bottom:5%; word-break:keep-all;}
	.visual-txt-inner dd > h3{font-size:14px; line-height:22px; margin-bottom:3%;}
	.visual-txt-inner dd > a{width:90px; height:32px;line-height:32px; font-size:13px;}
}


/* ****************** 메인 컨텐츠 :: mainContent :: 공통 ********************** */
#mainContent {width:100%; overflow:hidden;}
.main-tit{font-size:35px; color:#00183a; font-weight:400; text-align:center; margin-bottom:2%; }
.main-tit > span{display:inline-block; position:relative; padding-left:36px;}
.main-tit > span:before{display:inline-block; content:""; position:absolute; top:-19px; left:0; width:60px; height:35px; background:url(/images/main/main_tit_bg.png) no-repeat;}
.main-subtit{font-size:18px; color:#333; letter-spacing:-0.75px; font-weight:300; text-align:center; margin-bottom:4%; opacity:0.8;filter:Alpha(opacity=80);}
.main-tit.type2{color:#fff;}
.main-subtit.type2{color:#fff; opacity:0.7;filter:Alpha(opacity=70);}


@media all and (max-width:1220px){
	
}

@media all and (max-width:800px){
	.main-tit{font-size:30px; margin-bottom:3%;}
	.main-subtit{font-size:16px; line-height:22px; word-break:keep-all; padding:0 3%;}
}

@media all and (max-width:480px){
	.main-tit{font-size:24px;}
	.main-subtit{font-size:14px; line-height:20px;}
}