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


/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-12-31
Modify Date : 2021-01-04
File : /event/2021/support
*******************************************/

/* 공통 */
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;}
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:#2989e1;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; height:auto; padding:50px 0 100px; text-align:center;}
.section .inner {position:relative; /*width:1180px; height:100%;*/ margin:auto; text-align:center;}
.section > .inner, .section > #sectionTab {opacity:0; /*transition:opacity 0.5s ease;*/}
.section.active > .inner, .section.active > #sectionTab {opacity:1;}
.section hgroup {position:relative; margin-bottom:70px;}
.section hgroup:before {display:block; content:''; position:absolute; top:90px; left:50px; right:50px; height:0.5px; background:#333;}
.section hgroup > em {display:block; font-family:'Roboto', sans-serif; font-size:40px; font-weight:200; color:#333;}
.section hgroup > h3 {display:inline-block; padding:0 50px; font-size:48px; font-weight:600; color:#333; letter-spacing:-3px; line-height:1.2;}
.section hgroup > h3 > em {font-weight:100;}
.section hgroup > p {margin-top:15px; font-size:20px; font-weight:300; color:#333; letter-spacing:-1px;}
.section .inner ul {width:1180px; margin:auto;}
.section .x2 > li {float:left; width:50%;}
.section .x3 > li {float:left; width:33.33%;}
.section .x4 > li {float:left; width:25%;}
.section li {transition:all ease 0.5s;}
.section li:hover {transform:translate(0,-20px);}
.section li > h4 {margin-bottom:30px; border-bottom:1px solid #333; text-align:left; font-family:'Roboto', sans-serif; font-size:24px; font-weight:600; color:#333;}
.section li > p {margin-top:30px; font-size:20px; font-weight:500; color:#333; letter-spacing:-1px; line-height:1.2;}
.section li > p > em {font-size:16px; font-weight:400; line-height:1.4;}
.section .icon {display:inline-block; width:19px; height:19px; margin:0 0 -2px 2px; background:url('/images/event/20210104/support1_icon.png') no-repeat; cursor:pointer;}

/* 뷰레이어 */
.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 {letter-spacing:0px; display:none; position:fixed; top:50%; left:50%; margin:-170px 0 0 -350px; width:700px; box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius:10px; border:1px solid #aaa; background:#fff; padding:25px 30px; text-align:left; z-index:3;}
.view_layer h5 {margin-bottom:15px; border-bottom:1px solid #c7c7cb; padding-bottom:10px; font-size:20px; font-weight:600; color:#1a2e51;}
.view_layer li em {color:#fff;}
.view_layer .close {position:absolute; top:30px; right:30px; width:20px; height:20px; background:url('/images/event/20210104/layer_close.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer dl {display:inline-block; font-size:16px; line-height:1.8;}
.view_layer dl dt, .view_layer dl dd {display:inline-block; float:left;}
.view_layer dl dt {position:relative; width:90px; font-weight:500;}
.view_layer dl dd {width:calc(100% - 90px); color:#666;}
.view_layer dl a.link {color:#13759c; text-decoration:underline;}
.view_layer dl a.link em {font-family:'Spoqa Han Sans', sans-serif;}
.view_layer p {padding-left:20px; text-indent:-20px; font-size:16px; color:#888; line-height:1.4;}

/* section0 */
#section0 {background:#d3ebfa url('/images/event/20210104/support0_bg.jpg') no-repeat center top; padding:0;}
#section0 .txt {padding-top:80px; text-align:center;}
#section0 .txt .stxt {padding:35px 0 25px;}
#section0 .txt .date {padding:25px 0 10px; font-family:"Roboto", "Spoqa Han Sans", sans-serif; font-size:20px; color:#5a95bd; letter-spacing:0.5px;}
#section0 .img {text-align:center;}
#section0 li:hover {transform:translate(0,0);}

/* 탭메뉴 */
#sectionTab {position:relative; height:150px; background:#155885; overflow:hidden;}
#sectionTab .swiper-container {width:1180px; margin:0 auto;}
#sectionTab .swiper-container li {float:left; width:14.285%;}
#sectionTab .swiper-container li a {position:relative; display:block; padding:40px 0 50px; text-align:center; font-size:21px; font-weight:300; color:#abdcfa; letter-spacing:-1px;}
#sectionTab .swiper-container li a em {display:block; font-weight:600;}
#sectionTab .swiper-container li a:after {display:block; content:''; position:absolute; bottom:25px; left:50%; margin-left:-7px; width:15px; height:8px; background:url('/images/event/20210104/support0_tab1.png') no-repeat;}
#sectionTab .swiper-container li:hover a:after, 
#sectionTab .swiper-container li.on a:after {background:url('/images/event/20210104/support0_tab2.png') no-repeat;} 
#sectionTab .swiper-container li:hover a, 
#sectionTab .swiper-container li.on a {background:#d9f1fb; color:#155885;}
#sectionTab.tab_flying {position:fixed; top:0; left:0; right:0; height:100px; z-index:1;}
#sectionTab.tab_flying .swiper-container li a {padding:20px 0 30px; font-size:18px; line-height:1.4;}
#sectionTab.tab_flying .swiper-container li a:after {bottom:15px;}

/* section1 */
#section1 {background:#d9f1fb;}
#section1 hgroup:before {background:#6193b3;}
#section1 hgroup > em {color:#155885;}
#section1 hgroup > h3 {background:#d9f1fb; color:#155885;}
#section1 hgroup > p {color:#155885;}
#section1 .inner > ul {background:#fff; box-shadow:20px 20px 0 #bfe1ef; padding:30px;}
#section1 li {padding:10px 30px 30px;}
#section1 li:hover {transform:translate(0,0);}
#section1 li > h4 {border-color:#b9d8ed; color:#155885;}
#section1 .icon {background:url('/images/event/20210104/support1_icon.png') no-repeat;}

/* section2 */
#section2 {background:#c1e4f3; padding-bottom:80px;}
#section2 hgroup:before {background:#538bad;}
#section2 hgroup > em {color:#155885;}
#section2 hgroup > h3 {background:#c1e4f3; color:#155885;}
#section2 hgroup > p {color:#155885;}
#section2 .inner > ul {width:1050px;}
#section2 .icon {background:url('/images/event/20210104/support2_icon.png') no-repeat;}

/* section3 */
#section3 {background:#b5d9ee;}
#section3 hgroup:before {background:#5184a5;}
#section3 hgroup > em {color:#084771;}
#section3 hgroup > h3 {background:#b5d9ee; color:#084771;}
#section3 hgroup > p {color:#084771;}
#section3 .icon {background:url('/images/event/20210104/support3_icon.png') no-repeat;}

/* section4 */
#section4 {background:#fff; padding-bottom:70px;}
#section4 hgroup:before {background:#959595;}
#section4 hgroup > em {color:#333;}
#section4 hgroup > h3 {background:#fff; color:#333;}
#section4 hgroup > p {color:#333;}
#section4 .inner > ul {width:1380px;}
#section4 li {padding:15px;}
#section4 li:nth-child(1) {padding-top:100px;}
#section4 li:nth-child(3) {padding-top:50px;}
#section4 li img {box-shadow:2px 2px 15px rgba(0,0,0,0.2)}
#section4 .icon {background:url('/images/event/20210104/support4_icon.png') no-repeat;}

/* section5 */
#section5 {background:#d9ebeb;}
#section5 hgroup:before {background:#739595;}
#section5 hgroup > em {color:#325f5f;}
#section5 hgroup > h3 {background:#d9ebeb; color:#325f5f;}
#section5 hgroup > p {color:#325f5f;}
#section5 .inner > ul {background:#fff; box-shadow:20px 20px 0 #bfd9d9; padding:30px;}
#section5 li {padding:10px 30px 30px;}
#section5 li:hover {transform:translate(0,0);}
#section5 li > h4 {border-color:#bfd9d9; color:#325f5f;}
#section5 li > p > em {color:#437c7c;}
#section5 .icon {background:url('/images/event/20210104/support5_icon.png') no-repeat;}

/* section6 */
#section6 {background:#c7e3e3;}
#section6 hgroup:before {background:#668787;}
#section6 hgroup > em {color:#284c4c;}
#section6 hgroup > h3 {background:#c7e3e3; color:#284c4c;}
#section6 hgroup > p {color:#284c4c;}
#section6 li > p {font-size:22px; font-weight:400; color:#365d5d;}
#section6 li > p > em {display:block; padding-top:10px;}
#section6 .icon {background:url('/images/event/20210104/support6_icon.png') no-repeat;}

/* section7 */
#section7 {background:#dfe5fb;}
#section7 hgroup:before {background:#575961;}
#section7 hgroup > em {color:#242a44;}
#section7 hgroup > h3 {background:#dfe5fb; color:#242a44;}
#section7 hgroup > p {color:#242a44;}
#section7 .icon {background:url('/images/event/20210104/support7_icon.png') no-repeat;}

/* #section8 */
#section8 {background:url('/images/event/20210104/support8_bg.jpg') no-repeat center top; background-size:cover; padding:90px 0 70px;}
#section8 h3 {font-size:32px; font-weight:200; color:#fff; letter-spacing:-2px; line-height:1.2;}
#section8 h3 em {font-weight:inherit; color:#53acef;}
#section8 .startBtn {display:inline-block; margin:40px auto; background:#4aa7ff; padding:15px 80px; font-size:22px; font-weight:100; color:#fff; transition:all 0.5s ease;}
#section8 .startBtn:hover {border-color:transparent; background:#226ee1;}
#section8 p {font-size:14px; font-weight:100; color:#fff;}
#section8 .link {border-bottom:1px solid #fff; color:inherit;}

@media only screen and (max-width:1380px) {
	#section4 .inner > ul {width:100%;}	
}
@media only screen and (max-width:1180px) {	
	hgroup, .section .inner {padding:0 20px;}
	#sectionTab .swiper-container,
	.section .inner > ul {width:100%;}
	.section hgroup:before {top:80px; left:20px; right:20px;}
	.section hgroup > h3 {padding:0 20px;}
}
@media only screen and (max-width:1050px) {
	#section2 .inner > ul {width:100%;}	
}
@media only screen and (max-width:1033px) {
	#section6 li > p > em br {display:none;}
}
@media only screen and (max-width:960px) {
	.section hgroup {margin-bottom:50px;}
	.section hgroup > em,
	.section hgroup > h3 {font-size:38px;}
	#section8 h3 {font-size:28px;}
}
@media only screen and (max-width:768px) {	
	.section {padding:30px 0 60px;}
	#section2, #section4 {padding-bottom:30px;}
	#section8 {padding:60px 0 40px;}
	#sectionTab {height:103px;}
	#sectionTab .swiper-container li a {padding:20px 0 30px; font-size:18px;}
	#sectionTab .swiper-container li a:after {bottom:15px;}
	.section hgroup {margin-bottom:30px;}
	.section hgroup:before {top:65px;}
	.section hgroup > em,
	.section hgroup > h3 {font-size:30px; padding:0 10px;}
	.section hgroup > p {font-size:18px;}
	#section8 h3 {font-size:24px;}
	#section1 .inner > ul, #section5 .inner > ul {padding-top:0;}
	#section1 li, #section5 li {padding:20px 10px 0;}
	.section li > p, #section6 li > p {font-size:18px; line-height:1.4;}	
	.section li > p br, #section6 li > p br {display:none;}
	#section6 li > p {padding-left:20px; padding-right:20px;}
	#section1 li, #section2 li, #section4 li, #section5 li {width:50%;}
	#section4 li:nth-child(1),
	#section4 li:nth-child(3) {padding-top:15px;}
	#section5 li:nth-child(2) > p {min-height:70px;}
}
@media only screen and (max-width:700px) {
	.view_layer {width:auto; left:10px; right:10px; margin-left:0; padding:15px 20px;}
	.view_layer .close {top:20px; right:20px;}
}
@media only screen and (max-width:640px) {
	#section0 .txt {padding-top:60px;}
	#section0 .txt .stit img {max-width:50%;}
	#section0 .txt .stxt {padding:20px 0;}
	#section0 .txt .stxt img {max-width:80%;}
	#section6 li > p {padding-left:10px; padding-right:10px;}
}
@media only screen and (max-width:500px) {
	#section1 .inner > ul,
	#section5 .inner > ul {padding:0 10px 30px;}
	.section li > h4 {margin-bottom:20px;}
	.section li > p {margin-top:20px;}
	.section li > p, #section6 li > p {font-size:16px;}
}
@media only screen and (max-width:375px) {	
	#section2 li, #section6 li {width:100%;}
	#section2 li img, #section6 li img {max-width:110%; margin:0 -5%;}
	#section2 li:nth-child(2),
	#section6 li:nth-child(2) {padding-top:10px;} 
	#layer1_1 {margin-top:-230px;}
	#layer2 {margin-top:-280px;}
}