@charset "utf-8";article,aside,audio,body,canvas,caption,dd,div,dl,dt,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,input,label,legend,li,mark,menu,nav,ol,p,section,table,tbody,td,textarea,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
article,aside,blockquote,dialog,figure,footer,header,hgroup,nav,section{display:block}
ol,ul{list-style:none}
img{border:0 none;vertical-align:top}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:none}
table{border-collapse:collapse;border-spacing:0}
em,i,strong{font-style:normal;font-weight:400}
ins{text-decoration:underline}
del{text-decoration:line-through}
mark{background:0 0}
input::-ms-clear{display:none!important}
body{display:flex;font:12px/1.5 Urbanist,sans-serif;background:#fff}
a{text-decoration:none;color:#333}
a:hover{text-decoration:underline}
.left-col{width:50%;background-color:#fff}
.right-col{position:relative;width:50%;background-color:#333}
.left-col .inner{display:flex;width:100%;height:100vh;max-width:480px;margin:0 auto;justify-content:center;align-items:center;flex-wrap:wrap;flex-direction:column}
.right-col .inner{position:relative}
.brand{width:100%;font-size:24px;color:#333}
.brand .logo{display:inline-block;margin:8px 0 12px;padding:2px 8px;background:#000;color:#fff;border-radius:12px;font-size:24px}
.brand .swiper{width:100%;height:80px}
.brand-carousel-item{width:80px;height:80px;background:#fff center/cover}
.slogan{width:100%;padding-left:8px;font-size:36px;line-height:1.2;font-weight:lighter;color:#666}
.slogan span{color:#111;font-weight:700}
.copyright{display:flex;width:100%;padding:48px 0 96px 8px;color:#666}
.copyright p{margin-right: 12px;}
.photo-carousel{width:100%;height:100vh;background-color:#111}
.photo-carousel .swiper-slide{background:#fff center/cover}
.carousel-mask{position:absolute;left:0;top:0;width:100%;height:100%;z-index:10;background:rgba(0,0,0,.2)}
.photo-carousel .swiper-slide.zoom-in{animation:zoomIn 10s ease infinite}
.fade-in-up .brand-carousel-item{animation:fadeInUp 1s ease}
@keyframes zoomIn{0%{opacity:0;transform:scale(1)}
50%{opacity:1;transform:scale(1.1)}
100%{opacity:0;transform:scale(1)}
}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}
100%{opacity:1;transform:translateY(0)}
}
@media screen and (max-width:1023px){body{display:block;padding:16px}
.left-col,.right-col{width:100%;height:auto;background:0 0}
.right-col .inner{border-radius:24px}
.left-col .inner,.right-col .inner{height:auto;max-width:480px;margin:0 auto;padding:16px;overflow:hidden;box-sizing:border-box}
.brand{padding-top:96px}
.right-col .inner{padding:0}
.photo-carousel{width:100%;height:auto;aspect-ratio:1/1}
}
@media screen and (max-width:480px){body{padding:0}
.left-col .inner,.right-col .inner{border-radius:0;background-color:transparent}
.brand{padding-top:128px}
.copyright{padding-bottom:128px}
}