@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;400;500;600;700;800;900&display=swap');


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

/* 공통 */
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:360px; letter-spacing:-1px;}
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;}
.top_btn {background:#9b6cf5;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; height:auto; padding:90px 0; text-align:center;}
.section .inner {position:relative; width:1180px; /*height:100%;*/ margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section .benefit {display:inline-block; margin-bottom:10px; background:linear-gradient(to right, #9f73f5, #5ee9e8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:30px; font-weight:700; color:transparent; letter-spacing:-2px; line-height:1.2;}
.section .benefit em {font-weight:inherit;}
.section h3 {font-size:50px; font-weight:300; color:#25283a; letter-spacing:-5px; line-height:1.3;}
.section h3 + p {padding-top:5px; font-size:28px; color:#616477;}
.section .spartan, #section4 .cont dt em {font-family:'Spartan', sans-serif;}
.startBtn em, .link em {font-family:'Dotum', sans-serif;}

/* #section0 */
#section0 {background:url('/images/event/20210701/sec0_bg.jpg') no-repeat center top; background-size:cover; padding:120px 0 40px;}
#section0 .txt {float:left; text-align:left;}
#section0 .txt .stxt {margin-left:5px;}
#section0 .txt .stit {margin:30px 0 50px;}
#section0 .txt .sbtn {margin-left:0;}
#section0 .startBtn {display:inline-block; width:300px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:#25252e; padding:20px; text-align:center; transition:all linear 0.5s;}
#section0 .startBtn span {display:inline-block; background:linear-gradient(to right, #9f73f5, #5ee9e8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:26px; font-weight:900; color:transparent; letter-spacing:-2px; line-height:1.0; transition:all linear 0.5s;}
#section0 .startBtn:hover {border-color:transparent; background:#000;}
#section0 .startBtn:hover span {background:linear-gradient(to right, #5ee9e8, #9f73f5); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#section0 .startBtn em {display:inline-block; vertical-align:middle; margin:0 0 5px 5px; font-family:'Dotum', sans-serif; font-size:0.8em; font-weight:inherit;}
#section0 .img {float:right; margin:20px -180px 0 0;}

/* #section1 */
#section1 {background:url('/images/event/20210701/sec1_bg.jpg') no-repeat center top; background-size:cover; padding-bottom:30px;}
#section1 .txt {float:left; text-align:left;}
#section1 h3 em {font-weight:700; color:#9b6cf5;}
#section1 h3 .strike {position:relative; display:inline-block; width:224px; margin-left:5px; text-align:left; font-size:0.9em; letter-spacing:-6px;}
#section1 h3 .strike:after {display:block; content:''; position:absolute; top:10px; left:0; width:100%; height:15px; background:url('/images/event/20210701/sec1_arr.png') no-repeat right center;}
#section1 h3 .small {font-size:0.9em;}
#section1 .cont {width:540px; margin:30px 0 60px; text-align:left;}
#section1 .cont dt {display:inline-block; margin-right:5px; font-size:18px; font-weight:700; color:#2a343c;}
#section1 .cont dd {display:inline-block; font-size:18px; font-weight:300; color:#2a343c;}
#section1 .guide {width:540px; text-align:left;}
#section1 .guide dl {box-shadow:0 0 10px #f2efff; border-radius:10px; background:#fff; padding:30px;}
#section1 .guide dt {margin-bottom:5px; font-size:20px; font-weight:700; color:#605488;}
#section1 .guide dd {font-size:16px; color:#605488;}
#section1 .img {float:right; margin:150px -50px 0 0;}

/* #section2 */
#section2 {background:url('/images/event/20210701/sec2_bg.jpg') no-repeat center top; background-size:cover;}
#section2 .guide {width:1026px; margin:50px auto 30px; border-radius:20px; background:#fff; padding:60px 0;}
#section2 .guide ul {float:left; width:50%;}
#section2 .guide ul + ul {float:right; width:50%; border-left:1px solid #d9d9db;}
#section2 .guide li {position:relative; padding-top:60px; font-size:24px; font-weight:700; color:#25283a;}
#section2 .guide li:after {display:block; content:''; position:absolute; top:0; left:50%; margin:15px 0 0 -29px; width:58px; height:30px; background:url('/images/event/20210701/sec2_arr.png') no-repeat;}
#section2 .guide li:first-child {padding-top:0;}
#section2 .guide li:first-child:after {background:none;}
#section2 .purple {color:#9488f3;}
#section2 .red {color:#e42847;}
#section2 .start {display:inline-block; background:#25252e; padding:20px 60px; transition:all linear 0.5s;}
#section2 .start em {display:inline-block; background:linear-gradient(to right, #9f73f5, #5ee9e8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:24px; font-weight:700; color:transparent; letter-spacing:-2px; line-height:1.0; transition:all linear 0.5s;}
#section2 .cont {width:1026px; margin:0 auto; border-radius:10px; background:#c9ece7; padding:20px 30px; text-align:left;}
#section2 .cont dt {display:inline-block; width:70px; font-size:15px; font-weight:700; color:#2a343c; }
#section2 .cont dd {display:inline-block; padding-left:10px; text-indent:-10px; font-size:15px; color:#616477;}
#section2 .cont dd li {text-indent:0;}

/* #section3 */
#section3 {background:url('/images/event/20210701/sec3_bg.jpg') no-repeat center top; background-size:cover;}
#section3 .inner {width:950px; margin:0 auto;}
#section3 .inner + .inner {padding-top:80px;}
#section3 h3 {display:inline-block; position:relative; font-size:28px; font-weight:600; letter-spacing:-2px;}	
#section3 h3:before {display:block; content:''; position:absolute; top:12px; left:-25px; width:13px; height:14px; background:url('/images/event/20210701/sec3_prem_icon1.png') no-repeat;}
#section3 h3:after {display:block; content:''; position:absolute; top:12px; right:-25px; width:13px; height:14px; background:url('/images/event/20210701/sec3_prem_icon1.png') no-repeat;}
#section3 h3 .under {position:relative;}
#section3 h3 .under span {position:relative;}
#section3 h3 .under:before {display:block; content:''; position:absolute; bottom:5px; left:0; right:0; width:100%; height:15px; background:#b2e3ff;}
#section3 h3 em {font-weight:inherit; color:#279ada;}
#section3 .box .link {padding:12px 0; text-align:right;}
#section3 .box .link a {border-bottom:1px solid #848484; font-size:15px; font-weight:300; color:#666;}
#section3 .box .link em {font-weight:500; color:inherit;}
#section3 .box dl {float:left; width:calc(50% - 7px); border-radius:20px; overflow:hidden;}
#section3 .box dl + dl {float:right;}
#section3 .box dt {background:#43b1ef; padding:15px 0; font-size:26px; font-weight:700; color:#fff; letter-spacing:-2px;}
#section3 .box dd {position:relative; height:370px; background:#fff url('/images/event/20210701/sec3_prem_icon3.png') no-repeat calc(100% - 40px) 170px; padding:40px 40px 40px 50px; text-align:left;}	
#section3 .box em {color:#279ada;}
#section3 .box .list {position:relative; font-size:25px; font-weight:300; color:#25283a; letter-spacing:-3px;}	
#section3 .box .list:before {display:block; content:''; position:absolute; top:15px; left:-22px; width:14px; height:12px; background:url('/images/event/20210701/sec3_prem_icon2.png') no-repeat;}
#section3 .box .list strong {position:relative; font-weight:500; line-height:1.2;}
#section3 .box .list strong:after {display:block; content:''; position:absolute; bottom:1px; left:0; right:0; width:100%; height:2px; background:#b4e0f9;}
#section3 .box .desc {padding-top:15px; font-size:15px; color:#798c97;} 
#section3 .box .regBtn {position:absolute; left:0; right:0; bottom:40px; text-align:center;}
#section3 .box .regBtn a {display:inline-block; box-shadow:1px 2px 5px rgba(0,0,0,0.1); border-radius:50px; background:#279ada; padding:12px 80px; font-size:20px; font-weight:700; color:#fff; transition:all linear 0.5s;}
#section3 .box .regBtn a:hover {background:#0676b4;}
/* 입점형 */
#section3 .adva h3:before {background:url('/images/event/20210701/sec3_adva_icon1.png') no-repeat;}
#section3 .adva h3:after {background:url('/images/event/20210701/sec3_adva_icon1.png') no-repeat;}
#section3 .adva h3 .under:before {background:#b6eded;}
#section3 .adva h3 em {color:#2abebb;}
#section3 .adva .box dt {background:#55d7d4;}
#section3 .adva .box dd {height:390px; background:#fff url('/images/event/20210701/sec3_adva_icon3.png') no-repeat calc(100% - 40px) 170px;}
#section3 .adva .box .list:before {background:url('/images/event/20210701/sec3_adva_icon2.png') no-repeat;}
#section3 .adva .box .list strong:after {background:#8ee4e2;}
#section3 .adva .box em {color:#2abebb;}
#section3 .adva .box .regBtn a {background:#2abebb;}
#section3 .adva .box .regBtn a:hover {background:#049d9a;}

/* #section4 */
#section4 {background:#26282f;}
#section4 h3 {font-size:42px; font-weight:300; color:#fff; letter-spacing:-3px; line-height:1.3;}
#section4 .cont {margin:70px auto 50px;}
#section4 .cont dl {position:relative; display:inline-block;}
#section4 .cont dl:after {display:block; content:''; position:absolute; top:50%; left:-21px; margin-top:-10px; width:28px; height:7px; background:url('/images/event/20210701/sec4_arr.png') no-repeat;}
#section4 .cont dl:first-child:after {background:none;}
#section4 .cont dt {display:inline-block; width:144px; height:144px; border-radius:50%; border:1px solid #fff; margin:18px 18px 10px; padding-top:30px;}
#section4 .cont dt em {font-size:16px; font-weight:600; color:#fff;}
#section4 .cont dt p {font-size:20px; color:#fff; letter-spacing:-1px; line-height:1.2;}
#section4 .cont dd {font-size:14px; color:#79b9ee; line-height:1.2;}
#section4 .cont dl.kg dd {color:#b2a8e6;}
#section4 .cont .link {padding-top:30px;}
#section4 .cont .link a {border-bottom:1px solid #fff; font-size:15px; font-weight:300; color:#fff;}
#section4 .guide {width:1066px; margin:0 auto; border-radius:10px; background:#2b2d34; padding:20px 30px;} 
#section4 .guide li {padding-left:6px; text-indent:-6px; text-align:left; font-size:14px; font-weight:300; color:#9393a5; line-height:1.6;}

/* #section5 */
#section5 {background:url('/images/event/20210701/sec5_bg.jpg') no-repeat center top; background-size:cover; padding:90px 0 20px;}
#section5 h3 {font-size:42px; font-weight:300; color:#fff; letter-spacing:-3px; line-height:1.3;}
#section5 .startBtn {display:inline-block; width:350px; margin:30px auto 70px; box-shadow:5px 5px 10px rgba(0,0,0,0.3); background:#25252e; padding:25px; transition:all linear 0.5s;}
#section5 .startBtn span {display:inline-block; background:linear-gradient(to right, #9f73f5, #5ee9e8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size:30px; font-weight:900; color:transparent; letter-spacing:-2px; line-height:1.0; transition:all linear 0.5s;}
#section5 .startBtn:hover {border-color:transparent; background:#000;}
#section5 .startBtn:hover span {background:linear-gradient(to right, #5ee9e8, #9f73f5); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
#section5 .startBtn em {display:inline-block; vertical-align:middle; margin:0 0 5px 5px; font-size:0.8em; font-weight:inherit;}
#section5 p {font-size:17px; font-weight:300; color:#fff; letter-spacing:-0.5px; line-height:1.3;}
#section5 p span {display:inline-block; vertical-align:middle; margin-bottom:0.5em; font-size:0.8em;}
#section5 p span.slash {margin-bottom:0.3em; font-size:0.8em;}
#section5 p span.end {display:none; margin-bottom:0.3em; font-size:0.8em;}
#section5 p .link {border-bottom:1px solid #fff; color:#fff;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {	
	.section .inner {width:100%; padding:0 20px;}
	#section1 .img {margin-top:-250px;}
}
@media only screen and (max-width:1066px) {
	#section4 .guide {width:100%;}
}
@media only screen and (max-width:1026px) {
	#section2 .guide,
	#section2 .cont {width:100%;}
}
@media only screen and (max-width:1006px) {
	#section0 .txt {width:100%; text-align:center;}
	#section0 .img {margin:30px -100px 0 0;}
	#section1 .txt {width:100%; text-align:center;}	
	#section1 .cont {margin:30px auto 40px; padding-left:30px;}
	#section1 .guide {margin:auto;}
	#section1 .img {margin:30px -10px 0 0;}
}
@media only screen and (max-width:950px) {
	#section3 .inner {width:100%; padding:0 20px;}
	#section3 h3 {margin:0 30px;}
}
@media only screen and (max-width:830px) {
	.section {padding:80px 0;}
	#section2 .guide {padding-left:60px; padding-right:60px;}
	#section2 .guide ul {width:100%; padding-bottom:60px;}
	#section2 .guide ul + ul {width:100%; border-left:0; border-top:1px solid #d9d9db; padding-top:60px; padding-bottom:0;}
	#section3 .box dl {width:100%;}
	#section3 .box dl + dl {margin-top:20px;}
}
@media only screen and (max-width:540px) {
	#section1 .txt, #section1 .img,
	#section1 .cont, #section1 .guide {width:100%;}
}
@media only screen and (max-width:500px) {
	.section {padding:60px 0;}	
	.section h3 {font-size:32px !important; letter-spacing:-3px;}
	.section h3 + p {font-size:24px;} 
	#section0 {padding-top:100px;}
	#section1 h3 .strike {width:140px;}
	#section1 h3 .strike:after {top:2px;}
	#section1 .guide dd br {display:none;}
	#section2 .guide li br {display:none;}
	#section2 .start {width:100%; padding-left:20px; padding-right:20px;}
	#section2 .cont {padding:20px;}
	#section3 .inner + .inner {padding-top:60px;}
	#section3 h3 {font-size:28px !important;}
	#section3 .box .list br {display:none;}
	#section4 .cont {margin-top:50px;}
	#section4 .guide {padding:20px;}	
	#section5 {padding-top:60px;}
	#section5 .startBtn {margin-bottom:50px;}
	#section5 p > span.end {display:inline-block;}
	#section5 p br {display:none;}
}
@media only screen and (max-width:400px) {
	#section0 .startBtn {width:100%;}
	#section2 .guide {padding:50px 30px;}
	#section2 .guide ul + ul {padding-top:50px;}
	#section3 .adva .box dd {height:450px;}
	#section5 .startBtn {width:100%;}
}