*,:after,:before {
  color: #383c2a;
  box-sizing: border-box;
  backface-visibility: hidden;
  margin: 0;
  padding: 0;
  /* font-family: Microsoft JhengHei,Source Han Sans CN,PingFang SC,Source Han Serif SC,Microsoft YaHei,sans-serif */
}

ol,ul,li {
  vertical-align: middle;
  list-style-type: none
}

div {
  color: #383c2a
}

img {
  vertical-align: top;
  border: 0
}

input,select,textarea,button {
  vertical-align: middle
}

textarea,input {
  text-indent: 10px
}

input[type=submit],input[type=button],button {
  text-indent: 0;
  text-align: center;
  cursor: pointer
}

label,button,a {
  cursor: pointer
}

ins,em,b,i {
  font-style: normal;
  text-decoration: none
}

select:focus,textarea:focus,input:focus,button {
  outline: none
}

.disable-hover {
  pointer-events: none
}

.scroll-animate.animated,.scroll-animate:not(.father) {
  visibility: hidden
}

.animated {
  animation-duration: 1.2s;
  animation-fill-mode: both
}

.font-fadeIn font {
  display: inline-block
}

::-webkit-scrollbar {
  width: 5px;
  background-color: transparent
}

::-webkit-scrollbar-thumb {
  width: 5px;
  background-color: #9fb935;
  border: 0 solid transparent;
  border-radius: 4px
}

::-webkit-scrollbar-corner {
  background-color: transparent
}

::-webkit-scrollbar:horizontal {
  height: 9px
}

::-webkit-selection {
  color: transparent;
  background: 0 0
}

::-moz-selection {
  color: transparent;
  background: 0 0
}

::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-color: #1c509c
}

input::-webkit-input-placeholder,input::-moz-input-placeholder,textarea::-webkit-textarea-placeholder,textarea::-moz-textarea-placeholder {
  color: #999;
  transition: color .5s
}

input:focus::-webkit-input-placeholder,input:focus::-moz-input-placeholder,input:hover::-webkit-input-placeholder,input:hover::-moz-input-placeholder,textarea:focus::-webkit-input-placeholder,textarea:focus::-moz-input-placeholder,textarea:hover::-webkit-input-placeholder,textarea:hover::-moz-input-placeholder {
  color: #c2c2c2
}

a {
  outline: none;
  text-decoration: none
}

a[href] {
  cursor: pointer
}

a:hover {
  cursor: pointer;
  text-decoration: none
}

a:focus {
  background-color: transparent
}

audio,canvas,progress,video {
  vertical-align: baseline;
  display: inline-block
}

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

html {
  width: 100%;
  scroll-behavior: initial;
  font-size: 100px;
  overflow-x: hidden
}

html.rul,html.aul {
  font-size: 4.17vw
}

a:focus,input:focus,p:focus,div:focus {
  -webkit-tap-highlight-color: transparent
}

img[src=""],img:not([src]) {
  opacity: 0
}

b {
  font-size: inherit;
  color: inherit;
  font-family: inherit
}

font {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  text-transform: inherit
}

.fl {
  float: left
}

.fr {
  float: right
}

.fw-100 {
  font-weight: 100
}

.fw-400 {
  font-weight: 400
}

.fw-600 {
  font-weight: 600
}

.cl:after {
  content: " ";
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  display: block
}

.hide {
  display: none
}

.show {
  display: block
}

.text_overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden
}

[data-ahref] {
  cursor: pointer
}

.f-left {
  text-align: left
}

.f-center {
  text-align: center
}

.f-right {
  text-align: right
}

.up-word {
  text-transform: uppercase
}

.v-show {
  visibility: visible
}

.v-hide {
  visibility: hidden
}

.pr {
  position: relative
}

.pa {
  position: absolute
}

.back-cover {
  background-size: cover
}

.back-contain {
  background-size: contain
}

.wid-10 {
  width: 10%
}

.wid-15 {
  width: 15%
}

.wid-20 {
  width: 20%
}

.wid-25 {
  width: 25%
}

.wid-30 {
  width: 30%
}

.wid-35 {
  width: 35%
}

.wid-40 {
  width: 40%
}

.wid-45 {
  width: 45%
}

.wid-50 {
  width: 50%
}

.wid-55 {
  width: 55%
}

.wid-60 {
  width: 60%
}

.wid-65 {
  width: 65%
}

.wid-70 {
  width: 70%
}

.wid-75 {
  width: 75%
}

.wid-80 {
  width: 80%
}

.wid-85 {
  width: 85%
}

.wid-90 {
  width: 90%
}

.wid-95 {
  width: 95%
}

.wid-100 {
  width: 100%
}

.op-0 {
  opacity: 0
}

.op-1 {
  opacity: .1
}

.op-2 {
  opacity: .2
}

.op-3 {
  opacity: .3
}

.op-4 {
  opacity: .4
}

.op-5 {
  opacity: .5
}

.op-6 {
  opacity: .6
}

.op-7 {
  opacity: .7
}

.op-8 {
  opacity: .8
}

.op-9 {
  opacity: .9
}

.op-10 {
  opacity: 1
}

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

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

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

.fxs {
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

.layer-photo {
  position: relative
}

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

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

.f-150 {
  font-size: 1.5rem
}

@media screen and (min-width: 900px) {
  .f-150 {
      letter-spacing:-3px
  }
}

.rul .f-150,.f-120 {
  font-size: 1.2rem
}

@media screen and (min-width: 900px) {
  .f-120 {
      letter-spacing:-3px
  }
}

.f-76 {
  font-size: .76rem
}

.f-72 {
  font-size: .72rem
}

.f-60 {
  font-size: .6rem
}

.f-56 {
  font-size: .56rem
}

.f-54 {
  font-size: .54rem
}

.f-50 {
  font-size: .5rem
}

.f-48 {
  font-size: .48rem
}

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

.f-44 {
  font-size: .44rem
}

.f-42 {
  font-size: .42rem
}

.f-40 {
  font-size: .4rem
}

.f-38 {
  font-size: .38rem
}

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

.f-34 {
  font-size: .34rem
}

.f-32 {
  font-size: .32rem
}

.f-30 {
  font-size: .3rem
}

.f-28 {
  font-size: .28rem
}

.f-26 {
  font-size: .26rem
}

.f-24,#policy .r1 .detail h2 {
  font-size: .24rem
}

.f-22 {
  font-size: .22rem
}

.f-20 {
  font-size: .2rem
}

.f-18,#policy .r1 .detail p {
  font-size: .94vw
}

.f-16 {
  font-size: .83vw
}

.f-14 {
  font-size: .73vw
}

.f-12 {
  font-size: 12px
}

@media screen and (max-width: 1700px) {
  html {
      font-size:90px
  }

  html.rul {
      font-size: 80px
  }

  .f-18,#policy .r1 .detail p {
      font-size: 16px
  }

  .f-16 {
      font-size: 15px
  }

  .f-14 {
      font-size: 14px
  }

  .f-12 {
      font-size: 12px
  }
}

@media screen and (max-width: 1500px) {
  html {
      font-size:80px
  }

  html.rul {
      font-size: 70px
  }

  .f-18,#policy .r1 .detail p {
      font-size: 16px
  }

  .f-16 {
      font-size: 15px
  }

  .f-14 {
      font-size: 14px
  }

  .f-12 {
      font-size: 12px
  }
}

@media screen and (max-width: 1400px) {
  html {
      font-size:70px
  }

  html.rul {
      font-size: 60px
  }

  .f-24,#policy .r1 .detail h2 {
      font-size: 18px
  }

  .f-22,.f-20 {
      font-size: 16px
  }

  .f-18,#policy .r1 .detail p,.f-16 {
      font-size: 14px
  }

  .f-14 {
      font-size: 13px
  }

  .f-12 {
      font-size: 12px
  }

  .maxSize {
      width: 88%
  }
}

@media screen and (max-width: 1080px) {
  html,html.rul {
      font-size:60px
  }

  .f-24,#policy .r1 .detail h2 {
      font-size: 16px
  }

  .f-22,.f-20 {
      font-size: 14px
  }

  .f-18,#policy .r1 .detail p,.f-16 {
      font-size: 13px
  }

  .f-14,.f-12 {
      font-size: 12px
  }
}

@media screen and (max-width: 900px) {
  html {
      font-size:50px
  }

  .f-24,#policy .r1 .detail h2 {
      font-size: 16px
  }

  .f-22,.f-20,.f-18,#policy .r1 .detail p,.f-16 {
      font-size: 15px
  }

  .f-14 {
      font-size: 13px
  }

  .f-12 {
      font-size: 12px
  }
}

@keyframes fadeInLeftSmall {
  0% {
      opacity: 0;
      transform: translate(-10%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInLeftSmall {
  animation-name: fadeInLeftSmall
}

@keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translate(-20%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInLeft {
  animation-name: fadeInLeftSmall
}

@keyframes fadeInRightSmall {
  0% {
      opacity: 0;
      transform: translate(10%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInRightSmall {
  animation-name: fadeInRightSmall
}

@keyframes fadeInRight {
  0% {
      opacity: 0;
      transform: translate(20%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInRight {
  animation-name: fadeInRight
}

@keyframes fadeInDownSmall {
  0% {
      opacity: 0;
      transform: translateY(-10px)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInDownSmall {
  animation-name: fadeInDownSmall
}

@keyframes fadeOutDownSmall {
  0% {
      opacity: 1;
      transform: none
  }

  to {
      opacity: 0;
      transform: translateY(10px)
  }
}

.fadeOutDownSmall {
  animation-name: fadeOutDownSmall
}

@keyframes fadeInUpSmall {
  0% {
      opacity: 0;
      transform: translateY(30px)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInUpSmall {
  animation-name: fadeInUpSmall;
  animation-timing-function: ease
}

@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translateY(30%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.fadeInUp {
  animation-name: fadeInUp
}

@keyframes rotateInUpSmall {
  0% {
      opacity: 0;
      transform: translateY(30px)rotate(5deg)
  }

  to {
      opacity: 1;
      transform: none
  }
}

.rotateInUpSmall {
  transform-origin: 0 0;
  animation-name: rotateInUpSmall
}

/* @font-face {
  font-family: en-bold;
  src: url(Gilroy-Bold.52c8790d.ttf)format("truetype")
}

@font-face {
  font-family: en-Medium;
  src: url(Gilroy-Medium.5b69c82b.ttf)format("truetype")
}

@font-face {
  font-family: en-regular;
  src: url(Gilroy-Regular.6cbec808.ttf)format("truetype")
} */

a,span,p,small,li,div {
  font-family: en-regular
}

.en_bold,#policy .r1 .detail h2,#solutionDetail .r3 .left .layer-topic:before,#detail .r2 .inner .top .layer-topic:before,#detail .r1 .inner .detail strong,#about .r3 .inner .layer-topic:before,#about .r2 .inner .top .layer-topic:before,#about .r1 .inner .top .layer-topic:before {
  font-family: en-bold;
  font-weight: 400
}

.en_mid,#policy .r1 .detail p,.bloc footer .fMid .fxs .con p b,#toast span,.layer-inputBox .childDown>li>a,.en_re {
  font-family: en-regular;
  font-weight: 400
}

.wc {
  color: #fff
}

.mc {
  color: #9fb935
}

.oc {
  color: #ffc973
}

.gray {
  color: #707070
}

.hidden {
  display: none!important
}

p,small {
  line-height: 1.65
}

.mb-90 {
  margin-bottom: .9rem
}

.mb-80 {
  margin-bottom: .8rem
}

.mb-70 {
  margin-bottom: .7rem
}

.mb-60 {
  margin-bottom: .6rem
}

.mb-50 {
  margin-bottom: .5rem
}

.mb-40 {
  margin-bottom: .4rem
}

.mb-30 {
  margin-bottom: .3rem
}

.mb-20 {
  margin-bottom: .2rem
}

.mb-10 {
  margin-bottom: .1rem
}

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

.trans,.bloc header .pcNav .right .items>li>i:before,.bloc header .pcNav .right .items>li>i:after,.layer-arrow:before,.layer-arrow:after {
  transition: all .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
}

.layer-icon .icon {
  display: block
}

.layer-icon .mr {
  margin-right: .83vw
}

.layer-down {
  position: relative
}

.layer-down>a {
  text-transform: uppercase;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 2px
}

.layer-down>a em {
  border-width: 4px;
  border-color: #fff transparent transparent;
  margin-top: 2px;
  display: block
}

.layer-down .child {
  width: calc(100% + 1rem);
  opacity: 0;
  pointer-events: none;
  background-color: #fff;
  border-radius: .2rem;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: .2rem;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965);
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 99%;
  left: -.5rem;
  box-shadow: 0 .1rem .2rem rgba(136,147,89,.28)
}

.layer-down .child>a {
  text-align: center;
  width: 100%;
  line-height: .4rem;
  transition: color .5s cubic-bezier(.435,.25,.15,.965)
}

.layer-down .child>a:hover {
  color: #9fb935;
  text-decoration: underline
}

.layer-down.on .child {
  opacity: 1;
  pointer-events: auto
}

.layer-arrow {
  width: 1.35vw;
  height: 1.35vw;
  --active: #fff;
  opacity: 0;
  margin: -.68vw 0 0 -.68vw;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965),transform .3s cubic-bezier(.435,.25,.15,.965);
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: matrix(1,0,0,.6,3,0)
}

.layer-arrow:after {
  content: "";
  width: .15rem;
  height: 2px;
  background: var(--active);
  transform-origin: .09rem;
  border-radius: 1px;
  margin: -.04rem 0 0 -.05rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(58deg)
}

.layer-arrow:before {
  content: "";
  width: .15rem;
  height: 2px;
  background: var(--active);
  transform-origin: .09rem;
  border-radius: 1px;
  margin: .03rem 0 0 -.05rem;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-58deg)
}

.layer-button {
  cursor: pointer;
  isolation: isolate;
  z-index: 3;
  border: 1px solid #9fb935;
  border-radius: 5.21vw;
  padding: 1.25vw 3.65vw;
  position: relative;
  overflow: hidden
}

.layer-button .mr {
  margin-right: 10px
}

.layer-button .txt {
  perspective: 26.04vw;
  z-index: 10;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  overflow: hidden
}

.layer-button .txt>span {
  transition: color .7s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.layer-button>.iconfont {
  z-index: 10;
  transition: transform .8s cubic-bezier(.435,.25,.15,.965),color .7s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

.layer-button:after {
  content: "";
  width: calc(100% + 1.56vw);
  height: calc(100% + 1.56vw);
  z-index: 2;
  background-color: #b1cb47;
  border-radius: 5.21vw;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: -.78vw;
  left: -.78vw;
  transform: translate(-101%)
}

@media screen and (orientation: landscape) {
  .layer-button:hover .txt {
      transform:translate(4px)
  }

  .layer-button:hover .txt span {
      color: #fff
  }

  .layer-button:hover>.iconfont {
      transform: translate(7px)
  }

  .layer-button:hover:after {
      transform: translate(0%)
  }
}

.layer-type {
  cursor: pointer;
  height: 2.6vw;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  background-color: #f6f8f1;
  border: 3px solid #f6f8f1;
  transition: border-color 1s cubic-bezier(.435,.25,.15,.965),opacity .7s cubic-bezier(.435,.25,.15,.965),transform .7s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  overflow: hidden;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0)
}

.layer-type .layer-icon {
  width: 1.04vw;
  height: 1.04vw;
  z-index: 10;
  opacity: 0;
  background: #9fb935;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  right: 0
}

.layer-type .layer-icon i {
  font-size: 12px;
  transform: scale(.6)
}

.layer-type .txt {
  perspective: 26.04vw;
  z-index: 10;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  overflow: hidden
}

.layer-type .txt>span {
  transition: color .7s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.layer-type:after {
  content: "";
  width: calc(100% + 1.56vw);
  height: calc(100% + 1.56vw);
  z-index: 2;
  background-color: #eff7db;
  border-radius: 5.21vw;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: -.78vw;
  left: -.78vw;
  transform: translate(-101%)
}

.layer-type:hover .txt {
  transform: translate(4px)
}

.layer-type:hover .txt span {
  color: #9fb935
}

.layer-type:hover:after {
  transform: translate(0%)
}

.layer-type.on {
  border-color: #9fb935
}

.layer-type.on .txt {
  transform: translate(4px)
}

.layer-type.on .txt span {
  color: #9fb935
}

.layer-type.on:after {
  transform: translate(0%)
}

.layer-type.on .layer-icon {
  opacity: 1
}

.layer-btn {
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  isolation: isolate;
  z-index: 3;
  background-color: #9fb935;
  border-radius: 5.21vw;
  padding: 1.25vw 2.08vw;
  position: relative;
  overflow: hidden;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0)
}

.layer-btn .mr {
  margin-right: 10px
}

.layer-btn .mr-16 {
  margin-right: .83vw
}

.layer-btn .txt {
  perspective: 26.04vw;
  z-index: 10;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965),opacity .3s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  overflow: hidden
}

.layer-btn .txt>span {
  transition: color .7s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.layer-btn .iconfont {
  z-index: 10;
  transition: transform .8s cubic-bezier(.435,.25,.15,.965),color .7s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

.layer-btn:after {
  content: "";
  width: calc(100% + 1.56vw);
  height: calc(100% + 1.56vw);
  z-index: 2;
  background-color: #b1cb47;
  border-radius: 5.21vw;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: -.78vw;
  left: -.78vw;
  transform: translate(-101%)
}

@media screen and (orientation: landscape) {
  .layer-btn:hover .txt {
      transform:translate(4px)
  }

  .layer-btn:hover .iconfont {
      transform: translate(7px)
  }

  .layer-btn:hover:after {
      transform: translate(0%)
  }
}

.layer-more {
  cursor: pointer;
  padding: 10px 0;
  position: relative;
  overflow: hidden
}

.layer-more .mr {
  margin-right: .3rem
}

.layer-more .txt {
  perspective: 26.04vw;
  z-index: 10;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  overflow: hidden
}

.layer-more .txt>span {
  transition: color .7s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.layer-more .iconfont {
  z-index: 10;
  transition: transform .8s cubic-bezier(.435,.25,.15,.965),color .7s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

.layer-more:after {
  content: "";
  width: calc(100% - 8px);
  height: 2px;
  transform-origin: 0%;
  z-index: 2;
  background-color: #9fb935;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: scaleX(0)
}

@media screen and (orientation: landscape) {
  .layer-more:hover .iconfont {
      transform:translate(-8px)
  }

  .layer-more:hover:after {
      transform: scaleX(1)
  }
}

.layer-topic h2 {
  letter-spacing: -2px;
  font-size: 1.2rem;
  line-height: .85
}

.layer-topic h2 b {
  color: #9fb935;
  font-size: inherit;
  font-family: inherit
}

.layer-topic h2.f-76 {
  font-size: .76rem
}

.layer-topic h2.f-48 {
  font-size: .48rem
}

.layer-topic h2.f-120 {
  font-size: 1.2rem
}

.layer-topic h1 {
  letter-spacing: -1px;
  line-height: .8
}

.layer-topic h1 b {
  color: #9fb935;
  font-size: inherit;
  font-family: inherit
}

.layer-search {
  height: 2.92vw;
  border-bottom: 1px solid rgba(112,112,112,.3);
  position: relative
}

.layer-search input[type=text] {
  height: 100%;
  width: 100%;
  text-align: center;
  border: none;
  display: block
}

.layer-search input[type=text]::-ms-input-placeholder {
  color: rgba(112,112,112,.5)
}

.layer-search input[type=text]::placeholder {
  color: rgba(112,112,112,.5)
}

.layer-search input[type=submit] {
  height: 100%;
  background-color: transparent;
  border: none;
  position: absolute;
  top: 0;
  right: 0
}

.layer-bg {
  position: relative
}

.layer-bg .skew {
  background-color: #9fb935;
  transform: skew(-28deg)
}

.layer-bg .skew:after {
  content: "";
  transform-origin: 0%;
  background-color: #fff;
  transition: transform .7s cubic-bezier(.435,.25,.15,.965);
  transform: scaleX(0)
}

.layer-bg .pr {
  z-index: 10;
  position: relative
}

@media screen and (orientation: landscape) {
  .layer-bg.skewHover:hover .skew:after {
      transform:scaleX(1)
  }
}

.layer-li {
  padding-left: 1.3vw;
  position: relative
}

.layer-li .dot {
  width: 5px;
  height: 5px;
  background-color: #707070;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 10px;
  left: 0;
  transform: skew(-20deg)
}

.layer-li .dot.wc {
  background-color: #fff
}

.layer-li.right {
  text-align: right;
  padding-left: 0;
  padding-right: 1.56vw
}

.layer-li.right .dot {
  left: auto;
  right: 0
}

.layer-scr {
  pointer-events: none;
  width: 100%;
  z-index: 12;
  animation: .8s cubic-bezier(.435,.25,.15,.965) infinite alternate scrFn;
  position: absolute;
  bottom: 4.27vw;
  left: 0
}

.layer-scr>img {
  width: 2.71vw;
  display: block
}

.layer-pro {
  position: relative;
  overflow: hidden
}

.layer-pro .photo {
  width: 100%;
  padding-bottom: 100%;
  transition: transform 1s cubic-bezier(.435,.25,.15,.965)
}

.layer-pro h2,.layer-pro h3 {
  text-align: center;
  width: 100%;
  padding: .2rem .1rem;
  line-height: 1.2;
  position: absolute;
  bottom: 0;
  left: 0
}

@media screen and (orientation: landscape) {
  .layer-pro:hover .photo {
      transform:scale(1.1)
  }
}

.layer-downBox {
  cursor: pointer;
  border: 1px solid #9fb935;
  transition: border-color .5s cubic-bezier(.435,.25,.15,.965),background-color .5s cubic-bezier(.435,.25,.15,.965)
}

.layer-downBox .topPart {
  height: 3.65vw;
  width: 100%;
  padding: 0 1.56vw
}

.layer-downBox .topPart .arrow,.layer-downBox .topPart .layer-down>a em,.layer-down>a .layer-downBox .topPart em {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: #9fb935;
  margin-top: 5px;
  transition: transform .5s cubic-bezier(.435,.25,.15,.965)
}

.layer-downBox .childDown {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 1.56vw;
  display: none
}

.layer-downBox .childDown .input--check {
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px 0
}

.layer-downBox .childDown .input--check label {
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

.layer-downBox .childDown .input--check .input__box {
  text-align: center;
  width: 1.35vw;
  height: 1.35vw;
  color: transparent;
  border: 2px solid #9fb935;
  margin-right: .83vw;
  font-size: 12px;
  line-height: 1.25vw;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),background-color .5s cubic-bezier(.435,.25,.15,.965);
  display: inline-block;
  position: relative
}

.layer-downBox .childDown .input--check .tint {
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: inline-block
}

.layer-downBox .childDown .input--check input {
  display: none
}

.layer-downBox .childDown .input--check input:checked+.input__box {
  color: #fff;
  background-color: #9fb935
}

.layer-downBox .childDown .input--check input:checked+.input__box+.tint {
  color: #9fb935;
  font-weight: 700
}

.layer-downBox.on {
  background-color: #f6f8f1;
  border-color: #f6f8f1
}

.layer-downBox.on .topPart .arrow,.layer-downBox.on .topPart .layer-down>a em,.layer-down>a .layer-downBox.on .topPart em {
  transform: scaleY(-1)
}

.layer-pop {
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  padding: 0 6%;
  transition: opacity 1.017s cubic-bezier(.33,0,0,1),transform 1.017s cubic-bezier(.33,0,0,1),visibility 0s 1.017s,-webkit-transform 1.017s cubic-bezier(.33,0,0,1);
  position: fixed;
  transform: translate(-20%)
}

.layer-pop .mk {
  height: 100%;
  width: 300%;
  opacity: 0;
  background-color: rgba(0,0,0,.4);
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  left: -100%
}

.layer-pop .ani {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.435,.25,.15,.965) .8s,transform .7s cubic-bezier(.435,.25,.15,.965) .8s;
  transform: translateY(10px)
}

.layer-pop .ani.dey1 {
  transition-delay: .9s
}

.layer-pop .ani.dey2 {
  transition-delay: 1s
}

.layer-pop .ani.dey3 {
  transition-delay: 1.1s
}

.layer-pop .ani.dey4 {
  transition-delay: 1.2s
}

.layer-pop .ani.dey5 {
  transition-delay: 1.3s
}

.layer-pop .ani.dey6 {
  transition-delay: 1.4s
}

.layer-pop .group {
  width: 10rem;
  pointer-events: auto;
  z-index: 5;
  background-color: #fdfff8;
  position: relative
}

.layer-pop .group .pMain {
  width: 100%;
  padding: 5% 10%
}

.layer-pop.on {
  opacity: 1;
  visibility: inherit;
  transition: none;
  transform: none
}

.layer-pop.on .mk {
  opacity: 1
}

.layer-pop.on .ani {
  opacity: 1;
  transform: none
}

.layer-pop.on .group {
  animation: 1.2s cubic-bezier(.33,0,0,1) backwards pop-in
}

.layer-inputBox {
  display: inline-block;
  position: relative
}

.layer-inputBox .dot {
  color: red;
  font-size: 12px
}

.layer-inputBox h4 {
  line-height: .32rem;
  position: relative
}

.layer-inputBox h4 em.dot {
  color: red;
  font-size: 12px;
  position: absolute;
  top: -.03rem;
  right: calc(100% + .05rem)
}

.layer-inputBox .input-text {
  height: .5rem;
  width: 100%;
  position: relative
}

.layer-inputBox .input-text>input {
  width: 100%;
  height: 100%;
  -o-transition: all .3s ease-out;
  z-index: 10;
  background-color: #f6f8f1;
  border: none;
  padding: 0 2.08vw 0 1.04vw;
  font-weight: 400;
  transition: all .3s ease-out;
  display: block;
  position: relative
}

.layer-inputBox .input-text>input::-ms-input-placeholder {
  color: rgba(112,112,112,.5)
}

.layer-inputBox .input-text>input::placeholder {
  color: rgba(112,112,112,.5)
}

.layer-inputBox .input-text>input:focus,.layer-inputBox .input-text>input.on {
  background-color: rgba(159,185,53,.2);
  border-color: transparent
}

.layer-inputBox .input-text>input:focus~.input-border,.layer-inputBox .input-text>input.on~.input-border {
  background-color: #fff
}

.layer-inputBox .input-text>input:focus~.input-border:first-of-type:before,.layer-inputBox .input-text>input.on~.input-border:first-of-type:before {
  width: 100%;
  transition: all .15s ease-in-out
}

.layer-inputBox .input-text>input:focus~.input-border:first-of-type:after,.layer-inputBox .input-text>input.on~.input-border:first-of-type:after {
  height: 100%;
  transition: all .15s ease-in-out .15s
}

.layer-inputBox .input-text>input:focus~.input-border:last-of-type,.layer-inputBox .input-text>input.on~.input-border:last-of-type {
  background: 0 0
}

.layer-inputBox .input-text>input:focus~.input-border:last-of-type:before,.layer-inputBox .input-text>input.on~.input-border:last-of-type:before {
  width: 100%;
  transition: all .15s ease-in-out .3s
}

.layer-inputBox .input-text>input:focus~.input-border:last-of-type:after,.layer-inputBox .input-text>input.on~.input-border:last-of-type:after {
  height: 100%;
  transition: all .15s ease-in-out .45s;
  top: 0
}

.layer-inputBox .input-text>input.erro {
  background-color: rgba(252,1,26,.1);
  border-color: transparent
}

.layer-inputBox .input-text>input.erro~.input-border {
  background-color: #fff
}

.layer-inputBox .input-text>input.erro~.input-border:before,.layer-inputBox .input-text>input.erro~.input-border:after {
  background-color: #fc011a
}

.layer-inputBox .input-text>input.erro~.input-border:first-of-type:before {
  width: 100%;
  transition: all .15s ease-in-out
}

.layer-inputBox .input-text>input.erro~.input-border:first-of-type:after {
  height: 100%;
  transition: all .15s ease-in-out .15s
}

.layer-inputBox .input-text>input.erro~.input-border:last-of-type {
  background: 0 0
}

.layer-inputBox .input-text>input.erro~.input-border:last-of-type:before {
  width: 100%;
  transition: all .15s ease-in-out .3s
}

.layer-inputBox .input-text>input.erro~.input-border:last-of-type:after {
  height: 100%;
  transition: all .15s ease-in-out .45s;
  top: 0
}

.layer-inputBox .input-text .input-border {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0
}

.layer-inputBox .input-text .input-border:before,.layer-inputBox .input-text .input-border:after {
  content: "";
  width: 0;
  background-color: #9fb935;
  transition: all .3s ease-in-out;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0
}

.layer-inputBox .input-text .input-border:first-of-type:before {
  height: 2px;
  width: 0;
  top: 0;
  left: 0
}

.layer-inputBox .input-text .input-border:first-of-type:after {
  height: 0;
  width: 2px;
  top: 0;
  right: 0
}

.layer-inputBox .input-text .input-border:last-of-type:before {
  height: 2px;
  width: 0;
  background-color: #9fb935;
  top: calc(100% - 2px);
  right: 0
}

.layer-inputBox .input-text .input-border:last-of-type:after {
  height: 0;
  width: 2px;
  background-color: #9fb935;
  top: calc(100% - 2px);
  left: 0
}

.layer-inputBox .arrow,.layer-inputBox .layer-down>a em,.layer-down>a .layer-inputBox em {
  width: 0;
  height: 0;
  transform-origin: 0 20%;
  z-index: 10;
  border: 5px solid transparent;
  border-top-color: #9fb935;
  margin: auto 0;
  transition: transform .5s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 5px;
  bottom: 0;
  right: .2rem
}

.layer-inputBox .childDown {
  width: 100%;
  max-height: calc(1.04vw + 2rem);
  background-color: #eff7db;
  padding: 1.04vw 1.56vw;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  overflow: auto
}

.layer-inputBox .childDown>li {
  width: 100%
}

.layer-inputBox .childDown>li>a {
  width: 100%;
  line-height: .4rem;
  display: block
}

.layer-inputBox.on .arrow,.layer-inputBox.on .layer-down>a em,.layer-down>a .layer-inputBox.on em {
  transform: scaleY(-1)
}

.alanFn {
  opacity: 0
}

[data-choose] {
  cursor: pointer
}

#mailPop .pMain {
  z-index: 2;
  max-height: 94vh;
  position: relative;
  overflow: auto
}

#mailPop .pMain .layer-topic h2,#mailPop .pMain .layer-topic p {
  text-align: center
}

#mailPop .pMain h3 {
  margin-bottom: 10px;
  position: relative
}

#mailPop .pMain h3 em.dot {
  color: red;
  font-size: 12px;
  position: absolute;
  top: -.03rem;
  right: calc(100% + .05rem)
}

#mailPop .pMain .box {
  z-index: 22;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: end;
  align-items: flex-end;
  position: relative
}

#mailPop .pMain .box .wid-45 {
  width: 48%
}

#mailPop .pMain .box .layer-inputBox {
  margin-bottom: 5px
}

#mailPop .pMain .box textarea {
  width: 100%;
  height: 6.25vw;
  background-color: #f6f8f1;
  border: 2px solid #f6f8f1;
  margin-bottom: .3rem;
  padding: 1.04vw;
  transition: border-color .5s cubic-bezier(.435,.25,.15,.965)
}

#mailPop .pMain .box textarea::-ms-input-placeholder {
  color: rgba(112,112,112,.5)
}

#mailPop .pMain .box textarea::placeholder {
  color: rgba(112,112,112,.5)
}

#mailPop .pMain .box textarea.erro {
  border-color: #fc011a
}

#mailPop .pMain .other .input--check {
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px 0
}

#mailPop .pMain .other .input--check label {
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

#mailPop .pMain .other .input--check label .f-16 {
  width: calc(100% - .42rem)
}

