.marine{background-repeat:no-repeat;background-size:cover}
.marine .wmkc-inner .info{position:absolute;left:0;bottom:0;width:100%;padding:40px 0}
.marine .wmkc-inner .info .title{color:#fff;font-size:60px;font-weight:600;text-align:center;font-family:ClashDisplayVariable}
.marine .wmkc-inner .info .title span{color:#eec891}
.marine .wmkc-inner .info .txt{color:#fff;text-align:center;font-size:25px;padding:0 3%;font-weight:500}
.marine .wmkc-inner .info .list{display:flex;justify-content:space-between;flex-wrap:wrap;margin-top:20px}
.marine .wmkc-inner .info .list .item{width:24%;margin-top:20px;display:flex;flex-direction:column;justify-content:space-between;background-color:rgba(255,255,255,.2);padding:20px 10px;border-radius:20px;overflow:hidden;box-sizing:border-box;transition:all .2s linear}
.marine .wmkc-inner .info .list .item .tit{text-align:center;color:#fff;font-size:20px}
.marine .wmkc-inner .info .list .item .img{margin:20px 0;text-align:center}
.marine .wmkc-inner .info .list .item .more{display:flex;align-items:center;justify-content:flex-end;color:#fff;line-height:1;font-size:15px;margin-right:5px}
.marine .wmkc-inner .info .list .item .more img{margin-left:10px;width:40px;display:inline-block}
.marine .wmkc-inner .info .list .item:hover{transform:translateY(-5px)}
.marine .marine-mode1{padding:50px 0}
.marine .marine-mode1 .title{font-size:50px;color:#000f40;font-weight:600;font-family:ClashDisplayVariable}
.marine .marine-mode1 .list{margin-top:10px}
.marine .marine-mode1 .list .item{display:flex;margin-top:20px}
.marine .marine-mode1 .list .item .img{width:50%;overflow:hidden}
.marine .marine-mode1 .list .item .img img{width:100%;height:100%;object-fit:cover;display:block;transition:all .2s linear}
.marine .marine-mode1 .list .item .info{width:50%;padding:40px 60px;padding-bottom:80px;color:#fff;background-repeat:no-repeat;background-size:cover;position:relative}
.marine .marine-mode1 .list .item .info .tit{font-size:28px;font-family:ClashDisplayVariable}
.marine .marine-mode1 .list .item .info .text{margin-top:10px;font-size:20px}
.marine .marine-mode1 .list .item .info .more{color:#fff;position:absolute;right:40px;bottom:40px;display:flex;align-items:center;justify-content:flex-end;font-size:15px}
.marine .marine-mode1 .list .item .info .more img{margin-left:20px;width:40px}
.marine .marine-mode1 .list .item:hover .img img{transform:scale(1.02)}
.marine .marine-mode2{display:flex}
.marine .marine-mode2 .info{width:50%;background-size:cover;background-repeat:no-repeat}
.marine .marine-mode2 .info .info-box{margin-left:auto;padding:20px 40px 20px 10px;width:100%;max-width:620px;height:100%}
.marine .marine-mode2 .info .info-box .swiper-slide{align-items:center}
.marine .marine-mode2 .info #marineComment{height:560px;padding:20px 0}
.marine .marine-mode2 .info .title{font-size:30px;color:#fff;font-weight:600;margin:20px 0}
.marine .marine-mode2 .info .com-img{width:150px;height:150px;border-radius:50%;overflow:hidden;margin-right:20px}
.marine .marine-mode2 .info .txt{flex:1}
.marine .marine-mode2 .info .txt .tit{color:#fff;font-size:25px}
.marine .marine-mode2 .info .txt .desc{color:#fff;font-size:20px;margin-top:15px}
.marine .marine-mode2 .img{width:50%}
.marine .marine-mode2 .img img{width:100%;height:100%;object-fit:cover}
.marine .marine-mode3{background-repeat:no-repeat;background-size:cover;padding:40px 0;margin-top:40px}
.marine .marine-mode3 .title{font-size:50px;font-weight:600;color:#fff;text-align:center;font-family:ClashDisplayVariable}
.marine .marine-mode3 .txt{color:#fff;text-align:center;font-size:20px;margin:0 auto;max-width:990px}
.marine .marine-mode3 .wmkc-form{margin-top:30px}
.marine .marine-mode3 .wmkc-form .inquiry-form input{background-color:rgba(255,255,255,.85);border:1px solid #000}
.marine .marine-mode3 .wmkc-form .inquiry-form textarea{background-color:rgba(255,255,255,.85);border:1px solid #000}
.marine .marine-mode3 .wmkc-form .send-btn{margin:20px 0;background-color:#ffa200;border-radius:10px;color:#fff;font-weight:600;text-transform:uppercase;overflow:hidden}
.marine .marine-mode3 .wmkc-form .send-btn::before{background-color:rgba(255,255,255,.5)}
@media screen and (max-width:1280px){.marine .wmkc-inner .wmkc-ban{height:500px;object-position:top}
.marine .wmkc-inner .info{position:static}
}
@media screen and (max-width:1024px){.marine .wmkc-inner .info .title{font-size:42px}
.marine .wmkc-inner .info .txt{font-size:18px}
.marine .marine-mode1 .title{font-size:42px}
.marine .marine-mode1 .list .item .info{padding:30px 40px;padding-bottom:50px}
.marine .marine-mode1 .list .item .info .more{bottom:20px}
.marine .marine-mode2 .info .title{font-size:24px}
.marine .marine-mode2 .info .com-img{width:130px;height:130px}
.marine .marine-mode2 .info .txt .tit{font-size:20px}
.marine .marine-mode2 .info .txt .desc{font-size:16px}
.marine .marine-mode3 .title{font-size:42px}
}
@media screen and (max-width:768px){.marine .wmkc-inner .wmkc-ban{height:300px!important;min-height:auto!important}
.marine .wmkc-inner .info .list .item{width:49%}
.marine .wmkc-inner .info .list .item .tit{font-size:18px}
.marine .wmkc-inner .info .list .item .more img{width:26px}
.marine .wmkc-inner .info .title{font-size:24px}
.marine .wmkc-inner .info .txt{font-size:16px}
.marine .marine-mode1 .title{font-size:24px}
.marine .marine-mode1 .list .item{flex-wrap:wrap}
.marine .marine-mode1 .list .item .img{width:100%;overflow:hidden}
.marine .marine-mode1 .list .item .img img{transform:scale(1.07)}
.marine .marine-mode1 .list .item .info{width:100%;padding:20px;padding-bottom:50px;background-size:110%}
.marine .marine-mode1 .list .item .info .more{bottom:20px}
.marine .marine-mode1 .list .item .info .tit{font-size:24px}
.marine .marine-mode1 .list .item:nth-child(even){flex-direction:column-reverse}
.marine .marine-mode1 .list .item:nth-child(even) .info{background-position:left}
.marine .marine-mode2{flex-wrap:wrap;flex-direction:column-reverse}
.marine .marine-mode2 .img{width:100%}
.marine .marine-mode2 .info{width:100%}
.marine .marine-mode2 .info #marineComment{height:400px}
.marine .marine-mode2 .info .info-box{max-width:max-content;width:100%;padding:20px 15px;height:500px}
.marine .marine-mode2 .info .title{font-size:24px;margin-top:0}
.marine .marine-mode2 .info .com-img{width:100px;height:100px}
.marine .marine-mode2 .info .txt .tit{font-size:20px}
.marine .marine-mode2 .info .txt .desc{font-size:16px}
.marine .marine-mode3 .title{font-size:24px}
.marine .marine-mode3 .txt{font-size:16px}
}
@media screen and (max-width:500px){.marine .wmkc-inner .wmkc-ban{height:200px!important}
.marine .marine-mode1{padding:30px 0}
.marine .marine-mode1 .list .item .info{padding:10px;padding-bottom:40px}
.marine .marine-mode1 .list .item .info .tit{font-size:18px}
.marine .marine-mode1 .list .item .info .text{font-size:16px}
.marine .marine-mode1 .list .item .info .more{bottom:10px;right:10px}
.marine .marine-mode2 .info .title{font-size:22px}
.marine .marine-mode2 .info .com-img{width:80px;height:80px}
.marine .marine-mode2 .info .txt .tit{font-size:18px}
.marine .marine-mode2 .info .txt .desc{margin-top:10px}
}