@charset "utf-8";
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2023-07-03
Modify Date : 2023-07-04
File : /event/2023/geditor
*******************************************/

/* 공통 */
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;}
.main {padding:0;}
.main_quick .quick_box {top:50px;}
.main_quick .quick_box .quick_btns {gap:8px;}
.main_quick .quick_box .btn_round {width:220px; height:auto; box-shadow:0 0 20px rgba(0,0,0, 0.2); border-radius:30px; border:4px solid #001539; background:#fff; padding:15px 0 10px; font-size:22px; font-weight:600; color:#001539; line-height:1.2;}
.main_quick .quick_box .btn_round.dark {background:#0066ff; color:#fff;}
.main_quick .quick_box .btn_round:hover {box-shadow:0 0 20px rgba(0,0,0, 0.5);}
.main_quick .quick_box .btn_round.dark:hover {background:#001539;}
.top_btn {background:#035ade;}
.top_btn:hover {background:#001539;}
.show_mot {position:relative; opacity:0; top:100px;}
section {position:relative; text-align:center; transition:all 0.3s ease; padding:120px 0;}
section * {font-family:'GmarketSans', "Noto Sans KR", sans-serif; /*transition:all 0.3s ease;*/}
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; font-size:30px; font-weight:400; color:#0066ff; letter-spacing:-0.5px; line-height:1.2;}
section hgroup > span .no {vertical-align:bottom; margin-right:10px;}
section hgroup > h1 {font-size:60px; font-weight:600; color:#000; letter-spacing:-1px; line-height:1.2;}
section hgroup > h1 > em {font-weight:inherit; line-height:inherit; color:#0066ff;}
section hgroup > p {margin-top:10px; font-size:30px; font-weight:400; color:#0066ff; letter-spacing:-1px; line-height:1.4;}
section a.link {display:inline-block; border-radius:50px; border:3px solid #0066ff; padding:15px 90px; font-size:28px; font-weight:700; color:#0066ff; letter-spacing:-1px; line-height:1.6; transition:all 0.5s ease;}
section a.link:hover {background:#0066ff; color:#3b2f26;}

/* #section0 */
body {background:url('/images/event/20230705/sec0_bg.jpg') no-repeat center top; background-size:cover;}
#section0 {background:url('/images/event/20230705/sec0_bg.jpg') no-repeat center top; background-size:cover; padding:60px 0 85px;}
#section0 .txt1 {}
#section0 .txt2 {margin:-4vw auto 0; /*animation:zero 1.5s infinite;*/}
@keyframes zero { 0% {transform:translateY(0);} 50% {transform:translateY(-10px);} 100% {transform:translateY(0);} }

/* #section1 */
#section1 {background:#fff;}
#section1 hgroup > h1 {font-size:90px;}
#section1 .table {display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#section1 .table .cloud {width:40%;}
#section1 .table .extend {width:calc(60% - 10px); margin-left:10px;}
#section1 .table .dt {position:relative; margin-top:50px; border-top-left-radius:10px; border-top-right-radius:10px; padding:25px 0 20px; font-size:26px; font-weight:600; color:#fff; letter-spacing:-0.5px; line-height:1.0;}
#section1 .table .cloud .dt {background:#0066ff;}
#section1 .table .extend .dt {background:#035ade;}
#section1 .table .dt span {position:absolute; top:-90px; left:0; right:0;}
#section1 .table .dd {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; border:1px solid #dedede; border-top:none;}
#section1 .table .cloud .dd .box {width:50%;}
#section1 .table .extend .dd .box {width:33.33%;}
#section1 .table .box {background:#f7f7f7; padding:30px 0; vertical-align:top; overflow:hidden;}
#section1 .table .box + .box {border-left:1px solid #dedede;}
#section1 .table .box .stit {font-size:24px; font-weight:700; color:#00276a; white-space:nowrap;}
#section1 .table .box .per {margin:20px 0; font-size:56px; font-weight:700; color:#00276a; white-space:nowrap;}
#section1 .table .box .before {font-size:16px; color:#63799f; white-space:nowrap;}
#section1 .table .box .before em {font-size:18px;}
#section1 .table .box .price {font-size:16px; font-weight:700; color:#0066ff; white-space:nowrap;}
#section1 .table .box .price em {font-size:32px; font-weight:inherit;}
#section1 .txt {margin-top:20px; font-size:18px; color:#969798; letter-spacing:-0.5px; line-height:1.4;}
#section1 .txt a.view {vertical-align:middle; border-bottom:1px solid #000; font-size:16px; color:#000;}
#section1 .txt + .txt {margin-top:0;}

/* #section2 */
#section2 {background:#0066ff url('/images/event/20230705/sec2_bg.jpg') no-repeat center top; background-size:cover;}
#section2 hgroup > h1 {font-size:48px; color:#fff;}
#section2 .img {margin-top:-30px;}
#section2 .table {margin:0 -60px; background:#0066ff; padding:70px 0;}
#section2 .table ul {display:flex; flex-wrap:wrap; align-items:flex-start;}
#section2 .table li {position:relative; width:33.33%;}
#section2 .table li + li:before {display:block; content:''; position:absolute; top:50%; left:-40px; margin-top:-40px; width:79px; height:79px; background:url('/images/event/20230705/sec2_line.png') no-repeat center;}
#section2 .table li h2 {margin:18px auto 5px; font-size:36px; font-weight:600; color:#fff; letter-spacing:-1px; line-height:1.4;}
#section2 .table li p {font-size:24px; color:#95bffe; letter-spacing:-0.5px; line-height:1.4;}
#section2 a.link {position:relative; width:360px; border:2px solid #fff; background:#0066ff; padding:27px 50px 22px; text-align:left; font-size:26px; font-weight:600; color:#fff; letter-spacing:-0.5px; line-height:1.0; transition:all 0.5s ease;}
#section2 a.link:hover {background:#001539; color:#fff;}
#section2 a.link .arr {position:absolute; right:40px; top:50%; width:13px; height:21px; margin-top:-10px; background:url('/images/event/20230705/sec2_arr.png') no-repeat;}

/* #section3 */
#section3 {background:#ccecff;}
#section3 hgroup > h1 {font-size:48px; color:#001539;}
#section3 hgroup > h1 > em {font-size:80px; color:#0066ff;}
#section3 hgroup > p {font-size:30px; color:#001539;}
#section3 hgroup > p .no {vertical-align:middle;}
#section3 .table {width:inline-block; margin:0 auto -60px;}
#section3 .table ul {display:flex; flex-wrap:wrap; align-items:flex-start;}
#section3 .table li {position:relative; width:50%; text-align:right;}
#section3 .table li + li {text-align:left;}

/* #section4 */
#section4 {background:#fff;}
#section4 hgroup > span {margin-bottom:20px; font-size:30px; color:#000;}
#section4 hgroup > h1 {font-size:48px; color:#000;}
#section4 .img {margin-bottom:-30px; z-index:1;}
#section4 .table {margin:0 auto; border-radius:10px; background:#e7effa; padding:50px 0 45px;}
#section4 .table ul {display:flex; flex-wrap:wrap; align-items:flex-start;}
#section4 .table li {position:relative; width:33.33%;}
#section4 .table li + li {border-left:1px solid #d4ddea;}
#section4 .table .box {padding-left:100px; text-align:left;}
#section4 .table h2 {margin-bottom:20px; font-size:26px; font-weight:600; color:#0066ff; white-space:nowrap;}
#section4 .table p {position:relative; padding-left:16px; font-size:20px; color:#5d5d5d; white-space:nowrap;}
#section4 .table p:before {display:block; content:''; position:absolute; top:10px; left:0; width:5px; height:5px; border-radius:50px; background:#989898;}
#section4 .txt {margin-top:20px; font-size:18px; color:#969798; letter-spacing:-0.5px; line-height:1.4;}
#section4 .txt a {vertical-align:middle; border-bottom:1px solid #000; font-size:16px; color:#000;}

/* #section5 */
#section5 {background:#f1f1f1;}
#section5 hgroup > span {background:#131313;}
#section5 hgroup > span > em {background:linear-gradient(to right, #5a5ff2, #57fceb); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-weight:600;}
#section5 hgroup h1 {font-size:48px;}
#section5 hgroup p {color:#cfcfcf;}
#section5 .icon {position:absolute; bottom:-20px; left:50%; margin-left:310px; margin-bottom:0; background:transparent;}
#section5 .swiper5 .swiper-wrapper {animation:left_flow 50s linear infinite;}
#section5 .swiper5:hover .swiper-wrapper {animation-play-state:paused;}
@keyframes left_flow {from {transform:translateX(0)} to {transform:translateX(-2280px)}}

/* #section6 */
#section6 {background:#dadada; padding:50px 0;}
#section6 .inner {text-align:left;}
#section6 .tit {margin-bottom:5px; font-size:30px; font-weight:600; color:#000;}
#section6 .tit img {margin:2px 10px 0 0;}
#section6 .list li {position:relative; padding-top:10px; padding-left:16px; font-size:18px; color:#5d5d5d;}
#section6 .list li:before {display:block; content:''; position:absolute; top:18px; left:0; width:6px; height:6px; border-radius:50px; background:#989898;}

/* 뷰레이어 */
.view_layer {display:none; position:absolute; right:100px; margin-top:30px; width:1000px; box-shadow:0 0 30px rgba(0,0,0, 0.3); border-radius:10px; background:#fff; padding:40px 20px; z-index:3;}
.view_layer:before {display:block; content:''; position:absolute; top:-18px; right:60px; width:27px; height:18px; background:url('/images/event/20230705/lyr_arr.png') no-repeat;}
.view_layer .wrap {display:flex; flex-wrap:wrap; align-items:flex-start;}
.view_layer .cloud {width:57%; border-top-left-radius:10px; overflow:hidden;}
.view_layer .cloud .th {background:#0066ff;}
.view_layer .cloud tbody td:first-child {border-left:none;}
.view_layer .extend {width:43%; border-top-right-radius:10px; overflow:hidden;}
.view_layer .extend .th {background:#035ade; border-left-color:#035ade;}
.view_layer table {width:100%; border-collapse:collapse;}
.view_layer thead th.th {font-weight:600; color:#fff;}
.view_layer thead th {border-bottom:1px solid #dedede; border-left:1px solid #dedede; background:#dceaff; padding:10px 0 7px; text-align:center; font-size:18px; color:#000;}
.view_layer tbody td {border-bottom:1px solid #dedede; border-left:1px solid #dedede; background:#f7f7f7; padding:10px 0 7px; text-align:center; font-size:18px; color:#000; line-height:1.6;}
.view_layer tbody td.box {padding:20px 0 17px; vertical-align:top;}
.view_layer tbody td .per {font-size:30px; font-weight:600; color:#00276a; white-space:nowrap;}
.view_layer tbody td .price {font-size:16px; font-weight:600; color:#0066ff;}
.view_layer tbody td .price em {font-size:22px; font-weight:inherit;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {
	section .inner {padding:0 20px;}
	#section0 img {max-width:90%;}
	.view_layer {right:0;}
}
@media only screen and (max-width:1024px) {	
	#section4 .table .box {padding-left:60px;}
	.main_quick .quick_box .btn_round {width:100px; border-radius:10px; border-width:2px; padding:12px 0 7px; font-size:16px; font-weight:500;}
	.view_layer {width:100%;}
	.view_layer:before {right:60px;}
	.view_layer .cloud {width:100%; border-top-right-radius:10px;}
	.view_layer .extend {width:100%; border-top-right-radius:0;}
}
@media only screen and (max-width:768px) {
	section {padding:100px 0;}
	#section0 .txt2 {margin-top:-8vw;}
	#section1 .table .cloud,
	#section1 .table .extend {width:100%; margin-left:0;}
	#section2 .table {margin-top:40px;}
	#section2 .table {padding-top:40px;}
	#section2 .table ul {display:inherit; width:100%;}
	#section2 .table li {display:inline-block; width:49%; padding-top:30px; vertical-align:top;}
	#section2 .table li + li:before {background:none;}
	#section4 .table {padding-top:30px;}
	#section4 .table ul {display:inherit; width:100%;}
	#section4 .table li {display:inline-block; width:49%; padding-top:30px; vertical-align:top;}
	#section4 .table li + li {border-left:none;}
	#section4 .table p br {display:none;}
	.main_quick .quick_box .btn_round {width:80px; border-width:1px;}	
}
@media only screen and (max-width:766px) {
	#section2 hgroup > h1 br {display:none;}
	#section4 .table h2 {margin-bottom:5px;}
}
@media only screen and (max-width:640px) {
	#section1 hgroup > h1 {font-size:60px;}
	#section2 {background-size:auto;}
	#section2 .img {margin-top:0;}
	#section2 .table li {width:100%;}
	#section3 hgroup > h1 > em {font-size:inherit;}
	#section3 .table li {width:100%; text-align:center;}
	#section3 .table li + li {text-align:center;}
	#section3 .table li.img_l img {margin-left:-10vw;}
	#section3 .table li.img_r img {margin-right:-7vw;}
	#section4 .table ul {margin:0 auto;}	
	#section4 .table .box {padding-left:40px;}
}
@media only screen and (max-width:560px) {
	#section4 .table ul {width:50%;}
	#section4 .table li {width:100%;}	
	#section4 .table .box {padding-left:0;}
}
@media only screen and (max-width:510px) {
	section {padding:70px 0;}	
	section hgroup > span {margin-bottom:20px; font-size:26px;}
	section hgroup > span .no {display:block; margin:0 auto;}
	section hgroup > h1 br {display:none;}
	#section1 hgroup > h1 {font-size:48px;}
	#section1 .table .box .per {margin:10px 0; font-size:40px;}
	#section1 .table .box .price em {font-size:26px;}
	#section2 hgroup > h1 {font-size:36px;}
	#section2 .table li h2 {font-size:26px;}
	#section2 .table li p {font-size:20px;}
	#section3 hgroup > h1 {font-size:36px;}
	#section3 hgroup > p {font-size:24px;}	
	#section4 hgroup > span {font-size:22px;}
	#section4 hgroup > h1 {font-size:36px;}	
	#section5 hgroup h1 {font-size:36px;}
	.view_layer tbody td .price em {font-size:16px;}	
}
@media only screen and (max-width:500px) {
	#section1 .table .box .before span,
	#section1 .table .box .price span {display:none;}
	#section4 .img img {max-width:80%;}	
}
@media only screen and (max-width:375px) {
	#section1 .table .dt {font-size:24px;}
	#section1 .table .box .stit {font-size:20px;}
	#section1 .table .box .per {font-size:36px;}
	#section1 .table .box .before em {font-size:16px;}
	#section1 .table .box .price em {font-size:20px;}	
	#section2 a.link {width:90%;}
	#section4 .table ul {width:70%;}	
	.view_layer tbody td .per {font-size:26px;}
}
@media only screen and (max-width:340px) {
	#section2 a.link {width:100%; padding-left:40px;}
	#section4 .table ul {width:80%;}
}