.maxSize {
    width: 84%;
    width: 87.5%;
    max-width: 83.33vw;
    margin: auto
}

.r3 .bg .photo,.r3 .inner .mid .cirBox,
.r3 .inner .mid .cirBox .imgBox .photo,
.layer-photo .pic,.layer-pop,.photo .pic {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0
}



.r3 {
    padding-top: 7.29vw;
    padding-bottom: 10.42vw;
    padding-bottom: 13.5416vw;
    position: relative;
    overflow: hidden
}

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

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

.r3 .inner .layer-topic h2 {
    text-align: center
}

.r3 .inner .mid {
    width: 37.03vw;
    height: 37.03vw;

    width: 31.77vw;
    height: 31.77vw;

    border-radius: 50%;
    margin: 0 auto;
    display: block;
    position: relative
}

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

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

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

.r3 .inner .mid .cirBox #cirLine.mc .st {
    fill: #9fb935
}

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

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

.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
}

.r3 .inner .mid .cirBox .dotItems .dot span {
    width: 10px;
    height: 10px;
    background: #3d423c;
    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%)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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)
}

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

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

.r3 .inner .mid #cirItems .list {
    /* height: 100%; */
    height: auto;
    cursor: pointer;
    /* grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 14.58vw; */

    grid-template-rows: auto;
    grid-template-columns: 25.26vw;
    padding: 30px 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.21);
    display: grid;
    position: absolute
}

.r3 .inner .mid #cirItems .list.right {
    /* top: 0; */
    left: calc(100% + 1.04vw);
    top: 50%;
    transform: translateY(-50%);
}

.r3 .inner .mid #cirItems .list.left {
    /* top: 0; */
    right: calc(100% + 1.04vw);
    top: 50%;
    transform: translateY(-50%);
}


.r3 .inner .mid #cirItems .list.bottom {
    text-align: center;
    top: auto;
    bottom: -160px;
    bottom: -8.333vw;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    grid-template-columns: 87.5vw;
}


.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
}

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

.r3 .inner .mid #cirItems .list>li h3 {
    width: 100%;
    opacity: .2;
    opacity: 1;
    margin-bottom: 10px;
    line-height: 1.2;
    font-size: 1.5625vw;
    font-family: Poppins;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

.r3 .inner .mid #cirItems .list>li p {
    opacity: .2;
    opacity: 1;
    width: 100%;
    line-height: 1.3;
    font-size: 0.83vw;
    font-family: Poppins;
    transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

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

.r3 .inner .mid #cirItemsApp {
    padding: 30px 0 0;
    overflow: hidden;
    text-align: center;
}

.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
}

.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
}

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

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

.r3 .inner .mid .swiper-button-prev {
    color: #fff;
    outline: none;
    position: absolute;
    top: 84vw;
    left: 0
}

.r3 .inner .mid .swiper-button-next {
    color: #fff;
    outline: none;
    position: absolute;
    top: 84vw;
    right: 0
}



.wc {
    color: #fff
}

.mc {
    color: #9fb935;
    color: #fff
}

.oc {
    color: #ffc973;
    color: #fff
}


.photo {
    overflow: hidden
}

.photo .pic.scroll {
    height: calc(100% + 9.38vw);
    top: -4.69vw
}


.r3 .inner .mid .cirBox #cirLine,
.r3 .inner .mid .cirBox .imgBox,
.layout-middle,.layout-v-middle {
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0
}

.layout-h-middle {
	margin: auto;
	position: absolute;
	left: 0;
	right: 0
}

.r3 .inner .mid .cirBox #cirLine,
.r3 .inner .mid .cirBox .imgBox,.layout-middle {
	left: 0;
	right: 0
}



.pa-v {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.pa-h {
    position: absolute;
    left: 50%;
    transform: translate(-50%)
}

.pa-mid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

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

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


@media screen and (max-width: 900px) {
    .r3{
        padding-bottom: 7.29vw;
    }

    .pc,.bloc header .pcNav {
        display:none
    }

    .r3 p, .r3 small {
        line-height: 1.35
    }

    .maxSize {
        width: 88%;
        max-width: 100vw
    }

    .f-150 {
        letter-spacing: 0;
        font-size: 13vw
    }

    .rul .f-150 {
        letter-spacing: 0;
        font-size: 10vw
    }

    .f-36 {
        font-size: .46rem
    }

    .f-30 {
        font-size: 20px;
    }
    .r3 .inner .mid #cirItemsApp>li p{
        font-size: 14px;
    }

 

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

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

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

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

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

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

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


@font-face {
  font-family: "iconfont2"; /* Project id 4181838 */
  src: url('//at.alicdn.com/t/c/font_4181838_nw3oov25nt9.woff2?t=1741253894087') format('woff2'),
       url('//at.alicdn.com/t/c/font_4181838_nw3oov25nt9.woff?t=1741253894087') format('woff'),
       url('//at.alicdn.com/t/c/font_4181838_nw3oov25nt9.ttf?t=1741253894087') format('truetype');
}

.iconfont2 {
  font-family: "iconfont2" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}