@charset "UTF-8";
#app[data-v-9bc1b669] {
    position: relative
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block
}

body {
    line-height: 1;
    font-size: 16px
}

ol,ul {
    list-style: none
}

blockquote,q {
    quotes: none
}

blockquote:before,blockquote:after,q:before,q:after {
    content: "";
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

button {
    border: none;
    border-spacing: 0
}

@font-face {
    font-family: SUIT;
    font-weight: 100;
    src: url(/assets/SUIT-Thin-3KsqJI74.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 200;
    src: url(/assets/SUIT-ExtraLight-C_JB8_pO.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 300;
    src: url(/assets/SUIT-Light-CWS5NPXu.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 400;
    src: url(/assets/SUIT-Regular-BjNCoVGS.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 500;
    src: url(/assets/SUIT-Medium-seT91sFI.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 600;
    src: url(/assets/SUIT-SemiBold-Cy_TvstK.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 700;
    src: url(/assets/SUIT-Bold-S798tSeG.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 800;
    src: url(/assets/SUIT-ExtraBold-dMS1Sst2.woff2) format("woff2")
}

@font-face {
    font-family: SUIT;
    font-weight: 900;
    src: url(/assets/SUIT-Heavy-C74-xuXN.woff2) format("woff2")
}

@keyframes NoneAni {
    0% {
        opacity: 1
    }

    to {
        opacity: 1
    }
}

@keyframes Opacity {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes FadeUp {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes FadeDown {
    0% {
        opacity: 0;
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes FadeLeft {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(-50%)
    }
}

@keyframes FadeRight {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes Progress {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes FoldBanner {
    0% {
        height: 5rem
    }

    to {
        height: 0
    }
}

@keyframes GnbDropdown {
    0% {
        opacity: 0;
        transform: translateY(-5%)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes MoGnbLeft {
    0% {
        opacity: 0;
        transform: translate(100%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: SUIT,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,sans-serif!important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

html.fixed,body.fixed {
    height: 100vh;
    overflow: hidden
}

@media (max-width: 1023px) {
    html[viewtype=desktop],body[viewtype=desktop] {
        font-size:10px;
        min-width: 1024px;
        max-width: 1280px
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html[viewtype=desktop],body[viewtype=desktop] {
        font-size:10px
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    html[viewtype=desktop],body[viewtype=desktop] {
        font-size:clamp(10px,.85vw,12px)
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    html[viewtype=desktop],body[viewtype=desktop] {
        font-size:clamp(12px,.75vw,16px)
    }
}

@media (min-width: 1920px) {
    html[viewtype=desktop],body[viewtype=desktop] {
        font-size:16px
    }
}

html[viewtype=desktop] section .section-wrapper,body[viewtype=desktop] section .section-wrapper {
    padding: 5rem;
    max-width: 1920px;
    margin: 0 auto
}

html[viewtype=desktop] section .section-wrapper.base-width,body[viewtype=desktop] section .section-wrapper.base-width {
    max-width: 1200px;
    padding-left: unset;
    padding-right: unset
}

html[viewtype=desktop] article,body[viewtype=desktop] article {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 3.75rem;
    padding-bottom: 7.5rem;
    min-height: calc(100vh - 4.5rem)
}

@media (max-width: 1280px) {
    html[viewtype=desktop] article,body[viewtype=desktop] article {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

html[viewtype=mobile],body[viewtype=mobile] {
    max-width: 768px;
    margin: 0 auto
}

html[viewtype=mobile].fixed,body[viewtype=mobile].fixed {
    width: 100vw;
    height: 100vh;
    position: relative;
    touch-action: none;
    overflow: hidden
}

@media (max-width: 1023px) {
    html[viewtype=mobile],body[viewtype=mobile] {
        font-size:16px
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html[viewtype=mobile],body[viewtype=mobile] {
        font-size:16px
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    html[viewtype=mobile],body[viewtype=mobile] {
        font-size:16px
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    html[viewtype=mobile],body[viewtype=mobile] {
        font-size:16px
    }
}

@media (min-width: 1920px) {
    html[viewtype=mobile],body[viewtype=mobile] {
        font-size:16px
    }
}

html body * {
    line-height: 1.5;
}

html[viewtype=mobile] .main-wrapper,body[viewtype=mobile] .main-wrapper {
    border: 1px solid #bfbfbf;
    position: relative
}

html[viewtype=mobile] main,body[viewtype=mobile] main {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

html[viewtype=mobile] section .section-wrapper,body[viewtype=mobile] section .section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 2.5rem 1.25rem;
    max-width: 768px
}

html[viewtype=mobile] article,body[viewtype=mobile] article {
    padding: 2.5rem 1.25rem 5rem;
    min-height: calc(100vh - 7.8125rem)
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700
}

h1 {
    font-size: 3.75rem
}

h2 {
    font-size: 3.375rem
}

h3 {
    font-size: 3rem
}

h4 {
    font-size: 2rem
}

h5 {
    font-size: 1.5rem
}

h6 {
    font-size: 1.125rem
}

.main-wrapper {
    position: relative
}

main {
    min-height: 100vh
}

b {
    font-weight: 700
}

p {
    font-size: 1rem;
    line-height: 1.5
}

p.h7,p.h8 {
    font-weight: 700
}

a {
    font-size: 1rem;
    color: unset;
    text-decoration: unset
}

span {
    font-size: 1rem;
    font-size: inherit
}

table {
    font-size: 1rem
}

ul.dot-style {
    list-style: none
}

ul.dot-style li:before {
    content: "•";
    margin-right: .25rem
}

img {
    display: block;
    width: 100%;
    height: 100%
}

button {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: fit-content;
    line-height: 1.5;
    background: #fff
}

input,select,textarea {
    font-family: SUIT;
    flex: 1;
    font-size: 1rem;
    border: none;
    outline: none;
    line-height: 1.5
}

input::placeholder,select::placeholder,textarea::placeholder {
    color: #bfbfbf
}

svg {
    display: flex!important
}

i.required {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    font-size: .875rem;
    color: red
}

span.line {
    display: block;
    width: 100%;
    height: 1px;
    background: #d9d9d9
}

.grid {
    display: grid;
    grid-template-columns: repeat(12,1fr)
}

.col-1 {
    grid-column-end: span 1
}

.row-1 {
    grid-row-end: span 1
}

.col-2 {
    grid-column-end: span 2
}

.row-2 {
    grid-row-end: span 2
}

.col-3 {
    grid-column-end: span 3
}

.row-3 {
    grid-row-end: span 3
}

.col-4 {
    grid-column-end: span 4
}

.row-4 {
    grid-row-end: span 4
}

.col-5 {
    grid-column-end: span 5
}

.row-5 {
    grid-row-end: span 5
}

.col-6 {
    grid-column-end: span 6
}

.row-6 {
    grid-row-end: span 6
}

.col-7 {
    grid-column-end: span 7
}

.row-7 {
    grid-row-end: span 7
}

.col-8 {
    grid-column-end: span 8
}

.row-8 {
    grid-row-end: span 8
}

.col-9 {
    grid-column-end: span 9
}

.row-9 {
    grid-row-end: span 9
}

.col-10 {
    grid-column-end: span 10
}

.row-10 {
    grid-row-end: span 10
}

.col-11 {
    grid-column-end: span 11
}

.row-11 {
    grid-row-end: span 11
}

.col-full {
    grid-column: 1/-1
}

.flex {
    display: flex!important
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

.color-O100 {
    color: #ff8400
}

.color-R100 {
    color: red
}

.ellipsis-1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

.link-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

.link-item>p {
    color: #333
}

.link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-bottom: 1px solid #ff8400;
    font-weight: 700;
    color: #ff8400;
    gap: .25rem
}

.link a {
    font-weight: 700;
    color: #ff8400
}

.link svg {
    color: #ff8400
}

.button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

svg {
    color: #000
}

#Main {
    background: #fff
}

#Main .section-wrapper {
    display: grid;
    grid-template-columns: repeat(1,4fr 3fr);
    padding-top: 1.25rem;
    gap: 3.75rem
}

#Main .main-swiper {
    position: relative;
    border-radius: 1.25rem;
    width: 100%;
    height: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    flex: 1
}

#Main .main-swiper .swiper {
    height: 100%;
    background: #efefef
}

#Main .main-swiper .swiper .swiper-button-prev,#Main .main-swiper .swiper .swiper-button-next {
    width: 2.5rem;
    height: 2.5rem;
    top: unset;
    bottom: 6.25rem;
    color: #333;
    font-weight: 700;
    background: unset
}

#Main .main-swiper .swiper .swiper-button-prev:after,#Main .main-swiper .swiper .swiper-button-next:after {
    font-size: 1.25rem
}

#Main .main-swiper .swiper .swiper-button-prev {
    left: 3.75rem
}

#Main .main-swiper .swiper .swiper-button-next {
    left: 12rem
}

#Main .main-swiper .swiper .swiper-pagination {
    width: 2.875rem;
    height: 4.25rem;
    bottom: 5.5rem;
    left: 7.75rem;
    font-size: 2rem
}

#Main .main-swiper .swiper .swiper-pagination .swiper-pagination-current {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #ff8400
}

#Main .main-swiper .swiper .swiper-pagination .slash {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%,-50%);
    display: flex;
    width: 2.625rem;
    height: 1px;
    background: #666;
    rotate: -45deg
}

#Main .main-swiper .swiper .swiper-pagination .swiper-pagination-total {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1rem;
    color: #666
}

#Main .main-swiper .contents {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    position: absolute;
    top: 50%;
    left: 3.75rem;
    transform: translateY(-50%);
    max-width: 33rem;
    word-break: keep-all
}

#Main .main-swiper .contents h3 {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#Main .main-swiper .contents p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: 1.5rem;
    color: #666
}

#Main .quick-group {
    gap: 1.25rem;
    flex: 1;
    width: 100%;
    max-width: 45rem;
    overflow: hidden
}

#Main .quick-group .quick-button {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    padding: 1.5rem;
    background: #efefef
}

#Main .quick-group .quick-button .content-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    color: #333
}

#Main .quick-group .quick-button .content-body {
    flex: 1;
    color: #666
}

#Main .quick-group .quick-button .content-body p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: 1.125rem;
    word-break: keep-all
}

#Main .quick-group .quick-button .content-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto;
    gap: .25rem;
    color: #333
}

#Main .quick-group .quick-button:hover {
    background: #ff8400
}

#Main .quick-group .quick-button:hover .content-header,#Main .quick-group .quick-button:hover .content-body,#Main .quick-group .quick-button:hover .content-footer {
    color: #fff
}

#Main .quick-group .quick-button:hover .content-header svg,#Main .quick-group .quick-button:hover .content-body svg,#Main .quick-group .quick-button:hover .content-footer svg {
    color: #fff
}

#Main .quick-group .quick-button:hover .content-footer svg {
    border-radius: 50%;
    color: #ff8400;
    background: #fff
}

#ScrollContents {
    background: #f5f5f7
}

#ScrollContents .section-wrapper {
    padding: unset
}

#ScrollContents .box-holder {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 125rem;
    position: relative
}

#ScrollContents .box-holder h3 {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#ScrollContents .box-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    padding: 5rem;
    width: 100%;
    height: unset;
    margin: 0 auto;
    gap: 3rem;
    position: absolute;
    top: 0;
    min-height: 610px;
    overflow: hidden;
    z-index: 1
}

#ScrollContents .box-inner:before {
    content: "";
    position: absolute;
    top: 0;
    right: -1.125rem;
    width: 23.875rem;
    height: 12.75rem;
    background: url(https://www.metademy.ac/assets/right_top-v2pVinEY.png) no-repeat center center;
    background-size: contain
}

#ScrollContents .box-inner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35.125rem;
    height: 25.625rem;
    background: url(https://www.metademy.ac/assets/left_bottom-Cck0CVFO.png) no-repeat center center;
    background-size: contain;
    z-index: -1
}

#ScrollContents .box-inner.fixed {
    position: sticky;
    top: 4.5rem;
    margin: 0 auto;
    padding-left: 5rem;
    padding-right: 5rem
}

#ScrollContents .box-inner.fixed-end {
    position: absolute;
    top: unset;
    bottom: 0;
    padding: 5rem
}

#ScrollContents .group {
    display: grid;
    grid-template-columns: 23rem 1fr;
    width: 100%
}

#ScrollContents .controller {
    display: flex;
    flex-direction: column;
    column-count: auto;
    gap: 1.25rem;
    text-align: left
}

#ScrollContents .controller li {
    cursor: pointer
}

#ScrollContents .controller li.on h5 {
    color: #ff8400
}

#ScrollContents .controller li.on span {
    display: block;
    color: #666
}

#ScrollContents .controller li h5 {
    color: #bfbfbf
}

#ScrollContents .controller li span {
    font-size: 1rem;
    display: none
}

#ScrollContents .contents {
    height: 38.125rem;
    overflow: hidden
}

#ScrollContents .contents .content-item {
    opacity: 0;
    transition: opacity .3s
}

#ScrollContents .contents .content-item .card-group {
    gap: 2.5rem;
    height: 38.125rem
}

#ScrollContents .contents .content-item .card-group>div:nth-child(2) {
    margin-top: 2.5rem
}

#ScrollContents .contents .content-item .card-group #ContentCard {
    height: fit-content
}

#ScrollContents .contents .content-item.on {
    opacity: 1
}

#ScrollContents .contents .content-item:nth-child(1).on {
    transform: translateY(-.01%)
}

#ScrollContents .contents .content-item:nth-child(2).on {
    transform: translateY(-100%)
}

#ScrollContents .contents .content-item:nth-child(3).on {
    transform: translateY(-200%)
}

#ScrollContents .contents h1 {
    font-size: 1.5rem;
    margin: unset
}

#MiddleBanner {
    background: #202b45
}

#MiddleBanner .section-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    width: 100%;
    height: 21.875rem;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem
}

@media (max-width: 1280px) {
    #MiddleBanner .section-wrapper {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

#MiddleBanner .content-left {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    flex: 1;
    gap: 1rem;
    color: #fff
}

#MiddleBanner .content-left>p {
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#MiddleBanner .content-right .youtube-thumb {
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    min-width: 25rem;
    min-height: 14.375rem;
    aspect-ratio: 4/2.25;
    background: #fff;
    overflow: hidden
}

#Merit {
    position: relative;
    background: #ff8400
}

#Merit .section-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem;
    min-height: 47.5rem;
    z-index: 1
}

#Merit .section-wrapper .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#Merit .section-wrapper .button-group #Button {
    min-width: unset;
    min-height: unset
}

#Merit .section-wrapper h3 {
    color: #fff
}

#Merit .section-wrapper .tab-contents {
    padding-top: 2.25rem
}

#Merit .section-wrapper .tab-contents .contents {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem;
    display: none
}

#Merit .section-wrapper .tab-contents .contents.active {
    display: flex
}

#Merit .section-wrapper .tab-contents .content-box {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 2rem;
    border-radius: .75rem;
    gap: .25rem;
    flex: 1;
    background: #fff;
    width: 23.375rem;
    min-width: 23.375rem;
    word-break: keep-all
}

#Merit .section-wrapper .tab-contents .content-box p {
    font-size: 1.5rem;
    color: #ff8400
}

#Merit .section-wrapper .tab-contents .content-box h5 {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#Merit .section-wrapper .tab-contents .content-box .context {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: 1rem;
    height: 7.25rem
}

#Merit .bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    object-fit: contain
}

#PracticeContents {
    background: #f5f5f7
}

#PracticeContents .section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 3.75rem
}

#PracticeContents .card-group {
    gap: 2.5rem
}

#PracticeContents .text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#PracticeContents .text-group p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: 1.5rem;
    color: #666;
    text-align: center
}

#BottomBanner {
    position: relative;
    background: #d5dfeb
}

#BottomBanner .section-wrapper {
    position: relative;
    min-height: 22.5rem;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem
}

@media (max-width: 1280px) {
    #BottomBanner .section-wrapper {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

#BottomBanner .section-wrapper .content-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    flex: 1;
    z-index: 1
}

#BottomBanner .section-wrapper .content-text .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#BottomBanner .section-wrapper .content-text .item-group>p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: 1rem
}

#BottomBanner .section-wrapper .content-text .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#BottomBanner .bg-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    object-fit: contain
}

.step-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#RegistView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#TermsAgree {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 3.75rem;
    width: 40rem;
    margin: 0 auto
}

#TermsAgree #Agreement {
    padding-top: 0;
    padding-bottom: 0;
    min-height: unset;
    word-wrap: break-word;
    word-break: keep-all
}

#TermsAgree #Agreement #PageHeader {
    display: none
}

#TermsAgree .box-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    width: 100%;
    height: 100%
}

#TermsAgree .box-item .input-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#TermsAgree .box-item .input-item:not(:first-child) {
    gap: .75rem
}

#TermsAgree .box-item .input-item>p {
    font-size: .875rem;
    padding-left: 1.875rem;
    color: #909090
}

#TermsAgree .box-item .include-context {
    padding: .75rem 1rem;
    border-radius: .75rem;
    padding-right: 0;
    background: #f5f5f7;
    max-height: 7.5rem;
    overflow: auto
}

#TermsAgree .box-item ::-webkit-scrollbar {
    width: 1.25rem
}

#TermsAgree .box-item ::-webkit-scrollbar-thumb {
    border: 7px solid #f5f5f7;
    border-radius: .75rem;
    background: #d9d9d9
}

#TermsAgree .box-item ::-webkit-scrollbar-track {
    background: #f5f5f7;
    border-radius: 6.25rem
}

#TermsAgree .box-item #Checkbox input:checked+label .custom-checkbox {
    background: #ff8400;
    border: 1px solid #ff8400
}

#TermsAgree .box-item #Checkbox input:checked+label .custom-checkbox svg {
    opacity: 1;
    color: #fff
}

#VerificationType {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#VerificationType .box-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#VerificationType .box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    padding: 2.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    max-width: 20rem;
    gap: 1.5rem
}

#VerificationType .box-item .text-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    text-align: center
}

#VerificationType .box-item .text-item p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#VerificationType .box-item .text-item p:first-child {
    color: #000;
    font-size: 1.125rem;
    font-weight: 700
}

#VerificationType .box-item .text-item p:last-child {
    color: #666
}

#RegistInputForm {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto
}

#RegistInputForm .user-info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#RegistInputForm .user-info-form .input-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    max-width: 30rem;
    margin-bottom: .75rem
}

#RegistInputForm .user-info-form .input-group:last-child {
    margin-bottom: 0
}

#RegistInputForm .selected-info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#RegistInputForm .selected-info-form h5 {
    font-size: 1rem
}

#RegistInputForm .selected-info-form .input-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#RegistInputForm .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#CompleteRegist {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#CompleteRegist .item-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    text-align: center
}

#CompleteRegist .item-group .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#CompleteRegist .item-group p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: 1.125rem;
    color: #666
}

#CompleteRegist .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#RegistTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#RegistTable th {
    padding: .75rem 2.5rem;
    width: 20rem;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9
}

#RegistTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#RegistTable td #LineButton {
    min-width: unset;
    min-height: unset
}

#RegistTable td #Input {
    width: 100%;
    max-width: 17.5rem
}

#RegistTable td #Checkbox .text p {
    font-weight: 400
}

#LoginView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#LoginView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%
}

#LoginView .tabs-group #Tab {
    flex: 1
}

#LoginView .tab-contents {
    width: 100%
}

#LoginView .tab-contents .contents-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    min-height: 35.625rem
}

#LoginView .tab-contents .contents-wrapper .text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    width: 100%
}

#LoginView .tab-contents .contents-wrapper .text-group p {
    font-size: 1.125rem;
    color: #666
}

#LoginView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#LoginView .bottom .link-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#LoginView .bottom .link-group .sign-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    font-size: .875rem
}

#LoginView .bottom .link-group .sign-menu li {
    position: relative
}

#LoginView .bottom .link-group .sign-menu li:after {
    position: absolute;
    top: 52%;
    right: -.75rem;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 1rem;
    background: #d9d9d9
}

#LoginView .bottom .link-group .sign-menu li:last-child:after {
    display: none
}

#LoginView .bottom .link-group .go-to-regist {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    font-size: .875rem
}

#LoginView .bottom .link-group .go-to-regist a {
    font-weight: 700;
    color: #ff8400;
    text-decoration: underline
}

#LoginView #EasyLogin {
    width: 100%;
    height: 15rem;
    background: #bfbfbf
}

#LoginView #IDPWLogin {
    width: 33.75rem
}

#LoginView #IDPWLogin .item-box {
    padding: 3.75rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem
}

#LoginView #IDPWLogin .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#LoginView #IDPWLogin #Checkbox .text p {
    font-weight: 400
}

#LoginView #QRLogin {
    width: 33.75rem
}

#LoginView #QRLogin .item-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    padding: 3.75rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    gap: 1.5rem;
    width: 100%
}

#LoginView #QRLogin .item-box .box-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    width: 100%
}

#LoginView #QRLogin .item-box .box-top .qr-img {
    width: 10rem;
    height: 10rem
}

#LoginView #QRLogin .item-box .box-top .text-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    flex: 1;
    gap: .25rem
}

#LoginView #QRLogin .item-box .box-top .text-item .counter-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#LoginView #QRLogin .item-box .box-top .text-item .counter-text.text-center {
    text-align: center
}

#LoginView #QRLogin .item-box .box-top .text-item p.couter-number {
    font-size: 1.125rem;
    font-weight: 700;
    color: #ff8400
}

