.hide {
    display: none
}
.show {
    display: block
}
[data-ahref] {
    cursor: pointer
}

.layout-v-middle,#home .r1 .inner .pager .line,.layout-middle,#process .r1 .inner .mid .cirBox .imgBox,#process .r1 .inner .mid .cirBox #cirLine,#custom .r3 .inner .mid .cirBox .imgBox,#custom .r3 .inner .mid .cirBox #cirLine,#custom .r2 .inner .swiper .swiper-slide .ok,#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn .loadIcon,#home .r3 .inner .mid .cirBox .imgBox,#home .r3 .inner .mid .cirBox #cirLine,#mailPop .pMain .bm .sub .loadIcon {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0
}

.layout-h-middle,#custom .r2 .inner .tree li .msg .img,#solutionDetail .tree li .msg .img,#solutionDetail .tree a .msg .img,#solution .r1 .inner .group ul li .msg .img,#home .r1 .appInner .pager .line {
    margin: auto;
    position: absolute;
    left: 0;
    right: 0
}

.layout-middle,#process .r1 .inner .mid .cirBox .imgBox,#process .r1 .inner .mid .cirBox #cirLine,#custom .r3 .inner .mid .cirBox .imgBox,#custom .r3 .inner .mid .cirBox #cirLine,#custom .r2 .inner .swiper .swiper-slide .ok,#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn .loadIcon,#home .r3 .inner .mid .cirBox .imgBox,#home .r3 .inner .mid .cirBox #cirLine,#mailPop .pMain .bm .sub .loadIcon {
    left: 0;
    right: 0
}

.pic {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover
}

.fxc,#searchPage .r1 .inner .result .box .caseItems .cases,#searchPage .r1 .inner .isNull,#case .r1 .inner .btm .set ol,#case .r1 .inner .btm .set>a,#case .r1 .inner .group .box,#custom .r2 .inner .swiper .swiper-slide .ok,#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check,#custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox,#custom .r1 .scr,#solution .r1 .inner .group ul li .imgBox,#solution .r1 .inner h1,#pro .r1 .inner .btm .set ol,#pro .r1 .inner .btm .set>a,#pro .r1 .inner .right .isNull,#detail .r2 .inner .mid .set>a,#detail .r2 .inner .mid .swiper .swiper-slide .box,#about .r3 .inner .mid .items,#about .r3 .inner,#about .r2 .inner .mid .set>a,#about .r2 .inner .mid .swiper .swiper-slide .box,#home .r5 .inner .mid .set>a,#home .r5 .inner .mid .swiper .swiper-slide .box,#home .r5 .inner,#home .r4 .inner .mid .items,#home .r4 .inner,#home .r1 .appInner>.other .photo,#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg,#home .r1 .inner .imgBox .photo,#home .r1 .inner .items>li,#home .banner .inner .msg,#home .banner .inner .scr,#home .banner .inner .pager,#home .banner .inner .items>li,#home .banner .inner,.bloc .fx,.bloc footer .fBm .c2 .layer-bg,.bloc footer .fBm .c2 .items,.bloc footer .fBm .c1,.bloc footer .fMid .fxs .con,.bloc header nav.app-nav .inner_top .topic .app-search,.bloc header nav.app-nav .inner_top .topic .layer-down,.bloc header nav.app-nav .inner_top .topic .app-logo,.bloc header .pcNav .right,.bloc header,#toast,#mailPop .pMain .other .input--check,.layer-pop,.layer-downBox .childDown .input--check,.layer-scr,.layer-more,.layer-btn,.layer-type,.layer-button,.layer-down>a,.layer-icon {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}

.fxb,#solutionDetail .r4_1 .group,#solutionDetail .r4 .group,#solutionDetail .r3,#solutionDetail .r2 .inner,#detail .r2 .inner .top,#about .r2 .inner .top,#about .r1 .inner .mid .imgBox .group,#about .r1 .inner .top,#about .banner .inner,#home .r5 .inner .top,#home .r2 .inner .top,.bloc footer .fBm .c2,.bloc footer .fBm,.bloc footer .fMid,.bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList,.bloc header .pcNav,.layer-downBox .topPart {
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex
}


