@charset "utf-8";

*{
    box-sizing: border-box;
}


/* 화면 전체 초기화 및 원페이지 설정 */
html, body {
    padding: 0;
    margin: 0;
    font-family: 'Noto Sans KR', ‘Malgun Gothic’, sans-serif;
    font-size: 16px;
    line-height: 100%;
    color: #000;
    min-height: 100vh;
    /*overflow: hidden;*/
}


/* 기존 잔존 CSS */
.login_wrap {
    position: absolute;
    width: 1235px;
    padding: 70px 80px;
    box-sizing: border-box;
    letter-spacing: -1px
}

.login_wrap header:after {
    clear: both;
    content: '';
    display: block
}

.login_wrap h1 {
    width: 547px;
    height: 60px;
    padding-bottom: 20px;
    font-size: 0;
    background: url(../img/logo.png) no-repeat;
}

.login_wrap header h1+div {
    float: right;
    margin-top: -50px;
    font-size: 14px;
}

.login_wrap header h1+div a {
    display: inline-block;
    margin-left: 3px;
    border-bottom: 1px solid #000;
    font-weight: bold;
    padding: 0 5px 10px 35px
}

.login_wrap header h1+div a:nth-child(1) {
    background: url(../img/icon0.png) no-repeat 5px 1px;
}

.login_wrap header h1+div a:nth-child(2) {
    background: url(../img/icon2.png) no-repeat 12px 0px;
}

.w_box {
    border: 3px solid #dcdcdc;
    padding: 50px 60px
}

.box01:after {
    clear: both;
    content: '';
    display: block
}

.box01 .cobox {
    float: left;
    width: 65%;
    padding-right: 55px;
    box-sizing: border-box
}

.box01 .cobox h2 {
    font-weight: bold;
    font-size: 20px;
    color: #a3080d;
    padding-bottom: 18px;
}

.box01 .cobox p {
    line-height: 1.2
}

.box01 .faqbox {
    float: right;
    width: 35%;
    position: relative
}

.box01 .faqbox h2 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #999;
    padding-bottom: 15px;
    margin-bottom: 7px;
}

/* .bxslider{
    margin: 0;
    padding: 0;
}

.box01 .bx-viewport {
    width: 100%;
}

.bx-viewport{
    margin: 0;
    padding: 0;
} */
/* 
.bx-controls {
    position: absolute;
    right: -3px;
    top: -3px;
}

.bx-controls a {
    display: inline-block;
    width: 18px;
    height: 17px;
    font-size: 0;
    margin-left: 5px;
} */
/* 
.bx-controls .bx-prev {
    background: url(../img/ar_left.png) no-repeat
}

.bx-controls .bx-next {
    background: url(../img/ar_right.png) no-repeat
} *

.loginbox {
    padding-top: 50px;
}

.loginbox ul {
    width: 100%;
}

.loginbox ul:after {
    clear: both;
    content: '';
    display: block
}

.loginbox li {
    float: left;
    width: 32%
}

.loginbox li:nth-child(2) {
    margin: 0 2%
}

.loginbox li input {
    width: 100%;
    border: 1px solid #bcbcbc;
    height: 52px;
    box-sizing: border-box;
    padding: 0 20px
}

.loginbox li input[type=submit] {
    background: #93060b;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

.loginbox p input {
    margin: 0;
}

.loginbox p {
    margin: 5px 0 40px;
    color: #a7a7a7;
    font-size: 14px;
    vertical-align: middle
}

.box02 {
    background: #f2f2f2;
}

.box02:after {
    clear: both;
    content: '';
    display: block
}

.box02 li {
    box-sizing: border-box;
    width: 25%;
    float: left;
}

.box02 li a {
    display: block;
    padding: 135px 15px 30px;
    font-size: 14px;
    text-align: center;
    line-height: 1.5;
}

.box02 li h2 {
    color: #b11116;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 5px;
}

.box02 li:nth-child(1) {
    background: url(../img/info_01.png) no-repeat center 30px
}

.box02 li:nth-child(2) {
    background: url(../img/02.png) no-repeat center 30px
}

.box02 li:nth-child(3) {
    background: url(../img/03.png) no-repeat center 30px
}

.box02 li:nth-child(4) {
    background: url(../img/04.png) no-repeat center 30px
}



 */

 .bx-pager{
    display: none;
 }


