@charset "utf-8";

/* 화면낭독기 사용자용 */
.sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* Skip navigation */
.skip_navi {display: block; position: absolute; left: -9999px; top: -9999px; width: 100%; color: #000; text-align: center;}
.skip_navi:focus {position: static;}

/*공통*/
.inner {max-width: 152rem; width: 90%; margin: 0 auto;}
.inner-1200 {max-width: 120rem; margin: 0 auto; }
.inner-1000 {max-width: 100rem; margin: 0 auto; }
.inner-800 {max-width: 80rem; margin: 0 auto;}
.inner-650 {max-width: 65rem; margin: 0 auto; }
.butn-disabled { opacity: 0.5; cursor: not-allowed; }

/* Button */
.butn {display: flex; align-items: center; justify-content: center; font-size: 1.5rem; border-radius: 6px; line-height: 1em;}
.butn.round {border-radius: 999px;}
.butn.border {color: #fff; border: 1px solid rgba(255, 255, 255, 0.40); padding: 1rem 3rem;}
.butn.darkblueBorder {color: var(--darkblue); background: #fff; box-shadow: inset 0 0 0 1px var(--darkblue)}
.butn.blackBorder {color: #231F20; background: #fff; box-shadow: inset 0 0 0 1px #666;}
.butn.greyBorder {color: #222; background: #fff; box-shadow: inset 0 0 0 1px #D0D2DD;}
.butn.tab-butn {padding: 1.9rem 4rem; background: var(--darkblue); color: #fff; font-size: 1.8rem; font-weight: 600;}
.butn.tab-butn.border {border: 1px solid #e4e4e4;}
.butn.default {font-size: 1.6rem; padding: 1.8rem 2.5rem; width: 15rem;}
.butn.sm {padding: 1rem 2rem; font-size: 1.5rem; }
.butn.butn-icon {column-gap: .5rem;}
.butn.blue {background: var(--blue); color: #fff;}
.butn.darkblue {background: var(--darkblue); color: #fff;}
.butn.green {background: var(--green); color: #fff;}
.butn.grey {background: #E7E7E7; color: #666;}
.butn.close {cursor: not-allowed;}
.butn.butn-download {column-gap: 5px;}
.butn.butn-download img {height: 1.6rem;}
.butn.butn-download.darkblue img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%)}
.butn-status.--apply {background: #DBF5FF; color: #00AEEF;}
.butn-status.--complete, .butn-status.--wait {background: #FFDDDF; color: #F53B3B;}
.butn-status.--progress {background: #D8F4E3; color: #009B3A;}
.butn-status.--expected {background: #E9E9E9; color: #666;}
.butn-status.--red {background: #FFDDDF; color: #F53B3B;}
.butn-status.--blue {background: #DBF5FF; color: #00AEEF;}
.butn-status.--green {background: #D8F4E3; color: #009B3A;}
.butn-status.--grey {background: #E9E9E9; color: #666;}

.chip {display: flex; align-items: center; justify-content: center; width: 6.5rem; padding: 0.6rem 0; border-radius: 999px; font-size: 1.5rem; background: var(--darkblue); color: #fff;}
.chip.grey {background: rgba(156, 156, 156, 0.20); color: #999999;}

/*폼 스타일*/
.form-wrap {display: flex; flex-direction: column; align-items: center; row-gap: 2rem;}
.form-wrap form {width: 100%; display: flex; flex-direction: column; row-gap: 3rem;}
.form-row--flex {display: flex; column-gap: 1rem;}
.form-row .input-group {display: flex; flex-direction: column; row-gap: 1rem; flex: 1;}
.form-row .input-group.input-group--flex {flex-direction: row; align-items: center; column-gap: 1rem;}
.form-row--file .attach {width: 10rem; align-self: stretch;}
.form-row--file .butn {height: 100%;}
.input-item {border: 1px solid #e4e4e4; background: #fff; border-radius: 6px; padding: 0 1.5rem; width: 100%;}
.input-item.round {border-radius: 999px;}
.input-item.focus {border-color: var(--darkblue);}
.input-item.number {width: 250px;}
.input-item input, .input-item select {padding: 0.9rem 0; width: 100%; line-height: 1.2em; height: 2.5rem; box-sizing: content-box;}
.input-item select {line-height: normal;}
.input-item input {font-size: 1.4rem;}
.input-item input:focus-visible {outline: none;}
.input-item textarea {border: 0; padding: 1rem 0; width: 100%; min-height: 20rem;}
.input-item textarea:focus-visible {outline: none;}
.input-item.input-readonly, .input-item.input-readonly input {background: #EDEDED ;}
.input-item.input-readonly textarea {background: #EDEDED;}
.input-item.input-readonly input {}
.input-item.input-readonly.select {width: 25.4%;}
.input-item.input-readonly select {background: #EDEDED ; pointer-events: none;}
.input-item.select {display: flex; align-items: center; padding: 0; position: relative;}
.input-item.select::after {content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; background: url(../images/icon_select.svg) no-repeat 50% 50% / contain;
position: absolute; top: 50%; transform: translateY(-50%); right: 1.5rem; pointer-events: none;}
.input-item select {font-size: 1.4rem; padding: 0.9rem 1.5rem; width: 100%; border-radius: 6px;}
.input-item select:focus-visible {outline: none;}
.input-wrap button {align-self: stretch;}
.input-wrap .upload-name {display: -webkit-box; text-overflow: ellipsis; overflow: hidden !important; width: 95%;}
.form-wrap input[type="file"] {position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0;}
.form-wrap input[type="checkbox"], .article-search input[type="checkbox"] {position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; outline: 0; z-index: -1; overflow: hidden;}
.form-wrap .label {font-weight: 700;}
.form-wrap .aster {font-size: 2rem; color: #f53b3b; font-weight: inherit; font-style: normal;}
.form-wrap .label-guide {display: block; font-size: 1.3rem;}
.form-wrap .input-wrap {display: flex; align-items: center; column-gap: 0.9rem;}
.form-wrap .input-guide {display: none; align-items: center; column-gap: 5px; font-size: 1.4rem; color: #f53b3b; margin-top: 1rem;}
.form-wrap .input-warning {font-size: 1.4rem; color: #f53b3b; margin-top: 1rem;}
.form-wrap .input-guide::before {content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; background: url('../images/sub/icon_redExclam.svg') no-repeat 50% 50% / contain;}
.form-wrap .input-tip {font-size: 1.4rem; color: #666;}
.form-wrap .term-text {padding: 2.5rem 1rem; max-height: 25rem; overflow-y: auto; display: flex; flex-direction: column; row-gap: 3rem;}
.form-wrap .term-text .sub-row {display: flex; flex-direction: column; row-gap: 1rem;}
.form-wrap .term-text .box-title {font-size: 1.6rem; }
.form-wrap .term-text .sub-row p {font-size: 1.5rem; line-height: 1.6em;}
.form-wrap .term-text .sub-row ul {margin-top: 0.5rem; margin-left: 1.5rem; }
.form-wrap .term-text .sub-row ul:not(:last-child) {margin-bottom: 1.5rem;}
.form-wrap .term-text .sub-row li {font-size: 1.4rem; line-height: 1.6em; padding-left: 1rem; position: relative;}
.form-wrap .term-text .sub-row li::before {content: "-"; display: inline-block; font-size: inherit; position: absolute; left: 0;}
.checkbox_wrap {display: flex; align-items: center; column-gap: 2rem;}
.checkbox {position: relative; text-align: left; font-size: 1.6rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.checkbox label {display: flex; align-items: center; column-gap: 1rem;}
.checkbox label span {display: flex; align-items: flex-start; line-height: 1.8rem; font-size: 1.6rem;}
.checkbox label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 3px;}
.checkbox input:checked ~ label em {border-color: var(--darkblue); background-color: var(--darkblue); background-image: url('../images/sub/icon_checkbox.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 12px 10px;}
.radio_wrap {display: flex; align-items: center; column-gap: 2rem;}
.radio {position: relative; text-align: left; font-size: 1.6rem; color: #222; line-height: 1em; cursor: pointer; line-height: 1.6em;}
.radio label {display: flex; align-items: center; column-gap: 1rem;}
.radio label span {display: flex; align-items: flex-start; line-height: 1.8rem; font-size: 1.6rem;}
.radio label em {display: inline-block; width: 1.8rem; height: 1.8rem; background: #fff; border: 1px solid #D9D9D9; border-radius: 50px; position: relative;}
.radio label em::after {content: ""; display: inline-block; width: 1rem; height: 1rem; border-radius: 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;}
.radio input:checked ~ label em {border-color: var(--darkblue); }
.radio input:checked ~ label em::after {background-color: var(--darkblue); }

/* datepicker */
/*.ui-datepicker.ui-widget {width: 35rem; padding: 2.5rem 2rem; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.06); border: 1px solid #e4e4e4;}*/
.ui-datepicker.ui-widget {padding: 0; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.06); border: 1px solid #e4e4e4;}
/*.ui-datepicker .ui-datepicker-header {background: #fff !important; border: 0 !important;}*/
.ui-datepicker .ui-datepicker-header {background: #f4f6f9 !important; border: 0 !important;}
.ui-datepicker .ui-datepicker-title {display: flex; align-items: center; justify-content: center; column-gap: 1rem; }
.ui-datepicker .ui-widget-header .ui-icon {background: url('../images/icon_calendar_arrow.svg') no-repeat 50% 50% / contain !important; width: 2rem !important; height: 2rem !important;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 50% !important;}
.ui-datepicker .ui-datepicker-prev {transform: translateY(-50%) !important;}
.ui-datepicker .ui-datepicker-next {transform: translateY(-50%) rotate(180deg) !important;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {margin-left: 0 !important; margin-top: 0 !important; transform: translate(-50%, -50%);}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width: 9rem !important; border-radius: 6px !important;;}
/*.ui-datepicker .ui-datepicker-title select {height: 3.7rem; padding: 0.6rem 1.5rem; border: 1px solid #E4E4E4; font-size: 1.3rem !important;}*/
.ui-datepicker .ui-datepicker-title select {height: 3.7rem; text-align: center; border: 1px solid #E4E4E4; font-size: 1.5rem !important;}
.ui-state-default,
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {background: #fff !important; border: 0 !important; font-size: 1.3rem !important; width: 3.8rem; height: 3.8rem;}
.ui-datepicker td span, .ui-datepicker td a {text-align: center !important; display: flex !important; align-items: center; justify-content: center; margin: 0 auto;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {border: 0 !important; background: var(--blue) !important; border-radius: 50px !important; color: #fff !important;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {background: #fff !important;; border: 0 !important;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada !important; }
.ui-state-default.ui-state-hover {background: var(--blue); border-radius: 999px;}
.ui-datepicker .ui-datepicker-buttonpane {margin: 0!important; border: 0;}
.ui-datepicker .ui-datepicker-buttonpane button {margin: 0!important;}

/*이미지 스타일*/
.invert {filter: invert(1) brightness(2);}

/*테이블 스타일*/
.table-wrap table {table-layout: auto;}
.table-wrap table th, .table-wrap table td {text-align: center;  padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.9rem; padding-bottom: 1.9rem;}
.table-wrap table th {background: #F3F6F9; font-size: 1.6rem; }
.table-wrap table tbody tr {border-bottom: 1px solid #E8E9EB;}
.table-wrap table td {}
.table-wrap table .chip {margin: 0 auto;}
.table-wrap.round table {min-width: unset;}

/*테이블 페이저*/
.pagination ul {display: flex; align-items: center; justify-content: center; column-gap: 4rem;}
.pagination li {}
.pagination a {color: #8C8C8C; font-size: 1.4rem; }
.pagination .current strong {color: #000; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;}
.pagination .prev img, .pagination .next img {width: 0.8rem; height: 1.3rem;}
.pagination .start img, .pagination .end img {width: 1.1rem; height: 1.3rem;}
.pagination img {display: block;}
.pagination .next img, .pagination .end img {transform: rotate(180deg);}

/*리스트 스타일*/
.dot-list li {position: relative; padding-left: 1.2rem;}
.dot-list li::before {content: ""; display: inline-block; width: 3px; height: 3px; background: #666; border-radius: 999px; position: absolute; left: 0; line-height: inherit;}
.box-list {display: flex; flex-wrap: wrap; border-left: 1px solid #E8E9EB;}
.box-list li {width: 25%;
  width: 25%;
  padding: 1.6rem 0.8rem;
  box-sizing: border-box;
  box-shadow: inset -1px -1px 0 0 #E8E9EB;}
 .box-list li:nth-child(-n+4) {border-top: 1px solid #E8E9EB;}

/* Modal */
.modal {display: none; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0;
visibility: hidden; transition: visibility 0s linear 0.25s, opacity 0.25s 0s; z-index: 99;}
.modal.open {display: flex; opacity: 1; visibility: visible; transition: visibility 0s linear 0s, opacity 0.25s 0s;}
.modal-wrap {margin: 0 auto; max-width: 30rem; width: 95%; align-self: center; padding: 3rem 2rem; border-radius: 1rem; overflow: hidden; z-index: 5; position: relative; text-align: center;}
.modal-wrap.wide {max-width: 40rem;}
.modal-wrap.white-box {background-color: #fff; box-shadow: 0 0 5px 0 rgba(0,0,0,0.4)}
.modal img {width: 100%;}
.modal .modal-close {display: block; cursor: pointer;position: absolute; right: 1.5rem; top: 1.5rem; filter: invert(0.55); width: 1.8rem; height: 1.8rem;}
.modal .modal-content {display: flex; flex-direction: column; align-items: center; row-gap: 1rem;}
.modal .modal-content--text {display: flex; flex-direction: column; row-gap: 1rem; padding: 1rem 0 2rem;}
.modal .modal-content--text p {font-size: 1.4rem; line-height: 1.4em;}
.modal .modal-content--text strong {display: block; font-size: 1.6rem; margin-bottom: 1rem;}
.modal .modal-buttons {display: flex; align-items: center; column-gap: 0.5rem;}
.modal .butn {width: 10rem; padding: 1rem 1.5rem;}

.modal.open .white_box {animation:scaleani 0.3s ease;}

.jconfirm .modal {display: flex; opacity: 1; visibility: visible;}
/*.jconfirm .jconfirm-holder {max-width: 50rem; width: 95%; align-self: center; padding: 3rem 2rem; border-radius: 1rem; overflow: hidden; margin: 0 auto;}*/
.jconfirm .jconfirm-box {padding: 3rem 2rem !important; border-radius: 1rem !important;}
.jconfirm .jconfirm-title-c {display: none !important;}
.jconfirm .jconfirm-box div.jconfirm-content-pane {margin-bottom: 0 !important;}
.jconfirm .file-upload-content {display: flex; flex-direction: column; row-gap: 1rem;}
.jconfirm .modal-content--text {display: flex; flex-direction: column; row-gap: 1rem; padding: 1rem 0 2rem; text-align: center;}
.jconfirm .modal-content--text p {font-size: 1.4rem; line-height: 1.4em;}
.jconfirm .modal-content--text strong {display: block; font-size: 1.6rem; margin-bottom: 1rem;}
.jconfirm .modal-content--text .text-blue {font-size: 1.8rem;}
.jconfirm .modal-content--text .text-red {color: #F53B3B;}
.jconfirm .input-wrap--file .input-item {position: relative;}
.jconfirm .input-wrap--file .file-delete {position: absolute; top: 50%; right: 1.5rem; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; filter: invert(0.7);}
.jconfirm .input-wrap--file > div {align-self: stretch;}
.jconfirm .input-wrap--file .butn {height: 100%; cursor: pointer; width: 10rem; padding: 0;}
.jconfirm .jconfirm-buttons {display: flex; align-items: center; column-gap: 0.5rem; justify-content: center; width: 100%; padding-bottom: 0 !important;}
.jconfirm .jconfirm-box .jconfirm-buttons>button {margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 6px !important;}
.jconfirm .jconfirm-buttons .butn {width: 10rem; padding: 1rem 1.5rem !important; font-weight: 400 !important; font-size: 1.5rem !important; line-height: 1em !important;}

/* Box */
.whiteBox {background: #fff;}
.borderRadius5 {border-radius: 5px;}
.borderRadius10 {border-radius: 10px;}

/* Table */
.table-wrap .table {border-top: 3px solid #231f20;}
/*.table-wrap .table-row--head, .table-wrap .table-row--link {display: flex; width: 100%;}*/
.table-wrap .table-row--link {cursor: pointer;}
.table-wrap .table-row--head .table-cell {background: #F3F6F9; font-size: 1.6rem; font-weight: 700; padding-top: 2.5rem; padding-bottom: 2.5rem;}
.table-wrap .table-row--body {border-bottom: 1px solid #E8E9EB;}
.table-wrap .table-cell {display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 1.9rem; padding-bottom: 1.9rem;}

@media (hover: hover) {
	/* Button */
	.butn.blue:hover {background: var(--darkblue);}
	.butn.darkblue:hover {background: var(--blue);}
	.butn.grey:hover {background: #231F20; color: #fff;}
	.butn.green:hover {background: #084226;}
	.butn.border:hover {background: rgba(255, 255, 255, 0.80); color: #231F20;}
	.butn.darkblueBorder:not(.butn-status):hover {background: var(--darkblue); color: #fff;}
	.butn.blackBorder:hover {background: #231F20; color: #fff;}
	.butn.greyBorder:hover {box-shadow: inset 0 0 0 1px var(--blue); background: var(--blue); color: #fff;}
	.butn.butn-download:hover img {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);}
	
	.table-wrap .table-row--link:hover {background: #F9FAFB;}
	
	.dot-list a:hover {color: var(--blue);}
}

@media (max-width: 1280px) {
	.table-wrap:not(.round) {overflow-x: auto; width: 100%;}
	.table-wrap table {flex-wrap: nowrap; min-width: 115rem;}
	.table-wrap td {white-space: nowrap; padding-left: 1.2rem; padding-right: 1.2rem;}
}

@media (max-width: 767px) {
	.butn.default {padding: 1.8rem 2.2rem;}
	
	.input-item {padding: 0 1rem;}
	.input-item input, .input-item select {padding: 1.3rem 0; font-size: 1.55rem;}
	.input-item select {padding: 1.2rem 1rem;}
	.input-item.input-readonly.select {width: 38%;}
	.input-wrap--email .input-item.input-readonly {flex: 1;}
	
	.table-wrap .table {border-width: 2px;}
	.table-wrap table td {padding-top: 1.8rem; padding-bottom: 1.8rem;}
	
	.pagination ul {column-gap: 2.5rem;}
	
	.ui-datepicker.ui-widget {width: 31rem;}
	.ui-datepicker.ui-widget {padding: 2rem 1.5rem;}
}

@media (max-width: 480px) {
	.butn.default {padding: 1.6rem 2.2rem;}
}

/* Board */
    /* Condition */
    /*.condition {padding: 25px; border: 1px solid #dde2e5; border-radius: 10px; font-size: 0; text-align: center;}*/
    .condition .item + .item {margin-left: 20px;}

    .condition2 {padding: 25px; border: 1px solid #dde2e5; border-radius: 10px; text-align: center;}
    .condition2 .item + .item {margin-left: 20px;}
    .condition2 .lb {display: inline-block; height: 46px; line-height: 46px; vertical-align: top;}

    /* List */
    .board_list {border-top: 2px solid #222;}
    .board_list table {font-size: 16px; font-weight: 300;}
    .board_list th {padding: 23px 0; border-bottom: 1px solid #888; color: #000; font-weight: 400; text-align: center;}
    .board_list td {padding: 16px 0 19px 0; border-bottom: 1px solid #dde2e5; color: #666; text-align: center;}
    .board_list td.al {padding: 16px 10px 19px 10px; text-align: left;}
    .board_list td .lnk {color: #222;}
    .board_list td .lnk:hover {color: #169bd5; text-decoration: underline;}

    .board_list2 {border-top: 2px solid #222;}
    .board_list2 table {font-size: 16px; font-weight: 300;}
    .board_list2 th {padding: 15px 0; border-bottom: 1px solid #888; color: #000; text-align: center;}
    .board_list2 td {padding: 13px 0 16px 0; border-bottom: 1px solid #dde2e5; color: #666; text-align: center;}
    .board_list2 td.al {padding: 13px 10px 16px 10px; text-align: left;}
    .board_list2 td .lnk {color: #222;}
    .board_list2 td .lnk:hover {color: #169bd5; text-decoration: underline;}

    .paging {font-size: 0; text-align: center;}
    .paging .btn {margin-top: 0;}
    .paging .btn a {width: 42px; height: 42px; border: 1px solid #dde2e5; border-radius: 5px; font-size: 0;}
    .board_wrap .paging > ul li a.first {background: url(../images/ico_paging_button_db.png) no-repeat center #f3f3f3; background-size: 14px 15px;}
    .board_wrap .paging > ul li a.prev {margin-right: 20px; background: url(../images/ico_paging_button.png) no-repeat center #f3f3f3;}
    .board_wrap .paging > ul li a.next {margin-left: 20px; background: url(../images/ico_paging_button.png) no-repeat center #f3f3f3; transform: rotate(180deg);}
    .board_wrap .paging > ul li a.last {background: url(../images/ico_paging_button_db.png) no-repeat center #f3f3f3; transform: rotate(180deg); background-size: 14px 15px;}
    .paging > ul {display: inline-block; vertical-align: top;}
    .paging > ul li {display: inline-block; margin-top: 4px; font-size: 16px; font-weight: 300; vertical-align: top;}
    .paging > ul li + li {margin-left: 15px;}
    .paging > ul li a,
    .paging > ul li strong {display: block; width: 34px; height: 34px; font-weight: 300; line-height: 34px; text-align: center;}
    .paging > ul li a {color: #888;}
    .paging > ul li strong {border-radius: 50%; color: #fff; background: #222;}

    .board_list_top {display: table; width: 100%;}
    .board_list_top .left_col {display: table-cell; width: 50%; vertical-align: top;}
    .board_list_top .right_col {display: table-cell; width: 50%; font-size: 0; text-align: right; vertical-align: top;}
    .board_list_top .right_col .btn + .btn {margin-left: 10px;}
    .list_count {padding-top: 26px; color: #000; font-size: 16px; font-weight: 300;}
    .list_count::before {content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #222; vertical-align: 3px;}
    .list_count strong {margin-left: 5px; color: #0465be; font-weight: 500;}

    /* View */
    .board_view {border-top: 2px solid #222;}
    .board_view_top {border-bottom: 1px solid #dde2e5;}
    .board_view_top .tit {padding: 21px; border-bottom: 1px solid #888; color: #222; font-size: 18px; font-weight: 500; text-align: center;}
    .board_view_top .info {font-size: 0;}
    .board_view_top .info dl,
    .board_view_top .info dt,
    .board_view_top .info dd {display: inline-block; font-size: 16px; vertical-align: top;}
    .board_view_top .info dl {padding: 22px 0;}
    .board_view_top .info dl:nth-child(1) {margin-right: 185px;}
    .board_view_top .info dl:nth-child(2) {margin-right: 145px;}
    .board_view_top .info dt {width: 100px; color: #000; text-align: center;}
    .board_view_top .info dd {color: #666; font-weight: 300;}

    .board_article {border-bottom: 1px solid #dde2e5;}
    .board_article textarea {width: 100%; min-height: 350px; padding: 30px 29px; border: 0; color: #666; font-size: 16px; font-weight: 300; line-height: 30px; resize: none;}

    .board_article_faq {position: relative; padding-left: 74px; border-bottom: 1px solid #dde2e5;}
    .board_article_faq .a {display: block; position: absolute; left: 30px; top: 30px; width: 32px; height: 32px; font-size: 0; background: url(../images/ico_a.png) no-repeat;}
    .board_article_faq .q {display: block; position: absolute; left: 30px; top: 30px; width: 32px; height: 32px; font-size: 0; background: url(../images/ico_q.png) no-repeat;}
    .board_article_faq textarea {width: 100%; min-height: 350px; padding: 30px 29px 30px 0; border: 0; color: #666; font-size: 16px; font-weight: 300; line-height: 30px; resize: none;}

    .board_article_faq.reg {padding: 12px 12px 12px 102px;}
    .board_article_faq.reg textarea {padding: 19px; border: 1px solid #dde2e5; border-radius: 5px; color: #222; font-size: 16px;}

    .board_faq_top {display: table; width: 100%; table-layout: fixed; border-bottom: 1px solid #dde2e5;}
    .board_faq_top > * {display: table-cell; width: auto;}
    .board_faq_top dt {width: 102px; padding-left: 12px; color: #000; font-weight: 500;}
    .board_faq_top dt .req {display: inline-block; width: 7px; height: 7px; font-size: 0; background: url(../images/ico_req.png) no-repeat; vertical-align: 15px;}
    .board_faq_top dd {padding: 12px 12px 12px 0;}

    .board_attach dl {padding: 17px 0; border-bottom: 1px solid #dde2e5; font-size: 16px; font-weight: 300;}
    .board_attach dl > * {float: left;}
    .board_attach dl::after {content: ""; display: block; clear: both;}
    .board_attach dl dt {width: 102px; padding-left: 30px; color: #000;}
    .board_attach dl dd > span {display: block;}
    .board_attach dl dd > span + span {margin-top: 5px;}
    .board_attach dl dd > span > * {vertical-align: top;}
    .board_attach dl dd a {display: inline-block; padding-left: 29px; color: #169bd5; vertical-align: top; background: url(../images/ico_file.png) no-repeat;}
    .board_attach dl dd a:hover {text-decoration: underline;}
    .board_attach dl dd a span {color: #666;}

    .board_attach.faqreg dt {padding-left: 12px; font-weight: 500;}
    .board_attach dd input[type=file] + span {margin-top: 10px;}
    .board_attach span input[type=button] {display: inline-block; width: 18px; height: 18px; margin-left: 10px; border: 0; font-size: 0; background: url(../images/ico_delete.png) no-repeat; background-size: contain; vertical-align: -2px; cursor: pointer;}

    .board_attach_img {padding: 40px 30px; border-bottom: 1px solid #dde2e5;}
    .board_attach_img img {max-width: 100%;}
    .board_attach_img br + img {margin-top: 10px;}

    .board_attach2 > span {display: block; color: #666;}
    .board_attach2 > span + span {margin-top: 5px;}
    .board_attach2 > span a {display: inline-block; padding-left: 29px; color: #169bd5; vertical-align: top; background: url(../images/ico_file.png) no-repeat;}
    .board_attach2 input[type=button] {display: inline-block; width: 18px; height: 18px; margin-left: 10px; border: 0; font-size: 0; background: url(../images/ico_delete.png) no-repeat; background-size: contain; vertical-align: 6px; cursor: pointer;}

    .board_view_bot {position: relative;}
    .board_view_bot .left_col {font-size: 0;}
    .board_view_bot .left_col .btn + .btn {margin-left: 10px;}
    .board_view_bot .right_col {position: absolute; right: 0; top: 0; font-size: 0;}
    .board_view_bot .right_col .btn + .btn {margin-left: 10px;}

    .board_view2 {border-top: 2px solid #222;}
    .board_view2 td {padding: 12px 20px; border-bottom: 1px solid #dde2e5; color: #666; font-size: 1.4rem;}
    .board_view2 .lb {padding: 12px 30px; color: #000; background: #f5f6f7; font-size: 1.4rem;}
    .board_view2 .lb .req {display: inline-block; width: 7px; height: 7px; font-size: 0; background: url(../images/ico_req.png) no-repeat; vertical-align: 15px;}
    .board_view2 .lb .min {display: inline-block; padding: 10.5px 0;}
    .board_view2.txtonly td {padding: 23px 20px;}
    .board_view2 .lnk {color: #000;}

    .board_view3 {border-top: 2px solid #222;}
    .board_view3 td {padding: 20px 0; border-bottom: 1px dashed #dde2e5; color: #666; font-size: 16px; font-weight: 300;}
    .board_view3 tr:last-child td {border-bottom-style: solid;}
    .board_view3 .lb {padding: 21px 0; border-bottom: 1px solid #222; color: #222; font-size: 18px; font-weight: 300; text-align: center; background: #f5f6f7;}
    .board_view3 .lb .req {display: inline-block; width: 7px; height: 7px; font-size: 0; background: url(../images/ico_req.png) no-repeat; vertical-align: 15px;}
    .board_view3 .writer {padding-left: 30px; color: #222; font-weight: 400;}

    .board_view4 {border-top: 2px solid #222;}
    .board_view4 td {padding: 23px 30px; border-bottom: 1px solid #dde2e5;}
    .board_view4 td .f_rdo + .f_rdo {margin-left: 20px;}
    .board_view4 .lb {background: #f5f6f7;}

    .board_top {position: relative;}
    .board_top .right_col {position: absolute; right: 0; top: 0;}

    .list_cnt {display: inline-block; padding-top: 12px; color: #222; font-size: 16xpx; font-weight: 300; vertical-align: top;}
    .list_cnt strong {color: #169bd5; font-weight: 500;}


/* Message */
    .msg_1 {padding: 32px 40px; border-top: 2px solid #dde2e5; border-radius: 0 0 10px 10px; color: #454545; font-size: 20px; font-weight: 300; line-height: 30px; letter-spacing: -1px; background: #f2f2f2;}


/* Form */
    /* for IE10 */
    input {background: transparent; border: 0;}
    input::placeholder {color: #aaa; opacity: 1; /* 파이어폭스에서 뿌옇게 나오는 현상을 방지하기 위한 css */}
    input::-webkit-input-placeholder {color: #aaa;}
    /* IE */
    input:-ms-input-placeholder {color: #aaa;}
    input[type=text]::-ms-clear {display:none;}
    /* Firefox */
    input:-mos-input-placeholder {color: #aaa;}

    .f_search {display: inline-block; position: relative; vertical-align: top;}
    .f_search input[type=text] {width: 100%; height: 46px; padding: 0 50px 0 20px; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7;}
    .f_search .btn {display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 25px; height: 27px; border: 0; font-size: 0; background: url(../images/ico_search_b.png) no-repeat;}

    .f_search2 {display: inline-block; position: relative; vertical-align: top;}
    .f_search2 input[type=text] {width: 100%; height: 46px; padding: 0 50px 0 20px; border: 1px solid #dde2e5; border-radius: 5px; color: #222; font-size: 16px; background: #F7F7F7;}
    .f_search2 .btn {display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 25px; height: 27px; border: 0; font-size: 0; background: url(../images/ico_search_b.png) no-repeat;}

    .f_search3 {display: inline-block; position: relative; vertical-align: top;}
    .f_search3 input[type=text] {width: 100%; height: 46px; border: 1px solid #dde2e5; border-radius: 5px;}
    .f_search3 .btn {display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 25px; height: 27px; border: 0; font-size: 0; background: url(../images/ico_search_b.png) no-repeat;}

    select {font-family: 'NotoSans', sans-serif; font-weight: 400; border: 0;
        -moz-appearance:none; /* Firefox */
        -webkit-appearance:none; /* Safari and Chrome */
        -webkit-border-radius: 0;
        appearance:none; background: #fff; color: #231F20}
    select::-ms-expand {display:none;}

    .f_select {display: inline-block; position: relative; height: 46px; border: 0; border-radius: 5px; background: #f7f7f7; vertical-align: top;}
    .f_select::after {content: ""; display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 15px; height: 9px; background: url(../images/ico_arrow_gray_15x9.png) no-repeat;}
    .f_select select {width: 100%; height: 100%; padding: 0 45px 0 20px; border: 0; color: #222; font-size: 16px; background: transparent;}

    .f_chk {display: inline-block; min-width: 30px; height: 30px; color: #666; font-size: 16px; font-weight: 300; line-height: 30px;}
    .f_chk::before {content: ""; display: inline-block; width: 30px; height: 30px; border-radius: 5px; background: #e7eef2; vertical-align: top;}
    .f_chk.on:before {background: #e7eef2 url(../images/bg_chkbox_on.png) no-repeat center;}
    .f_chk input[type=checkbox] {width: 0;}

    .f_chk_only {display: inline-block; width: 20px; height: 20px; vertical-align: top; cursor: pointer;}
    .f_chk_only::before {content: ""; display: inline-block; width: 20px; height: 20px; border: 1px solid #dde2e5; border-radius: 2px; background: #fff; vertical-align: top;}
    .f_chk_only.on:before {border: 0; background: #0075ff url(../images/bg_chkbox2_on.png) no-repeat center;}
    .f_chk_only input[type=checkbox] {width: 0;}

    .f_rdo {display: inline-block; min-width: 22px; height: 22px; color: #222; font-size: 16px; font-weight: 300; line-height: 22px;}
    .f_rdo::before {content: ""; display: inline-block; width: 22px; height: 22px; border-radius: 5px; background: url(../images/bg_rdobox.png) no-repeat; vertical-align: top;}
    .f_rdo.on:before {background: url(../images/bg_rdobox_on.png) no-repeat center;}
    .f_rdo input[type=radio] {width: 0;}

    .f_txt {height: 46px; padding: 0 19px; border: 1px solid #dde2e5; border-radius: 5px; color: #222; font-size: 16px; font-weight: 300; vertical-align: top;}
    .f_txt2 {height: 46px; padding: 0 19px; border: 0; border-radius: 5px; color: #222; font-size: 16px; font-weight: 300; background: #f7f7f7;}

    .f_txt_inner {display: inline-block; height: 46px; color: #222; font-weight: 300; line-height: 46px;}

    .f_txtar {padding: 19px; border: 1px solid #dde2e5; border-radius: 5px; color: #222; font-size: 16px; font-weight: 300; resize: none;}

    .f_date {width: 117px; height: 46px; border: 0; border-radius: 5px; color: #222; font-size: 16px; font-weight: 300; text-align: center; background: #f7f7f7;}



/* Text */
    .tit_1 {color: #222; font-size: 48px; font-weight: 500; line-height: 48px;}
    .tit_2 {position: relative; padding-top: 12px; color: #222; font-size: 30px; font-weight: 700; letter-spacing: -1px;}
    .tit_2::before {content: ""; display: block; position: absolute; left: 0; top: 0; width: 30px; height: 2px; background: #0465be;}
    .tit_3 {color: #222; font-size: 26px; font-weight: 700;}
    .tit_4 {color: #000; font-size: 26px; font-weight: 700;}

    .txt_1 {color: #666; font-size: 20px;}
    .txt_2 {color: #666; font-size: 16px; font-weight: 300;}
    .txt_3 {color: #eb6877; font-size: 16px; font-weight: 300;}