/*메인비주얼*/
#mainVisual { width:100%; overflow: hidden;}
#mainVisual .slide {height: 970px; overflow: hidden;position:relative; }
#mainVisual video {min-width: 1920px;position:absolute; top:0; left:50%; transform:translateX(-50%); }
#mainVisual .text {position: absolute; top: 0; left: 150px;}
#mainVisual .text dl {margin: 400px auto 0; line-height: normal;}
#mainVisual .text dl dt {margin-bottom: 30px;  font-family: "Montserrat"; font-size: 80px; font-weight: 700; color: #fff;}
#mainVisual .text dl dd {font-size: 20px; font-weight: 300; color: rgba(255,255,255,.5); word-break: keep-all;}

#mainVisual .slick-dots {position: absolute; bottom: 245px; left: 150px; text-align: center; z-index: 1;}
#mainVisual .slick-dots li {display: inline-block; margin-right: 15px; z-index: 1;}
#mainVisual .slick-dots li:last-child {margin-right: 0;}
#mainVisual .slick-dots li button {position: relative; width: 6px; height: 6px; padding: 0; border: none; background: #fff; border-radius: 50%; font-size: 0; box-sizing: content-box; outline: none; cursor: pointer;}
/* #mainVisual .slick-dots li button::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; border-radius: 50%; background: rgba(0,0,0,.4); z-index: -1;} */
#mainVisual .slick-dots li.slick-active {z-index: 2;}
#mainVisual .slick-dots li.slick-active button {background: #faaf28; border: 6px solid #51555a}
/* #mainVisual .slick-dots li.slick-active button {background: #faaf28; }
#mainVisual .slick-dots li.slick-active button::after {transform: translate(-50%,-50%) scale(3)} */

