@font-face{
　　font-family: "my_hyt";
　　src: url('../fonts/hyt.ttf');
}
#contents {
    position: relative;
    width: 100%;
}

.localNav_area {
    width: 100%;
    z-index: 2;
    color: #333;
    border-bottom: 1px solid #ddd;
    background-color: rgba( 243, 243, 243, 0.9);
		-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
.localNav {
    width: 980px;
    margin: 0 auto;
    height: 40px;
}
.localNav > p {
    padding: 0 15px;
    border-left: 1px solid #ddd;
}
.localNav_area .sp_home {
    width: 15px;
    padding-top: 13px;
}
.localNav_area .sp_home img{width:100%;}

.localNav > p {
    height: 40px;
    border-right: 1px solid #ddd;
}

.localNav .localNav_1 {
    display: block;
    border-left: 0px;
}

.localNav > p {
    padding: 0 15px;
}
.localNav > p > span {
    padding: 11px 0 8px;
}
.localNav > p, .localNav > p > span, .menuLink {
    float: left;
}
.menuLink {
    position: relative;
    border-right: 1px solid #ddd;
    vertical-align: top;
    z-index: 1030;
}
.menuLink > a {
    padding: 10px 15px 8px;
    font-size: 13px;
    letter-spacing: 0px;
    display: block;
    font-weight: bold;
    margin-top: 1px;
    height: 40px;
    white-space: nowrap;
}
.menuLink .menu {
    display: none;
    position: absolute;
    top: 40px;
    left: 0px;
    padding: 0px;
    border: 1px solid #ccc;
    background: #fff;
    max-height: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1030;
}

.menuLink .menu li a {
    padding: 8px 15px;
    font-size: 13px;
    letter-spacing: 0px;
    position: relative;
    display: block;
    white-space: nowrap;
    background: #fff;
    line-height: 1.2;
    z-index: 1030;
}
.menuLink .menu a:hover, .menuLink .menu li.hover a:hover {color:#fff; text-decoration:none; background:#2475d0;}

.menuLink .menu li.on a {color:#fff; text-decoration:none; background:#2475d0;}
.sp_img {
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
}
.sp_img img {
    width: 10px;
    vertical-align: middle;
}
.localNav > p {
    height: 40px;
    border-right: 1px solid #ddd;
}

#content_area {
    width: 980px;
    margin: 0 auto;
    padding-bottom: 80px;
    position: relative;
    padding-top: 41px;
}
.h3_area {
    height: 113px;
    border-bottom: 1px solid #bebebe;
}
.sub_visual2 {
    height: 113px;
    background: url(../images/visual2.gif) no-repeat right bottom;
}
#content_area .tit {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
	    font-size: 34px;
    padding-top: 33px;
	
	    font-weight: bold;
    margin: 0;
    color: #000;
    line-height: 1.2;
}
#content_area h3 {
    letter-spacing: -0.05em;
}

.product_posco {
    position: relative;
    margin-top: 30px;
}

.product_posco ul {
    width: 100%;
    position: relative;
    overflow: hidden;
		-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}

.product_posco > ul > li {
    background-size: 0% !important;
    float: left;
    width: 32%;
    margin-right: 2%;
    margin-bottom: 20px;

    position: relative;
    height: 183px;
    border: 1px solid #e5e5e5;
}
.product_posco > ul > li:hover {
    background-size: cover !important;
}

.product_posco .pr01 a, .product_posco .pr02 a, .product_posco .pr03 a, .product_posco .pr04 a, .product_posco .pr05 a, .product_posco .pr06 a, .product_posco .pr07 a, .product_posco .pr08 a, .product_posco .pr09 a, .product_posco .pr10 a, .product_posco .pr11 a, .product_posco .pr12 a {
    display: block;
    height: 183px;
    position: relative;
    letter-spacing: 0;
}
.product_posco > ul > li:hover a {
    text-decoration: none !important;
}
.product_posco li a .pr_tit {
    font-family: 'Malgun Gothic';
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 4px;
    padding: 20px 0 0px 20px;
}
.product_posco li a:hover div {
    color: #fff;
    width: 59%;
    overflow: hidden;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.3;
}
.product_posco li a .pr_tit {
    font-family: 'Malgun Gothic';
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 4px;
    padding: 20px 0 0px 20px;
}

.product_posco li a .cont {
    width: 59%;
    overflow: hidden;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.3;
}
.product_posco li a:hover .cont {
    color: #fff;
}
.product_posco li a:hover img {
    display: none;
}
.product_posco li a:hover img {
    display: none;
}
#content_area img {
    width: auto;
    padding-top: 0;
    position: absolute;
    right: 0px;
    bottom: 25px;
}
.product_posco li a .btn-view img {
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 1;
}
.product_posco li a img {
    bottom: 25px;
}



