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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2020-10-30
Modify Date : 2020-10-30
File : /event/2020/kcp
*******************************************/

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;}
.section.tab .registBtn a em,
.section.benefit .content dd a em,
#section5 .startBtn em,
#section5 .link em {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;}
.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:100px 0; text-align:center;}
.section .inner {position:relative; width:1180px; height:100%; margin:auto; text-align:center;}
.show_mot {position:relative; opacity:0; top:20px;}
.show_mot2 {position:relative; opacity:0;}

/* #section0 */
#section0 {background:#f0f7fb; padding:0;}
#section0 .img {position:absolute; top:0; right:-250px; z-index:1;}
#section0 .img2 {position:absolute; bottom:80px; right:350px;}
#section0 .img3 {position:absolute; bottom:380px; right:-120px;}
#section0 .txt {padding:110px 0; text-align:left;}
#section0 .txt h3 {margin:10px 0; font-size:65px; font-weight:300; color:#000; letter-spacing:-5px; line-height:1.2;}
#section0 .txt h3 strong {font-size:68px;}
#section0 .txt h3 > em {font-style:italic;}
#section0 .txt h3 strong br {display:none;}

/* .section.tab */
.section.tab {background:#242f75; padding:80px 0 100px;}
.section.tab .tab_space {display:block; position:relative; width:1180px; margin:auto; text-align:center; z-index:999;}
.section.tab h3 {margin-bottom:40px; font-size:44px; color:#fff; letter-spacing:-2px; line-height:1.2;}
.section.tab .tab_layer {position:relative;}
.section.tab .tab_layer ul {height:100%; margin:0 auto;}
.section.tab .tab_layer li {position:relative; display:inline-block;}
.section.tab .tab_layer li .tab {display:block; position:relative; height:100%; padding:8px; text-align:center;}
.section.tab .tab_layer li .tab em {border-radius:50px; border:1px solid #a5deff; padding:0 10px; font-size:18px; font-weight:300; color:#a5deff; line-height:0;}
.section.tab .tab_layer li .tab span {display:block; margin-top:20px; font-size:30px; font-weight:600; color:#fff; letter-spacing:-2px; line-height:1.3;}
.section.tab .tab_layer li .tab:hover span {color:#a5deff;}
.section.tab .tab_layer li.tabCellCurrent .tab em {border-color:#fff; color:#fff;}
.section.tab .tab_layer li.tabCellCurrent .tab span {color:#a5deff;}
.section.tab .registBtn {display:block; margin-top:60px;}
.section.tab .registBtn a {display:inline-block; width:425px; line-height:100px; border-radius:50px; background:#ffb400; font-size:43px; font-weight:500; color:#242f75; text-decoration:none; transition:all 0.5s ease;}
.section.tab .registBtn a:hover {background:#0250c7; color:#fff;}
.section.tab .registBtn a em {display:inline-block; vertical-align:middle; margin-bottom:8px; font-size:24px;}
.section.tab .tab_layer_flying {position:fixed; top:0; width:1180px; z-index:999; padding:0;}
.section.tab .tab_layer_flying li .tab em {font-size:14px;}
.section.tab .tab_layer_flying li .tab span {margin-top:10px; font-size:20px;}
.section.tab .img4 {position:absolute; bottom:-100px; left:-350px; z-index:1;}

/* #section1 ~ #section4 */
.section .step {display:inline-block; width:106px; height:106px; line-height:106px; border-radius:50%; background:#242f75; font-size:30px; font-weight:700; color:#fff;}
.section h3 {margin:30px auto 60px; font-size:60px; font-weight:300; color:#000; letter-spacing:-5px; line-height:1.2;}
.section h3 .num {font-size:70px;}
.section h3 .per {font-size:55px;}
#section1 h3 br, #section2 h3 br {display:none;}
.section .img {margin:70px auto;}
.section.benefit .content {width:710px; margin:auto; text-align:left;}
.section.benefit .content dl {margin:10px 0;}
.section.benefit .content dt {display:inline-block; vertical-align:top; border-radius:50px; background:#242f75; padding:0 30px 2px 30px; font-size:24px; font-weight:300; color:#fff; letter-spacing:-2px;}
.section.benefit .content dd {display:inline-block; padding-left:15px; font-size:28px; font-weight:500; color:#000; letter-spacing:-1px; line-height:1.3;}
.section.benefit .content dd > em {font-size:24px; color:#ff4040;}
.section.benefit .content dd a {border-bottom:1px solid #226ee1; font-size:24px; font-weight:300; color:#226ee1;}
#section1 {background:#f3f6f8 url('/images/event/20201102/kcp1_bg.jpg') no-repeat center bottom;}
#section1 .img {margin-bottom:-220px; z-index:1;}
#section2 {background:#fff;}
#section2 .step {margin-top:100px;}
#section3 {background:#1e2867;}
#section3 h3 {color:#fff;}
#section4 {background:#fff;}
#section1 .box {margin:0 30px; box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:10px; background:#fff; padding:20px 50px;}
#section1 .box table {width:100%; margin:30px 0;}
#section1 .box table thead th {border-bottom:2px solid #242f75; padding-bottom:10px; font-size:28px; font-weight:700; color:#242f75; line-height:1.0; letter-spacing:-1px;}
#section1 .box table thead th br {display:none;}
#section1 .box table tbody th {position:relative; font-size:20px; font-weight:300; color:#666;}
#section1 .box table tbody th p {font-size:24px; font-weight:500; color:#333;}
#section1 .box table tbody td {position:relative; padding:10px 0; font-size:24px; font-weight:300; color:#333; line-height:2.0;}
#section1 .box table tbody td em {font-size:inherit; font-weight:inherit;}
#section1 .box table tbody td.event {font-size:26px; font-weight:600; color:#ff8a00;}
#section1 .box table tbody td.event em {font-size:30px; font-weight:900;}
#section1 .box table tbody th:after,
#section1 .box table tbody td:after {display:block; content:''; position:absolute; bottom:0; left:15px; right:15px; height:1px; background:#242f75;}
#section1 .box table tbody th:after {left:0;}
#section1 .box table tbody td:last-child:after {right:0;}
#section1 .box > p {text-align:left; font-size:18px; font-weight:300; color:#666; letter-spacing:-0.5px;}
#section3 .cont dl {display:inline-block; box-sizing:border-box; width:482px; height:436px; margin:10px; box-shadow:0 0 5px rgba(0,0,0,0.3); border:1px solid #e4e5e9; border-top:8px solid #feb203; padding:100px 30px;}
#section3 .cont dl.spec1 {background:#fff url('/images/event/20201102/kcp3_bg1.jpg') no-repeat right bottom;}
#section3 .cont dl.spec2 {background:#fff url('/images/event/20201102/kcp3_bg2.jpg') no-repeat right bottom;}
#section3 .cont dl.spec3 {background:#fff url('/images/event/20201102/kcp3_bg3.jpg') no-repeat right bottom;}
#section3 .cont dl.spec4 {background:#fff url('/images/event/20201102/kcp3_bg4.jpg') no-repeat right bottom;}
#section3 .cont dt {font-size:38px; font-weight:700; color:#000032; letter-spacing:-2px;}
#section3 .cont dd {padding-top:40px; font-size:26px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.4;}

#section4 .cont {margin:0 -20px;}
#section4 .cont dl {position:relative; display:inline-block; vertical-align:top; width:170px; height:170px; border-radius:50%; margin:10px 15px; padding:40px 0;}
#section4 .cont dl:before {display:block; content:''; position:absolute; top:50%; left:-22px; margin-top:-12px; width:12px; height:23px; background:url('/images/event/20201102/kcp4_arr.png') no-repeat;}
#section4 .cont dl.spec1:before {background:none;}
#section4 .cont dl.spec1 {background:#1abae2;}
#section4 .cont dl.spec2 {background:#13a3df;}
#section4 .cont dl.spec3 {background:#0280cf;}
#section4 .cont dl.spec4 {background:#0069c3;}
#section4 .cont dl.spec5 {background:#1954b6;}
#section4 .cont dl.spec6 {background:#1b4997;}
#section4 .cont dl.spec1,
#section4 .cont dl.spec4,
#section4 .cont dl.spec5 {padding:55px 0;}
#section4 .cont dt {font-size:24px; font-weight:300; color:#fff; letter-spacing:-2px; line-height:1.2;}
#section4 .cont dd {padding-top:5px; font-size:18px; font-weight:300; color:#fff; letter-spacing:-1px; line-height:1.4;}
#section4 .box {margin:70px 0; background:#f0f7fb; padding:40px 70px 40px 80px; text-align:left;}
#section4 .box li {text-indent:-15px; font-size:20px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.6;}
#section4 .registBtn a {display:inline-block; width:250px; line-height:70px; border-radius:50px; background:#242f75; font-size:25px; color:#fff; letter-spacing:-2px; transition:all 0.5s ease;}
#section4 .registBtn a:hover {background:#13a3df;}

/* #section5 */
#section5 {background:url('/images/event/20201102/kcp5_bg.jpg') no-repeat center top; background-size:cover;}
#section5 h3 {margin:0; font-size:48px; font-weight:200; color:#fff; letter-spacing:-2px; line-height:1.2;}
#section5 h3 em {font-weight:inherit; color:#53acef;}
#section5 .startBtn {display:inline-block; margin:50px auto 60px; border:1px solid #fff; padding:15px 40px 15px 50px; font-size:20px; font-weight:100; color:#fff; transition:all 0.5s ease;}
#section5 .startBtn:hover {border-color:transparent; background:#226ee1;}
#section5 p {font-size:14px; font-weight:100; color:#fff;}
#section5 .link {border-bottom:1px solid #fff; color:inherit;}

@media only screen and (max-width:1180px) {
	.section .inner {width:100%; padding:0 20px;}
	.section.tab .tab_space,
	.section.tab .tab_layer_flying {width:100%; padding:0 20px;}
}
@media only screen and (max-width:1100px) {
	#section0 .img {z-index:0;}
	#section0 .txt h3,
	#section0 .txt h3 + p {padding-left:0;}	
}
@media only screen and (max-width:900px) {
	#section0 .img {top:100px;}	
	#section0 .img3 {right:0}
	#section0 .img img,
	.section.tab .img4 img {max-width:80%;}
	#section1 .box {margin:0;}
	.section.benefit .content {width:100%;}
	.section.benefit .content dd {display:block; padding:10px 0;}
}
@media only screen and (max-width:768px) {
	#section0 .img {right:-300px;}
	#section0 h3 {padding-top:10px; font-size:50px !important;}
	#section0 .txt h3 strong {font-size:52px;}	
	#section1 .box table thead th {font-size:24px;}
	#section3 .cont dt {font-size:34px;}	
	#section5 h3 {font-size:34px !important;}
	.section {padding:80px 0;}
	.section h3 {font-size:38px !important; letter-spacing:-2px !important;}
	.section h3 .num {font-size:40px;}
	.section h3 .per {font-size:34px;}
	.section.tab h3 {font-size:28px !important;}
	.section.tab .registBtn a {line-height:80px; font-size:28px !important;}
	.section.tab .registBtn a em {font-size:20px; margin-bottom:5px;}
	.section.benefit .content dd a em {font-size:20px;}
	.section.benefit .img {margin:40px auto;}
	.section.benefit .content dt,
	.section.benefit .content dd a {font-size:20px;} 
	.section.benefit .content dd {font-size:22px;}
	.section.benefit .content dd > em {font-size:18px;}
}
@media only screen and (max-width:500px) {
	#section0 .img {right:-400px;}
	#section0 .img3 {right:100px; bottom:300px;}
	#section0 .img img,
	.section.tab .img4 img {max-width:60%;}
	#section0 .txt {padding:60px 0;}
	#section0 .txt img {max-width:60%;}
	#section0 .txt h3 {font-size:40px !important;}
	#section0 .txt h3 strong {font-size:42px;}
	#section0 .txt h3 strong br {display:block;}
	#section1 .box {padding:20px 30px;}
	#section1 .box table thead th {font-size:20px;}
	#section2 .step {margin-top:150px;}
	#section3 .cont dl {width:100%; height:auto; margin-left:0; margin-right:0; padding:60px 30px;}
	#section3 .cont dl.spec1,
	#section3 .cont dl.spec2,
	#section3 .cont dl.spec3,
	#section3 .cont dl.spec4 {background-size:80%;}
	#section3 .cont dt {font-size:28px;}
	#section3 .cont dd {padding-top:20px; font-size:24px;}
	#section3 .cont dd br {display:none;}
	#section4 .box {padding-left:60px; padding-right:40px;}
	#section5 h3 {font-size:28px !important;}
	#section5 .startBtn {margin:30px auto 40px;}
	.section {padding:60px 0;}
	.section .step img {width:80px;}	
	.section h3 {font-size:34px !important;}
	.section.benefit h3 + p {font-size:24px;}
	.section.benefit h3 + p br {display:none;}
	.section.tab {padding:60px 0;}
	.section.tab h3 {margin-top:0; font-size:24px !important;}
	.section.tab .registBtn {margin-top:30px;}
	.section.tab .registBtn a {line-height:60px; font-size:26px !important;}
	.section.benefit .content dd .br {display:block;}
}
@media only screen and (max-width:449px) {
	.section.tab .registBtn a {width:100%;}
	.section.benefit .content dd > em {display:block; margin-bottom:5px;}
	.section.benefit .content dd > em + br {display:none;}
}
@media only screen and (max-width:400px) {
	#section0 .img {right:-450px; top:130px;}
	#section0 .img3 {right:150px; bottom:250px;}
	#section0 .img img,
	.section.tab .img4 img {max-width:40%;}	
	#section1 h3 br, #section2 h3 br {display:block;}
	#section1 .box table thead th {font-size:16px;}
	#section1 .box table tbody th {font-size:14px; white-space:nowrap}
	#section1 .box table tbody th p {font-size:20px;}
	#section1 .box table tbody td {font-size:20px;}
	#section1 .box table tbody td.event {font-size:20px;}
	#section1 .box table tbody td.event em {font-size:24px;}
	#section1 .box table tbody th:after,
	#section1 .box table tbody td:after {left:5px; right:5px;}
	#section4 .cont dl {margin:15px 10px;}
	#section4 .cont dl:first-child {margin-top:0;}
	#section4 .cont dl:before {top:-25px; left:50%; margin-top:0; margin-left:-6px; transform: rotate(90deg);}
	#section4 .box {margin:50px 0;}
	#section4 .box li {font-size:18px;}	
	#section4 .registBtn a {width:100%;}
	#section5 .startBtn {width:100%;}
}
@media only screen and (max-width:375px) {
	#section0 .txt h3 {font-size:38px !important;}
	#section1 .box table thead th br {display:block;}
}