@charset "UTF-8"; 
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-Light.ttf); font-weight:300}
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-Regular.ttf); font-weight:400}
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-Medium.ttf); font-weight:500}
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-SemiBold.ttf); font-weight:600}
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-Bold.ttf); font-weight:700}
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-ExtraBold.ttf); font-weight:800}
@font-face {font-family:Rubik; src:url(/static/font/rubik/Rubik-Black.ttf); font-weight:900}
@font-face {font-family:IBMPlexSans; src:url(/static/font/ibmplexsans/IBMPlexSansKR-Light.ttf); font-weight:300}
@font-face {font-family:IBMPlexSans; src:url(/static/font/ibmplexsans/IBMPlexSansKR-Regular.ttf); font-weight:400}
@font-face {font-family:IBMPlexSans; src:url(/static/font/ibmplexsans/IBMPlexSansKR-Medium.ttf); font-weight:500}
@font-face {font-family:IBMPlexSans; src:url(/static/font/ibmplexsans/IBMPlexSansKR-SemiBold.ttf); font-weight:600}
@font-face {font-family:IBMPlexSans; src:url(/static/font/ibmplexsans/IBMPlexSansKR-Bold.ttf); font-weight:700}


/* --------------------------------common-------------------------------- */

@media screen and (min-width:1120.1px) {
    .inner[data-layout="wd_1120"] {max-width:1120px}
}/* xlg */

