:root {
    --fcf: #ffffff;
    --fc0: #000;
    --fc1: #121212;
    --fc2: #222222;
    --mColor: #963dbb;
    --mColor2: #8a35ae;
}

/* layout-w */
.layout-w {width: 144rem; margin: 0 auto; position: relative;}

@media screen and (max-width: 1440px) {
    .layout-w {width: 95%;}
}

/* container */
.container {padding-bottom: 5rem;}

/* title_bx */
.title_bx {display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 4rem;}
.title_bx .icon_bx {width: 4.8rem; height: 4.8rem; border-radius: 50%; box-shadow: 0.2rem 0.2rem 0 var(--mColor);}
.title_bx h2 {font-size: 4.4rem; font-weight: 700; color: var(--fc2); padding-top: 0.8rem;}

@media screen and (max-width: 1024px) {
    /* title_bx */
    .title_bx {margin-bottom: 3.3rem;}
    .title_bx .icon_bx {width: 3.7rem; height: 3.7rem;}
    .title_bx h2 {font-size: 3.6rem;}
}

@media screen and (max-width: 768px) {
    .title_bx {margin-bottom: 2.3rem; gap: 0.8rem;}
    .title_bx .icon_bx {width: 2.9rem; height: 2.9rem;}
    .title_bx h2 {font-size: 2.8rem;}
}

/* tab_menu */
.tab_menu {display: flex; border: 2px solid var(--fc0); margin-bottom: 5.9rem;}
.tab_menu li {flex: 1;}
.tab_menu li:not(:last-child) {border-right: 2px solid var(--fc0);}
.tab_menu li a {display: flex; align-items: center; justify-content: center; height: 6.4rem; word-break: keep-all; text-align: center; transition: all 0.3s;}
.tab_menu li a.on {background: var(--fc0);}
.tab_menu li a span {margin-top: 0.5rem; font-size: 2rem; color: var(--fc1); transition: all 0.3s;}
.tab_menu li a.on span {color: var(--fcf); font-weight: 700;}

@media screen and (max-width: 1024px) {
    .tab_menu {flex-wrap: wrap; border: none; border-top: 2px solid var(--fc0);}
    .tab_menu li {flex: 1 1 25%; max-width: 25%; border-bottom: 2px solid var(--fc0);}
    .tab_menu li:first-child, .tab_menu li:nth-child(5) {border-left: 2px solid var(--fc0);}
    .tab_menu li:last-child {border-right: 2px solid var(--fc0);}
    .tab_menu li a {height: 5.4rem;}
    .tab_menu li a span {font-size: 1.8rem;}
}

@media screen and (max-width: 768px) {
    .tab_menu {margin-bottom: 4rem;}
    .tab_menu li {flex: 1 50%; max-width: 50%;}
    .tab_menu li:nth-child(3), .tab_menu li:nth-child(7), .tab_menu li:last-child {border-left: 2px solid var(--fc0);}
    .tab_menu li a {height: 5.2rem;}
    .tab_menu li a span {font-size: 1.7rem;}
}

/* tab_bx */
.tab_bx {display: none;}
.tab_bx.on {display: block;}

/* title */
.h3Tit {font-size: 3.4rem; color: var(--mColor2); font-weight: 700; margin-bottom: 4rem;}
.h4Tit {font-size: 2.6rem; color: var(--fc2); font-weight: 700; line-height: 2.8rem;}
.h5Tit {font-size: 2.2rem; color: var(--fc2); font-weight: 700;}
.icon_title {display: flex; gap: 0.8rem;}
.icon_title .h4Tit {padding-top: 0.15rem;}
.icon_title .icon_bx {flex-shrink: 0;}
.arr_title {display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;}
.arr_title img {margin-bottom: 0.4rem;}

@media screen and (max-width: 1024px) {
    .h3Tit {font-size: 3rem; margin-bottom: 3rem;}
    .h4Tit {font-size: 2.4rem;}
}

@media screen and (max-width: 768px) {
    .h3Tit {font-size: 2.4rem;}
    .h4Tit {font-size: 2.2rem; line-height: 2.4rem;}
    .h5Tit {font-size: 2rem;}
    .icon_title .h4Tit {padding-top: 0.3rem;}
}

/* flex_btn */
.flex_btn {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.5rem;}

