@charset "utf-8";



/* iconfont*/
@import url('../font/iconfont/iconfont.css');
@import url("../lib/social/css/social.css");


/* font*/
@import url('https://fonts.loli.net/css?family=Noto+Sans+SC');
@import url('https://fonts.loli.net/css?family=Noto+Sans+TC');
@import url('https://fonts.loli.net/css?family=Quicksand');
@import url('https://fonts.loli.net/css?family=Montserrat:100,300,400,500,700,900');
@import url('https://fonts.loli.net/css?family=Roboto:100,300,400,500,700,900');
@import url('https://fonts.loli.net/css?family=Open+Sans');
@import url('https://fonts.loli.net/css?family=Inter:100,300,400,500,700,900');



/* CSS Document */
html, body {font-size: 12px;margin: 0;padding: 0;text-decoration: none; background: #fff; width:100%; height: 100%; -webkit-text-size-adjust: 100%;}
html{font-size: 62.5%;}
body{ position: relative; overflow-x:hidden; transition-property:all;}
a {	color: #666;text-decoration: none;outline:none;  star:expression(this.onFocus=this.blur());}
a:hover, a:active { color:#009b4c;}
* { margin: 0;padding: 0;list-style: none;outline:none;box-sizing:border-box;font-family: "Noto Sans SC", sans-serif; }
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0;margin:0;}
form {margin: 0;}
img {border: 0 none;text-align-last: center;vertical-align: middle;  outline:none; max-width:100%; width:auto; height:auto;}
center {text-align: left;	color: #999;height: 50px;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important;	height: 0 !important;margin:0 !important;padding:0 !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0;}
.fl-left, .fl{ float:left;}
.fl-right, .fr{ float:right;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.mob{display:none;}
.hide{display: none;}
.wrap{ width: 86%; max-width: 1600px; margin: 0 auto;}
::-webkit-scrollbar {width:8px;height: 1px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background:#666;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #ededed;}



/* head*/
#head { position:fixed; z-index:1000; left: 0; top:0; width:100%; background: #fff;box-shadow: 0 8px 16px rgba(0,0,0,.1);  transition: all .35s;}
#head .main{margin: 0 auto; transition: all .5s; }
#head .main>.layout{display: flex; height: 100px; align-content: center; align-items: center; justify-content: space-between; transition: all .35s; }
#head .main>.layout .logo{display: inline-block; flex: 0 0 20%; text-align: left;}
#head .main>.layout .logo>a{display: inline-block;}
#head .main>.layout .logo>a img{height: 40px; width: auto;transition: all .35s;}


#head .main>.layout .menu{ display: inline-block; flex: auto;  box-sizing: border-box; margin-right: 100px;}
#head .main>.layout .menu>ul{display: flex; align-content: center; align-items: center; justify-content: flex-end;height: 100px; transition: all .35s;}
#head .main>.layout .menu>ul>li{  display: inline-flex; align-items: center;align-content: center; height: 100%; margin: 0 10px;}
#head .main>.layout .menu>ul>li.narrow{ position: relative; }
#head .main>.layout .menu>ul>li.narrow>div{ width: 130px; left: 50%; transform: translateX(-50%);}
#head .main>.layout .menu>ul>li>a{position: relative; display: flex; align-content: center; align-items: center; height: 100%; font-size: 2rem;color: #333; padding: 0 16px; transition: all .35s;}
#head .main>.layout .menu>ul>li>a>span{position: relative; display: block; z-index: 12; text-transform: uppercase; transition: all .35s;}
#head .main>.layout .menu>ul>li>a:after{position: absolute;z-index: 1; left: 50%; bottom: 10px; transform: translateX(-50%); width: 0;height: 2px; background: #009b4c; border-radius: 3px; content: ''; transition: all .35s;}
#head .main>.layout .menu>ul>li>a:hover:after, #head .main>.layout .menu>ul>li.active>a:after{width: 60%;}
#head .main>.layout .menu>ul>li>a:hover>span, #head .main>.layout .menu>ul>li.active>a>span{color: #009b4c;}
#head .main>.layout .menu>ul>li>div{ display: none; position: absolute;z-index: 90; left: 0; top: 100px;background: #f5f6f7;  box-sizing: border-box; width: 100%; }
#head .main>.layout .menu>ul>li>div>.products{ width: 70%;margin: 0 auto; box-sizing: border-box; padding: 50px 0;}
#head .main>.layout .menu>ul>li>div>.products>.theme{ font-size: 1.6rem; color: #009b4c;font-weight: 700;}
#head .main>.layout .menu>ul>li>div>.products>.container{margin: 0 auto; padding: 20px 0;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-nav{width: 20%;float: left;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-nav>ul{margin: 0 auto;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-nav>ul>li{display: flex; align-content: center;align-items: center; background: rgba(0,0,0,.03); color: #333; cursor: pointer; margin-bottom: 15px; border-radius: 16px;padding: 10px 25px; transition: all .35s;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-nav>ul>li.active{background: #009b4c;color: #fff;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-nav>ul>li>i{display: inline-flex; font-size:5rem; font-weight: 500; margin-right: 10px; }
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-nav>ul>li>p{display: inline-block; font-size: 1.6rem; }
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box{ width: 70%; float: right; }
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item{ display:none; text-align: left;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .current{display: block;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul{ display: flex; flex-wrap: wrap; margin: 0 auto;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li{display: inline-block;width: calc(20% - 20px); margin-right: 20px; margin-bottom: 20px; box-sizing: border-box;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li:nth-child(5n){margin-right: 0;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li>a{display: block;background: #fff; border-radius: 16px;padding: 30px;text-align: center; transition: all .35s;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li>a>img{width: 100%;height: auto; transition: all 1s;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li>a>p{height: 40px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li>a:hover{ color: #333; box-shadow: 3px 3px 12px rgba(0,0,0,.05);}
#head .main>.layout .menu>ul>li>div>.products>.container .layout>.tab-box .tab-item>ul>li>a:hover img{transform: scale(1.05);}


#head .main>.layout .menu>ul>li>div>.solution{ width: 70%;margin: 0 auto; box-sizing: border-box; padding: 50px 0;}
#head .main>.layout .menu>ul>li>div>.solution>.theme{ font-size: 1.6rem; color: #009b4c;font-weight: 700;}
#head .main>.layout .menu>ul>li>div>.solution>.container{margin: 0 auto; padding: 20px 0;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout{margin: 0 auto;display: flex; justify-content: space-between;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img{display: inline-block; flex: auto; }
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a{ position: relative; display: block; float: left; width: 31.33%; margin-right: 3%; margin-bottom: 3%; border-radius: 10px;overflow: hidden;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a>img{width: 100%; height: auto; transition: all 1.5s;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a>p{position: absolute;z-index: 12; left: 20px; bottom: 14px; width: max-content; white-space: nowrap; font-size: 1.4rem; color: #fff;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a:after{position: absolute;z-index: 1; left: 0;bottom: 0; width: 100%;height: 70px; background:linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,.5)); content: '';}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a:before{position: absolute;z-index: 2; right: 0;bottom: 0;color: #fff; width: 30px;height: 30px; font-family: iconfont; font-size: 1.6rem; content: '\e666';}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a:nth-child(3n){margin-right: 0;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-img>a:hover img{transform: scale(1.1);}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-list{display: inline-block; flex: 0 0 30%; box-sizing: border-box; margin-left: 50px; padding-left: 50px; border-left: 1px solid #ddd;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-list>.title{font-size: 1.4rem; color: #999;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-list>.list{padding-top: 20px;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-list>.list>a{display: block;font-size: 1.6rem; padding: 5px 0; color: #666; transition: all .35s;}
#head .main>.layout .menu>ul>li>div>.solution>.container .layout>.nav-list>.list>a:hover{color: #333;}
#head .main>.layout .menu>ul>li>div>.base{margin: 0 auto;padding: 20px 0;}
#head .main>.layout .menu>ul>li>div>.base>.nav{text-align: center;}
#head .main>.layout .menu>ul>li>div>.base>.nav>a{display: block;font-size: 1.6rem; padding: 10px 0; transition: all .35s;}
#head .main>.layout .menu>ul>li>div>.base>.nav>a:hover{color: #009b4c;}


#head .main>.layout .search{ display: inline-flex; justify-content: flex-end; margin-right: 20px; flex: 0 0 10%;}
#head .main>.layout .search>.form{display: inline-flex; height: 36px; align-items: center; align-content: center; justify-content: space-between; border: 1px solid #ddd; border-radius: 50px; transition: all .35s;}
#head .main>.layout .search>.form>input{ display: inline-flex;align-items:center; align-content: center; width: 80%; border: 0;background: none; text-align: left; font-size: 1.4rem; box-sizing: border-box;padding-left: 20px;}
#head .main>.layout .search>.form>input::placeholder{font-size: 1.2rem; color: #ccc;}
#head .main>.layout .search>.form>a{display: inline-flex; align-content: center;align-items: center;justify-content: flex-end; width: 20%; color: #009b4c;transition: all .35s;}
#head .main>.layout .search>.form>a>i{font-size: 2rem; }
#head .main>.layout .search>.form:hover{border-color: #ccc;}
#head .main>.layout .language{ position: relative; display: inline-flex; align-content: center;align-items: center; justify-content: flex-end;}
#head .main>.layout .language>a{ position: relative; z-index: 12; display: inline-flex; align-items: center;align-content: center; color: #999;transition: all .35s;}
#head .main>.layout .language>a>i{font-size: 2.2rem; }
#head .main>.layout .language>div{ display: none; position: absolute;z-index: 10;left: 50%; top: 0; transform: translateX(-50%); padding-top: 60px; width: 60px;transition: all ease .3s; animation: ani_language_dropdown 0.5s ease backwards;}
#head .main>.layout .language>div>ul{ display: block; width: 100%; padding: 10px; background: #fff; box-sizing: border-box;}
#head .main>.layout .language>div>ul>li{display: block;}
#head .main>.layout .language>div>ul>li>a{display: flex; align-items: center; align-content: center; justify-content: center; font-size: 1.6rem; padding: 8px 0; color: #666; transition: all .35s;}
#head .main>.layout .language>div>ul>li>a>span{display: inline-block;}
#head .main>.layout .language>div>ul>li>a:hover{color: #009b4c;}
#head .main>.layout .language:hover>a{color: #ccc;}
#head .main>.layout .language:hover>div{ display: block; z-index: 1; opacity: 1;}



#head.small .main{animation:ani_small_down 0.8s ease-out 0.4s both;}
#head.small .main>.layout{ height: 70px;}
#head.small .main>.layout .logo>a img{display: none; height: 32px;}
#head.small .main>.layout .logo>a img.primary{display: inline-block!important;}
#head.small .main>.layout .menu>ul{ height: 70px;}
#head.small .main>.layout .menu>ul>li>a{font-size: 1.7rem;}
#head.small .main>.layout .menu>ul>li>div{ top: 70px;}
#head.small .main>.layout .search>.form>a{color: #666;}





@-webkit-keyframes ani_small_down {
    0% {transform: translateY(-100px); opacity: 0; }
    100% {transform: translateY(0px); opacity: 1; }
}

@-webkit-keyframes ani_language_dropdown {
    0% {opacity: 0;padding-top: 32px;  }
    100% { opacity: 1; padding-top: 60px; }
}


/* end*/







/* path */

#path{ position: absolute;z-index: 560; left: 0; top: 0; width: 100%; height: 60px; line-height: 60px; background:linear-gradient(to bottom right, rgba(0,162,245,.8),rgba(0,162,245,.5) 6%, rgba(255,255,255,0));}
#path .wrap{ max-width: 90%;}
#path a:first-child{color: #00a2f5;}
#path i{display: inline-block;margin-right: 5px; color: #00a2f5;}
#path a{color: #fff; position: relative; font-size: 1.4rem; padding-right: 30px; transition: all .35s;}
#path a:after{position: absolute;z-index: 10; right: 0;top: 50%; width: 30px; text-align: center; font-family: iconfont; font-size: 1.4rem; font-weight: normal; content: '\e612'; color: rgba(255,255,255,.8); transform: translateY(-50%);}
#path a:last-child{ padding-right: 0;}
#path a:last-child:after{display: none;}
#path a:hover{ color: #00a2f5;}



/* end */



/* quicknav*/

#quick{ display: none; position: fixed;z-index: 900; right: 10px; top: 50%;   flex-direction: column; overflow: visible; background: #009b4c; border-radius: 6px; box-shadow: 0 0 16px rgba(0,0,0,.1);}
#quick>a{position: relative; display: block; width: 64px;  text-align: center; color: #fff; padding: 10px; border-bottom: 1px solid rgba(255,255,255,.2); transition: all .35s;}
#quick>a>i{font-size: 3rem;}
#quick>a>p{font-size: 1.2rem; ;font-weight: bold;}
#quick>a:last-child{border-bottom: 0;}
#quick>a>.tips{ display: none; position: absolute; right: 100%; top: 50%; transform: translateX(-18px) translateY(-50%); padding: 10px 20px; white-space: nowrap; color: #fff; font-size: 1.4rem; background: rgba(0,0,0,.8); border-radius: 6px; transition: all ease .3s; animation: ani_show 0.5s ease backwards;}
#quick>a>.tips:after{position: absolute;z-index: 12; top: 50%; right: -10px; transform: translateY(-50%); width: 0;height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid rgba(0,0,0,.8); content: '';}
#quick>a:hover{ background: rgba(0,0,0,.1)}
#quick>a:hover .tips{ display: block; z-index: 12;opacity: 1;}

@-webkit-keyframes ani_show {
    0% {transform: translateX(0) translateY(-50%); opacity: 0; }
    100% {transform: translateX(-18px) translateY(-50%); opacity: 1; }
}



/* end */

/* gotop*/

#gotop{ display: none; position: fixed;z-index: 900; right: 30px; bottom: 4%;}
#gotop>a{position: relative; display: flex; align-content: center; align-items: center; justify-content: center; width: 50px; height: 50px; background: rgba(122,183,47,.8); border-radius: 100%; overflow: hidden; color: #fff; transition: all .35s;}
#gotop>a>i{ position: relative;z-index: 20; font-size: 2rem;font-weight: bold;}

/* end */

/* foot*/


#foot{ position: relative; background: #111; margin: 0 auto; padding: 100px 0 20px 0; overflow: hidden;}
#foot:after{position: absolute;z-index: 1; right: 0;bottom: -20%; background: url("../img/logo-graphics-white.png") no-repeat; width: 500px;height: 400px; background-size: 100% auto; transform: rotate(-24deg); opacity:.2;content: '';}
#foot .wrap{padding: 0; position: relative;z-index: 60;}
#foot .main{margin: 0 auto; padding: 20px 0; }
#foot .main>.layout>.nav{ width: 56%; text-align: left;}
#foot .main>.layout>.nav>ul{ display: flex;justify-content: space-between; flex-direction: row;}
#foot .main>.layout>.nav>ul>li{display:inline-block; }
#foot .main>.layout>.nav>ul>li>a{ position: relative;  display: block; font-size: 1.8rem; font-weight: bold; color: #fff;transition: all .35s;}
#foot .main>.layout>.nav>ul>li>div{display: block;padding: 30px 0;}
#foot .main>.layout>.nav>ul>li>div>a{position: relative; display: block;font-size: 1.5rem;padding-bottom: 10px; color: rgba(255,255,255,.6); transition: all .35s;}
#foot .main>.layout>.nav>ul>li>div>a:hover{color: rgba(255,255,255,1);}
#foot .main>.layout>.info{ width: 30%; text-align: right;}
#foot .main>.layout>.info>.qrcode{padding: 20px 0;}
#foot .main>.layout>.info>.qrcode>img{  width: 150px; height: auto; border-radius: 6px; }
#foot .main>.layout>.info>.contact{ padding-top: 20px;}
#foot .main>.layout>.info>.contact>h3{display: block; font-size: 2.8rem; font-weight: 600; color: #009b4c; margin-bottom: 20px;}
#foot .main>.layout>.info>.contact>p{display: block; font-size: 1.4rem; padding: 2px 0; color: rgba(255,255,255,.7);}
#foot .social{ margin: 0 auto;}
#foot .social .social-share>a{ font-size: 2rem!important; background: transparent!important; transition: all .35s;}
#foot .social .social-share>a:hover{color: rgba(255,255,255,.6);}
#foot .copyright{ position: relative; padding: 30px 0; text-align: left;font-size: 1.6rem; color: #fff; }
#foot .copyright:after{position: absolute;z-index: 1; top: 0;width: 76%; height: 1px; background: rgba(255,255,255,.2); content: '';}


/* end*/