@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 .count {position: absolute; left: 6vw; bottom: 2vw; line-height: 5vw; font-size: 1.8vw; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); -webkit-text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); -moz-text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); z-index: 1}
.visual .count .swiper-pagination {width: 60px; bottom: 10%; left: 0!important; margin-left: -10px}
.visual .all-view {position:absolute; right:0; bottom:2vw; background: rgba(255,255,255,0.6); width: 13.4vw; height: 5vw; line-height: 5vw; border-radius: 0; text-align: center; z-index: 1}
.visual .all-view span {display:inline-block;vertical-align:top; padding-right:2vw; background:url(https://cdn.spge.kr/upload/mexicana/_Img/Main/more-arrow.png) no-repeat right 55%; font-size:2vw; color:#222; letter-spacing:-0.03em; background-size:0.6vw auto}
.visual.bdrd {padding-top:0}

@media only screen and (min-width:999px) {
	.visual{width:calc(100% + 60px); margin-left:-30px}
	.visual .all-view{right:0; bottom:20px; width:134px; height:50px; line-height:50px; border-radius:0}
	.visual .all-view span{padding-right:20px; font-size:20px;  background-size:6px}
	.visual .count{left: 57px; bottom:20px; line-height:50px;font-size:18px}
}

@media only screen and (max-width:500px) {
	.visual{width:calc(100% + 30px); margin-left:-15px}
	.visual.bdrd{padding-top:0}
	.visual .all-view{right:0; bottom:10px; width:67px; height:25px; line-height:25px; border-radius:0}
	.visual .all-view span{padding-right:10px; font-size:10px;  background-size:3px}
	.visual .count{ left:32px; bottom:10px; line-height:25px; font-size:9px}
}

/* ======================================================
   .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
=========================================================*/
.search {position:relative; padding:5vw 0}
.search .chk-input{ width:100%}
.search .chk-input input{border:1px solid #222;border-radius:1.0vw; min-height:38px; padding-left:1.5vw; height:7.6vw; color:#222; font-size:2.8vw}
.search .chk-input input::placeholder{color:#222;opacity:1}
.search .enter{position:absolute; right:1vw; top:0; z-index:22; width:7.6vw; height:7.6vw; border:none;background:url(https://cdn.spge.kr/upload/mexicana/_Img/Sub/ico-search.svg) no-repeat center center; background-size:2.8vw auto}
.search.mexi .chk-input input{border:1px solid #e0e0e0; border-radius:1.0vw; height:10vw; padding-left:3.5vw; color:#222; font-size:2.8vw}
.search.mexi .enter{background-size: 4vw auto; background-position: 0 3vw}

@media only screen and (min-width:999px) {
	.search.mexi .enter{background-size: 40px auto; background-position: 0 30px}
	.search.mexi .chk-input input{font-size: 23px; height: 100px}
	.search{padding:50px 0}
	.search .chk-input input{border-radius:8px; padding-left:16px; height:76px; font-size:28px}
	.search .enter{ left:608px;width:76px;height:76px; background-size:28px auto}
}

@media only screen and (max-width:500px) {
	.search{padding:25px 0}
	.search.mexi .chk-input input{ height: 50px;font-size: 12px}
	.search.mexi .enter {background-size: 20px auto; background-position: 0 15px}
	.search .chk-input input{border-radius:4px; height:38px; font-size:14px}
	.search .enter{width:38px;height:40px; background-size:14px auto}
}

/* ======================================================
   .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}
}