@charset "UTF-8";

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


@font-face {
    font-family: IBMPlexSans;
    src: url(/font/ibmplexsans/IBMPlexSansKR-Light.ttf);
    font-weight: 300;
}
@font-face {
    font-family: IBMPlexSans;
    src: url(/font/ibmplexsans/IBMPlexSansKR-Regular.ttf);
    font-weight: 400;
}
@font-face {
    font-family: IBMPlexSans;
    src: url(/font/ibmplexsans/IBMPlexSansKR-Medium.ttf);
    font-weight: 500;
}
@font-face {
    font-family: IBMPlexSans;
    src: url(/font/ibmplexsans/IBMPlexSansKR-SemiBold.ttf);
    font-weight: 600;
}
@font-face {
    font-family: IBMPlexSans;
    src: url(/font/ibmplexsans/IBMPlexSansKR-Bold.ttf);
    font-weight: 700;
}


/* --------------------------------common-------------------------------- */
body {font-family: 'Rubik', 'IBMPlexSans', sans-serif; color: #333; letter-spacing: -0.05em;}
section .inner {padding: 0;}

@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}
.control_wrap .swiper-button-prev {transform: translate(0);}
@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}


/* font */
.f_jalnan{font-family:'Jalnan', 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; width:100%}
.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-------------------------------- */


