@charset "utf-8";
/* CSS Document */

/*******************************
 * Infomation : 국가 통합물관리정보플랫폼 (2차)-[녹조(조류)지도 팝업, 보모니터링 팝업]
 * FileName   : popup.css 
 * Update     : 2026.07.02.
********************************/

:root {
	

	--white: #fff;
	--main-color: #256ef4;
	--sub-color: #002b50;
	--txt-color: #1e2124;
	--txt-sub-color: #555;	
	--ce-line-color: #dcdcdc;
	--bg-color: #fff;

	--ce-btn-main: #3456c5;
	--ce-btn-sub: #1f3a69;
	--ce-btn: #7b7b7f;
	--ce-btn-bBgE: #2a784d;

	--ce-input-line: #717171;
    --ce-input-hegith: 4rem;
    --ce-input-radius: .5rem;

    /* Popup Font */
    --gq-color-prim: #256ef4;
    --gq-color-secd: #d3e1fb;
    --gq-color-third: #083891;
    
    --gq-bg-secd-color: #ecf2fe;
    --gq-btn-secd-bg: #eff5ff;
    
    --gq-text-prim: #0b50d0;
    --gq-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    --gq-radius: .4rem;
    --gq-gis-prim: #0b50d0;

    /* Table */
    --ce-table-top-line: #0e2b5e;
    --ce-table-line: #d8d8d8;
    --ce-th-bg: #eef2f7;
}

*:focus {	
	/* border: 1px solid #000; */ box-shadow: 0 0 0 3px rgba(0,123,255,.25); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; outline: 0; 
}

.gis_popup_top *:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.8); outline: 1px;}

