/*
* 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;
}
.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.svg) 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%;
}
.navbar-page > nav a .icon-my-notice-normal {
    background: url("./../iconfont/notice_normal.svg") center center no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    line-height: 1;

  }
  .navbar-page > nav a .icon-my-notice-normal::before{
    content: "\8d3a";
    font-size: 20px;
    visibility: hidden;
  }
  .navbar-page > nav .notice:hover .icon-my-notice-normal{
    background: url("./../iconfont/notice_hover.svg") center center no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }
  .notice_content{
    text-indent: 3rem;
    line-height: 1.8;
  }