@import url("animate.css");
@import url("responsive-tables.css");
@import url("all.css");
@import url("footer.css");
@import url("colorbox.css");
@import url("css_01.css");
@import url("css-Roboto.css");

A:link { FONT-STYLE: normal; TEXT-DECORATION: none; color: #222;transition:0.3s;} 
A:visited { FONT-STYLE: normal; color: #222;} 
A:active { FONT-STYLE: normal; color: #222;} 
A:hover { FONT-STYLE: normal; COLOR: #cd1419;} 
body { margin:0px; padding:0px;
	font-size: 0.938em;
	color:#222;
	line-height: 2em;
	font-family:Arial, Helvetica,微軟正黑體, sans-serif;}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.f10px{font-size:10px;}
.f12pt{font-size:12px;}
.f16px{font-size:1.067em;}
.f30px{font-size:2em;}
.c_orang{ color: #fca000;}
.c_gray01{ color:#777;}
.c_gray02{ color:#babab9;}
.c_black{ color:#000;}
.c_red{ color:#f40c17;}
.c_red02 {color: #cd0000;}
.c_light_orange{ color:#e4af73;}
.liheight16{ line-height:16px;}
.liheight13{ line-height:13px;}
.both{clear:both;}
.float_r{ float:right;}
.float_l{ float:left;}

.send{font-family:Arial, Helvetica,微軟正黑體, sans-serif;padding: 8px 20px;  font-size: 18px;  color: #fff; border: 0; background-color: #d20000;}
.input_field{border: 1px solid #ddd;}


header{ width:100%; max-width:1000px;margin:0px auto;}
.logo{ z-index:1; text-align:center;line-height: normal;padding: 40px 0 36px;}
.logo img{ width: 400px;}
.logo A:hover { border-bottom:0;}
#h_submenu{ position:absolute; z-index:6; text-align:right;right:0; padding: 15px 10px 0;}
#h_submenu A:link, #h_submenu A:visited { color:#a3a3a3;}
#h_submenu A:active, #h_submenu A:hover { color:#d60000;}
#main_bg{position: relative; width:100%; max-width:1170px; margin:0 auto; min-height:600px;}
#main_all{position: relative; width:100%; max-width:1170px; margin:auto;}
.ad_isd img{ width:100%;}
#main_bg img, #main_all img{max-width: 100%;}
.form_100{width: 100%; padding: 8px;}
input{padding: 8px;}


.ind_ad{ float:left; width:983px}
.ind_admid { width: 100%; margin-top: 20px;}
.ind_admid img {  width: 45%;  margin: 0 2%;}
.ind_news{float: right; width: 34%; padding: 0 10px;margin-top: 20px;}
.ind_news_tit { BACKGROUND: url(../image/ind_title02.png) no-repeat; background-size: 220%; height: 50px;}


.left{width: 17%; margin-right:5px;display:inline-block;float:left; vertical-align:top;clear:both;}
.mu_top{color:#fff; font-size:1em;text-transform:uppercase; text-align:center; background-color:#00a0e9;  padding:10px;}
.left_mutitle{font-size:24px; color: #555;margin: 0 0 10px 20px;}
.menu { margin-bottom:25px; text-transform:uppercase;border-left: 2px solid #c61419; }
.menu UL {POSITION: relative; MARGIN: 0px;PADDING: 0px; Z-INDEX:2;}
.menu LI { PADDING:0px;MARGIN: 0px;list-style-type: none; width: 90%;}
.menu LI A { display:inline-block;BACKGROUND: url(../image/mu_01.png) no-repeat right top; color:#d8a800; line-height: 40px;WIDTH: 95%; margin-left: 15px;border-bottom: 1px solid #e9e5e2;}
.menu LI A:link { color:#20768f;}
.menu LI A:visited{ color:#555;}
.menu LI A:hover {	BACKGROUND-POSITION: right top; TEXT-DECORATION: none;color:#555454; font-weight:bold;  border-bottom:2px solid #c61419;}
.menu LI div.currMenu {BACKGROUND: url(../image/mu_01.png) no-repeat right top;color:#555454; display:inline-block;width: 95%;}
.menu > UL > LI > .currMenu A{BACKGROUND: url(../image/mu_01.png) no-repeat right top;color:#20768f; display:inline-block;width: 95%;font-weight:bold;  border-bottom:2px solid #c61419;}

.menu ul ul {margin-left: 10px;}
.menu_sub01 { font-size: 13px; font-weight:normal; }
.menu_sub01 A { color:#999;WIDTH:90%; display:inline-block; line-height:30px;}
.menu_sub01 A:link, .menu_sub01 A:visited  {padding-left:30px; color: #999; text-decoration: none; background:url(../image/mus_02.gif) no-repeat 0px top;border-bottom:1px dashed #ccc;}
.menu_sub01 A:active, .menu_sub01 A:hover {	padding-left:30px; color: #e60012; text-decoration: none; background:url(../image/mus_02.gif) no-repeat 0px bottom;BACKGROUND-POSITION: -228px top;border-bottom:1px dashed #ccc;}
.menu_sub01 A.currMenu { color:#555454; font-weight:bold; }
.left_ad { position: relative;margin: 5px 0;}

#product_menu .menu_sub01, #product_menu .menu_sub02, #product_menu .menu_sub03, #product_menu .menu_sub04 { display: none;}


.content{padding: 0px; text-align: left; display:inline-block;width: 80%;}
h1{display:inline-block;  font-size: 1.3em; color:#395175; font-weight: normal; letter-spacing: 2px; border-bottom: 4px #e04343 solid; padding-bottom: 10px; margin-top: 5px; }
.h1_ind{font-size:1.977em; font-weight:700; color:#222;text-transform:uppercase; padding-bottom:10px; border-bottom:3px solid #00a0e9;}
.h1{ margin-bottom:25px;}
h2{font-size:1.333em; margin:0px;}
.h2 { background-color: #02c0cc; color: #FFF;}

.main_pic{ height:200px;}
.main_pic .main_title { position:absolute; padding:12px 0 0 29px; z-index:99;}
.ad_isd{ position:relative; width:100%;font-family: 'Roboto', sans-serif; color:#000; text-transform:uppercase; margin-bottom: 40px;height:140px;}
.ad_isd img{ max-width:100%;}
.adisd_bg{height:100%; padding:0 5%;}
.adisd_title{padding:0 5%; margin-top: -80px; display: none;}
.content_main .ad_isd {height: auto;}

.title_01{ float:left; font-size:1.707em; font-weight: 700;}
.title_02{ display:inline-block; margin-left:10px;font-size:0.846em;font-weight: 700; margin-top:-5%;}

.content_main{ margin: 0px; }
.content_main img{ max-width:100%;}


.contact_info{ font-size:15px;color:#9b9b9b;  float:right; width:300px; margin-left:20px;background:url(404.png) no-repeat; padding:0; }
.contact_info strong{ color:#000;}
.contact_td{ float:left; border:0px #0C0 solid; width:420px;}
.ico_send{ font-size:2em; font-family:Arial, Helvetica,微軟正黑體, sans-serif; color:#fff;margin: 40px 0;padding:5px 30px; background-color:#02c0cc; border:0;}
.contact_inner{ width:95%;margin:auto;}


.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.1rem;width:calc(100%/3 - 2%); margin:0 2% 0 0; line-height:18px; padding-bottom:60px;
	
}
.proliimg { width:100%; text-align : center; overflow: hidden;
  
   
  white-space : nowrap;
  
  *font-size : 160px;  
	background:url(404.png) bottom no-repeat;background-size: 100%;
}
.proliimg A:hover::after { content: " ";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff63;}
.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 A:hover img{opacity: 1;transform: scale(1.1, 1.1) }

.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; margin-top: 0;
-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: 10%;
  right: 10%;
  bottom: 10%;
  left: 10%;
  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 {color:#ffae00;	text-decoration: underline;}
.proli_des{ text-align:center;}
.proli_des img { margin:0 auto; width:auto;}
.proli_name{ display: block;color: #000;font-size:18px; text-align:center; padding-top:5px; margin-bottom:10px; }
.proli_price{ margin-bottom:10px;}
.pro_detail{ float:left; width:60%; margin-left: 5%; margin-bottom:20px;}
.pro_topimg {}
.pro_detailimg{float:left; display:block; width:35%;margin-bottom:20px;background:url(404.png) top no-repeat;background-size: 100%;}
.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{ font-size:1.8rem; color:#615a49; background:url(404.png) no-repeat bottom;}
.pro_id{color:#999;}
.pro_price{ margin:10px 0; font-size:1.1rem; color:#ff4e00; font-weight:normal; text-align:right; border-bottom:1px dashed #e0e0e0;}
.pro_share{ text-align:right; margin:20px 0;}
.pro_descript{ }
.pro_descript img{ max-width:100%;}
.proli_send{position: absolute; bottom: 0; left: 25%; }


.login_txt{ width: 50%; margin: auto;max-width: 630px; min-width: 360px;}
.member.login{ display: block;margin: auto;}
.member.login .content{ display: block;width:100%; margin: auto; }
.login_l{  width: 30%; min-width: 360px; margin: auto;padding: 6% 0; }
.input_field{padding: 8px;}


#pagination {margin-top: 20px;	margin-bottom: 30px;line-height:21px;}
#pagination A {FLOAT: left; DISPLAY: block; color:#777;  PADDING: 0px 8px; MARGIN: 3px 2px 0; BACKGROUND: #fff;BORDER:1px solid #dcdcdc; }
#pagination SPAN, .onthis { FLOAT: left;  COLOR: #fff; FONT-WEIGHT: bold;PADDING: 0px 8px; MARGIN: 3px 2px 0; DISPLAY: block; background-color:#00a0e9;BORDER:1px solid #00a0e9;}
#pagination A:hover { float: left; DISPLAY: block;COLOR: #fff; PADDING: 0px 8px; MARGIN: 3px 2px; background-color:#00a0e9; BORDER:1px solid #00a0e9;}
#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;}
.go{ padding-left:20px; display:inline-block;}


.news_title{overflow:hidden; border-bottom:5px solid #dcdcdc; color:#00a0e9;font-weight:bold; margin-bottom: 20px; }
.news_m01 a:link, .news_m01 a:visited  {color:#222;padding-bottom:2px;}
.news_m01 a:active, .news_m01 a:hover { color:#00a0e9;border-bottom: 1px solid #00a0e9;}
.news_m01{ float:right; padding:5px; }
.n_l{ width:85%;}
.n_r{ width:15%; text-align:center;}
.news_list{ line-height:1.8em;}
.new_date{}
.new_text{ font-size:1.650em; font-weight:700; padding-left:20px;background:url(../image/icon_point.gif) no-repeat; padding-bottom:25px; margin-bottom:25px; border-bottom:3px solid #d5d5d5;}
.back{ text-align:right; margin-top:100px;}
.back a{ font-size:1.231em; color:#fff; font-weight:bold; text-align:center; padding: 10px 20px; }
.back a:link, .back a:visited { }
.back a:active, .back a:hover { }


.glory{background:url(404.png) no-repeat left top; background-size:100%; font-size:15px;line-height: 24px; padding-left:5%; padding-top:20%; min-height:308px;}
.glory a:link, .glory a:visited { color:#b1f4ff;}
.glory a:active, .glory a:hover { color:#fff;}


.glory_l{ float:left; width:49%;}
.glory_r{float:right;width:50%;}
.glory_list{float:left; width:calc(100%/4 - 7px); margin:0 7px 0 0;}


.media_list{text-align:center; float:left; line-height:18px; width:calc(100%/3 - 20px); margin:0 20px 0 0; min-height: 220px;}


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

.photoli_case{padding:5px 0px 5px 0px;}
.photoli{ text-align:center; float:left; line-height:18px; width:calc(100%/4 - 20px); margin:0 20px 0 0;}
.photoli img{ width: 100%;}
.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:13px; padding:5px;}
.photoli_subname{ font-size:10px; color:#d1d1d1; border-bottom:2px solid #ffa800; padding-bottom:10px; margin-bottom:10px;}


.tdmain_a{padding-left: 30px; border-top:2px solid #6e6c6c; border-bottom:1px solid #CCC; padding:5px;}
.tdmain_b{ background-color: #4f81bd; padding:1px;}
.tdmain_c{ background-color: #7f7f7f;padding: 5px;color:#FFF;}
.td01{ background-color:#fff;padding: 5px;border-bottom:1px solid #e7e7e7;}
.td02{background-color:#f3f3f3;padding: 5px; border-bottom:1px solid #e7e7e7;}
.td03{ background-color:#fff;padding: 5px;}
.td04{background-color:#d3dfee;padding: 5px;}


.rwd-table {border-collapse: collapse;}
.rwd-table th, td { }
   
@media screen and (max-width: 460px) {
.rwd-table td.rwd_hid{display: none;}
.rwd-table tr {}
.rwd-table th {  display: none;}
.rwd-table td { display: block; border: none; margin-bottom: 10px;}
.rwd-table td:before {content: attr(data-th) " ";  float: left; font-weight: bold; min-width: 100px;}
}



@media print {
}
@media screen and (min-width: 1600px) {
.adisd_bg{padding:0 20%;}
.adisd_title{padding:0 20%;}
}
@media (min-width: 1480px) {
html {font-size: 75%;}
.proliimg:hover span{ top: 72%;}
}
@media screen and (max-width: 1600px) {
.adisd_bg{padding:0 10%;}
.adisd_title{padding:0 10%;}
}
@media screen and (max-width: 1280px) {
.proliimg:hover span{ top: 88%;}
.adisd_bg{padding:0 5%;}
.adisd_title{padding:0 5%;}
}
@media screen and (max-width: 1036px) {
header, #main_bg ,.main_bg_indbrand{ width: 100%;}
.ind_news{overflow: hidden; height: 310px;}
}
@media screen and (max-width: 970px) {
.ind_news{ height: auto;}
.content { width: 79%;}

header{ z-index: 999; margin: 0; background-color: #fff;height: initial;}
.logo{ float:none; z-index:2; line-height: 0;width:100%; background-color: #fff;padding: 15px;}
.logo img { width: 220px;}
#h_submenu{ display:none;}
.rwd_top{ }
#main_bg{width:94%; margin:7px auto;}
.main_bg_indbrand {width:100%; margin:0px auto;padding: 60px 0;}


.h1 { text-align: center;}
h1{ border-bottom: 2px solid #00a0e9;}
.h1_ind{ line-height:36px;border-bottom: 2px solid #00a0e9;padding-bottom:10px;}
.adisd_title{margin-top: -130px;}
.title_01{ float: none; margin-top: 0; padding-top:40px; text-align:center;}
.title_02{display: block; text-align:center; margin-top: 3%;}
.ad_isd{border-top: 0; margin-bottom: 10px; line-height: 0;height:70px;}


.left{ display:none;}


.content{ width:100%; padding: 0px; margin:0; text-align: left;}
.content_main{width:98%; margin: auto; }
.contact_info{ width:80%; margin:auto;float:none; background-position: center top;}
.contact_td { float: none;  width: 100%;}

.news_title{ display:none;}
.news_m01{ float:none;padding: 0; line-height:20px;}
.n_l{ width:100%; font-weight:bold;}
.n_r{ width:100%; text-align:left; }
.news_list{ margin:20px 0;}


.glory_l{ float:none; width:100%;}
.glory_r{float:none; width:100%;}


.photoli { width: calc(100%/3 - 20px);margin: 0 20px 20px 0;min-height: 200px;}

#pagination .prevnext a{ display:inline-block;}
#pagination .go{ padding-left:0px;}
.rwd_br{ display:block;}
.go{ padding-left:0px;}
.tec_from{ font-size: 12px;}
.tec_from_img{ width:30px; }
    
.proliimg:hover span{ top: 93%;}
}
@media (max-width: 860px) {
.proliimg:hover span{ top: 100%;}
}

@media screen and (max-width: 768px) {

.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: 350px; }
.proliimg:hover span { top: 92%;}
.pro_detail{ float:none; width:100%; margin-left:0px;  margin-bottom:10px;}
.pro_detailimg{ float:none; width:100%; margin-bottom:10px; text-align:center; display:block;}
.pro_midimg_s img{ float:none;}
.pro_midimg img {}
.pro_descript {background-size: 150%; padding-top: 50px;}
}

@media screen and (max-width: 560px) {
.ind_news_tit { background-size: 125%;}
.glory{font-size:11px;line-height: 16px;background-size:120%;padding-top: 22%;}
    
.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 { top: 80%;}

.photoli { width: calc(100%/2 - 20px);}
.contact_info{ width:80%; margin:auto;}
}

@media screen and (max-width: 490px) {
.ind_admid img {width: 96%; margin-top: 20px;}
.proli {min-height: 404px;}
.proliimg:hover span { top: 88%;}
.pro_detailimg { width: 80%; margin: auto;}
.login_txt{ width: 100%; }
.login_txt td{display: block;text-align: center;}
}
@media screen and (max-width: 385px) {
.proli {min-height: 356px;}
}
@media screen and (max-width: 370px) {
.proli{  float: none;width:100%; min-width:168px;}
.proliimg:hover span { top: 70%;}
.pro_midimg{ min-height: inherit;}
}

@media screen and (max-width: 360px) {
.photoli { float: none;width: 80%; margin: 0 auto 20px auto;}
}