/* --------------------------------sub_sec_01-------------------------------- */
.sub_sec_01 {padding-top: 6rem;}
.sub_sec_01 .inner{display:flex; justify-content:space-between; align-items:flex-start;}
.sub_sec_01 .title_wrap{width:calc(660/1120*100%); max-width:660px; display:flex; justify-content:space-between; align-items:flex-start; flex-direction:column; /*height:29rem; max-height:464px*/}
.sub_sec_01 .title_wrap .sub_title{font-size:1.5rem; margin-bottom:1.1rem; line-height:1; font-weight:500}
.sub_sec_01 .title_wrap .title{margin-bottom:1.75rem; font-size:4rem; line-height:1; color:#123274}
.sub_sec_01 .title_wrap .title span{color:#194CB5}
.sub_sec_01 .title_wrap .desc{font-size:1.5rem; line-height:150%}
.sub_sec_01 .inner > .btn_wrap{width:calc(660/1120*100%); max-width:660px; height:13.75rem; max-height:220px; display:flex; justify-content:space-between; gap:1.375rem}
.sub_sec_01 .btn_study,
.sub_sec_01 .btn_quiz{padding:1.5rem; flex:1; color:#FFF; transition:.2s ease-in-out; height:13.875rem; border-radius:20px; font-weight:600; font-size:2.75rem; position:relative}
.sub_sec_01 .btn_study{background:linear-gradient(90deg,#FFF 50%,#00BDE7 0) var(--_p,100%)/200% no-repeat; border:2px solid #00BDE7}
.sub_sec_01 .btn_quiz{background:linear-gradient(90deg,#FFF 50%,#FF9900 0) var(--_p,100%)/200% no-repeat; border:2px solid #FF9900}
.sub_sec_01 .btn_study::after{content:''; display:block; width:5.625rem; height:4.25rem; background:url(../images/study/ico_study.png) center center / 100% auto no-repeat; position:absolute; bottom:1.5rem; right:1.5rem}
.sub_sec_01 .btn_quiz::after{content:''; display:block; width:6.25rem; height:4.6875rem; background:url(../images/study/ico_quiz.png) center center / 100% auto no-repeat; position:absolute; bottom:1.5rem; right:1.5rem}
/* .sub_sec_01 .btn_arrow .arrow{position:absolute; bottom:calc(1.5rem + 8px); left:1.5rem}*/
.sub_sec_01 .btn_arrow .arrow{position:absolute; bottom:calc(1.5rem + 8px); left:1.5rem; display:inline-block; width:26px; height:12px; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease; vertical-align:middle; cursor:pointer}
/* .sub_sec_01 .btn_arrow .arrow::before{content:''; width:40px; height:2px; background-color:#FFF; transform-origin:left; transition:all .2s ease-in-out; display:block}*/
.sub_sec_01 .btn_arrow .arrow::before{content:''; position:absolute; left:0; top:50%; width:100%; border-bottom:2px solid #FFF; transform:translateY(-50%)}
/* .sub_sec_01 .btn_arrow .arrow::after{content:''; display:block; width:15px; height:22px; background:url(/../images/study/btn_arrow.svg) center center /contain no-repeat; position:absolute; bottom:-10px; right:-4px}*/
.sub_sec_01 .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)}

.sub_sec_01 .cont_wrap{background-color:#F8FBFF;  width:calc(400/1120*100%); max-width:400px; height:32rem; max-height:464px; border:2px solid #EAEAEA; border-radius:20px; padding:2.5rem; display:flex; flex-direction:column; justify-content:space-between; align-items:center}
.sub_sec_01 .cont_wrap h3{font-size:1.75rem; margin-bottom:2rem; line-height:1; font-weight:500}
.sub_sec_01 .cont_wrap .desc{text-align:center; font-size:1.125rem; line-height:160%; color:#959595; word-break:keep-all}
.sub_sec_01 .cont_wrap .desc_mo{display:none}
.sub_sec_01 .cont_wrap .ico{width:176px; height:130px; background-position:center; background-repeat:no-repeat; background-size:contain}
.sub_sec_01 .donut-container{width:100%; max-width:200px; margin-bottom:1rem}

.sub_sec_01 .donut{width:100%; padding-bottom:100%; margin:0 auto;
    border-radius:50%; position:relative; text-align:center; transition:background .3s ease-in-out; background:conic-gradient(#00BDE7 0% 72%, #F2F2F2 72% 100%)}
.sub_sec_01 .donut::before{color:#194CB5; width:68%; max-width:136px; background:#F8FBFF; border-radius:50%; position:absolute; left:16%; top:16%; display:block; content:attr(data-percent)'%'; transform:skew(-0.03deg); margin:auto; font-size:3rem; padding:calc(34% - 1.78rem) 0; font-weight:600}

.sub_sec_01 .donut-info{color:#194CB5; font-size:1.5rem; margin-bottom:1rem; line-height:1; font-weight:600; display:flex; justify-content:space-between; width:100%; max-width:234px}
.sub_sec_01 .donut-info span.number{color:#000; font-weight:500}
.sub_sec_01 .donut-info span.unit{color:#000; font-weight:500}
.sub_sec_01 .cont_wrap .btn_wrap{width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-direction:column}
.sub_sec_01 .cont_wrap .btn_wrap .btn_issue.active{background-color:#194CB5; color:#FFF}


@media (hover:hover){
    .sub_sec_01 .btn_arrow:hover{--_p:0%; color:#1E2431; border:2px solid #DDD}
    .sub_sec_01 .btn_arrow:hover .arrow{width:100px}
    .sub_sec_01 .btn_arrow:hover .arrow::before,
    .sub_sec_01 .btn_arrow:hover .arrow::after{border-color:#505050}
    /* .sub_sec_01 .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 */

@media screen and (max-width:1100px){
    .sub_sec_01 .cont_wrap{padding:2rem 1.8rem}
    .sub_sec_01 .title_wrap .title{font-size:3.3rem}
    .sub_sec_01 .cont_wrap .desc .brt{display:none}
}
@media screen and (min-width:768px){
    .sub_sec_01 .inner > .btn_wrap{position:absolute; bottom:2px; left:0}
}/* lg */
@media screen and (max-width:767px){
    .sub_sec_01{padding:8rem 0 0}
    .sub_sec_01 .inner{flex-direction:column; gap:1.85rem}
    .sub_sec_01 .title_wrap .desc{display:none}
    .sub_sec_01 .title_wrap .title{margin-bottom:1rem; font-size:2.7rem}
    .sub_sec_01 .title_wrap .sub_title{margin-bottom:1.3rem}

    .sub_sec_01 .title_wrap,
    .sub_sec_01 .cont_wrap{width:100%; max-width:unset; height:unset; max-height:unset}
    .sub_sec_01 .cont_wrap{padding:3.6rem 1.8rem 1.8rem}
    .sub_sec_01 .inner > .btn_wrap{flex-direction:column; width:100%; max-width:unset; height:unset; max-height:unset}

    .sub_sec_01 .cont_wrap h3{font-size:1.85rem; margin-bottom:1.35rem}
    .sub_sec_01 .cont_wrap .ico{display:none}
    .sub_sec_01 .cont_wrap .desc{font-size:1.85rem; margin-bottom:5rem}
    .sub_sec_01 .cont_wrap .desc_pc{display:none}
    .sub_sec_01 .cont_wrap .desc_mo{display:block}
    .sub_sec_01 .donut-container{max-width:160px; margin-bottom:1.35rem}
    .sub_sec_01 .donut-info{font-size:1.85rem; margin-bottom:1.65rem}
    .sub_sec_01 .btn_study,
    .sub_sec_01 .btn_quiz{height:unset; padding:1.8rem 1.8rem 5rem 1.8rem; border-radius:1.4rem; line-height:1}
    .sub_sec_01 .btn_study::after,
    .sub_sec_01 .btn_quiz::after{bottom:50%; transform:translateY(50%)}
    .sub_sec_01 .btn_arrow .arrow{left:1.8rem; bottom:calc(1.8rem + 8px)}
    /* .sub_sec_01 .btn_arrow:hover .arrow{width:100px}*/
}/* sm */
@media screen and (max-width:500px){

}
/* --------------------------------sub_sec_01 end-------------------------------- */

/* --------------------------------sub_sec_02-------------------------------- */
.sub_sec_02{padding:4.375rem 0 0}
.sub_sec_02 .title_wrap{width:20%; position:absolute; top:0; left:0}
.sub_sec_02 .title_wrap .title{font-size:2rem; font-weight:600}
.sub_sec_02 .slide_wrap{width:80%; margin-left:20%}
.sub_sec_02 .swiper-slide{display:flex; align-items:center; width:100%; margin:0 auto; border-radius:20px; border:2px solid #dbe8ff; background-color:#FFF}
.sub_sec_02 .swiper-slide a{padding-bottom:100%}
.sub_sec_02 .swiper-slide a,.sub_sec_02 .swiper-slide img{display:block; width:100%}
.sub_sec_02 .swiper-slide .text_wrap{position:absolute; top:0; left:0; width:100%; height:100%; padding:1rem; z-index:2}
.sub_sec_02 .swiper-slide .label{background-color:#EAEAEA; border-radius:1.4rem; display:inline-block; padding:.25rem 1rem; margin-bottom:.75rem; color:#777; font-size:.875rem; font-weight:600}
.sub_sec_02 .swiper-slide .title{color:#194CB5; font-size:1.375rem; line-height:130%; font-weight: 800;}
.sub_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}
.sub_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%}
.sub_sec_02 .control_wrap{display:flex; justify-content:flex-start; align-items:center; width:8rem; position:absolute; bottom:0; left:0}
.sub_sec_02 .control_wrap .swiper-button-next,.sub_sec_02 .control_wrap .swiper-button-prev{position:static; width:1.25rem; height:1.25rem; margin-top:0}
.sub_sec_02 .control_wrap .swiper-button-prev{background:url(../images/study/main_fd_left.svg) no-repeat center/0.625rem auto}
.sub_sec_02 .control_wrap .swiper-button-next{background:url(../images/study/main_fd_right.svg) no-repeat center/0.625rem auto}
.main-edu-autoplay-control-wrap button{display:block; width:1.25rem; height:1.25rem; margin:0 .5rem; border:0; background:transparent; cursor:pointer}
.main-edu-autoplay-control-wrap button:before{content:''; display:block; width:1.25rem; height:1.25rem}
.main-edu-autoplay-control-wrap button[aria-pressed="false"]:before{background:url(../images/study/main_fd_stop.svg) no-repeat center/0.55rem auto}
.main-edu-autoplay-control-wrap button[aria-pressed="true"]:before{background:url(../images/study/main_fd_play.svg) no-repeat center/0.75rem auto}
@media screen and (max-width:1024px){
    .sub_sec_02 .title_wrap .title{font-size:1.8rem}
}
@media screen and (max-width:900px){
    .sub_sec_02 .title_wrap .title{font-size:1.6rem}
}
@media screen and (max-width:767px){
    .sub_sec_02 .title_wrap{position:unset; width:100%}
    .sub_sec_02 .title_wrap .title{margin-bottom:1.5rem}
    .sub_sec_02 .slide_wrap{margin-left:0; width:100%}
    /* .sub_sec_02 .swiper-wrapper{flex-direction:column; gap:16px}*/

    /* .sub_sec_02 .swiper-slide{height:100px !important}*/

    .sub_sec_02 .swiper-slide a{padding-bottom:0}
    .sub_sec_02 .swiper-slide .text_wrap{position:relative; padding:1.35rem}
    .sub_sec_02 .swiper-slide .label{font-size:1.1rem; padding:.3rem 1rem; margin-bottom:1rem}
    .sub_sec_02 .swiper-slide .title{font-size:1.675rem; display:flex; justify-content:flex-start; align-items:center; gap:6px; line-height:1}
    .sub_sec_02 .swiper-slide .title::after{position:unset; display:inline-block; width:16px; height:16px; background-size:8px auto}
    .sub_sec_02 .swiper-slide .ico{width:5.38rem; height:5.38rem; bottom:50%; transform:translateY(50%)}
    /* .sub_sec_02 .control_wrap{display:none}*/
    .sub_sec_02 .control_wrap{bottom:unset; left:unset; top:0.6rem; right:0; width:unset}
}/* sm */
/* --------------------------------sub_sec_02 end-------------------------------- */

/* --------------------------------sub_sec_03-------------------------------- */
.sub_sec_03{padding:4.75rem 0 4.375rem; margin-bottom:4.25rem}
.sub_sec_03 .slide_wrap{position:relative; border-radius:1.875rem; box-shadow:0px 0px 14px 0px rgba(150, 150, 150, 0.30); background-color:#FFF}
.sub_sec_03 .title{position:absolute; left:0; top:50%; width:8rem; height:3.375rem; background-color:#194CB5; color:#FFF; text-align:center; line-height:3.375rem; transform:translateY(-50%); font-size:1.125rem; border-radius:1.875rem; font-weight: 700;}
.sub_sec_03 .control_wrap{position:absolute; right:0; top:50%; transform:translateY(-50%)}
.sub_sec_03 .swiper-container{width:calc(100% - 8rem - 8rem); margin:0 auto}
.sub_sec_03 .swiper-slide figure{display:flex; align-items:center; width:56%; height:3.375rem; margin:0 auto}
.sub_sec_03 .swiper-slide a,
.sub_sec_03 .swiper-slide img{display:block; width:100%}
.sub_sec_03 .control_wrap{display:flex; justify-content:center; align-items:center; width:8rem}
.sub_sec_03 .control_wrap .swiper-button-next,
.sub_sec_03 .control_wrap .swiper-button-prev{position:static; width:1.25rem; height:1.25rem; margin-top:0}
.sub_sec_03 .control_wrap .swiper-button-prev{background:url(../images/study/main_fd_left.svg) no-repeat center/0.625rem auto}
.sub_sec_03 .control_wrap .swiper-button-next{background:url(../images/study/main_fd_right.svg) no-repeat center/0.625rem auto}
.main-bank-autoplay-control-wrap button{display:block; width:1.25rem; height:1.25rem; margin:0 0.5rem; border:0; background:transparent; cursor:pointer}
.main-bank-autoplay-control-wrap button:before{content:''; display:block; width:1.25rem; height:1.25rem}
.main-bank-autoplay-control-wrap button[aria-pressed="false"]:before{background:url(../images/study/main_fd_stop.svg) no-repeat center/0.55rem auto}
.main-bank-autoplay-control-wrap button[aria-pressed="true"]:before{background:url(../images/study/main_fd_play.svg) no-repeat center/0.75rem auto}

@media screen and (max-width:1200px){
    .sub_sec_03 .title{height:3.75rem; line-height:3.75rem}
    .sub_sec_03 .swiper-slide figure{width:50%; height:3.75rem}
}/* lg */

@media screen and (max-width:767px){
}
@media screen and (max-width:500px){
    .sub_sec_03{padding:4rem 0 2rem 0}
    .sub_sec_03 .inner{width:100%}
    .sub_sec_03 .slide_wrap{box-shadow:none; background-color:transparent}
    .sub_sec_03 .title{position:static; width:9rem; height:3.25rem; margin:0 auto 1.5rem; line-height:3.25rem; transform:translateX(0)}
    .sub_sec_03 .control_wrap{top:1rem; transform:translateY(0)}
    .sub_sec_03 .swiper-container{width:100%}
    .sub_sec_03 .swiper-slide figure{width:60%}
    .sub_sec_03 .swiper-slide figure{width:100%; max-width:70px}
}/* sm */
/* --------------------------------sub_sec_03 end-------------------------------- */



/* --------------------------------about_sec_01 -------------------------------- */
.about_sec_01{padding: 5rem 0 0}
.about_sec_01 .title{font-size:3.75rem; color:#123274; font-weight:400; text-align:center}
.about_sec_01 .title .color{color:#194CB5}
.about_sec_01 .title .size{color:#1E2431; font-size:2.8rem; font-family:'IBMPlexSans', sans-serif; font-weight:700}
.about_sec_01 .desc{text-align:center; font-size:2.25rem; font-weight:500; color:#1E2431; line-height:166.667%; opacity:0; transform:translate(0, 10px)}
.about_sec_01 .desc.ani{animation:fadeUp .4s forwards ease-in-out; animation-delay:1.6s}
.about_sec_01 .desc .color{color:#194CB5; font-weight:700}
.about_sec_01 .cont_wrap{width:100%; position:relative; margin:2.375rem auto 3.5rem; padding-bottom:4.375rem}
.about_sec_01 .bg_img{text-align:center}
.about_sec_01 .bg_img figure{width:31rem; height:31rem; max-width:495px; max-height:495px; background-position:center; background-size:100% auto; background-repeat:no-repeat; margin:0 auto}
.about_sec_01 .text{opacity:0; transform:translate(0, 10px)}
.about_sec_01 .text.ani{animation:fadeUp .4s forwards ease-in-out}
.about_sec_01 .text_01.ani{animation-delay:0s}
.about_sec_01 .text_02.ani{animation-delay:0.2s}
.about_sec_01 .text_03.ani{animation-delay:0.5s}
.about_sec_01 .text_04.ani{animation-delay:0.8s}
.about_sec_01 .text_05.ani{animation-delay:1.1s}
.about_sec_01 .text p{display:inline-block; padding:1.5rem 2.5rem; color:#FFF; font-size:1.75rem; font-weight:500; line-height:1; text-align:center; border-radius:2rem}
.about_sec_01 .text_01 p{background:#003196}
.about_sec_01 .text_02 p{background:#194CB5}
.about_sec_01 .text_03 p{background:#4EBB0A}
.about_sec_01 .text_04 p{background:#11A9EB}
.about_sec_01 .text_05 p{background:#00C3B7}
.about_sec_01 .text figure{background-position:center; background-size:contain; background-repeat:no-repeat}
.about_sec_01 .text .ico_01{width:8.125rem; height:8.125rem; background-image:url(../images/study/about_ico_01.png)}
.about_sec_01 .text .ico_02{width:8.125rem; height:8.125rem; background-image:url(../images/study/about_ico_02.png)}
.about_sec_01 .text .ico_03{width:12.5rem; height:9.375rem; background-image:url(../images/study/about_ico_03.png)}
.about_sec_01 .text .ico_04{width:11.25rem; height:13.75rem; background-image:url(../images/study/about_ico_04.png)}
.about_sec_01 .btn_go_next{width:5rem; height:5rem; background:url(../images/study/btn_arrow_02.svg) center center /22px auto no-repeat #194CB5; display:block; border-radius:100%; transform:rotate(90deg); margin:3.75rem auto 0; cursor:pointer}
.about_sec_01 .btn_go_next.ani{animation:moveDown .8s infinite ease-in-out}

@media screen and (min-width:768px){
    .about_sec_01 .text{position:absolute; z-index:2}
    .about_sec_01 .text_01{top:calc(216/495*100%); right:0}
    .about_sec_01 .text_02{top:calc(175/495*100%); left:0}
    .about_sec_01 .text_03{top:calc(290/495*100%); left:0}
    .about_sec_01 .text_04{top:calc(330/495*100%); right:0}
    .about_sec_01 .text_05{bottom:0; right:calc((100% - 30.5rem)/2)}
    .about_sec_01 .text figure{position:absolute; z-index:3}
    .about_sec_01 .text .ico_01{top:-10.375rem; left:2.625rem}
    .about_sec_01 .text .ico_02{top:-9.125rem; right:2.625rem}
    .about_sec_01 .text .ico_03{bottom:-8.875rem; left:4.625rem}
    .about_sec_01 .text .ico_04{bottom:-10.625rem; right:5.25rem}
}/* lg */

@media screen and (max-width:1000px){
    .about_sec_01 .cont_wrap{padding-bottom:3rem}
    .about_sec_01 .text p{font-size:1.4rem}
    .about_sec_01 .text_04{z-index:3}
    .about_sec_01 .text_05{right:calc((100% - 25.5rem)/2)}
    .about_sec_01 .text .ico_04{right:3.2rem}
}/* md */
@media screen and (max-width:767px){
    .about_sec_01 .title{font-size:2.3rem; display:flex; justify-content:center; align-items:center}
    .about_sec_01 .title .size{font-size:1.4rem; margin-left:4px}
    .about_sec_01 .cont_wrap{padding-bottom:0}
    .about_sec_01 .bg_img{display:none}
    .about_sec_01 .desc{font-size:2rem}
    .about_sec_01 .text{display:flex; justify-content:center; align-items:center; gap:1rem; flex-direction:row; margin-bottom:2rem}
    .about_sec_01 .text_02,.about_sec_01 .text_04{flex-direction:row-reverse}
    .about_sec_01 .text p{font-size:1.3rem; padding:1.5rem 1.35rem}
    .about_sec_01 .text figure{display:inline-block}
    .about_sec_01 .btn_go_next{width:3.8rem; height:3.8rem; background-size:18px auto; margin:2rem auto 0}
    .about_sec_01 .text_05.ani{animation:fadeUp .4s forwards ease-in-out; animation-delay:1.3s}
    .about_sec_01 .text .ico_01{width:4rem; height:4rem}
    .about_sec_01 .text .ico_02{width:4rem; height:4rem}
    .about_sec_01 .text .ico_03{width:4rem; height:5rem}
    .about_sec_01 .text .ico_04{width:5rem; height:5rem}
}/* sm */
@media screen and (max-width:400px){
    .about_sec_01 .text{gap:6px}
}

@keyframes fadeUp{
    0%{transform:translate(0, 10px); opacity:0}
    100%{transform:translate(0, 0); opacity:1}
}
@keyframes fadeUpCenter{
    0%{transform:translate(50%, 10px); opacity:0}
    100%{transform:translate(50%, 0); opacity:1}
}
@keyframes moveDown{
    0%{transform:rotate(90deg) translateX(0)}
    50%{transform:rotate(90deg) translateX(10px)}
    100%{transform:rotate(90deg) translateX(0)}
}
/* --------------------------------about_sec_01 end-------------------------------- */



/* --------------------------------about_sec_02 -------------------------------- */
.about_sec_02{padding:10.125rem 0 0}
.about_sec_02 .fade{display:flex; justify-content:center; align-items:flex-start; flex-direction:row; gap:2.5rem; margin-bottom:4rem}
.about_sec_02 .fade .sub_title,
.about_sec_02 .fade .sub_desc{opacity:0; transform:translate(0, 10px)}
.about_sec_02 .fade.ani .sub_title,
.about_sec_02 .fade.ani .sub_desc{animation:fadeUp .4s forwards ease-in-out}
.about_sec_02 .list_01.ani .sub_title{animation-delay:0s}
.about_sec_02 .list_01.ani .sub_desc{animation-delay:0.2s}
.about_sec_02 .list_02.ani .sub_title{animation-delay:0.6s}
.about_sec_02 .list_02.ani .sub_desc{animation-delay:0.8s}
.about_sec_02 .list_03.ani .sub_title{animation-delay:1.2s}
.about_sec_02 .list_03.ani .sub_desc{animation-delay:1.4s}
.about_sec_02 .fade.text_rg{text-align:right; flex-direction:row-reverse}
.about_sec_02 figure.img{width:33.75rem; height:18.75rem; background-position:center; background-size:cover; background-repeat:no-repeat; border-radius:20px; overflow:hidden}

.about_sec_02 .sub_title{color:#1E2431; font-size:3.5rem; font-weight:700; line-height:120%; margin-bottom:2.5rem; word-break:keep-all}
.about_sec_02 .sub_label{display:block; color:#1E2431; font-size:1.5rem; font-weight:500; line-height:150%; margin-bottom:9px}
.about_sec_02 .sub_desc{color:#1E2431; font-size:1.5rem; font-weight:400; line-height:150%; word-break:keep-all}

@media screen and (max-width:1000px){
    .about_sec_02 .sub_title{font-size:2.8rem}
    .about_sec_02 .sub_label,
    .about_sec_02 .sub_desc{font-size:1.3rem}
    .about_sec_02 .fade{gap:1.8rem}
    .about_sec_02 figure.img{width:28rem; height:16rem}
    /* .about_sec_02 .ani .sub_desc br{display:none}*/
}/* md */

@media screen and (max-width:767px){
    .about_sec_02 .fade{flex-direction:column-reverse}
    .about_sec_02 .fade.text_rg{flex-direction:column-reverse; text-align:left}
    .about_sec_02 figure.img{width:100%; height:0; padding-bottom:56%; border-radius:1.5rem}
    .about_sec_02 .sub_title{font-size:2.8rem}
    .about_sec_02 .sub_label,
    .about_sec_02 .sub_desc{font-size:1.3rem}
}/* sm */
/* --------------------------------about_sec_02 end-------------------------------- */



/* --------------------------------about_sec_03 -------------------------------- */
.about_sec_03{padding:1rem 0 3.375rem}
.about_sec_03 .btn_wrap{display:flex; flex-direction:column; gap:2.5rem}
.about_sec_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_sec_03 .btn_study{background:linear-gradient(90deg,#FFF 50%,#00BDE7 0) var(--_p,100%)/200% no-repeat; border:2px solid #00BDE7}
.about_sec_03 .btn_quiz{background:linear-gradient(90deg,#FFF 50%,#FF9900 0) var(--_p,100%)/200% no-repeat; border:2px solid #FF9900}
.about_sec_03 .btn_program{background:linear-gradient(90deg,#FFF 50%,#B062EC 0) var(--_p,100%)/200% no-repeat; border:2px solid #B062EC}
.about_sec_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_sec_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_sec_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_sec_03 .btn_arrow .desc{font-size:1rem; display:block; font-size:1.625rem; color:#FFF; font-weight:400; margin-top:2.5rem}
.about_sec_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_sec_03 .btn_arrow .arrow::before{content:''; position:absolute; left:0; top:50%; width:100%; border-bottom:2px solid #FFF; transform:translateY(-50%)}
.about_sec_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:767px){
    /* .about_sec_03 .btn_arrow .arrow{left:1.8rem; bottom:calc(1.8rem + 8px)}*/
    .about_sec_03 .btn_arrow{padding:1.85rem; font-size:2.5rem; border-radius:1.5rem}
    .about_sec_03 .btn_arrow .arrow{display:none}
    .about_sec_03 .btn_arrow .desc{margin:1rem 0 5rem; font-size:1.3rem}
    .about_sec_03 .btn_study::after{width:6rem; height:5rem; bottom:1.85rem; transform:translateY(0); right:1.85rem; background-size:contain}
    .about_sec_03 .btn_quiz::after{width:6.5rem; height:5.5rem; bottom:1.85rem; transform:translateY(0); right:1.85rem; background-size:contain}
    .about_sec_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_sec_03 .btn_arrow:hover{--_p:0%; color:#1E2431; border:2px solid #EAEAEA}
    .about_sec_03 .btn_arrow:hover .arrow{width:100px}
    .about_sec_03 .btn_arrow:hover .arrow::before,
    .about_sec_03 .btn_arrow:hover .arrow::after{border-color:#505050}
    .about_sec_03 .btn_arrow:hover .desc{color:#505050}
    /* .about_sec_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_sec_03 end-------------------------------- */



/* --------------------------------class_list_sec-------------------------------- */
.class_list_sec{padding:11.25rem 0 0}
.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}
.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)}
.class_list_sec .title_wrap .desc{color:#505050; font-size:1.5rem; font-weight:400; line-height:175%}
.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: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}
.class_list_sec .class_cate li .class_title{display:inline-flex;justify-content:flex-start;align-items:center;flex-shrink:1;color:#505050; font-size:1.875rem; font-weight:400; line-height:160%; letter-spacing: -0.7px}
.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}

@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 .class_cate li .cate_name,
    .class_list_sec .class_cate li .class_title{font-size:1.5rem}
}

@media screen and (max-width:767px){
    .class_list_sec{padding:7.7rem 0 0}
    .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; line-height:1; margin-bottom:3rem; width:calc(100% - 14rem); line-height:160%; position:relative}
.class_detail_sec_01 .sec_title .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{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 .control_wrap{display:flex; justify-content:flex-end; align-items:center; width:8rem; position:absolute; top:.8rem; right:0}
.class_detail_sec_02 .control_wrap .swiper-button-next,.class_detail_sec_02 .control_wrap .swiper-button-prev{position:static; width:1.25rem; height:1.25rem; margin-top:0}
.class_detail_sec_02 .control_wrap .swiper-button-prev{background:url(../images/study/main_fd_left.svg) no-repeat center/0.625rem auto}
.class_detail_sec_02 .control_wrap .swiper-button-next{background:url(../images/study/main_fd_right.svg) no-repeat center/0.625rem auto}
.main-edu-autoplay-control-wrap button{display:block; width:1.25rem; height:1.25rem; margin:0 .5rem; border:0; background:transparent; cursor:pointer}
.main-edu-autoplay-control-wrap button:before{content:''; display:block; width:1.25rem; height:1.25rem}
.main-edu-autoplay-control-wrap button[aria-pressed="false"]:before{background:url(../images/study/main_fd_stop.svg) no-repeat center/0.55rem auto}
.main-edu-autoplay-control-wrap button[aria-pressed="true"]:before{background:url(../images/study/main_fd_play.svg) no-repeat center/0.75rem 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 .control_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:11.25rem 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:3.5rem; height:3.5rem; background:url(../images/study/ico_quiz_s.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{color:#505050; font-size:2.125rem; font-weight:600; line-height:160%}
.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 > *{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 h4{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 -------------------------------- */
/* 교육이수증 */
#pdfDiv{margin:1px auto;width:100%;max-width:700px;;color:#505050;position: relative;}
#pdfDiv .pdf_inner{width:100%;height:100%;padding:80px 0 130px;display:flex;justify-content:center;align-items:center;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;}
#pdfDiv .bg_img{width:100%;position: relative;z-index:1;}
#pdfDiv .top{text-align:center;margin-bottom:3.4rem}
#pdfDiv .mid{text-align:center;margin-bottom:2.5rem;width:100%;max-width:430px;}
#pdfDiv .btm{text-align:center;}

/* 교육이수증 상단 */
#pdfDiv .logo_img{width:7.5rem;height:7.5rem;margin-bottom:1.875rem;}
#pdfDiv .title{font-size:4rem;line-height:100%;color:#123274;letter-spacing:1.25rem;font-family:'IBMPlexSans', sans-serif;}

/* 교육이수증 중간 */
#pdfDiv .info{width:100%;}
#pdfDiv .info dl{display:flex;justify-content:flex-start;align-items: flex-start;;gap:2rem;font-size:1.125rem;line-height:100%;letter-spacing:-0.05em;text-align:left;margin-bottom:1rem;color:#505050;line-height:160%;}
#pdfDiv .info dt{display:inline-block;width:4rem;text-align: justify;font-weight:600;}
#pdfDiv .info dd{display:inline-block;flex:1;flex-shrink:0;}

/* 교육이수증 하단 */
#pdfDiv .desc{color:#505050;text-align:center;;font-size:1.375rem;font-weight:600;line-height:190%;margin-bottom:2rem;letter-spacing:-0.075em}
#pdfDiv .desc .logo{width:99px;height:20px;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 .date{font-size:1.25rem;line-height:140%;font-weight:600;margin-bottom:3.4rem;}
#pdfDiv .agency{font-size:2rem;line-height:100%;font-weight:600;}


@media screen and (max-width:767px) {
    #pdfDiv{min-width:600px;max-width:600px}
}

@media screen and (max-width:700px) {
    #pdfDiv .bg_img{height:unset;}
    #pdfDiv .pdf_inner{height:unset;padding:4.5rem 7.5rem 6rem;}
    /* #pdfDiv .top{margin-bottom:3.2rem}
    #pdfDiv .mid{margin-bottom:2.8rem}
    #pdfDiv .date{margin-bottom:3rem;} */
    /* #pdfDiv .title{font-size:3rem} */
    #pdfDiv .desc{font-size:1.375rem}
}


@media screen and (max-width:500px) {
    #pdfDiv{min-width:400px;max-width:400px}
    #pdfDiv .pdf_inner{height:unset;padding:2.5rem 4rem 4rem;}
    #pdfDiv .top{margin-bottom:2rem}
    #pdfDiv .mid{margin-bottom:1.6rem;max-width: 280px;}
    #pdfDiv .title{font-size:2.8rem}
    #pdfDiv .info dl{gap:1rem;}
    #pdfDiv .info dl,
    #pdfDiv .desc{font-size:1.1rem}
    #pdfDiv .date{font-size:1.2rem;margin-bottom:1rem;}
    #pdfDiv .logo_img{width:5rem;height:5rem;margin-bottom:1.3rem}
    #pdfDiv .agency{font-size:1.5rem}
}
/* --------------------------------pdf print page end-------------------------------- */