/* body */
body::after {
    content: '';
    position: absolute;
    z-index: 899;
    width: 100vw;
    height: 100vh;
    background-color: var(--manu-overlay, rgba(0,0,0,.48));
    top: 0;
    left: 0;
    transition: 0.4s;
    opacity: 0;
    visibility: hidden;
}

body.term-toggle.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.72));
    opacity: 1;
    visibility: visible;
}

body.character-toggle-mode.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.70));
    opacity: 1;
    visibility: visible;
}

body.toon-toggle-mode.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.70));
    opacity: 1;
    visibility: visible;
}

body.dark-toggle-mode.dark {
    overflow: hidden;
}

body.dark-toggle-mode.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.70));
    opacity: 1;
    visibility: visible;
    position: fixed;
}

body.auth-toggle-mode.dark {
    overflow: hidden;
}

body.auth-toggle-mode.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.70));
    opacity: 1;
    visibility: visible;
    position: fixed;
}

body.slide-toggle-mode.dark {
    overflow: hidden;
}

body.slide-toggle-mode.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.70));
    opacity: 1;
    visibility: visible;
    position: fixed;
}

body.pwpopup-toggle-mode.dark {
    overflow: hidden;
}

body.pwpopup-toggle-mode.dark::after {
    background-color: var(--manu-overlay-dark, rgba(0,0,0,.70));
    opacity: 1;
    visibility: visible;
    position: fixed;
}

/* menu */
.nav-toggle:after {
    opacity: 1;
    visibility: visible;
}

.nav-menu {
    transform: translateX(100%);
}

.nav-toggle .nav-menu {
    transform: translateX(0);
}

.menu-top .user-img {
    width: 4rem;
    height: 4rem;
    display: flex;
}

.menu-top .menu-top-txt {
    margin-left: 14px;
}

.menu-top .menu-top-txt p {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
    margin-bottom: .4rem;
}

.menu-top .menu-top-txt span {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.48px;
    display: flex;
    align-items: center;
    color: #747474;
}

ul.nav-menu-list > li:last-child {
    border-bottom: 0;
}

ul.nav-menu-list > li.open .top-menu-wrap a {
    color: #6690FC;
}

ul.nav-menu-list > li .top-menu-wrap svg {
    transform: rotate(0);
    transition: .4s;
}

ul.nav-menu-list > li.open .top-menu-wrap svg {
    transform: rotate(180deg);
    transition: .4s;
}

ul.nav-menu-list > li.open .top-menu-wrap svg path {
    fill: #6690FC;
}

ul.nav-menu-list > li .sub-menu {
    transition: max-height 0.2s ease-out;
    max-height: 0;
    overflow: hidden;
    padding: 0 1.6rem;
}

ul.nav-menu-list > li .sub-menu li:first-child {
    padding-top: 1.6rem;
}

ul.nav-menu-list > li .sub-menu li:last-child {
    padding-bottom: 1.1rem;
}

ul.nav-menu-list > li.open .sub-menu {
    max-height: 20rem;
}