#mailPop .pMain .other .input--check .input__box {
  text-align: center;
  width: .26rem;
  height: .26rem;
  color: transparent;
  border: 2px solid #9fb935;
  margin-right: .16rem;
  font-size: 12px;
  line-height: .24rem;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),background-color .5s cubic-bezier(.435,.25,.15,.965);
  display: inline-block;
  position: relative
}

#mailPop .pMain .other .input--check .tint {
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: inline-block
}

#mailPop .pMain .other .input--check input {
  display: none
}

#mailPop .pMain .other .input--check input:checked+.input__box {
  color: #fff;
  background-color: #9fb935
}

#mailPop .pMain .other .input--check input.erro+.input__box {
  border-color: red
}

#mailPop .pMain .other .input--check input.erro+.input__box+.gray {
  color: red
}

#mailPop .pMain .bm {
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#mailPop .pMain .bm .layer-btn {
  width: 15.63vw;
  margin: .1rem auto 0
}

#mailPop .pMain .bm .sub {
  position: relative
}

#mailPop .pMain .bm .sub .loadIcon {
  width: .34rem;
  height: .34rem;
  opacity: 0;
  transition: opacity .3s
}

#mailPop .pMain .bm .sub.loadGo {
  pointer-events: none
}

#mailPop .pMain .bm .sub.loadGo .txt {
  opacity: 0
}

#mailPop .pMain .bm .sub.loadGo .loadIcon {
  opacity: 1;
  animation: 3s linear infinite loopl
}

#mailPop .success {
  height: 100%;
  width: 100%;
  z-index: 20;
  background-color: #fdfff8;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0
}

#mailPop .success img {
  height: 6.35vw;
  margin: 0 auto 1.88vw;
  display: block
}

#mailPop .success p {
  text-align: center;
  line-height: 1
}

#mailPop .success p b {
  color: #9fb935;
  font-weight: 400;
  font-size: inherit;
  font-family: inherit;
  display: block
}

#mailPop .closePop {
  width: 5.21vw;
  text-align: center;
  position: absolute;
  top: 0;
  left: 100%
}

#toast {
  pointer-events: none;
  opacity: 0;
  z-index: 2000;
  width: 100%;
  height: 40vw;
  position: fixed;
  bottom: 0;
  left: 0
}

#toast span {
  max-width: 70vw;
  color: #fff;
  text-align: center;
  background-color: #9fb935;
  border-radius: .05rem;
  padding: 8px .2rem;
  font-size: .16rem;
  display: inline-block;
  box-shadow: 0 10px 1.56vw -3px rgba(0,0,0,.2)
}

.swiper-wrapper {
  grid-auto-flow: column;
  display: grid
}

.bloc header {
  width: 100%;
  height: 6.51vw;
  z-index: 200;
  padding: 0 8.33vw;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965),height .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965),background-color .5s cubic-bezier(.435,.25,.15,.965);
  position: fixed;
  top: 0;
  left: 0
}

.bloc header .pcNav {
  width: 100%
}

.bloc header .pcNav>.layer-icon {
  position: relative
}

.bloc header .pcNav>.layer-icon .logo {
  height: 3.02vw;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.bloc header .pcNav>.layer-icon .logo_w,.bloc header .pcNav>.layer-icon .logo_g {
  height: 100%;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  left: 0
}

.bloc header .pcNav .right .items>li {
  display: block;
  position: relative
}

.bloc header .pcNav .right .items>li>i {
  width: 1.04vw;
  height: 1.04vw;
  --active: #fff;
  opacity: 0;
  margin: -10px 0 0 -10px;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965),transform .3s cubic-bezier(.435,.25,.15,.965);
  display: block;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: matrix(.6,0,0,-1,0,-3)
}

.bloc header .pcNav .right .items>li>i:after {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--active);
  transform-origin: 50% 9px;
  border-radius: 1px;
  margin: -1px 0 0 -8px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(58deg)
}

.bloc header .pcNav .right .items>li>i:before {
  content: "";
  width: 10px;
  height: 2px;
  background: var(--active);
  transform-origin: 50% 9px;
  border-radius: 1px;
  margin: -1px 0 0 -2px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-58deg)
}

.bloc header .pcNav .right .items>li>a {
  z-index: 4;
  padding: 0 1.67vw;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: block;
  position: relative
}

.bloc header .pcNav .right .items>li.on i {
  opacity: 1;
  --active: #9fb935;
  transform: matrix(1,0,0,-1,0,0)
}

.bloc header .pcNav .right .items>li.on i:before {
  transform: rotate(-45deg)
}

.bloc header .pcNav .right .items>li.on i:after {
  transform: rotate(45deg)
}

.bloc header .pcNav .right .items>li.on>a {
  color: #9fb935
}

.bloc header .pcNav .right .items>li:hover i {
  opacity: 1;
  --active: #9fb935;
  transform: matrix(1,0,0,-1,0,0)
}

.bloc header .pcNav .right .items>li:hover i:before {
  transform: rotate(-45deg)
}

.bloc header .pcNav .right .items>li:hover i:after {
  transform: rotate(45deg)
}

.bloc header .pcNav .right .items>li:hover>a {
  color: #9fb935!important
}

.bloc header .pcNav .right .other .line {
  width: 2px;
  height: 1.04vw;
  background-color: #9fb935;
  transform: rotate(28deg)
}

.bloc header .pcNav .right .other .searchIcon {
  padding: 0 1.56vw
}

.bloc header .pcNav .right .other .searchIcon i {
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.bloc header .pcNav .right .other .searchIcon:hover i {
  color: #9fb935
}

.bloc header nav.app-nav {
  z-index: 2000;
  width: 100vw;
  height: 1rem;
  pointer-events: auto;
  transition: all .5s;
  position: fixed;
  top: 0;
  left: 0
}

.bloc header nav.app-nav .inner_top {
  height: 1.36rem;
  width: 100%;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: start;
  align-items: flex-start;
  transition: all .5s;
  display: -ms-flexbox;
  display: flex
}

.bloc header nav.app-nav .inner_top .topic {
  z-index: 10;
  height: 1rem;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0);
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 5%;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

.bloc header nav.app-nav .inner_top .topic #app-menu {
  z-index: 10;
  display: inline-block;
  position: relative
}

.bloc header nav.app-nav .inner_top .topic #app-menu .line {
  padding-top: 3px;
  padding-bottom: 3px;
  transition: all .4s;
  display: block
}

.bloc header nav.app-nav .inner_top .topic #app-menu .line:before {
  content: "";
  height: 2px;
  width: .44rem;
  background-color: #fff;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  transition: transform .4s .2s,background-color .5s;
  display: block
}

.bloc header nav.app-nav .inner_top .topic #app-menu .line:nth-of-type(2):before {
  width: .3rem;
  margin-left: 7px
}

.bloc header nav.app-nav .inner_top .topic .app-logo {
  z-index: 10;
  height: 100%;
  position: relative
}

.bloc header nav.app-nav .inner_top .topic .app-logo>a {
  height: .5rem;
  display: inline-block;
  position: relative
}

.bloc header nav.app-nav .inner_top .topic .app-logo>a .logo_w {
  height: 100%;
  opacity: 1;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  left: 0
}

.bloc header nav.app-nav .inner_top .topic .app-logo>a .logo_g {
  height: 100%;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  left: 0
}

.bloc header nav.app-nav .inner_top .topic .layer-down {
  height: 100%;
  position: absolute;
  top: 0;
  right: calc(5% + 2rem)
}

.bloc header nav.app-nav .inner_top .topic .layer-down>a {
  padding-top: 5px
}

.bloc header nav.app-nav .inner_top .topic .app-search {
  height: 1rem;
  z-index: 10;
  position: absolute;
  top: 0;
  right: calc(1rem + 5%)
}

.bloc header nav.app-nav .inner_top .topic .app-search>i {
  color: #fff;
  font-size: .38rem
}

.bloc header nav.app-nav .inner_top.on {
  height: 1rem;
  background-color: #fdfff8;
  box-shadow: 0 2px 8px rgba(0,0,0,.1)
}

.bloc header nav.app-nav .inner_top.on .topic {
  border-bottom: 1px solid rgba(0,0,0,.1)
}

.bloc header nav.app-nav .inner_top.on .topic #app-menu .line:before {
  background-color: #333
}

.bloc header nav.app-nav .inner_top.on .topic .app-logo>a .logo_w {
  opacity: 0
}

.bloc header nav.app-nav .inner_top.on .topic .app-logo>a .logo_g {
  opacity: 1
}

.bloc header nav.app-nav .inner_top.on .topic .layer-down .wc {
  color: #333
}

.bloc header nav.app-nav .inner_top.on .topic .layer-down .wc em {
  border-color: #333 transparent transparent
}

.bloc header nav.app-nav .inner_top.on .topic .app-search>i {
  color: #333
}

