@charset "utf-8";
@import url("https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
		/* Material Icons Outlined*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

* {margin: 0; padding: 0; text-decoration: none;
    /* outline: solid red 1px; */
}
@keyframes phone {
    100% {transform: translate(0,80px); opacity: 0.8;}
    50% {transform: translate(0,70px); opacity: 1;}
    0% {transform: translate(0,80px); opacity: 0.8;}
}
@keyframes roll {
    100% {transform: translate(0,25px); opacity: 0;}
    0% {transform: translate(0,0px); opacity: 1;}
}
@keyframes btn {
    100% {transform: translate(0,0px);}
    50% {transform: translate(5px,0px); opacity: 0.3;}
    0% {transform: translate(0,0px);}
}
@keyframes s2 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@keyframes s4 {
    0% {transform: translateY(100vh) scale(0.5);}
    50% {transform: translateY(50vh) scale(0);}
    100% {transform: translateY(-10vh) scale(1);}    
}
@keyframes s4left {
    0% {opacity: 1;}
    50% {opacity: 0.5; color: white;}
    100% {opacity: 1;}
}
@keyframes memobg1 {
    0% {transform: translate(10%, 10%) scale(1); opacity: 0.5;}
    25% {transform: translate(-10%, -10%) scale(0.8); opacity: 0.5;}
    50% {transform: translate(-10%, -10%) scale(1.2); opacity: 0.8;}
    75% {transform: translate(10%, -10%) scale(1.4); opacity: 0.5;}
    100% {transform: translate(10%, 10%) scale(1); opacity: 0.5;}
}
@keyframes memobg2 {
    0% {transform: translate(-10%, -10%) scale(1); opacity: 0.5;}
    25% {transform: translate(10%, -10%) scale(0.8); opacity: 0.5;}
    50% {transform: translate(10%, 10%) scale(1.2); opacity: 0.8;}
    75% {transform: translate(-10%, 10%) scale(1.4); opacity: 0.5;}
    100% {transform: translate(-10%, -10%) scale(1); opacity: 0.5;}
}
@keyframes s7line {
    0% {transform: translateX(100%);}
    50% {transform: translateX(0%);}
    100% {transform: translateX(100%);}
}
:root{
    --clr:#fbad04;--i:18px;--d:2.5s;
    --clr:#03a1d9;--i:13px;--d:5s;
    --clr:#f7036d;--i:15px;--d:7.5s;
    --clr:#93ff16;--i:20px;--d:10s;
    --del:11;--del:12;--del:24;--del:15;--del:11;--del:10;--del:25;--del:27;--del:29;--del:20;--del:13;
    --swiper-theme-color:black;
}
body {position: relative; height: 100%; font-family: 'Noto Sans KR', sans-serif; font-weight: 700;}
/* body::-webkit-scrollbar {display: none;} */

