@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

html { font-size:62.5%; }
#wrap {min-width:100%; margin:0 auto;}


.pc {display:block;}
.m {display:none;}

/* common */
.section,
.footer {background-repeat:no-repeat; background-position:50% 0;}
.box {width:100%; margin:0 auto;}
.section img{width:100%; margin:0 auto;}


/* section - main */
.section.main .box {position:relative; text-align:center; overflow:hidden;}
.section.main .main_tit {position:absolute; width:65.161%; top:7%; left:17.4195%; font-size:0;}
.section.main .main_hashtag {position:absolute; width:13.663%; top:63.5%; left:78.5%; font-size:0; z-index:1;}
.section.main .main_step {position:absolute; width:65.161%; top:58%; left:17.4195%; font-size:0;}
.section.main .main_gift {position:absolute; width:65.161%; top:82%; left:17.4195%; font-size:0;}


/* section - event_01 */
.section.event_01 {position:relative; text-align:center; overflow:hidden;}
.section.event_01 .box {position:relative; overflow:hidden;}
.section.event_01 .event_01_tit{position:absolute; width:65.161%; top:10%; left:17.4195%; font-size:0;}
.section.event_01 .event_01_btn{position:absolute; width:21.02%; top:85%; left:39.49%; font-size:0; animation:link01 .8s linear infinite;}


.slide-area {position:absolute;  width:65.161%; top:28%; left:17.4195%; font-size:0;}
.slick-slider {width: calc(100% + 100px);margin: 0 -50px;}
.slick-slider.columns-4 .slick-slide {width: calc(25% - 100px);margin: 0 10px;height: auto;}


.guide-loop {
	position: relative;
}
.guide-loop .guide-loop-item::before {
	content: none;
}
.guide-loop .guide-loop-item figure {
	width: 100%;
	float: left;
}
.guide-loop .guide-loop-item figure img {
	width: 100%;
	float: left;
}
.guide-loop .guide-loop-item figure figcaption {
	width: 100%;
	max-width: 228px;
	min-height: 188px;
	float: left;
	margin: 22px 0 0 0;
	word-break: keep-all;
	text-align: left !important;
}


