@charset "UTF-8";
/* =================================================
title       :메인
Create date :2026-06
================================================= */
@charset "UTF-8";

.ui-main {
    width:100%;
    padding:60px 20px;
    background:#fff;
}

.ui-main-inner{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    box-sizing:border-box;
    position:relative;
}

/* 상단만 Grid */
.ui-main-top {
    display:grid;
    grid-template-columns:400px minmax(0,1fr);
    gap:40px;
    align-items:start;
}

.ui-main-side{
    grid-column:1;
    grid-row:1;
}

.ui-main-side .ui-login {
    padding: 35px 34px;
}

.ui-main-side,
.ui-main-content,
.ui-main-bottom,
.ui-main-notice,
.ui-main-faq {
    min-width:0;
}

.ui-side-menu {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;
}

.ui-side-menu-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:106px;
    min-height:80px;
    padding:0 24px;
    border:1px solid #d8e0e8;
    border-radius:12px;
    background:#fff;
    color:var(--color-text-primary);
    font-size:24px;
    font-weight:600;
    text-decoration:none;
}

.ui-side-menu-item::after {
    content:"›";
    font-size:24px;
}

.ui-side-menu-item:hover,
.ui-side-menu-item.is-active {
    background:#0784d8;
    border-color:#0784d8;
    color:#fff;
}

.ui-side-banner {
    margin-top:20px;
}

.ui-swiper-main {
    position: relative;
    min-height: 520px;
    max-width: 400px;
    margin: 0 auto;
}

/* Swiper 바로 바깥쪽 */
.ui-swiper-main .ui-swiper-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
/* Swiper 본체 */
.ui-swiper-main .ui-swiper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.ui-swiper-main .swiper-slide {
    overflow: hidden;
}

.ui-swiper-main .swiper-slide img {
    object-fit: contain;
}


/* 제어 버튼 */
.ui-swiper-main .ui-swiper-controls {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 13px;
    min-height: 26px;
    margin-top: 10px;
    color: #333;
    position: static;
}

.ui-swiper-controls button {
    background: transparent;
    border: 0;
    min-width: auto;
}

.ui-swiper-controls .swiper-autoplay-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

/* 재생·정지 버튼 */
.ui-swiper-controls .swiper-autoplay-toggle {
    position: relative;
    width: 20px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size:14px;
    font-weight: 700;
}

.ui-swiper-controls .swiper-button-prev,
.ui-swiper-controls .swiper-button-next,
.ui-swiper-controls .swiper-autoplay-toggle {
    position: relative;
    inset: auto;
    flex: 0 0 16px;
    width: 16px;
    height: 20px;
    min-width: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #42464c;
    background: transparent;
    cursor: pointer;
}

/* 재생 중: 정지 아이콘 */
.ui-swiper-controls .swiper-autoplay-toggle[data-state="playing"] .swiper-autoplay-icon::before,
.ui-swiper-controls .swiper-autoplay-toggle[data-state="playing"] .swiper-autoplay-icon::after {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 15px;
    background: #42464c;
    content: "";
    transform: translateY(-50%);
}
.ui-swiper-controls .swiper-autoplay-toggle[data-state="playing"] .swiper-autoplay-icon::before {
    left: 5px;
}
.ui-swiper-controls .swiper-autoplay-toggle[data-state="playing"] .swiper-autoplay-icon::after {
    right: 5px;
}

/* 정지 상태: 재생 아이콘 */
.ui-swiper-controls .swiper-autoplay-toggle[data-state="paused"] .swiper-autoplay-icon::before {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 12px solid #42464c;
    background: transparent;
    content: "";
    transform: translateY(-50%);
}
.ui-swiper-controls .swiper-autoplay-toggle[data-state="paused"] .swiper-autoplay-icon::after {
    display: none;
}


/* 키보드 접근성 */
.ui-swiper-controls .swiper-autoplay-toggle:focus-visible {
    outline: 2px solid #0066b3;
    outline-offset: 2px;
}



/* 오른쪽 */
.ui-main-content {
    display:flex;
    flex-direction:column;
    gap:40px;
    width:100%;
    min-width: 720px;
}

.ui-main-service {
    background:#F7F7F7;
    border-radius:18px;
    padding:40px 40px 47px 40px;
    grid-column:2;
    grid-row:1;
}

.ui-main-service .ui-service-list {
    /*grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr);*/
    grid-template-columns: minmax(48%, 1fr) minmax(48%, 1fr);
}

.ui-main-service .ui-service-list .ui-service-item {
    position: relative;
}

.ui-main-service .ui-service-list .ui-service-item .ui-btn {
    position: absolute;
    top:0;
    right: 0;
    border-radius:8px;
    margin: 6px;
    font-size:13px;
    z-index: 2;
}
.ui-main-service .ui-service-list .ui-service-item .ui-btn:hover {
    background-color:var(--color-primary);
    border:1px solid #0B78CB;
    color:#fff;
}

.ui-main-service .ui-service-card {
    gap:20px;
    border-color:transparent;
}


.ui-main-content:has(.ui-my-work) .ui-main-service {
    background:#F7F7F7 !important;
}

.ui-main-service .ui-service-card .ui-service-icon {
    overflow: hidden;
}

