@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
}

html,
body {
  width: 100%;
  max-width: 1920px;
  min-width: 1280px;
  margin: 0 auto;
}

a {
  text-decoration: none !important;
  /* position: relative; */
  /* z-index: 100; */
}

a:hover {
  text-decoration: none !important;
}

li {
  list-style: none;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}.block {
  display: block;
}

.tC {
  text-align: center;
}

.clearfix {
  display: block;
}

.wh100 {
  width: 100%;
  height: 100%;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.inb {
  display: inline-block;
}

.vam {
  vertical-align: middle;
}

.hide {
  display: none;
}

.enter_ani {
  opacity:1;
}

.part-dialog {
  position: relative;
  width: 0;
  height: 0;
  overflow: hidden;
}

.dialog-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

.dialog-body {
  position: relative;
  margin: 80px auto 0 auto;
  z-index: 110;
}

.dialog-bg-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 100;
  transition: all 0.5s linear;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000);
  /*IE8*/
}

.msg {
  position: fixed;
  top: 40%;
  width: 100%;
  text-align: center;
  z-index: 11000;
}

.msg-wrap {
  display: inline-block;
  padding: 12px 24px;
  max-width: 400px;
  min-width: 100px;
  font-size: 16px;
  color: #FFFFFF;
  background:#666;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes am-rotate1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes am-rotate2 {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.back-page {
  top: 0;
  min-height: 2000px;
}

.back-page>div {
  transition: 0.4s
}

.back-page .news-bg {
  top: 770px;
  width: 100%;
  height:1450px;
  background: url(news_bg.png);
  background-size: 100% 100%;    background-attachment: fixed;
}

.back-page .news-bg-plant {
  top: 1000px;
  left: 0;
  width: 320px;
  height: 235px;
  background: url(plant.png);
  background-size: 100% 100%;
  z-index: 0;
}

.back-page .features-bg {
  top: 3800px;
  width: 100%;
  height: 980px;
  background: url(features_bg.png);
  background-size: 100% 100%;
}

.back-page .strategy_bg {
  top: 2500px;
  width: 100%;
  height: 980px;
  background: url(strategy_bg_2.jpg);
  background-size: 100% 100%;

}

.box_1 {
  --color-text: #fff;
  --color-bg: #000;
  --color-link: #f9d77e;
  --color-link-hover: #fff;
  --color-info: #efc453;
  --glitch-width: 740px;
  --glitch-height: 280px;
  --gap-horizontal: 5px;
  --gap-vertical: 50px;
  --time-anim: 4s;
  --delay-anim: 1s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: none;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: transparent;
  --blend-color-5: transparent;
}

/* ?? */
.box_1 {
  width: 100%;
  height: 960px;
  overflow: hidden;
  background: #fff;
}
.box_1 .video-pic{
  z-index: 2;
  margin: 0 auto;
  background-image: url(bg1_1.jpg?v=201912);
  background-position: center center;
  background-size: cover;
  transition: all 1s;
}
.box_1 .video {
  top: 0;
  text-align: center;
  z-index: 0;
}
.box_1 video{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.box_1 #js_t_v1{
  position: absolute;
  z-index: 6;
}
.logo_ld {
  position: absolute;
  left: 50%;
  z-index: 8;
}

.page_nav{
  z-index: 10;
}

.box_1 .cover {
  top: 0;
  background-position: center center;
}

.box_1 .glitch {
  display: none;
  top: 270px;
  margin-left: -502px;
  left: 50%; 
  overflow: hidden;
  animation-delay: 0s;
}

.box_1 .glitch:hover {
  cursor: pointer;
}

.box_1 .glitch__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--blend-color-1);
  transform: translate3d(0, 0, 0);
  background-blend-mode: var(--blend-mode-1);
  z-index: 0;
  opacity: 0.9;
}

.box_1 .glitch__img:nth-child(n+2) {
  opacity: 0;
  z-index: 10;
}

.box_1 .glitch__img:nth-child(n+2) {
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.box_1 .glitch__img:nth-child(2) {
  background-color: var(--blend-color-2);
  background-blend-mode: var(--blend-mode-2);
  animation-name: glitch-anim-1;
}

.box_1 .glitch__img:nth-child(3) {
  background-color: var(--blend-color-3);
  background-blend-mode: var(--blend-mode-3);
  animation-name: glitch-anim-2;
}

.box_1 .glitch__img:nth-child(4) {
  background-color: var(--blend-color-4);
  background-blend-mode: var(--blend-mode-4);
  animation-name: glitch-anim-3;
}

.box_1 .glitch__img:nth-child(5) {
  background-color: var(--blend-color-5);
  background-blend-mode: var(--blend-mode-5);
  animation-name: glitch-anim-flash;
}

.box_1 .slogan-yuyue {
  display: none;
  top: 740px;
  margin: auto;
  height: 120px;
  text-align: center;
  left: 0;
  right: 0;
  animation-delay: 0.1s;
}

.box_1 .slogan-yuyue .yuyue-btn,
.box_1 .slogan-yuyue .tap-btn {
  width: 240px;
  height: 80px;
  transition: transform 0.2s;
  background: url(yuyue.png) no-repeat;
}

.box_1 .slogan-yuyue .tap-btn {
  background: url(taptap.png) no-repeat;
  margin-left: 50px;
}

.box_1 .slogan-yuyue .yuyue-btn:hover,
.box_1 .slogan-yuyue .tap-btn:hover {
  transform: translateY(-6px);
}

.box_1 .slogan-yuyue .yuyue-btn:active,
.box_1 .slogan-yuyue .tap-btn:active {
  transform: translateY(-6px) scale(0.96);
}

.box_1 .slogan-yuyue .yuyue-num {
  margin-top: 4px;
  color: #fff;
  text-align: center;
  font-size: 18px;
}

.box_1 .slogan-download{
  left: 50%;
  display: none;
  animation-delay: 0.2s;
  z-index: 8;
}.box_1 .dl_box {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 100%;
  height: 100%;
}.box_1 .dl_box p{
  display: none;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
  padding: 12px 0 0 12px;
  vertical-align: top;
}.box_1 .dl_box p:nth-of-type(1){
  padding-top: 40px;
  display: inline-block;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
  padding-top: 56px;
  font-size: 15px;
  text-shadow: 0 0 10px #000;
  box-sizing: content-box;
  transition: all 0.3s;
  cursor: pointer;
}.box_1 .dl_box p:nth-of-type(1):hover{
  height: 80px;
}.box_1 .dl_box .dl_qrcode{
  display: inline-block;
  background-size: cover;
  vertical-align: top;
}.box_1 .dl_box a.btn {
  position: absolute;
  vertical-align: top;
}



.box_1 .video-btn {
  display: none;
  cursor: pointer;
  transition: all 1s;
  transform-origin: center;
  animation-delay: 0.3s;
  background-position: center;
  z-index: 99;
}
.box_1 .video-btn div{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: center;
  background-position: center;
  background-repeat: no-repeat;
}

.box_1 .video-play {    
  z-index: 10;
}
.box_1 .video-btn:hover {
  transform: scale(1.1)  rotate(360deg);
}
.box_1 .video-rotate1 {
  z-index: 11;
}
.box_1 .video-rotate2 {
  z-index: 12;
}
.rotate_r{
  animation: 3s am-rotate1 linear infinite;
}
.rotate_l{
  animation: 3s am-rotate2 linear infinite;
}

.box_1 .yuyue{
  position: fixed;
  top: 160px;
  right: 30px;
  width: 180px;
  height: 200px;
  background-position: -690px -532px;
  animation: 1.5s up-down ease-in-out infinite;
  animation-direction: alternate;
  z-index: 100;
  display: none;
}

.btn_configurable{
  position: fixed;
  top: 160px;
  right: 30px;
  width: 180px;
  height: 200px;
  animation: 1.5s up-down ease-in-out infinite;
  animation-direction: alternate;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 100;
  display: none;
}



.box_1 .yuyue .yuyue-btn {
  position: absolute;
  top: 84px;
  right: 38px;
  width: 101px;
  height: 45px;
  background: none;
  background-position: -730px -616px;
  z-index: 100;
  cursor: pointer;
}

.box_1 .yuyue .yuyue-btn:active {
  transform: scale(0.98);
}

.box_1 .yuyue .yuyue-num {
  position: absolute;
  top: 130px;
  right: 0;
  width: 100%;
  font-size: 14px;
  color: #fff;
  text-align: center;
}

.box_1 .share {
  bottom: 30px;
  right: 30px;
}

.box_1 .share-item {
  display: inline-block;
  margin-left: 8px;
  width: 30px;
  height: 30px;
  transition: 0.8s;
  cursor: pointer;
}

.box_1 .share-item:hover {
  background: #FFFFFF;
}

.box_1 .share-qq {
  background-position: -897px 0;
}

.box_1 .share-qzone {
  background-position: -937px 0;
}

.box_1 .share-weibo {
  background-position: -977px 0;
}

.box_1 .share-weixin {
  background-position: -1017px 0;
}

.box_1 .weixin-qr {
  display: none;
  padding: 4px;
  bottom: 36px;
  right: -50px;
  border-radius: 4px;
  background: #fff;
}

.box_1 .share-weixin:hover .weixin-qr {
  display: block;
}

.box_1 .weixin-qr img {
  width: 140px;
  height: 140px;
}

.box_1 .share-tieba {
  background-position: -1057px 0;
}

.box_1 .yuyue-num span {
  color: #fff300 !important;
}

@keyframes up-down {
  from {
    transform: translateY(10px);
  }

  to {
    transform: translateY(-10px);
  }
}


/* Animations */

@keyframes glitch-anim-1 {
  0% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }

  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }

  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }

  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }

  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }

  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }

  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }

  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }

  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }

  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }

  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }

  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }

  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }

  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }

  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }

  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }

  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }

  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }

  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }

  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }

  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }

  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }

  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-3 {
  0% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }

  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }

  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }

  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }

  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }

  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }

  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }

  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }

  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }

  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }

  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }

  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }

  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }

  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }

  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }

  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }

  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }

  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }

  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }

  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1, -1, 1);
  }

  22%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-text {
  0% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }

  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }

  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }

  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }

  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }

  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }

  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }

  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }

  9.9% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)), 0, 0) scale3d(-1, -1, 1);
  }

  10%,
  100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}


