﻿#wrap{width: 100%; margin: 0 auto; overflow: hidden; min-width: 480px;}
#section{width: 100%; height: auto; float: left; overflow: hidden;margin-top: 60px;} 
img{border: none;}
/* section_top */
#section_top{width: 100%; margin: 0 auto; float: left;height: 800px; background-image:url(../frames/5_1.png); background-repeat: no-repeat; } 
#section_top p{padding: 1% 3%; font-family: 'Nanum Gothic', sans-serif; font-size: 0.85em; word-spacing: -1px;  color: #FFFFFF; }
#section_top a {color: #FFFFFF; font-size: 0.85em; word-spacing: -1px; }

/* intro_line */
#intro_line{width: 100%; float: left; height: 50px; background: #ffffff;  border-bottom:1px solid #ccc;}
#intro_line:hover{background: #3B2D2D; transition: 0.7s;color: #ffffff;}
#intro_line p{text-align: center;font-family: 'Nanum Gothic', sans-serif; font-size: 0.85em; line-height: 50px; color: #888888; }
#intro_line p:hover{color: #ffffff;}

/* introduce */
#introduce{width: 100%; float: left; height: auto; background: #FFFFFF; }
#introduce h3{text-align: center;font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; margin-top: 130px; color: #CCCCCC; font-size: 1em; }
#introduce h4{text-align: center;font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin-top: 5px; color: #555555; font-size: 3em; }
#introduce p{text-align: center; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin-top: 10px; font-size: 0.95em; color: #999999; margin-bottom: 120px; line-height: 1.5em;}

/* introduce and picture */
#intro_pic{width: 100%; height: 820px; float: left; background-size: cover; background-image:url(../frames/6_2.jpg); background-repeat: no-repeat;}

/* detail */
#detail{width: 100%; height: auto; float: left; overflow: hidden; background: #ffffff; margin-top:150px;}
#detail .detail_box{width: 75%; overflow: hidden; height: auto; background: #FFFFFF; margin: 10px auto 10px auto;}
#detail p.h5_title{text-align: center; color: #ccc; font-size: 0.85em; word-spacing: -1px;}
#detail h5{text-align: center; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin: 20px 0 100px 0; color: #555555; font-size: 3em; }
#detail .detail_small_box{width: 47%; float: left; margin-left: 10px; }
#detail .detail_small_box img{width: 100%;}

#detail .detail_small_box p.p_img{text-align: center; color: #888888; font-size: 0.95em; line-height: 1.5em;margin-top: 20px; padding: 230px 0 0 0;}
.detail_bg{background-image:url(../frames/frame_1_s.png); background-repeat: no-repeat; background-position: center 30%; background-size: 30%;}
#detail .detail_small_box p.toShop{text-align: center; font-size: 0.90em; background: #46748b; height: 40px;  line-height: 40px; width: 150px; margin: 0 auto; color: #fff; margin-top: 30px; box-sizing: border-box;}
#detail .detail_small_box p.toShop a{display:block;color: #fff; }
#detail .detail_small_box p.toShop a:hover{display:block;color: #46748B;}
#detail .detail_small_box p.toShop:hover{background: #fff; border: 1px solid #46748b; box-sizing: border-box; color: #46748b; transition: 0.7s;}

/* detail_pic_text */
#detail_pic_text{width: 100%; height: auto; float: left; overflow: hidden; margin-top: 50px; }
#detail_pic_text h3{text-align: center;font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; margin-top: 130px; color: #CCCCCC; font-size: 1em; }
#detail_pic_text h4{text-align: center;font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin-top: 5px; color: #555555; font-size: 3em; }
#detail_pic_text p{text-align: center; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin-top: 10px; font-size: 0.95em; color: #999999; line-height: 1.5em;}


/* detail_pic */
#detail_pic{width: 100%; height: 900px; float: left; overflow: hidden; background-image:url(../frames/5_6.png); margin-top: 100px; }


/* notice */
#notice{float: left; width: 100%; height: auto; margin-top: 100px;}
#notice h5{text-align: center; padding: 50px auto; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin-top: 10px; font-size: 0.95em; color: #46748B; line-height: 1.5em; }
#notice p{text-align: center; padding: 50px auto; font-family: 'Nanum Gothic', sans-serif; word-spacing: -1px; letter-spacing: -1px; margin-top: 10px; font-size: 1em; color: #777777; line-height: 1.5em; }