/* hover하면 GIF 표시 */
.ui-main-service .ui-service-card:hover .ui-icon--work_1 {
    background-image:url('../images/icon/gif_work/icon_work_1.gif');
    transform: scale(1.25);
}
.ui-main-service .ui-service-card:hover .ui-icon--work_2 {
    background-image:url('../images/icon/gif_work/icon_work_2.gif');
    transform: scale(1);
    margin-top: -3px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_4 {
    background-image:url('../images/icon/gif_work/icon_work_4.gif');
    transform: scale(1.3);
    margin-top: -3px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_5 {
    background-image:url('../images/icon/gif_work/icon_work_5.gif');
    transform: scale(1.4);
    margin-top: -3px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_6 {
    background-image:url('../images/icon/gif_work/icon_work_6.gif');
    transform: scale(1.42);
    margin-top: -2px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_7 {
    background-image:url('../images/icon/gif_work/icon_work_7.gif');
    transform: scale(2.3);
    margin-top: -2px;
    margin-left: -2px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_8 {
    background-image:url('../images/icon/gif_work/icon_work_8.gif');
    transform: scale(1.73);
    margin-top: -5px;
    margin-left: -1px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_9 {
    background-image:url('../images/icon/gif_work/icon_work_9.gif');
    transform: scale(1.45);
    margin-top: -2px;
}
.ui-main-service .ui-service-card:hover .ui-icon--work_10 {
    background-image:url('../images/icon/gif_work/icon_work_10.gif');
    transform: scale(1.53);
    margin-top: 0;
}


.ui-section-title {
    margin:0 0 20px;
    padding-left:12px;
    font-weight:700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ui-section-title:before {
    display: block;
    content: '';
    width: 5px;
    height: 25px;
    background: #0784d8;
    border-radius: 50px;
}

/* 나의 없무가 없을 경우 전체업무 카드 영역 */
.ui-main-content:has(.ui-my-work) .ui-main-service .ui-section-title span {
    display: none;
}
.ui-main-content:has(.ui-my-work) .ui-main-service .ui-section-title .ui-section-title-mobile{
    display: block;
}
.ui-section-title .ui-section-title-mobile {
    display: none;
}

.ui-section-title .ui-tooltip-trigger {
    margin-top:-6px;
}

.ui-section-title .ui-text-more {
    height: 24px;
    line-height: 26px;
    border-radius: 5px;
    margin-left: auto;
    padding: 0 14px;
    color: #fff;
    font-size: 12px;
}

/* 나의업무 */
.ui-my-work {
    background:#EDF6FC;
    border-radius:18px;
    padding:32px;
    grid-column:2;
    grid-row:1;
}

.ui-my-work .ui-tooltip {
    margin-top: 2px;
}

.ui-my-work  .ui-service-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-my-work-card {
    display:grid;
    grid-template-columns:400px minmax(0, 420px);
    gap:0;
    border: 0;
    align-items:center;
    align-content: center;
    min-height: 163px;
    height: auto;
    transition: grid-template-columns .3s ease,
                gap .3s ease,
                padding .3s ease,
                box-shadow .3s ease,
                transform .2s ease;
}

.ui-my-work-card:hover,
.ui-my-work-card:focus-visible,
.ui-my-work-card.is-active {
    border-color:transparent;
    box-shadow:none;
}

.ui-my-work-card .ui-service-title,
.ui-my-work-card .ui-service-name {
    color: #0076CF;
}
.ui-my-work-card .ui-service-desc {
    color: var(--color-text-primary);
}

.ui-my-work-card .ui-service-content .ui-btn {
    margin-top: 10px;
}

.ui-my-work-card .ui-service-tit--link:hover {
    text-decoration: underline;
    color: #0076CF;
}

.ui-my-work-card .ui-service-card-left {
    min-width:0;
    display:flex;
    align-items:center;
    gap:24px;
}

.ui-my-work-card .ui-service-card-right {
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 120px;
    gap:24px;
    align-items:center;
    padding-left:32px;
    border-left:1px solid #d8e0e8;

    transition: grid-template-columns .3s ease,
    padding .3s ease,
    border .3s ease,
    gap .3s ease;
}

.ui-my-work-list {
    margin:0;
    padding:0;
    list-style:none;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.ui-my-work-list li {
    font-size:14px;
    line-height:1.6;
    color:#222;
}

.ui-my-work-buttons {
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ui-my-work-buttons .ui-btn {
    height:24px;
    padding: 0 5px;
    font-size:12px;
}
.ui-my-work-buttons .ui-btn:hover {
    background:var(--color-primary);
    color:#fff;
}

/* 하단 */
.ui-main-bottom {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:40px;
    margin-top:67px;
}

.ui-board {
    background:#fff;
    border:1px solid #d8e0e8;
    border-radius:14px;
    padding:40px;
}

.ui-board-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:30px;
}

.ui-board-title {
    margin:0;
    font-size:22px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:13px;
}

.ui-notice-list,
.ui-faq-list {
    margin:0;
    padding:0;
    list-style:none;
}

.ui-notice-list li {
    display:flex;
    align-items:center;
    gap:20px;
    padding:14px 0;
    border-bottom:1px solid #e5ebf0;
}

.ui-notice-link{
    display:flex;
    align-items:center;
    width:100%;
    gap:24px;
    font-size:18px;
    text-decoration:none;
}

.ui-notice-link:hover .ui-notice-title{
    text-decoration: underline;
}

.ui-notice-content{
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
}

.ui-notice-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
}

.ui-notice-new{
    flex-shrink:0;
    margin-left:10px;
    color:#1478d4;
    font-weight:700;
}

.ui-notice-link time{
    flex-shrink:0;
    margin-left:auto;
    color:#7b8aa0;
}

.ui-faq-list {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
}

.ui-faq-list a {
    display:flex;
    align-items:center;
    justify-content:center;
    height:50px;
    padding:8px 12px;
    background:#edf2f6;
    border-radius:6px;
    color:#222;
    font-size:var(--text-sm);
    text-align:center;
    text-decoration:none;
}

.ui-faq-list a:hover,
.ui-faq-list a.is-active {
    background:#0784d8;
    color:#fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    /*outline:3px solid #111;*/
    outline-offset:3px;
}