/* Flash */

@keyframes glitch-anim-flash {

  0%,
  5% {
    opacity: 0.2;
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }

  5.5%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}



/* ?? */
.box_2 {
  width: 100%;
  height:415px;
  overflow: hidden;
}

.box_2 .container {
  width: 1200px;
  margin: 70px auto 0 auto;
}

.box_2 .container .l-news-wpr {
  width:550px;
  height:340px;
  overflow: hidden;
}

.box_2 .container .l-news-pic img {
  width: 100%;
  height:340px;
}

.box_2 .container .swiper-border {
  top: 4px;
  left: 0;
  width:550px;
  height:340px;background: url(gd.png) no-repeat center center;background-size: 100% 100%;  
  cursor: pointer;
  z-index: 20;
  pointer-events: none;
}

.box_2 .container .l-news-pic-text {
  top: 0;
  left: 0;
  width:550px;
  height:340px;
  cursor: pointer;
  transition: all 0.3s;
  background: url(textbg.png);
}

.box_2 .container .l-news-pic-text span {
  display: block;
  max-width: 300px;
  left: 15px;
  bottom: 16px;
  color: #fff;
  font-size: 15px;
}

.box_2 .container .swiper-pagination {
  bottom: 13px;
  right: 18px;
  z-index: 40;
}

.box_2 .container .swiper-pagination-switch {
  display: inline-block;
  margin: 1.5px;
  width: 17px;
  height: 14px;
  background: url(pagination.png);
  background-position: -48px 0;
  cursor: pointer;
}

.box_2 .container .swiper-active-switch {
  width: 45px;
  height: 14px;
  background: url(pagination.png);
  background-position: 0 0;
}

.box_2 .container .news {
  margin-left: 30px;width: 600px;
  height: 340px;
}

.box_2 .container .news .news-nav {
  padding-bottom: 12px;
  border-bottom: 2px solid #3399ff;
}

.box_2 .container .news .news-nav li {
  display: inline-block;
  color: #666;
  vertical-align: middle;
}

.box_2 .container .news .news-nav li a {
  padding: 0 16px;
  color: #333;
  font-size: 18px;
  vertical-align: middle;
}

.box_2 .container .news .news-nav li.active a {
  color: #3399ff !important;
  font-weight: 700 !important;
}

.box_2 .container .news .news-nav .more a {
  margin-top: 2px;
  padding: 0;
  width: 24px;
  height: 24px;
  background-position: -538px -12px;
  cursor: pointer;
  transition: 0.5s;
}

.hover_up{
  transition: 0.5s;
}

.hover_up:hover {
  transform: translateY(-4px);
}

.box_2 .container .news .news-nav .curr-dot {
  bottom: -13px;
  left: 22px;
  width: 24px;
  height: 24px;
  background: url(dot.png);
  background-size: 108px 24px;
  background-position: -35px 0;
  transition: 0.3s ease-out;
}

.box_2 .container .news .news-slide {display: none;}
.box_2 .container .news .news-slide.active {display: block;}