.full,#searchPage .r1 .inner .result .box .caseItems .cases:after,#case .r1 .inner .group .box:after,#process .r1 .inner .mid .cirBox .imgBox .photo,#process .r1 .inner .mid .cirBox,#process .r1 .bg .photo,#custom .r3 .inner .mid .cirBox .imgBox .photo,#custom .r3 .inner .mid .cirBox,#custom .r3 .bg .photo,#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo:after,#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo:after,#custom .r1 .bg .photo,#custom .r1 .bg,#solutionDetail .r4 .group .col .photo:after,#detail .r2 .inner .mid .swiper .swiper-slide .box:after,#detail .banner .bg:after,#detail .banner .bg .photo,#detail .banner .bg,#about .r3 .bg .mk>span,#about .r3 .bg .photo,#about .r2 .inner .mid .swiper .swiper-slide .box:after,#about .r1 .inner .mid .imgBox .group .c1 .dataItems,#about .r1 .inner .mid .imgBox .group,#about .banner .bg .photo,#about .banner .bg,#home .r4 .bg .mk>span,#home .r4 .bg .photo,#home .r3 .inner .mid .cirBox .imgBox .photo,#home .r3 .inner .mid .cirBox,#home .r3 .bg .photo,#home .r2 .inner .mid .imgBox .dataItems,#home .r2 .inner .mid .imgBox>img,#home .r1 .appInner>.other,#home .r1 .inner .imgBox .photo,#home .banner .inner .msg .skew:before,#home .banner .bg:after,#home .banner .bg canvas,#home #loading .photo .mk,#home #loading .photo,.bloc footer .fBg,.bloc main .bg,.layer-pop,.layer-bg .skew:after,.layer-bg .skew,.photo .pic,.layer-photo .pic {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

#home .r3 .bg .photo:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.hidden {
    display: none!important
}

.letter {
    color: inherit;
    min-width: .2em;
    font-size: inherit;
    font-family: inherit;
    display: inline-block
}

.alanFn {
    transform-origin: -50%;
    perspective: 26.04vw;
    backface-visibility: hidden
}

.Xy {
    transition: transform .5s cubic-bezier(.435,.25,.15,.965)
}

.fadeXy {
    transition: transform .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}


.arrow,.layer-down>a em {
    width: 0;
    height: 0;
    border-style: solid
}

.photo {
    overflow: hidden
}

.photo .pic.scroll {
    /*height: calc(100% + 9.38vw);
    top: -4.69vw*/
    height: 100%;
    top: 0;
    transform: translate(0px, 0px) !important;
}

.layer-topic h2 {
    color: #FFFFFF;
    line-height: .85
}

.alanFn {
    opacity: 0
}

[data-choose] {
    cursor: pointer
}
/*
.swiper-wrapper {
    grid-auto-flow: column;
    display: grid
}*/

#home {
    width: 100%;
    display: block
}

#home .r3 {
    padding: 1rem 0 0.8rem 0;
    /*padding-top: 7.29vw;
    padding-bottom: 10.42vw;*/
    position: relative;
    overflow: hidden
}

#home .r3 .inner {
    z-index: 10;
    position: relative
}

#home .r3 .inner .layer-topic {
    width: 100%;
    text-align: center;
    margin-bottom: 4.17vw
}

#home .r3 .inner .layer-topic h2 {
    text-align: center;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 1;
}

#home .r3 .inner .mid {
    width: 37.03vw;
    height: 37.03vw;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    position: relative
}

#home .r3 .inner .mid .cirBox {
    overflow: hidden
}

#home .r3 .inner .mid .cirBox #cirLine {
    width: 96%;
    height: 96%
}