.bloc header nav.app-nav .inner_mid {
  width: 100%;
  height: calc(100% - 1rem);
  background-color: #fdfff8;
  position: absolute;
  top: 1rem;
  left: 0;
  overflow: hidden
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList {
  padding: 0 5%;
  transition: background-color .5s;
  position: relative
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList>a {
  height: 1.5rem;
  white-space: nowrap;
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,.09);
  -ms-flex-align: center;
  align-items: center;
  line-height: 1.5rem;
  display: -ms-flexbox;
  display: flex
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList>i {
  height: .48rem;
  text-align: right;
  font-size: .24rem;
  line-height: .48rem;
  transition: transform .5s ease-in-out;
  display: inline-block
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList.active {
  background-color: rgba(0,135,85,.05)
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList.active>i {
  transform: rotate(90deg)scaleY(1.2)
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second {
  max-height: 0;
  background-color: rgba(0,135,85,.05);
  transition: all .5s;
  overflow: hidden
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second>li {
  padding: 0 9%;
  position: relative
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second>li:first-of-type {
  padding-top: .2rem
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second>li:last-of-type {
  padding-bottom: .2rem
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second>li>a {
  padding: .3rem 0;
  display: block
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second>li.active {
  background-color: #f0f1f2
}

.bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second.active {
  max-height: 100vh
}

.bloc header nav.app-nav.on {
  height: 100vh
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(1) {
  transform: translateY(8px)
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(1):before {
  transform: rotate(45deg)
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(2) {
  opacity: 0
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(3) {
  transform: translateY(-8px)
}

.bloc header nav.app-nav.on .inner_top .topic #app-menu .line:nth-of-type(3):before {
  transform: rotate(-45deg)
}

.bloc header.navBlack {
  height: 1rem;
  background-color: #fff
}

.bloc header.navBlack .pcNav>.layer-icon .logo {
  opacity: 0
}

.bloc header.navBlack .pcNav>.layer-icon .logo_g {
  opacity: 1
}

.bloc header.navBlack .pcNav .right .items>li:not(.on) .wc,.bloc header.navBlack .pcNav .right .other .wc {
  color: #707070
}

.bloc header.navBlack .pcNav .right .other em {
  border-color: #707070 transparent transparent
}

.bloc header.navBlack nav.app-nav .inner_top {
  height: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.1)
}

.bloc header.navBlack nav.app-nav .inner_top .topic {
  border-bottom: 1px solid rgba(0,0,0,.1)
}

.bloc header.navBlack nav.app-nav .inner_top .topic #app-menu .line:before {
  background-color: #333
}

.bloc header.navBlack nav.app-nav .inner_top .topic .app-logo>a .logo_w {
  opacity: 0
}

.bloc header.navBlack nav.app-nav .inner_top .topic .app-logo>a .logo_g {
  opacity: 1
}

.bloc header.navBlack nav.app-nav .inner_top .topic .layer-down .wc {
  color: #333
}

.bloc header.navBlack nav.app-nav .inner_top .topic .layer-down .wc em {
  border-color: #333 transparent transparent
}

.bloc header.navBlack nav.app-nav .inner_top .topic .app-search>i {
  color: #333
}

.bloc header.blackType {
  height: 1rem
}

.bloc header.blackType .pcNav>.layer-icon .logo {
  opacity: 0
}

.bloc header.blackType .pcNav>.layer-icon .logo_g {
  opacity: 1
}

.bloc header.blackType .pcNav .right .items>li:not(.on) .wc,.bloc header.blackType .pcNav .right .other .wc {
  color: #707070
}

.bloc header.blackType .pcNav .right .other em {
  border-color: #707070 transparent transparent
}

.bloc header.blackType nav.app-nav .inner_top {
  height: 1rem
}

.bloc header.blackType nav.app-nav .inner_top .topic #app-menu .line:before {
  background-color: #333
}

.bloc header.blackType nav.app-nav .inner_top .topic .app-logo>a .logo_w {
  opacity: 0
}

.bloc header.blackType nav.app-nav .inner_top .topic .app-logo>a .logo_g {
  opacity: 1
}

.bloc header.blackType nav.app-nav .inner_top .topic .layer-down .wc {
  color: #333
}

.bloc header.blackType nav.app-nav .inner_top .topic .layer-down .wc em {
  border-color: #333 transparent transparent
}

.bloc header.blackType nav.app-nav .inner_top .topic .app-search>i {
  color: #333
}

.bloc header.navWc {
  height: 1rem;
  background-color: #fff
}

.bloc header.navWc .pcNav>.layer-icon .logo {
  opacity: 0
}

.bloc header.navWc .pcNav>.layer-icon .logo_g {
  opacity: 1
}

.bloc header.navWc .pcNav .right .items>li:not(.on) .wc,.bloc header.navWc .pcNav .right .other .wc {
  color: #707070
}

.bloc header.navWc .pcNav .right .other em {
  border-color: #707070 transparent transparent
}

.bloc header.navWc nav.app-nav .inner_top {
  height: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.1)
}

.bloc header.navWc nav.app-nav .inner_top .topic {
  border-bottom: 1px solid rgba(0,0,0,.1)
}

.bloc header.navWc nav.app-nav .inner_top .topic #app-menu .line:before {
  background-color: #333
}

.bloc header.navWc nav.app-nav .inner_top .topic .app-logo>a .logo_w {
  opacity: 0
}

.bloc header.navWc nav.app-nav .inner_top .topic .app-logo>a .logo_g {
  opacity: 1
}

.bloc header.navWc nav.app-nav .inner_top .topic .app-search>i {
  color: #333
}

.bloc header.down {
  opacity: 0
}

.bloc header.down:hover {
  opacity: 1
}

.bloc header.down+main>.tree {
  transform: translateY(-6.25vw)
}

.bloc header.down+main>.tree a.on .msg .img {
  opacity: 0!important
}

.bloc footer {
  background-color: #545454;
  position: relative;
  overflow: hidden
}

.bloc footer .fBg .line {
  width: 100%;
  display: block;
  position: relative
}

.bloc footer .fBg .line .st {
  stroke-dasharray: 200%;
  stroke-dashoffset: 200%;
  transition: stroke-dashoffset 2s cubic-bezier(.435,.25,.15,.965)
}

.bloc footer .fBg .line .st1,.bloc footer .fBg .line .st2 {
  stroke: rgba(255,255,255,.07);
  stroke-width: 1px
}

.bloc footer .fBg .line .st3 {
  fill: #9fb935
}

.bloc footer .fBg .line.go .st {
  stroke-dashoffset: 120%
}

.bloc footer .fMid {
  z-index: 10;
  padding: 6.77vw 6.67vw 6.77vw 13.54vw;
  position: relative
}

.bloc footer .fMid .items {
  width: 50%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex
}

.bloc footer .fMid .items>li {
  padding-left: 2.6vw;
  position: relative
}

.bloc footer .fMid .items>li .layer-arrow {
  left: 0
}

.bloc footer .fMid .items>li>a {
  z-index: 10;
  line-height: 1.35;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: block;
  position: relative
}

.bloc footer .fMid .items>li.on .layer-arrow,.bloc footer .fMid .items>li:hover .layer-arrow {
  opacity: 1;
  --active: #9fb935;
  transform: matrix(1,0,0,1,0,0)
}

.bloc footer .fMid .items>li.on .layer-arrow:after,.bloc footer .fMid .items>li:hover .layer-arrow:after {
  transform: rotate(40deg)
}

.bloc footer .fMid .items>li.on .layer-arrow:before,.bloc footer .fMid .items>li:hover .layer-arrow:before {
  transform: rotate(-40deg)
}

.bloc footer .fMid .items>li.on>a,.bloc footer .fMid .items>li:hover>a {
  color: #9fb935
}

.bloc footer .fMid .fxs {
  width: 43%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

.bloc footer .fMid .fxs img {
  height: 5.73vw;
  display: block
}

.bloc footer .fMid .fxs .con {
  width: 100%;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding-top: 2.08vw
}

.bloc footer .fMid .fxs .con p {
  line-height: 1.45
}

.bloc footer .fMid .fxs .con p b {
  color: #9fb935;
  margin-right: 5px;
  font-weight: 400;
  display: block
}

.bloc footer .fMid .fxs .con .line {
  width: 1px;
  height: 2.08vw;
  background-color: rgba(255,255,255,.2);
  margin: 0 2.6vw;
  transform: rotate(22deg)
}

.bloc footer .fMid .fxs .link {
  padding-top: 1.04vw
}

.bloc footer .fMid .fxs .link .hrefBox {
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

.bloc footer .fMid .fxs .link .hrefBox .layer-icon {
  width: .4rem;
  height: .4rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  margin-right: 10px;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),border .5s cubic-bezier(.435,.25,.15,.965)
}

.bloc footer .fMid .fxs .link .hrefBox .layer-icon:hover {
  background-color: #9fb935;
  border-color: #9fb935
}

.bloc footer .fMid .fxs .link h5 {
  margin-bottom: 10px;
  line-height: 1.45
}

.bloc footer .fBm {
  height: 4.38vw;
  z-index: 10;
  padding: 0 6.67vw 0 13.54vw;
  position: relative
}

.bloc footer .fBm .col {
  width: 50%
}

.bloc footer .fBm .c1 {
  -ms-flex-pack: start;
  justify-content: flex-start
}

.bloc footer .fBm .c1 .f-16 {
  color: rgba(255,255,255,.5)
}

.bloc footer .fBm .c2 {
  width: 43%
}

.bloc footer .fBm .c2 .items {
  -ms-flex-pack: start;
  justify-content: flex-start
}

.bloc footer .fBm .c2 .items li a {
  padding: 0 1.56vw;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: block
}

.bloc footer .fBm .c2 .items li a:hover {
  color: #fff
}

.bloc footer .fBm .c2 .items li .f-14 {
  color: rgba(255,255,255,.5)
}

.bloc footer .fBm .c2 .items li:first-of-type a {
  padding-left: 0
}

.bloc footer .fBm .c2 .items .line {
  width: 1px;
  height: 12px;
  background-color: rgba(255,255,255,.2);
  transform: rotate(22deg)
}

.bloc footer .fBm .c2 .layer-bg {
  height: .84rem;
  cursor: pointer;
  padding: 0 .35rem
}

.bloc footer .fBm .c2 .layer-bg:after {
  content: "";
  width: 1px;
  height: 50vw;
  transform-origin: 50% 96%;
  background-color: rgba(255,255,255,.07);
  position: absolute;
  bottom: 0;
  right: 0;
  transform: skew(-28deg)
}

.bloc footer .fBm .c2 .layer-bg .pr {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

.bloc footer .fBm .c2 .layer-bg .pr>img {
  width: 1.88vw
}

.bloc footer .fBm .c2 .layer-bg .pr span {
  letter-spacing: 1px;
  margin-top: 10px;
  display: block
}

.bloc .fx {
  cursor: pointer;
  z-index: 100;
  width: 1rem;
  height: 100%;
  pointer-events: none;
  position: fixed;
  top: 10vw;
  right: -.42rem
}

.bloc .fx .skew {
  background-color: #fff;
  box-shadow: 0 .15rem .4rem rgba(136,147,89,.28)
}

.bloc .fx .pr {
  color: #9fb935;
  height: .7rem;
  width: 1.2rem;
  pointer-events: auto;
  padding: 0 .25rem;
  line-height: .7rem;
  display: block
}

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

#home #loading {
  width: 100%;
  height: 100%;
  z-index: 500;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden
}

#home #loading .mask {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0)
}

#home #loading .mask #maskPath {
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  transform-origin: 58%;
  transition: transform 1s ease-in-out
}

#home #loading .mask .st3 {
  transform: scale(.00052,.00093)
}

#home #loading .mask.on #maskPath {
  transform: scale3d(14,14,14)
}

#home #loading .line {
  width: 177vh;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0
}

#home #loading .line .st {
  stroke-dasharray: 200%;
  stroke-dashoffset: 200%
}

#home #loading .line .st1 {
  stroke: #9fb935;
  stroke-width: 1px
}

#home #loading .line .st2 {
  stroke: rgba(159,185,53,.5);
  stroke-width: 1px
}

#home #loading .line .st3 {
  fill: #9fb935
}

#home #loading .progress {
  position: absolute;
  bottom: 6.77vw;
  left: 13.54vw
}

#home #loading .progress #sum {
  margin-right: 10px;
  font-size: .72rem;
  line-height: 1
}

#home #loading .photo {
  z-index: 10;
  transition: all 1s ease-in-out;
  overflow: hidden;
  -webkit-mask-position: 0 100%;
  mask-position: 0 100%;
  -webkit-mask-size: 177vh;
  mask-size: 177vh;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}

#home #loading .photo .pic {
  z-index: 20;
  height: 100vh;
  top: auto;
  bottom: 0
}

#home #loading .photo .mk {
  z-index: 30;
  transform-origin: 50% 100%;
  background-color: #9fb935
}

#home #loading .photo.on {
  -webkit-mask-position: -800vw;
  mask-position: -800vw;
  -webkit-mask-size: 1500vw;
  mask-size: 1500vw
}

#home .banner {
  height: 100vh;
  width: 100%;
  position: relative
}

#home .banner .bg {
  z-index: 1;
  height: 100%;
  width: 100%;
  top: auto;
  bottom: 0;
  overflow: hidden
}

#home .banner .bg .photo {
  z-index: 1;
  opacity: 0;
  height: 100%;
  width: calc(100% + 60vw);
  will-change: width;
  background-color: #000;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: -30vw;
  transform: skew(-28deg)
}

#home .banner .bg .photo .pic {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 30vw;
  transform: skew(28deg)
}

#home .banner .bg .photo.in {
  opacity: 1
}

#home .banner .bg .photo.out,#home .banner .bg .photo.on {
  opacity: 1;
  z-index: 10
}

#home .banner .bg canvas {
  z-index: 2
}

#home .banner .bg:after {
  content: "";
  z-index: 100;
  pointer-events: none;
  background-color: rgba(0,0,0,.3)
}

#home .banner .inner {
  height: 100%;
  width: 100%;
  z-index: 10;
  padding: 0 8.33vw;
  position: relative;
  top: 0;
  left: 0
}

#home .banner .inner .items {
  width: 100%;
  height: 23.44vw;
  padding: 0 5.21vw;
  position: relative
}

#home .banner .inner .items>li {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  position: absolute;
  top: 0;
  left: 5.21vw
}

#home .banner .inner .items>li h1 {
  color: #fff;
  letter-spacing: -3px;
  margin-bottom: 3.13vw;
  font-size: 5.94vw;
  line-height: .85
}

#home .banner .inner .pager {
  z-index: 10;
  -ms-flex-pack: start;
  justify-content: flex-start;
  position: absolute;
  bottom: 4.69vw;
  left: 8.33vw
}

#home .banner .inner .pager>li {
  cursor: pointer;
  width: 8px;
  height: 9px;
  transform-origin: 50% 0;
  background-color: rgba(255,255,255,.5);
  margin: 0 .78vw;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965),width .5s cubic-bezier(.435,.25,.15,.965);
  transform: skew(-20deg)
}

#home .banner .inner .pager>li:first-of-type {
  margin-left: 0
}

#home .banner .inner .pager>li.on {
  width: .83vw;
  background-color: #fff;
  transform: scaleY(1.8)skew(-35deg)
}

#home .banner .inner .pager>li:hover {
  background-color: #fff
}

#home .banner .inner .scr {
  pointer-events: none;
  width: 100%;
  z-index: 12;
  animation: .8s cubic-bezier(.435,.25,.15,.965) infinite alternate scrFn;
  position: absolute;
  bottom: 4.27vw;
  left: 0
}

#home .banner .inner .scr>img {
  width: 2.71vw;
  display: block
}

#home .banner .inner .msg {
  padding: 5.21vw 5.21vw 5.21vw 6.77vw;
  display: inline-block;
  position: absolute;
  bottom: -9.38vw;
  right: 9.38vw
}

#home .banner .inner .msg .skew:before {
  content: "";
  background-color: #707070;
  top: -68%;
  left: calc(100% + .4rem)
}

#home .banner .inner .msg p {
  width: 22.92vw
}

#home .r1 {
  height: calc(100vh + 416.67vw);
  background-color: #f7f7f7
}

#home .r1 .clear {
  height: 16.67vw;
  width: 100%;
  position: relative
}

#home .r1 .inner {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0
}

#home .r1 .inner .topic {
  z-index: 50;
  margin-bottom: 4.69vw;
  position: relative
}

#home .r1 .inner .topic h2 {
  transform-origin: 0 100%;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.1;
  transition: color .5s ease-in-out
}

#home .r1 .inner .topic h2.wc {
  color: #fff
}

#home .r1 .inner .items {
  width: 24.22vw;
  z-index: 10;
  position: relative
}

#home .r1 .inner .items>li {
  pointer-events: none;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: start;
  align-items: flex-start;
  line-height: 1.25vw;
  position: absolute;
  top: 0;
  left: 0
}

#home .r1 .inner .items>li .layer-btn {
  margin-top: 1.82vw;
  position: absolute;
  top: 1.2rem;
  left: 0
}

#home .r1 .inner .items>li .layer-btn.wc {
  background-color: #fff
}

#home .r1 .inner .items>li .layer-btn.wc:after {
  background-color: #ecf8d4
}

#home .r1 .inner .items>li .layer-btn.wc .wc {
  color: #9fb935
}

#home .r1 .inner .items>li .alan {
  opacity: 0;
  animation-duration: .7s;
  animation-fill-mode: both;
  transform: translate(10%)
}

#home .r1 .inner .items>li .alan:nth-of-type(2) {
  animation-delay: 50ms
}

#home .r1 .inner .items>li.on .layer-btn {
  pointer-events: auto
}

#home .r1 .inner .items>li.on .alan {
  opacity: 1;
  transform: none
}

#home .r1 .inner .items>li.nextOut .alan {
  animation-name: opNextOut
}

#home .r1 .inner .items>li.nextIn .alan {
  animation-name: opNextIn
}

#home .r1 .inner .items>li.prevOut .alan {
  animation-name: opPrevOut
}

#home .r1 .inner .items>li.prevIn .alan {
  animation-name: opPrevIn
}

#home .r1 .inner .pager {
  height: 50%;
  z-index: 20;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  margin: auto 0;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8.33vw
}

#home .r1 .inner .pager>li {
  z-index: 8;
  cursor: pointer;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

#home .r1 .inner .pager>li .dot {
  margin: auto 0;
  transition: color .5s ease-in-out;
  top: 0;
  bottom: 0
}

#home .r1 .inner .pager>li.on {
  color: #9fb935
}

#home .r1 .inner .pager>li.on .dot {
  background-color: #9fb935;
  transform: scale(2.5)skew(-24deg)
}

#home .r1 .inner .pager .line {
  width: 1px;
  height: 92%;
  background-color: rgba(56,60,42,.2);
  right: 2px
}

#home .r1 .inner .pager .line #lineGo {
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background-color: #9fb935;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  transform: scaleY(0)
}

#home .r1 .inner .pager.active>li {
  color: #383c2a
}

#home .r1 .inner .pager.active>li .dot {
  background-color: #383c2a
}

#home .r1 .inner .pager.active>li.on {
  color: #9fb935
}

#home .r1 .inner .pager.active>li.on .dot {
  background-color: #9fb935
}

#home .r1 .inner .pager.active .line {
  background-color: #383c2a
}

#home .r1 .inner .pager.active .line #lineGo {
  background-color: #9fb935
}

#home .r1 .inner .pager.on>li {
  color: rgba(255,255,255,.6)
}

#home .r1 .inner .pager.on>li .dot {
  background-color: rgba(255,255,255,.6)
}

#home .r1 .inner .pager.on>li.on {
  color: #fff
}

#home .r1 .inner .pager.on>li.on .dot {
  background-color: #fff
}

#home .r1 .inner .pager.on .line {
  background-color: rgba(255,255,255,.5)
}

#home .r1 .inner .pager.on .line #lineGo {
  background-color: #fff
}

#home .r1 .inner .imgBox {
  z-index: 2;
  width: 100%;
  height: 100%;
  perspective: 26.04vw;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0
}

#home .r1 .inner .imgBox .photo {
  pointer-events: none;
  opacity: 0;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden
}

