.main .visual-cont{margin-top:-141px;}
.visual-cont .swiper-container .swiper-slide{
  padding-top:141px;
  background: url('../img/main/visual-img1.jpg') center no-repeat;
  height:720px;
}
.visual-cont .swiper-container .swiper-slide div{
  max-width: 1194px; margin:0 auto; height:100%;
  padding-top:140px;

}
.visual-cont .swiper-container .swiper-slide div h2{
  margin-top:-10px;
  font-size: 64px;
  line-height: 82px;
  color: #fff;
  font-weight: 300;
  text-shadow: 5px 5px 5px rgb(0 0 0 / 30%);
  letter-spacing: -2px;
}
.visual-cont .swiper-container .swiper-slide div h2 strong{
  font-weight:500;
}
.visual-cont .swiper-container .swiper-slide div p{
  font-size:20px; line-height: 32px;
  color:#fff; margin-top:26px;
}

.visual-cont .swiper-container .swiper-pagination-bullet{background: #fff; opacity: 0.5; position: relative; display: inline-block;}
.visual-cont .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active{width:30px; background: #fff; opacity: 1; border-radius: 5px;}
.visual-cont .swiper-button-next{
  margin:0 0 0 10px;
  position: relative; display: inline-block;
  left:auto; top:auto; right:auto;
  width:20px; height:20px; background: url('../img/common/icon-spr.png') -41px 0 no-repeat;
}
.visual-cont .swiper-button-prev{
  margin:0 0 0 28px;
  position: relative; display: inline-block;
  left:auto; top:auto; right:auto;
  width:20px; height:20px; background: url('../img/common/icon-spr.png') -21px 0 no-repeat;
}
.control{position: absolute; left:50%; top:235px; font-size:0; width:100%; max-width: 1194px; margin-left:-597px;}
.control .swiper-pagination{
  display: inline-block; position: relative;
  vertical-align: top; margin-top:6px;
}
.control .swiper-pagination .swiper-pagination-bullet{margin-left:10px;}
.control .swiper-pagination .swiper-pagination-bullet:first-child{margin-left:0;}
.control .btn-control{
  margin-left: 18px;
  display: inline-block; vertical-align: top; z-index: 3; position: relative;
  width:20px; height:20px; background: url('../img/common/icon-spr.png') -238px 0 no-repeat;
}
.control .btn-control.play{
  background: url('../img/common/icon-spr.png') -61px 0 no-repeat;
}

.intro-sec h2{
  font-size:48px; line-height: 58px; text-align: center;
  color:#333; margin-top:170px; font-weight:500;
}
.intro-sec p{
  position: relative;
  color:#666; font-size:20px; line-height:30px; text-align: center; margin-top:55px;
}
.intro-sec p:before{
  content:''; position: absolute; top:-30px; left:50%; transform: translateX(-50%);
  width:38px; height:1px; background: #333;
}
.intro-sec span{
  display: block; margin-top:10px; font-size:18px; color:#999;
}
.intro-sec .hashtag{
  margin:45px 0 80px -18px;
  display: flex; align-items: center; justify-content: center;
}
.intro-sec .hashtag a{
  display: inline-block; margin-left:18px;
  width:150px; height:50px; line-height:46px;
  border:2px solid #c0a353; border-radius: 25px;
  text-align: center; color:#c0a353; font-size:18px;
}

.intro-sec .info-list{display: flex; justify-content: space-between;}
.intro-sec .info-list li{
  max-width:276px; height:460px; width:25%; margin-left:10px; border-radius: 10px;
  background: url('../img/main/info-list1.png') center no-repeat;
}
.intro-sec .info-list li:nth-child(1){
  margin-left:0;
  background: url('../img/main/info-list1.png') center no-repeat;
}
.intro-sec .info-list li:nth-child(2){
  background: url('../img/main/info-list2.png') center no-repeat;
}
.intro-sec .info-list li:nth-child(3){
  background: url('../img/main/info-list3.png') center no-repeat;
}
.intro-sec .info-list li:nth-child(4){
  background: url('../img/main/info-list4.png') center no-repeat;
}
.intro-sec .info-list li a{
  position: relative;
  display: block; height: 100%;
  padding:48px 20px;
}

.intro-sec .info-list li a span{
  display: block; position: absolute; width:calc(100% - 40px);
  bottom:48px; left:20px;
}
.intro-sec .info-list li a span strong{
  display: block;
  text-align: left;
  font-size:36px; line-height: 42px; color:#fff; font-weight: 500;
}
.intro-sec .info-list li a span em{
  display: block; margin-top:5px;
  text-align: left;
  font-size:20px; line-height:28px; color:#fff;
}

.intro-sec .cont-link{
  display: flex; margin-top:80px;
}
.intro-sec .cont-link a{
  background: #f6f8fb;
  padding:45px 30px 40px 120px;
  display: block; width:50%; position: relative;
  border-radius: 10px;
}
.intro-sec .cont-link a.mo-view{
  display: none;
}
.intro-sec .cont-link a:first-child{
  margin-right:30px;
}
.intro-sec .cont-link a:before{
  content:'';
  position: absolute; top:44px; left:46px;
  width:59px; height:41px;
  background: url('../img/common/icon-spr.png') -131px 0 no-repeat;
}
.intro-sec .cont-link a:first-child:before{
  content:'';
  position: absolute; top:44px; left:46px;
  width:50px; height:41px;
  background: url('../img/common/icon-spr.png') -81px 0 no-repeat;
}

.intro-sec .cont-link a strong{
  display: block; color:#333;
  font-size:32px; font-weight: 500; line-height: 36px;
}
.intro-sec .cont-link a span{
  display: block; margin-top: 15px;
  font-size:20px; line-height: 32px; color:#666666;
}

.caution-sec{
  margin-top:110px;
  background: #f6f6f6;
  padding:35px 0;
}
.caution-sec ul li{text-indent: -17px; padding-left: 17px;font-size:16px; line-height:28px; color:#666666;}
.caution-sec ul li.fc-black{color:#333;}
.caution-sec ul li span.fc-black{color:#333; display: block; padding-left: 15px;}
.caution-sec p{margin-top:30px; font-size:16px; line-height:28px; color:#666666;}

.mCustomScrollbar._mCS_1{height:100%; margin-right:-30px;}
.mCSB_draggerRail{width:20px;}
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background: #e0e0e0 !important;}
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background: #fff !important;}

.main-pop .content{
  height: 90%;
  width:940px; padding:65px 70px; border:5px solid #27b2a5;
}
.main-pop .tab-content h4{
  font-size:26px; line-height:28px; font-weight: 500; margin-bottom:22px;
}
.main-pop .tab-content > div strong{
  display: block; font-size:22px; line-height:28px; font-weight: 500; margin-bottom:12px;
}
.main-pop .tab-content > div p{
  font-size:20px; line-height:30px; color:#666;
}
.main-pop .tab-content > div ul li{
  margin-top:30px; border-radius: 10px; background: #f6f8fb;
  padding:28px;
}
.main-pop .tab-content > div ul li span{
  font-size:20px; line-height:28px; display: block;
}
.main-pop .tab-content > div ul li p{
  font-size:18px; line-height:28px; color:#666;
  padding-left:105px; position: relative; margin-top:12px;
  word-break: keep-all;
}
.main-pop .tab-content > div ul li p:before{
  content:'';
  position: absolute;
  background: url('../img/main/popup-person.png') no-repeat;
}
.main-pop .tab-content > div ul li.case1 p:before{
  top: 5px; left:10px;
  width:78px; height:71px;
  background-position: 0 0;
}
.main-pop .tab-content > div ul li.case2 p:before{
  top: 5px; left:10px;
  width:79px; height:72px;
  background-position: -78px 0;
}
.main-pop .tab-content > div ul li.case3 p:before{
  top: 5px; left:10px;
  width:85px; height:72px;
  background-position: -157px 0;
}
.main-pop .tab-content > div ul li.case4 p:before{
  top: 5px; left:18px;
  width:71px; height:72px;
  background-position: -242px 0;
}
.main-pop .tab-content > div ul li.case5 p:before{
  top: 5px; left:10px;
  width:84px; height:72px;
  background-position: -313px 0;
}

.main-pop a.btn{
  margin:50px auto 0; text-align: center;
  display: block; width:346px; height:52px; line-height:52px; font-weight: 500;
  color:#fff; font-size:20px; border-radius: 52px; background: #27b2a5;
}
.mo-view, .mo-img{display:none;}
.br{display: block;}
@media screen and (max-width: 1274px) {
  .visual-cont .swiper-container .swiper-slide div{padding-left:40px; padding-right:40px;}
  .control{left:40px; margin-left:0;}
}

@media screen and (max-width: 1024px) {
  .pc-view{display: none !important;}
  .mo-view{display:block;}

  .visual-cont .swiper-container .swiper-slide div h2{
    margin-top:0;
    font-size: 19px;
    line-height: 25px;
    color: #fff;
    font-weight: 300;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 10%);
  }
  .visual-cont .swiper-container .swiper-slide div h2 strong{
    display: inline-block;
    font-size: 40px;
    line-height: 48px;
    margin-top:6px;
    font-weight:500;
  }
  .visual-cont .swiper-container .swiper-slide div p{
    font-size:16px; line-height: 23px;
    color:#fff; margin-top:12px;
  }

  .visual-cont .swiper-button-next{
    display: none;
  }
  .visual-cont .swiper-button-prev{
    display:none;
  }
  .control{
    position: absolute; left:50%; top:auto; bottom: 25px; margin-left:0; width: auto;}
  .control .swiper-pagination{
    display: inline-block; position: relative;
    vertical-align: top; margin-top:6px;
  }
  .control .swiper-pagination .swiper-pagination-bullet{margin-left:7px;}
  .visual-cont .swiper-container .swiper-pagination-bullet{width:8px;}
  .visual-cont .swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active{width:8px;}
  .control .btn-control{display:none;}

  .intro-sec h2,.intro-sec p{display:none;}
  .intro-sec .hashtag{flex-wrap: wrap; margin:25px 0 30px;}
  .intro-sec .hashtag a{width:calc(100% / 3 - 5px); margin-left:5px; margin-top:5px; font-size:14px; line-height: 33px; height:36px; border: 1px solid #c0a353;}
  .intro-sec .hashtag a:nth-child(3n-2){margin-left:0;}
  .intro-sec .info-list{overflow-x: scroll;}
  .intro-sec .info-list li{flex-shrink: 0; width:240px; height:310px}
  .intro-sec .info-list li:nth-child(1){
    margin-left:0;
    background: url('../img/mobile/main/info-list1.png') center no-repeat;
    background-size: 100%;
  }
  .intro-sec .info-list li:nth-child(2){
    background: url('../img/mobile/main/info-list2.png') center no-repeat;
    background-size: 100%;
  }
  .intro-sec .info-list li:nth-child(3){
    background: url('../img/mobile/main/info-list3.png') center no-repeat;
    background-size: 100%;
  }
  .intro-sec .info-list li:nth-child(4){
    background: url('../img/mobile/main/info-list4.png') center no-repeat;
    background-size: 100%;
  }


  .intro-sec .info-list li a span{
    display: block; position: absolute; width:calc(100% - 50px);
    bottom:30px; left:25px;
  }
  .intro-sec .info-list li a span strong{
    font-size:28px; line-height: 34px;
  }
  .intro-sec .info-list li a span em{ margin-top:10px; font-size:16px; line-height:21px; }

  .intro-sec .cont-link{
    display: block; margin-top:40px;
    margin:40px -15px 0;
  }
  .intro-sec .cont-link a{
    background: #f6f8fb;
    padding:25px 40px 25px 45px;
    width:100%;
    margin-top:10px;
  }
  .intro-sec .cont-link a:first-child{
    margin:10px 0 0 0;
  }
  .intro-sec .cont-link a:before{
    content:'';
    position: absolute; top:25px; left:15px;
    width:26px; height:22px;
    background: url('../img/mobile/common/icon-spr.png') -17px 0 no-repeat;
    background-size: 250px;
  }
  .intro-sec .cont-link a:last-child:before{
    content:'';
    position: absolute; top:25px; left:15px;
    width:28px; height:20px;
    background: url('../img/mobile/common/icon-spr.png') -44px 0 no-repeat;
    background-size: 250px;
  }
  .intro-sec .cont-link a:after{
    content:'';
    position: absolute; top:27px; right:15px;
    width:9px; height:16px;
    background: url('../img/mobile/common/icon-spr.png') -169px 0 no-repeat;
    background-size: 250px;
  }

  .intro-sec .cont-link a strong{
    font-size:20px; line-height: 20px;
  }
  .intro-sec .cont-link a span{
    margin-top: 10px;
    font-size:14px; line-height: 20px;
  }

  .caution-sec{
    margin-top:10px;
    background: #f6f6f6;
    padding:30px 0;
  }
  .caution-sec ul li{font-size:13px; line-height:21px; text-indent: -12px; padding-left: 12px;}
  .caution-sec p{margin-top:0; font-size:13px; line-height:21px; color:#333333;}


  .main-pop.mo-view .body{
    height:calc(100% - 74px);
    overflow-y: scroll;
  }
  .main-pop.mo-view .content{
    height: auto; max-height: 90%;
    width:calc(100% - 30px); padding:0; border:3px solid #27b2a5;
  }

  .main-pop.mo-view .content .header{margin:20px;}
  .main-pop.mo-view .content .header h3{
    font-size:20px; line-height:30px; font-weight: 500; margin-bottom:0;
  }
  .main-pop.mo-view .content .body{padding:0 20px 20px;}
  .main-pop.mo-view .controls{font-size:0; text-align: center; display: flex; align-items: center; justify-content: space-between;}
  .main-pop.mo-view .controls a{
    display: inline-block; vertical-align: top;
    width:26px; height:26px;
    background: url('../img/mobile/common/icon-spr.png') -115px 0 no-repeat;
    background-size: 250px;
    opacity: 1; pointer-events:all;
  }
  .main-pop.mo-view .controls a.active{
    opacity: 0.3;
    pointer-events: none;

  }
  .main-pop.mo-view .controls a.next{
    transform: rotate(180deg);
  }
  .main-pop.mo-view .controls div{display: inline-block;}
  .main-pop.mo-view .controls div span{font-size:18px; line-height: 24px; font-weight: 500; display: none;}
  .main-pop.mo-view .controls div span.active{display: block;}
  .main-pop.mo-view .tab-content h4{
    font-size:16px; line-height:28px; font-weight: 500; margin:20px 0 10px;
    vertical-align: top; display:none;
  }
  .main-pop.mo-view .tab-content > div{display:none;}
  .main-pop.mo-view .tab-content > div.active{display:block;}
  .main-pop.mo-view .tab-content > div strong{
    display: block; font-size:14px; line-height:14px; margin-bottom:7px; margin-top:20px;
  }
  .main-pop.mo-view .tab-content > div p{
    font-size:14px; line-height:20px; color:#666;
  }
  .main-pop.mo-view .tab-content > div ul{display: flex; overflow: auto;
    padding:0 20px 10px; margin:0 -20px;
  }
  .main-pop.mo-view .tab-content > div ul li{
    margin-top:20px; border-radius: 10px; background: #f6f8fb;
    padding:15px; flex-shrink: 0; width:95%; margin-left:10px;
  }
  .main-pop.mo-view .tab-content > div ul li:first-child{margin-left:0;}
  .main-pop.mo-view .tab-content > div ul li span{
    font-size:14px; line-height:20px; display: block; position: relative;
    padding-left:65px;
  }
  .main-pop.mo-view .tab-content > div ul li span:before{
    content:'';
    position: absolute; top: 5px; left:0;
    background: url('../img/mobile/main/popup-person.png') no-repeat;
    background-size: 250px;

  }
  .main-pop.mo-view .tab-content > div ul li span em{
    display: block; font-size:12px; line-height:20px; display: block; color:#666666;
  }
  .main-pop.mo-view .tab-content > div ul li p{
    font-size:14px; line-height:20px; color:#666;
    padding-left:0; position: relative; margin-top:10px;
    word-break: keep-all;
  }
  .main-pop.mo-view .tab-content > div ul li p:before{
    display: none;
  }
  .main-pop.mo-view .tab-content > div ul li.case1 span:before{

    width:53px; height:51px;
    background-position: 0 0;
  }
  .main-pop.mo-view .tab-content > div ul li.case2 span:before{
    width:53px; height:51px;
    background-position: -54px 0;
  }
  .main-pop.mo-view .tab-content > div ul li.case3 span:before{
    width:53px; height:51px;
    background-position: -106px 0;
  }
  .main-pop.mo-view .tab-content > div ul li.case4 span:before{
    width:53px; height:51px; top:7px; left:5px;
    background-position: -161px 0;
  }
  .main-pop.mo-view .tab-content > div ul li.case5 span:before{
    width:53px; height:51px;
    background-position: 0 100%;
  }

  .main-pop.mo-view a.btn{
    margin:15px auto 0; text-align: center;
    display: block; width:190px; height:36px; line-height:34px; font-weight: 500;
    color:#fff; font-size:14px; border-radius: 36px; background: #27b2a5;
  }

  .intro-sec .cont-link a.mo-view{
    display: block;
  }

}

@media screen and (max-width: 768px) {
  .visual-cont .mo-img{display: block; width:100%;}
  .main .visual-cont{margin-top:0;}
  .visual-cont .swiper-container .swiper-slide{
    padding-top:0;
    background: none !important;
    position: relative;
    height:auto;
  }
  .visual-cont .swiper-container .swiper-slide div{
    max-width: 1194px; margin:0 auto; height:100%;
    padding-top:0;
    position: absolute; top:50px; left:0;
    padding:0 15px;
  }
  .br{display: none;}
}
