@CHARSET "ISO-8859-1";
/* Reset CSS * --------------------------------------- */
 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td {
     padding: 0;
     margin: 0;
}
 a{
     text-decoration:none;
}
 table {
     border-spacing: 0;
}
 fieldset,img {
     border: 0;
}
 address,caption,cite,code,dfn,em,strong,th,var {
     font-weight: normal;
     font-style: normal;
}
 strong{
     font-weight: bold;
}
 ol,ul {
    /* list-style: none;
     */
     margin:0;
     padding:0;
}
 caption,th {
     text-align: left;
}
 h1,h2,h3,h4,h5,h6 {
     font-weight: normal;
     margin:0;
     padding:0;
    /* color:#444;
     */
}
 q:before,q:after {
     content:'';
}
 abbr,acronym {
     border: 0;
}
 .fl-box {
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
}
 .fl-hd, .fl-bd, .fl-ft {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
 .fl-bd {
     -webkit-box-flex: 1;
     -webkit-flex: 1;
     flex: 1;
}
 .p12{
     padding:12px;
}
 #fp-nav ul li a span, .fp-slidesNav ul li a span{
     background: #545454;
     opacity: 0.4;
}
 #fp-nav ul li a.active span{
     background: #e60012;
}
 .form-control{
    border: 1px solid #4c4c4c;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* height: 54px;
     */
    font-size: 18px;
    font-weight: 400;
}
 .form-control:active, .form-control:focus {
     outline: none;
     box-shadow: none;
     border-color: #d71f19;
}
 form .required {
     position: relative;
}
/* .required:after {
     position: absolute;
     top: 6px;
     right: 8px;
     content: "*";
     line-height: 1;
     color: #d71f19;
     font-family: Arial, sans-serif;
     font-size: 20px;
}
 */