#home .r1 .inner .imgBox .photo .pic {
  z-index: 2;
  transform-origin: 100%;
  width: 0;
  will-change: width;
  animation-duration: .7s;
  animation-fill-mode: both;
  left: auto;
  right: 0;
  overflow: hidden
}

#home .r1 .inner .imgBox .photo .pic .picImg {
  width: 100vw;
  height: 100%;
  mix-blend-mode: multiply;
  opacity: .2;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 58.85vw;
  position: absolute;
  top: 2vw;
  right: 0
}

#home .r1 .inner .imgBox .photo .img {
  height: 100%;
  z-index: 5;
  opacity: 0;
  margin-top: 2%;
  animation-duration: .7s;
  animation-fill-mode: both;
  position: relative
}

#home .r1 .inner .imgBox .photo:nth-of-type(1) .pic {
  background-color: #f7f7f7
}

#home .r1 .inner .imgBox .photo:nth-of-type(2) .pic {
  background-color: #fdfff8
}

#home .r1 .inner .imgBox .photo:nth-of-type(3) .pic {
  background-color: #ecf8d4
}

#home .r1 .inner .imgBox .photo:nth-of-type(4) .pic {
  background-color: #9fb935
}

#home .r1 .inner .imgBox .photo.on {
  opacity: 1
}

#home .r1 .inner .imgBox .photo.on .pic {
  width: 100%
}

#home .r1 .inner .imgBox .photo.on .img {
  opacity: 1;
  transform: none
}

#home .r1 .inner .imgBox .photo.nextOut {
  opacity: 1
}

#home .r1 .inner .imgBox .photo.nextOut .pic {
  width: 100%
}

#home .r1 .inner .imgBox .photo.nextOut .img {
  animation-name: opNextOut
}

#home .r1 .inner .imgBox .photo.nextIn {
  opacity: 1;
  z-index: 100
}

#home .r1 .inner .imgBox .photo.nextIn .pic {
  animation-name: widNextIn
}

#home .r1 .inner .imgBox .photo.nextIn .img {
  animation-name: opNextIn
}

#home .r1 .inner .imgBox .photo.prevOut {
  opacity: 1
}

#home .r1 .inner .imgBox .photo.prevOut .pic {
  animation-name: widNextOut
}

#home .r1 .inner .imgBox .photo.prevOut .img {
  animation-name: opPrevOut
}

#home .r1 .inner .imgBox .photo.prevIn {
  opacity: 1
}

#home .r1 .inner .imgBox .photo.prevIn .pic {
  width: 100%
}

#home .r1 .inner .imgBox .photo.prevIn .img {
  animation-name: opPrevIn
}

#home .r1 .appInner {
  padding-top: 2.8rem;
  position: relative
}

#home .r1 .appInner .maxSize {
  z-index: 10;
  padding-bottom: 1rem;
  position: relative
}

#home .r1 .appInner .topic {
  z-index: 50;
  margin-bottom: 4.69vw;
  position: relative
}

#home .r1 .appInner .topic h2 {
  transform-origin: 0 100%;
  font-size: 1rem;
  line-height: 1.1;
  transition: color .5s ease-in-out
}

#home .r1 .appInner .topic h2.wc {
  color: #fff
}

#home .r1 .appInner .swiper_r1 {
  position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-slide {
  width: 100%
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox {
  position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg {
  min-height: 32%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-align: start;
  align-items: flex-start;
  line-height: .42rem;
  position: absolute;
  top: 0;
  left: 0
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-li {
  margin-bottom: .1rem;
  font-size: .3rem
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn {
  pointer-events: auto;
  margin-top: 1.82vw
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn.wc {
  background-color: #fff
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn.wc:after {
  background-color: #ecf8d4
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .msg .layer-btn.wc .wc {
  color: #9fb935
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .imgBox {
  width: 100%;
  padding-top: 3rem;
  position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-slide .appBox .imgBox .img {
  width: 180%;
  z-index: 5;
  margin-top: 2%;
  margin-left: -40%;
  position: relative
}

#home .r1 .appInner .swiper_r1 .swiper-button-next {
  color: #9fb935;
  pointer-events: none;
  outline: none;
  font-size: .38rem;
  animation: .8s ease-in-out infinite alternate scrFn_l;
  position: absolute;
  bottom: 47vw;
  right: 0
}

#home .r1 .appInner .swiper_r1 .swiper-button-next.my-button-disabled {
  opacity: 0
}

#home .r1 .appInner .pager {
  height: 1.4rem;
  z-index: 20;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0
}

#home .r1 .appInner .pager>li {
  z-index: 8;
  cursor: pointer;
  width: 88vw;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  margin-right: 12vw;
  padding-left: 0;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#home .r1 .appInner .pager>li .dot {
  margin-bottom: .2rem;
  position: relative;
  top: 0
}

#home .r1 .appInner .pager>li.on {
  color: #9fb935
}

#home .r1 .appInner .pager>li.on .dot {
  background-color: #9fb935;
  transform: scale(2.5)skew(-24deg)
}

#home .r1 .appInner .pager>li:last-of-type {
  margin-right: 0
}

#home .r1 .appInner .pager .line {
  width: calc(100% - 88vw);
  height: 1px;
  background-color: rgba(56,60,42,.2);
  top: 2px
}

#home .r1 .appInner .pager .line #lineGo {
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background-color: #9fb935;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  transform: scaleY(0)
}

#home .r1 .appInner .pager.active>li {
  color: #383c2a
}

#home .r1 .appInner .pager.active>li .dot {
  background-color: #383c2a
}

#home .r1 .appInner .pager.active>li.on {
  color: #9fb935
}

#home .r1 .appInner .pager.active>li.on .dot {
  background-color: #9fb935
}

#home .r1 .appInner .pager.active .line {
  background-color: #383c2a
}

#home .r1 .appInner .pager.active .line #lineGo {
  background-color: #9fb935
}

#home .r1 .appInner .pager.on>li {
  color: #fff
}

#home .r1 .appInner .pager.on>li .dot {
  background-color: #fff
}

#home .r1 .appInner .pager.on .line {
  background-color: rgba(255,255,255,.5)
}

#home .r1 .appInner>.other .swiper-wrapper,#home .r1 .appInner>.other .swiper-slide {
  height: 100%
}

#home .r1 .appInner>.other .swiper-slide:nth-of-type(1) .pic {
  background-color: #f7f7f7
}

#home .r1 .appInner>.other .swiper-slide:nth-of-type(2) .pic {
  background-color: #fdfff8
}

#home .r1 .appInner>.other .swiper-slide:nth-of-type(3) .pic {
  background-color: #ecf8d4
}

#home .r1 .appInner>.other .swiper-slide:nth-of-type(4) .pic {
  background-color: #9fb935
}

#home .r1 .appInner>.other .photo {
  pointer-events: none;
  height: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  overflow: hidden
}

#home .r1 .appInner>.other .photo .pic {
  z-index: 2;
  transform-origin: 100%;
  width: 100vw;
  height: 100%;
  will-change: width;
  animation-duration: .7s;
  animation-fill-mode: both;
  position: absolute;
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  overflow: hidden
}

#home .r1 .appInner>.other .photo .pic .picImg {
  width: 100vw;
  height: 112.5vw;
  mix-blend-mode: multiply;
  opacity: .2;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0
}

#home .r1 .appInner>.other .photo.on {
  opacity: 1
}

#home .r1 .appInner>.other .photo.on .pic {
  width: 100%
}

#home .r1 .appInner>.other .photo.nextOut {
  opacity: 1
}

#home .r1 .appInner>.other .photo.nextOut .pic {
  width: 100%
}

#home .r1 .appInner>.other .photo.nextIn {
  opacity: 1;
  z-index: 100
}

#home .r1 .appInner>.other .photo.nextIn .pic {
  animation-name: widNextIn
}

#home .r1 .appInner>.other .photo.prevOut {
  opacity: 1
}

#home .r1 .appInner>.other .photo.prevOut .pic {
  animation-name: widNextOut
}

#home .r1 .appInner>.other .photo.prevIn {
  opacity: 1
}

#home .r1 .appInner>.other .photo.prevIn .pic {
  width: 100%
}

#home .r2 {
  width: 100%;
  padding-top: 6.25vw;
  padding-bottom: 0;
  overflow: hidden
}

#home .r2 .inner .top {
  -ms-flex-align: start;
  align-items: flex-start
}

#home .r2 .inner .top .layer-topic {
  transform-origin: 0 0
}

#home .r2 .inner .top .col {
  /* width: 36.46vw */
  width: 47.8vw
}

#home .r2 .inner .top .col>p {
  margin-bottom: 2.6vw
}

#home .r2 .inner .top .col .items {
  grid-auto-flow: column;
  -ms-flex-pack: start;
  justify-content: start;
  gap: .5rem;
  display: grid
}

#home .r2 .inner .top .col .items>li span {
  line-height: 1;
  display: block
}

#home .r2 .inner .mid {
  padding-top: 6.25vw;
  position: relative
}

#home .r2 .inner .mid .imgBox {
  height: 34.79vw;
  width: 100%;
  padding-bottom: 30.8%;
  position: relative
}

#home .r2 .inner .mid .imgBox>img {
  object-fit: cover;
  margin: 0 auto;
  display: block
}

#home .r2 .inner .mid .imgBox .dataItems {
  z-index: 10
}

#home .r2 .inner .mid .imgBox .dataItems>li {
  position: absolute
}

#home .r2 .inner .mid .imgBox .dataItems>li div {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-bottom: 4.17vw;
  padding-left: 1.56vw;
  display: -ms-flexbox;
  display: flex
}

#home .r2 .inner .mid .imgBox .dataItems>li div .num {
  margin-bottom: 10px;
  line-height: 1
}

#home .r2 .inner .mid .imgBox .dataItems>li div>small {
  line-height: 1.8;
  display: block
}

#home .r2 .inner .mid .imgBox .dataItems>li div:before {
  content: "";
  height: calc(100% - 1.82vw);
  width: 1px;
  background: linear-gradient(#9fb935 0%,rgba(159,185,53,0) 100%);
  position: absolute;
  top: 1.82vw;
  left: 4px
}

#home .r2 .inner .mid .imgBox .dataItems>li div:after {
  content: "";
  width: 9px;
  height: 11px;
  background-color: #9fb935;
  position: absolute;
  top: 1.82vw;
  left: 0;
  transform: skew(-20deg)
}

#home .r3 {
  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
}

#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: #fff;
  transition: fill .5s cubic-bezier(.435,.25,.15,.965)
}

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

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

#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: #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%)
}

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

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

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

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

@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 .list>li .num {
  width: 100%;
  opacity: .2;
  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 h3 {
  width: 100%;
  opacity: .2;
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

#home .r3 .inner .mid #cirItems .list>li p {
  opacity: .2;
  width: 100%;
  line-height: 1.3;
  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%;
  margin-bottom: .3rem;
  line-height: 1.2;
  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;
  font-size: .3rem;
  line-height: 1.3;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

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

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

#home .r4 {
  padding: 11.46vw 0;
  position: relative
}

#home .r4 .bg .photo {
  z-index: 2
}

#home .r4 .bg .photo .pic {
  background-position: 43vw;
  background-size: 87.5vw;
  background-attachment: fixed
}

#home .r4 .bg .photo:after {
  content: "";
  height: 100%;
  width: 18%;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(-90deg,rgba(0,0,0,.6) 0%,transparent 100%);
  position: absolute;
  top: 0;
  right: 0
}

#home .r4 .bg .mk {
  z-index: 6;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 28%
}

#home .r4 .bg .mk>span {
  background-color: #fff;
  transform: skew(-26deg)
}

#home .r4 .inner {
  z-index: 10;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative
}

#home .r4 .inner .topic {
  margin-bottom: 5.21vw
}

#home .r4 .inner .topic h2 {
  margin-bottom: 1.04vw;
  line-height: 1.1
}

#home .r4 .inner .topic p {
  width: 29.58vw;
  line-height: 1.25
}

#home .r4 .inner .mid .items {
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start
}

#home .r4 .inner .mid .items>li {
  max-width: 3rem;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-right: 6.77vw;
  display: -ms-flexbox;
  display: flex
}

#home .r4 .inner .mid .items>li .num {
  margin-bottom: 1.04vw;
  line-height: 1
}

#home .r4 .inner .mid .items>li>p {
  margin-bottom: 2.08vw
}

#home .r4 .inner .mid .items>li>small {
  display: block
}

#home .r5 {
  background-color: #9fb935;
  padding: 6.25vw 0 4.17vw;
  position: relative
}

#home .r5 .inner {
  height: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center
}

#home .r5 .inner .top {
  width: 100%;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 10px
}

#home .r5 .inner .top .til {
  width: calc(100% - 37.5vw)
}

#home .r5 .inner .top h2 {
  max-width: 100%;
  line-height: .8;
  display: inline-block
}

#home .r5 .inner .top .col {
  width: 35.42vw;
  padding-top: 10px
}

#home .r5 .inner .top .col h3 {
  margin-bottom: 1.56vw;
  padding-left: 1.3vw
}

#home .r5 .inner .top .col .items {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex
}

#home .r5 .inner .top .col .items>li {
  width: 100%;
  margin-bottom: 1.04vw;
  line-height: 1.375
}

#home .r5 .inner .mid,#home .r5 .inner .mid .swiper,#home .r5 .inner .mid .swiper .swiper-slide .box {
  width: 100%
}

#home .r5 .inner .mid .swiper .swiper-slide .box .img {
  height: 17.6vw;
  width: 14.01vw;
  position: relative
}

#home .r5 .inner .mid .swiper .swiper-slide .box .img>img {
  height: 100%;
  position: absolute;
  bottom: 0
}

#home .r5 .inner .mid .set {
  width: 10.94vw;
  height: 5.73vw;
  margin: 1.56vw auto 0;
  display: block;
  position: relative
}

#home .r5 .inner .mid .set>a {
  width: 5.21vw;
  height: 4.17vw;
  position: absolute
}

#home .r5 .inner .mid .set>a .skew {
  background-color: transparent;
  border: 3px solid #fff;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965)
}

#home .r5 .inner .mid .set>a i {
  color: #fff;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965)
}

#home .r5 .inner .mid .set .prev_ {
  top: 0;
  left: 0
}

#home .r5 .inner .mid .set .prev_ .skew:after {
  transform-origin: 100%;
  left: auto;
  right: 0
}

@media screen and (min-width: 900px) {
  #home .r5 .inner .mid .set .prev_:hover i {
      color:#9fb935;
      transform: translate(-5px)
  }
}

#home .r5 .inner .mid .set .next_ {
  bottom: 0;
  right: 0
}

@media screen and (min-width: 900px) {
  #home .r5 .inner .mid .set .next_:hover i {
      color:#9fb935;
      transform: translate(5px)
  }
}

#home .tree {
  height: 100%;
  z-index: 500;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965);
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  right: 2vw
}

#home .tree>li {
  cursor: pointer;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  margin: .1rem 0;
  padding: 7px 1.04vw;
  display: -ms-flexbox;
  display: flex
}

#home .tree>li .dot {
  opacity: .4;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965),background-color .5s cubic-bezier(.435,.25,.15,.965);
  transform: skew(0)
}

#home .tree>li span {
  opacity: 0;
  line-height: 1;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965);
  display: block
}

#home .tree>li.on .dot {
  opacity: 1;
  transform: skew(-22deg)scale(1.8)
}

#home .tree>li.on span {
  opacity: 1
}

#home .tree.null {
  opacity: 0;
  pointer-events: none
}

#home .tree.active .dot.wc {
  background-color: rgba(112,112,112,.4)
}

#home .tree.active .wc {
  color: #9fb935
}

#home .tree.active .on .dot.wc {
  background-color: #9fb935
}

#about .banner {
  height: 100vh;
  overflow: hidden
}

#about .banner .bg {
  overflow: hidden
}

#about .banner .bg .photo {
  overflow: visible
}

#about .banner .bg .photo .pic {
  height: calc(100% + 5.21vw);
  top: -2.6vw
}

#about .banner .inner {
  height: 100%;
  z-index: 5;
  position: relative
}

#about .banner .inner h1 {
  transform-origin: 0;
  max-width: 7.8rem;
  margin-bottom: 3.13vw;
  line-height: 1
}

#about .banner .inner p {
  width: 7.8rem
}

#about .r1 {
  padding-top: 10.42vw;
  padding-bottom: 2.6vw
}

#about .r1 .inner .top {
  -ms-flex-align: start;
  align-items: flex-start
}

#about .r1 .inner .top .layer-topic {
  width: calc(100% - 37.5vw);
  position: relative
}

#about .r1 .inner .top .layer-topic:before {
  content: attr(data-note);
  opacity: 0;
  color: #9fb935;
  font-size: .24rem;
  position: absolute;
  bottom: calc(100% + .2rem);
  left: 0
}

#about .r1 .inner .top .col {
  width: 33.33vw
}

#about .r1 .inner .mid {
  padding-top: .9rem
}

#about .r1 .inner .mid .imgBox {
  position: relative
}

#about .r1 .inner .mid .imgBox .img {
  height: 35.42vw;
  margin: 0 auto;
  display: block
}

#about .r1 .inner .mid .imgBox .group .c1 {
  width: 60%;
  height: 100%;
  position: relative
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems {
  z-index: 10
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li {
  position: absolute
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-left: .3rem;
  display: -ms-flexbox;
  display: flex;
  position: absolute
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div .num {
  white-space: nowrap;
  margin-bottom: .05rem;
  line-height: 1
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div>small {
  line-height: 1.2;
  display: block
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div>img {
  max-width: 1.5rem;
  max-height: 1.47rem;
  object-fit: contain;
  object-position: left;
  position: absolute;
  left: 0
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div.lb {
  padding-left: 1.7rem
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div.lb>img {
  top: 10px
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div .hongkong {
  padding-top: .28rem
}

#about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div.lt>img {
  bottom: 1.56vw
}

#about .r1 .inner .mid .imgBox .group .c2 {
  width: 40%;
  height: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 3% 5% 7%;
  display: -ms-flexbox;
  display: flex
}

#about .r2 {
  background-color: #f8fbf2;
  padding-top: 8.33vw;
  padding-bottom: 6.25vw
}

#about .r2 .inner .top {
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: .68rem
}

#about .r2 .inner .top .layer-topic {
  position: relative
}

#about .r2 .inner .top .layer-topic:before {
  content: attr(data-note);
  opacity: 0;
  color: #9fb935;
  font-size: .24rem;
  position: absolute;
  bottom: calc(100% + .2rem);
  left: 0
}

#about .r2 .inner .mid .swiper {
  width: 100%;
  overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box {
  width: 100%;
  position: relative;
  overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box .img {
  height: 27.08vw;
  width: 100%;
  z-index: 10;
  position: relative
}

#about .r2 .inner .mid .swiper .swiper-slide .box .img>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: 0
}

#about .r2 .inner .mid .swiper .swiper-slide .box .msg {
  width: 100%;
  z-index: 12;
  padding: .3rem .4rem;
  position: absolute;
  bottom: 0;
  left: 0
}

#about .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
  -webkit-line-clamp: 2;
  height: .52rem;
  -webkit-box-orient: vertical;
  margin-bottom: .15rem;
  line-height: .26rem;
  display: -webkit-box;
  overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box .msg p {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden
}

#about .r2 .inner .mid .swiper .swiper-slide .box:after {
  content: "";
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.2) 60%,rgba(0,0,0,.8) 100%)
}

#about .r2 .inner .mid .set {
  width: 2.1rem;
  height: 1.1rem;
  margin: .5rem auto 0;
  display: block;
  position: relative
}

#about .r2 .inner .mid .set>a {
  width: 1rem;
  height: .8rem;
  position: absolute
}

#about .r2 .inner .mid .set>a .skew {
  background-color: transparent;
  border: 3px solid #9fb935;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965)
}

#about .r2 .inner .mid .set>a .skew:after {
  background-color: #9fb935
}

#about .r2 .inner .mid .set>a i {
  color: #9fb935;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965)
}

#about .r2 .inner .mid .set .prev_ {
  top: 0;
  left: 0
}

#about .r2 .inner .mid .set .prev_ .skew:after {
  transform-origin: 100%;
  left: auto;
  right: 0
}

@media screen and (min-width: 900px) {
  #about .r2 .inner .mid .set .prev_:hover i {
      color:#fff;
      transform: translate(-5px)
  }
}

