@charset "utf-8";

#main {position:relative; overflow:hidden; background:#010101;}

.main-visual {height:100vh; position:relative;}
.main-visual:after {content:''; width:100%; height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.3); z-index:1;}
.main-visual video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-1;}
.main-visual .txt-box {position:absolute; top:0; left:0; width:100vw; height:100vh; z-index:10;}
.main-visual .txt-box .txt {opacity:0; position:absolute; height:100vh; width:100%; display:flex; align-items:center; text-align:center;}
.main-visual .txt-box p {font-size:72px; font-weight:700; font-family:'Aggravo'; color:#fff; line-height:1.2em; position:relative; width:100%;}
.main-visual .txt-box .txt01 p {transform:translateX(-260px)}
.main-visual .txt-box .txt02 p {transform:translateX(110px)}
.main-visual .txt-box .txt03 p {transform:translateX(-290px)}
.main-visual .txt-box .txt04 p {transform:translateX(260px)}
.main-visual img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) scale(260); width:100vw; height:100vh; object-fit:contain; z-index:10;}
.main-visual img.mob-visual {display:none;}
/* section */
.section {padding-top:150px; padding-bottom:320px; position:relative; border-radius:100px 100px 0 0;}
/* section01 */
.section01 {background:#0f0f10; padding:210px 0 310px;}
.section01 .col {display:flex; align-items:center; position:relative; z-index:1;}
.section01 .img-box {width:100%; max-width:710px;}
.section01 .img-box .img-wrap {height:560px; width:100%; max-width:550px; position:relative;}
.section01 .img-box .img {position:absolute; border-radius:20px; overflow:hidden; box-shadow:0 0 15px rgba(0,0,0,0.5);}
.section01 .img-box .img01 {top:0; left:168px;}
.section01 .img-box .img02 {bottom:0; left:0;}
.section01 .img-box .box {position:absolute; border-radius:10px;}
.section01 .img-box .box01 {width:70px; height:70px; top:104px; left:68px; background:linear-gradient(295deg,rgba(0, 193, 90, 1) 0%, rgba(1, 131, 62, 1) 100%);}
.section01 .img-box .box02 {width:170px; height:170px; top:145px; left:378px; z-index:1; background: linear-gradient(315deg,rgba(141, 77, 255, 1) 0%, rgba(111, 37, 243, 1) 100%); box-shadow:0 0 15px rgba(0,0,0,0.5);}
.section01 .img-box .box02 img {position:absolute; bottom:0; right:-15px;}
.section01 .img-box .box03 {width:40px; height:40px; bottom:165px; left:378px; background:#b3b9c1;}
.section01 .txt-box {width:1%; flex:1 1 auto;}
.section01 .txt-box h3 {font-size:60px; line-height:1.2em; color:#fff; font-weight:400; margin-bottom:36px;}
.section01 .txt-box h3 strong {color:#8d4dff; font-weight:600;}
.section01 .txt-box p {font-size:20px; line-height:1.8em; color:#fff; opacity:0.6; margin-bottom:76px;}
.section01 .txt-box .more a {width:200px; line-height:60px; padding:0 30px; border-radius:30px; color:#fff; font-size:18px; font-weight:500; position:relative; background:linear-gradient(270deg,rgba(141, 77, 255, 1) 0%, rgba(1, 159, 74, 1) 100%);}
.section01 .txt-box .more a span {width:40px; height:40px; position:absolute; top:50%; margin-top:-20px; border-radius:50%; right:10px; background:#fff; transition:all 0.4s;}
.section01 .txt-box .more a:hover span {background:transparent;}
.section01 .txt-box .more a span:before,
.section01 .txt-box .more a span:after {content:''; width:12px; height:2px; background:#ab4cff; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-6px; transition:all 0.4s;}
.section01 .txt-box .more a span:before {transform:rotate(90deg);}
.section01 .txt-box .more a:hover span:before,
.section01 .txt-box .more a:hover span:after {background:#fff;}
.section01 .tt {position:absolute; bottom:100px; left:0;}
/* section02 */
.section02 {z-index:2; background:#f8f8f8; margin-top:-100px;}
.section02 .title {text-align:center; margin-bottom:56px;}
.section02 .title h3 {font-size:72px; line-height:1.2em; color:#111; font-family:'Montserrat';}
.section02 .wrap {position:relative; width:100%; max-width:1760px; margin:0 auto; padding:0 140px;}
.section02 .item {height:100%;}
.section02 .inner {box-shadow:0 0 20px rgba(0,0,0,0.1); border:1px solid #b3b9c1; border-radius:20px; padding:60px; background:#fff; margin:20px; height:100%;}
.section02 .col {display:flex;}
.section02 .img-box {width:100%; max-width:640px;}
.section02 .img-box .pic {position:relative; height:0; padding-bottom:71.875%; overflow:hidden; transition:all 0.6s; border-radius:10px;}
.section02 .img-box .pic img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100% !important; height:100% !important; max-width:100%; min-height:100%; object-fit:cover; transition:0.3s;}
.section02 .txt-box {width:1%; flex:1 1 auto; padding-left:70px; padding-top:60px;}
.section02 .txt-box h4 {font-size:44px; line-height:1.2em; color:#111; font-weight:600; margin-bottom:26px; padding-bottom:26px; position:relative;}
.section02 .txt-box h4:after {content:''; width:24px; height:2px; background:#ddd; position:absolute; bottom:0; left:0;}
.section02 .txt-box .txt {margin-bottom:50px;}
.section02 .txt-box .txt p.eng {font-size:26px; line-height:1.2em; color:#8e8e8f; font-weight:600; margin-bottom:14px;}
.section02 .txt-box .txt p.kor {font-size:20px; line-height:1.8em; color:#666;}
.section02 .txt-box .more a {width:200px; line-height:60px; border-radius:30px; padding:0 30px; position:relative; transition:all 0.4s; font-size:18px; font-weight:500; color:#666; background:#f8f8f8;}
.section02 .txt-box .more a:hover {background:#8d4dff; color:#fff;}
.section02 .txt-box .more a span {position:absolute; width:40px; height:40px; right:10px; top:50%; margin-top:-20px; border-radius:50%; background:#fff; transition:all 0.4s;}
.section02 .txt-box .more a span:before,
.section02 .txt-box .more a span:after {content:''; width:12px; height:2px; background:#666; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-6px; transition:all 0.4s;}
.section02 .txt-box .more a span:before {transform:rotate(90deg);}
.section02 .txt-box .more a:hover span:before,
.section02 .txt-box .more a:hover span:after {background:#8d4dff;}
.section02 .slick-arrow {width:52px; height:36px; background-repeat:no-repeat; background-size:cover; transition:all 0.4s; position:absolute; top:50%; margin-top:-18px; border:0; font-size:0; background-color:transparent; z-index:11;}
.section02 .slick-prev {background-image:url('../img/main/sec02-prev.png'); left:-85px;}
.section02 .slick-next {background-image:url('../img/main/sec02-next.png'); right:-85px;}
.section02 .slick-prev:hover {background-image:url('../img/main/sec02-prev-on.png');}
.section02 .slick-next:hover {background-image:url('../img/main/sec02-next-on.png');}
.section02 .slick-dots {position:absolute; left:0; width:100%; bottom:-30px; display:flex; justify-content:center;}
.section02 .slick-dots li {padding:0 4px;}
.section02 .slick-dots li button {display:block; font-size:0; border:0; background-color:#b3b9c1; width:10px; height:10px; border-radius:5px; transition:all 0.4s;}
.section02 .slick-dots li.slick-active button {width:30px; background:#7952c1;}
/* section03 */
.section03 {z-index:3; background:url('../img/main/sec03bg.jpg') center center no-repeat; background-size:cover; margin-top:-100px; overflow:hidden;}
.section03 .tt {display:block; position:relative; z-index:10; width:100%; max-width:1680px; height:420px; margin-bottom:72px;}
.section03 .tt a {position:absolute; top:50%; margin-top:-60px; width:120px; height:120px; right:-60px; background:#8d4dff; border-radius:50%; z-index:10; transition:all 0.4s;}
.section03 .tt a:before,
.section03 .tt a:after {content:''; width:20px; height:2px; background:#fff; position:absolute; top:50%; left:50%; margin-top:-1px; margin-left:-10px;}
.section03 .tt a:after {transform:rotate(90deg);}
.section03 .tt a span {position:absolute; transform:scale(0.7); width:240px; height:240px; top:50%; left:50%; margin-top:-120px; margin-left:-120px; transition:all 0.4s;}
.section03 .tt a:hover span {transform:scale(1);}
.section03 .tt a span img {animation: ess-title 12s linear infinite both;}
@keyframes ess-title {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}
.section03 .tt .img {background:url('../img/main/sec03tt.jpg') left center no-repeat; width:100%; height:100%; border-radius:0 20px 20px 0; display:inline-block; overflow:hidden; transition:all 0.4s; z-index:5;}
.section03 .tt a:hover + .img {border-radius:0 210px 210px 0;}
.section03 .tt .back {position:absolute; top:-155%; right:-50%; z-index:-1; opacity:0; transition:all 0.4s;}
.section03 .tt a:hover ~ .back {opacity:1;}
.section03 .tit-box {color:#fff;}
.section03 .tit-box p {font-size:24px; line-height:1.4em; font-weight:500; margin-bottom:36px;}
.section03 .tit-box h3 {font-size:50px; line-height:1.2em; font-weight:400;}
.section03 .tit-box h3 strong {font-weight:600;}
/* section04 */
.section04 {padding-bottom:176px; z-index:4; background:url('../img/main/sec04bg.jpg') center center no-repeat; background-size:cover; margin-top:-100px; transition:all 0.4s;}
.section04:has(.col:hover) {background-image:url('../img/main/sec04bg-on.jpg');}

.section04 .col {display:flex; padding:60px; background:#fff; border-radius:20px; align-items:center; border:1px solid #b3b9c1; position:relative; background-image:url('../img/main/sec04-col.jpg'); background-position:center center; background-size:cover; background-repeat:no-repeat; transition:all 0.4s}
.section04 .col:hover {background-image:url('../img/main/sec04-col-on.jpg'); border-color:#8d4dff;}
.section04 .txt-box {width:1%; flex:1 1 auto;}
.section04 .txt-box h3 {font-size:56px; line-height:1.2em; color:#b3b9c1; display:inline-block; position:relative; padding-right:100px; transition:all 0.4s;}
.section04 .col:hover .txt-box h3 {color:#8d4dff;}
.section04 .txt-box h3 span {position:absolute; right:0; top:50%; margin-top:-36px; width:72px; height:72px; border-radius:50%; background:#b3b9c1; transition:all 0.4s;}
.section04 .col:hover .txt-box h3 span {background:#8d4dff;}
.section04 .txt-box h3 span.c1 {transform:scale(0.15);}
.section04 .txt-box h3 span.c2 {animation: scale-fade 2s linear infinite both 0s}
.section04 .txt-box h3 span.c3 {animation: scale-fade 2s linear infinite both 0.5s}
.section04 .txt-box h3 span.c4 {animation: scale-fade 2s linear infinite both 1s}
@keyframes scale-fade {0% {transform: scale(0.3);opacity: .4;} 100% {transform: scale(0.9);opacity: .1;}}
.section04 .img-box {width:100%; max-width:700px; border-radius:10px; overflow:hidden; transition:all 0.4s;}
.section04 .col:hover .img-box {border-radius:265px;}

.section04 .back {position:absolute; top:50%; left:-50%;}