@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:28px; 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 12px 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) {

}












/* 컨텐츠 ////////////////////////////////////////////////////////*/
/* 컨텐츠 - 상단소개1 */
.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 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) {

}


/* 컨텐츠 - 상단소개2 */
.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:40px; padding:120px 70px; border-radius:15px;}
.front-summary > div.bgSmall {padding:70px 70px; border-radius:10px;}
.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:20%; 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:20%;}
}
@media all and (min-width:1400px) {

}

/* 컨텐츠 - 학습지원 - 상단태그 */
/* .front-tag {margin-top:0px;} */
.front-tag {display:flex; flex-direction:column; align-items:center; gap:1.2rem; text-align:center; padding:30px 60px; margin-bottom:50px; border-radius:50em; background:#DBF2FF;}
.front-tag > h3 {font-weight: 700; font-size: 24px; line-height: 30px; color:#1460B8;}
.front-tag > p {width: 40px; height: 1px; margin:4px auto; background: #1460B8;}
.front-tag > div {word-break:keep-all; font-weight:500; font-size:16px; line-height:28px; color:#222; letter-spacing:1px;}

@media all and (max-width:479px) {
	.front-tag {border-radius:24px; padding:24px 20px;}
	.front-tag > h3 {font-size:20px;}
	.front-tag > div {font-size:15px; line-height:24px;}
}
@media all and (min-width:480px) and (max-width:767px) {
	.front-tag {border-radius:24px; padding:24px 20px;}
	.front-tag > h3 {font-size:20px;}
	.front-tag > div {font-size:15px; line-height:24px;}
}
@media all and (min-width:768px) and (max-width:991px) {
	.front-tag > div {font-size:15px; line-height:24px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
	.front-tag > div {font-size:15px; line-height:24px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
}
@media all and (min-width:1400px) {

}


/* 인사말 */
.front-greeting {width:100%; padding-top:20px; word-break:keep-all;}
.front-greeting > dl {display:flex;}
.front-greeting > dl > dt {width:50%;}
.front-greeting > dl > dt h2 {font-weight:700; font-size:40px; line-height:45px; color:#111;}
.front-greeting > dl > dt h2 span {color:#00A1B2;}
.front-greeting > dl > dt h3 {margin-top:40px; font-weight:500; font-size:28px; line-height:36px; color:#111;}
.front-greeting > dl > dt div {margin-top:40px; font-weight:500; font-size:18px; line-height:26px; letter-spacing:-0.5px;}
.front-greeting > dl > dd {width:50%;}
.front-greeting > div {margin-top:50px; padding-top:50px; font-weight:500; font-size:16px; line-height:24px; border-top:#e9e9e9 1px solid;}
.front-greeting > p {margin-top:50px; text-align:right; font-weight:700; font-size:20px; line-height:20px; color:#111;}

@media all and (max-width:479px) {
  .front-greeting {padding-top:0;}
  .front-greeting > dl {flex-wrap:wrap;}
  .front-greeting > dl > dt {width:100%;}
  .front-greeting > dl > dt h2 {font-size:30px; line-height:35px;}
  .front-greeting > dl > dt h3 {margin-top:20px; font-size:20px; line-height:28px;}
  .front-greeting > dl > dt div {margin-top:20px; font-size:16px; line-height:24px;}
  .front-greeting > dl > dd {width:100%; margin-top:30px;}
  .front-greeting > div {margin-top:30px; padding-top:30px; font-size:14px; line-height:22px;}
  .front-greeting > p {margin-top:30px; font-size:16px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-greeting {padding-top:0;}
  .front-greeting > dl {flex-wrap:wrap;}
  .front-greeting > dl > dt {width:100%;}
  .front-greeting > dl > dt h2 {font-size:30px; line-height:35px;}
  .front-greeting > dl > dt h3 {margin-top:20px; font-size:20px; line-height:28px;}
  .front-greeting > dl > dt div {margin-top:20px; font-size:16px; line-height:24px;}
  .front-greeting > dl > dd {width:100%; margin-top:30px;}
  .front-greeting > div {margin-top:30px; padding-top:30px; font-size:14px; line-height:22px;}
  .front-greeting > p {margin-top:30px; font-size:16px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-greeting {padding-top:0;}
  .front-greeting > dl {flex-wrap:wrap;}
  .front-greeting > dl > dt {width:100%;}
  .front-greeting > dl > dt h2 {font-size:32px; line-height:37px;}
  .front-greeting > dl > dt h3 {margin-top:25px; font-size:22px; line-height:28px;}
  .front-greeting > dl > dt div {margin-top:25px; font-size:16px; line-height:24px;}
  .front-greeting > dl > dd {width:100%; margin-top:35px;}
  .front-greeting > div {margin-top:35px; padding-top:35px; font-size:14px; line-height:22px;}
  .front-greeting > p {margin-top:35px; font-size:16px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-greeting > dl {flex-wrap:wrap;}
  .front-greeting > dl > dt {width:100%;}
  .front-greeting > dl > dt h2 {font-size:34px; line-height:40px;}
  .front-greeting > dl > dt h3 {margin-top:30px; font-size:22px; line-height:28px;}
  .front-greeting > dl > dt div {margin-top:30px; font-size:16px; line-height:24px;}
  .front-greeting > dl > dd {width:100%; margin-top:40px;}
  .front-greeting > div {margin-top:40px; padding-top:40px; font-size:16px; line-height:24px;}
  .front-greeting > p {margin-top:40px; font-size:18px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-greeting > dl {flex-wrap:wrap;}
  .front-greeting > dl > dt {width:100%;}
  .front-greeting > dl > dt h2 {font-size:34px; line-height:40px;}
  .front-greeting > dl > dt h3 {margin-top:30px; font-size:22px; line-height:28px;}
  .front-greeting > dl > dt div {margin-top:30px; font-size:16px; line-height:24px;}
  .front-greeting > dl > dd {width:100%; margin-top:40px;}
  .front-greeting > div {margin-top:40px; padding-top:40px; font-size:16px; line-height:24px;}
  .front-greeting > p {margin-top:40px; font-size:18px;}
}
@media all and (min-width:1400px) {

}


/* 연혁 */
.front-history {width:100%;}
.front-history > div {width:100%;}
.front-history > div > div {height:200px; border-radius:15px; background:url('../images/content/intro_history_img.jpg') center no-repeat; background-size:cover; overflow:hidden;}
.front-history > dl {display:flex; justify-content:space-between; width:100%; padding:50px 0 0 0;}
.front-history > dl > dt {width:35%;}
.front-history > dl > dt > p {width:30px; height:1px; margin:25px 0; background:#00A1B2;}
.front-history > dl > dt > h2 {font-weight:700; font-size:16px; line-height:16px; color:#111;}
.front-history > dl > dt > h3 {padding-right:100px; font-weight:700; font-size:40px; line-height:48px; color:#111; letter-spacing:-1px;}
.front-history > dl > dt > h3 span {color:#00A1B2;}
.front-history > dl > dt > h4 {margin-top:30px; padding-right:200px; font-weight:500; font-size:18px; line-height:30px; letter-spacing:-1px;}
.front-history > dl > dd {width:60%;}
.front-history > dl > dd > dl {display:flex; justify-content:space-between; padding:30px 0; border-top:#e9e9e9 1px solid;}
.front-history > dl > dd > dl > dt {width:15%; padding-top:11px; font-weight:700; font-size:22px; line-height:22px; color:#111;}
.front-history > dl > dd > dl > dd {width:80%;}
.front-history > dl > dd > dl > dd ul {width:100%;}
.front-history > dl > dd > dl > dd ul li {padding:10px 0 10px 12px; font-size:16px; line-height:22px; letter-spacing:-0.5px; background:url('../images/content/icn_dot01.gif') 0 18px no-repeat;}
.front-history > dl > dd > dl > dd ul li span {font-weight:600; color:#111; letter-spacing:0;}

@media all and (max-width:479px) {
  .front-history > div > div {height:200px; background:url('../images/content/intro_history_img.jpg') center no-repeat; background-size:cover;}
  .front-history > dl {flex-wrap:wrap; padding:50px 0 0 0;}
  .front-history > dl > dt {width:100%;}
  .front-history > dl > dt > p {width:20px; margin:20px 0;}
  .front-history > dl > dt > h2 {font-size:14px; line-height:14px;}
  .front-history > dl > dt > h3 {padding-right:0; font-size:30px; line-height:30px;}
  .front-history > dl > dt > h4 {margin-top:20px; padding-right:0; font-size:15px; line-height:24px;}
  .front-history > dl > dd {width:100%; margin-top:30px;}
  .front-history > dl > dd > dl {flex-wrap:wrap; padding:20px 0;}
  .front-history > dl > dd > dl > dt {width:100%; padding-top:0; font-size:18px; line-height:18px;}
  .front-history > dl > dd > dl > dd {width:100%;}
  .front-history > dl > dd > dl > dd ul {width:100%; margin-top:15px;}
  .front-history > dl > dd > dl > dd ul li {padding:5px 0 5px 12px; font-size:14px; line-height:22px; background:url('../images/content/icn_dot01.gif') 0 15px no-repeat;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-history > div > div {height:200px; background:url('../images/content/intro_history_img.jpg') center no-repeat; background-size:cover;}
  .front-history > dl {flex-wrap:wrap; padding:50px 0 0 0;}
  .front-history > dl > dt {width:100%;}
  .front-history > dl > dt > p {width:20px; margin:20px 0;}
  .front-history > dl > dt > h2 {font-size:14px; line-height:14px;}
  .front-history > dl > dt > h3 {padding-right:0; font-size:30px; line-height:30px;}
  .front-history > dl > dt > h4 {margin-top:20px; padding-right:0; font-size:15px; line-height:24px;}
  .front-history > dl > dd {width:100%; margin-top:30px;}
  .front-history > dl > dd > dl {flex-wrap:wrap; padding:20px 0;}
  .front-history > dl > dd > dl > dt {width:100%; padding-top:0; font-size:18px; line-height:18px;}
  .front-history > dl > dd > dl > dd {width:100%;}
  .front-history > dl > dd > dl > dd ul {width:100%; margin-top:15px;}
  .front-history > dl > dd > dl > dd ul li {padding:5px 0 5px 12px; font-size:14px; line-height:22px; background:url('../images/content/icn_dot01.gif') 0 15px no-repeat;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-history > div > div {height:200px; background:url('../images/content/intro_history_img.jpg') center no-repeat; background-size:cover;}
  .front-history > dl {flex-wrap:wrap; padding:60px 0 0 0;}
  .front-history > dl > dt {width:100%;}
  .front-history > dl > dt > h3 {padding-right:0; font-size:35px; line-height:35px;}
  .front-history > dl > dt > h4 {margin-top:20px; padding-right:0; font-size:16px; line-height:24px;}
  .front-history > dl > dd {width:100%; margin-top:50px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-history > div > div {height:200px; background:url('../images/content/intro_history_img.jpg') center no-repeat; background-size:cover;}
  .front-history > dl {flex-wrap:wrap;}
  .front-history > dl > dt {width:100%;}
  .front-history > dl > dt > h3 {padding-right:0; font-size:40px; line-height:40px;}
  .front-history > dl > dt > h4 {margin-top:20px;}
  .front-history > dl > dd {width:100%; margin-top:60px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
  .front-history > dl > dt {width:45%;}
  .front-history > dl > dd {width:50%;}
}
@media all and (min-width:1400px) {

}

/* 비전 */
.front-vision {width:100%;}
.front-vision > div {padding:28px 120px; text-align:center; border-radius:120px; overflow:hidden;}
.front-vision > div h2 {font-weight:700; font-size:24px; line-height:30px;}
.front-vision > div p {width:40px; height:1px; margin:14px auto; background:#1460B8;}
.front-vision > div div {font-weight:500; font-size:18px; line-height:26px; letter-spacing:-0.5px;}
.front-vision > div.fv-ctn1 {padding:32px 120px; background:#DBF2FF;}
.front-vision > div.fv-ctn1 h2 {color:#1460B8;}
.front-vision > div.fv-ctn2 {margin-top:20px; border:#3695DF 1px solid;}
.front-vision > div.fv-ctn2 h2 {color:#111;}
.front-vision > h2 {margin-top:40px; text-align:center; font-weight:700; font-size:28px; line-height:28px; color:#1460B8;}

/* 운영방향 도식 */
.fv-chart {display:flex; justify-content:center; margin-top:36px;}
.fv-inner {display:flex; flex-direction:column; align-items:stretch; /* width:660px; */ max-width:100%;}
.fv-circles {display:flex; align-items:center; justify-content:space-around; gap:4rem 8rem;}
.fv_circles_box {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:2rem; text-align:center;}
.fv_circles_box p {font-size:1.6rem; font-weight:600; word-break:keep-all;}
.fv-circle {
	width:200px; height:200px; border-radius:50%;
	display:flex; flex-direction:column;
	justify-content:center; align-items:center;
	text-align:center; padding:28px 20px;
	flex-shrink:0;
}
.fvc-1 {background:#0BB0EA;}
.fvc-2 {background:#3695DF;}
.fvc-3 {background:#1460B8;}
.fv-circle h4 {font-size:20px; font-weight:600; margin:0; line-height:1.4; color:#fff; word-break:keep-all;}
.fvl-1 {color:#0BB0EA;}
.fvl-2 {color:#3695DF;}
.fvl-3 {color:#1460B8;}

/* 반응형 */
@media all and (max-width:479px) {
	.front-vision > div {padding:24px 30px; border-radius:24px;}
	.front-vision > div h2 {font-size:20px; line-height:20px;}
	.front-vision > div p {margin:12px auto;}
	.front-vision > div div {font-size:15px; line-height:22px;}
	.front-vision > div.fv-ctn1 {padding:24px 20px;}
	.front-vision > div.fv-ctn2 {margin-top:12px;}
	.front-vision > h2 {margin-top:24px; font-size:20px; line-height:20px;}
	.fv-chart {margin-top:24px;}
	.fv-inner {width:100%;}
	.fv-circles {flex-direction:column; align-items:center; gap:4rem;}
	.fv-circle {width:180px; height:180px;}
	.fv-circle h4 {font-size:18px;}
}
@media all and (min-width:480px) and (max-width:767px) {
	.front-vision > div {padding:24px 20px; border-radius:24px;}
	.front-vision > div h2 {font-size:22px; line-height:22px;}
	.front-vision > div p {margin:12px auto;}
	.front-vision > div div {font-size:14px; line-height:22px;}
	.front-vision > div.fv-ctn1 {padding:24px 20px;}
	.front-vision > div.fv-ctn2 {margin-top:12px;}
	.front-vision > h2 {margin-top:24px; font-size:20px; line-height:20px;}
	.fv-chart {margin-top:24px;}
	.fv-circles {flex-direction:column; align-items:center; gap:4rem;}
	.fv-circle {width:180px; height:180px;}
	.fv-circle h4 {font-size:18px;}
}
@media all and (min-width:768px) and (max-width:991px) {
	.front-vision > div {padding:26px 60px; border-radius:80px;}
	.front-vision > div h2 {font-size:24px; line-height:24px;}
	.front-vision > div p {margin:14px auto;}
	.front-vision > div div {font-size:15px; line-height:23px;}
	.front-vision > div.fv-ctn1 {padding:30px 60px;}
	.front-vision > div.fv-ctn2 {margin-top:14px;}
	.front-vision > h2 {margin-top:24px; font-size:22px; line-height:22px;}
	.fv-chart {margin-top:24px;}
	.fv-circles {align-items:center; gap:4rem;}
	.fv-circle h4 {font-size:18px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
	.front-vision > div {padding:28px 80px; border-radius:100px;}
	.front-vision > div h2 {font-size:26px; line-height:26px;}
	.front-vision > div p {margin:14px auto;}
	.front-vision > div div {font-size:16px; line-height:24px;}
	.front-vision > div.fv-ctn1 {padding:32px 80px;}
	.front-vision > div.fv-ctn2 {margin-top:16px;}
	.front-vision > h2 {margin-top:30px; font-size:24px; line-height:24px;}
	.fv-circles {gap:4rem 6rem;}
}
@media all and (min-width:1200px) and (max-width:1399px) {
	.front-vision > div {padding:28px 100px; border-radius:100px;}
	.front-vision > div h2 {font-size:28px; line-height:28px;}
	.front-vision > div p {margin:14px auto;}
	.front-vision > div div {font-size:17px; line-height:25px;}
	.front-vision > div.fv-ctn1 {padding:32px 100px;}
	.front-vision > div.fv-ctn2 {margin-top:16px;}
	.front-vision > h2 {margin-top:22px; font-size:26px; line-height:26px;}
}

/* 조직도 */
.front-organ {display:flex; justify-content:space-between; width:100%; margin-top:40px;}
.front-organ > li {width:48%; border-radius:10px; overflow:hidden;}
.front-organ > li > h2 {padding:20px; text-align:center; font-weight:700; font-size:22px; line-height:22px; color:#fff;}
.front-organ > li > h2.fo-title1 {background:#004896;}
.front-organ > li > h2.fo-title2 {background:#00A1B2;}
.front-organ > li > ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; margin-top:20px;}
.front-organ > li > ul > li {border:#e9e9e9 1px solid; border-radius:6px;}
.front-organ > li > ul > li h2 {padding:15px 10px; text-align:center; font-weight:600; font-size:18px; line-height:18px; color:#111; border-bottom:#e9e9e9 1px solid; background:#f8f8f8;}
.front-organ > li > ul > li ul {padding:20px;}
.front-organ > li > ul > li ul li {padding:4px 0 4px 12px; font-size:14px; line-height:20px; background:url('../images/content/icn_dot01.gif') 0 11px no-repeat;}

@media all and (max-width:479px) {
  .front-organ {flex-wrap:wrap; margin-top:25px;}
  .front-organ > li {width:100%;}
  .front-organ > li > h2 {padding:20px; font-size:18px; line-height:18px;}
  .front-organ > li > ul {grid-template-columns:repeat(1, 1fr); gap:10px; margin-top:10px;}
  .front-organ > li > ul > li h2 {padding:15px 10px; font-size:16px; line-height:16px;}
  .front-organ > li > ul > li ul {padding:15px;}
  .front-organ > li > ul > li ul li {padding:2px 0 2px 12px; font-size:13px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-organ {flex-wrap:wrap; margin-top:25px;}
  .front-organ > li {width:100%;}
  .front-organ > li > h2 {padding:20px; font-size:18px; line-height:18px;}
  .front-organ > li > ul {grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:10px;}
  .front-organ > li > ul > li h2 {padding:15px 10px; font-size:16px; line-height:16px;}
  .front-organ > li > ul > li ul {padding:15px;}
  .front-organ > li > ul > li ul li {padding:2px 0 2px 12px; font-size:13px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-organ > li > h2 {padding:20px; font-size:18px; line-height:18px;}
  .front-organ > li > ul {grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:10px;}
  .front-organ > li > ul > li h2 {padding:15px 10px; font-size:16px; line-height:16px;}
  .front-organ > li > ul > li ul {padding:15px;}
  .front-organ > li > ul > li ul li {padding:2px 0 2px 12px; font-size:13px;}
}
@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-location {padding:10px 0 0 0;}
.front-intro-location > div {border-radius:15px; overflow:hidden;}
.front-intro-location > dl {display:flex; justify-content:space-between; align-items:center; margin-top:50px;}
.front-intro-location > dl > dt {width:75%;}
.front-intro-location > dl > dt h2 {font-weight:700; font-size:28px; line-height:28px; color:#111; letter-spacing:-0.5px;}
.front-intro-location > dl > dt h3 {margin-top:25px; padding-top:25px; font-weight:700; font-size:16px; line-height:16px; border-top:#e9e9e9 1px solid;}
.front-intro-location > dl > dt h3 span {display:inline-block; margin-right:30px;}
.front-intro-location > dl > dt h3 em {display:inline-block; margin-right:15px; color:#555;}
.front-intro-location > dl > dd {width:25%; text-align:right;}

@media all and (max-width:479px) {
  .front-intro-location > div iframe {height:350px;}
  .front-intro-location > dl {flex-wrap:wrap; margin-top:40px;}
  .front-intro-location > dl > dt {width:100%;}
  .front-intro-location > dl > dt h2 {font-size:20px; line-height:28px;}
  .front-intro-location > dl > dt h3 {margin-top:20px; padding-top:20px; font-size:14px; line-height:20px;}
  .front-intro-location > dl > dt h3 span {display:inline-block; margin-right:30px;}
  .front-intro-location > dl > dt h3 em {display:inline-block; margin-right:15px; color:#555;}
  .front-intro-location > dl > dd {width:100%; margin-top:30px; text-align:center;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-intro-location > div iframe {height:350px;}
  .front-intro-location > dl {flex-wrap:wrap; margin-top:50px;}
  .front-intro-location > dl > dt {width:100%;}
  .front-intro-location > dl > dt h2 {font-size:20px; line-height:28px;}
  .front-intro-location > dl > dt h3 {margin-top:20px; padding-top:20px; font-size:14px; line-height:20px;}
  .front-intro-location > dl > dt h3 span {display:inline-block; margin-right:30px;}
  .front-intro-location > dl > dt h3 em {display:inline-block; margin-right:15px; color:#555;}
  .front-intro-location > dl > dd {width:100%; margin-top:30px; text-align:center;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-intro-location > dl {margin-top:60px;}
  .front-intro-location > dl > dt {width:70%;}
  .front-intro-location > dl > dt h2 {font-size:24px; line-height:24px;}
  .front-intro-location > dl > dt h3 {margin-top:20px; padding-top:20px; font-size:16px; line-height:22px;}
  .front-intro-location > dl > dt h3 span {display:inline-block; margin-right:30px;}
  .front-intro-location > dl > dt h3 em {display:inline-block; margin-right:15px; color:#555;}
  .front-intro-location > dl > dd {width:30%;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-intro-location > dl {margin-top:60px;}
  .front-intro-location > dl > dt {width:70%;}
  .front-intro-location > dl > dt h2 {font-size:26px; line-height:26px;}
  .front-intro-location > dl > dt h3 {margin-top:20px; padding-top:20px; font-size:16px; line-height:22px;}
  .front-intro-location > dl > dt h3 span {display:inline-block; margin-right:30px;}
  .front-intro-location > dl > dt h3 em {display:inline-block; margin-right:15px; color:#555;}
  .front-intro-location > dl > dd {width:30%;}
}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@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-arrow-up {padding:50px 0; text-align:center; font-size:60px; line-height:60px; background:linear-gradient(180deg, #004896 0%, #00A1B2 100%); -webkit-background-clip:text; background-clip:text; color:transparent;}

@media all and (max-width:479px) {
  .front-arrow-up {padding:30px 0; font-size:40px; line-height:40px;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .front-arrow-up {padding:30px 0; font-size:40px; line-height:40px;}
}
@media all and (min-width:768px) and (max-width:991px) {
  .front-arrow-up {padding:40px 0; font-size:50px; line-height:50px;}
}
@media all and (min-width:992px) and (max-width:1199px) {
  .front-arrow-up {padding:40px 0; font-size:50px; line-height:50px;}
}
@media all and (min-width:1200px) and (max-width:1399px) {

}
@media all and (min-width:1400px) {

}


/* 반응형 */
.responsive-pc {display:block;}
.responsive-mobile {display:none;}

@media all and (max-width:479px) {
  .responsive-pc {display:none;}
  .responsive-mobile {display:block;}
}
@media all and (min-width:480px) and (max-width:767px) {
  .responsive-pc {display:none;}
  .responsive-mobile {display:block;}
}
@media all and (min-width:768px) and (max-width:991px) {
  /* .responsive-pc {display:none;}
  .responsive-mobile {display:block;} */
}
@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) {

}











/* 라이브러리 변경 ////////////////////////////////////////////////////////*/
/* 모달 - 영역 */
.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);}


/* 프로그램 진행절차 PDCA 도표 */
.pf-container {
	display:grid;
	grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
	grid-template-rows:auto auto;
	gap:8px 0;
	width:100%;
}

/* 4단계 컨테이너 (절차5·8·9·10) */
.pf-4col {
	grid-template-columns:1fr 18px 1fr 18px 1fr 18px 1fr;
}
.pf-4col .pdca-d {grid-column:3;}
.pf-4col .pdca-c {grid-column:5;}
.pf-4col .pdca-a {grid-column:7;}

/* PDCA 라벨 */
.pdca-label {
	padding:8px 6px; border-radius:6px;
	font-size:20px; font-weight:800; text-align:center;
	border:2px solid; display:flex;
	align-items:center; justify-content:center;
}
.pdca-p  {grid-column:1;   grid-row:1; background:#E3F7FF; border-color:rgba(11,176,234,0.3); color:#0BB0EA;}
.pdca-d  {grid-column:3/6; grid-row:1; background:#EBF3FD; border-color:rgba(54,149,223,0.3); color:#3695DF;}
.pdca-c  {grid-column:7;   grid-row:1; background:#E8EEF7; border-color:rgba(14,79,150,0.3); color:#0E4F96;}
.pdca-a  {grid-column:9;   grid-row:1; background:#E3EAF5; border-color:rgba(10,56,112,0.3); color:#0A3870;}

/* 화살표 */
.pf-arr {
	grid-row:2; display:flex;
	align-items:flex-start; justify-content:center; align-items:center;
}
.pf-arr::after {
	content:''; width:0; height:0;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid;
}
.pf-a1 {grid-column:2;} .pf-a1::after {border-left-color:#0BB0EA;}
.pf-a2 {grid-column:4;} .pf-a2::after {border-left-color:#3695DF;}
.pf-a3 {grid-column:6;} .pf-a3::after {border-left-color:#1460B8;}
.pf-a4 {grid-column:8;} .pf-a4::after {border-left-color:#0E4F96;}

/* D 하부 2단계 사이 화살표 제거 (5단계 전용) */
.pf-container:not(.pf-4col) .pf-a2 {display:none;}

/* 단계 배치 */
.pf-step {display:flex; flex-direction:column; min-width:0;}
.pf-s1 {grid-column:1; grid-row:2;}
.pf-s2 {grid-column:3; grid-row:2;}
.pf-s3 {grid-column:5; grid-row:2;}
.pf-s4 {grid-column:7; grid-row:2;}
.pf-s5 {grid-column:9; grid-row:2;}

/* 4단계 위치 재정의 */
.pf-4col .pf-s1 {grid-column:1; grid-row:2;}
.pf-4col .pf-s2 {grid-column:3; grid-row:2;}
.pf-4col .pf-s3 {grid-column:5; grid-row:2;}
.pf-4col .pf-s4 {grid-column:7; grid-row:2;}

/* 헤더 */
.pf-head {
	padding:12px 8px; text-align:center;
	font-size:15px; font-weight:700; color:#fff; line-height:1.5;
	border-radius:6px 6px 0 0; word-break:keep-all;
}
.pf-s1 .pf-head {background:#0BB0EA;}
.pf-s2 .pf-head {background:#3695DF;}
.pf-s3 .pf-head {background:#1460B8;}
.pf-s4 .pf-head {background:#0E4F96;}
.pf-s5 .pf-head {background:#0A3870;}
.pf-4col .pf-s3 .pf-head {background:#0E4F96;}
.pf-4col .pf-s4 .pf-head {background:#0A3870;}

/* 세부 내용 */
.pf-body {
	flex:1; border:1px solid #cde0f2; border-top:none;
	border-radius:0 0 6px 6px; padding:10px 8px;
	background:#f8fbff; display:flex; flex-direction:column; gap:4px;
}
.pf-item {
	position:relative; font-size:14px; font-weight:500; line-height:1.6; color:#222;
	padding:0 8px 0 14px; word-break:keep-all;
}
.pf-item::after {content:""; position:absolute; display:block; left:4px; top:9px; width:3px; height:3px; border-radius:50%;}
.pf-s1 .pf-item::after {background:#0BB0EA;}
.pf-s2 .pf-item::after {background:#3695DF;}
.pf-s3 .pf-item::after {background:#1460B8;}
.pf-s4 .pf-item::after {background:#0E4F96;}
.pf-s5 .pf-item::after {background:#0A3870;}
.pf-4col .pf-s3 .pf-item::after {background:#0E4F96;}
.pf-4col .pf-s4 .pf-item::after {background:#0A3870;}

/*
.pf-item {
	font-size:14px; font-weight:500; line-height:1.6; color:#222;
	padding:7px 9px; background:#fff;
	border:1px solid #ddd; border-left:3px solid;
	word-break:keep-all;
}
*/
/*
.pf-s1 .pf-item {border-left-color:#0BB0EA;}
.pf-s2 .pf-item {border-left-color:#3695DF;}
.pf-s3 .pf-item {border-left-color:#1460B8;}
.pf-s4 .pf-item {border-left-color:#0E4F96;}
.pf-s5 .pf-item {border-left-color:#0A3870;}
.pf-4col .pf-s3 .pf-item {border-left-color:#0E4F96;}
.pf-4col .pf-s4 .pf-item {border-left-color:#0A3870;}
*/

/* ===== 절차4 전용 그리드 (개발/운영 분리) ===== */
.pf4-grid {
	display:grid;
	grid-template-columns:52px 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
	gap:6px 0;
	width:100%;
}

/* 절차4 PDCA 위치 재정의 */
.pf4-grid .pdca-p  {grid-column:2;   grid-row:1;}
.pf4-grid .pdca-d  {grid-column:4/7; grid-row:1;}
.pf4-grid .pdca-c  {grid-column:8;   grid-row:1;}
.pf4-grid .pdca-a  {grid-column:10;  grid-row:1;}

/* 절차4 화살표 (D내부 없음) */
.pf4-a1, .pf4-a3, .pf4-a4 {
	grid-row:2; display:flex;
	align-items:flex-start; justify-content:center; align-items:center;
}
.pf4-a1::after, .pf4-a3::after, .pf4-a4::after {
	content:''; width:0; height:0;
	border-top:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid;
}
.pf4-a1 {grid-column:3;} .pf4-a1::after {border-left-color:#0BB0EA;}
.pf4-a3 {grid-column:7;} .pf4-a3::after {border-left-color:#1460B8;}
.pf4-a4 {grid-column:9;} .pf4-a4::after {border-left-color:#0E4F96;}

/* 절차4 헤더 */
.pf4-head-blank {grid-column:1; grid-row:2;}
.pf4-head {
	padding:12px 8px; text-align:center;
	font-size:14px; font-weight:700; color:#fff; line-height:1.4;
	border-radius:6px 6px 0 0; word-break:keep-all; grid-row:2;
}
.pf4-h1 {grid-column:2;  background:#0BB0EA;}
.pf4-h2 {grid-column:4;  background:#3695DF;}
.pf4-h3 {grid-column:6;  background:#1460B8;}
.pf4-h4 {grid-column:8;  background:#0E4F96;}
.pf4-h5 {grid-column:10; background:#0A3870;}

/* 개발/운영 행 레이블 */
.pf4-row-label {
	display:flex; align-items:center; justify-content:center;
	font-size:14px; font-weight:700; color:#fff;
	border-radius:4px 0 0 4px; padding:6px 4px;
	writing-mode:vertical-rl; text-orientation:upright; letter-spacing:2px;
}
.pf4-label-d {grid-column:1; grid-row:3; background:#3695DF;}
.pf4-label-o {grid-column:1; grid-row:4; background:#0E4F96;}

/* 절차4 콘텐츠 셀 */
.pf4-cell {
	border:1px solid #cde0f2; border-top:1px solid #cde0f2;
	padding:10px 8px; display:flex; flex-direction:column; gap:6px;
}
.pf4-cell-d {grid-row:3; background:#eef7ff; border-radius:0; border-bottom:none;}
.pf4-cell-o {grid-row:4; background:#edf0f8; border-top:2px dashed #b8cde8; border-radius:0 0 6px 6px;}

/* 절차4 컬럼 위치 */
.pf4-c1 {grid-column:2;}
.pf4-c2 {grid-column:4;}
.pf4-c3 {grid-column:6;}
.pf4-c4 {grid-column:8;}
.pf4-c5 {grid-column:10;}

/* 절차4 pf-item 색상 */
.pf4-c1 .pf-item::after {background:#0BB0EA;}
.pf4-c2 .pf-item::after {background:#3695DF;}
.pf4-c3 .pf-item::after {background:#1460B8;}
.pf4-c4 .pf-item::after {background:#0E4F96;}
.pf4-c5 .pf-item::after {background:#0A3870;}
.pf4-cell-d .pf-item::after {background:#0E4F96;}
.pf4-cell-o .pf-item::after {background:#0A3870;}
/* 
.pf4-c1 .pf-item {border-color:#0BB0EA;}
.pf4-c2 .pf-item {border-color:#3695DF;}
.pf4-c3 .pf-item {border-color:#1460B8;}
.pf4-c4 .pf-item {border-color:#0E4F96;}
.pf4-c5 .pf-item {border-color:#0A3870;}
.pf4-cell-d .pf-item {background:#f6fbff;}
.pf4-cell-o .pf-item {background:#f3f5fb;}
 */

/* 절차 구분 제목 */
.pf-title {
	font-size:15px; font-weight:700; color:#1460B8;
	margin-top:36px; padding:10px 0 10px 14px;
	border-left:4px solid #1460B8; line-height:1;
}

/* ===== 반응형 ===== */
@media all and (max-width:767px) {
	.pf-container,
	.pf-4col {
		display:flex; flex-direction:column; gap:10px;
	}
	.pdca-label {display:none;}
	.pf-arr {display:none;}
	.pf-step:not(:last-child)::after {
		content:''; display:block; margin:10px auto 0;
		width:0; height:0;
		border-left:10px solid transparent;
		border-right:10px solid transparent;
		border-top:10px solid;
	}
	.pf-s1:not(:last-child)::after {border-top-color:#0BB0EA;}
	.pf-s2:not(:last-child)::after {border-top-color:#3695DF;}
	.pf-s3:not(:last-child)::after {border-top-color:#1460B8;}
	.pf-s4:not(:last-child)::after {border-top-color:#0E4F96;}
	.pf-4col .pf-s3:not(:last-child)::after {border-top-color:#0E4F96;}
	.pf-4col .pf-s4:not(:last-child)::after {border-top-color:#0A3870;}
	.pf-head {
		border-radius:6px 6px 0 0; font-size:16px;
		padding:11px 12px; display:flex; align-items:center; gap:8px;
	}
	.pf-head::before {
		font-size:14px; font-weight:900; padding:3px 8px;
		border-radius:4px; background:rgba(255,255,255,.3);
		white-space:nowrap; flex-shrink:0;
	}
	.pf-s1 .pf-head::before {content:'P';}
	.pf-s2 .pf-head::before {content:'D';}
	.pf-s3 .pf-head::before {content:'D';}
	.pf-s4 .pf-head::before {content:'C';}
	.pf-s5 .pf-head::before {content:'A';}
	.pf-4col .pf-s1 .pf-head::before {content:'P';}
	.pf-4col .pf-s2 .pf-head::before {content:'D';}
	.pf-4col .pf-s3 .pf-head::before {content:'C';}
	.pf-4col .pf-s4 .pf-head::before {content:'A';}
	/* .pf-body {flex-direction:row; flex-wrap:wrap;} */
	.pf-item {font-size:14px; flex:1; min-width:130px;}
	.pf-title {margin-top:28px;}

	/* ===== 절차4 모바일: 단계별 묶음 표시 ===== */
	.pf4-grid {
		display:flex; flex-wrap:wrap; gap:0; width:100%;
	}
	.pf4-grid .pdca-label,
	.pf4-head-blank,
	.pf4-a1, .pf4-a3, .pf4-a4,
	.pf4-row-label {display:none;}

	/* 헤더 전체 너비 + PDCA 뱃지 */
	.pf4-head {
		width:100%; box-sizing:border-box;
		display:flex; align-items:center; gap:8px;
		font-size:15px; padding:11px 12px;
		border-radius:6px 6px 0 0;
	}
	.pf4-head::before {
		font-size:12px; font-weight:900; padding:3px 8px;
		border-radius:4px; background:rgba(255,255,255,.3);
		white-space:nowrap; flex-shrink:0;
	}
	.pf4-h1::before {content:'P';}
	.pf4-h2::before, .pf4-h3::before {content:'D';}
	.pf4-h4::before {content:'C';}
	.pf4-h5::before {content:'A';}

	/* 셀 전체 너비 + 세로 배치 */
	.pf4-cell {
		width:100%; box-sizing:border-box;
		flex-direction:column;
		border-top:1px solid #cde0f2;
	}
	.pf4-cell .pf-item {min-width:unset; flex:none;}

	/* 개발/운영 뱃지 */
	.pf4-cell::before {
		display:inline-block; align-self:flex-start;
		font-size:12px; font-weight:700; color:#fff;
		padding:3px 10px; border-radius:3px; margin-bottom:4px;
	}
	.pf4-cell-d::before {content:'개발'; background:#3695DF;}
	.pf4-cell-o::before {content:'운영'; background:#0E4F96;}

	/* 단계 간 구분 화살표 */
	.pf4-cell-o:not(.pf4-c5) {
		border-radius:0 0 6px 6px;
		margin-bottom:30px;
		position:relative;
	}
	.pf4-cell-o:not(.pf4-c5)::after {
		content:'';
		position:absolute; bottom:-20px; left:50%;
		transform:translateX(-50%);
		width:0; height:0;
		border-left:10px solid transparent;
		border-right:10px solid transparent;
		border-top:10px solid #aaa;
	}
	.pf4-cell-o.pf4-c5 {border-radius:0 0 6px 6px;}

	/* 단계별 순서 묶음 */
	.pf4-h1            {order:10;}
	.pf4-cell-d.pf4-c1 {order:11;}
	.pf4-cell-o.pf4-c1 {order:12;}

	.pf4-h2            {order:20;}
	.pf4-cell-d.pf4-c2 {order:21;}
	.pf4-cell-o.pf4-c2 {order:22;}

	.pf4-h3            {order:30;}
	.pf4-cell-d.pf4-c3 {order:31;}
	.pf4-cell-o.pf4-c3 {order:32;}

	.pf4-h4            {order:40;}
	.pf4-cell-d.pf4-c4 {order:41;}
	.pf4-cell-o.pf4-c4 {order:42;}

	.pf4-h5            {order:50;}
	.pf4-cell-d.pf4-c5 {order:51;}
	.pf4-cell-o.pf4-c5 {order:52;}
}

/* 절차4 결과보고: 개발/운영 통합 */
.pf4-cell-d.pf4-c5 {
	grid-row:3/5;
	border-radius:0 0 6px 6px;
	border-bottom:1px solid #cde0f2;
	background:#f8fbff;
}
.pf4-cell-d.pf4-c5::before {
	display:none;
}
.pf4-cell-d.pf4-c5 .pf-item {
	border-color:#0A3870;
	background:#fff;
}

/* 모바일: 결과보고 통합셀 화살표 제거 */
@media all and (max-width:767px) {
	.pf4-cell-d.pf4-c5 {
		border-radius:0 0 6px 6px;
		margin-bottom:0;
	}
	.pf4-cell-d.pf4-c5::after {
		display:none;
	}
}