.hide {
    display: none;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.hide-text {
    text-indent: -9999px;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.modal {
    display: none;
}

#footer {
    text-align: center;
    padding: 30px 0;
    background-color: #363636;
    color: #6b6b6b;
}

#footer a {
    color: #bdc1c2;
}

#footer a:hover {
    color: #e96b3b;
}

#footer .layout {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

#footer .xd-logo {
    background: url(https://web.xdcdn.net/xd/imgs/xdlogo/game_footer_white.png?v2) no-repeat 0 center;
    width: 140px;
    height: 40px;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://web.xdcdn.net/xd/imgs/xdlogo/game_footer_white.png?v2");
    _background: none;
    _margin-top: 4px;
    cursor: default;
}

#footer .xd-info {
    display: none;
}

@media only screen and (max-width: 1024px) {
    #topnav {
        display: none;
    }

    #footer .size-small {
        display: none;
    }

    #footer .xd-info {
        padding: 0 40px;
        display: block;
        word-wrap: break-word;
    }
}

html {
    height: 100%;
    background-color: #F3F3F3;
}

body {
    padding: 0;
    max-width: 640px;
    margin: 0 auto;
    background-color: #F3F3F3;
}

#topnav {
    display: none;
}

#maincontainer {
    margin: 0 auto;
    position: relative;
    padding-top: 389.626%;
}

.iti-flag {
    display: none;
}

.main {
    top: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(https://xd-silent.oss-cn-hangzhou.aliyuncs.com/compass/compass-entry5.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    overflow: hidden;

}
.main .swiper-container {
    height:14.1435%;
    width: 93.75%;
    top:1%;
}

.slide1 {background-image: url("1.jpg");}
.slide2 {background-image: url("2.jpg");}
.slide3 {background-image: url("3.jpg");}
.slide4 {background-image: url("4.jpg");}

.swiper-slide {
    background-size: cover;
}


.swiper-pagination {
        position: relative;
        margin-top: 4%;
    }
.swiper-pagination-bullet {
            border-radius: 50%;
            background-color: white;
            opacity: 1;
            border-color: #666;
            border-width: 1px;
            border-style: solid;
            margin-right:5px;
            margin-left: 5px;
        }
   .swiper-pagination-bullet-active {
            background-color: #2a45ff;
        }

.main .main-container {
    top: 21.3%; left: 6.343%; position: absolute; height: 13.579%; right: 6.34%;
}

.main .main-container .page1 {
    height: 100%;
    background-image: url('./input.png');
    background-size: cover;
}

.main .main-container .light {
    height: 192.45%;
    background-image: url('./light.png');
    background-size: cover;
    width:76.162%;
    top:-107%;
    left:-18%;
    position: relative;
}

.intl-tel-input.allow-dropdown {
    position: absolute;
    display: inline-block;
    top: 25.0%;
    left: 15.7%;
    width: 68.5%;
    background-color: rgba(0, 0, 0, 0);
    height: 17.8%;
    z-index: 1;
}
.iti-arrow {
    display: none;
}
.flag-container, .selected-flag, .telephonenumm {
    background-color: rgba(0, 0, 0, 0);

}

.flag-container {
    width: 22%;
}

.selected-flag {
    width: 100% !important;
}

.dia {
    text-align: center;
    height: 17.8%;
    position: absolute;
    width: 15%;
    top: 25%;
    left: 14.7%;
}

.main .main-container .page1 .telephonenumm {
    display: block;
    height: 100%;
    width: 100%;
    padding-left: 23%;
}

.main .main-container .page1 .telephoneok {
    display: block;
    position: absolute;
    height: 26%;
    width: 40.2%;
    top: 46%;
    left: 30.2%;
    z-index: 1;
    cursor: pointer;
}

.main .main-container .page2 {
    background-size: cover;
    /*background-image: url('./window2.jpg');*/
    height: 100%;
}
.main .page2 .bg {
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    background-position: center;
    height: 100%;
    top: 0;
    position: absolute;
}
.bg.os-ios {
    background-image: url('./appstore_.png');
}
.bg.os-all {
    background-image: url('./taptap_.png');
}

.link {
    position: absolute;
    top: 52%;
    display: block;
    height: 15%;
    width: 62%;
    left: 19%;
    z-index: 2;
}

.error {
    color: red;
    position: absolute;
    top: 41.5%;
    left: 37.6%;
}
.totop {
    display: block;
    top: 93%;
    height: 3.8%;
    left: 26%;
    width: 48.5%;
    position: absolute;
}
@media only screen and (max-width: 414px) {
    .error {
        top: 40%;
        font-size: 11px;
    }
}

@media only screen and (max-width: 375px) {
    .dia {
        font-size: 12px;
    }
}

@media only screen and (max-width: 320px) {
    .error {
        top: 40.3%;
        font-size: 10px;
    }
}

.video {
    position: absolute;
    width: 100%;
    top: 65%;
    padding-top: 84.375%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.web-video-xd{
    width: 93%; top: 50.1%; left: 3.5%; padding-top: 53.25%;
}
@font-face{
    font-family: 'zhuizigongfang';
    src : url('./zhuizigongfang.otf');
}
.reward{
    left: 2%; top: 51.5%; padding-top: 101.375%; background: url(./reward1.png); background-size: 100% auto; position: relative; width: 96%;
}
.reward.end{ background-image: url(./reward2.png);}
.reward .num{ position: absolute; right: 17%; top: 0%; font-family: 'zhuizigongfang'; color: #eee;}


.banner-gif{
    left: 2%; top: 6%; position: absolute; width: 96%;
}
.banner-gif img{ width: 100%;}
input{
    outline: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}