@charset "utf-8";

/* less set */
@default:#660399;
@light:lighten(@default, 30%);
@dark:darken(@default, 15%);
@blue:#0385de;

/* ----------  public css ---------- */
html {background:transparent; height:100%; margin:0; padding:0; outline:0; vertical-align:top; }
body { font-size:14px; color:#666; padding-top:90px;}
h1, h2, h3, h4, h5, h6{font-family:Microsoft JhengHei,Arial,Helvetica,sans-serif; font-weight:normal;}
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}/*html5*/

.OWT{white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
.BScover{background-position:center top; background-repeat:no-repeat; -moz-background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-size: cover;}
.outside_shadow(@x: 0, @y: 0, @blur: 4px, @color: #999){
	-moz-box-shadow:@x @y @blur @color;
	-webkit-box-shadow:@x @y @blur @color;
	-khtml-box-shadow:@x @y @blur @color;
	box-shadow:@x @y @blur @color;
}
.inside_shadow(@x: 0, @y: 0, @blur: 4px, @color: #ccc){
	-moz-box-shadow:@x @y @blur @color inset;
	-webkit-box-shadow:@x @y @blur @color inset;
	-khtml-box-shadow:@x @y @blur @color inset;
	box-shadow:@x @y @blur @color inset;
}
.gradient(@topcolor,@bottomcolor){
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, @topcolor), color-stop(1, @bottomcolor));
	background:-moz-linear-gradient(top, @topcolor 5%, @bottomcolor 100%);
	background:-webkit-linear-gradient(top, @topcolor 5%, @bottomcolor 100%);
	background:-o-linear-gradient(top, @topcolor 5%, @bottomcolor 100%);
	background:-ms-linear-gradient(top, @topcolor 5%, @bottomcolor 100%);
	background:linear-gradient(to bottom, @topcolor 5%, @bottomcolor 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@topcolor, endColorstr=@bottomcolor,GradientType=0);
	background-color:@bottomcolor;
}
.inline-border {outline:5px solid rgba(255, 255, 255, 0.35); outline-offset: -5px;}