/*btn*/
 .btn {
     vertical-align: inherit;
     display: inline-block;
     line-height: 1;
     white-space: nowrap;
     cursor: pointer;
     background: #fff;
     border: none;
     color: #5a5e66;
     -webkit-appearance: none;
     text-align: center;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     outline: 0;
     margin: 0;
     -webkit-transition: 0.2s;
     transition: 0.2s;
     font-weight: 500;
     padding: 12px 25px;
     font-size: 13px;
     border-radius: 0;
}
 .btn.block {
     display: block;
}
 .btn.vblock{
     height:100%;
}
 .btn.primary {
     color: #fff;
     background-color: #409eff;
     border-color: #409eff;
}
 .btn.primary:hover {
     background: #66b1ff;
     border-color: #66b1ff;
     color: #fff;
}
 .btn.red{
     color: #fff;
     background-color: #cb1c1c;
     border-color: #cb1c1c;
}
 .btn.red:hover, .btn.red:focus {
     background: #000000;
     border-color: #000000;
     color: #fff;
}
 .btn.danger {
     color: #fff;
     background-color: #fa5555;
     border-color: #fa5555;
}
 .btn.danger:hover, .btn.danger:focus {
     background: #ff6f6f;
     border-color: #ff6f6f;
     color: #fff;
}
 .btn.danger.plain {
     color: #fa5555;
     background: white;
}
 .btn.plain.danger:hover {
     color: #fff;
     background-color: #fa5555;
}
 .btn.theme {
     background: #0093dd;
     border-color: #0093dd;
     color: #fff;
}
 .btn.theme:hover, .btn.theme:focus {
     background: #13a4ec;
     border-color: #13a4ec;
}
 .btn.theme.plain {
     color: #0093dd;
     background: none;
}
 .btn.plain.theme:hover {
     background: #13a4ec;
     color: #fff;
}
 .btn.orange {
     background-color: #f90;
     border-color: #f90;
     color: #fff;
}
 .btn.orange:hover, .btn.orange:focus {
     background-color: #ea8c00;
     border-color: #ea8c00;
     color: #fff;
}
 .btn.grey {
     background-color: grey;
     border-color: grey;
     color: #fff;
     opacity: 0.6;
}
 .btn.round {
     border-radius: 20px;
}
 .btn.circle{
     padding: 0;
     border-radius:50%;
}
 .btn.plain {
}
 .btn.white.plain {
     color: white;
     border-color: white;
     background: none !important;
}
 .btn.plain.primary:hover {
     background: #409eff;
     border-color: #409eff;
     color: #fff;
}
 .btn.large{
     border-radius: 5px;
     font-size: 22px;
    /* font-weight:bold;
     */
}
 .btn.small {
     font-size: 13px;
     padding: 9px 14px;
}
 .btn.mini {
     font-size: 11px;
     padding: 6px 10px;
}
 div.burger {
     margin-right: 25px;
     height: 60px;
     width: 68px;
     position: fixed;
     top: 12px;
     right: 7px;
     cursor: pointer;
     z-index: 200;
}
 div.burger span{
     font-size: 18px;
     letter-spacing: 8px;
     color:white;
     position:fixed;
     right: 91px;
     top: 31px;
}
 div.x, div.y, div.z {
     position: absolute;
     margin: auto;
     left: 20px;
     top: 0px;
     bottom: 18px;
     height: 2px;
     width: 22px;
     background: #d71f19;
     border-radius:2px;
     -webkit-transition: all 100ms ease-out;
     -moz-transition: all 100ms ease-out;
     -ms-transition: all 100ms ease-out;
     -o-transition: all 100ms ease-out;
     transition: all 100ms ease-out;
}
 .open div.x, .open div.y, .open div.z{
     background: rgba(0, 0, 0, 0.25882352941176473);
}
 div.y.squize{
     width:0;
     -webkit-transition: all 100ms ease-out;
     -moz-transition: all 100ms ease-out;
     -ms-transition: all 100ms ease-out;
     -o-transition: all 100ms ease-out;
     transition: all 100ms ease-out;
}
 div.y{
    top: 18px;
}
 div.z{
    top: 37px;
}
 div.open div.x, div.open div.z{
     top:19px;
     -webkit-transition: all .3s ease-out;
     -moz-transition: all .3s ease-out;
     -ms-transition: all .3s ease-out;
     -o-transition: all .3s ease-out;
     transition: all .3s ease-out;
}
 div.rotate30{
     -ms-transform: rotate(30deg);
     -webkit-transform: rotate(30deg);
     transform: rotate(30deg);
     -webkit-transition: all .5s ease-out;
     -moz-transition: all .5s ease-out;
     -ms-transition: all .5s ease-out;
     -o-transition: all .5s ease-out;
     transition: all .5s ease-out;
}
 div.rotate150{
     -ms-transform: rotate(150deg);
     -webkit-transform: rotate(150deg);
     transform: rotate(150deg);
     -webkit-transition: all .5s ease-out;
     -moz-transition: all .5s ease-out;
     -ms-transition: all .5s ease-out;
     -o-transition: all .5s ease-out;
     transition: all .5s ease-out;
}
 div.rotate45{
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
     -webkit-transition: all .5s ease-out;
     -moz-transition: all .5s ease-out;
     -ms-transition: all .5s ease-out;
     -o-transition: all .5s ease-out;
     transition: all .5s ease-out;
}
 div.rotate135{
     -ms-transform: rotate(135deg);
     -webkit-transform: rotate(135deg);
     transform: rotate(135deg);
     -webkit-transition: all .3s ease-out;
     -moz-transition: all .3s ease-out;
     -ms-transition: all .3s ease-out;
     -o-transition: all .3s ease-out;
     transition: all .3s ease-out;
}
 div.burger.open{
     -webkit-transition: all 300ms cubic-bezier(0.000, 0.595, 0.890, 1.000);
     -moz-transition: all 300ms cubic-bezier(0.000, 0.595, 0.990, 1.000);
     -ms-transition: all 300ms cubic-bezier(0.000, 0.595, 0.990, 1.000);
     -o-transition: all 300ms cubic-bezier(0.000, 0.595, 0.990, 1.000);
     transition: all 300ms cubic-bezier(0.000, 0.595, 0.890, 1.000);
     margin-right:0;
}
/* Custom CSS * --------------------------------------- */
 body{
     font-family: arial,helvetica;
     color: #333;
     color: rgba(0,0,0,0.5);
}
 .wrap{
     margin-left: auto;
     margin-right: auto;
     width: 960px;
     position: relative;
}
 h1{
     font-size: 6em;
}
 p{
    /* font-size: 2em;
     */
}
 .intro p{
     width: 50%;
     margin: 0 auto;
     font-size: 1.5em;
}
 .section{
    /* text-align:center;
     */
}
/* Menu --------------------------------------- */
 .trans_navbar .logo{
     z-index: 199;
    /* position:fixed;
     top:15px;
     left:25px;
     */
}
 .header-top{
     min-height: 86px;
     position: fixed;
     z-index: 197;
     top:0;
     left: 0;
     right: 0;
     -webkit-transition: 0.4s;
     transition: 0.4s;
    /* background: rgba(255, 255, 255, 0.15);
     -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
     */
}
 .trans_navbar{
     z-index:198 
}
 .menu_navbar{
     overflow: hidden;
     height: 0;
     z-index: 199;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     /* display:none;
     */
     margin-top: -150px;
     background: rgba(255, 255, 255, 0.66);
     opacity:0;
     -webkit-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -ms-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -o-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
 .header-top>div{
     margin-bottom: 12px;
     margin-top: 12px;
     margin-right: 23px;
     display: inline-block;
     float: right;
}
 .header-top .logo img {
     z-index: 500;
     height: 70px;
     width: auto;
     padding: 10px 16px 16px;
}
 .header-top .menu a:hover {
    /* background: rgba(255, 255, 255, 0.15);
     */
     color: #c29859;
}
 #menu li {
     display:inline-block;
}
 #menu li a{
     font-weight: 600;
     font-size: 15px;
     display: block;
     padding: 24px 16px;
     text-decoration:none;
     color: #000000;
     -webkit-transition: 0.3s;
     transition: 0.3s;
}

 #menu li div{
     font-weight: 600;
     font-size: 15px;
     display: block;
     padding: 24px 16px;
     text-decoration:none;
     color: #000000;
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 #menu li.active a:hover{
}
 #menu li:hover a{
     color: #d72019;
}
 #menu li.active a{
     font-weight: 700;
     color: #d72019;
}
 #menu{
     margin-right: 51px;
}
 .menu_navbar.animate{
     height: auto;
     display: flex;
     margin-top: 0;
     opacity:1;
     z-index: 199;
     -webkit-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -moz-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -ms-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     -o-transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     transition: all .5s cubic-bezier(0.000, 0.995, 0.990, 1.000);
}
/* footer */
 footer{
     padding: 50px 0;
     background: rgba(34, 34, 34, 0.9);
}
 footer .grid-box{
     display:flex;
}
 footer .logo-pl{
     padding-left:80px;
     padding-right: 47px;
    /* border-right: 1px solid rgba(175, 175, 175, 0.2);
     */
     margin-right: 50px;
}
 footer .logo-pl img{
     margin:0 auto;
     width: 147px;
}
 footer .grid-box .footer-link{
     margin: 0 15px;
     line-height: 2.5;
     font-size: 14px;
     color: rgba(255, 255, 255, 0.7);
}
 footer .grid-box .footer-link a{
     font-size: 14px;
     color: #858585;
     cursor:pointer;
     margin-right: 15px;
     font-weight:200;
    /* display: block;
     */
}
 footer .grid-box .footer-link a.main-link{
    /* font-size: 15px;
     */
     color: #c0c0c0;
    /* font-weight: bold;
     */
}
 footer .grid-box .footer-link a:hover{
     color:#c29859 
}
 .footer-foot{
     padding: 25px 12px;
     margin-top: 25px;
     border-top: 1px solid rgba(128, 128, 128, 0.1);
     text-align: center;
     color: #ffffff33;
     font-size:13px;
     padding-top: 25px;
}
/*common*/
 .img-pl{
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
     overflow: hidden;
}
 .img-pl img {
     min-width: 100%;
     object-fit: cover;
     height: 100%;
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
}
 .pull-left{
     float:left;
}
 .pull-right{
     float:right;
}
 .t-center{
     text-align: center;
}
 .t-right{
     text-align:right;
}
 .p-title{
     margin-right:20px 
}
/*tabs*/
 ul.tabs{
    /* float: right;
     */
     margin: 0px;
     padding: 0px;
     list-style: none;
}
 ul.tabs li{
     font-weight: 200;
     font-size: 15px;
     color: rgba(255, 255, 255, 0.75);
     display: inline-block;
     padding: 5px 0;
     cursor: pointer;
     margin: 0 12px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 ul.tabs li:hover{
     color:white;
}
 ul.tabs li.current{
     color: white;
     border-bottom: 1px solid rgba(255, 255, 255, 0.6);
     font-weight: bold;
}
 .tab-content{
     display: none;
    /* background: #ededed;
     */
    /* padding: 15px;
     */
}
 .tab-content.current{
     display: inherit;
     animation: fadeIn 1.0s;
    /* -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
     */
}
 .pl-header{
     display: flex;
     color: white;
     padding: 28px 16px 23px 30px;
     background: rgba(16, 16, 16, 0.92);
     margin-bottom: 20px;
     border-radius: 2px;
}
/* sections */
 .section.center{
     vertical-align: middle;
     text-align:center;
}
 .section.center .content {
    /* width: 720px;
     */
     width: auto;
     margin: 0 auto;
     padding-top: 72px;
     padding-bottom: 72px;
    /* padding-left: 1em;
     */
    /* padding-right: 1em;
     */
    /* display: inline-block;
     */
     -ms-transition: 0.6s;
     -webkit-transition: 0.6s;
     transition: 0.6s;
     text-align: center;
     color: #fff;
}
 .section{
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     position:relative;
}
 #sec_home{
     overflow:hidden;
} 
#sec_home .indexbg{
  background-image: url(../images/index/11.jpg);
  z-index: -1;
}
.indexbg{
     width: 100%;
     -webkit-animation: zoomout 4s 1;
     height: 100%;
     position:absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-size: cover;
}

