@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative; overflow-x: hidden;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


ol.num { margin: 0; padding: 0; list-style-type: none; counter-reset: item;}
ol.num li { display: table; counter-increment: item; margin-bottom: 0.6em;}
ol.num li:before { content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em;}
ol.num li li { margin: 0;}
ol.num li li:before { content: counters(item, ".") " ";}


@media screen and (min-width: 1370px) {

  /************ header + nav ************/

  header { width: 100%; height: 90px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 999;}

  .header-logo-title { width: 400px; margin: 0 0 0 4vw;}
  .header-logo-title img { width: 330px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: 950px;}
  nav#pc ul.nav-menu { width: 100%; height: 90px; padding: 0 4vw 0 0; box-sizing: border-box; list-style: none; background: linear-gradient(150deg, transparent 90px, #cbcecf 0) top right; background-size: 100% 100%; background-repeat: no-repeat; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0;}
  nav#pc ul.nav-menu li a { padding: 5px 15px; color: #cf000e; font-size: 1.1rem; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #666;}


  /************ banner ************/

  .banner-box-mo { display: none;}

  .banner-box { clear: both; width: 100%; position: relative;}

  .banner-box img.banner-pic { width: 100%; height: auto; position: relative; z-index: 1;}
  .banner-box img.banner-logo { width: 16vw; height: auto; position: absolute; top: 15vw; left: calc(50% - 8vw); z-index: 2;}
  .banner-box img.banner-title { width: 37vw; height: auto; position: absolute; top: 31vw; left:  calc(50% - 18.5vw); z-index: 2;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 5vw 0; display: flex; justify-content: flex-start; align-items: stretch;}

  .about-col-pic-mo { display: none;}

  .about-col-pic { width: 50%; background-image: url("../images/about_pic.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: right center; position: relative; z-index: 1;}
  .about-col-pic img { display: none;}

  .about-col-text { width: 50%; padding: 5vw 0; position: relative; z-index: 2;}
  .about-col-text .about-title { width: 400px; padding: 10px 40px 10px 75px; margin: 0 0 0 -75px; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .about-col-text .about-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .about-col-text .about-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}
  .about-col-text .about-text { width: 100%; padding: 4.5vw 9vw 0 4vw; box-sizing: border-box; font-size: 1.2vw; line-height: 2vw;}


  /************ section #business ************/

  section#business { clear: both; width: 100%; padding: 5vw 0; background-color: #eee; background-image: url("../images/business_bg.png"); background-repeat: no-repeat; background-position: right top;}

  .business-title { width: 360px; padding: 10px 40px 10px 75px; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .business-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .business-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .business-item-list { clear: both; width: 100%; padding: 5vw 4vw 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .business-item-list .item-box { width: calc(100% / 2 - 3vw); margin: 0 1.5vw 3vw 1.5vw; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .business-item-list .item-box .pic { width: 15vw;}
  .business-item-list .item-box .pic img { width: 100%; height: auto;}
  .business-item-list .item-box .text { width: calc(100% - 15vw); padding: 1vw 3vw; box-sizing: border-box;}
  .business-item-list .item-box .text span.title { color: #000; font-size: 2.2vw; font-weight: 600; line-height: 4vw;}
  .business-item-list .item-box .text span.des { color: #000; font-size: 1.6vw; line-height: 2.4vw;}


  /************ section #esg ************/

  section#esg { clear: both; width: 100%; position: relative;}

  img.esg-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .esg-title { width: 360px; padding: 10px 0 10px 90px; box-sizing: border-box; background-color: #cf000e; position: absolute; top: 5vw; right: 0; z-index: 2;}
  .esg-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}

  .esg-item-list { width: 100%; padding: 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 17vw; left: 0; z-index: 2;}
  .esg-item-list .column-item { width: calc(100% / 4 * 3); display: flex; justify-content: flex-start; align-items: stretch;}
  .esg-item-list .column-item .item-box { width: calc(100% / 3 - 3vw); margin: 0 3vw 0 0; border-radius: 2vw; background-color: #7d8488; overflow: hidden;}
  .esg-item-list .column-item .item-box .title { width: 100%; padding: 1.5vw; box-sizing: border-box; color: #fff; font-size: 2vw; font-size: 700; text-align: center; background-color: #cf000e;}
  .esg-item-list .column-item .item-box .text { width: 100%; padding: 1.5vw; box-sizing: border-box; color: #fff; font-size: 1.4vw; text-align: center;}
  .esg-item-list .column-text { width: calc(100% / 4); color: #fff; font-size: 1.2vw; line-height: 2.4vw;}

  .read-more-bt { width: 19vw; position: absolute; top: 46vw; left: 4vw; z-index: 2;}
  .read-more-bt a { width: 100%; padding: 0.8vw 0; color: #cf000e; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #fff; display: block;}
  .read-more-bt a:hover { color: #fff; background-color: #cf000e;}


  section#ESG-content { width: 100%; padding: 0 100px; box-sizing: border-box;}
  
  .ESG-con-title { width: 440px; padding: 8px 0; margin: -80px auto 40px auto; color: #fff; font-size: 2.2rem; font-weight: 600; text-align: center; background-color: #cf000e; position: relative; z-index: 2;}
  .ESG-con-text { width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  img.fancybox-bottom, img.fancybox-top { clear: both; width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #security ************/

  section#security { clear: both; width: 100%; padding: 5vw 0; background-image: url("../images/security_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .security-title { width: 360px; padding: 10px 40px 10px 75px; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .security-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .security-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .security-content { clear: both; width: 66vw; padding: 2.5vw 4.5vw; margin: 4vw auto 2.5vw auto; box-sizing: border-box; background-color: rgba(255,255,255,0.7);}
  .security-content .con-text { width: 100%; padding: 0 0 1.5vw 0; font-size: 1.2vw; text-align: center;}
  .security-content .item-box { width: 100%; padding: 0.5vw 1vw; margin: 0 0 1vw 0; box-sizing: border-box; border-radius: 1.2vw; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .security-content .item-box .icon { width: 4.4vw; color: #cf000e; font-size: 3.4vw;}
  .security-content .item-box .text { width: calc(100% - 4.4vw); font-size: 1.1vw;}
  .security-content .item-box .text span.title { font-size: 1.4vw; font-weight: 600;}

  .read-more-bt-2 { clear: both; width: 19vw; margin: 0 auto;}
  .read-more-bt-2 a { width: 100%; padding: 0.8vw 0; color: #fff; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #cf000e; display: block;}
  .read-more-bt-2 a:hover { color: #cf000e; background-color: #ccc;}


  /************ section #products ************/

  section#products { clear: both; width: 100%; padding: 5vw 4vw; box-sizing: border-box; background-image: url("../images/products_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .products-title { width: 360px; padding: 10px; margin: 0 auto; box-sizing: border-box; text-align: center; background-color: #cf000e;}
  .products-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .products-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .products-text { clear: both; width: 100%; margin: 80px 0; font-size: 1.2vw; text-align: center;}

  .products-item-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .products-item-list .item-box { width: calc(100% / 4 - 40px); padding: 1.5vw; box-sizing: border-box; margin: 0 20px; border-radius: 1.5vw; background-color: #7d8488;}
  .products-item-list .item-box .top-title { width: 100%; height: 7vw; padding: 0 0 2vw 0; box-sizing: border-box; color: #fff; font-size: 2vw; font-weight: 600; text-align: center; display: flex; justify-content: center; align-items: center;}
  .products-item-list .item-box .pro-items { width: 100%; height: 21vw; border-radius: 0 0 1vw 1vw; background-color: #fff; display: flex; align-items: center;}
  .products-item-list .item-box .pro-items ul.items { width: 80%; padding: 0; margin: 0 auto; list-style: none; display: block;}
  .products-item-list .item-box .pro-items ul.items li { width: 100%; padding: 1vw 0; margin: 0; color: #7d8488; font-size: 1.2vw; text-align: center; border-bottom: 1px #ccc solid;}
  .products-item-list .item-box .pro-items ul.items li:last-child { border-bottom: 0;}


  /************ section #contact ************/

  section#contact { clear: both; width: 100%; padding: 5vw 0 14vw 0; background-color: #eee; background-image: url("../images/contact_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom;}

  .contact-title { width: 360px; padding: 10px 75px 10px 40px; box-sizing: border-box; background-color: #cf000e; float: right;}
  .contact-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .contact-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .contact-content { clear: both; width: 100%; padding: 0 4vw; margin: 6.2vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-content .column-logo { width: 50%; padding: 0 0 0 4vw; box-sizing: border-box;}
  .contact-content .column-logo img.logo { width: 20vw; height: auto;}
  .contact-content .column-logo img.title { width: 30vw; height: auto; margin: 1.5vw 0 0 0;}
  .contact-content .column-infor { width: 50%; font-size: 1.4vw; line-height: 2.4vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-content .column-infor .caption { width: 9vw; text-align: right;}
  .contact-content .column-infor .column { width: calc(100% - 9vw);}
  .contact-content .column-infor .column-add { width: calc(100% - 9vw);}
  .contact-content .column-infor .column-add-mo { display: none;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 2vw 4vw; box-sizing: border-box; background-color: #cf000e;}

  .copyright { width: 100%; color: #fff; font-size: 1vw; text-align: center;}
  .copyright-mo { display: none;}


}

@media screen and (min-width: 1024px) and (max-width: 1369px) {

  /************ header + nav ************/

  header { width: 100%; height: 90px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 999;}

  .header-logo-title { width: 340px; margin: 0 0 0 3vw;}
  .header-logo-title img { width: 280px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 340px);}
  nav#pc ul.nav-menu { width: 100%; height: 90px; padding: 0 3vw 0 0; box-sizing: border-box; list-style: none; background: linear-gradient(150deg, transparent 90px, #cbcecf 0) top right; background-size: 100% 100%; background-repeat: no-repeat; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0;}
  nav#pc ul.nav-menu li a { padding: 5px 10px; color: #cf000e; font-size: 1.1rem; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #666;}


  /************ banner ************/

  .banner-box-mo { display: none;}

  .banner-box { clear: both; width: 100%; position: relative;}

  .banner-box img.banner-pic { width: 100%; height: auto; position: relative; z-index: 1;}
  .banner-box img.banner-logo { width: 16vw; height: auto; position: absolute; top: 15vw; left: calc(50% - 8vw); z-index: 2;}
  .banner-box img.banner-title { width: 37vw; height: auto; position: absolute; top: 31vw; left:  calc(50% - 18.5vw); z-index: 2;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 5vw 0; display: flex; justify-content: flex-start; align-items: stretch;}

  .about-col-pic-mo { display: none;}

  .about-col-pic { width: 50%; background-image: url("../images/about_pic.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: right center; position: relative; z-index: 1;}
  .about-col-pic img { display: none;}

  .about-col-text { width: 50%; padding: 5vw 0; position: relative; z-index: 2;}
  .about-col-text .about-title { width: 30vw; padding: 0.8vw 2vw 0.8vw 3.6vw; margin: 0 0 0 -3.6vw; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .about-col-text .about-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .about-col-text .about-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}
  .about-col-text .about-text { width: 100%; padding: 4.5vw 9vw 0 4vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}


  /************ section #business ************/

  section#business { clear: both; width: 100%; padding: 5vw 0; background-color: #eee; background-image: url("../images/business_bg.png"); background-repeat: no-repeat; background-position: right top;}

  .business-title { width: 30vw; padding: 0.8vw 2vw 0.8vw 3.6vw; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .business-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .business-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .business-item-list { clear: both; width: 100%; padding: 5vw 4vw 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .business-item-list .item-box { width: calc(100% / 2 - 3vw); margin: 0 1.5vw 3vw 1.5vw; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .business-item-list .item-box .pic { width: 15vw;}
  .business-item-list .item-box .pic img { width: 100%; height: auto;}
  .business-item-list .item-box .text { width: calc(100% - 15vw); padding: 1vw 3vw; box-sizing: border-box;}
  .business-item-list .item-box .text span.title { color: #000; font-size: 2.2vw; font-weight: 600; line-height: 4vw;}
  .business-item-list .item-box .text span.des { color: #000; font-size: 1.6vw; line-height: 2.4vw;}


  /************ section #esg ************/

  section#esg { clear: both; width: 100%; position: relative;}

  img.esg-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .esg-title { width: 30vw; padding: 0.8vw 0 0.8vw 4.5vw; box-sizing: border-box; background-color: #cf000e; position: absolute; top: 5vw; right: 0; z-index: 2;}
  .esg-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}

  .esg-item-list { width: 100%; padding: 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 17vw; left: 0; z-index: 2;}
  .esg-item-list .column-item { width: calc(100% / 4 * 3); display: flex; justify-content: flex-start; align-items: stretch;}
  .esg-item-list .column-item .item-box { width: calc(100% / 3 - 3vw); margin: 0 3vw 0 0; border-radius: 2vw; background-color: #7d8488; overflow: hidden;}
  .esg-item-list .column-item .item-box .title { width: 100%; padding: 1.5vw; box-sizing: border-box; color: #fff; font-size: 2vw; font-size: 700; text-align: center; background-color: #cf000e;}
  .esg-item-list .column-item .item-box .text { width: 100%; padding: 1.5vw; box-sizing: border-box; color: #fff; font-size: 1.4vw; text-align: center;}
  .esg-item-list .column-text { width: calc(100% / 4); color: #fff; font-size: 1.4vw; line-height: 2.4vw;}

  .read-more-bt { width: 19vw; position: absolute; top: 46vw; left: 4vw; z-index: 2;}
  .read-more-bt a { width: 100%; padding: 0.8vw 0; color: #cf000e; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #fff; display: block;}
  .read-more-bt a:hover { color: #fff; background-color: #cf000e;}


  section#ESG-content { width: 100%; padding: 0 40px; box-sizing: border-box;}
  
  .ESG-con-title { width: 440px; padding: 8px 0; margin: -80px auto 40px auto; color: #fff; font-size: 2.2rem; font-weight: 600; text-align: center; background-color: #cf000e; position: relative; z-index: 2;}
  .ESG-con-text { width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  img.fancybox-bottom, img.fancybox-top { clear: both; width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #security ************/

  section#security { clear: both; width: 100%; padding: 5vw 0; background-image: url("../images/security_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .security-title { width: 30vw; padding: 0.8vw 2vw 0.8vw 3.6vw; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .security-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .security-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .security-content { clear: both; width: 66vw; padding: 2.5vw 4.5vw; margin: 4vw auto 2.5vw auto; box-sizing: border-box; background-color: rgba(255,255,255,0.7);}
  .security-content .con-text { width: 100%; padding: 0 0 1.5vw 0; font-size: 1.4vw; text-align: center;}
  .security-content .item-box { width: 100%; padding: 0.5vw 1vw; margin: 0 0 1vw 0; box-sizing: border-box; border-radius: 1.2vw; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .security-content .item-box .icon { width: 4.4vw; color: #cf000e; font-size: 3.4vw;}
  .security-content .item-box .text { width: calc(100% - 4.4vw); font-size: 1.1vw;}
  .security-content .item-box .text span.title { font-size: 1.4vw; font-weight: 600;}

  .read-more-bt-2 { clear: both; width: 19vw; margin: 0 auto;}
  .read-more-bt-2 a { width: 100%; padding: 0.8vw 0; color: #fff; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #cf000e; display: block;}
  .read-more-bt-2 a:hover { color: #cf000e; background-color: #ccc;}


  /************ section #products ************/

  section#products { clear: both; width: 100%; padding: 5vw 4vw; box-sizing: border-box; background-image: url("../images/products_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .products-title { width: 30vw; padding: 0.8vw; margin: 0 auto; box-sizing: border-box; text-align: center; background-color: #cf000e;}
  .products-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .products-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .products-text { clear: both; width: 100%; margin: 5vw 0; font-size: 1.4vw; text-align: center;}

  .products-item-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .products-item-list .item-box { width: calc(100% / 4 - 2vw); padding: 1.5vw; box-sizing: border-box; margin: 0 1vw; border-radius: 1.5vw; background-color: #7d8488;}
  .products-item-list .item-box .top-title { width: 100%; height: 7vw; padding: 0 0 2vw 0; box-sizing: border-box; color: #fff; font-size: 2vw; font-weight: 600; text-align: center; display: flex; justify-content: center; align-items: center;}
  .products-item-list .item-box .pro-items { width: 100%; height: 21vw; border-radius: 0 0 1vw 1vw; background-color: #fff; display: flex; align-items: center;}
  .products-item-list .item-box .pro-items ul.items { width: 80%; padding: 0; margin: 0 auto; list-style: none; display: block;}
  .products-item-list .item-box .pro-items ul.items li { width: 100%; padding: 1vw 0; margin: 0; color: #7d8488; font-size: 1.2vw; text-align: center; border-bottom: 1px #ccc solid;}
  .products-item-list .item-box .pro-items ul.items li:last-child { border-bottom: 0;}


  /************ section #contact ************/

  section#contact { clear: both; width: 100%; padding: 5vw 0 15vw 0; background-color: #eee; background-image: url("../images/contact_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom;}

  .contact-title { width: 30vw; padding: 0.8vw 3.6vw 0.8vw 2vw; box-sizing: border-box; background-color: #cf000e; float: right;}
  .contact-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .contact-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .contact-content { clear: both; width: 100%; padding: 0 4vw; margin: 8vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-content .column-logo { width: 50%; padding: 0 0 0 4vw; box-sizing: border-box;}
  .contact-content .column-logo img.logo { width: 20vw; height: auto;}
  .contact-content .column-logo img.title { width: 30vw; height: auto; margin: 1.5vw 0 0 0;}
  .contact-content .column-infor { width: 50%; font-size: 1.4vw; line-height: 2.4vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-content .column-infor .caption { width: 9vw; text-align: right;}
  .contact-content .column-infor .column { width: calc(100% - 9vw);}
  .contact-content .column-infor .column-add { width: calc(100% - 9vw);}
  .contact-content .column-infor .column-add-mo { display: none;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 2vw 4vw; box-sizing: border-box; background-color: #cf000e;}

  .copyright { width: 100%; color: #fff; font-size: 1vw; text-align: center;}
  .copyright-mo { display: none;}


}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /************ header + nav ************/

  header { width: 100%; height: 80px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 999;}

  .header-logo-title { width: 340px; margin: 0 0 0 3vw;}
  .header-logo-title img { width: 280px; height: auto;}

  nav#pc { display: none;}

  nav#mo { width: calc(100% - 340px); height: 80px; display: flex; justify-content: flex-end; align-items: center; background: linear-gradient(150deg, transparent 90px, #cbcecf 0) top right; background-size: 100% 100%; background-repeat: no-repeat;}
  nav#mo .nav-icon { width: 50px; margin: 0 3vw 0 0; color: #cf000e; font-size: 2.2rem; text-align: center;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; border-top: 1px #7d8488 solid; background-color: #fff; list-style: none; display: none; position: absolute; top: 80px; left: 0; z-index: 999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 10px 0; color: #cf000e; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  nav#mo ul.nav-menu li a:hover { color: #666;}


  /************ banner ************/

  .banner-box-mo { display: none;}

  .banner-box { clear: both; width: 100%; position: relative;}

  .banner-box img.banner-pic { width: 100%; height: auto; position: relative; z-index: 1;}
  .banner-box img.banner-logo { width: 16vw; height: auto; position: absolute; top: 15vw; left: calc(50% - 8vw); z-index: 2;}
  .banner-box img.banner-title { width: 37vw; height: auto; position: absolute; top: 31vw; left:  calc(50% - 18.5vw); z-index: 2;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 5vw 0; display: flex; justify-content: flex-start; align-items: stretch;}

  .about-col-pic-mo { display: none;}

  .about-col-pic { width: 50%; background-image: url("../images/about_pic.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: right center; position: relative; z-index: 1;}
  .about-col-pic img { display: none;}

  .about-col-text { width: 50%; padding: 5vw 0; position: relative; z-index: 2;}
  .about-col-text .about-title { width: 30vw; padding: 0.8vw 2vw 0.8vw 3.6vw; margin: 0 0 0 -3.6vw; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .about-col-text .about-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .about-col-text .about-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}
  .about-col-text .about-text { width: 100%; padding: 4.5vw 9vw 0 4vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}


  /************ section #business ************/

  section#business { clear: both; width: 100%; padding: 5vw 0; background-color: #eee; background-image: url("../images/business_bg.png"); background-repeat: no-repeat; background-position: right top;}

  .business-title { width: 30vw; padding: 0.8vw 2vw 0.8vw 3.6vw; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .business-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .business-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .business-item-list { clear: both; width: 100%; padding: 5vw 4vw 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .business-item-list .item-box { width: calc(100% / 2 - 3vw); margin: 0 1.5vw 3vw 1.5vw; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .business-item-list .item-box .pic { width: 15vw;}
  .business-item-list .item-box .pic img { width: 100%; height: auto;}
  .business-item-list .item-box .text { width: calc(100% - 15vw); padding: 1vw 3vw; box-sizing: border-box;}
  .business-item-list .item-box .text span.title { color: #000; font-size: 2.2vw; font-weight: 600; line-height: 4vw;}
  .business-item-list .item-box .text span.des { color: #000; font-size: 1.6vw; line-height: 2.4vw;}


  /************ section #esg ************/

  section#esg { clear: both; width: 100%; position: relative;}

  img.esg-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .esg-title { width: 30vw; padding: 0.8vw 0 0.8vw 4.5vw; box-sizing: border-box; background-color: #cf000e; position: absolute; top: 5vw; right: 0; z-index: 2;}
  .esg-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}

  .esg-item-list { width: 100%; padding: 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 17vw; left: 0; z-index: 2;}
  .esg-item-list .column-item { width: calc(100% / 4 * 3); display: flex; justify-content: flex-start; align-items: stretch;}
  .esg-item-list .column-item .item-box { width: calc(100% / 3 - 3vw); margin: 0 3vw 0 0; border-radius: 2vw; background-color: #7d8488; overflow: hidden;}
  .esg-item-list .column-item .item-box .title { width: 100%; padding: 1.5vw; box-sizing: border-box; color: #fff; font-size: 2vw; font-size: 700; text-align: center; background-color: #cf000e;}
  .esg-item-list .column-item .item-box .text { width: 100%; padding: 1.5vw; box-sizing: border-box; color: #fff; font-size: 1.4vw; text-align: center;}
  .esg-item-list .column-text { width: calc(100% / 4); color: #fff; font-size: 1.4vw; line-height: 2.4vw;}

  .read-more-bt { width: 19vw; position: absolute; top: 46vw; left: 4vw; z-index: 2;}
  .read-more-bt a { width: 100%; padding: 0.8vw 0; color: #cf000e; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #fff; display: block;}
  .read-more-bt a:hover { color: #fff; background-color: #cf000e;}


  section#ESG-content { width: 100%; padding: 0 40px; box-sizing: border-box;}
  
  .ESG-con-title { width: 440px; padding: 8px 0; margin: -40px auto 40px auto; color: #fff; font-size: 2.2rem; font-weight: 600; text-align: center; background-color: #cf000e; position: relative; z-index: 2;}
  .ESG-con-text { width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  img.fancybox-bottom, img.fancybox-top { clear: both; width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #security ************/

  section#security { clear: both; width: 100%; padding: 5vw 0; background-image: url("../images/security_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .security-title { width: 30vw; padding: 0.8vw 2vw 0.8vw 3.6vw; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .security-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .security-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .security-content { clear: both; width: 66vw; padding: 2.5vw 4.5vw; margin: 4vw auto 2.5vw auto; box-sizing: border-box; background-color: rgba(255,255,255,0.7);}
  .security-content .con-text { width: 100%; padding: 0 0 1.5vw 0; font-size: 1.4vw; text-align: center;}
  .security-content .item-box { width: 100%; padding: 0.5vw 1vw; margin: 0 0 1vw 0; box-sizing: border-box; border-radius: 1.2vw; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .security-content .item-box .icon { width: 4.4vw; color: #cf000e; font-size: 3.4vw;}
  .security-content .item-box .text { width: calc(100% - 4.4vw); font-size: 1.1vw;}
  .security-content .item-box .text span.title { font-size: 1.4vw; font-weight: 600;}

  .read-more-bt-2 { clear: both; width: 19vw; margin: 0 auto;}
  .read-more-bt-2 a { width: 100%; padding: 0.8vw 0; color: #fff; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #cf000e; display: block;}
  .read-more-bt-2 a:hover { color: #cf000e; background-color: #ccc;}


  /************ section #products ************/

  section#products { clear: both; width: 100%; padding: 5vw 4vw; box-sizing: border-box; background-image: url("../images/products_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .products-title { width: 30vw; padding: 0.8vw; margin: 0 auto; box-sizing: border-box; text-align: center; background-color: #cf000e;}
  .products-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .products-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .products-text { clear: both; width: 100%; margin: 5vw 0; font-size: 1.4vw; text-align: center;}

  .products-item-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .products-item-list .item-box { width: calc(100% / 4 - 2vw); padding: 1.5vw; box-sizing: border-box; margin: 0 1vw; border-radius: 1.5vw; background-color: #7d8488;}
  .products-item-list .item-box .top-title { width: 100%; height: 7vw; padding: 0 0 2vw 0; box-sizing: border-box; color: #fff; font-size: 2vw; font-weight: 600; text-align: center; display: flex; justify-content: center; align-items: center;}
  .products-item-list .item-box .pro-items { width: 100%; height: 21vw; border-radius: 0 0 1vw 1vw; background-color: #fff; display: flex; align-items: center;}
  .products-item-list .item-box .pro-items ul.items { width: 80%; padding: 0; margin: 0 auto; list-style: none; display: block;}
  .products-item-list .item-box .pro-items ul.items li { width: 100%; padding: 1vw 0; margin: 0; color: #7d8488; font-size: 1.2vw; text-align: center; border-bottom: 1px #ccc solid;}
  .products-item-list .item-box .pro-items ul.items li:last-child { border-bottom: 0;}


  /************ section #contact ************/

  section#contact { clear: both; width: 100%; padding: 5vw 0 15vw 0; background-color: #eee; background-image: url("../images/contact_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom;}

  .contact-title { width: 30vw; padding: 0.8vw 3.6vw 0.8vw 2vw; box-sizing: border-box; background-color: #cf000e; float: right;}
  .contact-title span.title-cn { color: #fff; font-size: 2.2vw; font-weight: 500;}
  .contact-title span.title-en { padding: 0 0 0 1vw; color: #fff; font-size: 1.4vw;}

  .contact-content { clear: both; width: 100%; padding: 0 4vw; margin: 8vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-content .column-logo { width: 50%; padding: 0 0 0 4vw; box-sizing: border-box;}
  .contact-content .column-logo img.logo { width: 20vw; height: auto;}
  .contact-content .column-logo img.title { width: 30vw; height: auto; margin: 1.5vw 0 0 0;}
  .contact-content .column-infor { width: 50%; font-size: 1.4vw; line-height: 2.4vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-content .column-infor .caption { width: 9vw; text-align: right;}
  .contact-content .column-infor .column { width: calc(100% - 9vw);}
  .contact-content .column-infor .column-add { width: calc(100% - 9vw);}
  .contact-content .column-infor .column-add-mo { display: none;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 2vw 4vw; box-sizing: border-box; background-color: #cf000e;}

  .copyright { width: 100%; color: #fff; font-size: 1vw; text-align: center;}
  .copyright-mo { display: none;}


}

@media screen and (max-width: 767px) {

  /************ header + nav ************/

  header { width: 100%; height: 70px; background-color: #fff; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 999;}

  .header-logo-title { width: 280px; margin: 0 0 0 20px;}
  .header-logo-title img { width: 240px; height: auto;}

  nav#pc { display: none;}

  nav#mo { width: calc(100% - 280px); height: 70px; display: flex; justify-content: flex-end; align-items: center; background: linear-gradient(150deg, transparent 60px, #cbcecf 0) top right; background-size: 100% 100%; background-repeat: no-repeat;}
  nav#mo .nav-icon { width: 50px; margin: 0 20px 0 0; color: #cf000e; font-size: 2.2rem; text-align: center;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; border-top: 1px #7d8488 solid; background-color: #fff; list-style: none; display: none; position: absolute; top: 70px; left: 0; z-index: 999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 10px 0; color: #cf000e; font-size: 1.2rem; text-align: center; text-decoration: none; display: block;}
  nav#mo ul.nav-menu li a:hover { color: #666;}


  /************ banner ************/

  .banner-box { display: none;}

  .banner-box-mo { clear: both; width: 100%; position: relative;}

  .banner-box-mo img.banner-pic-mo { width: 100%; height: auto; position: relative; z-index: 1;}
  .banner-box-mo img.banner-logo-mo { width: 28vw; height: auto; position: absolute; top: calc(70px + 25vw); left: calc(50% - 14vw); z-index: 2;}
  .banner-box-mo img.banner-title-mo { width: 74vw; height: auto; position: absolute; top: calc(70px + 55vw); left:  calc(50% - 37vw); z-index: 2;}


  /************ section #about ************/

  section#about { clear: both; width: 100%; padding: 80px 0 0 0;}

  .about-col-pic { display: none;}

  .about-col-pic-mo { width: 100%;}
  .about-col-pic-mo img { width: 100%; height: auto;}

  .about-col-text { width: 100%;}
  .about-col-text .about-title { width: 360px; max-width: 100%; padding: 10px 40px 10px 0; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .about-col-text .about-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .about-col-text .about-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}
  .about-col-text .about-text { width: 100%; padding: 60px 20px; box-sizing: border-box; font-size: 1.2rem; line-height: 2em;}


  /************ section #business ************/

  section#business { clear: both; width: 100%; padding: 80px 0; background-color: #eee; background-image: url("../images/business_bg.png"); background-repeat: no-repeat; background-position: right top;}

  .business-title { width: 360px; max-width: 100%; padding: 10px 40px 10px 0; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .business-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .business-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .business-item-list { clear: both; width: 100%; padding: 60px 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .business-item-list .item-box { width: calc(100% - 40px); margin: 20px; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .business-item-list .item-box .pic { width: 120px;}
  .business-item-list .item-box .pic img { width: 100%; height: auto;}
  .business-item-list .item-box .text { width: calc(100% - 120px); padding: 0 20px; box-sizing: border-box;}
  .business-item-list .item-box .text span.title { color: #000; font-size: 1.4rem; font-weight: 600; line-height: 1.4em;}
  .business-item-list .item-box .text span.des { color: #000; font-size: 1.1rem; line-height: 1.4em;}


  /************ section #esg ************/

  section#esg { clear: both; width: 100%; padding: 80px 0; background-image: url("../images/esg_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative;}

  img.esg-bg { display: none;}

  .esg-title { width: 360px; max-width: 100%; padding: 10px 0 10px 40px; box-sizing: border-box; background-color: #cf000e; float: right;}
  .esg-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}

  .esg-item-list { clear: both; width: 100%; padding: 0 20px; margin: 60px 0 0 0; box-sizing: border-box;}
  .esg-item-list .column-item { width: 100%;}
  .esg-item-list .column-item .item-box { width: 90%; margin: 0 auto 30px auto; border-radius: 20px; background-color: #7d8488; overflow: hidden;}
  .esg-item-list .column-item .item-box .title { width: 100%; padding: 20px; box-sizing: border-box; color: #fff; font-size: 1.6rem; font-size: 700; text-align: center; background-color: #cf000e;}
  .esg-item-list .column-item .item-box .text { width: 100%; padding: 20px; box-sizing: border-box; color: #fff; font-size: 1.2rem; text-align: center;}
  .esg-item-list .column-text { width: 100%; color: #fff; font-size: 1.2rem; line-height: 2em;}

  .read-more-bt { clear: both; width: 240px; margin: 100px 0 0 20px;}
  .read-more-bt a { width: 100%; padding: 10px 0; color: #cf000e; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 30px; background-color: #fff; display: block;}
  .read-more-bt a:hover { color: #fff; background-color: #cf000e;}


  section#ESG-content { width: 100%; overflow: hidden;}
  
  .ESG-con-title { width: 100%; padding: 6px 0; margin: 0 auto 40px auto; color: #fff; font-size: 1.8rem; font-weight: 600; text-align: center; background-color: #cf000e; position: relative; z-index: 2;}
  .ESG-con-text { width: 100%; font-size: 1.1rem; line-height: 1.8em;}
  img.fancybox-bottom, img.fancybox-top { clear: both; width: 160%; height: auto; margin: 0 0 0 -30%; position: relative; z-index: 1;}


  /************ section #security ************/

  section#security { clear: both; width: 100%; padding: 80px 0; background-image: url("../images/security_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .security-title { width: 360px; max-width: 100%; padding: 10px 40px 10px 0; box-sizing: border-box; text-align: right; background-color: #cf000e;}
  .security-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .security-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .security-content { clear: both; width: 90%; padding: 40px 20px; margin: 60px auto; box-sizing: border-box; background-color: rgba(255,255,255,0.7);}
  .security-content .con-text { width: 100%; padding: 0 0 30px 0; font-size: 1.2rem; text-align: center;}
  .security-content .item-box { width: 100%; padding: 10px 20px; margin: 0 0 20px 0; box-sizing: border-box; border-radius: 20px; background-color: #fff; display: flex; justify-content: flex-start; align-items: center;}
  .security-content .item-box .icon { width: 60px; color: #cf000e; font-size: 3rem;}
  .security-content .item-box .text { width: calc(100% - 60px); font-size: 1.1rem;}
  .security-content .item-box .text span.title { font-size: 1.4rem; font-weight: 600;}

  .read-more-bt-2 { clear: both; width: 240px; margin: 100px auto 0 auto;}
  .read-more-bt-2 a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 30px; background-color: #cf000e; display: block;}
  .read-more-bt-2 a:hover { color: #cf000e; background-color: #ccc;}


  /************ section #products ************/

  section#products { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-image: url("../images/products_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .products-title { width: 360px; max-width: 100%; padding: 10px; margin: 0 auto; box-sizing: border-box; text-align: center; background-color: #cf000e;}
  .products-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .products-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .products-text { clear: both; width: 100%; margin: 40px 0; font-size: 1.2rem; text-align: center;}

  .products-item-list { clear: both; width: 100%;}
  .products-item-list .item-box { width: 80%; padding: 20px; box-sizing: border-box; margin: 0 auto 30px auto; border-radius: 20px; background-color: #7d8488;}
  .products-item-list .item-box .top-title { width: 100%; height: 120px; color: #fff; font-size: 1.8rem; font-weight: 600; text-align: center; display: flex; justify-content: center; align-items: center;}
  .products-item-list .item-box .pro-items { width: 100%; border-radius: 0 0 16px 16px; background-color: #fff; display: flex; align-items: center;}
  .products-item-list .item-box .pro-items ul.items { width: 90%; padding: 20px 0; margin: 0 auto; list-style: none; display: block;}
  .products-item-list .item-box .pro-items ul.items li { width: 100%; padding: 20px 0; margin: 0; color: #7d8488; font-size: 1.2rem; text-align: center; border-bottom: 1px #ccc solid;}
  .products-item-list .item-box .pro-items ul.items li:last-child { border-bottom: 0;}


  /************ section #contact ************/

  section#contact { clear: both; width: 100%; padding: 80px 0 160px 0; background-color: #eee; background-image: url("../images/contact_bg.jpg"); background-repeat: no-repeat; background-size: 200% auto; background-position: left bottom;}

  .contact-title { width: 360px; max-width: 100%; padding: 10px 0 10px 40px; box-sizing: border-box; background-color: #cf000e; float: right;}
  .contact-title span.title-cn { color: #fff; font-size: 1.8rem; font-weight: 500;}
  .contact-title span.title-en { padding: 0 0 0 20px; color: #fff; font-size: 1.2rem;}

  .contact-content { clear: both; width: 100%; padding: 0 20px; margin: 60px 0 0 0; box-sizing: border-box;}
  .contact-content .column-logo { width: 100%; margin: 0 0 30px 0;}
  .contact-content .column-logo img.logo { width: 220px; height: auto;}
  .contact-content .column-logo img.title { width: 320px; height: auto; margin: 15px 0 0 0;}
  .contact-content .column-infor { clear: both; width: 100%; font-size: 1.2rem; line-height: 1.6em;}
  .contact-content .column-infor .caption { width: 100%; font-weight: 600;}
  .contact-content .column-infor .column { width: 100%; margin: 0 0 20px 0;}
  .contact-content .column-infor .column-add-mo { width: 100%; margin: 0 0 20px 0;}
  .contact-content .column-infor .column-add { display: none;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 20px; box-sizing: border-box; background-color: #cf000e;}

  .copyright { width: 100%; color: #fff; font-size: 0.8rem; text-align: center;}
  .copyright-mo { display: none;}
  

}