/* product_list */
#product_list{width: 100%; height: auto; float: left; overflow: hidden; margin-top: 70px; }
#product_list ul{width:55%; height: auto; margin: 0 auto; overflow: hidden; } /* center */
#product_list ul li{float: left; width: 25%; }
#product_list ul li p {text-align: center;  color: #777777; margin-bottom: 20px; font-size: 0.85em; font-family: 'Nanum Gothic', sans-serif;}
#product_list ul li p img{width: 90%; padding-bottom: 20px;} /* resize img */

#product_list h6{text-align: center; font-size: 0.95em; font-weight: normal; margin: 50px auto; width: 150px; height: 40px; background: #888888; color: #fff; font-family: 'Nanum Gothic', sans-serif;}
#product_list a{color: #fff; line-height: 40px; display: block; padding: 0 10px;}


/* footer start */
#foot_sub{float: left; margin-top: 60px; clear: both; width: 100%; height: 260px;  z-index: 900; background: #FFFFFF; overflow: hidden; padding: 100px 0 0 0; }
#foot_sub ul{width: 60%; overflow: hidden; margin: 0 auto;}
#foot_sub ul li{float: left; font-family: 'Nanum Gothic', sans-serif;}
#foot_sub ul li p{font-family: 'Nanum Gothic', sans-serif; font-size: .90em; color: #888888; letter-spacing: -1px;  margin-bottom: 5px;}
#foot_sub li.foot_box{width: 20%; height: 200px;}
#foot_sub li.foot_box img{width: 120px;}
#foot_sub li.foot_box p.foot_box_text{font-size: .75em; font-family: 'Nanum Gothic', sans-serif; color: #888888; margin-top: 3px; word-spacing: -1px; margin-left: 3px;}
#foot_sub ul li p.foot_box_title{font-size: .90em; font-weight: bold;  font-family: 'Nanum Gothic', sans-serif; color: #666666; letter-spacing: -1px; margin-bottom: 10px;}
#foot_sub ul li.foot_box a p{font-size: .85em; font-family: 'Nanum Gothic', sans-serif; color: #888888; word-spacing: -1px;}
#foot_sub ul li.foot_box a p:hover{color: #444444;}
#foot_bottom{width: 100%; height: 60px; margin: 0 auto; overflow: hidden; border-top: 1px solid #cccccc; }
#foot_bottom address{font-style: normal; color: #888888; font-size: .80em; font-family: 'Nanum Gothic', sans-serif; line-height: 60px; text-align: center; margin-left: 10px;}





@media screen and (min-width:1280px) and (max-width:1599px) {
	#section_top{height: 600px; transition: 0.7s; background-size: cover;}
	#introduce h3{margin-top: 70px;}
	#introduce p{ margin-bottom: 70px;}
	#intro_pic{height: 600px; transition: 0.7s; background-size: cover;}
	
	#detail{margin-top:70px;}
	#detail h5{ margin: 20px 0 70px 0;}	
	
	#detail .detail_small_box p.p_img{ padding: 130px 0 0 0; text-align: center; color: #999999; font-size: 0.90em; word-spacing: -1px; letter-spacing: -1px; line-height: 1.5em;margin-top: 20px; }
	.detail_bg{background-position: center 20%; background-size: 40%;}
	#detail_pic{width: 100%; height: 600px; float: left; overflow: hidden;  margin-top: 100px; background-size: cover;}
	#product_list ul{width:80%; height: auto; margin: 0 auto; overflow: hidden; transition:all 0.5s; animation: scale 1s 1;}


	
	
}

@media screen and (min-width:1024px) and (max-width:1279px) {
	#section_top{height: 500px; transition: 0.7s; background-size: cover;}
	#introduce h3{margin-top: 70px;}
	#introduce p{ margin-bottom: 70px; font-size: 0.85em; letter-spacing: -1px; padding: 0 10px;}
	#intro_pic{height: 500px; transition: 0.7s; background-size: cover;}
	
#detail{margin-top:70px;}
	#detail .detail_box{width: 90%; overflow: hidden; height: auto; background: #FFFFFF; margin: 10px auto 10px auto;}
	
	#detail h5{ margin: 20px 0 70px 0;}

	#detail .detail_small_box p.p_img{text-align: center; color: #999999; font-size: 0.85em; word-spacing: -1px; letter-spacing: -1px; line-height: 1.5em;margin-top: 20px; padding: 130px 0 0 0;}
	.detail_bg{background-position: center 20%; background-size: 40%;}
	
	
	#detail .detail_small_box p{font-size: 0.85em; padding: 0 10px; }
	
	#detail_pic{width: 100%; height: 500px; float: left; overflow: hidden;  margin-top: 100px; background-size: cover;}
	#detail_pic_text p{font-size: 0.85em; letter-spacing: -1px; padding: 0 10px;}
	#product_list ul{width:80%; height: auto; margin: 0 auto; overflow: hidden; transition:all 0.5s; animation: scale 1s 1;}
	
	#foot_sub ul{width: 93%;}
	#foot_bottom{width: 100%;}


}

