*{
    margin:0;
    padding:0;
}
html{
    font-size:20px;
}
a{
    text-decoration: none;
}
body{
    width:100%;
}
/* 头部布局 */
.top-app{
    width:100%;
    /* height:31.1rem; */
    height:27.5rem;
    /*background-image:url(${ctxStatic}/images/app/headbg.png);*/
    background-size: 100% 100%;
    background-repeat:no-repeat;
    position: relative;
}
.top-header{
    width:100%;
    /* height:3.6rem; */
    /* background-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.36) 100%); */
}
.top-header-wrap{
    position: relative;
    width:50rem;
    width:48rem;
    height:100%;
    margin:0 auto;
}
.top-header-wrap .top-header-left{
    position: absolute;
    left:0;
    top:0.7rem;
}
.top-header-wrap .top-header-left .logo{
    width:2.2rem;
    height:2.2rem;
}
.top-header-wrap .top-header-center{
    position: absolute;
    left:2.7rem;
    top:50%;
    transform: translateY(-50%);
}
.top-header-wrap .top-header-center .title{
    font-size: 1.1rem;
    line-height: 1.3rem;
    color: #ffffff;
}
.top-header-wrap .top-header-center .detail{
    font-size: 0.6rem;
    line-height: 0.7rem;
    color: #ffffff;
}
.top-content{
    position: relative;
    width:48rem;
    height:27.5rem;
    margin:0 auto;
}
.top-content-left{
    position: absolute;
    left:1rem;
    top:2.4rem;
}
.top-content-left .headphone{
    width: 18.3rem;
    height: 29.5rem;
    display: inline-block;
}
.top-content-right{
    position:absolute;
    top:7.6rem;
    left:24.45rem;
    width:19.85rem;
}
.top-content-right .title{
    font-size: 2.7rem;
    line-height: 2.7rem;
    margin-bottom:1.05rem;
    color: #ffffff;
}
.top-content-right .detail{
    font-size: 1.7rem;
    line-height: 1.7rem;
    margin-bottom:3.05rem;
    color: #ffffff;
}
.top-content-right .android-download{
    width: 12rem;
    height: 3rem;
    font-size: 1.3rem;
    color: #ffffff;
    line-height: 3rem;
    border-radius: 1.5rem;
    margin-bottom:1.45rem;
    padding-left:3.05rem;
    box-sizing: border-box;
    background: url('../images/anzhuo.png') no-repeat 0.9rem center;
    background-size:1.6rem 1.85rem;
    background-color: #09d5db;
}
.top-content-right .iphone-download{
    width: 12rem;
    height: 3rem;
    font-size: 1.3rem;
    color: #ffffff;
    line-height: 3rem;
    border-radius: 1.5rem;
    padding-left:3.4rem;
    box-sizing: border-box;
    background: url('../images/ios.png') no-repeat 1.3rem center;
    background-size:1.45rem 1.6rem;
    border:1px solid #ffffff;
}
.top-content .code{
    position:absolute;
    right:1.8rem;
    top:14.8rem;
    width:8.3rem;
    height:8.3rem;
    padding:0.45rem;
    box-sizing: border-box;
    background-color: #ffffff;
    text-align: left;
}
.code .erweima{
    display: inline-block;
    width: 100%;
    height:100%;
    border-radius: 0.4rem;
}
.code .title{
    width:8.3rem;
    font-size: 1.1rem;
    line-height: 2;
    color: #ffffff;
    margin-left:0.1rem;
}
/* main布局 */
.main{
    width:100%;
    margin-top:4rem;
}
.main-wrap{
    width:50rem;
    width:48rem;
    margin:0 auto;
}
/* 图在右边的布局 */
.main-type1{
    display: flex;
    align-items: center;
    justify-content: center;
    width:52.4rem;
    width:100%;
    height:26rem;
    margin:0 auto;
    padding-left:0.3rem;
    padding-right:0.3rem;
    box-sizing: border-box;
    /*overflow: auto;*/
    position: relative;
}
.main-type1 .left{
    flex:1;
    width:50%;
    float:left;
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
.main-type1 .left .title{
    font-size: 2.5rem;
    line-height: 1;
    color: #086cf5;
    border-left:0.3rem solid #086cf5;
    padding-left:1.45rem;
    margin-bottom:1.55rem;
    box-sizing:border-box;
}
.main-type1 .left .detail{
    font-size: 1.4rem;
    line-height: 1.95rem;
    color: #7f7f7f;
    letter-spacing: 0px;
}
.main-type1 .right{
    width:50%;
    text-align: right;
    float:right;
    position:absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
.main-type1 .right .img{
    display: inline-block;
}
/* 图在左边的布局 */
.main-type2{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:26rem;
    margin:0 auto;
    padding-left:0.3rem;
    padding-right:0.3rem;
    box-sizing: border-box;
    position: relative;
}
.main-type2 .left{
    width:50%;
    text-align: left;
    float:left;
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
.main-type2 .left .img{
    display: inline-block;
}
.main-type2 .right{
    flex:1;
    text-align: right;
    width:50%;
    float:right;
    position:absolute;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
.main-type2 .right .title{
    font-size: 2.5rem;
    line-height: 1;
    color: #086cf5;
    border-right:0.3rem solid #086cf5;
    padding-right:1.45rem;
    margin-bottom:1.55rem;
    box-sizing:border-box;
}
.main-type2 .right .detail{
    font-size: 1.4rem;
    line-height: 1.95rem;
    color: #7f7f7f;
    letter-spacing: 0px;
}
/* 图片大小 */
.main .img1{
    width:20.1rem;
    height:22rem;
}
.main .img2{
    width:21.45rem;
    height:20.75rem;
}
.main .img3{
    width:24.25rem;
    height:20.6rem;
}
.main .img4{
    width:21.45rem;
    height:23.45rem;
}
.main .img5{
    width:24.25rem;
    height:22.9rem;
}
.main .img6{
    width:24.25rem;
    height:20.6rem;
}
.main .img7{
    width:21.45rem;
    height:21.25rem;
}
.main .img8{
    width:21.45rem;
    height:17.4rem;
}
a:link, a:visited {
    text-decoration: none;
    /*color: #333;*/
    outline: none;
}
a:hover {
    /*color: rgb(255, 0, 0);*/
    outline: none;
}