/* font-family: 'Red Hat Display', sans-serif; */
body, html { height: 100%; font-family: 'Red Hat Display', sans-serif; font-size: 16px; color: #3D3D40; -ms-overflow-style:none; scrollbar-width:none;  }
body::-webkit-scrollbar { display: none;  }
.wrapper {height: 100%; overflow-x: hidden;}
.header { background: #fff; padding: 24px 25px; min-height: 78px; display: flex; align-items: center; justify-content: space-between; position: fixed; width: 100%; top: 0; left: 0; z-index: 10; }
.head-left { padding: 0 ; margin: 0;}
.head-right { padding: 0 ; margin: 0;}
.head-right ul { padding: 0 ; margin: 0; display: flex; align-items: center; list-style: none;}
.head-right ul li { padding: 0 ; margin: 0 0 0 5px; display: block;}
.head-right ul li a { width: 22px; height: 22px; border-radius: 22px; background: #F5F5F7; display: flex; align-items: center; justify-content: center; }
.banner-main { background-color: #F4F4F4; height: 100%; width: 100%; overflow: hidden; position: relative;}
.banner-main .container { max-width: 1174px; height: 100%; display: flex; align-items: center; justify-content: center; }
.banner-main-left {max-width: 324px; width: 100%; min-width: 324px;}
.banner-main-left h1 {color: #3D3D40; font-size: 50px; line-height: 57px; margin: 0; padding: 0 0 12px; position: relative; }
.banner-main-left p {color: #696969; font-size: 26px; line-height: 34px; margin: 0; padding: 0;  position: relative;}

.banner-main-right {width: 100%; flex: 1;}
.banner-main-right img { height: calc(100vh - 62px); width: 984px; margin-left: -86px; object-fit: contain; position: relative; transform: scale(1); }
.ios-btn {display: inline-block;}
.scroll-next {height: 50px; width: 100%; padding: 5px 10px; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; z-index: 9; background: #fff; }
.scroll-next-btn { background:none; padding: 0; margin: 0; border: 0; text-decoration: none; display: inline-block; cursor: pointer ; }
.fp-scrollable { overflow: hidden; position: relative;}
.fp-scroller{ overflow: hidden;}
.footer .container {height: 100vh; width: 100%; max-width: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.foot-logo {margin-bottom: 100px;}
.footer-bottom {width: 100%; position: absolute; left: 0; bottom: 0; background: #E7E8EC; padding: 5px 50px; display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.footer-bottom-left {font-size: 12px; line-height: 16px; color: #8F96A3;  }
.footer-bottom-left span {font-size: 12px; line-height: 16px; color: #8F96A3; margin-right: 2px; }

.footer-bottom-right {font-size: 12px; line-height: 16px; color: #8F96A3;  }
.footer-bottom-right ul { padding: 0 ; margin: 0; display: flex; align-items: center; list-style: none;}
.footer-bottom-right ul li { padding: 0 14px 0 0; margin: 0 0 0 14px; display: block; position: relative;}
.footer-bottom-right ul li:after { width: 1px; height: 11px; background: #9096A2; content: ''; display: block; position: absolute; top: 2px; right: 0; }
.footer-bottom-right ul li:last-child {padding-right: 0;  }
.footer-bottom-right ul li:last-child:after {display: none;}
.footer-bottom-right ul li a { font-size: 12px; line-height: 16px; color: #8F96A3; text-decoration: none;}
.footer-top .head-right { display: flex; align-items: center; justify-content: center; }

#fp-nav { position: fixed; top: 50%; right: 44px; transform: translateX(-50%); width: 11px; z-index: 11;}
#fp-nav ul { padding: 0 ; margin: 0; display: block;}
#fp-nav ul li { padding: 0 0 0 0; margin: 0 0 12px 0; display: block; }
#fp-nav ul li:last-child { margin: 0; }
#fp-nav ul li a { padding: 0 0 0 0; margin: 0 0 0 0; display: block; width: 11px; height: 11px; border: 1px solid #000; border-radius: 50%; color: transparent; text-decoration: none; }
#fp-nav ul li a.active {background: #000;}
.fp-viewing-0 #fp-nav ul li a {border-color: #fff;}
.fp-viewing-0 #fp-nav ul li a.active {background: #fff;}

.conquer-section {height: 100%;}
.conquer-section .container {/*height: 100%;*/ display: flex; align-items: center; justify-content: center; }
.adventure-section {height: 100%;}
.adventure-section .container { /*height: 100%;*/display: flex; align-items: center; justify-content: center; }

.embark-section-max { max-width: 816px; width: 100%; margin: 0 auto; }
.embark-section-max h2 { text-align: center; font-size: 40px; font-weight: 600; padding: 0 65px 26px; line-height: 50px; color: #3D3D40; }
.download-space-cafe-gird { background: #3D3D40; border-radius: 33px; max-width: 396px; width: 100%; height: 100%; margin: 0 auto; padding: 47px 35px 57px 28px; }
.download-space-cafe-img { width: 115px; position: relative; padding-bottom: 51px; }
.download-space-cafe-img img, .cafe-shooter-img img { width: 100%; height: auto; }
.download-space-cafe-gird p { font-size: 24px; line-height: 31px; color: #fff; font-weight: 500; min-height: 221px; }
.cafe-shooter-gird { background: #F5F5F7; border-radius: 33px; padding: 43px 0px 0; text-align: center; display: flex; flex-direction: column; align-items: center; max-width: 396px;
width: 100%; margin: 0 auto; height: 100%; justify-content: flex-end; }
.cafe-shooter-gird h3 { font-size: 30px; line-height: 40px; /* text-align: center; */
font-weight: bold; padding-bottom: 45px; }
.cafe-shooter-img {    /* position: relative; */ /* bottom: 0; */
max-width: 238px; width: 100%; margin: 0 auto; }
.container-block {height: 100%;}
footer { height: 100%; }
.snap-scroll .container  {padding-top: 80px;padding-bottom: 80px; min-height: 100vh; }
.iScrollVerticalScrollbar {opacity: 0;}

@media(max-width:767px){
    .download-space-cafe-gird, .cafe-shooter-gird{margin-bottom: 15px; height: auto;}
    .cafe-shooter-img{max-width: 200px;}
    .download-space-cafe-gird p{font-size: 16px; line-height: 24px; min-height: 150px;}
    .cafe-shooter-gird h3{font-size: 21px;}
    .embark-section-max h2{font-size: 20px; line-height: 30px; padding: 10px 0;}
    .container-sm, .container{max-width: 100%;}
    .footer-bottom {padding: 15px; display: block; }
    .footer-bottom-left {width: 100%; text-align: center; padding-bottom: 10px;}
    .footer-bottom-right {width: 100%; text-align: center;}
    .footer-bottom-right ul {justify-content: center;}
    .banner-main-left {width: 100%;}
    .banner-main-right {width: 100%; flex: 0; }
    .banner-main-right img {width: calc(100% + 200px); height: 50vh; margin: 0 -100px; }
    .banner-main .container {flex-direction: column; align-items: flex-end; justify-content: flex-end;}
    .banner-main-left h1 {font-size: 35px; line-height: 45px;}
    .banner-main-left {min-width: 100%;}
    #fp-nav { right: 25px; }

}

/** animation **/
.adventure-section.active .embark-section-max h2, .conquer-section.active .embark-section-max h2{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; animation-duration: .7s; animation-fill-mode: both; animation-delay: .5s; }
.adventure-section.active .embark-section-max .download-space-cafe-img, .conquer-section.active .embark-section-max .download-space-cafe-img{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; animation-duration: .8s; animation-fill-mode: both; animation-delay: .6s; }
.adventure-section.active .embark-section-max .download-space-cafe-gird p, .conquer-section.active .embark-section-max .download-space-cafe-gird p{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; animation-duration: .9s; animation-fill-mode: both; animation-delay: .7s; }
.adventure-section.active .embark-section-max .download-space-cafe-gird .ios-btn, .conquer-section.active .embark-section-max .download-space-cafe-gird .ios-btn{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; animation-duration: .95s; animation-fill-mode: both; animation-delay: .75s; }
.adventure-section.active .embark-section-max .cafe-shooter-img img, .conquer-section.active .embark-section-max .cafe-shooter-img img{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-duration: .99s; animation-fill-mode: both; animation-delay: .8s; }