/* 首页 */
html, body {
    position: relative;
}
body {
    font-family: "PingFang SC","Hiragino Sans GB",STHeiti,"Microsoft YaHei","WenQuanYi Micro Hei",Arial,sans-serif;;
    font-size: 14px;
    color:#000;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
a:hover{
    text-decoration: none;
}
li{
    list-style: none;
}


.navbar{
    background-color: rgba(0,0,0,0);
    border-color: #e7e7e7;
    border-radius: 0;
    margin-bottom: 0;
    position: absolute;
    border: 0;
    border-bottom: 1px solid #eeeeee3d;
    z-index: 99;
    width: 100%;
    padding-top: 20px;

}
.navbar-header{
    padding-bottom: 18px;
}
.main_banner{
    position: relative;
}

.main_banner video{
    width: 100%;
}
.container-fluid{
    width: 80%;
}
.navbar-default .navbar-nav > li > a{
    text-transform: uppercase;
    font-size: 14px;
    color: #fff;
    padding: 0 0 18px 0;
    text-align: center
}
.navbar-default .navbar-nav > li > a:hover{
    color: #fff;
    border-bottom: 3px solid #4acaff;
}
.navbar-default .navbar-nav > li > span{
    display: block;
    font-size: 12px;
    text-align: center;
    color: #fff;
}
.navbar-nav > li{
    margin-left: 30px;
}
.navbar-brand > img{
    height: 100%;
}
.navbar-brand{
    height: 40px;
    padding: 0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
    padding-right: 0;
}

.hero-content {
    position: absolute;
    width: 100%;
    z-index: 0;
    bottom: 0;
}
.hero-content .component {
    margin: 0;
    padding: 0;
}
.section-container {
    margin: 0 10.5%;
}
.component .section-container {
    padding-bottom: 50px;
}
.bodyCopy-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
}
.visual-element {
    display: inline-block;
    width: 13.9%;
    height: 4px;
    background-color: #fff;
    margin-top: 25px;
    margin-right: 5.5%;
}
.body-copy {
    position: relative;
    width: 60%;
}
.hero-content .visual-element{
    background-color: #fff;
}
.hero-content .body-copy>h1, .hero-content .body-copy>h2 {
    margin-bottom: 7px;
    font-size: calc(48.83px + .3vw)!important;
    color: #fff;
    margin-top: 0;
    letter-spacing: 4px;
}
.hero-content .copy-container h2 {
    margin-bottom: 0!important;
    padding-bottom: 0!important;
    color: #fff;
    font-weight: 300;
    letter-spacing: 4px;
    line-height: 40px;
}
.component {
    padding: 60px 0;
}
.author-details, .bodyCopy-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    position: relative;
}
.video-transcript .visual-element, .visual-element {
    display: inline-block;
    width: 13.9%;
    height: 3px;
    background-color: #66b1ba;
    margin-top: 25px;
    margin-right: 5.5%;
}
.large, .hero-module .hero-content p {
    font-size: calc(25px + .3vw) !important;
}
.body-copy p{
    font-size: calc(16px + .3vw);
    line-height: 1.75;
    color: #39393a;
    font-weight: 300;
    text-align: justify;
}
.main_ico p{
    color: #66b1ba;
}
.main_ico span{
    color: #66b1ba;
    line-height: 24px;
}
.main_ico svg{
    width: 60px;
}
.mr0{
    margin-right: 0;
}
.sec_1 .section-container{
    padding-bottom: 0;
}
.sec_1_2 .visual-element{
    background-color: rgba(0,0,0,0);
}
.sec_1_2 .body-copy{
    width: 70%;
}
.sec_1_2{
    margin-top: 20px;
}
.main_sec_3{
    background: url(../images/main_ad.jpg);
    background-size: cover;
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    padding: 60px 0;
}
.main_sec_3 .visual-element{
    background-color: #fff;
}
.main_sec_3 .body-copy p{
    color: #fff;
}
.main_sec_3 .col-md-3 {
    text-align: center;
}
.main_sec_3 .col-md-3 p{
    font-family: Square721 Cn BT,Arial;
    font-size: 50px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}
.main_sec_3 .col-md-3 span{
    color: #fff;
}
.main_sec_3 .body-copy{
    width: 70%;
}
.main_sec_4{
    margin: 60px 0 30px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 30px;
}

.swiper-container-case {
    padding-bottom:40px;
    margin-top: 30px;
    
}

.swiper-container-case .swiper-slide {
    width:978px;
    transition-timing-function:linear;
}
.swiper-container-case .swiper-slide {
    width:470px;
}
@media only screen and (max-width:1200px){
    .swiper-container-case .swiper-slide {
        width:470px;
    }
}
@media only screen and (max-width:980px){
    .swiper-container-case .swiper-slide {
        width:471px;
    }
}
@media only screen and (max-height:480px){
    .swiper-container-case .swiper-slide {
        width:471px;
    }
}
.swiper-container-case .swiper-slide img{
    width:100%;
    border-radius: 4px;}
.swiper-container-case .swiper-slide .title{
    position:absolute;
    transform:rotate(90deg);
    transform-origin:left top;
    left:-3px;
    font-size:11px;
    color: rgb(102, 102, 102);}	
.swiper-container-case .swiper-button-next, .swiper-button-prev{
    width:86px;
    height:112px;
    background-size:86px 112px;
    margin-top:-56px;
    outline:none;}
	
.swiper-container-case .swiper-pagination-bullet{
    background:none;
    opacity:1;
    margin:0 6px !important;
    width:9px;
    height:9px;
    position:relative;
    outline:none;
    vertical-align:middle;}
