@charset "UTF-8";

/* reset */
*, :after, :before {box-sizing:border-box;}
* {margin:0; padding:0; font:inherit; color:inherit}
:root {
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    text-size-adjust:100%;
    cursor:default;
    line-height:1.5;
    overflow-wrap:break-word;
    -moz-tab-size:4;
    tab-size:4;
        
    /*ios대응*/
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjuns:none;
}


/* :root ::-webkit-scrollbar{width:18px; height:18px;}
:root ::-webkit-scrollbar-thumb{background:var(--scrollbar); border-radius:10px; background-clip:padding-box; border:6px solid transparent;}
:root ::-webkit-scrollbar-track{position:absolute; top:0; right:0; background:transparent}
:root ::-webkit-scrollbar-corner{background:transparent}
:root ::-webkit-input-placeholder{color:var(--placeh-bg); font-size:12px}
:root :-ms-input-placeholder{color:var(--placeh-bg); font-size:12px} */
/* @media (min-width:481px){
	:root ::-webkit-scrollbar{width:18px; height:18px;}
	:root ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.3); border-radius:10px; background-clip:padding-box; border:6px solid transparent;}
	:root ::-webkit-scrollbar-track{position:absolute; top:0; right:0; background:transparent}
	:root ::-webkit-scrollbar-corner{background:transparent}
} */

button, input, select, textarea {font:inherit}
/* button {background:none; border:0; cursor:pointer} */
a {text-decoration:none}
table {border-collapse:collapse; border-spacing:0}
/* h1, h2, h3, h4, h5, h6, p {overflow-wrap:break-word} */
#__next, #root {isolation:isolate}

svg.icon{display:block; width:18px; height:18px; fill:var(--menu-icon); transition:all 0.3s ease;}
svg.icon.size-ss{width:10px; height:10px}
svg.icon.size-s{width:14px; height:14px}
svg.icon.size-l{width:24px; height:24px}
svg.icon.size-xl{width:30px; height:30px}


/* 
    Default Color Set 
*/
.bg-gray1 {background: var(--color-bg-gray1);}
.bg-gray2 {background: var(--color-bg-gray2);}
.bg-gray3 {background: var(--color-bg-gray3);}
.bg-gray4 {background: var(--color-bg-gray4);}
.bg-olive1 {background: var(--color-bg-olive1);}
.bg-olive2 {background: var(--color-bg-olive2);}
.bg-olive3 {background: var(--color-bg-olive3);}
.bg-olive4 {background: var(--color-bg-olive4);}
.bg-green1 {background: var(--color-bg-green1);}
.bg-green2 {background: var(--color-bg-green2);}
.bg-green3 {background: var(--color-bg-green3);}
.bg-green4 {background: var(--color-bg-green4);}
.bg-blue1 {background: var(--color-bg-blue1);}
.bg-blue2 {background: var(--color-bg-blue2);}
.bg-blue3 {background: var(--color-bg-blue3);}
.bg-blue4 {background: var(--color-bg-blue4);}
.bg-salmon1 {background: var(--color-bg-salmon1);}
.bg-salmon2 {background: var(--color-bg-salmon2);}
.bg-salmon3 {background: var(--color-bg-salmon3);}
.bg-salmon4 {background: var(--color-bg-salmon4);}
.bg-red1 {background: var(--color-bg-red1);}
.bg-red2 {background: var(--color-bg-red2);}
.bg-red3 {background: var(--color-bg-red3);}
.bg-red4 {background: var(--color-bg-red4);}
.bg-indigo1 {background: var(--color-bg-indigo1);}
.bg-indigo2 {background: var(--color-bg-indigo2);}
.bg-indigo3 {background: var(--color-bg-indigo3);}
.bg-indigo4 {background: var(--color-bg-indigo4);}
.bg-purple1 {background: var(--color-bg-purple1);}
.bg-purple2 {background: var(--color-bg-purple2);}
.bg-purple3 {background: var(--color-bg-purple3);}
.bg-purple4 {background: var(--color-bg-purple4);}
.bg-magenta1 {background: var(--color-bg-magenta1);}
.bg-magenta2 {background: var(--color-bg-magenta2);}
.bg-magenta3 {background: var(--color-bg-magenta3);}
.bg-magenta4 {background: var(--color-bg-magenta4);}
.bg-mint1 {background: var(--color-bg-mint1);}
.bg-mint2 {background: var(--color-bg-mint2);}
.bg-mint3 {background: var(--color-bg-mint3);}
.bg-mint4 {background: var(--color-bg-mint4);}

