.img_db{ width: 100%; position: relative;}
.img_db:before{ content: ""; display: block; width: 100%; height: 0; padding-top: 60.9%; position: static !important;}
.img_db img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;} 
.img_db .pic{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.img_db .pic img{ position: static; width: auto; height: auto; object-fit: contain;}
.s_about{ padding: 12rem 0; width: 100%; overflow: hidden; background: url(../images/s_about_bg.jpg) center top no-repeat; background-size: cover;}
.btn_arr2{ display: block; width: 1.875rem; height: 1.875rem; border-radius: 50%; overflow: hidden; border: 2px solid #2c2c2c; position: relative;}
.btn_arr2:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; transition: .5s; left: -100%; top: 0; background: url(../images/btn_arr2.svg) center no-repeat; background-size: .75rem;}
.btn_arr2:after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; transition: .5s; left: 0; top: 0; background: url(../images/btn_arr2.svg) center no-repeat; background-size: .75rem;}
.btn_arr2:hover:before{ left: 0;}
.btn_arr2:hover:after{ left: 100%;}

.btn_arr3{ display: block; width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; background: #3cb2c0; position: relative;}
.btn_arr3:before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; transition: .5s; left: -100%; top: 0; background: url(../images/btn_arr3.svg) center no-repeat; background-size: 2rem;}
.btn_arr3:after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; transition: .5s; left: 0; top: 0; background: url(../images/btn_arr3.svg) center no-repeat; background-size: 2rem;}
.btn_arr3:hover:before{ left: 0;}
.btn_arr3:hover:after{ left: 100%;}

