@charset "utf-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');


/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2021-07-06
Modify Date : 2021-07-12
File : /event/2021/kakaopaybuy
*******************************************/

/* 공통 */
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:360px; letter-spacing:-1px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:1;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#ebd113; transition:all 0.3s ease;}
.top_btn:hover {background:#d0b000;}
.show_mot {position:relative; opacity:0; top:20px;}
.section {position:relative; height:auto; padding:100px 0; text-align:center; transition:all 0.3s ease;}
.section .inner {position:relative; width:1180px; height:100%; margin:auto; text-align:center;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section hgroup {margin-bottom:50px;}
.section hgroup .icon {display:inline-block; margin-bottom:-20px;}
.section hgroup h3 {position:relative; margin-bottom:20px; font-size:42px; font-weight:700; color:#191f28; letter-spacing:-3px; line-height:1.3;}
.section hgroup h3 span {font-weight:300;}
.section hgroup h3 + p {font-size:17px; color:#191f28; line-height:1.6;}
.startBtn em, .link em {font-family:'Dotum', sans-serif;}

/* 뷰레이어 */
.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:-300px 0 0 -450px; width:900px; box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius:30px; border:3px solid #191f28; background:#fff; padding:25px 30px; text-align:left; z-index:3; overflow-y:auto;}
.view_layer h5 {margin-bottom:15px; border-bottom:1px solid #c7c7cb; padding-bottom:20px; font-size:24px; font-weight:700; color:#191f28; letter-spacing:-2px;}
.view_layer h5 + p {margin-bottom:20px; background:#f7f7f7; padding:15px 20px; text-align:center; font-size:17px; color:#888; line-height:1.4;}
.view_layer dl {border-top:1px dotted #c0c0c0;}
.view_layer dl {display:block;}
.view_layer dl dt, .view_layer dl dd {float:left; padding:10px 0; box-sizing:border-box; font-size:16px; letter-spacing:-0.5px; line-height:1.8;}
.view_layer dl dt {position:relative; width:20%; padding-left:10px; text-indent:-10px; font-weight:500; line-height:1.3;}
.view_layer dl dd {width:80%; padding-left:10px; color:#666; line-height:1.3;}
.view_layer dl a.link {color:#13759c; text-decoration:underline;}
.view_layer dl a.link em {font-family:'Dotum', sans-serif; font-weight:600;}
.view_layer .close {position:absolute; top:30px; right:30px; width:20px; height:20px; background:url('/images/event/20210104/layer_close.png') no-repeat center; cursor:pointer;}
@media only screen and (max-width:800px) {
	.view_layer {width:auto; left:10px; right:10px; margin-left:0; padding:15px 20px;}
	.view_layer h5 {padding-bottom:15px;}
	.view_layer h5 + p {font-size:16px;}
	.view_layer .close {top:20px; right:20px;}
}
@media only screen and (max-width:600px) {
	.view_layer {top:10px; margin-top:0; bottom:10px;}
	.view_layer h5 + p br {display:none;}
}
@media only screen and (max-width:375px) {
	.view_layer h5 {font-size:18px;}
	.view_layer h5 + p {font-size:16px;}
	.view_layer dl dt, .view_layer dl dd {font-size:15px;}
	.view_layer dl dt {width:30%;}
	.view_layer dl dd {width:70%;}
}

/* #section0 */
body {background:url('/images/event/20210709/sec0_bg.jpg') no-repeat center 61px;}
#section0 {background:url('/images/event/20210709/sec0_bg.jpg') no-repeat center top; background-size:cover; padding:170px 0 0;}
#section0 .txt {float:left; text-align:left;}
#section0 .txt .stxt1 {margin-left:0;}
#section0 .txt .stxt2 {margin:20px 0 40px;}
#section0 .txt .stxt3 {margin-left:0; font-size:22px; color:#000;}
#section0 .img {float:right; margin:0 -130px 0 0;}
#section0 .box {margin-top:70px; border-radius:30px; border:3px solid #191f28; background:#fff url('/images/event/20210709/sec0_icon.png') no-repeat calc(100% - 35px) 30px; padding:50px 30px;}
#section0 .box .under {position:relative;}
#section0 .box .under:before {display:block; content:''; position:absolute; bottom:0; left:0; right:0; width:100%; height:10px; background:#ffeb00;}
#section0 .box .under em {position:relative; font-size:30px; font-weight:700; color:#191f28;}
#section0 .box .stxt {margin-top:20px; font-size:20px; color:#191f28; line-height:1.6;}

/* #section1 */
#section1 {background:#fff;}
#section1 .cont {margin:0 auto 50px; /*display:flex;*/}
#section1 .cont li {float:left; width:50%; transition:all 0.1s ease 0s !important;}
#section1 .cont li:hover {transform:translateY(-5px);}
#section1 .cont .cont1 {padding-right:15px;}
#section1 .cont .cont2 {padding-left:15px;}
#section1 .cont .cont1 .box {background:#ffe100;}
#section1 .cont .cont2 .box {background:#3c64ff;}
#section1 .cont .box {box-shadow:2px 5px 10px rgba(0,0,0,0.2); border-radius:20px; padding:50px 45px 50px 50px; transition:all 0.3s linear 0.1s;}
#section1 .cont li:hover .box {box-shadow:2px 5px 20px rgba(0,0,0,0.5);}
#section1 .cont .box + p {padding-top:10px; text-align:right; font-size:15px; color:#b0b0b0;}
#section1 .cont h4 {margin-bottom:20px; text-align:left; font-size:33px; font-weight:700; color:#191f28; line-height:1.3; white-space:nowrap;}
#section1 .cont + p {font-size:24px; font-weight:700; color:#191f28;}

/* #section2 */
#section2 {background:#9cc6fb;}
#section2 hgroup .icon {margin-bottom:15px;}
#section2 hgroup h3 {font-size:46px;}
#section2 .cont + hgroup {margin-top:50px;}

/* #section9 */
#section9 {background:#66a3ef;}
#section9 .cont {margin:0 -50px -10px;}
#section9 .cont p {padding:0 10px; font-size:17px; color:#191f28;}

/* #section3 */
#section3 {background:#fcfbe9;}
#section3 hgroup h3 + p {font-size:18px;}

/* #section4 */
#section4 {background:#a7e4ff;}
#section4 .inner {width:970px; margin:0 auto; text-align:left;}
#section4 hgroup h3 + p {font-size:18px;}
#section4 .cont {display:flex; flex-wrap:wrap;}
#section4 .cont li {float:left; width:50%; margin-top:60px; /*transition:all 0.3s linear;*/}
#section4 .cont li:nth-child(even) {margin-top:0; padding-left:80px;}
#section4 .cont li:hover {transform:translateY(-5px);}
#section4 .cont h4 {margin:30px 0 20px; font-size:20px; font-weight:700; color:#191f28; line-height:1.3;}
#section4 .cont h4 + p {font-size:18px; color:#191f28; line-height:1.3;}

/* #section5 */
#section5 {background:#3c64ff;}
#section5 hgroup h3 {color:#fff;}
#section5 .cont + .cont {margin-top:50px;}

/* #section6 */
#section6 {background:#373737;}
#section6 hgroup h3 {color:#fff;}
#section6 .cont + .cont {margin-top:50px;}
#section6 .cont + dl {margin-top:30px;}
#section6 dl {text-align:left;} 
#section6 dt {display:inline-block; vertical-align:top; width:80px; font-size:15px; color:#fff;}
#section6 dd {display:inline-block; vertical-align:top; width:calc(100% - 90px); font-size:15px; color:#fff;}

/* #section7 */
#section7 {background:#fff;}
#section7 dl {margin-top:20px; text-align:left;} 
#section7 dt {padding:10px 0; font-size:22px; font-weight:700; color:#191f28;}
#section7 dt img {vertical-align:middle;}
#section7 dd {background:#f2f2f2; padding:20px 95px; font-size:15px; color:#191f28;}
#section7 dd a.link {margin-left:5px; border-bottom:1px solid #257cff; color:#257cff;}
#section7 .bnr {margin-top:60px;} 
#section7 .bnr a {display:block; height:104px; background:url('/images/event/20210709/sec7_bnr_bg.png') no-repeat left center; background-size:cover; padding-right:50px; text-align:right;}

/* #section8 */
#section8 {background:#1d242f; padding:70px 0;}
#section8 hgroup {margin-bottom:40px;}
#section8 h3 {font-size:26px; color:#fff; letter-spacing:-2px; line-height:1.5;}
#section8 h3 span {color:#b0b8c1;}
#section8 .startBtn > a {display:inline-block; border-radius:10px; background:#3081f5; padding:30px 100px; font-size:26px; font-weight:700; color:#fff; transition:all linear 0.5s;}
#section8 .startBtn > a:hover {background:#ebd113;}
#section8 .startBtn + p {display:none; margin-top:40px; font-size:17px; color:#fff; letter-spacing:-0.5px; line-height:1.3;}
#section8 p span {display:inline-block; vertical-align:middle; margin-bottom:0.5em; font-size:0.8em;}
#section8 p span.slash {margin-bottom:0.3em; font-size:0.8em;}
#section8 p span.end {display:none; margin-bottom:0.3em; font-size:0.8em;}
#section8 p .link {border-bottom:1px solid #fff; color:#fff;}

/* 반응형 처리 */
@media only screen and (max-width:1180px) {	
	.section .inner {width:100%; padding:0 20px;}
	#section0 {padding-top:100px;}
	#section0 .txt {float:none; width:100%; text-align:center;}
	#section0 .img {float:none; margin:50px auto 0;}
	#section0 .box {margin-top:30px;}	
}
@media only screen and (max-width:970px) {
	.section {padding:80px 0;}
	#section2 .cont img {max-width:104%; margin-left:-2%; margin-right:-2%;}
	#section9 .cont {margin-left:-30px; margin-right:-30px;}
	#section5 .cont img {max-width:112%; margin-left:-6%; margin-right:-6%;} 
	#section4 .inner {width:100%; padding:0 20px; text-align:center;}
	#section4 hgroup h3 br {display:none;} 
	#section4 .cont li {width:100%; margin-top:40px !important; padding:0 !important;}
	#section4 .cont li:first-child {margin-top:0 !important;}	
}
@media only screen and (max-width:768px) {
	#section0 .box .stxt br {display:none;}
	#section1 .cont li {width:100%;}
	#section1 .cont li + li {padding-top:40px;}
	#section1 .cont .cont1 {padding-right:0;}
	#section1 .cont .cont2 {padding-left:0;}	
	#section9 .cont {margin-left:-20px; margin-right:-20px;}
	#section7 dd {padding:20px;}
	#section7 .bnr a img {display:none;}
}
@media only screen and (max-width:600px) {
	#section0 .img img {max-width:104%; margin-left:0; margin-right:-4%;}
}
@media only screen and (max-width:500px) {
	.section {padding:60px 0;}	
	.section hgroup h3 {font-size:36px !important;}
	.section hgroup .icon {margin-bottom:-10px;}
	.section hgroup .icon img {max-height:60px;}
	.section hgroup h3 + p br {display:none;}
	#section0 {padding-top:80px;}
	#section1 .cont .box {padding:50px 30px;}
	#section9 .cont {margin-left:-10px; margin-right:-10px;}
	#section4 .cont h4 + p br {display:none;}
	#section6 .cont img {max-width:160%; margin-left:-30%; margin-right:-30%;}
	#section7 .bnr {margin-top:40px;}
	#section7 .bnr a {height:90px;}
	#section8 h3 {font-size:26px !important;}
	#section8 h3 br {display:none;}
	#section8 .startBtn > a {width:100%; padding-left:20px; padding-right:20px;}
}
@media only screen and (max-width:450px) {
	#section7 .bnr a {height:80px;}
}
@media only screen and (max-width:375px) {
	.section hgroup h3 {font-size:30px !important;}
	.section br {display:none;}
	#section0 .box .under em {font-size:26px;}
	#section0 .box .stxt {font-size:18px;}
	#section1 .cont h4 {font-size:26px;}
	#section1 .cont h4 br {display:block;}
	#section1 .cont + p {font-size:20px;}
	#section7 dd br {display:block;}
	#section7 .bnr a {height:70px;}
	#section8 h3 {font-size:26px !important;}
	#section8 .startBtn > a {padding:20px;}
}