/* header */
.header{
    background: transparent;
    box-shadow: none;
    border-bottom:1px solid rgba(255,255,255,.2);
}
.header__logo a{
    background-image:url('/child/img/ci-white.svg');
}
.header-menu-ul .menu-link, .header__global li a{
    color:#fff;
}
.header__global .icon-language{
    background-image: url(/child/img/icon/icon-language-white.png);
}
@media (max-width:1024px){
    .header{
        background: #fff;
        border-bottom:none;
    }
    .header__logo a{
        background-image:url('/child/img/ci.svg');
    }
    .header-menu-ul .menu-link, .header__global li a{
        color:#222;
    }
    .header__global .icon-language{
        background-image: url(/child/img/icon/icon-language.png);
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
}
@media (max-width:576px){
}

/* Visual */
.visual{
    overflow: hidden; height: 980px; background: #000;
}
.visual .swiper-container{
    height: 100%;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
    opacity: 0;
}
.visual .swiper-wrapper { height: 100%; }
.visual .swiper-slide { overflow: hidden; height: 100%; }
.visual-control{
    position: absolute;
    top: 50%;
    left:50%;
    z-index: 2;
    transform: translate(-50%,calc(-50% - 125px));
    max-width: 1230px;
    width: 100%;
    display: flex;
    align-items: center;
    padding:0 15px;
}
.visual .prev,
.visual .next{
    z-index: 2;
    /* position: absolute; top: 0; bottom: 0;  */
    width: 26px; height: 26px;
    cursor: pointer !important;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
}
.visual .prev{
    background: url('/child/img/visual/prev.png') no-repeat center;
    /* -webkit-transform: translateX(-50px); transform: translateX(-50px); */
}
.visual .next{
    background: url('/child/img/visual/next.png') no-repeat center;
    /* -webkit-transform: translateX(50px); transform: translateX(50px); */
}
/* .visual .slide-pagination{
    height: 15px;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    -webkit-transform: translateY(50px); transform: translateY(50px);
    opacity: 0;
} */
.visual .slide-pagination.swiper-pagination-bullets {
    display: flex;
    flex-direction: row;
    /* z-index: 2; position: absolute; bottom: 30px; width: 100%; text-align: center; font-size: 0;  */
    width: 180px;
    height: 1px;
}
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    width: auto; height:auto;
    flex: 1 1 auto; background: rgba(255,255,255,.5);
    opacity:1;
    border-radius: 0;
    -webkit-transition: all ease .2s; transition: all ease .2s;
}
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { background: rgba(255,255,255,1); }
.pagination--total{
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color:#fff;
    margin-right:40px;
}
.pagination--total .slide-pagination{
    margin:0 10px;
}
.visual .background{
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transform: scale(1.1) !important;
    -webkit-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s;
}
.visual .swiper-slide-active .background {
    transform: scale(1) !important;
    -webkit-transition: all linear 3.5s; transition: all linear 3.5s;
}
.visual .swiper-container-initialized { opacity: 1; }
.visual .swiper-container-initialized .background { -webkit-transform: none; transform: none; }
/* .visual .swiper-container-initialized .prev,
.visual .swiper-container-initialized .next,
.visual .swiper-container-initialized .slide-pagination{
    -webkit-transform: none; transform: none;
    opacity: 1;
} */
.visual-con{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 1230px;
    transform: translate(-50%,calc(-50% + 70px));
    z-index: 1;
    padding: 15px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 0 8px rgba(0, 0, 0, .25);
    overflow: hidden;
}
.visual-con__tit{
    font-size: 88px;
    font-weight: 600;
    line-height: 1;
}
.visual-con__txt{
    font-size: 32px;
    font-weight: 200;
    margin-top: 30px;
}
.visual-con__btn-wrap{
    margin-top:50px;
}
@media(max-width:1024px){
    .visual { height: 550px; }
    .visual .prev,
    .visual .next { display: none; }
    .visual-con{
        transform: translate(-50%,calc(-50% + 20px));
    }
    .visual-con__tit {
        font-size: 48px;
    }
    .visual-con__txt {
        font-size: 24px;
        margin-top: 15px;
    }
    .visual-con__btn-wrap {
        margin-top: 30px;
    }
}
@media(max-width:768px){
    .visual { height: 340px; }
    .visual-control{
        top: auto;
        bottom: 15px;
        transform: translate(-50%,0);
        justify-content: center;
    }
    .pagination--total{
        font-size: 14px;
        margin-right: 0;
    }
    .visual-con{
        transform: translate(-50%,-50%);
    }
    .visual-con__tit {
        font-size: 30px;
    }
    .visual-con__txt {
        font-size: 20px;
        margin-top: 10px;
    }
    .visual-con__btn-wrap {
        margin-top: 25px;
    }
}
@media(max-width:500px){
}