/* btn_list */
.btn_list {display: flex; flex-wrap: wrap; gap: 1rem;}

@media screen and (max-width: 768px) {
    .btn_list {gap: 0.5rem;}
}

/* btn */
a.btn {position: relative; display: block; padding: 1rem 3.4rem 0.5rem 1.3rem; border: 1px solid var(--mColor); width: max-content;}
a.btn.link.type2 {display: flex; align-items: center; gap: 0.5rem; border-color: #dddddd;}
a.btn.link.type2 img {margin-bottom: 0.3rem;}
a.btn::before {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: 1.4rem; background-repeat: no-repeat; background-size: 100%;}
a.btn.link::before {background-image: url('/humanframe/theme/intobusan/assets/img/common/link_icon.png'); width: 1.2rem; height: 1.2rem;}
a.btn.link.type2::before {background-image: url('/humanframe/theme/intobusan/assets/img/common/link_icon2.png');}
a.btn.view::before {background-image: url('/humanframe/theme/intobusan/assets/img/common/view_icon.png'); width: 1.6rem; height: 1.6rem;}
a.btn span {font-size: 1.6rem; color: var(--mColor); font-weight: 500;}
a.btn.link.type2 span {color: var(--fc2);}

@media screen and (max-width: 768px) {
    a.btn span {font-size: 1.4rem;}
}

/* table */
.tableColRow th, .tableColRow td {padding: 2.2rem 1rem 1.8rem 1rem; font-size: 1.8rem;}

@media screen and (max-width: 768px) {
    .tableColRow th, .tableColRow td {padding: 1.8rem 0.5rem 1.4rem 0.5rem; font-size: 1.5rem;}
}


/* boardTop*/


.boardTopBx {
    font-size: 2.6rem; margin-bottom:80px;
}

.boardTopBx.wr{ 
	margin-bottom:0 
}

.boardTopBx > h2{
    font-size: 3.7rem; line-height: 1.4em; margin-bottom: 29px; font-weight:700;
}
.boardTopBx > .txtBx{   
    display: block; margin-bottom: 43px;
}
.boardTopBx > .txtBx > p{
    display: block; width:100%; white-space: normal; line-height:1.6; margin-top: 37px;  word-break: keep-all;
}
.boardTopBx > .txtBx > p:first-child{
    margin-top:0;
}
.boardTopBx.fontNanumMyeongjo > .txtBx > p{
    letter-spacing: -0.03em;
}
.boardTopBx > .dlBx{
    display: flex; width:100%; gap:6px 0; flex-direction: column; justify-content: flex-start; align-items: flex-start;
}
.boardTopBx > .dlBx > dl{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap:0 36px; line-height: 1.6em;
}
.boardTopBx > .dlBx > dl > dt{
    font-weight: 700;
}
.boardTopBx > .dlBx > dl > dd{
    flex: 1 1 0; width:100%;
}
.boardTopBx > .dlBx > p{
    margin-top:24px; line-height: 1.4em
}
.boardHead{
    margin-bottom:38px;
}
.boardSearchForm{
    border: none; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width:100%;
}
.boardSearchForm:after{
    display: none;
}
.btnArea{
    margin:0;
}
.btnTypeM.btnColorType1{
    background-color:#2a2a2a !important; background-image: url(/humanframe/theme/9th_insu/assets/img/common/iconWrite.png); background-size: auto; background-position: left 25px center; background-repeat: no-repeat; border-radius: 5px; font-weight: 700; padding:19px 34px 19px 62px; height:auto; line-height: 1em; font-size: 2.6rem;
}
.searchBx{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap:0 10px;
}
.searchBx > .searchCate > .searchSelect{
    width:106px; border-radius: 5px; padding:18px 17px 18px 20px; background-position: right 17px center; font-size: 2.6rem; line-height:1em; border:1px solid #dbdbdb; background-image: url(/humanframe/theme/9th_insu/assets/img/common/bg_select_arrow_bk.png);
}
.searchBx > .searchTxtBtn{
    border:1px solid #dbdbdb; padding:16px 17px; border-radius: 5px; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width:100%; max-width:322px;
}
.searchBx > .searchTxtBtn > .searchText{
    outline: none; border:none; font-size: 2.6rem; line-height:1em; flex: 1 1 0; width:100%;
}
.searchBx > .searchTxtBtn > .searchBtn{
    text-indent: -9999px; width:24px; height:24px; background-image: url(/humanframe/theme/9th_insu/assets/img/common/iconSearch.png); background-position: center; background-repeat: no-repeat; background-size: 100% auto;
}

.boardList{
    display:block; border-top:none;
}
.boardList tbody{
    display:flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:10px; width:100%;
}
.boardList tbody tr{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width:100%; border-radius: 10px; background-color: #f6f6f6; padding:30px 44px 29px 56px; transition: 0.2s; border:1px solid #f6f6f6;
}
.boardList tbody td{
    border:none; padding:0; font-size: 2.6rem; line-height: 1.7em; color:#333;
}
.boardList td .tagNotice{
    display:block; background: #000; color:#fff; text-indent: inherit; padding:9px 20px; border-radius: 5px;  line-height: 1em; font-size: 2.6rem;
}
.boardList td.title{
    padding:0 40px 0 23px; flex:1 1 0; width:100%; color:#000; transition: 0.2s; 
}
.boardList td.title > a {
	overflow: hidden; height: 1.7em; display: inline-block; position: relative; max-width: 100%;
}
.boardList td.title > a span {
	height: 1.7em; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.boardList td.title > a.scret {
	padding-right: 28px;
}
.boardList td.title > a.scret span {
	padding-right: 0;
}
.boardList td.title > a.scret::after {
	content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background-image: url(/humanframe/theme/9th_insu/assets/img/common/iconSecret.png); background-position: center; background-repeat: no-repeat; background-size: auto;
}

.boardList tbody td:last-child{
    padding-left:94px;
}
.boardList tr:hover td,
.boardList tr:focus td{
    background:inherit;
}
.boardList tr:hover{
    background:#fff; border:1px solid #178ee6; box-shadow: 0 3px 24px rgba(0,0,0,0.17); transition: 0.2s; 
}
.boardList tr:hover td.title{
    color:#006fc3; transition: 0.2s; 
}
.se-contents,
.boardView .form-data-info dt > span,
.boardView .form-data-info dd{
    font-size: 2.6rem;
    line-height: 1.4em;
}
.boardView .form-data-subject{
    padding:18px 10px; font-size: 3.38rem;
}
.boardView .form-data-info{
    display:grid; grid-template-columns: repeat(3, 1.5fr 2fr); align-items: flex-start; height:auto;
}
.boardView .form-data-info dt{
    width:auto;
}
.boardView .form-data-info dt,
.boardView .form-data-info dd{
    padding: 10px 0 10px 20px;
}
.boardView .form-data-info dt > span:after{
    margin-top: -10px; height:20px;
}
.boardView .form-group{
    border-top:none;
}
.boardView .form-group{
    border-top:1px solid #dbdbdb;
}
.boxStyle{
    font-size: 2.6rem;
}
#bbsPasswordChkFrm > div{
    display: flex; flex-direction: column; justify-content: flex-start;align-items: center; gap: 4px;
}
.ui-widget input{
    display: block; width:100%; text-align: center;
}
.ui-widget-content a{
    border:1px solid #dbdbdb; padding:1rem 1.6rem 1rem 1.3rem;
}
.btnTypeM,
.tableWriteForm tbody td textarea,
input.textForm{
    font-size: 2.6rem;
}
.fontNanumMyeongjo.boardTopBx > h2{
    font-weight: 900
}
.fontNanumMyeongjo.boardTopBx > .txtBx{
    font-weight: 700;
}
.menuNav{
    position: absolute; top:0; left:0rem; transform: translateX(-18rem);
}
.menuNav.is-sticky{
    position: sticky; top:12rem;
}
.menuNav > .depth2Menu{
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:36px; max-width: 100px;
}
.menuNav > .depth2Menu > li{
    display:block; padding-left:16px; line-height: 1em; position: relative; cursor: pointer;
}
.menuNav > .depth2Menu > li.on{
    font-weight: 700;
}
.menuNav > .depth2Menu > li.on::after{
    display:block; content:''; width:7px; height:7px; border-radius: 7px; background:#000; position: absolute; top:0px; left:0;
}
.boardTopBx.intro:first-child {
    margin-bottom:100px;
}
.boardList tbody tr td:first-child{width:88px;}
.boardList tbody tr td:nth-child(3){width:140px;}
.boardList tbody tr td.tbCol1 {
    width:100%; text-align: center; padding-left: 0;
}



.tablewrap{
    display: block;
    width: 100%;
    overflow: hidden;
}
.tableBx{
    display: block;
    width: 100%;
}
.tableBx > table{
    width:100%;
    border-collapse: collapse;
}
.tableBx > table > tbody{
    border-bottom: 1px solid #000;
}

.tableBx > table th,
.tableBx > table td{
    border: 1px solid rgba(18,18,18,0.2);
    text-align: center;
    padding:13px 0;
}
.tableBx > table th{
    background:#e9effa;
    border-top: 1px solid #000;
	font-weight:500;
}
.tableBx > table td{
    border-top:0;
}
.tableBx > table td.busan{ 
	background:#dadef9; 
}
.tableBx > table td p{
    text-align: center;
    width:100%;
    display: block;
}
.tableBx > table td p.title{ 
	font-weight:500; 
}

.tableBx > table td span.tit br{display:none;}

.tableBx > table tbody tr th:first-child,
.tableBx > table thead tr th:first-child,
.tableBx > table tbody tr td:first-child{
    border-left:0;
}
.tableBx > table tbody tr th:last-child,
.tableBx > table thead tr th:last-child,
.tableBx > table tbody tr td:last-child{
    border-right: 0;
}
.boardTopBx > h3{
    font-size: 3rem; font-weight: 700; color:#014099; line-height: 1em; margin-bottom:35px;
}

.boardTopBx > .listStyle{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;}
.boardTopBx > .listStyle > li{
    padding: 0 0 0 32px;
    position: relative;
    color: #000;
    line-break: 1.4em;
}
.boardTopBx > .listStyle > li::before{
    width: 10px;
    height: 3px;
    background: #000;
    position: absolute;
    top: 11.5px;
    margin: 0;
    vertical-align: inherit;
    left: 0;
}
.dlBx.bgGrayBx{
    gap:8px; margin-bottom:30px; background:#f9f9f9; padding:30px 38px 40px;
}
.dlBx.bgGrayBx > dl{
    width: 100%; gap:0; word-break: keep-all;
}
.dlBx.bgGrayBx > dl > dt{
    width: 367px; font-weight: 500;
}
.dlBx.bgGrayBx > dl > dd{
    flex: 1 1 0;  color:#014099
}
.mdTxt{
    display: block;
    margin: 27px 0 65px;
}
.txtpp{
    color: #601986 !important; 
}
.boardView{
    margin-bottom:40px;
}
.btnColorType18,
.btnLineType1,
.btnColorType3{
    border-radius: 5px; height:auto; padding-top:19px; padding-bottom:19px; line-height:1em !important;
}


.boardView .form-data-content dd{ 
	padding:3rem; 
	line-height:1.6;
	color:#333;
	font-weight:500;
}

.tableWriteForm tbody th{ 
	font-weight:500; 
	padding:2rem 3rem;
}


.boxStyle{ 
	padding:3rem; border:1px solid #ddd; line-height:1.6;	 
}

.tableWriteForm tbody td textarea{ 
	font-family: "Noto Sans KR", sans-serif;
}

.paginate .number a, .paginate .number strong{ 
	width:33px; height:34px; 
}


@media screen and (max-width: 1800px) {
    .menuNav{
        transform: translateX(-14rem);
    }
}
@media screen and (max-width: 1728px) {
    .menuNav{
        transform: translateX(-12rem);
    }
}
@media screen and (max-width: 1680px) {
    .menuNav{
        transform: translateX(-10rem);
    }
}
@media screen and (max-width: 1640px) {
    .menuNav{
        position:static; transform: translateX(0rem); margin-bottom:40px;
    }
    .menuNav > .depth2Menu{
        flex-direction: row; gap:16px; max-width: inherit;
    }
}
@media screen and (max-width: 1024px) {
    .btnTypeM,
    .tableWriteForm tbody td textarea,
    input.textForm,
    .boxStyle,
    .se-contents,
    .boardView .form-data-info dt > span,
    .boardView .form-data-info dd,
    .boardList td .tagNotice,
    .boardList tbody td,
    .searchBx > .searchTxtBtn > .searchText,
    .searchBx > .searchCate > .searchSelect,
    .btnTypeM.btnColorType,
    .boardTopBx{
        font-size: 2.3rem;
    }
    .boardTopBx > h2{
        font-size: 3.6rem;
    }
    .boardView .form-data-info{
        grid-template-columns: repeat(2, 1.5fr 2fr);
    }

	.boardTopBx > .txtBx > p{ 
		margin-top:15px;  
    }

}
@media screen and (max-width: 862px) {
    .dlBx.bgGrayBx > dl > dt{
        width:300px;
    }
}
@media screen and (max-width: 792px) {
    .dlBx.bgGrayBx{
        gap:16px;
    }
    .dlBx.bgGrayBx > dl{
        flex-direction: column;
    }
    .dlBx.bgGrayBx > dl > dt{
        width:100%;
    }
    .dlBx.bgGrayBx > dl > dd{
        padding-left:8px;
    }
}
@media screen and (max-width: 768px) {
    .boardTopBx{
        font-size: 2rem; margin-bottom:40px;
    }
    .boardTopBx > h2{
        font-size: 2.2rem; margin-bottom:10px;
    }

	.boardSearchForm {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px 0;
    }

    .boardSearchForm .btnArea {
        align-self: flex-start;
    }

    .boardSearchForm form {
        width: 100%;
    }

    .boardSearchForm .searchBx {
        width: 100%;
    }

    .boardSearchForm .searchBx > .searchTxtBtn {
        flex: 1 1 auto;
        max-width: none;
    }

    .btnTypeM,
    .tableWriteForm tbody td textarea,
    input.textForm,
    .boxStyle,
    .se-contents,
    .boardView .form-data-info dt > span,
    .boardView .form-data-info dd,
    .boardList td .tagNotice,
    .boardList tbody td,
    .searchBx > .searchTxtBtn > .searchText,
    .searchBx > .searchCate > .searchSelect,
    .btnTypeM.btnColorType1{
        font-size: 2rem;
    }

    .boardList tbody tr{
        padding:20px 30px;
    }
    .boardList td.title{
        padding:0;
    }
    .boardSearchForm{
        flex-direction: column; justify-content: flex-start; align-items: flex-end; gap:10px 0;
    }
    .btnTypeM.btnColorType1{
        padding:12px 34px 12px 60px;
    }
    .searchBx > .searchCate > .searchSelect{
        padding:16px 17px 16px 20px;
    }
    .searchBx > .searchTxtBtn{
        padding:12px 17px;
    }
    .boardList tbody td:last-child{
        padding-left:20px;
    }
    .boardView .form-data-info dt{
        position: relative;
    }
    .boardView .form-data-info dd{
        border-top:0;
    }
    .boardView .form-data-info{
        grid-template-columns: repeat(1, 1fr 2fr);
    }
    .boardView .form-data-info dt,
    .boardView .form-data-info dd{
        border-bottom:1px solid #dbdbdb;
    }
    .boardView .form-data-info dt:nth-last-child(2),
    .boardView .form-data-info dd:last-child{
        border-bottom: none;
    }
	.dlBx.bgGrayBx > dl > dd{ 
		padding-left:0; 
	}

	.tableWriteForm {
        table-layout: fixed;
        width: 100%;
    }

    .tableWriteForm colgroup col:first-child {
        width: 100px !important;
    }

    .tableWriteForm colgroup col:last-child {
        width: auto !important;
    }

    .tableWriteForm tbody th {
        width: 100px;
        min-width: 100px;
        padding: 1rem;
    }

    .tableWriteForm tbody td {
        width: auto;
    }

    .tableWriteForm tbody td input.textForm {
        width: 100% !important;
        max-width: none;
        box-sizing: border-box;
    }

    .tableWriteForm tbody td textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 580px) {
    
    .tablewrap {
        padding: 8px 0;
    }
}

@media screen and (max-width: 480px) {
    .paginate{
        flex-flow: row nowrap;
    }
    .paginate .number{
        width:auto;
    }
    .menuNav > .depth2Menu{
        gap:16px;
    }
    .menuNav > .depth2Menu > li{
        padding-left:8px;
    }
    .tableBx{
        overflow-x: auto;
    }
    .tableBx > table{
        min-width: 480px;
    }
    .dlBx.bgGrayBx{
        padding:30px 20px 40px;
    }
}