/* #sec_intro {
     background-image: url(../images/about_bg2.jpg);
}*/

 #sec_life {
     background-image: url(../images/citybg.jpg);
    /* padding-top:120px;
     */
}
 #sec_rights {
     background-color: rgba(230, 231, 233, 0.32);
    /*background-image: url(../images/Tea_Discovery_Experience_Taiwan_1392x708.jpg);
    */
}
 #sec_product {
    /* background-image: url(../images/500243958_3.jpg);
     */
}
 #sec_footer {
     background-color:#fafafb;
     background-image: url(../images/footerbg.jpg);
}
 #sec_contact{
    /*background-image: url(../images/500266200_darker.jpg);
    */
     background-color:#fafafb;
}
 #pro_june1{
     background-image: url(../images/pro_pet.jpg);
}
 #pro_june2{
     background-image: url(../images/pro_invisiArma.jpg);
}
 #pro_one{
     background-image: url(../images/pro1.jpg);
}
 #pro_two{
     background-image: url(../images/pro2.jpg);
}
 #pro_three{
     background-image: url(../images/pro3.jpg);
}
 #pro_four{
     background-image: url(../images/pro4.jpg);
}
 #pro_five{
     background-image: url(../images/pro5.jpg);
}
 #pro_six{
     background-image: url(../images/pro6.jpg);
}
 #pro_seven{
     background-image: url(../images/pro7.jpg);
}
 #pro_eight{
     background-image: url(../images/PETG_New_6.jpg);
}
 #pro_nine{
     background-image: url(../images/pro8.jpg);
}
 #val_one{
     background-image: url(../images/value1.jpg);
}
 #val_two{
     background-image: url(../images/value2.jpg);
}
 #val_three{
     background-image: url(../images/value3.jpg);
}

 #val_four{
     background-image: url(../images/value4.jpg);
}
 #int_one{
     background-image: url(../images/intro1.jpg);
}
 #int_two{
     background-image: url(../images/intro2.jpg);
}
 #int_three{
     background-image: url(../images/intro3.jpg);
}
 #sup_one{
  background-image: url(../images/support1.jpg);
 }
 @-webkit-keyframes zoomout {
     0% {
         -webkit-transform: scale(1.12);
    }
     100% {
         -webkit-transform: scale(1);
    }
}
/* #sec_home:before{
     position:absolute;
     content:'';
     top:0;
     bottom:0;
     left:0;
     right:0;
     background-color:rgba(0,0,0,.3);
}
 */
 #sec_home .h-logo{
     padding: 50px 40px 20px 40px;
}
 #sec_home .h-logo img{
     margin: 0 auto;
     display: block;
     width: 153px;
}
 #sec_home .content{
     position:absolute;
     bottom: 51px;
     left:0;
     right:0;
}
 #sec_home .content h3{
     letter-spacing: 20px;
     margin-bottom: 6px;
     font-size: 22px;
}
 #sec_home .content .subhead{
     font-size: 16px;
     letter-spacing: 3px;
     color: rgba(255,255,255,0.3);
    /* -webkit-transition: 0.3s;
     transition: 0.3s;
     */
     font-weight: lighter;
}
 #sec_home .swiper-banner-words{
     background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
     background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
     background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#ffffff',GradientType=0 );
}
 #sec_home .swiper-slide{
     padding: 45px 47px 77px;
}
 #sec_home .swiper-slide h4{
     color: #121212;
     font-size: 23px;
     margin: 0 0 15px;
}
 #sec_home .swiper-slide p{
     font-size: 14px;
}
 #sec_home .page5-bd{
     bottom: 39px;
}
 #sec_home .swiper-scrollbar-drag{
     border-radius:3px;
     background: #c2985987!important;
}
 #sec_home .swiper-container-horizontal>.swiper-scrollbar{
     left: 3%;
     bottom: 23px;
     z-index: 50;
     width: 94%;
     height: 6px;
}
#sec_home .blacksquare {
     width: 454px;
     z-index:120;
     /* padding: 1.7em 1em; */
     color: white;
     /* box-shadow: 0 1px 25px rgba(0, 0, 0, 0.13); */
}
@media screen and (min-width: 800px) {
     #sec_home .blacksquare {
     position: absolute;
     bottom: 129px;
     right: 5%;
   }
}
#sec_home .blacksquare a{padding: 1.6em 16px;background: rgba(0, 0, 0, 0.55);display:block;-webkit-transition: all 200ms ease;transition: all 200ms ease;}
#sec_home .blacksquare a:hover{
transform: scale(1.02);
box-shadow: 1px 3px 30px rgba(0, 0, 0, 0.12);
}

