@charset "utf-8";

#main{font-family:'Pretendard';}
.inr{position:relative; max-width:1300px; height:100%; margin:0 auto;}
#main .hero{position:relative; width:100%; height:688px; background:url(/resource/image/moe/bg_visual.jpg) no-repeat 50%; background-size:cover;}
#main .hero .inr:before{content:''; display:block; position:absolute; bottom:0; right:130px; width:479px; height:626px; background:url(/resource/image/moe/bg_visual_img.png) no-repeat; background-size:cover; transition:width 0.4s ease, height 0.4s ease, right 0.4s ease; will-change:width, height, right;}
#main .hero .txt{position:relative; padding-top:240px; padding-left:40px; z-index:10; transition:padding-top 0.4s ease, padding-left 0.4s ease;}
#main .hero .txt h1{color:#fff; font-size:60px; font-weight:700; transition:font-size 0.4s ease; animation:slideUpFade 0.8s ease-out 0s 1 forwards; opacity:0;}
#main .hero .txt h1 span{color:#86f3fb;}
#main .hero .txt p{margin-top:30px; color:#fff; font-size:17px; font-weight:300; letter-spacing:-0.1px; line-height:1.5; word-break:keep-all; transition:margin-top 0.4s ease, font-size 0.4s ease; animation:slideUpFade 0.8s ease-out 0.3s 1 forwards; opacity:0;}
#main section .tit{text-align:center;}
#main section .tit > p{color:#104fbf; font-size:16px; font-weight:500; letter-spacing:-0.1px;}
#main section .tit h2{margin-top:15px; color:#222; font-size:50px; font-weight:700;}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width:1400px) {
    .inr{max-width:100%; padding:0 40px; box-sizing:border-box;}
}
@media screen and (max-width:1300px) {
    #main .hero .txt h1{font-size:55px;}
    #main section .tit h2{font-size:45px;}
    #main .hero .inr:before{width:429px; height:576px;}
}
@media screen and (max-width:1200px) {
    .inr{padding:0 30px;}
    #main .hero{height:628px;}
    #main .hero .txt{padding-left:0;}
    #main .hero .txt h1{font-size:50px;}
    #main section .tit h2{margin-top:10px; font-size:40px;}
    #main .hero .inr:before{right:100px;}
}
@media screen and (max-width:1024px) {
    #main .hero{height:548px;}
    #main .hero .txt{padding-top:180px; max-width: 65%;}
    #main .hero .txt h1{font-size:45px;}
    #main .hero .txt p{margin-top:20px; font-size:16px;}
    #main .hero .inr:before{right:70px; width:355px; height:496px;}
}
@media screen and (max-width:900px) {
    #main .hero{height:478px;}
    #main .hero .txt{max-width: 70%;}
    #main .hero .txt h1{font-size:42px;}
    #main .hero .inr:before{right:30px; width:305px; height:426px;}
}
@media screen and (max-width:800px) {
	section.main{padding-top:0; background:none;}
}
@media screen and (max-width:768px) {
    #main .hero .txt h1{font-size:40px;}
    #main .hero .txt p{margin-top:15px; font-size:15px;}
    .inr{padding:0 20px;}
    #main .hero .inr:before{width:255px; height:356px;}
    #main .hero .txt{max-width:100%; text-shadow:0 2px 10px rgba(0,0,0,0.3);}
}
@media screen and (max-width:680px) {
    #main .hero{height: 600px;}
    #main .hero .inr:before{right:auto; left:50%; width:205px; height:282px; transform:translateX(-50%);}
    #main .hero .txt{padding-top:130px; text-align:center;}
    #main .hero .txt h1{font-size:35px;}
}
@media screen and (max-width:500px) {
    .inr{padding:0 15px;}
    #main .hero .txt h1{font-size:32px;}
    #main .hero{height:560px;}
}
@media screen and (max-width:440px) {
    #main .hero .txt p br{display:none;}
}