#LoginView #QRLogin .item-box .box-top .text-item #Button {
    width: 5.875rem
}

#LoginView #QRLogin .item-box .box-top .text-item #Button p {
    font-size: .875rem
}

#LoginView #QRLogin .item-box .box-top.expiry .text-item p.couter-number {
    color: #ff4d4d
}

#LoginView #QRLogin .item-box .box-bottom {
    text-align: center
}

#DownloadView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#DownloadView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#DownloadView .tabs-group #Tab {
    flex: 1
}

#DownloadView .content {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#DownloadView .download-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    padding: 1.5rem;
    border-radius: .75rem;
    background: #fff5eb;
    text-align: center
}

#DownloadView .download-info-box p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#DownloadView .specs-info {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#SearchResultsView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    padding-bottom: 7.5rem
}

#SearchResultsView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem;
    width: 100%
}

#SearchResultsView .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    width: 100%
}

#SearchResultsView .contents-list {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    position: relative
}

#SearchResultsView .contents-list .list-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#SearchResultsView .contents-list .list-title h5 {
    width: 100%
}

#SearchResultsView .contents-list .list-title .button-group {
    width: unset
}

#SearchResultsView .card-group {
    gap: 2.5rem
}

#SearchResultsView .card-group.swiper {
    position: unset;
    margin: unset
}

#SearchResultsView .card-group.swiper .swiper-button-prev,#SearchResultsView .card-group.swiper .swiper-button-next {
    width: 2.25rem;
    height: 2.25rem;
    top: 0;
    margin: unset
}

#SearchResultsView .card-group.swiper .swiper-button-prev:after,#SearchResultsView .card-group.swiper .swiper-button-next:after {
    font-size: 1.25rem;
    color: #000
}

#SearchResultsView .card-group.swiper .swiper-button-prev {
    left: unset;
    right: 4rem
}

#SearchResultsView .card-group .card {
    border: 1px solid #d9d9d9
}

#NotFoundView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#NotFoundView .not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 3.75rem;
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #d9d9d9
}

#NotFoundView .not-found .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#NotFoundView .not-found .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#NotFoundView .not-found .top p {
    font-size: 1.125rem;
    color: #666
}

#CSCenterView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#CSCenterView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#CSCenterView #Tab {
    width: auto;
    height: auto;
    flex: 1
}

#CSCenterView .filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#CSCenterView .filter-group .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#CSCenterView .filter-group .right #SearchBar {
    width: 17.5rem
}

#CSCenterView .filter-group .right #Dropdown .dropdown-selected {
    width: 10rem
}

#CSNotiView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#CSNotiView .filter-group #Dropdown .dropdown-selected {
    width: 10rem
}

#CSNotiView .table-group,#CSNotiDetailView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#CSNotiDetailView ::-webkit-scrollbar {
    width: 1.25rem
}

#CSNotiDetailView ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#CSNotiDetailView ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

#CSNotiDetailView .noti-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 4.5rem;
    border-top: 2px solid #333333;
    font-weight: 700;
    background: #f5f5f7
}

#CSNotiDetailView .noti-header>* {
    flex: 1;
    padding-left: 2rem;
    padding-right: 2rem
}

#CSNotiDetailView .noti-header>*:nth-child(2) {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 7.5rem
}

#CSNotiDetailView .noti-header>*:nth-child(3) {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 10rem
}

#CSNotiDetailView .noti-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    padding: 1.5rem 2.5rem;
    min-height: 50rem;
    max-height: 50rem;
    overflow: auto
}

#CSNotiDetailView .noti-body p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#CSNotiDetailView .noti-attachments {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    height: 4.5rem
}

#CSNotiDetailView .noti-attachments p {
    flex: 1;
    max-width: 10rem
}

#CSNotiDetailView .noti-attachments p:first-child {
    font-weight: 700;
    text-align: center
}

#CSNotiDetailView .noti-attachments p:last-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#CSNotiDetailView .detail-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9
}

#CSNotiDetailView .detail-bottom .post-nav {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    width: 31.25rem
}

#CSNotiDetailView .detail-bottom .post-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #bfbfbf;
    color: #fff
}

#CSNotiDetailView .detail-bottom .post-nav .text-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: .75rem;
    padding-bottom: .75rem;
    gap: .75rem
}

#CSNotiDetailView .detail-bottom .post-nav .text-item p {
    min-height: 1.5rem
}

#CSNotiDetailView .detail-bottom .post-nav .text-item p:first-child {
    font-weight: 700
}

#CSNotiDetailView .detail-bottom .post-nav .text-item p:last-child {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 26.875rem
}

#CSNotiDetailView .detail-bottom .post-nav.post-prev .text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    column-count: auto
}

#CSNotiDetailView .detail-bottom .post-nav.post-prev .text-item p:last-child {
    text-align: left
}

#CSNotiDetailView .detail-bottom .post-nav.next-prev {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto
}

#CSNotiDetailView .detail-bottom .post-nav.next-prev .text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    column-count: auto
}

#CSNotiDetailView .detail-bottom .post-nav.next-prev .text-item p:last-child {
    text-align: right
}

#CSNotiDetailView .detail-bottom #LineButton {
    min-width: 9.25rem
}

#EventView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#EventView .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#EventCard {
    position: relative;
    border-radius: .75rem
}

#EventCard .card-container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    gap: .75rem;
    position: absolute;
    top: 0;
    left: 0
}

#EventCard .card-container .card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#EventCard .card-container .card-header .status {
    padding: .5rem 1rem;
    border-radius: 6.25rem;
    font-size: .75rem;
    color: #ff8400;
    background: #fff
}

#EventCard .card-container .card-header .status.progress {
    border: 1px solid #ff8400;
    background: #ff8400;
    color: #fff
}

#EventCard .card-container .card-header .status.standby {
    border: 1px solid #ff8400;
    color: #ff8400
}

#EventCard .card-container .card-header .status.end {
    border: 1px solid #666666;
    color: #666
}

#EventCard .card-container .card-header .date {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#EventCard .card-container .card-header .date p {
    color: #666
}

#EventCard .card-container .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#EventCard .card-container .card-body h4 {
    width: 20.25rem;
    height: 6rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#EventCard .card-container .card-body p {
    width: 20.25rem;
    height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666
}

#EventCard .bg-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/3.4
}

#EventCard .bg-img img {
    object-fit: contain
}

#FAQView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#FAQView .list-group {
    gap: 2.5rem
}

#FAQTable {
    width: 100%
}

#FAQTable .thead {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #333333;
    background: #f5f5f7;
    font-weight: 700
}

#FAQTable .tbody,#FAQTable .tbody .data-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#FAQTable .tbody .data-item.show .data-context {
    display: flex;
    opacity: 1;
    animation: Opacity .3s
}

#FAQTable .tbody .data-item .data-list {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    border-bottom: 1px solid #d9d9d9
}

#FAQTable .tbody .data-item .data-context {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    background: #f5f5f7;
    display: none;
    opacity: 0
}

#FAQTable .tbody .data-item .data-context p {
    padding-top: .75rem;
    padding-bottom: .75rem
}

#FAQTable .tbody .data-item .data-context p.empty {
    width: 12.5rem;
    height: 4.5rem;
    min-width: 12.5rem
}

#FAQTable .th {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: 4.5rem;
    vertical-align: middle
}

#FAQTable .th:nth-child(1) {
    max-width: 12.5rem
}

#FAQTable .td {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-count: auto;
    width: 100%;
    height: 4.5rem;
    vertical-align: middle
}

#FAQTable .td p {
    flex: 1
}

#FAQTable .td button {
    width: 4.5rem;
    height: 4.5rem
}

#FAQTable .td button svg {
    transition: all .3s
}

#FAQTable .td button svg.show {
    transform: rotate(180deg)
}

#ServiceInquiryView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#ServiceInquiryView .inquiry-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#ServiceInquiryView .please-check {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    gap: 1.5rem;
    background: #f5f5f7
}

#ServiceInquiryView .please-check .title {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#ServiceInquiryView .please-check .title p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: 1.125rem;
    font-weight: 700
}

#ServiceInquiryView .please-check .title span {
    font-size: .875rem
}

#ServiceInquiryView .please-check .terms {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#ServiceInquiryView .please-check .terms p {
    font-size: 1rem;
    font-weight: 700
}

#ServiceInquiryView .please-check .terms ul {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: .875rem;
    color: #666
}

#ServiceInquiryView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#ServiceInquiryTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#ServiceInquiryTable th {
    padding: .75rem 2.5rem;
    width: 20rem;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9
}

#ServiceInquiryTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#ServiceInquiryTable td .input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#ServiceInquiryTable td .file-upload-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#ServiceInquiryTable td .file-upload-group .file-name,#ServiceInquiryTable td .file-upload-group .file-name .file-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#ServiceInquiryTable td .file-upload-group .file-name .file-item svg {
    cursor: pointer
}

#ServiceInquiryTable td .file-upload-group .upload-info {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    font-size: .875rem;
    color: #666
}

#ServiceInquiryTable td #Input {
    width: 17.5rem
}

#ServiceInquiryTable td #Input.email,#ServiceInquiryTable td #Input.phone,#ServiceInquiryTable td #Input.title {
    width: 30rem
}

#ServiceInquiryTable td #TextArea {
    max-width: 30rem
}

#ServiceInquiryTable td #Dropdown .dropdown-selected {
    width: 17.5rem
}

#CheckBox {
    position: relative
}

#CheckBox input {
    position: absolute;
    visibility: hidden;
    display: none
}

#CheckBox label {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem;
    flex: 1;
    font-size: 1.125rem
}

#CheckBox .custom-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: .25rem;
    border: 1px solid #666666
}

#CheckBox .custom-checkbox svg {
    opacity: 0
}

#CheckBox input:checked+label .custom-checkbox {
    border: 1px solid #ff8400;
    background: #ff8400
}

#CheckBox input:checked+label .custom-checkbox svg {
    opacity: 1;
    color: #fff
}

#ServiceInquiryCompleteView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 3.75rem
}

#ServiceInquiryCompleteView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#ServiceInquiryCompleteView .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#ServiceInquiryCompleteView .top p {
    font-size: 1.125rem;
    color: #666;
    text-align: center
}

#ServiceInquiryCompleteView .info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 40rem;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: .75rem;
    margin-top: .75rem;
    background: #f5f5f7
}

#ServiceInquiryCompleteView .info-box p {
    font-weight: 700
}

#ServiceInquiryCompleteView button {
    min-width: 15rem
}

#PartnerRecruitView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 3.75rem
}

#PartnerRecruitView .partner-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 3.75rem
}

#PartnerRecruitView .partner-section .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#PartnerRecruitView .partner-section .partner-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#PartnerRecruitView .partner-section .partner-item .text-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#PartnerRecruitView .partner-section .partner-item .text-item p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 4.5rem
}

#PartnerRecruitView .partner-section:last-of-type {
    border-bottom: none
}

#ContentListPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    padding-bottom: 7.5rem
}

#ContentListPage .result-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    gap: .25rem
}

#ContentListPage .result-header p {
    font-size: 1.5rem;
    color: #666
}

#ContentListPage .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem;
    width: 100%
}

#ContentListPage .flex-col {
    width: 100%;
    height: auto
}

#ContentListPage .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 3.75rem
}

#ContentListPage .contents-list {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    position: relative
}

#ContentListPage .contents-list .list-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#ContentListPage .contents-list .list-title h5 {
    width: 100%;
    height: auto
}

#ContentListPage .contents-list .list-title .button-group {
    width: unset
}

#ContentListPage .contents-list.hidden {
    display: none
}

#ContentListPage .card-group {
    gap: 2.5rem
}

#ContentListPage .card-group.swiper {
    position: unset;
    margin: unset
}

#ContentListPage .card-group.swiper .swiper-button-prev,#ContentListPage .card-group.swiper .swiper-button-next {
    width: 2.25rem;
    height: 2.25rem;
    top: 0;
    margin: unset
}

#ContentListPage .card-group.swiper .swiper-button-prev:after,#ContentListPage .card-group.swiper .swiper-button-next:after {
    font-size: 1.25rem;
    color: #000
}

#ContentListPage .card-group.swiper .swiper-button-prev {
    left: unset;
    right: 4rem
}

#ContentListPage .card-group .card {
    border: 1px solid #d9d9d9
}

#ContentsDetailView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#ContentsDetailView .detail-top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem
}

#ContentsDetailView .detail-top .group {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#ContentsDetailView .detail-top .left {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: space-between;
    column-count: auto;
    gap: 1.5rem;
    width: 35rem;
    height: auto
}

#ContentsDetailView .detail-top .left .content-top {
    position: relative
}

#ContentsDetailView .detail-top .left .content-top,#ContentsDetailView .detail-top .left .content-bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#ContentsDetailView .detail-top .left .content-img {
    width: 100%;
    height: auto;
    border-radius: .75rem;
    aspect-ratio: 560/305;
    overflow: hidden
}

#ContentsDetailView .detail-top .left .content-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    width: auto;
    height: 2rem;
    border-radius: .375rem;
    position: absolute;
    top: .75rem;
    left: .75rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: #ff8400;
    z-index: 1
}

#ContentsDetailView .detail-top .left .content-status.type-person {
    background: #ff8400
}

#ContentsDetailView .detail-top .left .content-status.type-people {
    background: #202b45
}

#ContentsDetailView .detail-top .left .content-status svg {
    color: #fff
}

#ContentsDetailView .detail-top .left .content-text {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#ContentsDetailView .detail-top .left .content-text .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#ContentsDetailView .detail-top .left .content-text .card-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#ContentsDetailView .detail-top .left .content-info {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    padding: 1.25rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem
}

#ContentsDetailView .detail-top .left .content-info .info-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#ContentsDetailView .detail-top .left .content-info .info-status .icon-with-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: 1rem;
    font-weight: 700
}

#ContentsDetailView .detail-top .left .content-info .info-status .link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    border-bottom: 1px solid #ff8400;
    font-weight: 700;
    color: #ff8400
}

#ContentsDetailView .detail-top .left .content-info .info-status .link svg {
    color: #ff8400
}

#ContentsDetailView .detail-top .left .content-info .info-date {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    border-radius: .75rem;
    gap: .25rem;
    font-size: .75rem;
    background: #f5f5f7
}

#ContentsDetailView .detail-top .left .content-info .info-date p {
    min-width: 5rem;
    font-size: .75rem;
    font-weight: 700;
    padding-right: .5rem;
    white-space: nowrap
}

#ContentsDetailView .detail-top .left .content-info .info-date span {
    color: #666
}

#ContentsDetailView .detail-top .right {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem;
    flex: 1;
    width: 37.5rem;
    height: auto
}

#ContentsDetailView .detail-top .right .option {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2rem;
    padding: 2.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    flex: 1
}

#ContentsDetailView .detail-top .right .option .option-box {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#ContentsDetailView .detail-top .right .option .option-box p {
    font-weight: 700
}

#ContentsDetailView .detail-top .right .option .option-box .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#ContentsDetailView .detail-top .right .option .option-box .input-group .input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-left: unset;
    padding-right: unset
}

#ContentsDetailView .detail-top .right .option .option-box .input-group .input p.label {
    min-width: 7.5rem;
    color: #666
}

#ContentsDetailView .detail-top .right .option .option-selected {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    gap: .75rem
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 5rem;
    gap: 1.5rem
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item>p {
    width: 8.75rem
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    min-width: 11.25rem;
    flex: 1
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item .before-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item .before-price p {
    font-weight: 700
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item .before-price p:nth-child(1) {
    font-size: 1.125rem;
    color: #666;
    text-decoration: line-through
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item .before-price p:nth-child(2) {
    color: #333
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item .after-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#ContentsDetailView .detail-top .right .option .option-selected .selected-item .price-item .after-price p {
    font-weight: 700;
    color: #333
}

#ContentsDetailView .detail-top .right .option .option-selected .delivery-amt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: .5rem .75rem;
    border-radius: .25rem;
    background: #f5f5f7
}

#ContentsDetailView .detail-top .right .option .option-selected .delivery-amt .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#ContentsDetailView .detail-top .right .option .option-selected .delivery-amt .price-item h6 {
    color: #666
}

#ContentsDetailView .detail-top .right .option .option-selected .delivery-amt .price-item p {
    font-weight: 700
}

#ContentsDetailView .detail-top .right .option .option-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#ContentsDetailView .detail-top .right .option .option-result p {
    color: #000
}

#ContentsDetailView .detail-top .right .option .option-result .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#ContentsDetailView .detail-top .right .option .option-result .price-item h4 {
    color: #ff8400
}

#ContentsDetailView .detail-top .right .option .option-result .price-item p {
    font-weight: 700
}

#ContentsDetailView .detail-top .right .option #Dropdown {
    flex: 1
}

#ContentsDetailView .detail-top .right .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#ContentsDetailView .detail-top .right .button-group button {
    flex: 1
}

#ContentsDetailView .detail-bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#ContentsDetailView .detail-bottom .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    flex: 1
}

#ContentsDetailView .detail-bottom .tabs-group.fixed {
    position: sticky;
    top: 4.5rem;
    background: #fff;
    z-index: 1
}

#ContentsDetailView .detail-bottom .tabs-group #Tab {
    flex: 1
}

#ContentsDetailView .detail-bottom .curriculum {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#ContentsDetailView .detail-bottom .curriculum .card-group {
    column-gap: 2.5rem;
    row-gap: 1.5rem
}

#ContentsDetailView .detail-bottom .curriculum .card {
    border: 1px solid #d9d9d9
}

#ContentsDetailView .notice {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#OrderView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#OrderView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#OrderView .info-form .item-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#OrderView .info-form .item-group .total-product-price,#OrderView .info-form .item-group .total-delivery-price {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-end;
    column-count: auto;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    gap: .75rem;
    color: #666
}

#OrderView .info-form .total-order-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: 1.5rem 2.5rem;
    border-radius: .75rem;
    background: #f5f5f7
}

#OrderView .info-form .total-order-price p {
    font-size: 1.5rem
}

#OrderView .info-form .total-order-price .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#OrderView .bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#OrderView .bottom .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#OrderView .bottom a {
    text-decoration: underline
}

#OrderView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#OrderView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#OrderView .button-group.payment-group {
    grid-template-columns: repeat(5,1fr);
    display: grid
}

#OrderView .button-group.payment-group #LineButton {
    min-width: unset;
    width: 100%
}

#OrderView .button-group.payment-group #LineButton:active {
    color: #ff8400;
    border-color: #ff8400
}

#OrderInfoTable {
    width: 100%
}

#OrderInfoTable thead {
    border-top: 2px solid #333333;
    background: #f5f5f7;
    font-weight: 700
}

#OrderInfoTable tbody tr {
    border-bottom: 1px solid #d9d9d9
}

#OrderInfoTable th,#OrderInfoTable td {
    text-align: center;
    vertical-align: middle;
    height: 4.5rem
}

#OrderInfoTable th:nth-child(1),#OrderInfoTable td:nth-child(1) {
    width: 10rem
}

#OrderInfoTable th:nth-child(2),#OrderInfoTable td:nth-child(2) {
    width: 23.75rem
}

#OrderInfoTable th:nth-child(3),#OrderInfoTable th:nth-child(4),#OrderInfoTable th:nth-child(5),#OrderInfoTable td:nth-child(3),#OrderInfoTable td:nth-child(4),#OrderInfoTable td:nth-child(5) {
    width: 13.75rem
}

#OrderInfoTable .lecture-title,#OrderInfoTable .lecture-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#OrderInfoTable .lecture-title p,#OrderInfoTable .lecture-amount p {
    max-width: 23.75rem
}

#OrderInfoTable .lecture-title p span,#OrderInfoTable .lecture-amount p span {
    font-weight: 700
}

#OrderCompleteView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#OrderCompleteView .order-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#OrderCompleteView .order-state .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#OrderCompleteView .order-state .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 40rem;
    height: auto;
    padding: 1.5rem 7.5rem;
    border-radius: .75rem;
    gap: .75rem;
    background: #f5f5f7
}

#OrderCompleteView .order-state .bottom .text-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: .75rem
}

#OrderCompleteView .order-state .bottom .text-item>p {
    width: 7.5rem;
    font-weight: 700
}

#OrderCompleteView .order-state .bottom .text-item .context {
    display: flex;
    flex-direction: column;
    align-items: unse;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#OrderCompleteView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#OrderCompleteView .payment-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: 1.5rem 2.5rem;
    border-radius: .75rem;
    background: #f5f5f7
}

#OrderCompleteView .payment-price p {
    font-size: 1.5rem
}

#OrderCompleteView .payment-price .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#OrderCompleteView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#OrderFailedView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#OrderFailedView .order-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#OrderFailedView .order-state .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#OrderFailedView .order-state .top p {
    font-size: 1.125rem;
    color: #666
}

#OrderFailedView .order-state .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 40rem;
    height: auto;
    padding: 1.5rem 7.5rem;
    border-radius: .75rem;
    gap: .75rem;
    background: #f5f5f7
}

#OrderFailedView .order-state .bottom p {
    font-weight: 700;
    word-break: keep-all
}

#OrderFailedView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#MyPageView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#MyPageView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#MyPageView .tabs-group #Tab {
    width: 100%;
    height: auto;
    flex: 1
}

#MyProfileView,#MyProfileEditView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#MyProfileView .info-form,#MyProfileEditView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#MyProfileView .bottom,#MyProfileEditView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#MyProfileView .bottom .button-group,#MyProfileEditView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#MyProfileEditView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#MyPurchaseHistory .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#MyPurchaseHistory .list-group .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#PurchaseHistoryTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#PurchaseHistoryTable .list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #d9d9d9;
    gap: 2.5rem
}

