@charset "UTF-8";

#loginWrap{min-width: 32rem;max-width: 45rem;margin: 0 auto;box-sizing: border-box;}

#loginContainer{background: url(../images/login/login-bg.png) center/cover no-repeat;min-width: 1190px;min-height: 640px;}

/* content */
#loginWrap .content-wrap{height: 100vh;display: flex;flex-direction: column;align-items: center;gap: 2rem; background-color: #fff;padding: 0 2.5rem;}

/* login logo */
.login-logo-wrap{display: flex;flex-direction: column;align-items: center;gap: 1;margin-top: 7.3rem;}
.login-logo-wrap .login-title{font-size: 3rem;font-weight: 700;color: #252C64;margin: 0.5rem 0 1rem 0;}

/* login form */
.login-form{display: flex;flex-direction: column;gap: 1.5rem;;width: 100%;}
.login-form .login-content{position: relative;width: 100%;}
.login-form .login-content label{position: absolute;top: 50%;left: 1.6rem;transform: translateY(-50%);}
.login-form .login-content input[type=text],
.login-form .login-content input[type=password]{width: 100%;box-sizing: border-box;padding: 1.8rem 1.6rem 1.8rem 4.5rem;border-radius: 0.8rem;color: #8E8E8E;border: 1px solid #888888;font-size: 1.7rem;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.login-form .login-content input[type=text]:focus-visible,
.login-form .login-content input[type=password]:focus-visible{outline: 1px solid #264DD9;}
.login-form .checkbox-item{display: flex;align-items: center;gap: 0.8rem;font-size: 1.7rem;font-weight: 400;line-height: 1;color: #1D1D1D;}
.login-form  input[type=submit]{padding: 1.65rem 1rem;margin: 1rem 0;border-radius: 0.8rem;font-size: 2rem;font-weight: 700;background: #3C4696;color: #fff;border: none;}

#loginContainer .container{position: relative;width: 60%;min-width: 1150px;height: 62%;min-height: 600px; display: flex;gap: 15px;}
#loginContainer div[class*="login-con-"] {width: calc((100% - 30px) / 3);display: flex;flex-direction: column;gap: 15px;}

/* mail button */
.mail-btn{margin: 1rem 0;}
.mail-btn .mail-btn-items{display: flex;gap: 6rem;}
.mail-btn .mail-btn-item{display: flex;flex-direction: column;align-items: center;gap: 0.5rem;color: #444;font-size: 1.5rem;font-weight: 500;}

/* copyright */
.copyright-wrap .copyright{color: #828282;font-size: 1.5rem;font-weight: 400;text-align:center;line-height: 1.5;}
#loginContainer .copyright{position: absolute;top: 100%;left: 50%;transform: translateX(-50%);}

/* common */
#loginContainer *{word-break: keep-all;}

.bgc-red{background-color: #FB6565;}
.bgc-orange{background-color: #E47001;}
.bgc-blue{background-color: #2873F4;}
.bgc-purple{background-color: #6862D1;}
.bgc-green{background-color: #14A981;}
.bgc-mint{background-color: #0097A4;}
.bgc-gray{background-color: #8A8C9D;}

.txtc-red{color: #FB6565;}
.txtc-orange{color: #E47001;}
.txtc-blue{color: #2873F4;}
.txtc-purple{color: #6862D1;}
.txtc-green{color: #14A981;}
.txtc-mint{color: #0097A4;}
.txtc-gray{color: #8A8C9D;}

/* 커스텀 스크롤바 - scrollbar custom */
#loginContainer *::-webkit-scrollbar {width: 8px;}
#loginContainer *::-webkit-scrollbar-track {background-color: #f0f0f0;}
#loginContainer *::-webkit-scrollbar-thumb { background-color: #D7D7D7;}
#loginContainer *::-webkit-scrollbar-button { display: none;}
#loginContainer *::-webkit-scrollbar-thumb:hover {background-color: #8e8e8e;}
#loginContainer *::-webkit-scrollbar-track,
#loginContainer *::-webkit-scrollbar-thumb {border-radius: 100px;}

/* 컨텐츠 박스 공용 - content box common */
#loginContainer *{font-family: 'Pretendard GOV';}
#loginContainer ul{list-style: none;}
#loginContainer a{color: inherit;text-decoration: none;}

.pt-content-wrap{height: 100%; background-color: #fff;border-radius: 10px;padding: 15px 30px;padding-top: 0;overflow: hidden;box-shadow: 5px 3px 8px 0px rgba(0, 0, 0, 0.05);}
.pt-title-wrap{height: 55px;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #eee;}

.pt-title-wrap .title{font-size: 18px;font-weight: 700;}

.pt-title-wrap .plus-btn{display: flex;align-items: center;justify-content: center; transition: 0.25s;}
.pt-title-wrap .plus-btn:hover{transform-origin: center; transform: rotate(-90deg);}

.pt-title-wrap .selectbox-wrap{position: relative;display: flex;align-items: center;}
.pt-title-wrap .selectbox-wrap .selectbox-placeholder{display: inline-block; position: relative;width: 120px;height: 33px; padding: 5px 20px 5px 7px;color: #555;font-size: 16px;border: 1px solid #ababab;border-radius: 5px;background-color: #fff; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;}
.pt-title-wrap .selectbox-wrap .selectbox-placeholder::after{content: '\e5cf';position: absolute; top: 50%; right: 7px; transform: translateY(-50%); display: inline-block;font-family: 'Material Icons';}
.pt-title-wrap .selectbox-wrap .selectbox-placeholder.on::after{content: '\e5ce';}
.pt-title-wrap .selectbox-wrap .selectbox-items{max-height: 0px; position: absolute;top: 37px;left: 50%;transform: translateX(-50%);width: 120px;border: none; border-radius: 5px;overflow-y: auto;transition: max-height 0.25s;}
.pt-title-wrap .selectbox-wrap .selectbox-placeholder.on ~ .selectbox-items{max-height: 134px;border: 1px solid #ababab;}
.pt-title-wrap .selectbox-wrap .selectbox-item{height: 33px; position: relative; padding: 5px 7px 5px 25px;color: #555;font-size: 16px;border-bottom: 1px solid #ababab;background-color: #fff; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;}
.pt-title-wrap .selectbox-wrap .selectbox-item:hover{background-color: #f8f8f8;}
.pt-title-wrap .selectbox-wrap .selectbox-item:last-child{border-bottom: none;}
.pt-title-wrap .selectbox-wrap .selectbox-item.active::before{content: '\e876';position: absolute; top: 50%;left: 5px;transform: translateY(-50%); display: inline-block;font-family: 'Material Icons';font-weight: 900; color: #2873F4;}

.pt-title-wrap .title-tab-items{height: 100%;}
.pt-title-wrap .title-tab-item{display: inline-block;height: 100%;border-bottom: 3px solid transparent;padding: 0 15px; font-size: 17px;font-weight: 500;z-index: 0;background-color: #fff;border: none;}
.pt-title-wrap .title-tab-item.active{border-bottom: 3px solid #3C4696;font-weight: 700;color: #3C4696;}

/* 로그인 박스 - login-box */
.login-box{position: relative; width: 100%; height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding-bottom: 121px;}
.login-box form{width: 100%;margin-bottom: 15px;}
.login-box .title-section img{width: 250px;margin-bottom: 30px;}
.login-box .input-section{margin-bottom: 15px;}
.login-box .input-section:has(input){position: relative;}
.login-box .input-section:has(input)::before{position: absolute;top: 50%;left: 18px;transform: translateY(-50%);}
.login-box .input-section:has(input[type=text])::before{content: url(../images/login/login-input-icon.svg);}
.login-box .input-section:has(input[type=password])::before{content: url(../images/login/pw-input-icon.svg);}
.login-box .input-section input{font-size: 16px;padding: 18px 16px 18px 44px;border-radius: 8px;border: 1px solid #3C4696;background: #FFF;color: #000;line-height: 1;}
.login-box .input-section input::placeholder{font-family: 'Pretendard GOV';font-size: 16px;color: #8E8E8E;background-color: #fff;font-style: normal;}
.login-box .input-section input[type=checkbox]{width: 20px;height: 20px;margin-right: 8px;}
.login-box .input-section button{font-size: 16px;font-weight: 700;letter-spacing: 0; padding: 18px 16px;background-color: #3C4696;border-radius: 8px;margin-bottom: 0;}
.login-box .input-section button:hover{background-color: #323b80;}
.login-box .input-section button:active{background-color: #2c336d;}
.login-box .forget-password a{font-size: 16px;font-weight: 400;color: #333 !important;padding: 10px 0;}
.login-box .login-info-link{width: 100%; position: absolute;bottom: 0;left: 50%;transform: translateX(-50%); display: flex;align-items: center;justify-content: center;gap: 10px;padding: 45px 0;background-color: #E47001;}
.login-box .login-info-link:hover{background-color: #e46301;}
.login-box .login-info-link:active{background-color: #e15301;}
.login-box .login-info-link span{font-size: 16px;font-weight: 700;color: #fff;}

/* KIT 공지 - kit notice */
.kit-notice-wrap{width: 100%;height: calc(100% - 55px);overflow-y: auto;margin-top: 5px;}
.kit-notice-items{width: 100%;}
.kit-notice-item{width: 100%;display: flex;flex-direction: column;gap: 5px;padding: 10px 0;border-bottom: 1px dashed #eee;}
.kit-notice-item:last-child{border-bottom: none;}
.kit-notice-item a:hover span{text-decoration: underline;}
.kit-notice-item span{width: 100%;display: inline-block;padding-left: 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.kit-notice-item .notice-title{position: relative; font-size: 16px;font-weight: 500;}
.kit-notice-item .notice-title::before{content: '\ef4a';position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-family: 'Material Icons';font-size: 5px; color: #E47001;}
.kit-notice-item .notice-desc{font-size: 15px;font-weight: 400;color: #666;}

/* 최근 게시글 - recent post */
.recent-post-wrap{display: none; width: 100%;height: calc(100% - 55px);overflow-y: auto;margin-top: 8px;}
.recent-post-items{width: 100%;}
.recent-post-item{width: 100%;}
.recent-post-item a{width: 100%;display: inline-block; padding: 10px 0;font-size: 16px;font-weight: 500;border-bottom: 1px dashed #eee;}
.recent-post-item:last-child a{border-bottom: none;}
.recent-post-item a:hover span{text-decoration: underline;}
.recent-post-title{width: 100%; position: relative;display: inline-block;padding-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.recent-post-title::before{content: '\ef4a';display: inline-block; position: absolute;top: 50%;left: 0;transform: translateY(-50%);font-family: 'Material Icons';font-size: 5px;}


/* 금일 식단표 - meal menu */
.ptn-meal-menu{height: calc((100% / 4) * 2);}
.meal-menu-wrap{width: 100%;height: calc(100% - 58px);overflow-y: auto;margin-top: 3px;}
.meal-menu-items{width: 100%;}
.meal-menu-item{width: 100%;display: flex;align-items: stretch;gap: 15px;padding: 12px 0;border-bottom: 1px dashed #eee;}
.meal-menu-item:last-child{border-bottom: none;}
.meal-title{width: 20%;display: flex;align-items: center;justify-content: center; background-color: #f6f6f6;font-size: 15px;font-weight: 600;}
.meal-desc{width: 80%;display: inline-block;font-size: 15px;font-weight: 400;line-height: 1.5;}

/* 퀵메뉴 - quick menu */
.ptn-quick-menu{height: calc(100% / 4);display: flex;align-items: center;justify-content: center;padding-top: 15px;}
.quick-menu-items{width: 100%; display: flex;justify-content: space-between;}
.quick-menu-item{width: 100%; flex: 1;}
.quick-menu-item a{width: 100%; display: flex;flex-direction: column;align-items: center;gap: 5px;}
.quick-menu-item a:hover span{text-decoration: underline;}
.quick-menu-img-wrap{width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.quick-menu-item:first-child .quick-menu-img-wrap{background-color: #2CB792;}
.quick-menu-item:nth-child(2) .quick-menu-img-wrap{background-color: #4B8AF6;}
.quick-menu-item:nth-child(3) .quick-menu-img-wrap{background-color: #6371E7;}
.quick-menu-item:nth-child(4) .quick-menu-img-wrap{background-color: #9169F3;}
.quick-menu-img-wrap > img{display: inline-block;transition: 0.25s;}
.quick-menu-item a:hover .quick-menu-img-wrap > img{transform: rotateY(180deg);}
.quick-menu-title{width: 70%;font-size: 16px;font-weight: 500;word-break: keep-all;text-align: center;}

/* 바로가기 링크 - go to link */
.login-go-to-link-wrap{width: 100%; height: calc(100% / 4);display: flex;gap: 15px;}
.login-go-to-link{width: 50%;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 10px; border-radius: 10px;box-shadow: 5px 3px 8px 0px rgba(0, 0, 0, 0.05);}
.login-go-to-link.patent{background-color: #1049C5;}
.login-go-to-link.external-service{background-color: #4009B8;}
.login-go-to-link .title{width: 75%;font-weight: 600; color: #fff;text-align: center;}

:where(#loginWrap, #CheckIdWrap, #forgetPwWrap, #otpAuthWrap){min-width: 32rem;max-width: 45rem;margin: 0 auto;box-sizing: border-box;}

/* content */
:where(#loginWrap, #CheckIdWrap, #forgetPwWrap, #otpAuthWrap) .content-wrap{height: 100vh;display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 0 !important; background-color: #fff;padding: 0 2.5rem;}
:where(#forgetPwWrap) .content-wrap{justify-content: flex-start;}
:where(#loginWrap, #CheckIdWrap, #forgetPwWrap, #otpAuthWrap) .content-wrap section{width: 100%;}
:where(#loginWrap, #CheckIdWrap, #forgetPwWrap, #otpAuthWrap) .content-wrap section:not(:last-child, :first-child){padding: 2rem 0;border-top: 1px solid #C7C7C7;}
:where(#loginWrap, #CheckIdWrap, #forgetPwWrap, #otpAuthWrap) .content-wrap section:first-child + section{border-top: none;}
:where(#loginWrap, #CheckIdWrap, #forgetPwWrap, #otpAuthWrap) .content-wrap section:last-child{padding-top: 2rem;}

/* common layout */
.desc-area{display: flex;align-items: center;justify-content: center;}
.desc-area .desc{text-align: center;padding: 0.5rem 0;color: #3C4696;font-weight: 600;}
.sub-desc-area{display: flex;align-items: center;justify-content: center;}
.sub-desc-area .sub-desc{width: 80%;text-align: center;padding: 0.5rem 0;color: #3C4696;font-weight: 400;font-size: 1.4rem;line-height: 1.5;}
.sub-desc-area.list{flex-direction: column;align-items: flex-start;}
.sub-desc-area.list .sub-desc{width: 100%;text-align: left;padding: 0;}
.reissue-btn{width: 100%;padding: 0.5rem 0;background-color: #44A747;color: #fff;border-radius: 0.5rem;font-weight: 600;transition: 0.25s;}
.reissue-btn:hover{background-color: #3D9740;}
.reissue-btn:active{background-color: #368639;}

/* login logo */
.login-logo-wrap{display: flex;flex-direction: column;align-items: center;gap: 1rem;margin-top: 7.3rem;}
.login-logo-wrap .login-title{font-size: 3rem;font-weight: 700;color: #252C64;margin: 0.5rem 0 1rem 0;}

/* login form */
.login-form{display: flex;flex-direction: column;gap: 1.5rem;width: 100%;}
.login-form .login-content{position: relative;width: 100%;}
.login-form .login-content label{position: absolute;top: 50%;left: 1.6rem;transform: translateY(-50%);}
.login-form .login-content input[type=text],
.login-form .login-content input[type=number],
.login-form .login-content input[type=password]{width: 100%;box-sizing: border-box;padding: 1.8rem 1.6rem 1.8rem 4.5rem;border-radius: 0.8rem;color: #1d1d1d;border: 1px solid #888888;font-size: 1.7rem;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.login-form .login-content input[type=text]:focus-visible,
.login-form .login-content input[type=number],
.login-form .login-content input[type=password]:focus-visible{outline: 1px solid #264DD9;}
.login-form .login-content input[type=text]::placeholder,
.login-form .login-content input[type=number],
.login-form .login-content input[type=password]::placeholder{color: #8E8E8E;}
.login-form .login-auth-code{display: flex;align-items: center;justify-content: space-between;gap: 1.5rem;}
.login-form .login-auth-code .input-area{width: 100%;}
.login-form .checkbox-item{display: flex;align-items: center;gap: 0.5rem;font-size: 1.7rem;font-weight: 400;line-height: 1;color: #1D1D1D;}
.login-form .checkbox-item input[type=checkbox]{width: 1.6rem;height: 1.6rem;width: 1.8rem;height: 1.8rem;transform: translateY(2px);}
.login-form  :where(input[type=submit], .auth-btn){padding: 1.65rem 1rem;margin: 1rem 0;border-radius: 0.8rem;font-size: 2rem;font-weight: 700;background: #3C4696;color: #fff;border: none;transition: 0.25s;}
.login-form .auth-btn{min-width: 6.5rem; font-size: 1.7rem;margin: 0;font-weight: 600;}
.login-form  :where(input[type=submit], .auth-btn):hover{background-color: #363F87;}
.login-form  :where(input[type=submit], .auth-btn):active{background-color: #31397A;}
.login-form  :where(input[type=submit], .auth-btn):disabled{background-color: #757575;}
:where(#CheckIdWrap) .login-form  input[type=submit]{margin: 0;}

/* qr area */
.qr-area{display: flex;flex-direction: column;gap: 1.5rem;}
.qr-area-wrap{display: flex;align-items: center;justify-content: center;gap: 1.5em;}
.qr-area .qr-img{width: 10rem;height: 10rem;display: inline-block;}
.qr-area .auth-num-wrap{display: flex;flex-direction: column;align-items: center;gap: 1.5rem;}

/* detail desc area */
.detail-desc-area{border-bottom: 1px solid #C7C7C7;}
.detail-desc-item{display: flex;align-items: center;gap: 0.5rem;position: relative;font-size: 1.5rem;padding: 0.5rem 0;padding-left: 1rem;color: #828282;word-break: keep-all;line-height: 1.5;}
.detail-desc-item::before{content: '\ef4a';position: absolute;top: 1.2rem;left: 0; font-family: 'Material Icons';font-size: 0.5rem;}

/* mail button */
.mail-btn{margin: 1rem 0;}
.mail-btn .mail-btn-items{display: flex;gap: 6rem;}
.mail-btn .mail-btn-item{display: flex;flex-direction: column;align-items: center;gap: 0.5rem;color: #444;font-size: 1.5rem;font-weight: 500;}

/* copyright */
.copyright-wrap{margin-bottom: 10rem;}
.copyright-wrap .copyright{color: #828282;font-size: 1.5rem;font-weight: 400;text-align:center;line-height: 1.5;}

.alert-danger {color: red;}