#sec_home .blacksquare .words{
    padding: 1.4em 0 0;
}
#sec_home .blacksquare img{
    opacity:.9;
    /* margin: 0 16px; */
    max-width: 100%;
    display:block;
    /* margin: 0 auto; */
}
#sec_home .blacksquare a:hover img{
    opacity:1;
}
#sec_home .blacksquare p {
    font-weight: 100;
    line-height: 1.8em;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.69);

}
#sec_home .blacksquare p.indexnews{
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
}
#sec_home .blacksquare .topline{
      color: white !important;
      line-height: 1.7em;
      font-size: 15px;
      padding: 0 0.5em;
      margin-top: 27px;
      background: none;
}
#sec_home .mll_words{
  letter-spacing: 1px;
  font-size: 25px;
  font-weight:bold;
}
.only_mobile{
    display:none;
}
#sec_home .blacksquare h4{
    color: white;
    font-size: 18px;
    margin: 0 0 6px;
}
#sec_home .blacksquare h2{
    color: white;
    font-size: 21px;
    padding: 0 0 19px;
}
#sec_home .blacksquare h2 span{
    letter-spacing: 1px;
    margin: 0 0 0 12px;
    font-size: 13px;
    font-weight: 400;
}
 .sec_footer{
     text-align: center;
     position:absolute;
     bottom:0;
     left:0;
     right:0;
     padding: 39px 0;
}
 .sec_footer .arrow_down{
     width: 36px;
     opacity: .8;
     -webkit-transition: 0.3s;
     transition: 0.3s;
     animation: blinker 1.5s linear infinite;
}
 .sec_footer .arrow_down:hover{
     opacity:1;
}
 #sec_intro .content{
    /*text-align: center;
    */
    /*color:white;
    */
}
 .rec_1,  .rec_2, .rec_3{
         position: relative;
     height:100vh;
     width:100vw;
          background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
     position:relative; 
 }
 .rec_1 {
     background-image: url(../images/pro_pet.jpg);
}
 .rec_2 {
     background-image: url(../images/pro_invisiArma.jpg);
}
 .rec_3 {
     background-image: url(../images/pro6.jpg);
}
 #sec_intro H3{
     margin-top: 62%;
}
 #sec_intro .line {
     margin: 23px auto;
     padding: 0.5px 0;
     width: 113px;
     border-radius: 2px;
     background: rgba(255, 255, 255, 0.58);
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 #sec_intro p{
     opacity: .8;
     font-size:14px;
     line-height: 29px;
}
 #sec_intro .red{
     margin-top:15px;
}
 #sec_intro .words1{
     z-index: 150;
     position: absolute;
     top: 127px;
     left: 5%;
}
 #sec_intro .words{
     position: absolute;
     bottom: 127px;
     left: 5%;
}
 #sec_intro .wenzi1{
    font-size: 35px;
    /* font-weight: bold;
     */
    color:#46c481;
}
 #sec_intro .wenzi2{
        margin: -42px -7px -9px;
    font-size: 98px;
    color:#46c481;
}
 #sec_intro .wenzi3{
     text-align: center;
     color: white;
     padding: 6px;
     background: #46c481;
     font-size: 27px;
     letter-spacing: 5px;
}
 .square{
     display: block;
}
 .square{
     position: relative;
     border-radius: 2px;
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
     color: #4a4a4a;
     background: rgba(255, 255, 255, 0.94);
}
 .white-panel{
     position:relative;
     border-radius: 2px;
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
     color: #4a4a4a;
     background: rgba(255, 255, 255, 0.99);
}
 .btnmore{
     letter-spacing: 2px;
     border-radius: 2px;
     font-size: 14px;
     position: relative;
     background: rgba(255, 255, 255, 0.86);
     margin:0 auto;
     display: inline-block;
    /* margin-top: 20px;
     */
     color: rgba(39, 39, 39, 0.67);
     padding: 12px 20px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 .btnmore:hover{
     color:white;
     background: rgba(15, 14, 14, 0.63);
     padding-right:42px;
}
 .btnmore:hover:after{
     content:'';
     width: 18px;
     background-size: contain;
     height: 13px;
     position:absolute;
     bottom: 14px;
     right: 11px;
     opacity:.9;
     background-repeat: no-repeat;
     background-image: url(../images/enter.png);
}
 .page5-bd {
     z-index:99;
     border: 1px solid rgba(70, 70, 70, 0.2);
     position: absolute;
     top: 12px;
     left: 15px;
     right: 15px;
     bottom: 12px;
}
 #sec_life .square{
     margin: 0 0 15px;
     text-align:center;
     padding: 11vh 18px 7vh;
     background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.61) 0%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 100%);
     background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.61) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%);
     background: linear-gradient(135deg, rgba(255,255,255,0.61) 0%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9cffffff', endColorstr='#ffffff',GradientType=1 );
}
 #sec_life .square .content{
     z-index:2;
}
 #sec_life .square:hover{
    /* background:#262626;
     cursor:pointer;
     */
}
 #sec_life .square h3{
     letter-spacing: 1px;
     font-weight: 500;
     color: #121212;
     font-size: 33px;
     line-height: 49px;
}
 #sec_life .square:hover h3{
    /* color:#d71f19;
     */
}
 #sec_life .square p{
     color: rgba(1, 1, 1, 0.84);
     font-size: 15px;
     letter-spacing: 1px;
     margin: 36px 0;
}
 #sec_life .square:hover p{
     color:black;
}

