@charset "UTF-8";

/**************
 flex
**************/
.flex{display:flex;}
.align_center{align-items: center;}
.align_end{align-items: baseline;}
.flex-wrap{flex-wrap:wrap;}

/**************
 flex
**************/
.ml-auto{margin-left:auto;}


/* bottom border box */
.bottom_borderBox{margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid #f2f2f2;}

/*******************
 hover effect
*******************/
._hover{transition:box-shadow 0.15s ease;}
._hover:hover{box-shadow:0.2rem 0.2rem 0.5rem rgb(0,0,0,.3)}

@media screen and (max-width:767px){
  ._hover:hover{box-shadow:none;}
}


/**************
 typography
**************/

._dot{position:relative; padding-left:0.75em;}
._dot:before{content:"·"; display:inline-block; position:absolute; top:0; left:0;}

/**************
     title
**************/
.tit_sub_bg{margin-bottom:3rem; padding:1rem 3rem; font-size:2.1rem; font-weight:400; color:#000; background-color:#f4f4f4;}

/* 페이지 타이틀 그룹 */
.tit_bar{display:flex; align-items: center; margin-bottom:3rem;}
.tit_bar .tit_page{margin-bottom:0;}

@media screen and (max-width:767px){
  .tit_sub_bg{margin-bottom:1rem; font-size:3rem;}
  .tit_bar{margin-bottom:4rem;}
  .tit_bar .tit_page{flex:1;}
  .tit_group{margin-bottom:5rem; padding-top:2rem; padding-bottom:2rem;}
  .tit_group .tit{font-size:3rem;}
}

/**************
 버튼
**************/

/* button 기능 */
.btn_border{color:#373242; border-color:#a7a7ac; background-color:#fff;}
.btn.disabled{opacity:.3; cursor:default;}
.btn_download:after{content:""; display:inline-block; width:1.6rem; height:1.6rem; margin-left:1rem; background:url(../img/ico_download.png) no-repeat top left / cover;}

.btn_tbl{display:inline-block; padding:0.5rem 0.8rem; font-size:1.8rem; font-weight:300; text-align:center; color:#343538; line-height:1.5; border:1px solid #ddd;}

/* 취소버튼 */
.btn_cancel{width:4rem; margin-right:1.5rem; border:1px solid #e6e6e6; transition:all 0.1s ease;}
.btn_cancel:hover{box-shadow: .5rem .5rem 1rem rgba(0,0,0,.2);}
.btn_cancel img{width:100%;}



@media screen and (max-width:767px){/* button basic */
 .btn{height:8rem; font-size:3rem;}

 /* button small */
 .btn_sm{height:7.5rem; padding:0 2.5rem; font-size:2.8rem;}

 .btn:not(.disabled):hover,
 .btn_sm:hover{box-shadow: none;}

 /* button 기능 */
 .btn_download:after{width:2.2rem; height:2.2rem; margin-left:1.4rem;}
 .btn_help{width:3rem; height:3rem; font-size:2rem; border-radius:50%; background-color:#ddd;}
 .btn_tbl{padding:2rem; font-size:2.4rem; font-weight:400;}

 /* 취소버튼 */
 .btn_cancel{width:4.6rem; margin-right:2rem;}
 .btn_cancel:hover{box-shadow:none;}
}


/*****************
 form
*****************/


/* 첨부파일 */
.form_file{display: inline-block; position:relative; cursor:pointer;}
.form_file input[type='file']{position:absolute; top:0; left:0; width:0; height:0; opacity:0;}
.form_file .label{width:100%;}

@media screen and (max-width:767px){/* input text */

 /* checkbox */
 .form_check .label{font-size:3rem;}
 .form_check .label._before:before{width:3rem; height:3rem; margin-right:2rem;}
 .form_check .label._after:after{width:3rem; height:3rem; margin-left:2rem;}
}

/* reset 버튼 */
.form_text_reset{display:inline-flex; align-items: center; position:relative; border:1px solid #d9d9d9;}
.form_text_reset .form_text{flex:1 0 0%; width:100%; min-width:0; border:0; padding-right:3.5rem;}
.form_text_reset .btn_clear{position:absolute; top:0; right:0; padding:0 1rem; height:100%; opacity:0; user-select: none; cursor:default;}
.form_text_reset.clear .btn_clear{display:block; opacity:0.6; cursor: pointer;}
.form_text_reset .btn_clear img{width:1.8rem; vertical-align: middle;}
.form_text_reset .form_text:read-only~.btn_clear,
.form_text_reset .form_text:disabled~.btn_clear{display:none;}

@media screen and (max-width:767px){
 .form_text_reset .form_text{padding-right:7rem;}
 .form_text_reset .btn_clear{padding:0 2rem;}
 .form_text_reset .btn_clear img{width:3rem;}
 }


/*****************
 table layout
*****************/

/* 데이터 테이블 type2 */
.tbl_info thead th{padding:1.2rem 0; font-weight:400; color:#000; background-color:#f7f7f7;}
.tbl_info tbody th{padding:0.5rem 0; font-weight:400; border-bottom:1px solid #e0e0e0;}
.tbl_info tbody td{padding:2rem; font-weight:200; border-bottom:1px solid #e0e0e0; border-left:1px solid #e0e0e0;}
.tbl_info tbody td:nth-of-type(1){border-left:0;}
.tit_circle{display:inline-flex; justify-content: center; align-items: center; width:11.2rem; height:11.2rem; font-weight:400; line-height:1.3; color:#000; border:1px solid #d6d6d6; border-radius: 50%;}

@media screen and (max-width:767px){
  .tit_circle{width:14.3rem; height:14.3rem; font-size:3rem;}
}

/* 모바일 테이블 */
@media screen and (max-width:767px){
  .tbl_m_layout, .tbl_m_layout tbody, .tbl_m_layout tr, .tbl_m_layout th, .tbl_m_layout td{display:block;}
  .tbl_m_layout thead{display:none;}
  .tbl_m_layout tr{padding:3rem 1rem; border-bottom:1px solid #e0e0e0;}
  .tbl_m_layout tr:after{content:""; display:block; clear:both;}
  .tbl_m_layout td{float:left; margin-bottom:2rem; padding:0; border:0;}
  .tbl_m_layout td+td{margin-left:2rem; padding-left:2rem; border-left:1px solid #e0e0e0;}
  .tbl_m_layout .m_buttons{display:flex; width:100%; margin-bottom:0; margin-left:0; padding-left:0; border:0;}
  .tbl_m_layout .m_buttons .btn_tbl{flex:1; margin-right:2rem;}
  .tbl_m_layout .m_buttons .btn_tbl:last-child{margin-right:0;}
  .tbl_m_layout .cf_l{clear:left; margin-left:0; padding-left:0; border-left:0;}
}

/*************************
 toast message
**************************/
.toast{position:fixed; bottom:-5rem; left:50%; transform:translateX(-50%); opacity:0; z-index:1000;}
.toast.show{animation:fadein 0.5s ease alternate forwards, fadeout 0.5s 1.5s ease alternate forwards;}
.toast .msg{padding:1rem 3rem; line-height:1; color:#fff; border:1px solid #ddd; border-radius:1rem; background-color:rgba(0,0,0,.6); box-shadow: 0 0 1rem rgba(0,0,0,.2);}

@keyframes fadein{
  0%{bottom:-5rem; opacity:0;}
  100%{bottom:2rem; opacity:1;}
}

@keyframes fadeout{
  0%{bottom:2rem; opacity:1;}
  100% {opacity:0;}
}

@media screen and (max-width:767px){
  .toast{position:fixed; bottom:-5rem; left:50%; transform:translateX(-50%); opacity:0; z-index:1000;}
  .toast .msg{padding:2rem 4rem; font-size: 3.5rem;; line-height:1; color:#fff; border:0; border-radius:2em; background-color:rgba(0,0,0,.5); box-shadow: none;}

  @keyframes fadein{
    0%{bottom:-5rem; opacity:0;}
    100%{bottom:4rem; opacity:1;}
  }
  @keyframes fadeout{
    0%{bottom:4rem; opacity:1;}
    100% {opacity:0;}
 }
}


/*****************
 sns 공유하기
*****************/
.sns_share{position:relative; z-index:1;}
/* 공유하기 버튼 */
.btn_sns_share{display: flex; align-items: center; justify-content: center; position:relative; width:5.8rem; height:5.8rem; border:2px solid #e6e6e6; border-radius:50%; z-index:1;}
.btn_sns_share img{width:100%;}
.btn_sns_share .ico_open{transition:all 0.2s ease;}
.btn_sns_share.opened .ico_open{transition:all 0.1s ease; opacity:0; transform:rotate(-90deg);}
.btn_sns_share .ico_close{display:block; position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transform:rotate(90deg); transition:all 0.1s ease;}
.btn_sns_share.opened .ico_close{opacity:1; transform:rotate(0); transition:all 0.3s ease;}
/* sns list */
.list_sns{position:absolute; top:0; right:calc(100% + 1.5rem); border:2px solid #e6e6e6; border-radius:2em; background-color:#fff; overflow:hidden; transform-origin: right center; transform:scaleX(0);}
.list_sns ul{display: flex; padding:0.9rem;}
.list_sns li+li{margin-left:0.7rem;}
.list_sns a{display:block; width:3.6rem; border-radius:50%; overflow:hidden;}
.list_sns a img{width:100%; border-radius:50%;}

@media screen and (max-width:767px){/* 공유하기 버튼 */
 .btn_sns_share{width:6.8rem; height:6.8rem;}
 /* sns list */
 .list_sns a{width:4rem;}
 }

/**********************
 box style layout
***********************/

.box_header.bg{background-color:#f5f5f5;}

.box_bottom{padding:3rem; border-top:1px solid #e0e0e0; background-color:#f5f5f5;}

/* popup data table */
/* .popup .box_header{font-size:2.1rem; padding:1.5rem 2rem;}
.popup .tit{font-size:2.1rem; font-weight:400;}
.popup .tit_sub{font-size:1.8rem;}
.popup .tit_section{font-size: 2.1rem;}
.popup .box_body{padding:0 2rem; font-size:1.8rem; background-color:#f4f4f4;}
.popup .box_body.bg_white{padding:2rem; background-color:#fff;}
.popup .tbl_layout{font-size: 1.8rem;}
.popup .tbl_popup{font-size:1.8rem;}
.popup .tbl_popup th{padding:1rem 0; text-align:left; font-weight:400; border-top:1px solid #ddd;}
.popup .tbl_popup td{padding:1rem 0; border-top:1px solid #ddd;}
.popup .tbl_popup tr:first-child th,
.popup .tbl_popup tr:first-child td{border-top:0;} */

@media screen and (max-width:767px){
 /* .box_header{display:block; padding:0; border-bottom:0;}
 .box_header.bg{background-color:#f5f5f5;}
 .box_header .tit_section{padding:2rem; text-align:center; border-bottom:1px solid #e0e0e0;}
 .box_header .btn_group{display:flex; padding:2rem; background-color:#fff;}
 .box_header .btn_group .btn_sm{flex:1;}
 .box_header .btn_group .btn_sm+.btn_sm{margin-left:2rem;} */

 /* popup data table */
 /* .popup .box_header{font-size:2.8rem;}
 .popup .tit{font-size:2.8rem;}
 .popup .tit_sub{font-size:3rem;}
 .popup .tit_section{font-size: 3rem;}
 .popup .box_body{font-size:2.4rem;}
 .popup .tbl_layout{font-size: 2.4rem;}
 .popup .tbl_popup{font-size:2.4rem;} */
 }

/* 첨부파일 */
.attach_file{display:inline-flex; align-items: center; padding:0.5rem; background-color:#fff; transition:all 0.15s ease;}
.attach_file .file_name{flex:1 0 0%; padding:0 1.5rem; font-size:1.8rem; color:#555; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden;}
.attach_file:hover{box-shadow: 0 0 0.5rem rgba(0,0,0,.2);}
.attach_file .btn_sm:hover{box-shadow: none;}

/* 첨부파일 리스트 */
.download_file_list{display:flex; flex-wrap: wrap; justify-content: space-between; margin-bottom:-0.5rem;}
.download_file_list .attach_file{width:100%;}
.download_file_list li{width:calc((100% - 1.5rem) / 2); margin-bottom:0.5rem;}

.box_body .board_view{word-break:break-all; color:#555;}
.box_body .board_view img{max-width:100%;}

@media screen and (max-width:767px){/* 첨부파일 */
 .attach_file{display:inline-flex; align-items: center; padding:0.5rem; background-color:#fff;}
 .attach_file .file_name{flex:1 0 0%; padding:0 3.5rem; font-size:2.6rem;}

 /* 첨부파일 리스트 */
 .download_file_list{display:block; margin-bottom:-1rem;}
 .download_file_list li{width:100%; margin-bottom:1rem;}
 .attach_file:hover{box-shadow: none;}
 }

/**************
 데이터 박스
**************/
.info_box {}

/* layout */
.column_2{display:flex; flex-wrap: wrap;}
.column_2 .col{width:calc((100% - 2rem) / 2); margin-top:2rem;}
.column_2 .col:nth-of-type(2n){margin-left:2rem;}
.column_2 .col:nth-child(-n+2){margin-top:0;}
.column_3{display:flex; flex-wrap: wrap;}
.column_3 .col{width:calc((100% - 4rem) / 3); margin-right:2rem; margin-top:2rem;}
.column_3 .col:nth-of-type(3n){margin-right:0;}
.column_3 .col:nth-child(-n+3){margin-top:0;}
.column_7{display:flex; flex-wrap: wrap; align-items: stretch; margin-bottom:-1rem;}
.column_7 .col{width:calc((100% - 6rem) / 7); min-width: 0; margin-right:1rem; margin-bottom:1rem;}
.column_7 .col:nth-of-type(7n){margin-right:0;}

@media screen and (max-width:767px){
 .column_2{flex-direction: column;}
 .column_2 .col{width:100%;}
 .column_2 .col+.col{margin-left:0; margin-top:4rem;}
 .column_3{display:flex; flex-wrap: wrap;}
 .column_3 .col{width:100%; margin-right:0;}
 .column_3 .col+.col{margin-top:4rem;}
 .column_3 .col:nth-of-type(3n){margin-right:0;}
 }

/*****************
 tile contents
******************/
.tiles_info{display:flex; flex-wrap: wrap; justify-content: space-between; margin-bottom:-4.5rem;}
.tiles_info .tiles{display:flex; flex-direction: column; width:calc((100% - 4.5rem) / 2); margin-bottom:4.5rem; padding:1.5rem; border:1px solid #e9e9e9;}
.tiles_info .tit{display:flex; align-items: center; min-height:7.2rem; padding:0 0 0 2rem; font-size:2.4rem; font-weight:400; color:#e03234;}
.tiles_info .img{margin-right:1rem;}
.tiles_info .txt{flex:1; padding:3rem; color:#54535e; background-color:#f7f7f7;}
.tiles_info .txt dt{color:#e03234;}
.tiles_info .tit+.txt{margin-top:2rem;}
.tiles_info .bottom{margin-top:2rem; text-align:right;}

@media screen and (max-width:767px){
 .tiles_info{margin-bottom:-4.5rem;}
 .tiles_info .tiles{width:100%; padding:0; border:0;}
 .tiles_info .tit{display:flex; align-items: center; min-height:auto; padding:0 0 0 2rem; font-size:3.2rem;}
 .tiles_info .img{width:7.5rem; margin-right:2rem;}
 .tiles_info .img img{width:100%;}
 .tiles_info .txt{font-size:2.8rem; padding:4rem;}
 .tiles_info .txt .text-xs{font-size:2.4rem;}
 .tiles_info .tit+.txt{margin-top:3rem;}
 .tiles_info .bottom{margin-top:0; padding:0 3rem 3rem 3rem; background-color:#f7f7f7;}
 }

.full_tiles_info{border-bottom:1px solid #e0e0e0;}
.full_tiles_info .tiles_header{padding:2.3rem; font-size:2.1rem; font-weight:400; color:#000; background-color:#f4f4f4;}
.full_tiles_info .tiles_header:before{content:""; display:inline-block; width:1.4rem; height:1.4rem; margin-right:1.4rem; border-radius:50%; background-color:#fff;}
.full_tiles_info .tiles_body{display:flex; padding:4rem 4rem 5rem 1rem;}
.full_tiles_info .tiles_icon{width:12rem;}
.full_tiles_info .tiles_icon img{width:7.2rem;}
.full_tiles_info .tiles_cont{flex:1 1 0;}

@media screen and (max-width:767px){
 .full_tiles_info .tiles_header{padding:2rem 5rem; font-size:3.4rem; font-weight:500; color:#333; line-height:1.3;}
 .full_tiles_info .tiles_header:before{display:none;}
 .full_tiles_info .tiles_body{display:block; padding:3rem 0 8rem; font-size:2.8rem;}
 .full_tiles_info .tiles_icon{width:15rem; margin:0 auto 4rem;}
 .full_tiles_info .tiles_icon img{width:100%;}
 .full_tiles_info .tiles_cont{flex:1 1 0;}
 }

/**************
 검색영역
**************/

@media screen and (max-width:767px){
 .tbl_search, .tbl_search tbody, .tbl_search tr, .tbl_search th, .tbl_search td{display:block;}
 .tbl_search th{padding:3rem 0 1rem; font-size:3rem; border:0; background-color:transparent;}
 .tbl_search td{padding:0; border:0;}
 .tbl_search th+td{border:0;}
 }