/* logo */
.logo {
    position: relative;
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: 2.4rem;
    left: 0;
}
.logo img {
    -o-object-fit: contain;
        object-fit: contain;
    width: auto;
}
/* logo */

/*! 스크린리더/브라우저에서 모두 감추기 */
.hidden {
    display: none !important;
    visibility: hidden;
}

/*! 스크린리더에서는 읽기 가능 */
.a11y-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    visibility: hidden;
    font-size: 0;
}
.a11y-hidden.focusable:active, .a11y-hidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*! 스크린리더에서는 읽기 가능 + 포커스 적용 */
/*! 화면에서는 안 보이지만, 레이아웃 공간 적용 */
.invisible {
    visibility: hidden;
}

.ellipsis {
    display: -webkit-box;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.ellipsis2 {
    display: -webkit-box;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ellipsis3 {
    display: -webkit-box;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* sendurl */
.popup-sendurl .container {
    max-width: 53.2rem;
}
.popup-sendurl .container > div {
    padding: 4rem 3rem 0;
}
.popup-sendurl .popup-title p {
    margin-top: 0.7rem;
}
.popup-sendurl .url-check {
    margin: 4rem 0;
    text-align: center;
}
.popup-sendurl .url-check p {
    margin-left: 3rem;
    font-size: 1.2rem;
}
.popup-sendurl .divider {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 4rem;
    font-size: 1.2rem;
    color: var(--body-color-black2);
}
.popup-sendurl .divider::before {
    content: "";
    position: relative;
    display: inline-block;
    width: 25rem;
    height: 1px;
    margin-right: 1rem;
    background: var(--border-secondary);
}
.popup-sendurl .divider::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 25rem;
    height: 1px;
    margin-left: 1rem;
    background: var(--border-secondary);
}
.popup-sendurl .form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.popup-sendurl .form:first-child {
    margin-top: 4rem;
}
.popup-sendurl .form > div {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 5rem;
    padding-left: 1.5rem;
    background: var(--background-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 0.8rem;
    -webkit-transition: all 0.5s;
    transition: all 0.3s;
}
.popup-sendurl .form span {
    display: inline-block;
    width: 10rem;
}
.popup-sendurl .form button {
    position: absolute;
    width: 10rem;
    height: 100%;
    right: 0;
    font-size: 1.5rem;
    color: var(--body-color-white);
    background: #A4A4A4;
    border-radius: 0 0.8rem 0.8rem 0;
}
.popup-sendurl .form input[type=tel],
.popup-sendurl .form input[type=email] {
    width: 70%;
}
/* sendurl */

.video-wrap, .video-info, .course-desc {
    display: block;
    min-width: 60rem;
    max-width: 108rem;
    width: 100%;
}

.content-detail, .relation-contents {
    display: block;
    max-width: 58.6rem;
    min-width: 40rem;
}

/* course-detail */
.course-detail {
    width: 100%;
    max-width: 168rem;
    padding: 3rem 0 0;
    display: grid;
    grid-column-gap: 1.4rem;
    grid-row-gap: 0;
    grid-template-rows: 61rem minmax(16rem, auto) auto;
    grid-template-columns: 64.3% auto;
}
/* course-detail */

/* video-wrap */
.video-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 108rem;
    height: 61rem;
    aspect-ratio: 5/3;
    grid-area: 1/1/2/2;
}
.video-wrap video {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
}
.video-wrap .player-certificate::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 8;
    background: var(--background-tertiary);
    opacity: 0.8;
}
.video-wrap .player-certificate::after {
    content: "";
    position: absolute;
    width: 22rem;
    height: 22rem;
    top: 50%;
    right: 5%;
    background: url(../images/icon-certificate.png) center center no-repeat;
    z-index: 8;
    transform: translateY(-50%);
}
.video-wrap .player-watermark {
    position: absolute;
    bottom: 15%;
    left: 5%;
    padding: 1rem 2rem;
    color: var(--body-color-white);
    background: #000;
    opacity: 0.3;
    font-size: 1.4rem;
    z-index: 8;
    cursor: default;
}
.video-wrap .player-speed {
    position: absolute;
    right: 2rem;
    top: 50%;
    width: 3.6rem;
    height: 13rem;
    padding-top: 5.8rem;
    color: var(--body-color-white);
    font-size: 1.2rem;
    box-sizing: border-box;
    transform: translateY(-50%);
    z-index: 1;
}
.video-wrap .player-speed .btn-speed-up, .video-wrap .player-speed .btn-speed-down { 
    position: absolute;
    left: 0;
    width: 3.6rem;
    height: 3.6rem;
    background-repeat: no-repeat;
    background-position: 0 0;
    cursor: pointer;
}
.video-wrap .player-speed .btn-speed-up { 
    top: 0;
    background-image: url("../images/icon_player_speedup.png");
}
.video-wrap .player-speed .btn-speed-down {
    bottom: 0;
    background-image: url("../images/icon_player_speeddown.png");
}
.video-wrap .player-speed .speed-count-wrap { 
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}
.video-wrap .player-control { 
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; 
    left: 50%; 
    width: 38.7rem; 
    height: 14.7rem; 
    transform: translate(-50%, -50%); 
    z-index: 9;
}
.video-wrap .player-control.course-apply {
    width: 100%;
    height: 100%;
}
.video-wrap .player-help {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 8;
}
.video-wrap .player-help .help-icon:hover ~ .help-info { 
    transform: scaleY(1);
    z-index: -5;
}
.video-wrap .player-help .help-info:not(:hover) { 
    transform: scaleY(0);
}
.video-wrap .player-help .help-icon { 
    width: 2rem;
    height: 2rem;
    opacity: 0.6;
}
.video-wrap .player-help .help-info { 
    position: absolute;
    top: 3rem;
    left: 0rem;
    width: 16rem;
    height: 19.3rem;
    padding: 1.4rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    background: #000;
    opacity: 0.6;
}
.video-wrap .player-help .help-info::before { 
    content: "";
    position: absolute;
    left: 0.6rem;
    top: -0.4rem;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 4px solid #000;
}
.video-wrap .player-help .help-info li { 
    display: flex;
    align-items: center;
}
.video-wrap .player-help .help-info img { 
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
}
.video-wrap .player-help .help-info img:nth-child(2) { 
    margin-left: 0.4rem;
}
.video-wrap .player-help .help-info span { 
    font-weight: 300;
    color: var(--body-color-white);
}
.video-wrap .player-help .help-info .sub { 
    opacity: 0.7;
}
.video-wrap .player-help .help-info .sub::before { 
    content: ":";
    margin: 0 0.4rem;
}
.video-wrap .player-control .control-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-wrap .player-control .box-rewind, .video-wrap .player-control .box-fast { 
    width: 9rem;
    cursor: pointer;
}
.video-wrap .player-control .box-play {
    width: 14.7rem;
    margin: 0 3rem;
    cursor: pointer;
}
.videojs_player_inner_button {
    margin-top: 5px;
    margin-left: 0;
    margin-bottom: 0px;
    width: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}
.rewindBtn {
    background-image: url("../images/player_rewind.png");
}
.ffBtn {
    background-image: url("../images/player_fast.png");
}
/* video-wrap */

/* video-info */
.video-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: var(--background-tertiary);
    grid-area: 2/1/3/2;
}
.video-info > div:last-child {
    margin-bottom: 0;
}
.video-info p {
    display: inline-block;
    font-size: 1.5rem;
}
.video-info span {
    margin-right: 0.5rem;
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.video-info .course-title {
    width: 100%;
    margin-bottom: 1.4rem;
}
.video-info .info {
    height: 8rem;
}
.video-info .info div {
    margin-bottom: 0.7rem;
}
.video-info .info div:last-child {
    margin-bottom: 0;
}
.video-info .info .detail p {
    position: relative;
    margin-right: 1rem;
}
.video-info .info .detail p::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 1rem;
    top: 50%;
    right: -0.7rem;
    background: var(--body-color-black2);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.video-info .info .detail p:last-child::after {
    display: none;
}
.video-info .info .conditions p::after {
    content: ",";
}
.video-info .info .conditions p:last-child::after {
    content: "";
}
.video-info .info .category p::after {
    content: " > ";
}
.video-info .info .category p:last-child::after {
    content: "";
}
.video-info .info .category a {
    text-decoration: underline;
    color: #0045FF;
}
.video-info .course-icons {
    display: flex;
}
.video-info .course-icons button {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 8rem;
}
.video-info .course-icons button.on.icon-active svg {
    display: none;
}
.video-info .course-icons button.on.icon-active p {
    color: var(--accent-color);
}
.video-info .course-icons button.on.icon-active .icon-active-fill {
    display: inline-block;
    fill: var(--accent-color);
}
.video-info .course-icons button.hide {
    display: none;
}
.video-info .course-icons button.on svg {
    fill: var(--accent-color);
}
.video-info .course-icons button.on p {
    color: var(--accent-color);
}
.video-info .course-icons button.disable svg {
    fill: #D1D1D1;
}
.video-info .course-icons button.disable p {
    color: #D1D1D1;
}
.video-info .course-icons .icon-active-fill {
    display: none;
}
.video-info .course-icons svg {
    width: 100%;
    height: 100%;
    max-width: 2.5rem;
    max-height: 2.5rem;
}
.video-info .course-icons p {
    width: 100%;
}
/* video-info */

/* content-detail */
.content-detail {
    max-width: 58.6rem;
    height: 62rem;
    margin-bottom: 1rem;
    grid-area: 1/2/2/3;
    overflow: hidden;
}
.content-detail > section {
    border: 1px solid var(--border-secondary);
    background: var(--background-tertiary);
}
.content-detail .progress-summary {
    padding: 1.6rem 2rem;
    margin-bottom: 0.7rem;
}
.content-detail .progress-summary img {
    width: 10rem;
    height: 6rem;
    margin-right: 1rem;
    border-radius: calc(var(--thumb-radius) / 2);
}
.content-detail .progress-summary .status-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.content-detail .progress-summary .status-wrap p {
    display: inline-block;
    font-size: 1.4rem;
}
.content-detail .progress-summary .status-wrap div {
    position: relative;
}
.content-detail .progress-summary .status-wrap .title {
    width: 100%;
    margin-right: 1.2rem;
    font-size: 1.6rem;
    font-weight: 600;
}
.content-detail .progress-summary .status-time {
    display: inline-block;
}
.content-detail .progress-summary .status-time p:first-child::after {
    content: " / ";
    color: #a4a4a4;
}
.content-detail .progress-summary .status-time:nth-child(-n+3) p:nth-child(2) {
    color: var(--body-color-black2);
}
.content-detail .progress-summary .status-percent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 2.8rem;
    padding: 0 1.5rem;
    color: var(--accent-color);
}
.content-detail .progress-summary .status-percent::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 2rem;
    opacity: 0.1;
}
.content-detail .progress-summary .status-percent p {
    font-weight: 500;
}
.content-detail .progress-summary .status-percent p::after {
    content: "% 학습";
}
.content-detail .progress-summary .progress {
    margin: 0.8rem 0 0;
}
.content-detail .progress-summary .progress .stick-in {
    height: 0.6rem;
}
.content-detail .progress-summary .progress .type-my {
    height: 0.6rem;
}
.content-detail .progress-summary .status {
    position: relative;
    margin-right: 1rem;
}
.content-detail .progress-summary .status::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 1rem;
    top: 50%;
    right: -0.7rem;
    background: #A4A4A4;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.content-detail .progress-summary .status:last-child::after {
    display: none;
}
.content-detail .progress-summary .status p:first-child::after {
    content: " / ";
    color: #A4A4A4; 
}
.content-detail .progress-summary .status:nth-child(-n+3) p:nth-child(2) {
    color: var(--body-color-black2);
}
.content-detail .progress-summary .progress {
    margin: 1rem 0 0;
}
.content-detail .progress-summary .progress .stick-in {
    height: 0.7rem;
}
.content-detail .progress-summary .progress .type-my {
    height: 0.7rem;
}
.content-detail .aside-tab {
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-secondary);
}
.content-detail .aside-tab ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.content-detail .aside-tab li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 7rem;
    height: 5rem;
    color: var(--body-color-black2);
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.content-detail .aside-tab li.active {
    font-weight: 700;
    color: var(--body-color-black);
}
.content-detail .aside-tab li.active::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    bottom: 0;
    background: #000;
}
.content-detail .aside-contents {
    height: 47.14rem; 
    max-width: 58.6rem;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #e7eaec #ffffff;
    /* Chrome, Edge, and Safari */
}
.content-detail .aside-contents::-webkit-scrollbar {
    width: 0.6rem;
}
.content-detail .aside-contents::-webkit-scrollbar-track {
    background: #fff;
}
.content-detail .aside-contents::-webkit-scrollbar-thumb {
    background-color: #e7eaec;
    border-radius: 1rem;
    border: 2px solid #fff;
}
.content-detail .aside-contents > div {
    display: none;
}
.content-detail .aside-contents > div.active {
    display: block;
}
.content-detail .aside-contents form {
    padding: 2rem;
    margin-bottom: 2rem;
}
.content-detail .aside-contents form span {
    font-size: 1.3rem;
    color: var(--body-color-black2);
}
.content-detail .aside-contents form textarea {
    width: 100%;
    background: var(--background-primary);
    border: 1px solid var(--border-secondary);
}
.content-detail .aside-materials li {
    position: relative;
}
.content-detail .aside-materials li::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--border-secondary);
}
.content-detail .aside-materials a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
.content-detail .aside-materials a:last-child {
    border-bottom: none;
}
.content-detail .aside-materials p {
    margin-top: 0.7rem;
    font-size: 1.4rem;
}
.content-detail .aside-materials h6 {
    font-size: 1.5rem;
}
.content-detail .aside-materials .materials-icon {
    position: relative;
    padding-left: 4rem;
    width: calc(100% - 2rem); 
    word-break: break-all;
}
.content-detail .aside-materials .materials-icon::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    width: 2.8rem;
    height: 3.4rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.content-detail .aside-materials .materials-audio::before {
    background: url("../images/icon-audio.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-doc::before {
    background: url("../images/icon-doc.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-etc::before {
    background: url("../images/icon-etc.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-hwp::before {
    background: url("../images/icon-hwp.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-img::before {
    background: url("../images/icon-img.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-pdf::before {
    background: url("../images/icon-pdf.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-ppt::before {
    background: url("../images/icon-ppt.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-psd::before {
    background: url("../images/icon-psd.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-video::before {
    background: url("../images/icon-video.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-xls::before {
    background: url("../images/icon-xls.jpg") center center/100% no-repeat;
}
.content-detail .aside-materials .materials-zip::before {
    background: url("../images/icon-zip.jpg") center center/100% no-repeat;
}
.content-detail .aside-memo .list-content span {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.content-detail .aside-memo .list-content span::before {
    content: "";
    display: inline-block;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.5rem;
    background: url("../images/icon-play.svg") center center/100% no-repeat;
}
.content-detail .aside-review .user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1rem;
}
.content-detail .aside-review img {
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    border-radius: 50%;
}
.content-detail .aside-list {
    width: 100%;
}
.content-detail .aside-list input {
    position: absolute;
    right: 0;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    background: var(--accent-color);
    cursor: pointer;
}
.content-detail .aside-list input.disable {
    background: var(--button-secondary-default);
    cursor: not-allowed;
}
.content-detail .aside-list ul {
    position: relative;
    width: 100%;
    border-top: 1px solid var(--border-secondary);
}
.content-detail .aside-list .aside-form-list {
    padding: 0 2rem 2rem;
}
.content-detail .aside-list .aside-form-list:first-child {
    margin-top: 2rem;
}
.content-detail .aside-list .aside-form-list::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-secondary);
}
.content-detail .aside-list .aside-form-list:last-child::after {
    display: none;
}
.content-detail .aside-list .aside-form-list:last-child .list-desc {
    margin-bottom: 0;
}
.content-detail .aside-list .list-desc {
    width: 100%;
    margin-bottom: 2rem;
}
.content-detail .aside-list .list-desc p {
    font-size: 1.4rem;
    word-wrap: break-word;
}
.content-detail .aside-list .list-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 1rem;
}
.content-detail .aside-list .list-content .content-info {
    width: calc(100% - 6.5rem);
}
.content-detail .aside-list .list-content p {
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.content-detail .aside-list .list-content span {
    font-size: 1.3rem;
    color: var(--body-color-black2);
}
.content-detail .aside-list .button-wrap {
    position: relative;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}
.content-detail .aside-list .button-wrap button:nth-child(2n+1) {
    position: relative;
    padding-right: 1rem;
    margin-right: 1rem;
}
.content-detail .aside-list .button-wrap button:nth-child(2n+1)::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    width: 1px;
    height: 1rem;
    background: var(--border-secondary);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.content-detail .aside-list .button-wrap button:nth-child(2n) {
    padding-right: 0;
    margin-right: 0;
}
.content-detail .aside-list .button-wrap button:nth-child(2n)::after {
    display: none;
}
.content-detail .accordion-content {
    display: none;
}
.content-detail .accordion-content .accordion-detail {
    padding: 0 2rem 1rem;
}
.content-detail .accordion-content .accordion-detail p {
    font-size: 1.4rem;
}
.content-detail .accordion-content .course-part {
    padding: 2rem;
    background: #F9F9F9;
}
.content-detail .accordion-content .course-part > li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
    cursor: pointer;
}
.content-detail .accordion-content .course-part > li > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.content-detail .accordion-content .course-part > li:last-child {
    margin-bottom: 0;
}
.content-detail .accordion-content .course-part p {
    display: inline-block;
    padding-left: 0.5rem;
    font-size: 1.5rem;
}
.content-detail .accordion-content .course-part .unstarted {
    color: var(--body-color-black2);
}
.content-detail .accordion-content .course-part .unstarted svg {
    fill: var(--body-color-black2);
}
.content-detail .accordion-content .course-part span {
    width: 6rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
/* content-detail */

/* course-learning */
.course-learning {
    margin-top: 1rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-secondary);
}
.course-learning ul {
    padding: 2rem;
}
.course-learning li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 1rem;
    height: 10rem;
    background: var(--background-tertiary);
}
.course-learning li:last-child {
    margin-bottom: 0;
}
.course-learning h6 {
    margin-right: 1rem;
}
.course-learning .thumb-area {
    width: 16.6rem;
    height: 10rem;
}
.course-learning .text-area {
    width: 88%;
    padding: 1rem;
}
.course-learning .text-area > div:first-child {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
}
.course-learning .title {
    font-size: 1.4rem;
}
.course-learning .list-button button {
    padding: 0.2rem 1rem;
    margin-right: 1rem;
    font-size: 1.4rem;
    border-radius: calc(var(--button-radius) / 2);
}
.course-learning .list-button button:last-child {
    margin-right: 0;
}
.course-learning .list-button button:disabled, .course-learning .list-button button[disabled] {
    background: #BFBFBF;
    cursor: not-allowed;
}
.course-learning .progress {
    margin-bottom: 0;
}
.course-learning .progress-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 1rem;
}
.course-learning .progress-info span {
    font-size: 1.1rem;
    color: var(--body-color-black2);
}
.course-learning .progress-info p {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-color);
}
.course-learning .progress-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.course-learning .progress-desc span {
    font-size: 1.1rem;
    margin-right: 0.5rem;
    color: var(--body-color-black2);
}
.course-learning .progress-desc p {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.1rem;
}
.course-learning .completion .thumb-area {
    position: relative;
}
.course-learning .completion .thumb-area::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--background-tertiary);
    opacity: 0.8;
}
.course-learning .completion .thumb-area::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/icon-certificate.png") center center no-repeat;
}
/* course-learning */

/* accordion-content */
.accordion-content {
    display: none;
}
.accordion-content .accordion-detail {
    padding: 0 2rem 1rem;
}
.accordion-content .accordion-detail p {
    font-size: 1.4rem;
}
.accordion-content .course-part {
    padding: 2rem;
    background: #F9F9F9;
}
.accordion-content .course-part > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 2rem;
}
.accordion-content .course-part > li > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.accordion-content .course-part > li:last-child {
    margin-bottom: 0;
}
.accordion-content .course-part p {
    display: inline-block;
    padding-left: 0.5rem;
    font-size: 1.5rem;
}
.accordion-content .course-part .unstarted {
    color: var(--body-color-black2);
}
.accordion-content .course-part .unstarted svg {
    fill: var(--body-color-black2);
}
.accordion-content .course-part span {
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
/* accordion-content */

/* course-desc */
.course-desc {
    position: relative;
    width: 100%;
    max-width: 108rem;
    height: -moz-min-content;
    height: min-content;
    min-height: 64rem;
    background: var(--background-tertiary);
    grid-area: 3/1/4/2;
}
.course-desc .info-tab::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
    background: var(--border-secondary);
    z-index: 0;
}
.course-desc .info-tab ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 1rem;
}
.course-desc .info-tab li {
    position: relative;
    width: 10rem;
    height: 5rem;
    padding: 1.5rem 0;
    color: var(--body-color-black2);
    text-align: center;
    cursor: pointer;
}
.course-desc .info-tab li.active {
    font-weight: 700;
    color: var(--body-color-black);
}
.course-desc .info-tab li.active::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    bottom: 0;
    background: #000;
    z-index: 1;
}
.course-desc .info-contents {
    padding: 3rem 2rem 5rem;
}
.course-desc .info-contents > div {
    display: none;
}
.course-desc .info-contents > div.active {
    display: block;
}
.course-desc .course-info img {
    max-width: 70rem;
    margin: 2rem 0;
}
.course-desc .course-preview ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.course-desc .course-preview li {
    position: relative;
}
.course-desc .course-preview .thumb-area {
    position: relative;
    max-width: 28rem;
    max-height: 16.8rem;
    margin-right: 1.2rem;
}
.course-desc .course-preview .thumb-area::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 4.7rem;
    height: 4.7rem;
    background: #000;
    border-radius: 50%;
    opacity: 80%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 1;
}
.course-desc .course-preview .thumb-area::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    background: url("../images/play-solid.svg") center center no-repeat;
    -webkit-transform: translate(-40%, -50%);
            transform: translate(-40%, -50%);
    z-index: 2;
}
.course-desc .course-preview img {
    border-radius: var(--thumb-radius);
}
.course-desc .course-preview span {
    position: absolute;
    padding: 0.4rem 0.7rem;
    right: 2.2rem;
    bottom: 1rem;
    font-size: 1.2rem;
    background: #0000008c;
    color: var(--body-color-white);
    border-radius: var(--elem-radius);
}
.course-desc .course-instructor img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
}
.course-desc .course-instructor .instructor {
    display: block;
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 700;
}
.course-desc .course-instructor p {
    font-size: 1.5rem;
}
.course-desc .course-instructor p.keyword {
    padding: 1rem 0 2rem;
}
.course-desc .course-instructor p.keyword img {
    width: unset;
    height: unset;
    display: unset;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 0;
}
.course-desc article {
    margin-top: 3rem;
}
.course-desc article h6 {
    font-weight: 700;
    margin-bottom: 1rem;
}
.course-desc article p {
    font-size: 1.5rem;
    line-height: 1.4;
}
.course-desc article:first-child {
    margin-top: 0;
}
/* course-desc */