.box_2 .container .news .new-headline {
  display: block;
  margin: 0 auto;
  width: 400px;
  padding: 28px 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #3399ff;
  text-align: center;
  cursor: pointer;
  transition: 0.2s ease-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box_2 .container .news .new-headline:hover {
  transform: translateX(8px);
}

.box_2 .container .news .new-item {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  color: #3a3c40;
  line-height: 27px;
  cursor: pointer;
}

.box_2 .container .news .new-item .news-title {
  display: inline-block;
  max-width: 380px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: 0.2s ease-out;
}

.box_2 .container .news .new-item .news-date {
  padding-right: 12px;
  float: right;
  font-size: 14px;
  color: #c4c4c4;
}

.box_2 .container .news .new-item:hover .news-title {
  transform: translateX(8px);
  color: #000;
}

.box_2 .container .entry {
  margin-left: 25px;
  width: 220px;
  height: 280px;
  background: lavender;
}

.box_2 .container .entry-img {
  position: absolute;
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: 60px;
  background-size: 220px 280px;
  background: #3399ff;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.box_2 .container .entry-img:hover .art-line {
  visibility: visible;
  animation: 1s clipMe linear;
}

.box_2 .container .entry a {
  display: block;
  top: 12px;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}

.box_2 .container .entry a:hover {
  color: #ffea17;
}

.box_2 .container .entry span {
  top: 12px;
}

.box_2 .container .entry-1 {
  width: 104px;
  height: 134px;
  background-image: url(entry.png);
  background-position: 0px 0px;
}

.box_2 .container .entry-1 span,
.box_2 .container .entry-6 span {
  position: absolute;
  display: inline-block;
  top: 6px;
  left: 10px;
  width: 20px;
  line-height: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #ffea17;
  white-space: normal;
}

.box_2 .container .entry-1 .en,
.box_2 .container .entry-6 .en {
  top: -12px;
  left: 30px;
  color: #fff;
  font-size: 14px;
  width: auto;
  font-weight: 200;
  transform: rotate(90deg);
  transform-origin: left bottom;
}

.box_2 .container .entry-2 {
  left: 116px;
  width: 104px;
  height: 60px;
}

.box_2 .container .entry-3 {
  top: 74px;
  left: 116px;
  width: 104px;
  height: 60px;
}

.box_2 .container .entry-4 {
  top: 146px;
  width: 104px;
  height: 60px;
}

.box_2 .container .entry-5 {
  top: 220px;
  width: 104px;
  height: 60px;
}

.box_2 .container .entry-6 {
  top: 146px;
  left: 116px;
  width: 104px;
  height: 134px;
  background-position: -116px -146px;
  background-image: url(entry.png);
}

.box_2 .container .art-line {
  position: absolute;
  width: 104px;
  height: 134px;
  background-position: -520px -576px;
}

@keyframes clipMe {
  0% {
    clip: rect(0px, 40px, 20px, 50px);
  }

  20% {
    clip: rect(0px, 100px, 20px, 50px);
  }

  40% {
    clip: rect(0px, 100px, 60px, 50px);
  }

  60% {
    clip: rect(0px, 100px, 134px, 50px);
  }

  80% {
    clip: rect(0px, 100px, 134px, 25px);
  }

  100% {
    clip: rect(0px, 100px, 134px, 0px);
  }
}

/* ?? */
.box_3 {
  width: 100%;
  height: 920px;
}

.box_3 .part-title {
  margin: 0 auto;
  width: 740px;
  height: 70px;
  z-index: 10;
  background-position: -8px -758px;
}

.box_3 .bg-wrap {
  top: 0;
  overflow: hidden;
}

.box_3 .bg-wrap .bg-inner {
  top: 0;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
}

.box_3 .bg-wrap .bg-inner .bg-left {
  visibility: hidden;
  top: 170px;
  left: 0;
  width: 1390px;
  height: 750px;
}

.box_3 .bg-wrap .bg-inner .bg-left .bg-img {
  float: right;
  width: 100%;
  min-width: 1390px;
  height: 750px;
  background: url(role_bg_1.png);
  background-position: 0 -40px;
}

.box_3 .bg-wrap .bg-inner .bg-right {
  visibility: hidden;
  top: 130px;
  right: 0;
  width: 1078px;
  height: 750px;
}

.box_3 .bg-wrap .bg-inner .bg-right .bg-img {
  float: left;
  width: 100%;
  min-width: 1080px;
  height: 750px;
  background: url(role_bg_2.png);
}

.box_3 .inner {
  top: 0;
  overflow: hidden;
  z-index: 10;
}

.box_3 .inner .role-nav {
  margin-top: -44px;
  left: 362px;
  height: 34px;
  width: 850px;
  white-space: nowrap;
  z-index: 110;
}

.box_3 .inner .nav-inner {
  overflow: hidden;
}

.box_3 .inner .name-list {
  display: inline-block;
  white-space: nowrap;
}

.box_3 .inner .name-list li {
  position: relative;
  padding-left: 2px;
  display: inline-block;
  margin: 0 8px;
  cursor: pointer;
}

.box_3 .inner .active .border-skew {
  background: #0f2474 !important;
  border: 1px solid #0f2474;
}

.box_3 .inner .active span {
  color: #FFFFFF !important;
}

.box_3 .inner .name-list li span {
  padding: 0 24px;
  font-size: 16px;
  line-height: 30px;
  color: #3399ff;
}

.box_3 .inner .border-skew {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 30px;
  border: 1px solid #3399ff;
  transition: background 0.5s;
  transform: skewX(-30deg);
  z-index: -10;
}

.box_3 .inner .name-list li:hover span {
  color: #FFFFFF;
}

.box_3 .inner .name-list li:hover .border-skew {
  background: #3399FF;
}

.box_3 .inner .role-more {
  display: inline-block;
  padding: 0 8px;
  top: 6px;
  right: -50px;
  cursor: pointer;
}

.box_3 .inner .role-more span {
  margin-left: 4px;
  font-size: 16px;
  line-height: 30px;
  color: #3399ff;
  vertical-align: middle;
  cursor: pointer;
}

.box_3 .inner .role-more a {
  color: #3399ff;
  vertical-align: baseline;
}

.box_3 .inner .role-more a:hover {
  color: #61b0ff;
  text-decoration: none;
}

.box_3 .inner .line-cover {
  display: inline-block;
  width: 100%;
  height: 22px;
  overflow: hidden;
  vertical-align: baseline;
}

.box_3 .inner .skew-line {
  margin-top: 15px;
  width: 100%;
  height: 30px;
  border: 1px solid #3399ff;
  transform: skewX(-30deg);
}

.box_3 .inner .role-display {
  top: 172px;
  left: 50%;
  margin-left: -960px;
  width: 1920px;
  height: 708px;
}

.box_3 .inner .role-item {
  display: none;
  width: 100%;
  height: 100%;
  white-space: nowrap;
  z-index: 100;
}

.box_3 .inner .role-item .info {
  top: 50px;
  left: 360px;
}

.box_3 .inner .role-item .info .role-name {
  margin-left: -4px;
  margin-top: 9px;
  background: url(name_bg.png);
}

.box_3 .inner .role-item .info .role-name p {
  font-size: 66px;
  font-weight: 700;
  line-height: 82px;
  color: #FFFFFF;
  letter-spacing: 26px;
  /* transform: translateX(16px); */
  margin-left: 16px;
  margin-right: -14px;
  padding: 0 0px 4px 0;
}

.box_3 .inner .role-item .info .role-mini {
  margin-top: -12px;
  width: 584px;
  height: 90px;
}

.box_3 .inner .role-item .info .role-mini .bg-line {
  width: 584px;
  height: 90px;
  background-position: -760px -734px;
}

.box_3 .inner .role-item .info .role-mini .role-attr {
  top: 39px;
  width: 114px;
  text-align: center;
}

.box_3 .inner .role-item .info .role-mini .role-attr img {
  margin: 0 auto;
  width: 50px;
  height: 50px;
}

.box_3 .inner .role-item .info .role-mini .mini-view {
  top: -18px;
  left: 150px;
  display: none!important;
}

.box_3 .inner .role-item .info .role-mini .attr-name {
  width: 116px;
  color: #99ffff;
  text-align: center;
  font-size: 14px;
  line-height: 14px;
}

.box_3 .inner .role-item .info .cv {
  top: 120px;
  margin-bottom: 15px;
  z-index: 20;
}

.box_3 .inner .role-item .info .cv .cv-info {
  margin-bottom: 4px;
  font-size: 22px;
  font-weight: 700;
  color: #ffea17;
  letter-spacing: 1px;
}

.box_3 .inner .role-item .info .cv .voice-btn {
  width: 36px;
  height: 36px;
  background-position: -470px -8px;
  cursor: pointer;
}

.box_3 .inner .role-item .info .cv .voice-played {
  background-position: -396px -8px;
}

.box_3 .inner .role-item .info .cv .voice-bg {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;
  background-position: -433px -8px;
}

.box_3 .inner .role-item .info .cv .voice-played .voice-bg {
  background-position: -360px -8px;
}

.box_3 .inner .role-item .info .cv .voice-btn:hover .voice-bg {
  opacity: 1;
}

.box_3 .inner .role-item .info .cv .voice-played:hover .voice-bg {
  opacity: 1;
}

.box_3 .inner .role-item .info .cv .word-text {
  font-size: 18px;
  color: #ffffff;
  letter-spacing: 1px;
}

.box_3 .inner .role-item .info .cv .story-btn {
  padding-left: 8px;
  font-size: 16px;
  color: #ffea17;
  cursor: pointer;
}

.box_3 .inner .role-item .info .cv .story-btn:hover {
  color: yellow;
}

.box_3 .inner .role-item .info .cv .story-close {
  bottom: -18px;
  width: 450px;
  height: 5px;
  background-position: -864px -1154px;
}

.box_3 .inner .role-item .info .cv .story-avtive {
  background-position: -864px -1167px;
}

.box_3 .inner .role-item .info .cv .story-close-btn {
  display: none;
  top: -10px;
  right: 82px;
  width: 24px;
  height: 24px;
  background-position: -860px -1110px;
  transition: transform 0.3s;
  cursor: pointer;
}

.box_3 .inner .role-item .info .cv .story-close-btn:hover {
  transform: rotate(180deg);
}

.box_3 .inner .role-item .info .role-video {
  top: 220px;
  width: 440px;
  height: 208px;
  z-index: 0;
}

.box_3 .inner .role-item .info .role-video .video-box {
  top: 18px;
  left: 0;
  width: 280px;
  height: 158px;
  overflow: hidden;
  z-index: 0;
}

.box_3 .inner .role-item .info .role-video .video-box video {
  object-fit: fill;
}

.box_3 .inner .role-item .info .role-video .video-cover:hover .cover-bg {
  transform: scale(1.2);
}

.box_3 .inner .role-item .info .role-video .video-cover {
  left: 0;
  width: 280px;
  height: 158px;
  z-index: 20;
}

.box_3 .inner .role-item .info .role-video .video-cover .cover-bg {
  top: 0;
  left: 0;
  transform: scale(1);
  transition: 0.5s;
  z-index: 0;
  background-size: 100% 100%;
}

.box_3 .inner .role-item .info .role-video .video-cover .video-shadow {
  top: 0;
  left: 0;
  width: 280px;
  height: 158px;
  background-image: url(zzc.png);
  z-index: 10;
}

.box_3 .inner .role-item .info .role-video .video-cover .video-btn {
  top: 40px;
  left: 94px;
  width: 82px;
  height: 82px;
  cursor: pointer;
  z-index: 20;
}

.box_3 .inner .role-item .info .role-video .video-cover .video-center {
  width: 82px;
  height: 82px;
  background-position: -1034px -1200px;
  transition: all 0.5s ease-out;
  transform-origin: center;
  z-index: 20;
}

.box_3 .inner .role-item .info .role-video .video-cover .video-btn:hover .video-center {
  transform: scale(1.1) rotate(360deg);
}

.box_3 .inner .role-item .info .role-video .video-cover .video-rotate1 {
  width: 82px;
  height: 82px;
  background-position: -851px -1199px;
  animation: 4s am-rotate1 linear infinite;
}

.box_3 .inner .role-item .info .role-video .video-cover .video-rotate2 {
  width: 82px;
  height: 82px;
  background-position: -944px -1199px;
  animation: 2s am-rotate2 linear infinite;
}

.box_3 .inner .role-item .info .role-video .video-line {
  bottom: 0;
  right: 0;
  width: 800px;
  height: 12px;
  background-position: 0px -80px;
}

.box_3 .inner .role-item .info .bg-story {
  display: none;
  top: 214px;
  min-height: 208px;
  width: 500px;
  z-index: 0;
}

.box_3 .inner .role-item .info .story-title {
  display: inline-block;
  margin-top: 20px;
  margin-left: -6px;
  font-size: 14px;
  color: #99ffff;
}

.box_3 .inner .role-item .info .story-text {
  font-size: 14px;
  color: #fff;
  white-space: normal;
}

.box_3 .inner .role-item .info .call-up {
  top: 460px;
  width: 375px;
  min-height: 51px;
  z-index: 10;
}

.box_3 .inner .role-item .info .call-up .call-btn {
  cursor: pointer;
  z-index: 10;
  overflow: hidden;
}

.box_3 .inner .role-item .info .call-up .call-btn:hover {
  opacity: 0.9;
}

.box_3 .inner .role-item .info .call-up .call-btn:hover .skew-bg {
  -webkit-transform: translate(0px, 0) skewX(45deg);
  -ms-transform: translate(0px, 0) skewX(45deg);
  transform: translate(0px, 0) skewX(45deg);
}

.box_3 .inner .role-item .info .call-up .call-btn:hover .inner-text {
  -webkit-transform: translate(-4px, 0);
  -ms-transform: translate(-4px, 0);
  transform: translate(-4px, 0);
}

.box_3 .inner .role-item .info .call-up .skew-bg {
  position: absolute;
  top: 0;
  right: -30px;
  z-index: 2;
  width: 150%;
  height: 100%;
  background: #fff;
  -webkit-transform: translate(-250px, 0) skewX(45deg);
  -ms-transform: translate(-250px, 0) skewX(45deg);
  transform: translate(-250px, 0) skewX(45deg);
  transition: .8s;
}

.box_3 .inner .role-item .info .call-up .inner-text {
  position: relative;
  z-index: 10;
  transition: .5s;
}

.box_3 .inner .role-item .info .call-up .call-btn1 {
  width: 120px;
  height: 46px;
  background-color: #ffea17;
}

.box_3 .inner .role-item .info .call-up .call-btn1 .inner-text {
  background-position: -0 -0px;
}

.box_3 .inner .role-item .info .call-up .call-btn2 {
  margin-left: 20px;
  width: 170px;
  height: 46px;
  background-color: #99ffff;
}

.box_3 .inner .role-item .info .call-up .call-btn2 .inner-text {
  background-position: -138px 0;
}

.box_3 .inner .role-item .info .call-up .arrow {
  top: 0;
  left: 110px;
  margin-left: 20px;
  z-index: 8;
}

.box_3 .inner .role-item .info .call-up .arrow .arrow-line {
  margin-top: 22px;
  width: 200px;
  border-top: 1px solid #99ffff;
  animation: 1s arrow ease-in-out infinite alternate;
}

.box_3 .inner .role-item .info .call-up .arrow .arrow-head {
  top: 16px;
  right: 0;
  width: 12px;
  height: 12px;
  border-top: 1px solid #99ffff;
  border-right: 1px solid #99ffff;
  transform: rotate(45deg);
}

.box_3 .inner .role-item .info .strategy {
  top: 550px;
}

.box_3 .inner .role-item .info .strategy .bg-line {
  top: -66px;
  left: 0;
  width: 570px;
  height: 86px;
  background-position: -0 -242px;
}

.box_3 .inner .role-item .info .strategy .title {
  top: -4px;
  left: 26px;
  width: 95px;
  height: 24px;
  font-size: 16px;
  color: #99ffff;
  line-height: 20px;
}

.box_3 .inner .role-item .info .strategy .strategy-text {
  top: 32px;
  left: 0px;
}

.box_3 .inner .role-item .info .strategy .strategy-text a {
  font-size: 14px;
  color: #FFFFFF;
  line-height: 26px;
  text-decoration: none;
  transition: 0.3s;
}

.box_3 .inner .role-item .info .strategy .strategy-text a:hover {
  margin-left: 6px;
  color: #ffea17 !important;
}

.box_3 .inner .role-item .main-img {
  bottom: -40px;
  right: 0px;
  font-size: 0;
  overflow: hidden;
}

.box_3 .inner .role-item1 {
  display: block;
}

@keyframes arrow {
  from {
    width: 210px;
  }

  to {
    width: 220px;
  }
}

@keyframes line_flow {
  0% {
    clip: rect(0, 0, 12px, 0);
  }

  25% {
    clip: rect(0, 300px, 12px, 0);
  }

  50% {
    clip: rect(0, 600px, 12px, 300px);
  }

  75% {
    clip: rect(0, 800px, 12px, 600px);
  }

  100% {
    clip: rect(0, 800px, 12px, 800px);
  }
}

@keyframes line_flow2 {
  0% {
    width: 0px;
  }

  100% {
    width: 584px;
  }
}

@keyframes up-down2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 25px);
  }
}

