/* font */
@import url('https://webfontworld.github.io/sunn/SUIT.css');

/* reset */
html {font-size:16px}
html,body {margin: 0; padding: 0;}
h1, h2, h3, h4, h5, h6, p, a, span, em, strong, del, s, b, blockquote, br, i, u, dl, dt, dd, table, tr, thead, tbody, tfoot, th, td, img, object, form, fieldset, label, input, textarea, select, option, button, header, main, section, aside, footer, nav, article, div, ol, pre {padding: 0; margin: 0; font-family: 'SUIT',sans-serif; letter-spacing: -0.01rem; line-height: 1; font-weight: normal; font-size: 1.2rem; color:#333; box-sizing: border-box; word-break: keep-all; }

/* 태그속성 지우기 */
a, del, s, u {text-decoration: none;}
em, i {font-style:normal}
ol, ul, li {list-style:none;}
table, tr, td {border-collapse:unset;}
input {border:0; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type='number'] {-moz-appearance: textfield;}
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {display: none;}
input::-ms-clear { display: none; }
select {-webkit-appearance: none;-moz-appearance: none; appearance: none;}
select::-ms-expand { display: none; }
button {cursor:pointer; background: none; border:0;}
pre { white-space: pre-line;}

/* 클래스 속성 */
.hide {display: none;}

/* 반응형 */
@media screen and (max-width:768px) {
	html {font-size: 12px}
}

.navbar .row .collapse .navbar-nav {background:#3383fe !important;}
.navbar .row .collapse .navbar-nav .nav-item .nav-link {padding:13px 16px !important;}
.navbar .row .collapse .navbar-nav .nav-item:nth-last-child(2) .nav-link {padding:13px 40px !important; background:#3383fe !important; color:#fff !important;}
.navbar .row .collapse .navbar-nav .nav-item:nth-last-child(1) .nav-link {padding:13px 40px !important; }


#wrap {}
#wrap .fixedTop {height: 7rem; position: fixed; left: 0; top:0; width: 100%; border-bottom: 1px solid #ccc; z-index: 100; background: #fff;}
#wrap .fixedTop h1 a {text-align: center; font-size:2.2rem; font-weight: 800; line-height:7rem; display: block;}
#wrap .mainContainer { background: #fff; min-height: calc(100vh - 7rem);}
#wrap .mainContainer .container {background: #f7f7f7; padding: 2rem 2rem 4rem; position: relative; max-width:700px;}
#wrap .mainContainer > .container::after {content:''; display: block; position: absolute; bottom:1.5rem; left: 50%; margin-left: -0.6rem; border-top: 1.2rem solid #333; border-left: 1.2rem solid transparent; border-right: 1.2rem solid transparent;}
#wrap .mainContainer .container form {background: #fff; border-radius:1rem; padding: 3rem 2rem; border: 1px solid #ccc;}
#wrap .mainContainer .container form > div {margin-bottom: 1.5rem;}
#wrap .mainContainer .container form > div h3 {font-size:1.1rem; font-weight: 800; margin-bottom: 1rem;}
#wrap .mainContainer .container form > div h3 + * {display: flex; justify-content: space-between; background: #f7f7f7; border: 1px solid #ccc; border-radius: 0.5rem;}
#wrap .mainContainer .container form > div h3 + label {position: relative;}
#wrap .mainContainer .container form > div h3 + * > * {line-height: 5rem;}
#wrap .mainContainer .container form > div h3 + * input {background: unset; width: 100%; text-indent: 1rem; color:#666}
#wrap .mainContainer .container form > div h3 + * input::placeholder {color:#ccc; }
#wrap .mainContainer .container form > div h3 + label span {position: absolute; right:0; top:0; width: 5rem; height: 5rem; text-align: center; font-weight: 800; font-size: 1.2rem;}
#wrap .mainContainer .container form > div h3 + ul {padding: 0.5rem; height: 5rem; display: flex; justify-content: space-between; align-items: center;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap {height: unset; flex-flow: column;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap li {width: 100%; display: flex; flex-flow: column; text-align: left; box-sizing: border-box; padding: 1.5rem;}
#wrap .mainContainer .container form > div h3 + ul.btnWrap li em {}
#wrap .mainContainer .container form > div h3 + ul.btnWrap li span {font-size:1.1rem; margin-top: 1rem; padding-left: 1rem; color:#777; line-height: 1.2;}
#wrap .mainContainer .container form > div h3 + ul li {line-height: unset; width: 32%; text-align: center; color:#aaa;}
#wrap .mainContainer .container form > div h3 + ul li.selectLabel {background: #fff3de; border: 1px solid #fcdfb1; color:#f9a326; border-radius: 0.2rem;}
#wrap .mainContainer .container form .btnBlock {display: flex; justify-content: center; align-items: center; margin-bottom: 0;}
#wrap .mainContainer .container form .btnBlock button {width: 100%; /* padding: 1.5rem 0; */ border: 1px solid #ea8000; color:#fff; background:#f9a326; border-radius: 3rem; margin-top: 1rem;}
#wrap .mainContainer .errorBlock {}
#wrap .mainContainer .errorBlock .resultBox {display: flex; flex-flow: column;}
#regisErr {padding: 4rem 2rem;border-bottom: 5px solid #f7f7f7;}
#regisErr .totalTop {display: flex; flex-flow: row wrap;border: 1px solid #f7f7f7; border-radius:1rem 1rem 0 0; }
#regisErr .totalTop .totalList {width: 100%; display:flex; padding: 1rem 1rem;border-bottom: 1px solid #f7f7f7; margin-bottom: 0;}
#regisErr .totalTop .halfList {width: 50%;}
#regisErr .totalTop .totalList * {line-height: 1.5;font-weight: 700;}
#regisErr .totalTop .totalList h2 {width: 100px; font-size:1.5rem;}
#regisErr .totalTop .totalList em {color:#f9a326; font-size:1.3rem; margin:2px 3px 0;}
#regisErr .totalTop .totalList span {}
#regisErr .totalBtm {display: flex; flex-flow:column;border: 1px solid #f7f7f7; border-radius:0 0 1rem 1rem; border-top: 0;}
#regisErr .totalBtm > div {padding: 2rem; border-bottom: 1px solid #f7f7f7;}
#regisErr .totalBtm > div:last-child {border-bottom: 0;}
#regisErr .totalBtm > div * {font-weight: 700;}
#regisErr .totalBtm > div h2 {font-size:1.7rem; margin-bottom: 1rem;}
#regisErr .totalBtm > div em {color:#f9a326; font-size:1.7rem}
#regisErr .totalBtm > div span {margin-left: 1rem;}
#result_table {padding: 4rem 2rem;}
#result_table #result_thead {font-size:2rem; font-weight: 700; padding-bottom: 2rem; border-bottom: 1px solid #f0f1f3;}
#result_table #result_tbody {padding-left: 0; margin: 0;}
#result_table #result_tbody .result_list {display: flex; flex-flow: column; border-bottom: 1px solid #f0f1f3;}
#result_table #result_tbody .result_list:last-child {border-bottom: 0;}
#result_table #result_tbody .result_list > div {margin-bottom: 1.5rem;}
#result_table #result_tbody .result_list .result_title {font-weight: 700; margin-top: 1.5rem; font-size:1.3rem}
#result_table #result_tbody .result_list .principalPaid2 {display: flex; justify-content: space-between; align-items: center;}
#result_table #result_tbody .result_list .principalPaid2 * {font-weight: 700;}
#result_table #result_tbody .result_list .principalPaid2 span {font-size:1.2rem}
#result_table #result_tbody .result_list .principalPaid2:nth-child(2) span,
#result_table #result_tbody .result_list .principalPaid2:nth-child(3) span{color:#898989}
#result_table #result_tbody .result_list .principalPaid2:last-child em {color:#f9a326;}
#result_table #result_tbody .result_list .principalPaid2:last-child span {font-weight: 700;}


@media only screen and (min-width: 300px) and (max-width: 768px){
	.navbar .row .collapse .navbar-nav .nav-item:nth-last-child(2) .nav-link { padding:13px 16px !important;   color: #000e25 !important; background:#3383fe;}
}