html {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    width:100%;
    height:100%;
    overflow:hidden;
    background:url(../images/homebg.jpg) center no-repeat;
    background-size:cover;
}

.center {
    position: absolute;
    width: 12.8rem;
    max-width:90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    height: 5.6rem;
}
.center .left {
    width: 3.6rem;
    height: 100%;
    background: rgba(255,255,255,.5);
    box-shadow: 0 0 25px rgba(255,255,255,.25);
}
.left_bottom{
   padding:0.2rem;
}
.linkbox{
    display:flex;
    justify-content:space-around;    
    padding:0.25rem 0;
    border-bottom:1px solid #005bb8;
}
.linkbox h5 {
    font-size: 0.14rem;
    padding-top:0.02rem;
}
.linkbox a {
    background: #005bb8;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    padding: 0.1rem;
}
.infobox div {
    display: flex;
    justify-content: left;
    padding-top: 0.3rem;
    font-size: 0.14rem;
}
.infobox div span{
    padding-left:0.05rem;
    text-align:left;
}
.infobox div img {
    height:0.2rem;
}
.center .right {
    display: flex;
    margin-left:0.15rem;
    width:9rem;
}

.right .item {
    background: url(../images/cardbg2.png) no-repeat;
    height: 100%;
    text-align: center;
    color: #fff;
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    margin-right: 0.1rem;
    box-shadow: 0 0 25px rgba(255,255,255,.25);
    background-size:100% 100%;
}
.right .item:last-child {
    margin-right: 0;
}

.right .middle {
    height: 5.37rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}


.right .text {
    color: #005DBA
}
.item .tit {
    font-size: 0.28rem;
    padding:0.1rem;
}
.item .tit1 {
    font-size: 0.14rem;
}

@media screen and (min-width: 769px) {
   
    .right .yuanbox {
        position: relative;
        width: 180px;
        height: 180px;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 53px;
    }

    .right .yuanbox .img {
        margin-top: 40px;
    }

    .right .yuanbox:before {
        content: "";
        display: block;
        width: 172px;
        height: 172px;
        position: absolute;
        top: 41%;
        left: 40%;
        margin-top: -73px;
        margin-left: -68px;
        background: url(../images/cirwai.png) no-repeat 0 0;
        background-size: 100% 99%;
    }

    .right .yuanbox:after {
        content: "";
        display: block;
        width: 150px;
        height: 150px;
        position: absolute;
        top: 45%;
        left: 50%;
        margin-top: -69px;
        margin-left: -75px;
        background: url(../images/cirnei.png) no-repeat 0 0;
        background-size: 100% 100%;
    }

    .right .yuanbox:before {
        -webkit-animation: yuanbox 5s linear 0s infinite;
        animation: yuanbox 5s linear 0s infinite;
    }

    .right .yuanbox:after {
        -webkit-animation: yuanbox1 5s linear 0s infinite;
        animation: yuanbox1 5s linear 0s infinite;
    }
    .right .hoverbox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        background: url(../images/cardbg.png) no-repeat 0 bottom;
        background-size: 100% 100%;
        opacity: 0;
        visibility: hidden;
    }

    .right .hovercont .text {
        color: #fff;
        width: 105%;
    }
    .right .item:hover .hoverbox {
        opacity: 1;
        visibility: visible;
        top: -5%;
        height: 110%;
    }
   
}



@media screen and (max-width: 768px) {
    .center .left{
        width:7.6rem;
    }
    .item .tit {
        font-size: 0.18rem;
    }
    .right .hoverbox {
        display: none;
    }
    .center .right {
        flex-direction: column;
        width: 5rem;
    }
    .item .img img{
        width:40%;
    }

    .right .item {
        height: 1.8rem;
        margin-bottom: 0.05rem;
        background: rgba(255,255,255,.5);
        margin-right: 0;
    }
    .right .item:last-child {
        margin-bottom: 0;
    }
    .right .middle{
        height:100%;
    }
}

@-webkit-keyframes yuanbox {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes yuanbox {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes yuanbox1 {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes yuanbox1 {
    0% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}