@charset "utf-8";

.contrainer {position: relative;}
.contrainer section .inner {position: relative; max-width: 1600px; padding: 4em 0; margin:0 auto;}

@media (max-width:1600px) {
	.contrainer section {padding:0 1em;}
}

@media (max-width:1024px) {
	.contrainer section {padding:0 2em;}
	.contrainer section .inner {padding: 2em 0;}
}

@media all and (max-width:640px) {
	.contrainer section .inner {padding: 1em 0;}	
}

/* Common Style */
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}


/* Slider Common Style */
.slider .swiper-slide {width:100%;}
.slider .swiper-slide > a {display:block;}
.slider .swiper-slide img {display:block; max-width:100%;}
.slider .swiper-slide .bg img {width:100%;}

.fix-scroll .swiper-container {display:block; position:relative;}
.fix-scroll .swiper-wrapper {display:block !important; transform:none !important; -webkit-transform:none !important; height:100% !important; overflow:auto; white-space:nowrap;}
.fix-scroll .swiper-wrapper li {display:inline-block !important; vertical-align:top; transform:none !important; -webkit-transform:none !important; opacity:1 !important;}

.fix-scroll .swiper-wrapper li a {display:block; position:relative;}
.fix-scroll .swiper-wrapper li a:focus:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; border:5px solid rgba(0,0,0,.5); z-index:2;}

.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}


/* header */
@media (min-width: 1025px) {
	#lnbWrap .layer:after {display: none;}
}


