@charset "utf-8";

@font-face {
    font-family: 'Giants-Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Giants-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-1@1.1/Giants-Regular.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

#wrap {position:relative; max-width:640px; margin:0 auto; overflow:hidden;}

/* common */
.section {background-repeat:no-repeat; background-position:50% 0;}

/* 각 section */
.section.main {background:url(../images/bg_main.jpg?2024120301) #000; background-size:cover;}
.section.cf {background:url(../images/bg_cf.jpg?2024120301) #f5ebdc; background-size:cover;}
.section.event_01 {background:url(../images/bg_event_01.jpg?2024120301) #f5ebdc; background-size:cover;}
.section.event_02 {background:url(../images/bg_event_02.jpg?2024120301) #000000; background-size:cover;}
.section.event_03 {background:url(../images/bg_event_03.jpg?2024120301) #333333; background-size:cover;}
.section.event_04 {background:url(../images/bg_event_04.jpg?2024120301) #666666; background-size:cover;}
.section.event_05 {background:url(../images/bg_event_05.jpg?2024120301) #666666; background-size:cover;}
.section.certificate {background:url(../images/bg_certificate.jpg?2024120301) #666666; background-size:cover;}
.footer {background:url(../images/bg_footer.jpg?2024120301) #666666; background-size:cover;}


.section.result_01 {background:url(../images/bg_result_01.png?2024120301) #000; background-size:cover;}
.section.result_02 {background:url(../images/bg_result_02.png?2024120301) #000; background-size:cover;}



/* gnb */

.nav {display:block; position:absolute; left: 50%; top:-4.5%; width:100%; z-index:999;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);-moz-transform: translate(-50%, 0);-o-transform: translate(-50%, 0);transform: translate(-50%, 0);}
.gnb {max-width:640px; margin:0 auto;}
.gnb:after {display:block; clear:both; height:0; content:'';}

.gnb > li {position:relative; float:left; width:25%;}
.gnb > li > a {display:block; padding-bottom:50%; font-size:0; background-repeat:no-repeat; background-position:50% 0;}



.gnb > li:first-child > a {background-image:url(../images/gnb2_1_off.png?2024120301); background-size:cover;}
.gnb > li:first-child.on > a {background-image:url(../images/gnb2_1_on.png?2024120301); background-size:cover;}

.gnb > li:nth-child(2) > a {background-image:url(../images/gnb2_2_off.png?2024120301); background-size:cover;}
.gnb > li:nth-child(2).on > a {background-image:url(../images/gnb2_2_on.png?2024120301); background-size:cover;}

.gnb > li:nth-child(3) > a {background-image:url(../images/gnb2_3_off.png?2024120301); background-size:cover;}
.gnb > li:nth-child(3).on > a {background-image:url(../images/gnb2_3_on.png?2024120301); background-size:cover;}

.gnb > li:nth-child(4) > a {background-image:url(../images/gnb2_4_off.png?2024120301); background-size:cover;}
.gnb > li:nth-child(4).on > a {background-image:url(../images/gnb2_4_on.png?2024120301); background-size:cover;}




/* section - main */
.section.main {position:relative; padding-bottom:218.75%; margin-top:0;}
.section.main .main_tit {position:absolute; top:31%; left:6.5625%; width:86.875%; z-index:2;}



/* section - cf */
.section.cf {position:relative; margin-top:0;}
.section.cf .area_movie {position:relative; font-size:0; padding-top:41%; width:79%; margin:0 auto;padding-bottom:20.505%; }

.section.cf .area_movie .wrap_movie {position:relative; padding-bottom:56.25%;}
.section.cf .area_movie .wrap_movie iframe {position:absolute; width:100%; height:100%;}


/* section - 신메뉴 확인하기 */
.section.event_01 {position:relative;padding-bottom:227.032%;}
.section.event_01 .btn_wine_01 {position:absolute; top:86%; left:8%;  width:35%; z-index:2;}
.section.event_01 .btn_wine_02 {position:absolute; top:86%; right:8%;  width:35%; z-index:2;}


/* section - 투표 참여하기 */
.section.event_02 {position:relative;padding-bottom:250%;}

.section.event_02 .vote {position:absolute; top:30%; width:100%;}
.section.event_02 .vote .vs {position:absolute; top:33%; left:40.9375%; width:18.125%; }
.section.event_02 .vote li{float:left; width:50%;}


.section.event_02 .info_01 {position:absolute; top:78%; left:27.655%;  width:44.69%; height:4%;}
.section.event_02 .info_01 .name{width:100%;height:100%;border:0;background:#fff;font-size:1.8em;color:#acacac;padding:0; font-family: 'SUIT-Regular'; text-align:center }


.section.event_02 .btn_vote_01 {position:absolute; top:83%; left:25.702%;  width:48.596%; z-index:2;}
.section.event_02 .btn_vote_02 {position:absolute; bottom:0%;   width:100%; z-index:2;}


	select{border: 1px solid #e1e1e1;box-shadow:0 none !important;color: #656565;font-size: 0.9em;line-height:24px;height:24px; padding:0; vertical-align:top;}
	input{letter-spacing:-1px;}
	input::placeholder {color:#acacac;}
	input[type="checkbox"] {height:100%;width:100%;}
	input[id="ok_ok"]:checked + label::after{content:'✔';font-size: 2.3em;width: 100%;height: 100%;text-align: center;position: absolute;left: 0;top:0;color:#05a878;}
	input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;}



/* section - 투표 인증서 */
.section.certificate {position:relative; padding-bottom:40.625%; margin-top:0;}
.section.certificate .name{position:absolute; top:79%; left:29%; width:60%; z-index:2; font-size:20px; text-align:right; font-family: 'SUIT-Regular'; font-weight:500; color:#8f8f8f;}
.section.certificate .date{position:absolute; top:82.5%; left:29%; width:60%; z-index:2; font-size:20px; text-align:right; font-family: 'SUIT-Regular'; font-weight:500; color:#8f8f8f;}

.section.certificate .certificate_01{position:absolute; top:16%; left:6.561%; width:86.878%; }
.section.certificate .btn_save {position:absolute; top:90%; left:25.702%;  width:48.596%; z-index:2;}



/* section - 혜택 확인하기 */
.section.event_03 {position:relative;}

.section.event_03 .event_03_1{position:relative;}
.section.event_03 .event_03_1 .btn_hashtag {position:absolute; top:62.5%; left:15%;  width:70%; z-index:2;}
.section.event_03 .event_03_1 .btn_sns {position:absolute; top:80%; left:20.78%;  width:58.44%; z-index:2;}
.section.event_03 .event_03_1 .btn_sns li{float:left; width:25.67%;margin-left:11.495%;}
.section.event_03 .event_03_1 .btn_sns li:first-child{margin-left:0%;}

.section.event_03 .event_03_2 .btn_event_03_2_1 {position:absolute; top:41.2%; left:26.171%;  width:47.658%; z-index:2;}
.section.event_03 .event_03_2 .btn_event_03_2_2 {position:absolute; top:60.5%; left:15.156%;  width:69.688%; z-index:2;}


.section.event_03 .event_03_3{position:relative;}
.section.event_03 .event_03_3 .btn_hashtag {position:absolute; top:43%; left:15%;  width:70%; z-index:2;}
.section.event_03 .event_03_3 .btn_sns {position:absolute; top:91%; left:20.78%;  width:58.44%; z-index:2;}
.section.event_03 .event_03_3 .btn_sns li{float:left; width:25.67%;margin-left:11.495%;}
.section.event_03 .event_03_3 .btn_sns li:first-child{margin-left:0%;}




/* section - 매장 예약하기 */
.section.event_04 {position:relative;padding-bottom:233.908%;}
.section.event_04 .btn_kakao {position:absolute; top:33%; left:61%;  width:30.625%; z-index:2;animation:link01 .8s linear infinite;}

@keyframes link01{
    0%{ transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); }
    50%{ transform:scale(1.15); -webkit-transform:scale(1.15); -moz-transform:scale(1.15);  }
    100%{ transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}


/* section - 매장 예약하기 */
.section.event_05 {position:relative;padding-bottom:293.125%;}

.section.event_05 .map{position:absolute; top:14%; left:6.562%; width:86.876%;height:13.728%; background:#fff;z-index:2;}

.section.event_05 .place{position:absolute; top:29%; left:6.562%; width:86.876%; z-index:2;}
.section.event_05 .place li{position:relative;}
.section.event_05 .place span.b1 {position:absolute; top:22%; right:16%; width:10.612%; z-index:2; }
.section.event_05 .place span.b2 {position:absolute; top:22%; right:3%; width:10.612%; z-index:2; }




/* footer */
.footer {position:relative;padding-bottom:78.595%;}




/* section - result_01 */
.section.result_01 {position:relative; padding-bottom:311.564%; margin-top:0;}

/* section - result_02 */
.section.result_02 {position:relative; padding-bottom:213.907%; margin-top:0;}
.section.result_02 .btn_insta {position:absolute; top:84%; left:20.312%;  width:59.376%; z-index:2;}




/* 투표 그래프 */
.graph {position: absolute;top:50%;left:6.561%; width:86.878%;height: 27%;background: #595959;border-radius: 100px;white-space: nowrap;;margin:0 auto;}
.graph:after {content: "";display: block;clear: both;}

.graph .name_left{position: absolute;width:50%;top:-70%;font-size:28px;font-weight:700;font-family: 'Giants-Regular'; text-align:left;color:#fff;z-index:1;color:#595959;}
.graph .name_right{position: absolute;width:50%;top:-70%; right:0;font-size:28px;font-weight:700;font-family: 'Giants-Regular'; text-align:right;color:#fff;z-index:1;}

.graph .bar {position: relative;display: inline-block;height: 100%;background: #ddd;border-radius:100px;}
.graph .bar + .bar {box-sizing: content-box;border-radius: 100px;}
.graph .bar.green {z-index: 1;background: #595959;text-align: left;color:#979797;}
.graph .bar.pink {background: #e14257;text-align: right;z-index: 1;}
.graph .bar .desc {position: absolute;width:80%;top: 50%;left: 50%;margin: 0;font-size: 24px;color: #fff;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-family: 'Giants-Regular';
  em{font-style:normal;font-size:38px;font-weight:700;font-family: 'Giants-Bold';}
}

.graph .bar.green .desc{color:#979797;}


/* popup */

	.overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.9;  /* 이거 조정으로 농도 결정 높으면 어둡  */
	  filter: alpha(opacity = 50);
	   /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 999; display:none;}

	.overlay_t2 { background-color: #000; bottom: 0; left: 0; opacity: 0.8;  /* 이거 조정으로 농도 결정 높으면 어둡  */
	  filter: alpha(opacity = 50);
	   /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 9999; display:none;}
	   
	.overlay_t3 { background-color: #000; opacity: 0.3;  /* 이거 조정으로 농도 결정 높으면 어둡  */
	  filter: alpha(opacity = 50);
	   /* IE7 & 8 */ position: absolute; z-index: 99; height:100%; width:100%;}
	   

	.popup_layer {position:absolute; width:85%; top:15%; margin-left:8.5%; z-index:999; display:;}
	.close {position:absolute; background-image:url(../images/pop_close.png); width:18%; height:8.424%; right:0; top:0px; background-size:cover;}
	.close2 {float:left }

	.txt span {font-weight:bold; margin-left:10px;}
	.txt span img{ width:50%;}
	.close_btn {position:absolute; bottom:0;width:100%;}
	.close_btn img{width:100%;}
	.pop_bg img{width:100%;}

	.pop_sns{position:absolute; top:76.5%; right:20%; width:18.8%}
	.pop_sns li {float:left; margin-right:4%; width:46%}
	.pop_sns li img {width:100%}

	.privacy {position:absolute;width:83%; height:12%; left:8%; top:11%; color:#999;}
	.privacy .box_ok{border:1px solid #d1d1d1;overflow:auto; height:100%;padding:5px;background:#fff; box-sizing: border-box;}
	.privacy .box_ok ul li{padding-bottom:10px; line-height:16px;}

	.input_chb {position:absolute; top:23.5%; left:8%; width:83%; height:4%;}
	.input_chb label {color: #999; font-size: 1em; left:7%;position: absolute; top:0; letter-spacing:-1px;}

	select{border: 1px solid #e1e1e1;box-shadow:0 none !important;color: #656565;font-size: 0.9em;line-height:24px;height:24px; padding:0; vertical-align:top;}
	input[type="checkbox"] {height:100%;width:6%;border: 1px solid #e1e1e1;}
	input[type="radio"] {height:100%;width:5%;}
	input[type="text"] {border: 1px solid #AAAAAA;border-radius: 0 0 0 0; box-shadow: none !important;color: #656565;font-size: 1em;padding: 5px 3px 5px 10px;vertical-align: middle;}
	input[type="button"] {background-color: #999;border: 1px solid #666;border-radius: 3px;color: #fff;display: inline-block;font-size:1.25em;line-height:10px;text-align: center;vertical-align:top;width:100%;padding:10px;letter-spacing:-1px;}

	.info_01 {position:absolute; top:28%; left:8%; width:83%; height:5%;}
	.info_01 .name{width:100%; height:100%;padding:0 2% 0 2%;}

	.info_02 {position:absolute; top:34%; left:8%;  width:83%; height:5%;}
	.info_02 .w1{ position: relative;width:30%; height:100%; float:left; padding:0 2% 0 2%;}
	.info_02 .line{ position: relative;font-weight:bold;color:#999;height:100%; width:5%; float:left; text-align:center;}

	.close2 {position:absolute; background-image:url(../images/pop_close.png); width:36px; height:36px; right:12%; top:19%; z-index:9999;}
	.sns_01{position:absolute;width:16%; top:47%; left:32%;}
	.sns_01 img{width:100%;}
	.sns_02{position:absolute;width:16%; top:47%; left:52%;}
	.sns_02 img{width:100%;}

	.btn_sns_01{position:absolute;width:16%; top:30%; left:33%;}
	.btn_sns_01 img{width:100%;}
	.btn_sns_02{position:absolute;width:16%; top:30%; right:33%;}
	.btn_sns_02 img{width:100%;}

	.popup_layer .name{position:absolute; top:71.5%; left:29%; width:60%; z-index:2; font-size:20px; text-align:right; font-family: 'SUIT-Regular'; font-weight:500; color:#8f8f8f;}
	.popup_layer .date{position:absolute; top:74.7%; left:29%; width:60%; z-index:2; font-size:20px; text-align:right; font-family: 'SUIT-Regular'; font-weight:500; color:#8f8f8f;}

	.btn_download{position:absolute;width:60%; top:103%; left:20%; z-index:999;}


	.blur {filter: blur(5px); -webkit-filter: blur(5px);}


@media all and (max-width:640px){


.section.event_02 .info_01 .name{font-size:1.2em; }

.graph .name_left{font-size:18px;}
.graph .name_right{font-size:18px;}

.graph .bar .desc {position: absolute;width:80%;top: 50%;left: 50%;margin: 0;font-size: 18px;color: #fff;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-family: 'Giants-Regular';
  em{font-style:normal;font-size:26px;font-weight:700;font-family: 'Giants-Bold';}
}

.section.certificate .name{top:79%; font-size:13px;}
.section.certificate .date{top:82.5%; font-size:13px;}

	.popup_layer .name{top:71.5%; font-size:13px;}
	.popup_layer .date{top:74.7%; font-size:13px;}


}

.btn_mute {position:absolute; top:78%; left:4%; width:36.877%; z-index:2;}


.dim {background:#000000;opacity:0.80;filter:alpha(opacity = 80);z-index: 1000;position:fixed;width:100%;height:100%;left:0;top:0;display: block; }
.layerPop {display:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1001;}
.layerPop.on {display:block;}
.layerPop .popBox {position:fixed;top:300px;left:50%;width:600px;margin-left:-300px;z-index:1001; text-align:center;}