/* ===== MAIN - VISUAL ===== */
.main-visual {position:relative; margin:0 auto;height:100vh;}
.main-visual .visual-slider {overflow:hidden;position:absolute;left:50%;top:50%;width:100%;height:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}
.main-visual .visual-slider .swiper-slide {overflow:hidden;position:relative;height:100%;}
.main-visual .visual-slider .swiper-slide .vs-bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);   transition-duration:3s;}
.main-visual .visual-slider .swiper-slide .vs-bg1{ background:url(../img/main/mVisual01.jpg) no-repeat 50% 50%; background-size:cover}
.main-visual .visual-slider .swiper-slide .vs-bg2{ background:url(../img/main/mVisual02.jpg) no-repeat 50% 50%; background-size:cover}
.main-visual .visual-slider .swiper-slide .vs-bg3{ background:url(../img/main/mVisual03.jpg) no-repeat 50% 50%; background-size:cover}
.main-visual .visual-slider .swiper-slide .vs-bg4{ background:url(../img/main/mVisual04.jpg) no-repeat 50% 50%; background-size:cover}
.main-visual .visual-slider .swiper-slide .vs-txt { position:absolute; top:400px; left:10%; z-index:1; }

.main-visual .visual-slider .swiper-slide .vs-txt h2 {opacity:0;font-size:50px;font-family: 'Pretendard-ExtraLight'; color:#fff;-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);  margin-top:20px;}
.main-visual .visual-slider .swiper-slide .vs-txt .eng {opacity:0;font-size:110px; color:#fff; font-family: 'Pretendard-Black';-webkit-transform:translateY(40px);-moz-transform:translateY(40px);-ms-transform:translateY(40px);-o-transform:translateY(40px);transform:translateY(40px);}


.main-visual .visual-slider .main-visual-btn{ position:absolute; bottom:200px; left:10%}
.main-visual .visual-slider .swiper-button-prev {position:absolute;left:0; top:auto; bottom:0;z-index:10;background:none;}
.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ font-size:25px; color:#fff; text-align:center; line-height:70px; width:70px; border-radius:50%; display:block;  border:1px #fff solid;}
.main-visual .visual-slider .swiper-button-prev:after {display:none;}
.main-visual .visual-slider .swiper-button-next {position:absolute; left:170px;top:auto; bottom:0;z-index:10;margin-top:0; background:none;}
.main-visual .visual-slider .swiper-button-next:after {display:none;}

.main-visual .visual-slider .swiper-pagination {position:absolute;left:90px;bottom:0;z-index:10;margin-top:20px;width:70px;font-size:17px;color:#fff;letter-spacing:0.333em;font-style:italic;}
.main-visual .visual-slider .swiper-pagination span {font-style:normal;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg {-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:transform 1.4s;-moz-transition:transform 1.4s;-ms-transition:transform 1.4s;-o-transition:transform 1.4s;transition:transform 1.4s;}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-bg1{}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt h2 {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s; word-spacing:8px;	}
.main-visual .visual-slider .swiper-slide.swiper-slide-active .vs-txt p {opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity 1s, transform 1.4s;-moz-transition:opacity 1s, transform 1.4s;-ms-transition:opacity 1s, transform 1.4s;-o-transition:opacity 1s, transform 1.4s;transition:opacity 1s, transform 1.4s;	-webkit-transition-delay:0.1s;-moz-transition-delay:0.1s;-ms-transition-delay:0.1s;-o-transition-delay:0.1s;transition-delay:0.1s;}
.hide {position: absolute;left: -9999%;font-size: 0;line-height: 0;text-indent: -9999px;}



.main-area{ position:relative; margin:0 10%;}
.mTit .en{ letter-spacing:7px; color:#999; margin-bottom:30px;}
.mTit h1{font-family: 'Pretendard'; margin-bottom:10px; font-size:50px;}
.mTit h1 span{font-size:40px; line-height:50px;font-family: 'Pretendard-SemiBold'; display:block; }
.mTit h3{font-family: 'Pretendard-Thin';}
.mTit h4{font-family: 'Pretendard-Thin'; color:#777; line-height:30px;}


#sec_01 li, #sec_02  dl dt, #sec_02  dl dd, .sec_04 dl dt, .sec_04 dl dd{ display:inline-block; vertical-align:top;}

#sec_01 li{ width:calc((100% / 4) - 45px); margin-right:50px; height:700px; text-align:center;}
#sec_01 li:last-child{ margin-right:0;}
#sec_01 li:nth-child(1){background:url(../img/main/sec_01_bg01.jpg) no-repeat 50% 50%; background-size:cover;}
#sec_01 li:nth-child(2){background:url(../img/main/sec_01_bg05.jpg) no-repeat 50% 50%; background-size:cover}
#sec_01 li:nth-child(3){background:url(../img/main/sec_01_bg06.jpg) no-repeat 50% 50%; background-size:cover}
#sec_01 li:nth-child(4){background:url(../img/main/sec_01_bg04.jpg) no-repeat 50% 50%; background-size:cover;}
#sec_01 li:nth-child(1) a, #sec_01 li:nth-child(4) a, #sec_01 li:nth-child(3) a{ color:#fff;}
#sec_01 a{ display:block; width:100; height:100%;}
#sec_01 li p{  font-family: 'Pretendard-SemiBold'; padding-top:100px;}
#sec_01 li span{ font-size:20px;}

#sec_02 .main-area:before{ content:''; position:absolute; top:0; left:0; width:100%; height:280px; background:#efefef; z-index:-1px; }
#sec_02 .main-area .area{ position:relative;margin:0 10%; }
#sec_02  dl dt{ width:30%}
#sec_02  dl dd{ width:calc((100% - 30%) - 5px);}

#sec_03 .main-area:before{ content:''; position:absolute; top:0; left:0; width:100%; height:280px;background:url(../img/main/sec_03_bg.jpg) no-repeat 0 0; }
#sec_03 .main-area .inner{ background:#fff; }
#sec_03 .mTit{ padding-top:150px;}
#sec_03 .mTit h3{ margin-bottom:30px;}

.port_view {position: relative;width:100%; height:815px;}
.port_view .list {position: relative;}
.port_view li {padding-left: 95px;}
.port_view li img {position: absolute;top: 0;right: 0;opacity: 0;width:60%;}
.port_view figcaption {position: relative;margin: 10px 0 10px 0;padding: 30px 0 40px 0px;width: 500px;z-index: 2;/* background-color: #fff; */cursor: pointer;}
.port_view figcaption:first-child {margin-top: 0;}
.port_view figcaption i {visibility: hidden;position: absolute;right: 62px;top: 50%;width: 43px;height: 1px;background-color: #000;}
.port_view figcaption i:before {content: "";position: absolute;width: 8px;height: 8px;border-right: 1px solid #000;border-bottom: 1px solid #000;right: 0;top: 50%;transform: translateY(-50%) rotate(-45deg);}
.port_view figcaption i:after {content: "";position: absolute;width: 20px;height: 20px;border: 1px solid #000;right: 0;top: 50%;transform: translate(35%, -50%) rotate(-45deg);}
.port_view figcaption > * {display: block;}
.port_view figcaption span { font-size:20px;color:#777;}
.port_view figcaption strong {font-size:27px;margin: 10px 0 20px;}
.port_view figcaption em {font-size: 14px;}
.port_view li.active {z-index: 3;}
.port_view li.active img { opacity: 2;transform: translateY(-10px);transition-timing-function: ease-in-out;transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);}
.port_view li.active figcaption {border: 1px solid #000;width:400px;background: #fff;box-shadow: 0 5px 20px rgba(0,0,0,0.15);transition: all 0.5s;z-index: 3; padding-left:30px;}
.port_view li.active figcaption i {visibility: visible;}

.port_view .util_area {position: absolute;left: 0;bottom: 0px;height: 125px;}
.port_view .navigator button {position: absolute;width: 100%;height: 30px;border: 0;font-size: 0;background: none;cursor: pointer;}
.port_view .navigator button:before {content: "";position: absolute;left: 22px;width: 12px;height: 12px;border-top: 2px solid #000;border-left: 2px solid #000;}
.port_view .navigator .prev {top: 0;}
.port_view .navigator .prev:before {top: 2px;transform: rotate(45deg);-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);}
.port_view .navigator .next {bottom: 0;}
.port_view .navigator .next:before {bottom: 2px;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);-ms-transform: rotate(-135deg);}
.port_view .count {padding: 50px 0;font-size: 0;}
.port_view .count span {display: inline-block;position: relative;font-weight: 700;font-size: 16px;}
.port_view .count span.current {top: -13px;}
.port_view .count span.total {color: #bebebe;  top: 10px;}
.port_view .count span.current:after {content: "";display: inline-block;position: relative;vertical-align: middle;width: 30px;height: 1px;background-color: #000;transform: rotate(-45deg);top: 11px;margin: 0 -10px;}


.sec_04{background:#0a161f url(../img/common/sec_04_bg.jpg) no-repeat 100% 50%; background-size:auto 100%; padding:200px 0; color:#fff; margin-top:200px;}
.sec_04 dl{ position:relative; width:60%;}
.sec_04 dl dt{ width:50%;}
.sec_04 dl dd{ width:calc((100% - 50%) - 5px); text-align:right; padding-top:50px; }
.sec_04 dl dd a{ position:relative; color:#fff;  display:inline-block; width:150px; text-align:left; padding:0 30px; font-size:20px; height:50px; line-height:50px;}
.sec_04 dl dd i{ position:absolute; top:15px; right:20px;}
.sec_04 dl dd a:before{ content:''; border:1px #fff solid; position:absolute; top:0; left:0; border-radius:10px; width:100%; height:100%; opacity:0.3; display:block;}

@media all and ( max-width: 1920px ){
	.main-visual .visual-slider .swiper-slide .vs-txt { top:300px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .eng{ font-size:80px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:35px;}
	.main-visual .visual-slider .swiper-pagination{ margin-top:17px; left:85px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ width:60px; height:60px; line-height:60px; font-size:20px;}
	
	.mTit h1{ font-size:45px;}
	.mTit h1 span{font-size:35px; line-height:45px;}
	.mTit h4{ line-height:25px;}
	
	#sec_01 li{ width:calc((100% / 4) - 27px); margin-right:30px; height:500px;}
	#sec_01 li p{ padding-top:80px;}
	#sec_01 li span{ font-size:17px;}
	
	#sec_02 .main-area:before{ height:240px; }


	#sec_03 .main-area:before{ background-size:75% auto; height:200px;}
	#sec_03 .mTit{ padding-top:100px;}
	
	
	.port_view { height:600px;}
	.port_view li.active figcaption{ width:350px;}
	.port_view figcaption strong{ font-size:23px;}
	.port_view figcaption span { font-size:17px;}
	
	.sec_04{padding:150px 0; margin-top:150px;}
	.sec_04 dl dd a{ width:100px; font-size:17px;height:40px; line-height:40px;}
	.sec_04 dl dd i{ top:12px;}
	
	
}

@media all and (max-width : 1680px){
	
	.main-visual { height:650px;}
	.main-visual .visual-slider .swiper-slide .vs-txt{ top:200px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .eng{ font-size:50px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:30px;}
	.main-visual .visual-slider .main-visual-btn{ bottom:100px;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ width:45px; height:45px; line-height:45px;}
	.main-visual .visual-slider .swiper-pagination{ margin-top:0px; left:65px; letter-spacing:3px; bottom:10px;}
	.main-visual .visual-slider .swiper-button-next{ left:150px;}
	
	.mTit h1{ font-size:35px;}
	
}
@media all and (max-width : 1440px){
	
	.main-area{ margin:0;}
	#sec_01 li { width: calc((100% / 4) - 15px); margin-right:15px; height:400px;}
	
	#sec_02 .main-area .area{ margin:0 10px;}
}

@media all and (max-width : 1280px){
	
	.main-visual { height:550px; }
	.main-visual .visual-slider .swiper-slide .vs-txt{ top:150px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .eng{ font-size:40px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:25px;}
}

@media all and (max-width : 1280px){
	
	.mTit h1{ font-size:30px;}
	#sec_01{ margin:0 10px;}
	#sec_02 dl dt{ width:100%;}
	.mTit h1 span{ display:inline-block;}
	#sec_02 dl dd{ width:100%;}
	.port_view{ height:auto;}
	.port_view li{ padding-left:0;}
	#sec_02 .main-area:before{ display:none;}
	.port_view .util_area{ top:0;}
	.port_view .list{ padding-top:50px;}
	.port_view .navigator .prev{}
	.port_view .navigator .next{ left:80px; top:-10px; bottom:auto}
	.port_view .count{ padding:0; margin-left:40px;}
	.port_view .count span.current{ top:0; }
	.port_view .count span.total{ top:0;}
	.port_view .count span.current::after{ top:0; width:20px; margin:0;}
	.port_view li img{}
	
.port_view .navigator .prev::before {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}
	.port_view .navigator .next::before {transform: rotate(140deg);-webkit-transform: rotate(140deg);}	
	
	.sec_04{ padding:150px 10px;}
	
	#sec_03{ margin:0 10px;}
}




@media all and (max-width : 960px){
	#sec_01 li { width: calc((100% / 2) - 8px); margin-right:10px; height:400px;}
	#sec_01 li:nth-child(2n+2){ margin-right:0;}
	#sec_01 li:nth-child(1), #sec_01 li:nth-child(2){ margin-bottom:10px;}
	
	.port_view li{ display:inline-block; width:calc((100% / 2) - 10px)}
	.port_view figcaption strong{ font-size:20px; padding:0 15px;}
	.port_view li.active figcaption{ width:100%; padding:10px 0; text-align:center;}
	.port_view li:nth-child(1){ margin-right:10px;}
	.port_view figcaption{ width:90%; padding:20px 0;}
	.port_view figcaption span{ display:none}
	.port_view li { text-align:center;}
	.port_view li img{ top:50px; height:500px; width:auto;}
	.port_view{ height:600px; }
	
	.sec_04{ padding:100px 20px; background-position:70% 50%;}
	.sec_04 dl{ width:100%;}
	.sec_04 dl dt{ width:100%;}
	.sec_04 dl dd{ width:100%; text-align:left}
	.sec_04 dl dd p{ display:inline-block;}
	.sec_04 dl dd p:nth-child(1){ margin-right:10px;}
	
	
	
	#sec_03 .mTit{ padding:30px 0 0 0 ;}
	
}

@media all and (max-width : 640px){
	
	.main-visual { height:400px; }
	.main-visual .visual-slider .swiper-slide .vs-txt{ top:70px;}
	.main-visual .visual-slider .swiper-slide .vs-txt .eng{ font-size:30px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:20px;}
	
	.mTit h1{ font-size:25px;}
	.mTit h1 span{ font-size:25px; line-height:30px;}
	
	#sec_01 li{ height:300px;}
	#sec_01 li p{ padding-top:50px;}
	#sec_01 li span{ font-size:15px;}
	
	
	.sec_04{ display:none;}
}

@media all and (max-width : 480px){
	
	.main-visual { height:300px; }
	.main-visual .visual-slider .swiper-slide .vs-txt{ top:70px; left:5%;}
	.main-visual .visual-slider .swiper-slide .vs-txt .eng{ font-size:20px;}
	.main-visual .visual-slider .swiper-slide .vs-txt h2{ font-size:17px; margin-top:10px;}
	
	.main-visual .visual-slider .main-visual-btn{ bottom:30px; left:5%;}
	.main-visual .visual-slider .swiper-button-prev i, .main-visual .visual-slider .swiper-button-next i{ width:30px; height:30px; line-height:30px; font-size:15px;}
	.main-visual .visual-slider .swiper-pagination{ left:30px; letter-spacing:2px; bottom:17px; font-size:15px;}
	.main-visual .visual-slider .swiper-button-next{ left:100px;}
	
	.mTit .en{ margin-bottom:20px;}
	
	.sec_04{ margin-top:50px;} 
	.port_view li img{ top:50px; height:445px; width:auto;}
	.port_view{ height:550px; }
}