li{list-style: none;}
footer{width: 100%; height: 0; overflow: hidden; transition: height 2s;}
footer.on {height: 1400px; transition: height 2s;}
.swiper.basic{width: 100%; height: 100vh;}
.s1{background-color: rgb(233, 233, 233); position: relative; overflow: hidden;}
.s1img{width: 110vh; position: absolute; right: 0; bottom: 250px; animation: phone 5s infinite; animation-direction: reverse; z-index: 5;}
.s1text{font-size: 7vh; text-align: center; margin-top: 200px; position: relative;}
.line{width: 100%; height: 4vh; border-top: solid #797979 2px; position: absolute; bottom: 0; z-index: -1;}
.s1textbox{display: inline-block; padding: 0 10px; background-color: rgb(233, 233, 233); color: #383838;}
.s1textboxm{display: none;}

.logo{display: none; width: 60px; height: 40px;}
.head button{display: none;}
.mheadtitle{display: none;}
.pro13{font-size: 1.2em; font-weight:500; color: black;}
.pro13:hover{color: #9b9b9b; transition: color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);}
.head{display: flex; align-items: center; position: fixed; z-index: 100; width: 100%; height: 50px; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(20px); z-index: 10;  font-weight: 300; border-bottom: solid rgb(207, 207, 207) 1px;}
.headinner{display: flex; justify-content: space-between; align-items: center; width: 1200px; margin: 0 auto;}
.nav{display: flex; align-items: center; font-size: 13px;}
.scroll{position: absolute; bottom: 5%; left: 50%; width: 30px; height: 47px; border: solid rgb(77, 77, 77) 2px; border-radius: 50px;}
.scroll p{font-weight: 300; font-size: 14px; margin: 38px 0 0 0;}
.scrollball{display: block; width: 7px; height: 10px; background-color: rgb(90, 90, 90); border-radius: 40%; margin: 0 auto; margin-top: 5px; animation: roll 1.5s infinite;}
.nav a{color: rgb(10, 10, 10);}
.nav .gray{color: rgb(185, 185, 185);}
.nav li:last-child a{color: white;}
/* .nav a:hover{color: black; transition: color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1)} */
.nav a::after{ content: "";
    width: 1px;
    height: 11px;
    background: rgb(0, 0, 0);
    display: inline-block;
    margin: 0 20px;}
    .nav li:last-child a::after{display: none;}
.buy{display: block; width: 65px; height: 27px; line-height: 27px; background-color: #147ce5; text-align: center; border-radius: 980px;}


.testsec{display: none; overflow: hidden;}



.s2{position: relative; display: flex; overflow: hidden;}
.s2left{width: 40%; height: 100vh;}
.s2right{width: 60%; height: 100vh; background-color: black; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.s2textbox{display:block; margin: 50px; font-size: 5vh; text-align: left; color: gray;}
.s2textbox span{color: white;}
.s2bg{position: absolute;}
.s2bg span{position: absolute; width: 85vh; height: 85vh; background: var(--clr); border-radius: 50%; transform-origin: 100px; animation: s2 5s linear infinite; animation-duration: calc(var(--d)); mix-blend-mode:lighten; filter: blur(30px); opacity: 0.3;}
.s2bg span:nth-child(even) {animation-direction: reverse;}
#visual {width: 500px; margin: 0 auto; position: relative; padding-top: 230px;}
#pic {height: 543px; position: relative;}
#pic > div {position: absolute; left: 0; top: 0; display: none;}
#control {position: absolute; width: 100%; left: 50px; bottom: -70px;}
#control a {display: inline-block; width: 26px; height: 26px; background: #000; text-indent: -9999px; line-height: 26px; font-size: 0.8em; border-radius: 14px; margin: 0 2px;}
#control a.on {border: solid rgb(170, 170, 170) 4px;}
.s2button{position: absolute; right: 50px; top: 500px; width: 100px; font-size: 25px; color: rgb(167, 167, 167);}
.s2button a.on {color: black; transition:all 1s;}
.s2mobile{display: none; overflow: hidden;}
.s2m{position: absolute; right: -1300px; top: 30%; z-index: 100;}






.s3{overflow: hidden; position: relative; background-color: rgb(0, 0, 27);}
.s3inner{position: relative; width: 1400px; height: 100vh; margin: 0 auto;}
.s3box{position: absolute; top: 230px; left: 100px; z-index: 3; color: white; font-weight: 300;}
.s3box2{position: absolute; top:480px; left: 300px; z-index: 3; color: white; font-weight: 300;}
.s3box3{position: absolute; top: 700px; left: 100px; z-index: 3; color: white; font-weight: 300;}
.s3box p{font-size: 18px;}
.s3head{display: inline-block; width: 800px; border-bottom: solid rgb(255, 255, 255) 1px; font-size: 25px; font-weight: 600; margin: 10px 0;}
.yellow{color: rgb(255, 211, 14); font-weight: 300;}
.s3bg{position: absolute; bottom: -10%; right: -15%; z-index: 2;}
.s3mbg{display: none;}
.s3mbg2{display: none;}
#control > .green{background-color: #556352;}
#control > .silver{background-color: #EEEFE9;}
#control > .gold{background-color: #E6D1B4;}
#control > .graphite{background-color: #504F4B;}
#control > .sierrablue{background-color: #97B1C8;}
.s4{position: relative; width: 100%; height: 100vh; overflow: hidden;}
.s4 button{position: absolute; font-size: 1.3vh; color: rgb(156, 156, 156); border: none; background: none; z-index: 2; bottom: 6%;}
.s4 button:hover{color: black; transition: color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1)}
.s4promax{position: relative; display: flex; width: 100%; height: 100vh; margin: 0 auto; justify-content: center; align-items: center; z-index: 1;}
.s4promax img{width: 40vh;}
.pro{position: absolute; right: 25%; font-size: 1vw; font-weight: 400;}
.pro span{font-weight: 600; font-size: 1.7vw;}
.promax{position: absolute; left: 25%; font-size: 1vw; font-weight: 400;}
.promax span{font-weight: 600; font-size: 1.7vw;}
.s4XDR{position: absolute; bottom: 10%; font-size: 1.2vw; font-weight: 400;}
/* .xdr{position: absolute; width: 30vh; bottom: 42%; right: 21%;} */
.s4plus{position: absolute; bottom: 0; width: 100%; height: 100vh; background: black; z-index: 2;}
.con{position: absolute; width: 100%; height: 100vh; overflow: hidden; z-index: -1;}
.bubble{position: relative; display: flex; justify-content: space-between;}
.bubble span{position: relative; width: 40px; height: 20px; background: #06a75c; margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 10px #4fc3dc44, 0 0 50px #4fc3dc, 0 0 100px #4fc3dc; animation: s4 15s linear infinite; animation-duration: calc(200s / var(--del)); filter: blur(20px);}
.bubble span:nth-child(even){background: #e8ff64; box-shadow: 0 0 0 10px #ffd6e444, 0 0 50px #ff2d75, 0 0 100px #ff2d75;}

.s4plusinner{display: flex; position: relative; height: 100vh; justify-content: center; align-items: center;}
.s4plusinner img{width: 40vh;}
.s4plustext{position: absolute; left: 12%; top: 25%; line-height: 2.3vw; font-size: 2.3vw; color: rgb(179, 179, 179); z-index: 10;}
.s4plustext span{color: white;}
.s4plustext2{position: absolute; padding: 0 30px 0 0; font-size: 1vw; font-weight: 400; text-align: justify; left: 70%; top: 60%; color: rgb(179, 179, 179); z-index: 10;}
.s4plustext2 span{color: white;}
.close3{position: absolute; color: white; left: 50%; bottom: 10%;}
.close3 span{font-size: 2vw;}
.s4bg{position: absolute; left: 220px; bottom: -225px; transform: rotate(90deg); z-index: 2; overflow: hidden;}
.s5{position: relative; overflow: hidden;}
.s5inner{width: 1200px; margin: 0 auto; padding-top: 200px;}
.s5m{display: none;}
.s5mobile{display: none;}
.s5mtitle{display: none;}
.s3mtitle{display: none;}
.s3mtitle2{display: none;}
.s5mtitle2{display: none;}

.s5bg{padding: 0 150px 0 0;}
.basic2{width: 600px; height: 300px;}
.box1{width: 600px; position: relative;}
.box1 div{font-size: 45px; width: 550px;}
.box1 p{color: gray; font-size: 20px;}
.box1p{position: absolute; right: 200px; bottom: 0px;}
.box2p{position: absolute; right: 290px; bottom: 65px;}
.box3p{position: absolute; left: 0; bottom: -60px;}
.box4p{position: absolute; right: 180px; bottom: 0px;}

.s5left{width: 550px;}
.s5left button{border: solid black 2px; border-radius: 980px; padding: 4px 10px; background-color: white; font-size: 15px; display: flex; align-items: center; margin: 0 auto; margin-top: 50px;}
.s5left button:hover{animation: btn 1.5s infinite; background-color: #000; color: white;}
.s5leftbox{font-size: 40px; text-align: center;}
.plusbox{position: relative;}
.s5plus{display: flex; position: absolute; left: -300px; bottom: -40px; width: 750px; height: 850px; background-color: #f5f5f7; z-index: 100;}
.flex{display: flex; margin-left: 150px;}
.s5plusleft{width: 50%;}
.s5plusleft p{color: rgb(48, 48, 48); font-size: 16px; font-weight: 300; padding:50px;}
.s5plusright{width: 50%; padding: 50px 0 0 0;}
.s5plusright p{width: 300px; color: rgb(48, 48, 48); font-size: 16px; font-weight: 300; margin-top: 42px;}
.s5rightbox{width: 280px; font-size: 16px; border-top: solid black 1px; padding: 15px 10px; border-bottom: solid black 1px;}
.close{position: absolute; bottom: 50px; left: 50%; font-size: 40px; z-index: 1;}
.memo{position: relative; overflow: hidden;}
.memotext{width: 100%; height: 100%; font-size: 30vw; display: flex; justify-content: center; align-items: center; letter-spacing: -3vw; background: black; color: white; mix-blend-mode: multiply;}
.memotext2{position: absolute; width: 100%; font-size: 2.7vw; font-weight: 300; color: rgb(255, 255, 255); display: flex; justify-content: center; top: 13%;}
.memo video{position: absolute; width: 100%; height: 100%; object-fit: contain;}
.memobg{position: absolute; width: 25vw; height: 25vw; bottom: 0; left: 0; z-index: 10;}
.memobg2{position: absolute; width: 25vw; height: 25vw; bottom: 0; right: 0; z-index: 10;}
.memobg::before, .memobg::after{position: absolute; content: ""; top: -5%; left: -5%; width: 250%; height: 250%; border-radius: 50%; opacity: 0.5; filter: blur(300px);}
.memobg::after{background-color: #00ffff; z-index: -1; animation: memobg1 4s ease infinite;}
.memobg::before{background-color: #ff0072; z-index: -2; animation: memobg2 4s ease infinite;}
.memobg2::before, .memobg2::after{position: absolute; content: ""; top: -5%; left: -5%; width: 250%; height: 250%; border-radius: 50%; opacity: 0.5; filter: blur(300px);}
.memobg2::after{background-color: #00ffff; z-index: -1; animation: memobg1 4s ease infinite;}
.memobg2::before{background-color: #ff0072; z-index: -2; animation: memobg2 4s ease infinite;}

.number{display: flex; color: rgb(255, 255, 255); font-size: 2vw; font-weight: 300; letter-spacing: 40px; justify-content: center; position: absolute; width: 100%; bottom: 15%; z-index: 200;}
.s6{position: relative; overflow: hidden;}
.s6textbox{position: absolute; top: 15%; left: 10%;}
.plusbox2{position: absolute; left: 0; bottom: -20%; z-index: 1000;}
.s6 button{border: solid black 2px; border-radius: 980px; background: none; font-size: 15px; font-weight: 700; display: flex; justify-content: center; align-items: center; width: 120px; height: 35px;}
.s6 button:hover{animation: btn 1.5s infinite; background-color: #000; color: white;}
.s6text1{font-size: 5vw; line-height: 5.4vw;}
.s6text2{font-size: 2vw; margin-top: 30px;}
.s6plus{position: absolute; bottom: 0; width: 100%; height: 100vh; background-color: #FBFAFF; z-index: 1000;}
.close2{position: absolute; right: 100px; top: 80px; font-size: 60px;}
.s6bg{position: absolute; right: -2px; bottom: 0;}
.s6bgm{display: none;}
.s6bgplus{position: absolute; bottom: -150px; right: 20%; overflow: hidden;}
.s6mbgplus{display: none;}
.s6plusinner{display: flex; justify-content: space-around; width: 1200px; margin: 0 auto; margin-top: 80px;}
.s6plustext1{width: 340px; font-size: 23px; font-weight: 500; text-align:left;}
.s6plustext2{width: 400px; font-size: 20px; font-weight: 400; text-align: left; color: gray;}
.s6plusmtext2{display: none;}
.s6plusmtext{display: none;}
.s7{position: relative; overflow: hidden;}
.s7inner{width: 1100px; margin: 0 auto; padding-top: 120px;}
.s7toptextbox{display: flex; justify-content: space-between; color: white;}
.s7inner img{margin-bottom: 20px;}
.s7top{width: 100%; height: 50vh; background-color: black;}
.s7toptext1{width: 400px; font-size: 55px;}
.s7toptext2{width: 400px; font-size: 18px; font-weight: 400; color: gray;}
.s7button{color: #2997ff; display: flex; font-size: 19px; align-items: center; font-weight: 500;}
.s7button:hover{animation: btn 1.5s infinite;}
.s7bottom{width: 100%; height: 50vh;}
.s7bottomtextbox{display: flex; justify-content: space-between;}
.s7line{position: absolute; left: 0; bottom: 49.7%; width: 100%; height: 2px; background-color: rgb(0, 0, 0); box-shadow:0 0 10px #ffffff; z-index: 1000; filter: blur(2px); animation: s7line 4s infinite;}


.footer{width: 100%; height: 1400px; background:#f5f5f7; font-weight: 300;}
h2{font-size: 25px;}
.footinner{width: 1200px; margin: 0 auto;}
.foottitle{font-size: 65px; text-align: center; width: 100%; height: 150px; line-height: 150px; background-color: white;}
.foottext{width: 370px; font-size: 17px; text-align: center; padding: 20px 0;}
.footbox{display: flex; flex-direction: column; align-items: center;}
.footbutton{display: flex; height: 30px; line-height: 30px; font-size: 20px;}
.footbutton a{color: #06c;}
.footbutton span{font-size: 17px; margin: 7px 0 0 7px; color: #06c;}
.foot1{display: flex; justify-content: space-around; padding: 50px 0 100px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foot2{display: flex; justify-content: space-around; padding: 50px 0 50px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
.foot3{font-size: 13px; color: gray; padding: 10px 0; border-bottom: solid rgb(194, 194, 194) 1px;}
h3{font-size: 20px;}
.foottext2{width: 210px; font-size: 15px; text-align: center; padding: 20px 0;}
.size{font-size: 60px; color: rgb(163, 163, 163); font-weight: 200; padding: 10px 0;}
.footbutton2{display: flex; height: 30px; line-height: 30px; font-size: 15px;}
.footbutton2 a{color: #06c;}
.footbutton2 span{font-size: 15px; margin: 8px 0 0 5px; color: #06c;}
.foot4{font-size: 13px; color: gray; padding: 10px 0;}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {left: 20px; width: auto; right: auto}
.swiper-pagination-bullet{border-radius: 0; width: 20px; height: 5px;}
.swiper-pagination-bullet-active{width: 30px;}
.swiper.white{--swiper-theme-color:white;}