﻿
/************************************************************************************
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;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;cursor: url(../images/hand.png),auto;}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-size:14px;
	overflow-x: hidden;
	background:url(../images/all_bk.png) no-repeat center 446px #ea448e;
	cursor: url(../images/normal.png),auto;
}

h1,h2,h3 { display: none;}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}


/*PC
-----------------------------------------------------------------*/

/*主框架*/
.container {
	width:100%;
	margin: auto;
	font-family: Verdana,'微軟正黑體';
}

.block-center {
	width: 100%;
	max-width: 960px;
	margin: auto;
	clear: both;
	position: relative;
}

/*主視覺*/
.block-main {
	display: table;
	width: 100%;
	clear: both;
	background: url(../images/main_title_bk.png) top center no-repeat;
	margin-bottom: 65px;
}

.blcok-main-head-pad,.blcok-main-head-phone {
	display: none;
}

.blcok-main-head-pad img,.blcok-main-head-phone img {
	width: 100%;
}

.main-big-title {
	width: 100%;
	padding: 124px 0 0 0;
	text-align: center;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.main-big-title img {
	width: 100%;
	max-width: 350px;
}

.main-small-title {
	text-align: center;
	width: 100%;
	margin: 37px auto 0 auto;
	line-height: 0;
}

.main-small-title img {
	display: inline-block;
}

.main-icon1 {
	position: absolute;
	left: -232px;
	top: 303px;
}

.main-icon2 {
	position: absolute;
	right: -147px;
	top: 72px;
}

.main-icon3 {
	position: absolute;
	right: 106px;
	top: 394px;
}

.main-icon4 {
	position: absolute;
	left:162px;
	top: 134px;
}

.main-icon5 {
	position: absolute;
	left:-7px;
	top: 84px;
}

/*商品區塊*/
.block-product {
	width: 100%;
	margin: 30px 0;
}

.product-big-all img {
	width: 100%;
	max-width: 580px;
}

ul.product-big-box {
	width: 100%;
	clear: both;
	text-align: center;
}

.product-big-box li {
	display: inline-block;
	width: 40%;
	margin: 40px;
	vertical-align: top;
}

.product-big-box a {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 15px;
	display: inline-block;
	background: #ffffff;
	border: 3px solid #2f26ef;
	box-shadow: 11px -11px 0px #2f26ef;
}

.product-big-box a:hover {
	-webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

ul.product-one-box {
	width: 100%;
	clear: both;
	text-align: center;
}

.product-one-box li {
	display: inline-block;
	width: 100%;
	margin:0 0 40px 0;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 15px;
	display: flex;
	background: #ffffff;
	border: 3px solid #2f26ef;
	box-shadow: 11px -11px 0px #2f26ef;
}

.one-right {
	display: inline-block;
	width: 50%;
	padding-left: 20px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
}

.one-right .product-price {
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.one-right .product-price:hover {
	-webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.product-one-box .product-pic {
	display: inline-block;
	width: 50%;
}

.product-pic {
	width: 100%;
	clear: both;
	line-height: 0;
}

.product-pic img {
	width: 100%;
	max-width: 580px;
}

.product-title {
	width: 100%;
	clear: both;
	text-align: center;
	color:#2f26ef;
	font-weight: bold;
	padding: 15px 0;
}

.product-big-box .product-title,.product-one-box .product-title {
	line-height:33px;
	font-size: 30px;
}

.product-text {
	text-align: left;
	color:#333333;
	width: 100%;
	margin-bottom: 25px;
}

.product-text span {
	display: inline-block;
	width: 100%;
	clear: both;
	margin-bottom: 10px;
}

.slick-prev ,.slick-next {
	position: absolute;
	border: 0;
	top: calc(50% - 33px);
	text-indent: -9999px;
	z-index: 2;
	width: 20px;
	height: 33px;
	cursor: pointer;
}

.slick-prev {
	left: 10px;
	background: url(../images/slide_arrow_left.png) no-repeat center;
}

.slick-next {
	right: 10px;
	background: url(../images/slide_arrow_right.png) no-repeat center;
}

.product-big-box .product-text,.product-one-box .product-text {
	font-size: 18px;
	line-height: 28px;
}

.product-big-box .product-price,.product-one-box .product-price {
	font-size: 30px;
}

.product-one-box .product-price {
	display: inline-block;
	width: 46%;
	margin:10px 0;
}

.product-price {
	background: #ffea00;
	text-align: center;
	font-weight: bold;
	color:#ea448e;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	padding: 8px 0;
}

.product-price span {
	font-size: 15px;
}

.product-price::before {
	position: absolute;
	content: '';
	width: 10px;
	height: 45px;
	background: url(../images/product_but_left.png) no-repeat center;
	left: 0;
	top: 0;
}

.product-price::after {
	position: absolute;
	content: '';
	width: 10px;
	height: 45px;
	background: url(../images/product_but_right.png) no-repeat center;
	right: 0;
	top: 0;
}


.product-sale {
	width: 96px;
	height: 96px;
	text-align: center;
	background: url(../images/product_big_sale_bk.png) no-repeat center;
	font-size: 30px;
	font-weight: bold;
	position: absolute;
	left:-37px;
	top: -35px;
	color:#2f26ef;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 26px 0 0 0;
}

.product-sale span {
	width: 100%;
	clear: both;
	display: block;
	text-align: center;
	font-size: 18px;
}

ul.product-small-box {
	width: 100%;
	clear: both;
	display: table;
}

.product-small-box li {
	display: inline-block;
	width: 29%;
	margin: 20px;
	vertical-align: top;
}

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
	.product-small-box li {
		display: inline-block;
		width: 29%;
		vertical-align: top;
		margin: 15px;
	}
  }

@-moz-document url-prefix() { 
	.product-small-box li {
		display: inline-block;
		width: 29%;
		vertical-align: top;
		margin: 15px;
	}
}

.product-small-box a {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 15px;
	display: inline-block;
	background: #ffffff;
	border: 3px solid #2f26ef;
	box-shadow: 11px -11px 0px #2f26ef;
}

.product-small-box a:hover {
	-webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.product-small-box .product-title {
	line-height:28px;
	font-size: 22px;
}

.product-small-box .product-text {
	font-size:15px;
	line-height: 24px;
}

.product-small-box .product-price {
	font-size: 22px;
	padding: 12px 0;
}

.product-small span {
	font-size: 15px;
}

span.product-small-price-sale {
	display: inline-block;
	position: absolute;
	left: 20px;
    top: -13px;
	background: #ea448e;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	padding: 4px 7px;
	color: #ffea00;
}

.product-more {
	width: 100%;
	margin: 30px 0 0 0;
	text-align: center;
}

.product-more a {
	display: inline-block;
	padding: 10px 25px;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #2f26ef;
	text-align: center;
	color: #ffea00;
	font-size: 22px;
	font-weight: bold;
	line-height: 24px;
}

.product-more a:hover {
	-webkit-transform: translateY(-8px);
    transform: translateY(-8px);
}

.product-more img {
	display: inline-block;
	margin: 0 0 2px 10px;
}


/*底部*/
.block-bottom {
	width: 100%;
    padding: 30px 0 0 0;
    clear: both;
    background: url(../images/bottom_bk.png) no-repeat bottom #ea448e;
    height: 50px;
}



/*中間調度區
-----------------------------------------------------------------*/

@media screen and (max-width: 960px) {
	html,
    body {
        width: 100%;
        min-height: 100%;
	}

	.product-small-box li {
		width: 29%;
		margin: 15px;
	}

}

@media screen and (max-width: 855px) {
	.product-big-box li {
		width: 40%;
		margin: 26px;
	}
}


/*平板
-----------------------------------------------------------------*/

@media screen and (max-width: 768px) {
	.block-main {
		display: none;
	}

	.blcok-main-head-pad {
		display: block;
		line-height: 0;
		width: 100%;
	}

	ul.product-big-box,ul.product-one-box {
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.product-small-box li {
		width: 40%;
		margin: 26px;
	}

	.product-one-box a {
		width: 80%;
		display: block;
		margin: 0 auto;
	}

	.product-one-box .product-pic,.one-right {
		width: 100%;
	}

	.product-one-box .product-pic {
		text-align: center;
	}

	.product-one-box li {
		margin: 0 auto 50px auto;
		flex-wrap:wrap;
	}

	ul.product-small-box {
		text-align: left;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding-left: 10px;
	}

	.product-big-box .product-price,.product-one-box .product-price {
		font-size: 22px;
		padding: 12px 0;
	}

	.product-small-box .product-title {
		padding: 10px 0;
	}

	.product-big-box .product-title,.product-one-box .product-title {
		line-height: 28px;
		font-size: 22px;
		padding: 10px 0;
	}

	.product-big-box .product-text,.product-one-box .product-text {
		font-size: 15px;
		line-height: 20px;
	}

	.product-one-box .product-price {
		width: 100%;
	}

	.product-one-box a {
		width: 100%;
	}

	.one-right {
		padding-left: 0;
	}
	
}

/*中間調度區
-----------------------------------------------------------------*/

@media (max-width:580px) {
	ul.product-big-box ,ul.product-small-box,ul.product-one-box {
		text-align: center;
	}

	.product-big-box li,.product-small-box li,.product-one-box li {
		display: inline-block;
		width: 78%;
		margin: 20px auto;
	}

	.product-big-box .product-title,.product-one-box .product-title {
		line-height: 28px;
		font-size: 25px;
	}

	.product-big-box .product-text,.product-one-box .product-text {
		font-size: 15px;
		line-height: 22px;
	}

	.product-text {
		margin-bottom: 16px;
	}

	

	.one-right {
		padding-left: 0px;
	}
}

/*手機
-----------------------------------------------------------------*/

@media (max-width: 480px) {
	.blcok-main-head-phone {
		display: block;
		line-height: 0;
		width: 100%;
	}

	.blcok-main-head-pad {
		display: none;
	}

	.product-big-pic {
		width: 100%;
		/* max-width: 278px !important; */
		margin: 0 auto;
	}
	

	ul.product-big-box, ul.product-one-box {
		padding-left: 0px;
	}
}

@media (max-width: 320px) {
	
}