@charset "utf-8";

/*header*/
.hd:after { position: absolute; content: ""; width: 100%; height: 10rem; background: linear-gradient(to bottom,rgba(36,36,36,0.4) 0%,transparent 100%); left: 0; top: 0; }
.hd .h_con { position: relative; z-index: 2; }
.hd .h_con .logo img:first-child { display: block; }
.hd .h_con .logo img:last-child { display: none; }
.hd .h_con .slogan { color: #fff; }
.hd .h_con .slogan:before { background: #fff; }
.hd .h_con .navbtn { filter: invert(0); }
/*banner*/
.banner { position: relative; background: #F4E515; margin: -6rem auto 0; overflow: hidden; clear: both; }
.banner .swiper-slide { line-height: 0; }
.banner .swiper-slide img { width: 100%; }
.banner .swiper-pagination { bottom: 1.5rem !important; }
.banner .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; background: #fff; opacity: 0.4; border-radius: 0.3rem; cursor: pointer; margin: 0 0.5rem !important; transition: all 0.5s ease; }
.banner .swiper-pagination-bullet-active { opacity: 1; width: 1.3rem; }
.principle { padding: 5.5rem 4% 5.85rem; }
.principle h2 span { display: block; font-size: 1.1rem; color: #F4E515; line-height: 100%; font-weight: bold; font-variation-settings: "BEVL" 1,"wght" 700; text-transform: uppercase; margin-bottom: 1.3rem; }
.principle h2 strong { display: block; font-size: 2.7rem; color: #212122; line-height: 3.2rem; font-weight: bold; font-variation-settings: "BEVL" 1,"wght" 700; }
.principle p.info { margin: 1rem 0 2rem; font-size: 1.2rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.6rem; color: #606266; }
.principle .open-video video { width: 100%; }
.product { padding: 5rem 4%; overflow: hidden; box-sizing: border-box; background: url("/mobile/images/product_bg.jpg") no-repeat center top; }
.product h2 a { display: block; font-size: 2.7rem; font-weight: 700; font-variation-settings: "BEVL" 1,"wght" 700; letter-spacing: 0rem; line-height: 3.2rem; color: #212122; text-align: center; }
.product .pro_con { margin-top: 2.5rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.product .pro_con li { width: 49.85%; margin-bottom: 0.1rem; }
.product .pro_con li > a { display: block; border-radius: 1rem; line-height: 0; overflow: hidden; background: #fff; box-sizing: border-box; transition: all 0.5s ease; border: 0.1rem solid #fff; padding: 1.4rem 0.65rem 0.65rem; }
.product .pro_con li h4 { font-size: 1rem; line-height: 1.2rem; color: #212122; max-height: 2.4rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 2.4rem; padding: 0 0.85rem; font-variation-settings: "BEVL" 1,"wght" 700; }
.product .pro_con li span { display: inline-block; margin: 0.7rem 0; padding-left: 0.85rem; padding-right: 1.2rem; font-size: 0.8rem; color: #909399; line-height: 0.9rem; background: url(/mobile/images/more1.png) no-repeat right center; background-size: 0.65rem auto; transition: all 0.5s ease; }
.product .pro_con li span:hover { padding-right: 1.4rem; }
.product .pro_con li img { width: 100%; }
.product .pro_con li:hover > a { border: 0.1rem solid #f4e515; box-shadow: 0.4rem 0.2rem 1rem rgba(1,32,66,0.12); }
.product .more { width: 9.1rem; margin-top: 2.4rem; }
.product .more:hover { width: 9.5rem; }
.more { margin: 0 auto; transition: all 0.5s ease; }
.more a { display: inline-block; margin: 0 auto; height: 2.2rem; background: #F4E515; box-sizing: border-box; padding: 0.3rem 0.3rem 0.3rem 1.1rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; transition: all 0.5s ease; border-radius: 1.25rem; }
.more a span { display: block; font-size: 1rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.2rem; color: #212122; }
.more a i { display: block; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #ffffff; box-sizing: border-box; padding: 0.4rem; }
.more a i img { width: 0.8rem; }
.sm_banner { height: 17rem; background: url(/mobile/images/sm_banner_bg.jpg) no-repeat center top; box-sizing: border-box; padding: 2.5rem 4%; }
.sm_banner p { font-size: 1.8rem; font-weight: 700; font-variation-settings: "BEVL" 1,"wght" 700; letter-spacing: 0rem; line-height: 2.1rem; color: #ffffff; margin-bottom: 1.7rem; text-align: center; }
.sm_banner a { display: block; margin: 0 auto; width: 21.4rem; height: 3.7rem; background: #F4E515; border-radius: 2.15rem; box-sizing: border-box; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; transition: all 0.5s ease; padding: 0.6rem 2.2rem 0.6rem 0.6rem; }
.sm_banner a img { width: 2.5rem; }
.sm_banner a span { font-size: 1.2rem; font-weight: 700; font-variation-settings: "BEVL" 1,"wght" 700; line-height: 1.4rem; color: #212122; transition: all 0.5s ease; }
.sm_banner a:hover { background: #f6ea46; }
.sm_banner a:hover span { letter-spacing: 0.5px; }
.ys { background: #f1f1f1; padding: 5rem 5.33%; }
.ys h2 { font-size: 2.7rem; font-weight: 700; font-variation-settings: "BEVL" 1,"wght" 700; line-height: 1; color: #212122; margin-bottom: 2.5rem; }
.ys p { font-size: 1.2rem; font-weight: 500; font-variation-settings: "BEVL" 1,"wght" 500; letter-spacing: 0rem; line-height: 1.4rem; color: #606266; margin-bottom: 1.3rem; padding-left: 1.3rem; position: relative; }
.ys p:before { position: absolute; content: ""; width: 0.7rem; height: 0.1rem; opacity: 1; background: #d8d8d8; left: 0; top: 0.65rem; }
.ys .more { margin: 2.5rem 0 0 0; width: 17.4rem; }
.ys .more:hover { width: 17.8rem; }
.news { overflow: hidden; padding: 5rem 4% 2.5rem; }
.news h2 a { display: block; font-size: 3rem; font-weight: 700; font-variation-settings: "BEVL" 1,"wght" 700; letter-spacing: 0rem; line-height: 3.5rem; color: #212122; text-align: center; }
.news .news_con { margin-top: 2.5rem; overflow: hidden; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
.news .news_con dl { width: 48.55%; margin-bottom: 2.5rem; }
.news .news_con dt { line-height: 0; overflow: hidden; border-radius: 0.5rem; }
.news .news_con dt img { width: 100%; height: 100%; object-fit: cover; }
.news .news_con dd a { display: block; padding-top: 1rem; box-sizing: border-box; }
.news .news_con dd h4 { font-size: 1.1rem; line-height: 1.5rem; color: #212122; max-height: 4.5rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 4.5rem; font-weight: bold; font-variation-settings: "BEVL" 1,"wght" 700; }
.news .news_con dd p { width: 8.3rem; height: 2.2rem; box-sizing: border-box; background: #f6f8fa; border-radius: 1.25rem; padding: 0 0.4rem 0 0.95rem; display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; align-items: center; -webkit-align-items: center; transition: all 0.5s ease; margin-top: 1.5rem; }
.news .news_con dd p span { font-size: 0.9rem; font-weight: 400; letter-spacing: 0rem; line-height: 1.1rem; color: #212122; }
.news .news_con dd p i { display: block; width: 1.4rem; height: 1.4rem; opacity: 1; background: #212122; padding: 0.35rem; box-sizing: border-box; border-radius: 50%; }
.news .news_con dd p i img { width: 0.7rem; filter: invert(1); }
.news .news_con dd p:hover { width: 8.5rem; }
.news dl:hover dd p { background: #F4E515; }
.news dl:hover dd p i { background: #fff; }
.news dl:hover dd p i img { filter: invert(0); }