@charset "utf-8";


/* main ======================================================================
============================================================================= */
/* main {
     /* padding-top: 84px; *
     padding-top: 64px;
     position: relative;
     overflow:hidden;
} */
.main-visual {
     position:relative;
     overflow:hidden;
     width:100%;
}
.main-visual-bk {
     position:absolute;
     width:100%;
     bottom:0; 
     height:20px;
     border-radius:60px 60px 0 0;
     display:inline-block;
     /* background-color: #f3f3f5; */
     background-color: #fff;
     z-index:9;
}
.main-visual img {
     width:100%;
}
article {
     position:relative;
     /* top: -10px; */
     z-index: 3;
     /* overflow:hidden; */
} 

/* top 스피드 모양 */
.main-top-speed {
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	display:flex;
	align-items:center;
	justify-content: center;
	font-weight:700;
}
.main-top-speed img {
	width: 50px;
}
.main-top-speed p {
	font-size: 0.8rem;
	padding-right: 3px;
	border-right: 1px solid rgba(0, 0, 0, 0.3);
	padding-left: 3px;
}
.main-top-speed p:last-child {
	border-right: 0;
}

/*  메인 메뉴 기본 */
.main-menu {
     /* background-color: #f3f3f5; */
     /* padding-bottom:20px; */
     padding: 0 10px 10px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}
.main-menu ul {
     display: flex;
     flex-flow: row wrap;
     width: 100%;
     padding-bottom: 5px;
}
.main-menu ul:nth-last-child {
	padding-bottom: 0;
}
.main-menu ul li {
     width: 20%;
     text-align: center;
}
.main-menu ul li dl {
     display: flex;
     flex-direction: column-reverse;
     align-items: center;
    padding-bottom: 5px;
}
.main-menu ul li dl dt {
     font-weight: 900;
     text-align:center;
     /* padding: 2px; */
     /*font-size: 0.8rem; */
     font-size: 0.7rem;
}
.main-menu ul li dl dd {
     width: 100%;
     max-width: 50px;
     border-radius: 43%;
     display:inline-block;
     text-align: center;
     box-sizing: border-box;
     padding: 0 5px;
}
.main-menu ul li dl dd span {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	border-radius: 43%;
	overflow:hidden;
	padding: 3px 3px;
	background-color: rgba(0, 0, 0, 0.04);
	/* background-color: rgba(163, 227, 255, 0.3);
	background-color: rgba(237, 53, 93, 0.1);
	background-color: #fefae0; */
	line-height: 0;
}
.main-menu ul li dl dd img {
     width: 100%;
     margin:0 auto;
    /* background-color: #fff; */
}

/* 세일 */
.main-sale-list {
     display:flex;
     width:100%;
     box-sizing:border-box;
     padding:10px 10px 0 10px !important;
}
.main-sale-list li {
     width:55%;
     box-sizing:border-box;
     padding:6px !important;
}
.main-sale-list li a {
     width:100%;
     border-radius:16px;
     overflow:hidden;
     display:inline-block;
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0,2);
}
.main-sale-list li dl {
     width:100%;
     position:relative;
}
.main-sale-list li dl dt {
     width:100%;
     position:absolute;
     padding-left:26%;
     height:100%;
}
.main-sale-list li dl dt div {
     background-color: rgba(255, 255, 255, 0.95);
     height:100%; 
     display:flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     margin:0 auto;
     border-radius: 60% 0 0 40%;
     padding:10px;
     box-sizing:border-box;
}
.main-sale-list li dl dt div b {
     font-size: 0.9rem;
     display:inline-block;
     text-align:center;
     line-height:1.4;
}
.main-sale-list li dl dt div span img {
     width:26px;
}

.main-sale-list li dl dd {
     width:100%;
     height:100%;
}
.main-sale-list li dl dd img {
     width:100%;
     margin:0 auto;
}
.sale-food-price-before {
     text-decoration: line-through  #a2a1a1;
     color: #a2a1a1;
     font-weight: 900;
     padding-right:3px;
     font-size: 0.8rem;
}
.sale-food-price {
     font-weight: 900;
     font-size: 1rem;
     /* color: #3d7643; */
     color: #d5eed7;
}

