@charset "utf-8";

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), 
		url('./fonts/Pretendard-Black.woff2') format('woff2'), 
		url('./fonts/Pretendard-Black.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), 
		url('./fonts/Pretendard-ExtraBold.woff2') format('woff2'), 
		url('./fonts/Pretendard-ExtraBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), 
		url('./fonts/Pretendard-Bold.woff2') format('woff2'), 
		url('./fonts/Pretendard-Bold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), 
		url('./fonts/Pretendard-SemiBold.woff2') format('woff2'), 
		url('./fonts/Pretendard-SemiBold.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), 
		url('./fonts/Pretendard-Medium.woff2') format('woff2'), 
		url('./fonts/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), 
		url('./fonts/Pretendard-Regular.woff2') format('woff2'), 
		url('./fonts/Pretendard-Regular.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), 
		url('./fonts/Pretendard-Light.woff2') format('woff2'), 
		url('./fonts/Pretendard-Light.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), 
		url('./fonts/Pretendard-ExtraLight.woff2') format('woff2'), 
		url('./fonts/Pretendard-ExtraLight.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), 
		url('./fonts/Pretendard-Thin.woff2') format('woff2'), 
		url('./fonts/Pretendard-Thin.woff') format('woff');
}

@font-face {
	font-family: 'Cafe24Ohsquare';
	font-weight: normal;
	src: 
		url('./fonts/Cafe24Ohsquare.woff2') format('woff2'), 
		url('./fonts/Cafe24Ohsquare.woff') format('woff'),
		local('Cafe24 Ohsquare');
}

* { padding:0; margin:0; font-family:'Cafe24Ohsquare'; font-weight:400; }
input, textarea { font-family:'Pretendard'; }
html { overflow:auto !important; }

.hide { display:none !important; }

section { padding:80px 0; }
.intro { background:#F1F1F1; }
.intro .title_box { text-align:center; }
.intro .title_box .img { line-height:0; }
.intro .title_box .img img {}
.intro .title_box p { margin-top:5px; text-align:center; color:#aaaaaa; font-size:14px; }
.intro ul { list-style:none; counter-reset:list-number; gap:30px; max-width:770px; margin:47px auto 0; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; }
.intro ul li { border:5px solid #000000; background:#44FF50; padding:20px 30px; max-width:370px; width:calc(50% - 15px); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.intro ul li .icon { display:inline-block; vertical-align:top; height:21px; }
.intro ul li strong { display:inline-block; vertical-align:top; margin-left:5px; line-height:21px; font-size:18px; color:#000; }
.intro ul li b { display:block; margin-top:8px; color:#000; line-height:21px; font-size:20px; }

.process > h3 { font-size:60px; line-height:1; text-align:center;  }
.process ul { list-style:none; counter-reset:list-number; max-width:562px; width:100%; margin:0 auto; }
.process ul li { margin-top:54px; counter-increment:list-number; position:relative; padding-left:62px;}
.process ul li:before { content:counter(list-number); color:#000BD3; font-size:80px; line-height:1; position:absolute; left:0; top:0; display:block;  }
.process ul li > strong { display:block; padding-top:21px; color:#C90000; font-size:24px; line-height:1; margin-bottom:6px; font-weight:400; }
.process ul li > p { font-family:'Pretendard'; font-weight:500; font-size:18px; line-height:24px; letter-spacing:-0.02em; }
.process ul li .btn_box { margin-top:20px; }
.process ul li .btn_box > a { display:inline-block; position:relative; border:3px solid #000; color:#000; text-decoration:none; background:#FFEE31; font-size:20px; padding:10px 39px 10px 19px; line-height:24px; border-radius:999px; }
.process ul li .btn_box > a img { position:relative; position:absolute; right:2px; top:14px; }

#formFile { width:100%; max-width:500px; height:436px; margin:20px auto 0; }

#formFile .upload_inner { clear:both; display:block; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile .upload_inner h2 { display:block; font-size:20px; text-align:center; line-height:20px; }
#formFile .upload_inner h5 { display:block; font-size:14px; text-align:center; line-height:14px; margin-top:10px; }

#formFile section { display:block; background:#f6f6f6; padding:20px 20px 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile section dl { clear:both; display:block; font-size:13px; width:100%; margin:0 auto; padding:0 0 4px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile section dl:after { clear:both; display:block; content:''; }
#formFile section dl dt { float:left; width:100px; text-align:left; font-size:14px; line-height:34px; font-weight:400; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile section dl dt .required { display:inline-block; line-height:34px; color:#ff5f4d; font-weight:400; margin-left:5px; }
#formFile section dl dd { float:left; width:calc(100% - 100px); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile section dl dd input[type='text'] { width:100%; border:1px solid #ddd; border-radius:3px; height:34px; padding:0 10px; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile section dl.grid0 {}
#formFile section dl.grid0 dd { float:none; width:100%; }
#formFile section dl.grid0 dd textarea { display:block; width:100%; height:190px; padding:10px; font-size:14px; border-radius:3px; border:1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline:none; }

#formFile dl.file div { clear:both; display:block; position:relative; }
#formFile dl.file div:after { clear:both; display:block; content:''; }
#formFile dl.file div span.upload_name { float:left; height:34px; line-height:34px; padding:0 15px; width:calc(100% - 103px); border:1px solid #ddd; background:#fff; border-radius:3px; position:relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#formFile dl.file div span.upload_name b { position:absolute; top:5px; left:5px; z-index:20; font-weight:400; font-size:12px; line-height:22px; display:inline-block; vertical-align:top; background:#f6f6f6; padding:0 10px; border-radius:999px; }
#formFile dl.file div span.upload_name b i { display:block; width:18px; height:18px; position:absolute; top:50%; margin-top:-9px; right:-22px; background:url('./icon_close.png') no-repeat center center; background-size:7px 8px; cursor:pointer; }
#formFile dl.file div button { float:right; width:99px; height:34px; border:1px solid #222; border-radius:3px; color:#fff; background:#222; text-align:center; font-size:14px; font-weight:400; position:relative; }
#formFile dl.file div input[type='file'] { position:absolute; top:0; right:0; width:100%; height:34px; z-index:10; cursor:pointer; opacity:0; filter:alpha(opacity=0); }

#formFile button#all_upload_btn { display:block; margin:10px auto 0; width:100%; height:44px; color:#222; background:#44FF50; border-radius:3px; text-align:center; padding:0; border:0; font-size:18px; cursor:pointer; font-weight:400; }

.upload_process { display:none; position:absolute; top:0; left:0; width:100%; height:100%; font-size:12px; color:#fff; padding:0 0 0 40px; line-height:34px; background:rgba(0,0,0,0.8); z-index:1000; border-radius:34px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.upload_process span.icon { position:absolute; top:10px; left:15px; display:inline-block; width:10px; height:10px; border:3px solid rgba(255,255,255,.3); border-radius:50%; border-top-color:#fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; z-index:10000; }

#formFile .upload_end { clear:both; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; height:100%; background:#f6f6f6; }
#formFile .upload_end h2 { font-size:20px; line-height:20px; background:#44FF50; color:#111; padding:5px 8px; border-radius:5px; font-weight:500; }
#formFile .upload_end h5 { font-size:16px; line-height:22px; margin-top:20px; font-weight:500; font-family:'Pretendard'; }
#formFile .upload_end img { width:50px; opacity:0.7; filter:alpha(opacity=70); position:relative; bottom:-55px; }

#formFile .upload_fail { clear:both; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; height:100%; background:#f6f6f6; }
#formFile .upload_fail h2 { font-size:20px; line-height:20px; background:#ff5f4d; color:#fff; padding:5px 8px; border-radius:5px; font-weight:500; }
#formFile .upload_fail h5 { font-size:16px; line-height:22px; margin-top:20px; font-weight:500; font-family:'Pretendard'; }

#ifrmProc { display:none; }

.review { background:#F1F1F1; position:relative; max-width:953px; margin:0 auto; overflow:hidden; }
.review .img_box { margin:-80px 0 -60px; padding:0px; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-justify-content:center; justify-content:center;}
.review .img_box img { max-width:570px; height:auto; }
.review .img_box img + img { margin-left:-80px; opacity:0.5; filter:alpha(opacity=50); display:block; -webkit-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -ms-transform:rotate(-15deg); transform:rotate(-15deg);} 
.review .txt_box { position:absolute; left:50%; top:50%; margin:-205px 0 0 -250px; width:500px; height:410px; background:rgba(0,0,0,0.5); display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; -webkit-flex-direction:column; flex-direction:column; }
.review .txt_box span { display:block; text-align:center; color:#ffffff; font-size:24px; line-height:1; }
.review .txt_box b { display:block; text-align:center; color:#ffffff; font-size:40px; line-height:48px; margin-top:20px; font-weight:400; }
.review .txt_box b + b { margin-top:10px; }
.review .txt_box b strong { color:#00E94E; font-size:48px; }
.review .txt_box .img { display:inline-block; vertical-align:top; margin-top:5px; }


@keyframes spin { to { -webkit-transform: rotate(360deg); } }
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } }

@media screen and (max-width:768px) {
	section { padding:50px 15px; }

	.intro .title_box .img img { max-height:60px; }
	.intro ul { margin-top:20px; gap:20px;-webkit-flex-direction:column; flex-direction:column;  -webkit-align-items:center; align-items:center;}
	.intro ul li { width:100%; padding:10px 20px; }
	.intro ul li strong { font-size:17px; }
	.intro ul li b { font-size:16px; }

	.process > h3 { font-size:26px; }
	.process ul li { padding-left:40px; }
	.process ul li:first-child { margin-top:40px; }
	.process ul li:before {font-size:45px; }
	.process ul li > strong { padding-top:0px; font-size:18px; line-height:1.5; margin-bottom:5px; }
	.process ul li > p { font-size:14px; line-height:1.4; }
	.process ul li .btn_box > a { font-size:16px; padding:8px 35px 7px 15px; }
	.process ul li .btn_box > a img { right:0; }

	#formFile .upload_inner { margin:0 0 0 -40px; }
	#formFile section { padding:10px 10px 6px; }
	#formFile section dl dt { width:75px; font-size:11px; }
	#formFile section dl dd { width:calc(100% - 75px); }
	#formFile dl.file div button { width:60px; font-size:11px; }
	#formFile dl.file div span.upload_name { width:calc(100% - 63px); }

	.review .img_box { margin:-40px 0 0;}
	.review .img_box img { max-width:300px; height:auto; }
	.review .txt_box { width:80%; left:10%; margin:0; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); transform:translateY(-50%);}
	.review .txt_box span { font-size:18px; line-height:40px; }
	.review .txt_box b { font-size:22px; line-height:40px; margin-top:0; font-weight:400; display:flex; gap:10px; }
	.review .txt_box b + b { margin-top:0; }
	.review .txt_box b strong { color:#00E94E; font-size:26px; }
	.review .txt_box span.img { display:flex; justify-content: center; align-items: center; margin:0; }
	.review .txt_box img { height:20px; margin:0; }
}