/* course-accordion */
.course-accordion > li {
    position: relative;
    transition: all 0.3s;
}
.course-accordion > li:last-child::after { 
    display: none;
}
.course-accordion > li.open .icon-play {
    fill: var(--body-color-black);
}
.course-accordion > li.open .accordion-title {
    color: var(--body-color-black);
}
.course-accordion > li.open .accordion-arrow {
    transform: rotate(180deg);
    fill: var(--body-color-black);
}
.course-accordion > li::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--border-secondary);
}
.course-accordion > li.studying .accordion-title {
    color: var(--accent-color);
}
.course-accordion > li.studying .icon-play {
    fill: var(--accent-color);
}
.course-accordion > li.complete .accordion-title {
    color: var(--body-color-black);
}
.course-accordion > li.complete .icon-play {
    fill: var(--body-color-black);
}
.course-accordion > li.is-subtitle .accordion-title .icon-play {
    display: none;
}
.course-accordion > li.is-subtitle .icon-play {
    fill: var(--body-color-black);
}
.course-accordion > li.is-subtitle .course-part p {
    color: var(--body-color-black2);
}
.course-accordion > li.is-subtitle .course-part .icon-play {
    fill: var(--body-color-black2);
}
.course-accordion > li.is-subtitle .course-part .studying p {
    color: var(--accent-color);
}
.course-accordion > li.is-subtitle .course-part .studying .icon-play {
    fill: var(--accent-color);
}
.course-accordion > li.is-subtitle .course-part .complete p {
    color: var(--body-color-black);
}
.course-accordion > li.is-subtitle .course-part .complete .icon-play {
    fill: var(--body-color-black);
}
.course-accordion > li.isnt-subtitle.studying .accordion-title {
    color: var(--accent-color);
}
.course-accordion > li.isnt-subtitle.studying .icon-play {
    fill: var(--accent-color);
}
.course-accordion > li.isnt-subtitle.open .accordion-title {
    color: var(--accent-color);
}
.course-accordion > li.isnt-subtitle.open .icon-play {
    fill: var(--accent-color);
}
.course-accordion > li .accordion-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 2rem;
}
.course-accordion > li .accordion-link > div:first-child {
    width: 80%;
}
.course-accordion > li .accordion-link .button-wrap {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
.course-accordion > li .accordion-title {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 2rem;
    font-size: 1.5rem;
    color: var(--body-color-black2);
    cursor: pointer;
}
.course-accordion > li .accordion-title svg {
    position: absolute;
    left: 0;
    fill: var(--body-color-black2);
    margin-right: 0.5rem;
}
.course-accordion > li .remaining-time {
    display: inline-block;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.course-accordion > li .accordion-desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 0.7rem;
    cursor: pointer;
}
.course-accordion > li .progress {
    width: 50%;
    margin-bottom: 0;
    margin-left: 1rem;
}
.course-accordion > li button {
    margin-right: 1rem;
}
.course-accordion > li button p {
    margin-top: 0.3rem;
    font-size: 1.2rem;
    fill: var(--body-color-black);
}
.course-accordion > li button svg {
    fill: var(--body-color-black);
}
.course-accordion > li button:disabled, .course-accordion > li button[disabled] {
    cursor: not-allowed;
}
.course-accordion > li button:disabled svg, .course-accordion > li button[disabled] svg {
    fill: var(--body-color-black2);
}
.course-accordion > li button:disabled svg, .course-accordion > li button[disabled] p {
    color: var(--body-color-black2);
}
/* course-accordion */

/* relation-contents */
.relation-contents {
    position: relative;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    max-width: 58.6rem;
    grid-area: 2/2/4/3;
    margin-top: 1rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.relation-contents .relation-tab {
    padding: 0 1rem;
    border-bottom: 1px solid var(--border-secondary);
}
.relation-contents .relation-tab ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.relation-contents .relation-tab li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 5rem;
    padding: 0 1rem;
    color: var(--body-color-black2);
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.relation-contents .relation-tab li.active {
    font-weight: 700;
    color: var(--body-color-black);
}
.relation-contents .relation-tab li.active::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    bottom: 0;
    background: #000;
    transform: translateY(1px);
}
.relation-contents .relation-series a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.relation-contents .relation-series ul {
    padding: 2rem;
}
.relation-contents .relation-series li {
    margin-bottom: 1.5rem;
}
.relation-contents .relation-series li:last-child {
    margin-bottom: 0;
}
.relation-contents .relation-series > div {
    display: none;
}
.relation-contents .relation-series > div.active {
    display: block;
}
.relation-contents .relation-series:has(> div.active li:nth-child(n+13)) {
    max-height: 149.2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #e7eaec #ffffff;
    /* Chrome, Edge, and Safari */
}
.relation-contents .relation-series:has(> div.active li:nth-child(n+13))::-webkit-scrollbar {
    width: 0.6rem;
}
.relation-contents .relation-series:has(> div.active li:nth-child(n+13))::-webkit-scrollbar-track {
    background: #fff;
}
.relation-contents .relation-series:has(> div.active li:nth-child(n+13))::-webkit-scrollbar-thumb {
    background-color: #e7eaec;
    border-radius: 1rem;
    border: 2px solid #fff;
}
.relation-contents .thumb-area {
    width: 18rem;
    height: 10.8rem;
    margin-right: 1rem;
}
.relation-contents .thumb-area img {
    width: 18rem;
    height: 10.8rem;
    border-radius: var(--thumb-radius);
}
.relation-contents .text-area {
    width: calc(100% - 20rem);
    padding: 1rem 0;
}
.relation-contents .text-area span {
    display: -webkit-box;
    font-size: 1.5rem;
    font-weight: 500;
}
.relation-contents .text-area p {
    position: relative;
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.relation-contents .text-area p::after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    right: -0.7rem;
    width: 1px;
    height: 1rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: var(--body-color-black2);
}
.relation-contents .text-area p:last-child::after {
    display: none;
}
.relation-contents .text-area p img {
    width: 32px;
    display: unset;
    vertical-align: middle;
}
/* relation-contents */

/* breadcrumb */
.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 2rem;
    color: var(--body-color-black2);
}
.breadcrumb span {
    font-size: 1.4rem;
}
.breadcrumb span::after {
    content: ">";
    margin: 0 0.5rem;
}
.breadcrumb span:last-child::after {
    content: "";
}
.breadcrumb a {
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.breadcrumb svg {
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    fill: var(--body-color-black2);
}
/* breadcrumb */

/* mypage */
.mypage .mypage-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.mypage .profile {
    width: 16.4rem;
    height: 14rem;
    padding: 1.5rem 2rem;
    margin-right: 1rem;
    background: var(--accent-color);
}
.mypage .profile .thumb-area {
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 1rem;
}
.mypage .profile .text-area {
    text-align: center;
    color: var(--body-color-white);
}
.mypage .profile .user-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.mypage .profile .user-name {
    font-size: 1.8rem;
    font-weight: 700;
}
.mypage .profile .user-email {
    font-size: 1.4rem;
}
.mypage .all-course {
    width: calc(100% - 16.4rem);
    height: 14rem;
    border: 1px solid var(--border-secondary);
}
.mypage .all-course li {
    width: 32.5%;
}
.mypage .title-area {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    padding-left: 2rem;
    height: 4.5rem;
    background: var(--background-tertiary);
    border-bottom: 1px solid var(--border-secondary);
}
.mypage .title-area .button-wrap {
    position: absolute;
    right: 2rem;
}
.mypage .title-area .button-wrap svg {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
.mypage .title-area .button-wrap.active svg {
    -webkit-transform: rotate(0);
            transform: rotate(0);
}
.mypage .title-area button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.mypage h6 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-weight: 700;
}

.setup { 
    position: absolute;
    width: 100%;
    height: -moz-max-content;
    height: max-content;
}

.setup-wrap { 
    position: relative;
    max-width: 68rem;
    padding: 5rem 10rem 8rem;
    margin: 10rem auto;
    background: var(--background-tertiary);
    border-radius: 1.6rem;
}
.setup-wrap .form-title {
    margin-bottom: 4rem;
}
.setup-wrap .profile-detail {
    padding: 0;
    border: none;
}
.setup-wrap .profile-detail .form-wrap > label {
    margin-right: 3.5rem;
}
.setup-wrap .profile-detail input[type=text],
.setup-wrap .profile-detail input[type=email],
.setup-wrap .profile-detail .select-box { 
    width: calc(100% - 15rem);
}
.setup-wrap .profile-top { 
    padding: 0;
    padding-bottom: 4rem;
    margin-bottom: 4rem;
    border: none;
    border-bottom: 1px solid var(--border-secondary);
}
.setup-wrap .profile-top .thumb-area { 
    flex-basis: 12rem;
}
.setup-wrap .profile-top .text-area { 
    width: calc(100% - 15rem);
}
.setup-wrap .profile-top input[type=email] { 
    width: 100%;
}
.setup-wrap .button-wrap a {
    width: 100%;
}

/* search-form */
.mypage .search-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-top: 1rem;
    height: 5rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.mypage .search-form .select-box {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-right: 1px solid var(--border-secondary);
}
.mypage .search-form .search-date {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.mypage .search-form .search-date .search-month, 
.mypage .search-form .search-date .search-year, 
.mypage .search-form .search-date .search-period {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
}
.mypage .search-form .search-date .search-month > div:first-child,
.mypage .search-form .search-date .search-year > div:first-child,
.mypage .search-form .search-date .search-period > div:first-child {
    display: flex;
    align-items: center;
    position: relative;
    height: 5rem;
    padding-right: 2rem;
    margin-right: 1rem;
}
.mypage .search-form .search-date .search-month > div:first-child::after,
.mypage .search-form .search-date .search-year > div:first-child::after,
.mypage .search-form .search-date .search-period > div:first-child::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: var(--border-secondary);
}
.mypage .search-form .search-date input[type=date], .mypage .search-form .search-date input[type=month], .mypage .search-form .search-date input[type=number] {
    position: relative;
    width: 20rem;
    padding: 1rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
    background: url("../images/icon-calendar.svg") no-repeat right 1rem center/2rem auto;
    background-color: #fff;
}
.mypage .search-form .search-date input[type=date]::-webkit-calendar-picker-indicator, 
.mypage .search-form .search-date input[type=month]::-webkit-calendar-picker-indicator, 
.mypage .search-form .search-date input[type=number]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
    opacity: 0;
}
.mypage .search-form .search-date input[type=date]::before,
.mypage .search-form .search-date input[type=month]::before,
.mypage .search-form .search-date input[type=number]::before {
    content: attr(placeholder);
    width: 100%;
    height: 100%;
}
.mypage .search-form .search-date input[type=date]:valid::before,
.mypage .search-form .search-date input[type=month]:valid::before,
.mypage .search-form .search-date input[type=date]:valid::before {
    display: none;
}
/* search-form */

/* popup-learn */
.popup-learn .container {
    max-width: 53.2rem;
}
.popup-learn .container > div {
    padding: 5rem 4rem 0;
}
.popup-learn .popup-title {
    margin-bottom: 3.2rem;
}
.popup-learn ul {
    height: 32rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #e7eaec #ffffff;
    /* Chrome, Edge, and Safari */
}
.popup-learn ul::-webkit-scrollbar {
    width: 0.6rem;
}
.popup-learn ul::-webkit-scrollbar-track {
    background: #fff;
}
.popup-learn ul::-webkit-scrollbar-thumb {
    background-color: #e7eaec;
    border-radius: 1rem;
    border: 2px solid #fff;
}
.popup-learn li {
    position: relative;
    padding-right: 1rem;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
}
.popup-learn li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.popup-learn li a {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 0 0 2.6rem;
}
.popup-learn li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.6rem;
    height: 1.6rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: url("../images/icon-clock.svg") center center no-repeat;
    -webkit-filter: invert(93%) sepia(8%) saturate(8%) hue-rotate(337deg) brightness(92%) contrast(87%);
            filter: invert(93%) sepia(8%) saturate(8%) hue-rotate(337deg) brightness(92%) contrast(87%);
}
.popup-learn li a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 2rem;
    height: 2rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: url("../images/angle-right.svg") center center no-repeat;
    -webkit-filter: invert(76%) sepia(5%) saturate(63%) hue-rotate(314deg) brightness(90%) contrast(84%);
            filter: invert(76%) sepia(5%) saturate(63%) hue-rotate(314deg) brightness(90%) contrast(84%);
}
.popup-learn li span {
    font-size: 1.5rem;
}
.popup-learn li p {
    width: 100%;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--body-color-black2);
}
/* popup-learn */

#skipNavi {
    position: absolute;
    width: 100%;
    top: -20rem;
    margin: 0 auto;
}
#skipNavi a {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    font-size: 0;
    overflow: hidden;
    z-index: 9999;
}
#skipNavi a:active, #skipNavi a:focus {
    width: 100%;
    height: auto;
    background: #000;
    color: #fff;
    font-size: 1em;
    text-align: center;
    padding: 5px 0;
}

/* nav */
.side-nav {
    position: fixed;
    top: 7.2rem;
    bottom: 5rem;
    left: 0;
    width: 24rem;
    height: calc(100vh - 7.2rem);
    border-right: 1px solid var(--border-secondary);
    z-index: 10;
}
.side-nav.on {
    display: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.side-nav .side-nav-warp {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 3rem;
    height: 100%;
    left: 0;
    padding: 0 1.5rem 9rem 1.5rem;
    background: var(--background-tertiary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #e7eaec #ffffff;
    /* Chrome, Edge, and Safari */
}
.side-nav .side-nav-warp::-webkit-scrollbar {
    width: 0.6rem;
}
.side-nav .side-nav-warp::-webkit-scrollbar-track {
    background: #fff;
}
.side-nav .side-nav-warp::-webkit-scrollbar-thumb {
    background-color: #e7eaec;
    border-radius: 1rem;
    border: 2px solid #fff;
}

.mo-nav {
    display: none;
}

.nav-menu {
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.nav-menu ul {
    position: relative;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.nav-menu ul:nth-child(-n+2)::after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background: var(--border-secondary);
}
.nav-menu li {
    height: 4rem;
}
.nav-menu li.on a {
    color: var(--accent-color);
    background: var(--background-primary);
}
.nav-menu li.on a svg {
    fill: var(--accent-color);
}
.nav-menu a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    height: 4rem;
    padding: 0 2.5rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: 500;
}
.nav-menu a:hover, .nav-menu a:focus {
    color: var(--accent-color);
    background: var(--background-primary);
}
.nav-menu a:hover svg, .nav-menu a:focus svg {
    fill: var(--accent-color);
}
.nav-menu a svg {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 1.5rem;
}

.nav-test {
    width: 100%;
    font-size: 2rem;
    font-weight: bold;
    padding: 0 2.5rem;
}

@media (hover: hover) and (pointer: fine) {
    .nav-menu a:hover {
        color: var(--accent-color);
        background: var(--background-primary);
    }
}
.nav-menu > div {
    position: relative;
    bottom: 2rem;
}
.nav-floating {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    bottom: 0rem;
    right: 0;
    left: 0;
    height: 9rem;
    background: var(--background-tertiary);
}
.nav-floating button {
    width: 21rem;
    height: 5rem;
    background: var(--background-primary);
    border: 1px solid var(--border-secondary);
    border-radius: calc(var(--button-radius) / 2);
}
/* nav */

/* sub-page */
.sub-page .side-nav::after {
    content: "";
    position: absolute;
    width: calc(100vw - 24rem);
    height: 100vh;
    top: 0;
    left: 24rem;
    background-color: rgba(0, 0, 0, 0.5);
}
.sub-page .container {
    margin: 0 auto;
}
/* sub-page */

/* header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--background-tertiary);
    z-index: 102;
}
header .container {
    position: static;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    height: 7.2rem;
}
header .start {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 24rem;
    height: 100%;
    padding-left: 4rem;
}
header .center {
    position: relative;
}
header .center .search-form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 48rem;
    height: 4.5rem;
    padding: 0 1rem;
    background: var(--background-primary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
}
header .center .search-panel {
    display: none;
    position: absolute;
    overflow-y: hidden;
    width: 75rem;
    height: 41.5rem;
    top: 5.8rem;
    left: 50%;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    transform: translateX(-50%);
}
header .center .search-panel.open {
    display: block;
}
header .center .search-panel .search-form-mobile {
    display: none;
}
header .center .search-panel .search-index-open {
    position: absolute;
    top: 2.4rem;
    right: 2rem;
    width: 1.6rem;
    height: 1.6rem;
    cursor: pointer;
}
header .center .search-panel > div {
    position: relative;
    display: flex;
}
header .center .search-panel a {
    font-size: 1.5rem;
}
header .center .search-panel-mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    background: var(--background-tertiary);
    overflow-y: auto;
}
header .center .search-panel-mobile .search-form-wrap { 
    display: flex;
    align-items: center;
    padding: 2.4rem 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
header .center .search-panel-mobile .search-form { 
    display: flex;
    width: 100%;
    margin-right: 1rem;
}
header .center .search-recent {
    width: 32rem;
    padding: 2.4rem 2rem;
}
header .center .search-recent ul {
    display: flex;
    flex-wrap: wrap;
    max-height: 32rem;
    overflow: hidden;
}
header .center .search-recent ul li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1.4rem;
    margin-right: 0.7rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-secondary);
    border-radius: 2rem;
}
header .center .search-recent ul .button-remove { 
    height: 100%;
    width: auto;
    margin-left: 0.7rem;
}
header .center .search-recent ul img {
    width: 1rem;
    height: 1rem;
}
header .center .search-recent ul a {
    width: calc(100% - 1.7rem);
    line-height: 1;
}
header .center .search-popular { 
    width: 43rem;
    padding: 2.4rem 2rem;
}
header .center .search-popular .contents {
    display: flex;
    justify-content: space-between;
}
header .center .search-popular .contents ul {
    width: 49%;
}
header .center .search-popular .contents p { 
    display: inline-block;
    width: 1.8rem;
    margin-right: 1rem;
    font-size: 1.5rem;
    color: var(--accent-color);
}
header .center .search-popular .contents a { 
    display: flex;
    align-items: center;
    height: 3.2rem;
}
header .center .search-popular .contents span {
    display: inline-block;
    width: 16.2rem;
    font-size: 1.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
header .center .search-index { 
    display: none;
    position: absolute;
    width: 75rem;
    height: 41.5rem;
    top: 5.8rem;
    left: 50%;
    padding: 2.4rem 2rem 0;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    overflow-y: auto;
    scrollbar-width: thin;
    transform: translateX(-50%);
}
header .center .search-index.open { 
    display: block;
}
header .center .search-index > svg { 
    position: absolute;
    right: 2rem;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}
header .center .search-index .index-accordion { 
    padding-bottom: 2.4rem;
}
header .center .search-index .index-accordion > li {
    border-top: 1px solid var(--border-secondary);
}
header .center .search-index .index-accordion > li.open .accordion-arrow { 
    transform: rotate(180deg);
}
header .center .search-index .accordion-title { 
    max-width: 55rem;
    width: calc(100% - 1.3rem);
    padding: 0.7rem 0;
    font-size: 1.5rem;
}
header .center .search-index .accordion-content {
    display: none;
    padding: 1rem 1.4rem;
    background: var(--background-primary);
    border-top: 1px solid var(--border-secondary);
}
header .center .search-index .accordion-link { 
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header .center .search-index .quick-search { 
    padding: 0.3rem 1rem;
    background: #eee;
    border-radius: 1.1rem;
}
header .center .search-index .quick-search li { 
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-right: 0.2rem;
}
header .center .search-index .quick-search a { 
    font-size: 1.2rem;
    line-height: 1;
    color: var(--body-color-black2);
}
header .center .search-index .accordion-detail li { 
    margin-top: 0.9rem;
}
header .center .search-index .accordion-detail li a { 
    font-size: 1.3rem;
}
header .center .title-area p {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    font-weight: 600;
}
header .center button {
    width: 4.5rem;
    height: 4.5rem;
}
header .center svg {
    height: 100%;
    fill: var(--body-color-black);
}
header .center input[type=text] {
    width: 100%;
    height: 4rem;
}
header .end {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-right: 4rem;
}
header .end .notification {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 4rem;
    height: 4rem;
    margin-right: 1.5rem;
}
header .end .notification.on::after {
    content: "";
    display: block;
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--accent-color);
}
header .end .profile {
    width: 4rem;
    height: 4rem;
}
header .end .profile img, header .end .user-form .user-info .thumb-area img, .mo-nav .user-info .thumb-area img {
    border-radius: 50%;
}
header .end .profile:hover ~ .user-form {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    z-index: -5;
}
header .end .search-button {
    display: none;
}
header .end svg {
    width: 100%;
    height: 2.2rem;
}
header .user-form {
    position: absolute;
    top: 5.6rem;
    right: 40%;
    width: 26rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    -webkit-box-shadow: var(--shadow-01);
            box-shadow: var(--shadow-01);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform-origin: top;
            transform-origin: top;
    -webkit-transition-delay: 0.3s;
            transition-delay: 0.3s;
    z-index: -5;
}
header .user-form:not(:hover) {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
}
header .user-form .user-info {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
header .user-form .user-info .thumb-area {
    width: 3.2rem;
    height: 3.2rem;
    margin-right: 1rem;
}
header .user-form .user-info .text-area {
    width: 15rem;
}
header .user-form .user-info .user-name {
    font-size: 1.5rem;
    font-weight: 500;
}
header .user-form .user-info .user-email {
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
header .user-form .learning-time {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
header .user-form .learning-time img {
    width: 4rem;
    height: 4rem;
    margin-right: 0.8rem;
}
header .user-form .learning-time p {
    width: 100%;
    font-size: 1.5rem;
    font-weight: 500;
}
header .user-form .learning-time span {
    font-size: 1.4rem;
    color: var(--accent-color);
}
header .user-form .user-menu {
    margin: 0.4rem 0;
}
header .user-form .user-menu li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 3.6rem;
    font-size: 1.5rem;
}
header .user-form .user-menu li:hover {
    background: var(--background-primary);
}
header .user-form .user-menu a {
    padding: 2rem;
    width: 100%;
}
header .menu-btn {
    position: relative;
    width: 1.8rem;
    height: 1.4rem;
    margin-right: 1.5rem;
    cursor: pointer;
}
header .menu-btn span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    left: 0;
    background-color: var(--body-color-black);
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
header .menu-btn span:nth-child(1) {
    top: 0;
}
header .menu-btn span:nth-child(2) {
    top: 0.6rem;
}
header .menu-btn span:nth-child(3) {
    bottom: 0;
}
header .menu-btn.on span:nth-child(1) {
    top: 50%;
    margin-top: -1px;
    -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
}
header .menu-btn.on span:nth-child(2) {
    opacity: 0;
}
header .menu-btn.on span:nth-child(3) {
    top: 50%;
    bottom: auto;
    margin-top: -1px;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
}
header .logo { 
  height: auto;
  max-height: 3rem;
  min-height: 2.4rem;
  overflow: hidden;
}
header .logo img {
    max-height: 3rem;
}
/* header */

/* autocomplete */
.ui-autocomplete {
    z-index: 500 !important;
}
.ui-menu {
    position: relative;
    padding: 0.4rem 0;
    left: calc(50% + 5.3rem) !important;
    -webkit-transform: translateX(-50%) !important;
            transform: translateX(-50%) !important;
    width: 48rem !important;
    border: 1px solid var(--border-secondary) !important;
    border-radius: 0.4rem;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui.button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    background: #e7eaec !important;
    border: 1px solid var(--border-secondary) !important;
    color: var(--body-color-black);
}
.ui-menu-item {
    position: relative;
}
.ui-menu-item .ui-menu-item-wrapper {
    padding-left: 3.6rem;
    font-size: 1.4rem;
    color: var(--body-color-black);
}
.ui-menu-item .ui-menu-item-wrapper::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 1.6rem;
    background: url('../images/icon-autocomplete.svg') center center no-repeat;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
/* autocomplete */

/* footer */
footer {
    position: relative;
    padding: 4.5rem 0;
    background: var(--background-secondary);
}
footer .container {
    max-width: calc(100% - 24rem);
    margin-left: 24rem;
    padding: 2rem 3rem;
}
footer .container > div {
    max-width: 150.8rem;
    margin: 0 auto;
}
footer .foot-top {
    display: flex;
    flex-wrap: wrap;
}
footer .foot-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-left: 8rem;
    line-height: 1;
}
footer .foot-menu span {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 2rem;
}
footer .foot-menu li {
    margin-bottom: 1rem;
}
footer .foot-menu .menu-list {
    display: inline-block;
    margin-right: 5rem;
}
footer .foot-menu .menu-list li {
    font-size: 1.4rem;
}
footer .foot-info {
    display: block;
    width: 100%;
    font-style: normal;
    color: var(--body-color-black2);
}
footer .foot-info::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin: 4rem 0 1.3rem;
    background: var(--border-primary);
}
footer .foot-info ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
footer .foot-info li {
    position: relative;
    padding-right: 0.5rem;
    margin-right: 0.5rem;
    font-size: 1.2rem;
    line-height: 1.3;
}
footer .foot-info li::after {
    content: "";
    position: relative;
    display: inline-flex;
    width: 1px;
    height: 1rem;
    top: 1px;
    right: 0;
    background: var(--body-color-black2);
    margin-left: .8rem;
}
footer .foot-info li:last-child::after {
    display: none;
}

footer .foot-menu .privacy-policy {
  font-weight: 600;
}
/* footer */

/* associate-footer */
.associate-footer { 
    width: 100%;
    height: 24.8rem;
    padding: 0;
}
.associate-footer .container {
    height: 100%;
    align-content: center;
}
/* associate-footer */

/* contents */
.contents {
    position: relative;
}
.contents .container {
    max-width: calc(100% - 24rem);
    min-height: 50vh;
    margin-left: 24rem;
    padding: 5rem 3rem 0 3rem;
}
.contents section {
    max-width: 150.8rem;
    margin: 0 auto;
}
.contents section.section-sm {
    max-width: 95rem;
}
/* contents */

/* hero */
.hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 3rem 8rem 3rem 4rem;
    background: #292929;
    border: 1px solid var(--border-secondary);
    border-radius: calc(var(--elem-radius) * 2);
}
.hero .thumb-area {
    width: 35%;
    max-width: 45rem;
    min-width: 30rem;
    max-height: 27rem;
    margin-right: 3rem;
}
.hero .thumb-area img {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--thumb-radius) * 2);
}
.hero .text-area {
    width: 65%;
    max-width: 95rem;
    color: #ffffff;
}
.hero .text-area span {
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--accent-color);
}
.hero .text-area h4 {
    display: -webkit-box;
    margin: 1rem 0;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: #ffffff;
}
.hero .text-area p {
 display: -webkit-box;
    font-size: 1.5rem;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.hero .text-area a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18rem;
    height: 5rem;
    margin-top: 3rem;
    font-size: 1.6rem;
    font-weight: 500;
}
/* hero */

