body{
	width: 100%;
	overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
}


.desktop{}
.mobile{ display:none !important; }

.f-1{ font-size:1vw; }
.f-5{ font-size:6.5vw; }



#main{
	width: 100%;
	height: 100vh;
}

#main .logo{
	width:23vw;
	top:3vw;
}


#main .more{
	padding:1.5vw;
	top:1.5vw;
	right:1.5vw;
	grid-template-columns:auto 1.2vw;
	grid-gap:2.8vw;
}
#main .more .text{
	height:1.2vw;
}
#main .more .text span{
	transition:all 1s;
}
#main .more[class*="open"] .text span{
	transform:translateY(-50%);	
}
#main .more .icon{
	width:1.3vw;
	height:1.3vw;
	border-radius:50%;
	border:0.3vw solid var(--yellow);
	background-color:var(--yellow);
	transition:all 1s;
}
#main .more[class*="open"] .icon{
	background-color: transparent;
}



#main #menu{
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	transition:all 0.5s;
	transition-delay:0.3s;
	pointer-events:none;
}
#main #menu .content{
	grid-template-columns:57% 43%;
	padding: 10vw 5vw 8vw;
	transform:translateY(-100%);
	transition:all 1s;
	transition-delay:0s;
}

#main #menu[class*="open"]{
	opacity: 1;
	transition-delay:0s;
	pointer-events:auto;
}
#main #menu[class*="open"] .content{
	transform:translateY(0%);
	transition-delay:0.3s;
}


#main .arrow{
	grid-template-columns:50% 50%;
}
#main .arrow .sx{
	cursor:pointer;
}
#main .arrow .dx{
	cursor:pointer;
}


#main .back-gallery .content{
	height:100%;
	transition: all 1s;
}



#main .calltoaction{
	bottom:7.5vw;
}




#main .marquee{
	padding:0.85vw 0;
}
#main .marquee .content{
	height: 1.4vw;
}

#main .marquee .content .one{ animation: marquee 60s linear infinite; }
#main .marquee .content .two{ animation: marquee 60s linear 15s infinite; }
#main .marquee .content .three{ animation: marquee 60s linear 30s infinite; }
#main .marquee .content .four{ animation: marquee 60s linear 45s infinite;}

#main .marquee .content .marq{
	position: absolute;
	width: 100%;
	left: 100%;
	height: 1.2vw;
	display: flex;
	justify-content: space-between;
}

@keyframes marquee {
  0% { left: 100%; }
  50% { left: -100%; }
  100% { left: -100%; }
}

#main .marquee .content .word{
	grid-template-columns:0.2vw auto;
	grid-gap:1.5vw;
	align-items:center;
}
#main .marquee .content .word .icon{
	width:0.4vw;
	height:0.4vw;
	border-radius:50%;
	background-color: var(--black);
}




.block h2{
	font-weight:400;
	margin: 0;
	padding: 0;
}
.block strong{
	font-weight:400;
}
.block .main-text{
	font-size:2.4vw;
	color:var(--black);
}

.block .small-text{
	font-size:1.4vw;
	color:var(--black);
	line-height: 1.4;
}



#manifesto{
	padding:8vw 5vw 16vw 5vw;
}

#manifesto .main-text{
	width:53vw;
	margin:2vw auto 3vw;
}

#manifesto .main-text .bursting .animate-underline{
	top:105%;
	left: 0;
}
#manifesto .main-text .bursting .animate-underline .content{
	grid-template-columns:100% 100%;
	animation: undeline-move 5s linear infinite;
	will-change:scroll-position;
}

@keyframes undeline-move {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}


#manifesto .small-text{
	width:48vw;
	margin: auto;
}
#manifesto .small-text span{
	display:block;
}


#manifesto .img-layer div{
	background-color: var(--yellow);
	position: absolute;
	cursor: zoom-in;
	transition:all 0.3s;
}
#manifesto .img-layer #man-img-1{
	width: 11vw;
	height: 11vw;
	top: 18vw;
	left: 7vw;
}
#manifesto .img-layer #man-img-2{
	width: 8vw;
	height: 8vw;
	bottom:5vw;
	left:46vw;
}

#manifesto .img-layer #man-img-3{
	width: 11vw;
	height: 11vw;
	top: 5vw;
	right: 5vw;
}

#manifesto .img-layer #man-img-1:hover{ transform: scale(1.2); }
#manifesto .img-layer #man-img-2:hover{ transform: translateX(-50%) scale(1.2); }
#manifesto .img-layer #man-img-3:hover{ transform: scale(1.2); }



.man-zoom{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0,0,0,0.3);
	opacity: 0;
	transition:all 0.5s;
	pointer-events:none;
}

.man-zoom[class*="open"]{
	opacity: 1;
	transition-delay:0s;
	pointer-events:auto;
}
.man-zoom .img{
	width: 25vw;
	height:35vw;
	border:0.5vw solid var(--yellow);
}
.man-zoom .btn-close{
	width:4vw;
	height: 4vw;
	top: -2vw;
	right: -2vw;
}