#about .r2 .inner .mid .set .next_ {
  bottom: 0;
  right: 0
}

@media screen and (min-width: 900px) {
  #about .r2 .inner .mid .set .next_:hover i {
      color:#fff;
      transform: translate(5px)
  }
}

#about .r3 {
  padding: 11.46vw 0;
  position: relative
}

#about .r3 .bg .photo {
  z-index: 2
}

#about .r3 .bg .photo .pic {
  background-position: 33vw;
  background-size: 74vw;
  background-attachment: fixed
}

#about .r3 .bg .mk {
  z-index: 6;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 38%
}

#about .r3 .bg .mk>span {
  background-color: #fff;
  transform: skew(-26deg)
}

#about .r3 .inner {
  z-index: 10;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -ms-flex-align: start;
  align-items: flex-start;
  position: relative
}

#about .r3 .inner .layer-topic {
  position: relative
}

#about .r3 .inner .layer-topic:before {
  content: attr(data-note);
  opacity: 0;
  color: #9fb935;
  font-size: .24rem;
  position: absolute;
  bottom: calc(100% + .2rem);
  left: 0
}

#about .r3 .inner .mid {
  width: 50%;
  padding-top: 6.25vw
}

#about .r3 .inner .mid .items {
  width: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start
}

#about .r3 .inner .mid .items .list {
  width: 100%;
  border-bottom: 1px solid #9fb935;
  padding: .45rem 0;
  position: relative
}

#about .r3 .inner .mid .items .list h3 {
  line-height: 1
}

#about .r3 .inner .mid .items .list .layer-icon {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0
}

#about .r3 .inner .mid .items .list:last-of-type {
  border-bottom: none
}

#detail .banner {
  height: 28.65vw;
  position: relative
}

#detail .banner .bg {
  overflow: hidden
}

#detail .banner .bg .photo {
  overflow: visible
}

#detail .banner .bg .photo .pic {
  height: calc(100% + 5.21vw);
  top: -2.6vw
}

#detail .banner .bg:after {
  content: "";
  z-index: 9;
  pointer-events: none;
  background-color: rgba(0,0,0,.2)
}

#detail .banner .inner {
  height: 100%;
  z-index: 10;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#detail .banner .inner .maxSize {
  max-width: 960px;
  margin: .6rem auto
}

#detail .banner .inner h1 {
  line-height: 1
}

#detail .r1 {
  padding: 3.13vw 0 4.17vw
}

#detail .r1 .inner {
  max-width: 960px
}

#detail .r1 .inner .detail {
  width: 100%;
  font-size: .78vw;
  line-height: 1.4
}

#detail .r1 .inner .detail img {
  max-width: 90%;
  margin: .4rem auto;
  display: block;
  height: auto!important
}

#detail .r1 .inner .detail em {
  font-style: italic
}

#detail .r1 .inner .detail strong * {
  font-weight: inherit;
  font-family: inherit
}

#detail .r1 .inner .detail span {
  font-family: inherit
}

#detail .r1 .inner .detail a {
  color: #9fb935
}

#detail .r1 .inner .detail a * {
  color: inherit
}

#detail .r1 .inner .detail ol,#detail .r1 .inner .detail ul,#detail .r1 .inner .detail li {
  list-style-type: revert
}

#detail .r1 .inner .bm {
  margin-top: .8rem
}

#detail .r2 {
  background-color: #f8fbf2;
  padding-top: 8.33vw;
  padding-bottom: 6.25vw
}

#detail .r2 .inner .top {
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: .6rem
}

#detail .r2 .inner .top .layer-topic {
  position: relative
}

#detail .r2 .inner .top .layer-topic:before {
  content: attr(data-note);
  opacity: 0;
  color: #9fb935;
  font-size: .24rem;
  position: absolute;
  bottom: calc(100% + .2rem);
  left: 0
}

#detail .r2 .inner .mid .swiper {
  width: 100%;
  overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box {
  width: 100%;
  position: relative;
  overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .img {
  height: 27.08vw;
  width: 100%;
  z-index: 10;
  position: relative
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .img>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: 0
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .msg {
  width: 100%;
  z-index: 12;
  padding: .3rem .4rem;
  position: absolute;
  bottom: 0;
  left: 0
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
  -webkit-line-clamp: 2;
  height: .52rem;
  -webkit-box-orient: vertical;
  margin-bottom: .15rem;
  line-height: .26rem;
  display: -webkit-box;
  overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box .msg p {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3;
  display: -webkit-box;
  overflow: hidden
}

#detail .r2 .inner .mid .swiper .swiper-slide .box:after {
  content: "";
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.2) 60%,rgba(0,0,0,.8) 100%)
}

#detail .r2 .inner .mid .set {
  width: 10.94vw;
  height: 5.73vw;
  margin: 3.13vw auto 0;
  display: block;
  position: relative
}

#detail .r2 .inner .mid .set>a {
  width: 5.21vw;
  height: 4.17vw;
  position: absolute
}

#detail .r2 .inner .mid .set>a .skew {
  background-color: transparent;
  border: 3px solid #9fb935;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965)
}

#detail .r2 .inner .mid .set>a .skew:after {
  background-color: #9fb935
}

#detail .r2 .inner .mid .set>a i {
  color: #9fb935;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965)
}

#detail .r2 .inner .mid .set .prev_ {
  top: 0;
  left: 0
}

#detail .r2 .inner .mid .set .prev_ .skew:after {
  transform-origin: 100%;
  left: auto;
  right: 0
}

@media screen and (min-width: 900px) {
  #detail .r2 .inner .mid .set .prev_:hover i {
      color:#fff;
      transform: translate(-5px)
  }
}

#detail .r2 .inner .mid .set .next_ {
  bottom: 0;
  right: 0
}

@media screen and (min-width: 900px) {
  #detail .r2 .inner .mid .set .next_:hover i {
      color:#fff;
      transform: translate(5px)
  }
}

#pro {
  overflow: hidden
}

#pro .r1 {
  padding-top: 14.58vw;
  padding-bottom: 7.29vw
}

#pro .r1 .inner {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex
}

#pro .r1 .inner .left {
  width: 21.25%;
  padding-right: 2.6vw
}

#pro .r1 .inner .left .layer-topic {
  margin-bottom: 2.6vw
}

#pro .r1 .inner .left .choose {
  margin-top: 3.13vw
}

#pro .r1 .inner .left .choose .layer-downBox {
  margin-bottom: 1.04vw
}

#pro .r1 .inner .left .choose .layer-downBox .childDown {
  padding: 1.04vw 1.56vw
}

#pro .r1 .inner .left .choose .clear {
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  margin: 1.56vw 0;
  transition: opacity .3s cubic-bezier(.435,.25,.15,.965)
}

#pro .r1 .inner .left .choose .clear span {
  color: #707070
}

#pro .r1 .inner .left .choose .clear.on {
  opacity: 1;
  pointer-events: auto
}

#pro .r1 .inner .right {
  width: 78.75%
}

#pro .r1 .inner .right .items {
  grid-template-rows: repeat(4,auto);
  grid-template-columns: repeat(4,1fr);
  gap: 1.15vw;
  display: grid
}

#pro .r1 .inner .right .items .layer-pro h2 {
  text-align: center
}

#pro .r1 .inner .right .isNull {
  height: 20vw;
  background-color: #f6f8f1;
  display: none
}

#pro .r1 .inner .right .isNull h2 {
  text-align: center;
  color: #b8b8b8
}

#pro .r1 .inner .right .isNull.active {
  display: -ms-flexbox;
  display: flex
}

#pro .r1 .inner .right .bm {
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

#pro .r1 .inner .right .bm>div {
  padding: .32rem 1rem .32rem 0;
  display: block;
  position: relative
}

#pro .r1 .inner .right .bm>div .layer-icon {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0
}

#pro .r1 .inner .btm {
  width: 100%;
  padding-top: 3.65vw
}

#pro .r1 .inner .btm .set {
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#pro .r1 .inner .btm .set>a {
  width: 5.21vw;
  height: 4.17vw;
  outline: none
}

#pro .r1 .inner .btm .set>a .skew {
  background-color: transparent;
  border: 3px solid #9fb935;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965)
}

#pro .r1 .inner .btm .set>a .skew:after {
  background-color: #9fb935
}

#pro .r1 .inner .btm .set>a i {
  color: #9fb935;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965)
}

#pro .r1 .inner .btm .set .prev_ {
  top: 0;
  left: 0
}

#pro .r1 .inner .btm .set .prev_ .skew:after {
  transform-origin: 100%;
  left: auto;
  right: 0
}

@media screen and (min-width: 900px) {
  #pro .r1 .inner .btm .set .prev_:hover i {
      color:#fff;
      transform: translate(-5px)
  }
}

#pro .r1 .inner .btm .set .next_ {
  bottom: 0;
  right: 0
}

@media screen and (min-width: 900px) {
  #pro .r1 .inner .btm .set .next_:hover i {
      color:#fff;
      transform: translate(5px)
  }
}

#pro .r1 .inner .btm .set ol {
  padding: 0 .48rem
}

#pro .r1 .inner .btm .set ol>li>a {
  color: #707070;
  padding: 0 .2rem;
  display: block
}

#pro .r1 .inner .btm .set ol>li.on>a {
  color: #9fb935
}

#solution {
  overflow: hidden
}

#solution header.navBlack {
  background-color: #fdfff8
}

#solution .r1 {
  height: 100vh;
  background-color: #fdfff8;
  overflow: hidden
}

#solution .r1 .inner {
  height: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 5.73vw;
  padding-bottom: 1rem;
  display: -ms-flexbox;
  display: flex
}

#solution .r1 .inner h1 {
  -ms-flex: 1;
  flex: 1;
  margin-bottom: 2.08vw;
  line-height: 1
}

#solution .r1 .inner .group {
  width: 100%;
  padding: 0 8.33vw
}

#solution .r1 .inner .group ul {
  width: 100%;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#solution .r1 .inner .group ul li {
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  position: relative
}

#solution .r1 .inner .group ul li .imgBox {
  width: 10.42vw;
  -ms-flex-align: end;
  align-items: flex-end;
  margin: 0 auto .6rem;
  position: relative
}

#solution .r1 .inner .group ul li .imgBox .img {
  z-index: 10;
  max-width: 99%;
  display: block;
  position: relative
}

#solution .r1 .inner .group ul li .imgBox .shadow {
  z-index: 1;
  mix-blend-mode: multiply;
  max-width: 220%;
  max-height: 50%;
  position: absolute;
  bottom: -2%;
  left: 20%
}

#solution .r1 .inner .group ul li .imgBox .mk {
  width: 37.5vw;
  -webkit-mask-position-y: 40vw;
  opacity: 0;
  transition: all 1s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  bottom: calc(-2.2rem - 7px);
  left: -74%;
  -webkit-mask-image: linear-gradient(transparent 0%,#000 50%);
  mask-image: linear-gradient(transparent 0%,#000 50%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}

#solution .r1 .inner .group ul li .msg {
  width: 10.42vw;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#solution .r1 .inner .group ul li .msg .dot {
  width: 7px;
  z-index: 10;
  height: 7px;
  background: #9fb935;
  margin-bottom: .2rem;
  transition: background .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  transform: skew(-26deg)
}

#solution .r1 .inner .group ul li .msg h2 {
  z-index: 10;
  white-space: nowrap;
  line-height: .4rem;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

#solution .r1 .inner .group ul li .msg .img {
  width: 2.71vw;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965),transform 1s cubic-bezier(.435,.25,.15,.965);
  top: calc(100% + .4rem);
  transform: translateY(-1.04vw)
}

#solution .r1 .inner .group ul li:nth-of-type(1) .imgBox .shadow {
  transform: translateY(32%)
}

#solution .r1 .inner .group ul li.on .imgBox .mk {
  opacity: 1;
  -webkit-mask-position-y: 0vw
}

#solution .r1 .inner .group ul li.on .msg .dot {
  background-color: #fff;
  transform: scale(1.8)skew(-26deg)
}

#solution .r1 .inner .group ul li.on .msg h2 {
  color: #fff
}

#solution .r1 .inner .group ul li.on .msg .img {
  opacity: 1;
  transform: none
}

#solution .r1 .inner .group ul:after {
  content: "";
  width: calc(100% - 10.42vw);
  z-index: 0;
  height: 1px;
  background-color: rgba(159,185,53,.15);
  position: absolute;
  bottom: calc(.6rem + 3px);
  left: 5.21vw
}

#solution .r1 .inner .group ul .line {
  transform-origin: 0;
  width: calc(100% - 10.42vw);
  z-index: 0;
  height: 1px;
  background-color: #9fb935;
  position: absolute;
  bottom: calc(.6rem + 3px);
  left: 5.21vw;
  transform: scaleX(0)
}

#solution #frame {
  width: 100%;
  height: 0;
  position: relative;
  overflow: hidden
}

#solution #frame iframe {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative
}

#solutionDetail,#solutionDetail header.navBlack {
  background-color: #fdfff8
}

#solutionDetail header.down {
  pointer-events: none
}

#solutionDetail .tree {
  z-index: 199;
  width: 100%;
  background-color: #fdfff8;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: end;
  align-items: flex-end;
  margin: 0 auto;
  transition: transform .5s cubic-bezier(.435,.25,.15,.965);
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 7.55vw;
  left: 0;
  right: 0
}

#solutionDetail .tree li,#solutionDetail .tree a {
  z-index: 10;
  position: relative
}

#solutionDetail .tree li .msg,#solutionDetail .tree a .msg {
  width: 10.42vw;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#solutionDetail .tree li .msg .dot,#solutionDetail .tree a .msg .dot {
  width: 7px;
  z-index: 10;
  height: 7px;
  background: #9fb935;
  margin-bottom: .2rem;
  transition: background .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  transform: skew(-26deg)
}

#solutionDetail .tree li .msg h2,#solutionDetail .tree a .msg h2 {
  white-space: nowrap;
  color: rgba(56,60,42,.2);
  z-index: 10;
  line-height: .4rem;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

#solutionDetail .tree li .msg .img,#solutionDetail .tree a .msg .img {
  width: 2.19vw;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  top: calc(100% + .2rem);
  transform: translateY(-10px)
}

#solutionDetail .tree li:hover h2,#solutionDetail .tree a:hover h2 {
  color: #383c2a
}

#solutionDetail .tree li.on .msg .dot,#solutionDetail .tree a.on .msg .dot {
  transform: scale(1.8)skew(-26deg)
}

#solutionDetail .tree li.on .msg h2,#solutionDetail .tree a.on .msg h2 {
  color: #383c2a
}

#solutionDetail .tree li.on .msg .img,#solutionDetail .tree a.on .msg .img {
  opacity: 1;
  transform: none
}

#solutionDetail .tree:after {
  content: "";
  width: calc(100% - 10.42vw);
  z-index: 2;
  height: 1px;
  background-color: rgba(159,185,53,.5);
  position: absolute;
  bottom: calc(.6rem + 3px);
  left: 5.21vw
}

#solutionDetail .tree:before {
  content: "";
  width: calc(100% + 50vw);
  z-index: 1;
  height: calc(100% + 10.42vw);
  background-color: #fdfff8;
  position: absolute;
  bottom: -5px;
  left: -25vw
}

#solutionDetail .tree.active li .msg .img,#solutionDetail .tree.active a .msg .img {
  opacity: 0!important
}

#solutionDetail .r2 {
  padding-top: 14.32vw;
  position: relative
}

#solutionDetail .r2 .inner .left .imgBox {
  width: 39.95vw;
  height: 26.04vw;
  pointer-events: none;
  background-color: #fdfff8;
  position: relative
}

#solutionDetail .r2 .inner .left .imgBox .img {
  opacity: .2;
  mix-blend-mode: multiply;
  object-fit: cover;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0
}

#solutionDetail .r2 .inner .left .imgBox .pro {
  height: 30.21vw;
  position: absolute;
  top: 10px;
  left: 30%
}

#solutionDetail .r2 .inner .right {
  padding: 0 4.17vw 1.56vw 6.77vw
}

#solutionDetail .r2 .inner .right h1 {
  margin-bottom: 2.08vw;
  line-height: 1
}

#solutionDetail .r2 .inner .right p {
  line-height: 1.25
}

#solutionDetail .r2 .inner .right p b {
  color: #9fb935;
  font-family: inherit;
  font-weight: 400;
  font-size: inherit
}

#solutionDetail .r2 .inner .layer-scr {
  top: calc(100vh - .5rem);
  bottom: auto
}

#solutionDetail .r3 {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: start;
  align-items: flex-start;
  padding-top: 7.81vw;
  padding-bottom: 4.17vw
}

#solutionDetail .r3 .left {
  width: 20.83vw
}

#solutionDetail .r3 .left .layer-topic {
  position: relative
}

#solutionDetail .r3 .left .layer-topic:before {
  content: attr(data-note);
  color: #9fb935;
  opacity: 0;
  pointer-events: none;
  font-size: .24rem;
  position: absolute;
  bottom: calc(100% + .2rem);
  left: 0
}

#solutionDetail .r3 .right {
  width: calc(100% - 26.77vw)
}

#solutionDetail .r3 .right>p {
  margin-bottom: .5rem
}

#solutionDetail .r3 .right>h4 {
  margin-top: .6rem
}

#solutionDetail .r3 .right .box {
  -ms-flex-align: start;
  align-items: flex-start
}

#solutionDetail .r3 .right .box .part {
  -ms-flex: 1;
  flex: 1
}

#solutionDetail .r3 .right .box .part h3 {
  margin-bottom: 1.04vw;
  padding-left: 1.3vw
}

#solutionDetail .r3 .right .box .part>ol {
  padding-right: 8%
}

#solutionDetail .r3 .right .box .part>ol>li {
  margin: 10px 0
}

#solutionDetail .r3 .right .box .part>ol>li .dot {
  top: 8px
}

#solutionDetail .r3 .right>img {
  width: 100%;
  margin: .6rem 0
}

#solutionDetail .r3 .bm {
  padding-left: 26.77vw
}

#solutionDetail .r3.line {
  border-bottom: 1px solid rgba(112,112,112,.5)
}

#solutionDetail .r4 .group {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

#solutionDetail .r4 .group .col {
  width: calc(50% - .15rem);
  margin-top: .3rem;
  position: relative
}

#solutionDetail .r4 .group .col .photo {
  width: 100%;
  padding-bottom: 112%;
  position: relative;
  overflow: hidden
}

#solutionDetail .r4 .group .col .photo:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(transparent 50%,rgba(0,0,0,.5) 100%)
}

#solutionDetail .r4 .group .col .msg {
  width: 100%;
  height: 100%;
  z-index: 10;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: .6rem;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0
}

#solutionDetail .r4 .group .col .msg .top span {
  display: none
}

#solutionDetail .r4 .group .col .msg .top h2 {
  line-height: 1.25
}

#solutionDetail .r4 .group .col .msg .box {
  -ms-flex-align: start;
  align-items: flex-start
}

#solutionDetail .r4 .group .col .msg .box .part h3 {
  margin-bottom: 1.56vw
}

#solutionDetail .r4 .group .col .msg .box .part>ol>li {
  white-space: nowrap;
  margin: 10px 0
}

#solutionDetail .r4 .bm {
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 10px;
  display: -ms-flexbox;
  display: flex
}

#solutionDetail .r4_1 .group .col {
  width: 100%;
  position: relative
}

#solutionDetail .r4_1 .group .col .photo {
  width: 100%;
  padding-bottom: 55%;
  position: relative;
  overflow: hidden
}

#solutionDetail .r4_1 .group .col .photo:after {
  content: "";
  width: 72%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.6) 100%);
  position: absolute;
  top: 0;
  right: 0
}

#solutionDetail .r4_1 .group .col .photo.empty_text:after {
  opacity: 0
}

#solutionDetail .r4_1 .group .col .msg {
  width: 72%;
  height: 100%;
  z-index: 10;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: start;
  align-items: flex-start;
  padding: 0 4% 0 22%;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  right: 0
}

#solutionDetail .r4_1 .group .col .msg .top {
  margin-bottom: 4.17vw
}

#solutionDetail .r4_1 .group .col .msg .top span {
  display: none
}

#solutionDetail .r4_1 .group .col .msg .top h2 {
  line-height: 1.25
}

#solutionDetail .r4_1 .group .col .msg .box {
  -ms-flex-align: start;
  align-items: flex-start
}