/* feed */
.feed {
    margin-top: 6rem;
}
section:first-child .feed {
    margin-top: 0;
}
.feed:nth-child(-n+2) {
    margin-top: 5rem;
}
.feed .feed-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: 1.4rem;
}
.feed .feed-title a {
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.feed .swiper-container {
    overflow: hidden;
}
.feed .swiper-button-next, .feed .swiper-button-prev {
    width: 4rem;
    height: 4rem;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: var(--shadow-02);
            box-shadow: var(--shadow-02);
}
.feed .swiper-button-next {
    right: -2rem;
}
.feed .swiper-button-prev {
    left: -2rem;
}
.feed .swiper-button-next::after,
.feed .swiper-button-prev::after {
    width: 1rem;
    height: 2rem;
}
.feed .swiper-button-next.swiper-button-disabled, .feed .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}
.feed .swiper-button-next:after {
    background: url("../images/angle-right.svg") center center no-repeat;
}
.feed .swiper-button-prev:after {
    background: url("../images/angle-left.svg") center center no-repeat;
}

.feed-row {
    position: relative;
}
.feed-row .swiper-slide {
    width: 29.2rem;
}
.feed-row .swiper-slide:last-child {
    margin-right: 0;
}
.feed-row .swiper-slide:hover .thumb-area img {
    -webkit-transform: scale(1.03);
            transform: scale(1.03);
}
.feed-row .thumb-area {
    overflow: hidden;
    border-radius: var(--thumb-radius);
}
.feed-row .text-area h6 {
    display: -webkit-box;
    margin-bottom: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.feed-row .text-area span {
    font-size: 1.5rem;
    color: var(--body-color-black2);
    position: relative;
    display: inline-block;
    padding-right: .7rem;
}
.feed-row .text-area span::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 1rem;
    top: 50%;
    right: 0;
    background: var(--body-color-black2);
    transform: translateY(-50%);
}
.feed-row .text-area span:last-child::after {
    display: none;
}
.feed-continue .thumb-area {
    position: relative;
    border-radius: var(--thumb-radius) var(--thumb-radius) 0 0;
}
.feed-continue .thumb-area::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 6.2rem;
    height: 6.2rem;
    background: #000;
    border-radius: 50%;
    opacity: 80%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    z-index: 1;
}
.feed-continue .thumb-area::after {
    content: "";
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    width: 2.8rem;
    height: 2.4rem;
    background: url("../images/play-solid.svg") center center no-repeat;
    transform: translate(-40%, -50%);
    z-index: 2;
}
.feed-continue .text-area {
    margin-top: 1rem;
}
.feed-continue .feed-row .swiper-button-next, .feed-continue .feed-row .swiper-button-prev {
    top: 35%;
}
.feed-continue .progress .stick-in {
    border-radius: 0 0 var(--thumb-radius) var(--thumb-radius);
}
.feed-continue .progress .type-my {
    border-radius: 0 0 0 var(--thumb-radius);
}
.feed-continue .progress .progress-stick {
    border-radius: 0 0 var(--thumb-radius) var(--thumb-radius);
    overflow: hidden;
}

.feed-ranking {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.feed-ranking ul {
    width: 50%;
}
.feed-ranking li {
    position: relative;
    margin-bottom: 1rem;
}
.feed-ranking li::after {
    content: "";
    display: block;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    margin-top: 1rem;
    background: var(--border-secondary);
}
.feed-ranking li:last-child::after {
    display: none;
}
.feed-ranking a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.feed-ranking h6 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.feed-ranking p {
    position: relative;
    width: 3.5rem;
    min-width: 2.5rem;
    font-size: 3.2rem;
    font-weight: 600;
    text-align: right;
}
.feed-ranking .thumb-area {
    margin: 0 2rem;
}
.feed-ranking .thumb-area img {
    width: 22rem;
    height: 13.2rem;
    border-radius: var(--thumb-radius);
    -o-object-fit: cover;
        object-fit: cover;
}
.feed-ranking .text-area {
    width: 45%;
}
.feed-ranking .text-area span {
    position: relative;
    display: inline-block;
    margin-top: 0.7rem;
    padding-right: .7rem;
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.feed-ranking .text-area span::after {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 1rem;
    top: 50%;
    right: 0;
    background: var(--body-color-black2);
    transform: translateY(-50%);
}
.feed-ranking .text-area span:last-child::after {
    display: none;
}
.feed-ranking .arrow-wrap p {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.feed-ranking .arrow-wrap p::after { 
    content: "";
    position: relative;
    display: inline-block;
    top: 1rem;
    width: 2.4rem;
    height: 1.4rem;
}
.feed-ranking .arrow-up::after {
    background: url("../images/arrow-up.png") center center no-repeat;
    background-size: 100%;
}
.feed-ranking .arrow-down::after {
    background: url("../images/arrow-down.png") center center no-repeat;
    background-size: 100%;
}
.feed-ranking .arrow-bar::after {
    background: url("../images/arrow-bar.png") center center no-repeat;
    background-size: 100%;
}
/* feed */

/* manual */
.manual {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 22rem;
    max-height: 22rem;
    margin-top: 6rem;
    padding: 0 6rem 0 4rem;
    background: var(--background-tertiary);
    border-radius: 1.6rem;
}
.manual .img-area {
    width: 56rem;
    height: 22rem;
}
.manual img {
    -o-object-fit: cover;
        object-fit: cover;
}
.manual .text-area {
    width: 26rem;
}
.manual .text-area span {
    display: inline-block;
    margin-top: 3rem;
    font-size: 1.6rem;
}
.manual .text-area h5 {
    word-break: break-all;
}
.manual.manual-primary {
    padding: 0;
}
.manual.manual-primary .text-area {
    position: absolute;
    top: 50%;
    left: 5rem;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
}
.manual.manual-primary img {
    border-radius: 1.6rem;
}
/* manual */

/* progress */
.progress {
    margin-bottom: 1rem;
}
.progress .progress-wrap {
    width: 100%;
}
.progress .progress-stick {
    position: relative;
    flex: 1;
}
.progress .stick-in {
    display: flex;
    width: 100%;
    height: 0.4rem;
    background: #EEE;
}
.progress .type-my {
    position: absolute;
    display: block;
    width: 100%;
    height: 0.4rem;
    top: 0;
    left: 0;
    z-index: 2;
    background: var(--accent-color);
}
.progress .type-my ins {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* progress */

/* noticelist */
.notice_list .noticelist {
    padding: 1rem 2rem 2rem;
    background: var(--background-tertiary);
}
.notice_list .noticelist li {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-secondary);
}
.notice_list .noticelist li p {
    position: relative;
    margin-bottom: 0.7rem;
    font-size: 1.6rem;
    font-weight: 600;
}
.notice_list .noticelist li.new p::after {
    content: "";
    display: inline-block;
    position: relative;
    top: -1rem;
    right: -0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-color);
}
.notice_list .noticelist li span {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--body-color-black2);
}
/* noticelist */

/* noticedetail */
.notice_sub .notice_desc {
    max-width: 120rem;
    background: var(--background-tertiary);
}
.notice_sub .content-info {
    padding: 2.5rem 2rem 1.5rem;
    border-bottom: 1px solid var(--border-secondary);
}
.notice_sub .content-info p {
    margin-bottom: 0.7rem;
    font-weight: 600;
    font-size: 1.6rem;
}
.notice_sub .content-info span {
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.notice_sub .content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    padding: 3rem;
    margin: 0 auto;
    text-align: left;
}
.notice_sub .content img {
    max-width: 72rem;
}
.notice_sub .content p {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}
.notice_sub .button-wrap {
    margin: 0 1.5rem;
    padding: 3rem 0 5rem;
    border-top: 1px solid var(--border-secondary);
}
.notice_sub .button-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18rem;
    height: 5rem;
    font-size: 1.6rem;
}
/* noticedetail */

/* help-tab */
.help-tab a, .help-tab h5 {
    transition: all 0.3s;
    color: var(--body-color-black2);
}
.help-tab .tab-nav-item.active a {
    font-weight: 600;
    color: var(--body-color-black);
}
.help-tab .tab-nav-item.active h5 {
    color: var(--body-color-black);
}
.help-tab .tab-nav {
    display: flex;
}
.help-tab .tab-nav1 {
    margin-bottom: 2rem;
}
.help-tab .tab-nav1 li {
    margin-right: 2rem;
}
.help-tab .tab-nav1 li:last-child {
    margin-right: 0;
}
.help-tab .help-tab-sub .tab-nav {
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
.help-tab .help-tab-sub .tab-nav-item {
    position: relative;
    padding: 1.5rem 2rem;
}
.help-tab .help-tab-sub .tab-nav-item.active a::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #000;
}
.help-tab .tab-content {
    display: none;
    background: var(--background-tertiary);
}
.help-tab .tab-content.active {
    display: block;
}
.help-tab .help-accordion > li {
    cursor: pointer;
}
.help-tab .help-accordion > li:first-child {
    margin-top: 1rem;
}
.help-tab .help-accordion > li:last-child {
    padding-bottom: 1rem;
    border-bottom: none;
}
.help-tab .help-accordion > li::after {
    display: none;
}
.help-tab .help-accordion .accordion-link {
    position: relative;
    padding: 1.5rem 4rem 1.6rem 2rem;
}
.help-tab .help-accordion .accordion-link svg {
    position: absolute;
    top: 40%;
    right: 1.5rem;
}
.help-tab .help-accordion .accordion-link p {
    line-height: 1.2;
}
.help-tab .help-accordion .accordion-content {
    display: none;
    padding: 2rem;
    border-top: 1px solid var(--border-secondary);
    background: var(--background-primary);
}
.help-tab .help-accordion .accordion-content p {
    font-size: 1.5rem; 
    line-height: 1.6;
}
/* help-tab */

/* qna */
.qna {
position: relative;
    width: 57rem;
    height: 70rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.qna .qna-body {
    position: relative;
    height: 61rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #E7EAEC #ffffff;
    /* Chrome, Edge, and Safari */
}
.qna .qna-body::-webkit-scrollbar {
    width: 0.6rem;
}
.qna .qna-body::-webkit-scrollbar-track {
    background: #fff;
}
.qna .qna-body::-webkit-scrollbar-thumb {
    background-color: #E7EAEC;
    border-radius: 1rem;
    border: 2px solid #fff;
}
.qna .qna-date {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    color: var(--body-color-black2);
    font-size: 1.2rem;
}
.qna .qna-date::before {
    content: "";
    display: block;
    position: relative;
    width: 20.4rem;
    height: 1px;
    background: var(--border-secondary);
}
.qna .qna-date::after {
    content: "";
    display: block;
    position: relative;
    width: 20.4rem;
    height: 1px;
    background: var(--border-secondary);
}
.qna .qna-content-wrap {
    display: flex;
    position: relative;
    max-width: 36.9rem;
    padding: 1.4rem 1rem;
    margin-bottom: 2rem;
    border-radius: 0.8rem;
    background: #E7EAEC;
}
.qna .qna-content-wrap p {
    font-size: 1.5rem;
    line-height: 1.3;
    word-break: break-all;
}
.qna .qna-content-wrap img {
    margin-bottom: 1.4rem;
}
.qna .qna-content-notice {
    display: flex;
    align-items: center;
    margin: 2rem 2rem 1rem 2rem;
    padding: 1.6rem 2rem;
    background: var(--background-primary);
    border-radius: 0.8rem;
}
.qna .qna-content-notice img { 
    width: 1.6rem;
    margin-right: 0.7rem;
}
.qna .qna-content-notice span { 
    font-size: 1.5rem;
}
.qna .qna-content-questioner {
    margin-left: auto;
    margin-right: 2.4rem;
}
.qna .qna-content-questioner .arrow {
    position: absolute;
    right: -1.2rem;
    top: 0.7rem;
    width: 0;
    height: 0;
    border-bottom: 0.75rem solid transparent;
    border-top: 0.75rem solid #E7EAEC;
    border-left: 0.75rem solid #E7EAEC;
    border-right: 0.75rem solid transparent;
}
.qna .qna-content-questioner span {
    position: absolute;
    width: 10.2rem;
    left: -10.7rem;
    bottom: 0;
    font-size: 1.2rem;
    color: var(--body-color-black2);
    text-align: end;
}
.qna .qna-content-helper {
    margin-right: auto;
    margin-left: 2.4rem;
}
.qna .qna-content-helper .arrow {
    position: absolute;
    left: -1.2rem;
    width: 0;
    height: 0;
    top: 0.7rem;
    border-bottom: 0.75rem solid transparent;
    border-top: 0.75rem solid #E7EAEC;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid #E7EAEC;
}
.qna .qna-content-helper span {
    position: absolute;
    width: 10.2rem;
    right: -10.7rem;
    bottom: 0;
    font-size: 1.2rem;
    color: var(--body-color-black2);
    text-align: start;
}
.qna .qna-bottom {
    position: relative;
    height: 9rem;
    bottom: 0;
    border-top: 1px solid var(--border-secondary);
}
.qna .qna-bottom textarea {
    font-size: 1.5rem;
    border: none;
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}
.qna .qna-bottom textarea::-webkit-scrollbar {
    display: none;
}
.qna .qna-bottom form {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 1.2rem;
}
.qna .qna-file label {
    display: block;
    font-size: 0;
    cursor: pointer;
}
.qna .qna-file input[type=file] {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    font-size: initial;
    clip: rect(0 0 0 0);
}
.qna .qna-file .file_btn {
    display: inline-block;
    width: 1.6rem;
    height: 1.8rem;
}
.qna .button-wrap {
    margin-left: 1.4rem;
    flex-wrap: nowrap;
}
.qna .button-wrap a {
    height: 1.8rem;
}
.qna .button-primary {
    padding: 1rem 2.3rem;
    margin-left: 1.4rem;
    font-size: 1.4rem;
    border-radius: 0.4rem;
}
.qna .qna-file-preview {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.2rem;
    bottom: 0;
    width: 100%;
    height: 16rem;
    background: var(--background-primary);
    border-top: 1px solid var(--border-secondary);
}
.qna .qna-file-preview .preview-wrap {
    display: flex;
    align-items: flex-start;
    width: calc(100% - 1.3rem);
}
.qna .qna-file-preview .text-area {
    display: flex;
    align-items: center;
    margin-right: 2.2rem;
}
.qna .qna-file-preview .text-area img {
    width: 1.3rem;
    height: 1.5rem;
    margin-right: 0.4rem;
}
.qna .qna-file-preview .text-area span {
    font-size: 1.5rem;
}
.qna .qna-file-preview .thumb-area {
    height: 13.6rem;
    max-width: calc(100% - 10.5rem);
}
.qna .qna-file-preview .close-btn img {
    width: 1.4rem;
    height: 1.4rem;
}
/* qna */

/* popup-notice */
.popup-notice .container {
    max-width: 66rem; 
    max-height: 64rem; 
}
.popup-notice .container .popup-wrap {
    padding: 3rem 1rem 0;
}
.popup-notice .popup-title {
    margin-bottom: 1rem;
    padding-left: 2rem;
}
.popup-notice .popup-body {
    max-height: 51rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #e7eaec #ffffff;
    /* Chrome, Edge, and Safari */
}
.popup-notice .popup-body .popup-cont {
  margin-bottom: 2rem;
}
.popup-notice .popup-body::-webkit-scrollbar {
    width: 0.6rem;
}
.popup-notice .popup-body::-webkit-scrollbar-track {
    background: #fff;
}
.popup-notice .popup-body::-webkit-scrollbar-thumb {
    background-color: #e7eaec;
    border-radius: 1rem;
    border: 2px solid #fff;
}
/* popup-notice */

/* popup-sme */
.popup-sme {
    font-size: 1.5rem;
    line-height: 1.4;
}
.popup-sme .container {
    max-width: 66rem;
    max-height: 64rem;
    border-radius: 1.6rem;
}
.popup-sme .container > div {
    max-height: 58.5rem;
    padding: 4rem 3rem 0;
}
.popup-sme .sme-desc { 
    max-height: 37.5rem;
    overflow-y: auto;
    overflow-x: hidden;
}
.popup-sme .sme-info { 
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
}
.popup-sme .sme-info .thumb-area { 
    width: 14rem;
    height: 14rem;
}
.popup-sme .sme-info img {
    border-radius: 50%;
}
.popup-sme .sme-info .text-area { 
    margin-left: 2rem;
}
.popup-sme .sme-info h5 { 
    font-weight: 700;
}
.popup-sme .sme-category { 
    margin-bottom: 2rem;
}
.popup-sme .sme-category p {
    display: flex;
    align-items: center;
}
.popup-sme .sme-category p.keyword img { 
    width: unset;
    height: unset;
    display: unset;
    vertical-align: middle;
    margin-right: 1rem;
    border-radius: 0;
    backface-visibility: hidden;
    background: var(--accent-color);
}
.popup-sme .sme-detail { 
    margin-bottom: 3rem;
}
.popup-sme .sme-more span { 
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
}
.popup-sme .sme-more ul { 
    display: flex;
    flex-wrap: wrap;
}
.popup-sme .sme-more li { 
    width: 49%;
    margin-right: 2%;
    margin-bottom: 2%;
}
.popup-sme .sme-more li:nth-child(2n) { 
    margin-right: 0;
}
.popup-sme .sme-more .thumb-area img { 
    border-radius: var(--thumb-radius);
}
.popup-sme .sme-more .text-area span {
    position: relative;
    margin-top: 0.6rem;
    margin-right: 0.5rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
    line-height: 1.3;
    font-weight: normal;
}
.popup-sme .sme-more .text-area span::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 0.5rem;
    background: #A4A4A4;
}
.popup-sme .sme-more .text-area span:last-child::after {
    display: none;
}
/* popup-sme */

/* popup-myroom */
.popup-myroom .container {
    max-width: 96rem;
    max-height: 69rem;
    border-radius: 1.6rem;
}
.popup-myroom .container .iframe-wrap {
    max-height: 63.5rem;
    height: 63.5rem;
    width: 100%;
}
.popup-myroom .container iframe {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
}
/* popup-myroom */

/* category-1depth */
.category-1depth a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    height: 100%;
}
.category-1depth ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left;
}
.category-1depth li {
    position: relative;
    width: calc(93% / 7);
    height: 14.2rem;
    padding: 2rem;
    margin-bottom: 1%;
    margin-right: 1%;
    border-radius: 0.8rem;
    border: 1px solid var(--border-secondary);
    background: var(--background-tertiary);
}
.category-1depth li span {
    width: 100%;
    font-size: 1.6rem;
    font-weight: 700;
    z-index: 1;
    display: -webkit-box;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.category-1depth .category-1depth-lg {
    width: calc((93% / 7) * 2 + 1%);
}
.category-1depth .icon-bg {
    position: absolute;
    bottom: 1rem;
    width: 7rem;
    height: 6.3rem;
}
/* category-1depth */

/* category-2depth */
.category-2depth {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
}
.category-2depth section {
    width: 100%;
}
.category-2depth .select-box .select-box-input-text {
    padding: 0;
    background: inherit;
}
.category-2depth .select-box .select-box-option {
    font-size: 1.5rem;
}
.category-2depth .title {
    position: relative;
    display: flex;
    margin-bottom: 0.4rem;
}
.category-2depth .title.newlist {
    margin-bottom: 4.4rem;
}
.category-2depth .title h5 {
    font-size: 2.6rem;
    font-weight: 600;
    margin-right: 1.4rem;
    color: var(--body-color-black);
}
.category-2depth .title h5:last-child {
    margin-right: 0;
}
.category-2depth .title a {
    display: inline-block;
    margin-right: 1.4rem;
}
.category-2depth .title .sub-title {
    color: var(--body-color-black2);
}
.category-2depth .title .select-box {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    max-width: 40rem;
    margin-left: 1.4rem;
    padding-right: 5rem;
}
.category-2depth .title .select-box::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1px;
    height: 2.4rem;
    margin-left: -1.4rem;
    background: #D1D1D1;
}
.category-2depth .title .select-box-icon {
    right: -3rem;
}
.category-2depth .title .select-box-list {
    min-width: 20rem;
    top: 4rem;
}
.category-2depth .title .select-box-input-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.category-2depth .category-2depth-menu {
    display: flex;
    position: sticky;
    top: 7.2rem;
    left: 0;
    padding: 1.6rem 0;
    background: var(--background-primary);
    z-index: 1;
}
.category-2depth .category-2depth-menu .category-button-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-content: flex-start;
    width: calc(100% - 4rem);
    height: 4rem;
    overflow: hidden;
}
.category-2depth .category-2depth-menu .category-button-wrap::-webkit-scrollbar {
    width: 0.6rem;
    height: 1rem;
}
.category-2depth .category-2depth-menu .category-button-wrap::-webkit-scrollbar-track {
    background-color: #fff;
}
.category-2depth .category-2depth-menu .category-button-wrap::-webkit-scrollbar-thumb {
    background: #DDDDDD;
    border-radius: 0.8rem;
    height: 2rem;
}
.category-2depth .category-2depth-menu .category-button-wrap::-webkit-scrollbar-button {
    display: none;
}
.category-2depth .category-2depth-menu .category-button-wrap li {
    width: auto;
    margin-right: 1rem;
    margin-bottom: 1rem;
}
.category-2depth .category-2depth-menu .category-button-wrap li:last-child {
    margin-right: 0;
}
.category-2depth .category-2depth-menu .category-button-wrap li.on a {
    color: var(--body-color-white);
    background: #212529;
}
.category-2depth .category-2depth-menu .category-button-wrap a {
    display: inline-block;
    padding: 1.1rem 1.7rem;
    height: 4rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    background: var(--background-tertiary);
}
.category-2depth .category-2depth-menu .category-button-wrap.on {
    height: fit-content;
    overflow-y: auto;
    max-height: 17rem;
}
.category-2depth .category-2depth-menu .category-2depth-more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-basis: 4rem;
    width: 4rem;
    height: 4rem;
    cursor: pointer;
    transition: all 0.3s;
}
.category-2depth .category-2depth-menu .category-2depth-more.on {
    transition: all 0.3s;
    transform: rotate(180deg);
}
.category-2depth .category-2depth-menu .swiper-button-next::after, .category-2depth .category-2depth-menu .swiper-button-prev::after {
    width: 4rem;
    height: 4rem;
}
.category-2depth .category-2depth-menu .swiper-button-next.swiper-button-disabled, .category-2depth .category-2depth-menu .swiper-button-prev.swiper-button-disabled {
    opacity: 0;
}
.category-2depth .category-2depth-menu .swiper-button-prev {
    left: 0;
}
.category-2depth .category-2depth-menu .swiper-button-next {
    right: 0;
}
.category-2depth .category-2depth-menu .swiper-button-next::before {
    content: "";
    position: absolute;
    display: block;
    width: 5rem;
    height: 7.2rem;
    right: 27px;
    background: transparent linear-gradient(90deg, rgba(249, 249, 249, 0) 0%, #F9F9F9 100%) 0% 0% no-repeat padding-box;
}
.category-2depth .category-2depth-menu .swiper-button-prev::before {
    content: "";
    position: absolute;
    display: block;
    width: 5rem;
    height: 7.2rem;
    left: 27px;
    background: transparent linear-gradient(90deg, #F9F9F9 0%, rgba(249, 249, 249, 0) 100%) 0% 0% no-repeat padding-box;
}
.category-2depth .category-2depth-menu .swiper-button-prev::after {
    position: relative;
    background-image: url(../images/angle-left.svg);
    background-color: var(--background-primary);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 45%;
}
.category-2depth .category-2depth-menu .swiper-button-next::after {
    position: relative;
    background-image: url(../images/angle-right.svg);
    background-color: var(--background-primary);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 45%;
}
.category-2depth .top-series-menu {
    display: flex;
    position: sticky;
    top: 7.2rem;
    left: 0;
    padding: 1.6rem 0;
    background: var(--background-primary);
    z-index: 1;
}
.category-2depth .top-series-menu li {
    width: fit-content;
}
.category-2depth .top-series-menu li.on a { 
    color: var(--body-color-white);
    background: #212529;
}
.category-2depth .top-series-menu a { 
    display: inline-block;
    padding: 1.1rem 1.7rem;
    height: 4rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    background: var(--background-tertiary);
}
.category-2depth .list-menu {
    display: flex;
    justify-content: space-between;
    padding: 2.4rem 0 2rem;
}
.category-2depth .list-menu h6 {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.5rem;
}
.category-2depth .list-menu span {
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.category-2depth .top-sort {
    display: flex;
    align-items: center;
}
.category-2depth .top-sort li {
    display: inline-flex;
    align-items: center;
    margin-right: 2rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--body-color-black2);
    cursor: pointer;
    transition: all 0.3s;
}
.category-2depth .top-sort li:last-child {
    margin-right: 0;
}
.category-2depth .top-sort li.on {
    color: var(--body-color-black);
    font-weight: 500;
}
.category-2depth .top-sort li.on::before {
    content: "";
    position: relative;
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 0.2rem;
    background: url(../images/bars-sort.svg) no-repeat center center;
}
.category-2depth .list-class ul {
    display: flex;
    flex-wrap: wrap;
}
.category-2depth .list-class li {
    width: calc((100% - 4.8rem) / 5);
    margin-right: 1.2rem;
    margin-bottom: 4rem;
}
.category-2depth .list-class li:nth-child(5n) {
    margin-right: 0;
}
.category-2depth .list-class .thumb-area {
    width: 100%;
    margin-bottom: 1rem;
}
.category-2depth .list-class img {
    border-radius: var(--thumb-radius);
}
.category-2depth .list-class p {
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-all;
}
.category-2depth .list-class span {
    position: relative;
    margin-right: 0.5rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
    line-height: 1.3;
}
.category-2depth .list-class span::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 0.5rem;
    background: #A4A4A4;
}
.category-2depth .list-class span:last-child::after {
    display: none;
}
.category-2depth .list-class .sub-info { 
    display: flex;
     flex-wrap: wrap;
    align-items: center;
    }
  .category-2depth .list-class .sub-info img { 
    display: inline-block;
    width: 1.7rem;
    transform: translateY(1px);
    }
.category-2depth .list-class-column li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 11rem;
    padding-bottom: 1.4rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-secondary);
}
.category-2depth .list-class-column li:last-child {
    margin-bottom: 0;
}
.category-2depth .list-class-column li > p {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: right;
        -ms-flex-pack: right;
        justify-content: right;
    min-width: 9.4rem;
    -ms-flex-preferred-size: 6%;
        flex-basis: 6%;
    margin-right: 3rem; 
    font-size: 3.2rem;
    font-weight: 600;
}
.category-2depth .list-class-column li > p::after {
    content: "";
    position: relative;
    display: inline-block;
    top: 0;
    right: 0;
    width: 2.4rem;
    height: 1.4rem;
    margin-left: 2.4rem;
}
.category-2depth .list-class-column .main-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    margin-right: 1%;
    overflow: hidden;
}
.category-2depth .list-class-column .main-info .thumb-area {
    -ms-flex-preferred-size: 16rem;
        flex-basis: 16rem;
    min-width: 16rem;
    margin-right: 2rem;
}
.category-2depth .list-class-column .main-info .thumb-area img {
    border-radius: var(--thumb-radius);
}
.category-2depth .list-class-column .main-info .text-area {
    min-width: 15rem;
    max-width: 54.4rem;
}
.category-2depth .list-class-column .main-info .text-area p {
    font-size: 1.6rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.3;
}
.category-2depth .list-class-column .sub-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-basis: 42%;
}
.category-2depth .list-class-column .sub-info span {
    display: inline-block;
    width: 10rem;
    margin-right: 2rem;
    font-size: 1.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.category-2depth .list-class-column .sub-info span:last-child {
    margin-right: 0;
}
.category-2depth .list-class-column .sub-info span:first-child {
    width: 12rem;
}
.category-2depth .list-class-column .sub-info .wish {
    display: inline-flex;
    align-items: center;
    width: 7rem;
    cursor: pointer;
}
.category-2depth .list-class-column .sub-info .wish svg {
    margin-right: 0.5rem;
}
.category-2depth .list-class-column .sub-info .wish .icon-is-wish {
    display: none;
}
.category-2depth .list-class-column .sub-info .wish.on {
    color: var(--accent-color);
}
.category-2depth .list-class-column .sub-info .wish.on .icon-wish {
    display: none;
}
.category-2depth .list-class-column .sub-info .wish.on .icon-is-wish {
    display: inline-block;
    fill: var(--accent-color);
}
.category-2depth .list-class-column .sub-info .goto-class {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 1.5rem;
    line-height: 1;
}
.category-2depth .list-class-column .sub-info .goto-class::after {
    content: "";
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.2rem;
    background: url("../images/angle-right.svg") center center no-repeat;
}
.category-2depth .list-class-column .arrow-up::after {
    background: url("../images/arrow-up.png") center center no-repeat;
    background-size: 100%;
}
.category-2depth .list-class-column .arrow-down::after {
    background: url("../images/arrow-down.png") center center no-repeat;
    background-size: 100%;
}
.category-2depth .list-class-column .arrow-bar::after {
    background: url("../images/arrow-bar.png") center center no-repeat;
    background-size: 100%;
}
.category-2depth .recommend-list .select-box {
    width: 10rem;
}
.category-2depth .recommend-list .select-box-icon {
    transform: translateY(-0.8rem);
}
.category-2depth .recommend-list .select-box-list {
    top: 2.9rem;
    width: max-content;
}
.category-2depth .recommend-list span {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--body-color-black);
}
.category-2depth .recommend-list svg {
    fill: #D1D1D1;
}
.category-2depth .recommend-list .position-select-box.disabled svg {
  display: none;
}
.category-2depth .recommend-list .position-select-box.disabled .select-box-list {
  display: none;
}
.category-2depth .recommend-list .position-select-box.disabled .select-box-current {
  cursor: default;
}
.category-2depth .wishlikeseries_title {
    margin-bottom: 4rem;
}
.category-2depth .wishlikeseries-subtitle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.category-2depth .wishlikeseries-subtitle > a {
    margin-right: 0.4rem;
}
.category-2depth .wishlikeseries-subtitle button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 1rem;
}
.category-2depth .wishlikeseries-subtitle button.on.icon-active svg {
    display: none;
}
.category-2depth .wishlikeseries-subtitle button.on.icon-active p {
    color: var(--accent-color);
}
.category-2depth .wishlikeseries-subtitle button.on.icon-active .icon-active-fill {
    display: inline-block;
    fill: var(--accent-color);
}
.category-2depth .wishlikeseries-subtitle button .icon-active-fill {
    display: none;
}
/* category-2depth */