#PurchaseHistoryTable .list-item .lecture-img {
    width: 18.375rem;
    height: 11.25rem;
    border-radius: .75rem;
    aspect-ratio: 4/2.45;
    overflow: hidden
}

#PurchaseHistoryTable .list-item .lecture-context,#PurchaseHistoryTable .list-item .lecture-context .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem;
    flex: 1
}

#PurchaseHistoryTable .list-item .lecture-context .top span.date {
    font-size: .875rem;
    color: #666
}

#PurchaseHistoryTable .list-item .lecture-context .top .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#PurchaseHistoryTable .list-item .lecture-context .top .title p {
    font-size: 1rem;
    font-weight: 700
}

#PurchaseHistoryTable .list-item .lecture-context .bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border-radius: .5rem;
    gap: .25rem;
    background: #f5f5f7
}

#PurchaseHistoryTable .list-item .lecture-context .bottom .lecture-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    font-size: .875rem
}

#PurchaseHistoryTable .list-item .lecture-context .bottom .lecture-option .lh {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 5rem;
    height: auto;
    font-weight: 700
}

#PurchaseHistoryTable .list-item .lecture-context .bottom .lecture-option span.line {
    width: 1px;
    height: 1.25rem
}

#PurchaseHistoryTable .list-item .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 13.75rem;
    height: auto;
    gap: .75rem
}

#PurchaseHistoryTable .list-item .button-group span.order-number {
    font-size: .875rem
}

#PurchaseHistoryTable .list-item .button-group button {
    min-width: 8.75rem;
    min-height: 3rem
}

#PurchaseHistoryTable .list-item .button-group h6 {
    font-size: 1rem
}

#PurchaseHistoryTable .list-item .button-group a {
    cursor: pointer;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-bottom: 1px solid #333333;
    font-size: .75rem;
    font-weight: 700
}

#PurchaseHistoryTable.no-data {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem
}

#PurchaseHistoryTable.no-data .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#PurchaseHistoryTable.no-data .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#PurchaseHistoryTable.no-data .top p {
    font-size: 1.125rem;
    color: #666
}

#FindAccountView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#FindAccountView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#FindAccountView .tabs-group #Tab {
    width: 100%;
    height: 3.75rem;
    flex: 1
}

#FindAccountView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#FindAccountView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#FindAccountView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#AccountTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#AccountTable th {
    padding: .75rem 2.5rem;
    width: 20rem;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9
}

#AccountTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#AccountTable td .input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#AccountTable td .input-group button {
    width: 10rem;
    min-height: 3rem;
    min-width: unset
}

#AccountTable td #Input {
    width: 17.5rem;
    height: auto
}

#AccountTable td .remaining-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#AccountTable td .remaining-count.show-error-msg {
    margin-bottom: 1.375rem
}

#FindAccountSuccessView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#FindAccountSuccessView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#FindAccountSuccessView .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#FindAccountSuccessView .top p {
    font-size: 1.125rem;
    color: #666
}

#FindAccountSuccessView .result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 40rem;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: .75rem;
    gap: .625rem;
    background: #fff5eb
}

#FindAccountSuccessView .result a {
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid #ff8400
}

#FindPasswordView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#FindPasswordView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#FindPasswordView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#FindPasswordView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#FindPasswordResetView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#FindPasswordResetView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#FindPasswordResetView .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#FindPasswordResetView .top p {
    font-size: 1.125rem;
    color: #666
}

#FindPasswordResetView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#FindPasswordResetView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#DeleteAccountView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#DeleteAccountView #Input label {
    line-height: 3rem
}

#InputPasswordView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#InputPasswordView>p {
    font-size: 1.125rem;
    color: #666
}

#InputPasswordView .box-item {
    width: 31.25rem;
    height: auto;
    padding: 3.75rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem
}

#InputPasswordView #Input {
    gap: .75rem
}

#InputPasswordView #Input label {
    font-size: 1rem;
    min-width: 5rem
}

#DeleteAgreeView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#DeleteAgreeView .top,#DeleteAgreeView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#DeleteAgreeView .box-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 40rem;
    height: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    gap: 1.5rem;
    background: #f5f5f7
}

#DeleteAgreeView .box-item .box-header {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#DeleteAgreeView .box-item .box-header .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#DeleteAgreeView .box-item .box-header p {
    font-size: .875rem
}

#DeleteAgreeView .box-item .box-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#DeleteAgreeView .box-item .box-body .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#DeleteAgreeView .box-item .box-body .input-group #Input {
    width: 17.5rem;
    height: auto
}

#DeleteAgreeView .box-item .box-footer ul li {
    font-size: .875rem;
    color: #666
}

#DeleteCompleteView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 3.75rem
}

#DeleteCompleteView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#DeleteCompleteView .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#DeleteCompleteView .top p {
    font-size: 1.125rem;
    color: #666;
    text-align: center
}

#CompanyView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#CompanyView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#CompanyView .tabs-group #Tab {
    width: 12.5rem;
    height: auto
}

#CompanyView #PageContext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 75rem;
    height: auto;
    gap: 3.75rem
}

#CompanyView #PageContext .section-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .625rem
}

#CompanyView #PageContext .section-title p {
    color: #666
}

#CompanyView #PageContext ul.introduction-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#CompanyView #PageContext ul.introduction-text li {
    font-size: 1rem;
    text-align: center;
    color: #666;
    word-break: keep-all
}

#CompanyView #PageContext .circle-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 47.5rem;
    height: 25rem;
    position: relative
}

#CompanyView #PageContext .circle-group .circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    position: absolute;
    top: 0;
    gap: .75rem;
    background: #ff8400;
    color: #fff;
    mix-blend-mode: multiply
}

#CompanyView #PageContext .circle-group .circle p {
    font-size: 1.125rem;
    text-align: center
}

#CompanyView #PageContext .circle-group .circle:nth-child(1) {
    left: 0
}

#CompanyView #PageContext .circle-group .circle:nth-child(2) {
    right: 0
}

#CompanyView #PageContext .logo-group {
    gap: 2.5rem
}

#CompanyView #PageContext .address {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 1.5rem
}

#CompanyView #PageContext .address .text-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#CompanyView #PageContext .address .text-group .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#CompanyView #PageContext .address .text-group .text p {
    font-size: 1rem;
    color: #666
}

#CompanyView #PageContext .address .text-group .text p:first-child {
    font-weight: 700
}

#CompanyView #PageContext .history-section {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 3.75rem;
    position: relative
}

#CompanyView #PageContext .history-section .left {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 500px;
    height: auto;
    position: sticky;
    top: 4.5rem
}

#CompanyView #PageContext .history-section .left .years {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem;
    display: none
}

#CompanyView #PageContext .history-section .left .years.show {
    display: flex;
    overflow: hidden
}

#CompanyView #PageContext .history-section .left .years.show img {
    animation: MoGnbLeft .5s
}

#CompanyView #PageContext .history-section .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    flex: 1
}

#CompanyView #PageContext .history-section .right {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    gap: 2.5rem;
    flex: 1;
    padding-bottom: unset;
    min-height: 28.125rem
}

#CompanyView #PageContext .history-section .right .month {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem
}

#CompanyView #PageContext .history-section .right .month ul {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem;
    margin-left: .75rem
}

#CompanyView #PageContext .history-section .right .month ul li {
    word-break: keep-all;
    text-indent: -.75rem;
    font-size: 1.125rem;
    color: #666
}

#GNB {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: .75rem 3.75rem;
    width: 100%;
    height: unset;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 99
}

@media (max-width: 1023px) {
    #GNB {
        min-width:1024px
    }
}

#GNB .gnb-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    width: 100%;
    max-width: 1800px
}

#GNB .gnb-container .group-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.25rem;
    flex: 1
}

#GNB .gnb-container .group-left .logo {
    cursor: pointer;
    width: 11.625rem;
    height: 2rem
}

#GNB .gnb-container .group-left .menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#GNB .gnb-container .group-left .menu .menu-item {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    padding-top: .75rem;
    padding-bottom: .75rem;
    gap: .25rem;
    white-space: nowrap;
    font-size: 1rem
}

#GNB .gnb-container .group-left .menu .menu-item a {
    color: #333;
    text-decoration: none
}

#GNB .gnb-container .group-left .menu .menu-item:first-child {
    color: #ff8400
}

#GNB .gnb-container .group-left .menu .menu-item svg {
    color: #ff8400
}

#GNB .gnb-container .group-left .menu .dropdown-menu {
    border-top: 1px solid #efefef;
    width: 100%;
    height: auto;
    position: absolute;
    top: 4.5rem;
    left: 0;
    background: #fff;
    box-shadow: 0 8px 20px #0000000f;
    display: none
}

#GNB .gnb-container .group-left .menu .dropdown-menu.show {
    display: flex;
    animation: GnbDropdown .3s
}

#GNB .gnb-container .group-left .menu .dropdown-menu .dropdown-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    column-count: auto;
    width: 100%;
    height: auto;
    max-width: 1800px;
    margin: 0 auto
}

#GNB .gnb-container .group-left .menu .category-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100%;
    background: #fff;
    margin-left: 13.5rem
}

#GNB .gnb-container .group-left .menu .category-menu .category-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 12.5rem;
    height: 100%;
    padding: 1.25rem .75rem 2.25rem;
    position: relative;
    gap: 1rem;
    text-align: left
}

#GNB .gnb-container .group-left .menu .category-menu .category-item.empty {
    width: 11.625rem;
    height: auto;
    opacity: 0
}

#GNB .gnb-container .group-left .menu .category-menu .category-item:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #efefef
}

#GNB .gnb-container .group-left .menu .category-menu .category-item .category-title {
    font-size: 1rem;
    line-height: 1.5;
    margin: unset
}

#GNB .gnb-container .group-left .menu .category-menu .category-item .category-title.category-all {
    cursor: pointer
}

#GNB .gnb-container .group-left .menu .category-menu .category-item .category-title.category-all.active {
    color: #ff8400
}

#GNB .gnb-container .group-left .menu .category-menu .category-item .category-list {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

#GNB .gnb-container .group-left .menu .category-menu .category-item .category-list .submenu-item {
    cursor: pointer;
    color: #666
}

#GNB .gnb-container .group-left .menu .category-menu .category-item .category-list .submenu-item.active {
    color: #ff8400
}

#GNB .gnb-container .group-left .menu .category-img {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

#GNB .gnb-container .group-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.25rem
}

#GNB .gnb-container .group-right .sign-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#GNB .gnb-container .group-right .sign-menu li {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    position: relative
}

#GNB .gnb-container .group-right .sign-menu li:after {
    position: absolute;
    top: 52%;
    right: -.75rem;
    transform: translateY(-50%);
    content: "";
    width: 1px;
    height: 1rem;
    background: #d9d9d9
}

#GNB .gnb-container .group-right .sign-menu li a {
    font-size: .875rem;
    white-space: nowrap
}

#GNB .gnb-container .group-right .sign-menu li:last-child:after {
    display: none
}

#GNB #SearchBar {
    max-width: 16.25rem
}

#Footer {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    background: #333
}

#Footer .container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    max-width: 1200px;
    margin: 0 auto
}

@media (max-width: 1280px) {
    #Footer .container {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

#Footer .footer-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    border-bottom: 1px solid rgba(245,245,247,.1);
    padding-bottom: .75rem
}

#Footer .footer-top .logo {
    width: auto;
    height: 2rem
}

#Footer .footer-top #Dropdown {
    min-width: 15rem
}

#Footer .footer-top #Dropdown .dropdown-selected {
    color: #dedede
}

#Footer .footer-top #Dropdown .dropdown-selected svg {
    color: #fff
}

#Footer .footer-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto
}

#Footer .footer-body .left {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem;
    flex: 1
}

#Footer .footer-body .left .text-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#Footer .footer-body .left .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    color: #fff;
    font-size: .75rem
}

#Footer .footer-body .left .text p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    white-space: nowrap
}

#Footer .footer-body .left .text p:first-child {
    font-weight: 700
}

#Footer .footer-body .right {
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: underline
}

#Footer .footer-body .right ul.terms {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#Footer .footer-body .right ul.terms li a {
    white-space: nowrap;
}


#Footer .footer-body .right ul.sns_links {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#Footer .footer-body .right ul.sns_links li {
  width: 2.5rem;
}

#Footer .footer-body .right ul.sns_links li a {
  white-space: nowrap;
}

#Footer .footer-bottom p.copyright {
    font-size: .75rem;
    color: #f5f5f7
}

#Button.sm {
    height: 1.5rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#Button.sm p {
    font-size: .75rem;
    white-space: nowrap
}

#Button.md {
    height: 2rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#Button.md p {
    font-size: .875rem;
    white-space: nowrap
}

#Button.lg {
    height: 3rem;
    gap: .25rem;
    border-radius: .5rem;
    font-weight: 700;
    padding-left: 2rem;
    padding-right: 2rem;
    min-width: 15rem;
    min-height: 3.75rem
}

#Button.lg p {
    font-size: 1rem;
    white-space: nowrap
}

#Button.xl {
    height: 3.75rem;
    gap: .25rem;
    border-radius: .5rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#Button.xl p {
    font-size: 1rem;
    white-space: nowrap
}

#Button.round {
    border-radius: 6.25rem
}

#Button.primary {
    color: #fff;
    background: #ff8400
}

#Button.primary:hover {
    background: #ffb566
}

#Button.primary:hover svg {
    color: #fff
}

#Button.primary:active {
    background: #ffce99
}

#Button.primary.active {
    color: #ff8400;
    background: #fff
}

#Button.primary.border {
    border: 1px solid #ffffff
}

#Button.primary svg {
    color: #fff
}

#Button.secondary {
    color: #fff;
    background: #202b45
}

#Button.secondary:hover {
    background: #4e546b
}

#Button.secondary:active {
    background: #a5aab5
}

#Button.secondary svg {
    color: #fff
}

#Button.negative {
    color: #333;
    background: #fff
}

#Button.negative:hover {
    color: #666;
    background: #fff
}

#Button.negative:active {
    color: #bfbfbf;
    background: #fff
}

#Button.negative svg {
    color: #fff
}

#Button.disabled {
    cursor: default;
    background: #dedede
}

#Button.disabled:hover,#Button.disabled:active {
    background: #dedede
}

#LineButton.show-error-msg {
    margin-bottom: 1.375rem
}

#LineButton.sm {
    height: 1.5rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#Language {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    padding-top: .375rem;
    padding-bottom: .375rem
}

#Language .language-selected {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 6.25rem;
    height: auto;
    position: relative;
    gap: .625rem;
    min-width: 6.25rem;
    color: #666
}

#Language .language-list {
    position: absolute;
    top: 2.75rem;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 999
}

#Language .language-list ul {
    padding: .5rem .25rem;
    border: 1px solid #efefef;
    max-height: 12.5rem;
    overflow: auto
}

#Language .language-list ul li {
    cursor: pointer;
    width: auto;
    height: auto;
    padding: .75rem .5rem;
    border-bottom: 1px solid #efefef;
    flex: 1
}

#Language .language-list ul li:last-child {
    border: none
}

#Language .language-list ul li:hover {
    background: #f5f5f7
}

#Tab {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    color: #bfbfbf;
    width: fit-content
}

#Tab p,#Tab a {
    flex: 1;
    font-size: 1.5rem;
    text-align: center;
    white-space: nowrap
}

#Tab.line.active {
    color: #ff8400
}

#Tab.line.active .border {
    background: #ff8400;
    width: 100%;
    height: 2px
}

#Tab.line .border {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #bfbfbf;
    width: 100%;
    height: 1px
}

#Tab.box.active {
    color: #fff;
    background: #ff8400
}

#Tab.box.active .border {
    border: 2px solid #ff8400
}

#Tab.box .border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #bfbfbf
}

#Tab.round {
    font-weight: 700;
    gap: .25rem;
    border-radius: 6.25rem
}

#Tab.round.active {
    color: #ff8400;
    background: #ffe6cc
}

#Tab.sm {
    height: 2.125rem;
    gap: .25rem;
    font-weight: 700
}

#Tab.sm a {
    font-size: .75rem
}

#Tab.sm p,#Tab.sm a {
    padding: .5rem .75rem
}

#Tab.md {
    height: 3rem;
    gap: .25rem;
    font-weight: 700
}

#Tab.md a {
    font-size: 1rem
}

#Tab.md p,#Tab.md a {
    padding: .75rem 1.5rem
}

#Tab.lg {
    height: 4.25rem;
    gap: .25rem;
    font-weight: 700
}

#Tab.lg a {
    font-size: 1.5rem
}

#Tab.lg p,#Tab.lg a {
    padding: 1rem 2.25rem
}

#Table,#CSNotiTable {
    width: 100%
}

#Table thead,#CSNotiTable thead {
    border-top: 2px solid #333333;
    background: #f5f5f7;
    font-weight: 700
}

#Table tbody tr,#CSNotiTable tbody tr {
    border-bottom: 1px solid #d9d9d9
}

#Table th,#Table td,#CSNotiTable th,#CSNotiTable td {
    vertical-align: middle;
    height: 4.5rem
}

#Table th:nth-child(1),#Table td:nth-child(1),#CSNotiTable th:nth-child(1),#CSNotiTable td:nth-child(1) {
    width: 7.5rem
}

#Table th:nth-child(2),#Table td:nth-child(2),#CSNotiTable th:nth-child(2),#CSNotiTable td:nth-child(2) {
    width: 40rem
}

#Table th:nth-child(3),#Table th:nth-child(4),#Table td:nth-child(3),#Table td:nth-child(4),#CSNotiTable th:nth-child(3),#CSNotiTable th:nth-child(4),#CSNotiTable td:nth-child(3),#CSNotiTable td:nth-child(4) {
    width: 10rem
}

#Table th:nth-child(5),#Table td:nth-child(5),#CSNotiTable th:nth-child(5),#CSNotiTable td:nth-child(5) {
    width: 7.5rem
}

#Table td,#CSNotiTable td {
    text-align: center
}

#CSNotiTable tbody tr {
    cursor: pointer
}

#OrderFormTable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#OrderFormTable th {
    padding: .75rem 2.5rem;
    width: 20rem;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9
}

#OrderFormTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#OrderFormTable td.post .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .625rem
}

#OrderFormTable td.post #Input {
    gap: .75rem;
    min-width: 30rem
}

#OrderFormTable td #LineButton {
    min-width: 7.75rem;
    min-height: unset
}

#OrderFormTable td #Input {
    width: 100%;
    max-width: 17.5rem
}

#OrderFormTable td #Dropdown {
    max-width: 30rem
}

#OrderCompleteTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#OrderCompleteTable th {
    padding: .75rem 2.5rem;
    width: 20rem;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9
}

#OrderCompleteTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#OrderCompleteTable td .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .625rem
}

#ProfileTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#ProfileTable th {
    padding: .75rem 2.5rem;
    width: 20rem;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700;
    border-bottom: 1px solid #d9d9d9
}

#ProfileTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 4.5rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#ProfileTable td .input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#Input {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto
}

#Input.with-text-lebel {
    gap: 2.5rem
}

#Input p.text-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    min-width: 4rem;
    min-height: 3rem
}

#Input .input-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#Input .input-item .input-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#Input .input-item .input-label p {
    font-size: .875rem
}

#Input .input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .625rem;
    flex: 1;
    width: 100%
}

#Input .input input {
    width: 100%;
    height: auto;
    padding: .75rem .5rem;
    flex: 1;
    color: #333;
    background: unset;
    z-index: 1
}

#Input .input input::placeholder {
    color: #bfbfbf
}

#Input .input input:focus {
    caret-color: #ff8400
}

#Input .input.line .border {
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: #bfbfbf
}

#Input .input.line:focus-within .border {
    background: #ff8400
}

#Input .input.disabled {
    cursor: default;
    background: #f5f5f7
}

#Input .input.disabled input {
    color: #666
}

span.timer {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    z-index: 1
}

span.timer.active {
    color: #1f86ff
}

span.timer.timeout {
    color: red
}

#TextArea {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%
}

#TextArea .input-item .input-label p {
    font-size: .875rem
}

#Dropdown {
    position: relative
}

#Dropdown[aria-readonly=readonly] .dropdown-selected {
    cursor: default;
    background: #f5f5f7
}

#Dropdown .input-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#Dropdown .input-label p {
    font-size: .875rem
}

#Dropdown .dropdown-selected {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: .75rem .5rem;
    position: relative;
    gap: .625rem;
    width: 100%;
    color: #666
}

#Dropdown .dropdown-selected.box .border {
    border: 1px solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#Dropdown .dropdown-selected.box.active .border {
    border-color: #ff8400
}

#Dropdown .dropdown-selected.line .border {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #bfbfbf
}

#Dropdown .dropdown-selected.line.active .border {
    background-color: #ff8400
}

#Dropdown .dropdown-selected.round {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 6.25rem
}

#Dropdown .dropdown-selected.round .border {
    border: 1px solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100px
}

#Dropdown .dropdown-selected.round.active .border {
    border-color: #ff8400
}

#Dropdown .dropdown-selected p {
    flex: 1
}

#Dropdown .dropdown-selected svg {
    transition: all .3s
}

#Dropdown .dropdown-selected.active svg {
    transform: rotate(180deg)
}

#Dropdown .dropdown-list {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 999
}

