@charset "utf-8";

@media only screen and (hover: none) and (pointer: coarse) {
  .pc { display: none; }
  .m-hidden { display: none; visibility: hidden; height: 0px;}
  header nav .none { display: none !important; }
  header .desk_user { display: none;}
  header { display: none; }
  .reactive-header { display: flex; }
  .reactive-header .logo img { width: 179px; height: 37px; }
}

@media not all and (min-width: 1280px) {
  /* header nav { display: none;} */
  .center-wrap { max-width: 100%; padding: 0 16px;}

  /*!* header *!*/
  /* header { min-width: auto; height: 60px;}
  header nav { position: absolute; top: 60px; right: 0; width: 65%; max-width: 500px; height: calc(100vh - 60px); margin: 0; line-height: normal; background-color: #fff; box-shadow: -5px 6px 8px 0 rgba(0, 0, 0, 0.16); overflow-y: auto; display: none;}
  header nav >ul { display: block;}
  header nav >ul >li { padding: 0; border-bottom: 1px solid #C8C8C8;}
  header nav >ul >li:first-child { border-top: 1px solid #eee;}
  header nav >ul >li >a { height: 65px; padding: 12px 14px; font-size: 2.6rem; line-height: normal;}
  header nav >ul >li >a::before { content: none;}
  header nav >ul >li >a::after { content: ""; position:absolute; display: block; top: 2.5rem; right: 2.5rem; width: 8px; height: 13px; background-image: url(../images/gnb_arrow.png); background-size: cover; transition: all .3s;}
  header nav >ul >li.active >a { color: #156BDB;}
  header nav >ul >li.active >a::after { top: 2.5rem; right: 2.5rem; transform: rotate(90deg);}
  header nav >ul >li .depth2 { position: relative; top: auto; left: auto; transform: none; background-color: #f2f2f2;  border-top: 1px solid #c8c8c8; display: none;}
  header nav .depth2 >ul { display: block; min-height: auto;}
  header nav .depth2 >ul >li { width: 100%; padding: 0; border: 0; border-top: 1px solid #C8C8C8;}
  header nav .depth2 >ul >li:first-child { border: 0;}
  header nav .depth2 >ul >li >a { position: relative; padding: 6px 22px 8px; font-size: 2.5rem; font-weight: 400;}
  header nav .depth2 >ul >li:not(.not) >a::before,
  header nav .depth2 >ul >li:not(.not) >a::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 2px; background-color: #707070; transition: all .3s;}
  header nav .depth2 >ul >li:not(.not) >a::before { transform: translateY(-50%) rotate(-90deg);}
  header nav .depth2 >ul >li:not(.not) >a::before,
  header nav .depth2 >ul >li:not(.not) >a::after { right: 22px;}
  header nav .depth2 >ul >li.active:not(.not) >a::before { transform: translateY(-50%) rotate(0);}
  header nav .depth2 >ul >li:hover::before,
  header nav .depth2 >ul >li:hover::after { content: none;}
  header nav .depth2 >ul >li >ul { margin: 0; padding: 0 0 5px; border-top: 1px solid #c8c8c8; display: none;}
  header nav .depth2 >ul >li >ul >li { padding: 7px 30px;}
  header nav .depth2 >ul >li >ul >li:first-child { padding-top: 9px;}
  header nav .depth2 >ul >li >ul >li:not(:last-child) { margin: 0;}
  header nav .depth2 >ul >li >ul >li >a { color: #484848; font-size: 2.0rem; line-height:2.5rem; }

  header nav .m-hidden {visibility: hidden; height: 0px;}
  
  header .desk_user { display: none;}

  header .nav-bg { top: 60px; left: 0; transform: none; width: 100vw; height: calc(100vh - 60px); background-color: rgba(0, 0, 0, 0.3); box-shadow: none;}

  footer
  footer .center-wrap { padding: 20px 16px;}
  footer .link-box { margin-right: 0;} */
  footer .btm-area .right-area { width: 100% }

  /* content */
  article .content >.center-wrap { display: block;}
  article .content .snb { display: none;}
  article .content .cont-box { width: 100%; padding: 40px 0 100px; border: 0;}
  article .content .cont-box h3 { font-size: 2.8rem;}
  article .content .cont-box h3::before { content: ""; position: absolute; top: -10px; width: 40px; height: 2px; background-color: #2385CE;}
  article .content .cont .title +p:not(.title) { margin-left: 0;}
  
  .m-hidden { display: none; visibility: hidden; height: 0px;}
  /* #regioin 메뉴 수정 */
  header { display: none; }
  .reactive-header { display: flex; }
  .reactive-header .logo img { width: 179px; height: 37px; }
}

@media all and (min-width: 769px) and (max-width: 1279px) {
	footer .btm-area .right-area .text-area { width: 45%; }
  footer { min-width: auto;}
}

@media  all and (max-width: 1050px) {
  /* footer */
  footer .foot-cont { order: 3; padding: 15px 0 0;}
}

@media  all and (max-width: 850px) {
  /* box list */
  .box-list ul li { width: calc(33.33% - 10px);}
}

@media  all and (min-width: 769px){
  /* 글 등록,수정 - 파일첨부 */
  .file-list .none,
  .video-list .none { display: none !important;}
}

@media  all and (max-width: 768px){
  .wrapper { min-width: 280px;}
  
  header h1 i { width: 160px; height: 25px;}

  /* button comm */
  button { height: 30px; padding: 0 13px; font-size: 1.5rem; color: #fff; border-radius: 3px; transition: background .2s;}
  button.w70-black { min-width: auto;}
  button.w70-gray { min-width: auto;}
  button.w70-blue { min-width: auto;}
  button.w115-black { min-width: auto; padding: 0 20px;}
  .btn-box { display: flex;}
  .btn-box button { flex: 1; height: 35px;}
  .btn-box button ~button { margin-left: 5px;}

  /* input comm */
  input[type=text],
  input[type=password],
  input[type=tel],
  input[type=email] { height: 38px; padding: 0 10px; font-size: 1.4rem;}
  
  /* selectbox comm */
  .select-box select { height: 38px; padding: 0 25px 0 10px; font-size: 1.5rem; background-position: center right 9px; background-size: 8px;}
  .select-box select:focus { border-color: #ccc; box-shadow: none;}
  
  /* textarea comm */
  textarea { font-size: 1.4rem;}

  /* radio comm */
  .radio label span { font-size: 1.4rem;}
  .radio label span:before { width: 13px; height: 13px; margin: -2px 5px 0 0;}
  .radio label input[type=radio]:checked +span:before { box-shadow: inset 0 0 0 2px #fff;}

  /* check comm */
  .check-box label span::before { vertical-align: -3px; width: 15px; height: 15px; background-size: 7px;}

  /* sub page location */
  .location { height: 36px;}
  .location ul { height: 36px;}
  .location ul li ~li { margin-left: 15px;}
  .location ul li ~li::before { left: -11px;}
  .location ul li:first-child +li { margin-left: 20px;}
  .location ul li:first-child +li::before { left: -12px;}
  .location ul li,
  .location ul li a { font-size: 1.2rem;}
  .location ul li a i { width: 12px; height: 12px; background-size: cover;}

  /* footer */
  footer .center-wrap { padding: 10px 16px 20px;}
  /* footer img { width: 130px; margin-right: 20px; padding: 5px 0;} */
  footer .foot-cont { padding: 10px 0 0;}
  footer .foot-cont p { font-size: 1.3rem;}
  footer .foot-cont span { font-size: 1.2rem;}
  footer .link-box { margin: 5px 0;}
  footer .link-box div { width: 180px; height: 34px;}
  footer .link-box div p { font-size: 1.2rem; padding: 11px 12px;}
  footer .link-box div p::after { width: 7px; height: 6px;}
  footer .link-box div span { font-size: 1.2rem; line-height: 3.6rem;}
  footer .btm-area .right-area .text-area { width: 60%; }
  
  /* content */
  article .content .cont-box { padding: 36px 0 80px;}
  article .content .cont-box h3 { margin-bottom: 25px; font-size: 2rem; font-weight: bold;}
  article .content .cont-box h3::before { width: 25px; height: 2px;}
  article .content .cont-box .light { font-size: 1.4rem;}
  article .content .cont-box .light span { font-size: 1.5rem;}
  article .content .cont-box .light >br { display: none;}
  article .content .cont-box .regular { font-size: 1.4rem;}
  article .content .cont .info-box { padding: 15px 11px;}
  article .content .cont .info-box h6 { font-size: 1.4rem; line-height: 1.9rem;}
  article .content .cont .info-box h6 br { display: none;}
  article .content .cont h5.title { margin-left: 8px;}
  article .content .cont p.title { margin-left: 8px; font-size: 1.4rem; line-height: 1.9rem;}
  article .content .cont p.title br { display: none;}
  article .content .cont .title::before { left: -8px; top: 6px; width: 3px; height: 15px;}
  article .content .cont p.title::before { left: -8px; top: 4px;}
  article .content .cont .title +p:not(.title) { margin: -5px 0 10px; font-size: 1.4rem; line-height: 1.9rem;}
  article .content .cont .title +ul { margin-left: 9px;}
  article .content .cont .title +ul li { margin: 18px 0 0 10px;}
  article .content .cont .title +ul li strong { font-size: 1.4rem;}
  article .content .cont .title +ul li p { font-size: 1.4rem; line-height: 1.9rem;}

  /* title */
  .tit-square { margin-bottom: 10px; padding-left: 17px; font-size: 1.8rem; line-height: 2.6rem;}
  .tit-square::before { top: 3px; width: 8px; height: 18px;}
  .tit-circle { margin-bottom: 10px; padding-left: 23px; font-size: 1.5rem; line-height: 2.2rem;}
  .tit-circle::before { top: 3px;}
  .tit-circle-wrap { margin: 0 10px;}

  /* board */
  .board .info-box { margin-bottom: 20px;}
  .board .content .cont-box h3 { margin-bottom: 20px;}
  .board .board-info p { margin-top: 5px; font-size: 1.3rem;}
  .board .board-info .board-srch div { margin-top: 5px;}
  .board .board-info .board-srch input[type=text] { width: 140px; height: 30px;}
  .board .board-info .board-srch .cont { margin-top: 6px;}
  .board .board-info .board-srch .select-box select { min-width: auto; height: 30px; padding: 0 20px 0 7px; font-size: 1.3rem; background-position: center right 5px; background-size: 6px;}
  .board .board-info .board-srch button { width: 50px; height: 30px; margin-top: 5px; font-size: 1.3rem;}
  .board .borad-bot { margin: 12px 0 0;}
  .board .borad-bot .btn-box { position: relative; top: auto; margin: 12px 0 14px;}
  .board .btn-box { margin-top: 12px;}

  /* board paging */ 
  .board .paging button { margin: 0 1px;}
  .board .paging button i { width: 24px; height: 24px;}
  .board .paging ul li { width: 24px; height: 24px; margin: 0 1px; font-size: 1.2rem; line-height: 2.4rem;}

  /* board table */
  table.board colgroup col:first-child { width: 38px;}
  table.board colgroup col:nth-child(2):not(.tit) { width: 50px;}
  table.board colgroup col.tit ~ col:not(.state) { display: none;}
  table.board thead tr th { height: 36px; font-size: 1.4rem;}
  table.board tbody tr td { height: 35px; font-size: 1.3rem;}
  table.board thead tr th.tit ~ th,
  table.board tbody tr td.tit ~ td { display: none;}
  table.board tbody tr.new td.tit::after,
  table.board tbody tr.re td.tit::after { margin: 0 0 4px 4px; padding: 2px 4px;font-size: .8rem;}
  table.board colgroup col.section,
  table.board thead tr th.section,
  table.board tbody tr td.section { display: none;}

  /* board view */
  .board .board-view .bv-top .info div ~div { margin-left: 12px;}
  .board .board-view .bv-top .info div p { display: none;}
  .board .board-view .bv-top .info div span { font-size: 1.2rem;}
  .board .board-view .bv-top .info .date span::before,
  .board .board-view .bv-top .info .hits span::before { content: ""; display: inline-block; vertical-align: -1px; margin-right: 3px; background-repeat: no-repeat;}
  .board .board-view .bv-top .info .date span::before { width: 11px; height: 12px; background-image: url(../images/view_date.png); background-size: 11px auto;}
  .board .board-view .bv-top .info .hits span::before { width: 15px; height: 9px; background-image: url(../images/view_hits.png); background-size: 15px auto;}
  .board .board-view .bv-top h4 { padding: 7px 10px 8px; line-height: 2rem;}
  .board .board-view .bv-top >p { padding: 6px 10px 7px;}
  .board .board-view .bv-cont { padding: 10px 0 20px; border: 0;}
  .board .board-view .bv-re .bv-cont { padding: 10px 0 40px;}
  .board .board-view .bv-file { background-color: #fff; border: 1px solid #ddd; border-radius: 6px;}
  .board .board-view .bv-file .bvf-tit { display: none;}
  .board .board-view .bv-file .bvf-list { margin: 0; border: 0;}
  .board .board-view .bv-file .bvf-list ul li a { position: relative; padding-right: 40px; font-size: 1.4rem;}
  .board .board-view .bv-file .bvf-list ul li a::before { width: 14px; height: 18px; vertical-align: -4px; background-size: 14px;}
  .board .board-view .bv-file .bvf-list ul li a::after { content: ""; position: absolute; top: -1px; right: 0; width: 20px; height: 18px; background: url(../images/view_download.png) no-repeat; background-size: 20px auto;}
  .board .board-view .bv-file ~.bv-re { margin-top: 40px;}
  .board .board-view .video-cont { margin: 20px auto;}

  /* board write */
  .board-write >p { font-size: 1.3rem;}
  .board-write .box { border-color: #868686;}
  .board-write .box >div { display: block;}
  .board-write .box >dl:last-child { border-width: 0;}
  .board-write .board-view .bv-cont:last-child { padding: 20px 0 0;}
  .board-write dl.tit dt,
  .board-write dl.name dt,
  .board-write dl.pw dt,
  .board-write dl.cont dt,
  .board-write dl.division dt { display: none;}
  .board-write dl.tit dd,
  .board-write dl.name dd,
  .board-write dl.division dd,
  .board-write dl.pw dd { padding: 0;}
  .board-write dl.pw dd input[type=password] { border-bottom: 1px solid #868686;}
  .board-write dl { border-color: #868686;}
  .board-write dl dt { width: 72px; padding: 0; vertical-align: middle; background-color: #fff; border-right: 1px solid #868686;}
  .board-write dl dt span { padding: 0; font-size: 1.4rem; font-weight: normal; color: #666;}
  .board-write dl dt span span { display: none;}
  .board-write dl dd { min-height: 38px; padding: 0 10px;}
  .board-write dl dd >p { padding: 0; font-size: 1.4rem;}
  .board-write dl dd input[type=text],
  .board-write dl dd input[type=password] { border: 0; border-radius: 0;}
  .board-write dl dd input[type=text].w210,
  .board-write dl dd input[type=password].w210 { width: 100%;}
  .board-write dl dd textarea { height: 180px; padding: 10px 0; border: 0; border-radius: 0;}
  .board-write dl dd input[type=text]:focus,
  .board-write dl dd input[type=password]:focus,
  .board-write dl dd textarea:focus,
  .board-write dl dd select { box-shadow: none;}
  .board-write dl dd input::placeholder,
  .board-write dl dd textarea::placeholder { color: #666;}
  .board-write dl dd input:focus::placeholder,
  .board-write dl dd textarea:focus::placeholder,
  .board-write dl.tit dd input:focus::placeholder { color: #ccc;}
  .board-write dl dd span.info { display: inline-block; margin: 4px 0 0; font-size: 1.4rem;}
  .board-write dl.name dd span.info { display: none;}
  .board-write dl.radio dd label { margin: 3px 15px 0 0;}
  .board-write dl.radio dd label span { color: #717070;}
  .board-write dl.date-box dd { display: block; padding: 8px 10px; text-align: center;}
  .board-write dl.date-box dd.date input[type=text] { position: relative; width: 100%; height: 31px; background-size: 14px; background-position: center right 10px; border: 1px solid #ccc;}
  .board-write dl.date-box dd.date input[type=text]::before { content: ""; position: absolute; display: block; top: 0; right: 30px; width: 1px; height: 100%; background-color: #ccc;}
  .board-write dl.date-box dd.date span { display: block; line-height: 1.8rem;}
  .board-write dl.division .select-box { width: 100%;}
  .board-write dl.division .select-box select { width: 100%; font-size: 1.4rem; color: #717070; border: 0;}

  /* 글 등록,수정 - 파일첨부 */
  .board-write .file dt,
  .board-write .thumbnail dt,
  .board-write .url dt { position: absolute; border-left: 1px solid #868686;}
  .board-write .file dt span,
  .board-write .thumbnail dt span,
  .board-write .url dt span { height: 45px; line-height: 45px;}
  .board-write .insert { display: flex; flex-direction: column; width: calc(100% + 20px); margin: 0 -10px;}
  .board-write .insert .label-box { display: block; margin: 0; text-align: right; border-bottom: 1px solid #868686;}
  .board-write .insert .label-box label { width: 74px; height: 45px; margin: 0; font-size: 1.4rem; line-height: 45px;}
  .board-write .insert span.info { display: block; margin: 4px 0 22px;}
  .board-write .insert .none { padding-top: 59px; font-size: 1.4rem; text-align: center; color: #ddd;}
  .board-write .file .insert span.info,
  .board-write .url .insert span.info { order: 4;}
  .board-write .url .insert .label-box { display: flex; justify-content: flex-end; width: 100%; border-right: 1px solid #868686;}
  .board-write .url .insert .label-box button { order: 2; width: 74px; height: 45px; font-size: 1.4rem;}
  .board-write .url .insert .label-box input { width: calc(100% - 72px); height: 45px; padding: 10px 15px 10px 12px;}
  .board-write .thumbnail .label-box { display: flex; justify-content: flex-end; width: 100%;}
  .board-write .thumbnail .label-box .name { text-align: left; width: calc(100% - 146px); margin: 0; height: 45px; border: 0;}
  .board-write .thumbnail .label-box .name p { padding: 14px 12px; font-size: 1.4rem;}
  .board-write .file .insert .file-list { height: auto; min-height: 150px; padding: 0 0 10px; border: 0; border-bottom: 1px solid #868686; border-radius: 0;}
  .board-write .file .insert .file-list .filebox { position: relative; padding: 8px 40px 8px 15px;}
  .board-write .file .insert .file-list .filebox p { font-size: 1.4rem; font-weight: 300;}
  .board-write .file .insert .file-list .filebox button { right: 15px;}
  .board-write .file .insert .file-list .filebox .delete i { display: block; width: 12px; height: 12px; background: url(../images/file_close_mob.png) no-repeat; background-size: 12px;}
  .board-write dl:last-child dd .insert span.info { margin: 4px 0 0;}
  
  /* 자주 묻는 질문 */
  table.board.qna colgroup col:first-child { width: 100%;}
  table.board.qna thead th:first-child,
  table.board.qna tbody td:first-child { display: none;}
  table.board tbody tr.item-q td >div { padding: 4px 10px 5px 40px; line-height: 2rem;}
  table.board tbody tr.item-a td >div { padding: 10px 10px 11px 40px; line-height: 2rem;}
  table.board tbody tr.item-q td div span,
  table.board tbody tr.item-a td div span { width: 45px;}

  /* box list */
  .box-list ul li { width: calc(50% - 10px);}
  .box-list ul li .text-box strong, .box-list ul li .text-box em { font-size: 1.5rem;}
  .box-list ul li .text-box p { font-size: 1.4rem;}

  /* modal */
  .modal { min-width: 280px;}
  .modal .modal-box,
  .modal .modal-box.w600 { width: calc(100% - 50px); max-width: 330px; height: auto; min-height: 178px;}
  .modal .modal-box h6 { font-size: 1.6rem;}
  .modal .modal-box .cont { padding: 22px 15px;}
  .modal .modal-box .cont p { font-size: 1.4rem;}
  .modal .modal-box div input { width: 100%; max-width: calc(100% - 30px); height: 28px; }
  .modal .modal-box .input-box { width: calc(100% - 30px);}
  .modal .modal-box .radio-box { width: calc(100% - 30px);}
  .modal .modal-box .input-box input { max-width: none;}
  .modal .modal-box .radio-box input { max-width: none;}
  .modal .modal-box .input-box input.phone { width: 100%; max-width: calc(100% - 76px);}
  .modal .modal-box .input-box button { font-size: 1.4rem;}
  .modal .modal-box .input-box span { font-size: 1.3rem;}
  .modal .modal-box .info-box img { width: 54px;}
  .modal .modal-box .info-box p { margin: 10px 0 5px;}
  .modal .modal-box .info-box p >br { display: none;}
  .modal .modal-box .btn-box { display: block;}
  .modal .modal-box .btn-box button { width: 55px; height: 30px; font-size: 1.4rem;}
}

@media  all and (max-width: 414px) {
  .box-list ul li { width: calc(100% - 10px);}
}

@media (max-width: 1280px) {
	.pc { display: none; }
  /*#region footer 영역*/
  footer .content-width {
    width: 100%;
    padding: 0 50px;
  }
  footer .btm-area {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  footer .btm-area .right-area { margin-top: 25px; }
  footer .btm-area .right-area .icon-btn-area { align-items: center; }
}

@media (max-width: 780px) {
	footer .btm-area .right-area { flex-wrap: wrap; height: auto; }
	footer .web-cert { width: 100%; justify-content: center; }
}

@media (max-width: 580px) {
  /*#region footer 영역*/
  footer .top-area {
    padding: 20px 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  footer .top-area .right-area { margin-top: 15px; }
  footer .btm-area .left-area {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
  }
  /*#endregion*/
}

@media (max-width: 500px) {
  /*#region 공지사항, 앱 다운로드 영역*/
  footer .top-area .left-area a { font-size: 13px; }
  footer .btm-area .left-area a img { width: 150px; }
  footer .btm-area .left-area p { font-size: 10px; }
  /*#endregion*/
  .reactive-all-menu-bottom-wrap { padding: 0 30px; }
}
/*#endregion*/