@charset "utf-8";


/* 기본 //////////////////////////////////////////////////////// */
/* 정렬 */
.align-left {text-align:left !important;}
.align-right {text-align:right !important;}
.align-center {text-align:center !important;}











/* 폼구성 //////////////////////////////////////////////////////// */
/* 입력박스 */
.input-box[type='text'] {height:50px; padding:0 15px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:#ddd 1px solid; border-radius:6px;} 
.input-box[type='text']:focus {color:#111; border:#999 1px solid; transition:all 0.4s ease-in-out;}
.input-box[type='text'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-box[type='text'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-box[type='text'].error {color:#D67A66; border:#D67A66 1px solid;} 
.input-box[type='text'].error::placeholder {color:#D67A66;} 
.input-box[type='text'].success {color:#1fc944; border:#1fc944 1px solid;}
.input-box[type='text'].success::placeholder {color:#1fc944;}

.input-box[type='email'] {height:50px; padding:0 15px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:#ddd 1px solid; border-radius:6px;} 
.input-box[type='email']:focus {color:#111; border:#999 1px solid; transition:all 0.4s ease-in-out; outline:none;}
.input-box[type='email'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-box[type='email'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-box[type='email'].error {color:#D67A66; border:#D67A66 1px solid;} 
.input-box[type='email'].error::placeholder {color:#D67A66;} 
.input-box[type='email'].success {color:#1fc944; border:#1fc944 1px solid;}
.input-box[type='email'].success::placeholder {color:#1fc944;} 

.input-box[type='password'] {height:50px; padding:0 15px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:#ddd 1px solid; border-radius:6px;} 
.input-box[type='password']:focus {color:#111; border:#999 1px solid; transition:all 0.4s ease-in-out;}
.input-box[type='password'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-box[type='password'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-box[type='password'].error {color:#D67A66; border:#D67A66 1px solid;} 
.input-box[type='password'].error::placeholder {color:#D67A66;} 
.input-box[type='password'].success {color:#1fc944; border:#1fc944 1px solid;}
.input-box[type='password'].success::placeholder {color:#1fc944;}

.input-box[type='number'] {height:50px; padding:0 15px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:#ddd 1px solid; border-radius:6px;} 
.input-box[type='number']:focus {color:#111; border:#999 1px solid; transition:all 0.4s ease-in-out;} 
.input-box[type='number'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-box[type='number'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-box[type='number'].error {color:#D67A66; border:#D67A66 1px solid;} 
.input-box[type='number'].error::placeholder {color:#D67A66;} 
.input-box[type='number'].success {color:#1fc944; border:#1fc944 1px solid;}
.input-box[type='number'].success::placeholder {color:#1fc944;}


/* 입력박스 - 라인 */
.input-line[type='text'] {height:50px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:none; border-bottom:#e9e9e9 1px solid;} 
.input-line[type='text']:focus {color:#111; border-bottom:#999 1px solid; transition:all 0.4s ease-in-out;} 
.input-line[type='text'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-line[type='text'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-line[type='text'].error {color:#D67A66; border-bottom:#D67A66 1px solid;} 
.input-line[type='text'].error::placeholder {color:#D67A66;} 
.input-line[type='text'].success {color:#1fc944; border-bottom:#1fc944 1px solid;}
.input-line[type='text'].success::placeholder {color:#1fc944;} 

.input-line[type='password'] {height:50px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:none; border-bottom:#e9e9e9 1px solid;} 
.input-line[type='password']:focus {color:#111; border-bottom:#999 1px solid; transition:all 0.4s ease-in-out;} 
.input-line[type='password'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-line[type='password'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-line[type='password'].error {color:#D67A66; border-bottom:#D67A66 1px solid;} 
.input-line[type='password'].error::placeholder {color:#D67A66;} 
.input-line[type='password'].success {color:#1fc944; border-bottom:#1fc944 1px solid;}
.input-line[type='password'].success::placeholder {color:#1fc944;} 

.input-line[type='number'] {height:50px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:none; border-bottom:#e9e9e9 1px solid;} 
.input-line[type='number']:focus {color:#111; border-bottom:#999 1px solid; transition:all 0.4s ease-in-out;}
.input-line[type='number'].middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.input-line[type='number'].small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.input-line[type='number'].error {color:#D67A66; border-bottom:#D67A66 1px solid;} 
.input-line[type='number'].error::placeholder {color:#D67A66;} 
.input-line[type='number'].success {color:#1fc944; border-bottom:#1fc944 1px solid;}
.input-line[type='number'].success::placeholder {color:#1fc944;} 


/* 셀렉트박스 */
.select-box {height:50px; padding:0 15px; font-weight:400; font-size:14px; line-height:14px; color:#999; border:#ddd 1px solid; border-radius:6px; background:url('../images/content/icn_selectbox.gif') right center no-repeat, #fff;} 
.select-box:focus {color:#111; border:#999 1px solid; transition:all 0.4s ease-in-out;} 
.select-box.middle {height:40px; padding:0 10px; font-weight:400; font-size:13px; line-height:13px; border-radius:5px;} 
.select-box.small {height:30px; padding:0 10px; font-weight:400; font-size:12px; line-height:12px; border-radius:4px;} 
.select-box.error {color:#D67A66; border:#D67A66 1px solid;} 
.select-box.error::placeholder {color:#D67A66;} 
.select-box.success {color:#1fc944; border:#1fc944 1px solid;}
.select-box.success::placeholder {color:#1fc944;}


/* 내용박스 */
textarea {padding:15px; border:#ddd 1px solid; border-radius:6px;} 
textarea:focus {color:#111; border:#999 1px solid; transition:all 0.4s ease-in-out;} 
textarea.error {color:#D67A66; border:#D67A66 1px solid;} 
textarea.error::placeholder {color:#D67A66;} 
textarea.success {color:#1fc944; border:#1fc944 1px solid;}
textarea.success::placeholder {color:#1fc944;}


/* 라디오버튼 */
.radio-box input[type="radio"] {display:none !important;}
.radio-box input[type="radio"] + label {padding:1px 0 5px 27px; font-size:14px; line-height:14px; color:#777; letter-spacing:-0.5px; background:url("../images/content/radio_box_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.radio-box input[type="radio"]:checked + label {color:#111; background:url("../images/content/radio_box_on.svg") 0 0 no-repeat;}


/* 라디오버튼 - 전체박스 */
.radio-box-area input[type="radio"] {display:none !important;}
.radio-box-area input[type="radio"] + label {display:block; width:100%; padding:20px 15px 20px 40px; text-align:right; font-weight:600; font-size:14px; line-height:14px; color:#111; letter-spacing:-0.5px; border:#ccc 2px dashed; border-radius:6px; background:url("../images/content/radio_box_off.svg") 12px 16px no-repeat, rgba(255, 255, 255, 0.1); cursor:pointer; transition:all 0.3s ease-in-out;}
.radio-box-area input[type="radio"]:checked + label {color:#111; border:#F8285A 2px dashed; background:url("../images/content/radio_box_on.svg") 12px 16px no-repeat, #fff5f6;}


/* 체크박스 */
.check-box input[type="checkbox"] {display:none !important;}
.check-box input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_on.svg") 0 0 no-repeat;}

.check-box-red input[type="checkbox"] {display:none !important;}
.check-box-red input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_red_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-red input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_red_on.svg") 0 0 no-repeat;}

.check-box-red-s input[type="checkbox"] {display:none !important;}
.check-box-red-s input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 24px; font-size:12px; line-height:18px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_red_s_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-red-s input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_red_s_on.svg") 0 0 no-repeat;}

.check-box-blue input[type="checkbox"] {display:none !important;}
.check-box-blue input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_blue_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-blue input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_blue_on.svg") 0 0 no-repeat;}

.check-box-blue-s input[type="checkbox"] {display:none !important;}
.check-box-blue-s input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 24px; font-size:12px; line-height:18px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_blue_s_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-blue-s input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_blue_s_on.svg") 0 0 no-repeat;}

.check-box-orange input[type="checkbox"] {display:none !important;}
.check-box-orange input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_orange_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-orange input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_orange_on.svg") 0 0 no-repeat;}

.check-box-orange-s input[type="checkbox"] {display:none !important;}
.check-box-orange-s input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 24px; font-size:12px; line-height:18px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_orange_s_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-orange-s input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_orange_s_on.svg") 0 0 no-repeat;}

.check-box-gray input[type="checkbox"] {display:none !important;}
.check-box-gray input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_gray_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-gray input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_gray_on.svg") 0 0 no-repeat;}

.check-box-gray-s input[type="checkbox"] {display:none !important;}
.check-box-gray-s input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 24px; font-size:12px; line-height:18px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_gray_s_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-gray-s input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_gray_s_on.svg") 0 0 no-repeat;}

.check-box-red-color input[type="checkbox"] {display:none !important;}
.check-box-red-color input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_red_color_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-red-color input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_red_on.svg") 0 0 no-repeat;}

.check-box-blue-color input[type="checkbox"] {display:none !important;}
.check-box-blue-color input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_blue_color_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-blue-color input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_blue_on.svg") 0 0 no-repeat;}

.check-box-orange-color input[type="checkbox"] {display:none !important;}
.check-box-orange-color input[type="checkbox"] + label {display:inline-block; padding:0 0 5px 30px; font-weight:500; font-size:14px; line-height:22px; color:#999; letter-spacing:-0.5px; background:url("../images/content/check_box_orange_color_off.svg") 0 0 no-repeat; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-orange-color input[type="checkbox"]:checked + label {color:#111; background:url("../images/content/check_box_orange_on.svg") 0 0 no-repeat;}


/* 체크박스 - 전체박스 */
.check-box-area input[type="checkbox"] {display:none !important;}
.check-box-area input[type="checkbox"] + label {display:block; width:100%; padding:15px 20px 17px 45px; font-weight:500; font-size:14px; line-height:14px; color:#111; letter-spacing:-0.5px; border:#e3e6ff 1px solid; border-radius:7px; background:url("../images/content/check_box_off.svg") 15px 10px no-repeat, #f3f8ff; cursor:pointer; transition:all 0.3s ease-in-out;}
.check-box-area input[type="checkbox"]:checked + label {color:#fff; border:#4F8EF8 1px solid; background:url("../images/content/check_box_on02.svg") 15px 10px no-repeat, #4F8EF8;}


/* 스위치 버튼 */
.switch-button {display:inline-block; position:relative; width:40px; height:24px;} 
.switch-button input {width:0; height:0; opacity:0;} 
.switch-button .onoff-switch {position:absolute; top:0; left:0; right:0; bottom:0; background:#D4D6DB; border-radius:20px; -webkit-transition:.4s; transition:.4s; cursor:pointer;} 
.switch-button .onoff-switch:before {content:""; position:absolute; left:2px; bottom:2px; height:20px; width:20px; border-radius:20px; background:#fff; -webkit-transition:.5s; transition:.4s;} 
.switch-button input:checked + .onoff-switch {background:#3D63FF;} 
.switch-button input:checked + .onoff-switch:before {-webkit-transform:translateX(16px); -ms-transform:translateX(16px); transform:translateX(16px);}


/* 아이콘 - 적용 */
.date-icn {padding:0 15px 0 35px !important; background:url('../images/content/icn_calendar.svg') 10px center no-repeat, #FFF;}
.search-icn {padding:0 15px 0 35px !important; background:url('../images/content/icn_search.svg') 10px center no-repeat, #FFF;}
.id-icn {padding:0 20px 0 45px !important; background:url('../images/content/icn_id.svg') 15px center no-repeat, #FFF;}
.pw-icn {padding:0 20px 0 45px !important; background:url('../images/content/icn_pw.svg') 15px center no-repeat, #FFF;}
.name-icn {padding:0 20px 0 45px !important; background:url('../images/content/icn_name.svg') 15px center no-repeat, #FFF;}
.card-icn {padding:0 20px 0 45px !important; background:url('../images/content/icn_card.svg') 15px center no-repeat, #FFF;}
.email-icn {padding:0 20px 0 45px !important; background:url('../images/content/icn_email.svg') 15px center no-repeat, #FFF;}
.phone-icn {padding:0 20px 0 45px !important; background:url('../images/content/icn_phone.svg') 15px center no-repeat, #FFF;}








/* 버튼 //////////////////////////////////////////////////////// */
/* 기본 */
.btn-default {display:inline-block; height:50px; padding:17px 20px; text-align:center; font-size:14px; line-height:14px; color:#fff; letter-spacing:-0.5px; border-radius:8px; transition:all 0.4s ease-in-out; transition:transform 180ms ease, box-shadow 180ms ease; cursor:pointer;}
.btn-default i[class*="fa-"] {margin-right:6px;}

.btn-default.large {height:60px; padding:21px 20px; font-size:18px; line-height:18px; border-radius:10px;}
.btn-default.middle {height:40px; padding:13px 15px; font-size:13px; line-height:13px; border-radius:6px;}
.btn-default.small {height:22px; padding:5px 10px; font-size:12px; line-height:12px; border-radius:4px;}

.btn-default.bd-blue {background:#0D99FF;}
.btn-default.bd-red {background:#F8285A;}
.btn-default.bd-violet {background:#9747FF;}
.btn-default.bd-orange {background:#FF5C16;}
.btn-default.bd-pink {background:#FF24BD;}
.btn-default.bd-navy {background:#4D49FC;}
.btn-default.bd-green {background:#16A34A;}
.btn-default.bd-gray {background:#777;}
.btn-default.bd-white {background:#fff;}

.btn-default:hover {color:#fff; transform:translateY(-1px); box-shadow:inset 0 0 8px rgba(0, 0, 0, 0.2);}
.btn-default:active {color:#fff; box-shadow:inset 0 0 8px rgba(0, 0, 0, 0.2);}


/* 라인 */
.btn-line {display:inline-block; height:50px; padding:17px 15px; text-align:center; font-weight:500; font-size:14px; line-height:14px; color:#181818; letter-spacing:-0.5px; border:#E6E6E6 1px solid; border-radius:8px; background:#f5f5f5; transition:transform 180ms ease, box-shadow 180ms ease; cursor:pointer;}

.btn-line.large {height:60px; padding:21px 20px; font-size:18px; line-height:18px; border-radius:10px;}
.btn-line.middle {height:40px; padding:13px 15px; font-size:13px; line-height:13px; border-radius:6px;}
.btn-line.small {height:22px; padding:5px 10px; font-size:12px; line-height:12px; border-radius:4px;}

.btn-line.bl-blue {color:#0D99FF; border:#BDE3FF 1px solid; background:#E5F4FF;}
.btn-line.bl-red {color:#F8285A; border:#FEC6D4 1px solid; background:#FFEEF3;}
.btn-line.bl-violet {color:#9747FF; border:#E4CCFF 1px solid; background:#F1E5FF;}
.btn-line.bl-orange {color:#FF5C16; border:#FFBB9E 1px solid; background:#ffe9dc;}
.btn-line.bl-pink {color:#FF24BD; border:#FFBDF2 1px solid; background:#FFE0FC;}
.btn-line.bl-navy {color:#4D49FC; border:#D3D1FF 1px solid; background:#EBEBFF;}
.btn-line.bl-green {color:#16A34A; border:#ADDBBE 1px solid; background:#F0FDF4;}
.btn-line.bl-gray {color:#777; border:#ccc 1px solid; background:#f1f1f1;}
.btn-line.bl-white {background:#fff;}

.btn-line:hover {border:#ccc 1px solid; transform:translateY(-1px); box-shadow:0 2px 4px rgba(0, 0, 0, 0.10);}
.btn-line:active {color:#111; border:#ccc 1px solid;}


/* 정렬 */
.btn-line {display:inline-block; height:50px; padding:17px 15px; text-align:center; font-weight:500; font-size:14px; line-height:14px; color:#181818; letter-spacing:-0.5px; border:#E6E6E6 1px solid; border-radius:8px; background:#f5f5f5; transition:transform 180ms ease, box-shadow 180ms ease; cursor:pointer;}









/* 탭메뉴 //////////////////////////////////////////////////////// */
.tab-menu {margin-bottom:30px; border:#e9e9e9 1px solid; border-top:#111 2px solid; border-bottom:none; overflow:hidden;}
.tab-menu .tm-one {display:flex;}
.tab-menu .tm-one a {display:block; padding:25px 5px; text-align:center; font-weight:500; font-size:18px; line-height:18px; color:#999; letter-spacing:-0.5px; word-break:keep-all; border-left:#e9e9e9 1px solid; border-bottom:#e9e9e9 1px solid; background:#f5f5f5;}
.tab-menu .tm-one a:first-child {border-left:none;}
.tab-menu .tm-one a:hover {color:#111; background:#fff;}
.tab-menu .tm-one a.active {color:#111; border-bottom:none; background:#fff;}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-menu .tmo-ea2 a {width:50%;}
.tab-menu .tmo-ea3 a {width:calc(100%/3);}
.tab-menu .tmo-ea4 a {width:25%;}
.tab-menu .tmo-ea5 a {width:20%;}
.tab-menu .tmo-ea6 a {width:calc(100%/6);}

@media all and (max-width:479px) {
  .tab-menu .tm-one a {display:flex; justify-content:center; align-items:center; height:55px; padding:0 5px; font-size:13px; line-height:16px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .tab-menu .tm-one a {display:flex; justify-content:center; align-items:center; height:55px; padding:0 5px; font-size:13px; line-height:16px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .tab-menu .tm-one a {display:flex; justify-content:center; align-items:center; height:60px; padding:0 5px; font-size:14px; line-height:18px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .tab-menu .tm-one a {display:flex; justify-content:center; align-items:center; height:60px; padding:0 5px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@media all and (min-width:1400px) {

}











/* 타이틀 //////////////////////////////////////////////////////// */
.front-title1 {margin-top:70px; font-weight:700; font-size:30px; line-height:30px; color:#111; letter-spacing:-0.5px;}
.front-title1 span {color:#005698;}

.front-title2 {margin-top:30px; font-weight:600; font-size:20px; line-height:26px; color:#111; letter-spacing:-0.5px;}

.front-title-icn1 {padding:2px 0 10px 38px; font-weight:600; font-size:24px; line-height:24px; color:#111; letter-spacing:-0.5px; background:url('../images/content/icn_title1.svg') 0 0 no-repeat;}






.front-title-icn1-line {margin-top:50px; padding:2px 0 30px 38px; font-weight:600; font-size:24px; line-height:24px; color:#111; letter-spacing:-0.5px; border-bottom:#e9e9e9 1px solid; background:url('../images/content/icn_title1.svg') 0 0 no-repeat;}
.front-title-icn2 {margin-top:30px; padding:4px 0 4px 27px; font-weight:600; font-size:20px; line-height:26px; color:#111; letter-spacing:-0.5px; background:url('../images/content/icn_title3.svg') 0 8px no-repeat;}



@media all and (max-width:479px) {
  .front-title1 {margin-top:70px; font-size:24px; line-height:24px;}

  .front-title2 {margin-top:20px; font-size:16px; line-height:22px;}

  .front-title-icn1 {margin-top:0; padding:2px 0 2px 30px; font-size:20px; line-height:20px; background:url('../images/content/icn_title1.svg') 0 1px no-repeat; background-size:22px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-title1 {margin-top:70px; font-size:24px; line-height:24px;}

  .front-title2 {margin-top:20px; font-size:16px; line-height:22px;}

  .front-title-icn1 {margin-top:15px; padding:2px 0 2px 30px; font-size:20px; line-height:20px; background:url('../images/content/icn_title1.svg') 0 1px no-repeat; background-size:22px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-title1 {margin-top:70px; font-size:26px; line-height:26px;}

  .front-title2 {margin-top:25px; font-size:18px; line-height:24px;}

  .front-title-icn1 {margin-top:40px; padding:2px 0 2px 33px; font-size:22px; line-height:22px; background:url('../images/content/icn_title1.svg') 0 0 no-repeat; background-size:25px;}
}
@media all and (min-width:992px) and (max-width:1199px) {

}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@media all and (min-width:1400px) {

}







/* 이미지 관련 //////////////////////////////////////////////////////// */
.front-img-box {margin-top:30px; padding:20px; border:#e9e9e9 1px solid; border-radius:10px; overflow:hidden;}
.front-img-box.fib-pd-big {padding:70px;}
.front-img-txt {margin-top:30px; text-align:center; font-size:16px; line-height:20px;}

@media all and (max-width:479px) {
  .front-img-txt {margin-top:20px; font-size:14px; line-height:20px;}
  .front-img-box.fib-pd-big {padding:20px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-img-txt {margin-top:20px; font-size:14px; line-height:20px;}
  .front-img-box.fib-pd-big {padding:20px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-img-box.fib-pd-big {padding:30px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-img-box.fib-pd-big {padding:40px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-img-box.fib-pd-big {padding:30px;}
}
@media all and (min-width:1400px) {

}








/* 도표 관련 //////////////////////////////////////////////////////// */
.front-process {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:40px;}
.front-process > li {position:relative; padding:30px; border:2px solid #e0f0f5; border-radius:12px; background:#f8fcfe;}
.front-process > li p {display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:50%; width:44px; height:44px; margin:-25px 0 0 -22px; border-radius:50%; font-weight:700; font-size:15px; line-height:15px; color:#fff; background:#005698;}
.front-process > li h2 {margin-top:12px; padding:20px 10px; text-align:center; font-weight:500; font-size:18px; line-height:24px; color:#111; letter-spacing:-0.5px; border:1px solid #e0f0f5; border-radius:6px; background:#fff;}
.front-process > li h2 span {display:block; font-weight:700; color:#00A1B2;}
.front-process > li div {padding-top:12px; text-align:center; font-weight:500; font-size:18px; line-height:24px; color:#00275B; letter-spacing:-0.5px; word-break:keep-all;}
.front-process > li div span {display:block;}

@media all and (max-width:479px) {
  .front-process {grid-template-columns:1fr; margin-top:30px;}
  .front-process > li {padding:20px; font-size:14px; line-height:22px;}
  .front-process > li p {width:36px; height:36px; margin:-15px 0 0 -18px; font-size:13px;}
  .front-process > li h2 {padding:15px 10px; font-size:16px; line-height:22px;}
  .front-process > li div {padding-top:12px; font-size:16px; line-height:22px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-process {grid-template-columns:1fr; margin-top:30px;}
  .front-process > li {padding:20px; font-size:14px; line-height:22px;}
  .front-process > li p {width:36px; height:36px; margin:-15px 0 0 -18px; font-size:13px;}
  .front-process > li h2 {padding:15px 10px; font-size:16px; line-height:22px;}
  .front-process > li div {padding-top:12px; font-size:16px; line-height:22px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-process > li h2 {padding:15px 10px; font-size:16px; line-height:22px;}
  .front-process > li div {padding-top:12px; font-size:16px; line-height:22px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-process > li h2 {font-size:16px; line-height:22px;}
  .front-process > li div {padding-top:12px; font-size:16px; line-height:22px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-process > li h2 {font-size:16px; line-height:22px;}
  .front-process > li div {padding-top:12px; font-size:16px; line-height:22px;}
}
@media all and (min-width:1400px) {

}


.front-process2 {display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:40px;}
.front-process2.fp-three {grid-template-columns:repeat(3, 1fr);}
.front-process2.fp-five {grid-template-columns:repeat(5, 1fr); gap:20px 10px;}
.front-process2 > li {padding:30px; border:1px solid #e9e9e9; border-radius:12px;}
.front-process2 > li dl {display:flex; justify-content:space-between;}
.front-process2 > li dl dt {width:70%;}
.front-process2 > li dl dt h2 {font-weight:500; font-size:20px; line-height:20px; color:#00878C;}
.front-process2 > li dl dt div {margin-top:20px; font-weight:500; font-size:20px; line-height:28px; color:#111; letter-spacing:-0.5px; word-break:keep-all;}
.front-process2 > li dl dt div span {display:block; font-size:14px; }
.front-process2 > li dl dd {width:25%; padding-top:10px; text-align:right; font-size:35px; line-height:35px; color:#00878C;}

@media all and (max-width:479px) {
  .front-process2 {grid-template-columns:repeat(1, 1fr); gap:10px;}
  .front-process2.fp-three {grid-template-columns:repeat(1, 1fr);}
  .front-process2.fp-five {grid-template-columns:repeat(1, 1fr); gap:10px;}
  .front-process2 > li {padding:20px; border-radius:10px;}
  .front-process2 > li dl {align-items:center;}
  .front-process2 > li dl dt h2 {font-size:16px; line-height:16px;}
  .front-process2 > li dl dt div {margin-top:12px; font-size:16px; line-height:22px;}
  .front-process2 > li dl dd {padding-top:0; font-size:30px; line-height:30px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-process2 {grid-template-columns:repeat(1, 1fr); gap:10px;}
  .front-process2.fp-three {grid-template-columns:repeat(1, 1fr);}
  .front-process2.fp-five {grid-template-columns:repeat(1, 1fr); gap:10px;}
  .front-process2 > li {padding:20px; border-radius:10px;}
  .front-process2 > li dl {align-items:center;}
  .front-process2 > li dl dt h2 {font-size:16px; line-height:16px;}
  .front-process2 > li dl dt div {margin-top:12px; font-size:16px; line-height:22px;}
  .front-process2 > li dl dd {padding-top:0; font-size:30px; line-height:30px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-process2 {grid-template-columns:repeat(2, 1fr); gap:10px;}
  .front-process2.fp-three {grid-template-columns:repeat(2, 1fr);}
  .front-process2.fp-five {grid-template-columns:repeat(2, 1fr); gap:10px;}
  .front-process2 > li {padding:20px; border-radius:10px;}
  .front-process2 > li dl {align-items:center;}
  .front-process2 > li dl dt h2 {font-size:16px; line-height:16px;}
  .front-process2 > li dl dt div {margin-top:12px; font-size:16px; line-height:22px;}
  .front-process2 > li dl dd {padding-top:0; font-size:30px; line-height:30px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-process2 {grid-template-columns:repeat(2, 1fr); gap:15px;}
  .front-process2.fp-three {grid-template-columns:repeat(2, 1fr);}
  .front-process2.fp-five {grid-template-columns:repeat(2, 1fr); gap:15px;}
  .front-process2 > li {padding:30px;}
  .front-process2 > li dl {align-items:center;}
  .front-process2 > li dl dt h2 {font-size:18px; line-height:18px;}
  .front-process2 > li dl dt div {margin-top:12px; font-size:18px; line-height:22px;}
  .front-process2 > li dl dd {padding-top:0; font-size:30px; line-height:30px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-process2 {grid-template-columns:repeat(2, 1fr); gap:15px;}
  .front-process2.fp-three {grid-template-columns:repeat(2, 1fr);}
  .front-process2.fp-five {grid-template-columns:repeat(2, 1fr); gap:15px;}
  .front-process2 > li {padding:30px;}
  .front-process2 > li dl {align-items:center;}
  .front-process2 > li dl dt h2 {font-size:18px; line-height:18px;}
  .front-process2 > li dl dt div {margin-top:12px; font-size:18px; line-height:22px;}
  .front-process2 > li dl dd {padding-top:0; font-size:30px; line-height:30px;}
}
@media all and (min-width:1400px) {

}










/* 텍스트 관련 //////////////////////////////////////////////////////// */
.front-text1 {font-size:14px; line-height:22px; letter-spacing:-0.5px;}
.front-text1 i {font-size:14px; color:#005698;}

.front-text-box {margin-top:40px; padding:30px; font-weight:500; font-size:18px; line-height:24px; color:#111; letter-spacing:-0.5px; border:#0D99FF 1px solid; border-radius:8px; background:#F2F6FF; overflow:hidden;}
.front-text-box > span {font-weight:700; color:#E81A0C;}

.front-text-list {margin-top:20px;}
.front-text-list > li {padding:0 0 25px 12px; font-size:18px; line-height:28px; letter-spacing:-0.5px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}

.front-box-icn {display:flex; justify-content:space-between; margin-top:40px;}
.front-box-icn li {padding:35px 40px; border:#e9e9e9 1px solid; border-radius:10px; background:#f8f8f8;}
.front-box-icn.fbi-one li {width:100%;}
.front-box-icn.fbi-two li {width:49%;}
.front-box-icn.fbi-three li {width:32%;}
.front-box-icn li dl {display:flex; align-items:center;}
.front-box-icn li dl dt img {width:90px;}
.front-box-icn li dl dd {margin-left:40px;}
.front-box-icn li dl dd h2 {font-weight:600; font-size:22px; line-height:30px; color:#00878C;}
.front-box-icn li dl dd div {margin-top:10px; font-weight:500; font-size:18px; line-height:26px; color:#111; word-break:keep-all;}

.front-box-type {display:grid; grid-template-columns:repeat(5, 1fr); grid-template-rows:repeat(2, auto); gap:20px; margin-top:40px;}
.front-box-type.fbt-cols4 {grid-template-columns:repeat(4, 1fr);}
.front-box-type li {padding:30px; word-break:keep-all; border:#e9e9e9 1px solid; border-radius:10px; background:#f8f8f8;}
.front-box-type li h2 {font-weight:700; font-size:20px; line-height:28px; color:#111; letter-spacing:-0.5px;}
.front-box-type li div {margin-top:15px; font-size:14px; line-height:22px; color:rgba(0, 0, 0, 0.7); letter-spacing:-0.5px;}

.front-text-lr {margin-top:40px;}
.front-text-lr dl {display:flex; padding:10px 0;}
.front-text-lr dl dt {width:15%;}
.front-text-lr dl dd {width:80%;}
.front-text-lr dl dt {padding:0 0 0 12px; font-weight:500; font-size:16px; line-height:24px; color:#111; letter-spacing:-0.5px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}
.front-text-lr dl dd {font-size:16px; line-height:24px; letter-spacing:-0.5px;}
.front-text-lr dl dd span {display:flex; align-items:center; gap:5px; margin-top:10px; font-size:14px; line-height:18px;}
.front-text-lr dl dd span i {color:#E81A0C;}


@media all and (max-width:479px) {
  .front-text-box {padding:20px; font-size:16px; line-height:22px;}

  .front-text-list {margin-top:20px;}
  .front-text-list > li {padding:0 0 15px 12px; font-size:14px; line-height:22px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}

  .front-box-icn {flex-wrap:wrap; margin-top:40px;}
  .front-box-icn li {padding:25px 20px;}
  .front-box-icn.fbi-one li {width:100%;}
  .front-box-icn.fbi-two li {width:100%; margin:5px 0;}
  .front-box-icn.fbi-three li {width:100%; margin:5px 0;}
  .front-box-icn li dl {align-items:flex-start;}
  .front-box-icn li dl dt img {width:70px;}
  .front-box-icn li dl dd {margin-left:20px;}
  .front-box-icn li dl dd h2 {font-size:18px; line-height:26px;}
  .front-box-icn li dl dd div {margin-top:10px; font-size:14px; line-height:22px;}

  .front-box-type {grid-template-columns:repeat(1, 1fr);}
  .front-box-type li {padding:25px;}
  .front-box-type li h2 {font-size:18px; line-height:26px;}
  .front-box-type li div {margin-top:10px;}

  .front-text-lr dl {flex-wrap:wrap;}
  .front-text-lr dl dt {width:100%;}
  .front-text-lr dl dd {width:100%; padding:5px 0 0 12px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-text-box {padding:20px; font-size:16px; line-height:22px;}
  
  .front-text-list {margin-top:20px;}
  .front-text-list > li {padding:0 0 15px 12px; font-size:14px; line-height:22px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}

  .front-box-icn {flex-wrap:wrap; margin-top:40px;}
  .front-box-icn li {padding:25px 20px;}
  .front-box-icn.fbi-one li {width:100%;}
  .front-box-icn.fbi-two li {width:100%; margin:5px 0;}
  .front-box-icn.fbi-three li {width:100%; margin:5px 0;}
  .front-box-icn li dl {align-items:flex-start;}
  .front-box-icn li dl dt img {width:70px;}
  .front-box-icn li dl dd {margin-left:20px;}
  .front-box-icn li dl dd h2 {font-size:18px; line-height:26px;}
  .front-box-icn li dl dd div {margin-top:10px; font-size:14px; line-height:22px;}

  .front-box-type {grid-template-columns:repeat(1, 1fr);}
  .front-box-type li {padding:25px;}
  .front-box-type li h2 {font-size:18px; line-height:26px;}
  .front-box-type li div {margin-top:10px;}

  .front-text-lr dl {flex-wrap:wrap;}
  .front-text-lr dl dt {width:100%;}
  .front-text-lr dl dd {width:100%; padding:5px 0 0 12px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-text-list {margin-top:25px;}
  .front-text-list > li {padding:0 0 15px 12px; font-size:16px; line-height:22px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}

  .front-box-icn {flex-wrap:wrap; margin-top:40px;}
  .front-box-icn li {padding:30px 30px;}
  .front-box-icn li dl dt img {width:70px;}
  .front-box-icn li dl dd {margin-left:30px;}
  .front-box-icn li dl dd h2 {font-size:20px; line-height:26px;}
  .front-box-icn li dl dd div {margin-top:10px; font-size:16px; line-height:22px;}

  .front-box-type {grid-template-columns:repeat(2, 1fr);}
  .front-box-type li {padding:25px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-text-list {margin-top:25px;}
  .front-text-list > li {padding:0 0 15px 12px; font-size:16px; line-height:22px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}

  .front-box-icn li {padding:25px;}
  .front-box-icn li dl dd {margin-left:30px;}
  .front-box-icn li dl dd h2 {font-size:20px; line-height:26px;}
  .front-box-icn li dl dd div {margin-top:10px; font-size:16px; line-height:22px;}

  .front-box-type {grid-template-columns:repeat(2, 1fr);}
  .front-box-type li {padding:25px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-box-type {grid-template-columns:repeat(2, 1fr);}
  .front-box-type li {padding:25px;}

  .front-box-icn li {padding:25px;}
  .front-box-icn li dl dd {margin-left:30px;}
  .front-box-icn li dl dd h2 {font-size:20px; line-height:26px;}
  .front-box-icn li dl dd div {margin-top:10px; font-size:16px; line-height:22px;}
}
@media all and (min-width:1400px) {

}









/* 입력 - 관련 //////////////////////////////////////////////////////// */
.front-input-box {width:100%; margin-top:10px; border:#e9e9e9 1px solid; border-radius:8px; overflow:hidden;}
.front-input-box .fib-title {padding:30px; font-weight:500; font-size:18px; line-height:24px; color:#111; letter-spacing:-0.5px; background:#F2F6FF;}
.front-input-box .fib-title span {color:#E81A0C;}
.front-input-box .fib-input {padding:30px;}
.front-input-box .fib-input > ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:12px 30px;}
.front-input-box .fib-input > ul.fibi-col2 {grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(8, auto); grid-auto-flow:column; gap:12px 30px;}
.front-input-box .fib-input > ol {display:grid; grid-template-columns:repeat(1, 1fr); gap:15px 30px;}
.front-input-box .fib-input > ol strong {display:inline-block; width:150px; font-weight:500; font-size:14px; line-height:14px; color:#111;}
.front-input-box .fib-input > ol span {display:inline-block; margin:0 10px;}
.front-input-box .fib-input > div {display:flex; align-items:center; gap:12px 20px; font-size:14px; line-height:14px;}
.front-input-box .fib-txt {margin-top:30px; font-size:14px; line-height:22px; letter-spacing:-0.5px;}

@media all and (max-width:479px) {
  .front-input-box .fib-title {padding:20px; font-size:16px; line-height:22px;}
  .front-input-box .fib-input {padding:20px;}
  .front-input-box .fib-input > ul {grid-template-columns:1fr;}
  .front-input-box .fib-input > ul.fibi-col2 {grid-template-columns:1fr; grid-template-rows:unset; grid-auto-flow:row;}
  .front-input-box .fib-input > ol strong {display:block; width:100%;}
  .front-input-box .fib-input > ol span {display:block; margin:8px 0 0 0;}
  .front-input-box .fib-input > ol input {width:100% !important;}
  .front-input-box .fib-input > div {flex-wrap:wrap; gap:12px 20px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-input-box .fib-title {padding:20px; font-size:16px; line-height:22px;}
  .front-input-box .fib-input {padding:20px;}
  .front-input-box .fib-input > ul {grid-template-columns:1fr;}
  .front-input-box .fib-input > ul.fibi-col2 {grid-template-columns:1fr; grid-template-rows:unset; grid-auto-flow:row;}
  .front-input-box .fib-input > ol strong {display:block; width:100%;}
  .front-input-box .fib-input > ol span {display:block; margin:8px 0 0 0;}
  .front-input-box .fib-input > ol input {width:100% !important;}
  .front-input-box .fib-input > div {flex-wrap:wrap; gap:12px 20px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-input-box .fib-input > ol strong {display:block; width:100%;}
  .front-input-box .fib-input > ol span {display:block; margin:8px 0 0 0;}
  .front-input-box .fib-input > ol input {width:100% !important;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-input-box .fib-input > ol input {width:100px !important;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-input-box .fib-input > ol strong {display:block; width:100%;}
  .front-input-box .fib-input > ol span {display:block; margin:8px 0 0 0;}
  .front-input-box .fib-input > ol input {width:100% !important;}
}
@media all and (min-width:1400px) {

}










/* 테이블  /////////////////////////////////////////////////////////////////////////*/
/* 테이블 - 기본 */
.front-table {padding:20px 0 70px 0;}
.front-table > h2 {display:none; font-size:14px; line-height:22px; letter-spacing:-0.5px;}
.front-table > h2 i {color:#E81A0C;}
.front-table > table {width:100%; table-layout:fixed; margin-top:15px; border-top:#111 1px solid; overflow:hidden;}
.front-table > table thead td {padding:20px 5px; word-break:break-all; font-weight:500; font-size:16px; line-height:16px; color:#111; letter-spacing:-0.5px; text-align:center; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#F2F6FF;}
.front-table > table thead td:last-child {border-right:none;}
.front-table > table thead td.border-left {border-left:#e9e9e9 1px solid;}
.front-table > table thead td.border-right {border-right:#e9e9e9 1px solid;}
.front-table > table tbody td {padding:17px 15px; text-align:center; font-weight:500; font-size:15px; line-height:22px; color:#555; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#fff;}
.front-table > table tbody td a {color:#111;}
.front-table > table tbody td a:hover {color:#2973D6;}
.front-table > table tbody td:last-child {border-right:none;}
.front-table > table tbody th {padding:17px 15px; text-align:left; font-weight:500; font-size:15px; line-height:22px; color:#555; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#fff;}
.front-table > table tbody th a {color:#111;}
.front-table > table tbody th a:hover {color:#2973D6;}
.front-table > table tbody th:last-child {border-right:none;}

.front-table > table tbody .border-left {border-left:#e9e9e9 1px solid;}
.front-table > table tbody .border-right {border-right:#e9e9e9 1px solid;}

@media all and (max-width:479px) {
  .front-table {width:90%; overflow-x:scroll;}
  .front-table > h2 {display:block;}
  .front-table > table {width:750px;}
  .front-table > table thead td {padding:15px 5px; font-size:13px; line-height:20px;}
  .front-table > table tbody td {padding:15px 5px; font-size:13px; line-height:20px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-table {width:470px; overflow-x:scroll;}
  .front-table > h2 {display:block;}
  .front-table > table {width:750px;}
  .front-table > table thead td {padding:15px 5px; font-size:13px; line-height:20px;}
  .front-table > table tbody td {padding:15px 5px; font-size:13px; line-height:20px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-table {width:750px;}
  .front-table > table thead td {padding:20px 5px; font-size:14px; line-height:20px;}
  .front-table > table tbody td {padding:20px 5px; font-size:14px; line-height:20px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-table {width:1040px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-table {width:1240px;}
}
@media all and (min-width:1400px) {

}


/* 테이블 - 박스형 */
.front-table-box {width:100%;}
.front-table-box > h2 {display:none; padding:10px 0; font-size:14px; line-height:22px; letter-spacing:-0.5px;}
.front-table-box > h2 i {color:#E81A0C;}
.front-table-box > h3 {margin-top:10px; color:#E60013;}
.front-table-box > table {width:100%; table-layout:fixed; border:#e9e9e9 1px solid; border-top:#0D99FF 1px solid; overflow:hidden;}
.front-table-box > table thead td {padding:20px 5px; word-break:break-all; font-weight:500; font-size:16px; line-height:20px; color:#111; letter-spacing:-0.5px; text-align:center; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#F2F6FF;}
.front-table-box > table thead td:last-child {border-right:none;}
.front-table-box > table thead td.border-left {border-left:#e9e9e9 1px solid;}
.front-table-box > table thead td.border-right {border-right:#e9e9e9 1px solid;}
.front-table-box > table tbody td {padding:17px 15px; text-align:center; font-weight:500; font-size:15px; line-height:22px; color:#555; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#fff;}
.front-table-box > table tbody td a {color:#111;}
.front-table-box > table tbody td a:hover {color:#2973D6;}
.front-table-box > table tbody td:last-child {border-right:none;}
.front-table-box > table tbody th {padding:17px 30px; text-align:left; font-weight:500; font-size:15px; line-height:22px; color:#555; letter-spacing:-0.5px; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#fff;}
.front-table-box > table tbody th a {color:#111;}
.front-table-box > table tbody th a:hover {color:#2973D6;}
.front-table-box > table tbody th:last-child {border-right:none;}

.front-table-box.ftb-pd {padding:20px;}

.front-table-box > table tbody .border-left {border-left:#e9e9e9 1px solid;}
.front-table-box > table tbody .border-right {border-right:#e9e9e9 1px solid;}
.front-table-box > table tbody .bg-td {background:#F2F6FF;}

.front-table-box > table tbody .ftb-list {width:100%;}
.front-table-box > table tbody .ftb-list li {padding:3px 0 3px 12px; font-weight:500; font-size:15px; line-height:22px; color:#555; letter-spacing:-0.5px; background:url('../images/content/icn_dot01.gif') 0 12px no-repeat;}

@media all and (max-width:479px) {
  .front-table-box {overflow-x:scroll;}
  .front-table-box > h2 {display:block;}
  .front-table-box > table {width:100%;}
  .front-table-box > table thead td {padding:15px 5px; font-size:13px; line-height:20px;}
  .front-table-box > table tbody td {padding:15px 5px; font-size:13px; line-height:20px;}
  .front-table-box > table tbody th {padding:15px 5px; font-size:13px; line-height:20px;}

  .front-table-box.ftb-pd {padding:10px;}
  .front-table-box.ftb-scroll > table {width:750px !important;}
  .front-table-box > table tbody .ftb-list li {padding:2px 0 2px 12px; font-size:13px; line-height:20px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-table-box {overflow-x:scroll;}
  .front-table-box > h2 {display:block;}
  .front-table-box > table thead td {padding:15px 5px; font-size:13px; line-height:20px;}
  .front-table-box > table tbody td {padding:15px 5px; font-size:13px; line-height:20px;}
  .front-table-box > table tbody th {padding:15px 5px; font-size:13px; line-height:20px;}

  .front-table-box.ftb-pd {padding:10px;}
  .front-table-box.ftb-scroll > table {width:750px !important;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-table-box > table thead td {padding:20px 5px; font-size:14px; line-height:20px;}
  .front-table-box > table tbody td {padding:20px 5px; font-size:14px; line-height:20px;}
  .front-table-box > table tbody th {padding:20px 5px; font-size:14px; line-height:20px;}
}
@media all and (min-width:992px) and (max-width:1199px) {

}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@media all and (min-width:1400px) {

}


/* 테이블 - 입력 */
.front-table-input {width:100%;}
.front-table-input > h2 {display:none; padding:10px 0; font-size:14px; line-height:22px; letter-spacing:-0.5px;}
.front-table-input > h2 i {color:#E81A0C;}
.front-table-input > table {width:100%; table-layout:fixed; border:#e9e9e9 1px solid; border-top:#111 1px solid; overflow:hidden;}
.front-table-input > table tbody th {padding:15px 25px; text-align:left; font-weight:500; font-size:15px; line-height:15px; color:#555; letter-spacing:-0.5px; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:url('../images/content/icn_dot01.gif') 15px center no-repeat, #F5FAFD;}
.front-table-input > table tbody td {padding:15px 20px; text-align:center; font-weight:500; font-size:15px; line-height:22px; color:#555; border-bottom:#e9e9e9 1px solid; border-right:#e9e9e9 1px solid; background:#fff;}
.front-table-input > table tbody td div {display:flex; align-items:center; gap:5px;}
.front-table-input > table tbody td p {padding:10px;}
.front-table-input > table tbody .border-left {border-left:#e9e9e9 1px solid;}
.front-table-input > table tbody .border-right {border-right:#e9e9e9 1px solid;}

@media all and (max-width:479px) {
  .front-table-input {width:90%; overflow-x:scroll;}
  .front-table-input > h2 {display:block;}
  .front-table-input > table {width:750px;}
  .front-table-input > table thead td {padding:20px 5px; font-size:13px; line-height:13px;}
  .front-table-input > table tbody td {padding:20px 5px; font-size:13px; line-height:13px;}

  .front-table-input.tb-scroll-no {width:100%; overflow-x:hidden;}
  .front-table-input.tb-scroll-no table {width:100%;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-table-input {width:470px; overflow-x:scroll;}
  .front-table-input > h2 {display:block;}
  .front-table-input > table {width:750px;}
  .front-table-input > table thead td {padding:20px 5px; font-size:13px; line-height:13px;}
  .front-table-input > table tbody td {padding:20px 5px; font-size:13px; line-height:13px;}

  .front-table-input.tb-scroll-no {width:100%; overflow-x:hidden;}
  .front-table-input.tb-scroll-no table {width:100%;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-table-input {width:750px;}
  .front-table-input > table thead td {padding:25px 5px; font-size:14px; line-height:14px;}
  .front-table-input > table tbody td {padding:25px 5px; font-size:14px; line-height:14px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-table-input {width:1040px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-table-input {width:1240px;}
}
@media all and (min-width:1400px) {

}












/* 컨텐츠 ////////////////////////////////////////////////////////*/
/* 검진결과 - 결과보기 클릭 시 표시 */
.exam-result { display: none; }
.exam-result.show { display: block; }

@media all and (max-width:479px) {
  .btn-result-view {width:100% !important; margin-top:20px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .btn-result-view {width:100% !important; margin-top:20px;}
}
@media all and (min-width:768px) and (max-width:991px) {

}
@media all and (min-width:992px) and (max-width:1199px) {

}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@media all and (min-width:1400px) {

}


/* 소개 */
.front-intro {border-radius:10px; overflow:hidden;}
.front-intro > div {width:50%; padding:120px 70px; background:rgba(0,0,0,0.7);}
.front-intro > div > p {width:30px; height:1px; margin:30px 0; background:#1B6DDF;}
.front-intro > div h2 {font-size:18px; line-height:18px; color:#fff; letter-spacing:-0.5px;}
.front-intro > div h3 {font-weight:700; font-size:40px; line-height:47px; color:#fff; letter-spacing:-0.5px; word-break:keep-all;}
.front-intro > div h4 {margin-top:30px; font-size:16px; line-height:26px; color:rgba(255,255,255,0.7); letter-spacing:-0.5px;}
.front-intro > div h4.sizeUp {font-size:20px; line-height:30px; color:rgba(255,255,255,0.9);}
.front-intro > div div {margin-top:30px;}
.front-intro > div div button {display:inline-block; padding:20px 30px; font-weight:600; font-size:18px; line-height:18px; color:#111; border:rgba(255, 255, 255, 1) 1px solid; border-radius:10px; background:rgba(255, 255, 255, 0.7);}
.front-intro > div div button:hover {color:#111; border:rgba(255, 255, 255, 1) 1px solid; border-radius:10px; background:rgba(255, 255, 255, 1);}

@media all and (max-width:479px) {
  .front-intro > div {width:100%; padding:70px 20px;}
  .front-intro > div h2 {font-size:14px; line-height:14px;}
  .front-intro > div h3 {margin-top:30px; font-size:26px; line-height:30px;}
  .front-intro > div div {margin-top:30px; font-size:14px; line-height:24px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-intro > div {width:100%; padding:70px 20px;}
  .front-intro > div h2 {font-size:14px; line-height:14px;}
  .front-intro > div h3 {margin-top:30px; font-size:26px; line-height:30px;}
  .front-intro > div div {margin-top:30px; font-size:14px; line-height:24px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-intro > div {width:100%; padding:100px 30px;}
  .front-intro > div h2 {font-size:15px; line-height:16px;}
  .front-intro > div h3 {margin-top:35px; font-size:30px; line-height:36px;}
  .front-intro > div div {margin-top:35px; font-size:15px; line-height:24px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-intro > div {width:100%; padding:120px 50px;}
  .front-intro > div h2 {font-size:16px; line-height:16px;}
  .front-intro > div h3 {margin-top:35px; font-size:35px; line-height:35px;}
  .front-intro > div div {margin-top:35px; font-size:16px; line-height:26px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@media all and (min-width:1400px) {

}


/* 개요 */
.front-summary {margin-top:70px;}
.front-summary:first-child {margin-top:10px;}
.front-summary > h2 {font-weight:700; font-size:30px; line-height:40px; color:#111; letter-spacing:-0.5px;}
.front-summary > h2 span {color:#005698;}
.front-summary > h3 {margin-top:15px; font-weight:500; font-size:18px; line-height:28px; letter-spacing:-0.5px;}
.front-summary > h3 span {color:#005698;}
.front-summary > div {margin-top:50px; padding:120px 70px; border-radius:15px;}
.front-summary > div h2 {font-weight:500; font-size:16px; line-height:16px; color:#fff; letter-spacing:-0.5px;}
.front-summary > div h3 {margin-top:15px; padding-right:40%; word-break:keep-all; font-weight:700; font-size:24px; line-height:34px; color:#fff; letter-spacing:-0.5px;}
.front-summary > div h4 {margin-top:15px; word-break:keep-all; font-weight:700; font-size:24px; line-height:34px; color:#fff; letter-spacing:-0.5px;}

@media all and (max-width:479px) {
  .front-summary > h2 {font-size:22px; line-height:30px;}
  .front-summary > h3 {font-size:14px; line-height:22px;}
  .front-summary > div {margin-top:30px; padding:60px 20px; border-radius:10px;}
  .front-summary > div h2 {font-size:14px; line-height:14px;}
  .front-summary > div h3 {padding-right:0; font-size:18px; line-height:26px;}
  .front-summary > div h4 {font-size:18px; line-height:26px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-summary > h2 {font-size:22px; line-height:30px;}
  .front-summary > h3 {font-size:14px; line-height:22px;}
  .front-summary > div {margin-top:30px; padding:60px 20px; border-radius:10px;}
  .front-summary > div h2 {font-size:14px; line-height:14px;}
  .front-summary > div h3 {padding-right:0; font-size:18px; line-height:26px;}
  .front-summary > div h4 {font-size:18px; line-height:26px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-summary > h2 {font-size:24px; line-height:32px;}
  .front-summary > h3 {font-size:16px; line-height:24px;}
  .front-summary > div {margin-top:40px; padding:80px 30px; border-radius:10px;}
  .front-summary > div h2 {font-size:14px; line-height:14px;}
  .front-summary > div h3 {padding-right:30%; font-size:18px; line-height:26px;}
  .front-summary > div h4 {font-size:18px; line-height:26px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-summary > h2 {font-size:24px; line-height:32px;}
  .front-summary > h3 {font-size:16px; line-height:24px;}
  .front-summary > div {margin-top:40px; padding:80px 30px; border-radius:10px;}
  .front-summary > div h2 {font-size:14px; line-height:14px;}
  .front-summary > div h3 {padding-right:20%; font-size:18px; line-height:26px;}
  .front-summary > div h4 {font-size:18px; line-height:26px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-summary > div h3 {padding-right:30%;}
}
@media all and (min-width:1400px) {

}


/* 연계 협력 기관 */
.front-intro-partner {display:grid; grid-template-columns:repeat(3, 1fr); gap:70px 30px; margin-top:20px; text-align:center;}
.front-intro-partner > li p {padding:10px; border:#e9e9e9 1px solid; border-radius:8px;}
.front-intro-partner > li p img {height:85px;}
.front-intro-partner > li h2 {margin-top:20px; font-weight:500; font-size:16px; line-height:24px; color:#111; letter-spacing:-0.5px;}

@media all and (max-width:479px) {
  .front-intro-partner {grid-template-columns:repeat(1, 1fr); gap:40px 30px; margin-top:0;}
  .front-intro-partner > li p img {width:100%;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-intro-partner {grid-template-columns:repeat(2, 1fr); gap:40px 30px; margin-top:0;}
  .front-intro-partner > li p img {width:100%;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-intro-partner {grid-template-columns:repeat(2, 1fr); gap:50px 30px; margin-top:10px;}
  .front-intro-partner > li p img {width:100%;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-intro-partner {grid-template-columns:repeat(2, 1fr); gap:60px 30px; margin-top:10px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-intro-partner {grid-template-columns:repeat(2, 1fr);}
}
@media all and (min-width:1400px) {

}












/* 라이브러리 변경 ////////////////////////////////////////////////////////*/
/* 모달 - 영역 */
.modal-area {width:100%; border-radius:10px; box-shadow:0 0 20px 0 rgba(0,0,0,0.2); overflow:hidden;}

.modal-area ::-webkit-scrollbar {width:3px; border-radius:10px;}
.modal-area ::-webkit-scrollbar-track {background-color:#fff;}
.modal-area ::-webkit-scrollbar-thumb {background-color:#b1b1b1; border-radius:10px;}
.modal-area ::-webkit-scrollbar-thumb:hover {background:#b1b1b1;}
.modal-area ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {display:none; width:0; height:0; background:#fff;}

.modal-area .ma-header {display:flex; justify-content:space-between; align-items:center; position:sticky; top:0;  padding:20px 30px; background:#f5f5f5; z-index:99999;}
.modal-area .ma-header dt {font-weight:800; font-size:20px; line-height:20px; color:#111; letter-spacing:-1px;}
.modal-area .ma-header dd {font-size:24px; color:#111; cursor:pointer;}

.modal-area .ma-guide {padding:20px 30px 20px 30px;}
.modal-area .ma-guide > dl {display:flex; justify-content:space-between; align-items:center; padding:10px 0 0 0;}
.modal-area .ma-guide > dl > dt h2 {font-weight:700; font-size:22px; line-height:22px; color:#111; letter-spacing:-0.5px;}
.modal-area .ma-guide > dl > dt h2 span {font-weight:800; color:#45B035;}
.modal-area .ma-guide > dl > dt h3 {margin-top:5px; letter-spacing:-0.5px;}

.modal-area .ma-terms {padding:30px 30px 40px 30px;}
.modal-area .ma-terms > h2 {padding-bottom:30px; font-weight:500; font-size:16px; line-height:24px; color:#111; letter-spacing:-0.5px; border-bottom:#e9e9e9 1px solid;}
.modal-area .ma-terms > h3 {margin-top:35px; font-weight:500; font-size:16px; line-height:16px; color:#111; letter-spacing:-0.5px;}
.modal-area .ma-terms > div {margin-top:10px; font-size:14px; line-height:22px; letter-spacing:-0.5px;}
.modal-area .ma-terms > p {margin-top:40px; text-align:center; font-weight:600; font-size:20px; line-height:20px; color:#111; letter-spacing:-0.5px; letter-spacing:-0.5px;}

.modal-area .ma-terms-use {padding:30px 30px 40px 30px;}
.modal-area .ma-terms-use > h2 {margin-bottom:30px; font-weight:500; font-size:16px; line-height:24px; color:#111; letter-spacing:-0.5px;}
.modal-area .ma-terms-use > h3 {display:flex; margin-top:30px; font-size:14px; line-height:20px; letter-spacing:-0.5px;}
.modal-area .ma-terms-use > h3 i {display:inline-block; padding:3px 8px 0 0; color:#de3176;}
.modal-area .ma-terms-use > p {margin-top:50px; text-align:center; font-weight:600; font-size:20px; line-height:20px; color:#111; letter-spacing:-0.5px; letter-spacing:-0.5px;}

.modal-area .ma-confirm {padding:0 30px 30px 30px;}
.modal-area .ma-confirm > p.save {padding:0 60px;}
.modal-area .ma-confirm > p.reset {padding:10px 70px;}
.modal-area .ma-confirm > p.logout {margin:0 0 -15px 0; padding:0 50px;}
.modal-area .ma-confirm > p.lottieIng {margin:0 0 -15px 0; padding:0 80px;}
.modal-area .ma-confirm > div {padding:40px 20px 0 20px; text-align:center; border-top:#e9e9e9 1px solid;}
.modal-area .ma-confirm > div h2 {font-weight:700; font-size:20px; line-height:24px; color:#111; letter-spacing:-1px;}
.modal-area .ma-confirm > div h2 span {color:#45B035;}
.modal-area .ma-confirm > div h3 {margin-top:15px; font-size:14px; line-height:22px; letter-spacing:-0.5px;}
.modal-area .ma-confirm > div h3 strong {color:#111;}
.modal-area .ma-confirm > div div {margin:30px 0 10px 0; padding:15px; text-align:center; font-weight:700; font-size:15px; line-height:16px; color:#111; border:#e9e9e9 1px solid; border-radius:10px; background:#f9f9f9;}
.modal-area .ma-confirm > div div span {display:block; margin-bottom:5px; font-weight:500; color:#888; letter-spacing:-0.5px;}

.modal-area .ma-comparison {padding:10px 30px 30px 30px;}
.modal-area .ma-comparison > ul {display:flex; justify-content:space-between; padding-top:30px; border-top:#e9e9e9 1px solid;}
.modal-area .ma-comparison > ul > li {width:19%; padding:40px 0; text-align:center; border:#e9e9e9 3px dashed; border-radius:10px;}
.modal-area .ma-comparison > ul > li h2 {font-weight:700; font-size:18px; line-height:18px; color:#111; letter-spacing:-0.5px;}
.modal-area .ma-comparison > ul > li h3 {margin-top:10px; font-weight:500; font-size:14px; line-height:14px;}
.modal-area .ma-comparison > ul > li div {font-weight:500; font-size:16px; line-height:20px; letter-spacing:-0.5px;}

.modal-area .ma-btn {padding:10px 30px 40px 30px; text-align:center;}

.iziModal .iziModal-content {overflow-y:auto; max-height:calc(100vh - 140px);}
