/*	
	사용폰트
	font-family: 'Nanum Gothic', sans-serif;
	font-family: 'Noto Sans KR', sans-serif;
*/

@font-face {
    font-family: 'ELAND_Choice_B';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Choice_B.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'ELAND_Choice_M';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts-20-12@1.0/ELAND_Choice_M.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/*섹션공통*/
.contents> section {margin-top: 60px;}
.contents, .contents a{font-family: 'Noto Sans KR', sans-serif;}

/*메인비주얼*/
.mv {background:#d3f09c; padding-top: 210px; margin-top: 0 !important;}
.mv .swiper-wrapper {height: auto; }
.mv a{ height:535px; display:block;}
.mv .mv1, .mv .mv3, .mv .mv2{background: url(../img/mv.png) no-repeat 25% 50%, linear-gradient(
-180deg, #fff, transparent);}

.mv .mv_title { font-weight: 700; color: #f46700; float: right; height:100%; padding-top:50px;padding-right:8.104167vw; background: linear-gradient(-112deg, #fff, transparent); max-width: 890px;padding-left: 10vw;/*가독성을 높이기 위해 임의로 준 값*/font-size: 60px;}
.mv .mv_title h2{ text-decoration: none; font-size: 60px; color:#232323; display: block; line-height:1.1; margin-top: 18px; } 
.mv .mv_title h2 span{ color:#4e4f13; font-size: 28px;  text-decoration: underline; text-underline-position: under; font-weight: 600;}
.mv .mv_title p{ margin-top: 12px; color:#232323;  font-size: 28px; }
.mv .swiper-pagination {left:-26%; bottom:50px;}
.mv .swiper-pagination-bullet{width:50px; height: 5px;  background:#fff; opacity:1; border-radius:0;}
.mv .swiper-pagination-bullet-active{background:#000;}
/*타이틀박스*/
.title_box{
	background:rgba(137,176,63,1); color:#fff;
	font-size:15px;
	padding: 57px 30px 0 30px;
	line-height:1.6;
	}
.title_box h2{
	font-weight: 700; font-size: 30px; line-height: 1.25; margin-bottom: 28px;}
.title_box h2:after{
	content:""; display: block; 
	width: 40px; height: 4px; background:#fff; 
	margin-top:30px; 
}
.title_box p{letter-spacing: -0.06em; margin-bottom: 18px; font-weight: 500;}

/*그레이 박스*/
.gray_box{border-bottom:6px solid #2e2e2e;background:#fafafa; position: relative;}
.gray_box:hover {border-bottom:6px solid #89b03f;}
.gray_box img{width:100%;}
.gray_box .text_box{
	font-size:24px; font-weight: 700; color: #2e2e2e; padding: 26px 30px 28px 30px;
}
.gray_box .text_box h3{font-size: 24px; line-height: 1.5; padding-bottom: 5px;}
.gray_box .text_box span{font-size: 16px; font-weight: 500;   }

/*흰색 버튼 공통*/
.white_btn{
	display: block; width: 170px; height: 60px; line-height:56px; border: 2px solid #fff; text-align:center; color: #fff; 
	}
.white_btn:hover{
	background:#fff; color:#89b03f; font-weight: 700;
	}
/*더보기 버튼*/
.viewmore {position: absolute; bottom:28px;font-size: 13px; background:url(../img/viewmore.png)no-repeat; padding-left: 26px; height: 21px; display: block; line-height: 21px;}

/*광고 배너*/
.ab_banner{width: calc(100% - 10px); text-align:center;  margin-top:50px; position:relative; height: 260px; display: flex;}
.ab_banner a{float: left;width: calc(50% - 10px); position: relative;font-size: 30px;display: inline-block; font-weight:100;}
.ab_banner a:first-child{ background:url(../img/adbanner1.jpg)no-repeat center/ cover;  height:100%; margin-bottom:20px;}
.ab_banner a:last-child{ background:url(../img/adbanner3.jpg)no-repeat center/ cover;  height:100%; margin-left: 10px;}
.ab_banner a div{text-align: left;padding: 20px; color:#fff; background: rgba(0,0,0,.3); position: absolute; bottom:0;  width:100%; font-size:14px; font-weight:600;}
.ab_banner a div p{font-size:20px;  font-weight:200; padding: 10px 0;}
.ab_banner img{width:100%;}
.ab_banner a span{font-size: 18px; font-family: 'AppleSDGothicNeoM00'; color:#fff;}
.ab_banner i{font-size:18px;font-family: 'AppleSDGothicNeoL00';;top:0;right:0;position: absolute; line-height:82px;}

/*뉴스*/
.news .inner{width: calc(100% - 20px);}
.news a{
	height: 528px;
	display: block;
	float: left; 
	margin-right: 20px; 
	width: calc(50% - 20px / 2);
	    /*
		width: 49.15254237288136%; 계산방식 580px;시안 너비/ 우리엄마의 넓이 1180*(퍼센테이지100%곱하기)100 	
		margin-right:1.694‬;
		*/
	
	}

.news a:last-of-type {margin-right: 0; }
.news .text_box{
	background:#fafafa; font-size:24px; font-weight: 700; color: #2e2e2e; padding: 26px 30px 28px 30px;
}

/*프렌차이즈*/
.franchise.inner{width: calc(100% - 20px);}
.franchise a{display:block;}
.franchise .title_box{background:url(../img/promotion.jpg)no-repeat; color: #000; position: relative;}
.franchise .title_box > div{position: absolute; bottom: 0;}
.franchise .title_box h2{margin-bottom: 15px;}
.franchise .title_box h2:after {background:#000; margin-top: 15px;}
.franchise .title_box, .franchise a{
	float:left; 
	width:calc(33.333333333% - 40px / 3); margin-right:20px; height:445px;
}
.franchise a:last-child{margin-right:0;}



.franchise .gray_box .text_box{ 
	 padding: 26px 20px 0px 20px;}
.franchise .gray_box .text_box h3{}

/*브랜드*/
.brand{background:url(../img/background.jpg)no-repeat center/ cover fixed; }
.brand .title_box{background:rgba(137,176,63,.85);height:606px; width:calc(33.333333333% - 40px / 3); padding-top: 87px;}
.brand .white_btn{margin-top: 60px;}

/*식재료 이야기*/
.food {height: 454px;}
.food .inner{height: 100%;}
.food .food_img, .food .title_box{height:100%; float:left;}


.food .food_img{ width:calc(100% - (33.333333333% - 40px / 3)); background:url(../img/membership.jpg)no-repeat; text-indent:-9999999999999px;}
.food .title_box{ width:calc(33.333333333% - 40px / 3);color: #2e2e2e; display:block;}
.food .title_box h2:after{background:#2e2e2e;} 
.food .title_box p{margin-bottom: 20px;}
.food .title_box span{TEXT-TRANSFORM: LOWERCASE;}
.food .title_box .viewmore{padding-top:0; TEXT-TRANSFORM: capitalize;}

/*신규매장*/
.store {padding-top: 40px;}
.store h2{font-weight:900; font-size: 24px; color: #2e2e2e; margin-bottom: 40px;}
.store h2:after{content:""; display: inline-block; width: calc(100% - 195px);/*width:1076px;*/ height: 13px; background:#2e2e2e; margin-left: 21px;}
.store_list{height:auto; margin-top: 40px;}

/*
.store_list li{
	float:left;
	width:calc(33.333333333% - 40px / 3); margin-right:20px;  border: 0px solid red;
}
.store_list li:last-child {margin-right:0;}
*/

.store_list li a {display:block; position:relative;}
.store_list li img{width: 100%; border: 1px solid;}
.store_list li a .tag{position:absolute; top:0; left:0; font-size:15px; font-weight:600;}
.store_list li a .tag i{ width:45px; height:42px; background: #fff; text-align: center; display: block;     padding: 13px 0;}
.store_list li a .tag i:first-child{background:#89b03f; color:#fff;}
.store_list li a .tag i:nth-child(2){color:#89b03f; border: 1px solid #89b03f;}
.store_list li a .tag i:last-child{border: 1px solid #89b03f;}

.store_list li .txt{width:100%;}
.store_list li p{color:#fff; font-weight:700; font-size: 15px; height: 60px; line-height: 60px ; text-align:center;  position: absolute; left:0; bottom:0; width:100%;}

.store_list li a:hover p:first-child{background: rgba(0,0,0,.6);bottom: 120px; height: 120px; transform: translate(0, -120px);}
.store_list li p img{width:auto; display:none;}
.store_list li a:hover p:first-child{transform: translate(0, 0); transition: all .5s;}
.store_list li a:hover p:first-child i{text-decoration: line-through; font-weight: 300;}
.store_list li p:nth-child(2){border-right: 1px solid #fff;width: 50%;left: 0;bottom: 60px; background:#000; position:relative;}
.store_list li p:nth-child(3){width: 50%; left: 50%; bottom: 60px;background: #000;
 position: absolute; border-left: 1px solid #fff; }
.store_list li p:nth-child(4){background: #89b03f url(../img/arrow.png)no-repeat calc(100% - 27px ) center;}
.store_list li a:hover p{}

.beauty{position:relative; overflow: hidden; display: block; text-align:center;  width: 100%;margin-bottom: 30px;}
.beauty li{float:left; width: 16.666666666%;}
.beauty li:last-child{position:initial;}
.cosmatic > a{height:40px; background:#fff; border:1px solid #89b03f; line-height:40px; display: inline-block;}

/*탭*/
#tabs_wrap .beauty{position:relative;}
#tabs_wrap .beautyl li{display:inline-block;}
#tabs_wrap .beauty li.on{background:#fff;}
#tabs_wrap .beauty li a{display:block;}


.tabs_contents{position:relative;   width: 100%;}
.tabs_contents > .store_list_wrap{ /*position:absolute; */ width:100%; height: fit-content;}

/*큰 테블릿 혹은 작은 노트북 1200px  */
@media screen and (max-width: 1200px){
	.gray_box .text_box h3{font-size:2vw;}
	
	.franchise .title_box , .franchise a { height: calc(24.25vw + 164px);}
	/*
	230(전체사진 높이)+60(글씨 높이)=290 / 1200 * 100 =
	‭24.1666666666666vw +( 455px(박스전체 높이) - 291px(전체 사진 높이 + 글씨 높이)  ) = 164px
	*/
	
	.news a{height: calc(39.83333333333333vw + 99px);}
	/*358px(이미지 전체 높이)+ 72px (글씨 높이) / 1200*100 */
	
	/*브랜드*/
	.brand .title_box{width:470px;}
	
	
	/*식재료이야기*/
	.food .title_box{padding: 30px 30px 0 30px;}
	.food .title_box h2{font-size:27px; margin-bottom: 20px;}
	.food .title_box p br{display:none;}
	.food .title_box span {font-size: 13px;}
	.food .title_box .viewmore{font-size: 15px;}
	.store .inner{width: calc(100% - 20px);}

}
	
	
/*테블릿*/
@media screen and (max-width: 960px){
	
	/*메인비주얼*/
	.mv{padding-top:120px;}
	.mv a{height:307px;}
	.mv .mv1{ background-size:300px;}
	
	.mv .mv_title{font-size: 25px; padding-right:14.89583333333333vw;/*143/ 960*100=14.89583333333333 */}
	.mv .mv_title h2{ font-size: 30px;}
	.mv .mv_title h2 span {font-size: 15px; margin-top:8px;}
	.mv .mv_title p{margin-top:11px; font-size:15px;}
	
	
	.mv .swiper-pagination {text-align:center; bottom:30px;}
	
	/*회색박스*/
	.gray_box .text_box{padding: 18px 18px 0;}
	.gray_box .text_box h3{font-size: 18px;}
	
	/*타이틀 박스 공통*/
	.title_box{padding: 20px 19px 0 19px}
	.title_box h2 {font-size: 26px;}
	
	
	/*프랜차이즈*/
	.franchise .title_box {background: url(../img/promotion.jpg)no-repeat 50% 0%; padding: 0;}
	.franchise .gray_box .text_box h3 br{display:none;}
	.franchise .inner{width: calc(100% - 20px);}
	.franchise .title_box > div{width: 100%; padding-left: 19px; background: linear-gradient(0deg, #fff, transparent);}

	.food .food_img{background-position:center; width:calc(100% - 310px);}
	.food .title_box{width:310px;}
	/*신규매장*/
	.store{padding:0;}
}



/*소형 테블렛*/
@media screen and (max-width: 768px){
	
	
	.mv .mv1{background-position: 5% 0%; /*백그라운드 이미지가 잘보이기 위해 임의로 삽입*/}
	.mv .mv_title{padding-right: 5.8125vw;font-size: 35px;}
	/*타이틀 박스*/
	
	
	/*회색박스 공통*/
	.gray_box .text_box h3 br{display:none;}
	.gray_box .text_box h3{font-size: 16px;}
	.viewmore{font-size: 15px;}
	/*뉴스*/
	.news a{height: calc(29vw + 190px);}
	
	/*프랜차이즈*/
	.franchise .title_box{float:none; width:calc(100% + 20px); margin-left:-10px; height:480px;}
	.franchise a{width:calc(50% - 20px / 2); margin-top:-146px;	height: calc(38vw + 129px);}
	.franchise .title_box {background: url(../img/promotion.jpg)no-repeat 0%;}
	.franchise .title_box > div{top: 0; background: linear-gradient(270deg, #e4e7d1, transparent);left: 50%;width: 50%; padding-top: 214px;}
	/*브랜드*/
	.brand{background:url(../img/background.png)no-repeat 80% 0/ contain ,url(../img/background2.jpg)no-repeat center/ cover fixed; }
	.brand .inner{width: calc(100% - 20px); padding: 34px 0;}
	.brand .title_box{width:100%; max-width:540; height:494px; margin:0 auto; padding-top: 65px;}
	.brand .white_btn {margin-top: 30px;}
	/*식재료 이야기*/
	.food {height:auto;}
	.food .food_img, .food .title_box {float: none; width:100%;}
	.food .inner {width: calc(100% - 20px);}
	.food .food_img{height: 55vw; background-size:cover; min-height:230px;}
	.food .title_box{height:auto;}
	.food .gray_box{padding-bottom: 20px;}
	.food .viewmore{position:static; bottom:auto; margin-top: 10px;}
	/*신규매장*/
	.beauty li{width:33.33333%; font-size: 15px;}
	/*.store_list li{ width:calc(50% - 20px / 2); }
	.store_list li:nth-child(2){margin-right:0;}
	.store_list li:last-child{display:none;} */
	
	.store_list li p{height:60px; font-size:13px; line-height:60px; background-position: calc(100% - 20px )center;}
	.store_list li a:hover p{background-position:calc(100% - 20px );}
	
	
}




/*모바일*/
@media screen and (max-width: 480px){
	/*섹션 공통*/
	.contents > section{margin-top:40px;}
	.contents > .store{margin-top:50px;}
	.gnb .main_menu_m li{padding: 0 4.166vw;}
	
	.mv{padding-top: 110px;}
	.mv a{height: 66.66666666666667vw; min-height:260px; background-position:-210px -50px;}
	.mv .mv1{ background-size: auto 100%; background-position: 50% 0%; }
	.mv .mv_title{width:100%;font-size: 30px; padding-top: 69px;}
	.mv .mv_title h2{font-size: 40px;}
	.mv .mv_title h2 span{font-size: 5.416666667vw;margin-top:12px;} /*50px vw로 변환*/
	.mv .mv_title p{margin-top:8px; font-size: 15px;}
	
	.mv .swiper-pagination {text-align:right; padding-right:14px; }
	
	/*더 보기 버튼*/
	.viewmore {position: static; bottom: auto;margin-top: 15px;}
	/*광고판*/
	.ab_banner{display: inline-table;}
	.ab_banner, .ab_banner a{width:100%;}
	.ab_banner a:last-child{margin-left: 0;}
	/*뉴스*/
	.news .inner{width: calc(100% - 36px);}
	.news a{float:none; margin-right:0; width: 100%; margin-bottom:20px; height:auto;}
	.news a:last-of-type {margin-bottom: 0; }
	
	/*프렌차이즈*/
	.franchise .inner{width: calc(100% - 36px);}
	.franchise .title_box{width:calc(100% + 36px); margin-left:-18px;}
	.franchise a{ float:none; width:100%; height: auto;}
	.franchise a:last-child{margin-top:20px;}
	
	/*회색박스 공통*/
	.gray_box .text_box h3{height:auto; margin-bottom: 20px;}
	.gray_box{padding-bottom:20px;}
	/*기존에 따로 가졌던 height값을 상실하고 안에 있는 자식요소들(콘텐츠)이 만들어내는 높이값을 가지게 함*/
	
	/*타이틀 박스 공통*/
	.title_box h2{font-size: 5.66666vw;}
	
	/*식재료 이야기*/
	.food .inner {width:calc(100% - 36px);}
	.food .title_box{padding-top: 28px;}
	
	/*신규매장*/
	.store .inner {width: calc(100% - 20px);}
	.store_list_wrap{overflow:scroll; width: calc(100% + 10px);} /*overflow:auto;}
	.store_list{width:170%;}
	*/
	
	
}
@media screen and (max-width: 360px){
	.mv .mv_title{font-size: 20px; padding-top: 45px;}
	.mv .mv_title h2 {font-size: 30px;}
	
	.franchise .title_box > div{ padding-left: 0;}
}