/* button */
[class^=sub_sec] .btn_type_01 {padding:0; display:block; width:100%; height:3.75rem; max-width:unset; line-height:3.75rem; text-align:center; border-radius:6.25rem; font-size:1.5rem; font-weight:500; background-color:#194CB5; color:#FFF}
[class^=sub_sec] .btn_type_02 {padding:0 !important; display:block; width:100%; max-width:unset; height:3.75rem; line-height:3.75rem; text-align:center; border-radius:6.25rem; font-size:1.5rem; font-weight:500; background-color:#1E2431; color:#FFF}
[class^=sub_sec] .btn_type_03 {display:block; width:100%; max-width:unset; height:3.75rem; line-height:3.75rem; text-align:center; border-radius:6.25rem; font-size:1.5rem; font-weight:500; background-color:#e0e0e0; color:#555; padding:0 1.5rem}




/*슬라이드 컨트롤 버튼*/
.swiper-controls-wrap {display:flex; top:0; right:0; position:absolute; z-index:3; border-radius:100px; background:#1A378D; backdrop-filter:blur(10px); gap:/*웹0*/0.5rem; padding:0.625rem 0.5rem/*웹0.375rem*/}
.swiper-controls-wrap .swiper-button-next,
.swiper-controls-wrap .swiper-button-prev {position:static; display:block; width:1.25rem; height:1.25rem}
.swiper-controls-wrap .swiper-button-prev {background:url(/static/images/temp/swiper_nav_next.svg) no-repeat center/100% auto; transform:scaleX(-1)}
.swiper-controls-wrap .swiper-button-next {background:url(/static/images/temp/swiper_nav_next.svg) no-repeat center/100% auto}
.swiper-controls-wrap .swiper-button-prev.swiper-button-disabled {background:url(/static/images/temp/swiper_nav_prev.svg) no-repeat center/100% auto; transform:scaleX(1)}
.swiper-controls-wrap .swiper-button-next.swiper-button-disabled {background:url(/static/images/temp/swiper_nav_prev.svg) no-repeat center/100% auto; transform:scaleX(-1)}

@media screen and (max-width:767px) {
    [class^=sub_sec] .btn_type_01 ,
    [class^=sub_sec] .btn_type_02,
    [class^=sub_sec] .btn_type_03 {height:5rem; line-height:5rem}
}

/* background-color */
.bg_color {background-color:#F4F8FF; min-height:calc(100vh - 6.25rem)}
@media screen and (max-width:767px) {
    .bg_color {background-color:#F4F8FF; min-height:calc(100vh - 5.33rem)}
}

/* font */
.f_jalnan {font-family:'Jalnan', sans-serif}
.f_ibm {font-family:IBMPlexSans, sans-serif}

@media screen and (max-width:1100px) {
    .brt {display:none}
}
@media screen and (max-width:767px) {
    .brt {display:block}
    .brd {display:none}
}
/* --------------------------------common end-------------------------------- */



/* --------------------------------popup-------------------------------- */
.popup {display:flex; align-items:center; justify-content:center; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999}
.popup > div {position:relative; padding:2.25rem 3.6rem 3rem; background:#FFF; min-width:500px; border-radius:20px}
.popup figure {width:8.5rem; height:8.5rem; margin:0 auto 1.625rem; background-repeat:no-repeat; background-size:contain; background-position:center}
.popup p {margin-bottom:1.5rem; text-align:center; max-height:40vh; overflow-y:auto; font-size:1.5rem; color:#505050}
.popup .btn_box {border-radius:3rem; overflow:hidden; display:flex; justify-content:space-between; width:240px; margin:0 auto}
.popup .btn_box button {padding:0; display:block; width:100%; height:3.75rem; line-height:3.75rem; text-align:center; border-radius:6.25rem; font-size:1.5rem; font-weight:500; background-color:#1E2431; color:#FFF}
.popup.confirm .btn_box button {width:50%}
.popup.confirm .btn_box button.d_btn_cancel {background:#1E2431}
@media screen and (max-width:767px) {
    .popup > div {min-width:unset}
}
/* --------------------------------popup end-------------------------------- */


/* --------------------------------study_sec -------------------------------- */
.study_sec .inner {padding:0}
.study_tit_sec .inner {padding:6.38rem 0 5rem}
.study_sec .f_color_01 {color:#194CB5}
.study_sec .f_color_02 {color:#123274}
@media screen and (max-width:1024px) {
    .study_sec .inner,
    .study_tit_sec .inner {padding:0}
}/* sm~md */

.study_sec [data-ani="scroll"] {opacity:0}
.study_sec [data-ani="scroll"].on {animation:scrollFade 0.4s forwards ease-in-out}
@keyframes scrollFade {
    0% {opacity:0}
    100% {opacity:1}
}
.study_sec [data-ani="scroll"].fadeUp {opacity:0; transform:translateY(10px)}
.study_sec [data-ani="scroll"].fadeUp.on {animation:scrollFadeUp 0.4s forwards ease-in-out}
@keyframes scrollFadeUp {
    0% {opacity:0; transform:translateY(10px)}
    100% {opacity:1; transform:translateY(0px)}
}

/* tab menu */
.study_sec .sort_wrap {margin:0}
.study_sec .sort_wrap::after {content:""; display:block; clear:both}
.study_sec .sort_wrap .tab_menu {display:flex; justify-content:flex-start; width:100%; align-items:center; gap:1.25rem; padding:.5rem 0}

/* tab_menu 슬라이더:작은 화면에서 자동 가로 스크롤 (버튼 없음) */
.study_sec .sort_wrap.is_slider ul {flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none}
.study_sec .sort_wrap.is_slider ul::-webkit-scrollbar {display:none}
.study_sec .sort_wrap.is_slider .tab_menu li {flex:0 0 auto; scroll-snap-align:start}
.study_sec .sort_wrap.is_sticky {position:fixed; top:0; left:0; right:0; z-index:1000; background:#fffc; -webkit-backdrop-filter:saturate(180%) blur(20px); -webkit-background-color:#fffc; -webkit-background:#fffc; backdrop-filter:saturate(180%) blur(20px)}
.study_sec .sort_wrap_placeholder {display:none}
.study_sec .sort_wrap.is_sticky + .sort_wrap_placeholder {display:block}
.study_sec .sort_wrap.is_sticky ul {width:88.88%; max-width:1420px; margin:0 auto}
.study_sec .sort_wrap li a {display:block; font-size:1.25rem; line-height:135%; font-weight:600; color:#222; position:relative; padding:.4rem .5rem}
.study_sec .sort_wrap li.active a::before {content:''; display:block; width:5px; height:5px; border-radius:100%; position:absolute; right:0; top:.5rem; background-color:#0547E0}
.study_sec .sort_wrap li.active a::after {content:''; display:block; width:calc(100% - 0.75rem); height:8px; position:absolute; bottom:.5rem; left:50%; z-index:0; background-color:#0547e026; transform:translateX(-50%)}
.study_sec .tab_cont >li {display:none; margin:0 auto}
.study_sec .tab_cont >li.show {display:block}

/* tab_menu 슬라이더: 터치 제스처 개선 */
.study_sec .sort_wrap.is_slider .tab_menu {touch-action: pan-x; -ms-touch-action: pan-x}


/* video_list */
.video_list {display:flex; justify-content:flex-start; align-items:flex-start; gap:3.5rem 1.25rem; flex-wrap:wrap; margin:2.5rem auto}
.video_list > li {width:calc((100% - 3.75rem)/4); aspect-ratio:340/316; position:relative}
.video_list > li.done::before {content:'학습 완료'; display:inline-flex; padding:.75rem 1rem .625rem; justify-content:center; align-items:center; border-radius:0 0 14px 14px; background:#fffc; backdrop-filter:blur(10px); gap:8px; color:#284FA8; font-size:1rem; font-weight:700; line-height:135%; letter-spacing:-.32px; position:absolute; top:0; left:7%; z-index:7}
.video_list .thumb_wrap {width:100%; aspect-ratio:16/9; border:2px solid #EBEEF6; border-radius:1.25rem; overflow:hidden; position:relative}
.video_list .thumb_wrap img {width:100%; object-fit:cover; object-position:center}
.video_list .thumb_wrap::before {content:''; display:block; width:3rem; height:3rem; position:absolute; bottom:1rem; right:1rem; z-index:5; background:url(/static/images/study/ico_play.svg) no-repeat center / contain}
.video_list .done .thumb_wrap::after {content:''; display:block; width:100%; height:100%; background-color:#000; opacity:.3; position:absolute; top:0; left:0; z-index:2}
.video_list .text_wrap {margin:1rem auto 0}
.video_list .text_wrap .top {display:flex; justify-content:flex-start; align-items:flex-start; gap:.5rem}
.video_list .video_no {width:20px; height:20px; background-color:#0547E0; color:#FFF; font-size:13px; font-weight:500; line-height:20px; margin-top:.1rem; letter-spacing:-.26px; border-radius:100%; display:block; text-align:center}
.video_list .video_tit {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:max(2); overflow:hidden; color:#222; text-overflow:ellipsis; font-size:1.25rem; font-weight:700; line-height:135%; letter-spacing:-.4px; flex:1}
.video_list .video_tag {display:flex; justify-content:flex-start; align-items:center; gap:4px; margin:.5rem 0 0 1rem; flex-wrap:wrap}
.video_list .video_tag li {display:inline-block; border-radius:200px; border:1px solid #D5DDEF; padding:.5rem .75rem; background:#FFF; color:#545454; font-size:1rem; font-weight:700; line-height:1; letter-spacing:-.32px}
@media screen and (max-width:1024px) {
    .video_list {gap:2rem 1.25rem}
    .video_list > li {width:calc((100% - 2.5rem)/3); aspect-ratio:328 / 280}
} /*md*/
@media screen and (max-width:767px) {
    .video_list > li {width:calc((100% - 1.25rem)/2)}
} /*sm*/
@media screen and (max-width:600px) {
    .video_list {gap:2rem}
    .video_list > li {width:100%; aspect-ratio:unset}
} /*sm*/

/*no list*/
.study_sec .no_list {display:none; padding:8.25rem 0; text-align:center}
.study_sec .no_list figure {width:200px; height:200px; background-position:center; background-repeat:no-repeat; background-size:contain; margin:0 auto 2.5rem}
.study_sec .no_list .title {font-size:2rem; color:#222; font-weight:700; line-height:140%}

@media screen and (max-width:767px) {
    .study_sec .no_list figure {width:120px; height:120px}
} /*sm*/
/* --------------------------------study_sec end-------------------------------- */


/* --------------------------------study main -------------------------------- */
.study_sec .section_title {color:#222; font-size:1.75rem; font-weight:700; line-height:135%; letter-spacing:-.56px; display:flex; justify-content:flex-start; align-items:center; gap:8px; margin:2.5rem auto 1rem}
@media screen and (max-width:1024px) {
    .study_sec .section_title {font-size:1.5rem}
}/* sm~md */
@media screen and (max-width:340px) {
    .study_sec .section_title {font-size:1.4rem}
}/* sm */

/* 메인 - 상단 히어로 영역 */
.hero_sec .inner {max-width:940px}
.hero_sec .hero_desc {text-align:center; position:relative}
.hero_sec .hero_desc p {color:#222; font-size:2.375rem; font-weight:500; line-height:135%; letter-spacing:-.76px; display:flex; align-items:center; justify-content:center}
.hero_sec .hero_desc p b {font-weight:700}
.hero_sec .bubble {color:#FFF; padding:.75rem 1.25rem; font-size:2.375rem; font-weight:700; line-height:135%; letter-spacing:-.76px; border-radius:16px; background:#0547E0; position:relative; margin-right:.75rem}
.hero_sec .bubble:after {content:''; display:block; width:24px; height:16px; background:url(/static/images/study/ico_bubble.png) no-repeat center/contain; position:absolute; bottom:-8px; right:31%}
.hero_sec .bubble2 {color:#FFF; padding:.75rem 1.25rem; font-size:2.375rem; font-weight:700; line-height:135%; letter-spacing:-.76px; border-radius:16px; background:#00B482; position:relative; margin-right:1.125rem; display:inline-flex; justify-content:center; align-items:center; gap:8px}
.hero_sec .bubble2::before {content:''; display:block; width:3rem; height:2.375rem; background:url(/static/images/study/ico_hat2.png) no-repeat center/contain}
.hero_sec .hero_desc { overflow-x: clip; }
.hero_sec .hero_desc img {width:calc(420/1420*100%); margin:3rem auto 1.625rem}
.hero_sec .hero_desc .bubble_wrap {position:relative; margin-top:1rem}
.hero_sec .hero_desc .btn_more {position:absolute; bottom:8px; left:50%; transform:translate(-60%,100%); padding:.5rem .75rem; border-radius:10px; background:#CCF0E6; color:#007E5B; font-size:1.75rem; font-weight:600; line-height:135%; letter-spacing:-.56px; display:flex; justify-content:center; align-items:center; gap:1px; z-index:3}
.hero_sec .hero_desc .btn_more::after {content:''; display:block; width:13px; height:12px; background:url(/static/images/study/ico_more.png) no-repeat center/contain}
@media screen and (max-width:1024px) {
    .hero_sec {margin-top:2rem}
    .hero_sec .hero_desc p {font-size:1.5rem}
    .hero_sec .bubble,
    .hero_sec .bubble2 {font-size:1.17rem; border-radius:8px; padding:6px 10px}
    .hero_sec .bubble:after {right:16px}
    .hero_sec .bubble2 {margin-right:2px}
    .hero_sec .bubble2::before {width:24px; height:19px}
    .hero_sec .hero_desc img {width:calc(210/328*100%); max-width:300px; margin:2rem auto 1.67rem}
    .hero_sec .hero_desc .btn_more {font-size:10px; line-height:1; border-radius:8px; bottom:4px; transform:translate(-76%,100%)}
    .hero_sec .hero_desc .btn_more::after {width:10px; height:8px}
}/* sm~md */

/* 메인 - 학습 현황 영역 */
.status_sec {margin-top:6.25rem}
.status_sec .inner {max-width:940px}
.status_sec .hashtag_list {display:flex; justify-content:flex-start; align-items:center; gap:8px}
.status_sec .hashtag {padding:.75rem 1.25rem; color:#1A378D; font-size:1rem; font-weight:600; line-height:135%; letter-spacing:-.32px; border-radius:100px; background:#E6EDFC}
.status_sec .sub_title {font-size:1.875rem; font-weight:400; line-height:100%; letter-spacing:-1.5px; margin-top:1rem}
.status_sec .status_grid {display:flex; flex-direction:row; align-items:center; gap:1.25rem}
.status_sec .status_card {flex:1; padding:1.5rem 1.25rem; border-radius:1.875rem; background:#FFF; box-shadow:2px 2px 10px 0 #00409914; display:flex; flex-direction:column; align-items:center; gap:1rem; align-self:stretch}
.status_sec .card_title {color:#222; text-align:center; font-size:1.25rem; font-weight:700; line-height:135%; letter-spacing:-.4px}
.status_sec .progress_text {color:#545454; font-size:1rem; font-weight:500; line-height:1; letter-spacing:-.32px}
.status_sec .progress_text b {color:#1A378D; font-weight:700}
.status_sec .btn_wrap button {padding:0.5625rem 1.25rem; border-radius:12px; text-align:center; font-size:1.25rem; font-weight:600; line-height:135%; /* 27px */letter-spacing:-0.4px; position:relative}
.status_sec .btn_noissue {border:1px solid #D5DDEF; background:#FFF; color:#5372B9}
.status_sec .btn_reissue,
.status_sec .btn_issue {border:1px solid #0547E0; background:#0547E0; color:#fff}
.status_sec .btn_reissue::after,
.status_sec .btn_issue::after {content:''; display:block; width:40px; height:30px; background:url(/static/images/study/ico_hat.png) no-repeat center/contain; position:absolute; top:12px; right:-10px; transform:translate(0, -100%)}
.status_sec .notice_wrap {width:100%; background-color:#EFF2F9; border-radius:1.875rem; padding:2rem 0; margin:2.5rem auto 0; text-align:center}
.status_sec .notice_wrap img {width:20%; max-width:180px; aspect-ratio:1/1; margin:0 auto 1.25rem}
.status_sec .notice_wrap .notice_title {margin-bottom:1.5rem; color:#222; text-align:center; font-size:1.75rem; font-weight:500; line-height:135%; letter-spacing:-0.56px}
.status_sec .notice_wrap .notice_title b {font-weight:700}
.status_sec .btn_login {max-width:408px; margin:0 auto 13px}
.status_sec .btn_login span:first-of-type {position:relative; margin-right:16px}
.status_sec .btn_login span:first-of-type::after {content:''; display:block; position:absolute; top:50%; right:-10px; width:1px; height:12px; background-color:#fff; transform:translateY(-50%)}
@media screen and (max-width:1024px) {
    .status_sec .sub_title {font-size:2.5rem; margin-top:1.34rem}
    .status_sec .notice_wrap {padding:2rem 1.34rem 2.67rem}
    .status_sec .notice_wrap img {min-width:172px; width:calc(173/328*100%); max-width:240px; margin:0 auto}
    .status_sec .btn_login {min-width:200px; width:calc(200/328*100%); max-width:unset}
}/* sm~md */
/* 도넛 */
.status_sec .progress_sec {display:grid; place-items:center}
.status_sec .progress_title {font-size:1.75rem; font-weight:700; margin-bottom:1rem}
.status_sec .progress_donut {position:relative; width:170px; aspect-ratio:1/1}
.status_sec .donut_svg {width:100%; height:auto; transform:rotate(-90deg)}
.status_sec .donut_track, .status_sec .donut_bar {fill:none; stroke-width:16px; cx:50; cy:50; r:38}
.status_sec .donut_track {stroke:#e9eff7}
.status_sec .donut_bar {stroke:#0a4be1; stroke-width:16px; stroke-linecap:round; stroke-dasharray:263.89; stroke-dashoffset:263.89; transition:stroke-dashoffset .8s ease}
.status_sec .donut_center {position:absolute; inset:0; display:grid; place-content:center; text-align:center}
.status_sec .donut_percent {color:#0547E0; text-align:center; font-size:2rem; font-weight:700; line-height:135%; letter-spacing:-.64px}
.status_sec .donut_label {color:#222; display:block; margin-top:.5rem; font-weight:500; font-size:1rem}
.status_sec .donut_progress {color:#545454; font-size:1rem; font-weight:500; line-height:135%; letter-spacing:-.32px; text-align:center; margin-top:4px}
.status_sec .donut_progress b {color:#1A378D; font-weight:700}
/* 초기 깜빡임 방지 */
.status_sec .progress_donut {visibility:hidden}
.status_sec .progress_donut.is_ready {visibility:visible}
@media (prefers-reduced-motion:reduce) {
    .donut_bar {transition:none}
}
@media screen and (max-width:1024px) {
    .status_sec .progress_donut {width:100%; max-width:170px}
    .status_sec .donut_label {margin-top:0}
    .status_sec .btn_wrap button {font-size:1.17rem}
}/* sm~md */

/* 모바일 전용 닉네임 영역 */
.status_sec .nickname_wrap {border-radius:1.25rem; background:#EFF2F9; padding:2rem 1.67rem; margin-top:2.5rem}
.nickname_wrap .nickname {color:#222; font-size:1.17rem; font-weight:500; line-height:135%; letter-spacing:-.4px; display:inline-flex; gap:4px; justify-content:flex-start; align-items:center}
.nickname_wrap .nickname span {font-size:1.67rem; font-weight:700}
.nickname_wrap .nickname_desc {color:#222; font-size:1.17rem; font-weight:400; line-height:135%; letter-spacing:-.28px; margin-top:8px}
@media screen and (min-width:1024.1px) {
    .status_sec .nickname_wrap {display:none}
}/* sm~md */


/* 메인 - 영상 목록 */
.video_sec .inner {max-width:940px}
.video_sec .section_title::before {content:''; display:block; width:21px; height:21px; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url("/static/images/study/ico_tit_1.png")}
.video_sec .control_wrap {position:absolute; left:unset; right:0; top:0; bottom:unset; justify-content:flex-end}
.video_sec .thumb_wrap {width:100%; aspect-ratio:16/9; border:2px solid #EBEEF6; border-radius:1.25rem; overflow:hidden; position:relative}
.video_sec .thumb_wrap img {width:100%; object-fit:cover; object-position:center}
.video_sec .thumb_wrap::before {content:''; display:block; width:3rem; height:3rem; position:absolute; bottom:1rem; right:1rem; z-index:5; background:url(/static/images/study/ico_play.svg) no-repeat center / contain}
.video_sec .done .thumb_wrap::after {content:''; display:block; width:100%; height:100%; background-color:#000; opacity:.3; position:absolute; top:0; left:0; z-index:2}
@media screen and (max-width:1024px) {
    .video_sec .control_wrap {}
    .video_sec .section_title {margin:2.67rem auto 1.34rem}
}/* sm~md */
@media screen and (max-width:767px) {
    .video_sec .inner {width:100%}
    .video_sec .section_title {width:88.88%}
    .video_sec .control_wrap {right:5.56%; top:unset; bottom:-1.34rem; transform:translateY(100%)}
    .video_sec .swiper-container {margin-left:5.56%}
}/* sm~md */


/* 추천 학습 영역 */
.recommend_sec .inner {max-width:940px}
.recommend_sec .section_title::before {content:''; display:block; width:21px; height:21px; background-position:center; background-size:contain; background-repeat:no-repeat; background-image:url("/static/images/study/ico_tit_2.png")}
.recommend_sec .card_grid {display:grid; grid-template-columns:repeat(2,1fr); grid-gap:1rem 1.25rem}
.recommend_sec .learn_card {padding:2.5rem 1.5rem 1.5rem; border-radius:1.875rem; background:#D5DDEF; position:relative}
.recommend_sec .learn_card:last-of-type {background:#EBEEF6}
.recommend_sec .card_title {color:#222; font-size:1.75rem; font-weight:500; line-height:135%; letter-spacing:-0.56px; position:relative}
.recommend_sec .card_title::after {content:''; display:block; width:3.5rem; height:3.5rem; background-repeat:no-repeat; background-position:center; background-size:contain; position:absolute; right:8px; top:50%; transform:translateY(-50%)}
.recommend_sec .learn_card:nth-of-type(1) .card_title::after {background-image:url(/static/images/study/ico_card_1.png)}
.recommend_sec .learn_card:nth-of-type(2) .card_title::after {background-image:url(/static/images/study/ico_card_2.png)}
.recommend_sec .learn_card:nth-of-type(3) .card_title::after {background-image:url(/static/images/study/ico_card_3.png)}
.recommend_sec .learn_card:nth-of-type(4) .card_title::after {background-image:url(/static/images/study/ico_quiz2.png)}
.recommend_sec .card_title b {font-size:2rem; font-weight:700}
.recommend_sec .card_grid .btn_wrap {margin:1.25rem auto 0}
.recommend_sec .card_grid .btn_wrap .btn_type_01 {min-width:unset; padding:0}
@media screen and (max-width:1024px) {
    .recommend_sec .section_title {margin:6.67rem auto 1.34rem}
    .recommend_sec .card_grid {grid-template-columns:100%; grid-gap:8px}
    .recommend_sec .card_title {font-size:1.5rem}
    .recommend_sec .card_title b {font-size:1.67rem}
    .recommend_sec .card_grid .btn_wrap .btn_type_01 {height:3rem; line-height:3rem}
    .recommend_sec .learn_card {padding:2.67rem 1.34rem 2rem}
    .recommend_sec .learn_card:last-of-type {margin-top:16px}
    .recommend_sec .learn_card:nth-of-type(4) {position:relative}
    .recommend_sec .learn_card:nth-of-type(4) .card_title {position:unset}
    .recommend_sec .learn_card:nth-of-type(4) .card_title::after {width:6.17rem; height:6.17rem; right:1.5rem}
    .recommend_sec .learn_card:nth-of-type(4) .btn_type_01 {width:calc((100% - 0.5rem)/2); padding:0}
}/* sm~md */
@media screen and (max-width:340px) {
    .recommend_sec .card_grid .btn_wrap .btn_type_01 {font-size:11px}
}/* sm~md */


/* 은행 슬라이드 영역 */
.banks_list_sec {margin:1.5rem auto 8rem}
.banks_list_sec .inner {max-width:940px}
.banks_list_sec .slide_wrap {position:relative; display:block; padding:1.875rem 3.5rem; border-radius:1.875rem; background:url(/static/images/study/bg_banks.png) no-repeat right 3% bottom/178px auto #1A378D; aspect-ratio:940/218}
.banks_list_sec .swiper-container{width:116px; height:40px; border:1px solid #D5DDEF; background:#FFF; border-radius:100px;  overflow:hidden; float:left}
/*.banks_list_sec .swiper-slide a {display:flex; height:40px; padding:0; align-items:center;}*/
.banks_list_sec .swiper-slide a {display:block; width:100%; height:100%; border-radius:100px; outline-offset:-2px}
.banks_list_sec .swiper-slide .bank_logo {display:flex; width:100%; height:100%; padding:0; align-items:center}
.banks_list_sec .swiper-slide .bank_logo img {width:auto; height:100%; margin:-1px auto 0}
.banks_list_sec .bank_slogan {color:#FFF; font-size:2.375rem; font-weight:700; line-height:135%; letter-spacing:-.76px; position:absolute; bottom:1.875rem; left:3.5rem; z-index:10}
.banks_list_sec .control_wrap {position:absolute; bottom:-8px; right:0; transform:translateY(100%)}
@media screen and (max-width:1024px) {
    .banks_list_sec .slide_wrap {padding:24px; background-size:113px auto; background-position:right -3% bottom; aspect-ratio:unset; height:140px}
    .banks_list_sec .swiper-container{width:86px; height:28px;}
    .banks_list_sec .bank_slogan {font-size:18px; left:24px; bottom:24px}
    .banks_list_sec .swiper-slide .bank_logo img {margin:0 auto}
    }/* sm~md */
@media screen and (max-width:767px) {
    .banks_list_sec .slide_wrap {}
}/* sm */
/* --------------------------------study main end -------------------------------- */


/* --------------------------------video_list_sec -------------------------------- */
.video_list_sec {margin-top:-2.5rem}
.video_list_sec .highlight {color:#007bff}
@media screen and (max-width:1024px) {
    .video_list_sec {margin-top:8px}
}/* md */
/* --------------------------------video_list_sec end-------------------------------- */


/* --------------------------------video_detail -------------------------------- */
/* 영상 학습 상세 페이지 */
@media screen and (min-width:1024.1px) {
    .video_detail_layout {width:88.88%; max-width:1420px; margin:0 auto 6.25rem; display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-direction:row}
    .video_detail_sec_01 {width:calc(700/1420*100%)}
    .video_detail_sec_02 {width:calc(600/1420*100%)}
    .video_detail_sec_01 .inner,
    .video_detail_sec_02 .inner {width:100%}
}
/*.video_detail_sec_01 .thumb_wrap {width:100%; aspect-ratio:16/9; border:2px solid #EBEEF6; border-radius:1.25rem; overflow:hidden; position:relative}*/
/*.video_detail_sec_01 .thumb_wrap img {width:100%; object-fit:cover; object-position:center}*/
/*.video_detail_sec_01 .thumb_wrap::before {content:''; display:block; width:3rem; height:3rem; position:absolute; top:50%; right:50%; z-index:5; background:url(/static/images/study/ico_play.svg) no-repeat center / contain; transform:translate(50%,-50%)}*/
/*.video_detail_sec_01 .done .thumb_wrap::after {content:''; display:block; width:100%; height:100%; background-color:#000; opacity:.3; position:absolute; top:0; left:0; z-index:2}*/
.video_detail_sec_01 .video_wrap {width:100%; aspect-ratio:16/9}
.video_detail_sec_01 .video_wrap .video {background-position:center; background-repeat:no-repeat; width:100%; height:100%; background-size:cover; position:relative}
.video_detail_sec_01 .video_wrap .video::before {content:''; display:block; width:3rem; height:3rem; position:absolute; top:50%; right:50%; background:url(/static/images/study/ico_play.svg) no-repeat center / contain; transform:translate(50%,-50%); z-index:1}
.video_detail_sec_01 .video_wrap .video iframe {width:100%; height:100%; position:absolute; top:0; left:0; z-index:3}
.video_detail_sec_01 .text_wrap {margin:1rem auto 0}
.video_detail_sec_01 .text_wrap .top {display:flex; justify-content:flex-start; align-items:flex-start; gap:.5rem}
.video_detail_sec_01 .video_no {width:20px; height:20px; background-color:#0547E0; color:#FFF; font-size:13px; font-weight:500; line-height:20px; margin-top:.1rem; letter-spacing:-.26px; border-radius:100%; display:block; text-align:center}
.video_detail_sec_01 .video_tit {display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:max(2); overflow:hidden; color:#222; text-overflow:ellipsis; font-size:1.25rem; font-weight:700; line-height:135%; letter-spacing:-.4px; flex:1}
.video_detail_sec_01 .video_tag {display:flex; justify-content:flex-start; align-items:center; gap:4px; margin:1rem 0 0 1.5rem; flex-wrap:wrap}
.video_detail_sec_01 .video_tag li {display:inline-block; border-radius:200px; border:1px solid #D5DDEF; padding:.5rem .75rem; background:#FFF; color:#1A378D; font-size:1rem; font-weight:700; line-height:1; letter-spacing:-.32px}
.video_detail_sec_01 .btn_download {width:100%; margin:2rem auto 0}
.video_detail_sec_02 .tab_wrap {margin:0}
.video_detail_sec_02 .tab_wrap::after {content:""; display:block; clear:both}
.video_detail_sec_02 .tab_wrap .tab_menu {display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%; align-items:center; gap:1.25rem; padding:.5rem 0}
.video_detail_sec_02 .tab_wrap li a {display:block; font-size:1.25rem; line-height:135%; font-weight:600; color:#222; position:relative; padding:6.5px 8px}
.video_detail_sec_02 .tab_wrap li.active a::after {content:''; display:block; width:calc(100% - 0.75rem); height:2px; position:absolute; bottom:3px; left:50%; z-index:0; background-color:#0547E0; transform:translateX(-50%)}
.video_detail_sec_02 .tab_cont >li {display:block; margin:1rem auto 1.5rem}
.video_detail_sec_02 .no_list figure {width:130px; height:130px}
.video_detail_sec_02 .video_list {gap:1rem; margin:0 auto}
.video_detail_sec_02 .video_list > li {width:calc((100% - 1rem)/2)}
.video_detail_sec_02 .video_list .thumb_wrap::before {bottom:unset; top:50%; right:50%; transform:translate(50%,-50%)}
.video_detail_sec_02 .video_tag li {color:#1A378D}
.video_detail_sec_02 .intro_wrap p {color:#545454; font-size:1.25rem; font-weight:400; line-height:135%; letter-spacing:-.4px}
.video_detail_sec_02 .key_points {margin:1.5rem auto}
.video_detail_sec_02 .key_points > li {margin-bottom:16px}
.video_detail_sec_02 .key_point_desc {margin-top:8px}
.video_detail_sec_02 .key_point strong {color:#1A378D; font-size:1.25rem; font-weight:700; line-height:135%; letter-spacing:-.4px}
.video_detail_sec_02 .lesson_list {margin-top:.5rem}
.video_detail_sec_02 .lesson_group {margin-bottom:1rem}
.video_detail_sec_02 .lesson_title {color:#545454; font-size:1.25rem; font-weight:500; line-height:135%; letter-spacing:-.4px; margin-bottom:6px}
.video_detail_sec_02 .topic_list li {margin-bottom:6px; position:relative; padding-left:6px; color:#545454; font-size:1rem; font-weight:400; line-height:135%; letter-spacing:-.32px}
.video_detail_sec_02 .topic_list li::before {content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:3px; border-radius:100%; background-color:#545454; font-weight:700; aria-hidden:true}
/* related video: make keyboard focus visible */
#relatedVideo .video_link {position:relative; border-radius:1.25rem}
#relatedVideo .video_link:focus-visible {outline:2px dotted red}

@media screen and (max-width:1024px) {
    .video_detail_sec_01 {width:100%}
    .video_detail_sec_01 .inner {width:100%}
    .video_detail_sec_01 .text_wrap {padding:3rem 5.56% 0; border-radius:1.875rem 30px 0 0; /* margin-top:-2rem;*/ position:relative; z-index:5; background-color:#fff}
    .video_detail_sec_01 .btn_download {max-width:88.88%}
    .video_detail_sec_02 {width:100%; margin:2rem auto}
    .video_detail_sec_02 .key_points {margin:2rem auto 0}

    /*.video_detail_sec_02 #tabMenu.is_sticky {position:fixed; top:0; left:0; right:0; z-index:1000; background:#fffc; -webkit-backdrop-filter:saturate(180%) blur(20px); -webkit-background-color:#fffc; -webkit-background:#fffc; backdrop-filter:saturate(180%) blur(20px); width:88.88%; max-width:1420px; margin:0 auto}*/

} /*md*/
@media screen and (max-width:767px) {
} /*sm*/
@media screen and (max-width:600px) {
    .video_detail_sec_02 .video_list {gap:2rem}
    .video_detail_sec_02 .video_list > li {width:100%}
} /*sm*/
/* --------------------------------video_detail end-------------------------------- */


/* --------------------------------about_cont_03 -------------------------------- */
.about_cont_03 {padding:1rem 0 3.375rem}
.about_cont_03 .btn_wrap {display:flex; flex-direction:column; gap:2.5rem}
.about_cont_03 .btn_arrow {display:block; width:100%; padding:3.75rem; flex:1; color:#FFF; transition:.2s ease-in-out; border-radius:20px; font-weight:700; font-size:2.75rem; position:relative}
.about_cont_03 .btn_study {background:linear-gradient(90deg,#FFF 50%,#00BDE7 0) var(--_p,100%)/200% no-repeat; border:0 solid #00BDE7}
.about_cont_03 .btn_quiz {background:linear-gradient(90deg,#FFF 50%,#FF9900 0) var(--_p,100%)/200% no-repeat; border:0 solid #FF9900}
.about_cont_03 .btn_program {background:linear-gradient(90deg,#FFF 50%,#B062EC 0) var(--_p,100%)/200% no-repeat; border:0 solid #B062EC}
.about_cont_03 .btn_study::after {content:''; display:block; width:11.25rem; height:8.45rem; background:url(../images/study/ico_study.png) center center / 100% auto no-repeat; position:absolute; bottom:50%; transform:translateY(50%); right:3.125rem}
.about_cont_03 .btn_quiz::after {content:''; display:block; width:12.5rem; height:9.375rem; background:url(../images/study/ico_quiz.png) center center / 100% auto no-repeat; position:absolute; bottom:50%; transform:translateY(50%); right:3.125rem}
.about_cont_03 .btn_program::after {content:''; display:block; width:9.75rem; height:10.875rem; background:url(../images/study/ico_program.png) center center / 100% auto no-repeat; position:absolute; bottom:50%; transform:translateY(50%); right:3.125rem}
.about_cont_03 .btn_arrow .desc {display:block; font-size:1.625rem; color:#FFF; font-weight:400; margin-top:2.5rem}
.about_cont_03 .btn_arrow .arrow {position:relative; margin-left:1.875rem; display:inline-block; width:49px; height:12px; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; vertical-align:middle; cursor:pointer}
.about_cont_03 .btn_arrow .arrow::before {content:''; position:absolute; left:0; top:50%; width:100%; border-bottom:2px solid #FFF; transform:translateY(-50%)}
.about_cont_03 .btn_arrow .arrow::after {content:''; position:absolute; right:0; top:50%; display:block; width:10px; height:10px; border-right:2px solid #FFF; border-top:2px solid #FFF; transform:translateY(-50%) rotate(45deg)}

@media screen and (max-width:1024px) {
    .about_cont_03 .btn_arrow .desc {font-size:1.34rem}
}/* md */
@media screen and (max-width:767px) {
    /* .about_cont_03 .btn_arrow .arrow {left:1.8rem; bottom:calc(1.8rem + 8px)}*/
    .about_cont_03 .btn_arrow {padding:1.85rem; font-size:2.5rem; border-radius:1.5rem}
    .about_cont_03 .btn_arrow .arrow {display:none}
    .about_cont_03 .btn_arrow .desc {margin:1rem 0 5rem; font-size:1.3rem}
    .about_cont_03 .btn_study::after {width:6rem; height:5rem; bottom:1.85rem; transform:translateY(0); right:1.85rem; background-size:contain}
    .about_cont_03 .btn_quiz::after {width:6.5rem; height:5.5rem; bottom:1.85rem; transform:translateY(0); right:1.85rem; background-size:contain}
    .about_cont_03 .btn_program::after {width:6rem; height:6.5rem; bottom:1.85rem; transform:translateY(0); right:1.85rem; background-size:contain}
}/* sm */

@media (hover:hover) {
    .about_cont_03 .btn_arrow:hover {--_p:0%; color:#1E2431; border:2px solid #EAEAEA}
    .about_cont_03 .btn_arrow:hover .arrow {width:100px}
    .about_cont_03 .btn_arrow:hover .arrow::before,
    .about_cont_03 .btn_arrow:hover .arrow::after {border-color:#505050}
    .about_cont_03 .btn_arrow:hover .desc {color:#505050}
    /* .about_cont_03 .btn_arrow:hover .arrow::after {content:''; display:block; width:15px; height:22px; background:url(/../images/study/btn_arrow_bk.svg) center center /contain no-repeat; position:absolute; bottom:-10px; right:-4px}*/
}/* hover only */

/* --------------------------------about_cont_03 end-------------------------------- */


/* --------------------------------class_list_sec-------------------------------- */
.class_list_sec .sec_title {color:#1E2431; font-size:3.5rem; font-weight:700; line-height:1; margin-bottom:3rem; display:flex; justify-content:flex-start; flex-direction:row; align-items:center; gap:1.25rem}
.class_list_sec .sec_title::before {content:''; display:inline-block; width:3.5rem; height:3.5rem; background:url(../images/study/ico_study_s.png) center center / contain no-repeat}
.class_list_sec .list_wrap {width:100%; display:flex; justify-content:flex-start; align-items:center; flex-direction:column; gap:1rem; margin-bottom:3.875rem; scroll-margin-top:14rem}
.class_list_sec .title_wrap {width:100%; border-radius:1.25rem; border:2px solid #EAEAEA; background:#FFF; padding:2.625rem 3.75rem; position:relative}
.class_list_sec .title_wrap .label {display:block; color:#1E2431; font-size:1.5rem; font-weight:500; line-height:1; margin-bottom:0.5rem}
.class_list_sec .title_wrap .title {color:#1E2431; font-size:3rem; font-weight:700; line-height:160%; margin-bottom:1.5rem; width:calc(100% - 14rem); word-break:keep-all}
.class_list_sec .title_wrap .desc {color:#505050; font-size:1.5rem; font-weight:400; line-height:175%; padding-right:14.375rem}
.class_list_sec .class_wrap {width:100%; border-radius:1.25rem; border:2px solid #EAEAEA; background:#F8F8F8; padding:2.625rem 3.75rem}
.class_list_sec .title_wrap figure {width:14.375rem; height:14.375rem; background-position:center; background-repeat:no-repeat; background-size:contain; position:absolute; right:3rem; bottom:50%; transform:translateY(50%); transition:all .3s ease-in-out}
.class_list_sec .class_cate {flex:1}
.class_list_sec .class_cate + .class_cate {border-top:1px solid #E0E0E0; padding-top:1.5rem; margin-top:1.5rem}
/*.class_list_sec .class_cate li {display:flex; justify-content:flex-start; align-items:center; gap:2.5rem}*/
.class_list_sec .class_cate li {width:100%}
.class_list_sec .class_cate li:not(:last-child) a {border-bottom:1px solid #E0E0E0}
.class_list_sec .class_cate li:not(:first-child) .cate_name,
.class_list_sec .class_cate li:not(:first-child) a {padding:1.5rem 0}
.class_list_sec .class_cate li:first-child .cate_name,
.class_list_sec .class_cate li:first-child a {padding-bottom:1.5rem}
.class_list_sec .class_cate li:last-child .cate_name,
.class_list_sec .class_cate li:last-child a {padding-bottom:0}
.class_list_sec .class_cate li a {display:flex; flex:1; justify-content:space-between; align-items:center; gap:1rem}
.class_list_sec .class_cate li .cate_name {color:#194CB5; font-size:1.875rem; font-weight:700; line-height:3rem; margin-right:2.5rem}
.class_list_sec .class_cate li .class_title {display:inline-flex; justify-content:flex-start; align-items:center; color:#505050; font-size:1.875rem; font-weight:400; line-height:160%; letter-spacing:-0.7px; flex:1}
.class_list_sec .class_cate li .class_title::after {content:''; display:inline-block; margin-left:1rem; width:8px; height:14px; background:url(../images/study/btn_arrow_bk.svg) center center / 100% auto no-repeat}
.class_list_sec .class_cate li:not(:first-child) .cate_name {color:transparent}
.class_list_sec .class_status {display:inline-block; color:#FFF; padding:1rem 1.5rem; border-radius:18.75rem; background:#194CB5; text-align:center; font-size:1.125rem; font-weight:600; line-height:1; flex-shrink:0}
.class_list_sec .class_status.done {color:#777; background:#E0E0E0}


/* floating btn */
.btn_go_quiz {position:fixed; bottom:8rem; right:45px; z-index:105; transition:bottom .2s; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:space-between}
.btn_go_quiz.active {display:none}
.btn_go_quiz a {padding:1.25rem 1.375rem; border-radius:1.375rem; background:#00B482; color:#FFF; text-align:center; font-size:1.375rem; font-weight:700; line-height:130%; letter-spacing:-.429px; position:relative}
.btn_go_quiz a::after {content:''; display:block; width:70%; aspect-ratio:1/1; background:url(/static/images/study/btn_quiz.svg) no-repeat center/contain; position:absolute; top:1.75rem; right:50%; transform:translate(50%,-100%)}
@media screen and (max-width:1024px) {
    .btn_go_quiz {bottom:7rem; right:5.56%}
    .btn_go_quiz a {padding:0.75rem 1rem; font-size:1rem; border-radius:1rem}
.btn_go_quiz a::after {width:50%; top:1rem}
} /* md */
@media screen and (max-width: 767px) {
    .btn_go_quiz {bottom:2rem}
} /* sm */

@media (hover:hover) {
    .class_list_sec .list_wrap:hover figure {transform:translateY(50%) scale(1.05)}
    .class_list_sec .class_cate li:hover .class_title {color:#194CB5}
}

@media screen and (max-width:1024px) {
    .class_list_sec {padding:2rem 0 0}
    .class_list_sec .class_cate li .cate_name,
    .class_list_sec .class_cate li .class_title {font-size:1.5rem}
    .class_list_sec .title_wrap figure {width:10rem; height:10rem}
    .class_list_sec .title_wrap .title {font-size:2.5rem}
    .class_list_sec .title_wrap .desc {font-size:1.34rem; padding-right:10rem}
}

@media screen and (max-width:767px) {
    .class_list_sec .sec_title {font-size:2.46rem}
    .class_list_sec .title_wrap {border-radius:1.5rem; padding:2rem 1.23rem 1.6rem}
    .class_list_sec .class_wrap {border-radius:1.5rem; padding:1.23rem}
    .class_list_sec .title_wrap .title {font-size:1.85rem; margin-bottom:0; width:calc(100% - 5rem)}
    .class_list_sec .title_wrap .label {font-size:1.5rem; color:#777}
    .class_list_sec .title_wrap .desc {display:none}
    .class_list_sec .title_wrap figure {width:6rem; height:6rem; right:1.23rem}
    .class_list_sec .list_wrap {margin-bottom:2.46rem}
    .class_list_sec .list_wrap figure {transition:none}
    .class_list_sec .list_wrap:hover figure {transform:translateY(50%) scale(1)}
    .class_list_sec .class_cate li {gap:10px}
    .class_list_sec .class_cate li .cate_name {font-size:1.2rem; line-height:3rem}
    .class_list_sec .class_cate li .class_title {font-size:1.2rem}
    .class_list_sec .class_cate li .class_title::after {margin-left:10px; width:4px; height:8px}

    .class_list_sec .class_cate li:not(:first-child) .cate_name,
    .class_list_sec .class_cate li:not(:first-child) a {padding:1rem 0}
    .class_list_sec .class_cate li:first-child .cate_name,
    .class_list_sec .class_cate li:first-child a {padding-bottom:1rem}
    .class_list_sec .class_cate li:last-child .cate_name,
    .class_list_sec .class_cate li:last-child a {padding-bottom:0}
    .class_list_sec .class_cate + .class_cate {padding-top:1rem; margin-top:1rem}
    .class_list_sec .class_status {font-size:1rem; padding:0 1.2rem; line-height:3rem; height:3rem}
}/* sm */


@media screen and (max-width:500px) {
    .class_list_sec .class_cate li .cate_name {min-width:25px}
    .class_list_sec .class_cate li a {max-width:calc(100% - 25px - 1rem)}
    .class_list_sec .class_cate li .class_title {width:calc(100% - 70px - 1rem)}
    .class_list_sec .class_cate li .class_title span {display:inline-block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
    .class_list_sec .class_cate li .class_title::after {flex-shrink:0}
}/* sm */
/* --------------------------------class_list_sec end-------------------------------- */



/* --------------------------------class_detail_sec-------------------------------- */
/* 상단 타이틀 부분 */
/*.class_detail_sec_01 {padding:8.75rem 0 0}*/
.class_detail_sec_01 .bg_wrap {background:#F4F8FF; padding:3.625rem 0}
.class_detail_sec_01 .sec_title {color:#1E2431; font-size:3.5rem; font-weight:700; margin-bottom:3rem; width:calc(100% - 14rem); line-height:160%; position:relative}
.class_detail_sec_01 .label {color:#1E2431; display:block; font-size:1.5rem; font-weight:500; line-height:1; margin-bottom:.6rem}
.class_detail_sec_01 .bg_wrap .btn_wrap {display:flex; justify-content:flex-start; flex-direction:row; align-items:center; gap:1rem}
.class_detail_sec_01 .btn_study,
.class_detail_sec_01 .btn_review,
.class_detail_sec_01 .btn_quiz {color:#FFF; text-align:center; font-size:1.5rem; font-weight:500; line-height:100%; padding:1.125rem 0; width:15rem; border-radius:300px; display:inline-block; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; gap:6px}
.class_detail_sec_01 .btn_study {background:#00BDE7}
.class_detail_sec_01 .btn_review {background:#1E2431}
.class_detail_sec_01 .btn_quiz {background:#F90}
.class_detail_sec_01 .btn_study::after,
.class_detail_sec_01 .btn_review::after,
.class_detail_sec_01 .btn_quiz::after {content:''; display:inline-block; width:.9rem; height:1.1rem; background:url(../images/study/btn_arrow.svg) center center /contain no-repeat}
.class_detail_sec_01 .title_wrap figure {width:14.375rem; height:14.375rem; background-position:center; background-repeat:no-repeat; background-size:contain; position:absolute; right:0; bottom:50%; transform:translateY(50%); transition:all .3s ease-in-out}

@media screen and (max-width:767px) {
    .class_detail_sec_01 {padding:4.375rem 0 0}
    .class_detail_sec_01 .bg_wrap {padding:3.85rem 0 2.77rem}
    .class_detail_sec_01 .sec_title {width:calc(100% - 6rem); font-size:1.85rem; margin-bottom:1.85rem}
    .class_detail_sec_01 .sec_title .label {color:#777; font-size:1.23rem}
    .class_detail_sec_01 .title_wrap {position:relative}
    .class_detail_sec_01 .title_wrap figure {width:6rem; height:6rem}
    .class_detail_sec_01 .btn_study,
    .class_detail_sec_01 .btn_quiz {width:12rem; font-size:1.38rem}
}
@media screen and (max-width:400px) {
    .class_detail_sec_01 .sec_title {width:calc(100% - 3.375rem)}
    .class_detail_sec_01 .title_wrap figure {width:3.375rem; height:3.375rem}
}

/* 하단 컨텐츠 부분 */
.class_detail_sec_02 {padding:0 0 6.25rem}
.class_detail_sec_02 .cont_wrap {margin-top:5rem; position:relative}
.class_detail_sec_02 .cont_title {color:#194CB5; font-size:30px; font-weight:600; line-height:140%; margin-bottom:1.5rem}
.class_detail_sec_02 .cont_desc {color:#505050; font-size:1.5rem; font-weight:400; line-height:160%}
.class_detail_sec_02 .cont_list {color:#505050; font-size:1.5rem; font-weight:400; line-height:160%}
.class_detail_sec_02 .cont_list li {display:flex; justify-content:flex-start; align-items:center; gap:1.25rem; line-height:1}
.class_detail_sec_02 .cont_list li:not(:last-child) {margin-bottom:1.5rem}
.class_detail_sec_02 .cont_list h4 {display:inline-block}
.class_detail_sec_02 .cont_target_list {width:100%}
.class_detail_sec_02 .cont_target {background:#F8F8F8; padding:1.25rem 1.75rem; border-radius:3rem; color:#505050; font-size:1.5rem; font-weight:400; line-height:1; display:flex; justify-content:flex-start; align-items:center; gap:1rem}
.class_detail_sec_02 .cont_target:not(:last-child) {margin-bottom:1.25rem}
.class_detail_sec_02 .cont_target::before {content:''; display:inline-block; width:18px; height:18px; border-radius:5px; background:url(../images/study/ico_check.svg) center center /8px auto no-repeat #194CB5}
.class_detail_sec_02 .cont_target:nth-of-type(3n - 1)::before {background:url(../images/study/ico_check.svg) center center /8px auto no-repeat #11A9EB}
.class_detail_sec_02 .cont_target:nth-of-type(3n)::before {background:url(../images/study/ico_check.svg) center center /8px auto no-repeat #4EBB0A}
.class_detail_sec_02 .slide_wrap {width:100%}
.class_detail_sec_02 .swiper-slide {display:flex; align-items:center; width:100%; margin:0 auto; border-radius:20px; border:2px solid #dbe8ff; background-color:#FFF}
.class_detail_sec_02 .swiper-slide a {padding-bottom:100%}
.class_detail_sec_02 .swiper-slide a, .class_detail_sec_02 .swiper-slide img {display:block; width:100%}
.class_detail_sec_02 .swiper-slide .text_wrap {position:absolute; top:0; left:0; width:100%; height:100%; padding:1rem; z-index:2}
.class_detail_sec_02 .swiper-slide .label {background-color:#EAEAEA; color:#626262; border-radius:1.4rem; display:inline-block; padding:.25rem 1rem; margin-bottom:.75rem; color:#777; font-size:.875rem; font-weight:600}
.class_detail_sec_02 .swiper-slide .title {color:#194CB5; font-size:1.375rem; line-height:130%}
.class_detail_sec_02 .swiper-slide .ico {width:4.375rem; height:4.375rem; background-position:center center; background-repeat:no-repeat; background-size:contain; position:absolute; right:1rem; bottom:1rem}
.class_detail_sec_02 .swiper-slide .title::after {content:''; display:block; position:absolute; bottom:1rem; left:1rem; width:30px; height:30px; background:url(../images/study/btn_arrow_02.svg) center center / 14px auto no-repeat #00CBF4; border-radius:100%}
.class_detail_sec_02 .swiper-controls-wrap {display:flex; justify-content:flex-end; align-items:center; width:8rem; position:absolute; top:.8rem; right:0}
.class_detail_sec_02 .swiper-controls-wrap .swiper-button-next, .class_detail_sec_02 .swiper-controls-wrap .swiper-button-prev {position:static; width:1.25rem; height:1.25rem; margin-top:0}
.class_detail_sec_02 .swiper-controls-wrap .swiper-button-prev {background:url(../images/study/main_fd_left.svg) no-repeat center/0.625rem auto}
.class_detail_sec_02 .swiper-controls-wrap .swiper-button-next {background:url(../images/study/main_fd_right.svg) no-repeat center/0.625rem auto}

@media screen and (max-width:767px) {
    .class_detail_sec_02 .swiper-slide a {padding-bottom:0}
    .class_detail_sec_02 .swiper-slide .text_wrap {position:relative; padding:1.35rem}
    .class_detail_sec_02 .swiper-slide .label {font-size:1.1rem; padding:.3rem 1rem; margin-bottom:1rem}
    .class_detail_sec_02 .swiper-slide .title {font-size:1.675rem; display:flex; justify-content:flex-start; align-items:center; gap:6px; line-height:1}
    .class_detail_sec_02 .swiper-slide .title::after {position:unset; display:inline-block; width:16px; height:16px; background-size:8px auto}
    .class_detail_sec_02 .swiper-slide .ico {width:5.38rem; height:5.38rem; bottom:50%; transform:translateY(50%)}
    .class_detail_sec_02 .cont_wrap {margin-top:3.7rem}
    .class_detail_sec_02 .cont_title {font-size:1.54rem; margin-bottom:1.1rem}
    .class_detail_sec_02 .cont_desc, .class_detail_sec_02 .cont_list li, .class_detail_sec_02 .cont_target {font-size:1.38rem}
    .class_detail_sec_02 .swiper-controls-wrap {top:.5rem}
}

/* 플로팅 공유 버튼 */
#floating_btn {position:fixed; bottom:2.5rem; right:calc(50% - 720px); z-index:105; transition:bottom .2s; display:flex; flex-direction:column; gap:1rem; align-items:center; justify-content:space-between}
#floating_btn.active {bottom:22rem}
#floating_btn > a {display:block; width:3.75rem; height:3.75rem; border-radius:100%}
#floating_btn .btn_kakao {background:url(../images/study/ico_kakao.svg) center center /1.875rem auto no-repeat #FEE500}
#floating_btn .btn_url {background:url(../images/study/ico_url.svg) center center /1.875rem no-repeat #D9D9D9}

@media screen and (max-width:1580px) {
    #floating_btn {right:4%}
}
@media screen and (max-width:1024px) {
    #floating_btn.active {bottom:28rem}
}
@media screen and (max-width:767px) {
    #floating_btn.active {bottom:26.5rem}
}
@media screen and (max-width:500px) {
    #floating_btn.active {bottom:29.5rem}
}
/* --------------------------------class_detail_sec end-------------------------------- */



/* --------------------------------quiz_list_sec-------------------------------- */
section[class*='quiz_'] {padding:0}
section[class*='quiz_'] .bg_color {background-color:#F8F8F8; padding:5rem 0 8.56rem}
section[class*='quiz_'] .sec_title {color:#1E2431; font-size:3.5rem; font-weight:700; line-height:1; margin-bottom:3rem; display:flex; justify-content:flex-start; flex-direction:row; align-items:center; gap:1.25rem}
section[class*='quiz_'] .sec_title::before {content:''; display:inline-block; width:4.6875rem; height:4.6875rem}
.quiz_list_sec .sec_title::before {background:url(../images/study/ico_quiz.png) center center / contain no-repeat}
.quiz_detail_sec .sec_title::before {background:url(../images/study/ico_quiz2.png) center center / contain no-repeat}
.quiz_list_sec .list_wrap {width:100%; display:flex; justify-content:space-between; align-items:center; flex-direction:row; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.quiz_list_sec .list_wrap > li {position:relative; width:calc((100% - 1rem)/2); height:17.5rem; border-radius:20px; border:2px solid #EAEAEA; background-color:#FFF}
.quiz_list_sec .list_wrap li a {display:block; width:100%; height:100%; padding:2rem}
.quiz_list_sec .label {background-color:#EAEAEA; border-radius:1.4rem; display:inline-block; padding:.375rem 1.625rem; margin-bottom:.75rem; color:#777; font-size:.875rem; font-weight:600; transition:all .2s ease-in-out}
.quiz_list_sec .title {color:#194CB5; font-size:2rem; line-height:130%; word-break:keep-all; font-weight:700}
.quiz_list_sec .ico {width:8rem; height:8rem; background-position:center center; background-repeat:no-repeat; background-size:contain; position:absolute; right:2rem; bottom:2rem}
.quiz_list_sec .title::after {content:''; display:block; position:absolute; bottom:2rem; left:2rem; width:60px; height:30px; background:url(../images/study/btn_arrow_03.svg) center center / 100% auto no-repeat; border-radius:100%}

@media (hover:hover) {
    .quiz_list_sec .list_wrap li:hover .label {background-color:#000; color:#FFF}
    .quiz_list_sec li:hover .title::after {animation:moveRight 1s infinite ease-in-out}
}

@media screen and (max-width:1000px) {
    .quiz_list_sec .ico {width:6rem; height:6rem}
}
@media screen and (max-width:767px) {
    section[class^='quiz_'] .sec_title {font-size:2.46rem}
    section[class^='quiz_'] .bg_color {padding:7.7rem 0 4.3rem}
    .quiz_list_sec .sec_title {font-size:2.46rem}
    .quiz_list_sec .list_wrap {margin-bottom:2rem; gap:10px}
    .quiz_list_sec .list_wrap li {width:100%; height:unset}
    .quiz_list_sec .list_wrap li a {padding:1.23rem}
    .quiz_list_sec .title {font-size:1.675rem; display:flex; justify-content:flex-start; align-items:center; gap:10px; line-height:130%}
    .quiz_list_sec .title::after {position:unset; display:inline-block; width:30px; height:16px; background:url(../images/study/btn_arrow_03_mo.svg) center center / 100% auto no-repeat}
    .quiz_list_sec .label {font-size:1.1rem; padding:.3rem 1rem; margin-bottom:1.2rem}
    .quiz_list_sec .ico {display:none}
}/* sm */

@media screen and (max-width:355px) {
    .quiz_list_sec .title {font-size:17px}
}/* sm */

@keyframes moveRight {
    0% {transform:translateX(0)}
    50% {transform:translateX(20px)}
    100% {transform:translateX(0)}
}
/* --------------------------------quiz_list_sec end-------------------------------- */




/* --------------------------------quiz_detail_sec-------------------------------- */
.quiz_detail_sec {padding:0}
.quiz_detail_sec .quiz_wrap > li {width:100%; border-radius:20px; border:2px solid #EAEAEA; background-color:#FFF; padding:2.375rem 3.75rem; margin-bottom:1.625rem}
.quiz_detail_sec .que_wrap {display:flex; justify-content:flex-start; align-items:flex-start; gap:10px}
.quiz_detail_sec .que_wrap .que {flex:1; color:#505050; font-size:2.125rem; font-weight:600; line-height:160%; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:max(2); overflow:hidden}
.quiz_detail_sec .que_wrap .num {color:#194CB5; font-size:2.125rem; font-style:normal; font-weight:700; line-height:160%}
.quiz_detail_sec .quiz_wrap .bottom {position:relative; width:100%; height:16.25rem; overflow:hidden; border-radius:20px; margin-top:1.875rem}
.quiz_detail_sec .quiz_wrap .ans_wrap {/*display:flex; justify-content:space-between; align-items:center; */ width:calc(100% - 1px); height:100%; gap:2.5rem; position:absolute; top:0; left:0; z-index:2}
.quiz_detail_sec .quiz_wrap .ans_wrap fieldset {display:flex; justify-content:space-between; align-items:center; width:100%; height:100%; gap:2.5rem}
.quiz_detail_sec .quiz_wrap .ans_wrap label {flex:1; height:100%; border-radius:20px; overflow:hidden}
.quiz_detail_sec .quiz_wrap .ans_wrap input[type="radio"] {width:100%; height:100%; border-radius:0; border:none; appearance:none; transition:all .2s ease-in-out; display:inline-flex; justify-content:center; align-items:center; cursor:pointer}
.quiz_detail_sec .quiz_wrap .btn_correct {background:#F4F8FF}
.quiz_detail_sec .quiz_wrap .btn_incorrect {background:#FFF0F5}
.quiz_detail_sec .quiz_wrap input[type="radio"]::before {content:''; display:inline-block; width:10.375rem; height:10.375rem}
.quiz_detail_sec .quiz_wrap .btn_correct::before {background:url(../images/study/btn_correct.svg) center center / 100% auto no-repeat}
.quiz_detail_sec .quiz_wrap .btn_incorrect::before {background:url(../images/study/btn_incorrect.svg) center center / 100% auto no-repeat}

.quiz_detail_sec .desc_wrap {/*position:absolute; top:0; left:0; */display:none; width:100%; height:100%; background:#F8F8F8; z-index:3; padding:2rem; position:relative; z-index:3}
/* .quiz_detail_sec .desc_wrap.show {display:block}*/
.quiz_detail_sec .desc_wrap h5 {color:#1E2431; line-height:1; font-weight:700; font-size:2rem; margin-bottom:1.5rem}
.quiz_detail_sec .desc_wrap p {color:#505050; font-size:1.5rem; font-weight:400; line-height:175%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical}
.quiz_detail_sec .btn_wrap {display:flex; justify-content:center; gap:3.5rem; align-items:center; flex-direction:column; margin-top:3.375rem}
.quiz_detail_sec .btn_wrap .bot {display:flex; justify-content:center; gap:2rem; align-items:center; flex-direction:row}
.quiz_detail_sec .btn_wrap button,
.quiz_detail_sec .btn_wrap a {text-align:center; font-size:1.5rem; font-weight:500; line-height:100%; padding:1.125rem 0; width:17.5rem; border-radius:300px; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; gap:10px}
.quiz_detail_sec .btn_reset {color:#505050; border:2px solid #505050}
.quiz_detail_sec .btn_study {background:#194CB5; color:#FFF; border:2px solid #194CB5}
.quiz_detail_sec .btn_quiz {background:transparent; color:#194CB5; border:2px solid #194CB5}
.quiz_detail_sec .btn_reset::before {content:''; display:inline-block; width:1.625rem; height:1.625rem; background:url(../images/study/btn_reset.svg) center center /contain no-repeat}
.quiz_detail_sec .btn_study::after {content:''; display:inline-block; width:.9rem; height:1.1rem; background:url(../images/study/btn_arrow.svg) center center /contain no-repeat}
.quiz_detail_sec .btn_quiz::after {content:''; display:inline-block; width:.9rem; height:1.1rem; background:url(../images/study/btn_arrow_blue.svg) center center /contain no-repeat}


@media (hover:hover) {
    .quiz_detail_sec .quiz_wrap .btn_correct:hover {background:#6991E4}
    .quiz_detail_sec .quiz_wrap .btn_incorrect:hover {background:#FF2968}
    .quiz_detail_sec .quiz_wrap .btn_correct:hover::before {background:url(../images/study/btn_correct_checked.svg) center center / 100% auto no-repeat}
    .quiz_detail_sec .quiz_wrap .btn_incorrect:hover::before {background:url(../images/study/btn_incorrect_checked.svg) center center / 100% auto no-repeat}
}
@media screen and (max-width:767px) {
    section[class^='quiz_'] .sec_title {line-height:130%; align-items:flex-start; margin-bottom:2.46rem}
    .quiz_detail_sec .quiz_wrap > li {padding:1.23rem}
    .quiz_detail_sec .quiz_wrap .ans_wrap {gap:1.23rem; height:12rem}
    .quiz_detail_sec .quiz_wrap .bottom {height:auto; min-height:12rem}
    .quiz_detail_sec .quiz_wrap input[type="radio"]::before {padding:5rem 0; width:6rem; height:6rem}
    .quiz_detail_sec .que_wrap .num,
    .quiz_detail_sec .que_wrap .que {font-size:1.38rem}
    .quiz_detail_sec .desc_wrap h4 {font-size:1.85rem}
    .quiz_detail_sec .desc_wrap p {font-size:1.38rem; overflow:visible; text-overflow:unset; display:block; -webkit-line-clamp:unset; -webkit-box-orient:unset}
    .quiz_detail_sec .btn_wrap .bot {gap:10px}
    .quiz_detail_sec .btn_wrap button,
    .quiz_detail_sec .btn_wrap a {font-size:1.23rem; width:12.5rem; padding:0.9rem 0; gap:6px}
    .quiz_detail_sec .btn_reset::before {width:14px; height:14px}
}/* sm */

@media screen and (max-width:500px) {
    .quiz_detail_sec .quiz_wrap .ans_wrap {height:10rem}
    .quiz_detail_sec .quiz_wrap .bottom {min-height:10rem}
}/* sm */
/* --------------------------------quiz_detail_sec end-------------------------------- */


/* --------------------------------pdf print page -------------------------------- */
/* 교육이수증 */
.bg_pdf {background:linear-gradient(180deg,#CDDAF9 0%,#F5F7FB 100%),#FFF}
#pdfDiv {width:100%; max-width:600px; margin:0 auto 10rem}
#pdfDiv .pdf_inner {width:100%; aspect-ratio:600/800; color:#505050; position:relative; backdrop-filter:blur(8px); margin:0 auto; display:flex; justify-content:center; align-items:center; background-image: url(/static/images/study/cert_bg.png); background-size: cover; overflow:visible; background-position: center; background-repeat: no-repeat; max-height:800px}
#pdfDiv .pdf_cont {width:64%; max-width:380px; margin:0 auto; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:24px; text-align:center}
#pdfDiv .logo_img {width:calc(140/600*100%); aspect-ratio:140/168; background-image: url(/static/images/study/logo_pdf.svg); background-repeat: no-repeat; background-position: center; background-size: contain; position:absolute; top:0; right:50%; transform:translate(50%,-28%); z-index:3}
#pdfDiv .title {color:#1A378D; font-size:2.375rem; font-weight:800; line-height:135%; letter-spacing:-.76px; margin:0 auto 2.5rem}
#pdfDiv .info {width:100%; margin-left: auto; margin-right: auto;}
#pdfDiv .info dl {display:flex; justify-content:flex-start; align-items:flex-start; gap:.6875rem; font-size:1.125rem; letter-spacing:-.05em; text-align:left; margin-bottom:6px; color:#505050; line-height:160%}
#pdfDiv .info dt {display:inline-block; width:64px; text-align:justify; color:#1A378D; font-size:1rem; font-weight:700; line-height:135%; letter-spacing:-.32px}
#pdfDiv .info dd {display:inline-block; flex:1; flex-shrink:0; word-break:keep-all; color:#222; font-size:1rem; font-weight:400; line-height:135%; letter-spacing:-.32px}
#pdfDiv .desc p {color:#222; text-align:center; font-size:1.25rem; font-weight:500; line-height:180%; letter-spacing:-.4px}
#pdfDiv .desc .logo {height: 1em; aspect-ratio: 5/1; margin-right:6px}
#pdfDiv .f_color_01 {color:#194CB5; margin-left:5px; font-weight:500}
#pdfDiv .f_color_02 {color:#123274; font-weight:500}
#pdfDiv .desc .date {color:#222; text-align:center; font-size:1rem; font-weight:500; line-height:135%; letter-spacing:-.32px; margin:30px auto 0}
#pdfDiv .desc .agency {color:#222; text-align:center; font-size:1rem; font-weight:700; line-height:135%; letter-spacing:-.32px; margin:30px auto 0}
#pdfDiv .btn_download {width:68%; margin:3.5rem auto}
@media screen and (max-width:1024px) {
    #pdfDiv {width:92%; margin:3.33rem auto 5rem}
    #pdfDiv .pdf_inner {aspect-ratio:328/400; background-image: url(/static/images/study/cert_bg_ta.png);}
    #pdfDiv .pdf_cont {width:75.6%; min-width:280px; max-width:unset;}
    #pdfDiv .logo_img {width:calc(102/328*100%); transform:translate(50%,-33%)}
    #pdfDiv .info dl {gap:1rem}
    #pdfDiv .title {font-size:28px}
    #pdfDiv .info dt,
    #pdfDiv .info dd,
    #pdfDiv .desc p {font-size:14px}
}

@media screen and (max-width:640px) {
    #pdfDiv .pdf_cont {margin-top:5rem;}
    #pdfDiv .desc .date {font-size:15px;}
    #pdfDiv .desc .agency {font-size:16px;}
}

@media screen and (max-width:540px) {
    #pdfDiv .pdf_inner {aspect-ratio:328/525; max-height:700px; background-image: url(/static/images/study/cert_bg_mo.png);}
    #pdfDiv .pdf_cont {margin-top:3rem; padding: 2rem;}
    #pdfDiv .info dt,
    #pdfDiv .info dd,
    #pdfDiv .desc p {font-size:12px}
    #pdfDiv .info dl {gap: .5rem;}
    #pdfDiv .info dt {width: 4em;}
    #pdfDiv .desc .date {font-size:13px; margin-top: 15px}
    #pdfDiv .desc .agency {font-size:15px; margin-top: 15px}
}
/* --------------------------------pdf print page end-------------------------------- */


/* --------------------------------about-------------------------------- */
/* 1090디지털금융교실이란? 비주얼 영역 */
.visual_sec {text-align:center}
.visual_sec .top {padding:0 0 6.25rem}
.visual_sec .flip_wrap {position:relative; display:flex; justify-content:center; align-items:center; background:url(/static/images/study/bg_visual.png) no-repeat center/auto 100%; height:38rem; width:100%}
.visual_sec .flip_group {width:100%; display:flex; gap:1.25rem; align-items:flex-start; flex-direction:column}
.visual_sec .flip_card {position:relative; display:inline-grid; perspective:1000px; width:auto; border:0; background:transparent; padding:0; cursor:pointer; outline-offset:4px; z-index:1}
.visual_sec .flip_card.clicked {z-index:3}
.visual_sec .flip_card_inner {position:relative; display:grid; width:auto; height:100%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.6,.2,1); border-radius:100px; overflow:hidden}
.visual_sec .flip_card:nth-of-type(2) {margin-left:3rem}
.visual_sec .flip_card:nth-of-type(3) {margin-left:-1rem}
.visual_sec .flip_card.clicked::after {content:''; display:block; width:40px; height:40px; background:url(/static/images/study/ico_hand.png) no-repeat center/contain; position:absolute; bottom:0; right:50%; transform:translate(50%, 80%); animation:blink 1s infinite ease-in-out; z-index:10}
.visual_sec .flip_card.done::after {display: none !important;}
.visual_sec .flip_face {display:grid; place-items:center; position:relative; grid-area:1 / 1; transform-origin:center; transition:transform .6s cubic-bezier(.2,.6,.2,1), opacity .2s; backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform; border:1px solid #D5DDEF; width:max-content; padding:0 1.875rem; border-radius:100px; font-size:2rem; font-weight:700; letter-spacing:-0.64px; height:4.25rem; line-height:4.25rem}
.visual_sec .flip_face.front {background:#fff; color:#1A378D; transform:rotateX(0) translateZ(0.1px)}
.visual_sec .flip_face.back {background:#0547E0; color:#fff; opacity:0; transform:rotateX(180deg) translateZ(0.1px)}
.visual_sec .flip_card[aria-pressed="true"] .front {opacity:0; transform:rotateX(180deg)}
.visual_sec .flip_card[aria-pressed="true"] .back {opacity:1; transform:rotateX(0)}
.visual_sec .flip_card {opacity:0}
.visual_sec .on.flip_wrap .flip_card:nth-of-type(1) {animation:scrollFade 0.4s 0.2s forwards ease-in-out}
.visual_sec .on.flip_wrap .flip_card:nth-of-type(2) {animation:scrollFade 0.4s 0.3s forwards ease-in-out}
.visual_sec .on.flip_wrap .flip_card:nth-of-type(3) {animation:scrollFade 0.4s 0.4s forwards ease-in-out}
/*.visual_sec .flip_card {display:inline-block; height:4.25rem; border:0; background:transparent; padding:0; cursor:pointer; outline-offset:4px; perspective:1000px}*/
/*.visual_sec .flip_card:nth-of-type(1) {width:27rem}*/
/*.visual_sec .flip_card:nth-of-type(2) {width:32.875rem; margin-left:3rem}*/
/*.visual_sec .flip_card:nth-of-type(3) {width:27rem}*/
/*.visual_sec .flip_card:focus-visible {box-shadow:0 0 0 3px #0078ff73; border-radius:12px}*/
/*.visual_sec .flip_card_inner {position:relative; width:100%; height:100%; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2, .6, .2,1); border-radius:12px; overflow:hidden; display:block; will-change:transform}*/
/*.visual_sec .flip_card[aria-pressed="true"] .flip_card_inner {transform:rotateX(180deg); -webkit-transform:rotateX(180deg)}*/
/*.visual_sec .flip_face {position:absolute; inset:0; display:grid; place-items:center; padding:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform; font-weight:700; border-radius:100px; user-select:none; font-size:2rem; line-height:4.25rem; letter-spacing:-0.64px; border:1px solid #D5DDEF; transform-origin:center center}*/
/*.visual_sec .flip_face.front {background:#fff; color:#1A378D; transform:rotateX(0) translateZ(0.1px)}*/
/*.visual_sec .flip_face.back {background:#0547E0; color:#fff; transform:rotateX(180deg) translateZ(0.1px); -webkit-transform:rotateX(180deg) translateZ(0.1px)}*/
.visual_sec .decoration_wrap {position:relative; width:19.75rem; height:19.75rem; perspective:1000px; margin-right:3.75rem; transform:translateX(-50%)}
.visual_sec .decoration_img {display:block; position:absolute; inset:0; width:100%; height:auto; transform-origin:center; transition:transform .6s cubic-bezier(.2,.6,.2,1), opacity .2s; backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform}
.visual_sec .deco_default {transform:rotateX(0)}
.visual_sec .deco_flipped {opacity:0; pointer-events:none; transform:rotateX(180deg)}
.visual_sec .flip_wrap.is_all_flipped .deco_default {opacity:0; transform:rotateX(180deg)}
.visual_sec .flip_wrap.is_all_flipped .deco_flipped {opacity:1; transform:rotateX(0)}

@media (prefers-reduced-motion:reduce) {
    .visual_sec .flip_card_inner,
    .visual_sec .decoration_img {transition:none; will-change:transform}
}
.visual_sec .sr_only {position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@media screen and (min-width:1024.1px) {
    .visual_sec .flip_wrap {flex-direction:row-reverse}
    .visual_sec .flip_group {position:absolute; top:50%; right:50%; transform:translate(100%, -50%)}
}/* lg */
@media screen and (max-width:1300px) {
    .visual_sec .flip_wrap {height:30.5rem}
    .visual_sec .flip_face {font-size:1.6rem; height:3.4rem; line-height:3.4rem}
    .visual_sec .decoration_wrap {width:15.8rem; height:15.8rem}
}/* lg */
@media screen and (max-width:1024px) {
    .visual_sec {padding:3.5rem 0 0}
    .visual_sec .flip_wrap {height:313px; flex-direction:column; justify-content:flex-start; padding-top:50px}
    .visual_sec .flip_group {width:100%; max-width:300px; align-items:center}
    .visual_sec .flip_card:nth-of-type(1) {margin-left:-8px; align-self:center}
    .visual_sec .flip_card:nth-of-type(2) {margin-left:0; align-self:flex-end}
    .visual_sec .flip_card:nth-of-type(3) {margin-left:0; align-self:flex-start}
    .visual_sec .flip_face {font-size:1rem; height:2.67rem; line-height:2.67rem}
    .visual_sec .decoration_wrap {width:212px; height:212px; margin-right:0;  position:absolute; bottom:-8rem; right:50%; transform:translateX(50%)}
}/* md */
@media screen and (max-width:767px) {
    .visual_sec .flip_group {width:100%; max-width:252px}
}/* sm */

.visual_sec .mid{padding:3.75rem 7.5rem 6.25rem; border-radius:100px 100px 0 0; background:#1A378D}
.visual_sec .mid .mid_tit{color:#FFF; text-align:center; font-size:2.375rem; font-weight:700; line-height:135%; letter-spacing:-.76px; margin:0 auto 1.5rem}
.visual_sec .mid .mid_tit::before{content:''; display:block; width:68px; height:54px; margin:0 auto 4px; background:url(/static/images/study/ico_hat2.png) no-repeat center/contain}
.visual_sec .mid .mid_desc{display:flex; padding:1rem 1.5rem; flex-direction:row; justify-content:center; align-items:center; gap:8px; color:#FFF; border-radius:100px; border:1px solid #ffffff4d; box-shadow:2px 2px 10px 0 #00409914; font-size:1.75rem; font-weight:400; line-height:135%; letter-spacing:-.56px; width:72%; min-width:fit-content; margin:0 auto 8px}
.visual_sec .mid .mid_desc:nth-of-type(1)::before{content:''; display:block; width:2.375rem; height:2.375rem; background:url(/static/images/study/ico_mid1.png) no-repeat center/contain}
.visual_sec .mid .mid_desc:nth-of-type(2)::before{content:''; display:block; width:2.375rem; height:2.375rem; background:url(/static/images/study/ico_mid2.png) no-repeat center/contain}
.visual_sec .mid .txt_box{border-radius:1.25rem; background:#FFF; text-align:center; margin:2rem auto 0; padding:2.5rem 2.5rem 3rem}
.visual_sec .mid .txt_box p{color:#222; font-size:2rem; font-weight:400; line-height:135%; letter-spacing:-.76px; margin-bottom:1rem; display:flex; justify-content:center; align-items:center}
.visual_sec .mid .bubble{display:inline-block; padding:.375rem 1.25rem; color:#284FA8; font-size:2rem; font-weight:700; line-height:135%; letter-spacing:-.64px; border-radius:100px; background:#0547e01a; position:relative; margin-right:.75rem}
/*.visual_sec .mid .bubble.on {animation: bg_glow_blue 1s cubic-bezier(.22,.61,.36,1) both; will-change: background-color, box-shadow;}*/
.visual_sec .mid .bubble{overflow:hidden}
.visual_sec .mid .bubble::before {content: '';position: absolute;top: 0;left: -100%;width: 25%;height: 100%;background: linear-gradient(120deg,#fff3 0%,#ffffff7d 70%);transform: skewX(-20deg);transition: left 1.2s ease}
.visual_sec .mid .on .bubble::before {left: 125%}
.visual_sec .mid .btn_more {opacity:0}
.visual_sec .mid .on .btn_more {animation:scrollFade 0.4s 1.2s forwards ease-in-out}

.visual_sec .mid .bubble_wrap{position:relative}
.visual_sec .mid .bubble_wrap p{position:relative; display:inline-flex; justify-content:center; align-items:center; gap:.75rem; margin-bottom:0}
.visual_sec .mid .bubble2{color:#FFF; padding:.375rem 1.25rem; font-size:2rem; font-weight:700; line-height:135%; letter-spacing:-.76px; border-radius:100px; background:#00B482; position:relative; display:inline-flex; justify-content:center; align-items:center}
.visual_sec .mid .bubble2::before{content:''; display:inline-block; width:2.25rem; height:1.75rem; background:url(/static/images/study/ico_hat2.png) no-repeat center/contain}
.visual_sec .mid .btn_more {position:absolute; bottom:8px; right:50%; transform:translate(48%,100%); padding:.375rem .75rem; border-radius:4px; background:#CCF0E6; color:#007E5B; font-size:1rem; font-weight:500; line-height:135%; letter-spacing:-.56px; display:flex; justify-content:center; align-items:center; gap:3px; z-index:3}
.visual_sec .mid .btn_more::after {content:''; display:block; width:12px; height:12px; background:url(/static/images/study/ico_more.png) no-repeat center/contain}
@media screen and (min-width:1024.1px) {
    .visual_sec .mid .mid_desc {min-width:max-content}
}/* lg */
@media screen and (max-width:1024px) {
    .visual_sec .mid {padding:3.75rem 0 5rem}
    .visual_sec .mid .mid_tit {font-size:1.67rem}
    .visual_sec .mid .mid_desc {font-size:1.17rem; padding:1.17rem}
    .visual_sec .mid .mid_desc:nth-of-type(1)::before,
    .visual_sec .mid .mid_desc:nth-of-type(2)::before {width:21px; height:18px}
    .visual_sec .mid .txt_box {margin:3.34rem auto 0}
    .visual_sec .mid .txt_box p {font-size:1.34rem; margin-bottom:6px}
    .visual_sec .mid .bubble_wrap p {gap:2px; margin-bottom:0}
    .visual_sec .mid .bubble,
    .visual_sec .mid .bubble2 {font-size:1.17rem}
    .visual_sec .mid .btn_more {font-size:10px; bottom:4px}
    .visual_sec .mid .btn_more::after {width:9px; height:9px}
}/* md */
@media screen and (max-width:767px) {
    .visual_sec .mid .mid_desc {width:100%; font-size:1rem}
    .visual_sec .mid .txt_box {padding:1.5rem 0 2.5rem}
    .visual_sec .mid .txt_box p {font-size:1.17rem}
}/* sm */

.visual_sec .bot {margin-top:12.5rem}
.visual_sec .bot .sub_desc {color:#222; font-size:2rem; font-weight:400; line-height:135%; letter-spacing:-.64px; margin-bottom:.75rem; padding:0}
.visual_sec .bot .sub_desc:first-of-type {margin-bottom:1.25rem}
.visual_sec .f_bold,
.visual_sec b {font-weight:700}
.visual_sec .bot .sub_desc strong {color:#fff; font-weight:700; padding:0.625rem 1rem; border-radius:100px; background:#222; margin-right:.875rem; display:inline-block}
.visual_sec .btn_go_next {width:3.75rem; height:3.75rem; background:url(/static/images/study/btn_next.png) no-repeat center/contain; margin:5.25rem auto 0}

.visual_sec .bot .glow_font {position:relative;overflow:hidden}
.visual_sec .bot .glow_font::before {content: '';position: absolute;top: 0;left: -100%;width:50px;height: 100%;background: linear-gradient(120deg,#fff3 0%,#ffffff7d 70%);transform: skewX(-20deg);transition: left 3s ease}
.visual_sec .bot .on.glow_font::before {left: 125%}

@media screen and (max-width:1024px) {
    .visual_sec .bot {margin-top:5rem}
    .visual_sec .bot .sub_desc {font-size:1.34rem; margin-bottom:4px}
    .visual_sec .bot .sub_desc:first-of-type {margin-bottom:1.67rem}
    .visual_sec .bot .sub_desc strong {margin-right:6px}
    .visual_sec .btn_go_next {margin:3.67rem auto 0}
}/* md */

/* 3단 이미지 + 텍스트 영역*/
.about_sec {scroll-margin-top:14rem; padding-top:22rem}
.about_sec .inner {max-width:940px}
.about_sec .about_list {margin:0 auto 10rem}
.about_sec .list_item {display:flex; justify-content:center; align-items:flex-start; flex-direction:row; gap:2.5rem; position:relative}
.about_sec .text_rg {text-align:right; flex-direction:row-reverse}
.about_sec figure.img {flex:1; width:100%; max-width:33.75rem; aspect-ratio:1080/600; background-position:center; background-size:cover; background-repeat:no-repeat; border-radius:20px; overflow:hidden}
.about_sec .sub_title {color:#1E2431; font-size:3.5rem; font-weight:700; line-height:120%; margin-bottom:2.5rem; word-break:keep-all}
.about_sec .sub_label {display:block; color:#777; font-size:1.5rem; font-weight:600; line-height:150%; margin-bottom:9px}
.about_sec .sub_desc {color:#777; font-size:1.5rem; font-weight:400; line-height:150%; word-break:keep-all}
.about_sec .bubble_wrap {display:inline-flex; flex-direction:column; gap:14px; position:absolute}
.about_sec .list_02,
.about_sec .list_03 {margin-top:12.5rem}
.about_sec .list_01 .bubble_wrap {top:-5.625rem; right:-7.25rem}
.about_sec .list_02 .bubble_wrap {top:-3.75rem; left:-8.125rem}
.about_sec .list_03 .bubble_wrap {top:-6.75rem; right:-11.5625rem}
.about_sec .list_01 .bubble:nth-of-type(2) {margin-left:5.375rem}
.about_sec .list_02 .bubble:nth-of-type(1) {margin-left:8.125rem}
.about_sec .list_03 .bubble:nth-of-type(1) {margin-left:3rem}
.about_sec .bubble {display:inline-block; width:max-content; color:#FFF; font-size:1.25rem; border-radius:100px; font-weight:700; line-height:135%; box-shadow:2px 2px 10px 0 rgba(0, 64, 153, 0.08); padding:0.625rem 1.25rem; text-align:center}
.about_sec .bubble:nth-of-type(1) {background:#00B482}
.about_sec .bubble:nth-of-type(2) {background:#1A378D}
.about_sec .bubble:nth-of-type(2)::after {content:''; display:block; width:11px; height:8px; background:url(/static/images/study/ico_bubble2.png) no-repeat center/contain; position:absolute; bottom:-8px; left:31%}
.about_sec .list_02 .bubble:nth-of-type(2)::after {transform:translateX(50%) scaleX(-1); left:75%}
.about_sec .list_02 .bubble:nth-of-type(3)::after {left:42%}
@media screen and (max-width:1400px) {
    .about_sec .list_01 .bubble_wrap {top:-2rem; right:50%; transform:translate(calc(50% + 10rem), -100%)}
    .about_sec .list_02 .bubble_wrap {top:-2rem; left:50%; transform:translate(calc(-50% - 10rem), -100%)}
    .about_sec .list_03 .bubble_wrap {top:-2rem; right:50%; transform:translate(calc(50% + 10rem), -100%)}
}/* md */
@media screen and (max-width:1024px) {
    .about_sec {scroll-margin-top:24rem; padding-top:20rem}
    .about_sec .about_list {margin:0 auto 5rem}
    .about_sec .list_item {flex-direction:column-reverse; gap:0}
    .about_sec .list_01 .bubble_wrap,
    .about_sec .list_02 .bubble_wrap,
    .about_sec .list_03 .bubble_wrap {top:-2rem; right:unset; transform:translate(0, -100%); left:0; gap:9px}
    .about_sec .bubble {font-size:1rem; padding:10px 20px}
    .about_sec .sub_title {font-size:2.34rem; margin:0}
    .about_sec .sub_label {margin-bottom:4px; font-size:1.34rem}
    .about_sec .sub_desc {font-size:1.34rem; padding:0; margin:8px auto 16px}
    .about_sec .text_rg {text-align:left}
    .about_sec .list_02, .about_sec .list_03 {margin-top:17.34rem}
    .about_sec figure.img {max-width:unset}
    .about_sec .fade {gap:1.8rem}
    /* .about_sec .ani .sub_desc br {display:none}*/
}/* sm~md */

/* 학습 배너 영역 */
.banner_sec .inner {max-width:940px}
.banner_sec .btn_link_class {display:block; width:100%; padding:2.5rem 3.5rem; border-radius:1.875rem; background:#0547E0; color:#FFF; font-size:1.75rem; font-weight:500; line-height:135%; letter-spacing:-0.76px; position:relative}
.banner_sec .btn_link_class::after {content:''; display:block; background-position:center; background-repeat:no-repeat; background-size:contain; position:absolute; top:50%; right:2.5rem; transform:translateY(-50%); width:3.75rem; height:3.75rem}
.banner_sec .btn_link_class:nth-of-type(1)::after {background-image:url("/static/images/study/ico_computer.png")}
.banner_sec .btn_link_class:nth-of-type(2)::after {background-image:url("/static/images/study/ico_book.png")}
.banner_sec .btn_link_class strong {font-size:2.375rem; font-weight:700; display:block; margin-bottom:8px}
.banner_sec .btn_link_class:nth-of-type(2) {background:#4DCBA7; margin-top:1.5rem}
@media screen and (max-width:1024px) {
    .banner_sec .btn_link_class {padding:2.5rem 2rem; font-size:1.34rem}
    .banner_sec .btn_link_class::after {width:3.34rem; height:3.34rem; right:2rem}
    .banner_sec .btn_link_class strong {font-size:1.67rem}
}/* sm~md */
/* --------------------------------about end-------------------------------- */



@keyframes blink {
    0%{opacity:1}
    50%{opacity:0}
    100%{opacity:1}
}