/*공지사항*/
.notice { width: 100%; height:90px; border-bottom:1px solid #e5e5e5; }
.notice > div { width: 1600px; height: 90px; overflow: hidden; margin: 0 auto; }
.notice h3 { float: left; margin-top:30px; color: #faaf28; font-size:20px; letter-spacing: -.5px; font-weight: 500; font-family: "Montserrat"; }
.notice h3 img { margin-right:10px; vertical-align: bottom; }
.notice h3 span { margin-left: 20px; color: #222; font-size:16px; font-family: 'Noto Sans KR', sans-serif; position: relative; padding-right:20px; }
.notice h3 span:after { content: ""; display: block; width:1px; height:20px; background: #e5e5e5; position: absolute; top: 0; right: 0;  }
.notice .list { float: left; width: calc(100% - 390px); height: 90px; overflow: hidden; }
.notice .list li { width: 100%; height:90px; line-height:90px; font-size:16px; }
.notice .list li .txt { float: left; margin-left:25px; width:calc(100% - 200px); }
.notice .list li .txt a { display: block; color: #555; font-weight: 300; width:100%; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; line-height:90px; }
.notice .list li .date { float: right; color: #aaa; font-weight: 300; margin-right: 50px; }
.notice .btn { float: right; width:45px; }
.notice .btn a { display: block; overflow: hidden; }
.notice .btn a:last-child { border-bottom:1px solid #ededed; }


/*ABOUT*/
.aboutBox { width: 1600px; margin: 70px auto 130px; overflow: hidden; }
.aboutBox > div { float: left; width:calc(100% - 850px); }
.aboutBox > div h3 { position: relative; padding-top:30px; color: #222; font-size:30px; line-height:100%; font-family: "Montserrat"; }
.aboutBox > div h3:before { content: ""; display: block; width:30px; height:5px; background: #faaf28; position: absolute; top: 0; left: 0; }
.aboutBox .txt { margin-top:40px; font-size:17px; line-height:150%; }
.aboutBox .txt p { margin-top:35px; color: #444;  }
.aboutBox .txt p:first-child { margin-top: 0; } 
.aboutBox > img { float: right; /* margin-right:45px; */ }
.aboutBox .more { margin-top:70px; width:170px; height:50px; }
.aboutBox .more a { display: block; width:170px; height:50px; box-sizing:border-box; line-height:50px; font-family: "Montserrat"; font-weight: 500; color: #5f5f5f; font-size:16px; text-indent:30px; background:url(/img/main/icon_arrow_gray.png) no-repeat 80% center; position: relative; }
.aboutBox .more a:before { content: ""; display: block; width:100%; height:100%; position: absolute; top: 0; left: 0; border:2px solid #888; z-index:-1; box-sizing:border-box; }
.aboutBox .more a:after { content: ""; display: block; width:0; height:100%; position: absolute; top: 0; left: 0; background: rgb(249,112,2); z-index:-1; transition:all .3s; -webkit-transition:all .3s; opacity:0;
	background: -moz-linear-gradient(left, rgb(249,112,2) 0%, rgb(223,57,96) 100%);
	background: -webkit-linear-gradient(left, rgb(249,112,2) 0%,rgb(223,57,96) 100%);
	background: linear-gradient(to right, rgb(249,112,2) 0%,rgb(223,57,96) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97002', endColorstr='#df3960',GradientType=1 );
}
.aboutBox .more a:hover:after { width:100%; opacity:1; }
.aboutBox .more a:hover { color: #fff; background:url(/img/main/icon_arrow.png) no-repeat 80% center; }


/*PIPELINE*/
.ppBox { width: 100%; overflow: hidden; background: #f0f0f0; opacity:.9999; }
.ppBox > article { width:100%; overflow: hidden; padding:90px 0 120px; }
.ppBox h3 { text-align: center; position: relative; padding-top:30px; font-family: "Montserrat"; color: #222; font-size:30px; font-weight: 500; line-height: 120%; }
.ppBox h3:before { content: ""; display: block; width:30px; height:5px; background: #faaf28; position: absolute; top: 0; left: 50%; margin-left:-15px; }
.ppBox h3 img { vertical-align: middle; margin-top: -8px; }
.ppBox ul { margin-top:90px; width: 100%; overflow: hidden; }
.ppBox li { float: left; width:calc(50% - 5px); height:450px; margin:0 0 10px 10px; position: relative; overflow: hidden; box-sizing:border-box; padding:95px 60px 90px; }
.ppBox li:nth-child(odd) { margin-left:0; }
.ppBox li img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; height: 100%; z-index:-2; }
.ppBox li dl { overflow: hidden; color: #fff; }
.ppBox li dt { font-family: "Montserrat"; font-size:30px; line-height:120%; font-weight: 500; letter-spacing: -.5px; }
.ppBox li dd { margin-top: 25px; font-size:17px; line-height:130%; overflow: hidden; }
.ppBox li p { margin-top:125px; }
.ppBox li a { display: block; width:170px; height:50px; box-sizing:border-box; line-height:50px; font-family: "Montserrat"; font-weight: 500; color: #fff; font-size:16px; text-indent:30px; background:url(/img/main/icon_arrow.png) no-repeat 80% center; position: relative; }
.ppBox li a:before { content: ""; display: block; width:100%; height:100%; position: absolute; top: 0; left: 0; border:2px solid #fff; z-index:-1; box-sizing:border-box; }
.ppBox li a:after { content: ""; display: block; width:0; height:100%; position: absolute; top: 0; left: 0; background: rgb(249,112,2); z-index:-1; transition:all .3s; -webkit-transition:all .3s; opacity:0;
	background: -moz-linear-gradient(left, rgb(249,112,2) 0%, rgb(223,57,96) 100%);
	background: -webkit-linear-gradient(left, rgb(249,112,2) 0%,rgb(223,57,96) 100%);
	background: linear-gradient(to right, rgb(249,112,2) 0%,rgb(223,57,96) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97002', endColorstr='#df3960',GradientType=1 );
}
.ppBox li a:hover:after { width:100%; opacity:1; }

.ppBox li .main-pc{display:block;}
.ppBox li .main-mo{display:none;}



/*CONTACT*/
.contactBox { max-width:1600px; width:100%; min-width:1200px; height: 500px; overflow: hidden; margin: 70px auto 110px; position: relative; }
.contactBox > div { width:1000px; position: relative; z-index:55; }
.contactBox h3 { margin-top:40px; padding-top:30px; font-family: "Montserrat"; color: #222; font-size:30px; font-weight: 600; line-height: 120%; position: relative; }
.contactBox h3:before { content: ""; display: block; width:30px; height:5px; background: #faaf28; position: absolute; top: 0; left: 0; }
.contactBox h3 img { vertical-align: middle; margin: -8px 5px 0 0; }
.contactBox > p { margin-top:30px; color: #5f5f5f; font-size:18px; line-height:160%; letter-spacing: -.5px; }
.contactBox > img { position: absolute; top: 0; right: 0;/* right: 95px; */ z-index:-1; }
.contactBox .txt { color: #5f5f5f; font-size:18px; line-height:150%; margin-top:25px; }
.contactBox .list { margin-top:10px; overflow: hidden; }
.contactBox .list li { overflow: hidden; margin-top: 18px; font-family: "Montserrat"; position: relative; }
.contactBox .list li:before { content: ""; display: block; width:5px; height:5px; background: #df3a60; border-radius:50%; float: left; margin-top: 6px; }
.contactBox .list li p { float: left; color:#555; width:130px; font-size:18px; font-weight: 500; box-sizing:border-box; padding-left:20px; font-family: "Montserrat";  }
.contactBox .list li span { color: #faaf28; font-size:18px; font-weight: 500; font-family: "Montserrat"; }
.wilab { margin-top:70px; overflow: hidden; position: relative; padding-bottom:20px; }
.wilab:after { content: ""; display: block; width:1000px; height:1px; background: #faaa2c; position: absolute; bottom: 0; left: 0; }
.wilab .more { float: left; width:170px; height:50px; }
.wilab .more a { display: block; width:170px; height:50px; box-sizing:border-box; line-height:50px; font-family: "Montserrat"; font-weight: 500; color: #5f5f5f; font-size:16px; text-indent:30px; background:url(/img/main/icon_arrow_gray.png) no-repeat 80% center; position: relative; }
.wilab .more a:before { content: ""; display: block; width:100%; height:100%; position: absolute; top: 0; left: 0; border:2px solid #888; z-index:-1; box-sizing:border-box; }
.wilab .more a:after { content: ""; display: block; width:0; height:100%; position: absolute; top: 0; left: 0; background: rgb(249,112,2); z-index:-1; transition:all .3s; -webkit-transition:all .3s; opacity:0;
	background: -moz-linear-gradient(left, rgb(249,112,2) 0%, rgb(223,57,96) 100%);
	background: -webkit-linear-gradient(left, rgb(249,112,2) 0%,rgb(223,57,96) 100%);
	background: linear-gradient(to right, rgb(249,112,2) 0%,rgb(223,57,96) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f97002', endColorstr='#df3960',GradientType=1 );
}
.wilab .more a:hover:after { width:100%; opacity:1; }
.wilab .more a:hover { color: #fff; background:url(/img/main/icon_arrow.png) no-repeat 80% center;  }
.wilab .grayFont { float: left; margin-left:100px; color: #e5e5e5; font-size:50px; line-height:55px; font-family: "Montserrat"; font-weight: 700; }


@media screen and (max-width:1400px) {
    #mainVisual .text {left: 0;}
    #mainVisual .text dl {padding: 0 10px;}
    #mainVisual .slick-dots {left: 15px;}
    

}


@media screen and (max-width:1200px) {
	/* 메인비주얼
	#mainVisual { height:48vw; }
	#mainVisual img { width: 100%; } */


	/*공지사항*/
	.notice { height:auto; }
	.notice > div { width: 100%; height: auto; }
	.notice h3 { float: none; margin:15px 0 0 5px; font-size:18px; vertical-align: bottom; }
	.notice h3 img { margin-right:5px; height: 18px; }
	.notice h3 span { margin-left: 20px; color: #222; font-size:16px; font-family: 'Noto Sans KR', sans-serif; position: relative; padding-right:20px; }
	.notice h3 span:after { display: none; }
	.notice .list { width: calc(100% - 30px); height: 58px; margin-top:3px; }
	.notice .list li { height:58px; line-height:58px; font-size:15px; }
	.notice .list li .txt { margin-left:10px; width:calc(100% - 120px); }
	.notice .list li .txt a { line-height:58px; }
	.notice .list li .date { margin-right: 10px; }
	.notice .btn { width:30px; }
	.notice .btn a img { width: 30px; height:30px; }
	.notice .btn a:last-child { border-bottom:none; }


	/*ABOUT*/
	.aboutBox { width: 100%; margin: 50px auto 80px; box-sizing:border-box; padding:0 15px; }
	.aboutBox > div { float: none; width:100%; }
	.aboutBox > div h3 { padding-top:20px; }
	.aboutBox .txt { margin-top:20px; font-size:15px; line-height:130%; }
	.aboutBox .txt p { margin-top:20px; color: #444; }
	.aboutBox > img { float: none; margin-top:20px; width: 100%; }
	.aboutBox .more { margin-top:30px; width:120px; height:45px; }
	.aboutBox .more a { width:120px; height:45px; line-height:45px; font-size:15px; text-indent:20px; }


	/*PIPELINE*/
	.ppBox > article { padding:50px 0 80px; }
	.ppBox h3 { padding-top:20px; font-size:30px; }
	.ppBox ul { margin-top:30px; }
	.ppBox li { width:100%; height:68vw; /*padding:40px 75px;*/ padding:40px 20px; float:none; margin:0;}
	.ppBox li dt { font-family: "Montserrat"; font-size:30px; line-height:120%; font-weight: 500; letter-spacing: -.5px; }
	.ppBox li dd { margin-top: 15px; font-size:15px; }
	.ppBox li p { margin-top:25px; }
	.ppBox li a { width:120px; height:45px; line-height:45px; font-size:15px; text-indent:20px; }
	.ppBox li .main-pc{display:none;}
	.ppBox li .main-mo{display:block;}


	/*CONTACT*/
	.contactBox { min-width:100%; height: auto; padding:0 15px; box-sizing:border-box; margin: 40px auto 60px; }
	.contactBox > div { width:100%; }
	.contactBox h3 { margin-top:0; padding-top:20px; font-size:30px; }
	.contactBox > p { margin-top:10px; font-size:15px; }
	.contactBox > img { position: static; width: 100%; }
	.contactBox .txt { font-size:15px; margin-top:15px; }
	.contactBox .list { margin-top:10px; overflow: hidden; }
	.contactBox .list li { margin-top: 10px; }
	.contactBox .list li p { width:80px; font-size:15px; padding-left:10px; }
	.contactBox .list li span { font-size:15px; }
	.wilab { margin-top:50px; overflow: hidden; position: relative; padding-bottom:20px; }
	.wilab:after { content: ""; display: block; width:1000px; height:1px; background: #faaa2c; position: absolute; bottom: 0; left: 0; }
	.wilab .grayFont { float: right; margin:0; font-size:40px; line-height:40px; }
	.wilab .more { width:120px; height:45px; }
	.wilab .more a { width:120px; height:45px; line-height:45px; font-size:15px; text-indent:20px;  }


}

@media screen and (max-width:960px) {
    #mainVisual video {min-width: 1000px;}
    #mainVisual .slide {height: 700px;}
    #mainVisual .text dl {margin-top: 210px;}
    #mainVisual .text dl dt {font-size: 62px;}
    #mainVisual .slick-dots {bottom: 180px;}
}
@media screen and (max-width:640px) {
    #mainVisual video {min-width: 700px;height:100%;top:20%;}
    #mainVisual .slide {height: 500px;}
    #mainVisual .text dl {margin-top: 170px;}
    #mainVisual .text dl dt {font-size: 48px;}
    #mainVisual .text dl dd {font-size: 15px;}
    #mainVisual .slick-dots {bottom: 40px;}
}

@media screen and (max-width:420px) {
    #mainVisual video {min-width: 500px;}
    #mainVisual .slide {height: 400px;}
    #mainVisual .text dl {margin-top: 130px;}
    #mainVisual .text dl dt {font-size: 36px;}
    #mainVisual .text dl dd {font-size: 15px;}
    #mainVisual .text dl dd br {display: none;}
    #mainVisual .slick-dots {bottom: 40px;}
}