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

/*******************************
 * Infomation : 국가 통합물관리정보플랫폼 : 보모니터링
 * FileName   : /com/web/css/bo_moni.css 
 * Update     : 2026.10.13.
********************************/

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

@media (min-width: 679px) and (max-width: 1600px){
  :root {
    --krds-font-size-base: 62.5%;
  }
}


: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;
    
    /* 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;
}



/* 모바일 줌 안내 */
.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 .6rem; 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 */
.tbl_wrap.wdata_tbl{}
.tbl_wrap.wdata_tbl tr th,
.tbl_wrap.wdata_tbl tr td{ padding: .5rem .4rem; font-size: 13px; line-height: 1.3;}

/* 단계별 범레 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;}

/* 보모니터링 */

/* inner div */
.bom_sub_inner{ margin: 0px auto;/* width: var(--ce-sub-cont-width); */ min-width: var(--ce-sub-cont-width); position: relative; display: flex; justify-content: space-between;}

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

@media (max-width: 1023px) {
    .bom_sub_inner{ flex-direction: column;}
}

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

.bommap_wrap{ position: relative; border-radius: 1rem; overflow: hidden; opacity: 1; height: auto; width: 690px;}

@media (max-width: 767px) {
    .bommap_wrap{ width: 100%; padding-top: 20px;}
}

.bom_map_view{
    width:100%;
    height: auto;
    overflow:hidden;
    position:relative;
    touch-action:pan-y;
}
.bommap_wrap img{
    width: 678px;
    height: 100%;
    display:block;
}

.bom_zoom_area{
    position:relative;
    width: 678px;
    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); */}
    
    .bom_map_view{
        width:100%;
        aspect-ratio: 1100 / 1200;
        overflow:hidden;
        position:relative;
        touch-action:pan-y;
        /* margin: 40px 0; /* ✅ 이게 정답 */
        /* height: calc(100vh - 16rem); 260616 */
        height: calc(100vh - 28rem);
        
        padding-top: 20px;
    }

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

.bom_point_wrap{ position: absolute; width: 100%; height: 950px; top: 0;}

