a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, header, menu, nav, section {
    display: block
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px
}

input {
    -webkit-appearance: none;
    outline: 0
}

button, input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

a:link, a:visited {
    text-decoration: none
}

* {
    -webkit-tap-highlight-color: transparent
}

a:active, a:hover, a:link, a:visited {
    -webkit-tap-highlight-color: transparent;
}
html{font-size:13.33333333vw}
 @media (min-width: 560px) {
      html {
        font-size: 54px;
      }
    }

.playBtn{
    width: .6rem;
    height: .6rem;
    position: fixed;
    top: .2rem;
    right: .2rem;
    z-index:0;
    background: url("/assets/boc/exclusive/img/off.png") no-repeat;
    background-size: 100% 100%;
}
.on{
    background: url("/assets/boc/exclusive/img/on.png") no-repeat;
    background-size: 100% 100%;
    animation: ring 3s linear infinite;
    -webkit-animation: ring 3s linear infinite;
    -o-animation: ring 3s linear infinite;
    -moz-animation: ring 3s linear infinite
}
@keyframes ring {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}
.swiper-container {
    width: 100%;
    height: 100vh;
    backface-visibility: hidden;
}
.down-button{
    width: .8rem;
    height: .8rem;
    background: url("/assets/boc/exclusive/img/down-button.png") no-repeat;
    background-size: 100% 100%;
    z-index: 999;
    position: fixed;
    bottom: .4rem;
    left: 50%;
    transform: translateX(-50%);
    animation: updownI 1.5s ease-in-out infinite;
    -webkit-animation: updownI 1.5s ease-in-out infinite;
    -o-animation: updownI 1.5s ease-in-out infinite;
    -moz-animation: updownI 1.5s ease-in-out infinite;
}
@keyframes updownI {
    0%{
        bottom: .6rem;
    }
    50%{
        bottom: .4rem;
    }
    100%{
        bottom: .6rem;
    }
}
.swiper-slide {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide .pub_content{
    width: 7.5rem;
    height: 12.06rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    /*margin-bottom: auto;*/
    /*margin-top: .6rem;*/

}

.index{
    width: 7.5rem;
    height: 16.24rem;
    background: url("/assets/boc/exclusive/img/indexBg.gif") no-repeat;
    background-position: center center;
    background-size: cover;
}
.index .index-view{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: auto;
    position: relative;
}
.index .index-view .logo{
    width: 6.46rem;
    height: 0.52rem;
    background: url("/assets/boc/exclusive/img/logo-list.png") no-repeat;
    background-size: 4.76rem 0.52rem;
    background-position: right center;
    margin-left: auto;
    margin-top: .6rem;
    margin-right: .52rem;
}
.index .index-view .index-content{
    width:auto ;
    height: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3.6rem;
}
.index .index-view .index-content .indexTitle{
    display: block;
    width: 5.85rem;
    height: auto;
    margin-bottom: .8rem;
}
.index .index-view .index-content .indexSedTitle{
    display: block;
    width: 4.57rem;
    height: auto;
}
.index .index-view .hint-icon{
    width: .83rem;
    height: .57rem;
    background: url("/assets/boc/exclusive/img/hint-icon.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 1rem;
    left: 2.6rem;
    animation: hintIcon 3s ease-in-out infinite;
    -webkit-animation: hintIcon 3s ease-in-out infinite;
    -o-animation: hintIcon 3s ease-in-out infinite;
    -moz-animation: hintIcon 3s ease-in-out infinite;
    opacity: 0;

}
.I-hintIcon{
    opacity: 1 !important;
}
@keyframes hintIcon {
    0%{
         left: 2.6rem;
    }
    50%{
        left: 4.9rem;
    }
    100%{
         left: 2.6rem;
    }
}
.preface{
    background: url("/assets/boc/exclusive/img/pubBg.gif") no-repeat;
    background-position: center top;
    background-size: cover;
}
.preface .letter{
    width: 7.5rem;
    height: 10.03rem;
    margin-top: 1.1rem;
    /*background: url("/assets/boc/exclusive/img/letter.gif") no-repeat;*/
    /*background-size: 100% 100%;*/
}
.preface-ribbon1{
    width: 1.9rem;
    height: 2.92rem;
    background: url("/assets/boc/exclusive/img/sedP1.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1.06rem;
    right: 0;
    z-index: 10;
    /* animation: ribbon1 3s ease-in-out infinite;*/
    /*-webkit-animation: ribbon1 3s ease-in-out infinite;*/
    /*-o-animation: ribbon1 3s ease-in-out infinite;*/
    /*-moz-animation: ribbon1 4s ease-in-out infinite;*/
}
@keyframes ribbon1 {
    0%{
        top: .9rem;
    }
    50%{
        top: 1.06rem;
    }
    100%{
        top: .9rem;
    }
}

.preface .preface-ribbon2{
    width: 4.27rem;
    height: 2.90rem;
    background: url("/assets/boc/exclusive/img/sedP2.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 10rem;
    left: 0;
    z-index: 10;
    /* animation: ribbon2 3.5s ease-in-out infinite;*/
    /*-webkit-animation: ribbon2 3.5s ease-in-out infinite;*/
    /*-o-animation: ribbon2 3.5s ease-in-out infinite;*/
    /*-moz-animation: ribbon2 3.5s ease-in-out infinite;*/
}
@keyframes ribbon2 {
    0%{
        top: 9.36rem;
    }
    50%{
        top: 9.56rem;
    }
    100%{
        top: 9.36rem;
    }
}
.list{
    background: url("/assets/boc/exclusive/img/pubBg.gif") no-repeat;
    background-position: center top;
    background-size: cover;
}
.logo{
    width: 6.46rem;
    height: .52rem;
    background: url("/assets/boc/exclusive/img/logo-list.png") no-repeat;
    background-size: 4.76rem .52rem;
    background-position: right center;
}
.list .list-ribbon1{
     width:1.09rem ;
     height: 1.09rem;
     background: url("/assets/boc/exclusive/img/list-ribbon1.png") no-repeat;
     background-size: 100% 100%;
     position: absolute;
     left: 0;
     top:-0.54rem;
    z-index: 10;
     /*animation: list-ribbon1 3s ease-in-out infinite;*/
     /*-webkit-animation: list-ribbon1 3s ease-in-out infinite;*/
     /*-o-animation: list-ribbon1 3s ease-in-out infinite;*/
     /*-moz-animation: list-ribbon1 4s ease-in-out infinite;*/
 }
@keyframes list-ribbon1 {
    0%{
        top:-0.44rem;
    }
    50%{
        top:-0.54rem;
    }
    100%{
        top:-0.44rem;
    }
}

.list .list-ribbon2{
    width:2.52rem ;
    height: 2.13rem;
    background: url("/assets/boc/exclusive/img/list-ribbon2.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    bottom:-0.92rem;
    z-index: 10;
    /*animation: list-ribbon2 3s ease-in-out infinite;*/
    /*-webkit-animation: list-ribbon2 3s ease-in-out infinite;*/
    /*-o-animation: list-ribbon2 3s ease-in-out infinite;*/
    /*-moz-animation: list-ribbon2 4s ease-in-out infinite;*/
}
@keyframes list-ribbon2 {
    0%{
        bottom:-0.82rem;
    }
    50%{
        bottom:-0.92rem;
    }
    100%{
        bottom:-0.82rem;
    }
}
.list .catalog{
    width: 6.43rem;
    height: 10.60rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    margin-top: .46rem;
}
.list .catalog li{
    width: 6.43rem;
    height:1.49rem;
}
.list .catalog li:nth-child(1){
    background: url("/assets/boc/exclusive/img/list1.png") no-repeat;
    background-size: 100% 100%;
}
.list .catalog li:nth-child(2){
    background: url("/assets/boc/exclusive/img/list2.png") no-repeat;
    background-size: 100% 100%;
}
.list .catalog li:nth-child(3){
    background: url("/assets/boc/exclusive/img/list3.png") no-repeat;
    background-size: 100% 100%;
}
.list .catalog li:nth-child(4){
    background: url("/assets/boc/exclusive/img/list4.png") no-repeat;
    background-size: 100% 100%;
}
.list .catalog li:nth-child(5){
    background: url("/assets/boc/exclusive/img/list5.png") no-repeat;
    background-size: 100% 100%;
}
.list .catalog li:nth-child(6){
    background: url("/assets/boc/exclusive/img/list6.png") no-repeat;
    background-size: 100% 100%;
}
.swiper-slide .sed_content{
    height: 100vh;
    width: 100%;
    overflow-y: auto;
     overflow-x: hidden;
}
.swiper-slide .sed_content .detail{
    width: 100%;
    background: url("/assets/boc/exclusive/img/pubBg.gif") no-repeat;
    background-position: center top;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.swiper-slide .sed_content .detail .logo{
    width: 4.79rem;
    height: .52rem;
    background: url("/assets/boc/exclusive/img/logo-list.png") no-repeat;
    background-size: 100%;
    margin-top: .6rem;
    margin-left: 2.12rem;
}
.swiper-slide .sed_content .detail .title{
    display: block;
    width: 4.16rem;
    height: auto;
    margin-top: .72rem;
    margin-left:.7rem;
}
.swiper-slide .sed_content .detail .sedTitle{
    display: block;
    height: .3rem;
    width: auto;
    margin-left: .88rem;
    margin-top: .16rem;
}
.swiper-slide .sed_content .detail .detailImg{
    display: block;
    width: 6.77rem;
    height: auto;
    margin-left: auto;
    margin-top: .24rem;
}
.swiper-slide .sed_content .detail .text{
    display: block;
    width: 5.74rem;
    height: auto;
    margin-left: .82rem;
    margin-top: .6rem;
}
.swiper-slide .sed_content .detail .serviceList{
    width: 6.52rem;
    margin-top: .44rem;
    margin-left: .74rem;
    display: flex;
    flex-direction: column;
}
.swiper-slide .sed_content .detail .serviceList li{
    width: 100%;
    margin-bottom: .36rem;
}
.swiper-slide .sed_content .detail .serviceList li img{
    display: block;
    width: 100%;
    height: auto;
}
.swiper-slide .sed_content .detail .detail-footer{
    width: 7.5rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.swiper-slide .sed_content .detail .detail-footer .hint{
    width: 6.94rem;
    height: 1.6rem;
    background: url("/assets/boc/exclusive/img/hint.png") no-repeat;
    background-size: 100% 100%;
}
.swiper-slide .sed_content .detail .detail-footer .mark{
    display: block;
    width: 2.8rem;
    height: auto;
    margin-top: .46rem;
}
.swiper-slide .sed_content .detail .detail-footer .markName{
    font-size: .24rem;
    color: #000000;
    margin-top: .24rem;
}
.swiper-slide .backIcon{
    width: 2.36rem;
    height: .72rem;
    background: url("/assets/boc/exclusive/img/back-icon.png") no-repeat;
    background-size: 100% 100%;
    margin: .4rem auto .88rem;
}