@charset "UTF-8";

/*일반게시판 list_A*/
.board-top {margin-bottom: 15px;}
.board-top .total_txt { display: inline-block;color: #222222; font-size: 15px;}
.board-top .total_txt span { color: #005bac;font-weight: 600;}


@media screen and (max-width:767px){
    .board-top{ margin-bottom: 14px} 
    .board-top .total_txt{ font-size: 1rem} 
}

/* 아이콘 */
.icon_download {display: inline-block;}
.icon_download + .icon_download {margin-left: 20px;}
.icon_download::before {display: inline-block;margin-right: 10px;width: 18px;height: 25px;content: "";background: url(../img/comm/icon_download.png) no-repeat 0 0;vertical-align: middle;}
.icon_download span {color: #004ea2;}
@media screen and (max-width:767px){
    .icon_download::before{ margin-right: 5px; width: 10px; height: 15px; background-size: 10px; flex-shrink: 0; margin-top: 2px} 
}

/*일반게시판 list_B_알림마당_가스사고현황*/
.content .sub_tit .level{display: flex;}
.content .sub_tit .level li img{ margin: 0 11px 0 28px ;}
.content .sub_tit .level li img:first-child{margin-left: 0;}
.content .sub_tit .level li {margin: 19px 15px 10px 0;}

@media screen and (max-width:1023px){
    .content .sub_tit .level{ gap:10px; margin-top:18px; flex-wrap: wrap} 
    .content .sub_tit .level li{ margin: 0; flex-basis: calc(50% - 10px);} 
    .table-theme__default td[data-th="가스사고정도"]{ vertical-align: middle} 
    .table-theme__default td[data-th="가스사고정도"] img{ width: 18px !important; max-width: none; vertical-align: middle} 
}
@media screen and (max-width:767px){
    .content .sub_tit .level li img{ width: 18px; margin: 0; margin-right: 8px}
    .content .sub_tit .level{ margin-left: -80px} 
    
}



/*일반게시판 list_C_사전정보공표*/
.content .sub_tit + h4 {margin-top: 40px;}
.content .sub_tit + h4::before { content: ""; display: inline-block; margin-right: 10px; width: 14px; height: 14px; background: url(../img/comm/bullet.png)no-repeat 0 0; }
.tab_list {display: flex;font-size: 1.143rem; color: #606060; width: 100%; margin-bottom: 20px ;}
.tab_list li {margin-left: -1px;width: 33.333%;}
.tab_list li button { position: relative;padding:  1.286rem 0; width: 100%;border: 1px solid #d9d9d9; color: #838281; font-size: 1.143rem; line-height: 1; font-weight: 500;}
.tab_list li.active button { border-bottom: none;}
.tab_list li.active button::before { position: absolute;top: -4px;left: 0;display: inline-block;content: "";width: 100%;height: 4px;background-color: #00a6e7;}

@media screen and (max-width:767px){
 .tab_list { width: auto; min-width: 100%; overflow-x: auto; align-items: flex-start; padding-top: 4px }
    .tab_list li{ width: auto; flex-basis: 50% }    
    .tab_list li button{ padding:  1rem 10px; line-height: 1.5; width: 100%; height: 100%; white-space: nowrap; font-size: 1.071rem; font-weight: 400} 
}


/*일반게시판-view*/
.view_area{border-top:1px solid #005bac;}
.view_area .view_title{overflow: hidden;border-bottom: 1px solid #666;}
.view_area .view_title th,
.view_area .view_title td {border-top: 1px solid #d9d9d9;padding: 15px 20px;}
.view_area .view_title th {background-color: #f9f9f9;color: #222;font-size: 1.071rem;vertical-align: middle;font-weight: 600;}
.view_area .view_title td.title {font-weight: 600;font-size: 1.071rem;}

.view_area .view_title .icon_download span{color: #0154a4;}
.view_area .view_content{padding:40px 30px 100px 30px;}
.view_area .view_content p{line-height: 2rem;margin-bottom: 10px;}
.view_area .view_content img{display: block;margin: 30px auto;max-width: 100%;}
.view_area .board-navi_link{border-top: 1px solid #666;border-bottom: 1px solid #666;}
.view_area .board-navi_link li{display: flex;align-items: center;}
.view_area .board-navi_link .board-navi_prev{border-bottom: 1px solid #d9d9d9;}
.view_area .board-navi_link li .board-navi_link-title{background-color: #f9f9f9;color: #222222;padding: 10px 30px;display: flex;align-items:center;font-size: 1.071rem;}
.view_area .board-navi_link li .board-navi_link-title::before{ font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "remixicon"; content: "\ea78"; display: inline-block; font-size: 20px; color: #999999; margin-right: 10px; } 
.view_area .board-navi_link .board-navi_next .board-navi_link-title::before{transform: rotate(180deg);}
.view_area .board-navi_link li .board-navi_link-text{color: #606060;padding-left: 20px;}
.view_area .view_button{overflow: hidden;margin: 20px 0 50px 0;}
.view_area .view_button a{color: #f9f9f9;font-weight: 400;text-align: center;float: right;display: inline-block;background-color: #0154a4;width: 100px;height: 38px;padding: 5px 0;}
@media screen and (max-width:767px){
    .view_area .view_title colgroup{ display: none} 
    .view_area .view_title, .view_area .view_title tbody{ table-layout: auto; display: block} 
    .view_area .view_title tbody tr{ display: flex;border-top: 1px solid #d9d9d9;flex-wrap: wrap } 
    .view_area .view_title th{ display: none}  
    .view_area .view_title td{ padding:  15px 0 15px 8px; font-size: 1rem; border: none }
    .view_area .view_title td[data-th]{ flex:1 0 50%; font-weight: 500; text-align: left; color: #606060; padding: 0; display: flex; min-height: 40px;overflow: hidden; } 
	.view_area .view_title td[data-th]:before{ content: attr(data-th) " ";  font-weight: 300; padding: 10px; color: #666; background: #f9f9f9; margin-right: 10px; align-items: baseline; min-width:45px; text-align: center } 
    .view_area .view_title td[data-th] .icon_download{ display: flex; padding: 0px 0} 
    .view_area .view_title td[data-th="파일"]{ flex-direction: column; align-items: flex-start; position: relative; padding-left:75px} 
    .view_area .view_title td[data-th="파일"]:before{position: absolute; left: 0; top: 0; height: 100%} 
    .view_area .view_title [data-th="조회수"]{ display: none !important} 
    .view_area .view_title  .icon_download + .icon_download{ margin-left: 0; padding-top: 4px !important} 
    .view_area .view_content{ padding: 30px 0 70px 0} 
    .view_area .board-navi_link li .board-navi_link-title{ padding:5px 10px; font-size: 0.917rem} 
    .view_area .board-navi_link li .board-navi_link-text{ padding: 5px 10px;; font-size: 0.917rem} 
    .view_area .view_button a{ height: 30.5px; line-height: 30.5px; padding: 0 10px; width: auto; min-width: 70px} 
    .view_area .view_title td[data-th]{ position: relative; padding: 10px 0 10px 75px} 
    .view_area .view_title td[data-th]:before{position: absolute; left: 0; top: 0; height: 100%}
    .view_area .board-navi_link li .board-navi_link-title::before{ margin-right: 5px; font-size: 15px} 
    .view_area .board-navi_link li{align-items: inherit} 
    .view_area .view_title tr td[data-th]:nth-of-type(3), .view_area .view_title td[data-th]:nth-of-type(4){ border-top: 1px solid #d9d9d9} 
    .view_area .view_title tr td[data-th="등록일"]{ border-top: none !important} 
    .view_area .view_title .icon_download span{ word-break: break-all} 
}
/*다운로드 게시판*/

.content>p{margin: 25px 30px;}
.download-board tbody tr{vertical-align: revert;}
.download-board tbody{border-top: 2px solid #005bac;}
.download-board tbody tr td{position: relative;vertical-align: middle;}
.download-board tbody tr>tr td:first-of-type{text-align: center;}
.download-board tbody tr td:first-child:after{display: block;content: "";width: 1px;height: 40%;position: absolute;top: 30%;right: 0;background-color: #e4e2e2;}
.download-board tbody tr td:last-of-type .icon_download{display: inline-block ;border: 1px solid #e1e1e1;width: 100%;height: 35px;padding: 4px 0 4px 15px;background: url(../img/sub/btn_download.png)no-repeat;background-position: 15% 50%;}
.download-board tbody tr td:last-of-type .icon_download span {margin-left: 5px;}


/*다운로드 게시판 A*/
.down_a tbody {color: #606060;}
.down_a tbody tr .tit{white-space: normal;}
.down_a tbody tr td{padding: 8px 15px;}
.down_a tbody tr td:nth-of-type(4)::before{display: block;content: "";width: 1px;height: 40%;position: absolute;top: 30%;left: 0;background-color: #e4e2e2;}
.down_a tbody tr .sortation::before{display: block;content: "";width: 1px;height: 40%;position: absolute;top: 30%;left: 0;background-color: #e4e2e2;}


/*다운로드 게시판 B*/
.down_b tbody tr:nth-of-type(2n){border-bottom: 1.1px solid #333;}
.down_b tbody tr:nth-of-type(2n) td:after{display: none;}
.down_b tbody>tr:nth-of-type(2n-1) td:nth-of-type(3)::before{display: block;content: "";width: 1px;height: 40%;position: absolute;top: 30%;left: 0;background-color: #e4e2e2;}
.down_b tbody tr td:nth-of-type(2) a{font-weight: 500;}
.down_b tbody tr:nth-of-type(2n-1) td:nth-of-type(3){color: #606060;}
.down_b tbody tr:nth-of-type(2n) td:nth-of-type(2){color: #606060;text-align: left;}
.down_b tbody tr tr td:nth-of-type(2){text-align: right;}

@media screen and (max-width:767px){
   .download-board table, .download-board tbody { display: block} 
    .download-board tbody tr{ display: flex; width: 100%;   border-bottom: 1px solid #e1e1e1;justify-content: space-between; align-items: center } 
    .download-board tbody tr td{ border: none; padding: 0; padding: 10px 0} 
    .download-board tbody tr td.tit{} 
    .download-board td .bt-download_wh{padding: 0 8px; height: 30px; font-size: 1rem; line-height: 28px; display: flex; align-items: center } 
    .download-board tbody tr td:first-child:after,  .download-board.down_a tbody tr td:nth-of-type(4)::before{ display: none} 
    .download-board tbody tr .sortation,  .download-board.down_a tbody tr td[data-th="등록일"],   .download-board tbody tr td[data-th="번호"],  .download-board.down_b tbody tr td[data-th="등록일"]:before{ display: none}    
    .download-board tbody tr td.tit{ flex-basis: calc(100% - 95px)} 
    .download-board.down_b tbody tr{ position: relative; align-items: flex-start; flex-wrap: wrap} 
    
    .download-board.down_b tbody tr td[data-th="내용"]{ flex-basis: 100%; flex-shrink: 0} 
    .download-board.down_b tbody tr td[data-th="다운로드"]{ position: absolute; right: 0; top: 0; transform: translateY(-50px)} 
    .download-board.down_b tbody tr td[data-th="등록일"]{ flex-basis: 100%; text-align: left; padding-top: 0; } 
    .download-board.down_b tbody tr td.tit{ padding-bottom: 0} 
    
}


/*웹진형 게시판*/
.webzine{border-top: 1px solid #0253a5;}
.webzine a:hover{color: #0253a5;text-decoration: underline;}
.webzine .webzine_box .webzine-top,
.webzine .webzine_box .webzine-bottom{display: flex;}
.webzine .webzine_box .webzine-bottom{border-bottom: 1px solid #999999; padding: 20px 0 30px;}
.webzine .webzine_box .webzine-top{border-bottom: 1px solid #e1e1e1 ;padding: 12px 0;height: 50px;font-size: 0;}
.webzine .webzine_box .webzine-top li{padding: 0 20px;position: relative;font-size: 1rem; }
.webzine .webzine_box .webzine-top li:first-child {flex-basis: 70px;}
.webzine .webzine_box .webzine-top li > a {display: inline-block;;width: 650px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 1.071rem;}
.webzine .webzine_box .webzine-top li:nth-of-type(2){flex-grow: 1;}
.webzine .webzine_box .webzine-top li:not(:first-of-type)::before{display: block;content: "";width: 1px;height: 70%;position: absolute;top: 15%;left: 0;background-color: #e1e1e1;}
.webzine .webzine_box .webzine-top li:nth-of-type(2){font-weight: 500;color: #606060;}
.webzine .webzine_box .webzine-bottom .webzine_img_w{width: 35%;height:160px;overflow: hidden}/*20220204수정*/
.webzine .webzine_box .webzine-bottom .webzine_img_w img{width:100%;height:100%;object-fit:cover}/*20220204수정*/
.webzine .webzine_box .webzine-bottom .webzine_txt{width: 75%;margin-left: 25px;display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 5; width: 100%;height: 10.429rem;overflow: hidden;line-height: 2;font-weight: 300;}

@media screen and (max-width:767px){
    .webzine .webzine_box { flex-basis:50%; padding:0px 10px 30px 0 ; margin: 0 !important; position: relative; display: flex; flex-direction: column } 
    
    .webzine .webzine_box .webzine-top{ display: block} 
    .webzine .webzine_box .webzine-top li{ padding: 0; color: #999; width: 100%;} 
    .webzine .webzine_box .webzine-top li:before, .webzine .webzine_box .webzine-top li:first-child{ display: none !important }
    .webzine .webzine_box .webzine-top li > a{width: 100%; display: block; white-space: normal;overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%;height: 3.429rem; color: #222} 
    .webzine .webzine_box .webzine-top{ height: 100%; position: absolute; left: 0; top: 60%; z-index: 3 ; width: 100%; border: none; padding-bottom: 25px; }  /*20220204-수정*/
    .webzine .webzine_box .webzine-top li:last-of-type{ display: none} 
    .webzine .webzine_box .webzine-bottom{ display: block; position: relative; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; padding-bottom: 0; border: none; padding: 20px 0 10px 0} 
    .webzine{ display: flex;flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin: 15px 0; overflow: visible} 
   
    .webzine .webzine_box .webzine-bottom .webzine_img_w{ width: 100%; margin-bottom: 4.75rem } 
    .webzine .webzine_box .webzine-bottom .webzine_img_w img{ width: 100%} 
    .webzine_box:nth-of-type(2n){ padding-right: 0; padding-left: 10px} 
    .webzine .webzine_box .webzine-bottom .webzine_txt{ margin: 0;overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%;height: 4.54rem;line-height: 1.5;  position: relative; z-index: 4 } 
    .webzine .webzine_box .webzine-top li > a{display: block; box-sizing: content-box;  width: calc(100% - 10px) } /*20220204-수정*/

    .webzine .webzine_box:nth-of-type(2n) .webzine-top li > a{ padding-left: 10px; padding-right: 0} 
    .webzine .webzine_box .webzine-top li:nth-of-type(3){  position: absolute; top: 30%}  /*20220204-수정*/
    .webzine .webzine_box:nth-of-type(2n) .webzine-top li:nth-of-type(3){ left: 10px} 
    .webzine .webzine_box .webzine-top li:nth-of-type(2){position: absolute; left: 0; top: 0; z-index: 3} 
}


/*갤러리형 게시판*/
.garllery_list{display: flex;flex-wrap: wrap;border-top: 1px solid #0253a5;border-bottom: 1px solid #999999;}
.garllery_list .garllery_box{width:calc( (100% - 80px) / 3);padding-top: 30px;margin-left: 40px;}
.garllery_list .garllery_box:last-child {padding-bottom: 40px;}
.garllery_list .garllery_box:nth-child(3n-2) {margin-left: 0;}
.garllery_list .garllery_box > a {display: inline-block;width: 100%;}
.garllery_list .garllery_box .garllery_text .title{padding-top: 20px;min-height: 70px;font-size: 1.143rem;font-weight: 500;line-height: 1.3;}
.garllery_list .garllery_box .garllery_text .text{padding-bottom: 10px;overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 100%;height: 3.429rem; font-size: 0.923rem}
.garllery_list .garllery_box .garllery_text .title {color: #606060;}
.garllery_list .garllery_box .garllery_text span {color: #999;}

/*다운로드 게시판 C(다운로드 갤러리 게시판)*/
.down_garllery .garllery_box .garllery_text .title{min-height: 55px;color: #222;}
.down_garllery .garllery_box .garllery_text span{color: #757575;font-weight: 300;font-size: 14px;}
.down_garllery .garllery_box .garllery_img{width: 100%;height: 390px;}
.down_garllery .garllery_box .garllery_img img{width: 100%; height: 100%;}
@media screen and (max-width:767px){
    .garllery_list{ justify-content: space-between; padding-top: 10px}   
    .garllery_list .garllery_box{ flex-basis:50%; padding:0px 10px 30px 0 ; margin: 0 !important } 
    .down_garllery .garllery_box .garllery_img{ height: auto} 
    .garllery_list .garllery_box:nth-of-type(2n){ padding-right: 0; padding-left: 10px} 
    .down_garllery .garllery_box .garllery_text .title{ padding-top: 15px; font-size:1.084rem} 
    .down_garllery .garllery_box .garllery_text span{ font-size: 1rem} 
}
/*faq 아코디언 게시판*/
.faq-list {border-top: 1px solid #e1e1e1;}
.faq-list:first-of-type {border-top: 2px solid #0253a5;}
.faq-list:last-of-type {border-bottom: 1px solid #e1e1e1;}
.faq-list > .faq_question {}
.faq-list .info_list {display: flex;align-items: center;margin: 20px;}
.faq-list .info_list li {position: relative;display: inline-block;margin: 0 20px;}
.faq-list .info_list li:first-of-type {margin-left: 0;}
.faq-list .info_list li.number {width: 50px;}
.faq-list .info_list li.sort {text-align: center;color: #606060;font-weight: 300;}
.faq-list .info_list li:not(:first-child):before {position: absolute;top: 50%;left: -20px;transform: translate(-50%,-50%);display: inline-block;content: "";background-color: #e1e1e1;width: 1px;height: 14px;}
.faq-list .info_list .text {flex: auto;width: 100%;margin: 0;}
.faq-list .info_list .text h4 {display: inline-block;width: 100%;color: #222222;font-weight: 500;font-size: 1.071rem;}
.faq-list .info_list .text h4 a {display: inline-block;width: 100%;}
.faq-list .info_list .text h4 a:hover,
.faq-list .info_list .text h4 a:active {color: #0253a5;text-decoration: underline;}
.faq-list .faq_con_wrap {display: none;padding: 30px 100px;border-top: 1px solid #e1e1e1;background-color: #f9f9f9;}
.faq-list .faq_con_wrap .faq_con pre {white-space: pre-wrap;}

@media screen and (max-width:767px){
    .faq-list .info_list{ flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin: 15px 0} 
    .faq-list .info_list li{ order: 3; text-align: left !important; margin: 0} 
    .faq-list .info_list li.number{ display: none} 
    .faq-list .info_list li:before{ display: none !important} 
    .faq-list .info_list li.sort{ order: 1; flex-basis: 100%} 
    .faq-list .info_list .text{ order: 2; flex-basis: calc(100% - 70px)} 
    .faq-list .faq_con_wrap{ padding:30px 20px } 
  
}