@charset "UTF-8";

#myapge-wrap{display:flex;gap:20px;padding:85px 20px;font-size:15px;background:url('../img/main/main01.png') center/cover no-repeat;align-items:flex-start}
#myapge-wrap .profile-wrap{width:300px;border-radius:var(--radius);overflow:hidden;background:linear-gradient(to bottom, #06573d, #009688);color:#fff;padding:30px 20px;display:flex;flex-direction:column;gap:20px}
#myapge-wrap .info-wrap{flex-grow:1;max-width:calc(100% - 320px);border-radius:var(--radius)}
#myapge-wrap .nm-wrap{display:flex;flex-direction:column;gap:10px}
#myapge-wrap .nm-wrap .info{display:flex;align-items:center;font-size:.875em;gap:5px;flex-wrap:wrap}
#myapge-wrap .nm-wrap .info span{display:flex;align-items:center;gap:5px}
#myapge-wrap .nm-wrap .info span:not(:last-child)::after{width:3px;height:3px;border-radius:50%;background-color:#fff;content:""}
#myapge-wrap .nm-wrap .nm{display:flex;align-items:baseline;gap:5px}
#myapge-wrap .nm-wrap .nm strong{font-size:1.5em}
#myapge-wrap .btn-wrap{display:flex;align-items:center;gap:10px}
#myapge-wrap .btn-wrap .item{position:relative;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:10px}
#myapge-wrap .btn-wrap .item:not(:last-child)::after{width:1px;height:12px;background-color:rgba(255,255,255,.8);content:""}
#myapge-wrap .btn-wrap .item:hover{color:#fff}
#myapge-wrap .alram-wrap{background-color:rgba(255,255,255,.2);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;color:#fff}
#myapge-wrap .alram-wrap .subject{font-size:1rem;font-weight:bold}
#myapge-wrap .alram-wrap .img{position:relative;width:57px;height:61px;margin-left:auto}
#myapge-wrap .alram-wrap .img .alram{position:absolute;top:-35px;right:-32px;width:80px;aspect-ratio:1/1;color:#fff;display:flex;align-items:center;justify-content:center}
#myapge-wrap .alram-wrap .img .alram lottie-player{width:100%;height:100%}
#myapge-wrap .alram-wrap .img .alram .number{position:absolute;font-size:0}
#myapge-wrap .alram-wrap:hover{background-color:rgba(255,255,255,.4)}
#myapge-wrap .lnb-wrap{display:flex;gap:10px;flex-wrap:wrap}
#myapge-wrap .lnb-wrap .lnb-1item{width:calc(50% - 5px);background-color:rgba(255,255,255,.1);border-radius:var(--radius);padding:10px;color:#fff;display:flex;flex-direction:column;text-align:center;}
#myapge-wrap .lnb-wrap .lnb-1item.on{background-color:#06573d;box-shadow:inset 0 0 10px rgba(0, 0, 0, .2)}
#myapge-wrap .lnb-wrap .lnb-1item:hover{background-color:#06573d}
#myapge-wrap .lnb-wrap .lnb-1item .img{height:45px;display:flex;align-items:center;justify-content:center}
#myapge-wrap .lnb-wrap .lnb-1item .img img{max-height:100%}
#myapge-wrap .lnb-wrap .lnb-1item .caption{word-wrap:break-word;min-height:45px;display:flex;align-items:center;justify-content:center;line-break:anywhere;letter-spacing:-.04em}
#myapge-wrap .info-wrap{display:flex;gap:20px;flex-wrap:wrap}
#myapge-wrap .info-wrap .info-item{width:calc(50% - 10px);border-radius:var(--radius);border:1px solid var(--color-b);position:relative;background-color:rgba(255,255,255,.6)}
#myapge-wrap .info-wrap .info-item.full{width:100%}
#myapge-wrap .info-wrap .subject{font-size:1.25rem;font-weight:bold;border-bottom:1px solid var(--color-b);padding:20px}
#myapge-wrap .info-wrap .subject-con{padding:20px}
#myapge-wrap .info-wrap .info-item .btn-more{position:absolute;right:20px;top:25px;font-weight:bold}
#myapge-wrap .info-wrap .board-txt .board-item{display:flex;flex-direction:column;gap:5px;padding:10px 0;border-bottom:1px solid var(--color-b)}
#myapge-wrap .info-wrap .board-txt li:last-child .board-item{border-bottom:0}
#myapge-wrap .info-wrap .board-card > li{border:1px solid var(--color-b)}
#myapge-wrap .info-wrap .board-card .board-item{display:flex;gap:10px;flex-direction:column;padding:20px;border-radius:10px;height:100%;justify-content:center;border-radius:0 0 0 10px}
#myapge-wrap .info-wrap .board-card .board-con{font-size:1rem;font-weight:600}
#myapge-wrap .info-wrap .board-card dl{display:flex;flex-wrap:wrap;gap:5px}
#myapge-wrap .info-wrap .board-card dt{font-weight:bold;flex-shrink:0}
#myapge-wrap .info-wrap .board-subject{font-size:1rem;font-weight:600}
#myapge-wrap .info-wrap .board-date{background:url('/dist/img/main/ico-clock.png') left center no-repeat;padding-left:20px;color:#333;font-size:.875rem}
#myapge-wrap .board-card{display:flex;gap:10px}
#myapge-wrap .board-card li{width:calc(20% - 5px)}
#myapge-wrap .category{color:#52B54F;background-color:#E6F5E0;font-size:.875rem;padding:5px 10px;display:inline-block;max-width:85px;border-radius:5px;text-align:center}
.mypage-tab{display:flex;gap:20px;position:absolute;right:20px;top:15px}
.mypage-tab .tab-item{color:#4A5B55;display:inline-block;padding:10px 5px;position:relative}
.mypage-tab .tab-item::after{position:absolute;width:0;transition:.3s;height:2px;background-color:var(--color-m);bottom:-12px;left:50%;transform:translateX(-50%);content:""}
.mypage-tab .tab-item.on,
.mypage-tab .tab-item:hover{color:var(--color-m)}
.mypage-tab .tab-item:not(:last-child)::before{position:absolute;height:16px;width:1px;border-left:1px dashed rgba(0,0,0,.2);content:"";top:50%;transform:translateY(-50%);right:-10px}
.mypage-tab .tab-item.on::after,
.mypage-tab .tab-item:hover::after{width:100%}

#myapge-wrap .btn-bg{min-width:80px;height:var(--btn-height); max-height: 35px;}
.con-flex-wrap{display:flex;gap:20px;flex-wrap:wrap;width:100%}

.mypage-board-search .inner{display:flex;gap:5px;padding:20px;justify-content:space-between}
.mypage-board-search .frm-li-wrap{display:flex;flex-direction:column;gap:5px;flex-grow:1;max-width:calc(100% - 170px)}
.mypage-board-search .frm-li{display:flex;flex-wrap: wrap;gap:5px}
.mypage-board-search .frm-item{min-width:0;display:flex;gap:5px;align-items:center;max-width:calc(50% - 2.5px);min-height:var(--btn-height)}
.mypage-board-search .frm-item .label-txt{flex-shrink:0;min-width:80px;padding-left:10px;font-size:.875rem;font-weight:500}
.mypage-board-search .inner .btn-right-flex{margin:0;flex-shrink:0}
.mypage-board-search .input-text{width:max-content;min-width:80px}

/*홈페이지 Kendo Grid*/
.k-link { color: white !important; }
.k-drag-clue, .k-grid-header, .k-grouping-header, .k-header, .k-menu, .k-panelbar>.k-panelbar-header>.k-link, .k-progressbar, .k-state-highlight, .k-tabstrip, .k-tabstrip-items .k-item, .k-toolbar { background-color: #03745f !important; }
.k-grid-content.k-auto-scrollable { scrollbar-width: thin !important; scrollbar-color: #2f8f7a #eef6f4 !important; }
.k-grid-content.k-auto-scrollable::-webkit-scrollbar { width: 8px !important; height: 8px !important;}
.k-grid-content.k-auto-scrollable::-webkit-scrollbar-track { background: #eef6f4 !important; border-radius: 10px !important;}
.k-grid-content.k-auto-scrollable::-webkit-scrollbar-thumb { background-color: #2f8f7a !important; border-radius: 10px !important; border: 2px solid #eef6f4 !important;}
.k-grid-content.k-auto-scrollable::-webkit-scrollbar-thumb:hover { background-color: #1f6f5f !important; }

/*홈페이지 모달*/
#homeModal { display: none; position: fixed; width: 80vw; height: 80vh; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(../img/main/main01.png) center / cover no-repeat; border: solid 1px #333; border-radius: 10px; padding: 20px; z-index: 1000; overflow: hidden; }
#homeModal .modal-view{ height: calc(100% - 70px); overflow: auto; padding: 15px; max-width: 100%; }
.homeModalTitle { display: flex; align-items: center; justify-content: space-between; font-size: 1.25rem; font-weight: bold; padding: 15px 20px; border-bottom: 1px solid #b9b9b9; }
#homeModal-back { display: none; position: fixed; width: 100vw; height: 100vh; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #3333337a; z-index: 100;}

/*모달 닫기*/
.homeModalClose { cursor: pointer; font-size: 20px; line-height: 1; padding: 5px 8px; border-radius: 4px; }
.homeModalClose:hover{ background: rgba(0,0,0,0.1); }

/*모달 스크롤*/
#homeModal .modal-view { scrollbar-color: #2f8f7a #eef6f4; }
#homeModal .modal-view::-webkit-scrollbar { width: 8px; height: 8px; }
#homeModal .modal-view::-webkit-scrollbar-track { background: #eef6f4; border-radius: 10px; }
#homeModal .modal-view::-webkit-scrollbar-thumb { background-color: #2f8f7a; border-radius: 10px; border: 2px solid #eef6f4; }
#homeModal .modal-view::-webkit-scrollbar-thumb:hover { background-color: #1f6f5f; }

/*table 스크롤*/
.scroll-table.mypage-table{position: relative; overflow-x: auto;}
.scroll-table.has-scroll .ico-scroll{display:block; width:60px; aspect-ratio: 1 / 1; background:url('../img/sub/ico-mobile.png') rgba(0, 184, 110, .8) center / 60% no-repeat; border-radius:50%; position:absolute; top:20px; left:50%; z-index:10; animation: table-scroll 1s infinite;}
@keyframes table-scroll {
    0% {transform:translate(-50%, 0);}
    50% {transform:translate(-50%, -10px);}
    100% {transform:translate(-50%, 0);}
}

#myapge-wrap .link-tab{flex-wrap: wrap;}

.col-md-1 { flex: 0 0 auto; width: calc(8.33333333% - 10px) !important; }
.col-md-2 { flex: 0 0 auto; width: calc(16.66666667% - 10px) !important; }
.col-md-2-2 { flex: 0 0 auto; width: calc(24.666667% - 20px) !important }
.col-md-3 { flex: 0 0 auto; width: calc(25% - 10px) !important; }
.col-md-4 { flex: 0 0 auto; width: calc(33.33333333% - 10px) !important; }
.col-md-5 { flex: 0 0 auto; width: calc(41.66666667% - 10px) !important; }
.col-md-6 { flex: 0 0 auto; width: calc(50% - 10px) !important; }
.col-md-7 { flex: 0 0 auto; width: calc(58.33333333% - 10px) !important; }
.col-md-8 { flex: 0 0 auto; width: calc(66.66666667% - 10px) !important; }
.col-md-9 { flex: 0 0 auto; width: calc(75% - 10px) !important; }
.col-md-10 { flex: 0 0 auto; width: calc(83.33333333% - 10px) !important; }
.col-md-11 { flex: 0 0 auto; width: calc(91.66666667% - 10px) !important; }
.col-md-12 { flex: 0 0 auto; width: calc(100% - 10px) !important; }


/* File Upload */
.file-input-wrap {margin-bottom: 4px;}
.file-con { display: none; width: 100%; margin-top: 2px; border: 1px solid #e3e6ea; border-radius: 6px; background: #fafbfc; max-height: 140px; overflow-y: auto;}
.file-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border: 1px solid #eee; border-radius: 6px; margin-bottom: 6px; background: #fafafa;}
.file-item:last-child { margin-bottom: 0; }
.file-item:hover { background-color: #f3f8ff; border-color: #4b8cf7; box-shadow: 0 0 0 1px rgba(75, 140, 247, 0.15);}
.file-main { display: flex; align-items: center; gap: 8px;}
.file-icon { font-size: 18px; color: #4a8cf7;}
.file-name { font-size: 14px; `color: #333; }
.file-item a { font-size: 13px; color: #007bff; text-decoration: none; word-break: break-all; }
.file-item a:hover { text-decoration: underline;}
.file-actions { display: flex; align-items: center; gap: 4px;}
.btn-file-del { padding: 2px 6px; font-size: 11px; line-height: 1.2;}
.btn-file-del i { font-size: 12px; vertical-align: middle; margin-right: 2px;}
.file-actions button,
.file-actions a { margin-left: 4px; font-size: 13px; padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); line-height: unset; }

.time-wrap { width: 100%; display: flex; border: solid 1px #e7e4e4; border-radius: 5px; }
.time-wrap select { border: unset; text-align: center;}

/* 공통 */
.time-wrap select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; }

/* IE, Edge(구버전) */
.time-wrap select::-ms-expand { display: none; }

@media (max-width:1400px){
    #myapge-wrap .info-wrap .info-item{width:100% !important}
}
@media (max-width:1024px){
    #myapge-wrap .info-wrap .info-item{width:100%}
    #myapge-wrap .mypage-tab{gap:10px;right:10px;top:8px}
   .mypage-tab .tab-item::after{bottom:-6px}
   .mypage-tab .tab-item:not(:last-child)::before{right:-5px}
   .mypage-board-search .frm-item{max-width: unset;}

   .file-item{flex-direction: column; align-items: flex-start}
}

@media (max-width:720px){
   #myapge-wrap{flex-direction:column;padding:20px}
   #myapge-wrap .profile-wrap{width:100%;flex-direction:row;flex-wrap:wrap;padding:20px 10px}
   #myapge-wrap .alram-wrap,
   #myapge-wrap .btn-wrap,
   #myapge-wrap .nm-wrap{width:100%;justify-content:center;align-items:center}
   #myapge-wrap .nm-wrap{flex-direction:row}
   #myapge-wrap .nm-wrap .nm{flex-shrink:0}
   #myapge-wrap .nm-wrap .nm strong{font-size:1.125rem}
   #myapge-wrap .info-wrap{max-width:100%}
   #myapge-wrap .info-wrap .subject{font-size:1.125rem;padding:15px 10px}
   #myapge-wrap .info-wrap .board-subject{font-size:1rem}
   #myapge-wrap .board-card{flex-wrap:wrap}
   #myapge-wrap .board-card li{width:calc(50% - 5px)}
   #myapge-wrap .mypage-tab{flex-wrap:wrap;justify-content:center;position:relative;right:auto;top:auto}
   #myapge-wrap .info-wrap .board-card .board-item{padding:10px}

   .board-write-flex .frm-item{flex-direction:column;align-items:flex-start}
   .board-write-flex .frm-li{flex-direction:column}
   .board-write-flex .frm-li.half{max-width:100%}

   .col-md-1,
   .col-md-2,
   .col-md-3,
   .col-md-4,
   .col-md-5,
   .col-md-6,
   .col-md-7,
   .col-md-8,
   .col-md-9,
   .col-md-10,
   .col-md-11,
   .col-md-12{width:100% !important}

    .mypage-board-search .inner{flex-direction: column;}
    .mypage-board-search .frm-li-wrap{max-width: unset;}
    .mypage-board-search .frm-li{flex-direction: column;}
    .mypage-board-search .frm-item{max-width:100%;flex-direction:column;align-items: flex-start}
    .mypage-board-search .frm-item .label-txt{min-width:100%}
    .mypage-board-search .input-text{width: 100%;}

   #homeModal { width: 100vw !important; height: 100vh !important; }


}