#solutionDetail .r4_1 .group .col .msg .box .part h3 {
  margin-bottom: 1.56vw
}

#solutionDetail .r4_1 .group .col .msg .box .part>ol>li {
  margin: 10px 0
}

#solutionDetail .r4_1 .bm {
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 1.04vw;
  display: -ms-flexbox;
  display: flex
}

#solutionDetail .r5 {
  height: 15.63vw;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

#solutionDetail .r5 .col h2,#solutionDetail .r5 .col h3 {
  line-height: 1
}

#custom,#custom header.navBlack {
  background-color: #fdfff8
}

#custom .r1 {
  padding: 15.63vw 0 3.65vw;
  position: relative
}

#custom .r1 .bg .photo {
  opacity: .2;
  -webkit-mask-image: linear-gradient(#000 0%,transparent 60%);
  mask-image: linear-gradient(#000 0%,transparent 60%)
}

#custom .r1 .bg .photo .pic {
  background-position: bottom;
  background-size: 100%
}

#custom .r1 .inner {
  z-index: 10;
  position: relative
}

#custom .r1 .inner .layer-topic h2 {
  text-align: center
}

#custom .r1 .inner .layer-topic h2 .letter {
  padding: 0 .15rem
}

#custom .r1 .inner .layer-topic h2 .letter:nth-of-type(3),#custom .r1 .inner .layer-topic h2 .letter:nth-of-type(4) {
  color: #9fb935
}

#custom .r1 .inner .layer-topic p {
  text-align: center
}

#custom .r1 .scr {
  width: 100%;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0
}

#custom .r1 .scr .m1 {
  opacity: .6;
  width: .21rem;
  animation: 2s ease-in-out infinite both scr
}

#custom .r1 .scr .m2 {
  opacity: .2;
  width: .21rem;
  animation: 2s ease-in-out 1.5s infinite both scr
}

#custom .r2 {
  padding-top: 4.17vw;
  overflow: hidden
}

#custom .r2 .inner {
  height: 100%;
  position: relative
}

#custom .r2 .inner .tree {
  width: 100%;
  z-index: 40;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0
}

#custom .r2 .inner .tree li .msg {
  width: 1.15vw;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#custom .r2 .inner .tree li .msg h2 {
  z-index: 10;
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

#custom .r2 .inner .tree li .msg .dot {
  width: 7px;
  z-index: 10;
  height: 7px;
  background: #bec0bb;
  margin-top: .78vw;
  transition: background .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  position: relative;
  transform: skew(-26deg)
}

#custom .r2 .inner .tree li .msg .img {
  width: 1.09vw;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  top: calc(100% + .2rem);
  transform: translateY(-10px)
}

#custom .r2 .inner .tree li.on .msg .dot {
  background-color: #9fb935;
  transform: scale(1.8)skew(-26deg)
}

#custom .r2 .inner .tree li.on .msg h2 {
  color: #9fb935
}

#custom .r2 .inner .tree li.on .msg .img {
  opacity: 1;
  transform: none
}

#custom .r2 .inner .tree .line {
  transform-origin: 0;
  width: calc(100% - 1.15vw);
  z-index: 0;
  height: 1px;
  background-color: #9fb935;
  position: absolute;
  bottom: 3px;
  left: 11px;
  transform: scaleX(0)
}

#custom .r2 .inner .tree:after {
  content: "";
  width: calc(100% - 1.15vw);
  z-index: 0;
  height: 1px;
  background-color: rgba(196,199,191,.2);
  position: absolute;
  bottom: 3px;
  left: 11px
}

#custom .r2 .inner .swiper {
  height: 100%;
  width: 100%;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 6.77vw;
  padding-bottom: 3.13vw;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide {
  height: 100%;
  pointer-events: none;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .ani {
  opacity: 0;
  transition: opacity .7s cubic-bezier(.435,.25,.15,.965),transform .7s cubic-bezier(.435,.25,.15,.965);
  transform: translateY(1.56vw)
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(1) {
  transition-delay: .2s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(2) {
  transition-delay: .4s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(3) {
  transition-delay: .6s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(4) {
  transition-delay: .8s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(5) {
  transition-delay: 1s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(6) {
  transition-delay: 1.2s
}

#custom .r2 .inner .swiper .swiper-slide .ani:nth-child(7) {
  transition-delay: 1.4s
}

#custom .r2 .inner .swiper .swiper-slide.swiper-slide-active {
  pointer-events: auto
}

#custom .r2 .inner .swiper .swiper-slide.swiper-slide-active .ani {
  opacity: 1;
  transform: none
}

#custom .r2 .inner .swiper .swiper-slide .part {
  height: 100%;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part.p1,#custom .r2 .inner .swiper .swiper-slide .part.p3 {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  display: -ms-flexbox;
  display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part>h2 {
  text-align: center;
  margin-bottom: 2.6vw
}

#custom .r2 .inner .swiper .swiper-slide .part .box {
  grid-template-rows: 19.79vw;
  grid-template-columns: repeat(4,1fr);
  gap: 1.35vw;
  display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li {
  cursor: pointer;
  background-color: #f6f8f1;
  border: 3px solid #f6f8f1;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 0 2.08vw;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),border-color .5s cubic-bezier(.435,.25,.15,.965);
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox {
  width: 10.42vw;
  -ms-flex-align: end;
  align-items: flex-end;
  margin: 0 auto .32rem;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox .img {
  z-index: 10;
  max-width: 4.58vw;
  max-height: 12.5vw;
  display: block;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox .shadow {
  z-index: 1;
  mix-blend-mode: multiply;
  max-height: 60%;
  max-width: 120%;
  position: absolute;
  bottom: -2%;
  left: 28%
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li h3 {
  text-align: center;
  line-height: .4rem;
  transition: color .5s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li .layer-icon {
  width: 1.88vw;
  height: 1.88vw;
  opacity: 0;
  background: #9fb935;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  right: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li:nth-of-type(1) .imgBox .shadow {
  transform: translateY(32%)
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li.on {
  background-color: #eff7db;
  border-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li.on h3 {
  color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .box>li.on .layer-icon {
  opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .items {
  grid-template-rows: repeat(2,auto);
  grid-template-columns: repeat(5,1fr);
  gap: .36rem .5rem;
  display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro {
  cursor: pointer;
  border: 5px solid transparent;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),border-color .5s cubic-bezier(.435,.25,.15,.965),opacity .7s cubic-bezier(.435,.25,.15,.965),transform .7s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo {
  padding-bottom: 53.5%
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo:after {
  content: "";
  background-color: rgba(0,0,0,.2);
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),border-color .5s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .layer-icon {
  width: 1.88vw;
  height: 1.88vw;
  opacity: 0;
  background: #9fb935;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  right: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro.on {
  border-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro.on .photo:after {
  background-color: rgba(0,0,0,.5)
}

#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro.on .layer-icon {
  opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .group {
  grid-template-rows: repeat(2,auto);
  grid-template-columns: repeat(3,1fr);
  gap: .36rem .5rem;
  display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro {
  cursor: pointer;
  border: 5px solid transparent;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),border-color .5s cubic-bezier(.435,.25,.15,.965),opacity .7s cubic-bezier(.435,.25,.15,.965),transform .7s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo {
  padding-bottom: 30%
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo:after {
  content: "";
  background-color: rgba(0,0,0,.3);
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965),border-color .5s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .layer-icon {
  width: 1.88vw;
  height: 1.88vw;
  opacity: 0;
  background: #9fb935;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  position: absolute;
  top: 0;
  right: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro.on {
  border-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro.on .photo:after {
  background-color: rgba(0,0,0,.6)
}

#custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro.on .layer-icon {
  opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .other {
  padding-top: .36rem
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button {
  height: 2.08vw;
  background-color: rgba(56,60,42,.05);
  border: 5px solid transparent;
  border-radius: 0;
  transition: border-color .5s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button .layer-icon {
  width: 1.56vw;
  height: 1.56vw;
  opacity: 0;
  z-index: 20;
  background: #9fb935;
  margin-right: .78vw;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button.on {
  border: 5px solid #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part .other .layer-button.on .layer-icon {
  opacity: 1
}

#custom .r2 .inner .swiper .swiper-slide .part .form {
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-align: stretch;
  align-items: stretch;
  display: -ms-flexbox;
  display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col h3 {
  margin-bottom: .1rem;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col h3 em {
  color: red;
  font-size: 12px;
  position: absolute;
  top: -.03rem;
  right: calc(100% + .05rem)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox {
  z-index: 22;
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: end;
  align-items: flex-end;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox {
  margin-bottom: .78vw
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 {
  line-height: .3rem;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 em {
  color: red;
  font-size: 12px;
  position: absolute;
  top: -.03rem;
  right: calc(100% + .05rem)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea {
  width: 100%;
  height: 93%;
  background-color: #f6f8f1;
  border: 2px solid #f6f8f1;
  margin-top: .3rem;
  margin-bottom: 1.56vw;
  padding: 1.04vw;
  transition: border-color .5s cubic-bezier(.435,.25,.15,.965)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea::-ms-input-placeholder {
  color: rgba(112,112,112,.5)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea::placeholder {
  color: rgba(112,112,112,.5)
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea.erro {
  border-color: #fc011a
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col>h4 {
  margin: .1rem 0
}

#custom .r2 .inner .swiper .swiper-slide .part .form .col .way {
  grid-template-rows: repeat(2,auto);
  grid-template-columns: repeat(3,1fr);
  gap: 1.04vw 1.35vw;
  display: grid
}

#custom .r2 .inner .swiper .swiper-slide .part .form .left {
  width: 48%;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  display: -ms-flexbox;
  display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part .form .left .inBox {
  -ms-flex: 1;
  flex: 1;
  overflow: hidden
}

#custom .r2 .inner .swiper .swiper-slide .part .form .right {
  width: 48%
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure {
  padding-top: .12rem
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check {
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 10px 0
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check label {
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check .input__box {
  text-align: center;
  width: 1.35vw;
  height: 1.35vw;
  color: transparent;
  border: 2px solid #9fb935;
  margin-right: .83vw;
  font-size: 12px;
  line-height: 1.25vw;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),background-color .5s cubic-bezier(.435,.25,.15,.965);
  display: inline-block;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check .tint {
  transition: color .5s cubic-bezier(.435,.25,.15,.965);
  display: inline-block
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check input {
  display: none
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check input:checked+.input__box {
  color: #fff;
  background-color: #9fb935
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check input.erro+.input__box {
  border-color: red
}

#custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check input.erro+.input__box+.gray {
  color: red
}

#custom .r2 .inner .swiper .swiper-slide .part .bm {
  padding-top: 2.6vw
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn {
  width: 15.63vw;
  margin: 0 1.3vw;
  position: relative
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn .loadIcon {
  width: .34rem;
  height: .34rem;
  opacity: 0;
  transition: opacity .3s
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn.loadGo {
  pointer-events: none
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn.loadGo .txt {
  opacity: 0
}

#custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn.loadGo .loadIcon {
  opacity: 1;
  animation: 3s linear infinite loopl
}

#custom .r2 .inner .swiper .swiper-slide .part.yes {
  opacity: 0;
  pointer-events: none
}

#custom .r2 .inner .swiper .swiper-slide .part.yes+.ok {
  opacity: 1;
  transform: none
}

#custom .r2 .inner .swiper .swiper-slide .ok {
  width: 41.67vw;
  z-index: 40;
  height: 26.04vw;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  background: #f6f8f1;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 2.6vw;
  transition: opacity .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965);
  transform: translateY(10%)
}

#custom .r2 .inner .swiper .swiper-slide .ok>img {
  height: 6.35vw
}

#custom .r2 .inner .swiper .swiper-slide .ok p {
  line-height: 1.2
}

#custom .r3 {
  padding-top: 4.17vw;
  padding-bottom: 7.29vw;
  position: relative;
  overflow: hidden
}

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

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

#custom .r3 .inner .layer-topic h1 {
  text-align: center;
  font-size: .6rem;
  line-height: 1
}

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

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

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

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

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

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

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

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

#custom .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%)
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#custom .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: center;
  align-items: center;
  transition: opacity 1s cubic-bezier(.435,.25,.15,.965);
  display: -ms-flexbox;
  display: flex
}

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

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

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

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

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

#process .r1 {
  padding-top: 11.46vw;
  padding-bottom: 7.29vw;
  position: relative;
  overflow: hidden
}

#process .r1 .inner {
  z-index: 10;
  position: relative
}

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

#process .r1 .inner .layer-topic h1 {
  font-size: .6rem;
  line-height: 1
}

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

#process .r1 .inner .mid .cirBox {
  overflow: hidden
}

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

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

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

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

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

#process .r1 .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
}

#process .r1 .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%)
}

#process .r1 .inner .mid .cirBox .dotItems .dot.on {
  opacity: 0
}

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

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

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

#process .r1 .inner .mid .cirBox .dotItems .dot:nth-of-type(1) {
  transform: rotate(45deg)
}

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

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

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

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

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

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

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

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

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

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

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

#process .r1 .inner .mid .cirBox .imgBox {
  width: 88%;
  height: 88%;
  border-radius: 50%;
  overflow: hidden
}

#process .r1 .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)
}

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

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

#process .r1 .inner .mid .items .list.right {
  top: 0;
  left: calc(100% + 1.04vw)
}

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

#process .r1 .inner .mid .items .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
}

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

#process .r1 .inner .mid .items .list>li h3 {
  white-space: nowrap;
  width: 100%;
  opacity: .2;
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

#process .r1 .inner .mid .items .list>li p {
  opacity: .2;
  line-height: 1.3;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),opacity .5s cubic-bezier(.435,.25,.15,.965)
}

#process .r1 .inner .mid .items .list>li.on,#process .r1 .inner .mid .items .list>li.on .num,#process .r1 .inner .mid .items .list>li.on h3,#process .r1 .inner .mid .items .list>li.on p {
  opacity: 1
}

#case .r1 {
  padding-top: 9.38vw;
  padding-bottom: 5.21vw
}

#case .r1 .inner {
  width: 74%
}

#case .r1 .inner .layer-topic {
  margin-bottom: 2.6vw
}

#case .r1 .inner .layer-topic h1 {
  text-align: center
}

#case .r1 .inner .group {
  width: 100%;
  grid-template-rows: repeat(3,auto);
  grid-template-columns: repeat(3,1fr);
  gap: 1.56vw;
  display: grid;
  position: relative
}

#case .r1 .inner .group .box {
  position: relative;
  overflow: hidden
}

#case .r1 .inner .group .box .img {
  height: 27.08vw;
  width: 27.08vw;
  z-index: 10;
  transition: transform .6s cubic-bezier(.435,.25,.15,.965);
  position: relative
}

#case .r1 .inner .group .box .img>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: 0
}

#case .r1 .inner .group .box .msg {
  width: 100%;
  z-index: 12;
  padding: .3rem .4rem;
  position: absolute;
  bottom: 0;
  left: 0
}

#case .r1 .inner .group .box .msg h3 {
  -webkit-line-clamp: 2;
  height: .52rem;
  -webkit-box-orient: vertical;
  margin-bottom: .15rem;
  line-height: .26rem;
  display: -webkit-box;
  overflow: hidden
}

#case .r1 .inner .group .box .msg p {
  line-height: 1.3
}

#case .r1 .inner .group .box:after {
  content: "";
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.2) 60%,rgba(0,0,0,.8) 100%)
}

#case .r1 .inner .group .box:hover .img {
  transform: scale(1.05)
}

#case .r1 .inner .btm {
  width: 100%;
  padding-top: 3.65vw
}

#case .r1 .inner .btm .set {
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex;
  position: relative
}

#case .r1 .inner .btm .set>a {
  width: 5.21vw;
  height: 4.17vw
}

#case .r1 .inner .btm .set>a .skew {
  background-color: transparent;
  border: 3px solid #9fb935;
  transition: background-color .5s cubic-bezier(.435,.25,.15,.965)
}

#case .r1 .inner .btm .set>a .skew:after {
  background-color: #9fb935
}

#case .r1 .inner .btm .set>a i {
  color: #9fb935;
  transition: color .5s cubic-bezier(.435,.25,.15,.965),transform .5s cubic-bezier(.435,.25,.15,.965)
}

#case .r1 .inner .btm .set .prev_ {
  top: 0;
  left: 0
}

#case .r1 .inner .btm .set .prev_ .skew:after {
  transform-origin: 100%;
  left: auto;
  right: 0
}

#case .r1 .inner .btm .set .prev_:hover i {
  color: #fff;
  transform: translate(-5px)
}

#case .r1 .inner .btm .set .next_ {
  bottom: 0;
  right: 0
}

#case .r1 .inner .btm .set .next_:hover i {
  color: #fff;
  transform: translate(5px)
}

#case .r1 .inner .btm .set ol {
  padding: 0 .48rem
}

#case .r1 .inner .btm .set ol>li>a {
  padding: 0 .2rem;
  display: block
}

#policy {
  background-color: #fdfff8
}

#policy .r1 {
  padding-top: 10.42vw;
  padding-bottom: 7.29vw
}

#policy .r1 .maxSize {
  max-width: 9.8rem
}

#policy .r1 h1 {
  text-align: center;
  margin-bottom: .6rem
}

#policy .r1 .detail p {
  color: #707070;
  margin-bottom: .4rem
}

#policy .r1 .detail h2 {
  margin-bottom: .2rem
}

#searchPage {
  background-color: #fdfff8
}

#searchPage .r1 {
  padding-top: 9.38vw;
  padding-bottom: 6.25vw
}

#searchPage .r1 .inner {
  max-width: 14rem
}

#searchPage .r1 .inner .group {
  -ms-flex-direction: column;
  flex-direction: column
}

#searchPage .r1 .inner h1 {
  margin-bottom: .8rem
}

#searchPage .r1 .inner .layer-search {
  width: 8rem;
  border-bottom: 2px solid #9fb935;
  margin: 0 auto
}

#searchPage .r1 .inner .layer-search input {
  background-color: transparent
}

#searchPage .r1 .inner .isNull {
  height: 14vw
}

#searchPage .r1 .inner .isNull h2 {
  text-align: center;
  color: #b8b8b8
}

#searchPage .r1 .inner .isNull.active {
  display: -ms-flexbox;
  display: flex
}

#searchPage .r1 .inner .result .box {
  margin-bottom: .8rem
}

#searchPage .r1 .inner .result .box em {
  color: #9fb935
}

#searchPage .r1 .inner .result .box .Solutions {
  grid-template-columns: repeat(2,1fr);
  gap: 1.88vw;
  display: grid
}

#searchPage .r1 .inner .result .box .Solutions>a {
  -ms-flex-pack: start;
  justify-content: flex-start;
  -ms-flex-align: center;
  align-items: center;
  display: -ms-flexbox;
  display: flex
}

#searchPage .r1 .inner .result .box .Solutions>a .left {
  width: 36%
}

#searchPage .r1 .inner .result .box .Solutions>a .left .imgBox {
  width: 100%;
  pointer-events: none;
  height: 15.63vw;
  background-color: #fdfff8;
  position: relative
}

#searchPage .r1 .inner .result .box .Solutions>a .left .imgBox .pro {
  height: 100%;
  width: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0
}

#searchPage .r1 .inner .result .box .Solutions>a .right {
  width: 64%;
  padding: 0 5%
}

#searchPage .r1 .inner .result .box .Solutions>a .right h3 {
  margin-bottom: 1.04vw;
  line-height: 1
}

#searchPage .r1 .inner .result .box .Solutions>a .right p {
  line-height: 1.35
}

#searchPage .r1 .inner .result .box .Solutions>a .right p b {
  color: #9fb935;
  font-family: inherit;
  font-weight: 400;
  font-size: inherit
}

#searchPage .r1 .inner .result .box .caseItems {
  grid-template-columns: repeat(4,1fr);
  gap: 1.15vw;
  display: grid
}

#searchPage .r1 .inner .result .box .caseItems .cases {
  position: relative;
  overflow: hidden
}

#searchPage .r1 .inner .result .box .caseItems .cases .img {
  width: 100%;
  height: 0;
  z-index: 10;
  padding-bottom: 100%;
  position: relative
}

#searchPage .r1 .inner .result .box .caseItems .cases .img>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  bottom: 0
}

