@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; overflow-x:hidden; background:#f0ece0;}







/* 헤더영역 */
#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; 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;}



/* 메인 */
#bg{clear:both; width:100%; height:743px; background:url(../images/background_logo_opacity.jpg); background-repeat:no-repeat;}
#main{width:1000px; height:743px; margin:0 auto;}
.left{float:left; width:481px; text-align:right; padding-top:160px;}
.right{float:left; padding-top:160px; padding-left:39px;}

#search_box{position:absolute; top:360px; background:#fff; width:458px; height:30px; 
    border-radius:40px; border-style:solid; border-color:#dbd5c8; padding:10px;}
.search_btn{float:right; color:#dbd5c8; width:30px; height:30px;}
.search_txt{float:left; border:none; background:none; outline:none; 
    padding:0px; color:a09c92; font-size:16px; line-height:33px; padding-left:10px; width:240px;}

.card{clear:both; padding-top:198px;}
.card span{padding-right:34px;}


/* 이벤트 배너 */
.eventb { clear:both; position:relative; width:1000px; height:462px; margin:0 auto;}
.eventb img {position:absolute; top:0px; left:-460px;}  /* left수치 수정하기!!!!!! */



/* 컨텐츠1(케이크) */
#bg3 {width:100%; height:879px; background-color:#57a081;}
#contents1 {width:1000px; margin:0 auto; padding-top:80px;} 
p {color:#fff; font-size:16px; line-height:25px; padding-top:40px;}
.button{padding-top:36px;}
ul{width:1000px; margin:0 auto; padding-top:42px;}
li{float:left; position:relative; }
.over1{ display:none; position:absolute; left:0; top:0;}
#contents1 li:hover .over1{display:block;}

.space1{margin-right:48px;}
.space2{margin-right:48px;} 



/* 컨텐츠2(커피) */
#bg4 {width:100%; height:553px; background:url(../images/contents_banner.jpg); background-repeat:no-repeat;}
#contents2 {width:1000px; margin:0 auto; padding-top:80px;}
.c2_txt_p {display:block;}
.c2_txt_m {display:none;}
.p2 {color:#45352f; font-size:16px; line-height:25px; padding-top:40px;}



/* 푸터영역 */
#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:200%; padding-top:70px;}

.inner .info p {clear:both;}
.inner .info p {position: absolute; top:245px; 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: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;}



/* 메인 */
#bg{clear:both; width:100%; height:650px;}
#main{position: relative; width:768px; height:650px; margin:0 auto;}
.left{float:left; width:384px; text-align:right; padding-top:0px;}
.left img{float:left; width:384px; height:401px; padding-top:160px;}
.right{position: absolute; top:0px; right:0px;}
.right img{width:310px;}
.card{clear:both; padding-top:186px;}
.card img{width:153px;}


#search_box{position:absolute; top:315px; background:#fff; width:323px; height:30px; 
    border-radius:40px; border-style:solid; border-color:#dbd5c8; padding:10px;}
.search_btn{float:right; color:#dbd5c8; width:30px; height:30px;}
.search_txt{float:left; border:none; background:none; outline:none; 
    padding:0px; color:a09c92; font-size:16px; line-height:33px; padding-left:10px; width:240px;}



/* 이벤트 배너 */
.eventb { clear:both; position:relative; width:768px; height:462px; margin:0 auto;}
.eventb img {position:absolute; top:0px; left:-460px;}  /* left수치 수정하기!!!!!! */



/* 컨텐츠1(케이크) */
#bg3 {width:100%; height:775px; background-color:#57a081;}
#contents1 {width:768px; margin:0 auto; padding-top:80px;} 
p {color:#fff; font-size:16px; line-height:25px; padding-top:40px;}
.button{padding-top:36px;}
ul{width:768px; margin:0 auto; padding-top:42px;}
li{float:left; position:relative; }
#contents1 li img{width:222px;}
.over1{ display:none; position:absolute; left:0; top:0;}
#contents1 li:hover .over1{display:block;}

.space1{margin-right:48px;}
.space2{margin-right:48px;} 



/* 컨텐츠2(커피) */
#bg4 {width:100%; height:553px; background:url(../images/contents_banner.jpg); background-repeat:no-repeat;}
#contents2 {width:768px; margin:0 auto; padding-top:80px;}
.p2 {color:#45352f; font-size:16px; line-height:25px; padding-top:40px;}



/* 푸터영역 */
#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:245px; 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;}



/* 메인 */
#bg{clear:both; width:100%; height:900px;}
#main{position: relative; width:380px; height:650px; margin:0 auto;}
.left{float:left; width:384px; text-align:right; padding-top:250px;}
.left img{float:left; width:384px; height:401px; padding-top:160px;}
.right{position: absolute; top:0px; right:0px;}
.right img{width:380px;}
.card{display:none;}

#search_box{position:absolute; top:290px; background:#fff; width:360px; height:30px; 
    border-radius:40px; border-style:solid; border-color:#dbd5c8; padding:10px;}
.search_btn{float:right; color:#dbd5c8; width:30px; height:30px;}
.search_txt{float:left; border:none; background:none; outline:none; 
    padding:0px; color:a09c92; font-size:16px; line-height:33px; padding-left:10px; width:240px;}



/* 이벤트 배너 */
.eventb {display:none;}



/* 컨텐츠1(케이크) */
#bg3 {width:100%; height:720px; background-color:#57a081;}
#contents1 {width:380px; margin:0 auto; padding-top:80px;} 
p {color:#fff; font-size:16px; line-height:25px; padding-top:40px;}
.button{padding-top:36px;}
ul{width:380px; margin:0 auto; padding-top:42px;}
li{float:left; position:relative; }
#contents1 li img{width:180px;}
.over1{ display:none; position:absolute; left:0; top:0;}
#contents1 li:hover .over1{display:block;}

.space1{margin-right:20px;}
.space2{margin-right:0px;} 
.space3 {display:none;}



/* 컨텐츠2(커피) */
#bg4 {width:100%; height:420px;  background:#f0ece0;}
#contents2 {width:380px; margin:0 auto; padding-top:80px;}
.c2_txt_p {display:none;}
.c2_txt_m {display:block;}
.p2 {color:#45352f; font-size:16px; line-height:25px; padding-top:40px;}



/* 푸터영역 */
#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;}





    }