/* pagination */
.pagination {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 2rem auto 0;
    padding: 2rem;
    text-align: center;
    border-radius: var(--button-radius);
}
.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    border-radius: calc(var(--button-radius) / 2);
    transition: all 0.3s;
}
.pagination li.active a, .pagination li:hover a {
    color: var(--body-color-white);
    background: var(--button-secondary-default);
}
.pagination .prev.active a, 
.pagination .prev:hover a,
.pagination .next.active a,
.pagination .next:hover a {
    background: none;
}
.pagination .prev:hover svg,
.pagination .next:hover svg {
    fill: var(--body-color-black);
}
.pagination li.disabled {
    pointer-events: none;
}
.pagination li svg {
    vertical-align: middle;
}
.pagination li:hover svg {
    fill: #fff;
}
.pagination li.disabled svg {
    fill: var(--body-color-black2);
}

.pagination button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-right: 1rem;
    border-radius: var(--button-radius);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.pagination button:hover {
    background: var(--button-secondary-default);
}
.pagination button:hover svg {
    fill: #fff;
}
.pagination button:disabled {
    pointer-events: none;
}
.pagination button:disabled svg {
    fill: var(--body-color-black2);
}
/* pagination */

/* goto-top */
.goto-top {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 3rem;
    right: 2rem;
    width: 4.2rem;
    height: 4.2rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    opacity: 80%;
}
.goto-top svg {
    width: 1.8rem;
    height: 1.8rem;
}
/* goto-top */

/* button-more */
.button-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 5rem;
    text-align: center;
    font-size: 1.5rem;
    color: var(--body-color-black);
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--button-radius);
}
/* button-more */

/* myroom */
.myroom h6 {
    font-size: 1.8rem;
    font-weight: 700;
}
.myroom .title-area {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding-left: 2rem;
    height: 4.5rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.myroom .title-area .button-wrap {
    position: absolute;
    right: 2rem;
}
.myroom .title-area .button-wrap svg {
    transform: rotate(180deg);
}
.myroom .title-area .button-wrap.active svg {
    transform: rotate(0);
}
/* myroom */

/* myroom-top */
.myroom-top {
    display: flex;
    margin-bottom: 2rem;
}
.myroom-top .myroom-top-left {
    width: 26.5%;
    margin-right: 1%;
}
.myroom-top .myroom-top-left .stats_items_info {
    width: 100%;
    margin-top: 1rem;
}
.myroom-top .myroom-top-left span {
    font-size: 1.4rem;
}
.myroom-top .myroom-top-right {
    width: 72.5%;
}
.myroom-top .myroom-top-right .select-box .select-box-list {
    top: 4.5rem;
}
.myroom-top .myroom_content {
    height: 34rem;
    overflow-y: auto;
    border: 1px solid var(--border-secondary);
    border-top: none;
}
.myroom-top .myroom_content > ul {
    padding: 2rem;
}
.myroom-top .myroom_content .stats_items {
    padding: 1.2rem 1rem;
    margin-bottom: 1rem;
    background: var(--background-tertiary);
    border-radius: calc(var(--elem-radius) * 2);
}
.myroom-top .myroom_content .stats_items:last-child {
    margin-bottom: 0;
}
.myroom-top .myroom_content .stats_items.on svg {
    fill: var(--accent-color);
}
.myroom-top .myroom_content .stats_items svg {
    fill: #AEAEAE;
}
.myroom-top .myroom_content .stats_items p {
    font-size: 1.5rem;
    font-weight: 500;
}
.myroom-top .myroom_content .stats_items.on a {
    color: var(--body-color-black);
}
.myroom-top .myroom_content .stats_items.active a {
    color: var(--body-color-black);
}
.myroom-top .myroom_content .stats_items > a {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    color: var(--body-color-black2);
}
.myroom-top .myroom_content .stats_items.position a {  
  cursor: default;
}
.myroom-top .myroom_content .stats_items .left_items span {
    font-size: 1.5rem;
}
.myroom-top .myroom_content .stats_items .right_items {
    display: flex;
    align-items: center;
}
.myroom-top .myroom_content .stats_items .right_items span {
    font-size: 1.4rem;
}
.myroom-top .myroom_content .stats_items .right_items .main_info {
    width: 12rem;
    margin-right: 2rem;
    text-align: right;
}
.myroom-top .myroom_content .stats_items .right_items .main_info span:first-child {
    font-weight: 500;
}
.myroom-top .myroom_content .stats_items .right_items .sub_info {
    min-width: 9rem;
    margin-right: 2rem;
    text-align: left;
    color: var(--body-color-black2);
}
.myroom-top .myroom_content .stats_items .right_items .sub_info span::before {
    content: "[";
}
.myroom-top .myroom_content .stats_items .right_items .sub_info span::after {
    content: "]";
}
.myroom-top .myroom_content .stats_items .right_items .more_button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
}
.myroom-top .myroom_content .stats_items .right_items .more_button svg {
    fill: var(--accent-color);
}
.myroom-top .myroom_content .stats_items .right_items .more_button.disabled {
    filter: grayscale(1);
    cursor: auto;
}
.myroom-top .myroom_content .stats_items .right_items .more_button::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.4rem;
    background: var(--accent-color);
    opacity: 0.1;
}
.myroom-top .myroom_content .stats_items_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 1;
}
.myroom-top .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
}
.myroom-top .search-form .select-box {
    display: inline-flex;
    align-items: center;
    width: 20%;
}
.myroom-top .search-form .select-box .select-box-input-text { 
    height: 4.5rem;
    border: 1px solid var(--border-secondary);
}
.myroom-top .search-form .search-date {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 80%;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-left: none;
}
.myroom-top .search-form .search-date .search-month, 
.myroom-top .search-form .search-date .search-year,
.myroom-top .search-form .search-date .search-period {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
}
.myroom-top .search-form .search-date .search-month > div:first-child,
.myroom-top .search-form .search-date .search-year > div:first-child,
.myroom-top .search-form .search-date .search-period > div:first-child {
    display: flex;
    align-items: center;
    position: relative;
    height: 4.5rem;
    padding-right: 2rem;
    margin-right: 1rem;
}
.myroom-top .search-form .search-date .search-month > div:first-child::after,
.myroom-top .search-form .search-date .search-year > div:first-child::after,
.myroom-top .search-form .search-date .search-period > div:first-child::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: var(--border-secondary);
}
.myroom-top .search-form .search-date input[type=date],
.myroom-top .search-form .search-date input[type=month],
.myroom-top .search-form .search-date input[type=number] {
    position: relative;
    width: 15rem;
    padding: 1rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
    background: url("../images/icon-calendar.svg") no-repeat right 1rem center/1.6rem auto;
    background-color: #fff;
    border: 0;
    outline: 0;
}
.myroom-top .search-form .search-date input[type=date]::-webkit-calendar-picker-indicator,
.myroom-top .search-form .search-date input[type=month]::-webkit-calendar-picker-indicator,
.myroom-top .search-form .search-date input[type=number]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
    opacity: 0;
}
.myroom-top .search-form .search-date input[type=date]::before,
.myroom-top .search-form .search-date input[type=month]::before,
.myroom-top .search-form .search-date input[type=number]::before {
    content: attr(placeholder);
    width: 100%;
    height: 100%;
}
.myroom-top .search-form .search-date input[type=date]:valid::before,
.myroom-top .search-form .search-date input[type=month]:valid::before,
.myroom-top .search-form .search-date input[type=number]:valid::before {
    display: none;
}
.myroom-top .search-form .search-date input::-webkit-inner-spin-button {
    margin-right: 8rem;
}
.myroom-top .search-form .search-date .search-year .select-box-input-text {
    border-left: none;
    color: var(--body-color-black2);
    line-height: 1.7;
}
.myroom-top .search-form .search-date .search-month input,
.myroom-top .search-form .search-date .search-period input {
    border: none;
    font-size: 1.4rem;
    color: var(--body-color-black2);
    outline: 0;
}
.search-month {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}
.search-month input {
    width: 9rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.search-month img {
    width: 1.4rem;
    height: auto;
    transform: translateY(-1px);
    cursor: pointer;
}
.search-month span {
    margin: 0 1rem;
}
.search-period div:nth-child(2) {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}
.search-period div:nth-child(2) input {
    width: 9rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.search-period div:nth-child(2) button img {
    width: 1.4rem;
    height: auto;
    transform: translateY(-1px);
}
.search-period div:nth-child(2) span {
    margin: 0 1rem;
}
/* myroom-top */

/* myroom_item */
.myroom_item {
    position: relative;
}
.myroom_item .title-area h6 {
    margin-right: 1rem;
}
.myroom_item .title-area span {
    font-size: 1.8rem;
    font-weight: 700;
}
.myroom_item .myroom_series_ul_wrap {
    position: relative;
    height: auto;
    max-height: 76rem;
    overflow-y: auto;
    border: 1px solid #ECECEC;
}
.myroom_item .myroom_series_ul {
    padding: 2rem;
}
.myroom_item .myroom_series_ul li {
    margin-bottom: 1rem;
}
.myroom_item .myroom_series_ul li:last-child {
    margin-bottom: 0;
}
.myroom_item .myroom_series_ul li > div {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    height: 10rem;
    background: var(--background-tertiary);
}
.myroom_item .myroom_series_ul li > a:last-child {
    margin-bottom: 0;
}
.myroom_item .myroom_series_ul h6 {
    margin-right: 1rem;
}
.myroom_item .myroom_series_ul .thumb-area {
    width: 16.6rem;
    height: 10rem;
    flex-basis: 16.6rem;
    cursor: pointer;
}
.myroom_item .myroom_series_ul .text-area {
    width: calc(100% - 16.6rem);
    padding: 0.7rem 1rem;
}
.myroom_item .myroom_series_ul .text-area > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.myroom_item .myroom_series_ul .title {
    font-size: 1.4rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}
.myroom_item .myroom_series_ul .title span {
    font-weight: 500;
}
.myroom_item .myroom_series_ul .list-button button {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    font-size: 1.4rem;
    border-radius: calc(var(--button-radius) / 2);
}
.myroom_item .myroom_series_ul .list-button button:last-child {
    margin-right: 0;
}
.myroom_item .myroom_series_ul .list-button button:disabled, .myroom_item .myroom_series_ul .list-button button[disabled] {
    background: #BFBFBF;
    cursor: not-allowed;
}
.myroom_item .myroom_series_ul .progress {
    margin-bottom: 0;
}
.myroom_item .myroom_series_ul .progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}
.myroom_item .myroom_series_ul .progress-info span {
    font-size: 1.1rem;
    color: var(--body-color-black2);
}
.myroom_item .myroom_series_ul .progress-info p {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent-color);
}
.myroom_item .myroom_series_ul .progress-desc {
    display: flex;
    align-items: center;
}
.myroom_item .myroom_series_ul .progress-desc span {
    font-size: 1.1rem;
    margin-right: 0.5rem;
    color: var(--body-color-black2);
}
.myroom_item .myroom_series_ul .progress-desc p {
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.1rem;
}
.myroom_item .myroom_series_ul .completion .thumb-area {
    position: relative;
}
.myroom_item .myroom_series_ul .completion .thumb-area::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--background-tertiary);
    opacity: 0.8;
}
.myroom_item .myroom_series_ul .completion .thumb-area::after {
    content: "";
    position: absolute;
    width: 6.7rem;
    height: 6.7rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/icon-certificate.png") center center no-repeat;
    background-size: 100%;
}
.myroom_item .myroom_series_ul .closed .thumb-area {
    position: relative;
}
.myroom_item .myroom_series_ul .closed .thumb-area::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--background-tertiary);
    opacity: 0.8;
}
.myroom_item .myroom_series_ul .closed .title span {
    color: var(--body-color-black2);
}
.myroom_item .myroom_series_more {
    display: block;
    padding-bottom: 2rem;
    font-size: 1.6rem;
    text-align: center;
    color: var(--accent-color);
}
.myroom_item .myroom-accordion-desc-2 {
    display: none;
}
.myroom_item .myroom-accordion-desc-2.active {
    display: block;
}
.myroom_item .myroom_404 {
    max-height: 30rem;
    text-align: center;
}
/* myroom_item */

/* myroom-button-wrap */
.myroom-button-wrap {
  display: flex;
}
.myroom-button-wrap span {
    font-size: 1.1rem;
    color: var(--body-color-black2);
    margin-bottom: 0.8rem;
}
.myroom-button-wrap button {
    width: 6.5rem;
    height: 2.6rem;
    font-size: 1.4rem;
    border-radius: calc(var(--button-radius) / 2);
}
.myroom-button-wrap .myroom-button-primary {
    color: var(--accent-color);
    border: 1px solid var(--border-secondary);
    background: var(--background-tertiary);
}
.myroom-button-wrap .myroom-button-secondary {
    color: var(--body-color-white);
    background: #707070;
}
.myroom-button-wrap .myroom-button-disabled {
    color: var(--body-color-white);
    background: #BFBFBF;
    cursor: not-allowed;
}
.myroom-button-wrap .myroom-button-tertiary {
    color: var(--body-color-white);
    background: var(--accent-color);
}
.myroom-button-wrap .button-wrap {
    width: 6.5rem;
    margin-right: 1rem;
}
.myroom-button-wrap .button-wrap:last-child {
    margin-right: 0;
}
/* myroom-button-wrap */

/* nodatafound */
.nodatafound-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 30rem;
    padding: 7rem 0;
    text-align: center;
}
.nodatafound-404 .myroom-404-contents p {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--body-color-black2);
}
/* nodatafound */

/* memo-list */
.memo-list {
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    background: var(--background-tertiary);
}
.memo-list li {
    display: flex;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
.memo-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.memo-list li .thumb-area {
    flex-basis: 22rem;
    width: 22rem;
    height: 13.2rem;
}
.memo-list li .thumb-area img {
    border-radius: var(--thumb-radius);
}
.memo-list li .text-area {
    margin-left: 2rem;
    flex-basis: calc(100% - 24rem);
    cursor: default; 
}
.memo-list li .text-area .content-title {
    margin-bottom: 0.6rem;
    font-size: 1.5rem;
    font-weight: 500;
}
.memo-list li .text-area .content-info {
    margin-bottom: 2rem;
}
.memo-list li .text-area .content-info span {
    position: relative;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.memo-list li .text-area .content-info span::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 0.5rem;
    background: #a4a4a4;
}
.memo-list li .text-area .content-info span:last-child::after {
    display: none;
}
.memo-list li .text-area .memo-cnt {
    display: flex;
    align-items: center;
}
.memo-list li .text-area .memo-cnt span {
    font-size: 1.5rem;
    margin-left: 0.2rem;
}
.memo-list li .button-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16rem;
    height: 5rem;
    font-size: 1.6rem;
    background: #eeeeee;
    border-radius: var(--button-radius);
}
.memo-list-desc {
    padding: 3rem 2rem;
    margin-top: 1rem;
    background: var(--background-tertiary);
}
/* memo-list */

/* memos */
.memos {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
.memos:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.memos .title {
    margin-bottom: 1.4rem;
    font-size: 1.6rem;
    font-weight: 500;
}
.memos .timeline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
    border-radius: 1.6rem;
}
.memos .timeline::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 1.6rem;
    opacity: 0.1;
}
.memos .timeline svg {
    fill: var(--accent-color);
    margin-right: 0.7rem;
}
.memos .timeline span {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent-color);
}
.memos .memo-desc {
    margin-bottom: 2rem;
    font-size: 1.5rem;
}
.memos .memo-desc p {
    word-break: break-all;
}
.memos .memo-info {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    color: var(--body-color-black2);
}
.memos .memo-info button {
    position: relative;
    padding-left: 0.5rem;
    font-size: 1.3rem;
    color: var(--body-color-black);
}
.memos .memo-info button::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 0.5rem;
    background: #a4a4a4;
}
.memos .memo-info button:last-child::after {
    display: none;
}
.memo-button-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 6rem;
}
/* memos */

