﻿@charset "utf-8";
/*index header*/
header{height: 80px; box-shadow:0 0 0 rgba(0,0,0,0.5); position: fixed; left: 0; top: 0; width: 100%; z-index: 300; overflow: hidden;}
header:before{content: ""; display: block; width: 0; opacity: 0; height: 100%; border-radius: 40px; background: #fff; transition: all .8s; position: absolute; left: 50%; top: 0;}
.logo{float: left; line-height: 80px; display: table; height: 100%; margin-left: 2%;}
.logo a{display: table-cell; vertical-align: middle;}
.header{float: right;}
.header_nav{float: left;}
.header_nav a{color: #fff; float: left; margin-right: 50px; line-height: 80px; font-size: 16px;}
.header_nav a:hover{color: #000;}
header.on{box-shadow:0 0 10px rgba(0,0,0,0.5);}
header.on .header_nav a{color: #333;}
header.on .header_nav a:hover{color: #f35b07;}
header.on:before{width: 120%; left: -10%; opacity: 1; z-index: -1;}

.mobile_btn{cursor:pointer;display: flex;z-index: 4;justify-content: center;align-items: center;box-sizing: border-box;width: 80px;height: 80px;float: right;background: #325f99;}
.mobile_btn.on .line1{transform:rotate(45deg);transform-origin:14% 50%;}
.mobile_btn.on .line2{width:0;}
.mobile_btn.on .line3{transform:rotate(-45deg);transform-origin:14% 50%;}
.mobile_btn span{display:block; width:26px; height:3px; background:#fff; transition:all .45s;}
.mobile_btn .line2{margin:5px 0;}
.slide_box{background: #fff; width: 350px; height: 100%; position: fixed; right: 0; top: 80px; padding: 50px; box-sizing: border-box; transform: translateX(100%); transition: all .6s; z-index: 101;}
.slide_box.active{ transform: translateX(0);}
.z_mask{ width: 0; height: 100%; position: fixed;  left: 0; top: 0; background: rgba(0,0,0,.8); transition: all .8s; z-index: 101;}
.z_mask.active{width: 100%;}
.slide_tit h3{ font-size: 30px; color:#496ea1;}
.slide_tit{ padding-bottom: 25px; border-bottom: 1px solid #cccccc; margin-bottom: 25px;}
.slide_nav li{ margin-bottom: 20px;}
.slide_nav li>a{ font-size: 15px; }
.slide_nav .nav_down{ margin-top: 5px;}
.slide_nav .nav_down a{ color: #888; display: inline-block; margin-right: 20px; position: relative; line-height: 20px;}
.slide_nav .nav_down a:before{ content:""; display: block; width: 0; transition: all .6s; height: 1px; background: #325F99; position: absolute; left: 50%; bottom: 0;}
.slide_nav .nav_down a.active,.slide_nav .nav_down a:hover{ color: #325F99;}
.slide_nav .nav_down a.active:before,.slide_nav .nav_down a:hover:before{ width: 100%; left: 0;}
@media screen and (max-width: 1440px){.about .right .about_txt h3{}
    .logo{ width: 25%;}
    .logo a img{ width: 100%;}
    .header_nav a{ margin-right: 30px;}
    .search:hover .text{ width:100px;}}
@media screen and (max-width: 1024px){
    .logo{ width: 40%;}
    .header_nav{ display: none;}}
@media screen and (max-width: 480px){
    .slide_nav li>a{ font-size: 20px; border-bottom:1px solid #fff; display: inline-block;}
    header{ height: 50px;}
    .logo{ width: 60%;}
    .search{ display: none;}
    .mobile_btn{ width: 50px; height: 50px;}
    .slide_tit{ display: none;}}

/*banner*/
.swiper-slide{text-align: center;width: 100%;overflow: hidden;font-size: 18px;background: #fff;position: relative;left:0;top:0;}
.swiper-wrapper .img-box img{position: relative;width: 100%;min-width:1440px; height: 100%;}
.banner_txt{position: absolute; left: 33%; top: 50%; z-index: 999; color: #fff;}
.banner_txt h2{font-size: 50px; margin-bottom: 20px; font-weight: bold; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);}
.banner_txt h3{font-size: 30px; font-weight: bold; text-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);}
.slide .banner_txt{transform: translateY(-50%); z-index: 10; color: #fff;}
.slide h2{visibility: hidden; opacity:0;transition:ease 3s; transition-delay: .5s; transform: scale(.2,.2);}
.slide h3{visibility: hidden; transform: scale(.6,.6); opacity:0; transition: ease 3s; transition-delay:.8s;}
.slide.swiper-slide-active .banner_txt h2,
.slide.swiper-slide-duplicate-active .banner_txt h2,
.slide.swiper-slide-active .banner_txt h3,
.slide.swiper-slide-duplicate-active .banner_txt h3{visibility: visible; opacity: 1; transform: scale(1,1);}

