@charset "utf-8";
/* CSS Document */

*, body, html{ margin:0; padding:0;}
.clear{ clear:both}
a, a:hover{ text-decoration:none;}
body{background:#FFFFFF; font-size:16px; font-family:"微軟正黑體",Microsoft JhengHei,Microsoft YaHei ,Century Gothic, Helvetica, Arial, Verdana, 新細明體;}
.nevin_hidden, .hidden{ display:none;}
html, body {
  height: 100%;
}
main {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -180px; 
}
main:after {
  content: "";
  display: block;
}
.footer, main:after {
  height: 180px; 
}

.footer{ background: url(../images/copyright.png) right bottom no-repeat}
.foot{position:relative;  background: #3C3C3C; padding:30px 0px 30px 0px;}
.foot_logo{float:left; padding-top:30px;}
.foot_logo img { display:inline-block;margin-right:15px;}
.foot_copyright{padding-top:20px; display:inline-block;}


.foot_menu{ list-style-type:none; float:right;}
.foot_menu li{ display:inline-table; width:140px; color:#FFF; font-weight:600; font-size:16px; text-align:left;}
.foot_menu li ul{list-style-type:none; margin-top:10px;}
.foot_menu li ul li{display:inline-block; font-size:14px; font-weight:normal;}
.foot_menu li ul li a{ color:#FFF; text-decoration:none;display:inline-block; padding-top:5px;}
.foot_menu li ul li a:hover{color:#FBFAD2}

.flink{ position:absolute; top:27px; left:300px;}
.flink a{ display: inline-block; margin-right:15px;}

.cont{text-align:center; line-height:24px; font-size:15px;}

.authorize a{ color:#09F}
/*login*/
.top-form .logininfo{ padding:5px 10px 5px 10px; border:#C00 solid 1px; background:#FBF7FA; height:30px; margin-bottom:10px; line-height:30px; color:#CC3D3D; font-size:15px;}
/*toTop*/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:2px;
	right:2px;
	overflow:hidden;
	width:27px;
	height:26px;
	border:none;
	text-indent:100%;
	background:url(../images/ui.totop.png) no-repeat left top;
	z-index:999;
}
#toTopHover {
	background:url(../images/ui.totop.png) no-repeat left -26px;
	width:27px;
	height:26px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
	outline:none;
}

.container{ padding:0px 15px 0px 15px;}
.container_lh{ padding-bottom:30px; line-height:24px;}
.container_memlr{ padding:30px 0px 30px 0px; line-height:24px;}
.container h1{ font-size:24px; margin-bottom:15px;font-weight:600; color:#EE8100; padding-bottom:15px; display:inline-block; letter-spacing:2px; }
.mg_20{margin-top:20px;}
.d_ad{background:#F5F1EC; padding:30px 0px 30px 0px;}
.d_img{background:#F5F1EC; padding:10px 0px 10px 0px;}
.d_img2{ background: url(../images/bg-1.jpg) top left repeat-x; height:150px;}



.myindex{ font-size:13px; color:#666666; text-align:right; margin-top:10px;}
.myindex a{color:#666666; text-decoration:none;}
.myindex a:hover{ color:#2D64BF}
.myindex ul{ list-style-type:none;}
.myindex li{ display:inline-table; padding:0px 5px 0px 0px;}
.myindex i{ padding-right:5px;}

/*product*/
.prdbox{ float:left; width:23%; margin:10px 10px 30px 10px; border:#FFF solid 1px; line-height:22px;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.prdbox .bimg{ text-align:center;}
.prdbox img{ transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.prdbox:hover{ border-color:#FFF; cursor:pointer;}
.prdbox:hover img{filter:contrast(115%);-webkit-filter:contrast(115%);}
.prdbox .bh1{ text-align:center; font-size:15px; height:48px; padding:5px 5px 5px 5px;color:#2D64BF; font-weight:600;transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all; overflow:hidden}
.prdbox:hover .bh1{color:#CE2B2B; font-size:15px;}
.prdbox:hover .bimg{background:#FFF; overflow:hidden;}
.prdbox .nprice{ color:#C00; font-size:20px; line-height:30px; padding:10px 0px 10px 5px; font-weight:600;}
.prdbox .nprice span{ display:inline-block; width:50px; font-size:14px; color:#666}
.prdbox .nprice span.vcolor{ color:#C39}

/*product detail*/
.pddetailbox{ padding:30px 0px 30px 0px}
.pddetailbox a{ color:#313140}
.pddetailbox a:hover{ color:#2D64BF}
.pddetailbox .pddetimg{ float:left; width:40%;}
.pddetailbox .pddetcont{ float:right; width:60%; padding:10px 30px 0px 30px; }
.pddetailbox .pddetcont h1{ margin:0px; font-size:30px; color:#2D64BF; font-weight:800; border-bottom:#DBDBEA solid 1px; padding-bottom:20px; margin-bottom:10px; display:block; line-height:40px;}
.pddetailbox .pddetcont div{ padding:5px 0px 5px 0px; line-height:25px; font-size:14px; }
.pddetailbox .pddetcont .pdseries{ font-weight:600; color:#006834}
.pddetailbox .pddetcont span.subtitle{ color:#9797A5; display: inline-block; width:80px; font-weight:800;}
.pddetailbox .pddetcont span.subcont_1{ color:#313140; display: inline-block;}
.pddetailbox .pddetcont .memo{ font-size:14px; margin-top:10px;}
.pddetailbox .pddetcont .memo ul {list-style-type: disc; display: table; margin-bottom:10px;margin-left:20px;}
.pddetailbox .pddetcont .memo ol {list-style-type: decimal; display: table; margin-bottom:10px; margin-left:20px;}

.pddetailbox .pddetcont .button .btn{
	font-size:13px;
	height: 25px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 10px;
	outline: none;
	border: 0;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	background:#313140;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.pddetailbox .pddetcont .button .btn:hover{background:#337DC8;}
.pddetailbox .pddetcont .backbtn{
	color:#313140;
	font-size:13px;
	height: 30px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 20px;
	outline: none;
	border: #313140 solid 2px;
	text-decoration: none;
	cursor: pointer;
	background:#FFF;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.pddetailbox .pddetcont .backbtn:hover{background:#313140; color:#FFF;}

.pddetailbox .pddetcont .buybtn{
	color:#CC3D3D;
	font-size:13px;
	height: 30px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 20px;
	outline: none;
	border: #CC3D3D solid 2px;
	text-decoration: none;
	cursor: pointer;
	background:#FFF;
	border-radius:25px;
	line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.pddetailbox .pddetcont .buybtn:hover{background:#CC3D3D; color:#FFF;}

/*contbox詳細內容*/
.contbox{ margin:20px auto 15px auto; min-height:100%; padding-bottom:50px; line-height:26px;}
.contboxW{width:1000px;}
.contbox h1{ font-size:30px; font-weight:600; text-align:left; margin-bottom:30px; border-bottom:#F6F6F6 solid 1px; line-height:30px; padding-bottom:20px; color:#007C36; background:url(../images/h1_line.png) bottom left no-repeat;}


.backbtn{
	height: 36px;
	overflow: hidden;
	margin: 0px 0 0 0px;
	padding: 0 20px;
	outline: none;
	border: 0;
	text-decoration: none;
	color:#1A4E9B;
	border: #1A4E9B solid 2px;
	cursor: pointer;
	background:#FFF;
	border-radius:25px;
	line-height:20px;
	transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;
}
.backbtn:hover{background:#1A4E9B; color:#FFFFFF}

.service_cell{ color:#D96D00; font-weight:600; font-size:24px; position:absolute; top:15px; right:10px;}
.service_cell span{ color:#999; font-size:16px;}
.service_cell div{ padding-bottom:10px;}
.mem_area{ font-size:16px; color:#333; text-align:right;}
.mem_area a{color:#666}
.mem_area a:hover{ color:#0463CC}
.mem_area span{}
.mem_area span a{ color:#FFF;display:inline-block; padding:5px 10px 5px 10px; background:#000; margin-left:10px; color:#FFF;}
.mem_area span a:hover{color:#B6D8EF; background:#333;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.mem_area span span.cart_qty{ color:#FC0;}
.effecta{transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}

.adm2{}
.adm2 ul{ list-style-type:none; margin:0px; padding:0px; font-size:0px;}
.adm2 ul li{ display:inline-block; width:25%; margin:0px; padding:0px;}
.adm2 ul li a{ display:inline-block; width:100%; height:190px !important; font-size:12px; position:relative; overflow:hidden; margin:0px; padding:0px;}
.adm2 ul li a span{ display:none;}

.c_info ul{ list-style-type:none; text-align:center;}
.c_info ul li{ display:inline-table; padding-right:25px; line-height:30px;}
.c_info ul li i{ color:#439CD6; font-size:18px; padding-right:5px;}

.pdprice{ color:#C30; font-size:24px !important; font-weight:600;}
.pdprice2{ font-size:16px !important; font-weight:600;}
.delline{ text-decoration:line-through;}
.pdprice span,.pdprice2 span, pdnum span{ font-size:14px; color:#666; font-weight:normal; width:70px; display:inline-block; letter-spacing:4px;}
.pdprice span.vcolor{ color:#C39}


/*info index*/
.infoindex{ }
.infoindex ul {
    z-index: 1;
    position: relative;
    zoom: 1;
	margin-left:5px;
	list-style-type:none;
}
.infoindex li {
    float: left;
    margin-top: 4px;
    margin-right: 1px;
	border-top:#9797A6 solid 1px; border-left:#9797A6 solid 1px;border-right:#9797A6 solid 1px; background:#FFF;
	height:30px;
	line-height:30px;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #DBDBEA));
	background:-moz-linear-gradient(top, #FFFFFF 5%, #DBDBEA 100%);
	background:-webkit-linear-gradient(top, #FFFFFF 5%, #DBDBEA 100%);
	background:-o-linear-gradient(top, #FFFFFF 5%, #DBDBEA 100%);
	background:-ms-linear-gradient(top, #FFFFFF 5%, #DBDBEA 100%);
	background:linear-gradient(to bottom, #FFFFFF 5%, #DBDBEA 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DBDBEA',GradientType=0);
	background-color:#FFFFFF;
	padding:0px 20px 0px 20px;

	cursor:pointer;
}
.infoindex li:hover{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #FFFFFF));
	background:-moz-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:-webkit-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:-o-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:-ms-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:linear-gradient(to bottom, #FFFFFF 5%, #FFFFFF 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0);
	background-color:#FFFFFF;
	margin-top:1px;
	height: 33px;
	border-top:#9797A6 solid 5px;
	color:#A01F24;
	font-weight:normal;
}
.infoindex li.selected {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #FFFFFF), color-stop(1, #FFFFFF));
	background:-moz-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:-webkit-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:-o-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:-ms-linear-gradient(top, #FFFFFF 5%, #FFFFFF 100%);
	background:linear-gradient(to bottom, #FFFFFF 5%, #FFFFFF 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0);
	background-color:#FFFFFF;
	margin-top:0px;
	border-top:#333 solid 5px;
	color:#A01F24;
	height: 34px;
    line-height: 30px;
    font-weight: 500;
    overflow: hidden;
    margin-top: 0px;
    position: relative;
    top: 1px;
}

/*會員選單*/
.mem_menu{ margin:10px 0px 0px 0px; border-bottom:#000 solid 1px; height:31px; margin-bottom:1px;}
.mem_menu ul{ list-style-type:none; margin:0px; padding:0px; font-size: 0;}
.mem_menu ul li{ display:inline-block; margin-right:1px;}
.mem_menu ul li a{ display:inline-block; height:30px; line-height:30px; padding:0px 10px 0px 10px; background:#666; color:#FFF; font-size:14px;}
.mem_menu ul li a:hover{ background:#333;}
.mem_menu ul li a.selected{ background:#000;}

/*default button*/
.default_button {
	height: 34px;
	overflow: hidden;
	padding: 0 20px 0px 20px;
	border:0;
	outline: none;
	font: 600 14px/30px "微軟正黑體",'Helvetica Neue',Helvetica,Arial,sans-serif;
	text-decoration: none;
	background:#06C;
	color: #fff;
	cursor: pointer;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;
}
.default_button:hover {
	background-color:#039;
	color:#FFF
}

/*atm write*/
.atm_write{ margin-bottom:20px;}
.payinfoT{ display:inline-block; height:30px; line-height:30px; width:120px; background:#E7EEF5; padding-left:10px;}
.payinfoT2{ display:inline-block; height:30px; line-height:30px; padding-left:10px;}
.wrbox{background:#E7EEF5; padding:10px;}

/*pdhistory*/
.pdhistory{ position: fixed; right:-60px; top:50%; background:none; width:90px;}
.htytitle{ background:#555555; color:#FFFFFF; font-size:12px; padding:3px; width:30px; float:left; text-align:center;}
.htytitle:hover{ cursor:pointer;}
.htybox{width:60px; float:right; border-left:#555 solid 1px;border-bottom:#555 solid 1px;border-top:#555 solid 1px; background:#FFF;}
.htypdbox{ margin-bottom:5px;margin-top:5px;}

.onlineservice{ position: fixed; right:2px; top:180px; width:65px; z-index:100; border:#FFF solid 1px;}

.download{ margin-top:15px;}
.download ul li{ background:url(../sys_icon/pdf.png) top left no-repeat; padding-left:30px; margin-bottom:5px;}

/*youtube*/
.youtubecontent{
	position: relative;
	padding-top: 30px; height: 0; overflow: hidden;
}
.youtubecontent{
	padding-bottom: 56.25%;
}
.youtubecontent iframe,
.youtubecontent object,
.youtubecontent embed {
	position: absolute;
	top: 0;
	left: 10%;
	width: 80%;
	height: 80%;
}

/*news*/
.news{padding:0px; position:relative; max-width:900px; margin:0 auto;}
.news ul{ margin:0px; padding:0px;}
.news li{ list-style-type:none; width:100%px; border-bottom:#CCC dotted 1px; display:block;
	transition:0.5s all;
	-webkit-transition:0.5s all;
	-moz-transition:0.5s all;
	-o-transition:0.5s all;
	-ms-transition:0.5s all;}
.news li.titleli{padding:15px 0px 15px 10px;}
.news .newstitlebg{background: url(../images/news_title_bg.png) top left repeat; color:#A8000D;}
.news span.title{ display:inline-table; font-size:15px; font-weight:800; height:40px; line-height:42px; padding-left:10px;}
.news span.title.t1{ width:15%;}
.news span.title.t2{ width:15%;}
.news span.title.t3{ width:85%;}
.news span.content{ color:#20202F; display:inline-table; font-size:16px; font-weight:600;line-height:20px;transition:0.5s all;	-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
.news span.content.date{ width:15%; color:#9797A6; font-weight:normal; font-size:14px;}
.news span.content.ntype{ width:15%; font-weight:normal;}
.news span.content.subject{width:85%;}
.news li.titleli:hover{ background:#F7F7F7; cursor:pointer; color:#9F1E23;}
.news li:hover span.content.subject, .news li:hover span.content.date{color:#FB7700;}

.mypage{ text-align:center; margin-top:20px;}

.storeselect {
    padding:5px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    color:#333;
    border: #979797 solid 1px;
    outline:none;
    display: inline-block;
    cursor:pointer;
	font-size:16px;
}

.fb-xfbml-parse-ignore a:hover{ text-decoration:none;}

/*schfotm*/
#schform2 span{ display:inline-block;}
#schform2 input{border: #CCC solid 1px; background:#fff;color:#999;font-size:15px; line-height:18px; width:150px;height:25px;margin:0;outline:medium none;padding:3px; border-radius:0px;}
#schform2 button{background:#666;border:0; color:#fff;cursor:pointer;font-size:14px;height:25px;width:35px; transition:0.5s all;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;}
#schform2 button i{ color:#FFF; padding-left:3px;}
#schform2 button:hover{background:#000}


@media (max-width:1200px) {
	.prdbox{ width:22.5%;}
	.flink{ position:absolute; top:27px; left:300px;}
	.youtubecontent embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

@media (max-width:1000px) {
	.adm2 ul li{width:50%}
}

@media (max-width:992px) {
	.service_cell{ display:none;}
	.foot_menu li{width:100px;}
	.prdbox{ width:30%;}
	.onlineservice{top:85px;}
	
}


@media (max-width:768px) {
	.foot_menu li{width:100px;}
	.foot_logo { padding-top:10px; padding-left:20px;}
	.foot_logo img { display:block;}
	.prdbox{ width:30%;}
	.flink{ top:7px; left:130px;}
}


@media (max-width:720px) {
	.foot_logo { padding-top:10px; padding-left:0px;}
	.adm2 ul li{width:100%}
	.prdbox{ width:46%;}
	.pddetailbox .pddetimg{ float:left; width:40%;}
	.pddetailbox .pddetcont{ float:left; width:60%; padding:20px 30px 0px 30px;}
	.pddetailbox .pddetcont h1{ padding-top:0px; font-size:24px; line-height:30px;}
	.pddetailbox .pddetcont span.subtitle{width:25%; vertical-align:top;}
	.pddetailbox .pddetcont span.subcont_1{ width:73%;}
}


@media (max-width:600px) {
	main {
	  margin-bottom: -240px; 
	}
	.footer, main:after {
	  height: 240px; 
	}
	.foot_logo, .foot_menu{float:none; text-align:center;}
	.foot_logo{ padding-bottom:15px;}
	.foot_logo img { display: inline-block;}
	.prdbox{ width:44%;}
	.flink{ position:relative; top:auto; left:auto; text-align:center;}
	.youtubecontent iframe,
	.youtubecontent object,
	.youtubecontent embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.news span.title.t1, .news span.title.t2, .news span.content.date, .news span.content.ntype{ width:25%;}
	.news span.title.t3, .news span.content.subject{ width:100%;}
} 


@media (max-width:480px) {
	.footer{ background:url(../images/copyright.png) center bottom no-repeat}	
	.prdbox{ width:40%;}
	.pddetailbox .pddetimg{ float:none; width:100%;}
	.pddetailbox .pddetcont{ float:none; width:100%; padding:20px 30px 0px 30px;}
	.pddetback{ text-align:center;}
	
}