/* 세일 2번째 버전 */
.main-sale-box {
	padding-bottom: 0px;
	background-color: rgba(0, 0, 0, 0.05);
}
.launch-item-box {
	padding: 5px 10px;
}
.main-sale-list02 {
     display:flex;
}
.main-sale-list02 li {
     width:60%;
     box-sizing:border-box;
     /* padding:18px !important; */
     padding:6px;
}
.main-sale-list02 li a {
     display:inline-block;
     width:100%;
     height:100%;
     overflow:hidden;
     border-radius:16px;
     line-height:0;
     margin:0;
     padding:0;
}
.main-sale-list02 li dl {
     width:100%;
     position:relative;
     height:100%;
}
.main-sale-list02 li dl dt {
     position:absolute;
     width:100%;
     height:100%;
     top:0; left:0;
     z-index: 1;
     display:inline-block;
}
/*  */
.main-sale-list02 li dl dt p {
	position:absolute;
    top:16px;
    left:16px;
}
.main-sale-list02 li dl dt p img {
	width:50px;
}
.main-sale-list02 li dl dt > div {
	position:absolute;
	bottom:0;
	width:100%;
	line-height:1.6;
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing:border-box;
    padding:8px 26px;
    color:#fff;
}
.main-sale-list02 li dl dt > div b {
    font-size: 1rem;
    text-align:left;
    font-weight: 700;
}    
.main-sale-list02 li dl dt > div span {
	line-height:1.6;
}
.main-sale-list02 li dl dt > div span.food-txt {
	display:inline-block;
	width:100%;
	font-weight: 400;
	font-size:0.8rem;
	line-height:1.6;
}
.main-sale-list02 li dl dd {
	width:100%;
}
.main-sale-list02 li dl dd img {
	width:100%;
}
/* new 메뉴 */
.new-product-wrap a {
	display:inline-block;
    width:100%;
}
.new-product-wrap img {
	width:100%;
}

.new-prod-list {
	display: flex;
}
.new-prod-list li a img {
	width: 100%;
}
.new-prod-box {
	/* padding: 0; */
	padding-top: 25px;
	background-color: rgba(0, 0, 0, 0.05);
	padding-bottom: 0;
}
.new-prod-box > div {
	padding-top: 10px;
}
/* 랭킹 */
.main-rank-box {
	padding-top: 25px;
	padding-bottom: 0;
	background-color: rgba(0, 0, 0, 0.05);
}
.main-rank-list {
	display:flex;
}
.main-rank-list li {
	width:100%;
    box-sizing:border-box;
    padding: 10px 16px !important;
}
.main-rank-list li a {
    display:inline-block;
    width:100%;
    /* height:100%; */
    overflow:hidden;
    border-radius:16px;
    line-height:0;
    margin:0;
    padding:0;
    /* height: 200px; */
    background-color: rgba(0, 0, 0, 0);
}
.main-rank-list li dl {
    width:100%;
    position:relative;
    height:100%;
}
.main-rank-list li dl dt {
    position:absolute;
    width:100%;
    height:100%;
    top:0; left:0;
    z-index: 1;
    display:inline-block;
}
/*  */
.main-rank-list li dl dt p {
	font-size:1.6rem;
	line-height:70px;
	text-align:center;
    color:#fff;
    background-color: #f4a73d;
    width:70px;
    height:70px;
    font-weight:900;
    border-radius:10px 40px 40px 40px;
    position:absolute;
    top:16px;
    left:16px;
}
.main-rank-list li dl dt div {
	position:absolute;
	bottom:0;
	width:100%;
	line-height:1.2;
    background-color: rgba(0, 0, 0, 0.5);
   /*  border-radius:50px 50px 0 0;*/
    box-sizing:border-box;
    padding:10px 16px;
    color:#fff;
    display:flex;
    flex-wrap: wrap;
    line-height: 1.6;
}
.main-rank-list li dl dt div b {
	box-sizing: border-box;
    font-size: 1rem;
    text-align:left;
    font-weight: 700;
    flex-grow: 1;
}    
.main-rank-list li dl dt div span {
	font-weight: 400;
	font-size:0.8rem;
}

.main-rank-list li dl dt div span.food-txt {
	width: 100%;
	box-sizing: border-box;
}
.main-rank-list li dl dd {
    width:100%;
}
.main-rank-list li dl dd img {
    width:100%;
}
/* new 메뉴 */
.new-product-wrap a {
    display:inline-block;
    width:100%;
}