.swiper-container-case .swiper-pagination-bullet span{
    width:3px;
    height:3px;
    background:#CCC;
    display:block;
    border-radius:50%;
    margin-top:3px;
    margin-left:3px;
}
.swiper-container-case .swiper-pagination-bullet i{
    background:#000;
    height:1px;
    width:20px;
    position:absolute;
    top:4px;
    transform:scaleX(0);
    transform-origin:left;
    z-index:3;
    transition-timing-function:linear;
    }
.swiper-container-case .swiper-pagination-bullet-active span,.swiper-pagination-bullet:hover span{
    width:9px;
    height:9px;
    margin-top:0;
    margin-left:0;
    background:#000;
    position:relative;
    z-index:1;
    }
.swiper-container-case .swiper-pagination-bullet-active i{
    animation:middle 6s;
    }
.swiper-container-case .swiper-pagination-bullet:first-child.swiper-pagination-bullet-active i{
    animation:first 6s;
    }
.swiper-container-case .swiper-pagination-bullet:last-child.swiper-pagination-bullet-active i{
    animation:last 6s;
    }	
.swiper-container-case  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: 40px;
}			
@keyframes first{
  0% {transform:scaleX(0.5);left:0px;}/*091*/
  100% {transform:scaleX(1);left:2px;} /*0915*/
}
@keyframes last{
  0% {transform:scaleX(0.7);left:-10px;}/*1090*/
  20% {transform:scaleX(0.3);left:2px;} /*090*/
  100% {transform:scaleX(0.3);left:0px;} /*090*/
}		
@keyframes middle{
  0% {transform:scaleX(0.7);left:-10px;}/*1091*/
  20% {transform:scaleX(0.45);left:2px;}/*092*/
  100% {transform:scaleX(1);left:2px;} /*0913*/
}	
.main_sec_5 .col-md-3 img{
    width: 100%;
    border-radius: 4px;
    height: 200px;
}
.main_news_wrap{
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    border-radius: 4px;
    padding: 10px 10px 20px;
}
.main_news_wrap a{
    color: #666;
    
}
.main_news_wrap a p{
    font-size: 14px;
    margin-top: 10px;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}
.main_news_wrap a span{
    background: #66b1ba;
    color: #fff;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 12px;
    margin-left: 10px;
}
.main_news{
    margin-top: 30px;
}
.main_news_wrap .main_news_description{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    font-size: 12px;
    line-height: 2;
    margin-top: 5px;
}
.main_link{
    font-size: calc(14px + .2vw);
    /* line-height: 1.75; */
    color: #39393a;
    font-weight: 300;
    margin-top: 12px;
    text-align: right;
    position: absolute;
    right: 0;
    border-radius: 50px;
    background: #66b1ba;
    color: #fff;
    padding: 5px 20px;
}
.main_link:hover{
    color: #fff;
}
.main_sec_5{
    margin-bottom: 60px;
}
footer {
    background: url(../images/footer.jpg) no-repeat;
    background-size: cover;
    padding: 30px 0 20px;
    color: #fff;
}
footer .container {
    padding-bottom: 25px;
}
.coypright {
    text-align: center;
    padding: 15px 0 0;
    border-top: 1px solid rgba(255,255,255,.2);
}
footer a{
    color: #fff;
}
footer p{
    margin-bottom: 0;
}
footer{
    text-align: center;
}
.footer_left{
    margin: 20px auto;
    width: 50%;
    line-height: 1.8;
}
.n_banner{
    width: 100%;
}
.n_banner img{
    width: 100%;
}
.news_wrap{
    border-radius: 4px;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    padding: 10px 15px 10px 10px;
    margin: 10px 0;
}
.news_wrap img{
    width: 100%;
    height: 140px;
    border-radius: 4px;
}
.news_wrap p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    font-size: 14px;
    line-height: 2;
    color: #666;
}
.news_wrap .news_wrap_title{
    color: #333;
    font-size: 16px;
    padding: 10px 0 0;
    /* margin-bottom: 10px; */
    display: inline-block;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
}
.news_wrap .news_wrap_link{
    background: #4acaff;
    color: #fff;
    padding: 5px 20px;
    border-radius: 4px;
}
.n_wrap{
    margin: 50px 0;
}
.news_wrap:hover .news_wrap_title{
    color: #4acaff;
}
.page_bar{
    padding-top: 20px;
    clear: both;
    text-align: center;
}
.page_bar span{
    border: 1px solid #eee;
    padding: 5px 10px;
    margin: 0 2px;
    color: #666;
}
.page_bar span.page-numbar{
    border: 0;
}
.page_bar span a{
    color: #666;
}
.page_bar span.page-numbar a{
    border: 1px solid #eee;
    padding: 5px 10px;
    margin: 0 2px;
    color: #666;
}
.n_title p{
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.n_wrap img{
    max-width: 100%;
}
#columns {
    column-width: 420px;
    column-gap: 15px;
    width: 100%;
    margin: 0px auto;
}

div#columns figure {
    background: #fefefe;
    border: 2px solid #fcfcfc;
    box-shadow: 0 0px 5px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    padding: 15px;
    padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
    display: inline-block;
    column-break-inside: avoid;
    border: 1px solid rgba(0,0,0,.1);
}

div#columns figure img {
    width: 100%; height: auto;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

div#columns figure figcaption {
  font-size: .9rem;
    color: #444;
  line-height: 1.5;
}

div#columns small { 
  font-size: 1rem;
  float: right; 
  text-transform: uppercase;
  color: #aaa;
} 

div#columns small a { 
  color: #666; 
  text-decoration: none; 
  transition: .4s color;
}

div#columns:hover figure:not(:hover) {
    opacity: 0.4;
}

@media screen and (max-width: 750px) { 
  #columns { column-gap: 0px; }
  #columns figure { width: 100%; }
}