/* search-common */
.search-common .info {
    margin-top: 1rem;
}
.search-common .info span {
    color: var(--body-color-black);
    line-height: 1;
}
.search-common .result {
    width: auto;
    margin-top: 0.6rem;
    color: var(--body-color-black2);
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.search-common .result span {
    margin-right: 0.5rem;
    font-size: 1.4rem;
    color: var(--body-color-black2);
    white-space: pre-wrap;
    line-height: 1;
}
.search-common .list-class span, .search-common .list-class2 span {
    margin-right: 0.5rem;
}
.search-common .list-class span::after, .search-common .list-class2 span::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 0.5rem;
    background: #a4a4a4;
}
.search-common .list-class span:last-child::after, .search-common .list-class2 span:last-child::after { 
    display: none;
}
.search-common .list-class .info span::after { 
    background: var(--body-color-black);
}
.search-common .list-menu { 
    padding-top: 4rem;
}
.search-common .list-menu h6 { 
    margin-right: 0.5rem;
}
.search-common .result-count::before { 
    content: "(";
}
.search-common .result-count::after { 
    content: ")";
}
.search-common .list-class2 li > a { 
    display: inline-flex;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-secondary);
    width: 100%;
}
.search-common .list-class2 li:last-child > a { 
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.search-common .button-wrap { 
    margin-top: 6rem;
}
.search-common .text-area p {
    font-size: 1.5rem;
    line-height: 1.4;
}
.search-common .text-area span {
    font-size: 1.4rem;
}
.search-common .notfound { 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14.8rem;
    font-size: 1.5rem;
    color: var(--body-color-black2);
    background: var(--background-tertiary);
}
/* search-common */

/* search-title */
.search-title h5 { 
    display: inline-flex;
    font-size: 2.6rem;
    font-weight: 600;
}
.search-title .select-box { 
    display: inline-flex;
    width: -moz-fit-content;
    width: fit-content;
}
.search-title .select-box .select-box-value { 
    display: inline-flex;
}
.search-title .select-box .select-box-list { 
    top: 4rem;
}
.search-title .select-box .select-box-icon { 
    position: relative;
    top: inherit;
    right: inherit;
    margin-left: 1rem;
    transform: translateY(0);
}
.search-title .select-box .select-box-current:focus .select-box-icon { 
    transform: rotate(180deg);
}
.search-title .search-keyword { 
    margin-right: 0.6rem;
}
.search-title .search-keyword::before { 
    content: '"';
}
.search-title .search-keyword::after { 
    content: '"';
}
/* search-title */

/* search-sme */
.search-index .search-sme {
    margin-bottom: 6rem;
}
.search-sme .thumb-area {
    flex-basis: 12rem;
    width: 12rem;
    height: 12rem;
}
.search-sme .thumb-area img {
    border-radius: 50%;
}
.search-sme .text-area { 
    flex-basis: calc(100% - 14rem);
    margin-left: 2rem;
}
.search-sme .sme-name { 
    margin-bottom: 1rem;
}
.search-sme .sme-name h6 { 
    font-weight: 700;
}
.search-sme .sme-desc p { 
    font-size: 1.5rem;
}
/* search-sme */

/* search-materials */
.search-materials .thumb-area { 
    flex-basis: 2.8rem;
    width: 2.8rem;
    height: 3.44rem;
}
.search-materials .text-area { 
    flex-basis: 90%;
    margin: 0 1rem;
}
.search-materials .text-area p { 
    font-size: 1.5rem;
}
.search-materials .text-area span { 
    font-size: 1.2rem;
    color: var(--body-color-black2);
}
.search-materials .list-materials ul { 
    margin-bottom: 6rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.search-materials .list-materials li { 
    height: 7.4rem;
}
.search-materials .list-materials li a { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.7rem 2rem;
}
.search-materials .list-materials li a > svg { 
    flex-basis: 2rem;
    height: 2rem;
}
.search-materials .materials-info { 
    display: flex;
    align-items: center;
    flex-basis: calc(100% - 3.5rem);
}
.search-materials .materials-info p { 
    margin-bottom: 0.6rem;
}
/* search-materials */

.search-index > section:last-child { 
    margin-bottom: 0;
}
.search-index .search-course {
    margin-bottom: 6rem;
}
.search-index .search-course .list-class li .text-area {
    width: calc(100% - 18rem);
    flex-basis: calc(100% - 18rem);
    margin-left: 1rem;
}
.search-index .search-course .text-area p {
    line-height: 1.3;
    font-weight: 500;
}
.search-index .search-course .text-area span {
    line-height: 1.3;
}
.search-index .search-title { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.search-index .search-title a {
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.search-index .list-class ul { 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.search-index .list-class li {
    width: calc((100% - 2rem) / 2);
    margin-bottom: 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-secondary);
}
.search-index .list-class li > div { 
    display: flex;
    align-items: center;
}
.search-index .list-class li .thumb-area { 
    flex-basis: 22rem;
    max-width: 22rem;
}
.search-index .list-class li .thumb-area img { 
    border-radius: var(--thumb-radius);
}
.search-index .list-class li .text-area { 
    margin-left: 2rem;
}
.search-index .list-class.list-materials ul { 
    background: none;
    border: none;
}
.search-index .list-class.list-materials li { 
    margin-bottom: 0;
    padding-bottom: 0;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-bottom: 0;
}
.search-index .list-class.list-materials li .thumb-area { 
    flex-basis: 2.8rem;
    width: 2.8rem;
}
.search-index .list-class.list-materials li .thumb-area img { 
    border-radius: 0;
}
.search-index .list-class.list-materials li:nth-last-child(-n+2) { 
    border-bottom: 1px solid var(--border-secondary);
}
.search-index .sme-list li .thumb-area { 
    flex-basis: 12rem;
}
.search-index .sme-list li .thumb-area img { 
    border-radius: 50%;
}

/* search-ai */
.search-ailearn {
    position: relative;
    max-width: 150.8rem;
    margin: 0 auto 6rem;
    border-radius: 0.8rem;
    border: 1px solid var(--accent-color);
}
.search-ailearn.active {
    height: auto;
    padding: 1rem 3rem 3rem;
    border: 1px solid var(--accent-color);
}
.search-ailearn.active .top {
    padding: 0;
}
.search-ailearn::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    border-radius: 0.8rem;
    opacity: 0.1;
}
.search-ailearn h6 {
    font-size: 1.5rem;
}
.search-ailearn .title h6 {
    font-weight: 600;
}
.search-ailearn .top {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 4.8rem;
    padding: 0 2rem;
}
.search-ailearn .top .text-wrap {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
}
.search-ailearn .top .img-wrap {
    max-width: 7.3rem;
    margin-right: 1.8rem;
}
.search-ailearn .top .btn-more a {
    padding: 1rem 3.6rem;
    border-radius: 2.8rem;
    background: var(--accent-color);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
}
.search-ailearn .top .lab {
    display: flex;
    align-items: center;
    color: var(--accent-color);
    cursor: default;
}
.search-ailearn .top .lab svg {
    max-width: 2.4rem;
    margin-right: 0.5rem;
    fill: var(--accent-color);
}
.search-ailearn .ailearn-result {
    display: none;
    position: relative;
    width: 100%;
    height: 100%;
}
.search-ailearn .ailearn-result > div {
    margin: 2rem 0;
}
.search-ailearn .ailearn-result > div:first-child {
    margin: 0;
}
.search-ailearn .ailearn-result > div:last-child {
    margin-bottom: 0;
}
.search-ailearn .ailearn-result .title {
    margin-bottom: 1rem;
}
.search-ailearn .processing {
    position :relative;
    padding: 2rem;
    background: #fff;
    border-radius: 0.8rem;
}
.search-ailearn .processing h6 {
    font-size: 1.4rem;
}
.search-ailearn .processing li {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    font-size: 1.4rem;
    color: #b0b0b0;
}
.search-ailearn .processing li svg {
    max-width: 2rem;
    max-height: 2rem;
    stroke: #b0b0b0;
}
.search-ailearn .processing li .img-wrap {
    margin-right: 1rem;
    line-height: 0;
}
.search-ailearn .processing li.on svg {
    stroke: var(--accent-color);
}
.search-ailearn .processing li .img-wrap {
    margin-right: 1rem;
    line-height: 0;
}
.search-ailearn .processing li.on svg {
    stroke: var(--accent-color);
}
.search-ailearn .processing li.on .text-wrap p {
    color: var(--body-color-black);
}
.search-ailearn .recommend .title {
    margin-bottom: 0;
}
.search-ailearn .recommend .keyword ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.search-ailearn .recommend .keyword li {
    margin: 1rem 1rem 0 0;
    padding: 0.8rem 1.7rem;
    cursor: pointer;
    border: 1px solid #E7EAEC;
    border-radius: 1.8rem;
    background: #fff;
    transition: all 0.05s;
    font-size: 1.4rem;
    font-weight: 500;
}
.search-ailearn .recommend .keyword li:last-child {
    margin-right: 0;
}
.search-ailearn .recommend .keyword li.on {
    border-radius: 1.8rem 1.8rem 1.8rem 0;
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: #fff;
}
.search-ailearn .series .list-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem 2rem 0 2rem;
    background: #fff;
    border-radius: 0.8rem;
}
.search-ailearn .series .list-wrap li {
    width: 50%;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-secondary);
}
.search-ailearn .series .list-wrap li a {
    display: flex;
    align-items: center;
}
.search-ailearn .series .thumb-area {
    flex-basis: 22rem;
}
.search-ailearn .series .thumb-area img {
    border-radius: var(--thumb-radius);
}
.search-ailearn .series .text-area {
    width: calc(100% - 22rem);
    margin-left: 2rem;
}
.search-ailearn .series .text-area span {
    margin-right: 0.5rem;
}
.search-ailearn .series .text-area span::after {
    content: "";
    position: relative;
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 0.5rem;
    background: #A4A4A4;
}
.search-ailearn .series .text-area span:last-child::after {
    display: none;
}
.search-ailearn .series .info span::after {
    background: var(--body-color-black);
}
/* search-ai */

/* que */
.search-que section {
    margin-top: 3rem;
}
.search-que section:first-child {
    margin-top: 0;
}
.que-wrap .que-answer {
    display: none;
}
.que-wrap .btn-wrap a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    line-height: 1;
}
.que-wrap.active .que-title {
    border-radius: .8rem .8rem 0 0;
    border-bottom: 1px solid #ffffff00;
}
.que-wrap.active .que-answer {
    display: block;
}
.que-answer .title-correct .icon-wrap {
    line-height: 1;
}
.que-wrap.active .que-answer .title-correct .icon-wrap svg {
    stroke: var(--accent-color);
}
.que-wrap.active .que-answer .title-correct {
    display: none;
}
.que-wrap.active .que-answer .title-correct.on {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
.blink {
    animation: blink 1.8s infinite cubic-bezier(0.31, 0.5, 0.46, 0.99);
}
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
}
.que-wrap.active .que-close svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.que-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: relative;
    padding: 0 3rem;
    width: 100%;
    height: 4.8rem;
    background: var(--background-tertiary);
    border-radius: .8rem;
    border: 1px solid var(--border-primary);
    line-height: 1;
    cursor: pointer;
}
.que-title .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.que-title .title .logo {
    max-width: 9.7rem;
    margin-right: 1.7rem;
}
.que-title .title .icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
.que-title .title .icon svg {
    max-width: 1.6rem;
    max-height: 1.6rem;
    fill: var(--accent-color);
    stroke: var(--accent-color);
}
.que-title .title .icon span {
    color: var(--accent-color);
}
.que-answer {
    position: relative;
    height: 100%;
    padding: 3rem;
    border-radius: 0 0 .8rem .8rem;
    border: 1px solid var(--accent-color);
    border-left: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
    background: var(--background-tertiary);
}
.que-answer::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    opacity: 0.08;
    border-radius: 0 0 .8rem .8rem;
    z-index: 0;
}
.que-answer > div {
    position: relative;
    z-index: 1;
}
.que-answer div:last-child {
    margin-bottom: 0;
}
.que-answer .header {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    height: 100%;
    width: 100%;
    padding: 1.5rem;
    line-height: 1;
    background: var(--background-tertiary);
    border: 1px solid var(--accent-color);
    border-radius: .8rem;
}
.que-answer .title-correct {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    align-items: center;
}
.que-answer .title-correct .icon-wrap {
    line-height: 1;
}
.que-answer .title-correct .icon-wrap svg {
    margin-right: .8rem;
    stroke: #b0b0b0;
}
.que-answer .title-correct p {
    /*color: var(--accent-color);*/
}
.que-answer .item-list {
    position: relative;
    padding: 1.6rem;
    border-radius: .8rem;
    border: 1px solid var(--border-secondary);
    background: var(--background-tertiary);
}
.que-answer .item-list .list-class li {
    border-bottom: none;
    margin-top: 1.6rem;
    margin-bottom: 0;
    padding-bottom: 0;
}
.que-answer .item-list .list-class li:nth-child(-n+2) {
    margin-top: 0;
}
.que-answer .item-list .list-class li .thumb-area {
    position: relative;
    width: 100%;
    max-width: 22rem;
    -ms-flex-preferred-size: max-content;
    flex-basis: max-content;
    overflow: hidden;
    border-radius: var(--thumb-radius);
}
.que-answer .item-list .list-class li .thumb-area img {
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
.que-answer .item-list .list-class li .text-area {
    width: calc(100% - 22rem);
}
.que-answer .list-content .thumb-area i {
    position: absolute;
    display: inline-block;
    -ms-flex-line-pack: center;
    align-content: center;
    max-width: 10rem;
    max-height: 2rem;
    padding: 1px 4px;
    bottom: .8rem;
    right: .8rem;
    font-size: 1.2rem;
    font-style: normal;
    color: #fff;
    z-index: 2;
    opacity: .8;
    background: #000;
    border-radius: .2rem;
}
.que-answer .list-micro li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: .8rem;
}
.que-answer .list-micro li:last-child {
    margin-bottom: 0;
}
.que-answer .list-micro li a:hover .list-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--accent-color);
    opacity: 0.05;
    border-radius: .8rem;
}
.que-answer .list-micro .list-item {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 16rem 1fr;
    grid-template-columns: 16rem 1fr;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
}
.que-answer .list-micro .thumb-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-height: 4.2rem;
    width: 100%;
    border-radius: var(--thumb-radius);
}
.que-answer .list-micro .thumb-area img {
    width: 7rem;
    height: 4.2rem;
    margin-right: 1.6rem;
    border-radius: .4rem;
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    overflow: hidden;
}
.que-answer .list-micro .thumb-area i {
    position: relative;
    display: inline-block;
    -ms-flex-line-pack: center;
    align-content: center;
    max-width: 5.8rem;
    max-height: 2rem;
    padding: 1px 4px;
    font-size: 1.2rem;
    font-style: normal;
    border-radius: .2rem;
    color: var(--accent-color);
}
.que-answer .list-micro .thumb-area i::before {
    content: "";
    position: absolute;
    display: inline-block;
    -ms-flex-line-pack: center;
    align-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    font-style: normal;
    color: #fff;
    z-index: 2;
    opacity: .1;
    background: var(--accent-color);
    border-radius: .2rem;
}
.que-answer .list-micro .text-area {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 33.6rem 1fr;
    grid-template-columns: 33.6rem 1fr;
}
.que-answer .list-micro .text-area .desc {
    color: var(--body-color-black2);
}
.que-answer .item {
    margin-bottom: 3.2rem;
    line-height: 1.5;
}
.que-answer .item strong {
    display: block;
    margin-bottom: 1.6rem;
    font-size: 1.8rem;
}
.que-answer .item p {
    font-size: 1.6rem;
}
.que-answer .list-hover:hover .thumb-area {
    -webkit-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    overflow: hidden;
}
.que-answer .list-hover:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    overflow: hidden;
}
.que-answer .item.recommend_reason {
    margin-top: 2.4rem;
}
.item-title strong {
    display: block;
    font-size: 1.8rem;
}
.result-recommend {
    margin-top: 3rem;
}
.result-recommend ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.result-recommend li {
    margin-right: 1rem;
    padding: .8rem 1.7rem;
    margin-top: 1rem;
    cursor: pointer;
    border: 1px solid #E7EAEC;
    border-radius: 1.8rem;
    background: #fff;
    -webkit-transition: all .05s;
    transition: all .05s;
}
.result-recommend li:last-child {
    margin-right: 0;
}
.result-recommend li.on {
    border-radius: 1.8rem 1.8rem 1.8rem 0;
    background: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: #fff;
}
.que_comment {
    display: none;
}
/* que */
/* search-index */
/* board */
.board {
    display: flex;
}
.board-wrap { 
    width: 73rem;
    flex-basis: 73rem;
    margin-right: 1rem;
}
.board-wrap p, .board-wrap span { 
    line-height: 1;
}
.board-wrap .title { 
    display: flex;
    align-items: center;
}
.board-wrap .title p { 
    font-weight: 500;
}
.board-wrap .title img {
    width: 1.2rem;
    margin-left: 0.4rem;
}
.board-wrap .board-list {
    padding-bottom: 2rem;
    background: var(--background-tertiary);
}
.board-wrap .list-content {
    display: flex;
    padding: 0 2rem;
    height: 7.4rem;
    align-items: center;
}
.board-wrap .list-content > a { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-secondary);
}
.board-wrap .list-content .title-wrap { 
    width: calc(100% - 24.3rem); 
}
.board-wrap .list-content .title-wrap span { 
    display: inline-block;
    margin-top: 0.7rem;
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.board-wrap .list-content .info { 
    margin-left: 3rem;
}
.board-wrap .list-content .info span { 
    display: inline-block;
    margin-right: 1rem;
    font-size: 1.5rem;
    text-align: center;
    color: var(--body-color-black2);
}
.board-wrap .list-content .info span:last-child { 
    margin-right: 0;
    text-align: left;
}
.board-wrap .list-content .info .like { 
    width: 3rem;
}
.board-wrap .list-content .info .like.on {
    color: var(--accent-color);
}
.board-wrap .list-content .info .comment_cnt { 
    width: 3rem;
}
.board-wrap .list-content .info .view {
    width: 3rem;
}
.board-wrap .list-content .info .writer { 
    width: 7rem;
    margin-left: 1rem;
}
.board-wrap .list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.8rem;
    font-size: 1.5rem;
    color: #666;
}
.board-wrap .list-head .info span { 
    color: #666;
}
.board-wrap .list-notice { 
    background: #eee;
}
.board-wrap .list-notice .title p { 
    font-weight: 700;
}
.board-wrap .list-notice > a { 
    border-bottom: none;
}
.board-wrap .button-wrap { 
    justify-content: flex-end;
    margin-top: 1rem;
}
.board-wrap .button-wrap .button-more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7rem;
    height: 3.7rem;
    padding: 0;
    font-size: 1.4rem;
    border-radius: 0.4rem;
}
.board-wrap .pagination {
    margin-top: 0;
    padding: 1.5rem 0 0 0;
}
/* board */

/* post */
.post { 
    padding: 1rem 2rem;
    background: var(--background-tertiary);
}
.post .button-list {
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
    border-top: 1px solid var(--border-secondary);
}
.post .button-list .button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    width: 18rem;
    height: 5rem;
    font-size: 1.6rem;
    font-weight: 500;
}
/* post */

/* post-top */
.post-top p { 
    font-size: 1.6rem;
    font-weight: 500;
}
.post-top .title { 
    margin-top: 1.5rem;
}
.post-top .title img { 
    width: 1.2rem;
    margin-left: 0.5rem;
}
.post-top .info { 
    display: flex;
    align-items: end;
    padding: 0.7rem 0 1.5rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--body-color-black2);
    border-bottom: 1px solid var(--border-secondary);
}
.post-top .info img { 
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.2rem;
    border-radius: 50%;
}
.post-top .info span {
    display: inline-block;
    margin-right: 1rem;
}
.post-top .info span:last-child { 
    margin-right: 0;
}
.post-top .info .user-info { 
    display: flex;
    align-items: end;
    margin-right: 1rem;
}
.post-top .info .views {
    display: inline-block;
}
.post-top .attach {
    position: relative;
}
.post-top .attach-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 0.9rem;
    cursor: pointer;
}
.post-top .attach-title span {
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 1.4rem;
}
.post-top .attach-title span:last-child {
    margin-right: 0;
}
.post-top .attach-title .attach-count::before { 
    content: "(";
}
.post-top .attach-title .attach-count::after {
    content: ")";
}
.post-top .attach-desc {
    display: none;
    position: absolute;
    top: 2rem;
    right: 0;
    width: auto;
    height: auto;
    max-width: 27rem;
    max-height: 30rem;
    padding: 1rem 2rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    transition: all 0.3s;
    overflow-y : auto;
}
.post-top .attach-desc a { 
    margin: 1rem 0;
    font-size: 1.5rem;
}
.post-top .attach-desc.on {
    display: block;
}
/* post-top */

/* post-view */
.post-view { 
    padding: 1.5rem 2rem 4rem;
}
.post-view p { 
    font-size: 1.5rem;
    line-height: 1.5;
}
.post-view .bold { 
    font-weight: 500;
}
.post-view .attach-area {
    margin-top: 4rem;
}
.post-view .attach-area .wrap:nth-child(n+2) {
    margin-top: 3rem;
}
.post-view .attach-area .wrap img {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.post-view .attach-area .wrap video {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 50rem;
}
.post-view .attach-area .wrap a {
    text-decoration: underline;
}
.post-view .attach-area .attach-desc {
    width: 100%;
    min-height: 4.6rem;
    margin-top: 1rem;
    padding: 1.4rem;
    background: var(--background-primary);
    font-size: 1.5rem;
}
/* post-view */

/* post-footer */
.post-footer { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-secondary);
}
.post-footer span { 
    font-size: 1.5rem;
}
.post-footer svg {
    margin-right: 0.5rem;
}
.post-footer .footer-button { 
    display: flex;
    align-items: center;
    margin: 2rem 0;
}
.post-footer .icon-active {
    display: flex;
    align-items: center;
}
.post-footer .icon-active .icon-active-fill { 
    display: none;
    fill: var(--accent-color);
}
.post-footer .icon-active.on svg { 
    display: none;
}
.post-footer .icon-active.on .icon-active-fill { 
    display: inline-block;
}
.post-footer .footer-button-like {
    margin-right: 1.5rem;
}
.post-footer .footer-button-comment { 
    display: flex;
    align-items: center;
}
.post-footer .button-wrap { 
    margin-bottom: 2rem;
}
.post-footer .button-wrap .button-more { 
    width: 5.8rem;
    margin-right: 0.7rem;
    border: 1px solid #a4a4a4;
}
.post-footer .button-wrap .button-more:last-child { 
    margin-right: 0;
}
/* post-footer */

/* comment */
.comment { 
    margin-bottom: 5rem;
    background: var(--background-primary);
    border: 1px solid var(--border-secondary);
}
.comment li {
    padding: 2rem;
    border-bottom: 1px solid var(--border-secondary);
}
.comment .user-info { 
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
.comment .user-info .thumb-area { 
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
}
.comment .user-info .thumb-area img {
    border-radius: 50%;
}
.comment .user-info .user-name { 
    display: block;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color-black);
}
.comment .user-info span { 
    font-size: 1.2rem;
    color: var(--body-color-black2);
}
.comment .comment-detail {
    padding-left: 5rem;
}
.comment .comment-detail p { 
    font-size: 1.5rem;
    line-height: 1.4;
}
.comment .comment-detail textarea {
    padding: 1.2rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-secondary);
}
.comment .button-wrap {
    font-size: 1.3rem;
}
.comment .button-wrap a { 
    display: flex;
    align-items: center;
    margin-right: 1rem;
    color: var(--body-color-black2);
}
.comment .button-wrap a::after { 
    content: "";
    display: inline-block;
    width: 1px;
    height: 1rem;
    margin-left: 1rem;
    background: var(--body-color-black2);
}
.comment .button-wrap a:last-child::after { 
    display: none;
}
.comment .write-area { 
    padding: 2rem 2rem 3rem;
}
.comment .write-area textarea {
    padding: 1.2rem;
    font-size: 1.5rem;
    border: 1px solid var(--border-secondary);
}
.comment .write-area textarea::-webkit-input-placeholder {
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.comment .write-area .button-wrap {
    margin-top: 0;
}
.comment .write-area .button-primary { 
    width: 7rem;
    height: 3.6rem;
    background: var(--accent-color);
    border-radius: 0.4rem;
    cursor: pointer;
}
/* comment */

/* write */
.write { 
    padding: 2rem;
    background: var(--background-tertiary);
}
/* write */

/* write-top */
.write-top { 
    margin: 0.5rem 0 2.5rem;
    border-bottom: 1px solid var(--border-secondary);
}
.write-top .board-title span { 
    font-size: 1.5rem;
    color: var(--body-color-black2);
}
.write-top .write-title { 
    margin-top: 0.7rem;
}
.write-top .write-title input { 
    padding-bottom: 1.5rem;
    width: 100%;
}
.write-top .write-title input::-webkit-input-placeholder { 
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color-black2);
}
.write-top .write-title input::-moz-placeholder { 
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color-black2);
}
.write-top .write-title input:-ms-input-placeholder { 
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color-black2);
}
.write-top .write-title input::-ms-input-placeholder { 
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color-black2);
}
.write-top .write-title input::placeholder { 
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--body-color-black2);
}
/* write-top */

/* write-content */
.write-content { 
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border-secondary);
}
.write-content textarea { 
    height: 26rem;
    padding: 1.5rem 2rem;
    font-size: 1.5rem;
    border: 1px solid #ddd;
}
.write-content textarea::-webkit-input-placeholder { 
    color: var(--body-color-black2);
}
.write-content textarea::-moz-placeholder { 
    color: var(--body-color-black2);
}
.write-content textarea:-ms-input-placeholder { 
    color: var(--body-color-black2);
}
.write-content textarea::-ms-input-placeholder { 
    color: var(--body-color-black2);
}
.write-content textarea::placeholder { 
    color: var(--body-color-black2);
}
/* write-content */

