/**
* CMS Cascading Style Sheets
* File Name :contents.css
* Description :컨텐츠 스타일시트
* Author :Web business Team / Choi Hyun Mi
* Date :2017.08.01
* Update :2017.08.01
*/
 /* ///////////////////////////포인트컬러 변경///////////////////////////
        포인트 컬러1 - #0086ff
		포인트 컬러2 - #11142d
		검색해서 모두 바꾸기 해주세요!
 /////////////////////////////////////////////////////////////////// */

/* 공통 */
.fx { display: flex; align-items: center; gap: 40px;}
.font_star { font-weight:600; color:#f4364c; font-family:'verdana'; margin:0 3px; line-height:1em;} /* *표시 */
.font_em { color:#0086ff !important;}
.font_em2 { color:#df4241 !important;}

.font_m { font-size:1.25em;}
.font_bold { font-weight:600;}
.black_bold { font-weight:600; color:#333;}

.mg20 { margin:20px !important;}
.mg40 { margin:40px !important;}
.mgT5 { margin-top:5px !important;}
.mgT10 { margin-top:10px !important;}
.mgT20 { margin-top:20px !important;}
.mgT30 { margin-top:30px !important;}
.mgT40 { margin-top:40px !important;}
.mgT50 { margin-top:50px !important;}
.mgT60 { margin-top:60px !important;}
.mgL10 { margin-left:10px !important;}
.mgL20 { margin-left:20px !important;}
.mgL25 { margin-left:25px !important;}
.mgL30 { margin-left:30px !important;}
.mgL35 { margin-left:35px !important;}
.mgL40 { margin-left:40px !important;}
.mgL60 { margin-left:60px !important;}
.mgR30 { margin-right:30px !important;}
.mgB0 { margin-bottom:0 !important;}
.mgB10 { margin-bottom:10px !important;}
.mgB20 { margin-bottom:20px !important;}
.mgB30 { margin-bottom:30px !important;}
.mgB40 { margin-bottom:40px !important;}

.txL { text-align:left !important;}
.txC { text-align:center !important;}
.txR { text-align:right !important;}

.pdT10 { padding-top:10px !important;}
.pdT20 { padding-top:20px !important;}
.pdT30 { padding-top:30px !important;}
.pdB20 { padding-bottom:20px !important;}
.pdB30 { padding-bottom:30px !important;}

.wauto { width: auto !important;}
.w10 { width: 10% !important;}
.w20 { width: 20% !important;}
.w30 { width: 30% !important;}
.w40 { width: 40% !important;}
.w50 { width: 50% !important;}
.w60 { width: 60% !important;}
.w70 { width: 70% !important;}
.w80 { width: 80% !important;}
.w90 { width: 90% !important;}
.w100 { width: 100% !important;}

/************ tab_type ************/
.tab_type1 > ul { max-width: 60%; margin:0 auto 30px auto; display:flex; justify-content: center;}
.tab_type1 > ul > li { width: 100%;}
.tab_type1 > ul > li > a { display:flex; justify-content: center; align-items: center; height: 60px; width: 100%; box-sizing: border-box; background:#f1f1f1; border:1px solid #dbdbdb; border-left: none; color: #9d9d9d; font-weight:500;}
.tab_type1 > ul > li:first-child > a { border-left:1px solid #dbdbdb;}
.tab_type1 > ul > li > a:hover { background:#f6f6f6;}
.tab_type1 > ul > li > a.on { background:#fff; color: #0086ff; border:1px solid #0086ff; box-shadow: 0 2px 2px rgba(0,0,0,0.1);}

.tab_type2 > ul { margin-bottom:30px; display:flex; justify-content: center; gap: 10px; flex-wrap: wrap;}
.tab_type2 > ul > li > a { display:flex; justify-content: center; align-items: center; height: 40px; border:1px solid #d4d4d4; padding:0 25px; color:#666;}
.tab_type2 > ul > li > a.on, .tab_type2 > ul > li > a:hover { border:1px solid #0086ff; background:#0086ff; color:#fff;}

.tab_type3 > ul { margin-bottom:30px; display:flex; justify-content: center; gap: 10px;}
.tab_type3 > ul > li { width: 100%;}
.tab_type3 > ul > li > a { display:flex; justify-content: center; align-items: center; background:#8a8a8a; color:#fff; padding:10px;}
.tab_type3 > ul > li > a:hover, .tab_type3 > ul > li > a.on { background:#11142d;}

/* .tab_box { border:1px dashed #ddd; padding:40px;} */

@media all and (max-width:800px) {
.tab_type1 > ul { max-width: 100%; margin:0 auto 30px auto;}
.tab_type1 > ul > li > a { font-size:0.95em; height:40px;}

.tab_type2 > ul { gap: 5px;}
.tab_type2 > ul > li > a { font-size:0.95em; padding:0 20px;}

.tab_type3 > ul { gap: 5px;}
.tab_type3 > ul > li > a { font-size:0.95em;}

.tab_box { padding:20px;}
}

@media all and (max-width:500px) {
.tab_type2 > ul > li { flex: 1 1 50%;}
}


/************ h_type ************/
.h_type1 { font-size:20px; color:#333; font-weight:600; line-height: 1em; margin-bottom:10px;}
.h_type2 { font-size:18px; color:#444; font-weight:600; line-height: 1em; margin-bottom:10px;}
.h_type3 { font-size:16px; color:#555; font-weight:600; line-height: 1em; margin-bottom:10px;}


/************ ul_type ************/
.ul_type1 > li { margin-bottom:7px; background:url("/project/design/template/bg_li1.png") no-repeat left 10px; padding-left:15px;}
.ul_type1 > li > ul { margin-top:5px;}
.ul_type1 > li > ul > li { margin-bottom:5px; background:url("/project/design/template/bg_li2.png") no-repeat 2px 10px; padding-left:12px;}
.ul_type1 > li:last-child { margin-bottom:0; }


/************ a_type ************/
/* 다운로드링크 */
.a_down { color:#666; display:inline-block; border-bottom:1px dotted #666; padding:0 30px 0 5px; position: relative;}
.a_down::after {content: "\f56d"; position: absolute; top:50%; right: 0; transform: translate(-5px, -60%); display: block; font-family: "FontAwesome"; font-size: 1.125em; }
.a_down:hover { color:#0086ff; border-bottom:1px dotted #0086ff;}

/* 새창링크 */
.a_link { color:#666; display:inline-block; border-bottom:1px dotted #666; padding:0 30px 0 5px; position: relative;}
.a_link::after {content: "\f0c6"; position: absolute; top: 50%; right: 0; transform: translate(0, -60%); display: block; font-family: "FontAwesome"; }
.a_link:hover { color:#0086ff; border-bottom:1px dotted #0086ff;}


/************ box_type ************/
/* 이미지없는 박스 */
.box_type1 { border:1px dashed #666; padding:20px 30px;}

/************ table_type ************/
.table_type1 { border-top:1px solid #8292a8; overflow-x:auto;display: flex; position:relative;}
.table_type1 table, .table_type1 th, .table_type1 td { border:1px solid #ccd1d9; border-top:none; border-collapse:collapse; font-size:inherit;}
.table_type1 table { width:100%;}
.table_type1 th { padding:15px 10px; color:#000; background:#f9f9f9;}
.table_type1 td { padding:15px 10px; text-align:center;}
.table_type1 thead th { background:#e5edfa;}
.table_type1 tfoot th, .table_type1 tfoot td { background:#f9f9f9;}
.table_type1 a { color:inherit;}
.table_type1.t_w100 { width: 1500px; height: 600px;}
.table_type1.t_w100 thead {position: sticky; top: 0px;z-index: 1000;}

.table_type1 tbody tr:hover { background:#f9f9f9;}

.table_type2 { border-top:1px solid #8292a8; overflow-x:auto;}
.table_type2 table, .table_type2 th, .table_type2 td { border:1px solid #ccd1d9; border-top:none; border-collapse:collapse; font-size:inherit;}
.table_type2 table { width:100%;}
.table_type2 th { padding:15px 30px; color:#000; background:#e5edfa; text-align: left;}
.table_type2 td { padding:15px 30px; text-align: left;}
.table_type2 a { color:inherit;}


/************ btn_type ************/
/* top_btn_box */
.btn_box1 { display: flex; justify-content: flex-end; align-items: center; gap: 10px;}
.btn_box2 { display: flex; justify-content: space-between; align-items: center; gap: 10px;}

/* 기본버튼 */
.btn { display:inline-flex; justify-content: center; align-items: center; border:1px solid #d4d4d4; height:30px; padding:0 20px; color:#666; font-weight: 500; border-radius:5px; transition:all .3s ease; background-color:#fff;}
.btn i { font-size: 1.25em; margin-left: 5px;}
.btn:hover { background-color:#f6f6f6; color:#333;}
input.btn, button.btn { cursor:pointer; background-color: inherit; font-weight: inherit; vertical-align:top;} 

/* 라인버튼 */
.btn.line1 { border:1px solid #0086ff; color:#0086ff;}
.btn.line1:hover { background-color:#0086ff; color:#fff;}
.btn.line2 { border:1px solid #11142d; color:#11142d;}
.btn.line2:hover { background-color:#11142d; color:#fff;}

/* 컬러버튼 */
.btn.bg1 { border:1px solid #0086ff; background-color:#0086ff; color:#fff;}
.btn.bg1:hover {border:1px solid #000;background:#000;}
.btn.bg2 { border:1px solid #11142d; background-color:#11142d; color:#fff;}
.btn.bg2:hover {border:1px solid #000;background:#000;}

/* 사이즈 */
.btn.size1 { padding: 0 10px;}


/* form */
.inputbox {width: 100%; background-color:#f9f9f9; border: 1px solid #ddd; height: 40px; border-radius: 5px; box-sizing: border-box; transition: all ease 0.3s; }
.inputbox[type="text"], .inputbox[type="search"], .inputbox[type="password"], .inputbox[type="date"] { padding:10px;}
.inputbox[type="file"] { padding:6px 0 0 10px;}
.selectbox { width: 100%; padding: 0 50px 0 20px; box-sizing: border-box; height: 40px; border-radius: 5px; border: 1px solid #ddd; color: #666; font-weight: 500; -webkit-appearance: none; background: #f9f9f9 url("/admode/module/board/images/kor/bg_select.png") no-repeat calc(100% - 10px) center; background-size: auto 50%;}
.textareabox { width: 100%; box-sizing: border-box; padding: 10px; height: 100px; border-radius: 5px; border: 1px solid #ddd; background-color:#f9f9f9;}
.inputbox:focus, .selectbox:focus, .textareabox:focus { outline: 0; border: 1px solid #000 !important;}


/* 이름 검색 */
.n_search_box { position: relative;}
.n_search_box i { position: absolute; top: 50%; left: 15px; transform: translate(0, -50%);}
.n_search_box .inputbox[type="search"] { padding: 10px 10px 10px 40px !important;}


.n_search_box_layer { display: none; border: 1px solid #ddd; box-sizing: border-box; border-radius: 5px; width: 100%; position: absolute; top: 39px; left: 0; background-color: #fff;}
.n_search_box_layer ul > li > a { display: block; padding: 10px 30px; }
.n_search_box_layer ul > li > a:hover { background-color: #e5edfa;}

.order_box { display: flex; gap: 5px; justify-content: center;}
.order_box a { width: 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #ddd;}
.order_box a:hover { border: 1px solid #0086ff; color: #0086ff;}