@charset "utf-8";

.main .section {background:#e7eff9}
.mcont {position:relative; max-width:1200px; margin:0 auto}

.main .mtltBox {font-size:36px; font-weight:700; margin-bottom:85px; line-height:1.3em}

@media screen and (max-width:1220px){
	.mcont {max-width:94%}
}

@media screen and (max-width:1024px){
	.main .mtltBox {font-size:3.6vw; margin-bottom:8.5vw;}
}

@media screen and (max-width:768px){
	.main .mtltBox {font-size:4.6vw; margin-bottom:9.5vw;}
}

@media screen and (max-width:480px){
	.main .mtltBox {font-size:5.6vw; margin-bottom:10.5vw;}
}


/* --------------------------------------------------첫번째 섹션-------------------------------------------------- */
.main #section1 {background:url(/eng/share/img/main/bg01.jpg) no-repeat 50% 50%; background-size:cover}
.main #section1 .mcont {position:relative; height:690px;}

.main #section1 .logoBox {position:absolute; top:50%; left:85px; transform: translateY(-50%)}
.main #section1 .data_txt {margin-top:45px;}

.main #section1 .logo_tlt img, .main #section1 .data_txt img {opacity:0;}

/*이펙트*/
.main #section1.active .logo_tlt img {opacity:1; animation-fill-mode: both !important; animation: fade-in-up 0.4s; animation-timing-function: ease-out; animation-delay:0.3s}
.main #section1.active .data_txt img {opacity:1; animation-fill-mode: both !important; animation: fade-in-up 0.4s; animation-timing-function: ease-out; animation-delay:0.4s}


@media screen and (max-width:1220px){
	.main #section1 .logoBox {left:50px;}
	.main #section1 .data_txt {margin-top:40px;}

	.main #section1 .logo_tlt img {height:240px}
	.main #section1 .data_txt img {height:120px}
}

@media screen and (max-width:1024px){
	.main #section1 .mcont {height:69vw;}

	.main #section1 .logoBox {left:4vw;}
	.main #section1 .data_txt {margin-top:3.9vw;}

	.main #section1 .logo_tlt img {height:23.4vw}
	.main #section1 .data_txt img {height:11.7vw}
}


/* --------------------------------------------------두번째 섹션-------------------------------------------------- */
.main #section2 .mcont {padding:100px 0 115px}
.main #section2 .ms_tlt {font-size:24px; margin-bottom:40px}

.main #section2 .mv_txtBox {position:relative; display:flex; align-items:center}
.main #section2 .mv_txtBox .mvBox {opacity:0; max-width:616px; width:100%;}
.main #section2 .mv_txtBox .mvBox iframe {border-radius:20px; overflow:hidden}
.main #section2 .mv_txtBox .txtrBox {opacity:0; margin-left:auto; max-width:550px; width:100%; line-height:1.45em; word-break: keep-all;}


/*이펙트*/
.main #section2.active .mv_txtBox .mvBox {opacity:1; animation-fill-mode: both !important; animation: fade-in-right 0.4s; animation-timing-function: ease-out; animation-delay:0.3s}
.main #section2.active .mv_txtBox .txtrBox {opacity:1; animation-fill-mode: both !important; animation: fade-in-left 0.4s; animation-timing-function: ease-out; animation-delay:0.3s}

@media screen and (max-width:1220px){
	.main #section2 .mv_txtBox {display:block}
	.main #section2 .mv_txtBox .mvBox {max-width:100%}
	.main #section2 .mv_txtBox .txtrBox {max-width:100%; margin-top:50px; text-align:center;}

	/*영상 풀버전*/
	.main #section2 .mainvideo-container {margin: 0; padding-bottom:43%;  max-width: 100%;  height: 0;  position: relative; overflow: hidden;}
	.main #section2 .mainvideo-container iframe, .main #section2 .mainvideo-container object, .main #section2 .mainvideo-container embed {margin: 0;  padding: 0; width: 100%; height: 100%; position: absolute; top: 0;  left:0;}
}

@media screen and (max-width:1024px){
	.main #section2 .mcont {padding:10vw 0 11.5vw}
	.main #section2 .mv_txtBox .txtrBox {margin-top:5vw}
	.main #section2 .ms_tlt {font-size:2.4vw; margin-bottom:4vw}
	.main #section2 .mv_txtBox .mvBox iframe {border-radius:2vw}
}

@media screen and (max-width:768px){
	.main #section2 .mcont {padding:11vw 0 12.5vw}
	.main #section2 .mv_txtBox .txtrBox {margin-top:6vw}
	.main #section2 .ms_tlt {font-size:3.4vw; margin-bottom:5vw}
	.main #section2 .mv_txtBox .mvBox iframe {border-radius:3vw}
}

@media screen and (max-width:480px){
	.main #section2 .mcont {padding:12vw 0 13.5vw}
	.main #section2 .mv_txtBox .txtrBox {margin-top:7vw}
	.main #section2 .ms_tlt {font-size:4.4vw; margin-bottom:6vw}
	.main #section2 .mv_txtBox .mvBox iframe {border-radius:4vw}
}


/* --------------------------------------------------세번째 섹션-------------------------------------------------- */
.main #section3 {background:url(/share/img/main/bg03.jpg) no-repeat 50% 50%; background-size:cover}
.main #section3 .mcont {padding:110px 0 155px}

.main #section3 .sec03_listUl li {display:inline-block; vertical-align:top; margin-right:100px;}
.main #section3 .sec03_listUl li:last-child {margin-right:0}
.main #section3 .sec03_listUl .icon {margin-bottom:30px;}

.main #section3 .sec03_listUl .numBox {position:relative; display:inline-block;}
.main #section3 .sec03_listUl .num {font-size:64px; font-family: 'GmarketSansBold'; line-height:1.3em}
.main #section3 .sec03_listUl .num .small {font-family: 'GmarketSansMedium';}
.main #section3 .sec03_listUl .mj {position:absolute; top:-15px; right:15px; font-size:29px; font-family: 'GmarketSansBold';}

.main #section3 .sec03_listUl .txt {font-size:18px; margin-top:10px}



@media screen and (max-width:1220px){
	.main #section3 .sec03_listUl li {margin-right:50px;}
}

@media screen and (max-width:1024px){
	.main #section3 .mcont {padding:11vw 0 15.5vw}

	.main #section3 .sec03_listUl li {margin-right:6vw;}
	.main #section3 .sec03_listUl .icon {margin-bottom:3vw;}
	.main #section3 .sec03_listUl .icon img {height:6.6vw}

	.main #section3 .sec03_listUl .num {font-size:5.6vw;}
	.main #section3 .sec03_listUl .mj {top:-1.8vw; right:1.5vw; font-size:2.9vw}

	.main #section3 .sec03_listUl .txt {font-size:1.8vw; margin-top:1vw}
}

@media screen and (max-width:768px){
	.main #section3 .mcont {padding:12vw 0 16.5vw}

	.main #section3 .sec03_listUl li {margin-right:4vw;}
	.main #section3 .sec03_listUl .icon {margin-bottom:4vw;}
	.main #section3 .sec03_listUl .icon img {height:8.6vw}

	.main #section3 .sec03_listUl .num {font-size:6vw;}
	.main #section3 .sec03_listUl .mj {top:-2.8vw; right:1.5vw; font-size:3.9vw}

	.main #section3 .sec03_listUl .txt {font-size:2.8vw; margin-top:1vw}
}

@media screen and (max-width:480px){
	.main #section3 .mcont {padding:13vw 0 17.5vw}
	.main #section3 .sec03_listUl .icon img {height:10.6vw}

	.main #section3 .sec03_listUl .mj {top:-3.8vw; right:1.5vw}

	.main #section3 .sec03_listUl .txt {font-size:3.2vw; margin-top:1.5vw}
}


/* --------------------------------------------------네번째 섹션-------------------------------------------------- */
.main #section4 .mcont {padding:100px 0 130px}

.main #section4 .sec04_listUl li {display:inline-block; vertical-align:top; margin:0 35px 65px 0}
.main #section4 .sec04_listUl li:nth-child(4n) {margin-right:0}
.main #section4 .sec04_listUl li:nth-child(n+5) {margin-bottom:0}
.main #section4 .sec04_listUl .imgBox {opacity:0; position:relative;}
.main #section4 .sec04_listUl .num {position:absolute; top:25px; left:15px; font-size:40px; font-family: 'GmarketSansBold';}
.main #section4 .sec04_listUl .txt {font-size:22px; color:#25247b; font-weight:700; margin-top:15px}


/*이펙트*/
.main #section4.active .sec04_listUl .imgBox {opacity:1; animation-fill-mode: both !important; animation: fanfare2 0.5s;}
.main #section4.active .sec04_listUl li:nth-child(1) .imgBox {animation-delay:0.3s}
.main #section4.active .sec04_listUl li:nth-child(2) .imgBox {animation-delay:0.4s}
.main #section4.active .sec04_listUl li:nth-child(3) .imgBox {animation-delay:0.5s}
.main #section4.active .sec04_listUl li:nth-child(4) .imgBox {animation-delay:0.6s}
.main #section4.active .sec04_listUl li:nth-child(5) .imgBox {animation-delay:0.7s}
.main #section4.active .sec04_listUl li:nth-child(6) .imgBox {animation-delay:0.8s}
.main #section4.active .sec04_listUl li:nth-child(7) .imgBox {animation-delay:0.9s}
.main #section4.active .sec04_listUl li:nth-child(8) .imgBox {animation-delay:1s}

@media screen and (max-width:1220px){
	.main #section4 .sec04_listUl li {width:24.5%; margin:0 0 65px 0}
	.main #section4 .sec04_listUl .imgBox {width:94%; margin:0 auto;}
	.main #section4 .sec04_listUl img {max-width:100%}
}

@media screen and (max-width:1024px){
	.main #section4 .mcont {padding:10vw 0 13vw}

	.main #section4 .sec04_listUl li {width:24.5%; margin:0 0 6vw 0}
	.main #section4 .sec04_listUl .num {top:2.5vw; left:1.5vw; font-size:4vw;}
	.main #section4 .sec04_listUl .txt {font-size:2.2vw; margin-top:1.5vw}
}

@media screen and (max-width:768px){
	.main #section4 .mcont {padding:11vw 0 14vw}

	.main #section4 .sec04_listUl li {width:32.5%; margin:0 0 6vw 0}
	.main #section4 .sec04_listUl .num {top:2.5vw; left:1.5vw; font-size:5vw;}
	.main #section4 .sec04_listUl .txt {font-size:3.2vw; margin-top:1.5vw}
}

@media screen and (max-width:480px){
	.main #section4 .mcont {padding:12vw 0 15vw}

	.main #section4 .sec04_listUl li, .main #section4 .sec04_listUl li:nth-child(n+5) {width:49.5%; margin:0 0 6vw 0}
	.main #section4 .sec04_listUl li:nth-child(n+7) {margin-bottom:0}
	.main #section4 .sec04_listUl .num {top:3.5vw; left:2.5vw; font-size:6vw;}
	.main #section4 .sec04_listUl .txt {font-size:4.2vw; margin-top:2vw}
}


/* --------------------------------------------------다섯번째 섹션-------------------------------------------------- */
.main #section5 {background:url(/share/img/main/bg05.jpg) no-repeat 50% 50%; background-size:cover}
.main #section5 .mcont {padding:110px 0 155px}

.main #section5 .hp_listUl {opacity:0;}
.main #section5 .hp_listUl li {display:inline-block; vertical-align:middle; width:24.5%; margin-bottom:50px}
.main #section5 .hp_listUl li:nth-child(n+9) {margin-bottom:0}
.main #section5 .hp_listUl .txt {font-size:12px; color:rgba(255,255,255,0.4); margin-bottom:10px; letter-spacing:0em;}


/*이펙트*/
.main #section5.active .hp_listUl {opacity:1; animation-fill-mode: both !important; animation: fade-in 0.7s; animation-timing-function: ease-in-out; animation-delay:0.3s}


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

@media screen and (max-width:1024px){
	.main #section5 .mcont {padding:11vw 0 15.5vw}

	.main #section5 .hp_listUl li {width:24.5%; margin-bottom:5vw}
	.main #section5 .hp_listUl li:nth-child(n+9) {margin-bottom:0}
	.main #section5 .hp_listUl img {height:7.5vw}
	.main #section5 .hp_listUl .txt {font-size:1.2vw; margin-bottom:1vw;}
}

@media screen and (max-width:768px){
	.main #section5 .mcont {padding:12vw 0 16.5vw}

	.main #section5 .hp_listUl li, .main #section5 .hp_listUl li:nth-child(n+9) {width:32.5%; margin-bottom:6vw}
	.main #section5 .hp_listUl li:nth-child(n+10) {margin-bottom:0}
	.main #section5 .hp_listUl img {height:8.5vw}
	.main #section5 .hp_listUl .txt {font-size:1.8vw; margin-bottom:1.5vw;}
}

@media screen and (max-width:480px){
	.main #section5 .mcont {padding:13vw 0 17.5vw}

	.main #section5 .hp_listUl img {height:9.5vw}
	.main #section5 .hp_listUl .txt {font-size:2.4vw; margin-bottom:2vw;}
}