/* =====头部===== */
body.isOver {overflow: hidden;}
.header {z-index: 99;position: absolute; width: 100%;top: 0; left: 0;z-index: 999; transition: .4s;}
.headerBox {height: 1.5rem; display: flex; align-items: center; margin: 0 4%; justify-content: space-between;}
.headerBox .helogo img {max-width: 1.5rem;}

/* 导航 */
.header .mobmenu {opacity: 0; visibility: hidden; transition: 1s; top: .3rem;z-index: 999; width: auto;}
.wapclick {background: #fff; border-radius: 50%; width: .6rem; height: .6rem; overflow: hidden;}
.wapclick {cursor: pointer; position: relative; z-index: 99;display: flex;flex-direction: column;justify-content: space-around;align-items: center;padding: .15rem 0;}
.wapclick span { width: 50%; height: 2px; background: #003894; display: block;  transition: all 277ms ease-in-out;  position: relative;}
.wapclick span.cl-1 { animation:movingborder 3s 2.1s infinite;  }
.wapclick span.cl-2 { animation:movingborder 3s 2.2s infinite;  }
.wapclick span.cl-3 {animation:movingborder 3s 2.3s infinite;}
.active span {animation:none !important;}
.active span.cl-1 {transform: rotate(-45deg);top: 32%;}
.active span.cl-2 {opacity: 0;}
.active span.cl-3 {transform: rotate(45deg); top: -35%;}
@keyframes movingborder{0%,100%,50%{left:0;opacity:1}20%{left:100%;opacity:0}30%{left:-100%;opacity:0}}
.wrapSearch {display: flex; justify-content: flex-end;}
.mobnavBox .bottom .nav li {min-width: 280px;}
.wrapLogo {display: flex; justify-content: flex-end;  opacity: 0; height: 0; visibility: hidden;}
.wrapLogo img {max-width: 1.5rem; filter: brightness(0); -webkit-filter:brightness(0);}
.header .mobnavBox { opacity: 1;right: 0; visibility: visible; transition: 1s;    transform: translateX(0%);}
.mobnavBox.active {transition-delay: 0.3s;opacity: 1; visibility: visible; background: #fff; transform: translateX(0);}
.mobnavBox.active .mobCon {margin-top: .8rem;}
.mobnavBox.active .bottom .nav li h3 a {color: #333;}
.mobnavBox.active .bottom .nav li h3 a::after {background: #333;}
.mobnavBox.active .wrapSearch a svg path {fill: #333;}
.mobnavBox.active .wrapLogo {opacity: 1; visibility: visible; height: auto; margin-top: .5rem;}


/* 隐藏搜索 */
.searchFull {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: 1040;background-color: #fff;display: none;}
.searchFull .ssf-content {width: 100%;height: 100%; display: flex; align-items: center;}
.searchFull .ssf-fields-wrap { margin: 0 10%; position: relative;}
.searchFull .ssf-fields-wrap .ssf-input {width: 100%;height: 60px;font-size: var(--font20);border: none;outline: none;border-bottom: 1px solid #a3a3a3;padding-right: 70px;}
.searchFull .ssf-fields-wrap .ssf-btn {cursor: pointer; width: 60px;height: 60px;font-size: 22px;text-align: center;border: none;outline: none;background-color: transparent;position: absolute;right: 0;}
.searchFull .ssf-fields-wrap .ssf-btn:hover path {fill: #003894;}
.ssfDismisser {position: absolute; top: 20px; right: 30px; font-size: 31px;color: #8e9295;line-height: 30px; width: 30px;height: 30px; text-align: center;}
/* 头部下滑 */
.header.fh .wapclick {background: #003894;}
.header.fh .wapclick span {background: #fff;}
.header.fh .mobmenu {opacity: 1; visibility: visible; transition-delay: 1s;}
.header.fh .mobnavBox { transform: translateX(100%); opacity: 0; visibility: hidden; }
.header.fh .mobnavBox.active {transform: translateX(0%); opacity: 1;visibility: visible;}


/* =====首页===== */
/* 公用css */
/* 滚动条 */
::-webkit-scrollbar {width: 5px; /* 纵向滚动条*/ height: 5px; /* 横向滚动条 */ background-color: #fff; scrollbar-width:thin;scrollbar-color:#003894 #DDDDDD;}
/*定义滚动条轨道 内阴影*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);background-color: #E5E5E5}
/*定义滑块 内阴影*/
::-webkit-scrollbar-thumb { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background: #003894;  border-radius: 5px;}
.headerNavScroll {scrollbar-width:thin;scrollbar-color:#003894 #DDDDDD; overflow-y: auto;}
.headerNavScroll::-webkit-scrollbar {width: 3px;}
.headerNavScroll::-webkit-scrollbar-thumb {background: #003894; border-radius: 5px;}
.headerNavScroll::-webkit-scrollbar-track {background: #E5E5E5;}

/* 了解更多 */
.more1 {display: inline-flex;padding: .2rem .38rem; border: 2px solid #ffffff;border-radius: 35px; color: #ffffff;font-family: "CENTURY"; transition: .5s;}
.more1 svg {margin-left: .15rem;}
.more1:active {background: #fff; color: #003894;}
.more1:active svg path {fill: #003894;}
.more2 {border-color: #003894; color: #003894;}
.more2 svg {margin-left: .5rem;}
.more2:active {background: #003894;}
.more2:active {color: #fff; background: #003894;}
.more2:active svg path {fill: #fff;}
@media (any-hover: hover) {
    .more1:hover {background: #fff; color: #003894;}
    .more1:hover svg path {fill: #003894;}
    .more2:hover {background: #003894;}
    .more2:hover {color: #fff; background: #003894;}
    .more2:hover svg path {fill: #fff;}
}

/* banner */
.indexBanner {overflow: hidden; position: relative; height: 100vh; z-index: 2; background: #fff;}
.bannerSwiper {height: 100%;}
.indexBanner .jddwjz {position: absolute; top:17%;left:0;margin: 0 4%;width:92%; transform: none;}
.bannerSwiper .imgBox {height: 100%;}
.bannerSwiper .imgBox img {width: 100%;height: 100%; min-height: 6rem;object-fit: cover;}
/* .bannerSwiper .swiper-slide-active img, .bannerSwiper .swiper-slide-duplicate-active img {transition: 6s linear; transform: scale(1,1);} */
.indexBanner .box {z-index: 2;}
.indexBanner .con .str1 {text-transform: uppercase;margin-left:2%;  }
.indexBanner .con .str2{margin-left:2%;margin-top:10%}
.indexBanner .con .str1 b {font-size:0.4rem;font-weight:900; color: #ffffff; display: block; line-height: 1.1; display: block;}
.indexBanner .con span {color: #fff; font-size:0.5rem; margin-top: .4rem; display: block;    width:100%;font-weight:900;line-height: 1.1; }
.indexBanner .con .more {margin-top: 10%;}

.indexMain {position: relative; z-index: 2; background: #fff;}
.indexOne {background: none;}
.indexOne .enBox {background: #f9f9f9; padding-left: 14%; position: relative; z-index: 1; padding-top: 2%;}
.indexOne .enBox .en { position: relative; top: 1rem; left: -.72rem; line-height: 1; font-size: 2.06rem;font-family: "FUTURA";font-weight: 900; text-align: left;color: #003894; text-transform: uppercase;}
.indexOne li {display: flex; justify-content: space-between;}
.indexOne li .le {width: 50%; padding: 1.5rem 7% 1.5rem 14%; box-sizing: border-box; }
.indexOne li .imgBox {width: 50%; position: relative;}
.indexOne li .imgBox::after {content: ""; width: 100%;     background: #f9f9f9; position: absolute; height: 100%; right: 0; top: 0; transition: 1s;}
.indexOne li:first-child .imgBox::after {background: #f9f9f9;}
.indexOne li:nth-child(odd) .imgBox::after {background: #f9f9f9;}
.indexOne li:nth-child(even) .imgBox::after {background: #fff;}
.indexOne li:nth-child(3) .imgBox::after {background: #003894;}
.indexOne li .imgBox.on::after  {width: 0;}
.indexOne li .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.indexOne li .imgBox .img {width: 100%; height: 100%;}
.indexOne li h5 {font-size: 0.5rem;font-weight: 700;color: #000000;}
.indexOne li .text {margin-top: .1rem;}
.indexOne li .text p {font-size: var(--font22); color: #343434;}
.indexOne li .more {margin-top: .6rem;}
.indexOne li .more a {width: 0.64rem; height: 0.64rem;  border: 1px solid #343434; overflow: hidden; border-radius: 50%; position: relative;z-index: 1; transition: .5s;}
.indexOne li .more a::after {content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: #003894; left: 0; top: 0; transform: scale(0); transition: .5s; z-index: -1;}
.indexOne li .more a:hover {border-color: transparent;}
.indexOne li .more a:hover::after {transform: scale(1);}
.indexOne li .more a:hover svg path {fill: #fff;}
.indexOne li:first-child {background: #f9f9f9;}
.indexOne li:last-child {background: #f9f9f9;}
.indexOne li:nth-child(odd) .le {background: #f9f9f9;}
.indexOne li:nth-child(even) .le {background: #fff;}
.indexOne li:nth-child(3) {background: #fff;}
.indexOne li:nth-child(3) .le {background: #003894;}
.indexOne li:nth-child(3) .le {color: #fff;}
.indexOne li:nth-child(3) h5 {color: #fff;}
.indexOne li:nth-child(3) .text p {color: #fff;}
.indexOne li:nth-child(3) .more a {border-color: #fff;}
.indexOne li:nth-child(3) .more a svg path {fill: #fff;}
.indexOne li:nth-child(3) .more a::after {background: #fff;}
.indexOne li:nth-child(3) .more a:hover {border-color: transparent;}
.indexOne li:nth-child(3) .more a:hover::after {transform: scale(1);}
.indexOne li:nth-child(3) .more a:hover svg path {fill: #003894;}

.indexTwo {margin: 1rem 0;}
.indexTwo .box {margin: 0 3%; box-sizing: border-box;}
.indexTwo .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: -.35rem; position: relative; z-index: 3;}
.indexTwo .top .le {display: flex; align-items: center;}
.indexTwo .top .le .en {font-size: 2.06rem;font-family: "FUTURA"; font-weight: 700;color: #003894; line-height: 1;}
.indexTwo .top .le .jtChick {display: flex; margin-left: .6rem;}
.indexTwo .top .swjt {position: relative; margin: 0; left: 0; top: 0;width: .6rem; height: .6rem; border: 1px solid #003894; border-radius: 50%; margin: 0 .1rem; transition: .4s;}
.indexTwo .top .swjt.swiper-button-prev {transform: rotate(180deg) ;}
.indexTwo .top .swjt svg {max-width: 50%;}
.indexTwo .top .swjt:active {background: #003894;}
.indexTwo .top .swjt:active svg path {fill: #fff;}
@media (any-hover: hover) {
    .indexTwo .top .swjt:hover {background: #003894;}
    .indexTwo .top .swjt:hover svg path {fill: #fff;}
}

.inTwoSwiper .bjBox {position: relative; opacity: 0; transition: .5s; overflow: hidden;}
.inTwoSwiper .bjBox::after {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .45); left: 0; top: 0;}
.inTwoSwiper .bjBox img {width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: .5s;}
.inTwoSwiper .con {position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 1rem .5rem; box-sizing: border-box;}
.inTwoSwiper .con h5 {font-size: var(--font34);font-weight: 700;color: #333333; line-height: 1.2; transition: .5s;}
.inTwoSwiper .con .text {margin-top: .4rem;}
.inTwoSwiper .con .text p {font-size: var(--font22);font-weight: 400;color: #333333;transition: .5s;}
.inTwoSwiper .con .time {position: absolute; bottom: .8rem; width: 100%; padding: 0 .5rem;left: 0; color: #656565; font-size: var(--font18); font-family: "CENTURY";transition: .5s;}
.inTwoSwiper .con .imgBox {position: absolute; right: 1px; bottom: 0; max-width: 60%; z-index: -1;}
.inTwoSwiper .con .imgBox img {max-width: 100%;}
.inTwoSwiper .slide {display: block; height: 100%;width: 100%;border: 1px solid #e7ebea;}
.inTwoSwiper .swiper-pagination {display: none;}
.inTwoSwiper .swiper-pagination span {background: #003894;}
.inTwoSwiper .slide:active .bjBox {opacity: 1;}
.inTwoSwiper .slide:active .bjBox img {transform: scale(1);}
.inTwoSwiper .slide:active .con h5 {color: #fff;}
.inTwoSwiper .slide:active .con .text p {color: #fff;}
.inTwoSwiper .slide:active .con .time {color: #fff;}
@media (any-hover: hover) {
    .inTwoSwiper .slide:hover .bjBox {opacity: 1;}
    .inTwoSwiper .slide:hover .bjBox img {transform: scale(1);}
    .inTwoSwiper .slide:hover .con h5 {color: #fff;}
    .inTwoSwiper .slide:hover .con .text p {color: #fff;}
    .inTwoSwiper .slide:hover .con .time {color: #fff;}
}
/* 悬浮出现箭头 */
.indexTwo .swiperBox {position: relative;}
.indexTwo .c-arrow {position: absolute;top: 50%; left: 50%;display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: rgba(0, 56, 148,.85); opacity: 1; transition: transform 0.4s; color: #fff;font-size: var(--font22);font-family: "CENTURY";transform: scale(0) translateX(-35%); cursor: pointer; z-index: 1;  pointer-events: none;}
.indexTwo .c-arrow img, .indexTwo .c-arrow svg {width: 40%; height: 40%;}
.indexTwo .c-arrow.on {transform: scale(1) translateX(-35%);}


/* cookies */

.he_cook {position: fixed; z-index: 9; bottom: 1%; width: 100%;}
.he_cook .he_cookc {width: 55%;  padding: .1rem .5rem; margin: auto; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 50px; box-shadow: 0rem 0rem 0.07rem 0rem rgba(0,0,0,0.08); }
.he_cook .he_cookc .con {color: #3E3E3E; font-size: var(--font18); margin-right: .2rem; line-height: 1.2;}
@media screen and (min-width: 200px) and (max-width: 1200px) {
    .he_cook .he_cookc {width: 80%;}
}
@media screen and (min-width: 200px) and (max-width: 960px){
.he_cook {  display: none;}
}
/* 底部 */
.footer {padding: .5rem 0;  z-index: 1; overflow: hidden; position: fixed;bottom: 0;left: 0;z-index: 1;width: 100%; background: #fff;}
.footer .container {position: relative;}
.footer .backTop {width: 0.68rem;height: 0.68rem; border: 1px solid #313131; border-radius: 50%; position: absolute; right: 0; transform: translateX(200%); transition: .5s;}
.footer .backTop a {height: 100%;}
.footer .backTop svg {max-width: 50%;}
.footer .backTop:hover {background: #003894;}
.footer .backTop:hover svg path {fill: #fff;}
.foterBox {display: flex; justify-content: space-between; align-items: flex-start;}
.foterlogo {margin-top: .35rem;}
.foterlogo img {max-width: 3rem;}
.foternav {width: 36%; margin-left: 6%;}
.foternav dl {display: flex; flex-wrap: wrap;    justify-content: space-between; position: relative;}
.foternav dd {margin-bottom: .22rem; width: 48%;}
.foternav dd a {font-size: var(--font18); font-weight: 400;color: #666666; position: relative;
    z-index: 222;}
.foternav dd a:hover {color: #003894;}
.foternav dd:nth-child(1) {order: 1;}
.foternav dd:nth-child(2) {order: 3;}
.foternav dd:nth-child(3) {order: 5;}
.foternav dd:nth-child(4) {order: 7;}
.foternav dd:nth-child(5) {order: 2;}
.foternav dd:nth-child(6) {order: 4;}
.foternav dd:nth-child(7) {order: 6;}
.foternav dd:nth-child(8) {position: absolute;  left: 0; padding-right:22%; text-align: right;}
.foternav dd:nth-child(8)::before{content: '|'; position: absolute;     left: 25.5%;}
.foternav dd:nth-child(9) {order: 8;}
/* @media screen and (min-width: 200px) and (max-width: 1300px){
    .foternav dd:nth-child(8) { padding-right:25%;}

} */

/* .foternav dd:nth-child(2) {order: 3;} */
.foterUs dt {font-size: var(--font28);font-weight: 700;color: #3e3e3e;}
.foterUs dd {font-size: var(--font20);font-weight: 400;color: #3e3e3e; margin: .15rem 0;}
.foterCopy {display: flex;justify-content: space-between; flex-wrap: wrap; margin-top: 1rem;}
.foterCopy p {font-size: var(--font18); color: #3e3e3e;}
.foterCopy ul {display: flex; flex-wrap: wrap;}
.foterCopy ul li {margin: .1rem 0 0 .5rem;}
.foterCopy ul li img {transition: .5s;}
.foterCopy ul li a:hover img {transform: scale(1.1);}

/* ================================================================================内页============================================================================================= */
/* 内页banner */
.ny-banner {overflow: hidden; position: relative; height: 100vh; z-index: 2; background: #fff;}
.ny-banner .box {z-index: 1; top: 70%;}
.ny-banner .text {width: 90%;}
.ny-banner .text p {font-size: var(--font25);font-weight: 400;color: #ffffff; margin-top: .3rem;}
.ny-banner .con strong {font-size: 0.9rem;font-family: "FUTURA";font-weight: 700; color: #ffffff; font-style: italic; text-transform: uppercase; display: block; line-height: 1;}

.vision-banner .box {top: 50%;}
.vision-banner .strBox {display: flex; justify-content: center; flex-direction: column;align-items: center;}
.vision-banner .str1 {display: flex; justify-content: center; align-items: center;font-size: 1.33rem;font-family: Verdana, Verdana-Regular;font-weight: 400;color: #ffffff; position: relative; left: -.1rem;}
.vision-banner .str1 img {margin: 0 .3rem; max-width: 1.5rem;}
.vision-banner .sm1 {font-size: var(--font40); font-family: "CENTURY"; font-weight: 400; color: #ffffff; line-height: 1;}
.vision-banner .text {position: absolute; width: 75%; bottom: -2.25rem;}
.vision-banner .text p {font-size: var(--font30);}

/* =====TheVision===== */
.visionMain {position: relative; z-index: 2; background: #fff;}
.visionOne {text-align: center; padding: 1.8rem 0;}
.visionOne .tit {font-size: 1.2rem; font-family: "FUTURA"; font-weight: 700; color: #003894; line-height: 1;}
.visionOne .text {margin-top: .5rem;}
.visionOne .text p {font-size: var(--font28); font-weight: 400; color: #666666;}

.visionTwo {position: relative; padding: 1.4rem 0 2.3rem; z-index: 1;}
.visionTwo .bjBox {position: absolute;width: 100%;background: #b8b8b8; height: 100%; z-index: -1; top: 0; overflow: hidden;}
.visionTwo .bjBox .imgBox {margin-left: auto; width: 47%; height: 100%;}
.visionTwo .bjBox .imgBox img {display: none;}
.visionTwo .bjBox .imgBox img , .visionTwo .bjBox .imgBox .img {width: 100%; height: 100%; object-fit: cover; }
.visionTwo .tit {font-size: 1.5rem;font-family: "FUTURA"; font-weight: 700;color: #0426a0;}
.visionTwo .tit2 {font-size: 0.59rem;font-family: "FUTURA";font-weight: 700;color: #ffffff; text-transform: uppercase;}
.visionTwo .text {margin-top: 1.2rem; width: 50%;}
.visionTwo .text p {font-size: var(--font28);font-weight: 400;color: #ffffff;}

/* ======NavalArchitecture ======*/
.navalMain {position: relative; z-index: 2; background: #fff;}
.navalOne {padding: 1.8rem 0;}
.navalOne .tit strong {text-align: center;font-size: 0.8rem;font-family: "FUTURA";font-weight: 700; color: #003894; text-transform: uppercase;display: block; line-height: 1.2;}
.navalOne .text {padding-top: .7rem; text-align: center; width: 90%; margin: auto;}
.navalOne .text p {font-size: var(--font25);    font-weight: 400;text-align: center; color: #333333;}

.navallist {background: #fafafa; padding: 1rem 0;}
.navallist li {display: flex; justify-content: space-between;padding: .3rem 0; /*position: sticky; top: 0; */background: #fafafa;}
.navallist li .con {width: 45%; padding: .6rem 0;}
.navallist li .con h5 {font-size: var(--font46);font-weight: 700;color: #000000;}
.navallist li .imgBox {border-radius: 0.47rem; overflow: hidden; width: 50%;}
.navallist li .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.navallist li dl {margin-top: .7rem;}
.navallist li dl dd {display: flex; justify-content: space-between; margin: .1rem 0;}
.navallist li dl dd b {width: 50%;color: #343434;font-size: var(--font24);font-weight: 700;}
.navallist li dl dd span {width: 50%;font-size: var(--font24);font-weight: 700; color: #888888;}

.navalThre {background: rgba(184, 184, 184,.38); padding: 1rem 0;}
.navalThre .tit {width: 90%; margin: auto; font-size: 0.6rem;font-family: "FUTURA"; font-weight: 700;text-align: center;color: #003894; text-align: center; line-height: 1.2;}
.navalThre .box {margin-top: .7rem; overflow-x: auto;}
.navalThre .box table {white-space: nowrap;}

/* =====HullDesignService===== */
.hullMain {position: relative; z-index: 2; background: #fff;}
.hullOne {padding: 1rem 0 2rem 0;}
.hullOne .tit {width: 90%; margin: auto; font-size: 0.8rem; font-family: "FUTURA"; font-weight: 700;text-align: center; color: #003894; line-height: 1.2; text-transform: uppercase;}
.hullOne .box {margin-top: 1rem;}
.hullOne ul {display: flex; justify-content: space-between;}
.hullOne li {width: 30%; text-align: center;}
.hullOne li .icBox {height: 1rem; display: flex; align-items: center; justify-content: center;}
.hullOne li .icBox img {max-width: 100%; max-height: 100%; object-fit: contain;}
.hullOne li h6 {font-size: var(--font32);font-weight: 700;text-align: center;color: #003894; margin-top: .2rem;}
.hullOne li p {font-size: var(--font22);font-weight: 400;color: #555555;margin-top: .2rem;}

.hullTwo {background: #fafafa; padding: 1rem 0;}
.hullTwo .tit {font-size: 1.1rem; font-family: "FUTURA";font-weight: 700;color: #003894; line-height: 1.1;   margin-top: -13%; position: relative; z-index: 2;}
.hullTwo .swiperBox {margin-top: 1rem;}
.hullTwoSwiper .slide {display: flex; justify-content: space-between;}
.hullTwoSwiper .imgBox {width: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;border-radius: 0.5rem;}
.hullTwoSwiper .imgBox img {max-width: 100%; max-height: 100%; object-fit: cover;}
.hullTwoSwiper .con {width: 45%; padding-bottom: 1rem;}
.hullTwoSwiper .con h6 {font-size: 0.55rem;font-weight: 700;color: #333333;}
.hullTwoSwiper .con .disc p {font-size: var(--font25); font-weight: 400; color: #666666; /*margin-top: .2rem;*/}
.hullTwoSwiper .swiper-pagination {display: none;}
.hullTwoSwiper .swjt {width: 0.86rem; height: 0.86rem; background: rgba(0, 56, 148,.2); border-radius: 50%; transform: translateX(150%); left: 55%; top: auto;bottom: .1rem; transition: .5s;}
.hullTwoSwiper .swjt.swiper-button-prev {transform: rotate(180deg);}
.hullTwoSwiper .swjt svg {max-width: 40%;}
.hullTwoSwiper .swjt:active {background: rgba(0, 56, 148,1); }
@media (any-hover: hover) {
    .hullTwoSwiper .swjt:hover {background: rgba(0, 56, 148,1); }
}

.hullThre {padding: 1rem 0; }
.hullThre .tit {font-size: 1.1rem;font-family: "FUTURA";font-weight: 700; color: #003894; text-transform: uppercase;}
.hullThre .tit2 {width: 85%; font-size: 0.56rem;font-weight: 700; text-align: left; color: #333333; line-height: 1; margin-top: .8rem;}
.hullThre .box {display: flex; justify-content: space-between; position: relative; margin-top: .8rem;}
.hullThre .box .disc {width: 30%;font-size: var(--font26); font-weight: 400; color: #333333; padding-bottom: 1.6rem;}
.hullThre .box .swiperBox {width: 67%;}
.hullThreSwiper {position: static;}
.hullThreSwiper .imgbox img {width: 100%;height: 100%; object-fit: cover;}
.hullThreSwiper .swjt {width: 0.86rem; height: 0.86rem; border: 1px solid #4F4F4F; border-radius: 50%; transform: translateX(150%); left: 0%; top: auto;bottom: .6rem; transition: .5s;}
.hullThreSwiper .swjt.swiper-button-prev {transform: rotate(180deg);}
.hullThreSwiper .swiper-pagination {display: none;}
.hullThreSwiper .swjt:active {background: #003894; border-color: #003894;}
.hullThreSwiper .swjt:active svg path {fill: #fff;}
.hullThreSwiper .swjt svg {max-width: 50%;}
@media (any-hover: hover) {
    .hullThreSwiper .swjt:hover {background: #003894; border-color: #003894;}
    .hullThreSwiper .swjt:hover svg path {fill: #fff;}
}

.hullFour {background: #e9e9e9; padding: 1rem 0;}
.hullFour .box {display: flex; justify-content: space-between;}
.hullFour .le {width: 58%;}
.hullFour .re {width: 37%;}
.hullFour .re img {max-width: 100%;}
.hullFour .tit {font-size: 0.56rem;font-weight: 700;color: #003894; line-height: 1;}
.hullFour .text {margin-top: .7rem;}
.hullFour .text p {font-size: var(--font26);font-weight: 400;color: #333333; margin-top: .3rem;}
.hullFour .text p span {color: #003894;}

/* ======ShipbuilidngTechnolog===== */
.shipMain {position: relative; z-index: 2; background: #fff;}
.shipTit .tit {font-size: 0.57rem; font-family: "FUTURA";font-weight: 700; text-align: center;color: #003894; line-height: 1.2;}

.shipOne {padding: 1rem 0;}
.shipOne ul {display: flex; justify-content: space-between;}
.shipOne li {width: 32%; background: #003894; border-radius: 0.2rem; overflow: hidden;}
.shipOne li img {width: 100%; transition: .5s; height: 100%}
.shipOne li:hover img {transform: scale(1.1);}

.shipTwo {padding-bottom: 1rem;}
.shipTwo .tit2 {width: 85%; margin: auto; font-size: var(--font25);font-weight: 400;text-align: center; padding-top: .5rem;}
.shipTwo .tit2 p {color: #666666;}
.shipTwo ul {display: flex; justify-content: space-between;}
.shipTwo li {margin-top: 1rem; width: 30%;}
.shipTwo li .icBox {height: 1rem;}
.shipTwo li .icBox img {max-width: 100%; max-height: 100%; object-fit: contain;}
.shipTwo li p {margin-top: .3rem;font-size: var(--font24);font-weight: 400;text-align: center;color: #555555;}

.shipThre {background: #003894; padding: 1.2rem 0;}
.shipThre .shipTit .tit {color: #fff;}
.shipThre ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
.shipThre li {width: 30%;margin-top: 1.5rem;}
.shipThre li h6 {font-size: var(--font38);font-weight: 700;color: #ffe400;line-height: 1.2;}
.shipThre li .con {margin-top: .25rem;}
.shipThre li .con span {display: block;font-size: var(--font24);font-weight: 400;color: #ffffff; margin: .05rem 0;}

.shipFour {padding: 1.5rem 0; overflow: hidden; background: #fafafa;}
.shipFour .shipTit .tit {color: #333333;  font-family: "CENTURY"; font-weight: 900;}
.shipFour .nav {margin-top: 1rem;}
.shipFour .nav ul {display: flex; justify-content: space-between;}
.shipFour .nav li {width: 18%; text-align: center;}
.shipFour .nav li .icBox {height: .6rem; display: flex; align-items: center; justify-content: center;}
.shipFour .nav li .icBox img {max-width: 100%; max-height: 100%;}
.shipFour .nav li span {font-size: var(--font24);font-weight: 400; text-align: center;color: #333333; margin-top: .2rem; line-height: 1.1; display: block;}
.shipFour .swiperBox {margin-top: 1.5rem;}
.shipFourSwiper .swiper-slide .imgBox {transition: 1s;}
.shipFourSwiper .swiper-slide {display: flex; justify-content: center; align-items: center;}
.shipFourSwiper .swiper-slide.swiper-slide-prev .imgBox {transform: scale(.6) translateX(33%);}
.shipFourSwiper .swiper-slide.swiper-slide-next .imgBox {transform: scale(.6) translateX(-33%); }
.shipFourSwiper .swiper-slide .imgBox img {width: 100%;}
.shipFourSwiper .swiper-slide-active .imgBox {transform: scale(1);  transition-delay: 1s;}

.shipFourSwiper .swiper-pagination {display: none;}
.shipFourSwiper .swjt {width: 0.86rem; height: 0.86rem;background: rgba(0, 0, 0,.17); border-radius: 50%; transition: .5s; right: 10%;}
.shipFourSwiper .swjt.swiper-button-prev {transform: rotate(180deg); left: 10%;}
.shipFourSwiper .swjt:active {background: #003894; border-color: #003894;}
.shipFourSwiper .swjt:active svg path {fill: #fff;}
.shipFourSwiper .swjt svg {max-width: 50%;}

@media (any-hover: hover) {
    .shipFourSwiper .swjt:hover {background: #003894; border-color: #003894;}
    .shipFourSwiper .swjt:hover svg path {fill: #fff;}
}

/* =====ShipyardPLM===== */
.plm-banner .box {top: 50%;text-align: center;}
.plm-banner .con {margin-top: 2rem;}
.plm-banner .num {margin-top: 1.5rem; display: flex; justify-content: center;align-items: flex-end; font-size: 2rem;font-weight: 500;color: #ffffff;  font-family: "DINBold"; line-height: 1;}
.plm-banner .num .fuhao {font-size: 1.28rem;}
.plm-banner .text {text-align: center; width: 100%;}

.plmMain {position: relative; z-index: 2; background: #fff;}
.plmnTit {font-size: 0.7rem; font-weight: 700;color: #003894;  font-family: "FUTURA"; text-align: center; text-transform: uppercase}
.plmOne {padding: 1rem 0;}
.plmOne .container {width: 1780px;}
.plmOne .box {display: flex; justify-content: space-between; margin-top: .5rem; align-items: center;}
.plmOne .le {width: 35%; padding-left: 5%; box-sizing: border-box;}
.plmOne .le .text p {font-size: var(--font24);font-weight: 400;color: #333333;margin-top: .3rem;  text-transform: capitalize;}
.plmOne .re {width: 59%;}
.plmOne .re img {max-width: 100%; height: 100%; object-fit: cover;}
.plmOneSwiper {width: 100%; height: 100%;}
.plmOneSwiper .swiper-pagination {display: none;}
.plmOneSwiper .swiper-pagination span {}
.plmOneSwiper .imgBox img {max-width: 100%;}

.plmTwo {background: #f8f8f8;}
.plmTwo .plmnTit {font-size: .62rem; width: 80%; margin: auto;}
.plmTwo .re {order: -1;}
.plmTwo .le {padding-left: 0; padding-right: 5%;}
.plmTwoSwiper {width: 100%; height: 100%;}
.plmTwoSwiper .swiper-pagination {display: none;}
.plmTwoSwiper .imgBox img {max-width: 100%;}

.plmThre {position: relative;padding-top: 1rem;}
.plmThre .plmnTit  {font-size: 0.57rem; margin-bottom: 1rem;}
.plmThre .max {max-width: 2600px; margin: auto; position: relative;padding: 1.5rem 0;background: #003894; }
.plmThre .box {display: flex; justify-content: space-between;}
.plmThre .re {position: absolute; right: 0; width: 49%; height: 100%; bottom: 0;}
.plmThre .re img {width: 100%; height: 100%; object-fit: contain;}
.plmThre .le {width: 48%;}
.plmThre ul li {position: relative; display: flex; align-items: center; transition: .5s; margin: .3rem 0;}
.plmThre ul li::before {content: ""; background: url(../images/jt2.svg) no-repeat center; background-size: contain; display: block; height: .3rem;width: .3rem; margin-right: .1rem;}
.plmThre ul li a {font-size: var(--font34);font-weight: 400;color: #ffffff; position: relative;}
.plmThre ul li:hover {margin-left: .2rem;}
.plmThreSwiper {width: 100%; height: 100%;}
.plmThreSwiper .swiper-pagination {display: none;}
.plmThreSwiper .imgBox {height: 100%; background: #fff;}

/* DigitalTwinPlatform */
.twinMain {position: relative; z-index: 2; background: #fff;}
.twinTle h3 {font-size: 0.57rem;font-family: "FUTURA";font-weight: 700;text-align: center;color: #003894;}
.twinOne {padding: 1rem 0;}
.twinOne ul {display: flex; justify-content: space-between; padding-top: .3rem;}
.twinOne li {margin-top: .5rem; text-align: center; padding: 0 1%; box-sizing: border-box;}
.twinOne li .icBox {height: .7rem; display: flex; align-items: center; justify-content: center;}
.twinOne li .icBox img {max-width: 100%; max-height: 100%;}
.twinOne li span {display: block;font-size: var(--font26);font-weight: 700;text-align: center; color: #333333; margin-top: .45rem;}

.twinTwo {background: #ebebeb; padding: 1rem 0;}
.twinTwo .box {display: flex; justify-content: space-between; margin-top: .7rem; align-items: center;}
.twinTwo .le {width: 62%;}
.twinTwo .le img {max-width: 100%; height: 100%; object-fit: cover;}
.twinTwo .con {width: 34%;}
.twinTwo .con .text p {font-size: var(--font24); font-weight: 400; color: #333333;}

.twinThre {padding: 1rem 0;background: #003894;}
.twinThre .max {max-width: 2600px; margin: auto;  position: relative;}
.twinThre .box {}
.twinThre .imgBox {right: 0; height: 100%; width: 50%; position: absolute; top: 0; height: 100%;}
.twinThre .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.twinThre .le {width: 45%; padding: .6rem 0 1.2rem;}
.twinThre .tit {font-size: 0.62rem;font-family: "FUTURA";font-weight: 700; color: #ffffff;}
.twinThre .text p {font-size: var(--font24);font-weight: 400; color: #ffffff;margin-top: .3rem;}

.twinFour {padding: 1.5rem 0;}
.twinFour h3 {font-size: 0.57rem;font-family: "FUTURA";font-weight: 700;color: #053892; text-align: center;}
.twinFour .text {width: 60%; margin: auto;}
.twinFour .text p {margin-top: .3rem;font-size: var(--font24);font-weight: 400;color: #053892;}

@media screen and (min-width: 1200px) and (max-width: 1580px) {
    .twinFour .text {width: 45%;}
}

.twinFive {background: #fafafa; padding: .3rem 0;}
.twinFive .container {width: 1800px;}
.twinFive li {display: flex; justify-content: space-between;padding: .7rem 0;}
.twinFive li .le {width: 48%; padding-left: 8%; box-sizing: border-box;}
.twinFive li .imgBox {width: 50%;border-radius: 0.3rem; overflow: hidden;}
.twinFive li .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.twinFive li h5 {font-size: .44rem;font-weight: 700;color: #000000; line-height: 1;}
.twinFive li dl {margin-top: .5rem;}
.twinFive li dd {margin: .15rem 0;font-size: var(--font24); font-weight: 400;color: #333333; position: relative; display: flex; align-items: center;}
.twinFive li dd::before {content: "";width: 0.08rem;height: 0.08rem; background: #003894; display: block; border-radius: 50%; margin-right: .25rem; flex-shrink: 0;}
.twinFive li:nth-child(even) .imgBox {order: -1; width: 45%;}
.twinFive li:nth-child(even) .le {width: 50%; padding-left: 0;}

/* =====contact===== */
.contactMain {position: relative; z-index: 2; background: #f3f3f3;}
.contactOne {background: url(../images/contactOne-bj.jpg) no-repeat center;background-size: cover;background-attachment: fixed;padding-top: 2.6rem;}
.contactOne .tle {border: 0;}
.contactOne .re {width: 54%;}
.contactOne .tle small {font-weight: 900; font-size: var(--font48);}

.touch {background: url(../images/touch-bj.jpg) no-repeat center; background-size: cover; height: 100vh; padding-top: 3rem; background-attachment: fixed;  position: relative;}
/* .touch:after { content: ""; position: absolute; bottom: 0;left: 0; z-index: 0; width: 200%;height: 2.5rem; background: #f3f3f3;} */
.touch .box {display: flex; justify-content: space-between;}
.touch .re {width: 55%;background: #fff;border-radius: 0.2rem; padding: .9rem .8rem; box-sizing: border-box; position: relative; z-index: 1;}
.touch .formTle h4 {font-size: .5rem; font-weight: 400;color: #383838;}
.touch .form {margin-top: .3rem;}
.touch .form .inBox {margin-top: .2rem;}
.touch .form label {font-weight: 400; color: #333333; display: block; margin-bottom: .1rem; font-size: var(--font20);}
.touch .form label em {color: #FF0000;}
.touch .form input {height: 0.45rem;min-height: 40px;background: #ffffff;border: 1px solid #dadada;border-radius: 0.05rem;display: block; width: 100%;padding: 0 .15rem; box-sizing: border-box;}
.touch .form input::placeholder , .touch .form textarea::placeholder {opacity: 0.54; font-size: 13px;font-weight: 400; color: #bfbfbf;}
.touch .form textarea {height: 1.34rem; background: #ffffff; border: 1px solid #dadada; border-radius: 0.05rem; resize: none; width: 100%; display: block; padding: .15rem; box-sizing: border-box;}
.touch .form .infile button {cursor: pointer; width: 100%; height: 0.45rem; min-height: 40px; background: #535353;border: 0.01rem solid #dadada;border-radius: 0.05rem; color: #fff;}
.touch .form .infile i {margin-right: .1rem;}
.touch .form .infile button:active {background: #003894;}
.touch .form .sub {margin-top: .5rem;}
.touch .form .sub button {width: 100%; cursor: pointer; height: 0.55rem; min-height: 45px; background: #003894; border-radius: 28px;color: #ffffff;font-family: Arial, Arial-Bold;font-weight: 700;}
.touch .form .sub button:active {background:#0757da;}
.touch .form .inBox.inCode {display: flex; justify-content: space-between;}
.touch .form .inBox.inCode input {width: calc(100% - 162px);}
.touch .form .inBox.inCode .imgCode img {height: .45rem; min-height: 40px;}
.touch .form .inBox .inCode {display: flex; justify-content: space-between;}
.touch .form .inBox .inCode input {width: calc(100% - 162px);}
.touch .form .inBox .inCode img {height: .45rem; min-height: 40px;}

.contactTwo {margin-top: 5rem; padding: 2rem 0;}
.contactTwo .box {display: flex; justify-content: space-between; align-items: center;}
.contactTwo .imgBox {width: 42%; display: flex; align-items: center; justify-content: center;}
.contactTwo .imgBox img {max-width: 100%; border-radius: .2rem;}
.contactTwo .con {width: 53%;}
.contactTwo .tit {opacity: 0.39; font-size: var(--font25);font-weight: 400;color: #333333;}
.contactTwo dl dt {font-size: var(--font40);font-weight: 700;color: #003894;}
.contactTwo dl.dl2 {margin-top: 1.4rem;}
.contactTwo dl dd {font-size: var(--font24);font-weight: 400;color: #585858; margin: .1rem 0;}


/* =====新闻中心===== */
.newslistMain {position: relative; z-index: 2; background: #fff; padding: 1rem 0;}
.newslist ul {display: grid; grid-template-columns: repeat(3,1fr);}
.newslist li {position: relative;}
.newslist li .bjBox {position: relative; opacity: 0; transition: .5s; overflow: hidden;}
.newslist li .bjBox::after {content: ""; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .45); left: 0; top: 0;}
.newslist li .bjBox img {width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: .5s;}
.newslist li .con {position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 1rem .5rem; box-sizing: border-box;}
.newslist li .con h5 {font-size: var(--font34);font-weight: 700;color: #333333; line-height: 1.2; transition: .5s;}
.newslist li .con .text {margin-top: .4rem;}
.newslist li .con .text p {font-size: var(--font22);font-weight: 400;color: #333333;transition: .5s;}
.newslist li .con .time {position: absolute; bottom: .8rem; width: 100%; padding: 0 .5rem;left: 0; color: #656565; font-size: var(--font18); font-family: "CENTURY";transition: .5s;}
.newslist li .con .imgBox {position: absolute; right: 1px; bottom: 0; max-width: 60%; z-index: -1;}
.newslist li .con .imgBox img {max-width: 100%;}
.newslist li .slide {display: block; height: 100%;width: 100%;border: 1px solid #e7ebea;}
.newslist li .slide:active .bjBox {opacity: 1;}
.newslist li .slide:active .bjBox img {transform: scale(1);}
.newslist li .slide:active .con h5 {color: #fff;}
.newslist li .slide:active .con .text p {color: #fff;}
.newslist li .slide:active .con .time {color: #fff;}
@media (any-hover: hover) {
    .newslist li .slide:hover .bjBox {opacity: 1;}
    .newslist li .slide:hover .bjBox img {transform: scale(1);}
    .newslist li .slide:hover .con h5 {color: #fff;}
    .newslist li .slide:hover .con .text p {color: #fff;}
    .newslist li .slide:hover .con .time {color: #fff;}
}
@media screen and (min-width: 200px) and (max-width: 1024px) {
    .newslist ul {display: grid; grid-template-columns: repeat(2,1fr);}
}
@media screen and (min-width: 200px) and (max-width: 640px) {
    .newslist ul {display: grid; grid-template-columns: repeat(1,1fr);}

    .fy a {display: none;}
    .fy span.layui-laypage-curr {display: none;}
    .fy a:first-child ,  .fy a:last-child {display: flex;}
}



/* 新闻详情 */
.newsDateMain {background: #f9f9f9; padding-bottom: 1rem; position: relative; z-index: 2;}
.newsDateMain .container {width: 1280px; max-width: 75%;}
.newsDate {margin-bottom: 1rem; padding-top: .6rem;}
.newsDate .mbx {color: #666666;} 
.newsDate .mbx {display: flex; flex-wrap: wrap; align-items: center;color: #666666;}
.newsDate .mbx img {margin-right: .1rem; margin-bottom: .05rem;}
.newsDate .mbx a {margin: 0 .1rem;}
.newsDate .mbx a:hover {color: #003894;}
.newsDate .box {margin-top: .5rem; display: flex; justify-content: space-between; align-items: flex-start;}
.newsDate .box .left {width: 100%; flex-shrink: 0;}
.newsDate .title {padding-bottom: .4rem; border-bottom: 1px solid #DEDEDE;}
.newsDate .title .time {color: #333333; font-size: var(--font20);}
.newsDate .title strong {font-weight: 700;color: #333333; margin-top: .3rem; font-size: var(--font40); display: block;}
.newsDate .editbox {padding: .3rem 0;}
.newsPage {display: flex; align-items: center; justify-content: space-between;border-top: 1px solid #DEDEDE; padding-top: .5rem;}
.newsPage a {display: flex; align-items: center;}
.newsPage a .icBox {display: flex;}
.newsPage a span {color: #999999; font-size: var(--font14); margin-left: 10px;}
.newsPage a.next span {margin-left: 0; margin-right: 10px;}
.newsPage a.prev svg {transform: rotate(-180deg);}
.newsPage a:hover span {color: #003894;}
.newsPage a:hover svg path {fill: #003894;}
.newsDate .right {position: sticky; top: 1rem;}
.newsDate .right .linksBox {width: 100px; background: #f0f0f2; margin-top: .3rem; padding: .3rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.newsDate .right .linksBox .tit {color: #b4b4bd;}
.newsDate .right ul li {margin-top: .25rem;}
.newsDate .right ul li a {width: 30px; height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #aeaeaf; transition: .5s;}
.newsDate .right ul li svg {max-width: 100%;}
.newsDate .right ul li svg path {fill: #fff;}
.newsDate .right ul li:hover a {background: #fff;}
.newsDate .right ul li:nth-child(1):hover a {background: #333;}
.newsDate .right ul li:hover svg path {fill: revert-layer;}



.shipping-table{width: 100%!important; border-collapse: collapse; border-spacing: 0;padding: 0;margin: 0; border: 2px solid #cecece; box-sizing: border-box}

.newslist li .con h5{font-size: var(--font30);}

.wap-table{display: none}


.blue{color: #003894}
.red{color:#a90025}