@font-face { font-family: 'NotoL'; src: url("../fonts/notokr-light.woff") format("woff"), url("../fonts/notokr-light.woff2") format("woff2"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'NotoR'; src: url("../fonts/notokr-regular.woff") format("woff"), url("../fonts/notokr-regular.woff2") format("woff2"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'NotoM'; src: url("../fonts/notokr-medium.woff") format("woff"), url("../fonts/notokr-medium.woff2") format("woff2"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'NotoB'; src: url("../fonts/notokr-bold.woff") format("woff"), url("../fonts/notokr-bold.woff2") format("woff2"); font-weight: normal; font-style: normal; }




html {
    width: 100%;
    height: 100%;
}

body {
    position: relative;
    height: 100%;
    font-family: "NotoM",sans-serif;
    font-weight: normal;
    font-size: 16px;
    color: #4E4E4E;
    letter-spacing: -0.01em;
    word-break: keep-all;
    line-height: 1.2;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    background: #F7F7F9; 

    
}

body,header,div,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p,form,fieldset,table,tr,th,td,a,input,span,section,article,figure {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all
}

ul,ol,li {
    list-style: none
}

img,fieldset {
    border: none;
    vertical-align: top
}

em {
    font-style: normal
}

legend,caption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    color: rgba(0,0,0,0);
    width: 0;
    height: 0;
    text-indent: -9999px
}

textarea,button {
    vertical-align: middle;
    font-family: "NotoR",sans-serif
}

textarea {
    color: #222;
    resize: none;
    overflow-y: auto;
    -ms-overflow-style: auto
}

select {
    font-family: "NotoR",sans-serif;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: -0.75px;
    border: 0;
    background: rgba(0,0,0,0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none
}

select::-ms-expand {
    display: none
}

input,textarea {
    vertical-align: middle;
    border: 0;
    background: rgba(0,0,0,0);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none
}

option {
    padding: 10px
}

input[type=radio],input[type=checkbox] {
    padding: 0;
    height: auto;
    font-size: 18px;
    border: 0;
    box-shadow: none
}

input[type=text]::-ms-clear {
    display: none
}

input::-moz-placeholder {
    font-family: "NotoR",sans-serif
}

input::placeholder {
    font-family: "NotoR",sans-serif
}

input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input:focus::-moz-placeholder {
    color: rgba(0,0,0,0)
}

input:focus::placeholder {
    color: rgba(0,0,0,0)
}

textarea::-moz-placeholder {
    font-family: "NotoR",sans-serif
}

textarea::placeholder {
    font-family: "NotoR",sans-serif
}

textarea:focus::-moz-placeholder {
    color: rgba(0,0,0,0)
}

textarea:focus::placeholder {
    color: rgba(0,0,0,0)
}
a {
    text-decoration: none;
    color: inherit
}

a:hover,a:focus,a:active {
    text-decoration: none
}

table {
    /*width: 100%;
    border-collapse: collapse;
    table-layout: fixed*/
}

button {
    overflow: visible;
    padding: 0;
    margin: 0;
    font-size: 14px;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    background: none
}

button:active {
    outline: none
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block;
    position: relative
}
body {
    --bg-y-position: 0px; 
}
body.home,
body.join {position: relative;}
body.home::before,
body.join::before {content: ""; position: fixed; right: 0; top:var(--bg-y-position); width:100%; height:360px; background: #438CEC url(../images/bg.png) no-repeat right top;}

/*header*/
.header { width: 100%; background: #fff; box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 8px; transition: all .7s ease; position: fixed;  z-index: 100;}
.header .inner { display: flex; align-items: center;  z-index: 1;  padding: 10px 20px /*padding:30px;*/}
.header .logo { display: block; width: 222px; height: 52px; background: url(../images/logo.svg) no-repeat center center/100% auto}

.expand .header .logo {background: url(../images/logo.svg) no-repeat center center}

.header .utils { display: flex;   margin-left: auto;  align-items: center; gap:20px; position: relative}
.header .utils .btn-click {display: inline-block; padding:7px 30px 7px 7px ; font-size: 15px; font-weight: 600;  color: #4E4E4E;  transition: color .3s ease} 
.header .utils .btn-click:hover{color:#438CEC;}
.header .utils .btn-click::before {content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%) rotate(0deg); background: url(../images/arrow_down.png) no-repeat center right; transition: transform 0.5s ease-in-out;}
.header .utils .btn-click:hover::before { content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%); background: url(../images/arrow_hover.png) no-repeat center right;}

.header .utils .btn-home {display: block; width: 30px; height: 30px;  background: url(../images/ic_home_black.png) no-repeat center center/100% auto; transition: background .3s ease}
.header .utils .btn-home:hover {background: url(../images/ic_home_hover.png) no-repeat center center/100% auto}

.header .utils .btn-user {display: block; width: 33px; height: 33px;  border-radius: 50%; background:#F8F8F8 url(../images/ic_user.png) no-repeat center bottom/auto auto; overflow: hidden; transition: background .3s ease}
.header .utils .btn-user:hover {background:#F8F8F8 url(../images/ic_user_hover.png) no-repeat center bottom/auto auto}

.header .utils .util-menu {position: relative;}
.header .utils .util-menu .list {position: absolute;  top: 40px;  left: calc(50%);  transform: translateX(-50%);  display: none;  padding: 10px;  width: auto; min-width: 100px;  background: #fff; border: solid 1px #dcdcdc;  border-radius: 5px;  z-index: 100;  box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 8px; }
.header .utils .util-menu .list li a { display: block;  padding: 4px; font-size:12.5px; color:#7c7c7c; font-weight: normal;}
.header .utils .util-menu .list li:first-child a { padding-top: 0}
.header .utils .util-menu .list li:last-child a {padding-bottom: 0}
.header .utils .util-menu .list li:hover a {color: #438CEC}
.header .utils .util-menu.active .btn-click {color: #438CEC}
.header .utils .util-menu.active .btn-click::before { background: url(../images/arrow_hover.png) no-repeat center right; transform: rotate(180deg) translateY(50%);}



.container {background: #F7F7F9; display: flex; justify-content: flex-end; padding-top: 72px;}

.sidebar  {position: fixed; left: 0; top:0; z-index:10; background: #fff; width:280px; min-height: calc(100vh - 72px); padding-top: 72px; /*  -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;*/}
.sidebar ul {width: 100%;}
.sidebar ul li {background: #fff;}
.sidebar ul.depth1 > li:first-child a::before {background-image: none;;}

.sidebar ul li a {display: block; padding:20px; color:#8B8B8B; position: relative;}
.sidebar ul li a::before {content: ""; width: 24px; height: 24px; right:20px; position: absolute; background: url(../images/arrow_down.png) no-repeat center right; transform: rotate(0deg); transition: transform 0.5s ease-in-out;}
.sidebar ul li a:hover {background-color: #DCEBFF;  color:#267EF2;}
.sidebar ul li a:hover::before {content: ""; width: 24px; height: 24px; right:20px; position: absolute; background: url(../images/arrow_hover.png) no-repeat center right; }
.sidebar ul li.active a {background-color: #DCEBFF;  color:#267EF2;}
.sidebar ul li.active a::before {content: ""; width: 24px; height: 24px; right:20px; position: absolute; background: url(../images/arrow_hover.png) no-repeat center right; transform: rotate(180deg); }

.sidebar ul li.active ul {display: block;}
.sidebar ul li.active li a {background: transparent; color:#BDBDBD;}
.sidebar ul li.active li a::before {background: none;}
.sidebar ul li.active li.active a {background: transparent; color: #267EF2;}
.sidebar ul li ul {padding: 4px 0; display: none;}
.sidebar ul li li a {font-size:14px; padding:8px 20px; font-weight: 500; background: transparent; color:#BDBDBD;}
.sidebar ul li li a:hover {color: #267EF2;}


.container .content-title {color: #4E4E4E; font-family: 'NotoB'; font-size: 20px; font-style: normal; font-weight: normal; line-height: normal;  letter-spacing: -1px; margin-bottom: 20px;;}
.container .content {padding:40px; width: calc( 100% - 280px); }
.container .content .search-area {border-radius: 5px; border: 1px solid #e8eaeb; background: #FFF; padding:30px 40px; margin-bottom: 30px;}

.container .content .grid-panel {border-radius: 5px;  background: #FFF; overflow: hidden;}
.container .content .grid-panel-header {}
.container .content .grid-panel-header .total {color: #000; font-size: 14px; font-weight: 700;}
.container .content .grid-panel-body {border-radius: 5px;}
.container .content .grid-panel-footer {}

#gridContainer2 h4 {font-family:'NotoB'; color: #4E4E4E; font-size: 18px;  font-style: normal;  font-weight: normal; line-height: normal; letter-spacing: -0.54px;  display: flex; align-items: center;}
#gridContainer2 h4 .btn-more {width: 24px; height: 24px; background: url(../images/ic_arrow_right.png) no-repeat center center; margin-left: 10px;}
#gridContainer2 h4 .btn-more:hover {opacity: .5;}
#gridContainer2 .dx-datagrid-header-panel {padding:10px 20px 0 20px; border-radius: 5px 5px 0 0; border-left:none; border-top: none; border-right: none} 
#gridContainer2 .dx-gridbase-container > .dx-datagrid-rowsview { border-radius: 0 0 5px 5px;}

.copy { text-align:center; color: #BCBCBC; font-family:'NotoR';  font-size: 13px; font-style: normal;  font-weight: 400;  line-height: normal; letter-spacing: -0.39px; padding-top: 40px;}

#fullPage {position: absolute; left:270px; top:0; width:15px; height:100vh; background: transparent;; z-index: 2000; cursor: pointer;}
#fullPage::before {content: ""; position: absolute; left: 10px; width:1px; height:100vh; background:transparent;}
#fullPage:hover::before {background: #4C9AFF ;}
#fullPage:hover .btn-fullpage {background: #4C9AFF url(../images/ic_arrow_white.png) no-repeat 6px center; color:#FFFFFF; opacity: 1;}
.btn-fullpage { position: absolute; top:45%; left: 10px;  transform: translateY(-45%); border-radius: 0 5px 5px 0px; background: #FFF url(../images/ic_arrow_gray.png)no-repeat 6px center;  padding: 18px 9px; opacity:0; box-shadow: rgba(0, 0, 0, 0.03) 1px 0 2px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.btn-fullpage:hover {background-color: #4C9AFF ; ; color:#FFFFFF; opacity: 1;}

body.expand .header .logo,
body.join.expand .header .logo  {background: url(../images/logo_white.svg) no-repeat center center}
body.expand #fullPage::before {background: #4C9AFF;}
body.expand .container #fullPage .btn-fullpage {background: #4C9AFF url(../images/ic_arrow_right_white.png)no-repeat -3px center; color:#FFFFFF; opacity: 1;}

.btn-area {gap: 10px; display: flex;  flex-wrap: wrap;}
.btn {font-family:'NotoM'; border-radius: 4px; background-color: #438CEC; background-position: center center; background-repeat: no-repeat; border:solid 1px #438CEC; color: #FFF; letter-spacing: -0.75px; padding:4px 10px; transition: background 0.3s, color 0.3s, border-color 0.3s;}
.btn:hover {background-color: #EAF3FF; border:solid 1px #438CEC; color:#438CEC;}
.btn:active {background-color: #438CEC; border:solid 1px #438CEC; color:#fff;}
.btn:disabled {background-color: #C2DDFF; border:solid 1px #C2DDFF; color:#fff;}

.btn-black {background-color: #404040; border:solid 1px #404040; color: #FFF;}
.btn-black:hover {background-color: #F0F0F0; border:solid 1px #4D4D4D; color:#4D4D4D;}
.btn-black:active {background-color: #F0F0F0; border:solid 1px #4D4D4D; color:#4D4D4D;}
.btn-black:disabled {background-color: #AFB0B0; border:solid 1px #AFB0B0; color:#FFF;}

.btn-gray {background-color: #F7F7F9; border:solid 1px #F7F7F9; color: #4d4d4d;}
.btn-gray:hover {background-color: #F7F7F9; border:solid 1px #438CEC; color:#4D4D4D;}
.btn-gray:active {background-color: #F0F0F0; border:solid 1px #4D4D4D; color:#4D4D4D;}
.btn-gray:disabled {background-color: #F7F7F9; border:solid 1px #F7F7F9; color:#A4A4A4;}

.btn-xlg {padding:13px 20px; font-size: 15px;}
.btn-lg {padding:8px 20px; font-size: 15px;}
.btn-sm {padding:4px 10px; font-size: 13px;}

.btn-icon {border-radius: 4px; border: 1px solid #F7F7F9; background-color: #F7F7F9; background-position: center center; background-repeat: no-repeat; padding: 17px;}
.btn-icon:hover {border: 1px solid #438CEC; background-color: #F7F7F9;}
.btn-icon:active {border: 1px solid #438CEC; background-color: #438CEC;;}
.btn-icon:disabled {border: 1px solid #F7F7F9; background-color: #F7F7F9;}

.ic-plus {background-image: url(../images/ic_plus.png);}
.ic-plus:hover {background-image: url(../images/ic_plus_hover.png);}
.ic-plus:active {background-image: url(../images/ic_plus_active.png);}
.ic-plus:disabled {background-image: url(../images/ic_plus_disabled.png);}

.ic-save {background-image: url(../images/ic_check.png);}
.ic-save:hover {background-image: url(../images/ic_check_hover.png);}
.ic-save:active {background-image: url(../images/ic_check_active.png);}
.ic-save:disabled {background-image: url(../images/ic_check_disabled.png);}

.btn.btn-icon,
.btn.btn-sm.btn-icon {padding: 17px;}
.btn.btn-lg.btn-icon {padding: 17px 19px;}
.btn.btn-xlg.btn-icon {padding: 17px 24px;}

.label {color:#4e4e4e; font-family: 'NotoM'; font-size:14px; font-weight: normal; margin-bottom: 10px;  display: flex;  gap: 4px;}
.label .red-color {display: inline-block;   background: #EC6143; width: 5px; height: 5px; border-radius: 50%;}

.red-color {display: inline-block;   background: #EC6143; width: 5px; height: 5px; border-radius: 50%;}


.form-group {display: flex; gap: 10px; width: 100%;}
.form-group.date-wrap {position: relative;}
.form-group.date-wrap::before {content:"~"; width:20px; height:20px; text-align: center; position: absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%);}
.form-input {position: relative; width: 100%;}
.form-input+.form-input { margin-left: 10px}
.form-input input {width:100%; border: 1px solid #E1E1E1;   border-radius: 4px; background: #FFF; padding: 9px 12px; line-height: 1; letter-spacing: -0.01em; color: #444; font-size: 14px; font-style: normal; font-weight: 500;}
.form-input input::-moz-placeholder { font-weight:500;  font-size: 14px;  line-height: 1;  letter-spacing: -0.01em; color: #AAA;}
.form-input input::placeholder {font-weight: 500; font-size: 14px;  line-height: 1;  letter-spacing: -0.01em;  color:#AAA;}
.form-input input:focus { outline: none; border: solid 1px #438CEC;}
.form-input input:disabled {background:#F6F6F6;}
.form-input input[type=file] { padding: 0; height: 100%; opacity: 0}
.form-input.write {border: 1px solid #151721}
.form-input.error {border: 1px solid red}
.form-input.date {position: relative;}
.form-input.date::after {content: ""; position: absolute; right:10px; top:10px; width:24px; height:24px; background-image:url(../images/ic_calendar.png)!important; background-repeat: no-repeat !important;}



.form-area {position: relative; padding: 18px;  width: 100%; height: 270px;  border-radius: 4px;  border: 1px solid rgba(21,23,33,.2)}
.form-area textarea {width: 100%;  height: 100%;  font-weight: 600;    line-height: 1;  letter-spacing: -0.01em; color: #151721; outline: 0 }
.form-area textarea::-moz-placeholder {font-weight: 600;  line-height: 1; letter-spacing: -0.01em; color: rgba(21,23,33,.55)}
.form-area textarea::placeholder { font-weight: 600;  line-height: 1;  letter-spacing: -0.01em;  color: rgba(21,23,33,.55)}
.form-area.write {border: 1px solid #151721}
.form-area.error {border: 1px solid red}


.form-select {position: relative; }
.form-select+.form-select { margin-left: 30px}
.form-select select {position: relative; border: 1px solid #E1E1E1; border-radius: 4px;  -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url(../images/arrow_down.png) no-repeat 95% center; padding: 9px 65px 9px 12px; min-height: 36px;; line-height: 1; letter-spacing: -0.01em; color: #444; font-size: 14px; font-style: normal; font-weight: 500;}
.form-select select option::-moz-placeholder { font-weight:500;  font-size: 14px;  line-height: 1;  letter-spacing: -0.01em; color: #AAA;}
.form-select select option::placeholder {font-weight: 500; font-size: 14px;  line-height: 1;  letter-spacing: -0.01em;  color:#AAA;}

.form-select select:focus { outline: none; border: solid 1px #438CEC;}
.form-select select:disabled {background:#F6F6F6;}
.form-select select:required:invalid,
.form-select select:hidden,
.form-select select:selected,
.form-select select:disabled {font-weight: 500; font-size: 14px;  line-height: 1;  letter-spacing: -0.01em;  color:#AAA;}
.form-select select option {padding: 4px 0; line-height: 20px;;}
.form-select.write {border: 1px solid #151721}
.form-select.error {border: 1px solid red}

.form-checkbox-wrap { position: relative; display: flex; }
.form-checkbox-wrap .form-checkbox+.form-checkbox { margin-left: 30px}
.form-checkbox-wrap .form-checkbox input { position: absolute;  top: 0;  left: 0;  z-index: 1; width: 24px;  height: 24px; opacity: 1; cursor: pointer}
.form-checkbox-wrap .form-checkbox input+label {background: url(../images/ic_checkbox.png) left center no-repeat; position: relative; display: inline-block;  padding: 0 0 0 30px; font-size:15px; font-weight: 400; line-height: 24px; min-height: 24px; color: #4E4E4E;  cursor: pointer}
.form-checkbox-wrap .form-checkbox input:hover+label {background: url(../images/ic_checkbox_hover.png) left center no-repeat;}
.form-checkbox-wrap .form-checkbox input:checked+label {background: url(../images/ic_checkbox_checked.png) left center no-repeat;} 
.form-checkbox-wrap .form-checkbox input:disabled:checked+label {background: url(../images/ic_checkbox_checked_disabled.png) left center no-repeat;}
.form-checkbox-wrap .form-checkbox input:disabled+label {background: url(../images/ic_checkbox_disabled.png) left center no-repeat;}
.form-checkbox-wrap .form-checkbox input:disabled {cursor: not-allowed;}


.form-radio-wrap { position: relative; display: flex; }
.form-radio-wrap .form-radio+.form-radio { margin-left: 30px}
.form-radio-wrap .form-radio input { position: absolute;  top: 0;  left: 0;  z-index: 1; width: 24px;  height: 24px; opacity: 1; cursor: pointer}
.form-radio-wrap .form-radio input+label {background: url(../images/ic_radio.png) left center no-repeat; position: relative; display: inline-block;  padding: 0 0 0 30px; font-size:15px; font-weight: 400; line-height: 24px; min-height: 24px; color: #4E4E4E;  cursor: pointer}
.form-radio-wrap .form-radio input:hover+label {background: url(../images/ic_radio_hover.png) left center no-repeat;}
.form-radio-wrap .form-radio input:checked+label {background: url(../images/ic_radio_checked.png) left center no-repeat;} 
.form-radio-wrap .form-radio input:disabled:checked+label {background: url(../images/ic_radio_checked_disabled.png) left center no-repeat;}
.form-radio-wrap .form-radio input:disabled+label {background: url(../images/ic_radio_disabled.png) left center no-repeat;}
.form-radio-wrap .form-radio input:disabled {cursor: not-allowed;}

.header.fixed .util-menu.active .btn-click {color: #438CEC;}
.header.fixed .utils .util-menu.active .btn-click {color: #438CEC;}
.header.fixed .utils .util-menu.active .btn-click::before {rotate(180deg); background: url(../images/arrow_hover.png) no-repeat center right;}


.header .utils .btn-home {display: block; width: 30px; height: 30px;  background: url(../images/ic_home_black.png) no-repeat center center/100% auto; transition: background .3s ease}
.header .utils .btn-home:hover {background: url(../images/ic_home_hover.png) no-repeat center center/100% auto}


.notice-box {padding-bottom: 0;}
.notice-box h3 {color: #FFF;  font-family: 'NotoB'; font-size: 18px; font-style: normal; font-weight: normal;  line-height: normal; letter-spacing: -1px; display: flex; align-items: center; margin-bottom: 15px;}
.notice-box h3 button {width: 24px; height: 24px;}
.notice-box h3 button:hover {opacity: .5;}
.notice-box h3 .btn-prev  {background: url(../images/arrow_prev.png) no-repeat center center; margin-left:20px;}
.notice-box h3 .btn-next {background: url(../images/arrow_next.png) no-repeat center center; margin-left: 5px;}
.notice-box .slick-list {margin-left:-18px}
.notice-box .slick-track {display: flex; gap:30px; padding-bottom: 40px;  }
.notice-box .box {background: #fff; min-width: 200px; min-height: 144px; max-height: 144px; border-radius: 5px; display: inline-block;  flex: 1; padding: 35px 35px 30px 35px;  cursor: pointer; }
.notice-box .box:hover {box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04), 0px 16px 24px 0px rgba(0, 0, 0, 0.10);}
.notice-box .box:hover p{color:#202020; text-decoration: underline;}
.notice-box .box p {font-size: 18px; font-family: 'NotoM'; font-weight: normal; color: #4E4E4E; min-height:44px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom:15px;}
.notice-box .box .date{color: #AEAEAE;  font-family: 'NotoL'; font-size: 15px; font-style: normal; font-weight: normal; line-height: normal;}


.work-box {padding-bottom: 40px;}
.work-box h3 {color: #4E4E4E;  font-family: 'NotoB'; font-size: 18px; font-style: normal; font-weight: normal; line-height: normal; letter-spacing: -1px; display: flex; align-items: center; margin-bottom: 15px;}
.work-box h3 button {width: 24px; height: 24px;}
.work-box h3 button:hover {opacity: .5;}
.work-box h3 .btn-more {background: url(../images/ic_arrow_right.png) no-repeat center center; margin-left: 20px;}

.work-box ul {display: flex; gap: 30px; justify-content: space-between; margin-bottom: 30px;}
.work-box ul .box {background: #fff; min-width: 200px; border-radius: 5px; display: inline-block; padding: 22.5px 35px; flex: 1;  }
.work-box ul .box:hover {box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04), 0px 16px 24px 0px rgba(0, 0, 0, 0.10);}
.work-box ul .box h4 {color: #4E4E4E; font-family: 'NotoB'; font-size: 18px; font-style: normal; font-weight: normal;  line-height: normal; letter-spacing: -0.9px; margin-bottom:10px;}
.work-box ul .box p {color: #438CEC;  font-family: 'NotoB'; font-size: 42px; font-style: normal; font-weight: normal;  line-height: normal; letter-spacing: -1.26px;}
.work-box ul .box p span {color: #438CEC; font-family: 'NotoM'; font-size: 20px; margin-left: 0;}
.work-box ul .box:hover a{text-decoration: underline;}

.chart-wrap {display: flex; flex-wrap: nowrap;  width: 100%; justify-content: space-between;  gap: 30px; }
.chart-wrap .box {flex: 1; background: #fff; border-radius: 5px; padding:20px 35px; position: relative;}
.chart-wrap .box h4 {color: #4E4E4E; font-family: 'NotoB'; font-size: 18px; font-style: normal; font-weight: normal;  line-height: normal; letter-spacing: -0.9px; margin-bottom:30px;}
.chart-wrap .box .date {color:#B5B5B5; font-family: 'NotoR'; font-size:14px; position: absolute; right: 35px; top:20px;}

.row.between {align-items: center;  justify-content: space-between;}
.row {display: flex; gap: 20px;  margin-bottom:20px}
.row .col{margin-bottom: 20px;  display: flex; align-items: center;  justify-content: space-between;}
.row:last-child .col {margin-bottom: 0;}
.row:last-child {margin-bottom: 0;}



.container .content .search-area dl {margin-bottom:12px}
.container .content .search-area dl:last-child {margin-bottom:0}
.container .content .search-area dt {color:#363A42; font-family: 'NotoM'; font-size:14px; font-weight: normal; margin-bottom: 8px;}




.tabs-wrap {width: 100%;}
.tabs-wrap .tabs {display: flex; width:100%; border-bottom:solid 1px #E7E7E9;}
.tabs-wrap .tab {padding: 10px 30px 20px 30px; cursor: pointer; /*border: 1px solid #ccc;*/ color: #444; font-family: 'NotoM';  font-size: 16px; font-style: normal; font-weight: normal; line-height: normal; letter-spacing: -0.8px; position: relative;}
.tabs-wrap .tab.active::before {content:""; width:100%; height:3px; position: absolute; bottom:0; left:0; background-color: #438CEC;}
.tabs-wrap .tab-content-wrap .content-wrap {padding: 15px;/* border: 1px solid #ccc; margin-top: -1px;*/ }
.tabs-wrap .hidden { display: none;}


.home > h1 {background: #fff;}
.home h2 {color: #FFF; font-family: 'NotoM'; font-size: 28px;  font-style: normal; font-weight: normal;  line-height: normal; letter-spacing: -1.4px; margin-bottom: 40px;}

.home .header {background-color: transparent; box-shadow: none;}
.home .header { width: 100%; background:transparent; box-shadow:none; transition: all .7s ease; position: fixed;  z-index: 100;}

.home .header .utils { display: flex;   margin-left: auto;  align-items: center; gap:20px; position: relative}
.home .header .utils .btn-click {display: inline-block; padding:7px 30px 7px 7px ; font-family: 'NotoM'; font-size: 15px; font-weight: normal;  color: #fff;  transition: color .3s ease} 
.home .header .utils .btn-click:hover{color:#fff; text-decoration: underline;}
.home .header .utils .btn-click::before {content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%) rotate(0deg); background: url(../images/arrow.png) no-repeat center right; transition: transform 0.5s ease-in-out;}
.home .header .utils .btn-click:hover::before { content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%); background: url(../images/arrow.png) no-repeat center right;}
.home .header .utils .btn-home {display: block; width: 30px; height: 30px;  background: url(../images/ic_home.png) no-repeat center center/100% auto; transition: background .3s ease}
.home .header .utils .btn-home:hover {background: url(../images/ic_home.png) no-repeat center center/100% auto}
.home .header .utils .btn-user {display: block; width: 33px; height: 33px;  border-radius: 50%; background:#F8F8F8 url(../images/ic_user.png) no-repeat center bottom/auto auto; overflow: hidden; transition: background .3s ease}
.home .header .utils .btn-user:hover {background:#F8F8F8 url(../images/ic_user_hover.png) no-repeat center bottom/auto auto}

.home .header .utils .util-menu.active .btn-click {color: #fff}
.home .header .utils .util-menu.active .btn-click::before { background: url(../images/arrow.png) no-repeat center right; transform: rotate(180deg) translateY(50%);}


.home .header.fixed  {background-color: #fff; box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 8px;}
.home .header.fixed .utils .btn-home {display: block; width: 30px; height: 30px;  background: url(../images/ic_home_black.png) no-repeat center center/100% auto; transition: background .3s ease}
.home .header.fixed .utils .btn-home:hover {background: url(../images/ic_home_black.png)no-repeat center center/100% auto}

.home .header.fixed .utils .util-menu.active .btn-click {color: #438CEC}
.home .header.fixed .utils .util-menu.active .btn-click::before { background: url(../images/arrow_hover.png) no-repeat center right; transform: rotate(180deg) translateY(50%);}

.home .header.fixed .utils .btn-click {display: inline-block; padding:7px 30px 7px 7px ; font-size: 15px; font-family: 'NotoM';  font-weight: normal;  color: #4E4E4E;  transition: color .3s ease} 
.home .header.fixed .utils .btn-click:hover{color:#438CEC;}
.home .header.fixed .utils .btn-click::before {content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%) rotate(0deg); background: url(../images/arrow_down.png) no-repeat center right; transition: transform 0.5s ease-in-out;}
.home .header.fixed .utils .btn-click:hover::before { content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%); background: url(../images/arrow_hover.png) no-repeat center right;}


.home.expand .header.fixed .logo {background: url(../images/logo.svg) no-repeat center center}
.home.expand .header .logo {background: url(../images/logo_white.svg) no-repeat center center}


.home .container {padding-top:0}
.home .container .content{padding:0 0 40px 0;     width: 100%; position: relative;}
.home .container .content-header{/*position: fixed; left: 0; top:0;*/ width: 100%; padding:40px; max-height: 360px; min-height: 360px;}
.home .container .content-body {width:95%; max-width:1280px; padding:130px 0 0 0; margin:0 auto 0 auto; position: relative;}




.join .header {background: transparent; box-shadow: none; position: absolute;}
.join .header .utils { display: flex;   margin-left: auto;  align-items: center; gap:20px; position: relative}
.join .header .utils .btn-click {display: inline-block; padding:7px 30px 7px 7px ; font-family: 'NotoM'; font-size: 15px; font-weight: normal;  color: #fff;  transition: color .3s ease} 
.join .header .utils .btn-click:hover{color:#fff; text-decoration: underline;}
.join .header .utils .btn-click::before {content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%) rotate(0deg); background: url(../images/arrow.png) no-repeat center right; transition: transform 0.5s ease-in-out;}
.join .header .utils .btn-click:hover::before { content: ""; width: 24px;  height: 24px; position: absolute; right:0; top:50%; transform: translateY(-50%); background: url(../images/arrow.png) no-repeat center right;}
.join .header .utils .btn-home {display: block; width: 30px; height: 30px;  background: url(../images/ic_home.png) no-repeat center center/100% auto; transition: background .3s ease}
.join .header .utils .btn-home:hover {background: url(../images/ic_home.png) no-repeat center center/100% auto}
.join .header .logo {background: url(../images/logo_white.svg) no-repeat center center}

.join .container {padding-top:0}
.join .container .content{padding:0 0 40px 0; position: relative;     width: calc(100%);}
.join .container .content-header{/*position: fixed; left: 0; top:0;*/ width: 100%; padding:40px; max-height: 360px; min-height: 360px;}
.join .container .content-body {width:1280px; padding:130px 0 0 0; margin:0 auto 0 auto; position: relative; display: flex; flex-direction: column; gap: 30px;}

.join h2 {color:#FFF; font-size:40px; text-align: center; margin-bottom: 60PX;}
.join h3 {color: #4E4E4E;    justify-content: center;  font-family: 'NotoB'; font-size: 18px; font-style: normal; font-weight: normal; line-height: normal; letter-spacing: -1px; display: flex; align-items: center; margin-bottom: 30px;}

.join .agree-box {background: #fff; border-radius: 5px; padding: 50px 35px 30px 35px; position: relative;}
.join .agree-box .box-wrap {background: #F5F5F5; padding:30px; border-radius: 5px; margin-bottom: 30px;}
.join .agree-box .box-wrap textarea {width:100%; height: 320px; color:#303030; font-size:14px;}
.join .agree-box .form-radio labe {color: #666;;}

.join .join-item-wrap {background: #fff; border-radius: 5px; padding: 50px 35px 30px 35px; position: relative;}
.join .join-item-wrap dl {margin-bottom:12px; width:100%;}
.join .join-item-wrap dl:last-child {margin-bottom:0}
.join .join-item-wrap dt {color:#4e4e4e; font-family: 'NotoM'; font-size:14px; font-weight: normal; margin-bottom: 10px;  display: flex;  gap: 4px;}
.join .join-item-wrap dt .red-color {display: inline-block;   background: #EC6143; width: 5px; height: 5px; border-radius: 50%;}
.join .join-item-wrap dd {width:100%;}
.join .join-item-wrap dl.hori {display: flex; align-items: center;  gap: 50px;}
.join .join-item-wrap dl.hori dt {margin-bottom:0;}
.join .join-item-wrap .row.between {align-items: center;  justify-content: space-between;}
.join .join-item-wrap .row {display: flex;gap: 20px; margin-bottom: 0;}
.join .join-item-wrap .row .col{ flex: 1; margin-bottom: 20px;  display: flex; align-items: center;  justify-content: space-between; width: 100%;}
.join .join-item-wrap .row:last-child .col {margin-bottom: 0;}
.join .join-item-wrap .row:last-child {margin-bottom: 0;}
.join .join-item-wrap .join-gorup {border-bottom: solid 1px #EFEFEF; padding-bottom: 30px; margin-bottom: 30px;}
.join .join-item-wrap .join-gorup:last-child {border-bottom:none; padding-bottom: 0;}
.join .join-gorup .al-left {justify-content: flex-start}
.join .btn-area {justify-content: center;}


.login {background:#F7F7F9 url(../images/bg.jpg) no-repeat center top; background-size:cover;}
.login .header .logo,
.login.expand .header .logo {background: url(../images/logo_color_white.svg);}
.login .header,
.login.collapse .header,
.login.expand .header{background: transparent; box-shadow: none;}
.login .container {background: transparent; justify-content: center; gap: 390px; padding-top: 210px; padding-bottom:230px} 
.login .text-wrap {color: #fff; margin-top:145px;} 
.login .text-wrap .title span{ color: #FFF; font-family:'NotoB'; font-size: 40px; font-style: normal; font-weight: normal; line-height: 60px;  letter-spacing: -1.2px;}
.login .text-wrap .title {color: #FFF;  font-family:'NotoR'; font-size: 40px; font-style: normal; font-weight: 400; line-height: 60px; letter-spacing: -1.2px;}
.login .text-wrap .description {margin-top:20px; color: #DBDBDB; font-family:'NotoL';  font-size: 20px; font-style: normal; font-weight: normal; line-height: normal; letter-spacing: -0.6px;}

.login .login-wrap {border-radius: 15px; min-width: 480px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px); display: inline-flex; padding: 70px 60px; flex-direction: column; gap: 30px;}
.login .login-wrap h2 {color: #FFF;text-align: center; font-family:'NotoB'; font-size: 40px; font-style: normal; font-weight: normal; line-height: normal;}
.login .login-wrap .form-group-wrap {opacity: 1; background-color: transparent;}
.login .login-wrap .form-group-wrap .txt {margin-top:-5px; color: #fff; font-family:'NotoR'; font-size: 14px;  font-style: normal;  font-weight: normal; line-height: normal; letter-spacing: -0.42px;}
.login .login-wrap .form-group {flex-direction: column; gap: 20px; margin-bottom: 20px;;}
.login .login-wrap .form-group:last-child { margin-bottom: 0;}
.login .login-wrap .form-group .form-input input {padding:11px 12px}
.login .login-wrap .form-group .form-input+.form-input {margin-left:0;}
.login .login-wrap .form-checkbox label{color: #fff; opacity: .7;  font-family:'NotoR'; font-size: 14px; line-height: 24px; font-style: normal;font-weight: normal; line-height: normal; letter-spacing: -0.39px;}
.login .login-wrap .btn {text-align: center; opacity: 1;}
.login .login-wrap .link-wrap {display: flex; gap: 40px; justify-content: center;}
.login .login-wrap .link-wrap a {color: #fff; opacity: .7; position: relative; font-family:'NotoR';  font-size: 14px;  font-style: normal;  font-weight: normal;  line-height: normal;   letter-spacing: -0.42px;}
.login .login-wrap .link-wrap a::after {content: ''; position: absolute; right: -20px; top:58%;  transform: translateY(-58%); width:1px; height:12px; background:#fff; opacity: .7; }
.login .login-wrap .link-wrap a:last-child::after {display: none;}


.dx-viewport,
.dx-datagrid {border-radius: 5px;}
.dx-datagrid-header-panel {padding:10px 20px 0 20px; border-radius: 5px 5px 0 0; border-left: 1px solid #e8eaeb; border-top: 1px solid #e8eaeb; border-right: 1px solid #e8eaeb;} 
.dx-datagrid-header-panel .dx-toolbar {}
.dx-toolbar .dx-toolbar-items-container {}
.dx-toolbar .dx-toolbar-items-container .total {font-family:'NotoM'; color: #4E4E4E; font-size: 14px; font-weight: normal;}
.dx-datagrid-pager { border-radius: 0 0 5px 5px; border-left: 1px solid #e8eaeb; border-right: 1px solid #e8eaeb; border-bottom: 1px solid #e8eaeb;}
.dx-datagrid-headers {color: #828B97;  background: #F8F8F8;}

#chart { height: 200px;  width:100%;}
#pie { height: 200px; width:100%;}
.gridContainer {height:400px}

@media (max-width: 1280px) {
    /* .sidebar .{display: none; }
    .container .content {padding: 40px; width: calc( 100%);} */
    .home.collapse .container .content {width:calc( 100% - 0)}
    .container .content {width:calc( 100% - 0)}
    .home .header .logo {background: url(../images/logo_white.svg) no-repeat center center}
    .home .logo {background: url(../images/logo_white.svg) no-repeat center center}
    .home.expand .sidebar {margin-left:-280px;}
    .home.expand .container .content {width:100%}

    .home.collapse .header .logo {background: url(../images/logo.svg) no-repeat center center}

}


.btnMargin {
    /*20230825 ¸¶Áø ºÎ¿©¿ë jgcho*/
    margin-left: 10px;
}

.tableInput, .tableInput td {
    /*20230825 input¹Ú½º Å׵θ®¿ë jgcho*/
    border-radius: 4px;
}