.guide-loop .guide-loop-item figure img {
	border-radius: 15px 15px;
}
.guide-loop .slick-arrow {
	width: 60px;
	height: 60px;
	top: 250px !important;
	transform: inherit;
	opacity: .5;
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
	position: absolute;
	background-color: transparent;
	font-size: 0;
	border: none;
}
.guide-loop .slick-arrow:hover {
	opacity: 1;
	transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-webkit-transition: all .25s ease-in-out;
}
.guide-loop .slick-prev {
	left: -60px;
	background-image: url('../images/icon-slide-left-arrow.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index:1;
}
.guide-loop .slick-next {
	right: -60px;
	background-image: url('../images/icon-slide-right-arrow.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index:1;

}
.guide-loop .slick-arrow::before {
	content: none;
}

.guide-loop .slick-dots {
	width: auto;
	left: 50%;
	bottom: -40px;
	transform: translateX(-50%);
}

.guide-loop .slick-dots li {
	width: 10px;
	height: 10px;
	border-radius: 5px 5px;
	margin: 0 10px;
	position: relative;
}
.guide-loop .slick-dots li.slick-active::after {
	color: #fff;
	position: absolute;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	top: 20px;
	left: -15px;
}

.guide-loop .slick-dots li button {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 5px 5px;
	background-color: #797979;
}
.guide-loop .slick-dots li.slick-active button {
	background-color: #e60a29 !important;
}

.slick-dots li button::before {
	content: none !important;
}





/* section - notice */
.section.notice {position:relative; text-align:center; overflow:hidden;}
.section.notice .box {position:relative; overflow:hidden;}
.section.notice .notice_txt{position:absolute; width:65.161%; top:23%; left:17.4195%; font-size:0;}


/* section - event_02 */
.section.event_02 {position:relative; text-align:center; overflow:hidden;}
.section.event_02 .box {position:relative; overflow:hidden;}
.section.event_02 .event_02_tit{position:absolute; width:65.161%; top:8%; left:17.4195%; font-size:0;}
.section.event_02 .event_02_01 {position:absolute; width:65.161%; top:34%; left:17.4195%; font-size:0;}
.section.event_02 .event_02_02 {position:absolute; width:65.161%; top:81%; left:17.4195%; font-size:0;}


/* section - event_03 */
.section.event_03 {position:relative; text-align:center; overflow:hidden;}
.section.event_03 .box {position:relative; overflow:hidden;}
.section.event_03 .event_03_01 {position:absolute; width:65.161%; top:20%; left:17.4195%; font-size:0;}
.section.event_03 .event_03_02 {position:absolute; width:65.161%; top:84%; left:17.4195%; font-size:0;}



/* section - event_04 */
.section.event_04 {position:relative; text-align:center; overflow:hidden;}
.section.event_04 .box {position:relative; overflow:hidden;}
.section.event_04 .event_04_btn_01{position:absolute; width:21.02%; top:40%; left:39.49%; font-size:0; animation:link01 .8s linear infinite;}
.section.event_04 .event_04_btn_02{position:absolute; width:21.02%; top:75%; left:39.49%; font-size:0; animation:link01 .8s linear infinite;}




@keyframes link01{
    0%{ transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); }
    50%{ transform:scale(1.05); -webkit-transform:scale(1.05); -moz-transform:scale(1.05);  }
    100%{ transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}


/* popup */

	.overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5;  /* 이거 조정으로 농도 결정 높으면 어둡  */
	  filter: alpha(opacity = 50);
	   /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

	.popup_layer {position:absolute; width:50%; top:15%; margin-left:25%; z-index:100; display:;}
	.close {position:absolute; background-image:url(../images/pop_close.png);  background-size:cover; width:10%; height:12.127%; right:0%; top:0%;}
	.close2 {float:left }

	.close_btn {position:absolute; bottom:0;width:100%;}
	.close_btn img{width:100%;}

	.close_btn2 {position:absolute; bottom:34%;width:100%;}
	.close_btn2 img{width:100%;}

	.pop_bg img{width:100%;}

	.info_01 {position:absolute; top:36%; left:29%; width:54%; height:8%;}
	.info_01 .name{width:100%; height:100%;padding:5%; border:0; background:#ebebeb; border-radius: 100px; font-size:20px;}

	.info_02 {position:absolute; top:46%; left:29%; width:54%; height:8%;}
	.info_02 .phone{width:100%; height:100%;padding:5%; border:0; background:#ebebeb; border-radius: 100px; font-size:20px;}

	.input_chb {position:absolute; top:72.5%; left:17.5%; width:5%; height:4%;}
	.input_chb input{ width:100%; height:100%;}
	.input_chb label {color: #999; font-size: 1em; left:7%;position: absolute; top:0; letter-spacing:-1px;}

	.sns {position:absolute; top:56%; left:8%; width:84%; }
	.sns li{float:left; width:19%; margin-left:1%;}

	.privacy_btn{position:absolute; top:72%; left:67%; width:17%; height:5%; cursor:pointer;}


	/* 개인정보 */
	.privacy {position:absolute;width:80%;height:60%;left:10%;top:17%;color:#666; letter-spacing:-1px;}
	.privacy .box_ok{overflow:auto;height:100%;padding:20px;background:#fff;box-sizing: border-box;}
	.privacy .box_ok ul li{padding-bottom:10px;line-height:1.6;font-size: 12px;}

@media all and (max-width:1024px){
html { font-size:36%; }
.pc {display:none;}
.m {display:block;}


/* section - main */
.section.main .box {position:relative; text-align:center; overflow:hidden;}
.section.main .main_tit {position:absolute; width:100%; top:6%; left:0%; font-size:0;}
.section.main .main_step {position:absolute; width:100%; top:44%; left:0%; font-size:0;}
.section.main .main_gift {position:absolute; width:100%; top:72%; left:0%; font-size:0;}
.section.main .main_hashtag {position:absolute;width: 29%;top: 52.8%;left: 75.5%;font-size:0;z-index:1;}





/* section - event_01 */
.section.event_01 .box {max-width:100%;}
.section.event_01 .event_01_tit {position:absolute; width:100%; top:8%; left:0%; font-size:0;}
.section.event_01 .event_01_btn{position:absolute; width:70%; top:80%; left:15%;}

	.slide-area {
	width:70%;
	top:33%;
	left:15%;
	}

	.guide-loop .slick-prev {left:-10%;}
	.guide-loop .slick-next {right:-10%;}
	.guide-loop .slick-arrow{width:30px; height:30px; top: 80px !important;}

	.slide-area .guide-loop {
		width: calc(100% + 32px);
		margin: 0 -16px;
	}
	.slide-area .guide-loop .slick-slide {
		margin: 0 5px;
	}

	.guide-loop .slick-dots li {
		margin: 0 3px;
	}


.guide-loop .slick-dots {
	width: auto;
	left: 50%;
	bottom: -20px;
	transform: translateX(-50%);
}



/* section - notice */
.section.notice .box {max-width:100%;}
.section.notice .notice_txt{position:absolute; width:100%; top:18%; left:0%; font-size:0;}



/* section - event_02 */
.section.event_02 .box {max-width:100%;}
.section.event_02 .event_02_tit {position:absolute; width:100%; top:8%; left:0%; font-size:0;}
.section.event_02 .event_02_01 {position:absolute; width:100%; top:33%; left:0%; font-size:0;}
.section.event_02 .event_02_02 {position:absolute; width:100%; top:79%; left:0%; font-size:0;}





/* section - event_03 */
.section.event_03 .box {max-width:100%;}
.section.event_03 .event_03_01 {position:absolute; width:100%; top:18%; left:0%; font-size:0;}
.section.event_03 .event_03_02 {position:absolute; width:100%; top:85%; left:0%; font-size:0;}



/* section - event_04 */
.section.event_04 .box {max-width:100%;}
.section.event_04 .event_04_btn_01{position:absolute; width:70%; top:37%; left:15%;}
.section.event_04 .event_04_btn_02{position:absolute; width:70%; top:75%; left:15%;}



/* popup */

	.overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5;  /* 이거 조정으로 농도 결정 높으면 어둡  */
	  filter: alpha(opacity = 50);
	   /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}

	.popup_layer {position:absolute; width:80%; top:15%; margin-left:10%; z-index:100; display:;}
	.close {position:absolute; background-image:url(../images/pop_close.png);  background-size:cover; width:10%; height:7.804%; right:3%; top:2%;}
	.close2 {float:left }

	.close_btn {position:absolute; bottom:0;width:100%;}
	.close_btn img{width:100%;}
	.pop_bg img{width:100%;}






}
