@charset "utf-8";
/*首页--banner*/
.swiper-wrapper{ transition-delay:.1s; }
.swiper-container { width:100%; margin:auto; }
.swiper-slide .bantxt{ position:absolute; z-index:999; left:10%; top:50%; opacity:0; transition:all .4s; color:#fff; width:80%;}
.swiper-slide .bantxt img{ display:block; margin:0 auto 25px; max-width:50%;}
.swiper-slide .bantxt p{ margin:0 auto; line-height:1.5;}
.swiper-slide .bantxt p i{ display:block; max-width:960px; margin:0 auto; text-align:center;}
.swiper-slide .bantxt em{ display:block; text-align:left; max-width:1060px; line-height:1.2; margin-bottom:15px; font-weight:700;}
.swiper-slide .bantxt span{ display:block; text-align:left; width:60%; max-width:1060px; line-height:1.5}
.ani-slide .bantxt{ opacity:1; transform: translateY(-50%); top:50%;}
.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{ font-size:16px; color:#fff;}
.swiper-pagination-current{ font-size:21px;}
@media screen and (min-width:1200px) {
.swiper-slide img.myban{ display:block; width:100%;}
}
@media screen and (max-width:1200px) and (min-width:960px) {
.swiper-slide img.myban{ display:block; width:130%;}
}
@media screen and (max-width:960px) {
.swiper-slide img.myban{ display:block; width:180%;}
.swiper-slide .bantxt span{ line-height:1; width:90%;} 
}

.indtitle{ padding:2% 0;}
.indtitle span{ line-height:2; font-weight:700; color:#00324b; font-family:"GOTHICB";}
@media screen and (max-width: 780px) {
.indtitle span{ line-height:30px;}
}
.indtitle p{ color:#666;}

.indpro { position: relative; margin-top: 10px; padding:25px 0;}
.indpro .symain{ padding:0 30px; box-sizing: border-box;}
.indpro_list{ position: relative; max-height:440px; overflow: hidden; z-index: 0; margin-top:0px;}
.indpro_list li{ width:25%; float:left; padding:5px; box-sizing: border-box; border-bottom:1px #d7d7d7 solid;}
@media screen and (min-width:1200px) {
.indpro_list li{ width:25%; float:left; height:110px;}
}
@media screen and (max-width:1200px) and (min-width:960px) {
.indpro_list li{ width:33.33%; float:left; height:110px;}
}
@media screen and (max-width:960px) and (min-width:640px) {
.indpro_list li{ width:50%; float:left; height:110px;}
}
@media screen and (max-width:640px) {
.indpro_list li{ width:100%; height:110px;}
}
.indpro_list li a{ color:#00324b; display:block; padding:15px 30px 15px 10px; position:relative; transition: all 0.3s;}
.indpro_list li a:hover{ background:#f4faff; box-shadow:0px 0px 12px #ddd; border-top-left-radius:30px; border-bottom-right-radius:30px;}
.indpro_list li .ppimg{ width:125px; height:70px; float:left; position:relative;}
.indpro_list li .ppimg img{ max-width:100%; max-height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.indpro_list li span{ width: calc(100% - 125px); line-height:22px; position:absolute; left:135px; top:50%; transform: translateY(-50%);}
@media screen and (max-width:1500px) {
.indpro_list li .ppimg{ width:105px; height:70px;}
.indpro_list li span{ width: calc(100% - 105px); left:115px;}
}
.indpro_listmore{ text-align:center; margin:25px auto;}
.indpro_listmore .more_button { font-size:38px; display:none; cursor: pointer; background:url(../images/more01.png) no-repeat; width:54px; height:42px; line-height:42px; color:#fff; margin:0 auto;}

.indabout{ padding:5% 0; background:url(../images/bg1.jpg) #f8f8f8 top repeat-x; overflow:hidden;}
.indabout_img img{ border-top-left-radius:30px; border-bottom-right-radius:30px; width:100%;}
@media screen and (min-width:960px) {
.indabout_img{ width:50%; float:right;}
.indabout_con{ width: calc(45% - 30px); float:left; margin-left:30px;}
}

.indabout em{ font-family:"GOTHICB"; display:block; font-weight:700; color:#00324b; line-height:2;}
.indabout div{ font-family:"roboto"; color:#333; line-height:2;}
.indabout a{ background:url(../images/jiantou.png) left no-repeat; color:#2e69b3; padding-left:35px; display:inline-block; margin-top:5%;}
.indabout a:hover{ text-decoration:underline;}

.indfan{ padding:2% 0 4%;}

@media screen and (min-width:960px) {
.indfan .indtitle{ margin:0 30px;}
.indfan_con li{ width: calc(33.33% - 20px); float:left; margin-right:30px;}
.indfan_con li:last-child{ margin-right:0;}
}
@media screen and (max-width:960px) {
.indfan_con li{ margin-bottom:30px;}
}
.indfan_con li a{ display:block; position:relative; overflow:hidden; border-top-left-radius:30px; border-bottom-right-radius:30px; transition: all 0.3s;}
.indfan_con li a:hover{box-shadow:0px 0px 15px #98c6dd;}
.indfan_con li a img{ width:100%; height:100%; position:absolute; object-fit: cover; transition: all 0.3s; }
.indfan_con li a img.fanbg{ position:relative; width:100%; height:auto !important;}
.indfan_con li a:hover img{ transform: scale(1.1); }
.indfan_con li a span{ position:absolute; left:0; bottom:0; width:100%; z-index:5; background:url(../images/bg2.png) repeat-x; background-size:auto 100%; line-height:30px; padding:25px 0;}
.indfan_con li a span{ color:#fff; text-align:center;}


.character { padding:5% 0; background:url(../images/bg1.jpg) #f8f8f8 top repeat-x;}
.character .character_cnt:after { content: ""; display: block; height: 0; clear: both; }
.character .character_cnt a { position: relative; float: left; margin-left:1%; width:15%; cursor: pointer; overflow: hidden; transition: all 0.5s; }
.character .character_cnt a:first-child { margin-left: 0; }
.character .character_cnt a:first-child .charactercenter { display: none; }
.character .character_cnt a:first-child .characterbot { display: block; }
.character .character_cnt a > img { width:320%; transition: all 0.5s; }
.character .character_cnt a.active { width:52%;  border-top-left-radius:30px; border-bottom-right-radius:30px;}
.character .character_cnt a.active > img { width: 100%; margin-left: 0 !important; }
.character .charactercenter { position: absolute; bottom: 0; top: 0; left: 0; right: 0; margin: auto; width: 180px; height: 180px; border-radius: 50%; font-size:0;}
.character .charactercenter:before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.character .charactercenter > div { width: 100%; display: inline-block; vertical-align: middle; }
.character .charactercenter > div span img{ display:block; margin:0 auto;}
.character .charactercenter > div div { margin-top:10px; font-size:18px; color:#fff; line-height: 1; text-align:center; font-family:"GOTHICB";}
.character .characterbot { display: none; position: absolute; left: 30px; right: 30px; bottom: 30px; padding:0; color: #fff;}
.character .characterbot em{ line-height:2; font-family:"GOTHICB";}
.character .characterbot p { line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media screen and (max-width: 1660px) {
  .character .charactercenter { width: 136px; height: 136px; }
  .character .charactercenter > div div { margin-top: 12px; font-size: 18px; }
  .character .characterbot { padding: 26px 0; height: 132px; }
  .character .characterbot p { font-size: 15px; line-height: 1.6; }
}
@media screen and (max-width: 1050px) {
  .character .character_cnt { margin-top: 30px; }
  .character .charactercenter { width: 102px; height: 102px; }
  .character .charactercenter > div span { font-size: 36px; }
  .character .charactercenter > div div { margin-top: 8px; font-size: 15px; }
  .character .characterbot { padding: 18px 0; height: 120px; background:#00324b;}
  .character .characterbot img{ display:none;}
  .character .characterbot p { height: 42px; line-height: 1.5; }
}
@media screen and (max-width: 900px) {
  .character .character_cnt { margin-top: 0; }
  .character .character_cnt a { display: block; float: none; margin-left: 0; margin-top: 26px; width: 100%; height: auto !important; border-radius: 16px; background: #fff;}
  .character .character_cnt a > img { width: 100%; margin-left: 0 !important; }
  .character .character_cnt a.active { width: 100%; }
  .character .charactercenter { display: none !important; }
  .character .characterbot { display: block !important; position: relative; left: 0; right: 0; bottom: 0; padding:15px; box-shadow: none; opacity: 1 !important; filter: alpha(opacity=100) !important; }
}
@media screen and (max-width: 480px) {
  .sec_title { height: 0.8rem; }
  .sec_title > h4 { font-size: 0.56rem; line-height: 0.8rem; }
  .sec_title > a { width: 2.08rem; height: 0.8rem; border-radius: 0.4rem; font-size: 0.346667rem; line-height: 0.8rem; }
  .sec_title ul li { margin-left: 0.213334rem; font-size: 0.373334rem; line-height: 0.8rem; }
  .character { padding: 0.8rem 0; }
  .character .character_cnt a { margin-top: 0.64rem; border-radius: 0.32rem; }
}