/* commmon */
body{ background: #f6f6f6; font-family: 微软雅黑;}

.ell{ text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.clamp{ display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; word-break:break-word; text-align: justify; overflow: hidden;}

.nkimg{ position: absolute!important; z-index: 2; top: 0; left: 0; transition: all .5s;}

/* header */
header{ position: fixed; z-index: 9; top: 0; left: 0; display: flex; flex-flow: row nowrap; justify-content: space-between; width: 100%; height: 90px; background: var(--light);}
header .logo{ width: 510px; height: 100%; background: url('../img/logo.png') 2rem center no-repeat;}
header .nav{ display: flex; justify-content: space-between; align-items: center; height: 100%;}
header .nav a{ position: relative; margin: 0 1.75rem; font-size: 1.125rem; line-height: 2.5; color: var(--dark); transition: all .3s;}
header .nav a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--secondary); opacity: 0;}
header .nav a.active{ font-weight: 700; color: var(--secondary)}
header .nav a.active:after{ opacity: 1;}
header .other{ display: flex;}
header .other .link{ display: flex; justify-content: center; align-items: center; font-size: 1.125rem; color: var(--light); background: url('../image/bg-link1.png') center center no-repeat; background-size: cover;}
header .other .link:before{ content: '<'; font-weight: 300; color: #3a75cf; padding: 0 .5em}
header .other .link:after{ content: '>'; font-weight: 300; color: #3a75cf; padding: 0 .5em}
header .other .phone{ display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: var(--light); padding: 0 1em; background: var(--secondary);}
header .other .phone i{ font-size: 2rem; margin-right: 0.5em;}

.menu{ position: relative; z-index: 11; position: relative; width: 50px; height: 50px; display: none;}
.menu i{ position: absolute; top: 0; bottom: 0; left: 20%; display: block; width: 50%; height: 2px; margin: auto; background:var(--primary); transition: all .3s;}
.menu:before,
.menu:after{ content: ''; position: absolute; z-index: 0; right: 0; left: 0; width: 60%; height: 2px; margin: auto; background:var(--primary); transition: all .3s;}
.menu:before{ top: 30%;}
.menu:after{ bottom: 30%;}

.menu.close i{ width: 0;}
.menu.close:before,
.menu.close:after{ top: 0; bottom: 0; transform: rotate(45deg);}
.menu.close:after{ transform: rotate(-45deg);}

.navigation{ position: fixed; z-index: 8; top: 50px; right: 0; width: 100vw; height: auto; padding: 1.5rem 0; display: flex; flex-flow: column nowrap; background: var(--light); opacity: 0; transform: translateY(-100vh); transition: all .5s;}
.navigation a{ display: flex; justify-content: center; align-items: center; font-size: 1.5rem; line-height: 2; padding: .25em 0; color: var(--dark); }
.navigation.active{ opacity: 1; transform: translateY(0)}
/* container */
.container{ width: 100%; height: auto;}

.row{ width: 100%; height: auto; padding: 5vw 7.5vw}
.row .row-title .cap{ position: relative; padding-left: 1.5rem;}
.row .row-title .cap:before{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; display: block; width: 6px; height: 14px; margin: auto; background: var(--primary);}
.row .row-title .cap .cn{ font-size: 2.25rem; line-height: 1.25; font-weight: bold; color:var(--primary);}
.row .row-title .cap .en{ font-size: 1.75rem; line-height: 1.25; text-transform: uppercase; color:var(--secondary);}


.row-1{ width: 100%; height: auto;}
.row-1 .row-title .cap{ position: relative; padding-left: 1.5rem;}
.row-1 .row-title .cap:before{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; display: block; width: 6px; height: 14px; margin: auto; background:#2d4b81;}
.row-1 .row-title .cap .cn{ font-size: 2.25rem; line-height: 1.25; font-weight: bold; color:#2d4b81;}
.row-1 .row-title .cap .en{ font-size: 1.75rem; line-height: 1.25; text-transform: uppercase; color:var(--secondary);}






.index-new-top .row-title .cap{ position: relative; padding-left: 1.5rem;}
.index-new-top .row-title .cap:before{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; display: block; width: 6px; height: 14px; margin: auto; background: var(--primary);}
.index-new-top .row-title .cap .cn{ font-size: 2.25rem; line-height: 1.25; font-weight: bold; color:var(--primary);}
.index-new-top .row-title .cap .en{ font-size: 1.75rem; line-height: 1.25; text-transform: uppercase; color:var(--secondary);}



.row .row-title .cap-1{ position: relative; padding-left: 1.5rem;}
.row .row-title .cap-1:before{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; display: block; width: 6px; height: 14px; margin: auto; background: #fff;}
.row .row-title .cap-1 .cn-1{ font-size: 2.25rem; line-height: 1.25; font-weight: bold; color: #fff;}
.row .row-title .cap-1 .en-1{ font-size: 1.75rem; line-height: 1.25; text-transform: uppercase; color:#ff7161;}


  /* index */
  .index{ width: 100vw; height: 52vw; background: #eee;}
  .index .slide{ position: relative;}
  .index .slide .itm{ position: relative; overflow: hidden; }
  .index .slide .itm .thumb{ position: relative; width: 100%; height: 52vw; overflow: hidden;}
  .index .slide .itm .thumb .img{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; transform: scale(1); transition: 5s ;}
  .index .slide .itm.slick-animate .thumb .img{ transform: scale(1.05);}

  .index .slide .slick-arrow{ position: absolute; z-index: 3; bottom: 4.5vw; display: flex; justify-content: center; align-items: center; width: 2.25rem; height: 2.25rem; border: 3px solid #fff; border-radius: 50%; cursor: pointer; font-family: rjhp; opacity: 0.5;}
  .index .slide .slick-prev{ left: 7.5vw;}
  .index .slide .slick-prev:after{ content: '\e60c'; color: var(--light)}
  .index .slide .slick-next{ left: calc(7.5vw + 3rem);}
  .index .slide .slick-next:after{ content: '\e60d'; color: var(--light)}

  .index .slide .slick-dots{ position: absolute; z-index: 3; bottom: 4.5vw; right: 7.5vw; display: flex; justify-content: center; align-items: center;}
  .index .slide .slick-dots li{ list-style: none; display: flex; justify-content: center; align-items: center; }
  .index .slide .slick-dots li:not(:last-child):after{ content: ''; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin: 0 5px; background: var(--light); transition: all .5s;}
  .index .slide .slick-dots li:not(:last-child):before{ content: ''; display: block; width: 0; height: 2px; background: var(--light); transition: all 5s;}
  .index .slide .slick-dots li:last-child:after{ content: ''; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin: 0 5px; background: var(--light); transition: all .5s;}
  .index .slide .slick-dots li:last-child:before{ content: ''; display: block; width: 0; height: 2px; background: var(--light); transition: all 5s;}
  .index .slide .slick-dots li:not(:last-child).slick-active:after{ background: var(--secondary);}
  .index .slide .slick-dots li:last-child.slick-active:after{ background: var(--secondary);}
  .index .slide .slick-dots li:last-child.slick-active:before{  width: 9rem;}
  .index .slide .slick-dots li.slick-active:not(:last-of-type)+li:before{ width: 9rem;}
  
  
  /* number */
  .number{ display: grid; grid-template-columns: repeat(3,1fr); width: 100%; height: auto; /*padding: 0 7.5vw;*/ background: #1669bd; background-size: 7.5vw 100%;}
  .number .itm{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 4.5rem 0; background:linear-gradient(to right,#1669bd,#068dd9); color: var(--light); line-height: 1;}
  .number .itm .ico{ margin-right: 2rem;}
  .number .itm .ico i{ font-size: 5rem;}
  .number .itm .num{ display: flex; flex-flow: column nowrap;}
  .number .itm .num .counter{ font-size: 3rem;}
  .number .itm .num .cap{ font-size: 1.125rem;}

  /* product */
  .product{ display: grid; grid-gap: 2.5vw;}
  .product .row-title{ display: flex; justify-content: space-between; align-items: center;}
  .product .row-title .cate{ display: flex;}
  .product .row-title .cate a{ position: relative; margin: 0 2em; font-size: 1.125rem; line-height: 2; color: var(--dark); transition: all .3s;}
  .product .row-title .cate a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: var(--secondary); opacity: 0;}
  .product .row-title .cate a.active{ color: var(--secondary)}
  .product .row-title .cate a.active:after{ opacity: 1;}
  .product .row-title .more{ padding: .25em 1.5em; border: 1px solid var(--dark); font-size: 1.125rem; line-height: 2; text-transform: uppercase; color: var(--secondary); transition: all .5s;}
  .product .row-content{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2rem;}
  .product .row-content .itm{ width: 100%; height: 100%;}
  .product .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--light); overflow: hidden;}
  .product .row-content .itm .info{ padding: .5em 0; font-size: 1.25rem; line-height: 2; text-align: left; color: var(--dark); transition: all .5s;background:#fff; border-top: 1px solid #dedede;}
  .product .row-content .itm .p1{font-size:.85rem; color: #999;transition: all .5s;}
  .wenzi_huanhang{width:100%; height:40px; overflow: hidden;white-space: nowrap; /* 禁止文本换行 */overflow: hidden; /* 隐藏超出范围的内容 */text-overflow: ellipsis; /* 使用省略号 */-webkit-line-clamp: 1; /* 限制为3行 */}
  .zizhi_wenzi{width:80%; height:40px;margin: 0 auto; text-align: center; overflow: hidden;white-space: nowrap; /* 禁止文本换行 */overflow: hidden; /* 隐藏超出范围的内容 */text-overflow: ellipsis; /* 使用省略号 */-webkit-line-clamp: 1; /* 限制为3行 */}




  /* workshop */
  .workshop{ display: grid; grid-template-columns: repeat(2,1fr); padding: 8vw 7.5vw; align-items: center; background: url('../image/bg-workshop1.png') center center no-repeat; background-size: cover;}
  .workshop .row-title .cap:before{ top: calc( 2.25rem * 1.5 / 2); bottom: auto; transform: translateY(-50%);}
  .workshop .row-title .cap .cn{ line-height: 1.5; padding-bottom: 1em; color: var(--secondary)}
  .workshop .row-title .cap .en{ font-size: 4.5rem; color: var(--light)}
  .workshop .row-title .more{ display: flex; align-items: center; padding: 1.5rem 0; margin-top: 8rem;}
  .workshop .row-title .more:before{ content: ''; display: block; width: 11px; height: 11px; border: 2px solid var(--light); border-radius: 50%; transition: all .5s;}
  .workshop .row-title .more:after{ content: ''; display: block; width: 0; height: 0; border-top: 6px solid transparent; border-left: 9px solid var(--light); border-bottom: 6px solid transparent; transition: all .5s;}
  .workshop .row-title .more i{ width: calc( 80% - 20px); height: 1px; background: var(--light); transition: all .5s;}
  .workshop .row-content{ width: 100%; overflow: hidden;}
  .workshop .row-content .list{ width: 100%; overflow: hidden;}
  .workshop .row-content .list .itm .thumb{ width: 100%; position: relative; width: 100%; height: 0; padding-bottom: calc(100% / 3 * 2);}
  .workshop .row-content .list .slick-arrow{ position: absolute; z-index: 3; bottom: 0; display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3rem; cursor: pointer; font-family: rjhp; font-size: 1.5rem; transition: all .5s;}
  .workshop .row-content .list .slick-prev{ right: 3.5rem; background: var(--secondary);}
  .workshop .row-content .list .slick-prev:before{ content: '\e64b'; color: var(--light); transition: all .5s;}
  .workshop .row-content .list .slick-next{ right: 0; background: var(--light);}
  .workshop .row-content .list .slick-next:before{ content: '\e64f'; color: var(--secondary); transition: all .5s;}

  /* laboratory */
  .laboratory{ display: grid; grid-gap: 2.5vw; width: 100%; overflow: hidden; padding: 5vw calc( 7.5vw - 1rem); background: url('../image/bg-laboratory.png') center center no-repeat; background-size: cover;}
  .laboratory .row-title{ display: flex; justify-content: center;}
  .laboratory .row-content{ width: 100%; overflow: hidden;}
  .laboratory .row-content .list{ width: 100%;}
  .laboratory .row-content .itm{ padding: 0 1rem;}
  .laboratory .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--light); overflow: hidden;}
  .laboratory .row-content .itm .info{ padding: .5em 0; font-size: 1rem; line-height: 2; text-align: center; color: var(--dark); background: var(--light); transition: all .5s;}




  .laboratory-1{ display: grid; grid-gap: 2.5vw; width: 100%; overflow: hidden; padding: 2vw calc( 2.5vw - 1rem); background-size: cover;}
  .laboratory-1 .row-title{ display: flex; justify-content: center;}
  .laboratory-1 .row-content{ width: 100%; overflow: hidden;}
  .laboratory-1 .row-content .list{ width: 100%;}
  .laboratory-1 .row-content .itm{ padding: 0 1rem;}
  .laboratory-1 .row-content .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--light); overflow: hidden;}
  .laboratory-1 .row-content .itm .info{ padding: .5em 0; font-size: 1rem; line-height: 2; text-align: center; color: var(--dark); background: var(--light); transition: all .5s;}



  /* about */
  .about{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw; padding: 6.5vw 7.5vw 16.5vw; background: url('../image/bg-about.png') center bottom no-repeat; background-size: cover;}
  .about .row-title .cap .cn{ font-size: 3rem; color: var(--light)}
  .about .row-content{ grid-column: 1 / 2; padding: 0 1.5rem 2.5vw; border-bottom: 1px solid #abd6ff; font-size: 1rem; line-height: 1.75; color: var(--dark)}
  .about .partner{ grid-column: 1 / 2; display: grid; grid-gap: 2.5vw ;}
  .about .partner .title{ font-size: 2rem; font-weight: 700; color: var(--primary)}
  .about .partner .content{ width: 100%; overflow: hidden;}
  .about .partner .content .list{ width: calc( 100% + 1.5rem); margin-left: -0.75rem;}
  .about .partner .content .list .itm{ padding: 0 .75rem}
  .about .partner .content .list .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 40%; border-radius: 8px; background: var(--light); overflow: hidden;}

  /* news */

  
/* footer */
footer{ width: 100%; height: auto; font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;}
footer .foot{ display: grid; grid-template-columns: 2fr 5fr; grid-gap: 3vw; width: 100%; padding: 3.75vw 7.5vw; background: url('../image/bg-foot1.png') center center no-repeat; background-size: cover;}
footer .foot .logo{ grid-row: 1 / 3; color:var(--light)}
footer .foot .logo .ico{  width: 100%; height: 30px; -webkit-mask: url('../image/logo1.webp') left center no-repeat; background: var(--light);}
footer .foot .logo .cn{ font-size: 1.875rem; font-weight: 700; }
footer .foot .logo .en{ font-size: .75rem; text-transform: uppercase; letter-spacing: .3em;}
footer .foot .nav-bottom{ display: flex; justify-content: flex-end; align-items: center;}
footer .foot .nav-bottom a{ position: relative; font-size: 1rem; line-height: 1.5; color: var(--light)}
footer .foot .nav-bottom a:last-child{ padding-left: 2em;}
footer .foot .nav-bottom a:not(:last-child){ padding: 0 2em}
footer .foot .nav-bottom a:not(:last-child):after{ content: ''; position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 1px; height: 50%; margin: auto; background: #3a75cf;}
footer .foot .contact{ display: flex; justify-content: flex-end; align-items: center; color: #8ba9e0; font-size: 0.875rem;}
footer .foot .contact .itm{ display: flex; align-items: center; margin-left: 5em;}
footer .foot .contact .itm i{ font-size: 1.125rem; line-height: 1; color: var(--secondary); margin-right: 0.5em;}
footer .copyright{ display: flex; justify-content: space-between; width: 100%; padding: 1em 7.5vw; font-size: 0.875rem; line-height: 1.5; color: var(--light); background: #526892;}

/* sub */
.head{ position: relative; width: 100%; height: 24vw; padding-top: 90px; background: var(--primary);}
.head .thumb{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.head .title{ position: absolute; bottom: 0; left: 0; display: flex; flex-flow: column nowrap; justify-content: center; width: 100%; height: calc( 100% - 90px); padding: 0 7.5vw; color: var(--light)}
.head .title .cn{ font-size: 2rem; line-height: 2; font-weight: 700;}
.head .title .en{ font-size: 1.75rem; line-height: 1; text-transform: uppercase;}
.location{ display: flex; align-items: center; width: 100%; padding: 0 7.5vw;  font-size: 0.875rem; line-height: 1.5; color: var(--dark);}
.location:before{ content: '当前位置：'; background: url('../image/location.png') left center no-repeat; padding-left: 1.5em;}


.wrapper{ display: grid; grid-gap: 2.5vw; width: 100%; height: auto; padding: 2.5vw 7.5vw;}
/* product */
.category-product{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.category-product .title{ position: relative; padding-left: .5em; font-size: 2.25rem; line-height: 1.5; font-weight: 700; color: var(--primary)}
.category-product .title:before{ content: ''; position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; display: block; width: 6px; height: 14px; margin: auto; background: var(--secondary);}
.category-product .list{ display: flex;}
.category-product .list a{ position: relative; margin: 0 2em; font-size: 1.125rem; line-height: 2; color: var(--dark); transition: all .3s;}
.category-product .list a:after{ content: ''; position: absolute; z-index: 0; bottom: 0; left: 0; display: block; width: 100%; height: 3px; background: var(--secondary); opacity: 0;}
.category-product .list a.active{ color: var(--secondary)}
.category-product .list a.active:after{ opacity: 1;}

.list-product{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2rem;}
.list-product .itm{ width: 100%; height: 100%;}
.list-product .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--light); overflow: hidden;}
.list-product .itm .info{ padding: .5em 0; font-size: 1.25rem; line-height: 2; text-align: center; color: var(--dark); transition: all .5s;}

/* album */
.list-album{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 2rem;}
.list-album .itm{ width: 100%; height: 100%;}
.list-album .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--light); overflow: hidden;}
.list-album .itm .info{ padding: .5em 0; font-size: 1rem; line-height: 2; text-align: center; color: var(--dark); background: var(--light); transition: all .5s;}

/* news */
.news {
    display: grid;
    grid-gap: 2.5vw;
    background: url('../image/bg-news.png') center center no-repeat;
    background-size: cover;
}

.news .row-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news .row-title .cate {
    display: flex;
}

.news .row-title .cate a {
    font-size: 1rem;
    line-height: 2;
    color: #666;
    padding: 0.25em 1.5em;
    margin-left: 1em;
    border: 1px solid #999;
    transition: all .5s;
}

.news .row-title .cate a.active {
    color: #fff;
    border-color: var(--light);
}

.news .row-content {
    width: 100%;
    overflow: hidden;
}

.news .row-content .list {
    width: 100%;
}

.news .row-content .list .itm {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 100%;
    height: auto;
    padding: 2.5rem 2.5rem 5rem;
    background: var(--light);
}

.news .row-content .list .itm .thumb {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc( 100% / 16 * 9);
}

.news .row-content .list .itm .thumb:after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 1rem;
    left: 1rem;
    display: block;
    width: 100%;
    height: 100%;
    background: var(--primary);
    transition: all .5s;
}

.news .row-content .list .itm .info {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    width: 100%;
    padding-top: 2rem;
    padding-left: 5rem;
    overflow: hidden;
}

.news .row-content .list .itm .info .title {
    font-size: 2rem;
    line-height: 1.5;
    color: var(--primary);
    transition: all .5s;
}

.news .row-content .list .itm .info .desc {
    font-size: 1rem;
    line-height: 2;
    color: #666;
    -webkit-line-clamp: 5!important;
}

.news .row-content .list .itm .info .line {
    width: 100%;
    height: 1px;
    background: #e0e0e0;
}

.news .row-content .list .itm .info .more {
    position: absolute;
    bottom: 0;
    right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 2px solid #666;
    border-radius: 50%;
    transition: all .5s;
}

.news .row-content .list .itm .info .more:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 1rem;
    height: 2px;
    margin: auto;
    background: var(--dark);
    transition: all .5s;
}

.news .row-content .list .itm .info .more:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 2px;
    height: 1rem;
    margin: auto;
    background: var(--dark);
    transition: all .5s;
}

.news .row-content .list .itm .info .date {
    line-height: 1;
    text-align: right;
}

.news .row-content .list .itm .info .date .y {
    font-size: 1.125rem;
    color: #999;
}

.news .row-content .list .itm .info .date .md {
    font-size: 3.125rem;
    color: var(--secondary)
}

/* pagination */

/* contact */
.list-contact{ display: grid; grid-template-columns: repeat(3,1fr);}
.list-contact .itm{ display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 2.5vw 0;}
.list-contact .itm i{ font-size: 5rem; line-height: 1; color: var(--secondary)}
.list-contact .itm span{ font-size: 1.125rem; line-height: 2; color: #666;}
.list-contact .itm strong{ font-size: 1.25rem; line-height: 2; color: var(--dark); transition: all .5s;}

#map{ width: 100%; height: 37.5vw;}

/* about */
.about-profile{ display: grid; grid-template-columns: 1fr 3fr;}
.about-profile .title{ position: relative; padding: 4rem; background: url('../image/profile-t.png') center center no-repeat; background-size: cover;}
.about-profile .title:after{ content: ''; position: absolute; z-index: 0; bottom: 4rem; left: 4rem; width: 2px; height: 6rem; background: var(--light);}
.about-profile .title .cn{ font-size: 1.5rem; line-height: 1.5; color: var(--light)}
.about-profile .title .en{ font-size: 1.5rem; line-height: 1.5; color: var(--light)}
.about-profile .content{ width: 100%; height: 0; padding-bottom: 40%; background: url('../image/profile-c.png') center center no-repeat; background-size: cover;}

.about-number{ display: grid; grid-template-columns: repeat(3,1fr);}
.about-number .itm{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; line-height: 1;}
.about-number .itm:first-child{ justify-content: flex-start;}
.about-number .itm:last-child{ justify-content: flex-end;}
.about-number .itm .ico{ margin-right: 2rem;}
.about-number .itm .ico i{ font-size: 5rem; color: var(--secondary);}
.about-number .itm .num{ display: flex; flex-flow: column nowrap;}
.about-number .itm .num .counter{ font-size: 3rem; color: var(--primary);}
.about-number .itm .num .cap{ font-size: 1.125rem; color: var(--dark);}

.about-information{ display: grid; grid-gap: 1.25vw;}
.about-information .title{ font-size: 1.5rem; font-weight: 700; color: var(--primary)}
.about-information .content{ font-size: 1rem; line-height: 2; color: #666;}

.about-partner{ display: grid; grid-gap: 1.25vw;}
.about-partner .title{ font-size: 1.5rem; font-weight: 700; color: var(--primary)}
.about-partner .content{ width: 100%; overflow: hidden;}
.about-partner .content .list{ width: calc(100% + 1.5rem); margin-left: -0.75rem;}
.about-partner .content .list .itm{ padding: 0 .75rem}
.about-partner .content .list .itm .thumb{ position: relative; width: 100%; height: 0; padding-bottom: 40%; border-radius: 8px; background: var(--light); overflow: hidden;}

.about-culture{ display: grid; grid-gap: 1.25vw;}
.about-culture .title{ font-size: 1.5rem; font-weight: 700; color: var(--primary)}
.about-culture .content{ display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 1rem;}
.about-culture .content .itm{ padding: 2rem; border-radius: 8px; background: var(--light);}
.about-culture .content .itm .caption{ display: flex; align-items: center; margin-bottom: 1rem; font-size: 1.5rem; line-height: 1.5; font-weight: 700; color: var(--dark)}
.about-culture .content .itm .caption i{ font-size: 2rem; color: var(--secondary)}
.about-culture .content .itm .cn{ font-size: .875rem; line-height: 2; color: #666}
.about-culture .content .itm .en{ font-size: .75rem; line-height: 2; color: #999}

.about-line{ width: 100%; height: 1px; background: #e0e0e0;}

/* article */
.article-title{ text-align: center;}
.article-title .title{ font-size: 1.5rem; line-height: 1.75; color: var(--dark)}
.article-title .info{ display: flex; justify-content: center; align-items: center; margin-top: 1.25vw; font-size: 0.875rem; color: #666; line-height: 1.5;}
.article-title .info .source,
.article-title .info .time{ display: flex; justify-content: center; align-items: center; margin: 0 1em}
.article-title .info .source i{ position: relative; width: .875rem; height: .875rem; border: 1px solid var(--tertiary); border-radius: 2px; margin-right: 0.5em;}
.article-title .info .source i:before{ content: ''; position: absolute; top: 40%; left: 50%; width: 30%; height: 1px; background: var(--tertiary); transform: translateX(-50%);}
.article-title .info .source i:after{ content: ''; position: absolute; bottom: 40%; left: 50%; width: 40%; height: 1px; background: var(--tertiary); transform: translateX(-50%);}
.article-title .info .time i{ position: relative; width: .875rem; height: .875rem; border: 1px solid var(--tertiary); border-radius: 50%; margin-right: 0.5em;}
.article-title .info .time i:before{ content: ''; position: absolute; bottom: 45%; left: 45%; width: 40%; height: 1px; background: var(--tertiary);}
.article-title .info .time i:after{ content: ''; position: absolute; top: 15%; left: 45%; width: 1px; height: 40%; background: var(--tertiary);}

.article-content{ font-size: 1rem; line-height: 2; color: #666;}
.article-content img{ display: inline-block; max-width: 100%;}
.article-content p:not(:last-child){ padding-bottom: 2em;}

.article-arrow{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 2.5vw;}
.article-arrow a{ position: relative; padding: .75em 3em; font-size: .875rem; line-height: 2; color: #333; background: var(--light);}
.article-arrow a:after{ content: ''; position: absolute; z-index: 0; top: 50%; left: 2em; display: block; width: 5px; height: 5px; background: var(--tertiary); transform: rotate(45deg) translateY(-50%);}
.article-arrow a:first-child:before{ content: '上一篇：'; color: var(--tertiary)}
.article-arrow a:last-child:before{ content: '下一篇：'; color: var(--tertiary)}

/* commodity */
.commodity-wrap{ display: grid; grid-template-columns: 6fr 1fr; grid-gap: 2.5vw; align-items: start;}
.commodity-cover,
.commodity-content{ grid-column: 1 / 2 ;}
.commodity-cover{ display: grid; grid-template-columns: repeat(3,1fr); background: #efefef}
.commodity-cover .cover{ position: relative; width: 100%; height: 0; padding-bottom: 75%; background: var(--light);}
.commodity-cover .info{ grid-column: 2 / 4; display: flex; flex-flow: column nowrap; justify-content: space-between; padding: 2.5rem 4rem;}
.commodity-cover .info .title{ font-size: 1.25rem; line-height: 1.5; font-weight: 700;}
.commodity-cover .info .standard{ font-size: 1rem; line-height: 2;}
.commodity-cover .info .phone{ display: flex; width: 100%;}
.commodity-cover .info .phone span{ display: flex; justify-content: center; align-items: center; width: 50%; padding: .25rem; background: var(--secondary); font-size: 1.125rem; color: var(--light)}
.commodity-cover .info .phone span i{ font-size: 2rem; margin-right: 0.25em;}
.commodity-cover .info .phone span b{ font-size: 1.5rem;}
.commodity-cover .info .phone:after{ content: '< 做精铸企业，持续满足客户期望 >'; display: flex; justify-content: center; align-items: center; width: 50%; background: var(--light); font-size: 1.125rem; color: var(--primary)}

.commodity-content{ display: grid; grid-gap: 1.25vw; justify-items: start;}
.commodity-content .caption{ position: relative; font-size: 1.5rem; line-height: 2; font-weight: 700; color: var(--primary)}
.commodity-content .caption:after{ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--secondary);}
.commodity-content .content{ font-size: 1rem; line-height: 1.75; color: #666;}
.commodity-content .content img{ display: inline-block; max-width: 100%;}

.commodity-cate{ grid-row: 1 / 3; grid-column: 2 / 3; display: flex; flex-flow: column nowrap; justify-content: space-around; padding: 1.5rem 0; background: var(--primary);}
.commodity-cate .caption{ display: flex; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: 700; color: var(--light)}
.commodity-cate .caption i{ font-size: 2rem; color: var(--secondary)}
.commodity-cate .list{ display: flex; flex-flow: column nowrap; padding-left: 4rem;}
.commodity-cate .list a{ position: relative; padding: .5em 0 .5em 1em; font-size: 1rem; line-height: 2; color: var(--light)}
.commodity-cate .list a:before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; height: 4px; margin: auto; background: var(--light);}