/* ?? */
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #333;
  cursor: pointer;
}

.btn {background: none;border: none;outline: none;}
.btn:active {transform: scale(0.96)}

.fr {
  float: right
}

.pa {
  position: absolute
}

.pr {
  position: relative
}

.main {
  width: 6.4rem;
  /* height: 15rem; */
  background: #fff;
}

.box_strategy {
  /* display: none; */
  position: relative;
  margin: 50px auto 0 auto;
  width: 1200px;
  z-index: 10;
}

.box_strategy .part-title {
  margin: 0 auto 40px auto;
  width: 732px;
  height: 66px;
  z-index: 10;
  background: url(title_strategy.png)
}

.box_strategy .swiper-container {
  height: 220px;
}
.box_strategy .swiper-slide {
  white-space: nowrap;
  height: 220px;
}

.box_strategy .swiper-slide>a {
  display: inline-block;
  width: 390px;
  height: 220px;
  overflow: hidden;
  margin: 0 3px;
}

.box_strategy .strategy {
  position: relative;
  display: inline-block;
  margin-right: 8px;
  width: 390px;
  height: 220px;
  z-index: 10;
}

.box_strategy .strategy .pic {
  width: 390px;
  height: 220px;
  background-size: cover;
  background-position: center center;
  transition: 0.3s;
}

.box_strategy .strategy:hover .pic {
  transform: scale(1.04);
  filter: brightness(1.1)
}


.box_strategy .strategys .strategy:nth-child(3) {
  margin-right: 0;
}