#searchPage .r1 .inner .result .box .caseItems .cases .msg {
  width: 100%;
  z-index: 12;
  padding: .2rem;
  position: absolute;
  bottom: 0;
  left: 0
}

#searchPage .r1 .inner .result .box .caseItems .cases .msg h3 {
  -webkit-line-clamp: 2;
  height: .52rem;
  -webkit-box-orient: vertical;
  margin-bottom: .15rem;
  line-height: .26rem;
  display: -webkit-box;
  overflow: hidden
}

#searchPage .r1 .inner .result .box .caseItems .cases .msg p {
  line-height: 1.3
}

#searchPage .r1 .inner .result .box .caseItems .cases:after {
  content: "";
  z-index: 11;
  pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.2) 60%,rgba(0,0,0,.8) 100%)
}

#searchPage .r1 .inner .result .box .proItems {
  grid-template-columns: repeat(5,1fr);
  gap: 1.15vw;
  display: grid
}

#searchPage .r1 .inner .result .box .proItems .layer-pro h2 {
  text-align: center
}

.aul h1,.aul h2,.aul h3,.aul h4,.aul h5 {
  text-align: right
}

.aul input,.aul textarea {
  text-align: right;
  direction: rtl
}

.aul p {
  text-align: right
}

.aul .layer-li {
  text-align: right;
  padding-left: 0;
  padding-right: .3rem
}

.aul .layer-li .dot {
  left: auto;
  right: 0
}

.aul .layer-pro h3,.aul .layer-pro h2 {
  text-align: center
}

.aul .layer-downBox .topPart {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul .layer-downBox .childDown .input--check .input__box {
  margin-left: .16rem;
  margin-right: 0
}

.aul .layer-downBox .childDown .input--check {
  -ms-flex-pack: end;
  justify-content: flex-end
}

.aul .layer-downBox .childDown .input--check label {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul .layer-downBox .childDown .input--check .tint,.aul .layer-inputBox .childDown>li>a {
  text-align: right
}

.aul .layer-inputBox .arrow,.aul .layer-inputBox .layer-down>a em,.layer-down>a .aul .layer-inputBox em {
  left: .2rem;
  right: auto
}

.aul .layer-inputBox h4 em.dot,.aul #mailPop .pMain h3 em.dot,.aul #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 em,.aul #custom .r2 .inner .swiper .swiper-slide .part .form .col h3 em {
  left: calc(100% + .05rem);
  right: auto
}

.aul .bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul .bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList>a,.aul .bloc header nav.app-nav .inner_mid .nav-items>.child_first .child_second>li>a {
  text-align: right
}

.aul .bloc header nav.app-nav .inner_mid .nav-items>.child_first>.firstList.active>i {
  transform: rotate(-90deg)
}

.aul .bloc footer .fMid .items {
  width: auto;
  -ms-flex-align: end;
  align-items: flex-end
}

.aul .bloc footer .fMid .items>li {
  padding-left: 0;
  padding-right: 2.6vw
}

.aul .bloc footer .fMid .items>li.on .layer-arrow,.aul .bloc footer .fMid .items>li:hover .layer-arrow {
  transform: rotate(180deg)
}

.aul .bloc footer .fMid .items>li .layer-arrow {
  left: auto;
  right: 0;
  transform: matrix(-1,0,0,-.6,3,0)
}

.aul .bloc footer .fMid .fxs {
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: end;
  align-items: flex-end;
  padding-right: 7vw
}

.aul .bloc footer .fMid .fxs .con {
  -ms-flex-pack: end;
  justify-content: flex-end
}

.aul .bloc footer .fMid .fxs .link .hrefBox .layer-icon {
  margin-left: .1rem;
  margin-right: 0
}

.aul #mailPop .pMain .other .input--check {
  -ms-flex-pack: end;
  justify-content: flex-end
}

.aul #mailPop .pMain .other .input--check label {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul #mailPop .pMain .other .input--check .input__box {
  margin-left: .16rem;
  margin-right: 0
}

.aul #home .r2 .inner .top .col .items>li span {
  text-align: right
}

.aul #home .r2 .inner .top .col .items {
  -ms-flex-pack: end;
  justify-content: end
}

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

.aul #home .r4 .inner .topic p {
  margin-left: auto;
  margin-right: 0
}

.aul #home .r2 .inner .mid .imgBox .dataItems>li div,.aul #home .r4 .inner .mid .items>li {
  -ms-flex-align: end;
  align-items: flex-end
}

.aul #home .r4 .inner .mid .items>li>small {
  text-align: right
}

.aul #about .r1 .inner .mid .imgBox .group .c2,.aul #about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div {
  -ms-flex-align: end;
  align-items: flex-end
}

.aul #about .r3 .inner .mid .items .list .layer-icon {
  left: 0;
  right: auto;
  transform: scaleX(-1)
}

.aul #about .r3 .inner .mid .items .list {
  padding-left: .4rem;
  padding-right: 0
}

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

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

.aul #solutionDetail .r3 .right .box .part>ol>li {
  text-align: right
}

.aul #solutionDetail .r4 .group .col .msg {
  -ms-flex-align: end;
  align-items: flex-end
}

.aul #solutionDetail .r4 .group .col .msg .box .part>ol>li,.aul #mailPop .pMain .other .input--check .f-16 {
  text-align: right
}

.aul #solutionDetail .r3 .right .box .part>ol {
  padding-left: 8%;
  padding-right: 0
}

.aul #solutionDetail .r4_1 .group .col .msg {
  -ms-flex-align: end;
  align-items: flex-end
}

.aul #about .r2 .inner .top .layer-topic h2 {
  width: min-content
}

.aul #custom .r2 .inner .swiper .swiper-slide .part .form .left {
  -ms-flex-align: end;
  align-items: flex-end
}

.aul #custom .r2 .inner .swiper .swiper-slide .part .form .col h3 {
  text-align: right
}

.aul #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check {
  -ms-flex-pack: end;
  justify-content: flex-end
}

.aul #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check label {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check .input__box {
  margin-left: .16rem;
  margin-right: 0
}

.aul #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check .input__box+.gray {
  text-align: right
}

.aul #detail .r2 .inner .top {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul .layer-more .txt>span {
  text-align: right
}

.aul #pro .r1 .inner .left .choose .clear {
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.aul #pro .r1 .inner .left .choose .clear i {
  margin-left: .2rem;
  margin-right: 0
}

@media screen and (min-width: 900px) {
  .aul #home .r2 .inner .top .layer-topic {
      max-width:60%
  }
}

.rul #custom .r1 .inner .layer-topic h2 .letter:nth-of-type(3) {
  color: #707070
}

.rul #custom .r1 .inner .layer-topic h2 .letter:nth-of-type(5) {
  color: #9fb935
}

.thl .en_bold,.thl #about .r1 .inner .top .layer-topic:before,#about .r1 .inner .top .thl .layer-topic:before,.thl #about .r2 .inner .top .layer-topic:before,#about .r2 .inner .top .thl .layer-topic:before,.thl #about .r3 .inner .layer-topic:before,#about .r3 .inner .thl .layer-topic:before,.thl #detail .r1 .inner .detail strong,#detail .r1 .inner .detail .thl strong,.thl #detail .r2 .inner .top .layer-topic:before,#detail .r2 .inner .top .thl .layer-topic:before,.thl #solutionDetail .r3 .left .layer-topic:before,#solutionDetail .r3 .left .thl .layer-topic:before,.thl #policy .r1 .detail h2,#policy .r1 .detail .thl h2 {
  padding-top: .1em
}

@media screen and (min-width: 1300px) {
  .thl .en_bold,.thl #about .r1 .inner .top .layer-topic:before,#about .r1 .inner .top .thl .layer-topic:before,.thl #about .r2 .inner .top .layer-topic:before,#about .r2 .inner .top .thl .layer-topic:before,.thl #about .r3 .inner .layer-topic:before,#about .r3 .inner .thl .layer-topic:before,.thl #detail .r1 .inner .detail strong,#detail .r1 .inner .detail .thl strong,.thl #detail .r2 .inner .top .layer-topic:before,#detail .r2 .inner .top .thl .layer-topic:before,.thl #solutionDetail .r3 .left .layer-topic:before,#solutionDetail .r3 .left .thl .layer-topic:before,.thl #policy .r1 .detail h2,#policy .r1 .detail .thl h2 {
      padding-top:.1em;
      line-height: 1.1!important
  }
}

@media screen and (max-width: 1500px) {
  #home .r4 .inner .mid .items>li {
      margin-right:4vw
  }

  #solution .r1 .inner .group ul li .imgBox {
      width: 7.4vw
  }

  #solution .r1 .inner .group ul li .imgBox .mk {
      width: 27.5vw
  }
}

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

  .thl #home .r1 .inner .topic h2 {
      padding-top: .2em
  }
}