/* 비주얼 */
.visual-slide {display:block; position:relative;  margin: 0 auto; height: calc(100vh - 6.5em); padding-right: 6em;}
.visual-slide .control {display:block; padding:0 2em;background: #fff; z-index:3; text-align:center;}
.visual-slide .control > * {display:inline-block; position:relative; vertical-align:middle; bottom:auto; left:auto; right:auto; top:auto;}
.visual-slide .control .pager {width:auto;}
.visual-slide .control .pager > * {display:inline-block; position:relative; vertical-align:middle;}

.visual-slide .control .swiper-pagination-fraction span {display: block; width: 2.083em; height: 2.083em; font-size: 1.2em; font-weight: 600; text-align: center; line-height: 2.5em;}
.visual-slide .control .swiper-pagination-current {color: #000;}
.visual-slide .control .swiper-pagination-total {color: #777;}
.visual-slide .control button {width: 2.5em; height: 2.5em; overflow:hidden; text-indent: -9999px;}
.visual-slide .control button.prev {background: url(/en/img/main/ico_left.svg) center no-repeat; background-size: contain;}
.visual-slide .control button.next {background: url(/en/img/main/ico_right.svg) center no-repeat; background-size: contain;}
.visual-slide .control button.stop {background: url(/en/img/main/ico_pause.svg) center no-repeat; background-size: contain;}
.visual-slide .control button.play {display:none; background: url(/en/img/main/ico_play.svg) center no-repeat;}

.visual-slide .slider {display:block; position:relative; height:100%; overflow:hidden;}
.visual-slide .slider .swiper-container,
.visual-slide .slider .swiper-wrapper,
.mycode .slider .swiper-slide {height:100%;}
.visual-slide .slider .swiper-slide > * {display:block;}
.visual-slide .slider .swiper-slide .txt p {font-size: 1.6em; font-weight: 600; line-height: 1; letter-spacing: -0.96px; color: #fff; margin-top: 1.875em;}

.visual-slide .slider .visual01 {background:url(../img/main/img_visual01.png) no-repeat center center; background-size:cover;}

@media (max-width:1600px) {
	.contrainer section.main {padding:0em;}
}

@media (min-width: 1025px) {
	.visual-slide .control {position:absolute; right:0; top: 50%; width: 6em; transform: translate(0, -50%); }
	.visual-slide .slider {height:100%; border-radius: 0 2.5em 2.5em 0;}
	.visual-slide .slider .swiper-slide .txt {position: absolute; bottom: 5.2em;  max-width: 1600px; padding-left: 3em;}
}
@media (max-width: 1024px) {
	.visual-slide {height:auto; padding-right:0;}
	.visual-slide .slider {height:24em;}
	.visual-slide .control {position:relative; right: auto; bottom:auto; width: 100%; padding:1em 2em;}
	.visual-slide .control * {vertical-align: middle;}
	.visual-slide .control button {width: 2em; height: 2em;}
	.visual-slide .control .pager {margin-left:1em;}
	.visual-slide .control .swiper-pagination-fraction span {display: inline-block; width: auto; height: 2em; line-height:2em;}
	.visual-slide .control .swiper-pagination-fraction span.dot {margin: 0 1em;}
	.visual-slide .slider {border-radius: 0 0 2.5em 0;}
	.visual-slide .slider .swiper-slide .txt {position: absolute; bottom:2em; padding: 0 5% 1em 5%;}
	.visual-slide .slider .swiper-slide .txt img {width: 60%;}
	.visual-slide .slider .swiper-slide .txt p {font-size: 1.4em; margin-top: 1.5em;}
}

@media (max-width: 768px) {
	
	.visual-slide .slider .swiper-slide .txt p {font-size: 1.2em; margin-top: 1.1em;}
}
@media (max-width: 640px) {
	.visual-slide .slider {height:20em;}
	.visual-slide .slider .swiper-slide .txt {bottom:1em;}
	.visual-slide .slider .swiper-slide .txt p {font-size: 1em;}
}

@media (max-width: 420px) {
	.visual-slide .slider {height:16em;}
}

/* 섹션 */
section .inner .thumb {width:45em; border-radius:1.5em; box-shadow: 1em 1em 1.5em rgba(0, 0, 0, .15); overflow:hidden;}
section .inner .thumb img {display:block; width:100%;}
section .inner .txt-wrap {width:31em; margin-top:3.5em;}
section .inner .txt-wrap h3 {font-size: 3em; font-weight: 700; line-height: 1.2; }
section .inner .txt-wrap div {margin:5em 0 3.5em;}
section .inner .txt-wrap strong {font-size: 1.2em; font-weight: 700; line-height: 1.3; }
section .inner .txt-wrap p {line-height: 1.3; margin-top:.75em;}
section .inner .txt-wrap a {position:relative; display: block; padding:1em 0 1em 3em;}
section .inner .txt-wrap a:before {content: ''; position:absolute; top:50%; left:0; transform:translateY(-50%); display: block; width: 2.5em; height: 2.5em; background: url(/en/img/main/ico_arrow.svg) center no-repeat; background-size: 100% auto;}
section .inner .txt-wrap a:hover,
section .inner .txt-wrap a:focus {font-weight:700;}

section.sec01 {position: relative;}
section.sec01:after {content: ''; position: absolute; right: 0; bottom: 0; width: 80em; height: 22.5em; background: linear-gradient(93deg, #F4FFFA 0.18%, #F4F9FF 100.22%); background-size: cover; border-radius: 0 0 0 5em; z-index: -1;}
section.sec01 .inner .txt-wrap h3 {background: linear-gradient(142deg, #4037AA 25.75%, #0B73D2 109.42%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
section.sec02 {position: relative;}
section.sec02:after {content: ''; position: absolute; left: 0; bottom: 0; width: 80em; height: 22.5em; background: linear-gradient(93deg, #FEFFF4 0.18%, #FFF8F4 100.22%); background-size: cover; border-radius: 0 0 5em 0; z-index: -1;}
section.sec02 .inner .txt-wrap h3 {background: linear-gradient(270deg, #FFB661 2.5%, #FF4141 101.87%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

@media (min-width: 1025px) {
	section.sec01  .inner .thumb {float:left; }
	section.sec01  .inner .txt-wrap {float:right; }
	section.sec02  .inner .txt-wrap {float:left; }
	section.sec02  .inner .thumb {float:right; }
}
@media (max-width: 1024px) {
	section .inner .thumb,
	section .inner .txt-wrap {width:100%; float:none;}
	section .inner .txt-wrap {margin-top:2.5em;}
	section .inner .txt-wrap h3 {font-size: 2.5em;}
	section .inner .txt-wrap div {margin: 1.5em 0 1em;}
}

@media (max-width: 768px) {
	section .inner .txt-wrap h3 {font-size: 2.0em;}
}

@media (max-width: 640px) {
	section .inner .thumb {border-radius:1em;}
	section .inner .txt-wrap h3 {font-size: 1.8em;}
	section .inner .txt-wrap div {margin-top:1em;}
	section .inner .txt-wrap a {padding:1em 0 1em 2.5em;}
	section .inner .txt-wrap a:before  {width:2em; height:2em;}	
}

@media all and (max-width:520px) {
	section .inner .txt-wrap div br {display:none;}	
}


/* ie 타이틀 색상 변경 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 	section.sec01 .inner .txt-wrap h3 {background: none; color: #0B73D2;}
	section.sec02 .inner .txt-wrap h3 {background: none; color: #FF4141;}
}


/* 스크롤 애니메이션 */
.trans {transition:.8s all; -webkit-transition:.8s all;}
.trans-delay {transition-delay:.2s; -webkit-transition-delay:.2s;}
.trans-duration {transition-duration:.8s; -webkit-transition-duration:.8s;}

.scroll-action .trans {display:block; position:relative;} /* animation 실행 후 스타일 정의 */
.scroll-action:not(.active) .trans {transform:translateY(30%); -webkit-transform:translateY(30%); opacity:0;} /* animation 실행 전 스타일 정의 */