@import url('reset.css');


@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


#wrap { width: 100%;}

header { width: 100%; padding: 0 5%; height: 110px;}
header h1 { float: left; width: 20%; padding: 25px 0 0 0; }
header h1 img { max-width: 100%; height: auto;}

.main_title { 
    float: left; 
    width: 50%; 
    color: #0075b2;
    font-size: 20px; 
    padding-left: 10px; 
    padding: 45px 0 0 10px;
    font-family: 'GmarketSansBold';
}


/* .admin { position: absolute; top: 45px; right: 5%;} */
.admin { float: left; width: 30%; margin-top: 40px;}
.admin ul{ float: right; }
.admin li { float: left; color: #0075b2; padding-left: 20px; font-size: 14px;}
.admin li a {  padding: 5px 20px; color: #0075b2; border: 1px solid #79cdfa; border-radius: 3px; background: #fff;}
.admin li a:hover { background: #0075b2; border: 1px solid #000; color: #fff;}


ul.nav { position: absolute; top: -45px; left: 50px;}
ul.nav li { float: left; margin: 0 5px; }
ul.nav li a {  
    background: #79cdfa;
    color: #fff; 
    font-size: 18px; 
    text-align: center; 
    padding: 10px 40px; 
    display: block;
    border-radius: 20px 10px 0 0;
    border-top: 1px solid #79cdfa;
    border-left: 1px solid #79cdfa;
    border-right: 1px solid #79cdfa;
}

ul.nav li a:hover, ul.nav li a.active{  
    background: #fff; 
    color: #0075b2; 
}


ul.nav_2 { margin-bottom: 5px;}
ul.nav_2 li { float: left; width: 49%; margin: 0 0 0 1%; }
ul.nav_2 li a {  
    background: linear-gradient(180deg,#555 0%,#222 49%, #000 51%,#222 100%);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.5),0px 1px 3px rgba(0,0,0,0.3);
    color: #fff; 
    font-size: 18px; 
    text-align: center; 
    padding: 5% 0px; 
    display: block;
    border-radius: 20px 20px 0 0;
}
ul.nav_2 li a:hover { background: #074a6e;}




ul.nav_3 { position: absolute; top: -75px; right: 350px;}
ul.nav_3 li { float: left; margin: 0 3px; }
ul.nav_3 li a {  
    background: #999;
    color: #fff; 
    font-size: 16px; 
    text-align: center; 
    width: 60px;
    height: 60px;
    line-height: 55px;
    display: block;
    border-radius: 50%;
    border: 1px solid #999;
}

ul.nav_3 li a:hover, ul.nav_3 li a.active{  
    background: #fff; 
    color: #999; 
}








@media (max-width:1220px){
    header {  padding: 0 2%;}
}

@media (max-width:1080px){
    header h1 { width: 35%; }
    .main_title { width: 55%;}
    .admin { width: 10%; padding: 20px 0 0px 0; margin-top: 20px;}
    .admin li a {  padding: 5px 10px; font-size: 14px;}
    .view_480 { display: none; }
}


@media (max-width:768px){
    header{ padding: 0; }
    header h1{ width: 100%;  padding: 10px 5%; border-bottom: 1px solid #0075b2;}
    header h1 img { width: 35%;}
    .main_title { width: 100%; height: 120px; padding: 20px 0 0 5%;}
    .admin { position: absolute; top: -20px; right: 2%;}
    ul.nav { top: -40px; left: 20px; }
    ul.nav li { margin: 0 0.5vw; }
    ul.nav li a { font-size: 2.5vw; padding: 1vw 4vw;}
    ul.nav_3 { position: relative; top: -10px; left: 20px; }
    ul.nav_3 li { margin: 0 0.5vw; }
    ul.nav_3 li a { font-size: 2.5vw; }
}

@media (max-width:480px){
    header h1 img { width: 60%;}
    .main_title { font-size: 16px;}
    ul.nav { top: -35px; }
    ul.nav li a {  font-size: 3.5vw; padding: 1vw 3.5vw; }
}






section { padding:4% 5%; }

.contents { 
    position: relative;
    width: 1200px; 
    margin: 0 auto;  
    background: #fff;
    border-radius: 20px; 
    border: 1px solid #79cdfa;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 30px;
    box-shadow: 0px 0px 10px 3px #79cdfa;
}


.movie_box_wrap {float: left; width: 60%; }
.movie_box {  
    position: relative;
    width: 100%; 
    padding-top: 56.25%;
}

.movie { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    background: #000; 
    border-radius: 5px;
}


.icon_box_wrap {  width: 38%; margin-left: 2%;}

.ib_box { margin: 0 -1%; }
.ib_box::after { display: table; content: ''; clear: both; }
.icon_box { float: left; width: 33.333%; padding: 0 1%; margin-top: 2%;}
.icon { border: 1px solid #79cdfa; background: #fff; text-align: center; padding: 10% 5%; border-radius: 5px; box-shadow: 0px 0px 3px 1px #aaddf9;}





.mention { 
    position: absolute;
    top: -80px;
    right: 20px;
    width: 290px;
    background: rgb(253, 253, 243);
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 1px #aaddf9;
    text-align: justify;
    line-height: 20px;
}
.mention a { float: right; }


h2 { 
    color: #0075b2;
    font-size: 18px; 
    font-family: 'GmarketSansMedium'; 
    padding-bottom: 20%;
}

.btn_nav { width: 100%; margin-bottom: 4%;}


.btn { padding: 8% 0; }
.btn span { color: #fff; font-size: 2vw;}
.btn * { transition: all .3s ease;}

.btn2 { padding: 8% 0; }
.btn2 span { color: #fff; font-size: 2vw;}
.btn2 * { transition: all .3s ease;}

.btn3 { padding: 8% 0; }
.btn3 span { color: #fff; font-size: 1vw;}
.btn3 * { transition: all .3s ease;}

.btn button {
    width: 4rem;
    height: 4rem;
    border-color: #79cdfa;
    background: linear-gradient(180deg,#79cdfa 0%,#0075b2 49%, #132b5c 51%, #0075b2 100%);
    cursor: pointer;
    border-radius: 50%;
    padding: 5px 0 0 0;
    /* border: 1px solid #000; */
}
.btn button:hover { 
    transform: scale(1.1);
    background: #074a6e;
}


.btn2 button {
    width: 4rem;
    height: 4rem;
    border-color: #79cdfa;
    background: linear-gradient(180deg,#79cdfa 0%,#0075b2 49%, #132b5c 51%, #0075b2 100%);
    cursor: pointer;
    border-radius: 50%;
    padding: 12px 0 0 0;
    /* border: 1px solid #000; */
}
.btn2 button:hover { 
    transform: scale(1.1);
    background: #074a6e;
}



.btn3 button {
    width: 4rem;
    height: 4rem;
    border-color: #61f8e4;
    background: linear-gradient(180deg,#ddd 0%,#777 49%, #232b3d 51%, #777 100%);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    padding: 5px 0 0 0;
    /* border: 1px solid #000; */
}
.btn3 button:hover { 
    transform: scale(1.1);
    background: #074a6e;
}



    @media (max-width:1440px){
        .contents { width: 100%;}
        .btn button { width: 5vw; height: 5vw;}
        .btn2 button { width: 5vw; height: 5vw;}
        .btn3 button { width: 5vw; height: 5vw;}
        h2 { font-size: 1.3vw; padding-bottom: 10%;}
        .bn_1 button { font-size: 1.3vw; }
        .bn_2 button { font-size: 1.3vw; }
    }

    @media (max-width:1220px){
        h2 { font-size: 1.3vw; padding-bottom: 5%;}
    }

    @media (max-width:1024px){
        .btn_nav { margin-bottom: 2%;}
        .ib_box { margin: 0 -1%; }
        .icon_box { padding: 0 1%;}
        ul.nav_2 li a {  font-size: 1.7vw; padding: 3% 0px; }
    }
    
    @media (max-width:768px){
        section { padding:3% 1%; }
        .movie_box_wrap {  width: 100%; margin-bottom: 30px; }
        .icon_box_wrap {  width: 100%;  margin-left: 0;}
        .btn_nav { margin-bottom: 4%;}
        .ib_box { margin: 0 -1%; }
        .icon_box { padding: 0 1%;}
        .icon {  padding: 10% 0%; }
        .btn button { width: 5rem; height: 5rem; }
        .btn span { font-size: 6vw;}
        .btn2 button { width: 5rem; height: 5rem; }
        .btn2 span { font-size: 6vw;}
        .btn3 button { width: 5rem; height: 5rem; }
        .btn3 span { font-size: 3.5vw;}
        h2 { font-size: 3vw; padding-bottom: 5%;}
        ul.nav_2 li a {  font-size: 2.7vw; padding: 5% 0px; }
    }
    
    @media (max-width:480px){
        .btn button { width: 15vw; height: 15vw;}
        .btn2 button { width: 15vw; height: 15vw;}
        .btn3 button { width: 15vw; height: 15vw;}
    }




.water_level_wrap { 
    width: 100%;
    border: 1px solid #79cdfa;
    background: #fff;
    border-radius: 5px 5px 20px 20px;
    margin-top: 2%;
    padding: 5%;
    box-shadow: 0px 0px 5px 1px #aaddf9;
}



.gw2 { float: left; width: 65%; margin-left: 5%;}

.graph_wrap { float: left; position: relative; width: 15%; height: 100%;  }
.graph_wrap_2 { position: relative; float: left;  width: 50%; text-align: right; line-height: 100px;}



.top_title { width: 100%; position: absolute; top: -30px; left: 0; color: #0075b2; padding: 3% 0px; }
.bottom_title { width: 100%; position: absolute; bottom: -30px; left: 0;  color: #0075b2; padding: 3% 0px; }
.top_m { position: absolute; top: 0; left: 0; border-top: 1px solid #0075b2; color: #0075b2; width: 100%; font-size: 14px;}
.bottom_m { position: absolute; bottom: 0; left: 0; border-bottom: 1px solid #0075b2; color: #0075b2; width: 100%; font-size: 14px; }

.view_768 { display: none; }



    .graph { 
        position: relative;
        width: 100%;
        height: 100%; 
        background: #ddd;
      }
      .graph .bar { 
        display: block;
        background-color: #0075b2;
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;     
      }

      




.m_tit { position: absolute; top: 0; right: 0; font-size: 18px; color: #0075b2;;  font-family: 'GmarketSansMedium'; }
.m_tit_2 { font-size: 16px; color: #777; padding-bottom: 25px; font-family: 'GmarketSansMedium'; text-align: center; padding: 0 0 30px 10px;}
.m_text span{
    font-size: 2.5vw; 
    font-family: 'GmarketSansBold'; 
    color: #fff;
    border-color: #79cdfa; 
    background: linear-gradient(180deg,#79cdfa 0%,#0075b2 49%, #132b5c 51%, #0075b2 100%);
    padding: 7% 15% 5% 15%; 
    margin:0 10px;
    border-radius: 5px;
}
.m_text { font-size:1.2rem; font-family: 'GmarketSansMedium'; color: #0075b2; }



@media (max-width:960px){

    .graph_wrap { width: 25%; }
    .gw2 { width: 50%;  margin: 5% 0; }
    .graph_wrap_2 { width: 100%; }
}

@media (max-width:768px){
    .graph_wrap { width: 50%; height: 100px; margin: 10% 0;}
    .graph_wrap_2 { width: 100%; line-height: 90px;}
    .gw2 { width: 100%;  margin: 0; }
    .m_text span{ font-size: 5vw; padding: 5% 15% 3% 15%; }
}

@media (max-width:480px){
    .graph_wrap_2 { line-height: 70px;}
}


.page_title { width: 100%; text-align: center; font-family: 'GmarketSansBold'; font-size: 34px; margin-top: 3%; color: #0075b2;}
.page_text { width: 100%; text-align: center; font-family: 'GmarketSansMedium'; font-size: 14px; color: #79cdfa; padding-top: 7px;}


.table_wrap { width: 100%; margin: 30px 0;}
.table_scroll { width: 100%; overflow-x: auto; white-space: nowrap; }

table { width: auto; }
table.bbs_list { width: 100%; border-top: 2px solid #0075b2; border-bottom: 2px solid #0075b2; }
table.bbs_list th { height: 40px; border-bottom: 1px solid #0075b2; font-size: 14px; color: #0075b2;}
table.bbs_list td { padding: 15px 0; border-bottom: 1px solid #79cdfa; text-align: center;}
table.bbs_list td.left { text-align: left; } 

table.bbs_list tr:hover { background-color: #e8f7ff; cursor: pointer;}

table { width: auto; }
table.bbs_write { width: 100%; border-top:2px solid #0075b2; border-bottom:2px solid #0075b2;}
table.bbs_write td { padding:10px 20px; border-bottom:1px solid #79cdfa; }




table { width: auto; }
table.bbs_read { width: 100%; border-top:2px solid #0075b2;; border-bottom:2px solid #0075b2;}
table.bbs_read th { text-align:left; padding:10px 0px; border-bottom:1px solid #0075b2; font-size:18px; color:#000; font-weight:500;}
table.bbs_read td { padding:10px 0 10px 0; border-bottom:1px solid #0075b2; font-size:15px;  }
table.bbs_read td.read {padding:30px 0; line-height:30px;}


.text_box { 
    width: 70px; 
    background: #79cdfa;
    color: #fff; 
    font-size: 14px;
    padding: 2px 0;
    display: inline-block;
    text-align: center;
    font-weight: 300;
    margin-right: 20px;
    border-radius: 3px;
}


.bbs_detele { width:100%; height: 100px; text-align: center;  border-top:1px solid #0075b2; border-bottom:1px solid #0075b2;  margin-bottom: 50px;}
.cp { width: 100%; text-align:center; padding:50px 0px 20px 0px;}

.bo_btn { position: absolute; bottom: 40px; right: 5%;}
.bo_btn a{ background: #0075b2; color: #fff; padding: 5px 20px; border-radius: 3px;}
.bo_btn a:hover { background: #000; }


.bo_btn2 button { background: #0075b2; color: #fff; padding: 5px 20px; border-radius: 3px;}
.bo_btn2 button:hover { background: #000; cursor: pointer;}

.pagination { width: 100%; text-align: center;}
.pagination a {
    color: #000;
    font-size: 14px;
    padding: 2px 8px;
    transition: background-color .3s;
  }
  
  .pagination a.active {
    background: #0075b2;
    color: white;
    border-radius: 3px;
  }
  
  .pagination a:hover {background: #ddd;}
  .pagination a i { font-size: 18px; vertical-align: middle;}

  .save_zone{ width: 100%; text-align: center; }


  input.input_type_1 { 
    border:1px solid #79cdfa;
    width: 100%;
    height:30px; 
    padding:5px; 
    background:#fff;
/*  border-radius: 3px;*/   
}

input.input_type_2 { 
    border:1px solid #79cdfa;
    width: 200px;
    height:30px; 
    padding:5px; 
    background:#fff;
/*  border-radius: 3px;*/  
}

input.input_type_3 { 
    border:1px solid #79cdfa;
    width: 65px;
    height:30px; 
    padding:5px; 
    background:#fff;
/*  border-radius: 3px;*/  
}

textarea { 
    width: 100%;
    border:1px solid #79cdfa;
    padding: 10px;
}


@media (max-width:768px){
    .page_title {font-size: 26px;}
    .page_text { font-size: 14px; }
    .bo_btn { bottom: 40px; right: 5%;}
    .bo_btn a{ padding: 3px 10px; font-size: 14px;}
}
@media (max-width:480px){
    .bo_btn { bottom: 55px; right: 5%;}
    .page_title {font-size: 20px;}
    .page_text { font-size: 12px; line-height: 18px; padding-top: 2px;}
}