*:not(.layui-layer){
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -ms-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s}

.navbar {background: rgba(35, 38, 55, .8);}
.navbar .navbar-nav .nav-link {color: #fff;}
.navbar .navbar-nav .active>.nav-link {color:rgba(111, 163, 264, 1);border-bottom: 1px rgba(111, 163, 264, 1) solid;}

.cooperation-item:hover div:first-child {opacity: 0;}
.cooperation-bottom {background: #4facfe}

h2, .h2, h5, .h5{color: #222D39;}

.shadow-hover:hover {
    -webkit-box-shadow: 0 0 10px #677294;
    -moz-box-shadow: 0 0 10px #677294;
    box-shadow: 0 0 10px #677294;
}
.nav .active{
    position:relative;
}
.nav .active:after{
    content: '';
    position:absolute;
    bottom: 0;
    width:50%;
    height: 2px;
    background-color: #4FACFE;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

dt {
    position: relative;
}
dt:before {
    content: '';
    position:absolute;
    width: 16px;
    height: 8px;
    left: -2.2rem;
    border-radius: 2px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    background: #fff;
}
dt:after {
    content: '';
    position:absolute;
    width: 0;
    height: 0;
    left: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-top: 4px solid transparent;
    border-left: 8px solid #fff;
    border-bottom: 4px solid transparent;
}
.text-break-all{    word-break: break-all}
.cursor{cursor:pointer}

html,body{ width:100%; height:100%; overflow:hidden;color: #677294;}

ul{list-style: none}

.section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}

.section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}

.section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center;}

.section-wrap .section .title p{ padding:0 4%;opacity:0}

.section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}

.section-wrap .section-1{background: url("../img/banner@2x.png") center center no-repeat;background-size: cover;}

.section-wrap .section-2{ background-color:#5cb85c}

.section-wrap .section-3{}

.section-wrap .section-4{background: url("../img/img_bg01@2x.png") center center no-repeat;background-size: cover;}

.section-wrap .section-6{ background: url("../img/img_bg02@2x.png") center top; background-size: cover;}

.put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}

.put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}

.put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}

.put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}

.put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
.put-section-5{ transform:translateY(-500%);-webkit-transform:translateY(-500%);}
.put-section-6{ transform:translateY(-600%);-webkit-transform:translateY(-600%);}

.section-btn{ width:14px;position:fixed;right:4%;top:50%;transform: translateY(-50%);-webkit-transform:translateY(-50%);}

.section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#cae6ff;text-align:center; color:#fff; onsor:pointer;}

.section-btn li.on{ background:#4facfe}

.arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:55px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}

.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}


.section-2 .tab-content .tab-pane .row .col-3 div {
    height: 280px;
}
.section-2 .tab-content .tab-pane .row .col div:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1 );
}
.section-2 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #0051FF;
    background: none;
}
.section-2 .nav-pills .nav-link.active:after{
    content: '';
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    width: 100%;
    height: 100%;
    background: #F2F4F7;
    transform: perspective(1rem) rotateX(3deg);
}
.section-3 .row .col>div{
    height: 300px;
}
.section-3 .row .col div div{
    display: none;
    top: 0;
    left: 0;
    background: #0051FF;
}
.section-3 .row .col div div h5:after{
    content: '';
    width: 80px;
    height: 2px;
    background: #fff;
    display: block;
    margin: 18px auto 13px;
}
.section-3 .row .col div:hover div{
    display: block;
}
.section-4 .row .col>div{
    height: 400px;
}
.section-4 .row .col div div{
    display: none;
    top: 0;
    left: 0;
    background: #0051FF;
}
.section-4 .row .col div div h5:after{
    content: '';
    width: 80px;
    height: 2px;
    background: #fff;
    display: block;
    margin: 18px auto 13px;
}
.section-4 .row .col div:hover div{
    display: block;
}

.section-5 .care {
    bottom: 0;
    left: 0;
    background: rgba(0, 81, 255, .7);
    color: #fff;
    padding: 1rem;
    width: 100%;
    font-size: 14px;
    height: 74px;
}
.section-5 .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #0051FF;
    background: none;
}
.section-5 .nav-pills .nav-link.active:after{
    content: '';
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    width: 100%;
    height: 100%;
    background: #F2F4F7;
    transform: perspective(1rem) rotateX(3deg);
}



@keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }

@-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }