/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2018-12-15, 22:10:11
    Author     : yeqile
*/

* {
    margin: 0;
    padding: 0;
    font-family: 'Hiragino Sans GB', 'Microsoft Yahei', 微软雅黑, "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;

}
.page{
    position: relative;
    width: 100%;
    min-width: 80rem;
    background-color: white;
}
.pageview{
    position: relative;
    margin: 0 auto;
    min-width: 30rem;
    min-height: 2rem;
}
.pageview > .content {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.bigtitle{
    position: absolute;
    top: 5.416rem;
    width: 100%;
    height: 1.333rem;
    text-align: center;
}

.subtitle {
    position: absolute;
    top: 9.25rem;
    width: 100%;
    height: auto;
    font-size: 0.8333rem;
    line-height: 1.2rem;
    color: #444444;
    text-align: center;
}
.bigtitlestyle{
    vertical-align: top;
    position: relative;
    display: inline-block;
    width: 7.292rem;
    height: 1.333rem;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.bigtitlestyle.left1{
    background-image: url(../imgs/title-left1.png);
}
.bigtitlestyle.left2{
    background-image: url(../imgs/title-left2.png);
}
.bigtitlestyle.right1{
    background-image: url(../imgs/title-right1.png);
}
.bigtitlestyle.right2{
    background-image: url(../imgs/title-right2.png);
}
.bigtitlestyle.text1{
    height: 1.333rem;
    line-height: 1.333rem;
    width: auto;
    font-size: 1.25rem;
    color: #4fa2ff;
    white-space : nowrap;
}
.bigtitlestyle.text2{
    height: 1.333rem;
    line-height: 1.333rem;
    width: auto;
    font-size: 1.25rem;
    color: #ffffff;
    white-space : nowrap;
}
/* 顶部栏区域样式 */
.top{
    background-color: white;
}
.top > .content{
    width: 50rem;
    height: 4rem;
}
.logo-area{
    position: absolute;
    left: 0;
    top: 0;
    width: 7.25rem;
    height: 4rem;
}
.logo-img{
    position: absolute;
    left: 0;
    top: 1rem;
    width: 7.25rem;
    height: 2.08rem;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../imgs/logo.png);
}
.topmenu{
    position: absolute;
    right: 0;
    top: 1rem;
    width: 100%;
    height: 2.08rem;
}
.topmenu > .reltopmenu {
    position: relative;
    display: inline-block;
    height: 2.08rem;
    float: right;
}
.topmenu-item{
    position: relative;
    display: inline-block;
    float: right;
    font-size: 0.67rem;
    line-height: 2.08rem;
    margin-left: 2.25rem;
    cursor: pointer;
}
.topmenu-item > .item-text{
    color: #333333;
}
.topmenu-item.highlight > .item-text{
    color: #4fa2ff;
    font-weight: bold;
}
.item-sline{
    position: absolute;
    top: 1.833rem;
    width: 100%;
    height: 0.125rem;
    background-color: #4fa2ff;
    border-radius: 0.083rem;
}
.topmenu-item > .item-sline{
    display: none;
}
.topmenu-item.highlight > .item-sline{
    display: inline-block;
}
/* banner 区域样式 */
.banners > .content{
    width: 100%;
    min-width: 80rem;
    height: 30rem;
}
.bannerleftbg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    background-color: #091c47;
    width: 50%;
    height: 100%;
}
.bannerrightbg{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    background-color: #00367c;
    width: 50%;
    height: 100%;
}
.bannermain{
    position: relative;
    margin: 0 auto;
    width: 80rem;
    height: 30rem;
    overflow: hidden;
    background-image: linear-gradient(90deg, 
        #091c47 0%, 
        #00367c 100%);
}
/*.swipers{
    position: absolute;
    width: 80rem;
    height: 30rem;
    overflow: hidden;
    margin: 0;
    background-color: transparent;
}*/
.swipers * {
    background-color: transparent;
}

/*.swiper-container{
    width: 100%;
    min-width: 80rem;
    height: 30rem;
}*/

/*.siwper-slide{
    background-color: transparent;
    position: relative;
    margin: 0 auto;
    width: 100%;
}*/

#swiper1{
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    width: 100%;
    min-width: 80rem;
    height: 30rem;
    color: white;
    font-size: 4rem;
}

