/* reset */
*{ margin: 0; padding: 0; border: 0; box-sizing: border-box;position: relative;}
.container-k { max-width: calc(50vw + 512px); margin: 0 auto; width: 100%;}
.text_box{text-align: justify;}
menu, ol, ul,li{ list-style: none; }
ul{padding:0;margin: 0;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { max-width: 100%; }
.radius{border-radius: var(--fontS16);overflow: hidden;}
.grid{display: grid;}
.grid-column{grid-auto-flow: column dense;}
/* reset end */

/* UI theme */
@font-face {
    font-family: "Outfit-bold";
    src: url(../fonts/Outfit-Bold.ttf);
}
@font-face {
    font-family: "Outfit";
    src: url(../fonts/Outfit-Light.ttf);
}
.en{ font-family: "Outfit"}
:root {
    --main-color: #0071BC;
    --fontS12: calc(10.0px + 0.1vw);
    --fontS14: calc(11.0px + 0.16vw);
    --fontS16: calc(12.0px + 0.21vw);
    --fontS18: calc(13.0px + 0.26vw);
    --fontS20: calc(14.0px + 0.31vw);
    --fontS22: calc(15.0px + 0.37vw);
    --fontS24: calc(16.0px + 0.42vw);
    --fontS26: calc(17.0px + 0.47vw);
    --fontS28: calc(18.0px + 0.52vw);
    --fontS30: calc(19.0px + 0.58vw);
    --fontS32: calc(19.0px + 0.68vw);
    --fontS34: calc(20.0px + 0.73vw);
    --fontS36: calc(21.0px + 0.78vw);
    --fontS38: calc(22.0px + 0.84vw);
    --fontS40: calc(22.0px + 0.94vw);
    --fontS42: calc(23.0px + 0.99vw);
    --fontS44: calc(23.0px + 1.1vw);
    --fontS46: calc(24.0px + 1.15vw);
    --fontS48: calc(24.0px + 1.26vw);
    --fontS50: calc(25.0px + 1.31vw);
    --fontS52: calc(25.0px + 1.41vw);
    --fontS54: calc(26.0px + 1.46vw);
    --fontS56: calc(26.0px + 1.57vw);
    --fontS58: calc(27.0px + 1.62vw);
    --fontS60: calc(27.0px + 1.73vw);
    --fontS62: calc(28.0px + 1.78vw);
    --fontS64: calc(28.0px + 1.88vw);
    --fontS72: calc(31.0px + 2.14vw);
    --fontS80: calc(34.0px + 2.41vw);
    --fontS88: calc(37.0px + 2.67vw);
    --fontS96: calc(39.0px + 2.98vw);
    --fontS104: calc(42.0px + 3.24vw);
    --fontS112: calc(45.0px + 3.5vw);
    --fontS120: calc(47.0px + 3.82vw);
    --fontS128: calc(49.0px + 4.13vw);
    --fontS136: calc(52.0px + 4.39vw);
    --fontS144: calc(54.0px + 4.71vw);
    --fontS152: calc(56.0px + 5.02vw);
    --fontS160: calc(58.0px + 5.33vw);
    --fontS168: calc(60.0px + 5.65vw);
    --fontS176: calc(62.0px + 5.96vw);
    --fontS184: calc(64.0px + 6.28vw);
    --fontS192: calc(66.0px + 6.59vw);
    --fontS200: calc(68.0px + 6.9vw);
    --fontS208: calc(70.0px + 7.22vw);
    --fontS216: calc(71.0px + 7.58vw);
    --fontS224: calc(73.0px + 7.9vw);
    --fontS232: calc(75.0px + 8.21vw);
    --fontS240: calc(76.0px + 8.58vw);
    --fontS248: calc(78.0px + 8.89vw);
    --fontS256: calc(79.0px + 9.26vw);
}
.fontS12 { font-size: var(--fontS12) } .fontS14 { font-size: var(--fontS14) } .fontS16 { font-size: var(--fontS16) } .fontS18 { font-size: var(--fontS18) } .fontS20 { font-size: var(--fontS20) } .fontS22 { font-size: var(--fontS22) } .fontS24 { font-size: var(--fontS24) } .fontS26 { font-size: var(--fontS26) } .fontS28 { font-size: var(--fontS28) } .fontS30 { font-size: var(--fontS30) } .fontS32 { font-size: var(--fontS32) } .fontS34 { font-size: var(--fontS34) } .fontS36 { font-size: var(--fontS36) } .fontS38 { font-size: var(--fontS38) } .fontS40 { font-size: var(--fontS40) } .fontS42 { font-size: var(--fontS42) } .fontS44 { font-size: var(--fontS44) } .fontS46 { font-size: var(--fontS46) } .fontS48 { font-size: var(--fontS48) } .fontS50 { font-size: var(--fontS50) } .fontS52 { font-size: var(--fontS52) } .fontS54 { font-size: var(--fontS54) } .fontS56 { font-size: var(--fontS56) } .fontS58 { font-size: var(--fontS58) } .fontS60 { font-size: var(--fontS60) } .fontS62 { font-size: var(--fontS62) } .fontS64 { font-size: var(--fontS64) } .fontS72 { font-size: var(--fontS72) } .fontS80 { font-size: var(--fontS80) } .fontS88 { font-size: var(--fontS88) } .fontS96 { font-size: var(--fontS96) } .fontS104 { font-size: var(--fontS104) } .fontS112 { font-size: var(--fontS112) } .fontS120 { font-size: var(--fontS120) } .fontS128 { font-size: var(--fontS128) } .fontS136 { font-size: var(--fontS136) } .fontS144 { font-size: var(--fontS144) } .fontS152 { font-size: var(--fontS152) } .fontS160 { font-size: var(--fontS160) } .fontS168 { font-size: var(--fontS168) } .fontS176 { font-size: var(--fontS176) } .fontS184 { font-size: var(--fontS184) } .fontS192 { font-size: var(--fontS192) } .fontS200 { font-size: var(--fontS200) } .fontS208 { font-size: var(--fontS208) } .fontS216 { font-size: var(--fontS216) } .fontS224 { font-size: var(--fontS224) } .fontS232 { font-size: var(--fontS232) } .fontS240 { font-size: var(--fontS240) } .fontS248 { font-size: var(--fontS248) } .fontS256 { font-size: var(--fontS256) }
input { border: 0; background-color: #fff; display: block; outline: none; }
button { background-color: #fff; border: none; cursor: pointer; }
html{font-size: var(--fontS16);}
body { color: #666; font-size: var(--fontS14); line-height: 1.5; font-family: "微软雅黑 light","微软雅黑", "Microsoft Yahei"; }
.text-center{text-align: center;}
a { color: #333; font-size: var(--fontS16);text-decoration: none; font-weight: 100;}
a:hover { color: var(--main-color);}

/* UI theme end */
.toptip { 
    height: var(--fontS42);line-height:  var(--fontS42); background-color: #fff;
    position: fixed; top: 0; z-index: 99;display: flex;align-items: center;left: calc(50% - var(--fontS120)/2);
    border-radius: 0 0 100px 100px/0 0 100px 100px;overflow: hidden;padding:0 30px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.toptip>span{padding-left: var(--fontS16);}
.toptip>form{height: var(--fontS42);padding:0 var(--fontS16);display: flex;align-items: center;background-color: #fff;}

@media screen and (max-width:1080px) {
    .toptip{display: none;}
    .toptip{height: 42px;}
    .toptip>form{height: 42px;}
}
/* nav 导航菜单 */
.svg-radio{position: fixed;right: var(--fontS120);top:var(--fontS42);z-index: 99;display: none;}
.custom_nav { background-color: #fff; position: fixed; right: 0; top: 0; z-index: 999; height: 100%; width: var(--fontS120); padding-top: var(--fontS120);box-shadow: 0 0 4px rgba(73, 129, 231, 0.324);}
.custom_nav ul li{position: relative;}
.custom_nav ul li a { padding: var(--fontS24) 0; letter-spacing: 2px; text-align: center; display: block; margin: 0 auto; font-size: var(--fontS16) }
.custom_nav .btn_navlist { height: var(--fontS120); width: var(--fontS120); position: fixed; box-sizing: border-box; z-index: 999; top: 0; right: 0; cursor: pointer;}
.custom_nav .btn_navlist>div { width: 3px; height: var(--fontS40); background: var(--main-color);transition: 0.3s ease; border-radius: 2px; transform-origin: center center;position: absolute;left:50%;top:calc(50% - var(--fontS40)/2)}
.custom_nav .english{position: absolute;bottom:var(--fontS24);width: 100%;text-align: center;font-size: var(--fontS14);}
.custom_nav .return_top{position: fixed;bottom:var(--fontS64);right:0;width: var(--fontS120);height: var(--fontS64);display: flex;align-items: center;justify-content: center;cursor: pointer;}
.custom_nav .return_top svg{fill:var(--main-color);width: var(--fontS36);height: var(--fontS36);}

@media screen and (max-width:1080px) {
    .custom_nav .return_top{background-color: #fff;height: var(--fontS88);width: var(--fontS88);border-radius: 12px;right:20px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);}
    
}
@keyframes watermove{
    0%{
        border-radius:62% 38% 65% 35% / 57% 40% 60% 43%;
    }
    50%{
        border-radius:33% 67% 39% 61% / 39% 61% 39% 61%;
    }
    100%{
        border-radius:62% 38% 65% 35% / 57% 40% 60% 43%;
    }
    /* 0%{
        border-radius: 39% 61% 68% 32% / 72% 31% 69% 28%;
    }
    40%{
        border-radius: 40% 60% 31% 69% / 42% 58% 50% 50%;
    } */
    /* 20%{
        border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%;
    } */
    /* 40%{
        border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%;
    }
    60%{
        border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;
    } */
    /* 80%{
        border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;
    }
    100%{
        border-radius: 39% 61% 68% 32% / 72% 31% 69% 28%;
    } */
}
.custom_nav ul li::after{
    content: "";position: absolute;width: 80%;height: 80%;z-index: -1;top:10%;left:10%;
    border-radius:62% 38% 65% 35% / 57% 40% 60% 43%;transition: 0.3s ease;opacity: 0;
    box-shadow:
    inset 2px -2px 6px rgba(76, 90, 238, 0.2)
    /* 10px 10px 20px rgba(0, 0, 0, 0.3),
    15px 15px 30px rgba(0, 0, 0, 0.05),
    inset -10px -10px 15px rgba(255, 255, 254, 0.83); */
}
.custom_nav ul li:hover::after,.custom_nav ul li.active::after{
    /* border-radius:40% 40% 40% 40% / 30% 35% 55% 50%; */
    opacity: 1;
    animation: watermove 4s linear infinite;
    /* content: "";position: absolute;width: 80%;height: 80%;z-index: -1;top:10%;left:10%;
    
    box-shadow:
    inset 0 0 6px rgba(76, 90, 238, 0.2) */
    /* 10px 10px 20px rgba(0, 0, 0, 0.3),
    15px 15px 30px rgba(0, 0, 0, 0.05),
    inset -10px -10px 15px rgba(255, 255, 254, 0.83); */
}
.custom_nav ul li:hover a,.custom_nav ul li.active a{font-weight: bold;}
.btn_navlist>div.one {transform: translate(6px,0);}
.btn_navlist>div.two {height: var(--fontS28);transform: translate(-6px,0);}
.btn_navlistclose>div.one { transform: rotateZ(45deg);}
.btn_navlistclose>div.two { transform: rotateZ(-45deg);height: var(--fontS40);}

@media screen and (max-width:1080px) {
    .custom_nav{height: var(--fontS120);border-bottom-left-radius: calc(var(--fontS120)/2);background-color: rgba(255, 255, 255, 0.8);}
    .custom_nav .navlist{position: absolute;right:-20vw;top:var(--fontS120);}
    .custom_nav .english{display: none;}
}


.nav_drop{
    padding:0 var(--fontS60);
    position: fixed;top: 0;left: 0;bottom:0;right:var(--fontS120);background-color: rgba(255, 255, 255, 1);z-index: 998;
    display: flex;align-items: center;justify-content: center;flex-direction: column;
    transition: 0.3s ease-in-out;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.nav_drop .search_box button svg{width: var(--fontS50);height: var(--fontS50);}
.nav_drop .search_box input,.nav_drop .search_box button{background-color: rgb(232, 240, 254);height: var(--fontS80);font-size: calc(20px + 0.5vw);}
.nav_drop .search_box form{background-color: rgb(232, 240, 254);height: var(--fontS80);display: flex;align-items: center;justify-content: center;border-radius: var(--fontS80);padding:0 var(--fontS40);overflow: hidden;}
.nav_drop a{color:#333;font-size: calc(14px + 0.5vw);}
.nav_drop.nav_hide{transform: translate3d(-100%,0,0);opacity: 0.2;}
.nav_drop .main_nav{display: flex;margin: var(--fontS20) auto;}
.nav_drop a{padding:0 calc(4px + 0.1vw);}
.nav_drop a:hover{color: var(--main-color);}
.nav_drop .drop_pro{display: flex;flex-wrap: wrap;justify-content: center;}
.nav_drop .drop_pro a{font-size: calc(14px + 0.3vw);writing-mode:vertical-rl;line-height: 1.2;letter-spacing: .2ch;display: block;max-height: 20vh;}
.nav_drop .title{text-align: center;line-height: 1.2;margin: var(--fontS20) auto;color:var(--main-color)}

.nav_drop .drop_pro a{transition: .3s;}
.drop_pro a::after{
    transition: .3s;content: "";position: absolute;top:-20px;left: 50%;right: 0;height: 0;opacity: 0;
    transform: translateX(-50%);width: 0px;border-top:10px solid var(--main-color);border:calc(6px + 0.2vw) solid transparent;border-top-color:var(--main-color);
}
.drop_pro a:hover,.drop_pro a.active{color: var(--main-color);transform: translateY(20px);}
.drop_pro a:hover::after,.drop_pro a.active::after{opacity: 1;}
@media screen and (max-width:1080px) {
    .nav_drop{right:0;}
    .nav_drop .main_nav{margin:12px auto;}
    .nav_drop .title{margin:12px auto;}
    .nav_drop .title .en{display: none;}
    .nav_drop .drop_pro a{font-size: calc(12px + 0.2vw);line-height: 1;letter-spacing: .1ch;}
    .nav_drop .search_box input,.nav_drop .search_box button{height: var(--fontS60);font-size: calc(14px + 0.3vw);}
    .nav_drop{ padding:0 12px;}

}

/* nav 导航菜单 end */

.content { padding-right: var(--fontS120); position: relative; }
@media screen and (max-width:1080px) {
    .content { padding-right: 0;}
}
.main_banner {
    height: 60vw;
    position: relative;
    max-height: 800px;
    min-height: 400px;
}

.main_banner .swiper-slide img{
    width:100%;
    height:auto;
    min-height:100%;
    transition:1s linear 2s;
    transform:scale(1.1,1.1);
}

.main_banner .swiper-slide-active img,.main_banner .swiper-slide-duplicate-active img{
    transition:6s linear;
    transform:scale(1,1);
}	
.main_banner .swiper-slide-active .title1{
    animation: fadeInDown 1s .3s ease-in-out both;
}
.main_banner .swiper-slide-active .title2{
    animation: fadeInDown 1s ease-in-out both;
}
.main_banner .swiper-slide-active .title3{
    animation: fadeInDown 1s .5s ease-in-out both;
}


.swiper-banner{
    --swiper-theme-color:#fff;
}
.main_banner .swiper .swiper-pagination{
    bottom:var(--fontS144);
}
.main_banner .swiper .swiper-pagination .swiper-pagination-bullet{
    width: var(--fontS48);height: var(--fontS14);border-radius: var(--fontS14);
}
.main_banner .swiper {
    height: 100%;
    width: 100%;
}
.main_banner .autoplay-progress { position: absolute; right: 50%; bottom: 20%; z-index: 999; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--swiper-theme-color); }
.main_banner .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0px; z-index: 999; width: 100%; height: 100%; stroke-width: 4px; stroke: var(--swiper-theme-color); fill: none; stroke-dashoffset: calc(125.6 * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg); }
.main_banner .banner_logo{position: absolute;left: var(--fontS44);top:var(--fontS44);z-index: 1;border-radius: var(--fontS24);background-color: #fff;box-shadow: 0 0 10px #fff;overflow: hidden;padding: var(--fontS14);max-width: 10%;}
.main_banner .banner_logo img{max-width: 100%;object-fit: contain;height: 100%;}
.main_banner .swiper .swiper-slide {
    color: #fff;
}
.main_banner .swiper .swiper-slide .img_box{width: 100%;height: 100%;}
.main_banner .swiper .swiper-slide .img_box img{width: 100%;height: 100%;object-fit: cover;}
.main_banner .swiper .swiper-slide .text_box {
    position: absolute;left: 20%;top:var(--fontS160);bottom: var(--fontS200);right:20%;
    display: flex;justify-content: center;flex-direction: column;
}
.main_banner .swiper .swiper-slide .text_box >* {text-shadow: 0 0 10px rgba(12, 17, 50, 0.285);text-align: right;}
.main_banner .swiper .swiper-slide .text_box .title2{font-size: var(--fontS88);}
.main_banner .swiper .swiper-slide .text_box h4{font-size: var(--fontS40);}
.main_banner .swiper .swiper-slide .text_box h4.en{font-weight: 200;}
.main_banner .pro_links { position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.3); height: var(--fontS120); overflow: hidden; z-index: 1; color: #fff; }
.main_banner .pro_links ul { height: 100%; display: grid; grid-template-columns: repeat(6, 1fr); }
.main_banner .pro_links ul li { overflow: hidden; transition: 0.4s; }
.main_banner .pro_links ul li:hover{ background-color: var(--main-color); }
.main_banner .pro_links ul li a { perspective: 700px; display: block;width: 100%;height: 100%;position: relative; }
.main_banner .pro_links ul li .icon { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; height: 100%; }
.main_banner .pro_links ul li .icon svg { margin-bottom: 0; width: var(--fontS44); height: var(--fontS44); display: block;fill: #fff;margin-bottom: 12px;}
.main_banner .pro_links ul li .icon img { margin-bottom: 0; width: var(--fontS44); height: var(--fontS44); display: block;margin-bottom: 12px;object-fit: contain;}
.main_banner .pro_links ul li .icon .title{ font-size: var(--fontS18); }
.main_banner .pro_links ul li .img_box img{ width: 100%;height: 100%;object-fit: cover; }
.main_banner .pro_links ul li .img_box { position: absolute;z-index: 99;opacity: 0;width: 90%;height: 90%;transition: all 0.5s ease;transform-origin: 50% 100%;transform:rotateX(-90deg) translate3d(0%, -50%, 0) scale(0.6);;left: 5%;top:5%;border-radius: 12px; }
.main_banner .pro_links ul li:hover .img_box { opacity: 0.9; transform:rotateX(0deg) scale(1) translateY(0%); }
@media screen and (max-width:1080px) {
    .main_banner .banner_logo{padding:4px;border-radius: 0;left: 0;top:0;border-bottom-right-radius: 12px;height: var(--fontS120);display: flex;align-items: center;justify-content: center; width: var(--fontS120);max-width: 20%;}
    /* .main_banner .pro_links ul {grid-template: repeat(2, 1fr)/repeat(4, 1fr); } */
    .main_banner .swiper .swiper-slide .text_box { left: 10%;right:10%; }
    .main_banner .pro_links ul li .icon svg { margin-bottom: 0;}
    .main_banner .pro_links ul li .icon .title{display: none;}
    .main_banner .swiper .swiper-slide .text_box .title2{font-size: var(--fontS80);}
    .main_banner .swiper .swiper-slide .text_box .title1{font-size: var(--fontS32);}

}


/* 关于我们 */
.main_about { background-color: #f4f4f4; padding: var(--fontS80) var(--fontS32); }
.main_about .container-k{ display: grid;gap:var(--fontS60); grid-template-columns: 1fr 1fr; align-items: center; }
.main_about .service { display: grid; gap:var(--fontS32); grid-template: repeat(3, 1fr)/repeat(3, 1fr);perspective:2000px }
.main_about .service li { background-color: #DAEBFE; }
.main_about .service li a { display: block; height: 100%; }
.main_about .service li a img { width: 100%; height: 100%; object-fit: cover; }
.main_about .service li:nth-of-type(1) { border-top-left-radius: 300px; padding: 20px; display: flex; align-items: end; justify-content: end; flex-direction: column; }
.main_about .service li:nth-last-of-type(1) { border-bottom-right-radius:  300px; padding: 20px; }
.main_about .company .num_list li{ margin-top: var(--fontS32); }
@media screen and (max-width:1080px) {
    .main_about .container-k{grid-template-columns: 1fr;}
}
@media screen and (max-width:600px) {
    .main_about .service li:nth-of-type(1){padding:12px}
    .main_about .service li:nth-last-of-type(1){padding:12px}
    .main_about .service li:nth-of-type(1) .en{font-size: 20px;}
    .main_about .service li:nth-last-of-type(1) .en{font-size: 20px;}
    .main_about .service li:nth-of-type(1) svg{width: 40px;height: 40px;}
}
@media screen and (max-width:430px) {
    .main_about .service{gap:4px;}
    .main_about .service li:nth-of-type(1) .en{font-size: 16px;}
    .main_about .service li:nth-last-of-type(1) .en{font-size: 16px;}
}
.main_news { padding: var(--fontS32) var(--fontS32) var(--fontS60);position: relative;background-color: #fff; }
.title_icon{
    display: flex;align-items: center;margin-bottom: var(--fontS24);
    margin:var(--fontS24) auto;
    /* width: 100%; */
    justify-content: center;
    /* border-bottom-left-radius:400px;border-bottom-right-radius:400px; */
    border-radius: 10% 10% 48% 48% / 30% 30% 100% 100%;
    background-color: rgba(159, 174, 235, 0.097);
    background: none;
    padding:var(--fontS20) var(--fontS40) var(--fontS40) var(--fontS40);
}
.title_icon .title{font-size: var(--fontS40);font-weight: 100;line-height: 1;}
.title_icon svg{width: 40px;height: 40px;margin-right: var(--fontS12);fill:#666;}
.main_partern .title_icon{background: none;}
.main_partern { background-color: #f4f4f4; padding: var(--fontS32) var(--fontS32) var(--fontS60) ; }
.main_partern .grid{ margin-top: var(--fontS64); grid-template:repeat(3,1fr)/repeat(5,1fr); grid-auto-flow: row dense; gap:var(--fontS32); }
.main_partern .grid img{width: 100%;height: 100%;object-fit:contain;}
.main_partern .grid>div{background-color: #fff;border-radius: var(--fontS16);border: 1px solid #eee;overflow: hidden;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);padding:var(--fontS24)}
.main_partern .grid>div:nth-child(5n+1){
    transform: translateY(-50%);
}
.main_partern .swiper-partner .swiper-slide div{background-color: #fff; padding: var(--fontS12);border-radius: var(--fontS12);box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);margin: 12px;}
.main_partern .swiper-partner img{width: 100%;height: 100%;object-fit:contain;}
.main_partern .grid>div:nth-child(5n+3){
    transform: translateY(-50%);
}
.main_partern .grid>div:nth-child(5n+5){
    transform: translateY(-50%);
}

@media screen and (max-width:1080px) {
    .main_partern .grid{
        margin-top: 0;
        grid-template:repeat(5,1fr)/repeat(3,1fr);
    }
    .main_partern .grid>div:nth-child(5n+1){
        transform: translateY(0);
    }
    .main_partern .grid>div:nth-child(5n+3){
        transform: translateY(0);
    }
    .main_partern .grid>div:nth-child(5n+5){
        transform: translateY(0);
    }
}


.main_pro {
    background-color: #e4e7f9;
    width: 100%;
    padding: var(--fontS80) var(--fontS32);
}
.main_pro .swiper-slide .swiper{
    overflow: hidden;
    padding:24px 24px 40px;
}
.main_pro .swiper-slide .swiper-slide{
    border-radius: 32px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);background-color: #fff;overflow: hidden;height: 100%;
}
.main_pro .container-k{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main_pro .container-k>*{width: 48%;}
@media screen and (max-width:1080px) {
    .main_pro .swiper-slide .swiper{margin-top: 20px;padding:0 0 30px;}
    .main_pro .swiper-slide .swiper-slide{box-shadow: none;}
    .main_pro .container-k{ flex-wrap: wrap; }
    .main_pro .container-k>*{width: 100%;}
}

.main_pro .swiper_box{order: 1;}
.main_pro .pro-two {
    order: 0;
    gap: 4px;
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-template:
        ". . a a a a a a . . . ." var(--fontS48) 
        ". b b b b b b . . . . ." var(--fontS48) 
        "c c c c c c . . z z z z" var(--fontS48) 
        ". . . . . . . . z z z z" var(--fontS48) 
        ". d d d d d d . z z z z" var(--fontS48) 
        ". . e e e e e e . . . ." var(--fontS48) 
        ". . . f f f f f f . . ." var(--fontS48) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

}
.main_pro .pro-three {
    order:2;
    gap: 4px;
    position: relative;
    display: grid;
    grid-auto-flow: row;
    grid-template:
        ". . a a a a a a . . . ." var(--fontS48) 
        ". . . . . b b b b b . ." var(--fontS48) 
        "z z z z . . . c c c c c" var(--fontS48) 
        "z z z z . . d d d d d ." var(--fontS48) 
        "z z z z . e e e e e . ." var(--fontS48) 
        ". . . . f f f f f . . ." var(--fontS48) 
        ". . g g g g g g . . . ." var(--fontS48) / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

}

.main_pro ul li { border: 1px solid #95c2f5; height: 100%; border-radius: var(--fontS24); }
.main_pro ul li a { color: #666; text-align: center; display: block; height: 100%; line-height: 100%; display: flex; align-items: center; justify-content: center; font-size: var(--fontS20); }
.main_pro ul li:nth-of-type(1) { grid-area: a; } .main_pro ul li:nth-of-type(2) { grid-area: b; } .main_pro ul li:nth-of-type(3) { grid-area: c; } .main_pro ul li:nth-of-type(4) { grid-area: d; } .main_pro ul li:nth-of-type(5) { grid-area: e; } .main_pro ul li:nth-of-type(6) { grid-area: f; } .main_pro ul li:nth-of-type(7) { grid-area: g; } .main_pro ul li:nth-of-type(8) { grid-area: h; } .main_pro ul li:nth-of-type(9) { grid-area: i; } .main_pro ul li:nth-of-type(10) { grid-area: j; } .main_pro ul li:nth-of-type(11) { grid-area: k; } .main_pro ul li:nth-of-type(12) { grid-area: l; } .main_pro ul li:nth-of-type(13) { grid-area: m; } .main_pro ul li:nth-of-type(14) { grid-area: n; } .main_pro ul li:nth-of-type(15) { grid-area: o; }
.main_pro ul li.active{background-color: var(--main-color);}
.main_pro ul li.active a{color: #fff;}
.main_pro ul li:hover{background-color: var(--main-color);}
.main_pro ul li:hover a{color: #fff;}
.main_pro ul .center {border: 1px solid #95c2f5; background-color: #EDF1F6;
     border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; 
    grid-area:z}
@media screen and (max-width:1080px) {
    .main_pro ul.pro-two,.main_pro ul.pro-three{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;order: -1;}
    .main_pro ul li{padding:12px;}
    .main_pro ul .center{width: 100%;height: auto;border-radius: 32px;padding:0;left: 0;top:0;transform: translate(0,0);position: relative;background-color: rgba(0, 0, 0, 0);border:none;display: flex;flex-direction: row;justify-content: flex-start;gap: 12px;margin-bottom: 12px;}
}
@media screen and (max-width:576px) {
    .main_pro ul li{border-radius: 0;padding:8px}
    .main_pro ul li a{font-size: 12px;}
}
.swiper-slide-active img,.swiper-slide-duplicate-active img{ transition:6s linear; transform:scale(1,1); }	
.main_pro .swiper .swiper-slide .pro_item{ display: flex; /* align-items: center; */ flex-wrap: wrap;height: 100%;}
.hover-scale{overflow: hidden;}
.hover-scale img{transition: 0.4s ease;display: block;}
.hover-scale:hover img{transform: scale(1.05);}
.main_pro .swiper .swiper-slide .pro_item .more{position: absolute;right:var(--fontS32);bottom:var(--fontS32);line-height: 1;}
.main_pro .swiper .swiper-slide .img_box {
    /* border-radius:30% 70% 30% 70% / 30% 30% 70% 70%; */
    overflow: hidden;
    width: 50%;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border:3px solid rgba(255, 255, 255, 0.5); */
    /* border-radius: var(--fontS32); */
}
.main_pro .swiper .swiper-slide .text_box { width: 50%; padding:var(--fontS32); font-size: var(--fontS16);padding-bottom: var(--fontS64); }
.main_pro .swiper .swiper-slide .text_box .name{font-size: var(--fontS24);color:000;font-weight: bold;border-bottom: 1px solid #eee;padding-bottom: var(--fontS24);display: block;}
.main_pro .swiper .swiper-slide .text_box .text{margin: var(--fontS24) 0;color:#999;}
.main_pro .swiper .swiper-slide .text_box .info{line-height: 2;font-size: var(--fontS16);color:#999;}
.main_pro .swiper .swiper-slide .img_box{position: relative;min-height: 400px;}
.main_pro .swiper .swiper-slide .img_box img { width: 100%; height: 100%; object-fit: cover; /* border-radius: var(--fontS24); */ position: absolute;}
#content { background-color: black; height: calc(100vh - 40px); overflow: hidden; }
.main_product { width: 200%; height: calc(100vh - 40px); display: flex; flex-direction: row; }
.main_product .part { flex: 1 }
@media screen and (max-width:576px) {
    
    .main_pro .swiper .swiper-slide .img_box{width: 100%;min-height: 200px;}
    .main_pro .swiper .swiper-slide .text_box{width: 100%;}
}


.main_footer { background-color: rgb(200, 240, 255); }
/* footer 底部 */
.main_footer .footer {
    padding: var(--fontS40) var(--fontS20);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}
.main_footer .footer .logo{
    margin-bottom: var(--fontS24);}
.main_footer .footer .logo svg {
    display: block;
    max-width: 100%;
}
.main_footer .footer .erweima {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.main_footer .footer .erweima div {
    margin: 0;
    width: 46%;
}
.main_footer .footer .erweima div img {
    width: 100%;box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);border-radius: 6px;
}
.main_footer .footer .erweima div p {
    text-align: center;
    font-size: var(--fontS16);
    color: #333;
    line-height: 1.5;
}
.main_footer .footer .bottomnav ul *{
    color: #666;line-height: 1.5;font-weight: 400;transition: 0.4s;font-size: var(--fontS16);
}
.main_footer .footer .bottomnav ul li:hover {
    color: var(--main-color)
}
.main_footer .footer .bottomnav ul li a:hover {
    color: var(--main-color)
}
.main_footer .footerbottom {
    border-top: 1px solid rgba(22, 22, 22, 0.16);
    margin-top: var(--fontS20);
}
.main_footer .footerbottom *{color:#888;font-size: var(--fontS14);line-height: 2;}
.main_footer .footer h4 a{
    font-size: var(--fontS16);
    line-height: 2;
    color: #333;
    font-weight: bold;
}
.main_footer .footerbottom .links {
    border: 1px solid rgba(49, 49, 49, 0.284);
    padding:0 var(--fontS40);
    position: relative;
    float: right;
    margin-right: 0;
    cursor: pointer;
}
.main_footer .footerbottom .links .linksf {
    position: absolute;
    bottom: 30px;
    background: rgb(200, 240, 255);
    width: 300px;
    right:0;
    padding:var(--fontS14);
    border: 1px solid #29292949;
    display: none;
    text-align: center;
    overflow: auto;
    
}
.main_footer .footerbottom .links .linksf a {
    margin:0 var(--fontS14);
}
.main_footer .footerbottom {
    padding: 14px;
    line-height: 24px;
}
.main_footer .footerbottom .links:hover .linksf {
    display: flex;
    flex-wrap: wrap;
}
.footer_nav a{display: block;color:#666;font-size: var(--fontS14);line-height: 2;}
.footer .footer_span{color:#666;font-size: var(--fontS14);line-height: 2;}
@media screen and (max-width:1080px) {
    .main_footer .footerbottom .links .linksf{width: 100%;}
    .main_footer .footerbottom{display: flex;flex-direction: column;}
    .main_footer .footerbottom .links{float: none;text-align: center;order: 3;}
    .footer .footer_nav_box:nth-child(-n + 4){display: none;}
    .main_footer .footer {
        padding: var(--fontS40) var(--fontS20);
        align-items: center;justify-content: space-around;
    }
}
@media screen and (max-width:640px) {
    .main_footer .footer{justify-content: flex-start;flex-direction: column;align-items: flex-start;}
    .footer .footer_nav_box{width: 48%;}
    .footer .img_box{width: 48%;}
}
@media screen and (max-width:440px) {
    .footer .footer_nav_box{width: 100%;}
    .footer .img_box{width: 100%;max-width: 200px;}
    .main_footer .footer h4{margin-top: 12px;}
}
/* footer 底部 end */

.list_sum_date_more { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fontS32) }
.list_sum_date_more li a{padding: 0; display: grid; grid-template-columns: var(--fontS96) 2px 1fr; gap: var(--fontS24); align-items: center; }
.list_sum_date_more li .line { background-color: #eee; height: 100%; }
.list_sum_date_more li .date { text-align: center; }
.list_sum_date_more li .text_box { position: relative; }
.list_sum_date_more li .title { color: #333; font-weight: 800; overflow: hidden;font-size: var(--fontS20);margin-bottom: var(--fontS14);line-height: 1;transition:.6s;}
.list_sum_date_more li .day { font-weight: bold; color: #aaa; line-height: 1;font-size: var(--fontS40);transition:.6s;font-family: "Outfit";}
.list_sum_date_more li .year { color: #aaa; line-height: 1;font-size: var(--fontS16);font-family: "Outfit";}
.list_sum_date_more li .sum { line-height: 1.5; overflow: hidden; color: #666; height: calc(var(--fontS16)*3); font-size: var(--fontS16); }
.list_sum_date_more li .more { position: absolute; right: 0; top: 0; font-size: 12px; color: #aaa; display: none; }
.list_sum_date_more li:hover .title { color: var(--main-color); }
.list_sum_date_more li:hover .day { color: var(--main-color); }
@media screen and (max-width:1080px) {
    .list_sum_date_more{grid-template-columns: 1fr;}
    .list_sum_date_more li a{gap: 12px;}
}


.page_banner{
    padding: var(--fontS50) var(--fontS32);
    overflow: hidden;
    background-image: url(../images/page-banner.jpg);background-repeat: no-repeat;background-size: cover;
    background-position: center center;

}
.page_banner .container-k{display: flex;justify-content: space-between;align-items: center;}
.page_banner .container-k .en{font-size: calc(20px + 1vw);color:#aaa;text-align: right;line-height: 1.1;font-family: "Outfit-bold";}
.page_banner .container-k .title{font-size: calc(18px + 1vw);color:var(--main-color);text-align: right;line-height: 1.1;}
.page_banner img{width: 100%;height: 100%;object-fit: cover;}
.page_banner svg{width:calc(120px + 8vw);max-width: 40%;}
@media screen and (max-width:1080px) {
    .page_banner{
        padding: var(--fontS40) var(--fontS136) var(--fontS40) var(--fontS40);
    }  
}


.page-about .text_box p{text-indent: calc(var(--fontS16)*2);font-size: var(--fontS16);line-height: 2;color:#666;}
.page-about .about_num_cards{border-bottom: 1px solid #ddd;margin-bottom: var(--fontS32);
display: grid;grid-template-columns: repeat(4,1fr);}
.page-about .about_num_cards > div{padding:var(--fontS40) 0;}
.page-about .about_num_cards .bnum{line-height: 1;}
.page-about .about_num_cards .bnum sub{color:var(--main-color);}

@media screen and (max-width:992px){
    .page-about .about_num_cards{border-bottom: 0;grid-template-columns: repeat(2,1fr);padding:var(--fontS20) 0;margin-bottom: 0;}
    .page-about .about_num_cards > div{border:1px solid #ddd;padding:var(--fontS24) 0;}
    .page-about .about_num_cards > div:nth-child(1){border-right:0;border-bottom: 0;}
    .page-about .about_num_cards > div:nth-child(3){border-right:0;}
    .page-about .about_num_cards > div:nth-child(2){border-bottom: 0;}
    
}
.title_bline{font-size: var(--fontS36);color:var(--main-color);padding-bottom: var(--fontS24);border-bottom: 1px solid #ddd;}
.page-about .company{
    display: flex;justify-content: space-between;margin: var(--fontS40) 0;flex-wrap: wrap;
}
.page-about .company .text_box{width: 48%;}
.page-about .img_box{width: 48%;}
.page-about .img_box img{
    width: 100%;border-radius: var(--fontS24);position: absolute;left: 0;top:0;height: 50%;object-fit: cover;
}
.page-about .img_box img:nth-of-type(2){
    top:52%;height: 48%;
}
@media screen and (max-width:992px) {
    .page-about .company {margin-top: 0;}
    .page-about .company .text_box{width: 100%;order: 2;}
    .page-about .img_box{width: 100%;order:1;}
    .page-about .img_box img:nth-of-type(1){position: relative;height: auto;top:0;margin:0 auto var(--fontS32) auto;}
    .page-about .img_box img:nth-of-type(2){position: relative;height: auto;top:0;}
}
.page-about .service { display: grid; gap:var(--fontS24); grid-template: repeat(3, 1fr)/repeat(3, 1fr);perspective:2000px;height: 100%;}
.page-about .service li { background-color: #DAEBFE; }
.page-about .service li:nth-child(4){grid-row-end: span 2;}
.page-about .service li:nth-child(2){grid-row-end: span 2;}
.page-about .service li a { display: block; height: 100%;width: 100%;}
.page-about .service li a img { width: 100%; height: 100%; object-fit: cover;aspect-ratio: 5/3;}


.list_img_t{border:1px solid #ddd;border-radius: var(--fontS20);box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);overflow: hidden;display: block;}
.page-pro .grid{
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));gap: var(--fontS32);margin-top: var(--fontS32);margin-bottom: var(--fontS32);
}
@media screen and (max-width:1200px){
    .page-pro .grid{
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: var(--fontS20);
    }
}
@media screen and (max-width:576px){
    .page-pro .grid{
        grid-template-columns: 1fr 1fr;gap: var(--fontS20);
    }
}

.list_img_t .img_box{overflow: hidden;}
.list_img_t .img_box img{width: 100%;object-fit: cover;aspect-ratio: 3/2;}
.list_img_t .title{text-align: center;line-height: 1;padding:var(--fontS12) 0;font-size: var(--fontS16);}
.pro_nav{padding:0 var(--fontS12);}
.pro_nav .flex{display: flex;justify-content: center;padding:var(--fontS40) 0 var(--fontS24);flex-wrap: wrap;
    background-color: #f2f5ff;border-radius: var(--fontS20);margin-top: var(--fontS32);}
.pro_nav .flex a{line-height: 3;margin:0;border:1px solid #ddd;padding:0 20px;border-radius:50px;}
.pro_nav .flex>div>div{padding:0 12px;display: flex;gap:14px;flex-wrap: wrap;justify-content: center;margin: 20px 0;}
.pro_nav .flex h2{color:var(--main-color);text-align: center;}
.pro_nav .flex a{transition: .3s;}
.pro_nav .flex a:hover,.pro_nav .flex a.active{font-weight: bold;background-color: var(--main-color);color:#fff;}

@media screen and (max-width:992px){
.pro_nav .flex a{line-height: 2;margin:0;border:1px solid #ddd;padding:0 12px;border-radius:0;}
.pro_nav .flex>div>div{padding:0 6px;display: flex;gap:12px;margin: 12px 0;justify-content: flex-start;}

    /* .pro_nav .flex h2{margin-top:0;margin-bottom: 10px;text-align: center;} */
    /* .pro_nav .flex *{margin: 0 4px;} */
}
.page-pro{padding:0 var(--fontS12);}

.swiper-top-news{padding:var(--fontS40) 0;}
/* .swiper-top-news .top_news .text_box .title{font-size: var(--fontS24);color:#333;margin-bottom: var(--fontS24);line-height: 1.4;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} */
.swiper-top-news .top_news .card-title{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.swiper-top-news .top_news .info{font-size: var(--fontS16);line-height: 1.5;max-height: calc(var(--fontS16)*6);overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/* .swiper-top-news .top_news .img_box img{display: block;height: 100%;width: 100%;object-fit: cover;} */

.swiper-top-news .swiper-pagination .swiper-pagination-bullet{ width: var(--fontS36);height: 6px;border-radius:6px; }
.swiper-top-news .swiper-pagination .swiper-pagination-bullet-active{ background-color: var(--main-color); }
@media screen and (max-width:992px){
    .swiper-top-news .top_news .text_box .title{margin-bottom: 8px;}

}

.news_card{padding:var(--fontS20);background-color: #f4f4f4;border-radius: var(--fontS12);display: block;}
.news_card .title{font-size: var(--fontS18);font-weight: bold;}
.news_card .info{font-size: var(--fontS14);line-height: 1.6;max-height: calc(var(--fontS14) * 4.8);overflow: hidden;}
.news_card .date{font-size: var(--fontS12);margin: 8px 0;}
.card-list{
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));gap: var(--fontS32);padding:0 var(--fontS12);
}

@media screen and (max-width:1200px){
    .card-list{
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: var(--fontS20);
    }
}


/* .pro_nav a{border: 1px dashed #ddd;} */
/* .page-about .title{writing-mode:vertical-rl;line-height: 1.2;letter-spacing: .2ch;} */

/* 
输出设备的像素密度（分辨率）
@media (max-resolution: 300dpi) {} 
@media (resolution: 150dpi) {}

宽高比
@media (max-aspect-ratio: 3/2) {}


viewport 处于横向，即宽度大于高度
@media (orientation: landscape) {}

viewport 处于纵向，即高度大于等于宽度
@media (orientation: portrait) {}


*/


.page {text-align: center;padding:var(--fontS40) var(--fontS32)}
.page span, .page a { background-color: #f4f4f4; display: inline-block; height: 40px; line-height: 40px; padding: 0 16px;
    border-radius: 3px; margin-right: 6px; border: none;transition: .4s;}
.page select { border: none; outline: none; background-color: transparent; }
.page span{cursor:not-allowed;}
.page .current,.page .active { background-color: var(--main-color); color: #fff; }
.page .disabled { background-color: #f4f4f4; color: #888; }
.page a:hover{ background-color: var(--main-color); color: #fff; }
@media screen and (max-width:576px){
.page span, .page a {height: 32px; line-height: 32px; padding: 0 10px;margin-right: 2px; }
}
.page-detail{padding: var(--fontS40) 0;}
.page-detail .detail-title{font-size: var(--fontS32);text-align: center;border-bottom: 1px solid #ddd;padding-bottom: var(--fontS24);margin-bottom: var(--fontS24);}
.page-detail .detail-date{font-size: var(--fontS16);text-align: center;margin-bottom: var(--fontS24);}

.pro-card{}
.pro-card .card-title{font-size: var(--fontS24);line-height: 2;font-weight: bold;color:var(--main-color);margin-bottom: 12px;padding-left: 20px;}
.pro-card .card-title::after{content: "";position: absolute;left: 0;top:28%;height: 46%;width: 6px;background-color: var(--main-color);}
.swiper-pro-card{padding-bottom: 30px;}
.swiper-pro-card .swiper-slide{border:1px solid #ddd;border-radius: var(--fontS12);overflow: hidden;}
.swiper-pro-card img{display: block;object-fit: cover;aspect-ratio: 3/2;width: 100%;}
.swiper-pro-card .title{text-align: center;font-size: var(--fontS18);padding:0 var(--fontS14);border-bottom: 1px solid #ddd;line-height: 2;font-weight: bold;}
.swiper-pro-card .info{text-align: justify;font-size: var(--fontS14);padding:var(--fontS14)}
.swiper-pro img{display: block;}

.list-partners{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: var(--fontS20);
}
.list-partners .img_box{border:1px solid #ddd;border-radius: var(--fontS20);overflow: hidden;padding:20px;}
.list-partners .img_box img{width: 100%;height: 100%;object-fit: contain;}
@media screen and (max-width:576px){
    .list-partners{
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .list-partners .img_box{padding:10px;}
        

}

.fold-card{background-color: #f4f4f4;border-radius: 12px;padding:0 20px 20px 20px;margin-bottom: var(--fontS24);}
.fold-card .top{font-size: var(--fontS20);color:var(--main-color);font-weight: bold;display: flex;justify-content: space-between;cursor: pointer;padding-top: 20px;}
.fold-card .fold{height: 0;overflow: hidden;}
.fold-card .fold h3{margin-top: 12px;}
.fold-card .fold p{margin-top: 12px;}
.fold-card .fold .close_btn{background-color: #fff;text-align: center;width: 100px;margin: 0 auto;border-radius: 20px;cursor: pointer;}
.fold-card .fold .close_btn svg{width: var(--fontS40);fill:var(--main-color);height: auto;}
.fold-card .top svg{width: var(--fontS30);fill:var(--main-color);height: var(--fontS30);transition: .4s;}

.fold-card .top.active svg{transform: rotate(180deg);}

.icon-card{text-align: center;margin-bottom: var(--fontS24);}
.icon-card h4{font-size: var(--fontS20);}

.contact_map{height: 100%;width: 100%;border-radius: var(--fontS20);background-color: #f4f4f4;min-height: 400px;}

.pro-detail-table{grid-template-columns: 120px 1fr;border:1px solid #ddd;border-left: 1px solid #ddd;border-top: 4px solid var(--main-color);}
.pro-detail-table >*{padding:10px;line-height: 2;border-right: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.pro-detail-table h4{font-weight: normal;}
.pro-detail-title{color:var(--main-color);font-size: var(--fontS24);text-align: center;border-bottom: 1px solid #ddd;padding-bottom: var(--fontS16);margin-bottom: var(--fontS16);}
.pro-detail-formula{text-align: center;}
.pro-detail-formula *{max-width: 100%;height: auto;}



.pro-detail-top h1{color:var(--main-color);margin-bottom: var(--fontS24);line-height: 1;}

.pro-table-1{margin-bottom: var(--fontS24);border-top: 1px solid #ddd;}
.pro-table-1 > span{display: block;border-bottom: 1px solid #ddd;padding:12px 0;display: flex;}
.pro-table-1 > span .cont{font-weight: 600;width: calc(100% - 160px);}
.pro-table-1 > span .label{width: 160px;}


.pro-table-2{border-left:1px solid #ddd;border-top:1px solid #ddd;display: grid;grid-template-columns: repeat(4,1fr);}
.pro-table-2 *{border-bottom: 1px solid #ddd;padding:12px;border-right: 1px solid #ddd;}

.pro-detail-box{display: flex;justify-content: space-between;margin-bottom: var(--fontS32);}
.pro-detail-top{width: calc(64% - 80px - 4vw);}
.pro-detail-top .btn_download{position: absolute;right:0;top:4px;display: flex;align-items: center;cursor:pointer;z-index: 99;}
.pro-detail-top .btn_download svg{width: 24px;height: auto;margin-left: 10px;}
.pro-detail-top .btn_download span{color:#999}
.pro-detail-box .detail-swiper-pro{width: 36%;margin: 0;min-height: 300px;max-height: 50vh;}
.pro-detail-box .detail-swiper-pro-thumb{width: calc(60px + 2vw);margin: 0;}
.pro-detail-box .swiper-slide{border:1px solid #ddd;border-radius: var(--fontS12);overflow: hidden;}
.pro-detail-box img{border-radius: var(--fontS12);display: block;width: 100%;height: 100%;object-fit: cover;}

@media screen and (max-width:992px){
    .pro-detail-box{flex-wrap: wrap;}
    .pro-detail-top{width: 100%;}
    .pro-detail-box .detail-swiper-pro{width: calc(100% - 70px - 3vw);margin-bottom: var(--fontS24);}

}



.cont_tab_nav{display: flex;}
.cont_tab_nav span{padding:12px var(--fontS40);font-size: var(--fontS18);border:1px solid #dbe3f4;border-bottom: 0;cursor: pointer;}
.cont_tab_nav span.active{background-color:var(--main-color);color:#fff;}
.cont_info .info_box{display: none;overflow: hidden;}
.cont_info .info_box.show{display: block;}

.border_box{border:1px solid #dbe3f4;padding:12px;border-top: 4px solid var(--main-color);}


.ratio {
    position: relative;
    width: 100%;
  }
.ratio img{
height: 100%;
object-fit: cover;
width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-5x8 {
  --bs-aspect-ratio: 160%;
}
.ratio-3x4 {
  --bs-aspect-ratio: 133%;
}
.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}
.fold-5{position: relative;}
.fold-5 img{ width: calc(100% - (24px * 4));position: absolute;left: 0;top:0;transition: .3s;}
.fold-5 img:hover{transform: scale(1.2);}
.fold-5 img.big{transform: scale(2);z-index: 99;}
.fold-5 :nth-child(1){ margin-top: calc(24px * 4);margin-left: calc(24px * 0);z-index: 4; position: relative;}
.fold-5 :nth-child(2){ margin-top: calc(24px * 3);margin-left: calc(24px * 1);z-index: 3; }
.fold-5 :nth-child(3){ margin-top: calc(24px * 2);margin-left: calc(24px * 2);z-index: 2; }
.fold-5 :nth-child(4){ margin-top: calc(24px * 1);margin-left: calc(24px * 3);z-index: 1; }
.fold-5 :nth-child(5){ margin-top: calc(24px * 0);margin-left: calc(24px * 4);z-index: 0; }

.align-items-center{align-items: center;}
.border{border:2px solid #666;border-radius: 2px;}
.button-box{text-align: center;margin-top: 12px;}
.button-box span{padding:0;margin: 2px;display: inline-block;}
.button-box span.swiper-button-disabled{opacity: 0.3;}
.button-box span svg{display: block;}
.fixed-contain-img{position: fixed;left: 0;top:0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);display: none;z-index: 999;}
.fixed-contain-img::after{content: '';position: absolute;left: 0;top:5%;width: 100%;height: 64px;background-image: url(../images/honor/close.svg);background-position: center center;background-repeat: no-repeat;cursor: pointer;}
.fixed-contain-img.show{display: block;}
.fixed-contain-img img{object-fit: contain;width: 80%;height: 80%;margin: 10%;display: block;}