@charset "utf-8";

#contents {background:url('/food/img/main/restaurant_bg.gif') no-repeat 6% 101%;}
#visual {position:relative; text-align:center; padding-top:30px; background:#f5f5f5; font-size:0; line-height:0;}
#visual:after {display:block; content:""; position:absolute; left:0; right:0; bottom:0; height:80px; background:#d52014; z-index:0;}
#visual>div {vertical-align:top; position:relative; text-align:left; display:inline-block; width:50%; max-width:700px; height:500px; font-size:15px; line-height:1.2em; z-index:10;}

#notice .slogan {width:96.5%; height:417px; margin-top:21px; background:url('/food/img/main/visual.png?v2026nosg') no-repeat right top;}
#notice .txt {position:absolute; width:100%; bottom:20px; padding:10px 30px;}
#notice h3 {float:left; color:#fff; font-size:19px; font-weight:normal;}
#notice a {float:left; margin-left:40px; color:#fff; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#notice span {float:right; color:#f0c2c0;}

#mapcon {padding-bottom:80px;}
#mapcon .search {position:absolute; bottom:0; width:100%; height:80px; background:#ed3023; z-index:200;}
#mapcon .search:after {display:block; content:""; clear:both;}
#mapcon .search h3 {position:relative; float:left; text-align:center; width:30%; font-size:19px; line-height:78px; color:#fff; background:url('/food/img/main/spot_ic.gif') no-repeat 20% center;}
#mapcon .search>div {position:relative; float:left; width:22%;}
#mapcon .search>div>a {position:relative; display:block; padding:0 20px; line-height:80px; color:#fff; font-size:17px;}
#mapcon .search>div>a:before, #mapcon .search>div>a:after {display:block; content:""; position:absolute; top:39px; width:12px; height:3px; border-radius:5px; background:#fff;}
#mapcon .search>div>a:before {right:27px; transform:rotate(-45deg);}
#mapcon .search>div>a:after {right:20px; transform:rotate(45deg);}
#mapcon .search>div>a.on {background:#2d0907;}
#mapcon .search h3:after, #mapcon .search>div:after {display:block; content:""; position:absolute; right:-1px; top:30px; width:1px; height:17px; background:#d52014;}
#mapcon .search>div>ul {display:none; position:absolute; bottom:80px; width:100%; padding:20px; border-radius:10px 10px 0 0; background:rgba(0,0,0,.8);}
#mapcon .search>div>ul li {margin-bottom:10px;}
#mapcon .search>div>ul li a {font-size:17px; color:#fff;}
#mapcon .search input[type=submit] {width:121px; height:42px; margin-left:20px; margin-top:18px; padding-left:33px; font-size:17px; color:#fff; border:0; border-radius:5px; background:#d52014 url('/food/img/main/search_ic.gif') no-repeat 28px center;}
#mapcon .api {width:100%; height:420px; border-radius:50px 50px 0 0; z-index:0; overflow:hidden;}

