@charset "utf-8";

/* 메인, 서브 틀*/
.inner{width:60rem; min-width: 60rem; height: 100%; margin: 0 auto; position: relative;}
.sub_inner{width:60rem; min-width: 60rem; min-height:30rem; margin: 0 auto; position: relative; padding: 3.5rem 0}
.sub_inner_p20{padding: 0 1rem;}


/* input, select style변경 */
input[type='checkbox']{ cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: #fff; height: 20px;
  width: 20px; border: 1px solid #d7d7d7; border-radius: 5px; margin-bottom: 5px;}
input .checkbox_txt{font-size:16px;}
input[type='radio']{width:17px; height: 17px; outline: none;} 
select{border-radius:5px!important; height: 2rem; line-height: 2rem; border:1px solid #d7d7d7;padding: 0 15px; font-size: 16px; background: url('../image/sub/icon_select.png')no-repeat 95% 50% #f1f1f1;}
select.ver2{border-radius:5px!important; height: 1.8rem; line-height: 1.8rem; border:1px solid #666; padding: 0 15px; font-size: 16px; background: url('../image/sub/icon_select.png')no-repeat 95% 50% #fff;}

.input_text1{border-radius:5px!important; height: 2.5rem; line-height: 2.5rem; border:1px solid #d7d7d7; background:#fff; padding: 0 15px 0 45px; font-size: 16px; width: 100%;}
.input_text2{border-radius:5px!important; height: 2rem; line-height: 2rem; border:1px solid #d7d7d7; background:#f1f1f1; padding: 0 15px; font-size: 16px;} 


/* button */
.button_group{overflow: hidden; margin-top:3rem; position: relative;} /* 서브내용 하단 버튼 그룹 */
.button_group02{overflow: hidden; margin:1.5rem 0 0.6rem; position: relative;} /* 게시판 상세페이지 상단 버튼 그룹 */

.btn_center_area{text-align: center;} /* 버튼 가운데, 우측 배치를 위해 감싸줌 */
.btn_right_area{position: absolute; right: 0; top: 0;} /* 버튼 가운데, 우측 배치를 위해 감싸줌 */

.button{border-radius: 5px!important; display: inline-block; margin: 0; padding: 0.45rem 1.5rem; font-size:0.9rem; vertical-align: top;} /* 기본버튼 좌우 padding 1.5rem */
.button02{border-radius: 5px!important; display: inline-block; margin: 0; padding: 0.45rem 2rem; font-size:0.9rem; vertical-align: top;} /* 기본버튼 좌우 padding 2rem */
.button_border{border-radius: 5px!important; display: inline-block; margin: 0; padding: 0.4rem 1.5rem; font-size:0.9rem; background:#fff; color: #000; border: 1px solid #000!important; vertical-align: top;} /* 기본버튼 좌우 padding 1.5rem */
.button_border02{border-radius: 5px!important; display: inline-block; margin: 0; padding: 0.4rem 1.95rem; font-size:0.9rem; background:#fff; color: #000; border: 1px solid #000!important; vertical-align: top;} /* 기본버튼 좌우 padding 1.95rem */
.button_group.tc a.button_border + a.button{margin-left:0.4rem} /* a버튼이 센터에서 나란히 나열된 경우 */
.button_group.tc a.button_border + input.button{margin-left:0.4rem} /* a버튼 옆에 input버튼이 센터에서 나란히 나열된 경우 */

.input_btn{border-radius:5px!important;} /* 모양 불규칙 input 버튼 */
.btn_extend{border-radius: 5px!important; display: inline-block; margin: 0; font-size:0.7rem; height:1.3rem; padding:0 0.75rem; background:#b70202; color: #fff; line-height: 1.3rem;} /*연장버튼*/
.btn_search{border-radius: 5px!important; display: inline-block; margin: 0; padding: 0 0.75rem; font-size:0.8rem; background:#fff; color: #000; border: 1px solid #000!important; vertical-align: top; height: 2rem;} /* 정보입력창에서 input 검색 버튼 */
.btn_search:hover{background:#f6f6f6;}

.btn_blue{background:#003399; color: #fff;}
.btn_gray{background: #777777; color: #fff;}
.btn_red{background: #b70202; color: #fff;}


/* margin, padding */
.margin_b45{margin-bottom: 2.25rem;}
.margin_t45{margin-top: 2.25rem;}
.margin_b25{margin-bottom:1.25rem;}
.margin_b15{margin-bottom: 0.75rem;}
.margin_t15{margin-top: 1.25rem;}
.margin_t5{margin-top: 0.25rem;}
.margin_b5{margin-bottom: 0.25rem;}

.padding_b5{padding-bottom: 0.25rem;}
.padding_t5{padding-top: 0.25rem;}


/* color */
.c_blue {color:#003399;}
.c_orange{color:#f55247;}
.c_green{color: #015907;}
.c_red{color: #b70202;}
.c_gray6{color: #666;}


/* font-weight, font-size */
.fw_bold{font-weight: bold;}
.fs_14{font-size:0.7rem;}


/* 서브 내용 동그라이 미니 타이틀 */
h4{width: 100%; margin-bottom:1rem; font-size: 0.9rem; position: relative; padding-left: 1.2rem;}
h4:before{content: ''; position: absolute; width:14px; height: 14px; border-radius: 50%; background:#003399; display: inline-block; left:0; top:0; margin-top: 7px}
h4:after{content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background:#fff; display:inline-block; left:0; top:0; margin-top:10px; margin-left: 3px;}
h4 span.h4_txt{font-size: 0.7rem; color: #666; font-weight:normal; padding-left: 0.5rem;}


/* 문장, 단락 */
.ellipsis{display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.paragraph_19{line-height:0.95rem; font-size: 0.8rem;}
.paragraph_24{line-height:1.2rem; font-size: 0.8rem;}
.word_keep{word-break: keep-all;}


/* para24_p10 (line-height:1.2rem, padding-bottom:0.5rem;)
서브 - 아이콘이 붙는 내용 (사용 : 제품소개, 프로그램개발) */
ul.para24_p10 > li{line-height:1.2rem; font-size: 0.8rem; padding-bottom:0.5rem; padding-left:0.6rem; position: relative;}
ul.para24_p10 > li:last-child{padding-bottom:0}
ul.para24_p10 > li:before{content:'-'; position: absolute; left: 0; top: -1px}
ul.para24_p10 > li > ul.txt > li{padding-left: 0.4rem; position: relative; padding-bottom: 0.4rem;}
ul.para24_p10 > li > ul.txt > li:before{content:'·'; position: absolute; left: 0; top: -1px;}


/* para24_num (line-height:1.2rem, padding-bottom:0.5rem;)
서브 숫자가 붙는 내용 */
ul.para24_num > li{line-height:1.2rem; font-size: 0.8rem; padding-bottom:0.5rem; padding-left:0.9rem; position: relative;}
ul.para24_num > li:last-child{padding-bottom:0}
ul.para24_num > li:first-child:before{content:'1.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(2):before{content:'2.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(3):before{content:'3.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(4):before{content:'4.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(5):before{content:'5.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(6):before{content:'6.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(7):before{content:'7.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(8):before{content:'8.'; position: absolute; left: 0; top: -1px}
ul.para24_num > li:nth-child(9):before{content:'9.'; position: absolute; left: 0; top: -1px}

ul.para24_num > li > ul.txt > li{padding-left: 0.4rem; position: relative; padding-bottom: 0.1rem;}
ul.para24_num > li > ul.txt > li:before{content:'-'; position: absolute; left: 0; top: -1px;}


/* 서브 정렬 및 강조가 필요한 내용 (사용 : 프로그램개발, 회원가입-약관) */
.top_tit{display:block; font-size:0.9rem; font-weight: bold; color: #000; margin-bottom: 1rem;}
.trem{margin-bottom:1rem; font-size: 0.8rem; word-break: break-all;}
.trem > p.tit{font-weight: bold; margin-bottom:0.4rem;display: block;}
.trem > ol{padding-left: 1rem;}
.trem .ol_2{padding-left: 1.3rem;}


/* table */
/* row_tbl_type1 (사용: kz01, kz02, ky01_03, ky02)*/ 
.row_tbl_type1{border-top:2px solid #091f60;}
.row_tbl_type1 table th, 
.row_tbl_type1 table td{border-bottom: 1px solid #d7d7d7; font-size: 0.8rem; font-weight: normal; padding: 13px 16px; text-align: left;}
.row_tbl_type1 table th.table_title{width: 100%; height:2.5rem;background: #f6f6f6; text-align: center;}
.row_tbl_type1 table th{padding-left:0.75rem; word-break: keep-all;}
.row_tbl_type1 table td{height: 49px;}


/* tbl_type1 (사용 : kz03)*/
.tbl_type1{border-top:2px solid #091f60;}
.tbl_type1 table th, 
.tbl_type1 table td{border-bottom: 1px solid #d7d7d7; border-left: 1px solid #d7d7d7; font-size: 0.8rem; font-weight: normal; height:2.25rem; padding: 0 0.75rem; }
.tbl_type1 table th{background:#f6f6f6; text-align: center;}
.tbl_type1 table th.tit{font-weight: bold;}
.tbl_type1 table th:first-child,
.tbl_type1 table td:first-child{border-left:0}
.tbl_type1 table th.table_title{width: 100%; height:2.4rem; background: #ededed; text-align: center;} 
.tbl_type1 table td{height:2.25rem; vertical-align: middle;}


/* tbl_type2*/
.tbl_type2 table th, 
.tbl_type2 table td{border-bottom: 1px solid #d7d7d7; border-top: 1px solid #d7d7d7; border-left: 1px solid #d7d7d7; font-size: 0.8rem; font-weight: normal; padding: 0.75rem;}
.tbl_type2 table th{background:#f6f6f6; font-weight: bold; text-align: center;}
.tbl_type2 table th:first-child, 
.tbl_type2 table td:first-child{border-left:0}


/* tpage (게시판 하단 페이지 번호)*/
 .tpage{margin-top:1.8rem;}
 .tpage img {vertical-align: middle;}
 

/* global (표 내용 text-align고려하여 table 밑에 기재함)*/
.f_l {float:left}
.f_r {float:right}
.tr {text-align:right;}
.tl {text-align:left;}
.tc {text-align:center;}

.clear:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}


/* width */
.w35pc{width: 35%!important;}
.w60pc{width: 60%!important;}
.w240pc{width: 240px!important;}



/* ======================== 반응형 ======================== */


/* ------[ 태블릿 ]------ */
@media (max-width: 1024px) {

/* 메인, 서브 틀 */
.inner{width:100%; min-width: 100%; height: 100%; padding:0 0.75rem;}
.sub_inner{width:100%; min-width: 100%; height: 100%; min-height:30rem; padding: 2rem 0.75rem}
.sub_inner_p20{padding: 0 0.5rem;}


/* button */
.btn_extend{word-break: keep-all; text-align: center;} /*연장버튼*/

}




/* ------[ 저해상도 태블릿, 모바일(가로) ]------ */
@media (max-width: 768px) {

/* button */
.btn_extend{height:1rem; padding:0 2rem; background:#b70202; color: #fff; line-height: 1rem;} /*연장버튼*/


/* table */
/* 반응형table - tbl_type1 */
.tbl_respon_wrap table thead{display: none;} 

.tbl_respon_wrap table tbody tr:nth-child(even){background:#f8f8f8;}
.tbl_respon_wrap table tbody tr{border-bottom:1px solid #d7d7d7}
.tbl_respon_wrap table tbody td{display:block; float: left; position: relative; border: 0; width: 100%; text-align: left; height:auto; min-height: 1.5rem; line-height: 1.5rem; padding: 0 0 0 5rem; font-size: 0.75rem; }
.tbl_respon_wrap table tbody td:before{position: absolute; padding-left:15px; top: 50%; left: 0; width:90px; font-size: 0.75rem; margin-top: -0.8rem; font-weight: bold;}
.tbl_respon_wrap table tr > td:first-child >  a{max-width:100%}



/* width */
.w60mo{width: 60%!important; min-width: 6.7rem;}
.w100mo{width: 100%!important;}

}



/* ------[ 모바일(세로) ]------ */
@media (max-width: 480px) {

/* 메인, 서브 틀 */
.sub_inner{width:100%; min-width: 100%; height: 100%; min-height:30rem; padding: 1.5rem 0.75rem}


/* 문장, 단락 */
.paragraph_19{line-height:0.95rem; font-size: 0.75rem;}


/* para24_p10(line-height:1.2rem, padding-bottom:0.5rem;)
서브 - 아이콘이 붙는 내용(사용 : 제품소개, 프로그램개발) */
ul.para24_p10 > li{font-size: 0.75rem;}


/* para24_num(line-height:1.2rem, padding-bottom:0.5rem;)
서브 숫자가 붙는 내용 */
ul.para24_num > li{font-size: 0.75rem;}


/* 서브 정렬 및 강조가 필요한 내용(사용 : 프로그램개발, 회원가입-약관) */
.top_tit{display:block; font-size:0.8rem; font-weight: bold; color: #000; margin-bottom: 1rem;}
.trem{margin-bottom:1rem; font-size: 0.75rem;}

/* table */
/* 반응형table - tbl_type1 */
.notice_wrap .tbl_type1 table tbody td{font-size: 0.7rem; padding-left: 90px;}
.notice_wrap .tbl_type1 table tbody td:before{left: 0;font-size: 0.75rem; width: 80px;}

/* width */
.w99mo{width: 99%!important; }

}