/* 인트로 */
.main-site-wrap {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.main-site-box img {
	width: 100%;
}
.main-site-box {
	padding: 10px;
	text-align: center;
}
.main-site-header > p {
	width: 80%;
	text-align: center;
	max-width: 400px;
	display: inline-block;
}
.main-site-header > p img {
    width:100%;
    margin: 0 auto;
}
.main-site-header > h2 {
	font-size: 1rem;
	padding: 20px 0;
	
}
.main-site-main-box {
	padding-top: 10px !important;
}
.main-site-main-box > div > dl {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 10px;
}
.main-site-main-box > div > dl ul {
	background-color: #f3f3f5;
	border-radius: 6px;
	padding: 10px;
	
}
.main-site-main-box > div > dl > dt {
	padding: 10px;
	font-weight: 600;
	
}
.main-site-main-box > div > dl ul li {
	padding: 5px;
}
.main-site-main-box > div > dl ul li dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main-site-main-box > div > dl ul li dl dd {
	flex-grow: 2;
}
.main-site-main-box > div > dl ul li dl dt {
	min-width: 90px;
	text-align: left;
}
.main-site-btn {
	padding: 15px 5px;
}
.main-site-main-box textarea, 
.main-site-main-box select, 
.main-site-main-box input[type="text"], 
.main-site-main-box input[type="number"] {
	background-color: #fff;
	border-radius: 3px;
	width: 100%;
	box-sizing: border-box;
	border:0;
	padding: 5px;
}
.main-site-btn button {
	background-color: rgba(75, 138, 82, 1);
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box; 
	padding: 10px;
	color: #fff;
}


/* 인트로 두번째 */
body.body-bk {
	background-color: rgba(75,138,82, 0.8); 
	/* background-color: rgba(0, 0, 0, 0.05); */
	/* background: radial-gradient(circle, rgba(75,138,82,1) 0%, rgba(33,73,37,1) 50%, rgba(75,138,82,1) 100%); /* */
	/* background: rgb(68,166,79);
	background: radial-gradient(circle, rgba(68,166,79,1) 0%, rgba(75,138,82,1) 50%, rgba(63,112,68,1) 100%); */
}
.main-site-wrap02 {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
}
.main-site-wrap02 .main-site-box {
	padding: 20px;
	text-align: center;
	border-radius: 30px;
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
.main-site-wrap02 .main-site-box img {
	width: 100%;
}

.main-site-wrap02 .main-site-box .main-site-header > p {
	width: 60%;
	text-align: center;
	max-width: 400px;
	display: inline-block;
	padding-top: 20px;
}
.main-site-wrap02 .main-site-box .main-site-header > p img {
    width:100%;
    margin: 0 auto;
}
.main-site-wrap02 .main-site-box .main-site-header > h2 {
	font-size: 1rem;
	padding: 20px 0;
	font-weight: 600;
	color: rgba(75, 138, 82, 1);
}
.main-site-wrap02 .main-site-box .main-site-main-box {
	padding-top: 0 !important;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	box-shadow: 5px 2px 10px inset rgba(0, 0, 0, 0.2);
}
.main-site-wrap02 .main-site-box .main-site-main-box > div > dl {
	border: 0px solid #e0e0e0;
	border-radius: 10px;
	padding: 10px;
}
.main-site-wrap02 .main-site-box .main-site-main-box > div > dl ul {
	background-color: transparent;
	border-radius: 0;
	padding: 0;
	
}
.main-site-main-box > div > dl > dt {
	padding: 0 10px 10px;
	font-weight: 600;
	font-size: 1rem;
}
.main-site-wrap02 .main-site-box .main-site-main-box > div > dl ul li {
	background-color: #fff;
	margin-top: 5px;
	padding:0;
	border-radius: 5px;
}
.main-site-wrap02 .main-site-box .main-site-main-box > div > dl ul li dl {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
}
.main-site-wrap02 .main-site-box .main-site-main-box > div > dl ul li dl dd {
	flex-grow: 2;
}
.main-site-wrap02 .main-site-box .main-site-main-box > div > dl ul li dl dt {
	min-width: 80px;
	box-sizing: border-box;
	padding: 5px 5px 5px 10px;
	text-align: left;
	background-color: rgba(75, 138, 82, 0.8);
	color: #fff;
	height:32px; 
	line-height: 22px;
	border-radius: 5px;
}
.main-site-wrap02 .main-site-box .main-site-btn {
	padding: 15px 5px;
}
.main-site-wrap02 .main-site-box .main-site-main-box textarea, 
.main-site-wrap02 .main-site-box .main-site-main-box select, 
.main-site-wrap02 .main-site-box .main-site-main-box input[type="text"], 
.main-site-wrap02 .main-site-box .main-site-main-box input[type="number"] {
	background-color: #fff;
	border-radius: 3px;
	width: 100%;
	box-sizing: border-box;
	border:0;
	padding: 5px;
}
.main-site-wrap02 .main-site-box .main-site-btn button {
	border:1px solid rgba(75, 138, 82, 1);
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box; 
	padding: 10px;
	/* color: rgba(75, 138, 82, 1); */
	color: #252525;
	background-color: rgba(255, 255, 255, 0.3);
	font-weight: 900;
}
/* 로그인 페이지  ============================================ */
.login-wrap {
	width: 100%;
	height: 100Vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px;
}
.login-box-header {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 20px 20px 2px 2px;
	text-align: center;
	padding: 20px 15px;
	box-sizing: border-box;
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
	position: relative;
}	
.login-box-header button {
	position: absolute;
	top: -30px;
	right: 0;
	font-size: 0.8rem;
	width: 22px;
	height: 22px;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	padding: 2px 0 0;
	font-weight: 700;
	box-shadow: 5px 2px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.login-box-main {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 2px 2px 20px 20px;
	margin-top: 10px;
	padding: 20px;
	box-shadow: 5px 2px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.login-box-main ul li {
	padding: 5px 10px;
}
.login-box-main ul li dl {
	display: flex;
	background-color: #fff;
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	padding: 5px;
	box-shadow: 1px 1px 5px inset rgba(0, 0, 0, 0.2);
}
.login-box-main ul li dl dt {
	width: 40px;
	font-size: 1.1rem;
	line-height: 1;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 6px 0 0;
	text-align: center;
	color: rgba(75, 138, 82, 1);
}
.login-box-main ul li dl dd {
	position: relative;
	flex-grow: 2;
}
.login-box-main textarea, 
.login-box-main select, 
.login-box-main input {
	background-color: #fff;
	border-radius: 5px;
	width: 100%;
	box-sizing: border-box;
	border:0;
	padding: 5px;
}
.login-box-main ul li dl dd button {
	position:absolute;
	top: 6px;
	right: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: rgba(75, 138, 82, 0.7);
	background-color: rgba(239, 163, 18, 0.7);
	color: #fff;
	padding: 2px 0 0;
	text-align: center;
	box-sizing: border-box;
	font-size: 0.7rem;
}
.login-box-main ul li div button {
	width: 100%;
	padding: 10px;
	text-align: center;
	/* background-color: rgba(239, 163, 18, 1); */
	background-color: rgba(75, 138, 82, 0.8);
	color: #fff;
	border-radius: 5px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	font-weight: 600;
}
.warning-box {
	font-size: 0.8rem;
	/* color: rgba(203, 5, 57, 0.8); */
	padding: 10px;
	line-height: 1.6;
	
}
.warning-box p {
	border: 1px solid rgba(203, 5, 57, 0.2);
	padding: 5px;
	border-radius: 5px;
}
.warning-box span {
	color: rgba(203, 5, 57, 1);
	display: inline-block;
}

/* 메뉴 검색 */
.main-search {
	padding: 15px 16px 10px 16px;
}
.main-search > div {
	padding: 15px; 
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08);
	border-radius: 5px;
}
.main-search > div > div {
	display: flex;
	/* background-color: rgba(0, 0, 0, 0.05); */
	background-color: rgba(75, 138, 82, 1);
	/* border: 1px solid rgba(75, 138, 82, 1); */
	align-items: center;
	border-radius: 30px 30px 30px 5px;
	/* box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15); */
}
.main-search h2 {
	font-size: 0.8rem;
	padding: 10px;
	/* background-color: rgba(75, 138, 82, 0.9); */
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 10px 10px 10px 15px;
	color: #fff;
	height: 40px;
}
.main-search > div > div div {
	flex-grow: 2;
}
.main-search > div > div div {
	display: flex;
	background-color: #f3f3f5;
	border-radius: 30px 30px 30px 0;
}
.main-search > div > div div input {
	flex-grow: 2;
	border: 0;
	padding: 10px;
	background-color: #f3f3f5;
	border-radius: 30px 0 0 0;
}
.main-search > div > div div input::placeholder {
	color: rgba(0, 0, 0, 0.4);
	font-size: 0.8rem;
}
.main-search > div > div div button {
	padding: 10px;
	border-radius: 30px;
	width: 40px;
	height: 40px;
	background-color: #f3f3f5;
	border-radius: 30px;
}
.main-search > div > div div button i {
	/* color: #fff; */
	font-size: 1rem;
}
.main-search + section h2 {
	text-align: center;
}