.siwper-inner-content{
    position: relative;
    margin: 0 auto;
    width: 80rem;
    height: 30rem;
    font-size: 0;
}

.swiper-intro-area{
    position: relative;
    top: 7.7rem;
    height: auto;
    padding-left: 15rem;
    width: 65rem;
    text-align: left;
    color: white;
}

.swiper-intro-area span.highlight{
    color: #21f0ff;
}


.s1{
    position: relative;
}

.banner-bigtitle{
    font-size: 2rem;
    line-height: 2.3rem;
}

.banner-smalltitle{
    font-size: .8rem;
}
.banner-smalltitle.s1{
    margin-top: 2.7rem;
    margin-bottom: 2.9rem;
}

.banner-btntitle{
    text-align: center;
    width: 8.5rem;
    height: 2.1rem;
    border-radius: .3rem;
    border: solid 1px #ffffff;
    line-height: 2.1rem;
    font-size: .8rem;
}
.banner-img{
    position: absolute;
    top: 3rem;
    right: 10.7rem;
    bottom: 0rem;
    width: 40rem;
    background-position: right top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.swiper-container{
    position: relative;
    width: 100%;
    min-width: 80rem;
}

.banner-img.s1{
    background-image: url(//cdn.utaplus.cn/utaplus/imbanner1-fs8.png);
}
.banner-img.s2{
    background-image: url(//cdn.utaplus.cn/utaplus/imbanner2-fs8.png);
}
.banner-img.s3{
    background-image: url(//cdn.utaplus.cn/utaplus/imbanner3-fs8.png);
}
.banner-img.s4{
    background-image: url(//cdn.utaplus.cn/utaplus/imbanner4-fs8.png);
}

/*  我们能做什么 */
.wecando{
    background-color: #f4f4f4;
}
.wecando > .content{
    width: 80rem;
    height: 28rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../imgs/wecando-bg.jpg);
}
.wecando .main-icons{
    position: absolute;
    top: 15rem;
    width: 100%;
    text-align: center;
    height: 6.7rem;
}
.wecando-icon{
    vertical-align: top;
    display: inline-block;
    position: relative;
    width: 7rem;
    text-align: center;
    height: 6.7rem;
    margin: 0 3.5rem;
}
.icon-img{
    position: relative;
    margin: 0 auto;
    width: 4.875rem;
    height: 4.875rem;
    white-space : nowrap;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.hover > .icon-img{
    display: none;
}

.icon-img.highlight{
    display: none;
}

.hover > .icon-img.highlight{
    display: block;
}



.icon-text{
    position: absolute;
    bottom: 0rem;
    line-height: 0.833rem;
    font-size: 0.833rem;
    width: 7rem;
    height: 0.833rem;
    color: #333333;
}

.hover > .icon-text{
    color: #4fa2ff;
}

.solutions{
    background-color: #eeeeee;
}
.solutions > .content{
    width: 80rem;
    height: 39.25rem;
}

.cube-area{
    position: absolute;
    width: 80rem;
    height: 28.333rem;
    bottom: 0;
}
.cube-left{
    display: inline-block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32rem;
    height: 28.332rem;
}
.cube-right{
    display: inline-block;
    position: absolute;
    left: 32rem;
    bottom: 0;
    width: 48.1rem;
    height: 28.332rem;
    font-size: 0;
}
.cube-box{
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
    background-color: #333333;
}

.cube-box.big{
    width: 100%;
    height: 100%;
}

.cube-box.small{
    width: 16rem;
    height: 50%;
}
.cube-box-bg{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.cube-inner{
    position: absolute;
    left: 0.667rem;
    top: 0.667rem;
    right: 0.667rem;
    bottom: 0.667rem;
    border: solid 1px #aaaaaa;
}
.cube-inner > .cube-text{
    position: absolute;
    bottom: 0.7rem;
    left: 0.583rem;
    right: 0.583rem;
    height: auto;
    font-size: 0.833rem;
    font-weight: bold;
    line-height: 1.25rem;
    color: #ffffff;
}

.big .cube-inner > .cube-text{
    font-size: 1.25rem;
    line-height: 2rem;

}

.friends{
    background-color: #fbfbfb;
}

.friends > .content{
    width: 80rem;
    height: 20.875rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../imgs/friends-bg.jpg);
}

.company{
    background-color: #ebebeb;
}
.company > .content {
    width: 80rem;
    min-height: 12rem;
    height: auto;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url(../imgs/company-bg.jpg);
}
.company-icons{
    position: relative;
    padding-top: 9.375rem;
    width: 80rem;
    height: auto;
    font-size: 0; /* 清除多餘的空隙 */
}

.company-icon{
    vertical-align: top;
    position: relative;
    display: inline-block;
    width: 11.3rem;
    height: 3rem;
    margin-bottom: 2rem;
    text-align: center;
}
.company-bottom{
    position: relative;
    width: 80rem;
    height: 1rem;
}

.company-icon > .on,
.company-icon > .off{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.company-icon > .on{
    display: none;
}
.company-icon > .off{
    display: inline-block;
}
.company-icon:hover > .on{
    display: inline-block;
}
.company-icon:hover > .off{
    display: none;
}

.greyline{
    position: absolute;
    top: 0.625rem;
    width: 1px;
    height: 1.75rem;
    background-color: #cccccc;
}
.company-icon.as-line:nth-child(7n){
    display: none;
}

.floating-tags{
    position: absolute;
    top: -4.7rem;
    text-align: center;
    width: 80rem;
    height: auto;
}

.floating-tag{
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 16.25rem;
    height: 9.167rem;
    margin-left: 0.625rem;
    margin-right: 0.625rem;
    background-color: #ffffff;
    box-shadow: 0px 7px 9px 1px 
        rgba(0, 0, 0, 0.1);
}

.floating-area1{
    position: relative;
    height: 3.125rem;
    top:3.042rem;
    display: inline-block;
    width: auto;

}


.floating-img1{
    position: relative;
    width:3.417rem;
    height: 3.125rem;
    display: inline-block;
    vertical-align: top;


}

.floating-null{
    position: relative;
    width:1.25rem;
    height: 3.125rem;
    display: inline-block;
    vertical-align: top;
}

.floating-fullimg1{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.floating-num1{
    position: relative;
    display: inline-block;
    height: 1.542rem;
    width: auto;
    text-align: center;
    line-height: 1.542rem;
    font-size: 1.542rem;
    vertical-align: top;
    float: right;
    top:0.125rem;
    color: #666666;
    font-weight:400;
}

.floating-text1{
    position: relative;
    height: 0.5rem;
    font-size: 0.5rem;
    width: auto;
    text-align: center;
    line-height: 0.5rem;
    vertical-align: top;
    top:0.65rem;
    color:#b0b0b0;

}

.floating-area2{
    position: relative;
    height: 2.875rem;
    top:3.167rem;
    display: inline-block;
    width: auto;

}


.floating-img2{
    position: relative;
    width:4rem;
    height: 2.875rem;
    display: inline-block;
    vertical-align: top;


}


.floating-fullimg2{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.floating-null2{
    position: relative;
    width:1.208rem;
    height: 2.875rem;
    display: inline-block;
    vertical-align: top;
}

.floating-num2{
    position: relative;
    display: inline-block;
    height: 1.542rem;
    width: auto;
    text-align: center;
    line-height: 1.542rem;
    font-size: 1.542rem;
    vertical-align: top;
    float: right;
    top:0.125rem;
    color: #666666;
    font-weight:400;
}

.floating-text2{
    position: relative;
    height: 0.5rem;
    font-size: 0.5rem;
    width: auto;
    text-align: center;
    line-height: 0.5rem;
    vertical-align: top;
    top:0.65rem;
    color:#b0b0b0;

}


.floating-area3{
    position: relative;
    height: 2.875rem;
    top:3.167rem;
    display: inline-block;
    width: auto;

}


.floating-img3{
    position: relative;
    width:4rem;
    height: 2.875rem;
    display: inline-block;
    vertical-align: top;


}


.floating-fullimg3{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.floating-null3{
    position: relative;
    width:1.208rem;
    height: 2.875rem;
    display: inline-block;
    vertical-align: top;
}

.floating-num3{
    position: relative;
    display: inline-block;
    height: 1.542rem;
    width: auto;
    text-align: center;
    line-height: 1.542rem;
    font-size: 1.542rem;
    vertical-align: top;
    float: right;
    top:0.125rem;
    color: #666666;
    font-weight:400;
}

.floating-text3{
    position: relative;
    height: 0.5rem;
    font-size: 0.5rem;
    width: auto;
    text-align: center;
    line-height: 0.5rem;
    vertical-align: top;
    top:0.65rem;
    color:#b0b0b0;

}

.floating-mun-sup{
    position: relative;
    vertical-align:super;
    font-size:0.5rem;
    top:-0.5rem;
    left:-0.125rem;
}
.aboututa > .content{
    width: 100%;
    min-width: 80rem;
    height: 27.5rem;
}
.aboututaleftbg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    background-color: rgb(7, 45, 100);
    width: 50%;
    height: 100%;
}
.aboututarightbg{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    background-color: rgb(17, 31, 67);
    width: 50%;
    height: 100%;
}
.aboututamain{
    position: relative;
    margin: 0 auto;
    width: 80rem;
    height: 27.5rem;
    background-image: url(../imgs/aboututabg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.aboututa-menu{
    position: absolute;
    left: 17.5rem;
    top: 10rem;
    width: 8.33rem;
    height:  auto;
    background-color: rgba(9, 28, 71, 0.7);
    font-size: 0;
    text-align: center;
}

.aboututa-menu > .menu-item{
    position: relative;
    width: 8.33rem;
    height: 2.9rem;
}
.aboututa-menu > .menu-item > .menu-selected-bg,
.aboututa-menu > .menu-item > .menu-item-text {
    position: absolute;
    width: 8.33rem;
    height: 2.9rem;
    left: 0;
    top: 0;
}

.menu-item-text{
    color: white;
    font-size: 0.667rem;
    line-height: 2.9rem;
}
.menu-selected-bg{
    display: none;
    background-color: #4fa2ff;
}


.aboututa-menu > .menu-item-line {
    position: relative;
    margin: 0 auto;
    width: 7.5rem;
    height: 1px;
    background-color: #00367c;
    color: white;
}

.menu-item-line > span{
    font-size: 0;
}

.aboututa-texts{
    position: absolute;
    width: 32rem;
    height: auto;
    left: 31rem;
    top: 12rem;
}
.aboututa-text {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    color: white;
    line-height: 1rem;
    font-size: 0.5833rem;
    text-align: left;
}

.aboututa-text > p{
    text-indent: 2em;
    margin-bottom: 2em;
}

.contact > .content{
    width: 100%;
    height: 20.2rem;
    background-repeat: repeat-x;
    background-size: 80rem auto;
    background-image: url(../imgs/contactusbg.jpg);
}

.contact-lefts{
    position: absolute;
    width: auto;
    height: auto;
    left:15rem;
    top:13.083rem;
}

.contact-text{
    position: relative;
    color: #333333;
    font-size: 0.583rem;
    margin-bottom:0.833rem;
    width: auto;
}

.contact-mids{
    position: relative;
    text-align: center;
    vertical-align: top;
    top:13.083rem;
    width: auto;
    height: auto;

}

.contact-company{
    position: absolute;
    width: auto;
    height: auto;
    left:15rem;
    margin-top:10.917rem;

}

.contact-rights{
    position: absolute;
    width: auto;
    height: auto;
    right:15rem;
    margin-top: 12.125rem;

}

.contact-twocodeimg{
    position: relative;
    width: 4.167rem;
    height: 4.167rem;
    background-color: blue;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url();
    display:inline-block;
    vertical-align:top;
    top:0
}



/*  游戏服务体系banner区域 */

.sec-banners > .content{
    width: 100%;
    min-width: 80rem;
    height: 18.9rem;
}
.sec-bannerleftbg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    background-color: rgb(29, 56, 118);
    width: 50%;
    height: 100%;
}
.sec-bannerrightbg{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    background-color: rgb(3, 65, 145);
    width: 50%;
    height: 100%;
}
.sec-bannermain{
    position: relative;
    margin: 0 auto;
    width: 80rem;
    height: 18.9rem;
    background-color: #f6f6f6;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../imgs/blueflow-bg1.jpg);
}
.main-title, .main-subtitle{
    position: absolute;
    width: 100%;
    text-align: center;
}

.sec-bannermain > .main-title{
    top: 5.8rem;
    font-size: 2.1rem;
    color: white;
}

.sec-bannermain > .main-subtitle{
    top: 10.3rem;
    font-size: .8rem;
    line-height: 1.2rem;
    color: white;
}

/* 我们的服务 */
.ourservice{
    background-color: #f6f6f6;
}

.ourservice > .content{
    width: 80rem;
    height: 36.8rem;
    background-image: url(../imgs/ourservice-bg.jpg);
    background-size: 100% auto;
    background-position: bottom;
    background-repeat: no-repeat;
}

.ourservice-cards {
    position: absolute;
    bottom: 9.2rem;
    width: 80rem;
    height: 14.7rem;
    font-size: 0;
    text-align: center;
}

.ourservice-card {
    vertical-align: top;
    display: inline-block;
    position: relative;
    margin: 0;
    margin-right: 0.7rem;
    text-align: left;
    width: 9.4rem;
    height: 14.7rem;
    background-color: white;
    border-radius: 0.4rem;
    border: solid 0px #deecff;
    color: #999999;
    font-size: .6rem;
    line-height: 1rem;
    cursor: pointer;
}


.ourservice-card > .card-body{
    background-color: white;
    position: absolute;
    top: .4rem;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
}

.ourservice-cards > .ourservice-card:last-child{
    margin-right: 0;
}

.ourservice-cards > .ourservice-card:nth-child(5n+1) {
    background-image: linear-gradient(90deg, 
        #65a5ff 0%, 
        #4748fe 100%);
}
.ourservice-cards > .ourservice-card:nth-child(5n+2) {
    background-image: linear-gradient(90deg, 
        #00ec82 0%, 
        #00b7bb 100%);
}
.ourservice-cards > .ourservice-card:nth-child(5n+3) {
    background-image: linear-gradient(90deg, 
        #ffc68e 0%, 
        #f19f4d 100%);
}
.ourservice-cards > .ourservice-card:nth-child(5n+4) {
    background-image: linear-gradient(90deg, 
        #faa8c4 0%, 
        #f04982 100%);
}
.ourservice-cards > .ourservice-card:nth-child(5n) {
    background-image: linear-gradient(90deg, 
        #41b4fc 0%, 
        #338dfb 100%);
}

.card-title-area{
    position: absolute;
    top: 3rem;
    left: 1.4rem;
    right: 0rem;
    height: auto;
}
.card-icon{
    position: relative;
    height: 1.6rem;
    width: 100%;
    background-size: contain;
    background-position: left top;
    background-repeat: no-repeat;    
}

.card-title-text{
    position: relative;
    white-space: nowrap;
    margin-top: .7rem;
    margin-bottom: .3rem;
    color: #444444;
    font-size: .8rem;
    height: .9rem;
    line-height: 1rem;
}

.ourservice-card:hover .card-title-text{
    color:  #4fa2ff;
}

.card-title-line{
    position: relative;
    width: 2.6rem;
    height: .2rem;
    background-color: #cccccc;
}
.ourservice-card:hover .card-title-line{
    background-color: #65a5ff;

}

.ourservice-card .card-icon.off{
    display: block;
}

.ourservice-card .card-icon.on{
    display: none;
}
.ourservice-card:hover .card-icon.off{
    display: none;
}
.ourservice-card:hover .card-icon.on{
    display: block;
}

.card-desc-area{
    position: absolute;
    top: 8.5rem;
    left: 1.3rem;
    right: 1rem;
    height: auto;
    font-size: .6rem;
    text-align: left;
    line-height: 1rem;
}

.ourservice-footer{
    position: absolute;
    bottom: 4.2rem;
    width: 80rem;
    height: 1.8rem;
}

.ourservice-more-button{
    position: relative;
    height: 1.8rem;
    line-height: 1.8rem;
    background-image: linear-gradient(90deg, 
        #418fe7 0%, 
        #63d0ef 100%), 
        linear-gradient(90deg, 
        #63d0ef 0%, 
        #418fe7 100%);
    background-blend-mode: normal, 
        normal;
    border-radius: .3rem;
    color: white;
    font-size: .7rem;
    line-height: 1.8rem;
    text-align: center;
    white-space: nowrap;
    padding: 0 1.3rem;
    max-width: 20rem;
    /* 宽度根据内容自适应 */
    width:fit-content;
    width:-webkit-fit-content;
    width:-moz-fit-content;
    cursor: pointer;
}

.ourservice-more-button:hover{
    opacity: 0.8;
}

.servicemodel{
    background-color: white;
}

.servicemodel > .content{
    width: 60rem;
    height: 28.5rem;
}

.servicemodel-cards{
    position: absolute;
    width: 100%;
    height: 8.4rem;
    text-align: center;
    font-size: 0;
    bottom: 6.3rem;
}

.servicemodel-card{
    position: relative;
    vertical-align: top;
    display: inline-block;
    width: 12.1rem;
    height: 8.4rem;
    margin-right: .5rem;
    border-radius: .4rem;
    background-color: black;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.servicemodel-cards > .servicemodel-card:last-child{
    margin-right: 0;
}

.servicemodel-inner-border{
    position: absolute;
    left: 2.7rem;
    right: 2.7rem;
    top: 2.5rem;
    bottom: 2.5rem;
    background-color: transparent;
}

.servicemodel-card-title{
    position: absolute;
    left: 3rem;
    right: 3rem;
    top: 3rem;
    bottom: 3rem;
    text-align: center;
    line-height: 1.2rem;
    font-size: .8rem;
    color:white;
    white-space: nowrap;
}

.corner-style-lt, .corner-style-lb, .corner-style-rb, .corner-style-rt{
    width: .7rem;
    height: .7rem;
    position: absolute;
}

.corner-style-lt{
    left: 0;
    top: 0;
    border-top-left-radius: 4px;
    border-left: 1px solid white;
    border-right: none;
    border-top: 1px solid white;
    border-bottom: none;
}

.corner-style-rt{
    right: 0;
    top: 0;
    border-top-right-radius: 4px;
    border-left: none;
    border-right: 1px solid white;
    border-top: 1px solid white;
    border-bottom: none;
}

.corner-style-lb{
    left: 0;
    bottom: 0;
    border-bottom-left-radius: 4px;
    border-left: 1px solid white;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid white;
}

.corner-style-rb{
    right: 0;
    bottom: 0;
    border-bottom-right-radius: 4px;
    border-left: none;
    border-right: 1px solid white;
    border-top: none;
    border-bottom: 1px solid white;
}


.servicebars > .content{
    width: 100%;
    min-width: 80rem;
    height: 24.1rem;
}
.servicebarsleftbg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    background-color: rgb(9, 28, 71);
    width: 50%;
    height: 100%;
}
.servicebarsightbg{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    background-color: rgb(0, 54, 124);
    width: 50%;
    height: 100%;
}
.servicebarsmain{
    position: relative;
    margin: 0 auto;
    width: 80rem;
    height: 24.1rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../imgs/blueflow-bg2.jpg);
}
.servicebar-cards{
    position: absolute;
    top: 3.2rem;
    width: 100%;
    font-size: 0;
    text-align: center;
    height: 15.1rem;
}

.servicebar-card{
    vertical-align: top;
    position: relative;
    display: inline-block;
    width: 24rem;
    height: 15.1rem;
    border-radius: .4rem;
    background-color: white;
    margin-right: 2rem;
}

.servicebar-card:last-child{
    margin-right: 0;
}
.servicebar-card-row{
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
}

.sb-icon-img{
    top: 3.3rem;
    height: 1.8rem;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left bottom;
}

.sb-desc-text{
    top: 6.5rem;
    height: auto;
    font-size: 1.1rem;
    line-height: 1.2rem;
    color: #222222;
    white-space: nowrap;
    text-align: left;
}

.sb-href-link{
    top: 11.4rem;
    font-size: .7rem;
    line-height: .7rem;
    height: .7rem;
    color: #666666;
    cursor: pointer;
    white-space: nowrap;
    text-align: left;
}

.sb-href-link:hover{
    color: #4fa2ff;
}

.contactinfo-cards{
    position: absolute;
    bottom: 3.5rem;
    height: 6rem;
    width: 100%;
    font-size: 0;
    text-align: center;
}

.contactinfo-card{
    vertical-align: bottom;
    position: relative;
    display: inline-block;
    width: 16rem; /*  24 + 24 + 2 = 50   margin 1   48 / 3 = 16*/
    margin-right: 1rem;
    text-align: left;
    font-size: .6rem;
    line-height: 1.2rem;
}
.contactinfo-card:last-child{
    margin-right: 0;
}


.contactinfo-img-area-left,
.contactinfo-img-area-right{
    position: relative;
    vertical-align: bottom;
    float: right;
}

.contactinfo-img-area-right{
    width: 4.9rem;
    height: 4.9rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(//www.utaplus.cn/qrcode_for_ghutaplus258.jpg);
}

.contactinfo-img-area-left{
    width: 6.7rem;
    height: 4.9rem;
    font-size: 0;
}
.contactinfo-img-area-left > .logo-img{
    top: .3rem;
    width: 6.3rem;
    height: 1.9rem;
    right: .3rem;
}
.contactinfo-img-area-left > .third-party-icons{
    position: absolute;
    bottom: .3rem;
    right: .3rem;
    left: .3rem;
    height: 1.6rem;
}

.third-party-icon {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    float: right;
    margin-left: .7rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.qq-icon{
    background-image: url(../imgs/qq-grey.png);
}
.wx-icon{
    background-image: url(../imgs/wx-grey.png);
}

.footer{
    background-color: #eeeeee;
}
.footer > .content{
    width: 80rem;
    height: 1.9rem;
    text-align: center;
    line-height: 1.9rem;
    color: #999999;
    font-size: .6rem;
}

.footer a,
.footer a:hover,
.footer a:visited{
    color: #999999;
    text-decoration: none;
}

.swiper-pagination-bullet{
    width: 42px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background-color: #21f0ff;
}

.cube-area-mobile{
    display: none;
}