.butn.bg-gray1 {background: var(--color-bg-gray1); border-color:var(--color-bg-gray1); color:var(--button-txt)}
.butn.bg-gray2 {background: var(--color-bg-gray2); border-color:var(--color-bg-gray2); color:var(--button-txt)}
.butn.bg-gray3 {background: var(--color-bg-gray3); border-color:var(--color-bg-gray3); color:var(--button-txt)}
.butn.bg-gray4 {background: var(--color-bg-gray4); border-color:var(--color-bg-gray4); color:var(--button-txt)}
.butn.bg-olive1 {background: var(--color-bg-olive1); border-color:var(--color-bg-olive1); color:var(--button-txt)}
.butn.bg-olive2 {background: var(--color-bg-olive2); border-color:var(--color-bg-olive2); color:var(--button-txt)}
.butn.bg-olive3 {background: var(--color-bg-olive3); border-color:var(--color-bg-olive3); color:var(--button-txt)}
.butn.bg-olive4 {background: var(--color-bg-olive4); border-color:var(--color-bg-olive4); color:var(--button-txt)}
.butn.bg-green1 {background: var(--color-bg-green1); border-color:var(--color-bg-green1); color:var(--button-txt)}
.butn.bg-green2 {background: var(--color-bg-green2); border-color:var(--color-bg-green2); color:var(--button-txt)}
.butn.bg-green3 {background: var(--color-bg-green3); border-color:var(--color-bg-green3); color:var(--button-txt)}
.butn.bg-green4 {background: var(--color-bg-green4); border-color:var(--color-bg-green4); color:var(--button-txt)}
.butn.bg-blue1 {background: var(--color-bg-blue1); border-color:var(--color-bg-blue1); color:var(--button-txt)}
.butn.bg-blue2 {background: var(--color-bg-blue2); border-color:var(--color-bg-blue2); color:var(--button-txt)}
.butn.bg-blue3 {background: var(--color-bg-blue3); border-color:var(--color-bg-blue3); color:var(--button-txt)}
.butn.bg-blue4 {background: var(--color-bg-blue4); border-color:var(--color-bg-blue4); color:var(--button-txt)}
.butn.bg-salmon1 {background: var(--color-bg-salmon1); border-color:var(--color-bg-salmon1); color:var(--button-txt)}
.butn.bg-salmon2 {background: var(--color-bg-salmon2); border-color:var(--color-bg-salmon2); color:var(--button-txt)}
.butn.bg-salmon3 {background: var(--color-bg-salmon3); border-color:var(--color-bg-salmon3); color:var(--button-txt)}
.butn.bg-salmon4 {background: var(--color-bg-salmon4); border-color:var(--color-bg-salmon4); color:var(--button-txt)}
.butn.bg-red1 {background: var(--color-bg-red1); border-color:var(--color-bg-red1); color:var(--button-txt)}
.butn.bg-red2 {background: var(--color-bg-red2); border-color:var(--color-bg-red2); color:var(--button-txt)}
.butn.bg-red3 {background: var(--color-bg-red3); border-color:var(--color-bg-red3); color:var(--button-txt)}
.butn.bg-red4 {background: var(--color-bg-red4); border-color:var(--color-bg-red4); color:var(--button-txt)}
.butn.bg-indigo1 {background: var(--color-bg-indigo1); border-color:var(--color-bg-indigo1); color:var(--button-txt)}
.butn.bg-indigo2 {background: var(--color-bg-indigo2); border-color:var(--color-bg-indigo2); color:var(--button-txt)}
.butn.bg-indigo3 {background: var(--color-bg-indigo3); border-color:var(--color-bg-indigo3); color:var(--button-txt)}
.butn.bg-indigo4 {background: var(--color-bg-indigo4); border-color:var(--color-bg-indigo4); color:var(--button-txt)}
.butn.bg-purple1 {background: var(--color-bg-purple1); border-color:var(--color-bg-purple1); color:var(--button-txt)}
.butn.bg-purple2 {background: var(--color-bg-purple2); border-color:var(--color-bg-purple2); color:var(--button-txt)}
.butn.bg-purple3 {background: var(--color-bg-purple3); border-color:var(--color-bg-purple3); color:var(--button-txt)}
.butn.bg-purple4 {background: var(--color-bg-purple4); border-color:var(--color-bg-purple4); color:var(--button-txt)}
.butn.bg-magenta1 {background: var(--color-bg-magenta1); border-color:var(--color-bg-magenta1); color:var(--button-txt)}
.butn.bg-magenta2 {background: var(--color-bg-magenta2); border-color:var(--color-bg-magenta2); color:var(--button-txt)}
.butn.bg-magenta3 {background: var(--color-bg-magenta3); border-color:var(--color-bg-magenta3); color:var(--button-txt)}
.butn.bg-magenta4 {background: var(--color-bg-magenta4); border-color:var(--color-bg-magenta4); color:var(--button-txt)}
.butn.bg-mint1 {background: var(--color-bg-mint1); border-color:var(--color-bg-mint1); color:var(--button-txt)}
.butn.bg-mint2 {background: var(--color-bg-mint2); border-color:var(--color-bg-mint2); color:var(--button-txt)}
.butn.bg-mint3 {background: var(--color-bg-mint3); border-color:var(--color-bg-mint3); color:var(--button-txt)}
.butn.bg-mint4 {background: var(--color-bg-mint4); border-color:var(--color-bg-mint4); color:var(--button-txt)}


.text-gray1 {color: var(--color-bg-gray1);}
.text-gray2 {color: var(--color-bg-gray2);}
.text-gray3 {color: var(--color-bg-gray3);}
.text-gray4 {color: var(--color-bg-gray4);}
.text-olive1 {color: var(--color-bg-olive1);}
.text-olive2 {color: var(--color-bg-olive2);}
.text-olive3 {color: var(--color-bg-olive3);}
.text-olive4 {color: var(--color-bg-olive4);}
.text-green1 {color: var(--color-bg-green1);}
.text-green2 {color: var(--color-bg-green2);}
.text-green3 {color: var(--color-bg-green3);}
.text-green4 {color: var(--color-bg-green4);}
.text-blue1 {color: var(--color-bg-blue1);}
.text-blue2 {color: var(--color-bg-blue2);}
.text-blue3 {color: var(--color-bg-blue3);}
.text-blue4 {color: var(--color-bg-blue4);}
.text-salmon1 {color: var(--color-bg-salmon1);}
.text-salmon2 {color: var(--color-bg-salmon2);}
.text-salmon3 {color: var(--color-bg-salmon3);}
.text-salmon4 {color: var(--color-bg-salmon4);}
.text-red1 {color: var(--color-bg-red1);}
.text-red2 {color: var(--color-bg-red2);}
.text-red3 {color: var(--color-bg-red3);}
.text-red4 {color: var(--color-bg-red4);}
.text-indigo1 {color: var(--color-bg-indigo1);}
.text-indigo2 {color: var(--color-bg-indigo2);}
.text-indigo3 {color: var(--color-bg-indigo3);}
.text-indigo4 {color: var(--color-bg-indigo4);}
.text-purple1 {color: var(--color-bg-purple1);}
.text-purple2 {color: var(--color-bg-purple2);}
.text-purple3 {color: var(--color-bg-purple3);}
.text-purple4 {color: var(--color-bg-purple4);}
.text-magenta1 {color: var(--color-bg-magenta1);}
.text-magenta2 {color: var(--color-bg-magenta2);}
.text-magenta3 {color: var(--color-bg-magenta3);}
.text-magenta4 {color: var(--color-bg-magenta4);}
.text-mint1 {color: var(--color-bg-mint1);}
.text-mint2 {color: var(--color-bg-mint2);}
.text-mint3 {color: var(--color-bg-mint3);}
.text-mint4 {color: var(--color-bg-mint4);}

