@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@charset "utf-8";
* {margin:0; padding:0;}
li{list-style:none;}
img{vertical-align:middle;}
a{text-decoration:none;}
body {font-family: "Noto Sans KR", sans-serif; background:#fdfaf3;  overflow-x:hidden;}

/* ----------헤더영역---------- */
#header{position:fixed; width:100%; height:80px; border-bottom:3px #dbd5c8 solid; background:#fdfaf3; z-index:9;}
#menu{width:1000px; margin:0 auto;}

#menu h6 {float:left; position:relative; width:146px; padding:29px 0;}
.over{display:none; position:absolute; left:0; top:0; padding:29px 0;}
#menu h6:hover .over{display:block;} 

#menu ul{float:right; width:172px; padding:29px 0; text-align:right;}
#menu li{float:left; width:43px; color:#7b736e;}
#menu li a{font-size:19px;}
#menu li a:hover{color:#377c5f;}



/* ----------퀵메뉴---------- */
#quick { position:fixed; top:0; width:363px; height:100vh; background:#fdfaf3; border-left:3px #dbd5c8 solid; right:-366px; z-index:999; }
.solid {border-top:3px #dbd5c8 solid;}
a {font-size:23px; color:#7b736e;}

.top{width:100%; height:80px; border-bottom:3px #dbd5c8 solid; }
h6 {float:left; padding:29px 37px;} 
.close {float:right; padding:27px 37px; font-size:20px; color:#7b736e;}


.signin{padding:32px 37px 25px; font-size:25px; color:#7b736e;}
.signin a {position:absolute; top:117px; left:100px;}
.mypage{padding:25px 37px 35px; font-size:25px; color:#7b736e;}
.mypage a {position:absolute; top:199px; left:100px;}
.rewards{padding:32px 36px 25px; font-size:23px; color:#7b736e;}
.rewards a {position:absolute; top:302px; left:100px;}
.news{padding:25px 37px 35px; font-size:25px; color:#7b736e;}
.news a {position:absolute; top:383px; left:100px;}

.menu{padding:32px 37px 25px; font-size:25px; color:#7b736e;}
.menu a{position:absolute; top:485px; left:100px;}
.down{position:absolute; top:485px; left:300px; font-size:30px; color:#7b736e;}
.menu1 a{position:absolute; top:557px; left:100px; color:#b9b1a0;}
.menu1 a:hover{color:#272727;}
.menu2 a{position:absolute; top:607px; left:100px; color:#b9b1a0;}
.menu2 a:hover{color:#272727;}
.menu3 a{position:absolute; top:657px; left:100px; color:#b9b1a0;}
.menu3 a:hover{color:#272727;}
.menu4 a{position:absolute; top:707px; left:100px; color:#b9b1a0;}
.menu4 a:hover{color:#272727;}
.menu5 a{position:absolute; top:757px; left:100px; color:#b9b1a0;}
.menu5 a:hover{color:#377c5f;}

.menu_bar{padding-left:50px; padding-top:8px;}



/* ----------본문컨텐츠---------- */
.banner { clear:both; position:relative; width:1000px; height:545px; margin:0 auto;}
.banner img {position:absolute; top:83px; left:-460px;}

#wrap1{position:relative; width:1000px; margin:0 auto; height:60px; border-bottom:1px #dbd5c8 solid;}
.left {float:left; width:146px; padding:29px 0; color:#7b736e;}
.right_list{position: absolute; top:19px; right:5px;}
.right_list li { display:inline-block; margin-left:30px; font-size:16px; font-weight:400;}
.right_list li:hover { font-weight:500; border-bottom:4px solid #644932; line-height:250%; }

#wrap2{ width:1000px; height:2640px; text-align:center; margin:0 auto;}
#wrap2_mobile {display:none;}
#wrap2 ul{float:left; width:1000px; padding:32px 0;}
#wrap2 li{float:left; width:300px;}
.product_name{padding-top:18px;}  

.space {margin-right:5%;}

.close_up {overflow:hidden;}
.close_up img {width:100%; transition:all 0.5s;}
.close_up img:hover {transform:scale(1.15)}



/* ----------푸터영역---------- */
#footer{ width:100%; height:400px; background-color:#13392e;}

.inner{position:relative; width:1000px; margin:0 auto;}
.inner h3 {font-size:16px; margin-bottom:25px; color:#61dba3;}
.inner .ul_left{float:left; width:120px; margin-right:50px; color:#57a081; font-size:14px; line-height:200%; padding-top:70px;}
.inner .ul_left li{width:120px;}
.inner .ul_left:nth-child(2){margin-right:75px;}
.inner .ul_right{position:absolute; top:0px; right:0px; width:105px; color:#57a081; font-size:14px; line-height:220%; padding-top:70px;}

.inner .info p {clear:both;}
.inner .info p {position: absolute; top:285px; left:0px; width:780px; padding-bottom:10px; color:#57a081; font-size:14px; line-height:180%;} 
.inner .icon a {float:right; margin-left:25px; font-size:30px; color:#57a081; margin-top:28px;}

#bg5 {width:100%; padding:35px 0px; background-color:#272727;}
.inner2 {position:relative; width:1000px; margin:0 auto;}
.info_2 {font-size:14px; color:#c7c7c7;}
.icon {position: absolute; top:0; right:0px;}
.icon a {font-size:18px; margin-left:30px;}





/* --------------------타블렛 */
@media screen and (min-width:768px) and (max-width:1024px){

    /* 헤더영역 */
#header{position:fixed; width:100%; height:80px; border-bottom:3px #dbd5c8 solid; background:#fdfaf3; z-index:9;}
#menu{width:768px; margin:0 auto;}

#menu h6 {float:left; position:relative; width:146px; padding:29px 0;}
.over{display:none; position:absolute; left:0; top:0; padding:29px 0;}
#menu h6:hover .over{display:block;} 

#menu ul{float:right; width:172px; padding:29px 0; text-align:right;}
#menu li{float:left; width:43px; color:#7b736e;}
#menu li a{font-size:19px;}
#menu li a:hover{color:#377c5f;}

/* 퀵메뉴 */
#quick { position:fixed; top:0; width:363px; height:100vh; background:#fdfaf3; border-left:3px #dbd5c8 solid; right:-366px; z-index:999; }
.solid {border-top:3px #dbd5c8 solid;}
a {font-size:23px; color:#7b736e;}

.top{width:100%; height:80px; border-bottom:3px #dbd5c8 solid; }
h6 {float:left; padding:29px 37px;} 
.close {float:right; padding:27px 37px; font-size:20px; color:#7b736e;}


.signin{padding:32px 37px 25px; font-size:25px; color:#7b736e;}
.signin a {position:absolute; top:117px; left:100px;}
.mypage{padding:25px 37px 35px; font-size:25px; color:#7b736e;}
.mypage a {position:absolute; top:199px; left:100px;}
.rewards{padding:32px 36px 25px; font-size:23px; color:#7b736e;}
.rewards a {position:absolute; top:302px; left:100px;}
.news{padding:25px 37px 35px; font-size:25px; color:#7b736e;}
.news a {position:absolute; top:383px; left:100px;}

.menu{padding:32px 37px 25px; font-size:25px; color:#7b736e;}
.menu a{position:absolute; left:100px;}
.down{position:absolute; top:485px; left:300px; font-size:30px; color:#7b736e;}
.menu1 a{position:absolute; top:557px; left:100px; color:#b9b1a0;} 
.menu1 a:hover{color:#272727;}
.menu2 a{position:absolute; top:607px; left:100px; color:#b9b1a0;}
.menu2 a:hover{color:#272727;}
.menu3 a{position:absolute; top:657px; left:100px; color:#b9b1a0;}
.menu3 a:hover{color:#272727;}
.menu4 a{position:absolute; top:707px; left:100px; color:#b9b1a0;}
.menu4 a:hover{color:#272727;}
.menu5 a{position:absolute; top:757px; left:100px; color:#b9b1a0;}
.menu5 a:hover{color:#377c5f;}

.menu_bar{padding-left:50px; padding-top:8px;}



/* ----------본문컨텐츠---------- */
.banner { clear:both; position:relative; width:768px; height:447px; margin:0 auto;}
.banner img {position:absolute; top:83px; left:-357px; width:1500px}


#wrap1{position:relative; width:768px; margin:0 auto; height:60px; border-bottom:1px #dbd5c8 solid;}
.left {float:left; width:146px; padding:29px 0; color:#7b736e;}
.right_list{position: absolute; top:19px; right:5px;}
.right_list li { display:inline-block; margin-left:30px; font-size:16px; font-weight:400;}
.right_list li:hover { font-weight:500; border-bottom:4px solid #644932; line-height:250%; }

#wrap2{ width:768px; height:1500px; text-align:center; margin:0 auto;}
#wrap2_mobile {display:none;}
#wrap2 ul{float:left; width:768px; padding:32px 0;}
#wrap2 li{float:left; width:230px;}
.product_name{padding-top:18px;}  

.space {margin-right:5%;}

.close_up {overflow:hidden;}
.close_up img {width:100%; transition:all 0.5s;}
.close_up img:hover {transform:scale(1.15)}


 /* 푸터영역 */
 #footer{ width:100%; height:400px; background-color:#13392e;}
 
 .inner{position:relative; width:768px; margin:0 auto;}
 .inner h3 {font-size:16px; margin-bottom:25px; color:#61dba3;}
 .inner .ul_left{float:left; width:120px; margin-right:50px; color:#57a081; font-size:14px; line-height:200%; padding-top:70px;}
 .inner .ul_left li{width:120px;}
 .inner .ul_left:nth-child(2){margin-right:75px;}
 .inner .ul_right{position:absolute; top:0px; right:0px; width:105px; color:#57a081; font-size:14px; line-height:200%; padding-top:70px;}
 
 .inner .info p {clear:both;}
 .inner .info p {position: absolute; top:285px; left:0px; width:780px; padding-bottom:10px; color:#57a081; font-size:14px;} 
 .inner .icon a {float:right; margin-left:25px; font-size:30px; color:#57a081; margin-top:28px;}
 
 #bg5 {width:100%; padding:35px 0px; background-color:#272727;}
 .inner2 {position:relative; width:768px; margin:0 auto;}
 .info_2 {font-size:14px; color:#c7c7c7;}
 .icon {position: absolute; top:0; right:0px;}
 .icon a {font-size:18px; margin-left:30px;}
 
 
 





    }
    
    
    
    
/* 모바일 */
@media screen and (min-width:320px) and (max-width:768px){
    
       /* 헤더영역 */
#header{position:fixed; width:100%; height:80px; border-bottom:3px #dbd5c8 solid; background:#fdfaf3; z-index:9;}
#menu{width:380px; margin:0 auto;}

#menu h6 {float:left; position:relative; width:146px; padding:29px 0;}
.over{display:none; position:absolute; left:0; top:0; padding:29px 0;}
#menu h6:hover .over{display:block;} 

#menu ul{float:right; width:172px; padding:29px 0; text-align:right;}
#menu li{float:left; width:43px; color:#7b736e;}
#menu li a{font-size:19px;}
#menu li a:hover{color:#377c5f;}

/* 퀵메뉴 */
#quick { position:fixed; top:0; width:363px; height:100vh; background:#fdfaf3; border-left:3px #dbd5c8 solid; right:-366px; z-index:999; }
.solid {border-top:3px #dbd5c8 solid;}
a {font-size:23px; color:#7b736e;}

.top{width:100%; height:80px; border-bottom:3px #dbd5c8 solid; }
h6 {float:left; padding:29px 37px;} 
.close {float:right; padding:27px 37px; font-size:20px; color:#7b736e;}


.signin{padding:32px 37px 25px; font-size:25px; color:#7b736e;}
.signin a {position:absolute; top:117px; left:100px;}
.mypage{padding:25px 37px 35px; font-size:25px; color:#7b736e;}
.mypage a {position:absolute; top:199px; left:100px;}
.rewards{padding:32px 36px 25px; font-size:23px; color:#7b736e;}
.rewards a {position:absolute; top:302px; left:100px;}
.news{padding:25px 37px 35px; font-size:25px; color:#7b736e;}
.news a {position:absolute; top:383px; left:100px;}

.menu{padding:32px 37px 25px; font-size:25px; color:#7b736e;}
.menu a{position:absolute; left:100px;}
.down{position:absolute; top:485px; left:300px; font-size:30px; color:#7b736e;}
.menu1 a{position:absolute; top:557px; left:100px; color:#b9b1a0;} 
.menu1 a:hover{color:#272727;}
.menu2 a{position:absolute; top:607px; left:100px; color:#b9b1a0;}
.menu2 a:hover{color:#272727;}
.menu3 a{position:absolute; top:657px; left:100px; color:#b9b1a0;}
.menu3 a:hover{color:#272727;}
.menu4 a{position:absolute; top:707px; left:100px; color:#b9b1a0;}
.menu4 a:hover{color:#272727;}
.menu5 a{position:absolute; top:757px; left:100px; color:#b9b1a0;}
.menu5 a:hover{color:#377c5f;}

.menu_bar{padding-left:50px; padding-top:8px;}



/* ----------본문컨텐츠---------- */
.banner { clear:both; position:relative; width:380px; height:345px; margin:0 auto;}
.banner img {position:absolute; top:83px; left:-262px; width:1100px;}


#wrap1{position:relative; width:380px; margin:0 auto; height:60px; border-bottom:1px #dbd5c8 solid;}
.left {display:none;}
.right_list{position: absolute; top:19px; left:-10px;}
.right_list li { display:inline-block; margin-left:25px; font-size:14px; font-weight:400;}
.right_list li:hover { font-weight:500; border-bottom:4px solid #644932; line-height:250%; }

#wrap2 {display:none;}
#wrap2_mobile {display:block; width:380px; height:2800px; text-align:center; margin:0 auto;}
#wrap2_mobile ul{float:left; width:380px; padding:32px 0;}
#wrap2_mobile li{float:left; width:180px;}
#wrap2_mobile .product_name{padding-top:18px;}  


#wrap2_mobile .space {margin-right:5%;}

#wrap2_mobile .close_up {overflow:hidden;}
#wrap2_mobile .close_up img {width:100%; transition:all 0.5s;}
#wrap2_mobile .close_up img:hover {transform:scale(1.15)}



/* 푸터영역 */
#footer{ width:100%; height:260px; background-color:#13392e;}

.inner{position:relative; width:380px; margin:0 auto;}
.inner h3 {font-size:16px; margin-bottom:20px; color:#61dba3;}
.inner .ul_left{float:left; width:80px; margin-right:20px; color:#57a081; font-size:9px; line-height:200%; padding-top:70px;}
.inner .ul_left li{width:80px;}
.inner .ul_left:nth-child(2){margin-right:20px;}
.inner .ul_right{position:absolute; top:0px; right:0px; width:80px; color:#57a081; font-size:9px; line-height:200%; }

.inner .info p {display:none;}
.inner .icon a {margin-left:25px; font-size:30px; color:#57a081; margin-top:28px;}

#bg5 {width:100%; padding:35px 0px; background-color:#272727;}
.inner2 {position:relative; width:380px; height:75px; margin:0 auto;}
.info_2 {font-size:14px; color:#c7c7c7;}
.icon {position: absolute; top:50px; right:110px;}
.icon a {font-size:18px; margin-left:30px;}





    }