@media screen and (max-width: 900px) {
  .pc,.bloc header .pcNav {
      display:none
  }

  html.rul,html.aul {
      font-size: 50px
  }

  p,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: .4rem
  }

  .rul .f-14,.aul .f-14 {
      font-size: 13px
  }

  .rul .layer-bg .skew {
      transform: skew(-18deg)
  }

  .layer-down .child {
      width: calc(100% + 2rem);
      left: -1rem
  }

  .layer-button {
      min-width: 2rem
  }

  .layer-btn,.layer-button {
      padding: .2rem .3rem
  }

  .layer-btn .mr-16 {
      margin-right: .2rem
  }

  .layer-type .txt>span {
      text-align: center
  }

  .layer-type {
      height: .7rem;
      border-width: 2px!important
  }

  .layer-type .layer-icon {
      width: .4rem;
      height: .4rem
  }

  .layer-topic h2 {
      letter-spacing: 0;
      font-size: .8rem
  }

  .layer-topic h2.f-76 {
      font-size: .6rem
  }

  .layer-topic h2.f-120 {
      font-size: 1rem
  }

  .layer-scr {
      bottom: .6rem
  }

  .layer-scr>img {
      width: 7vw
  }

  .layer-btn:after {
      display: none
  }

  .layer-pop .group .pMain {
      padding: 6% 6% 8%
  }

  .layer-pop .mk {
      background-color: rgba(0,0,0,.6)
  }

  .layer-inputBox .input-text {
      height: .64rem
  }

  .layer-inputBox .childDown {
      max-height: calc(1.04vw + 2.42rem)
  }

  .layer-inputBox .childDown>li>a {
      line-height: .6rem
  }

  .layer-bg .skew {
      transform: skew(-24deg)
  }

  .layer-li {
      padding-left: .3rem
  }

  .layer-li .dot {
      top: 6px
  }

  .layer-downBox.on .topPart .arrow,.layer-downBox.on .topPart .layer-down>a em,.layer-down>a .layer-downBox.on .topPart em {
      transform-origin: 0 30%
  }

  #toast {
      height: 160vw
  }

  #toast span {
      font-size: 14px
  }

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

  #mailPop .closePop {
      top: auto;
      bottom: calc(100% + .2rem);
      left: auto;
      right: 0
  }

  #mailPop .pMain {
      max-height: 148vw
  }

  #mailPop .pMain .box .wid-45 {
      width: 100%
  }

  #mailPop .pMain .box .wid-45:nth-of-type(1),#mailPop .pMain .box .wid-45:nth-of-type(2),#mailPop .pMain .box .wid-45:nth-of-type(3),#mailPop .pMain .box .wid-45:nth-of-type(4) {
      width: 48%
  }

  #mailPop .pMain .box .layer-inputBox {
      margin-bottom: .1rem
  }

  #mailPop .pMain .box textarea {
      height: 2rem;
      text-indent: 0;
      padding: .2rem
  }

  #mailPop .pMain .bm .layer-btn {
      width: 100%;
      padding: .2rem .3rem
  }

  #mailPop .pMain .box .layer-inputBox h4 {
      line-height: .4rem
  }

  #mailPop .pMain .other .input--check label {
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-align: start;
      align-items: flex-start
  }

  #mailPop .pMain .other .input--check .input__box {
      width: .36rem;
      height: .36rem
  }

  #mailPop .pMain .other .input--check .input__box+.gray {
      width: calc(100% - .6rem)
  }

  .bloc .fx {
      top: 48vw
  }

  .bloc .fx .pr {
      width: 1.5rem;
      font-size: .36rem
  }

  .bloc header {
      height: 1rem
  }

  .bloc header.down+main>.tree {
      transform: translateY(-1.2rem)
  }

  .bloc footer .fMid {
      padding: 8% 6%
  }

  .bloc footer .fMid .items {
      display: none
  }

  .bloc footer .fMid .fxs img {
      height: 1rem
  }

  .bloc footer .fMid .fxs .con {
      padding-top: .3rem
  }

  .bloc footer .fBm {
      height: auto;
      -ms-flex-direction: column;
      flex-direction: column;
      padding: 0 6% 6%
  }

  .bloc footer .fBm .col {
      width: 100%
  }

  .bloc footer .fBm .c2 {
      width: 100%;
      padding-top: .1rem
  }

  .bloc footer .fBm .c2 .layer-bg {
      position: absolute;
      bottom: 0;
      right: .8rem
  }

  .bloc footer .fBm .c2 .layer-bg .pr>img {
      width: .28rem
  }

  .bloc footer .fBm .c2 .layer-bg .pr span {
      margin-top: 5px
  }

  .bloc footer .fBm .c2 .layer-bg:after {
      transform-origin: 50% 90%
  }

  .bloc footer .fMid .fxs .link .hrefBox .layer-icon {
      width: .7rem;
      height: .7rem
  }

  .rul .bloc footer .fBm .c2 .items {
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-align: start;
      align-items: flex-start
  }

  .rul .bloc footer .fBm .c2 .items .line {
      display: none
  }

  .rul .bloc footer .fBm .c2 .items li:last-of-type a {
      padding-left: 0
  }

  .rul .bloc footer .fMid .fxs .con p b {
      white-space: nowrap
  }

  .thl .bloc footer .fBm {
      padding-bottom: 16%
  }

  .thl .bloc footer .fMid .fxs .con {
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-align: start;
      align-items: flex-start
  }

  .thl .bloc footer .fMid .fxs .con .line {
      opacity: 0
  }

  #home {
      overflow: hidden
  }

  #home #loading .line {
      width: auto;
      height: 104vw
  }

  #home #loading .progress {
      bottom: 25vw;
      left: 18vw
  }

  #home #loading .photo {
      width: calc(100% + 100vw);
      transition: -webkit-mask-size 1s ease-in-out,-webkit-mask-size 1s ease-in-out,mask-size 1s ease-in-out,-webkit-mask-position .5s linear,-webkit-mask-position .5s linear,mask-position .5s linear;
      left: -100vw;
      -webkit-mask-position: 80%;
      mask-position: 80%;
      -webkit-mask-size: 175vw;
      mask-size: 175vw
  }

  #home #loading .photo.on {
      -webkit-mask-position: 80%;
      mask-position: 80%;
      -webkit-mask-size: 3500vw;
      mask-size: 3500vw
  }

  #home .row {
      width: 100%;
      overflow: hidden
  }

  #home .tree {
      display: none
  }

  #home .banner {
      height: 140vw
  }

  #home .banner .inner {
      padding: 0 6%
  }

  #home .banner .inner .items {
      height: 45vw;
      padding-left: 0
  }

  #home .banner .inner .scr {
      display: none!important
  }

  #home .banner .inner .items>li {
      left: 0
  }

  #home .banner .inner .items>li h1 {
      letter-spacing: 0;
      font-size: .7rem;
      line-height: 1
  }

  #home .banner .inner .pager {
      left: 8vw
  }

  #home .banner .bg .photo {
      width: calc(100% + 80vw);
      left: -40vw
  }

  #home .banner .bg .photo .pic {
      height: 140vw;
      left: 40vw
  }

  #home .banner .inner .pager>li {
      margin: 0 .1rem
  }

  #home .banner .inner .pager>li.on {
      width: 10px;
      transform: scaleY(1.2)skew(-28deg)
  }

  #home .banner .inner .msg {
      padding: .3rem 1rem .3rem .8rem;
      bottom: -1.6rem;
      right: -10vw
  }

  .rul #home .banner .inner .msg {
      padding: .3rem 1.2rem .3rem 1rem;
      right: -13vw
  }

  #home .banner .inner .msg p {
      width: 64vw
  }

  #home .r1 {
      height: auto;
      overflow: hidden
  }

  #home .r1 .clear {
      height: 2.8rem
  }

  #home .r2 .inner .top {
      -ms-flex-direction: column;
      flex-direction: column
  }

  #home .r2 {
      padding-top: 1rem
  }

  #home .r2 .inner .top .layer-topic {
      width: 100%;
      margin-bottom: .5rem
  }

  #home .r2 .inner .top .col {
      width: 100%
  }

  #home .r2 .inner .top .col>p {
      margin-bottom: .4rem
  }

  #home .r2 .inner .top .col .items {
      grid-template-columns: repeat(2,1fr);
      grid-auto-flow: unset;
      display: grid
  }

  #home .r2 .inner .mid {
      padding-top: 1.8rem
  }

  #home .r2 .inner .mid .imgBox {
      height: 80vw
  }

  #home .r2 .inner .mid .imgBox>img {
      height: 75%
  }

  #home .r2 .inner .mid .imgBox .dataItems {
      width: 200%;
      transform-origin: 50% 38%;
      height: 83%;
      margin-left: -55%;
      transform: scale(.7)
  }

  #home .r2 .inner .mid .imgBox .dataItems>li div .num {
      font-size: .5rem
  }

  #home .r2 .inner .mid .imgBox .dataItems>li div {
      padding-bottom: .4rem;
      padding-left: .32rem
  }

  #home .r2 .inner .mid .imgBox .dataItems>li div>small {
      font-size: 12px
  }

  #home .r3 {
      padding-top: .8rem
  }

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

  #home .r4 .bg .mk {
      width: 150%;
      right: 5%
  }

  #home .r4 .bg .photo {
      width: 50%;
      left: auto;
      right: 0
  }

  #home .r4 .bg .photo .pic {
      background-position: bottom;
      background-size: auto 68%;
      background-attachment: unset
  }

  #home .r4 .inner .topic p {
      width: 100%
  }

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

  #home .r4 .inner .mid .items {
      grid-template-columns: repeat(2,auto);
      gap: .8rem .3rem;
      display: grid
  }

  #home .r4 .inner .mid .items>li {
      margin-right: 0
  }

  #home .r4 .inner .mid .items>li .num {
      margin-bottom: 3vw
  }

  #home .r4 .inner .mid .items>li>p {
      margin-bottom: 5vw
  }

  #home .r5 {
      padding: .8rem 0
  }

  #home .r5 .inner .top .til {
      width: 100%
  }

  #home .r5 .inner .top {
      width: 88%;
      -ms-flex-direction: column;
      flex-direction: column
  }

  #home .r5 .inner .top h2 {
      font-size: .8rem
  }

  #home .r5 .inner .top .col {
      width: 100%;
      padding-top: .3rem
  }

  #home .r5 .inner .top .col h3 {
      margin-bottom: .4rem
  }

  #home .r5 .inner .top .col .items>li {
      margin-bottom: .3rem
  }

  #home .r5 .inner .top .col .items>li * {
      color: #fff
  }

  #home .r5 .inner .mid .swiper .swiper-slide {
      width: 70vw
  }

  #home .r5 .inner .mid .swiper .swiper-slide .box .img {
      width: 32vw;
      height: 40vw
  }

  #home .r5 .inner .mid .set {
      width: 30vw;
      height: 15vw;
      margin-top: .6rem
  }

  #home .r5 .inner .mid .set>a {
      width: 13vw;
      height: 10vw
  }

  #home .r5 .inner .mid .set>a .skew {
      border-width: 2px
  }

  #home .r4 {
      padding-bottom: 30vw
  }

  #home .r4 .inner .topic h2 {
      margin-bottom: .2rem
  }

  .aul #home .r5 .inner .top h2 {
      display: block
  }

  .rul #home .r2 .inner .mid .imgBox .dataItems>li div>small {
      line-height: 1.5
  }

  .rul #home .r2 .inner .mid .imgBox .dataItems>li:nth-of-type(3),.rul #home .r2 .inner .mid .imgBox .dataItems>li:nth-of-type(4),.rul #home .r2 .inner .mid .imgBox .dataItems>li:nth-of-type(5) {
      max-width: 26vw
  }

  .aul #home .r2 .inner .top .layer-topic {
      transform-origin: 100%
  }

  .afterInner,#about .row {
      overflow: hidden
  }

  #about .banner,#about .banner .bg {
      max-height: 120vw
  }

  #about .banner .inner p {
      width: 100%
  }

  #about .r1 {
      padding-top: 20vw
  }

  #about .r1 .inner .top {
      -ms-flex-direction: column;
      flex-direction: column
  }

  #about .r1 .inner .top .layer-topic {
      width: 100%;
      margin-bottom: .3rem
  }

  #about .r1 .inner .top .col {
      width: 100%
  }

  #about .r1 .inner .mid .imgBox {
      height: 160vw
  }

  #about .r1 .inner .mid .imgBox .group {
      box-sizing: content-box;
      -ms-flex-direction: column;
      flex-direction: column;
      padding-top: 90vw
  }

  #about .r1 .inner .mid .imgBox .group .c1 {
      width: 100%;
      height: 90vw;
      position: absolute;
      top: 0;
      left: -6vw
  }

  #about .r1 .inner .mid .imgBox .group .c2 {
      width: 100%;
      height: 50%;
      padding: 3% 5% 12%
  }

  #about .r1 .inner .mid .imgBox .img {
      height: 90vw;
      margin-left: -14vw
  }

  #about .r1 .inner .mid .imgBox .group .c1 .dataItems {
      width: 150%;
      left: -25%
  }

  #about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div .num {
      font-size: 12px
  }

  #about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div.lb {
      padding-left: 1.3rem
  }

  #about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div>img {
      width: 1.2rem
  }

  #about .r1 .inner .mid .imgBox .group .c1 .dataItems>li div.lt>img {
      width: .14rem
  }

  #about .r2 {
      padding-top: 12vw;
      padding-bottom: 10vw
  }

  #about .r2 .maxSize {
      width: 100%
  }

  #about .r2 .inner .top {
      width: 88%;
      margin: 0 auto .8rem
  }

  #about .r2 .inner .mid .swiper .swiper-slide {
      width: 70vw;
      transition: transform .5s cubic-bezier(.435,.25,.15,.965);
      transform: scale(.9)
  }

  #about .r2 .inner .mid .swiper .swiper-slide.swiper-slide-active {
      transform: scale(1)
  }

  #about .r2 .inner .mid .swiper .swiper-slide .box .img {
      height: 0;
      padding-bottom: 100%
  }

  #about .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
      margin-bottom: .24rem
  }

  #about .r2 .inner .mid .set>a {
      width: 1rem;
      height: .8rem
  }

  #about .r2 .inner .mid .set>a .skew {
      border-width: 2px
  }

  #about .r2 .inner .mid .set>a i {
      font-size: 13px
  }

  #about .r2 .inner .mid .set {
      margin-top: .6rem
  }

  #about .r3 {
      padding-top: 20vw
  }

  #about .r3 .bg .photo .pic {
      background-size: auto 100%;
      background-attachment: unset;
      width: 74%;
      background-position: 50%;
      left: auto;
      right: 0
  }

  #about .r3 .inner .mid .items .list {
      padding-right: .4rem
  }

  #about .r3 .inner .mid .items .list h3 {
      margin-bottom: 10px
  }

  #about .r3 .bg .mk {
      right: 30%
  }

  #about .r3 .inner .mid {
      padding-top: 4vw
  }

  #about .r2 .inner .mid .swiper .swiper-slide .box .msg {
      padding: .3rem
  }

  #about .r2 .inner .mid .swiper .swiper-slide .box .msg p br {
      display: none
  }

  #solutionDetail {
      width: 100%;
      overflow: hidden
  }

  #solutionDetail .tree {
      top: 1.6rem
  }

  #solutionDetail .tree a .msg {
      width: 24vw
  }

  #solutionDetail .tree a .msg h2 {
      font-size: .3rem
  }

  #solutionDetail .tree:after {
      width: calc(100% - 24vw);
      left: 12vw
  }

  #solutionDetail .r2 {
      padding-top: 38vw;
      padding-bottom: 12vw
  }

  #solutionDetail .r2 .inner {
      -ms-flex-direction: column;
      flex-direction: column
  }

  #solutionDetail .r2 .inner .left .imgBox {
      width: 35vw;
      height: 75vw
  }

  #solutionDetail .r2 .inner .left .imgBox .img {
      width: 90vw;
      left: -27vw
  }

  #solutionDetail .r2 .inner .left .imgBox .pro {
      height: 68vw;
      top: 0;
      left: 0%
  }

  #solutionDetail .r2 .inner .right {
      padding: 0
  }

  #solutionDetail .r2 .inner .right h1 {
      margin-bottom: .32rem
  }

  #solutionDetail .r2 .inner .right p {
      font-family: en-regular;
      line-height: 1.35
  }

  #solutionDetail .r3 {
      -ms-flex-direction: column;
      flex-direction: column;
      padding-top: 1rem
  }

  #solutionDetail .r3 .left {
      width: 100%;
      margin-bottom: .32rem
  }

  #solutionDetail .r3 .right {
      width: 100%
  }

  #solutionDetail .r3 .right .box {
      -ms-flex-direction: column;
      flex-direction: column
  }

  #solutionDetail .r3 .right>p {
      margin-bottom: .6rem
  }

  #solutionDetail .r3 .right .box .part {
      width: 100%;
      -ms-flex: none;
      flex: none;
      margin-bottom: .5rem
  }

  #solutionDetail .r3 .right .box .part h3 {
      margin-bottom: .1rem;
      padding-left: 0;
      font-size: 15px
  }

  #solutionDetail .r3 .right .box .part>ol>li .dot {
      top: 6px
  }

  #solutionDetail .r3 .right .box .part>ol {
      grid-template-columns: repeat(2,auto);
      gap: 0 .15rem;
      padding-right: 0;
      display: grid
  }

  #solutionDetail .r3 .right>img {
      margin: .3rem 0
  }

  #solutionDetail .r4 {
      padding-top: 1rem
  }

  #solutionDetail .r4 .group {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap
  }

  #solutionDetail .r4 .group .col {
      width: 100%;
      margin-top: .4rem
  }

  #solutionDetail .r4 .group .col .msg {
      padding: .4rem
  }

  #solutionDetail .r4 .group .col .msg .box .part>ol>li {
      white-space: normal
  }

  #solutionDetail .r4 .group .col .msg .box .part h3 {
      margin-bottom: .3rem
  }

  #solutionDetail .r4_1 .group .col .msg .top h2 {
      line-height: 1
  }

  #solutionDetail .r4_1 .group .col .photo {
      padding-bottom: 120%
  }

  #solutionDetail .r4_1 .group .col .msg {
      width: 100%;
      -ms-flex-pack: end;
      justify-content: flex-end;
      padding: 4% 5%
  }

  #solutionDetail .r5 {
      height: auto;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-align: start;
      align-items: flex-start;
      padding: .6rem 0
  }

  #solutionDetail .r5 .col h2 {
      margin-bottom: .1rem
  }

  #solutionDetail .r5 .col h3 {
      margin-bottom: .6rem
  }

  #solutionDetail .r4_1 .group .col .msg {
      padding: 4% 5%
  }

  #solutionDetail .r4_1 .group .col .photo:after {
      width: 100%;
      background: linear-gradient(transparent 0%,rgba(0,0,0,.6) 100%)
  }

  .rul #solutionDetail .tree a .msg {
      width: 23vw
  }

  .rul #solutionDetail .tree:after {
      top: 3px;
      bottom: auto
  }

  .rul #solutionDetail .tree {
      -ms-flex-align: start;
      align-items: flex-start
  }

  .rul #solutionDetail .tree a .msg h2 {
      white-space: normal;
      text-align: center;
      font-size: .28rem;
      line-height: .3rem
  }

  .aul #solutionDetail .r3 .right .box .part>ol {
      -ms-flex-pack: end;
      justify-content: end
  }

  #custom .r1 {
      padding-top: 2rem;
      padding-bottom: 1.2rem
  }

  #custom .r1 .inner .layer-topic h2 {
      font-size: .8rem
  }

  #custom .r1 .inner .layer-topic p {
      width: 80%;
      margin: 0 auto
  }

  #custom .r1 .inner .layer-topic h2 .letter {
      padding: 0 .06rem
  }

  #custom .r1 .bg .photo .pic {
      background-size: cover
  }

  #custom .r1 .scr .m1,#custom .r1 .scr .m2 {
      width: .3rem
  }

  #custom .r2 {
      padding-top: 1rem
  }

  #custom .r2 .inner .tree:after,#custom .r2 .inner .tree .line {
      width: calc(100% - 10px);
      left: 5px
  }

  #custom .r2 .inner .tree {
      width: 90%;
      left: 5%
  }

  #custom .r2 .inner .swiper .swiper-slide .part .bm .layer-btn {
      width: 2.5rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box {
      width: 100%;
      grid-template-rows: none;
      grid-template-columns: repeat(2,1fr);
      gap: .4rem .2rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box>li {
      height: 40vw
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox {
      width: 30vw
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox .img {
      max-height: 20vw;
      max-width: 16vw
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box>li .imgBox .shadow {
      left: 36%
  }

  #custom .r2 .inner .swiper .swiper-wrapper {
      height: 100%
  }

  #custom .r2 .inner .swiper .swiper-slide .part {
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-pack: distribute;
      justify-content: space-around;
      -ms-flex-align: center;
      align-items: center;
      display: -ms-flexbox;
      display: flex
  }

  #custom .r2 .inner .swiper .swiper-slide .part>h2 {
      width: 88%;
      margin: 0 auto
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box>li {
      border-width: 1px
  }

  #custom .r2 .inner .swiper .swiper-slide .part .box>li .layer-icon,#custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .layer-icon {
      width: .6rem;
      height: .6rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .items {
      width: 100%;
      grid-template-columns: repeat(2,1fr);
      gap: .06rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro .photo {
      padding-bottom: 46%
  }

  #custom .r2 .inner .swiper .swiper-slide .part .items .layer-pro {
      border-width: 2px
  }

  #custom .r2 .inner .swiper .swiper-slide .part.p2 {
      -ms-flex-pack: center;
      justify-content: center
  }

  #custom .r2 .inner .swiper .swiper-slide .part.p2 .items,#custom .r2 .inner .swiper .swiper-slide .part.p2 .bm {
      margin-top: .3rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .other {
      width: 100%;
      padding-top: .1rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .other .layer-button {
      width: 100%;
      height: .6rem;
      border-width: 2px!important
  }

  #custom .r2 .inner .swiper .swiper-slide .part .other .layer-button .layer-icon {
      width: .4rem;
      height: .4rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .other .layer-button .layer-icon i {
      transform: scale(.8)
  }

  #custom .r2 .inner .swiper .swiper-slide .part .group {
      width: 100%;
      grid-template-columns: repeat(2,1fr);
      gap: .3rem .1rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro {
      border-width: 2px!important
  }

  #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .photo {
      padding-bottom: 48%
  }

  #custom .r2 .inner .swiper .swiper-slide .part .group .layer-pro .layer-icon {
      width: .6rem;
      height: .6rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form {
      -ms-flex-direction: column;
      flex-direction: column
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .left {
      width: 100%;
      margin-bottom: .2rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .right {
      width: 100%
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox textarea {
      height: 1.6rem;
      text-indent: 0;
      margin-top: 0
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox h4 {
      line-height: .32rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox[data-choose] {
      width: 100%
  }

  .wid-45 {
      width: 48%
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .col .inBox .layer-inputBox[data-choose] h4 {
      line-height: .5rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .col .way {
      grid-template-columns: repeat(2,1fr)
  }

  #custom .r2 .inner .swiper .swiper-slide .part.p4 {
      -ms-flex-pack: center;
      justify-content: center
  }

  #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check .input__box {
      width: .4rem;
      height: .4rem;
      line-height: .38rem
  }

  #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check .input__box+.gray {
      width: calc(100% - .6rem)
  }

  #custom .r2 .inner .swiper .swiper-slide .part>.mySure .input--check label {
      -ms-flex-pack: justify;
      justify-content: space-between
  }

  #custom .r2 .inner .swiper .swiper-slide .part .form .col>h4 {
      margin-top: .25rem
  }

  #custom .r3 {
      padding-top: .8rem
  }

  #custom .r3 .inner .layer-topic {
      margin-bottom: .5rem
  }

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

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

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

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

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

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

  #custom .r2 .inner .swiper .swiper-slide .ok {
      height: 74%;
      width: 100%
  }

  #custom .r2 .inner .swiper .swiper-slide .ok>img {
      height: 1.5rem;
      margin-bottom: .7rem
  }

  #custom .r2 .inner .swiper .swiper-slide .ok p {
      max-width: 84%
  }

  #custom .r2 .inner .swiper .swiper-slide .ok h5 {
      margin-bottom: .4rem
  }

  #custom .r2 {
      height: 210vw!important
  }

  .layer-search,.layer-downBox .topPart {
      height: .8rem
  }

  .layer-downBox .childDown .input--check {
      padding: 6px 0
  }

  .layer-downBox .childDown .input--check .input__box {
      width: .35rem;
      height: .35rem;
      border-width: 1px;
      margin-right: .2rem;
      line-height: .3rem
  }

  #pro .r1 {
      padding-top: 2rem
  }

  #pro .r1 .inner {
      -ms-flex-direction: column;
      flex-direction: column
  }

  #pro .r1 .inner .left {
      width: 100%;
      padding-bottom: .5rem;
      padding-right: 0
  }

  #pro .r1 .inner .left .choose {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-align: start;
      align-items: flex-start;
      display: -ms-flexbox;
      display: flex
  }

  #pro .r1 .inner .left .choose .layer-downBox {
      width: 48%;
      margin-bottom: .2rem
  }

  #pro .r1 .inner .left .choose .clear,#pro .r1 .inner .right {
      width: 100%
  }

  #pro .r1 .inner .right .items {
      grid-template-rows: repeat(8,auto);
      grid-template-columns: repeat(2,1fr);
      gap: .2rem
  }

  #pro .r1 .inner .right .bm>div .layer-icon>i {
      font-size: .4rem
  }

  #pro .r1 .inner .btm .set>a {
      width: .6rem;
      height: .6rem;
      -webkit-tap-highlight-color: rgba(255,255,255,0)
  }

  #pro .r1 .inner .btm .set>a .skew {
      border-width: 2px
  }

  #pro .r1 .inner .btm .set>a i {
      transform: scale(.8)
  }

  #pro .r1 .inner .btm .set>a .skew:after {
      display: none
  }

  #case .r1 .inner .layer-topic {
      margin-bottom: .6rem
  }

  #case .r1 {
      padding-top: 2rem
  }

  #case .r1 .inner {
      width: 88%
  }

  #case .r1 .inner .group {
      grid-template-rows: repeat(5,auto);
      grid-template-columns: repeat(2,1fr);
      gap: .2rem
  }

  #case .r1 .inner .group .box .img {
      width: 100%;
      height: 45vw
  }

  #case .r1 .inner .group .box .msg {
      padding: .2rem
  }

  #case .r1 .inner .group .box .msg p {
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden
  }

  #case .r1 .inner .btm .set>a {
      width: 10vw;
      height: 9vw
  }

  #case .r1 .inner .btm .set>a .skew {
      border-width: 1px
  }

  #case .r1 .inner .btm .set>a i {
      font-size: 12px
  }

  #policy .r1 {
      padding-top: 2rem
  }

  #searchPage main {
      min-height: 180vw
  }

  #searchPage .r1 .inner h1 {
      letter-spacing: 0
  }

  #searchPage .r1 .inner .layer-search {
      width: 80%;
      border-width: 1px
  }

  #searchPage .r1 .inner .layer-search input {
      font-size: 15px
  }

  #searchPage .r1 .inner .result .box .Solutions {
      grid-template-columns: repeat(1,1fr);
      gap: .2rem 0
  }

  #searchPage .r1 .inner .result .box .Solutions>a .left .imgBox {
      height: 20vw
  }

  #searchPage .r1 .inner .result .box .Solutions>a .left .imgBox .pro {
      width: 100%;
      object-fit: contain
  }

  #searchPage .r1 .inner .result .box .Solutions>a .right h3 {
      margin-bottom: .3rem
  }

  #searchPage .r1 .inner .result .box .Solutions>a .right p {
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden
  }

  #searchPage .r1 .inner .result .box .caseItems .cases .msg h3 {
      height: .72rem;
      line-height: .36rem
  }

  #searchPage .r1 .inner .result .box .caseItems,#searchPage .r1 .inner .result .box .proItems {
      grid-template-columns: repeat(2,1fr);
      gap: .15rem
  }

  #searchPage .r1 .inner .isNull {
      height: 70vw
  }

  #detail .banner {
      height: 85vw
  }

  #detail .banner .inner h1 {
      font-size: .6rem
  }

  #detail .r1 .inner .detail img {
      width: 100%
  }

  #detail .r2 {
      padding-top: 12vw
  }

  #detail .r2 .maxSize {
      width: 100%
  }

  #detail .r2 .inner .top {
      width: 88%;
      margin: 0 auto .68rem
  }

  #detail .r2 .inner .mid .swiper .swiper-slide {
      width: 70vw;
      transition: transform .5s cubic-bezier(.435,.25,.15,.965);
      transform: scale(.9)
  }

  #detail .r2 .inner .mid .swiper .swiper-slide.swiper-slide-active {
      transform: scale(1)
  }

  #detail .r2 .inner .mid .swiper .swiper-slide .box .img {
      height: 0;
      padding-bottom: 100%
  }

  #detail .r2 .inner .mid .swiper .swiper-slide .box .msg h3 {
      margin-bottom: .24rem
  }

  #detail .r2 .inner .mid .set {
      width: 25vw;
      height: 13vw;
      margin-top: .5rem
  }

  #detail .r2 .inner .mid .set>a {
      width: 1rem;
      height: .8rem
  }

  #detail .r2 .inner .mid .set>a .skew {
      border-width: 2px
  }

  #detail .r2 .inner .mid .set>a i {
      font-size: 13px
  }

  #detail .r1 .inner .detail {
      font-size: 15px
  }
}

@media screen and (max-width: 360px) {
  .f-24,#policy .r1 .detail h2 {
      font-size:16px
  }

  .f-22,.f-20,.f-18,#policy .r1 .detail p,.f-16 {
      font-size: 14px
  }

  .f-14 {
      font-size: 13px
  }

  .f-12 {
      font-size: 12px
  }

  .layer-bg .skew {
      transform: skew(-18deg)
  }

  #home .banner .inner {
      padding: 0% 6% 30%
  }

  #home .banner .inner .msg {
      right: -15vw
  }

  #home .r2 .inner .mid .imgBox .dataItems {
      width: 190%;
      transform-origin: 50% 0;
      margin-left: -56%;
      transform: scale(.7)
  }
}

@keyframes scrFn {
  0% {
      transform: translateY(-7px)
  }

  to {
      transform: translateY(7px)
  }
}

@keyframes scrFn_l {
  0% {
      transform: translate(-5px)
  }

  to {
      transform: translate(5px)
  }
}

@keyframes scr {
  0% {
      opacity: 0;
      transform: translateY(-12px)
  }

  50% {
      opacity: .8;
      transform: translateY(0)
  }

  to {
      opacity: 0;
      transform: translateY(12px)
  }
}

@keyframes loopl {
  0% {
      transform: rotate(0)
  }

  to {
      transform: rotate(360deg)
  }
}

@keyframes widNextIn {
  0% {
      width: 0%
  }

  to {
      width: 100%
  }
}

@keyframes widNextOut {
  0% {
      width: 100%
  }

  to {
      width: 0%
  }
}

@keyframes opNextIn {
  0% {
      opacity: 0;
      transform: translate(10%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

@keyframes opNextOut {
  0% {
      opacity: 1;
      transform: none
  }

  to {
      opacity: 0;
      transform: translate(-10%)
  }
}

@keyframes opPrevIn {
  0% {
      opacity: 0;
      transform: translate(-10%)
  }

  to {
      opacity: 1;
      transform: none
  }
}

@keyframes opPrevOut {
  0% {
      opacity: 1;
      transform: none
  }

  to {
      opacity: 0;
      transform: translate(10%)
  }
}

@keyframes pop-in {
  0% {
      opacity: 0;
      transform: translateY(100%)
  }
}