@import "base.css";

/* 参数 */
:root {
    --main-color: #093E8A;
    --ass-color: #C60000;
}

/* 遮罩 */
.m-mask{width: 100%; height: 100%; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,.8); z-index: 888; display: none;}
.m-mask.active{display: block;}

/* 头部 */
.pc-header{display: none;}
.logo-icon{width: 3.8rem; height: 3.8rem; border: rgba(255,255,255,.5) .1rem solid; border-radius: 50%; margin-left: 1rem; font-size: var(--text-lg); color: #FFFFFF; position: relative; text-decoration: none;}
.logo-icon:first-child{margin-left: 1.5rem;}
.logo-icon:before{z-index: 1;transition: all .3s ease-in-out;}
.logo-icon:after{width: 0; height: 0; border-radius: 50%; position: absolute; background-color: #FFFFFF;  opacity: 0; content: '';transition: all .3s ease-in-out;}
.logo-icon:hover{color: var(--ass-color); text-decoration: none;}
.logo-icon:hover:after{width: 100%; height: 100%; opacity: 1;}
.m-header{height: 6rem; position: sticky; top: 0; z-index: 3;}
.m-header h1 img{height: 3rem;}
.m-header i{font-size: 2.5rem;}
.m-header i:last-child{margin-left: 2rem;}
.m-nav{width: 80%; height: 100%; position: fixed; top: 0; left: -100%; padding: 2rem; z-index: 999; transition: left 0.3s ease;}
.m-nav.active{left: 0;}
.m-nav nav{margin-top: 2rem;}
.m-nav .m-nav-close{font-size: 2rem;}
.m-nav .m-nav-item{font-size: var(--text-xl); padding: 1.5rem 0; border-bottom: #EEEEEE .1rem solid;}
.m-nav .m-nav-item a{color: #181818; text-decoration: none;}
.m-nav .m-nav-item a.on{color: var(--main-color);}
.m-nav .m-nav-item i{font-size: var(--text-xl);}
.m-nav .m-nav-item ul{margin-top: 1.5rem; display: none;}
.m-nav .m-nav-item ul li{padding: 1rem 2rem;}
.m-nav .m-nav-item ul li a{font-size: var(--text-lg);}
.m-nav .m-nav-item.on .nav-item-a{color: var(--main-color); font-weight: 600;}
.m-nav .m-nav-item.active ul{display: block;}
.m-nav .m-nav-item.active .ri-arrow-down-s-line{transform: rotate(180deg);}

/* 轮播 */
.banner{height: 50rem;}
.banner img{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: .5; object-fit: cover; z-index: 0; animation: scales 5s ease-in-out infinite alternate;}
.banner .container{position: static; z-index: 1;}
.banner b{font-size: 2.8rem;}
.banner b{margin-top: 2rem;}
.banner span{margin-top: 3.5rem; font-size: var(--text-lg);}
.banner a{text-decoration: none; padding: .8rem .8rem .8rem 2.5rem; margin-top: 5rem;}
.banner a > *{color: #FFFFFF;}
.banner a i{width: 4rem; height: 4rem;}
.banner a:hover{background-color: #0D1418;}
.banner a:hover i{background-color: var(--ass-color);}

/* 产品 */
.product-list{padding: 3rem; background-color: rgba(0,0,0,.68);}
.product-list:hover{background-color: rgba(0,0,0,1);}
.product-list img{width: 5rem; height: 5rem;}
.product-list h2{margin-top: 2rem;}
.product-list h2 a{color: #FFFFFF;}
.product-list h2 a:hover{color: var(--ass-color);}
.product-list .links{gap: 1rem 1rem; margin-top: 2rem;}
.product-list .links a{font-size: var(--text-lg); color: var(--ass-color);}
.product-list .links a:not(:last-child):after{width: .1rem; height: 1.2rem; display: block; float: right; margin-left: 1rem; margin-top: .2rem; background-color: rgba(255,255,255,.5); content: '';}
.product-list .links a:hover{color: #FFFFFF;}
.product-list .more{margin-top: 2.5rem; text-decoration: none;}
.product-list .more > *{color: #FFFFFF;}
.product-list .more i{margin-left: .2rem;}
.product-list .more:hover > *{color: var(--ass-color);}

/* 服务 */
.service-list{min-width: 0; padding: 3rem;}
.service-list:hover{transform: translateY(-2rem);}
.service-list h2 a{color: #000000;}
.service-list h2 a:hover{color: var(--ass-color);}
.service-list span{margin-top: 1rem; line-height: 1.3;}
.service-list .image{width: 100%; aspect-ratio: 2/1; margin-top: 1.5rem;}
.service-list p{margin-top: 1.5rem; line-height: 1.5; font-size: var(--text-sm);}
.service-list .more{margin-top: 2rem; padding-top: 3rem; border-top: #EEEEEE .1rem solid; text-decoration: none;}
.service-list .more i{width: 3.6rem; height: 3.6rem;}
.service-list .more em{margin-left: 1.5rem;}
.service-list .more:hover i{background-color: var(--ass-color); color: #FFFFFF;}
.service-list .more:hover em{color: #000000;}

/* 选择 */
.choose{background: #F7F7F7 url("https://qiaoming.oss-cn-hangzhou.aliyuncs.com/images/choose-bg.jpg") center/cover no-repeat fixed; position: relative; padding-bottom: 4rem;}
.choose:after{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(255,255,255,.88); content: '';}
.choose .container-title{padding: 3rem 6rem; border-radius: 0 0 2rem 2rem;}
/*.choose .container-title h2{font-size: var(--text-title);}*/
/*.choose .container-title p{font-size: var(--text-xl); margin-top: 1.5rem;}*/
.choose .container-content{margin-top: 5rem;}
.choose-list{min-width: 0; padding: 1.5rem 0;}
.choose-list .image{width: 80%; aspect-ratio: 1/1; padding: .6rem; background: linear-gradient(to right, var(--ass-color) 50%, #FFFFFF 50%);}
.choose-list .image i{font-size: 5.8rem; background-color: #F9E5E5;}
.choose-list .image span{width: 4rem; height: 4rem; top: -1.8rem; background-color: var(--ass-color); border: #FFFFFF .2rem solid;}
.choose-list h2{margin-top: 2.5rem;}
.choose-list h2 a:hover{color: var(--ass-color);}
.choose-list p{margin-top: 1.5rem; line-height: 1.6; font-size: var(--text-sm);}

/* 应用 */
.apply-list{min-width: 0; padding: 3rem;}
.apply-list .image{width: 60%;  aspect-ratio: 1/1;}
.apply-list h2{margin-top: 2.5rem;}
.apply-list h2 a:hover{color: var(--ass-color);}
.apply-list p{margin-top: 1.5rem; line-height: 1.6; font-size: var(--text-sm);}
.apply-list .more{width: 12.5rem; height:  4.2rem; background-color: rgba(198,0,0,.3); color: #000000; margin-top: 2rem; text-decoration: none;}
.apply-list .more:before{width: .8rem; height: .8rem; border-radius:0 0 0 .4rem; position: absolute; background-color: var(--ass-color); top: 0; right: 0; content: '';transition: all .3s ease-in-out;}
.apply-list .more:hover:before{width: 100%; height: 100%;}
.apply-list .more:hover em{color: #FFFFFF;}

/* 新闻 */
.new-list{min-width: 0; padding: 3rem;}
.new-list .dt{border-bottom: #EEEEEE .1rem solid; padding-bottom: 1.5rem;}
.new-list .dt i:last-of-type{margin-left: 1.5rem;}
.new-list .dt span{margin-left: .5rem;}
.new-list h2{margin-top: 2rem;}
.new-list h2 a{color: #000000;}
.new-list h2 a:hover{color: var(--ass-color);}
.new-list .image{width: 100%; aspect-ratio: 1/.6; margin-top: 2rem;}
.new-list p{margin-top: 2rem; line-height: 1.6; font-size: var(--text-sm);}
.new-list .more{margin-top: 2rem; color: #000000; text-decoration: none;}
.new-list .more i{margin-left: .5rem; transform: rotate(-45deg);}
.new-list .more:hover i{color: var(--ass-color); transform: rotate(0);}
.new-list:hover .image img{transform: scale(1.1);}

/* 底部 */
footer > *{color: rgba(255,255,255,.58);}
footer .footer-top{gap: 2rem;}
footer .footer-top .foot-item{width: 100%; }
footer .footer-top .foot-item:nth-child(n+2):nth-child(-n+3){width: 46%;}
footer .footer-top .foot-item img{height: 5rem;}
footer .footer-top .foot-item p{ margin-top: 2rem; line-height: 1.5;}
footer .footer-top .foot-item .icons{margin-top: 2rem;}
footer .footer-top .foot-item .icons .logo-icon{margin-top: 0;}
footer .footer-top .foot-item .icons .logo-icon:first-child{margin-left: 0;}
footer .footer-top .foot-item h3{font-size: var(--text-xl); margin-bottom: 1rem; color: #FFFFFF;}
footer .footer-top .foot-item a{color: rgba(255,255,255,.58);margin-top: 1rem;}
footer .footer-top .foot-item a:not(:first-child){margin-top: 1rem;}
footer .footer-top .foot-item .icons a{margin-top: 0;}
footer .footer-top .foot-item .icons a:hover{color: var(--ass-color);}
footer .footer-top .foot-item ul li{margin-top: 1rem;}
footer .footer-top .foot-item ul li i{width: 4rem; height: 4rem; border: rgba(255,255,255,.18) .1rem solid; color: #FFFFFF; border-radius: 50%; flex-shrink: 0; margin-right: 1.5rem;}
footer .footer-top .foot-item ul li i:hover{background-color: var(--ass-color);}
footer .footer-top .foot-item ul li p,footer .footer-top .foot-item ul li a{margin-top: 0!important; }
footer .footer-bottom{border-top: rgba(255,255,255,.18) .1rem solid; padding: 3rem 0;}
footer .footer-bottom .container{gap: 1.5rem;}
footer .footer-bottom .container > *{width: 100%; text-align: center;}
footer .footer-bottom p a{color: var(--ass-color);}
footer .footer-bottom .links a{color: rgba(255,255,255,.58);}
footer .footer-bottom .links a:not(:first-child){margin-left: 2rem;}

/* 内页 - 轮播 */
.inner-banner{min-height: 20rem; padding: 3rem 0; position: relative;}
.inner-banner img{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; opacity: .58; object-fit: cover; z-index: 0; animation: scales 5s ease-in-out infinite alternate;}
.inner-banner .container{gap: 3rem; position: static; z-index: 1;}
.inner-banner b{font-size: 3rem;}

/* 内页 - 产品 */
.inner-product-list{padding: 3rem; background-color: rgba(0,0,0,.68);}
.inner-product-list:hover{background-color: rgba(0,0,0,1);}
.inner-product-list h2 a{color: #FFFFFF;}
.inner-product-list h2 a:hover{color: var(--ass-color);}
.inner-product-list p{margin-top: 1rem; line-height: 1.6; font-size: var(--text-sm);}
.inner-product-list .links{margin-top: 1.5rem; gap: 4rem;}
.inner-product-list .links a{width: 2rem; height: 2rem; position: relative;}
.inner-product-list .links a:not(:last-child):after{width: .1rem; height: 1.5rem; display: block; position: absolute;  top: .4rem; right: -2rem; background-color: rgba(255,255,255,.5); content: '';}

/* 详情 */
.detailed-content{gap: 3rem; margin-bottom: 3rem;}
.detailed-content .detailed-left{min-width: 100%;}
.detailed-content .padding{padding: 3rem;}
.detailed-content .margin-top{margin-top: 2rem;}
.detailed-content .border-top{border-top: #181818 .1rem solid; padding-top: 2rem; margin-top: 2.5rem;}
.detailed-content .border-bottom{border-bottom: #181818 .1rem solid; padding-bottom: 2rem;}
.detailed-content .detailed-left .image img{border-radius: .4rem;}
.detailed-content .detailed-left p{line-height: 1.5; padding: 2rem 0;}
.detailed-content .detailed-left p.pre-line{line-height: 2;}
.detailed-content .detailed-left .detailed-article{margin-top: 2rem;line-height: 2;}
.detailed-content .detailed-left .detailed-article *{line-height: 2;word-break: break-word;hyphens: auto; padding: 0;}
.detailed-content .detailed-left .detailed-article img{max-width: 100%;}
.detailed-content .detailed-left .detailed-article p,.detailed-content .detailed-left .detailed-article span{word-break: break-word;hyphens: auto;}
.detailed-content .detailed-right{width: 100%;}
.detailed-content .detailed-right .detailed-recommends{gap: 1.5rem; margin-top: 2rem;}
.detailed-content .detailed-right .detailed-recommends a{text-decoration: underline; color: #181818;}
.detailed-content .detailed-right .cases{display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem 2rem; margin-top: 2rem;}
.detailed-content .detailed-right .cases img{width: 100%; aspect-ratio: 4/3;}
.detailed-content .detailed-right .cases p{font-size: var(--text-sm); line-height: 1.5; margin-top: 1rem;}

/* 选项卡 */
.layui-tab{margin-top: 2rem; margin-bottom: 0;}
.layui-tab-title{height: 5rem; border-color: #181818; margin-bottom: 1rem;}
.layui-tab-title li{width: 25%; font-size: var(--text-base); line-height: 5rem; padding: 0 1rem;}
.layui-tab-title .layui-this{color: #FFFFFF; z-index: 1;}
.layui-tab-title .layui-this:after{height: 5rem; border: 0; background-color: #181818; z-index: -1;}

/* 产品 -表格 */
.product-table{display: grid;  gap: .1rem; background-color: #EEEEEE; border: .1rem solid #EEEEEE; margin-top: 2.5rem;}
.product-table li{background-color: #FFFFFF; padding: 2rem 1.5rem; text-align: center; display: flex; justify-content: center; align-items: center;}
.ingredient-table,.standard-table,.mechanics-table-m{grid-template-columns: repeat(1, 12rem 1fr);}
.mechanics-table{display:none;}
.patterns-item{gap:1rem 2rem;}
.patterns-item > *{width: 100%;}

/* 表单 */
.layui-form{gap: 2rem; margin-top: 2rem;}
.layui-form input,.layui-form .disabled{height: 4.2rem; border: #181818 .1rem solid; border-radius: .4rem; padding: 0 1rem; background-color: #FFFFFF; color: #181818;}
.layui-form .layui-input:hover, .layui-textarea:hover {border-color: #181818!important;}
.layui-form .layui-form-select .layui-select-title{width: 100%; display: flex;}
.layui-form .layui-form-select .layui-edge{right: 1.5rem;}
.layui-form .layui-form-select dl{padding: 0;}
.layui-form .layui-form-select dl dd.layui-this {background-color: #181818;}
.layui-form .layui-form-select dl dd, .layui-form-select dl dt{font-size: 1.5rem;}
.layui-form .layui-textarea{height: 15rem; border: #181818 .1rem solid; border-radius: .4rem; padding: 1rem; resize: none;}
.layui-form .layui-submit{height: 5rem; background-color: #181818; color: #FFFFFF; border-radius: .4rem;}

/* 服务 */
.service{padding: 3rem 0; gap: 2rem;}
.service:nth-child(even){background-color: #3F414A;}
.service-info{gap: 1rem 0;}
.service-info span,.service-info em,.service-info p{line-height: 1.5;}

/* 博客详情 */
.blog-image{min-height: 8rem;}
.blog-image img{border-radius: .6rem;}
.blog-image:before{width: 6.8rem; height: 6.8rem; background-color: #FFFFFF; border-radius: .6rem 0 0 0; position: absolute; right: 0; bottom: 0; content: '';}
.blog-image span{width: 6rem; height: 6rem; border-radius: .6rem; background-color: var(--ass-color); color: #FFFFFF;}
.blog-image span b:first-child{font-size: 2rem;}
.blog-subtitle{display: none;}
.blog-title{font-size: 2rem; margin-top: 1.5rem; line-height: 1.5}
.detailed-content .detailed-left .detailed-article.blog-article{margin-top: .5rem;}
.blog-right{display: none;}

/* 关于我们 */
.about-us article{font-size: var(--text-lg); line-height: 1.8;}
.about-us article:not(:first-child){margin-top: 2rem;}

/* 联系方式 */
.contact-list{padding: 3rem; gap: 1.5rem; background-color: #F7F4ED; border-radius: .6rem;}
.contact-list i{width: 8rem; height: 8rem; font-size: 3rem; background-color: var(--ass-color); color: #FFFFFF; border-radius: 50%; position: relative;}
.contact-list i:before{z-index: 1;}
.contact-list i:after{width: 100%; height: 100%; position: absolute; background-color: #181818; border-radius: 50%; content: '';transition: 0.3s cubic-bezier(0.62, 0.21, 0.45, 1.52);transform: scale(0);transform-origin: center center;transform-style: preserve-3d;}
.contact-list a{color: #181818;}
.contact-list p{font-size: var(--text-sm); line-height: 1.5;}
.contact-list:hover i:after{transform: scaleX(1);}

/* 联系表单 */
.contact-form{border-radius: .6rem; margin-top: 2rem; padding: 2rem; background-color: #0E121D;grid-template-columns: 1fr;}
.form-position{position: relative;display: block;height: 0;visibility: hidden; top: 0;}
.contact-form .form-image{display: none;}
.contact-form .layui-form{margin-top: 0; gap: 2rem;}
.contact-form .layui-form h2{font-size: 2.6rem;}
.contact-form .layui-form .form-tow{grid-template-columns: 1fr;}
.contact-form .layui-form input,.contact-form .layui-form textarea{width: 100%; height: 5.5rem; background-color: rgba(255,255,255, .03); padding: 0 2rem; font-size: var(--text-lg); color: #FFFFFF; border: rgba(255,255,255, .1) .1rem solid; border-radius: .6rem;}
.contact-form .layui-form textarea{height: 18rem; padding: 2rem;}
.contact-form .layui-form-danger + .layui-form-select .layui-input, .contact-form .layui-form-danger:focus, .contact-form .layui-input:focus, .contact-form .layui-textarea:focus,.contact-form .layui-form .layui-input:hover,.contact-form .layui-textarea:hover{border-color: rgba(255, 255, 255, .1) !important;}
.contact-form .layui-submit{height: 6rem; background-color: var(--ass-color);}

/* 平板端 */
@media (min-width: 768px) {

    /* 头部 */
    .m-header{display: none;}
    .pc-header{display: flex;}
    .pc-top-header{height: 5rem;}
    .pc-top-header ul li:not(:first-child){margin-left: 2rem;}
    .pc-top-header ul li a,.pc-top-header ul li p{margin-left: .5rem;}
    .pc-top-header .icons{display: none;}
    .pc-bottom-header{height: 6rem;}
    .pc-bottom-header h1 img{height: 3rem;}
    .pc-bottom-header nav{gap: 2rem;}
    .pc-bottom-header nav .nav-item-a{text-decoration: none;}
    .pc-bottom-header nav .nav-item-a > *{color: #FFFFFF; transition: all .3s ease-in-out;}
    .pc-bottom-header nav .nav-item-a:hover > *,.pc-bottom-header nav .nav-item:hover .nav-item-a> *{color: #FFFFFF;}
    .pc-bottom-header nav .nav-item-a i{margin-left: .5rem;}
    .pc-bottom-header nav .nav-item:hover .nav-item-a i{transform: rotate(180deg);}
    .pc-bottom-header nav .nav-item .down-navs-list{top: 100%; background-color: #3F414A; visibility: hidden; opacity: 0; transition: visibility 0.3s ease, opacity 0.3s ease, transform 0.3s ease; z-index: 2;}
    .pc-bottom-header nav .nav-item.self-menu .down-navs-list{min-width: 15rem; width: max-content; left: 50%; transform: translateX(-50%) translateY(-1rem);}
    .pc-bottom-header nav .nav-item.self-menu .down-navs-list .sub-navs{padding: 1.5rem 2rem;}
    .pc-bottom-header nav .nav-item.self-menu .down-navs-list .sub-navs a{line-height: 3.5rem; color: #FFFFFF;}
    .pc-bottom-header nav .nav-item.self-menu .down-navs-list .sub-navs a:hover{color: #FFFFFF;}
    .pc-bottom-header nav .nav-item.full-menu{position: static;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list{width: 100%; min-width: auto; left: 0; transform: translateY(-1rem);}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs{width: 100%; margin: 0 auto; padding: 2rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dt{border-bottom: #666666 .1rem solid; padding-bottom: 2rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dt:not(:first-child){margin-top: 2rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dt.border-top{border-top:  #666666 .1rem solid; padding-top: 2rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dt i{margin-left: .5rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd{margin-top: 2rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd a{width: 20%; line-height: 3rem; color: #FFFFFF; padding: 0 1rem; text-decoration: none;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd a:before{width: .6rem; height: .6rem; background-color: #FFFFFF; display: block; float: left; margin: 1.2rem 1rem 0 0;  border-radius: 50%; content:'';}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd a:hover{background-color: #30333F; color: #FFFFFF;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd a:hover:before{background-color: #FFFFFF;}
    .pc-bottom-header nav .nav-item:hover .down-navs-list{visibility: visible; opacity: 1;}
    .pc-bottom-header nav .nav-item.self-menu:hover .down-navs-list{transform:translateX(-50%) translateY(0);}
    .pc-bottom-header nav .nav-item.full-menu:hover .down-navs-list{transform:translateY(0);}
    .pc-bottom-header span{font-size: var(--text-lg); margin-left: 3rem;}
    .pc-bottom-header .quote{display: none;}

    /* 轮播 */
    .banner{height: 58rem;}
    .banner b{font-size: 6rem;}
    .banner b:nth-child(2){margin-top: 3rem;}
    .banner span{font-size: var(--text-xl);}

    /* 产品 */
    .product-list .links{height: 7.8rem;}
    .product-list .links a:not(:last-child):after{margin-top: .4rem;}

    /* 服务 */
    .service-list span{height: 3.4rem;}
    .service-list p{height: 5.4rem;}

    /* 选择 */
    .choose{padding-bottom: 3rem;}
    .choose-list .image{width: 50%; padding: .6rem;}
    .choose-list .image i{font-size: 5.8rem;}

    /* 底部 */
    footer .footer-top{gap: 5rem;}
    footer .footer-top .foot-item{width: 46%;}
    footer .footer-top .foot-item:first-child{width: 46%;}
    footer .footer-top .foot-item h3{margin-bottom: 2rem;}
    footer .footer-top .foot-item a:not(:first-child),footer .footer-top .foot-item ul li{margin-top: 1.8rem;}
    footer .footer-bottom .container{justify-content: space-between;}
    footer .footer-bottom .container > *{width: auto; text-align: center;}

    /* 内页 - 轮播 */
    .inner-banner{min-height: 25rem;}

    /* 产品详情 */
    .patterns-item{gap:1rem 2rem;}
    .patterns-item > *{width: auto;}
    .ingredient-table{grid-template-columns: repeat(2, 15rem 1fr);}
    .standard-table{grid-template-columns: repeat(1, 15rem 1fr);}
    .mechanics-table{display:grid;grid-template-columns: repeat(7, 1fr);}
    .mechanics-table-m{display:none;}
    .layui-tab-title li{width: auto; padding: 0 3rem;}

    /* 服务详情 */
    .service .container{padding-top: 3rem; padding-bottom: 3rem; grid-template-columns:30rem 1fr ; gap: 3rem;}
    .service:nth-child(even) .service-info{order: 1;}
    .service:nth-child(even) .service-image{order: 2;}
    .service:nth-child(even)  .container{grid-template-columns: 1fr 30rem;}
    .service-info span,.service-info em,.service-info p{line-height: 1.8;}
    .service-image{align-self: stretch;}

    /* 博客详情 */
    .blog-image img{border-radius: 1rem;}
    .blog-image:before{width: 7.8rem; height: 7.8rem; border-radius: 1rem 0 0 0;}
    .blog-image span{width: 7rem; height: 7rem; border-radius: 1rem;}
    .blog-image span b:first-child{font-size: 2.5rem;}
    .blog-subtitle{display: flex; margin-top: 3rem; gap: 3rem;}
    .blog-subtitle > *{font-size: var(--text-lg); }
    .blog-subtitle li{height: 4.5rem; background-color: rgba(198,0,0,.18); padding: 0 1.5rem; border-radius: .6rem; gap: .6rem;}
    .blog-title{font-size: 2.8rem; margin-top: 2rem;}

    /* 联系表单 */
    .contact-form{padding: 3rem;}
    .contact-form .layui-form{gap: 3rem;}
    .contact-form .layui-form h2{font-size: 3.6rem;}
    
}

/* 电脑端 */
@media (min-width: 1280px) {

    /* 头部 */
    .pc-top-header .icons{display: flex;}
    .pc-bottom-header{height: 9rem;}
    .pc-bottom-header h1 img{height: 5rem;}
    .pc-bottom-header nav{gap: 5rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs{width: 120rem; padding: 2rem 0;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd a{ line-height: 4rem; padding: 0 1.5rem;}
    .pc-bottom-header nav .nav-item.full-menu .down-navs-list .products-navs dd a:before{margin: 1.8rem 1rem 0 0;}
    .pc-bottom-header .quote{display: flex; width: 19rem; height: 5.5rem; margin-left: 5rem; text-decoration: none;}
    .pc-bottom-header .quote:before,.pc-bottom-header .quote:after{width: 0; height: 0; background-color: #0E121D; position: absolute;  content: ''; opacity: 0; transition: all .3s ease-in-out;}
    .pc-bottom-header .quote:before{left: 0; top: 0;}
    .pc-bottom-header .quote:after{right: 0; bottom: 0;}
    .pc-bottom-header .quote p{left: 3rem;}
    .pc-bottom-header .quote i{width: 4.5rem; height: 4.5rem; right: .5rem; background-color: #0E121D;}
    .pc-bottom-header .quote:hover:after,.pc-bottom-header .quote:hover:before{width: 100%; height: 100%; opacity: 1;}
    .pc-bottom-header .quote:hover > *{color: #FFFFFF;}
    .pc-bottom-header .quote:hover i{background-color: var(--ass-color);}

    /* 轮播 */
    .banner{height: 68rem;}
    .banner b{font-size: 8rem;}

    /* 详情 */
    .detailed-content .detailed-left{min-height: 80rem;}

    /* 产品 */
    .product-list .links{height: 8.5rem;}
    .product-list .links a:not(:last-child):after{margin-top: .5rem;}

    /* 服务 */
    .service-list span{height: 4.2rem;}
    .service-list p{height: 6.3rem;}

    /* 选择 */
    /*.choose-list .image{width: 58%; padding: .6rem;}*/
    /*.choose-list .image i{font-size: 5.8rem;}*/

    /* 底部 */
    footer .footer-top .foot-item{width: 20%;}
    footer .footer-top .foot-item:nth-child(n+2):nth-child(-n+3){width: 15%;}
    footer .footer-top .foot-item:first-child{width: 25%;}
    footer .footer-top .foot-item:last-child{width: 30%;}

    /* 内页 - 轮播 */
    .inner-banner{min-height: 30rem;}

    /* 产品详情 */
    .detailed-content .detailed-left{width: 60rem; min-width: auto;}
    .detailed-content .detailed-right{width: 35rem;}
    .ingredient-table{grid-template-columns: repeat(3, 15rem 1fr);}

    /* 服务详情 */
    .service{padding-top: 5rem; padding-bottom: 5rem;}
    .service .container{grid-template-columns: 35rem  1fr ; gap: 5rem;}
    .service:nth-child(even) .container{grid-template-columns: 1fr 35rem;}

    /* 博客详情 */
    .blog-right{display: flex; gap: 3rem;}
    .blog-right-box{background-color: #F7F4ED; border-radius: 1rem;}
    .blog-right i{font-size: 2rem;}
    .blog-right h3{font-size: 2rem; margin-left: .8rem;}
    .blog-right .right-classify{margin-top: 2.5rem; gap: 2rem;}
    .blog-right .right-classify a{height: 5.2rem; padding: 0 2.5rem; background-color: #FFFFFF; border: #E5E5E5 .1rem solid; border-radius: .6rem; text-decoration: none;}
    .blog-right .right-classify a > *{z-index: 1;}
    .blog-right .right-classify a:before{width: 100%; height: 0; background-color: var(--ass-color); position: absolute; left: 0; content: ''; transition: all .3s ease-in-out;}
    .blog-right .right-classify a:hover,.blog-right .right-classify a.on{border-color: var(--ass-color);}
    .blog-right .right-classify a:hover:before,.blog-right .right-classify a.on:before{height: 100%;}
    .blog-right .right-classify a:hover > *,.blog-right .right-classify a.on > *{color: #FFFFFF;}
    .blog-right .right-recent{margin-top: 2rem;}
    .blog-right .right-recent,.blog-right .right-recent li{gap: 1.5rem;}
    .blog-right .right-recent li .image{aspect-ratio: 1/.6;}
    .blog-right .right-recent li .image:after{width: 100%; height: 100%; background-color:  rgba(198,0,0,.28); position: absolute; top: 0; left: 0; transform: translateX(100%); content: '';transition: all .3s ease-in-out;}
    .blog-right .right-recent li h3 a{font-size: var(--text-base); padding: 1rem 0; color: #181818;}
    .blog-right .right-recent li:hover .image:after{transform: translateX(0);}
    .blog-right .right-recent li:hover .image img{transform: scale(1.2) rotate(5deg);}
    .blog-right .right-recent li:hover h3 a{color: var(--ass-color);}

    /* 联系表单 */
    .contact-form{display: grid; grid-template-columns: repeat(2,1fr);}
    .contact-form .form-image{display: flex;}
    .contact-form .form-image img{border-radius: .6rem;}

    .contact-form{border-radius: .6rem; margin-top: 5rem; padding: 5rem; background-color: #0E121D; gap: 5rem;}

    .contact-form .layui-form{margin-top: 0; gap: 3rem;}
    .contact-form .layui-form .form-tow{gap: 3rem;}
    .contact-form .layui-form input,.contact-form .layui-form textarea{height: 5.5rem; background-color: rgba(255,255,255, .03); padding: 0 2rem; font-size: var(--text-lg); color: #FFFFFF; border: rgba(255,255,255, .1) .1rem solid; border-radius: .6rem;}
    .contact-form .layui-form textarea{height: 18rem; padding: 2rem;}
    .contact-form .layui-form-danger + .layui-form-select .layui-input, .contact-form .layui-form-danger:focus, .contact-form .layui-input:focus, .contact-form .layui-textarea:focus,.contact-form .layui-form .layui-input:hover,.contact-form .layui-textarea:hover{border-color: rgba(255, 255, 255, .1) !important;}
    .contact-form .layui-submit{height: 6rem; background-color: var(--ass-color);}

}