@charset "utf-8";
@import url('//fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');

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

/* 공통 */
*, 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;*/}
body {min-width:320px; letter-spacing:-1px;}
img {max-width:100%;}
#header {position:relative; background:#fff; z-index:100;}
#footer {border-color:#d0d0d0; background:#fff;}
#wrap {position:relative; overflow:hidden; opacity:0;}
.top_btn {background:#03c75a;}
.top_btn:hover {background:#00ac4c;}
.show_mot {transform:translateY(100px); opacity:0; transition:transform 1s cubic-bezier(0.15, 0.85, 0.45, 1), opacity 1s cubic-bezier(0.32, 0.94, 0.6, 1);}
.show_mot.on {transform:translateY(0); opacity:1;}
.section {position:relative; padding:90px 0; text-align:center; overflow:hidden; transition:all 0.3s ease;}
.section .inner {position:relative; max-width:1180px; margin:auto;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section h1 {margin-bottom:70px; font-size:56px; font-weight:400; color:#333; letter-spacing:-5px; line-height:1.2;}

/* #section0 */
#section0 {background:url('/images/event/20230322/sec0_bg.jpg') repeat center top; background-size:cover; padding-bottom:0;}
#section0 .inner {max-width:inherit;}
#section0 .txt > p {display:inline-block; margin-bottom:25px; border-bottom:1px solid #fff; font-family:'GmarketSans', sans-serif; font-size:32px; font-weight:400; color:#fff; letter-spacing:-1px; line-height:1.0;}
#section0 .txt > h1 {margin-bottom:25px; font-family:'GmarketSans', sans-serif; font-size:95px; font-weight:700; color:#fff; letter-spacing:-5px; line-height:1.1; transition-delay:0.1s;}
#section0 .txt > h1 em {font-weight:inherit; color:#000;}
#section0 .txt > span {display:inline-block; border-radius:50px; background:#000; padding:10px 30px 5px; font-family:'GmarketSans', sans-serif; font-size:24px; font-weight:400; color:#fff; letter-spacing:-1px; line-height:1.2; transition-delay:0.2s;}
#section0 .img {transition-delay:0.3s;}

/* #section1 */
#section1 {background:#effdf0;}
#section1 .inner {display:flex; flex-direction:row; align-items:center;}
#section1 .img {padding:0 60px;}
#section1 .txt {text-align:left;}
#section1 .txt > span {display:inline-block; margin-bottom:30px; margin-left:-5px;}
#section1 .txt > p {margin-bottom:30px; font-size:26px; font-weight:400; color:#222; letter-spacing:-1px; line-height:1.6;}
#section1 .txt > a {display:inline-block; background:url('/images/event/20221001/sec1_arrow.png') no-repeat right center; border-bottom:1px solid #03c75a; padding-right:15px; font-size:18px; font-weight:400; color:#03c75a; letter-spacing:-1px; line-height:1.2;}

/* #section2 */
#section2 {background:#fff;}
#section2 .inner {display:flex; flex-direction:row; align-items:center; max-width:1060px;}
#section2 .inner .img {width:50%; text-align:left;}
#section2 .inner .txt {width:50%; padding-left:60px; text-align:left;}
#section2 .inner.reverse {flex-direction:row-reverse;}
#section2 .inner.reverse .txt {padding-left:36px;}
#section2 .inner.reverse .img {text-align:right;}
#section2 .inner + .inner {padding-top:65px;}
#section2 .txt > span {display:inline-block; margin-bottom:30px; border-radius:5px; background:#03c75a; width:42px; height:42px;  text-align:center; font-family: 'Montserrat', sans-serif; font-size:26px; font-weight:700; color:#fff; letter-spacing:-1px; line-height:42px;}
#section2 .txt > h2 {margin-bottom:15px; font-size:38px; font-weight:500; color:#222; letter-spacing:-2px; line-height:1.2;}
#section2 .txt > p {margin-bottom:10px; font-size:20px; font-weight:400; color:#333; letter-spacing:-1px; line-height:1.6;}

/* #section3 */
#section3 {background:#e1f5fe;}
#section3 .inner {display:flex; flex-direction:column; align-items:flex-start;}
#section3 .inner.reverse {align-items:flex-end;}
#section3 .box {position:relative; width:660px; margin:18px 0; border-radius:100px; border:1px solid #ececec; background:#fff url('/images/event/20221001/sec3_arrow.png') no-repeat 40px center; padding:26px 40px 30px 90px; text-align:left; font-size:26px; font-weight:500; color:#222; letter-spacing:-1px; line-height:1.2;}
#section3 .box em {font-weight:600; color:#03c75a;}
#section3 .box.box1 {margin-left:200px; margin-top:0;}
#section3 .box.box2 {width:840px;}
#section3 .box.box2 img {position:absolute; bottom:5px; right:40px;}
#section3 .box.box3 {width:740px;}
#section3 .box.box3 img {position:absolute; bottom:-20px; right:20px;}
#section3 .box.box4 {margin-right:80px;}

/* #section4 */
#section4 {background:#003348 url('/images/event/20230322/sec4_bg.jpg') no-repeat center top;}
#section4 h1 {color:#fff; line-height:1.2;}
#section4 h1 em {color:#ffd850;}
#section4 h1 em strong {font-size:1.1em;}
#section4 p {margin:-50px auto 30px; font-size:20px; font-weight:100; color:#fff; line-height:1.4;}
#section4 .img + p {margin:-90px auto 0;}
#section4 a {display:inline-block; vertical-align:top; margin-left:8px; border-bottom:1px solid #03c75a; font-size:16px; font-weight:400; color:#03c75a;}

/* #section5 */
#section5 {background:#f3f3f3;}
#section5 .inner {max-width:1060px;}
#section5 .step {display:flex; flex-direction:row; align-items:center; margin:-20px 0 50px;}
#section5 .step .circle {width:210px; height:210px; border-radius:100px; border:1px solid #03c75a; background:#fff; overflow:hidden;}
#section5 .step .circle span {display:block; position:relative; margin:38px 0 15px; font-size:20px; font-weight:600; color:#03c75a; letter-spacing:-1px; line-height:2.2;}
#section5 .step .circle span:after {display:block; content:''; position:absolute; bottom:0; left:50%; margin-left:-11px; width:22px; height:3px; background:#03c75a;}
#section5 .step .circle p {font-size:24px; font-weight:600; color:#222; letter-spacing:-1px; line-height:1.3;}
#section5 .step .circle em {font-weight:400;}
#section5 .step .arr {width:70px; height:210px; background:url('/images/event/20221001/sec5_arrow.png') no-repeat center; text-align:center;}
#section5 h2 {margin-bottom:10px; text-align:left; font-size:20px; font-weight:600; color:#222; letter-spacing:-1px; line-height:1.4;}
#section5 .list {margin-bottom:50px;}
#section5 .list li {padding-left:10px; text-indent:-10px; text-align:left; font-size:18px; font-weight:400; color:#333; letter-spacing:-1px; line-height:1.8;}
#section5 .list li a {display:inline-block; margin-left:5px; text-indent:0; border-bottom:1px solid #03c75a; font-size:16px; font-weight:400; color:#03c75a; letter-spacing:-1px; line-height:1.2;}
#section5 .list li a.arr {background:url('/images/event/20221001/sec1_arrow.png') no-repeat right center; padding-right:12px;}
#section5 a.join {display:inline-block; width:400px; height:90px; margin:5px; border-radius:10px; border:2px solid #03c75a; background:#fff; text-align:center; font-size:26px; font-weight:600; color:#03c75a; letter-spacing:-1px; line-height:90px; transition:all 0.5s ease;}
#section5 a.join:hover {border-color:#00ac4c; color:#00ac4c;}
#section5 a.register {display:inline-block; width:400px; height:90px; margin:5px; border-radius:10px; border:2px solid transparent; background:#03c75a; text-align:center; font-size:26px; font-weight:600; color:#fff; letter-spacing:-1px; line-height:90px; transition:all 0.5s ease;}
#section5 a.register:hover {background:#00ac4c;}

/* #section6 */
#section6 {background:#282828; padding:60px 0; text-align:left;}
#section6 .inner {display:flex; flex-direction:row; align-items:flex-start; max-width:1060px;}
#section6 .notice {width:calc(100% - 235px); margin-right:35px;}
#section6 .notice h1 {margin-bottom:15px; border-bottom:1px solid #7e7e7e; padding-bottom:20px; font-size:28px; font-weight:600; color:#fff; letter-spacing:-1px; line-height:1.0;}
#section6 .notice dt {display:inline-block; vertical-align:top; width:125px; margin:9px 0; font-size:18px; font-weight:500; color:#8a8a8a; letter-spacing:-1px; line-height:1.2;}
#section6 .notice dd {display:inline-block; vertical-align:top; width:calc(100% - 130px); margin:9px 0; font-size:18px; font-weight:400; color:#b1b0b0; letter-spacing:-1px; line-height:1.2;}
#section6 .customer {width:195px;}
#section6 .customer h2 {margin-top:12px; margin-bottom:10px; border-bottom:1px solid #7e7e7e; padding-bottom:15px; font-size:15px; font-weight:600; color:#fff; letter-spacing:-1px; line-height:1.4;}
#section6 .customer a {display:inline-block; font-size:34px; font-weight:600; color:#fff; letter-spacing:-1px; line-height:1.4;}
#section6 .customer li {font-size:16px; font-weight:400; color:#8a8a8a; letter-spacing:-1px; line-height:1.4;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {
	.section .inner,
	.section > h1,
	#section4 p {padding:0 20px;}	
}
@media only screen and (max-width:900px) {
	#section0 .txt > h1 {font-size:60px;}	
	#section0 .txt > p br {display:block;}

	#section1 .inner {flex-direction:column;}
	#section1 .img {margin-bottom:50px; padding:0;}

	#section2 .inner {flex-direction:column !important;}
	#section2 .inner .img {width:520px; margin-bottom:30px;}
	#section2 .inner .txt {width:520px; padding-left:0 !important;}
	#section2 .txt > span {vertical-align:middle; margin-bottom:15px;}
	#section2 .txt > h2 {display:inline-block; vertical-align:middle; padding-left:10px;}
	#section2 .txt > p {margin-bottom:0;}

	#section3 .box {margin:18px auto !important;}

	#section6 .inner {flex-direction:column;}
	#section6 .notice {width:100%; margin-right:0;}
	#section6 .customer {width:100%; margin-top:20px;}
}
@media only screen and (max-width:768px) {
	.section {padding:80px 0;}	
	.section h1 {margin-bottom:40px; font-size:42px;}
	#section3, #section4, #section5 {padding-bottom:80px;}	
	#section0 .txt > p {font-size:24px;}
	#section0 .txt > h1 {margin-bottom:20px; font-size:50px;}
	#section0 .img {margin-top:30px;}
	#section0 .img img {max-width:140%; margin-left:-20%; margin-right:-20%;}
	#section1 .txt > span {margin-bottom:20px;}
	#section1 .txt > p {font-size:22px;}
	#section2 .txt > span {width:35px; height:35px; line-height:35px; font-size:30px;}
	#section2 .txt > h2 {font-size:30px;}
	#section3 .box {font-size:22px; margin:0 auto 18px !important}
	#section4 p {margin-top:-20px;}
	#section4 .img + p {margin-top:-60px;}
	#section4 .img img {max-width:120%; margin-left:-10%; margin-right:-10%;}
	#section5 .step {margin-top:0;}
	#section5 .step .circle p {font-size:20px;}
}
@media only screen and (max-width:740px) {
	#section3 .box {width:100% !important;}
	#section3 .box.box2 img,
	#section3 .box.box3 img {display:none;}
}
@media only screen and (max-width:640px) {
	#section5 .step .circle p {font-size:18px;}	
	#section5 .step .arr {width:40px; background-size:7px 11px;}
}
@media only screen and (max-width:500px) {
	.section h1 {font-size:35px;}
	#section0 .txt > h1 {font-size:40px;}
	#section1 .txt > p {font-size:20px;}
	#section1 .txt > p br,
	#section2 .txt > p br {display:none;}
	#section2 .txt > span {font-size:26px;}
	#section2 .txt > h2 {font-size:28px;}
	#section2 .txt > p {font-size:20px;}
	#section2 .inner .img,
	#section2 .inner .txt {width:100%;}	
	#section3 .box {background-position:30px center; padding:20px 20px 20px 70px; font-size:20px;}
	#section4 h1 br {display:none;}
	#section5 .step {flex-direction:column;}
	#section5 .step .circle {width:100%; height:auto; padding-bottom:10px;}
	#section5 .step .circle span {margin:0 0 10px;}
	#section5 .step .circle p br {display:none;}
	#section5 .step .arr {height:30px; transform:rotate(90deg);}	
	#section5 a.join,
	#section5 a.register {width:100%; margin-left:0; margin-right:0;}
}
@media only screen and (max-width:400px) {
	#section0 .txt > p {border-bottom:none; line-height:1.2;}
	#section0 .txt > h1 {line-height:1.2;}
	#section4 h1 + p br {display:none;}	
	#section6 .notice dt,
	#section6 .notice dd {display:block; width:100%;}	
}
@media only screen and (max-width:375px) {
	#section0 .txt > p br {display:none;}
	#section1 .txt > a {font-size:16px;}
	#section4 .img + p {margin-top:-40px;}	
}

/* 뷰레이어 */
.view_bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:10;}
.view_layer {display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:1060px; height:780px; border-radius:20px; background:#fff; padding:35px 40px 40px; text-align:left; z-index:11;}
.view_layer h1 {margin-bottom:25px; font-size:28px; font-weight:700; color:#333; letter-spacing:-2px; line-height:1.2}
.view_layer .close {position:absolute; top:36px; right:40px; width:19px; height:19px; background:url('/images/event/20221001/layer_close.png') no-repeat; background-size:cover; cursor:pointer;}
.view_layer .scroll {height:calc(100% - 60px);; overflow-y:auto;}
.view_layer table {width:100%; border-top:1px solid #ddd; border-left:1px solid #ddd;}
.view_layer th {border-bottom:1px solid #ddd; border-right:1px solid #ddd; background:#f6f6f6; padding:15px 10px; text-align:center; font-size:17px; font-weight:500; color:#333; letter-spacing:-1px; line-height:1.6;}
.view_layer tbody th {padding:15px 20px; text-align:left;}
.view_layer td {border-bottom:1px solid #ddd; border-right:1px solid #ddd; background:#fff; padding:20px 10px; text-align:left; font-size:16px; font-weight:500; color:#333; letter-spacing:-1px; line-height:1.6;}
.view_layer td p {font-size:15px; font-weight:400; color:#666; letter-spacing:-1px; line-height:1.6;}
@media only screen and (max-width:1060px) {
	.view_layer {top:10px; bottom:10px; left:10px; right:10px; transform:translate(0, 0); width:auto; height:auto; padding:30px;}
	.view_layer .close {right:30px;}
	.view_layer .scroll {height:calc(100% - 60px);}	
}
@media only screen and (max-width:768px) {
	.view_layer tbody th {padding:10px;}
	.view_layer tbody th br, .view_layer tbody td br {display:none;}
}
@media (min-width:0) and (max-width:640px) {
	.view_layer h1 {font-size:24px;}
	.view_layer col:nth-child(1),
	.view_layer thead th:nth-child(1),
	.view_layer tbody th {display:none;}	
}