@keyframes outline-rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}





#product{
	grid-template-columns:50% 50%;
}
#product .text{
	padding:4vw 7vw 16.5vw;
}
#product .text .main-text{
	margin:2vw 0 3vw;
	font-size:2vw;
}
#product .text .small-text{
	width: 30vw;
	font-size:1.2vw;
}
#product .text .btn-shop{
	width:9vw;
	height: 9vw;
	font-size:1.2vw;
	margin-top:2.5vw;
	transition:all 0.2s;
}

#product .btn-shop .outline{
	animation: outline-rotate 30s linear infinite;
}

#product .btn-shop .fill{
	opacity:0;
	transition:all 0.2s;
}
#product .btn-shop:hover{}
#product .btn-shop:hover .fill{
	opacity:1;
}

#product .img-box .img{
	width: 120%;
	height: 120%;
	top:-10%;
	left:-10%;
}





#slider{
	padding:14vw 20vw 48vw 57vw;
}
#slider .buttons .btn{
	width:0.8vw;
	height:0.8vw;
	margin-bottom:0.8vw;
	opacity:0.7;
	cursor: pointer;
	transition:all 0.2s;
}
#slider .buttons .btn[class*="active"]{
	opacity:1;
}
#slider .text .main-text{
	margin-top:2vw;
	font-size:2vw;
	color:var(--yellow);
}
#slider .visual{
	opacity:0;
	transition:all 0.2s;
	background-position:center !important;
	background-attachment: fixed;
}
#slider .visual[class*="active"]{
	opacity:1;
}
#slider .visual .img{
	width:16vw;
	height: 16vw;
	background-color: var(--white);
	position:absolute;
	background-size:cover;
	background-position:center;
}

#slider .visual .img-1{
	top:12vw;
	left: 7vw;
}

#slider .visual .img-2{
	top: 12vw;
	left: 24vw;
}

#slider .visual .img-3{
	top:30vw;
	left: 57vw;
}






#sustain{
	grid-template-columns:50% 50%;
}


#sustain .prod{
	padding:7vw;
}

#sustain .prod-gallery{
	width: 33vw;
	height:33vw;
}

#sustain .prod-gallery .slide{
	width: 75%;
	height: 75%;
	position:absolute;
	left: 50%;
	top: 50%;
	transform:translate(-50%, -50%);
	opacity: 0;
	transition: all 0.5s;
}
#sustain .prod-gallery .slide[class*="active"]{
	opacity:1;
}


#sustain .prod .outline{
	animation: outline-rotate 45s linear infinite;
}


#sustain .prod .btn-change{
	font-size:1.1vw;
	padding:0.8vw 1.6vw;
	border-radius:5vw;
	grid-template-columns:1.2vw auto;
	grid-gap:0.5vw;
	align-items:center;
	background-color:var(--yellow);
	color:var(--black);
	bottom:6.3vw;
	right: -6.3vw;
}
#sustain .prod .btn-change:hover{
	
}
#sustain .prod .btn-change .icon{
	transform:translateY(7%);
}



#sustain .text{
	padding:10vw 9vw 11.5vw 7vw;
}
#sustain .text .main-text{
	margin:2vw 0 2vw;
	font-size:2vw;
}
#sustain .text .small-text{
	width: 30vw;
	font-size:1.2vw;
}









#collection{
	padding:4vw 7vw;
}

#collection .text .main-text{
	width: 50vw;
	margin:2vw auto 2vw;
}

#collection .text .small-text{
	width: 44vw;
	margin: auto;
	font-size:1.2vw;
}

#collection .slideshow{
	margin: 3vw 0;
	grid-template-columns:repeat(5, 16.4vw);
	grid-gap:1vw;
}
#collection .slideshow .slide{
	display:block;
}
#collection .slideshow .slide .img{
	width: 100%;
	height: 16.4vw;
	background-color:var(--white);
	margin-bottom:0.5vw;
}

#collection .btn-shop{
	width:16.7vw;
	font-size: ;
	margin: auto;
	font-size:1.1vw;
	padding:0.8vw;
	border-radius:2vw;
}


#collection .sold{
	width: 6.5vw;
	height: 6.5vw;
	right: 1vw;
	top:1vw;
}
#collection .sold .text{
	font-size:1vw;
	line-height:1;
	color: var(--black);
}
#collection .sold .outline{
	animation: outline-rotate 30s linear infinite;
}



#pre-footer{
	height:48vw;
}

#footer{
	padding: 1.5vw 7vw;
	grid-template-columns:3vw 40vw 11vw 7.6vw;;
	grid-gap: 5vw;
}
#footer strong{ 
	font-weight:400; 
	margin-right:0.8vw;
}
#footer .info{
	margin-top: 1vw;
}
#footer .copyright{
	margin-bottom: 0.5vw;
}
#footer .link{
	margin-top: 1vw;
}
#footer .link img{
	height: 0.95vw;
}