@charset "UTF-8";

.header.main {display: block; height:auto;}



.nuri-div {padding:4px 0; background:#EDF1F7;}
.nuri-div > div {display: flex; width:100%; max-width:1440px; margin:0 auto; align-items: center;}
.nuri-div span {padding-left:5px; font-size:12px; color: #000;}



/* 메인 컨텐츠 */
.main_wrap.new {width:100%; max-width:1440px; margin:0 auto 100px; overflow: hidden; background: #fff;}

    @media (max-width:1440px){
        .main_wrap.new {padding:0 15px;}
    }


.main-header {display: flex; position: relative; width:100%; max-width: 1440px; margin: 0 auto; justify-content:space-between; align-items:center; gap:150px;}
.main-header h1.logo {flex:0 0 150px}

.main-header .nav {flex:1; justify-content:center;}
.main-header .nav > ul {display:flex; justify-content:space-between; align-items: center; }
.main-header .nav > ul > li > a {display: flex; width: 100%; height: 70px; align-items: center; font-size: 20px; font-weight: 700; color:#1A1B1F;}

.main-header .main-header-util {flex:0 0 150px}




/* 메인 컨텐츠 */

.main-top {display:flex; gap:28px;}

.main-banner {position: relative; flex:7; max-width: 994px; min-width:0}
.main-banner .inner {position:relative; width:100%; height:400px; border-radius: 20px;  border-radius:20px; overflow: hidden;}
.main-banner .inner .main-swiper {width:100%; height:100%;}
.main-banner .inner .main-swiper .swiper-slide {}
.main-banner .inner .main-swiper .swiper-slide a {display: block; width:100%; height:100%;}
.main-banner .inner img {width:100%; height:100%; object-fit:fill;}

.swiper-pagination {width:100%; text-align: center; margin-top: 13px;}
.swiper-pagination span {margin:0 2px;}
.swiper-pagination-bullet {background: #858D9A; opacity: 1;}
.swiper-pagination-bullet-active {width:20px; border-radius: 20px; background:#4D6EDB;}

.swiper-button-next, .swiper-button-prev {width:40px; height:40px;}
.swiper-button-next {right:20px; background:url(../images/main/banner-right.png) center center / cover no-repeat;}
.swiper-button-prev {left:20px; background:url(../images/main/banner-left.png) center center / cover no-repeat;}

@media (max-width:1440px){
    .main-banner {aspect-ratio: 994 / 400;}
}

@media (max-width:1280px){
    .main-banner .inner {height:320px;}
}

@media (max-width:1024px){
    .main-banner .inner {height:auto;}
    .main-banner .inner img {object-fit:cover;}
    .swiper-button-next, .swiper-button-prev {display: none;}
}








.main-top .login-area {flex:1; padding:32px; height:400px; display: flex; min-width:375px; border-radius: 20px; flex-direction: column; background:#F8F9FB;}

.main-top .login-area .tit {font-size: 18px; color: #1A1B1F; font-weight: 400; margin-bottom:24px; line-height: 28px;}
.main-top .login-area .tit .br {display: block;}
.main-top .login-area .login-box {display: flex; gap: 10px; margin-bottom: 15px;}
.main-top .login-area .login-box .ipt {display:flex; flex:1; min-width:0; flex-direction: column; gap: 8px;}
.main-top .login-area .login-box .ipt input {height:40px; padding:0 12px; color: #595E6C; border-radius: 8px; border: 1px solid #D6DCE4; background: #fff;}
.main-top .login-area .login-box .go-btn {display: flex; flex: 0 0 122px; height:88px; align-items:center; justify-content: center; border-radius: 8px; color: #fff; background: #4D6EDB;}

.main-top .login-area .account-links ul {display:flex; justify-content:center; align-items:center; gap:12px}
.main-top .login-area .account-links ul li {position: relative;}
.main-top .login-area .account-links ul li ~ li {padding-left:11px;}
.main-top .login-area .account-links ul li:last-child:before {position:absolute; left:0; top:4px; content: ''; display: inline-block; width:2px; height:16px; background:#D6DCE4; }
.main-top .login-area .account-links ul li:first-child:before {display: none;}
.main-top .login-area .account-links ul li a {display:flex; align-items: center; height: 24px; color: #878C99; font-size: 14px; padding-left: 28px;}
.main-top .login-area .account-links ul li.signup-link a {background:url(../images/main/signup-link.png) left center / 24px no-repeat;}
.main-top .login-area .account-links ul li.account-recovery a {background:url(../images/main/account-recovery.png) left center / 24px no-repeat;}

.security-program {margin-top: 12px; font-size:13px; color:red; text-align: center; font-weight: 700;}

.main-top .login-area .box-btn-set {display:flex; align-items:center; gap:12px; margin-top: auto; align-self:stretch;}
.main-top .login-area .box-btn-set a{display:flex; height:64px; justify-content:center; align-items:center; flex:1 0 0; text-align: center; border-radius: 8px; font-size: 14px; line-height: 20px; color: #fff; background: #2F3133;}


@media(max-width:1440px){
    .main-top {gap: 20px;}
    .main-top .login-area {padding:2%}
    .main-top .login-area .login-box .go-btn {flex: 0 0 96px; height:88px;}
}

@media(max-width:1280px){

    .main-top .login-area {padding:24px; min-width:340px; height:320px}
    .main-top .login-area .tit {font-size: 18px; font-weight: 500; line-height: 1; margin-bottom: 22px;}
    .main-top .login-area .tit .br {display: inline-block; }
    .main-top .login-area .tit .br:after {display: inline-block; content:'\00a0';}
}

@media(max-width:1024px){
    .main-top {flex-direction: column; gap:28px;}
    .main-banner {order:2}
    .main-top .login-area .tit {margin-bottom:30px; line-height: 26px}
    .main-top .login-area .tit .br {display: block;}
    .main-top .login-area .tit .br:after {display: none;}
    .main-top .login-area {order:1; height:auto; padding:20px;}
    .main-top .login-area .box-btn-set {margin-top:36px;}
    .main-top .login-area .login-box .go-btn {flex: 0 0 122px; height:88px;}


}

@media(max-width:680px){
    .main-top .login-area .login-box {flex-direction: column; gap: 10px; margin-bottom: 15px;}
    .main-top .login-area .login-box .go-btn {flex: 1 1 44px;}

}










/* 바로가기 & 집합과정 캘린더 */

.quick-sch-wrap {display: flex; gap: 48px; margin-top: 80px;}

    @media(max-width:1440px){
        .quick-sch-wrap {gap: 30px; margin-top: 40px;}
    }

    @media(max-width:1024px){
        .quick-sch-wrap {flex-direction: column;}
    }

    @media(max-width:1024px){
        .quick-sch-wrap {gap: 20px;}
    }

.quick-link {flex:1 1 auto; height:443px; padding:32px; border-radius: 20px; border: 1px solid #eee;}
.quick-link h2.tit {margin-bottom:32px; font-size: 24px; font-weight: 700; color: #1A1B1F;}
.quick-link ul {display:grid; grid-template-columns: repeat(5, 1fr); gap:20px; list-style:none;}
.quick-link ul li {display:flex; flex-direction:column; justify-content:end; text-align:center; overflow: hidden; width:148px; height:148px; padding-bottom:18px; border-radius:50px; background:#F3F8FB;}
.quick-link ul li a {display:flex; color:#333; flex-direction: column; justify-content: center; align-items: center; background: #F3F8FB;}
.quick-link ul li a img {max-width:80%; width:100%; height:auto;}
.quick-link ul li a span {display: block; width: 100%; margin-top:12px; font-weight: 500; line-height:1.2;}


    @media(max-width:1440px){
        .quick-link {overflow: hidden; display: flex; flex-direction: column; padding-right:0;}
        
        .quick-list {flex: 1; overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; padding-right: 32px;}
        .quick-link ul {width: min-content; min-width: 100%; gap: 20px 15px;}
        .quick-link ul li {justify-content: flex-end; padding-bottom:0px; width:138px; height:138px;}
        .quick-link ul li a {height: 100%;}
        .quick-link ul li a img {max-width:80%; width:100%; height:auto;}
        .quick-link ul li a span {margin-top:0; font-weight: 400; font-size: 15px; font-weight: 500;}


        .quick-list::-webkit-scrollbar {height: 6px;}
        .quick-list::-webkit-scrollbar-track {background: #fff; border-radius: 10px;}
        .quick-list::-webkit-scrollbar-thumb {background: #fff; border-radius: 10px;}
        .quick-list::-webkit-scrollbar-thumb:hover {background: #fff;}

        

    }


    @media (max-width: 1024px) {
        .quick-link {height:auto; padding:32px 0;}
        .quick-link h2.tit  {margin-left: 32px;}
        .quick-list {padding:0 32px}
        .quick-link ul {display: flex; flex-wrap: nowrap; grid-template-columns: unset; width: min-content; min-width: auto;}

    }

    @media (max-width: 768px) {
        .quick-link {padding:20px 0;}
        .quick-link h2.tit  {margin-left: 20px; font-size: 18px;}
        .quick-list {padding:0 20px}
        .quick-link ul li {width: 90px; height: 90px; border-radius: 24px;}
        .quick-link ul li a span {font-size: 12px;}
    }







.training-schedule {flex:0 0 492px; height:443px; border-radius: 20px; overflow: hidden; border: 1px solid #eee;}
.training-schedule h2.tit {margin-bottom:24px; padding:32px 0 0 32px; font-size: 24px; font-weight: 700; color: #1A1B1F;}

.schedule-cal .fc {margin-right: -1px;}
.schedule-cal .fc-col-header {border-top: 1px solid #000 !important;}
.schedule-cal .fc .fc-toolbar-title {font-size:18px; color:#878C99; font-weight:400; margin: 0 10px;}

.schedule-cal .fc .fc-toolbar {justify-content:center !important; margin-bottom: 14px;}
.schedule-cal .fc .fc-button {color:#878C99 !important; padding:0 !important; border:none !important; background: none !important; outline:none; box-shadow:none !important;}

.schedule-cal .fc .fc-daygrid-day-top{flex-direction:row; justify-content:flex-start; padding:4px 6px;}

.schedule-cal .fc .fc-col-header-cell {height: 30px !important; vertical-align: middle;}
.schedule-cal .fc .fc-col-header-cell-cushion {font-size: 14px; font-weight:400}

.schedule-cal .fc.fc-theme-standard {border: none !important;}

.schedule-cal .fc .fc-scrollgrid {border: none !important;}

.schedule-cal .fc-scrollgrid-section > td {border-bottom: none !important;}

.schedule-cal .fc .fc-daygrid-day-number {font-size: 13px;}

.schedule-cal .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {min-height:1.6em;}


    @media (max-width:1024px) {
        
        .training-schedule {flex: 0 0 425px; height:auto;}
    }


    @media (max-width: 768px) {
        
        .training-schedule h2.tit { padding:20px 0 0 20px; font-size: 18px;}

    }




/* 메인 게시판 */

/* 공지사항 */

.main-board-wrap {display: flex; width: 100%; justify-content: space-between; margin-top: 80px; padding:40px; gap: 72px; border-radius: 20px; border: 1px solid #eee; background: #fff;}

.notice-board {flex:1 0.8 auto; width:100%; min-width: 0;}
.notice-board .tit-wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;}
.notice-board .tit-wrap h2 {font-size: 24px; font-weight: 700; color: #1A1B1F;}
.notice-board .tit-wrap a {display: inline-block; margin-right: 5px; font-size: 18px; color: #1A1B1F; font-weight: 400;}
.notice-board .tit-wrap a:after {display: inline-block; position: relative; top:-2px; margin-left:8px; content: ''; width:8px; height:8px; border: 1px solid #000; transform: rotate(45deg); border-width: 1px 1px 0 0;}
.notice-board .board-list {display: flex; justify-content: space-between; gap:32px}
.notice-board .board-list li {flex:1}
.notice-board .board-list strong {display: block; height:52px; width: 100%; max-width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 26px; font-size: 18px; font-weight: 500; color: #1A1B1F;   word-break: keep-all; overflow-wrap: break-word;}
.notice-board .board-list .sub {padding-top: 20px; margin-top: 20px; border-top: 1px solid #1A1B1F;}
.notice-board .board-list .sub .date {display: inline-block; margin-bottom:10px; color:#878C99; font-size: 14px; font-weight: 400;}
.notice-board .board-list .sub .txt {display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; width: 100%; max-width:100%; color: #595E6C; line-height: 28px; font-size: 16px; font-weight: 400;}



.faq-board {flex:1 1 auto; width:100%; min-width: 0;}
.faq-board .tit-wrap {display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px;}
.faq-board .tit-wrap h2 {font-size: 24px; font-weight: 700; color: #1A1B1F;}
.faq-board .tit-wrap a {display: inline-block; margin-right: 5px; font-size: 18px; color: #1A1B1F; font-weight: 400;}
.faq-board .tit-wrap a:after {display: inline-block; position: relative; top:-2px; margin-left:8px; content: ''; width:8px; height:8px; border: 1px solid #000; transform: rotate(45deg); border-width: 1px 1px 0 0;}
.faq-board .board-list li a {display: flex; justify-content: space-between; align-items: center; padding:16.5px 0; border-bottom: 1px solid #eee; gap:60px;}
.faq-board .board-list li:first-child a {padding-top: 0;}
.faq-board .board-list li:last-child a {padding-bottom: 0; border-bottom:none;}
.faq-board .board-list li .txt {flex: 1; display: block; overflow: hidden; min-width: 0; 
  text-overflow: ellipsis; white-space: nowrap; color: #595E6C; font-size: 16px; font-weight: 500; line-height:25px;}
.faq-board .board-list li .date {flex-shrink: 0; color: #878C99; font-size: 14px; font-weight: 400;}



@media (max-width:1024px){

    .main-board-wrap {flex-direction: column; padding:0px; border: none; margin-top: 20px; gap: 20px;}

    .notice-board {padding:32px; border: 1px solid #eee; border-radius: 20px;}
    .notice-board .tit-wrap a {font-size:16px;}
    .notice-board .board-list {flex-direction: column; gap:40px}
    .notice-board .board-list strong {height:auto; -webkit-line-clamp: 1;}
    
    .faq-board {padding:32px; border: 1px solid #eee; border-radius: 20px;}
    .faq-board .tit-wrap a {font-size:16px;}
    .faq-board .board-list {}
    .faq-board .board-list li a {flex-direction: column; gap:5px; align-items: flex-start;}
    .faq-board .board-list li .txt {flex: 1;  min-width: 0; width:100%; overflow: hidden;}
    
}



@media (max-width:768px){

    .faq-board {padding:20px}
    .notice-board {padding:20px;}

    .notice-board .tit-wrap h2 {font-size: 18px;}
    .faq-board .tit-wrap h2 {font-size: 18px;}
}