/*검색창*/
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; white-space:nowrap;}
.search-box{position:absolute; right:0; bottom:-85px; width:680px; padding:40px 50px; border-radius:30px; background:#104fbf; box-sizing:border-box; z-index:1;}
.search-box h2{color:#fff; font-size:24px; font-weight:700;}
.search-box .search{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; width:100%; height:52px; margin-top:20px; padding-bottom:4px; border-bottom:2px solid #fff; box-sizing:border-box;}
.custom-select-wrap{flex-shrink:0; position:relative; width:150px;}
.select-trigger{width:100%; height:48px; text-align:left; padding:0 40px 0 15px; border:2px solid transparent; box-sizing:border-box; background:url('/resource/image/moe/ico_select_arrow.png') no-repeat right 15px center; color:#fff; font-size:17px; font-weight:700; cursor:pointer; border-radius:8px;}
.select-trigger:focus-visible{outline:none; border-color:rgba(255,255,255,0.8); border-style:dashed; background-color:rgba(255,255,255,0.1);}
.select-options{position:absolute; top:46px; left:0; width:100%; background:#fff; border-radius:8px; box-shadow:0 8px 20px rgba(0, 0, 0, 0.12); overflow:hidden; z-index:10; visibility:hidden; opacity:0; transform:translateY(-8px) scale(0.95); transform-origin:top center; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;}
.select-options[aria-hidden="false"]{visibility:visible; opacity:1; transform:translateY(0) scale(1); pointer-events:auto; transition:opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;}
.select-options li{padding:12px 15px; color:#333; cursor:pointer; font-size:16px;}
.select-options li:focus-visible{background:#e8f0fb; color:#104fc5; outline:none;}
.select-options li[aria-selected="true"]{font-weight:700; color:#104fc5;}
.search-box .input-wrap{flex:1; position:relative;}
.search-box .search .input-wrap input{width:100%; height:48px; padding:12px 40px 12px 15px; color:#fff; font-size:17px; font-weight:600; background:none; box-sizing:border-box; outline:none; border:2px solid transparent; border-radius:8px; transition:border-color 0.3s ease, background-color 0.3s ease;}
.search-box .search .input-wrap input::placeholder{color:rgba(255, 255, 255, .5); font-size:17px; font-weight:600;}
.search-box .search .input-wrap input:focus-visible{background:rgba(255, 255, 255, 0.1); outline:2px dashed rgba(255, 255, 255, 0.8); outline-offset:-2px; border-color:transparent;}
.search-box .search .input-wrap input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; display:none;}
.search-box .search .input-wrap .btn-clear{display:none; position:absolute; right:15px; top:50%; transform:translateY(-50%); width:10px; height:10px; background:url('/resource/image/moe/ico_select_delete.png') no-repeat center center; background-size:cover; border:none; cursor:pointer; overflow:hidden; text-indent:-9999px;}
.search-box .search .input-wrap .btn-clear:focus-visible{outline:2px solid #fff; border-radius:50%;}
.search-box .search .search-submit{flex-shrink:0; width:20px; height:20px; margin-right:15px; border-radius:4px; background:url(/resource/image/moe/ico_search.png) no-repeat; overflow:hidden; white-space:nowrap; text-indent:100%; transition:outline 0.3s ease;}
.search-box .search .search-submit:focus-visible{outline:2px dashed rgba(255, 255, 255, 0.8); outline-offset:4px;}
.search-box .search-box-keyword{display:flex; align-items:center; flex-wrap:wrap; gap:10px 35px; margin-top:25px;}
.search-box .search-box-keyword h3{flex-shrink:0; color:#fff; font-size:17px; font-weight:700;}
.search-box .search-box-keyword ul{display:flex; align-items:center; flex-wrap:wrap; gap:30px;}
.search-box .search-box-keyword a{color:#fff; font-size:15px; font-weight:600; outline:none; border-radius:4px;}
.search-box .search-box-keyword a:focus-visible{outline:2px dashed rgba(255,255,255,0.85); outline-offset:3px;}
.search-box .btn-clear:focus-visible{outline:2px solid #fff; outline-offset:4px; border-radius:50%;}
.search-box .search-submit:focus-visible{outline:2px dashed rgba(255,255,255,0.8); outline-offset:4px;}

@media screen and (max-width:1400px) {
    .search-area{background:#e8f0fb;}
    .search-box{right:40px;}
}
@media screen and (max-width:1024px) {
    .search-area{padding-top:30px;}
    .search-box{position:relative; right:auto; bottom:auto; width:100%; padding:30px 40px; border-radius:20px;}
    .search-box h2{font-size:20px;}
}
@media screen and (max-width:768px) {
    .search-area{padding-top:20px;}
    .search-box{padding:30px 35px;}
    .search-box h2{font-size:18px;}
    .custom-select-wrap{width:130px;}
    .select-trigger{font-size:16px;}
    .search-box .search .input-wrap input::placeholder,
    .search-box .search .input-wrap input,
    .search-box .search-box-keyword h3{font-size:16px;}
    .search-box .search-box-keyword{gap:10px 25px;}
    .search-box .search-box-keyword ul{gap:5px 20px;}
}
@media screen and (max-width:600px) {
    .search-box{padding:30px;}
    .search-box .search{gap:5px; height:100%; margin-bottom:2px;}
    .select-trigger{height:42px; border:2px solid #fff; background-color:rgba(255, 255, 255, 0.1); box-sizing:border-box;}
    .select-options{top:42px;}
    .custom-select-wrap{width:100%;}
    .search-box .search .input-wrap input{height:42px; padding:5px 35px 5px 10px;}
    .search-box .search .search-submit{margin-right:0;}
    .search-box .search-box-keyword{margin-top:20px;}
}
@media screen and (max-width:500px) {
    .search-area{padding-top:15px;}
    .search-box{padding:30px 25px;}
    .search-box h2{font-size:17px; letter-spacing:-0.1px;}
    .select-trigger{font-size:15px;}
    .search-box .search .input-wrap input::placeholder,
    .search-box .search .input-wrap input,
    .search-box .search-box-keyword h3{font-size:15px;}
    .search-box .search-box-keyword a{font-size:14px;}
    .search-box .search-box-keyword ul{gap:5px 10px;}
}

/*학습 서비스*/
#edu-service{position:relative; padding-top:163px; padding-bottom:100px; border-radius:0 0 150px 0; background:#e8f0fb; }
#edu-service:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#f4f7ff; z-index:-1;}
#edu-service .tit{display:flex; flex-direction:column-reverse;}
#edu-service .edu-service-list{margin-top:35px;}
#edu-service .edu-service-list ul{display:flex; justify-content:space-between; flex-wrap:wrap; gap:42px;}
#edu-service .edu-service-list ul li{flex:1;}
#edu-service .edu-service-list a{display:block; border-radius:30px; outline:none; transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1);}
#edu-service .edu-service-list a div{height:100%; padding:50px; border-radius:30px; background:#fff; box-sizing:border-box; transition:box-shadow 0.4s cubic-bezier(0.25,0.8,0.25,1), background-color 0.3s ease;}
#edu-service .edu-service-list h3{padding-top:95px; color:#222; font-size:30px; font-weight:700; background-image:url(/resource/image/moe/ico_edu_service02.png); background-repeat:no-repeat; transition:color 0.3s ease;}
#edu-service .edu-service-list ul li:first-child h3{background-image:url(/resource/image/moe/ico_edu_service01.png);}
#edu-service .edu-service-list ul li:last-child h3{background-image:url(/resource/image/moe/ico_edu_service03.png);}
#edu-service .edu-service-list p{margin-top:15px; color:#555; font-size:16px; font-weight:400; letter-spacing:-0.5px; line-height:1.3rem;}
#edu-service .edu-service-list span{display:block; width:22px; height:18px; margin-top:30px; margin-left:auto; overflow:hidden; white-space:nowrap; text-indent:100%; background:url(/resource/image/moe/ico_edu_service_arrow.png) no-repeat; transition:all 0.3s ease;}
#edu-service .edu-service-list a:focus-visible{transform:translateY(-8px); box-shadow:0 0 0 3px #fff, 0 0 0 6px #1a56db;}
#edu-service .edu-service-list a:focus-visible div{box-shadow:0 15px 30px rgba(16,79,197,0.15);}
#edu-service .edu-service-list a:focus-visible h3{color:#104fc5;}
#edu-service .edu-service-list a:focus-visible span{transform:translateX(10px); background:url(/resource/image/moe/ico_edu_service_arrow_hover.png) no-repeat;}

@media screen and (max-width:1500px) {
    #edu-service{border-radius:0 0 100px 0;}
}
@media screen and (max-width:1300px) {
    #edu-service .edu-service-list ul{gap:30px;}
    #edu-service .edu-service-list h3{font-size:28px;}
    #edu-service .edu-service-list a div{padding:40px;}
}
@media screen and (max-width:1200px) {
    #edu-service{padding-top:145px; border-radius:0 0 80px 0;}
    #edu-service .edu-service-list h3{font-size:25px;}
    #edu-service .edu-service-list a div{padding:35px;}
    #edu-service .edu-service-list p{word-break:keep-all;}
    #edu-service .edu-service-list p br{display:none;}
}
@media screen and (max-width:1024px) {
    #edu-service{padding-top:70px;}
    #main section .tit h2{font-size:38px;}
    #edu-service .edu-service-list a div{border-radius:20px;}
}
@media screen and (max-width:900px) {
    #edu-service{border-radius:0 0 50px 0;}
    #edu-service .edu-service-list{margin-top:30px;}
    #edu-service .edu-service-list ul{gap:20px;}
    #edu-service .edu-service-list ul li{flex:0 0 100%;}
    #edu-service .edu-service-list a div{position:relative; padding:30px 85px 30px 120px;}
    #edu-service .edu-service-list a div:before{content:''; display:block; position:absolute; left:35px; top:50%; width:50px; height:50px; background-image:url(/resource/image/moe/ico_edu_service02.png); background-repeat:no-repeat; background-size:cover; transform:translateY(-50%);}
    #edu-service .edu-service-list ul li:first-child a div:before{width:54px; background-image:url(/resource/image/moe/ico_edu_service01.png);}
    #edu-service .edu-service-list ul li:last-child a div:before{background-image:url(/resource/image/moe/ico_edu_service03.png);}
    #edu-service .edu-service-list h3{padding-top:0; font-size:22px; background:none !important;}
    #edu-service .edu-service-list p{margin-top:10px;}
    #edu-service .edu-service-list span{position:absolute; right:35px; top:50%; width:20px; height:16px; margin-top:0; background-size:cover; transform:translateY(-50%);}
    #edu-service .edu-service-list a:focus-visible span{background-size:cover; transform:translateY(-50%) translateX(5px);}
}
@media screen and (max-width:768px) {
    #edu-service{padding-top:50px;}
    #main section .tit h2{font-size:35px;}
    #main section .tit p{font-size:15px;}
    #edu-service .edu-service-list a div{padding:30px 75px 30px 110px;}
    #edu-service .edu-service-list h3{font-size:20px;}
    #edu-service .edu-service-list p{font-size:15px;}
    #edu-service .edu-service-list span{right:30px;}
}
@media screen and (max-width:500px) {
    #edu-service{border-radius:0 0 30px 0;}
    #main section .tit h2{margin-top:5px; font-size:32px;}
    #edu-service .edu-service-list h3{font-size:18px;}
}
@media screen and (max-width:430px) {
    #edu-service .edu-service-list a div{padding:30px 30px 30px 110px;}
    #edu-service .edu-service-list span{display:none;}
}

/*나의 학습*/
#my-learning{position:relative; width:100%;}
#my-learning:before{content:''; display:block; position:absolute; left:0; top:0; bottom:181px; width:100%; border-radius:0 0 0 150px; background:#f4f7ff; z-index:-1;}
#my-learning .inr{padding-top:90px; box-sizing:border-box;}
#main section#my-learning .tit{display:flex; flex-direction:column-reverse; flex-wrap:wrap; text-align:left;}
#main section#my-learning .inr > .tit{text-align:center;}
#my-learning .tit h2 span{margin-left:10px; color:#555; font-size:16px; font-weight:400; letter-spacing:-0.5px; word-break:keep-all;}
.my-learning-list{margin-top:50px;}
.my-learning-list ul{display:flex; align-items:center; flex-wrap:wrap; gap:32px;}
.my-learning-list ul li{flex:1;}
.my-learning-list ul li > a{display:flex; justify-content:center; align-items:center; height:180px; text-align:center; border-radius:30px; background:#fff; box-sizing:border-box; transition:transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1), background-color 0.3s ease; outline:none;}
.my-learning-list ul li p{position:relative; width:100%; padding-top:85px; font-size:20px; font-weight:700; letter-spacing:-0.1px; transition:color 0.3s ease;}
.my-learning-list ul li p:before{content:''; display:block; position:absolute; left:50%; top:0; transform:translateX(-50%); background-repeat:no-repeat; background-position:50% 0;}
.my-learning-list ul li p.list01:before{width:63px; height:57px; background-image:url(/resource/image/moe/ico_my_learning01.png);}
.my-learning-list ul li p.list02:before{width:62px; height:59px; background-image:url(/resource/image/moe/ico_my_learning02.png);}
.my-learning-list ul li p.list03:before{width:62px; height:62px; background-image:url(/resource/image/moe/ico_my_learning03.png);}
.my-learning-list ul li p.list04:before{width:62px; height:62px; background-image:url(/resource/image/moe/ico_my_learning04.png);}
.my-learning-list ul li p.list05:before{width:67px; height:61px; background-image:url(/resource/image/moe/ico_my_learning05.png);}
.my-learning-list ul li p.list06:before{width:75px; height:59px; background-image:url(/resource/image/moe/ico_my_learning06.png);}
.my-learning-list ul li > a:focus-visible {transform:translateY(-6px); box-shadow:0 12px 24px rgba(16,79,197,0.12); background-color:#f8faff; outline:3px solid #1a56db; outline-offset:2px;}
.my-learning-list ul li > a:focus-visible p {color:#104fc5;}

@media screen and (max-width:1300px) {
    .my-learning-list ul li p{font-size:18px;}
    .my-learning-list ul{gap:25px;}
}
@media screen and (max-width:1200px) {
    .my-learning-list ul{gap:20px;}
    .my-learning-list ul li p{padding-top:80px; font-size:17px;}
    .my-learning-list ul li > a{height:170px;}
}
@media screen and (max-width:1024px) {
    .my-learning-list ul li{flex:0 0 calc((100% - 40px) / 3);}
    .my-learning-list ul li > a{height:150px;}
}
@media screen and (max-width:768px) {
    #main section#my-learning .tit{text-align:center;}
    #my-learning .tit h2 span{display:block; width:100%; margin-top:15px; margin-left:0;}
    .my-learning-list ul li > a{height:130px; border-radius:25px;}
    .my-learning-list ul li p{padding-top:70px; font-size:16px;}
    .my-learning-list ul li p:before{background-size:cover;}
    .my-learning-list ul li p.list01:before{width:53px; height:48px;}
    .my-learning-list ul li p.list02:before{width:52px; height:50px;}
    .my-learning-list ul li p.list03:before{width:52px; height:52px;}
    .my-learning-list ul li p.list04:before{width:52px; height:52px;}
    .my-learning-list ul li p.list05:before{width:57px; height:52px;}
    .my-learning-list ul li p.list06:before{width:65px; height:51px;}
}
@media screen and (max-width:450px) {
    .my-learning-list ul li{flex:0 0 calc((100% - 20px) / 2);}
    .my-learning-list ul li > a{height:120px;}
    .my-learning-list ul li p{padding-top:65px; font-size:15px;}
}

.rotating-link-wrap{position:absolute; right:20px; top:-55px; display:flex; align-items:center; justify-content:center; width:172px; height:172px; border-radius:50%; z-index:10;}
.rotating-link{display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:#fff; text-decoration:none; box-shadow:0 2px 8px rgba(0,0,0,0.06); outline:none; transition:transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1);}
.rotating-link:focus-visible{transform:translateY(-6px); box-shadow:0 2px 8px rgba(0,0,0,0.06), 0 0 0 3px #fff, 0 0 0 5px #1a56db;}
.rotating-text{position:absolute; top:0; left:0; animation:spin 12s linear infinite;}
.rotating-link:focus .rotating-text,
.rotating-link:focus-visible .rotating-text{animation-play-state:paused;}
.center-text{text-align:center; font-size:16px; font-weight:500; color:#222; font-weight:700; letter-spacing:-0.1px; line-height:1.3;}

@media screen and (max-width:1400px) {
    .rotating-link-wrap{right:30px;}
}
@media screen and (max-width:768px) {
    .rotating-link-wrap{right:20px; width:142px; height:142px;}
    .rotating-text{width:142px; height:142px;}
}
@media screen and (max-width:500px) {
    .rotating-link-wrap{right:10px; width:132px; height:132px;}
    .rotating-text{width:132px; height:132px;}
    .center-text{font-size:15px;}
}

@keyframes spin{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@media (forced-colors: active) {
    #edu-service .edu-service-list a:focus-visible,
    .my-learning-list ul li > a:focus-visible,
    .rotating-link:focus-visible{outline:3px solid CanvasText; outline-offset:2px;}
}
@media (prefers-reduced-motion: reduce) {
    .rotating-text{animation:none;}
}

/*학습 진행률*/
#my-learning .my-learning-progress{margin-top:40px; margin-left:max(20px, calc((100% - 1300px) / 2)); padding:50px; border-radius:30px 0 0 30px; background:#d8eaff; box-sizing:border-box; overflow:visible; clip-path:inset(-40px 0 -40px 0 round 30px 0 0 30px);}
#my-learning .my-learning-cont{display:flex; gap:80px; position:relative;}
.my-learning-progress .left-wrap{display:flex; flex-direction:column; /*justify-content:space-around;*/ flex-shrink:0; width:333px; margin-top:10px;}
.my-learning-progress .left-wrap .ctl-box{margin-top:30px;}
#main section#my-learning .my-learning-progress .tit{display:block;}
#my-learning .my-learning-progress h3{color:#222; font-size:30px; font-weight:700;}
#my-learning .my-learning-progress .progress{display:inline-block; margin-top:20px; padding:10px 12px; background:#f4f7ff; border-radius:50px; box-sizing:border-box;}
#my-learning .my-learning-progress .progress ul{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:20px;}
#my-learning .my-learning-progress .progress li{display:flex; align-items:center; position:relative;}
#my-learning .my-learning-progress .progress li:before{content:''; display:block; position:absolute; left:-12px; top:50%; width:1px; height:12px; background:#ddd; transform:translateY(-50%);}
#my-learning .my-learning-progress .progress li:first-child:before{display:none;}
#my-learning .my-learning-progress .progress li p{flex-shrink:0; color:#222; font-size:15px; font-weight:700; letter-spacing:-0.5px;}
#my-learning .my-learning-progress .progress li span{margin-left:10px; color:#1b7548; font-size:18px; font-weight:900;}
#my-learning .my-learning-progress .progress li:first-child span{color:#0056b3;}
#my-learning .my-learning-progress .progress li:last-child span{color:#c0392b;}
#my-learning .ctl-box .ctl-box-arrow{display:flex; gap:20px;}
#my-learning .ctl-box .ctl-box-arrow button{position:relative; top:auto; left:auto; width:50px; height:50px; margin-top:0; border:none; border-radius:50%; background:#fff; cursor:pointer;}
#my-learning .ctl-box .ctl-box-arrow button:after{display:none;}
#my-learning .ctl-box .ctl-box-arrow span{display:block; width:6px; height:12px; background:url(/resource/image/moe/ico_ctl_box_arrow.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
#my-learning .ctl-box .ctl-box-arrow .swiper-button-prev span{transform:rotate(180deg);}
#my-learning .ctl-box .ctl-box-arrow .swiper-navigation-icon{display:none;}
#my-learning .ctl-box .ctl-box-page{display:flex; justify-content:flex-end; align-items:center; margin-top:170px; padding-right:30px;}
#my-learning .ctl-box .ctl-box-page .swiper-pagination{position:relative; width:auto; top:auto; bottom:auto;}
#my-learning .ctl-box .ctl-box-page .swiper-pagination-bullet{width:14px; height:14px; margin:0 6px; background:#fff; opacity:1;}
#my-learning .ctl-box .ctl-box-page .swiper-pagination-bullet-active{width:14px; height:14px; background:#0064dd;}
#my-learning .ctl-box .ctl-box-page .swiper-button-autoplay{width:11px; height:13px; margin-left:6px; background-color:transparent; background-image:url(/resource/image/moe/ico_ctl_box_stop.png); background-repeat:no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
#my-learning .ctl-box .ctl-box-page .swiper-button-autoplay.paused{background-image:url(/resource/image/moe/ico_ctl_box_play.png);}
#my-learning .ctl-box .ctl-box-arrow button:focus-visible,
#my-learning .ctl-box .ctl-box-page .swiper-button-autoplay:focus-visible{outline: 2px solid #1a56db; outline-offset:3px;}
#my-learning .ctl-box .ctl-box-page .swiper-pagination-bullet:focus-visible{outline:2px solid #1a56db; outline-offset:2px;}
#my-learning .mySwiper{overflow:hidden; margin:-40px -15px; padding:40px 15px; box-sizing:border-box;}
#my-learning .my-learning-swiper li a{display:block; height:100%; padding:25px 25px 35px; border-radius:30px; background:#fff; transition:transform 0.3s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.3s cubic-bezier(0.25,0.8,0.25,1); box-sizing:border-box;}
#my-learning .my-learning-swiper li:hover a{transform:translateY(-6px); box-shadow:0 12px 24px rgba(16,79,197,0.12);}
#my-learning .my-learning-swiper .swiper-slide{position:relative;}
#my-learning .my-learning-swiper .swiper-slide:hover,
#my-learning .my-learning-swiper .swiper-slide:focus-within{z-index:2;}
#my-learning .my-learning-swiper ul{align-items:center;}
#my-learning .my-learning-swiper li{/*width:295px !important;*/ height:382px;}
#my-learning .my-learning-swiper .img{display:block; position:relative; width:100%; height:180px; border-radius:20px; background:#f6f6f8; overflow:hidden;}
#my-learning .my-learning-swiper .img img{display:block; position:absolute; left:50%; top:50%; width:100%; height:100%; object-fit:cover; transform:translate(-50%, -50%);}
#my-learning .my-learning-swiper .txt{display:flex; flex-direction:column-reverse; margin-top:15px;}
#my-learning .my-learning-swiper .txt div{margin-top:10px;}
#my-learning .my-learning-swiper .txt h4{font-size:17px; font-weight:700; letter-spacing:-0.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#my-learning .my-learning-swiper .txt p{margin-top:5px; color:#555; font-size:15px; font-weight:500; letter-spacing:-0.5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#my-learning .my-learning-swiper .txt .status{display:inline-block; width:61px; height:23px; font-size:13px; font-weight:700; letter-spacing:-0.1px; text-align:center; line-height:23px; border-width:1px; border-style:solid; border-radius:50px; box-sizing:border-box;}
#my-learning .my-learning-swiper .txt .status.learning{color:#0056b3; border-color:#0056b3;}
#my-learning .my-learning-swiper .txt .status.waiting{color:#1b7548; border-color:#1b7548;}
#my-learning .my-learning-swiper .txt .status.complete{color:#c0392b; border-color:#c0392b;}
#my-learning .my-learning-swiper li a:focus-visible {transform:translateY(-6px); box-shadow:0 12px 24px rgba(16,79,197,0.12); outline:3px solid #1a56db; outline-offset:2px; border-radius:30px;}
#my-learning .my-learning-swiper li a:focus-visible .txt h4{color:#1a56db;}

#my-learning .graph-area{display:flex; align-items:center; justify-content:center; margin-top:15px; padding:10px; border-radius:50px; background:#f1f5f9; box-sizing:border-box;}
#my-learning .graph-area p{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; position:relative;}
#my-learning .graph-area p + p::before{content:''; display:block; position:absolute; left:0; top:50%; width:1px; height:12px; background:#d1d5db; transform:translateY(-50%);}
#my-learning .graph-area p:only-child{flex:0 1 auto;}
#my-learning .graph-area p i{font-style:normal; color:#475569; font-size:14px; font-weight:500; letter-spacing:-0.2px; white-space:nowrap;}
#my-learning .graph-area span{flex-shrink:0; color:#0056b3; font-size:16px; font-weight:800; line-height:1;}
#my-learning .graph-area .group{color:#c0392b;}

@media screen and (max-width:1500px) {
    #my-learning:before{border-radius:0 0 0 100px;}
}
@media screen and (max-width:1400px) {
    #my-learning .my-learning-progress{margin-left:40px;}
}
@media screen and (max-width:1300px) {
    #my-learning .my-learning-progress h3{font-size:28px;}
}
@media screen and (max-width:1200px) {
    #my-learning:before{border-radius:0 0 0 80px;}
    #my-learning .my-learning-cont{gap:50px;}
    #my-learning .my-learning-progress{margin-left:30px; padding:40px;}
    #my-learning .my-learning-progress h3{font-size:25px;}
}
@media screen and (max-width:1130px) {
    #main section#my-learning .my-learning-progress .left-wrap{flex-direction:row; justify-content:space-between;}
    #my-learning .my-learning-progress{padding:30px;}
    #my-learning .my-learning-cont{flex-wrap:wrap; gap:0;}
    #my-learning .mySwiper{margin:0;}
    .my-learning-progress .left-wrap .ctl-box{margin-top:0;}
    #my-learning .ctl-box .ctl-box-arrow{margin-right:30px;}
    #my-learning .ctl-box .ctl-box-page{justify-content:center; position:absolute; left:0; bottom:-5px; width:100%; margin-top:0; padding-right:0; z-index:10;}
    #main section#my-learning .my-learning-progress .left-wrap{width:100%;}
    #main section#my-learning .my-learning-progress .tit{display:flex; align-items:center; flex-direction:row; flex-wrap:wrap; gap:20px;}
    #my-learning .my-learning-progress .progress{flex-shrink:0; margin-top:0;}
}
@media screen and (max-width:1024px) {
    #my-learning:before{border-radius:0 0 0 50px;}
    #my-learning .my-learning-progress{padding:30px 30px 50px;}
    #my-learning .my-learning-progress h3{font-size:22px;}
    #my-learning .my-learning-progress .progress li:first-child span{font-size:17px;}
    #my-learning .mySwiper{margin:0; padding:20px 0 0;}
    #my-learning .my-learning-swiper li{/*width:255px !important;*/ height:324px;}
    #my-learning .my-learning-swiper li a{padding:20px 20px 25px; border-radius:25px;}
    #my-learning .my-learning-swiper .img{height:150px; border-radius:15px;}
    #my-learning .graph-area p{gap:5px;}
    #my-learning .graph-area span{font-size:15px;}
    #my-learning .ctl-box .ctl-box-page{bottom:-37px;}
}
@media screen and (max-width:768px) {
    #my-learning .my-learning-progress h3{font-size:20px;}
    #my-learning .my-learning-progress{margin:40px 20px 0; padding:25px 30px 50px; border-radius:30px;}
    #my-learning .my-learning-progress .progress{border-radius:20px;}
    #main section#my-learning .my-learning-progress .tit{flex-direction:column; align-items:flex-start; width:100%;}
    #my-learning .my-learning-progress .progress ul{gap:5px 15px;}
    #my-learning .my-learning-progress .progress li span{margin-left:8px; font-size:16px;}
    #my-learning .my-learning-progress .progress li:before{left:-8px;}
    #my-learning .my-learning-swiper li{/*width:235px !important;*/ height:320px;}
    #my-learning .graph-box p{min-width:37px; font-size:16px;}
    #my-learning .my-learning-swiper .img{height:135px;}
    #my-learning .my-learning-swiper .txt h4{font-size:16px;}
    #my-learning .ctl-box .ctl-box-arrow{position:absolute; right:0; top:-3px; gap:15px; margin-right:0;}
    #my-learning .ctl-box .ctl-box-arrow button{width:35px; height:35px;}
    #my-learning .ctl-box .ctl-box-page .swiper-pagination-bullet,
    #my-learning .ctl-box .ctl-box-page .swiper-pagination-bullet-active{top:auto; width:12px; height:12px; margin:0 5px;}
}
@media screen and (max-width:450px) {
    #my-learning .my-learning-progress{padding:20px 25px 50px;}
}

/*슬라이드 1~2개일 때 최대 너비 제한*/
@media screen and (min-width: 1480px) {
    #my-learning .my-learning-swiper .swiper-slide{max-width:calc((100% - 70px) / 3);}
}
@media screen and (min-width: 1131px) and (max-width: 1479px) {
    #my-learning .my-learning-swiper .swiper-slide{max-width:calc((100% - 35px) / 2);}
}
@media screen and (min-width: 900px) and (max-width: 1130px) {
    #my-learning .my-learning-swiper .swiper-slide{max-width:calc((100% - 50px) / 3);}
}
@media screen and (min-width: 670px) and (max-width: 899px) {
    #my-learning .my-learning-swiper .swiper-slide{max-width: calc((100% - 25px) / 2);}
}

#my-learning .ctl-box .ctl-box-arrow button.swiper-button-lock,
#my-learning .ctl-box .ctl-box-page .swiper-pagination-lock {display: none !important;}

#my-learning .ctl-box .ctl-box-page:empty{display:none;}


/*인기 과정*/
#popular-course{position:relative; padding:100px 30px 20px;}
#popular-course:before{content:''; display:block; position:absolute; left:0; top:-170px; width:466px; height:590px; background:url(/resource/image/moe/bg_popular_course.png) no-repeat; z-index:-1; background-size:cover;}
#main section#popular-course .inr > .tit{display:flex; flex-direction:column-reverse;}

/*과정 swiper*/
section[id$="-course"] .course-swiper{margin-top:30px; padding-bottom:50px;}
section[id$="-course"] .course-swiper .swiper-wrapper{padding-top:20px;}
section[id$="-course"] .course-swiper .course-card{display:block; position:relative; padding:25px; border-radius:30px; border:1px solid #ccc; background:#fff; transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index:2; box-sizing:border-box; outline:none;}
section[id$="-course"] .course-swiper .course-card.expanded{border:2px solid #386af1; box-shadow:0 8px 24px rgba(56, 106, 241, 0.12); box-sizing:border-box;}
section[id$="-course"] .course-swiper .swiper-slide{position:relative;}
section[id$="-course"] .course-swiper .swiper-slide:hover,
section[id$="-course"] .course-swiper .swiper-slide:focus-within{z-index:2;}
section[id$="-course"] .course-swiper .swiper-slide:after{content:''; display:block; position:absolute; left:0; bottom:-35px; width:100%; height:35px; z-index:1;}
section[id$="-course"] .course-swiper > ul > li{width:100%;}
section[id$="-course"] .course-swiper .card-link-area{display:block; outline:none;}
section[id$="-course"] .course-swiper .card-link-area:focus-visible{outline:2px dashed #104fbf; outline-offset:4px; border-radius:20px;}
section[id$="-course"] .course-swiper .card-link-area .img{position:relative; width:100%; height:180px; border-radius:20px; background:#f6f6f8; overflow:hidden; transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
section[id$="-course"] .course-swiper .card-link-area .img img{display:block; position:absolute; left:50%; top:50%; width:100%; height:100%; object-fit:cover; transform:translate(-50%, -50%); transition:transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
section[id$="-course"] .course-swiper .tit{margin-top:15px;}
section[id$="-course"] .course-swiper .tit .course{display:flex; align-items:center;}
section[id$="-course"] .course-swiper .tit .course p{color:#0056b3; font-size:15px; font-weight:700; letter-spacing:-0.1px;}
section[id$="-course"] .course-swiper .tit .course .in-person{color:#c0392b;}
section[id$="-course"] .course-swiper .tit .course .hybrid{color:#1b7548;}
section[id$="-course"] .course-swiper .tit .course span{display:block; position:relative; margin-left:10px; padding-left:10px; color:#6D797A; font-size:15px; font-weight:700; letter-spacing:-0.1px; box-sizing:border-box;}
section[id$="-course"] .course-swiper .tit .course span:before{content:''; display:block; position:absolute; left:0; top:50%; width:1px; height:12px; border-left:1px solid #ddd; transform:translateY(-50%);}
section[id$="-course"] .course-swiper .tit a{position:relative; display:inline-block; transition:all 0.3s ease; outline:none; margin-top:10px;}
section[id$="-course"] .course-swiper .tit h3{display:-webkit-box; height:45px; margin-top:10px; color:#222; font-size:17px; font-weight:700; text-align:left; line-height:1.4rem; word-break:keep-all; overflow:hidden; outline:none; transition:color 0.3s ease; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}
.course-card .toggle-content{max-height:88px; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
.course-card .toggle-content.active{max-height:600px;}
section[id$="-course"] .course-swiper .txt{margin-top:10px; border-top:1px solid #e0e5e6;}
section[id$="-course"] .course-swiper .txt > ul{margin-top:15px;}
section[id$="-course"] .course-swiper .txt > ul > li{display:flex; align-items:baseline; gap:8px; margin-bottom:5px;}
section[id$="-course"] .course-swiper .txt li p{flex-shrink:0; padding:5px 8px; color:#222; font-size:14px; font-weight:700; letter-spacing:-0.1px; border-radius:50px; background:#e8ebf1; box-sizing:border-box;}
section[id$="-course"] .course-swiper .txt li span{display:block; color:#222; font-size:15px; font-weight:700; letter-spacing:-0.1px;}
section[id$="-course"] .course-swiper .txt li ul{display:flex; align-items:center; flex-wrap:wrap; gap:5px 12px;}
section[id$="-course"] .course-swiper .txt li ul li{position:relative; color:#222; font-size:15px; font-weight:700; letter-spacing:-0.1px;}
section[id$="-course"] .course-swiper .txt li ul li:before{content:''; display:block; position:absolute; right:-7px; top:50%; width:1px; height:12px; background:#ddd; transform:translateY(-50%);}
section[id$="-course"] .course-swiper .txt li ul li:last-child:before{display:none;}
.course-card .button-group{padding:6px; margin-left:-6px; margin-right:-6px; max-height:0; margin-top:0; opacity:0; visibility:hidden; overflow:hidden; transition:all 0.4s ease;}
.course-card .action-area{margin-top:0;}
.course-card.expanded .button-group{max-height:150px; padding-top:14px; opacity:1; visibility:visible;}
.course-card.expanded .toggle-info{opacity:0; visibility:hidden; transform:translate(-50%, -10px);}
.course-card.expanded .toggle-content{max-height:200px;}
section[id$="-course"] .course-swiper .register{display:block; position:relative; width:100%; padding:14px 10px; color:#fff; font-size:17px; font-weight:700; letter-spacing:-0.1px; border-radius:50px; background:#386af1; cursor:pointer; transition:background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); outline:none; z-index:10; box-sizing:border-box;}
section[id$="-course"] .course-swiper .register:hover{background:#2856d1; box-shadow:0 8px 20px rgba(56, 106, 241, 0.3);}
section[id$="-course"] .course-swiper .register:focus-visible:hover{background:#2856d1; box-shadow:0 8px 20px rgba(56, 106, 241, 0.3);}
section[id$="-course"] .course-swiper .register:after{content:''; position:absolute; bottom:0; left:0; top:0; right:0; width:auto; height:auto; background:transparent;}
.course-card .detail-link:after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1;}
.course-card .action-area button,
.course-card .toggle-info-btn,
.course-card .register,
.course-card .toggle-btn{position:relative; z-index:10;}
.register:hover{background:#2856d1;}
.toggle-btn{display:block; position:relative; margin:10px auto 5px; padding-left:15px; color:#386af1; font-size:13px; font-weight:700; background:none; cursor:pointer; transition:color 0.3s ease, transform 0.3s ease;}
.toggle-btn:before{content:''; display:block; position:absolute; left:0; top:50%; width:12px; height:6px; background:url(/resource/image/moe/ico_course_toggle.png) no-repeat; transform:translateY(-50%); transition:transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);}
.toggle-btn:focus-visible{outline:2px dashed #386af1; border-radius:4px; outline-offset:2px; color:#2856d1;}
.course-card .toggle-info{position:absolute; left:50%; bottom:-28px; width:56px; height:56px; text-align:center; transform:translateX(-50%); transition:all 0.3s ease; z-index:10; opacity:1; visibility:visible;}
.toggle-info-btn{display:inline-flex; align-items:center; justify-content:center; position:relative; width:56px; height:56px; border-radius:50%; border:1px solid #ccc; background:#fff; cursor:pointer; outline:none; transition:all 0.3s ease; text-indent:100%; overflow:hidden; white-space:nowrap;}
.toggle-info-btn:before{content:''; display:block; position:absolute; left:50%; top:50%; width:17px; height:17px; margin-left:-8.5px; margin-top:-8.5px; background:url(/resource/image/moe/ico_course_link.png) 50% no-repeat; transition:all 0.3s ease;}
.toggle-info-btn:focus-visible{box-shadow:0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 3px #fff, 0 0 0 5px #104fbf; border-color:#104fbf; color:#386af1;}
.toggle-info-btn:focus-visible::before{transform:rotate(90deg);}
section[id$="-course"] .ctl-box-arrow{display:flex; justify-content:flex-end; align-items:center; gap:10px; position:absolute; top:50px; right:0; height:55px;}
section[id$="-course"] .ctl-box-arrow button{position:relative; left:auto; top:auto; width:55px; height:55px; margin-top:0; border:1px solid #d4d4d4; border-radius:50%; background:#fff;}
section[id$="-course"] .ctl-box-arrow button:after{display:none;}
section[id$="-course"] .ctl-box-arrow button:focus-visible{outline:2px solid #1a56db; outline-offset:3px;}
section[id$="-course"] .ctl-box-arrow .swiper-button-disabled{opacity:.5;}
section[id$="-course"] .ctl-box-arrow .swiper-button-next{right:auto; border:1px solid #386af1;}
section[id$="-course"] .ctl-box-arrow button span{display:block; width:9px; height:16px; background-image:url(/resource/image/moe/ico_popular_prev.png); background-repeat:no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
section[id$="-course"] .ctl-box-arrow .swiper-button-next span{background-image:url(/resource/image/moe/ico_popular_next.png);}
section[id$="-course"] .ctl-box-arrow button svg{display:none;}
section[id$="-course"] .ctl-box-page{position:relative; margin-top:20px;}
section[id$="-course"] .ctl-box-page .swiper-pagination{position:relative;}
section[id$="-course"] .ctl-box-page .swiper-pagination button{width:14px; height:14px; margin:0 5px; border-radius:50%; background:#d4d4d4; opacity:1;}
section[id$="-course"] .ctl-box-page .swiper-pagination button:focus-visible{outline:2px solid #1a56db; outline-offset:2px;}
section[id$="-course"] .ctl-box-page .swiper-pagination .swiper-pagination-bullet-active{background:#0064dd;}
section[id$="-course"] .course-more{display:flex; justify-content:center; align-items:center; position:relative; width:280px; height:65px; margin:30px auto 0; padding:10px; border:1px solid #ccc; border-radius:15px; box-sizing:border-box; overflow:hidden;  transition:background-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
section[id$="-course"] .course-more .text-wrapper{position:relative; height:21px; overflow:hidden; z-index:2; display:flex; flex-direction:column;}
section[id$="-course"] .course-more .button-text{position:relative; padding-right:20px; font-size:18px; font-weight:700; letter-spacing:-0.1px; transition:transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), color 0.4s ease; white-space:nowrap;}
section[id$="-course"] .course-more .button-text:before{content:''; display:block; position:absolute; right:0; top:50%; width:6px; height:12px; background:url(/resource/image/moe/ico_ctl_box_arrow.png) no-repeat; transform:translateY(-50%);}
section[id$="-course"] .course-more .button-text.link{color:#222;}
section[id$="-course"] .course-more .button-text.hover{color:#fff;}
section[id$="-course"] .course-more .button-text.hover:before{background:url(/resource/image/moe/ico_popular_more01.png) no-repeat;}
.swiper-pagination{position:absolute; text-align:center;  transition:.3s opacity; transform:translate3d(0,0,0); z-index:10}

section[id$="-course"] .course-swiper .course-card:focus-within{transform:translateY(-6px); box-shadow:0 12px 24px rgba(16, 79, 197, 0.12);}
section[id$="-course"] .course-swiper .card-link-area:focus-visible .img img {transform: translate(-50%, -50%) scale(1.08);}
section[id$="-course"] .course-swiper .card-link-area:focus-visible .tit h3 {color:#104fbf;}
section[id$="-course"] .course-swiper .register:focus-visible {outline:2px dashed rgba(56, 106, 241, 0.8); outline-offset:3px; box-shadow:0 8px 20px rgba(56, 106, 241, 0.2);}

@media screen and (max-width:1400px) {
    #popular-course{padding:80px 0 20px;}
    section[id$="-course"] .ctl-box-arrow{right:40px;}
}
@media screen and (max-width:1024px) {
    #popular-course:before{width:356px; height:450px;}
    section[id$="-course"] .course-swiper .course-card{padding:20px 20px 25px; border-radius:25px;}
    section[id$="-course"] .course-swiper .card-link-area .img{height:150px; border-radius:15px;}
    section[id$="-course"] .course-more{width:240px; height:60px;}
    section[id$="-course"] .course-more .button-text{font-size:16px;}
}
@media screen and (max-width:768px) {
    #popular-course:before{width:276px; height:350px;}
    #main section[id$="-course"] .course-swiper .tit h3{font-size:16px;}
    section[id$="-course"] .course-more{margin:20px auto 0;}
    section[id$="-course"] .ctl-box-arrow{position:relative; top:auto; right:auto; height:auto; margin-top:10px;}
    section[id$="-course"] .ctl-box-arrow button{width:45px; height:45px;}
    section[id$="-course"] .course-swiper{margin-top:0;}
    section[id$="-course"] .ctl-box-page{margin-top:10px;}
    section[id$="-course"] .ctl-box-page .swiper-pagination button{width:12px; height:12px;}
}

@media (prefers-reduced-motion: reduce) {
    section[id$="-course"] .course-more,
    section[id$="-course"] .course-more .button-text{
        transition:none;
    }
    .course-card .img,
    .course-card .img img,
    .course-card .tit a,
    .course-card .tit a h3,
    .course-card .tit a h3:after,
    .toggle-info-btn,
    .toggle-info-btn:before,
    .register,
    .toggle-btn,
    .toggle-btn:before{
        transition:none;
        animation:none;
    }

    .toggle-info-btn:hover:before,
    .toggle-btn:hover:before,
    .toggle-btn:focus-visible:before{
        transform:none;
    }
}

@media (forced-colors: active) {
    .course-card .img:focus-visible,
    .course-card .tit a:focus-visible,
    .toggle-info-btn:focus-visible,
    .register:focus-visible,
    .toggle-btn:focus-visible{
        outline:3px solid CanvasText;
        outline-offset:2px;
    }

    .toggle-info-btn:hover,
    .register:hover,
    .toggle-btn:hover{
        border-color:CanvasText;
    }
}

/*관심등록*/
.btn-like{position:absolute; right:45px; top:145px; width:39px; height:39px; border:1px solid #ccc; border-radius:50%; background:#fff; box-sizing:border-box; outline:none; transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;}
.btn-like:before{content:''; display:block; position:absolute; left:50%; top:50%; width:21px; height:19px; margin-top:2px; background-image:url(/resource/image/moe/ico_like_off.png); background-repeat:no-repeat; transform:translate(-50%, -50%);}
.btn-like.active:before{background-image:url(/resource/image/moe/ico_like_on.png); animation:heartPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;}
.btn-like:active{transform:scale(0.9);}
.btn-like.active{border-color:#ff4d4f;}
.btn-like:focus-visible{outline:2px dashed #ff4d4f; outline-offset:2px; border-color:#ff4d4f;}

@keyframes heartPop {
    0%   { transform: translate(-50%, -50%) scale(0.8); }
    50%  { transform: translate(-50%, -50%) scale(1.25); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

@media screen and (max-width:1024px) {
    .btn-like{right:40px; top:115px;}
}

/*신규 과정*/
#new-course{margin-top:70px; padding:80px 30px; border-radius:0 150px 0 150px; background:#f0f6ff; box-sizing:border-box;}
#main section#new-course .inr > .tit{display:flex; flex-direction:column-reverse;}
#new-course .new-course-swiper{margin-top:30px; padding-bottom:50px;}
#new-course .course-more{border:1px solid #3c6df1;}
#new-course .course-more:hover,
#new-course .course-more:focus-visible{background:linear-gradient(135deg, #3c6df1 0%, #2856d1 100%); border-color:#3c6df1; box-shadow:0 12px 30px rgba(60, 109, 241, 0.25);}
#new-course .course-more .button-text:before{background:url(/resource/image/moe/ico_popular_more02.png) no-repeat;}
#new-course .course-more .button-text.link{color:#3c6df1;}
#new-course .course-more .button-text.hover:before{background:url(/resource/image/moe/ico_popular_more01.png) no-repeat;}


@media screen and (max-width:1500px) {
    #new-course{border-radius:0 100px 0 100px;}
}
@media screen and (max-width:1400px) {
    #new-course{margin-top:40px; padding:60px 0;}
}
@media screen and (max-width:1200px) {
    #new-course{border-radius:0 80px 0 80px;}
}
@media screen and (max-width:1024px) {
    #new-course{margin-top:30px; padding:50px 0; border-radius:0 50px 0 50px;}
}
@media screen and (max-width:768px) {
    #new-course .new-course-swiper{margin-top:0;}
}

/*연계 서비스*/
#connected-service{position:relative;}
#connected-service:before{content:''; display:block; position:absolute; left:60px; bottom:55px; width:423px; height:198px; background:url(/resource/image/moe/bg_connected_service01.png) no-repeat; animation:float-up-down 8s ease-in-out infinite; z-index:-1;}
#connected-service:after{content:''; position:absolute; right:0; top:75px; width:177px; height:358px; background:url(/resource/image/moe/bg_connected_service02.png) no-repeat; animation:float-left-right 5s ease-in-out infinite; z-index:-1;}
#connected-service .inr{position:relative; padding:100px 30px;}
#connected-service .inr:before{content:''; display:block; position:absolute; left:-120px; top:28px; width:184px; height:184px; background:url(/resource/image/moe/bg_connected_service03.png) no-repeat; animation:spin-slow 20s linear infinite;  z-index:-1;}
#connected-service .tit{display:flex; flex-direction:column-reverse;}
#connected-service .connected-service-list{margin-top:50px;}
#connected-service .connected-service-list ul{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px;}
#connected-service .connected-service-list li{flex:1;}
#connected-service .connected-service-list li:nth-child(even){margin-top:50px;}
#connected-service .connected-service-list a{display:block; border-radius:30px; outline:none; transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1);}
#connected-service .connected-service-list div{display:block; height:330px; padding:60px 40px 40px; border-radius:30px; background:#f6f6f8; box-sizing:border-box; transition:background-color 0.3s ease, box-shadow 0.4s cubic-bezier(0.25,0.8,0.25,1)}
#connected-service .connected-service-list h3{padding-top:80px; color:#222; font-size:30px; font-weight:700; background-repeat:no-repeat; transition:color 0.3s ease;}
#connected-service .connected-service-list .list01 h3{background-image:url(/resource/image/moe/ico_connected_service01.png);}
#connected-service .connected-service-list .list02 h3{background-image:url(/resource/image/moe/ico_connected_service02.png);}
#connected-service .connected-service-list .list03 h3{background-image:url(/resource/image/moe/ico_connected_service03.png);}
#connected-service .connected-service-list .list04 h3{background-image:url(/resource/image/moe/ico_connected_service04.png);}
#connected-service .connected-service-list p{margin-top:10px; color:#555; font-size:16px; font-weight:400; letter-spacing:-0.5px; word-break:keep-all;}
#connected-service .connected-service-list span{display:block; width:22px; height:18px; margin-top:58px; margin-left:auto; overflow:hidden; white-space:nowrap; text-indent:100%; background:url(/resource/image/moe/ico_edu_service_arrow.png) no-repeat; transition:all 0.3s ease;}
#connected-service .connected-service-list li:nth-child(odd):hover a div{background-color:#f0f6ff; box-shadow:0 15px 30px rgba(16, 79, 197, 0.08);}
#connected-service .connected-service-list li:nth-child(even):hover a div,
#connected-service .connected-service-list li:nth-child(even) a:focus-visible div{background-color:#e8f0fb; box-shadow:0 15px 30px rgba(16, 79, 197, 0.12);}

#connected-service .connected-service-list a:focus-visible {transform:translateY(-8px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #1a56db;}
#connected-service .connected-service-list li:nth-child(odd) a:focus-visible div{background-color:#f0f6ff; box-shadow:0 15px 30px rgba(16, 79, 197, 0.08);}
#connected-service .connected-service-list li:nth-child(even) a:focus-visible div{background-color:#e8f0fb; box-shadow:0 15px 30px rgba(16, 79, 197, 0.12);}
#connected-service .connected-service-list a:focus-visible h3{color:#104fc5;}
#connected-service .connected-service-list a:focus-visible span{transform:translateX(10px); background:url(/resource/image/moe/ico_edu_service_arrow_hover.png) no-repeat;}


@media screen and (max-width:1650px) {
    #connected-service .inr:before{left:0;}
}
@media screen and (max-width:1400px) {
    #connected-service .inr{padding:100px 40px;}
    #connected-service .connected-service-list ul{gap:25px;}
}
@media screen and (max-width:1300px) {
    #connected-service .connected-service-list div{padding:60px 30px 40px;}
    #connected-service .connected-service-list h3{font-size:28px;}
}
@media screen and (max-width:1200px) {
    #connected-service:before{bottom:35px; width:373px; height:175px; background-size:cover;}
    #connected-service:after{top:45px; width:147px; height:298px; background-size:cover;}
    #connected-service .inr:before{left:30px; width:154px; height:154px; background-size:cover;}
    #connected-service .inr{padding:80px 30px;}
    #connected-service .connected-service-list{margin-top:40px;}
    #connected-service .connected-service-list h3{font-size:25px;}
}
@media screen and (max-width:1100px) {
    #connected-service .connected-service-list ul{gap:0 25px;}
    #connected-service .connected-service-list li{flex:0 0 calc((100% - 25px) / 2);}
    #connected-service .connected-service-list li:nth-child(even){margin-top:30px;}
    #connected-service .connected-service-list div{position:relative; height:auto; padding:40px;}
    #connected-service .connected-service-list span{position:absolute; right:40px; bottom:40px; margin:0;}
}
@media screen and (max-width:900px) {
    #connected-service:after{width:117px; height:237px;}
    #connected-service .inr:before{width:125px; height:125px;}
    #connected-service:before{width:323px; height:150px;}
    #connected-service .connected-service-list div{padding:30px 35px;}
    #connected-service .connected-service-list h3{padding-top:70px; font-size:22px; background-image:none !important;}
    #connected-service .connected-service-list div{position:relative;}
    #connected-service .connected-service-list div:before{content:''; display:block; position:absolute; left:35px; top:30px; background-repeat:no-repeat; background-size:cover;}
    #connected-service .connected-service-list .list01:before{width:50px; height:47px; background-image:url(/resource/image/moe/ico_connected_service01.png);}
    #connected-service .connected-service-list .list02:before{width:68px; height:47px; background-image:url(/resource/image/moe/ico_connected_service02.png);}
    #connected-service .connected-service-list .list03:before{width:59px; height:50px; background-image:url(/resource/image/moe/ico_connected_service03.png);}
    #connected-service .connected-service-list .list04:before{width:55px; height:47px; background-image:url(/resource/image/moe/ico_connected_service04.png);}
    #connected-service .connected-service-list span{width:20px; height:16px; right:35px; bottom:35px; background-size:cover;}
}
@media screen and (max-width:768px) {
    #connected-service .inr{padding:50px 20px 70px;}
    #connected-service .connected-service-list div{padding:30px;}
    #connected-service .connected-service-list div:before{left:30px;}
    #connected-service .connected-service-list li:nth-child(even){margin-top:20px;}
    #connected-service .connected-service-list ul{gap:0 20px;}
    #connected-service .connected-service-list li{flex:0 0 calc((100% - 20px) / 2);}
    #connected-service .connected-service-list h3{font-size:20px;}
    #connected-service .connected-service-list p{font-size:15px;}
    #connected-service .connected-service-list span{right:30px; bottom:30px;}
}
@media screen and (max-width:640px) {
    #connected-service .connected-service-list span{display:none;}
}
@media screen and (max-width:530px) {
    #connected-service:after{top:25px; width:87px; height:207px;}
    #connected-service .inr:before{top:10px; left:10px; width:95px; height:95px;}
    #connected-service:before{left:20px; bottom:15px; width:263px; height:123px;}
    #connected-service .connected-service-list div{padding:30px 30px 30px 130px; border-radius:20px;}
    #connected-service .connected-service-list .list01:before{left:40px;}
    #connected-service .connected-service-list .list03:before{left:35px;}
    #connected-service .connected-service-list .list04:before{left:40px;}
    #connected-service .connected-service-list ul{gap:20px;}
    #connected-service .connected-service-list li{flex:0 0 100%;}
    #connected-service .connected-service-list li:nth-child(even){margin-top:0;}
    #connected-service .connected-service-list h3{padding-top:0; font-size:18px;}
    #connected-service .connected-service-list span{display:block; top:50%; transform:translateY(-50%);}
}
@media screen and (max-width:500px){
    #connected-service .inr{padding:50px 10px 70px;}
}
@media screen and (max-width:430px) {
    #connected-service .connected-service-list span{display:none;}
}

@keyframes float-left-right {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(15px); }
}

@keyframes float-up-down {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #connected-service:before,
    #connected-service:after {
        animation: none;
    }
}

/*바로가기 배너*/
#go-banner{position:relative; height:300px; background:url(/resource/image/moe/bg_go_banner.jpg) no-repeat center; background-size:cover; /*overflow:hidden;*/}
#go-banner:before{content:''; display:block; position:absolute; left:0; top:0; width:533px; height:300px; background:url(/resource/image/moe/bg_go_banner01.png) no-repeat;}
#go-banner:after{content:''; display:block; position:absolute; right:0; top:0; width:409px; height:300px; background:url(/resource/image/moe/bg_go_banner02.png) no-repeat;}
#go-banner .inr{display:flex; justify-content:center; align-items:center;}
#go-banner .tit{flex:1; position:relative; z-index:1;}
#main #go-banner .tit h2{margin-top:0 !important; color:#222; font-size:42px; font-weight:700;}
#main #go-banner .tit p{margin-top:20px; color:#222; font-size:19px; font-weight:600; word-break:keep-all;}
#go-banner .tit .btn-go{display:inline-flex; justify-content:center; align-items:center; position:relative; width:310px; height:54px; padding:10px 20px; border:1px solid #222; background-color:#222; border-radius:50px; box-sizing:border-box; overflow:hidden;  transition:background-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
#go-banner .text-wrapper{position:relative; height:21px; overflow:hidden; z-index:2; display:flex; flex-direction:column; }
#go-banner .tit .button-text{position:relative; font-size:18px; font-weight:700; transition:transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); white-space:nowrap;}
#go-banner .button-text.link{color:#fff;}
#go-banner .button-text.hover{color:#fff;}
section[id$="-course"] .course-more:focus-visible,
#go-banner .tit .btn-go:focus-visible{background:linear-gradient(135deg, #222 0%, #333 100%); border-color:#222; box-shadow:0 12px 30px rgba(34, 34, 34, 0.25); outline:2px dashed #104fbf; outline-offset:3px;}
section[id$="-course"] .course-more:focus-visible span,
#go-banner .tit .btn-go:focus-visible span{color:#fff;}
section[id$="-course"] .course-more:focus-visible .button-text,
#go-banner .tit .btn-go:focus-visible .button-text{transform:translateY(-100%);}

.go-area{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; margin-top:30px;}
.link-go .custom-select-wrap{width:310px;}
.link-go .select-trigger{height:54px; color:#222; font-family:'Pretendard'; border:1px solid #222; border-radius:50px; background-image:url(/resource/image/moe/ico_select_arrow_black.png); background-repeat:no-repeat; background-position:right 15px center; transition:background-color 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.link-go .select-trigger:hover,
.link-go .select-trigger[aria-expanded="true"]{background-color:rgba(255, 255, 255, .3);}
.link-go .select-trigger:focus-visible{outline:2px dashed #104fbf; outline-offset:3px; background-color:rgba(0, 0, 0, 0.04);}
.link-go .select-options{top:53px; height:172px; text-align:left; border-radius:25px; overflow-y:auto;}
.link-go .select-options::-webkit-scrollbar{width:6px;}
.link-go .select-options::-webkit-scrollbar-thumb{background-color:#c1c5cc; border-radius:10px;}
.link-go .select-options::-webkit-scrollbar-track{background-color:transparent; margin:15px 0;}
.link-go .select-options li{padding-right:15px;}

@media screen and (max-width:1400px) {
    #go-banner:before,
    #go-banner:after{opacity:.5; background-size:cover;}
}
@media screen and (max-width:1300px) {
    #go-banner{height:250px;}
    #go-banner:before{width:445px; height:250px;}
    #go-banner:after{width:349px; height:250px;}
    #main #go-banner .tit h2{font-size:38px;}
    #main #go-banner .tit p{font-size:18px;}
    #go-banner .tit .button-text{font-size:17px;}
}
@media screen and (max-width:1200px) {
    #main #go-banner .tit h2{font-size:35px;}
    #main #go-banner .tit p{margin-top:15px; font-size:17px;}
    #go-banner .tit .button-text{font-size:16px;}
    .go-area{margin-top:25px;}
}
@media screen and (max-width:1024px) {
    #go-banner:before{left:-10%;}
    #go-banner:after{right:-10%;}
    #main #go-banner .tit h2{font-size:32px;}
    #main #go-banner .tit p{font-size:16px;}
    #go-banner .tit .btn-go,
    .link-go .select-trigger{height:50px;}
    .link-go .select-options{top:49px;}
}
@media screen and (max-width:768px) {
    #go-banner{height:auto;}
    #go-banner .inr{padding:38px 20px;}
    #go-banner:before{width:373px; height:210px; opacity:.3;}
    #go-banner:after{width:279px; height:210px; opacity:.3;}
    #main #go-banner .tit h2{font-size:28px;}
    #main #go-banner .tit p{font-size:15px;}
    .go-area{margin-top:20px;}
}
@media screen and (max-width:640px) {
    #go-banner:after{display:none;}
}
@media screen and (max-width:500px) {
    #main #go-banner .tit h2{font-size:25px;}
    #go-banner .text-wrapper{height:17px;}
    #go-banner .tit .btn-go,
    .link-go .select-trigger{height:45px;}
    .link-go .select-options{top:44px;}
    .select-options li,
    #go-banner .tit .button-text{font-size:15px;}
}
@media screen and (max-width:400px) {
    #main #go-banner .tit h2{font-size:22px;}
}

@media (prefers-reduced-motion: reduce) {

}

@media (hover: hover) and (pointer: fine) {
    /* 검색창 */
    .select-options li:hover {background:#e8f0fb; color:#104fc5;}

    /* 학습 서비스 */
    #edu-service .edu-service-list li:hover a{transform:translateY(-8px);}
    #edu-service .edu-service-list li:hover a div{box-shadow:0 15px 30px rgba(16,79,197,0.15);}
    #edu-service .edu-service-list li:hover a h3{color:#104fc5;}
    #edu-service .edu-service-list li:hover a span{transform:translateY(-50%) translateX(5px); background:url(/resource/image/moe/ico_edu_service_arrow_hover.png) no-repeat; background-size:cover;}

    /* 나의 학습 (상단 리스트) */
    .my-learning-list ul li:hover > a{transform:translateY(-6px); box-shadow:0 12px 24px rgba(16,79,197,0.12); background-color:#f8faff;}
    .my-learning-list ul li:hover > a p{color:#104fc5;}

    /* 전체보기 둥근 텍스트 버튼 */
    .rotating-link-wrap:hover .rotating-link {transform:translateY(-6px); box-shadow:0 12px 24px rgba(16,79,197,0.12);}
    .rotating-link-wrap:hover .rotating-text {animation-play-state:paused;}

    /* 학습 진행률 / 인기, 신규 스와이퍼 카드 */
    #my-learning .my-learning-swiper li:hover a{transform:translateY(-6px); box-shadow:0 12px 24px rgba(16,79,197,0.12);}
    #my-learning .my-learning-swiper a:hover h4{color:#104fc5;}
    section[id$="-course"] .course-swiper li:hover .course-card{transform:translateY(-6px); box-shadow:0 12px 24px rgba(16, 79, 197, 0.12);}
    section[id$="-course"] .course-swiper .card-link-area:hover .img img{transform: translate(-50%, -50%) scale(1.08);}
    section[id$="-course"] .course-swiper .card-link-area:hover .tit h3{color:#104fbf;}
    section[id$="-course"] .course-swiper .register:hover{background:#2856d1; box-shadow:0 8px 20px rgba(56, 106, 241, 0.3); transform:translateY(-2px);}
    section[id$="-course"] .course-swiper .register:hover:after{bottom:-10px;}
    .toggle-info:hover .toggle-info-btn{border-color:#386af1; background:#f8faff; color:#386af1; box-shadow:0 6px 16px rgba(56, 106, 241, 0.2); transform:translateY(-2px);}
    .toggle-info:hover .toggle-info-btn:before{transform:rotate(90deg);}

    /* 연계 서비스 */
    #connected-service .connected-service-list li:hover a{transform:translateY(-8px);}
    #connected-service .connected-service-list li:nth-child(odd):hover a div{background-color:#f0f6ff; box-shadow:0 15px 30px rgba(16, 79, 197, 0.08);}
    #connected-service .connected-service-list li:nth-child(even):hover a div{background-color:#e8f0fb; box-shadow:0 15px 30px rgba(16, 79, 197, 0.12);}
    #connected-service .connected-service-list a:hover h3{color:#104fc5;}
    #connected-service .connected-service-list a:hover span{transform:translateY(-8px) translateX(10px); background-image:url(/resource/image/moe/ico_edu_service_arrow_hover.png);}

    /* 버튼류 (더보기, 바로가기) */
    section[id$="-course"] .course-more:hover,
    #go-banner .tit .btn-go:hover{background:linear-gradient(135deg, #222 0%, #333 100%); border-color:#222; box-shadow:0 12px 30px rgba(34, 34, 34, 0.25);}
    #new-course .course-more:hover{background:linear-gradient(135deg, #3c6df1 0%, #2856d1 100%); border-color:#3c6df1; box-shadow:0 12px 30px rgba(60, 109, 241, 0.25);}
    section[id$="-course"] .course-more:hover span,
    #go-banner .tit .btn-go:hover span{color:#fff;}
    section[id$="-course"] .course-more:hover .button-text,
    #go-banner .tit .btn-go:hover .button-text{transform:translateY(-100%);}
}

/*게시글 없음*/
.no-data{width:100%; text-align:center;}
.no-data p{position:relative; padding-top:110px; color:#333; font-size:20px; font-weight:700; letter-spacing:-0.1px;}
.no-data p:before{content:''; display:block; position:absolute; left:50%; top:0; width:95px; height:90px; background:url(/resource/image/moe/no_data_progress.png) no-repeat; transform:translateX(-50%);}
.no-data .no-data-txt > span{display:block; margin-top:10px; color:#555; font-size:16px; font-weight:500; letter-spacing:-0.1px; word-break:keep-all;}
#my-learning .no-data .btn-go{display:inline-flex; justify-content:center; align-items:center; position:relative; width:180px; height:52px; margin-top:20px; padding:10px; border:1px solid #222; border-radius:50px; background:none; box-sizing:border-box; overflow:hidden; transition:background-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.no-data .text-wrapper{position:relative; height:21px; overflow:hidden; z-index:2; display:flex; flex-direction:column;}
.no-data .button-text{position:relative; font-size:17px; font-weight:700; transition:transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); white-space:nowrap;}
.no-data .button-text.link{color:#222;}
.no-data .button-text.hover{color:#fff;}
#my-learning .no-data .btn-go:hover,
#my-learning .no-data .btn-go:focus-visible{background:linear-gradient(135deg, #222 0%, #333 100%); border-color:#222; box-shadow:0 12px 30px rgba(34, 34, 34, 0.25);}
#my-learning .no-data .btn-go:focus-visible{outline:2px dashed #104fbf; outline-offset:3px;}
#my-learning .no-data .btn-go:hover span,
#my-learning .no-data .btn-go:focus-visible span {color:#fff;}
#my-learning .no-data .btn-go:hover .button-text,
#my-learning .no-data .btn-go:focus-visible .button-text{transform:translateY(-100%);}
.hide-ui{display:none !important;}

section[id$="-course"] .no-data{margin:80px 0 30px;}
section[id$="-course"] .no-data p:before{content:''; display:block; position:absolute; left:50%; top:0; width:97px; height:92px; background:url(/resource/image/moe/no_data_course.png) no-repeat; transform:translateX(-50%);}
section[id$="-course"] .no-data .no-data-txt > span{margin-top:20px;}
section[id$="-course"] .no-data .no-data-txt > span + span{margin-top:5px;}

@media screen and (max-width:1024px) {
    .no-data p{font-size:18px;}
    .no-data .button-text{font-size:17px;}
}
@media screen and (max-width:768px) {
    .no-data p{padding-top:90px; font-size:17px;}
    .no-data p:before{width:75px; height:71px; background-size:cover;}
    section[id$="-course"] .no-data p:before{width:77px; height:72px; background-size:cover;}
    .no-data .no-data-txt > span{font-size:15px;}
    .no-data .btn-go{width:160px; height:48px;}
    .no-data .button-text{font-size:16px;}
    section[id$="-course"] .no-data{margin:50px 0 0; padding-bottom:20px;}
}


/*intro*/
#intro-popup{position:fixed; left:0; top:0; width:100%; height:100%; min-height:100vh; z-index:999999999; overflow-y:auto; -webkit-overflow-scrolling:touch;}
#intro-popup .intro{display:flex; justify-content:center; align-items:center; position:relative; width:100%; min-height:100%; padding:80px 0; background:#e5efff; box-sizing:border-box;}
#intro-popup .intro .inr{display:flex; align-items:center; flex-direction:column; width:100%; max-width:1300px;}
#intro-popup .intro .tit{text-align:center;}
#intro-popup .intro .tit h2{color:#12245c; font-size:52px; font-weight:700; letter-spacing:-0.5px; word-break:keep-all;}
#intro-popup .intro .tit h2 span{color:#2563eb;}
#intro-popup .intro .foot{position:absolute; bottom:30px; color:#555; font-size:18px; font-weight:500; letter-spacing:-0.5px; word-break:keep-all;}
#intro-popup .intro ul{display:flex; justify-content:center; align-items:center; gap:50px 70px; margin-top:80px;}
#intro-popup .intro ul li{position:relative; width:100%;}
#intro-popup .intro ul a{display:block; position:relative; width:500px; height:470px; padding-top:40px; text-align:center; border-radius:50px; background:#343f7d; box-shadow:0 20px 50px rgba(18, 36, 92, 0.12); transition:transform 0.3s ease, box-shadow 0.3s ease; box-sizing:border-box;}
#intro-popup .intro ul a:before{content:''; display:block; position:absolute; left:50%; bottom:-24px; width:370px; height:232px; background-image:url(/resource/image/moe/img_intro.png); background-repeat:no-repeat; background-size:cover; transform:translateX(-50%);}
#intro-popup .intro ul li:hover a{transform:translateY(-8px); box-shadow:0 30px 60px rgba(18, 36, 92, 0.18);}
#intro-popup .intro ul .go-link02 a{border:2px solid rgba(255, 255, 255, 0.5); background:#4f46e5; box-shadow:0 24px 55px rgba(79, 70, 229, 0.35);}
#intro-popup .intro ul .go-link02 a:before{bottom:25px; width:420px; height:227px; background-image:url(/resource/image/moe/img_intro01.png);}
#intro-popup .intro ul .go-link02:hover a{box-shadow:0 32px 65px rgba(79, 70, 229, 0.45);}
#intro-popup .intro ul span{display:flex; align-items:center; height:41px;}
#intro-popup .intro ul span i{display:block; width:150px; height:41px; margin:0 auto; background-image:url(/resource/image/moe/intro_logo.png); background-repeat:no-repeat; background-size:cover; text-indent:100%; overflow:hidden; white-space:nowrap;}
#intro-popup .intro ul .go-link02 span i{background-image:url(/resource/image/moe/intro_logo01.png);}
#intro-popup .intro ul h3{margin-top:20px; color:#fff; font-size:32px; font-weight:700; letter-spacing:-0.5px;}
#intro-popup .intro ul em{font-style:normal; display:inline-block; margin-top:20px; padding:10px 25px; color:#343f7d; font-size:17px; font-weight:600; text-align:center; border-radius:50px; background:#fff; box-sizing:border-box; transition:background-color 0.3s ease, color 0.3s ease;}
#intro-popup .intro ul .go-link01 a:hover em{background:#12245c; color:#fff;}
#intro-popup .intro ul .go-link02 em{color:#4f46e5; font-weight:700; box-shadow:0 4px 14px rgba(0, 0, 0, 0.12)}
#intro-popup .intro ul .go-link02 a:hover em{background:#3730a3; color:#fff;}
#intro-popup button{position:fixed; top:30px; right:30px; background:none; z-index:10000; cursor:pointer;}
#intro-popup button span{display:block; width:36px; height:36px; background:url(/resource/image/moe/btn_intro_close.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}
html.intro-no-scroll,
body.intro-no-scroll{overflow:hidden !important; touch-action:none !important;}
#intro-popup .ico-point{position:absolute; top:-50px; right:-70px;}
#intro-popup .ico-point p{position:relative; padding-left:45px; padding-right:95px;}
#intro-popup .ico-point p:before{content:''; display:block; position:absolute; left:0; top:-18px; width:41px; height:38px; background:url(/resource/image/moe/ico_point01.png) no-repeat; background-size:cover;}
#intro-popup .ico-point p:after{content:''; display:block; position:absolute; right:0; top:5px; width:106px; height:108px; background:url(/resource/image/moe/ico_point02.png) no-repeat; background-size:cover;}
#intro-popup .ico-point i{display:block; width:192px; height:36px; background:url(/resource/image/moe/ico_point.png) no-repeat; background-size:cover; text-indent:100%; overflow:hidden; white-space:nowrap;}

@media screen and (max-width:1280px) {
    #intro-popup .intro .inr{max-width:100%; padding:0 30px; box-sizing:border-box;}
    #intro-popup .intro ul{gap:50px 40px;}
    #intro-popup .intro ul a{height:460px;}
    #intro-popup .intro .tit h2{font-size:48px;}
    #intro-popup .intro .foot{font-size:17px;}
    #intro-popup .intro ul h3{font-size:30px;}
    #intro-popup .intro ul .go-link02 a{box-shadow:0 20px 45px rgba(79, 70, 229, 0.32);}
    #intro-popup .intro ul .go-link02:hover a{box-shadow:0 26px 55px rgba(79, 70, 229, 0.42);}
    #intro-popup .ico-point{right:0; top:-45px;}
    #intro-popup .ico-point p{padding-left:35px; padding-right:60px;}
    #intro-popup .ico-point p:before{top:-14px; width:31px; height:29px;}
    #intro-popup .ico-point p:after{width:66px; height:67px;}
    #intro-popup .ico-point i{width:152px; height:28px;}
}
@media screen and (max-width:1100px) {
    #intro-popup .intro ul{gap:70px 30px; margin-top:50px;}
    #intro-popup .intro ul a{width:400px; height:410px; padding-top:30px; border-radius:30px;}
    #intro-popup .intro ul a:before{bottom:-23px; width:340px; height:213px;}
    #intro-popup .intro ul .go-link02 a{box-shadow:0 16px 36px rgba(79, 70, 229, 0.28);}
    #intro-popup .intro ul .go-link02 a:before{width:350px; height:189px;}
    #intro-popup .intro ul .go-link02:hover a{box-shadow:0 22px 45px rgba(79, 70, 229, 0.38);}
    #intro-popup .intro .tit h2{font-size:45px;}
    #intro-popup .intro .foot{font-size:17px;}
    #intro-popup .intro ul h3{margin-top:15px; font-size:28px;}
    #intro-popup .intro ul em{font-size:16px;}
    #intro-popup .ico-point{top:-35px;}
    #intro-popup .ico-point p{padding-left:28px; padding-right:45px;}
    #intro-popup .ico-point p:before{top:-4px; width:21px; height:20px;}
    #intro-popup .ico-point p:after{width:46px; height:47px;}
    #intro-popup .ico-point i{width:122px; height:23px;}
}
@media screen and (max-width:890px) {
    #intro-popup .intro ul{flex-direction:column; width:100%;}
    #intro-popup .intro ul span i{margin:0;}
    #intro-popup .intro ul a{width:100%; height:100%; padding:50px; text-align:left; box-sizing:border-box;}
    #intro-popup .intro ul a:before{left:auto; right:50px; transform:translateX(0);}
    #intro-popup .intro ul .go-link02 a{box-shadow:0 14px 30px rgba(79, 70, 229, 0.25);}
    #intro-popup .intro ul .go-link02:hover a{box-shadow:0 18px 38px rgba(79, 70, 229, 0.32);}
    #intro-popup .intro .tit h2{font-size:40px;}
    #intro-popup .intro .foot{font-size:16px;}
    #intro-popup .intro ul h3{font-size:25px;}
    #intro-popup .intro ul em{font-size:15px;}
    #intro-popup button span{width:28px; height:28px; background-size:cover;}
}
@media screen and (max-width:786px) {
    #intro-popup .intro ul{margin-top:40px;}
    #intro-popup .intro ul a{padding:30px;}
    #intro-popup .intro ul a:before{right:30px; bottom:-19px; width:280px; height:176px;}
    #intro-popup .intro ul .go-link02 a{box-shadow:0 12px 25px rgba(79, 70, 229, 0.22);}
    #intro-popup .intro ul .go-link02 a:before{bottom:auto; top:50%; width:300px; height:162px; transform:translateY(-50%);}
    #intro-popup .intro .tit h2{font-size:35px;}
    #intro-popup .intro .foot{font-size:15px;}
    #intro-popup .intro ul h3{font-size:22px;}
}
@media screen and (max-width:640px) {
    #intro-popup .intro ul{gap:55px 20px;}
    #intro-popup .intro ul a{border-radius:20px;}
    #intro-popup .intro ul a:before{bottom:-12px; width:190px; height:119px;}
    #intro-popup .intro ul .go-link02 a{border-width:1.5px; box-shadow:0 10px 20px rgba(79, 70, 229, 0.2);}
    #intro-popup .intro ul .go-link02 a:before{width:210px; height:113px;}
    #intro-popup .intro .tit h2{font-size:32px;}
    #intro-popup .intro ul h3{font-size:20px;}
}
@media screen and (max-width:530px) {
    #intro-popup .intro ul span i{margin:0 auto;}
    #intro-popup .intro ul{gap:50px 20px;}
    #intro-popup .intro ul a{text-align:center;}
    #intro-popup .intro ul a:before{display:none;}
    #intro-popup .intro ul .go-link02 a{box-shadow:0 8px 16px rgba(79, 70, 229, 0.18);}
    #intro-popup .intro ul .go-link02:hover a{box-shadow:0 10px 20px rgba(79, 70, 229, 0.24);}
    #intro-popup .intro .tit h2{font-size:30px;}
    #intro-popup .intro ul h3{font-size:18px;}
}