@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2021-07-13
Modify Date : 2021-07-14
File : /event/2021/shopbuild
*******************************************/

body, div, dl, dt, li, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {font-family:"Noto Sans KR", sans-serif;}
body {min-width:320px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:5;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.show_mot {position:relative; opacity:0; top:20px;}
.top_btn {background:#ff5b45;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section {position:relative; height:auto; padding:120px 0; text-align:center;}
.section .inner {position:relative; width:1180px; /*height:100%;*/ margin:auto; text-align:center;}
.section h3 {margin-bottom:50px; font-size:36px; font-weight:700; color:#252432; letter-spacing:-3px; line-height:1.0;}
.section h3 a {display:inline-block; margin-top:15px; border-bottom:1px solid #224db7; font-size:19px; font-weight:700; color:#224db7; letter-spacing:-1px; line-height:1.2;}
.section h3 .alayer {display:none; position:absolute; width:100%; padding-top:10px; text-align:center; z-index:1;}
.section h3 .alayer span {display:inline-block; box-shadow:1px 5px 2px rgba(0,0,0,0.1); border-radius:5px; border:1px solid #888; background:#fff; padding:10px 30px; font-size:15px; font-weight:300; color:#000; letter-spacing:-1px; line-height:1.4;}
.section.x2 {margin-top:-20px; padding-top:0;}

/* #section0 */
body {background:url('/images/event/20220901/sec0_bg.jpg') no-repeat center 61px;}
#section0 {background:#c5deff url('/images/event/20220901/sec0_bg.jpg') no-repeat center bottom; background-size:cover; padding:80px 0 50px;}
#section0 .txt {position:relative;}
#section0 .startBtn {position:relative; margin-top:420px;}
#section0 .startBtn > a {display:inline-block; width:270px; box-shadow:5px 10px 3px rgba(0,0,0,0.2); border-radius:10px; background:#000; padding:15px; text-align:center; transition:all linear 0.5s; font-size:30px; font-weight:700; color:#ff5b45;}
#section0 .startBtn > a:hover {border-color:transparent; background:#ff5b45; color:#fff;}

/* #section1 */
#section1 {background:#4862ed;}
#section1 .step {display:inline-block; margin-bottom:-30px;}
#section1 .box {border-radius:20px; background:#fff; padding:80px 40px;}
#section1 .box + .step {margin-top:100px;}
#section1 .box > div {display:inline-block; vertical-align:top; box-sizing:border-box; width:33%; transition:all 0.3s ease 0s;}
#section1 .box > div:hover {/*transform:translate(0, -5px);*/}
#section1 .box h4 {margin:30px 0 15px; font-size:22px; font-weight:700; color:#252432; letter-spacing:-2px; line-height:1.2;}
#section1 .box h4 em {font-weight:inherit; color:#4862ed;}
#section1 .box p {font-size:15px; color:#252432; letter-spacing:-1px;}
#section1 .box .btn {display:inline-block; vertical-align:middle; width:81px; height:21px; margin-top:10px; background:url('/images/event/20210715/sec1_btn.png') no-repeat; text-indent:-9999px;}
#section1 .box > div.frelocate {display:block; position:relative; width:100%; margin-top:70px;}
#section1 .box > div.frelocate .img {position:relative; height:240px; border-radius:7px; overflow:hidden;}
#section1 .box > div.frelocate .img img {height:100%; max-width:fit-content;}
#section1 .box > div.frelocate .txt {position:absolute; top:50%; transform:translateY(-55%); left:10%; right:10%; text-align:left; font-size:22px; font-weight:600; color:#fff; letter-spacing:-1px;}
#section1 .box > div.frelocate .txt em {font-weight:inherit; color:#93a4ff;}
#section1 .box > div.frelocate .txt a {display:inline-block; vertical-align:middle; margin-bottom:5px; border-radius:50px; background:#93a4ff; padding:5px 15px 6px; font-size:13px; font-weight:normal; color:#fff; line-height:1.0;}
@media only screen and (max-width:1023px) {
	#section1 .box > div.frelocate .img {background:#323232; }
	#section1 .box > div.frelocate .img img {position:absolute; top:0; bottom:0; right:0; margin-right:-10%;}
}
@media only screen and (max-width:860px) {
	#section1 .box > div.frelocate {margin-top:40px;}
	#section1 .box > div.frelocate .img img {right:-20%;}	
	#section1 .box > div.frelocate .txt {/*position:relative; top:0; transform:translateY(0); left:0; margin-top:20px; text-align:center; color:#333;*/ }
	#section1 .box > div.frelocate .txt em {/*color:#4862ed;*/}
	#section1 .box > div.frelocate .txt a {/*background:#4862ed;*/}
}
@media only screen and (max-width:640px) {
	#section1 .box > div.frelocate .img img {right:-50%;}	
	#section1 .box > div.frelocate .txt br {display:none;}
}
@media only screen and (max-width:480px) {
	#section1 .box > div.frelocate .img {height:180px;}
	#section1 .box > div.frelocate .img img {right:-80%;}
	#section1 .box > div.frelocate .txt {font-size:16px;}	
}

/* #section2 */
#section2 {background:#2c2b2b;}
#section2 .step {display:inline-block; margin-bottom:-30px;}
#section2 .box {border-radius:20px; background:#fff; padding:80px 40px;}
#section2 .box + .step {margin-top:100px;}
#section2 .box > div {vertical-align:top; text-align:left; box-sizing:border-box; width:830px; margin:20px auto 0; border-top:1px solid #ededed; padding-top:20px; transition:all 0.3s ease 0s;}
#section2 .box > div:hover {/*transform:translate(0, -5px);*/}
#section2 .box > div.first {margin-top:-20px; border-top:0;}
#section2 .box .thumb {float:left; vertical-align:top;}
#section2 .box h4 {margin:20px 0 15px 300px; font-size:22px; font-weight:700; color:#252432; letter-spacing:-2px; line-height:1.2;}
#section2 .box h4 em {font-weight:inherit; color:#4862ed;}
#section2 .box p {margin-left:300px; font-size:15px; color:#252432; letter-spacing:-1px;}
#section2 .box .btn {display:inline-block; vertical-align:middle; width:81px; height:21px; margin:-3px 0 0 5px; background:url('/images/event/20210715/sec1_btn.png') no-repeat; text-indent:-9999px;}

/* #section3 */
#section3 {background:#cbedff;}
#section3 .step {display:inline-block; margin-bottom:-30px;}
#section3 .box {border-radius:20px; background:#fff; padding:80px 40px;}
#section3 .box > div {vertical-align:top; box-sizing:border-box; margin:12px auto 0; transition:all 0.3s ease 0s;}
#section3 .box > div:hover {/*transform:translate(0, -5px);*/}

/* #section4 */
#section4 {background:#181f27 url('/images/event/20210715/sec4_bg.jpg') no-repeat center bottom; padding:100px 0 30px;}
#section4 .startBtn {margin:-10px auto 60px;}
#section4 .startBtn > a {display:inline-block; width:270px; border-radius:10px; background:#ff5b45; padding:20px; font-size:20px; font-weight:700; color:#fff; transition:all linear 0.5s;}
#section4 .startBtn > a:hover {background:#43689f;}
#section4 .startBtn + p {font-size:17px; font-weight:300; color:#7c7e81; letter-spacing:-0.5px; line-height:1.3;}
#section4 p span {display:inline-block; vertical-align:middle; margin-bottom:0.5em; font-size:0.8em; color:#54575d;}
#section4 p span.slash {margin-bottom:0.3em; font-size:0.8em;}
#section4 p span.end {display:none; margin-bottom:0.3em; font-size:0.8em;}
#section4 p .btn {display:inline-block; vertical-align:middle; width:81px; height:25px; margin-top:-5px; background:url('/images/event/20210715/sec4_btn.png') no-repeat; text-indent:-9999px;}

@media only screen and (max-width:1180px) {
	.section .inner {width:100%; padding:0 20px;}
}
@media only screen and (max-width:950px) {
	.section {padding:100px 0;}
	.section h3 .alayer {margin-top:5px;}
	.section.x2 {margin-top:0;}
	#section1 .box > div {width:100%;}
	#section1 .box > div + div {margin-top:30px;}
	#section1 .box + .step {margin-top:70px;}	
	#section2 .box > div {width:100%; text-align:center; border-top:0; padding-top:0;}
	#section2 .box > div + div {margin-top:30px;}
	#section2 .box > div.first {margin-top:0;}
	#section2 .box .thumb {float:none;}
	#section2 .box h4 {margin-left:0;}
	#section2 .box p {margin-left:0;}
	#section2 .box + .step {margin-top:70px;}	
}
@media only screen and (max-width:500px) {
	.section {padding:70px 0;}
	.section h3 {margin-bottom:40px; font-size:32px;}
	#section0 .startBtn {margin-top:320px;}
	#section1 .box,
	#section2 .box,
	#section3 .box {padding:60px 30px 40px;}
	#section4 {padding-top:70px;}
}
@media only screen and (max-width:375px) {
	#section0 .startBtn {margin-top:250px;}
	#section1 .box p br,
	#section2 .box p br {display:none;}
	/*#section0 .startBtn > a,
	#section4 .startBtn > a {width:100%;}*/
	#section4 p span.end {display:inline-block;}
	#section4 p br {display:none;}
}