@media screen and (min-width:780px) and (max-width:1023px) {
	#section_top{height: 500px; transition: 0.7s; background-size: cover;}
	#introduce h3{margin-top: 70px; font-size: 0.90em;}
	#introduce h4{font-size: 1em;}
	#introduce p{ margin-bottom: 70px; font-size: 0.85em; letter-spacing: -1px; padding: 0 10px;}
	#intro_pic{height: 500px; transition: 0.7s; background-size: cover;}
	
	#detail{margin-top:70px;}
	#detail .detail_box{width: 90%; overflow: hidden; height: auto; background: #FFFFFF; margin: 10px auto 10px auto;}
	
	#detail h5{ margin: 20px 0 70px 0;}
	#detail .detail_small_box p.p_img{display:none;}
	.detail_bg{background-position: center 25%; background-size: 60%;}
	#detail .detail_small_box p.toShop{text-align: center; font-size: 0.90em; background: #46748b; height: 40px;  line-height: 40px;  margin: 0 auto; color: #fff; margin-top: 55%;}
	
	#detail_pic{width: 100%; height: 500px; float: left; overflow: hidden;  margin-top: 100px; background-size: cover;}
	#detail_pic_text p{font-size: 0.85em; letter-spacing: -1px; padding: 0 10px;}
	#product_list ul{width:90%; height: auto; margin: 0 auto; overflow: hidden; transition:all 0.5s; animation: scale 1s 1;}
	
	#foot_sub ul{width: 93%;}
	#foot_bottom{width: 100%;}
}


@media screen and (min-width:640px) and (max-width:779px) {
	#section_top{height: 350px; transition: 0.7s; background-size: cover;}
	#introduce h3{margin-top: 70px; font-size: 0.90em;}
	#introduce h4{font-size: 2.5em; margin-bottom: 30px;}
	#section #introduce p{ display: none;}
	#intro_pic{height:350px; transition: 0.7s; background-size: cover;}
	
	#detail{margin-top:70px;}
	#detail .detail_box{width: 90%; overflow: hidden; height: auto; background: #FFFFFF; margin: 10px auto 10px auto;}
	
	#detail h5{ margin: 20px 0 70px 0; font-size: 2.5em;}
	#detail .detail_small_box p.p_img{display:none;}
	.detail_bg{background-position: center 25%; background-size: 60%;}
	#detail .detail_small_box p.toShop{text-align: center; font-size: 0.90em; background: #46748b; height: 40px;  line-height: 40px; width: 150px; margin: 0 auto; color: #fff; margin-top: 55%;}
	
	#detail_pic{width: 100%; height: 350px; float: left; overflow: hidden;  margin-top: 100px; background-size: cover;}
	#detail_pic_text h4{font-size: 2.5em;}
	#detail_pic_text p{font-size: 0.85em; letter-spacing: -1px; padding: 0 10px;}
	
	#product_list ul{width:90%; height: auto; margin: 0 auto; overflow: hidden; transition:all 0.5s; animation: scale 1s 1;}
	
	#foot_sub{padding: 20px 0 0 0; height: auto; background: #FFFFFF;}
	#foot_sub ul{width: 90%; margin: 0 auto; transition:all 0.5s; animation: scale 1s 1;}
	#foot_sub li.foot_box{width: 20%; height: 150px;}
	#foot_sub li.foot_box img{width: 100px;}
	#foot_bottom address{font-size: 0.80em; margin: 0;}
}


