@import url('https://webfontworld.github.io/leferi/LeferiBase.css');
html{font-family: 'LeferiBase' !important;}

*{margin: 0px; padding: 0px; box-sizing: border-box;}

body{background: linear-gradient(180deg, rgba(0,0,12,1) 0%, rgba(7,5,9,1) 100%);}

.title{display: block; height: 100%; width: 100%;}
.wrapper{margin: auto; padding: 0px;}
.relative{position: relative;}
.whole{margin: auto;}

.sticky{position: sticky; top: 0; width: 100%;}
.bg-black{background: black;}
.bg-white{background: white;}
.text-white{color: white;}


/*nav관련 스타일*/
/*nav관련 스타일*/
a{font-size: 1em; display: block; padding: 1em 1em; background: black; text-decoration: none; color: white; text-align: center;}
.logo a{font-weight: 700;}
nav{z-index: 1;}
nav .flex{gap: 1em; padding-left: 1em; padding-right: 1em;}
li{list-style: none;}
nav .flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
/*nav관련 스타일*/
/*nav관련 스타일*/
 
/*슬라이드  관련 스타일*/
/*슬라이드  관련 스타일*/
.slidebox ul, .slidebox li {list-style: none;}
[name="slide"] { display: none; }
.slidebox {max-width: 1920px; width: 100%; margin: 0 auto;}
.slidebox img {max-width: 100%;}
.slidebox .slidelist {white-space: nowrap; font-size:0; overflow: hidden; margin: 0; padding: 0;}
.slidebox .slideitem {position: relative; display: inline-block;  vertical-align: middle; width: 100%; transition: all .35s;  margin: 0; padding: 0;}
.slidebox .slideitem label {position: absolute;  z-index: 2; top: 50%; transform: translateY(-50%); padding: 20px; border-radius: 50%; cursor: pointer;}

[id="slide01"]:checked ~ .slidelist .slideitem {transform:translateX(0); animation:slide01 15s infinite}
[id="slide02"]:checked ~ .slidelist .slideitem {transform:translateX(-100%); animation:slide02 25s infinite}
[id="slide03"]:checked ~ .slidelist .slideitem {transform:translateX(-200%); animation:slide03 35s infinite}

@keyframes slide01 {
    0% {left: 0%;}
    30% {left: 0%;} 
    33% {left: -100%;}
    63% {left: -100%;}
    66% {left: -200%;}
    96% {left: -200%;}
    100% {left:0%}}
@keyframes slide02 {
    0% {left: 0%;}
    23% {left: 0%;}
    25% {left: -100%;} 
    48% {left: -100%;} 
    50% {left: -200%;}
    73% {left: -200%;}
    75% {left: 100%;}
    98% {left: 100%;} 
    100% {left:0%}}
@keyframes slide03 {
    0% {left: 0%;} 
    23% {left: 0%;}
    25% {left: -100%;} 
    48% {left: -100%;} 
    50% {left: 200%;}
    73% {left: 200%;}
    75% {left: 100%;}
    98% {left: 100%;} 
    100% {left:0%}}
/*슬라이드  관련 스타일*/
/*슬라이드  관련 스타일*/

/*for 관련 스타일*/
/*for 관련 스타일*/
.for {padding-top: 4vw;}
.for h2{font-size: 5vw; line-height: 1.2; letter-spacing: -0.1vw;}
.for h3{font-size: 6vw; font-weight: 700; letter-spacing: -0.1vw;}
.for p{font-size: 1.3vw; font-weight: 400; text-align: center; position: absolute; top: 78%; left:38%;}

.for .relative{margin-top: 4vw; margin-bottom: 4vw;}
.for .txt1{top:35%; left: 10%; position: absolute;}
.for .txt2{top:35%; right: 10%; text-align: right;  position: absolute;}
.for .txt3{top:14%; left: 10%; position: absolute;}
.for .txt4{font-size: 12vw; font-weight: 700; top:32%; left: 14%; position: absolute; letter-spacing: -0.7vw;}

.for .ex1{width: 72.9%; height: auto;}
.for .ex2{width: 72.9%; height: auto;}
.for .ex3{width: 72.9%; height: auto;}
.for .flame{width: 100%; height: auto;}
/*for 관련 스타일*/ 
/*for 관련 스타일*/


/*use 관련 스타일*/
/*use 관련 스타일*/
.use h2{font-size: 6vw; font-weight: 700; letter-spacing: -0.1vw; text-align: center; margin-top: 20vw; margin-bottom: 6vw;}
.use .flex{display: flex; flex-wrap: wrap; justify-content: center;}
.cuta{width: 50%; height: auto;}
.cutb{width: 50%; height: auto;}
.cutc{width: 50%; height: auto;}
.cutd{width: 50%; height: auto;}

.use h3{position: absolute; font-size: 5vw; font-weight: 700; letter-spacing: -0.2vw; text-align: center;}
.use p{font-size: 2vw; font-weight: 400; letter-spacing: -0.08vw; text-align: center;}
.cut1{top: 30%; left: 14%; opacity: 10%; transition: opacity 0.35s ease-in-out;} 
.cut2{top: 30%; right: 13%; opacity: 10%; transition: opacity 0.35s ease-in-out;}
.cut3{top: 70%; left: 14%; opacity: 10%; transition: opacity 0.35s ease-in-out;}
.cut4{top: 70%; right: 13%; opacity: 10%; transition: opacity 0.35s ease-in-out;}

.cuta:hover + .cut1 {opacity: 1}
.cutb:hover + .cut2 {opacity: 1}
.cutc:hover + .cut3 {opacity: 1}
.cutd:hover + .cut4 {opacity: 1}
/*use 관련 스타일*/
/*use 관련 스타일*/


/*review 관련 스타일*/
/*review 관련 스타일*/
.review h2{font-size: 6vw; font-weight: 700; letter-spacing: -0.4vw; text-align: center;}
.review p{font-size: 1.5vw; font-weight: 400; opacity: 80%; text-align: center; margin: 2vw; margin-bottom: 8vw;}
.review .text{margin-top: 20vw;}
.review .memo{display: block; margin: auto; width: 70%; height: auto;}
/*review 관련 스타일*/
/*review 관련 스타일*/


/*buy 관련 스타일*/
/*buy 관련 스타일*/
.buy h2{font-size: 6vw; font-weight: 700; letter-spacing: -0.4vw; text-align: center;}
.buy p{font-size: 3vw; font-weight: 400; opacity: 50%; letter-spacing: 0; text-align: center; margin: 4vw;}
.buy p:hover{opacity: 100%;}
.buy .text{margin-bottom: 25vw; height: 30vw; margin-top: 10vw;}
/*buy 관련 스타일*/
/*buy 관련 스타일*/


/*footer 관련 스타일*/
/*footer 관련 스타일*/
.footer h2{padding-top: 1vw; font-size: 3vw; font-weight: 700; letter-spacing: -0.1vw; line-height: 3.5vw;}
.footer p{font-size: 1vw; line-height: 4vw;}
.footer .text{height: 20vw; padding-left: 3vw; padding-right: 3vw;}
.footer hr{width:94%; height: 0.2vw; background-color:white; border:0; margin:auto;}
.footer .flex{display: flex; flex-wrap: wrap; justify-content: space-between;}
/*footer 관련 스타일*/
/*footer 관련 스타일*/