* {
  margin: 0;
  padding: 0;
}
img {
  border: none;
}
a {
  text-decoration: none;
  outline: none;
  color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
ul,
li {
  list-style: none;
}
html,
body {
  min-height: 100%;
  height: 100%;
  font-family: 'SourceHanSansCN', 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}
body {
  font-size: 100%;
  min-width: 1240px;
  margin: 0 auto;
}
.hidden {
  visibility: hidden;
}
body.fixed {
  position: fixed;
  left: 0;
  width: 100%;
}
img {
  max-width: 100%;
}
img.f-responsive {
  width: 100%;
}
.btn,
.u-btn {
  cursor: pointer;
}
@-webkit-keyframes arrow {
  0%,
  30% {
    opacity: 0;
    -webkit-transform: translate(0, -8px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
  }
}
@keyframes arrow {
  0%,
  30% {
    opacity: 0;
    -webkit-transform: translate(0, -8px);
    transform: translate(0, -8px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
}
/*---------------------网站首页公共样式-----------------------*/
.site-index-page .f-right {
  float: right;
}
.site-index-page .f-left {
  float: left;
}
.site-index-page .site-index-page .hidden {
  visibility: hidden;
  opacity: 0;
}
.site-index-page .m-sec-hd {
  text-align: center;
  font-weight: 200;
}
.site-index-page .m-sec-hd h3 {
  position: relative;
  font-size: 48px;
  line-height: 1.41304348;
  font-weight: 200;
}
.site-index-page .m-sec-hd h6 {
  font-weight: normal;
  font-size: 19px;
  line-height: 1.77777778;
}
.site-index-page .m-sec-hd.s-gray h3 {
  color: #181818;
  font-weight: 500;
  font-size: 42px;
}
.site-index-page .m-sec-hd.s-gray h6 {
  color: #aaaaad;
}
.site-index-page .m-sec-hd.s-white h3,
.site-index-page .m-sec-hd.s-white h6 {
  color: #fff;
}
.site-index-page .m-sec-hd .u-hd-bg {
  display: inline-block;
  margin-top: 1%;
  width: 42px;
  height: 4px;
  background: #ff0710;
}
@media screen and (max-width: 1560px) {
  .site-index-page .m-sec-hd .u-hd-bg {
    width: 34px;
    height: 6px;
  }
}
.site-index-page .m-btn-box {
  margin-top: 5.263%;
  text-align: center;
  font-size: 16px;
}
.site-index-page .m-btn-box i {
  font-style: normal;
  display: inline-block;
  vertical-align: top;
  margin-right: 7px;
}
.site-index-page .m-btn-box i.link-arrow {
  margin-top: 1px;
  margin-right: 0;
}
.site-index-page .m-btn-box .u-btn {
  text-decoration: none;
  color: #3d3d45;
  font-weight: 200;
}
.site-index-page .m-btn-box .u-btn.s-blue {
  color: #005cc2;
}
@media screen and (max-width: 1440px) {
  .site-index-page .m-btn-box {
    font-size: 16px;
  }
  .site-index-page .m-btn-box i {
    margin-right: 2px;
  }
}
.site-index-page .g-sec {
  margin-top: 3.125%;
  padding-top: 4.16%;
  clear: both;
}
.site-index-page .g-sec .sec-ctn-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
/*---------------------页面公共样式结束-----------------------*/
/*---------------------网站首页的视频大背景-----------------------*/
.video-banner {
  position: relative;
  height: 791px;
  width: 100%;
  color: #fff;
  overflow: hidden;
  margin-top: 80px;
  background: url(/images/about-poster-new.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (max-width: 1440px) {
  .video-banner {
    background-image: url(/images/about-poster-new.png);
  }
}
@media screen and (max-width: 1024px) {
  .video-banner {
    background-image: url(/images/about-poster-new.png) !important;
  }
}
.no-video-banner .video-banner {
  background-image: url(/images/about-poster-new.png) !important;
}
.video-banner video {
  position: absolute;
  z-index: -100;
  min-width: 100%;
  min-height: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 1024px) {
  .video-banner video {
    display: none !important;
  }
}
.video-banner .m-slogan {
  position: absolute;
  top: 300px;
  left: 0;
  width: 100%;
  text-align: center;
}
.video-banner .m-slogan p {
  font-size: 16px;
}
.video-banner .m-slogan h2 {
  font-size: 46px;
}
.video-banner .m-slogan h3 {
  font-size: 26px;
  font-weight: 300;
}
.video-banner .m-slogan .company-name {
  font-weight: bold;
  font-size: 79px;
}
.video-banner .m-slogan .company-name.last {
  margin-top: 0;
}
.video-banner .m-slogan .slogan-line {
  margin: 30px auto;
  width: 1020px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.9);
}
.video-banner .m-slogan .theone {
  display: inline-block;
  margin: 38px 0 20px;
  width: 340px;
}
.video-banner .m-slogan .future-edu {
  position: relative;
  width: 660px;
  margin-left: auto;
  margin-right: auto;
  font-size: 72px;
}
/*---------------------网站首页的视频大背景结束-----------------------*/
/*-------------------------------产品特色---------------------------*/
.product-feature {
  overflow: visible !important;
  margin-top: 0 !important;
  background-color: #fafafc;
  padding-bottom: 6.18%;
}
.product-feature h3,
.product-feature h5,
.product-feature h6 {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.product-feature .m-sec-hd {
  color: #181818;
}
.product-feature .m-sec-hd h3 {
  font-size: 42px;
  font-weight: 500;
}
.product-feature .m-sec-hd h6 {
  font-size: 36px;
  font-weight: 500;
}
.product-feature .products {
  margin-top: 4.16%;
}
.product-feature .products .ctn-list {
  position: relative;
  z-index: 2000;
  text-align: center;
}
.product-feature .products .sp,
.product-feature .products .ap,
.product-feature .products .xp {
  cursor: pointer;
}
.product-feature .products .pro-title {
  padding-left: 19px;
  margin-bottom: 15px;
}
.product-feature .products .pro-title img {
  display: inline;
  width: 28px;
  height: 28px;
  vertical-align: middle;
}
.product-feature .products .pro-title span {
  vertical-align: middle;
}
.product-feature li {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width: 31.5%;
  text-align: left;
  background-color: #fff;
  padding-bottom: 90px;
}
.product-feature li .app-img {
  margin-bottom: 33px;
  border-bottom: 4px solid #ee3435;
}
.product-feature li:nth-child(1) {
  float: left;
}
.product-feature li:nth-child(3) {
  float: right;
}
.product-feature li .features p {
  margin-left: 21px;
  padding-left: 30px;
  font-size: 20px;
  letter-spacing: 0px;
  color: #454545;
  background-image: url(/images/20201119/point.png);
  background-repeat: no-repeat;
  background-position: 2px 4px;
  background-size: 19px 19px;
  margin-bottom: 5px;
  white-space: nowrap;
}
.product-feature li .product-title {
  font-size: 25px;
  font-weight: bold;
  color: #000;
  margin-bottom: 12px;
}
.product-feature li span.alink {
  position: absolute;
  bottom: 25px;
  right: 25px;
}
.product-feature li span.alink i {
  font-style: normal;
  color: #3d3d45;
  font-size: 16px;
  font-weight: 200;
}
.product-feature .feature-ctn .thumb {
  width: 100%;
}
.product-feature .m-feature-desc {
  padding-bottom: 10%;
  margin-top: -2px;
  background: #fff;
}
.product-feature .m-feature-desc .desc {
  text-align: left;
  padding-left: 7.5%;
}
.product-feature .u-shadow-pic {
  position: absolute;
  width: 100% !important;
  max-width: none;
  left: -4%;
  bottom: -13%;
  z-index: 1;
  width: 113%;
  margin: 0 auto;
  z-index: -1;
}
@media screen and (max-width: 1560px) {
  .product-feature .u-shadow-pic {
    bottom: -17%;
    width: 112% !important;
  }
}
/*---------------------产品特色结束-----------------------*/
/*---------------------郎朗推荐：学音乐从 The One 开始-----------------------*/
.recommend {
  margin-top: 0 !important;
  padding-top: 6% !important;
  padding-bottom: 6% !important;
}
.recommend .sec-ctn-wrap {
  overflow: hidden;
  max-width: 1200px !important;
}
.recommend .sec-ctn-wrap .m-sec-hd {
  margin-top: 113px;
  color: #181818;
  text-align: left;
}
.recommend .sec-ctn-wrap .m-sec-hd h3 {
  font-weight: 500;
  display: inline-block;
  margin-left: 96px;
}
.recommend .sec-ctn-wrap .m-sec-hd h5 {
  display: inline-block;
  margin-top: 10px;
  font-size: 30px;
  margin-left: 96px;
}
.recommend .sec-ctn-wrap .m-sec-hd .recommend-right-line {
  margin: 32px 0 0 96px;
  width: 86px;
  height: 3px;
  background-color: #ee3435;
}
.recommend .sec-ctn-wrap .recommend-left,
.recommend .sec-ctn-wrap .recommend-right {
  width: 50%;
  position: relative;
  float: left;
}
.recommend .sec-ctn-wrap .recommend-left .play,
.recommend .sec-ctn-wrap .recommend-right .play {
  width: 10%;
  position: absolute;
  left: 45%;
  top: 45%;
}
.recommend .sec-ctn-wrap .recommend-left img,
.recommend .sec-ctn-wrap .recommend-right img {
  width: 100%;
}
.from-theone {
  margin-top: 0 !important;
  padding: 64px 0 128px 0 !important;
  color: #333;
}
@media screen and (max-width: 1440px) {
  .from-theone .sec-ctn-wrap {
    min-width: 1000px;
  }
  .from-theone .triangle {
    top: 95px !important;
  }
}
.from-theone .m-sec-hd {
  margin-bottom: 6.63%;
}
.from-theone .ctn-list {
  position: relative;
  z-index: 2000;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 0;
  overflow: hidden;
}
.from-theone li {
  display: inline-block;
  vertical-align: top;
  width: 378px;
  float: left;
  font-size: 14px;
  text-align: left;
}
.from-theone li img {
  margin-bottom: 33px;
}
.from-theone li p {
  color: #575757;
  margin-left: 11px;
}
.from-theone li p:nth-child(3) {
  font-weight: 300;
}
.from-theone li p span {
  font-size: 18px;
  color: #000;
  margin-right: 12px;
}
.from-theone li:nth-child(1) {
  float: left;
  margin-right: 34px;
}
.from-theone li:nth-child(1) img {
  width: 378px;
  height: 202px;
}
.from-theone li:nth-child(3) {
  float: right;
}
@media screen and (max-width: 1560px) {
  .from-theone li {
    font-size: 14px;
  }
}
.from-theone li.langlang {
  border-left: 1px solid #f4f4f4;
}
.from-theone .m-expert-intro {
  position: relative;
  height: 106px;
  padding-left: 5.67%;
  margin-bottom: 12.1%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro {
    height: 96px;
    padding-left: 5.07%;
  }
}
.from-theone .m-expert-intro .txt {
  display: inline-block;
  vertical-align: middle;
}
.from-theone .m-expert-intro:after {
  display: inline-block;
  vertical-align: middle;
  content: '.';
  visibility: hidden;
  height: 100%;
}
.from-theone .m-expert-intro .u-expert-title {
  margin-bottom: 5.6%;
  font-size: 14px;
  line-height: 1.42857143;
  display: block;
  color: #f06e00;
}
.from-theone .m-expert-intro .u-expert-name {
  font-size: 18px;
  font-weight: 300;
  color: #333;
  font-weight: bold;
}
.from-theone .m-expert-intro.s-blue {
  background: #e5f5fd;
}
.from-theone .m-expert-intro.s-blue .u-expert-title {
  color: #3663bf;
}
.from-theone .m-expert-intro.s-pink {
  background-color: #f4eaeb;
}
.from-theone .m-expert-intro.s-grey {
  background-color: #eeeeee;
}
.from-theone .m-expert-intro.s-pink .u-expert-title {
  color: #f29f72;
}
.from-theone .m-expert-intro.s-grey .u-expert-title {
  color: #818181;
}
.from-theone .m-expert-intro .u-avatar {
  position: absolute;
  bottom: -33%;
  right: -4%;
  width: 55%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro .u-avatar {
    width: 55%;
    bottom: -34%;
    right: 0%;
  }
}
.from-theone .m-expert-intro .u-avatar.stevie {
  right: -8%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro .u-avatar.stevie {
    right: -11%;
  }
}
.from-theone .m-expert-intro .u-avatar.stephen {
  bottom: -32%;
  right: -11%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro .u-avatar.stephen {
    width: 70%;
    right: -11%;
    bottom: -29%;
  }
}
.from-theone .m-expert-intro .u-avatar.xu-fei {
  right: 10%;
  bottom: 0;
  width: 21.5%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro .u-avatar.xu-fei {
    right: 10%;
  }
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro .u-avatar.ed {
    width: 72%;
    bottom: -30%;
  }
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-intro .u-avatar.song-ke {
    width: 74%;
    bottom: -31%;
  }
}
.from-theone .m-expert-word {
  padding-left: 5.67%;
  padding-right: 4.67%;
  font-size: 14px;
  line-height: 1.71;
}
.from-theone .h {
  height: 165px !important;
  margin-bottom: 0 !important;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-word {
    padding-left: 5.07%;
  }
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-word.xu-fei {
    margin-bottom: 14.8%;
  }
}
@media screen and (max-width: 1368px) {
  .from-theone .m-expert-word.xu-fei {
    width: 212px;
    margin-bottom: 13.8%;
  }
}
.from-theone .m-expert-word.stevie {
  margin-bottom: 6.8%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-word.stevie {
    margin-bottom: 14.8%;
  }
}
@media screen and (max-width: 1366px) {
  .from-theone .m-expert-word.stevie {
    margin-bottom: 4.8%;
  }
}
.from-theone .m-expert-word.stephen {
  margin-bottom: 9.4%;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-word.stephen {
    margin-bottom: 19%;
  }
}
.from-theone .m-expert-word.ed {
  margin-bottom: 9.5%;
}
.from-theone .m-expert-word.song-ke {
  margin-bottom: 9.4%;
}
.from-theone .m-expert-word p {
  margin-bottom: 6%;
}
.from-theone .m-expert-word p.hide {
  visibility: hidden;
  opacity: 0;
}
.from-theone .m-expert-word p br {
  display: none;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-word.langlang p {
    display: inline;
  }
}
.from-theone .m-expert-video {
  padding-left: 5.67%;
  background: #fafafa url(/images/small_shadow_bg.jpg) center bottom / 100% auto no-repeat;
}
@media screen and (max-width: 1440px) {
  .from-theone .m-expert-video {
    padding-left: 5.07%;
  }
}
.from-theone .m-expert-video span {
  display: inline-block;
  vertical-align: middle;
  padding-right: 11.35%;
  font-size: 18px;
  line-height: 1.27777778;
  font-weight: 200;
  letter-spacing: 2px;
}
.from-theone .m-expert-video img {
  display: inline-block;
  vertical-align: middle;
  width: 65.3%;
  border-radius: 10px;
}
.from-theone .u-bottom-shadow {
  position: absolute;
  bottom: 0;
  bottom: -33%;
  width: 109%;
  max-width: none;
  left: -5%;
  z-index: -1;
}
@media screen and (max-width: 1440px) {
  .from-theone .u-bottom-shadow {
    width: 106%;
    bottom: -30%;
    left: -1%;
  }
}
.u-list-bg {
  height: 8px;
  width: 42px;
  margin: 8.9% auto 5.31% auto;
  background: #aaaaad;
}
@media screen and (max-width: 1560px) {
  .u-list-bg {
    height: 6px;
    width: 34px;
  }
}
.u-triangle-down {
  position: absolute;
  bottom: -16px;
  left: 6%;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 24px solid #f4eaeb;
  z-index: 1;
}
.u-triangle-down.s-blue {
  border-top: 24px solid #e5f5fd;
}
/*---------------------钢琴教室展示-----------------------*/
.piano-room {
  margin-top: 1px !important;
  padding-top: 0 !important;
  background: #fff;
  background: url(/images/3_class_img_1920_440.jpg?v=1) top left / 100% auto no-repeat;
}
.piano-room h3,
.piano-room h6 {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 1440px) {
  .piano-room {
    background-image: url(/images/3_class_img_1920_440.jpg);
  }
}
.piano-room .banner {
  width: 100%;
  max-height: 440px;
  min-height: 330px;
  height: 22.9%;
}
.piano-room .sec-ctn-wrap {
  padding-top: 12.88%;
  max-width: 870px;
  min-width: none !important;
  text-align: center;
  font-size: 0;
}
@media screen and (max-width: 1680px) {
  .piano-room .sec-ctn-wrap {
    padding-top: 11.8%;
  }
}
@media screen and (max-width: 1440px) {
  .piano-room .sec-ctn-wrap {
    padding-top: 12.5%;
    width: 71.8% !important;
    max-width: none;
  }
}
@media screen and (max-width: 1370px) {
  .piano-room .sec-ctn-wrap {
    padding-top: 12%;
    width: 71.8% !important;
    max-width: none;
  }
}
.piano-room .sec-ctn-wrap li {
  margin-top: 9.19%;
  font-size: 16px;
  display: inline-block;
  width: 33.32%;
}
.piano-room .sec-ctn-wrap span {
  display: block;
  font-size: 20px;
  line-height: 1.5;
  color: #3d3d45;
  font-weight: 200;
}
@media screen and (max-width: 1440px) {
  .piano-room .sec-ctn-wrap span {
    font-size: 15px;
  }
}
.piano-room .sec-ctn-wrap .u-feature-icon {
  width: 118px;
  margin-bottom: 15px;
  border-radius: 50%;
}
@media screen and (max-width: 1440px) {
  .piano-room .sec-ctn-wrap .u-feature-icon {
    width: 88.5px;
  }
}
.piano-room .m-btn-box .u-btn {
  color: #939398;
}
/*------------------钢琴教室产品的统计数据-----------------------*/
.map-banner {
  position: relative;
  min-height: 204px;
  max-height: 306px;
  height: 15.94%;
  text-align: center;
  overflow: hidden;
  background: url(/images/3_map_img_1920_306.png) center / cover no-repeat;
}
.map-banner .sec-ctn-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 960px;
}
@media screen and (max-width: 1440px) {
  .map-banner .sec-ctn-wrap {
    width: 842px !important;
  }
}
.map-banner .sec-ctn-wrap li {
  display: inline-block;
  vertical-align: middle;
}
.map-banner .sec-ctn-wrap li.pianoroom-area-coverage {
  margin: 0 8.83%;
}
.map-banner .u-icon {
  display: inline-block;
  vertical-align: middle;
  max-width: 70px;
}
@media screen and (max-width: 1440px) {
  .map-banner .u-icon {
    max-width: 68px;
  }
}
.map-banner .u-icon.icon1 {
  margin-right: 2px;
}
.map-banner .m-desc {
  display: inline-block;
  vertical-align: middle;
  margin-top: -4px;
  text-align: left;
}
.map-banner .m-desc .u-count {
  display: inline-block;
  vertical-align: middle;
  margin-top: -10px;
  margin-bottom: .2%;
  font-size: 36px;
  color: #c8910c;
  word-spacing: -4px;
  font-weight: 200;
}
.map-banner .m-desc .u-explain-txt {
  font-size: 14px;
  line-height: 1.07142857;
  font-weight: 200;
}
.buybuybuy {
  position: relative;
  margin-top: 0 !important;
  padding: 0 !important;
  max-height: 238px;
  height: 12.4%;
  min-height: 228px;
  background: url(/images/5_banner_238_2019.png) center / 100% auto no-repeat;
}
@media screen and (max-width: 1440px) {
  .buybuybuy {
    min-height: 158px;
  }
}
.buybuybuy a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.piano-products {
  background: #fafafa;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.piano-products ul {
  overflow: hidden;
}
.piano-products li:first-child {
  height: 591px;
  position: relative;
}
.piano-products li:first-child a {
  padding-bottom: 0;
}
.piano-products li:first-child .desc {
  margin: 65px 0 0 35px;
  text-align: left;
}
.piano-products li:first-child .price {
  margin-top: 220px;
  text-align: left;
  margin-left: 35px;
}
.piano-products li:first-child .u-more-btn {
  margin-left: 35px;
}
.piano-products li:first-child .image-box-top {
  width: 395px;
  height: 290px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
.piano-products li:first-child .image-box-top img {
  width: 100%;
  height: 100%;
}
.piano-products li:first-child .tag {
  position: absolute;
  right: 25px;
  top: 25px;
  width: 90px;
  height: 30px;
  background-color: #ce0d2c;
  border-radius: 14px;
  font-size: 17px;
  line-height: 30px;
  letter-spacing: 0px;
  color: #ffffff;
}
.piano-products li {
  float: left;
  width: 25%;
  text-align: center;
  padding-right: 10px;
  box-sizing: border-box;
}
.piano-products li .image-box {
  padding: 25px;
  background: #f0f0f0;
  height: 220px;
  position: relative;
}
.piano-products li .name {
  font-size: 23px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 0px;
  color: #3a3e42;
}
.piano-products li .type {
  font-size: 29px;
  font-weight: 300;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 0px;
  color: #3a3e42;
}
.piano-products li:hover .image-box,
.piano-products li:hover a {
  background: #fff;
}
.piano-products li > a {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  display: block;
  background-color: #fff;
  margin-bottom: 10px;
  padding-bottom: 78px;
}
.piano-products li .u-more-btn {
  width: 100px;
  height: 33px;
  margin: 0 auto;
  background: url(/images/5_button.png) top center / 100% auto no-repeat;
}
.piano-products li .u-more-btn:hover {
  background-position: bottom center;
}
.piano-products li .piano-top img {
  width: 276px;
}
.piano-products li .piano-light {
  padding-bottom: 74px;
}
.piano-products li .piano-light img {
  width: 275px;
  margin-top: -11px;
}
.piano-products li .piano-light .desc {
  margin-top: 79px;
}
.piano-products li .piano-light .more {
  margin-top: 2px;
}
.piano-products li .piano-kaoqi img {
  width: 276px;
}
.piano-products li .piano-kaoqi .more {
  margin-top: 2px;
}
.piano-products li .piano-classical img {
  width: 280px;
}
.piano-products li .desc {
  margin-top: 18px;
}
.piano-products li .desc p {
  font-size: 17px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 0px;
  color: #9e9e9f;
}
.piano-products li .price {
  color: #737271;
  font-size: 12px;
  font-weight: 200;
}
.piano-products li .price i {
  font-size: 23px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 48px;
  letter-spacing: 0px;
  color: #3a3e42;
  font-style: normal;
}
/*---------------------名人说样式-----------------------*/
.celibrities-choosed-theone {
  padding-top: 5.83% !important;
  padding-bottom: 6.93%;
  margin-top: 0 !important;
  background-color: #fafafc;
}
.celibrities-choosed-theone h3,
.celibrities-choosed-theone h6 {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.celibrities-choosed-theone h6 {
  font-size: 18px !important;
  color: #575757 !important;
  font-weight: normal !important;
}
.celibrities-choosed-theone .sec-ctn-wrap {
  width: 720px !important;
  max-width: none;
}
.celibrities-choosed-theone .celibrities-word {
  position: relative;
  margin-top: 6.45%;
  color: #fff;
  font-size: 14px;
  line-height: 1.42857143;
}
.celibrities-choosed-theone .celibrities-word img {
  width: 708px;
}
.celibrities-choosed-theone .celibrities-word .txt-box {
  position: absolute;
  padding: .5%;
  font-weight: 100;
}
.celibrities-choosed-theone .celibrities-word .txt-box.box1 {
  top: 15px;
  left: 194px;
  width: 146px;
}
.celibrities-choosed-theone .celibrities-word .txt-box.box2 {
  top: 166px;
  left: 9px;
  width: 148px;
  max-width: none;
}
.celibrities-choosed-theone .celibrities-word .txt-box.box3 {
  width: 142px;
  top: 308px;
  right: 22px;
}
.celibrities-choosed-theone .celibrities-word .txt-box.box4 {
  max-width: 142px;
  bottom: 47px;
  right: 202px;
}
/*---------------------名人说样式结束-----------------------*/
/*---------------------用户反馈样式开始-----------------------*/
.users-review {
  background: url(/images/users_review.jpg) top left / 100% auto no-repeat;
  margin-top: 1% !important;
  padding-top: 0 !important;
  position: relative;
}
.users-review .swiper-button-prev {
  position: absolute;
  left: 25%;
  top: 40%;
  background-image: url(/images/left_arrow.png);
  background-size: 100% 100% !important;
  width: 40px !important;
  height: 40px !important;
}
.users-review .swiper-button-next {
  position: absolute;
  left: 25%;
  top: 60%;
  background-image: url(/images/right_arrow.png);
  background-size: 100% 100% !important;
  width: 40px !important;
  height: 40px !important;
}
.swiper-container {
  width: 600px;
  height: 20em;
}
.swiper-container .swiper-scrollbar {
  background: #fff;
  width: 140px !important;
  height: 2px !important;
  left: 40% !important;
  bottom: 15% !important;
}
.swiper-container .swiper-scrollbar-drag {
  background: red;
}
.swiper-container .swiper-slide {
  color: #fff;
}
.swiper-container .swiper-slide img {
  margin-top: 50px;
  opacity: 0.7;
}
.swiper-container .swiper-slide p {
  padding-left: 70px;
  font-size: 14px;
}
.swiper-container .swiper-slide .title {
  position: absolute;
  top: 81px;
  left: 60px;
  font-size: 16px;
}
.swiper-container .swiper-slide .parent-name {
  position: absolute;
  top: 80px;
  left: -65px;
  font-size: 16px;
  z-index: 2;
}
.swiper-container .swiper-slide .words {
  margin-top: 10px;
}
/*---------------------用户反馈样式结束-----------------------*/
.our-users-video {
  margin: 0 !important;
  padding: 0 !important;
  background: #fafafa;
  overflow: hidden;
}
.our-users-video h3,
.our-users-video h6 {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.our-users-video .sec-ctn-wrap {
  padding: 4.166% 0 !important;
}
.our-users-video .representive-users {
  position: relative;
  margin-top: 4.61%;
  font-size: 0;
  text-align: center;
  padding-top: 47.8723%;
}
.our-users-video .representive-users .big-box {
  position: absolute;
  width: 100%;
  background: #333;
}
.our-users-video .representive-users .big-box.top {
  top: 0;
  padding-top: 31.96%;
}
.our-users-video .representive-users .big-box.bottom {
  bottom: 0;
  padding-top: 15.98%;
}
.our-users-video .medium-box {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}
.our-users-video .medium-box.left {
  left: 0;
}
.our-users-video .medium-box.left .user-box-wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
}
.our-users-video .medium-box.right {
  right: 0;
  background: url(/imgs/index_site/girl.jpg) center / cover no-repeat;
}
.our-users-video .medium-box.right h5 {
  position: relative;
  top: 35%;
  color: #fafafa;
  font-size: 21px;
}
.our-users-video .m-account-box {
  width: 100%;
  height: 50%;
  background: url(/imgs/index_site/user-bg.jpg) center / cover no-repeat;
  text-align: center;
  color: #fff;
}
.our-users-video .m-account-box .red-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: red;
}
.our-users-video .m-account-box .user-desc {
  text-align: center;
  color: #333;
}
.our-users-video .m-account-box .user-desc p {
  font-size: 24px !important;
}
.our-users-video .m-account-box:after {
  vertical-align: middle;
  display: inline-block;
  height: 100%;
  width: 0;
  content: ".";
  opacity: 0;
  visibility: hidden;
}
.our-users-video .m-account-box > div {
  display: inline-block;
  vertical-align: middle;
}
.our-users-video .m-account-box h4 {
  font-size: 38px;
}
.our-users-video .m-account-box span {
  font-size: 20px;
}
.our-users-video .m-account-box p,
.our-users-video .m-account-box a {
  font-size: 13px;
  line-height: 1.69230769;
  text-align: left;
}
.our-users-video .m-account-box .line {
  margin: 0 20px;
  height: 58px;
  width: 2px;
  background: #fff;
}
.our-users-video .m-account-box .u-more-btn {
  float: left;
  margin-top: 1.55%;
  padding: 2.22% 5.55%;
  line-height: 1;
  text-align: center;
  color: #6f29eb;
  text-decoration: none;
  background: #fff;
}
.our-users-video .u-thumb-box {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}
.our-users-video .u-thumb-box.user1 {
  left: 0;
  background-image: url(/imgs/index_site/user1.jpg);
}
.our-users-video .u-thumb-box.user1:hover {
  background-image: url(/imgs/index_site/user1.hover.jpg);
}
.our-users-video .u-thumb-box.user2 {
  left: 50%;
  background-image: url(/imgs/index_site/user2.jpg?v=2);
}
.our-users-video .u-thumb-box.user2:hover {
  background-image: url(/imgs/index_site/user2.hover.jpg?v=3);
}
.our-users-video .u-thumb-box.user3 {
  left: 0;
  background-image: url(/imgs/index_site/user3.jpg);
}
.our-users-video .u-thumb-box.user3:hover {
  background-image: url(/imgs/index_site/user3.hover.jpg);
}
.our-users-video .u-thumb-box.user4 {
  left: 25%;
  background-image: url(/imgs/index_site/user4.jpg);
}
.our-users-video .u-thumb-box.user4:hover {
  background-image: url(/imgs/index_site/user4.hover.jpg);
}
.our-users-video .u-thumb-box.user5 {
  left: 50%;
  background-image: url(/imgs/index_site/user5.jpg);
}
.our-users-video .u-thumb-box.user5:hover {
  background-image: url(/imgs/index_site/user5.hover.jpg);
}
.our-users-video .u-thumb-box.user6 {
  left: 75%;
  background-image: url(/imgs/index_site/user6.jpg?v=2);
}
.our-users-video .u-thumb-box.user6:hover {
  background-image: url(/imgs/index_site/user6_hover_new.png);
}
/*--------------------媒体报道-----------------------*/
.media-focus {
  margin: 0 !important;
  padding-bottom: 4.1666% !important;
  background-color: #fafafa;
}
.media-focus i {
  font-style: normal;
  color: #3d3d45;
  font-size: 16px;
  font-weight: 200;
}
.media-focus .sec-ctn-wrap {
  position: relative;
  padding-top: 2%;
  max-width: 1204px !important;
  color: #333;
  overflow: hidden;
  min-width: 876px;
}
.media-focus .sec-ctn-wrap li {
  position: relative;
  float: left;
  width: 18.6%;
  box-sizing: border-box;
  margin-right: 1.75%;
  background-color: #fff;
}
.media-focus .sec-ctn-wrap li:nth-last-child(1) {
  margin: 0;
}
.media-focus .sec-ctn-wrap .img-box {
  width: 100%;
  margin-bottom: 7.1%;
}
.media-focus .sec-ctn-wrap .news-logo {
  margin-left: 8%;
}
.media-focus .sec-ctn-wrap .news-text {
  font-size: 18px;
  padding-left: 8%;
  font-weight: 300;
  margin-bottom: 30%;
  color: #474747 !important;
}
.media-focus .sec-ctn-wrap .u-title-bg {
  width: 26px;
  height: 5px;
  margin: 4.7% 0 4.7% 8%;
  background: #e5030c;
}
.media-focus .sec-ctn-wrap a {
  position: absolute;
  right: 4.5%;
  bottom: 6.1%;
}
.media-focus .m-sec-hd {
  position: relative;
  max-height: 156px;
  height: 8.125%;
  min-height: 106px;
  color: #fff;
}
.media-focus .m-sec-hd h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
}
.media-focus .report-wrap {
  position: relative;
  overflow: hidden;
  margin-top: 4.1%;
  padding: 0px 30px;
}
.media-focus .report-ctns {
  width: 42.5%;
}
.media-focus .report-ctns li {
  position: relative;
  background: #fafafa;
  margin-bottom: 1px;
  margin-bottom: 14.156%;
}
.media-focus .report-ctns .u-more-btn {
  position: absolute;
  right: 9.4%;
  bottom: 9.4%;
  font-size: 14px;
  color: #333 !important;
  text-decoration: none;
}
.media-focus .report-ctns .u-more-btn i {
  margin-right: 7px;
}
.media-focus .report-ctns .u-triangle-right {
  display: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: -4.53%;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid #fafafa;
  z-index: -1;
}
@media screen and (max-width: 1440px) {
  .media-focus .report-ctns .u-triangle-right {
    right: -3.53%;
  }
}
.media-focus .report-ctns .u-triangle-left {
  display: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -4.53%;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #fafafa;
  z-index: -1;
}
@media screen and (max-width: 1440px) {
  .media-focus .report-ctns .u-triangle-left {
    left: -3.53%;
  }
}
.media-focus .report-ctns.f-right {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.media-focus .u-report-pic {
  display: inline-block;
  vertical-align: top;
  width: 51.6%;
  margin-right: -3px;
}
.media-focus .m-report-ctn {
  display: inline-block;
  vertical-align: top;
  width: 47.6%;
  color: #333;
  background: #fafafa;
}
.media-focus .m-report-ctn .inner {
  padding-top: 17.3%;
  padding-left: 6.13%;
}
@media screen and (max-width: 1360px) {
  .media-focus .m-report-ctn .inner {
    padding-top: 12.3%;
  }
}
.media-focus .m-report-ctn.cctv .inner {
  padding-top: 14.6%;
}
.media-focus .m-report-ctn.usa-today .inner {
  padding-top: 12.7%;
}
.media-focus .m-report-ctn .u-media-logo {
  width: auto;
  margin-bottom: 6.13%;
}
.media-focus .m-report-ctn .u-hd-bg {
  background: #ff0710;
  height: 4px;
  width: 15.1%;
}
.media-focus .m-report-ctn .u-txt {
  margin-top: 9.3%;
  font-size: 18px;
  line-height: 1.66666667;
  font-weight: 200;
  max-width: 162px;
}
@media screen and (max-width: 1440px) {
  .media-focus .m-report-ctn .u-txt {
    font-size: 16px;
    max-width: 142px;
  }
}
.media-focus .m-report-ctn.newyork-time .u-media-logo {
  width: 87.7%;
}
.media-focus .m-report-ctn.cctv .u-media-logo {
  width: 47.1%;
}
.media-focus .m-report-ctn.cctv .u-txt {
  max-width: 152px;
}
.media-focus .m-report-ctn.usa-today .u-media-logo {
  width: 69.8%;
}
.media-focus .m-report-ctn.usa-today .u-txt {
  max-width: 162px;
}
.media-focus .m-report-ctn.usa-today .u-more-btn {
  right: auto !important;
  bottom: 4.4% !important;
  left: 33% !important;
}
.media-focus .m-timeline {
  display: none;
  position: absolute;
  top: -4.8758%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 100%;
  width: 8.156%;
}
.media-focus .m-timeline .u-y-axis {
  position: absolute;
  top: 4%;
  height: 95%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 6.521%;
  background: #e4e4e4;
}
.media-focus .m-timeline .u-top-ring {
  position: absolute;
  width: 32.6%;
  height: 90px;
  background: url(/images/ring-small.jpg) top center / 99% auto no-repeat;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
}
.media-focus .m-ring {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  background: url(/images/ring-bg.jpg) top center / 98% auto no-repeat;
  width: 100%;
}
.media-focus .m-ring.report-time {
  padding-top: 23.6%;
  padding-bottom: 32.6%;
}
.media-focus .m-ring.report-time .u-year {
  display: block;
  font-size: 24px;
  line-height: 1.25;
}
.media-focus .m-ring.report-time .u-date {
  display: block;
  font-size: 14px;
}
@media screen and (max-width: 1440px) {
  .media-focus .m-ring.report-time .u-year {
    font-size: 21px;
  }
  .media-focus .m-ring.report-time .u-date {
    font-size: 13px;
  }
}
.media-focus .m-ring.date1 {
  top: 26.6%;
}
.media-focus .m-ring.date2 {
  top: 50.6%;
}
.media-focus .m-ring.date3 {
  top: 75.6%;
}
.media-focus .m-btn-box {
  position: relative;
  margin-top: -2%;
  z-index: 99!important;
}
.media-focus .u-bottom-shadow {
  position: absolute;
  width: 100%;
  left: 4%;
  bottom: -19%;
  margin: 0 auto;
  z-index: -1;
}
.media-focus .u-bottom-shadow.usa-today {
  left: -5%;
}
/*--------------------媒体报道结束-----------------------*/
/*--------------------荣誉奖项-----------------------*/
.our-honors {
  margin-top: 0 !important;
  padding-top: 4.1666% !important;
  padding-bottom: 6.4%;
  margin-bottom: -1%;
}
.our-honors h3 {
  position: relative;
  width: 660px;
  margin-left: auto;
  margin-right: auto;
}
.our-honors .sec-ctn-wrap {
  position: relative;
  max-width: 894px;
  text-align: center;
}
.our-honors .honor-list {
  margin: 0 auto;
  font-size: 0;
}
.our-honors .honor-list .m-list-item {
  display: inline-block;
  vertical-align: bottom;
  cursor: pointer;
}
.our-honors .honor-list.list1 {
  max-width: 1200px;
  margin-bottom: 1.922%;
  margin-top: 2.0%;
}
.our-honors .honor-list.list1 .m-list-item {
  width: 18.2%;
  height: 239px;
  margin-right: 1.66%;
  background-color: #fafafc;
}
.our-honors .honor-list.list1 span {
  line-height: 1.125;
}
.our-honors .honor-list.list2 {
  max-width: 1200px;
}
.our-honors .honor-list.list2 .m-list-item {
  width: 18.2%;
  height: 239px;
  margin-right: 1.66%;
  background-color: #fafafc;
}
.our-honors .honor-list.list2 span {
  font-size: 16px;
  line-height: 1.16666667;
}
.our-honors .u-rophy.ces {
  width: 170px;
}
.our-honors .u-rophy.namm {
  width: 190px;
}
.our-honors .u-rophy.nappa {
  width: 180px;
}
.our-honors .u-rophy.apple {
  width: 160px;
  margin-bottom: 20px;
}
.our-honors .m-honor-intro .u-honored-year {
  margin-top: 2.023%;
  margin-bottom: 1.19%;
  display: block;
  font-size: 22px;
  letter-spacing: .5px;
  font-weight: 200;
}
@media screen and (max-width: 1440px) {
  .our-honors .m-honor-intro .u-honored-year {
    font-size: 17px;
  }
}
.our-honors .m-honor-intro .u-honored-txt {
  font-size: 16px;
  line-height: 1.125;
  color: #575757;
}
@media screen and (max-width: 1440px) {
  .our-honors .m-honor-intro .u-honored-txt {
    font-size: 16px;
  }
}
.honor-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: left;
  background: #fafafa;
  display: none;
  padding-top: 100px;
}
.honor-modal .modal-ctn {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 937px;
  padding-bottom: 33px;
  background-color: #fff;
  box-shadow: 0 0 4px #eee;
}
.honor-modal .modal-ctn img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 33px;
  padding-bottom: 33px;
}
.honor-modal .modal-ctn img.close-btn {
  padding: 0;
}
.honor-modal .modal-ctn img.llfd {
  width: 62px;
}
.honor-modal .modal-ctn img.apple {
  width: 160px;
}
.honor-modal .modal-ctn img.inno {
  width: 160px;
}
.honor-modal .modal-ctn p {
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  text-indent: 36px;
  line-height: 1.83333333;
  color: #333;
  font-weight: 200;
}
.honor-modal .modal-ctn p .mdash {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 2px;
  background-color: #3d3d45;
}
@media screen and (max-width: 1440px) {
  .honor-modal .modal-ctn p {
    font-size: 16px;
  }
}
.honor-modal .modal-ctn p.ces,
.honor-modal .modal-ctn p.edison {
  width: 760px;
}
.honor-modal .modal-ctn p.namm {
  width: 802px;
}
.honor-modal .modal-ctn p.nappa {
  width: 812px;
}
.honor-modal .modal-ctn p.cctv {
  width: 736px;
}
.honor-modal .modal-ctn p.llfd {
  width: 746px;
}
.honor-modal .modal-ctn p.aiprize {
  width: 812px;
}
.honor-modal .modal-ctn p.zhongguancun {
  width: 812px;
}
.honor-modal .modal-ctn p.ifprize {
  width: 812px;
}
@media screen and max-width (1440px) {
  .honor-modal .modal-ctn p.llfd {
    width: 668px;
  }
}
.honor-modal .modal-ctn p.apple {
  width: 745px;
}
.honor-modal .modal-ctn p.inno {
  width: 774px;
}
@media screen and (max-width: 1440px) {
  .honor-modal .modal-ctn p.inno {
    width: 742px;
  }
}
.honor-modal .modal-ctn p.ecl {
  width: 822px;
}
@media screen and (max-width: 1440px) {
  .honor-modal .modal-ctn p.ecl {
    width: 774px;
  }
}
.honor-modal .modal-ctn .close-btn {
  position: absolute;
  right: -20px;
  top: -21px;
  width: 12px;
  width: 36px;
}
.honor-modal .modal-ctn .modal-trophy-pic.ces {
  display: block;
  max-width: 170px;
}
.theone-commonweal {
  margin-bottom: 6.08%;
  margin-top: 0 !important;
}
.theone-commonweal bgc h3,
.theone-commonweal h6 {
  text-align: center;
}
.theone-commonweal h6 {
  font-size: 19px !important;
  color: #575757 !important;
}
.theone-commonweal .sec-ctn-wrap ul {
  margin-top: 6.426%;
}
.theone-commonweal .sec-ctn-wrap li {
  position: relative;
  float: left;
  width: 48.6%;
  background-color: #fafafa;
}
.theone-commonweal .sec-ctn-wrap #hangzhou,
#xianshang {
  margin-right: 2.4%;
}
.theone-commonweal .sec-ctn-wrap .clear-fix {
  clear: both;
}
.theone-commonweal .banner-101 {
  position: relative;
  margin-top: 3.0%;
}
.theone-commonweal .banner-101 > img {
  display: block;
  width: 100%;
}
.theone-commonweal .banner-101 .desc-txt {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  padding-right: 1.17%;
  padding-top: 1.0%;
  padding-bottom: 1.0%;
  line-height: 1.66666667;
  color: #fff;
  text-align: right;
  background-color: rgba(0, 0, 0, 0.4);
}
.theone-commonweal .banner-101 .desc-txt p {
  font-size: 16px;
}
@media screen and (max-widthL: 1440px) {
  .theone-commonweal .banner-101 .desc-txt p {
    font-size: 14px;
  }
}
.theone-commonweal .banner-101 .m-btn-box {
  position: absolute;
  top: 73%;
  left: 50%;
  color: #fff;
  margin: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.theone-commonweal .banner-101 .m-btn-box a {
  color: #fff;
  font-size: 16px;
}
@media screen and (max-width: 1440px) {
  .theone-commonweal .banner-101 .m-btn-box a {
    font-size: 14px;
  }
}
.theone-commonweal .banner-101 .m-btn-box i.link-arrow {
  margin-top: 1px;
}
.theone-commonweal .figure-pic {
  width: 100%;
}
.theone-commonweal .m-figure-desc {
  padding-left: 38px;
  padding-right: 29px;
  padding-bottom: 26px;
  color: #333;
}
.theone-commonweal .m-figure-desc .desc-title {
  margin-top: 52px;
}
.theone-commonweal .m-figure-desc h3 {
  text-align: left !important;
}
.theone-commonweal .m-figure-desc .u-title-bg {
  display: inline-block;
  width: 32px;
  height: 7px;
  margin: 35px auto 36px auto;
  background: #e5030c;
}
.theone-commonweal .m-figure-desc h3 {
  font-size: 23px;
  line-height: 1.36363636;
}
.theone-commonweal .m-figure-desc p {
  line-height: 30px;
  font-size: 19px;
  font-weight: 300;
  text-align: justify;
}
.theone-commonweal .u-shadow-pic {
  position: absolute;
  bottom: 0;
  width: 100%;
  bottom: -15%;
  z-index: -1;
  left: -1%;
}
.theone-commonweal .m-btn-box {
  text-align: right;
}
/*--------------------荣誉奖项结束-----------------------*/
/*--------------------陪练3.0时代到来-----------------------*/
.upgrade {
  margin-top: 0 !important;
}
.upgrade .sec-ctn-wrap {
  max-width: 1200px !important;
}
.upgrade .sec-ctn-wrap .upgrade-img {
  max-width: 1200px;
  margin: 0 auto;
}
.upgrade .sec-ctn-wrap .upgrade-feature {
  padding-top: 1.5%;
  color: #333;
  overflow: hidden;
  border-top: 1px solid #333;
}
.upgrade .sec-ctn-wrap .upgrade-feature .feature-title {
  padding-top: 2%;
  text-align: center;
  font-size: 24px;
  background-color: #fafafa;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc {
  padding-top: 2%;
  position: relative;
  overflow: hidden;
  background-color: #fafafa;
  text-align: center;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc .upgrade-item {
  width: 49.5%;
  float: left;
  text-align: left;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc .upgrade-item img {
  margin-left: 66px;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc .upgrade-item .item-name {
  padding-left: 66px;
  font-size: 20px;
  text-align: left;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc .upgrade-item p {
  padding-left: 66px;
  text-align: left;
  margin-top: 20px;
  font-size: 16px;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc .upgrade-item .upgrade-border {
  height: 4px;
  width: 35px;
  display: inline-block;
  margin-left: 66px;
  background-color: #ff0710;
}
.upgrade .sec-ctn-wrap .upgrade-feature .upgrade-desc .more-detail {
  display: inline-block;
  width: 184px;
  height: 38px;
  display: relative;
  line-height: 38px;
  border: 1px solid #333;
  margin: 60px 0;
}
@media screen and (max-width: 1440px) {
  .upgrade-item img {
    width: 480px;
  }
  .upgrade-img {
    margin: 0 auto;
  }
  .upgrade-title {
    font-size: 22px;
  }
}
/*--------------------陪练3.0时代到来结束-----------------------*/
/*--------------------连接课上课下开始-----------------------*/
.connect {
  background-color: #fafafc;
  padding-bottom: 110px;
}
.connect .sec-ctn-wrap {
  position: relative;
  padding-top: 40px;
}
.connect .sec-ctn-wrap .connect-img {
  width: 555px;
  position: absolute;
}
.connect .sec-ctn-wrap .connect-img.classroom {
  left: 0;
  top: 65px;
  z-index: 3;
}
.connect .sec-ctn-wrap .connect-img.pianoroom {
  right: 71px;
  top: 480px;
  z-index: 3;
}
.connect .sec-ctn-wrap img {
  width: 1200px;
}
.connect .sec-ctn-wrap .all-good-points .point-item {
  width: 25%;
  float: left;
}
.connect .sec-ctn-wrap .all-good-points .point-item p {
  text-align: left;
  font-size: 16px;
  color: #6a6b6b;
  margin: 15px 0 130px 0;
}
.connect .sec-ctn-wrap .all-good-points .point-item:nth-child(2) p {
  padding-left: 8px;
}
.connect .sec-ctn-wrap .all-good-points .point-item:nth-child(3) p {
  padding-left: 13px;
}
.connect .connect-item {
  background-color: #fafafa;
  margin-bottom: 38px;
  overflow: hidden;
  position: relative;
}
.connect .connect-item:first-child {
  margin-top: 60px;
}
.connect .connect-item.classroom {
  height: 375px;
}
.connect .connect-item.pianoroom {
  height: 375px;
}
.connect .connect-item .connect-content {
  color: #333;
  position: absolute;
  top: 115px;
  padding-left: 20px;
  border-left: 4px solid #ff0710;
  cursor: pointer;
}
.connect .connect-item .connect-content h3 {
  font-size: 24px;
}
.connect .connect-item .connect-content h4 {
  font-size: 18px;
  margin-top: 46px;
}
.connect .connect-item .connect-content p {
  font-size: 16px;
  margin-top: 10px;
}
.connect .connect-item .connect-content.left {
  right: 157px;
}
.connect .connect-item .connect-content.right {
  left: 157px;
}
/*--------------------连接课上课下结束-----------------------*/
/*--------------------播放视频的弹窗-----------------------*/
.v-video-box {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  opacity: 1;
}
.v-video-box.closed {
  opacity: 0;
  display: none;
}
.v-video-box .lay {
  position: absolute;
  z-index: 8000;
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
}
.v-video-box .content {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 95%;
  max-height: 95%;
  height: auto;
  padding: 15px;
  margin: -250px 0 0 -450px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 10000;
}
.v-video-box .content .video {
  width: 900px;
}
.v-video-box .content .noad-box,
.v-video-box .content embed,
.v-video-box .content iframe,
.v-video-box .content video,
.v-video-box .content object {
  display: block;
  width: 860px;
  height: 523px;
}
.v-video-box .content .close-btn {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -18px;
  line-height: 30px;
  right: -18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 5px #000;
  font-size: 24px;
  color: #fff;
  background-color: #222;
  cursor: pointer;
  text-align: center;
}
.v-video-box .content .close-btn span {
  font-size: 24px;
  display: inline-block;
  vertical-align: top;
  line-height: 1;
}
.v-video-box .content .close-btn:after {
  display: inline-block;
  vertical-align: middle;
  content: '.';
  visibility: hidden;
  height: 100%;
  width: 0;
}
.v-video-box .content .close-btn img {
  display: inline-block;
  vertical-align: middle;
  max-width: 50%;
}
/*--------------------播放视频的弹窗结束-----------------------*/
/*--------------------页脚-----------------------------------*/
.footer-top {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: #dcdcdc;
}
.footer-top .m-promise {
  text-align: center;
  padding: 44px 0 36px;
}
.footer-top .m-promise img {
  display: inline-block;
  margin-right: 44px;
}
@media screen and (max-width: 1440px) {
  .footer-top .m-promise {
    padding: 40px 0 30px;
  }
}
.loop-sec {
  position: relative;
  background-color: #6b6b6b;
  overflow: hidden;
  color: #fff;
  margin-top: 0 !important;
  padding-top: 4% !important;
}
@media screen and (max-width: 1440px) {
  .loop-sec {
    background-color: #6b6b6b;
  }
}
.loop-sec .g-loop-inner {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 174px;
}
.loop-sec .m-promise {
  text-align: center;
  padding-bottom: 121px;
  margin-top: -42px;
}
@media screen and (max-width: 1440px) {
  .loop-sec .m-promise {
    padding-bottom: 62px;
  }
}
.loop-sec .m-promise img {
  display: inline-block;
  margin-right: 44px;
}
.loop-sec .ftnav {
  width: 1200px;
  margin: 0 auto;
  padding-bottom: 68px;
  overflow: hidden;
  font-size: 14px;
}
.loop-sec .ftnav .part2 p,
.loop-sec .ftnav .part1 p {
  font-size: 14px;
  color: #cbcbce;
}
.loop-sec .ftnav li {
  float: left;
  width: 33.3%;
}
.loop-sec .ftnav h4 {
  font-size: 18px;
  line-height: 1.74;
  padding-bottom: 30px;
}
.loop-sec .ftnav .shop-zone {
  text-align: left;
}
.loop-sec .ftnav .shop-zone .shop-title {
  font-size: 18px !important;
  margin-bottom: 37px;
}
.loop-sec .ftnav .shop-zone .shop-btn {
  cursor: pointer;
  width: 184px;
  height: 39px;
  border: 1px solid #fff;
  margin-bottom: 20px;
}
.loop-sec .ftnav .shop-zone .shop-btn a {
  margin-top: 0;
  text-align: center;
  line-height: 39px;
  font-size: 14px;
}
.loop-sec .ftnav .shop-zone .shop-btn:hover {
  color: #e5030c;
  border-color: #e5030c;
}
.loop-sec .ftnav .app-download {
  text-align: center;
}
.loop-sec .ftnav .app-download .download-title {
  font-size: 18px !important;
  margin-bottom: 19px;
}
.loop-sec .ftnav .app-download .qrcode-zone {
  margin: 0 auto;
  width: 220px;
  min-height: 140px;
  zoom: 1;
}
.loop-sec .ftnav .app-download .qrcode-zone::after {
  content: '';
  display: block;
  clear: both;
}
.loop-sec .ftnav .app-download .qrcode-zone .item {
  float: left;
  margin-right: 10px;
  text-align: center;
}
.loop-sec .ftnav .app-download .qrcode-zone .item img {
  width: 100px;
  height: 100px;
  image-rendering: -webkit-optimize-contrast;
}
.loop-sec .contact-info {
  width: 100%;
}
.loop-sec .contact-info .info-item {
  width: 25%;
  float: left;
}
.loop-sec .contact-info .info-item img {
  display: inline;
  vertical-align: middle;
}
.loop-sec .contact-info .info-item span {
  font-size: 14px !important;
}
.loop-sec .ftnav a {
  display: block;
  margin-top: 4px;
  color: #cbcbce;
  line-height: 1.7;
  font-size: 14px;
}
.loop-sec .ftnav .call-out {
  position: relative;
  line-height: 1.7;
}
.loop-sec .ftnav .call-out .wechat-btn {
  color: #cbcbce;
}
.loop-sec .ftnav a:hover {
  color: #ff0710;
}
.loop-sec .ftnav .consult-piano-room {
  margin-left: -47px;
  margin-top: 22px;
  margin-bottom: 22px;
}
.loop-sec .ftnav .consult-piano-room h3,
.loop-sec .ftnav .consult-piano-room h6 {
  position: relative;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.loop-sec .ftnav p {
  line-height: 1.7;
}
.loop-sec .call-out-modal {
  position: absolute;
  top: -81px;
  left: 100px;
  padding: 20px 40px;
  min-width: 180px;
  text-align: center;
  box-shadow: 0 0 5px #e5e5e5;
  background: #fff;
  display: none;
}
.loop-sec .call-out-modal span {
  display: block;
  font-size: 12px;
}
.loop-sec .call-out-modal .t1 {
  color: #323232;
}
.loop-sec .call-out-modal .t2 {
  color: #ff0710;
}
.loop-sec .service-modal {
  top: -56px;
  font-size: 14px;
}
.loop-sec .u-copyright {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 26px 0;
  text-align: center;
  font-size: 12px;
  color: #909090;
  border-top: 1px solid #989898;
}
.loop-sec .u-copyright a {
  color: #909090;
}
/*--------------------页脚结束-----------------------------------*/
/*--------------------页首导航-----------------------------------*/
.g-nav {
  position: fixed;
  width: 100%;
  height: 80px;
  z-index: 999999;
}
.g-nav.gt-sec1 {
  background: #fff;
}
.g-nav.gt-sec1 .tp-nav {
  box-shadow: 0 0 1px solid #eee;
}
.g-nav.gt-sec1 .tp-nav a {
  color: #000;
  font-size: 19px;
  font-weight: 600;
}
.g-nav.gt-sec1 .tp-nav a:hover {
  font-size: 19px;
  color: #000;
}
.g-nav.gt-sec1 .tp-nav a.more-btn {
  color: #000;
}
.g-nav.gt-sec1 .tp-nav .lists-inner {
  opacity: 1;
}
.g-nav.gt-sec1 .tp-nav .logo a {
  background-image: url(/images/index-logo-dark-new.png);
}
.g-nav.gt-sec1 .tp-nav .shopping:hover a {
  background-image: url(/imgs/index_site/shopping-icon2-hover.png);
}
.g-nav.gt-sec1 .tp-nav .shopping a {
  background-image: url(/imgs/index_site/shopping-icon2.png);
}
.g-nav.gt-sec1 .entry {
  overflow: hidden;
  padding-bottom: 0;
  margin-right: 0;
}
.g-nav.gt-sec1 .entry:hover {
  border-bottom: none;
}
.g-nav.gt-sec1 .entry a {
  float: left;
  padding-bottom: 4px;
}
.g-nav.gt-sec1 .entry a:hover {
  border-bottom: none!important;
}
.g-nav.gt-sec1 .entry span {
  float: left;
  height: 12px;
  width: 1px;
  margin: 0 6px;
  background: #fff;
}
.g-nav.gt-sec1 .m-toplink .user-act {
  color: #3d3d45;
}
.g-nav.gt-sec1 .m-toplink .user-act span.user-name {
  color: #3d3d45;
}
.g-nav.gt-sec1 .tp-nav .m-toplink .user-act span.username {
  color: #3d3d45;
}
.g-nav .tp-nav .m-toplink .user-act .user-info a:hover {
  color: #7e318e!important;
}
.tp-nav {
  width: 1200px;
  margin: 0 auto;
  height: 80px;
  padding: 3px 0;
}
.tp-nav:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: ".";
  opacity: 0;
  width: 1px;
}
.tp-nav a {
  display: block;
  padding-bottom: 4px;
  color: #fff;
  font-size: 14px;
}
.tp-nav > li {
  display: inline-block;
  position: relative;
  line-height: 1.5;
  transition: 0.2s all linear;
  cursor: pointer;
  margin-left: -5px;
}
.tp-nav > li > a {
  padding: 20px 20px;
  cursor: pointer;
}
.tp-nav > li:hover:after {
  content: '';
  margin: -15px 0 0 53px;
  display: block;
  width: 24px;
  height: 1px;
  background: #000;
}
.tp-nav > li:nth-child(2):before,
.tp-nav > li:nth-child(3):before,
.tp-nav > li:nth-child(4):before,
.tp-nav > li:nth-child(5):before {
  content: "|";
  position: absolute;
  top: 20px;
  left: -3px;
  font-size: 18px;
  color: #c5c5c5;
  opacity: .57;
}
.tp-nav > li:nth-child(1):hover:after {
  margin: -15px 0 0 21px;
}
.tp-nav > li:active {
  color: #fff;
}
.tp-nav .entry {
  overflow: hidden;
  padding-bottom: 0;
  margin-right: 0;
}
.tp-nav .entry:hover {
  border-bottom: none;
}
.tp-nav .entry a {
  float: left;
  padding-bottom: 4px;
}
.tp-nav .entry a:hover {
  border-bottom: 1px solid;
}
.tp-nav .entry span {
  float: left;
  height: 12px;
  width: 1px;
  margin: 0 6px;
  background: #fff;
}
.tp-nav .shopping {
  margin-left: 231px;
}
.tp-nav .shopping:hover a {
  background-image: url(/imgs/index_site/shopping-icon1-hover.png);
}
.tp-nav .shopping a {
  padding-left: 31px;
  height: 22px;
  background-image: url(/imgs/index_site/shopping-icon1.png);
  background-repeat: no-repeat;
  background-position: left 0px;
  line-height: 26px;
}
.g-nav .logo {
  float: left;
}
.g-nav .logo img {
  width: 191px;
  height: 55px;
  margin: 10px 115px 0 0;
}
.g-nav .nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.tp-nav .logo:hover {
  border-bottom: none!important;
}
.tp-nav .logo a {
  pointer-events: none;
  background-image: url(/images/index-logo-new.png);
  padding: 0;
  display: block;
  height: 49px;
  width: 165px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% auto;
}
.tp-nav .m-dropdown {
  position: relative;
}
#smartpiano .dropdown-smart-piano {
  padding-left: 53px;
  background-image: url(images/smartpiano_logo.png);
  background-repeat: no-repeat;
  background-position: 20px 20px;
  background-size: 27px 27px;
}
#music .smart-edu {
  padding-left: 80px;
  background-image: url(/images/piano_classroom.png);
  background-repeat: no-repeat;
  background-position: 20px 11px;
  background-size: 57px 35px;
}
#aipl a {
  padding-left: 53px;
  background-image: url(/images/peilian_logo_20210721.png);
  background-repeat: no-repeat;
  background-position: 20px 21px;
  background-size: 28px 28px;
}
#aipl img {
  position: absolute;
  top: 5px;
  right: 20px;
  width: 80px;
}
#xyz-peilian a {
  padding-left: 53px;
  background-image: url(/images/xyz_peilian_logo.png);
  background-repeat: no-repeat;
  background-position: 20px 20px;
  background-size: 27px 27px;
}
.tp-nav li {
  background-image: url(/images/nav_line.png);
  background-repeat: no-repeat;
  background-position: 0;
}
.tp-nav li:nth-child(1) a {
  color: #ff0711 !important;
}
.tp-nav li:nth-child(1) {
  background-image: none;
}
.tp-nav li:nth-child(2) {
  background-image: none;
}
.tp-nav .pro-lists {
  position: absolute;
  background: rgba(0, 0, 0, 0.001);
  width: 658px;
  padding-top: 25px;
  display: none;
}
@media screen and (max-width: 1440px) {
  .tp-nav .pro-lists {
    padding-top: 23px;
  }
}
.tp-nav .lists-inner {
  padding-left: 18px;
  padding-top: 33px;
  padding-bottom: 30px;
  height: 455px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 1px 0 #D3D3DA;
  opacity: .85;
}
.tp-nav .tab-btns {
  padding-right: 20px;
  background-image: url(/imgs/index_site/proshadow.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  float: left;
}
.tp-nav .tab-btns li {
  cursor: pointer;
  border-bottom: none;
}
.tp-nav .tab-btns li:hover {
  border-bottom: none!important;
}
.tp-nav .tab-btns a {
  color: #6c6c71;
  margin-bottom: 18px;
}
.tp-nav .tab-btns a:hover {
  color: #ff0710;
}
.tp-nav .tab-contents {
  float: left;
  width: 338px;
  margin-top: 32px;
  text-align: center;
}
.tp-nav .tab-contents li {
  cursor: pointer;
  display: none;
}
.tp-nav .tab-contents .select {
  display: block;
}
.tp-nav .tab-contents p {
  margin: 17px 0 12px;
  font-size: 12px;
}
.tp-nav .tab-contents a {
  display: inline;
  padding-bottom: 4px;
  width: 120px;
  border-bottom: 1px solid;
  color: #7e318e;
  font-size: 14px;
}
.tp-nav .tab-contents .pro1 p {
  margin-left: 29px;
}
.tp-nav .tab-contents .pro1 a {
  margin-left: 43px;
}
.tp-nav .tab-contents .pro2 p {
  margin-left: 46px;
}
.tp-nav .tab-contents .pro2 a {
  margin-left: 56px;
}
.tp-nav .tab-contents .pro3 img {
  margin-top: 40px;
}
.tp-nav .tab-contents .pro3 p {
  margin-left: 46px;
}
.tp-nav .tab-contents .pro3 a {
  margin-left: 56px;
}
.tp-nav .tab-contents .pro4 img {
  margin-top: -10px;
  margin-right: -20px;
}
.tp-nav .tab-contents .pro4 p {
  margin-top: -12px;
}
.tp-nav .tab-contents .pro5 img {
  margin-top: -10px;
  margin-right: -20px;
}
.tp-nav .tab-contents .pro5 a {
  padding-right: 0;
}
.tp-nav .tab-contents .piano-room p {
  margin-top: -20px;
}
.tp-nav .tab-contents .piano-room img {
  width: 256px;
}
.tp-nav .exp-lists {
  position: absolute;
  background: rgba(0, 0, 0, 0.001);
  width: 130px;
  padding-top: 25px;
  display: none;
}
.tp-nav .exp-lists .exp-item {
  padding: 20px 0 10px 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 1px 0 #D3D3DA;
  opacity: .85;
  padding-left: 18px;
}
.tp-nav .exp-lists .exp-item .tips_new {
  background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
}
.tp-nav .exp-lists .exp-item li {
  cursor: pointer;
  border-bottom: none;
}
.tp-nav .exp-lists .exp-item li:hover {
  border-bottom: none;
}
.tp-nav .exp-lists .exp-item a {
  color: #6c6c71;
  margin-bottom: 18px;
}
.tp-nav .exp-lists .exp-item a:hover {
  color: #ff0710;
}
.tp-nav .m-toplink {
  position: relative;
  float: right;
  height: 100%;
  width: 200px;
  text-align: right;
}
.tp-nav .m-toplink a {
  display: inline-block;
  color: #fff;
  text-decoration: none !important;
}
.tp-nav .m-toplink .user-act {
  position: absolute;
  top: 27px;
  left: 58%;
}
.tp-nav .m-toplink .user-act .username {
  color: #fff;
}
.tp-nav .m-toplink .user-act .user-info {
  position: absolute;
  z-index: 1000;
  height: 100px;
}
.tp-nav .m-toplink .user-act .user-info p {
  display: none;
  padding: 8px;
  margin: 14px 0;
  top: 24px;
  position: absolute;
  white-space: nowrap;
  line-height: 24px;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 3px 3px 5px rgba(221, 221, 221, 0.67);
}
.tp-nav .m-toplink .user-act .user-info:hover p {
  display: block;
}
.tp-nav .m-toplink .user-act .user-info a {
  display: block;
  color: #333;
  text-align: center;
}
.tp-nav .m-toplink .user-act .user-info .logout {
  border-top: 1px dashed #ccc;
}