@charset "utf-8";
@import url("animate.css");
@import url("../js/table/responsive-tables.css");
@import url("footer.css");
@import url("https://use.fontawesome.com/releases/v5.3.1/css/all.css");
@import url("../js/lightbox_highlight/highlight.css");
@import url("https://fonts.googleapis.com/css?family=Archivo+Black");
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);/*黑體*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);/*宋體*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);/*圓體*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexming.css);/*明體*/
/*@import url("font-awesome.min.css");*/

A:link { FONT-STYLE: normal; TEXT-DECORATION: none; color: #50a4b3; transition:0.3s;} 
A:visited { FONT-STYLE: normal; TEXT-DECORATION: none; color: #999} 
A:active { FONT-STYLE: normal; TEXT-DECORATION: none; color: #50a4b3} 
A:hover {FONT-STYLE: normal;  TEXT-DECORATION: none; opacity:.7;} 
html {font-size: 62.5%; height: 100%;/*10 ÷ 16 × 100% = 62.5%;*/}
body { margin:0px; padding:0px; width: 100%; height: 100%;
	font-size: 1.6rem;/*1.3 × 10px = 13px */
	color:#333;
	line-height: 3rem;
	background:url(../images/bg.jpg) no-repeat center top;
	font-family:Arial, Helvetica,'Noto Sans TC', 微軟正黑體, sans-serif;}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.ming{font-family:Arial, Helvetica,'cwTeXMing', sans-serif;}
.yen{font-family:Arial, Helvetica,'cwTeXYen', sans-serif;}
.song{font-family:Arial, Helvetica,'cwTeXFangSong', sans-serif;}
.f10px{font-size:1.0rem;}
.f12pt{font-size:1.2rem;}
.f16px{font-size:1.6rem;}
.f30px{font-size:3rem;}
.f36px{font-size:3.6rem;}
.fblack{font-size:3.6rem; font-family: 'Archivo Black', Arial Black, sans-serif;}
.c_orang{ color: #fca000;}
.c_gray01{ color:#828282;}
.c_gray02{ color:#babab9;}
.c_black{ color:#000;}
.c_red{ color:#ff5571;}
.c_green{ color: #86b100;}
.c_green02{color: #719a00;}
.c_light_orange{ color:#e4af73;}
.liheight16{ line-height:16px;}
.both{clear:both;}
.float_r{ float:right;}
.float_l{ float:left;}

/* -------------------------------- 
but.icon
-------------------------------- */
input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; }
select, input, textarea{font-size:1.5rem; font-family:Arial, Helvetica,'Noto Sans TC', 微軟正黑體, sans-serif;padding: 3px; }
input{cursor:pointer;}

.form01::-webkit-input-placeholder,
.form02::-webkit-input-placeholder,
.contact_form::-webkit-input-placeholder,
input.login_form::-webkit-input-placeholder{/*placeholder：輸入字框預設值的提示信息（hint）*/
  color: #ccc;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
}
.form01:focus,
.form02:focus,
.contact_form:focus,
input.login_form:focus{
  outline: none;
  border: 1px solid #ddcca6;
  box-shadow: 0 0 10px #ddcca6;
  -webkit-transition: all 0.2s ease-in-out;
}
.form01:focus::-webkit-input-placeholder,
.form02:focus::-webkit-input-placeholder,
.contact_form:focus::-webkit-input-placeholder,
input.login_form:focus::-webkit-input-placeholder{
  opacity: 0.5;
}

/*input::placeholder{ color: #f00;}*/
.back{ text-align: center; clear:both;letter-spacing:2px; margin: 5%;}
.back a:link, .back a:visited {display: inline-block; font-size:2.4rem; color:#000; background-color: #fff; border: 3px solid #000; padding: 10px 40px;}
.back a:active, .back a:hover {color: #fff; background-color: #000;}
.send{ text-align:center;}
.send input{font-size:2rem; color:#000; padding: 12px 40px; margin: 30px 0; border: 3px solid #000; background-color:#fff;}
.send input:hover{color:#fff; background-color:#000;}
.addtocar{ font-size: 2.4rem; color: #000; letter-spacing: 0px; border: 3px solid #000; background-color:#fff; margin-top: 30px; padding: 10px 30px;}
.addtocar:hover{color: #fff; background-color:#000; }

/* scrollbar */
::-webkit-scrollbar {width: 10px; }
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {display: none; }
::-webkit-scrollbar-track-piece {background-color: #eee; }
::-webkit-scrollbar-thumb:vertical {background-color: #50a4b3;}
/*   all   */
/* -------------------------------- 
header
-------------------------------- */
header{ position: absolute; z-index: 100; width: 100%; padding:10px;}
#header { position: relative; width: 100%;  max-width: 1440px;margin:auto;}

#header.hid{
animation: show 1s forwards;
	opacity: 0;
}
@keyframes show {
  100% {
	  opacity: 1;
	transition: opacity 3s;
  }
}
#header.is-hidden {
    opacity: 0;
    position: fixed;
    top: -20%;
	left: 12%;
    -webkit-transition: top 0.3s, opacity 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s;
    transition: top 0.3s, opacity 0.3s;
}
#header.is-hidden.slide-in {top: 0%; opacity: 1;background: transparent;}

.logo { float:left;}
.logo img{ width: 130px; margin-top: 10px; margin-left: 5%;
animation: logoimglag 0.7s forwards;
-ms-transform: scale(.8,.8);
  -webkit-transform: scale(.8,.8);
  transform: scale(.8,.8);
}
.is-hidden > .logo img{ margin: 3px;
	animation: logoimg 0.7s forwards;
-ms-transform: scale(1,1);
  -webkit-transform: scale(1,1);
  transform: scale(1,1);
}
@keyframes logoimg {
  100% {
	-ms-transform: scale(.8,.8);
	-webkit-transform: scale(.8,.8);
	transform: scale(.8,.8);
  }
}
@keyframes logoimglag {
  100% {
	-ms-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transform: scale(1,1);
  }
}

#main_bg{position: relative; overflow: hidden; width:100%; max-width:1920px; padding:40px 10%; margin: auto; background-color: #fff; top: 64%;}
#main_bg_80p{position: relative; overflow: hidden; width: 100%; padding: 40px 10%; margin: auto; background-color: #fff; top: 64%;}
#main_bg_all{position: relative; overflow: hidden; width:100%; padding:40px 0; background-color: #fff; top: 64%;}
#main_bg img, #main_bg_all img, #main_bg_80p img{ max-width: 100%;}

/*   left   */
aside, article, section{display:initial;}
.left{display:inline-block;.float:left;vertical-align:top;width: 20%;clear:both;}
.left_tit span{display: none;}
#main_bg .left_tit img{    max-width: 240px;}
#main_bg_all .left, #main_bg_80p .left{display: none;}

.left img{ max-width: 100%; }
.menu { margin-bottom:60px;font-size:1.5rem;}
.menu UL { MARGIN: 0px;PADDING: 0px; Z-INDEX:2; POSITION: relative; line-height: 1.6rem;}
.menu LI { PADDING:0px;MARGIN: 0px;list-style-type: none; WIDTH:100%; border-bottom: 1px solid #eee;}
.menu LI A { display:inline-block;color:#000;BACKGROUND: url(../images/ .gif) no-repeat 0px top;WIDTH: 100%; padding:10px 0 10px 10px; transition:0.5s;}
.menu LI A:visited{ color:#333;}
.menu LI A:hover { BACKGROUND-POSITION: -260px top; TEXT-DECORATION: none;color:#50a4b3;border-bottom: 2px solid #50a4b3;}
.menu LI div.currMenu {color:#50a4b3; display:inline-block;WIDTH: 90%; padding-top:8px; }
.menu LI div.currMenu A {color:#50a4b3;BACKGROUND: url(../images/ .gif) no-repeat -250px top;}
.menu > UL > LI > A.currMenu { display:inline-block; color:#50a4b3;BACKGROUND: url(../images/ .gif) no-repeat -250px top;padding-left:10px;width: 100%; border-bottom:2px solid #50a4b3;}

.menu_sub01 { font-size: 1.3rem; font-weight:normal;color: #999; padding-left: 0px;}
.menu UL .menu_sub01{ margin-bottom: 20px;}
.menu_sub01 A {  display:inline-block; WIDTH:100%; padding:10px 0 10px 15px;min-height:26px;line-height:16px;}
.menu_sub01 A:link, .menu_sub01 A:visited  {color: #666; text-decoration: none; background:url(../images/ .gif) no-repeat 0px top;}
.menu_sub01 A:active, .menu_sub01 A:hover {color: #50a4b3; text-decoration: none; background:url(../images/ .gif) no-repeat 0px bottom;BACKGROUND-POSITION: -260px top;border-bottom:1px solid #50a4b3;}

.menu_sub02 { font-size: 1.2rem; font-weight:normal;line-height:18px;}
.menu_sub02 A {display:inline-block; color:#555; WIDTH: 85%; margin-left: 30px; padding:8px 0; BACKGROUND: url(../images/ .gif) no-repeat 0px 50%;}
.menu_sub02 A:link, .menu_sub02 A:visited  {color: #999; text-decoration: none; background:url(../images/ .gif) no-repeat;}
.menu_sub02 A:active, .menu_sub02 A:hover {color: #777; text-decoration: none; background:url(../images/ .gif) no-repeat;BACKGROUND-POSITION: -228px top;border-bottom:1px solid #aaa;}
#product_menu .menu_sub01, #product_menu .menu_sub02, #product_menu .menu_sub03, #product_menu .menu_sub04 { display:none; }

/*   content   */
.content{ float: right; display:inline-block; background:url(../images/.jpg) no-repeat right top;padding: 0px 20px 0px 20px;_padding: 0px 10px 0px 20px; text-align: left;width: 76%; _width: 72%;clear:both;.clear:none;
text-align: justify;
　　text-justify: inter-ideograph;
　　-ms-text-justify: inter-ideograph; /*IE9*/
　　-webkit-text-align-last: justify; /*Chrome*/
　　-moz-text-align-last: justify; /*Firefox*/}
#main_bg_all .content, #main_bg_80p .content{width: 100%; padding: 0;}
h1{font-size:2.2rem; display:inline;}
.h1{color:#615a49;padding:5px 0px 0px 0px;font-family:Arial, Helvetica,'Noto Sans TC', 微軟正黑體, sans-serif; float:left;}
h2{font-size:1.8em; margin:0px;}
.title{ margin-bottom:20px; height:40px;}
.title_pic{ display: none;text-align: center;}
.title_pic img{ }
.breadcrumbs{ font-size:1.1rem;color:#50a4b3; height:20px; margin:0px; float:right; }
.breadcrumbs a:link, .breadcrumbs a:visited { color: #bebebe;	padding-top: 10px;}
.breadcrumbs a:active, .breadcrumbs a:hover { color: #50a4b3;	text-decoration: underline;}

.content_main{ }

/* ------------- product li列表樣式-------------*/
.catlist_box{border: 0px solid #ffcccc;}
.catlist_box .proli_case { display: -ms-inline-block; display: inline-block;width: 100%;}
.catlist_box .proli{ float:left; margin:0px 10px;font-size:11px; width:47%; line-height:18px;padding:10px 0px 20px 0px;background:url(../images/pro_line.jpg) bottom no-repeat;border:0px solid #069;}
.catlist_box .proli a:link, .catlist_box .pro a:visited  {color:#777;}
.catlist_box .proli a:active, .catlist_box .pro a:hover { color:#ffae00;	text-decoration: underline;}
.catlist_box .proli img{ }
.catlist_box .proliimg { min-width:130px;float:left;}
.catlist_box .proli_des{ float:left;margin-left:20px; border:0px solid #069; width:100%;}
.catlist_box .proli_des img{ float:right;}
.catlist_box .proli_name{ color:#339;font-size:13px; font-weight: bold;background:url(../images/pro_frame_under01_04.jpg) no-repeat left -5px; min-height:30px; .height:30px; padding:5px 15px 0px 15px;}

/*  product  四個一行 預設  */
.proli_case{ display: -ms-flexbox; display: flex; padding:5px 0px 5px 0px; overflow: hidden; }
.proli{position: relative; float:left; text-align:center; font-size:1.2rem; width:calc(100%/4 - 1.5%); margin:0 1.5% 0 0; line-height:1.5; padding-bottom:60px;
	/* 另外一種 寬度寫法   width:calc(100%/4 - 20px);margin:0px calc(20px * 4 / 4) 0 0;*/
}
.proliimg { width:100%; text-align : center;
  /* Firefox, Chrome */
  /* height: 100%; .height:170px; line-height : 170px; 暫時取消，免得影響購物ICON*/ 
  white-space : nowrap;
  /* IE */
  *font-size : 160px;  /* 200px * 0.9 = 180px */
}
.proliimg:after { content : ".";  font-size : 0;  -webkit-text-size-adjust : none;}
.proliimg img {  vertical-align : middle;}
.proli img {max-width:100%; transition: opacity 1s, transform 1s;}
.proliimg{ position:relative;}

/*滑鼠滑過圖放大---------------------*/
.proliimg{ width: 100%;}
.proliimg img{width: 100%;}
.proliimg img A:hover{opacity: 1;}
.proliimg::after{
	content : " "; 
	position: absolute;
	top: 0;
	left: 0;
	background: #61bccf; width: 100%; height: 100%;
	opacity: 0;
	transition: 1s;
 }
.proliimg:hover::after{
	opacity: .6;
}
.proliimg span{ 
	position: absolute;
	opacity: 0;
	z-index: 6;
	width: 100%;
	height: 100%;
    top: 30%;
	left: 0;
	text-align: center;
	font-size: 1.3rem; font-weight: normal;color: #fff; text-decoration: none;
-webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);}
.proliimg:hover span{ 
	top: 82%;
	opacity: 1;
	-webkit-transform: translate3d(0, -80px, 0);
  transform: translate3d(0, -80px, 0);
}
.proliimg figcaption::before,
.proliimg figcaption::after {
  position: absolute;
	top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
  content: '';
  opacity: 1;
	z-index: 6;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  }

.proliimg figcaption::before {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  }

.proliimg figcaption::after {
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0); }

.proliimg:hover figcaption::before,
.proliimg:hover figcaption::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1); }

.proli a:link, .proli a:visited  {color:#777; font-weight:bold;}
.proli a:active, .proli a:hover { opacity: 1; color:#50a4b3;	text-decoration: underline;}
.proli_des{ text-align:center;}
.proli_des img { margin:0 auto; width:auto;}
.proli_name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #000;font-size:1.6rem; text-align:center;}
.proli_price{ margin-bottom:10px;}
.pro_detail{ float:left; width:50%; margin-left: 5%; margin-bottom:20px;}
.pro_topimg {}
.pro_detailimg{float:left; display:block; width:45%;margin-bottom:20px;}
.pro_midimg{ min-height:300px;}
.pro_midimg a{ opacity: 1;}
.pro_midimg img{ width:100%;}
.pro_midimg_s img{border:1px solid #d3d3d3; margin:6px 6px 0px 0px; float:left;}
.pro_name{text-align: initial; -webkit-text-align-last: initial; -moz-text-align-last: initial;padding-bottom: 20px; }
.pro_name h1{font-size:2.4rem;font-family: "Arial Black"; color:#000;line-height: 1.2;}
.pro_price{ margin:10px 0; font-size:1.1rem; color:#ff4e00; font-weight:normal; text-align:right;}
.pro_share{ text-align:right; margin:20px 0;}
.pro_descript{background:url(../images/titles_description.png) no-repeat; background-size: 100%; padding-top: 20px;}
.pro_descript img{ max-width:100%;}
.proli_send{position: absolute; bottom: 0; left: 25%; }
.pro_qty{ line-height:30px; margin-top:10px; padding:10px 0; background-color:#f3f3f3; border-bottom:1px dashed #e0e0e0;border-top:1px dashed #e0e0e0;}
.pro_qty img{ margin:0px 5px; border:1px solid #b5b4b4;}
.pro_alsolike{ display: none; background:url(../images/titles_alsolike.jpg) no-repeat; padding-top:65px;}


/*   search  */
.search { background:url(../images/mutitle_search.jpg) no-repeat; background-size: 100%; width:100%; padding-top: 50px; }
.searchbox{ color:#a2a2a2; background:transparent; border:1px solid #e3e5e7; width: 71%; padding: 10px; }
/*  IE高度寫法 .searchbox{  height:20px; height:21px\9;height:21px\0;}  */
.search_go{ padding: 0;}

/*   pagination   */
#pagination {margin-top: 20px;	margin-bottom: 30px;}
#pagination A {BORDER: #fff 1px solid; PADDING: 0px 8px; MARGIN: 3px 2px 0; DISPLAY: block; BACKGROUND: #fff; FLOAT: left;}
#pagination SPAN, .onthis { line-height:21px; COLOR: #666;  FONT-WEIGHT: bold;PADDING: 0px 8px; MARGIN: 3px 2px 0; DISPLAY: block;  FLOAT: left; border-bottom:1px solid #909090;}
#pagination A { COLOR: #7030a0; TEXT-DECORATION: none;line-height:21px;}
#pagination A:hover {COLOR: #003; TEXT-DECORATION: none;PADDING: 0px 8px; MARGIN: 0px 2px;DISPLAY: block; BACKGROUND: #bababa; FLOAT: left;}
#pagination A:active {COLOR: #000;}
#pagination .prevnext a{ border:0px; padding:0px; margin:0px; BACKGROUND:#fff; position:relative;}
#pagination .prevnext A:hover:after {
	content: "";
    position: absolute;
    left: 0;
    width: 100%;
	height: 30px;
	background-color:rgba(255, 255, 255, .5);}
.rwd_br{ display:none;}
#pagination .go{ padding-left:20px; display:inline-block;}
#pagination .go_send{ border: 0;}

/*   photo   */
.photo{  width:750px; margin:0px auto;}
.photo_content{ font-size:1.0rem; color:#7c7c7c; }

.photoli_case{padding:5px 0px 5px 0px;}
.photoli{ text-align:center; float:left; margin:0px 10px 30px 10px;width:30%; min-width:200px; line-height:18px;}
.photoli img{ }
.photoliimg{ margin-bottom:5px;}
.photoli_des{ text-align:left; color:#a1a1a1;}
.photoli_des img { display:block; margin:20px auto; width:auto;}
.photoli_name{color: #7e7d7d;font-size:1.3rem; padding:5px;}
.photoli_subname{ font-size:1.0rem; color:#d1d1d1; border-bottom:2px solid #ffa800; padding-bottom:10px; margin-bottom:10px;}

/*   login   */
.member_bg{ background-color: #f2f2f2; overflow: hidden;}
.member_title{ margin-top: 40px;}
.member_link{}
.member_link li{padding-bottom:18px; width:100px; }
.member_link li a{	color:#8c6239;}
.member_link li a:hover{text-decoration:underline;color:#d4ab2f;}
.member_case{}
.member_murwd{ display:none;}
.member_policy { width:97%; height:250px; overflow:scroll; border:1px solid #999; margin-bottom:7px; }
.date_bg{ background-color:#f3f1e8;}

.login_l{ float:left; width:45%;height: 360px; margin-left: 5%; padding: 6%; background-color: #fff;border-top: 1px solid #bba164; }
.login_r{float:right; width:45%;height: 360px; margin-right: 5%; color: #fff; text-align:center;border-top: 1px solid #bba164; background:url(../images/member_login.jpg); background-size: cover;}
a#fb_login{ display: block;  width: 100%; height: 100%; padding-top: 15%;}
.login_r a{color: #fff;}
input.login_form{ width:100%;
	border: 1px solid #ccc; border-radius: 3px;
	box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out;}
.ico_checkbut{ display: inline-block; background-color: #e9e5e2; padding: 3px 10px; border-radius: 40px;}

/*   shoppingcar   */
.car_shoplist{ width: 95%;}
.car_totalprice{float: right; display: block; padding: 10px; margin: 20px 0 40px; border: 4px solid #bba164;}
.car_payway{ color: #fff; border-top: 2px solid #bba164; background-color: #666;}

/*   contact   */
.contact #main_bg_80p {top: auto;}
.contact_info{ float:right; width:30%;color:#9b9b9b; }
.contact_info strong{ color:#000;}
.contact_td{ float:left;width:60%;}
.contact_l_l{ float: left; width: 48%; margin-bottom: 20px;}
.contact_l_r{float: right; width: 48%; margin-bottom: 20px;}
.contact_l_all{width: 100%; margin-bottom: 20px;}
.contact_form{WIDTH: 100%; padding:5px;border:1px solid #ddd;border-radius: 3px;
box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out}
.contact_info ul { padding: 10px;}
.contact_info ul li{ padding-left: 30px;list-style: none;}
.con_add{ background:url(../images/contact_ico_add.png) no-repeat;background-position-y: 4px; background-size: 30px;}
.con_phone{ background:url(../images/contact_ico_phone.png) no-repeat;background-position-y: 4px; background-size: 30px;}
.con_fax{ background:url(../images/contact_ico_fax.png) no-repeat;background-position-y: 4px; background-size: 30px;}
.con_mail{ background:url(../images/contact_ico_mail.png) no-repeat; background-position-y: 4px; background-size: 30px;}
.form01{ width:97%; padding:8px;border:1px solid #c2c2c2;border-radius: 3px;
box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out;}
.form02{width:60%; padding:8px;border:1px solid #c2c2c2;border-radius: 3px;
box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out;}
.w_60p{ width:60%; margin:0 auto;}

/*   news */
.news_content{ padding: 0 50px 0;}
.new_date{ color:#50a4b3; font-size: 1.2rem;margin-bottom: 30px; }
.news_content .text{ position: relative; color: #666; font-size: 2.4rem; margin-bottom: 10px;}
.news_content .text::after{ 
	content : " "; 
	position: absolute;
	top: 40px;
	left: 0;
	width: 40px;
}
.news_content .day{display: inline-block;}

/*   index  */
.index .logo{display: none;}
.index #main_bg_all {background-color: transparent; top: 74%; padding: 40px 0 0;}
.index article { display: contents;}
.news_title{color: #c0c7da; font-size: 2.4rem; text-align: center; background-color: #8795bc; padding: 60px 20px;}
.news_title strong{color: #fff; font-size: 6rem;font-family: "Arial Black";line-height: 1;}
.news{background-color: #fff;padding: 0 40px 100px 40px;}
.news table{ width: 70%;}

/*   table   */
.tdmain_a{padding-left: 30px; border-top:2px solid #6e6c6c; border-bottom:1px solid #CCC; padding:5px;}
.tdmain_b{padding-left: 30px; padding:5px; border-top:2px solid #bba164;border-bottom:1px solid #bba164;}
.tdmain_c{ background-color: #7f7f7f; padding:5px; color:#FFF;}
.td01{ padding: 8px;border-bottom:0px solid #e7e7e7;}
table tr:nth-child(even) td.td01{ border-bottom:0px solid #e7e7e7;}
.car_shoplist .td01{padding: 20px 5px;}
.td02{ padding: 8px;}

/*  rwd table  */
.rwd-table {border-collapse: collapse;}
.rwd-table th, .rwd-table td {}

@media screen and (max-width: 480px) {
.rwd-table tr { border: 1px solid #d0d0d0;}
.rwd-table th { display: none;}
.rwd-table td { display: block; border: none;text-align: left;}
.rwd-table td:before {content: attr(data-th) " ";  float: left;  font-weight: bold; margin-left: 10px; min-width: 100px;}

.car_shoplist table.rwd-table .td01{padding: 10px;}
table.rwd-table tr:nth-child(even) td.td01{border-bottom:0;}
}

/*RWD Youtube 以及 Vimeo*/
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}

/*Global Links CSS*/
@media print {
header{position: relative;}
#header.is-hidden.slide-in{ top: 0;}
#header.is-hidden{ position: relative;}
#main_bg, #main_bg_80p, #main_bg_all { top: 0; padding: 10px 10%; margin: auto;}
#fwslider { position: relative;}
.ad_hid{display: none;}
.about_bg {background-attachment: inherit;}
.index #main_bg, .index #main_bg_80p, .index #main_bg_all { top: 0;padding: 10px 10%; margin: auto;}
}
@media (min-width: 1921px) {
#header.is-hidden {left: 16%;}
#main_bg{width:100%; max-width: none; padding:40px 12%; }
}
@media (min-width: 1480px) {
html {font-size: 75%;}
.proliimg:hover span{ top: 90%;}
}
@media (max-width: 1640px) {
#header.is-hidden {left: 5%;}
}
@media (max-width: 1480px) {
#main_bg, #main_bg_all{top: 51%;padding: 40px 0;}
.login_l, .login_r{height: 260px;}
#header.is-hidden {left: 0;}
.proliimg:hover span { top: 99%;}
}

@media (max-width: 1152px) {
.proliimg:hover span{ top: 110%;}
.login_l{ width: 55%; margin-left: 0;padding: 5%; }
.login_r{width: 45%; margin-right: 0;}
}
@media (max-width: 991px) {
#main_bg_80p{padding: 40px 5%;}
.proliimg:hover span{ top: 130%;}
}
@media (max-width: 970px) {
#main_bg, #main_bg_all, #main_bg_80p{top: 40%;}
}

@media (max-width: 860px) {
}
@media screen and (max-width: 768px) {
/*   all   */
header { position: relative; width: 100%; padding: 0;height: 94px;}
#header.is-hidden {top: 0; left:0;}
#h_submenu{ display:none;}
.logo, .index .logo{position: fixed;display: block; float:none; z-index:1; width:100%; text-align:center; padding-top:0px; background-color: #fff; height: 50px;}
.logo img{ width:50px; margin-top: 5px;margin-left: 0;}
.is-hidden > .logo img {margin: 0;}
#header.is-hidden { position: absolute; z-index:2;}
.ad_hid{ display: none;}
#main_bg, #main_bg_80p, #main_bg_all{width:100%;top: auto; margin:auto; padding: 40px 2.5%;}
.index #main_bg_all { position: relative;padding: 0px 0 0; top: auto;}
.left{ display:none;}
	
/*   member   */
.member_murwd{ display: block;}
.member_murwd ul{ text-align:center;margin: 0; padding: 0;}
.member_murwd li{ list-style-type:none; display: inline-block; margin:20px 0.8%; padding: 5px 10px; background-color:#e8e8e6;}
.login_l{ width: 65%; height: 200px;margin-left: 0;padding: 5%; }
.login_r{width: 35%; height: 200px; margin-right: 0;}

/*   content   */
.content{ width:100%; padding: 0px; margin:0; text-align: left;}
.content_main{	margin: 0px; }

/*   contact   */
.contact_info{ background: none; padding:0px; font-size:1.3rem; float:none; width:100%; margin:0px 0 20px 0;}
.contact_info img{ width: 250px; margin-left: 17%;}
.contact_td{ float: none; width:100%;}
.contact_form{WIDTH:100%; padding:5px; min-width:150px; border-radius: 3px;
	box-shadow: 0 0 0 transparent, inset 0 0 5px #eee;
  -webkit-transition: all 0.2s ease-in-out;}
.contact_form::-webkit-input-placeholder {/*placeholder：輸入字框預設值的提示信息（hint）*/
  color: #ccc;
  opacity: 1;
  -webkit-transition: opacity 0.2s ease-in-out;
}
.contact_form:focus{
  outline: none;
  border: 1px solid #27c1bf;
  box-shadow: 0 0 10px #27c1bf;
  -webkit-transition: all 0.2s ease-in-out;
}
.contact_form:focus::-webkit-input-placeholder{
  opacity: 0.5;
}
	
.contact_info ul {margin-left: 10%;}

/*  product  */
.proli_case{padding:0px; }
.proli{ text-align:center; float:left; width:calc(100%/4 - .5%); margin:0 .5% 0 0;line-height:18px; padding-bottom:20px;min-height: 250px; }
.proliimg:hover span{ top: 95%;}
.pro_detail{ float:none; width:100%; margin-left:0px;  margin-bottom:10px;}
.pro_detailimg{ float:none; width:100%; margin-bottom:50px; text-align:center; display:block;}
.pro_midimg_s img{ float:none;}
.pro_midimg img { width: inherit;}
.pro_descript {background-size: 150%; padding-top: 50px;}

.ablock{ width:47%; margin:0 auto;}
.ablock_img{ height: 200px;}

/*   shoppingcar   */
.car_shoplist{ width: 100%;}
	
/*  pagination  */
#pagination .prevnext a{ display:inline-block;}
#pagination .go{ padding-left:0px;}
.rwd_br{ display:block;}
.go{ padding-left:0px;}

/* index */
.news {padding: 0 10px 20px 10px;}
.news table { width: 100%;}
	
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 575px) {
.proli_case {display: -ms-block;display: block;}
.proli_send { position: relative; bottom: initial; left: initial;}
.proli{float: left; width:49%; min-width:167px;min-height: 420px;}
.proliimg:hover span {  }
.quantity{ width:50px;}
/*   login  */
.login_l{ float:none; width:100%;}
.login_r{float:none; width:100%; text-align:center; padding-top:40px;}
a#fb_login{padding-top: 0;}
input.login_form{ width:100%;}
.car_bank{ margin-top: 10px;}


/*   photoli  */
.photoli{ text-align:center; float:none; margin:15px auto;width:100%; min-width:200px; line-height:18px;}
.photoli_des{ text-align:left; color:#a1a1a1;}
.photoli_des img { display:block; margin:20px auto; width:auto;}
.photoli_name{color: #7e7d7d;font-size:1.3rem; padding:5px;}
.photoli_subname{ font-size:1.0rem; color:#d1d1d1; border-bottom:2px solid #ffa800; padding-bottom:10px; margin-bottom:10px;}

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

}

@media screen and (max-width: 490px) {
.proli {min-height: 240px;}
.proliimg:hover span { top: 100%; }
.contact_l_l, .contact_l_r{ float: none; width: 100%;}
}

@media screen and (max-width: 375px) {
.proli {min-height: 356px;}
.proliimg:hover span {top: 110%;}
}
@media screen and (max-width: 370px) {
.proli{  float: none;width:100%; min-width:168px;}
.proliimg:hover span{ top: 80%;}
.pro_midimg{ min-height: inherit;}

/*   login  */
.login_l{ float:none; width:100%;}
.login_r{float:none; width:100%; text-align:center; padding-top:40px;}
.w_60p{ width:100%; margin:0 auto;}
.new_td01{ display:none;}
}