/* MAin Common */
.main-section{
    padding:140px 0;
}

.main-text h2{
    line-height: 1.2;
    margin-bottom: 10px;
}
.main-text__btn-wrap{
    margin-top: 35px;
}
@media (max-width:1024px){
    .main-section{
        padding:80px 0;
    }

    .main-text h2 {
        margin-bottom: 5px;
    }
    .main-text__btn-wrap {
        margin-top: 25px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section{
        padding:60px 0;
    }
}
@media (max-width:576px){
}

/* Mission */
.main-section{
    overflow: hidden;
}
.main-section--mission{
    position: relative;
}
.main-section--mission .container{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.main-section--mission .container::before, .main-section--pipeline .container::before{
    content:'';
    position:absolute;
    top:50%;
    right:15px;
    z-index: -1;
    -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
    display: block;
    width: 1px;
    height: calc(100% + 140px*2);
    background-color: #f5f5f5;
}
.main-section--mission .container::after{
    content: '';
    position: absolute;
    top: 50%;
    left: -86%;
    z-index: -1;
    -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
    display: block;
    width: 100%;
    height: calc(100% + 140px*2);
    background-color: #f9f9f9;
}
.main-section--mission__left{
    padding-right: 30px;
}
.main-section--mission__right{
    /* width: 100.8130081300813%;
    margin-right:-470px; */
    width:690px;
    /* height:420px; */
    
}
@media (max-width:1024px){
    .main-section--mission__left, .main-section--mission__right{
        width:100%;
        margin:0;
    }
    .main-section--mission__left{
        margin-bottom: 35px;
    }
    .main-section--mission .container::before, .main-section--pipeline .container::before{display: none;}
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section--mission .container::after{display:none;}
}
@media (max-width:576px){
}

.slide-scrollbar .swiper-container{
    padding-bottom:30px;
}
.slide-scrollbar .swiper-pagination{
    display: flex;
    align-items: flex-end;
    bottom:0;
}
.slide-scrollbar .swiper-pagination-bullet{
    height: 4px;
    flex:1 1 auto;
    margin:0 !important;
    border-radius: 0;
    background: #e6e6e6;
    opacity: 1;
}
.slide-scrollbar .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #222;
}
.slide-scrollbar .hover-box{
    margin:auto;
}
@media (max-width:1024px){
}
@media (max-width:992px){
}
@media (max-width:768px){
    .slide-scrollbar .swiper-container{
        padding-bottom:15px;
    }
}
@media (max-width:576px){
}

.hover-box{
    max-width: 400px;
}
.hover-box__inner{
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.hover-box__visible, .hover-box__hidden{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    color:#fff;
    transition: all .6s ease-in-out;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.hover-box__visible{
    display: flex;
    align-items: flex-end;
    padding:30px;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    transform: rotateX(0) rotateY(0);
}
.hover-box__v__icon{
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-position:left bottom;
    margin-bottom: 12px;
}
.hover-box__v__tit{
    font-size: 30px;
    font-weight: 600;
}

.hover-box__v__tit_en{
    font-size: 26px;
}
.hover-box__v__txt{
    font-size: 18px;
    font-weight: 400;
    color:#e6e6e6;
    margin-top:4px;
}
.hover-box__hidden{
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    opacity: 0;
    transform: rotateX(0) rotateY(-178deg);
}
.hover-box__hidden >a{
    display:flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding:30px;
    background-color: rgba(0,0,0,.6);
}
.hover-box__h__con{
    text-align: center;
}
.hover-box__h__icon{
    width: 88px;
    height: 80px;
    background-repeat: no-repeat;
    background-position:center;
    margin:0 auto 20px;
}
.hover-box__h__tit{
    font-size: 30px;
    font-weight: 600;
}
.hover-box__h__tit_en{
    font-size: 26px;
}
.hover-box__h__txt{
    font-size: 18px;
    font-weight: 400;
    color:#e6e6e6;
    margin-top:4px;
}
.hover-box__h__more{
    position: relative;
    width: 48px;
    height: 48px;
    border:1px solid #fff;
    margin:30px auto 0;
}
.hover-box__h__more::before, .hover-box__h__more::after{
    content:'';
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);
    display: block;
    background-color: #fff;
}
.hover-box__h__more::before{
    width: 20px;
    height: 2px;
}
.hover-box__h__more::after{
    width: 2px;
    height: 20px;
}
@media (min-width:1025px){
    .hover-box:hover .hover-box__visible:hover{
        transform: rotateX(0) rotateY(-178deg);
    }
    .hover-box:hover .hover-box__hidden{
        transform: none;
        opacity: 1;
    }
}
@media (max-width:1024px){
    .hover-box__v__tit{
        font-size: 20px;
    }
    .hover-box__v__txt{
        font-size: 16px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
}
@media (max-width:576px){
}

/* Pipeline */
.main-section--pipeline{
    padding-top: 0;
}
.main-section--pipeline .container{
    position: relative;
}
.main-section--pipeline__left{
    text-align: right;
    padding-right: 160px;
}
.main-section--pipeline__left .main-text{
    display: inline-block;
    text-align: left;
    margin-bottom: 70px;
}
.slide-pipeline-img{
    position: absolute;
    top:0;
    left:-345px;
    max-width: 1000px;
    width: 100%;
    height: 100%;
}
.slide-pipeline-img .swiper-container, .slide-pipeline-thumb .swiper-container{
    width: 100%;
    height: 100%;
}
.pipeline-img, .pipeline-thumb{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
}
.slide-pipeline-control {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 25px;
}
.slide-pipeline-control .prev, .slide-pipeline-control .next{
    display: inline-block;
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position:center;
}
.slide-pipeline-control .prev{
    border:1px solid #ee2e24;
    background-color: #fff;
    background-image: url(/child/img/main/prev-red.png);
}
.slide-pipeline-control .next{
    background-color: #ee2e24;
    background-image: url(/child/img/main/next-white.png);
}

.slide-pipeline-thumb{
    position: absolute;
    bottom: 0;
    right: -345px;
    width: 360px;
    height: 216px;
}
.pipeline-thumb{
    position: relative;
}
.pipeline-thumb__txt{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color:#fff;
    background-color: rgba(0,0,0,.6);
}

@media (max-width:1300px){
    .main-section--pipeline__right{display: none;}
}
@media (max-width:1160px){
    .main-section--pipeline{
        padding-top: 140px;
    }
    .main-section--pipeline__left{
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        padding-right:0;
    }
    .main-section--pipeline__left .main-text{
        width: 100%;
        margin-bottom: 35px;
    }
    .slide-pipeline-img, .slide-pipeline-info{
        width: 50%;
    }
    .slide-pipeline-img{
        position: static;
        top: auto;
        left: auto;
        max-width: none;
        height: 300px;
    }
    .slide-pipeline-control{
        text-align: right;
        margin-top:-48px;
        margin-left: auto;
    }
}
@media (max-width:1024px){
    .main-section--pipeline{
        padding-top: 80px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section--pipeline{
        padding-top: 0;
    }
    .slide-pipeline-control{
        margin-top:-42px;
    }
    .slide-pipeline-control .prev, .slide-pipeline-control .next{
        width: 42px;
        height: 42px;
    }
    .slide-pipeline-img{
        height: 200px;
    }
}
@media (max-width:576px){
    .slide-pipeline-img, .slide-pipeline-info{
        width: 100%;
    }
    .slide-pipeline-control{
        margin-top:10px;
    }
}

.text-box{
    display: inline-block;
    width: 450px;
    text-align: left;
    padding: 60px 40px;
    background-color: #f9f9f9;
}
.text-box__tit{
    font-size: 30px;
    font-weight: 600;
    color:#222;
    line-height: 1.2;
}
.text-box__txt{
    font-size: 18px;
    font-weight: 400;
    color:#666;
    margin-top: 2px;
}
@media (max-width:1160px){
    .slide-pipeline-info .text-box{
        width:100%;
        height: 100%;
    }
    .slide-pipeline-info .swiper-container{
        height: 100%;
    }
}
@media (max-width:1024px){
    .text-box{
        padding: 45px 30px;
    }
    .text-box__tit{
        font-size: 20px;
    }
    .text-box__txt{
        font-size: 16px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .text-box{
        padding: 30px 30px 50px;
    }
}
@media (max-width:576px){
    .text-box{
        padding:25px;
    }
}

/* Community */
.main-section--community{
    position: relative;
    color:#fff;
    overflow: hidden;
}
.main-section--community::before{
    content:'';
    position: absolute;
    top:0;
    left: 50%;
    display: block;
    width: 100vw;
    height: 100%;
    transform: translate(-50%,0) scale(1.2);
    transform-origin: center;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    background-image:url(/child/img/main/community-bg.png);
    animation: communityBg 20s ease-in-out infinite;
    transition: transform ease-in-out 20s;
}
@keyframes communityBg {
    0%{
        transform: translate(calc(-50% + 100px),0) scale(1.2);
    }
    50%{
        transform:  translate(-50%,0) scale(1.2);
    }
    100%{
        transform:  translate(calc(-50% + 100px),0) scale(1.2);
    }
}
#vue-app .main-section--community .row{
    margin:-10px -60px;
}
#vue-app .main-section--community .row [class*="col-"]{
    padding:10px 60px;
}
.main-board__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.main-board__tit{
    font-size: 30px;
    font-weight: 600;
}
.main-board__more{
    font-size: 14px;
    padding:5px;
}
.main-board__body{
    padding:25px 0;
    border-bottom: 1px solid rgba(255,255,255,.15);
}
.main-board-items{
    margin:-5px 0;
}
.main-board-item{
    display:none;
    position: relative;
    /* display: flex; */
    align-items: center;
    font-size: 16px;
    color:#ccc;
    padding: 5px 0 5px 110px;
    cursor: pointer;
}
.main-board-item:nth-child(1),.main-board-item:nth-child(2),.main-board-item:nth-child(3),.main-board-item:nth-child(4),.main-board-item:nth-child(5){display:flex;}
.main-board-item::before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
    display: block;
    width: 2px;
    height: 2px;
    background-color: #ccc;
}
.main-board-item__date{
    position: absolute;
    top: 50%;
    left: 12px;
    -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
}
.main-board-item__tit{
    width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.main-banner-items{
    position: relative;
    display: flex;
    flex-wrap:wrap;
    margin-top:65px;
    border:1px solid rgba(255,255,255,.15);
    background-color: rgba(0,0,0,.2);
}
.main-banner-item{
    position: relative;
    width: 50%;
    padding:40px;
}
.main-banner-item::before{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%);
    display: block;
    width: 1px;
    height: calc(100% - 40px*2);
    background-color: rgba(255,255,255,.15);
}
.main-banner-item:first-child::before{display:none;}
.main-banner-item__tit{
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 10px;
}
.main-banner-item__txt{
    font-size: 18px;
    color:#ccc;
}
.main-banner-item__more{
    display:inline-block;
    font-size: 14px;
    padding:5px;
    margin-top: 25px;
}

@media (max-width:1024px){
    #vue-app .main-section--community .row{
        margin:-15px;
    }
    #vue-app .main-section--community .row [class*="col-"]{
        padding:15px;
    }

    .main-banner-items{
        margin-top: 40px;
    }
    .main-banner-item{
        padding: 30px;
    }
    .main-banner-item__txt{
        font-size: 16px;
    }
}
@media (max-width:992px){
}
@media (max-width:768px){
    .main-section--community::before{
        animation: none;
        transition: none;
    }
    .main-board__head{
        padding-bottom: 15px;
    }
    .main-board__body{
        padding: 15px 0;
    }
    .main-board-item {
        font-size: 15px;
        padding: 5px 0 5px 95px;
    }
    .main-board__tit{
        font-size:24px;
    }

    .main-banner-item{
        width: 100%;
    }
    .main-banner-item::before{
        top:0;
        left:50%;
        -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0);
        width: calc(100% - 30px*2);
        height: 1px;
    }
    .main-banner-item__tit{
        font-size: 24px;
    }
    .main-banner-item__txt {
        font-size: 14px;
    }
}
@media (max-width:576px){
    .main-banner-item{
        padding: 25px;
    }
    .main-banner-item::before{
        width: calc(100% - 25px*2);
    }
}