/*----------------------------------------------------
*
*   COMMON CSS FILE | by zhanglong | 
*
-----------------------------------------------------*/

.ie-view { position: fixed; background: #444 url(../images/ie.jpg) no-repeat 50% 50%; width: 100%; height: 100%; z-index: 99999; top: 0; left: 0; }
.loading { position: absolute; width: 100%; height: 100%; height: 100vh; right: 0; top: 0; z-index: 9000; font-size: 1.0rem; background: #FFF url(../images/loading.gif) no-repeat 50% 50% / .4rem auto; }

/*----------------------------------------------------*/

:root {
   --COLOR-PRIMARY:    #023894;
   --COLOR-RED:        #e60013;
}

/*----------------------------------------------------*/
html, body, .wrap { height: 100%; }
html { font-size: 100px; }
@media (max-width: 828px) { 
   html { font-size:calc(100vw/4.2); } 
} 
body { color: #121212; font: 0.14rem/1.8 "Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","STHeiti","WenQuanYi Micro Hei",SimSun,sans-serif; 
   background-color: #FFF; -webkit-text-size-adjust:none;}
body.of { overflow: hidden; }

/*----------------------------------------------------*/
ul,p  { margin: 0; padding: 0; }
li  { list-style: none; }
i     { font-style: normal; } 
em  { font-style: normal; font-weight: bold; } 
cite  { font-style: normal; }
.em { font-weight: bold; }

a { color: #023894; cursor: pointer; }
a:hover, a:focus { text-decoration: none; color: #023894; }
.primary { color: #023894; }
.red { color: #e60013; }
.npd { padding: 0 !important; }

.fz4 { font-size: 0.46rem; }
.fz3 { font-size: 0.26rem; }
.fz2 { font-size: 0.18rem; }
.fz1 { font-size: 0.14rem; }
@media (max-width: 1440px) {
   .fz4 { font-size: 0.28rem; }
   .fz3 { font-size: .2rem; }
   .fz2 { font-size: 0.16rem; }
   .fz1 { font-size: 0.12rem; }
   }
@media (max-width: 828px) {
   .fz4 { font-size: 0.24rem; }
   .fz3 { font-size: 0.18rem; }
   .fz2 { font-size: 0.12rem; }
   .fz1 { font-size: 0.12rem; }
}
/* font ---------------------- */
@font-face {
      font-family: "bebas";
      src:  url("fonts/BebasNeue.eot"); 
      src:  url("fonts/BebasNeue.ttf") format("truetype"),
               url("fonts/BebasNeue.eot") format("embedded-opentype");
      font-style: normal; font-weight: normal;
}
.lh1 { line-height: 1; }
.bebas { font-family: "bebas"; }

.resp-v { display: none; }
@media (max-width: 828px) {
  .resp-v { display: block; }
}


/* col ------------------------ */
.row-col { }
.col { position: relative; min-height: 1px; float: left;} 
   .col-12 {  width: 100%; clear: both; }
   .col-11 {  width: 91.66666667%;}
   .col-10 {  width: 83.33333333%;}
   .col-9  {  width: 75%;}
   .col-8  {  width: 66.66666667%;}
   .col-7  {  width: 58.33333333%;}
   .col-6  {  width: 50%;}
   .col-5  {  width: 41.66666667%;}
   .col-4  {  width: 33.33333333%;}
   .col-3  {  width: 25%;}
   .col-2  {  width: 16.66666667%;}
   .col-1  {  width: 8.33333333%;}
/* 

               button & control ------------------------ 

*/

.form-control, .btn { border-radius: 0; height: .4rem; line-height: .4rem; }

.form-control { padding: 0.01rem; font-size: 0.14rem; line-height: 1.4; color: #333; }
   .form-control:focus { -webkit-box-shadow: none; box-shadow: none; }
select.form-control { -moz-appearance: none; -webkit-appearance: none; appearance: none; background: #FFF url(../images/arr-select.png) no-repeat 100% 50%; padding-right: .1rem; padding-left: .1rem; }

.btn { padding: 0 .5rem;  border: 0; transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; font-size: 0.14rem; }

.btn-default  { color: #023894; background-color: #FFF; border: 1px solid #023894; }
   .btn-default.active,
   .btn-default.active.focus, 
   .btn-default:focus,
   .btn-default:hover 
   { background-color: #d0d0d0; }

.btn-primary  { color: #FFF; background-color: #023894; }
   .btn-primary.active,
   .btn-primary.active.focus, 
   .btn-primary:focus,
   .btn-primary:hover 
   { background-color: #023894; }

.btn-red  { color: #FFF; background-color: #e60013; }
   .btn-primary.active,
   .btn-primary.active.focus, 
   .btn-primary:focus,
   .btn-primary:hover 
   { background-color: #e60013; }

/* 


               menu ------------------------ 


*/
.wrap { position: relative; }
.main-menu { height: 100%; width: 2.2rem; background-color: #023894; position: fixed; left: -2.2rem; top: 0; z-index: 5000; overflow: auto; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
#m-tog { position: fixed; left: .2rem; top: .2rem; width: .4rem; height: .4rem; background: rgba(0,0,0,0.3) url(../images/m-tog.png) no-repeat 50% 50% / .2rem auto; z-index: 1000; cursor: pointer;transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; border-radius: .4rem; }

.main-content { overflow-x: hidden; position: relative; min-height: 100%;}
.page-inner { min-height: calc(100vh - .7rem); padding-bottom: 1.4rem; padding-top: .5rem; position: relative;}
   .page-inner.full { height: calc(100vh - .7rem); }
@media (max-width: 1441px) { 
   .page-inner { padding-bottom: 1.2rem; padding-top: .2rem; }
}
@media (max-width: 1441px) { 
	.page-inner.full { height: auto; }
	}
.sm-open .main-menu { left: 0; box-shadow: 0 0 1rem rgba(0,0,0,.4);}
.sm-open #m-tog { left: 2.4rem; }
@media (max-width: 828px) {
   .main-content { margin-left: 0; }
   .main-menu { left: 0rem;
      -webkit-transform: translate(-2.2rem,0);
              transform: translate(-2.2rem,0); }
   .sm-open .main-menu{ left: 0rem; }
   .wrap.menu-open .main-menu 
   { -webkit-transform: translate(0,0);
             transform: translate(0,0); }
   .wrap.menu-open .main-content { filter: blur(1rem); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1);}
   .page-inner { padding-bottom: .8rem; padding-top: 0;}
   .page-inner.full { height: auto; }
   #m-tog { display: none; }
}


@keyframes logo-star {
   0%    { -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0;}
   100%  { -webkit-transform: rotate(0deg);  transform: rotate(0deg);  opacity: 1;}
}
@keyframes fadein {
   0%    { opacity: 0;}
   100%  { opacity: 1;}
}
@keyframes logo-t1 {
   0%    { -webkit-transform: scale(1.5,1.5) translate(-0.2rem,0);  transform: scale(1.5,1.5) translate(-0.2rem,0);  
               opacity: 0;}
   100%  { -webkit-transform: scale(1,1) translate(0,0);  transform: scale(1,1) translate(0,0);  
               opacity: 1;}
}
@keyframes logo-t2 {
   0%    { -webkit-transform: scale(1.5,1.5) translate(1rem,0);  transform: scale(1.5,1.5) translate(1rem,0);  
               opacity: 0;}
   100%  { -webkit-transform: scale(1,1) translate(0,0);  transform: scale(1,1) translate(0,0);  
               opacity: 1;}
}

.logo { background-color: #FFF; padding: 12% 0; }
@media (max-width: 1441px) { 
   .logo { padding: 0; }
   }
   .ani-logo { width: 1.4rem; height: 1.4rem; margin: 0 auto; position: relative;}
   .ani-logo .s { position: absolute; }
   @media (min-width: 829px) {
      .ani-start .ani-logo .bg { width: 100%; height: 100%; background: url(../images/menu-logo-bg.png) no-repeat 50% 50% / contain; 
         -webkit-animation:  fadein .5s ease-out both;
         animation:          fadein .5s ease-out both;
      }
      .ani-start .ani-logo .star { width: 56%; height: 30%; background: url(../images/menu-logo-star.png) no-repeat 0% 0% / contain; 
         top: 10%; left: 13%;  -webkit-transform-origin:80% 170%; transform-origin:80% 170%; 
         -webkit-animation:  logo-star .6s ease-out .6s both;
         animation:          logo-star .6s ease-out .6s both;
      }
      .ani-start .ani-logo .t1 { width: 90%; height: 40%; background: url(../images/menu-logo-t1.png) no-repeat 50% 50% / contain; 
         top: 30%; left: 5%; 
         -webkit-animation:  logo-t1 .4s ease-out .4s both;
         animation:          logo-t1 .4s ease-out .4s both;
            }
      .ani-start .ani-logo .t2 { width: 48%; height: 8%; background: url(../images/menu-logo-t2.png) no-repeat 0% 0% / contain; 
         top: 60%; right: 18%; 
         -webkit-animation:  logo-t2 .2s ease-in-out 1s both;
         animation:          logo-t2 .2s ease-in-out 1s both;
      }
      .ani-start .ani-tm { height: .4rem; background: url(../images/menu-logo-title.png) no-repeat 50% 50% / 1.6rem auto; 
         -webkit-animation:  fadein 1s ease-out 1.4s both;
         animation:          fadein 1s ease-out 1.4s both;
      }
   }
   @media (max-width: 828px) {
      .ani-m-start .ani-logo .bg { width: 100%; height: 100%; background: url(../images/menu-logo-bg.png) no-repeat 50% 50% / contain; 
         -webkit-animation:  fadein .5s ease-out both;
         animation:          fadein .5s ease-out both;
      }
      .ani-m-start .ani-logo .star { width: 56%; height: 30%; background: url(../images/menu-logo-star.png) no-repeat 0% 0% / contain; 
         top: 10%; left: 13%;  -webkit-transform-origin:80% 170%; transform-origin:80% 170%; 
         -webkit-animation:  logo-star .6s ease-out .6s both;
         animation:          logo-star .6s ease-out .6s both;
      }
      .ani-m-start .ani-logo .t1 { width: 90%; height: 40%; background: url(../images/menu-logo-t1.png) no-repeat 50% 50% / contain; 
         top: 30%; left: 5%; 
         -webkit-animation:  logo-t1 .4s ease-out .4s both;
         animation:          logo-t1 .4s ease-out .4s both;
            }
      .ani-m-start .ani-logo .t2 { width: 48%; height: 8%; background: url(../images/menu-logo-t2.png) no-repeat 0% 0% / contain; 
         top: 60%; right: 18%; 
         -webkit-animation:  logo-t2 .2s ease-in-out 1s both;
         animation:          logo-t2 .2s ease-in-out 1s both;
      }
      .ani-m-start .ani-tm { height: .4rem; background: url(../images/menu-logo-title.png) no-repeat 50% 50% / 1.6rem auto; 
         -webkit-animation:  fadein 1s ease-out 1.4s both;
         animation:          fadein 1s ease-out 1.4s both;
      }
   }

.menu {  }
   .menu ul li { position: relative; }
   .menu ul li, .menu ul li a { height: .5rem; width: 100%; overflow: hidden; }
   .menu ul li a { display: block; line-height: .5rem; color: #FFF; padding-left: .3rem; border-left: .1rem solid transparent; position: absolute; left: 0; top: 0; z-index: 2; border-bottom: 1px solid rgba(0,0,0,0.1);}
   .menu ul li.active a { border-left-color: #e60013; background-color: #002970; pointer-events: none; cursor: normal; }
   .menu ul li i { display: block; width: 100%; left: 0; top: 0; height: 100%; position: absolute; z-index: 1; opacity: 0; border: 0 solid #e60013;}
   .menu ul li:hover i { border: .3rem solid #e60013;opacity: 1;}
@media (max-width: 1441px) { 
   .menu ul li, .menu ul li a { height: .4rem; }
   .menu ul li a { padding-left: 0.15rem; line-height: .4rem; }
}


/* top-contact */
.top-contact { position: absolute; right: 0; top: 0;}
   .top-contact .c { padding: .2rem .2rem .2rem 0; width: 3.6rem; }
   .top-contact .ax-qrcode { display: block; float: right; width: .4rem; height: .3rem; background: url(../images/ico-wechat.png) no-repeat 50% 50% / auto 0.24rem; position: relative;}
   .ax-qrcode .pop { visibility: hidden; opacity: 0; z-index: -0; position: absolute; top: 120%; left: -100%;}
   .ax-qrcode:hover .pop { visibility: visible; opacity: 1; z-index: 100;}
   .top-contact .phone { display: block; float: right; padding-left: 0.42rem; border-left: 1px solid rgba(255,255,255,0.5); margin-left: .1rem; color: #FFF; font-size: .3rem; font-family: "bebas"; line-height: 1; background: url(../images/ico-tel.png) no-repeat .1rem 50% / auto 0.24rem;}
   .top-contact .tp { float: right; color: #fff; font-size: 0.12rem; line-height: 1.2; padding-left: .1rem; }

@media (max-width: 828px) {
   .page-toper > .top-contact { display: none; }
}

/* footer-menu */
.footer-m { display: none; }
@media (max-width: 828px) {
   .footer-m { display: block; position: fixed; bottom: 0; left: 0; z-index: 1000; width: 100%; height: .5rem; background-color: #FFF;}
   .footer-m .f-logo { width: .6rem; height: .6rem; position: absolute; bottom: .1rem; left: .1rem; background: url("../images/logo-default.png") no-repeat 50% 50% / contain; }
   .footer-m .top-contact { float: left; padding-left: .7rem; padding-right: .46rem; }
   .footer-m .top-contact .c { padding: .1rem; width: auto;}
   .footer-m .top-contact .ax-qrcode { background: url(../images/ico-wechat-2.png) no-repeat 50% 50% / auto 0.24rem; }
   .footer-m .top-contact .phone { color: #023894; background: url(../images/ico-tel-2.png) no-repeat 0.12rem 50% / auto 0.24rem; border-left: 1px solid rgba(0,0,0,0.5);}
   .resp-menu-tog { display: block; width: .5rem; height: .5rem; background: #023894 url("../images/footer-nav-btn.png") no-repeat 50% 50% / .3rem auto; position: absolute; right: 0; top: 0; line-height: 900.0rem; overflow: hidden; }
}

/* index */
.liner { height: .3rem; background-image: url(../images/index-liner-default.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: auto .1rem; }
.liner.r { background-position: 100% 50%; }
.liner.l { background-position: 0% 50%; }
.liner.d { background-image: url(../images/index-liner-white.png); }
@media (max-width: 828px) {
   .liner.r, .liner.l { background-position: 50% 50%; }
}

/* index-focus */
.index-focus { background: #023894 url(../images/index-focus-bg.jpg) no-repeat 50% 50% / cover; position: relative; }
.index-focus .top-contact { position: absolute; top: 0; right: 0; z-index: 200; }
.index-focus .in { padding-bottom: 55%; background: url(../images/index-focus-edge.png) no-repeat 50% 100% / 100% auto; position: relative; }
   .index-focus .t { position: absolute; left: 10%; top: 30%; width: 40%; height: 30%; background: url(../images/index-focus-title.png) no-repeat 50% 50% / contain; }
   .index-focus .bottle { position: absolute; right: 2%; bottom: -5%; width: 50%; height: 80%; background: url(../images/index-focus-product.png) no-repeat 50% 50% / contain;  }
@media (max-width: 828px) {
   .index-focus .top-contact { display: none; }
   .index-focus .t { left: 5%; width: 50%; height: 40%; }
}

/* index-r2 */
.index-r2 { margin: .5rem 0; background: url(../images/index-r2-bg.png) no-repeat 50% 100% / contain; padding-bottom: 1.0rem;}
   .index-r2 .wrap-desc { width: 55%; float: left; padding: 5% 5%; }
      .index-r2 .wrap-desc .t { height: .8rem; background: url(../images/index-r2-t.png) no-repeat 100% 100% / contain; }
      .index-r2 .wrap-desc .c { font-weight: bold; padding: .2rem 0.05rem; text-align: right; line-height: 1.2;}
      .index-r2 .wrap-desc .c em { font-size: 135%; }
      .index-r2 .wrap-desc .more { text-align: right; }
   .index-r2 .wrap-img { width: 45%; float: right; }
      .index-r2 .im-1 { height: 4.0rem; background-repeat: no-repeat; background-position: 0 0; background-size: contain; }
@media (max-width: 828px) {
   .index-r2 { padding-bottom: 0; background: none;}
   .index-r2 .wrap-desc, .index-r2 .wrap-img { width: 100%; float: none; }
   .index-r2 .wrap-desc .t { height: .5rem; background-position: 50% 50%;}
   .index-r2 .wrap-desc .c, .index-r2 .wrap-desc .more { text-align: center; }
   .index-r2 .im-1 { background-size: 90% auto; background-position: 50% 50%; height: auto; padding-bottom: 100%; }
}

/* index-r3 */
.index-r3 { margin: .5rem 0; position: relative; }
   .index-r3 .wrap-img { width:35%; float: left; position: relative; height: 4.0rem;}
      .index-r3 .wrap-img .im-1 { position: absolute; left: 15%; bottom: 0; height: 4.0rem; width: 4.0rem; background-repeat: no-repeat; background-position: 0 100%; background-size: contain; }
   .index-r3 .wrap-desc { width: 55%; float: right; padding-right: 10%; text-align: right; }
      .index-r3 .wrap-desc .sells {  }
      .index-r3 .wrap-desc .sells i { font-size: 1.0rem; font-family: "bebas"; }
      .index-r3 .wrap-desc p { font-weight: bold; line-height: 1.2; margin: 5% 0 10%; }
@media (max-width: 828px) {
   .index-r3 { margin: 0; }
   .index-r3 .wrap-desc, .index-r3 .wrap-img { width: 100%; float: none; }
   .index-r3 .wrap-desc { text-align: center; padding: 0; }
   .index-r3 .wrap-desc .sells i { font-size: .6rem; }
   .index-r3 .wrap-img { height: auto; padding-bottom: 100%;  }
   .index-r3 .wrap-img .im-1 { background-position: 50% 50%; background-size: 90% auto; width: 100%; height: auto; padding-bottom: 100%; left: 0;}
}

/* index-r4 */
.index-r4 { position: relative; background: url(../images/index-r4-bgt.png) no-repeat 0 0 / cover; margin-top: -2.5rem; }
   .index-r4 .in { background: url(../images/index-r4-bgb.png) no-repeat 100% 100% / 100% auto; z-index: 50;}
   .index-r4 .wrap-img { position: relative; padding-left: 5%; float: left; width: 55%}
      .index-r4 .wrap-img .i { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; float: left; }
      .index-r4 .wrap-img .i + .i { margin-left: .1rem; }
      .index-r4 .wrap-img .vl1 { height: 3.0rem; margin-bottom: .1rem; }
      .index-r4 .wrap-img .vl2 { padding-left: 3.1rem; }
      .index-r4 .wrap-img .im-1 { width: 3.0rem; height: 3.0rem; }
      .index-r4 .wrap-img .im-2 { width: 1.5rem; height: 1.5rem; margin-top: 1.5rem; }
      .index-r4 .wrap-img .im-3 { width: 1.0rem; height: 1.0rem; margin-top: 2.0rem; }
      .index-r4 .wrap-img .im-4 { width: 2.2rem; height: 2.2rem; margin-top: .8rem;  }
      .index-r4 .wrap-img .im-5 { width: 4.0rem; height: 2.2rem; }
      @media (max-width: 1440px) {
         .index-r4 .wrap-img .vl1 { height: 1.5rem; margin-bottom: .1rem; }
         .index-r4 .wrap-img .vl2 { padding-left: 1.6rem; }
         .index-r4 .wrap-img .im-1 { width: 1.5rem; height: 1.5rem; }
         .index-r4 .wrap-img .im-2 { width: 1.2rem; height: 1.2rem; margin-top: .3rem; }
         .index-r4 .wrap-img .im-3 { width: .6rem; height: .6rem; margin-top: .9rem; }
         .index-r4 .wrap-img .im-4 { width: 1.0rem; height: 1.0rem; margin-top: .5rem;  }
         .index-r4 .wrap-img .im-5 { width: 2.4rem; height: 1.5rem; }
      }

   .index-r4 .wrap-desc { float: right; width: 45%; margin-top: 8%; padding-bottom: 12%; padding-top: 2.4rem; color: #FFF; text-align: right; padding-right: 10%; background: url(../images/2018120501.png) no-repeat 70% 0 / auto 2rem;}
      .index-r4 .wrap-desc .t { height: .6rem; background: url(../images/index-r3-t.png) no-repeat 100% 50% / contain; }
      .index-r4 .wrap-desc .t2 { font-weight: bold; margin: .3rem 0; line-height: 1.2;}
      .index-r4 .wrap-desc .more { margin-top: .3rem; }
@media (max-width: 828px) {
   .index-r4 { margin-top: -1.8rem; }
   
   .index-r4 .wrap-desc, .index-r4 .wrap-img { width: 100%; float: none; padding: 0; text-align: center;}
   .index-r4 .wrap-desc { margin-top: 1.4rem; padding-top: 2.4rem; background: url(../images/2018120501.png) no-repeat 50% 0 / auto 2rem; }
   .index-r4 .wrap-desc .t { background-position: 50% 50%; }
   .index-r4 .wrap-img { padding-top: .3rem; }
      .index-r4 .wrap-img .vl1 { height: 1.0rem; margin-bottom: 0;}
      .index-r4 .wrap-img .vl2 { height: 1.5rem; padding-left: 0; }
      .index-r4 .wrap-img .i + .i { margin-left: 0; }
      .index-r4 .wrap-img .im-1 { width: 25%; height: 100%; }
      .index-r4 .wrap-img .im-2 { width: 25%; height: 100%; margin: 0;}
      .index-r4 .wrap-img .im-3 { width: 25%; height: 100%; margin: 0;}
      .index-r4 .wrap-img .im-4 { width: 25%; height: 100%; margin: 0;}
      .index-r4 .wrap-img .im-5 { width: 100%; height: 100%; }
}

/* index-r5 */
.index-r5 { position: relative; z-index: 60; }
   .index-r5 .wrap-desc { padding-left: 5%; width: 50%; float: left; }
   .index-r5 .wrap-desc .t { height: 1.4rem; background: url(../images/index-r5-t.png) no-repeat 0 0 / auto 100%; }
   .index-r5 .wrap-desc .liner { margin: .3rem 0; }
   .index-r5 .wrap-desc .more { margin-top: .3rem; }
   .list-red {  }
      .list-red > p { padding-left: .3rem; font-weight: bold; background: url("data:image/gif;base64,R0lGODlhDgAOAIAAAOYAEwAAACH5BAAAAAAALAAAAAAOAA4AAAIMhI+py+0Po5y02qsKADs=") no-repeat 0 50% / auto 0.14rem; }
   .index-r5 .wrap-img { width: 50%; float: right; }
      .index-r5 .wrap-img .im-1 { height: 5.0rem; background-repeat: no-repeat; background-position: 0 50%; background-size: cover; }
@media (max-width: 828px) {
   .index-r5 .wrap-desc, .index-r5 .wrap-img { width: 100%; float: none; text-align: center;}
   .index-r5 .wrap-desc { padding-top: .3rem; padding-left: 0; }
   .index-r5 .wrap-desc .t { background-position: 50% 50%; }
   .list-red > p { background: transparent; }
   .index-r5 .wrap-img, .index-r5 .wrap-img .im-1 { height: 0; padding-bottom: 100%; }
   .index-r5 .wrap-img .im-1 { background-position: 0% 50%; background-size: auto 3.4rem; }
}

/* index-r6 */
.index-r6 { background: url(../images/index-r6-bgt.png) no-repeat 0 0 / cover; margin-top: -1.0rem; position: relative; z-index: 70; }
   .index-r6 .in { background: url(../images/index-r6-bgb.png) no-repeat 100% 100% / 100% auto; padding: 20% 0 20%; }
   .index-r6 .wrap-desc { width: 50%; float: right; padding-right: 10%; text-align: right; color: #FFF;}
      .index-r6 .wrap-desc .t { height: .6rem; background: url(../images/index-r6-t.png) no-repeat 100% 50% / contain; margin-top: .3rem;}
      .index-r6 .wrap-desc p { font-weight: bold; }
      .index-r6 .wrap-desc .more { margin-top: .3rem; }
   .index-r6 .wrap-img { width: 50%; float: left; }
      .index-r6 .wrap-img .im-1 { height: 5.0rem; width: 50%; float: left; background-position: 100% 50%; background-repeat: no-repeat; background-size: contain; }
      .index-r6 .wrap-img .im-2 { height: 5.0rem; width: 50%; float: left; background-position: 0% 50%; background-repeat: no-repeat; background-size: contain; }
@media (max-width: 828px) {
   .index-r6 { background-size: 100% auto; padding-top: 1.4rem; }
   .index-r6 .in { padding: 0 0.05rem; background: #023894 url(../images/index-r6-bgb.png) no-repeat 100% 100% / 100% auto;}
   .index-r6 .wrap-desc, .index-r6 .wrap-img { width: 100%; float: none; padding: 0; text-align: center;}
   .index-r6 .wrap-desc .t { background-size: 90% auto; background-position: 50% 50%; }

}

/* index-r7 */
.index-r7 { margin-top: -1.5rem; position: relative; z-index: 80;}
   .index-r7 .wrap-desc { text-align: right; padding-right: 5%;}
      .index-r7 .wrap-desc .t1 img { height: .7rem; }
      .index-r7 .wrap-desc .t2 { padding: .2rem 0.03rem; }
      .index-r7 .wrap-desc .t2 img { height: .5rem; }
   .index-r7 .wrap-img { padding-bottom: 4%; padding-top: .4rem; }
   .index-r7 .wrap-img .i { width: 25%; float: left; margin-top: -0.4rem;}
      .index-r7 .wrap-img img { width: 100%; }
   .index-r7 .wrap-img .i:nth-of-type(2n) { padding-top: .4rem;}
@media (max-width: 828px) {
   .index-r7 { margin-top: -0.4rem; }
   .index-r7 .wrap-desc img { max-width: 90%; }
   .index-r7 .wrap-desc .t1 img, .index-r7 .wrap-desc .t2 img { height: auto; }
   .index-r7 .wrap-img { padding-bottom: 1.2rem; }
   .index-r7 .wrap-img .i { width: 50%; }
}

/* footer */
.footer { background-color: #023894; color: #FFF; padding-left: 1.8rem; position: relative;}
.page-inner .footer { position: absolute; bottom: 0; width: 100%; left: 0; z-index: 400; }
   .footer .lg { width: 1.0rem; position: absolute; top: -0.2rem; left: .2rem;}
   .footer .lg img { width: 100%; }
   .footer .ifo { display: inline-block; padding: .2rem 0; height: .9rem; overflow: hidden; }
   .footer .ifo + .ifo { border-left: 1px dashed #4e74b4; padding-left: .2rem; margin-left: .2rem;  }
   .footer .ifo span + span { padding-left: .2rem; }
   .footer .qrcode { position: absolute; right: .2rem; top: -0.2rem; width: .8rem; }
   .footer .qrcode img { width: 100%; }
@media (max-width: 1440px) {
   .footer { padding-left: 1.4rem; }
   .footer .lg, .footer .qrcode { top: -0.3rem; }
   .footer .ifo { font-size: 0.12rem; height: .6rem; padding: .1rem 0; }
}
@media (max-width: 828px) {
   .footer { display: none; }
}



/* page-toper */
.page-toper { background: #023894 url(../images/logo-default.png) no-repeat .8rem 50% / auto 75%; height: .7rem; position: relative; padding-left: 1.6rem;}
   .page-toper .t { float: left; background: #e60013 url(../images/page-top-bg.jpg) no-repeat 100% 50% / auto 100%; }
   .page-toper .t i { display: block; height: .7rem; padding-top: 0.36rem; padding-left: .7rem; min-width: 6.5rem; font-size: 0.34rem; background: url(../images/page-top-text.png) no-repeat 0 100% / auto .5rem; font-weight: bold; color: #FFF; line-height: 1;}

@media (max-width: 828px) {
   .page-toper { height: .6rem; background: #023894; padding-left: 0;}
   .page-toper .t i { height: .6rem; padding-left: .1rem; padding-top: 0.32rem; font-size: 0.28rem; min-width: 5.4rem; background: url(../images/page-top-text.png) no-repeat 0 100% / auto 0.38rem;}
}
/* page-inner common */
.unit-t { padding-left: .5rem; background: url(../images/unit-title-bottle.png) no-repeat 0 50% / .4rem auto; font-size: .4rem; font-weight: bold; color: #023894; margin: .3rem .4rem;}
   .page-inner .unit-t:first-child { margin: 0.04rem .3rem; }
   .text-center .unit-t { display: inline-block; }
.unit-p { margin: .5rem 0; }
   .unit-p.box-bottom { padding-bottom: .2rem; background: url("data:image/gif;base64,R0lGODlhMgAJAIAAAAI4lAAAACH5BAAAAAAALAAAAAAyAAkAAAIThI+py+0Po5y02ouz3rz7D4ZTAQA7") no-repeat 50% 100% / .4rem auto; }
   .unit-p.box-bottom-fff { color: #FFF; padding-bottom: .2rem; background: url("data:image/gif;base64,R0lGODlhMgAJAIAAAP///wAAACH5BAAAAAAALAAAAAAyAAkAAAIThI+py+0Po5y02ouz3rz7D4ZTAQA7") no-repeat 50% 100% / .4rem auto; }
@media (max-width: 1440px) {
   .unit-p { margin: .3rem 0; }
}
@media (max-width: 828px) {
   .unit-t, .page-inner .unit-t:first-child { font-size: 0.28rem; margin: .1rem 0.01rem .2rem; background: url(../images/unit-title-bottle.png) no-repeat 0 50% / auto .3rem;}
   .unit-t { font-size: .3rem; padding-left: 0.36rem;  }
   .unit-p { margin: .2rem 0; }
      .unit-p span { display: block; text-align: center; line-height: 1.2;}
}




/* p1 */
.surface-p1 {}
   .surface-p1 .box-1 .i { width: 33.33333333%; float: left; overflow: hidden; position: relative;}
   .surface-p1 .box-1 .im-margin { width: 400%; margin-left: -150%; text-align: center; height: 7.2rem; }
   .surface-p1 .box-1 .im-margin img { height: 100%; }
   .surface-p1 .box-1 .t { position: absolute; padding-bottom: 100%; bottom: 0; height: 100%; width: 100%; background: url(../images/p1-im1-bg.png) no-repeat 50% 100% / 100% auto; }
   .surface-p1 .box-1 .t i { position: absolute; bottom: 0; width: 100%; color: #FFF; font-size: 0.36rem; font-weight: bold; line-height: 1; padding-top: 1.0rem; border-left: 0.05rem solid #e60013; margin-bottom: 1.2rem; margin-left: .4rem; padding-left: .3rem;}

   .surface-p1 .box-2 { padding: 0 5%; }
   .surface-p1 .box-2 .i { width: 33.3333333%; float: left; padding: 0 5%; }
   .surface-p1 .box-2 .im { border-radius: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background-repeat: no-repeat;background-position: 50% 50%; background-size: cover;}
   .surface-p1 .box-2 p { text-align: center; margin: .2rem 0;}

@media (max-width: 828px) {
   .surface-p1 .box-1 .i { float: none; width: 100%; }
   .surface-p1 .box-1 .im-margin { height: 4.0rem; }
   .surface-p1 .box-1 .t { background: rgba(2,56,148,.8); padding: 0; height: 35%; }
   .surface-p1 .box-1 .t i { margin-bottom: .4rem; margin-left: .3rem; }
   .surface-p1 .box-1 + .liner { margin-top: .3rem; }
   .surface-p1 .box-2 { padding: 0; }
   .surface-p1 .box-2 .i { padding: 0 1%; }
   .surface-p1 .box-2 p span { display: block; text-align: center; line-height: 1; }
}

/* p2 */
.surface-p2 {}
   .surface-p2 .box-1 {  }
   .surface-p2 .box-1 .x { float: left; }
   .surface-p2 .box-1 .x1 { width: 55%; }
      .surface-p2 .box-1 .h { padding: 0.05rem; height: 1.0rem;  }
      .surface-p2 .box-1 .h img { width: 100%;max-width: 6.0rem; }
      .surface-p2 .box-1 .c { padding: .3rem 0; background: url(../images/p2-1-3.png) no-repeat 50% 50% / 36% auto;}
      .surface-p2 .box-1 .c .i { width: 33.33333333%; padding: 0.01rem; float: left; text-align: center;}
      .surface-p2 .box-1 .c .i .t { font-weight: bold; }
      .surface-p2 .box-1 .ph { padding: .3rem; background: url(../images/p2-1-repeat-blue.png) repeat-x 0 50%; }
      .surface-p2 .box-1 .ph img { width: 100%; }
   .surface-p2 .box-1 .x2 { width: 45%; background: url(../images/p2-1-repeat-red.png) repeat-x 0 100%; text-align: center;}
      .surface-p2 .box-1 .x2 img { height: 6.2rem; }
@media (max-width: 1440px) {
   .surface-p2 .box-1 .x2 img { width: 100%; height: auto; }
   .surface-p2 .box-1 .ph { padding: 0; }
   .surface-p2 .box-1 .h { height: auto; }
}
   .surface-p2 .box-2 { padding-top: .8rem; padding-bottom: .4rem; }
      .surface-p2 .box-2 .inner { border-top: 1px solid #ccc; padding: 0 5%;}
      .surface-p2 .box-2 .i { width: 25%; float: left; text-align: center; margin-top: -0.6rem;}
      .surface-p2 .box-2 .im { margin: 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 100%; overflow: hidden; border: 4px solid #023894; }
         .surface-p2 .box-2 .im img { width: 100%; }
      .surface-p2 .box-2 .t { font-weight: bold; margin: .2rem 0;}
      .surface-p2 .box-2 .c { padding: 0 10%; font-size:calc(100vw/125); text-align: left;}
   .surface-p2 .box-3 { position: relative; padding: .1rem; text-align: center;}
      .surface-p2 .box-3 img { max-width: 100%; }
      .surface-p2 .box-3 a { position: absolute; left: 50%; top: 42%; margin-left: -25%; width: 50%; height: .4rem; line-height: .4rem; text-align: center; background-color: #FFF; border-radius: 1.0rem; z-index: 100; border: .02rem solid #023894; font-weight: bold;}

@media (max-width: 828px) {
   .surface-p2 .box-1 .x { float: none; }
   .surface-p2 .box-1 .x1, .surface-p2 .box-1 .x2 { width: 100%; }
      .surface-p2 .box-1 .h { height: .6rem; line-height: .6rem; text-align: center; padding: 0; }
      .surface-p2 .box-1 .h img { max-width: 90%; }
      .surface-p2 .box-1 .c { background: none; padding: 0 2%; }
      .surface-p2 .box-1 .c .i { width: 100%; float: none; overflow: hidden; height: .7rem; }
      .surface-p2 .box-1 .c .t { float: left; width: 50%; text-align: center; font-size: .2rem; border-radius: .5rem; color: #FFF; background-color: #023894; }
      .surface-p2 .box-1 .c .d { float: right; width: 50%; text-align: left; padding-left: .2rem; }
      .surface-p2 .box-1 .ph { padding: 0.02rem; }
      .surface-p2 .box-1 .x2 img { width: 100%; height: auto; }
   .surface-p2 .box-2 { padding-top: 0; }
   .surface-p2 .box-2 .i { width: 50%; margin-top: 0; padding-bottom: .1rem; }
   .surface-p2 .box-2 .c { padding: 0 5%; font-size:.12rem; height: 2.2rem; overflow: hidden;}

}

/* p3 */
.surface-p3 { background: url(../images/p3-bg-1.jpg) no-repeat 100% 0 / auto 50%; }
   .surface-p3 .box-1 { height: 100%; padding-bottom: .6rem; background: url(../images/p3-bg-2.jpg) no-repeat 0 100% / auto 80%; }
   .surface-p3 .box-1 .inner { display: table; width: 100%; height: 60%; padding: 0 5%;}
   .surface-p3 .box-1 .in { display: table-cell; vertical-align: middle; }
   .surface-p3 .box-1 .i { width: 25%; float: left; padding: 0.4rem;}
   .surface-p3 .box-1 .i img { width: 100%; }
   .surface-p3 .go-list { height: 40%; position: relative; }
   .surface-p3 .go-list .enter { width: 50%; text-align: center; display: block; position: absolute; left: 50%; bottom: 0; margin-left: -25%; }
      .surface-p3 .go-list .enter img { height: 1.4rem; }
@media (max-width: 1440px) {
   .surface-p3 .box-1 { padding-bottom: .3rem; }
   .surface-p3 .box-1 .i { padding: 0 0.15rem; }
}

.surface-p3-list { background: url(../images/p3-inner-bg.jpg) no-repeat 100% 90% / contain; }
   .list-apt { display: table; width: 100%; height: 90%;}
   .list-apt .inner { display: table-cell; vertical-align: middle; padding: 0 5%; }
      .list-apt .i { width: 33.33333333%; float: left; padding: 0 5%;}
      .list-apt .i a { display: block; border: 3px solid #023894; text-align: center; height: 2.2rem; line-height: 2.2rem; background-color: #FFF; }
      .list-apt .i a img { height: 100%; max-width: 100%; display: block; margin: 0 auto; width: auto; }
      .list-apt .i p { text-align: center; line-height: .4rem; }
   .list-apt + .page-swc { height: 10%; text-align: center;}
      .page-swc a { display: inline-block; height: .3rem;line-height: .3rem; background-color: #023894; color: #FFF; border-radius: .5rem; padding: 0.04rem; }
      .page-swc a.disable { background-color: #aaa; pointer-events: none;  }
@media (max-width: 1440px) {
   .list-apt .i { padding: 0 3%; }
   .list-apt .i a { height: 1.8rem; line-height: 1.8rem; }
}

@media (max-width: 828px) {
   .surface-p3 .box-1 { padding-bottom: 0; }
   .surface-p3 .box-1 .inner, .surface-p3 .box-1 .in { display: block; padding: 0; overflow: hidden;}
   .surface-p3 .box-1 .i { width: 50%; padding: .2rem .1rem; }

   .surface-p3 .go-list { height: 1.2rem; margin-top: .4rem; }
   .surface-p3 .go-list .enter { width: 100%; left: 0; margin: 0; }
   .surface-p3 .go-list .enter img { height: 1.2rem; }
   .list-apt .inner { display: block; padding-top: .2rem; }
   .list-apt .i { width: 50%; }
   .list-apt .i a { height: 1.2rem; }

}

/* p4 */
.surface-p4 {  }
   .lkmmt-t { text-align: center; }
      .lkmmt-t img { height: 1.0rem; }
      .lkmmt-t + .unit-p { margin: 0 0.05rem; }
@media (max-width: 1440px) {
   .lkmmt-t img { height: .6rem; }
}
   .lkmmt-list { padding: 0 5%; }
   .lkmmt-list .i { width: 25%; padding: .3rem .3rem; display: block; float: left;}
   .lkmmt-list .i img { width: 100%; }

   .lkmmt-media { position: relative; padding-bottom: 40%;}
   .lkmmt-media .i { position: absolute; }
   .lkmmt-media .i i { height: 0; padding-bottom: 100%; width: 100%; display: block; }
   .lkmmt-media .i img { display: block; width: 100%; }
      .lkmmt-media .i1 { width: 35%; left: 0; bottom: 0;}
      .lkmmt-media .i2 { width: 17.5%; left: 35%; top: 0;}
      .lkmmt-media .i3 { width: 19.5%; left: 52.5%; bottom: 34%;}
      .lkmmt-media .i4 { width: 28%; right: 0%; bottom: 0%;}
@media (max-width: 828px) {
   .lkmmt-list { padding: 0.01rem; }
   .lkmmt-list .i { width: 50%; padding: 0.01rem .1rem; }
   .lkmmt-t + .unit-p { margin: 0 0.02rem; }
}

/* p5 */
.surface-p5 {  }
.lab-list { padding: 0 2%; }
   .lab-list .i { width: 33.33333333%; float: left; padding: 0.3rem .5rem; }
   .lab-list .t { padding-top: .6rem; background: url(../images/p5-t.png) no-repeat 0 0 / auto .5rem; font-weight: bold; line-height: 1.2; overflow: hidden; display: block; height: 1rem;}
   .lab-list .c { padding-top: .2rem; margin-top: .2rem; background: url("data:image/gif;base64,R0lGODlhJgAFAIAAAOYAEwAAACH5BAAAAAAALAAAAAAmAAUAAAIMhI+py+0Po5y02lsAADs=") no-repeat 0 0 / .3rem auto; font-size: 0.12rem; height: 1.5rem; overflow: hidden; }
   .lab-list .c span { font-size: .14rem !important; }
   .lab-list .im { margin-top: .1rem; position: relative; padding-bottom: .4rem;}
   .lab-list .im img { width: 100%; }
   .lab-list .im .more { position: absolute; left: 0; bottom: 0; width: .8rem; height: .8rem; background: #023894 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAF9JREFUeNrs2MENACEIAEEw9t8y99c3Gi+zBWgmhA9ZVdHY+nh2fTTiJ4GAgICAgICAgICAgICAgIC0NmM/2XRWJgLy4I7kwZ1wMgUBAQEBAQEBAQEBAQEBAQG52ifAAOL0B2Q0vADfAAAAAElFTkSuQmCC") no-repeat 50% 30% / .3rem auto; text-align: center; padding-top: .5rem; color: #FFF; font-size: 0.12rem; }

   .article-inner { padding: 0 .3rem; }
      .article-inner .hd { line-height: 1.2; font-weight: bold; padding-bottom: .2rem; margin-bottom: .2rem; border-bottom: 1px solid #ccc; }
      .article-inner .bd p { margin: .1rem 0; }
@media (max-width: 828px) {
   .lab-list { padding: .3rem 0; }
   .lab-list .i { width: 100%; float: none; padding: 0.3rem .2rem;}
   .lab-list .t { height: auto; background: url(../images/p5-t.png) no-repeat 0 0 / auto .3rem; padding: .4rem 0 .4rem;}
   .lab-list .c { margin-top: .1rem; padding-top:.1rem; }
   .article-inner .hd { padding-top: .2rem; }
}
/* p6 */
.surface-p6 { background: url(../images/p6-main.jpg) no-repeat 50% 50% / 100% auto; color: #FFF;}
   .surface-p6 .box-1 { float: left; width: 50%; padding: .5rem;}
   .surface-p6 .box-2 { float: right; width: 50%; padding: .5rem;}
   .surface-p6 .box-1 .t { height: 1.0rem; }
      .surface-p6 .box-1 .t img { height: 100%; }
   .surface-p6 .t + .liner { margin: .3rem 0; }
   .surface-p6 .box-2 .x1 { position: relative; }
   .surface-p6 .box-2 .t { line-height: 1.2; font-weight: bold; }
   .surface-p6 .box-2 p { margin: .3rem 0; }
   .surface-p6 .box-2 .qr { position: absolute; width: 1.2rem; right: 0; top: 0; }
   .surface-p6 .box-2 .x2 { padding-top: .3rem; padding-right: 25%;}
   .surface-p6 .video { width: 100%; }
@media (max-width: 1440px) {
   .surface-p6 .box-1, .surface-p6 .box-2 { padding: .2rem; }
   .surface-p6 .box-2 .x2 { padding-right: 0; height: auto; padding-top: 0;}
   .surface-p6 .box-1 .t img { width: 100%; height: auto; }
   .surface-p6 .box-2 .qr { width: .8rem; }
   .surface-p6 .video { width: 85%; }
}

@media (max-width: 828px) {
   .surface-p6 { background: #940000 url(../images/p6-main.jpg) no-repeat 0 -1.0rem / auto 6.6rem; }
   .surface-p6 .box-1, .surface-p6 .box-2 { width: 100%; float: none; padding: .2rem;}
   .surface-p6 .box-1 { height: 3.8rem; }
   .surface-p6 .box-1 .t { height: auto; }
   .surface-p6 .t + .liner { margin: .2rem 0; }
   .surface-p6 .box-2 .x1 { text-align: center; }
   .surface-p6 .box-2 .qr { position: static; }
   .surface-p6 .box-2 .qr { width: 1.6rem; }
   .surface-p6 .box-2 .x2 { padding-top: .4rem; }
   .surface-p6 .video { width: 100%; }
 }

/* p7 */
.surface-p7 {  }
   .surface-p7 .box-1 .x1, .surface-p7 .box-1 .x2 { height: 6.2rem; position: relative; }
@media (max-width: 1440px) {
   .surface-p7 .box-1 .x1, .surface-p7 .box-1 .x2 { height: 5.6rem; }
}
   .surface-p7 .box-1 .x1 {  width: 50%; float: left; background: url(../images/p7-1.png) no-repeat 0 70% / auto 70%; }
   .surface-p7 .box-1 .x2 { width: 50%; float: right; background: url(../images/p7-2.jpg) no-repeat 50% 50% / cover;}
   .surface-p7 .box-1 .x1 p { padding-left: .8rem; }
   .surface-p7 .box-1 .x1 .t { font-weight: bold; line-height: 1.2; position: absolute; right: 0; bottom: 1.2rem; padding: .2rem .3rem;}
   .surface-p7 .box-1 .x2 .t { font-weight: bold; line-height: 1.2; position: absolute; left: 0; bottom: 1.2rem; padding: .2rem .3rem; color: #FFF; background-color: rgba(2,56,148,.8);}

   .surface-p7 .box-2 { padding: 6% 0; }
   .surface-p7 .box-2 .inner { border-top: 1px solid #023894; padding: 0 5%;}
   .surface-p7 .box-2 .i { margin-top: -0.8rem; width: 16.6666666666%; float: left;}
   .surface-p7 .box-2 .im { width: 1.6rem; height: 1.6rem; line-height: 1.6rem;  border-radius: 100%; background-color: #023894; margin: 0 auto; text-align: center; }
   .surface-p7 .box-2 .im img { width: 60%; }
   .surface-p7 .box-2 p { text-align: center; margin: .1rem 0; color: #023894; }
@media (max-width: 1440px) {
   .surface-p7 .box-2 .i { margin-top: -0.5rem; }
   .surface-p7 .box-2 .im { width: 1.0rem; height: 1.0rem; line-height: 1.0rem; }
   .surface-p7 .box-2 .im img { width: 75%; }
}

   .surface-p7 .box-3 { padding-top: .2rem; background: #023894 url(../images/p7-4.jpg) no-repeat 50% 50% / cover; color: #FFF;}
   .surface-p7 .box-3 .inner { padding: 0 10%; }
   .surface-p7 .box-3 .i { width: 33.33333333%; float: left; text-align: center; padding: 0 3%; height: 4.2rem; }
   .surface-p7 .box-3 .t { padding: .1rem 0.03rem; font-weight: bold;}

   .surface-p7 .box-4 { padding: 0.05rem .3rem; }
   .swiper-p7 {}
      .swiper-p7 .view { padding: 0.2rem; display: block; }
      .swiper-p7 .view img { width: 100%; }
      .swiper-p7 .swiper-ac-r { position: absolute; top: 45%; border-radius: 100%; width: .5rem; height: .5rem; color: #FFF; background-color: #023894; text-align: center; line-height: .5rem; z-index: 500; font-size: .2rem; cursor: pointer;}
      .swiper-p7 .swiper-ac-next { right: 0; }
      .swiper-p7 .swiper-ac-prev { left: 0; }

@media (max-width: 1440px) {
    .surface-p7 .box-3 .inner { padding: 0 3%; }
    .surface-p7 .box-4 { padding: 0.02rem .8rem; }
}

@media (max-width: 828px) {
   .surface-p7 .box-1 .x1, .surface-p7 .box-1 .x2 { width: 100%; float: none; height: 2.8rem;}
   .surface-p7 .box-1 .x1 .t { bottom: 0; right: 0; left: auto; top: auto; }
   .surface-p7 .box-1 .x2 .t { top: 0; right: 0; left: auto; bottom: auto; }

   .surface-p7 .box-2 .i { width: 33.33333333%; margin-top: 0; }
   .surface-p7 .box-2 .inner { border: 0; }

   .surface-p7 .box-3 .i { width: 100%; height: auto; padding: .2rem 0;}
   .surface-p7 .box-3 .i + .i { border-top: 1px dashed rgba(255,255,255,.8); }

   .surface-p7 .box-4 { padding: 0.02rem .2rem; }

}

/* p8 */
.surface-p8 { background: url(../images/p8-bg.jpg) no-repeat 50% 100% / 100% auto; }
   .surface-p8 .box-1 { height: 60%; }
   .surface-p8 .inner { padding: 0 5%; height: 100%; display: table; width: 100%;}
   .surface-p8 .in { display: table-cell;vertical-align: middle; }
   .surface-p8 .i { width: 33.33333333%; padding: 0.5rem; text-align: center; float: left; }
   .surface-p8 .t { padding-bottom: .3rem; }
   .surface-p8 .im { border-radius: 1.0rem; overflow: hidden; border: .1rem solid #dfdfdf; }
   .surface-p8 .im img { width: 100%; }
   .surface-p8 .act { padding-top: .3rem; }
   .surface-p8 .act a { display: block; width: .8rem; height: .8rem; text-align: center; color: #FFF; background-color: #023894; border-radius: 100%; line-height: 1.2; padding-top: 0.26rem; margin: 0 auto;}
      .surface-p8 .act a small { display: block; }
@media (max-width: 1440px) {
   .surface-p8 .i { padding: 0.2rem; }
}
@media (max-width: 828px) {
   .surface-p8 { background: url(../images/p8-bg.jpg) no-repeat 50% 100% / auto 6.0rem; }
   .surface-p8 .i { width: 100%; float: none; padding: .3rem; border: 1px solid #023894; border-radius: .1rem; background-color: #FFF;}
   .surface-p8 .i + .i { margin-top: .2rem; }

}

/* p9 */
.surface-p9 {  }
   .surface-p9 .box-1 { width: 18%; float: left; height: 100%; padding-right: 3%; }
      .surface-p9 .box-1 .t1 { text-align: right; font-weight: bold; padding-top: .8rem; background: url(../images/p9-t.png) no-repeat 100% 0 / auto .8rem; }
      .surface-p9 .box-1 .t2 { text-align: right; text-transform: uppercase; line-height: 1; padding-bottom: .8rem; background: url(../images/p9-t2.png) no-repeat 100% 100% / auto .6rem;}
   .surface-p9 .box-2 { width: 82%; float: right; height: 100%;}
      .surface-p9 .box-2 .x1 { width: 53%; float: left; height: 100%; }
      .surface-p9 .box-2 .v1 { height: 50%; }
      .surface-p9 .box-2 .v2 { height: 50%; }
      .surface-p9 .box-2 .x2 { width: 47%; float: right; height: 100%;}
      .surface-p9 .box-2 .map { height: 100%; }
      .surface-p9 .box-2 .x2 .v1 { background: url(../images/p9-4-1.jpg) no-repeat 100% 100% / auto 100%; }
         .surface-p9 .box-2 .x2 .v1 .in { padding: 10%; }
         .surface-p9 .box-2 .x2 .v1 .in .t { font-size: .14rem; font-weight: bold; padding-bottom: .1rem; }
   .surface-p9 .v-contact { padding-right: 15%; }
      .surface-p9 .v-contact .v-x { padding-left: .8rem; }
      .surface-p9 .v-contact .v-x + .v-x { border-top: 1px dashed #ccc; padding-top: .2rem; margin-top: .2rem;}
      .surface-p9 .v-contact .v-x1 { background: url(../images/p9-2-1.png) no-repeat .1rem 50% / auto .5rem; }
      .surface-p9 .v-contact .v-x2 { background: url(../images/p9-2-2.png) no-repeat .1rem 50% / auto .5rem; }
      .surface-p9 .v-contact .v-x3 { background: url(../images/p9-2-3.png) no-repeat .1rem 50% / auto .5rem; }
      .surface-p9 .v-contact p { font-weight: bold; line-height: 1.4; }
      .surface-p9 .v-contact .c { font-weight: bold; color: #023894; font-size: 0.16rem;}
      .surface-p9 .v-contact .bebas { font-size: 0.32rem; font-weight: normal; line-height: 1; }
   .surface-p9 .v-serv {  }
      .surface-p9 .v-serv .v-x { padding: .3rem 5%; text-align: center; }
      .surface-p9 .v-serv .v-x1 { width: 55%; float: left; }
      .surface-p9 .v-serv .v-x2 { width: 45%; float: right; }
      .surface-p9 .v-serv .t { padding-top: .9rem; font-weight: bold; }
      .surface-p9 .v-serv .v-x1 .t { background: url(../images/p9-3-1.png) no-repeat 50% 0 / auto .8rem; }
      .surface-p9 .v-serv .v-x2 .t { background: url(../images/p9-3-2.png) no-repeat 50% 0 / auto .8rem; }
      .surface-p9 .v-serv .v-x1 .bebas { font-size: 0.38rem; }
      .surface-p9 .v-serv .v-x1 p { color: #999; line-height: 1; }
@media (max-width: 1440px) {
   .surface-p9 .v-contact .v-x + .v-x { padding-top: .1rem; margin-top: .1rem; }
   .surface-p9 .v-contact .c { line-height: 1.2; }
   .surface-p9 .v-serv .v-x { padding: .1rem; }
}

@media (max-width: 828px) {
   .surface-p9 .box-1, .surface-p9 .box-2 { width: 100%; float: none; }
   .surface-p9 .box-1 { padding-top: .2rem; padding-right: 0; padding-bottom: .2rem; }
   .surface-p9 .box-1 .t1 { text-align: left; padding: .4rem .2rem 0.07rem;background: url(../images/p9-t.png) no-repeat .2rem 0 / auto .4rem; }
   .surface-p9 .box-1 .t2 { display: none; }
   .surface-p9 .box-2 .x1, .surface-p9 .box-2 .x2 { width: 100%; float: none; }
   .surface-p9 .v-contact { padding-right: 0; border-top: 1px solid #023894; padding: .3rem 0;}
   .surface-p9 .v-contact .v-x + .v-x { margin-top: 0; }
   .surface-p9 .v-serv { border-top: 1px solid #023894; padding-top: .3rem; }
   
   .surface-p9 .v-serv .v-x1 .bebas { font-size: .3rem; line-height: 1; }
   .surface-p9 .box-2 .v2 { height: 3.0rem; }
   .surface-p9 .box-2 .x2 .v1 { }
}

.add181229 { padding: 3% 5%; }
   .add181229 .t { font-size: calc(100vh / 42); font-weight: bold; font-style: italic;}
   .add181229 .t1 { font-size: calc(100vh / 32);  }
   .add181229 .t2 { padding-left: 6%; }
   .add181229 .t3 { padding-left: 10%; }
   .add181229 .t em { color: #e60013; font-size: 115%; font-style: italic;}



/* 0.5s reg */
.menu ul li i,
.ax-qrcode .pop,
.main-content,
.main-menu
{ -webkit-transition:   all 0.2s ease-out;
   transition:       all 0.2s ease-out; }

.test { height: 4.0rem; width: 7.0rem; margin: 2.0rem auto; background-color: #999; }

/* img-zoom */
.fs_gallery {
    background: rgba(0,0,0, 0.9); position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000; }
.fs_gallery_close {
    position: absolute; top: 20px; right: 20px; height: 25px; color: #ccc; font-size: 34px; line-height: 23px; text-align: center; cursor: pointer; z-index: 102; }
.fs_gallery_close:before {
    content: "关闭"; font-size: 0.18rem; width: .6rem; display: block; opacity: .6; }
.fs_gallery_close:hover {
    color: #fff; }

.fs_gallery_prev, .fs_gallery_next {
    position: absolute; width: 80px; color: #ccc; font-size: 30px; cursor: pointer; z-index: 101; }
.fs_gallery_prev:hover, .fs_gallery_next:hover {
    background: rgba(0,0,0, 0.1); color: #fff; }
.fs_gallery_prev {
    left: 0; top: 0; bottom: 0; }
.fs_gallery_next {
    right: 0; top: 0; bottom: 0; }
.fs_gallery_prev:before {
    content: "‹"; position: absolute; height: 30px; margin-top: -30px; top: 50%; left: 35px; }
.fs_gallery_next:before {
    content: "›"; position: absolute; height: 30px; margin-top: -30px; top: 50%; left: 35px; }

.fs_gallery_shuft {
    position: relative; width: 9999999px; }
.fs_gallery_shuft:after {
    clear: both; content: ""; display: block; }
.fs_gallery_shuft_item {
    float: left; position: relative; background-color: rgba(0,0,0,0.6); background-position: center center; background-repeat: no-repeat; }
.fs_gallery_shuft_item img {
    box-shadow: 0 0 8px rgba(0,0,0, 0.8); position: absolute; top: 50%; left: 50%; }