/*
 * iweb51-style10
 *
 * Copyright 2015, TANK
 * 
 * 
 * 2015 / 10 / 30
 */
 
 
/* +productslist
*----------------------------------------------------------------------------*/
.wrapper .container section .content-wrap .content-main #products ul ,
.wrapper .container section .content-wrap .content-main .others ul {
	overflow: hidden;
}

.wrapper .container section .content-wrap .content-main #products ul li {
	margin: 0 0 20px;
}

.wrapper .container section .content-wrap .content-main #products ul li .photoImg {
	overflow: hidden;
	margin: 10px;
	border: 1px #ADA071 solid;
}

.wrapper .container section .content-wrap .content-main #products ul li .photoImg a.photo:hover {
	transform:scale(1.1,1.1);
}

.wrapper .container section .content-wrap .content-main #products ul li .view a.info h2 ,
.wrapper .container section .content-wrap .content-main #products ul li .third-effect:hover a.info h2 {
	margin: 40px 0 0;
	padding: 0;
	border: 0;
	display: block;
}

.wrapper .container section .content-wrap .content-main #products ul li .info {
	margin: 10px auto;
	width: 90%;
	text-align: center;
}

.wrapper .container section .content-wrap .content-main #products ul li .info h3 {
	padding-bottom: 10px;
	border-bottom: 2px #887427 solid;
	text-align: center;
}

.wrapper .container section .content-wrap .content-main #products ul li .info h3 a {
	overflow: hidden;
	height: 22px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}


.wrapper .container section .content-wrap .content-main #products ul li .info p {
	overflow: hidden;
	height: 45px;
	margin: 10px 0;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 170%;
	text-align: center;
}

.wrapper .container section .content-wrap .content-main #products ul li .info a.more {
	padding: 2px 5px;
	color: azure;
}
button {
  outline: none;
  border: none;
  cursor: pointer;
  color: white;
  position: relative;
  padding: 0.5em 1em;
  background-color: #40a9ff;
}
button {
  z-index: 1;
  overflow: hidden;
  margin: 10px auto;
  border-radius: 20px;
}
button::before {
  z-index: -1;
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #0a4a8c;
  /* 變化位置的程式碼 */
  top: 0;
  left: 0;
  transform-origin: center;
  transform: scale3d(0, 0, 0);
  transition: transform 0.45s ease-in-out;
  /* *********** */
}

button:hover::before {
  transform: scale3d(15, 15, 15);
}
button:hover a {
  color:white;
}

/* +productslist
*----------------------------------------------------------------------------*/
.wrapper .container section .content-wrap .content-main .orderfunction {
	overflow: hidden;
	margin: 10px 0 20px;
	color: #000;
}

.wrapper .container section .content-wrap .content-main .orderfunction p {
	margin: 10px 0;
}

.wrapper .container section .content-wrap .content-main .orderfunction p label {
	margin: 0 10px 0 0;
	width: 80px;
	display: inline-block;
	font-size: 15px;
	text-align: right;
}

.wrapper .container section .content-wrap .content-main .orderfunction p input {
	overflow: hidden;
	padding: 5px 0;
	border: 1px #ccc solid;
}

.wrapper .container section .content-wrap .content-main .orderfunction p input#q {
	width: 100px;
}

.wrapper .container section .content-wrap .content-main .orderfunction p strong {
	font-size: 20px;
	color: #F00;
}

.wrapper .container section .content-wrap .content-main .orderfunction p input#buy {
	margin: 0 10px;
	padding: 5px 10px;
	background: #FF0000;
	color: #fff;
	border: 0;
	opacity: 0.8;
}

.wrapper .container section .content-wrap .content-main .orderfunction p input#buy:hover {
	opacity: 1;
}


/**
*
* =products nav
*
**/
.wrapper .container section .content-wrap .content-main .m-pro-menu {
	margin: 50px 15px 15px;
}