.sel_m{ height: 4rem; border-radius: 5px; border: 1px solid #717171; box-sizing: border-box; padding: 0 3.8rem 0 1.6rem; background: url("../images/icon/ico_angle.svg") no-repeat right 1rem center #fff; background-size: 1.8rem;
    appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.inp_m{ height: var(--ce-input-hegith); border-radius: var(--ce-input-radius); border: 1px solid var(--ce-input-line);}

.inp_m.lg,
.sel_m.lg{ height: 36px; border-radius: 3px; font-size: 17px;}
.inp_m.sm,
.sel_m.sm{ height: 34px; font-size: 15px;}


/* 입력 : 달력 Input */
.inp_cal{ height: var(--ce-input-hegith); border-radius: var(--ce-input-radius); border: 1px solid var(--ce-input-line); box-sizing: border-box; color: var(--txt-color); width: 13rem; background: #fff; padding: 0 1rem 0 0; display: flex; align-items: center;}
.inp_cal.time{ width: 17.6rem;}
.inp_cal input{ border: none; margin: 0 0 0 1rem; height: 100%; width: 100%; flex: 1;}
.btn_inp_cal{ background: url("../images/icon/ico_calendar.svg") no-repeat center; width: 2rem; height: 2rem;}

/*############################## 녹조/보모니터링 팝업 ###########################*/
body:has(.gis_popup_wrap){ background-color: #f1f1f1;}
.gis_popup_wrap{}
.gis_pop_info_wrap{ background-color: #063a74; padding: 1.6rem 2rem 3rem 2rem;}

.gis_popup_top{ display: flex; justify-content: space-between; align-items: center;}

.gis_popup_top.row{ gap: 1.2rem;}

.map_point_tit{ display: flex; align-items: center; gap: 2.5rem;}
.map_point_tit strong{ padding-left: 2.8rem; position: relative; font-size: 2.1rem; font-weight: normal; color: #fff; line-height: 1;}
.map_point_tit strong::before{ content: ""; width: 1.6rem; height: 2.3rem; background: url("../images/moapop/gig_pop_tit.png") no-repeat; display: inline-flex; position: absolute; left: 0; top: -1px;}

.map_point_tit b{ position: relative; font-size: 2.1rem; font-weight: normal; color: #fff; line-height: 1;}

.map_point_tit .datalist{ position: relative; padding-left: 2.8rem;}
.map_point_tit .datalist::before{ content: ""; width: 2.4rem; height: 2.4rem; background: url("../images/icon_datalist.svg") no-repeat; display: inline-flex; position: absolute; left: 0; top: -1px;}

.map_point_tit span{ position: relative; color: #aabed4; font-size: 1.7rem;}
.map_point_tit span::before{ content: ""; width: 1px; height: 1.6rem; background-color: #3e6289; position: absolute; left: -1.3rem; top: .4rem;}

.gis_top_btn_wrap{ margin-left: auto; margin-right: 1.2rem;}

.btn_gis_pop_close{ width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center;}

.btn_gis_pop_close::before{
	content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_close.svg");
    mask-image: url("../images/icon/ico_close.svg");	
	background-color: #fff;
}

.gis_top_btn_wrap{ display: flex; gap: .8rem;}
.top_row_btn_wrap{ margin-left: auto;}

@media screen and (max-width: 768px) {
    .gis_pop_info_wrap{ padding: 2rem;}
    .gis_popup_top{ align-items: flex-start; flex-direction: column; gap: 1rem;}
    .gis_popup_top.row{ flex-direction: row; align-items: center;}
    .btn_gis_pop_close
    .map_point_tit{ }
    .map_point_tit strong{ font-size: 1.9rem; padding-left: 2.2rem;}
    .map_point_tit b{ font-size: 1.9rem;}
    .gis_top_btn_wrap{ margin-left: 0; gap: .4rem;}
    .btn_gis_newwin{ white-space: nowrap; font-size: 1.4rem;}
    .btn_gis_pop_close{ position: absolute; right: 2rem; top: 2rem;}
    .gis_popup_top.row .btn_gis_pop_close{ position: relative; right: auto; top: auto;}
}

/* 팝업 : 지도 */
.gis_popup_map{ margin-top: 2rem; position: relative; height: 18.8rem; border-radius: var(--gq-radius); overflow: hidden;}
.gisp_zoom_wrap{ border-radius: var(--gq-radius); overflow: hidden; border-radius: var(--gq-radius); position: absolute; left: 1.2rem; top: 1.2rem; display: inline-flex; flex-direction: column; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); z-index: 999;}
.gisp_zoom_wrap .btn_gisp_zoom{ position: relative; width: 3.2rem; height: 3.2rem; background-color: #fff;}
.gisp_zoom_wrap .btn_gisp_zoom:hover{ background-color: var(--gq-color-secd);}

.gisp_zoom_wrap .btn_gisp_zoom::before,
.gisp_zoom_wrap .btn_gisp_zoom::after{ content: ""; width: 1.2rem; height: .2rem; background-color: #343a40; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.gisp_zoom_wrap .btn_gisp_zoom::after{ transform: translate(-50%, -50%) rotate(90deg);}
.gisp_zoom_wrap .btn_gisp_zoom.in{}
.gisp_zoom_wrap .btn_gisp_zoom.out{ border-top: 1px solid #ced4da;}
.gisp_zoom_wrap .btn_gisp_zoom.out::after{ display: none;}

.point_gisp{ position: absolute; z-index: 99;}
.gisp_map_scale{ position: absolute; background-color: rgba(255, 255, 255, .7); height: 2.6rem; font-size: 1.2rem; font-weight: 600; border-radius: 1rem .5rem .5rem .5rem; padding: 0 1.2rem; display: inline-flex; align-items: center; gap: 1rem; right: .4rem; bottom: .4rem; z-index: 999;}
.gisp_map_scale em{ height: .8rem; border: 2px solid #1e2124; border-top: none;}
.gisp_map_scale strong{ white-space: nowrap;}

.gp_info_list{ margin-top: 2rem;}
.gp_info_list ul{ display: flex; flex-wrap: wrap; gap: .8rem;}
.gp_info_list ul li{ width: calc(33.3% - .8rem); padding-left: .3rem;}
.gp_info_list ul li.long{ width: 100%;}
.gp_info_list ul li span{ color: #d3e1fb; background: url("../images/moapop/blit_gp_info.png") no-repeat left center; padding-left: 1.5rem; margin-right: .5rem;}
.gp_info_list ul li em{ color: #fff;}

@media screen and (max-width: 768px) {
    .gp_info_list ul li{ width: 100%;}
}

.gis_pop_cont{ padding: 1rem 2rem 2rem 2rem;}

.gisp_sch_box,
.gisp_box{ border: 1px solid #e6e8ea; border-radius: 1rem; background-color: #fff; margin-top: 1rem; padding: 1.8rem;}

.gisp_box_blue{ border: none; border-radius: 1rem; background-color: var(--gq-bg-secd-color); padding: 1.8rem;}

.qp_total_chart{ padding: 1rem;}
.qp_total_chart .chart_info{ text-align: center; background-color: var(--gq-bg-secd-color); border-radius: 1rem 1rem 0 0; padding: 2rem;}
.qp_total_chart .chart_info strong{ font-size: 1.7rem; color: var(--gq-text-prim);}

.gisp_top{ display: flex; justify-content: space-between; margin-bottom: 1rem;}

.gisp_btit{ margin-right: .6rem; display: inline-flex; align-items: center; gap: .9rem;}
.gisp_btit::before{ content: ""; width: 5px; height: 5px; border-radius: 5px; background-color: #8e8e8e; display: inline-flex;}

.gisp_tit{ font-size: 1.7rem; color: #0b50d0; font-weight: 600; margin-right: 1rem;}
.gisp_stit{ margin-right: .6rem; color: #6d7882; font-weight: 600; display: inline-flex; align-items: center; gap: .8rem;}
.gisp_stit::before{ content: ""; width: 3px; height: 3px; border-radius: 3px; background-color: #6d7882;}

.etc_info{ display: inline-flex; align-items: center; gap: 1.2rem;}
.gisp_graph{}
.gisp_bottom{ margin-top: 2rem;}

.gisp_top_jcsb{ width: 100%; display: flex; align-items: center; justify-content: space-between;}

.gisp_desc{ background-color: var(--gq-bg-secd-color); border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 1rem; margin-left: -2rem; margin-right: -2rem; padding: 1.4rem 2rem; text-align: center;}

.gisp_p_tit{ display: inline-flex; align-items: center; gap: .8rem;}
.gisp_p_tit em{ font-weight: normal;}
.gisp_p_tit.stay{}
.gisp_p_tit.stay::before{ content: ""; margin-right: -2px; width: 1.5rem; height: 1.9rem; background: url("../images/stay_tit.png") no-repeat; display: inline-flex;}

@media screen and (max-width: 768px) {
    .gisp_top{ flex-direction: column; gap: .6rem;}
    .gisp_top.row{ flex-direction: row;}
    .gisp_top.column_none{}
    .etc_info{}
}

/* 검색 */
.gp_search{ position: relative; min-height: 4rem; display: flex; justify-content: space-between;}
.gp_search.col{ flex-direction: column; gap: 1rem;}
.gp_sch_period_wrap{ display: flex; flex-direction: column; gap: 1rem;}

.gp_search + .gis_pop_top_wrap{ margin-top: 1px;}

.gp_sch_period{ display: flex; align-items: center; gap: 1.2rem;}
.gp_sch_set{ display: flex; gap: .8rem;}
.gp_sch_tit{ font-weight: 500;}
.dtic{ margin: 0 0rem; display: flex; align-items: center;}

.gp_search.wh .dtic{ color: var(--txt-color);}

.gp_search .sel_m.year{ min-width: 9rem;}
.gp_search .sel_m.month{ min-width: 8rem;}
.gp_search .inp_cal{ width: 14rem;}
.gp_search .inp_cal input[type=text],
.gp_search .inp_cal input[type=date]{ border: none;}
.gp_search .inp_cal.time{ width: 18.2rem;}

.gp_sch_text{ color: var(--gq-color-secd); font-size: 1.3rem; display: flex; align-items: center; margin-left: 1rem;}
.gp_sch_text b{ margin-left: .4rem;}

.gp_schUnit + .gp_schUnit{ margin: 0 0 0 .5rem;}

.gp_schUnit{ position: relative; display: flex; gap: .8rem; align-items: center;}

.gpsch_btn_wrap{ display: inline-flex; align-items: flex-end; gap: .8rem;}

.gp_desc{ color: #464c53;}

.scroll + .gp_desc{ margin-top: 1rem;}

@media screen and (max-width: 768px) {
    .gp_search{ flex-direction: column; align-items: flex-start; gap: 1.6rem;}
    .gp_search.col{ gap: 2rem;}
    .gp_sch_period_wrap{ gap: 1rem; flex-direction: column; align-items: flex-start; width: 100%;}
    .gp_sch_period{ flex-direction: column; align-items: flex-start; width: 100%;}

    .gp_sch_set{ flex-direction: column; width: 100%;}
    .gp_sch_set.row{ flex-direction: row;}
    .gp_sch_set.row .gp_schUnit{ flex: 1;}
    .gp_sch_set.row .dtic{ width: auto;}

    .gp_schUnit + .gp_schUnit{ margin: .5rem 0 0 0;}
    .gp_schUnit{ display: flex; gap: .8rem;}
    .gp_schUnit .sel_m,
    .gp_schUnit .inp_m{ flex: 1; width: 100% !important;}

    .dtic{ width: 100%; text-align: left; font-weight: 500; margin: -6px 0; display: none;}

    .btn_gp.btn_gpSch{ width: 100%; justify-content: center;}
    .gp_sch_right{ margin-top: 1rem; width: 100%; text-align: right;}
    .btn_gp.btn_gpExc{ }

    .gp_sch_text{ margin-top: .8rem;}

    .gpsch_btn_wrap{ width: 100%;}
    .gpsch_btn_wrap .btn_gp{ flex: 1;}

    .gp_schUnit .gp_desc{ position: absolute; right: 0; top: -3rem;}
    
}

.day_sel_wrap{ display: inline-flex; gap: .4rem;}

.btn_day_sel{ border: 1px solid #cdd1d5; width: 4.6rem; height: 2.6rem; border-radius: var(--gq-radius); font-size: 1.3rem; display: inline-flex; justify-content: center; align-items: center;}
.btn_day_sel.on{ color: #fff; background-color: var(--gq-color-prim); border: none;}

.day_sel_wrap.gp_type .btn_day_sel{ height: 3.2rem; background-color: var(--gq-btn-secd-bg);}
.day_sel_wrap.gp_type .btn_day_sel.on{ background-color: var(--gq-color-prim);}

.day_sel_wrap.wide{ width: 100%; gap: .8rem;}
.day_sel_wrap.wide .btn_day_sel{ flex: 1;}

.form_check.qp_scale label{ color: #6d7882; font-weight: 600;}

.daysel_scale_wrap{ display: flex; align-items: center; justify-content: space-between;}

@media screen and (max-width: 768px) {
    .daysel_scale_wrap{ flex-direction: column; align-items: flex-start; gap: 1rem;}
}

.gp_top_sch_period{ display: inline-flex; align-items: center; gap: .6rem;}

.gp_top_sch_period .gp_sch_tit{ color: #fff; margin-right: .6rem;}
.gp_top_sch_period .dtic{ color: #fff;}

@media screen and (max-width: 768px) {
    .gp_top_sch_period .gp_sch_tit{ display: none;}
    .gp_top_sch_period .dtic{ width: auto;}
}

/* 그래프 Box Size */
.gp_graph_box{ background-color: #fff;}
.gp_graph_box.sm{ height: 14rem;}
.gp_graph_box.md{ height: 25rem;}
.gp_graph_box.lg{ height: 32rem;}
.gp_graph_box.tlg{ height: 42rem;} /* 종합차트 */
.gp_graph_box.ttlg{ height: 48rem;}
.gp_graph_box.tttlg{ height: 54rem;}

.gp_line_box{ border: 1px solid #cdd1d5; border-radius: .6rem;}

/*######## 생물측정망 : 물고기 정보 ########*/
.gp_fish_list{}
.gp_fish_list ul{ display: flex; flex-wrap: wrap; gap: 1rem;}
.gp_fish_list ul li{ flex: 1 calc(50% - .5rem);}

.gp_fish_item{ padding: 1.6rem 2rem; background: #eff5ff; height: 100%; border-radius: var(--gq-radius);}
.gp_fish_item .fish_spec{ margin-bottom: 1rem;}

.gp_fish_info{ display: flex; gap: 2rem; margin-bottom: 1rem;}
.fish_pic{ display: inline-block; width: 8.5rem; height: 5.2rem;}
.fish_pic img{ width: auto; height: auto; max-width: 100%;}
.gp_fish_info .fish_name{ font-weight: 700; flex: 1;}

.gp_fish_item .fish_desc{ color: var(--txt-sub-color); font-size: 1.3rem;}

@media screen and (max-width: 768px) {
    .gp_fish_list ul li{ width: 100%; flex: auto;}
    .gp_fish_info{ gap: 1rem; flex-direction: column;}
    .fish_pic{ width: 100%; height: auto;}
}

/******************************************* 기본 테이블 ********************************************/
.scroll .dataView td{ white-space: nowrap;}

.tbl_top_wrap{ display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem 0;}
.tbl_top_wrap .gp_h4{ margin-bottom: 0;}
.tbl_top_wrap .unitSet{ display: flex; gap: 1.6rem; align-items: center;}
.tbl_top_wrap .sch_cout{ position: relative; font-weight: 600; padding-left: .7rem;}
.sch_cout b{ color: var(--gq-text-prim);}

.tbl_top_wrap .formUnit{ display: flex; gap: .8rem; align-items: center;}
.tbl_top_wrap.jcEnd{ justify-content: flex-end;}

.formTit{}

.tbl_wrap{}

.gp_graph_list + .tbl_wrap{ margin-top: 2rem;}

.gp_gage_wrap + .gp_graph_list{ margin-top: 2rem;}

.tbl { width: 100%; border-collapse: separate; border-top: 1px solid var(--ce-table-line);}
.tbl tr th,
.tbl tr td{ border-bottom: 1px solid var(--ce-table-line); line-height: 2.2rem; padding: .7rem 1rem;}
.tbl tr th:not(:last-child),
.tbl tr td:not(:last-child){ border-right: 1px solid var(--ce-table-line);}
.tbl tr th{ text-align: center; background-color: var(--ce-th-bg);}
.tbl tr td{ text-align: left; color: var(--txt-sub-color);}
.tbl tbody tr th{ background: #edf1f5;}
/*
.tbl tbody tr td select,
.tbl tbody tr td input[type=text],
.tbl tbody tr td input[type=select]{ width:96%;}
*/
.tbl tbody tr td textarea{ width:96%;}
.tbl.tdCenter td{ text-align:center;}

.tdr1{ border-right: 1px solid var(--ce-table-line);}

/* 가로 데이터 테이블*/
.tbl.dataView tr td{ text-align:center;}
.tbl.dataView{ white-space:nowrap}
.tbl.dataFix tr td{ text-align:center;}
.tbl.dataFix.tdLeft tr td{ text-align:left;}

.thFix .tbl{ position: relative; top: 0; border-top: none;}
.thFix .tbl th{ position: sticky; top: 0; border-top: 2px solid var(--ce-table-top-line);}

.tbl_row{ width: 100%; border-collapse: separate; border-top: 1px solid var(--ce-table-line);}
.tbl_row tr th,
.tbl_row tr td{ border-bottom: 1px solid var(--ce-table-line); line-height: 2.2rem; padding: .7rem 1rem;}
.tbl_row tr th:not(:last-child),
.tbl_row tr td:not(:last-child){ border-right: 1px solid var(--ce-table-line);}
.tbl_row tr th{ text-align: center; background-color:var(--ce-th-bg); font-weight: 500;}
.tbl_row tr td{ text-align: left; color: var(--txt-sub-color);}
.tbl_row tbody tr td select,
.tbl_row tbody tr td input[type=text],
.tbl_row tbody tr td input[type=select]{ width:96%;}
.tbl_row tbody tr td textarea{ width: 96%; border: 1px solid var(--ce-input-color);}

.tbl_decs{ font-size: 1.5rem; color: var(--txt-sub-color);}
.tbl_wrap + .tbl_decs{ margin-top: 1rem;}

/* pagination */
.pagination{ display: flex; align-items: center; justify-content: center; flex-direction: row; width: 100%; margin-top: 1rem; gap: 1rem}
.pagination .page-navi{ display: inline-flex; align-items: center; justify-content: center; flex-direction: row; min-width: 3rem; height: 3rem;}
.pagination .page-navi:hover{ border-radius: 0.6rem; background-color: var(--gq-btn-secd-bg); transition: 0.4s ease-in-out;}
.pagination .page-navi:active{ background-color: var(--gq-btn-secd-bg); transition: 0.4s ease-in-out;}
.pagination .page-navi.prev{ order: 1;}
.pagination .page-navi.prev::before{ content: ""; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2rem; background-image: url("../images/ico_page_arr_left.svg"); background-repeat: no-repeat;}
.pagination .page-navi.next{ order: 3;}
.pagination .page-navi.next::after{ content: ""; display: inline-flex; align-items: center; justify-content: center; flex-direction: row; width: 2rem; height: 2rem; background-image: url("../images/ico_page_arr_right.svg"); background-repeat: no-repeat;}
.pagination .page-links{ display: flex; align-items: center; justify-content: center; flex-direction: row; order: 2; gap: .8rem;}
.pagination .page-links .page-link{ display: flex; align-items: center; justify-content: center; flex-direction: row; min-width: 4rem; height: 4rem;}
.pagination .page-links .page-link:hover{ border-radius: 0.6rem; background-color: var(--gq-btn-secd-bg);}

.pagination .page-links .page-link.active{ font-weight: 700; color: #fff; border-radius: 6px; background-color: #2768ff;}
.pagination .page-navi.prev em,
.pagination .page-navi.next em{ display: none;}

@media (max-width: 766px) {
	.pagination{ position: relative; margin-top: 5rem;}
	.pagination .page-navi.prev{ position: absolute; left: calc(50% - 4.2rem); transform: translateX(-50%); top: -3.5rem;}
	.pagination .page-navi.next{ position: absolute; left: calc(50% + 4.2rem); transform: translateX(-50%); top: -3.5rem;}
    .pagination .page-navi.prev em,
    .pagination .page-navi.next em{ display: inline-block;}
}

/* iOS SE */
@media (max-width: 375px) {
    .pagination .page-navi.prev,
    .pagination .page-navi.next{ display: none;}
    .pagination { margin-top: .4rem;}
}

.btn_long{ position: relative; width: 100%; height: 4rem; font-size: 1.5rem; border-radius: 5px; box-sizing: border-box; color: #1e2124; background: var(--gq-btn-secd-bg); border: 1px solid #bacbde; display: flex; align-items: center; justify-content: flex-start; font-weight: 500; padding: 0 1.3rem 0 2rem;}
.btn_long::before{
    content: "";
    display: inline-flex;
    width: 16px;
    height: 14px;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/arr_area_move.svg");
    mask-image: url("../images/arr_area_move.svg");
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: #8a949e;
}
.btn_long:hover{ color: #fff !important; background: var(--gq-color-prim); border: 1px solid var(--gq-color-prim);}
.btn_long:hover::before{ background-color: #fff;}

.btn_long_reset{ position: relative; width: 100%; height: 4rem; font-size: 1.5rem; border-radius: 5px; box-sizing: border-box; color: #1e2124; background: var(--gq-btn-secd-bg); border: 1px solid #bacbde; display: flex; align-items: center; justify-content: flex-start; font-weight: 500; padding: 0 1.3rem 0 2rem;}
.btn_long_reset::before{
    content: "";
    display: inline-flex;
    width: 16px;
    height: 14px;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/arr_area_move.svg");
    mask-image: url("../images/arr_area_move.svg");
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: #8a949e;
}
.btn_long_reset:hover{ color: #fff !important; background: var(--gq-color-prim); border: 1px solid var(--gq-color-prim);}
.btn_long_reset:hover::before{ background-color: #fff;}
.btn_long_reset::after{
    content: "";
    display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_reset.svg");
    mask-image: url("../images/icon/ico_reset.svg");
    background-color: #1e2124;

    margin-left: .6rem;
}
.btn_long_reset:hover::after{ background-color: #fff;}

/************************************************ 체크박스 ************************************************/

/* ChackBox 체크박스 */
.chk_m input[type="checkbox"]{ display: none;}
.chk_m{ display: inline-flex; align-items: center; gap: 0.9rem}

/* 체크박스 디자인 */
.chk_m em{ display: inline-block; width: 1.7rem; height: 1.7rem;}
.chk_m em::before{ content: ""; display: inline-block; width: 1.7rem; height: 1.7rem; background-color: var(--gq-color-prim); box-sizing: border-box; position: relative; cursor: pointer; border-radius: 3px;}
/* checked */
.chk_m input:checked + em::before{ background: url("../images/chk_v.png") no-repeat center var(--gq-color-prim);}

/* 배경 black */
.chk_m.bk em::before{ background-color: #000;}
.chk_m.bk input:checked + em::before{ background: url("../images/chk_v.png") no-repeat center #000;}

/* 배경 white */
.chk_m.wh em{}
.chk_m.wh em::before{ background-color: #fff; border: 1px solid #d8d8d8;}
.chk_m.wh input:checked + em::before{ border: none;}

/* 체크박스 */
.form_check input[type=checkbox] {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.form_check input[type=radio] ~ label { position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(1.6rem + 0.4rem); font-size: 1.5rem; line-height: 1.6rem;}
.form_check input[type=checkbox] ~ label { position: relative; display: inline-flex; min-height: 2rem; padding-left: calc(1.8rem + 0.8rem); font-size: 1.5rem; line-height: 1.6rem; align-items: center;}

.form_check input[type=radio] ~ label:before,
.form_check input[type=radio] ~ label:after,
.form_check input[type=checkbox] ~ label:before,
.form_check input[type=checkbox] ~ label:after { display: block; content: ""; transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);}

.form_check input[type=radio] ~ label:before,
.form-check input[type=checkbox] ~ label:before { z-index: 3;}

.form_check input[type=radio] ~ label:after,
.form_check input[type=checkbox] ~ label:after { z-index: 4;}

.form_check input[type=radio] ~ label:before { position: absolute; top: 0; left: 0; width: 1.6rem; height: 1.6rem; background-color: #fff; border: 1px solid #717171; border-radius: 100%;}

.form_check input[type=radio] ~ label:after { position: absolute; top: calc((1.6rem - 0.8rem) / 2); left: calc((1.6rem - 0.8rem) / 2);
    width: 0.8rem; height: 0.8rem; background-color: #fff; border-radius: 100%;
}

.form_check input[type=radio]:checked ~ label:before { border-color: var(--main-color);}
.form_check input[type=radio]:checked ~ label:after { background-color: var(--main-color);}

.form_check input[type=radio]:disabled ~ label:before { border-color: var(--gray-40); background-color: var(--gray-20);}

.form_check input[type=radio]:disabled + label,
.form_check input[type=checkbox]:disabled + label { color: var(--gray-50); cursor: default;}
.form_check input[type=radio]:checked:disabled ~ label:after { display: block; background-color: var(--gray-40);}
.form_check input[type=radio]:disabled ~ label:after { display: none; background-color: var(--gray-40);}

/* Check Box */
.form_check input[type=checkbox] ~ label:before { position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; background-color: #fff; border: 1px solid #000; border-radius: var(--gq-radius);
}
.form_check input[type=checkbox] ~ label:after {
    position: absolute; top: calc((2rem - 16px) / 2); left: calc((2rem - 16px) / 2); 
    background: url("../images/icon/ico_check_primary_checked.svg") no-repeat 0 0; background-size: contain; opacity: 0; border-radius: 3px;
    content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_checkbox.svg");
    mask-image: url("../images/icon/ico_checkbox.svg");	
	background-color: #fff;
}


/* Black BG */
.form_check.bk input[type=checkbox] ~ label:after { background: url("../images/icon/ico_check_primary_checked.svg") no-repeat 0 0 #000}
.form_check.bk input[type=checkbox] ~ label:before { background-color: #000;}
.form_check.bk input[type=checkbox]:checked ~ label:before { background-color: #000; border-color: #000;}

/* blue BG */
.form_check.bu input[type=checkbox] ~ label:after { background: url("../images/icon/ico_check_primary_checked.svg") no-repeat 0 0 var(--gq-color-prim)}
.form_check.bu input[type=checkbox] ~ label:before { background-color: var(--gq-color-prim);}
.form_check.bu input[type=checkbox]:checked ~ label:before { background-color: var(--gq-color-prim); border-color: var(--gq-color-prim);}
.form_check.bu input[type=checkbox] ~ label:before { border-color: var(--gq-color-prim);}

.form_check input[type=checkbox]:checked ~ label:before { background-color: var(--gq-color-prim); border-color: var(--gq-color-prim);}
.form_check input[type=checkbox]:checked ~ label:after { opacity: 1; transition-delay: 0.2s;}

/* Check Box : disabled */
.form_check input[type=checkbox]:disabled ~ label:before { border-color: var(--gray-40); background-color: var(--gray-20);}
.form_check input[type=checkbox]:disabled ~ label:after { background-image: url("../images/icon/ico_check_primary_disabled.svg");}

.form_check input[type=radio]:focus ~ label,
.form_check input[type=checkbox]:focus ~ label,
.form_switch [type=checkbox]:focus ~ label { box-shadow: 0 0 0 3px rgba(0,123,255,.25); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; z-index: 2;}

/************************************************ 버튼 ************************************************/
.btn_gp{ height: var(--ce-input-hegith); border-radius: var(--ce-input-radius);font-weight: 500; padding: 0 2rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;}

.btn_gp.prim{ background: var(--gq-color-prim); color: #fff;}
.btn_gp.secd{ border: 1px solid #717171;}
.btn_gp.line{ border: 1px solid;}
.btn_gp.line.type1{ border-color: var(--gq-color-prim); color: var(--gq-text-prim); background-color: #fff;}
.btn_gp.line.type2{ border-color: var(--gq-color-prim); color: var(--gq-text-prim); background-color: var(--gq-btn-secd-bg);}
.btn_gp.third{ background-color: #052b57; color: #bacbde;}
.btn_gp.four{ background-color: #052b57; color: #bacbde;}

.btn_gp.gray{ background-color: #6d7882; color: #fff;}
.btn_gp.excel{ background: #339933; color: #fff;}

.btn_gp.line{}
.btn_gp.lg{ height: 4.8rem; font-size: 1.7rem;}
.btn_gp.sm{ height: 3.2rem; font-size: 1.5rem; font-weight: normal; padding: 0 1.2rem; border-radius: var(--gq-radius); gap: .4rem;}

@media (max-width: 766px) {
	.btn_gp.third{ font-size: 1.4rem; white-space: nowrap; padding: 0 1.4rem; gap: .4rem;}
}

[class^="ico_"]::before,
[class*="ico_"]::after{
	content: "";
	display: inline-flex;
    width: 18px;
    height: 18px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
	background-color: #fff;
}
.ico_before::after{ display: none;}
.btn_gp.line.type1::after,
.btn_gp.line.type2::after{ background-color: var(--gq-color-prim);}

.ico_down::after{	
    -webkit-mask-image: url("../images/icon/ico_download.svg");
    mask-image: url("../images/icon/ico_download.svg");
}
.ico_go::after{
    -webkit-mask-image: url("../images/icon/ico_go.svg");
    mask-image: url("../images/icon/ico_go.svg");
}
.ico_move::after{
    -webkit-mask-image: url("../images/moapop/ico_move.svg");
    mask-image: url("../images/moapop/ico_move.svg");
}

.ico_talk::before{
	content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_faq.svg");
    mask-image: url("../images/icon/ico_faq.svg");	
	background-color: #fff;
}
.third.ico_go::after{ background-color: #bacbde;}

.btn_gp.sm::after{ width: 16px; height: 16px;}

.btn_file_down{ background: url("../images/icon_file_down_wh.png") no-repeat right 1.5rem center #717171; padding: 0 3.6rem 0 1.5rem; color: #fff;}

.flex_box{ display: flex;}
.jcSb{ justify-content: space-between !important;}

/************************************************ TAB Menu ************************************************/
.tab_m_container{ display: flex; align-items: center; width: 100%; overflow: hidden; position: relative;}

.tab_m_wrap{ overflow: hidden; flex: 1;}
.tab_m_list{ display: flex; align-items: self-end; margin-bottom: 2.5rem;}
.tab_m_list li{ position: relative; flex: 1;}
.tab_m_list li a,
.tab_m_list li button{ position: relative; font-size: 1.7rem; color: #464c53; width: 100%; height: 5rem; display: flex; justify-content: center; align-items: center; white-space: nowrap; padding: 0 1rem; font-weight: 700; border-bottom: 2px solid #b1b8be;}

.tab_m_list li.active button::after,
.tab_m_list li.active a::after{ content: ""; background-color: #063a74; width: 100%; height: 4px; position: absolute; bottom: -2px;}
.tab_m_list li.active a,
.tab_m_list li.active button{ color: #0e2b5e;}

.tab_m_item.active a,
.tab_m_item.active button{ font-size: 1.7rem; color: #555; width: 100%; display: flex; justify-content: center; align-items: center;}

/* 기본 상태에서 탭 이동 버튼 숨김 */
.tab_m_nav{ display: none;}

/* 콘텐츠 기본 숨김 */
.tab_m_cont{ display: none;}

/* 활성화된 콘텐츠 표시 */
.tab_m_cont.active{ display: block;}

/* 모바일에서만 좌우 버튼 활성화 */
@media (max-width: 768px) {
    .tab_m_list{ overflow: auto;}
    .tab_m_nav{ display: block !important;}
}

.tab_s{ display: flex; align-items: self-end; margin-bottom: 2rem; background-color: #e6e8ea; border-radius: 5px;}
.tab_s li{ position: relative; flex: 1; border-radius: 5px;}
.tab_s li:not(:first-child)::after{ content: ""; position: absolute; left: -1px; top: 1.2rem; height: 1.6rem; width: 1px; background: #e5e5e5; z-index: -1;}
.tab_s li a,
.tab_s li button{ font-size: 1.7rem; color: #555; width: 100%; height: 4.4rem; display: flex; justify-content: center; align-items: center;}

.tab_s li.active{ border: 1px solid var(--gq-color-prim); background: #fff;}
.tab_s li.active a,
.tab_s li.active button{ color: var(--gq-text-prim); font-weight: 700; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}

.tab_xs{ margin-bottom: 1rem; border: 1px solid #cdd1d5; border-radius: 1rem; padding: .4rem; display: flex; gap: .7rem;}
.tab_xs li{ position: relative; flex: 1;}
.tab_xs li:not(:first-child)::before{ content: ""; width: 1px; height: 1.4rem; background-color: #e5e7eb; position: absolute; left: -.3rem; top: 50%; transform: translateY(-50%);}
.tab_xs li a,
.tab_xs li button{ border-radius: .6rem; width: 100%; height: 3rem; display: flex; align-items: center; justify-content: center;}
.tab_xs li.active a,
.tab_xs li.active button{ background-color: var(--gq-color-prim); color: #fff;}

@media (max-width: 768px) {
    .tab_xs{ overflow: auto;}
    .tab_xs li a,
    .tab_xs li button{ white-space: nowrap; min-width: 6rem;}
}

.gp_desc_list{}
.gp_desc_list li{ position: relative; padding-left: 1.2rem;}
.gp_desc_list li::before{ content: ""; width: .5rem; height: .5rem; border-radius: .5rem; background-color: #8e8e8e; position: absolute; left: 0; top: .6rem;}

/*################################################# 녹조(조류)지도 #################################################*/
.algae_popup_map{ margin-top: 2rem; position: relative; height: 30rem; border-radius: var(--gq-radius); overflow: hidden;}

.gp_tbl_wrap{}

@media (max-width: 768px) {
    .gp_tbl_wrap table{ min-width: 800px;}
}

.qp_toggle_wrap{ margin-top: .5rem; padding: 1.7rem 2rem; border-radius: var(--gq-radius); background-color: #063a74;}
.qp_toggle_wrap .gp_info_list{ border-top: 1px solid #1a4e86; padding-top: 2rem; margin-top: 1.6rem; display: none;}

.qp_toggle_wrap.qp_toggle_on{ background-color: #052b57;}
/*.qp_toggle_wrap.qp_toggle_on .gp_info_list{ display: block;}*/

.btn_qp_toggle{ width: 100%; display: flex; align-items: center; justify-content: space-between;}

.btn_qp_toggle::after{
	content: "";
	display: inline-flex;
    width: 22px;
    height: 22px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #fff;
}
.btn_qp_toggle.on::after{ transform: rotate(180deg);}

.qp_toggle_tit{ display: flex; align-items: center; gap: 1.6rem;}
.qp_toggle_tit strong{ padding-left: 2.8rem; position: relative; font-size: 1.7rem; font-weight: normal; color: #fff; line-height: 1;}
.qp_toggle_tit strong::before{ content: ""; width: 1.6rem; height: 1.9rem; background: url("../images/moapop/blit_gp_tit.png") no-repeat; display: inline-flex; position: absolute; left: 0; top: -1px;}
.qp_toggle_tit span{ color: #aabed4; font-size: 1.7rem;}

.algae_btn_down_wrap{ margin-top: 1rem;}
.algae_btn_down_wrap button{ width: 100%;}

.p_step01{ background-color: #ffff00 !important;}
.p_step02{ background-color: #ffc822 !important;}
.p_step03{ background-color: #ff821d !important;}
.p_step04{ background-color: #e10000 !important;}

.lg_tit{ font-size: 1.7rem; margin: 2rem 0 1rem 0;}
.lg_desc{ font-size: 1.5rem; color: #464c53;}

/*############################################### 보모니터링 ###############################################*/
.bo_monitoring_popup{ }

@media (max-width: 768px) {
    .bo_monitoring_popup{ min-width: 100%;}
}

.bomoni_top_selarea{

}

.bomoni_top_selarea{ display: flex; gap: 4rem;}
.bomoni_top_selarea .bom_topselbox{ position: relative; flex: 1;}
.bomoni_top_selarea .bom_topselbox:last-child::before{ content: ""; position: absolute; width: 1px; height: 100%; background-color: #506c8a; left: -2rem; top: 0;}

.bom_top_btn_wrap{ margin-top: 1.5rem;}
.bom_top_btn_wrap.river .btn_bom_chart{ flex: 0 0 calc(50% - 5px);}

.bom_top_btn_wrap{ display: flex; gap: .5rem; flex-wrap: wrap;}

.bom_top_btn_wrap.bo{ flex-wrap: wrap;}
.bom_top_btn_wrap.bo .btn_bom_chart{ flex: 0 0 calc(25% - 5px);}

.bo_topbox_tit_wrap{ display: flex; align-items: center; justify-content: space-between;}

.btn_bom_chart{ height: var(--ce-input-hegith); border-radius: var(--ce-input-radius); color: #bacbde; background: #1a508b; padding: 0 1.6rem; display: inline-flex; align-items: center; justify-content: center;}
.btn_bom_chart.on{ background-color: var(--gq-color-prim); border: 1px solid #fff; color: #fff; font-weight: 600;}
.btn_bom_chart:disabled{ color: #8a949e; background-color: #33363d; cursor: default;}

.bom_form_unit{ display: flex; gap: .5rem;}

@media (max-width: 768px) {
    .bo_topbox_tit_wrap{ flex-direction: column; align-items: flex-start;}
    .bo_top_box .gisp_tit{ margin-bottom: 1rem;}
    .bo_topbox_tit_wrap .bom_form_unit{ width: 100%;}
    .bo_topbox_tit_wrap .bom_form_unit button{ flex: 1;}
    .bomoni_top_selarea{ flex-direction: column; gap: 2rem;}
    .bom_top_btn_wrap.bo .btn_bom_chart{ flex: 0 0 calc(50% - 5px);}

    .bomoni_top_selarea .bom_topselbox:last-child::before{ display: none;}
}

.bom_middle_cont{ display: flex; justify-content: space-between; justify-content: center; gap: 4rem;}

.bom_middle_left{ width: 40.5rem;}
.bom_date_form_set{ margin-bottom: 2rem;}

.bom_middle_right{ width: 48.5rem;}

.bom_middle_right .gisp_top{ margin-bottom: 2rem;}
.bom_middle_right .gisp_top:first-child{ margin-top: 6px;}
.bom_middle_right .gisp_top:not(:first-child){ margin-top: 3rem;}

.bom_middle_right .tbl tr th{ font-weight: 600;}
.bom_middle_right .tbl tr th,
.bom_middle_right .tbl tr td { padding: 1rem;}

.btn_bomo_detail_view{ border: 1px solid var(--gq-color-prim); border-radius: var(--gq-radius); color: var(--gq-text-prim); font-size: 1.5rem; height: 2.6rem; padding: 0 1.2rem; background-color: var(--gq-btn-secd-bg); display: inline-flex; align-items: center; gap: .4rem;}
.btn_bomo_detail_view::after{ 
    content: "";
	display: inline-flex;
    width: 16px;
    height: 16px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_sch.svg");
    mask-image: url("../images/icon/ico_sch.svg");	
	background-color: var(--gq-color-prim);
}

@media (max-width: 768px) {
    .bom_middle_cont{ flex-direction: column;}
    .bom_middle_left{ width: 100%;}
    .bom_middle_right{ width: 100%;}
    .bom_middle_right .gisp_top:first-child,
    .bom_middle_right .gisp_top:not(:first-child){ margin-top: 2rem;}
    .bom_middle_right .gisp_top{ margin-bottom: 1rem;}
}

.bom_graph_box{ height: 31.5rem;}
.bom_wh_graph_box{ height: 16.6rem;}


.bomoni_river_sel{ width: 13rem;}

.bo_map_wrap{ margin-top: 1rem; position: relative; height: 64.5rem; width: 405px; border-radius: .6rem; border: 1px solid #cdd1d5; overflow: hidden; z-index: 2; transition: width .35s ease;}
.bo_map_wrap.wide{ width: 932px;}

.btn_bommap_zoom{ writing-mode: vertical-rl; width: 3.4rem; height: 11rem; background-color: var(--gq-btn-secd-bg); border: 1px solid #246beb; border-radius: .6rem 0 0 .6rem; color: var(--gq-text-prim); position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.btn_bommap_zoom::after{
    content: "";
	display: inline-flex;
    width: 20px;
    height: 20px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: var(--gq-color-prim);
    transform: rotate(-90deg);
}
.btn_bommap_zoom.on::after{
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .bo_map_wrap{ width: 100%;}
    .btn_bommap_zoom{ display: none;}
}


.moa_map_type_tab{ padding: .3rem; border-radius: 3.4rem; border: 1px solid #cdd1d5; background-color: #fff; position: absolute; top: 1rem; right: 1rem; z-index: 999;}
.moa_map_type_tab button{ color: #555; width: 6rem; height: 2.6rem; border-radius: 2.6rem; display: inline-flex; justify-content: center; align-items: center;}
.moa_map_type_tab button.on{ background-color: var(--gq-color-prim); color: #fff; font-weight: 600;}

.bo_map_top{ margin-top: 2rem;}

.bo_top_box{ border-radius: 1rem; background-color: #042c57; padding: 2rem;}
.bo_top_box .gisp_tit{ color: #fff;}


@media (max-width: 768px) {
    .bo_top_box{ padding: 1rem;}
    .bo_map_top{ flex-direction: column; align-items: flex-start; gap: 1.2rem;}
    .bo_map_top .sel_m{ width: 100%;}
    
    .bomo_data_type{ order: 2; width: 100%; flex-direction: column; align-items: flex-start; gap: .6rem;}
}

/* 보모니터링 : 지도 : 범례 */
.bo_map_legend_wrap{ width: 34.2rem; background-color: #fff; border: 1px solid #246beb; border-bottom: none; border-left: none; padding: 1rem; position: absolute; left: 0; bottom: 0; border-radius: 0 .4rem 0 0;}
.bo_map_legend_wrap .boml_tit{ display: block; padding-left: 1.2rem; margin-bottom: .6rem;}

.bo_m_p{ position: absolute; z-index: 99;}

.b_icons { display: inline-block; height: 4px; width: 15px; background: #0055d5; vertical-align: middle; margin-right: 8px;}
.z_icon { display: inline-block; height: 4px; width: 15px; background: #01b5fa; vertical-align: middle; margin-right: 8px;}

.bo_le_tbl_wrap{ border: 1px solid #cdd1d5; border-radius: var(--gq-radius);}
.bo_le_tbl{}
.bo_le_tbl th,
.bo_le_tbl td{ border-bottom: 1px solid #cdd1d5; border-right: 1px solid #cdd1d5; text-align: center; padding: .4rem 0;}
.bo_le_tbl th:last-child,
.bo_le_tbl td:last-child{ border-right: none;}

.bo_le_tbl thead th{ background-color: #eef1f6;}
.bo_le_tbl tbody th{ background-color: var(--gq-btn-secd-bg);}

.btn_bole_move{ position: absolute; width: 2rem; height: 4rem; border-radius: 0 .4rem .4rem 0; background-color: var(--gq-color-prim); right: -2rem; top: 50%; transform: translateY(-50%);}
.btn_bole_move::before{
    content: "";
	display: inline-flex;
    width: 18px;
    height: 18px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #fff;
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
}
.btn_bole_move.active{}
.btn_bole_move.active::before{ transform: translate(-50%, -50%) rotate(-90deg);}

.bm_tooltip{ min-width: 12rem; height: 6rem; border: 1px solid var(--gq-color-prim); border-radius: var(--gq-radius); padding: 3px; background-color: #fff; text-align: center; position: absolute; z-index: 102;}
.bm_tooltip p{ height: 2.2rem; line-height: 1; display: flex; align-items: center; justify-content: center;}
.bm_tooltip strong{ height: 2.9rem; color: var(--gq-text-prim); border-radius: var(--gq-radius); background-color: #ecf2fe; display: flex; justify-content: center; align-items: center;}

.bm_tooltip::before{ content: ""; width: 9px; height: 12px; background: url("../images/bomonitor/bm_tooltip_arr.png") left 0 top 0; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);}
.bm_tooltip.right::before{ left: auto; right: -9px; transform: translateY(-50%) rotate(180deg);}

@media (max-width: 768px) {
    .bo_map_legend_wrap{ border-left: 1px solid #246beb; border-radius: .4rem .4rem 0 0; width: calc(100% - 2rem); margin: 0 1rem;}
    .btn_bole_move{ right: auto; left: 50%; top: -3rem; transform: translateX(-50%) rotate(-90deg);}
}

.bm_bo_flow{ margin-top: 1rem; background-color: #fff; border: 1px solid #cdd1d5; border-radius: .6rem; overflow: hidden; display: flex;}

.bm_bo_flow li.bo{ flex: 0 0 200px;}
.bm_bo_flow li.bon{ flex: 0 0 132px;}
.bm_bo_flow li.ji{ flex: 1;}

.bm_bo_flow li{}
.bm_bo_flow li:not(:first-child){ border-left: 1px solid #cdd1d5;}

.bm_bo_tit{ height: 4.4rem; font-weight: 600; border-bottom: 1px solid #cdd1d5; background-color: #eef1f6; display: flex; justify-content: center; align-items: center;}
.bm_bo_tit .form_check input[type=checkbox] ~ label{ gap: .6rem;}

.bm_bo_cont{ height: 240px; overflow: auto;}

.bmbo_list{ }

.bmbo_list.bar{ padding: 1rem 2rem; display: flex; flex-direction: column;}
.bmbo_list.bar button{ height: 3rem; display: flex; align-items: center; justify-content: space-between;}
.bmbo_list.bar button::after{
    content: "";
	display: inline-flex;
    width: 18px;
    height: 18px;
    forced-color-adjust: none;
	-webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: contain;
    -webkit-mask-image: url("../images/icon/ico_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #7b7b7b;
    transform: rotate(-90deg);
}

.bmbo_list.bar button.on{ color: var(--gq-text-prim); font-weight: 600;}
.bmbo_list.bar button.on::after{ background-color: var(--gq-color-prim);}

.bmbo_list.box{ padding: 1rem; display: flex; flex-direction: column; gap: .5rem;}
.bmbo_list.box button{ width: 100%; height: 3rem; background-color: #f0f0f0; border-radius: var(--gq-radius); white-space: nowrap;}

.bmbo_list.box button img{ margin-right: .6rem;}

.bmbo_list.box button.on{ border: 1px solid var(--gq-color-prim); color: var(--gq-text-prim); background-color: var(--gq-btn-secd-bg);}

.bm_bo_flow .ji .bmbo_list.box{ flex-direction: row; flex-wrap: wrap;}
.bm_bo_flow .ji .bmbo_list.box button{ display: inline-block; flex: 0 0 calc(50% - .5rem);}

@media (max-width: 768px) {
    .bm_bo_cont{ height: auto;}
    .bm_bo_flow{ flex-direction: column;}
    .bm_bo_flow .ji .bmbo_list.box button{ display: inline-block; flex: 0 0 calc(50% - .5rem);}
    .bm_bo_flow li:not(:first-child){ border-left: none;}
    .bm_bo_tit { border-bottom: none; border-top: 1px solid #cdd1d5;}
    .bm_bo_flow li:nth-child(1),
    .bm_bo_flow li:nth-child(2),
    .bm_bo_flow li:nth-child(3){ flex: 1;}
}
.flex_center{ justify-content: center;}

.bomoni_btn_down_wrap{ margin: 1rem 0 3rem 0; width: 100%; display: flex; gap: 1rem;}
.bomoni_btn_down_wrap button{ flex: 1;}
@media (max-width: 768px) {
    .bomoni_btn_down_wrap{ flex-direction: column;}
    .bomoni_btn_down_wrap button{ flex: auto;}
}

.qp_pop_footer{ background-color: var(--gq-bg-secd-color); border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 1rem; margin-left: -2rem; margin-right: -2rem; padding: 2rem 4rem; display: flex; align-items: center; justify-content: space-between;}

.bopop_footer_btn_wrap{ display: inline-flex; gap: 1rem;}
.bopop_footer_btn_wrap a{ width: 14rem;}

@media (max-width: 768px) {
    .qp_pop_footer{ padding: 2rem; flex-direction: column; gap: 2rem;}
    .bopop_footer_btn_wrap{ width: 100%;}
    .bopop_footer_btn_wrap a{ width: auto; flex: 1;}
}