@charset='utf-8';
/* 首页公共 */
body,html{ padding:0; margin:0; font-size:14px; color:#666; font-family: "微軟正黑體","Microsoft Yahei","Hiragino Sans GB","SimHei","STHeiti" !important;}
ul,li,p,h1,h2,h3,dl,dt,dd,input{ padding:0; margin:0; list-style:none;}
a{ text-decoration:none; color:#666; -webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
a:hover{ color: #60bdde !important; text-decoration: none;  -webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.demo{ -webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;}
.clear{ clear:both;}
img{ vertical-align:top; border:none;}
input{ font-family: "微軟正黑體","Microsoft Yahei","Hiragino Sans GB","SimHei","STHeiti" !important;}
input:focus{ outline: none;}
textarea:focus{ outline: none; }
.center{position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

/* 头部 */
.head-box{ width: 100%; height: 120px; background: #fff; position: fixed; top: 0; left: 0; z-index: 99; box-shadow: 0 3px 5px rgba(0,0,0,0.1); }
.head-box .head-cent{ width: 1200px; height: 120px; margin: 0 auto; position: relative; }
.head-box .head-cent nav{ width: 515px; height: 120px; float: left; }
.head-box .head-cent nav ul li{ display: block; width: 25%; height: 120px; float: left; position: relative;}
.head-box .head-cent nav ul li .sub-icon{ width: 23px; height: 13px; position: absolute; top: 80px; left: 50%; margin-left: -11px; z-index: 2; display: none;}
.head-box .head-cent nav ul li .sub-icon img{ vertical-align: top !important;}
.head-box .head-cent nav ul li .sub-list{ display: none; width: 100%; height: auto; background: #fff; padding: 10px 0; box-shadow: 0 0px 5px rgba(0,0,0,0.1); position: absolute; left: 0; top: 93px; z-index: 1; border-radius: 5px;}
.head-box .head-cent nav ul li .sub-list a{ display: block; width: 100%; height: 35px; line-height: 35px; text-align:center;font-size: 12px; }
.head-box .head-cent nav ul li:hover .sub-icon{ display: block; animation: fadeInUp 0.5s linear 0s alternate forwards;}
.head-box .head-cent nav ul li:hover .sub-list{ display: block; animation: fadeInUp 0.2s linear 0s alternate forwards;}

.head-box .head-cent nav ul li>a{ display: block; width: 100%; height: 120px; float: left; text-align: center; line-height: 120px;}
.head-box .head-cent .logo{ width: 170px; height: 120px; float: left; }
.head-box .head-cent .code{ width: 15px; height: 15px; position: absolute; top: 52px; right: -15px; background: url(../images/codebg.png) 0 0 no-repeat; cursor: pointer; -webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.head-box .head-cent .code:hover{ background: url(../images/codebg.png) 0 -15px no-repeat;-webkit-transition:all .4s ease;-moz-transition:all .4s ease;transition:all .4s ease;}
.head-box .head-cent .code .code-icon{ width: 23px; height: 13px; position: absolute; top: 15px; left: 50%; margin-left: -11px; z-index: 2; display: none;}
.head-box .head-cent .code .code-list{ width: 140px; height: 160px; padding-left: 5px; padding-top: 5px;  background:#fff; box-shadow: 0 3px 7px rgba(0,0,0,0.5); position: absolute; top: 32px; left: 50%; margin-left: -70px;  border-radius: 5px; overflow: hidden; display: none; text-align: center;z-index: 999;}
.head-box .head-cent .code .code-list ul li{ width: 130px; height: 160px; float: left; }
.head-box .head-cent .code .code-list ul li img{ width: 120px; height: 120px; margin-left: 5px; margin-top: 8px;}
.head-box .head-cent .code .code-list ul li span{ display: block; width: 130px; height: 30px; text-align: center; line-height: 30px; }
.head-box .head-cent .code:hover .code-icon{ display: block; animation: fadeInUp 0.5s linear 0s alternate forwards;}
.head-box .head-cent .code:hover .code-list{ display: block; animation: fadeInUp 0.2s linear 0s alternate forwards;}



.head-white{ width: 100%; height: 120px; }

/* 广告 */
.banner{ width: 100%; height: 580px; max-width: 1920px; position: relative; overflow: hidden; margin: 0 auto;}
.banner .indexbanimg{ width: 1920px; height: 580px; position: absolute; left: 50%; margin-left: -960px; top: 0; }
.banner .layui-carousel-arrow{ width: 44px !important; height: 44px !important; background: #fff !important; top: 500px !important; margin-top: 0!important; border-radius: 0 !important; color: #333 !important; }
.banner .layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="add"]{ right: 20% !important; }
.banner .layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="sub"]{ left: 75% !important; }

/* 全局标题 */
.title{ width: 100%; height: 65px; position: relative; box-sizing: border-box; padding-left: 15px;}
.title span{ display: block; width: 5px; height: 65px; position: absolute; left: 0; top: 0; background: #60bdde; }
.title .en-title{ display: block; width: 100%; height: 40px; line-height: 40px; font-size: 30px; color: #333; text-transform: uppercase; font-weight: 400; }
.title .ch-title{ display: block; width: 100%; height: 25px; font-size: 18px; color: #666; }

/* 产品分类 */
.pro-nav{ width: 100%; height: auto; }
.pro-nav ul li{ display: block; width: 100%; height: 53px; box-sizing: border-box; line-height: 53px; position: relative; padding: 0 15%; overflow: hidden;}
.pro-nav ul li a{ display: block; width: 70%; height: 53px; position: absolute; left: 15%; top: 0; color: #fff !important; z-index: 2}
.pro-nav ul li span{ display: block; width: 12px; height: 53px; position: absolute; right: 15%; top: 0; font-family: '宋体'; color: #fff; font-weight: 700; z-index: 2}
.pro-nav ul div{ display: block; width: 100%; height: 53px; box-sizing: border-box; line-height: 53px; position: relative; padding: 0 15%; overflow: hidden;}
.pro-nav ul div a{ display: block; width: 70%; height: 53px; position: absolute; left: 15%; top: 0; color: #fff !important; z-index: 2}
.pro-nav ul div span{ display: block; width: 12px; height: 53px; position: absolute; right: 15%; top: 0; font-family: '宋体'; color: #fff; font-weight: 700; z-index: 2}

/* 底部 */
.bottom{ width: 100%; height: auto; padding-top: 45px; background: #222; overflow: hidden;}
.bottom .bottom-top{ width: 1200px; height: 220px; margin: 0 auto; border-bottom: solid 1px rgba(255,255,255,0.2)}
.bottom .bottom-top .bottom-lft{ width: 590px; height: 220px; float: left; color: #fff;}
.bottom .bottom-top .bottom-lft span{ font-size: 18px; display: block; padding-bottom: 10px;}
.bottom .bottom-top .bottom-lft h2{ font-size: 30px; display: block; padding-bottom: 10px;}
.bottom .bottom-top .bottom-lft em{ font-style: normal; display: block; padding-bottom: 22px;}
.bottom .bottom-top .bottom-lft a{ padding-right: 15px; }
.bottom .bottom-top .bottom-cen{ width: 410px; height: 220px; float: left; box-sizing: border-box; padding-top: 30px;}
.bottom .bottom-top .bottom-cen a{ color: #fff !important; display: block; width: 200px; height: 40px; font-size: 16px; line-height: 40px; float: left; }
.bottom .bottom-top .bottom-cen a em{ font-style: normal; font-family:'宋体'; padding-right: 7px; }
.bottom .bottom-top .bottom-rht{ width: 200px; height: 220px; float: left; box-sizing: border-box; padding-top: 20px;}
.bottom .bottom-top .bottom-rht ul li{ display: block; width: 150px; height: 220px; float: right; }
.bottom .bottom-top .bottom-rht ul li img{ width: 140px; }
.bottom .bottom-top .bottom-rht ul li span{ display: block; width: 140px; text-align: center; line-height: 40px; height: 40px; color: #fff; }
.bottom .bottom-bot{ width: 1200px; line-height:40px; height: 40px; color: #999; margin: 0 auto; font-size: 12px; text-transform: uppercase;}
.bottom .bottom-bot span{ float: left; }
.bottom .bottom-bot a{ color: #999 !important; }
.bottom .bottom-bot a.bot-a{ float: right; }

/* 动画 */
@-webkit-keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,20%,0);transform:translate3d(0,20%,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}

@-webkit-keyframes lineone {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 100%;
  }
}
@keyframes lineone {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 100%;
  }
}

@-webkit-keyframes linetwo {
  0% {
    opacity: 0;
    width: 0;
  }

  100% {
    opacity: 1;
    width: 100%;
  }
}
@keyframes linetwo {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    width: 100%;
  }
}