/* .banner,
.bx-wrapper,
.bx-viewport,
.banner-slider,
.pentagon{
    position: relative;
}


.bx-wrapper,
.bx-viewport{
    overflow: hidden;
} */

/* bx-slider(배너 슬라이더) 초기화 */

.banner,
.bx-wrapper,
.bx-viewport,
.banner-slider,
.banner-slider div{
    margin: 0;
    padding: 0;
}

/* 페이지 전체 - 너비, 최소 높이 설정 */
 .page{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
 }

 /* 본문 - 본문 전체 레이아웃 설정 */
 .container{
    flex: 1;
    display: flex;
    flex-direction: column;
    /* height: 100%; */
    min-height: 100vh;
 }

 /* 섹션(본문 전체 위를 덮는) - 배너 부분 추가를 위한 위치설정 */
 .section{
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
 }

  /*  bx-slider 자리 공간 확보 */
 .banner{
    position: relative;
    min-height: 100vh;
    height: 80vh !important;
    z-index: 1;
    display: flex;
    align-items: center;
 }

 /* 하단 메뉴(utilities)들 담는 오각형 */
 .pentagon{
    position: absolute;
    left: 0;
    bottom: 85px;
    width: 100%;
    height: 150px;
    background-color: #000;
    opacity: 70%;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;

    clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 100%,
        0% 100%,
        0% 25%
    );
 }

/* 하단 메뉴 4개 위치/배치 설정 */
 .utils{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 60px;
 }


/* 하단 메뉴 아이콘+이름 담는 원모양 박스 */
 .utils div{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7px;
    background-color: #fff;
    border-radius: 50%;
    min-width: 105px;
    min-height: 105px;
    z-index: 30;
 }

 /* 메뉴 원모양 박스 감싸는 a태그(링크) */
 .utils a{
    text-decoration: none;
 }

/* 학교 홈페이지 아이콘(lucide icon SVG 원본) */
 .lucide-graduation-cap-icon{
    stroke: #000;
 }

 /* 학교 홈페이지 아이콘 + 이름 + hover 시 생기는 주변 원 담는 박스 */
 .knu-home-util{
    position: relative;
 }

 /* 모든 메뉴 hover 시 생기는 주변 원 박스 */
 .knu-home-util-hover{
    position: absolute !important;
    border: 3px dotted #990f13;
    border-radius: 50%;
    z-index: 1 !important;
    min-width: 120px !important;
    min-height: 120px !important;
    opacity: 0;
    background: none !important;
 }

/* 학교 홈페이지 메뉴 hover 시 이벤트 */
 .knu-home-util:hover{
    background-color: #000;
    border: 3px solid #fff;
    opacity: 1 !important;
    transition-duration: 0.3s;
 }

 /* 하단 메뉴 감싸는 원모양 박스 애니메이션 정의 */
 @keyframes spin {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
 }

 /* 학교 홈페이지 메뉴 hover 시 주변 원모양 박스 애니메이션 */
 .knu-home-util:hover .knu-home-util-hover{
    opacity: 1;
    transition-duration: 0.3s;

    animation: spin 2.5s linear infinite;
 }

 /* 학교홈페이지 hover 시 이름 색상변화 */
 .knu-home-util:hover p{
    color: #fff;
 }

 /* 학교 홈페이지 hover 시 아이콘 변화 */
 .knu-home-util:hover .lucide-graduation-cap-icon{
    stroke: #fff;
    transition-duration: 0.3s;
}

/* 수강 신청 메뉴 박스 */
.calendar-util{
    position: relative;
}

/* 수강 신청 hover 시, 이벤트 */
.calendar-util:hover{
    background-color: #000;
    border: 3px solid #fff;
    opacity: 1 !important;
    transition-duration: 0.3s;
}

/* 수강 신청 hover 시, 이름 색상 변화 */
.calendar-util:hover p{
    color: #fff;
    transition-duration: 0.2s;
}

