/* 미디어쿼리 --------------------------------------------------------------------------------------- */

@media screen and (max-width: 1440px) {
	header .tnb {margin-left:30%;}
	footer .fnb ul {padding:0 20px;}
	footer .footArea {padding:30px 20px;}
	footer .footArea h1 {right:30px;}
}
@media screen and (max-width: 1240px) {
	header h1 {left:20px; margin-left:0;}
	.contentsArea {padding:0 20px;}

	.introduce {padding:0 20px; }
	.introduce.intro .imgContent img {width:100%;}
}
@media screen and (max-width: 1024px) {
	.product_wrap .product_list .item {width:33.3333%;}
}


@media screen and (min-width: 871px) {
	header .tnb {display:block;}
}
@media screen and (max-width: 870px) {
	header {border-top:0; }
	header .headArea {min-height:auto; max-width:1024px; padding:0; height:62px;}
	header h1 {position:relative; left:0; width:100%; background:#9ecc00; line-height:60px; text-align:center;}
	header .tnb {display:none;}
	header .menuBtn {display:block;}

	header .gnb {display:none;}
	header .tnb {position:absolute; margin-left:0; width:80%; max-width:250px; position:absolute; top:75px; left:20px; background:#fff; z-index:10; display:; opacity:0; padding:15px; border-radius:5px;}
	header .tnb li {float:none; width:100%}
	header .tnb li a {height:20px; padding:0;}
	header .tnb li a span {display:block; color:#333; text-align:left; font-size:18px; font-weight:600; font-family:'Nanum Square'; line-height:20px; border-left:none;}
	header .tnb li a .arrow {display:none;}
	header .tnb li:first-child a span {border-left:0;}
	header .tnb li a:hover span,
	header .tnb li.on a span {color:#496b13;}
	header .tnb li a:hover, header .tnb li.on a {background:none;}
	header .tnb li.on a .arrow,
	header .tnb li a:hover .arrow {display:none;}
	header .tnb .snb {position:relative; display:block; width:100%; left:auto; top:auto; border-bottom:0; text-align:center; background:#da9b35; padding:10px; margin:10px 0 20px; border-radius:3px;}
	header .tnb .snb:hover {background:#9d9a52}
	header .tnb .snb a {display:block; text-align:left; min-width:auto; height:auto; padding:0; border-top:1px solid rgba(255,255,255,0.2); border-left:none;}
	header .tnb .snb a:first-child {border-top:0;}
	header .tnb .snb a span {display:block; font-size:14px; line-height:25px; font-weight:600; color:#fff; border:0;}
	header .tnb .snb a:hover {background:none;}
	header .tnb .snb a.on span,
	header .tnb .snb a:hover span {color:#fdff43;}
	header .tnb .snb a .ico {display:none}
	
	header .tnb li:nth-child(1) .snb {min-width:0; margin-left:0;}
	header .tnb li:nth-child(2) .snb {min-width:0; margin-left:0;}
	header .tnb li:nth-child(3) .snb {min-width:0; margin-left:0;}
	header .tnb li:nth-child(4) .snb {min-width:0; margin-left:0;}

	header .tnb li.on .snb a span {color:#fff;}
	header .tnb li.on .snb a.on span,
	header .tnb li.on .snb a:hover span {color:#fdff43;}

	.container {width:100%;padding-bottom:50px; background:#fff; }
	.container .navigation {position:absolute; right:20px; display:inline-block; text-align:right; padding:10px 0 0;}
	.container .contentsArea h3 {text-align:left; font-size:24px; line-height:33px; padding:15px 0 0 0; margin-bottom:10px;}

	footer .footArea h1 {display:none;}
	.subVisual {display:none;}

	.product_info {overflow:hidden}
	.product_info .img_wrap {width:40%;}
	.product_info .info_wrap {float:left; width:60%;}
	.product_contents .tabMenu li {width:50%;}
	.product_contents .contents img {width:100%; height:auto;}

	.introduce.intro .textContent {width:100%; float:none; padding-right:0;}
	.introduce.intro .imgContent {display: none;}

	/* table*/
	.tblContent tr td, .tblContent tr th {font-size: 14px;}
}
@media screen and (max-width: 767px) {
	.product_wrap {padding:0;}
	.product_wrap .product_list .item {width:50%;}

	.product_info .img_wrap {clear:both; width:100%;}
	.product_info .info_wrap {clear:both; float:none; width:100%; padding-left:0}
	.product_info .info_wrap .title {border-top:3px solid #888; padding:10px 10px; font-size:24px; color:#496b13; font-weight:600;}
	.product_info .info_wrap .subscript {border-top:1px dashed #ccc; padding:10px 10px; font-size:13px;}
}

@media screen and (max-width: 680px) {
	.container .navigation {padding-top:5px;}
	.container .contentsArea h3 {text-align:left; font-size:24px; line-height:33px; padding-top:35px; margin-bottom:10px;}

	footer .fnb ul {padding:0 10px;}
	footer .footArea {padding:10px;}
	footer .footArea .footTxt {padding:0;}

	.product_search .total {position:absolute; left:0; line-height:30px;}
	.product_search .search {margin-top:30px; background:#ddd; text-align:center; padding:5px 0;}
}

@media screen and (max-width: 580px){
	.introduce.history .mainList li:nth-child(2n+1) dl, .introduce.history .mainList li:nth-child(2n) dl {float:none; width:100%; border:none;}
	.introduce.history .mainList li:nth-child(2n) dl  dd {text-align:left; margin-left:35px;}
	.introduce.history .mainList li:nth-child(2n) dl dd .subList li:before{ content:"-";}
	.introduce.history .mainList li:nth-child(2n) dl dd .subList li:after{content:"";}
	.introduce.history .mainList li:nth-child(2n+1) dl dt {position:relative; left:0; padding:0 0 20px 35px;}
	.introduce.history .mainList li:nth-child(2n) dl dt {position:relative; padding-bottom:20px; }
	.introduce.history .mainList li dl {padding:20px 0;}
}

@media screen and (max-width: 480px) {
	footer .footArea .footTxt p span {display:inline; padding-right:6px; margin-right:4px;font-size:11px;}
	.product_wrap .product_list .item {width:100%;}
	.product_info .info_wrap dl dt {position:absolute; float:none; left:20px; background:#f7f7f7; width:120px; padding:10px 20px;}
	.product_info .info_wrap dl dd {float:none; width:100%; padding:10px 0 10px 140px;}

	.introduce {padding:0 0; }
}

/* 메인 */
@media screen and (max-width: 1240px) {
	.main_container .visual {width:39%;}
	.main_container .products {margin-left:39%;}
	.main_container .products section,
	.main_container .products .products1, 
	.main_container .products .products7 {width:50%; height:172px; }
	.main_container .products .products7 {width:100%; height:174px; }
	.main_container .products section a p {padding-right:50%;}
	.main_container .products section a p br {display:none;}
	.main_container .products section a:hover p {padding-right:0;}
	.main_container .products section a:hover h2 {color:#fff; font-size:24px; text-align:center; margin-top:10px;}

	.main_bottom section .icon {right:10%;}
}
@media screen and (max-width: 1024px) {
	.main_container .visual {width:390px;}
	.main_container .products {margin-left:390px;}	
	.main_container .products .products1 {background-size: 70% auto;}
	.main_container .products .products2 {background-size: 30% auto;}
	.main_container .products .products3 {background-size: 50% auto;}
	.main_container .products .products4 {background-size: 40% auto;}
	.main_container .products .products5 {background-size: 30% auto;}
	.main_container .products .products6 {background-size: 50% auto;}
	.main_container .products .products7 {background-size: 30% auto;}
	.main_container .products section a p {padding-right:50px;}
	.main_container .products .products7 a p {padding-right:120px;}

	.main_bottom section p {padding-right:70px;}
	.main_bottom section p br {display:none;}
	.main_bottom .customer p {font-size:20px;}
}
@media screen and (max-width: 870px) {
	.main_container {margin-top:0;}
	.main_container .products section a p {padding-right:0; margin-bottom:10px;}
	.main_container .products section a .ico_plus {display:inline-block; background-color:#ddd; padding:25px 25px 0 0; background-size:70%;}
	.main_container .products section a:hover {background:none !important; text-align:left; }
	.main_container .products section a:hover h2 {color:#333; font-size:17px; text-align:left; margin-top:0;}
	.main_container .products section a:hover p {color:#333; text-align:left; margin-bottom:10px;}
	.main_container .products section a:hover .ico_plus {display:inline-block;}
}
@media screen and (max-width: 780px) {
	.main_container .products .products1, 
	.main_container .products .products2, 
	.main_container .products .products3, 
	.main_container .products .products4, 
	.main_container .products .products5, 
	.main_container .products .products6, 
	.main_container .products .products7 {width:100%; height:96px; background-image:none;}
	.main_container .products .products2 {border-top:0;}
	.main_container .products section a {padding:10px;}
	.main_container .products section a p,
	.main_container .products .products7 a p {padding-right:0; font-size:12px;}
	.main_container .products .products7 {height:114px;}
	.main_container .products section a .ico_plus {position:absolute; right:10px; top:10px;}

	.main_bottom section p {padding-right:0;}
	.main_bottom section .icon {display:none;}
}
@media screen and (max-width: 680px) {
	.main_container .visual {position:relative; width:100%; height:630px; overflow:hidden;}
	.main_container .products {margin-left:0; height:auto; overflow:hidden;}
	.main_container .products .products1 {background-image:url('../img/product1.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products2 {background-image:url('../img/product2.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products3 {background-image:url('../img/product3.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products4 {background-image:url('../img/product4.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products5 {background-image:url('../img/product5.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products6 {background-image:url('../img/product6.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products7 {background-image:url('../img/product7.png'); background-repeat:no-repeat; background-position:right bottom;}
	.main_container .products .products1, 
	.main_container .products .products2, 
	.main_container .products .products3, 
	.main_container .products .products4, 
	.main_container .products .products5, 
	.main_container .products .products6, 
	.main_container .products .products7 {width:50%; height:172px; }
	.main_container .products .products7 {width:100%; height:174px; }
	.main_container .products section a p,
	.main_container .products .products7 a p,
	.main_container .products section a:hover p,
	.main_container .products .products7 a:hover {padding-right:50%;}
	.main_container .products section a p br {display:none;}
	.main_bottom section {width:50%;}
	.main_bottom .customer {width:100%;}
	.main_bottom .customer p {float:left; width:50%;}

}
@media screen and (max-width: 480px) {
	.main_container .visual {height:400px;}
	.main_container .products section a p,
	.main_container .products .products7 a p,
	.main_container .products section a:hover p,
	.main_container .products .products7 a:hover {padding-right:0;}
	.main_bottom .customer p {width:100%;}
	.main_bottom .customer .icon {display:inline-block;}
}