#home .r3 .inner .mid .cirBox #cirLine .st {
    fill: #FF6100;
    transition: fill .5s cubic-bezier(.435,.25,.15,.965)
}

#home .r3 .inner .mid .cirBox #cirLine.mc .st {
    fill: #FF6100
}

#home .r3 .inner .mid .cirBox #cirLine.oc .st {
    fill: #FF6100
}

#home .r3 .inner .mid .cirBox .dotItems {
    width: 0;
    transform-origin: 50%;
    height: 48%;
    position: absolute;
    bottom: 50%;
    left: 50%
}

#home .r3 .inner .mid .cirBox .dotItems .dot {
    height: calc(100% + 4px);
    transform-origin: 50% 100%;
    transition: opacity .5s cubic-bezier(.435,.25,.15,.965);
    position: absolute;
    top: -4px;
    left: 0
}

#home .r3 .inner .mid .cirBox .dotItems .dot span {
    width: 10px;
    height: 10px;
    background: #FF6100;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: border-color .5s cubic-bezier(.435,.25,.15,.965);
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%)
}

#home .r3 .inner .mid .cirBox .dotItems .dot.on {
    opacity: 0
}

#home .r3 .inner .mid .cirBox .dotItems .dot.mc span {
    border-color: #FF6100
}

#home .r3 .inner .mid .cirBox .dotItems .dot.oc span {
    border-color: #FF6100
}

#home .r3 .inner .mid .cirBox .dotItems .dot.wc span {
    border-color: #FF6100
}

@media screen and (min-width: 900px) {
    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
        transform:rotate(45deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
        transform: translate(-50%)rotate(-45deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
        transform: rotate(90deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
        transform: translate(-50%)rotate(-90deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
        transform: rotate(135deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
        transform: translate(-50%)rotate(-135deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
        transform: rotate(225deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
        transform: translate(-50%)rotate(-225deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
        transform: rotate(270deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
        transform: translate(-50%)rotate(-270deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
        transform: rotate(315deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
        transform: translate(-50%)rotate(-315deg)
    }
}

@media screen and (max-width: 900px) {
    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
        transform:rotate(0)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) span {
        transform: translate(-50%)rotate(0)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) {
        transform: rotate(60deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(2) span {
        transform: translate(-50%)rotate(-60deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) {
        transform: rotate(120deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(3) span {
        transform: translate(-50%)rotate(-120deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) {
        transform: rotate(180deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(4) span {
        transform: translate(-50%)rotate(-180deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) {
        transform: rotate(240deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(5) span {
        transform: translate(-50%)rotate(-240deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) {
        transform: rotate(300deg)
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot:nth-of-type(6) span {
        transform: translate(-50%)rotate(-300deg)
    }
}

#home .r3 .inner .mid .cirBox .imgBox {
    width: 88%;
    height: 88%;
    border-radius: 50%;
    overflow: hidden;
    transform: translateZ(1px)
}

#home .r3 .inner .mid .cirBox .imgBox .photo {
    opacity: 0;
    border-radius: 50%;
    transition: opacity 1s cubic-bezier(.435,.25,.15,.965),transform 1.5s cubic-bezier(.435,.25,.15,.965);
    overflow: hidden;
    transform: scale(1.1)
}

#home .r3 .inner .mid .cirBox .imgBox .photo .pic {
    border-radius: 50%
}

#home .r3 .inner .mid .cirBox .imgBox .photo.on {
    opacity: 1;
    transform: none
}

#home .r3 .inner .mid #cirItems .list {
    height: 100%;
    cursor: pointer;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 14.58vw;
    display: grid;
    position: absolute
}

#home .r3 .inner .mid #cirItems .list.right {
    top: 0;
    left: calc(100% + 1.04vw)
}

#home .r3 .inner .mid #cirItems .list.left {
    text-align: right;
    top: 0;
    right: calc(100% + 1.04vw)
}

#home .r3 .inner .mid #cirItems .list>li {
    width: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -ms-flexbox;
    display: flex
}

#home .r3 .inner .mid #cirItems .left.list>li{
    -ms-flex-align: end;
    align-items: flex-end;
}

#home .r3 .inner .mid #cirItems .list>li .num {
    width: 100%;
    opacity: .3;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965);
    display: block
}

#home .r3 .inner .mid #cirItems .list>li .num img{
    height: 0.44rem;
}


#home .r3 .inner .mid #cirItems .list>li h3 {
    width: 100%;
    opacity: .3;
    margin-bottom: 10px;
    line-height: 1.2;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965);
    color: #FF6100;
    font-weight: bold;
}

#home .r3 .inner .mid #cirItems .list>li p {
    opacity: .3;
    width: 100%;
    line-height: 1.3;
    color: #FFFFFF;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965);

}

#home .r3 .inner .mid #cirItems .list>li.on,#home .r3 .inner .mid #cirItems .list>li.on .num,#home .r3 .inner .mid #cirItems .list>li.on h3,#home .r3 .inner .mid #cirItems .list>li.on p {
    opacity: 1
}

#home .r3 .inner .mid #cirItemsApp {
    padding: .8rem 0
}

#home .r3 .inner .mid #cirItemsApp>li {
    width: 100%;
    opacity: 0;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
    display: -ms-flexbox;
    display: flex
}

#home .r3 .inner .mid #cirItemsApp>li .num {
    text-align: center;
    width: 100%;
    margin-bottom: 1.04vw;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965);
    display: block
}

#home .r3 .inner .mid #cirItemsApp>li h3 {
    text-align: center;
    white-space: nowrap;
    width: 100%;
    font-weight: bold;
    color: #FF6100;
    line-height: 1.2;
    margin-bottom: 10px;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

#home .r3 .inner .mid #cirItemsApp>li p {
    width: 88%;
    text-align: center;
    margin: 0 auto;
    line-height: 1.3;
    color: #FFFFFF;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

#home .r3 .inner .mid .swiper-button-prev {
    outline: none;
    position: absolute;
    top: 84vw;
    left: 0;
    background: url("../images/hy_l.png") no-repeat center;
    background-size: 0.26rem 0.28rem;
}



#home .r3 .inner .mid .swiper-button-next {
    outline: none;
    position: absolute;
    top: 84vw;
    right: 0;
    background: url("../images/hy_r.png") no-repeat center;
    background-size: 0.26rem 0.28rem;
}