#Dropdown .dropdown-list.show-top {
    bottom: 3.5rem
}

#Dropdown .dropdown-list.show-bottom {
    top: 3.5rem
}

#Dropdown .dropdown-list ul {
    padding: .5rem .25rem;
    border: 1px solid #efefef;
    max-height: 12.5rem;
    overflow: auto
}

#Dropdown .dropdown-list ul li {
    cursor: pointer;
    padding: .75rem .5rem;
    border-bottom: 1px solid #efefef
}

#Dropdown .dropdown-list ul li:last-child {
    border: none
}

#Dropdown .dropdown-list ul li.active {
    font-weight: 700
}

#Dropdown .dropdown-list ul li.active.bg-gray {
    color: #000;
    background: #f5f5f7
}

#Dropdown .dropdown-list ul li.active.bg-orange {
    color: #ff8400;
    background: #fff4e4
}

#Dropdown .dropdown-list ul li.active.color-black {
    color: #000
}

#Dropdown .dropdown-list ul li.active.color-orange {
    color: #ff8400
}

#Dropdown .dropdown-list ul.box-shadow {
    box-shadow: 0 .375rem 1rem #0000001a
}

#Dropdown .dropdown-list ul.round {
    border-radius: .75rem
}

#Dropdown ::-webkit-scrollbar {
    width: 1.25rem
}

#Dropdown ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#Dropdown ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

#SearchBar .input input {
    width: 100%;
    height: auto
}

#TopButton {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: 9.625rem;
    bottom: 5rem;
    color: #fff;
    background: #000;
    border-radius: 50%;
    box-shadow: 0 .25rem .625rem #0000001a;
    z-index: 999;
    animation: FadeDown .3s;
    display: none;
    opacity: 0
}

#TopButton.sticky {
    display: flex;
    position: fixed;
    animation: FadeUp .3s;
    opacity: 1
}

#TopButton.fixed {
    display: flex;
    animation: NoneAni 0s;
    opacity: 1
}

#TopButton svg {
    color: #fff
}

#ChatBot {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    position: absolute;
    right: 9.625rem;
    bottom: 5rem;
    gap: .25rem;
    padding: .5rem .75rem .5rem 3.25rem;
    color: #fff;
    background: #ff8400;
    border-radius: 6.25rem;
    box-shadow: 0 .25rem .625rem #0000001a;
    z-index: 999;
    animation: FadeDown .3s;
    display: none;
    opacity: 0
}

#ChatBot.sticky {
    display: flex;
    position: fixed;
    animation: FadeUp .3s;
    opacity: 1
}

#ChatBot.fixed {
    display: flex;
    animation: NoneAni 0s;
    opacity: 1
}

#ChatBot .chatbot-img {
    position: absolute;
    left: .75rem;
    top: .5rem;
    width: 2.25rem;
    height: 2.25rem
}

#ChatBot p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: 1rem
}

@media (min-width: 360px) and (max-width: 768px) {
    #ChatBot p {
        gap:2.2222222222vw;
        font-size: 4.4444444444vw;
        padding: 2.2222222222vw
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
    #ChatBot p {
        gap:1.5625vw;
        font-size: 2.34375vw
    }
}

#ChatBot i {
    font-size: 1.5rem
}

#PagingNavigator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#PagingNavigator .pagination-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    margin: 0 auto
}

#PagingNavigator button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f5f5f7;
    color: #bfbfbf
}

#PagingNavigator a {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 1.5rem;
    height: 1.5rem
}

#PagingNavigator a.active {
    border-radius: 50%;
    background: #ff8400;
    color: #fff
}

.chip {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: 2rem;
    width: fit-content;
    font-size: .75rem;
    white-space: nowrap;
    color: #ff8400;
    background: #fff;
    border: 1px solid #ff8400;
    border-radius: 6.25rem;
    box-sizing: border-box
}

.card-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 2rem;
    gap: .5rem;
    letter-spacing: -1px
}

#Categories {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#Categories li {
    cursor: pointer;
    font-size: 1.125rem;
    color: #666
}

#Categories li.active {
    color: #ff8400;
    font-weight: 700
}

#Categories li:after {
    content: "•";
    padding-left: .75rem;
    padding-right: .75rem;
    color: #d9d9d9;
    font-weight: 400
}

#Categories li:last-child:after {
    display: none
}

#TopBanner .wrapper {
    position: relative;
    max-width: 1920px;
    margin: 0 auto
}

#TopBanner .wrapper svg {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 3.75rem;
    transform: translateY(-50%);
    color: #fff
}

#PageNotFound {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
    border-top: 2px solid #333333
}

#PageNotFound .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#PageNotFound .top .icon-img {
    width: 6.25rem;
    height: 6.25rem
}

#PageNotFound .top p {
    font-size: 1.125rem;
    color: #666
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000000b3;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9999;
    animation: Opacity .3s;
    display: block
}

.modal .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2rem;
    width: 20rem;
    height: 10rem;
    padding: 1.25rem;
    border-radius: .75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff
}

.modal .modal-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

.modal .modal-body p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    height: 3rem;
    text-align: center
}

.modal .modal-footer {
    width: 100%
}

.modal .modal-footer .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

.modal .modal-footer .button-group #Button,.modal .modal-footer .button-group #LineButton {
    min-width: unset;
    min-height: unset;
    width: 100%
}

#FindPasswordInfoAlert .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 30rem;
    height: auto;
    gap: 1rem
}

#FindPasswordInfoAlert .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#FindPasswordInfoAlert .modal-body p {
    font-size: .875rem;
    font-weight: 700;
    text-align: left
}

#FindPasswordInfoAlert .modal-body li {
    font-size: .875rem
}

#FindPasswordInfoAlert .modal-footer .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#FindPasswordInfoAlert .modal-footer .button-group #Button {
    width: 10rem;
    height: 3.75rem
}

#PageHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    gap: .625rem;
    flex: unset!important
}

#PageHeader p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    font-size: 1.125rem;
    text-align: center;
    color: #666
}

#ContentCard {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    padding: 2.5rem;
    border-radius: .75rem;
    border: 1px solid #d9d9d9;
    background: #fff
}

#ContentCard .card-header {
    position: relative
}

#ContentCard .card-header .card-img {
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    aspect-ratio: 4/2.45;
    overflow: hidden
}

#ContentCard .card-header .status-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    position: absolute;
    top: .75rem;
    left: .75rem
}

#ContentCard .card-header .status-group .card-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    width: auto;
    height: 2rem;
    border-radius: .375rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    z-index: 1
}

#ContentCard .card-header .status-group .card-status.type-person {
    background: #ff8400
}

#ContentCard .card-header .status-group .card-status.type-people {
    background: #202b45
}

#ContentCard .card-header .status-group .card-status svg {
    color: #fff
}

#ContentCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    word-break: keep-all
}

#ContentCard .card-body h5 {
    width: auto;
    height: 4.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #333;
    line-height: 1.5;
    margin: 0
}

#ContentCard .card-body p {
    width: auto;
    height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    margin: 0
}

#ContentCard .card-footer {
    padding: 2px
}

#ContentCard .card-footer .card-chips {
    width: fit-content
}

#ContentCard .card-footer .card-chips .chip p {
    white-space: nowrap
}

#CurriculumCard {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-radius: .75rem;
    width: 100%;
    height: auto;
    gap: .75rem;
    background: #fff;
    overflow: hidden
}

#CurriculumCard .card-header .card-img {
    border-radius: .75rem;
    min-height: 5.75rem;
    overflow: hidden
}

#CurriculumCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#CurriculumCard .card-body p {
    font-size: 1.125rem;
    font-weight: 700;
    max-height: 3.375rem;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#CurriculumCard .card-footer {
    width: auto
}

#CurriculumCard .card-footer ul {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#CurriculumCard .card-footer ul li {
    font-size: 1rem;
    max-height: 3rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#SkeletonContentCard {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100%;
    padding: 2.5rem;
    border-radius: .75rem;
    border: 1px solid #d9d9d9;
    gap: 1.5rem;
    background: #fff
}

#SkeletonContentCard .card-header .card-img span {
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    min-height: 11.25rem;
    aspect-ratio: 4/2.45;
    overflow: hidden
}

#SkeletonContentCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#SkeletonContentCard .card-footer {
    gap: .5rem
}

#SkeletonContentCard .card-footer .card-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: auto;
    height: 2rem;
    max-width: unset;
    gap: unset
}

#SkeletonContentCard .card-footer .card-chips span {
    border-radius: 6.25rem
}

#SkeletonCurriculumCard {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    gap: .75rem;
    background: #fff
}

#SkeletonCurriculumCard .card-header .card-img span {
    border-radius: .75rem;
    min-height: 12.5rem;
    aspect-ratio: 3/1.6;
    overflow: hidden
}

#SkeletonCurriculumCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#SkeletonCurriculumCard .card-footer {
    gap: .5rem
}

#SkeletonCurriculumCard .card-footer .card-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: auto;
    height: 2rem;
    max-width: unset;
    gap: unset
}

#SkeletonCurriculumCard .card-footer .card-chips span {
    border-radius: 6.25rem
}

#EditForm {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 3.75rem
}

#EditForm #Input {
    width: 17.5rem;
    height: auto
}

#EditForm .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#CheckPassword {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#CheckPassword .context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#CheckPassword .context p {
    color: #666
}

#CheckPassword .box-item {
    padding: 3.75rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    width: 31.25rem;
    height: auto
}

#CheckPassword #Input {
    gap: 2.5rem
}

#CheckPassword #Input label {
    min-width: 3.75rem;
    font-size: 1rem;
    line-height: 3rem
}

#ChangePassword {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#ChangePassword .context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#ChangePassword .context p {
    color: #666
}

#ChangePassword .box-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 3.75rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    width: 35rem;
    height: auto;
    gap: 1.5rem
}

#ChangePassword #Input {
    gap: 2.5rem
}

#ChangePassword #Input label {
    min-width: 7.5rem;
    font-size: 1rem
}

#ChangePassword .info {
    padding: 1.5rem;
    border-radius: .75rem;
    background: #f5f5f7;
    font-size: .75rem;
    color: #666;
    white-space: nowrap
}

#OrderDetail {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0003;
    z-index: 9999
}

#OrderDetail .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 40rem;
    height: auto;
    border-radius: .75rem;
    max-height: 58.75rem;
    gap: unset;
    padding: unset;
    background: #fff
}

#OrderDetail .modal-header {
    cursor: pointer;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

#OrderDetail .modal-header .item-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-count: auto;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-bottom: 1rem
}

#OrderDetail .modal-header .item-wrapper h6 {
    flex: 1
}

#OrderDetail .modal-header .item-wrapper .text-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#OrderDetail .modal-header .item-wrapper .text-group .date-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#OrderDetail .modal-header .item-wrapper .text-group .date-item p {
    font-size: .875rem
}

#OrderDetail .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    gap: 1rem;
    padding-bottom: unset
}

#OrderDetail .modal-body p {
    height: unset
}

#OrderDetail .modal-body .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#OrderDetail .modal-body .item-group h6 {
    font-size: 1rem
}

#OrderDetail .modal-body .item-group .th {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #000000;
    background: #f5f5f7
}

#OrderDetail .modal-body .item-group .th p {
    padding-top: .75rem;
    padding-bottom: .75rem;
    justify-content: center;
    font-size: .875rem;
    font-weight: 700
}

#OrderDetail .modal-body .item-group .th p:first-child {
    width: 70%;
    border-right: 1px solid #d9d9d9
}

#OrderDetail .modal-body .item-group .th p:last-child {
    width: 30%
}

#OrderDetail .modal-body .item-group .item-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    gap: 1.5rem
}

#OrderDetail .modal-body .item-group .item-wrapper .item-img {
    border-radius: .75rem;
    aspect-ratio: 3/2;
    max-height: 5.625rem;
    overflow: hidden
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    flex: 1
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    gap: .25rem
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-title p {
    font-weight: 700
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-title .price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-title .price span {
    font-size: .875rem
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-title .price span:first-child {
    font-weight: 700
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border-radius: .5rem;
    gap: .5rem;
    background: #f5f5f7
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .left {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .left p {
    width: 3.5rem;
    height: auto;
    font-size: .75rem;
    font-weight: 700
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right .text-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    flex: 1
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right .text-group p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right p {
    font-size: .75rem;
    flex: 1;
    text-align: left
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right .price {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right .price span {
    font-size: .75rem
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right .price span:first-child {
    font-weight: 700
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .order-item .right span.line {
    width: 1px;
    height: auto;
    font-size: .75rem;
    background: #d9d9d9;
    margin-right: .5rem
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .delivery-amt {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-end;
    column-count: auto
}

#OrderDetail .modal-body .item-group .item-wrapper .order-option .lecture-option .delivery-amt span {
    font-size: .75rem;
    color: #666
}

#OrderDetail .modal-body .item-group:not(:first-child) {
    padding-top: unset
}

#OrderDetail .modal-body .info-text span,#OrderDetail .modal-body .info-text a {
    font-size: .875rem;
    color: #666;
    word-break: keep-all
}

#OrderDetail .modal-body .info-text a {
    font-weight: 700
}

#OrderDetail .modal-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    padding: 1.25rem;
    gap: .75rem
}

#OrderDetail .modal-footer button {
    min-width: 10rem
}

#OrderDetail ::-webkit-scrollbar {
    width: 1.25rem
}

#OrderDetail ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#OrderDetail ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

#OrderDetailTable {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
    border-top: 2px solid #000000
}

#OrderDetailTable th {
    padding: .75rem 2.5rem;
    width: 9rem;
    height: 3.375rem;
    border-bottom: 1px solid #d9d9d9;
    vertical-align: middle;
    text-align: left;
    background: #f5f5f7;
    font-weight: 700
}

#OrderDetailTable td {
    padding: .75rem 1.5rem;
    width: unset;
    height: 3.375rem;
    vertical-align: middle;
    text-align: left;
    border-bottom: 1px solid #d9d9d9
}

#OrderDetailTable td .text-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#OrderDetailTable th p,#OrderDetailTable td p {
    font-size: .875rem
}

#ClientDownlaod {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#ClientDownlaod .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#ClientDownlaod .button-group>p {
    font-size: 1.125rem;
    color: #666
}

#TableDownlaodSpecs {
    width: 100%;
    table-layout: fixed
}

#TableDownlaodSpecs thead {
    border-top: 2px solid #333333;
    border-bottom: 1px solid #d9d9d9;
    background: #f5f5f7;
    font-weight: 700
}

#TableDownlaodSpecs tbody tr {
    border-bottom: 1px solid #d9d9d9
}

#TableDownlaodSpecs th,#TableDownlaodSpecs td {
    border-right: 1px solid #d9d9d9;
    padding: .75rem 2.5rem;
    vertical-align: middle;
    height: 4.5rem;
    text-align: center
}

#TableDownlaodSpecs th:first-child,#TableDownlaodSpecs td:first-child {
    text-align: left;
    width: 20rem
}

#TableDownlaodSpecs th:last-child,#TableDownlaodSpecs td:last-child {
    border-right: 0px solid transparent
}

#ManualDownload {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#ManualDownload .filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#ManualDownload .filter-group #Categories {
    flex: 1
}

#ManualDownload .filter-group #SearchBar {
    width: 17.5rem
}

#ManualDownload .download-list {
    gap: 2.5rem
}

#ManualDownloadItem {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem
}

#ManualDownloadItem .content-top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    width: 100%
}

#ManualDownloadItem .content-top p {
    font-size: 1.125rem;
    font-weight: 700;
    color: #000
}

#ManualDownloadItem .content-top ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#ManualDownloadItem .content-top ul li {
    color: #666
}

#ManualDownloadItem .content-top ul li:after {
    content: "⎹";
    padding-left: .75rem;
    padding-right: .75rem;
    color: #d9d9d9
}

#ManualDownloadItem .content-bottom {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-end;
    column-count: auto
}

#ManualDownloadItem .content-bottom #Button {
    min-width: unset;
    min-height: unset
}

#FindFullAccount .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    flex: 1
}

#FindFullAccount #Tab a {
    font-size: 1rem
}

#FindFullAccount .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 35rem;
    height: auto;
    gap: 1rem
}

#FindFullAccount .modal-header {
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 1rem
}

#FindFullAccount .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1rem
}

#FindFullAccount .modal-body .info-form {
    gap: .75rem
}

#FindFullAccount .modal-body .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    gap: 1.5rem
}

#FindFullAccount .modal-body .input-group #Input {
    gap: .75rem
}

#FindFullAccount .modal-body .input-group #Input label {
    min-width: 6.25rem;
    font-size: 1rem
}

#FindFullAccount .modal-body .input-group #Input button {
    padding-left: .75rem;
    padding-right: .75rem;
    min-width: 7.875rem;
    min-height: 3rem
}

#FindFullAccount .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#FindFullAccount .button-group button {
    min-width: 10rem
}

#Agreement {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#Agreement h3 {
    font-size: 1.5rem
}

#mo_Section01 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem
}

#mo_Section01 .section-wrapper {
    padding-top: unset;
    padding-bottom: unset;
    gap: 1.5rem
}

#mo_Section01 .swiper {
    height: 100%
}

#mo_Section01 .swiper .swiper-slide {
    position: relative;
    background: #f5f5f7
}

#mo_Section01 .main-swiper {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden
}

#mo_Section01 .main-swiper .contents {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    gap: .75rem;
    position: absolute;
    top: 40%;
    left: 0;
    transform: translateY(-50%);
    overflow: hidden
}

#mo_Section01 .main-swiper .contents h5 {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    word-break: keep-all;
    overflow: hidden
}

#mo_Section01 .main-swiper .contents p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    word-break: keep-all
}

#mo_Section01 .main-swiper .contents p br {
    display: none
}

#mo_Section01 .main-swiper .bg-img {
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    aspect-ratio: 2/2.25;
    object-position: center
}

#mo_Section01 .main-swiper .swiper-pagination {
    width: auto;
    height: fit-content;
    left: 2rem;
    bottom: 4.375rem;
    transform: translateY(-50%)
}

#mo_Section01 .main-swiper .swiper-pagination .swiper-pagination-bullet-active {
    border-radius: 6.25rem;
    width: 1rem;
    background: #ff8400
}

#mo_Section01 .quick-group {
    gap: .75rem
}

#mo_Section01 .quick-group .quick-button {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: 6.25rem;
    border-radius: .75rem;
    padding: .5rem .75rem;
    gap: .25rem;
    background: #efefef
}

#mo_Section01 .quick-group .quick-button .content-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    color: #333
}

#mo_Section01 .quick-group .quick-button .content-header svg {
    color: #ff8400
}

#mo_Section01 .quick-group .quick-button .content-header h6 {
    font-size: 1rem;
    text-align: center
}

#mo_Section01 .quick-group .quick-button .content-body {
    flex: 1;
    color: #666
}

#mo_Section01 .quick-group .quick-button .content-body p {
    font-size: 1.125rem
}

#mo_Section01 .quick-group .quick-button .content-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto;
    gap: .25rem;
    color: #333
}

#mo_Section01 .quick-group .quick-button:hover {
    background: #ff8400
}

#mo_Section01 .quick-group .quick-button:hover .content-header,#mo_Section01 .quick-group .quick-button:hover .content-body,#mo_Section01 .quick-group .quick-button:hover .content-footer {
    color: #fff
}

#mo_Section01 .quick-group .quick-button:hover .content-header svg,#mo_Section01 .quick-group .quick-button:hover .content-body svg,#mo_Section01 .quick-group .quick-button:hover .content-footer svg {
    color: #fff
}

#mo_Section02 .section-wrapper {
    gap: 1.5rem;
    background: #f5f5f7
}

#mo_Section02 .tabs-group,#mo_Section02 .tabs-group ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_Section02 .tabs-group ul li {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: 3rem;
    padding-left: .75rem;
    padding-right: .75rem;
    border-radius: .375rem;
    font-size: 1rem;
    font-weight: 700;
    color: #ff8400;
    background: #fff
}

#mo_Section02 .tabs-group ul li.active {
    color: #fff;
    background: #ff8400
}

#mo_Section02 .contents-swiper {
    display: none
}

#mo_Section02 .contents-swiper .swiper {
    width: 100%;
    height: auto
}

#mo_Section02 .contents-swiper.show {
    display: flex
}

#mo_Section03 {
    background: #202b45
}

#mo_Section03 .section-wrapper {
    gap: 2rem;
    height: unset
}

#mo_Section03 .content-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1rem;
    color: #fff
}

#mo_Section03 .content-left>p {
    font-size: 1rem;
    text-align: center
}

#mo_Section03 .content-left button {
    min-height: unset
}

#mo_Section03 .content-right .youtube-thumb {
    width: 100%;
    height: 100%;
    min-height: 10rem;
    aspect-ratio: 4/2.245;
    background: #fff;
    border-radius: .75rem;
    overflow: hidden
}

#mo_Section03 .content-right .youtube-thumb iframe {
    border-radius: .75rem;
    overflow: hidden
}

#mo_Section04 {
    background: #ff8400
}

#mo_Section04 .section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem;
    color: #fff
}

#mo_Section04 .section-wrapper .button-group {
    gap: .75rem
}

#mo_Section04 .section-wrapper .button-group button {
    min-width: unset;
    min-height: unset
}

#mo_Section04 .section-wrapper .tab-contents {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%
}

#mo_Section04 .section-wrapper .tab-contents .contents {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    display: none
}

#mo_Section04 .section-wrapper .tab-contents .contents.active {
    display: flex
}

