@charset "utf-8";

/* 공통 */
.mtit-logo {display:inline-block; margin-bottom:2.5rem;}
.mtit {margin-bottom:3rem;}
.mtit-desc {color:#666;font-size:2.2rem;word-break:keep-all;}

/* 메인비쥬얼 */
#mvisual {position:relative;}
#mvisual .swiper-slide {height:100%;}
#mvisual .img-box {}
#mvisual .txt {display:block;width:100%;text-align:right;}
#mvisual .sc-down {position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:1; cursor:pointer;}
#mvisual .pc-txt {display:block;}
#mvisual .mb-txt {display:none;}
#mvisual .swiper-button-next, .swiper-button-prev {opacity:0.7;}

/* 야바다다 대표메뉴 */
#best-menu {padding:11rem 0 15rem 0; background:url(/common/imgs/main/best_menu_bg.png) no-repeat left bottom;}
#best-menu .inner {position:relative;}
#best-menu .txt-box {position:relative; width:42%;}
#best-menu .txt-box::after {display:block;content:'';position:absolute;bottom:-8rem;right:0;width:175px;height:130px;background:url(/common/imgs/main/best_menu_obj.png) no-repeat center center;}
#best-menu .bestmenu-swiper {position:absolute; top:-3rem; left:44%; width:100%;}
#best-menu .bestmenu-swiper .swiper-slide {display:flex; align-items:center; width:60%;}
#best-menu .bestmenu-swiper .swiper-slide-next {opacity:0.4;}
#best-menu .bestmenu-swiper .it-txt-box {margin-left:2rem; flex-shrink:0;}
#best-menu .bestmenu-swiper .it-txt-box .txt1 {display:block;font-size:1.8rem;color:#666;margin-bottom:2rem;line-height:1;}
#best-menu .bestmenu-swiper .it-txt-box .txt2 {display:block;font-size:2.6rem;color:#222;font-weight:800;letter-spacing:-1px;margin-bottom:4rem;line-height:1;}
#best-menu .bestmenu-swiper .it-txt-box .price {display:block;font-size:3rem;color:#222;font-weight:800;}
#best-menu .best-pg-box {margin-top:5rem; line-height:2.5rem;}
#best-menu .best-pg-box > div {float:left;width:auto;margin-right:2rem;font-size:1.6rem;color:#222;font-weight:800;}
#best-menu .best-pg-box .swiper-btn {cursor:pointer;}
#best-menu .best-pg-box .swiper-btn:focus {outline:0;}
#best-menu .best-pg-box .swiper-pagination-current {font-size:2.4rem;color:#2b2874;}

/* 야바다다 잘되는 이유 */
#reason {background:url(/common/imgs/main/reason_bg_all.png) no-repeat center left; background-size:cover; transition:all 0.3s;}
#reason.active_bg01 {background-position:center left;}
#reason.active_bg02 {background-position:center left 50%;}
#reason.active_bg03 {background-position:center right;}
#reason ul li {position:relative;float:left;width:33.333%; text-align:center; padding:15rem 0; transition:all .2s;}
#reason ul li:hover {background:rgba(43,40,116,0.8);}
#reason ul li::after {display:block;content:'';position:absolute;top:0;right:0;width:1px; height:100%; background:#fff; opacity:0.3;}
#reason ul li:last-child::after {display:none;}
#reason ul li .txt {font-size:2.2rem; color:#fff; line-height:1.6; margin-top:5px; word-break:keep-all;}

/* 야바다다 매장안내 */
#store {text-align:center; background:url(/common/imgs/main/store_bg.png) no-repeat bottom center; background-size:contain; padding-bottom:23rem;}
#store .mtit-logo {margin-top:10rem;}
#store .sch-box {width:890px; margin:4rem auto 6rem auto;}
#store .sch-box form {display:flex; justify-content:space-between;}
#store .sch-box select,
#store .sch-box input {border:1px solid #2b2874;font-size:2rem;color:#2b2874;line-height:50px;height:50px;border-radius:30px;min-width:200px;padding:0 4rem 0 2rem;margin:0 5px;}
#store .sch-box input {width:470px;}
#store .sch-box input::placeholder {color:#2b2874;font-weight:500;}
#store .sch-box select {background:#fff url(/common/imgs/main/store_select_ar.png) right 2rem center no-repeat; appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none;}
#store .sch-box select::-ms-expand {display: none;}
#store .sch-box .sch-input-box {position:relative; display:inline-block;}
#store .sch-box .sch-input-box button {position:absolute; top:0; right:2rem; height:50px; border:0; background:0;padding:0 1rem;}
#store .swiper-btn {cursor:pointer; display:inline-block;}
#store .swiper-btn:focus {outline:0;}
#store .store-con {position:relative;}
#store .store-img-box .img-box {max-width:958px; max-height:670px;}
#store .store-txt-box {position:absolute;top:50%;right:0;transform:translateY(-50%);background:#fff;padding:7rem 5.6rem;z-index:2;width:490px;}
#store .store-txt-box .store-name {text-align:center; padding-bottom:3rem; line-height:7rem;}
#store .store-txt-box .store-name .logo {display: inline-block;}
#store .store-txt-box .store-name .name {font-size: 5rem; color: #222; font-weight: 900; letter-spacing: -3px; display: inline-block; margin-left: 1rem; vertical-align: middle;}
#store .store-txt-box .store-info {width:100%;}
#store .store-txt-box .store-info th {margin-right:1rem;font-size:2rem;color:#222;font-weight:500;text-align:left;float:left;padding-bottom:2rem; min-height:5.5rem; width:100%; display:block;}
#store .store-txt-box .store-info th .ic {margin-right:6px;}
#store .store-txt-box .store-info td {font-size:2rem;color:#666;float:left;text-align:left;padding-bottom:2rem; width:100%;}
#store .store-txt-box .store-info td p {display:block; min-height:9rem;}
#store .store-txt-box .btn-box {text-align:left;position: absolute;bottom: 0;left: 0;z-index: 999;} 
#store .store-txt-box .view-btn {float: right;display:inline-block;background:#fff;border:1px solid #2b2874;font-size:2rem;color:#2b2874;line-height:50px;border-radius:30px;min-width:200px;padding:0 2rem;text-align:center; margin-top:3rem;}

#store .store-swiper {max-width:958px; margin:0;}
#store .store-swiper2 .swiper-slide {background:#fff;}

#store .store-prev-btn {background:url(/common/imgs/main/store_prev_on.png) no-repeat 0 0; background-size:100% 100%; width:50px; height:50px; margin-right:5px;}
#store .store-prev-btn.swiper-button-disabled {background-image:url(/common/imgs/main/store_prev_off.png);}
#store .store-next-btn {background:url(/common/imgs/main/store_next_on.png) no-repeat 0 0; background-size:100% 100%; width:50px; height:50px;}
#store .store-next-btn.swiper-button-disabled {background-image:url(/common/imgs/main/store_next_off.png);}


/** media size setting **/
@media ( max-width: 1300px ) {
	
	#mvisual .swiper-slide {height:auto;}
	#mvisual .mv1 .txt {}	
	#mvisual .swiper-button-next, #mvisual .swiper-button-prev {width:70px; height:70px;}
	#mvisual .swiper-button-prev {left:4rem;}
	#mvisual .swiper-button-next {right:4rem;}

	#mvisual .sc-down {width:100px;}
	
	#best-menu {padding:10rem 0;}
	#best-menu .txt-box {width:100%; margin-bottom:5rem;}
	#best-menu .txt-box::after {display:none;}
	#best-menu .txt-box .mtit-desc br {display:none;}
	#best-menu .bestmenu-swiper {position:relative; left:0;top:0; width:106%; margin-left:-3%;}
	#best-menu .bestmenu-swiper .swiper-slide {width:65%;}

	#reason ul li {padding:10rem 2%;}
	#reason ul li .tit {padding:0 2rem;}
	#reason ul li .ic {padding:0 2rem;}
	#reason ul li .txt {height:7rem;}
	
	#store .store-swiper {width:80%;}
	#store .store-txt-box {width:50%;padding:4rem;}
}


@media ( max-width: 980px ) {
	
	.mtit {margin-bottom:2rem;}

	#store .mtit-logo img {width:90%;}
	#store .sch-box {width:100%; margin:3rem auto 5rem auto;}
	#store .sch-box form {display:block}
	#store .sch-box select, #store .sch-box input {margin:1rem 0.5rem;}
	#store .sch-box .sch-input-box button {top:1rem;}	
	#store {background-size:155%; background-position:bottom right;}
	#store .store-txt-box .store-info {margin-bottom:1rem;}
	#store .store-txt-box .store-name img {height:5rem;}
}

@media ( max-width: 768px ) {

	.mtit-desc {font-size:2.2rem;}
	
	#mvisual .sc-down {display:none;}
	#mvisual .pc-txt {display:none;}
	#mvisual .mb-txt {display:block;}	
	#mvisual .swiper-button-next, #mvisual .swiper-button-prev {width:50px; height:50px;}
	#mvisual .swiper-button-prev {left:1rem;}
	#mvisual .swiper-button-next {right:1rem;}

	#best-menu .bestmenu-swiper .it-txt-box .txt2 {font-size:2.2rem; line-height:1.4; word-break:keep-all;}
	#best-menu .bestmenu-swiper .it-txt-box .price {font-size:2.5rem}

	#reason ul li .txt {font-size:1.8rem; height:9rem;}
	
	#store .mtit-logo {margin-top:6rem;}
	#store {padding-bottom:8rem;}
	#store .store-swiper {width:100%;}
	#store .store-swiper2 .swiper-slide {width:100% !important;}
	#store .store-img-box {transform: translateX(-2.5%);}
	#store .store-txt-box {position:relative; transform:translate(2.5%,-30%);width:100%;}
	#store .store-txt-box .store-name {padding-bottom:2rem;}
	#store .store-txt-box .store-name .name {font-size: 4rem;}
	#store .store-txt-box .view-btn {}
	#store .store-txt-box .store-info th,
	#store .store-txt-box .store-info td {width:100%;}
	
}

@media all and (max-width:500px) {
	
	.mtit-desc {font-size:2rem;}

	#best-menu {background:none; padding:6rem 0;}
	#best-menu .mtit-logo img {width:90%;}
	#best-menu .mtit img {width:auto; height:7rem;} 
	#best-menu .bestmenu-swiper {width:103%; margin-left:0;}
	#best-menu .bestmenu-swiper .swiper-slide {width:70%; flex-flow:row wrap;}
	#best-menu .bestmenu-swiper .it-txt-box {margin-top:1rem;}
	#best-menu .bestmenu-swiper .it-txt-box .txt1 {font-size:1.8rem; margin-bottom:1rem;}
	#best-menu .bestmenu-swiper .it-txt-box .txt2 {font-size:2rem; margin-bottom:2.2rem;}
	#best-menu .txt-box {margin-bottom:3rem;}
	
	#reason ul {padding:6rem 0;}
	#reason ul li {float:none; width:100%;padding:0 2% 2rem 2%;}
	#reason ul li:hover {background:none;}
	#reason ul li:last-child {padding-bottom:0;}
	#reason ul li .tit {padding:0 5px; margin-bottom:3rem;}
	#reason ul li .tit img {height:8rem;}
	#reason ul li .ic {padding:0 5px;}
	#reason ul li .ic img {height:16rem;}
	#reason ul li .txt {font-size:1.8rem; word-break:normal; height:auto;}
	#reason ul li .no-mb {display:none;}
	
	#store .mtit img {width:auto; height:3.2rem;} 
	#store .sch-box .sch-input-box {display:block;}
	#store .sch-box select,
	#store .sch-box input {width:100%; margin:0.5rem; font-size:1.9rem;}
	#store .sch-box input {padding-right:5rem;}
	#store .sch-box .sch-input-box button {top:0.5rem;right:0;}
	#store .store-txt-box {padding:2rem;}
	#store .store-txt-box .view-btn {min-width:155px; line-height:48px; font-size:1.8rem;}
	#store .store-prev-btn,
	#store .store-next-btn {width:48px; height:48px}
	#store .store-txt-box .store-info th, 
	#store .store-txt-box .store-info td {padding-bottom:1rem; min-height:4.2rem;}

}