@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;}


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







/* 로그인 컨텐츠 */
#bg{width:100%; background:url(../images/signin_background.jpg); background-repeat:no-repeat;}
.grid {position:relative; width:1000px; height:700px; margin:0 auto;} /* 그리드 1000px 기준 */
.wrap {position:absolute; top:455px; left:500px;}
.signin_text{padding-top:175px; margin:0 auto; text-align:center;}
.signin_text_m{display:none;}



/* 로그인창 */
.box{width:300px; padding:40px; position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
     background:#fdfaf3; text-align:center;}
.box h1{color:#377c5f;}
.box input[type="text"],.box input[type="password"]{border:0; background:#dbd5c8; display:block; margin:20px auto;
     padding:14px 10px; text-align:center; width:200px; color:#fff; border-radius:24px; outline:none; transition:0.25s;}

.box input[type="submit"]{border:none; background:#377c5f; margin:20 auto; padding:14px 40px; text-align:center;
     border-radius:24px; outline:none; color:#fdfaf3; font-weight:bold; transition:0.25s; cursor:pointer;}
.box input[type="submit"]:hover{background:#57a081;}





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

/* 로그인 컨텐츠 */
#bg{width:100%; background:url(../images/signin_background.jpg); background-repeat:no-repeat;}
.grid {position:relative; width:768px; height:700px; margin:0 auto;} /* 그리드 1000px 기준 */
.wrap {position:absolute; top:455px; left:380px;}
.signin_text{padding-top:175px; margin:0 auto; text-align:center;}
.signin_text_m{display:none;}
.signin_text img{width:768px;}



/* 로그인창 */
.box{width:300px; padding:40px; position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
     background:#fdfaf3; text-align:center;}
.box h1{color:#377c5f;}
.box input[type="text"],.box input[type="password"]{border:0; background:#dbd5c8; display:block; margin:20px auto;
     padding:14px 10px; text-align:center; width:200px; color:#fff; border-radius:24px; outline:none; transition:0.25s;}

.box input[type="submit"]{border:none; background:#377c5f; margin:20 auto; padding:14px 40px; text-align:center;
     border-radius:24px; outline:none; color:#fdfaf3; font-weight:bold; transition:0.25s; cursor:pointer;}
.box input[type="submit"]:hover{background:#57a081;}



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

/* 로그인 컨텐츠 */
#bg{width:100%; background:url(../images/signin_background.jpg); background-repeat:no-repeat;}
.grid {position:relative; width:380px; height:700px; margin:0 auto;} /* 그리드 1000px 기준 */
.wrap {position:absolute; top:455px; left:195px;}
.signin_text{display:none;}
.signin_text_m{display:block; position: absolute; top:145px; left:25px;}




/* 로그인창 */
.box{width:300px; padding:40px; position:absolute; top:48%; left:50%; transform:translate(-50%,-50%);
     background:#fdfaf3; text-align:center;}
.box h1{color:#377c5f;}
.box input[type="text"],.box input[type="password"]{border:0; background:#dbd5c8; display:block; margin:20px auto;
     padding:14px 10px; text-align:center; width:200px; color:#fff; border-radius:24px; outline:none; transition:0.25s;}

.box input[type="submit"]{border:none; background:#377c5f; margin:20 auto; padding:14px 40px; text-align:center;
     border-radius:24px; outline:none; color:#fdfaf3; font-weight:bold; transition:0.25s; cursor:pointer;}
.box input[type="submit"]:hover{background:#57a081;}



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