#mo_Section04 .section-wrapper .tab-contents .contents .content-box {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.25rem;
    border-radius: .75rem;
    gap: .25rem;
    background: #fff
}

#mo_Section04 .section-wrapper .tab-contents .contents .content-box h5 {
    color: #ff8400
}

#mo_Section04 .section-wrapper .tab-contents .contents .content-box h6 {
    color: #333
}

#mo_Section04 .section-wrapper .tab-contents .contents .content-box .context {
    color: #666
}

#mo_Section04 .section-wrapper .tab-contents .contents .content-box span {
    display: block
}

#mo_Section05 {
    background: #f5f5f7
}

#mo_Section05 .section-wrapper {
    gap: 2rem
}

#mo_Section05 .text-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    text-align: center
}

#mo_Section05 .text-group p {
    color: #666
}

#mo_Section06 {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 3/4
}

#mo_Section06 .content-text {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_Section06 .content-text .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_Section06 .content-text .button-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1rem
}

#mo_Section06 .content-text .button-group button {
    min-height: unset
}

#mo_Section06 .bg-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1
}

#mo_Section02 .swiper-slide,#mo_Section05 .swiper-slide {
    height: auto
}

#mo_Section02 #mo_ContentCard,#mo_Section05 #mo_ContentCard {
    padding: 1.125rem;
    border-radius: .75rem
}

#mo_Section02 #mo_ContentCard .card-body,#mo_Section05 #mo_ContentCard .card-body {
    flex: 1
}

#mo_Section02 #mo_ContentCard .card-footer .card-chips .chip,#mo_Section05 #mo_ContentCard .card-footer .card-chips .chip {
    width: auto;
    height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 6.25rem
}

.step-container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_RegistView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_RegistView button {
    width: 100%
}

#mo_TermsAgree {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_TermsAgree #Agreement {
    padding: 0;
    min-height: unset
}

#mo_TermsAgree #Agreement #PageHeader {
    display: none
}

#mo_TermsAgree .box-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    gap: 1.5rem
}

#mo_TermsAgree .input-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_TermsAgree .input-item:first-child {
    gap: .25rem
}

#mo_TermsAgree .input-item>p {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    font-size: .875rem;
    color: #666
}

#mo_TermsAgree .input-item .include-context {
    padding: .75rem;
    border-radius: .75rem;
    max-height: 12.5rem;
    background: #f5f5f7;
    overflow-y: auto
}

#mo_TermsAgree .input-item .include-context p,#mo_TermsAgree .input-item .include-context li {
    font-size: .75rem
}

#mo_TermsAgree ::-webkit-scrollbar {
    width: 1.25rem
}

#mo_TermsAgree ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#mo_TermsAgree ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

#mo_TermsAgree ::-webkit-scrollbar-thumb {
    border: 7px solid #f5f5f7;
    border-radius: 6.25rem;
    background: #d9d9d9
}

#mo_TermsAgree ::-webkit-scrollbar-track {
    background: #f5f5f7
}

#mo_TermsAgree #Checkbox input:checked+label .custom-checkbox {
    background: #ff8400;
    border: 1px solid #ff8400
}

#mo_TermsAgree #Checkbox input:checked+label .custom-checkbox svg {
    opacity: 1;
    color: #fff
}

#mo_VerificationType .box-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    padding: 1.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    gap: .75rem
}

#mo_VerificationType .box-item .text-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#mo_VerificationType .box-item .text-item p {
    font-size: 1rem;
    color: #666;
    text-align: center
}

#mo_VerificationType .box-item .icon-img {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1/1
}

#mo_RegistTable {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #000000;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-bottom: unset;
    gap: 1.5rem
}

#mo_RegistTable .td .input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_RegistTable .td .input-group button {
    width: 5rem;
    height: 3rem;
    padding-left: .75rem;
    padding-right: .75rem;
    margin-top: 1.5625rem;
    min-width: unset;
    min-height: unset
}

#mo_RegistTable .td .input-group button.show-error-msg {
    margin-bottom: 1.375rem
}

#mo_RegistTable #mo_Input {
    flex: 1
}

#mo_RegistTable #mo_Input .input-item {
    gap: .25rem
}

#mo_RegistInputForm {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_RegistInputForm .table-wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_RegistInputForm .table-wrapper .tr {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_RegistInputForm .table-wrapper .tr .input-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-top: .75rem;
    padding-bottom: .75rem;
    gap: .75rem
}

#mo_RegistInputForm .table-wrapper .tr .input-group #LineButton {
    width: auto;
    height: 3rem;
    min-width: 6.25rem
}

#mo_RegistInputForm .button-group button {
    min-width: unset;
    flex: 1
}

#mo_CompleteRegist {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_CompleteRegist .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_CompleteRegist .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_CompleteRegist .top p {
    text-align: center;
    color: #666
}

#mo_CompleteRegist .button-group button {
    min-width: unset
}

#mo_LoginView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_LoginView #EasyLogin {
    width: 100%;
    height: 15rem;
    background: #bfbfbf
}

#mo_LoginView #IDPWLogin {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 2.5rem
}

#mo_LoginView #IDPWLogin #Input {
    gap: 1.5rem
}

#mo_LoginView #IDPWLogin .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_LoginView #IDPWLogin .top h6 {
    text-align: center
}

#mo_LoginView #IDPWLogin .top .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_LoginView #IDPWLogin .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_LoginView #IDPWLogin .bottom button {
    width: 100%;
    height: auto
}

#mo_LoginView #IDPWLogin .bottom .find-account a {
    font-size: .875rem
}

#mo_LoginView #IDPWLogin .bottom .find-account a:after {
    content: "⎹";
    padding-left: .5rem;
    padding-right: .5rem;
    color: #d9d9d9
}

#mo_LoginView #IDPWLogin .bottom .find-account a:last-child:after {
    display: none
}

#mo_LoginView #IDPWLogin .bottom .move-to-regist {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_LoginView #IDPWLogin .bottom .move-to-regist p,#mo_LoginView #IDPWLogin .bottom .move-to-regist a {
    font-size: .875rem
}

#mo_LoginView #IDPWLogin .bottom .move-to-regist a {
    font-weight: 700;
    text-decoration: underline
}

#mo_LoginView #IDPWLogin .or {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_LoginView #IDPWLogin .or span {
    font-size: 1rem;
    text-align: center
}

#mo_LoginView #IDPWLogin .or span:nth-child(2) {
    width: 2rem;
    height: auto;
    min-width: 2rem
}

#mo_LoginView #IDPWLogin .button-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_LoginView #IDPWLogin .button-group button {
    width: 100%;
    height: auto
}

#mo_LoginView #QRLogin,#mo_LoginView #QRLogin .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_LoginView #QRLogin .top h6 {
    text-align: center
}

#mo_LoginView #QRLogin .qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    text-align: center
}

#mo_LoginView #QRLogin .qr-box .counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_LoginView #QRLogin .qr-box .counter p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_LoginView #QRLogin .bottom p {
    text-align: center;
    word-break: keep-all
}

#mo_LoginView #Checkbox p {
    font-size: .875rem;
    font-weight: 400
}

#mo_DownloadView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 40px
}

#mo_DownloadView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_DownloadView .tabs-group #Tab {
    flex: 1
}

#mo_DownloadView .content {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem
}

#mo_DownloadView .download-info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    padding: 1.25rem;
    border-radius: .75rem;
    gap: .75rem;
    text-align: center;
    background: #fff5eb
}

#mo_DownloadView .download-info-box h6 {
    font-size: 1rem
}

#mo_DownloadView .download-info-box p {
    font-size: .875rem;
    color: #666;
    word-break: keep-all
}

#mo_DownloadView .specs-info {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_SearchResultsView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_SearchResultsView .results-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .25rem
}

#mo_SearchResultsView .results-header p {
    font-size: 1.125rem
}

#mo_SearchResultsView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem;
    width: 100%
}

#mo_SearchResultsView .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    width: 100%;
    padding-top: 2.5rem
}

#mo_SearchResultsView .contents-list {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    position: relative
}

#mo_SearchResultsView .contents-list .list-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#mo_SearchResultsView .contents-list .list-title h5 {
    width: 100%
}

#mo_SearchResultsView .contents-list .list-title .button-group {
    width: unset
}

#mo_SearchResultsView .card-group {
    gap: 1.5rem
}

#mo_SearchResultsView .card-group.swiper {
    position: unset;
    margin: unset
}

#mo_SearchResultsView .card-group.swiper .swiper-button-prev,#mo_SearchResultsView .card-group.swiper .swiper-button-next {
    width: 2.25rem;
    height: 2.25rem;
    top: 0;
    margin: unset
}

#mo_SearchResultsView .card-group.swiper .swiper-button-prev:after,#mo_SearchResultsView .card-group.swiper .swiper-button-next:after {
    font-size: 1.25rem;
    color: #000
}

#mo_SearchResultsView .card-group.swiper .swiper-button-prev {
    left: unset;
    right: 4rem
}

#mo_SearchResultsView .card-group .card {
    border: 1px solid #d9d9d9
}

#mo_NotFoundView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_NotFoundView .not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_NotFoundView .not-found .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem;
    text-align: center
}

#mo_NotFoundView .not-found .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_NotFoundView .not-found .top p {
    font-size: 1rem;
    color: #666
}

#mo_NotFoundView .not-found .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_NotFoundView .not-found .bottom button {
    flex: 1
}

#mo_CSCenterView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_CSCenterView .swiper {
    max-width: 100%
}

#mo_CSCenterView .swiper .swiper-slide {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap
}

#mo_CSCenterView .filter-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#mo_CSCenterView .filter-group .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_CSCenterView .filter-group .right #SearchBar {
    width: 17.5rem
}

#mo_CSCenterView .filter-group .right #Dropdown .dropdown-selected {
    width: 10rem
}

#mo_CSNotiView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_CSNotiView .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_CSNotiView .top .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_CSNotiView #mo_Dropdown .dropdown-selected {
    width: 7.5rem
}

#mo_CSNotiDetailView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_CSNotiDetailView ::-webkit-scrollbar {
    width: 1.25rem
}

#mo_CSNotiDetailView ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#mo_CSNotiDetailView ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

#mo_CSNotiDetailView .noti-header {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    gap: .25rem;
    border-top: 2px solid #333333;
    background: #f5f5f7
}

#mo_CSNotiDetailView .noti-header h6 {
    width: 100%;
    height: 3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_CSNotiDetailView .noti-header .text-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_CSNotiDetailView .noti-header .text-group p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    font-size: .875rem;
    color: #666;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_CSNotiDetailView .noti-header .text-group span.line {
    width: 1px;
    height: 1.25rem
}

#mo_CSNotiDetailView .noti-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    padding: 1.5rem .75rem;
    min-height: calc(100vh - 33.5rem);
    overflow: auto
}

#mo_CSNotiDetailView .noti-body p {
    width: 100%!important;
    word-wrap: break-word;
    word-break: keep-all
}

#mo_CSNotiDetailView .noti-body p img {
    width: 100%!important
}

#mo_CSNotiDetailView .noti-attachments {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: auto;
    height: 4.5rem;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    gap: 1.5rem
}

#mo_CSNotiDetailView .noti-attachments p {
    width: 100%;
    height: auto
}

#mo_CSNotiDetailView .noti-attachments p:first-child {
    width: auto;
    font-weight: 700;
    min-width: 3.75rem
}

#mo_CSNotiDetailView .noti-attachments p:last-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_CSNotiDetailView .detail-bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#mo_CSNotiDetailView .detail-bottom .post-nav {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    width: 31.25rem
}

#mo_CSNotiDetailView .detail-bottom .post-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #bfbfbf
}

#mo_CSNotiDetailView .detail-bottom .post-nav button svg {
    color: #fff
}

#mo_CSNotiDetailView .detail-bottom .post-nav .text-item {
    gap: .75rem
}

#mo_CSNotiDetailView .detail-bottom .post-nav .text-item p:first-child {
    font-weight: 700
}

#mo_CSNotiDetailView .detail-bottom .post-nav .text-item p:last-child {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 26.875rem
}

#mo_CSNotiDetailView .detail-bottom .post-nav.post-prev .text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    column-count: auto
}

#mo_CSNotiDetailView .detail-bottom .post-nav.post-prev .text-item p:last-child {
    text-align: left
}

#mo_CSNotiDetailView .detail-bottom .post-nav.next-prev {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto
}

#mo_CSNotiDetailView .detail-bottom .post-nav.next-prev .text-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    column-count: auto
}

#mo_CSNotiDetailView .detail-bottom .post-nav.next-prev .text-item p:last-child {
    text-align: right
}

#mo_CSNotiDetailView #LineButton {
    min-width: unset;
    flex: 1;
    width: 100%
}

#mo_EventView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_EventView .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_EventView .top .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_EventView .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_EventView #mo_Dropdown .dropdown-selected {
    width: 7.5rem
}

#mo_EventCard {
    position: relative;
    border-radius: .75rem;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#mo_EventCard .card-container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    gap: .75rem;
    position: absolute;
    top: 0;
    left: 0
}

#mo_EventCard .card-container .card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_EventCard .card-container .card-header .status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: auto;
    height: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 6.25rem;
    font-size: .75rem;
    color: #ff8400;
    background: #fff
}

#mo_EventCard .card-container .card-header .status.progress {
    border: 1px solid #ff8400;
    background: #ff8400;
    color: #fff
}

#mo_EventCard .card-container .card-header .status.standby {
    border: 1px solid #ff8400;
    color: #ff8400
}

#mo_EventCard .card-container .card-header .status.end {
    border: 1px solid #666666;
    color: #666
}

#mo_EventCard .card-container .card-header .date {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .125rem
}

#mo_EventCard .card-container .card-header .date p {
    font-size: .875rem;
    color: #666
}

#mo_EventCard .card-container .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_EventCard .card-container .card-body h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 11.875rem;
    height: 3rem;
    font-size: 1.125rem
}

#mo_EventCard .card-container .card-body p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 11.875rem;
    height: 2.625rem;
    font-size: .875rem;
    color: #666
}

#mo_FAQView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_FAQView .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_FAQView .top .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_FAQView #mo_Dropdown .dropdown-selected {
    width: 7.5rem
}

#mo_ServiceInquiry {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_ServiceInquiry .inquiry-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_ServiceInquiry .please-check {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    gap: 1.5rem;
    background: #f5f5f7
}

#mo_ServiceInquiry .please-check .title {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_ServiceInquiry .please-check .title p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: 1rem;
    font-weight: 700
}

#mo_ServiceInquiry .please-check .title span {
    font-size: .875rem
}

#mo_ServiceInquiry .please-check .terms {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_ServiceInquiry .please-check .terms p {
    font-size: .875rem;
    font-weight: 700
}

#mo_ServiceInquiry .please-check .terms ul {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: .75rem;
    color: #666
}

#mo_ServiceInquiry .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#mo_ServiceInquiry .button-group button {
    flex: 1
}

#mo_ServiceInquiry #CheckBox .custom-checkbox {
    width: 1.25rem;
    height: 1.25rem
}

#mo_ServiceInquiryTable {
    border-top: 2px solid #000000
}

#mo_ServiceInquiryTable .table-inner {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-bottom: unset;
    gap: 1.5rem
}

#mo_ServiceInquiryTable .file-upload-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .625rem
}

#mo_ServiceInquiryTable .file-upload-group .input-label span {
    font-size: .875rem
}

#mo_ServiceInquiryTable .file-upload-group .file-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_ServiceInquiryTable .file-upload-group .upload-info {
    padding-top: .75rem
}

#mo_ServiceInquiryTable .file-upload-group .upload-info p {
    font-size: .75rem;
    color: #666
}

#mo_ServiceInquiryCompleteView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_ServiceInquiryCompleteView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_ServiceInquiryCompleteView .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_ServiceInquiryCompleteView .top h6 {
    text-align: center
}

#mo_ServiceInquiryCompleteView .top p {
    text-align: center;
    color: #666
}

#mo_ServiceInquiryCompleteView .info-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: .75rem;
    background: #f5f5f7
}

#mo_ServiceInquiryCompleteView .info-box p {
    font-size: .875rem;
    font-weight: 700
}

#mo_ServiceInquiryCompleteView button {
    width: 100%;
    height: auto
}

#mo_PartnerRecruitView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_PartnerRecruitView .partner-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#mo_PartnerRecruitView .partner-section h5 {
    text-align: center
}

#mo_PartnerRecruitView .partner-section .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_PartnerRecruitView .partner-section .partner-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    aspect-ratio: 4/2
}

#mo_PartnerRecruitView .partner-section .partner-item .text-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_PartnerRecruitView .partner-section .partner-item .text-item h6 {
    font-size: 1rem
}

#mo_PartnerRecruitView .partner-section .partner-item .text-item p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: .875rem;
    height: 3.875rem
}

#mo_PartnerRecruitView .partner-section:last-of-type {
    border-bottom: none
}

#mo_PartnerRecruitView button {
    width: 100%;
    height: auto
}

#mo_ContentListPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_ContentListPage .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem;
    width: 100%
}

#mo_ContentListPage .flex-col {
    width: 100%
}

#mo_ContentListPage .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 3.75rem;
    width: 100%
}

#mo_ContentListPage .contents-list {
    gap: 1.5rem;
    position: relative
}

#mo_ContentListPage .contents-list .swiper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#mo_ContentListPage .contents-list .list-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    order: 1
}

#mo_ContentListPage .contents-list .list-title h5 {
    width: 100%
}

#mo_ContentListPage .contents-list .list-title .button-group {
    width: unset
}

#mo_ContentListPage .contents-list .swiper-wrapper {
    order: 2
}

#mo_ContentListPage .contents-list.hidden {
    display: none
}

#mo_ContentListPage .card-group {
    gap: 1.5rem
}

#mo_ContentListPage .card-group.swiper {
    position: unset;
    margin: unset
}

#mo_ContentListPage .card-group.swiper .swiper-button-prev,#mo_ContentListPage .card-group.swiper .swiper-button-next {
    width: 2.25rem;
    height: 2.25rem;
    top: 0;
    margin: unset
}

#mo_ContentListPage .card-group.swiper .swiper-button-prev:after,#mo_ContentListPage .card-group.swiper .swiper-button-next:after {
    font-size: 1.25rem;
    color: #000
}

#mo_ContentListPage .card-group.swiper .swiper-button-prev {
    left: unset;
    right: 4rem
}

#mo_ContentListPage .card-group .card {
    border: 1px solid #d9d9d9
}

#mo_ContentListPage .card-group #mo_ContentCard {
    width: 100%;
    height: 100%
}

#ContentsButton {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    font-weight: 700;
    gap: .5rem;
    border-radius: .75rem;
    border: 1px solid #bfbfbf;
    width: 100%;
    height: 3rem;
    color: #bfbfbf
}

#ContentsButton.active {
    color: #ff8400;
    border: 1px solid #ff8400
}

#ContentsButton.active svg {
    color: #ff8400
}

#ContentsButton svg {
    color: #bfbfbf
}

#mo_ContentsDetailView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    padding-bottom: 5rem
}

#mo_ContentsDetailView .detail-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    width: auto;
    height: 3rem;
    gap: 1.5rem
}

#mo_ContentsDetailView .detail-top button {
    width: 3rem;
    height: 3rem
}

#mo_ContentsDetailView .detail-main {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_ContentsDetailView .detail-main .content-top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    position: relative
}

#mo_ContentsDetailView .detail-main .content-top .content-img {
    width: 100%;
    height: auto;
    border-radius: .75rem;
    min-height: 12.5rem;
    aspect-ratio: 4/2.5;
    overflow: hidden
}

#mo_ContentsDetailView .detail-main .content-top .content-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-left: .5rem;
    padding-right: .5rem;
    width: auto;
    height: 2rem;
    border-radius: .375rem;
    position: absolute;
    top: .75rem;
    left: .75rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: #ff8400;
    z-index: 1
}

#mo_ContentsDetailView .detail-main .content-top .content-status.type-person {
    background: #ff8400
}

#mo_ContentsDetailView .detail-main .content-top .content-status.type-people {
    background: #202b45
}

#mo_ContentsDetailView .detail-main .content-top .content-status svg {
    color: #fff
}

#mo_ContentsDetailView .detail-main .content-top .content-text {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_ContentsDetailView .detail-main .content-top .content-text .title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    column-count: auto;
    position: relative;
    max-height: 3rem
}

#mo_ContentsDetailView .detail-main .content-top .content-text .title h6 {
    font-size: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_ContentsDetailView .detail-main .content-top .content-text p {
    font-size: .875rem;
    color: #666;
    max-height: 2.625rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_ContentsDetailView .detail-main .content-info {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem
}

#mo_ContentsDetailView .detail-main .content-info .info-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#mo_ContentsDetailView .detail-main .content-info .info-status .icon-with-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-weight: 700
}

#mo_ContentsDetailView .detail-main .content-info .info-status .link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    font-size: .75rem;
    font-weight: 700;
    color: #ff8400;
    text-decoration: underline
}

#mo_ContentsDetailView .detail-main .content-info .info-status .link svg {
    color: #ff8400
}

#mo_ContentsDetailView .detail-main .content-info .info-date {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    border-radius: .5rem;
    gap: .25rem;
    font-size: .75rem;
    background: #f5f5f7
}

#mo_ContentsDetailView .detail-main .content-info .info-date p {
    font-size: .75rem;
    font-weight: 700
}

#mo_ContentsDetailView .detail-main .content-info .info-date span {
    color: #666
}

