@charset "utf-8";
/* CSS Document */

/*banner 焦点图 */
.bannerBox {
      position: relative;
      z-index: 0; 
      min-width: 1024px;
      height: 32vw;
}

.bannerBox .swiper-container {
      width: 100%;
      height: 100%;
}

.bannerBox .swiper-slide {
      width: 100%;
      height: 100%;
      background: center center no-repeat;
      background-size: cover;
}
.bannerBox .swiper-slide a { display: block; width: 100%; height: 100%; cursor: pointer;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap; justify-content: center; font-size: 2em;font-style: italic; letter-spacing: 0.2em;
align-items: center;
-moz-text-shadow:0 2px 5px rgba(0, 0, 0, .2);
-webkit-text-shadow:0 2px 5px rgba(0, 0, 0, .2);
text-shadow:0 2px 5px rgba(0, 0, 0, .2);
}
.bannerBox .swiper-slide .txt { display: block; color: #fff; margin-top: 1.5em;}
.bannerBox .swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction { bottom: 15px;}
.bannerBox .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 6px;}
.bannerBox .swiper-pagination-bullet {
      background-color: transparent;
      width: 12px;
      height: 12px;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      filter: alpha(opacity=5);
      -moz-opacity: 0.5;
      opacity: 0.5;
	  background-color: #fff;
}

.bannerBox .swiper-pagination-bullet-active {
      background-color: #fff;
	  filter: alpha(opacity=8);
	  -moz-opacity: 0.8;
	  opacity: 0.8;
}