.restaurant {max-width:1400px; margin:0 auto;}
.restaurant:after {display:block; content:""; clear:both;}
.restaurant>.tit {float:left; width:25%; font-family:'Noto Sans KR';}
.restaurant>.tit h3 {font-size:35px; color:#434a54; font-weight:500; letter-spacing:-3px; line-height:43px;}
.restaurant>.tit h3 span {color:#ed3023;}
.restaurant>.tit p {margin:20px 0; color:#434a54;}
.restaurant>.tit a {display:inline-block; padding:0 15px 2px; font-size:14px; color:#ed3023; border:1px solid #ed3023; border-radius:30px; background:#fff;}
.restaurant .list {float:right; width:75%; white-space:nowrap; font-size:0; line-height:0;}
.restaurant .list>li {display:inline-block; width:25%; font-size:15px; line-height:20px;}
.restaurant .list>li a {position:relative; display:block; height:330px; margin:10px 25px 30px 0;}
.restaurant .list>li a:hover {background:#fff; box-shadow:10px 10px 20px rgba(0,0,0,.4);}
.restaurant .list .tag {position:absolute; left:0; top:0; padding:3px 12px 6px 28px; color:#fff; background-image:url('/food/img/main/spot_ic.png'); background-repeat:no-repeat; background-position:12px center; background-size:12px; z-index:10;}
.restaurant .list .photo {height:50%; overflow:hidden;}
.restaurant .list .photo img {width:auto; min-width:100%; min-height:100%;}
.restaurant .list .tit {margin:20px 20px 10px; font-size:18px; line-height:1.2em; text-overflow:ellipsis; overflow:hidden;}
.restaurant .list .txt {height:40px; margin:0 20px; font-size:14px; overflow:hidden; white-space:normal;}
.restaurant .list .tel {margin:10px 20px 10px; letter-spacing:0;}
.restaurant .list .tel span {vertical-align:top; width:22px; height:22px; background:url('/food/img/main/tel.gif') no-repeat;}


#awards {margin-top:75px;}
#new.restaurant {position:relative; margin-top:30px; padding-top:80px;}
#new.restaurant:before {display:block; content:""; position:absolute; right:-250px; top:0; width:60%; height:255px; background:#f5f4fa; z-index:-1;}
#new.restaurant>.tit {float:right; text-align:right;}
#new.restaurant .list {float:left;}

#awards .tag {background-color:#ed3023;}
#new .tag {background-color:#434a54;}


/*pc_min*/
@media all and (max-width:1280px){
	#contents {background-position:-100px 68%;}
	#new.restaurant:before {width:50%; right:0;}
}

/*pc_min2*/
@media all and (max-width:1024px){
	#visual {background:none;}
	#visual:after {display:none;}
	#visual>div {display:block; width:100%; max-width:100%;}
	#notice:after {display:block; content:""; position:absolute; bottom:0; width:100%; height:80px; background:#d52014; z-index:-1;}
	#notice .slogan {width:100%; background-position:center top;}

	#mapcon {margin:30px 5%; width:auto !important;}
	#contents {background-position:-110px 79.5%;}

	.restaurant>.tit {width:38%;}
	.restaurant .list {width:62%; overflow:hidden;}
	.restaurant .list>li {width:40%;}
	#awards {margin-top:45px;}
	#awards>.tit {padding-left:5%;}
	#new>.tit {padding-right:5%}
	#new .list>li:first-child {margin-left:-18%;}
	#new.restaurant:before {width:70%;}
}


/*tablet*/
@media all and (max-width:800px){
	#contents {background-position:-130px 90%;}

	#mapcon {margin:0;}
	#mapcon .api {border-radius:0;}

	.restaurant>.tit p {display:none;}
	.restaurant>.tit h3 {padding-top:10px; margin-bottom:15px; font-size:30px; line-height:36px;}
	.restaurant>.tit {width:30%;}
	.restaurant .list {width:70%;}
	.restaurant .list>li  {width:30.3%; margin:0 1.5%;}	
	.restaurant .list>li a {height:175px; margin-right:0; background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.3) !important;}
	.restaurant .list .photo {height:60%;}
	.restaurant .list .tit {margin:10px 10px 5px; font-size:16px; font-weight:bold;}
	.restaurant .list .txt {display:none;}
	.restaurant .list .tel {margin:0 10px; font-size:13px;}
	#new .list>li:first-child {margin-left:10px;}
	#new.restaurant {padding-top:40px;}
	#new.restaurant:before {height:165px;}
}



/*mobile*/
@media all and (max-width:640px){
	#notice span {display:none;}
	#notice h3 {width:25%;}
	#notice a {width:72%; margin-left:2%;}
	#mapcon .search h3 {padding-left:20px; background-position:15% center;}
	#mapcon .search>div>ul {padding:15px;}
	#mapcon .search>div>a, #mapcon .search>div>ul li a {font-size:15px;}
	#mapcon .search input[type=submit] {position:absolute; margin-left:0;}
}



/*mobile_min*/
@media all and (max-width:480px){
	#notice {height:398px !Important;}
	#notice .slogan {background-size:500px;}
	#contents {background:none;}
	#mapcon .search h3 {width:40px; height:100%; text-indent:-100%; font-size:0; line-height:0; background-position:20px center; overflow:hidden;}
	#mapcon .search>div {width:32%;}
	#mapcon .search input[type=submit] {width:90px; background-position:10px center;}

	.restaurant>.tit {float:none !important; text-align:center !important; width:100%;}
	.restaurant>.tit br {display:none;}
	.restaurant .list {float:none !important; width:90%; margin:20px auto !Important;}
	.restaurant .list .tag {left:-1px; top:-1px;}
	.restaurant .list .tit {margin:20px 0 0;}
	.restaurant .list .txt {display:block; margin:5px 10px 10px 0;}
	.restaurant .list .tel {margin-left:0;}
	.restaurant .list>li {display:block; width:100%; margin:0 !important;}
	.restaurant .list>li a {height:140px; padding-left:55%; margin:10px 0 0 0; border:1px solid #d6d6d6; box-shadow:none !important;}
	.restaurant .list .photo {position:absolute; left:-1px; top:-1px; bottom:-1px; width:50%; height:auto;}

	#new.restaurant {padding-top:0;}
	#new.restaurant:before {display:none;}
}