#mo_ContentsDetailView .detail-main .button-group {
    gap: .75rem
}

#mo_ContentsDetailView .detail-main .button-group #mo_Button {
    padding-left: 1rem;
    padding-right: 1rem
}

#mo_ContentsDetailView .detail-main .button-group button {
    flex: 1
}

#mo_ContentsDetailView .detail-bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 40px
}

#mo_ContentsDetailView .detail-bottom .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    flex: 1
}

#mo_ContentsDetailView .detail-bottom .tabs-group.fixed {
    position: sticky;
    top: 4.75rem;
    background: #fff;
    z-index: 1
}

#mo_ContentsDetailView .detail-bottom .tabs-group #Tab {
    flex: 1
}

#mo_ContentsDetailView .detail-bottom .lecture-description p img {
    width: 100%!important
}

#mo_ContentsDetailView .detail-bottom .curriculum {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_ContentsDetailView .detail-bottom .curriculum .card-group {
    gap: 1.5rem
}

#mo_ContentsDetailView .detail-bottom .notice {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

.bread-crumb {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    font-weight: 700
}

.bread-crumb span {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_OrderView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_OrderView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_OrderView .total-product-price {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-end;
    column-count: auto;
    gap: .75rem;
    color: #666
}

#mo_OrderView .total-order-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: 1.5rem 2.5rem;
    border-radius: .75rem;
    background: #f5f5f7
}

#mo_OrderView .total-order-price p {
    font-size: 1.5rem
}

#mo_OrderView .total-order-price .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_OrderView .bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_OrderView .bottom .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#mo_OrderView .bottom a {
    text-decoration: underline
}

#mo_OrderView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#mo_OrderView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_OrderView .button-group.payment-group {
    grid-template-columns: repeat(5,1fr);
    display: grid
}

#mo_OrderView .button-group.payment-group #LineButton {
    min-width: unset;
    width: 100%
}

#mo_OrderView .button-group.payment-group #LineButton:active {
    color: #ff8400;
    border-color: #ff8400
}

#mo_OrderFormTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    gap: 1.5rem
}

#mo_OrderFormTable .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: .75rem;
    padding-bottom: .75rem;
    gap: .625rem
}

#mo_OrderFormTable .input-group #mo_Input {
    align-items: flex-end;
    gap: .75rem
}

#mo_OrderFormTable .input-group button {
    min-width: 8rem;
    min-height: 3rem
}

#mo_OrderInfoTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    gap: 1.5rem
}

#mo_OrderInfoTable .order {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_OrderInfoTable .order .subscribe-item,#mo_OrderInfoTable .order .notSubscribe-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_OrderInfoTable .order .delivery-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: .75rem;
    border-radius: .75rem;
    background: #f5f5f7
}

#mo_OrderInfoTable .order .delivery-item h6 {
    font-size: 1rem
}

#mo_OrderInfoTable .order .lecture-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    gap: .75rem
}

#mo_OrderInfoTable .lecture-amount {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_OrderInfoTable .lecture-amount .text-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    gap: .75rem
}

#mo_OrderInfoTable .lecture-amount .text-item p {
    font-size: 1rem
}

#mo_OrderInfoTable .lecture-amount .text-item h5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_OrderInfoTable .lecture-amount .text-item h5 span {
    font-size: 1rem;
    font-weight: 400;
    color: #333
}

#mo_OrderInfoTable .lecture-amount .text-item h6 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    color: #909090
}

#mo_OrderInfoTable .lecture-amount .text-item h6 span {
    font-size: 1rem;
    font-weight: 400;
    color: #333
}

#mo_PaymentMethod .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    gap: 2.5rem
}

#mo_PaymentMethod .payment-group {
    gap: .75rem
}

#mo_PaymentMethod .item-group {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-start;
    column-count: auto;
    gap: 1.5rem
}

#mo_PaymentMethod .item-group a {
    width: auto;
    height: auto;
    max-width: 4rem;
    font-size: .875rem;
    text-decoration: underline
}

#mo_PaymentMethod #Checkbox {
    flex: 1
}

#mo_PaymentMethod #Checkbox label {
    align-items: flex-start
}

#mo_PaymentMethod #Checkbox label .text p {
    font-size: .875rem;
    font-weight: 400
}

#mo_PaymentMethod .button-group button {
    flex: 1;
    min-width: unset
}

#mo_OrderCompleteView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_OrderCompleteView .order-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#mo_OrderCompleteView .order-state .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_OrderCompleteView .order-state .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_OrderCompleteView .order-state .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    gap: .75rem;
    background: #f5f5f7
}

#mo_OrderCompleteView .order-state .bottom .text-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: .75rem
}

#mo_OrderCompleteView .order-state .bottom .text-item>p {
    width: 4rem;
    height: auto;
    font-size: .875rem;
    font-weight: 700
}

#mo_OrderCompleteView .order-state .bottom .text-item .context {
    display: flex;
    flex-direction: column;
    align-items: unse;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#mo_OrderCompleteView .order-state .bottom .text-item .context p {
    font-size: .875rem
}

#mo_OrderCompleteView .order-state .bottom .text-item .context p:nth-child(2) {
    color: #666
}

#mo_OrderCompleteView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_OrderCompleteView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#mo_OrderCompleteView .button-group button {
    flex: 1
}

#mo_OrderCompleteTable {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_OrderCompleteTable .item-group {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto
}

#mo_OrderCompleteTable .item-group .th {
    width: 6.25rem;
    height: auto;
    min-width: 6.25rem;
    font-weight: 700
}

#mo_OrderCompleteTable .item-group .td {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    word-break: keep-all
}

#mo_OrderCompleteTable .item-group .td span {
    font-size: .875rem;
    color: #666
}

#mo_OrderCompleteTable .item-group .td span:last-child {
    color: #ff8400
}

#mo_OrderCompleteTable .total-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_OrderCompleteTable .total-price p {
    width: 6.25rem;
    height: auto;
    min-width: 6.25rem
}

#mo_OrderCompleteTable .total-price h5 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_OrderCompleteTable .total-price h5 span {
    font-size: 1rem;
    font-weight: 400;
    color: #333
}

#mo_OrderFailedView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_OrderFailedView .order-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#mo_OrderFailedView .order-state .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_OrderFailedView .order-state .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_OrderFailedView .order-state .top p {
    font-size: 1rem;
    color: #666
}

#mo_OrderFailedView .order-state .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: .75rem;
    gap: .75rem;
    background: #f5f5f7
}

#mo_OrderFailedView .order-state .bottom p {
    font-size: .875rem;
    font-weight: 700
}

#mo_OrderFailedView .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#mo_OrderFailedView .button-group button {
    flex: 1;
    min-width: unset
}

#mo_MyPageView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_MyPageView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_MyPageView .tabs-group #Tab {
    width: 100%;
    height: 3.75rem;
    flex: 1
}

#mo_MyProfileView,#mo_MyProfileEditView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_MyProfileView .info-form,#mo_MyProfileEditView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_MyProfileView .bottom,#mo_MyProfileEditView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_MyProfileView .bottom .button-group,#mo_MyProfileEditView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: .75rem
}

#mo_MyProfileView .bottom .button-group button,#mo_MyProfileEditView .bottom .button-group button {
    flex: 1;
    min-width: unset
}

#mo_MyProfileView .bottom a,#mo_MyProfileEditView .bottom a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    position: relative;
    font-size: .75rem;
    font-weight: 700;
    color: #ff8400
}

#mo_MyProfileView .bottom a:after,#mo_MyProfileEditView .bottom a:after {
    width: 100%;
    height: 1px;
    content: "";
    position: absolute;
    bottom: 0;
    background: #ff8400
}

#mo_ProfileTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #d9d9d9;
    gap: .75rem
}

#mo_ProfileTable .tr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_ProfileTable .tr.flex-col {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_ProfileTable .tr.flex-col .th p {
    font-size: .875rem
}

#mo_ProfileTable .tr.flex-col .td {
    padding: .75rem .5rem;
    border-bottom: 1px solid #d9d9d9;
    background: #f5f5f7
}

#mo_ProfileTable .tr .th {
    width: 100%;
    height: auto;
    max-width: 6.25rem
}

#mo_ProfileTable .tr .td {
    font-weight: 700
}

#mo_ProfileTable .tr .td .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_ProfileTable #Checkbox p {
    font-size: .875rem;
    font-weight: 400
}

#mo_EditFormTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    gap: 1.5rem;
    padding-bottom: unset
}

#mo_EditFormTable .tr {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_EditFormTable .tr .th {
    width: 100%;
    height: auto
}

#mo_EditFormTable .tr .th p {
    font-size: .875rem
}

#mo_EditFormTable .tr .td .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_EditFormTable .tr .td .item-group #mo_Input {
    flex: 1
}

#mo_EditFormTable .tr .td .item-group #Checkbox {
    padding-top: .75rem;
    padding-bottom: .75rem
}

#mo_EditFormTable .tr .td .item-group #Checkbox p {
    font-size: .875rem;
    font-weight: 400
}

#mo_MyProfileEditView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_MyPurchaseHistory .list-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_MyPurchaseHistory .list-group .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#mo_MyPurchaseHistory .list-group .title a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-top: .125rem;
    padding-bottom: .125rem;
    border-bottom: 1px solid #ff8400;
    font-weight: 700
}

#mo_PurchaseHistoryTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    border-bottom: 1px solid #d9d9d9;
    gap: 1.5rem
}

#mo_PurchaseHistoryTable .list-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_PurchaseHistoryTable .list-item:after {
    content: "";
    border-bottom: 1px solid #d9d9d9;
    padding-top: .75rem
}

#mo_PurchaseHistoryTable .list-item:last-child:after {
    display: none
}

#mo_PurchaseHistoryTable .list-item .lecture-context {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_PurchaseHistoryTable .list-item .lecture-img {
    border-radius: .75rem;
    overflow: hidden
}

#mo_PurchaseHistoryTable .list-item .top {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: space-between;
    column-count: auto
}

#mo_PurchaseHistoryTable .list-item .top .title {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    flex: 1
}

#mo_PurchaseHistoryTable .list-item .top a {
    cursor: pointer;
    width: auto;
    height: 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    border-bottom: 1px solid #000000
}

#mo_PurchaseHistoryTable .list-item .bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_PurchaseHistoryTable .list-item .bottom .lecture-option {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_PurchaseHistoryTable .list-item .bottom .lecture-option .lh {
    width: 100%;
    height: auto;
    max-width: 6.25rem
}

#mo_PurchaseHistoryTable .list-item .bottom .lecture-option .ld {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: 700
}

#mo_PurchaseHistoryTable .list-item .button-group button {
    flex: 1;
    min-width: unset
}

#mo_PurchaseHistoryTable .list-item .button-group h6 {
    flex: 1;
    text-align: center
}

#mo_PurchaseHistoryTable.no-data .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_PurchaseHistoryTable.no-data .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_FindAccountView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindAccountView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_FindAccountView .tabs-group #Tab {
    width: 100%;
    height: 3rem;
    flex: 1
}

#mo_FindAccountView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_FindAccountView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindAccountView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_FindAccountView .bottom .button-group button {
    min-width: unset;
    flex: 1
}

#mo_FindAccountTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    gap: .75rem
}

#mo_FindAccountTable .td {
    font-weight: 700
}

#mo_FindAccountTable .td .input-group {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    column-count: auto;
    gap: .5rem
}

#mo_FindAccountTable .td .input-group #mo_Input {
    flex: 1
}

#mo_FindAccountTable .td .input-group #LineButton {
    width: auto;
    height: 3rem;
    min-width: 7.5rem
}

#mo_FindAccountTable .td .remaining-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    padding-top: .75rem
}

#mo_FindAccountTable .td .remaining-count p {
    font-size: .875rem;
    font-weight: 400
}

#mo_FindAccountTable .td .remaining-count p:first-child {
    font-weight: 700
}

#mo_FindAccountSuccessView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindAccountSuccessView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindAccountSuccessView .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_FindAccountSuccessView .top p {
    font-size: .875rem;
    color: #666
}

#mo_FindAccountSuccessView .result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-radius: .75rem;
    gap: .625rem;
    background: #fff5eb
}

#mo_FindAccountSuccessView .result a {
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid #ff8400;
    font-weight: 700
}

#mo_FindPasswordView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindPasswordView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_FindPasswordView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindPasswordView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_FindPasswordView .bottom .button-group button {
    min-width: unset;
    flex: 1
}

#mo_FindPasswordTable .wrapper,#mo_FindPasswordResetTable .wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-top: 2px solid #000000;
    gap: .75rem
}

#mo_FindPasswordTable .td,#mo_FindPasswordResetTable .td {
    font-weight: 700
}

#mo_FindPasswordTable .td .input-group,#mo_FindPasswordResetTable .td .input-group {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    column-count: auto;
    gap: .5rem
}

#mo_FindPasswordTable .td .input-group #mo_Input,#mo_FindPasswordResetTable .td .input-group #mo_Input {
    flex: 1
}

#mo_FindPasswordTable .td .input-group #LineButton,#mo_FindPasswordResetTable .td .input-group #LineButton {
    width: auto;
    height: 3rem;
    min-width: 7.5rem
}

#mo_FindPasswordTable .td .remaining-count,#mo_FindPasswordResetTable .td .remaining-count {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    padding-top: .75rem
}

#mo_FindPasswordTable .td .remaining-count p,#mo_FindPasswordResetTable .td .remaining-count p {
    font-size: .875rem;
    font-weight: 400
}

#mo_FindPasswordTable .td .remaining-count p:first-child,#mo_FindPasswordResetTable .td .remaining-count p:first-child {
    font-weight: 700
}

#mo_FindPasswordResetView {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindPasswordResetView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#mo_FindPasswordResetView .top .icon-img {
    width: 3.75rem;
    height: 3.75rem;
    aspect-ratio: 1/1
}

#mo_FindPasswordResetView .top h6 {
    text-align: center
}

#mo_FindPasswordResetView .info-form {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_FindPasswordResetView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2.5rem
}

#mo_FindPasswordResetView .bottom .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_FindPasswordResetView .bottom .button-group button {
    min-width: unset;
    flex: 1
}

#mo_FindPasswordResetTable .wrapper {
    gap: 1.5rem
}

#mo_DeleteAccountView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_InputPasswordView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 2.5rem
}

#mo_InputPasswordView>p {
    font-size: 1rem;
    color: #666
}

#mo_InputPasswordView .box-item {
    border-radius: .75rem;
    width: 100%;
    height: auto
}

#mo_InputPasswordView button {
    width: 100%;
    height: auto
}

#mo_DeleteAgreeView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_DeleteAgreeView #Checkbox p {
    font-size: .875rem;
    font-weight: 400
}

#mo_DeleteAgreeView .top,#mo_DeleteAgreeView .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 2.5rem
}

#mo_DeleteAgreeView .box-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    gap: 1.5rem;
    background: #f5f5f7
}

#mo_DeleteAgreeView .box-item .box-header {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_DeleteAgreeView .box-item .box-header .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_DeleteAgreeView .box-item .box-header h6 {
    font-size: 1rem
}

#mo_DeleteAgreeView .box-item .box-header p {
    font-size: .875rem
}

#mo_DeleteAgreeView .box-item .box-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_DeleteAgreeView .box-item .box-body .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_DeleteAgreeView .box-item .box-footer ul li {
    font-size: .75rem;
    color: #666
}

#mo_DeleteAgreeView .button-group {
    width: 100%;
    height: auto
}

#mo_DeleteAgreeView .button-group button {
    min-width: unset;
    flex: 1
}

#mo_DeleteCompleteView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 3.75rem
}

#mo_DeleteCompleteView .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_DeleteCompleteView .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_DeleteCompleteView .top p {
    font-size: 1rem;
    color: #666;
    text-align: center
}

#mo_DeleteCompleteView button {
    width: 100%;
    height: auto
}

#mo_CompanyView {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_CompanyView .tabs-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_PageContext {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 2.5rem
}

#mo_PageContext .section-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .625rem
}

#mo_PageContext .section-title p {
    color: #666
}

#mo_PageContext ul.introduction-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_PageContext ul.introduction-text li {
    font-size: 1rem;
    text-align: center;
    color: #666;
    word-break: keep-all
}

#mo_PageContext .circle-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 18.75rem;
    height: 10rem;
    position: relative
}

#mo_PageContext .circle-group .circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    position: absolute;
    top: 0;
    gap: .75rem;
    background: #ff8400;
    color: #fff;
    mix-blend-mode: multiply
}

#mo_PageContext .circle-group .circle p {
    word-break: keep-all;
    text-align: center
}

#mo_PageContext .circle-group .circle p:first-child {
    font-size: 1rem;
    font-weight: 700
}

#mo_PageContext .circle-group .circle p:last-child {
    font-size: .75rem
}

#mo_PageContext .circle-group .circle:nth-child(1) {
    left: 0
}

#mo_PageContext .circle-group .circle:nth-child(2) {
    right: 0
}

#mo_PageContext .logo-group {
    gap: 1.25rem
}

#mo_PageContext .address {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: .75rem
}

#mo_PageContext .address p.h7 {
    font-size: 1rem;
    font-weight: 700
}

#mo_PageContext .address .text-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_PageContext .address .text-group .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_PageContext .address .text-group .text p {
    font-size: 1rem;
    color: #666
}

#mo_PageContext .address .text-group .text p:first-child {
    font-weight: 700
}

#mo_PageContext .history-section {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_PageContext .history-section .context,#mo_PageContext .history-section .top,#mo_PageContext .history-section .top .years {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem
}

#mo_PageContext .history-section .bottom {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.25rem
}

#mo_PageContext .history-section .bottom .month {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_PageContext .history-section .bottom .month ul {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem;
    margin-left: .75rem
}

#mo_PageContext .history-section .bottom .month ul li {
    word-break: keep-all;
    text-indent: -.75rem;
    font-size: 1rem;
    color: #666
}

#mo_GNB {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    position: sticky;
    top: 0;
    max-width: 48rem;
    padding: unset;
    background: #fff;
    z-index: 999
}

#mo_GNB .top {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    column-count: auto;
    width: 100%;
    height: auto;
    padding: 1.25rem;
    border-bottom: 1px solid #d9d9d9
}

#mo_GNB .top.active {
    gap: 1.25rem;
    flex: 1
}

#mo_GNB .top.active .button-group {
    flex: 1
}

#mo_GNB .top.active .button-group #Input {
    width: 100%
}

#mo_GNB .top.active .button-group #Input .input-item .input input {
    opacity: 1
}

#mo_GNB .top .logo {
    width: 11.625rem;
    height: 2rem
}

#mo_GNB .top .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto;
    gap: 1.25rem
}

#mo_GNB .top .button-group #Input {
    width: 0;
    animation: Progress .8s
}

#mo_GNB .top .button-group #Input .input-item {
    height: 2.25rem
}

#mo_GNB .top .button-group #Input .input-item .input input {
    padding: 0;
    opacity: 0;
    animation: Opacity .8s
}

#mo_GNB .top .button-group #Input .input-item svg {
    position: absolute;
    right: 0
}

#mo_GNB .bottom {
    width: 100%;
    height: 3rem;
    padding: .75rem 1.25rem
}

#mo_GNB .bottom .swiper {
    max-width: 100%
}

#mo_GNB .bottom .swiper .swiper-slide {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap
}

#mo_GNB .bottom .menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_GNB .bottom .menu-item a {
    white-space: nowrap
}

#mo_GlobalGNB {
    border-radius: 0;
    background: #fff;
    animation: none;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    overflow: hidden
}

#mo_GlobalGNB .modal-dialog {
    width: 100%;
    height: 100%;
    border-radius: unset;
    top: 0;
    left: 0;
    transform: translate(0);
    padding: unset;
    gap: unset;
    max-width: 768px;
    will-change: transform,opacity;
    animation: MoGnbLeft .5s
}

#mo_GlobalGNB .modal-header {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_GlobalGNB .modal-header .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: 1.25rem;
    border-bottom: 1px solid #d9d9d9;
    gap: 1.25rem;
    flex: 1
}

#mo_GlobalGNB .modal-header .top.active {
    gap: 1.25rem;
    flex: 1
}

#mo_GlobalGNB .modal-header .top.active .header-title {
    flex: unset
}

#mo_GlobalGNB .modal-header .top.active .button-group {
    flex: 1
}

#mo_GlobalGNB .modal-header .top.active .button-group #Input {
    width: 100%
}

#mo_GlobalGNB .modal-header .top.active .button-group #Input .input-item .input input {
    opacity: 1
}

#mo_GlobalGNB .modal-header .top .header-title {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .625rem;
    flex: 1
}

#mo_GlobalGNB .modal-header .top .header-title h6 {
    flex: 1
}

#mo_GlobalGNB .modal-header .top .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto;
    gap: 1.25rem
}

#mo_GlobalGNB .modal-header .top .button-group #Input {
    width: 0;
    animation: Progress .8s
}

#mo_GlobalGNB .modal-header .top .button-group #Input .input-item {
    height: 2.25rem
}

#mo_GlobalGNB .modal-header .top .button-group #Input .input-item .input input {
    padding: 0;
    opacity: 0;
    animation: Opacity .8s
}

#mo_GlobalGNB .modal-header .top .button-group #Input .input-item svg {
    position: absolute;
    right: 0
}

#mo_GlobalGNB .modal-header .bottom {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: 1.25rem;
    gap: .75rem
}

#mo_GlobalGNB .modal-header .bottom button {
    width: auto;
    height: 3rem
}