/* write-footer */
.write-footer .text-area { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    font-size: 1.5rem;
}
.write-footer .text-area img { 
    width: 1.2rem;
    margin-right: 0.4rem;
}
.write-footer .text-area > div:first-child {
    display: flex;
}
.write-footer .attach-area { 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 9rem;
    border: 1px solid #ddd;
}
.write-footer .attach-area input[type=file] { 
    width: 95%;
    font-size: 1.4rem;
}
.write-footer .write-button-wrap { 
    margin: 5rem auto 2rem;
    text-align: center;
}
.write-footer .write-button-wrap a { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.8rem;
    height: 3.6rem;
    font-size: 1.4rem;
    border-radius: 0.4rem;
}
.write-footer .write-button-wrap a:first-child { 
    margin-right: 0.7rem;
}
.write-footer .write-button-wrap .button-cancel { 
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.write-footer .write-attachfile:nth-child(n+2) { 
    margin-top: 3rem;
}
.write-footer .write-attachfile.isfile span { 
    padding-left: 1rem;
    font-size: 1.5rem;
}
.write-footer .write-attachfile.isfile .attach-area { 
    height: auto;
    flex-wrap: wrap;
    justify-content: left;
    border: none;
}
.write-footer .write-attachfile.isfile .attach-area video {
    width: fit-content;
    height: fit-content;
    max-width: 100%;
    max-height: 50rem;
}
.write-footer .write-attachfile.isfile .attach-desc { 
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 4.6rem;
    margin-top: 1rem;
    padding: 1.4rem;
    background: var(--background-primary);
    font-size: 1.5rem;
}
.write-footer .write-attachfile.isfile textarea { 
    height: 2rem;
    background: inherit;
    border: none;
    overflow-y: hidden;
}
/* write-footer */

/* side-menu */
.side-menu { 
    max-width: 21rem;
    height: -moz-fit-content;
    height: fit-content;
    flex-basis: 21rem;
    padding: 1.1rem 2rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    max-height: 100rem;
    overflow-y: auto; 
}
.side-menu > div { 
    display: block;
    padding: 1.5rem 0;
    border-bottom: 1px dashed #D1D1D1;
}
.side-menu > div:last-child { 
    border-bottom: none;
}
.side-menu svg { 
    flex-basis: 1.2rem;
    fill: var(--body-color-black2);
    margin-right: 0.75rem;
}
.side-menu a { 
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
.side-menu a span { 
    display: block;
    flex-basis: calc(100% - 2rem);
    font-size: 1.6rem;
    line-height: 1.1;
}
.side-menu a span.active {
    text-decoration: underline;
}
.side-menu .side-title { 
    font-size: 1.6rem;
    font-weight: 700;
}
/* side-menu */

/* popup-exam */
.popup-exam span {
    font-size: 1.5rem;
}
.popup-exam .container {
    border-radius: 1.6rem;
}
.popup-exam .container .popup-wrap { 
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    height: calc(100% - 5.5rem);
}
.popup-exam .popup-title { 
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
    margin-bottom: 1.4rem;
    text-align: center;
}
.popup-exam .popup-title h5 { 
    font-weight: 700;
}
.popup-exam .popup-content { 
    text-align: center;
}
.popup-exam .popup-content > div { 
    margin-bottom: 0.7rem;
}
.popup-exam .popup-content > div:last-child { 
    margin-bottom: 0;
}
.popup-exam .popup-button-wrap .new_exam { 
    position: relative;
    display: flex;
    flex-basis: 50%;
    align-items: center;
    justify-content: center;
    bottom: 0;
    width: 100%;
    height: 5.5rem;
    font-size: 1.5rem;
    border-radius: 0;
    background: #EEEEEE;
}
.popup-exam .sub { 
    color: var(--body-color-black2);
}
/* popup-exam */

/* popup-exam-wait */
.popup-exam-wait .container {
    width: 53.2rem;
    height: 22.5rem;
}
.popup-exam-wait .popup-wrap {
    padding: 4rem 3rem;
}
/* popup-exam-wait */

/* popup-exam-take */
.popup-exam-take .container {
    width: 53.2rem;
    height: 19.2rem;
}
/* popup-exam-take */

/* popup-exam-retake */
.popup-exam-retake .container { 
    width: 53.2rem;
    height: 22.5rem;
}
.popup-exam-retake .popup-title { 
    margin-bottom: 1rem;
    text-align: center;
}
.popup-exam-retake .popup-title h5 { 
    display: inline-block;
}
.popup-exam-retake .popup-title .active { 
    color: var(--accent-color);
}
/* popup-exam-retake */

/* popup-exam-retakecomplete */
.popup-exam-retakecomplete .container { 
    width: 53.2rem;
    height: 25.8rem;
}
.popup-exam-retakecomplete .popup-title { 
    text-align: center;
    margin-bottom: 1rem;
}
.popup-exam-retakecomplete .popup-title h5 { 
    display: inline-block;
}
.popup-exam-retakecomplete .popup-title .active { 
    color: var(--accent-color);
}
/* popup-exam-retakecomplete */

/* popup-exam-completelist */
.popup-exam-completelist .container { 
    width: 53.2rem;
    max-height: 45.2rem;
    min-height: 40rem;
    height: 100%;
}
.popup-exam-completelist .popup-wrap { 
    padding: 4rem 3rem 0;
}
.popup-exam-completelist .popup-title { 
    margin-left: 1rem;
    text-align: left;
}
.popup-exam-completelist .popup-content { 
    width: 100%;
    height: 32.1rem;
    overflow-y: auto;
}
.popup-exam-completelist .popup-content li { 
    padding: 2rem 0;
    border-bottom: 1px solid var(--border-secondary);
}
.popup-exam-completelist .popup-content li:last-child { 
    border-bottom: 0;
}
.popup-exam-completelist .popup-content a { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}
.popup-exam-completelist .popup-content span { 
    font-size: 1.5rem;
}
.popup-exam-completelist .popup-content svg { 
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 2rem;
    fill: #A4A4A4;
}
.popup-exam-completelist .popup-content .sub { 
    margin-right: 1rem;
    color: var(--body-color-black2);
}
.popup-exam-completelist .popup-content .active { 
    font-weight: 600;
    color: var(--accent-color);
}
.popup-exam-completelist .popup-content .score { 
    display: flex;
    align-items: center;
    position: relative;
}
/* popup-exam-completelist */

/* popup-exam-timeover */
.popup-timeover .container {
    width: 53.2rem;
    height: 25.8rem;
}
.popup-timeover .popup-title {
    margin-bottom: 1rem;
    text-align: center;
}
/* popup-exam-timeover */

/* badge */
.badge {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 2.4rem;
    padding: 0.5rem 0.9rem 0.4rem;
    font-size: 1.2rem;
}
.badge span {
    font-weight: 500;
    line-height: 1.25;
    z-index: 1;
}
.badge::before {
    content: "";
    position: absolute;
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.4rem;
}
.badge.badge-type1 {
    color: var(--body-color-black2);
}
.badge.badge-type1::before {
    background: #F3F3F3;
}
.badge.badge-type2 {
    color: var(--body-color-black);
}
.badge.badge-type2::before {
    background: #D1D1D1;
}
.badge.badge-type3 {
    color: var(--accent-color);
}
.badge.badge-type3::before {
    opacity: 0.12;
    background: var(--accent-color);
}
/* badge */

/* exam-button-wrap */
.exam-button-wrap { 
    display: flex;
    align-items: center;
}
.exam-button-wrap a { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.2rem;
    margin-right: 1rem;
    width: 9.2rem;
    height: 3.6rem;
    border-radius: 0.4rem;
    font-size: 1.4rem;
}
.exam-button-wrap a.button-type1 { 
    color: var(--body-color-white);
    background: #D1D1D1;
}
.exam-button-wrap a.button-type2 { 
    color: var(--body-color-white);
    background: var(--accent-color);
}
.exam-button-wrap a.button-type3 { 
    color: var(--body-color-white);
    background: #666;
}
.exam-button-wrap a.button-type4 { 
    color: var(--body-color-black);
    background: var(--background-tertiary);
    border: 1px solid var(--body-color-black2);
}
.exam-button-wrap a:last-child { 
    margin-right: 0;
}
/* exam-button-wrap */

/* exam-top-wrap */
.exam-top-wrap {
    width: 100%;
}
.exam-top-wrap .select-box .select-box-list {
    top: 4.5rem;
    border-radius: var(--elem-radius);
}
.exam-top-wrap h6 {
    font-size: 1.8rem;
    font-weight: 600;
}
/* exam-top-wrap */

/* exam-top-status */
.exam-top-status .search-form .select-box {
    width: 25.2rem;
    height: 4.5rem;
}

.exam-top-status .search-form .search-date {
    width: calc(100% - 25.2rem);
    justify-content: flex-end;
    border-left: none;
}
.exam-top-status .search-form .search-date h6 {
    font-size: 1.6rem;
    font-weight: 500;
}
/* exam-top-status */

/* exam_content */
.exam_content ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2rem 2.5rem;
    border: 1px solid var(--border-secondary);
    border-top: none;
}
.exam_content li {
    width: calc(98% / 3);
    height: 10.5rem;
    margin-right: 1%;
    padding: 2rem;
    background: var(--background-tertiary);
    border-radius: 0.8rem;
}
.exam_content li:last-child {
    margin-right: 0;
}
.exam_content li.disabled .cnt svg {
    fill: #A4A4A4;
}
.exam_content li.disabled span {
    color: var(--body-color-black2);
}
.exam_content .title p {
    margin-bottom: 0.9rem;
    font-size: 1.6rem;
    font-weight: 500;
}
.exam_content .cnt {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.exam_content .cnt span {
    font-size: 3.2rem;
    font-weight: 500;
}
.exam_content .cnt svg {
    fill: var(--accent-color);
}
/* exam_content */

/* exam-wrap */
.exam-wrap .title-area {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding-left: 2rem;
    height: 4.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.exam-wrap .title-area h6 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-right: 2rem;
}
/* exam-wrap */

/* exam-item-wrap */
.exam-item-wrap {
    padding: 1.6rem 2rem;
    border: 1px solid var(--border-secondary);
    border-top: none;
}
.exam-item-wrap .nodatafound-404 {
    padding: 7rem 0;
}
/* exam-item-wrap */

/* exam-item */
.exam-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 2rem;
    background: var(--background-tertiary);
    border-radius: 0.4rem;
}
.exam-item .title {
    margin-bottom: 1.3rem;
}
.exam-item .title p {
    margin-top: 0.7rem;
    font-size: 1.6rem;
    font-weight: 600;
}
.exam-item .exam-detail {
    display: flex;
    flex-wrap: wrap;
}
.exam-item .exam-detail li {
    width: 50%;
    margin-bottom: 0.6rem;
}
.exam-item .exam-detail span {
    font-size: 1.4rem;
}
.exam-item .exam-detail .sub {
    margin-right: 1rem;
    color: #A1A1A1;
}
.exam-item.open li .active {
    color: var(--accent-color);
}
/* exam-item */

/* exam-top */
.exam-top {
    padding: 2.5rem 4rem 0;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-bottom: none;
}
.exam-top h6 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.4rem;
}
.exam-top .exam-item {
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 0;
}
.exam-top .exam-item .exam-detail {
    width: 100%;
}
.exam-top.seriesexam-progress {
    padding: 2.3rem 4rem 0;
}
/* exam-top */

/* exam-top-progress */
.exam-top-progress { 
    position: sticky;
    top: 7.1rem;
    padding: 1.4rem 4rem 2rem;
    margin-bottom: 1rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-top: none;
    z-index: 10;
}
.exam-top-progress span { 
    font-size: 1.4rem;
    font-weight: 500;
}
.exam-top-progress .progress { 
    margin-bottom: 0;
}
.exam-top-progress .progress-info { 
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.7rem;
}
.exam-top-progress .remindertime-wrap { 
    display: none;
}
/* exam-top-progress */

/* exam-top-result */
.exam-top-result { 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 4rem;
}
.exam-top-result .exam-item { 
    margin-bottom: 0;
}
.exam-top-result .exam-detail li:nth-child(n+3) { 
    margin-bottom: 0;
}
/* exam-top-result */

/* exam-mcq-wrap */
.exam-mcq-wrap { 
    padding: 2rem;
    background: #F5F5F5;
    border: 1px solid var(--border-secondary);
}
.exam-mcq-wrap li { 
    background: var(--background-tertiary);
    margin-bottom: 1rem;
    border-radius: var(--elem-radius);
}
.exam-mcq-wrap li:last-child { 
    margin-bottom: 0;
}
.exam-mcq-wrap .exam-question { 
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-secondary);
}
.exam-mcq-wrap .exam-question p { 
    padding: 1.5rem 2rem;
}
.exam-mcq-wrap .exam-question img.correct-image { 
    position: absolute;
    left: -1px;
    top: -1px;
    width: 5.4rem;
    height: 5.4rem;
    z-index: 10;
}
.exam-mcq-wrap .exam-question .img-area {
    display: block;
    width: 100%;
    max-width: 87rem;
    padding-bottom:revert-layer 2rem;
    margin: 0 auto;
}
.exam-mcq-wrap .exam-question .exam-question-image {
    position: relative;
    width: fit-content;
    height: fit-content;
    padding-bottom: 1.5rem;
}
.exam-mcq-wrap .exam-answer { 
    position: relative;
    padding-bottom: 1rem;
}
.exam-mcq-wrap .exam-answer label { 
    position: relative;
    display: inline-block;
    padding: 0 2rem 0 4.2rem;
    font-size: 1.5rem;
    letter-spacing: -0.1rem;
    cursor: pointer;
}
.exam-mcq-wrap .exam-answer label::before { 
    content: "";
    border: 1.5px solid #A4A4A4;
    border-radius: 50%;
}
.exam-mcq-wrap .exam-answer input[type=radio],
.exam-mcq-wrap .exam-answer label::before { 
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    left: 2rem;
    transform: translateY(3px);
    cursor: pointer;
    box-sizing: border-box;
}
.exam-mcq-wrap .exam-answer input[type=radio] { 
    display: inline-block;
    opacity: 0;
    -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
}
.exam-mcq-wrap .exam-answer input[type=radio]:checked + label::before { 
    border: none;
}
.exam-mcq-wrap .exam-answer svg { 
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    left: 2rem;
    transform: translateY(3px);
    pointer-events: none;
    fill: none;
}
.exam-mcq-wrap .exam-answer input[type=radio]:checked + label svg { 
    fill: var(--accent-color);
}
.exam-mcq-wrap .correct input[type=radio] + label {
	color: #FD6639;
}
.exam-mcq-wrap .exam-answer .answers { 
    padding: 1rem 0 1.5rem;
}
.exam-mcq-wrap .exam-answer .answers li { 
    padding: 0.7rem 0;
    margin: 0;
}
.exam-mcq-wrap .exam-answer.checkbox-answers label::before { 
    border-radius: 0;
}
.exam-mcq-wrap .exam-answer.checkbox-answers input[type=checkbox],
.exam-mcq-wrap .exam-answer.checkbox-answers label::before { 
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    left: 2rem;
    transform: translate(1px, 4px);
    cursor: pointer;
    box-sizing: border-box;
}
.exam-mcq-wrap .exam-answer.checkbox-answers input[type=checkbox] { 
    display: inline-block;
    opacity: 0;
    -webkit-appearance: none;
        -moz-appearance: none;
            appearance: none;
}
.exam-mcq-wrap .exam-answer.checkbox-answers input[type=checkbox]:checked + label::before { 
    border: none;
}
.exam-mcq-wrap .exam-answer.checkbox-answers input[type=checkbox]:checked + label svg { 
    fill: var(--accent-color);
}
.exam-mcq-wrap .exam-answer.checkbox-answers svg { 
    width: 1.7rem;
    height: 1.7rem;
}
.exam-mcq-wrap .exam-answer label p {
    word-break: break-word;
}
.exam-mcq-wrap .exam-explain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin: 1rem 2rem 1rem;
    padding: 1.5rem;
    background: var(--background-secondary);
    border: 1px solid var(--border-secondary);
}
.exam-mcq-wrap .exam-explain .explain { 
  width: 3.9rem;
  height: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-right: 1rem;
  font-size: 1.2rem;
  background: #707070;
  border-radius: 0.4rem;
  color: var(--body-color-white);
}
.exam-mcq-wrap .exam-explain p { 
  width: calc(100% - 4.9rem);
  font-size: 1.4rem;
}
/* exam-mcq-wrap */

/* exam-mcq */
.exam-mcq .exam-button-wrap { 
    margin-top: 5rem;
}
.exam-mcq .exam-button-wrap a { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18rem;
    height: 5rem;
    font-size: 1.6rem;
    border-radius: var(--button-radius);
}
.exam-mcq .exam-button-wrap .button-save { 
    background: #A4A4A4;
    color: var(--body-color-white);
}
/* exam-mcq */

/* remindertime */
.remindertime { 
    width: 100%;
    position: sticky;
    bottom: 2rem;
}
.remindertime .remindertime-wrap { 
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem 3rem;
    width: 15.4rem;
    height: 8.8rem;
    bottom: 0;
    right: -173px;
    z-index: 100;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
}
.remindertime .remindertime-wrap span { 
    width: 100%;
    font-size: 1.6rem;
}
.remindertime .remindertime-wrap p { 
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--accent-color);
}
.seriesexam-remindertime .remindertime-wrap {
  width: 18.7rem;
  height: -moz-max-content;
  height: max-content;
  right: -207px;
}
.seriesexam-remindertime .remindertime-wrap span {
  display: block;
}
/* remindertime */

/* popup-seriesexam */
.popup-seriesexam .container {
    width: 53.2rem;
}
.popup-seriesexam .popup-content {
    padding: 4.7rem 3rem;
}
.popup-seriesexam .popup-content .popup-title {
    margin-bottom: 1rem;
}
.popup-seriesexam .popup-content h5 {
    display: inline-block;
    font-weight: 700;
}
.popup-seriesexam .popup-content .sub-title {
    color: var(--body-color-black2);
}
/* popup-seriesexam */

/* seriesexam-top */
.seriesexam-top {
    display: flex;
    padding: 2.5rem 4rem;
    margin-bottom: 1rem;
    background: var(--background-tertiary);
    border: 1px solid var(--border-secondary);
}
.seriesexam-top .title-area {
    width: calc(100% - 30rem);
}
.seriesexam-top .title-area h6 {
    font-size: 1.8rem;
    font-weight: 700;
}
.seriesexam-top .seriesexam-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 2rem;
    width: 30rem;
}
.seriesexam-top .seriesexam-result .button-wrap {
    margin-left: 3rem;
}
.seriesexam-top .seriesexam-result .button-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11.7rem;
    height: 5rem;
    font-size: 1.6rem;
    border-radius: var(--button-radius);
}
.seriesexam-top .seriesexam-result.completed h4::after {
    content: "(수료)";
    font-size: 1.8rem;
}
.seriesexam-top .seriesexam-result.completed .button-wrap a {
    color: var(--body-color-white);
    background: var(--accent-color);
}
.seriesexam-top .seriesexam-result.n-completed h4::after {
    content: "(미수료)";
    font-size: 1.8rem;
}
.seriesexam-top .seriesexam-result.n-completed .button-wrap a {
    color: var(--body-color-black);
    background: var(--background-tertiary);
    border: 1px solid var(--body-color-black2);
}
/* seriesexam-top */

.profile input[type=text],
.profile input[type=email],
.profile input[type=number],
.profile input[type=radio],
.profile input[type=number] {
  padding: 1.6rem 2.2rem;
  line-height: 1;
  border: 1px solid var(--border-secondary);
  border-radius: 0.8rem;
  background: #F9F9F9;
}
.profile input[type=text]:focus,
.profile input[type=email]:focus,
.profile input[type=number]:focus,
.profile input[type=radio]:focus,
.profile input[type=number]:focus {
  border: 1px solid var(--accent-color);
}
.profile .button-primary { 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5rem;
  width: 18rem;
  height: 5rem;
  font-size: 1.6rem;
  border-radius: var(--button-radius);
}

.profile-top { 
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 5rem;
  margin-bottom: 1rem;
  background: var(--background-tertiary);
  border: 1px solid var(--border-secondary);
}
.profile-top input[type=file] { 
  display: inline-block;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.profile-top input[type=text] {
  width: 100%;
}
.profile-top .user-info { 
  display: flex;
  align-items: center;
}
.profile-top .thumb-area {
  position: relative;
  width: 12rem;
  height: 12rem;
}
.profile-top .thumb-area img {
  border-radius: 50%;
}
.profile-top .img-upload {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: var(--accent-color);
  cursor: pointer;
}
.profile-top .img-upload svg {
  height: 1.8rem;
  fill: #fff;
}
.profile-top .text-area {
  margin-left: 3rem;
}
.profile-top .text-area input[type=text] {
  margin-bottom: 0.7rem;
  font-size: 1.5rem;
}
.profile-top .text-area p {
  margin-bottom: 0.7rem;
  font-size: 2.2rem;
  font-weight: 500;
}
.profile-top .text-area span {
  font-size: 1.6rem;
  color: var(--body-color-black2);
}
.profile-top .button-wrap a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  padding: 1.6rem 2.2rem;
  background: #eee;
  border-radius: var(--button-radius);
  font-size: 1.6rem;
  line-height: 1;
}
.profile-top .button-wrap a:nth-child(n+2) {
  margin-left: 1rem;
}
.profile-top .profile-edit a { 
  width: 11.7rem;
  color: var(--body-color-white);
  background: #A4A4A4;
}

.profile-detail { 
  padding: 4rem 7rem 5rem;
  background: var(--background-tertiary);
  border: 1px solid var(--border-secondary);
}
.profile-detail .form-wrap { 
  display: flex;
  align-items: center;
  height: 5rem;
  margin-bottom: 2rem;
}
.profile-detail .form-wrap:last-child { 
  margin-bottom: 0;
}
.profile-detail .form-wrap > span { 
  padding: 1.6rem 2.2rem;
  font-size: 1.6rem;
}
.profile-detail .form-wrap > span.disabled { 
  color: var(--body-color-black2);
}
.profile-detail .form-wrap > label { 
  width: 11.5rem;
  flex-basis: 11.5rem;
  margin-right: 7rem;
}
.profile-detail .form-wrap.on .select-box { 
  border: 1px solid var(--accent-color);
}
.profile-detail .form-wrap.disabled .select-box .select-box-list {
  display: none;
  animation: none;
  opacity: 0;
}
.profile-detail .form-wrap.disabled svg {
  display: none;
}
.profile-detail input[type=text],
.profile-detail input[type=email] {
  width: calc(100% - 18.5rem);
  height: 5rem;
  font-size: 1.5rem;
  color: var(--body-color-black);
}
.profile-detail .select-box {
  width: calc(100% - 18.5rem);
  height: 5rem;
  font-size: 1.5rem;
  border: 1px solid var(--border-secondary);
  border-radius: 0.8rem;
  background: #F9F9F9;
}
.profile-detail .select-box .select-box-current {
  display: flex;
  align-items: center;
  height: 100%;
}
.profile-detail .select-box .select-box-current svg {
  position: absolute;
  top: 50%;
  right: 2.2rem;
  transform: translateY(-50%);
}
.profile-detail .select-box .select-box-current > div:first-child span { 
  color: var(--body-color-black2);
}
.profile-detail .select-box .select-box-input-text { 
  background: inherit;
  padding-left: 2.2rem;
}
.profile-detail .select-box .select-box-list { 
    top: 5.7rem;
    max-height: 20rem;
}
.profile-detail .select-box .select-box-list li:first-child label { 
  color: var(--body-color-black2);
}
.profile-detail .select-box .select-box-option { 
  padding: 0.9rem 2rem;
}
.profile-detail .select-box .select-box-option:hover, .profile-detail .select-box .select-box-option:focus { 
  color: var(--accent-color);
}

.download-app { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.download-app .text-area {
  text-align: center;
  margin-top: 3rem;
  line-height: 1;
}
.download-app .text-area p { 
  font-size: 1.6rem;
  line-height: 1.5;
}
.download-app .text-area a { 
  display: inline-flex;
  align-items: center;
  margin-top: 1.4rem;
  font-size: 1.6rem;
  color: var(--accent-color);
}
.download-app .text-area svg { 
  margin-left: 0.3rem;
  fill: var(--accent-color);
}

.download-app-content { 
  width: 46rem;
  height: auto;
  padding: 5rem 4rem 4rem;
  background: var(--background-tertiary);
  border-radius: 1.6rem;
  text-align: center;
}
.download-app-content button {
    height: 100%;
}
.download-app-content h4 { 
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1;
}
.download-app-content span {
    font-size: 2.2rem;
    line-height: 1;
}
.download-app-content .icon-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
}
.download-app-content .icon-wrap h5 { 
  width: 100%;
  margin: 1.6rem 0;
}
.download-app-content .icon-wrap p {
    font-size: initial;
    line-height: 1.18;
}
.download-app-content .code-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    padding: .65rem 0;
    background: var(--background-primary);
    border: 1px solid var(--border-secondary);
    border-radius: .8rem;
    font-weight: 500;
}
.download-app-content .code-wrap h5 {
    font-weight: initial;
}
.download-app-content .code-wrap .copy_text {
    margin: 0 .8rem;
    color: var(--accent-color);
    font-weight: initial;
    line-height: 1.18;
}
.download-app-content .code-wrap .code_copy-wrap {
    display: flex;
}
.download-app-content .icon-area { 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 10rem;
  border: 1px solid var(--border-secondary);
  background: var(--background-primary);
  border-radius: 1.6rem;
}
.download-app-content .icon-area svg { 
  fill: var(--accent-color);
}
.download-app-content .button-wrap a { 
  width: 100%;
  height: 4.8rem;
  margin-top: 2.6rem;
  padding: 1.5rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}

.associate-header .start { 
  width: 38rem;
}

header.associate-header .logo { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: auto;
}
header.associate-header .logo img {
  max-height: 2.2rem;
  margin-right: 1rem;
}
header.associate-header .logo img:nth-child(2) {
    max-height: 3rem;
}
header .logo .associate-logo { 
  max-width: 21rem;
  max-height: 3.6rem;
  min-height: 2.2rem;
}

