@charset "UTF-8";
/* CSS Document */
.main_product *{color:#686867}
.main_product .title_top .txt_01{font-size:40px;font-weight:bold;color:#68ba40;letter-spacing:0.1em;margin-right:10px;}
.main_product .title_top .txt_02{font-size:30px;color:#464646;font-weight:100;}

#menu_left{width: 300px; margin-right: 36px; float: left;}
#menu_left .title{background-color: #68ba40; display: block; padding: 13px 26px; margin-top: 42px;}
#menu_left .title h3{color: #ffffff; font-weight: 800; font-size: 18px; }
#menu_left ul.menu{background: url('../images/product/menu_bg.jpg') repeat; padding-bottom: 95px;}
#menu_left ul.menu li{display: block; padding-top:30px; position: relative; }
#menu_left ul.menu li a{font-size: 14px; text-transform: uppercase; padding-left: 26px;}
#menu_left ul.menu li a:hover{opacity:0.8;}
#menu_left ul.menu li .line{position: absolute; bottom: 9px; display: none;}
#menu_left ul.menu li:hover .line, #menu_left ul.menu li:active .line{display: block;}

#product_right{width: 1264px; float: left;}
#product_right .title_product{margin-top: 42px; margin-bottom: 15px;}
#product_right .title_product .sort{float: right ;width: 140px; position: relative;}
#product_right .title_product .sort select{border:none;}
#product_right .title_product .sort img{position: absolute; bottom: 5px; right: 0;}
#product_right .product{width:400px; float: left; margin-right: 32px;}
#product_right .product a.out_img{overflow:hidden;display:block;}
#product_right .product a.out_img img{transform: scale(1, 1); transition: all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}
#product_right .product a.out_img img:hover{-ms-transform: scale(1.04, 1.04); -webkit-transform: scale(1.04, 1.04); transform: scale(1.04, 1.04);}

#product_right li:nth-child(3n).product{margin-right:0; margin-bottom: 30px }
#product_right .product figcaption{border-bottom: 1px solid #c2c2c2; padding: 10px 0; padding-bottom: 30px}    
#product_right .product .caption .detail{float: right;}
#product_right .product .caption .detail a:hover{color:#333;}
#product_right .product .caption .name{font-weight: bold; float: left;}
#product_right .view{clear: both;width:170px;text-align:center;}
#product_right .view a:hover{opacity:0.8;}


#product_right .pagination {text-align: right;}
#product_right .pagination .active span {font-weight: bold; text-decoration: underline;}
#product_right .pagination ul li {display: inline-block; width: 30px; font-size: 14px;}



/*PRODUCT_CART*/
#product_cart{width: 1200px; margin: 0 auto;}
#product_cart *{color: #656565;}
#product_cart h2{font-size: 28px; font-weight: 300; letter-spacing:0.1em; padding: 20px 0; clear: both;}
#product_cart ul li {margin-bottom: 10px;}
#product_cart ul li:nth-child(2n){background: #fafafa;}
#product_cart .pic{width: 23%; float: left;}
#product_cart .order{width: 76%; float: right; position: relative;padding-left:10px; box-sizing: border-box;}
#product_cart .order .bg_title{position: absolute; width: 100%; top: 0; left: 0; height: 40px; background-color: #f6f5f4; z-index: -1}
#product_cart .order .code{width: 115px; float: left;}
#product_cart .order .product{width: 335px; float: left; font-size: 16px; font-weight: bold;}
#product_cart .order .price{width: 115px; float: left;}
#product_cart .order .quantity{width: 100px; float: left;}
#product_cart .order .quantity .number{width: 98%; display: block; padding: 2px; box-sizing: border-box; border: solid 1px #000000; text-align: center; margin-top: 75px}
#product_cart .order .quantity .number > span{display: inline-block; width: 30%; cursor: pointer;}
#product_cart .order .quantity .number > input {display: inline-block; width: 30%; border: none; line-height: 30px;}
#product_cart .order .type{width: 100px; float: left;}
#product_cart .order .type select {width: 90px; height: 36px; border: 1px solid #333;}
#product_cart .order .type .inputype {width: 98%; display: block; padding: 2px; box-sizing: border-box; border: solid 1px #000000; text-align: center; margin-top: 75px}
#product_cart .order .type .inputype > input {display: inline-block; width: 30%; border: none; line-height: 30px;}
#product_cart .order .check {width: 137px;float: left;padding-top: 100px; text-align: center;}
#product_cart .order .check .up{float: right; margin-bottom: 20px;}
#product_cart .order .check .up input{padding: 13px 15px;background: #000000;color: #fff;float: left;}
#product_cart .order .check .up:hover{opacity: 0.8;}
#product_cart .order .check .remove{margin-top: 22px;}
#product_cart .order .check .remove a{color: #e1bb76; text-decoration: underline;}
#product_cart .order h3{padding-top:8px; font-size:16px; }
#product_cart .order p{padding-top: 75px;}

#product_cart .total p{float: right; font-size: 16px; width: 13%;}
#product_cart .total span{font-weight: bold; padding: 0 5px;}
#product_cart .total hr{width: 82%; float: left; margin-top: 14px;}
#product_cart .check_out{text-align: center; clear: both; padding-top: 60px; padding-bottom: 130px;}
#product_cart .check_out a:hover {opacity: 0.8;}
#product_cart .check_out a{font-size: 16px;font-weight: bold;padding: 17px 50px;background-color: #d9a743;display: inline-block;color: #fff;line-height: 16px;}

/*CART TABLE*/
#product_cart{width: 1200px; margin: 0 auto;}
#product_cart *{color: #656565;}
#product_cart .message {margin-bottom: 20px;}
#product_cart .message p {color: #d9a743; }
#product_cart h2{font-size: 28px; font-weight: 300; letter-spacing:0.1em; padding: 20px 0; clear: both;}
#product_cart table {width: 100%; border-spacing: 10px 10px; text-align: center;}
#product_cart table th {background-color: #f6f5f4; font-weight: bold; box-sizing: border-box; vertical-align: middle; padding: 10px 5px 10px 20px;}
#product_cart table td {box-sizing: border-box; vertical-align: middle; padding: 5px 0px 0px 20px; text-align: left;}
#product_cart table tr {}
#product_cart table tr:nth-child(2n+1){background-color: #fafafa;}
#product_cart table th:nth-of-type(1) {width: 23.33%;}
#product_cart table th:nth-of-type(2) {width: 6.66%;}
#product_cart table th:nth-of-type(3) {width: 26.66%;}
#product_cart table th:nth-of-type(4) {width: 10%;}
#product_cart table th:nth-of-type(5) {width: 10%;}
#product_cart table th:nth-of-type(6) {width: 23.33%;}
#product_cart table td:nth-of-type(1) {padding-left: 0;}
#product_cart table td:nth-of-type(3) {font-weight: bold;}
#product_cart table .number{width: 100%; display: block; border: solid 1px #000000;}
#product_cart table .number span{padding: 0 15px}
#product_cart table p {text-align: center;}
#product_cart table .update {padding: 10px 25px; background: #000000; color: #fff; display: block; max-width: 150px; margin: 0 auto;}
#product_cart table .remove {padding: 10px 25px; display: block; max-width: 150px; margin: 0 auto; color: #e1bb76; text-decoration: underline;}
#product_cart table select {width: 100px; height: 25px; border: 1px solid #333;}

#product_cart .total p{float: right; font-size: 16px; width: 15%;}
#product_cart .total span{font-weight: bold; padding: 0 5px;}
#product_cart .total hr{width: 82%; float: left; margin-top: 14px;}

#product_cart .check_out{text-align: center; clear: both; padding-top: 60px; padding-bottom: 130px;}
#product_cart .check_out a:hover {opacity: 0.8;}
#product_cart .check_out a{font-size: 16px;font-weight: bold;padding: 17px 50px;background-color: #6abd45;display: inline-block;color: #fff;line-height: 16px;}

/*PRODUCT_INFORMATION*/
#product_information{width: 1200px; margin: 0 auto;}
#product_information h2{font-size: 28px; font-weight: 300; letter-spacing:0.1em; padding: 20px 0; clear: both;}
#product_information *{color: #656565;}
#product_information .detail .error ul li {color: #850000; display: block !important; float: none !important; padding: 0 !important; width: 100% !important;}
#product_information .detail{background: #f4f4f4; padding: 40px 38px 64px 38px;}
#product_information .detail h3{font-size: 20px; margin-bottom: 20px;}
#product_information .detail form{padding:0 84px;}
#product_information .detail form ul{clear: both; margin-bottom: 25px;}
#product_information .detail form ul li i{font-size: 8px; color: #6abd45; padding-right: 10px; vertical-align: middle;}
#product_information .detail form ul li{float: left; line-height: 30px;}
#product_information .detail form ul li:nth-of-type(2n+1){padding-left: 45px; padding-right: 25px;}
#product_information .detail form ul li:first-of-type{width: 140px; padding-left: 2px;}
#product_information .check_out {text-align: center; clear: both; padding-top: 30px;}
#product_information .check_out input {font-size: 16px;font-weight: bold;padding: 17px 50px;background-color: #6abd45;display: inline-block;color: #fff;line-height: 16px;}
#product_information .check_out input:hover {opacity: 0.8;}
#product_information input{border: none; line-height: 30px;}
#product_information input#f_name{width: 310px;}
#product_information input#l_name{width: 310px;}
#product_information input#company, 
#product_information input#address, 
#product_information input#tel, 
#product_information input#email {width: 776px;}
#product_information input#city, 
#product_information input#zip{width: 155px;}
#product_information select#country{width: 420px; height: 30px; border: none;}

#product_cart .title{font-size: 20px; padding-top: 50px; padding-bottom: 30px;}


/*===============================
 			MEDIA
 ================================*/

 @media only screen and (max-width:1700px){
 	#container{width: 100%;}
 	#menu_left{width: 18.75%; margin-right: 0;}
 	#product_right{width: 79%; float: right;}
 	#product_right .product{width: 31.6455%; margin-right: 2.53175%}
 }

 @media only screen and (max-width:1200px){

 	#menu_left ul.menu li a{font-size: 12px}

 	/*PRODUCT CART*/
 	#product_cart{width: 100%; padding: 0 2%;}
 	#product_cart .pic{margin-bottom: 20px;}
 	#product_cart .order{}
 	#product_cart .order .bg_title{display: none;}
 	#product_cart .order .code, #product_cart .order .product, #product_cart .order .price,
 	#product_cart .order .quantity, #product_cart .order .quantity, #product_cart .order .check, #product_cart .order .type {width: 100%;}
 	#product_cart .order h3{width: 50%; float: left; padding-top: 10px;}
 	#product_cart .order p {width: 50%; float: left; text-align: right; padding-top: 10px; }
 	#product_cart .order .quantity .number {width: 100px; margin-top: 10px; float: right;}
 	#product_cart .order .type select {width: 100px; float: right;}
 	#product_cart .order .check{padding-top: 25px;}
 	#product_cart .order .check .up{float: left;}
 	#product_cart .order .check .remove{float: left; margin-top: 15px; margin-left: 50px;}
 	#product_cart .total hr{width: 100%;}
 	#product_cart .total p{width: 185px; text-align: right;}

	/*PRODUCT_INFORMATION*/
	#product_information{width: 100%; padding: 0 2%;}
	#product_information .detail form ul li:nth-of-type(2n+1){width: 13.46153%; padding: 0;}
	#product_information .detail form ul li:nth-of-type(2n){width: 86.53847%;}

	#product_information input{width: 100% !important;}
	#product_information input#f_name, 
	#product_information input#city{margin-bottom: 25px;}	
	#product_information select#country{width: 100%;margin-bottom: 25px;}	
}

@media only screen and (max-width:960px){
	#menu_left{width: 100%;}
	#menu_left ul.menu{padding-bottom: 55px;}
	#menu_left ul.menu li{padding-top: 0; width: 25%; float: left;}
	#product_right{width: 100%}
	#menu_left ul.menu li:hover .line, #menu_left ul.menu li:active .line{display: none;}
	#menu_left ul.menu li:hover a, #menu_left ul.menu li:active a{text-decoration: underline;}

	/*PRODUCT_INFORMATION*/
	#product_information .detail form{padding:0px;}
	#product_information .detail form ul li:nth-of-type(2n+1){width: 30%;}
	#product_information .detail form ul li:nth-of-type(2n){width: 70%;}	
}

@media only screen and (max-width:780px){
	#product_right .product figcaption{padding-bottom: 10px}
	#product_right .product .caption .name{float: none;}
	#product_right .product .caption .detail{float: none;}

}

@media only screen and (max-width:736px){
	.main_product .title_top .txt_01{font-size:32px; }
	.main_product .title_top .txt_02{font-size:24px; }

	#menu_left ul.menu{padding-bottom: 75px}
	#menu_left ul.menu li{width: 32%; float: left; margin-right: 2%}
	#menu_left ul.menu li:nth-child(3n){margin-right: 0}

	#product_right li:nth-child(3n).product{margin-right: 2%}
	#product_right li.product{width: 49%; margin-right: 2%;}
	#product_right li:nth-child(2n).product{margin-right: 0;}
}

@media only screen and (max-width:576px){
	#menu_left .title{text-align: center;}
	#menu_left ul.menu li{width: 50%; float: left; text-align: center; padding: 0; margin-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-right: 1px solid rgba(0, 0, 0, 0.2);}
	#menu_left ul.menu li:nth-child(2n+1){border-left:1px solid rgba(0, 0, 0, 0.2); }
	#menu_left ul.menu{padding-bottom: 95px;}
	#menu_left ul.menu li a{padding-left: 0;}
	#menu_left ul.menu li:hover a, #menu_left ul.menu li:active a{text-decoration: none;}
	#menu_left ul.menu li:hover, #menu_left ul.menu li:active{background: #0006; color: #fff}
	#product_right li:nth-child(2n).product{margin-bottom: 30px;}
}

@media only screen and (max-width:480px){	
	/*ORDER AND CHECKOUT*/
	#product_cart .pic{width: 50%; text-align: center; float: none; margin: 0 auto;}
	#product_cart .order{width: 100%; float: none;}
	#product_cart .order .check{padding-right: 0;}
	#product_information .detail {padding: 20px}
	#product_information .detail form ul li {width: 100% !important; float: none;}
}

@media only screen and (max-width:380px){
	#menu_left ul.menu li a{font-size: 10px}
	#product_right .product figcaption{font-size: 12px}	
}
@media only screen and (max-width:340px){
	#product_right .product figcaption{font-size: 10px}
}