#mo_GlobalGNB .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: space-between;
    column-count: auto;
    width: 100%;
    height: 100%;
    position: relative;
    background: #f5f5f7
}

#mo_GlobalGNB .modal-body p {
    height: unset;
    text-align: left
}

#mo_GlobalGNB .modal-body ul.menu li {
    cursor: pointer;
    padding: .75rem 1.25rem;
    color: #666;
    transition: all .3s
}

#mo_GlobalGNB .modal-body ul.menu li.active {
    font-weight: 700;
    color: #000;
    background: #fff
}

#mo_GlobalGNB .modal-body ul.contents-menu {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 60%;
    max-width: 60%;
    background: #fff;
    overflow: auto;
    display: none;
    opacity: 0;
    animation: FadeLeft .3s
}

#mo_GlobalGNB .modal-body ul.contents-menu.active {
    display: block;
    opacity: 1
}

#mo_GlobalGNB .modal-body ul.contents-menu li {
    cursor: pointer
}

#mo_GlobalGNB .modal-body ul.contents-menu li .menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: .75rem 1.25rem
}

#mo_GlobalGNB .modal-body ul.contents-menu li .menu-item>p {
    font-size: .875rem;
    font-weight: 700;
    color: #000
}

#mo_GlobalGNB .modal-body ul.contents-menu li .menu-item svg {
    transition: all .3s
}

#mo_GlobalGNB .modal-body ul.contents-menu li.active svg {
    transform: rotate(180deg)
}

#mo_GlobalGNB .modal-body ul.contents-menu li.active ul.contents-submenu {
    display: flex;
    opacity: 1
}

#mo_GlobalGNB .modal-body ul.contents-menu li.active ul.contents-submenu li {
    animation: FadeDown .3s
}

#mo_GlobalGNB .modal-body ul.contents-submenu {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    display: none;
    opacity: 0
}

#mo_GlobalGNB .modal-body ul.contents-submenu li {
    cursor: pointer;
    flex: 1
}

#mo_GlobalGNB .modal-body ul.contents-submenu li>p {
    display: block;
    padding: .5rem 1.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: .875rem;
    color: #666
}

#mo_GlobalGNB .modal-body ul.contents-submenu li.active>p {
    color: #ff8400
}
#mo_GlobalGNB .modal-body .footer-menu {
  display: flex;
}

#mo_GlobalGNB .modal-body .link_area { 
        position: absolute;
    bottom: 0;
    right: 0;
 }

#mo_GlobalGNB .modal-body .footer-menu .btn_area {

}

#mo_GlobalGNB .modal-body .footer-menu .button-group {
    padding: .75rem 1.25rem
}

#mo_Footer {
    padding: 1.5rem 1.25rem;
    background: #333
}

#mo_Footer .container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1.5rem;
    max-width: unset;
    margin: 0 auto
}

#mo_Footer .footer-top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-bottom: 1px solid rgba(245,245,247,.1);
    gap: 1.5rem;
    padding-bottom: 1.5rem
}

#mo_Footer .footer-top .logo {
    width: 8.875rem;
    height: 2rem
}

#mo_Footer .footer-top #mo_Dropdown .dropdown-selected {
    color: #fff
}

#mo_Footer .footer-top #mo_Dropdown .dropdown-selected p {
    font-size: .75rem
}

#mo_Footer .footer-top #mo_Dropdown .dropdown-selected svg {
    color: #fff
}

#mo_Footer .footer-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#mo_Footer .footer-body .left {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_Footer .footer-body .left .text-group {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-start;
    column-count: auto;
    gap: .5rem
}

#mo_Footer .footer-body .left .text-group.flex-col {
    flex-direction: column!important
}

#mo_Footer .footer-body .left .text-group:nth-child(3) {
    flex-direction: column;
    gap: .125rem
}

#mo_Footer .footer-body .left .text-group:last-child .text {
    gap: .75rem
}

#mo_Footer .footer-body .left .text {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    color: #fff
}

#mo_Footer .footer-body .left .text p {
    font-size: .75rem;
    word-break: keep-all
}

#mo_Footer .footer-body .left .text p:first-child {
    white-space: nowrap;
    font-weight: 700
}

#mo_Footer .footer-body .left .text p.null {
    opacity: 0
}

#mo_Footer .footer-body .right {
    color: #fff;
    font-weight: 700;
    padding-top: .625rem;
    text-decoration: underline
}

#mo_Footer .footer-body .right ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_Footer .footer-body .right ul a {
    font-size: .75rem
}

#mo_Footer .footer-body .button-group {
    padding-top: .625rem
}

#mo_Footer .footer-bottom p.copyright {
    font-size: .75rem;
    color: #f5f5f7
}

#mo_Button.sm {
    height: 1.5rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: .5rem;
    padding-right: .5rem
}

#mo_Button.sm p {
    font-size: .75rem;
    white-space: nowrap
}

#mo_Button.md {
    height: 2rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#mo_Button.md p {
    font-size: .875rem;
    white-space: nowrap
}

#mo_Button.lg {
    height: 3rem;
    gap: .25rem;
    border-radius: .5rem;
    font-weight: 700;
    padding-left: 2rem;
    padding-right: 2rem;
    min-height: 3.75rem
}

#mo_Button.lg p {
    font-size: 1rem;
    white-space: nowrap
}

#mo_Button.xl {
    height: 3.75rem;
    gap: .25rem;
    border-radius: .5rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#mo_Button.xl p {
    font-size: 1rem;
    white-space: nowrap
}

#mo_Button.round {
    border-radius: 6.25rem
}

#mo_Button.primary {
    color: #fff;
    background: #ff8400
}

#mo_Button.primary:hover {
    background: #ffb566
}

#mo_Button.primary:hover svg {
    color: #fff
}

#mo_Button.primary:active {
    background: #ffce99
}

#mo_Button.primary.active {
    color: #ff8400;
    background: #fff
}

#mo_Button.primary.border {
    border: 1px solid #ffffff
}

#mo_Button.primary svg {
    color: #fff
}

#mo_Button.secondary {
    color: #fff;
    background: #202b45
}

#mo_Button.secondary:hover {
    background: #4e546b
}

#mo_Button.secondary:active {
    background: #a5aab5
}

#mo_Button.secondary svg {
    color: #fff
}

#mo_Button.negative {
    color: #333;
    background: #fff
}

#mo_Button.negative:hover {
    color: #666;
    background: #fff
}

#mo_Button.negative:active {
    color: #bfbfbf;
    background: #fff
}

#mo_Button.negative svg {
    color: #fff
}

#mo_Button.disabled {
    cursor: default;
    background: #dedede
}

#mo_Button.disabled:hover,#mo_Button.disabled:active {
    background: #dedede
}

#FileUploadButton {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 10rem;
    height: 3rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem;
    color: #fff;
    background: #ff8400
}

#FileUploadButton p {
    font-size: 1rem;
    white-space: nowrap
}

#FileUploadButton:hover {
    background: #ffb566
}

#FileUploadButton:active {
    background: #ffce99
}

#LineButton {
    border: 1px solid transparent;
    background: unset
}

#LineButton.sm {
    height: 1.5rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: .5rem;
    padding-right: .5rem
}

#LineButton.sm p {
    font-size: .75rem;
    white-space: nowrap
}

#LineButton.md {
    height: 2rem;
    gap: .25rem;
    border-radius: .375rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#LineButton.md p {
    font-size: .875rem;
    white-space: nowrap
}

#LineButton.lg {
    height: 3rem;
    gap: .25rem;
    border-radius: .5rem;
    font-weight: 700;
    padding-left: 2rem;
    padding-right: 2rem;
    min-width: 15rem;
    min-height: 3.75rem
}

#LineButton.lg p {
    font-size: 1rem;
    white-space: nowrap
}

#LineButton.xl {
    height: 3.75rem;
    gap: .25rem;
    border-radius: .5rem;
    font-weight: 700;
    padding-left: 1rem;
    padding-right: 1rem
}

#LineButton.xl p {
    font-size: 1rem;
    white-space: nowrap
}

#LineButton.round {
    border-radius: 6.25rem
}

#LineButton.primary {
    color: #ff8400;
    border-color: #ff8400
}

#LineButton.primary:hover {
    color: #ffb566;
    border-color: #ffb566
}

#LineButton.primary:hover svg {
    color: #ffb566
}

#LineButton.primary:active {
    color: #ffce99;
    border-color: #ffce99
}

#LineButton.primary:active svg {
    color: #ffce99
}

#LineButton.primary svg {
    color: #ff8400
}

#LineButton.negative {
    color: #333;
    border-color: #333
}

#LineButton.negative:hover {
    color: #444;
    border-color: #444
}

#LineButton.negative:hover svg {
    color: #444
}

#LineButton.negative:active {
    color: #666;
    border-color: #666
}

#LineButton.negative:active svg {
    color: #666
}

#LineButton.negative svg {
    color: #333
}

#LineButton.disabled {
    cursor: default;
    color: #dedede;
    border-color: #dedede
}

#LineButton.disabled:hover,#LineButton.disabled:active {
    color: #dedede;
    border-color: #dedede
}

#LinkButton {
    position: relative;
    background: unset
}

#LinkButton.sm {
    height: 1.75rem;
    gap: 0rem;
    border-radius: 0rem;
    font-weight: 700
}

#LinkButton.sm p {
    font-size: .75rem;
    white-space: nowrap
}

#LinkButton.sm .border-bottom {
    width: 100%;
    height: 1px
}

#LinkButton.md {
    height: 2rem;
    gap: 0rem;
    border-radius: 0rem;
    font-weight: 700
}

#LinkButton.md p {
    font-size: 1rem;
    white-space: nowrap
}

#LinkButton.md .border-bottom {
    width: 100%;
    height: 1px
}

#LinkButton.lg {
    height: 2.75rem;
    gap: .25rem;
    border-radius: 0rem;
    font-weight: 700
}

#LinkButton.lg p {
    font-size: 1.5rem;
    white-space: nowrap
}

#LinkButton.lg .border-bottom {
    width: 100%;
    height: 2px
}

#LinkButton.primary {
    color: #ff8400
}

#LinkButton.primary .border-bottom {
    background: #ff8400
}

#LinkButton.primary:hover {
    color: #ffb566
}

#LinkButton.primary:hover .border-bottom {
    background: #ffb566
}

#LinkButton.primary:active {
    color: #ffce99
}

#LinkButton.primary:active .border-bottom {
    background: #ffce99
}

#LinkButton.secondary {
    color: #202b45
}

#LinkButton.secondary .border-bottom {
    background: #202b45
}

#LinkButton.secondary:hover {
    color: #4e546b
}

#LinkButton.secondary:hover .border-bottom {
    background: #4e546b
}

#LinkButton.secondary:active {
    color: #a5aab5
}

#LinkButton.secondary:active .border-bottom {
    background: #a5aab5
}

#LinkButton.negative {
    color: #333
}

#LinkButton.negative .border-bottom {
    background: #333
}

#LinkButton.negative:hover {
    color: #444
}

#LinkButton.negative:hover .border-bottom {
    background: #444
}

#LinkButton.negative:active {
    color: #666
}

#LinkButton.negative:active .border-bottom {
    background: #666
}

#LinkButton.disabled {
    cursor: default;
    color: #dedede
}

#LinkButton.disabled .border-bottom {
    background: #dedede
}

#LinkButton.disabled:hover,#LinkButton.disabled:active {
    color: #dedede
}

#LinkButton.disabled:hover .border-bottom,#LinkButton.disabled:active .border-bottom {
    background: #dedede
}

#LinkButton .border-bottom {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0
}

#mo_Language {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 1rem
}

#mo_Language .language-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_Language .language-item:after {
    content: "•";
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: .25rem;
    height: .25rem;
    position: absolute;
    top: 45%;
    right: -.5rem;
    transform: translateY(-50%);
    color: #d9d9d9
}

#mo_Language .language-item:last-child:after {
    display: none
}

#mo_Language .language-item.active p {
    font-weight: 700;
    color: #ff8400
}

#mo_Language .language-item svg {
    color: #ff8400
}

#mo_Language .language-item p {
    height: unset;
    font-size: .875rem;
    color: #909090
}

#mo_Tab {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    flex: 1;
    position: relative;
    gap: .75rem;
    color: #bfbfbf;
    width: fit-content
}

#mo_Tab p,#mo_Tab a {
    flex: 1;
    font-size: 1rem;
    text-align: center
}

#mo_Tab.line.active {
    color: #ff8400
}

#mo_Tab.line.active .border {
    background: #ff8400;
    width: 100%;
    height: 2px
}

#mo_Tab.line .border {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #bfbfbf;
    width: 100%;
    height: 1px
}

#mo_Tab.box.active {
    color: #fff;
    background: #ff8400
}

#mo_Tab.box.active .border {
    border: 2px solid #ff8400
}

#mo_Tab.box .border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #bfbfbf
}

#mo_Tab.round {
    font-weight: 700;
    gap: .25rem;
    border-radius: 6.25rem
}

#mo_Tab.round.active {
    color: #ff8400;
    background: #ffe6cc
}

#mo_Tab.sm {
    height: 2.125rem;
    gap: .25rem;
    font-weight: 700
}

#mo_Tab.sm a {
    font-size: .75rem
}

#mo_Tab.sm p,#mo_Tab.sm a {
    padding-top: .5rem;
    padding-bottom: .5rem
}

#mo_Tab.md {
    height: 3rem;
    gap: .25rem;
    font-weight: 700
}

#mo_Tab.md a {
    font-size: 1rem
}

#mo_Tab.md p,#mo_Tab.md a {
    padding-top: .75rem;
    padding-bottom: .75rem
}

#mo_Tab.lg {
    height: 4.25rem;
    gap: .25rem;
    font-weight: 700
}

#mo_Tab.lg a {
    font-size: 1.5rem
}

#mo_Tab.lg p,#mo_Tab.lg a {
    padding-top: 1rem;
    padding-bottom: 1rem
}

#mo_CSNotiTable {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #000000
}

#mo_CSNotiTable .list {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    border-bottom: 1px solid #d9d9d9;
    gap: .25rem
}

#mo_CSNotiTable .list p {
    width: 100%;
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

#mo_CSNotiTable .list .date {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_CSNotiTable .list .date span {
    font-size: .875rem;
    color: #666
}

#mo_CSNotiTable .list .date span:after {
    content: "|";
    padding-left: .5rem
}

#mo_CSNotiTable .list .date span:last-child:after {
    display: none
}

#mo_FAQTable {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #000000
}

#mo_FAQTable .data-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-bottom: 1px solid #d9d9d9;
    gap: .25rem
}

#mo_FAQTable .data-item.show .data-context {
    display: flex;
    opacity: 1
}

#mo_FAQTable .data-item .data-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    position: relative;
    gap: .75rem
}

#mo_FAQTable .data-item .data-list .title {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#mo_FAQTable .data-item .data-list .title p {
    width: 100%;
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

#mo_FAQTable .data-item .data-list .title span {
    font-size: .875rem;
    color: #666
}

#mo_FAQTable .data-item .data-list svg {
    transition: all .3s
}

#mo_FAQTable .data-item .data-list svg.show {
    transform: rotate(180deg)
}

#mo_FAQTable .data-item .data-context {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    border-top: 1px solid #d9d9d9;
    background: #f5f5f7;
    display: none;
    opacity: 0
}

#mo_FAQTable .data-item .data-context p {
    font-size: .875rem
}

#mo_Input {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_Input.with-text-lebel {
    gap: 1.5rem
}

#mo_Input p.text-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    min-width: 4rem;
    min-height: 3rem
}

#mo_Input .input-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#mo_Input .input-item .input-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#mo_Input .input-item .input-label span {
    font-size: .875rem;
    font-weight: 400
}

#mo_Input .input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .625rem;
    flex: 1;
    width: 100%;
    padding: .75rem .5rem
}

#mo_Input .input input {
    width: 100%;
    height: auto;
    flex: 1;
    color: #333;
    background: unset;
    z-index: 1
}

#mo_Input .input input::placeholder {
    color: #bfbfbf
}

#mo_Input .input input:focus {
    caret-color: #ff8400
}

#mo_Input .input.line .border {
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: #bfbfbf
}

#mo_Input .input.line:focus-within .border {
    background: #ff8400
}

#mo_Input .input.disabled {
    cursor: default;
    background: #f5f5f7
}

#mo_Input .input.disabled input {
    color: #666
}

#mo_Input .input svg {
    cursor: pointer
}

#TextArea {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#TextArea.with-text-lebel {
    gap: 2.5rem
}

#TextArea p.text-label {
    min-width: 4rem
}

#TextArea .input-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#TextArea .input-item .input-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#TextArea .input-item .input-label span {
    font-size: .875rem
}

#TextArea .input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .625rem;
    flex: 1;
    padding: .75rem .5rem;
    width: 100%;
    height: 4.5rem
}

#TextArea .input textarea {
    width: 100%;
    height: 100%;
    min-height: 10rem;
    flex: 1;
    color: #333;
    background: unset;
    z-index: 1;
    resize: none
}

#TextArea .input textarea::placeholder {
    color: #bfbfbf
}

#TextArea .input textarea:focus {
    caret-color: #ff8400
}

#TextArea .input.line .border {
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: #bfbfbf
}

#TextArea .input.line:focus-within .border {
    background: #ff8400
}

#TextArea .input.box .border {
    border: 1px solid #bfbfbf;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#TextArea .input.disabled {
    cursor: default;
    background: #f5f5f7
}

#TextArea .input.disabled input {
    color: #666
}

span.error-msg {
    font-size: .75rem;
    color: #ff4d4d
}

span.success-msg {
    font-size: .75rem;
    color: #62aaff
}

span.border {
    position: absolute;
    z-index: 0
}

#Checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    position: relative
}

#Checkbox input {
    position: absolute;
    visibility: hidden;
    display: none
}

#Checkbox label {
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .5rem
}

#Checkbox label .custom-checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    border: 1px solid #d9d9d9;
    border-radius: .25rem
}

#Checkbox label .custom-checkbox svg {
    opacity: 0
}

#Checkbox label .text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#Checkbox label .text p {
    font-weight: 700
}

#Checkbox input:checked+label .custom-checkbox svg {
    opacity: 1
}

#mo_Dropdown {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    position: relative
}

#mo_Dropdown[aria-readonly=readonly] .dropdown-selected {
    cursor: default;
    background: #f5f5f7
}

#mo_Dropdown .input-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: .25rem
}

#mo_Dropdown .input-label span {
    font-size: .875rem
}

#mo_Dropdown .dropdown-selected {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: .75rem .5rem;
    width: 100%;
    height: auto;
    gap: .625rem;
    color: #666
}

#mo_Dropdown .dropdown-selected.box .border {
    border: 1px solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

#mo_Dropdown .dropdown-selected.box.active .border {
    border-color: #ff8400
}

#mo_Dropdown .dropdown-selected.line .border {
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: #bfbfbf
}

#mo_Dropdown .dropdown-selected.line.active .border {
    background-color: #ff8400
}

#mo_Dropdown .dropdown-selected.round {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 6.25rem
}

#mo_Dropdown .dropdown-selected.round .border {
    border: 1px solid #d9d9d9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100px
}

#mo_Dropdown .dropdown-selected.round.active .border {
    border-color: #ff8400
}

#mo_Dropdown .dropdown-selected p {
    flex: 1
}

#mo_Dropdown .dropdown-selected svg {
    transition: all .3s
}

#mo_Dropdown .dropdown-selected.active svg {
    transform: rotate(180deg)
}

#mo_Dropdown .dropdown-list {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 999
}

#mo_Dropdown .dropdown-list.show-top {
    bottom: 3.5rem
}

#mo_Dropdown .dropdown-list.show-bottom {
    top: 3.5rem
}

#mo_Dropdown .dropdown-list.add-label.show-bottom {
    top: 5rem
}

#mo_Dropdown .dropdown-list ul {
    padding: .5rem .25rem;
    border: 1px solid #efefef;
    max-height: 12.5rem;
    overflow: auto
}

#mo_Dropdown .dropdown-list ul li {
    cursor: pointer;
    padding: .75rem .5rem;
    border-bottom: 1px solid #efefef
}

#mo_Dropdown .dropdown-list ul li:last-child {
    border: none
}

#mo_Dropdown .dropdown-list ul li.active {
    font-weight: 700
}

#mo_Dropdown .dropdown-list ul li.active.bg-gray {
    color: #000;
    background: #f5f5f7
}

#mo_Dropdown .dropdown-list ul li.active.bg-orange {
    color: #ff8400;
    background: #fff4e4
}

#mo_Dropdown .dropdown-list ul li.active.color-black {
    color: #000
}

#mo_Dropdown .dropdown-list ul li.active.color-orange {
    color: #ff8400
}

#mo_Dropdown .dropdown-list ul.box-shadow {
    box-shadow: 0 .375rem 1rem #0000001a
}

#mo_Dropdown .dropdown-list ul.round {
    border-radius: .75rem
}

#mo_Dropdown ::-webkit-scrollbar {
    width: 1.25rem
}

#mo_Dropdown ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#mo_Dropdown ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

.selected-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unse;
    column-count: auto;
    gap: .25rem
}

.selected-item span {
    font-size: .875rem
}

#SearchBar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#SearchBar.line span.border {
    width: 100%;
    height: 1px;
    left: 0;
    bottom: 0;
    background: #bfbfbf
}

#SearchBar.line:focus-within span.border {
    background: #ff8400
}

