/************************************************************************************
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: #333333; 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;
	font-size:14px;
	background:url(../images/all_bk.png);
}
h1,h2,h3 { display: none;}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}

/*補充動畫*/
.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(10%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(10%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.floating2{
	animation-name: floating2;
	-webkit-animation-name: floating2;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating2 {
	0% {
		transform: translateY(0%);	
	}
	40% {
		transform: translateY(5%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating2 {
	0% {
		-webkit-transform: translateY(0%);	
	}
	40% {
		-webkit-transform: translateY(5%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}

/*PC
-----------------------------------------------------------------*/

/*主框架*/
.container {
	width:100%;
	margin: auto;
	font-family: Verdana,'微軟正黑體';
}

.block-center {
	width: 100%;
	max-width: 960px;
	margin: auto;
	clear: both;
}

.block-header {
	width: 100%;
	background:url(../images/header_bk.gif) no-repeat center;
	min-height: 650px;
	padding-top: 112px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.block-menu {
	width: 100%;
	clear: both;
}

.block-level {
	padding-top: 60px;
}

.block-product {
	width: 100%;
	clear: both;
	padding-bottom: 60px;
}


/*主視覺*/

.header-mobile {
	display: none;
}

.header-main {
	position: relative;
	margin: 0 auto 0 auto;
	width: 530px;
	height: 405px;
	background:url(../images/header_main_bk.png) no-repeat center;
}

.header-main > div {
	position: absolute;
}

.header-in1 {
	top: 23px;
	left: 177px;
	z-index: 0;
}

.header-in2 {
	top: 26px;
	left: 292px;
	z-index: 0;
}

.header-in3 {
	top:104px;
	left: 70px;
	z-index: 1;
}

.header-in4 {
	top:156px;
	left: 237px;
	z-index: 0;
}

.header-in5 {
	top:139px;
	right: 65px;
	z-index: 0;
}

.header-in6 {
	bottom:78px;
	right:93px;
	z-index: 1;
}

.header-in7 {
	bottom:80px;
	right:9px;
	z-index: 0;
}

.header-last1 {
	top:40px;
	left:232px;
	z-index: 1;
}

.header-last2 {
	top:76px;
	right:89px;
	z-index: 1;
}

.header-last3 {
	top:3px;
	right:18px;
	z-index: 1;
}

.header-last4 {
	top:28px;
	left:94px;
	z-index: 0;
}

.header-last5 {
	top:245px;
	left:60px;
	z-index: 2;
}

.header-last6 {
	bottom:66px;
	left:129px;
	z-index: 0;
}

/*導覽列*/
.sticky {
	top: 30px !important;
	width: 100%;
}

.menu-kind {
	width: 100%;
	background:#ffe50a;
	text-align: center;
	clear: both;
}

.menu-kind a {
	display: inline-block;
	color:#062564;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px 25px;
}

.menu-kind span,.menu-kind a:hover {
	display: inline-block;
	color:#ffffff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 20px 25px;
	background:#062564;
}

.block-menu ul {
	background:#062564;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px 0px;
	text-align: center;
}

.menu-box li {
	display: inline-block;
	padding: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background:#214795;
}

.block-menu li {
	display: inline-block;
	margin: 0 3px;
}

.menu-box a {
	display: inline-block;
	padding: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background:#214795;
	border-radius: 5px;
	color:#ffffff;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.menu-box a:hover,a.active {
	color:#ffe50a;
	background:#2baaad;
}

.menu-box .down {
	width: 20px;
	height: 20px;
	background:url(../images/menu_title_icon_down.png) no-repeat center;
	display: inline-block;
    margin: 0 0 -1px 5px;
}

.menu-box:hover .down,a.active .down {
	background:url(../images/menu_title_icon_down_active.png) no-repeat center;
}

.menu-box .up {
	width: 20px;
	height: 20px;
	background:url(../images/menu_title_icon_up.png) no-repeat center;
	display: inline-block;
    margin: 0 0 -1px 5px;
}

.menu-box:hover .up,a.active .up {
	background:url(../images/menu_title_icon_up_active.png) no-repeat center;
}

.menu-box-text {
	color:#ffffff;
	font-size: 15px;
	font-weight: bold;
}

/*商品區塊*/

.level-head {
	width: 100%;
	clear: both;
	display: table;
}

.level-head-icon {
	float: left;
	width: 54px;
}

.level-head-icon img {
	width: 100%;
	max-width: 54px;
}

.level-head-title {
	font-size: 30px;
	font-weight: bold;
	color:#062564;
	float: left;
	text-align: left;
	margin: 5px 0 0 10px;
    line-height: 20px;
}

.level-head-title span {
	font-size: 15px;
	color:#333333;
	font-weight: bold;
	display: block;
    padding-top: 10px;
}

.level-tabs {
	display: table;
	width: 100%;
	clear: both;
	margin-top: -15px;
}

.level-product {
	display: table-cell;
	vertical-align: top;
	padding-left: 15px;
}

ul.level-product-area {
	text-align: right;
	width: 100%;
	clear: both;
}

.level-product-area li {
	display: inline-block;
	min-width: 100px;
	text-align: center;
	border-radius: 5px;
	margin-right: 10px;
	background:#87c9cb;
}

.level-product-area li:hover,.active a {
	background:#2baaad;
}

.level-product-area a {
	width: 100%;
	height: 100%;
	text-align: center;
	display: block;
	color:#ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 12px 5px;
	border-radius: 5px;
}

.level-product-box {
	border-radius: 5px;
	background:#ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 15px;
	margin-top: -3px;
	vertical-align: top;
	z-index: 1;
    position: relative;
}

.tab-content {
	width: 100%;
	clear: both;
	vertical-align: top;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.level-pic {
	display: table-cell;
	padding: 35px 0 0 0;
	width: 260px;
}

.level-pic img {
	width: 260px;
	border: 5px solid #ffffff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: top;
}



.product-all {
	
}

.product-area-title {
	width: 100%;
	clear: both;
	margin-top: 30px;
}

.product-area-title:first-child {
	margin-top: 0px;
}

.product-area-title span {
	display: table;
	padding: 8px 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-width: 120px;
	text-align: center;
	background:#ffe50a;
	border-radius: 5px;
	color:#062564;
	letter-spacing: 2px;
	font-size: 20px;
	font-weight: bold;
}

.product-box {
	display: table;
	padding: 15px 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: 1px dotted #cccccc;
	width: 100%;
}

.product-box:hover {
	background:#fffdec;
}

.product-box-title {
	color:#333333;
	font-size: 15px;
	font-weight:normal;
	float:left;
	line-height: 20px;
}

.product-box-title span {
	font-size:13px;
	color:#2baaad;
	margin-left: 5px;
}

.product-box-title strong {
	font-size: 13px;
    color: #333333;
    background: #ffe50a;
    margin-right: 5px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    padding: 3px 8px;
}

.product-box-price {
	float: right;
	font-weight: bold;
	font-size: 15px;
	color:#e04327;
	line-height: 20px;
}




/*中間調度區
-----------------------------------------------------------------*/

@media screen and (max-width: 960px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
	}

	.menu-box a {
		font-size: 20px;
	}

	.level-head-icon {
		margin-left: 15px;
	}

}

@media screen and (max-width: 850px) {
	.menu-box a {
		font-size: 18px;
	}

	.level-tabs {
		width: 98%;
		margin: auto;
	}

}

@media screen and (max-width: 810px) {
	.menu-box a {
		font-size: 15px;
	}

	

}



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

@media screen and (max-width: 768px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
	}

	.header-mobile {
		display: block;
		width: 100%;
		line-height: 0px;
	}

	.header-mobile img {
		width: 100%;
	}

	.block-header .block-center {
		display: none;
	}

	.block-header {
		height: auto;
		min-height: auto;
		background:none;
		padding-top: 0px;
	}

	.block-menu {
		display: none;
	}

	.level-pic {
		display: none;
	}

	.tab-content {
		padding:0 15px;
	}

	ul.level-product-area {
		padding-right: 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.level-product-area li {
		margin-right: 2px;
		min-width: 80px;
	}

	.level-tabs {
		margin-top: 15px;
		width: 100%;
	}

	.level-product {
		padding-left: 0px;
		width: 95%;
		display: table;
		margin: auto;
	}

	.level-head-title {
		margin-left: 15px;
	}

}

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

@media (max-width: 480px) {
	html,
	body {width: 100%; min-height: 100%;}
	.block-level {
		padding-top: 40px;
	}
	
	.block-product {
		width: 100%;
		clear: both;
		padding-bottom: 40px;
	}

	.level-head-icon {
		display: none;
	}

	.level-product-area a {
		padding: 17px 10px;
	}

	.level-product-area li {
		min-width: auto;
	}
}

@media (max-width: 320px) {
	.level-head-title {
		font-size: 25px;
	}
}