.associate .img-area { 
  position: relative;
}
.associate .logo-area { 
  position: absolute;
  max-width: 32rem;
  max-height: 7.5rem;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.associate .logo-area img { 
  position: absolute;
  top: 0;
  left: 0;
  min-width: auto;
  width: auto;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 0;
}

.associate-floating { 
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 1;
}
.associate-floating p {
  font-size: 2.2rem;
  font-weight: 700;
}
.associate-floating img { 
  width: 6.2rem;
  height: 4.2rem;
  margin-top: 1.5rem;
}
.associate-floating svg { 
  width: 0.9rem;
  margin-left: 0.5rem;
  fill: var(--body-color-white);
}
.associate-floating .associate-floating-wrap { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: end;
      align-content: flex-end;
  width: 17rem;
  height: 19.6rem;
  border-radius: 1.6rem;
  background: var(--background-tertiary);
  -webkit-box-shadow: var(--shadow-01);
          box-shadow: var(--shadow-01);
  overflow: hidden;
}
.associate-floating .text-area { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 2rem 3rem;
  text-align: center;
}
.associate-floating .button-area { 
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 4.5rem;
  bottom: 0;
  background: transparent linear-gradient(285deg, #FF0000 0%, #FD6639 100%) 0% 0% no-repeat padding-box;
}
.associate-floating .button-area a { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--body-color-white);
}

.associate-fpkorea { 
  padding: 0;
  background: #fff;
}
.associate-fpkorea img { 
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
.associate-fpkorea img:first-child {
  margin-right: 2rem;
}
.associate-fpkorea .blind { 
  overflow: hidden;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}
.associate-fpkorea .slash {
  font-size: 11px;
  vertical-align: middle;
  color: #aaaaaa;
  margin: 0 11px;
}
.associate-fpkorea .fpkorea-footer-top { 
  padding-top: 4rem;
  background: #f5f5f5;
}
.associate-fpkorea .fpkorea-footer-top span { 
  margin-right: 0.3rem;
}
.associate-fpkorea .fpkorea-footer-top > div { 
  max-width: 168rem;
  width: calc(100% - 40rem);
  margin: 0 auto 0 32rem;
  padding-bottom: 1rem;
}
.associate-fpkorea .fpkorea-footer-top address { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.2rem;
  font-style: normal;
  color: var(--body-color-black2);
}
.associate-fpkorea .fpkorea-footer-top .fp_logo { 
  max-width: 10rem;
  margin-right: 4rem;
}
.associate-fpkorea .fpkorea-footer-top .fp_info { 
  width: calc(100% - 14rem);
}
.associate-fpkorea .fpkorea-footer-policyarea {
  background: #e2e2e2;
}
.associate-fpkorea .fpkorea-footer-policyarea .policyarea-wrap { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  max-width: 168rem;
  width: calc(100% - 40rem);
  margin: 0 auto 0 32rem;
  padding: 0 2rem;
}
.associate-fpkorea .fpkorea-footer-policyarea .policy { 
  padding-left: 12rem;
}
.associate-fpkorea .fpkorea-footer-policyarea .familysite { 
  position: relative;
  width: 120px;
}
.associate-fpkorea .fpkorea-footer-policyarea .familysite .list { 
  display: none;
  background: #fff;
  padding: 4px 4px;
  position: absolute;
  top: 20px;
  left: 1px;
  width: 102px;
}
.associate-fpkorea .fpkorea-footer-policyarea .familysite .list li { 
  font-size: 12px;
  line-height: 18px;
}
.associate-fpkorea .fpkorea-footer-policyarea .familysite .img-area { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.associate-fpkorea .fpkorea-footer-bottom {
  background: #fff;
  padding-bottom: 4rem;
}
.associate-fpkorea .fpkorea-footer-bottom .coop { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 168rem;
  width: calc(100% - 40rem);
  margin: 0 auto 0 32rem;
  padding: 2rem 2rem 0;
}

@media all and (max-width: 1440px) {
    /* hero */
    .hero {
        padding: 3rem 4rem;
    }
    .hero .thumb-area {
        width: 50%;
    }
    .hero .text-area {
        width: 50%;
    }
    /* hero */

    /* feed */
    .feed .swiper-button-next, .feed .swiper-button-prev {
        width: 3.5rem;
        height: 3.5rem;
    }
    .feed-ranking .thumb-area img {
        width: 16rem;
        height: 9.6rem;
    }
    /* feed */

    /* course-detail */
    .course-detail {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: 3rem 2rem 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .video-area .course-icons svg {
        width: 2rem;
        height: 2rem;
    }
    .video-area .course-icons button {
        width: 5rem;
        height: 6rem;
    }
    .aside-contents {
        height: -moz-fit-content;
        height: fit-content;
        max-width: 100%;
    }
    .video-wrap, .video-info, .course-desc {
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 0.7rem;
    }
    .video-info {
        height: 100%;
        padding: 2rem;
        border: 1px solid var(--border-secondary);
    }
    .video-info .course-title {
        margin-bottom: 2rem;
    }
    .video-info .info {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        height: auto;
    }
    .course-desc {
        min-height: -webkit-fit-content;
        min-height: -moz-fit-content;
        min-height: fit-content;
        border: 1px solid var(--border-secondary);
    }
    .video-wrap {
        height: auto;
        margin-bottom: 0;
        aspect-ratio: auto;
    }
    .content-detail, .relation-contents {
        min-width: 100%;
        max-width: 100%;
        margin-bottom: 0.7rem;
    }
    .relation-contents {
        margin-top: 0; 
    }
    .content-detail .aside-contents {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        max-width: 100%;
        overflow-y: hidden;
    }
    .content-detail .accordion-content .course-part p {
        font-size: 1.4rem;
    }
    .course-accordion > li .accordion-link .button-wrap > svg {
        height: 2rem;
    }
    .relation-contents h6 {
        font-size: 1.6rem;
    }
    .course-desc article h6 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }
    .content-detail {
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
    }
    /* course-detail */

    /* category-2depth */
    .category-2depth .list-class li {
        width: calc((100% - 3.6rem) / 4);
    }
    .category-2depth .list-class li:nth-child(5n) {
        margin-right: 1.2rem;
    }
    .category-2depth .list-class li:nth-child(4n) {
        margin-right: 0;
    }
    .category-2depth .list-class-column .sub-info span {
        margin-right: 1rem;
    }
    .category-2depth .list-class-column .sub-info .instructor {
        display: none;
    }
    /* category-2depth */

    /* manual */
    .manual {
        padding: 0 3rem 0 3rem;
    }
    /* manual */

    /* search-index */
    .search-index .list-class li {
        width: 100%;
    }
    .search-index .list-class.list-materials li:nth-last-child(-n+2) {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    .search-index .list-class.list-materials li:last-child {
        border-bottom: 1px solid var(--border-secondary);
    }
    /* search-index */

    /* myroom */
    .myroom_item .myroom_series_ul li > div {
        height: auto;
    }
    .myroom_item .myroom_series_ul .title {
        width: 100%;
    }
    .myroom_item .myroom_series_ul .text-area > div:first-child {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    .myroom_item .myroom_series_ul .text-area {
        padding: 2.2rem 1rem;
    }
    .myroom-button-wrap span {
        margin-bottom: 0;
        margin-right: 0.5rem;
    }
    .myroom_item .myroom_series_ul .thumb-area {
        width: 17.6rem;
        flex-basis: 17.6rem;
        padding-left: 1rem;
    }
    /* myroom */

    /* remindertime */
    .remindertime .remindertime-wrap { 
        right: 0;
    }
    /* remindertime */

    /* que */
    .que-answer .item-list .list-class li:nth-child(-n+2) {
        margin-top: 1.6rem;
    }
    .que-answer .item-list .list-class li:first-child {
        margin-top: 0;
    }
    /* que */
}

@media all and (max-width: 1300px) {
    /* video-info */
    .video-info {
        height: auto;
        padding: 2rem;
    }
    /* video-info */

    /* course-desc */
    .course-desc {
        min-height: 58rem;
    }
    /* course-desc */
    
    /* search-ailearn */
    .search-ailearn .series .list-wrap li {
        width: 100%;
    }
    /* search-ailearn */
}

@media all and (max-width: 1280px) {
    /* myroom-top */
    .myroom-top .search-form .search-date .search-period input[type=date],
    .myroom-top .search-form .search-date .search-period input[type=month],
    .myroom-top .search-form .search-date .search-period input[type=number] {
        width: 14rem;
    }
    /* myroom-top */
}

@media all and (max-width: 1250px) {
    /* category-1depth */
    .category-1depth .icon-bg {
        width: 100%;
        height: 100%;
        max-width: 6rem;
        max-height: 5.4rem;
    }
    .category-1depth li {
        padding: 1.5rem;
    }
    .category-1depth li span {
        font-size: 1.4rem;
        word-break: break-word;
    }
    /* category-1depth */

    /* category-2depth */
    .category-2depth .list-class-column .main-info {
        flex-basis: 74%;
    }
    .category-2depth .list-class-column .sub-info { 
        flex-basis: 20%;
    }
    .category-2depth .list-class-column .sub-info .time {
        display: none;
    }
    .category-2depth .list-class-column .sub-info .goto-class { 
        display: none;
    }
    .category-2depth .title {
        flex-wrap: wrap;
    }
    /* category-2depth */
}

@media all and (max-width: 1200px) {
    /* manual */
    .manual {
        padding: 0;
        overflow: hidden;
    }
    .manual .text-area {
        width: 18rem;
        padding-left: 1rem;
    }
    /* manual */
}

@media all and (max-width: 1070px) {
    /* manual */
    .manual .text-area {
        width: 14.5rem;
    }
    /* manual */
}

@media all and (max-width: 1024px) {
    /* header */
    header .center .search-panel {
        left: calc(50% - 5rem);
        transform: translate(-50%);
    }
    header .center .search-index { 
        left: calc(50% - 8rem);
        transform: translateX(-50%);
    }
    /* header */

    /* footer */
    footer .container {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 3rem 2rem !important;
    }
    footer .foot-info {
        width: 100%;
    }
    /* footer */

    /* contents */
    .contents .container {
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 3rem 2rem !important;
    }
    /* contents */

    /* side */
    .side-nav {
        display: none;
    }
    .mo-nav {
        position: fixed;
        top: 7.2rem;
        left: 0;
        width: 100%;
        height: calc(100% - 5.4rem);
        background: var(--background-tertiary);
        z-index: 101;
        overflow-y: auto;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;   /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .mo-nav::-webkit-scrollbar {
        display: none;  /* Chrome, Safari, Opera */
    }
    .mo-nav.on {
        display: block;
    }
    .mo-nav .user-info {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 3rem 4rem;
        border-bottom: 1px solid var(--border-secondary);
    }
    .mo-nav .user-info .thumb-area {
        margin-right: 2rem;
    }
    .mo-nav .user-info .user-name {
        display: block;
        font-size: 2rem;
        font-weight: 500;
    }
    .mo-nav .user-info .user-email {
        font-size: 1.4rem;
        color: var(--body-color-black2);
    }
    .mo-nav .user-info img {
        width: 6.5rem;
        height: 6.5rem;
        border: 1px solid var(--border-secondary);
        border-radius: 50%;
    }
    .mo-nav .user-info a {
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        right: 2.5rem;
        width: 16rem;
        height: 5rem;
        font-size: 1.6rem;
    }
    .mo-nav .learning-time {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: 3rem 4rem;
        background: var(--background-primary);
        border-bottom: 1px solid var(--border-secondary);
    }
    .mo-nav .learning-time .thumb-area {
        margin-right: 2rem;
    }
    .mo-nav .learning-time .thumb-area img {
        width: 66px;
    }
    .mo-nav .learning-time p {
        font-size: 1.5rem;
        font-weight: 500;
    }
    .mo-nav .learning-time span {
        font-size: 1.4rem;
        color: var(--accent-color);
    }
    .mo-nav .nav-menu {
        padding: 1rem 1.5rem 2rem;
    }
    .mo-nav .nav-menu a::before {
        width: 1.6rem;
        height: 1.6rem;
    }
    .mo-nav .button-wrap button {
        width: 100%;
        height: 5rem;
        margin-bottom: 1rem;
        border: 1px solid var(--border-secondary);
        border-radius: calc(var(--button-radius) / 2);
    }
    .mo-nav .button-wrap .sendurl {
        background: var(--background-primary);
    }
    .nav-menu > div {
        bottom: 0;
    }
    /* side */

    /* manual */
    .manual .text-area {
        width: 26rem;
    }
    /* manual */

    /* feed-ranking */
    .feed-ranking .text-area span {
        font-size: 1.3rem;
    }
    /* feed-ranking */

    /* feed-row */
    .feed-row .text-area span {
        font-size: 1.3rem;
    }
    /* feed-row */

    /* category-2depth */
    .category-2depth .list-class-column li > p {
        min-width: 7rem;
        font-size: 2.4rem;
    }
    .category-2depth .list-class-column li > p::after {
        width: 2rem;
        height: 1rem;
        margin-left: 1rem;
    }
    .category-2depth .list-class-column .sub-info {
        flex-basis: auto;
    }
    .category-2depth .list-class-column .sub-info .goto-class {
        display: none;
    }
    .category-2depth .list-class-column .main-info {
        flex-basis: auto;
        width: 100%;
    }
    .category-2depth .list-class-column .main-info .text-area p {
        display: -webkit-box;
        word-break: keep-all;
        overflow: hidden;
        white-space: initial;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    /* category-2depth */

    /* myroom */
    .myroom h6 {
        font-size: 1.4rem;
    }
    /* myroom */

    /* myroom-top */
    .myroom-top .search-form {
        flex-wrap: nowrap;
    }
    .myroom-top .myroom_content .stats_items p {
        font-size: 1.3rem;
    }
    .myroom-top .myroom-top-left span {
        font-size: 1.3rem;
    }
    .myroom-top .myroom_content .stats_items .left_items span {
        font-size: 1.3rem;
    }
    .myroom-top .myroom_content .stats_items .right_items span {
        font-size: 1.3rem;
    }
    /* myroom-top */

    /* search-sme */
    .search-sme .thumb-area { 
        flex-basis: 9rem;
        width: 9rem;
        height: 9rem;
    }
    .search-sme .text-area { 
        flex-basis: calc(100% - 11rem);
        margin-left: 2rem;
    }
    /* search-sme */

    /* search-index */
    .search-index .sme-list li .thumb-area { 
        flex-basis: 9rem;
    }
    /* search-index */

    /* search-ailearn */
    .search-ailearn.active {
        padding: 1rem 2rem 2rem;
    }
    /* search-ailearn */

    /* exam-top-status */
    .exam-top-status .search-form .select-box { 
        border: 1px solid var(--border-secondary);
    }
    .exam-top-status .search-form .select-box .select-box-current { 
        display: flex;
        align-items: center;
        height: 100%;
        background: var(--background-tertiary);
    }
    .exam-top-status .search-form .select-box .select-box-input-text { 
        border: none;
        background: none;
    }
    /* exam-top-status */

    /* exam-top-progress */
    .exam-top-progress .remindertime-wrap { 
        display: inline-flex;
        margin-top: 0.7rem;
    }
    .exam-top-progress .remindertime-wrap p { 
        margin-left: 0.5rem;
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--accent-color);
    }
    /* exam-top-progress */

    /* remindertime */
    .remindertime { 
        display: none;
    }
    /* remindertime */

    /* popup-myroom */
    .popup-myroom  .container > iframe {
        height: 60vh;
    }
    /* popup-myroom */

    /* associate-fpkorea */
    .associate-fpkorea .fpkorea-footer-top > div,
    .associate-fpkorea .fpkorea-footer-policyarea .policyarea-wrap,
    .associate-fpkorea .fpkorea-footer-bottom .coop {
        padding-left: 4rem;
        margin: 0;
        width: 100%;
    }
    /* associate-fpkorea */

    /* que */
    .que-answer .header p {
        font-size: 1.4rem;
    }
    .que-answer .item strong {
        font-size: 1.6rem;
    }
    .que-answer .item p {
        font-size: 1.4rem;
    }
    /* que */

    /* appdownload */
    .download-app-content span {
        font-size: 2rem;
    }
    /* appdownload */
}

@media all and (max-width: 992px) {
    header .center .search-form {
        width: 30rem;
    }
}

@media all and (max-width: 900px) {
    /* manual */
    .manual .text-area {
        width: 20rem;
    }
    /* manual */
}

@media all and (max-width: 810px) {
    /* manual */
    .manual .text-area {
        width: 15rem;
    }
    /* manual */
}

@media all and (max-width: 1024px) {
    .item.semantic .list-semantic ul li {
        width: 100%;
    }
    .related-search > div {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .related-search .item-title {
        width: 100%;
    }
    header .start {
        width: auto;
        padding-left: 2rem;
    }
    header .end {
        padding-right: 2rem;
    }
    header .logo {
        max-height: 2rem;
        min-height: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
    }
    header .logo img {
        width: auto;
        max-height: 2rem;
        object-fit: contain;
    }
    header .end .profile {
        width: 3rem;
        height: 3rem;
    }
    header .end .notification {
        width: 3rem;
        height: 3rem;
        margin-right: 1rem;
    }
    header .end .notification.on::after {
        top: -.2rem;
        right: -.2rem;
    }
    header .center input[type=text]::placeholder 
    {
        font-size: 1.4rem;
    }
    header .center .search-panel {
        width: 65rem;
        left: 50%;
        transform: translateX(-54%);
    }
    header .center .search-recent {
        width: 30rem;
    }
    header .center .search-popular {
        width: 35rem;
    }
    header .center .search-index {
        width: 65rem;
        left: 50%;
        transform: translateX(-54%);
    }
    .info-tooltip .tooltip {
        max-width: fit-content;
        white-space: normal;
    }
}

@media all and (max-width: 698px) {
    /* logo */
    .logo {
        height: 1.8rem;
    }
    .logo img {
        width: auto;
        -o-object-fit: contain;
            object-fit: contain;
    }
    /* logo */

    /* header */
    header .container {
        height: 5.4rem;
        padding: 0 2rem;
    }
    header .start {
        padding-left: 0;
    }
    header .center .search-form {
        display: none;
    }
    header .center .search-panel {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: var(--background-tertiary);
        overflow-y: auto;
        transform: translateX(0);
    }
    header .center .search-panel .search-form-mobile { 
        display: flex;
        align-items: center;
        padding: 2.4rem 2rem;
        border-bottom: 1px solid var(--border-secondary);
    }
    header .center .search-panel .search-panel-wrap { 
        flex-wrap: wrap;
    }
    header .center .search-panel .search-form { 
        display: flex;
        width: 100%;
        height: 4rem;
        margin-right: 1rem;
    }
    header .center .search-panel .search-index-open {
        top: 11.8rem;
    }
    header .center .search-panel input[type=text] {
        height: 3.8rem;
    }
    header .center .search-index { 
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background: var(--background-tertiary);
        overflow-y: auto;
        transform: translateX(0);
    }
    header .center .search-recent { 
        width: 100%;
    }
    header .center .search-popular {
        position: relative;
        width: 100%;
        padding-top: 4.4rem;
        border-top: 1px solid var(--border-secondary);
    }
    header .center .search-popular::before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 1rem;
        top: 0;
        left: 0;
        background: var(--background-primary);
    }
    header .center .search-popular .contents span { 
        width: 100%;
    }
    header .center .title-area p {
        font-size: 1.6rem;
    }
    header .end {
        padding-right: 0;
    }
    header .end .notification {
        display: none;
    }
    header .end .profile {
        display: none;
    }
    header .end .search-button {
        content: "";
        display: block;
        width: 2rem;
        height: 2rem;
        font-size: 0;
        background: url("../images/link-search.svg") center center no-repeat;
    }
    header .logo {
        max-height: 2rem;
        min-height: auto;
        height: 100%;
        display: flex;
        justify-content: flex-start;
    }
    header .logo img {
        width: auto;
        max-height: 2rem;
        object-fit: contain;
    }
    /* header */

    /* autocomplete */
    .ui-menu {
        width: 100% !important;
        left: 0 !important;
        -webkit-transform: translateX(0) !important;
                transform: translateX(0) !important;
        -webkit-box-shadow: 0 5px 15px #3B487D1F !important;
                box-shadow: 0 5px 15px #3B487D1F !important;
    }
    /* autocomplete */

    /* footer */
    footer .container {
        padding-left: 2rem;
        margin-left: 0;
    }
    footer .foot-menu {
        width: 100%;
        margin-top: 2rem;
        margin-left: 0;
    }
    /* footer */

    /* contents */
    .contents section {
        max-width: 150.8rem;
        margin: 0 auto;
    }
    /* contents */

    /* hero */
    .hero .text-area p {
        display: none;
    }
    /* hero */

    /* feed */
    .feed {
        margin-top: 4rem;
    }
    .feed:nth-child(-n+2) {
        margin-top: 4rem;
    }
    .feed-continue .feed-row .swiper-button-next, .feed-continue .feed-row .swiper-button-prev {
        display: none;
    }
    .feed .swiper-button-next, .feed .swiper-button-prev {
        display: none;
    }
    .feed-ranking .thumb-area {
        margin: 0 1rem;
    }
    .feed-ranking .text-area {
        width: 55%;
    }
    .feed-ranking p {
        text-align: center;
        font-size: 1.8rem;
    }
    .feed-ranking ul {
        width: 100%;
    }
    .feed-ranking li:last-child::after {
        display: block;
    }
    .feed-ranking .arrow-wrap p {
        width: 100%;
    }
    .feed-ranking .arrow-wrap p::after {
        width: 100%;
        max-width: 2rem;
    }
    /* feed */

    /* help-tab */
    .help-tab .help-tab-sub .tab-nav-item {
        padding: 1rem;
    }
    /* help-tab */

    /* qna */
    .qna {
        width: 100%;
    }
    .qna .qna-date::before, .qna .qna-date::after {
        width: 20rem;
    }
    /* qna */
    
    /* category-1depth */
    .category-1depth li {
        width: calc(96% / 4);
    }
    .category-1depth .category-1depth-lg {
        width: calc((96% / 4) * 2 + 1%);
    }
    /* category-1depth */

    /* category-2depth */
    .category-2depth .title .select-box::before {
        height: 1.6rem;
    }
    .category-2depth .title h5 {
        font-size: 2rem;
    }
    .category-2depth .wishlikeseries_title {
        margin-bottom: 2rem;
    }
    .category-2depth .list-class li {
        width: calc((100% - 2.4rem) / 3);
    }
    .category-2depth .list-class li:nth-child(4n) {
        margin-right: 1.2rem;
    }
    .category-2depth .list-class li:nth-child(3n) {
        margin-right: 0;
    }
    .category-2depth .category-2depth-menu {
        top: 5.4rem;
    }
    .category-2depth .category-2depth-menu.on.fixed {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 100;
    }
    .category-2depth .category-2depth-menu.on.fixed .category-button-wrap {
        display: inline-block;
        padding: 2rem;
        height: 100%;
    }
    .category-2depth .category-2depth-menu.on.fixed .category-button-wrap li {
        display: inline-block;
    }
    .category-2depth .category-2depth-menu .category-button-wrap a {
        height: auto;
        min-height: 4rem;
    }
    .category-2depth .list-class-column .sub-info {
        display: none;
    }
    .category-2depth .list-class-column li > p {
        flex-basis: auto;
        margin-right: 2rem;
    }
    .category-2depth .list-class-column li > p::after {
        margin-left: 1rem;
    }
    .category-2depth .list-class-column .main-info {
        flex-basis: 80%;
        margin-right: 0;
    }
    .category-2depth .list-class-column .main-info .text-area {
        max-width: 70%;
    }
    .category-2depth .top-series-menu {
        top: 5.4rem;
    }
    /* category-2depth */

    /* manual */
    .manual {
        flex-wrap: wrap;
        padding: 0;
        max-height: -moz-max-content;
        max-height: max-content;
        min-height: auto;
        background: none;
        margin-top: 4rem;
        border-radius: 0.8rem; 
    }
    .manual .text-area {
        width: 100%;
        padding-left: 0;
        margin-bottom: 1.4rem;
    }
    .manual .text-area span {
        display: none;
    }
    .manual .text-area h5 {
        -webkit-line-clamp: 1;
        color: var(--body-color-black) !important;
    }
    .manual .img-area {
        width: 100%;
        height: auto;
    }
    .manual img {
        border-radius: 0.8rem;
        -o-object-fit: contain;
            object-fit: contain;
    }
    /* manual */

    /* myroom-top */
    .myroom-top {
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }
    .myroom-top .myroom-top-left {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }
    .myroom-top .myroom-top-left .stats_items_info {
        width: -moz-fit-content;
        width: fit-content;
        margin-top: 0;
    }
    .myroom-top .myroom-top-left .stats_items_info > div {
        margin-right: 1rem;
    }
    .myroom-top .myroom-top-right {
        width: 100%;
    }
    .myroom-top .myroom_content { 
        height: auto;
        max-height: 39rem;
    }
    /* myroom-top */

    /* myroom_item */
    .myroom_item .myroom_series_ul li > div {
        justify-content: space-between;
        height: 100%;
    }
    .myroom_item .myroom_series_ul .title {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    .myroom_item .myroom_series_ul .thumb-area {
        width: 30%;
        height: auto;
    }
    .myroom_item .myroom_series_ul .text-area {
        width: 70%;
        padding: 1rem;
    }
    .myroom_item .myroom_series_ul .text-area > div:first-child {
        flex-wrap: wrap;
        justify-content: end;
    }
    /* myroom_item */

    /* myroom-button-wrap */
    .myroom-button-wrap {
        flex-wrap:wrap;
        justify-content: flex-end;
        margin-top: 0;
    }
    .myroom-button-wrap .button-wrap {
        margin-bottom: 1rem;
    }
    /* myroom-button-wrap */
    .course-desc {
        min-height: auto;
    }
    /* board */
    .board {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .board-wrap { 
        width: 100%;
    }
    /* board */

    /* side-menu */
    .side-menu { 
        max-width: 100%;
        margin-bottom: 2rem;
    }
    /* side-menu */

    /* exam-top-status */
    .exam-top-status .search-form .select-box { 
        width: 12.5rem;
    }
    .exam-top-status .search-form .search-date { 
        width: calc(100% - 12.5rem);
    }
    /* exam-top-status */

    /* exam-item */
    .exam-item { 
        flex-wrap: wrap;
    }
    .exam-item .text-area { 
        width: 100%;
    }
    .exam-item .exam-button-wrap { 
        width: 100%;
        justify-content: flex-end;
        margin-top: 1rem;
    }
    /* exam-item */

    /* exam-top-progress */
    .exam-top-progress {
        top: 5.3rem;
    }
    /* exam-top-progress */

    /* remindertime */
    .remindertime .remindertime-wrap { 
        bottom: 7rem;
    }
    /* remindertime */

    /* seriesexam-top */
    .seriesexam-top {
        flex-wrap: wrap;
    }
    .seriesexam-top .title-area {
        width: 100%;
    }
    .seriesexam-top .seriesexam-result {
        width: 100%;
        margin-left: 0;
        margin-top: 2rem;
    }
    /* seriesexam-top */

    /* video-wrap */
    .video-wrap .player-certificate::after {
        width: 10rem;
        height: 10rem;
        background-size: 100%;
    }
    /* video-wrap */

    /* profile-top */
    .profile-top {
        padding: 4rem;
        flex-wrap: wrap;
    }
    .profile-top .user-info {
        width: 100%;
    }
    .profile-top .button-wrap {
        width: 100%;
        margin-top: 2rem;
    }
    .profile-top .button-wrap a {
        width: calc((100% - 1rem) / 2);
    }
    .profile-detail {
        padding: 4rem;
    }
    /* profile-top */

    /* setup-wrap */
    .setup-wrap {
        width: 90%;
        max-height: -moz-fit-content;
        max-height: fit-content;
        padding: 3rem 2rem;
        margin: 3rem auto;
    }
    /* setup-wrap */
    .mo-nav {  
        top: 5.4rem;
    }
    /* associate-fpkorea */
    .associate-fpkorea .fpkorea-footer-top > div,
    .associate-fpkorea .fpkorea-footer-policyarea .policyarea-wrap,
    .associate-fpkorea .fpkorea-footer-bottom .coop {
        padding-left: 2rem;
    }
    .associate-fpkorea .fpkorea-footer-bottom .coop {
        flex-wrap: wrap;
    }
    .associate-fpkorea .fpkorea-footer-policyarea .policy {
        padding-left: 0;
    }
    .associate-fpkorea img:first-child {
        margin-right: 0;
    }
    .associate-fpkorea .fpkorea-footer-top .fp_logo {
        margin-right: 2rem;
    }
    /* associate-fpkorea */

    /* search-ailearn */
    .search-ailearn.active .top {
        height: auto;
        padding: 1rem 0;
    }
    .search-ailearn.active .top .btn-more {
        margin-top: 0.5rem;
    }
    .search-ailearn.active .top .btn-more a {
        padding: 1rem 0;
    }
    .search-ailearn.active .top .text-wrap {
        width: 100%;
    }
    .search-ailearn .top {
        flex-wrap: wrap;
    }
    /* search-ailearn */

    /* que */
    .search-que .que {
        margin-bottom: 6rem;
    }
    .que-title {
        padding: 0 1rem;
    }
    .que-title .icon span {
        font-size: 1.2rem;
    }
    .que-title .title {
        width: 100%;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .que-title .title .logo {
        max-width: 8rem;
    }
    .search-que .result-recommend {
        margin-bottom: 6rem;
    }
    .que-answer .list-micro .text-area {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }
    .que-answer .list-micro .text-area .desc {
        display: none;
    }
    /* que */

    /* search-title */
    .search-title h5 {
        font-size: 2.4rem;
    }
    /* search-title */
}

@media all and (max-width: 620px) {
    /* hero */
    .hero {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: 3rem 2rem;
    }
    .hero .thumb-area {
        width: 100%;
        max-width: 53rem;
        min-width: -webkit-fit-content;
        min-width: -moz-fit-content;
        min-width: fit-content;
        max-height: 31.8rem;
        margin: 0 auto;
    }
    .hero .text-area {
        width: 100%;
        margin-top: 3rem;
    }
    .hero .text-area a {
        height: 4.4rem;
        padding: 1.3rem 5.5rem;
    }
    /* hero */
}

@media all and (max-width: 599px) {
    /* side */
    .mo-nav .user-info {
        padding: 3rem 4rem 8rem;
    }
    .mo-nav .user-info a {
        width: 80%;
        height: 4rem;
        left: 50%;
        right: 0;
        bottom: 2rem;
        font-size: 1.4rem;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    /* side */

    /* sendurl */
    .popup-sendurl .popup-title p {
        word-break: break-word;
    }
    .popup-sendurl .container > div {
    padding: 5rem 3rem 0;
    }
    .popup-sendurl .url-check {
    margin: 3rem 0;
    }
    .popup-sendurl .url-check p {
    text-align: left;
    }
    .popup-sendurl .form {
    flex-wrap: wrap;
    }
    .popup-sendurl .form:first-child {
    margin-top: 2rem;
    }
    .popup-sendurl .form span {
    margin-bottom: 1rem;
    }
    .popup-sendurl .form button {
    width: 8rem;
    }
    .popup-sendurl label {
    width: calc(100% - 4rem);
    text-align: left;
    word-break: break-word;
    }
    /* sendurl */

    /* qna */
    .qna .qna-date::before, .qna .qna-date::after {
        width: 13rem;
    }
    /* qna */

    /* category-1depth */
    .category-1depth li {
        width: calc(97% / 3); 
    }
    .category-1depth .category-1depth-lg {
        width: calc((97% / 3) * 2 + 1%);
    }
    /* category-1depth */

    /* category-2depth */
    .category-2depth .list-class-column li {
        height: auto;
    }
    .category-2depth .list-class-column li > p {
        display: block;
        flex-basis: auto;
        margin-right: 1rem;
        min-width: 3rem;
        text-align: center;
    }
    .category-2depth .list-class-column li > p::after {
        display: block;
        margin-left: 0;
        width: 1.5rem;
        height: 1rem;
        top: 1rem;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .category-2depth .list-class-column .main-info .thumb-area {
        -ms-flex-preferred-size: 10rem;
            flex-basis: 10rem;
        min-width: 10rem;
        margin-right: 1rem;
    }
    .category-2depth .list-class-column .main-info .text-area p {
        font-size: 1.4rem;
        line-height: 1.4;
    }
    /* category-2depth */

    /* myroom-top */
    .myroom-top .search-form {
        flex-wrap: wrap;
        height: auto;
    }
    .myroom-top .search-form .select-box {
        width: 100%;
        height: 4rem;
    }
    .myroom-top .search-form .select-box .select-box-list {
        top: 4rem;
    }
    .myroom-top .search-form .search-date {
        width: 100%;
        height: 4rem;
        justify-content: left;
        border: 1px solid var(--border-secondary);
    }
    .myroom-top .search-form .search-date .search-year .select-box-input-text {
        height: 3.94rem;
        border: none;
    }
    .myroom-top .search-form .search-date .search-month, 
    .myroom-top .search-form .search-date .search-year, 
    .myroom-top .search-form .search-date .search-period {
        width: 100%;
        height: 4rem;
        justify-content: left;
    }
    .myroom-top .search-form .search-date .search-month > div:first-child,
    .myroom-top .search-form .search-date .search-year > div:first-child,
    .myroom-top .search-form .search-date .search-period > div:first-child {
        padding: 1rem 1.5rem;
        height: 4rem;
    }
    .myroom-top .search-form .search-date input[type=date],
    .myroom-top .search-form .search-date input[type=month],
    .myroom-top .search-form .search-date input[type=number] {
        height: 3.82rem;
    }
    .myroom-top .search-form .search-date .search-year .select-box-input-text {
        height: 3.8rem;
        border: none;
        padding: .8rem 1.5rem;
    }
    .myroom-top .myroom_content .stats_items .right_items {
        width: 100%;
        justify-content: flex-end;
    }
    /* myroom-top */

    /* myroom_item */
    .myroom_item .myroom_series_ul li > div {
        flex-wrap: wrap;
    }
    .myroom_item .myroom_series_ul .thumb-area {
        width: 100%;
        height: 14rem;
        flex-basis: auto;
        padding-left: 0;
    }
    .myroom_item .myroom_series_ul .text-area {
        width: 100%;
    }
    /* myroom_item */

    /* memo-list */
    .memo-list li {
        flex-wrap: wrap;
    }
    .memo-list li .thumb-area {
        width: 100%;
        height: 100%;
        flex-basis: 100%;
    }
    .memo-list li .text-area {
        margin-left: 0;
        width: 100%;
        flex-basis: 100%;
        margin-top: 2rem;
    }
    .memo-list li .button-wrap {
        margin-top: 2rem;
    }
    .memo-list li .button-wrap a {
        height: 4rem;
        font-size: 1.4rem;
    }
    /* memo-list */

    /* search-index */
    .search-index .list-class li .thumb-area {
        flex-basis: 16rem;
    }
    .search-index .list-class li .thumb-area img {
        width: 16rem;
    }
    .search-index .sme-list li .thumb-area {
        flex-basis: 9rem;
    }
    .search-index .search-course .list-class li .text-area {
        flex-basis: calc(100% - 18rem);
        margin-left: 1rem;
        width: calc(100% - 23rem);
    }
    .search-index .list-class.list-materials li .thumb-area {
        height: auto;
    }
    /* search-index */

    /* search-ailearn */
    .search-ailearn .series .thumb-area {
        flex-basis: 13rem;
    }
    .search-ailearn .series .thumb-area img {
        width: 13rem;
    }
    .search-ailearn .series .text-area {
        width: calc(100% - 13rem);
        margin-left: 1rem;
    }
    /* search-ailearn */

    /* autocomplete */
    .ui-menu {
        width: 100% !important;
    }
    /* autocomplete */

    /* popup-exam */
    .popup-exam .container { 
        width: 90%;
    }
    .popup-exam .container .popup-wrap { 
        padding: 2rem;
    }
    /* popup-exam */

    /* popup-seriesexam */
    .popup-seriesexam .popup-content {
        padding: 0;
    }
    /* popup-seriesexam */

    /* popup-exam-completelist */
    .popup-exam-completelist .popup-content a {
        flex-wrap: wrap;
    }
    .popup-exam-completelist .popup-content .score {
        width: 100%;
    }
    .popup-exam-completelist .popup-content svg {
        position: absolute;
        right: 0;
    }
    /* popup-exam-completelist */

    /* exam-item */
    .exam-item .exam-detail li { 
        width: 100%;
    }
    .exam-item .exam-detail li:nth-child(n+3) { 
        margin-bottom: 0.6rem;
    }
    .exam-item .exam-detail li:last-child { 
        margin-bottom: 0;
    }
    /* exam-item */

    /* exam_content */
    .exam_content ul { 
        flex-wrap: wrap;
    }
    .exam_content li { 
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }
    .exam_content li:last-child { 
        margin-bottom: 0;
    }
    /* exam_content */

    /* exam-mcq-wrap */
    .exam-mcq-wrap .exam-answer .answers {
        padding: 1rem;
    }
    .exam-mcq-wrap .exam-answer label {
        padding: 0 0 0 3rem;
    }
    .exam-mcq-wrap .exam-answer.checkbox-answers input[type=checkbox], .exam-mcq-wrap .exam-answer.checkbox-answers label::before {
        left: 0.5rem;
    }
    .exam-mcq-wrap .exam-answer input[type=radio], .exam-mcq-wrap .exam-answer label::before {
        left: 0.5rem;
    }
    .exam-mcq-wrap .exam-answer svg {
        left: 0.5rem;
    }
    .exam-mcq .exam-button-wrap a { 
        width: 13rem;
        height: 4rem;
        font-size: 1.4rem;
    }
    /* exam-mcq-wrap */

    /* exam-button-wrap */
    .exam-button-wrap a { 
        width: 13rem;
    }
    /* exam-button-wrap */

    /* exam-top-status */
    .exam-top-status .search-form .select-box {
        width: 100%;
        height: 4rem;
    }
    .exam-top-status .search-form .search-date {
        width: 100%;
        justify-content: flex-start;
        border-top: none;
        border-left: 1px solid var(--border-secondary);
    }
    /* exam-top-status */

    /* seriesexam-top */
    .seriesexam-top .seriesexam-result .button-wrap a { 
        height: 4rem;
        font-size: 1.4rem;
    }
    /* seriesexam-top */

    /* feed-ranking */
    .feed-ranking p {
        width: 2rem;
    }
    .feed-ranking .thumb-area img {
        width: 12rem;
        height: 6.5rem;
    }
    /* feed-ranking */

    /* video-wrap */
    .video-wrap .player-control .box_rewind, .video-wrap .player-control .box_fast {
        width: 4rem;
    }
    .video-wrap .player-control .box_play {
        width: 8rem;
        margin: 0 1rem;
    }
    .video-wrap .player-watermark {
        padding: 1rem;
        font-size: 1.2rem;
    }
    .video-wrap .player-control {
        width: 18rem;
        height: 8rem;
    }
    .video-wrap .player-control .box-play {
        width: 9rem;
        margin: 0 2rem;
    }
    /* video-wrap */

    .video-info .info { 
        margin-bottom: 1.4rem;
    }

    /* profile */
    .profile .button-primary {
        height: 4rem;
        font-size: 1/4rem;
    }
    /* profile */

    /* profile-top */
    .profile-top {
        padding: 2rem;
    }
    .profile-top .thumb-area {
        width: 8rem;
        height: 8rem;
    }
    .profile-top .text-area {
        margin-left: 2rem;
    }
    .profile-top .button-wrap a {
        padding: 1.6rem;
        height: 4rem;
        font-size: 1.4rem;
    }
    /* profile-top */

    /* profile-detail */
    .profile-detail {
        padding: 2rem;
    }
    .profile-detail .form-wrap {
        flex-wrap: wrap;
    }
    .profile-detail .form-wrap > label {
        width: 9rem;
        flex-basis: 9rem;
        margin-right: 2rem;
    }
    .profile-detail .form-wrap > span {
        padding: 0;
    }
    .profile-detail input[type=text], .profile-detail input[type=email] {
        width: calc(100% - 11rem);
        padding: 1rem;
    }
    .profile-detail .select-box {
        width: calc(100% - 11rem);
    }
    .profile-detail .select-box .select-box-input-text {
        padding-left: 1rem;
    }
    .profile-detail .select-box .select-box-current svg {
        right: 1rem;
    }
    /* profile-detail */

    /* course-desc */
    .course-desc .info-contents {
        padding: 2rem;
    }
    .course-desc .course-instructor .instructor {
        margin: 1rem 0;
    }
    .course-desc .course-instructor p.keyword {
        padding: 0 0 1rem 0;
    }
    /* course-desc */

    /* download-app-content */
    .download-app-content { 
        width: 90vw;
        height: auto;
    }
    /* download-app-content */

    /* associate-footer */
    .associate-footer {
        height: 30rem;
    }
    /* associate-footer */

    /* que */
    .que-answer {
        padding: 2rem;
    }
    .que-answer .list-micro .text-area .title {
        max-width: 100%;
    }
    .que-answer .list-micro .text-area .desc {
        display: none;
    }
    .que-answer .item-list .list-class li .thumb-area {
        max-width: 16rem;
    }
    .que-answer .item-list .list-class li .text-area {
        width: calc(100% - 16rem);
    }
    .que-answer .info span {
        font-size: 1.2rem;
    }
    .que-answer .result {
        display: none;
    }
    /* que */
}

@media all and (max-width: 499px) {
    /* qna */
    .qna .qna-date::before, .qna .qna-date::after {
        width: 8rem;
    }
    .qna .qna-content-wrap {
        max-width: 23rem;
    }
    .qna .qna-content-wrap p {
        font-size: 1.4rem;
    }
    .qna .button-primary {
        padding: 0.7rem 1.4rem;
    }
    /* qna */

    /* relation-contents */
    .relation-contents .thumb-area {
        width: 13rem;
        height: 7.8rem;
    }
    .relation-contents .thumb-area img {
        width: 13rem;
        height: 7.8rem;
    }
    .relation-contents .text-area {
        width: calc(100% - 15rem);
    }
    /* relation-contents */

    /* myroom-top */
    .myroom-top .search-form .search-date .search-period input[type=date],
    .myroom-top .search-form .search-date .search-period input[type=month],
    .myroom-top .search-form .search-date .search-period input[type=number] {
        width: 9rem;
        padding: 1rem 0;
        background: none;
    }
    /* myroom-top */

    /* category-2depth */
    .category-2depth .list-class li { 
        width: calc((100% - 1.2rem) / 2);
    }
    .category-2depth .list-class li:nth-child(3n) { 
        margin-right: 1.2rem;
    }
    .category-2depth .list-class li:nth-child(2n) { 
        margin-right: 0;
    }
    /* category-2depth */

    /* content-detail */
    .content-detail .progress-summary .status-wrap {
        flex-wrap: wrap;
    }
    /* content-detail */
}

@media all and (max-width: 445px) {
    /* category-2depth */
    .category-2depth .recommend-list .select-box-list {
        top: 2rem;
    }
    /* category-2depth */
}

@media all and (max-width: 430px) {
    /* qna */
    .qna .qna-content-wrap {
        margin-bottom: 2.5rem;
    }
    .qna .qna-content-questioner span {
        left: 12.8rem;
        bottom: -1.6rem;
    }
    .qna .qna-content-helper span {
        right: 12.8rem;
        bottom: -1.6rem;
    }    
    /* qna */
}

/*QUE 검색 추가 분 시작*/
.search-index .search-base {
    padding: 2rem;
    background: #FFF;
    border: 1px solid var(--border-secondary);
    border-radius: .8rem;
}
.search-index .search-base .btn-wrap {
    width: 100%;
    padding: 1rem;
    text-align: center;
    border: 1px solid var(--border-secondary);
    border-radius: 1.8rem;
}

.search-index .search-base .btn-wrap:hover {
    background: var(--background-primary);
}

.search-index .search-base .btn-wrap a {
    display: inline-block;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
}

@media all and (max-width: 1440px) {
    .search-index .search-base .btn-wrap {
        margin-top: 3rem;
    }
}

header .center button {
    width: auto;
    height: auto;
}
.search-form > div {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .4rem;
}


.search-sme .sme-name {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: .4rem;
}
.search-sme .sme-name h6 {
    line-height: 1;
}
.search-sme .sme-name .info-tooltip {
    margin-top: 0;
}
.search-sme .sme-name .info-tooltip .tooltip {
    top: 2rem;
    left: 3rem;
}
.search-sme .sme-name .info-tooltip .tooltip span {
    display: inline-block;
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--body-color-black);
}

.search-course .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
  }
  
  .search-course .info .info-tooltip {
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 0;
  }
  
  .search-course .info .info-tooltip .tooltip {
    top: 2rem;
    left: 3rem;
  }
  
  .search-course .info .info-tooltip .tooltip span {
    display: inline-block;
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--body-color-black);
  }
  
  .related-search {
    position: relative;
    padding: 2rem;
    border-radius: .8rem;
    background: var(--background-tertiary);
  }
  
  .related-search > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 2rem;
  }
  
  .related-search .item-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: .6rem;
  }
  
  .related-search .item-related li {
    margin-top: 0;
  }
  
  .item.semantic {
    margin-top: 3.2rem;
  }
  
  .item.semantic .list-semantic ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    gap: 2rem;
  }
  
  .item.semantic .list-semantic ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 49%;
    gap: 1.6rem;
  }
  
  .item.semantic .list-semantic ul p {
    word-break: break-all;
  }
  
  .item.semantic .list-semantic ul .thumb-area {
    width: 100%;
    max-width: 22rem;
  }
  
  .item.semantic .list-semantic ul .thumb-area img {
    aspect-ratio: 5 / 3;
    border-radius: .4rem;
  }
  
  .item.semantic .list-semantic ul .text-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: calc(100% - 23.6rem);
  }
  
  .item.semantic .list-semantic ul .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
  }
  
  .item.semantic .list-semantic ul .time span {
    position: relative;
    display: inline-block;
    -ms-flex-line-pack: center;
        align-content: center;
    max-width: 5.8rem;
    max-height: 2rem;
    padding: 1px 4px;
    font-size: 1.2rem;
    font-style: normal;
    border-radius: 0.2rem;
    color: var(--accent-color);
  }
  
  .item.semantic .list-semantic ul .time span::before {
    content: "";
    position: absolute;
    display: inline-block;
    -ms-flex-line-pack: center;
        align-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    font-style: normal;
    color: #fff;
    z-index: 2;
    opacity: 0.1;
    background: var(--accent-color);
    border-radius: 0.2rem;
  }
  
  .item.semantic .list-semantic ul .name p {
    font-size: 1.4rem;
    font-weight: 500;
  }
  
  .item.semantic .list-semantic ul .title p {
    font-size: 1.2rem;
  }
  
  .item.semantic .list-semantic ul .summary p {
    font-size: 1.2rem;
    color: var(--body-color-black2);
  }
  
  .item.semantic .item-list {
    padding: 3.2rem 1.6rem;
  }
  
  /* 토글 버튼 */
  .search-form .que-toggle-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 1rem;
  }
  
  .search-form .que-toggle-container .toggle-switch {
    position: relative;
    width: 4.4rem;
    height: 2.3rem;
  }
  
  .search-form .que-toggle-container .toggle-switch input {
    display: none;
  }
  
  .search-form .que-toggle-container .slider {
    position: absolute;
    cursor: pointer;
    background-color: #E7EAEC;
    border-radius: 3rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: -webkit-box-shadow 0.3s;
    transition: -webkit-box-shadow 0.3s;
    transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
  }
  
  .search-form .que-toggle-container .slider .icon-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    height: 2.1rem;
    width: 2.1rem;
    left: 1px;
    bottom: 1px;
    background-color: #fff;
    border-radius: 50%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }
  
  .search-form .que-toggle-container .slider .icon-wrap .icon {
    position: absolute;
    height: 100%;
  }
  
  .search-form .que-toggle-container input:checked + .slider {
    background-color: #F5791B;
    -webkit-animation: border-effect 2s;
            animation: border-effect 2s;
  }
  
  .search-form .que-toggle-container input:checked + .slider .icon-wrap {
    -webkit-transform: translateX(21px);
            transform: translateX(21px);
  }
  
  .search-form .que-toggle-container input:checked + .slider .icon.inactive {
    display: none;
  }
  
  .search-form .que-toggle-container input:checked + .slider .icon.active {
    display: block;
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
  }
  
  /*.search-form .search-basic-wrap {
    display: none;
  }*/
  
  @-webkit-keyframes border-effect {
    0%, 100% {
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    20% {
      -webkit-box-shadow: 0px 0px 3px #FB5F6B;
              box-shadow: 0px 0px 3px #FB5F6B;
    }
  }
  
  @keyframes border-effect {
    0%, 100% {
      -webkit-box-shadow: none;
              box-shadow: none;
    }
    20% {
      -webkit-box-shadow: 0px 0px 3px #FB5F6B;
              box-shadow: 0px 0px 3px #FB5F6B;
    }
  }
  
  /* 토글 버튼 */
  /* QUE 툴팁 */
  .info-tooltip {
    height: 1.6rem;
  }
  
  .info-tooltip .info-icon {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }
  
  .info-tooltip .info-icon:hover + .tooltip,
  .info-tooltip .info-icon:focus + .tooltip {
    opacity: 1;
    pointer-events: auto;
  }
  
  .info-tooltip .tooltip {
    position: absolute;
    top: 6rem;
    left: 6rem;
    background: var(--background-tertiary);
    color: var(--body-color-black2);
    font-size: 1.2rem;
    padding: 1rem 2rem;
    border-radius: .4rem;
    -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-secondary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    z-index: 1000;
    min-width: 280px;
    width: max-content;
  }
  
  /* QUE 툴팁 */
  /* 스켈레톤 */
  .skeleton-thumbnail {
    border-radius: .4rem;
  }
  
  .skeleton-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
  
  .skeleton-line {
    height: 1.8rem;
    border-radius: .4rem;
  }
  
  .skeleton-line.short {
    width: 6rem;
  }
  
  .skeleton-line.medium {
    width: 60%;
  }
  
  .skeleton-line.long {
    width: 100%;
  }
  
  .skeleton-line.long.height {
    height: 100%;
    min-height: 6rem;
  }
  
  .shimmer {
    background: linear-gradient(100deg, #e9eef3 30%, #f3f6f9 50%, #e9eef3 70%);
    background-size: 200% 100%;
    filter: opacity(.7);
    -webkit-filter: opacity(0.3);
            filter: opacity(0.3);
    -webkit-animation: shimmer 3s infinite ease-in-out;
            animation: shimmer 3s infinite ease-in-out;
  }
  
  @-webkit-keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }
  /* 스켈레톤 */
header .center .search-index {
    z-index: 10;
}

header .center .search-panel {
    z-index: 10;
}
.info-tooltip .tooltip {
    z-index: 9;
}
.result-recommend ul {
    margin-top: 1rem;
    gap: 1rem;
}
.related-search.result-recommend ul {
    margin-top: 0;
}
.search-index .list-class.list-materials ul {
    margin-bottom: 3rem;
}

.result-recommend li {
    margin-top: 0;
    margin-right: 0;
}

.item.semantic .list-semantic ul {
    gap: 1.6rem;
}
.item.semantic .list-semantic ul li {
    width: calc((100% - 1.6rem) / 2);
}
.shimmer {
    filter: opacity(1);
}

@media all and (max-width: 699px) {
    header .center .search-form {
        width: 10rem;
    }
}

.search-course .info .info-tooltip .tooltip span {
    display: inline-block;
    margin-top: 0;
    margin-right: 0;
    font-size: 1.2rem;
    color: var(--body-color-black);
}

@media (max-width: 992px) {
    header .center .search-form {
	width: 36rem;  
    }
}

.search-form .que-toggle-container .toggle-switch {
    position: relative;
    width: 4rem;
    height: 2.3rem;
  }
.search-form .que-toggle-container input:checked + .slider {
    background-color: #F39800;
    animation: border-effect 2s;
}

.search-form .que-toggle-container input:checked + .slider .icon-wrap {
    transform: translateX(17px);
}

@keyframes border-effect {
    0%, 100% {
        box-shadow: none;
    }
    20% {
        box-shadow: 0px 0px 5px #F39800;
    }
}

.search-form .que-toggle-container input:checked + .slider .icon.inactive svg {
  display: none;
  filter: grayscale(1);
}

.search-form .que-toggle-container .slider .icon-wrap .icon.active {
    display: none;
}
/*QUE 검색 추가 분 끝*/