@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@font-face {font-family:'GmarketSansMedium'; src:url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight:normal; font-style:normal;}
@font-face {font-family:'GmarketSansBold'; src:url('//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight:normal; font-style:normal;}

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2022-08-30
Modify Date : 2022-08-31
File : /event/2022/chuseok
*******************************************/

/* 공통 */
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:#d0d0d0; background:#fff;}
#wrap {position:relative; overflow:hidden; opacity:0;}
.top_btn {background:#da471d;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; text-align:center; transition:all 0.3s ease; padding:100px 0;}
.section .inner {position:relative; width:auto; max-width:1180px; margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section hgroup {margin-bottom:50px;}
.section hgroup > span {display:inline-block; margin-bottom:30px; border-radius:50px; background:#3d3ef3; padding:15px 20px 8px 25px; font-family:'GmarketSansBold', sans-serif; font-size:23px; font-weight:600; color:#fff; letter-spacing:2px; line-height:1.0;}
.section hgroup > h1 {margin-bottom:20px; font-size:60px; font-weight:300; color:#fff; letter-spacing:-5px; line-height:1.2;}
.section hgroup > h1 > em {font-weight:700; line-height:inherit; color:#ffb526;}
.section hgroup > p {font-size:22px; font-weight:400; color:#fff; letter-spacing:-1px; line-height:1.5;}
.section a.link {display:inline-block; border-radius:50px; border:3px solid #ffb526; padding:15px 90px; font-size:28px; font-weight:700; color:#ffb526; letter-spacing:-1px; line-height:1.6; transition:all 0.5s ease;}
.section a.link:hover {background:#ffb526; color:#3b2f26;}

/* #section0 */
body {background:rgb(255,237,212); background:linear-gradient(90deg, rgba(255,237,212,1) 0%, rgba(239,200,150,1) 100%);}
#section0 {background:url('/images/event/20220901/sec0_bg2.png') no-repeat center bottom; padding:100px 0 0;}
#section0 .txt {margin:0 auto 50px;}
#section0 .img {position:relative; height:565px;}
#section0 .img .zero {position:absolute; bottom:225px; left:50%; margin-left:-142px; animation:zero 1.5s infinite;}
@keyframes zero { 0% {transform:translateY(0);} 50% {transform:translateY(-10px);} 100% {transform:translateY(0);} }
.band {background:#442d27; padding:25px 0 20px;}
.band .swiper-container {width:1600px; margin:0 auto;}
.band .swiper-slide {width:auto !important; position:relative; padding:0 30px; font-family:'GmarketSansMedium'; font-size:23px; color:#e3aea0;}
.band .swiper-slide:before {display:block; content:''; position:absolute; top:5px; left:0; width:1px; height:20px; background:#977871; letter-spacing:-0.5px; line-height:1.0;}
.band .swiper-slide:first-child:before {display:none;}

/* #section1 */
#section1 {background:#3b2f26 url('/images/event/20220901/sec1_bg.png') no-repeat center bottom; padding-bottom:120px;}
#section1 .table {position:relative;}
#section1 .table .icon1 {position:absolute; left:0; bottom:-30px;}
#section1 .table .icon2 {position:absolute; right:-30px; top:80px;}
#section1 .txt1 {margin:50px 0 10px;}
#section1 p.txt {margin:10px 0 75px; font-size:40px; font-weight:600; color:#fff; letter-spacing:-3px; line-height:1.2;}
#section1 p.txt em {font-weight:inherit; color:#fff;}

/* #section2 */
#section2 {background:#fff;}
#section2 hgroup > h1 {margin-bottom:20px; font-size:56px; color:#2c2c31; line-height:1.2;}
#section2 hgroup > h1 strong {font-size:60px;}
#section2 hgroup > h1 > em {font-family:'GmarketSansBold', sans-serif; font-size:40px; font-weight:700; background:linear-gradient(to right, #5a5ef1, #57feeb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2;}
#section2 hgroup p {color:#2c2c31;}
#section2 .table ul {display:flex; flex-direction:row; align-items:flex-start; width:90%; margin:50px auto 75px;}
#section2 .table li {width:25%;}
#section2 .table li p {padding-top:20px; font-size:20px; font-weight:600; color:#2c2c31; line-height:1.4;}
#section2 .swiper2 {margin:70px 0 70px -40px; position:relative; display:flex; flex-direction:row; align-items:flex-start;}
#section2 .swiper2 .swiper-slide {width:calc(50% - 40px); margin-left:40px;}
#section2 .swiper2 .swiper-slide > div {border-radius:20px; padding:40px; text-align:center;}
#section2 .swiper2 hgroup { display:flex; flex-direction:column; align-items:center; margin-bottom:0;}
#section2 .swiper2 hgroup > span {display:inline-block; margin-bottom:25px; border-radius:50px; background:#3b2f26; padding:10px 30px 12px; font-family:"Noto Sans KR", sans-serif; font-size:26px; font-weight:600; color:#fff; letter-spacing:-3px; line-height:1.0;}
#section2 .swiper2 hgroup > span > em {font-weight:inherit; color:#ffe168;}
#section2 .swiper2 hgroup > h2 {font-size:32px; font-weight:600; color:#1d1d1d; letter-spacing:-3px; line-height:1.4;}
#section2 .swiper2 hgroup > h2 > em {font-size:42px; font-weight:inherit; color:#fff;}
#section2 .swiper2 .slide2 {background:#ffb526;}
#section2 .swiper2 .slide1 {background:#d9471d;}
#section2 a.link {border:3px solid #db471c; background:#fff; padding:15px 90px; font-size:24px; font-weight:600; color:#db471c; letter-spacing:-1px; line-height:1.6; transition:all 0.5s ease;}
#section2 a.link:hover {background:#db471c; color:#fff;}

/* #section3 */
#section3 {background:#efece7;}
#section3 hgroup {margin-bottom:20px;}
#section3 hgroup > span {background:#5470f8;}
#section3 hgroup > h1 {color:#2c2c31;}
#section3 hgroup > h1 > em {color:#da471d;}
#section3 hgroup > p {color:#2c2c31;}
#section3 hgroup > p .txt1 {position:relative; margin-right:-10px;}
#section3 p.txt {padding-top:20px; font-size:20px; font-weight:400; color:#da471d; letter-spacing:-1px; line-height:1.6;}

/* #section4 */
#section4 {background:#2f2e2e;}
#section4 hgroup > span {background:#131313;}
#section4 hgroup > span > em {background:linear-gradient(to right, #5a5ff2, #57fceb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:600;}
#section4 hgroup h1 {color:#fff;}
#section4 hgroup p {color:#cfcfcf;}
#section4 .icon {position:absolute; bottom:-20px; left:50%; margin-left:310px; margin-bottom:0; background:transparent;}
#section4 .swiper-container {margin:75px 0;}
#section4 .swiper-slide {/*width:auto !important;*/}

/* #section5 */
#section5 {background:#3c3c3c; padding:50px 0;}
#section5 .inner {text-align:left;}
#section5 .tit {margin-bottom:15px; font-size:20px; font-weight:600; color:#fff;}
#section5 .tit img {margin:2px 10px 0 0;}
#section5 .list li {padding-top:10px; padding-left:9px; text-indent:-9px; font-size:16px; color:#a5a5a5;}

/* 뷰레이어 */
.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%; transform:translate(-50%, -50%); width:660px; background:#fff; padding:40px; text-align:left; z-index:3;}
.view_layer h1 {margin-bottom:10px; font-size:22px; font-weight:600; color:#252432; letter-spacing:-2px; line-height:1.0}
.view_layer h1 img {vertical-align:middle;}
.view_layer p {margin-bottom:30px; font-size:16px; color:#676767; letter-spacing:-0.5px;}
.view_layer .close {position:absolute; top:40px; right:40px; width:22px; height:23px; background:url('/images/event/20220801/pop_close.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer table {width:100%;}
.view_layer thead th {border-top:1px solid #252432; border-bottom:1px solid #252432; padding:15px 0; text-align:center; font-size:16px; font-weight:600; color:#252432;}
.view_layer tbody th {border-bottom:1px solid #d0d0d0; padding-left:50px; text-align:left; font-size:16px; font-weight:500; color:#252432; line-height:1.6;}
.view_layer tbody td {border-bottom:1px solid #d0d0d0; padding:20px 0 20px 100px; text-align:left; font-size:15px; color:#555; line-height:1.6;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {
	.section .inner {padding:0 20px;}
	#section0 .txt {max-width:80%;}
	#section2 .swiper2 {flex-direction:column; margin-left:0;}
	#section2 .swiper2 .swiper-slide {display:block; width:100%; margin-left:0;}
	#section2 .swiper2 .swiper-slide + .swiper-slide {margin-top:20px;}
}
@media only screen and (max-width:1140px) {
	#section0 .img {display:block;}
	#section0 .img2 {display:none;}
}
@media only screen and (max-width:1024px) {
	#section1 .table .icon1,
	#section1 .table .icon2 {display:none;}
}
@media only screen and (max-width:768px) {
	#section0 {background:url('/images/event/20220901/sec0_bg2.png') no-repeat center bottom;}
	#section0 .img {margin:0 -20px;}
	.section hgroup h1,
	#section2 hgroup > h1 {font-size:50px;}
	#section2 hgroup > h1 > strong {font-size:1.1em;}
	#section2 .table ul {display:inherit; width:100%; margin-top:-30px;}
	#section2 .table li {display:inline-block; width:49%; padding-top:30px;}
}
@media only screen and (max-width:640px) {
	.section hgroup h1 > em {display:block;}
	#section0 .txt {max-width:100%;}
	#section0 .tit {margin:-30px auto 0;}
}
@media only screen and (max-width:530px) {
	.section {padding:70px 0;}
	.section hgroup > p {font-size:20px;}
	.band {display:none;}
	#section0 {background-position:center bottom; background-size:cover; padding:70px 0 0;}
	#section0 .img {height:400px;}
	#section0 .img .zero {bottom:155px;}
	#section0 .img .zero img {max-width:80%;}
	#section1 {padding-bottom:70px;}
	#section1 p.txt {margin-bottom:50px;}
	#section1 p.txt em {display:block;}
	#section2 .swiper2 hgroup > span {margin-bottom:20px; font-size:20px;}
	#section2 .swiper2 hgroup > h2 {font-size:36px;}
	#section2 .swiper2 hgroup > h2 em {font-size:1.0em;}
	#section2 .swiper2,
	#section4 .swiper4 {margin:40px 0 50px;}
	.view_layer {left:20px; right:20px; padding:20px; transform:translate(0, -50%); width:auto;}
	.view_layer .close {top:20px; right:20px;}
	.view_layer tbody th,
	.view_layer tbody td {padding-left:20px;}
}
@media only screen and (max-width:490px) {
	#section2 .swiper2 hgroup > h2 {font-size:28px;}
}
@media only screen and (max-width:420px) {
	.section hgroup h1,
	#section2 hgroup > h1 {font-size:42px;}
	#section1 p.txt {font-size:32px;}
}
@media only screen and (max-width:400px) {
	.section a.link,
	#section2 a.link {width:100%; padding:15px;}
}
@media only screen and (max-width:375px) {
	.section hgroup > span {font-size:20px;}
	.section hgroup > p {font-size:18px;}
	.section hgroup h1,
	#section2 hgroup > h1 {font-size:36px;}
	#section0 {background-position:center 70%;}
	#section0 .tit {margin-top:-20px}
	#section1 p.txt {font-size:30px;}
	#section2 .table li p {font-size:18px;}
	#section2 .swiper2 .swiper-slide > div {padding:30px;}
	#section2 .swiper2 hgroup > span {margin-bottom:10px; font-size:18px;}
	#section2 .swiper2 hgroup > h2 {font-size:24px;}
	#section3 hgroup > p .txt1,
	#section3 hgroup > p .txt2 {max-height:57px;}
	.view_layer {top:5px; bottom:5px; left:5px; right:5px; transform:translate(0, 0); overflow-y:auto;}
}