html, body { width: 100%; height: 100%; background: #000; }
#app{margin: 0 auto;}
#app, .swiper-box, .swiper-slide, .pic { width: 100%; height: 100%; overflow: hidden; }
.pic1 { background-image: url(../image/m-1.jpg); }
.pic2 { background-image: url(../image/m-2.jpg); }
.pic3 { background-image: url(../image/m-3.jpg); }
.pic {background-size: 100% auto;background-position: center top;}
.slogan{z-index: 11;display:block;position:absolute;bottom: 18vh;left: 50%;-webkit-transform: translate(-50%);transform: translate(-50%);margin-left: 0;width: 5.79rem;height: 0.8rem;background: url(../image/slogan-m.png) no-repeat center center;background-size: contain;z-index: 4;}
.bg-top {background-image: url(../image/top.png);background-position: 0;background-repeat: no-repeat;background-size: cover;height: 1.18rem;left: 0;position: fixed;top: 0;width: 100%;z-index: 10;}
.bg-top .btn-download {background-image: url(../image/download.png);background-size: cover;height: 0.7rem;position: absolute;right: 0.1rem;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);width: 2.52rem;}
.btn-download .acbox{position: absolute;display: inline-block;height: 100%;width: 100%;overflow: hidden;top: 0;left: 0;}
body .btn-download .acbox::before{top: -60%;}
.appstore-container {bottom: 8.5vh;display: flex;height: 1rem;justify-content: center;left: 50%;position: absolute;-webkit-transform: translate(-50%);transform: translate(-50%);width: 100%;text-align: center;z-index: 5;}
.appstore-container .btn {position: relative; display: inline-block;height: 0.99rem;margin: 0 0.1rem;width: 2.69rem;background-repeat: no-repeat;cursor: pointer; overflow: hidden; border-radius: 10%;}
.appstore-container .btn-ios { background-image: url(../image/ios.png);background-size: contain;  }
.appstore-container .btn-google { background-image: url(../image/google.png); background-size: contain; }
.copyright{z-index: 11;position: absolute;width: 3.95rem;height: 0.21rem;bottom: 5vh;left:50%;-webkit-transform: translate(-50%);transform: translate(-50%);background: url(../image/copyright-m.png) no-repeat center center;background-size: contain;}
.logo {background-image: url(../image/logo-m.png);background-size: contain;height: 0.99rem;right: 0.2rem;position: absolute;top: 1.3rem;width: 1.93rem;}
.logo-1{left: 0.2rem;}
.logo-2{left: 0.2rem;}
.logo-3{left: 0.2rem;}
.middle-left { height: 1.01rem; left: 50%; margin-left: -3rem; position: absolute; top: 45%; width: 2.56rem }
.middle-right { height: 0.38rem; right: 50%; margin-right: -3rem; position: absolute; top: 50%; width:1.99rem;}
.middle-left-0 { background: url(../image/tips1.png) no-repeat 50%; background-size: contain }
.middle-right-0 { background: url(../image/tip2.png) no-repeat 50%; background-size: contain }
.middle-left-1 { background: url(../image/tips1.png) no-repeat 50%; background-size: contain }
.middle-right-1 { background: url(../image/tip2.png) no-repeat 50%; background-size: contain }
.middle-left-2 { background: url(../image/tips1.png) no-repeat 50%; background-size: contain }
.middle-right-2 { background: url(../image/tip2.png) no-repeat 50%; background-size: contain }
/* 接近方屏的时候头部遮挡处理 判断竖屏，如果宽高比小于6:9的话，显示这个内容 */
@media screen and (orientation: portrait) and (min-aspect-ratio: 6/9){
	.pic {/* background-position-y: -10vh; */}
}
@media screen and (orientation: landscape) and (min-aspect-ratio: 2.2/1){
	.appstore-container .btn {
        transform: scale(0.8);        
    }
    .slogan{transform: scale(0.8);}
}
@media screen and (orientation:landscape) {
	.bg-top{display: none;}
	.pic {background-position: center top;}
	.pic1 {background-image: url(../image/pc-1.jpg);/* background-position: center 70%; */}
	.pic2 { background-image: url(../image/pc-2.jpg); }
	.pic3 { background-image: url(../image/pc-3.jpg); }
	.slogan{z-index: 11;display:block;position:absolute;bottom: 23%;left:50%;-webkit-transform: translate(-50%);transform: translate(-50%);width: 77.42268041237114vh;height: 11.237113402061855vh;background: url(../image/slogan.png) no-repeat;background-size: contain;z-index: 4;}
	.appstore-container {width: 78.14432989690722vh;bottom: 7.5%;height: 13.29896907216495vh;justify-content: space-between;margin-bottom: auto;z-index: 10;}
	.appstore-container .btn {width: 35.876288659793815vh;height: 13.29896907216495vh;margin: 0 0;background-position: center center;}
	.copyright{z-index: 11;position: absolute;width: 60.30927835051546vh;height: 2.9896907216494846vh;bottom: 3.5%;left:50%;-webkit-transform: translate(-50%);transform: translate(-50%);background: url(../image/copyright.png) no-repeat center center;background-size: contain;}
	.logo {background-image: url(../image/logo.png);background-size: contain;height: 12.8865979vh;left: 10%;position: absolute;top: 10px;width: 25.25773vh;}
	.logo-1{transform: translate(-50%);}
    .logo-2{transform: translate(-50%);}
    .logo-3{transform: translate(-50%);}
    /* 应用于移动设备的样式 */
	@media only screen and (max-width: 1024px) {
		/* 在宽度小于等于768px时应用的样式 */
		.appstore-container {width: 78.14432989690722vh;}
		/* .appstore-container .btn {
			transform: scale(1.4);
		} */
	}
}
.swiper-box{
    transform: translate3d(0,0,0);
    overflow: hidden;
}
.swiper-slide{
    transform: translate3d(0,0,0);

}
.appstore-container .btn::before,.btn-download .acbox::before{
    z-index: 1;
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: -30px;
    width: 30px;
    height: 100%;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgb(255, 255, 255) 100%, rgba(255, 255, 255, 0) 0%);
    -webkit-animation-name: shiny;
    animation-name: shiny;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}
@-webkit-keyframes shiny {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}

@keyframes shiny {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: .5
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0
    }
}
*, :after, :before, address, blockquote, body, caption, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, html, img, label, legend, li, ol, p, pre, table, tbody, td, tfoot, th, thead, tr, ul { border: 0; margin: 0; padding: 0; }
*, :after, :before { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; vertical-align: initial; }
:focus { outline: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
body { -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(51, 133, 255, 0); -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, STHeiti SC, Microsoft YaHei, Helvetica Neue, Helvetica, Arial; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
a { background-color: initial; outline: 0; text-decoration: none; }
li, ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:after, blockquote:before, q:after, q:before { content: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
fieldset, img { border: none; }
button, input, select, textarea { font-family: inherit; font-size: 100%; -webkit-user-select: auto; user-select: auto; vertical-align: middle; }
textarea { overflow: auto; resize: none; vertical-align: top; }
[hidden] { display: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; }
a, button, input { -webkit-user-select: auto; user-select: auto; }
[type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; appearance: button; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
::-webkit-file-upload-button { -webkit-appearance: button; appearance: button; font: inherit; }
button { background-color: initial; border: 0; outline: 0; }
video::-webkit-media-controls-start-playback-button { display: none; }