*{box-sizing:border-box;}
html{font-size:10px;}
body{overflow-x:hidden;background:#231f20 url(../images/bg.jpg) center/cover no-repeat;display:flex;min-height:var(--100vh);flex-direction:column;color:#fff;font-family:'Noto Sans',san-serif;margin:0;font-size:1.6rem;}
header,footer{padding:0 4.167vw;}
.logo{width:300px;margin:4rem 0 2.5rem;flex:0 0 auto;display:block;}
img,video{max-width:100%;width:100%;}
.content{display:flex;flex:1 1 auto;gap:4.5%;padding:0 4.167vw 3rem;}
.left-bar,.right-bar{width:28%;display:flex;flex-direction:column;text-align:center;justify-content:center;}

.spin-container{width:44%;display:flex;flex-direction:column;text-align:center;justify-content:center;max-width:75rem;}
.spin-title{width:85%;margin:0 auto;position:relative;margin-bottom:-10%;z-index:1;}
.spin-title > div{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;flex-direction:column;justify-content:center;z-index:1;line-height:1;padding-bottom:2%;}
.spin-title p{font-size:5rem;margin:0;letter-spacing:.1em;font-weight:bold;}
h1{font-size:3rem;margin:0;}
.spin-wrap{position:relative;width:100%;overflow:hidden;}
.spin-wrap > p{font-size:1.4rem;}
.spin-frame,.spin-frame1,.spin-frame2{position:absolute;top:0;left:0;width:100%;cursor:pointer;}
.spin-frame1{animation:bling .6s linear infinite;opacity:0;}	
.spin-frame2{animation:bling .6s linear infinite .1s;opacity:0;}		
.spin-wrap .btn{position:absolute;cursor:pointer;width:21.42%;left:39.29%;top:39.29%;z-index:999;animation:btnzoomBtn 1s linear infinite;transform-origin:50% 50%;}
@keyframes btnzoomBtn {0% {transform:scale(0px);}40% {transform:scale(1.1);}100% {transform:scale(1);}}
@keyframes bling {0% {opacity:0);}50% {opacity:1;}100% {opacity:0;}}
h2{font-size:2rem;font-weight:normal;margin:0 0 1rem;text-align:left;font-weight:500;}
video{margin-top:2rem;}

.modal{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999;visibility:hidden;background:rgba(10,10,10,.8);display:flex;justify-content:center;align-items:center;color:#847D7D;}
.modal.active{visibility:visible;}
.modal .modal-dialog{background:#1B1C21;border-radius:10px;width:55rem;max-width:90%;padding:5rem 8.5rem;text-align:center;}
.modal h1{color:#fff;margin-bottom:3rem;}
.modal .btn{display:block;background:linear-gradient(180deg, #8B65FF 0%, #853AFC 100%);border:1px solid #707070;width:max-content;line-height:6rem;cursor:pointer;margin:2.6rem auto 0;animation:btnzoomsm 1.2s linear infinite;color:#fff;font-size:2rem;padding:0 3.2rem;border-radius:10px;text-decoration:none;}
@keyframes btnzoomsm{0% {transform:scale(0px);}50% {transform:scale(1.05);}100% {transform:scale(1);}}

footer{background:#1B1C21;color:#FFFFFF;margin-top:4rem;display:flex;justify-content:space-around;padding-top:6rem;padding-bottom:8rem;}
footer > div > div{margin-top:2rem;}
.footer-social{display:flex;gap:3rem;}
footer img{max-width:31.3rem;}
.footer-social img{width:5rem;}

@media (max-width:1600px){
	html{font-size:9px;}
}

@media (max-width:1400px){
	html{font-size:8px;}
}

@media (max-width:1200px){
	html{font-size:7px;}
}

@media (max-width:991px){
	.logo{margin:3rem auto;}
	.content{flex-direction:column;}
	.content > *{width:100%;margin:0 auto;}
	.left-bar,.right-bar{order:1;max-width:65rem;}
	footer{flex-direction:column;align-items:center;gap:4rem;text-align:center;}
	h2{text-align:center;}
}
@media (max-width:576px){
	.spin-title p{font-size:4rem;}
	h1{font-size:2.5rem;}
}