/* app.html 专用样式 */

/* 基础重置 */
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,pre,dl,dt,dd,ul,li,ol,th,td,img,form,fieldset,legend,button,select,input,textarea{margin:0;padding:0;list-style:none}
article,aside,details,figcaption,figure,summary,hgroup,section,nav,menu,header,main,footer{display:block}
body,html{-webkit-tap-highlight-color:rgba(0,0,0,0)}
input,button,select,a{display:inline-block;box-shadow:none;outline:none;border:none}
img{max-width:100%;border:0}
em,i{font-style:normal}
a,a:hover{outline:none;text-decoration:none;color:#000;cursor:pointer}
button,html input[type="button"]{outline:none;cursor:pointer;background:none}
*{box-sizing:border-box}
body{font:14px/1.6 "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;color:#000;background-color:#fff}

/* header */
header{width:100%;padding-bottom:60px;background-size:cover}

/* container & layout */
.container{width:100%;margin:0 auto;padding-right:20px;padding-left:20px}
.container .row{align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}


/* header-banner */
.header-banner{width:100%;padding:50px 0}
.header-banner .left-text{color:#fff}
.header-banner .left-text h2{margin-bottom:20px;font-size:30px;line-height:1.4}
.header-banner .left-text p{font-size:18px;line-height:1.8}
.header-banner .download-items{margin-top:40px;display:flex;justify-content:center}
.header-banner .download-items h3{margin-bottom:10px}
.header-banner .download-items a{height:50px;margin-bottom:15px;margin-top:30px;color:#fff;font-size:18px;text-align:center;background-color:#26b2ff4f;border-radius:4px;display:flex;align-items:center;justify-content:center}
.header-banner .download-items a .iconfont{margin-right:5px;font-size:20px}
.header-banner .download-items-code{width:220px;text-align:center}
.header-banner .download-items-code p{margin-bottom:10px;font-size:14px}
.header-banner .download-items-code img{width:170px}
.header-banner .right-slide .swiper-slide{transition:300ms;transform:scale(0.8);height:360px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 4px 15px rgb(0 0 0 / 75%)}
.header-banner .right-slide .swiper-slide-active,.header-banner .right-slide .swiper-slide-duplicate-active{transform:scale(1)}
.header-banner .right-slide .swiper-pagination-bullet-active{opacity:1;background:#26b2ff}

/* header-url */
.header-url{width:100%;max-width:480px;height:50px;margin:0 auto;color:#fff;display:flex;align-items:center;justify-content:center;background-color:rgba(29,29,29,.7);border-radius:25px}
.header-url h3{color:#26b2ff}
.header-url .p1{margin:0 20px;font-size:20px}
.header-url .p2{color:#B0ECFF;cursor:pointer}

/* floor sections */
.floor{padding:80px 0}
.floor .col{padding:0 15px}
.floor .col img{width:auto;max-width:100%}
.floor h3{margin-bottom:16px;font-size:32px;line-height:1.6;font-weight:bold;color:#fff}
.floor p{font-size:22px;line-height:1.5;color:rgba(255,255,255,.6)}
.floor1,.floor4{background-color:#26b2ff4f}
.floor3,.floor6{background-color:#1d1f23}
.floor4{padding:0}
.floor4 .img{padding-bottom:420px;text-align:right;position:relative}
.floor4 .img img{position:absolute;right:0;bottom:0}
.floor7{padding:50px 0 150px 0}
.floor7 .row{align-items:flex-start}
.floor7 .col:first-child{border-right:1px solid #534e4e6b}
.floor7 .floor7-title{margin-bottom:30px;color:#26b2ff;font-size:30px;font-weight:700;text-align:center}
.floor7 .floor7-m-title{margin-bottom:15px;display:flex;align-items:center;justify-content:center}
.floor7 .floor7-m-title .iconfont{margin-right:10px;font-size:54px;color:#26b2ff}
.floor7 .floor7-m-title h3{margin-bottom:5px;font-size:20px;color:#333}
.floor7 .floor7-m-title p{font-size:14px;color:#333}
.floor7 .floor7-content{text-align:center}

/* 响应式 */
@media(max-width:540px){
    .header-banner .left-text h2{font-size:26px}
    .header-banner .left-text p{font-size:16px}
    .header-banner .download-items-btn{width:100%;max-width:240px}
    .header-banner .download-items a{font-size:16px}
    .header-banner .download-items-code{display:none}
    .header-banner .right-slide .swiper-slide{height:200px}
    .header-url{max-width:300px;padding:20px 15px;text-align:center;height:auto;display:block;border-radius:10px}
    .header-url h3,.header-url .p1{margin-bottom:5px}
    .floor{padding:50px 0}
    .floor h3{margin-top:20px;font-size:25px;line-height:1.4}
    .floor p{font-size:18px}
    .floor7{padding:50px 0 50px 0}
    .floor7 .col:first-child{border:none}
    .row-reverse{flex-direction:column-reverse}
}
@media(min-width:540px){
    .container .col{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
}
@media(max-width:960px){
    .header-banner .left-text{margin-bottom:40px;text-align:center}
    .header-banner .download-items-btn{width:240px}
    .floor4{padding:50px 0}
    .floor4 .img{padding:0}
    .floor4 .img img{position:static}
}
@media(min-width:960px){
    .header-banner{display:flex;justify-content:space-between;align-items:center}
    .header-banner .left-text{padding-right:20px;-webkit-box-flex:0;-webkit-flex:0 0 40%;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}
    .header-banner .download-items-btn{margin-right:10px;flex:1}
    .header-banner .right-slide{-webkit-box-flex:0;-webkit-flex:0 0 60%;-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}
}
@media(min-width:1200px){
    .container{max-width:1170px}
}