a {color:#333; text-decoration:none;}
a:hover {color:@default; text-decoration:none;}
::-moz-selection{background-color:@blue; color:#fff;}
::selection {background-color:@blue; color:#fff;} 
.price, .date{ font-weight:bold; font-family:Tahoma,Geneva,sans-serif; }

.gotop{ z-index:999; width:50px; line-height:50px; display:block; text-align:center; background-color:#999; border-radius:50%; color:#fff; font-size:26px; position:fixed; right:50%; bottom:30px; margin-right:-550px; transition:all 0.5s ease 0s;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);filter:alpha(opacity=50);opacity:0.5;.outside_shadow(@x: 0, @y: 0, @blur: 4px, @color: #333)}
.gotop:hover{color:#fff; background-color:@default;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);opacity:1;}

/*nodata*/
.nodata{ line-height:80px; border:2px solid #eee; font-size:1.6em; text-align:center; color:#aaa; background-color:#f9f9f9; border-radius:5px;  .inside_shadow(@x: 0, @y: 0, @blur: 10px, @color: #ddd)}
.nodata .font_icon{padding-right:10px; font-size:1.1em;}

.quote_p{ position:relative; margin-bottom:20px; line-height:24px; padding:10px 15px 10px 75px; font-size:14px; background-color:#f6f6f6; border-radius:5px;height:auto!important;height:48px;min-height:48px;}
.quote_p:before{ position:absolute; left:20px; top:20px; font-size:3em; color:#e0e0e0;}


/* button & input style */
.button {padding:5px 25px; font-size:14px; border-radius:3px;  display:inline-block; line-height:20px; border:1px solid @default; color:@default; padding:10px 25px; transition:all 0.5s ease 0s;}
.button:hover{  background-color:@default; border-color:@dark; color:#fff;}

.button.gray{ background-color:#ccc;}
.button.gray:hover{background-color:@dark;}

.readmore{font-family:Tahoma,Geneva,sans-serif; line-height:20px; display:inline-block; color:#8b8b8b;}
.readmore:hover{ color:@default;}
.readmore span{ padding-left:5px; color:@default;}

.brtools{ clear:both; height:34px; }
.detail .brtools{ margin-top:30px;}

.container{ width:960px; margin-left:auto; margin-right:auto;}
.container .col-1{width:220px; margin-right:30px;}
.container .col-2{ width:710px;}
.container.contact .col-1{ width:350px;}
.container.contact .col-2{ width:580px;}

/* ----------  header ---------- */
/* header */
.header{height:60px; padding:15px 0; width:100%; box-shadow:0 0 0 2px  rgba(0,0,0,0.2); background-color:rgba(0,0,0,0.8); position:fixed; left:0; top:0;  z-index:2;}
.header.fixed-top{z-index:10; padding:0;}
.header .container{ position:relative;}
.header h1.logo{ position:absolute; left:0; top:0; z-index:2; }
.header h1.logo a{ display:block;height:60px; margin:0;}
.header h1.logo a img{ max-height:100%;}

.topcart{ padding-right:20px; padding-left:20px; background:url(../images/header_cart.png) no-repeat left center; display:inline-block;}
.topcart span.price{ color:#fff;}


/* menu */
.menu {padding:10px 0; height:40px; position:relative; float:right;}
.sf-menu { height:40px;}
.sf-menu ul {position:absolute; top:-999em;width:16em;}
.sf-menu ul li {width:100%; margin:0; padding:0;}
.sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {position:relative; zoom:1; float:left; display:inline;}
.sf-menu > li::before{ content:""; height:16px; width:1px; position:absolute; left:0; top:12px; background-color:#fff; overflow:hidden;}
.sf-menu > li:first-child::before, .sf-menu > li:last-child::before{ display:none;}
.sf-menu li a{display:block; color:#fff; line-height:20px; font-size:14px; padding:10px 25px; transition:all 0.5s ease 0s; }
.sf-menu li.sfHover>a, .sf-menu>li>a:hover{ color:@light;}
.sf-menu>li.current>a{ color:@light;}
.sf-menu>li.current>a:hover{ color:#fff;}
.sf-menu li li, .sf-menu li.sfHover li{ clear:both; margin:0; padding:0; border-right:0;}
.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; color:#fff; text-align:left; font-size:14px;line-height:20px; background-color:@default;}
.sf-menu li.sfHover li.sfHover a, .sf-menu li.sfHover li.sfHover li.sfHover a, .sf-menu li li a:hover, .sf-menu li.sfHover li a:hover, .sf-menu li.current li a:hover, .sf-menu li.sfHover li.sfHover a:hover, .sf-menu li.sfHover li.sfHover li a:hover, .sf-menu li.sfHover li.sfHover li.sfHover li a:hover{ background-color:@blue;}
.sf-menu li a.sf-with-ul {padding-right:40px;}
.sf-sub-indicator {position:absolute; right:20px; top:12px; text-align:center; overflow:hidden;font-family:'FontAwesome';speak: none;font-weight: normal;font-variant: normal;line-height:100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; font-size:15px;}
.sf-sub-indicator:before{content: "\f0d7";}
.sf-menu li li .sf-sub-indicator{display: block; top:14px; right:10px; font-size:12px;}
.sf-menu li li .sf-sub-indicator:before{content: "\f0da";}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {left:0; top:40px; z-index:999; border:0; padding-top:21px;}
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:16em; 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;}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left:16em; top:0;}
.toplink, .mobilemenu{ display:none;}
.sf-menu li.language{ margin-left:20px;}
.sf-menu li.language > a{ background-color:@default; border-radius:3px; padding:5px 30px 5px 15px; margin-top:5px;}
.sf-menu li.language > a:hover{ background-color:@light; color:#fff;}
.sf-menu li.language > a .sf-sub-indicator{ right:10px;}
.sf-menu li.language.sfHover ul{top:25px; left:auto; right:0; width:10em;}

.header.fixed-top .sf-menu li:hover ul, .header.fixed-top .sf-menu li.sfHover ul{ padding-top:10px;}

/* banner */
.banner{ clear:both; width:100%; margin:0; position:relative;  overflow:hidden;}
.mainslider{width:100%;height:640px; position:relative; list-style:none; margin:0 auto; padding:0; background:url(../images/loading.svg) center no-repeat;}
.mainslider li{width:100%; height:100%; position:relative; overflow:hidden; .BScover}
.mainslider li .link{width:100%; height:100%; display:table;}
.mainslider li .link h4{ display:table-cell; vertical-align:middle; text-align:center; color:#fff; font-size:48px; font-style:italic;}
.mainslider li .link h4 span{ display:inline-block; padding:10px; background-color:rgba(0,0,0,0.3); font-weight:bold;}

.rslides_nav{ width:40px; height:80px; text-align:center; line-height:80px; position:absolute; z-index:1; top:50%; margin-top:-40px; background:url(../images/pop_side.png); border-radius:5px; font-size:20px; color:#fff;}
.rslides_nav:hover{ background:rgba(105,73,50,0.6); color:#fff;}
.rslides_nav.next{ right:40px;}
.rslides_nav.prev{ left:40px;}

.rslides_tabs{margin:0; height:16px; position:absolute; left:50%; bottom:20px;}
.rslides_tabs li{float:left; margin-left:10px; position:relative; right:50%;}
.rslides_tabs a{cursor:pointer; display:block; width:16px; height:16px;  border-radius:50%; position:relative; overflow:hidden; text-indent:-999px; transition:all 0.5s ease 0s; background-color:#ccc;}
.rslides_tabs li.rslides_here a, .rslides_tabs li.rslides_here a:hover{background-color:@dark;}
.rslides_tabs a:hover{ background-color:@light;}

/* ----------  footer ---------- */
.footer {clear:both; background-color:#000;}

.copyright{ padding-top:30px; padding-bottom:50px; color:#fff; line-height:24px; position:relative;}
.copyright .company-name{ color:#fff; margin:0 0 10px; font-size:18px;}
.copyright .luckygroup{ position:absolute; right:0; top:30px; text-align:right;}
.qrcode{ width:100px; padding-bottom:10px;}

.copyright a{ color:@light; padding:0 5px; transition:all 0.5s ease 0s;}
.copyright a:hover{ color:#fff;}
.copyright .gray{ color:#666;}
.copyright .gray:hover{color:@light;}


/* ----------  index css  ---------- */
/* main aboutus */
.content{ margin-top:30px;  margin-bottom:30px;}
.mainaboutus h3{color:#000; line-height:30px; font-size: 30px; margin-bottom:15px; text-align:center; color:@default;}
.mainaboutus .btn-group{ margin-top:15px; text-align:center;}
.mainaboutus .aboutinfo {line-height:30px; font-size:16px; color:#999;  overflow:hidden;}
.mainaboutus .btn-group .button{ padding:10px 35px;}


/* main sort*/
.mainproduct{ clear:both; width:100%; background-color:#edf1f0}
.mainproduct .container{ position:relative;}
.mainproduct .main-sort{padding:20px 0; margin:0 30px;}
.main-sort ul{clear:both; overflow:hidden; }
.main-sort li{width:260px; float:left; padding: 20px;}

.main-sort li .sort-link{ display:block; height:130px; background-color:#000; position:relative; border-radius:5px; overflow:hidden; background-position:center center; background-repeat:no-repeat; background-size:contain; transition:all 0.5s ease 0s;}
.main-sort li .sort-link:hover{ -webkit-box-shadow:0 0 25px rgba(0,0,0,0.25); box-shadow:0 0 25px rgba(0,0,0,0.25);}
.main-sort li .sort-name{ margin-left:130px; line-height:25px; color:@default; font-size:14px; display:block; transition:all 0.5s ease 0s; overflow: hidden; height:50px;}
.main-sort li .sort-name:hover{ color:@light;}
.main-sort li .button{margin-left:130px; margin-top:5px; padding:0 5px; line-height:25px; font-size:12px; box-sizing:border-box;}
.main-sort li .info{ margin-top:10px; line-height:20px; max-height:40px; color:#999; overflow:hidden;}

.main-sort ul:hover li .sort-link{ opacity:0.5;}
.main-sort ul:hover li .sort-link:hover{ opacity:1;}

.mainproduct .container .br_prev, .mainproduct .container .br_next{position:absolute; top:50%; margin-top:-30px; display:block; overflow:hidden; line-height:60px; width:30px; height:60px; z-index:2;  color:#999; text-align:center; transition:all 0.5s ease 0s; font-size:20px; border-radius:3px;}
.mainproduct .container .br_prev {left:0;}
.mainproduct .container .br_prev:hover, .mainproduct .container .br_next:hover{ color:#fff; background:rgba(0,0,0,0.3);}
.mainproduct .container .br_next {right:0;}

/* main product*/
.main-products{ padding:30px 0; overflow:hidden;}
.main-products .title{ margin-bottom:20px; position:relative;}
.main-products .title h3{ border-bottom:1px solid @default; color:@default; font-size:20px; line-height:40px;}
.main-products .title .readmore{ position:absolute; right:0; top:10px;}
.main-products ul{ margin:0 -15px;}
.main-products ul::before, .main-products ul::after{ display:table; content:""; clear:both; width:100%;}
.main-products li{ margin-bottom:20px; width:50%; float:left; box-sizing:border-box; position:relative; height: 100px; padding:0 15px;}
.main-products li .photo{width:100px;height:100px; text-align:center; transition:all 0.5s ease 0s; display: table; position: absolute; left:15px; top:0; overflow:hidden;  vertical-align:middle; background: #fff;}
.main-products li .photo span{ height:100%; vertical-align:middle; display:inline-block;}
.main-products li .photo img{ vertical-align:middle; max-width:100px; max-height:100px;}
.main-products li .photo:hover{ -webkit-box-shadow:0 0 25px rgba(0,0,0,0.25); box-shadow:0 0 25px rgba(0,0,0,0.25);}
.main-products li .product-info{ margin-left:120px;}
.main-products li .product-name{ font-size:16px; line-height:30px; display:block; color:#666; transition:all 0.5s ease 0s; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
.main-products li .product-name:hover{ color:@default;}
.main-products li .info{ line-height:20px; max-height:40px; color:#999; overflow:hidden;}
.main-products li .button{ margin-top:5px; padding:0 5px; line-height:25px; font-size:12px;}

/* ----------  pages css  ---------- */
.container .detail{ height:auto!important;height:300px;min-height:300px; }
.container .page_h2{ color:#333; font-size:30px; line-height:36px; margin-bottom:20px;}

/* navigation */
.navigation{overflow:hidden; text-align:right; margin-bottom:15px; background-color:#f5f5f5; padding:8px 15px; line-height:20px;color:#999;}
.navigation a{ display:inline-block; transition:all 0.5s ease 0s; color:@default;}
.navigation a:hover{ color:@dark;}
.navigation span.divider{ padding:0 10px;}
.navigation strong{color:#666;}

.detailtitle{margin-bottom:15px; border:1px solid #e0e0e0; position:relative; background-color:#f9f9f9;}
.detailtitle h4{color:@default; font-size:16px; line-height:20px; padding:10px 140px 10px 15px;}
.detailtitle .font_icon{ padding-right:5px;}
.detailtitle .info{ position:absolute; top:10px; right:10px; line-height:20px; text-align:right; color:@light;}
.detailtitle .info .font_icon{padding:0 5px; font-weight:normal;}
.nes {color:#f00; padding:0 5px;}

.newstitle{margin-bottom:15px; border:1px solid #e0e0e0; position:relative; background-color:#f9f9f9;}
.newstitle h4 {color:@dark; font-size:14px; line-height:20px; padding:10px 90px 10px 10px;}
.newstitle .font_icon{ padding-right:5px;}
.newstitle .date{ position:absolute; top:10px; right:10px; line-height:20px; text-align:right; font-size:10px; font-weight:bold; color:@light;}

.htmledit{ clear:both; line-height:150%; }
.detail .htmledit p{ line-height:180%; margin-bottom:5px;}
.detail .htmledit .default_p{ line-height:24px; padding-bottom:10px;}
.detail .htmledit .default_h4{ clear:both; line-height:20px; margin-top:0px; margin-bottom:10px; color:@light; font-size: 1.2em;}
.detail .htmledit .default_strong{font-size:13px; padding:0 5px;}
.detail .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;}
.htmledit img{ max-width:100%;}

/*sidebar*/
.container .col-1 h3{ color: #000;font-size: 20px;line-height: 30px; margin-bottom: 10px;}

.sidebar li{clear:both; border-bottom:1px solid #e0e0e0;}
.sidebar li a{ line-height:20px; color:#666; display:block; padding:10px 10px 10px 30px; font-size:15px; position:relative; transition:all 0.5s ease 0s;}
.sidebar li a em{ font-style:normal; position:absolute; left:15px; top:10px;}
.sidebar li a:hover, .sidebar>ul>li.current>a:hover { color:#fff; background-color:@blue;}
.sidebar>ul>li.current>a:hover em{ color:#fff}
.sidebar li.current>a:hover em{color:@light;}
.sidebar li a.nav-top-item{ padding-right:30px; }
.sidebar li a.nav-top-item span{position:absolute; top:5px; right:0;cursor:pointer; font-size:1em; padding:5px 10px; }
.sidebar li ul{ border:0; margin:0; display:none; list-style:none;}
.sidebar li li{border: 0;}
.sidebar li li a{ padding:5px 10px 5px 30px; font-size:13px;}
.sidebar li li.opened>a.nav-top-item{z-index:201;}
.sidebar li li a.nav-top-item span{ top:6px; right:10px;  cursor:default; font-size:0.9em;}
.sidebar li li ul{ position:absolute; z-index:200; top:0; left:100%; width:100%; background-color:@dark; padding:0;}
.sidebar li li li.opened a.nav-top-item{z-index:203; background-color:transparent;}
.sidebar li li li a{ color:#fff; padding:5px 10px 5px 25px;}
.sidebar li li li a em{ left:12px;}
.sidebar li li li a:hover{color:#333; background-color:@default;}
.sidebar li li li ul{ z-index:202; background-color:@default;}
.sidebar li li li li a:hover{background-color:#fff;}
.sidebar li.current>a, .sidebar li.opened.current>a{ color:@default; font-weight:bold;}
.sidebar li.current>a em{color:@light; }
.sidebar li li.current>a:hover { color:#fff; background-color:@blue;}

/* content list */
.content_list{ width:100%; overflow:hidden;}
.content_list table { width:100%;table-layout:fixed; overflow:hidden; border-collapse:inherit;}
.content_list table th{text-align:left; padding:5px 10px; font-size:13px; line-height:20px; color:#181818; text-shadow:0 1px 0 #fff; background-color:#f0f0f0;}
.content_list table td{padding:15px 10px; vertical-align:top; line-height:20px; border-bottom:1px solid #eee;}
.content_list table tbody tr.even td{background-color:none;}
.content_list table tbody tr.odd td{background-color:none;}
.content_list table tbody tr.over td{background-color:#f9f9f9;}
.content_list table tbody tr.out td{background-color:none;}
.nodata{ text-align:center; line-height:40px;}

.list_news td.T1{ width:65px; font-family: Tahoma,Geneva,sans-serif; text-align:center; }
.list_news th.T1{ width:65px;text-align:center;}
.list_news td.T1 .date{ display:block; font-weight:bold; width:60px; height:50px; padding:5px 0;text-align:center; background-color:@blue; margin:0 auto;}
.list_news td.T1 .date span {display:block;}
.list_news td.T1 .date .day{ font-size:24px; line-height:30px; color:#fff;}
.list_news td.T1 .date .year_month{font-size:11px; font-weight:bold; color:#fff; line-height:20px;}

.list_news td .title{ font-size:16px; color:@default; font-weight:bold; line-height:20px; display:block;transition:all 0.5s ease 0s;}
.list_news td .title:hover{ color:@blue;}
.list_news td p{ line-height:20px; padding-top:5px;}
.list_news td .brtools{ margin-top:10px; height:20px; text-align:right;}
.list_news td .brtools .button{  padding: 0 10px;line-height: 25px; font-size: 14px}
.list_news td .brtools .readmore .font_icon{padding-left:5px;}

.list_download .T1{ width:100px; font-family: Tahoma,Geneva,sans-serif; text-align:center; }
.list_download .T2{ width:60px;text-align:center; }


/* page tools css */
.grayr {margin:20px 0 0 0; padding:10px; font-size:12px; text-align:center;}
.grayr a{padding:5px 8px; margin:2px; color:@default; font-weight:bold; background-color:#eee; transition:all 0.5s ease 0s; border-radius:3px;}
.grayr a:hover{ color:#fff; background-color:@light; }
.grayr a:active {color:#fff; background-color:@dark;}
.grayr span.current {padding:5px 8px; font-weight:bold; margin:2px; color:#fff; background-color:@default;  border-radius:3px;}
.grayr span.disabled {padding:5px 8px; margin:2px; color:#ccc; font-weight:bold; background-color:#f0f0f0;  border-radius:3px;}
.grayr .icon-chevron-left{ padding-right:5px; font-size:0.8em;}
.grayr .icon-chevron-right{ padding-left:5px; font-size:0.8em;}


/* ----------  product sort list ----------  */
.productSort{ width:710px;}
.productSort ul{ margin:0 -20px;}
.productSort ul::before, .productSort ul::after{ content:""; clear:both; display:table;}
.productSort li{width:210px; margin:0 20px 20px; position:relative; float:left;}
.productSort li:hover{ border-color:@default;}
.productSort li .productname{ line-height:20px; padding:5px 10px; background-color:rgba(0,0,0,0.5); color:#fff; font-size:14px; text-align:center; display:block; transition:all 0.5s ease 0s; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; width:100%; box-sizing: border-box; position:absolute; left:0; bottom:-30px;}
.productSort li .productname:hover{color:@light;}
.productSort li .photo:hover{ -webkit-box-shadow:0 0 25px rgba(0,0,0,0.35); box-shadow:0 0 25px rgba(0,0,0,0.35);}
.productSort li .photo:hover .productname{bottom:0;}
.productSort li .photo{width:210px;height:110px; background-color:#000; display:block; position:relative; box-sizing:content-box; overflow:hidden; transition:all 0.5s ease 0s; border-radius:5px; background-position:center center; background-repeat:no-repeat; background-size:contain;}


/* ----------  product details ----------  */
.productsublist li{ padding-left:170px; min-height:150px; position:relative;}
.productsublist li + li{ margin-top:20px;}
.productsublist li .photo{ width:150px; height:150px; display:block; position: absolute; left:0; top:0; background:url(../images/loading.svg) center no-repeat; overflow:hidden; background-color: #fff; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}
.productsublist li .photo .link{ position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;transition:all 0.5s ease 0s; background-position: center center; background-repeat:no-repeat; background-size:contain;}
.productsublist li .photo .mask{ position:absolute; width:100%; height:100%; left:0; top:0; background-color:rgba(0,0,0,0.4); opacity:0;transition:all 0.5s ease 0s; z-index:1;}
.productsublist li .photo:hover .link{ width:120%; height:120%; left:-10%; top:-10%;}
.productsublist li .photo:hover .mask{ opacity:1;}
.productsublist li .title{ color:@default; line-height:30px; display:block; font-weight:bold; font-size:16px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:all 0.5s ease 0s;}
.productsublist li .title:hover{color:@blue;}
.productsublist li p{ margin-top:10px;  line-height:20px; font-size:14px; min-height:60px;}
.productsublist li .button{margin-top: 10px; padding: 0 10px; line-height: 25px; font-size: 12px;}


.product-detail { min-height:430px; position: relative;}
.detail .leftcatalog{ position:absolute; right:0; top:0; width:320px;}
.detail .rightinfo{ margin-right:340px; clear:both;}

.leftcatalog .showpic{width:300px; height:300px; position: relative; padding:9px; border:1px solid #eee;}
.leftcatalog .showpic .hidden-container{ position:absolute; left:0; top:0;width:300px; height:300px; visibility:hidden;}
.leftcatalog .showpic table{table-layout:fixed;width:100%; height:100%;}
.leftcatalog .showpic table td{padding:0;margin:0;text-align:center;vertical-align:middle;width:100%;height:100%;}
.leftcatalog .showpic table td a{visibility:hidden;}
.leftcatalog .showpic table td img{ max-width:300px; max-height:300px; }

.zoomDiv {z-index:999;position: absolute;top:0; left:0;width:200px;height:200px;background:#fff;border:1px solid #ccc;display:none;text-align: center;overflow:hidden; margin:-5px 0 0 3px;}
.zoomMask { position:absolute;background:url(../images/mask.png);cursor:move;z-index:1;}

.catalog{background:#f0f0f0;padding:8px 21px; margin-top:20px; position:relative;}
.catalog .prev, .catalog .next{position:absolute;color:@light;top:28px; width:11px; font-size:12px; text-align:center; line-height:36px; display:block; z-index:3;}
.catalog .prev:hover, .catalog .next:hover{ color:@dark;}
.catalog .prev{ left:4px;}
.catalog .next { right:4px;}
.catalog .next:hover{ background-position:-11px -36px;}

.thumbs_list{z-index:2; overflow:hidden; background-color:#f9f9f9; border-radius:3px;}
.thumbs_list ul{clear:both; height:72px; }
.thumbs_list li{width:60px; height:60px; border:1px solid #ccc; vertical-align:middle; text-align:center;float:left; margin:5px 4px;cursor:pointer;position:relative;}
.thumbs_list li.over{ border-color:@light;}
.thumbs_list li .bg{ width:100%; height:100%; text-align:center; overflow:hidden; position:absolute; background:url(../images/slider_bg.png); display:none; z-index:2; top:0; left:0;}
.thumbs_list li .bg:before{line-height:60px;font-size:3em; color:@light;}
.thumbs_list li a{ height:100%; width:100%; display:block; position:relative; z-index:1; overflow:hidden; .BScover}

.rightinfo .slogen{ display:block; color:#999; line-height:20px;}
.rightinfo .productname{font-size:18px; color:@default; line-height:20px; padding-bottom:15px; display:block; font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;}
.detail .porduct-intro{ line-height:25px; font-size:14px;}
.rightinfo .productinfo{padding:0; margin:0; width:100%;}
.rightinfo .productinfo td, .rightinfo .productinfo th{line-height:20px; vertical-align:top; border:2px solid #fff;}
.rightinfo .productinfo td {padding:5px 10px; background-color:#f5f5f5;}
.rightinfo .productinfo th {padding:5px 10px; width:80px; font-size:13px; background-color:#eee; color:@default; text-align:right;}
.rightinfo .productinfo td span{ padding:0 5px;}
.rightinfo .productinfo td .price{ font-size:16px; color:#f00; padding:0;}
.rightinfo .brtools{ margin:20px 0 0 0; }

.tab{ border-left:1px solid #ccc; margin-bottom:20px;}
.tab ul{ display:table; width:100%;}
.tab li{ display:table-cell; border-right:1px solid #ccc; border-top:3px solid #ccc;}
.tab li a{border-bottom:1px solid #ccc; font-size:13px; display:block; text-align:center; line-height:20px; padding:6px 10px; background-color:#f5f5f5;}
.tab li.current { border-top-color:@default;}
.tab li.current a, .tab li.current a:hover{color:@default; cursor:default; border-bottom:0; line-height:21px; background-color:transparent;}
.tab-content .tab-pane{ display:none;}
.tab-content .tab-pane.current{ display:block;}


.rightinfo .sharetools{ background:#f6f6f6; width:340px; padding:20px 15px; position:absolute; left:0; bottom:0; height:40px;}
.mailshare {background:#eee; border-style:solid; border-width:1px; border-color:#ccc #ccc #aaa #ccc; border-radius:3px; color:#666; display: inline-block;font-size: 13px; text-decoration: none; font-weight:bold; box-shadow:0px 1px 0px #ccc;  text-shadow: #fff 1px 1px 0; float:right;}
.mailshare .mail{ border-top:1px solid #fff;line-height:22px;padding:8px 20px 9px 50px; position:relative; display:inline-block;border-radius:2px;}
.mailshare .mail .font_icon{ position:absolute; left:15px; top:8px; line-height:22px; font-size:2em;}
.mailshare:hover {color:#333; background-position:0 bottom;}
.mailshare:hover span{ border-color:#ddd;}
.sharetools strong{ color:@dark; font-size:13px; padding-right:10px; float:left; line-height:40px;}
.sharetools .icon1, .sharetools .icon2, .sharetools .icon3, .sharetools .icon4{line-height:26px; padding:0; background-repeat:no-repeat; background-image:url(../images/shareicon_bg.gif); height:26px; float:left; display:block; width:26px; overflow:hidden; margin:7px 5px 7px 0px; text-indent:-999px;}
.sharetools .icon1{ background-position:0 0;}
.sharetools .icon2{ background-position:0 -26px;}
.sharetools .icon3{ background-position:0 -52px;}
.sharetools .icon4{ background-position:0 -78px; display:none;}

/* ----------  popwin ----------  */
.popmask{ position:absolute;background:url(../images/slider_bg.png);border:none;height: 100%;left: 0; margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3000; display:none;}
.popwin{left: 50%; margin-left:-300px; padding:10px;position: fixed; top: 50%;z-index:3001; width:580px; background: url(../images/pop_side.png); display:none;}
.popwin .hide_box{background-color:#fff; position:relative;}
.popwin .hide_box h3{ color:#fff; background:@light; border-bottom:#ccc 1px solid;font-size: 15px;line-height: 20px;padding: 8px 20px 6px 10px;}
.hide_box .closebr{background: url(../images/icon_popclose.png) no-repeat ;display: block;height: 16px;overflow: hidden;position: absolute;right:10px;text-indent:-999px;top:10px;width:16px;}
.hide_box .closebr:hover{ background-position:0 -16px;}
.popwin .hide_box .popcontent{ clear:both; padding:15px;}
.popwin .hide_box .popcontent p{ line-height:20px; padding-bottom: 10px;}
.popwin .from_post li{ margin-bottom:10px;}

#mailshare{margin-top:-280px;}
#popcart{margin-top:-80px;}
.popwin .price{color: #f00; padding:0 5px;}
#popcart p{ padding-left:65px; background:url(../images/icon_addcart.png) left center no-repeat;}


/* ----------  contact us details ----------  */
.googlemap{ width:350px; height:530px; margin-right:30px; float:left;}
.googlemap iframe{ margin:0; padding:0; overflow:hidden;}
#map_canvas { width:350px; height:500px;}
.maplink{line-height:30px; font-size:13px;transition:all 0.5s ease 0s; background-color:@blue; display:block; text-align:center; font-weight:bold; color:#fff;}
.maplink:hover{background-color:@dark; color:#fff;}
.contactdetail .detail{ float:left; width:580px;}

/* ----------  contact us details ----------  */
input, textarea{color:#666; padding:4px 10px;  background:#f8f8f8; border:1px solid #e0e0e0;line-height:20px; transition:all 0.5s ease 0s;}
input{height:20px; }
textarea{height:80px; width:70%;}
select{color:#666; line-height:30px;height:30px;  border:1px solid #e0e0e0; background:#f8f8f8;}
input:hover, textarea:hover{ border-color:#aaa;}
input:focus, textarea:focus{color:#000; background:#fff; border-color:@light; .outside_shadow(@x: 0, @y: 0, @blur: 4px, @color: @light)}
input.radio:focus, input.checkbox:focus{-moz-box-shadow: none;-webkit-box-shadow: none;-khtml-box-shadow: none;box-shadow: none;}
input:disabled{background-color:#333; color:#777;}
input.type1, select.type1{ width:50%;}
input.type2, select.type2{ width:20%;}
input.type3, select.type3{ width:10%;}
.from_post li{ padding-left:170px; margin-bottom:15px; position:relative;}
.from_post li .title{ font-size:14px; line-height:30px; color:#7a7a7a; display:block; width:160px; text-align:right; position:absolute; left:0; top:0;}
.from_post li strong{line-height:30px; color:@default;}
.from_post li .fg{padding:0px 10px; line-height:30px; display:inline; color:#999;}
.from_post li .nes{line-height:30px;}
.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:4px 0 0 10px;cursor:pointer;}
.from_post li.last{ border:0; margin-bottom:0;}
.from_post li .price{ font-size:1.1em; padding-left:5px; color:@light;}
.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:9px 4px 8px 0;}
.from_post .brtools{ margin:20px 0 0 170px;}

/* ----------  cart navigation style----------  */
span.nes{color:#f00; padding:0px 5px;}
span.price{ color:#000; font-size:13px; font-weight:bold; font-family:Tahoma,Geneva,sans-serif;}
span.loadtext{ color:#333; font-weight:bold; padding:0px 5px;}
span.model{ font-size:11px;font-family:Tahoma,Geneva,sans-serif; font-weight:bold; color:#999; padding-right:5px;}

.cart_detail{background-color:#fff; height:auto!important; height:350px;min-height:350px; padding:20px 20px 30px 20px;}

.cartnav{ margin-bottom:30px; height:50px; background: url(../images/fg_img.gif) 0 center repeat-x;}
.cartnav ul{height:50px; text-align:center;}
.cartnav li{ padding-left:50px; padding-right:15px; display:inline-block;  position:relative; background-color:#fff; margin:0 20px;}
.cartnav li em{ line-height:50px; font-size:40px; font-family: "Times New Roman", Times, sans-serif; font-weight:bold; position:absolute; top:0; left:15px;  color:#999; background-color:#fff; }
.cartnav li h4{ font-size:20px; line-height:30px; color:#999;background-color:#fff;}
.cartnav li strong{font-size:16px; font-style:italic; color:#999; line-height:20px; font-family:"Times New Roman", Times, serif; background-color:#fff; }
.cartnav li.current em, .cartnav li.current h4, .cartnav li.current strong{ color:#f60;}
.cartnav li a em, .cartnav li a h4, .cartnav li a strong{ color:#999;}
.cartnav li a:hover em, .cartnav li a:hover h4, .cartnav li a:hover strong{color:#333;}

/* button & input style */
.cart_button {padding:3px 20px; font-size:13px; font-weight:bold;  display:inline-block; background-color:#999; line-height:20px; color:#fff;  transition:all 0.5s ease 0s; border-radius:2px;}
.cart_button:hover{ background-color:#f60; color:#fff;}
.cart_button_disable{padding:3px 20px; font-size:13px; font-weight:bold; display:inline-block; background-color:#ccc; line-height:20px; color:#999; border-radius:2px; cursor:default;}
.cart_detail .brtools{border-top: 1px solid #ccc; margin-top:20px; padding-top:15px;}


.grouptitle{ clear:both; height:42px; background:#fff url(../images/title_bg.gif) bottom repeat-x; margin-bottom:10px;}
.grouptitle .titletext{ float:left; border-bottom:2px solid #f60; height:40px;}
.grouptitle .titletext h3{line-height:40px; padding:0 5px; display:inline-block; font-size:16px; font-weight:bold; color:#5f5f5f;letter-spacing:2px;}
.grouptitle .titletext input{ margin-left:20px; border:0; background:none;}
.grouptitle .titletext .loadtext{ font-size:12px; font-weight:normal;}
.grouptitle .textinfo{ float:right; font-size:13px;text-align:right; line-height:40px; }
.grouptitle .textinfo a{ color:#555; line-height:20px; padding:0 5px; border-radius:3px; background-color:#eee; display:inline-block;}
.grouptitle .textinfo a:hover{ text-decoration:none; background-color:#555; color:#fff;}

.cartlist { clear:both; overflow:hidden; margin-bottom:20px; background-color:#fff;}
.cartlist table{ width:100%; overflow:hidden; table-layout:fixed;}
.cartlist table th{padding-bottom:8px;border-bottom:#e8e8e8 1px solid;text-align:left; font-size:13px; padding-right:5px; line-height:20px; font-size:13px; color:#000;}
.cartlist table td{ vertical-align:middle; padding-top:9px; padding-bottom:9px; border-bottom:#e8e8e8 1px solid; padding-right:5px}
.cartlist table td a:hover{ text-decoration:underline;}
.cartlist table tbody tr.even{background-color:#f8f8f8;}
.cartlist table tbody tr.odd {background-color:none;}
.cartlist table tbody tr.over{background-color:#f2f0f3;}
.cartlist table tbody tr.over td.T1{ background-image:url(../images/marker-3.gif);}
.cartlist table tbody tr.out{background-color:none;}
.cartlist .T0{ width:80px;}
.cartlist th.T1{ width:70px; text-align:center; padding-left:40px;}
.cartlist td.T1{ width:70px; text-align:center; padding-left:40px; background:url(../images/marker1.png) 10px center no-repeat;}
.cartlist table tbody tr.over td.T1{ background-image:url(../images/marker2.png)}
.cartlist .T2{ text-align: left;}
.cartlist .T2 a{ font-size:13px; font-weight:bold;}
.cartlist .T4, .cartlist .T5{ width:120px;text-align:center;}
.cartlist .T3, .cartlist .T6{ width:60px;text-align:center;}
.cartlist .T3 input{ text-align:center;}
.cartlist .T7{ text-align:right; font-weight:bold; color:#333; font-size:13px; border:0; padding-right:20px;}
.cartlist .T7 .price{ padding-left:5px; font-size:14px;}
.cartlist .T1 a img {cursor:pointer;max-width:60px; max-height:60px; padding:1px; background-color:#fff; border:1px solid #c0c0c0;}
.cartlist .T1 a:hover img{ border-color:#ff7400;}
.cartlist .T8 { border:0; text-align:center;}
.cartlist .T8 .price{font-size:15px;}


/* ----------  cart popwin ----------  */
.cartpopmask{ position:absolute;background:url(../images/slider_bg.png);border:none;height: 100%;left: 0; margin: 0;padding: 0;position: fixed;top: 0;width: 100%;z-index:3000; display:none;}
.cartpopwin{left: 50%; margin-left:-300px;padding:10px;position: fixed; top: 50%;z-index:3001; width:580px; background:url(../images/pop_side.png); display:none;}
.cartpopwin .hide_box{background-color:#fff; position:relative;}
.cartpopwin .hide_box h3{background:#eee; font-size:16px; line-height:24px; padding:5px 30px 5px 10px;text-shadow: 1px 1px 0 #fff; color:#ff7400; }
.hide_box .closebr{background: url(../images/icon_close.png) 0 0 no-repeat ;display: block;height:16px;overflow: hidden;position: absolute;right:10px;text-indent:-999px;top:8px;width:16px;}
.hide_box .closebr:hover{ background-position:0 -16px;}
.cartpopwin .hide_box .popcontent{ clear:both; padding:15px;}
.cartpopwin .hide_box .popcontent p{ line-height:24px; padding-bottom:10px;}
.cartpopwin .hide_box .popcontent p .price{ padding:0 5px; color:#f60;}
.cartpopwin .from_post{ background:none; border:0; margin:10px 0 0 0; padding:0;}

#popsubmit{ margin-top:-74px;}


.cart_detail .from_post{padding:15px 0;  margin-bottom:20px;}
.cart_detail input, .cart_detail textarea{color:#838383;font-size:13px;padding:5px; border:1px solid #838383;background:#fff url(../images/input.gif) 0 0 no-repeat; transition:all 0.5s ease 0s;}
.cart_detail input{height: 16px;}
.cart_detail textarea{height:60px;width:200px; overflow-x: hidden; overflow-y:auto;}
.cart_detail select{border:1px solid #838383;background-color:#fff; height:21px;color:#838383; margin-top:4px; margin-bottom:3px;}
.cart_detail input:focus, .cart_detail textarea:focus{border-color:#ff7400; background-color:#fff; color:#000;background-image:none;-moz-box-shadow:0 0 3px #f60;-webkit-box-shadow:0 0 3px #f60;-khtml-box-shadow:0 0 3px #f60;box-shadow:0 0 3px #f60;}
.cart_detail input:hover, .cart_detail textarea:hover{border-color:#f60;}
.cart_detail input.type1{ width:200px;}
.cart_detail input.type2{ width:75px;}
.cart_detail input.type3{ width:30px;}
.cart_detail select.type1{ width:210px;}
.cart_detail select.type2{ width:103px;}
.cart_detail select.type3{ width:40px;}
.cart_detail .from_post input, .cart_detail .from_post select, .cart_detail .from_post textarea{ float:left;}
.cart_detail .from_post table {clear:both; width:100%; }
.cart_detail .from_post table .loadtext{ padding:0 3px;color:#ff7400;}
.cart_detail .from_post td{padding-bottom:15px;vertical-align:top;}
.cart_detail .from_post td.td1{text-align:right; width:120px; font-weight:bold;line-height:28px; padding-right:10px; color:#333;}
.cart_detail .from_post td.td2{width:230px;}
.cart_detail .from_post td.td2 img{vertical-align:middle; padding-left:10px; cursor:pointer; padding-top:5px;}
.cart_detail .from_post td.td2 span{ float:left; padding:0 5px; line-height:28px;}
.cart_detail .from_post td.td3 span{line-height:18px; padding:5px 0; display:inline-block; color:#999;}
.cart_detail .from_post .radio{ background:none; border:0; padding:0px; width:13px; height:13px; margin:8px 3px 7px 5px; }
.cart_detail .from_post .brtools{ margin-left:110px;}

.termstext{padding:2px 3px; overflow:hidden; border:1px solid #838383; width:500px; height:80px;overflow-y:auto; overflow-x:hidden; color:#838383;}
.payinfo{ clear:both; font-weight:normal; border:1px solid #dbdbdb; border-radius:2px; margin-bottom:20px; padding:15px 20px; background-color:#f2f2f2; text-shadow:0 1px 0 #fff;-moz-box-shadow:0 0 5px #ccc inset; -webkit-box-shadow:0 0 5px #ccc inset; box-shadow:0 0 5px #ccc inset;}
.payinfo .sign{ padding:0 10px;}
.payinfo .price{ padding:0 5px; font-size:15px;}
.payinfo strong{ font-size:15px;}
.payinfo strong .price{ font-size:18px;}

.ordertable{ clear:both; width:100%; overflow:hidden;border-collapse:collapse; margin-bottom:20px;}
.ordertable th{padding:5px 5px 4px 5px; border:#e8e8e8 1px solid; text-align:left; font-size:13px;}
.ordertable td{padding:5px 5px 4px 5px; border:#e8e8e8 1px solid; vertical-align:top; line-height:24px;}
.ordertable td.head{background:#f8f8f8; font-weight:bold; text-align:center;}


/* 大屏幕 */
@media (min-width: 1200px) {
	.gotop{ margin-right:-650px;}
	.container{ width:1170px;}
	.container .col-2{ width:920px;}
	.sf-menu li a{padding:10px 25px;}
	
	/* ----------  footer ---------- */
	.main-sort li{width:330px;}
	.main-sort li .sort-link{ height:160px;}
	.main-sort li .sort-name{ font-size:18px;}
	
	.productSort{ width:920px;}
	.productSort li{width:280px;}
	.productSort li .photo{width:280px;height:150px;}
	
	.productlist{ width:920px;}
	.productlist ul{ margin-right:-20px;}
	.productlist li{width:211px; height:211px; margin:20px 20px 0 0;}
	.productlist li .photo{ width:205px; height:205px;}
	
	.rightinfo .sharetools{width:550px;}
	.contactdetail .detail{width:790px;}
	
}
 
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
	.container{ width:720px;}
	.container .col-1{ float:inherit; width:auto; margin-bottom:20px; margin-right:0;}
	.container .col-2{ float:inherit; width:710px; margin:0 auto;}
	.header h1.logo a{ width:125px;}
	
	/* menu */
	.menu{ padding-left:150px;}
	.sf-menu li { margin-left:0;}
	.sf-menu li a{ padding:10px; font-size:12px;}
	.sf-menu li a.sf-with-ul{ padding-right:25px;}
	.sf-menu li a .sf-sub-indicator{ right:10px;}
	.sf-menu li.language{margin-left:10px;}
	.sf-menu li.language > a{ padding:5px 20px 5px 10px;}
	
	.main-sort li{width:180px; height:90px;}
	.main-sort li .sort-link{ height:90px;}
	.main-sort li .sort-name, .main-sort li .button{ margin-left:0;}
	
	.detail .leftcatalog{ position: relative; right:auto; top:auto; margin:0 auto 20px;}
	.detail .rightinfo{ margin-right:0;}
	
	
	.googlemap{ width:auto; height:330px; margin-right:0; margin-bottom:20px; float: inherit;}
	#map_canvas { width:100%; height:300px;}
	.contactdetail .detail{ float: inherit; width:auto;}
	
	.cartnav li em{ font-size:30px; line-height:36px;}
	.cartnav li h4{ font-size:16px; line-height:20px;}
	.cartnav li strong{font-size:12px; line-height:16px;}
}
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) {
	body{padding-top: 60px; overflow-x:hidden;}
	.container{ width:auto; margin-left:20px; margin-right:20px;}
	.container .col-1{ float:inherit; width:auto; margin-bottom:20px; margin-right:0;}
	.container .col-2{ float:inherit;  width:auto;}
	.header{ padding:0; width:100%; height:60px; z-index: 10;}
	.header h1.logo a{ height:60px;}
	
	.language a strong{ display:inline-block; font-size:11px; font-family:Tahoma, Geneva, sans-serif;}
	.language a span, a.topcart{ display:none;}
	
	.toplink{ display:block; height:40px; text-align:right; position:relative; padding:10px 0;}
	.iconmenu{ line-height:40px; text-align:center; vertical-align:middle; width:40px; margin-left:3px; height:40px; display:inline-block; color:#fff; font-size:30px;}
	.iconmenu:hover{ color:@light;}
	.iconmenu.active, .iconmenu:active{ background-color:@default; color:#fff; border-radius:3px;}
	.iconmenu:focus{color:#fff;}
	
	.menu{ display:none;}
	.mobilemenu{ width:100%; position:relative; z-index:10; margin-top:8px; background-color:@default;}
	.mobilemenu .icon-double-angle-up{display: block; font-size:1.4em; text-align:center; color:#fff; line-height:20px; border-radius:2px; background-color:@light;}
	.mobilemenu .icon-double-angle-up:hover{ color:@light; background-color:@dark;}
	.mobilemenu ul{ padding:10px;}
	.mobilemenu li{ clear:both; border-bottom:1px solid @light;}
	.mobilemenu li.last{ border:0;}
	.mobilemenu li .font_icon{ position:absolute; top:5px; right:5px;}
	.mobilemenu li a{ line-height:24px; padding:5px 30px 5px 5px;  position:relative; display:block; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; color:#fff; font-size:16px;font-family:Microsoft JhengHei,Arial,Helvetica,sans-serif;}
	.mobilemenu li a:hover, .mobilemenu li.current a, .mobilemenu li.current a:hover{color:@light;}
	.mobilemenu li.language{ margin:10px 0;}
	
	/* banner */
	.mainslider{height:300px;}
	.mainslider li{ height:300px;}
	.mainslider li .link{ display:block; position:absolute; left:0; bottom:0; width:100%; height:auto;}
	.mainslider li .link h4{ display:block; }
	.mainslider li .link h4 span{ font-size:12px; line-height:20px; display:block; white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;}
	.rslides_tabs{ bottom:50px;}
	
	.mainproduct .main-sort{ margin:0;}
	.main-sort li{ width:100%; float:inherit;}
	
	.main-products li{ width:100%; clear:both; float:inherit;}
	
	.productSort{ width:300px; margin:0 auto;}
	.productSort ul{ margin:0;}
	.productSort li{width:300px; margin:0 0 20px; float:inherit;}
	.productSort li .photo{width:300px;height:160px;}
	
	.productsublist li{ padding:0; min-height:auto;}
	.productsublist li .photo{  position: inherit; left:auto; top:auto; margin: 0 auto 10px;}
	
	.mainslogan{padding:10px 0; height:auto;}
	.mainslogan h3{ line-height:24px; font-size:20px; float:none;}
	.mainslogan h5{ line-height:20px; font-size:14px; float:none;}
	
	.copyright{ text-align:center;}
	.copyright p{ font-size:12px;}
	.copyright .luckygroup{ margin-top:5px; position:inherit; bottom:auto; right:auto; text-align:center;}
	
	.grayr {padding:0; font-size:10px;}
	.grayr a {padding:4px;}
	.grayr span.current {padding:4px;}
	.grayr span.disabled {padding:4px;}
	
	.detail .leftcatalog{ position: relative; right:auto; top:auto; margin:0 auto 20px;}
	.detail .rightinfo{ margin-right:0;}
	
	.zoomDiv, .zoomMask { display:none;}
	.detail .leftcatalog{ clear:both; width:100%; margin:0 0 20px 0;}
	.detail .rightinfo{clear:both; width:100%; height: auto;}
	.leftcatalog .showpic{ margin:0 auto; width:240px; height:240px;}
	.leftcatalog .showpic table td img{ max-width:240px; max-height:240px; }
	
	.catalog{ margin:10px auto 0 auto; position:relative; width:200px; height:50px;}
	.catalog .prev {left:5px; top:15px; }
	.catalog .next {right:5px; top:15px; }
	.thumbs_list ul{height:42px;}
	.thumbs_list li{width:40px;height:40px;}
	.thumbs_list li .bg:before{line-height:40px;font-size:2em; color:@light;}
	
	.rightinfo .sharetools{ position:inherit; background:#f9f9f9; width:auto; padding:10px; height:40px; margin-top:20px;}
	.mailshare { display:none;}
	.sharetools strong{ color:#666; font-size:13px; padding-right:10px; line-height:40px; display:inline-block;}
	.sharetools .icon1, .sharetools .icon2, .sharetools .icon3{ display:inline-block;}
	
	.popwin, .cartpopwin{ left:20px; right:20px;  margin: 0; width: auto;}
	.popwin .hide_box .popcontent{ clear:both; padding:10px;}
	
	.googlemap{ width:auto; height:330px; margin-right:0; margin-bottom:20px; float: inherit;}
	#map_canvas { width:100%; height:300px;}
	.contactdetail .detail{ float: inherit; width:auto;}
	
	.from_post li{ padding-left:0; margin-bottom:10px;}
	.from_post li .title{line-height:20px; display:block; width:auto; text-align:left; position:inherit; left:auto; top:auto; margin-bottom:5px;}
	.from_post .brtools{ margin:20px 0 0 0;}
	input.type1, select.type1, textarea{ width:80%;}
	input.type2, select.type2{ width:40%;}
	input.type3, select.type3{ width:20%;}
	.from_post li .labelgroup{ width:80%;}
	
	.cart_detail{ padding:0;}
	.cartnav{ margin-bottom:20px; height:20px; }
	.cartnav ul{height:20px; }
	.cartnav li{ padding-left:15px; padding-right:5px; margin:0 5px;}
	.cartnav li em{left:5px;}
	.cartnav li em{ font-size:14px; line-height:20px;}
	.cartnav li h4{ font-size:14px; line-height:20px;}
	.cartnav li strong{ display:none;}
	
	.cartlist .T0{ width:auto;}
	.cartlist th.T1{ width:40px; padding-left:0;}
	.cartlist td.T1{ width:40px; padding-left:0; background: none;}
	.cartlist .T4, .cartlist .T5, .cartlist .T3, .cartlist .T6{ width:auto;}
	.cartlist .T1 a img {max-width:30px; max-height:30px; }
	
	.cart_detail{min-height: inherit;}
	.grouptitle .titletext h3{letter-spacing:0;}
	.cart_detail textarea, .termstext{width:80%; overflow-x: hidden; overflow-y:auto;}
	.cart_detail input.type1{ width:80%;}
	.cart_detail input.type2{ width:40%;}
	.cart_detail input.type3{ width:20%;}
	.cart_detail select.type1{ width:80%;}
	.cart_detail select.type2{ width:40%;}
	.cart_detail select.type3{ width:20%;}
	
	.cart_detail .from_post{ padding:0;}
	.cart_detail .from_post td{padding-bottom:10px;vertical-align:top;}
	.cart_detail .from_post td.td1{text-align:right; width:30%; }
	.cart_detail .from_post td.td2{width:30%;}
	.cart_detail .from_post .brtools{ margin-left:20px;}
	.grouptitle .textinfo{ font-size:12px;}
	.grouptitle .titletext input{ margin-left:0;}

}
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
	.container{ width:auto; margin-left:10px;margin-right:10px;}
	.container .page_h2{ text-align:center; background-color:#f5f5f5;}
	
	.banner{ height:200px;}
	.mainslider{height:200px; }
	.mainslider li{ height:200px;}
	
	.mainaboutus h3{ font-size:18px;}
	.mainaboutus .aboutinfo{ font-size:14px;}
	
	.main-sort li{ padding:0;}
	.main-sort li + li{ margin-top:10px;}

	.productlist{ float:none;  width:auto; padding:0; margin-top:20px;}
	.productlist ul{ margin:0;}
	.productlist li{ clear:both; width:100%; margin:0; padding:10px 0; border-width:0 0 1px 0; position:relative;height:auto!important;height:70px;min-height:70px;}
	.productlist li .photo{ width:60px; height:60px; position:absolute; left:10px; top:10px;}
	.productlist li .productname, .productlist li .photo:hover productname{ display:none;}
	.productlist li .mobilename{ line-height:24px; display:block; padding-left:90px; font-size:14px;}
}