/* Write your styles */

/* thai */
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 700;
  src: local('Trirong Bold'), local('Trirong-Bold'), url(http://www.topcrab.com/font/1w1f0NWTNdu-4c2BpVVm9yEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0E01-0E5B, U+200B-200D, U+25CC;
}

#scroller {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}

/* vietnamese */
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 700;
  src: local('Trirong Bold'), local('Trirong-Bold'), url(http://www.topcrab.com/font/BCXKl8QkVfYV6WlDiCjDUCEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 700;
  src: local('Trirong Bold'), local('Trirong-Bold'), url(http://www.topcrab.com/font/p2hcSmKd3NwzGvJyTy03YiEAvth_LlrfE80CYdSH47w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Trirong';
  font-style: normal;
  font-weight: 700;
  src: local('Trirong Bold'), local('Trirong-Bold'), url(http://www.topcrab.com/font/0KkcdNa49hXaiBFcGFXf1vk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

*{-webkit-tap-highlight-color:rgba(255,255,255,0);box-sizing: border-box;padding:0;margin:0;list-style:none;font-style:normal;font-weight:400;text-decoration:none;-webkit-text-size-adjust:none;margin:0;padding:0;font-family: 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif; }
html,body{width:100%;height:100%;font-size: 16px;color:#000;line-height: 1.8;}
strong{ font-weight:700}
table{border-collapse:collapse;width:100%;}
a img{border:0;}
input,button,textarea,select{font-family:inherit;}
a{outline:none;text-decoration:none;}
a:hover{text-decoration:none;}
img,input{vertical-align:middle;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:"\20";clear:both;height:0;}
* html .clearfix{zoom:1;}
.clear{clear:both;overflow:hidden;height:0px;line-height:0;}
:first-child+html .clearfix{zoom:1;}
.clearfix{zoom:1;}
.clearfix{zoom:1;}

a,area{blr:expression(this.onFocus=this.blur());}
:focus{-moz-outline-style:none;}
input,textarea{-webkit-appearance:none;/*去除input默认样式*/}
/*-webkit-overflow-scrolling : touch;*/

body{ max-width:640px; min-width:320px; width:100%;}

.bannerSlide{ width:100%; overflow:hidden; position:relative;}
.bannerSlide .swiper-wrapper img{ width:100%; height:auto;}
.bannerSlide .pagination{ position:absolute; left:0;bottom:0; text-align:center; width:100%; z-index:1000;}
.bannerSlide .swiper-pagination-bullet-active{ background:#fff;}
.bannerSlide .swiper-pagination-bullet{ background:#fff;}

.bannerSlide-prod .swiper-pagination-bullet{ background:#fff;}

.nav12{margin:0 auto; background:#ebe9e2; display:block; position:relative; padding-top:20px; padding-bottom:10px;}
.nav12 ul{ margin:0 10px;}
.nav12 li{ float:left; text-align:center; width:25%; position:relative; margin-bottom:10px;}
.nav12 li a{ display:block;}
.nav12 li i{ position:absolute; right:8px;top:-8px; width:20px; height:20px; font-size:7px; font-weight:700; text-align:center; line-height:20px; background:#ff1a1a; border-radius:50%; color:#fff;}
.nav12 li img{width:60%; height:auto;}
.nav12 li h3{ color:#fff; font-size:13px;padding-top:4px}
.nav12 li .txt{ font-size:10px; color:#666; line-height:12px;}

.clear{ display:block; width:100%; height:1px;}

.index_1{ width:100%; height:auto; display:block; position:relative;}
/*.back{

width: 100%;
height: 100%;
display: block;
z-index:1px;
}*/


.dingzhiUl{ overflow-x:auto;overflow-scrolling: touch; margin-top:-75%;  padding:30px 0; z-index:100px;}
.dingzhiUl ul{ width:200%;}
.dingzhiUl ul li{ float:left; color:#fff; font-size:.8rem; padding-left:30px; position:relative; width:33%; }
.dingzhiUl ul h4{ font-size:1.4rem; font-family:"simsun"}
.dingzhiUl ul p{ line-height:1.2rem}

@-webkit-keyframes fadeInRight{
0%{opacity:0;
-webkit-transform:translateX(20px)}
100%{opacity:1;
-webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRight{
0%{opacity:0;
-moz-transform:translateX(20px)}
100%{opacity:1;
-moz-transform:translateX(0)}
}

.index_2{ width:100%; margin:0 auto; text-align:center; padding-top:0px; background:#ebe9e2; display:block;}
.index_2 ul{ width:90%; margin:0 auto;}
.index_2 ul li{ width:45%; margin:4% 2.5%; float:left;}

.card { overflow:hidden; background:#ebe9e2;}

.card .nav{width:90%;margin:30px auto 0; font-size:12px;}
.card .nav span{cursor:pointer;border:1px solid #000;float:left;width:33.3%;height:42px;text-align:center;line-height:42px;}
.card .nav span:nth-child(1){border-radius:21px 0 0 21px}
.card .nav span:nth-child(3){border-radius:0 21px 21px 0}
.card .nav span.c{border-left:0;border-right:0}
.card .nav span.cur{background:#000;color:#fff}
.card .src{ overflow: hidden; transition: all 0.3s ease 0s; width: 300%; height:516px;}
.card .con{ float:left; width:100%;}
.card .src .img{ text-align:center;margin-top:-50px; height:270px;padding-top:70px;}
.card .src .img img{max-width:375px; height:auto; margin:0 auto;}
.card .list{padding:0 0 30px 0;margin-top:-60px; background:url(/m/assets/img/card-x.png) no-repeat 105px 0 /contain;}
.card .list a{transition:all .3s ease;position:relative;background:url(/m/assets/img/icon-x.png) no-repeat 56% 50% / 26px 21px; display:block; position:relative; margin:0 5% 0 120px;}
.card .list .cd { position:absolute; width:80px; height:auto; top:6px; left:-105px;}
.card .list .cd img{ width:100%; height:auto;}
.card .list .bor{height:60px;padding:12px 0;border-bottom:1px solid #cccccc;}
.card .list .xx{display:inline-block;background:url(/m/assets/img/icon-xx.png) no-repeat; background-size:100%; width:10px;height:10px;vertical-align:middle;margin-right:4px; margin-bottom:2px;}
.card .list .cx{display:inline-block;background:url(/m/assets/img/icon-cx.png) no-repeat; background-size:100%;width:10px;height:10px;vertical-align:middle;margin-right:4px; margin-bottom:2px;}
.card .list p{font-family:arial,"\5b8b\4f53";line-height:18px; font-size:12px;}
.card .list .jiage2{position:absolute;right:10px;top:0;font-size:18px;line-height:60px}
.card .list .jiage2 em{font-size:12px}


.liucheng { position:relative; background:#0c0e0d; padding-bottom:20px;padding-top:10px;}
.liucheng .oh{ overflow-x:auto;overflow-scrolling:touch; margin:0px 0;}
.liucheng .mq{width:1200px; position:relative;}
.liucheng .l{ position:absolute; left:6px;top:50%;margin-top:-21px; width:22px; height:42px; background:url(../images/icon-l.png) no-repeat; background-size:100%;
    -webkit-animation:fadeInRight 2s .2s ease both infinite;
    -moz-animation:fadeInRight 2s .2s ease both infinite;
}
.liucheng ul{ padding-left:40px;}
.liucheng li{ float:left; width:220px; height:314px; position:relative;margin-right:10px;}
.liucheng li img{ width:100%; height:100%; border-radius:10px; overflow:hidden;}
.liucheng li .t{ height:105px; overflow:hidden; position:absolute; width:90%; left:5%; bottom:0; text-align:center; font-size:.75em;display: table;}
.liucheng li .t span{vertical-align:middle; height:105px;display: table-cell;}

.footter{ width:100%; position:fixed; bottom:0; left:0;}
.footter ul{ width:100%; position:absolute; bottom:0; left:0;}
.footter ul li{ width:20%; float:left; height:100%;}


.newsIn { margin:0 16px;}
.newsIn .text_top{ margin:0;margin-top:10px;}
.newsIn .item a{position:relative;display:block;padding:16px 0; border-bottom:.5px solid #666;}
.newsIn .item:last-child a{ border:0;}
.newsIn .item .img{ float:left; width:110px; height:83px; overflow:hidden; margin-right:16px;}
.newsIn .item .img div{display: table-cell;vertical-align:middle; height:83px; }
.newsIn .item .img img{ width:100%; height:auto;vertical-align:middle;border-radius:8px; }

.newsIn .item h3{ font-size:14px; color:#000; line-height:18px;  margin-bottom:5px;}
.newsIn .item p{ font-size:10px; color:#999999; height:28px; line-height:14px; overflow:hidden;}
.newsIn .item time{ font-size:10px; color:#999; line-height:12px; font-style:italic;}
.newsIn .video { padding:16px 0 0; overflow:hidden;}

.newsIn .video li{ float:left; width:48%; margin-right:4%; font-size:12px; margin-bottom:10px;}
.newsIn .video li:nth-child(even){margin:0;}
.newsIn .video .img{border-radius:8px;overflow:hidden; margin-right:16px;width:100%;border:0.5px solid #333; position:relative;}
.newsIn .video .img img{width:100%;height:auto; max-width:300px; max-height:170px; border-radius:8px;}
.newsIn .video .img:before{ opacity:.9; content:"\20"; width:30px; height:30px; background:url(../images/icon-play.svg) no-repeat; position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px}
.newsIn .video li p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:4px;}


.Innav{ margin:16px 16px 0;}
.Innav ul{ }
.Innav li{ float:left; width:33.333%;  border:1px solid #000; text-align:center; border-right:0; transition:all .3s ease;}
.Innav li a{ display:block; font-size:12px;height:40px; line-height:40px; }
.Innav li:first-child{ border-radius:40px 0 0 40px;}
.Innav li:last-child{ border-radius:0 40px 40px 0; border-right:1px solid #000;}
.Innav li.cur{ background:#000;}
.Innav li.cur a{ color:#fff;}

.Innav4 li{ width:25%;}



.btnMove{ text-align:center; padding:16px 0;}
.btnMove a{height:40px; line-height:40px; color:#fff;display:block; color:#fff; background:#0079ff; border-radius:4px; }
.btnMove a.load{ text-indent:-8888px; height:40px; line-height:40px; color:#fff;display:block; color:#fff; background:#0079ff url(../images/downloadGif.svg) no-repeat 50% 50% ; border-radius:4px; }

.newsDetail{ margin:20px 16px 0; border-bottom:0.5px solid #666; padding-bottom:40px;}
.newsDetail .h1{ line-height:1.4}
.newsDetail time{ color:#666666; font-size:12px;}
.newsDetail time span{ margin-left:16px;}
.newsDetail article{ margin-top:16px; border-top:1px solid #ddd;padding-top:16px;}
.newsDetail article img{ max-width:100%; height:auto;}

.newsDetail article p{ margin-bottom:20px;}
.newsDetail article p img{ margin-bottom:10px;}

.newsDetail .tag {margin-top:16px;}
.newsDetail .tag span{margin:0 4px 4px 0; display:inline-block; padding:2px 10px; font-size:12px;border:.5px solid #333; color:#000; border-radius:4px;}

.videoDetail{ margin:16px 0 0 0;}


.helpWa{ margin:16px; border-bottom:.5px solid #666; padding-bottom:16px;}
.helpWa:last-child{ border:0;}
.helpWa .tit{ text-align:center; font-size:22px;}
.helpWa .txt{ font-size:12px;}

.pro-list{ background:#eeeeee; padding:20px 0 20px 10px;}
.pro-list *{ font-family:Times New Roman;}
.pro-list .item{float: left; width: 50%; padding-right: 10px; padding-bottom: 10px; float:left;}
.pro-list .item a{ display:block; background:#000000;border-radius:12px;  position:relative;}
.pro-list .item .tips{text-align:center; padding:5px 3px 0; text-align:center; font-size:11px; box-shadow:0 0 6px rgba(0,0,0,.2); line-height:13px; width:40px; height:40px; position:absolute; right:10px;top:10px; border:2px solid #fff; background:red; color:#fff; border-radius:50%; z-index:10;}
.pro-list .item .tips-green{ background:#6fd120;}
.pro-list .item .img{ position:relative;border-radius:12px 12px 0 0; min-height:100px;}
.pro-list .item .img .bg{ width:100%; height:auto;border-radius:12px 12px 0 0;}
.pro-list .item .img .kp{ width:80%; position:absolute; left:10%; top:36%; height:auto; border-radius:8px; box-shadow:0 0 20px rgba(0,0,0,.9);}
.pro-list .item .guige{ position:absolute; left:0;bottom:0; width:100%; padding:5px 16px;  font-size:12px;  color:#fff;  line-height:18px;
background: -moz-linear-gradient(top, rgba(255,0,0,0.6) 0%, rgba(255,0,0,0.6) 1%, rgba(255,0,0,0.99) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,0,0,0.6) 0%,rgba(255,0,0,0.6) 1%,rgba(255,0,0,0.99) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,0,0,0.6) 0%,rgba(255,0,0,0.6) 1%,rgba(255,0,0,0.99) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.pro-list .item .guige:before{ content:"\20"; background:url(/m/assets/img/bg-zsi.png) no-repeat; background-size:34px; width:40px; height:50px; position:absolute; right:16px;top:14px;}
.pro-list .item .guige .x{ background:url(/m/assets/img/icon-x1.png) 0 50% no-repeat; background-size:10px; padding-left:15px;}
.pro-list .item .guige .c{ background:url(/m/assets/img/icon-c.png) 0 50% no-repeat; background-size:10px; padding-left:15px;}
.pro-list .item .textb{ color:#fff; padding:10px 16px 10px 0; font-size:14px;}
.pro-list .item .textb .r{ float:right;text-align:right; margin-left:8px;}
.pro-list .item .textb .jg1{ color:#fff; font-size:30px; font-weight:700; line-height:30px;}
.pro-list .item .textb .jg2{ color:#666666; font-size:14px; line-height:14px; text-decoration:line-through;}
.pro-list .item .textb .l{ float:right; text-align:right; line-height:14px;font-size:12px; width:45%}
.pro-list .item .textb .l span{ font-size:14px;}
.pro-list .item.sale .textb .jg1{ color:#ff0000; font-size:30px; font-weight:700; line-height:30px;}

.bobmAn{ position:relative;}
.navs { position:relative; margin-bottom:20px; margin-right:10px;}
.navs li{  text-align:center; border:1px solid #000; float:left; width:50%;}
.navs li a{ display:block; color:#000; font-size:14px; height:36px; line-height:36px;}
.navs li.cur{ background:#000;}
.navs li.cur a{ color:#fff;}
.navs li:first-child{ border-radius:40px 0 0 40px;border-right:0;}
.navs li:last-child{ border-radius:0 40px 40px 0; border-left:0;}

.jiazai{ display: inline-block;
    height: 42px;
    line-height: 42px;
    border-radius: 30px;
    padding: 0 40px;
    border: 2px solid #000;
    color: #000;
    font-size: 14px;}
	

.pro_m{ background:#f0f0f0;}
.mpro{ width:80%; margin:10px auto; text-align:center; background:#f0f0f0;}
.mpro h2{ margin-top:1em; text-align:left; font-size:1.5em; font-weight:normal; color:#c14744;}
.mpro p{ text-align:left;}
.mpro p font{ color:#c14744;}

.about_m{ width:90%; margin:0 auto;}

.tit-line {text-align: center;margin-bottom:40px;}
.tit-line h2{color: #383838;font-size:28px;text-transform: uppercase;margin: 0 0 15px;}
.tit-line h2 span {display: block;font-size:18px;}
.line-wrap {width: 100%;height: 1px;background: #ccc;margin-top:10px}
.tit-line .line-wrap .line {position: relative;top: -1px;height: 3px;background: #bf001a;width: 80px;margin: 0 auto;}


.title-zi{border:1px solid #ededed;font-size:14px; padding:0 15px; line-height:32px}
.title-zi .pull-right{font-size:12px;color:#8a8a8a}
.title-zi .pull-right a{color:#8a8a8a}
.title-zi a:hover{color:#c8161d;}

.contact{background:url(../img/contact.jpg) center center; background-size:cover; width:100%; color:#fff; font-size:14px; line-height:30px;padding:40px 0;}
.contact a{color:#979797;}
.contact a:hover{color:#fff;text-decoration:underline !important}
.contact .tou{font-size:18px; color:#fff; margin-bottom:25px; text-transform:uppercase; line-height:normal}
.contact .tou span{font-size:12px; margin-left:10px;}
.contact .left{padding-right:10px;}
.contact .left .tou{margin-bottom:5px;}
.contact .left form{margin-top:15px;}
.contact .left form .hang{position:relative; padding-left:50px; margin-bottom:10px}
.contact .left form .hang span{position:absolute; left:0; top:0; line-height:28px}
.contact .left form textarea,.contact .left form input{width:100%; height:28px; background:#eaeaea; padding:0 8px; border:0; color:#333}
.contact .left form textarea{padding:0 8px; line-height:28px;resize: vertical;}
.contact .left form button{width:74px; height:28px; background:#fff; font-size:12px; color:#3c3c3c; border:0; outline:none;}
.contact .middle{border-left:1px dashed rgba(255,255,255,0.26);border-right:1px dashed rgba(255,255,255,0.26); padding:0 40px 10px}
.contact .middle .tou{margin-bottom:15px;}
.contact .ditu{padding-left:10px;}
.contact .ditu img{max-width:100%; border:3px solid #fff}