svg.icon.icon-gray1 {fill: var(--color-bg-gray1);}
svg.icon.icon-gray2 {fill: var(--color-bg-gray2);}
svg.icon.icon-gray3 {fill: var(--color-bg-gray3);}
svg.icon.icon-gray4 {fill: var(--color-bg-gray4);}
svg.icon.icon-olive1 {fill: var(--color-bg-olive1);}
svg.icon.icon-olive2 {fill: var(--color-bg-olive2);}
svg.icon.icon-olive3 {fill: var(--color-bg-olive3);}
svg.icon.icon-olive4 {fill: var(--color-bg-olive4);}
svg.icon.icon-green1 {fill: var(--color-bg-green1);}
svg.icon.icon-green2 {fill: var(--color-bg-green2);}
svg.icon.icon-green3 {fill: var(--color-bg-green3);}
svg.icon.icon-green4 {fill: var(--color-bg-green4);}
svg.icon.icon-blue1 {fill: var(--color-bg-blue1);}
svg.icon.icon-blue2 {fill: var(--color-bg-blue2);}
svg.icon.icon-blue3 {fill: var(--color-bg-blue3);}
svg.icon.icon-blue4 {fill: var(--color-bg-blue4);}
svg.icon.icon-salmon1 {fill: var(--color-bg-salmon1);}
svg.icon.icon-salmon2 {fill: var(--color-bg-salmon2);}
svg.icon.icon-salmon3 {fill: var(--color-bg-salmon3);}
svg.icon.icon-salmon4 {fill: var(--color-bg-salmon4);}
svg.icon.icon-red1 {fill: var(--color-bg-red1);}
svg.icon.icon-red2 {fill: var(--color-bg-red2);}
svg.icon.icon-red3 {fill: var(--color-bg-red3);}
svg.icon.icon-red4 {fill: var(--color-bg-red4);}
svg.icon.icon-indigo1 {fill: var(--color-bg-indigo1);}
svg.icon.icon-indigo2 {fill: var(--color-bg-indigo2);}
svg.icon.icon-indigo3 {fill: var(--color-bg-indigo3);}
svg.icon.icon-indigo4 {fill: var(--color-bg-indigo4);}
svg.icon.icon-purple1 {fill: var(--color-bg-purple1);}
svg.icon.icon-purple2 {fill: var(--color-bg-purple2);}
svg.icon.icon-purple3 {fill: var(--color-bg-purple3);}
svg.icon.icon-purple4 {fill: var(--color-bg-purple4);}
svg.icon.icon-magenta1 {fill: var(--color-bg-magenta1);}
svg.icon.icon-magenta2 {fill: var(--color-bg-magenta2);}
svg.icon.icon-magenta3 {fill: var(--color-bg-magenta3);}
svg.icon.icon-magenta4 {fill: var(--color-bg-magenta4);}
svg.icon.icon-mint1 {fill: var(--color-bg-mint1);}
svg.icon.icon-mint2 {fill: var(--color-bg-mint2);}
svg.icon.icon-mint3 {fill: var(--color-bg-mint3);}
svg.icon.icon-mint4 {fill: var(--color-bg-mint4);}

