@charset "utf-8";

/* ======================================================
   .visual 
=========================================================*/
.visual{position:relative; width:calc(100% + 6vw); margin-left:-3vw}
.visual .item a {display:block}
.visual .item img {width:100%}
.visual .all-view {display:flex; align-items:center; gap:2.4vw; position:absolute; right:3vw; bottom:2vw; background:rgba(255,255,255,0.3); height:4vw; padding:0.8vw 2vw 0.8vw 1.6vw; border-radius:2vw; box-sizing:border-box; z-index:1}
.visual .all-view .label {font-size:2vw; font-weight: 500; color:#000; letter-spacing:-0.03em; line-height:1}
.visual .all-view .count {font-size:2vw; color:#000; line-height:1}
.visual .all-view .count .swiper-pagination {position:static!important; width:auto!important; left:auto!important; bottom:auto!important; margin:0!important; color:#000; font-size:2vw}
.visual.bdrd {padding-top:0}

@media only screen and (min-width:999px) {
	.visual{width:calc(100% + 60px); margin-left:-30px}
	.visual .all-view{right:30px; bottom:20px; gap:24px; height:40px; padding:8px 20px 8px 16px; border-radius:20px}
	.visual .all-view .label{font-size:20px}
	.visual .all-view .count{font-size:20px}
	.visual .all-view .count .swiper-pagination{font-size:20px}
}

@media only screen and (max-width:500px) {
	.visual{width:calc(100% + 30px); margin-left:-15px}
	.visual.bdrd{padding-top:0}
	.visual .all-view{right:15px; bottom:10px; gap:12px; height:20px; padding:4px 10px 4px 8px; border-radius:10px}
	.visual .all-view .label{font-size:10px}
	.visual .all-view .count{font-size:10px}
	.visual .all-view .count .swiper-pagination{font-size:10px}
}

/* ======================================================
   .menu
=========================================================*/
.menu{margin-top:5vw}
.menu ul{margin:0 -2%}
.menu ul:after{display:block; content:"";clear:both}
.menu li{float:left; width:25%}
.menu li:nth-child(n+5){margin-top:5vw}
.menu li a{display:block}
.menu li a .ico{height:11vw; display:flex;align-items: center; justify-content: center}
.menu li a .ico img{height:9vw}
.menu li a .ico img .fastfood{height:9.5vw}
.menu li a .txt{position:relative; text-align:center;font-size:2.6vw; font-weight:700; color:#222; letter-spacing:-0.03em; line-height:1.2em}
.menu.baebi{margin-bottom:5vw}
.recentbtn{background: #444; cursor:pointer; color: #fff; padding: 10px 11px; border-radius: 6px; text-align: center; margin-bottom: 20px}
.deliveryload {text-align:center}
.deliveryload img{width:90%; margin:0 auto; display:block}
.bjload{width:49%; display:inline-block; margin:5vw 0}
.myload{width:49%; display:inline-block; margin:5vw 0}
.bjload img{width:100%}
.myload img{width:100%}
.maintxt{text-align: center; padding: 6vw 0 0 0; color: #aaaaaa; font-size: 2.8vw; line-height: 8vw}
.subtitle{line-height:4vw; position: relative; top: 1vw}
.maintitle{font-size: 4.5vw; font-weight: 900; color: #222222; line-height: 6vw}
.bottomtxt{font-size: 3vw; color: #505050; text-align: center; padding: 0 0 7vw 0; line-height: 5vw}

@media only screen and (min-width:999px) {
	.menu{margin-top:50px}
	.menu.baebi{margin-bottom:25px}
	.menu li:nth-child(n+5){margin-top:50px}
	.menu li a .ico{height:110px}
	.menu li a .ico img{height:90px}
	.menu li a .txt{font-size:26px}
	.bjload{width:49%; display:inline-block; margin:50px 0}
	.myload{width:49%; display:inline-block; margin:50px 0}
	.maintxt{text-align: center; padding: 60px 0 0 0; color: #aaaaaa; font-size: 25px}
	.subtitle{line-height:40px; position: relative; top: 10px}
	.maintitle{font-size: 45px; font-weight: 900; color: #222222; line-height: 60px}
	.bottomtxt{font-size: 30px; color: #505050; text-align: center; padding: 0 0 70px 0; line-height: 50px}
}

@media only screen and (max-width:500px) {
	.menu{margin-top:25px}
	.menu.baebi{margin-bottom:25px}
	.menu li:nth-child(n+5){margin-top:25px}
	.menu li a .ico{height:55px}
	.menu li a .ico img{height:45px}
	.menu li a .ico img.fastfood{height:50px}
	.menu li a .txt{font-size:11px}
	.bjload{width:49%; display:inline-block; margin:2vw 0 5vw 0}
	.myload{width:49%; display:inline-block; margin:2vw 0 5vw 0}
	.maintxt{text-align: center; padding: 28px 0 10px 0; color: #aaaaaa; font-size: 12px}
	.maintitle{font-size: 19px; line-height: 35px; font-weight: 900; color: #222222}
	.bottomtxt {font-size: 13px; color: #505050; text-align: center; padding: 0 0 27px 0}
	.subtitle{line-height:15px; position: relative; top: 1px}
}

@media only screen and (max-width:300px) {
	.menu{margin-top:25px}
	.menu.baebi{margin-bottom:25px}
	.menu li:nth-child(n+5){margin-top:25px}
	.menu li a .ico{height:55px}
	.menu li a .ico img{height:38px}
	.menu li a .ico img.fastfood{height:50px}
	.menu li a .txt{font-size:10px}
	.bjload{width:49%; display:inline-block; margin:9vw 0}
	.myload{width:49%; display:inline-block; margin:9vw 0}
}

/* ======================================================
   .search-baebi
=========================================================*/
.search-baebi {position:relative; padding:5vw 0 0 0}
.search-baebi .chk-input{ width:100%}
.search-baebi .chk-input input{background: #F5F5F5; border: 0 solid #222;border-radius:5.0vw; min-height:38px; padding-left:9vw; height:7.6vw; color:#222; font-size:2.8vw}
.search-baebi .chk-input input::placeholder{color:#222;opacity:1}
.search-baebi .enter{position:absolute; left:1vw; top:0; z-index:22; width:7.6vw; height:7.6vw; border:none;background:url(../_Img/Sub/ico-search-baebi.png) no-repeat center center; background-size:2.8vw auto}

@media only screen and (min-width:999px) {
	.search-baebi{padding:50px 0}
	.search-baebi .chk-input input{padding-left:90px; height:76px; font-size:28px}
	.search-baebi .enter {left:10px;width:76px;height:76px; background-size:28px auto}
}

@media only screen and (max-width:500px) {
	.search-baebi{padding:18px 0 0 0}
	.search-baebi .chk-input input{padding-left:45px; height:38px; font-size:14px}
	.search-baebi .enter {left:5px;width:38px;height:38px; background-size:14px auto}
}

/* ======================================================
   .vslide
=========================================================*/
.vslide .notice{padding-left:7vw; position:relative}
.vslide .event{padding-left:9vw;position:relative;margin-top:1px}
.vslide .event:before{background:#e6e6e6; width:calc(100% + 6vw); margin-left:-3vw; height:1px; box-sizing:border-box; position:absolute; left:0; top:-1px; display:block;content:""}
.vslide h3{position:absolute; left:0; top:0; line-height:7.4vw; font-weight:400; color:#222; letter-spacing:-0.03em; font-size:2.4vw}
.vslide .item a{display:block;line-height:7.4vw; font-weight:400; color:#888; letter-spacing:-0.03em; font-size:2.4vw}
/*.vslide:after {background: #e6e6e6; width: calc(100% + 6vw); margin-left: -3vw; height: 1px; box-sizing: border-box; position: absolute; left: 0; bottom: -1px; display: block; content: ""}*/

@media only screen and (min-width:999px) {
	/*.vslide:after {background: #e6e6e6; height: 1px; box-sizing: border-box; position: absolute; left: 0; bottom: -1px; display: block; content: ""; width: calc(100% + 60px); margin-left: -30px}*/
	.vslide .notice {padding-left:70px}
	.vslide .event {padding-left:90px}
	.vslide .event:before {width:calc(100% + 60px); margin-left:-30px}
	.vslide h3 {line-height:74px; font-size:24px}
	.vslide .item a {line-height:74px; font-size:24px}
}

@media only screen and (max-width:500px) {
	/*.vslide:after {background: #e6e6e6; height: 1px; box-sizing: border-box; position: absolute; left: 0; bottom: -1px; display: block; content: ""; width: calc(100% + 30px); margin-left: -15px}*/
	.vslide .notice {padding-left:45px}
	.vslide .event {padding-left:45px}
	.vslide .event:before {width:calc(100% + 30px); margin-left:-15px}
	.vslide h3 {line-height:37px; font-size:12px}
	.vslide .item a {line-height:37px; font-size:12px}
}