@charset "utf-8";

/* less set */
@default:#48abe2;
@light:lighten(@default, 15%);
@dark:darken(@default, 15%);
@blue:#374150;

/* ----------  public css ---------- */
html {background:transparent; height:100%; margin:0; padding:0; outline:0; vertical-align:top; }
body { font-size:14px; color:#666; font-family:Verdana, Geneva, sans-serif;}
input, select, textarea{ font-size:14px;  font-family:Verdana, Geneva, sans-serif;}
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 center; 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:@light;-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; background-color:#f8f8f8; 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:7px 20px; display:inline-block; border:0; cursor:pointer; background-color:@dark; line-height:20px; color:#fff; transition:all 0.5s ease 0s;}
.button:hover{ background-color:@light; color:#fff;}

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

.readmore{font-family:Tahoma,Geneva,sans-serif; line-height:20px; display:inline-block; font-weight:bold; font-size:15px; color:@default;}
.readmore:hover{ color:@dark;}
.readmore span{ padding-left:5px;}

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

.brtools.family-button{ text-align:center; height:auto;}
.brtools.family-button .button{ width:30%; line-height:90px; font-size:24px;}
.brtools.family-button .button + .button{ margin-left:20px;}

.brtools .next, .brtools .prev{ line-height:34px; font-size:16px; width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block;}
.brtools .prev{ text-align:left; float:left;}
.brtools .next{ text-align:right; float:right;}

.container{ width:960px; margin-left:auto; margin-right:auto; position:relative;}
.container .col-1{width:300px; }
.container .col-2{ width:640px;}
.container .col-1 + .col-2, .container .col-2 + .col-1{margin-left:20px;}

/* ----------  header ---------- */
/* header */
.header{ margin-bottom:20px; height:140px}
.header .container{ position:relative; z-index:10;}
.header h1.logo{ height:80px; margin:0; position:absolute; left:0; top:10px; z-index:2;}
.header h1.logo img{ height:60px;}

.headerlink{ padding-top:20px; height:70px;}

.topsearch{ float:right; position: relative; width:220px;}
.topsearch input{ height:32px; color:#333; border-color:#ccc; border-width:1px; padding-right:32px; width:100%; transition: all 0.4s ease 0s;  box-sizing:border-box;}
::-webkit-input-placeholder {color: @default;}
:-moz-placeholder { color: @default;}
::-moz-placeholder { color: @default;}
:-ms-input-placeholder { color: @default;} 

.topsearch input:focus{ border-color:@light;}
.topsearch .btn-search{ position: absolute; right:0; top:0; height:32px; width:32px; text-align:center; border: none; background-color: transparent; color:@dark; transition: all 0.5s ease 0s; overflow:hidden; display:block; cursor:pointer;}
.topsearch .btn-search:hover{ color:#fff; background:@default;}
.topsearch .btn-search .font-icon{font-size:15px;}

.shareicon{ height:32px; float:right; margin-right:10px;}
.shareicon li{ float:left; margin-right:5px; height:32px; }
.shareicon li a{ line-height:32px;  height:32px;  display:block; width:32px; overflow:hidden; background-image:url(../images/shareicon_bg.jpg); background-repeat:no-repeat;}
.shareicon li a.facebook{ background-position:0 -32px; text-indent:-999px;}
.shareicon li a.facebook:hover{ background-position:0 0;}
.shareicon li a.linkedin{ background-position:-32px -32px; text-indent:-999px;}
.shareicon li a.linkedin:hover{ background-position:-32px 0;}
.shareicon li a.youtube{ background-position:-64px -32px; text-indent:-999px;}
.shareicon li a.youtube:hover{ background-position:-64px 0;}
.shareicon li a.twitter{ background-position:-96px -32px; text-indent:-999px;}
.shareicon li a.twitter:hover{ background-position:-96px 0;}
.shareicon li a.link{ background:none; padding-left:10px; width:auto; text-decoration:underline;}

.globallink{ text-align:right; margin-top:5px;}
.globallink a{ text-decoration:underline;}

.slogen{ clear:both; margin-top:13px; height:30px; line-height:30px;  text-align:right; font-size:14px; font-weight:bold; color:#555;}
.slogen span{ color:@default;}

.toplink{ display:none; height:30px; text-align:right; position:relative; padding:15px 10px 15px 0;}
.toplink a{ line-height:30px; transition:all 0.5s ease 0s;}

.toplink .iconmenu{ text-align:center; vertical-align:middle; border-radius:50%; width:40px; margin-left:5px; line-height:40px; height:40px; display:none; color:#fff; font-size:1.3em; background-color:@default;}
.toplink .iconmenu:hover{ color:#fff; background-color:@light;}
.toplink .iconmenu.active{ background-color:@dark;}


.share_icon{line-height:40px; width:40px; overflow:hidden; display:block; background:url(../images/icon_facebook.png) 0 0 no-repeat; text-indent:-999px; position:absolute; right:0; top:0;}
.share_icon:hover{background-position:0 bottom;}

/* menu */
.sf-menu{ position:relative; z-index:3; background: -webkit-linear-gradient(top, #717274 0%, #717274 50%,#4f5152 51%,#4f5152 100%);background: linear-gradient(to bottom,  #717274 0%, #717274 50%,#4f5152 51%,#4f5152 100%); height:40px;}
.sf-menu ul {position:absolute; top:-999em; width:20em;}
.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; margin:0; display:inline; width:20%;}
.sf-menu li:last-child{ border:0;}
.sf-menu li a{display:block; color:#fff; line-height:20px; font-size:15px; font-weight:bold; padding:10px 0; text-align:center; transition:all 0.5s ease 0s;}
.sf-menu>li.sfHover>a, .sf-menu>li.current.sfHover>a, .sf-menu>li>a:hover, .sf-menu>li.current>a{ color:#fff;background: -webkit-linear-gradient(top, #51b8dd 0%, #51b8dd 50%, #1f9bcf 51%, #1f9bcf 100%);background: linear-gradient(to bottom, #51b8dd 0%, #51b8dd 50%, #1f9bcf 51%, #1f9bcf 100%);}

.sf-menu li li{ clear:both; padding:0; border:0; width:100%; overflow:hidden; background-color:#2a2b2c;}
.sf-menu li.sfHover li:last-child{ border:0;}
.sf-menu li li a, .sf-menu li.sfHover li a{display:block; text-align:left; border:0; font-size:14px;  padding:10px 15px; line-height:24px; color:#fff;}
.sf-menu li li a:hover{color:#fff;background: -webkit-linear-gradient(top, #51b8dd 0%, #51b8dd 50%, #1f9bcf 51%, #1f9bcf 100%); background: linear-gradient(to bottom, #51b8dd 0%, #51b8dd 50%, #1f9bcf 51%, #1f9bcf 100%);}
.sf-menu li a.sf-with-ul {padding-right:0;}
.sf-menu .sf-sub-indicator {position:absolute; right:20px; top:12px; color:#fff; text-align:center; overflow:hidden;font-family:'FontAwesome';speak: none;font-weight: normal;font-variant: normal; content: "\f0d7"; line-height:100%;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; font-size:15px;}
.sf-menu li .sf-sub-indicator:before{content: "\f0d7";}
.sf-menu li li .sf-sub-indicator{display:none; top:5px; right:5px; font-size:12px;}
.sf-menu li li .sf-sub-indicator:before{content: "\f0da";}
.sf-menu li li:first-child{ border-top-right-radius:8px; border-top-left-radius: 8px;}
.sf-menu li li:last-child{ border-bottom-right-radius:8px; border-bottom-left-radius: 8px;}
.sf-menu li:hover ul, .menu li.sfHover ul {left:0; top:40px; z-index:999; padding:5px 0 0;}
.sf-menu > li:last-child:hover ul, .sf-menu > li.sfHover:last-child ul{ left:auto; right:0;  border-radius:8px 0 8px 8px;}

.sf-menu li.sfHover li ul{position:relative; width:100%; display:block !important; visibility: inherit !important; top:auto; left:auto; padding:0; border:0; background-color:transparent;}
.sf-menu li li li + li{ margin-top:0;}
.sf-menu li li li a, .sf-menu li.sfHover li li a{ color:#fff;  padding:5px 15px 5px 35px;}
.sf-menu li li li:first-child, .sf-menu li li li:last-child{ border-radius:0; }

.menu{ margin-top:10px;}
.menu.fixed-top{ position:fixed; left:0; top:0;  width:100%; background: -webkit-linear-gradient(top, #717274 0%, #717274 50%,#4f5152 51%,#4f5152 100%);background: linear-gradient(to bottom,  #717274 0%, #717274 50%,#4f5152 51%,#4f5152 100%); z-index:10; margin-top:0;}

.mobilemenu{ display:none;}

/* banner */
.banner{ clear:both; margin:0; position:relative;  overflow:hidden; margin-bottom:20px;}
.banner .mask{ width:35%; position:absolute; top:0; left:0; height:100%; padding:60px 30px 0; box-sizing:border-box;}
.banner .mask::before{ content:"";  position:absolute; bottom:0; right:0; width:140%; height:100%; z-index:1; background-color:rgba(255,255,255,0.65); transform: skewX(-15deg)}
.banner .mask .title, .banner .mask p{ position:relative; z-index:2; color:#333;}
.banner .mask .title{ font-size:24px; line-height:40px; text-align:right;}
.banner .mask p{ font-size:20px; line-height:30px; margin-top:30px}

.mainslider{ 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; }
.mainslider li .photo{  width:100%; height:320px; display:block; .BScover}

.rslides_nav{ width:60px; height:100%; text-align:center; line-height:400px; position:absolute; z-index:1; top:0; font-size:40px; color:#fff; text-shadow:0 2px 5px rgba(0,0,0,0.6); transition:all 0.5s ease 0s; -moz-opacity:0.5; -webkit-opacity:0.5; opacity:0.5; }
.rslides_nav:hover{ background-color:rgba(105,73,50,0.3); color:#fff;-moz-opacity:0.9; -webkit-opacity:0.9; opacity:0.9; }
.rslides_nav.next{ right:0;}
.rslides_nav.prev{ left:0;}

.rslides_tabs{margin:0; height:26px; position:absolute; left:50%; bottom:20px;}
.rslides_tabs li{float:left; margin-left:10px; position:relative; right:50%; width:20px; height:20px; border-radius:50%; border:3px solid rgba(255,255,255,0.3);}
.rslides_tabs a{cursor:pointer; display:block; width:20px; height:20px;  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;}


/*sidebar*/
.sidebar{ border:1px solid #e8e8e8; background-color:#fff; transition:all 0.5s ease 0s; background-color:#f8f8f8;}
.sidebar:hover{ -webkit-box-shadow:0 0 10px rgba(0,0,0,0.2); -moz-box-shadow:0 0 10px rgba(0,0,0,0.2); box-shadow:0 0 10px rgba(0,0,0,0.2); background-color:#fff;}
.sidebar h3{padding:10px 15px; font-size:20px; color:#333; line-height:30px; border-bottom:1px solid #e8e8e8;}
.sidebar > ul{ padding:10px 0;}
.sidebar li{clear:both; position: relative;z-index: 4;}
.sidebar li.last a{ border:0;}
.sidebar li a{ color:#333; transition:all 0.5s ease 0s; line-height:24px; display:block; font-size:18px; position:relative; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; padding:7px 20px 7px 40px;}
.sidebar li a:hover{ color:@default; background-color:#f0f0f0;}
.sidebar li a .left-arrow{ font-size:12px; position:absolute; left:15px; top:7px;}
.sidebar li a .right-arrow{ font-size:20px; position:absolute; right:10px; top:7px;}
.sidebar li.current>a, .sidebar li.opened>a{ color:@dark;}


.sidebar li ul { background-color: #fff; display: none; left: 100%; position: absolute; top: 0; width:100%; border:1px solid #ccc; z-index: 5;}
.sidebar li.opened .nav-top-item{border-bottom:1px solid #ccc; border-top:1px solid #ccc; background-color:#fff; z-index:10; position:relative; border-right:1px solid #fff;}
.sidebar li.opened ul{ margin-left:-1px;}
.sidebar li.opened li.opened .nav-top-item{ border:0;}
.sidebar li li{ height:auto; padding:0; width:100%;}

.sidebar li li.opened ul{ margin-top:-1px;margin-left:0;}
.sidebar li li a, .sidebar li.opened li .nav-top-item{ border:0;padding:7px 10px; background:none; font-size:13px;}
.sidebar li.opened li .nav-top-item{ padding-right:20px;}


/* ----------  footer ---------- */
.footer {clear:both; color:#eee; margin-top:40px; padding-bottom:60px; background-color:#2a2b2c;}
.footer .container{padding-top:30px; overflow:hidden;}
.footer h4{ font-size:20px; line-height:24px; margin-bottom:10px; color:#fff;}
.row{ margin-left:-15px; margin-right:-15px; position:relative; min-height:1px; overflow:hidden;}
.row::before, .row::after{ content:""; display:table; clear:both;}
.footer .row .group{ width:50%; box-sizing: border-box; padding:0 15px; float:left; position:relative;}
.footer .row .group p{line-height:20px;}
.footer .row .group p strong{ padding-right:5px;}
.footer a{ color:#fff; text-decoration:underline;}
.footer a:hover{ color:@light;}

.footer .bottom-link{ text-align:right;}
.footer .bottom-link li{ padding:0 10px; border-right:1px solid #eee; display:inline-block;}
.footer .bottom-link li a{ line-height:20px; text-decoration:underline;}
.footer .bottom-link li:last-child{ border:0;}

.certificate{ max-width:100%; padding-top:10px;}

.copyright{ line-height:20px; margin-top:20px; text-align:right;}
.copyright span{ padding:0 10px;}
.copyright span span{ padding:0 5px;}
.copyright .gray{ color:#666;}
.copyright .gray:hover{color:@light; }


/* ----------  index css  ---------- */
.mian-about{ margin-bottom:20px;}
.about-text{ margin-bottom:10px; font-size:16px; line-height:25px; max-height:100px; overflow:hidden;}
.main-news .about-text{ max-height:200px;}
.main-news{ width:310px; float:left;}
.main-news + .main-news{ margin-left:15px}
.main-news ul{ margin-bottom:15px;}
.main-news li + li{ margin-top:10px;}
.main-news li .date{ color:@dark; display:block; line-height:20px;}
.main-news li a{ color:#555; line-height:20px; max-height:40px; overflow:hidden; display:block;}
.main-news li a:hover, .main-news .readmore:hover{ color:@light;}

.main-product li{ padding:10px 0; display:table; border-bottom:1px dashed #ccc; width:100%;}
.main-product li .photo{ display:table-cell; width:50px; height:50px; text-align:center; vertical-align:middle; background:url(../images/loading.svg) center no-repeat;}
.main-product li .photo img{ max-height:100%; max-width:100%;}
.main-product li .title{ display:table-cell; padding-left:10px;  vertical-align:middle;}
.main-product li .title a{ line-height:25px;  max-height:50px; overflow:hidden; display:block; transition:all 0.5s ease 0s; }
.main-product li:first-child{ padding-top:0; }
.main-product li:last-child{ padding-bottom:0; border:0;}

.main-content .col-2{ width:635px;}
.main-content.container .col-2 + .col-1{width:310px; margin-left:15px;}

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

.page-tab{ border-bottom:1px solid #c0c0c0; text-align:center;}
.page-tab li{ display:inline-block;}
.page-tab li a{ line-height:40px; font-size:20px; padding:14px 25px 10px;  color:#999; display:block;border-bottom:4px solid #fff; transition:all 0.5s ease 0s}
.page-tab li.current a, .page-tab li.current:hover a{color:#fff; border-color:@light; background-color:@default;}
.page-tab li a:hover{ color:@dark; background-color:#f0f0f0; border-color:#f0f0f0;}




/* navigation */
.navigation{overflow:hidden; padding:10px 15px;  margin-bottom:20px;  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.navigation a{ line-height:20px; color:#666;  display:inline-block; transition:all 0.5s ease 0s; }
.navigation a:after{ color:#666; content:"/";padding:0 10px;}
.navigation a:hover{ color:@default;}
.navigation a:hover:after{color:#666;}
.navigation strong{color:@dark;}


.detailtitle{margin-bottom:15px; position:relative; background-color:@default; }
.detailtitle h4{color:#fff; font-size:16px; line-height:24px; padding:10px 110px 10px 15px;}
.main-news .detailtitle h4, .main-product .detailtitle h4{ padding-right:15px;}
.detailtitle .font-icon{ padding-right:10px;}
.detailtitle .info{ position:absolute; top:10px; right:10px; line-height:20px; text-align:right; color:@blue;}
.detailtitle .info .font-icon{padding:0 5px; font-weight:normal;}
.nes {color:#f00; padding:0 5px;}

.newstitle{margin-bottom:15px; position:relative; background-color:#fff; -webkit-box-shadow:0 0 8px rgba(0,0,0,0.3); -moz-box-shadow:0 0 8px rgba(0,0,0,0.3); box-shadow:0 0 8px rgba(0,0,0,0.3)}
.newstitle h4 {color:#333; font-size:15px; line-height:20px; padding:10px 110px 10px 10px;}
.newstitle .font-icon{ padding-right:10px;}
.newstitle .date{ position:absolute; top:10px; right:10px; line-height:20px; text-align:right; font-size:12px; font-weight:bold; color:@dark;}

.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 img{ max-width:100%;}


.htmledit td, .htmledit th{ padding:5px 10px; /*border:1px solid #ccc;*/}
.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;}


/* content list */
.content_list table { width:100%;table-layout:fixed; overflow:hidden; border-collapse:inherit;}
.content_list table th{text-align:left; padding:5px; line-height:20px; color:@blue; background-color:#f0f0f0;}
.content_list table td{padding:10px 5px; vertical-align:top; line-height:20px; border-bottom:1px dotted #ccc;}
.content_list table tbody tr:last-child td{border:none;}
.content_list table tbody tr:hover td{background-color:#f9f9f9;}
.nodata{ text-align:center; line-height:40px;}

.list_news li{ clear:both;}
.list_news li + li{ margin-top:30px;}
.list_news li .title{ font-size:16px; line-height:20px;  margin-bottom:10px; font-weight:bold;}
.list_news li .title .date{ padding-right:10px; font-size:14px; color:#666;}
.list_news li .title a { color:@default; transition:all 0.5s ease 0s;}
.list_news li .title a:hover { color:@dark; text-decoration:underline;}
.list_news li .newsinfo{ position:relative; padding-left:220px; min-height:150px;}
.list_news li .photo{ position:absolute; left:0; top:0; width:200px; height:150px; display:block;  background:url(../images/loading.svg) center no-repeat;overflow:hidden; .BScover}
.list_news li .photo .link{ position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;transition:all 0.5s ease 0s; .BScover}
.list_news 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;}
.list_news li .photo:hover .link{ width:120%; height:120%; left:-10%; top:-10%;}
.list_news li .photo:hover .mask{ opacity:1;}

.list_news li .newsinfo p{ line-height:20px; color:#999;}
.list_news li .newsinfo .readmore{ margin-top:10px; float:right;}


.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:@light; 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-weight:bold; line-height:20px; display:block;transition:all 0.5s ease 0s;}
.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 .readmore{ line-height:20px; display:inline-block; font-size:13px; font-weight:bold;}
.list_news td .brtools .readmore .font_icon{padding-left:5px;}

.news-detail{ position:relative;}
.news-detail .page_h2{ padding-right:100px;}
.news-detail .shareicon{ position:absolute; right:0; top:0; float:inherit; margin:0;}
.news-detail .shareicon strong { float:left; margin-right:10px; line-height:32px;}
.news_photo{ text-align:center; padding:10px;}
.news_photo img{ max-width:100%;}


/* products list */
.productlist{position:relative;}
.productlist ul{ margin:0 -10px;}
.productlist li{width:200px; margin:0 10px 20px; display:inline; float:left; background-color:#fff;position:relative;transition:all 0.5s ease 0s;  -moz-box-shadow:0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 5px rgba(0,0,0,0.2); box-shadow:0 0 5px rgba(0,0,0,0.2);}
.productlist li .photo{ width:200px; height:200px; display:block; position:relative; background:url(../images/loading.svg) center no-repeat; position:relative; overflow:hidden;}
.productlist li .photo .link{ position:absolute; width:100%; height:100%; left:0; top:0; overflow:hidden;transition:all 0.5s ease 0s; .BScover}
.productlist 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;}
.productlist li .photo:hover .link{ width:120%; height:120%; left:-10%; top:-10%;}
.productlist li .photo:hover .mask{ opacity:1;}

.productlist li .productinfo{ height:30px; position:relative; clear:both; overflow:hidden; background-color:#f8f8f8;}
.productlist li .price {line-height:30px; font-weight:bold; margin-left:5px;}
.productlist li .price strong{ color:@dark; font-size:1.2em; font-family:Verdana, Geneva, sans-serif; padding-left:5px;}
.productlist li .addtocart{ font-size:15px; padding:5px 10px; position:absolute; right:0; bottom:0;}
.productlist li .title{ line-height:20px; padding:5px; display:block; font-weight:bold; text-align:center; font-size:14px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:all 0.5s ease 0s;}
.productlist li .title:hover{color:@dark;}

.productsublist li{ padding-left:220px; min-height:220px; position:relative;}
.productsublist li + li{ margin-top:20px;}
.productsublist li .photo{ width:200px; height:200px; 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; -moz-background-size: contain ;-webkit-background-size: contain;-o-background-size: contain;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{ line-height:20px; padding:5px; display:block; font-weight:bold; font-size:14px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:all 0.5s ease 0s;}
.productsublist li .title:hover{color:@dark;}
.productsublist li ul{ margin-top:5px; margin-left:40px}
.productsublist li li{ padding:0; min-height:auto; list-style:disc; line-height:24px; font-size:14px;}
.productsublist li li + li{ margin:0;}


.product-sort{ overflow:hidden;}
.product-sort ul{ margin:-15px;}
.product-sort li{ float:left; width:50%; padding:15px; box-sizing:border-box;}
.product-sort .photo{ display:block; width:100%; padding:15px; position:relative; overflow:hidden;  box-sizing:border-box; .BScover}
.product-sort .photo .title{ width:100%; position: absolute; left:0; bottom:0; padding:15px 15px 25px; z-index:2;  color:#333; font-size: 35px; line-height:45px; text-align:center; background-color:rgba(255,255,255,0.65)}

.table {  border: 1px solid #ddd; margin-bottom: 0; width:100%; max-width: 100%;  border-collapse: collapse;  border-spacing: 0;}
.table th, .table td{border: 1px solid #ddd; font-size: 14px;  line-height: 18px; padding: 8px; vertical-align: top; text-align: left;}
.table th{ background-color:#eee; color:#333; font-weight:bold;}
.table tbody>tr:nth-child(odd)>td, .table tbody>tr:nth-child(odd)>th{background-color: #f9f9f9;}


/* page tools css */
.grayr {margin:15px 0 0 0; padding:10px; text-align:center;}
.grayr a{padding:5px 8px; margin:2px; color:@default; font-weight:bold; display:inline-block; 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 details ----------  */
.detail .leftcatalog{float:left; margin-right:20px; width:320px; background-color:#fff;}
.detail .rightinfo{width:300px;  float:left;  position:relative; }


.leftcatalog .showpic{width:300px; height:300px; position: relative; padding:9px; border:1px solid #e8e8e8;}
.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{padding:7px 20px; margin-top:10px; position:relative;border:1px solid #e8e8e8;}
.catalog .prev, .catalog .next{position:absolute;color:@light;top:28px; width:11px; font-size:16px; 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 .productname{font-size:16px; color:#333; line-height:30px; margin-bottom:5px; display:block; font-family:Microsoft YaHei,Arial,Helvetica,sans-serif;}
.rightinfo .slogen{ display:block; color:#6a6a6a; line-height:20px; padding-right:120px;}
.rightinfo .productname .label{color:@light; padding-right:10px; font-size:16px; }
.rightinfo .productname .store-label{ margin-left:10px; padding:0 10px; background-color:@default;  border-radius:15px; font-family:Microsoft YaHei,Arial,Helvetica,sans-serif; color:#fff;}
.rightinfo .productinfo{margin-top:10px;}
.rightinfo .productinfo table{width:100%;}
.rightinfo .productinfo td, .rightinfo .productinfo th{line-height:20px; vertical-align:top; border:2px solid #fff;padding:5px 10px;}
.rightinfo .productinfo td { background-color:#f8f8f8;}
.rightinfo .productinfo th { width:80px; text-align:right; color:#333;  background-color:#eee;}
.rightinfo .productinfo td span{ padding:0 5px;}
.rightinfo .productinfo td .price{ font-size:18px; color:@dark; padding:0;}
.intro{ line-height:20px; max-height:240px; overflow:hidden;}

.rightinfo .productinfo ul{margin-left: 30px;}
.rightinfo .productinfo li{ padding: 0; min-height: auto; list-style: disc; line-height: 24px; font-size: 14px;}

.rightinfo .brtools{ margin:20px 0 0 0; height:40px;}
.rightinfo .brtools .addtocart{ line-height:24px; font-size:16px; font-weight:bold;}

.rightinfo .shareicon{ float:inherit; height:32px; margin:10px 0 0;}
.rightinfo .shareicon strong { float:left; margin-right:10px; line-height:32px;}

.mailshare { background-color:#eee; border:1px solid #ccc;  color:#666; display: inline-block; text-decoration: none; font-weight:bold; float:left; padding:0 10px; line-height:24px; border-radius:4px; .gradient(#f2f2f2,#eee)}
.mailshare .font-icon{ padding-right:5px; font-size:18px;}
.mailshare:hover {color:#333; background-position:0 bottom;}
.mailshare:hover span{ border-color:#ddd;}
.sharetools .cart{ position:absolute; right:0; bottom:0; padding:10px 15px;}

.colorgroup{ margin-top: 10px;}
.colorgroup strong{color:#666;line-height:20px;}
.colorgroup strong span{ color:@default; padding-left: 5px;}
.colorgroup ul{ margin-top: 5px; overflow: hidden;}
.colorgroup li{float: left; margin-right: 5px; margin-bottom: 5px; border:#fff 2px solid; width: 28px; height: 28px;}
.colorgroup li a{ text-indent: -999px; display: block; overflow: hidden; width: 26px; height: 26px; background-size: cover ; background-position: center center; border:1px solid #ccc;}
.colorgroup li a:hover{ border-color:#999;}
.colorgroup li.current{ border-color:@default;}
.colorgroup li.current a{ border-color:#fff;}

.sizegroup{ margin-top: 10px; position: relative;}
.sizegroup strong{color:#666;line-height:20px; display: block;}
.sizegroup ul{ width: 250px;margin-top: 5px; }
.sizegroup li{ line-height: 20px; position: relative; padding-left: 80px; }
.sizegroup li .title{ line-height: 20px; position: absolute; left: 0; top: 0; display: block; width: 75px; text-align: right;}
.sizegroup li input{ line-height: 18px; width: 70px; text-align: center; height: 20px; margin: 0 5px; padding: 0 5px; font-size: 12px;}
.sizegroup li select{height: 20px; margin: 0 5px; width:85px; font-size: 12px;}
.sizegroup li + li{ margin-top: 5px;}
.sizegroup li .price{ color: @default; font-size: 1.2em;}
.sizegroup .brtools{ margin: 0; position: absolute; left: 260px; top: 25px; height: auto;}
.sizegroup .brtools .button{font-weight: bold;line-height: 24px; padding: 7px 10px;}
.sizegroup .brtools .price{ line-height: 16px; margin-bottom: 5px; color: #333; text-align: center;}
.sizegroup .brtools .price span{ color: @default; font-size: 1.1em; padding-left: 5px;}


.sharetools strong{ color:#666; padding-right:5px; float:left; line-height:26px;}
.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-right:5px; 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;}


/* ----------  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:@dark; font-size: 16px; line-height: 20px;padding: 8px 30px 6px 10px;}
.hide_box .closebr{background: url(../images/icon_close.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:10px;}
.popwin .hide_box .popcontent p{ line-height:20px; padding-bottom: 10px;}
.popwin .hide_box .popcontent .brtools .button { float:right;}
.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;}

/* ---------- download ----------  */
.download-main .download-group{ margin-bottom:20px; position:relative; padding-left:180px; min-height:120px;}
.download-main .download-group .title{ line-height:30px; margin-bottom:10px; font-size:16px; font-weight:bold; color:@dark; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.download-main .download-group .title:hover{ color:#333;}
.download-main .download-group .photo{ width:160px; height:120px; display:block; position:absolute; left:0; top:0; background:url(../images/loading.svg) center no-repeat; vertical-align:middle; text-align:center;}
.download-main .download-group .photo span{ display:inline-block; vertical-align:middle; height:100%;}
.download-main .download-group .photo img{vertical-align:middle;  max-width:160px; max-height:120px;}
.download-main .download-group ul{ margin:0 -10px;}
.download-main .download-group ul::before, .download-main .download-group ul:after{ display:table; clear:both; width:100%; content:""; height:0;}
.download-main .download-group li{ line-height:30px; width:50%; float:left; padding:0 10px; margin-bottom:5px; box-sizing:border-box;}
.download-main .download-group li::before{font-family:'FontAwesome'; speak: none;font-weight: normal;font-variant: normal; content: "\f105"; padding-right:8px; color:@default;}


.list_download{ clear:both; margin-top:20px;}
.list_download .title{ background-color:#eee; line-height:20px; padding:5px 15px; font-size:15px; font-weight:bold; display:block; margin-bottom:10px;}
.list_download .title::before{font-family:'FontAwesome';speak: none;font-weight: normal;font-variant: normal; content: "\f067"; padding-right:10px; font-size:16px;}
.list_download.opened .title{background-color:@default; color:#fff;}
.list_download.opened .title:hover{background-color:@light;}
.list_download.opened .title::before{  content: "\f068";}
.list_download .info{ display:none; padding:0 5px;}
.list_download li{ line-height:20px; padding:5px 30px 5px 0; border-bottom:1px dotted #ccc; position:relative; }
.list_download li .download-icon{ position:absolute; right:0; top:5px; line-height:20px; font-size:16px;}
.list_download li a{overflow-wrap: break-word;word-break: break-all;}


/* ---------- movielist ----------  */
.movielist{ overflow:hidden;}
.movielist ul{ position:relative; margin-left: -15px; margin-right: -15px;}
.movielist li{ width:33.3%; padding-left:15px; padding-right:15px; float:left; margin-bottom:20px; box-sizing:border-box;}
.movielist li .photo{width:100%; margin-bottom:5px; position:relative; overflow:hidden; background:url(../images/loading.svg) center center no-repeat;}
.movielist li .photo .link{display:block; width:100%; height:100%; position:absolute; transition:all 0.5s ease 0s; left:0; top:0; z-index:1; .BScover}
.movielist li .photo .arrow{ display:block; opacity:0; position:absolute; font-size:6em; line-height:100px; text-align:center; left:50%; top:50%; z-index:2; transition:all 0.5s ease 0s; width:100px; height:100px; margin-left:-50px; margin-top:-50px; color:#fff; text-shadow:0 0 10px rgba(0,0,0,0.3);}
.movielist li .photo:hover .arrow{ opacity:0.8;}
.movielist li .title{ font-size:16px; display:block; line-height:20px; margin:5px 0; overflow:hidden; font-weight:bold; text-overflow: ellipsis; white-space: nowrap;}
.movielist li .title:hover{ text-decoration: underline;}
.movielist li p{color: #333;font-size: 15px; height: 40px;line-height: 20px;overflow: hidden;}

#movie-detail{ width:500px; margin-top:-240px; margin-left:-250px;} 
.movie-large{ width:480px; height:360px;}
.movie-frame{ width:480px; height:360px;}

/* ----------  contact us ----------  */
.googlemap{ position:absolute; right:0; top:60px; width:300px;}
.googlemap iframe{ margin:0; padding:0; overflow:hidden;}
#map_canvas { width:100%; height:400px;}
.maplink{line-height:30px; font-size:16px;transition:all 0.5s ease 0s; background-color:@default; display:block; text-align:center; font-weight:bold; color:#fff;}
.maplink:hover{background-color:@dark; color:#fff;}

input, textarea{color:#666; padding:9px 10px;  background:#f8f8f8; border:1px solid @light;line-height:20px; transition:all 0.5s ease 0s;}
input{height:20px; }
textarea{height:80px; width:40%;}
select{color:#666; line-height:40px;height:40px;  border:1px solid #ccc; 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:40%;}
input.type2, select.type2{ width:20%;}
input.type3, select.type3{ width:10%;}
.from_post li{ padding-left:190px; margin-bottom:15px; position:relative;}
.from_post li .title{line-height:40px; color:@dark; display:block; width:180px; text-align:right; position:absolute; left:0; top:0; font-weight:normal;}
.from_post li strong{line-height:30px; color:@default;}
.from_post li .fg{padding:10px; line-height:20px; display:inline-block;}
.from_post li a.fg{ text-decoration:underline}
.from_post li .nes{line-height:30px;}
.from_post li .check{ clear:both; display: inline-block; line-height:20px; color:#f00; padding-top:5px;}
.from_post li .check img{ padding:2px 5px 0 0;}
.from_post li .codeimg{padding:9px 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 .radio, .from_post .checkbox{ background:none; display:inline; border:0; padding:0px;margin:14px 4px 13px 0;}
.from_post .brtools{ margin:20px 0 0 190px;}
.cart_detail .from_post .brtools{ margin-left:0;}

.contactus-form{ padding-right:320px;}


/* 大屏幕 */
@media (min-width: 1200px) {
	.gotop{ margin-right:-650px;}
	.container{ width:1170px;}
	.container .col-2{ width:850px;}
	
	.header h1.logo img{ height:80px;}
	.slogen{ font-size:16px;}
	
	.mainslider li .photo{ height:440px;}
	.main-news{ width:370px;}
	.main-news + .main-news{ margin-left:30px;}
	.main-content .col-2{ width:770px;}
	.main-content.container .col-2 + .col-1{width:370px; margin-left:30px;}
	
	
	.banner .mask .title{ font-size:30px; line-height:45px;}
	.banner .mask p{ font-size:24px; line-height:40px; margin-top:40px}
	
	
	.productlist ul{ margin:0 -10px;}
	.productlist li{width:270px; margin:0 10px 20px;}
	.productlist li .photo{ width:270px; height:270px;}
	.productlist li .productinfo{ height:40px;}
	.productlist li .price{ line-height:40px;}
	.productlist li .addtocart{ line-height:30px;}
	
	.sharetools .cart{padding:10px 40px; font-size:20px;}
	.mailshare .font-icon{ display:inline;}
	
	.detail .rightinfo{width:510px;}
	.contactdetail .detail{width:790px;}
	
	.cartnav li h4{ font-size:24px;}
	.sizegroup .brtools .button{font-size: 16px; padding: 7px 20px;}
}
/* 平板电脑和小屏电脑之间的分辨率 */
@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:720px; margin:0 auto;}
	.container .col-1 + .col-2, .container .col-2 + .col-1{ margin-left:0;}
	.header h1.logo{ height:40px; top:20px;}
	.header h1.logo img{ height:40px;}
	.headerlink{ height:50px; padding-top:10px;}
	
	.topsearch{ width:180px;}
	.slogen{ font-size:12px;}
	
	
	.footer .row .group p{ font-size:12px;}
	
	/* menu */
	.sf-menu li a{ font-size:12px;}
	.sf-sub-indicator { display:none;}
	
	.productnav > li > a{ font-size:10px;}
	
	/* banner */
	.mainslider li .photo{ height:240px;}
	
	.banner .mask{ width:30%; position:absolute; top:0; left:0; height:100%; padding:30px;}
	.banner .mask .title{ font-size:20px; line-height:30px; }
	.banner .mask p{ font-size:16px; line-height:20px; margin-top:30px}
	
	.main-news{ width:230px;}
	
	.container.main-content .col-2{ width:475px;  margin:0; float:left;}
	.main-content.container .col-2 + .col-1{width:230px; margin-left:15px;float:left;}
	
	#movie-detail{ width:340px; margin-top:-150px; margin-left:-170px;} 
	.movie-large{ width:320px; height:240px;}
	.movie-frame{ width:320px; height:240px;}
	.relate-product{  width:240px; height:240px;}
	.relate-product li{ width:100px; height:100px; padding:10px;}
	.relate-product li .photo{width:100px; height:100px;}
	
	.productlist {padding: 0;}
	.productlist ul{ margin:0 -5px;}
	.productlist li{width:170px; margin:5px;}
	.productlist li .photo{ width:170px; height:170px;}
	.productlist li .price{ font-size:12px;}
	.productlist li .price strong{ font-weight:normal;}
	.productlist li .addtocart{ font-size:12px; padding:5px;}
	
	.sidebar li ul{ display:none !important;}
	.sidebar li a .right-arrow{ display:none;}
	
	.product-sort .photo .title{ font-size:24px;}
	
	.detail .rightinfo{ width:370px;}
	.sharetools .qr-code{ display:none;}
	.rightinfo .sharetools{ padding:0 120px 0 0;}
	.mailshare{ font-size:12px;}
	.sharetools .cart{ padding:5px 15px; font-size:14px; position:inherit; float:right;}

	
	.googlemap{ width:100%;  margin-bottom:20px; position:inherit; left:auto; top:auto;}
	#map_canvas { width:100%; height:300px;}
	.contactus-form{ padding-right:0;}
	
	.detail.contactus{ padding-right:0; width:auto;}
	
	.cartnav{ height:36px; margin-bottom:10px;}
	.cartnav li{ margin:0 10px;}
	.cartnav li em{ font-size:16px; line-height:36px;}
	.cartnav li h4{ font-size:14px; line-height:36px;}
	.cartnav li strong{font-size:12px; line-height:16px;}
}
 
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) {
	.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;}
	.container .col-1 + .col-2, .container .col-2 + .col-1{ margin-left:0;}
	
	
	.header{width:100%; height:auto;}
	.header h1.logo{ height:50px; top:10px;}
	.header h1.logo img{height:50px;}
	.headerlink{ display:none;}

	.toplink{ height:40px; display:block;}
	.toplink .iconmenu{ display: inline-block;}
	.menu, .productmenu{ display:none;}
	
	.mobilemenu{ width:100%; position:relative;}
	.mobilemenu .icon-double-angle-up{display: block; font-size:1.4em; text-align:center; color:#fff; line-height:20px; border-radius:3px; background-color:@light;}
	.mobilemenu .icon-double-angle-up:hover{ color:#fff;background-color:@dark;}
	.mobilemenu ul{ padding:10px; background-color:@default;  border:1px solid @light;}
	.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; }
	.mobilemenu li a:hover, .mobilemenu li.current a, .mobilemenu li.current a:hover{color:@light;}
	
	
	/* banner */
	.mainslider{ height:auto;}
	.mainslider li .photo{ width:100%; height:200px;}
	
	.banner .mask{ width:100%; height: auto; padding:10px 20px;}
	.banner .mask::before{ position:absolute; top:auto; bottom:0; right:0; width:100%; height:100%; transform: none;}
	.banner .mask .title, .banner .mask p{overflow:hidden; white-space: nowrap; text-overflow:ellispsis;}
	.banner .mask .title{ font-size:14px; line-height:20px; text-align:left;}
	.banner .mask p{ font-size:12px; line-height:20px; margin-top:0;}
	
	.rslides_tabs li{ height:10px; width:10px; border-width:1px; margin-left:8px;}
	.rslides_tabs a{height:10px; width:10px;}
	
	.main-news{ width:100%; float:inherit; margin-bottom:20px;}
	.main-news .about-text{ max-height: inherit;}
	.main-news + .main-news{ margin-left:0;}
	.main-content.container .col-2 + .col-1{ width:100%; margin:0;}
	
	.detailtitle h4{ font-size:14px; padding-right:0;}
	
	.page-tab li{ display:block; margin:10px 0; }
	.page-tab li a{ line-height:30px; font-size:18px; padding:5px 0;  color:#999; display:block;border:0; text-align:center;  background-color:#f0f0f0; border-radius:4px; border:1px solid #ccc;}
	.page-tab li.current a, .page-tab li.current:hover a{ border-color:@default;  }
	.page-tab li a:hover{ color:@default; border-color:@light; }
	
	.pagecontent{ background:none;}
	
	.brtools.family-button .button{ font-size:18px;}
	.productlist{ padding:0; margin:0;}
	.productlist h3{ font-size:20px; letter-spacing:0;}
	
	.productlist ul{ width:420px; margin:0 auto;}
	.productlist li{width:200px; margin:5px;}
	.productlist li .photo{ width:200px; height:200px;}
	.productlist li .price{ font-size:12px; margin-left:0;}
	.productlist li .productinfo{ background-color:transparent;}
	.productlist li .addtocart{ font-size:12px; padding:5px; right:10px;}
	
	.product-sort li{ float: inherit; width:100%;}
	.product-sort .photo .title{ font-size: 20px; line-height:30px; }
	
	.productsublist li{ padding:0; min-height:auto;}
	.productsublist li .photo{  position: inherit; left:auto; top:auto; margin: 0 auto 10px;}
	
	.sidebar li ul{ display:none !important;}
	.sidebar li a .right-arrow{ display:none;}
	
	.footer { padding-bottom:30px;}
	.footer h4{ text-align:center;}
	.footer .row .group, .footer .row .group.qr{ float:inherit; clear:both; width:100%; margin-bottom:10px; text-align:center;}
	.copyright{ text-align:center; margin-top:0;}
	.copyright>span{ display:block;}
	.footer .bottom-link{ text-align:center;}
	
	.list_news li .newsinfo{ padding-left:0; min-height:auto;}
	.list_news li .photo{ width:100%; height:270px; position: inherit; margin-bottom:10px;}
	.list_news li::after{ display:table; clear:both; content:"";}
	
	.grayr {padding:0; font-size:10px;}
	.grayr a {padding:4px;}
	.grayr span.current {padding:4px;}
	.grayr span.disabled {padding:4px;}
	
	.container .page_h2{ font-size:16px; line-height:24px;}
	
	.newstitle h4 { padding-right:10px;}
	.newstitle .date{ position: inherit; display:block; padding:0 10px 10px; top:auto; right:auto;text-align:left;}
	.detailtitle .info{ position:inherit; line-height:20px; padding:0 10px; top:auto; right:auto; display:block; text-align:left;}
	
	.brtools .next .text, .brtools .prev  .text{ display:none;}
	.brtools .button{ padding-left:15px; padding-right:15px;}
	
	.zoomDiv, .zoomMask { display:none;}
	.detail .leftcatalog{ clear:both; width:100%; margin:0 0 20px 0;}
	
	.leftcatalog .showpic{ margin:0 auto; width:240px; height:240px;}
	.leftcatalog .showpic table td img{ max-width:240px; max-height:240px; }
	.intro{height:auto;}
	
	.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 .slogen{ padding-right:0;}
	.detail .rightinfo{clear:both; width:100%; height: auto;}
	
	.rightinfo .brtools { position:absolute; right:0; bottom:0; margin:0; z-index:1;}
	
	.rightinfo .sharetools{ padding:0;}
	
	
	.popwin, .cartpopwin{ left:20px; right:20px;  margin: 0; width: auto;}
	.popwin .hide_box .popcontent{ clear:both; padding:10px;}
	
	.movielist li{ width:50%}
	.movielist li .photo .arrow{  font-size:3em; line-height:40px; width:40px; height:40px; margin-left:-20px; margin-top:-20px;}
	.movielist li .title{ font-size:12px; }
	.mailshare{font-size:12px;}
	
	#movie-detail{ width:100%; margin:-170px 0 0; left:0; top:50%; right:0; box-sizing:border-box; position:fixed;} 
	.movie-large{ width:320px; height:240px; margin:0 auto;}
	.movie-frame{ width:320px; height:240px;}
	
	
	.googlemap{ width:100%;  margin-bottom:20px; position:inherit; left:auto; top:auto;}
	#map_canvas { width:100%; height:300px;}
	.contactus-form{ padding-right:0;}
	
	.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 li .check{ display:block;}
	.from_post .brtools{ margin:20px 0 0 0;}
	#ContactForm .info{ display:none;}
	input.type1, select.type1, textarea{ width:80%;}
	input.type2, select.type2{ width:40%;}
	input.type3, select.type3{ width:20%;}
	
	.newslist ul{ margin:0;}
	.newslist li{ width:100%; padding:0; float:inherit; height: auto;}
	.newslist li .photo { height:360px;}
	.newslist li .title{ max-height: inherit;}
	.newslist li p{  max-height: inherit;}
	
	.faqlist{ padding:0;}
	
	.store-column ul{ display: block; width:100%;}
	.store-column li{ display: block; width:100%; margin-bottom:15px;}
	.store-column li.movie{ width:100%; padding-right:0;}
	.store-column li.movie .movie-frame{ width:100%; height:270px;}
	
	.download-main .download-group{ padding:0; min-height:auto;}
	.download-main .download-group .photo{ position:inherit; left:auto; top:auto; margin:0 auto 10px; }
	
	.cart_detail{ padding:0;}
	.cartnav{ margin-bottom:20px; height: auto; background: url(../images/fg_img.gif) 15px 0 repeat-y;}
	.cartnav ul{height: auto; }
	.cartnav li{ clear:both; float:none; display:block; padding-left:40px; line-height:30px; padding-right:5px; margin:10px 0;}
	.cartnav li em{left:0; top:0; line-height:30px; font-weight:bold; height:30px; width:30px; text-align:center; background-color:#eee; color:#7a7a7a; font-size:16px; border-radius:50%;}
	.cartnav li.current em{color:#fff; background-color:@blue;}
	.cartnav li h4{ font-size:20px; line-height:30px; text-align:left;}
	.cartnav li strong{ display:none;}
	
	.cartlist { clear:both; overflow:hidden; margin-bottom:20px; background-color:#fff;}
	.cartlist ul{ display:block; padding:0 30px 0 80px; position:relative; width:auto;}
	.cartlist li{ display:block; clear:both; text-align: left; padding:5px;}
	.cartlist li.photo{background: none; width:70px;padding-left:0; position:absolute; left:0; top:0;}
	.cartlist li.delete{width:60px;  position:absolute; right:0; top:0; text-align:right;}
	.cartlist ul:hover li.photo{ background-image: none}
	.cartlist ul.list-header{display:none;}
	.cartlist ul.list-footer{ padding:0;}
	.cartlist li .mobiletitle{ display: inline-block;}
	
	.cart_detail .brtools{ text-align:center; height:auto;}
	.cart_detail .brtools .cart_button{ display:block; text-align:center;}
	.cart_detail .brtools .cart_button + .cart_button{ margin-top:10px; margin-left:0;}
	
	.cart_detail{min-height: inherit;}
	.grouptitle .titletext h3{letter-spacing:0;}
	.grouptitle .textinfo{ font-size:12px;}
	.grouptitle .titletext input{ margin-left:0;}
	.cart_detail .from_post .fg{ clear:both; display:block;}
	.grouptitle .titletext label{ clear:both; display:block;}
	
	.ordertable ul{width:100%; display: block;}
	.ordertable li{ display: block; border:0; text-align:left !important;}
	.ordertable li .mobiletitle{ display:none;}
	.ordertable li.productname{ width:auto;}
	.ordertable li .mobiletitle{display: inline-block; font-size:13px; color:#333;}
	.ordertable ul.list-header{ display:none;}
	
	.sizegroup .brtools .price{ text-align: left;}
}
 
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
	.container{ width:auto; margin-left:10px; margin-right:10px;}
	.header{ margin-bottom:10px;}
	.header h1.logo{height:35px; top:15px;}
	.header h1.logo img{ height:35px;}
	
	.toplink{height:30px;}
	.toplink .iconmenu{ width:30px; height:30px; line-height:30px; font-size:1.1em;}
	.headerlink .links li a, .headerlink .links li span{ padding:0 5px; font-size:12px;}
	.headerlink .links li a .font-icon{ display:none;}
	
	/* banner */
	.mainslider li .photo{ height:150px;}
	.rslides_tabs{ bottom:5px; height:14px;}
	.rslides_tabs li{ height:10px; width:10px; margin-left:5px; border-width:2px;}
	.rslides_tabs a{height:10px; width:10px;}
	
	.navigation a, .navigation strong{ font-size:12px;}
	.brtools.family-button .button{ line-height:40px; display:block; width:auto;}
	.brtools.family-button .button +  .button{ margin-top:20px; margin-left:0;}
	
	.mainalbum li { width:100%; float:inherit;}
	.mainalbum li .photo .mask .title{ font-size:30px; line-height:45x;}
	.mainalbum li .photo .mask p{ font-size:16px; line-height:30px; max-height:60px;}
	
	.newslist li .photo { height:250px;}
	.detailtitle .info{ font-size:12px;}
	.mailshare{ display:none;}
	
	.footer .row{ margin:0;}
	.footer{ font-size:12px;}
	.footer .row .group p{ padding:0;}
	.footer .row .group .font-icon{ display:none;}
	.footer .item{ display:block; text-align:center;}
	.copyright{ text-align:center; margin-top:0;}
	.copyright>span{ display:block;}
	.grayr { font-size:12px;}
	
	.readmore{ font-size:14px;}
	.productlist ul{ width:auto;}
	.productlist li{ clear:both; width:100%; margin:0 0 10px; padding-left:110px; position:relative; box-sizing:border-box; height:100px; background-color:#f9f9f9;}
	.productlist li:hover{ background-color:#fff;}
	.productlist li .photo{ width:100px; height:100px; position:absolute; left:0; top:0; margin:0; z-index:1;}
	.productlist li .title{ font-size:14px; line-height:20px; padding:10px; white-space:inherit; text-align:left;}
	
	.productlist li .productinfo{ padding:0 10px; height:auto; font-size:13px;}
	.productlist li .qr-code{ display:none;}
	.productlist li .price{ padding:0;}
	.productlist li .price strong{ display:inline; padding-left:5px;}
	.productlist li .addfavorite{ right:10px; bottom:10px;}
	
	.download-main .download-group li{ width:100%; float:inherit;}
	
	.product-sort .groupitem{ width:100%; float:inherit;}
	.product-sort .photo .title{ font-size: 20px; line-height:30px; }
	
	.sizegroup .brtools { position: relative; margin-top: 10px; left: auto; top: auto;}
	.sizegroup .brtools .price{ text-align: center;}
	.sizegroup .brtools .button{ display: block; text-align: center; width: 100%;}
	
}