ul.nav-menu-list > li .top-menu-wrap > a {
    font-size: 1.6rem;
    color: var(--menu-list-txt, #444444);
    text-decoration: none;
    display: block;
}

ul.nav-menu-list > li > ul {
    width: 100%;
    display: flex;
    gap: 1.4rem;
    flex-direction: column;
}

ul.nav-menu-list > li > ul > li > a {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--menu-list-second-txt, #555555);
    text-decoration: none;
}

.nav-bt {
    padding: 4rem 2rem 2.2rem;
}

.nav-bt .nav-bt-logo {
    display: flex;
    margin-bottom: .8rem;
    width: 19rem;
}

.nav-bt p {
    color: #535353;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
}

.nav-bt p.capylight {
    color: #B4B8C1;
    margin-top: 1.2rem;
}

/* menu header */
.menu-hd button {
    border: 0;
    background: none;
}

/* home header */
.main-hd h1 {
    font-size: 3rem;
    font-weight: 400;
    margin-bottom: 1.2rem;
    color: #FFF;
    text-shadow: 4px 4px 10px #7ea7cd;
}

.main-hd h1 strong {
    display: block;
    font-weight: 700;
}

.main-hd a, .main-hd p {
    font-size: 1.6rem;
    color: var(--main-mypage-txt, #FFF);
    text-decoration: none;
    display: flex;
    align-items: center;
    text-shadow: 4px 4px 10px #7ea7cd;
}

.icon-arrow {
    display: inline-flex;
    margin-left: 2px;
}

.main-hd a .loginTxt {
    text-decoration: underline;
}

/* home body */
.usr-name-intro {
    position: relative;
    z-index: 12;
}

.usr-name-intro h3 {
    color: #fff;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.88px;
    margin-bottom: 1.4rem;
}

.usr-name-intro h3 strong {
    text-decoration-line: underline;
}

.usr-name-intro p {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
    color: #fff;
}

.usr-name-intro p b {
    color: #FFF266;
}

.main-card .title {
    color: #000;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
    margin-bottom: .4rem;
}

.main-card .card-txt {
    color: #6690FC;
    font-size: 1.2rem;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.48px;
}

.card-item p {
    z-index: 2;
    position: relative;
}

.card-item .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.card-item .card-bg img {
    width: 100%;
}

.main-card .slick-dots {
    bottom: 2rem;
    left: 1.6rem;
    transform: translateX(0);
}

.main-card .slick-dots li button {
    background: #E5E6E8;
    border: 0;
}

.main-card .slick-dots li.slick-active button {
    border-radius: 90px;
    width: 1.8rem;
    background: #5B88FA;
}

.card-hd button {
    border: 0;
    background: transparent;
    display: flex;
    filter: drop-shadow(0px 5px 12px rgba(102, 144, 252, 0.30));
}

.card-bd ul li .notice-title {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    color: #000;
    text-overflow: ellipsis;
    max-width: 100%;
    width: 15rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
}

.card-bd ul li .category {
    display: flex;
    width: 52px;
    padding: .2rem 0 .3rem;
    justify-content: center;
    align-items: center;
    border-radius: 9rem;
    border: 1px solid;
    font-size: 1rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.4px;
}

.card-bd ul li .purple {
    border-color: #812FDE;
    color: #812FDE;
}

.card-bd ul li .gray {
    border-color: #535353;
    color: #535353;
}

.card-bd ul li .green {
    border-color: #4BAD5D;
    color: #4BAD5D;
}

.card-bd ul li .blue {
    border-color: #6690FC;
    color: #6690FC;
}

.card-bd.horizontal {
    display: flex;
    gap: 1.5rem;
}

.horizontal-item {
    width: 9rem;
    position: relative;
    padding-top: .7rem;
}

.horizontal-item .sort {
    background: #FFDF2C;
    padding: 7px 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.horizontal-item .img-box {
    width: 9rem;
    height: 9rem;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    margin-bottom: .8rem;
    border-radius: 1rem;
}

.horizontal-item .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.horizontal-item .sub {
    margin-bottom: 1.3rem;
}

.horizontal-item .sub p.sub-txt {
    margin-bottom: .4rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    width: 8.7rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
}

.horizontal-item .sub span.date {
    color: #747474;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
}

.card-bd.horizontal::-webkit-scrollbar {
    width: 0;
    height: 1px
}

.card-bd.horizontal::-webkit-scrollbar-thumb {
    background: #000000;
    /* 스크롤바 색상 */
    border-radius: 10px;
    /* 스크롤바 둥근 테두리 */
}

.card-bd.horizontal::-webkit-scrollbar-track {
    background: #E5E6E8;
    /*스크롤바 뒷 배경 색상*/
}

.ggani-toon-img {
    display: flex;
}

.ggani-toon-img img {
    width: 100%;
}

/* main btn grid */
.main-btn-grid ul li button {
    width: 100%;
    height: 100%;
    border: 0;
    background: none;
    color: var(--menu-top-txt, #333);
    padding: 2.2rem;
    text-align: left;
    font-size: 1.8rem;
    display: flex;
    flex-direction: column;
    line-height: 27px;
    letter-spacing: -0.05em;
    font-weight: 500;
    position: relative;
}

.main-btn-grid ul li button img {
    position: absolute;
    bottom: 1.6rem;
    right: 1.6rem;
}

.main-btn-grid ul li button span {
    display: block;
    font-size: 1.4rem;
    color: var(--main-btn-span, rgba(255,255,255,0.8));
    line-height: 1.4;
    margin-top: 6px;
    font-weight: 400;
}

/* main footer */
.ft-logo {
    text-align: center;
    margin-top: 1.2rem;
}

.ft-logo img:first-child {
    margin-right: 18.67px;
}

/* login */
.login-wrap .logo-box img {
    width: 5.8rem;
}

.login-ggabi-bg img {
    width: 20.6rem;
}

.login-form input {
    width: 100%;
    margin-bottom: .8rem;
    height: 5.2rem;
    line-height: 5.2rem;
    padding: 0 2rem;
    background: #EEF1F7;
    border: 0;
    font-size: 1.4rem;
    border-radius: .8rem;
}

.login-form input::placeholder {
    color: #B4B8C1
}

.login-form input[type=button] {
    color: var(--login-submit-txt, #FFFFFF);
    background: #5B88FA;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.64px;
    box-shadow: 0px 5px 12px 0px rgba(102, 144, 252, 0.30);
}

.sub-box {
    margin-top: 1.2rem;
    margin-bottom: 2.4rem;
}

.sub-box ul:first-child li {
    position: relative;
    display: flex;
    align-items: center;
}

.sub-box ul:first-child li:nth-child(even) {
    margin: 0 1.6rem;
    font-family: NanumSquareRound;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 14px */
    letter-spacing: -0.408px;
    color: #B4B8C1;
    width: .5rem;
    padding-top: .2rem;
}

.sub-box ul li a {
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: -0.48px;
    color: #666;
}

.login-form h4.title {
    text-align: center;
    color: #6690FC;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.88px;
    margin-bottom: 2rem;
}

.login-form .autologin-check {
    display: flex;
    align-items: center;
}

.login-form .autologin-check input[type="checkbox"] {
    display: none;
}

.login-form .autologin-check input[type="checkbox"] + label:before {
    content: "";
    display: inline-block;
    width: 2.3rem;
    height: 2.3rem;
    vertical-align: middle;
    background-image: url('/images/new/login/icon/checkoff.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.login-form .autologin-check input[type="checkbox"]:checked + label:before {
    background-image: url('/images/new/login/icon/check.svg')
}

.login-form .autologin-check label span {
    color: #333;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.48px;
    margin-left: .6rem;
    vertical-align: middle;
}

.join-btn-box {
    height: 5.2rem;
    border-radius: .8rem;
    border: 1px solid #6690FC;
    background: #FFF;
}

.join-btn-box a {
    display: block;
    padding: 1.6rem;
    text-align: center;
    color: #6690FC;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
    text-decoration: none;
}

.logo-box-ft img:first-child {
    width: 9.5rem;
}

.logo-box-ft img:last-child {
    width: 8.1rem;
}

/* id forgot */
.cmmn-hd .inner button {
    border: 0;
    background: transparent;
    display: flex;
}

.cmmn-hd .inner > button {
    margin-right: 6px;
}

.cmmn-hd .inner .front > button {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cmmn-hd .inner .front > button svg {
    width: 2.4rem;
    height: 2.4rem;
}

.select-sort {
    margin-bottom: 3rem;
}

.select-sort ul {
    display: flex;
    gap: .6rem;
}

.select-sort ul li {
    font-size: 1.4rem;
    border: 1px solid #6690FC;
    padding: 0 2rem;
    border-radius: .8rem;
    line-height: 5.2rem;
    height: 5.2rem;
    background: var(--bg-white, #FFFFFF);
    flex: 1;
    text-align: center;
    color: #6690FC;
}

.select-sort ul li.active {
    background: #6690FC;
    border: 1px solid #6690FC;
    color: #FFF;
}

/* common */
.red-txt {
    color: red;
    font-size: 1.4rem;
}

.red-txt span {
    color: #B4B8C1;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    margin-left: 1rem;
}

.title-box h3 {
    color: #000;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.96px;
}

.bg-is-txt ul {
    list-style: disc;
}

.bg-is-txt ul li {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 10px;
    font-weight: 400;
    color: #747474;
    list-style: none;
}

.bg-is-txt ul li strong {
    color: var(--menu-list-second-txt, #555555);
    font-weight: 500;
}

.bg-is-txt ul li:last-child {
    margin-bottom: 0;
}

.bg-is-txt ul li.line-height-48 {
    line-height: 1.48;
}

.bg-is-txt ul li.line-height-n {
    line-height: normal;
}

.bg-is-txt ul li.text-wrap {
    white-space: nowrap;
}

.bg-is-txt p, .bg-is-txt2 p {
    font-size: 1.2rem;
    text-align: center;
    line-height: 1.48;
    color: var(--list-style-color7, #777777);
}

.bg-is-txt p strong {
    color: var(--menu-list-second-txt, #555555);
}

.bg-is-txt p a, .bg-is-txt2 p a {
    color: var(--input-submit-bg, #00D282);
}

.bg-is-txt p a:visited, .bg-is-txt2 p a:visited {
    color: var(--input-submit-bg, #00D282);
}

.bg-is-txt2 ul.tel {
    margin: 12px auto 0;
    max-width: 260px;
}

.bg-is-txt2 ul.tel li {
    font-size: 12px;
    line-height: 1.6;
    color: var(--tel-txt-color, #666666);
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    word-break: keep-all;
    white-space: nowrap;
}

.bg-is-txt2 ul.tel li img {
    margin-right: 6px;
}

.input-form label {
    margin-bottom: .6rem;
    font-size: 1.4rem;
    line-height: 1.9rem;
    display: inline-block;
    color: #000;
}

.input-form input {
    width: 100%;
    height: 5.2rem;
    line-height: 5.2rem;
    padding: 0 2rem;
    background: #EEF1F7;
    border: 0;
    border-radius: .8rem;
    font-size: 1.4rem;
    margin-bottom: 3rem;
}

.input-form input::placeholder {
    color: rgba(187, 187, 187, 0.9);
    font-weight: 400;
}

.input-form input[type=button] {
    color: var(--login-submit-txt, #FFFFFF);
    background: #5B88FA;
    border: 0;
    transform: translateY(-10px);
    margin-bottom: 0;
    border-radius: .8rem;
}

.input-form input[type=submit] {
    color: var(--login-submit-txt, #FFFFFF);
    background: #5B88FA;
    border: 0;
    transform: translateY(-10px);
    margin-bottom: 0;
    border-radius: .8rem;
}

.cmmn-hd .main-title h3 {
    color: #535353;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: -0.64px;
    line-height: normal;
    transform: translateY(2px);
}

.mypage-bg .cmmn-hd .main-title h3 {
    color: #fff;
}

.mypage-bg .cmmn-hd.white-bg .main-title h3 {
    color: #535353;
}

.cmmn-hd.search .inner input[type=text] {
    width: 100%;
    border: 0;
    height: 24px;
}

.cmmn-hd.search .inner input[type=text]:placeholder {
    color: #ddd;
}

.cmmn-hd.search .inner input[type=text]:focus {
    outline: none;
}

/* complete box */
.complete-box > p {
    margin: 26px 0 32px;
    font-size: 2rem;
    line-height: 1.5;
    color: var(--complete-box-txt, #222222);
    font-weight: 400;
    letter-spacing: -0.05em;
    text-align: center;
}

.complete-box > p span {
    color: var(--input-submit-bg, #00D282);
    font-weight: 700;
}

.login-btn {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sub-box-txt, #FFFFFF);
    background: var(--input-submit-bg, #00D282);
    display: block;
    width: 100%;
    border-radius: 4px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    text-decoration: none;
}

/* join */
.term-check ul li {
    font-size: 1.4rem;
    line-height: normal;
    color: #65616A;
    font-weight: 500;
    position: relative;
}

.term-check ul li input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    visibility: hidden;
}

.term-check ul li label {
    padding-left: 2.6rem;
    line-height: normal;
}

.term-check ul li label::before {
    content: url('/images/new/login/icon/checkoff.png');
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
}

.term-check ul li.total-check label {
    font-weight: 600;
    padding-left: 2.8rem;
    font-size: 1.6rem;
}

.term-check ul li.total-check label::before {
    width: 2.2rem;
    height: 2.2rem;
}

.term-check ul li input[type=checkbox]:checked + label::before {
    content: url('/images/new/login/icon/check.svg');
}

.term-check ul li label span {
    color: #F24040;
}

.term-info-box ul {
    list-style: none;
}

.term-info-box ul li {
    padding: 0;
    margin-bottom: 1.2rem;
    color: var(--list-style-color7, #747474);
    display: list-item;
    font-size: 1.2rem;
    line-height: normal;
}

.term-info-box ul li:last-child {
    margin-bottom: 0;
}

.agree-btn {
    width: 100%;
    height: 5.2rem;
    color: var(--login-submit-txt, #FFFFFF);
    background: #5B88FA;
    border: 0;
    margin-top: 10px;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
    border-radius: .8rem;
    box-shadow: 0px 5px 12px 0px rgba(102, 144, 252, 0.30);
}

.terms-box .illust-box {
    position: absolute;
    top: 0;
    left: 28px;
    transform: translateY(-50px);
}

.terms-box .terms-box-hd button {
    border: 0;
    background: none;
    display: flex;
}

.terms-box .term-box-title p {
    font-size: 2rem;
    line-height: 1;
    color: var(--complete-box-txt, #222222);
}

.term-box-body span {
    display: block;
}

.term-box-body span.term-content-title {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--menu-top-txt, #333333);
    margin-bottom: 12px;
}

.term-box-body span.term-content-txt {
    font-size: 1.4rem;
    line-height: 1.48;
    color: var(--list-style-color7, #777777);
    margin-bottom: 20px;
}

.term-box-body span.term-content-txt.continue {
    margin-bottom: 8px;
}

.term-box-body span.term-content-txt.last {
    margin-bottom: 30px
}

.term-box-body span.term-content-txt.inline-txt {
    padding-left: 15px;
}

.term-box-body span.term-content-txt:last-child {
    margin-bottom: 0;
}

.terms-box {
    transform: translateY(110%);
}

.term-toggle.termAgree .terms-box.termAgree {
    transform: translateY(0);
}

.term-toggle.termAgree .terms-box.character-box {
    transform: translateY(0);
}

.term-toggle.privacyAgree .terms-box.privacyAgree {
    transform: translateY(0);
}

.term-toggle.irbAgree .terms-box.irbAgree {
    transform: translateY(0);
}

.bg-is-txt p.join-sel-info {
    color: var(--1, #747474);
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
    text-align: left;
}

.join-select-radio ul li input[type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    visibility: hidden;
}

.join-select-radio ul li label:before {
    content: url('/images/new/login/icon/checkoff.png');
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
}

.join-select-radio ul li input[type=radio]:checked + label::before {
    content: url('/images/new/login/icon/check.svg');
}

.join-select-radio ul li label span {
    display: block;
}

.join-select-radio ul li label span.title {
    font-size: 1.6rem;
    line-height: normal;
    color: #000;
    margin-bottom: 10px;
    font-weight: 400;
    letter-spacing: -0.64px;
}

.join-select-radio ul li label span.title span {
    font-weight: 600;
}

.join-select-radio ul li label span.txt {
    font-size: 1.2rem;
    line-height: normal;
    color: #747474;
    font-weight: 400;
    letter-spacing: -0.48px;
}

.join-select-radio ul li.active label span.title {
    color: #FFF;
}

.join-select-radio ul li.active label span.txt {
    color: #FFF;
}

.join-select-radio ul li.reverse label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-complate-contents {
    padding: 0 1.6rem;
}

.profile-complate-contents .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-moa-img {
    padding-top: .4rem;
    display: flex;
    width: 17.2rem;
    height: 20.1rem;
    margin-bottom: .6rem;
}

.profile-moa-img img {
    width: 100%;
}

.cha-title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
}

.profile-comp-info p {
    color: #747474;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
}

.join-title h1 {
    position: relative;
}

.txt-under-bg {
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 100%;
    height: 16px;
    background: var(--yellow-bg, rgba(255, 235, 133, 0.28));
    z-index: -1;
    border-radius: 8px;
}

.id-box {
    position: relative;
}

.id-box button {
    border-radius: 8px;
    border: 1px solid #6690FC;
    background: #FFF;
    color: #6690FC;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
    width: 8.3rem;
    height: 5.2rem;
}

.id-box .warning-txt {
    margin-bottom: 15px;
}

.blank-screen>.terms-box {
    transform: translateY(-30px);
    position: static;
}

.blank-screen .term-box-body {
    z-index: 11;
    background: #FFF;
}

.blank-screen .terms-box .illust-box {
    left: auto;
    right: 27px;
    top: 45px;
    z-index: -1;
}

.blank-screen .term-box-title {
    padding-left: 10px;
    margin-bottom: 20px
}

.more-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #6690FC;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
}

.hidden-file-input {
    display: none;
}

/* new privacy */
.terms-box.privacyAgree .term-box-body {
    padding: 0;
    border: 0;
}

.privacy-agree-wrap {
    margin-bottom: 20px;
}

.privacy-agree-wrap .privacy-agree-title {
    font-size: 14px;
    margin-bottom: 8px;
}

.privacy-agree-box {
    border: 1px solid rgba(204, 210, 234, 0.44);
    padding: 10px;
    overflow: hidden;
}

.privacy-agree-box .privacy-agree-txt {
    font-size: 12px;
    margin-bottom: 8px;
}

.privacy-agree-box .privacy-agree-table .privacy-agree-table-response {
    width: 100%;
    overflow-x: scroll;
}

.privacy-agree-box .privacy-agree-table table {
    min-width: 800px;
    width: 100%;
    border-top: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
    border-collapse: collapse;
    font-size: 12px;
}

.privacy-agree-box .privacy-agree-table table tr:not(last-child) {
    border-bottom: 1px solid rgba(204, 210, 234, 0.44);
}

.privacy-agree-box .privacy-agree-table table th {
    min-width: 100px;
    background: #eee;
}

.privacy-agree-box .privacy-agree-table table th, .privacy-agree-box .privacy-agree-table table td {
    padding: 6px;
}

.privacy-agree-box .privacy-agree-table table td.sm-row {
    min-width: 100px;
    border-right: 1px solid rgba(204, 210, 234, 0.44);
}

.privacy-agree-box .privacy-agree-table table .bold {
    font-weight: 700;
    font-size: 14px;
}

/* character toggle mode */
.character-wrap {
    transform: translateY(110%);
}

.character-toggle-mode .character-wrap {
    transform: translateY(0);
}

/* toon toggle mode */
.toon-wrap {
    transform: translateY(110%);
}

.toon-toggle-mode .toon-wrap {
    transform: translateY(0);
}

/* auto capture mode */
.auth-capture-wrap {
    transform: translateY(110%);
}

.auth-toggle-mode .auth-capture-wrap {
    transform: translateY(0);
}

.auth-capture-wrap .auth-capture-body {
    height: calc(100% - 64px - 5.9rem);
    overflow: auto;
}

/* slide cmmn */
.satisfaction-wrap {
    transform: translateY(110%);
}

.slide-toggle-mode .satisfaction-wrap {
    transform: translateY(0);
}

.satisfaction-wrap {
    position: fixed;
    width: 100%;
    height: 42.3rem;
    bottom: 0;
    left: 0;
    background: var(--menu-bg, #FFFFFF);
    z-index: 991;
    transition: .5s;
    border-radius: 3rem 3rem 0 0;
    overflow: hidden;
}

/* cheer popup */
.cheer-popup-wrap {
    transform: translateY(110%);
}

.dark-toggle-mode .cheer-popup-wrap {
    transform: translateY(0);
}

.cheer-popup-wrap {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    background: var(--menu-bg, #FFFFFF);
    z-index: 991;
    transition: .5s;
    overflow: hidden;
}

/* nick name popup */
.nickname-popup-wrap {
    transform: translateY(110%);
}

.dark-toggle-mode .nickname-popup-wrap {
    transform: translateY(0);
}

.nickname-popup-wrap {
    position: fixed;
    width: 100%;
    height: 42rem;
    bottom: 0;
    left: 0;
    background: var(--menu-bg, #FFFFFF);
    z-index: 991;
    transition: .5s;
    border-radius: 3rem 3rem 0 0;
    overflow: hidden;
}

.nickname-popup-wrap .popup-hd .popup-title {
    color: #000;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
}

.nickname-modify-wrap p {
    color: #535353;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
    margin-bottom: 2rem;
}

.nickname-modify-wrap .input-distance-box input[type=text] {
    border-radius: 8px;
    background: #EEF1F7;
    border: 0;
    padding: 0 2rem;
}

.nickname-modify-wrap .input-distance-box input[type=text]::placeholder {
    color: #B4B8C1;
}

.nickname-modify-wrap .input-distance-box span {
    color: #B4B8C1;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    margin-left: 2rem;
}

.nickname-modify-wrap .input-distance-box .button-position {
    margin-bottom: .6rem;
}

.submit-fixed-box {
    position: fixed;
    bottom: 9rem;
    padding: 1.6rem;
    width: 100%;
    left: 0;
}

.nickname-modify-wrap .submitBtn {
    width: 100%;
    height: 5.2rem;
    color: #FFFFFF;
    background: #5B88FA;
    border: 0;
    margin-bottom: 0;
    text-align: center;
    border-radius: .8rem;
    box-shadow: 0px 5px 12px 0px rgba(102, 144, 252, 0.30);
}

.pw-popup-wrap {
    transform: translateY(110%);
}

.pwpopup-toggle-mode .pw-popup-wrap {
    transform: translateY(0);
}

.pw-popup-wrap {
    position: fixed;
    width: 100%;
    height: 52rem;
    bottom: 0;
    left: 0;
    background: var(--menu-bg, #FFFFFF);
    z-index: 991;
    transition: .5s;
    border-radius: 3rem 3rem 0 0;
    overflow: hidden;
}

.pw-popup-wrap .popup-hd .popup-title {
    color: #000;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
}

.pw-popup-wrap p {
    color: #535353;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
    margin-bottom: 2rem;
}

.pw-modify-wrap .input-distance-box input[type=password] {
    border-radius: 8px;
    background: #EEF1F7;
    border: 0;
    padding: 0 2rem;
    width: 100%;
    height: 5.2rem;
}

.pw-modify-wrap .input-distance-box input[type=password]::placeholder {
    color: #B4B8C1;
}

.pw-modify-wrap .input-distance-box label {
    color: #000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
}

.pw-modify-wrap .input-distance-box label span {
    color: #B4B8C1;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    margin-left: 1rem;
    transform: translateY(1px);
}

.pw-modify-wrap .submitBtn {
    width: 100%;
    height: 5.2rem;
    color: #FFFFFF;
    background: #5B88FA;
    border: 0;
    margin-bottom: 0;
    text-align: center;
    border-radius: .8rem;
    box-shadow: 0px 5px 12px 0px rgba(102, 144, 252, 0.30);
}

/* content common */
.content-title h1 {
    color: var(--content-title, #222222);
}

.bg-illu {
    position: relative;
}

.bg-illu::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.bg-illu.illu-notice:after {
    content: url(/images/bg-illust.svg);
    transform: translateY(-85%);
}

.bg-illu.illu-board:after {
    content: url(/images/bg-illu-board.svg);
    transform: translateY(-92%);
}

.bg-illu.illu-program:after {
    content: url(/images/bg-illu-program.svg);
    transform: translateY(-65%);
}

.bg-illu.illu-gallery:after {
    content: url(/images/bg-illu-gallery.svg);
    transform: translateY(-82%);
}

.self-reliance-wrap.bg-illu.illu-program:after {
    transform: translateY(-80%);
}

/* cmmn board */
.card-box {
    padding: 12px;
    background: var(--bg-white, #FFFFFF);
    border: 1px solid rgba(220, 224, 241, 0.64);
    box-shadow: 4px 4px 12px rgba(227, 227, 227, 0.25);
    border-radius: 2px;
    margin-bottom: 10px;
}

.card-title {
    margin-bottom: 10px;
}

.card-title p {
    font-size: 1.6rem;
    color: var(--board-title, #333333);
    max-height: 48px;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.6;
}

.card-box .hr {
    display: block;
    background: linear-gradient(to right, #DCE0F14F 35%, rgba(255, 255, 255, 0) 0%);
    background-size: 10px 1px;
    margin-bottom: 14px;
    height: 1px;
}

.sub-content ul {
    display: flex;
}

.sub-content.colunm ul {
    flex-direction: column;
}

.sub-content ul li {
    margin-right: 16px;
    font-size: 1.2rem !important;
    line-height: 1;
    font-weight: 400;
    color: var(--card-sub-content, #A3A5B1);
}

.sub-content.colunm ul li {
    margin-bottom: 8px;
    color: var(--list-style-color7, #777777);
    margin-right: 0;
    display: flex;
    align-items: flex-end;
}

.sub-content.colunm ul li:first-child span {
    margin-bottom: 1px;
}

.sub-content.colunm ul li span {
    color: var(--list-style-color7, #777777);
    margin-right: 15px;
    min-width: 61px;
}

.sub-content.colunm ul li span + span {
    color: var(--mypage-program-data, #BBBBBB);
    font-weight: 400;
}

.fixed-icon {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.fixed-icon img {
    display: flex;
}

.fixed-icon span {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    color: var(--card-fixed-txt, #0079FF);
}

.detail-title-box h3 {
    margin-bottom: 12px;
}

.detail-title-box ul li {
    margin-right: 17px;
    font-size: 1.4rem;
    position: relative;
}

.detail-title-box ul li:after {
    content: '';
    position: absolute;
    right: -9px;
    width: 1px;
    height: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--hr-color, rgba(230, 230, 230, 0.31));
}

.detail-title-box ul li:last-child::after {
    content: none;
}

.attech-file-box ul li {
    font-size: 1.3rem;
    line-height: 1;
    color: var(--board-title, #333333);
    margin-bottom: 8px;
}

.attech-file-box ul li:last-child {
    margin-bottom: 0;
}

.attech-file-box ul li.title {
    margin-bottom: 10px;
}

.attech-file-box ul li.title:after {
    content: url(/images/icon/attech-file.svg);
    position: absolute;
    top: 0;
    left: 0;
}

.attech-file-box ul li a {
    color: var(--list-style-color7, #777777);
    font-size: 1.2rem;
}

.short-cut ul li {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--short-cut-txt, #333333);
}

.short-cut ul li a {
    margin-left: 32px;
    text-decoration: none;
    color: var(--short-cut-anchor, #444444);
    font-weight: 400;
}

.short-cut ul li.short-cut-hd span {
    color: var(--short-cut-strong, #00D282);
}

.comment-box .title {
    font-size: 1.2rem;
    line-height: 1;
}

/* .comment-box .title span {font-weight: 400; color: var(--sort-btn-txt, #444444);} */
.comment-writer {
    display: flex;
    align-items: center;
}

.comment-writer span {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--short-cut-txt, #333333);
    margin-left: 6px;
}

.comment-txt p {
    font-size: 1.5rem;
    color: var(--txt-color-555, #555555);
    margin-bottom: 7px;
}

.comment-txt ul {
    display: flex;
}

.comment-txt ul li {
    margin-right: 8px;
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 400;
    color: var(--comment-date-color, #999999);
}

.comment-regist .box {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    color: var(--input-placeholder-color, rgba(187, 187, 187, 0.9));
}

.comment-regist .box span {
    background: var(--input-submit-bg, #00D282);
    border-radius: 20px;
    color: var(--bg-is-txt, #FFFFFF);
    font-size: 11px;
    line-height: 1;
}

.comment-regist .box input {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--h3-txt, #333333);
}

.modify-box ul li {
    font-size: 1.2rem;
    line-height: 1;
    color: var(--list-style-color7, #777777);
}

.cmmn-normal-txt {
    white-space: nowrap;
}

.slick-item img {
    max-width: 100%;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.like-box > span {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--txt-color-555, #555555);
    margin-left: 6px;
}

.like-box > span:first-child {
    margin-left: 0;
}

.contents-txt {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.64;
    color: var(--txt-color-555, #555555);
    margin-bottom: 48px;
}

.gallery-content .slick-item {
    background: #FFF;
}

/* program */
.program-detail-top-box {
    padding: 52px 28px 0;
    position: relative;
    margin-bottom: 32px;
}

/* .program-detail-top-box::before {content: ''; background: url(/images/program-detail-img-default.svg), linear-gradient(180deg, rgba(6, 36, 46, 0.2) 2.32%, rgba(10, 10, 10, 0) 81.45%); background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; z-index: -3; width: 100%; height: calc(100% - 28px);}
.program-detail-top-box::after {content: ''; position: absolute; top: 0; left: 0; z-index: -2; background: #5CA7FF; box-shadow: 0px 4px 10px rgba(231, 231, 231, 0.25); width: 100%; height: calc(100% - 28px); opacity: 0.85;} */
.bg-img-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: calc(100% - 28px);
    opacity: 0.85;
}

.bg-img-wrap:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: #5CA7FF;
    box-shadow: 0px 4px 10px rgba(231, 231, 231, 0.25);
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.bg-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.program-detail-top-box .title {
    position: relative;
    margin-bottom: 8px;
}

.program-detail-top-box .title h1 {
    color: var(--white-txt, #FFFFFF);
    line-height: 1;
}

.program-detail-top-box .title h1 strong {
    font-family: 'GmarketSansMedium';
}

.program-detail-top-box .tag-txt {
    margin-bottom: 28px;
}

.tag-txt {
    font-size: 1.6rem;
    line-height: 1.44;
    color: var(--white-txt, #FFFFFF);
}

.tag-txt span {
    display: block;
}

.tag-txt.another-color {
    color: var(--another-color, #8C8C8C);
}

.tag-txt.another-color span {
    display: inline-block;
}

.txt-under-bg.program-detail {
    background: var(--program-detail-bg, #3D7CC5);
}

.program-detail-main-img {
    display: flex;
    filter: drop-shadow(4px 4px 20px rgba(114, 179, 255, 0.22));
}

.program-detail-main-img img {
    max-width: 100%;
    flex: 1;
}

.program-detail-check-box {
    padding: 0 28px;
    margin-bottom: 32px;
}

.program-detail-check-box .program-check {
    margin-bottom: 10px;
}

.program-detail-check-box .program-check:last-child {
    margin-bottom: 0;
}

.program-check {
    position: relative;
    padding: 16px;
    border: 1px solid rgba(204, 210, 234, 0.44);
    border-radius: 2px;
}

.program-check.active {
    border: 1px solid #A0CCFF;
    ;}

.program-check input[type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    visibility: hidden;
    opacity: 0;
}

.program-check label {
    display: block;
    padding-left: 40px;
}

.program-check label:after {
    content: url(/images/icon/check-box-unchecked-24.svg);
    position: absolute;
    width: 24px;
    height: 24px;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.program-check input[type=radio]:checked + label::after {
    content: url(/images/icon/check-box-checked-24.svg);
}

.program-check label ul li {
    font-size: 1.5rem;
    line-height: 19px;
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
}

.program-check label ul li:last-child {
    margin-bottom: 0;
}

.program-check label ul li span.title {
    color: var(--short-cut-txt, #333333);
    min-width: 69px;
    display: inline-block;
}

.program-check label ul li span.sub {
    color: var(--tel-txt-color, #666666);
    display: flex;
    align-items: center;
}

.program-check label ul li span.sub.is-cor-sub {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.program-check label ul li span.cor-sub {
    font-size: 12px;
    height: 20px;
    padding: 0 4px;
    background: var(--cor-sub-bg, #FFB526);
    color: var(--white-txt, #FFFFFF);
    border-radius: 2px;
    margin-right: 4px;
    display: inline-block;
    margin-bottom: 2px;
}

.info-txt-box .title {
    font-size: 1.5rem;
    line-height: 1.48;
    color: var(--short-cut-txt, #333333);
    margin-bottom: 8px;
}

.info-txt-box ul, .info-txt-box ol {
    list-style: disc;
}

.editor-box {
    font-size: 1.4rem;
}

.editor-box ul {
    list-style: disc;
    padding-left: 18px;
}

.program-content-box .title {
    font-size: 1.5rem;
    line-height: 1.48;
    color: var(--short-cut-txt, #333333);
    margin-bottom: 8px;
}

.content-box .btn-box button {
    font-size: 1.4rem;
    line-height: 1;
    color: var(--white-txt, #FFFFFF);
}

.program-content-box img {
    max-width: 100%;
    width: 100% !important;
}

/* mypage */
/* 기존 css 수정 */
.user-profile-info p {
    font-size: 1.8rem;
    color: var(--ffffff, #FFF);
    text-align: center;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.72px;
    margin-bottom: .2rem;
}

.user-profile-info .sub {
    color: #FFF;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: normal;
}

.profile-setting-box .user-profile-info p {
    color: #000;
}

.profile-setting-box .user-profile-info .sub {
    color: #747474;
}

.mypage-menu ul li {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mypage-menu-color, #36353A);
}

.profile-box2 .user-profile-info {
    margin-left: 0;
}

.profile-box2 .user-profile-info p {
    font-size: 2rem;
    text-align: center;
}

.profile-box2 .user-profile-info .sub {
    font-size: 1.5rem;
    letter-spacing: 0;
}

.profile-box2 .user-profile-info .sub span {
    font-weight: 400;
}

.profile-box2 .user-profile-info .sub * {
    letter-spacing: 0.05em;
}

.profile-change-btn {
    position: absolute;
    width: 28px;
    height: 28px;
    bottom: -5px;
    right: -3px;
    font-size: 0;
    border: 0;
    outline: none;
    background: url("/images/icon/img-upload-icon.svg");
}

.card-title .comment-title {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--short-cut-anchor, #444444);
}

.card-title .comment-title .name {
    font-weight: 500;
    color: var(--board-title, #333333);
}

.card-title .comment-title .board-title {
    font-weight: 700;
    color: var(--mypage-board-title, #18CC87);
}

.comment-view-txt p {
    font-size: 1.4rem;
    line-height: 1;
    margin-left: 4px;
    color: var(--list-style-color7, #777777);
}

.comment-view-txt + .sub-content ul li {
    font-size: 1.2rem;
}

.rate-save-btn {
    border: 1px solid #00D282;
    background: var(--bg-white, #FFFFFF);
    color: var(--input-submit-bg, #00D282);
    width: 40px;
    height: 24px;
    border-radius: 20px;
    margin-left: 10px;
    transform: translateY(4px);
}

.program-status-bg {
    position: relative;
}

.program-status-bg-box {
    position: absolute;
    width: 91px;
    height: 95px;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background: transparent;
}

.warning-txt {
    color: #FF1D3D;
    margin-top: 1rem;
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.56px;
}

/* business Introduce */
.business-paragraph {
    font-size: 32px;
    font-weight: 400;
    color: #3177E9;
    ; text-align: center;
}

.business-paragraph strong {
    font-weight: 700;
}

.business-intro-wrap .program-card-sub-item {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 23px;
    background: var(--gallery-time-box, #3F97FF);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-white, #FFFFFF);
    font-size: 1.2rem;
    line-height: 1;
    font-family: 500;
    border-radius: 13px 0px 2px;
}

.business-intro-wrap .card-box {
    position: relative;
}

.business-intro-wrap .card-box .card-img {
    margin-bottom: 16px;
}

.business-intro-wrap .program-card-title {
    padding: 0 10px;
}

.business-intro-wrap .program-card-title p {
    font-size: 1.6rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--h3-txt, #333333);
}

.business-intro-wrap .program-content-txt {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.44;
    color: var(--card-gallery-content-txt, #888888);
    padding: 0 10px;
    word-break: break-all;
    margin-bottom: 15px;
}

.self-info-txt.business-intro {
    margin-bottom: 20px;
}

.business-intro-table-con {
    padding: 0 10px;
}

.business-intro-table-con table {
    width: 100%;
}

.business-intro-table-con table th, .business-intro-table-con table td {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.44;
}

.business-intro-table-con table th {
    text-align: left;
    color: #444;
}

.business-intro-table-con table td {
    padding-left: 10px;
    color: var(--card-gallery-content-txt, #888888);
}

/* 자립정보 */
.self-info-txt {
    font-size: 20px;
    margin-bottom: 40px;
    margin-top: 30px;
}

.self-reliance-wrap .program-card-sub-item {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 48px;
    height: 23px;
    background: var(--gallery-time-box, #3F97FF);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-white, #FFFFFF);
    font-size: 1.2rem;
    line-height: 1;
    font-family: 500;
    border-radius: 13px 0px 2px;
}

.self-reliance-wrap .card-box {
    position: relative;
    cursor: pointer;
}

.self-reliance-wrap .card-box .card-img {
    margin-bottom: 16px;
}

.self-reliance-wrap .card-box .card-img img {
    width: 100%;
    aspect-ratio: 16/9;
}

.self-reliance-wrap .program-card-title {
    padding: 0 10px;
}

.self-reliance-wrap .program-card-title p {
    font-size: 1.6rem;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--h3-txt, #333333);
}

.self-reliance-wrap .program-content-txt {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.44;
    color: var(--card-gallery-content-txt, #888888);
    padding: 0 10px;
    margin-bottom: 20px;
}

/* calendar */
.calendar-group {
    display: flex;
    align-items: center;
}

.calendar-group .cal-dash {
    margin: 0 1rem;
}

.calendar-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.calendar-group .calendar-wrap input {
    text-align: right;
}

.datepicker {
    width: 100%;
}

.calendar-group {
    display: flex;
}

.cal-dash {
    position: relative;
    margin: 0 5px;
}

/*datepicker*/
.datepicker {
    width: 100%;
    max-width: 100%;
    padding-left: 37px;
}

.calendar-wrap .ico-calendar {
    color: #999;
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    background: url(/images/admin/cmpt/ico-calendar.png) no-repeat;
    background-size: cover;
    width: 1.5rem;
    height: 1.6rem;
}

.calendar-wrap {
    position: relative;
}

.calendar-wrap label {
    display: inline;
}

.cal-dash {
    position: relative;
    margin: 0px 23px;
}

.cal-dash:after {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 1px;
    background: black;
    top: 50%;
    margin-top: 0px;
    left: -3px;
}

.ui-datepicker {
    z-index: 9999 !important;
}

.datePickerFixed .ui-datepicker {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.ui-datepicker select.ui-datepicker-month {
    width: 30%;
    font-size: 11px;
}

.ui-datepicker select.ui-datepicker-year {
    width: 40%;
    font-size: 11px;
}

.ui-datepicker {
    background: #fff;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
    border-radius: .8rem;
    overflow: hidden;
}

.ui-datepicker-header {
    color: #ffffff;
    background: #F6F8FB;
}

.ui-datepicker-prev, .ui-datepicker-next {
    width: 2rem;
    height: 2rem;
    font-size: 0;
    text-indent: 9999px;
    border-radius: .5rem;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transform: translate(0, 50%);
    top: 2px;
    border: 1px solid #ddd;
    background: #fff;
}

.ui-datepicker-prev {
    float: left;
    margin-left: 1.2rem;
}

.ui-datepicker-prev:after {
    transform: rotate(45deg);
    margin: 5px 0px 0px 7px;
}

.ui-datepicker-next {
    float: right;
    margin-right: 12px;
}

.ui-datepicker-next:after {
    transform: rotate(-135deg);
    margin: 5px 0px 0px 4px;
}

.ui-datepicker-prev:after, .ui-datepicker-next:after {
    content: '';
    position: absolute;
    display: block;
    width: .8rem;
    height: .8rem;
    border-left: 2px solid #C4C4C4;
    border-bottom: 2px solid #C4C4C4;
    top: 0;
}

.ui-datepicker-title {
    text-align: center;
    height: 100%;
    padding: 1.1rem 0;
    color: #272727;
    font-size: 1.4rem;
    font-weight: 600;
}

.ui-datepicker-title .ui-datepicker-year, .ui-datepicker-title .ui-datepicker-month {
    font-weight: 600;
}

.ui-datepicker-calendar {
    width: 100%;
    text-align: center;
    margin: 10px 0;
    border-top: 0;
}

.ui-datepicker-calendar thead tr th span {
    display: block;
    width: auto;
    color: #000;
    margin-bottom: .5rem;
    font-size: 1.4rem;
    text-align: center;
    font-weight: 500;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    font-size: 1.4rem;
    margin: 0 auto;
    width: 3.5rem;
    height: 3rem;
    line-height: 27px;
}

.ui-datepicker .ui-state-default {
    display: flex;
    text-decoration: none;
    color: #4F4F4F;
    line-height: normal;
    font-size: 1.4rem;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .ui-datepicker-unselectable .ui-state-default {
    color: #eee;
    border: 2px solid transparent;
}

.ui-datepicker .daepicker-wrap i {
    margin-left: -3rem;
    margin-top: -2.6rem;
    position: relative;
    color: rgba(0, 0, 0, 0.48);
    font-size: 2rem;
}

.ui-datepicker .ui-state-hover, .ui-datepicker .ui-widget-content .ui-state-hover, .ui-datepicker .ui-state-highlight, .ui-datepicker .ui-datepicker-calendar .ui-state-hover, .ui-datepicker .ui-datepicker-calendar .ui-widget-content .ui-state-hover {
    background-color: transparent;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background: #6690FC;
    color: #fff;
    border-radius: .8rem;
}

.addRow .datepicker {
    max-width: 180px;
}

.addRow.assortment-t {
    border-top: 2px solid #333;
}

.addRow.assortment-b {
    border-bottom: 2px solid #333;
}

.ui-datepicker-buttonpane {
    display: flex;
}

.ui-datepicker-buttonpane .ui-datepicker-current {
    display: none;
}

.ui-datepicker-buttonpane .ui-datepicker-close {
    width: 100%;
    height: 4.2rem;
    color: #FFFFFF;
    background: #5B88FA;
    border: 0;
}

.nothing-item {
    grid-column: auto / span 3;
    text-align: center;
    font-size: 1.4rem;
}

/* footer */
.fixed-ft button {
    border: 0;
    background: none;
}

.fixed-ft button span {
    color: #5F6164;
    display: block;
    font-size: .8rem;
    font-weight: 400;
    line-height: normal;
}

@media screen and (min-width: 798px) {
    .term-agree-servie.cmmn-wrap {
        max-width: none;
    }
}