.box_strategy .strategy .title {
  position: absolute;
  bottom: 0;
  height: 25px;
  width: 100%;
  text-align: left;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.box_strategy .strategy .type {
  position: relative;
  display: inline-block;
  padding: 0 26px 0 12px;
  line-height: 25px;
  height: 25px;
  font-size: 18px;
  font-weight: bold;
  color: #0f2474;

}

.box_strategy .strategy .type .bg {
  position: absolute;
  top: 0;
  margin-left: -24px;
  width: 100%;
  height: 25px;
  transform: skewX(30deg);
  background: #ffea17;
}

.box_strategy .strategy .type .text {
  position: relative;
  z-index: 10;
  line-height: 25px;
  min-width: 20px;
  height: 25px;
}

.box_strategy .strategy .title .inner {
  display: inline;
  margin-left: -4px;
}

.box_strategy .swiper_ctrl {
  margin-top: 20px;
  text-align: center;
  height: 30px;
}

.box_strategy .process {
  position: relative;
  display: inline-block;
  width: 312px;
  height: 1px;
  background: #35a1ed;
  vertical-align: middle;
}

.box_strategy .curr_process {
  position: absolute;
  top: -2px;
  width: 0%;
  height: 5px;
  background: #35a1ed;
  transition: 0.3s ease-out;
}

.box_strategy .swiper_ctrl .btn {
  position: relative;
  margin: 0 24px;
  top: 0;
  width: 34px;
  height: 30px;
  transition: 0.2s;
  background-image: url(strategy_ctrl.png);
  vertical-align: middle;
}

.box_strategy .swiper-button-next {
  background-position: 34px 0;
}

.box_strategy .strategy_list {
  margin-top: 40px;
}

.box_strategy .strategy_list ul.ctrl {
  position: relative;
  padding-left: 12px;
  padding-bottom: 12px;
  border-bottom: 2px solid #35a1ed;
}

.box_strategy .strategy_list .ctrl .curr-dot {
  position: absolute;
  bottom: -13px;
  left: 36px;
  width: 24px;
  height: 24px;
  background: url(dot.png);
  background-size: 108px 24px;
  background-position: -35px 0;
  transition: 0.3s ease-out;
}

.box_strategy .strategy_list li {
  list-style: none;
  display: inline-block;
  width: 80px;
  font-size: 18px;
  text-align: center;
}

.box_strategy .strategy_list li.active a {
  color: #35a1ed;
}

.box_strategy .strategy_list li a:hover {
  color: #35a1ed;
}

.box_strategy .strategy_list .more {
  padding: 0;
  width: 24px;
  height: 24px;
  background-position: -538px -12px;
  cursor: pointer;
  vertical-align: bottom;
  background-image: url(pic_2.png)
}

.box_strategy .article {
  display: none;
  margin-top: 20px;
  height: 220px;
}

.box_strategy .article.article_1 {
  display: block;
}

.box_strategy .article li {
  margin-top: 30px;
  margin-bottom: 20px;
  padding-left: 12px;
  width: 390px;
  text-align: left;
  line-height: 20px;
  border-left: 2px solid #a9a9a9;
  box-sizing: border-box;
  cursor: pointer;
}

.box_strategy .article li:hover {
  border-left: 2px solid #35a1ed;
  transition: 0.3s;
}

.box_strategy .article li .title {
  margin: 0 0 4px 0;
  font-size: 16px;
  line-height: 24px;
  color: #3a3c40;
  transition: 0.3s;
  display: inline-block;
}

.box_strategy .article li:hover .title {
  display: inline-block;
  color: #35a1ed;
  transform: translateX(6px)
}

.box_strategy .article li p.writer {
  margin-left: 6px;
  font-size: 14px;
  color: #a9a9a9;
}

/* ?????? */

.box_game_vedio {
  margin: 0px auto 0 auto;
  width: 100%;
  /* display: none; */
  overflow: hidden;
}

.box_game_vedio .bg {
  position: absolute;
  top: 0;
  left: -360px;
  width: 1920px;
  height: 625px;
  background: url(box_game_vedio/bg.png)
}

.box_game_vedio .part-title {
  margin: 0 auto 40px auto;
  width: 732px;
  height: 66px;
  z-index: 10;
  background: url(title_game_video.png)
}

.box_game_vedio .content {
  position: relative;
  padding: 30px 0px;
  width: 1200px;
  margin: auto;
  height: 625px;
  /* background: #123c6b; */
  box-sizing: border-box;
}

.box_game_vedio .content .nav {
  position: relative;
  margin-bottom: 38px;
  width: 960px;
  white-space: nowrap;
  z-index: 110;
  margin-left: 86px;
}

.box_game_vedio .content .nav-inner {
  height: 34px;
  width: 100%;
  overflow: hidden;
}

.box_game_vedio .content .name-list {
  display: inline-block;
  white-space: nowrap;
}

.box_game_vedio .content .name-list li {
  position: relative;
  padding-left: 2px;
  display: inline-block;
  margin: 0 8px;
  cursor: pointer;
}

.box_game_vedio .content .active .border-skew {
  background: #ffea17 !important;
  border: 1px solid #0f2474;
}

.box_game_vedio .content .active span {
  color: #0f2474 !important;
}

.box_game_vedio .content .name-list li span {
  position: relative;
  padding: 0 24px;
  font-size: 16px;
  line-height: 30px;
  color: #77ceda;
  z-index: 10;
}

.box_game_vedio .content .border-skew {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 30px;
  border: 1px solid #77ceda;
  transition: background 0.5s;
  transform: skewX(-30deg);
}

.box_game_vedio .content .name-list li:hover span {
  color: #0f2474;
}

.box_game_vedio .content .name-list li:hover .border-skew {
  background: #ffea17;
  border: 1px solid #77ceda;
}
.box_strategy  .submit_article {
  float: right;
}
.submit_article {
  display: inline-block;
  background: #39f;
  color: #fff;
  line-height: 30px;
  padding: 0 10px;
}

.submit_article a{
  padding: 0 8px;
  color: #fff !important;
}
.submit_article a:hover {
  color: #fff !important;
}

.box_game_vedio .content .nav-more {
  display: inline-block;
  top: 5px;
  right: -70px;
  cursor: pointer;
}

.box_game_vedio .content .nav-more span {
  margin-left: 4px;
  font-size: 16px;
  line-height: 30px;
  color: #77ceda;
  vertical-align: middle;
  cursor: pointer;
}

.box_game_vedio .content .nav-more a {
  color: #77ceda;
  vertical-align: baseline;
  text-decoration: none;
}

.box_game_vedio .content .nav-more:hover {
  color: #77ceda;
  transform: translateY(-2px)
}


.box_game_vedio .content .submit_article {
  display: inline-block;
  right: -152px;
  cursor: pointer;
  top: -58px;
}

.box_game_vedio .content .line-cover {
  display: inline-block;
  width: 100%;
  height: 22px;
  overflow: hidden;
  vertical-align: baseline;
}

.box_game_vedio .content .skew-line {
  margin-top: 15px;
  width: 100%;
  height: 30px;
  border: 1px solid #77ceda;
  transform: skewX(-30deg);
}

.box_game_vedio .article {
  position: absolute;
  top: 82px;
  width: 1100px;
  /* background: #123c6b; */
  display: none;
  margin-left: 28px;
}

.box_game_vedio .article.article_1 {
  display: block;
}

.box_game_vedio .article li {
  position: relative;
  display: inline-block;
  width: 300px;
  margin: 30px 0 0px 56px;
  list-style: none;
  cursor: pointer;
}

.ani_ul li:nth-child(1) {
  animation-delay: 0.2s;
}
.ani_ul li:nth-child(2) {
  animation-delay: 0.3s;
}
.ani_ul li:nth-child(3) {
  animation-delay: 0.4s;
}
.ani_ul li:nth-child(4) {
  animation-delay: 0.5s;
}
.ani_ul li:nth-child(5) {
  animation-delay: 0.6s;
}
.ani_ul li:nth-child(6) {
  animation-delay: 0.7s;
}

.ani_ul .animated {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}

.ani_ul .fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown
}
@keyframes fadeInDown {
  0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 20%,0);
      transform: translate3d(0, 20%,0)
  }

  to {
      opacity: 1;
      -webkit-transform: none;
      transform: none
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown
}

.box_game_vedio .article .border {
  position: absolute;
  top: -8px;
  left: 8px;
  width: 300px;
  height: 170px;
  border: 1px solid #77ceda;
  transition: all 0.2s ease-in-out;
}

.box_game_vedio .article .pic_box {
  position: relative;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 170px;
  z-index: 10;
  overflow: hidden;
}

.box_game_vedio .article .pic {
  width: 100%;
  height: 100%;
  background-size: cover;
  transition: all 0.3s ease-out;
  transform-origin: center center;
  filter: brightness(0.9)
}

.box_game_vedio .article li:hover .pic {
  transform: scale(1.04);
  filter: brightness(1.1)
}