/* 수강 신청 아이콘 */
 .lucide-calendar-check2-icon{
    stroke: #000;
 }

 /* 수강신청 hover 시, 아이콘 변화 */
 .calendar-util:hover .lucide-calendar-check2-icon{
    stroke: #fff;
    transition-duration: 0.2s;
 }

 /* 수강 신청 hover 시, 주변 원박스 애니메이션 */
 .calendar-util:hover .knu-home-util-hover{
    opacity: 1;
    transition-duration: 0.3s;

    animation: spin 2.5s linear infinite;
 }

 /* 2차 인증 안내 박스 */
 .validate-util{
    position: relative;
}

/* 2차 인증 안내 hover 시, 애니메이션 */
.validate-util:hover{
    background-color: #000;
    border: 3px solid #fff;
    opacity: 1 !important;
    transition-duration: 0.3s;
}

/* 2차 인증 hover 시, 이름 변화 */
.validate-util:hover p{
    color: #fff;
}

/* 2차 인증 아이콘 */
 .lucide-key-round-icon{
    stroke: #000;
 }

 /* 2차인증 hover 시, 아이콘 변화 */
 .validate-util:hover .lucide-key-round-icon{
    stroke: #fff;
    transition-duration: 0.2s;
 }

 /* 2차 인증 주변 원 박스 애니메이션 */
 .validate-util:hover .knu-home-util-hover{
    opacity: 1;
    transition-duration: 0.3s;

    animation: spin 2.5s linear infinite;
 }

 /* 원격지원 박스 */
  .monitor-util{
    position: relative;
}

/* 원격지원 hover 시, 애니메이션 */
.monitor-util:hover{
    background-color: #000;
    border: 3px solid #fff;
    opacity: 1 !important;
    transition-duration: 0.3s;
}

/* 원격 지원 hover 시, 이름 변화 */
.monitor-util:hover p{
    color: #fff;
}

/* 원격 지원 아이콘 */
 .lucide-monitor-up-icon{
    stroke: #000;
 }

 /* 원격 지원 hover 시, 아이콘 변화 */
 .monitor-util:hover .lucide-monitor-up-icon{
    stroke: #fff;
    transition-duration: 0.2s;
 }

 /* 원격 지원 hover 시, 주변 원 애니메이션 */
 .monitor-util:hover .knu-home-util-hover{
    opacity: 1;
    transition-duration: 0.3s;

    animation: spin 2.5s linear infinite;
 }

  .view-utils{
    position: absolute;
    top: 5px;
    display: none;
    width: 100%;
    height: fit-content;
 }

 .view-utils-btn{
    background: none;
    border: none;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
 }

 .hide-utils-text{
    display: none;
 }

 .lucide-chevron-down{
    display: none;
 }

 /* 하단 메뉴 이름 글씨 초기화 */
 .utils a div p{
    color: #000;
    font-weight: 600;
    font-size: 13px;
    margin: 0 !important;
    padding: 0 !important;
 }

 /* 배너(bx-slider) 너비, 높이 설정 */
 .banner-slider{
    width: 100%;
    height: 100%;
 }

 /* 배너 생선 전, 공간 확보 */
 .banner-area{
    width: 100%;
    height: 100%;
 }

 /* 배너 생성 시, 감싸지는 박스 초기화 및 너비, 높이 설정 */
 .bx-viewport, .bx-wrapper {
    width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 0;
    /* position: relative; */
 }

 /* 배너 생성 시, 감싸지는 박스 스크롤 방지 */
 /* .bx-viewport{
    overflow: hidden !important;
 } */

/* 로그인 박스 */
 .login-box{
    position: absolute;
    top: 170px;
    right: 300px;
    z-index: 199;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-color: #000;
    opacity: 0.6;
    border-radius: 10px;
    min-width: 400px;
    width: 400px;
    min-height: 300px;
    height: 405px;
    gap: 20px;
 }

 /* 로그인 박스 hover 시, 선명해지는 이벤트 */
 .login-box:hover{
    opacity: 1;
    transition-duration: 0.2s;
 }

 /* 로그인 박스 내 양식 너비 설정 */
 .login-box form{
    width: 100%;
 }