.css-check.bg-gray1 input:checked + label:before,
.css-radio.bg-gray1 input:checked + label:before,
.css-toggle.bg-gray1 input:checked + label:before,
.css-toggle-big.bg-gray1 input:checked + label:before {
	background: var(--color-bg-gray1); border-color: var(--color-bg-gray1);
}
.css-check.bg-gray2 input:checked + label:before,
.css-radio.bg-gray2 input:checked + label:before,
.css-toggle.bg-gray2 input:checked + label:before,
.css-toggle-big.bg-gray2 input:checked + label:before {
	background: var(--color-bg-gray2); border-color: var(--color-bg-gray2);
}
.css-check.bg-gray3 input:checked + label:before,
.css-radio.bg-gray3 input:checked + label:before,
.css-toggle.bg-gray3 input:checked + label:before,
.css-toggle-big.bg-gray3 input:checked + label:before {
	background: var(--color-bg-gray3); border-color: var(--color-bg-gray3);
}
.css-check.bg-gray4 input:checked + label:before,
.css-radio.bg-gray4 input:checked + label:before,
.css-toggle.bg-gray4 input:checked + label:before,
.css-toggle-big.bg-gray4 input:checked + label:before {
	background: var(--color-bg-gray4); border-color: var(--color-bg-gray4);
}
.css-check.bg-olive1 input:checked + label:before,
.css-radio.bg-olive1 input:checked + label:before,
.css-toggle.bg-olive1 input:checked + label:before,
.css-toggle-big.bg-olive1 input:checked + label:before {
	background: var(--color-bg-olive1); border-color: var(--color-bg-olive1);
}
.css-check.bg-olive2 input:checked + label:before,
.css-radio.bg-olive2 input:checked + label:before,
.css-toggle.bg-olive2 input:checked + label:before,
.css-toggle-big.bg-olive2 input:checked + label:before {
	background: var(--color-bg-olive2); border-color: var(--color-bg-olive2);
}
.css-check.bg-olive3 input:checked + label:before,
.css-radio.bg-olive3 input:checked + label:before,
.css-toggle.bg-olive3 input:checked + label:before,
.css-toggle-big.bg-olive3 input:checked + label:before {
	background: var(--color-bg-olive3); border-color: var(--color-bg-olive3);
}
.css-check.bg-olive4 input:checked + label:before,
.css-radio.bg-olive4 input:checked + label:before,
.css-toggle.bg-olive4 input:checked + label:before,
.css-toggle-big.bg-olive4 input:checked + label:before {
	background: var(--color-bg-olive4); border-color: var(--color-bg-olive4);
}
.css-check.bg-green1 input:checked + label:before,
.css-radio.bg-green1 input:checked + label:before,
.css-toggle.bg-green1 input:checked + label:before,
.css-toggle-big.bg-green1 input:checked + label:before {
	background: var(--color-bg-green1); border-color: var(--color-bg-green1);
}
.css-check.bg-green2 input:checked + label:before,
.css-radio.bg-green2 input:checked + label:before,
.css-toggle.bg-green2 input:checked + label:before,
.css-toggle-big.bg-green2 input:checked + label:before {
	background: var(--color-bg-green2); border-color: var(--color-bg-green2);
}
.css-check.bg-green3 input:checked + label:before,
.css-radio.bg-green3 input:checked + label:before,
.css-toggle.bg-green3 input:checked + label:before,
.css-toggle-big.bg-green3 input:checked + label:before {
	background: var(--color-bg-green3); border-color: var(--color-bg-green3);
}
.css-check.bg-green4 input:checked + label:before,
.css-radio.bg-green4 input:checked + label:before,
.css-toggle.bg-green4 input:checked + label:before,
.css-toggle-big.bg-green4 input:checked + label:before {
	background: var(--color-bg-green4); border-color: var(--color-bg-green4);
}
.css-check.bg-blue1 input:checked + label:before,
.css-radio.bg-blue1 input:checked + label:before,
.css-toggle.bg-blue1 input:checked + label:before,
.css-toggle-big.bg-blue1 input:checked + label:before {
	background: var(--color-bg-blue1); border-color: var(--color-bg-blue1);
}
.css-check.bg-blue2 input:checked + label:before,
.css-radio.bg-blue2 input:checked + label:before,
.css-toggle.bg-blue2 input:checked + label:before,
.css-toggle-big.bg-blue2 input:checked + label:before {
	background: var(--color-bg-blue2); border-color: var(--color-bg-blue2);
}
.css-check.bg-blue3 input:checked + label:before,
.css-radio.bg-blue3 input:checked + label:before,
.css-toggle.bg-blue3 input:checked + label:before,
.css-toggle-big.bg-blue3 input:checked + label:before {
	background: var(--color-bg-blue3); border-color: var(--color-bg-blue3);
}
.css-check.bg-blue4 input:checked + label:before,
.css-radio.bg-blue4 input:checked + label:before,
.css-toggle.bg-blue4 input:checked + label:before,
.css-toggle-big.bg-blue4 input:checked + label:before {
	background: var(--color-bg-blue4); border-color: var(--color-bg-blue4);
}
.css-check.bg-salmon1 input:checked + label:before,
.css-radio.bg-salmon1 input:checked + label:before,
.css-toggle.bg-salmon1 input:checked + label:before,
.css-toggle-big.bg-salmon1 input:checked + label:before {
	background: var(--color-bg-salmon1); border-color: var(--color-bg-salmon1);
}
.css-check.bg-salmon2 input:checked + label:before,
.css-radio.bg-salmon2 input:checked + label:before,
.css-toggle.bg-salmon2 input:checked + label:before,
.css-toggle-big.bg-salmon2 input:checked + label:before {
	background: var(--color-bg-salmon2); border-color: var(--color-bg-salmon2);
}
.css-check.bg-salmon3 input:checked + label:before,
.css-radio.bg-salmon3 input:checked + label:before,
.css-toggle.bg-salmon3 input:checked + label:before,
.css-toggle-big.bg-salmon3 input:checked + label:before {
	background: var(--color-bg-salmon3); border-color: var(--color-bg-salmon3);
}
.css-check.bg-salmon4 input:checked + label:before,
.css-radio.bg-salmon4 input:checked + label:before,
.css-toggle.bg-salmon4 input:checked + label:before,
.css-toggle-big.bg-salmon4 input:checked + label:before {
	background: var(--color-bg-salmon4); border-color: var(--color-bg-salmon4);
}
.css-check.bg-red1 input:checked + label:before,
.css-radio.bg-red1 input:checked + label:before,
.css-toggle.bg-red1 input:checked + label:before,
.css-toggle-big.bg-red1 input:checked + label:before {
	background: var(--color-bg-red1); border-color: var(--color-bg-red1);
}
.css-check.bg-red2 input:checked + label:before,
.css-radio.bg-red2 input:checked + label:before,
.css-toggle.bg-red2 input:checked + label:before,
.css-toggle-big.bg-red2 input:checked + label:before {
	background: var(--color-bg-red2); border-color: var(--color-bg-red2);
}
.css-check.bg-red3 input:checked + label:before,
.css-radio.bg-red3 input:checked + label:before,
.css-toggle.bg-red3 input:checked + label:before,
.css-toggle-big.bg-red3 input:checked + label:before {
	background: var(--color-bg-red3); border-color: var(--color-bg-red3);
}
.css-check.bg-red4 input:checked + label:before,
.css-radio.bg-red4 input:checked + label:before,
.css-toggle.bg-red4 input:checked + label:before,
.css-toggle-big.bg-red4 input:checked + label:before {
	background: var(--color-bg-red4); border-color: var(--color-bg-red4);
}
.css-check.bg-indigo1 input:checked + label:before,
.css-radio.bg-indigo1 input:checked + label:before,
.css-toggle.bg-indigo1 input:checked + label:before,
.css-toggle-big.bg-indigo1 input:checked + label:before {
	background: var(--color-bg-indigo1); border-color: var(--color-bg-indigo1);
}
.css-check.bg-indigo2 input:checked + label:before,
.css-radio.bg-indigo2 input:checked + label:before,
.css-toggle.bg-indigo2 input:checked + label:before,
.css-toggle-big.bg-indigo2 input:checked + label:before {
	background: var(--color-bg-indigo2); border-color: var(--color-bg-indigo2);
}
.css-check.bg-indigo3 input:checked + label:before,
.css-radio.bg-indigo3 input:checked + label:before,
.css-toggle.bg-indigo3 input:checked + label:before,
.css-toggle-big.bg-indigo3 input:checked + label:before {
	background: var(--color-bg-indigo3); border-color: var(--color-bg-indigo3);
}
.css-check.bg-indigo4 input:checked + label:before,
.css-radio.bg-indigo4 input:checked + label:before,
.css-toggle.bg-indigo4 input:checked + label:before,
.css-toggle-big.bg-indigo4 input:checked + label:before {
	background: var(--color-bg-indigo4); border-color: var(--color-bg-indigo4);
}
.css-check.bg-purple1 input:checked + label:before,
.css-radio.bg-purple1 input:checked + label:before,
.css-toggle.bg-purple1 input:checked + label:before,
.css-toggle-big.bg-purple1 input:checked + label:before {
	background: var(--color-bg-purple1); border-color: var(--color-bg-purple1);
}
.css-check.bg-purple2 input:checked + label:before,
.css-radio.bg-purple2 input:checked + label:before,
.css-toggle.bg-purple2 input:checked + label:before,
.css-toggle-big.bg-purple2 input:checked + label:before {
	background: var(--color-bg-purple2); border-color: var(--color-bg-purple2);
}
.css-check.bg-purple3 input:checked + label:before,
.css-radio.bg-purple3 input:checked + label:before,
.css-toggle.bg-purple3 input:checked + label:before,
.css-toggle-big.bg-purple3 input:checked + label:before {
	background: var(--color-bg-purple3); border-color: var(--color-bg-purple3);
}
.css-check.bg-purple4 input:checked + label:before,
.css-radio.bg-purple4 input:checked + label:before,
.css-toggle.bg-purple4 input:checked + label:before,
.css-toggle-big.bg-purple4 input:checked + label:before {
	background: var(--color-bg-purple4); border-color: var(--color-bg-purple4);
}
.css-check.bg-magenta1 input:checked + label:before,
.css-radio.bg-magenta1 input:checked + label:before,
.css-toggle.bg-magenta1 input:checked + label:before,
.css-toggle-big.bg-magenta1 input:checked + label:before {
	background: var(--color-bg-magenta1); border-color: var(--color-bg-magenta1);
}
.css-check.bg-magenta2 input:checked + label:before,
.css-radio.bg-magenta2 input:checked + label:before,
.css-toggle.bg-magenta2 input:checked + label:before,
.css-toggle-big.bg-magenta2 input:checked + label:before {
	background: var(--color-bg-magenta2); border-color: var(--color-bg-magenta2);
}
.css-check.bg-magenta3 input:checked + label:before,
.css-radio.bg-magenta3 input:checked + label:before,
.css-toggle.bg-magenta3 input:checked + label:before,
.css-toggle-big.bg-magenta3 input:checked + label:before {
	background: var(--color-bg-magenta3); border-color: var(--color-bg-magenta3);
}
.css-check.bg-magenta4 input:checked + label:before,
.css-radio.bg-magenta4 input:checked + label:before,
.css-toggle.bg-magenta4 input:checked + label:before,
.css-toggle-big.bg-magenta4 input:checked + label:before {
	background: var(--color-bg-magenta4); border-color: var(--color-bg-magenta4);
}
.css-check.bg-mint1 input:checked + label:before,
.css-radio.bg-mint1 input:checked + label:before,
.css-toggle.bg-mint1 input:checked + label:before,
.css-toggle-big.bg-mint1 input:checked + label:before {
	background: var(--color-bg-mint1); border-color: var(--color-bg-mint1);
}
.css-check.bg-mint2 input:checked + label:before,
.css-radio.bg-mint2 input:checked + label:before,
.css-toggle.bg-mint2 input:checked + label:before,
.css-toggle-big.bg-mint2 input:checked + label:before {
	background: var(--color-bg-mint2); border-color: var(--color-bg-mint2);
}
.css-check.bg-mint3 input:checked + label:before,
.css-radio.bg-mint3 input:checked + label:before,
.css-toggle.bg-mint3 input:checked + label:before,
.css-toggle-big.bg-mint3 input:checked + label:before {
	background: var(--color-bg-mint3); border-color: var(--color-bg-mint3);
}
.css-check.bg-mint4 input:checked + label:before,
.css-radio.bg-mint4 input:checked + label:before,
.css-toggle.bg-mint4 input:checked + label:before,
.css-toggle-big.bg-mint4 input:checked + label:before {
	background: var(--color-bg-mint4); border-color: var(--color-bg-mint4);
}