.aul #home .r3 .inner .mid #cirItems .list>li {
    -ms-flex-align: end;
    align-items: flex-end
}

.aul #home .r3 .inner .mid #cirItems .list>li .num {
    text-align: right
}

@media screen and (orientation: landscape) {
    .home-hyyy .app {
        display: none
    }

}

@media(max-width:1199px) {
    #home .r3 .inner .mid #cirItems .list{
        grid-template-columns: 22.58vw;
    }
}


@media screen and (max-width: 900px) {
    .home-hyyy .pc {
        display: none
    }


    .photo .pic.scroll {
        /*height: calc(100% + 100px);
        top: -50px*/
    }

    #home {
        overflow: hidden
    }

    #home .r3 .inner .layer-topic {
        margin-bottom: .8rem
    }

    #home .r3 .inner .layer-topic h1 {
        font-size: .5rem
    }

    #home .r3 .inner .mid {
        width: 84vw;
        height: auto;
        box-sizing: border-box;
        padding-top: 84vw
    }

    #home .r3 .inner .mid .cirBox {
        height: 84vw
    }

    #home .r3 .inner .mid .items .list {
        position: relative
    }

    #home .r3 .inner .mid .cirBox .dotItems .dot span:after {
        content: "";
        width: 400%;
        height: 400%;
        opacity: 0;
        position: absolute;
        top: -150%;
        left: -150%
    }

    #home .r3 .inner .mid .cirBox #cirLine,#home .r3 .inner .mid .cirBox .imgBox {
        pointer-events: none
    }


}