/* 로그인 박스 제목 글꼴 설정 */
 .login-text h2{
    color: #fff;
    font-size: 28px;
 }

 /* 로그인 박스 내 input(양식) 공간 확보 및 배치 설정 */
 .input-group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
 }

 /* 로그인 박스 내 input 크기, 모양, 글꼴 설정 */
 .input-group input{
    min-height: 40px;
    font-size: 15px;
    border-radius: 5px;
    padding-left: 10px;
    font-weight: 600;
    border: none;
 }

 /* 로그인 박스 내 입력 대기, 입력 시 선명도 100% 설정 */
 .login-box:focus-within{
    opacity: 1;
 }

 /* 아이디 저장 부분 배치, 위치 설정 */
 .ssoidSave-area{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 5px;
 }

 /* 아이디 저장 체크박스 설정 */
 .ssoidSave-area input{
    transform: scale(1.3);
    cursor: pointer;
}

 /* 아이디 저장 글꼴 설정 */
 .ssoidSave-area label{
    color: #fff;
    font-weight: 500;
 }

 /* 비밀번호 입력칸 너비설정 */
 #p_pass_id{
    width: 100%;
    box-sizing: border-box;
}

/* 비밀번호 확인버튼 */
 .pwd-toggle{
    position: absolute;
    height: 100%;
    border: none;
    background: none;
    right: 10px;
}

/* 비밀번호 확인버튼 hover 시 마우스 모양 설정 */
 .pwd-toggle:hover{
    cursor: pointer;
 }

 
/* 로그인 버튼 */
.submit-btn {
    min-height: 35px;
    background-color: #990f13;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    border-radius: 5px;
    border: none;
}

/* 로그인 버튼 hover시 마우스 모양 설정 */
.submit-btn:hover{
    cursor: pointer;
}

/* 아이디 찾기, 비밀번홀 찾기 배치 */
 .login-opt{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 아이디 찾기, 비밀번호 찾기 글꼴 설정 */
.find-login a{
    text-decoration: none;
    color: #fff;
    font-weight: 500;
}

.find-login span{
    color: #D9D9D9;
}

/* 비밀번호 입력 칸, 확인버튼 위치 설정 */
.pwd-grp{
    position: relative;
}
/* 글꼴 설정 끝 */

/* 배너 5개 모양, 크기, 이미지, 배치 설정 */
 .banner2{
    width: 100%;
    height: 100vh !important;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../img/1.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
 }

  .banner1{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../img/2.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
 }

  .banner3{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../img/3.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
 }
 
  .banner4{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../img/4.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
 }

   .banner5{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), url('../img/5.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
 }
/* 배너설정 끝 */

/* 배너 내 글꼴 담을 박스 설정 */
 .banner-contents{
    width: fit-content;
    margin-left: 150px !important;
    margin-bottom: 50px !important;
 }

 /* 배너 글귀 색상 설정 */
 .banner-text h1,span{
    color: #fff;
    /* text-align: center; */
 }

 /* 배너 글귀 내 제목 글꼴 설정 */
 .banner-text h1{
    font-size: 52px;
    font-weight: 700;
    text-decoration: 4px underline #fff;
    text-underline-offset: 13px;
    margin-bottom: 55px;
    letter-spacing: 5%;
 }

 /* 배너 글귀 내 소제목 글꼴 설정 */
 .banner-text span{
    font-size: 28px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 5%;
    line-height: 30px;
 }

 


 /* 하단 Footer */
 .footer{
    background-color: #000;
    opacity: 0.7;
    width: 100%;
    height: fit-content;
    padding: 15px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: fixed;
    bottom: 0;
    z-index: 300;
}

/* footer hover 시, 선명도 변화 */
.footer:hover{
    opacity: 1;
    animation-duration: 0.2s;
}

/* footer 중앙 텍스트 배치 설정 */
.footer-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: normal;
    min-width: 0;
}

/* footer 중앙 텍스트 글꼴 설정 */
.footer-text span{
    overflow-wrap: anywhere;
    word-break: keep-all;
}

/* footer 내 상위 자식 요소 박스들 너비 설정 */
.footer > div{
    width: auto;
}

/* footer 내 그 외 박스들 위치, 배치 설정 */
.footer div{
    width: auto;
    display: flex;
    justify-content: center;
}

