/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}
a img {border: none;}
.clean { clear:both;}
a {color:#1f1f1f; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.col-1{width:100%;}
.col-2{width:50%;}
.col-3{width:33.33%;}
.col-4{width:25%;}
.col-5{width:20%;}

body {
	margin: 0;
	padding: 0;
	color: #1f1f1f;
	background: url(images/bg.jpg) #e6e6e6 repeat;
}
h1,h2,h3 { display: none;}
.left{ float:left;}
.right{ float:right;}

/*------------------------------- pc ----------------------------------*/
.container {
    width: 100%;
    height: 100%;
	position:relative;
	background: url(images/header.png) center 0 no-repeat;
}
.header {
    width: 100%;
    height: 405px;
}
.top_content .mobile {display: none;}
h1,h2,h3 { display: none;}

/***按鈕列***/
#nav {
	width: 280px;
	height:520px;
	position: absolute;
    top: -5px;
    /* left: 25%;  */
    z-index: 100;
	background: url(images/nav_bg.png) no-repeat;
}
#menu {
    display: block;
    width: 190px;
    height: 466px;
    margin: 0 auto;
    margin-top: 25px;
}
#menu li {display: block; float: left;}
#menu li a {
	width: 190px;
    height: 100%;
    display: block;
	text-indent:-9999px;
}
#menu li a.nav01 {
	width: 190px;
    height: 33px;		
	background: url(../style/images/nav.png) 0 0 no-repeat;
}
#menu li a:hover.nav01,#menu li.on a.nav01{background: url(../style/images/nav.png) -190px 0 no-repeat;}

#menu li a.nav02 {
	width: 190px;
    height: 38px;
	background: url(../style/images/nav.png) 0 -33px no-repeat;
}
#menu li a:hover.nav02,#menu li.on a.nav02{background: url(../style/images/nav.png) -190px -33px no-repeat;}

#menu li a.nav03 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -71px no-repeat;
}
#menu li a:hover.nav03,#menu li.on a.nav03{background: url(../style/images/nav.png) -190px -71px no-repeat;}

#menu li a.nav04 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -111px no-repeat;
}
#menu li a:hover.nav04,#menu li.on a.nav04{background: url(../style/images/nav.png) -190px -111px no-repeat;}

#menu li a.nav05 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -151px no-repeat;
}
#menu li a:hover.nav05,#menu li.on a.nav05{background: url(../style/images/nav.png) -190px -151px no-repeat;}

#menu li a.nav06 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -191px no-repeat;
}
#menu li a:hover.nav06,#menu li.on a.nav06{background: url(../style/images/nav.png) -190px -191px no-repeat;}

#menu li a.nav07 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -231px no-repeat;
}
#menu li a:hover.nav07,#menu li.on a.nav07{background: url(../style/images/nav.png) -190px -231px no-repeat;}

#menu li a.nav08 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -271px no-repeat;
}
#menu li a:hover.nav08,#menu li.on a.nav08{background: url(../style/images/nav.png) -190px -271px no-repeat;}

#menu li a.nav09 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -311px no-repeat;
}
#menu li a:hover.nav09,#menu li.on a.nav09{background: url(../style/images/nav.png) -190px -311px no-repeat;}

#menu li a.nav10 {
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -351px no-repeat;
}
#menu li a:hover.nav10,#menu li.on a.nav10{background: url(../style/images/nav.png) -190px -351px no-repeat;}

#menu li a.nav11{
	width: 190px;
    height: 40px;
	background: url(../style/images/nav.png) 0 -391px no-repeat;
}
#menu li a:hover.nav11,#menu li.on a.nav11{background: url(../style/images/nav.png) -190px -391px no-repeat;}

#menu li a.nav12 {
	width: 190px;
    height: 35px;
	background: url(../style/images/nav.png) 0 -431px no-repeat;
}
#menu li a:hover.nav12,#menu li.on a.nav12{background: url(../style/images/nav.png) -190px -431px no-repeat;}


