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

/*******************************
 * Infomation : 국가 통합물관리정보플랫폼 : 녹조(조류) 지도
 * FileName   : algae.css 
 * Update     : 2026.04.15.
********************************/

html, body { /* touch-action: pan-x pan-y; */}

:root {
	--alg-line-color: #b1b8be;
	--ce-sub-cont-width: 1200px;
	
	/* Primary color */
    --ce-prim-color-5:  #eff5ef;
    --ce-prim-color-10: #d3e1fb;
    --ce-prim-color-20: #a7c4f7;
    --ce-prim-color-30: #7ca6f3;
    --ce-prim-color-40: #5089ef;
    --ce-prim-color-50: #246beb;
    --ce-prim-color-60: #1d56bc;
    --ce-prim-color-70: #16408d;
    --ce-prim-color-80: #0e2b5e;
    --ce-prim-color-90: #07152f;
    --ce-prim-color-100: #000000;
    
    /* Secondary color */

    /* Gray Color */
    --ce-gray-5:  #F8F8F8;
	--ce-gray-10: #F0F0F0;
	--ce-gray-20: #E4E4E4;
	--ce-gray-30: #D8D8D8;
	--ce-gray-40: #C6C6C6;
	--ce-gray-50: #8E8E8E;
	--ce-gray-60: #717171;
	--ce-gray-70: #555555;
    --ce-gray-75: #363636;
	--ce-gray-80: #2D2D2D;
	--ce-gray-90: #242424;

    /* Red Color */
    --ce-red-5:  #fef1f1;
    --ce-red-10: #fccccc;
    --ce-red-20: #f89999;
    --ce-red-30: #f56666;
    --ce-red-40: #f23b3b;
    --ce-red-50: #ee0000;
    --ce-red-60: #cd0404;
    --ce-red-70: #8f0000;
    --ce-red-80: #5f0000;
    --ce-red-90: #300000;

    /* Popup Font */
    --gq-color-prim: #246beb;
    --gq-color-secd: #d3e1fb;

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

body {
    font-size: 15px;
}

/* inner div */
.sub_inner{ margin: 0px auto; width: var(--ce-sub-cont-width); min-width: var(--ce-sub-cont-width); position: relative;}

@media (max-width: 1316px) {	
	.sub_inner{ padding: 2rem; width: 100%; min-width: 100%;}	
}

.page_tit_wrap{ display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2rem; border-bottom: 1px solid #d8d8d8; margin-bottom: 8rem;}
.page_tit_wrap h3{ font-size: 4rem; line-height: 1.2;}
.page_tit_wrap .page_util{ display: flex; gap: 3.8rem;}

@media (max-width: 1315px) {
	.sub_cont_body{ min-height: auto;}
}

@media (max-width: 767px) {
	.page_tit_wrap{ margin-bottom: 2rem;}
}

.algae_wrap{ padding-top: 3rem; padding-bottom: 6rem;}

.algae_map_cont{ position: relative; width: 1200px; margin: 0 auto;}

.tab_page_wrap{ position: relative;}

.tab_page{ margin-bottom: 2rem; display: flex;}
.tab_page li{ position: relative; flex: 1;}
.tab_page li button{ width: 100%; height: 5.6rem; background-color: #fff; color: #555; font-size: 2.1rem; font-weight: 700;
	border-top: 1px solid var(--alg-line-color);
	border-bottom: 1px solid var(--alg-line-color);
	border-left: 1px solid var(--alg-line-color);
}
.tab_page li.on button{ background-color: #063a74; border: none; color: #fff;}
.tab_page li:first-child button{ border-radius: 1rem 0 0 1rem;}
.tab_page li:last-child button{ border-radius: 0 1rem 1rem 0; border-right: 1px solid var(--alg-line-color);}

.tab_page li > a{ position: absolute; color: #fff; width: 2rem; height: 2rem; border-radius: 100%;  background-color: #939393; display: inline-flex; justify-content: center; align-items: center; margin-left: 1rem; top: 1.2rem; right: 2rem; z-index: 4; display: none;}

@media (max-width: 767px) {
    .tab_page li button{ height: 5rem; font-size: 1.7rem; height: 4.4rem; display: flex; align-items: center; justify-content: flex-start; padding-left: 3rem;}
    .tab_page li > a{ display: inline-flex;}
}

.tp_tooltip{ position: absolute; border: 1px solid #b1b8be; background-color: #fff; border-radius: 15px; padding: 1rem; z-index: 99; top: 6rem; box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.2)  ; }
.tp_tooltip::before{ content: ""; width: 1.8rem; height: 1.4rem; background: url("../images/algae/tooltip_arr_up.png") no-repeat top 0 center; display: inline-flex; position: absolute; top: -14px; left: 25%;}

.tp_tooltip{ display: none;}

.tp_desc{ position: relative; padding-left: 1.6rem;}
.tp_desc::before{ content: "※"; position: absolute; left: 0; top: 0; font-size: 1.4rem;}

.algae_map_wrap{ position: relative; border: 1px solid var(--alg-line-color); border-radius: 1rem;}
.algae_map{ position: relative; border-radius: 1rem; overflow: hidden; background-color: #d6f7ff; opacity: 0; height: 0;}

@media (max-width: 767px) {
    .algae_map_wrap{ height: 100%;}
}

.algae_map.show{ opacity: 1 !important; z-index: 9; height: auto;}
.page_tab_cont{ }
.page_tab_cont.pagetab_02{ display: none;}
.tp_tooltip.tp_t_02::before{ left: 75%;}

.algae_desc_wrap{ margin-top: 2rem;}
.algae_desc_wrap p{ font-size: 1.5rem;}

@media (max-width: 767px) {
    .algae_desc_wrap{ display: none;}
}

.algae_map_view{
    width:100%;
    height: auto;
    overflow:hidden;
    position:relative;
    touch-action:none;
}
.algae_map img{
    width: 1100px;
    height: 100%;
    display:block;
}
.zoom_area{
    position:relative;
    width:1100px;
    height: auto;
    transform-origin: 0 0;
    will-change: transform;
}

@media (max-width: 767px) {
    .algae_wrap{ padding-top: 0;}
	.algae_map_cont{ width: 100%; /* height: calc(100vh - 12rem); */}
    
    .algae_map_view{
        width:100%;
        aspect-ratio: 1100 / 1400;
        overflow:hidden;
        position:relative;
        touch-action:none;
        /* margin: 40px 0; /* ✅ 이게 정답 */
        height: calc(100vh - 16rem);
    }

	.algae_map img{
        width:100%;
        display:block;
    }
}

.algae_point_list li { position:absolute; overflow: hidden; border-radius: 26px; font-size:13px; color:#000; display: inline-flex; align-items: center;}
.algae_point_list li a{ display: block; padding: 0 10px; height: 23px; display: inline-flex; align-items: center; justify-content: center;}

/* 조류 경보지점 */
.algae_point_list li.ho{ background: url("../images/algae/st1.gif") repeat;}
.algae_point_list li.ho img{ margin-left:5px;}

.algae_point_list li.ho:hover{ background:#004476 !important; color:#fff;}
.algae_point_list li.h_green{ background:#02a653;}
.algae_point_list li.h_green:hover{background:#028444}

/* 조류 관찰지점 */
.algae_point_list li.bo a { background:#fff;}
.algae_point_list li.bo:hover a{ background:#004476; color:#fff;}

.algae_point_list li{ border: 2px solid #0000ff;} /* 경보 */
.algae_point_list li.csoo{ border-color: #f59721;} /* 경보 : 친수 */
.algae_point_list li.bo{ border-color: #01a651;} /*관찰 */

/* 조류정보장 : 발생현황지도 : NEW 범례 */
.newLegend{ position:absolute; width: 400px; top: 1146px; left: 732px; border-top: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; border-left: 1px solid #cdcdcd; font-size: 12px; z-index: 2; border-radius: 5px; overflow: hidden;}
.n_legend{ background:#fff; width:100%;}
.n_legend th,
.n_legend td{ text-align:center; line-height: 1.4;}
.n_legend thead th{ background-color:#063a74; color: #fff; border-bottom: 1px solid #548bc8; border-right: 1px solid #51759e; padding: 5px 0;}
.n_legend thead th.th2{ background-color: #0a59b0; color: #fff; border-right: 1px solid #548bc8;}
.n_legend thead th.th2:first-child{ border-left: 1px solid #51759e;}
.n_legend thead td{ border-bottom: 1px solid #cbcbcb; padding: 4px 0;}
.n_legend thead td:not(:last-child){ border-right: 1px solid #cdcdcd;}

.n_legend tbody th{ background-color:#eff7ff; border-bottom: 1px solid #cbcbcb; border-right: 1px solid #cbcbcb; padding: 6px 0 1px 0; line-height: 1;}
.n_legend tbody th em{ font-size: 11px; display: block;}
.n_legend tbody th .desc{ color: #747474;}
.n_legend tbody td{ border-bottom: 1px solid #cbcbcb; border-right: 1px solid #cbcbcb; letter-spacing: -1px;}


.n_legend tbody td:last-child{ border-right: none;}

.n_legend .ho{ border:1px solid #666; width: 35px; height: 35px; border-radius: 35px; display: inline-flex;}
.st1{ background:url("../images/algae/st1.gif") repeat !important;}
.st2{ background:url("../images/algae/st2.gif") repeat !important;}
.st3{ background:url("../images/algae/st3.gif") repeat !important;}
.st4{ background:url("../images/algae/st4.gif") repeat !important;}
.stbg{ font-size:0;}

.newLegend.mobile{ width: 160px; border-left: navajowhite; top: 1130px; display: none;}
.n_cycle{ display: inline-flex; width: 30px; height: 30px; border-radius: 30px;}

/* 모바일 창닫기 */
@media (max-width: 767px) {
    .newLegend{ display: none;}
    .newLegend.mobile{ display: block;}
    .btn_alage_pop_close{ width: 3.4rem; height: 3.4rem; background: url("../images/algae/icon_close.svg") no-repeat center; background-size: cover; display: inline-flex;}
}

/* 모바일 줌 안내 */
.alage_m_view{ display: none;}

@media screen and (max-width: 767px) {
    .alage_m_view{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color:rgba(0, 0, 0, 0.6);
        z-index: 99;

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap: 8rem;
        
        animation: fadeOutGuide 3s forwards;
        display: flex !important;
    }

    .alage_m_view .zoom_img{
        position: relative;
        margin-top: 20vh;
        width: 30%;
    }
    .alage_m_view .zoom_img .zoom_img_01,
    .alage_m_view .zoom_img .zoom_img_02{ position: absolute; left: 0; top: 0;}

    .alage_m_view .zoom_img .zoom_img_01{ animation: guideImgEvent 1s infinite;}
    .alage_m_view .zoom_img .zoom_img_02{ animation: guideImgEvent 1.5s infinite;}

    .alage_m_view .desc{
        font-size:1.8rem;
        color:#fff;
        text-align:center;
    }

    /* 애니메이션 */
    @keyframes guideImgEvent{
        0%{
            opacity:0;
            transform: scale(0.8);
        }
        40%{
            opacity:1;
            transform: scale(1);
        }
        100%{
            opacity:0;
            transform: scale(1.2);
        }
    }
    @keyframes fadeOutGuide{
        0%{
            opacity:1;
        }
        70%{
            opacity:1; /* 3.5초까지 유지 */
        }
        100%{
            opacity:0;
            visibility:hidden;
        }
    }
}

/******************************* 조류정보방 > 조사지침 팝업 *******************************/
.gis_popup_wrap{ position: relative; padding-top: 5rem;}
.algae_pop_map img{ width: 100%; height: auto;}

@media screen and (max-width: 540px) {
	.gis_popup_wrap{ width: 100% !important;}
}

.m_close_top{ background: #16408D; height: 5rem; width: 100%; padding: 0 2rem; position: fixed; top: 0; display: flex; justify-content: space-between; align-items: center; z-index: 3;}
.m_close_top .tit{ font-size: 1.7rem; color: #fff; font-weight: 500;}
.btn_win_close{ display: inline-block; width: 1.8rem; height: 1.8rem; background: url("../images/algae/btn_close_wh.svg") no-repeat center; background-size: cover;}

@media screen and (max-width: 540px) {}

.gis_pop_stay_info{ background: var(--ce-prim-color-80); padding: 0 2rem; margin-bottom: 1px; margin-top: 2px;}


.gis_pop_top{ position: relative; height: 5.6rem; width: calc(100% + 4rem); margin-left: -2rem; padding: 0 2rem; background-color: #15459a; display: flex; align-items: center; justify-content: space-between;}
.gis_pop_top .btn_win_close{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.gis_pop_top.on{ background-color: #0e2b5e;}
.gis_pop_top::after{
    content: ""; width: 2.4rem; height: 2.4rem; transform: rotate(180deg);
    -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/common/arr_common_up_wh.svg");
    mask-image: url("../../images/common/arr_common_up_wh.svg");
    background-color: #bde1ff;
}

.gis_pop_top.on::after{
    background-color: #fff; transform: rotate(0deg);
}

.gp_tit{ color: #fff; font-size: 1.9rem; font-weight: 500; background-image: url("../images/algae/blit_gp_tit.png"); background-repeat: no-repeat; background-position: left center; padding-left: 2.4rem; display: flex; align-items: center; gap: 1rem;}
.gp_tit em{ color: var(--gq-color-secd); margin-left: .5rem;}
.gp_tit.tit_none{ background: none; padding-left: 0;}
.gp_tit.video{ background: url("../images/blit_gp_tit_video.png") no-repeat left center; padding-left: 3rem;}

.gp_info_list{ border-top: 1px solid #1d56bc; padding: 2rem 0; display: none;}
.gp_info_list.show{ display: block;}
.gp_info_list ul{ display: flex; flex-wrap: wrap; gap: .8rem;}
.gp_info_list ul li{ width: calc(50% - .8rem); padding-left: .3rem;}
.gp_info_list ul li.long{ width: 100%;}
.gp_info_list ul li span{ color: #d3e1fb; background: url("../images/algae/blit_gp_info.png") no-repeat left center; padding-left: 1.5rem; margin-right: .5rem;}
.gp_info_list ul li em{ color: #fff;}


.gp_info_desc{ color: var(--gq-color-secd); font-size: 1.3rem; text-align: right;}

.btn_gp_dataView{ position: relative; color: var(--ce-prim-color-20); font-size: 1.5rem; font-weight: 500; border: 1px solid var(--ce-prim-color-20); height: 3rem; border-radius: .5rem; background: url("../images/algae/icon_new_win.png") no-repeat right 1.5rem center; padding: 0 3.6rem 0 1.6rem; display: inline-flex; align-items: center;}
.btn_gp_dataView:hover,
.btn_gp_dataView:active{ border: 1px solid var(--gq-color-prim); color: #fff; background: url("../images/algae/icon_new_win_wh.png") no-repeat right 1.5rem center var(--gq-color-prim);}

@media screen and (max-width: 540px) {
    .gis_pop_top_wrap{ padding: 1.6rem 1rem;}
    .gp_tit{ font-size: 1.8rem; line-height: 1.2; padding-left: 2.2rem; background-position: left 0 top .2rem; background-size: 1.6rem auto;}
    .gp_tit em{ font-size: 1.5rem;}
	.gp_info_list ul li{ width: 100%;}

    .btn_gp_dataView{ height: 3rem; width: auto; font-size: 1.5rem; padding: 0 2.6rem 0 1rem; background: url("../images/algae/icon_new_win.png") no-repeat right .8rem center; width: 14rem; margin-top: 1rem;}

    .gp_sch_period + .btn_gp_dataView{ margin-left: auto;}
    
    .gp_info_desc{ text-align: left; margin-top: .6rem; padding-left: 1rem; font-size: 1.3rem;}
}

.gis_pop_data_wrap{ padding: 2rem;}

.gp_h4{ position: relative; font-size: 1.7rem; font-weight: 500; margin-bottom: 1.5rem; display: flex; align-items: center; gap: .8rem;}
.gp_h4::before{ content: ""; background: #246beb; width: 2.6rem; height: 2.6rem; background: url("../images/algae/ag_tit.png") no-repeat center; display: inline-flex;}
.gp_h4:not(:first-child){ margin-top: 2.5rem;}

/* 기본 테이블 */
.tbl_wrap{}
.tbl_wrap.word_bk th,
.tbl_wrap.word_bk td{ word-break: break-all;}

.tbl { width: 100%; border-collapse: separate; border-top: 2px solid var(--ce-table-top-line);}
.tbl tr th,
.tbl tr td{ border-bottom: 1px solid var(--ce-table-line); line-height: 2.2rem; padding: .7rem 1rem; font-size: 1.4rem;}
.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: #edf1f5; font-weight: 500;}
.tbl tr td{ text-align: left; color: var(--txt-sub-color); text-align: center;}
.tbl tbody tr th{ background-color: #fff;}
.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;}

/* 단계별 범레 table */
.lg_tbl tbody tr th{ background-color: #fff;}
.lg_tbl tbody tr td{ font-size: 1.3rem; padding: .7rem;}

.btn_algae_deail{ height: 4.4rem; color: #fff; border-radius: .5rem; background-color: #246beb; display: flex; align-items: center; justify-content: center;}
.btn_algae_deail span{ display: inline-flex; align-items: center; gap: 1rem;}
.btn_algae_deail span::after{ content: ""; width: 1.4rem; height: 1.4rem; background: url("../images/algae/icon_new_win_wh.png") no-repeat; display: inline-flex;}

.tbody_th .tbl th{ background: #edf1f5;}

.algae_btn_wrap{ padding: 2rem;}

.alg_tab_wrap{ margin-top: 2rem;}

.alg_tab{ margin-bottom: 2rem; display: flex;}

.alg_tab li{ flex: 1;}
.alg_tab li button{ border: 1px solid #0e2b5e; width: 100%; height: 4rem; display: flex; align-items: center; justify-content: center;}
.alg_tab li:first-child button{ border-radius: 5px 0 0 5px;}
.alg_tab li:last-child button{ border-radius: 0 5px 5px 0;}

.alg_tab li.on button{ background-color: #0e2b5e; color: #fff; font-weight: 600; border: none;}

.alg_tab_cont{}
.alg_tab_cont.algt02{ display: none;}

.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{ margin: 2rem 0 1rem 0; font-size: 1.7rem; display: flex; align-items: center; gap: .8rem;}
.lg_tit::before{ content: ""; width: 1.4rem; height: 1.2rem; background: url("../images/algae/lg_tit.png") no-repeat; background-size: cover; display: inline-flex;}

.desc{ position: relative; color: #555; font-size: 1.3rem;}
.desc.billd{ padding-left: 14px;}
.desc.billd::before{ content: "※"; position: absolute; left: 0; top: 0;}