@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {font-family:'GmarketSansMedium'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight:normal; font-style:normal;}
@font-face {font-family:'GmarketSansBold'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight:normal; font-style:normal;}

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2022-06-29
Modify Date : 2022-06-30
File : /event/2022/summer
*******************************************/

/* 공통 */
body, div, dl, dt, li, ul, ol, li, h1, h2, h1, h2, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {font-family:"Noto Sans KR", sans-serif; /*transition:all 0.3s ease;*/}
body {min-width:320px; letter-spacing:-1px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:1;}
#event_footer {border-color:#d0d0d0; background:#fff;}
#wrap {position:relative; overflow:hidden; opacity:0;}
.top_btn {background:#0052f6;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; text-align:center; transition:all 0.3s ease;}
.section .inner {position:relative; width:auto; max-width:1180px; margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}

/* 뷰레이어 */
.view_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); z-index:2;}
.view_layer {display:none; position:fixed; top:50%; left:50%; margin:-210px 0 0 -265px; width:530px; background:#fff; padding:20px 25px 25px; text-align:left; z-index:3;}
.view_layer h1 {margin-bottom:15px; font-size:36px; font-weight:700; color:#333; letter-spacing:-2px; line-height:1.2}
.view_layer h2 {margin-bottom:15px; font-size:30px; font-weight:700; color:#333; letter-spacing:-2px; line-height:1.2}
.view_layer .close {position:absolute; top:30px; right:30px; width:22px; height:23px; background:url('/images/event/20220104/layer_close.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer table {width:100%;}
.view_layer th {border-left:1px solid #ddd; background:#222; padding:10px 0; text-align:center; font-size:16px; color:#fff; line-height:1.2;}
.view_layer td {position:relative; background:#fff; padding:5px 0; text-align:center; font-size:16px; color:#333; line-height:1.2;}
.view_layer .bg td {background:#f2f2f2;}
.view_layer td:nth-child(2):before {display:block; content:'+'; position:absolute; left:-5px; top:5px; font-size:16px; color:#aaa;}
.view_layer td:nth-child(3):before {display:block; content:'='; position:absolute; left:-5px; top:5px; font-size:16px; color:#aaa;}
.view_layer td:nth-child(4) {border-left:1px solid #ddd;}

/* #section0 */
body {background:#fae5a9 url('/images/event/20220701/sec0_bg.png') no-repeat center 61px;}
#section0 {background:#fae5a9 url('/images/event/20220701/sec0_bg.png') no-repeat center top; padding:106px 0 200px;}
#section0 .date {margin-bottom:-20px;}
#section0 .tit {margin-bottom:10px;}
#section0 .txt {margin-bottom:30px;}

/* #section1 */
#section1 {background:url('/images/event/20220701/sec1_bg.png') no-repeat center bottom; padding-bottom:286px;}
#section1 .step {width:100%; position:absolute; left:50%; top:0; transform:translate(-50%, -50px);}
#section1 .tit {margin-bottom:-100px; padding-top:130px; z-index:1;}
#section1 .img {margin-bottom:-60px;}
#section1 .table {margin:0 -20px;}
#section1 .table li {display:inline-block; padding:20px; vertical-align:top;}
#section1 .box {margin:0 auto 50px; border-radius:15px; background:#fff; padding:60px;}
#section1 .box .txt {margin-bottom:30px;}
#section1 .box li {display:inline-block; padding:5px; vertical-align:top;}
#section1 .pop {position:relative;}
#section1 .pop .pop_btn {display:inline-block; margin:10px 10px 40px; border-radius:50px; border:1px solid #4a58d3; padding:5px 10px; font-size:18px; color:#4a58d3; cursor:pointer;}
#section1 .pop .layer1 {display:none; position:absolute; left:50%; bottom:50%; transform:translate(-67%, 110%); z-index:1;}
#section1 .pop .layer2 {display:none; position:absolute; left:50%; bottom:50%; transform:translate(-32%, 110%); z-index:1;}
#section1 a {display:inline-block; padding:10px;}

/* #section2 */
#section2 {background:#f4e2e6 url('/images/event/20220701/sec2_bg.png') no-repeat center bottom; padding-bottom:216px;}
#section2 .step {width:100%; position:absolute; left:50%; top:0; transform:translate(-50%, -150px);}
#section2 .tit {margin-bottom:50px; padding-top:30px;}
#section2 .img {margin-bottom:-20px;}
#section2 .table {margin:0 -20px 30px;}
#section2 .table li {display:inline-block; padding:20px; vertical-align:top;}
#section2 .table .desc {display:block; text-align:right; padding-top:10px; font-size:16px; color:#be8e98;}
#section2 .txt {margin-bottom:50px;}
#section2 a {display:inline-block; padding:10px;}

/* #section3 */
#section3 {background:#b0f0fa; padding-bottom:120px;}
#section3 .step {width:100%; position:absolute; left:50%; top:0; transform:translate(-50%, -80px);}
#section3 .tit {margin-bottom:50px; padding-top:100px;}
#section3 .img {margin-bottom:-20px;}

/* #section4 */
#section4 {background:#27292e; padding:100px 0 120px;}
#section4 .step {margin-bottom:50px;}
#section4 .tit {display:inline-block; position:relative; margin-bottom:100px;}
#section4 .icon {position:absolute; bottom:0; right:-120px;}

/* #section5 */
#section5 {background:#ffffff; padding:70px 0;}
#section5 .inner {text-align:left;}
#section5 .tit {float:left; width:180px; padding-top:60px; text-align:center; font-size:20px; font-weight:700; color:#06070c;}
#section5 .tit > p {padding-top:10px; font-weight:inherit;}
#section5 .list {float:left; padding-left:80px;}
#section5 .list li {padding-top:10px; padding-left:9px; text-indent:-9px; font-size:16px; color:#06070c;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {	
	.section .inner {padding:0 20px;}
	#section1 {background-color:#fae5a9;}
	#section5 .tit {width:100%; padding-top:0;}
	#section5 .list {padding-left:0;}
}
@media only screen and (max-width:1024px) {	
	#section1 .tit {margin-bottom:-60px;}
	#section1 .img {margin-bottom:-20px;}
}
@media only screen and (max-width:768px) {
	#section0 {background-position:center bottom; padding:70px 0 100px;}
	#section0 .date {margin-bottom:-20px;}
	#section1 .tit {margin-bottom:30px; padding-top:120px;}
	#section1 .img {margin-bottom:50px; transform:scale(1.5);}
	#section1 .box {padding:40px;}
	#section1 .box ul {margin:0 -15px;}
	#section1 .box li {width:calc(50% - 5px);}
	#section1 .pop .layer1 {left:20px; right:20px; bottom:50%; transform:translate(0, 110%); text-align:left;}
	#section1 .pop .layer2 {left:20px; right:20px; bottom:50%; transform:translate(0, 110%); text-align:right;}
	#section2 .tit {padding-top:20px;}
	#section3 .tit {padding-top:80px;}
	#section4 {padding:80px 0;}
	#section4 .tit {margin-bottom:70px;}
	#section4 .step {margin-bottom:30px;}
}
@media only screen and (max-width:450px) {	
	#section0 .date {margin-bottom:10px;}
	#section0 .tit {margin-bottom:20px; transform:scale(1.2);}
	#section1 {padding-bottom:266px;}
	#section1 .tit {padding-top:80px;}
	#section2 .step {transform:translate(-50%, -110px);}
	#section3 .tit {padding-top:45px;}
	#section4 .step {margin-bottom:40px;}
}
@media only screen and (max-width:375px) {
	#section0 {padding-top:50px;}
	#section0 .date {transform:scale(0.8); margin-bottom:0;}
	#section1 {padding-bottom:170px;}
	#section1 .tit {padding-top:60px;}
	#section1 .img {transform:scale(1.8);}
	#section1 .box .txt {margin-bottom:20px;}
	#section1 .table .pop_btn {margin:10px 5px 40px; font-size:16px;}
	#section2 {padding-bottom:150px;}
	#section2 .step {transform:translate(-50%, -90px);}
	#section2 .table .desc {text-align:center;}
	#section3 .tit {padding-top:25px;}
	#section3 .img {padding-top:20px; transform:scale(1.2);} 
	#section4 .step {margin-bottom:30px;}
}