@charset "UTF-8"; /* 100 thin
300 light
400 regular
500 normal
600 semi-bold
700 bold
800 extrabold
900 black */

/** common start **/
body { background: #ffffff; color: #111111; font-family: 'SUIT', 'canada-type-gibson', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial, sans-serif; letter-spacing: 0rem; }
h1, h2, h3, h4, h5, h6, btn { letter-spacing: 0rem; font-weight: 400; }
.ff-camp { font-family: 'campton', 'canada-type-gibson', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial, sans-serif; letter-spacing: 0rem; font-weight: 400; }
.o-h { position: fixed !important;  overflow: hidden !important;  width: 100% !important;  height: 100% !important;  touch-action: none !important;  -webkit-overflow-scrolling: auto !important; }
.only-pc { display: block !important; }
.only-mo { display: none !important; }
.d-flex { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; position: relative; }
.flex-d-r { flex-direction: row !important; gap: 1.6rem; }
.flex-w-w { flex-wrap: wrap !important; }
.flex-w-n { flex-wrap: nowrap !important; flex-direction: column !important; }
.c-bg { background-color: #F6F6F6; width: 100vw; height: 100%; z-index: -1; position: absolute; top: 0; opacity: 1; left: 50%; transform: translateX(-50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.white-outline { color: #000; text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff; }
.text-underline { position: relative; display: inline-block; }

.text-underline { position: relative; display: inline-block; }
.text-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background-color: currentColor; transition: width 0.3s ease; }
.text-underline:hover::after { width: 100%; }

.cat-01 { background-color: #d15a57 !important; }
.cat-02 { background-color: #4295bd !important; }
.cat-03 { background-color: #ddc86f !important; }
.cat-04 { background-color: #E16B2E !important; }
.cat-05 { background-color: #A8D174 !important; }
.cat-06 { background-color: #A8D174 !important; }
.cat-07 { background-color: #A8D174 !important; }
.cat-08 { background-color: #A8D174 !important; }
.cat-09 { background-color: #A8D174 !important; }
.cat-10 { background-color: #A8D174 !important; }

.cat { width: 15rem; height: 3.5rem; display: flex; justify-content: center; align-items: center; cursor: default !important; font-weight: 800 !important; font-size: 1.6rem !important; }

@media screen and (max-width: 768.98px){
 .only-pc { display: none !important; } .only-mo { display: block !important; }
 .flex-d-r { gap: 1rem; }

 .cat { width: 10rem; height: 2.2rem; font-size: 1.2rem !important; }
}
/** common end **/

/** layout start **/
html, body { margin: 0; padding: 0; border: 0; position: relative; width: 100%; height: 100%; }
.body-class { display: grid; grid-template-areas:"nav nav nav" "header header header" "section section section" "footer footer footer"; grid-template-rows: auto auto 1fr auto; grid-template-columns: auto 1fr auto; grid-gap: 0; height: calc(var(--vh, 1vh) * 100); }
nav { grid-area: nav; }
header { grid-area: header; }
section { grid-area: section; }
footer { grid-area: footer; }
nav, header, section, aside, footer { padding: 0; width: 100%; z-indeX: 1; }
img, video, canvas { overflow: hidden; }

.round .container { height: 100%; width: inherit; position: relative; overflow: hidden; }
.round .container .content { max-width: 124rem; margin: 0 auto; padding: 0 2rem; display: flex; flex-direction: column; position: relative; }

@media screen and (max-width: 1023.98px) { }
@media screen and (max-width: 768.98px){
 .round nav .container .content { padding: 0 20px; max-width: 100%; }
 .round .container .content { padding: 0 20px; max-width: 100%; }
}

@media (max-width: 411.98px){
 .round .container .content { max-width: 100vw; }
}
/** layout end **/

/** nav start **/
.round nav { position: fixed; top: 0; z-index: 1000; }
.round nav .container { transition: transform .5s, opacity .5s, background .5s; }
.nav__hide { transform: translate(0, -200%); }


.round nav .nav-group { display: flex; align-items: center; justify-content: space-between; position: relative; height: 9rem; font-size: 1.8rem; filter: drop-shadow(1px 1px 3px rgb(158, 158, 158));  }
.round nav .nav-center { position: absolute; left: 50%; transform: translateX(-50%); }
.round nav .nav-right { position: relative; }

.logo { width: 8rem; height: 5rem; background: url(../images/common/logo_white.png) no-repeat 50% 50%; background-size: contain; }
.login-user { font-weight: 700; color: #fff; display: flex; flex-direction: row; display: inline-block; }
.login-user::after { content:''; background: url(../images/common/icon_login.png) no-repeat 50% 50%; width: 2.4rem; height: 2.4rem; background-size: contain; position: absolute; left: -3rem; top: 50%; transform: translateY(-50%); }
.round nav .nav-menu { color: #FFF; text-align: center; font-weight: 400; letter-spacing: -0.36px; }
.round nav .nav-menu ul { display: flex; flex-direction: row; gap: 4rem; position: relative; }
.round nav .nav-menu li { cursor: pointer; position: relative; }
.round nav .nav-menu li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #fff; transition: width 0.3s ease; }
.round nav .nav-menu li:hover::after { width: 100%; }

.round.black .nav-menu { color: #000; }
.round.black .login-user { color: #000; }
.round.black .logo { background: url(../images/common/logo.png) no-repeat 50% 50%; background-size: contain; }
.round.black nav .nav-menu li::after { background: #000; }
.round.black .login-user::after { background: url(../images/common/icon_login_black.png) no-repeat 50% 50%; background-size: contain; }

.sidebar-dim { position :fixed; inset: 0;  background: rgba(0,0,0,.3); z-index: 1001; overflow: auto; transform: translateX(-200%); pointer-events: none;  }
.sidebar-dim.active {  transform: translate(0, 0%) !important; pointer-events: auto; overflow: hidden; }

.sidebar { position :fixed; top:0; right: -28rem; background :#262626; width:28rem; height:100%; transition:.3s; z-index: 1001; display: none; }
.sidebar.active { right:0; }
.sidebar ul { margin:0; padding:2rem 0; }
.sidebar ul li { list-style:none; }
.sidebar ul li a { text-decoration:none; padding: 1rem 3rem; color:#fff; display:block; font-size: 2rem; font-weight: 100; }
.sidebar-btn { position: absolute; top: 1.5rem; left: -7rem; width: 5rem; height: 5rem; box-sizing: border-box; cursor: pointer; background: transparent; border: none; outline: none; background: #E9C72C; border-radius: 3px; transition: transform .5s, opacity .5s, background .5s; }
.sidebar.active .sidebar-btn { left:-4rem; }
.sidebar-btn span { display: block; width: 3rem; height: 2px; background: #000; position: absolute; top: 2.3rem; left: 1rem; transition: .3s; }
.sidebar-btn span:before { content:''; position:absolute; top:-1rem; left:0; width:100%; height:2px; background:#000; transition:.3s; }
.sidebar-btn span:after { content:''; position:absolute; top:1rem; left:0; width:100%; height:2px; background:#000; transition:.3s; }
.sidebar-btn.toggle span { background:transparent; }
.sidebar-btn.toggle span:before { top:0; transform:rotate(45deg); }
.sidebar-btn.toggle span:after { top:0; transform:rotate(-45deg); }
.sidebar .login-box { position: absolute; text-align: center; left: 50%; transform: translateX(-50%); margin-top: 4rem; }
.sidebar .login-box .login-user { color: #fff; }
.sidebar .login-box .login-user::after { top: 0; transform: translateY(0); display: none; }



@media screen and (max-width: 1100.98px){
 .round nav .nav-menu { display: none !important; }
 .round nav .nav-right { display: none; }
 .sidebar { display: block; }
}

@media screen and (max-width: 768.98px){
 .logo { width: 6rem; }
 .round nav .nav-group { height: 8rem; }
}

/** nav end **/
/** header start **/
.round header { background-color: #adadad; min-height: 80vh; height: 100%; position: relative; margin: 0; padding: 0; }
.round header .container { height: 100%; position: relative; }
.hero { position: relative; height: 100%; overflow: hidden; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .content { height: 100%; }
.hero__content { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 2; color: #fff; filter: drop-shadow(2px 1px 3px rgb(158, 158, 158)); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(0,0,0,0.2)); }
.hero__content h2 { font-size: 5.6rem; line-height: 100%; font-weight: 200; }
.hero__content h2 span { font-family: 'camptonB', 'canada-type-gibson', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial; line-height: 100%; font-weight: 800; }
.hero__content button { margin-top: 5rem; }

.round.sub-01 header { min-height: 53rem; background: #000; }
.round.sub-01 header .hero__content { align-items: center; }
.round.sub-01 header .hero__content h2, .round.sub-01 header .hero__content h2 span { text-align: center; line-height: 100%; font-size: 5rem;  }
.round.sub-01 header .hero__content button.bottom { position: absolute; bottom: 25%; }
.round.sub-01 header .block-group-01 { position: absolute; background: url(../images/common/block_about_01.png) 50% 50% no-repeat; width: 40rem; height: 40rem; z-index: 1; left: 5%; top: 67%; transform: translate(-50%, -50%); background-size: contain; }
.round.sub-01 header .block-group-02 { position: absolute; background: url(../images/common/block_about_02.png) 50% 50% no-repeat; width: 40rem; height: 50rem; z-index: 1; left: 95%; top: 63%; transform: translate(-50%, -50%); background-size: contain; }
.round.sub-01 header .block-user-01 { position: absolute; background: url(../images/common/user_1.png) 50% 50% no-repeat; width: 5rem; height: 8rem; z-index: 1; left: 15%; top: 59%; transform: translate(-50%, -50%); background-size: contain; }
.round.sub-01 header .block-user-02 { position: absolute; background: url(../images/common/user_2.png) 50% 50% no-repeat; width: 5rem; height: 8rem; z-index: 1; left: 69%; top: 87%; transform: translate(-50%, -50%); background-size: contain; }

.round.my-class header { background-color: #fff; height: 60rem; }
.round.my-class header.hero::after { background: none; }
.round.my-class header .hero__content { padding-bottom: 7rem; }
.round.my-class .hero__content h2 { color: #000; }
.round.my-class .hero__content span { color: #000; font-size: 2rem; }
.block-bg-01 { position: absolute; background: url(../images/common/bg_01.png) 50% 50% no-repeat; width: 100%; height: 100%; background-size: contain; background-position:right center; }
.round.my-class header .block-group-01 { top: 50%; }
.round.my-class header .block-group-02 { top: 50%; }
.round.my-class header .block-user-01 { top: 45%; }
.round.my-class header .block-user-02 { top: 60%; }

.round.common header { background-color: #fff; height: 60rem; }
.round.common header.hero::after { background: none; }
.round.common header .hero__content { padding-bottom: 0rem; }
.round.common .hero__content h2 { color: #000; }
.round.common .hero__content span { color: #000; font-size: 2rem; }
.round.common .block-bg-01 { position: absolute; background: url(../images/common/bg_02.png) 50% 50% repeat-x; width: 100vw; height: 100%; background-size: contain; background-position:top center; }
.round.common header .block-group-02 { position: absolute; background: url(../images/common/block_sub_color.png) 50% 50% no-repeat; width: 40rem; height: 50rem; z-index: 1; left: 95%; top: 63%; transform: translate(-50%, -50%); background-size: contain; }
.round.common.gray header .block-group-02 { position: absolute; background: url(../images/common/block_sub.png) 50% 50% no-repeat; width: 38rem; height: 40rem; z-index: 1; left: 95%; top: 61%; transform: translate(-50%, -50%); background-size: contain; }


@media screen and (max-width: 1100.98px) { }

@media screen and (max-width: 768.98px){
 .hero__content h2 { font-size: 3rem; }
 .round header .content .asset { width: 42rem; left: 50%; transform: translateX(-50%); top: 11rem; }


 .round.sub-01 header.hero { overflow: visible; }
 .round.sub-01 header.hero .container { overflow: visible; }
 .round.sub-01 header { height: 24rem; min-height: 0; position: fixed; }
 .round.sub-01 header .hero__content h2, .round.sub-01 header .hero__content h2 span { font-size: 1.5rem; line-height: 140%; }
 .round.sub-01 header .hero__content h2 span.h2-main { font-size: 3.5rem; }
 .round.sub-01 header .hero__content button.bottom { font-size: 1.5rem; bottom: 10%; }

 .round.sub-01 header .hero__content h2 span { line-height: 100%; }

 .round.sub-01 header .block-group-01 { width: 12rem; height: 14rem; z-index: 1; left: 12%; top: 80%; transform: translate(-50%, -50%); }
 .round.sub-01 header .block-group-02 { width: 13rem; height: 16rem; z-index: 1; left: 90%; top: 75%; transform: translate(-50%, -50%); }
 .round.sub-01 header .block-user-01 { width: 1.7rem; height: 4rem; z-index: 1; left: 68%; top: 82%; transform: translate(-50%, -50%); }
 .round.sub-01 header .block-user-02 { width: 1.5rem; height: 4rem; z-index: 1; left: 24%; top: 76%; transform: translate(-50%, -50%); }

 .round.my-class .hero__content span { font-size: 1.2rem; }
 .round.my-class header .hero__content { padding-bottom: 0rem; }
 .block-bg-01 { background-position:center center; background-size: cover; }
 .round.my-class header .block-group-01 { height: 20rem; width: 15rem; }
 .round.my-class header .block-group-02 { height: 21rem; width: 17rem; }

 .round.common header { height: 28rem; }
 .round.common .hero__content span { font-size: 1.2rem; }
 .round.commons header .hero__content { padding-bottom: 0rem; }
 .round.commons .block-bg-01 { background-position:center center; background-repeat: no-repeat; }
 .round.common header .block-group-02 { height: 21rem; width: 12rem; left: 84%; top: 38%; }
 .round.common header .block-user-01 { width: 1.7rem; height: 4rem; z-index: 1; left: 28%; top: 32%; transform: translate(-50%, -50%); }
 .round.common.gray header .block-group-02 { height: 21rem; width: 12rem; left: 84%; top: 38%; }
}
/** header end **/

/** section start **/
/* .round.sub-01 section { background: #fff; } */
@media screen and (max-width: 768.98px){
 .round.sub-01 section { margin-top: 27rem; }
}
/** section end **/



/** main start **/
.round.main section { margin-bottom: 10rem; }
.round.main .container .content.main-block-01 { padding: 0; }
.main-block-header { margin-top: 10rem; margin-bottom: 2rem; display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.main-block-header button { color: #000; align-self: flex-start; font-size: 1.8rem; line-height: 110%; }
.round.main .container .content h2 { font-family: 'camptonB', 'canada-type-gibson', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial, sans-serif; font-size: 4.5rem; letter-spacing: -1px; line-height: 100%; }

.main-program-tab { width: 100%; }
.main-program-tab, .main-program-tab ul, .main-program-tab li { position: relative; }
.main-program-tab ul { display: grid; grid-template-columns: 10rem 1fr 1fr 1fr; gap: 3rem; }
.main-program-tab li { cursor: pointer; transition: transform 0.3s ease; width: 100%; padding-bottom: calc(140 / 336 * 100%); overflow: hidden; }
.main-program-tab li:hover { transform: translateY(-3px); }
.main-program-tab li img { position: absolute; bottom: -12%; right: 0; width: 4rem; }
.main-program-tab li.main-tab-all { padding-top: 3rem; font-weight: 600; font-size: 1.8rem; }
.main-cat-01 { content: ''; background: url(../images/common/cat_01_off.png?ver=3) 50% 50% no-repeat; width: 100%; height: 100%; background-size: 100% auto; }
.main-cat-02 { content: ''; background: url(../images/common/cat_02_off.png?ver=3) 50% 50% no-repeat; width: 100%; height: 100%; background-size: 100% auto; }
.main-cat-03 { content: ''; background: url(../images/common/cat_03_off.png?ver=3) 50% 50% no-repeat; width: 100%; height: 100%; background-size: 100% auto; }
.main-cat-01.active { background: url(../images/common/cat_01_on.png?ver=3) 50% 50% no-repeat; background-size: 100% auto; }
.main-cat-02.active { background: url(../images/common/cat_02_on.png?ver=3) 50% 50% no-repeat; background-size: 100% auto; }
.main-cat-03.active { background: url(../images/common/cat_03_on.png?ver=3) 50% 50% no-repeat; background-size: 100% auto; }
.main-program-tab li span { font-size: 2rem; font-weight: 700; position: absolute; top: 2rem; left: 2rem; }

.main-block-02 .program-list { gap: 2rem; margin-bottom: 0; display: flex; }
.main-block-02 .program-list .program-item { width: 59rem; max-width: 100%; flex: 0 0 auto; }

.main-block-02 .program-list .thumb-block .info { position: absolute; color: #fff; bottom: 0; }
.main-block-02 .program-list .thumb-block .count { position: relative; align-self: flex-start; }


.program-swiper { position: relative; padding: 2rem 0; overflow: hidden; --mask-width: 10%; -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,1) var(--mask-width),
        rgba(0,0,0,1) calc(100% - var(--mask-width)),
        transparent 100%
); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,1) var(--mask-width),
        rgba(0,0,0,1) calc(100% - var(--mask-width)),
        transparent 100%
); mask-repeat: no-repeat; mask-size: 100% 100%; }


.swiper { overflow: visible; }

.program-item { width: 53rem; max-width: 100%; transition: transform 0.3s ease; }


.round.main .container .board-list-group { padding: 0; }


@media screen and (max-width: 768.98px){
 .round.main header.hero { min-height: 30rem; }
 .round.main header.hero .hero__content { margin-top: 10rem; }
 .round.main header.hero .hero__content button.right { margin-top: 2rem; font-size: 1.2rem; }

 .round.main .container .content.main-block-01 { padding: 0 0 0 20px; }
 .main-block-header { margin-top: 5rem; margin-bottom: 2rem; }
 .main-block-header button { font-size: 1.2rem; }
 .round.main .container .content h2 { font-size: 2.7rem; }

 .main-cat-01 { background: none; }
 .main-cat-02 { background: none; }
 .main-cat-03 { background: none; }
 .main-cat-01.active { background: none; }
 .main-cat-02.active { background: none; }
 .main-cat-03.active { background: none; }

 .main-program-tab ul { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
 .main-program-tab li { height: auto; padding-bottom: 0; }
 .main-program-tab li.main-tab-all { position: absolute; top: -2rem; left: 0; height: 2rem; padding: 0; font-size: 1.2rem; }
 .main-program-tab li.main-tab-all img { display: none; }
 .main-program-tab li span { position: relative; font-size: 1.5rem; display: inline-block; border: 1px solid #000; width: 100%; text-align: left; font-size: 1.4rem; padding: .5rem 0 .5rem 1rem; border-radius: 2rem; background: #EEEEEE; top:0; left: 0; }
 .main-program-tab .main-cat-01.active span { background: #46B3AA; }
 .main-program-tab .main-cat-02.active span { background: #64C0A7; }
 .main-program-tab .main-cat-03.active span { background: #A8D174; }

 .main-block-02 .program-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
 .main-block-02 .program-list .program-item { width: 100% !important; }
 .program-swiper { -webkit-mask-image: none; mask-image: none; }

}

/** main end **/

/** about start **/
.round.about .about-block { margin-top: 10rem; display: flex; flex-direction: column; gap: 2rem; }
.round.about .about-block > div { position: relative; }
.about-title { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 3rem; }
.about-title h2 { font-family: 'camptonB', 'canada-type-gibson', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial, sans-serif; font-size: 4.5rem; letter-spacing: -1px; }
.about-title span { font-weight: 400; font-size: 2.5rem; margin-bottom: .5rem; }
.about-info-content { padding: 5rem; background: #f0f0f0; border-radius: 1.8rem; min-height: 30rem; margin-bottom: 2rem; font-size: 2rem; text-align: center; }
.about-info-content b { font-size: 3rem; }
.about-sch-tab, .about-sch-tab ul { display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 3.5rem; }
.about-sch-tab li { font-size: 3rem; font-weight: 400; background-color: #fff; color: 000; padding : 1rem 2rem; border: 1px solid #000; border-radius: 1.8rem; cursor: pointer; }
.about-sch-tab li.active { background: #E9C72C; font-weight: 700; }
.about-asset { position: absolute; position: absolute; right: -14%; top: -101%; width: 34rem; }

.infinite-scroll { width: 100%; overflow: hidden; padding: 20rem 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%); padding: 20rem; }
.scroll-track { display: flex; align-items: center; height: 6rem; animation: scroll-x 10s linear infinite; }
.scroll-item { flex: 0 0 auto; height: 100%; }
.scroll-item img { height: 100%; width: auto; display: block; }
@keyframes scroll-x {
 from { transform: translateX(0); }
 to { transform: translateX(-50%); }
}

@media screen and (max-width: 768.98px){
 .round.about header.hero { position: fixed !important; }
 .round.about section .container { background: #fff; }

 .round.about .about-block { margin-top: 5rem; gap: 1.5rem; }
 .round.about .about-block:first-of-type { margin-top: 2rem; }
 .about-title { gap: 1rem; }
 .about-title h2 { font-size: 2.7rem; }
 .about-title span { font-size: 1.4rem; margin-bottom: .5rem; }
 .about-info-content { padding: 2rem; font-size: 1.5rem; }
 .about-info-content b { font-size: 2rem; }

 .about-sch-tab li { font-size: 2rem; padding : 0 2rem; border-radius: 1.8rem; }
 .about-asset { top: -65%; width: 36%; }

 .infinite-scroll { padding: 10rem 0; }
 .scroll-track { height: 3rem; }
}

/** about end **/

/** common start **/
.round.common header { min-height: 0; position: fixed; }
.round.common section { margin-top: 60rem; margin-bottom: 10rem; }
.round.common.view section { margin-top: 30rem; margin-bottom: 10rem; }
.round.common.view header .block-user-01 { left: 75%; top: 45%; }
.round.common.view .view-header { width: 100%; position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 1rem; }
.round.common.view .view-header h2 { font-weight: 600; font-size: 3.8rem; line-height: 110%; }
.round.common.view .view-header span { font-weight: 400; font-size: 1.8rem; }
.round.common.view .board-box { margin-top: 2rem; width: 100%; border: 1px solid #000; border-radius: 1.8rem; background: #fff; min-height: 30rem; padding: 3rem; font-size: 1.8rem; }

.round.common.view .view-bottom { width: 100%; margin: 5rem 0 10rem; display: flex; align-items: center; justify-content: center; }
.round.common.view .view-bottom .btn { width: 20rem; }


@media screen and (max-width: 768.98px){
 .round.common section { margin-top: 20rem; padding-top: 2rem; background: #fff; }
 .round.common.view section { margin-top: 12rem; margin-bottom: 10rem; background: transparent; }
 .round.common.view header .block-user-01 { left: 75%; top: 45%; }
 .round.common.view .view-header { gap: .5rem; }
 .round.common.view .view-header h2 { font-size: 2.5rem; }
 .round.common.view .view-header span { font-size: 1.5rem; }
 .round.common.view .board-box { margin-top: 1rem; min-height: 30rem; padding: 1.5rem 2rem; font-size: 1.8rem; }

 .round.common.view .view-bottom { margin: 3rem 0 6rem; }
 .round.common.view .view-bottom .btn { width: 15rem; }
}

/** common end **/

/** badge start **/
.badge { border: 1px solid #000; background: #fff; color: #000; border-radius: 2rem; padding: .2rem 2rem; cursor: pointer; transition: all .1s ease; font-size: 2rem; font-weight: 400; }
.badge:hover { outline: 2px solid #000; }
.badge.active { border: 1px solid #000; background: #000; color: #fff; }
@media screen and (max-width: 768.98px){
 .badge { font-size: 1.3rem; padding: .2rem 1rem; }
}
/** badge end **/


/** program start **/
.program-filter { width: 100%; padding: 5rem 0; display: flex; flex-direction: row; justify-content: space-between; }
.program-filter ul, .program-filter li { display: flex; flex-direction: row; }
.program-filter ul { gap: 1rem; }
.program-filter li b { font-weight: 800; }

.program-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; margin-bottom: 10rem; }
.program-list .program-item { cursor: pointer; }
.program-list .thumb { position: relative; width: 100%; padding-top: calc(303 / 536 * 100%); overflow: hidden; border-radius: 2.6rem; border: 1px solid #000; }
.program-list .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.program-list .thumb-block { position: absolute; inset: 1.5rem; }
.program-list .thumb .cat { position: absolute; left: 0; top: 0; }
.program-list .thumb .count { position: absolute; left: 0; bottom: 0; cursor: default !important; }
.program-list .thumb .count.end { color: #000; background-color: #b0b0b0; }
.program-list .thumb .heart { position: absolute; top: 0; right: 0; width: 4rem; height: 4rem; background: url(../images/common/icon_heaer.png) 50% 50% no-repeat; background-size: contain; }
.program-list .thumb .heart.active { background: url(../images/common/icon_heart_full.png) 50% 50% no-repeat; background-size: contain; }

.program-item .info { display: flex; flex-direction: column; margin-top: 1rem; gap: 0rem; width: 100%; letter-spacing: 0; }
.program-item .info .category { font-weight: 700; font-size: 2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; min-width: 0; line-height: 110%; }
.program-item .info .title { display: block; font-weight: 800; font-size: 2.3rem; width: 100%; min-width: 0; line-height: 120%; }
.program-item .info .time { font-weight: 500; font-size: 1.6rem; }

@media screen and (max-width: 768.98px){
 .program section { background-color: #fff; padding-top: 2rem; }
 .program-filter { padding: 0 0 2rem; }
 .program-list { gap: 2rem; grid-template-columns: minmax(0, 1fr); }
 .program-list .thumb-block { position: absolute; inset: 1rem; }
 .program-list .thumb { border-radius: 1.5rem; }
 .program-list .thumb .heart { width: 3rem; height: 3rem; }

 .program-item .info { margin-top: 1rem; }
 .program-item .info .category { font-size: 1.5rem; }
 .program-item .info .title { font-size: 1.8rem; }
 .program-item .info .time { font-size: 1.2rem; }
}

/** program start **/

/** program-view start **/
.round.program-view header { background: transparent; min-height:55rem; }
.round.program-view header.hero::after { background: transparent !important; }
.round.program-view .block-bg-03 { position: absolute; background: url(../images/common/bg_02.png) 50% 50% repeat-x; width: 100vw; height: 100%; background-size: contain; background-position:top center; }

.round.program-view header.hero .hero__box { position: absolute; inset: 4rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.round.program-view header.hero .hero__box .program-back { position: absolute; left: 0; height: 0; top: 10rem; display: flex; justify-content: center; align-items: center; font-size: 1.6rem; font-weight: 700; cursor: pointer; z-index: 1; }
.round.program-view header.hero .hero__box .program-back::before { background: url("../images/common/icon_back.png") 50% 50% no-repeat; background-size: contain; display: inline-block; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; position: absolute; content: ''; left: -30%; top: 50%; transform: translate(-50%, -50%); }
.round.program-view header.hero .badge { margin-top: 8rem; }
.round.program-view header.hero .hero__box h2 { line-height: 110%; margin-top: 2rem; font-size: 4.4rem; font-weight: 800; text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff; }
.round.program-view header.hero .hero__box p { font-size: 3.5rem; font-weight: 400; line-height: 110%; text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff; }

.program-form { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 1rem; }
.program-form .count.end { color: #000; background-color: #b0b0b0; }
.program-form .btn { font-size: 2.4rem; font-weight: 700; width: 22rem; height: 10.2rem; }

.program-form-search { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
.program-form-count { display: flex; flex-direction: row; justify-content: flex-start; width: 100%; gap: 1rem; align-items: center; }
.program-form-count .badge:hover { outline: 0 solid #000; cursor: default; }
.popart-dropdown-group { display: flex; align-items: flex-start; justify-content: flex-end; font-family: 'Comic Sans MS', 'SUIT', sans-serif; gap: 2rem; width: 100%; }
.dropdown { position: relative; display: inline-block; }
.dropdown-btn { background: #fff; border: 3px solid #000; padding: 1rem 2rem; font-size: 1.8rem; font-weight: 800; cursor: pointer; border-radius: 1rem; box-shadow: 0 5px 0 0 #000; transition: transform 0.15s ease, box-shadow 0.15s ease; display: flex; align-items: center; justify-content: space-between; flex-wrap:nowrap; min-width: 15rem; }
.dropdown-btn::after { content: "▼"; margin-left: 1rem; font-size: 1.6rem; transition: transform 0.2s ease; }
.dropdown.open .dropdown-btn::after { transform: rotate(180deg); }
.dropdown-btn:hover { transform: translate(0, -2px); box-shadow: 0 5px 0 0 #000; }
.dropdown-menu { position: relative; margin-top: 0.5rem; background: #fff; border: 3px solid #000; border-radius: 1rem; box-shadow: 0 3px 0 0 #000; list-style: none; margin: 0; min-width: 14rem; text-align: left; z-index: 10; max-height: 0; padding: 0; overflow: hidden; opacity: 0; transform: scaleY(0.95); transform-origin: top center; transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, padding 0.25s ease;

 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-around;

}
.dropdown.open .dropdown-menu { padding: 0.5rem 0; max-height: 2000px; opacity: 1; transform: scaleY(1); }
.dropdown-menu li { padding: 1rem 2rem; font-size: 1.6rem; font-weight: 700; cursor: pointer; transition: background 0.2s ease; text-align: center; }
.dropdown-menu li:hover { background: #eee; }


.program-content { margin-top: 4rem; width: 100%; border: 0px solid #000; border-radius: 1.8rem; background: #EFEFEF; min-height: 30rem; padding: 3rem; font-size: 1.8rem; }
.round.program-view .view-bottom { width: 100%; margin: 5rem 0 10rem; display: flex; align-items: center; justify-content: center; }
.round.program-view .view-bottom .btn { width: 20rem; }


@media screen and (max-width: 768.98px){
 .round.program-view header.hero { position: relative; overflow: hidden; }
 .round.program-view header .program-image { display: none; }
 .round.program-view header { min-height: 20rem; overflow: hidden; }
 .round.program-view header.hero .hero__box { inset: 2rem; gap: .5rem; }
 .round.program-view header.hero .hero__box .program-back { display: none; }
 .round.program-view header.hero .badge { margin-top: 4rem; }
 .round.program-view header.hero .hero__box h2 { margin-top: .5rem; font-size: 2.4rem; }
 .round.program-view header.hero .hero__box p { font-size: 2rem; }

 .round.program-view section { margin-top: 0; }


 .program-form { flex-direction: column; gap: 2rem; padding: 0; }
 .program-form > div { width: 100%; }
 .popart-dropdown-group { flex-direction: column; gap: .5rem; }
 .dropdown, .dropdown-btn { width: 100%; font-size: 1.6rem; }

 .program-form .btn { width: 100%; height: 7rem; font-size: 2rem; }



 .program-content { margin-top: 3rem; min-height: 10rem; padding: 1.5rem 2rem; font-size: 1.8rem; }
 .round.program-view .view-bottom { margin: 3rem 0 6rem; }
 .round.program-view .view-bottom .btn { width: 15rem; }
}

/** program-view end **/

/** my-class start **/
.my-class-grid { width: 100%; position: relative; display: flex; flex-direction: column; gap: 5rem; padding: 1rem 0 10rem; }
.my-class-item { width: 100%; position: relative; display: flex; flex-direction: row; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15)); border-radius: 2rem; background: #FFF; padding: 2rem 2rem 2rem 3rem; }
.my-class-info { width: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-self: center; gap: 1rem; }
.my-class-header { width: 100%; position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 2rem; }
.my-class-header p { font-size: 2.5rem; font-weight: 600; }
.my-class-detail { width: 100%; position: relative; display: flex; flex-direction: row; gap: 3rem; align-items: center; justify-content: flex-start; position: relative }
.my-class-detail .timer { font-size: 1.6rem; font-weight: 400; display: flex; align-items: center; }
.my-class-detail .timer::before { content: ''; background: url(../images/common/icon_watch.png) 50% 50% no-repeat; background-size: contain; width: 3rem; height: 3rem; position: relative; display: inline-block; margin-right: .5rem; }
.my-class-detail .zone { font-size: 1.6rem; font-weight: 700; margin: 0 2rem; }
.my-class-detail .time { display: flex; flex-direction: row; gap: 2rem; font-size: 2.2rem; font-weight: 500; align-items: center; }
.my-class-detail .time span { font-size: 1.5rem; font-weight: 400; background: #D9D9D9; padding: .5rem 1.5rem; border-radius: 10rem; }

.my-class-grid .view-bottom .btn { width: 11rem; height: 10rem; font-size: 2rem; font-weight: 600; }

@media screen and (max-width: 768.98px){
 .round.my-class header.hero { position: fixed; }
 .round.my-class section { background: transparent; }
 .my-class-grid { gap: 3rem; }
 .my-class-item { border-radius: 2rem; padding: 3rem 2rem 3rem 2rem; flex-direction: column; gap: 1.7rem; }
 .my-class-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
 .my-class-header span { text-align: left; }
 .my-class-header p { font-size: 2rem; line-height: 110%; }
 .my-class-detail { flex-direction: row; flex-wrap: wrap; gap: 1rem 1rem; }
 .my-class-detail .timer { font-size: 1.1rem; border: 1px solid #000; border-radius: 5rem; padding: .1rem .7rem; }
 .my-class-detail .timer::before { width: 1.5rem; height: 1.5rem; }
 .my-class-detail .zone { font-size: 1.5rem; background: #000; color: #fff; border-radius: 5rem; padding: .1rem 1.2rem; margin: 0; }
 .my-class-detail .time { gap: 1rem; font-size: 1.2rem; background-color: #D9D9D9; border-radius: 5rem; padding: 0 1rem; font-weight: 600; }
 .my-class-detail .time span { font-size: 1.2rem; font-weight: 400; padding: 0; font-weight: 600; }

 .my-class-grid .view-bottom .btn { width: 100%; height: 5rem; font-size: 2rem; margin-top: 2rem; }
}
/** my-class end **/

/** login start **/
.round.login section { margin-top: 42rem; margin-bottom: 10rem; }

.round.login section .login-box { width: 50rem; gap: 4rem; margin-bottom: 1rem; }
.round.login section .login-box h3 { font-size: 3.6rem; }
.round.login section .login-box .i-box,
.round.login section .login-box .l-box { gap: 1.6rem; }
.round.login section .login-box .i-box > div { width: 100%; height: 6rem; padding: 0; position: relative; background: #fff; }
.round.login section .login-box .i-box > div input { width: 100%; height: 100%; border-radius: 4px; border: 0px solid red; padding: 1rem 2rem; border: 1px solid #CCC; }
.round.login section .login-box .i-box > div input:focus { outline: none; border: 2px solid #111; }

.round.login section .login-box .i-box > div input::placeholder { color: #999; font-size: 1.8rem; }
.round.login section .login-box .i-box > div button { width: 25%; font-weight: 600; font-size: 2rem; }
.round.login section .login-box .i-box > div .p-time { position: absolute; right: 3.8rem; font-size: 2rem; font-weight: 200; right: 13rem; }
.round.login section .login-box .i-box p,
.round.login section .login-box .l-box p { color: #F40; font-size: 1.6rem; font-weight: 600; text-align: left; width: 100%; }
.round.login section .login-box .i-box p::before,
.round.login section .login-box .l-box p::before
{
 content: ''; background: url(../images/common/icon_noitce.png) 50% 50% no-repeat; background-size: cover; width: 1.6rem; height: 1.6rem; display: inline-block; vertical-align: text-top; margin-right: 1rem; }

@media screen and (max-width: 768.98px){
 .round.login section { margin-top: 24rem; padding-top: 2rem; background: #fff; }
 .round.login section .login-box { width: 30rem; gap:3rem }
 .round.login section .login-box h3 { font-size: 2.2rem; }
 .round.login section .login-box .i-box,
 .round.login section .login-box .l-box { gap: 1rem; }
 .round.login section .login-box .i-box > div { height: 5rem; }
 .round.login section .login-box .i-box > div input { font-size: 1.6rem; padding: .5rem 1rem; }

 .round.login section .login-box .i-box > div input::placeholder { font-size: 1.3rem; }
 .round.login section .login-box .i-box > div button { font-size: 1.5rem; }
 .round.login section .login-box .i-box > div .p-time { right: 8rem; font-size: 1.5rem; }
 .round.login section .login-box .i-box p,
 .round.login section .login-box .l-box p { font-size: 1.3rem; }
}

/** login end **/

/** notice start **/

.board-list-group { word-break: break-all; font-size: 2rem; font-weight: 400; background: #fff; width: 100%; padding: 2rem; border-radius: 3rem 3rem 0 0; }
.board-list { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; border-bottom: 1px solid #ccc; }
.board-list > div { padding: 2rem 0; }
.board-list .board-title { text-align: left; width: 100%; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.board-list .board-time { width: 20rem; text-align: right; font-weight: 200; float: 1; }


@media screen and (max-width: 768.98px){
 .board-list-group { font-size: 1.5rem; padding: 0; }
 .board-list > div { padding: 2rem 0; }
}

/** notice end **/

/** term start **/
.round.term section { margin-top: 50rem; }
.round.term section .term-box { padding: 3rem; font-size: 1.8rem; }
@media screen and (max-width: 768.98px){
 .round.term section { margin-top: 20rem; }
 .round.term section .term-box { padding: 0rem; font-size: 1.5rem; }
}
/** term end **/

/** qna start **/

.round.qna section { margin-top: 45rem; margin-bottom: 10rem; }

.qna-accordion { max-width: 80rem; margin: 4rem auto; font-family: "SUIT", sans-serif; }

/* QnA 아이템 */
.qna-item { margin-bottom: 2rem; border: 1px solid #000; border-radius: 1.2rem; background: #fff; overflow: hidden; transition: transform 0.2s ease; }
.qna-item:hover { transform: translateY(-4px); }

/* 질문 버튼 */
.qna-q { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; gap: 1rem; padding: 1.8rem 5.4rem 1.8rem 2.4rem; font-size: 2rem; font-weight: 700; cursor: pointer; border: none; background: #ffeb3b; color: #000; text-align: left; line-height: 1.4; position: relative; }

/* Q. 마커 */
.qna-q::before { content: "Q."; font-weight: 900; color: #5174FF; flex-shrink: 0; }

/* + 아이콘 */
.qna-q::after { content: "+"; position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); font-size: 2.4rem; font-weight: 900; line-height: 1; transition: transform 0.3s; }
.qna-item.active .qna-q::after { content: "–"; transform: translateY(-50%) rotate(90deg); }

/* 답변 영역 */
.qna-a { max-height: 0; overflow: hidden; background: #fff; transition: max-height 0.4s ease, padding 0.4s ease; display: flex; gap: 1rem; align-items: flex-start; padding: 0 2.4rem; }
.qna-a::before { content: "A."; font-weight: 900; color: #01D8C0; flex-shrink: 0; margin-top: 1.6rem; }
.qna-a .qna-content { font-size: 1.6rem; color: #333; line-height: 1.6; margin: 0; padding: 1.6rem 0; width: 100%; }
.qna-item.active .qna-a { max-height: 1200px; }

/* ---------------------------
 반응형 (모바일용)
---------------------------- */
@media screen and (max-width: 768.98px){
 .round.qna section { margin-top: 20rem; }

 .qna-accordion { margin: 2rem 1rem; width: 100%; }
 .qna-item { border-width: 1px; }
 .qna-q { font-size: 1.6rem; padding: 1.2rem 3.4rem 1.2rem 1.6rem; }
 .qna-q::after { font-size: 2rem; right: 1.6rem; }
 .qna-a { padding: 0 1.6rem; }
 .qna-a::before { margin-top: 1.2rem; font-size: 1.4rem; }
 .qna-a .qna-content { font-size: 1.4rem; padding: 1.2rem 0; }
}

/** qna end **/

/** footer start **/
footer { background-color: #fff; color: #000; font-weight: 200; border-top: 1px solid #999; }
footer .container .content { flex-direction: row-reverse !important; align-items: center; height: 16rem; }
footer .container .content > div { flex: 1; }
footer .container .content .left { text-align: right; }
footer .container .content .left img { width: 20rem; }
footer .container .content .right { text-align: left; }
footer .container .content .right > div { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6rem; }
footer .container .content .right > div img { width: 10rem; }
footer .container .content .right .desc { font-size: 1.5rem; }
footer .container .content .right .desc .term { display: flex; gap: 2rem; font-weight: 400; }

@media screen and (max-width: 768.98px) { footer .container .content { height: 100%; padding: 0 !important; flex-direction : column !important; }
 footer .container .content .left { padding: .5rem 2rem; display: flex; justify-content: center; align-items: center; margin-top: 5rem; }
 footer .container .content .right > div { flex-direction: column; padding: 4rem 2rem 4rem; gap: 2rem; }
 footer .container .content .right > div img { width: 7rem; }
 footer .container .content .right .desc { font-size: 1.2rem; font-weight: 400; text-align: center; }
 footer .container .content .right .desc .term { justify-content: center; }
}
/** footer end **/

/** btn start **/

button.right, button.bottom { position: relative; display: inline-block; padding-right: 2rem; font-size: 2rem; color: #fff; background: none; }
button.right::after { content: ""; position: absolute; top: 60%; right: 0; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; background: url("../images/common/icon_arrow_right.png") no-repeat center / contain; }
button.bottom::after { content: ""; position: absolute; top: 60%; right: 0; transform: translateY(-50%); width: 1.2rem; height: 1.2rem; background: url("../images/common/icon_arrow_bottom.png") no-repeat center / contain; }

button.right::before, button.bottom::before { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
button.right:hover::before, button.bottom:hover::before { transform: scaleX(1); }


.btn { color: #ffffff; font-size: 2rem; width: 100%; text-align: center; height: 5.8rem; display: flex; flex-direction: row; justify-content: center; align-items: center; font-weight: 400; transition: all .3s ease; border-radius: 10px; background: #111; box-shadow: 0 5px 0 0 #000; border: 1px solid #000; transition: all .1s ease; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 0 #000; }
.btn.c-01 { background-color: #000; color: #fff; }
.btn.c-02 { background-color: #fff; color: #000; }
.btn.c-03 { background-color: #E16B2E; color: #000; }
.btn.c-04 { background-color: #E9C72C; color: #000; }
.btn.c-05 { background-color: #fff; color: #000; }
.btn.c-06 { background-color: #fff; color: #000; }


.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }

@media screen and (max-width: 768.98px){
 .btn { font-size: 1.5rem; border-radius: 1rem; height: 4.8rem; }
}

/** btn end **/

/** loading start **/
.dim-spinner { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 9999; backdrop-filter: blur(1px); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; pointer-events: none; }
.dim-spinner.active { opacity: 1; visibility: visible; pointer-events: auto; }

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans); .loading-text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; text-align: center; width: 100%; height: 20rem; line-height: 20rem; font-size: 3rem; }
.loading-text span { display: inline-block; margin: 0 5px; color: #fff; font-family: 'Quattrocento Sans', sans-serif; }
.loading-text span:nth-child(1) { filter: blur(0px); animation: blur-text 1.5s 0s infinite linear alternate; }
.loading-text span:nth-child(2) { filter: blur(0px); animation: blur-text 1.5s 0.2s infinite linear alternate; }
.loading-text span:nth-child(3) { filter: blur(0px); animation: blur-text 1.5s 0.4s infinite linear alternate; }
.loading-text span:nth-child(4) { filter: blur(0px); animation: blur-text 1.5s 0.6s infinite linear alternate; }
.loading-text span:nth-child(5) { filter: blur(0px); animation: blur-text 1.5s 0.8s infinite linear alternate; }
.loading-text span:nth-child(6) { filter: blur(0px); animation: blur-text 1.5s 1s infinite linear alternate; }
.loading-text span:nth-child(7) { filter: blur(0px); animation: blur-text 1.5s 1.2s infinite linear alternate; }
@keyframes blur-text {
 0% { filter: blur(0px); } 100% { filter: blur(4px); }
}
/** loading end **/

/** blank start **/
.blank { width: 100%; display: flex; align-items: center; justify-content: center; height: 60rem; flex-direction: column; color: #bcbcbc; font-size: 1.6rem; gap: 2rem; letter-spacing: -1px; font-weight: 200; }
.blank img { width: 25rem; }


@media screen and (max-width: 768.98px){
 .blank { font-size: 1.6rem; height: 40rem; }
 .blank img { width: 25rem; }
}
/** blank end **/