#togglenav {
    display: none;
    z-index: 9999;
    position: fixed;
    right: 0;
    overflow: hidden;
    line-height: 35px;
    width: 100%;
    cursor: pointer;
}
.main {
    width: 960px;
    margin: 0 auto;
	overflow:hidden;
}
.product{width:680px;}
.product .wrap{ background:#fff; margin-top: -3px; *margin-top: -10px;}
.product ul {
    display: block;
    margin: 0 15px;
    padding: 10px 0 20px 0;
}
.product li {
    display: block;
    border-bottom: #C5C5C5 1px dashed;
}
.product li a {
    display: block;
    padding: 10px;
    font: 15px "微軟正黑體";
    color: #434343;
    font-weight: bold;
    overflow: hidden;
}
.product li em {
	font: 13px "新細明體";
    color: #fff;
    margin: 0 0 0 5px;
    padding: 2px 5px;
	font-style: normal;
    background-color: #eb4200;
    letter-spacing: 1px;
}
.product li a:hover { background-color:#FFC;}
.product .price {color: #F50909;}
h4{
	display:block;
	width:680px;
	height:55px;
	text-indent:-9999px;
}
h4.title01{ background: url(../style/images/title.png) #fff 0 0 no-repeat;}
h4.title02{ background: url(../style/images/title.png) #fff 0 -55px no-repeat;}
h4.title03{ background: url(../style/images/title.png) #fff 0 -110px no-repeat;}
h4.title04{ background: url(../style/images/title.png) #fff 0 -165px no-repeat;}
h4.title05{ background: url(../style/images/title.png) #fff 0 -220px no-repeat;}
h4.title06{ background: url(../style/images/title.png) #fff 0 -275px no-repeat;}
h4.title07{ background: url(../style/images/title.png) #fff 0 -330px no-repeat;}
h4.title08{ background: url(../style/images/title.png) #fff 0 -385px no-repeat;}
h4.title09{ background: url(../style/images/title.png) #fff 0 -440px no-repeat;}
h4.title10{ background: url(../style/images/title.png) #fff 0 -495px no-repeat;}
h4.title11{ background: url(../style/images/title.png) #fff 0 -550px no-repeat;}
h4.title12{ background: url(../style/images/title.png) #fff 0 -605px no-repeat;}

.small-title {
    margin-top: 15px;
    margin-left: 20px;
}
.small-title span {
    font-size: 15px;
    font-family: Arial, "微軟正黑體";
    font-weight: bold;
    color: #8D080A;
    padding: 5x 8px;
    display: block;
}

/*======================
====浮水印 CSS=====
=======================*/
.TooltipWrapper { display: none; }
.tooltip { position: fixed; top:80px; right: 0; z-index: 999;}

/*------------------------------- 平板 ----------------------------------*/

@media screen and (max-width: 768px) {
    * {box-sizing: border-box;    }
    html,body { width: 100%; min-height: 100%; }
    .header {
        width: 100%;
        height: auto;
    }
    .top_content {
        width: 100%;
        height: auto;
        margin: 0;
        background: none;
    }
    .top_content .mobile {
        display: block;
        width: 100%;
        height: auto;
    }
	.container {	background: #e6e6e6;}

	
    /***按鈕列***/
    #nav {display: none; }
    #togglenav {
        display: block;
        z-index: 9999;
        position: fixed;
        right: 0;
        overflow: hidden;
        line-height: 35px;
        width: 100%;
        cursor: pointer;
    }
    .main {
        width: 94%;
        margin: 0;
        margin-top: 10px;
        margin-left: 3%;
        margin-right: 3%;
    }
	.product img{ display:none;}
	
	.product {
		width: 100%;
		float:none;
	}
	h4 { width: 100%;}
	.product li a { font: 16px "微軟正黑體"; font-weight:bold;}
	.product li span{display:block; float:none;}
	.product li em {
		font-size: 13px;
		display: inline-block;
		color: #FF0B89;
		padding: 0;
		font-style: normal;
		background: none;
	}
	.product .price {
		color: #F50909;
		float: none;
		margin-top: 25px;
		font-size: 22px;
		text-align: center;
		background: #EFEFEF;
	}
}


/*------------------------------- 手機 ----------------------------------*/

@media (max-width: 480px) {
    * { box-sizing: border-box; }
    html,
    body {width: 100%; min-height: 100%; }
	ul.product li {float: none; padding: 8px;}
	.col-3 {  width: 100%; }
	ul.product li a { line-height: 50px; height: 50px; overflow: hidden; padding: 0 10px;}
	ul.product li span.price { line-height: 50px;}
	ul.product li span.name { font-size: 18px;}
	
	.tooltip { top:30px; }
}