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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2021-02-28
Modify Date : 2021-02-29
File : /event/2021/payco
*******************************************/

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;}
#section0 .txt span strong, #section0 .txt p,
#section1 .price {font-family:"Spoqa Han Sans", sans-serif;}
body {min-width:360px;}
img {max-width:100%;}
#event_header {position:relative; background:#fff; z-index:5;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.show_mot {position:relative; opacity:0; top:20px;}
.top_btn {background:#2989e1;}
.section > .inner, .section > .tab_space {opacity:1; /*transition:opacity 0.5s ease;*/}
.section.active > .inner, .section.active > .tab_space {opacity:1;}
.section {position:relative; height:auto; padding:120px 0; text-align:center;}
.section .inner {position:relative; width:1180px; /*height:100%;*/ margin:auto; text-align:center;}
.section h3 {margin-bottom:50px; font-size:50px; font-weight:300; color:#000; letter-spacing:-3px; line-height:1.2;}
.section h3 strong {font-weight:500;}
.section h3 em {font-style:italic; font-weight:inherit;}
.section h3 p {padding-top:20px; font-size:20px; font-weight:300; color:#424242; letter-spacing:-1px; line-height:1.4;}

/* #section0 */
body {background:url('/images/event/20210201/sec0_bg.jpg') no-repeat center 61px;}
#section0 {background:#e9e9e9 url('/images/event/20210201/sec0_bg.jpg') no-repeat center top;}
#section0 .txt {position:absolute; top:-20px; text-align:left; z-index:1;}
#section0 .txt span {position:relative; font-size:30px; font-weight:300; color:#141414;}
#section0 .txt span:before {display:block; content:''; position:absolute; top:50%; right:-35px; width:30px; height:1px; background:#141414;}
#section0 .txt span strong {font-size:42px; font-weight:inherit;}
#section0 .txt h3 {margin:15px 0 50px; font-size:60px; font-weight:600; color:#141414; letter-spacing:-5px; line-height:1.2;}
#section0 .txt h3 strong {font-weight:inherit; color:#ed1111;}
#section0 .txt h3 em {font-weight:inherit;}
#section0 .txt p {font-size:24px; font-weight:300; color:#141414;}
#section0 .img {position:relative; top:120px; right:0;}
#section0 .img1 {margin:60px 0 40px 120px;}
#section0 .img2 {position:absolute; bottom:0; right:0;}

/* #section1 */
#section1 {background:#f13c3c; padding-top:30px;}
#section1 .step {display:inline-block; width:270px; height:170px; line-height:190px; margin-bottom:-50px; border-radius:50%; background:#f13c3c; font-size:50px; font-weight:500; color:#fff; letter-spacing:-2px; z-index:1;}
#section1 .box {width:896px; margin:auto; box-shadow:0 5px 10px rgba(0,0,0,0.2); border-radius:5px; background:#fff; padding:80px 40px 50px;}
#section1 .box + .step {margin-top:10px;}
#section1 h3 {display:inline-block; position:relative; margin-bottom:0; font-size:30px; font-weight:600; color:#141414; letter-spacing:-2px;}
#section1 h3:before {display:block; content:''; position:absolute; bottom:-5px; left:-10px; right:-10px; height:15px; background:#eee;}
#section1 h3 span {position:relative; font-weight:inherit;}
#section1 .price {margin:20px 0 30px; font-size:43px; font-weight:300; color:#ababab;}
#section1 .price span {position:relative;}
#section1 .price span:before {display:block; content:''; position:absolute; top:45%; left:-10px; width:158px; height:11px; background:url('/images/event/20210201/sec1_arr.png') no-repeat center;}
#section1 .price strong {margin-left:20px; font-size:75px; color:#f13c3c;}
#section1 .price strong em {font-size:85px; font-weight:inherit;}
#section1 .content {width:550px; margin:auto; text-align:left;}
#section1 .content dl {margin:10px 0;}
#section1 .content dt {display:inline-block; vertical-align:top; border-radius:50px; background:#272727; padding:0 25px 2px 25px; font-size:19px; font-weight:300; color:#fff; letter-spacing:-2px;}
#section1 .content dd {display:inline-block; padding-left:15px; font-size:22px; font-weight:300; color:#1a1a1a; letter-spacing:-1px; line-height:1.3;}
#section1 .content dd br {display:none;}

/* #section2 */
#section2 {background:#fcfcfc url('/images/event/20210201/sec2_bg.jpg') no-repeat center top;}
#section2 h3 br {display:none;}
#section2 .txt {padding:30px 0 40px; font-size:30px; font-weight:400; color:#141414; letter-spacing:-2px; line-height:1.4;}
#section2 .desc {font-size:20px; font-weight:300; color:#707070; letter-spacing:-1px; line-height:1.4;}

/* #section3 */
#section3 {background:#272727;}
#section3 h3 {color:#fff;}
#section3 h3 br {display:none;}
#section3 .img {width:1000px; margin:100px auto 0;}
#section3 .img > div {float:left; width:33.33%; box-sizing:border-box;}
#section3 .img > div:hover {transform:translate(0, -10px);}
#section3 h4 {margin:30px 0 10px; font-size:30px; font-weight:500; color:#fff; letter-spacing:-2px; line-height:1.2; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
#section3 p {font-size:19px; color:#b9b9b9;}

/* #section4 */
#section4 .inner {width:896px;}
#section4 .cont {margin:0 -70px;}
#section4 .cont dl {position:relative; display:inline-block; vertical-align:top; width:230px; height:180px; margin:30px 50px; border-radius:5px; background:#eee; padding-top:60px;}
#section4 .cont dl:before {display:block; content:''; position:absolute; top:50%; left:-57px; margin-top:-13px; width:15px; height:26px; background:url('/images/event/20210201/sec4_arr.png') no-repeat;}
#section4 .cont dl.spec1:before,
#section4 .cont dl.spec4:before {background:none;}
#section4 .cont dt {font-size:25px; color:#141414; letter-spacing:-2px; line-height:1.2;}
#section4 .cont dd {padding-top:10px; font-size:17px; font-weight:300; color:#141414; letter-spacing:-1px; line-height:1.2;}
#section4 .cont dl.spec6 {background:#f13c3c;}
#section4 .cont dl.spec6 dt, 
#section4 .cont dl.spec6 dd {color:#fff;}
#section4 .registBtn {margin-top:50px;}
#section4 .registBtn a {display:inline-block; width:330px; line-height:70px; border-radius:50px; background:#333; font-size:26px; color:#fff; letter-spacing:-2px; transition:all 0.5s ease;}
#section4 .registBtn a:hover {background:#f13c3c;}

/* #section5 */
#section5 {background:#272727; padding:70px 0;}
#section5 .inner {width:896px;}
#section5 h3 {float:left; padding-top:5px; font-size:23px; font-weight:400; color:#fff; line-height:1.0;}
#section5 .note {padding-left:150px; text-align:left;}
#section5 .note li {padding-left:10px; text-indent:-15px; font-size:19px; font-weight:300; color:#bcbbbb; letter-spacing:-2px; line-height:1.8;}

@media only screen and (max-width:1180px) {
	.section .inner {width:100%; padding:0 20px;}
	#section0 .txt {left:20px; right:20px;}
	#section0 .img1 {margin-left:0; max-width:80%;}
	#section0 .img2 {max-width:50%;}
	#section4 .cont dl.spec4:before {background:url('/images/event/20210201/sec4_arr.png') no-repeat;}
}
@media only screen and (max-width:1000px) {
	#section3 .img {width:100%;}	
}
@media only screen and (max-width:896px) {
	#section0 .img {top:160px; margin-bottom:70px;}
	#section0 .img1 {margin-left:-150px;}
	#section1 .box,
	#section3 .inner,
	#section4 .inner,
	#section5 .inner {width:100%;}	
}
@media only screen and (max-width:768px) {
	.section {padding:100px 0;}
	.section h3 {font-size:40px;}
	#section0 .img1 {margin-left:-200px;}
	#section0 .txt h3 {margin-bottom:30px; font-size:48px;}
	#section1 .step {font-size:40px; height:120px; line-height:120px;}
	#section2 .txt {padding-top:0;}
	#section3 .img > div {width:50%;}
	#section3 .img > div.img3 {padding-top:50px;}	
}
@media only screen and (max-width:600px) {
	#section0 .txt h3 br {/*display:none;*/}
	#section0 .img2 {right:-10px;}
	#section1 .content {width:100%;}
	#section1 .content dd br {display:block;}
	#section2 .txt {font-size:25px;}
	#section3 .img {margin-top:70px;}
	#section3 .img > div {width:100%;}
	#section3 .img > div.img2 {padding-top:50px;}
	#section4 .cont {margin-top:-30px; margin-bottom:-30px;}
	#section4 .cont dl {width:330px;}
	#section4 .cont dl:before {top:-40px; left:50%; margin-top:0; margin-left:-7px;	transform:rotate(90deg);}
	#section5 .note {padding-left:100px;}
}
@media only screen and (max-width:550px) {
	#section0 .txt h3 {font-size:45px;}
}
@media only screen and (max-width:500px) {
	.section h3 p br {display:none;}
	#section0 .txt span {font-size:25px;}
	#section0 .txt span strong {font-size:30px;}
	#section0 .txt h3 {font-size:40px;}
	#section0 .img1 {max-width:100%;}
	#section5 h3 {float:none; margin-bottom:10px; text-align:left;}
	#section5 .note {padding-left:0;}	
}
@media only screen and (max-width:400px) {
	.section {padding:70px 0;}
	#section0 .txt span:before {width:20px; right:-25px;}
	#section0 .txt h3 {margin:0 0 10px;}
	#section0 .img {margin-bottom:100px;}	
	#section1 .step {width:220px;}
	#section1 .price {margin-right:-20px;}
	#section1 .price strong {font-size:60px;}
	#section1 .price strong em {font-size:70px;}
	#section1 .content dd {display:block; padding-top:5px; padding-left:5px;}
	#section1 h3,
	#section3 h4 {font-size:25px;}
	#section2 .txt br {display:none;}	
	#section4 .registBtn a {width:100%;}
}
@media only screen and (max-width:375px) {
	.section h3,
	#section1 .step {font-size:34px;}
	#section2 h3 {margin-bottom:30px;}
	#section2 h3 br,
	#section3 h3 br {display:block;}
}