/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: ie >= 8,last 4 versions
*/

.w100 {
    width: 100%;
}
.w90 {
    width: 90%;
}
.h100 {
    height: 100%;
}
.auto-height-equal-width-100 {
    padding-bottom: 100%;
    width: 100%;
    position: relative;
}
.auto-height-equal-height-50 {
    /* padding-right: 50%; */
    width: 100%;
    height: 23%;
    position: relative;
}
.download-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.download-container .phone {
    width: 1px;
    /* 利用padding的百分比是根据父容器宽度来计算这个特点，可以变相做出纯css情况下容器自身的高和宽按自定义比例自动、适配 */
    padding-bottom: 40%;
    background: #FAFBFD;
    /* border: 1px solid #DADADA; */
    border-radius: 30px;
    position: relative;
}
.download-container .phone .phone-screen{
    position: absolute;
    top: 10%;
    left: 5%;
    height: 80%;
    background: #FAFBFD;
    border: 1px solid #DADADA;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
.phone .phone-screen .qrcode{
    background: url(../images/download/code.png) no-repeat center / 100%;
    position: relative;
    width: 70%;
    padding-bottom: 70%;
}
.phone .phone-screen .logo {
    width: 35%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.download-container .platforms-container {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-left: 3%;
    padding-top: 2em;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.download-container .platforms {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    padding-top: 1em;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    box-sizing: border-box;
}
.download-container .platforms .platform {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding-right: 20px;
}
.platform .box {
    border: 1px solid #DADADA;
    border-radius: 2px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    cursor: pointer;
}
.platform .box .box-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 20%;
    z-index: 1;
}
.platform .box .box-content.hover {
    display: none;
}
.platform .box:hover .box-content.hover {
    display: block;
    z-index: 10;
    background-color: #F1F3F5;
    font-size: 70%;
    padding-top: 16%;
}
.platform .box:hover .box-content.hover.mobile {
    padding-top: 9%;
}
.platform .box:hover .box-content.hover.special{
    padding-top:0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    background-color: #fff;
}
.platform .box:hover .box-content.hover.special a{
    flex:1;
    margin-bottom: 3%;
    border: 1px solid #DADADA;
    background-color:  #F1F3F5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.platform .box:hover .box-content.hover.special a:last-child{
    margin-bottom:0;
}
.platform .box:hover .box-content.hover.special a img{
    flex:1;
}
.platform .box:hover .box-content.hover.special a div{
   flex:1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}
.boxhover{
    border: 1px  solid #fff!important;
}

.lightwan_title{
    font-size: 24px;
    color: #3A3F3B;
    letter-spacing: 0;
    line-height: 33px;
    font-weight: 500;
    margin-top: 72px;
    margin-bottom: 49px;
}
.lightwan_title.opt_title{
    margin-top: 49px;
}
.lightwan_title span{
    color: #007BFF;
}
.download-container .platforms-container.lightwan_tip{
    padding-top: 0;
    padding-left: 0;
    flex: 1;
    height: 126px;
    display: flex;
    margin-bottom: 18px;
}
.download-container .platforms-container p.client_text{
    font-size: 12px;
    color: #999999;
    letter-spacing: 0;
    font-weight: 400;
}
.download-container .platforms-container.lightwan_tip article{
    margin: auto 0;
}
.download-container .platforms .opt.platform{
    padding-left: 37px;
}
.opt.platform .lightwan_client{
    height: 126px;
}
.opt.platform .lightwan_client .box-content{
    padding-top: 0;
    line-height: 126px;
    position: relative;
}
.opt.platform .lightwan_client .box-content:hover{
    background: #F1F3F5;
}
.opt.platform .lightwan_client .box-content .qrcode{
    display: none;
}
.opt.platform .lightwan_client .box-content:hover .client{
    display: none;
}
.opt.platform .lightwan_client .box-content:hover .qrcode{
    display: inline-block;
    margin-left: -23px;
    background-color: white;
}
.opt.platform .lightwan_client .box-content .client_img{
    display: inline-block;
    position: absolute;
    left: 25%;
}
.opt.platform .lightwan_client .box-content .client_text{
    display: inline-block;
    font-size: 18px;
    color: #999999;
    letter-spacing: 0;
    font-weight: 500;
    position: absolute;
    left: 60%;
}