body{ margin:0px auto; background: #fff}
body,td,th,input,div,select,p{font-size: 12px;color: #000; font-family: Arial, Helvetica, sans-serif}
body,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;border:0;}
a {color:#000; text-decoration:none;  }
a:hover{ color:#000; text-decoration:none}
img {border:0;}
ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;}
.clr {clear:both;}

#wrapper {background:#fff; width:1003px; padding:0 24px 0 23px; margin:0 auto;}
.header-up { text-align: right;}

#headColumn{ width:1003px; margin:0 auto;background:#FFF; padding:0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
#headColumn .logo{ width:340px; height:77px;}
#headColumn .logo2 { width:240px; height: 32px; text-align:left; border: 1px solid #ddd;}
#headColumn .logo2 input { width: 190px; height: 32px; padding: 0 0 0 10px; border: 0; outline: none;}
#headColumn .logo2 .btn-search { width: 32px; height: 32px; background: url(/images/search.svg) no-repeat center center; background-size: 80%; vertical-align: middle; border: 0; cursor: pointer;}

#headColumn .logo3{ position:relative; text-align:right;}
#headColumn .logo3 a { color:#008000; font-size:11px; line-height:30px; }
#headColumn .logo3 a:hover { color:#EBBC58; text-decoration:underline;}
#headColumn .logo3 .msn { top:10px; right:-70px; position:absolute; width:213px; height:85px;}

#navigation{margin-top:10px; margin-left: -24px; margin-right: -23px; background:#232d36; width:1050px; min-height: 88px; clear:both}
#nav{height:44px;width:100%;float:left;margin:0;}
#nav ul{float:left;width:100%; display: flex; justify-content: start; flex-wrap: wrap;}
#nav li{float:left;line-height:42px;font-size:14px;font-weight:bold;margin-top:2px;position: relative;}
#nav li.line{background:url(/images/line.png) no-repeat;width:2px;padding:0;height:42px;}
#nav li.line{
_background:none;/*IE6*/
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="images/line.png");/*IE6*/	
}
#nav li a{color:#FFF;display: block;padding:0 6px;}
#nav li>a { font-weight: 400;}
#nav li a:hover{background:#fff;color:#212121;text-decoration:none;}
#cart{background:url(/images/cart.png) no-repeat left;float:left;height:44px;width:130px;line-height:44px;color:#FFF;padding-left:30px;font-size:11px;margin-left:10px;}
#cart a{color:#fff;}
#service{height:40px; background:url(/images/top_bg.gif);width:1003px;}
.nav-level { position: relative; }
.navsub{display: none; position:absolute; top: 40px; left: 0; background:#fff;width:628px;min-height:170px;padding:15px;border:1px #000 solid}
.navsub .steam{height:200px;}
.steam .title, .sspecial .title{text-align:center;font-size:18px;color:#999;}
.nav-level:hover .navsub{display: block; transition: opacity 0.3s ease-in-out; }
.nav-level:hover>a {background: #fff; color: #212121 !important;}
#nav li ul{float:left;width:152px;}
#nav li ul li{background:none;line-height:12px;font-size:13px;width:152px;}
#nav li ul li a{float:left;padding:0;color:#666;padding:2px;font-weight:normal;}
#nav li ul li a:hover{background:none;background:#ff3300;color:#FFF;}
.disable {display: none;}
#subnav1{left:-60px;}
#subnav2{left:-90px;}
#subnav3{left:-120px;}
#subnav4{left:-150px;}
#subnav5{left:-245px;}
#subnav6{left:-390px;}
#subnav7{left:-508px;}
#subnav11{left:-100px;}
#subnav12{left:-208px;}
#subnav13{left:-308px;}
#subnav14{left:-452px;}


.top-notice {height: 30px; width: 98%; padding: 5px 1%; line-height: 30px; background: #f7f7f7;}

#box1{ background:url(/images/newproduct_01.gif); height:11px;}
#box2{ width:1003px; background:#F8F8F8; overflow:hidden;}
#boxs2{ width:1003px; display: flex; flex-wrap: wrap;}
#box3{ background:url(/images/newproduct_03.gif); height:11px;}

#bodyColumn{ width:1003px; clear:both; margin:0 auto; padding:10px 0px 0 0px; background:#FFF;}

#bodyColumn .category{background:url(/images/box_bg.jpg); height:222px; clear:both; margin-top:10px;}
#bodyColumn .category .first{width:200px; float:left}
#bodyColumn .category .first h3{ color:#C70408; padding:20px 0 0 25px; margin-bottom: 10px;}
#bodyColumn .category .second{padding-left:25px;}
#bodyColumn .category .second a{ color:#004E7F; font-size:12px; line-height:24px; margin-left: 5px;}
#bodyColumn .category .second a:hover{ text-decoration:underline}
#bodyColumn .category .more{padding-left:25px; margin-top: 5px;}
#bodyColumn .category .more a{ color:#004E7F; font-size:11px; font-weight:bold}

#bodyColumn .brand{ background:url(/images/FFwide_HP_brands.jpg); height:48px; clear:both; margin-top:5px; padding:5px 0 0 5px;}

#bodyColumn .hot{ width:1003px;background:url(/images/SEOBg.jpg) no-repeat; height:123px; clear:both; margin-top:5px; padding:20px 0 0 0;}
#bodyColumn .hot_player{ width:223px; padding-left:20px; float:left}
#bodyColumn .hot_player_link a{ font-size:11px; color:#004E7F; line-height:14pt}
#bodyColumn .hot_player_link a:hover{ text-decoration:underline}


#bodyColumn .leftColumn{ width:200px; float:left}

#bodyColumn .bar_title{ height:33px; line-height:33px; text-align:left; text-indent:10px;color:#000; font-weight:bold; background:url(images/bar_left.gif); margin-top:10px;}
#bodyColumn .bar_line{ background:url(/images/bar_mid.gif) repeat-y}
#bodyColumn .bar_bot{ background:url(/images/bar_bot.gif); height:13px;}


#bodyColumn .rightColumn{ width:790px; float:right;}
#bodyColumn .rightColumn .bar_title_long{margin-top: 15px; height:42px; line-height:42px; text-align:left; text-indent:20px; background:url(/images/title_long.gif);color:#1A65A6; font-weight:bold; font-size:18px; clear:both}
#bodyColumn .rightColumn .bar_title_long a{ color:#1A65A6; font-size:16px; font-weight:bold}

#bodyColumn .rightColumn .left_nav{ width:490px; float:left}
#bodyColumn .rightColumn .right_nav{ width:180px; float:right}
#bodyColumn .rightColumn .right_nav .bar{ background:url(/images/right_bar.gif); height:22px; line-height:22px; text-align:center; font-weight:bold}
#bodyColumn .rightColumn .right_nav .bar_line{ border:1px solid #D6D6D6; height:1%}

#bodyColumn .rightColumn .leftpart{ width:300px; float:left; text-align:center; padding-top:15px;}
#bodyColumn .rightColumn .rightpart{ width:380px; float:right; text-align:left; padding-top:15px;}
#bodyColumn .rightColumn .rightpart p{ font-size:16px; font-weight:bold; line-height: 24px; margin: 0 0 10px 0;}
#bodyColumn .rightColumn .rightpart span{ color:#F00}
#tocart0 td { font-size: 14px; line-height: 20px; padding: 3px 0;}
#tocart0 b { font-size: 14px; margin-bottom: 15px; display: block;}
#Tab1 {margin-bottom: 15px;}
.Menubox li {font-size: 14px;}

#FootColumn{ width:1003px;margin:0 auto;clear:both; background:#FFF}
#FootColumn .info{background:#fdfdfd; height:140px; padding-top:20px; clear:both; margin-top:10px;}
#FootColumn .info .nav{ width:215px; float:left; padding-left:30px;}
#FootColumn .info .nav b{ font-size:11px; color:#FF5B00;}
#FootColumn .info .nav ul{ margin:0; padding:0; list-style-type:none}
#FootColumn .info .nav li{ width:200px; display:block; float:left;text-align:left; line-height:20px;}
#FootColumn .info .nav li a{font-size:11px; color:#2a2a2a;}
#FootColumn .info .nav li a:hover{ text-align:left;line-height:20px; color: #fc7507;}

#FootColumn .other{ width:1003px; margin:0 auto; text-align:center}
#FootColumn .other .email{ width:273px; background:url(images/email_signup_bg2.jpg); height:61px; float:right;}
#FootColumn .other .pic{ width:528px; float:left}

#footer_txt {width:1003px;margin:0 auto;border-top:1px solid #CCC;padding-top:10px; color:#BBB;line-height:140%;font-size:10px;background:#F8F8F8;}
#footer_txt p { color:#BBB;line-height:140%;font-size:10px;}
#footer_txt strong{color:#999;}

#FootColumn .key{ padding:15px 0; color:#999; text-align:center; font-size:11px;}

#FootColumn  .copyright{text-align:center; clear:both; font-size:11px; padding:10px 0; color:#000;}
/*��ƷĿ¼*/
#insort { width:178px; margin:0 auto;}
#insortline { margin:0; padding:0; overflow:hidden;}
#insortnsort {text-align:left;width:130px;}
.ProTitle { width:155px; text-align:left; line-height:20px; padding-left:15px;}
.ProTitle a{ font-size:12px; color:#666;}
.ProTitleHover { width:155px; text-align:left;line-height:20px; padding-left:15px; background:#415E92;}
.ProTitleHover a{ font-size:12px; color:#fff; text-decoration:none}

.ProTitle200{ width:178px; height:22px;text-align:left; padding-left:10px;}
.ProTitle200 a{ font-weight:100; font-size:12px;}
.ProTitleHover200 { width:190px; height:22px;text-align:left; padding-left:10px;}
.ProTitleHover200 a{ font-weight:100; font-size:12px;}

.classstyle{width:178px; text-align:left; padding: 5px 0; line-height:20px;font-weight:bold;}
.classstyle a{ color: #003399; text-decoration:none; font-size:14px; text-indent:10px;}
.classstyle a:hover{ color: #003399; text-decoration:none; }
.classstyle span{ color:#FF0000; font-size:10px; font-weight:100}
.sort{VISIBILITY: hidden; WIDTH: 190px; position:absolute;margin-top:0px; overflow:hidden; z-index:999; background-color:#FFFFFF; border:1px solid #858585}
/*��ƷĿ¼*/

.newslist{text-align:left;overflow:hidden}
.newslist a { color:#1E7EC8; font:700 12px/20px Verdana, Geneva, sans-serif;}
.newslist.newsheader{line-height:30px;height:30px;text-align:left;margin-left:15px;border-bottom:solid 1px #D3D3D3;color:#4E637E;font-size:14px;font-weight:bold}
.newsheader{line-height:30px;height:30px;text-align:left; border-bottom:solid 1px #D3D3D3;color:#4E637E;font-size:14px;font-weight:bold}
.newslist .box5{width:310px;float:left;margin-top:5px;margin-left:5px;overflow:hidden;height:16px}
.newslist .box5 a:hover{color:#454545}

#showpage {  text-align:center;line-height:30px; font-size:12px;clear:both;  color:#000; font-weight:100; margin:10px 0;}
#showpage a{ font-family:arial; text-decoration:none; color:#000; font-size:12px; font-weight:bold; background:#fff; border:1px solid #666; padding:0 5px;}


.hwpro{ float:left; width:196px;overflow:hidden;}
.hwpro .hw00{ float:left; width:200px;overflow:hidden;}
.hwpro .hw_line{width:174px; border:1px solid #E8E8E8; background:#FFF; margin:10px auto}
.hwpro .hw1{ text-align:center; width:170px; margin:0 auto;margin-top:10px;height:150px; overflow:hidden;}
.hwpro .hw1 a img{ border:0; max-width:160px; max-height:150px;  width:expression(this.width > 160 && this.height < this.width*150/160 ? 160: true);  height: expression(this.height > 150 ? 150: true);margin-top: expression(this.height < 150 ? (150-this.height)/2: 0);}
.hwpro .hw2{ width:160px;height:121px; margin:0 auto;text-align:center; font-size: 13px; line-height: 18px;}
.hwpro .hw2 b{ color:#000; font-size:13px;}
.hwpro .hw2 br{ line-height:7px;}
.hwpro .hw2 a{color:#666; font-size:12px;}
.hwpro .hw2 span{ color: #F30; font-size:15px; font-weight:bold}

#hw3{ width:120px;margin:0 auto;text-align:center; font-size: 13px; line-height: 18px;}
#hw3 b{ color:#000; font-size:13px;}
#hw3 br{ line-height:7px;}
#hw3 a{color:#666; font-size:13px;}
#hw3 a:hover{ text-decoration:underline}
#hw3 span{ color: #F60; font-size:13px; font-weight:bold}


.hw00{ width:230px; padding:14px 10px 15px 10px; position: relative;}
.hw00 .hw_line{width:230px; height:100%; padding:1px; margin:auto; border: 1px solid #ddd; transition: all .3s ease-in-out;}
.hw00:hover .hw_line { border: 1px solid #415E92;}
.hw00 .hw1{ text-align:center; width:230px; margin:0 auto; height:200px; overflow:hidden;}
.hw00 .hw1 a img{ border:0; max-width:230px; max-height:200px;  width:expression(this.width > 230 && this.height < this.width*200/230 ? 230: true);  height: expression(this.height > 200 ? 200: true);margin-top: expression(this.height < 200 ? (200-this.height)/2: 0); }
.hw00 .hw2{ width:230px; margin:0 auto;text-align:center; font-size: 14px; line-height: 18px;}
.hw00 .hw2 b{ color:#000; font-size:13px;}
.hw00 .hw2 br{ line-height:7px;}
.hw00 .hw2 a{ display:block; color:#1E7EC8; font:100 12px/20px Verdana, Geneva, sans-serif; height: 60px; overflow: hidden; text-overflow: ellipsis; /* white-space: nowrap; */}
.hw00 .hw2 span{ color: #F30; font-size:15px; font-weight:bold}
.hw00:nth-child(4n)::after { content: ""; position: absolute; top: 0; right: -10px; width: 57px; height: 58px; background: url(images/hot.png) no-repeat; display: block; }

.hw00 .hw3{ width:120px;margin:0 auto;text-align:center; line-height: 18px;}
.hw00 .hw3 b{ color:#000; font-size:14px;}
.hw00 .hw3 br{ line-height:7px;}
.hw00 .hw3 a{color:#666; font-size:14px;}
.hw00 .hw3 a:hover{ text-decoration:underline}
.hw00 .hw3 span{ color: #F60; font-size:14px; font-weight:bold}

#prohref a{ display:block; font-size:13px; width:auto; overflow:hidden; height:20px; color:#333; text-align:center; line-height:20px; float:left; margin:0 3px 3px 3px; text-transform:capitalize;  display:block; border:1px #ddd solid;}
#prohref a:hover{ color:#333; border:1px #85A8CD solid;}

.customer-products {display: flex;flex-wrap: wrap; width:100%; justify-content: space-between;}
.customer-products .hw00 {width: 188px; padding: 15px 0;}
.customer-products .hw00 .hw_line,
.customer-products .hw00 .hw1,
.customer-products .hw00 .hw2 {width: 188px;}

.whatsapp-box {position: fixed; bottom: 10px; right: 10px; z-index: 99999;}
.whatsapp-icon {display: flex; justify-content: center; align-items: center; cursor: pointer; width: 60px; height: 60px; border-radius: 50%; background: #25d366; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); transition: all 1s ease-in-out;}
.whatsapp-icon:hover {background: #011b03;}  

.whatsapp-message {display: flex; flex-direction: column; position: absolute; bottom: 0; right: 0; z-index: 999;     width: calc(100vw - 6px * 2); max-width: 400px; max-height: calc(100vh - 6px - 6px); border-radius: calc(60px / 2 + 2px); background: #fff linear-gradient(180deg, rgb(37 211 102), rgb(37 211 102) calc( 60px *0.91667), rgb(37 211 102 / 4%) calc( 60px *0.91667), rgb(37 211 102 / 4%)); text-align: left; overflow: hidden; transform: scale3d(0, 0, 0); opacity: 0; transition: max-height .2s ease-out, opacity .4s ease-out, transform 0s linear .3s;}
.whatsapp-open {opacity: 1; transform: scaleX(1); transition: max-height .2s ease-out, opacity .2s ease-out, transform 0s linear;}

.whatsapp-header {position: relative; padding-top: 14px; padding-left: 15px; height: calc( 60px *0.91667); font-size: 20px; line-height: 28px; font-weight: bold; color: #fff;}
.joinchat__close { position: absolute; top: calc(50% - 28px / 2); right: 24px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,.4) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath d='M24 2.4 21.6 0 12 9.6 2.4 0 0 2.4 9.6 12 0 21.6 2.4 24l9.6-9.6 9.6 9.6 2.4-2.4-9.6-9.6L24 2.4z'/%3E%3C/svg%3E") 50% no-repeat; background-size: 12px; cursor: pointer; transition: background-color .3s ease-out; }
.joinchat__close:hover { background-color: rgba(0,0,0,.6) }
.joinchat__close:active { background-color: rgba(0,0,0,.7) }

.whatsapp-body {position: relative; padding: 30px 0 0 0;}
.joinchat__message { position: relative; min-height: 56px; padding: 15px 20px; margin: 0 26px 26px; border-radius: 26px; background: #fff;  color: #4a4a4a; word-break: break-word; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1); transform: translateZ(0); font-size: 16px; }
.joinchat__message span {display: block; position: absolute; left: -18px; bottom: 18px; width: 19px; height: 16px; background: url(../images/message-bg.png) no-repeat center center; }
.whatsapp-bottom {padding: 10px 0; height: 80px; text-align: right;}
.whatsapp-bottom a { float: right; display: flex; flex-direction: row; justify-content: center; align-items: center; margin-right: 10px; width: 160px; height: 60px; border-radius: 30px; background: #25d366; font-size: 16px; font-weight: bold; color: #fff; transition: all .3s ease-in-out;}
.whatsapp-bottom a p {margin-left: 10px;}
.whatsapp-bottom a:Hover {background: rgb(calc( 37 + 50) calc( 211 + 50) calc( 102 + 50));}

@media (max-width: 768px) {
  .whatsapp-box {bottom: 70px;}
}
#prohref {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 5px;
}