.river_name{ font-family: 'Gmarket Sans'; font-weight: 500; font-size: 1.9rem; color: #1e2124; background-color: #fff; position: absolute; top: 0; height: 4.8rem; border-radius: 1.2rem; padding: 0 2rem; display: inline-flex; align-items: center; padding-top: 4px;}
.river_name.river_h{ top: 180px; left: 420px; border: 2px solid #2179ed;} /* 한강 */
.river_name.river_k{ top: 450px; left: 20px; border: 2px solid #13989b;} /* 금강 */
.river_name.river_n{ top: 420px; left: 520px; border: 2px solid #de7621;} /* 낙동강 */
.river_name.river_y{ top: 740px; left: 20px; border: 2px solid #485dd1;} /* 영산강  */

.river_name::after{
    content: "";
    width: 0;
    height: 22px;
    opacity: 0;
    margin-left: 0;

    -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_go.svg");
    mask-image: url("../images/icon/ico_go.svg");
    background-color: #fff;

    transition: all 0.2s ease;
}

.river_name:hover{ border: 2px solid #fff; color: #fff;}
.river_name:hover::after{
    width: 22px;
    opacity: 1;
    margin-left: 6px;
}

.river_name.river_h:hover{ background-color: #2179ed;}
.river_name.river_k:hover{ background-color: #13989b;}
.river_name.river_n:hover{ background-color: #de7621;}
.river_name.river_y:hover{ background-color: #485dd1;}

.bom_point_list li { position:absolute; overflow: hidden; border-radius: 26px; color:#000; display: inline-flex; align-items: center;}
.bom_point_list li a{
    padding: 0 1.8rem;
    height: 3.4rem;
    border-radius: 3.4rem;
    font-size: 1.7rem;
    border: 1px solid #1e2124;
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.bom_point_list li a::after{
    content: "";
    width: 0;
    height: 18px;
    opacity: 0;
    margin-left: 0;

    -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_go.svg");
    mask-image: url("../images/icon/ico_go.svg");
    background-color: #fff;

    transition: all 0.3s ease;
}

.bom_point_list li a:hover{
    
    border: 1px solid #fff;
    color: #fff;
    
}

.bom_point_list li a:hover::after{
    width: 18px;
    opacity: 1;
    margin-left: 6px;
}

.bom_point_list.r01 li a:hover{ background-color: #1f78ed;} /* 한강 */
.bom_point_list.r02 li a:hover{ background-color: #069b9d;} /* 금강 */
.bom_point_list.r03 li a:hover{ background-color: #e87e28;} /* 낙동강 */
.bom_point_list.r04 li a:hover{ background-color: #4d61d4;} /* 영산강 */


@media (max-width: 767px) {
    .bom_point_wrap{ }
}

.bommap_top{ margin-bottom: -9rem; background: url("../images/bomonitor/bm_tit_bg.png") no-repeat; background-position: right 0 top 0;}
.bomap_tit{ font-family: 'Gmarket Sans'; font-size: 4.2rem; line-height: 1.3;}
.bomap_tit_desc{ font-size: 1.7rem; margin-top: 1rem;}

@media (max-width: 767px) {
    .bommap_top{ margin-bottom: 0; background-size: 90px; background-position: right 0 top 1rem;}
    .bomap_tit{ font-size: 2.4rem; }
    .bomap_tit_desc{ font-size: 1.5rem;}
}

/* 보모니터링 오른쪽 컨텐츠 */
.bomoni_cont{ display: flex; flex-direction: column; gap: 2rem;}

@media (max-width: 767px) {
    .bomoni_cont{ margin-top: 3rem;}
    .bomoni_cont img{ width: 100%;}
}

/* 보 운영 현황 팝업 */
.scroll_x{ overflow-x: auto;}
.bo_oper_desc_wrap{ background-color: #ecf2fe; padding: 0 2rem; border-radius: .6rem; margin-bottom: 2rem;}
.bo_oper_desc_wrap li{ padding: 3rem 1rem; display: flex; justify-content: space-between;}
.bo_oper_desc_wrap li:not(:first-child){ border-top: 1px solid #fff;}

@media (max-width: 767px) {
    .bo_oper_desc_wrap li{ flex-direction: column;}
    .bo_oper_desc_wrap li span{ margin-top: 1rem;}
    .m_scroll_x{ overflow: auto;}
}

.bo_oper_list_tab_cont .tab-conts{ height: calc(100vh - 190px); overflow: auto;}

@media (max-width: 767px) {
    .bo_oper_list_tab_cont .tab-conts{ height: auto;}
}


.t_ing{ display: flex; gap: 1rem;}
.t_ing li{ font-weight: 600;}
.t_ing li:nth-child(1){ width: 120px;}
.t_ing li:nth-child(2){ flex: 1; display: flex; align-items: center;}
.t_ing li:nth-child(3){ width: 40px;}

.t_ing li:nth-child(2)::before{
    content: "";
    width: 100%;
    height: 2px;
    background-color: #a7bdd9;
    position: relative;
    margin-right: -15px;
}
.t_ing li:nth-child(2)::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: #a7bdd9;
    transform: rotate(-90deg);
}

@media (max-width: 767px) {
    .bomo_graph_tbl_wrap .tbl2{ width: 1000px;}
}

.bomo_oper_graph{ height: 17rem;}

.bomo_cont{}

.bo_waterlevel{ margin-top: 3rem;}

.bo_waterlevel .bowl_list{ }
.bo_waterlevel .bowl_list li{ display: flex; gap: 1rem;}
.bo_waterlevel .bowl_list li:not(:first-child){ margin-top: 1rem;}
.bo_waterlevel .bowl_list li span{ width: 11rem; height: 3rem; border-radius: 3rem; background-color: #eef2f7; display: inline-flex; justify-content: center; align-items: center;}

@media (max-width: 767px) {
    .bo_waterlevel .bowl_list li{ flex-direction: column;}
    .bo_waterlevel .bowl_list li:not(:first-child){ margin-top: 2rem;}
}

.bomoni_info_box{ border-radius: 1.5rem; background-color: #edf1f5; padding: 2rem;}

.bomoni_info_box .aib_top{ margin-bottom: 1.5rem;}
.bomoni_info_box .aib_top .aib_tit{ flex-shrink: 0; height: 4.5rem; padding: 0 .6rem; font-family: 'Gmarket Sans'; font-size: 1.9rem; display: flex; align-items: center; gap: 1.2rem;}
.bomoni_info_box .aib_top .aib_tit::before{ content: ""; width: 3.3rem; height: 3.3rem; border-radius: 100%; background-position: center; background-repeat: no-repeat; display: inline-flex; justify-content: center; align-items: center;}

.bomoni_info_box .aib_top .aib_tit.tit01::before{ background-image: url("../images/bomonitor/aib_tit01.png"); background-color: #063a74;}
.bomoni_info_box .aib_top .aib_tit.tit02::before{ background-image: url("../images/bomonitor/aib_tit02.png"); background-color: #fff;}
.bomoni_info_box .aib_top .aib_tit.tit03::before{ background-image: url("../images/bomonitor/aib_tit03.png"); background-color: #063a74;}

.bomoni_info_box .aib_top .aib_tit.line{ position: relative;}
.bomoni_info_box .aib_top .aib_tit.line::after{ content: ""; background-color: #063a74; height: 1px; width: 80%; position: absolute; top: 20px; right: 0;}
.bomoni_info_box .aib_top .aib_tit.line span{ background-color: #edf1f5; padding-right: 1.6rem; z-index: 2;}

.bomoni_info_box .aib_top .aib_tit.bar{ background-color: #063a74; border-radius: 4.5rem; color: #fff;}

.bomoni_info_box .aib_cont{}
.bomoni_info_box .aib_cont.img img{ border-radius: var(--mma-radius-md);}

.aib_core_list{ padding: 0 7rem; display: flex; justify-content: space-between;}
.aib_core_list li{ display: flex; align-items: center; gap: 1.6rem;}
.aib_core_list li span{ width: 7rem; height: 7rem; border-radius: 100%; background-color: #fff; background-position: center; background-repeat: no-repeat; display: inline-flex;}
.aib_core_list li p{ text-align: center; font-size: 1.5rem; line-height: 1.2;}

.aib_core_list li:nth-child(1) span{ background-image: url("../images/bomonitor/bom_icon01.png");}
.aib_core_list li:nth-child(2) span{ background-image: url("../images/bomonitor/bom_icon02.png");}
.aib_core_list li:nth-child(1) span{ background-image: url("../images/bomonitor/bom_icon03.png");}
.aib_core_list li:nth-child(2) span{ background-image: url("../images/bomonitor/bom_icon04.png");}

@media screen and (max-width: 767px) {
    .aib_core_list{ display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;}
}

.aib_link{}
.aib_link li{}
.aib_link li:not(:first-child){ margin-top: 1rem;}
.aib_link li a{ padding: 0 3rem; height: 9rem; background-color: #fff; border-radius: var(--mma-radius-md); display: flex; align-items: center; justify-content: space-between;}
.aib_link li a .text_wrap{ padding-left: 6.5rem; background-position: left 0 center; background-repeat: no-repeat;}
.aib_link li a .text_wrap strong{ font-size: 1.7rem;}
.aib_link li a .text_wrap p{ font-size: 1.5rem; margin-top: .4rem;}
.aib_link li a .icon_move{ flex-shrink: 0; width: 4rem; height: 4rem; border-radius: 100%; background-color: #eef1f6; display: inline-flex; justify-content: center; align-items: center;}
.aib_link li a .icon_move.go::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_angle.svg");
    mask-image: url("../images/icon/ico_angle.svg");	
	background-color: #000;
    transform: rotate(-90deg);
}

@media screen and (max-width: 767px) {
    .aib_link li a{ padding: 0 1.6rem;}
    .aib_link li a .text_wrap{ background-size: 14%; padding-left: 5rem;}
}

.aib_link.bomo li:nth-child(1) a .text_wrap{  background-image: url("../images/bomonitor/bomo_link_icon01.png");}
.aib_link.bomo li:nth-child(2) a .text_wrap{  background-image: url("../images/bomonitor/bomo_link_icon02.png");}

.aib_link li a .icon_move.new::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_go.svg");
    mask-image: url("../images/icon/ico_go.svg");	
	background-color: #000;    
}