.banner { position: relative; z-index: 0; background: #000 center center no-repeat; background-size:auto cover;
      width: 100%; padding-top: 540px;
      height: 0; overflow: hidden;color: #fff;}
.banner .con { position: absolute; left: 0; width: 100%; top: 0; bottom: 0; display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
	  flex-wrap: nowrap; 
	  justify-content: center; align-items: center; }
.banner .con .txtb {}
.banner .con .txt { font-size: 60px; letter-spacing: 0.1em; line-height: 1.3em; }
.banner .con .btn { margin-top: 1.8em; display: inline-block; padding: 0 1.7em;
 background-color: #066fd2; color: #fff; line-height: 2.8em;
 -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
 -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
 box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
 transition: all 0.4s;}
.banner .con .btn:hover { background-color: #fff; color: #066fd2;}

.proBoxW { min-width: 1024px; margin-bottom: 3em; background:url(../imgs/cloud.png) center center no-repeat; background-size:cover;}
.proBoxW2 { width:100%; margin:0 auto;}


.proBox { max-width: 1680px;  width: 70%; margin: 0 auto; padding: 3.4em 0 2.5em;}
.proBox .tit { font-weight: bold; font-size: 30px; line-height: 1.4em;}
.proBox .tit2 { margin-top: 0.7em;}

/* .proBox ul { margin:1em -1.1% 0;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
 .proBox li { width: 33.3%; }
 .proBox li:nth-child(4),.proBox li:nth-child(5) { width: 50%;}
 .proBox .lib { position: relative; z-index: 0; display: block; margin: 4%; color: #000e33;
 background:#fff; padding: 8% 5%; transition: all 0.6s;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap; justify-content: space-between; align-items: center;  }
 .proBox .lib:hover { top: -1px; background-color: #e7f6ff;
  -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
  box-shadow: 0 0 1em rgba(0, 0, 0, .1);}
 .proBox .picb { overflow: hidden; width: 40%; }
 .proBox li:nth-child(4) .picb,.proBox li:nth-child(5) .picb { width: 25%;}
 .proBox li:nth-child(4) .lib,.proBox li:nth-child(5) .lib { padding: 6% 3.6%;margin: 2.8%;}
 .proBox .pic { display: block; padding-top: 85%; height: 0; overflow: hidden;
 background: center center no-repeat; background-size:contain; }
 .proBox .name { display: block; color: #333; 
 font-size: 14px; line-height: 1.5em; text-align: center;} */
 
 .proBox ul { margin:1em -1.1% 0;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap; justify-content: space-between; align-items: stretch;}
  .proBox li { width: 25%; }
  .proBox2 li { width: 100%; }

  .proBox .lib { cursor: pointer; position: relative; z-index: 0; display: block; 
  margin:1em 4% 0.6em; 
  color: #000e33;
  background:#fff; padding: 10% 7% 10% 6%; transition: all 0.6s;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap; justify-content: space-between; align-items: center;  }
 .proBox .lib:hover { top: -1px; background-color: #e7f6ff;
   -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
   -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
   box-shadow: 0 0 1em rgba(0, 0, 0, .1);}
 .proBox .picb { overflow: hidden; width: 40%; }
 .proBox .pic { display: block; padding-top: 85%; height: 0; overflow: hidden;
  background: center center no-repeat; background-size:contain; }
 .proBox .name {display: block; color: #333; 
  font-size: 14px; line-height: 1.5em;  flex: 1;
  }

.main { max-width: 1680px;  width: 100%; margin: 0 auto 5.6em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
align-items: stretch; 
}
.benefit-tabs_component {
  grid-template-rows: auto;
  grid-template-columns: 2fr 1fr;
  grid-auto-columns: 1fr;
  align-items: stretch;
  display: flex
}

.benefit-tabs_menu {
  width: 40%;
  flex-direction: column;
  flex: none;
  order: 1;
  display: flex
}

.benefit-tabs_link {
  width: 100%;
  color: #283050;
  cursor: pointer;
  background-color: transparent;
  border-bottom: 1px solid rgba(0,0,0,.15);
  flex-direction: column;
  align-self: stretch;
  padding: 1.5rem;
  display: flex;
  position: static;
  overflow: hidden
}

.benefit-tabs_link:hover {
  color: #4970ff
}

.benefit-tabs_link:focus-visible {
  outline-offset: 0px;
  outline: 3px solid #283050
}

.benefit-tabs_link[data-wf-focus-visible] {
  outline-offset: 0px;
  outline: 3px solid #283050
}

.benefit-tabs_link.w--current {
  color: #4970ff;
  background-color: #fff;
  box-shadow: 0 8px 64px rgba(0,0,0,.08)
}

.benefits-tabs_pane {
  height: 100%
}

.benefit-tabs_content {
  width: 60%;
  min-height: 35rem;
  flex: none;
  padding-right: 2rem
}

.benefit-tabs_image {
  width: 100%;
  border-radius: 12px;
  flex: none
}

.benefit-tabs_link-details {
  width: 100%
}


.main .mainL { position: relative; z-index: 0; width: 48.5%}
.main2 .mainL2 { position: relative; z-index: 0; width: 28.5%;}

.main6 .mainL6 { position: relative; z-index: 0; width: 28.5%;}




.main3  { position: relative; z-index: 0; width: 38.5%;  --myVar: opacity(0.12); }

.main3:before{
  background-image: url(../imgs/58365a7bc2.jpg);
  background-size: cover;
  width:100%;
  height:100%;
  content:'';
  position:absolute;
  left:0;
  top:0;
z-index:-1;
filter: var(--myVar);

}



.content-container2 {
  display: flex;

}
.content-container2 > * {
  width: 50%;
}


.main .mainC {  position: relative; z-index: 0;}
.main .mainR {width: 20%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap; flex-direction: column;
align-items: stretch; }


.videoBox video { display: block; width: 100%; height: auto;}
.videoBox img { width: 100%; height:auto;}
.videoTxt { position: absolute; left: 0; bottom: -2.1em; margin-top: 0.6em; 
 line-height: 1.4em; height: 1.4em; text-align: left;
 overflow: hidden;}
 
.videoBox { position: relative; z-index: 0; overflow: hidden;
}
#video1 { height:auto;}
.videoBox .hdk-btn { cursor:pointer; z-index:100; position:absolute; top:50%; left:50%; margin-left:-1.4em;
 margin-top:-1.4em; width:2.8em; height:2.8em; background:url(../imgs/play.png) center center no-repeat; background-size:cover;}
.videoBox .hdk-btn-stop { background-image:url(../imgs/stop.png)}
.videoBox .hdk-video-mask {z-index:90; position:absolute; top:0%; left:0%;width:100%; height:100%;
}
.videoBox .hdk-video-pic {z-index:80; position:absolute; top:0%; left:0%;width:100%; height:100%; background: center center no-repeat; background-size:cover;
}
.videoBox .hdk-btn-stop { display:none;}
.videoBox:hover .hdk-btn-stop { display:block;}

.main .mainL .btnw { overflow: hidden; flex: 1; margin-top: 0.5em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap; flex-direction: row;
align-items: stretch; justify-content: space-between;
}
.main .mainL .csBtn { font-size: 1.3em; display: block; cursor: pointer;
 width: 48.3%; height:100%; color: #fff;
 background: url(../imgs/csbtn.jpg) center center no-repeat; background-size:cover;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 align-items: center;justify-content: center;
 -moz-border-radius:0.4em; -webkit-border-radius:0.4em; border-radius:0.4em;
 }
.main .mainL .gkBtn {font-size: 1.3em;  display: block; cursor: pointer;
width: 48.3%;  height: 100%; color: #fff;
 background: url(../imgs/gkbtn.jpg) center center no-repeat; background-size:cover;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 align-items: center;justify-content: center;
  -moz-border-radius:0.4em; -webkit-border-radius:0.4em; border-radius:0.4em;
 }
.main .mainR .aboutBtn,.main .mainR .recrBtn { position: relative; z-index: 0;
font-size: 1em;  display: block; cursor: pointer; overflow: hidden;
 height: 48%; color: #fff;
 background: center center no-repeat; background-size:cover;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 align-items: center;justify-content: center;
  -moz-border-radius:0.4em; -webkit-border-radius:0.4em; border-radius:0.4em;
}
.main .mainR .aboutBtn::before,.main .mainR .recrBtn::before {
position: absolute; left: 0; top: 0; z-index: -1;
display: block; content: "";
 width: 100%; height: 100%; 
 background:#000;
 filter:Alpha(opacity=40);
 background: rgba(0, 0, 0, 0.4)
 }
.main .mainR .aboutBtn {background-image: url(../imgs/aboutbtn.jpg); }
.main .mainR .recrBtn {background-image: url(../imgs/recrbtn.jpg); }
.main .mainR .txtb { position: relative; z-index: 1; color: #fff;}
.main .mainR .txtb .t1 { display: block; letter-spacing: 0.3em; font-size: 1.3em;}
.main .mainR .txtb .t2 { text-transform: uppercase; font-size:0.8em;}

.main .mainR .btn { cursor: pointer; position: relative; z-index: 0; display: block;
 margin:0; color: #000e33;
  background:#eee; padding: 0 7% 0 6%; height: 47.8%; transition: all 0.6s;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap; justify-content: space-between; align-items: center;  }
.main .mainR .btn:hover { top: -1px; background-color: #e7f6ff;
   -moz-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
   -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, .1);
   box-shadow: 0 0 1em rgba(0, 0, 0, .1);}
.main .mainR .btn .picb { overflow: hidden; width: 40%; }
.main .mainR .btn .pic { display: block; padding-top: 85%; height: 0; overflow: hidden;
  background: center center no-repeat; background-size:contain; }
.main .mainR .btn .name { max-width: 50%; display: block; color: #333; 
  font-size: 14px; line-height: 1.5em; text-align: center;}

.newBox { text-align: left;}
.newBox .list .pic { display: block; cursor: pointer; padding-top: 56.5%; height: 0;
 overflow: hidden;
background: center center no-repeat; background-size:cover;
-moz-border-radius:0.5em; -webkit-border-radius:0.5em; border-radius:0.5em;}
.newBox .list .txtb {text-align: left; padding: 0 0.3em;}
.newBox .list .name { margin-top: 0.6em;  font-size: 20px; font-weight: bold;
 line-height: 1.4em; height: 1.4em;
 overflow: hidden;
 text-overflow:ellipsis;
 display:-webkit-box; 
 -webkit-box-orient:vertical;
 -webkit-line-clamp:2;}
.newBox .list .intro { margin-top: 0.5em; font-size: 14px; color: #515050; line-height: 1.4em; height: 1.4em;
overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:2; }
.newBox .list .btn { margin-top: 0.5em; display: inline-block; padding: 0 1.7em;
 background-color: #066fd2; color: #fff; line-height: 2.4em;
 -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
 -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
 box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
 transition: all 0.4s;}
.newBox .list .btn:hover { background-color: #fff; color: #066fd2;}

.newBox { text-align: left; height: 100%;}
.newBox .list2 { height: 100%; overflow: hidden; font-size: 14px;}
.newBox .list2 ul {height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap; justify-content:  space-around; flex-direction: column;}
.newBox .list2 li { position: relative; z-index: 0;  line-height:1.4em; height: 1.4em;
 overflow: hidden; padding-left: 1.3em;}
.newBox .list2 li::before { position: absolute; left: 0.2em; top: 50%; content: "";
background-color: #000; margin-top: -0.2em; width: 0.4em; height: 0.4em;
-moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;
}
/* 
.newBox .list2 .btn { position: absolute; z-index: 0; left: 0; bottom: -2.3em;
 margin-top: 0.5em; display: inline-block; padding: 0 1.7em;
  background-color: #066fd2; color: #fff; line-height: 1.8em;
  -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
  transition: all 0.4s;}
.newBox .list2 .btn:hover { background-color: #fff; color: #066fd2;} */
.newBox .list2 .btn { position: absolute; z-index: 0; left: 0; bottom: -2.3em;
 display: inline-block; color: #066fd2; line-height: 1.8em; transition: all 0.4s;}
.newBox .list2 .btn:hover { color: #003a71;}

@media only screen and (max-width:1710px) {
.newBox .list .name { margin-top: 0.5em;}
.videoTxt {margin-top: 0.5em;}
.newBox .list .intro { margin-top: 0.4em;}
}

@media only screen and (max-width:1660px) {
.newBox .list .name { font-size: 19px;}
.newBox .list .intro {font-size: 13px;}
.newBox .list .btn { font-size: 15px;}


.newBox .list2 .btn,.videoTxt {font-size: 15px;}
}

@media only screen and (max-width:1420px) {
.proBox .list .pic img { width: 70px; height: 70px;}
}

@media only screen and (max-width:1340px) {
.newBox .list .name { font-size: 18px;}
.newBox .list .intro {font-size: 12px;}
.newBox .list .btn { font-size: 14px;}
.proBox .picb { width: 35%;}
.proBox .name { font-size: 12px;}

.newBox .list2 .btn,.videoTxt {font-size: 12px;}
}
@media only screen and (max-width:1240px) {
.proBox .list .pic img { width: 60px; height: 60px;}
}


@media only screen and (max-width:1140px) {
.newBox .list .name { font-size: 17px;}
.newBox .list .intro {font-size: 12px;}
.newBox .list .btn { font-size: 13px;}

.newBox .list2 .btn,.videoTxt {font-size: 13px;}
}

@media only screen and (max-width:1080px) {
.newBox .list .name { font-size: 16px;}
.newBox .list .intro {font-size: 12px;margin-top: 0.3em;}
.newBox .list .btn { font-size: 12px;}

.newBox .list2 .btn,.videoTxt {font-size: 12px;}
}
@media only screen and (max-width:1024px) {
.bannerBox { height: 528px;}
}