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


/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2022-04-13
Modify Date : 2022-04-13
File : /event/2022/kakaosync
*******************************************/

/* 공통 */
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:#f0f0f0; background:#fff;}
#wrap {position:relative; /*max-width:2000px; margin:0 auto;*/ overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#ffd517;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; height:auto; padding:100px 0; text-align:center; transition:all 0.3s ease;}
.section .inner {position:relative; width:auto; height:100%; margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section hgroup {margin-bottom:70px;}
.section hgroup .icon {display:inline-block; margin-bottom:25px;}
.section h1 {position:relative; margin-bottom:20px; font-size:46px; font-weight:700; color:#191f28; letter-spacing:-3px; line-height:1.3;}
.section h1 span {font-weight:300;}
.section h1 + p {font-size:20px; font-weight:300; color:#191f28; line-height:1.6;}
.startBtn em, .link em {font-family:'Dotum', sans-serif;}

/* 뷰레이어 */
.view_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:2;}
.view_layer {letter-spacing:0px; display:none; position:fixed; top:50%; left:50%; margin:-230px 0 0 -590px; width:1180px; background:#fff; padding:50px; text-align:left; z-index:3; overflow-y:auto;}
.view_layer h1 {font-size:18px; font-weight:600; color:#191f28; letter-spacing:-1px;}
.view_layer dl dt {padding:15px 0 5px 15px; text-indent:-15px; font-size:16px; color:#191f28; letter-spacing:-1px; line-height:1.7;}
.view_layer dl dd {padding-left:15px; font-size:16px; color:#747474; letter-spacing:-1px; line-height:1.7;}
.view_layer dl dd p {padding-left:8px; text-indent:-8px;}
.view_layer dl a.link {margin-left:10px; border-bottom:1px solid #888;}
.view_layer dl a.link em {font-weight:600;}

.view_layer .close {position:absolute; top:30px; right:30px; width:20px; height:20px; background:url('/images/event/20210104/layer_close.png') no-repeat center; cursor:pointer;}
@media only screen and (max-width:800px) {
	.view_layer {width:auto; left:10px; right:10px; margin-left:0;}
}
@media only screen and (max-width:600px) {
	.view_layer {top:10px; margin-top:0; bottom:10px; padding:30px;}
	.view_layer br {display:none;}
}

/* #section0 */
body {background:#ffe376 url('/images/event/20220413/sec0_bg.jpg') no-repeat center 61px;}
#section0 {background:#ffe376 url('/images/event/20220413/sec0_bg.jpg') no-repeat center top; padding:180px 0 0;}
#section0 .inner {max-width:1180px;}
#section0 .txt {position:absolute; top:0; left:0; text-align:left;}
#section0 .img {position:relative; margin:0 -15px 0 0; text-align:right;}
#section0 .img2 {display:none; position:relative; padding-top:220px; text-align:right;}
#section0 .img2 img {max-width:80%;}
#section0 .img .simg1 {position:relative; bottom:-10px; right:0; padding-top:120px;}
#section0 .img .simg2 {position:absolute; bottom:-90px; right:40px;}
#section0 .img .simg3 {position:absolute; bottom:-90px; right:110px;}
#section0.active .img .simg1 {animation:ani-01 0.9s ease-in-out;}
#section0.active .img .simg2 {animation:ani-02 1.2s ease-in-out;}
#section0.active .img .simg3 {animation:ani-03 1.7s ease-in-out;}
@keyframes ani-01 {
	0% {opacity:0; bottom:-60px; right:-40px;}
	50% {opacity:0; bottom:-60px; right:-40px;}
	100% {opacity:1; bottom:-10px; right:0;}
}
@keyframes ani-02 {
	0% {opacity:0; bottom:-140px; right:0;}
	60% {opacity:0; bottom:-140px; right:0;}
	100% {opacity:1; bottom:-90px; right:40px;}
}
@keyframes ani-03 {
	0% {opacity:0; bottom:-140px; right:40px;}
	60% {opacity:0; bottom:-140px; right:40px;}
	100% {opacity:1; bottom:-90px; right:110px;}
}

/* #section01 */
#section01 {background:#2d3446; padding:70px 20px 80px;}
#section01 hgroup {margin-bottom:0 !important;}
#section01 h1 {font-size:40px; font-weight:700; color:#fcdb4d;}
#section01 p {margin-top:30px; font-size:20px; font-weight:300; color:#fff; line-height:1.7;}
#section01 .point {color:#fff2bb;}

/* #section1 */
#section1 {background:#fff;}
#section1 .inner {max-width:1200px;}
#section1 .cont {margin-left:-45px;}
#section1 .cont li {float:left; width:50%; padding-left:45px;}
#section1 .cont li:hover {transform:translateY(-5px);}
#section1 .cont .cont1 .box {background:#e8ebfe;}
#section1 .cont .cont2 .box {background:#ffe4e8;}
#section1 .cont .box {position:relative; box-shadow:10px 10px 30px rgba(0,0,0,0.1); border-radius:20px; padding:50px 45px 50px 50px; text-align:left; transition:all 0.3s linear 0.1s;}
#section1 .cont li:hover .box {box-shadow:10px 10px 30px rgba(0,0,0,0.1);}
#section1 .cont .box span {position:absolute; top:50px; right:45px;}
#section1 .cont .box h2 {position:relative; margin-bottom:20px; text-align:left; font-size:36px; font-weight:300; color:#191f28; letter-spacing:-5px; line-height:1.3; white-space:nowrap;}
#section1 .cont .box + p {padding-top:30px; text-align:right; font-size:15px; color:#b0b0b0;}
#section1 .cont + p {font-size:24px; font-weight:700; color:#191f28;}

/* #section2 */
#section2 {background:#cfe9ff;}
#section2 .inner {max-width:1289px;}
#section2 .cont {margin-left:-15px;}
#section2 .cont li {float:left; width:50%; padding-left:15px;}
#section2 .cont li:hover {transform:translateY(-5px);}

/* #section3 */
#section3 {background:#ffef6b url('/images/event/20220413/sec3_bg.jpg') no-repeat center bottom; padding-bottom:0;}

/* #section4 */
#section4 {background:#f2f8ff;}
#section4 .inner {max-width:890px;}
#section4 .cont {margin-left:-100px;}
#section4 .cont li {float:left; width:50%; padding-left:100px;}
#section4 .cont li:hover {transform:translateY(-5px);}

/* #section5 */
#section5 {background:#fff;}
#section5 .inner {max-width:1180px;}
#section5 hgroup {margin-bottom:15px;}
#section5 h1 + p {display:none;}
#section5 .cont {margin-left:-15px;}
#section5 .cont li {float:left; width:33.33%; padding-left:15px;}
#section5 .cont li:hover {transform:translateY(-5px);}

/* #section6 */
#section6 {background:#03153c;}
#section6 h1,
#section6 h1 + p {color:#fff;}

/* #section7 */
#section7 {background:#f0f1f4;}
#section7 .inner {max-width:1180px;}
#section7 hgroup a.link {display:inline-block; border-bottom:1px solid #747474; font-size:18px; color:#191f28;}
#section7 dl {border-radius:10px; background:#fff; padding:40px 50px; text-align:left;} 
#section7 dl + dl {margin-top:10px;}
#section7 dt {float:left; padding-right:80px; font-size:22px; font-weight:700; color:#191f28;}
#section7 dd {float:left; font-size:16px; font-weight:300; color:#191f28; line-height:1.6;}
#section7 dd .step {margin:15px 0 10px;}
#section7 dd a.link {margin-left:10px; color:#257cff;}
#section7 dd a.link em {font-weight:600;}
#section7 dd .list {padding-left:8px; text-indent:-8px;}
#section7 dd .list2 {padding-left:18px; text-indent:-18px;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {	
	.section .inner {width:100%; padding:0 20px;}	
	#section0 {padding-top:100px; background-size:cover;}
	#section0 .txt {padding:0 20px;}
	#section0 .img {display:none;}
	#section0 .img2 {display:block;}
	#section3 {background-size:cover;}
}
@media only screen and (max-width:970px) {
	.section {padding:80px 0;}	
	#section4 .cont {margin-left:-45px;}
	#section4 .cont li {padding-left:45px;}	
}
@media only screen and (max-width:768px) {	
	.section h1 {font-size:40px !important;}
	.section h1 + p {font-size:18px !important;}
	.section .cont {margin-left:0 !important;}
	.section .cont li {width:100% !important; padding-left:0 !important;}
	#section0 {padding-top:80px;}
	#section0 .txt img {max-width:80%;}
	#section2 .cont li + li,
	#section4 .cont li + li,
	#section5 .cont li + li {padding-top:50px;}
}
@media only screen and (max-width:600px) {
	.section hgroup br {display:none;}
}
@media only screen and (max-width:500px) {	
	.section {padding:60px 0;}	
	.section hgroup {margin-bottom:50px;}	
	.section h1 {font-size:36px !important;}
	.section h1 + p {font-size:16px !important;}
	#section0 {padding-top:60px;}	
	#section1 .cont .box h2 {font-size:30px;}
	#section1 .cont .box span {display:none;}
	#section3 img {max-width:80%;}
	#section5 h1 {display:none;}
	#section5 h1 + p {display:block;}
}
@media only screen and (max-width:375px) {
	.section hgroup {margin-bottom:40px;}
	.section h1 {font-size:30px !important;}
	#section1 .cont .box {padding:30px;}
	#section7 dl {padding:30px;}
	#section7 dd br {display:block;}
}