:root {
    --color-primary: #dd2234;
    --color-title: #222222;
    --color-content: #757575;
    --base-font-size: 16px;
    font-size: var(--base-font-size);
} 

@font-face{
    font-family:aliph;
    src: url('../fonts/AlibabaPuHuiTi-Regular.ttf'),
         url('../fonts/AlibabaPuHuiTi-Regular.eot'),
         url('../fonts/AlibabaPuHuiTi-Bold.ttf'),
         url('../fonts/AlibabaPuHuiTi-Bold.eot'),
         url('../fonts/AlibabaPuHuiTi-Black.ttf'),
         url('../fonts/AlibabaPuHuiTi-Black.eot');
}

@font-face{
    font-family:titillium;
    src: url('../fonts/TitilliumWeb-Regular.ttf'),
         url('../fonts/titillium.eot'); /* IE9+ */
}
    
@font-face{
    font-family:league_gothic;
    src: url('../fonts/League_Gothic.ttf'),
         url('../fonts/League_Gothic.eot'); /* IE9+ */
}
    
    
*:hover,a:hover{ text-decoration:none}
a.fontnav {text-decoration:none; outline:none}
body{background:#f0eeef;padding-right:0!important;font-family: aliph;}
body.modal-open {overflow-y: auto !important;padding-right: 0 !important;}
i{font-style:normal}
p{padding:0px;margin:0px}
em{font-style:normal}
ul li {list-style-type: none;margin:0px;padding:0px}
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
ul,ol{list-style:none;margin:0px;padding:0px}
img{border:0;}
a{color:#000}
a:focus, a:hover{color:var(--color-primary);text-decoration:none}
a.vice{color:#409CA7}
a.vice:hover{color:var(--color-primary)}

.form-control{border:1px solid #ddd;min-width:40px;line-height: 18px;color: #333;border-radius:0px}
.form-control:hover,
.form-control:focus{border:1px solid var(--color-primary)}

.btn:not(.btn-link),
.btn:not(.btn-link):focus,
.btn:not(.btn-link):hover {background: var(--color-primary); color:#fff; border-radius:0px; padding: 10px 12px;}
.btn {opacity: 0.9;}
.btn:hover {opacity:1}
.btn-default, .btn-default:focus, .btn-default:hover{background:#fff; color:#000}

.btnwarp{position:relative}
.btnwarp .btn{width:100%;}
.btnwarp .loader-inner,
.btnwarp .loader-inner:hover{position: absolute;background:#ab9595;height:100%;z-index:1;cursor:default;display:none;}
.btnwarp .loader-inner i {font-size: 22px;}
.btn-round {border-radius: 30px !important; border: 0; outline: none !important; overflow: hidden;}


.select {border:1px solid #ddd;  width:100%;}
.select  select {display:block;width:100%;color:#000; padding:8px 5px;border: 0;appearance:none;-moz-appearance:none; -webkit-appearance:none; padding-right: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41' height='26' viewBox='0 0 41 26'%3E%3Cpath fill='%23606060' d='M0 5.382l19.983 19.983L40.14 5.208 34.932 0 19.869 15.062 4.84.032z' fill-rule='evenodd' style='&%2310; fill: %23b8c2cc;&%2310;'/%3E%3C/svg%3E");  background-position: right 10px center; background-repeat: no-repeat; background-size: 1rem;}
.select  select::-ms-expand { display: none; }
.select  option{background:#fff}



/* checkbox */
.form_checkbox {position:relative;text-indent:28px;cursor:pointer;float:left;padding:2px 0px;}
.form_checkbox span{position:absolute;top:2px;left:0px;border:1px solid #ddd;width:18px;height:18px;margin:0px;cursor:pointer; background:#fff}
.form_checkbox span i{display:none;}
.form_checkbox .checkbox:hover,
.form_checkbox:hover span{border:1px solid #aaa}
.form_checkbox .checkbox_active .checkbox{border:1px solid #ae1916}
.checkbox .checkbox_active i{display:block; background:#ae1916;width:8px;height:8px;position:absolute;top:4px;left: 4px;}
.checkbox .checkbox_active span{border:1px solid #ae1916}
.checkbox{margin:0px;}
.checkbox .rli{padding-right:12px; width: 150px; margin-top: 9px;}

/* form_radio */
.form_radio {position:relative;text-indent:28px;cursor:pointer;float:left;padding:2px 0px;transition: all 0.3s linear 0s;}
.form_radio span{position:absolute;top:2px;left:0px;border:1px solid #ddd;border-radius:12px;width:18px;height:18px;margin:0px;cursor:pointer; background:#fff}
.form_radio span i{display:none;}
.form_radio .radio:hover,
.form_radio:hover span{border:1px solid #aaa}
.form_radio .radio_active .radio{border:1px solid #ae1916}
.radio .radio_active i{display:block; background:#ae1916;width:8px;height:8px;border-radius:8px;position:absolute;top:4px;left: 4px;}
.radio .radio_active span{border:1px solid #ae1916}
.radio{margin:0px;}
.radio .rli{padding-right:12px;}


/* off */
.switch{width:65px;overflow:hidden;height:29px;position:relative;left: 0px; background:#cecfd3;cursor:pointer;border-radius:30px; opacity:0.7;transition:all 0.3s linear;}
.switch:hover{opacity:1}
.switch .open{display:none;}
.switch .circle{position:absolute;left:2px;top:2px;width:25px;height:25px;background:#fff;border-radius:100px;transition:all 0.3s linear;z-index:1}
.switch span{position:absolute;left:31px;top:6px;transition:all 0.3s linear;}
.wcactive{ background:#0170cc}
.wcactive .circle{left:38px;}
.wcactive span{left:10px;color:#fff;display:none;}
.wcactive .open{display:block;}


.container {width: 1440px;}

@media (max-width: 1460px){
    .container {width: 1200px;}
}
@media (max-width: 1200px){
    .container {width: 100%;}
}



/* header */
header {position: fixed; top: 0; width: 100%; background: #f0eeef; z-index:3;transition: all .3s ease-in-out; }
header .header-wrap {display: flex; justify-content: space-between; align-items: center; height: 80px;}
header .container::before,
header .container::after {display: none;}
header .logo {width: 200px; height: 72px; margin: 0; background:url(logo1-80.png) no-repeat left center; background-size: contain;}
header .logo a {display: block; width: 100%; height: 100%;}

header .header-right {display: flex; align-items: center;}
header nav ul li {display: inline-flex; justify-content: center; align-items: center; position: relative; min-width: 120px; font-size: 16px;}
header nav ul li a {display: inline-flex; align-items: center; position:relative; height: 44px; color:#000;transition:all 0.3s linear;}
header nav ul .active a,
header nav ul .active a:hover {color: var(--color-primary);opacity: 1;}
header nav ul li a::after {content: ''; position: absolute; bottom: 0px; transform: translateY(-50%); transition: all .3s ease-in-out; height: 2px;background: #000; z-index: 2;left: 50%; margin-left: -12px;display: none;}
header nav ul li a::after {width: 0%;}
header nav ul li.active a::after,
header nav ul li a:hover::after{width: 26px;}
header nav ul li.active a::after {background: var(--color-primary);}
header nav ul li:hover .level-menu{display: block;}
header nav ul li .level-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    top: 40px;
    text-align: center;
    padding: 6px 0px;
    z-index: 2;
    display: none;
    width: 93px;
    border-radius: 5px;
}
header nav ul li .level-menu a {
    color: #333;
    font-size: 14px;
    display: block;
    height: auto;
    padding: 8px 0px;
}
header nav ul li  .level-menu a:hover{color:var(--color-primary)}
header nav ul li .level-menu a::after{display: none;}


.language { background-color: #00000069; padding: 4px 12px; border-radius: 5px;margin-left: 10px;}
.language ul{display: flex;color:#fff;}
.language li{padding:0px 2px;color:#cbcbcb}
.language li a{color:#cbcbcb}
.language li a:hover{color:#fff}
.language .active a {color:#fff}
.language li:first-child a {color:#fff}


header .menu {display:none; width: 30px; height: 30px; font-size: 18px; cursor: pointer; z-index: 1; text-align: center;}

.fixednav header .logo {background-image: url(../images/logo1-80.png);}
.fixednav header .menu {color: #999;}

@media (max-width: 1200px) {
    header nav ul li {min-width: 80px; padding: 0 10px;}
}

@media (max-width: 900px) {
    header .header-wrap {padding: 0;}
    header nav {display: none; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: #000d;}
    .language .dropdown-toggle {background-color: transparent; color: #000;}
    header .menu {display: flex; justify-content: center; align-items: center; margin: 0 10px; color: #999;}
    header nav ul {padding-top: 80px;}
    header nav ul li {display: flex; border-top: 1px solid #444;}
    header nav ul li a {height: 64px; color: #fff;}
}

@media screen and (max-width: 768px) {
    .container {width: 100%;}
    header .header-wrap {height: 64px;}
    header .logo {width: 180px; height: 100%;margin-left:15px}
    header nav ul {padding-top: 64px;}
    header nav ul li:hover .level-menu{display: none;}
}

@media screen and (max-width: 430px) {
    header .header-wrap {height: 49px;}
    header .logo {width: 150px;}
    header nav ul {padding-top: 49px;}

}


article,
.main-top{padding-top: 80px;}


@media screen and (max-width: 768px) {
    article {padding-top: 64px;}
}

@media screen and (max-width: 430px) {
    article {padding-top: 49px;}
}


/* section */
/* article section {padding: 80px 0;} */
section .section-header {display: flex;}
section .header-icon {width: 18px; height: 50px; margin-right: 8px; background-color: var(--color-primary); border-bottom-right-radius: 30px;}
section .header-title {display: flex; flex-direction: column; justify-content: center;}
section .zh {font-size: 30px; color: var(--color-title); line-height: 1.1;}
section .en {font-size: 12px; color: #777;}
section .section-content {margin-top: 40px;}
section .subtitle {font-size: 13px; color: #777;}
section .title {font-size: 14px; color: var(--color-title);}
article em { font-style: italic;}

@media screen and (max-width: 768px) {
    article section {padding: 50px 0;}
    section .header-icon {width: 14px; height: 40px;}
    section .zh {font-size: 24px;}
    section .title {margin-top: 10px; font-size: 24px; font-weight: bold;}
}

@media screen and (max-width: 414px) {
    article section {padding: 30px 0;}
    section .header-icon {width: 13px; height: 34px;}
    section .zh {font-size: 18px;}
    section .title {margin-top: 10px; font-size: 18px; font-weight: bold;}
}




/* footer */
footer {background:#f4f4f4;width: 100%;}
footer .footer-top {display: flex; justify-content: space-between; align-items: flex-start; padding: 50px 0;}
footer .items {display: flex; flex-wrap: wrap;  flex: 1;}
footer .item-box {display: flex; flex-direction: column; gap:10px;text-align: center;flex: 1;}
footer .item-desc {display: grid; grid-template-columns: repeat(3, 1fr);width: 150px; grid-row-gap: 0px;}
footer .company-name {color: #000; font-size: 14px; text-align: left; margin-bottom: -15px;}
footer .item-img{transform:translateY(-8px);}
footer .item-desc li{height: 45px;flex: 1;background: url(../images/index/footer_ico.webp) no-repeat;background-size: 140px;transition: all 0.3s linear;}
footer .item-desc li a{display: block;height: 100%;}
footer .item-desc li:nth-child(1){background-position: 0px -4px;}
footer .item-desc li:nth-child(2){background-position: -46px -46px;}
footer .item-desc li:nth-child(3){background-position: 0px -46px;}
footer .item-desc li:nth-child(4){background-position:-46px -4px;}
footer .item-desc li:nth-child(5){background-position: -89px -46px;}
footer .item-desc li:nth-child(6){background-position: -95px -4px;}
footer .item-desc li:hover{transform: scale(1.05);}

footer .item-img img{width:95%;}

footer .item-title {color: #000; font-size: 15px;padding-top: 5px;transition: all 0.3s linear;}
footer .item-title a{color: #000;}
footer .item-list li {padding: 5px 0;transition: all 0.3s linear;}

footer .item-list li:hover{transform: scale(1.05);}
footer .item-title a:hover{color:rgb(255, 0, 0)}

footer .item-list a,
footer .item-list a:visited {color: #666666; font-size: 13px;}
footer .item-list a:hover,
footer .item-list a:active {color: #000;}
footer .footer-contact {display: flex;flex-direction: column;align-items: center; width: 400px;;}
footer .footer-contact .contact-company-name {color: #000; font-size: 16px; text-align: left; padding-left: 20px; margin-bottom: 5px; width: 100%;}
footer .footer-contact .qrcode-container {display: flex;align-items: center; width: 100%;}
footer .footer-contact .qrcode {flex: 1; text-align: center;}

footer .footer-contact img {width: 80%;background: #fff;padding: 5px;}
footer .footer-copyright {padding: 20px 0; text-align:center; color:#666; line-height:25px; font-size:14px; border-top: 1px solid #6666666b;}
footer .footer-copyright a,
footer .footer-copyright a:visited {color: #666;}
footer .footer-copyright a:hover,
footer .footer-copyright a:active {color: #dddddd;}
footer .footer-copyright .circle {display: inline-block; width: 5px;height: 5px; margin: 0px 4px;}

@media screen and (max-width: 1024px) {
    footer .items{gap: 20px;}
    footer .footer-contact .phone {font-size: 20px;}
    footer .footer-contact {width: 260px;}
}

@media screen and (max-width: 880px){
    footer .item-img{display: none;}
}
@media screen and (max-width: 768px){
    footer .items {display: none;}
    footer .footer-copyright {border: 0;}
    footer .footer-contact{width: 100%;display: flex;flex-direction: column;}
    footer .footer-contact .qrcode-container{display: flex;width: 100%;}
    footer .footer-contact .qrcode{flex: 1;}
    footer .footer-contact img{height: auto;width: 80%;}
    footer .footer-top{ padding: 10px 0;}
    footer .footer-copyright {padding: 10px 0;}
    footer .item-title {font-size: 12px; }
}



.warppage {text-align:center}
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {color: var(--color-primary); background-color: transparent; border-color: transparent;}
.pagination>li>a,
.pagination>li>span {border:0px}
.pagination>li>a,
.pagination>li>span {color: #666;}
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover {color: var(--color-primary); background-color: transparent;border-color:  transparent}

.gotop{position: fixed;z-index:3;right:18px;bottom:70px;display:none;width: 60px;height: 60px;border-radius: 50%;background-color:#343434;box-shadow: 0 2px 9px 6px rgb(0 0 0 / 8%);text-align: center;color:#fff;opacity:0.8}
.gotop i{display: block;font-size: 22px;margin-top:8px;}
.gotop:hover{opacity:1;color:#fff}


.tooltip-inner { color: #000; background-color: #fff;font-size: 16px}
.tooltip.top .tooltip-arrow{border-top-color: #fff;}

/* title */
.md-title-warp .md-title {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
}
.md-title-warp .md-title::after {
    content: "";
    height: 0.5rem; 
    width: 3.2rem;
    background: #dd2233;
    display: block;
    margin: auto;
    margin-top: 1rem;
    border-radius: 0.75rem;
}
.md-title-warp .md-sub-title {
    font-size: 1.6rem; 
    font-weight: bold;
    padding-top: 1.25rem;
    text-align: center;
}
.md-title-warp .md-desc {
    font-size: 1.2rem;
    padding-top: 1.2rem; 
}

@media screen and (width: 1024px){
    header nav ul li{min-width: 80px;}
}

@media screen and (max-width:768px){
    .font-weixin{display: none;}
}
.com-usechat{background-color: var(--color-primary);position: fixed;right: 30px;top:50%;width: 150px;padding:15px;border-radius: 10px;color:#fff;text-align: center;cursor: pointer;z-index: 2;display: none;}
.com-usechat img{width: 100%;border-radius: 5px;}
.com-usechat .name{font-size: 24px;line-height: 40px;}
.com-usechat .time{opacity: 0.8;}
@media screen and (max-width:768px){
.com-usechat{width: 80px; padding: 8px; font-size: 12px;}
.com-usechat .name {font-size: 12px;line-height: 20px;} 
}

.main-tab{margin-top: 22px;position: relative;z-index: 1;}
.main-tab ul{display: flex;justify-content: center;}
.main-tab li {
    border: 1px solid #ddd;
margin-left:12px ;
    text-align: center;font-size: 16px;background: #ffffff63;
}
.main-tab li a{display: block;   height: 42px; line-height: 42px;color:#fff;width: 169px;}
.main-tab .active{background: #fff;border:1px solid #fff}
 .main-tab .active a{color:#333}



 /* modal */
 .modal-dialog{width: 1400px;}
 .modal-header {padding: 0;border-bottom: 0;    padding-top: 25px;z-index: 2;position: relative;}

.modal-header .close {
    padding-right: 30px;
    font-size: 30px;
}
.modal-body  h4{font-size: 28px;color:#000;font-weight: bold;margin:0px;    padding-bottom: 15px;}
.modal-body {padding:50px 130px;padding-top:0px}
.modal-body h5{font-size: 18px;color:#000;font-weight: bold;margin-top: 10px;}
.modal-body .modal-flex{display: flex;    gap: 20px;}
.modal-body .modal-flex p{padding-bottom:8px; font-size: 16px;}
.modal-body .modal-flex .modal-contennt{flex: 1;}
.modal-body .modal-flex .modal-img{flex:none;width:325px;}
.modal-body .modal-flex .modal-img img {
width: 100%;
border-radius: 15px;
margin-top: 55px;
padding: 2px;
}

 .modal-button-left {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    left: 20px;
}

.modal-button-right {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
    right: 20px;
}
.modal-content{border-radius: 20px;height: 600px; }
.modal-roll{max-height: 390px;overflow: auto;}
.modal-roll::-webkit-scrollbar{ width:6px;height:6px;background-color: #F5F5F5;} 
.modal-roll::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;background-color: #F5F5F5;}  
.modal-roll::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  background-color: #555;}  


.modal-button-left,
.modal-button-right {
    box-shadow: 0px 0px 7px 0px #989898;
    top: 50%;
    margin-top: -58px;
    border: 1px solid #bcbcbc;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    position: absolute;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
    opacity: 0.5;    background-color: #fff;    z-index: 1;
}
.modal-button-left:hover,
.modal-button-right:hover{opacity: 0.8;}
.modal-body .modal-icon {
    width: 96px;
    height: 135px;
    position: absolute;
    bottom:0px;
    background-position:center;
    background-repeat: no-repeat;
    background-size: 100%;
    left: -108px;z-index: 1;display: none;
}
.swiper-slide-active .modal-icon{display: block;}

.modal-body .icon1{background-image: url(../images/case/jixiang/1.png) ;}
.modal-body .icon2{background-image: url(../images/case/jixiang/2.png) ;}
.modal-body .icon3{background-image: url(../images/case/jixiang/3.png) ;}
.modal-body .icon4{background-image: url(../images/case/jixiang/4.png) ;}
.modal-body .icon5{background-image: url(../images/case/jixiang/5.png) ;}
.modal-body .icon6{background-image: url(../images/case/jixiang/6.png) ;}
.modal-body .icon7{background-image: url(../images/case/jixiang/7.png) ;}
.modal-body .icon8{background-image: url(../images/case/jixiang/8.png) ;}



.modal-body .count-wrap{padding:8px 0px;}
.modal-body .count-wrap ul{display:grid;grid-template-columns: repeat(4, 1fr);grid-auto-rows:auto;grid-column-gap: 0px;grid-row-gap:0px;}
.modal-body .count-wrap li{text-align: left;}
.modal-body .count-wrap li i{padding-right: 5px;font-size: 30px;font-weight: bold;}
.modal-body  .count-wrap li p {font-size: 20px;padding-bottom: 0px;text-indent: inherit;color:#dd2234;}
.modal-body  .count-wrap li span{opacity: 1;}



@media screen and (max-width:1024px){
    :root { font-size: 14px;} 
    .modal-dialog{width: 95%;}
    .modal-body {
        position: relative;
        padding: 15px;
    }
    .modal-button-left{left: 10px;}
    .modal-button-right{right: 10px;}
    .modal-header {
        padding-top: 0;
    }
    .modal-body .count-wrap li p {font-size: 22px;}
    .modal-body .modal-icon{display: none;}
}


@media screen and (max-width:768px){
    :root { font-size: 12px;} 
    .modal-body .modal-flex {
        display: block;
        gap: 0;
    }
    .modal-body .modal-flex .modal-img {
     
        width: 100%;
    }
    .modal-content {
        border-radius: 0;
    }
    .modal-dialog {
        width: 100%;    margin: 0;
    }
    .modal-header .close {
  
        font-size: 30px;
        position: fixed;
        right: -10px;
        top: 11px;
    }
    .modal-button-left, .modal-button-right{display: none;}
    .modal-body{height: auto;}

}