.wrapper .container section .content-wrap .content-main .m-pro-menu h2 {
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
}

.wrapper .container section .content-wrap .content-main .m-pro-menu ul {
	overflow: hidden;
}

.wrapper .container section .content-wrap .content-main .m-pro-menu ul li {
	border-bottom: 1px #e1e1e1 solid;
}

.wrapper .container section .content-wrap .content-main .m-pro-menu ul li a {
	padding: 10px 20px;
	display: block;
	text-align: center;
	font-size: 15px;
	color: #000;
}

.wrapper .container section .content-wrap .content-main .m-pro-menu ul li a:hover {
	background: #35aeb7;
	color: #fff;
}

.wrapper .container section .content-wrap .content-main .m-pro-menu ul li.action a {
	background: #219aa5;
	color: #fff;
}


/* +product detail
*----------------------------------------------------------------------------*/
.wrapper .container section .content-wrap .content-main #products .main-pro-img {
	margin: 0 0 20px;
	overflow: hidden;
}

.wrapper .container section .content-wrap .content-main #products .main-pro-img img {
	width: 100%;
}

/**
*
* =sub-pro-img
*
**/
.wrapper .container section .content-wrap .content-main #products .sub-pro-img {
	margin: 0 0 20px;
}

.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul {
	margin: 0 -10px 0 0;
}

.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li {
	margin: 0 10px 10px 0;
	width: 46%;
	float: left;
}

.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a {
	height: 105px;
	display: block;
	overflow: hidden;
}

.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a img {
	max-width: 100%;
	min-height: 110px;
}

/**
*
* =pro-article
*
**/
.wrapper .container section .content-wrap .content-main .pro-article {
	margin: 10px 0;
	overflow: hidden;
	position: relative;
}

.wrapper .container section .content-wrap .content-main .pro-article ul.tabs {
	width: 100%;
	height: 30px;
	border-bottom: 1px #1e274059 solid;
	overflow: visible;
}

.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li {
	margin: 0 3px -1px 0;
	height: 29px;
	border: 1px #765C30 solid;
	border-bottom: 1px #444 solid;
	float: left;
	overflow: hidden;
	position: relative;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-top-right-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li a {
	padding: 0 10px;
	height: 29px;
	display: block;
	text-align: center;
	line-height: 35px;
	font-size: 14px;
}

.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li.active {
	border: 1px #444 solid;
	border-bottom: 1px #E5E5E5 solid;
}

.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li.active a {
	color: #909090;
	font-weight: bold;
}

.wrapper .container section .content-wrap .content-main .pro-article .tab_container {
	clear: left;
	margin: 15px 0 0;
	width: 100%;
}

.wrapper .container section .content-wrap .content-main .pro-article .tab_container .tab_content {
	margin: 0 10px;
	line-height: 170%;
	font-size: 16px;
}

.wrapper .container section .content-wrap .content-main .pro-article .tab_container #tab2 ,
.wrapper .container section .content-wrap .content-main .pro-article .tab_container #tab3 {
	display: none;
}

/* +ask
*----------------------------------------------------------------------------*/
.wrapper .container section .content-wrap .content-main .ask {
	overflow: hidden;
	margin: 30px 0 0;
	text-align: right;
}