.fade{transition:opacity .15s ease}
.fade:not(.show){opacity:0;}

/* 
    Button Style
*/
.butn{
    display:flex;
    background:transparent;
    justify-content:center;
    align-items:center;
    gap:5px;
    text-align:center;
    color:inherit;
    white-space:nowrap;
    min-width:60px;
    padding:6px 10px;
    border:1px solid var(--button-border);
    border-radius:6px;
    outline:none;
    cursor:pointer;
    transition:all 0.3s ease;
}
.butn:hover{background:var(--bground); border-color:var(--border-hover); color:var(--button-hover-txt)}
.butn.text-size-s1,
.butn.text-size-s2{padding:2px 6px}

.icon_butn{
	background:transparent;
	display:flex;
    justify-content:center;
    align-items:center;
    gap:5px;
    text-align:center;
    white-space:nowrap;
    outline:none;
    cursor:pointer;
	width:30px; height:30px;
	border-radius:6px; 
	transition:all 0.3s ease;
}
.icon_butn:hover{background:var(--button-hover)}
.icon_butn:hover svg{fill:var(--menu-icon-hover)}
.pt-none{pointer-events:none}


/*
	Toggle Style
*/
.css-toggle{position:relative; background:none; display:flex; align-items:center; min-height:18px;}
.css-toggle input{display:none;}
.css-toggle label{position:relative; display:block; cursor:pointer;}
.css-toggle label:before {content:""; position:absolute; top:0; left:0; box-sizing:border-box;}
.css-toggle input:checked + label:before{background:var(--toggle-default); border-color:var(--toggle-default);}
.css-toggle span{margin-left:5px;}
.css-toggle label{width:25px; height:16px;}
.css-toggle label:before{background:var(--toggle-bg); width:25px; height:16px; border-radius:8px;}
.css-toggle label:after{
	content:""; position:absolute; top:2px; left:2px; background:var(--toggle-pt);
	width:12px; height:12px; border-radius:50%; transition:all 0.1s ease;
 }
.css-toggle input:checked + label:after{left:11px;}

.css-toggle-big{position:relative; background:none; font-size:14px; color:var(--txt); display:flex; align-items:center; min-height:18px;}
.css-toggle-big input{display:none;}
.css-toggle-big label{position:relative; display:block; cursor:pointer;}
.css-toggle-big label:before{content:""; position:absolute; top:0; left:0; box-sizing:border-box;}
.css-toggle-big input:checked + label:before{background:var(--toggle-default); border-color:var(--toggle-default);}
.css-toggle-big span{margin-left:5px;}
.css-toggle-big label{width:40px; height:24px;}
.css-toggle-big label:before{top:0; background:var(--toggle-bg); width:40px; height:24px; border-radius:12px;}
.css-toggle-big label:after{
	content:""; position:absolute; top:3px; left:3px; background:var(--toggle-pt);
	width:18px; height:18px; border-radius:50%; transition: all 0.2s ease;
}
.css-toggle-big input:checked + label:after{left:19px;}



/*
	DropDown Menu
*/
.dp-menu{
	position:absolute; z-index:1; top:40px; right:40px; min-width:160px; max-width:320px; background:var(--bgw-color);
	display:none; border-radius:6px; border:1px solid var(--border-normal); box-shadow:1px 2px 3px var(--box-shadow);
}
.dp-menu.active{display:block}
.dp-menu ul{padding:5px 0}
.dp-menu li{padding:0 5px}
.dp-menu button{background:none; display:flex; gap:5px; align-items:center; width:100%; padding:6px 10px; border-radius:6px;}
.dp-menu button svg{flex-shrink:0;}
.dp-menu button span{white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.dp-menu button:hover{background:var(--button-hover); color:var(--txt-hover)}
.dp-menu button:hover svg{fill:var(--menu-icon-hover)}



/* 
    Modal Style
*/
/* 모달창 기본설정 */
.jqx-window-header h4{font-weight:700}
.jqx-window-header>div{display:flex; justify-content:space-between; align-items:center; width:calc(100% - 30px);}
.jqx-window-close-button-background{top:50%; margin-top:-9px}
.pop-wrap{position:relative}
.pd20{padding:20px}
.pop-header-btn{display:flex; gap:5px;}
.pop-body{
	position: relative;
	flex: 1 1 auto;
	color:var(--txt-normal);
}
.pop-wrap .nomad{color:var(--txt-gray2)}
.pop-footer {
	display:flex; gap:5px;
	flex-shrink:0;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
	/* padding:calc(20px - 5px * 0.5); */
}
.justy-center{justify-content:center}

.pop-footer button{background:var(--bgw-color); min-width:60px; color:var(--txt-gray); border:1px solid var(--border-normal);}
.pop-footer button.bg-red2{background:var(--color-bg-red2); color:var(--txt-white); border-color:transparent}
.pop-footer button.bg-red2:hover{background:var(--color-bg-red3)}
.finger_popup .pop-footer{padding:0; margin-top:10px}
.finger_popup .foot_pd{padding-right:20px}




/*
    Input Style
*/
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=date]{
	font-size: 1em;
	outline: none;
	width: 100%; height:34px; padding:6px;
	border-radius: 4px;
	transition: all 0.3s ease;
	border: 1px solid var(--border-normal);
}
select{
	font-size: 1em;
	outline: none;
	width: 100%; height:34px;
	border-radius: 4px;
	transition: all 0.3s ease;
	border: 1px solid var(--border-normal);
	padding:2px; cursor:pointer;
}
input:focus,select:focus,textarea:focus{
	border-color:var(--border-input);
}
textarea {
	font-size:1em;
    width: 100%;
    min-height: 33px;
    padding: 8px 5px;
    vertical-align: middle;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid var(--border-normal);
    border-radius: 4px;
    outline:none;
    -webkit-appearance: none;
}

/* 툴팁 */
.tippy-box{
	background:#33394E;
	border-radius:3px;
	font-size:12px;
}



/*
	Modal
*/