#sec_product .words1 {
    z-index: 100;
    position: absolute;
    top: 107px;
    left: 3%;
    font-size: 23px;
    background: rgba(0, 0, 0, 0.78);
    color: white;
    padding: 12px 25px;
}
 #sec_product .content{
     width:100%;
}
 #sec_product .row{
     height:50%;
     margin: 0;
}
 #sec_product .col-md-3, #sec_product .col-6{
     padding:0;
}
 #sec_product .product_link{
     cursor: default;
     overflow:hidden;
}
 #sec_product .square{
     position: relative;
     overflow:hidden;
     text-align: center;
     height: 50vh;
     border-radius:0;
}
 #sec_product .square span{
     position:absolute;
     left: 48%;
}
 #sec_product .square span.arrow-down{
     bottom:0;
}
 #sec_product .square span.arrow-up{
     top:0;
}
 #sec_product .square .withbg{
     background-size: cover;
     text-align: center;
     height: 50vh;
     border-radius:0;
     background-position: center;
     -webkit-transition: all 500ms ease;
     transition: all 500ms ease;
}
 #sec_product .square:hover{
     cursor:pointer;
}
 #sec_product .square .content{
     -webkit-transition: 0.3s;
     transition: 0.3s;
    /* padding: 53px 15px 73px;
     */
}
 #sec_product .square .content{
     padding: 22vh 15px 12px 15px;
     padding-top:22vh;
     height:100%;
     background-color: #f1f1f1;
}
 #sec_product .row .col-md-4:nth-child(odd) .square .content{
    /* background-color: rgba(0, 0, 0, 0.41);
     */
}
 #sec_product .product_link:hover .content{
     background:white;
}
 #sec_product .product_link:hover .square .withbg{
     transform: scale(1.05);
}
 #sec_product .product_link:hover .square span{
     border-color:white;
}
 #sec_product .square h3{
     color: #cb1c1c;
     font-size: 30px;
     font-weight: normal;
}
 #sec_product .product_link:hover .square h3{
}
 #sec_product .square .line {
     width: 33px;
     height: 1px;
     background-color: #c7c7c7;
     margin: 15px auto 8px;
     border-radius: 3px;
     -webkit-transition: 0.3s;
     transition: 0.3s;
     opacity:0;
}
 #sec_product .product_link:hover .line {
     opacity:1;
}
 #sec_product .square p {
     margin-top: 19px;
     color: #000000;
     font-size: 14px;
}
 #sec_rights .row{
    /* width:80%;
     */
    /* margin: 0 auto;
     */
}
 #sec_rights .row .col-md-6{
}
 #sec_rights .row .col-md-6 a{
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
     display:block;
     padding: 35px 30px;
}
 #sec_rights .row .col-md-6 a:hover{
     cursor:pointer;
     background:white;
}
 #sec_rights .col-md-6:nth-child(odd) .img-pl{
     margin:40px 0 0;
}
 #sec_rights .col-md-6:nth-child(even) .img-pl{
     margin:0 0 40px;
}
 #sec_rights .img-pl{
     width:100%;
     height: 34vh;
}
 #sec_rights .atc_image img{
    /*width:100%;
    */
}
 span.date{
     font-size: 13px;
     font-weight: bold;
     display: block;
     color: #cb1c1c;
     text-align: right;
}
 #sec_rights h3{
     font-size: 1.65em;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     color:black;
     margin: 28px 0 25px;
}
 #sec_rights p{
     letter-spacing: -1px;
     font-weight: 600;
     font-family: Microsoft JhengHei;
     line-height: 25px;
     color: #717172;
         overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