@-webkit-keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }

  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  49.95% {

    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes hvr-icon-wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }

  33.3% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.wrapper .container section .content-wrap .content-main .ask a {
	padding: 10px 20px;
	display: inline-block;
	vertical-align: middle;
	background: #DC5C71;
	color: #fff;
	font-size: 18px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	padding-right: 2.2em;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.wrapper .container section .content-wrap .content-main .ask a:before {
	content: url(../../images/ask.png);
	position: absolute;
	right: 1em;
	padding: 1px 1px 0;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.wrapper .container section .content-wrap .content-main .ask a:hover:before ,
.wrapper .container section .content-wrap .content-main .ask a:focus:before ,
.wrapper .container section .content-wrap .content-main .ask a:active:before {
	-webkit-animation-name: hvr-icon-wobble-horizontal;
	animation-name: hvr-icon-wobble-horizontal;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}

.wrapper .container section .content-wrap .content-main .others ,
.wrapper .container section .content-wrap .content-main .others ul li {
	margin: 10px 0;
}

.wrapper .container section .content-wrap .content-main .others ul li a.photo {
	background-position: 50% 0;
	background-size: 100% auto;
}

.wrapper .container section .content-wrap .content-main .others ul li a.photo:hover {
	background-size: 120% auto;
}


/**********適應性**********/
/************************/
@media only screen and (min-width : 320px) {
	.wrapper .container section .content-wrap .content-main .others ul li {
		overflow: hidden;
		width: 100%;
		float: left;
	}
	.wrapper .container section .content-wrap .content-main .others ul li .view {
		margin: 10px;
		height: 200px;
	}
	.wrapper .container section .content-wrap .content-main .others ul li h3 {
		text-align: center;
	}
}

@media only screen and (min-width : 480px) {
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li {
		width: 30%;
	}
	.wrapper .container section .content-wrap .content-main .orderfunction p label {
		width: 120px;
	}
	.wrapper .container section .content-wrap .content-main .others ul li {
		margin: 10px;
		width: 45%;
	}
}

@media only screen and (min-width : 640px) {
	.wrapper .container section .content-wrap .content-main #products ul li {
		width: 50%;
		float: left;
	}
	.wrapper .container section .content-wrap .content-main #products ul li .view {
		margin: 10px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li {
		width: 48%;
		height: 185px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a {
		height: 185px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a img {
		min-height: 190px;
	}
	.wrapper .container section .content-wrap .content-main .others ul li {
		width: 20%;
	}
}

@media only screen and (min-width : 768px) {
	.wrapper .container section .content-wrap .content-main #products {
		overflow: hidden;
	}
	.wrapper .container section .content-wrap .content-main #products .main-pro-img {
		width: 64%;
		float: left;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img {
		width: 30%;
		float: right;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul {
		margin: 0 0 0 -10px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li {
		margin: 0 0 10px 10px;
		padding: 0;
		width: 60%;
		height: 105px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a {
		height: 105px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a img {
		min-height: 110px;
	}
}

@media only screen and (min-width : 1024px) {
	.wrapper .container section .content-wrap .content-main #products ul li {
		width: 50%;
	}
	.wrapper .container section .content-wrap .content-main .others h2 {
		margin: 10px 0;
		padding-bottom: 10px;
		border-bottom: 1px #585656 solid;
		font-size: 18px;
	}
	.wrapper .container section .content-wrap .content-main .others ul li {
		width: 25%;
	}
	.wrapper .container section .content-wrap .content-main .others ul li .view {
		height: 150px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li {
		margin: 0;
		padding: 0 0 10px 10px;
		width: 70%;
		height: 140px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a {
		height: 140px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a img {
		min-height: 145px;
	}
	.wrapper .container section .content-wrap .content-main .m-pro-menu {
		display: none;
	}
}

@media only screen and (min-width : 1280px) {
	.wrapper .container section .content-wrap .content-main #products ul li h3 a {
		color: #000;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li {
		width: 70%;
		height: 110px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a {
		height: 110px;
	}
	.wrapper .container section .content-wrap .content-main #products .sub-pro-img ul li a img {
		min-height: 115px;
	}
	.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li {
		border-bottom: 1px #444 solid;
	}
	.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li a {
		color: #105D84;
	}
	.wrapper .container section .content-wrap .content-main .pro-article ul.tabs li.active {
		border: 1px #1e274059 solid;
		border-bottom: 1px #F0E4B5 solid;
	}
	.wrapper .container section .content-wrap .content-main .pro-article .tab_container .tab_content {
		color: #fff;
	}
}