#SearchBar.box span.border {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #bfbfbf
}

#SearchBar.box:focus-within span.border {
    border-color: #ff8400
}

#SearchBar.round .input {
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 6.25rem
}

#SearchBar.round span.border {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #bfbfbf;
    border-radius: 6.25rem
}

#SearchBar.round:focus-within span.border {
    border-color: #ff8400
}

#SearchBar.disabled .input {
    background: #f5f5f7
}

#SearchBar.disabled .input input {
    cursor: default
}

#SearchBar .input-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#SearchBar .input-item .input-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    width: 100%
}

#SearchBar .input-item .input-label p {
    font-size: .875rem
}

#SearchBar .input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .625rem;
    flex: 1;
    width: 100%;
    padding: .75rem .5rem
}

#Counter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    border: 1px solid #d9d9d9;
    border-radius: .25rem
}

#Counter button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 2rem;
    height: 2rem;
    z-index: 1
}

#Counter button:first-child {
    border-right: 1px solid #d9d9d9
}

#Counter button:last-child {
    border-left: 1px solid #d9d9d9
}

#Counter button:hover {
    background: #f5f5f7
}

#Counter button:active {
    background: #efefef
}

#Counter p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 2rem;
    height: 2rem;
    font-weight: 700;
    color: #000
}

#mo_TopButton {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    position: absolute;
    right: 1.25rem;
    bottom: 5rem;
    color: #fff;
    background: #000;
    box-shadow: 0 .25rem .625rem #0000001a;
    z-index: 999;
    animation: FadeDown .3s;
    display: none;
    opacity: 0
}

#mo_TopButton.sticky {
    display: flex;
    position: fixed;
    animation: FadeUp .3s;
    opacity: 1
}

#mo_TopButton.fixed {
    display: flex;
    bottom: 31rem;
    animation: NoneAni 0s;
    opacity: 1
}

#mo_TopButton svg {
    color: #fff
}

#mo_ChatBot {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: .5rem .75rem;
    border-radius: 6.25rem;
    position: absolute;
    right: 1.25rem;
    bottom: 5rem;
    gap: .25rem;
    padding: .5rem .75rem .5rem 3.25rem;
    color: #fff;
    background: #ff8400;
    box-shadow: 0 .25rem .625rem #0000001a;
    z-index: 999;
    animation: FadeDown .3s;
    display: none;
    opacity: 0
}

#mo_ChatBot.sticky {
    display: flex;
    position: fixed;
    animation: FadeUp .3s;
    opacity: 1
}

#mo_ChatBot.fixed {
    display: flex;
    bottom: 27rem;
    animation: NoneAni 0s;
    opacity: 1
}

#mo_ChatBot .chatbot-img {
    position: absolute;
    left: .75rem;
    top: .5rem;
    width: 2.25rem;
    height: 2.25rem
}

#mo_ChatBot p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: 1rem;
    font-weight: 700
}

#mo_ChatBot i {
    font-size: 1.5rem
}

#mo_PagingNavigator {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_PagingNavigator .pagination-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    margin: 0 auto
}

#mo_PagingNavigator button {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f5f5f7;
    color: #bfbfbf
}

#mo_PagingNavigator a {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 1.5rem;
    height: 1.5rem
}

#mo_PagingNavigator a.active {
    border-radius: 50%;
    background: #ff8400;
    color: #fff
}

.chip {
    padding-left: 1rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: fit-content;
    height: 2rem;
    font-size: .75rem;
    white-space: nowrap;
    color: #ff8400;
    background: #fff;
    border: 1px solid #ff8400;
    border-radius: 6.25rem;
    box-sizing: border-box;
    letter-spacing: 0
}

.card-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_Categories {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    width: 100%;
    max-width: 768px
}

#mo_Categories .categories-item {
    cursor: pointer;
    color: #666;
    width: auto;
    flex-shrink: 0;
    white-space: nowrap
}

#mo_Categories .categories-item.active {
    color: #ff8400;
    font-weight: 700
}

#mo_Categories .categories-item p {
    font-size: 1.125rem
}

#mo_BottomSheet .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    padding: .625rem;
    border-radius: .75rem;
    gap: 1.5rem;
    position: absolute;
    top: unset;
    left: unset;
    transform: unset;
    bottom: 0;
    background: #fff;
    animation: FadeUp .3s;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset
}

#mo_BottomSheet .modal-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto
}

#mo_BottomSheet .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    max-height: 65vh;
    overflow: auto;
    gap: 1.5rem
}

#mo_BottomSheet .modal-body p {
    height: unset
}

#mo_BottomSheet .modal-body .input {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_BottomSheet .modal-body .option-box {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_BottomSheet .modal-body .option-box h6 {
    font-size: 1rem
}

#mo_BottomSheet .modal-body .option-box .input-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_BottomSheet .modal-body .option-selected {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: .75rem
}

#mo_BottomSheet .modal-body .option-selected .selected-item {
    padding-left: .75rem;
    padding-right: .75rem
}

#mo_BottomSheet .modal-body .option-selected .selected-item .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    gap: .75rem
}

#mo_BottomSheet .modal-body .option-selected .selected-item .item-group .right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem;
    flex: 1
}

#mo_BottomSheet .modal-body .option-selected .selected-item .item-group .right .price-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#mo_BottomSheet .modal-body .option-selected .selected-item .item-group .right .before-price,#mo_BottomSheet .modal-body .option-selected .selected-item .item-group .right .after-price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    column-count: auto;
    gap: .25rem
}

#mo_BottomSheet .modal-body .option-selected .selected-item .item-group .right .before-price p {
    font-size: .875rem
}

#mo_BottomSheet .modal-body .option-selected .delivery-amt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: .5rem .75rem;
    background: #f5f5f7
}

#mo_BottomSheet .modal-body .option-selected .delivery-amt .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_BottomSheet .modal-body .option-selected .delivery-amt .price-item h6 {
    color: #666
}

#mo_BottomSheet .modal-body .option-selected .delivery-amt .price-item p {
    font-weight: 700
}

#mo_BottomSheet .modal-body .option-result {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto
}

#mo_BottomSheet .modal-body .option-result .price-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .25rem
}

#mo_BottomSheet .modal-body .option-result .price-item p {
    font-weight: 700;
    color: #000
}

#mo_BottomSheet .modal-footer button {
    flex: 1
}

#mo_InputSearch .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100vh;
    border-radius: 0;
    position: fixed;
    top: unset;
    left: unset;
    transform: unset;
    bottom: 0;
    background: #fff;
    animation: FadeDown .3s;
    padding: unset;
    gap: unset
}

#mo_InputSearch .modal-header {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_InputSearch .modal-header .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    padding: 1.25rem;
    gap: 1.25rem;
    flex: 1
}

#mo_InputSearch .modal-header .top #Input {
    flex: 1
}

#mo_InputSearch .modal-header .top .button-group {
    gap: 1.25rem
}

#TopBanner {
    background: #ff8400;
    width: 100%;
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease-out
}

#TopBanner .wrapper {
    position: relative;
    margin: 0 auto
}

#TopBanner .wrapper svg {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    color: #fff
}

#TopBanner.close {
    height: 0;
    animation: FoldBanner .3s ease-out forwards;
    transform: translateZ(0);
    opacity: 0
}

#mo_PageNotFound .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: .75rem
}

#mo_PageNotFound .top .icon-img {
    width: 3.75rem;
    height: 3.75rem
}

#mo_PageNotFound .top p {
    font-size: 1rem;
    color: #666;
    text-align: center
}

.modal.mobile {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000000b3;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 9999;
    animation: Opacity .3s;
    display: block
}

.modal.mobile .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 2rem;
    width: 20rem;
    height: 10rem;
    padding: 1.25rem;
    border-radius: .75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff
}

.modal.mobile .modal-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

.modal.mobile .modal-footer {
    width: 100%
}

.modal.mobile .modal-footer .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

.modal.mobile .modal-footer .button-group #Button,.modal.mobile .modal-footer .button-group #LineButton {
    min-width: unset;
    min-height: unset;
    width: 100%
}

#CommonAlert .modal-body p {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    height: 3rem
}

#mo_FindPasswordInfoAlert .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    padding: 1.25rem;
    border-radius: .75rem;
    gap: 1.5rem;
    position: absolute;
    top: unset;
    left: unset;
    transform: unset;
    bottom: 0;
    background: #fff;
    animation: FadeUp .3s;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset
}

#mo_FindPasswordInfoAlert .modal-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_FindPasswordInfoAlert .modal-header .title {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_FindPasswordInfoAlert .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 1rem
}

#mo_FindPasswordInfoAlert .modal-body p {
    height: unset;
    font-size: .875rem;
    font-weight: 700;
    text-align: left;
    word-break: keep-all
}

#mo_FindPasswordInfoAlert .modal-body ul.info-context li {
    font-size: .875rem
}

#mo_FindPasswordInfoAlert .modal-footer .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_FindPasswordInfoAlert .modal-footer .button-group button {
    flex: 1;
    min-width: unset
}

#mo_PageHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: .625rem
}

#mo_PageHeader p {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    font-size: 1rem;
    text-align: center;
    color: #666
}

#mo_ContentCard {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100%;
    gap: .5rem;
    background: #fff;
    overflow: hidden
}

#mo_ContentCard .card-header {
    position: relative
}

#mo_ContentCard .card-header .card-img {
    border-radius: .75rem;
    width: 100%;
    height: 100%;
    min-height: 5.75rem;
    aspect-ratio: 4/2.4;
    overflow: hidden
}

#mo_ContentCard .card-header .status-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    position: absolute;
    top: .625rem;
    left: .625rem
}

#mo_ContentCard .card-header .status-group .card-status {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding-left: .25rem;
    padding-right: .25rem;
    width: auto;
    height: 1.25rem;
    border-radius: .125rem;
    font-size: .625rem;
    font-weight: 700;
    color: #fff;
    z-index: 1
}

#mo_ContentCard .card-header .status-group .card-status.type-person {
    background: #ff8400
}

#mo_ContentCard .card-header .status-group .card-status.type-people {
    background: #202b45
}

#mo_ContentCard .card-header .status-group .card-status svg {
    color: #fff
}

#mo_ContentCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem;
    flex: 1
}

#mo_ContentCard .card-body h5 {
    font-size: 1rem;
    max-height: 3rem;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_ContentCard .card-body p {
    font-size: .75rem;
    height: 2.25rem;
    color: #666;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_ContentCard .card-footer {
    padding: 2px
}

#mo_ContentCard .card-footer .card-chips {
    width: fit-content;
    height: unset
}

#mo_ContentCard .card-footer .card-chips .chip {
    width: auto;
    height: auto;
    padding-left: .25rem;
    padding-right: .25rem;
    border-radius: 2px
}

#mo_ContentCard .card-footer .card-chips .chip p {
    font-size: .75rem;
    white-space: nowrap
}

#mo_CurriculumCard {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-radius: .75rem;
    width: 100%;
    height: auto;
    gap: .75rem;
    background: #fff;
    overflow: hidden
}

#mo_CurriculumCard .card-header .card-img {
    border-radius: .75rem;
    min-height: 5.75rem;
    overflow: hidden
}

#mo_CurriculumCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_CurriculumCard .card-body p {
    font-size: .875rem;
    font-weight: 700;
    max-height: 2.625rem;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_CurriculumCard .card-footer {
    width: auto
}

#mo_CurriculumCard .card-footer ul {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_CurriculumCard .card-footer ul li {
    font-size: .75rem;
    max-height: 2.25rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    vertical-align: baseline;
    text-overflow: ellipsis;
    overflow: hidden
}

#mo_SkeletonContentCard {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    gap: .5rem;
    background: #fff
}

#mo_SkeletonContentCard .card-header .card-img span {
    border-radius: .75rem;
    width: 100%;
    height: 100%;
    min-height: 5.75rem;
    aspect-ratio: 4/2.4;
    overflow: hidden
}

#mo_SkeletonContentCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_SkeletonContentCard .card-body .skeleton-container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_SkeletonContentCard .card-body .skeleton-container span {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#mo_SkeletonContentCard .card-body .skeleton-container br {
    display: none
}

#mo_SkeletonContentCard .card-footer {
    gap: .5rem
}

#mo_SkeletonContentCard .card-footer .card-chips {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: auto;
    height: 1.25rem;
    max-width: unset;
    gap: unset
}

#mo_SkeletonContentCard .card-footer .card-chips span {
    border-radius: .125rem
}

#mo_SkeletonCurriculumCard {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 100%;
    border-radius: .75rem;
    gap: .75rem;
    background: #fff
}

#mo_SkeletonCurriculumCard .card-header .card-img span {
    border-radius: .75rem;
    min-height: 5.75rem;
    aspect-ratio: 4/2.4;
    overflow: hidden
}

#mo_SkeletonCurriculumCard .card-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_SkeletonCurriculumCard .card-footer {
    gap: .5rem
}

#mo_SkeletonCurriculumCard .card-footer .skeleton-container {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_SkeletonCurriculumCard .card-footer .skeleton-container span {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto
}

#mo_SkeletonCurriculumCard .card-footer .skeleton-container br {
    display: none
}

#mo_EditForm {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 2.5rem
}

#mo_EditForm .button-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-count: auto;
    width: 100%;
    height: auto
}

#mo_EditForm .button-group button {
    flex: 1;
    min-width: unset
}

#mo_CheckPassword {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 2.5rem
}

#mo_CheckPassword .context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_CheckPassword .context p {
    color: #666;
    text-align: center
}

#mo_CheckPassword .box-item {
    border-radius: .75rem;
    width: 100%;
    height: auto
}

#mo_CheckPassword #mo_Input {
    align-items: center;
    gap: 1.5rem
}

#mo_CheckPassword #mo_Input label {
    min-width: 4rem;
    font-size: 1rem
}

#mo_CheckPassword .button-group {
    width: 100%;
    height: auto
}

#mo_CheckPassword .button-group button {
    flex: 1
}

#mo_ChangePassword {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_ChangePassword .context {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_ChangePassword .context p {
    text-align: center;
    color: #666
}

#mo_ChangePassword .box-item {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: auto;
    gap: 1.5rem
}

#mo_ChangePassword #Input {
    gap: 2.5rem
}

#mo_ChangePassword #Input label {
    min-width: 7.5rem;
    font-size: 1rem
}

#mo_ChangePassword .info {
    width: 100%;
    height: auto;
    padding: 1.5rem;
    border-radius: .75rem;
    background: #f5f5f7;
    font-size: .75rem;
    color: #666
}

#mo_ChangePassword .button-group {
    width: 100%;
    height: auto
}

#mo_ChangePassword .button-group button {
    flex: 1;
    min-width: unset
}

#mo_OrderDetail {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0003;
    z-index: 9999
}

#mo_OrderDetail .modal-dialog {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    width: 100%;
    height: 80vh;
    border-radius: .75rem;
    gap: unset;
    position: absolute;
    top: unset;
    left: unset;
    bottom: 0;
    transform: unset;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
    padding: unset;
    background: #fff;
    animation: FadeUp .3s
}

#mo_OrderDetail .modal-header {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-count: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

#mo_OrderDetail .modal-header h6 {
    border-bottom: 1px solid #d9d9d9;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    flex: 1
}

#mo_OrderDetail .modal-body {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    gap: 1rem
}

#mo_OrderDetail .modal-body p {
    height: unset
}

#mo_OrderDetail .modal-body .item-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #d9d9d9;
    gap: .75rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #000000;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-bottom: unset;
    gap: .75rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-count: auto;
    gap: .25rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-title .price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: .75rem;
    border-radius: .5rem;
    gap: .5rem;
    background: #f5f5f7
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .left {
    width: 100%;
    height: auto;
    max-width: 4rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .left p {
    font-size: .875rem;
    font-weight: 700
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    flex: 1
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .right p {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem;
    font-size: .875rem;
    text-align: right
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .right p span {
    font-size: .75rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .right .price {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .right .price span {
    font-size: .875rem
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .order-item .right .price span:first-child {
    font-weight: 700
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .delivery-amt {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-end;
    column-count: auto
}

#mo_OrderDetail .modal-body .item-group .item-wrapper .lecture-option .delivery-amt span {
    font-size: .75rem
}

#mo_OrderDetail .modal-body .item-group:not(:first-child) {
    padding-top: unset
}

#mo_OrderDetail .modal-body .info-text span,#mo_OrderDetail .modal-body .info-text a {
    font-size: .875rem;
    color: #666;
    word-break: keep-all
}

#mo_OrderDetail .modal-body .info-text a {
    font-weight: 700
}

#mo_OrderDetail .modal-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    padding: 1.25rem;
    gap: .75rem
}

#mo_OrderDetail .modal-footer button {
    flex: 1;
    min-width: unset
}

#mo_OrderDetail ::-webkit-scrollbar {
    width: 1.25rem
}

#mo_OrderDetail ::-webkit-scrollbar-thumb {
    border: 7px solid white;
    border-radius: .75rem;
    background: #d9d9d9
}

#mo_OrderDetail ::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 6.25rem
}

#mo_OrderDetailTable {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    border-top: 2px solid #000000;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-bottom: unset;
    gap: .75rem
}

#mo_OrderDetailTable .tr {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_OrderDetailTable .tr .th {
    width: 100%;
    height: auto;
    max-width: 6.25rem
}

#mo_OrderDetailTable .tr .td {
    font-weight: 700;
    word-break: keep-all
}

#mo_OrderDetailTable .tr .td p {
    text-align: left
}

#mo_OrderDetailTable .tr .td .text-group {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .25rem
}

#mo_ClientDownlaod {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_ClientDownlaod .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    column-count: auto;
    gap: 1.5rem
}

#mo_ClientDownlaod .button-group button {
    width: 100%;
    height: auto
}

#mo_ClientDownlaod .button-group>p {
    font-size: .875rem
}

#mo_TableDownlaodSpecs {
    width: 100%;
    table-layout: fixed
}

#mo_TableDownlaodSpecs thead {
    border-top: 2px solid #333333;
    background: #f5f5f7;
    font-weight: 700
}

#mo_TableDownlaodSpecs tbody tr {
    border-bottom: 1px solid #d9d9d9
}

#mo_TableDownlaodSpecs th,#mo_TableDownlaodSpecs td {
    border-right: 1px solid #d9d9d9;
    padding: .75rem;
    vertical-align: middle;
    font-size: .875rem;
    height: 4.5rem;
    text-align: center
}

#mo_TableDownlaodSpecs th:first-child,#mo_TableDownlaodSpecs td:first-child {
    font-weight: 700
}

#mo_TableDownlaodSpecs th:last-child,#mo_TableDownlaodSpecs td:last-child {
    border-right: 0px solid transparent
}

#mo_ManualDownload {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: 2.5rem
}

#mo_ManualDownload .top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .5rem
}

#mo_ManualDownload .top .item-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_ManualDownload #Dropdown .dropdown-selected {
    width: 7.5rem
}

#mo_ManualDownload .download-list {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem
}

#mo_ManualDownloadItem {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    padding: 1.5rem;
    border: 1px solid #d9d9d9;
    border-radius: .75rem;
    gap: 1.5rem
}

#mo_ManualDownloadItem .content-top {
    display: flex;
    flex-direction: column;
    align-items: unset;
    justify-content: unset;
    column-count: auto;
    gap: .75rem;
    width: 100%
}

#mo_ManualDownloadItem .content-top p {
    width: 100%;
    height: 3rem;
    font-size: 1rem;
    font-weight: 700;
    color: #000
}

#mo_ManualDownloadItem .content-top ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: unset;
    column-count: auto
}

#mo_ManualDownloadItem .content-top ul li {
    font-size: .875rem;
    color: #666;
    word-break: keep-all
}

#mo_ManualDownloadItem .content-top ul li:after {
    content: "⎹";
    padding-left: .5rem;
    padding-right: .5rem;
    color: #d9d9d9
}

#mo_ManualDownloadItem .content-top ul li:last-child:after {
    display: none
}

#mo_ManualDownloadItem .content-bottom {
    display: flex;
    flex-direction: row;
    align-items: unset;
    justify-content: flex-end;
    column-count: auto
}

#mo_ManualDownloadItem .content-bottom #Button {
    min-width: unset;
    min-height: unset
}

@font-face {
    font-family: swiper-icons;
    src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
    font-weight: 400;
    font-style: normal
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform,height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop:always}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper: before {
    height:100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper: before {
    width:100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to left,#00000080,#0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to right,#00000080,#0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top,#00000080,#0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom,#00000080,#0000)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-prev,.swiper-button-next {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next {
    display: none!important
}

.swiper-button-prev svg,.swiper-button-next svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg {
    transform: rotate(180deg)
}

.swiper-button-prev,.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-prev:after,.swiper-button-next:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1
}

.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled {
    display: none!important
}

.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none!important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0,-50%,0)
}

.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: .2s transform,.2s top
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translate(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform,.2s left
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: .2s transform,.2s right
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none!important
}

.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-vertical>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>img,.swiper-zoom-container>svg,.swiper-zoom-container>canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform,opacity,height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

@keyframes placeholder-glow {
    50% {
        opacity: .5
    }
}

.skeleton-loading {
    width: 100%;
    height: inherit;
    border-radius: .25rem;
    background-color: #e1e1e1;
    display: inline-flex;
    line-height: 1;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    overflow: hidden;
    animation: placeholder-glow 2s cubic-bezier(.4,0,.6,1) infinite
}

.dropdown-list.show-top.active {
    display: block !important;
}

#Language {
   opacity: 0;
}