.box_game_vedio .article .time {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 9px 10px;
  font-size: 16px;
  color: #fff;
  border-top-left-radius: 12px;
  background: rgba(0, 0, 0, 0.8);
}
.box_game_vedio .article .info_bar {
  height: 62px;
  overflow: hidden;
  position: relative;
}

.box_game_vedio .article .title {
  margin: 12px 0 0 -6px;
  font-size: 16px;
  transition: 0.4s;
}

.box_game_vedio .article .author {
  position: absolute;
  bottom: 0;
  background: #123c6b;
  width: 100%;
  line-height: 26px;
  transition: 0.4s;
}

.box_game_vedio .article li{
  color: #99ffff;
  cursor: pointer;
  vertical-align: top;
}

.box_game_vedio .article li:hover ,
.box_game_vedio .article li:hover {
  color: #fff;
  cursor: pointer;
}

.box_game_vedio .article li:hover .title{
  white-space: normal;
}
.box_game_vedio .article li:hover .author{
  transform: translateY(100%)
}

.dialog_game_video iframe{
  width: 100%;
  height: 100%;
}

.box_4 {
  width: 100%;
  height: 820px;
  overflow: hidden;
}

.box_4 .part-title {
  margin: 50px auto 0 auto;
  width: 740px;
  height: 70px;
  background: url(title_game_video.png);
  background-position: -2px -904px;
  z-index: 10;
}

.box_4 .swiper-outbox {
  margin: 55px auto 0 auto;
  width: 1200px;
  height: 520px;
}

.box_4 .swiper-container {
  width: 1200px;
  height: 520px;
  overflow: hidden;
}

.box_4 .swiper-container .swiper-slide {
  display: inline-block;
  width: 920px;
  height: 520px;
}

.box_4 .swiper-container .swiper-slide img {
  width: 920px;
  height: 520px;
}

.box_4 .toggle {
  position: absolute;
  top: 200px;
  width: 50px;
  height: 90px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
}

.box_4 .toggle-left {
  left: -110px;
  transform: translateX(10px);
  background-position: -1304px -528px;
}

.box_4 .toggle-left:hover {
  transform: translateX(0px) !important;
}

.box_4 .toggle-right {
  right: -110px;
  transform: translateX(-10px);
  background-position: -1354px -528px;
}

.box_4 .toggle-right:hover {
  transform: translateX(0px) !important;
}

.box_4 .pagination {
  margin: 55px auto 0 auto;
  width: 200px;
  height: 50px;
}

.box_4 .pagination-wrap {
  position: absolute;
  z-index: 20;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
}

.box_4 .pagination {
  margin: 0 auto;
  width: 1380px;
  height: 30px;
  text-align: center;
  background-position: 0 -371px;
  background-repeat: no-repeat;
}

.box_4 .swiper-pagination-switch {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0 14px;
  background: url(dot.png);
  background-size: 108px 24px;
  background-position: -82px 0;
  cursor: pointer;
}

.box_4 .swiper-active-switch {
  background-position: -33px 0;
}

.box_5 {
  width: 100%;
  background: #093186;
}

.box_5 .center {
  margin: 0 auto;
  width: 1040px;
}

.box_5 .center .center-bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.box_5 .center .center-bg-top {
  height: 720px;
  background-image: url(bg_comment.png);
  background-repeat: no-repeat;
}

.box_5 .center .center-bg-body {
  margin: 0 auto;
  width: 1000px;
  height: 100%;
  background: #3399ff;
}

.box_5 .center .my-story {
  margin: 0 auto;
  width: 1000px;
  overflow: hidden;
}

.box_5 .center .my-story .wall-update {
  float: right;
  margin: 150px 12px 0 0;
  width: 98px;
  height: 36px;
  background-image: url(pic_1.png);
  background-position: -440px -262px;
  cursor: pointer;
}

.box_5 .center .my-story .wall-update:hover {
  opacity: 0.8;
}

.box_5 .center .my-story .wall-update:active {
  transform: scale(0.95);
}

.box_5 .center .my-story .new-story-btn {
  float: right;
  margin: 150px 12px 0 0;
  width: 130px;
  height: 36px;
  background-image: url(pic_1.png);
  background-position: -440px -315px;
  cursor: pointer;
}

.box_5 .center .my-story .new-story-btn:hover {
  opacity: 0.8;
}

.box_5 .center .my-story .new-story-btn:active {
  transform: scale(0.95);
}

.box_5 .center .my-story .story-wall {
  margin: 0 auto;
  width: 960px;
  height: 380px;
  overflow: hidden;
}

.box_5 .center .my-story .ddItem {
  position: absolute;
  top: 100%;
  left: 40%;
  cursor: move;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 1;
  transition: all 0.3s linear;
  transform: scale(0.7);
  transform-origin: top;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.box_5 .center .my-story .ddItem--word {
  width: 270px;
  height: 220px;
  background-position: -276px -4px;
  background-image: url(pic_1.png);
}

.box_5 .center .my-story .ddItem__icon {
  position: absolute;
  top: 5px;
  left: 93px;
}

.box_5 .center .my-story .ddItem__icon img {
  width: 85px;
  height: 85px;
  border-radius: 200px;
}

.box_5 .center .my-story .ddItem__content {
  font-family: "Microsoft Yahei";
  cursor: pointer;
  color: #cff;
  padding: 0px 30px 0px;
  margin-top: 110px;
}

.box_5 .center .my-story .ddItem__name {
  position: absolute;
  bottom: 22px;
  right: 30px;
  font-size: 18px;
  color: #3cf;
  font-family: "Microsoft Yahei";
}

.box_5 .center .my-story .ddItem--img {
  width: 270px;
  height: 363px;
  background-position: 0 0;
  background-image: url(pic_1.png);
}

.box_5 .center .my-story .ddItem--img .ddItem__content {
  margin-top: 48px;
  position: relative;
}

.box_5 .center .my-story .ddItem__content__img {
  width: 210px;
  height: 260px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.box_5 .center .my-story .ddItem__content__words {
  position: absolute;
  bottom: 0;
  width: 190px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 17px;
  padding: 10px;
}

.box_5 .center .comment {
  margin: 0 auto;
  width: 1000px;
  height: auto;
  z-index: 10;
}

.box_5 .center .comment #articleComment {
  margin: 0 auto;
  width: 940px;
  background: none;
  min-height: 400px;
}

.box_5 .center .comment #articleComment>img {
  padding-top: 80px;
}

.box_5 .center .comment #articleComment .commentModule_ctnWords img {
  max-width: 880px;
  max-height: 400px;
}

.box_5 .center .comment #articleComment .pagination .current {
  background-color: #FF6;
  padding: 6px 10px;
}

.box_5 .center .comment #articleComment .pagination a,
.box_5 .center .comment #articleComment .pagination span {
  display: inline-block;
  background-color: #FFF;
  color: #666;
  font-size: 15px;
}

.box_5 .center .comment .pagination a {
  background: #d03451;
  color: #666;
  padding: 6px 10px;
}

.box_5 .center .comment .reply_pagination {
  margin: 0 auto;
  padding: 30px 0 20px;
  text-align: center;
  font-size: 12px;
  color: #fff !important;
  background: #fafafa;
}

.box_5 .center .comment #editor {
  height: 132px !important;
}

.box_5 .center .comment #editor .edui-editor {
  width: 910px;
}

.box_5 .center .comment .w_replyEditor {
  background: #fff;
}

.box_5 .center .comment .w_pinglunbtn {
  margin-top: 0px;
  margin-bottom: 20px;
  padding: 0 15px 20px 20px;
  background: #fff;
}

.box_5 .center .comment .jpComment_h {
  display: none;
}

.box_5 .center .comment .reply_bg01 {
  overflow: hidden;
  padding-bottom: 10px;
}

.box_5 .center .comment .reply_main {
  background: #fff;
}

.box_5 .center .comment .reply_head {
  margin: 3px auto 0;
  width: auto;
  height: 75px;
  color: #fff !important;
  background: url(pic_2.png);
  background-position: 188px -1406px;
}

.box_5 .center .comment .reply_head .discuss_num {
  display: inline-block;
  margin-top: 28px;
  float: left;
  padding: 0px;
  font-size: 18px;
  color: #fff !important;
}

