/* 说明

    css.css存放内页样式

    index.css存放主页样式

    style.css存放最初就设定为通用的样式

    大部分通用动画会在style.css

*/

/* 样式初始化和通配样式 */

@font-face {

    font-family: 'myfont';

    font-display: swap;

    src: url('./Montserrat-Medium.otf'); 

}

/* @font-face {

    font-family: 'fontBold';

    font-display: swap;

    src: url('./PINGFANG_HEAVY.TTF'); 

} */

body,div,span,h1,h2,h3,h4,h5,h6,p,a,ol,ul,li,img,form,dl,dt,dd,input,input{ margin: 0 ;padding: 0; font-size:100%; font-style:normal; font-weight: normal;line-height: 1.8em;}

*{ margin: 0 ;padding: 0;}

body{font-family:"myfont";}

img,fieldset{ border:0 none; display:block;}

a{color: inherit;text-decoration: none;}

ol,ul{list-style:none;}

input{outline:medium;}







.mainShow{padding-top: 140px;}





.fenye{text-align: center;}

.fenye>div{display: inline-block; width: auto !important;}

.fenye>div a{display: inline-block; width: 40px; height: 40px; border: 1px solid #194089; line-height: 38px; box-sizing: border-box; margin: 0 7px; color: #194089;}

.fenye>div a:hover{background-color: #ededed !important;}

.fenyeC{background-color: #ededed !important;}



.showNext{display: flex; justify-content: space-between;}

.showNext a{position: relative; line-height: 35px; font-size: 1.35rem; color: #395795; font-weight: bold;}

.showNext a{opacity: .5; -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

.showNext a:hover{opacity: 1;  -webkit-filter: none}

.showNext a::after{opacity: .5; -webkit-filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);}

.showNext a:hover::after{opacity: 1;  -webkit-filter: none}

.showNext a::after{position: absolute; top: 50%; transform: translate(0,-50%); content: ""; width: 35px; height: 20px; background: url("../img/ico/jiantou.png") no-repeat center; background-size: 35px 20px;}

.showNext a:nth-child(1){padding-left: 50px;}

.showNext a:nth-child(1)::after{left: 0; transform: translate(0,-50%) rotate(-90deg) scale(.8); }

.showNext a:nth-child(2){padding-right: 50px;}

.showNext a:nth-child(2)::after{right: 0; transform: translate(0,-50%) rotate(90deg) scale(.8); }



@media (max-width:750px){

    .mainShow{padding-top: 80px;}

    .showNext{display: block;}

    .showNext a{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; position: relative; overflow: hidden; margin-bottom: 30px;}

}



.swiper-slide img{max-width: 100%;}

::-webkit-scrollbar { /*滚动条整体样式横竖滚动条的尺寸*/ width: 0;  height: 2; } 



@media (min-width:750px){

.ShowHeader{background: #1a2c38; height: 140px; width: 100%;}

    header{position: fixed;  z-index: 15;}

    nav{height: 100vh; position: fixed; z-index:15; display: none; box-sizing: border-box; padding-top: 70px; width: 460px; right: 0; z-index: 3; background: #f5f5f5;}

    .navC{color: #194089 !important;}

    nav ul h1{line-height: 60px;font-size: 1.35rem; transition: all 0.5s;}

    nav ul{border-bottom: 1px solid #194089; color: #999999; margin: 0 auto; width: calc(100% - 80px);}

    nav ul:hover h1{color: #194089; }

    nav ul>li{line-height: 2.2em; font-size: 1.0125rem; display:none ; padding-left: 15px; position: relative;}

    nav ul>li::after{position: absolute; left: 5px; top: 50%; transform: translate(0,-50%); width: 3px; height: 3px; background: #999999; content: "";}

    nav ul>li:hover::after{background: #194089;}

    nav ul>li:hover{color: #194089; }

    .logo{position: fixed;top: 30px; left: 45px;}

    .logo img{width: 250px;}

}

@media (max-width:750px){

    .ShowHeader{background: #1a2c38; height: 80px; width: 100%;}

    header{position: fixed;  z-index: 3;}

    nav{height: 100vh; position: fixed; display: none; box-sizing: border-box; padding-top: 55px; width: 100vw; right: 0; z-index: 3; background: #f5f5f5;}

    .navC{color: #194089 !important;}

    nav ul h1{line-height: 60px;font-size: 1.35rem; transition: all 0.5s;}

    nav ul{border-bottom: 1px solid #194089; color: #999999; margin: 0 auto; width: calc(100% - 80px);}

    nav ul:hover h1{color: #194089; }

    nav ul>li{line-height: 2.2em; font-size: 1.0125rem; display:none ; padding-left: 15px; position: relative;}

    nav ul>li::after{position: absolute; left: 5px; top: 50%; transform: translate(0,-50%); width: 3px; height: 3px; background: #999999; content: "";}

    nav ul>li:hover::after{background: #194089;}

    nav ul>li:hover{color: #194089; }

    .logo{position: fixed;top: 20px; left: 20px;}

    .logo img{width: 150px;}

}



@media (min-width:750px){

    

.shouNav{position: fixed; top: 140px; width: 100%; z-index: 13; display: flex; justify-content: space-between; background: #eeeeee;}

.shouNav h1{padding-left: 90px; font-size: 2.7rem; font-weight: bold; line-height: 90px;}

.shouNav div{padding-right: 45px; }

.shouNav div a{padding: 0 30px; display: inline-block; border: 2px solid #999999; transition: all .5s; color: #999; margin: 35px 0; margin-right: 20px; border-radius: 5px;}

.shouNav div a:hover{ border: 2px solid #194089; color: #194089;}

.shouNavC{ border: 2px solid #194089 !important; color: #194089 !important;}

}



@media (max-width:750px){

    

    .shouNav{background: #eeeeee; transition: all .5s;}

    .shouNav h1{ font-size: 1.7rem; font-weight: bold; line-height: 70px;text-align: center;}

    .shouNav div{text-align: center; display: none;}

    .shouNav div a{padding: 0 30px; display: inline-block; border: 2px solid #999999; transition: all .5s; color: #999; margin: 10px 0; margin-right: 20px; border-radius: 5px;}

    .shouNav div a:hover{ border: 2px solid #194089; color: #194089;}

    .shouNavC{ border: 2px solid #194089 !important; color: #194089 !important;}

    }

    





@media (min-width:750px){

    footer{background: #1a2c38;}

    .footer1{width: 82.3%; margin: 0 auto; display: flex; justify-content: space-between; color: #fff; padding: 45px 0; position: relative;}

    .footerForm{width: 280px;}

    .footerForm input{background: rgba(0,0,0,0); box-shadow: none; border:1px solid #fff;}

    .footerForm textarea{background: rgba(0,0,0,0); width: 100%; border:1px solid #fff; height: 85px; color: #fff;}

    .footerForm div h1{line-height: 45px;}

    

    .footerForm input[type="Email"]{border: none; border-bottom: 1px solid #fff; width: 100%; color: #fff;}

    .footerForm input[type="Submit"]{border: 1px solid #fff; background: #fff; width: 100px; height: 35px; margin-top: 10px;}

    

    .footerAbout{display: flex; justify-content: space-between; width: 650px;}

    .footerAbout>div{width: 325px;}

    .footerAbout>ul{width:150px;}

    .footerAbout>ul>li img{padding: 10px 0;}

    .yinliu{position: absolute; bottom:60px; display: flex; justify-content: space-between; width: 150px;}

}

@media (max-width:750px){

    footer{background: #011e2c;}

    .footer1{width: calc(100% - 40px); margin: 0 auto; color: #fff; padding: 45px 0;}

    .footerForm{width: 280px;}

    .footerForm input{background: rgba(0,0,0,0); box-shadow: none; border:1px solid #fff;}

    .footerForm textarea{background: rgba(0,0,0,0); width: 100%; border:1px solid #fff; height: 85px; color: #fff;}

    .footerForm div h1{line-height: 45px;}

    

    .footerForm input[type="Email"]{border: none; border-bottom: 1px solid #fff; width: 100%; color: #fff;}

    .footerForm input[type="Submit"]{border: 1px solid #fff; background: #fff; width: 100px; height: 35px; margin-top: 10px;}

    

    .footerAbout{
        padding-top: 70px;
    }

    .footerAbout>div{width: 325px;}
    .footerAbout>div p{line-height: 1.5em;}

    .footerAbout>ul{margin-top: 20px;}

    .yinliu {display: flex; padding-top: 40px;}

    .yinliu a{padding-right: 10px;}

}







@media (min-width:750px){



    .navButton {position: fixed; display: block; width: 45px; height: 40px; right: 60px; top: 30px; cursor: pointer;}

    .navButton span{display: block; height: 4px; background: #fff;position: absolute; border-radius: 5px; transition: all 0.5s;}

    .navButton span:nth-child(1){width: 45px; top: 0;}

    .navButton span:nth-child(2){width: 35px; top: 50%; transform: translate(0,-50%);}

    .navButton span:nth-child(3){width: 25px; bottom: 0;}

    .navButton::after{content: "Menu"; position: absolute; bottom: -10px; left: 50%; color: #fff; transform: translate(-50%,100%);}

    

    .navButtonColse{z-index: 4;}

    .navButtonColse span{ margin-left: 20px; background: #194089;}

    .navButtonColse span:nth-child(1){transform: rotate(45deg) translate(0,25px);}

    .navButtonColse span:nth-child(2){display: none;}

    .navButtonColse span:nth-child(3){width: 45px; transform: rotate(-45deg) translate(0,-25px);}

    .navButtonColse::after{display: none;}

    .elseHref{position: fixed; top: 30px; width: 160px; right: 280px; display: flex; justify-content: space-between;}

    .productBt{position: fixed; top: 30px; right: 170px; height: 40px;}

    .productBt::after{content: "Product"; position: absolute; bottom: -10px; left: 50%; color: #fff; transform: translate(-50%,100%);}

}

@media (max-width:750px){



    .navButton {position: fixed; display: block; width: 45px; height: 40px; right: 20px; top: 10px; cursor: pointer; transform: scale(.8);}

    .navButton span{display: block; height: 4px; background: #fff;position: absolute; border-radius: 5px; transition: all 0.5s;}

    .navButton span:nth-child(1){width: 45px; top: 0;}

    .navButton span:nth-child(2){width: 35px; top: 50%; transform: translate(0,-50%);}

    .navButton span:nth-child(3){width: 25px; bottom: 0;}

    .navButton::after{content: "Menu"; position: absolute; bottom: -10px; left: 50%; color: #fff; transform: translate(-50%,100%);}

    

    .navButtonColse{z-index: 4;}

    .navButtonColse span{ margin-left: 20px; background: #194089;}

    .navButtonColse span:nth-child(1){transform: rotate(45deg) translate(0,25px);}

    .navButtonColse span:nth-child(2){display: none;}

    .navButtonColse span:nth-child(3){width: 45px; transform: rotate(-45deg) translate(0,-25px);}

    .navButtonColse::after{display: none;}

    .elseHref{position: fixed; width: 160px; right: 20px; bottom: 20px; display: flex; justify-content: space-between; display: none;}

    .productBt{position: fixed; top: 10px; right:90px; height: 40px; transform: scale(.8);}

    .productBt::after{content: "Product"; position: absolute; bottom: -10px; left: 50%; color: #fff; transform: translate(-50%,100%);}

}



/* 视频 */

.videoWin{position: fixed; left: 0; top: 0; z-index: 9; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); display: none;}

.videoWin video{position: fixed; left: 50%; top: 50%; z-index: 9;width: 47.1%; transform: translate(-50%,-50%);}





.videoColse{position: fixed; top: 21vh; right: 16.3vw; cursor: pointer;}

.videoColse span{position: absolute; width: 45px; height: 4px; border-radius:20px; display: block; background: #fff;}

.videoColse span:nth-child(1){transform: rotate(45deg) ;}

.videoColse span:nth-child(2){transform: rotate(-45deg) ;}

.videoList div{cursor: pointer;}

.videoList div img{width: 100%; position: relative; opacity: .6;}

.videoList div{width: 100%; position: relative; background: #000;}

.videoList div::after{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px;  background: url(../img/ico/paly.png) no-repeat; content: ""; background-size: 60px 60px;}

.videoList div:hover::after{opacity: .5;}

.videoList div:hover img{opacity: .8;}

.videoList>a{display: block; background: #fff; padding: 15px 5px;}

.videoList>a p{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}



@media (max-width:750px){

    

.videoWin video{position: fixed; left: 50%; top: 50%; z-index: 9;width: calc(100% - 40px); transform: translate(-50%,-50%);}

}