@media screen and (min-width:480px) and (max-width:639px) {
	#section_top{height: 350px; transition: 0.7s; background-size: cover; background-position: 70%; margin-top: 60px;}
	#introduce h3{margin-top: 40px;}
	#introduce h4{font-size: 2em;}
	#introduce p{ margin-bottom: 40px; font-size: 0.85em; letter-spacing: -1px; padding: 0 10px;}
	#intro_pic{height:320px; transition: 0.7s; background-size: cover;}
	
	#detail{margin-top:40px;}
	#detail .detail_box{width: 95%; overflow: hidden; height: auto; background: #FFFFFF; margin: 10px auto 10px auto;}
	#detail .detail_small_box p{font-size: 0.90em; padding: 0 10px; }
	#detail h5{ margin: 20px 0 70px 0; font-size: 2.5em;}
	#detail .detail_small_box p.p_img{display:none;}
	.detail_bg{background-position: center 25%; background-size: 60%;}
	#detail .detail_small_box p.toShop{text-align: center; font-size: 0.90em; background: #46748b; height: 40px;  line-height: 40px; width: 150px; margin: 0 auto; color: #fff; margin-top: 55%;}
	
	#detail_pic{width: 100%; height: 320px; float: left; overflow: hidden;  margin-top: 40px; background-size: cover;}
	#detail_pic_text h4{font-size: 2em; }
	#detail_pic_text h3{margin-top: 50px; }
	#detail_pic_text p{font-size: 0.90em; letter-spacing: -1px; padding: 0 10px;}
	
	#product_list ul{width:90%; height: auto; margin: 0 auto; overflow: hidden; transition:all 0.5s; animation: scale 1s 1;}
	#product_list ul li{width: 50%;}
	
	#foot_sub{padding: 10px 0 0 0; height: auto; background: #FFFFFF;}
	#foot_sub ul{width: 95%; margin: 0 auto; transition:all 0.5s; animation: scale 1s 1;}
	#foot_sub li{width: 15%; margin-left: 6px;}
	#foot_sub li.foot_box{width: 18%; height: 150px;}
	#foot_sub li.foot_box img{width: 80px;}
	#foot_sub li.foot_box p.foot_box_text{font-size: 0.65em;}
	#foot_sub ul li p.foot_box_title{margin-left: 3px; font-size: 0.80em;}
	#foot_sub ul li.foot_box a p{font-size: 0.80em; margin-left: 5px;}
	#foot_bottom address{font-size: 0.80em; margin: 0; line-height: 20px;  padding: 10px 15px;}
	#foot_bottom{height: auto; font-size: 0.80em;}
	
}

@media screen and (max-width:479px) {
	#section_top{height: 250px; transition: 0.7s; background-size: cover; background-position: 50%; margin-top: 60px;}
	#introduce h3{margin-top: 40px;}
	#introduce h4{font-size: 2em;}
	#introduce p{ margin-bottom: 40px; font-size: 0.80em; padding: 0 10px; word-spacing: -1px; letter-spacing: -1px;}
	#intro_pic{height:230px; transition: 0.7s; background-size: cover;}
	
	#detail{margin-top:40px;}
	#detail .detail_box{width: 95%; overflow: hidden; height: auto; background: #FFFFFF; margin: 10px auto 10px auto;}
	
#detail h5{ margin: 20px 0 70px 0; font-size: 2.5em;}
	#detail .detail_small_box p.p_img{display:none;}
	.detail_bg{background-position: center 25%; background-size: 60%;}
	#detail .detail_small_box p.toShop{text-align: center; font-size: 0.90em; background: #46748b; height: 30px;  line-height: 30px; width: 130px; margin: 0 auto; color: #fff; margin-top: 55%;}
	
	#detail_pic{width: 100%; height: 230px; float: left; overflow: hidden;  margin-top: 40px; background-size: cover; background-position: 40%;}
	#detail_pic_text h4{font-size: 2em; }
	#detail_pic_text h3{margin-top: 50px; }
	#detail_pic_text p{font-size: 0.80em; letter-spacing: -1px; padding: 0 10px;}
	#notice h5{font-size: 1em;}
	#notice p{font-size: 0.95em; lette-spacing: -1px;}
	#product_list ul{width:95%; height: auto; margin: 0 auto; overflow: hidden; transition:all 0.5s; animation: scale 1s 1;}
	#product_list ul li{width: 50%;}
	
	#foot_sub{padding: 10px 0 0 0; height: auto; background: #FFFFFF;}
	#foot_sub ul{width: 95%; margin: 0 auto; transition:all 0.5s; animation: scale 1s 1;}
	#foot_sub li{width: 15%; margin-left: 6px;}
	#foot_sub li.foot_box{width: 18%; height: 150px;}
	#foot_sub li.foot_box img{width: 80px;}
	#foot_sub li.foot_box p.foot_box_text{font-size: 0.65em;}
	#foot_sub ul li p.foot_box_title{margin-left: 3px; font-size: 0.80em;}
	#foot_sub ul li.foot_box a p{font-size: 0.80em; margin-left: 5px;}
	#foot_bottom address{font-size: 0.80em; margin: 0; line-height: 20px;  padding: 10px 15px;}
	#foot_bottom{height: auto;font-size: 0.80em;}


	}