.box_5 .center .comment .reply_head #replyPositioner {
  width: 170px;
  height: 50px;
  margin: 15px 0px 0 0;
  background: none;
  font-size: 0px;
  cursor: pointer;
}

.box_5 .center .comment .reply_head .num {
  color: #ffea17 !important;
}

.box_5 .center .comment .w_jpComment {
  border: none;
}

.box_5 .center .comment .jpComment .commentModule_ctnItem {
  margin: 0 4px;
  border: none;
}

.box_5 .center .comment .jpComment .commentModule_ctnItemHeader .name:before {
  display: inline-block;
  content: '置顶';
  margin-right: 4px;
  width: 44px;
  height: 26px;
  color: #fff;
  text-align: center;
  background: #ff6600;
}

.box_5 .center .comment .w_pinglunbtn .pinglunxuzhiSuccess {
  top: -100px !important;
  left: 380px !important;
}

.box_5 .center .comment .w_pinglunbtn .pinglunxuzhiSuccess {
  top: -100px !important;
  left: 380px !important;
}

.box_5 .center .comment .commentModule_ctnItem p {
  font-size: 15px;
}

.box_5 .center .comment .commentModule_ctnItem .commentModule_ctnWords {
  font-size: 15px;
}

.box_5 .center .comment .pinglunxuzhi {
  right: 204px;
}

.box_6 {
  width: 100%;
  height: 280px;
  background: #093186;
}