#sec_rights .more{
    margin:20px 0 0;
    text-align:center;
}
 #sec_supplier.active .fk_header{
    /* animation: fadeIn 2.0s;
     min-height: 86px;
     position: fixed;
     z-index: 190;
     top: 0;
     left: 0;
     right: 0;
     background:rgba(0, 0, 0, 0.18);
     */
}
 #sec_contact.active .fk_header{
    /* animation: fadeIn 2.0s;
     min-height: 86px;
     position: fixed;
     z-index: 190;
     top: 0;
     left: 0;
     right: 0;
     background:rgba(0, 0, 0, 0.42);
     */
}
 #sec_contact h1{
     color: #4c4c4c;
     font-size: 67px;
     padding: 35px 0 19px 0;
}
 #sec_contact p{
     font-size: 16px;
     margin: 14px 0 0;
     color: #4c4c4c;
}
 #sec_contact h4{
     margin: 50px 0 20px;
     color:#222222;
     font-size: 17px;
     font-weight: bold;
}
 #sec_contact .line {
     margin: 23px 0;
     padding: 0.5px 0;
     width: 60px;
     border-radius: 2px;
     background: rgba(0, 0, 0, 0.58);
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 #sec_contact .qrcode{
     display: block;
     max-width: 100%;
     margin-top: 25px;
 }
 #sec_contact ul{
     font-size: 14px;
    /* font-weight: lighter;
     */
     list-style-type: none;
     padding: 6px 0 30px 0;
}
 #sec_contact li{
     line-height: 2.6;
}
 #sec_contact li .icon{
     width:18px;
     margin-right:12px;
}
 #sec_contact li span{
     margin-left:12px;
     color:black;
     font-weight:500;
}
 #sec_contact .form-panel{
     margin-top: 167px;
}
 #sec_contact label{
     color:#222222;
     font-size:14px;
}
 textarea.form-control {
     height: 150px;
}
 #sec_footer {
}
 .yqlj h4{
     margin: 0 0 12px;
     font-size: 17px;
     color:#000000;
     font-weight:bold;
}
 .yqlj a{
     font-size: 14px;
     display: block;
     color: #9a9a9a;
     margin-bottom: 5px;
}
 .yqlj a:hover {
     color: #d71f19;
}
 .yqlj .line {
     margin: 14px 0;
     padding: 1px 0;
     width: 38px;
     border-radius: 2px;
     background: rgb(215, 31, 25);
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 #sec_footer p.copyright{
     font-weight: 600;
     font-size: 15px;
     color: #717172;
     margin-top: 19%;
}
 .product_sec .row{
     margin:0;
}
 .product_sec .col-md-7{
     position:relative;
 }
 .product_sec .greenlogo{
     position:absolute;
     bottom: 45px;
     right: 39px;
 }
.product_sec img{
    width: 129px;
}
 .product_sec .col-md-5{
     padding:0;
}
 .product_sec .content{
     padding: 13vh 82px 0;
     width: 100%;
     margin-right: 0px;
     height: 100vh;
     background: rgba(255, 255, 255, 0.95);
}
 .product_sec .pro_title{
     color: #cb1c1c;
     font-size: 23px;
     font-weight: normal;
     margin: 0 0 21px;
}
 .pro_menu{
     transition: .2s;
     -webkit-transition: 0.2s;
     z-index: 800;
     position: fixed;
     top: 19vh;
     left: 5vw;
}
 .pro_menu ul{
     list-style-type:none;
}
 .pro_menu li{
     margin: 0 0 7px;
     color:white;
}
 .pro_menu li a{
     min-width: 203px;
     font-size: 15px;
     transition: .2s;
     -webkit-transition: 0.2s;
     transition: 0.2s;
     color:white;
     cursor:pointer;
     display:block;
     padding: 6px 16px 5px 16px;
     background-color: rgba(230, 0, 18, 0.5);
}
 .pro_menu li a:hover{
     background-color:rgb(230, 0, 18);
}
 .pro_menu li.active a{
     background-color:rgb(230, 0, 18);
}
 .pro_sub{
     margin: 0 0 0.4em;
     color: black;
     font-size: 1.7em;
}
 .pro_list{
     border-bottom: 1px solid rgba(23, 23, 23, 0.75);
     margin: 0 0 3em 0px;
     padding: 0 0 1.5em 20px;
}
 .pro_list li{
     line-height: 27px;
     color: #444444;
     font-size: 0.9em;
}
 .pro_desc{
     line-height: 25px;
     font-size: 15px;
     color: #444444;
     font-style: italic;
}
 .value_sec .row{
     margin:0;
}
 .value_sec .col-md-5{
     padding:0;
}
 .value_sec .content{
     padding: 19vh 5vw;
     width: 100%;
     margin-right: 0px;
     height: 100vh;
     background: rgba(255, 255, 255, 0.95);
}

 .value_sec#val_four .content{
     padding: 22vh 130px;
}
 .value_sec .val_sub{
     margin: 0 0 1.2em;
     color: black;
     font-size: 2.1em;
}
 .val_desc{
     line-height: 2vw;
     font-size:15px;
     font-size: 1.05vw;
     color: #444444;
}
 .value_sec .red_word{
     margin-top: 38vh;
     font-size: 74px;
     color:#ca0202;
     font-weight: 900;
     text-align: center;
     line-height: 80px;
}
 .value_sec .arrow_down_red{
     text-align: center;
     right: 0;
     left: 0;
     position:absolute;
     bottom: 46px;
}
 .iso_img{
     max-width: 420px;
     width: 100%;
     margin:25px 0 0;
}
 .value_sec .arrow_down_red img{
    width: 5vw;
}
 .value_sec .steps{
}
 .value_sec .step_panel{
     position: relative;
}
 .value_sec .step{
     display: flex;
     flex-direction: column;
    /* align-items: center;
     */
     justify-content:center;
     min-height: 88px;
     font-weight: 600;
     text-align: center;
     vertical-align: middle;
     color: white;
     background-color: #ca2d34;
     -webkit-transition: 0.3s;
     transition: 0.3s;
}
 .value_sec .step:hover{
     background-color:black;
}
 .value_sec .step_arrow{
     text-align: center;
     margin: 25px 0;
}
 .step_arrow2{
     position: absolute;
     left: -73px;
     top: -115px;
}
 .value_sec .step_arrow img{
}
.intro_sec .row{
     margin:0;
}
 .intro_sec .col-md-5{
     padding:0;
}
 .intro_sec .content{
     padding: 19vh 5vw;
     width: 100%;
     margin-right: 0px;
     height: 100vh;
     background: rgba(255, 255, 255, 0.95);
} 
.intro_sec .int_sub{
     margin: 0 0 8vh;
    color: black;
    font-size: 2.5vw;
}
 .int_desc{
     line-height: 2vw;
     font-size: 15px;
     font-size: 1.05vw;
     color: #444444;
}
 .intro_sec .red_word{
     margin-top: 38vh;
     font-size: 74px;
     color:#ca0202;
     font-weight: 900;
     text-align: center;
     line-height: 80px;
}
 .intro_sec .arrow_down_red{

     text-align: center;
     right: 0;
     left: 0;
     position:absolute;
     bottom: 2vh;
}
 .intro_sec .arrow_down_red img{
     width:5vw;
 }
