@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2022-01-03
Modify Date : 2022-01-03
File : /event/2022/newyear
*******************************************/

/* 공통 */
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; /*transition:all 0.3s ease;*/}
body {min-width:280px; letter-spacing:-1px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:1;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; max-width:1920px; margin:0 auto; overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#0056b7;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; height:auto; text-align:center; transition:all 0.3s ease;}
.section .inner {position:relative; width:1180px; margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}

/* #section0 */
body {background:url('/images/event/20220104/sec0_bg.jpg') no-repeat center;}
#section0 {background:url('/images/event/20220104/sec0_bg.jpg') no-repeat center;}
#section0 .txt1 {margin-top:80px;}
#section0 .txt2 {margin-top:20px;}
#section0 .img1 {margin-top:-20px;}
#section0 .img2 {margin-top:-30px;}

/* #section1 */
#section1 {background:url('/images/event/20220104/sec1_bg.jpg') no-repeat center top; padding-bottom:220px;}
#section1 .txt1 {margin-top:125px;}
#section1 .img1 {margin-top:50px;}
#section1 .txt2 {margin-top:45px;}
#section1 .btn {margin-top:45px;}

/* #section2 */
#section2 {background:url('/images/event/20220104/sec2_bg.jpg') no-repeat center; padding-bottom:220px;}
#section2 .txt1 {}
#section2 .img {margin-top:50px;}
#section2 .img1 {padding-right:20px;}
#section2 .img2 {padding-left:10px;}
#section2 .txt2 {margin-top:45px;}
#section2 .btn {margin-top:45px;}

/* 뷰레이어 */
.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-family:'Montserrat', sans-serif; font-size:36px; font-weight:500; color:#333; letter-spacing:-2px; line-height:1.2}
.view_layer h2 {margin-bottom:15px; font-size:30px; font-weight:500; 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;}

/* #section3 */
#section3 {background:url('/images/event/20220104/sec3_bg.jpg') repeat center; padding-bottom:120px;}
#section3 .txt1 {}
#section3 .img1 {margin-top:50px;}
#section3 .txt2 {margin-top:45px;}
#section3 .btn {margin-top:45px;}

/* #section4 */
#section4 {background:url('/images/event/20220104/sec4_bg.jpg') no-repeat center top; padding-bottom:60px;}
#section4 .txt1 {float:left; width:40%; padding-top:250px;}
#section4 .txt2 {float:right; width:60%; padding-top:160px; margin-right:-3%;}
#section4 .txt2 li {float:left; width:50%; margin:0 -7% -8% 0;}
#section4 .list {margin:120px -20px 0; padding:40px 80px 0; text-align:left;}
#section4 .list h3 {background:url('/images/event/20220104/sec4_icon.png') no-repeat left 4px; vertical-align:middle; margin-bottom:10px; padding-left:35px; font-size:28px; font-weight:500; color:#333; letter-spacing:-1px; line-height:1.2;}
#section4 .list li {padding-top:8px; padding-left:10px; text-indent:-15px; font-size:20px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.2;}

/* 반응형 처리 */
@media only screen and (max-width:1179px) {
	.section {background-size:cover !important;}
	.section .inner {width:100%; padding:0 20px;}
	#section4 .list {margin-top:60px; background:#fff; padding:60px 40px 0;}
}
@media only screen and (max-width:1023px) {
	#section2 .img1 {padding-right:0; margin-bottom:-20px;}
	#section2 .img2 {padding-left:0;}
	#section4 .txt2 {margin-right:-6%;}
}
@media only screen and (max-width:767px) {	
	#section0 .img1 {margin-top:-5px;}
	#section0 .img2 {margin-top:-15px;}
	#section4 .txt1 {padding-top:210px;}
}
@media only screen and (max-width:530px) {
	.view_layer {left:10px; right:10px; margin-left:0; width:auto;}
}
@media only screen and (max-width:479px) {
	/*.section .txt1 {max-width:70%;}*/
	.section .btn {max-width:60%;}
	#section1 {padding-bottom:140px;}
	#section1 .txt1 {margin-top:60px;}
	#section2 {padding-bottom:140px;}
	#section3 {padding-bottom:80px;}
	#section4 .txt1 {float:left; width:100%; padding-top:140px;}
	#section4 .txt2 {float:left; width:100%; padding-top:20px;}
	#section4 .txt2 li {margin-right:0;}
	#section4 .txt2 li img {max-width:110%;}
	#section4 .list h3 {background-size:24px 24px; padding-left:30px; font-size:24px;}
	#section4 .list li {font-size:16px;}
}