.box_6 * {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.box_6 .center {
  margin: 0 auto;
  width: 1200px;
  height: 210px;
  background: url(footer.png);
}
.box_6 .center a{width: 33.3%;float: left;text-align: center;}
.box_6 .center a img{height: 136px;display: block;margin-top: 70px;}



.box_6 .foot_qr {
  width: 112px;
  height: 112px;
}

.box_6 .qr_weixin {
  top: 50px;
  left: 100px;
}

.box_6 .qr_weixbo {
  top: 50px;
  left: 420px;
}

.box_6 .qq_group {
  top: 100px;
  left: 934px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.box_6 .weibo_link {
  top: 98px;
  left: 544px;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  background: #39f;
}

.story-detail .story-body {
  width: 876px;
  min-height: 400px;
  margin: 0 auto;
}

.story-detail .user {
  float: left;
  width: 210px;
}

.story-detail .user-img {
  width: 208px;
  height: 258px;
  border: 1px solid #D2D2D2;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 0;
}

.story-detail .user-name {
  font-size: 18px;
  text-align: center;
  font-family: "Microsoft Yahei";
  color: #39f;
}

.story-detail .detail {
  float: right;
  width: 630px;
  border: 1px solid #D2D2D2;
  padding: 10px 0 10px 10px;
  background: #fff;
}

.story-detail .detail .detail-scroll {
  padding-right: 16px;
  height: 340px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.story-detail .detail .detail-scroll .user-icon {
  width: 106px;
  float: left;
  margin-right: 15px;
  width: 104px;
  height: 104px;
  background: url(pic_1.png);
  background-position: -615px -257px;
  overflow: hidden;
}

.story-detail .detail .detail-scroll .user-icon img {
  border-radius: 1000px;
  display: block;
  width: 84px;
  height: 84px;
  margin: 10px auto 0;
}

.story-detail .detail .detail-scroll .detail-content {
  display: inline-block;
  width: 478px;
}

.story-detail .detail .detail-scroll .story-name {
  margin-right: 10px;
  color: #39f;
}

.story-detail .detail .detail-scroll .story-date {
  margin-right: 10px;
  color: #999;
  line-height: 30px;
}

.story-detail .detail .detail-scroll .detail-text {
  font-size: 14px;
  color: #333;
  line-height: 30px;
  min-height: 109px;
}

.story-detail .detail .detail-scroll .border-grey-1 {
  background-color: #FAFAFA;
  border: 1px solid #DFDFDF;
}

.story-detail .detail .detail-scroll .detail-reply-item {
  padding: 10px;
  border-top: 1px dashed #DFDFDF;
}

.story-detail .detail .detail-scroll .detail-reply-item .detail-reply-ctrl {
  position: relative;
  font-size: 12px;
  color: #999;
  line-height: 24px;
}

.story-detail .detail .detail-scroll .detail-reply-item .detail-reply-ctrl .detail-reply-name {
  margin-right: 10px;
  color: #39f;
}

.story-detail .detail .detail-scroll .detail-reply-item .detail-reply-ctrl .detail-reply-time {
  color: #999;
}

.story-detail .detail .detail-scroll .detail-reply-item .detail-reply-ctrl .detail-reply-btn {
  position: absolute;
  right: 10px;
  top: 0;
  cursor: pointer;
}

.story-detail .detail .detail-scroll .detail-reply-item .detail-reply-content {
  line-height: 24px;
}

.story-detail .detail .detail-scroll .detail-reply-item:first-child {
  border-top: none !important;
}

.story-detail .detail .detail-scroll .detail-edit {
  height: 80px;
  margin-top: 10px;
}

.upload-bg {
  background-color: #EDEDED;
  border: 1px solid #D2D2D2;
}

.writePanel__upload {
  display: inline-block;
  margin: 0 22px 92px 54px;
  width: 210px;
  height: 260px;
  vertical-align: top;
  background-color: #EDEDED;
  border: 1px solid #D2D2D2;
  overflow: hidden;
}

.writePanel__uploadBtn {
  display: block;
  position: relative;
  margin: 40px auto 0;
  width: 100px;
  height: 100px;
  background: url(pic_1.png);
  background-position: -304px -260px;
}

.writePanel__uploadBtn__wimg {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 0;
  -webkit-text-size-adjust: none;
}

.webuploader-container {
  position: relative;
}

.webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

.webuploader-pick-disable {
  opacity: 0.6;
  pointer-events: none;
}

.writePanel__uploadBtn .webuploader-pick {
  background: url(about:blank);
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
}

.webuploader-pick {
  position: relative;
  display: inline-block;
  cursor: pointer;
  background: #00b7ee;
  padding: 10px 15px;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}

.writePanel__rules {
  font-size: 12px;
  color: #999;
  margin: 30px 20px 0;
}

.writePanel__uploadBtn__wimg--uploaded {
  background-color: #fff;
}

.writePanel__uploadBtn__wimg {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  font-size: 0;
  -webkit-text-size-adjust: none;
}

.writePanel__uploadBtn__wimg img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.text-upload {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}

.story-edit {
  width: 600px;
  height: 260px;
}

.new-call .dialog-content {
  padding: 0 0 40px 0;
  overflow: hidden;
}

.new-call .attitudeWrap {
  padding: 0px 20px 0px 20px;
  background: #fff;
  position: relative;
  z-index: 2;
}

.new-call .attitudeSlide {
  width: 100%;
  padding-top: 15px;
}

.new-call .attitudeSlide .sliderWrp,
.new-call .attitudeSlide .slider,
.new-call .attitudeSlide .sliderItem {
  width: 100%;
  margin: 0 auto;
}

.new-call .attitudeSlide .sliderWrp {
  padding-top: 20px;
}

.new-call .attitudeSlide .sliderWrp_scroll {
  position: relative;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.new-call .attitudeItem {
  position: relative;
  *width: 48%;
  height: 60px;
  margin-bottom: 20px;
  margin-right: 40px;
  *margin-right: 0;
  _display: inline;
}

.new-call .attitudeItem .imgWrp,
.new-call .attitudeItem .img {
  display: block;
  width: 48px;
  height: 48px;
}

.new-call .attitudeItem .imgWrp {
  margin: 3px 5px 0 0;
  padding: 0 6px;
  height: 52px;
}

.new-call .attitudeItem .imgWrp,
.new-call .attitudeItem .info {
  cursor: pointer;
}

.new-call .attitudeItem .shadow {
  bottom: -2px;
  left: 0px;
}

.new-call .attitudeTxtWrp .txt {
  height: 38px;
  line-height: 38px;
}

.new-call .attitudeSubmitWrap {
  width: 100%;
  height: 38px;
  line-height: 38px;
  border: 1px solid #ccc;
}

.new-call .attitude_drop,
.new-call .attitude_selected,
.new-call .attitude_selectedImg {
  display: block;
  width: 26px;
  height: 26px;
}

.new-call .attitude_drop {
  height: 40px;
  margin: 6px 0 0 3px;
  cursor: pointer;
}

.new-call #attitude_txt {
  width: calc(100% - 120px - 170px);
  height: 36px;
  line-height: 36px;
  margin: 0 8px;
  padding: 1px 0;
  _display: inline;
  border: none;
  background: none;
  outline: none;
  color: #333;
}

.new-call .canWriteAttitudeNumWrp {
  color: #ccc;
}

.new-call .canWriteAttitudeNumWrp .imp {
  color: #ffc600;
}

.new-call .attitudeSubmit_js {
  top: -1px;
  right: -1px;
  width: 120px;
  height: 40px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.new-call .attitudeSubmit_js:hover {
  text-decoration: none;
  opacity: 0.8;
}

.new-call .attitude_drop_menu {
  display: none;
  top: auto;
  bottom: 43px;
  left: -4px;
  width: 240px;
  visibility: hidden;
}

.new-call .attitude_drop_menu_show {
  display: block;
  visibility: visible;
}

.new-call .attitude_drop_menu_item {
  float: left;
  width: 48px;
  height: 48px;
  margin: -1px -1px 0 0;
  padding: 5px;
  border: 1px solid #c0c0c0;
  background-color: #fff;
}

.new-call .attitude_drop_menu_item img {
  display: block;
  width: 48px;
  height: 48px;
}

.new-call .attitude_tips {
  display: none;
  top: -17px;
  padding: 0 8px;
  color: #fff;
  white-space: nowrap;
  background-color: #333;
  border-radius: 3px;
  z-index: 1;
}

.new-call .attitude_ico_arrow {
  left: 50%;
  bottom: -10px;
  margin-left: -5px;
  border-top: 5px solid #333;
  border-bottom: 5px dashed transparent;
  border-left: 5px dashed transparent;
  border-right: 5px dashed transparent;
}

.new-call .noAttitude {
  font-size: 16px;
  color: #999;
}

.new-call .asidehead .attitueTotal_js {
  color: #48afff;
}

.new-call .zanAttitude {
  display: block;
  height: 22px;
  cursor: pointer;
}

.new-call .zanAttitude:hover {
  text-decoration: none;
}

.new-call .zanAttitude .zanIcon,
.new-call .zanAttitude .zanNum {
  display: inline-block;
  vertical-align: middle;
}

.new-call .zanAttitude .zanNum {
  margin-left: 6px;
  color: #999;
}

.new-call .attitudeItem .shadow {
  background-image: url(attitudeaola.png);
  width: 61px;
  height: 8px;
  background-position: 0px -43px;
}

.new-call .attitudeItem1 .txtBg1 {
  background-image: url(attitudeaola.png);
  width: 15px;
  height: 38px;
  background-position: -20px -0px;
}

.new-call .attitudeItem1 .txt {
  background: #1e88ff;
  color: #fff;
}

.new-call .attitudeItem1 .txtBg2 {
  background-image: url(attitudeaola.png);
  width: 10px;
  height: 38px;
  background-position: -30px -56px;
}

.new-call .attitudeItem2 .txtBg1 {
  background-image: url(attitudeaola.png);
  width: 15px;
  height: 38px;
  background-position: -80px -0px;
}

.new-call .attitudeItem2 .txt {
  background: #00aeff;
  color: #fff;
}

.new-call .attitudeItem2 .txtBg2 {
  background-image: url(attitudeaola.png);
  width: 10px;
  height: 38px;
  background-position: 0px -56px;
}

.new-call .attitudeItem3 .txtBg1 {
  background-image: url(attitudeaola.png);
  width: 15px;
  height: 38px;
  background-position: 0px -0px;
}

.new-call .attitudeItem3 .txt {
  background: #61e3ff;
  color: #003159;
}

.new-call .attitudeItem3 .txtBg2 {
  background-image: url(attitudeaola.png);
  width: 10px;
  height: 38px;
  background-position: -15px -56px;
}

.new-call .attitudeItem4 .txtBg1 {
  background-image: url(attitudeaola.png);
  width: 15px;
  height: 38px;
  background-position: -60px -0px;
}

.new-call .attitudeItem4 .txt {
  background: #8df8ff;
  color: #003159;
}

.new-call .attitudeItem4 .txtBg2 {
  background-image: url(attitudeaola.png);
  width: 10px;
  height: 38px;
  background-position: -45px -56px;
}

.new-call .attitudeItem4 .txtBg2 {
  background-image: url(attitudeaola.png);
  width: 10px;
  height: 38px;
  background-position: -45px -56px;
}

.new-call .attitudeItem5 .txtBg1 {
  background-image: url(attitudeaola.png);
  width: 15px;
  height: 38px;
  background-position: -40px -0px;
}

.new-call .attitudeItem5 .txtBg2 {
  background-image: url(attitudeaola.png);
  width: 10px;
  height: 38px;
  background-position: -60px -56px;
}

.new-call .attitudeItem5 .txt {
  background: #bbf4f6;
  color: #003159;
}

.new-call .zanAttitude .zanIcon {
  background-image: url(attitudeaola.png);
  width: 22px;
  height: 17px;
  background-position: -100px -0px;
}

.new-call .zanAttitude:hover .zanIcon {
  background-image: url(attitudeaola.png);
  width: 22px;
  height: 17px;
  background-position: -100px -22px;
}

.new-call .zanAttitude .zanIcon-active {
  background-position: -100px -22px !important;
}

.new-call .attitudeSubmit_js {
  background: #1e88ff;
}

.new-call .attitudeSubmitWrap_focus {
  border: 1px solid #1e88ff;
}

.new-call .attitude_drop_menu_item:hover {
  position: relative;
  border: 1px solid #1e88ff;
}

.new-call .attitudeWrap_aola h3 {
  font-weight: bold;
  color: #162635;
  font-size: 18px;
}

.new-call .asidehead .attitueTotal_js {
  color: #0084ff;
}

.new-call .canWriteAttitudeNumWrp .imp {
  color: #1e88ff;
}

.new-call .asidehead {
  padding-bottom: 10px;
  border-bottom: 1px dashed #b3b3b3;
}

.new-call .del_js {
  color: #333;
}

.commom_bg1  {
  background-image: url(pic_2.png) !important;
}

.editor-ctrl {
  text-align: right;
  margin-top: 10px;
}

.editor-face {
  margin-right: 10px;
  vertical-align: middle;
  display: inline-block;
  width: 26px;
  height: 26px;
  background-position: -1089px -565px;
  background-image: url(aolayuyue2018sp1.png?v=3);
  position: relative;
}

.editor-face:hover .imageBox {
  display: block;
}

.editor-face .imageBox {
  border: 1px solid #CCC;
  background: #efefef;
  width: 418px;
  height: 243px;
  right: -60px;
  top: -246px;
  padding-top: 3px;
  line-height: 18px;
  font-size: 14px;
  border-radius: 5px;
}

.w_imageBox_tab {
  height: 28px;
  border-bottom: 1px solid #CCC;
  padding-left: 7px;
}

.clearfix {
  display: block;
}

.w_imageBox_tab a.on {
  color: #333;
  border-color: #ccc;
  border-bottom: 1px solid #fff;
  background: #fff;
  border-radius: 5px 5px 0 0;
}

.imageBox_tab {
  height: 24px;
  padding: 3px 8px 0;
  margin: 0 1px;
  color: #666;
  border: 1px solid #EFEFEF;
  border-bottom: 1px solid #ccc;
  text-decoration: none;
  line-height: 23px;
  float: left;
  _display: inline;
}

.imageBox_tab:hover {
  text-decoration: none;
}

.listBox {
  width: 411px;
  overflow: hidden;
  margin: 0 auto;
}

.listBox table {
  width: 411px;
}

.listBox td {
  cursor: pointer;
  padding: 0;
  border: 1px solid #CCC;
  text-align: center;
  vertical-align: middle;
  height: 40px;
}

.listBox table img {
  width: 35px;
  height: 35px;
  vertical-align: middle;
}

.editor-submit {
  vertical-align: middle;
  display: inline-block;
  font-size: 18px;
  color: #fff;
  background-color: #39F;
  text-align: center;
  line-height: 36px;
  height: 36px;
  width: 60px;
  font-family: "Microsoft Yahei";
  cursor: pointer;
}