a:hover .btn_arr2:before{ left: 0;}
a:hover .btn_arr2:after{ left: 100%;}
.s_about .outbox{ display: grid; grid-template-columns: 1fr 1.3fr;}
.s_about .left{}
.s_about .left .txt{}
.s_about .left .txt h4{ font-size: 1.125rem; color: #000000; line-height: 1.875rem; font-weight: bold; margin-bottom: 2rem;}
.s_about .left .txt p{ font-size: .9375rem; color: #000000; line-height: 1.875rem;}
.s_about .left .tt{ margin-top: 5rem;}
.s_about .left .tt span{ font-size: 3.75rem; line-height: 1; font-family:POPPINS-BOLD; text-transform: uppercase; display: inline-block; margin-bottom: .5rem;
    color:#24aaeb;
    background: linear-gradient(160deg, #0057a6 30%, #3ca8ca 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.s_about .left .tt h3{ font-size: 3rem; color: #2c2c2e; margin-bottom: 3rem;}
.btn_tansuo{ display: inline-flex; align-items: center; font-size: 1rem; color: #2c2c2e;}
.btn_tansuo i{ margin-left: .875rem;}

.s_about .right{}
.s_about .right ul{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-left: -4rem;}
.s_about .right ul li{}
.s_about .right ul li .box{ display: block; border-radius: .625rem; position: relative; z-index: 1; overflow: hidden;
    background-image: -moz-linear-gradient( 6deg, rgba(81,196,215,.15) 0%, rgba(0,87,166,.15) 100%);
    background-image: -webkit-linear-gradient( 6deg, rgba(81,196,215,.15) 0%, rgba(0,87,166,.15) 100%);
    background-image: -ms-linear-gradient( 6deg, rgba(81,196,215,.15) 0%, rgba(0,87,166,.15) 100%); }
.s_about .right ul li .box:before{ content: ""; display: block; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: .5s;
    background-image: -moz-linear-gradient( 6deg, rgb(81,196,215) 0%, rgb(0,87,166) 100%);
    background-image: -webkit-linear-gradient( 6deg, rgb(81,196,215) 0%, rgb(0,87,166) 100%);
    background-image: -ms-linear-gradient( 6deg, rgb(81,196,215) 0%, rgb(0,87,166) 100%);
}
    
.s_about .right ul li .ico{ width: 100%; height: 12rem; display: flex; align-items: center; justify-content: center;}
.s_about .right ul li .ico svg{ width: 3.75rem; height: 3.75rem; transition: .5s;}
.s_about .right ul li .ico svg path{ fill: #0057a6; transition: .5s;}
.s_about .right ul li .txt{ padding:0 1.75rem 2rem;}
.s_about .right ul li .txt h4{ font-size: 1.125rem; transition: .5s; color: #0d0f15; font-weight: bold; margin-bottom: 5px;}
.s_about .right ul li .txt span{ font-size: .875rem; transition: .5s; color: #161b22; opacity: .7; text-transform: uppercase; font-family:Poppins; }
.s_about .right ul li .box+.box{ margin-top: 1.5rem;}
.s_about .right ul li .box:hover:before{ opacity: 1; visibility: visible;}
.s_about .right ul li .box:hover .ico svg{ transform: translateY(-1rem);}
.s_about .right ul li .box:hover .ico svg path{ fill: #40cbdb;}
.s_about .right ul li .box:hover .txt h4{ color: #fff;}
.s_about .right ul li .box:hover .txt span{ color: #fff;}

.s_about .right ul li:nth-child(1){ transform: translateY(40%);}
.s_about .right ul li:nth-child(3){ transform: translateY(18%);}
.s_keji{ padding: 9.5rem 0; width: 100%; overflow: hidden; background: url(../images/s_keji_bg.jpg) center no-repeat; background-size: cover;}
.s_keji .tt{ max-width: 703px;}
.s_keji .tt span{ color: #4cd7e8; font-size: 3.75rem; line-height: 1; font-family:POPPINS-BOLD; text-transform: uppercase; display: inline-block; margin-bottom: .5rem;}
.s_keji .tt h3{ font-size: 2rem; color: #fff; display: flex; align-items: flex-end; }
.s_keji .tt h3 img{ margin-left: 1rem; width: 2rem;}
.s_keji .con{ font-size: .9375rem; line-height: 1.5rem; color: rgba(255,255,255,.7); max-width: 646px;}
.s_keji .flex{ display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem;}
.flexcenter{ display: flex; align-items: center; justify-content: center;}
.title002 img{ height: 2rem;}
.title002 big{ font-size: 2rem;}
.title002 small{ font-size: 1.75rem;}
.s_group{}
.s_group .bd{}
.s_group .bd ul{ display: grid; grid-template-columns: 1fr 1fr; gap: 3.125rem;}
.s_group .bd ul li{}
.s_group .bd ul li .box{ display: block;}
.s_group .bd ul li .imgbox{ position: relative; border-radius: .75rem; overflow: hidden;}
.s_group .bd ul li .img{}
.s_group .bd ul li .img img{ display: block;}
.s_group .bd ul li .mask{ position: absolute; padding: 6rem 3.375rem 3rem; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: space-between; flex-direction: column;}
.s_group .bd ul li .mask .con{ font-size: .9375rem; line-height: 1.625rem; color: #fff;}
.s_group .bd ul li .mask .btn_more2{ opacity: 0; visibility: hidden; transition: .5s; transform: translateY(-1.75rem); }
.s_group .bd ul li h4{ text-align: center; font-size: 1.5rem; color: #2c2c2e; margin-top: 1.875rem;}
.btn_more2{ width: 8.75rem; height: 3.125rem; background: #5abccc; border-radius: 1.625rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem;}
.btn_more2 svg{ margin-right: 1.125rem;}
.btn_more2 svg path{ fill: #fff;}
.btn_more2:hover{}
.s_group .bd ul li .box:hover .mask .btn_more2{ opacity: 1; visibility: visible; transform: translateY(0px); }

.n_group{ width: 100%; background: url(../images/n_group_bg.jpg) center no-repeat; background-size: cover;}
.n_group .hd{ display: flex; align-items: flex-end; gap: 6rem; margin-bottom: 3.75rem; flex-wrap: wrap;}
.n_group .hd .tt1{}
.n_group .hd .tt1 span{ font-size: 3.25rem; color: #0057a6;font-family:Poppins; text-transform: uppercase; }
.n_group .hd .tt1 i{ display: block; width: 30px; height: 2px; background: #0057a6; margin-bottom: 2.125rem; margin-top: 1.125rem;}
.n_group .hd .tt1 h3{ font-size: 1.625rem; color: #000000; display: inline-block; position: relative;}
.n_paopao{ position: absolute; max-width: inherit; max-height: inherit; transform: translateY(-30%) translateX(1.875rem);}
.n_group .hd .tt2{ flex-grow: 1;}
.n_group .hd .tt2 h4{ font-size: 1.875rem; color: #0057a6; font-weight: bold;}
.n_group .hd .tt2 span{ font-size: 1.125rem; color: #b7bfc0; text-transform: uppercase; display: block; margin-top: .5rem; margin-bottom: 1rem;}
.n_group .hd .ico{}
.btn_gohome{ width: 11.5rem; height: 3.75rem; font-size: 1rem; color: #fff; overflow: hidden; border-radius: 1.875rem; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;}
.btn_gohome:before{ content: ""; display: block; width: 200%; height: 100%; position: absolute; z-index: -1; left: 0; top: 0; transition: .5s;
    background-image: -moz-linear-gradient( 6deg, rgb(81,196,215) 0%, rgb(0,87,166) 50%, rgb(0,87,166) 100%);
    background-image: -webkit-linear-gradient( 6deg, rgb(81,196,215) 0%, rgb(0,87,166) 50%, rgb(0,87,166) 100%);
    background-image: -ms-linear-gradient( 6deg, rgb(81,196,215) 0%, rgb(0,87,166) 50%, rgb(0,87,166) 100%);}
.btn_gohome svg{ width: 1.25rem; height: 1.25rem; margin-right: 8px;}
.btn_gohome:hover:before{ left: -100%;} 
.n_group ul{ position: relative;  margin: 3.5rem -6.5px 0;}
.n_group ul li{ padding: 0 6.5px;}
.n_group ul li .img{ border-radius: .625rem; overflow: hidden;}
.n_group ul li .img:before{ padding-top: 98.25%;}
.n_group .miso-arrow{ width:3.5rem; height:3.5rem; background-size:cover !important; transition:.5s}
.n_group .miso-prev{ background:url(../images/n_group_left.png) center no-repeat; left:1.875rem}
.n_group .miso-next{ background:url(../images/n_group_right.png) center no-repeat; right:1.875rem}
.n_group .miso-prev:hover{ background:url(../images/n_group_left_on.png) center no-repeat; }
.n_group .miso-next:hover{ background:url(../images/n_group_right_on.png) center no-repeat; }


@media(max-width: 1440px){
    .s_group .bd ul{ gap: 2.5rem;}
}
@media(max-width: 1200px){
    .n_paopao{ display: none;}
}
@media(max-width: 768px){
.pad_top{ padding-top: 4rem !important;}
.pad_bot{ padding-bottom: 4rem !important;}
.s_group .bd ul li .mask{ padding: 2rem;}
.n_group .hd{ gap: 3rem;}
}
@media(max-width: 480px){
    .s_about .outbox{ grid-template-columns: 1fr; gap: 3rem;}
    .s_about .right ul{ margin-left: 0; gap: .5rem;}
    .s_about .right ul li .ico{ height: 7rem;}
    .s_about .right ul li .ico svg{ width: 3rem; height: 3rem;}
    .s_about .left{ display: flex; flex-direction: column-reverse;}
    .s_about .left .tt span{ font-size: 2.875rem;}
    .s_about .left .tt h3{ font-size: 2rem;}
    .s_about .left .tt{ margin-top: 0; margin-bottom: 2rem;}
    .s_about .right ul li .box+.box { margin-top: .5rem;}
    .s_about .left .tt h3{ margin-bottom: 2rem;}
    .s_keji .tt span{ font-size: 2.875rem;}
    .s_group .bd ul{ grid-template-columns: 1fr;}
    .title002{ margin-bottom: 2rem;}
    .title002 small {font-size: 1.5rem;}
    .s_keji .tt h3{ font-size: 1.75rem;}
    .s_group .bd ul li h4{ font-size: 1.375rem; margin-top: 1.375rem;}
    .n_group .hd{ gap: 2rem; position: relative;}
    .n_group .hd .tt1 span{ font-size: 2.5rem;}
    .n_group .hd .tt1 h3{ font-size: 1.375rem;}
    .n_group .hd .tt1 i{ margin-top: 1rem; margin-bottom: 1.5rem;}
    .n_group .hd .tt2 h4{ font-size: 1.625rem;}
    .n_group .hd .tt2 span{ font-size: 1rem;}
    .btn_gohome{ width: 10rem; height: 3.25rem;}
    .n_group .hd .ico{ width: 10rem; position: absolute; right: 0; top: 0;}
    .n_group .hd{ margin-bottom: 2.5rem;}
    .n_group ul{ margin-top: 2rem;}
    .n_group .miso-arrow{ width:2.5rem; height:2.5rem; }
.n_group .miso-prev{ left:1rem}
.n_group .miso-next{ right:1rem}
.n_group .hd .tt2{ width: 100%;}
}