@charset "UTF-8";
:root{
    --shadow: 0px 0px 11px 0px rgb(66 114 161 / 10%);
    --radiusBox: 10px;
    --skew: skew(-0.03deg);

    /* @primary */
    --blue: #146EDA;
    --red: #DD3838;
    --green:#20ff76;
    --orange:#ffb120;
    --gry:#999;
    --colorPrimary: #1066B6;/* 강조폰트 */
    --bgcolor: #F8F9FA;
    --bgConts: #FFF;/* 콘텐츠 박스*/
    --bgContsSecondary: #e3f0ff;/* 콘텐츠 박스 세컨더리*/
    --primary: #1066B6;
    --primaryBg: #2369B8;/*버튼*/
    --primaryColor: #FFFFFF;
    --primaryDarkBg: #17293f;/*버튼*/
    --primaryDarkColor: #FFFFFF;
    --secondaryBg: #FFCD45;/**/
    --secondaryColor: #FFFFFF;
    --bgHighlight:#fff5c2;
    --bgHighlight:#fffac9;
    --borderColor: #B9CAE0;
    --textColor: #2D3748;
    --textColorTitle:#000;
    --unCheckBg: #C6C8C8;
    --unCheckText: #fff;
    --unCheckBorder: 1px solid var(--borderColor);
    --CheckBg: var(--primaryColor);
    --CheckText: var(--primaryColorText);
    --CheckBorder: 1px solid var(--primaryColor);
        
    /* form */
    --FormRadius: 5px;
    --FormFont: 400 16px    'Pretendard';
    --FormBorder: 1px solid #bdc5cb;
    --FormBg: #ffffff;
    --FormColor: #2E2E2E;
    --FormHeight: 30px;

    /* btn */
    --btnFont: 400 15px    'Pretendard';
    --btnRadius: 0px;
    --btnDefaultBg: #fff;/*목록 등 기본*/
    --btnDefaultColor: #415766;
    --btnDefaultBorder: 1px solid #AAAAAE;
    --btnDefaultBorder: 1px solid #6c7889;
    --btnPrimaryBg: var(--primaryBg);/*확인*/
    --btnPrimaryColor: var(--primaryColor);
    --btnPrimaryBorder: 1px solid var(--primaryBg);
    --btnSecondaryBg: #fff;/*일반버튼*/
    --btnSecondaryColor: #1D60A7;
    --btnSecondaryBorder: 1px solid #1D60A7;
    --btnDarkBg: #6b7280;/*취소*/
    --btnDarkColor: #fff;
    --btnDarkBorder: 1px solid var();
    --btnDarkBorder: 1px solid var(--btnDarkBg);/* 주소 버튼 등 폼과 같이 쓰이는 버튼*/
    --btnFunctText: #2E2E2E;
    --btnFunctBorder: 1px solid #D1D1D1;
    --btnIco: #718096;
    --btnSaveBg:#3F51B5;
    --btnSaveColor:#fff;
    --btnSaveBorder:var(--btnSaveBg);
    --btnCancelBg:#666c73;
    --btnCancelColor:#fff;
    --btnCancelBorder:#666c73;
    --btnDeleteBg:#cb1111;
    --btnDeleteColor:#fff;
    --btnDeleteBorder:var(--btnDeleteBg);
    

    /* tab */
    --tabBg: #FFF;/*기본*/
    --tabBorder: 1px solid var(--borderColor);
    --tabText: #000;
    --tabActiveBg: #EFEDEE;/*선택*/
    --tabActiveBorder: var(--tabBorder);
    --tabActiveText: var(--tabText);

    /* detail */
    --detailBoxBorder: 2px solid #ABA5A5;
    --LabelBorder: var(--FormBorder);
    --LabelBg: #F7F7F7;
    --detailBorder: var(--FormBorder);
    --detailBg: #fff;
    --boxBg: #f7f7f7;
    --boxBorder: 1px solid #bbb;
    
    /* grid */
    --fontListTbody: 400 18px/1.15 'Pretendard';
    --fontListThead: 400 16px/1 'Pretendard';
    --borderGrid: 1px solid #B4BDBD;
    --bgGrid:#fff;
    --bgListThead: #8191b3;
    --bdListThead: #dee3e1;
    --colorListThead: #ffffff;
    --bgListTbody:#fff;
    --bdListTbody: #d9dbde;
    --colorListTbody: var(--textColor);
    --bgDataThead: #e1e7ef;
    --bdDataThead: #90b3ce;
    --colorDataThead: #072237;
    --bgDataTbody:#fff;
    --bdDataTbody: #e1e1e1;
    --colorDataTbody: var(--textColor);

    /* psuedo */
    --readOnlyBg: #ECECEC;
    /*--readOnlyBg: var(--FormBg);*/
    --readOnlyBd: var(--FormBorder);
    --readOnlyColor: #949ca6;
    --requiredBg: var(--FormBg);
    --requiredBd: var(--FormBorder);
    --requiredColor: /*#1b5ad7*/ #E91E63;
    --placeholderColor:#A8AFB8;

    /* design */
    --shadow-layout:0 0 7px 0 rgba(54, 79, 110, 0.25);

    /* header */
    --heightHeader: 190px;
    --bgHeader: linear-gradient(90deg, #187255 39.69%, #2ed094 100%);
    --bgHeader: #fff;
    --widthHeaderIcon: 16px;

    /* aside */
    --widthAside-quick:44px;
    --widthAside-menu:240px;
    --widthAside-menu:280px;
    --widthAside: calc(var(--widthAside-quick) + var(--widthAside-menu));
    --bgAside:#3F5774;
    --colorDepth: #5b6665;
    --colorDepthActive: #fff;
    --bgMonDepth: transparent;
    --bgMonDepthActive: linear-gradient(90deg, #4B932F 0%, #71C750 100%);
    --fontNav: 400 16px 'Noto Sans KR';    

    /* search */
    --bgSearchItem: #EAEFF5;
    --colorSearchItem: var(--colorPrimary);
    --paddingSeachItem: 10px;

    /*tooltip*/
    --bgTooltip: #e5e054;
    --colorTooltip: #000;

    /* spacing */
    --paddingContainer: 1.5em;
    --marginContainer: 1em;
    --marginList: 10px;
    --widthMain: 1700px;

    /*기상청제공*/
    --weather-good:#2071BD;
    --weather-bad:#BE1E2D;
    --status-good: #339fe1;
    --status-bad: #BE1E2D;
    --status-green: #07ad4f;/*관심*/
    --status-green: #21b5f3;/*관심*/
    --status-yellow: #FFC62A;/*주의*/
    --status-orange: #ff9800;/*경고*/
    --status-red: #df5865;/*위험*/
    --status-red: var(--status-bad);/*위험*/
    
     /* 기상청 제공 */
    --weather-good: 32, 113, 189;     /* #2071BD */
    --weather-bad: 190, 30, 45;       /* #BE1E2D */

    /* 상태 */
    --status-good: 51, 159, 225;      /* #339FE1 */
    --status-bad: 190, 30, 45;        /* #BE1E2D */
    --status-good: 33, 182, 91;      /* #139657 */

    /* 단계별 (온도 구간) */
    --status-green: 45, 136, 205;     /* #21B5F3 (관심) */
    --status-yellow: 243, 195, 50;    /* #FFC62A (주의) */
    --status-orange: 242, 154, 26;     /* #FF9800 (경고) */
    --status-red: 223, 88, 101;       /* #DF5865 (위험) */
    --status-red: 217, 74, 87;		/* #BE1E2D */

    /* monitor */
    --heightItemMon: 95px;
    --radiusItemMon: 13px;
    --sizeItemMon: 68px;
    --sizeItemIcon: 55px;
    --colorStatu05: var(--status-bad);
    --colorStatu04: #ff9800;
    --colorStatu03: var(--status-yellow);
    --colorStatu02: #07ad4f;
    --colorStatu01: var(--status-good);
    --colorStatu00: #fff;
    --colorStatu05: var(--status-red);/*위험*/
    --colorStatu04: var(--status-orange);/*경고*/
    --colorStatu03: var(--status-yellow);/*주의*/
    --colorStatu02: var(--status-green);/*관심*/
    --colorStatu01: var(--status-good);/*쾌적*/
    --status-dry: 100, 116, 139;     /* 건조 */
    
    /* service type */
    --serviceBasic: #7787aa;
    --serviceLite: #2dbce6;
    --servicePreminum: #FF9800;
}

/* animation */
@-webkit-keyframes ani-blink{
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes ani-blink {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@-webkit-keyframes ani-chartDonut{
    from {
        background: conic-gradient(from 0deg at 50% 50%, #77E8C6 0deg, #22A2AA 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 360deg);
        opacity: 0;
    }
    to {
        opacity: 1;
        /* transform: rotate(360deg); */
    }
}
@keyframes ani-chartDonut {
    from {
        background: conic-gradient(from 0deg at 50% 50%, #77E8C6 0deg, #22A2AA 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 360deg);
        opacity: 0;
    }
    to {
        opacity: 1;
        /* transform: rotate(360deg); */
    }
}
@keyframes ani-marquee {
    from {
        /* -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0); */
        left: 0;
    }
    to {
        /* -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0); */
        left : -100%;
    }
}