/* 공용 */
#mapwrap{position:relative;overflow:hidden;}
#map {width: 100%; height: 100%;}
.sub_title {font-size: 15px; font-weight: 800; color: #3B414D; display: block; margin-bottom: 12px;}

.side_wrap {position:absolute;z-index:10;top: 0; left: -100%; width:100%; height: 100%; background: #fff; padding-left: 72px; transition: all 0.5s ease-out 0s; box-shadow: 10px 0px 10px 0px rgba(0,0,0,0.15);}
.side_wrap .logo_text {display: block; height: 71px; line-height: 70px; padding: 0 20px; font-size: 18px; font-weight: 700; color: #3B414D; border-bottom: 1px solid #E0E0E0;}

.side_btn {position: relative; height: 72px; display: block; cursor: pointer;}
.side_btn:before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-size: auto 20px; z-index: 10;}
.side_btn:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 46px; height: 46px; background: #999; border-radius: 8px; opacity: 0; visibility: hidden;}

.side_btn > span {width: 46px; height: 46px; background: no-repeat 50% 50%; background-size: auto 20px; border-radius: 8px; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* 하천 검색 */
.category_wrap {width: 567px;}
.category {z-index:10; background-color:#fff; height: 100%;}
.category .menu_selected {background: #004b89;color:#fff;margin:0 -1px;}
.category ul:after {content: ''; clear: both; display: block;}
.category li {list-style:none;float:left;width:12.5%;cursor:pointer;font-size:12px;text-align:center;padding: 15px 0;}
.category li span {display: block; background: no-repeat 50% 50%; width: 100%; height: 56px; background-size: 50px auto;}
.category .all {background-image: url("../images/level/level_all.png");}
.category .level1 {background-image: url("../images/level/level1.png");}
.category .level2 {background-image: url("../images/level/level2.png");}
.category .level3 {background-image: url("../images/level/level3.png");}
.category .level4 {background-image: url("../images/level/level4.png");}
.category .level5 {background-image: url("../images/level/level5.png");}
.category .level6 {background-image: url("../images/level/level6.png");}
.category .level7 {background-image: url("../images/level/level7.png");}

.color{color: #6ec9f7;}

.category-position{padding: 20px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid #ededed;}
.category-position input, .position-result input{ margin-right: 6px;}

.category .level-div{border-bottom: 1px solid #ededed;}
.category .date-search{padding: 20px 20px; border-bottom: 1px solid #ededed;}
.category .date-search .button.black{color: #fff;}
.category .category-weather{padding: 20px 20px;}
.category .category-weather span{margin-left: 10px; vertical-align: top;}
.position-result{position: absolute; top: 20px; right: 20px;  margin: 0; background-color: #fff; font-size: 14px; width: 400px; z-index: 10; border: 4px solid #004b89;}
.position-result .title{margin: 0; padding: 10px 8px 16px 16px; background-color: #004b89; color: #fff;}
.position-result .title span{font-size: 16px; line-height: 30px;}
.position-result .chart-select{padding: 12px; text-align: left;}
.position-result .chart-data{ padding: 5px;}
.position-result .title .btn_close{display: inline-block; vertical-align: middle; width: 30px; height: 30px; cursor: pointer; float: right;}
.button-white-search {height: 30px; min-width: 80px; padding: 4px 4px; margin-left: 10px; color: #1c356f;}

/* 검색조건 라디오버튼 */
.category_radio {display: inline-block;}
.category_radio .radio {display: inline-block; margin-right: 4px;}
.category_radio .radio input[type="radio"] {display: none;}
.category_radio .radio label {position: relative; min-width: 60px; padding: 6px 20px; border-radius: 40px; text-align: center; border: 1px solid #e0e0e0;}
.category_radio .radio label span {color: #999;}
.category_radio .radio input:checked + label {border-color: #004b89; background: linear-gradient(135deg, #004b89 0, #1270A9 100%); box-shadow: 0 5px 10px 0 rgba(0, 75, 137, .2);}
.category_radio .radio input:checked + label span {color: #fff;}

/* 조건검색 버튼 */
.category_btn:before {background-image: url(/images/common/icon_search_BL.svg);}
.category_btn:after {background: linear-gradient(135deg, #004b89, #1270A9);}
/* .cate_toggle .category_btn {background: #fff;} */
.cate_toggle .category_btn:before {background-image: url(/images/common/icon_cancle_WH.svg);}
.cate_toggle .category_btn:after {opacity: 1; visibility: visible; box-shadow: 0 10px 10px 0 rgba(0, 75, 137, .2);}
.cate_toggle .category_wrap {left: 0;}

/* 하천의 생활한경기준 표시 버튼 */
.river_btn:before {background-image: url(/images/common/icon_river.png);}
.river_btn:after {background: linear-gradient(135deg, #1270A9, #49C6D7);}
.river_toggle .river_btn:before {background-image: url(/images/common/icon_river_WH.png);}
.river_toggle .river_btn:after {opacity: 1; visibility: visible; box-shadow: 0 10px 10px 0 rgba(18, 112, 169, .2);}
.river_toggle .river_wrap {left: 0;}

.m_river_btn {display: none;}
.m_category_btn {display: none;}
.mobile_category {display: none;}

/* 하천의 생활환경기준 */
.river_wrap {width: 1200px;}
.river {padding: 20px 20px;}
.river .sub_title {font-size: 15px; font-weight: 800; color: #3B414D; display: block; margin-bottom: 12px;}
.river_table {width: 100%; border-top: 2px solid #004b89; font-size: 13px;}
.river_table thead th {padding: 10px 8px; background: #f7f7f7; border: 1px solid #e0e0e0; border-width: 0 1px 1px 0; vertical-align: middle; text-align: center;}
.river_table thead th:first-child {border-left-width: 1px;}
.river_table tbody td,
.river_table tbody th {padding: 5px 5px; border: 1px solid #e0e0e0; border-width: 0 1px 1px 0; vertical-align: middle; text-align: center; white-space: nowrap;}
.river_table tbody th {border-left: 1px solid #e0e0e0; background: #f7f7f7;}

.river_table .lavel-character {max-width: 60px;}

.mobile_btn {display: none;}

/* 하천수질비교 */
.compare_btn:before {background-image: url(/images/common/icon_compare.png);}
.compare_btn:after {background: linear-gradient(135deg, #49C6D7, #33AB8F); transition: .4s;}
.compare_btn:hover:before,
.compare_btn.active:before {background-image: url(/images/common/icon_compare_WH.png);}
.compare_btn:hover:after,
.compare_btn.active:after {opacity: 1; visibility: visible; box-shadow: 0 10px 10px 0 rgba(73, 198, 215, .2);}



@media (min-width:1024px){
   /* 조건검색 버튼 */
    .cate_toggle .category_wrap {transform: none;}
    .cate_toggle .category {transform: none;}
}

/* **************************************** *
 * 1024px
 * **************************************** */
 @media (max-width:1024px){
    .river_wrap {width: 80%;}
}

/* **************************************** *
 * 767px
 * **************************************** */
 @media (max-width:767px){
     .side_wrap {top: 10%; left: -50%; transform: translateX(-50%); width: 92%; height: auto; padding: 0; border: 4px solid #004b89;}
     .side_wrap .logo_text {display: none;}

     .category .title {margin-bottom: 10px;}
     .category-position {padding: 10px 10px;}
     .category .date-search {padding: 10px 10px;}
     .category li {font-size: 10px; padding: 10px 0;}
     .category li span {margin: 0; background-size: 32px auto; height: 36px;}
     .category .category-weather {padding: 10px 10px;}
     .category_radio .radio label {padding: 4px 10px;}

     .position-result {top: 10%; left: 50%; transform: translateX(-50%);  width: 90%;}

     /* 모바일 버튼 공용 */
     .side_btn {display: none;}
     .mobile_btn {display: block; position: absolute; right: 20px; bottom: 100px; z-index: 999;}
     .m_side_btn {position: relative; display: block; width: 46px; height: 46px; background: #333; border-radius: 4px; margin: 10px 0 ;}
     .m_side_btn:before {content: ''; display: block; content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat 50% 50%; background-image: url(/images/common/icon_search_BL.svg); background-size: auto 20px; z-index: 10;}
     
     /* 하천검색 버튼 */
     .cate_toggle .category_wrap {left: 50%;}
     .m_category_btn {background: linear-gradient(135deg, #004b89 0%, #1270a9 100%); box-shadow: 3px 3px 5px rgba(0, 0, 0, 20%);  z-index: 10;}
     .m_category_btn:before {background-image: url(/images/common/icon_search_WH.svg);}

     .cate_toggle .m_category_btn {background: #333;}
     .cate_toggle .m_category_btn:before {background-image: url(/images/common/icon_cancle_WH.svg);}

     /* 모바일 하천 표시 버튼 */
     .river_wrap {max-height: calc(100% - 180px); overflow: scroll;}
     .river_toggle .river_wrap {left: 50%;}
     .m_river_btn {background: linear-gradient(135deg, #1270a9 0%, #49C6D7 100%); box-shadow: 3px 3px 5px rgba(0, 0, 0, 20%); z-index: 10;}
     .m_river_btn:before {background-image: url(/images/common/icon_river_WH.png);}

     .river_toggle .m_river_btn {background: #333;}
     .river_toggle .m_river_btn:before {background-image: url(/images/common/icon_cancle_WH.svg);}

     .river {overflow: auto;}
     .river_table {font-size: 11px;}

     
    #map.mobile_map{width: 100%; height: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px);}

    .mobile_category {display: block; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 92%; background: #fff; z-index: 100; border-radius: 8px; box-shadow: 0 10px 20px 0 rgba(0,0,0,.2);}
    .mobile_category ul {overflow: hidden;}
    .mobile_category ul li {float: left; width: 14.28%; padding: 10px 0; text-align: center; font-size: 10px;}
    .mobile_category ul li span {display: block; background: no-repeat 50% 50%; width: 100%; height: 36px; background-size: 32px auto; margin-bottom: 4px;}
    .mobile_category ul li .level1 {background-image: url(/images/level/level1.png);}
    .mobile_category ul li .level2 {background-image: url(/images/level/level2.png);}
    .mobile_category ul li .level3 {background-image: url(/images/level/level3.png);}
    .mobile_category ul li .level4 {background-image: url(/images/level/level4.png);}
    .mobile_category ul li .level5 {background-image: url(/images/level/level5.png);}
    .mobile_category ul li .level6 {background-image: url(/images/level/level6.png);}
    .mobile_category ul li .level7 {background-image: url(/images/level/level7.png);}
 }

 /* **************************************** *
 * 320px
 * **************************************** */
 @media (max-width:320px){
	/* .category_btn {bottom: 10px;} */
    .mobile_category ul li span {height: 25px; background-size: 22px auto;}
}