/* 브리핑 */
.pop-match p{padding:10px 20px; line-height:20px}
.pop-match svg{fill:#F3B12F}
.pop-match .brief_alert{display:flex; gap:20px; justify-content:flex-start; align-items:center; padding:0 20px}
.pop-match .brief_alert div{display:flex; gap:5px; align-items:center;}

.com_header{display:flex; gap:5px; align-items:center; padding:20px; padding-bottom:10px}
.com_header span{color:var(--txt-gray2); font-size:11px}
.pop-footer .foot_info{font-size:11px; text-align:center; width:100%; color:var(--txt-gray2);}
.pop-footer .foot_info br{display:none}
.pop-footer .foot_alt{color:var(--txt-normal); width:100%; text-align:center;}
.com_body{max-height:440px; padding:10px 20px; overflow-y:auto}
.com_body>div{margin-bottom:10px; padding:10px; color:var(--txt-gray); border:1px solid var(--border-normal); border-radius:3px; cursor:pointer; transition:all 0.3s ease}
.com_body>div:hover{color:var(--txt-hover); border-color:var(--color-bg-red2)}
.com_body p{
	display:-webkit-box;
	line-clamp:1;
	-webkit-line-clamp:1;
	-webkit-box-orient: vertical;
	overflow:hidden;
	max-width:60%;
}
.pop-company1 .com_body>div{display:flex; gap:10px;}
.pop-company2 .com_body p{margin-bottom:5px; font-weight:700}
.pop-company2 .com_body li{
	position:relative;
	padding-left:20px;
	line-height:20px; color:var(--txt-gray);
	display:-webkit-box;
	line-clamp:1;
	-webkit-line-clamp:1;
	-webkit-box-orient: vertical;
	overflow:hidden;
}
.pop-company2 .com_body li:before{content:''; position:absolute; top:9px; left:10px; background:var(--bg-dark); width:3px; height:3px; border-radius:50%}

.pop-brief{max-height:400px; overflow-y:auto}
.brief_header{display:flex; gap:5px; align-items:center; min-height:33px; padding-bottom:5px}
.brief_header h4{font-weight:700}
.brief_header button{background:transparent; padding:5px; border-radius:6px; transition:all 0.3s ease}
.brief_header button svg{fill:var(--menu-icon)}
.brief_header button:hover{background:var(--bgw-hover);}
.brief_header button:hover svg{fill:var(--menu-icon-hover)}
.brief_body{padding:10px 20px;}
.brief_body p{line-height:20px}
.brief_body>div{margin-bottom:20px}
.brief_body table{border-collapse:collapse; border-spacing:0}
.brief_body table th,
.brief_body table td{border:1px solid var(--border-normal); padding:7px 10px}
.brief_body table th{background:var(--bground)}
.brief_body table.table_finan th{text-align:center}
.brief_body table.table_finan td{text-align:right}
.brief_body table.table_finan td:first-child{text-align:center}

.pop-brief .brief_body li{display:flex; justify-content:space-between; align-items:center; line-height:25px; color:var(--txt-gray); cursor:pointer}
.pop-brief .brief_body li div{
	position:relative;
	padding:0 20px;
	line-height:20px;
	display:-webkit-box;
	line-clamp:1;
	-webkit-line-clamp:1;
	-webkit-box-orient: vertical;
	overflow:hidden;
	text-decoration:underline;
}
.pop-brief .brief_body li:hover{color:var(--txt-hover)}
.pop-brief .brief_body li div:before{content:''; position:absolute; top:9px; left:10px; background:var(--bg-dark); width:3px; height:3px; border-radius:50%}

.brief_comment textarea{
	width:100%; height:80px; padding:20px 20px 10px 20px;
	border:none; resize:none; outline:none;
}
.brief_comment textarea:focus{box-shadow:none}

/* 브리핑 팁 */
.tip_briefing{
	position:absolute; z-index:9; top:-55px; left:50%; margin-left:-255px; background:#33394E;
	font-size:12px; color:var(--txt-white); padding:8px; border-radius:3px;
}
.tip_briefing button{position:absolute; top:5px; right:5px; background:none}
.tip_briefing svg{fill:var(--menu-icon-white)}
.tip_briefing:before{content:''; position:absolute; bottom:-11px; right:65px; width:6px; height:6px; border:6px solid transparent; border-top-color:#33394E}

/* 의견 */
.ai_comment{
	position:absolute; z-index:9992; width:360px; background:var(--bgw-color);
	border:1px solid #d9d9d9; border-radius:6px; box-shadow:1px 3px 5px rgba(0,0,0,0.2)
}
.comt-head{display:flex; justify-content:space-between; align-items:center; width:100%; padding:15px 20px; border-bottom:1px solid var(--border-gray)}
.comt-head h4{font-weight:700}
.comt-head button{background:transparent; padding:6px; border-radius:6px; transition:all 0.3s ease}
.comt-head button:hover{background:var(--button-hover)}
.comt-head button:hover svg{fill:var(--menu-icon-hover)}
.comt-body textarea{
	width:100%; height:80px; padding:20px 20px 0 20px;
	border:none; resize:none; outline:none;
}
.comt-body textarea:focus{box-shadow:none}
.ai_comment .pop-footer{padding:20px}

.ai_comment.ai_chat{position:fixed; top:45px; right:390px;}


/* 버튼강조효과 */
.b_brief_tip{
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: b-tip;
    animation-name: b-tip;
}
.b_brief_tip svg{fill:var(--menu-icon)}
@keyframes b-tip{
    0%{
    	opacity:0.5;
    	background:#e9e9e9;
    	border-color:#999;
    }
    50%{
    	opacity:1;
    	background:var(--bgw-color);
    	border-color:#444; color:var(--txt-head);
    	svg{fill:#444}
    }
    100%{
    	opacity:0.5;
    	background:#e9e9e9;
    	border-color:#999;
    }
}

/* 고객사 검색 */
.bf_search{
	position:absolute; top:40px; z-index:1; background:var(--bgw-color); width:300px;
	border:1px solid var(--border-normal); border-radius:8px; box-shadow:1px 2px 5px rgba(0,0,0,0.2)
}
.bf-header{position:relative; border-bottom:1px solid var(--border-gray); padding:5px}
.bf-header input{font-size:14px; padding:10px 20px 10px 30px; border:none; outline:none}
.bf-header input:focus{box-shadow:none}
.bf-header .i-search{position:absolute; top:16px; left:15px; fill:var(--menu-icon); pointer-events:none}
.bf-header button{position:absolute; top:12px; right:15px; background:transparent; padding:5px; border-radius:6px; transition:all 0.3s ease}
.bf-header button svg{fill:var(--menu-icon)}
.bf-header button:hover{background:var(--bgw-hover);}
.bf-header button:hover svg{fill:var(--menu-icon-hover)}

.bf-body{max-height:260px; overflow-y:auto}
.bf-body>div{padding:10px 20px; cursor:pointer}
.bf-body>div:hover{background:var(--bgw-hover)}
.bf-body h4{color:var(--txt-head)}
.bf-body b{font-weight:700; color:var(--txt-head)}
.bf-body p{
	color:var(--txt-gray); font-size:12px;
	display:-webkit-box;
	line-clamp:1;
	-webkit-line-clamp:1;
	-webkit-box-orient: vertical;
	overflow:hidden;
}

.bf-footer{display:flex; justify-content:space-between; align-items:center; padding:10px 20px;}
.bf-footer button{
	background:transparent; padding:5px; border-radius:6px; transition:all 0.3s ease;
	display:flex; gap:3px; align-items:center; color:var(--txt-normal);
}
.bf-footer svg{fill:var(--menu-icon)}
.bf-footer svg:hover{fill:var(--menu-icon-hover)}
.bf-footer button:hover{background:var(--bgw-hover);}
.bf-footer button:hover svg{fill:var(--menu-icon-hover)}
.bf-footer b{font-weight:700; color:var(--txt-head)}

/* Finger AI */
.fingerbot{
	position:fixed; z-index:9991; right:20px; top:45px; background:var(--bgw-color); font-size:14px; line-height:25px;
	width:360px; height:calc(90% - 45px); min-height:360px; max-height:650px; word-break:keep-all;
	border-radius:6px; box-shadow:2px 5px 20px var(--box-shadow); overflow:hidden
}
.fingerbot.mobile{font-size:16px; line-height:30px;}
.fingerbot>div{display:flex; flex-direction:column; height:100%;}
.bot_body::-webkit-scrollbar{width:8px}
.bot_body::-webkit-scrollbar-thumb{background:var(--thumb-color); border-radius:5px; background-clip:padding-box; border:1px solid transparent}
.bot_body::-webkit-scrollbar-track{background:transparent; width:8px}

.bot_head{display:flex; justify-content:space-between; align-items:center; background:var(--bgw-color); width:100%; padding:10px; border-bottom:1px solid var(--border-gray)}
.bot_head .bot_title{display:flex; align-items:center;}
.bot_head .bot_title h6{font-size:var(--font-size-x1); color:var(--txt-head); font-weight:700; margin-left:10px}
.bot_head .btn_header{display:flex; gap:5px; align-items:center}

.bot_body{width:100%; height:calc(100% - 50px); overflow-y:auto}

.chat_wrap{padding:15px 20px;}
.chat_wrap>div>div{margin-bottom:15px;}
.chat_wrap .chat_ai>div{padding-bottom:10px}
.chat_wrap ul{margin-left:30px; }
.chat_wrap li{list-style:disc}
.chat_wrap p{padding:10px 0;}
.chat_wrap b{font-weight:700}

.chat_wrap .chat_ask{text-align:right}
.chat_wrap .chat_ask>div{
	padding-bottom:10px; display:inline-block; background:var(--chat-ask-bg);
	border-radius:10px; padding:5px 20px; color:var(--txt-normal);
}

.loader, .loader:before, .loader:after{width:12px; height:12px; border-radius:50%; animation-fill-mode:both; animation:bblFadInOut 1.2s infinite ease-in-out;}
.loader{position:relative; display:block; margin-top:30px; margin-left:21px; animation-delay:-0.16s;}
.loader:before,.loader:after{content:''; position:absolute; top:0;}
.loader:before{left:-1.6em; animation-delay:-0.32s;}
.loader:after{left:1.6em;}
@keyframes bblFadInOut{
	0%, 100% {background:#f0f0f0}
	50% {background:#666}
}

.loader_2{display:flex; gap:10px; align-items:center}
.loader_2 svg{fill:var(--color-bg-red2); animation-fill-mode:both; animation:loader_2 1.2s infinite linear;}
@keyframes loader_2{
	0% {transform:rotate(0deg);}
	100% {transform:rotate(-360deg);}
}

.chat_fold{background:var(--bground); display:block; width:100%; padding:10px 20px; border-radius:10px; overflow:hidden; transition:all 0.3s ease}
.chat_fold button{background:none; display:flex; gap:5px; align-items:center; width:100%; font-weight:700; color:var(--txt-normal)}
.chat_fold button svg{fill:var(--txt-normal)}
.chat_fold .fold_panel{display:none; margin-top:10px;}
.chat_fold.active .fold_panel{display:block}
.chat_fold.active button svg{transform:rotate(180deg)}

.chat_his{padding:15px 20px}
.chat_his>div{margin-bottom:15px;}
.chat_his p.date_tit{font-size:var(--font-size-x1); color:var(--txt-normal); font-weight:700; margin-bottom:5px; margin-top:20px}
.chat_his .chat_panel{margin-bottom:10px; border:1px solid var(--border-normal); border-radius:6px}
.chat_his .chat_panel>div{padding:15px 20px; border-bottom:1px solid var(--border-gray); cursor:pointer; transition:all 0.3s ease}
.chat_his .chat_panel>div:last-child{border-bottom:none}
.chat_his .chat_panel span{display:block; font-size:var(--font-size-s1); color:var(--txt-gray2)}
.chat_his .chat_panel .his_con{
	display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;	overflow:hidden;
}
.his_none{position:relative; width:100%; height:100%; text-align:center; color:var(--txt-gray2); margin-top:80%}




.chat_list .chat_del{display:none; position:absolute; top:5px; right:5px; box-shadow:1px 2px 3px rgba(0,0,0,0.1); cursor:pointer}
.chat_list .chat_panel p{font-weight:700; color:#666; margin-bottom:5px}
.chat_list .chat_panel span{display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.chat_list .chat_panel:hover{background:#f9f9f9; color:#666; border-color:#999}
.chat_list .chat_panel:hover p{color:#222}
.chat_list .chat_panel:hover .chat_del{display:block}


.bot_foot{display:flex; gap:10px; justify-content:space-between; align-items:center; width:100%; padding:15px;}
.bot_foot>div{width:100%}
.bot_foot input{background:var(--form-bg); width:100%; height:40px; padding:0 45px 0 15px; border-color:transparent; border-radius:20px; box-shadow:none;}
.bot_foot input:focus{background:var(--bgw-color); border-color:var(--border-input)}
.bot_foot button{background:var(--bground); display:flex; flex-shrink:0; justify-content:center; align-items:center; width:40px; height:40px; border-radius:50%}
.bot_foot button.active{background:var(--color-bg-red2)}
.bot_foot button.active svg{fill:var(--menu-icon-white)}

/* 
	캘린더 
*/
.cal_fab{position:absolute; z-index:99; top:0; right:0; cursor:pointer;}
.cal_bar>div.cal_fab{display:block; margin-right:0}
.fab_btn{height:40px; font-weight:700; padding:5px 20px; border-radius:20px; min-width:unset}
.fab_btn .cal-add{fill:var(--color-bg-red3); flex-shrink:0}

.cal_fab.active .fab_btn{background:var(--bgw-hover)}
.cal_fab.active .fab_btn svg.dot_arrow{transform:rotate(180deg); fill:var(--menu-icon-hover)}
.cal_fab.active .fab_pop{display:block; top:45px; height:auto; opacity:1;}
.cal_today{position:relative; text-align:center; display:none; cursor:pointer;}
.cal_today i{
	position:absolute; top:3px; display:flex; justify-content:center; align-items:center; 
	width:24px; height:24px; font-size:12px; font-weight:bold; color:var(--today-txt);
}
.cal_today svg{fill:var(--today-svg)}


/* 팝메뉴 */
.fab_tips{position:absolute;}
.fab_tips .fab_pop{top:0; opacity:1; height:auto;}
.fab_pop{
	position:absolute; right:0; background:var(--bgw-color); min-width:140px; opacity:0; height:0; overflow:hidden;
	box-sizing:border-box; border-radius:6px; box-shadow:1px 3px 6px var(--box-shadow); transition:all 0.3s ease;
}
.fab_pop ul{padding:5px}
.fab_pop li{position:relative; display:flex; gap:5px; align-items:center; padding:0 10px; text-align:left; line-height:40px; border-radius:6px; cursor:pointer; white-space:nowrap}
.fab_pop li:hover{background:var(--bgw-hover); color:var(--txt-hover)}
.fab_pop li:hover .icon{fill:var(--menu-icon-hover)}

.mobile_btr{display:none; position:absolute; top:10px; right:0;}
.mobile_btr .dpmenu{
	position:absolute; right:0; bottom:30px; background:var(--bgw-color); min-width:140px; overflow:hidden;
	box-sizing:border-box; border-radius:6px; box-shadow:1px 3px 6px var(--box-shadow); transition:all 0.3s ease;
}
.dpmenu ul{padding:5px}
.dpmenu li{
	position:relative; display:flex; gap:5px; align-items:center; font-size:var(--font-size); font-weight:var(--font-mormal); text-align:left; line-height:40px;
	padding:0 10px;  border-radius:6px; cursor:pointer; white-space:nowrap;
}
.dpmenu li:hover{background:var(--bgw-hover); color:var(--txt-hover)}
.dpmenu li:hover .icon{fill:var(--menu-icon-hover)}



/*
	영업기회
*/
.pipe_panel{position:relative; margin-bottom:10px; padding:20px; border:1px solid var(--border-normal); border-radius:6px}
.oppo_head{display:flex; gap:5px; align-items:center}
.oppo_head .oppo_title{
	display:inline-block;
	font-size:var(--font-size-x1);
	font-weight:var(--font-bold);
	display:-webkit-box; 
	line-clamp:1; 
	-webkit-line-clamp:1; 
	-webkit-box-orient: vertical;
	overflow:hidden;
	cursor:pointer;
	margin-right:30px;
	width:100%;
}
.oppo_head .oppo_ttl{position:absolute; bottom:20px; right:20px}
.oppo_ttl{display:flex; gap:5px; align-items:center}
.oppo_ttl span{font-size:var(--font-size-s1); color:var(--txt-label)}
.oppo_ttl p{font-size:var(--font-size-s1);}
.oppo_probar{
	position:relative; background:#E3EAF1; width:100px; height:6px; border-radius:3px; overflow:hidden;
	box-shadow:1px 1px 1px rgba(0,0,0,0.2) inset;
}
.oppo_probar i{position:absolute; height:100%; background:var(--color-bg-salmon1); border-radius:3px; box-shadow:1px 1px 1px rgba(0,0,0,0.2) inset;}


.head_tag{
	display:flex; justify-content:center; align-items:center;
	color:var(--txt-white); font-size:var(--font-size-s1); white-space:nowrap;
	padding:2px 5px; border-radius:3px;
}
.head_tag.recog{background:var(--pipe-indigo)}
.head_tag.posal{background:var(--pipe-blue)}
.head_tag.nego{background:var(--pipe-green)}
.head_tag.cont{background:var(--pipe-red)}

/* .imenu_wrap{position:absolute; top:10px; right:20px;} */
.imenu_wrap.cd-stretchy-nav-2.nav_dept{top:5px; right:-10px}
.imenu_wrap a{display:block; width:30px; height:30px}
.imenu_wrap ul{
	position:absolute; z-index:9; top:30px; right:0; background:var(--bgw-color);
	min-width:140px; padding:10px; border:1px solid var(--border-normal); border-radius:6px;
	box-shadow:1px 3px 6px rgba(0,0,0,0.1);
}
.imenu_wrap li{display:flex; gap:5px; padding:5px 10px; border-radius:6px; cursor:pointer}
.imenu_wrap li svg{flex-shrink:0}
.imenu_wrap li span{white-space:nowrap}
.imenu_wrap li:hover{background:var(--bgw-hover); color:var(--txt-hover)}
.imenu_wrap li:hover .icon{fill:var(--menu-icon-hover)}

.oppo_pipeline{display:flex; gap:2px; margin-top:10px;}
.oppo_pipeline>div{
	display:block; position:relative; background:var(--pipe-none);
	color:var(--txt-gray2); width:100%; min-height:6px;
	padding:3px 6px; border-radius:4px; overflow:hidden; cursor:pointer; transition:all 1s ease;
}
.oppo_pipeline .op_status{
	display:grid; align-items:center;
	line-height:16px; opacity:0; height:0; transition:all 0.4s ease;
}
.oppo_pipeline .op_status p{
	width:100%; font-size:var(--font-size-s1); text-align:center; line-height:17px;
	display:-webkit-box; 
	line-clamp:1; 
	-webkit-line-clamp:1;
	-webkit-box-orient: vertical;
	overflow:hidden;
}

.oppo_pipeline .op_status p:first-child{font-weight:var(--font-bold)}
.oppo_pipeline.active .op_status{opacity:1; height:35px}

.oppo_pipeline .recog{background:var(--pipe-indigo)}
.oppo_pipeline .recog p{color:var(--txt-white)}
.oppo_pipeline .posal{background:var(--pipe-blue)}
.oppo_pipeline .posal p{color:var(--txt-white)}
.oppo_pipeline .nego{background:var(--pipe-green)}
.oppo_pipeline .nego p{color:var(--txt-white)}
.oppo_pipeline .cont{background:var(--pipe-red)}
.oppo_pipeline .cont p{color:var(--txt-white)}

.oppo_exp{display:flex; justify-content:space-between; margin-top:10px;}
.oppo_exp .oppo_ctxt{display:flex;}
.oppo_exp .oppo_ctxt>div{display:flex; align-items:center; gap:5px; margin-right:20px}
.oppo_exp .oppo_ctxt span{font-size:var(--font-size-s1); color:var(--txt-label)}
.oppo_exp .oppo_ctxt p{font-size:var(--font-size-s1);}



/* 타임라인 파이프라인 */
.graph_box_td .oppo_pipeline{margin-top:0}
.graph_box_td .oppo_pipeline.active{flex-wrap:wrap}
.graph_box_td .oppo_pipeline.active>div{width:auto; padding:6px;}
.graph_box_td .oppo_pipeline.active .op_status{max-width:130px}