@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&subset=korean'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@font-face {/* 221207 성과급제 타이틀 */
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* reset.css */
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, dl, dt, dd, ol, ul, li, fieldset, form, legend, table, caption, tbody, tfoot, thead, tr, th, td, input, select, textarea, button { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
table, img, fieldset { border:none; }
table { border-collapse:collapse; border-spacing:0; /* width:100%; */table-layout:fixed;/* 테이블 넓이값 고정 */ word-break:break-all;/* 글씨 넘칠씨 자동 줄바꿈. */}
ul, ol, li { list-style:none; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
caption,th, td {text-align:left;}
abbr,acronym { border:0; }
img { vertical-align:top; }
input, select, textarea { vertical-align:middle; }
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display: block }

/* FONT */
body {font:75% /1.3 Noto Sans KR, "Noto Sans KR", "맑은 고딕", "Malgun Gothic", Dotum, "돋움", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", Ngothic, sans-serif; color:#555; font-weight:400; }
input, select, textarea {font:100% Pretendard, Noto Sans KR, "Noto Sans KR", "맑은 고딕", "Malgun Gothic", Dotum, "돋움", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", Ngothic, sans-serif; font-weight:400; }

/* anchor outline:0; = 점선X */
a { text-decoration:none; cursor: pointer; }
a:link { color:#555; }
a:visited { color:#555; }
a:active { text-decoration:none; color:#555; outline:0; }
a:hover { text-decoration:none; color:#b60005; }
a:focus { color:#b60005; outline:0; }

/* skip */
.skip, legend {position:absolute; top:0; left:0; text-indent:-9999px; width:0; height:0; line-height:0; font-size:0; overflow:hidden; visibility:hidden;}
caption {width:0; height:0; padding:0; margin:0px; visibility:hidden; overflow:hidden; font-size:0; line-height:0;}
hr {display:none;}

/* clear */
.clearFix:after {content:""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearFix {display: inline-block;}
html[xmlns] .clearFix {display: block;}
* html .clearFix {height: 1%;}
.clearBoth {clear:both;}

/* 내용 말줄임표로 줄이기 */
.ellipsis {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ellipsis.multiline {white-space:normal;}

/* flaot */
.floatLeft {float:left;}
.floatRight {float:right;}

/* position */
.posR {position:relative;}

/* align */
.alignLeft {text-align:left !important;}
.alignCenter {text-align:center !important;}
.alignRight {text-align:right !important;}
.alignTop {vertical-align:top !important;}
.alignMiddle {vertical-align:middle !important;}
.alignBottom {vertical-align:bottom !important;}

/* display */
.none {display:none;}
.block {display:block;}
.inline {display:inline;}
.inlineBlock {display:inline-block;}

/* color */
.colorRed {color:#eb1111 !important;}
.colorPink {color:#ec3751 !important;}
.colorOr {color:#f17420 !important;}
.colorYellow {color:#eddf1c !important;}
.colorGreen {color:#568a55 !important;}
.colorBl {color:#364c99 !important;}
.colorSky {color:#51a3e9  !important;}
.colorEm {color:#3f8883 !important;}
.colorPurple {color:#c427df !important;}
.colorLighturple {color:#e7a6e7 !important;}
.colorMaroon {color:#c3915b !important;}
.colorCobaltblue {color:#001dff !important;}
.colorSlategray {color:#708090 !important;}
.colorAqua {color:#25e1e1 !important;}
.colorPeachpuff {color:#ffbb7c !important;}
.colorMistyrose {color:#ffb9b1 !important;}
.colorBeige {color:#d7c57e !important;}
.colorLavender {color:#b8b8ff !important;}
.colorDarkorchid {color:#9932cc !important;}
.colorBrown {color:#a52a2a !important;}
.colorCoral {color:#ff7f50 !important;}
.colorSeagreen {color:#40bd77 !important;}
.colorDarkgreen {color:#006400 !important;}
.colorOlive {color:#6b9129 !important;}
.colorTomato {color:#ff6347 !important;}

.colorBk {color:#333 !important;}
.colorGr {color:#ccc !important;}
.colorGr2 {color:#aaa !important;}

/* bold */
.bold {font-weight:700;}
.strong {font-weight:500;}
.underline {text-decoration:underline;  text-underline-offset:3px;}
.line-through {text-decoration:line-through}
.bullet {padding-left:0.7em; position:relative;}
.bullet:after {content:""; position:absolute; top:50%; left:0; transform:translate(0%,-50%); width:0.2em; height:0.2em; background:#555; border-radius:99px;}

/* TIT */
h4.h4Tit {font-size:16px; font-weight:500; color:#393f4a; padding-bottom:10px; height:21px;}

/* padding margin */
.pdb0{padding-bottom:0px !important;}.pdb1{padding-bottom:1px !important;}.pdb2{padding-bottom:2px !important;}.pdb3{padding-bottom:3px !important;}.pdb4{padding-bottom:4px !important;}.pdb5{padding-bottom:5px !important;}.pdb6{padding-bottom:6px !important;}.pdb7{padding-bottom:7px !important;}.pdb8{padding-bottom:8px !important;}.pdb9{padding-bottom:9px !important;}.pdb10{padding-bottom:10px !important;}.pdb11{padding-bottom:11px !important;}.pdb12{padding-bottom:12px !important;}.pdb13{padding-bottom:13px !important;}.pdb14{padding-bottom:14px !important;}.pdb15{padding-bottom:15px !important;}.pdb16{padding-bottom:16px !important;}.pdb17{padding-bottom:17px !important;}.pdb18{padding-bottom:18px !important;}.pdb19{padding-bottom:19px !important;}.pdb20{padding-bottom:20px !important;}.pdb25{padding-bottom:25px !important;}.pdb30{padding-bottom:30px !important;}.pdb35{padding-bottom:35px !important;}.pdb40{padding-bottom:40px !important;}.pdb45{padding-bottom:45px !important;}.pdb50{padding-bottom:50px !important;}.pdb60{padding-bottom:60px !important;}.pdb70{padding-bottom:70px !important;}.pdb80{padding-bottom:80px !important;}.pdb90{padding-bottom:90px !important;}.pdb100{padding-bottom:100px !important;}
.pdt0{padding-top:0px !important;}.pdt1{padding-top:1px !important;}.pdt2{padding-top:2px !important;}.pdt3{padding-top:3px !important;}.pdt4{padding-top:4px !important;}.pdt5{padding-top:5px !important;}.pdt6{padding-top:6px !important;}.pdt7{padding-top:7px !important;}.pdt8{padding-top:8px !important;}.pdt9{padding-top:9px !important;}.pdt10{padding-top:10px !important;}.pdt11{padding-top:11px !important;}.pdt12{padding-top:12px !important;}.pdt13{padding-top:13px !important;}.pdt14{padding-top:14px !important;}.pdt15{padding-top:15px !important;}.pdt16{padding-top:16px !important;}.pdt17{padding-top:17px !important;}.pdt18{padding-top:18px !important;}.pdt19{padding-top:19px !important;}.pdt20{padding-top:20px !important;}.pdt25{padding-top:25px !important;}.pdt30{padding-top:30px !important;}.pdt35{padding-top:35px !important;}.pdt40{padding-top:40px !important;}.pdt45{padding-top:45px !important;}.pdt50{padding-top:50px !important;}.pdt60{padding-top:60px !important;}.pdt70{padding-top:70px !important;}.pdt80{padding-top:80px !important;}.pdt90{padding-top:90px !important;}.pdt100{padding-top:100px !important;}
.mgb0{margin-bottom:0px !important;}.mgb1{margin-bottom:1px !important;}.mgb2{margin-bottom:2px !important;}.mgb3{margin-bottom:3px !important;}.mgb4{margin-bottom:4px !important;}.mgb5{margin-bottom:5px !important;}.mgb6{margin-bottom:6px !important;}.mgb7{margin-bottom:7px !important;}.mgb8{margin-bottom:8px !important;}.mgb9{margin-bottom:9px !important;}.mgb10{margin-bottom:10px !important;}.mgb11{margin-bottom:11px !important;}.mgb12{margin-bottom:12px !important;}.mgb13{margin-bottom:13px !important;}.mgb14{margin-bottom:14px !important;}.mgb15{margin-bottom:15px !important;}.mgb16{margin-bottom:16px !important;}.mgb17{margin-bottom:17px !important;}.mgb18{margin-bottom:18px !important;}.mgb19{margin-bottom:19px !important;}.mgb20{margin-bottom:20px !important;}.mgb25{margin-bottom:25px !important;}.mgb30{margin-bottom:30px !important;}.mgb35{margin-bottom:35px !important;}.mgb40{margin-bottom:40px !important;}.mgb45{margin-bottom:45px !important;}.mgb50{margin-bottom:50px !important;}.mgb60{margin-bottom:60px !important;}.mgb70{margin-bottom:70px !important;}.mgb80{margin-bottom:80px !important;}.mgb90{margin-bottom:90px !important;}.mgb100{margin-bottom:100px !important;}
.mgt0{margin-top:0px !important;}.mgt1{margin-top:1px !important;}.mgt2{margin-top:2px !important;}.mgt3{margin-top:3px !important;}.mgt4{margin-top:4px !important;}.mgt5{margin-top:5px !important;}.mgt6{margin-top:6px !important;}.mgt7{margin-top:7px !important;}.mgt8{margin-top:8px !important;}.mgt9{margin-top:9px !important;}.mgt10{margin-top:10px !important;}.mgt11{margin-top:11px !important;}.mgt12{margin-top:12px !important;}.mgt13{margin-top:13px !important;}.mgt14{margin-top:14px !important;}.mgt15{margin-top:15px !important;}.mgt16{margin-top:16px !important;}.mgt17{margin-top:17px !important;}.mgt18{margin-top:18px !important;}.mgt19{margin-top:19px !important;}.mgt20{margin-top:20px !important;}.mgt25{margin-top:25px !important;}.mgt30{margin-top:30px !important;}.mgt32{margin-top:32px !important;}.mgt35{margin-top:35px !important;}.mgt40{margin-top:40px !important;}.mgt45{margin-top:45px !important;}.mgt50{margin-top:50px !important;}.mgt60{margin-top:60px !important;}.mgt70{margin-top:70px !important;}.mgt80{margin-top:80px !important;}.mgt90{margin-top:90px !important;}.mgt100{margin-top:100px !important;}
.dash {display:inline-block; padding:0 7px; vertical-align:middle;}
.mr0 {margin-right:0 !important;}

/* 스크롤 */
.scroll {overflow:auto;}

.cover {display:inline-block; overflow:hidden;}

/********** 화면 너비가 770px 이하일 때에만 아래 코드를 실행 **********/
@media only all and (max-width:770px) {

}

/* 스크롤 */
body{
 scrollbar-face-color:#5e6479;
 scrollbar-highliglht-color:#5e6479;
 scrollbar-3dlight-color:#5e6479;
 scrollbar-track-color:#eee;
 scrollbar-shadow-color:#eee;
 scrollbar-darkshadow-color:#eee;
 scrollbar-arrow-color:#5e6479;
}

/* Chrome, Safari용 스크롤 바 */
::-webkit-scrollbar {width:8px; height:8px; border:3px solid #fff;}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {background:#efefef;  -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3); border-radius:99px;}

::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height:50px; width:50px; background:#5e6479; -webkit-border-radius:99px; -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,.1)}


/* ACTIVE */
.activeBg {background-color:#b60005 !important; color:#fff !important;}
.activeColor {color:#b60005 !important;}
/* .activeBd {border-color:#cf0920 !important;} */

/* .hoverColor a:hover {color:#cf0920 !important;} */


.flex > * {
  flex: 1;
}

/** BEGIN CSS **/
@keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-moz-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-moz-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-webkit-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@-o-keyframes rotate-loading {
	0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
	100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}
@-moz-keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}
@-webkit-keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}
@-o-keyframes loading-text-opacity {
	0%  {opacity: 0}
	20% {opacity: 0}
	50% {opacity: 1}
	100%{opacity: 0}
}

.loadingContainerWrap {position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000000; background:rgba(0,0,0,0.5); display:none;}
.loadingContainerWrap.commonLeft {position:fixed; top:52px; bottom:45px; left:0; width:230px; height:auto; z-index:99999; background:rgba(0,0,0,0.4); display:none;}
.loadingContainer, .loading {box-sizing:border-box; height:120px; position:relative;  width:120px; border-radius:100%;}
.loadingContainer {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.loading {border:4px solid transparent; border-color: transparent #b81c21 transparent #b81c21; animation: rotate-loading 2s linear 0s infinite normal; transform-origin: 50% 50%;}
.loadingContainer .txt {font-size:12px; font-weight:500; position:absolute; text-align:center; text-transform:uppercase; top:12px;width:100%; color:#fff; letter-spacing:1px;}
.loadingContainer .img {padding:7px 0 10px 0; width:43px; height:57px; margin:0 auto; background:url(../images/common/logo_dyb_loading.png) no-repeat center 7px;}
.loadingContainer .img img {/* width:40px; */}

.loadingContainer:has(.asd) {width: 200px; height: 100px;}
.loadingContainer:has(.asd) .loading {width: 240px; height: 120px; animation:none; border-radius: 8px; border: 4px solid transparent; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.4);}

/*
.loadingTxt {display: flex; top: 0; left: 0; width: 100%; height: 100%;}
.loadingTxt {margin: auto;}
.loadingTxt .loadingBox {margin: auto; text-align: center; padding: 32px 24px; background: #fff; border-radius: 12px; box-shadow: 0 0 20px rgba(0,0,0,0.3); width: 240px; position: relative;}
.loadingTxt .loadingBox .logo {width: 50px; margin: auto;}
.loadingTxt .loadingBox .logo img {width: 100%;}
.loadingTxt .loadingBox .txt {margin-top: 24px; display: flex; white-space: nowrap; overflow: hidden; font-size: 14px; font-weight: 600;}
.loadingTxt .loadingBox .txt p {min-width: 100%; animation: marqueeMobileAni 10s linear infinite; box-sizing: border-box; padding:0 12px;}
@keyframes marqueeMobileAni {
	0% {transform: translateX(0%);}
	10% {transform: translateX(0%);}
	45% {transform: translateX(-100%);}
	55% {transform: translateX(-100%);}
	90% {transform: translateX(-200%);}
	100% { transform: translateX(-200%);}
}
@keyframes marqueeMobileAni2 {
	0% {transform: skew(10deg, 0);}
	50% {transform: skew(0deg, 0);}
	100% {transform: skew(10deg, 0);}
}
.loader {
	width: 45px; margin: 0 auto 24px auto;
	aspect-ratio: 2;
	--_g: no-repeat radial-gradient(circle closest-side,#B81C21 90%,#0000);
	background:
		var(--_g) 0%   50%,
		var(--_g) 50%  50%,
		var(--_g) 100% 50%;
	background-size: calc(100%/3) 50%;
	animation: l3 1.2s infinite;
}
@keyframes l3 {
	0%  {background-position:0%  50%, 50%  50%,100%  50%}
	16% {background-position:0%  20%, 50%  50%,100%  50%}
	32% {background-position:0%  80%, 50%  20%,100%  50%}
	48% {background-position:0%  50%, 50%  80%,100%  20%}
	64% {background-position:0%  50%, 50%  50%,100%  80%}
	80%, 100% {background-position:0%  50%, 50%  50%,100%  50%}
}
*/
.loadingTxt {display: flex; top: 0; left: 0; width: 100%; height: 100%;}
.loadingTxt .loadingBox {margin: auto; text-align: center; padding: 32px 24px; position: relative;}
.loadingTxt .loadingBox h3 {color: #fff; font-size: 22px; font-weight: 700; margin-top: 32px;}
.loadingTxt .loadingBox p {color: #fff; font-size: 16px; font-weight: 500; margin-top: 8px;}
.loadingTxt .loader {animation: loader 1.2s linear infinite;}
@keyframes loader {
	0%  {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

.curp {cursor: pointer !important;}
.keep-all {word-break: keep-all}