@charset "utf-8";

/* 2024.05.27 다국어 스타일 */

/*==== 기본 & 모바일 =================================================*/
.newdesign .VIpgJd-ZVi9od-vH1Gmf-ibnC6b div {color: #000000 !important;}
.newdesign .VIpgJd-ZVi9od-vH1Gmf .indicator {font-size: 0;width: 4px;height: 4px;background: #001e40;display: inline-block;border-radius: 50%;line-height: 17px;margin-right: 2px;}
.newdesign .VIpgJd-ZVi9od-vH1Gmf-ibnC6b-gk6SMd .indicator {width: 2px;height: 11px;line-height: 23px;border-radius: unset;background: #004ca2;}
.newdesign .VIpgJd-ZVi9od-vH1Gmf-ibnC6b-gk6SMd .text {color: #004ca2;}

/* header - 언어설정 버튼 클릭 시 박스 */
iframe.VIpgJd-ZVi9od-xl07Ob-OEVmcd.skiptranslate {box-shadow: 0 2px 2px 0px rgba(0,0,0,0.4);}

/* 한국어 공통(layout) 수정 */
.m_gnb_wrap.open .hd_lang {margin: -10px 0 0 10px; max-width: 150px; height: 32px; padding: 4px 10px; border-radius: 20px; border: 1px solid #d9d9d9; background: #fff }
.m_gnb_wrap.open .hd_lang .goog-te-gadget-simple {border: 0;}
.m_gnb_wrap.open .hd_lang a {padding: 0; line-height: 1.2;}
:not(:lang(ko)) .m_gnb_wrap.open .m_gnb .m_gnb_list {height:80%;}
:not(:lang(ko)) .m_gnb_wrap.open .m_gnb .m_login{align-content: flex-start;flex-wrap: wrap;}

/* header - 날씨 미세먼지 정보 */
.hd_weather .weather p {max-width: 150px}
.hd_weather .dust p  .icon_dust {flex-shrink: 0}

/* 메인 - slider01 내지역물정보*/
.local_water .local_title .set_local {display: none;}
.local_water .local_step {justify-content: center; width: 100%;}
.local_water .local_step li span {min-height: 24px;}
.data_circle {width:104px; height: 104px; border-radius: 50%; flex-shrink: 0}
.data_circle a {min-width: 40px;}
:not(:lang(ko)) .local_water .local_step li span {width: 98%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all;}
:not(:lang(ko)) .data_circle {width:106px; height:106px; border-radius: 50%}
:not(:lang(ko)) .data_circle .title {width: 70%; text-align: center; font-size: 15px;word-break: break-all;}
:not(:lang(ko)) .data_circle .s_title {display: none;}
:not(:lang(ko)) .data_circle .per {font-size: 14px}
:not(:lang(ko)) .data_qual .q_title {justify-content: space-between; flex-wrap: wrap; column-gap: 4px;}
:not(:lang(ko)) .data_qual .q_title a {min-width: 88px;margin-left:0;}

/* 메인 - slider03 물 재해현황 */
.water_info .title > a.link {vertical-align: top;}
:not(:lang(ko)) .water_info {padding: 30px 0;}
:not(:lang(ko)) .water_info .title > a.link {vertical-align: middle;}
:not(:lang(ko)) .info_list ul li span {font-size: 14px;}

/* 메인 - slider04 글로벌 물 이슈 */
:not(:lang(ko)) .issue_list li a p {word-break: normal;}

/* 메인 - 물뉴스, 공지사항 */
:not(:lang(ko)) .notice_list .text_box .title {width: 98%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all;}
:not(:lang(ko)) .notice_list .text_box .exp {width: 98%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all;}	

/* 메인 - 물과 함께하는 생활 */
:not(:lang(ko)) .news_slider .slide .title {width: 98%; height: auto;min-height: 120px;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4;}
:not(:lang(ko)) .news_slider .slide .title font {display: flex; flex-direction: column;}
:not(:lang(ko)) .news_slider .slide .title br {display: none;}
:not(:lang(ko)) .news_slider .slide .txt {display: none;}
:not(:lang(ko)) .news_slider .slide a {margin-top: 0;}
:not(:lang(ko)) .news_title .title  > span:last-child:after {display: none}

.txt-ani {position: relative;}
.txt-ani marquee {position: absolute; top: 0; left: 0; width: 100%; opacity: 0;}   


/* 서브페이지  레이아웃 공통 */
:lang(ja) .tab_course ul li div p,
:lang(zh-CN) .tab_course ul li div p,
:lang(zh-TW) .tab_course ul li div p {word-break: normal}

:not(:lang(ko)) .board_search .board_sch_btn {min-width: 80px;}
:not(:lang(ko)) .cate_text_wrap input[type="radio"] + label {width: auto; min-width: 30px; padding: 0 5px;}
:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW)) .dict_info li span {min-width: 200px;}

/* 2024.11.19 다국어 관련 수정 : 커뮤니티>질의응답-진행프로세스(글자 영역 벗어나는 오류) */
:not(:lang(ko)) .qna_process ul li br {display:none;}

/* 서브 - 만족도 조사 */  
:not(:lang(ko)) .research_wrap a {width: 110px; text-align: center;}
@media (max-width: 760px) {
    :not(:lang(ko)) .research_wrap a {width: 100%;}	
}

:not(:lang(ko)) .list_cast li .info {display: block;}
:not(:lang(ko)) .list_cast li .info>a, 
:not(:lang(ko)) .list_cast li .info>div {display: block; padding: 17px 10px;}
:not(:lang(ko)) .view_tab ul li a {height: 100%;}

:lang(ru) .drought_counter_wrap .listbox span {width: 115px;}
:lang(ru) .drought_counter_wrap .listbox .innerbox {margin-left: 115px;}
:lang(ru) .drought_counter_wrap .listbox span em {line-height: 1.1}

:not(:lang(ko)) .algae_diag_flow span {display: flex; flex-direction: column; justify-content: center; padding-top: 0;}
:not(:lang(ko)) .algae_diag_flow span > br {display: none;}
:not(:lang(ko),:lang(ja),:lang(zh-CN)) .resp_form dl dd .date input {max-width: 180px;}
:not(:lang(ko),:lang(ja),:lang(zh-CN)) .resp_form dl dd.search input {width: 100%}
:not(:lang(ko),:lang(ja),:lang(zh-CN)) .resp_form dl dd .date input {max-width: 200px;}
:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW)) .board_cate ul {flex-wrap: wrap;}

@media all and (min-width: 420px) {
	/* 메인 - slider01 내지역물정보*/
	:not(:lang(ko)) .data_circle {width: 120px; height: 120px;}
	
  	/* 메인 - slider03 물 재해현황 */
	:not(:lang(ko)) .info_list ul li {width: 120px; height: 120px; border-radius: 50%; justify-content: center; flex-shrink: 0}
}

/*=== 태블릿 ================================================= */
@media all and (min-width: 768px){

	/* 한국어 공통(layout) 수정 */ 
  
  	/* header - 날씨 미세먼지 정보 */
	:not(:lang(ko)) .hd_weather .weather p {max-width: 200px; width: 160px;}
  
  	/* 메인 - slider01 내지역물정보*/
	.local_water .local_step {width: 70%; margin: 0 auto;}
	.local_water .local_step li span{ display:block; margin-top:4px; }
	
	/* 서브페이지 */		
	/* 한국어,중국어 제외한 메뉴명&경로 공통 영역 */
	:not(:lang(ko),:lang(zh-CN),:lang(zh-TW)) .content_top {display: block; padding: 0 0 20px 0;}
	:not(:lang(ko),:lang(zh-CN),:lang(zh-TW)) .content_top .breadcrumb {padding-top: 10px}

  	/* 서브 - 만족도 조사 */  
	:not(:lang(ko)) .research_wrap textarea {width: calc(100% - 165px)}
	:not(:lang(ko)) .research_wrap a {width: 160px;}	
  
	:not(:lang(ko)) .tabs ul li a {display: flex; align-items: center; padding: 0 21px 0 10px; white-space: normal; height: 68px;}
	:not(:lang(ko)) .tabs ul li.active a:after {right: 5px;}
    
	:not(:lang(ko),:lang(ja),:lang(zh-CN)) .resp_form dl dd.search input {width: 60%}
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW))  .board_cate ul li {width: auto;}
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW))  .board_cate ul li a {padding: 10px;}
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW)) .dict_con + .box_st01 {padding-right: 200px;}
	:not(:lang(ko)) .tab_course ul li div p.title {word-break: break-all;}
  
    /* 2024.12.17 다국어 관련 수정 : 기간 검색(공통) 넓이 설정 추가 */
  	:not(:lang(ko)) .tab_search .tab_sch_row {flex-wrap:wrap;row-gap:4px;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .select_wrap {width:100%;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap {flex-wrap:nowrap;gap:4px;width:100%;min-width:700px;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap .title {width:auto;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap .date_custom {width:auto;}
	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap > font {display:flex;gap:4px;width:auto;}
  	/* 2024.12.16 다국어 관련 수정 : 운영현황>실시간현황>One-Click 상단 검색영역 반응형시 다운로드 버튼 글씨 잘림. width:auto !important;로 변경*/
	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap .btn_tab_sch {min-width: 60px; white-space: normal;width:auto !important;word-break:break-all;}	
  	/* 2024.12.17 다국어 관련 수정 : 운영현황>실시간현황>One-Click 기간 검색 넓이 설정 추가 */
  	:not(:lang(ko)) .one-click-sch .tab_search .tab_sch_row {flex-wrap:nowrap;}
  	:not(:lang(ko)) .one-click-sch .tab_search .tab_sch_row .date_wrap {justify-content:flex-start;width:78%;min-width:auto;}
  	:not(:lang(ko)) .one-click-sch .tab_search .tab_sch_row .date_wrap .date_custom {max-width:140px;}
}
	
@media all and (min-width: 1024px){

}
	
/*=== pc 화면  ================================================= */
@media all and (min-width: 1280px){
	:not(:lang(ko)) .resp_form dl dt {width: 17%; padding: 20px 8px;}
    :not(:lang(ko)) .resp_form dl dd {width: 73%;}
  
  	/* 2024.12.17 다국어 관련 수정 : 운영현황>실시간현황>One-Click 기간 검색(공통) 넓이 설정 추가 */
  	:not(:lang(ko)) .tab_search .tab_sch_row {flex-wrap:nowrap;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .select_wrap {width:40%;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap {width:55%;min-width:auto;justify-content:flex-start;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap .title {width:15%;}
  	:not(:lang(ko)) .tab_search .tab_sch_row .date_wrap .date_custom {width:auto;max-width:180px;}
  	:not(:lang(ko)) .one-click-sch .tab_search .tab_sch_row .date_wrap {width:75%;}
}

@media all and (min-width: 1400px){
	/* 한국어 공통(layout) 수정 */
  	.hd_top .container  {position: relative;}
	.hd_lang {height: 34px; padding: 0px 10px; border: 1px solid #d9d9d9; border-radius: 20px; background: #fff; display: block;}
  	.hd_lang .goog-te-gadget-simple {border: 0;padding: 7px 0;background: none;}
	.hd_lang a {padding: 0; line-height: 1.2}
  	/* 언어설정 버튼 */
  	.lang-btn {position:relative;background:#3f86d7;border-radius:20px;}
    .lang-btn::before {content:"\f13a";position:absolute;display: inline-block;right:10px;top:8px;font-family: "FontAwesome";font-weight: 900;color:#fff;}
  	.lang-btn .lang-select::-ms-expand {display: none;}
	.lang-btn .lang-select {position:relative;display:block;width:125px;height:100%;padding:0px 25px 0px 10px;margin-right:0;border:none;border-radius:20px;color:#fff;font-weight:500;text-overflow:ellipsis;background: none;-o-appearance: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
	.lang-btn .lang-select option {color:#000000;}

  	/* header - gnb 영역 */
 	:lang(ko) .gnb > li:nth-child(4) .sub_menu_title {height: 300px;}
	:lang(ko) .gnb > li:nth-child(5) .sub_menu_title {height: 280px;}
  	:not(:lang(ko)) .gnb > li  {display: flex; align-items: center;}
	:not(:lang(ko)) .gnb > li > a {padding: 0 20px; font-size: 17px}
	:not(:lang(ko)) .gnb > li > div > ul {padding: 15px 40px}
    :not(:lang(ko)) .gnb > li > div > ul > li > a {padding: 0 5px 0 15px; min-height: 52px; display: flex; align-items: center}
	:not(:lang(ko)) .gnb > li > div > ul > li > ul > li {margin:7px 0;}
  	:not(:lang(ko)) .gnb > li > div > ul > li > ul > li > a {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 100%;line-height:15px;}
  	:not(:lang(ko)) .gnb > li > div > ul > li > ul > li > a > font {flex: 1;}
  	:not(:lang(ko)) .sub_menu_wrap.open {max-height:320px}
  	:not(:lang(ko)) .gnb > li .sub_menu_title {height: 320px}
  	:not(:lang(ko)) .gnb > li .sub_menu_title span {text-align:right;}
	/* 영어, 힌디어, 인도네시아어, 태국어 */
  	/* :lang(ja) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
  
	:lang(ja) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(ja) .gnb > li:nth-child(5) .sub_menu_title,
	:lang(zh-CN) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(zh-CN) .gnb > li:nth-child(5) .sub_menu_title,
	:lang(zh-TW) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(zh-TW) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(en) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(en) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(en) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(hi) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(hi) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(hi) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(id) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(id) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(id) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(th) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(th) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(th) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}


	:lang(es) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(es) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(es) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(fr) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(fr) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(fr) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(ar) .gnb > li:nth-child(2) .sub_menu_title {height: 280px}
	:lang(ar) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(ar) .gnb > li:nth-child(5) .sub_menu_title {height: 300px}
  
	:lang(ru) .gnb > li:nth-child(2) .sub_menu_title,
	:lang(ru) .gnb > li:nth-child(4) .sub_menu_title,
	:lang(ru) .gnb > li:nth-child(5) .sub_menu_title {height: 300px} */
	
  	/* 메인 - slider */
  	.slider .slider_title .main_title {max-width: 800px;}
  	:not(:lang(ko)) .slider .slider_title .main_title {max-width: 860px;}	
	:not(:lang(ko)) .slider .slider_title .main_title span {text-align: left;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-break: break-all;}
  	:not(:lang(ko)) .slider .slider_title .main_title p {text-align: left;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;word-break: break-all;}
	:not(:lang(ko)) .slider .slider_title .main_title p.exp {margin:5px 0;}
	:not(:lang(ko)) .slider_pager {bottom: 40px;}	
  
	/* 메인 - slider01 내지역물정보 */
  	.local_water .local_step {width: 100%; justify-content: flex-start;}
	.local_water .local_step li span {min-height: 32px;}
	.data_circle {width:170px; height: 170px;} 	
    .data_circle a {min-width: 58px} 
    :not(:lang(ko)) .local_water {padding: 15px 0 0 0;}
  	:not(:lang(ko)) .local_water .local_title:after {width: 570px;}	
  	:not(:lang(ko)) .local_water .local_step li {width: 100%;}
	:not(:lang(ko)) .local_water .local_step li span {min-height: 0px;}
	:not(:lang(ko)) .data_circle {width:180px; height:180px;}
	:not(:lang(ko)) .data_circle .per {font-size: 22px;}
	:not(:lang(ko)) .data_circle .title {width: 70%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 21px; cursor: pointer;}
	:not(:lang(ko)) .data_circle .s_title {display: block; text-align: center;/* font-size: 13px;*/} 
	:not(:lang(ko)) .data_circle:hover .txt-ani {text-overflow: unset}
	:not(:lang(ko)) .data_circle:hover .txt-ani > font {opacity: 0}
	:not(:lang(ko)) .data_circle:hover .txt-ani > marquee {opacity: 1;}
  	:not(:lang(ko)) .data_qual .q_title {max-width: 570px;}
  	:not(:lang(ko)) .data_qual .q_title > font {font-size: 18px;}
/*    :not(:lang(ko)) .data_qual .q_title a {min-width: 120px}*/
  
	/* 메인 - slider03 물 재해현황 */
  	:not(:lang(ko)) .water_info {max-width: 800px; padding: 0; margin-top: -10px}
  	:not(:lang(ko)) .water_info .tip {margin-top: 30px;}
  	:not(:lang(ko)) .info_list ul li {width: 210px; height: 210px;}
 	:not(:lang(ko)) .info_list ul li span {font-size: 22px;}
  
  	/* 메인 - 물뉴스, 공지사항 */
	:not(:lang(ko)) .latest_area .notice_block {width: 600px}
  	:not(:lang(ko)) .notice_block h3 {margin-right: 20px;}	
	:not(:lang(ko)) .notice_block .view_more {top: 35px; right: 10px;}
  
	/* 상단 탑라인 영역*/	
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW),:lang(ar),:lang(th)) .sub_menu_wrap.open {border-top: #898c89 solid 1px;}
	:not(:lang(ko)) .top_login > a {display:inline-block;max-width: 160px; height: 34px; padding: 0 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
	:not(:lang(ko)) .hd_weather .top_login > a {max-width:250px; height:30px;  padding: 0 10px}		
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW),:lang(ar),:lang(th)) .hd_weather .weather {margin-right: 10px;}
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW),:lang(ar),:lang(th)) .oneClick-link > a {display:inline-block;max-width: 200px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
	:not(:lang(ko)) .icon_w {flex-shrink: 0}
	
	/* 서브페이지 */
	:not(:lang(ko),:lang(ja),:lang(zh-CN),:lang(zh-TW)) .dict_con + .box_st01 {padding: 30px 200px 30px 30px;}
	:not(:lang(ko)) .dam_select > div > select {width: 100%;}
	:not(:lang(ko)) .resp_form dl dd .no_input {margin: 2px 0;}
	:not(:lang(ko)) .left_menu h2 {display: flex;text-align: center;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;width: 100%;line-height: 1.3;}
}