@font-face {
    font-family: 'fy';
    src: url('../fonts/猫啃网风雅宋.ttf') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'jx';
    src: url('../fonts/字体圈欣意吉祥宋.ttf') format('woff');
    font-display: swap;
}

body {font-family: 'jx', sans-serif; font-weight: normal;--hover-color:#a71e22;--white:#fff; --black:#000; --grey:#333; --grey2:#999; --rgb-white:255,255,255;--rgb-black:0,0,0;font-size: var(--font-size24);  background: #f9f9f9;}

.flex{display: flex;}
.flexj{display: flex;justify-content: center;}
.flexa{display: flex;align-items: center;}
.flexaw{display: flex;align-items: center;flex-wrap: wrap;}
.flexja{display: flex;justify-content: center;align-items: center;}
.flexcad{display: flex;justify-content: center;align-items: center;flex-direction: column;}
.flexcd{display: flex;justify-content: center;flex-direction: column;}
.flexac{display: flex;align-items: center;flex-direction: column;}
.flexc{display:flex;flex-direction: column;}
.flexbwa{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;}
.flexba{display: flex;justify-content: space-between;align-items: center;}
.flexbw{display: flex;justify-content: space-between;flex-wrap: wrap;}
.flexw{display: flex;flex-wrap: wrap;}
.flexb{display: flex;justify-content: space-between;}

.imgbox{ overflow:hidden; position:relative;transition: all 0.5s;}
.imgbox span{ background-position:center center; background-repeat:no-repeat; background-size:cover; position:absolute; left:0px; top:0px; width:100%; height:100%;display: flex;align-items: center;justify-content: center;}
.imgbox img{ width:100%; height:100%;object-fit: cover;}
.imgbox.auto img{ width:auto; height:auto;object-fit: contain;max-width: 100%;max-height: 100%;}

.img-path{ overflow: hidden; position: relative;}
.img-path i:before,
.img-path i:after{ content: ''; z-index: 10; position: absolute; width:0px; height:0px;border-radius:100%; border: solid 0.12rem transparent;border-right-color: #fff;}
.img-path i:before{ top:-0.12rem;}
.img-path i:after{ bottom:-0.12rem;}
.img-path i:nth-child(1):before,
.img-path i:nth-child(1):after{ left:-0.12rem;}
.img-path i:nth-child(2):before,
.img-path i:nth-child(2):after{ right:-0.12rem;}
.img-path i:nth-child(1):before{ transform: rotate(45deg)}
.img-path i:nth-child(1):after{ transform: rotate(-45deg)}
.img-path i:nth-child(2):before{ transform: rotate(135deg)}
.img-path i:nth-child(2):after{ transform: rotate(-135deg)}


.Main{max-width: 7.5rem;margin: 0 auto; padding-bottom: 1.4rem;}
.Contain {max-width: 7.5rem;margin: 0 auto;padding: 0 0.35rem;}

.body{background-image: url(../images/headBg.jpg);background-size: 100%;background-repeat: no-repeat;background-position: top center;}

.Hometitle { margin-bottom: 0.4rem;}
.Hometitle .cn{ font-size: var(--font-size40); color: #000; font-family: 'fy'; line-height: 1.2; }

.Homemore a{font-size: var(--font-size26); color: #333; text-decoration: underline;}
.Homemore img{ max-width: 0.32rem; margin-left: 0.1rem;}
.Homemore a:hover{color: #e71a2f;}


/* Top */
.Top {/* height: 4.5rem; */width: 100%;position: relative;left: 0px;top: 0px;z-index: 1000;}
.Top .header {padding: 0.3rem 0rem;}
.Top .logo {margin-right: 0.1rem;}
.Top .logo img{max-height: 0.56rem;}
.Top .logo img.white{ display: none;}
.Top .header-right .CooInfo {display: flex;align-items: center; margin-right: 0.2rem;background: rgba(81, 66, 55, 0.6);border-radius: 0.5rem; }
.Top .header-right .CooInfo a{height: 0.56rem; line-height: 0.56rem; padding: 0 0.4rem;font-size: var(--font-size26); color: #fff;}
.Top .TopSearch{height: 100%; width: 1.3rem; border-radius: 0.5rem;position: relative;overflow: hidden;}
.Top .TopSearch input {width: 100%;font-size: var(--font-size26); height: 0.56rem; line-height: 0.56rem; color: #fff; padding: 0 0.5rem 0 0.2rem; background: rgba(81, 66, 55, 0.6); border: none;}
.Top .TopSearch .btn {position: absolute;right: 0;top: 0;width: 0.5rem;height: 0.56rem;background: url(../images/search-white.svg) no-repeat center center; background-size: 0.24rem auto; }
.Top .TopTitle {text-align: center; padding: 1rem 0;}
.Top .TopTitle img{max-width: 5.21rem;}


/* Homeban */
.Homeban{position: relative;z-index: 1;}
.Homeban .Contain{ padding: 0 0.2rem;}
.Homeban img{ border-radius: 0.3rem;}
.Homeban .slick-dots{position: absolute; left: 0;width: 100%;text-align: center; bottom: 0.55rem;z-index: 10;}
.Homeban .slick-dots li{width: 0.16rem;height: 0.16rem;background-color:rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; display: inline-block; margin: 0 0.3rem;}
.Homeban .slick-dots li button{display: none;}
.Homeban .slick-dots li.slick-active{background-color: #e71a2f; }

/* HomeAbout */
.HomeAbout{padding:0.7rem 0 0.2rem 0 ;background-image: url(../images/About_bg.png);background-repeat: no-repeat; background-position: center center; background-size: cover;}
.HomeAbout .Hometitle{align-items: flex-end;}
.HomeAbout .info{font-size: var(--font-size26); color: #333; line-height: 0.4rem; }
.HomeAbout .info p{ margin: 0;}



/* HomeNews */
.HomeNews{padding:0.7rem 0;background-image: url(../images/News_bg.png);background-repeat: no-repeat; background-position: top -0.5rem center; background-size: cover;}
.News li{ background: #fff; 
background: radial-gradient(circle at top left, transparent 0.12rem, #fff 0) top left, radial-gradient(circle at top right, transparent 0.12rem, #fff 0) top right, radial-gradient(circle at bottom right, transparent 0.12rem, #fff 0) bottom right, radial-gradient(circle at bottom left, transparent 0.12rem, #fff 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.News li:not(:last-child){margin-bottom: 0.3rem;}
.News li a{  padding: 0.3rem 0.25rem;background-image: url(../images/news_line.png);background-repeat: no-repeat; background-position: center; background-size: 100% 100%;}
.News .date{flex: 0 0 auto;background-color: #514237;font-size: var(--font-size22); color: #fff;padding: 0 0.18rem; width: 1.1rem; height: 1.1rem; line-height: 1 ; position: relative; z-index: 10; overflow: hidden;
background: radial-gradient(circle at top left, transparent 0.12rem, #514237 0) top left, radial-gradient(circle at top right, transparent 0.12rem, #514237 0) top right, radial-gradient(circle at bottom right, transparent 0.12rem, #514237 0) bottom right, radial-gradient(circle at bottom left, transparent 0.12rem, #514237 0) bottom left;
background-size: 55% 55%;
background-repeat: no-repeat;
}
.News .date b{font-size: var(--font-size35); font-weight: normal;} 
.News .date::after {content: '';display: block;position: absolute;top: 8%;right: -34%;background: url(../images/date-bg.svg) no-repeat right center;width: 1.35rem;height: 1.35rem;opacity: .15;z-index:-1;background-size: contain;}
.News .txt{ flex: 1 1 auto; margin-left: 0.32rem; overflow: hidden;}
.News .txt .tit{font-size: var(--font-size30);color: #000; margin-bottom: 0.1rem; line-height: 1;}
.News .txt .desc{font-size: var(--font-size24);color: #333333; line-height: 0.35rem;}
.News a:hover .txt .tit{color: #e71a2f;}


/* Bottom */
.Bottom {height: 1.3rem;background: #fff;position: fixed;width: 100%;left: 0px;bottom: 0px;z-index: 1000;}
.BottomList {height: 1.3rem;display: flex;justify-content: space-between;align-items: center;padding:0 1.2rem;text-align: center;}
.BottomList li a {height: 100%;display: block; }
.BottomList li a .img{ margin-bottom: 0.12rem; position: relative; transition: 0.3s;display: flex; justify-content: center;}
.BottomList li a:hover .img:before,
.BottomList li.on a .img:before{position: absolute;content: "";top: 50%;left: 50%;transform: translate(-50%, -50%);width: 0.67rem;height: 0.65rem;background-position: center center;background-repeat: no-repeat;background-size: contain;background-image: url(../images/Bottom_on.svg);}
.BottomList li a .tit{font-size: var(--font-size26);color: #000; line-height: 1;}
.BottomList li.on a .tit,
.BottomList li a:hover .tit{color: #e71a2f;}
.BottomList li a img.on{ display: none;}
.BottomList li.on a img.de,
.BottomList li a:hover img.de{display: none;}
.BottomList li.on a img.on,
.BottomList li a:hover img.on{display: block;}



/* 藏品 */
::-webkit-scrollbar {-webkit-appearance: none;}
::-webkit-scrollbar:vertical {width: 0.107rem;}
::-webkit-scrollbar:horizontal {height: 0.107rem;}
::-webkit-scrollbar-thumb,
.NavBox::-webkit-scrollbar-thumb{background-color: #514237;border-radius: 0.133333rem;}
.NavBox::-webkit-scrollbar:horizontal{height: 0.053rem;}

.ProPage{background-image: url(../images/ProBg.png);background-size: 100% ;background-repeat: no-repeat;background-position: top center;}

.categoryBox {}
.categoryBox .NavBox {width: 100%;padding-top: 0.4rem;padding-bottom: 0.1rem;margin-bottom: 0.35rem;overflow-x: auto;}
.categoryBox .NavBox ul {white-space: nowrap;}
.categoryBox .NavBox ul li {line-height: 0.6rem; background-color: #fff;padding: 0 0.53rem; border-radius: 0.1rem; display: inline-block; position: relative; z-index: 2; overflow: hidden;}
.categoryBox .NavBox ul li:not(:last-child) {margin-right: 0.2rem;}
.categoryBox .NavBox ul li a {font-size: var(--font-size34);color: #000;font-family: 'fy';}
.categoryBox .NavBox ul li.on {background-color: #514237;}
.categoryBox .NavBox ul li.on::after {content: '';display: block;position: absolute;top: -25%;right: -20%;background: url(../images/date-bg.svg) no-repeat right center;width: 1.35rem;height: 1.35rem;opacity: .15;z-index:-1;background-size: contain;}
.categoryBox .NavBox ul li.on a {color: #fff;}


.CatePro{}
.CatePro .CateNav {width: 1.5rem;display: flex;flex-direction: column;justify-content: flex-start;}
.CatePro .Prolist{flex: 1;height: 100%; background: rgba(255, 255, 255, 0.5); margin-bottom: 0.2rem;}

.CatePro .CateNav li {display: flex;justify-content: flex-end;}
.CatePro .CateNav li a {display: flex;align-items: center;width: 100%;justify-content: center;padding: 0.32rem 0.05rem;font-size: var(--font-size30);color: #000;}
.CatePro .CateNav li.on a {background: rgba(255, 255, 255, 0.5);}
.Prolist .list{ padding: 0.5rem 0.4rem 0.2rem 0.4rem;}
.Prolist li{ width: calc(50% - 0.15rem); background: #ffffff;border-radius: 0.1rem;overflow: hidden; margin-bottom: 0.2rem;}
.Prolist li .pic{width: 100%;padding-bottom: 100%; background-image: linear-gradient(to bottom,#6d6d6d,#cacaca);background-image: url(../images/picbg.png);background-size: cover;background-repeat: no-repeat;background-position: top center; overflow: hidden; }
.Prolist li .pic img { object-fit: contain;-o-object-fit: contain;}
.Prolist li .txt{ text-align: center; padding: 0.1rem 0.1rem;}
.Prolist li .txt .tit{font-size: var(--font-size24);color: #333; line-height: 0.28rem;}
.Prolist li a:hover .txt .tit{color: #e71a2f;}

.Search .list{ padding: 0.5rem 0.35rem;}

.Page{ display: block;text-align: center; margin:0.5rem auto;font-size: var(--font-size28);color: #333;}
.Page .Pages a{ display: inline-block; margin: 0 0.1rem; }
.Page .Pages .num{ margin: 0 0.1rem; font-style:normal;}


.loadmore{display: flex;justify-content: center;align-items: center; font-size: var(--font-size28); color: #333; text-align: center; margin:0.5rem auto;}
.loadmore i{ display: inline-block; width: 0.32rem; height: 0.31rem; background: url(../images/more.svg) no-repeat center; background-size: contain; vertical-align: middle; margin-right: 0.1rem;animation:turn 1.5s linear infinite;}
@keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
}

/* 产品详情 */
.ProInfoPage{background-image: url(../images/ProInfoBg.png);background-size: 100%;background-repeat: no-repeat;background-position: top center; background-color: #43423f; /*  */}
.ProInfoPage .Main{padding-bottom: 1.3rem;}
.ProInfoPage .Top .logo img.red{display: none;}
.ProInfoPage .Top .logo img.white{ display: block;}

.Sound{position: absolute;z-index: 100;right: 0.35rem;top: 6rem;cursor: pointer;}
.Sound .icon{background: #e71a2f;border-radius: 50%; width: 0.7rem; height: 0.7rem; margin-bottom: 0.1rem;}
.Sound .icon img{max-width: 0.3rem;}
.Sound .tit{font-size: var(--font-size25); color: #fff; text-align: center;}

.ProCon{ padding-top: 0.6rem;}
.Proimg .Bigimage{background-image: url(../images/BigimageBg.png);background-size: 100% auto;background-repeat: no-repeat;background-position: bottom center;}
.Proimg .Bigimage li{ text-align: center; height: 6rem;}
.Proimg .Bigimage li img{ width: 100%; height: 100%; object-fit: contain;}
.Proimg .Bigimage .slick-dots{text-align: center; z-index: 10; margin-top: 0.1rem;}
.Proimg .Bigimage .slick-dots li{width: 0.15rem;height: 0.15rem;background-color:rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; display: inline-block; margin: 0 0.1rem;}
.Proimg .Bigimage .slick-dots li button{display: none;}
.Proimg .Bigimage .slick-dots li.slick-active{background-color: #e71a2f; }

.Proimg .tab{margin-top: 0.4rem; margin-bottom: 0.5rem;}
.Proimg .tab span{display: flex;align-items: center;justify-content: center;font-size: var(--font-size25);background-color: rgba(0, 0, 0, 0.1);color: rgba(255, 255, 255, 0.5); height: 0.5rem;padding: 0 0.4rem;border-radius: 0.5rem;margin:0 0.1rem;cursor: pointer;}
.Proimg .tab .cur {background-color: rgba(0, 0, 0, 0.5);color: rgba(255, 255, 255, 1); }

.ProInfo{ margin-bottom: 0.5rem;}
.ProInfo .tag{margin-bottom: 0.2rem;}
.ProInfo .tag span{font-size: var(--font-size28); color: #fff; line-height: 0.35rem; position: relative; display: inline-block;}
.ProInfo .tag span:not(:last-child):after{content: '';display: inline-block;vertical-align: middle;background: rgba(255, 255, 255, 0.2);width: 0.02rem;height: 0.22rem;background: #fff;transform: skew(-20deg); margin: 0 0.18rem;}
.ProInfo .title{font-size: var(--font-size45); color: #fff;font-family: 'fy';line-height: 1; position: relative; margin-bottom: 0.2rem;}
.ProInfo .title::after{position: absolute;bottom: 0;left: 0;z-index: -1;display: block;content: '';background-color: #e71a2f; width:1.8rem ; height: 0.08rem; }
.ProInfo .desc{font-size: var(--font-size28); color: #fff; line-height: 0.35rem;}

.ProDetail{background: #f9f9f9; padding: 0.7rem 0;}
.ProDetail .title{font-size: var(--font-size45); color: #000;font-family: 'fy';}
.ProDetail h2{font-size: var(--font-size40); color: #000;font-family: 'fy'; color: #e71a2f;}
.ProDetail .edit_info { font-size: var(--font-size28); color: #333; line-height: 0.5rem;}


/* 关于 */
.AboutPage{background-image: url(../images/AboutBg.png);background-size: 100%;background-repeat: no-repeat;background-position: top center;  }

.AboutInfo{ padding:1.2rem 0 0.6rem 0;}
.AboutInfo .num{font-size: var(--font-size28); color: #000;font-family: 'fy';text-align: center;background-image: url(../images/jiao.png);background-size: contain;background-repeat: no-repeat;background-position: center center;margin-bottom: 1.2rem; }
.AboutInfo .title{ margin-bottom: 0.5rem; text-align: center;}
.AboutInfo .title:after {content: "";display: block;width: 0.01rem;height: 0.65rem;background: #000000;margin: 0.6rem auto 0;}
.AboutInfo .title .cn{font-size: var(--font-size40); color: #000;font-family: 'fy'; margin-bottom: 0.15rem;}
.AboutInfo .title .desc{font-size: var(--font-size32); color: #000;font-family: 'fy'; line-height: 0.35rem; letter-spacing: 0.1rem;}
.AboutInfo .edit_info { font-size: var(--font-size26); color: #000; line-height: 0.5rem; text-align: center; }
.AboutInfo .line{background-image: url(../images/Aboutline.png);background-size: contain;background-repeat: no-repeat; width: 100%; height: 0.16rem; background-position: center center; padding: 0.7rem 0 ;}
.AboutInfo .Singlepage{ /* padding: 0.5rem 0 0.4rem 0; */font-size: var(--font-size26); color: #000; line-height: 0.5rem; text-align: center;}
.AboutInfo .Singlepage .title:after{ display: none;}
.AboutInfo .Singlepage .info{ margin: 0.2rem 0;}



/* 合作资讯 */
.CoopPage{background-image: url(../images/CoopBg.png);background-size: 100%;background-repeat: no-repeat;background-position: top center;  }
.CoopPage .Main{padding-bottom: 0rem;}
.Cooperate{ padding: 0.6rem 0;}
.Cooperate .title{ margin-bottom: 0.4rem;}
.Cooperate .title .cn{font-size: var(--font-size40); color: #000;font-family: 'fy';}
.Cooperate .title .desc{font-size: var(--font-size26); color: #000;font-family: 'fy'; line-height: 0.35rem;}
.Cooperate .subtit{font-size: var(--font-size40); color: #000;font-family: 'fy'; text-align: center; margin-bottom: 0.3rem; position: relative;z-index: 5;}
.Cooperate .subtit::after{content: "";  display: block;background-image: url(../images/Coop_line.png);background-repeat: no-repeat;background-position: center;width:2.3rem; height: 0.07rem; /* opacity: 0.2; */ margin: 0.2rem auto 0 ; }
.Cooperate .Form{background: radial-gradient(circle at top left, transparent 0.12rem, #fff 0) top left, radial-gradient(circle at top right, transparent 0.12rem, #fff 0) top right, radial-gradient(circle at bottom right, transparent 0.12rem, #fff 0) bottom right, radial-gradient(circle at bottom left, transparent 0.12rem, #fff 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;}
.Cooperate .Formlist{padding: 0.6rem 0.4rem;background-image: url(../images/Cooperate_line.png);background-repeat: no-repeat;background-position: center;background-size: 100% 100%;}
.Cooperate .form-ul{}
.Cooperate .form-ul li{margin-bottom: 10px;position: relative;}
.Cooperate .form-ul li:not(:last-child){ margin-bottom: 0.2rem;}
.Cooperate .form-ul li .tit{position: absolute;left: 0.2rem; top: 0;font-size: var(--font-size28);color: #000; line-height:0.7rem;}
.Cooperate .form-ul li .text{width: 100%; border: none; font-size: var(--font-size28);line-height:0.7rem;height:0.7rem; background: none;padding: 0 0.2rem;}
.Cooperate .form-ul li::after{content: "";  display: block;background-image: url(../images/form_line.png);background-repeat: no-repeat;background-position: center;width:100%; height: 0.05rem;  margin: 0.1rem auto 0 ; background-size: 100% 100%; }
.Cooperate .form-ul li textarea.text{height: 2.4rem;}
.Cooperate .form-ul .btn{width: 3.13rem; background-image: url(../images/btnbg.png);background-repeat: no-repeat;background-position: center; background-size: contain; background-color: transparent; font-size: var(--font-size32);color: #000;height: 0.8rem;cursor: pointer; border: 0; display: table; margin: 0.5rem auto 0;font-family: 'jx'; }
.Cooperate .code{ text-align: center; margin-top: 0.35rem; }
.Cooperate .code img{ max-width: 1.8rem; border: 0.02rem solid #e4e4e4; padding: 0.05rem;}
.Cooperate .email{text-align: center; margin-top: 0.4rem;}
.Cooperate .email a{font-size: var(--font-size24);color: #000;}


/* 新闻资讯 */
.NewPage{background-image: url(../images/News_bg.png);background-size: 100%;background-repeat: no-repeat;background-position: top center;}
.Newslist{padding:0.7rem 0;}

.NewsInfo{padding:0.5rem 0;background: rgba(255, 255, 255, 0.5);}
.NewsInfo .toptitle{ text-align: center; }
.NewsInfo .title{font-size: var(--font-size40); color: #000;font-family: 'fy'; margin-bottom: 0.1rem;}
.NewsInfo .date{font-size: var(--font-size24); color: #333; }
.NewsInfo .line{background-image: url(../images/Aboutline.png);background-size: contain;background-repeat: no-repeat; width: 100%; height: 0.16rem; background-position: center center; padding: 0.3rem 0 ;}
.NewsInfo .edit_info { font-size: var(--font-size26); color: #000; line-height: 0.4rem;}

canvas {
    display: block;
    touch-action: none; /* 确保在触摸设备上工作正常 */
    background: transparent; /* 画布背景透明 */
}

#model {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* 加载容器样式 */
#loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0);
    z-index: 100;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 进度条容器 */
.progress-container {
    width: 80%;
    max-width: 400px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    height: 8px;
    overflow: hidden;
    position: relative;
}

/* 进度条 */
.progress-bar {
    height: 100%;
    width: 0%;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    transition: width 0.3s ease;
    box-sizing: border-box; /* 确保宽度计算包含边框 */
    max-width: 100%; /* 确保最大宽度不超过容器 */
}