#container.main > .page-wrapper {position: relative;background-color: #010311;padding-bottom:215px;} /* #container.main > .page-wrapper:before { content:''; background: url("../../images/main/main-background.jpg")no-repeat center/cover; width: 100%; height: 100%; position: absolute; left:0; top:0; z-index: -1; } */ #container.main > .page-wrapper .mVideo-section {position:relative;} #container.main > .page-wrapper .mVideo-section .host{position:absolute;left:4.73%;bottom:25.11%;} #container.main > .page-wrapper .mVideo-section .host > p{font-size:16px;font-weight:500;color:#F36086;margin-bottom:10px;} #container.main > .page-wrapper .mVideo-section .host .logo{display: flex;align-items: center;gap:0 40px;} #container.main > .page-wrapper .mVideo-section .host .logo > a{display: flex;max-width: 8.3333vw;} #container.main > .page-wrapper .mVideo-section .list{position: absolute;left:50%;transform: translateX(-50%);bottom:14.2%;display: flex;gap:0 30px;} #container.main > .page-wrapper .mVideo-section .list > a{display: flex;flex-direction: column;align-items: center;width: 100px;} #container.main > .page-wrapper .mVideo-section .list > a > p{color:rgba(255, 255, 255, 0.6);font-size:16px;font-weight: 500;margin-top:20px;} #container.main > .page-wrapper .mVideo-section .list > a span{display: flex;width: 50px;height: 42px;} #container.main > .page-wrapper .mVideo-section .list > a span:before{content:'';background: url("../../images/main/link-icon.png")no-repeat left center/ 200px 42px;display: inline-block;width:50px;height: 42px;} #container.main > .page-wrapper .mVideo-section .list > a.l1 span:before{background-position:left center;} #container.main > .page-wrapper .mVideo-section .list > a.l2 span:before{background-position:left -50px center;} #container.main > .page-wrapper .mVideo-section .list > a.l3 span:before{background-position:left -100px center;} #container.main > .page-wrapper .mVideo-section .list > a.l4 span:before{background-position:left -150px center;} #container.main > .page-wrapper .mVideo-section span.scroll-btn{display: flex;align-items: center;justify-content: center;width: 60px;height: 60px;position: absolute;left:50%;bottom:2%;transform: translateX(-50%);border: 1px solid #FFFFFF;border-radius: 50%; animation: scrollDown 1.8s ease-in-out infinite;} #container.main > .page-wrapper .mVideo-section span.scroll-btn::before{content:'';background: url("../../images/common/down-icon.svg")no-repeat left -0.5px center/cover;width: 58px;height: 58px;display: inline-block;} @keyframes scrollDown { 0% { transform: translate(-50%, 0); opacity: 1; } 50% { transform: translate(-50%, 12px); opacity: 0.75; } 100% { transform: translate(-50%, 0); opacity: 1; } } #container.main > .page-wrapper .mSection {position: relative;} #container.main > .page-wrapper .mSection .s1, #container.main > .page-wrapper .mSection .s2, #container.main > .page-wrapper .mSection .s3, #container.main > .page-wrapper .mSection .s4, #container.main > .page-wrapper .mSection .s5{position:relative;} #container.main > .page-wrapper .mSection .s1 .bg, #container.main > .page-wrapper .mSection .s2 .bg, #container.main > .page-wrapper .mSection .s3 .bg, #container.main > .page-wrapper .mSection .s4 .bg, #container.main > .page-wrapper .mSection .s5 .bg{position:absolute;z-index: 0;will-change: transform;} #container.main > .page-wrapper .mSection .s1 .bg.bg1{background: url("../../images/main/main-b1.png")no-repeat;width: 689px;height: 809px;top:33%;left:0;} #container.main > .page-wrapper .mSection .s1 .bg.bg2{background: url("../../images/main/main-b2.png")no-repeat;width: 91px;height: 91px;right:11%;top:28%;} #container.main > .page-wrapper .mSection .s2 .bg.bg1{background: url("../../images/main/main-b3.png")no-repeat;width: 201px;height: 201px;right:6.5%;top:44%;} #container.main > .page-wrapper .mSection .s3 .bg.bg1{background: url("../../images/main/main-b4.png")no-repeat;width: 830px;height: 1092px;right:0;top:-17%;} #container.main > .page-wrapper .mSection .s3 .bg.bg2{background: url("../../images/main/main-b5.png")no-repeat;width: 688px;height: 1446px;left:0;top:29%;} #container.main > .page-wrapper .mSection .s4 .bg.bg1{background: url("../../images/main/main-b6.png")no-repeat;width: 241px;height: 241px;left:0;top:141%;} #container.main > .page-wrapper .mSection .s5 .bg.bg1{background: url("../../images/main/main-b7.png")no-repeat;width: 1920px;height: 1773px;right:0;top:-32%;} #container.main > .page-wrapper .mSection .s5 .bg.bg2{background: url("../../images/main/main-b8.png")no-repeat;width: 136px;height: 136px;right:11%;top:50%;} #container.main > .page-wrapper .mSection .title-a{margin-bottom:100px;} #container.main > .page-wrapper .mSection .title-a > span { background: linear-gradient(to right, #EC3354 0%, #6C5FE2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; text-align: center;text-transform: uppercase;} #container.main > .page-wrapper .mSection .title-a > p.t1{font-size:44px;font-weight: 600;color:#fff;margin-top:10px;text-align: center;} #container.main > .page-wrapper .mSection .title-a > p.t1 strong{font-weight: 400;} #container.main > .page-wrapper .mSection .title-a > p.t2{font-size:20px;color:#fff;font-weight: 100;margin-top:10px;text-align: center;} #container.main > .page-wrapper .mSection .s1{padding:190px 0 80px;} #container.main > .page-wrapper .mSection .s1 .list{} #container.main > .page-wrapper .mSection .s1 .list { } #container.main > .page-wrapper .mSection .s1 .list > ul { display: flex; gap: 0 27px; flex-wrap: wrap; } #container.main > .page-wrapper .mSection .s1 .list > ul > li { width: calc((100% / 4) - 21px); height: 400px; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } #container.main > .page-wrapper .mSection .s1 .list.on > ul > li { opacity: 1; transform: translateY(0); } #container.main > .page-wrapper .mSection .s1 .list > ul > li:first-child { border-radius: 0 0 0 80px; } #container.main > .page-wrapper .mSection .s1 .list > ul > li:last-child { border-radius: 0 80px 0 0; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a { display: flex; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s ease; perspective: 1000px; } #container.main > .page-wrapper .mSection .s1 .list > ul > li:hover > a { transform: rotateY(180deg) scale(1.05); z-index: 2; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front, #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; backface-visibility: hidden; transition: opacity 0.4s ease, transform 0.4s ease; display: flex; justify-content: center; align-items: center; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front { z-index: 2; transform: rotateY(0deg); display: flex; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front figure { position: absolute; width: 100%; height: 100%; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front figure img { width: 100%; height: 100%; object-fit: cover; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front > p { font-size: 70px; font-weight: 700; color: #FFFBFB; position: absolute; left: 10%; bottom: 8%; display: flex; align-items: flex-start; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front > p:after { content: ''; background: url("../../images/common/add-icon.svg") no-repeat; display: inline-block; width: 29px; height: 29px; margin-left: 2px; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .back { transform: rotateY(180deg); pointer-events: auto; background-color: #119A94; color: #FFFBFB; text-align: center; z-index: 1; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .back > div { padding: 50px 30px; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .back p.t1 { font-size: 50px; font-weight: 700; margin-bottom: 10px; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .back p.t2 { font-size: 25px; font-weight: 500; } #container.main > .page-wrapper .mSection .s1 .list > ul > li:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25); } #container.main > .page-wrapper .mSection .s2{padding:80px 0;} #container.main > .page-wrapper .mSection .s2 div.descriptive{} #container.main > .page-wrapper .mSection .s2 div.descriptive > div{display: flex;justify-content: center;align-items: center;background-color: rgba(185, 187, 247, 0.1);border-radius: 20px;padding:40px 30px;width: 100%;box-shadow: 3px 3px 6px rgba(0,0,0,0.25);backdrop-filter: blur(10px);position:relative;z-index: 1; transition: clip-path 1.5s ease-in-out,filter 1s ease-in-out;filter:blur(4px);clip-path: inset(0 50% 0 50%);} #container.main > .page-wrapper .mSection .s2 div.descriptive.on > div{clip-path:inset(0);filter:blur(0);} #container.main > .page-wrapper .mSection .s2 div.descriptive p{color:#B0B2CA;text-align: center;line-height: 1.5;} #container.main > .page-wrapper .mSection .s2 div.descriptive p strong{color:#FFFFFF;font-weight: 600;} #container.main > .page-wrapper .mSection .s3{padding:80px 0;} #container.main > .page-wrapper .mSection .s3 .exhibition-list{overflow: hidden;padding-bottom:5px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list > div{display: flex;gap:30px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list > div + div{margin-top:40px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul{display: flex;gap:30px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul li{} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul li > a{display: flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 20px;width: 400px;height: 300px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .scroll-track { display: flex; gap: 30px; width: max-content; transform: translateX(0); will-change: transform;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .left-scroller, .mSection.sec-1 .b-list .exhibition-list .right-scroller {position: relative; } #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text{text-align: center;display: flex;flex-direction: column;align-items: center;margin-top:50px;position: relative;z-index: 2;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text > p{font-size:16px;color:#9A9BAC;font-weight: 300;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text a.more{margin-top:30px;display: flex;align-items: center;justify-content: center;width: 64px;height: 64px;border-radius: 50%;border: 1px solid rgba(233, 233, 233, 0.3);} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text a.more:before{content:'';background: url("../../images/common/more-arrow.svg")no-repeat center;width: 64px;height: 64px;display: inline-block;transition: transform 0.6s ease;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text a.more:hover::before {transform: rotate(360deg);} #container.main > .page-wrapper .mSection .s4 { padding:80px 0; } #container.main > .page-wrapper .mSection .s4 { } #container.main > .page-wrapper .mSection .s4 .countdown { display: flex; justify-content: center; align-items: flex-end; } #container.main > .page-wrapper .mSection .s4 .countdown .day { display: flex; align-items: center; gap:10px; } #container.main > .page-wrapper .mSection .s4 .countdown .day > p { font-size:70px; font-weight: 100; color:#EA003D; } #container.main > .page-wrapper .mSection .s4 .countdown .day > .num { font-size:80px; color:#EA003D; font-weight: 800; } #container.main > .page-wrapper .mSection .s4 .countdown .hours, #container.main > .page-wrapper .mSection .s4 .countdown .minutes, #container.main > .page-wrapper .mSection .s4 .countdown .seconds { display: flex; flex-direction: column; align-items: center; position:relative; padding-left:40px; margin-left:40px; } #container.main > .page-wrapper .mSection .s4 .countdown .hours::before, #container.main > .page-wrapper .mSection .s4 .countdown .minutes::before, #container.main > .page-wrapper .mSection .s4 .countdown .seconds::before { content:''; background-color: rgba(191, 195, 231, 0.15); width: 1px; height: 24px; position: absolute; left:0; bottom:12px; } #container.main > .page-wrapper .mSection .s4 .countdown .hours .num, #container.main > .page-wrapper .mSection .s4 .countdown .minutes .num, #container.main > .page-wrapper .mSection .s4 .countdown .seconds .num { font-size:80px; font-weight: 300; color:#E4E4EC; letter-spacing: 2px; } #container.main > .page-wrapper .mSection .s4 .countdown .hours span, #container.main > .page-wrapper .mSection .s4 .countdown .minutes span, #container.main > .page-wrapper .mSection .s4 .countdown .seconds span { font-size:10px; font-weight: 400; color:rgba(102, 107, 153, 0.7); } #container.main > .page-wrapper .mSection .s4 .countdown .num { transition: all 0.3s ease; min-width: 115px; display: flex; justify-content: center; } /* 초기 상태: 투명 + 아래에서 올라오게 */ #container.main > .page-wrapper .mSection .s4 .countdown .day, #container.main > .page-wrapper .mSection .s4 .countdown .hours, #container.main > .page-wrapper .mSection .s4 .countdown .minutes, #container.main > .page-wrapper .mSection .s4 .countdown .seconds{ opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } #container.main > .page-wrapper .mSection .s4 .countdown .time{display: flex;align-items: flex-end;} /* .on 클래스가 붙으면 보이게 전환 */ #container.main > .page-wrapper .mSection .s4 .countdown.on .day { opacity: 1; transform: translateY(0); transition-delay: 0s; } #container.main > .page-wrapper .mSection .s4 .countdown.on .hours { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } #container.main > .page-wrapper .mSection .s4 .countdown.on .minutes { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } #container.main > .page-wrapper .mSection .s4 .countdown.on .seconds { opacity: 1; transform: translateY(0); transition-delay: 0.6s; } #container.main > .page-wrapper .mSection .s5{padding:80px 0;} #container.main > .page-wrapper .mSection .s5 .banner-slide{height:0; padding-bottom: 20%;overflow: hidden;} #container.main > .page-wrapper .mSection .s5 .banner-slide .swiper-wrapper{position: absolute;} #container.main > .page-wrapper .mSection .s5 .effect-motion { overflow: hidden; position: relative; width: 100%;background-size: cover; background-position: 50% 0;} #container.main > .page-wrapper .mSection .s5 .effect-motion:after { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: #010311; content: ""; } #container.main > .page-wrapper .mSection .s5 .effect-motion .img_box { overflow: hidden; position: relative; z-index: 20; float: left; background: inherit; transition-duration: 1s; opacity: 0; } #container.main > .page-wrapper .mSection .s5 .effect-motion .img_box.active { opacity: 1; transform: skew(0deg) translate(0px) scale(1) rotate(0deg) !important; } #container.main > .page-wrapper .mSection .s5 .effect-motion .img_box .img_position { position: absolute; background: inherit; } #container.main > .page-wrapper .mSection .s5 .banner-text{margin-top:70px;} #container.main > .page-wrapper .mSection .s5 .banner-text p.t1{font-size:40px;font-weight: 700;color:#fff;} #container.main > .page-wrapper .mSection .s5 .banner-text p.t2{font-size:20px;color:#9A9BAC;margin-top:20px;font-weight: 300;line-height: 1.5;} #container.main > .page-wrapper .mSection .s5 .banner-text a.more{margin-top:70px;display: flex;align-items: center;justify-content: center;width: 64px;height: 64px;border-radius: 50%;border: 1px solid rgba(233, 233, 233, 0.3);} #container.main > .page-wrapper .mSection .s5 .banner-text a.more:before{content:'';background: url("../../images/common/more-arrow.svg")no-repeat center;width: 64px;height: 64px;display: inline-block;transition: transform 0.6s ease;} #container.main > .page-wrapper .mSection .s5 .banner-text a.more:hover::before {transform: rotate(360deg);} .layer-popup{position: fixed;width: 100%;height: 100%;z-index: 1000;left:0;top:100%;transition: top 0.5s ease;pointer-events: none;} .layer-popup.active { top: 0;pointer-events: auto;} .layer-popup > .wrap{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;backdrop-filter: none; -webkit-backdrop-filter: none;transition: backdrop-filter 0.3s ease;padding:20px;} .layer-popup.blur-on > .wrap{backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);} .layer-popup > .wrap .popup{max-width: 1200px;width: 100%;position: relative;} .layer-popup > .wrap .popup > div{width: 100%;background-color: #fff;border-radius: 20px;overflow: hidden;height: 0; padding-bottom:33.33335%;padding-top:33.33335%;/*padding:60px 30px;*/display:flex;align-items:center;justify-content:center;} .layer-popup > .wrap .popup > div:before{content:'';background: url("../../images/common/popup-bg.png")no-repeat;width: 100%;height: 100%;position: absolute;left:0;top:0;background-size: cover;} .layer-popup > .wrap .popup > div .close{position: absolute;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;right:20px;top:20px;} .layer-popup > .wrap .popup > div .close:before{content:'';background: url("../../images/common/popup-close.svg")no-repeat;display: inline-block;width: 22px;height: 22px;} .layer-popup > .wrap .popup > div .slide-wrap { position: relative; overflow: hidden;max-width: 825px; margin: 0 auto;display:flex;align-items: center;justify-content: center;width:68.75%;} .layer-popup > .wrap .popup > div .slide-wrap .list {} .layer-popup > .wrap .popup > div .slide-wrap .slide{} .layer-popup > .wrap .popup > div .slide-wrap .slide .figure{overflow: hidden;border-radius: 20px;} .layer-popup > .wrap .popup > div .slide-wrap .slide .figure > img{width: 100%;} .layer-popup > .wrap .popup > div .slide-wrap .slide .text-a{display: flex;align-items: flex-end;margin-top:23px;padding:0 20px;gap:0 12px;margin-bottom:10px;} .layer-popup > .wrap .popup > div .slide-wrap .slide .text-a > p{color:#111;font-size:22px;font-weight: 700;} .layer-popup > .wrap .popup > div .slide-wrap .slide .text-a > span{font-size:14px;color:#111;font-weight: 200;} .layer-popup > .wrap .popup > div .slide-arrow { display: flex; justify-content: space-between; position: absolute; width: 100%; top: 50%; left: 0; transform: translateY(-50%); z-index: 10; pointer-events: none; } .layer-popup > .wrap .popup > div .slide-arrow a { width: 64px; height: 64px; border:1px solid #585858; border-radius: 50%; pointer-events: auto; } .layer-popup > .wrap .popup > div .slide-arrow a.prev {margin-left: 30px;} .layer-popup > .wrap .popup > div .slide-arrow a.next {margin-right: 30px;} .layer-popup > .wrap .popup > div .slide-arrow a:after{content:'';background: url("../../images/common/popup-arrow.svg")no-repeat center left/128px 64px;display: inline-block;width: 64px;height: 64px;} .layer-popup > .wrap .popup > div .slide-arrow a.next:after{background-position: right center;} .layer-popup.email-popup > .wrap .popup > div{padding-bottom:18.33335%;padding-top:18.33335%;} .layer-popup.email-popup > .wrap .popup > div > div{padding:50px;} .layer-popup.email-popup > .wrap .popup > div:before{display: none;} .layer-popup.email-popup > .wrap .popup > div > div > h3{font-size:45px;} .layer-popup.email-popup > .wrap .popup > div > div > p{font-size:20px;margin-top:40px;line-height: 1.4;} /* .layer-popup.email-popup > .wrap .popup > div > div > h3{font-size:2.3438vw;} .layer-popup.email-popup > .wrap .popup > div > div > p{font-size:1.0417vw;margin-top:2.0833vw;} */ @media screen and (max-width: 1300px){ #container.main > .page-wrapper{padding-bottom:150px;} #container.main > .page-wrapper .mSection .title-a{margin-bottom:80px;} #container.main > .page-wrapper .mSection .title-a > p.t1{font-size:40px;} #container.main > .page-wrapper .mSection .title-a > span{font-size:14px;} #container.main > .page-wrapper .mVideo-section .list{position: absolute;left:50%;transform: translateX(-50%);bottom:14.2%;display: flex;gap:0 2.3077vw;} #container.main > .page-wrapper .mVideo-section .list > a{display: flex;flex-direction: column;align-items: center;width: 7.6923vw;} #container.main > .page-wrapper .mVideo-section .list > a > p{color:rgba(255, 255, 255, 0.6);font-size:1.2308vw;font-weight: 500;margin-top:1.5385vw;} #container.main > .page-wrapper .mVideo-section .list > a span{display: flex;width: 3.8462vw;height: 3.2308vw;} #container.main > .page-wrapper .mVideo-section .list > a span:before{content:'';background: url("../../images/main/link-icon.png")no-repeat left center/ 15.3846vw 3.2308vw;display: inline-block;width:3.8462vw;height: 3.2308vw;} #container.main > .page-wrapper .mVideo-section .list > a.l1 span:before{background-position:left center;} #container.main > .page-wrapper .mVideo-section .list > a.l2 span:before{background-position:left -3.8462vw center;} #container.main > .page-wrapper .mVideo-section .list > a.l3 span:before{background-position:left -7.6923vw center;} #container.main > .page-wrapper .mVideo-section .list > a.l4 span:before{background-position:left -11.5385vw center;} #container.main > .page-wrapper .mVideo-section span.scroll-btn{display: flex;align-items: center;justify-content: center;width: 4.6154vw;height: 4.6154vw;position: absolute;left:50%;bottom:2%;transform: translateX(-50%);border: 1px solid #FFFFFF;border-radius: 50%; animation: scrollDown 1.8s ease-in-out infinite;} #container.main > .page-wrapper .mVideo-section span.scroll-btn::before{content:'';background: url("../../images/common/down-icon.svg")no-repeat left -0.5px center/cover;width: 4.4615vw;height: 4.4615vw;display: inline-block;} #container.main > .page-wrapper .mSection .s1 .bg.bg1{background: url("../../images/main/main-b1.png")no-repeat;width: 34.6154vw;height: 40.6154vw;top:33%;left:0;background-size: cover;} #container.main > .page-wrapper .mSection .s1 .bg.bg2{background: url("../../images/main/main-b2.png")no-repeat;width: 4.6154vw;height: 4.6154vw;right:11%;top:28%;background-size: cover;} #container.main > .page-wrapper .mSection .s2 .bg.bg1{background: url("../../images/main/main-b3.png")no-repeat;width: 11.5385vw;height: 11.5385vw;right:6.5%;top:44%;background-size: cover;} #container.main > .page-wrapper .mSection .s3 .bg.bg1{background: url("../../images/main/main-b4.png")no-repeat;width: 38.4615vw;height: 50.6154vw;right:0;top:-17%;background-size: cover;} #container.main > .page-wrapper .mSection .s3 .bg.bg2{background: url("../../images/main/main-b5.png")no-repeat;width: 26.9231vw;height: 56.6154vw;left:0;top:29%;background-size: cover;} #container.main > .page-wrapper .mSection .s4 .bg.bg1{background: url("../../images/main/main-b6.png")no-repeat;width: 15.3846vw;height: 15.3846vw;left:0;top:141%;background-size: cover;} #container.main > .page-wrapper .mSection .s5 .bg.bg1{background: url("../../images/main/main-b7.png")no-repeat;width: 100vw;height: 92.3077vw;right:0;top:-32%;background-size: cover;} #container.main > .page-wrapper .mSection .s5 .bg.bg2{background: url("../../images/main/main-b8.png")no-repeat;width: 7.6923vw;height: 7.6923vw;right:11%;top:50%;background-size: cover;} #container.main > .page-wrapper .mSection .s1{padding:100px 60px;} #container.main > .page-wrapper .mSection .s2{padding:60px 0;} #container.main > .page-wrapper .mSection .s3{padding:60px 0;} #container.main > .page-wrapper .mSection .s4{padding:60px 0;} #container.main > .page-wrapper .mSection .s5{padding:60px 0;} #container.main > .page-wrapper .mSection .s1 .list > ul{gap:25px;} #container.main > .page-wrapper .mSection .s1 .list > ul > li{width: calc((100% / 2) - 21px);} #container.main > .page-wrapper .mSection .s1 .list > ul > li:first-child{border-radius: 80px 0 0 0;} #container.main > .page-wrapper .mSection .s1 .list > ul > li:last-child{border-radius: 0 0 80px 0;} #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front > p { font-size: 5.3846vw; font-weight: 700; color: #FFFBFB; position: absolute; left: 10%; bottom: 8%; display: flex; align-items: flex-start; } #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front > p:after { content: ''; background: url("../../images/common/add-icon.svg") no-repeat; display: inline-block; width: 2.2308vw; height: 2.2308vw;background-size:cover; margin-left: 2px;background-size:cover; } #container.main > .page-wrapper .mSection .s1 .list > ul > li:hover > a { transform: none; z-index: auto; } #container.main > .page-wrapper .mSection .s1 .list > ul > li:hover { box-shadow: none; } #container.main > .page-wrapper .mSection .s2 div.descriptive > div{font-size:15px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul{gap:25px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list > div{gap:25px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list > div + div{margin-top:30px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul li > a{width: 350px;height:263px;} #container.main > .page-wrapper .mSection .s4 .countdown .num{min-width: 8.8462vw;} #container.main > .page-wrapper .mSection .s4 .countdown .day > p { font-size:5.3846vw; font-weight: 100; color:#EA003D; } #container.main > .page-wrapper .mSection .s4 .countdown .day > .num { font-size:6.1538vw; color:#EA003D; font-weight: 800; } #container.main > .page-wrapper .mSection .s4 .countdown .hours .num, #container.main > .page-wrapper .mSection .s4 .countdown .minutes .num, #container.main > .page-wrapper .mSection .s4 .countdown .seconds .num { font-size:6.1538vw; font-weight: 300; color:#E4E4EC; letter-spacing: 2px; } #container.main > .page-wrapper .mSection .s5 .banner-text p.t1{font-size:36px;} #container.main > .page-wrapper .mSection .s5 .banner-text p.t2{font-size:16px;} } @media screen and (max-width: 768px){ #container.main > .page-wrapper{padding-bottom:0;} #container.main > .page-wrapper .mSection .title-a{margin-bottom:30px;} #container.main > .page-wrapper .mSection .title-a > span{font-size:16px;} #container.main > .page-wrapper .mSection .title-a > p.t1{font-size:24px;} #container.main > .page-wrapper .mVideo-section .host{position: static;padding:0 20px;margin-top:10px;} #container.main > .page-wrapper .mVideo-section .list{position: static;padding:0 20px;transform:translate(0);gap:10px;margin-top:40px;justify-content: center;} #container.main > .page-wrapper .mVideo-section .list > a{width:80px;} #container.main > .page-wrapper .mVideo-section .list > a span { display: flex; width: 30px; height: 25px; } #container.main > .page-wrapper .mVideo-section .list > a span:before { content: ''; background: url("../../images/main/link-icon.png") no-repeat left center / 120px 25px; display: inline-block; width: 30px; height: 25px; } #container.main > .page-wrapper .mVideo-section .list > a:nth-child(1) span:before { background-position: 0 0; } #container.main > .page-wrapper .mVideo-section .list > a:nth-child(2) span:before { background-position: -30px 0; } #container.main > .page-wrapper .mVideo-section .list > a:nth-child(3) span:before { background-position: -60px 0; } #container.main > .page-wrapper .mVideo-section .list > a:nth-child(4) span:before { background-position: -90px 0; } #container.main > .page-wrapper .mVideo-section .host .logo{gap:0 10px;} #container.main > .page-wrapper .mVideo-section .host > p{font-size:10px;} #container.main > .page-wrapper .mVideo-section .host .logo > a{max-width: 24vw;} #container.main > .page-wrapper .mVideo-section .list > a > p{font-size:12px;margin-top:12px;} #container.main > .page-wrapper .mVideo-section span.scroll-btn{width:30px;height:30px;position: relative;margin-top:120px;} #container.main > .page-wrapper .mVideo-section span.scroll-btn::before{width:30px;height:30px;background-size: 30px auto;} #container.main > .page-wrapper .mSection .s1{padding:60px 0 30px;} #container.main > .page-wrapper .mSection .s1 .list > ul{gap:20px;} #container.main > .page-wrapper .mSection .s1 .list > ul > li{width:100%;} #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front > p{font-size:40px;} #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .front > p:after{width:18px;height:18px;background-size: 18px auto;} #container.main > .page-wrapper .mSection .s1 .list > ul > li > a .back{display: none;} #container.main > .page-wrapper .mSection .s1 .list > ul > li:hover{transform: translate(0);} #container.main > .page-wrapper .mSection .s1 .list > ul > li:first-child{border-radius:80px 0 0 0 ;} #container.main > .page-wrapper .mSection .s1 .list > ul > li:last-child{border-radius: 0 0 80px 0;} #container.main > .page-wrapper .mSection .s2{padding:30px 0;} #container.main > .page-wrapper .mSection .s3{padding:30px 0;} #container.main > .page-wrapper .mSection .s3 .exhibition-list{padding-bottom:30px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list > div + div{margin-top:30px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul{gap:20px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .scroll-track{gap:20px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list ul li > a{width:250px;height:188px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list > div{} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text{margin-top:30px;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text a.more{width: 40px;height:40px;margin-top:0;} #container.main > .page-wrapper .mSection .s3 .exhibition-list .exhibition-text a.more:before{width:40px;height:40px;background-size:40px auto;} #container.main > .page-wrapper .mSection .s4{padding:0 0 30px;} #container.main > .page-wrapper .mSection .s4 .countdown{flex-direction: column;align-items: center;} #container.main > .page-wrapper .mSection .s4 .countdown .day > p{font-size:48px;} #container.main > .page-wrapper .mSection .s4 .countdown .day > .num{font-size:60px;} #container.main > .page-wrapper .mSection .s4 .countdown .hours .num, #container.main > .page-wrapper .mSection .s4 .countdown .minutes .num, #container.main > .page-wrapper .mSection .s4 .countdown .seconds .num{font-size:30px;min-width: 45px;} #container.main > .page-wrapper .mSection .s4 .countdown .hours span, #container.main > .page-wrapper .mSection .s4 .countdown .minutes span, #container.main > .page-wrapper .mSection .s4 .countdown .seconds span{font-size:6px;} #container.main > .page-wrapper .mSection .s4 .countdown .hours, #container.main > .page-wrapper .mSection .s4 .countdown .minutes, #container.main > .page-wrapper .mSection .s4 .countdown .seconds{margin-left:20px;padding-left:20px;} #container.main > .page-wrapper .mSection .s4 .countdown .hours::before, #container.main > .page-wrapper .mSection .s4 .countdown .minutes::before, #container.main > .page-wrapper .mSection .s4 .countdown .seconds::before{height:12px;} #container.main > .page-wrapper .mSection .s4 .countdown .day{gap:5px;} #container.main > .page-wrapper .mSection .s4 .countdown .num{min-width:90px;} #container.main > .page-wrapper .mSection .s4 .countdown .hours{padding-left:0;margin-left:0;} #container.main > .page-wrapper .mSection .s4 .countdown .hours:before{display:none;} #container.main > .page-wrapper .mSection .s5{padding:30px 0 90px;} #container.main > .page-wrapper .mSection .s5 .banner-text{margin-top:30px;} #container.main > .page-wrapper .mSection .s5 .banner-text p.t1{font-size:22px;} #container.main > .page-wrapper .mSection .s5 .banner-text p.t2{margin-top:24px;font-size:14px;} #container.main > .page-wrapper .mSection .s5 .banner-text a.more{margin-top:30px;width:40px;height:40px;} #container.main > .page-wrapper .mSection .s5 .banner-text a.more:before{width:40px;height:40px;background-size:40px auto;} .layer-popup > .wrap .popup{} .layer-popup > .wrap .popup > div:before{background: url("../../images/common/m-popup-bg.png")no-repeat center/cover;width: calc(100% - 20px);left:50%;top:50%;transform: translate(-50%,-50%);height:calc(100% - 10px)} .layer-popup > .wrap .popup > div{padding-bottom: 47.7625%;padding-top:47.7625%;/*padding:60px 30px;*/border-radius: 10px;} .layer-popup.email-popup > .wrap .popup > div{padding-bottom: 47.7625%;padding-top:47.7625%;/*padding:60px 30px;*/border-radius: 10px;} .layer-popup.email-popup > .wrap .popup > div > div{padding:30px;} .layer-popup.email-popup > .wrap .popup > div > div > h3{font-size:6.6667vw;} .layer-popup.email-popup > .wrap .popup > div > div > p{font-size:3.8vw;margin-top:30px;} .layer-popup > .wrap .popup > div .close{right:10px;top:10px;width: 3.7333vw;height: 3.7333vw;} .layer-popup > .wrap .popup > div .close:before{width: 3.7333vw;height: 3.7333vw;background-size: cover;} .layer-popup > .wrap .popup > div .slide-wrap{width:calc(100% - 70px);} .layer-popup > .wrap .popup > div .slide-wrap .slide .text-a{flex-direction: column;align-items: flex-start;gap:4px;margin-top:8px;padding:0;} .layer-popup > .wrap .popup > div .slide-wrap .slide .text-a > p{font-size:16px;} .layer-popup > .wrap .popup > div .slide-wrap .slide .text-a > span{font-size:12px;} .layer-popup > .wrap .popup > div .slide-arrow a { width: 10.6667vw; height: 10.6667vw; border:1px solid #585858; border-radius: 50%; pointer-events: auto; } .layer-popup > .wrap .popup > div .slide-arrow a.prev {margin-left: -3.5vw;} .layer-popup > .wrap .popup > div .slide-arrow a.next {margin-right: -3.5vw;} .layer-popup > .wrap .popup > div .slide-arrow a:after{content:'';background: url("../../images/common/popup-arrow.svg")no-repeat center left/34.1333vw 10.6667vw;display: inline-block;width: 10.6667vw;height: 10.6667vw;background-size:cover;} #container.main > .page-wrapper .mSection .s1 .bg.bg1{background: url("../../images/main/main-b1.png")no-repeat;width: 56vw;height: 65.8667vw;top:0%;left:0;background-size: cover;} #container.main > .page-wrapper .mSection .s1 .bg.bg2{background: url("../../images/main/main-b2.png")no-repeat;width: 8vw;height: 8vw;right:11%;top:5%;background-size: cover;} #container.main > .page-wrapper .mSection .s2 .bg.bg1{background: url("../../images/main/main-b3.png")no-repeat;width: 12vw;height: 12vw;right:6.5%;top:44%;background-size: cover;} #container.main > .page-wrapper .mSection .s3 .bg.bg1{background: url("../../images/main/main-b4.png")no-repeat;width: 73.3333vw;height: 96.5333vw;right:0;top:-17%;background-size: cover;} #container.main > .page-wrapper .mSection .s3 .bg.bg2{background: url("../../images/main/main-b5.png")no-repeat;width: 66.6667vw;height: 140vw;left:0;top:29%;background-size: cover;} #container.main > .page-wrapper .mSection .s4 .bg.bg1{background: url("../../images/main/main-b6.png")no-repeat;width: 33vw;height: 33vw;left:0;top:141%;background-size: cover;} #container.main > .page-wrapper .mSection .s5 .bg.bg1{background: url("../../images/main/main-b7.png")no-repeat;width: 100vw;height: 92.2667vw;right:0;top:-9%;background-size: cover;} #container.main > .page-wrapper .mSection .s5 .bg.bg2{background: url("../../images/main/main-b8.png")no-repeat;width: 13.3333vw;height: 13.3333vw;right:11%;top:50%;background-size: cover;} }