.sheet_img{
      width: 100vh;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
}
 .support_sec .content{
     color: white;
     padding: 25vh 94px;
     width: 100%;
     margin-right: 0px;
     height: 100vh;
} 
.support_sec .sup_sub{
     margin: 0 0 18px;
     font-size: 32px;
}
.table.download_tb td, .table th{
  border:none;
  padding: .95rem;
}
.table.download_tb th{
    font-weight: 800;
    text-align:center;
}
.table.download_tb td{
  min-width: 126px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.table.download_tb img{
  /* display: block; */
  width:20px;
}
.table td.last{
  padding: 9px 0;
  text-align: right;
  border:none;
  font-size: 14px;
}




 .news_menu{
     background: #f3f4f5;
     transition: .2s;
     -webkit-transition: 0.2s;
     z-index: 800;
     position: fixed;
     top: 12vh;
     left: 5vw;
}
 .news_menu ul{
     list-style-type:none;
}
 .news_menu li{
     margin: 0;
     /* color:white; */
}
 .news_menu li a{
     border-bottom: 1px solid #cccccc;
     max-width: 257px;
     font-size: 15px;
     transition: .2s;
     -webkit-transition: 0.2s;
     transition: 0.2s;
     color: #656565;
     cursor:pointer;
     display:block;
     padding: 0.8vh 39px;
}
.news_menu li a.active {
     font-weight: bold;
     color: black;
}
 .news_menu li a:hover{
    color:white;
    background:#d72019;
}
.news_sec:nth-of-type(1) .content{
     margin-top: 0px;
}
.news_sec .content{

background: rgba(255, 255, 255, 0.8);

/* margin-top: 120px; */

min-height: 377px;

padding: 87px 50px 15px;
}
.news_sec .content a{
     color:#cb1c1c;
}
.news_sec .content img{
     margin: 12px 0 0;
     max-width: 100%;
     display: block;
}
.news_sec .content .date{
     margin: 0 0 10px 0;
     padding: 0 0 10px 0;
     text-align: right;
}
.news_title {
    color: #cb1c1c;
    font-size: 23px;
    font-weight: normal;
    margin: 0 0 1px;
}

.lb_d {
    border-bottom: 1px dashed #e2e2e2;
}


 .totop{
     padding: 10px;
     border-radius: 50%;
     position:fixed;
     bottom: 17px;
     right: 16px;
     width: 43px;
     height: 43px;
     z-index:1500;
     background: rgba(0, 0, 0, 0.12);
     -webkit-transition: 0.2s;
     transition: 0.2s;
     animation: fadeIn 2.0s;

}
 .totop img{
     opacity: .7;
     display:block;
     width: 24px;
}
 .totop:hover{
     cursor:pointer;
     background:black;
}
 .totop:hover img{
     opacity:1;
}
 .fp-viewing-home .totop{
     display: none;
}
/* fadeIn */
 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-moz-keyframes fadeInUp {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @-o-keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 @keyframes fadeIn {
     0% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
/* .animate.fadeIn {
     opacity: 1;
     -webkit-animation-name: fadeIn;
     -moz-animation-name: fadeIn;
     -o-animation-name: fadeIn;
     animation-name: fadeIn;
}
 */
/*blink*/
 @keyframes blinker {
     50% {
         opacity: 0;
    }
}
 @media (min-width: 1500px){
     .container {
         max-width: 1400px;
    }
}
 .arrow-down {
     width: 0;
     height: 0;
     border-left: 12px solid transparent!important;
     border-right: 12px solid transparent!important;
     border-bottom: 12px solid #f1f1f1;
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
}
 .arrow-up {
     width: 0;
     height: 0;
     border-left: 12px solid transparent!important;
     border-right: 12px solid transparent!important;
     border-top: 12px solid #f1f1f1;
     -webkit-transition: all 300ms ease;
     transition: all 300ms ease;
}
 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{
     left: 25px;
     background-image: url(../images/arrow.png);
}
 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{
     background-image: url(../images/arrow_right.png);
     right: 52px;
}
 .swiper-button-next, .swiper-button-prev{
     z-index: 150;
     width: 56px;
     background-color: rgba(34, 34, 34, 0.81);
     background-size: 34px 34px;
     height: 56px;
     border-radius: 1px;
          -webkit-transition: all 500ms ease;
     transition: all 500ms ease;

}
 .swiper-button-next:hover, .swiper-button-prev:hover{
     background-color:#e60012;
 }
 .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
     pointer-events:initial;
}
 body.single{
     background-color: #eeeeee;
}
 body.single div.burger span{
     color:#c29859;
}
 body.single div.x, body.single div.y, body.single div.z{
     background:#c29859;
}
 body.single .trans_navbar{
     background: rgba(255, 255, 255, 0.49);
}
 .single-title{
     background-position-y: 27%;
     background-size: cover;
     background-image: url(../images/singlebanner.jpg);
     background-color: #e5e5e5;
     padding: 190px 0 110px;
     text-align: center;
}
 .single-title h1{
     font-size: 30px;
     color: #333;
     padding-bottom: 20px;
     font-weight: normal;
}
 .single-title p{
     font-size: 14px;
     color: #909090;
}
 .single-main .white-panel{
    /* max-width: 1170px;
     */
     padding: 10px;
    /* width: 80%;
     */
     background-color: #fff;
     position: relative;
     top: -50px;
}
 .page5-content{
     border: 1px solid #dbd5d8;
}
 .single-main .page5-content{
     font-size: 15px;
     padding: 50px 59px;
     color: #333;
     line-height: 31px;
}
 .single-main .white-panel img{
     margin: 28px auto;
     display:block;
     max-width: 870px;
     max-width: 100%;
}
 .article-foot{
     padding: 15px 0;
     margin-top: 50px;
     border-top: 1px dashed #ededed;
}
 .article-foot div{
     position:relative;
}
 .article-foot a{
     color:#9e9e9e;
}
 .article-foot a:hover{
    /* font-weight: bold;
     */
     color:black;
}
 .article-foot .prev:hover:after, .article-foot .next:hover:after {
     content:'';
     width: 13px;
     background-size: contain;
     height: 11px;
     position:absolute;
     top: 13px;
     left: -23px;
     opacity:.9;
     background-repeat: no-repeat;
     background-image: url(../images/enter.png);
}
 .article-main{
     position: relative;
     top: -50px;
}
 .article-nav-pl{
     padding: 10px;
}
 .article-nav{
     background:white;
     padding:15px 15px;
}
 .article-nav-pl .page5-content{
     padding: 20px 15px;
     display: flex;
}
 .article-nav-pl .p-title{
     padding-right: 30px;
     border-right: 2px solid #dadada;
}
 .article-nav-pl .links{
}
 .article-nav-pl .links a{
     display: inline-block;
     padding: 5px 0;
     cursor: pointer;
     margin: 0 12px;
}
 .article-nav-pl .links a.active{
     font-weight: bold;
     color: #c29859;
     border-bottom: 1px solid rgba(194, 152, 89, 0.43);
}
 .articles-banner{
     height: 508px;
     background-repeat: no-repeat;
     background-image: url(../images/articlesbanner.jpg);
     background-size: cover;
     background-position: 50%;
}
 .articles-list .fl-box{
     margin: 0 0 15px;
     height:20vh;
     background: #f6f6f6;
}
 .articles-list .fl-box:hover{
     background:white;
    /* cursor:pointer;
     */
}
 .articles-list .fl-box:hover .img-pl img {
     transform: scale(1.04);
}
 .articles-list .img-pl{
     height:100%;
     width: 350px;
}
 .articles-list .fl-bd{
     padding: 30px 20px 15px 35px;
}
 .articles-list .h5{
     color: #3f3f3f;
     font-weight:bold;
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
}
 .articles-list .fl-box .h5:hover{
     cursor:pointer;
}
 .articles-list .date{
     line-height: 2.8;
     font-size: 13px;
     color:#aaaaaa;
     font-weight:200;
}
 .articles-list .detail{
     font-size: 15px;
     margin: 17px 0 15px;
}
 .articles-list .more {
     font-size: 14px;
     color: grey;
     letter-spacing: 2px;
}
 .page-item .page-link{
     border-radius: 0!important;
     padding: 0.6rem .9rem;
     margin-left: -1px;
     line-height: 1.25;
     color: #151515;
     background-color: rgba(255, 255, 255, 0.86);
     border: none;
}
 .page-item{
    font-size: 14px;
    margin: 0 6px;
}
 .page-item.disabled .page-link{
     color:grey;
     background-color: rgba(255, 255, 255, 0.7);
}
 .page-link:hover{
     -webkit-transition: 0.3s;
     transition: 0.3s;
     background: #363636;
     color:white;
}
 .pagination{
     margin:12px 0;
}