@import url(font-awesome.css);

/* pc端 */
@media all and (min-width:768px){
    html{
        font-size: 100px;
        /* overflow-x:hidden; */
        font-family: 'Microsoft YaHei';
    }
    .container{
        width: 100%;
        min-width: 8.8rem;
    }
    .text-center{
        text-align: center;
    }
    .fa-angle-right {
        font-size: 0.16rem;
        margin-left: .04rem;
    }
    /* header */
    .head{
        display: none;
    }
    .header .header-top{
        height: .24rem;
        background-color: #ededed;
    }
    .header .header-text{
        width: 100%;
        height: 1.6rem;
        line-height: 1.6rem;
        background-color: #fff;
        color: #7c7b7b;
        font-size: .16rem;
        display: flex;
        display: -webkit-flex;
    }
    .header .header-text span{
        cursor: pointer;
    }
    .header .header-text .header-item{
        flex: 1;
    } 
    /* 主体内容 */
    .m-wrapper{
        display: none;
    }
    .wrapper{
        width: 100%;
        height: 9rem;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background:url(../images/bg.jpg) no-repeat center;
        animation: bgChange 2.5s ease 2.5s infinite alternate;
        -moz-animation: bgChange 2.5s ease 2.5s infinite alternate;	
        -webkit-animation:  bgChange 2.5s ease 2.5s infinite alternate;	
    }
    /* 背景图变换 */
    @keyframes bgChange
    {
    from {background:url(../images/bg.jpg) no-repeat center;}
    to {background:url(../images/bg1.jpg) no-repeat center;}
    }
    @-moz-keyframes bgChange 
    {
        from {background:url(../images/bg.jpg) no-repeat center;}
        to {background:url(../images/bg1.jpg) no-repeat center;}
    }
    @-webkit-keyframes bgChange 
    {
        from {background:url(../images/bg.jpg) no-repeat center;}
        to {background:url(../images/bg1.jpg) no-repeat center;}
    }

    .wrapper .content{
        display: flex;
        display: -webkit-flex;
        height: 9rem;
    }
    .wrapper .content .content-item{
        flex: 1;
        padding-top: 3.94rem;
        background-color:  rgba(0, 0, 0, .3);
        color: #fff;
        border-right: .02rem solid rgba(255, 255, 255, .14);
    }
    .wrapper .content .content-item p img{
        width: .58rem;
        height: .58rem;
    }
    .wrapper .content .content-item .content-item-text{
        margin-top: .9rem;
        margin-bottom: .2rem;
        font-weight: lighter;
        font-size: .34rem;
        z-index: 9;
    }
    .wrapper .content .content-item .content-item-supplement{
        font-size: .16rem;
        color: rgba(255, 255, 255, .6);
        display: none;
    }
    .wrapper .content .content-item .content-item-code{
        margin-top: .8rem;
    }
    .wrapper .content .content-item .content-item-code button{
        width: 1.06rem;
        height: .5rem;
        border-radius: .04rem;
        border: .01rem solid rgba(255, 255, 255, .6);
        background-color: rgba(0, 0, 0, .1);
        color: #fff;
        font-size: .16rem;
        font-weight: lighter;
    }
    /* footer */
    .footer{
        height: 1.18rem;
        line-height: 1.18rem;
        background-color: #ededed;
        font-size: .16rem;
        color: #9c9c9c;
    }
    /* 蒙层 */
    .popup{
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .popup .inner-box{
        width: 3.14rem;
        position: relative;
        margin: .7rem auto;
    }
    .popup .inner-box>img{
        width: 3.14rem;
        height: 4.18rem;
        margin-bottom: .24rem;
    }
    .popup .inner-box.contactBox{
        width: 5rem;
    }
    .popup .inner-box .contact{
        width: 5rem;
        height: 3rem;
    }
    .popup .inner-box .last{
        width: 3.14rem;
        height: 4.18rem;
        background-color: #fff;
        margin-bottom: .24rem;
    }
    .popup .inner-box .last .aboutUs{
        width: .92rem;
        height: 1.11rem;
        margin-top: .24rem;
        margin-bottom: .24rem;
    }
    .popup .inner-box .last .introduce{
        padding: 0 .2rem;
        text-align: left;
        line-height: .3rem;
    }
    .popup .inner-box p span{
        font-size: .5rem;
        font-weight: 100;
        color: #fff;
        cursor: pointer;
    }
}
/* 手机版 */
@media all and (max-width:767px){
    html{
        font-size: 100px;
        overflow-x:hidden;
        font-family: 'Microsoft YaHei';
    }
    .text-center{
        text-align: center;
    }
    /* header */
    .header {
        display: none;
    }
    .head{
        padding: .15rem .1rem .13rem;
        text-align: center;
    }
    .head .head-img{
        max-width: 100%;
    } 
    .head .head-text{
        height: .33rem;
        line-height: .33rem;
        font-size: .13rem;
        color: rgb(0, 0, 0);
        background-color: rgb(247, 247, 247);
        border-radius: .05rem;
        margin-top: .15rem;
    }
    .head .head-text .arrow{
        margin: 0 .24rem;
    }
    /* 主体内容 */
    .wrapper{
        display: none;
    }
    .m-wrapper{
        width: 94.6%;
        margin: 0 auto;
        height: 4.8rem;
        background-size: 100% 100%;
        background-image: url(../images/mbg.png);
        background-repeat: no-repeat;
    }
    .m-wrapper .m-wrapper-item{
        height: .94rem;
        border-bottom: .02rem solid rgba(255, 255, 255, .14);
    }
    .m-wrapper .m-wrapper-item .item{
        height: .94rem;
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .m-wrapper .m-wrapper-item .item .item-img{
        width: .29rem;
        height: .29rem;
        line-height: .29rem;
        margin-left: .15rem;
        margin-right: .12rem;
    }
    .m-wrapper .m-wrapper-item .item-img img{
        width: .29rem;
        height: .29rem;
    }
    .m-wrapper .m-wrapper-item .item-text{
        font-size: .22rem;
        color: rgb(255, 255, 255);
        margin-right: .5rem;
        width: 14.6rem;
    }
    .m-wrapper .m-wrapper-item .item-text .item-supplement{
        font-size: .12rem;
        color: rgba(255, 255, 255, .8);
    }
    .m-wrapper .m-wrapper-item .item-code{
        padding-right: .17rem;
    }
    .m-wrapper .m-wrapper-item .item-code button{
        width: .8rem;
        height: .28rem;
        border-radius: .04rem;
        border: .01rem solid rgba(255, 255, 255, .6);
        background-color: transparent;
        color: rgb(255,255,255);
        font-size: .12rem;
    }
    /* footer */
    .footer{
        height: .45rem;
        line-height: .45rem;
        background-color: #ededed;
        font-size: .08rem;
        color: rgb(156, 156, 156); 
    }
    /* 蒙层 */
    .popup{
        display: none;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .popup .inner-box{
        width: 3.14rem;
        position: relative;
        margin: .7rem auto;
    }
    .popup .inner-box>img{
        width: 3.14rem;
        height: 4.18rem;
        margin-bottom: .24rem;
    }
    .popup .inner-box.contactBox{
        width: 3.3rem;
    }
    .popup .inner-box .contact{
        width: 3.3rem;
        height: 2.04rem;
    }
    .popup .inner-box .last{
        width: 3.14rem;
        height: 4.18rem;
        background-color: #fff;
        margin-bottom: .24rem;
    }
    .popup .inner-box .last .aboutUs{
        width: .92rem;
        height: 1.11rem;
        margin-top: .24rem;
        margin-bottom: .24rem;
    }
    .popup .inner-box .last .introduce{
        padding: 0 .2rem;
        text-align: left;
        line-height: .3rem;
    }
    .popup .inner-box p span{
        font-size: .5rem;
        font-weight: 100;
        color: #fff;
        cursor: pointer;
    }
}