@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
ol, ul {list-style: none;}
br{opacity: 0;}
html, body {height: 100%;position: relative;}
input[type=button], input[type=text], input[type=image], input[type=submit], textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;

  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

textarea {
  overflow: hidden;
}
textarea.content{
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
}
/* IE6 */
:first-child + html .clearFix {
  zoom: 1;
}

/* IE7 */
.hide, .hidden, .blind {
  opacity: 0;
  text-indent: -999em;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}


.clearFix:after {
  display: block;
  clear: both;
  content: '';
}

* html .clearFix {
  zoom: 1;
}

/* 뷰표트 변환시 폰트크기 자동확대 방지 */
body {
  -webkit-text-size-adjust: none;
}

input[type='text'], input[type='password'], input[type='submit'], input[type='search'] {
  -webkit-appearance: none;
  border-radius: 0;
}

input[type='date'] {
  background-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:active, a:hover {
  text-decoration: none;
}

address, caption, cite, code, dfn, em, var {
  font-style: normal;
  font-weight: normal;
}

input, select, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

select::-ms-expand {
  display: none;
}

input[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

input[type=submit], input[type=button], button {
  cursor: pointer;
}

input[type=checkbox], input[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

input[type=checkbox] {
  /* position: static !important; */
  vertical-align: middle;
}

input[type=checkbox] + label:before {
  display: none;
}


/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear {
  display: none;
}

/* input type number 에서 화살표 제거 */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Select box 스타일 초기화 */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* IE 에서 Select box 화살표 제거 */
select::-ms-expand {
  display: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

html, body, h1, h2, h3, h4, h5, h6, strong, table th, input, textarea, select, button {
    margin: 0; padding: 0;
    font-family: 'KoPub', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', Dotum, Arial, sans-serif;
    font-weight: 400; font-size: inherit;
    color: #393939; letter-spacing: -0.2px;
}
html {font-size: 10px; line-height: 1.5;}
.input, .textarea, .select select {background-color: white; border-color: transparent; font-size: 17px; font-weight: 500;}
.textarea{border: 1px solid #b9b9b9; width: 100%; resize: vertical; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.input::placeholder, .textarea::placeholder, .select select::placeholder{color: rgba(54, 54, 54, 0.3);font-size: 17px; font-weight: 300;}
.input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}
.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}
.input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}
.input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder { color: rgba(54, 54, 54, 0.3); font-size: 17px; font-weight: 300;}



@font-face {
    font-family: 'KoPub';
    font-style: normal;
    font-weight: 700;
    src: 
    url(../fonts/KoPubDotum_Bold.otf) format("opentype"),
    url(../fonts/KoPubDotum_Bold.woff) format("woff"),
    url(../fonts/KoPubDotum_Bold.woff2) format("woff2");
}
@font-face {
    font-family: 'KoPub';
    font-style: normal;
    font-weight: 500;
    src:
    url(../fonts/KoPubDotum_Medium.otf) format("opentype"),
    url(../fonts/KoPubDotum_Medium.woff) format("woff"),
    url(../fonts/KoPubDotum_Medium.woff2) format("woff2");
}
@font-face {
    font-family: 'KoPub';
    font-style: normal;
    font-weight: 300;
    src:
    url(../fonts/KoPubDotum_Light.otf) format("opentype"),
    url(../fonts/KoPubDotum_Light.woff) format("woff"),
    url(../fonts/KoPubDotum_Light.woff2) format("woff2");
}


.hidden-pc{display: none;}
/* .hidden-mb{display: block;} */
.text-ellipsis{
    display: block;
    word-wrap: normal;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.text-ellipsis2{
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal;
    text-align: left; word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* < > */
.hcode{font-family: Dotum; font-weight: 700;}


/* button */
/* button.is_file{background-color: #289fdc; color: #fff;} */

.txt-16{font-size: 16px;}
.txt-18{font-size: 18px;}
.txt-20{font-size: 20px;}
.txt-22{font-size: 22px;}
.has-weight-medium {font-weight: 500;}
.has-weight-bold {font-weight: 700;}

.cl1{color: #2e9ae5;}
.cl2{color: #006db9;}
.cl3{color: #013061;}
.bgc3{background-color: #013061;}

.buttons{font-size: 0;}
.button {display: inline-block; font-size: 18px; line-height: 1.8; padding: 4px 18px;}
.button + .button{margin-left: 10px;}
.button.is-link {background-color: #3273dc; color: #fff;}
.button.is-list {}
.button.is-info {}
.button.is-small {}
.button.is-normal {}
.button.is-medium {}
.is-blue1 {background-color: #289fdc; color: #fff;}
.is-blue2 {background-color: #006db9; color: #fff;}
.is-blue3 {background-color: #013061; color: #fff;}
.is-blue4 {background-color: #dff0ff; color: #00447c; border: 1px solid #90b5d6;}
.is-blue5 {background-color: #6d8bac; color: #fff;}
.is-blue6 {border: 2px solid #6d8bac; color: #6d8bac;}
.is-blue7 {background-color: #827faa; color: #fff;} /*보라색*/




.ico-arrow1{
    position: relative; top: 3px;
    display: inline-block; width: 30px; height: 26px; vertical-align: top;
    background: url(../img/board.png) no-repeat; background-position: -7px -140px;
}
/* .ico-arrow1.rot{transform: rotate(180deg); -webkit-transform: rotate(180deg); vertical-align: middle;} */
.ico-arrow2{
    position: relative; top: 0;
    display: inline-block; width: 18px; height: 25px; margin-left: 10px; vertical-align: middle;
    background: url(../img/common.png) no-repeat; background-position: -179px -5px;
}
.ico-arrow2.rot{transform: rotate(180deg); -webkit-transform: rotate(180deg); vertical-align: middle;}
.ico-filedown{
    display: inline-block; width: 15px; height: 25px; margin-left: 10px; vertical-align: middle;
    background: url(../img/common.png) no-repeat; background-position: -128px -5px;
}
.ico-minus1{
    position: relative;
    display: block; width: 26px; height: 26px;
    background: url(../img/board.png) no-repeat;
    background-position: -47px -145px;
}
/* pc : block -> mobile : none */
br.p_m{display: block !important;}
/* pc : none -> mobile : block */
br.m_p{display: none !important;}



.checks {display: inline-block; position: relative; }
.checks input[type=checkbox] {opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; top: 1px; left: 1px; width: 20px; height: 20px; padding: 0; }
.checks input[type=checkbox] + label {display: inline-block; padding-left: 30px; font-size: 17px; line-height: 22px; cursor: pointer; }
.checks input[type=checkbox] + label:before {display: inline-block; content: ''; width: 22px; height: 22px; vertical-align: middle; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #666; border-radius: 3px; background-color: #fff; position: absolute; top: 1px; left: 0; }
.checks input[type=checkbox]:focus + label:before,
.checks input[type=checkbox]:active + label:before{outline: 1px solid #000; }
.checks input[type=checkbox]:checked + label:after {display: inline-block; content: ''; position: absolute; top: 3px; left: 2px; width: 18px; height: 18px; background: url(../img/common.png) no-repeat; background-position: -8px -7px;}
    



/* ==================== modal ==================== */
.modal {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    position: fixed; top: 0; left: 0; z-index: 40;
    width: 100%; height: 100%;
}
.modal_background{width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);}
.modal_card{
    overflow: hidden; -ms-overflow-y: visible; position: absolute;
    width: 800px; max-height: calc(100vh - 100px); margin: 0 auto;
    font-size: 20px; background-color: #fff;
    -moz-box-shadow:    0 0 20px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.5);
    box-shadow:         0 0 20px rgba(0,0,0,0.5);
}
.modal_card_head{padding: 20px; border-bottom: 1px solid #656565;}




.modal_close {
    position: absolute; right: 0; top: 0;
    height: 70px; width: 70px;
    cursor: pointer; background: none;
}
.modal_close .line{display: block; width: 30px; height: 3px; margin-top: -2px; background-color: #656565;}
.modal_close .line:nth-of-type(1){
    position: absolute; top: 50%; left: 15px;
    -webkit-transform: translateY(50%) rotate(45deg);
    transform: translateY(50%) rotate(45deg);
}
.modal_close .line:nth-of-type(2){
    position: absolute; top: 50%; left: 15px;
    -webkit-transform: translateY(50%) rotate(135deg);
    transform: translateY(50%) rotate(135deg);
}
.modal_card_body {
    overflow: auto; position: relative; max-height: calc(100vh - 332px); padding: 20px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.is-clipped { overflow: hidden !important; }
.modal.is-active {display: block; }
.modal.is-active .modal_content, .modal.is-active .modal_card {
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* modal : 국민참여 > 의견수렴 sns 로그인 */
.modal_snscheck .modal_card_body{height: 400px; text-align: center;}
.modal_snscheck_img a{display: block; max-width:355px; margin: 10px auto 0;}
.modal_snscheck_img a:focus {box-shadow:0 0 2px 2px rgba(0,0,0,1);}
.modal_snscheck_img a img {width:100%; vertical-align:top;l}
.modal_snscheck p{margin: 60px 0 40px;}

/* modal : 국민참여 > 해커톤 상세정보 */
.modal_hackathon .modal_card{width: 1020px;}
.modal_hackathon .modal_card_body{max-height: none; padding: 0;}
.modal_hack_wrap .bxslider_hack_wrap{padding: 25px;}
.modal_hack_wrap img{margin: 20px auto 30px;}
.modal_hack_wrap p{font-size: 18px;}
.modal_hack_wrap strong{display: block; margin-bottom: 10px; font-size: 22px; color: #000; }
.modal_hack_wrap .hackathon_box{padding: 20px; font-size: 18px; border-radius: 10px; background-color: #eee;}
.modal_hack_wrap a{margin: 10px auto 0;}
.modal_hack_wrap .hackathon_box2{text-align: center; margin: 0 auto;}
.modal_hack_wrap .hackathon_img1{width: 420px;}
.modal_hack_wrap .bx-pager{border-top: 1px solid #b9b9b9; padding: 20px;}
.modal_hack_wrap .hackathon_slide_tit{display: inline-block; width: auto; margin-bottom: 20px; padding: 4px 50px; font-size: 22px; line-height: 1.6; border-radius: 30px;}



/* modal : 위원회소개 > 위원회역할 연설전문보기 */
.modal_speach_img img{width: 100%;}
.modal_speach .modal_card{max-height: 100%}
.modal_speach .modal_card_body{max-height: calc(100vh - 150px); padding: 0;}
.modal_speach_wrap{padding: 0 20px 20px 20px; font-size: 17px;}
.modal_speach_date{display: block; margin-bottom: 10px; font-size: 15px; color: #666;}
.modal_speach_wrap p{margin-top: 15px;}
.modal_speach_img{position: relative;}
.modal_speach_img .modal_card_title{position: absolute; bottom: 16%; left: 6%; font-size: 30px; color: #fff;}
.modal_speach .modal_close .line{background-color: #fff;}





@media screen and (max-width: 1400px) {
    .txt-16{font-size: 15px;}
    .txt-18{font-size: 16px;}
    .txt-20{font-size: 18px;}
    .txt-22{font-size: 20px;}

    .hidden-pc{display: block;}
    .hidden-mb{display: none;}
    .input, .textarea, .select select{font-size: 15px;}

    .input::placeholder, .textarea::placeholder, .select select::placeholder{font-size: 15px;}
    .input::-moz-placeholder, .textarea::-moz-placeholder, .select select::-moz-placeholder {font-size: 15px;}
    .input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder, .select select::-webkit-input-placeholder {font-size: 15px;}
    .input:-moz-placeholder, .textarea:-moz-placeholder, .select select:-moz-placeholder {font-size: 15px;}
    .input:-ms-input-placeholder, .textarea:-ms-input-placeholder, .select select:-ms-input-placeholder {font-size: 15px;}

    .button{font-size: 15px;}
    .checks input[type=checkbox] + label{font-size: 15px;}
    .textarea{padding: 10px;}

    br.m_p{display: block !important;}
    br.p_m{display: none !important;}

    .modal_card{width: 90%; font-size: 15px;}
    .modal_card_head{padding: 15px;}
    .modal_close{right: 5px; width: 50px; height: 50px;}
    .modal_close .line{width: 25px;}
    .modal_snscheck_img a{width: 280px;}
    .modal_snscheck p{margin: 30px 0;}


    /* modal : 국민참여 > 해커톤 상세정보 */
    .modal_hackathon .modal_card{width: 90%;}
    .modal_hack_wrap p{font-size: 16px;}
    .modal_hack_wrap .hackathon_slide_tit{display: block; text-align: center; font-size: 18px; padding: 4px 10px; border-radius: 25px;}
    .modal_hack_wrap .hackathon_box{font-size: 16px;}
    .modal_hack_wrap strong{font-size: 16px;}

    /* modal : 위원회소개 > 위원회역할 연설전문보기 */
    .modal_speach_wrap{font-size: 15px;}
    .modal_speach_img .modal_card_title{font-size: 25px;}
}

@media screen and (max-width: 768px) {
    .txt-16{font-size: 15px;}
    .txt-18{font-size: 15px;}
    .txt-20{font-size: 16px;}
    .txt-22{font-size: 18px;}
    .modal_hack_wrap .bx-viewport{height: 400px !important; overflow-y: scroll !important;}

    /* modal : 위원회소개 > 위원회역할 연설전문보기 */
    .modal_speach_img .modal_card_title{font-size: 20px;}
}



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

/* 접근성 추가 */
#contents {width:100%;}