@charset "UTF-8";

/* ----- 폰트 ----- */
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 300;
  src: local("Pretendard Light"),
       url(../fonts/Pretendard-Light.woff2) format("woff2"),
       url(../fonts/Pretendard-Light.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 400;
  src: local("Pretendard Regular"),
       url(../fonts/Pretendard-Regular.woff2) format("woff2"),
       url(../fonts/Pretendard-Regular.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 600;
  src: local("Pretendard SemiBold"),
       url(../fonts/Pretendard-SemiBold.woff2) format("woff2"),
       url(../fonts/Pretendard-SemiBold.woff) format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-style: normal;
  font-weight: 700;
  src: local("Pretendard Bold"),
       url(../fonts/Pretendard-Bold.woff2) format("woff2"),
       url(../fonts/Pretendard-Bold.woff) format("woff");
}


/* ----- 스타일 초기화, 기본폰트 설정 등 ----- */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {display: block}
[hidden] {display: none}
body {line-height: 1.3}
menu,ol,ul {list-style: none}
blockquote,q {quotes: none}
blockquote:after,
blockquote:before,
q:after,
q:before {content: ''; content: none}
table {border-collapse: collapse; border-spacing: 0}

a,abbr,acronym,address,applet,article,aside,audio,
b,big,blockquote,body,button,
canvas,caption,center,cite,code,
dd,del,details,dfn,div,dl,dt,
em,embed,
fieldset,form,figcaption,figure,footer,
header,h1,h2,h3,h4,h5,h6,hgroup,html,
i,iframe,img, ins,input,
kbd,
label,legend,li,
main,mark,menu,
nav,
object,ol,output,
p,pre,
q,
ruby,
s,samp,section,small,span,strike,strong,sub,summary,sup,select,
textarea, table,tbody,td,tfoot,th,thead,time,tr,tt,
u,ul,
var,video {margin: 0; padding: 0; font-family:  "Pretendard", 'Malgun Gothic', '맑은 고딕', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Helvetica Neue', Helvetica, Arial, Dotum, '돋움', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; letter-spacing: -.5px; border: 0; vertical-align: baseline; /*color: #333;*/}
body,input,textarea,button,select,table thead td, table thead th, table tbody td, table tbody th  { font-size: 19px; overflow-x: hidden}
* {  -webkit-box-sizing: border-box;  box-sizing: border-box}
a,button {text-decoration: none !important; background: 0 0; padding: 0; border: 0;}
a {color: inherit !important;}
a:active,
a:focus,
a:hover,
a:visited,
button:active,
button:focus,
button:hover,
button:visited {text-decoration: none}
a:active,
a:visited,
button:active,
button:visited {outline: 0}
button {overflow: hidden;}

/* ----- 커스텀 체크박스 ----- */
.custom-check[type="checkbox"] {appearance: none; -webkit-ppearance: none; width: 22px; height: 22px; border: 2px solid #21252970; border-radius: 50%; position: relative; margin-right: 5px; cursor: pointer; transition: 0.15s ease-in-out;}
.custom-check[type="checkbox"]::before {content: ''; display: inline-block; width: 7px; height: 10px; border: 2px solid #21252970; border-left: none; border-top: none; transform: translate(7.75px, 4.5px) rotate(45deg); position: absolute; top: -2px; left: -2px; transition: 0.15s ease-in-out;}
.custom-check[type="checkbox"]:checked {border-color: #003399;}
.custom-check[type="checkbox"]:checked::before {border-color: #003399;}
.privacy-wrap .custom-check[type="checkbox"] {border-color: #dee2e6;}
.privacy-wrap .custom-check[type="checkbox"]::before {border-color: #dee2e6;}
.privacy-wrap .custom-check[type="checkbox"]:checked {border-color: #5886c9;}
.privacy-wrap .custom-check[type="checkbox"]:checked::before {border-color: #5886c9;}

/* ----- 로그인 ----- */
html,body {margin: 0; padding: 0; box-sizing: border-box; width: 100%; height: 100%;}

body {min-height: 100vh;display: flex; align-items: center; justify-content: center; padding: 0 50px; position: relative; background-color: #dfdfdf !important;}

/*
body::before {content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: 0;}
*/
body::before {
    width: 800px;
    height: 350px;
    content: "";
    position: fixed;
    bottom: 0;
    left: 42px;
    background:url('../images/jst-logo-g.svg') no-repeat center center / contain;
    /* 2. 블러 처리 */
    /* filter: blur(1px); */
    /* 3. 테두리 하얀 선 방지 */
    transform: scale(1.1);
    z-index: -1;
}

/* 컨테이너: 화면 전체를 덮음 */
.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 비메오 iframe: 배경으로 꽉 채우기 */
.video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 클릭 안되게 방지 */
    z-index: -1;
}


.login-wrap {width: 100%; height: 100%;z-index: 1; display: flex; align-items: center; justify-content: center; gap: 40px; max-width: 1500px; word-break: keep-all; position: relative;}

.login-wrap .login-info-box {width: 55%; background-color: rgba(255,255,255,0.8); padding: 50px 40px; border-radius: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);}
.login-wrap .login-info-box .login-info-tit {font-size: 28px; font-weight: bold; margin-bottom: 20px;}
.login-wrap .login-info-box .login-info-tit i {display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 25px; border-radius: 10px; margin-right: 10px; background-color: #012875; color: #fff;}
.login-wrap .login-info-box .login-info {padding-left: 5px; margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; max-height: 455px; overflow: auto;}
.login-wrap .login-info-box .login-info li {padding-left: 18px; position: relative; line-height: 1.7; font-size: 19px;}
.login-wrap .login-info-box .login-info li::before {content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #012875; position: absolute; top: 13px; left: 0;}

.login-info-box .info-top {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #ffffff77;}

.login-info-box .info-bottom .login-info li a {display: flex; align-items: center; justify-content: space-between;}
.login-info-box .info-bottom .login-info li a .info-tit {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; min-width: 0; display: block;}
.login-info-box .info-bottom .login-info li a:hover .info-tit {text-decoration: underline !important;}
.login-info-box .info-bottom .login-info li a .date {flex-shrink: 0; margin-left: 20px; white-space: nowrap; color: #444; font-weight: 300;}

.login-wrap .login-box {width: 45%; padding: 50px 40px; border-radius: 20px; background-color: #fff; backdrop-filter: blur(4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);}
.login-wrap .login-box .login-tit {display: flex; flex-direction: column; align-items: center; justify-content: center; }

.login-wrap .login-box .login-title{display:flex; align-items: center; justify-content: center; width:100%;padding-bottom:10px;}

.login-wrap .login-box .login-tit img {width: 100%; height: 100%; max-width: 200px;}
.login-wrap .login-box .login-tit .login-tit {font-size: 32px; font-weight: 700; margin: 5px 0 0 20px;}

/* 탭 바 전체 설정 */
.login-box .nav-tabs {
    box-sizing: border-box !important;
    border-radius: 100px;
    border: 1px solid #dee2e6;
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    align-items: center;
    margin-top: 10px;
    height: 45px;
}

/* 탭 항목 50%씩 분할 */
.login-box .nav-item {
    flex: 1 1 50% !important; /* 핵심: 정확히 50% 점유 */
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 버튼 스타일 정리 */
.login-box .nav-link {
    width: 100%;
    white-space: nowrap; /* 텍스트 한 줄 유지 */
    padding: 12px 5px;   /* 상하좌우 여백 조절 */
	color:#000;
}
.login-box .nav-tabs .nav-link.active {
    background-color: #012875 !important;
    /* color: #000 !important; */
    font-weight: bold;
	/* border:2px solid #fff; */
  border-radius: 100px;
  color: #fff;
  border: none;
  height: 100%;
}
.login-box .tab-pane{padding:20px 15px 15px 15px; background-color: #fff !important;}
#idp-content{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#member-content{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.nav-tabs .nav-link {height: 100%; border: none !important; border-radius: 100px !important; padding: 0 !important; margin: 0 !important; font-size: 17px;}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {height: 100%; border: none; border-radius: 100px; padding: 0; margin: 0;}



.login-box form .form-label {font-size: 20px; font-weight: 600;/* margin-left: 5px;*/}
.login-box form .form-label i {margin-right: 5px;}
.login-box form .idpw {margin-bottom: 15px; padding: 12px; border-radius: 8px; background-color: #ffffffbb; font-size: 17px;}
.login-box form .idpw:focus {box-shadow: none; border-color: #003399;}
.login-box form .idpw:not(:placeholder-shown) {border-color: #003399;}
.login-box form .password-wrap {position: relative;}
.login-box form .password-wrap .password-eye {position: absolute; top: 48px; right: 20px; font-size: 22px; color: #aaa; display: none;}

/* 브라우저 기본 비밀번호 보기 아이콘 제거 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}
.login-box .capsWarning {padding: 6px 12px; font-size: 16px; display: none; position: absolute; z-index: 10;}

.login-box form .form-check {width: 100%; display: flex; font-size: 17px; display: flex; align-items: center; margin-bottom: 25px;}
.login-box form .form-check-input {cursor: pointer; margin-top: -1px; margin-right: 5px;}
.login-box form .form-check-label {cursor: pointer;}
.login-box form .form-check .findidpw {margin-left: auto; color: #212529;}
.login-box form .btn {width: 100%; padding: 10px; font-size: 20px; border-radius: 8px; background-color: #003399; border-color: #003399; color: #fff;}
.login-box form .btn:hover {background-color: #002b80; border-color: #002b80;}

.login-box .join {display: flex; align-items: center; justify-content: center; margin-top: 25px; gap: 10px; font-size: 17px;}
.login-box .join a.link {text-decoration: underline !important; font-weight: 600; color: #002b80 !important;}

.copy {position: absolute; bottom: 10px; color: #999; font-size: 17px; font-weight: 300;}

@media (max-width: 1400px){
  body {padding: 0 20px;}
  body::before {
    width: 500px;
    height: 220px;
    bottom: 0;
    left: 26px;
  }
  .login-wrap {gap: 20px;}

  .login-wrap .login-info-box {padding: 40px 25px;}
  .login-wrap .login-info-box .login-info-tit {font-size: 26px;}
  .login-wrap .login-box {padding: 40px 25px;}
  .login-wrap .login-box .login-tit .login-tit {font-size: 26px;}
}
@media (max-width: 1180px){
  .login-wrap .login-info-box {padding: 40px 20px;}
  .login-wrap .login-box .login-tit img {max-width: 190px;}
  .login-wrap .login-info-box .login-info-tit {font-size: 24px;}
  .login-wrap .login-info-box .login-info li {font-size: 18px;}

  .login-wrap .login-box {padding: 40px 20px;}
  .login-wrap .login-box .login-tit .login-tit {font-size: 24px;}
  .login-box form .form-label {font-size: 19px;}
  .login-box form .idpw {padding: 10px;}
  .login-box form .btn {font-size: 19px;}
  .login-box form .password-wrap .password-eye {top: 45px;}
}
@media (max-width: 980px){
  html,body {height: fit-content;}
  body {padding: 20px; display: block;}
  .login-wrap {flex-direction: column-reverse;}
  
  .login-wrap .login-box {width: 100%;}
  .login-wrap .login-info-box {width: 100%;}

  .copy {position: static; width: 100%; margin: 0 auto; text-align: center; margin-top: 20px;}
}
@media (max-width: 768px){
  body {padding: 15px; display: block;}
  body::before {
    width: 320px;
    height: 140px;
    bottom: 0;
    left: 15px;
  }
  .login-wrap {gap: 15px;}

  .login-wrap .login-box {padding: 40px 15px;}
  .login-wrap .login-box .login-tit img {max-width: 160px;}
  .login-wrap .login-box .login-tit .login-tit {font-size: 22px;}
  .login-box form .form-label {font-size: 18px;}
  .login-box form .form-check {font-size: 16px;}
  .login-box .join {font-size: 16px;}

  .login-wrap .login-info-box {padding: 30px 15px;}
  .login-wrap .login-info-box .login-info {gap: 5px;}
  .login-wrap .login-info-box .login-info-tit {font-size: 22px;}
  .login-wrap .login-info-box .login-info li {font-size: 17px;}
  .login-box form .password-wrap .password-eye {top: 43px;}

  .copy {margin-top: 15px; font-size: 16px;}

  .nav-tabs .nav-link {font-size: 14px;}
}


/* ----- 모달 공통 ----- */
.modal .modal-title {font-weight: bold; font-size: 24px;}
.modal .modal-dialog {padding: 0 28px;}

@media (max-width: 575px) {
  .modal .modal-dialog {padding: 0;}
  .modal .modal-title {font-size: 22px;}
}

/* ----- 공지 모달 ----- */
.login-wrap .modal {text-shadow: none;}
.login-wrap .modal .modal-dialog {max-width: 1000px;}
.login-wrap .modal-info-tit {width: 100%; font-size: 18px; display: inline-block; border-bottom: 1px solid #dee2e6; padding-bottom: 16px; margin-bottom: 10px;}

.login-wrap .modal-body-cont ul {display: flex; flex-direction: column; margin: 0; padding: 0; margin-bottom: 10px;}
.login-wrap .modal-body-cont ul li {font-size: 16px; color: #909090;}
.login-wrap .modal-body-cont .cont-text {font-size: 17px;}


/* ----- 아이디/비밀번호 찾기 모달 ----- */
#findIdPw .modal-dialog {max-width: 600px;}
#findIdPw .modal-body {display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px;}

#findIdPw .nav-underline {font-size: 22px; gap: 70px;}
#findIdPw .nav-link {font-weight: bold; color: #909090; padding: 0 7px; position: relative; z-index: 1; border-bottom: 0;}
#findIdPw .nav-link::before {content: ''; width: 100%; height: 8px; border-radius: 4px; background-color: #0753c538; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); z-index: -1; display: block; opacity: 0; transition: 0.15s ease-in-out;}
#findIdPw .nav-link.active {color: #212529;}
#findIdPw .nav-link.active::before {opacity: 1;}

#findIdPw .tab-content {width: 100%; margin-top: 30px;}
#findIdPw .find-input-wrap {display: flex; font-size: 17px;}
#findIdPw .find-input-wrap .col-form-label {width: 100px;}
#findIdPw .find-input-wrap .find-input {width: 100%; margin-bottom: 15px;}
#findIdPw .form-control {padding: 8px;}

#findIdPw .find-btn-wrap {width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 15px;}
#findIdPw .btn-primary {padding: 8px; width: 180px; font-size: 19px; border-radius: 50px; background-color: #003399; border-color: #003399; color: #fff;}
#findIdPw .btn-primary:hover {background-color: #002b80; border-color: #002b80;}

@media (max-width: 500px) {
  #findIdPw .modal-body {padding: 20px;}

  #findIdPw .tab-content {margin-top: 20px;}
  #findIdPw .find-input-wrap {flex-direction: column; margin-bottom: 5px;}
  #findIdPw .find-input-wrap .find-input {margin-bottom: 0;}

  #findIdPw .nav-underline {font-size: 20px; gap: 30px;}
  #findIdPw .find-btn-wrap {margin-top: 20px;}
}



/* ----- 회원가입 모달 ----- */
#joinModal .required {color: #F06236; margin: 0 3px;}
#joinModal .required-text {font-size: 16px; color: #757577; margin-bottom: 12px;}
#joinModal .modal-dialog {max-width: 700px;}

#joinModal .form-control, #joinModal .form-select {padding: 8px;}
#joinModal .join-input-wrap {display: flex; margin-bottom: 12px;}
#joinModal .join-input-wrap .col-form-label {width: 120px; font-size: 17px;}
#joinModal .join-input {width: 100%; flex: 1;}
#joinModal .join-select {width: 100%; flex: 1; display: flex; gap: 10px;}
#joinModal .join-input-number {display: flex;}
#joinModal .join-input-number span {display: flex; align-items: center; justify-content: center; margin: 0 5px;}

#joinModal .join-input-wrap .join-id-wrap {display: flex; gap: 10px; flex: 1; width: 100%;}
#joinModal .join-input-wrap .join-id-wrap .btn {width: 120px; font-size: 17px;}
#joinModal .btn-outline-primary {--bs-btn-color: #003399; --bs-btn-border-color: #003399; --bs-btn-hover-bg: #003399; --bs-btn-hover-border-color: #003399; --bs-btn-active-bg: #003399; --bs-btn-active-border-color: #003399; --bs-btn-disabled-color: #003399; --bs-btn-disabled-border-color: #003399;}

#joinModal .privacy-wrap .privacy-check-box {display: flex; align-items: center; justify-content: space-between; gap: 5px 15px; flex-wrap: wrap; font-size: 17px;}
#joinModal .privacy-wrap .privacy-check-box .form-check-input, #joinModal .privacy-wrap .privacy-check-box label {cursor: pointer;}
#joinModal .privacy-wrap .privacy-check-box label {font-size: 16px;}
#joinModal .privacy-wrap .privacy-check-box .check {display: flex;}
#joinModal .text-primary {color: #5886c9 !important;}

#joinModal .privacy-wrap {margin-top: 20px;}
#joinModal .privacy-wrap .privacy-info {padding: 15px; max-height: 120px; overflow-y: scroll; background-color: #fbfdfe; border: 1px solid #dee2e6; border-radius: 10px; margin-top: 12px; color: #6c757d; font-size: 16px; word-break: keep-all;}
#joinModal .privacy-wrap .privacy-info h4 {font-size: 17px;}
#joinModal .privacy-wrap .privacy-info::-webkit-scrollbar {width: 5px;}
#joinModal .privacy-wrap .privacy-info::-webkit-scrollbar-thumb {background: #888; border-radius: 5px;}
#joinModal .privacy-wrap .privacy-info::-webkit-scrollbar-thumb:hover {background: #555;}

/* #joinModal .modal-footer {justify-content: center;} */
#joinModal .btn-primary {padding: 8px; width: 180px; font-size: 19px; border-radius: 50px; background-color: #003399; border-color: #003399; color: #fff; margin-top: 16px;}
#joinModal .btn-primary:hover {background-color: #002b80; border-color: #002b80;}

@media (max-width: 500px) {
  #joinModal .join-input-wrap {flex-direction: column; margin-bottom: 5px;}
  #joinModal .required-text {margin-bottom: 0;}

  #joinModal .privacy-wrap .privacy-info {margin-top: 5px;}
}