/* center box style */ .inner__full{position:relative; width:100%; margin: 0 auto;} .inner__cen768{position:relative; width:90%; max-width:768px; margin: 0 auto;} .inner__cen980{position:relative; width:90%; max-width:980px; margin: 0 auto;} .inner__cen1088{position:relative; width:90%; max-width:1088px; margin: 0 auto;} .inner__cen1192{position:relative; width:95%; max-width:1192px; margin: 0 auto;} .inner__cen1250{position:relative; width:90%; max-width:1250px; margin: 0 auto;} .inner__cen1320{position:relative; width:90%; max-width:1320px; margin: 0 auto;} .inner__cen1440{position:relative; width:90%; max-width:1440px; margin: 0 auto;} .inner__cen1800{position:relative; width:95%; margin: 0 auto;} .inner__cen1920{position:relative; width:90%; max-width:1920px; margin: 0 auto;} @media screen and (min-width:1921px){ .inner__cen1192{max-width:1700px;} } @media screen and (min-width: 2881px) { .inner__cen1192 { max-width: 1920px; } } @media screen and (max-width:1024px){ .inner__cen1800{width:90%;} .inner__cen1192{width:90%;} } /* basic setting */ .hide{display:none !important;} .img__descrip{display: none !important;} .hidden1720{} .visible1720{display:none;} .hidden1440{} .visible1440{display:none;} .hidden1280{} .visible1280{display:none;} .hidden1024{} .visible1024{display:none;} .hidden820{} .visible820{display:none;} .hidden768{} .visible768{display:none;} .hidden570{} .visible570{display:none;} .hidden480{} .visible480{display:none;} @media screen and (max-width:1720px){ .hidden1720{display:none;} .visible1720{display:block;} } @media screen and (max-width:1440px){ .hidden1440{display:none;} .visible1440{display:block;} } @media screen and (max-width:1280px){ .hidden1280{display:none;} .visible1280{display:block;} } @media screen and (max-width:1024px){ .hidden1024{display:none;} .visible1024{display:block;} } @media screen and (max-width:820px){ .hidden820{display:none;} .visible820{display:block;} } @media screen and (max-width:768px){ .hidden768{display:none;} .visible768{display:block;} } @media screen and (max-width:570px){ .hidden570{display:none;} .visible570{display:block;} } @media screen and (max-width:480px){ .hidden480{display:none;} .visible480{display:block;} } .mt16{margin-top: 16px;} .mt25{margin-top: 25px;} /* text style */ .talign__left{text-align:left;} .talign__center{text-align:center;} .talign__right{text-align:right;} .img__wr > img{width:100%;} .hgt__100vh{height:100vh;} .hgt__100per{height:100%;} :root { --main__color01:#999; --main__color02:#FF007F; --main__color03:#D089BA; --main__color04:#F291A3; --main__color05:#F4A77C; --main__color06:#E1BA71; } /* header */ :root { --progress: 0; } .header{width:100%; height:100px; display:flex; position:fixed; top:0; left:0; background:transparent; z-index:99999; opacity:0;} .header > div{height:100%; display:flex; align-items:center;} .header .logo__wr{} .header .logo__wr img{width:140px;} .header .ham__btn__wr{width:32px; position:relative; display:block;} .header .hd__right__wr{position:absolute; top:50%; right:0; transform:translateY(-50%); display:flex; gap: 1.35vw; } .header .ham__btn__wr img{} .header .ham__btn__wr .b__ham{opacity:0; position:absolute; top:50%; left:0; transform:translateY(-50%);} .header .w__logo__wr { opacity: 1; } .header .b__logo__wr { opacity: 0; position:absolute; top:50%; left:0; transform:translateY(-50%); } .header .hd__right__wr .dropdown__menu {display: none; position: absolute;top: 40px; background: #fff; border-radius: 10px; text-align: center; overflow: hidden; left: 50%; padding:20px;transform: translateX(-50%);} .header .hd__right__wr .dropdown__menu a { margin-bottom: 16px; cursor: pointer;display:block; font-size:14px; font-weight: 500;} .header .hd__right__wr .dropdown__menu a:last-child{margin-bottom: 0;} .header .hd__right__wr .lang__hd__btn{position:relative;} .header .hd__right__wr .lang__hd__btn .lang-btn .b__lang{position:absolute; top:0; left:0; opacity:0; visibility:hidden; } .header.sub__header .b__logo__wr{opacity:1;} @media screen and (min-width:1921px){ .header{height:5.2083vw;} .header .logo__wr img{width: 8.5417vw;} .header .ham__btn__wr img{width:1.6667vw;} .header .hd__right__wr .lang__hd__btn .lang-btn img{width:1.6667vw;} .header .hd__right__wr .dropdown__menu{top:60px;} }/* 1440px */ @media screen and (max-width:1280px){ }/* 1280px */ @media screen and (max-width:1024px){ .header{height:80px;} .header .ham__btn__wr img{width:30px;} .header .hd__right__wr{gap:16px;} .header .hd__right__wr .dropdown__menu{padding:16px;} .header .logo__wr img{width:120px;} }/* 1024px */ @media screen and (max-width:820px){ }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .header .ham__btn__wr img{width:28px;} .header .hd__right__wr{gap:12px;} .lang__hd__btn img{width:28px;} .header .hd__right__wr .dropdown__menu{top:36px; border-radius:6px;} .header .hd__right__wr .dropdown__menu a{font-size:12px; margin-bottom: 12px;} }/* 570px */ @media screen and (max-width:480px){ }/* 480px */ /* 인트로 */ #main{width:100%; z-index:1; } .main__intro__wr{width:100%; position:relative; } .main__intro__action__box01 {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; position: fixed; top:0; left:0; width:100%; z-index:999; } .intro__video__box{width:100%; height:100%; position:absolute; top:0; left:0; } .intro__video__box .video__wr__box{width:100%; height:100%; position:relative; } .intro__video__box .video__wr__box .intro__video{ width: 100%; height: 100%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .intro__video__box .video__wr__box .intro__video01{z-index:1; /*mix-blend-mode: lighten;*/} .intro__video__box01{background: linear-gradient(90deg, #0F0B20, #090515);} .intro__video__box01 .video__wr__box{background: linear-gradient(to left, #0F0B20, #090515);} .main__intro__gra{z-index:2; mix-blend-mode: lighten; position: absolute; top: 0; left: 0;width: 100%; height: 100%; object-fit: cover;} .main__intro__dim{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:13;} .intro__video__box01 .main__intro__dot{position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:11;} .main__intro__action__box {transition: opacity 0.6s ease;} .main__intro__action__box .progress__wr { width: 140px; height: 140px; position: relative; z-index:10; opacity:0; contain: layout style paint; } .main__intro__action__box .progress__wr:after{content:''; display:block; width:100%; height:100%; z-index:-1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:url(../images/progress_wr_blur.png) no-repeat; background-position:center; background-size:100% 100%; width:206px; height:206px;} .main__intro__action__box .progress__wr .progress__svg { width: 100%; height: 100%; transform: rotate(-90deg); } .main__intro__action__box .progress__wr .base__circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; } .main__intro__action__box .progress__wr .progress__line { fill: none; stroke: white; stroke-width: 1.5; stroke-dasharray: 408.4; stroke-dashoffset: 408.4; stroke-linecap: round; } .main__intro__action__box .progress__wr .moving__dot { position: absolute; top: 0; left: 50%; width: 8px; height:8px; background: #fff; border-radius: 50%; margin-left: -3px; margin-top: 2px; box-shadow: 0 0 9px #fff; transform-origin: 3px 68px; transform: rotate(0deg) translateZ(0); z-index: 10; will-change: transform; backface-visibility: hidden; } .main__intro__action__box .progress__wr .percent__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 14px; font-weight: 300; font-family: 'Gotham', dotum, sans-serif; } .main__intro__action__box .play__btn__wr {cursor: pointer; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index:1;} .main__intro__action__box .play__btn__wr{opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} .main__intro__action__box .play__btn__wr .text01{color:#fff; font-size:14px; font-weight: 300; margin-top: 16px;} .skip__wr{ z-index: 14; position:fixed; right:60px; bottom:60px; opacity:0; } .skip__wr .text{color:#fff; font-size:12px; font-weight: 300; position:relative;} .skip__wr .text:after{content:''; display:block; width:150px; height:150px; background:url(../images/skip_blur_bg.png) no-repeat; background-size:100% 100%; position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); background-position: center; } .main__intro__action__box02{width:100%; background:#000; display: flex; align-items: center; justify-content: center; overflow:hidden;} .main__intro__action__box02 .main__logo__wr {position:relative; width:14.5vw;} .main__logo__wr a{display:block; display: block; position: fixed; top: 50%; left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%; } .main__logo__wr a img{width:100%; height:100%; object-fit:cover;} .hidden__tx__box{overflow:hidden;} .center__circle__wrap{position:absolute; top:50%; left:10.7%; transform:translate(-50%,-50%) scale(0);} .center__circle__wrap .circle__wr__box{width:100%; height:100%; position:relative; left:-12px;} .center__circle__wrap .circle{width:670px; height:670px; border-radius:50%; z-index:11; position:relative; border: 120px solid #fff;} .center__circle__wrap .in__circle{width:280px; height:280px; border-radius:50%; display: block; position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%); z-index:12; overflow: hidden; background:#fff; } .center__circle__wrap .circle__text{position: fixed; color: #000; top: 50%; left: 0; transform: translate(0%, -50%); width: fit-content; white-space: nowrap; z-index: 10; font-weight:700; font-size:90px; font-weight:bold;} .center__circle__wrap .in__circle .in__circle__bg{background:#fff; width:100%; height:100%; display:block; border-radius:50%;} .center__circle__wrap .color__circle__bg{opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(2); width:202px; height:202px;} .center__circle__wrap .color__circle__bg img{width:100%;} /* ===== 가로만 (기존) ===== */ @media screen and (max-width:1600px){ .main__intro__action__box02 .main__logo__wr {width:240px;} } @media screen and (max-width:1440px){ .main__intro__action__box02 .main__logo__wr {width:240px;} } @media screen and (max-width:1280px){ .main__intro__action__box02 .main__logo__wr {width:240px;} } @media screen and (max-width:1024px){ .main__intro__action__box02 .main__logo__wr {width:230px;} } @media screen and (max-width:820px){ .main__intro__action__box02 .main__logo__wr {width:230px;} } @media screen and (max-width:768px){ .main__intro__action__box02 .main__logo__wr {width:230px;} } @media screen and (max-width:570px){ .main__intro__action__box02 .main__logo__wr {width:148px;} } @media screen and (max-width:540px){ .main__intro__action__box02 .main__logo__wr {width:145px;} } @media screen and (max-width:480px){ .main__intro__action__box02 .main__logo__wr {width:132px;} } @media screen and (max-width:430px){ .main__intro__action__box02 .main__logo__wr {width:147px;} } @media screen and (max-width:414px){ .main__intro__action__box02 .main__logo__wr {width:142px;} } @media screen and (max-width:390px){ .main__intro__action__box02 .main__logo__wr {width:135px;} } @media screen and (max-width:375px){ .main__intro__action__box02 .main__logo__wr {width:132px;} } @media screen and (max-width:360px){ .main__intro__action__box02 .main__logo__wr {width:132px;} } /* ===== 가로 + 세로 조합 (세로 화면 / 낮은 높이 대응) ===== */ /* 아이패드 프로 세로 (1024 x 1366) */ @media screen and (max-width:1024px) and (min-height:1300px){ .main__intro__action__box02 .main__logo__wr {width:330px;} } /* 아이패드 일반 세로 (820 x 1180) */ @media screen and (max-width:820px) and (min-height:1100px){ .main__intro__action__box02 .main__logo__wr {width:300px;} } /* 아이패드 미니 세로 (768 x 1024) */ @media screen and (max-width:768px) and (min-height:1000px){ .main__intro__action__box02 .main__logo__wr {width:270px;} } /* 모바일 가로 모드 (세로 높이가 낮을 때) */ @media screen and (max-width:900px) and (max-height:500px){ .main__intro__action__box02 .main__logo__wr {width:180px;} } @media screen and (max-width:768px) and (max-height:700px){ .main__intro__action__box02 .main__logo__wr {width:148px;} } @media screen and (max-width:570px) and (max-height:600px){ .main__intro__action__box02 .main__logo__wr {width:148px;} } @media screen and (max-width:540px) and (max-height:785px){ .main__intro__action__box02 .main__logo__wr {width:138px;} } @media screen and (max-width:500px) and (max-height:785px){ .main__intro__action__box02 .main__logo__wr {width:128px;} } @media screen and (max-width:480px) and (max-height:785px){ .main__intro__action__box02 .main__logo__wr {width:120px;} } @media screen and (max-width:480px) and (max-height:715px){ .main__intro__action__box02 .main__logo__wr {width:112px;} } @media screen and (max-width:480px) and (max-height:700px){ .main__intro__action__box02 .main__logo__wr {width:120px;} } @media screen and (max-width:414px) and (max-height:700px){ .main__intro__action__box02 .main__logo__wr {width:125px;} } /* 아이폰 SE, 아이폰 8 (375 x 667) */ @media screen and (max-width:375px) and (max-height:667px){ .main__intro__action__box02 .main__logo__wr {width:105px; } } /* 비주얼 */ @media screen and (max-width:1440px){ }/* 1440px */ @media screen and (max-width:1280px){ }/* 1280px */ @media screen and (max-width:1024px){ .center__circle__wrap .color__circle__bg{width:180px; height:180px;} }/* 1024px */ @media screen and (max-width:820px){ .center__circle__wrap .color__circle__bg{width:160px; height:160px;} .intro__video__box01 .video__wr__box .intro__video{object-fit: contain; min-width: 210%;} .skip__wr .text:after{width:110px; height:110px;} .skip__wr .text{font-size:10px;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .main__logo__wr a{height:100vh;} .center__circle__wrap .color__circle__bg{width:140px; height:140px;} .intro__video__box .video__wr__box .intro__video{min-height:110%;} .skip__wr {right: 40px; bottom: 50px;} .main__intro__action__box .progress__wr{transform: scale(0.8);} }/* 570px */ @media screen and (max-width:480px){ }/* 480px */ /* 12개 구체 */ .main__contents__wr .text__box.text__act__box01 {top:46%;} .main__contents__wr .text__box{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; margin:0 auto; } .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{font-size:60px; font-weight: 700; color:#fff; word-break:keep-all;} .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{font-size:48px; font-weight: 500; color:#fff; word-break:keep-all;} .main__contents__wr .text__box .tx03, .main__title__wr .tx03, .text__wr .tx03{font-size:18px; font-weight: 400; color:#fff; line-height: 1.5; font-family:'Pretendard', dotum, sans-serif; word-break:keep-all;} .main__contents__wr .text__box .tx04, .main__title__wr .tx04, .text__wr .tx04{font-size:18px; font-weight: 500; color:#fff; word-break:keep-all;} .main__intro__action__box02 .text__box.text__act__box02{top:48%;} .main__intro__action__box02 .text__act__box01{transform-origin: center; opacity:0; } .main__intro__action__box02 .text__act__box01 .tx01{margin-top: 40px;} .main__intro__action__box02 .img__screen__wr{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; z-index:-1;} .main__intro__action__box02 .img__screen__wr .screen__box{position:relative; width:100%; height:100%; transform-origin: center; perspective: 1500px; } .main__intro__action__box02 .img__screen__wr .screen__box .sphere {transform-style: preserve-3d; opacity:0; } .main__intro__action__box02 .img__screen__wr .screen__box > div{position:absolute;} .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:90%;} /* pc */ .main__intro__action__box02 .img__screen__wr .screen__box01 .img01 { top: 3%; left: 0;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 { left: 21%; bottom: -7%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 { bottom: -4%; right: -6%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04 { top: 10%; right: 13%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img01 { top: 0; left: 26%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 { bottom: -3%; left: 12%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 { right: 0; top: -5%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 { top: 0; left: 26%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 { top: 27%; left: 0; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 { left: 23%; bottom: -6%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 { bottom: 0; right: 15%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 { top: -2%; right: -5%; } @media screen and (min-width:1921px){ .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{font-size: 3.125vw;} .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{font-size: 2.5vw;} .main__contents__wr .text__box .tx03, .main__title__wr .tx03, .text__wr .tx03{font-size:0.9375vw;} .main__contents__wr .text__box .tx04, .main__title__wr .tx04, .text__wr .tx04{font-size:0.9375vw;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img01{top:5%; left:5%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img02{left: 23%; bottom: -5%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03{bottom: 2%; right: 0; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04{top: 17%; right: 11%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img01{top:5%; left: 24%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img02{bottom: 0; left: 10%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03{right: 5%; top: -4%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img01{top:5%; left: 28%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img02{top:33%; left: 2%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03{left: 24%; bottom:0; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04{bottom: 5%;right: 17%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05{top: 5%; right: 3%;} }/* 1921px */ @media screen and (min-width:3800px){ .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:170%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img01{top:0; left:5%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img02{left: 23%; bottom: -5%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03{bottom: 2%; right: 10%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04{top: 7%; right: 21%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img01{top:5%; left: 24%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img02{bottom: -5%; left: 10%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03{right: 15%; top: -4%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img01{top:0; left: 28%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img02{top:33%; left: 2%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03{left: 24%; bottom:-6%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04{bottom: 5%;right: 24%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05{top: 0; right: 13%;} } @media screen and (max-width:1540px){ .main__intro__action__box02 .img__screen__wr{width:110%;} }/* 1540px */ @media screen and (max-width:1280px){ .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{ font-size:50px; } .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{ font-size:35px; } .main__contents__wr .text__box .tx03, .main__title__wr .tx03, .text__wr .tx03{ font-size:16px; } .main__contents__wr .text__box .tx04, .main__title__wr .tx04, .text__wr .tx04{font-size:16px;} .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:65%;} .main__intro__action__box02 .img__screen__wr{width:120%; height:105%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03{right:-9%;} .main__intro__action__box02 .img__screen__wr01, .main__intro__action__box02 .img__screen__wr03{ left:60%; } }/* 1280px */ @media screen and (max-width:1024px){ .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{ font-size:40px; } .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{ font-size:30px; } .main__intro__action__box02 .text__act__box01 .tx01{margin-top: 25px;} .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:60%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03{right:-19%;} .main__intro__action__box02 .img__screen__wr{width:130%; height:95%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img05{right:-10%;} }/* 1024px */ @media screen and (max-width:820px){ .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{ font-size:35px; } .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{ font-size:26px; } .main__contents__wr .text__box .tx03, .main__title__wr .tx03, .text__wr .tx03{ font-size:14px; } .main__contents__wr .text__box .tx04, .main__title__wr .tx04, .text__wr .tx04{font-size:14px;} .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:55%;} .main__intro__action__box02 .img__screen__wr{width:140%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 { bottom: -4%; right: -20%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04 { top: 10%; right: 0; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img01 { top: 2%; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 { bottom: -3%; left: 22%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 { right: -20%; top: -5%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 { top: 0; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 { top: 27%; left: 4%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 { left: 23%; bottom:0; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 { bottom: 15%; right: 15%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 { top: 0; right: -10%; } .main__intro__action__box02 .img__screen__wr02{left:50%; width:150%;} .main__intro__action__box02 .img__screen__wr03{ left:65%; width:165%; height:105%;} }/* 820px */ @media screen and (max-width:680px){ .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:50%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img01{top:0; left:10%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 { bottom: 4%; left: 10%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 { bottom: -4%; right: -20%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04 { top: 10%; right: 0; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img01 { top: 2%; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 { bottom: -3%; left: 22%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 { right: -25%; top: 0%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 { top: 5%; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 { top: 25%; left: 8%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 { left: 23%; bottom:0; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 { bottom: 15%; right: 15%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 { top: 10%; right: -10%; } }/* 680px */ @media screen and (max-width:570px){ .main__intro__action__box02 .text__act__box01 .tx01{margin-top: 12px;} .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{ font-size:26px; line-height: 1.35;} .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{ font-size:22px; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img01 { bottom: 4%; top:initial; left: 10%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 { bottom: 16%; left: initial; right:-10%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 img{width:60%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 { bottom: initial; top:10%; right: -55%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 img{width:30%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img04 { top: 5%; right: initial; left:5%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img01 { top: 25%; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 { bottom: 0; left: initial; right: -5%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 { right: -45%; top: -5%; } .main__intro__action__box02 .img__screen__wr03{left:50%; width:135%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 { top: 0; left: 20%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 { top: 22%; left: 4%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 img{width:45%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 { left: 13%; bottom:10%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 { bottom: 20%; right: -15%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 { top: 14%; right: -55%;} }/* 570px */ @media screen and (max-width:480px){ .main__contents__wr .text__box .tx03, .main__title__wr .tx03, .text__wr .tx03{font-size:13px;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img01 { bottom: 4%; top:initial; left: 10%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 { bottom: 8%; left: initial; right:-20%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 img{width:60%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 { bottom: initial; top:10%; right: -70%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04 { top: 5%; right: initial; left:15%; } .main__intro__action__box02 .img__screen__wr.img__screen__wr02{width:155%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img01 { top: 25%; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 { bottom: 0; left: initial; right: -25%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 { right: -75%; top: 0; } .main__intro__action__box02 .img__screen__wr01{left:50%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 { top: 10%; left: 20%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 { top: 25%; left: 4%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 img{width:42%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 { left: 10%; bottom:10%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 { bottom: 20%; right: -30%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 { top: 14%; right: -75%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 img{width:45%;} .main__intro__action__box02 .img__screen__wr .screen__box > div img{width:40%;} .main__intro__action__box02 .img__screen__wr01 .screen__box > div img{width:50%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img02{right:30%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 img{width:250px;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03{right:10%;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 img{width:350px;} .main__intro__action__box02 .img__screen__wr03{width:100%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img05{right:-15%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 img{width:340px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img04{right:0%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 img{width:270px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 img{width:45%;} }/* 480px */ @media screen and (max-width:420px){ .main__contents__wr .text__box .tx03, .main__title__wr .tx03, .text__wr .tx03{font-size:12px;} .main__intro__action__box02 .img__screen__wr01{left:50%; width:120%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img01 { bottom: 4%; top:initial; left: 10%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 { bottom: 16%; left: initial; right:-55%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img02 img{width:40%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03 { bottom: initial; top:10%; right: -110%; } .main__intro__action__box02 .img__screen__wr .screen__box01 .img04 { top: 5%; right: initial; left:0; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img01 { top: 25%; left: 16%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 { top: 10%; left: 20%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 { top: 25%; left: 4%; } .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 img{width:37%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 { left: 10%; bottom:10%; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 img{width:220px;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 img{width:300px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img02{left:-5%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 img{width:180px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 img{width:300px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 {right:0%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 img{width:220px;} } @media screen and (max-width:380px){ .main__intro__action__box02 .img__screen__wr02{width:135%;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img01{top:6%; left:10%;} .main__intro__action__box02 .img__screen__wr .screen__box01 .img03{right:-126%;} .main__contents__wr .text__box .tx01, .main__title__wr .tx01, .text__wr .tx01{ font-size:24px;} .main__contents__wr .text__box .tx02, .main__title__wr .tx02, .text__wr .tx02{ font-size:20px; } .main__intro__action__box02 .img__screen__wr .screen__box02 .img02 img{width:200px;} .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 img{width:260px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img01 img{width:180px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img02 img{width:160px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img03 img{width:160px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img05 img{width:260px;} .main__intro__action__box02 .img__screen__wr .screen__box03 .img04 img{width:160px;} } @media screen and (max-width:320px){ .main__intro__action__box02 .img__screen__wr .screen__box02 .img03 { right: -106%; } } #skip__btn01{opacity:0;} #skip__btn01.active{opacity:1;} #starfield { position: absolute; top: 0; left: 0; width: 100%; height: 100%;z-index: -1;} /* 공통 버튼 */ .vedio__play__btn {overflow: hidden; width: 280px; height: 72px; line-height: 72px; background:url(../images/vedio_play_btnbg.png) no-repeat; background-size:100% 100%; border-radius: 44px; z-index: 10; margin: 0 auto; position: relative;} .vedio__play__btn a { width: 100%; height: 100%; display: block; position: relative; } .vedio__play__btn a .tx__marquee{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 20; overflow: hidden; width: 100%; display: flex; gap:15px; padding-left: 20px; } .vedio__play__btn a .tx__marquee .marquee__line{white-space: nowrap; display: flex; animation: marquee 15s linear infinite; animation-play-state: paused;} .vedio__play__btn a .tx__marquee .marquee__line span{flex-shrink: 0; display:flex; align-items:center; font-size:20px; color:#fff; gap:10px; font-weight: 300; font-family: 'Gotham', dotum, sans-serif;} .vedio__play__btn a .tx__marquee{opacity:0;} .vedio__play__btn a .tx{display: flex; align-items: center; font-size: 20px; color: #fff;gap:10px; justify-content: center;font-weight: 300; font-family: 'Gotham', dotum, sans-serif;} @media (pointer: fine) { .vedio__play__btn:hover a .tx__marquee{opacity:1;} .vedio__play__btn:hover a .tx__marquee .marquee__line{animation-play-state: running; } .vedio__play__btn:hover a .tx{opacity:0;} } @media screen and (max-width:1024px){ .vedio__play__btn { width: 240px; height: 56px; line-height: 56px; } .vedio__play__btn a .tx{font-size:16px;} .vedio__play__btn a .tx__marquee .marquee__line span{font-size:16px;} } @media screen and (max-width:570px){ .vedio__play__btn { width: 210px; height: 50px; line-height: 50px; } .vedio__play__btn a .tx{font-size:14px;} .vedio__play__btn a .tx img{width:12px;} } /* 인트로 궤도 점선 */ .orbit__scene {opacity:0; position: relative; width: 100%; height:100vh; display: flex;justify-content: center; align-items: center; will-change: transform; transform: rotateZ(20deg) rotateX(45deg) scale(1.2) translateZ(0); backface-visibility: hidden; transform-style: preserve-3d; z-index:12; } .orbit__scene .orbit__svg {width: 100%;overflow: visible; /*filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8));*/ pointer-events: none; } /* ★ stroke-dashoffset(CPU) → transform: rotate(GPU) 교체. 원형이라 회전 = dash 흐름과 시각 동일 */ .orbit__scene .orbit__path {fill: none; stroke: #00E5FF; stroke-width: 2; stroke-dasharray: 4, 15; stroke-linecap: round; transform-origin: 50% 50%; will-change: transform; } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } @keyframes orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .orbit__scene .orbit__path.path01 {stroke-dasharray: 4, 30; animation: orbit-rotate 180s linear infinite;} .orbit__scene .orbit__path.path02 {stroke-dasharray: 3, 40; animation: orbit-rotate 180s linear infinite; stroke: rgba(255,255,255,1);} .orbit__scene .orbit__path.path03 {stroke-dasharray: 2, 50; animation: orbit-rotate 180s linear infinite; stroke: rgba(255,255,255,1);} .orbit__scene.fast .orbit__path.path01 { animation: orbit-rotate 0.2s linear infinite; } .orbit__scene.fast .orbit__path.path02 { animation: orbit-rotate 0.2s linear infinite; } .orbit__scene.fast .orbit__path.path03 { animation: orbit-rotate 0.2s linear infinite; } canvas {pointer-events: none; } body, a, label, button{ cursor: none !important;} .main__cursor { width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: fixed; top: 0; left: 0;pointer-events: none; z-index: 999999999; mix-blend-mode: difference; display: flex; align-items: center;justify-content: center;} .main__cursor:after{ background:transparent; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); content:''; display:block; border-radius:50%; width:30px; height:30px; border: 8px solid #fff; box-sizing: border-box; } @media screen and (max-width:1024px){ .main__cursor { display: none !important; } body, a { cursor: auto !important; } }/* 1024px */ /* 푸터 커스텀 커서 */ .custom-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: none; } .custom-cursor .vedio__play__btn {transform: rotate(-15deg); overflow: hidden; width: 200px; height: 200px; border-radius: 50%; background: transparent; backdrop-filter: blur(13px) brightness(1.03); -webkit-backdrop-filter: blur(13px) brightness(1.03); box-shadow: inset 0 0 30px rgba(255, 255, 255, 1); z-index: 10; } .custom-cursor .vedio__play__btn:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: linear-gradient(to bottom right, #8A2BE2, #FFFFFF); opacity: 0.6; } .custom-cursor .vedio__play__btn a { width: 100%; height: 100%; display: block; position: relative; } .custom-cursor .vedio__play__btn a:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.5); pointer-events: none; } .custom-cursor .vedio__play__btn a .tx__marquee{ display: flex; flex-direction: column; gap:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index: 20; overflow: hidden; width: 100%; opacity:1;} .custom-cursor .vedio__play__btn a .tx__marquee .marquee__line{white-space: nowrap; display: flex; animation: marquee 10s linear infinite; justify-content: center; gap:10px; backface-visibility: hidden; -webkit-font-smoothing: antialiased; transform: translateZ(0); will-change: transform; } .custom-cursor .vedio__play__btn a .tx__marquee .marquee__line span{flex-shrink: 0; display:flex; align-items:center; font-size:16px; color:#fff; gap:10px; font-weight: 300; line-height: initial; text-rendering: optimizeLegibility; transform: translate3d(0, 0, 0); } /* 햄버거 메뉴 */ #ham__menu__wr{ position: fixed; width: 100%; height: 100vh; top:0; left:0; background-color: #000; z-index: 99999; -webkit-clip-path: circle(0vmax at 100% 0%); clip-path: circle(0vmax at 100% 0%); pointer-events: none; visibility: hidden; will-change: clip-path, -webkit-clip-path; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: layout style paint; transform: translateZ(0); -webkit-transform: translateZ(0); } #ham__menu__wr.open{} #ham__menu__wr:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at center,rgba(138, 43, 226, 0.23) 0%, rgba(138, 43, 226, 0) 100%); z-index:-1;} #ham__menu__wr .ham__menu__box{ width:95%; margin:0 auto; } #ham__menu__wr .ham__menu__hd{ height: 100px; line-height: 100px; position: relative; } #ham__menu__wr .ham__menu__hd .ham__logo{ display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} #ham__menu__wr .ham__menu__hd .ham__logo img{ object-fit:cover; width:140px;} #ham__menu__wr .ham__menu__hd .ham__close__btn{ position: absolute; top: 50%; right: 0; transform: translateY(-50%); } #ham__menu__wr .ham__mnav__wr{ max-width:1192px; margin:80px auto 0; } #ham__menu__wr .ham__mnav__wr ul{ position:relative; } #ham__menu__wr .ham__mnav__wr .ham__mnav__list{ margin-bottom: 24px; opacity:0.5; transition:opacity 0.3s ease;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list:last-child{margin-bottom: 0;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list a{ display: flex; align-items:center; gap:40px; font-size: 72px; font-weight: 300; font-family: 'Gotham', dotum, sans-serif; color: rgba(255,255,255,1); text-transform: uppercase; position: relative; opacity:0; visibility: hidden; transition: 0.8s cubic-bezier(.19,1,.22,1); } #ham__menu__wr .ham__mnav__wr .ham__mnav__list a span{font-size:24px; font-weight: 300; display:none;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list .hover__ico{position:absolute; bottom:0; right:0; opacity:0; transition:opacity 0.3s ease; z-index:-1;} /* ham open */ #ham__menu__wr.open .ham__menu__hd .ham__logo{} #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list a{ opacity: 1; visibility: visible; } #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list:nth-child(1) a{ transition-delay: 0.3s; } #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list:nth-child(2) a{ transition-delay: 0.34s; } #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list:nth-child(3) a{ transition-delay: 0.38s; } #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list:nth-child(4) a{ transition-delay: 0.42s; } #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list:nth-child(5) a{ transition-delay: 0.46s; } #ham__menu__wr.open .ham__mnav__wr .ham__mnav__list:nth-child(6) a{ transition-delay: 0.5s; } @media (pointer: fine) { #ham__menu__wr .ham__mnav__wr .ham__mnav__list:hover{opacity:1;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list:hover .hover__ico{opacity:0.3;} } @media screen and (min-width:1921px){ #ham__menu__wr .ham__menu__hd{height:5.2083vw;} #ham__menu__wr .ham__menu__hd .ham__logo img{width:8.5417vw;} #ham__menu__wr .ham__menu__hd .ham__close__btn img{width:1.6667vw; } #ham__menu__wr .ham__mnav__wr{max-width:1700px;} }/* 1440px */ @media screen and (max-width:1440px){ #ham__menu__wr .ham__mnav__wr .ham__mnav__list a{font-size:60px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list .hover__ico{width:360px;} }/* 1440px */ @media screen and (max-width:1280px){ .orbit__scene{transform: rotateZ(20deg) rotateX(45deg) scale(1.5);} .center__circle__wrap .in__circle{width:230px; height:230px;} .center__circle__wrap .circle{width:600px; height:600px;} .center__circle__wrap .circle__text{font-size:60px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list a{font-size:52px;} }/* 1280px */ @media screen and (max-width:1024px){ .orbit__scene{transform: rotateZ(20deg) rotateX(45deg) scale(2.2);} .center__circle__wrap .circle{width:510px; height:510px; border: 90px solid #fff; } .center__circle__wrap .circle__text{font-size:45px;} .center__circle__wrap .in__circle{width:200px; height:200px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list a{font-size:40px; gap:24px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list a span{font-size:20px;} #ham__menu__wr .ham__menu__hd .ham__logo img{width:120px;} #ham__menu__wr .ham__menu__hd{height:80px;} #ham__menu__wr .ham__menu__box{width:90%;} #ham__menu__wr .ham__menu__hd .ham__close__btn img{width:30px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list .hover__ico{width:260px;} }/* 1024px */ @media screen and (max-width:820px){ .orbit__scene .orbit__path.path01 {stroke-dasharray: 4, 100; animation: orbit-rotate 180s linear infinite;} .orbit__scene .orbit__path.path02 {stroke-dasharray: 3, 100; animation: orbit-rotate 180s linear infinite;} .orbit__scene .orbit__path.path03 {stroke-dasharray: 2, 130; animation: orbit-rotate 180s linear infinite;} .center__circle__wrap .circle__text{font-size:36px;} .center__circle__wrap .circle{width:490px; height:490px;} .center__circle__wrap .in__circle{width:180px; height:180px;} #ham__menu__wr .ham__mnav__wr{margin-top: 60px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list a{font-size:32px; gap:16px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list a span{font-size:18px;} #ham__menu__wr .ham__mnav__wr .ham__mnav__list .hover__ico{display:none;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .center__circle__wrap .circle{width:400px; height:400px; border: 70px solid #fff;} .center__circle__wrap .circle__text{font-size:30px;} #ham__menu__wr .ham__menu__hd .ham__close__btn img{width:28px;} .center__circle__wrap .in__circle{width:160px; height:160px;} }/* 570px */ @media screen and (max-width:480px){ .center__circle__wrap .in__circle{width:140px; height:140px;} .center__circle__wrap .circle__text{font-size:26px;} .center__circle__wrap .circle{width:360px; height:360px;} }/* 480px */ .main__contents__wr{position:relative; overflow:hidden; background-color:#fff; z-index:10; } .main__contents__wr01{width:100%; height:100vh; position:relative; overflow:initial; background-color:#fff; z-index:10;} .main__contents__wr01 .inner__full{overflow:hidden;} .main__contents__wr01 .planet__img01{position:absolute; top:40%; left:50%; width:95%;} .main__contents__wr01 .planet__img01 .planet__oriimg{height:100%; width:100%; object-fit:cover;} .main__contents__wr01 .planet__img02{position:absolute; top:50%; left:50%; width:80%; z-index:-1;} .main__contents__wr01 .planet__img03{position:absolute; top:50%; left:50%; width:36%; z-index:-2;} .main__contents__wr01 .planet__img01 .planet__wr{width:100%; position:relative; text-align: center;} .main__contents__wr01 .planet__img01 .planet__wr .planet__oriimg{z-index:2; position:relative; } .main__contents__wr01 .planet__img01 .planet__wr .planetlight__bg{opacity:0; position:absolute; top:50%; left:50%; width:100%; height:100%; transform: translate(-50%, -50%); z-index:1; object-fit: cover;} .main__contents__wr01 .planet__img01 .planet__wr .planetlight__darkbg{position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%; opacity:1; z-index:3; object-fit: cover;} .main__contents__wr01 .main__title__wr{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; opacity:0; } .main__contents__wr01 .main__title__wr .tx03{margin-top: 24px;} .main__contents__wr01 .up__img__bg{position:absolute; top:-1px; left:0; width:100%; height:100vh; z-index:-1; overflow:hidden;} .main__contents__wr01 .up__img__bg07{position:absolute; top:-1px; left:0; width:100%; height:100%; z-index:-1; overflow:hidden; opacity:0;} .main__contents__wr01 .up__img__bg07 img{ height:100%; object-fit:cover;} .main__contents__wr01 .up__img__bg02{z-index:10; mix-blend-mode: screen; } .main__contents__wr01 .up__img__bg03{z-index:11; mix-blend-mode: screen;} .main__contents__wr01 .up__img__bg04{z-index:12; mix-blend-mode: screen;} .main__contents__wr01 .up__img__bg05{z-index:14; } .main__contents__wr01 .up__img__bg06{z-index:15; mix-blend-mode: screen; } .main__contents__wr01 .up__img__bg .img__box{position:relative; width:100%; height:100%;} .main__contents__wr01 .up__img__bg .img__box > img{width:100%; height:100%; object-fit:cover; opacity:0; position:absolute; top:0; left:0;} .main__contents__wr01 .up__img__bg .img__box > img.overimg01{opacity:1 !important;} .main__contents__wr01 .planet__img00{position: absolute; top: 0; left: 0;z-index: -10; width: 100%; height:100vh; opacity:0;} .main__contents__wr01 .planet__img00 .img__wr{width:100%; height:100%;} .main__contents__wr01 .planet__img00 img{height:100%; object-fit:cover;} .main__contents__wr01 .up__img__bg07__tx{position:absolute; top:50%; left:50%; max-width:1640px; margin:0 auto; width:90%; opacity:0;} .main__contents__wr01 .up__img__bg07__tx .tx02{line-height: 1.22; color:#fff; font-size:48px; font-weight: 500;} .fake__target__line{background:#fff; height:413px; width:100%; z-index:10; position: relative; overflow:hidden; } .fake__target__line img{ position: absolute;left: 0;left: 50%; bottom: 0;transform: translateX(-50%); animation: rotate360 15s linear infinite;} .fake__target__line img.fake__line02{bottom:60px;} .fake__target__line img.fake__line03{bottom:120px;} .fake__target__line img.fake__line04{bottom:180px;} .fake__target__line img.fake__line05{bottom:240px; opacity:0.3; } .fake__target__line img.fake__line06{bottom:300px; opacity:0.3; } @keyframes rotate360 { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(-360deg); } } .main__contents__wr01 .planet__img01 .planet__images{position: absolute; top: 50%;left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%);object-fit: cover;} .main__contents__wr01 .planet__img01 .planet__wr{height:100vh;} .main__contents__wr01 .planet__img01 .planet__images01{z-index:2;} .main__contents__wr01 .planet__img01 .planet__images02{z-index:1; opacity:1; } .main__contents__wr01 .planet__img01 .planet__images03{z-index:3; opacity:1;} @media screen and (min-width:1921px){ .main__contents__wr01 .up__img__bg07__tx .tx02{font-size: 2.5vw;} .fake__target__line img.fake__line04{ opacity:0.3; } }/* 1921px */ @media screen and (min-width: 2400px){ .fake__target__line img.fake__line02{ opacity:0.3; } .fake__target__line img.fake__line03{ opacity:0.3; } } @media screen and (min-width: 2560px){ .fake__target__line img.fake__line01{ opacity:0.3; } } @media screen and (max-width:1440px){ .fake__target__line{height:285px;} .fake__target__line img{width:100%;} }/* 1440px */ @media screen and (max-width:1440px){ .fake__target__line{height:205px;} }/* 1280px */ @media screen and (max-width:1024px){ .main__contents__wr01 .up__img__bg07__tx .tx02{font-size:38px;} .main__contents__wr01 .planet__img03{width:60%;} .fake__target__line{height:195px;} .fake__target__line img{width:120%;} }/* 1024px */ @media screen and (max-width:820px){ .main__contents__wr01 .up__img__bg07__tx .tx02{font-size:32px;} .fake__target__line img{width:170%;} }/* 820px */ @media screen and (max-width:735px){ }/* 600px */ @media screen and (max-width:570px){ .main__contents__wr01 .up__img__bg07__tx .tx02{font-size:28px;} .main__contents__wr01 .main__title__wr{top:43%;} .main__contents__wr01 .planet__img01{width:100%;} .main__contents__wr01 .planet__img02{width:100%;} .fake__target__line{height:1px;} .fake__target__line img{display:none;} }/* 570px */ @media screen and (max-width:480px){ }/* 480px */ /* 03 */ html.lenis-stopped{overflow:hidden !important; } .b__color{color:#000 !important;} .main__title__wr .tit{color:var(--main__color01); font-size:14px; font-weight: 300; margin-top: 16px; display:block; text-transform: uppercase;} .main__contents__pd{padding:240px 0;} .sec02__video__act__wr{width:100%; height:100vh; opacity:0; background: linear-gradient(to right, #0F0B20, #808080); display: flex; align-items: center; justify-content: center; z-index: 10; position:absolute; top:0; left:0;} .sec02__video__act__wr .text__box{width:95%; z-index:2;} .sec02__video__act__wr .cirle__video__box__wr{width:100%; height:100%; position:relative; display: flex; align-items: center; justify-content: center; z-index:10;} .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{pointer-events: none; width: 412px; height: 412px; border-radius:50%; overflow:hidden; cursor: none; position:relative; } .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box .intro__video{width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0;} .sec02__video__act__wr .text__wr__box{display:flex; justify-content: space-between; } .sec02__video__act__wr .text__wr__box > p{ text-align: center;} .sec02__video__act__wr .contents__bg{position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:-1;} .sec02__video__act__wr .contents__bg > img{width:100%; height:100%; object-fit:cover;} .sec02__video__act__wr .text__box .tx02{width: 30.41vw; text-align: center; color:#000; font-size:45px; font-weight: 700; font-family: 'Pretendard', dotum, sans-serif; white-space: nowrap; } .sec02__video__act__wr .tx03{font-size:18px; text-align: center; font-weight: 400; color:#000; line-height: 1.55;} .sec02__video__act__wr .text__box.move03{top:77%; transform: translateX(-50%); z-index:10; height:auto !important;} .sec02__video__act__wr .text__box .vedio__play__btn{pointer-events: none; margin-top: 40px;} .sec02__video__act__wr .contents__bg.sec02_video__bg02{width:100%; margin: 0 auto;left: 50%;transform: translateX(-50%); z-index:1;} .sec02__video__act__wr .w__screen__bg{z-index:-1; background:#fff; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events: none; opacity:0;} .sec02__video__act__wr .text__box{z-index:100;} .sec02__video__act__wr .text__box.top{max-width:1700px;} .sec02__video__act__wr .text__box .move01{text-align: right;} .sec02__video__act__wr .text__box .move02{text-align: left;} .sec02__video__act__wr .text__box .tx02{font-size: 2.344vw;} .sec02__video__act__wr .sec02_video__bg00{opacity:1;} .sec02_video__bg00__wr{width:100%; height:100%; position:relative;} .sec02_video__bg00__wr .color__circle__line__bg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} .main__intro__action__box02 .text__box .tx02{opacity:0;} @media screen and (min-width:1921px){ .sec02__video__act__wr .text__box.top{max-width:90%;} .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width: 21.46vw; height: 21.46vw; } } @media screen and (max-width: 1880px) and (min-width: 1024px) and (max-height: 765px) { .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width:360px; height:360px;} } @media screen and (max-width:1440px){ .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width:320px; height:320px;} }/* 1440px */ @media screen and (max-width:1280px){ .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width:260px; height:260px;} .sec02__video__act__wr .text__box.move03{top:72%;} }/* 1280px */ @media screen and (max-width:1024px){ .sec02__video__act__wr .text__box{width:90%;} .sec02__video__act__wr .text__wr__box{height:100%; justify-content: space-between; align-items: center; flex-direction: column;} .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width:250px; height:250px;} .sec02__video__act__wr .text__box .tx02.move01{ text-align: center; max-width:100%; width:100%; } .sec02__video__act__wr .text__box .tx02.move02{ text-align: center; max-width:100%; width:100%; } .sec02__video__act__wr .text__box .tx02{font-size:32px; width:90%;} .sec02__video__act__wr .text__box.move03{top:78%;} .sec02__video__act__wr .text__box .vedio__play__btn{margin-top: 25px;} .sec02__video__act__wr .cirle__video__box__wr{ flex-direction: column; gap:40px;} .sec02__video__act__wr .text__box{position:initial; transform:initial;} .sec02__video__act__wr .text__box.move03{transform:translate(0,0); position: relative; left: 0; top: 30px; } .sec02_video__bg00{margin-top: -90px;} }/* 1024px */ @media screen and (max-width:820px){ .sec02__video__act__wr .text__box .tx02{font-size:26px;} .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width:220px; height:220px;} }/* 820px */ @media screen and (max-width:620px){ }/* 600px */ @media screen and (max-width:570px){ .sec02__video__act__wr .cirle__video__box__wr .cirle__video__box{width:170px; height:170px;} .sec02__video__act__wr .cirle__video__box__wr{gap:24px;} .sec02__video__act__wr .text__box.move03{top:10px;} .sec02_video__bg00{margin-top: -50px;} .sec02__video__act__wr .cirle__video__box__wr{top:30px;} }/* 570px */ @media screen and (max-width:480px){ }/* 480px */ .main__contents__wr03{width:100%;} .main__contents__wr03 .inner__full{width: 100%; height:100%; display:flex; flex-direction: column;justify-content: center;} .main__contents__wr03 .main__title__wr{width:90%; margin:0 auto;} .main__contents__wr03 .main__title__wr .tx01, .main__contents__wr05 .main__title__wr .tx01{margin:40px 0 24px;} .main__contents__wr02{width:100%; height:100vh; background:#fff; z-index:10; position:relative;} .main__contents__wr02 .con03__bg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; height:100%; z-index:-1;} .main__contents__wr02 .con03__bg img{width:100%; height:100%; object-fit:contain;} .main__contents__wr02 .main__contents__box01{position:relative; width:100%; height:100%; background:url(images/main_con03_bg.png) no-repeat; background-size:100% 100%; background-position:center; content:''; display:block; width:100%; height:100%; } .main__contents__wr02 .main__contents__box01 .con03__sct__img__box{position:relative; max-width:1192px; width:100%; height:100%; margin: 0 auto;} .main__contents__wr02 .main__contents__box01 .con03__sct__img__box .img__wr{position:absolute; top:50%; left:50%; width:100%;} .main__contents__wr02 .main__contents__box01 .con03__sct__img__box .img__box01{z-index:3;} .main__contents__wr02 .main__contents__box01 .con03__sct__img__box .img__box02{z-index:2;} .main__contents__wr02 .main__contents__box01 .con03__sct__img__box .img__box03{z-index:1;} .main__contents__wr02 .main__contents__box01 .con03__sct__img__box .img__box04{z-index:10;} .main__contents__wr02 .main__contents__box01 .con03__sct__img__box .img__wr.img__box02{top:56%;} .main__contents__wr02 .scene { width: 100%; height: 100%; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); } .main__contents__wr02 .scene .camera { width: 100%; height: 100%; position: absolute; top: 0;left: 0; display: flex;justify-content: center; align-items: center; transform: scale(1.5); } .main__contents__wr02 .camera canvas {display:block; width: 100%; height: 100%; object-fit: contain;} #sequence{object-fit: contain;} .tit__icon{width: 48px;} @media screen and (min-width:1921px){ .main__title__wr .tit{font-size: 0.729vw;} .tit__icon{width: 2.5vw;} }/* 1440px */ @media screen and (max-width:1280px){ .main__contents__pd{padding:180px 0;} }/* 1280px */ @media screen and (max-width:1024px){ .main__contents__pd{padding:160px 0;} .main__contents__wr03 .main__title__wr .tx01, .main__contents__wr05 .main__title__wr .tx01{margin:24px 0 16px;} .act__tit > img{width:38px; position:relative; left:3px;} #main__contents__wr08 .act__tit > img{width:42px; left:0;} }/* 1024px */ @media screen and (max-width:820px){ .main__contents__pd{padding:100px 0;} .main__title__wr .tit{margin-top: 8px;} .main__intro__action__box02 .text__act__box01 .main__title__wr > img{width:40px;} .main__contents__wr02 .scene .camera{transform: scale(1);} .main__contents__wr02 .con03__bg{top:65%;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .main__contents__pd{padding:80px 0;} .main__title__wr .tit{font-size:12px;} #footer .copyright{font-size:12px;} .main__contents__wr02 .con03__bg{top:60%;} }/* 570px */ .main__contents__wr04{overflow:initial; width:100%;} .main__contents__wr04 .main__contents__box01{padding-left: 16.15vw; width:90%; height: 100%; display: flex; align-items: center; } .main__contents__wr04 .main__contents__box01 .main__system__sw{overflow:visible; width:100%; } .main__contents__wr04 .main__contents__box01 .swiper-slide{width:calc(60% - 100px); max-width:950px; margin-right: 40px;} .main__contents__wr04 .main__contents__box01 .swiper-slide:last-child{margin-right: 0;} .main__contents__wr04 .main__contents__box01 .swiper-slide .img__wr{border-radius:40px; overflow:hidden;} .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr{margin-top: 40px; } .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr .tx02{margin:24px 0 15px;} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr{margin-top: 40px; display:flex; gap:12px;} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr .slide__btn{opacity:0.6;} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr .slide__btn:hover{opacity:1;} .main__contents__wr04 .text__wr .tx04{color:#A091D5;} @media screen and (min-width:1921px){ .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr .tx02{font-size:2vw;} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr .slide__btn img{width:2vw;} }/* 1440px */ @media screen and (max-width:1280px){ }/* 1280px */ @media screen and (max-width:1024px){ #main__contents__wr04{padding: 0;} .main__contents__wr04 .main__contents__box01{margin:0 auto; padding-left: 0;} .main__contents__wr04 .main__contents__box01 .swiper-slide{margin-right: 24px; width:calc(60% - 12px);} .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr{margin-top: 24px;} .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr .tx02{margin:16px 0 12px;} .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr .tx03 br{display:none;} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr .slide__btn.swiper-button-disabled{opacity:0.4 !important;} }/* 1024px */ @media screen and (max-width:820px){ .main__contents__wr04{padding-top: 0;} .main__contents__wr04 .main__contents__box01 .swiper-slide .img__wr{border-radius:20px;} .main__contents__wr04 .main__contents__box01 .swiper-slide {width: calc(90% - 40px);} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr{margin-right: 32px; gap:8px;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .main__contents__wr04 .text__wr .tx04{font-size:12px;} .main__contents__wr04 .main__contents__box01 .main__system__sw .main__slide__btn__wr .slide__btn img{width:32px;} .main__contents__wr04 .main__contents__box01 .swiper-slide{margin-right: 16px;} .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr{margin-top: 16px;} .main__contents__wr04 .main__contents__box01 .swiper-slide .text__wr .tx02{margin:10px 0 8px;} }/* 570px */ @media screen and (max-width:480px){ }/* 480px */ .main__contents__wr05{width:100%; height:100vh; overflow:initial; background:url(images/main_con05_bg.png) no-repeat; background-color: #fff; background-position: center; background-size:100% 100%;} .main__contents__wr05 .inner__full{display: flex; width:100%; align-items: center; justify-content: center;} .main__contents__wr05 .con05__act__list__wr, .main__contents__wr05 .con05__act__li {position: absolute; width: 100%; height: 100%; top: 0; left: 0;clip-path: rect(50% 50% 50% 50% round 20px);z-index: 10;} .main__contents__wr05 .main__title__wr{width:90%; margin:0 auto;} .main__contents__wr05 .con05__act__li01{clip-path: rect(0% 100% 100% 0% round 0px);} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr{position:relative; width:100%; height:100vh; } .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .img__wr{width:100%; height:100%;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .img__wr img{width:100%; height:100%; object-fit:cover;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox{width:95%; position:absolute; left:50%; transform:translateX(-50%); bottom:100px; display:flex; align-items:flex-end; justify-content: space-between; } .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .text__wr .tx02{font-weight: 600; margin:24px 0 16px;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox .tx03{min-height:81px;} .main__contents__wr05 .num__btn__wr{display:flex; gap:12px; justify-content: flex-end; position:absolute; bottom:100px; right:60px; z-index:100;} .main__contents__wr05 .num__btn__wr a{font-size:18px; font-weight: 500; border:2px solid #fff; border-radius:50%; color:#fff; width:60px; height:60px; display: flex; align-items: center; justify-content: center; opacity:0.3;} .main__contents__wr05 .num__btn__wr a.active{opacity:1;} @media screen and (max-width:1440px){ }/* 1440px */ @media screen and (max-width:1280px){ .main__contents__wr05 .num__btn__wr a{font-size:16px; width:52px; height:52px;} }/* 1280px */ @media screen and (max-width:1024px){ .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox{width:90%;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox .text__wr{max-width:510px; width:100%;} .main__contents__wr05 .num__btn__wr{flex:1; gap:10px;} }/* 1024px */ @media screen and (max-width:820px){ .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .text__wr .tx02{font-size:28px;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox{width:90%;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox .tx03{min-height:initial;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox .tx03 br{display:block;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox{display:block;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .txt__inbox .text__wr{max-width:100%; width:100%; margin-bottom: 60px;} .main__contents__wr05 .num__btn__wr{right:initial; left:0; width: 90%; justify-content: flex-start; margin: 0 auto; left:50%; transform:translateX(-50%);} .main__contents__wr05 .num__btn__wr a{font-size:14px; width:45px; height:45px;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .text__wr .tx04{font-size:12px;} .main__contents__wr05 .con05__act__list__wr .con05__act__li .list__wr .text__wr .tx02{margin:16px 0 8px;} .main__contents__wr05 .num__btn__wr a{width:36px; height:36px;} .main__contents__wr05 .num__btn__wr{gap:8px;} }/* 570px */ @media screen and (max-width:480px){ }/* 480px */ #main__contents__wr06, #main__contents__wr07{background:#fff;} #main__contents__wr07{overflow:initial;} .main__contents__box{margin-top: 60px;} .main__contents__wr06 > div{display: flex; flex-direction: column; justify-content: center;} .main__contents__wr06 .con06__act__list__wr > li{width:calc(33.33% - 16px); margin-right: 24px; min-height:377px;} .main__contents__wr06 .con06__act__list__wr > li:last-child{margin-right: 0;} .main__contents__wr06 .con06__act__list__wr > li .img__wr{border-radius:20px; overflow:hidden;} .main__contents__wr06 .con06__act__list__wr > li .img__wr > img{max-height:225px; object-fit:cover;} .main__contents__wr06 .text__wr{min-height:220px;} .text__wr .subject__tx{font-size:20px; color:#000; font-weight:600; margin:24px 0 16px; word-break:keep-all; font-family:'Pretendard', dotum, sans-serif; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} .text__wr .content__tx{font-size:16px; color:#000; font-weight:400; line-height: 1.625; word-break:keep-all; font-family:'Pretendard', dotum, sans-serif; word-break:keep-all; } .line__title__wr .tx01{border-bottom: 1px solid var(--main__color05); padding-bottom: 60px;} @media screen and (min-width:1921px){ }/* 1440px */ @media screen and (max-width:1280px){ .text__wr .subject__tx{font-size:18px; margin: 16px 0 12px;} }/* 1280px */ @media screen and (max-width:1024px){ .line__title__wr .tx01{padding-bottom: 40px;} .main__contents__box{margin-top: 50px;} .main__contents__wr06{padding:0; height:100vh;} .main__contents__wr06 .inner__cen1192{display: flex;flex-direction: column; justify-content: center;} .main__contents__wr06 .main__about__sw{overflow:visible;} .main__contents__wr06 .con06__act__list__wr > li{width:calc(45% - 10px); margin-right: 16px; min-height:initial;} }/* 1024px */ @media screen and (max-width:820px){ .line__title__wr .tx01{padding-bottom: 30px;} .main__contents__box{margin-top: 40px;} .text__wr .content__tx{font-size:14px;} .main__contents__wr06 .con06__act__list__wr > li{width:calc(60% - 10px);} .text__wr .subject__tx{font-size:16px; margin: 14px 0 10px;} .main__contents__wr08 .top__cate__wr{margin-bottom: 12px;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .line__title__wr .tx01{padding-bottom: 24px;} .main__contents__wr06 .con06__act__list__wr > li{width:calc(80% - 10px);} .main__contents__wr08 .top__cate__wr .cate{padding: 0 14px; height: 28px; line-height: 28px;} }/* 570px */ @media screen and (max-width:480px){ .main__contents__wr06 .con06__act__list__wr > li{width:calc(85% - 10px);} }/* 480px */ .main__contents__wr07 > .main__title__wr{margin:0 auto; width:95%; max-width:1192px;} .main__contents__wr07 .inner__full{overflow:hidden;} .ft__top__line{width:100%; height:1px; background:transparent; margin-bottom: 100vh;} .main__contents__wr07 .con07__act__list__wr:first-child{} .main__contents__wr08{position: absolute; left: 0; width: 100%; background: #FBF6ED; height: 100%;z-index: 1000; bottom: 0; height: 100vh; border-radius:60px 60px 0 0;} .main__contents__wr08 > div{display: flex; justify-content: center;flex-direction: column; } .main__contents__wr07 .main__contents__box{margin-bottom: 340px;} .sub__tit__box{font-size:28px; font-weight: 600; color:var(--main__color05); border-bottom:1px solid var(--main__color05); padding-bottom: 12px; margin-bottom: 40px;} .main__contents__wr07 .con07__act__list__wr{margin-bottom: 80px;} .main__contents__wr07 .con07__act__list__wr:last-of-type{margin-bottom: 0;} .main__contents__wr07 .con07__inner__cen__wr{width: 90%; max-width:1192px; margin:0 auto; display: flex; flex-direction: column; justify-content: center;} .con07__title{margin-bottom: 60px;} .main__contents__wr__swWr .inner__cen1192{width: 90%; max-width:1192px; margin:0 auto; display: flex; flex-direction: column; justify-content: center;} @media screen and (min-width:1921px){ .sub__tit__box{font-size: 1.458vw;} .main__contents__wr07 > .main__title__wr{max-width:1700px;} .main__contents__wr07 .con07__inner__cen__wr{max-width:1700px;} .main__contents__wr__swWr .inner__cen1192{max-width:1700px;} }/* 1440px */ @media screen and (min-width: 2881px) { .main__contents__wr07 > .main__title__wr{max-width:1920px;} } @media screen and (max-width:1280px){ }/* 1280px */ @media screen and (max-width:1024px){ .main__contents__wr07 > .main__title__wr{width:90%; max-width:100%;} .sub__tit__box{font-size:24px; margin-bottom: 30px;} .main__contents__wr .con07__commons__sw{overflow:visible;} .main__contents__wr07 .con07__act__list__wr:first-child{border:0; margin-bottom: 0; padding-bottom: 0;} .main__domestic__sw{padding-bottom: 40px;} .main__contents__wr .main__network__sw01, .main__contents__wr .main__network__sw02, .main__contents__wr .main__network__sw03{overflow:visible; width:100%; } }/* 1024px */ @media screen and (max-width:820px){ .sub__tit__box{font-size:20px; padding-bottom: 8px; margin-bottom: 24px;} .main__contents__wr07 .main__contents__box{margin-bottom: 240px;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .sub__tit__box{font-size:18px;} .main__contents__wr07 .main__contents__box{margin-bottom: 180px;} .main__contents__wr08 > div{justify-content:initial !important; margin-top: 18px !important;} }/* 570px */ @media screen and (max-width:480px){ .sub__tit__box{font-size:16px;} }/* 480px */ .main__contents__wr08 .top__cate__wr{display:flex; align-items:center; gap:12px; margin-bottom: 24px;} .main__contents__wr08 .top__cate__wr .cate{display:inline-block; background:#fff; color:#000; font-size:14px; font-weight: 300; border-radius:36px; text-align: center; padding:0 16px; height:32px; line-height: 32px;} .main__contents__wr08 .top__cate__wr .day{color:rgba(0,0,0,0.6); font-size:14px; font-weight: 300;} .main__contents__wr08 .text__wr .content__tx{overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .con07__act__li .text__wr .content__tx{min-height:79px;} .main__contents__wr07 .main__contents__wr08 .main__contents__box{margin-bottom: 0; width:100%; } .list__flex__con{display:flex;} .list__flex__con .box{width:calc(33.33% - 16px); margin-right: 24px; display:block; } .list__flex__con .box:last-child{margin-right: 0;} .list__flex__con .box .img__wr{border-radius:20px; overflow:hidden; } .list__flex__con .box .img__wr img{height:100%; object-fit:cover;} #main__contents__wr08 .con08__act__list__wr{flex-wrap:nowrap; gap:0;} #main__contents__wr08 .list__flex__con .box{margin-right: 24px;} #main__contents__wr08 .list__flex__con .box:last-child{margin-right: 0;} #main__contents__wr08 .main__title__wr{display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--main__color05); padding-bottom: 60px; width:100%; } #main__contents__wr08 .main__title__wr .news__btn__wr{display: flex; align-items: center; gap:12px;} #main__contents__wr08 .main__title__wr .tx01{border:0; padding:0;} .video__send__popup__wr{position:fixed; top:0; left:0; z-index:99999; width:100%; height:100vh; background:rgba(0,0,0,0.8); display:none;} .video__send__popup__wr .send__popup__wr{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:40px; text-align: center; max-width:704px; width:90%; margin:0 auto; background:#fff;} .video__send__popup__wr .send__popup__box{width:100%; padding:90px 60px;} .video__send__popup__wr .send__popup__box .top__box .text01{font-size:20px; font-weight: 600; color:#191919; line-height:1.5; margin-bottom: 40px;} .video__send__popup__wr .send__popup__box .popup__form *{padding:0 20px; width:100%; display:block; border-color:#ddd; border-radius:12px; font-size:16px; font-weight: 400; font-family:'Pretendard', dotum, sans-serif;} .video__send__popup__wr .send__popup__box .popup__form input{border:1px solid #ddd; margin-bottom: 12px; height:60px; line-height: 60px; } .video__send__popup__wr .send__popup__box .popup__form textarea{height:240px; resize: none; padding:20px; } .video__send__popup__wr .send__popup__box .vedio__play__btn{margin-top: 40px;} .video__pop__close{position:absolute; top:20px; right:20px;} @media screen and (min-width:1921px){ .text__wr .subject__tx{font-size:1.0417vw;} .text__wr .content__tx{font-size:0.8333vw;} .main__contents__wr08 .top__cate__wr .day{font-size:0.7292vw;} #main__contents__wr08 .main__title__wr .news__btn__wr .news__slide__btn img{width:2vw;} .main__contents__wr08 .top__cate__wr .cate{font-size: 0.7292vw; border-radius: 1.875vw; padding: 0 0.8333vw; height: 1.6667vw; line-height: 1.6667vw;} }/* 1440px */ @media screen and (max-width:1280px){ .con07__act__li .text__wr .content__tx{min-height:105px;} }/* 1280px */ @media screen and (max-width:1024px){ .list__flex__con{gap:0; flex-wrap:nowrap;} .list__flex__con .box{width: calc(45% - 10px); margin-right: 16px;} .con07__act__li .text__wr .content__tx{min-height:80px;} #main__contents__wr08 .main__title__wr{padding-bottom: 50px;} #main__contents__wr08 .list__flex__con .box{margin-right: 16px;} }/* 1024px */ @media screen and (max-width:820px){ .video__send__popup__wr .send__popup__box{padding:60px 40px;} .video__pop__close img{width:40px;} .video__send__popup__wr .send__popup__box .top__box .text01{font-size:18px; margin-bottom: 20px;} .video__send__popup__wr .send__popup__box .popup__form input{ height:50px; line-height: 50px; margin-bottom: 10px; padding:0 12px;} .video__send__popup__wr .send__popup__box .popup__form *{font-size:14px;border-radius:10px;} .video__send__popup__wr .send__popup__box .popup__form textarea{padding:12px; height:180px;} .list__flex__con .box{width: calc(60% - 10px);} #main__contents__wr08 .main__title__wr{padding-bottom: 40px;} .main__contents__wr08 .top__cate__wr{margin-bottom: 12px;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ .video__send__popup__wr .send__popup__wr{border-radius:20px;} .video__send__popup__wr .send__popup__box .top__box .text01{font-size:16px; margin-bottom: 16px;} .video__send__popup__wr .send__popup__box{padding:70px 32px 45px; } .video__pop__close img{width:35px;} .list__flex__con .box{width: calc(80% - 10px);} .con08__act__li .text__wr .content__tx{min-height:68px;} #main__contents__wr08 .main__title__wr .news__btn__wr{gap:8px;} #main__contents__wr08 .main__title__wr .news__btn__wr .news__slide__btn img{width:32px;} .main__contents__wr08 .text__wr .content__tx{-webkit-line-clamp: 5;} }/* 570px */ @media screen and (max-width:480px){ .list__flex__con .box{width: calc(85% - 10px);} }/* 480px */ /* footer */ #footer{position: fixed; width:100%; bottom: 0; left: 0; background:#000;} #footer .footer__video__wr{position:relative; width:100%; height:100%;} #footer .footer__video__wr video{width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; z-index:1;} #footer .ft__logo__wr{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events: none; z-index:11;} #footer .copyright{font-size:18px; font-weight: 300; color:rgba(255,255,255,0.6); position:absolute; bottom:60px; left:50%; transform:translateX(-50%); z-index:1; pointer-events: none; width:90%; text-align: center;} .ft__object__box{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:550px; height:550px; background:transparent; z-index:11; border-radius: 50%; display:block;} .mo__contact__ft__btn{position:absolute; bottom:130px; left:50%; transform:translateX(-50%); display:none;} @media screen and (min-width:1921px){ .ft__object__box{width: 28.65vw; height: 28.65vw;} }/* 1440px */ @media screen and (max-width:1280px){ }/* 1280px */ @media screen and (max-width:1024px){ #footer .copyright{font-size:16px;} }/* 1024px */ @media screen and (max-width:820px){ #footer .copyright{font-size:14px;} #footer .ft__logo__wr img{width:180px;} .custom-cursor{display:none !important;} .mo__contact__ft__btn{display:flex; width: 150px; height:46px; line-height: 46px;} .mo__contact__ft__btn a .tx{font-size:14px;} .mo__contact__ft__btn a img{width:12px;} #footer .footer__video__wr video{object-fit: contain; width:140%; top: 50%; left: 50%; transform: translate(-50%, -50%);} .ft__object__box{display:none;} }/* 820px */ @media screen and (max-width:600px){ }/* 600px */ @media screen and (max-width:570px){ #footer .ft__logo__wr img{width:160px;} .mo__contact__ft__btn{width:140px; height:42px; line-height: 42px;} .mo__contact__ft__btn a .tx{font-size:12px; gap:8px;} #footer .footer__video__wr video{width:220%;} .mo__contact__ft__btn a img{width:9px;} }/* 570px */ @media screen and (max-width:480px){ #footer .ft__logo__wr img{width:130px;} }/* 480px */