@charset "utf-8"; 

body{padding-top: 80px; color: #898d9f; overflow-x: hidden;}
body.index{padding-top: 0;}
a, a:visited {color: #5b5b5b; text-decoration: none;}
a:hover, .btn-link:hover{color: rgb(72, 86, 161); color: darkslategray}
a:hover, a:focus{ text-decoration: none; color: darkorange;}

.text-theme{ color: darkslategray !important;}
.text-theme:hover{ color: darkorange !important;}

.border-theme{ border-color:darkslategray !important;}

.btn-link{color: #333; line-height: 32px; padding: 0;}
.text-danger{ color: #ed5466 !important;}
.text-danger:hover{ color: #843524 !important;}
.text-orange{ color: #ff7f00 !important;}
.text-orange:hover{ color: #f60 !important;}
.text-teal{ color: #2298a2 !important;}
.text-teal:hover{ color: #256e82 !important;}

.bg-theme, .bg-theme:visited{ background-color: darkslategray !important; color: #fff;}
a.bg-theme:hover, button.bg-theme:hover{background-color: darkslategray !important; color: #fff;}
.bg-theme-dark{ background-color: darkslategray; color: #fff;}
.bg-theme-light{ background-color: darkorange;}

.btn-theme{ background-color: darkslategray; color: #fff; border-color: darkslategray;}
.btn-theme:hover, .btn-theme:focus{background-color: darkslategray; border-color: darkslategray; color: #fff;}

.dynamic-bg::before, .dynamic-bg::after{ background:darkslategray;}


/* error */
.content-box.error-group{ padding-top: 120px; background:#fff url(../image/error_bg.jpg) top center no-repeat; text-align: center;}
.error-group .error-code{ color: #ff7f00; font-size: 36px; line-height: 40px; font-weight: bold; font-family:Arial,Helvetica,sans-serif; text-shadow: 0 1px 0 #fff; text-indent: 10px;}
.error-group .error-text{color: #333; font-size: 24px; line-height: 30px; font-weight: bold; margin: 5px 0 50px; text-shadow: 0 1px 0 #fff; font-family:Arial,Helvetica,sans-serif;}
.error-group .error-info{ font-weight:bold; line-height: 24px; font-family:Arial,Helvetica,sans-serif;}

/* success */
.content-box.success-group{text-align: center; padding:0 0 30px;}
.content-box.success-group img{ max-width: 200px;}
.success-group .success-title{color: #2298a2; font-size: 22px; line-height: 30px; font-weight: bold; margin: 10px 0; text-shadow: 0 1px 0 #fff; font-family:Arial,Helvetica,sans-serif;}
.success-group .success-info{ font-size: 16px;  font-weight:bold; line-height: 30px; font-family:Arial,Helvetica,sans-serif;}

/* tab */
.nav-tabs>li>a{color: #333;}
.nav-tabs>li>a:hover, .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{color: darkslategray;}
.nav-tabs>li.active .badge{ background-color: darkorange;}


/*header*/
.header { position:fixed; left: 0; top: 0; width: 100%; height: 80px; z-index: 3; transition: all 0.3s;}
.header{background-color: rgba(255,255,255, 0.9); backdrop-filter: blur(5px);}
.header .menuContainer{ position: relative; z-index: 5; display: flex;  justify-content: space-between; align-items: center; height: 100%;}

.header.fixed-top{ z-index: 10; box-shadow: 0 0px 15px #ddd;}
.header.fixed-top .fixed-hidden{ display: none;}


.logo-group{ height: 40px; display: block; margin-right: 20px; display: flex; align-items: center;}
.logo-group img{ max-width: 100%; max-height: 100%; vertical-align: middle;}

.header .menu{ height: 40px; flex: 1;}
.header .sf-menu li{padding: 0 10px;}
.header .sf-menu li a, .header .sf-menu li a:focus, .header .sf-menu li a:visited { font-size: 15px; line-height: 30px; padding: 3px 0 4px; transition: all 0.3s ease 0s; position: relative;}
.header .sf-menu li.active a{ font-weight: bold; border-color: #fff;}
.header .sf-menu li a:hover, .header .sf-menu li a:visited, .header .sf-menu li a:focus{background-color: transparent;}
.header .sf-menu > li > a::before, .sf-menu li.sfHover>a::before{ content: ""; position: absolute; height: 2px; width: 0; left: 50%; bottom: 0; background-color: darkorange; transition: all 0.3s ease 0s;}
.header .sf-menu>li>a:hover::before, .header .sf-menu>li.sfHover>a::before{width:100%; left: 0;}
.sf-menu li.sfHover > a{color: darkorange;}
.sf-menu li.current > a, .sf-menu li.sfHover.current>a{font-weight: bold; color: #333;}
.sf-menu li.current > a::before{background-color: #333;}
.sf-menu li a.sf-with-ul { padding-right: 15px;}

.sf-menu li li, .sf-menu li.sfHover li{ clear:both; margin:0; height:auto; position: relative;}
.sf-menu li li a, .sf-menu li.sfHover li a, .sf-menu li.current li a, .sf-menu li.sfHover li.sfHover li a, .sf-menu li.sfHover li.sfHover li.sfHover li a{display:block;  text-align:left; font-size:14px; line-height:20px; padding:10px;}
.sf-menu li li a:hover, .sf-menu li li.sfHover > a{color: darkorange;}


.sf-sub-indicator {position:absolute; right:0; top:50%; transform: translateY(-50%); text-align:center; overflow:hidden; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; font-size:12px;}
.sf-sub-indicator:before{content: "\e259";}

.sf-menu li li{padding: 0 5px;}
.sf-menu li li a.sf-with-ul { padding-right: 10px;}
.sf-menu li li .sf-sub-indicator:before{content: "\e258";}
.sf-menu li ul{display: none;}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {left:0; top:100%; width: 220px; position: absolute; list-style: none; padding: 0; z-index:999;  background-color:#fff; box-shadow:0 0 15px rgba(0,0,0, 0.25)}
.sf-menu ul li.sfHover ul{ border: 0; padding-right: 150px; width: 300px;}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top:-999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:100%; top:0; border:0; padding-top:0; padding-left:1px;}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {top:-999em;}


.sf-menu .photo{ display: block; position: absolute; right: 10px; top: 10px; width: 120px; min-height: 80px; text-align: center;}
.sf-menu .photo img{max-width: 100%; max-height: 100%;}
.sf-menu .photo .text{line-height: 20px; text-align: center; margin-top: 10px; color: steelblue; font-size: 12px;}


.search-group{top: 100%; position: absolute; left: 0; width: 100%; display: none; background-color: rgba(255, 255, 255, 0.95);}
.search-group .search-wrap{padding-top: 25px; padding-bottom: 25px;}
.search-wrap .search-box{ position: relative; }
.search-wrap .search-box .search-input{ height: 50px;  padding: 5px 150px 5px 20px; line-height: 20px; font-size: 16px; background-color: #eee; width: 100%; border: 0;}
.search-wrap .search-box .search-input:focus{ outline: none; background-color: #fff; box-shadow: inset 0 0 10px rgba(0,0,0, 0.15)}
.search-wrap .search-box .img-file{ display: none;}
.search-wrap .search-box .imageico{ cursor: pointer; line-height: 40px; position: absolute; right: 120px; top: 0; width: 40px; line-height: 40px; font-size: 20px; color: #999; text-align: center;}
.search-wrap .search-box .imageico:hover{ color: darkorange;}
.search-wrap .search-box .btn-search{ width: 120px; height: 50px; border: 0; text-align: center; line-height: 50px; font-size: 18px; position: absolute; right: 0; top: 0; background-color: transparent; transition: all 0.3s ease 0s; color: #333}
.search-wrap .search-box .btn-search:hover{color: #fff; background-color: darkorange;}



.mobile-link{ margin: 0 0 0 10px; padding: 0; list-style: none; float: right;}
.mobile-link li{padding-left:20px; float: left;}
.mobile-link li.menuIcon{ display: none;}
.mobile-link li a{display: block; font-size: 24px; line-height: 40px; text-align: center; color: #fff;}

.mobile-link li.menuIcon a{ position:relative; color:#fff; width:40px; height:40px; text-align:center; display: block;}
.fixed-top .mobile-link li a{color: #333}
.mobile-link li.menuIcon span, .mobile-link li.menuIcon a::before, .mobile-link li.menuIcon a::after{left:4px; position:absolute;  height:4px; width:32px; border-radius:2px; background-color:#fff; transition:all 0.5s ease 0s;}
.fixed-top .mobile-link li.menuIcon span, .fixed-top .mobile-link li.menuIcon a::before, .fixed-top .mobile-link li.menuIcon a::after{background-color: #333;}
.fixed-top .mobile-link li.menuIcon a:hover span, .fixed-top .mobile-link li.menuIcon a:hover::before, .fixed-top .mobile-link li.menuIcon a:hover::after{background-color: darkslategray}
.header.fixed-top .mobile-link li a:hover{color: darkslategray}
.mobile-link li.menuIcon span{ top:18px;}
.mobile-link li.menuIcon a::before{ content:""; top:8px; }
.mobile-link li.menuIcon a::after{ content:""; top:28px; }

.mobile-link li.menuIcon.opened span{ left:50%; width:0;}
.mobile-link li.menuIcon.opened a::before{ transform:rotate(45deg); top: 18px;}
.mobile-link li.menuIcon.opened a::after{transform:rotate(-45deg);  top: 18px;}



.topmenu .navbar-nav .open > a, .topmenu .navbar-nav .open > a:focus, .topmenu .navbar-nav .open > a:hover{ background-color: #fff; z-index: 1001; border-color: #d9d9d9; }
.topmenu .navbar-nav .dropdown .caret{ position: relative; transition: all 0.3s ease 0s;}
.topmenu .navbar-nav .dropdown.open .caret{ -webkit-transform: rotate(90deg); transform: rotate(180deg);}

.topmenu .navbar-nav .dropdown-menu{ border-top: 0;  min-width: 100%; padding: 5px;}
.topmenu .navbar-nav .dropdown-menu > li{ border-bottom: 1px solid #e0e0e0;}
.topmenu .navbar-nav .dropdown-menu > li:last-child{ border: 0;}
.topmenu .navbar-nav .dropdown-menu > li > a{ font-size: 12px; text-align: center; padding: 3px 10px; line-height: 20px; color: #666;}
.topmenu .navbar-nav .dropdown-menu > li > a:hover{color: #333; text-decoration: underline;}


/* sidemenu */
.aside-menu{ position: fixed; top: 0; right: 0; width: 40px;height: 100%; background-color: #fff; z-index: 99;}
.aside-menu > ul{ position: relative; top: 50%; transform:translateY(-50%); padding: 0; list-style: none;}
.aside-menu > ul > li{ display: block; position: relative;}
.aside-menu > ul > li + li{ border-top: 1px solid #e3e3e3;}
.aside-menu > ul > li > a{ display: block; text-align: center; line-height: 16px; padding: 15px 0; background-color: #fff; position: relative; z-index: 1;}
.aside-menu li a .icon{ display: block; width: 26px; height: 26px; margin: 0 auto 5px; background-image: url(../image/sidebar-icons.png); background-repeat: no-repeat;}
.aside-menu li ul{ visibility: hidden; opacity: 0; top: 0; list-style: none; width: 180px; padding: 0; right: -200px; background-color: #fff; border-radius: 5px 0 0 5px; box-shadow: 0 0 5px rgba(0,0,0,0.15);  position: absolute; transition:all 0.3s;  border-right: 1px solid #e3e3e3;}
.aside-menu li:hover ul{ visibility: visible; opacity: 1;  right: 40px;}
.aside-menu li li{ line-height: 20px; padding: 10px;}
.aside-menu li + li{ border-top:1px solid #e3e3e3;}

.aside-menu li.contact .icon{ background-position: -52px 0;}
.aside-menu li.contact ul{ width: 280px; text-align: center;}
.aside-menu li.contact .phone{ display: block; line-height: 60px; margin-bottom: 5px; font-weight: bold; font-size: 30px; font-family:Arial,Helvetica,sans-serif;}
.aside-menu li.qq .icon{ background-position: 0 0;}
.aside-menu li.qq li img{ width: 24px;}
.aside-menu li.mail .icon{ background-position:-26px 0;}
.aside-menu li.mail li strong{ display: block;}
.aside-menu li.qr .icon{ background-position: -78px 0;}
.aside-menu li.qr li img{ width: 100%;}
.aside-menu li.gotop .icon{ background-position: -104px 0;}


.aside-menu li.sale .icon{ background-position: -130px 0; height: 48px;}
.aside-menu li.sale ul{ width: 250px; overflow: hidden;}
.aside-menu li.sale li{ padding: 0;}
.aside-menu li.sale li img{ width: 100%;}

.aside-menu li.favorite .icon{ background-position: -156px 0;}

/* footer */
.footer{ padding-top: 20px; padding-bottom: 30px; background-color: #ebebeb; color:#5b5b5b;}
.footer-nav{ padding: 30px 0 0 0;  list-style: none; position: relative; min-height: 160px;}
.footer a {color: #333; text-decoration: none;}
.footer a:hover{color: darkorange; text-decoration: underline;}

.footer-nav .qr-group{ position: absolute; right: 0; top: 0; width: 140px; text-align: center;}
.footer-nav .qr-group img{ width: 100%;}
.footer-nav .qr-group .text-theme{ display: block; font-weight: bold; font-weight: bold; font-size: 15px;}

.gotop{ z-index:9; width:60px; height:60px; text-align: center; display:block; text-align:center;position:fixed; right:20px; bottom:100px; transition:all 0.5s ease 0s; opacity: 0.65;}
.gotop:hover{opacity:1;}
.gotop .arrow{line-height: 60px; color: #333; font-size: 26px; background-color: #fff; display: block; border-radius: 50%;}
.gotop canvas{position: absolute; left: -4px; top: -3px;}

/*.footer-nav */
.footer-nav .links{ margin: 0; display: flex;flex-wrap: wrap; justify-content: space-between;}
.footer-nav .links ul{ padding-right: 20px; padding-left: 0; min-width: 200px; margin: 0; list-style: none;}
.footer-nav li.title { position: relative; margin-bottom: 10px; border-width: 0 0 1px; border-style: solid; border-color: #898d9f;}
.footer-nav li.title h4{  line-height: 40px; font-size: 16px; font-weight: bold; letter-spacing: 1px;  position: relative; z-index: 1; color: #333; margin: 0;}
.footer-nav li{ line-height: 30px;}
.footer-nav li img{ height: 30px; padding-right: 5px;}


.link-item .item{ line-height: 30px; padding: 0 30px 0 20px; font-size: 16px; display: inline-block; position: relative;}
.link-item .item::after{ content: "|"; position: absolute; right: 0; top: 0; color: rgba(255, 255, 255, 0.2);}
.link-item .item:first-child{ padding-left: 0;}
.link-item .item:last-child::after{ display: none;}

.copyright{ line-height: 20px;  padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2); margin-top: 30px;}

.varchar{ text-align: right;}
.varchar img{ vertical-align: middle; padding-right: 5px;}


/*================== banner ================== */
.banner-content{background-color: #fff;}
/*banner*/
.main-banner{ position:relative;  background: #eee url(../image/preload.gif) center center no-repeat; overflow: hidden;}
.main-banner .owl-item{float: left; overflow: hidden;}
.main-banner .item{position: relative;}
.main-banner.animationScale .item{-webkit-animation: loadScale 6s linear infinite;-moz-animation: loadScale 6s linear infinite;  animation: loadScale 6s linear infinite;}
.main-banner .item .photo, .main-banner .item .photo img{ width: 100%;}
.main-banner .item .container{position: relative; height: 100%;}
.main-banner .item .content{position: absolute; left: 0; top:0;  width: 100%; height: 100%;}
.main-banner .item .info{ color: #fff; font-size: 20px; line-height: 30px; padding: 20px; background-color: rgba(0,0,0,0.35); position: relative; top: 50%; transform:translateY(-50%); width: 60%;}
.main-banner .owl-controls{ display: block;}
.owl-pagination { opacity: 1; display: inline-block;}
.owl-page span {display: block; width: 20px; height: 20px; border-radius: 50%; margin: 0px 5px; background: darkslategray; border: 2px solid #fff;}
.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{background-color: darkorange}

@-webkit-keyframes loadScale{
  0%{
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.1, 1.1);
    -webkit-transition: transform 6s ease-out, opacity 1s ease 0.3s;
    transition: transform 6s ease-out, opacity 1s ease 0.3s;
  }
  50%{
    -ms-transform: scale(1, 1) rotate(.001deg);
    -webkit-transform: scale(1, 1) rotate(.001deg);
    transform: scale(1, 1) rotate(.001deg);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
  100% {
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -webkit-transition: transform 6s ease-out, opacity 1s ease 0.3s;
    transition: transform 6s ease-out, opacity 1s ease 0.3s;
  }
}
@-moz-keyframes loadScale{
  0% {
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -webkit-transition: transform 6s ease-out, opacity 1s ease 0.3s;
    transition: transform 6s ease-out, opacity 1s ease 0.3s;
  }

  50% {
    -ms-transform: scale(1, 1) rotate(.001deg);
    -webkit-transform: scale(1, 1) rotate(.001deg);
    transform: scale(1, 1) rotate(.001deg);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  100% {
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -webkit-transition: transform 6s ease-out, opacity 1s ease 0.3s;
    transition: transform 6s ease-out, opacity 1s ease 0.3s;
  }
}
@keyframes loadScale{
  0% {
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -webkit-transition: transform 6s ease-out, opacity 1s ease 0.3s;
    transition: transform 6s ease-out, opacity 1s ease 0.3s;
  }

  50% {
    -ms-transform: scale(1, 1) rotate(.001deg);
    -webkit-transform: scale(1, 1) rotate(.001deg);
    transform: scale(1, 1) rotate(.001deg);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  100% {
    -ms-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -webkit-transition: transform 6s ease-out, opacity 1s ease 0.3s;
    transition: transform 6s ease-out, opacity 1s ease 0.3s;
  }
}
.checkbox label.control-label, .radio label.control-label{color: #7a7a7a; font-weight: bold; padding-left:0; margin-right: 10px;}





/* ================== index======================== */
.contentGroup{ padding: 50px 0;}
.contentGroup .largePhoto img{max-width: 100%; box-shadow: 0 0 25px 0 #D9DDE9;}
.contentGroup.gray-bg{ background-color: #F7F7F7; box-shadow: inset 0 2px 15px 0 rgba(0, 39, 102, 0.1);}
.contentGroup ul{padding: 0; margin: 0; list-style: none;}
.contentGroup .groupTitle{color: #333333; display: flex; justify-content: space-between;  margin-bottom: 20px;}
.contentGroup .groupTitle h4{font-size: 30px; line-height: 30px; font-weight: bold; margin: 0;}
.contentGroup .groupTitle h4 a{color: #333333;}
.contentGroup .groupTitle .btn-link{font-size: 16px; font-weight: bold; position: relative; overflow: hidden; transition: all 0.3s;}
.contentGroup .groupTitle .btn-link span{ position: absolute; right: -20px; top: 8px; transition: all 0.3s;}
.contentGroup .groupTitle .btn-link:hover{padding-right: 40px;}
.contentGroup .groupTitle .btn-link:hover span{right: 12px;}

.contentGroup .groupTitle .searchGroup{ display: flex;}
.contentGroup .groupTitle .searchGroup .btnGroup + .btnGroup{ margin-left: 20px;}
.contentGroup .groupTitle .searchGroup .form-control, .contentGroup .groupTitle .searchGroup .btn{background-color: #fff; border: 0;}
.contentGroup .groupTitle .searchGroup input.form-control{border-radius: 17px 0 0 17px;}
.contentGroup .groupTitle .searchGroup select.form-control{border-radius: 17px; min-width: 150px;}
.contentGroup .groupTitle .searchGroup .input-group-btn .btn{border-radius: 0 50% 50% 0;}

.contentGroup .subTitle{ display: block; font-size: 24px; margin: 10px 0; font-weight: bold;}
.contentGroup .subTitle, .contentGroup .groupTitle h4 a:hover{color: darkslategray;}
.contentGroup .info{color: #999999; font-size: 16px; line-height: 25px; letter-spacing: 1px;}
.contentGroup .bottonGroup{ margin-top: 30px;}
.contentGroup .bottonGroup .btn{font-weight: bold;}

.contentGroup .photo{ display: flex; position: relative; justify-content: center; align-items: center;}
.contentGroup .photo::before{content: ''; display: block;  padding-bottom: 100%;}
.contentGroup .photo img{max-width: 100%; max-height: 100%;}



.itemList ul{ margin: -15px; padding: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
.itemList >ul>li{padding: 15px; box-sizing: border-box; flex: 1; }
.column-6 >ul>li{flex: 0 0 16.6%; width: 16.6%;}
.column-5 >ul>li{flex: 0 0 20%; width: 20%;}
.column-4 >ul>li{flex: 0 0 25%; width: 25%;}
.column-3 >ul>li{flex: 0 0 33.3%; width: 33.3%;}
.column-2 >ul>li{flex: 0 0 50%;width: 50%;}
.column-1 >ul>li{flex: 0 0 100%;width: 100%;}



.itemList.prductList >ul{margin:-20px -100px;}
.itemList.prductList >ul>li{padding:20px 100px;}

.prductList li .photo{overflow: hidden; background-color: #fff;}
.prductList li .photo img{transform: scale(1.05, 1.05);}
.prductList li .photo:hover img {-webkit-animation: loadScale 4s linear infinite;-moz-animation: loadScale 4s linear infinite;  animation: loadScale 4s linear infinite;}
.prductList li .photo .mask{position: absolute; left: 0; bottom: 0; display: block; text-align: center; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 16px; line-height: 30px; padding: 0 5px; width: 100%;}
.prductList li .photo:hover .mask{color: darkorange;}
.prductList li .text{overflow: hidden; margin-top: 20px;}
.prductList li .title{font-size: 24px; color: darkorange; display: block; line-height: 30px; padding-bottom: 10px; border-bottom: 1px solid #dee2e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;}
.prductList li .title:hover{color: #333;}
.prductList li .info{ margin: 0; line-height: 24px; margin-top: 10px; color: #333;}
.prductList li .date{color: forestgreen;}



.videoGroup{  width: 100%; margin: 0 auto 40px; display: flex; justify-content: space-between; background-color: #000;}
.videoGroup iframe{width: 640px; height: 360px;}
.videoGroup .sideText{ flex: 1; display: flex; align-items: center; font-size: 30px; color: #da3b26; line-height: 50px; justify-content: center; text-align: center; font-weight: bold;}





/* ================== inner page ======================== */
.subMenu{ height: 60px; z-index: 5; position: relative;  margin-bottom: 30px; }
.subMenu .text{display: none;}
.subMenu ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: nowrap; justify-content: center;}
.subMenu ul li{ position: relative; padding: 0 10px;}
.subMenu ul li a, .subMenu ul li a:focus, .subMenu ul li a:visited {line-height: 30px; padding: 7px 20px 5px; transition: all 0.3s ease 0s; display: block; border-width:2px; border-style: solid; border-color:#eee; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #666;}
.subMenu ul li:hover > a{background-color: #f8f8f8; border-color: darkorange; color: darkorange; box-shadow:  0 0 10px rgba(0,0,0, .25);}
.subMenu ul li.active > a{font-weight: bold; border-color: darkslategray; color: darkslategray; background-color: #fff;}
.subMenu ul li ul{display: none; width: 100%; position: absolute; left: 0; top: 100%; background-color: #ebebeb; width: 200px;}
.subMenu ul li:has(ul) > a::after{ margin-left: 5px; font-family: 'Glyphicons Halflings'; font-style: normal;  font-weight: 400; line-height: 1; font-size: 12px;content: "\e259";}

.subMenu ul li:hover ul{display: block;}
.subMenu ul li li{display: block;}
.subMenu ul li li a{padding: 8px 15px 7px; white-space: inherit; line-height: 20px; font-size: 14px; display: block;}


.dataList ul{ margin: 0; padding: 0; list-style: none;}
.dataList li + li{ margin-top: 20px; padding-top: 20px; border-top: 1px solid #e0e0e0;}
.dataList li .item{display: flex; align-items: flex-start;}
.dataList li .item .photo{width: 30%; height: auto; text-align: center;}
.dataList li .item .text{ flex: 1; overflow: hidden; }
.dataList li .item .text + .photo, .dataList li .item .photo + .text{ margin-left: 30px;}
.dataList li .item .title{font-size: 20px; line-height: 30px; font-weight: bold; overflow: hidden; color: #333;}
.dataList li .item .date{color: #888888; line-height: 20px; display: block; margin: 10px 0; font-size: 15px;}
.dataList li .item .info{ font-size: 16px; margin:20px 0 0; line-height: 24px; }


.contentGroup.gageGroup{padding-top: 30px;}
.contentGroup.gageGroup .groupTitle{margin-bottom: 40px;}
.contentGroup.gageGroup .groupTitle h4{ padding-bottom: 25px; position: relative;}
.contentGroup.gageGroup .groupTitle h4:after { display: block; content: "";  width: 200px; height: 1px; position: absolute; left: 30px; bottom: 0; background: #c8c8c8;}
.contentGroup.gageGroup .groupTitle h4::before { display: block; content: ""; width: 2px; height: 15px; position: absolute; left: 0; bottom: -7px;background: darkslategray;}

.staffList li .item{display: block; position: relative; background-color: #f8f8f8; transition: all 0.3s; overflow: hidden; padding: 0 0 50px; border: 1px solid #eee; border-radius: 10px;}
.staffList li .item::before{content: ""; width: 100%; height: 100%; left: 0; top: 100%;  position:absolute; background: linear-gradient(to top, rgb(26 65 100 / 15%) 0%, transparent 70%); transition: all 0.5s;}
.staffList li .item .photo{width: 80%; margin:0 auto; position: relative; z-index: 1; transition: all 0.3s;}
.staffList li .item .text{  display: block; padding: 50px 20px; position: relative; z-index: 1;}
.staffList li .item .date{font-weight: bold; margin:5px 0 0; line-height: 20px; display: block; color: forestgreen;}
.staffList li .item .title{white-space: nowrap; text-overflow: ellipsis; font-size: 20px; line-height: 30px; font-weight: bold; overflow: hidden; color: #333; text-align: center;}
.staffList li .item .info{ font-size: 16px; margin:10px 0 0; line-height: 25px;  height: 50px; overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.staffList li .item:hover{box-shadow: 0 0 20px #dcdcdc; border-color: #fff;}
.staffList li .item:hover .title{color: darkorange}
.staffList li .item:hover::before{top: 0;}
.staffList li .item:hover .photo{ transform: scale(1.2);}

.staffList.labList li .photo{ padding-bottom: 100%; height: 0; display: block;}
.staffList.labList li .photo::before{display: none;}
.staffList.labList li .photo img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}


.staffList.showroomList li .item{ background-color: transparent; border: 0;  overflow: hidden; border-radius: 0;}
.staffList.showroomList li .item::before{display: none;}
.staffList.showroomList li .item .photo{width: 100%; background-color: #f8f8f8; overflow: hidden;}
.staffList.showroomList li .item .text{padding: 20px 0;}
.staffList.showroomList li .item .photo img{transition: all 0.5s;}
.staffList.showroomList li .item:hover{box-shadow:none; }
.staffList.showroomList li .item:hover .photo{transform: scale(1);}
.staffList.showroomList li .item:hover .photo img{left: 60%; top: 60%;  transform: scale(1.2) translate(-50%, -50%);}


.researchList ul{padding: 0; margin: 0; list-style: none;}
.researchList li{display: flex; justify-content: space-between; flex-wrap: wrap;}
.researchList li  + li{margin-top: 20px;}
.researchList .left{ width: 35%; margin-right: 40px; padding-right: 40px; border-right: 1px solid #ddd;}
.researchList .right{flex: 1; position: relative;}
.researchList .right .photo{ background-color: #e7e7e7; position: absolute; border-radius: 20px; overflow: hidden; height: calc(50% - 10px);}
.researchList .right .photo img{max-width: 80%; max-height: 95%;}
.researchList .right .photo::before{display: none;}
.researchList .right .photo:nth-child(1){left: 0; top: 0; width: 100%;}
.researchList .right .photo:nth-child(2){left:0; bottom: 0; width: calc(50% - 10px);}
.researchList .right .photo:nth-child(3){right:0; bottom: 0; width: calc(50% - 10px);}

.publicList ul{width: 100%;}
.publicList li{box-shadow: 0 0 15px 0 #D9DDE9;}
.publicList li + li{margin-top: 30px;}
.contentGroup.gageGroup.publicList li .groupTitle{ display: flex; justify-content: flex-start; line-height: 30px; margin: 0; background-color: #f8f8f8; border-bottom: 1px solid #eee;}
.contentGroup.gageGroup.publicList li .groupTitle h4{ color: darkslategray; margin: 0; padding:10px 15px; font-size: 18px;  white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden;}
.contentGroup.gageGroup.publicList li .groupTitle:hover h4{color: darkorange;}
.contentGroup.gageGroup.publicList li .groupTitle h4::before, .contentGroup.gageGroup.publicList li .groupTitle h4::after{display: none;}
.publicList li .groupTitle .icon{ color: #fff; width: 50px; height: 50px; position: relative; display: block; font-size: 22px; background-color: #f0f0f0; border-right:#eee 1px solid; }
.publicList li .groupTitle .icon img{width: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.publicList li .item{ justify-content: space-between; padding:0; background-color: #fff; min-height: 60px; padding: 20px;}
.contentGroup.gageGroup.publicList li .item{display: none;}
.contentGroup.gageGroup.publicList li.active .item{display: flex;}
.publicList li.active {position: relative; z-index: 1;}
.contentGroup.gageGroup.publicList li.active .groupTitle{ background-color: #fff;}
.contentGroup.gageGroup.publicList li.active .groupTitle .icon{background-color: #fff;}
.publicList li .item .photo{ width: 60px; margin: 0 auto 10px;}
.publicList li .item .text{text-align: center; line-height: 20px; color: #333; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden;}
.publicList li .item .link:hover .text{color: darkorange;}

.publicList li .item .right{flex: 0 0 50%; padding-left: 30px; box-sizing: border-box;}
.publicList li .item .right .photo{ height: 100%;}
.publicList li .item .right .photo::before{display: none;}
.publicList li .item .title{font-size: 18px; line-height: 24px; font-weight: bold; overflow: hidden; color: #333;}
.publicList li .item .title:hover {color: darkslategray;}
.publicList li .item .info{ font-size: 16px; margin:10px 0 0; line-height: 20px; }


.publicList li .item.column-1 .link{display: flex; align-items: center;}
.publicList li .item.column-1 .link .photo{ margin: 0 10px 0 0;}
.publicList li .item.column-1 .link .text{flex: 1;}

.publicList.meetingList .item li{box-shadow: none; display: flex; justify-content: ; flex-wrap: wrap;}
.publicList.meetingList li+li{margin: 0;}
.publicList.meetingList .item li .photo::before{display: none;}
.publicList.meetingList .item li .photo img{position: inherit; left: auto; top:auto; transform: translate(0, 0);}
.publicList.meetingList .item li .text{flex: 1;}
.publicList.meetingList .item li .text .title{display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 2;}

.flexGroup { display: flex; flex-wrap: wrap; justify-content: space-between;}
.flexGroup .formulaText{width: 30%;  font-size: 18px; line-height: 34px;font-weight: bold;  margin-right: 20px;}
.formGroup{ display: flex;}

.formulaText{color: #333;}
.formulaText sup, .formulaText sub{font-size: 12px;}

.publicList.photocatalystList ul{margin-top: 30px;}
.publicList.photocatalystList .item + .item{ border-top: 1px solid #e7e7e7;}

.publicList.photocatalystList li{border-radius: 15px; overflow: hidden;}
.publicList.photocatalystList li .item{padding: 0; min-height: auto; display: flex;}
.publicList.photocatalystList li .item .left{ width: 20%; flex: 0 0 20%; padding: 20px; justify-content: center; display: flex; align-items: center;}
.publicList.photocatalystList li .item .title, .publicList.photocatalystList li .item .info{margin: 0;}
.publicList.photocatalystList li .item .center {width: 40%; padding: 30px 0;  justify-content: center; display: flex; align-items: center; border-right: 1px solid #e7e7e7;}
.publicList.photocatalystList li .item .center img img{max-height: 210px; max-width: 90%;}
.publicList.photocatalystList li .item .right {flex: 1; padding: 20px;  display: flex; align-items: center; }
.publicList.photocatalystList li .item .left + .right{border-left: 1px solid #e7e7e7;}
.publicList.photocatalystList li .item .formulaText{ font-size: 18px;}
.publicList.photocatalystList li .item .formulaText span{ display: inline-block; width: 50%; line-height: 30px;}
.publicList.photocatalystList li .item .formulaText span:nth-of-type(2n+1){text-align: right; padding-right: 5px; position: relative;}
.publicList.photocatalystList li .item .formulaText span:nth-of-type(2n+1)::before{display: block; content: ":";font-weight: bold; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);}
.publicList.photocatalystList li .item .formulaText span:nth-of-type(2n){text-align: left;padding-left: 11px; box-sizing: border-box;}


.staffList.linksList li .item{position: relative;}
.staffList.linksList li .item .photo{border-radius: 0; width: 60%; margin: 0; background-color: transparent;}
.staffList.linksList li .item .photo::before{padding-bottom: 125%;}
.staffList.linksList li .item .photo img{width: 100%; height: 100%; max-height: 100%;object-fit: contain;}
.staffList.linksList li .item .text{ width: 60%; text-align: left; padding:20px; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.staffList.linksList li .item .title, .staffList.linksList li .item .info{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 16px;}
.staffList.linksList li .item .info{height: auto; display: block;}




.staffList.newsList li .item .title{ border: 0; text-align: left; }
.staffList.newsList li .item .photo{padding-bottom: 75%;}
.staffList.newsList li .item .info{height: 100px; line-height: 25px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}


.pagecontent{ padding: 0 0 40px;}
.content-box{ padding: 20px 20px 30px; background-color: #fff; min-height: 200px;}
.content-box + .content-box{ margin-top: 30px;}
.panel-loading{height: 40px; margin: 20px 0; position: relative; text-align: center; display: none;}
.panel-loading .loading-text{ display: inline-block; padding: 0 15px 0 70px; background: #fff url("../image/img_load2.gif") 15px center no-repeat; color: #999; font-weight: bold; font-size: 16px; font-family: Arial, Helvetica, sans-serif; line-height: 40px; position: relative;z-index: 1;}
.panel-loading::before{ content: ""; width: 100%; background-color: #e0e0e0; left: 0; height: 1px; position: absolute; top: 50%; margin-top: -2px;}
.panel-loading::after{ content: ""; width: 100%; background-color: #e0e0e0;left: 0; height: 1px; position: absolute; bottom: 50%; margin-bottom: -2px;}

.navigation{ margin-bottom: 20px;}
.breadcrumb{ padding: 5px 0; text-align: right; line-height: 20px; margin: 0 0 20px; border-radius: 0; background-color: transparent; margin: 0;}
.breadcrumb li{box-shadow: none;}
.breadcrumb li a{color: darkslategray; }
.breadcrumb li a:hover{color: darkorange; }
.breadcrumb li.active{color: #333; font-weight: bold;}

.htmledit{ line-height: 150%;}
.htmledit img{ max-width: 100%;}
.htmledit p{ line-height:180%; margin-bottom:5px;}
.htmledit .default_p{ line-height:24px; padding-bottom:10px;}
.htmledit .default_h4{ clear:both; line-height:20px; margin-top:0px; margin-bottom:10px; color:@light; font-size: 1.2em;}
.htmledit .default_strong{font-size:13px; padding:0 5px;}
.htmledit .default_img{ border:4px solid #fff; -moz-box-shadow:0 0 5px #999;-webkit-box-shadow:0 0 5px #999;-khtml-box-shadow:0 0 5px #999;box-shadow:0 0 5px #999;}

.htmledit .templist { width:100%; overflow:hidden; border-collapse:collapse;}
.htmledit .templist th{ color:#333; font-weight:1.2em; padding:5px 10px; background-color:#ccc; line-height:20px; text-align:left;border:1px solid #e4e4e4;}
.htmledit .templist td{ padding:5px 10px; line-height:20px; border:1px solid #e4e4e4;} 
.htmledit .templist tr.even td{background-color:#f2f2f2;}
.htmledit .templist tr.odd td{background-color:#fcfcfc;}
.htmledit .templist tr.over td{background-color:#eee;}



.leftmenu{ width: 260px; float: left; background-color: #fff;}
.leftmenu h3.title{ font-weight: bold; font-size: 20px; line-height: 30px; padding:15px 20px; margin: 0;}
.leftmenu ul{ padding: 0; margin: 0; list-style: none;}
.leftmenu li{ border-top: 1px solid #d9dbe5; position: relative;}
.leftmenu li a{ padding: 10px 20px; line-height: 24px; display: block; font-size: 15px; position: relative; z-index: 1;}
.leftmenu li::before{ width: 0; height: 100%; background-color: #f8f8f8; height: 100%; content: ""; position: absolute; left: 0; top: 0; transition: all 0.3s ease 0s;}
.leftmenu li:hover::before{ width: 100%;}
.leftmenu li.active{ border-left: 5px solid darkslategray; margin-left: -5px; }
.leftmenu li.active > a, .leftmenu li.active > a:hover{ background-color: darkorange; color: darkslategray; font-weight: bold;}

.leftmenu + .content-box{ float: right; width: 850px;}

/* about */
.page-title{ margin-bottom: 30px; margin-top: 10px; position: relative;}
.page-title::before{ content: ""; height: 1px; background-color: #d9dbe5; width: 100%; left: 0; bottom: 0; position: absolute;}
.page-title .title{ font-size: 22px;  line-height: 30px; display: inline-block; padding-bottom: 5px; border-width:0 0 1px; border-style:solid; margin: 0; font-weight: bold; position: relative;}
.page-title .option{ position: absolute; right: 0; top: 0; padding: 0;}

/* brand */
.brand-group{ text-align: center; margin-bottom: 20px; padding: 20px 0;}
.brand-group .title{ position: relative; font-weight: bold; display: inline-block; line-height: 40px; font-size: 28px; margin: 0; padding: 0 20px;}
.brand-group .title::before, .brand-group .title::after{content: ""; height: 2px; background-color: #d9dbe5; width: 100px; position: absolute;  top: 50%; transform: translateY(-50%);}
.brand-group .title::before{left: -100px;}
.brand-group .title::after{right: -100px;}
.brand-group ul{ padding: 0; margin: 20px 0 0; list-style: none;  display: -webkit-flex; display: flex; flex-wrap: wrap;}
.brand-group li{display: -webkit-box; display: box; width: 16.6%; box-sizing:border-box; padding: 10px 15px 35px; transition: all 0.3s ease 0s; border: 1px solid #d9dbe5; margin: -1px 0 0 -1px; background-color: #fff;}
.brand-group li:hover{ z-index: 1; transform: scale(1.1); left: -5%; top: -5px; -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15); box-shadow: 0 0 15px rgba(0,0,0,0.15);}

.brand-group li a{ display:block; width: 100%; height:60px; text-align: center; position: relative; }
.brand-group li a img{ max-width: 100%; max-height: 60px;}
.brand-group li a .brand-name{ position: absolute; display: block; left: 0; width: 100%; line-height: 20px; bottom: -20px; text-align: center;}


/* register */
.ps-letter{ margin-top: 5px; clear: both; height: 14px;}
.ps-letter .letter-group{border-right: 1px #fff solid; font-size: 12px; color: #fff; display: inline-block; float: left; height: 14px; line-height: 14px !important; text-align: center;width: 33.3%; background: #ccc;}
.ps-letter .letter-group.low{ background-color: darkorange;}
.ps-letter .letter-group.medium{ background-color: #337ab7;}
.ps-letter .letter-group.strong{ background-color: #85b716;}

.agreement-link{ display: inline-block; padding-left: 5px; padding-top: 7px; text-decoration: underline;}

/* crumbs */
.crumbs {text-align: center; margin-bottom:10px;}
.crumbs ul {list-style:none;display:inline-table; padding:0;}
.crumbs ul li {display: inline;}
.crumbs ul li a{display: block;float: left;height:34px; line-height:24px; background:#e0e0e0; text-align: center; padding:5px 90px 5px 90px;position: relative;margin: 0 5px 0 0;text-decoration: none; color:#6a6a6a; font-size:1.1em; font-weight:bold;}
.crumbs ul li a:after {content:"";  border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:17px solid #e0e0e0;position: absolute; right:-16px; top: 0;z-index: 1;}
.crumbs ul li a:before {content: "";  border-top:17px solid transparent;border-bottom:17px solid transparent;border-left:17px solid #fff;position: absolute; left: 0; top: 0;}
.crumbs ul li:first-child a {border-top-left-radius:4px; border-bottom-left-radius: 4px;}
.crumbs ul li:first-child a:before {display: none; }
.crumbs ul li:last-child a {border-top-right-radius:4px; border-bottom-right-radius:4px;}
.crumbs ul li:last-child a:after {display: none; }
.crumbs ul li a:hover {background:#d9d9d9; }
.crumbs ul li a:hover:after {border-left-color:#d9d9d9;}
.crumbs ul li.active a{color:#fff; background-color: darkslategray;}
.crumbs ul li.active a:after{border-left-color:darkslategray; }
.crumbs.nolink ul li a{ cursor:default;}


.crumbs.table-block ul{ display: table; width: 100%;}
.crumbs.table-block ul li{ display: table-cell;}
.crumbs.table-block ul li a{ float:inherit;}

/* data */
.data-group ul{display: -webkit-flex; display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: -15px;}
.data-group li{display: -webkit-box; display: box; width: 16.6%; box-sizing:border-box; padding: 15px;}
.data-group li .data-item{display: block; width: 100%; background-color: #fff; padding: 9px; border:1px solid transparent; -webkit-box-shadow: 0 2px 6px 0 rgba(69,73,91,.18); box-shadow: 0 2px 6px 0 rgba(69,73,91,.18); text-align: center;}
.data-group li .data-item .photo{ display: block; width: 100%; height: 0; padding-bottom: 100%; position: relative; margin-bottom: 10px;}
.data-group li .data-item .photo img{max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.data-group li .data-item .data-name{ display: block; overflow:hidden;  }
.data-group li .data-item .btnp-download{ margin-top: 10px;}
.data-group li .data-item:hover{ border-color:#ccc ;}

.data-group.data-type li{width: 25%; }
.data-group.data-type li .photo{padding-bottom: 140%; background-color: #f8f8f8;}
.data-group.data-type li .data-name{font-size: 16px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; }


.data-group.cateory-type li .data-item{ height: 200px;}
.data-group.cateory-type li{width: 16.6%; }
.data-group.cateory-type li .data-item .data-name{ line-height: 18px; height: 36px; text-align: center;}

.page-pagination{ margin-top: 40px; text-align: center;}
.page-pagination .pagination { margin: 0;}
.page-pagination .pagination li a{ border-radius: 0;}

/* filter */
.filter-group .filter-item {position: relative; padding-left: 80px;}
.filter-group .filter-item + .filter-item{ margin-top: 20px;}
.filter-group .filter-item .title{ display: inline-block; line-height: 38px; font-weight: bold; color: #999; margin-right: 10px; position: absolute; left: 0; top: 0;}
.filter-group .filter-item .btn.focus{ outline: 0;}
.filter-group .filter-item .btn{padding: 8px 15px; margin-top: -1px;}
.filter-group .filter-item .btn:first-child{margin-left: -1px;}
.filter-group .filter-item .btn.active{background:#fff; -webkit-transition: none; transition: none; z-index: 3; position: relative; overflow: hidden; border-color: darkslategray; color: darkslategray;}
.filter-group .filter-item .btn.active::before{ content: ""; height: 30px; width: 30px; position: absolute; right: -16px; bottom: -16px; transform: rotate(45deg); background-color: #e3150a; z-index: 1; background-color: darkslategray;}
.filter-group .filter-item .btn.active::after{ content: "\e013"; font-family: 'Glyphicons Halflings';font-style: normal;font-weight: 400;line-height: 1; font-size: 12px; z-index: 1; color: #fff; position: absolute; right: -1px; bottom: -1px;}
.filter-group .filter-item .input-group{ display: inline-table; vertical-align: middle;}
.filter-group .filter-item .input-group .form-control{ width: 260px;}
.filter-group .filter-item .input-group .form-control, .filter-group .filter-item .input-group .input-group-btn .btn{ border-radius: 0;}
.filter-group .float-info{ margin-right: 15px; float: right; font-size: 12px; line-height: 20px; margin-top: 5px; padding:0 5px; color: #999; background-color: #f0f0f0; display: inline-block; border-radius: 2px;}


/* cateory */
.cateory-info{ margin-bottom: 20px;}
.cateory-info .title{ line-height: 30px; font-weight: bold; font-size: 18px; color: #333; margin: 0 0 10px;}
.cateory-info .info{ line-height: 24px;}
.cateory-info .photo{ display: block; text-align: center; padding:5px;}
.cateory-info .photo img{ max-width: 100%;}
.cateory-info .photo:hover{-webkit-box-shadow: 0 2px 6px 0 rgba(69,73,91,.18); box-shadow: 0 2px 6px 0 rgba(69,73,91,.18);}

.product-table{ margin-top: 10px;}
.table .photo{ width: 42px; height: 42px; display: block; margin: 0 auto; border: 1px solid #ccc; text-align: center; vertical-align: middle;}
.table .photo:hover{ border-color:darkorange;}
.table .photo span{ height: 100%; vertical-align: middle; display: inline-block;}
.table .photo img{ max-width: 100%; max-height: 100%; vertical-align: middle;}
.table .tow-line{ line-height: 20px; max-height: 40px; overflow: hidden; display: block;}


/* product detail */
.zoomDiv {z-index:999;position: absolute;top:0; left:0;width:400px;height:400px;background:#fff;border:1px solid #e0e0e0;display:none;text-align: center;overflow:hidden; margin:-5px 0 0 3px;}
.zoomMask { position:absolute;background:rgba(254,222,79,0.5);cursor:move;z-index:1;}

.product-header{ position: relative; min-height: 430px; padding-left: 340px;}
.product-header::before, .product-header::after{ content: ""; display: table; height: 0; width: 100%;}
.product-header .large-photo{ width: 320px; height:320px; display: table; position: absolute; left: 0; top: 0; border:1px solid #e0e0e0;}
.product-header .large-photo .preview{ width: 100%; height: 100%; display: table-cell; vertical-align: middle; text-align: center; overflow: hidden;}
.product-header .large-photo img{ max-height: 100%; max-width: 100%;}

.item-box{margin-bottom: 15px; padding-bottom: 5px; border-bottom:1px solid #e0e0e0; padding-right:250px; position: relative;}
.item-name{ font:20px Arial; color: #333; line-height: 40px;  margin: 0;}
.item-category{ line-height: 20px; color: #7a7a7a; font-size: 12px; margin-top: 5px; font-family: "arial, helvetica, sans-serif";}
.item-group{ position: absolute; right: 0; top: 0;}

.product-info .property-panel{clear: both; position: relative; min-height:420px;}
.product-info .property .item{ clear: both; line-height: 32px; margin-bottom: 3px;}
.product-info .property .item .title{padding: 0 8px; background-color: #f8f8f8; margin-right: 5px; display: inline-block; font-size: 12px;font-family: simsun;}
.product-info .property .item .text{  display: inline-block;}
.product-info .property .item .text + .title{ margin-left: 20px;}
.product-info .property .item{ width: auto;}
.product-info .property .bsr{ color: #999; line-height: 20px; font-size: 12px; padding: 6px 0; margin-bottom: 0;}

.button-panel{ margin-top: 20px; border-top:1px solid #e0e0e0; padding-top: 10px; position: relative; }

.catalog{padding:7px 20px; position:absolute; width: 100%; bottom: -100px; left: 0; background-color:#f9f9f9; }
.catalog .prev, .catalog .next{position:absolute;color:#999;top:0; height:100%; width:18px; font-size:12px; text-align:center; line-height:86px; display:block; z-index:2;}
.catalog .prev:hover, .catalog .next:hover{ color:#fff; background-color: #ccc;}
.catalog .prev{ left:0;}
.catalog .next { right:0;}

.thumbs_list{z-index:2; overflow:hidden; width: 280px;}
.thumbs_list ul{clear:both; height:70px; }
.thumbs_list li{width:60px; height:60px; display: table; float:left; margin:5px; position:relative; background-color: #fff;}
.thumbs_list li.over{ border-color:#333; -webkit-box-shadow: 0 0 0 2px darkslategray; box-shadow: 0 0 0 2px darkslategray;}}
.thumbs_list li a{display:table-cell; position:relative; z-index:1; overflow:hidden; text-align: center; text-align:center;}
.thumbs_list li a img{ max-width: 100%; max-height: 100%; vertical-align: middle;}


.contactus .row .col-md-6:first-child .htmledit { margin-top: 100px;}
.contactPhoto{ margin-top: 20px;}
.contactPhoto ul{ margin:-5px; }
.contactPhoto ul::after{ content: ""; clear: both; float: inherit; display: table; height: 0; width: 100%;}
.contactPhoto li{ float: left; padding:5px; box-sizing: border-box; width: 33.3%;}
.contactPhoto li img{ max-width: 100%; text-align: center;}

.from_post li .nes{color: #f00; padding-right: 5px;}
.from_post ul{ list-style: none; display: flex; margin: -10px; flex-wrap: wrap;}
.from_post li{ padding:10px; width: 50%; box-sizing: border-box;}
.from_post li.full-type{width: 100%;}
.from_post li .title{ font-size:14px; line-height:20px; color: darkslategray; display:block; margin-bottom: 5px;}
.from_post li strong{line-height:30px;}
.from_post li input, .from_post li textarea, .from_post li select{width: 100%;}
.from_post li input.code{ width: 120px; display: inline-block;}
.from_post li .fg{padding:0px 8px; line-height:30px; display:inline; color:#888;}
.from_post li .check{ clear:both; display:block; line-height:20px; color:#f00; padding-top:5px;}
.from_post li .check img{ padding: 2px 5px 0 0;}
.from_post li .codeimg{padding:0 5px 0 10px;cursor:pointer;}
.from_post li .price{ font-size:1.1em; padding-left:5px; color:@default;}
.from_post li .code-group{padding:0px 8px; line-height:30px; display:inline; color:#888;}
.from_post li label{ display:inline-block;}
.from_post li .labelgroup{ border:1px solid #e0e0e0; padding:4px 10px; width:50%;}
.from_post .radio, .from_post .checkbox{ background:none; display:inline; border:0; padding:0px;margin:8px 4px 8px 0; width: auto; height: auto;}
.from_post .brtools{ margin:20px 0 0 0;}

.from_post li.longer-title{padding-left:240px; height: 30px;}
.from_post li.longer-title .title{ width:230px;}

/* ==================modal======================== */

/* login */
.modal-login .modal-dialog{ width: 840px;}
.modal-login .modal-content{ background:#fff url("../image/login-bg.jpg") center no-repeat; background-size: cover;}
.modal-login .modal-body .logo{ text-align: center; margin-bottom: 30px;}
.modal-login .modal-body .logo img{ max-width: 100%;}
.modal-login .modal-body{ margin-right: 520px; background-color: rgba(255,255,255,0.9); padding-top: 50px; padding-bottom: 50px;}
.modal-login .close{ position: absolute; right: 15px; top: 15px; font-size: 30px; line-height: 40px; opacity:0.5; width: 40px; border-radius: 50%; background-color: #fff;}
.modal-login .control-label{ margin-bottom: 5px; color: #7a7a7a;}
.modal-login .modal-title{ font-size: 20px; text-align: center;}
.third-party{ margin-top: 10px;}
.third-party a{ display: inline-block; margin-right: 6px; margin-bottom: 5px;}
.third-party a:last-child{ margin-right: 0;}
.checkcode{ cursor: pointer; float: left; padding-top: 2px;}
.codecheck-result{ position: absolute; right: -5px; top: 10px; font-size: 16px;}
.codechecking{-webkit-animation: loadrotate 3s linear infinite;-moz-animation: loadrotate 3s linear infinite;  animation: loadrotate 3s linear infinite;}
@-webkit-keyframes loadrotate{from{-webkit-transform: rotate(0deg)}to{-webkit-transform: rotate(360deg)}}
@-moz-keyframes loadrotate{from{-moz-transform: rotate(0deg)}to{-moz-transform: rotate(360deg)}}
@keyframes loadrotate{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}
.checkbox label.control-label, .radio label.control-label{color: #7a7a7a; font-weight: bold; padding-left:0; margin-right: 10px;}

/* register */
.autopop { position: absolute; background: #fff;border: 1px #ccc solid; color: #666; animation-duration: -webki-box-shadow: 0 0 0 rgba(0,0,0,0.15); box-shadow: 0 0 0 rgba(0,0,0,0.15); z-index: 10000; padding: 0; display: none;}
.autopop li { font-size: 14px;height: 28px; line-height: 28px; padding: 0 6px; cursor: pointer overflow: hidden; list-style: none; cursor: pointer;}
.autopop li.email_pop {background: #f0f0f0; color: #2298a2; }

.filter-group{ padding:0 15px;  background-color: #f9f9f9; overflow: hidden; transition: all 0.3s; height: 0;}
.filter-group.opened{padding:15px; margin-top:20px; height: auto;}

/* payment */
.block-columns{margin: 0 -10px; display: -webkit-flex; display: flex;}
.block-column{padding:0 10px;  display: -webkit-box; display: box;width:30%;}
.block-column-container{background-size: cover; position: relative; height: 100%; width: 100%; background-position: center; background-color: #000;}
.column-wrapper{margin: 15px;line-height: 2;position: relative;z-index: 1; background-color: rgba(255,255,255,0.9);text-align: center; padding: 15px;}
.block-column.bank-type{width:40%;}
.column-wrapper .title{ line-height: 30px; font-size: 20px; font-weight: bold; margin-top: 0;  color: #333}
.column-wrapper p{text-align: left; }
.block-column-container::after{content: "";position: absolute;width: 100%;left: 0;top: 0;height: 100%;background-color: inherit; opacity: .3;}

/* collapse */
.collapse-item .panel-collapse{ display: none;}
.collapse-item .panel-toolbar .arrow::before{content: "\e114";}
.collapse-item.opened .panel-toolbar .arrow::before{content: "\e113";}
.collapse-item.opened .panel-collapse{ display: block;}


/*shop new*/
.integral-shop{ position: relative; height: 240px; background-color: #fff; margin-bottom: 40px; padding-left: 244px;}
.integral-shop-title{ position: absolute; width: 224px; height: 220px; left: 10px; top: 10px; overflow: hidden;}
.integral-shop-title .text{ text-align:center; color:#fff; position: relative; z-index: 1; line-height: 30px padding:15px 0; margin: 80px 0; font-family:Arial,Helvetica,sans-serif; font-size: 24px;  text-shadow: 0 0 5px rgba(0,0,0,0.75);}
.integral-shop-title .mask{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size:cover; transition: 0.5s ease 0s;}
.integral-shop-title:hover .mask {
    -webkit-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}
.integral-shop .slider-prev {left:234px;}
.integral-shop .slider-next {right:0;}
.integral-shop-slideshow{ padding: 0; position: relative; width: 896px;}
.integral-shop-slideshow ul{ list-style:none; margin:0; padding:0;}
.integral-shop-slideshow li{ height:240px; text-align:center; width:224px; float: left; position: relative;}
.integral-shop-slideshow li .item{ display:block; padding-top:10px;}
.integral-shop-slideshow li .item .photo{ width: 145px; height: 145px; margin: 0 auto 10px;  text-align: center;}
.integral-shop-slideshow li .item .photo span{ display: inline-block; height: 100%; vertical-align: middle;}
.integral-shop-slideshow li .item .photo img{ max-width: 100%; max-height: 100%;  vertical-align: middle;}
.integral-shop-slideshow li .item .title{ line-height: 20px; padding: 0 10px; text-align: center; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.btn-exchange{ margin-top: 10px; padding: 5px 20px; border-radius: 15px;}
.btn-exchange img{ height: 14px; padding-right: 5px;}

.integral-shop-slideshow li:after{ content: ""; height: 100%; width: 1px; background-color: #eee; position: absolute; right: 0; top: 0;}

.points-shop .main-product-group .main-product-list{ height: 240px;}
.points-shop .main-product-group .main-group-title{ color: #333; background-color: transparent; padding: 0;}
.points-shop .main-product-group .main-group-title .readmore{color: #333;}
.points-shop .main-product-group .title{ font-size: 20px; line-height: 40px;}
.points-shop .main-product-group .title strong{ font-size: 1.8em; }
.points-shop .main-product-list .group-photo .photo{ background-size: cover; }
.points-shop .main-product-list .group-photo .image-mask {background: rgba(0,0,0,.25);}
.points-shop .main-product-list .group-photo .title{ text-align: center; font-size: 24px; text-shadow: 0 0 5px rgba(0,0,0,0.75);}
.points-shop .main-product-list .product-item{ width: 80%;}
.points-shop .main-product-list .product-item li{ width: 25%; height: 100%;}
.points-shop .main-product-list .product-item ul li:nth-child(1), .points-shop .main-product-list .product-item ul li:nth-child(2), .points-shop .main-product-list .product-item ul li:nth-child(3){ broder-width: 0 1px 0 0;}
.points-shop .main-product-list .product-item ul li:nth-child(4){ border: 0;}
.points-shop .main-product-list .product-item li .photo{ width: 120px; height: 120px; margin-bottom: 15px;}
.points-shop .main-product-list .product-item li .item { box-sizing: border-box; width: 100%; padding-top: 20px; text-align: center;}

.points-shop .main-product-group:nth-child(7n+2) .main-group-title{ color: #3067ba;}
.points-shop .main-product-group:nth-child(7n+3) .main-group-title{ color: #d333b0;}
.points-shop .main-product-group:nth-child(7n+4) .main-group-title{ color: #e3150a;}
.points-shop .main-product-group:nth-child(7n+5) .main-group-title{ color: #48babe;}
.points-shop .main-product-group:nth-child(7n+6) .main-group-title{ color: #f65222;}
.points-shop .main-product-group:nth-child(7n+7) .main-group-title{ color: #c6a435;}
.points-shop .main-product-group:nth-child(7n+8) .main-group-title{ color: #200cab;}

/* item list */
.item-list{ margin-top: 20px;}
.data-group.data-type.item-list li .photo{ padding-bottom: 100%; background-color: transparent}
.data-group.data-type.item-list li .data-item{ position: relative;}
.data-group.data-type.item-list li .data-name{white-space: inherit; font-size: 13px; text-align: left; line-height: 20px; height: 40px;}
.data-group.data-type.item-list li .points{ line-height: 40px; font-size: 20px; font-weight: bold; text-align: left; margin-top: 10px;}
.data-group.data-type.item-list li .btn-exchange{ position: absolute; right: 10px; bottom:10px; padding: 5px 15px; font-size: 16px; border-radius: 18px;}

@media (min-width: 1680px){ 
	.container { width: 1440px;}
}

@media (min-width: 980px) and (max-width: 1259px) { 
	.container { width: 980px;}
  .logo-group{height: 35px;}
  .header .sf-menu li{padding: 0 5px;}
	.header .sf-menu li a, .header .sf-menu li a:focus, .header .sf-menu li a:visited{ letter-spacing:0; font-size: 13px;}

	.leftmenu + .content-box{ width: 670px;}

  .videoGroup iframe{width: 480px; height: 270px;}
  .videoGroup .sideText{ font-size: 20px; line-height: 40px;}
}

@media (max-width: 979px) {
  .container{ padding-right: 30px; padding-left: 30px; width: auto;}
  body, body.index{padding-top: 60px;}
  body.overflowHidden{overflow: hidden;}
  .header{height: 60px;}
  .logo-group{height: 50px; flex: 1;}
  .header .menuContainer{justify-content: space-between;}
  .header .menu{ top: 60px; width: 100vw; height: 100vh; background: #fff; position: fixed; right: -100vw; overflow-x: hidden; overflow-y: auto; box-shadow: 0 15px 15px 0 #ccc; transition: all 0.3s ease 0s; }
  .header .menu.opened{ right: 0;}
  .header .sf-menu{margin: 15px;}
  .header .sf-menu > li > a::before{display: none;}
  .header .sf-menu li{padding: 5px 0; float: inherit; position: relative; display: block; width: 100%;}
  .header .sf-menu li + li{border-top: 1px solid #eee;}
  .mobile-link li.menuIcon{ display: inline-block;}
  .header .sf-menu li a, .header .sf-menu li a:focus, .header .sf-menu li a:visited { color: #333; border:0; padding: 0; height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
  
  .sf-sub-indicator{width: 30px; top: 5px; transform: translateY(0); line-height: 30px; height: 30px; text-align: center; background-color: #eee; border-radius: 3px; cursor: pointer;}
  .sf-menu li ul, .sf-menu li:hover ul{display: none; }
  .sf-menu li.sfHover > ul, ul.sf-menu li li.sfHover ul{display: block; position: inherit; top: auto; left: auto; width: 100%; margin-top: 10px; padding: 10px}
  .sf-menu ul li > .sf-sub-indicator::before{content: "\e259";}
  .sf-menu li.sfHover > .sf-sub-indicator::before, .sf-menu ul li.sfHover > .sf-sub-indicator::before{content: "\e260";}
  .sf-menu .photo{display: none;}

  .sf-menu li li a, .sf-menu li.sfHover li a, .sf-menu li.current li a, .sf-menu li.sfHover li.sfHover li a, .sf-menu li.sfHover li.sfHover li.sfHover li a{padding: 0; line-height: 30px;}


  .subMenu{ height: 50px; padding: 0; background-color: #f0f0f0; border-radius: 5px;}
  .subMenu .text{display: none; display: block; line-height: 30px; padding: 10px 30px; font-size: 18px; font-weight: bold; color: darkslategray; position: relative;}
  .subMenu .text::before{content: "\e259"; font-family: "Glyphicons Halflings"; font-style: normal; font-weight: 400; line-height: 1; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}
  .subMenu.opened .text::before{content:"\e260";}
  .subMenu ul{ margin: 0; padding: 0; list-style: none; display: none; background-color: #fff; box-shadow: 0 10px 10px #ddd; position: absolute; top: 100%; left: 0; right: 0;}
  .subMenu ul li{width: 100%; padding: 0;}
  .subMenu ul li a, .subMenu ul li a:focus, .subMenu ul li a:visited{color: #333; border-width: 0 0 0 4px; padding:10px 30px;}
  .subMenu ul li ul{display: block; width: auto; margin: -5px 0 10px 30px; position: inherit; background-color: transparent; box-shadow: none;}

  .footer-nav .links ul{ margin-bottom: 20px; flex: 0 0 100%;}
  .copyright p, .copyright .varchar{text-align: center;}

  .contentGroup{padding: 30px 0;}
  .contentGroup .groupTitle h4{font-size: 20px;}
  .contentGroup .subTitle{font-size: 18px;}

  .videoGroup{width: 100%; display: block;}
  .videoGroup .sideText{ display: block; line-height: 1.5; font-size: 16px; padding: 20px 0;}
  .videoGroup iframe{ width: 100%; height: calc(56vw - 30px);}


  .column-6 >ul>li{flex: 0 0 33.3%; width: 33.3%;}
  .column-5 >ul>li{flex: 0 0 33.3%;width: 33.3%;}
  .column-4 >ul>li{flex: 0 0 50%;width: 50%;}
  .column-3 >ul>li, .column-2>ul>li{flex: 0 0 100%; width: 100%;}
 
  .col-md-6 + .col-md-6{ margin-top: 30px;}

  .newsList li .item .title{font-size: 16px; line-height: 24px;}
  .newsList li .item .date{font-size: 12px; margin: 5px 0;}
  .newsList li .item .info{font-size: 14px;}

  .researchList li{display: block;}
  .researchList .left{ width: 100%; margin: 0 0 20px; padding:0; border: 0;}
  .researchList .right .photo{ height: auto; position: relative;}
  .researchList .right .photo + .photo{ margin-top: 20px;}
  .researchList .right .photo::before{ padding-bottom: 50%; display: block;}
  .researchList .right .photo img{max-width: 80%; max-height: 95%;}

  .researchList .right .photo:nth-child(1){left: auto; top: auto; width: 100%;}
  .researchList .right .photo:nth-child(2){left:auto; bottom: auto; width: 100%;}
  .researchList .right .photo:nth-child(3){right:auto; bottom: auto; width: 100%;}

  .staffList.labList li .item .text .title{font-size: 16px;}

  .publicList li .item{display: block; padding: 20px;}
  .publicList li .item .left{border:0; padding:0 0 20px;}
  .publicList li .item .left .photo{ margin-right: 20px; width: 100px;}
  .publicList li .item .left .text{flex: 1}

  .publicList li .item .right{display: block; padding: 0;}
  .publicList li .item .right .photo::before{display: block; padding-bottom: 50%;}

  .contentGroup.publicList .groupTitle{ display: block;}
  .contentGroup.publicList .searchGroup{width: 100%; margin-top: 10px;}
  .contentGroup.publicList li .groupTitle{ display: flex;}


  .tabs-lg.nav-tabs{flex-wrap: wrap; border: 0;}
  .tabs-lg.nav-tabs > li{width: 33.3%; display: table; align-items: center; padding: 5px;}
  .tabs-lg.nav-tabs li a{border-radius: 5px; background-color: #eee;  padding: 5px; display: table-cell; vertical-align: middle;}
  .tabs-lg.nav-tabs > li.active > a, .tabs-lg.nav-tabs > li.active > a:focus, .tabs-lg.nav-tabs > li.active > a:hover{border: 0; color: #fff; background-color: darkslategray; padding: 5px;}
  .gray-bg .tabs-lg.nav-tabs li.active a{background-color: darkslategray;}

  .tabs-lg.nav-tabs > li + li{margin: 0;}

  .flexGroup{display: block;}
  .flexGroup .formulaText{width: 100%; margin-bottom: 10px;}
  .publicList.photocatalystList li .item{ display: block;}
  .publicList.photocatalystList li .item .left, .publicList.photocatalystList li .item .center, .publicList.photocatalystList li .item .right{width: 100%; border-left: 0}

  .publicList.photocatalystList li .item .left, .publicList.photocatalystList li .item .center{border-right: 0; border-bottom: 1px solid #e7e7e7;}

  .contactus .row .col-md-6:first-child .htmledit {margin-top: 0;}
  .from_post li{ width: 100%;}
  .from_post li .code-group{display: block; padding: 10px 0 0;}
  .from_post li .codeimg{ padding-left: 0;}
}
@media (max-width: 480px) {
  .container{ padding-right: 15px; padding-left: 15px;}
  .main-banner.owl-carousel .owl-pagination{bottom: 10px;}
  .subMenu .text{padding-right: 15px; padding-left: 15px;}
  .subMenu ul li a, .subMenu ul li a:focus, .subMenu ul li a:visited{ padding:5px 15px;}
  .subMenu .text::before{right: 20px;}

  .footer-nav .links ul{ margin-bottom: 20px; flex: 0 0 100%;}
  .column-6 >ul>li{flex: 0 0 50%; width: 50%;}
  .column-5 >ul>li{flex: 0 0 50%; width: 50%;}
  .column-4 >ul>li, .column-3>ul>li, .column-2>ul>li{flex: 0 0 100%; width: 100%;}
  .newsList li .item, .dataList  li .item{height: auto; display: block;}
  .newsList li .item .photo, .dataList li .item .photo{ width: 100%; height: auto; text-align: center;}
  .dataList li .item .text{ margin-right: 0; margin-left: 0;}
  .dataList li .item .text + .photo, .dataList li .item .photo + .text{ margin-top: 10px; margin-right: 0;
    margin-left: 0;}
  .newsList li .item .photo::before, .dataList li .item .photo::before{padding: 0;}
  .newsList li .item .photo img, .dataList  li .item .photo img{ position: inherit; left: auto; top:auto; transform: translate(0, 0);}
  .newsList li .item .title, .newsList li .item .info{ white-space: inherit;}

  .page-pagination{margin-top: 30px;}
  .pagination-lg > li > a, .pagination-lg > li > span{padding: 5px 8px; font-size: 16px}

  .publicList li .item .left{display: block;}
  .publicList li .item .left .photo{margin: 0 auto 20px; width: 150px;}
  .contentGroup.publicList .searchGroup{display: block;}
  .contentGroup.publicList .searchGroup .btnGroup{width: 100%; }
  .contentGroup .groupTitle .searchGroup .btnGroup + .btnGroup{width: 100%; margin-left: 0; margin-top: 10px;}

  .publicList.meetingList .item li{display: block;}
  .publicList.meetingList .item li .photo{ margin: 0 auto 10px;}
  .publicList.meetingList .item li .text .title{display: block;}

  .tabs-lg.nav-tabs > li{width: 50%;}

  .staffList li .item{ padding-bottom: 0;}
  .staffList li .item .text{padding: 20px;}

}