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

/******************************************
Author : 퍼스트몰(firstmall)
Author URL : http://firstmall.kr
Creation Date : 2021-04-21
Modify Date : 2021-04-21
File : /event/2021/repair
*******************************************/

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;}
body {min-width:360px;}
img {max-width:100%;}
#event_header {position:relative; border-bottom:1px solid transparent; background:#fff; z-index:5;}
#event_footer {border-color:#f0f0f0;}
#wrap {position:relative; overflow:hidden; background:#fff; opacity:0;}
.top_btn {background:#2989e1;}
.show_mot {position:relative; opacity:0; top:20px;}
.section > .inner {opacity:0;}
.section.active > .inner {opacity:1;}
.section {position:relative; height:auto; padding:100px 0; text-align:center;}
.section .inner,
.section hgroup {position:relative; width:1180px; margin:auto; text-align:center;}
.section h3 {margin-bottom:50px; font-size:46px; font-weight:500; color:#000; letter-spacing:-3px; line-height:1.2;}
.section h3 p {margin-top:20px; font-size:20px; font-weight:300; color:#333; letter-spacing:-1px; line-height:1.4;}
.section h3 a.view {display:inline-block; margin-left:10px; font-size:0.9em; text-decoration:underline;}
.section a.view, #section0 h3 strong, #section2 h3 strong, #section4 h3 {margin:0 auto; font-family:"Spoqa Han Sans", sans-serif;}
.section a.view:hover {color:#f0f8ff;}

/* #section0 */
#section0 {background:#ecf1f8 url('/images/event/20210504/sec0_bg.jpg') no-repeat center; padding:160px 0 220px;}
#section0 hgroup {text-align:left;}
#section0 .step {display:inline-block; margin-bottom:20px; box-shadow:1px 5px 10px rgba(0,0,0,0.2); border-radius:50px; padding:10px 20px; font-size:21px; color:#fff;
background: #6b82ef;
background: -moz-linear-gradient(left,  #6b82ef 1%, #556deb 100%);
background: -webkit-linear-gradient(left,  #6b82ef 1%,#556deb 100%);
background: linear-gradient(to right,  #6b82ef 1%,#556deb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b82ef', endColorstr='#556deb',GradientType=1 );}
#section0 h3 {margin:20px 0 30px; font-size:65px; font-weight:600; color:#2f384f; letter-spacing:-4px;}
#section0 h3 em {font-weight:inherit; color:#5c71dd;}
#section0 h3 strong {font-size:1.2em; letter-spacing:-2px; line-height:1.0;}
#section0 p {margin-bottom:50px; font-size:22px; color:#757f97; letter-spacing:-1px;}

/* #section1 */
#section1 {background:#2f384f; padding-bottom:70px;} 
#section1 .inner {width:960px;}
#section1 h3 {color:#fff;}
#section1 h3 > br {display:none;}
#section1 h3 p {color:#7382a8;}
#section1 dl {float:left; width:33.33%; padding:260px 0 30px;}
#section1 dl.img1 {background:url('/images/event/20210504/sec1_img1.png') no-repeat center top;}
#section1 dl.img2 {background:url('/images/event/20210504/sec1_img2.png') no-repeat center top;}
#section1 dl.img3 {background:url('/images/event/20210504/sec1_img3.png') no-repeat center top;}
#section1 dl.img4 {background:url('/images/event/20210504/sec1_img4.png') no-repeat center top;}
#section1 dl.img5 {background:url('/images/event/20210504/sec1_img5.png') no-repeat center top;}
#section1 dl.img6 {background:url('/images/event/20210504/sec1_img6.png') no-repeat center top;}
#section1 dt {height:30px; font-size:20px; color:#fff;}
#section1 dd {font-size:22px; color:#5e82dd;}
#section1 .info {display:inline-block; vertical-align:middle; width:21px; height:21px; margin:0 0 4px 2px; background:url('/images/event/20210504/sec1_info.png') no-repeat; transition:all ease 0.3s; cursor:pointer;}
#section1 .info:hover {background:url('/images/event/20210504/sec1_info_on.png') no-repeat;}

/* #section2 */
#section2 {background:#748bf0;}
#section2 .inner {width:960px;}
#section2 h3 {font-size:44px; font-weight:300; color:#fff;}
#section2 h3 strong {font-size:1.2em; letter-spacing:-1px; line-height:1.0;}
#section2 h3 p {color:#bfcbff;}
#section2 .warning {display:none; width:640px; margin:30px auto 0; border-radius:20px; background:rgba(255,255,255,0.05); padding:30px; text-align:left; line-height:1.6;}
#section2 .warning h4 {margin-bottom:5px; font-size:20px; color:#fff; letter-spacing:-1px;}
#section2 .warning li {padding-left:15px; text-indent:-15px; font-size:16px; font-weight:300; color:#fafafa; letter-spacing:-1px;}
#section2 .gtit {display:inline-block; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:50px; background:#4763db; padding:5px 30px; font-size:20px; color:#fff;}
#section2 .guide {margin:-20px auto 0; border-radius:20px; background:#7f97ff; padding:30px 90px; text-align:left;}
#section2 .guide dl {display:inline-block; margin:10px 50px 10px 50px;}
#section2 .guide dt {display:inline-block; vertical-align:top; border-radius:50px; background:#5c76e7; padding:4px 25px 5px; font-size:16px; color:#fff; letter-spacing:-1px;}
#section2 .guide dd {display:inline-block; padding:2px 0 0 15px; font-size:19px; color:#121d4d; letter-spacing:-1px; line-height:1.4; word-break:break-all;}

/* #section3 */
#section3 {background:#e5e7eb;}
#section3 h3 {margin-bottom:10px; color:#2f384f;}
#section3 dl {float:left; width:25%; padding-top:280px;}
#section3 dl.img1 {background:url('/images/event/20210504/sec3_img1.png') no-repeat center top;}
#section3 dl.img2 {background:url('/images/event/20210504/sec3_img2.png') no-repeat center top;}
#section3 dl.img3 {background:url('/images/event/20210504/sec3_img3.png') no-repeat center top;}
#section3 dl.img4 {background:url('/images/event/20210504/sec3_img4.png') no-repeat center top;}
#section3 dt {font-size:20px; color:#374058; letter-spacing:-2px;}

/* section4 */
#section4 {background:url('/images/event/20210504/sec4_bg.jpg') no-repeat center; background-size:cover; padding:70px 0;}
#section4 h3 p {margin-top:0; font-size:0.9em; font-weight:300; color:#fff; letter-spacing:-3px;}
#section4 h3 {margin:0 auto; font-size:46px; font-weight:500; color:#748bf0; letter-spacing:0;}
#section4 a.consultBtn {display:inline-block; margin:40px auto 10px; border-radius:5px; border:1px solid #fff; padding:13px 50px 15px; font-size:20px; font-weight:300; color:#fff; transition:all 0.5s ease;}
#section4 a.consultBtn:hover {border-color:transparent; background:#748bf0;}

/* 뷰레이어 */
.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:-75px 0 0 -250px; width:500px; box-shadow:0 0 10px rgba(0,0,0,0.05); border-radius:10px; border:1px solid #aaa; background:#fff; padding:25px 30px; text-align:left; z-index:3;}
.view_layer h5 {margin-bottom:15px; border-bottom:1px solid #c7c7cb; padding-bottom:10px; font-size:20px; font-weight:600; color:#1a2e51;}
.view_layer p {font-size:16px; color:#888; line-height:1.4;}
.view_layer .close {position:absolute; top:30px; right:30px; width:20px; height:20px; background:url('/images/event/20210104/layer_close.png') no-repeat; background-size:cover; cursor:pointer;}

/* 반응형 */
@media only screen and (max-width:1180px) {
	.section hgroup,
	.section .inner {width:100%; padding:0 20px;}
	#section0 {padding:120px 0 160px;}
}
@media only screen and (max-width:960px) {
	#section1 .inner,
	#section2 .inner {width:100%;}	
	#section1 dl,
	#section3 dl {width:50%;}	
}
@media only screen and (max-width:830px) {
	#section2 .guide {padding:30px 50px;}
	#section2 .guide dl {display:block; margin-left:0; margin-right:0;}	
}
@media only screen and (max-width:671px) {
	#section2 .guide dl:first-child {padding-top:10px;}
	#section2 .guide dd {display:block; padding:10px 0;}
}
@media only screen and (max-width:640px) {
	.section h3 {font-size:40px !important;}
	#section0 h3 {font-size:50px !important;}
	#section2 .warning {width:100%;}
}
@media only screen and (max-width:550px) {
	#section1 h3 > br {display:block;}
}
@media only screen and (max-width:500px) {
	#section1 dl,
	#section3 dl {width:100%;}
	.view_layer {width:auto; left:10px; right:10px; margin-left:0; padding:15px 20px;}
	.view_layer .close {top:20px; right:20px;}
}
@media only screen and (max-width:400px) {
	.section {padding:70px 0;}
	.section h3 {font-size:36px !important;}	
	.section h3 p {font-size:18px;}
	#section0 {padding:100px 0;}
	#section0 hgroup {background:rgba(255,255,255,0.5); padding-top:20px; padding-bottom:20px;}
	#section0 .step {padding:5px 20px; font-size:18px;}
	#section0 h3 {margin:0 0 20px; font-size:40px !important;}
	#section0 p {margin-bottom:0; font-size:18px;}
	#section4 a.consultBtn {display:block; width:90%;}
	#section2 .guide {padding:30px 40px;}
}