@charset "euc-kr";
@import url("/_pub/ITN/assets/css/_reset.css");
@import url("/_pub/ITN/assets/css/_form.css");
@import url("/_pub/ITN/assets/css/_table.css");
@import url("/_pub/ITN/assets/css/_layout.css");
@import url("/_pub/ITN/assets/css/_pop.css");


/******************************
        ´ë½Ãº¸µå
******************************/
/* ÅؽºÆ® */
.wrap-int .title-h1 {font-weight: 600; font-size: var(--fz-30); color: var(--color-01);}
.wrap-int .title-h2 {font-weight: 700; font-size: var(--fz-20); color: var(--color-01);}
.wrap-int .title-h3 {font-weight: 400; font-size: var(--fz-20); color: var(--color-03);}
.wrap-int .text-p1 {font-weight: 500; font-size: var(--fz-28); color: var(--color-01);}
.wrap-int .title-sub {font-weight: 400; font-size: var(--fz-20); color: var(--color-03);}
/* ·¹À̾ƿô */
.wrap-int.dashboard .content-body {margin-top: 5rem;}
.dashboard-top {display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.dashboard-middle {margin-top: 2.4rem;}
.dashboard-row {display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; margin: 0 -1rem;}
.dashboard-middle .text-p1 {display: inline-flex; align-items: center;}
.dashboard-middle .text-p1 .unit {font-size: var(--fz-26);}
/* °á°ú º¸µå */
.dashboard-result {flex: 1; margin: 0 1rem; padding: 3.3rem 4rem 4rem; border: 1px solid #EBEBEB; border-radius: 4rem;}
.dashboard-result:last-child {min-width: 58.8rem;}
.dashboard-result.solid {background-color: #E6F3FF; border-color: #E6F3FF; transition: all 0.5s;}
.dashboard-result .unit {padding-left: 0.2rem; font-family: var(--prtd); font-size: var(--fz-26);}
.dashboard-result .form-row {margin-right: -0.8rem;}
.dashboard-result .form-ele {width: 18.1rem; min-height: 3.6rem; line-height: 3.6rem;}
.dashboard-result .space {margin: 0 0.8rem; font-weight: 500; font-size: var(--fz-28); line-height: 3.6rem;}
.dashboard-result .form-ele .inp.datepicker {min-height: 3.6rem; height: 3.6rem; padding-left: 0; padding-right: 3.2rem; background-color: transparent; font-size: var(--fz-28); border: none; text-align: right; color: var(--color-01);}
.dashboard-result .form-ele .ui-datepicker-trigger {height:3.6rem; background-position: right center;}

/* °á°ú º¸µå>¾ÆÀÌÄÜ */
[class*=icon-].dashboard-top:after {content: ''; display: block; width: 4rem; height: 4rem; margin-left: auto; border-radius: 4rem;}
.dashboard-top.icon-won:after {background: url(/_pub/ITN/assets/img/icon-24-won.svg) no-repeat center / 2.4rem auto var(--color-blue10);}
.dashboard-top.icon-calendar:after {background: url(/_pub/ITN/assets/img/icon-24-calendar.svg) no-repeat center / 2.4rem auto var(--color-blue10);}
.dashboard-top.icon-doc-check:after {background: url(/_pub/ITN/assets/img/icon-24-document-check.svg) no-repeat center / 2.4rem auto var(--color-blue10);}
/* ±×·¡ÇÁ>Ä«µå */
.dashboard-graph {overflow: hidden; height: 43.8rem; padding: 3.9rem 4rem 4rem; background-color: var(--color-07); border-radius: 4rem;}
.dashboard-graph .graph-header {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-bottom: 2.7rem;}
.dashboard-graph .title-h2 {display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.dashboard-graph .title-sub:before {content: ''; display: inline-block; width: 1px; height: 1rem; margin: 0 0.8rem; background-color: var(--color-06);}
.dashboard-graph .graph-index {display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-left: auto;}
.dashboard-graph .graph-index > [class*=index-] {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; font-size: var(--fz-12); color: var(--color-03); font-weight: 400;}
.dashboard-graph .graph-index > [class*=index-]:not(:last-child) {margin-right: 1.2rem;}
.dashboard-graph .graph-index > [class*=index-]:before {content: ''; display: block; width: 1.6rem; height: 1.6rem; margin-right: 0.4rem; border-radius: 0.6rem; background-color: gray;}
.dashboard-graph .graph-index .index-pattern:before {background: url(/_pub/ITN/assets/img/bg_dashboard_graph_01.jpg) no-repeat left bottom; background-size: cover;}
.dashboard-graph .graph-index .index-posi:before {background: linear-gradient(180deg, #4c88ff 0%, #72adff 100%);}
.dashboard-graph .graph-index .index-nega:before {background: linear-gradient(180deg, #ff6975 0%, #ff6c9d 100%);}
.graph-container {position: relative; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; width: 100%;}
.graph-container:after {content: ''; position: absolute; z-index: 1; left: 0; bottom: 3.8rem; width: 100%; border-bottom: 1px solid #EBEBEB; pointer-events: none;}
.graph-container .graph-area {display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 30.6rem;}
.graph-container .graph-area:not(:last-child) {margin-right: 6.6rem;}
.graph-container .graph-area .graph-title {order: 1; margin-top: 1.6rem; font-size: var(--fz-16); color: var(--color-03); font-weight: 400;}
.graph-container .graph-area .graph-labels {position: relative; margin-bottom: 1.8rem; padding: 0.8rem 2rem 0.8rem 1.6rem; background-color: var(--color-08); border-radius: 0.8rem; box-shadow: 0 4px 9px 0 rgba(76, 98, 132, 0.06);}
.graph-container .graph-area .graph-labels:after {content: ''; position: absolute; z-index: 1; left: 50%; bottom: -0.6rem; transform: translateX(-50%) rotate(135deg); width: 1.2rem; height: 1.2rem; background-color: var(--color-08); border-radius: 0 0.2rem 0 0;}
.graph-container .graph-area .label {min-width: 8.8rem; font-size: var(--fz-14); color: var(--fc-06); font-weight: 500; line-height: 1.4;}
.graph-container .graph-area .label:not(:last-child) {margin-bottom: 0.26rem;}
.graph-container .graph-area .label:before {content: ''; display: inline-block; width: 2px; height: 2px; margin-top: -1px; margin-right: 0.6rem; background-color: var(--fc-06); border-radius: 2px; vertical-align: middle;}
.graph-container .graph-area .label .tit {padding-right: 0.6rem; font-weight: 400;}
.graph-container .graph-area .label .color-posi {color: #4c88ff;}
.graph-container .graph-area .label .color-nega {color: #fc5663;}
.graph-container .graph-area .graph-sticks {overflow: hidden; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; height: 17rem;}
.graph-container .graph-area .stick {width: 4rem; margin: 0 0.8rem; border-radius: 1rem 1rem 0 0; background-color: gray;}
.graph-container .graph-area .stick.bg-posi {background: linear-gradient(180deg, #4c88ff 0%, #72adff 100%);}
.graph-container .graph-area .stick.bg-nega {background: linear-gradient(180deg, #ff6975 0%, #ff6c9d 100%);}
.graph-container .graph-area .stick.bg-pattern {background: url(/_pub/ITN/assets/img/bg_dashboard_graph_01.jpg) no-repeat left bottom; background-size: cover;}
.graph-container .graph-area {}

/* ±×·¡ÇÁ>½½¿ÍÀÌÇÁ */
.swiper-dashboard {margin-top: 4rem;}
.swiper-dashboard .swiper-slide:only-child {width: 100% !important;}
.swiper-dashboard .swiper-pagination {overflow: hidden; position: static; display: flex; flex-direction: row; justify-content: center; align-items: center; margin: 1.8rem auto; width: 24rem; background: var(--color-07); border-radius: 0.4rem;}
.swiper-dashboard .swiper-pagination:has(button:only-child) {display: none;}/*½½¶óÀ̵å 1°³ ÀÏ ¶§*/
.swiper-dashboard .swiper-pagination-bullet {opacity: 1; flex: 1; height: 0.4rem; background-color: transparent; border-radius: 0;}
.swiper-dashboard .swiper-pagination-bullet:after {content: ''; display: block; width: 0; height: 100%; background-color: var(--color-01); transition: width 0.5s ease;}
.swiper-dashboard .swiper-pagination-bullet.swiper-pagination-bullet-active:after {border-radius: 0 0.4rem 0.4rem 0; transition: width 0.5s ease, border-radius 0.2s ease 0.5s;}
.swiper-dashboard .swiper-pagination-bullet.swiper-pagination-bullet-active:after,
.swiper-dashboard .swiper-pagination-bullet:has(~.swiper-pagination-bullet-active):after {width: 100%;}
.swiper-dashboard .swiper-button-prev,
.swiper-dashboard .swiper-button-next {width: 5.2rem; height: 5.2rem; border-radius: 5.2rem; border: 1px solid var(--color-07); box-shadow: 0px 2px 8px 0px rgba(120,136,147,0.12);}
.swiper-dashboard .swiper-button-prev {left: -2.7rem; background: url(/_pub/ITN/assets/img/swiper-arrow-prev.svg) no-repeat center / 2rem auto rgba(255,255,255,40%);}
.swiper-dashboard .swiper-button-next {right: -2.7rem; background: url(/_pub/ITN/assets/img/swiper-arrow-next.svg) no-repeat center / 2rem auto rgba(255,255,255,40%);}
/* ½ÇÀû µ¥ÀÌÅÍ */
.dashboard-table {margin-top: 4rem;}


/******************************
        ·Î±×ÀÎ
******************************/
/* ·Î±×ÀÎ */
.login-container {width: 94.6rem; margin: 0 auto; padding-top: 15rem; padding-bottom: 7rem;}
.login-container .login-h1 {margin-bottom: 4rem; font-weight: 600; font-size: var(--fz-30); color: var(--fc-02);}
.login-container .login-h2 {position: relative; font-weight: 600; font-size: var(--fz-26); color: var(--fc-02); text-align: center;}
.login-container .login-header {display: flex; align-items: flex-end; margin-bottom: 4rem;}
.login-container .login-header [class*=login-h] {padding-left: 1.5rem;}
.login-container .login-header [class*=login-h]::before {content: ''; position: absolute; top: 50%; left: 0.4rem; transform: translateY(-50%); width: 0.1rem; height: 1.6rem; background-color: rgba(0, 0, 0, 0.04);}
.login-container .login-type-area {display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; padding: 5rem; background-color: var(--color-08); border-radius: 4rem;}
.login-container .row-area {position: relative; flex: 1; max-width: 50%; padding-right: 6.5rem;}
.login-container .row-area.right {display: flex; flex-direction: column; justify-content: flex-start; padding-right: 0; padding-left: 6.5rem;}
.login-container .row-area.right:before {content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--color-10);}
.login-container .row-area.left .depth {margin-top: 4rem;}
.login-container .note-area {margin-top: 3rem; background-color: #e4edf9; border-radius: 4rem;}
.login-container .note-area .title {display: flex; align-items: center; margin: 0; line-height: 1.9rem;}

.login-type-area .row-area.right .login-h1 {margin-bottom: 7rem;}/*ÁÂÃø°ú Áß¾ÓÁ¤·Ä*/
.login-type-area .form-ele .inp {min-height: 5.5rem; border-color: var(--color-10);}
.login-type-area .form-sel {margin-top: 1.2rem;}
.login-type-area .depth {margin-top: 1.2rem;}
.login-type-area .depth .fc-blue {font-weight: 500;}
.login-type-area .btn-wrap {display: flex; margin-top: auto;}
.login-type-area .btn-wrap .btn {flex: 1;}

.login-type-area .form-rdochk.key .form-sel {flex: 1; width: 100%; height: 16.3rem; margin-top: 0;}
.login-type-area .form-rdochk.key .form-sel:not(:first-child) {margin-left: 1.6rem;}
.login-type-area .form-rdochk.key .form-sel input[type=radio] + .label {height: 100%; padding: 3rem; font-weight: 500; font-size: var(--fz-18); color: var(--color-00); box-sizing: border-box;}
.login-type-area .form-rdochk.key .form-sel input[type=radio] + .label:after {top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--color-10); border-radius: 1.6rem;}
.login-type-area .form-rdochk.key .form-sel input[type=radio]:checked + .label {font-weight: 700; color: var(--color-primary);}
.login-type-area .form-rdochk.key .form-sel input[type=radio]:checked + .label:after {border: 2px solid var(--color-primary);}
.login-type-area [class*=icon-key-] {display: block; margin: 0 auto 3rem;}

/* ·Î±×ÀÎ µî·Ï/ÇØÁö */
.wrap-int.apply .login-container {max-width: 63.4rem;}
.login-apply {max-width: 63.4rem; margin: 0 auto; padding: 5rem 4rem; border-radius: 4rem; background-color: var(--color-08); box-sizing: border-box;}
.login-apply .form-row {width: 100%;}
.login-apply .form-rdochk.full {width: 100%; margin-bottom: 3.2rem; background-color: var(--color-10); border-radius: 0.6rem;}
.login-apply .form-rdochk.full .form-sel {flex: 1; height: 5.2rem; margin-left: 0;}
.login-apply .form-rdochk.full .form-sel input[type=radio] + .label {min-height: 5.2rem; background-color: var(--color-10); line-height: 5.2rem; font-weight: 500; font-size: var(--fz-18); color: #62676b;}
.login-apply .form-rdochk.full .form-sel input[type=radio] + .label::after {border: none;}
.login-apply .form-rdochk.full .form-sel input[type=radio]:checked + .label {background-color: var(--color-08); font-weight: 600; color: var(--color-primary);}
.login-apply .form-rdochk.full .form-sel input[type=radio]:checked + .label::after {width: initial; height: initial; border: 2px solid var(--color-primary);}
.login-apply .form-ele:not(.full), .login-apply .max-w {max-width: 29.5rem;}
.login-apply > .btn-wrap {margin-top: 3.2rem;}
/* ÈÞ´ëÆù¹øÈ£ ÀÎÁõ */
.login-apply .form-row.type-phone .form-ele {width: 29.5rem;}
.login-apply .form-row.type-phone .inp {min-height: 4.4rem;}
.login-apply .form-row.type-phone .btn-wrap {margin-left: 1rem;}
.login-apply .form-row.type-phone .btn {width: 12rem; height: 4.4rem; padding: 0 0.9rem; white-space: nowrap;}
/* ÀÎÁõ¹øÈ£ ŸÀÌ¸Ó */
.login-apply .form-row.type-timer .form-ele {width: 29.5rem;}
.login-apply .form-row.type-timer .timer-ele {display: flex; flex-direction: row; align-items: center; margin-left: 1rem; font-size: var(--fz-16); font-weight: 500; color: var(--color-blue1); letter-spacing: 0;}


/******************************
        ¼­·ùÈ®Àγ»¿ª - ¸Þ¼¼Áö
******************************/
.message-group .message-box:not(:first-child) {margin-top: 0.8rem;}
.message-group .message-box.bg-sel {background-color: #f8f8f8; border-color: #f8f8f8;}
.message-box {padding: 2.4rem; border: 1px solid #EBEBEB; border-radius: 1.2rem;}
.message-box .message-head {position: relative; display: flex; flex-direction: row; justify-content: space-between; padding-left: 1.2rem; margin-bottom: 1.2rem;}
.message-box .message-head:before {content: ''; position: absolute; top: 0.35rem; left: 0; width: 0.4rem; height: 1.4rem; border-radius: 0.2rem; background-color: var(--color-06);}
.message-box .message-body {font-weight: 400; font-size: var(--fz-16); color: var(--fc-06);}
.message-box .title {font-weight: 600; font-size: var(--fz-15); color: var(--fc-06);}
.message-box .date {font-weight: 400; font-size: var(--fz-14); color: var(--fc-06);}
.message-box .sender {display: inline-flex; flex-direction: row; justify-content: flex-start; align-items: center;}
.message-box .sender:after {content: ''; display: block; width: 3.4rem; height: 2rem;background: url(/_pub/ITN/assets/img/arrow-dot-blue.svg) no-repeat center;}
.message-box .receiver {color: var(--fc-02);}
.message-box.bg-send {background-color: var(--color-blue8); border-color: var(--color-blue8);}
.message-box.bg-send .message-head:before {background-color: var(--color-blue1);}
.message-box.bg-send .sender {color: var(--fc-02);}
.message-box.bg-send .receiver {color: var(--color-blue1);}


/******************************
        ¸¶ÀÌÆäÀÌÁö
******************************/
.mypage-container .btn-wrap {margin-top: 5rem;}
.mypage-container .mypage-row {display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;}
.mypage-container .mypage-user {flex-shrink: 0; width: 28rem; min-height: 34.4rem; padding: 6.5rem 4rem; margin-right: 6rem; border-radius: 1.6rem; background-color: var(--color-07); text-align: center; box-sizing: border-box;}
.mypage-user .user-img {overflow: hidden; display: block; width: 13.5rem; height: 18rem; margin: 0 auto 3.2rem; border-radius: 1.2rem;}
.mypage-user .user-img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.mypage-user .user-name {margin-bottom: 0.8rem; font-weight: 600; font-size: var(--fz-24); color: var(--color-00);}
.mypage-user .user-code {font-weight: 400; font-size: var(--fz-16); color: var(--fc-06);}
.mypage-container .hgroup-wrap:first-child {margin-top: 0;}