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

*{padding: 0px;margin: 0px;font-family:"思源黑体";}
*, ::after, ::before { box-sizing: border-box;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, button, input, textarea, th, td { margin: 0; padding: 0; list-style: none; }
html{ background:#fff;} 
li {list-style: none;}
a {text-decoration: none;}
body,html {height: 100%;width: 100%;font-size: 14px;}

img{vertical-align: middle;}


.icen {width: 90%; margin:0 auto; margin:0 auto;}
.icen1 {width: 100%; max-width:1400px; padding:0 15px; margin:0 auto;}
.container2 {width: 100%; max-width:1360px; padding:0 15px; margin:0 auto;}

@media (max-width: 576px) {
  .icen {max-width: 540px;}
}

@media (max-width: 768px) {
  .icen {max-width: 720px;}
}

@media (max-width: 992px) {
  .icen {max-width: 960px;}
}

@media (max-width: 1200px) {
  .icen {max-width: 1140px;}
}


.header{ width: 100%;position:fixed;z-index:10;top: 0;left:0;transition:.6s;padding:0;opacity: 1;background:rgba(0,0,0,0.4);}
.header .con{ display:flex;align-items:center;justify-content:space-between;height: 80px; padding:0 30px;}
.header .con .logo{ width:20%; position:relative;}
.header .con .logo img{ width:258px; max-width:100%; display:flex;align-items:center;}
.header .con .nav{ width:60%;}
.header .con .nav ul{ width:100%; position:relative;display: flex;justify-content:space-between;align-items:center;}
.header .con .nav ul li{ width:100%;position:relative;height: 80px; line-height:80px; text-align:center;}
.header .con .nav ul li a{ display:block; width:100%; font-size:15px;color: rgba(255,255,255,1);position:relative;transition:.6s;}
.header .con .nav ul li a:hover,.header .nav ul li.on a{color: rgba(255,255,255,0.8);}
.header .con .tel{ width:17%; color:#fff; line-height:30px; display:flex;align-items:center; justify-content: flex-end;}
.header .con .tel .img{ width:20px; margin-right:10px;}
 
 
 
/*banner*/
.banner{ width:100%; height:100vh;position:relative;}
.banner .swiper-slide { width:100%; height:100%;position:relative;}
.banner .swiper-slide .img{width:100%; height:100%;position:relative;}
.banner .swiper-slide .img::before {position:absolute;left:0; top:0;width: 100%;height: 100%;content: '';background:rgba(0,0,0,0.1);}
.banner .swiper-slide .img img{width:100%; height:100vh; z-index:0;}
.banner .hd{display: flex;flex-wrap:wrap; justify-content: flex-end;align-items: center; width:90%; position:absolute; bottom:10%; right:5%; z-index:100;}
.banner .hd span{width:50px;height:50px; margin-left:20px; border-radius:50%;transition:all .2s;cursor:pointer; z-index:5;display: flex;justify-content:center;align-items: center; background:rgba(255,255,255,0.5)}
.banner .hd span:hover{ background:rgba(255,255,255,0.8)}


/* ind01 */
.ind01 {width:100%;position: relative;margin-top:15px;}
.ind01 .img {width:100%;position: relative;}
.ind01 .img img{width:100%;}
.ind01 .more { width:200px; height:65px; line-height:65px; text-align:center; position:absolute; bottom:70px; left:50%;transform: translateX(-50%);}
.ind01 .more a { display:block; background:rgba(0,66,122,0.5); font-size:14px; color:#fff;}
.ind01 .more a:hover {background:rgba(255,255,255,0.5); color:#333;}


/* ind02 */
.ind02 {width:100%;position: relative;margin-top:15px;}
.ind02 .img {width:100%;position: relative;}
.ind02 .img img{width:100%;}


/* ind03 */
.ind03 {width:100%;position: relative;margin-top:15px;}
.ind03 .img {width:100%;position: relative;}
.ind03 .img img{width:100%;}
 
 
/* ind04 */
.ind04 {width:100%;position: relative; margin:60px auto;}
.ind04 .i_tit{ width:100%; font-size:24px; font-weight:500; position:relative; text-align:center;}
.ind04 .con {width:100%;position: relative;margin-top:50px;}
.ind04 .con ul {display: flex;flex-wrap:wrap; justify-content: space-between;align-items: center;}
.ind04 .con ul li {width: 24%; position: relative; background:#f6f6f6;}
.ind04 .con ul li::before {content: "";position: absolute;width: 0;height: 4px;left: 0;bottom: 0;background: #15569d;transition: 0.6s;-webkit-transition: 0.6s;}
.ind04 .con ul li:hover::before {width: 100%;}
.ind04 .con ul li .img{ position:relative; width:100%; overflow:hidden;} 
.ind04 .con ul li .img img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transition: 0.6s;}
.ind04 .con ul li .img .hezi{padding-bottom: 67% !important;}
.ind04 .con ul li .txt { width:100%;font-size: 20px; height:80px; line-height:30px;color:#333; position:relative; padding:10px 15px;}
.ind04 .con ul li .time { width:100%;font-size: 14px;color:#999; position:relative; padding:10px 15px 0;}
.ind04 .con ul li:hover .img img{ transform: scale(1.05);}
.ind04 .con ul li:hover .txt {color: #15569d;}
.ind04 .con ul li:hover .time {color: #15569d;}

 
 /* footer */
.footer { width:100%;position: relative;background:#373536;}
.footer .top img {width:100%;position: relative;}
.footer .fo01 {padding: 40px 0 60px;}
.footer .fo01 ul {display: flex;justify-content: center;}
.footer .fo01 ul li { width:100%;}
.footer .fo01 ul li h3 {margin-bottom: 15px;}
.footer .fo01 ul li h3 a { display: inline-block; font-size: 16px; font-weight:500; color:rgba(255,255,255,.8); position:relative;}
.footer .fo01 ul li p a{ display:block;font-size: 13px;color:rgba(255,255,255,.5);line-height:30px;}
.footer .fo01 ul li p a:hover {color:rgba(255,255,255,1);}
.footer .fo02 { width:100%; position:relative; padding:20px 0; background:#242424;}
.footer .fo02 .con { width:100%;color:rgba(255,255,255,.5);}
.footer .fo02 .con a {font-size: 14px;color:rgba(255,255,255,.5); line-height:25px;}


/*n_banner*/
.n_banner { width:100%; position:relative;}
.n_banner img{ width:100%; display:block; margin:0; padding:0;}


.n_main { width:100%; position:relative;}
.n_main .tit{font-size: 30px;color: #00427a;padding: 40px 0 20px; margin-bottom:25px; text-align:left; border-bottom:1px solid #ccc;}

.n_main .box{ display:flex;flex-wrap:wrap; justify-content:space-between;}

.n_main .nav2{width: 230px; position:relative;}
.n_main .nav2 ul li{width:100%; height:50px; line-height:50px;text-align: center;position: relative; overflow: hidden;z-index: 3;font-weight: bold; margin-bottom:1px;}
.n_main .nav2 ul li a{ display:block; width:100%; height:50px; line-height:50px; color: #000;text-align: center;position: relative; overflow: hidden;z-index: 3;font-weight: bold;font-size: 14px;}
.n_main .nav2 ul li a span{display: inline-block;position: relative;width: 0px; height: 1px;margin: 0 30px;overflow: hidden;}
.n_main .nav2 ul li a span s{display: block;width: 100%;height: 1px;background: #fff;top: 0;right: 0;}
.n_main .nav2 ul li a span.srt s{right: auto;left: 0;}
.n_main .nav2 ul li a:hover{ background: #999; color:#fff;}
.n_main .nav2 ul li a.act{ background: #999; color:#fff;}
.n_main .nav2 ul li a:hover span{width:14px;}
.n_main .nav2 ul li a.act span{width:14px;}


.n_main .n_about{width: calc(100% - 330px); margin-left:100px; text-align:justify; min-height:350px; padding-bottom:50px; line-height:30px; font-size:14px; position:relative;}
.n_main .n_about img{ max-width:100%;}
.n_main img{ max-width:100%;}


/*n_news */ 
.n_news{ width:100%; position:relative;}
.n_news ul{ width:100%; position:relative; margin-top:-25px;}
.n_news ul li{display:block;padding:30px 0; border-bottom:1px solid #e8e8ed;}
.n_news ul li:last-child{ border-bottom:none; padding-bottom:10px;}
.n_news ul li a{display:flex;}
.n_news ul li .img{ position:relative; width:20%; overflow:hidden;} 
.n_news ul li .img img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transition: 0.6s;}
.n_news ul li .img .hezi{padding-bottom: 67% !important;}
.n_news ul li .txt{ width:75%; margin-left:5%;position:relative;}
.n_news ul li .txt h1{display:block;font-size:17px; font-weight:normal;color: #00427a;margin-bottom:10px;}
.n_news ul li .txt p{line-height:23px;font-size:12px;color:#8b8b8d;height:50px; overflow:hidden;}
.n_news ul li a:hover .txt h1{color:#022456;}
.n_news ul li .more{ margin-top:10px;color:#8b8b8d; font-size:12px;}


.n_chan .icen1{display:flex;}
.n_chan .icen1 .le{ width:20%;}
.n_chan .icen1 .re{ width:80%;display:flex; justify-content: flex-end;}

 
/* vi_box */
.vi_box { position:absolute; top: 0px; left: 0px; display: none; position: fixed;width: 100%;height: 100%;z-index: 999;background-color: rgba(0,0,0,0.8);}
.vi_box .ibox {height: 100%;width: 100%; display: flex;justify-content: center;align-items: center;}
.vi_box .ibox video{  width: 100%;height: 100%; position: relative;  object-fit: cover; display: block;}
.vi_box .ibox .video {position: relative;width: 70%; height: 68%;}
.vi_box .ibox .video img.close{ cursor: pointer;width: auto;position: absolute;right: -40px;top: -40px;transition: all .3s;pointer-events: painted;}

.n_ship .item { width: 100%; margin-bottom:30px; position: relative; background:#f2f2f2; padding:5px; overflow:hidden;} 
.n_ship .item .con{ display: flex;justify-content: center;align-items: center;} 
.n_ship .item .box {width: 70%; position: relative;}
.n_ship .item .box video{ width: 100%; height: 100%; position: relative; object-fit: cover;}
.n_ship .item .box .bo { cursor: pointer; position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);   z-index: 3;}
.n_ship .item .box .bo img {width: 80px;}
.n_ship .item .box .mask {-webkit-transform: translateY(-50%) translateX(-50%);-ms-transform: translateY(-50%) translateX(-50%);transform: translateY(-50%) translateX(-50%); position: absolute; top:50%;left: 50%; z-index: 1;}
.n_ship .item .box .mask:before { position: relative; content: ''; display: block; margin-top: 100%; }
.n_ship .item .box .mask:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 50%; }
.n_ship .item .box:hover .mask{-webkit-animation:anim-out 1s;animation:anim-out 1s}
.n_ship .item .box:hover .mask:after{-webkit-animation:anim-out-pseudo 1s;animation:anim-out-pseudo 1s}
@-webkit-keyframes anim-out{0%{width:0%}100%{width:100%}}
@keyframes anim-out{0%{width:0%}100%{width:100%}}
@-webkit-keyframes anim-out-pseudo{0%{background:rgba(255,255,255,.5)}100%{background:0 0}}
@keyframes anim-out-pseudo{0%{background:rgba(255,255,255,.5)}100%{background:0 0}}
.n_ship .item .txt { width:30%; text-align:center;padding: 20px;}
.n_ship .item .txt h1{ font-size:28px; font-weight:normal; padding-bottom:20px;}
.n_ship .item .txt p{ font-size:14px;}


 
.n_mend{width:100%;position:relative;}
.n_mend .con-box{width:100%; position:relative;}
.n_mend .con-box .img{ position:relative; width:100%;} 
.n_mend .con-box .img img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit: cover;}
.n_mend .con-box .img .hezi{padding-bottom: 68% !important;}
.n_mend .con-box .button-prev{position:absolute;top:0;left:0;height:100%;width:40px;z-index:100000;display: flex;justify-content:center;align-items: center;}
.n_mend .con-box .button-next{position:absolute;top:0;right:0;height:100%;width:40px;z-index:100000;display: flex;justify-content:center;align-items: center;}
.n_mend .nav-box{position:relative;width:100%;padding:0 40px;margin-top:10px;}
.n_mend .nav-box .swiper-slide{ width:100%;}
.n_mend .nav-box .img{ position:relative; width:100%;} 
.n_mend .nav-box .img img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit: cover;}
.n_mend .nav-box .img .hezi{padding-bottom: 68% !important;}
.n_mend .nav-box .swiper-slide.on img{ border:2px solid #005bac; padding:1px;}
.n_mend .nav-box .button-prev{position:absolute;top:0;left:0;height:100%;width:40px;z-index:100000;background:#ccc;display: flex;justify-content:center;align-items: center;}
.n_mend .nav-box .button-next{position:absolute;top:0;right:0;height:100%;width:40px;z-index:10000;background:#ccc;display: flex;justify-content:center;align-items: center; }
 
 
.inner, .nav-panel ul .nav-btn:after {content: "";position: absolute;top: 50%;left: 50%;}

.scene {width: 100%;height: 100%;}

.page {z-index: 1;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: opacity .7s, z-index .7s, -webkit-transform .7s;
  transition: transform .7s, opacity .7s, z-index .7s;transition: transform .7s, opacity .7s, z-index .7s, -webkit-transform .7s;will-change: transform, opacity;
}
.page:nth-child(1) .left {background-image: url(dapian/dapian01.jpg);}
.page:nth-child(1) .right {background-image: url(dapian/dapian02.jpg);}
.page:nth-child(2) .left {background-image: url(dapian/dapian03.jpg);}
.page:nth-child(2) .right {background-image: url(dapian/dapian04.jpg);}
.page:nth-child(3) .left {background-image: url(dapian/dapian05.jpg);}
.page:nth-child(3) .right {background-image: url(dapian/dapian06.jpg);}
.page:nth-child(4) .left {background-image: url(dapian/dapian07.jpg);}
.page:nth-child(4) .right {background-image: url(dapian/dapian08.jpg);}

.page.active {z-index: 5;transition: opacity .7s, z-index 0s .7s, -webkit-transform .7s;transition: transform .7s, opacity .7s, z-index 0s .7s;transition: transform .7s, opacity .7s, z-index 0s .7s, -webkit-transform .7s;}
.page.active .half {-webkit-transform: translateX(0) !important;transform: translateX(0) !important;transition: -webkit-transform .7s ease-out;transition: transform .7s ease-out;
  transition: transform .7s ease-out, -webkit-transform .7s ease-out;
}
.page.previous {opacity: 0.4 !important;visibility: visible !important;transition: opacity .7s, z-index 0s, -webkit-transform .7s;
  transition: transform .7s, opacity .7s, z-index 0s;transition: transform .7s, opacity .7s, z-index 0s, -webkit-transform .7s;
}
.page.small {-webkit-transform: scale(0.8);transform: scale(0.8);opacity: 0;}
.page.small .half {-webkit-transform: translateX(0) !important;transform: translateX(0) !important;}
.page:nth-child(2) .left {-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.page:nth-child(2) .right {-webkit-transform: translateX(100%);transform: translateX(100%);}
.page:nth-child(3) .left {-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.page:nth-child(3) .right {-webkit-transform: translateX(100%);transform: translateX(100%);}
.page:nth-child(4) .left {-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.page:nth-child(4) .right {-webkit-transform: translateX(100%);transform: translateX(100%);}

.half {
  position: absolute;top: 0;width: 50%;height: 100%;background-size: cover;transition: -webkit-transform .7s ease-in;transition: transform .7s ease-in;
  transition: transform .7s ease-in, -webkit-transform .7s ease-in;will-change: transform;
}
.half.left {left: 0;}
.half.right {left: 50%;}
.half.withText:after {content: "";position: absolute;display: block;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 10;}

.heading {position: absolute;z-index: 500;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);font-size:45px;color: #fff;font-family: Decade;}

.nav-panel {position: fixed;top: 50%;right: 2%;-webkit-transform: translateY(-50%);transform: translateY(-50%);z-index: 1000;
  transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);
  transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6), -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6);will-change: transform, opacity;
}
.nav-panel.invisible {opacity: 0;-webkit-transform: translateY(-50%) scale(0.5);transform: translateY(-50%) scale(0.5);}
.nav-panel ul {list-style-type: none;}
.nav-panel ul .nav-btn {position: relative;overflow: hidden;width: 1rem;height: 1rem;margin-bottom: 0.5rem;border: 0.12rem solid #fff;border-radius: 50%;cursor: pointer;transition: border-color, -webkit-transform 0.3s;
  transition: border-color, transform 0.3s;transition: border-color, transform 0.3s, -webkit-transform 0.3s;will-change: border-color, transform;
}
.nav-panel ul .nav-btn:after {width: 100%;height: 100%;border-radius: 50%;transform: translateX(-50%) translateY(-50%) scale(0.3);background-color: #fff;opacity: 0;
  transition: opacity 0.3s, -webkit-transform;transition: transform, opacity 0.3s;transition: transform, opacity 0.3s, -webkit-transform;will-change: transform, opacity;
}
.nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after {transform: translateX(-50%) translateY(-50%) scale(0.7);opacity: 1;}
.nav-panel ul .nav-btn:hover {border-color: yellow;-webkit-transform: scale(1.2);transform: scale(1.2);}
.nav-panel ul .nav-btn:hover:after {background-color: yellow;}
.nav-panel .scroll-btn {position: absolute;left: 0;width: 1rem;height: 1rem;border: 0.2rem solid #fff;border-left: none;border-bottom: none;cursor: pointer;
  -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;transition: border-color 0.3s;
}
.nav-panel .scroll-btn.up {top: -1.6rem;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.nav-panel .scroll-btn.down {bottom: -1.2rem;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.nav-panel .scroll-btn:hover {border-color: yellow;}

.check-out {z-index: 1000;position: absolute;bottom: 1rem;left: 0;width: 100%;text-align: center;color: #fff;font-family: Decade;font-size: 1rem;text-transform: uppercase;}
.check-out a {color: #ffaaaa;text-decoration: none;border-bottom: 0.2rem solid;}