@charset "utf-8";

:root {
  --color1: #0052b8;
  --color2: #1ba3dc;
  --color3: #bb0000;
}

/* 초기화 */
* img { max-width:100%; }
html {overflow-y:scroll; }
body {margin:0 auto; padding:0;font-size:1em;font-family:'Pretendard-Regular', sans-serif;background:#fff;font-weight:400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard-Regular', sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul,dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Pretendard-Regular', sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Pretendard-Regular', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#333;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input:focus {
    outline: none;
}

.sound_only { display:none; }
.placeholdersjs {color:#aaa !important}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 버튼 */
a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:var(--color1);color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#2375eb}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

.pg_current {display:inline-block;background:var(--color1);border:1px solid var(--color1);color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

.contain { width:92%; margin:0 auto; max-width:700px; }

i, em { font-style:normal; }
.section { padding:60px 0; }

.title { text-align:center; color:var(--color1); font-size:32px; margin-bottom:50px; font-family: 'establishRetrosansOTF'; }
.title em { display:inline-block; color:var(--color2); letter-spacing:-2px; font-weight:normal; font-style:normal; }

.header { position: relative; text-align:center; background: linear-gradient(135deg, rgba(0,56,143,1) 0%, rgba(0,37,117,1) 100%); color: white; }
.header .headerSub { position: relative; width:100%; max-width:1560px; margin:0 auto; }
.header .leftImg { position:absolute; left:1rem; animation: bounce1 4s infinite; z-index:100; }
.header .rightImg { position:absolute; right:1rem; animation: bounce2 4s infinite; z-index:100; }
.inner-header { height: 65vh; width: 100%; margin: 0; padding: 0; }
.inner-header .logo { font-size:20px; font-family: 'establishRetrosansOTF'; color:#fff; display:block; margin:50px auto 0 auto; }
.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
.inner-header .mainTxt { z-index:101;display:block; text-align:center; font-size:48px; font-family: 'establishRetrosansOTF'; margin:115px auto 0 auto; letter-spacing:-2px; }
.inner-header .mainTxt em { display:block; font-size:48px; font-family: 'establishRetrosansOTF'; margin-top:1rem; letter-spacing:-1px; }
.inner-header .mainTxtSub { line-height:160%; margin-top:1.5rem; font-size:1.15rem !important; letter-spacing:0 !important; text-align:left; padding-left:1.5rem; font-family: 'Pretendard-Regular' !important; }
.inner-header .mainTxtSub em { display:inline-block !important; font-size:1rem !important; margin-right:1rem; font-family: 'Pretendard-Regular' !important; color:var(--color1) !important; background:#fff; border-radius:1.5rem; padding:.5rem 1rem; }
.inner-header .mainTxtSub .con2 { padding-top:1rem; }
.inner-header button { position:relative; display:block; margin:85px auto 0 auto; font-family: 'Pretendard-Light'; background:transparent; color:#fff; border:1px solid #fff; padding:1rem 4rem 1rem 3rem; font-size:1.25rem; border-radius:3px; }
.inner-header button i { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; opacity: 0; transition: 0.3s; animation: move 1s alternate infinite; }

.waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; }
.parallax > use { animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.parallax > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; }
.parallax > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; }
.parallax > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; }
.parallax > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; }

#boxForm .boxFormSub { width:100%; margin:0 auto; }
#boxForm .inp { width:48%; margin-top:1.5rem; }
#boxForm .inp:nth-child(-n+2) { margin-top:0; }
#boxForm .inp span { display:block; font-size:18px; line-height:36px; }
#boxForm .inp input[type='text'],
#boxForm .inp select { border:1px solid #ddd; font-size:18px; line-height:3.4rem; height:3.4rem; padding:0 1rem; border-radius:3px; width:100%; }
#boxForm .inp .boxHp input[type='text'] { width:30%; }
#boxForm .inp .boxHp em { width:10px; height:2px; background:#aaa; display:block; position:relative; top:22px; }
#boxForm .inp label { margin-right:1.5rem; margin-top:1rem; }
#boxForm .btnSubmit { position:relative; display:block; margin:65px auto 0 auto; background:var(--color1); color:#fff; line-height:72px; height:72px; border-radius:36px; padding:0 80px 0 50px; border:0; font-size:24px; }
#boxForm .btnSubmit i { position: absolute; top: 50%; transform: translateY(-50%); right: 20px; opacity: 0; transition: 0.3s; animation: move 1s alternate infinite; margin-right:1rem; }


#boxContent { position: relative; text-align: center; padding:0 0 60px 0; }
#boxGraph .title { margin-bottom:1.5rem; }
#boxGraph .title em { margin-left:.5rem; }
#boxGraph .boxGraphSub { background:#f5f5f5; padding:50px 50px 40px 50px; border-radius:1rem; }
#boxGraph .boxGraphSub .graph .grp { width:25%; text-align:center; }
#boxGraph .boxGraphSub .graph .grp > span,
#boxGraph .boxGraphSub .graph .grp > em { display:block; line-height:2.4rem; font-size:1rem; color:#777; }
#boxGraph .boxGraphSub .graph .grp > span { background:#999; color:#fff; line-height:1.8rem; margin-bottom:.5rem; padding:0 .75rem; border-radius:1rem; }
#boxGraph .boxGraphSub .graph .grp .stick { border-bottom:1px solid #ddd; width:100%; }
#boxGraph .boxGraphSub .graph .grp .stick .stickSub { width:70%; margin:0 auto; background:#ccc; max-width:90px; border-top-left-radius:1rem; border-top-right-radius:1rem; }
#boxGraph .boxGraphSub .graph .grp.chk .stick .stickSub { background-image: linear-gradient(to bottom, var(--color1), var(--color2)); }
#boxGraph .boxGraphSub .graph .grp.chk > em { color:#205392; font-size:1.15rem; }
#boxGraph .boxGraphSub .graph .grp.chk > span { background:#205392; color:#fff; }

#boxNotice { margin-top:1rem; }
#boxNotice .title { margin-bottom:25px; }
#boxNotice .title em { margin-left:.5rem; }
#boxNotice .content { border:1px solid #ddd; border-radius:1rem; padding:2rem 2.5rem; text-align:left; }
#boxNotice .content dl { border-bottom:1px solid #ddd; padding:2rem 1.5rem; }
#boxNotice .content dl:last-child { border-bottom:0; }
#boxNotice .content dl dt { font-size:28px; font-family: 'establishRetrosansOTF'; color:var(--color1);}
#boxNotice .content dl dd { font-size:21px; color:#464646; line-height:1.5; }
#boxNotice .content dl dd span { color:var(--color1); }
#boxNotice .content dl dd em { color:var(--color3); }

#boxSecurity { color:#3079bc; text-align:center; }
#boxSecurity .security { margin:0 auto 1rem auto; display:inline-block; }

#boxFooter { background:#fff; line-height:1.5; color:#999; font-size:1rem; }
#boxFooter .logo { font-family: 'establishRetrosansOTF'; font-size:1.5rem; margin-bottom:1rem; }

@keyframes move-forever { 
	0% { transform: translate3d(-90px,0,0); } 
	100% { transform: translate3d(85px,0,0); }
}
@keyframes bounce1 {
	0% { transform: translateY(0); }
	50% { transform: translateY(20px); }
	100% { transform: translateY(0); }
}
@keyframes bounce2 {
	0% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0); }
}
@media (max-width: 1400px) {
		.header .leftImg,
		.header .rightImg { zoom:90%; }
		.inner-header .logo { font-size:20px; margin:50px auto 0 auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:44px; margin:100px auto 0 auto; letter-spacing:-2px; }
		.inner-header .mainTxt em { display:block; font-size:44px; margin-top:1rem; letter-spacing:-1px; }
		.inner-header button { margin:60px auto 0 auto; padding:1rem 4rem 1rem 3rem; font-size:1.25rem; border-radius:3px; }
		.waves { min-height: 90px; max-height: 135px; }
}
@media (max-width: 1280px) {
		.header .leftImg,
		.header .rightImg { zoom:75%; }
		.inner-header { height: 60vh; }
		.inner-header .logo { font-size:20px; margin:50px auto 0 auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:44px; margin:80px auto 0 auto; letter-spacing:-2px; }
		.inner-header .mainTxt em { display:block; font-size:44px; margin-top:1rem; letter-spacing:-1px; }
		.inner-header button { margin:45px auto 0 auto; padding:1rem 4rem 1rem 3rem; font-size:1.25rem; border-radius:3px; }
		.waves { min-height: 80px; max-height: 110px; }
}
@media (max-width: 1040px) {
		.header .leftImg,
		.header .rightImg { zoom:65%; }
		.inner-header { height: 55vh; }
		.inner-header .logo { font-size:20px; margin:50px auto 0 auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:42px; margin:70px auto 0 auto; letter-spacing:-2px; }
		.inner-header .mainTxt em { display:block; font-size:42px; margin-top:1rem; letter-spacing:-1px; }
		.inner-header button { margin:40px auto 0 auto; padding:1rem 4rem 1rem 3rem; font-size:1.25rem; border-radius:3px; }
		.waves { min-height: 60px; max-height: 90px; }
}
@media (max-width: 960px) {
		.header .leftImg,
		.header .rightImg { zoom:50%; }
		.inner-header { height: 50vh; }
		.inner-header .logo { font-size:18px; margin:50px auto 0 auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:40px; margin:60px auto 0 auto; letter-spacing:-2px; }
		.inner-header .mainTxt em { display:block; font-size:40px; margin-top:1rem; letter-spacing:-1px; }
		.inner-header button { margin:30px auto 0 auto; padding:1rem 4rem 1rem 3rem; font-size:1.25rem; border-radius:3px; }
		.waves { min-height: 50px; max-height: 80px; }
}
@media (max-width: 768px) {
		.section { padding:2.5rem 0; }

		.header .leftImg { zoom:40%; top:-5rem; left:-3rem; }
		.header .rightImg { zoom:40%; top:auto; bottom:0; right:-3rem; }
		.inner-header { height: 42vh; }
		.header .headerSub { overflow:hidden; }
		.inner-header .logo { font-size:18px; margin:50px auto 0 auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:24px; margin:.5rem auto 0 auto; letter-spacing:-1px; }
		.inner-header .mainTxt em { display:block; font-size:24px; margin-top:.75rem; letter-spacing:-1px; }
		.inner-header .mainTxtSub { margin-top:1rem; font-size:1rem !important; letter-spacing:0 !important; text-align:left; padding-left:0; }
		.inner-header .mainTxtSub em { display:inline-block !important; font-size:.9rem !important; margin-right:.75rem; font-family: 'Pretendard-Regular' !important; color:var(--color1) !important; background:#fff; border-radius:1.5rem; padding:.35rem .75rem;}
		.inner-header .mainTxtSub span { height:.5rem; }
		.inner-header button { margin:25px auto 0 auto; padding:.75rem 3rem .75rem 2rem; font-size:1.15rem; border-radius:3px; }
		.waves { min-height: 35px; max-height: 60px; }

		#boxContent { padding:0 0 2.5rem 0; }
		#boxGraph .title { font-size:1.5rem; margin-bottom:0; }
		#boxGraph .title em { letter-spacing:-1px; display:block; margin-left:0; }
		#boxGraph .boxGraphSub { background:#f5f5f5; padding:2.5rem 1.5rem 2rem 1.5rem; border-radius:1rem; }
		#boxGraph .boxGraphSub .graph .grp { width:23%; text-align:center; }
		#boxGraph .boxGraphSub .graph .grp.chk { width:31%; }
		#boxGraph .boxGraphSub .graph .grp > span,
		#boxGraph .boxGraphSub .graph .grp > em { display:block; line-height:2rem; font-size:.9rem; }
		#boxGraph .boxGraphSub .graph .grp > span { line-height:1.8rem; margin-bottom:.5rem; padding:0 .75rem; border-radius:1rem; }
		#boxGraph .boxGraphSub .graph .grp > em { line-height:1.4rem; margin-top:.5rem; }
		#boxGraph .boxGraphSub .graph .grp .stick { border-bottom:1px solid #ddd; width:100%; }
		#boxGraph .boxGraphSub .graph .grp .stick .stickSub { border-top-left-radius:.25rem; border-top-right-radius:.25rem; }
		#boxGraph .boxGraphSub .graph .grp.chk .stick .stickSub { background-image: linear-gradient(to bottom, var(--color1), var(--color2)); }
		#boxGraph .boxGraphSub .graph .grp.chk > em { font-size:.9rem; }
		#boxGraph .boxGraphSub .graph .grp.chk > span { font-size:.9rem; }

		#boxNotice .title { font-size:1.5rem; margin-bottom:1.5rem; }
		#boxNotice .title em { letter-spacing:-1px; display:block; margin-left:0; }
		#boxNotice .content { padding:1rem 1.5rem; }
		#boxNotice .content dl { padding:1rem .5rem; }
		#boxNotice .content dl dt { font-size:1.5rem; }
		#boxNotice .content dl dd { font-size:1rem; }
}
@media (max-width: 550px) {
		.header .leftImg { zoom:35%; top:0; left:-3rem; }
		.header .rightImg { zoom:35%; top:auto; bottom:7rem; right:-3rem; }
		.inner-header { height: 42vh; }
		.inner-header .logo { font-size:18px; margin:50px auto 0 auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:1.15rem; margin:.5rem auto 0 auto; letter-spacing:0; }
		.inner-header .mainTxt em { display:block; font-size:1.15rem; margin-top:.75rem; letter-spacing:-1px; }
		.inner-header button { margin:25px auto 0 auto; padding:.75rem 3rem .75rem 2rem; font-size:1.15rem; border-radius:3px; }
		.waves { min-height: 35px; max-height: 60px; }

		#boxNotice .title { font-size:1.5rem; margin-bottom:1rem; }
		#boxNotice .content { padding:1rem 1.5rem; }
		#boxNotice .content dl { padding:1rem .5rem; }
		#boxNotice .content dl dt { font-size:1.25rem; margin-bottom:.35rem; }
		#boxNotice .content dl dd { font-size:1rem; color:#464646; line-height:1.6; }

		#boxFooter { background:#fff; line-height:1.5; color:#999; font-size:.9rem; padding:0 .5rem; }
		#boxFooter .logo { font-family: 'establishRetrosansOTF'; font-size:1.5rem; margin-bottom:1rem; }

		#boxForm .boxFormSub { width:100%; padding:0 .5rem 2rem .5rem; }
		#boxForm .inp { width:100%; margin-top:.5rem; }
		#boxForm .inp:nth-child(-n+2) { margin-top:.5rem; }
		#boxForm .inp span { display:block; font-size:1rem; line-height:2.4rem; }
		#boxForm .inp input[type='text'],
		#boxForm .inp select { border:1px solid #ddd; font-size:1rem; line-height:3rem; height:3rem; padding:0 1rem; border-radius:3px; width:100%; }
		#boxForm .inp .boxHp input[type='text'] { width:31.5%; }
		#boxForm .inp .boxHp em { display:none; }
		#boxForm .inp label { margin-top:0; margin-bottom:.25rem; }
		#boxForm .btnSubmit { margin:0 auto; line-height:3.4rem; height:3.4rem; width:80%; padding:0 3rem 0 2rem; font-size:1.25rem; }
}
@media (max-width: 480px) {
		.header .leftImg { zoom:25%; top:0; left:-4rem; }
		.header .rightImg { zoom:25%; top:auto; bottom:7rem; right:-4rem; }
		.inner-header { height: 50vh; }
		.inner-header .logo { font-size:1.25rem; margin:2rem auto 1.5rem auto; }
		.inner-header .logo img { height:1rem; margin-right:.5rem; position:relative; top:-2px; }
		.inner-header .mainTxt { font-size:1.35rem; margin:0 auto 0 auto; letter-spacing:-1px; }
		.inner-header .mainTxt em { display:block; font-size:1.25rem; margin-top:.5rem; letter-spacing:0; }
		.inner-header button { margin:1.5rem auto 0 auto; padding:.65rem 2.5rem .65rem 1.5rem; font-size:1rem; border-radius:3px; }
		.waves { min-height: 30px; max-height: 40px; }
}