@media (max-width: 980px){
	#content_area {
		width: 100%;
		margin: 0 auto;
		padding-bottom: 80px;
		position: relative;
		padding-top: 41px;
	}
	
	.product_posco > ul > li {
		background-size: 0% !important;
		width: 98%;
		margin-right: 2%;
		margin-bottom: 20px;
	
		position: relative;
		height: 183px;
		border: 1px solid #e5e5e5;
	}
	.product_posco > ul > li:hover {
		background-size: cover !important;
	}
	
	.product_posco .pr01 a, .product_posco .pr02 a, .product_posco .pr03 a, .product_posco .pr04 a, .product_posco .pr05 a, .product_posco .pr06 a, .product_posco .pr07 a, .product_posco .pr08 a, .product_posco .pr09 a, .product_posco .pr10 a, .product_posco .pr11 a, .product_posco .pr12 a {
		display: block;
		height: 183px;
		position: relative;
		letter-spacing: 0;
	}
	.product_posco > ul > li:hover a {
		text-decoration: none !important;
	}
	.product_posco li a .pr_tit {
		font-family: 'Malgun Gothic';
		font-weight: 600;
		font-size: 20px;
		margin-bottom: 4px;
		padding: 20px 0 0px 20px;
	}
	.product_posco li a:hover div {
		color: #fff;
		width: 59%;
		overflow: hidden;
		padding-left: 20px;
		font-size: 13px;
		line-height: 1.3;
	}
	.product_posco li a .pr_tit {
		font-family: 'Malgun Gothic';
		font-weight: 600;
		font-size: 20px;
		margin-bottom: 4px;
		padding: 20px 0 0px 20px;
	}
	
	.product_posco li a .cont {
		width: 59%;
		overflow: hidden;
		padding-left: 20px;
		font-size: 13px;
		line-height: 1.3;
	}
	.product_posco li a:hover .cont {
		color: #fff;
	}
	.product_posco li a:hover img {
		display: none;
	}
	.product_posco li a:hover img {
		display: none;
	}
	#content_area img {
		width: auto;
		padding-top: 0;
		position: absolute;
		right: 0px;
		bottom: 25px;
	}
	.product_posco li a .btn-view img {
		display: block;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 1;
	}
	.product_posco li a img {
		bottom: 25px;
	}



}

.product{width:1200px; margin:0 auto;}
.category{position: relative; background:url(../images/bg_pro_left.png) no-repeat;
    top: 20px;
    float: left;
    width:259px; height:658px; padding-top:130px;
}
.product .category span {
    display: block;
    line-height: 80px;
    background: #b20000;
    font-weight: bold;
    font-size: 20px;
    color: #fff;
    text-align: center;
}
.product .category a {
    display: block; font-family:my_hyt;
    line-height: 26px; padding-left:30px; margin-bottom:12px;
    font-size: 14px; color: #333; text-align: left;
	width:172px; margin-left:46px;
	transition-duration: .5s;
}
.product .category a:hover {
    padding-left:40px; background:url(../images/bg_pro_left_on.jpg); color:#fff;
}
.product .category a.on {
    padding-left:40px; width:172px; background:url(../images/bg_pro_left_on.jpg); margin-left:46px;  color:#fff;
}

.product .main {
    float: right;
    width: 75%;
}

.product .list {
    margin-top: 10px;
}
ul {
    margin: 0px;
    padding: 0px;
    zoom: 1;
}
.product .list ul li{ float:left; width: 32%; height:280px; border:1px #dadada solid; margin-right:17px; margin-bottom:20px; overflow:hidden; padding:10px 15px 5px 15px;}
.product .list ul li img{ width:100%; height:200px; overflow:hidden;}
.product .list ul li a:hover img{ transform:scale(1.06,1.06); transition:all 1s;}
.product .list ul li:hover{ border:1px #3254ad solid;}
.product .list ul li p{ font-size:14px; text-align:center; line-height:35px;}


@media (min-width: 1200px){
.product .list ul li:nth-child(3n) { margin-right: 0px; clear:right;}
}

@media (max-width: 1200px){
	.product{width:100%;}
	.category{display:none;}
	.product .main{width:100%;}
	.product .list ul li:nth-child(3n) { margin-right: 0px; clear:right;}
}
@media (max-width: 980px){
	.product{width:100%;}
	.category{display:none;}
	.product .main{width:100%;}
	.product .list ul li{float:left; width:45%;}
	.product .list ul li:nth-child(2n) { margin-right: 0px; clear:right;}
}
@media (max-width: 550px){
	.product{width:100%;}
	.category{display:none;}
	.product .main{width:100%;}
	.product .list ul li{float:left; width:99%; margin-right:0;}
}