/* Copyright 텍스트 글꼴 설정 */
.copyright span{
    color: #fff;
    font-size: 8px;
    font-weight: 500;
}

/* 주소 텍스트 배치 설정 */
.address{
    display: flex;
    gap: 5px;
}

/* 주소 텍스트 글꼴 설정 */
.address span{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* 대표 연락처 글꼴 설정 */
.tel span{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* footer 우측 sns 메뉴 배치 */
.sns-area{
    display: flex;
    gap: 3px;
    align-items: center;
}

/* sns 아이콘 초기화 */
.sns-icon{
    margin: 0;
    padding: 0;
}

@media (max-height:740px) {
    .pentagon{
        display: none;
    }
    .footer{
        display: none;
    }
}


@media (max-height: 830px) {
    .pentagon.utils-off .utils{
        display: none;
    }
    .pentagon.utils-off{
        height: 50px;
    }
    .view-utils{
        display: flex;
        justify-content: center;
    }

    .pentagon.utils-off:hover{
        cursor: pointer;
        transition-duration: 0.2s;
        opacity: 1;
    }
    
    .view-utils-btn:hover{
        cursor: pointer;
        transition-duration: 0.2s;
    }
    .pentagon.utils-on:hover{
        transition-duration: 0.2s;
    }

    .pentagon.utils-on .utils{
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 60px;
    }
    .pentagon.utils-on{
        height: 170px;
    }

    .pentagon.utils-on .view-utils-text{
        display: none;
    }

    .pentagon.utils-on .hide-utils-text{
        display: block;
    }

    .pentagon.utils-on .lucide-chevron-up{
        display: none;
    }

    .pentagon.utils-on .lucide-chevron-down{
        display: block;
    }

    .pentagon.utils-on:has(.view-utils-btn:hover){
        opacity: 1;
        transition-duration: 0.2s;
    }
}

/* 미디어 쿼리 - 화면 너비 최소 2800px 이상 (4K) */
@media (min-width:2800px) {
    .login-box{
        top: 700px;
    }
}

/* 미디어 쿼리 - 화면 너비 최소 2400px 이상(Laptop L -> 4K 넘어갈 때) */
@media (min-width:2480px) {
    .banner{
        min-height: 100vh !important;
    }

    .login-box{
        top:400px;
        scale: 1.5;
    }

    .pentagon{
        bottom: 83.9px;
    }
}

/* 미디어 쿼리 - 화면 너비 최대 1440px 이하(Laptop L -> Laptop 넘어갈 때) */
@media (max-width:1440px) {
    .banner{
        height: 100vh !important;
    }
    /*.pentagon{
        height: 150px !important;
    }*/
    .login-box{
        top: 200px !important;
    }
}

/* 미디어 쿼리 -화면 너비 최대 1380px 이하(Laptop 이하 부터 배너 텍스트 제거) */
@media (max-width:1380px) {
      .banner-contents{
        display: none;
    }
}

/* 미디어 쿼리 - 화면 너비 최대 1024px 이하(Laptop -> 태블릿 넘어갈 때) */
@media (max-width:1024px) {
    .banner{
        height: 100vh !important;
    }
    .pentagon{
        height: 200px;
    }

    .utils div{
        min-width: 100px;
        min-height: 100px;
    }
    .utils a div img{
        min-width: 30px;
        min-height: 30px;
    }
    .utils a div p{
        font-size: 12px;
    }
    .login-box{
        top: 150px !important;
    }
}

@media (max-width:815px) {
     .pentagon{
        display: none;
    }

    .footer{
        display: none;
    }
}

/* 미디어 쿼리 - 화면 너비 최대 768px 이하(태블릿 -> 모바일 넘어갈 때) */
@media (max-width:768px) {

    .pentagon{
        display: none;
    }

    .footer{
        display: none;
    }

    .footer-text{
        width: 100%;
    }

    .copyright span,
    .address span,
    .tel span{
        font-size: 12px;    
    }

    .sns-area{
        width: 100%;
        justify-content: flex-start;
    }

    .banner{
        height: 858px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }


    .login-box{
        top: auto;
        right: auto;
    }
    
}

@media (max-width:375px) {
    .login-box{
        scale: 0.8;
    }
}