@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

* {margin: 0; padding: 0; box-sizing: border-box;}
a > * {line-height: 0;}
img {border: medium none;}
html, body {font-family: 'Noto Sans KR', 'Noto Sans Korean', 'Noto Sans KR', 돋움, Dotum, Arial, Helvetica, sans-serif; font-size: 16px; letter-spacing: -0.025em; -ms-overflow-style: none; background: #222;}
button, a {color: #fff; text-decoration: none; cursor: pointer; transition: all 0.3s ease-in-out; border: 0;}
div, p {box-sizing: border-box;}
a:hover, a:active, a:focus {text-decoration: none;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p {padding: 0; margin: 0; font-family: 'Noto Sans KR', 'Noto Sans Korean';}
ul, ol, li {list-style: none;}
pre {white-space: pre-wrap; background: none; border: none; padding: 0; margin: 0; font-family: 'Noto Sans kr', 'Exo 2'; letter-spacing: -0.015em; font-size: 16px; line-height: 180%;}
table {border-spacing: 0; border-collapse: collapse;}
progress {appearance: none;}
input[type='file'], input[type='radio'], input[type='checkbox'] {cursor: pointer;}
input[type='checkbox']:focus, input[type='file']:focus, input[type='radio']:focus {outline: none;}
input[type='text'] {border: 1px solid #ddd; padding: 8px 12px; font-size: 14px; border-radius: 2px; font-weight: 500;}
:root {
    --flex-separation-color: #a2ed28;
    --flex-btn-bg01: #2c2c2c;
    --flex-btn-bg02: #3a3a3a;
    --flex-f-p-color: #9a9a9a;
    --flex-f-h-color: #a3c958;
    --flex-f-w-color: #dedede;
    --flex-line-color: #4f4f4a;
    --dark-bg: #222;
    --status--step01: #ffb50f;
    --status--step02: #38dcfc;
    --status--step03: #ff5342;
    --lg-pd : 80px; 
    --b-rd : 8px;
}
::selection {
    background-color: #aeff2c;
    color: #121212;
}
body::-webkit-scrollbar {width: 7px; background: #5f5f5f;}
body::-webkit-scrollbar-thumb { border-radius: 7px;  background: var(--flex-separation-color);}

div::-webkit-scrollbar {width: 4px; height: 4px; background: #5f5f5f;  }
div::-webkit-scrollbar-thumb { border-radius: 4px; background: var(--flex-separation-color);}

.mobView {display: none;}
.topNavi {background: #333; }
.topNavi .inHd {padding: 0 var(--lg-pd); display: flex; }
.topNavi .inHd > div:first-of-type {display: flex; flex: 1;} 
.topNavi .inHd > div:first-of-type a {height: 40px; color: #fff; display: flex; justify-content: center; align-items: center; padding: 0 28px; font-size: 14px; opacity: 0.8;}
.topNavi .inHd > div:first-of-type a:hover {opacity: 1;}
.topNavi .inHd > div:first-of-type a.has {background: #222; opacity: 1; }
.topNavi .inHd > div:last-of-type {display: flex; align-items: center;}
#addToHomeScreen {color: var(--flex-f-h-color); font-size: 14px; display: flex;  gap: 6px; align-items: center;}
#addToHomeScreen::before {content: '\f0ed'; font: var(--fa-font-solid); font-size: 13px;}
#addToHomeScreen:hover { color: var(--flex-separation-color);}

header {width: 100%; padding: 24px var(--lg-pd) 24px var(--lg-pd); display: flex; flex-direction: column;}
header > .btmNav {display: flex; width: 100%; justify-content: space-between; align-items: flex-end;}
header h1 {max-width: 160px; font-size: 1.356rem;}
header h1 a, header h1 img {width: 100%;}
header > .btmNav nav {display: flex; gap: 20px; font-size: 18px; font-weight: 600; color: #232323;}
header > .btmNav nav a:hover {color: var(--flex-separation-color);}
header .btmNav > div:first-of-type {display: flex; gap: 30px;}
header .btmNav > div:nth-of-type(2) {display: flex; gap: 12px; align-items: center ;}
header .btmNav > div:nth-of-type(2) > strong {color: #fff; font-weight: 400; font-weight: 17px; }
header .btmNav > div:nth-of-type(2) > strong > span {font-size: 15px; opacity: 0.8;}
header .btmNav > div:nth-of-type(2) a, 
header .btmNav > div:nth-of-type(2) button {background: var(--flex-separation-color); border-radius: 100px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; width: 135px; height: 39px; color: var(--dark-bg);}
header .btmNav > div:nth-of-type(2) a {background: var(--status--step01);}
header .btmNav > button:hover {opacity: 0.9;}
footer {width: 100%; background: #161515; padding: 2.875rem 0 3.375rem 0; position: relative; z-index: 9;}
footer select {appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; background: transparent url('https://aams.innocampus.kr/application/views/Client/aams/Images/sel_arrow.svg') no-repeat calc(100% - 1.18rem) 50%;}
footer > .footer_inner {max-width: 1200px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1.56rem;}
.footer_inner > div {display: flex; position: relative; align-items: flex-end;}
.footer_inner > div > select {position: absolute; top: -0.5rem; right: 0; width: 13.75rem; height: 2.87rem; padding: 0 1.18rem; color: #ababab; border-radius: 0.25rem; border: 1px solid #5f5f5f;}
.footer_inner > div span {margin-right: 2.18rem; display: flex; gap: 1rem; align-items: flex-end;}
.footer_inner > div span svg path {fill: #a5a5a5;}
.footer_inner > div a {color: #97959d; font-size: 1.06rem; font-weight: 600; letter-spacing: 0; cursor: pointer;}
.footer_inner > div > a:nth-of-type(1) {margin-right: 1.125rem;}
.footer_inner > p {color: #fff; opacity: 0.5; line-height: 152%; font-weight: 400;}
.footer_inner > p > em {font-style: normal;}
.footer_inner > p span {opacity: 0.5; padding: 0.35rem; font-weight: 200;}

header #ham {display: none;}

main {max-width: 1920px;}
.area01, .area02, .area03 {position: relative;}
.area01::before, .area02::before, .area03::before {position: absolute; top: 3px; left: 0;}
em.area01::before, em.area02::before, em.area03::before {top: 0;}
section:last-of-type {padding-bottom: 110px;}
.in {max-width: 1200px; margin: 0 auto;}
.cardWrap {padding: 60px 0 20px 0;}
.cardWrap > .in {display: flex; width: 100%; flex-wrap: wrap; gap: 24px 14px;}
.cardWrap > .in > h2 {width: 100%; color: var(--flex-f-h-color);}

.cardWrap > .in > div {display: flex; flex-direction: column; width: calc(25% - 14px * 3 / 4); cursor: pointer;}
.cardWrap > .in > div .thumb {position: relative; width: 100%; padding-bottom: 55%; overflow: hidden; border-radius: 8px;}
.cardWrap > .in > div .thumb > img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}
.cardWrap > .in > div > p {font-size: 16px; font-weight: 500; color: var(--flex-f-p-color); letter-spacing: -0.01em; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.3s; padding: 10px 0 5px 0;}

/*order*/
.cardWrap > .in > h2 {order: -99;}
.cardWrap > .in > div.cs6666 {order: -30;}
.cardWrap > .in > div.cs6667 {order: -29;}
.cardWrap > .in > div.cs6668 {order: -28;}
.cardWrap > .in > div.cs6669 {order: -27;}


.modalWrap {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); z-index: 1000;}
.modalWrap.active {display: flex;}
.modalContent {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 94%; max-width: 720px; border-radius: 10px; background: #fff;}
#youtubeModal .modalContent {max-width: 1240px;}
#pwChangeModal .modalContent {max-width: 500px; }
.modalContent #modal-textm, .modalContent .modalCon {background: #fff; padding: 18px; max-height: 86vh; overflow-y: auto;}
.modalHd {font-size: 20px; font-weight: 700; padding: 10px 0 26px 0; display: block;}

.closeModal {position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; color: #000; opacity: 0.6; transition: 0.4s;}
.closeModal:hover {opacity: 1;}

.modalContent .modalCon pre, #modal-text pre {color: #787878;}
.modalContent .modalCon pre strong, #modal-text pre strong {color: #121212;}
#terms-data {display: none;}
.youtubeFrame {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;}
.youtubeFrame iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}

#pwChangeModal .modalHd > span {font-size: 16px; color: #787878; font-weight: 500;}
#pwChangeModal .modalHd,
#loginModal .modalHd {text-align: center; padding-top: 38px; padding-bottom: 0;}
#loginModal .modalContent {max-width: 520px; overflow: visible;}
#pwChangeModal .closeModal, #loginModal .closeModal,
#youtubeModal .closeModal, #loginModal .closeModal {top: -10px; right: 50%; transform: translate(50%, -100%); color: #fff; z-index: 9999; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 800; background: transparent; border: 2px solid #ffffff9c; opacity: 1; width: 33px; height: 33px; padding: 0; border-radius: 50%; transition: 0.3s;}
#youtubeModal .closeModal {top: -15px;}

.modalWrap .textInfo {background: #f1f1f1; width: 100%; max-width: 450px; border-radius: 10px; padding: 18px; border: 1px solid #ddd;}
.modalWrap .textInfo b {font-weight: 600; display: block;}
.modalWrap .textInfo p {color: #343434; line-height: 148%; font-size: 15px; padding-top: 3px; padding-bottom: 3px;}

b #loginModal .closeModal:hover {background: var(--flex-separation-color); color: #121212; border-color: transparent;}
#outLogin {display: flex; flex-direction: column; align-items: center; padding: 18px 20px 30px 20px; gap: 10px;}
#outLogin input {width: 100%; max-width: 450px; font-size: 18px; font-weight: 500; padding: 19px 30px; border: none; border: 1px solid #ddd; border-radius: 10px; cursor: pointer; outline: none; color: #121212; transition: 0.3s;}
#pwChangeModal input[type='button'],
#outLogin input[type='submit'] {background: var(--flex-separation-color); color: #222; font-weight: 600;}
#pwChangeModal input[type='button']:hover,
#outLogin input[type='submit']:hover {background: var(--flex-f-h-color);}

#outLogin input:not([type='submit']):focus, #outLogin input:not([type='submit']):active {border-color: var(--flex-f-h-color); color: #222;}
#outLogin > a {font-size: 16px; color: #787878; padding-top: 5px; transition: 0.3s; display: none;}
#outLogin > a:hover {color: #232323; font-weight: 500;}
.ourServices,
.mainSliderWrap {width: 100%;}
.ourServices .swiper:has(.swiper-wrapper > .swiper-slide:first-of-type:last-of-type) .swiperControl,
.mainSliderWrap .swiper:has(.swiper-wrapper > .swiper-slide:first-of-type:last-of-type) .swiperControl {display: none;}
.ourServices .swiper:has(.swiper-wrapper > .swiper-slide:first-of-type:last-of-type) .swiper-wrapper,
.mainSliderWrap .swiper:has(.swiper-wrapper > .swiper-slide:first-of-type:last-of-type) .swiper-wrapper {justify-content: center;}
.ourServices .swiper-wrapper > .swiper-slide:only-of-type,
.mainSliderWrap .swiper-wrapper > .swiper-slide:only-of-type,
.ourServices .swiper:has(.swiper-wrapper > .swiper-slide:first-of-type:last-of-type) .swiper-slide,
.mainSliderWrap .swiper:has(.swiper-wrapper > .swiper-slide:first-of-type:last-of-type) .swiper-slide {margin-left: auto; margin-right: auto; opacity: 1;}
.ourServices .swiper-pagination-bullet-active,
.mainSliderWrap .swiper-pagination-bullet-active {background: var(--flex-separation-color);}
.ourServices .swiperControl > .next, 
.ourServices .swiperControl > .prev,
.mainSliderWrap .swiperControl > .next, 
.mainSliderWrap .swiperControl > .prev {position: absolute; top: 50%; z-index: 9; font-size: 58px; color: #fff; cursor: pointer; opacity: 0.7; transition: 0.3s;}
.ourServices .swiperControl > .next, 
.mainSliderWrap .swiperControl > .next {right: 15.5%; transform: translateY(-50%);}
.ourServices .swiperControl > .prev,
.mainSliderWrap .swiperControl > .prev {transform: rotate(180deg) translateY(50%); left: 15.5%;}

.ourServices .swiperControl > .next:hover, 
.ourServices .swiperControl > .prev:hover,
.mainSliderWrap .swiperControl > .next:hover, 
.mainSliderWrap .swiperControl > .prev:hover {opacity: 1;}

.mainSliderWrap .swiper-slide {flex-shrink: 0; padding-bottom: 450px; position: relative; display: block; color: #fff; border-radius: 14px; overflow: hidden; opacity: 0.5; cursor: pointer; max-width:1200px;}
.ourServices .swiper-slide {flex-shrink: 0; padding-bottom: 23.5%; position: relative; display: block; color: #fff; border-radius: 14px; overflow: hidden; opacity: 0.5; cursor: pointer; max-width:1200px;}

.ourServices .swiper-slide::after,
.mainSliderWrap .swiper-slide::after {content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; background: #000; opacity: 0; transition: 0.3s; }

.ourServices .swiper-slide:hover::after,
.mainSliderWrap .swiper-slide:hover::after {opacity: 0.2;}
.ourServices .swiper-slide.swiper-slide-active,
.mainSliderWrap .swiper-slide.swiper-slide-active {opacity: 1;}
.ourServices .swiper-slide img,
.mainSliderWrap .swiper-slide img {position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%;}
#hrdflex_login.gn2up > .login_copy h1 > strong {font-size: 48px;}
#hrdflex_login.gn2up > .login_copy h1 > strong b {color: var(--flex-separation-color);}
#hrdflex_login.gn2up > .login_copy h1 > strong::after {content: 'FLEX'; padding-left: 12px;}

@media (max-width: 1580px) {
    .ourServices .swiperControl > .next { right: 4.5%; font-size: 48px; }
    .ourServices .swiperControl > .prev { left: 4.5%; font-size: 48px; }
}
@media (max-width: 1468px) {
    .ourServices .swiperControl > .next { right: 10px; font-size: 42px; }
    .ourServices .swiperControl > .prev { left: 10px; font-size: 42px; }
}


@media (max-width: 1240px) {
    .in {padding: 0 24px; }
    .swiper-slide {padding-bottom: 37%;}
    .mainSliderWrap .swiperControl > .next { right: 2.5%; font-size: 5vw; }
    .mainSliderWrap .swiperControl > .prev { left: 2.5%; font-size: 5vw; }

    .ourServices .swiperControl > .next { right: 10px; font-size: 30px; }
    .ourServices .swiperControl > .prev { left: 10px; font-size: 30px; }
    .ourServices .swiper-slide {padding-bottom: 32%;}
    
}
@media (min-width: 991px) {
    header .btmNav > .r_hd {position: absolute; right: var(--lg-pd); top:10px; }
    header .btmNav > .r_hd #addToHomeScreen::after {content: 'YOFLEX 앱 다운로드';}
}

@media (max-width: 990px) {
    .mobView {display: block;}
    body #wrap { position: relative; overflow-y: hidden;}
    body #wrap::after {content: '';  width: 100vw; height: 100vh; z-index: 0; visibility: hidden; top: 0; left: 0; position: absolute; display: block; background: #000; transition: all 0.4s ease; opacity: 0;}
    .topNavi  {display: none;}
    header { padding: 20px 24px; }
    body.hamOn {overflow: hidden;}
    body header .btmNav > div:nth-of-type(2),
    body.hamOn header h1,
    header > .btmNav nav { display: none; }   
    header > .btmNav {align-items: center;} 
    header > .btmNav .r_hd {display: flex; gap: 16px; align-items: center ;}

    header .btmNav > .r_hd #addToHomeScreen {background: var(--flex-separation-color); display: flex; justify-content: center; align-items: center ; 
    height: 27px; padding: 0 14px; border-radius: 5px; }
    header .btmNav > .r_hd #addToHomeScreen::before { display: none;} 
    .hamOn  header .btmNav > .r_hd #addToHomeScreen {display: none !important;}
    header .btmNav > .r_hd #addToHomeScreen::after {content: 'APP 다운로드'; font-size: 14px; font-weight: 600; color: #121212;} 
    body header #ham {display: flex; z-index: 9999; background: transparent; width: 24px;height: 20px;position: relative;  display: flex; flex-direction: column; justify-content: space-between;}
    
    
    body header #ham span { width: 100%; height: 3px; transition: all 0.3s ease; transform-origin: center; background: #fff; border-radius: 4px;}
    body.hamOn #wrap::after {position: fixed;visibility: visible; z-index: 5; background: #000; opacity :0.85;}
    body.hamOn #ham {position: fixed; top: 20px; right: 24px; z-index: 9999;}
    body.hamOn #ham span:nth-child(1) {transform: translateY(8.5px) rotate(45deg);}
    body.hamOn #ham span:nth-child(2) {opacity: 0;transform: scaleX(0); }
    body.hamOn #ham span:nth-child(3) {transform: translateY(-8.5px) rotate(-45deg);}   
    body.hamOn header .btmNav {position: fixed; display: flex; justify-content: center; align-items: center; top: 0; left:0; z-index: 9; width: 100%; height: 100vh; flex-direction: column; gap: 23px; }  
    body.hamOn header > .btmNav nav {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px;}
    body.hamOn header > .btmNav nav a:last-of-type {order: -1; }
    body.hamOn header .btmNav > div:nth-of-type(2) {display: flex; flex-direction: column; width: 100%; justify-content: center;  align-items: center; gap:14px;} 
    body.hamOn header .btmNav > div:nth-of-type(2) a, 
    body.hamOn header .btmNav > div:nth-of-type(2) button {width: 35%; height: 44px;}
    body.hamOn header .btmNav > div:nth-of-type(2) button {order : -1;}
    body.hamOn .topNavi {display: flex; position: fixed; background:transparent; z-index: 11; bottom: 0; left: 0;   width: 100%; justify-content: center;}
    body.hamOn .topNavi .inHd {display: flex; padding: 0; width: 100% ;}
    body.hamOn .topNavi .inHd a {border-right: 1px solid #676767; border-top: 1px solid #676767; flex:1 ; min-height: 55px; display: flex; font-size: 15px; font-weight: 500; background: #3f3f3f;}
    body.hamOn .topNavi .inHd a:last-of-type {border-right: 0;}
    body.hamOn .topNavi .inHd .has {display: none; }


    footer { padding-left: 24px; padding-right: 24px; }
    footer > .footer_inner { align-items: center; }
    .footer_inner > div { flex-direction: column;  align-items: center;  gap: 1.5rem; }
    .footer_inner > div > select { position: relative; top: 0; width: 100%; max-width: 16.75rem; border: 1px solid #5f5f5f; color: #cdcdcd; }
    .footer_inner > p {text-align: center; }
    .footer_inner > p br { display: none; }
    .footer_inner > div span { margin-right: 0; display: flex; gap: 1.25rem; }
    .footer_inner > div span a { font-size: 1.125rem; }
    .cardWrap { padding: 5vw 0; }
    .cardWrap > .in > h2 { font-size: 20px; }
    .cardWrap > .in > div { width: calc(50% - 7px); }
    .swiperControl > .next,
    .swiperControl > .prev {display: none; }
}
@media (max-width: 768px) {
    #hrdflex_login.gn2up > .login_copy h1 { display: flex; flex-wrap: wrap; }
    #hrdflex_login.gn2up > .login_copy h1 > strong { font-size: 6.6vw; line-height: 138%; }
    .login_copy h1 .login_sub_copy { margin-top: 15px; font-size: 5vw; }
    header .btmNav > div:nth-of-type(2) { gap: 6px; }
    header .btmNav > div:nth-of-type(2) a,
    header .btmNav > div:nth-of-type(2) button { width: 110px; }
    .footer_inner > p { font-size: 13px; }
}
@media (max-width: 520px) {
    header h1 {max-width: 90px;}
    .cardWrap > .in {gap:18px 14px}
    .cardWrap > .in > div > p {line-height: 130%; padding: 10px 0 2px 0; font-size: 13px;}
    header .btmNav > div:nth-of-type(2) {gap: 5px;}
    header .btmNav > div:nth-of-type(2) a, 
    header .btmNav > div:nth-of-type(2) button {font-size: 13px; height: 28px; width: 80px;}
    body.hamOn header .btmNav > div:nth-of-type(2) a, 
    body.hamOn header .btmNav > div:nth-of-type(2) button {width: 42%; height: 36px;}
    body.hamOn .topNavi .inHd a  {min-height: 48px; font-size: 14px;}
}
@media (max-width: 410px) {
    header > .btmNav .r_hd {gap: 12px;}
    .cardWrap > .in {gap:16px 10px;}
    .cardWrap > .in > div {width: calc(50% - 5px);}
    
}

/*newMain*/
.bannerWrap {display: grid; margin-top: 55px; margin-bottom: 3px; gap: 10px; grid-template-columns: 1fr 1fr 1fr;} 
.bannerWrap > a:nth-of-type(1) {background: #f52d40; color: #fff;}
.bannerWrap > a:nth-of-type(2) {background: #a2ed28; }
.bannerWrap > a:nth-of-type(3) {background: #ffb80f url('/application/views/Client/Yoflex/Images/consulting_ban_bg.jpg') no-repeat center center; background-size: cover; }

.itemCard {display: flex; flex-direction: column; border-radius: 10px; padding: 26px 20px 20px 20px; color: #222; position: relative;}
.itemCard > *:not(img) {line-height: 1; transform: scaleX(0.98);}
.itemCard > span:nth-of-type(1) {font-size: 24px; font-weight: 600;}
.itemCard > strong {font-size: 36px; font-weight: 700; padding: 8px 0 33px 0;}
.itemCard > span:last-of-type {font-size: 18px; font-weight: 700;}
.itemCard > span > span {font-style: italic;}
.itemCard > .obj {position: absolute; bottom: 0; right: 0;}

.bannerWrap > a:nth-of-type(1) > span:first-of-type,
.bannerWrap > a:nth-of-type(1) > span:last-of-type {color: #fedee1;}
.bannerWrap > a:nth-of-type(2) > span:first-of-type {color: #4d5f30;}
.bannerWrap > a:nth-of-type(3) > span:first-of-type {color: #444038;}
.bannerWrap > a:nth-of-type(1) > .obj {transform: translate(-23px, -25px);}
.bannerWrap > a:nth-of-type(2) > .obj {transform: translate(-18px, -7px);}
.bannerWrap > a:nth-of-type(3) > .obj {transform: translate(-0, -0);}

.listWrap .thumb {position: relative; overflow: hidden; width: 100%; padding-bottom: 56.25%; transition: 0.4s;}
.listWrap .thumb > img {position: absolute; width: 100%; height: 100%; object-fit: cover; transition: 0.4s;}

.youtube .in h2,
.bestCourse .in h2, 
.yoCourse .in h2,
.boardList .in h2 {font-size: 36px; color: #fff; width: 100%; padding-top: 57px; padding-bottom: 28px;} 
.boardList .in h2 {padding-top: 70px;}
.youtube .in .listWrap,
.bestCourse .in .listWrap,
.yoCourse .in .listWrap,
.premiumCon .in .listWrap {display: grid; width: 100%; grid-template-columns: 1fr 1fr 1fr 1fr; gap:0 14px;}
.bestCourse .in .listWrap,
.premiumCon .in .listWrap { grid-template-columns: 1fr 1fr 1fr; gap: 0 11px;}

.youtube .in .listWrap > div {cursor: pointer; display: flex; flex-direction: column ; gap: 15px; }
.youtube .in .listWrap .thumb {border-radius: var(--b-rd);}
.youtube .in .listWrap .thumb::after { content:''; position: absolute; display: block; width: 100%; bottom: 0; left: 0; background:  linear-gradient(180deg,  rgba(162, 237, 40, 0) 0%, rgba(162, 237, 40, 0.8) 100%); z-index:2; height: 20%; transition: 0.4s;}
.youtube .in .listWrap .thumb > img {filter: grayscale(35%); transition: 0.4s; z-index: 1;}
.youtube .in .listWrap .card p {font-size: 18px; line-height: 22px; letter-spacing: -0.05em; font-weight: 500; color: #ddd;  text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.bestCourse .in .listWrap {gap: 41px 11px}
.bestCourse .in .listWrap .card {display: none; flex-direction: column; cursor: pointer; border-radius: var(--b-rd); overflow: hidden;} 
.bestCourse .in .listWrap .card figcaption {display: flex; flex-direction: column; background: #393939; padding: 23px 17px 27px 17px;gap: 5px;  transition: 0.4s;}

.bestCourse .in .listWrap .card  figcaption div:first-of-type {display: flex; min-height: 18px; gap: 0 5px;}
.bestCourse .in .listWrap .card .best,
.bestCourse .in .listWrap .card .new {display: inline-flex; border-radius: 4px; color: #222; font-weight: 800; height: 18px; padding: 0 10px; } 
.bestCourse .in .listWrap .card .best {background: #a2ed28;}
.bestCourse .in .listWrap .card .new {background: #ffb50f;}
.bestCourse .in .listWrap .card .best::after { content: 'BEST'; font-size: 12px; }
.bestCourse .in .listWrap .card .new::before { content: 'NEW'; font-size: 12px;}
.bestCourse .in .listWrap .card figcaption > strong {color: #fff; font-size: 22px; line-height: 27px; overflow: hidden; letter-spacing: -0.05em; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.4s; min-height: 54px;}
.bestCourse .in .listWrap .card figcaption > p {font-size: 16px; line-height: 22px; font-weight: 400; color: #a2a2a2; letter-spacing: -0.01em; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.4s; min-height: 44px; }



.bestCourse .in .listWrap .card.cs7773,
.bestCourse .in .listWrap .card.cs7774,
.bestCourse .in .listWrap .card.cs10523,
.bestCourse .in .listWrap .card.cs10523,
.bestCourse .in .listWrap .card.cs10524,
.bestCourse .in .listWrap .card.cs10525,
.bestCourse .in .listWrap .card.cs10526,
.bestCourse .in .listWrap .card.cs10533 { display:flex  }
.bestCourse .in .listWrap .card.cs10523,
.bestCourse .in .listWrap .card.cs10523,
.bestCourse .in .listWrap .card.cs10524,
.bestCourse .in .listWrap .card.cs10525,
.bestCourse .in .listWrap .card.cs10526 {order: -9;}

.bestCourse .in > .moreCourseBtn,
.bestCourse .in .listWrap .card.cs10532 .new,
.bestCourse .in .listWrap .card.cs10533 .new,
.bestCourse .in .listWrap .card.cs7773 .new,
.bestCourse .in .listWrap .card.cs7774 .new  {display: none}

.bestCourse .in .listWrap .card.cs10527,
.bestCourse .in .listWrap .card.cs10528,
.bestCourse .in .listWrap .card.cs10529,
.bestCourse .in .listWrap .card.cs10530,
.bestCourse .in .listWrap .card.cs10532,
.bestCourse .in .listWrap .card.cs10533 { display: flex;}
.bestCourse .in .listWrap .card.cs10527,
.bestCourse .in .listWrap .card.cs10528,
.bestCourse .in .listWrap .card.cs10529,
.bestCourse .in .listWrap .card.cs10530 {order:-9;}

.yoCourse .in .listWrap .card.cs10527, 
.yoCourse .in .listWrap .card.cs10528, 
.yoCourse .in .listWrap .card.cs10529, 
.yoCourse .in .listWrap .card.cs10530,  
.yoCourse .in .listWrap .card.cs10532, 
.yoCourse .in .listWrap .card.cs10533  { display: none;}


.yoCourse .in .listWrap {gap: 51px 11px}
.logoutMain  .yoCourse .in .listWrap .card {display: none;}
.yoCourse .in .listWrap .card {display: flex; flex-direction: column; cursor: pointer; overflow: hidden;} 
.yoCourse .in .listWrap .card figcaption {display: flex; flex-direction: column; }
.yoCourse .in .listWrap .card .thumb {border-radius: var(--b-rd);}
.yoCourse .in .listWrap .card figcaption > strong {color: #ddd; font-size: 18px;  letter-spacing: -0.05em; font-weight: 500;  text-overflow: ellipsis;
white-space: nowrap; overflow: hidden;  transition: 0.3s; padding:  10px 0 ;}
.yoCourse .in .listWrap .card figcaption > p {font-size: 16px; line-height: 22px; font-weight: 400; color: #a2a2a2; letter-spacing: -0.01em; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.3s; }

.yoCourse .in .listWrap .card.cs6666,
.yoCourse .in .listWrap .card.cs6667,
.yoCourse .in .listWrap .card.cs6668,
.yoCourse .in .listWrap .card.cs6669,
.yoCourse .in .listWrap .card.cs6694,
.yoCourse .in .listWrap .card.cs6695 {display: none; }

.premiumCon .in > h2  {font-size: 36px; color: #fff; width: 100%; padding-top: 57px; padding-bottom: 5px;} 
.premiumCon .in > p {font-size:18px; color: #fff; opacity: 0.6; padding-bottom: 28px;}
.premiumCon .in .listWrap .card {flex-direction: column; cursor: pointer; border-radius: var(--b-rd); overflow: hidden;} 
.premiumCon .in .listWrap .card figcaption {display: flex; flex-direction: column; background: #393939; padding: 23px 17px 27px 17px;gap: 5px;  transition: 0.4s; min-height: 176px;}
.premiumCon .in .listWrap .card  figcaption div:first-of-type {display: flex; min-height: 18px; gap: 0 5px;}
.premiumCon .in .listWrap .card figcaption > strong {color: #fff; font-size: 22px; line-height: 27px; overflow: hidden; letter-spacing: -0.05em; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.4s; min-height: 54px;}
.premiumCon .in .listWrap .card figcaption > p {font-size: 16px; line-height: 22px; font-weight: 400; color: #a2a2a2; letter-spacing: -0.01em; width: 100%; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: 0.4s; }
.premiumCon .in .listWrap .card .premium {display: inline-flex; border-radius: 4px; color: #222; font-weight: 800; height: 18px; padding: 0 10px; background: #a2ed28; } 
.premiumCon .in .listWrap .card .premium::after { content: '프리미엄'; font-size: 12px; }


/* .yoCourse .in .listWrap .card.cs6677 { order: -19;}
.yoCourse .in .listWrap .card.cs6676 { order: -18;}
.yoCourse .in .listWrap .card.cs7284 { order: -17;}
.yoCourse .in .listWrap .card.cs6682 { order: -16;}
.yoCourse .in .listWrap .card.cs6663 { order: -15;}
.yoCourse .in .listWrap .card.cs7259 { order: 12;}
.yoCourse .in .listWrap .card.cs7260 { order: 13;}
.yoCourse .in .listWrap .card.cs7261 { order: 14;}
.yoCourse .in .listWrap .card.cs6672 { order: 11;} */

.logoutMain .yoCourse .in .listWrap .card.cs6677 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs6676 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs6682 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs7284 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs6663 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs7259 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs7260 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs7261 {display: flex;}
.logoutMain .yoCourse .in .listWrap .card.cs6672 {display: flex;}


.moreCourseBtn {width: 100%; background: transparent; border: 1px solid #a5a5a5; color: #a2a2a2; display: flex; justify-content: center; align-items: center; font-size: 18px; height: 60px; border-radius: 10px; margin-top: 30px; gap: 7px; transition: 0.4s;}
.yoCourse  .moreCourseBtn {margin-top: 50px;}
.moreCourseBtn::after {content: '\f078'; font: var(--fa-font-solid); font-size: 14px; transform: translateY(2px);}

.boardList .listWrap {background: #2d2d2d; padding: 11px 24px; display: flex; flex-direction: column; border-radius: 10px; position: relative; min-height: 80px;}
.boardList .listWrap.empty,
.boardList .listWrap .noList {padding: 30px 24px; justify-content: center; text-align: center; font-size: 18px;}
.boardList .listWrap.empty::before {content: '리스트에 해당 항목이 없습니다.'; transition: 0.3s;}
.boardList .listWrap.loading::before {content: ''; width: 100%; height: 100%; display: block; position: absolute; z-index: 1; background: #000; top: 0; left: 0; opacity: 0.4;}
.boardList .listWrap.loading::after {content: "⠋";display: block; top:50%; left: 50%; position: absolute; transform: translate(-50%, -50%);  font-size: 28px; color: #fff; opacity: 0.6; animation: loadingSpinner 1.2s linear infinite;}
.boardList .listWrap a.secret p::before { content: '\f070'; font: var(--fa-font-solid); margin-right: 6px;}
.boardList .listWrap a {display: flex; width: 100%; padding: 24px 18px; border-top: 1px solid #696969; color: #ddd; align-items: center; gap: 25px; transition: 0.4s;}

.boardList .listWrap a:first-of-type {border-top: 0;}
.boardList .listWrap a > p:first-of-type {flex: 1; font-size: 20px; letter-spacing: -0.05em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-weight: 500; transition: 0.4s; }
.boardList .listWrap a > span { font-size: 18px; opacity: 0.5; transition: 0.4s; }
.boardList .listWrap a::after {content: '→'; font-size: 18px; opacity: 0.5; transition: 0.4s; }
.boardList .listWrap a.notice:after { display: none;}
.boardList .listWrap a > * {line-height: 1;}
.boardList .listWrap a p .category::before {content: '['; padding-right: 1px;}
.boardList .listWrap a p .category::after {content: ']';padding-left: 1px; margin-right: 7px;}
.boardList .listWrap a > span:first-of-type {width: 60px; display: flex; text-align: center; justify-content: center;}

.boardList .listWrap a.notice > span:first-of-type {background: var(--flex-f-h-color); color: #121212; opacity: 1; font-size: 14px; min-height: 30px; display: flex; justify-content: center; align-items: center ;border-radius: 4px; font-weight: 500;}
.boardList .listWrap a.notice p:first-of-type { color: var(--flex-f-h-color);}
.boardList .listWrap a.notice:hover,
.boardList .listWrap a.notice:hover p:first-of-type { color: var(--flex-separation-color);}
.boardList .listWrap a.notice:hover > span:first-of-type {background: var(--flex-separation-color) ;}

.pagerWrap {width: 100%; display: flex ; justify-content: center; padding: 20px 0 30px 0;}
.pager {display: flex; justify-content: center; align-items: center; gap:0 6px}
.pager > a {all:unset; cursor: pointer;   display: flex;  justify-content: center; align-items: center ;align-content: center; width: 32px ; height: 32px; line-height: 32px; border-radius: 50%; font-size: 15px; font-weight: 500; color: #fff; opacity: 0.5; transition: 0.3s;}
.pager > a.active {background: var(--flex-f-h-color); color: #121212; font-weight: 600; opacity: 1;}
.pager > a.f-prev::before {content: '\f100'; font: var(--fa-font-solid); }
.pager > a.prev::before {content: '\f104'; font: var(--fa-font-solid); }
.pager > a.l-next::before {content: '\f101'; font: var(--fa-font-solid); }
.pager > a.next::before {content: '\f105'; font: var(--fa-font-solid); }
.pager > a:hover {background: var(--flex-f-h-color); color: #121212; opacity: 0.5;}

.editBtnWrap { padding-top:  16px ; display: flex; align-items: center; }
.editBtnWrap.al-right {justify-content: flex-end;}
.editBtnWrap .btn {all: unset; cursor: pointer; background: var(--flex-f-h-color); color: #121212; font-weight: 500; display: flex; justify-content: center ; align-items: center; font-size: 14px; padding: 6px 20px; border-radius: 4px; letter-spacing: -0.025em; transition: 0.3s;}
.editBtnWrap .btn:hover {opacity: 0.9;}

.boardFnWrap {display: flex; justify-content: flex-end; padding: 20px 0 20px 0; width: 100%; align-items: flex-end;}
.boardFnWrap .tabWrap {flex: 1;}
.tabWrap {  display: flex; gap: 6px}
.tabWrap .btn {all: unset; cursor: pointer; font-size: 16px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--flex-line-color); height: 36px; border-radius: 6px; padding :0 20px; transition: 0.3s;}
form .tabWrap > input[type="radio"] {display: none;}
form .tabWrap > input[type="radio"]:checked + label,
.tabWrap .btn.active {background: var(--flex-f-h-color); color: #121212; font-weight: 500;}
.tabWrap .btn:hover {opacity: 0.5; background: var(--flex-f-h-color); color: #121212;}

.searchWrap > div {background: var; background: #424341; color: var(--flex-f-w-color); padding: 8px 16px; border-radius: 6px; display: flex; align-items: center ;}
.searchWrap > div > input[type="text"] {all: unset; width: 100%; max-width: 260px;}
.searchWrap > div > button {all: unset; cursor: pointer; transition: 0.3s; color: #fff;}
.searchWrap > div > button:hover { color: var(--flex-f-h-color); }

@media (max-width: 1240px) {
    .ourServices {padding: 0 24px; }
    .bannerWrap {margin-bottom: 0;}
    .youtube .in h2, 
    .bestCourse .in h2, 
    .premiumCon .in h2, 
    .yoCourse .in h2,
    .boardList .in h2 {font-size: 2.65vw; padding: 5vw 0 1.5vw 0;} 
    .youtube .in .listWrap {gap: 0 10px;}
    .youtube .in .listWrap > div {gap:10px;}
    .youtube .in .listWrap .card p {font-size: 16px; line-height: 135%;}
    .bestCourse .in .listWrap .card figcaption,
    .premiumCon .in .listWrap .card figcaption {padding: 20px 15px;}
}

@media (min-width:991px) {
    .itemCard:hover {opacity: 0.8;}
    .youtube .in .listWrap .card:hover .thumb > img {filter: grayscale(0);}
    .youtube .in .listWrap .card:hover .thumb::after {height: 0;}
    .youtube .in .listWrap .card:hover p {color: #f1f1f1;}

    .bestCourse .in .listWrap .card:hover .thumb img,
    .yoCourse .in .listWrap .card:hover .thumb img{filter: sepia(0.4);}
    .bestCourse .in .listWrap .card:hover figcaption {background: #f1f1f1;}
    .bestCourse .in .listWrap .card:hover figcaption > strong {color: #222;}
    .bestCourse .in .listWrap .card:hover figcaption > p {color: #676767;}

    .premiumCon .in .listWrap .card:hover .thumb img{filter: sepia(0.4);}
    .premiumCon .in .listWrap .card:hover figcaption {background: #f1f1f1;}
    .premiumCon .in .listWrap .card:hover figcaption > strong {color: #222;}
    .premiumCon .in .listWrap .card:hover figcaption > p {color: #676767;}


    .yoCourse .in .listWrap .card:hover figcaption > strong {color: var(--flex-separation-color);}
    .yoCourse .in .listWrap .card:hover figcaption > p {color: #fff;}
    .moreCourseBtn:hover {background: var(--flex-f-h-color); border-color: transparent ; color: #121212; font-weight: 500;}

    .boardList .listWrap a:hover { color: var(--flex-separation-color);}
    .boardList .listWrap a:hover span,
    .boardList .listWrap a:hover::after {opacity: 0.8;}
}

@media (max-width:990px) {
    .bannerWrap {display: grid; margin-top: 30px; gap: 10px; grid-template-columns: 1fr 1fr;}    
    .itemCard > span:last-of-type {display: none;} 
    .bannerWrap .itemCard:first-of-type {grid-column: 1 / span 2;}
    .itemCard > span:nth-of-type(1) {font-size: 2.5vw; font-weight: 500; }
    .itemCard > strong {font-size: 5vw; }
    .bannerWrap > a:nth-of-type(2) > strong,
    .bannerWrap > a:nth-of-type(3) > strong { padding-bottom: 12.5%; line-height: 115%; font-size: 4vw;}
    .bannerWrap > a:nth-of-type(1) > .obj {transform: translate(-15%, -10%);}
    .bannerWrap > a:nth-of-type(2) > .obj {transform: translate(-5%, -7px); width: 16vw;}
    .bannerWrap > a:nth-of-type(3) > .obj {transform: translate(-0, -0); width: 26vw;}
    .youtube .in .listWrap .thumb > img {filter: grayscale(0);}
    .youtube .in h2, 
    .bestCourse .in h2, 
    .premiumCon .in h2, 
    .yoCourse .in h2,
    .boardList .in h2 {font-size: 3.5vw; padding-bottom: 15px; } 
    .youtube .in .listWrap,
    .yoCourse .in .listWrap,
    .bestCourse .in .listWrap,
    .premiumCon .in .listWrap {gap: 4vw 10px}
    .bestCourse .in .listWrap .card figcaption > strong,
    .premiumCon .in .listWrap .card figcaption > strong {font-size: 20px; line-height: 130%;}
    .bestCourse .in .listWrap .card figcaption > p,
    .premiumCon .in .listWrap .card figcaption > p,
    .yoCourse .in .listWrap .card:hover figcaption > p {font-size: 15px; line-height: 135%;}
    .yoCourse .moreCourseBtn,
    .moreCourseBtn {margin-top: 5vw; height: 50px; font-size: 16px;}
    .pager > button.f-prev,
    .pager > button.l-next {display: none;}

    .boardList .listWrap a.notice {flex-direction: row; gap: 8px; align-items: center; }
    .boardList .listWrap a.notice > span:first-of-type {font-size: 13px; min-height: 28px; }
    .boardList .listWrap a:not(.notice) > span:first-of-type { display: none; }
    .boardList .listWrap a:not(.notice) > p { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 138%; }
}  

@media (max-width: 786px) {
    .youtube .in h2, 
    .bestCourse .in h2, 
    .yoCourse .in h2,
    .boardList .in h2 {font-size: 24px; padding-bottom: 14px; } 
    .youtube .in .listWrap, 
    .bestCourse .in .listWrap, 
    .yoCourse .in .listWrap {grid-template-columns: 1fr 1fr;}
    .youtube .in .listWrap,
    .yoCourse .in .listWrap, 
    .bestCourse .in .listWrap,
    .premiumCon .in .listWrap {gap: 16px 8px;}
    .bestCourse .in .listWrap .card,
    .premiumCon .in .listWrap .card{ position: relative;}
    .bestCourse .in .listWrap .card figcaption,
    .premiumCon .in .listWrap .card figcaption {gap:6px;}
    .bestCourse .in .listWrap .card figcaption > strong,
    .premiumCon .in .listWrap .card figcaption > strong {font-size: 16px;  min-height: auto; line-height: 135%;}
    .bestCourse .in .listWrap .card figcaption div:first-of-type,
    .premiumCon .in .listWrap .card figcaption div:first-of-type {position: absolute; top: 10px; left: 10px; gap:4px}
    
    .premiumCon .in .listWrap .card .premium::after, 
    .bestCourse .in .listWrap .card .best::after, 
    .bestCourse .in .listWrap .card .new::after {font-size: 11px;}
    .bestCourse .in .listWrap .card figcaption > p,
    .premiumCon .in .listWrap .card figcaption > p, {font-size: 14px;}

    .yoCourse .in .listWrap .card figcaption > strong {padding-bottom: 0; overflow: hidden; letter-spacing: -0.05em; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 16px; line-height: 135%;}
    .yoCourse .in .listWrap .card figcaption > p {display: none;}
    .boardList .listWrap {border-radius: var(--b-rd); padding: 0 20px;}
    .boardList .listWrap a {padding: 22px 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; align-content: flex-start; gap: 12px; }
    .boardList .listWrap a > p:first-of-type {flex: auto; width: 100%; font-size: 18px;}
    .boardList .listWrap a > span {font-size: 15px;}
    .boardList .listWrap a::after {display: none;}
    .pagerWrap .f-prev,
    .pagerWrap .l-next {display: none;}
}

@media (max-width: 480px) {
    :root {
        --b-rd : 6px;
    }
    header {padding: 20px;}
    .ourServices,
    .in {padding: 0 20px;}
    .youtube .in h2, 
    .bestCourse .in h2, 
    .yoCourse .in h2,
    .boardList .in h2,
    .premiumCon .in h2, {padding-top: 42px;}
    .bannerWrap {gap:8px 6px; margin-top: 20px;}
    .itemCard {padding: 20px 11px;}
    .itemCard > span:nth-of-type(1) {font-size: 15px; letter-spacing: -0.05em;}
    .itemCard > strong {padding-bottom: 10px;}
    .bannerWrap > a:nth-of-type(1) > .obj {max-width: 20vw; transform: translate(-11px, -30%); }
    .itemCard > strong,
    .bannerWrap > a:nth-of-type(2) > strong, 
    .bannerWrap > a:nth-of-type(3) > strong {font-size: 20px; padding-bottom: 14px; padding-top: 4px;}
    .bannerWrap > a:nth-of-type(2),
    .bannerWrap > a:nth-of-type(3),
    .bannerWrap .itemCard:first-of-type {border-radius: var(--b-rd);}
    .bestCourse .in .listWrap .card {border-radius: 0;}
    .bestCourse .in .listWrap .card .thumb {border-radius: var(--b-rd);}
    .bestCourse .in .listWrap .card figcaption {background: transparent; padding: 10px 0 0 0;}
    .youtube .in .listWrap .card p,
    .bestCourse .in .listWrap .card figcaption > strong,
    .yoCourse .in .listWrap .card figcaption > strong { color: #ddd; font-size: 15px;} 
    .youtube .in .listWrap, 
    .yoCourse .in .listWrap, 
    .bestCourse .in .listWrap {gap: 22px 6px;}
    .bestCourse .in .listWrap .card figcaption > p {font-size: 13px; }
    .yoCourse .moreCourseBtn, .moreCourseBtn {border-radius: var(--b-rd); font-size: 14px; height: 42px;}
    .boardList .listWrap {padding: 0 16px;}
    .boardList .listWrap a { padding:  18px 0;}
    .boardList .listWrap a > p:first-of-type {font-size: 16px; line-height: 135%;}
}
@media (max-width: 380px) {    
    header {padding: 20px 16px; }
    .ourServices,
    .in {padding: 0 16px;}
    .itemCard > strong,
    .bannerWrap > a:nth-of-type(2) > strong, 
    .bannerWrap > a:nth-of-type(3) > strong {padding-bottom: 5px;}
    .youtube .in h2, 
    .bestCourse .in h2, 
    .yoCourse .in h2 {font-size: 20px; padding-top: 36px;}
    .youtube .in .listWrap .card p,
    .bestCourse .in .listWrap .card figcaption > strong,
    .yoCourse .in .listWrap .card figcaption > strong {font-size: 14px;} 
    .itemCard > span:nth-of-type(1) {font-size: 13px;}
}


/*CourseView*/
section {color: var(--flex-f-p-color);}
.container {display: flex; justify-content: center; padding: 0 30px;}
.container section {width: 100%;  max-width:1020px; padding-bottom: 30px;}
.imgWrap {width: 100%; overflow: hidden; padding-bottom: 53%; position: relative; border-radius: 8px;}
.imgWrap > img {width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover;}
.btnWrap {width: 100%; display: flex; justify-content: center; align-items: center;}

.courseView section h2 {width: 100%;  padding-bottom: 22px;  font-size: 34px; color: var(--flex-f-h-color); line-height: 130%; font-weight: 500;} 
.courseView section > div:nth-of-type(2){display: flex; flex-direction: column; padding-top: 30px; gap: 30px;}
.courseView section > div .downDoc {width: 100%;; display: flex; justify-content: center; align-items: center; border: 1px solid var(--flex-line-color); height: 48px; border-radius: 6px; gap: 6px; opacity: 0.9;}
.courseView section > div .downDoc::before {content: '\f0ed'; font: var(--fa-font-solid); font-size: 15px;}
.courseView section > div .downDoc:hover {background: var(--flex-f-h-color); color: #121212; font-weight: 500;  opacity: 1;}
.courseView section > div b { color: var(--flex-f-h-color);}
.courseView section > div p{padding-top: 5px; min-height: 33px; line-height: 138%;}

.ctListWrap > strong  {font-size: 20px; font-weight: 400; color: var(--flex-f-w-color); padding-bottom: 16px; display: block;}
.ctList {display: flex; flex-direction: column; gap:6px; position: sticky; top:20px;  }
.ctList > div {display: flex;  gap : 8px; color:#9ea9bb; font-size: 14px; padding: 13px 18px; border: 1px solid var(--flex-line-color);  border-radius: 6px; width: 100%; align-items: flex-start; transition: 0.3s; cursor: pointer;}
.ctList > div > b { font-weight: 600; color: #fff; min-width: 41px; }
.ctList > div > b::after {content: '차시';}
.ctList > div:hover { color: var(--flex-separation-color);  border: 1px solid var(--flex-separation-color); opacity: 0.7; }

.courseView section .btnWrap {padding: 40px 0;}
.courseView section .btnWrap a { display: flex; font-size: 15px; font-weight: 500; height: 52px; width: 180px; justify-content: center; align-items: center; border-radius: 4px;  background: transparent; border: 1px solid #ffffff70; gap: 8px; font-size: 17px;}
.courseView section .btnWrap a::before {content: '\f0c9'; font: var(--fa-font-solid); font-size: 14px; position: relative; top: 1px;} 
.courseView section .btnWrap a:hover {background: var(--flex-f-h-color); color: var(--dark-bg); border-color: var(--flex-f-h-color);}


@media (min-width: 787px) {
    .courseView section{ display: grid; grid-template-columns: auto 330px ;grid-template-rows: auto 1fr; gap: 0 30px;}
    .courseView section .imgWrap {padding: 27.4%; height: auto;} 
    .ctListWrap {grid-row: 1 / span 3; grid-column: 2;}
    .courseView section .btnWrap {grid-column: 1 / span 2;}
    .ctList {max-height: calc(100vh - 60px); overflow-y: auto; padding-right: 14px; }
}
@media (min-width: 1240px) {
    .courseView section{ grid-template-columns: auto 410px ;}
}

@media (max-width:786px) {
    .imgWrap {border-radius: 4px;}
    .courseView section {display: flex; flex-direction: column;}
    .courseView section h2 {font-size: 5vw; color: #fff; padding-top: 20px; padding-bottom: 8px;} 
    .ctListWrap {padding-top: 15px;}
    .ctList > div {padding: 13px ;}
    .ctListWrap > strong  {display: none;}
    .courseView section > div:nth-of-type(2) {order: 3; margin-top:60px; padding-top: 16px;  border-top: 1px solid var(--flex-line-color); gap: 20px;}
    .courseView section > .btnWrap {order: 4;}
    .courseView section > div b,
    .courseView section > div p {font-size: 14px;}
    .courseView section .btnWrap a {width: 100%;}
}


.subPage h2 {padding: 60px 0 30px 0; color: #fff; font-size: 32px;}
.faq_list li:first-of-type {border-top:1px solid #696969;}
.faq_list li {border-bottom: 1px solid #696969; letter-spacing: -0.25px; font-weight: 400; }
.faq_list li.hidden {display: none;}
.faq_list li.none_list {border-top: 1px solid #696969; padding: 1.625rem 3rem ; text-align: center; font-size: 1.375rem; color:#5f5f5f;}


.faq_q {padding: 1.625rem 1rem; font-size: 1.375rem; color:#ddd; transition: 0.5s; cursor: pointer; position: relative;}
.faq_q span {margin-right: 0.5rem;}

.faq_q:hover {color: var(--flex-separation-color);}
.faq_q::before {content: "Q"; color: var(--flex-separation-color);; font-size: 1.875rem; font-weight: 700; margin-right: 1rem; display: inline-block; width: 2.5rem; text-align: center;}
.faq_q::after {content: '\f0dd'; font:var(--fa-font-solid); display: flex; justify-content: center; align-items: flex-start; width: 1.875rem; height: 1.875rem; position: absolute; top: 1.625rem ; right: 3rem; color: var(--flex-separation-color);; transform: rotate(0) translateY(0); transition: 0.4s;}
.faq_q.on::after {transform: rotate(180deg) translateY(-4px); }

.faq_a{ overflow: hidden; height: 0; transition: 0.5s ease; background: #efefef; box-sizing: border-box; position: relative;}
.faq_a pre { font-size: 18px; margin: 1.625rem 3rem; line-height: 138%; font-weight: 400; letter-spacing: -0.25px; color:#49464E; display: flex;}
.faq_a pre::before {content: "A"; color: #777; font-size: 1.875rem; font-weight: 700;  width: 2.5rem; text-align: center; letter-spacing: -0.05em;}
.faq_a > div{ font-size: 18px; margin: 1.625rem 1.5rem; line-height: 138%; font-weight: 400; letter-spacing: -0.25px; color:#49464E; display: block; padding-left: 3.8rem; letter-spacing: -0.05em;}
.faq_a > div::before {content: "A"; display: block; color: #777; font-size: 1.875rem; font-weight: 700; margin-right: 1rem; width: 2.5rem; text-align: center; position: absolute; top:1.625rem; left: 1.5rem}
.faq_a > div p { color: #777; }
.faq_a > div p b {font-weight: 600; color:#222 }

@media (max-width:1280px) { 
	.faq .contents_top {flex-direction: column; align-items: flex-start;}
	.dff_tab { flex-wrap: wrap; }
	.dff_search{  font-size: 1.4rem; max-width: 21.875rem;}
	.faq .dff_search {margin-top: 1rem; margin-bottom: 2rem; order:-1;}	
	.faq_list li.none_list,
	.faq_q {padding: 1.625rem 1.5rem}
	.faq_q {padding-right: 3.5rem;}
	.faq_q::after {top: 1.625rem ; right: 1.5rem;}
	.faq_a pre {margin: 1.625rem 1.5rem;}
	.faq_a pre::before,
	.faq_q::before {margin-right: 0.65rem}
}
@media (max-width:660px) { 
    .subPage h2 {font-size: 1.5rem; padding: 50px 0 0 0;}
	.contents_top {gap : 1rem;}
	.faq .contents_info { display: none;}	
	.faq_q span {display: none;}
	.faq .dff_search { display: flex; justify-content: space-between; margin: 0; width: 100%; max-width: 100%; margin-top: 2.5rem;}
	.faq .dff_search input {font-size: 1rem; width: calc(100% - 1rem);}
	.dff_search .search_btn {width: 1rem;}
	
	.dff_tab {gap: 5px}
	.dff_tab button {font-size: 0.875rem; padding: 0 1.5rem;  border: 1px solid #ccc; height: 2rem; line-height: 2rem; }
	.faq_list {margin-top: 1rem;}
	.faq_list li.none_list {padding: 1.15rem 1rem;  font-size: 1.125rem;}
	.faq_q {padding: 1.15rem 1rem; display: flex;  font-size: 1.125rem; font-size: 1rem; padding-right: 2.5rem; line-height: 140%;  align-items: flex-start;}

	.faq_q::after {top: 1.15rem ; right: 0.5rem;}
	.faq_q.on::after {transform: rotate(180deg) translateY(4px);}
	.faq_a pre { margin: 1.15rem 1rem; font-size: 1rem;  }
	.faq_a pre::before,
	.faq_q::before {width: 1rem; margin-right: 0.5rem; font-size: 1.125rem;}
	.faq_q::before {}
		
	.faq_a > div { font-size: 1rem; margin: 1.15rem; color:#49464E; display: block; padding-left: 0;}
	.faq_a > div::before{ display: none;}
	.faq_a > div p,
	.faq_a > div p span {font-size: 0.875rem !important; line-height: 148% !important;}
	
}


@keyframes loadingSpinner {
    0% { content: "⠋"; }
    10% { content: "⠙"; }
    20% { content: "⠹"; }
    30% { content: "⠸"; }
    40% { content: "⠼"; }
    50% { content: "⠴"; }
    60% { content: "⠦"; }
    70% { content: "⠧"; }
    80% { content: "⠇"; }
    90% { content: "⠏"; }
}

/* ISSU */ 
.writeForm {background: #2d2d2d; padding: 30px; display: flex; flex-direction: column; border-radius: 10px; position: relative; gap:26px;}
.writeForm .form-row {display: flex; width: 100%; align-items: flex-start;}
.writeForm .form-row.al-center {align-items: center;}
.pushArea .form-row > strong:first-of-type,
.writeForm .form-row > strong:first-of-type {width: 100px; padding: 8px 0; } 
.writeForm .form-row > div {display: flex; flex-wrap: wrap; gap: 5px;}
.writeForm .form-row > div:last-of-type {flex: 1; display: flex; align-items: center ;}
.pushArea .form-row > div {flex: 1;}
.pushArea .form-row > div > input,
.writeForm .form-row > div > input[type="file"],
.writeForm .form-row > div > input[type="text"] {width: 100%; background: #424341; color: var(--flex-f-w-color); padding: 10px 16px; border-radius: 6px;
border-color: transparent; font-size: 17px;}
.writeForm .form-row > div > input[type="file"] {font-size: 14px;}
.writeForm .form-row > div > input[type="file"] ~ label {padding-top: 5px; cursor: pointer; font-weight: 400;}

.writeForm .form-row > div > input[type="file"] ~ label > input[type="checkbox"] {display: none;}
.writeForm .form-row > div > input[type="file"] ~ label > input[type="checkbox"]:checked ~ span {color: var(--flex-separation-color);} 
.writeForm .form-row > div > input[type="file"] ~ label > span {display: flex; align-items: center;}
.writeForm .form-row > div > input[type="file"] ~ label > span::before {content: '\f2ed'; font: var(--fa-font-solid); padding-right: 5px; font-size: 13px;}
.writeForm .form-row > div > input[type="file"] ~ label > input[type="checkbox"]:checked ~ span::after { content: '(수정완료 버튼을 누르면 파일이 삭제됩니다.)'; padding-left: 5px;} 

.writeForm .form-row > div > input[type="text"]:focus,
.writeForm .form-row > div > input[type="text"]:active {outline: none;}

.writeForm .form-row > div.editorWrap {width: 100%; display: block;}
.writeForm .form-row > div textarea {width: 100%; min-height: 500px; }
.boardList .btnWrap {padding: 30px 0 0 0 ; gap: 6px;}
.boardList .btnWrap .btn {all:unset;cursor: pointer; flex:1; background: transparent; border: 1px solid #a5a5a5; color: #a2a2a2; display: flex; justify-content: center; align-items: center; font-size: 17px; height: 48px; border-radius: 6px; transition: 0.4s;}
.boardList .btnWrap button[type="submit"].btn {background: var(--flex-f-h-color); color: #121212; font-weight: 600; border-color: transparent;}
.boardList .btnWrap .btn:hover {background: var(--flex-f-h-color); color: #121212; opacity: 0.5;  border-color: transparent;}
.boardList .btnWrap button[type="submit"].btn:hover {opacity: 1; background: var(--flex-separation-color); }
.logoutMain .listWrap a:not(:nth-of-type(-n+5)) {display: none;}

.toggle-wrapper {min-height: 40px; display: flex; align-items: center;}
.toggle { display: inline-flex; width: 44px; height: 24px; background-color: #e0e0e0; border-radius: 12px; position: relative; cursor: pointer; transition: background-color 0.3s ease; }
.toggle input[type="checkbox"] { display: none; }
.toggle .slider { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.toggle:has(input[type="checkbox"]:checked) { background-color: var(--flex-separation-color); }
.toggle input[type="checkbox"]:checked ~ .slider { transform: translateX(20px); }
.toggle .sliderText {display: inline-flex; position: absolute; right: -116px; width: 110px; transition: 0.3s;}

.toggle .sliderText::after { transition: 0.3s;}
.toggle input[type="checkbox"]:checked ~ .sliderText::after { color: var(--flex-f-h-color); transition: 0.3s;}

.secret .toggle .sliderText::after { content: '공개글'; }
.secret .toggle input[type="checkbox"]:checked ~ .sliderText::after { content: '비공개로 등록'; }
.notice .toggle .sliderText::after { content: '일반글'; }
.notice .toggle input[type="checkbox"]:checked ~ .sliderText::after { content: '공지로 등록'; }

.boardView h2 {padding-bottom: 0; line-height: 130%; }
.boardInfo {padding: 5px 0 20px 0; display: flex;}
.boardInfo > div:first-of-type {flex: 1;}
.boardInfo > div > span:first-of-type:before {display: none;}
.boardInfo > div > span::before {content: ''; width: 1px; height: 10px; display: inline-flex; background: #fff;  opacity: 0.2; margin: 0 10px; }
.boardInfo > div:last-of-type {display: flex; gap: 5px}
.boardInfo > div:last-of-type button {background: var(--flex-f-h-color); color: #121212; width: 80px; height: 32px; font-size: 14px; display: flex; justify-content: center; align-items: center; border-radius: 4px; transition: 0.3s;}
.boardInfo > div:last-of-type button:first-of-type { background: #424341; color: #b9b9b9; }
.boardInfo > div:last-of-type button:hover {opacity: 0.7;}

.boardConWrap {width: 100% ;border-radius: 10px; background: #fff; padding: 38px 40px; }
.boardCon {min-height: 350px; color: #5f5f5f; line-height: 168%;}
.boardFile {display: flex; width: 100%; flex-direction: column; gap:5px; margin-top: 50px;}
.boardFile a {color: #3785ff; background: #f1f1f1; display: flex; padding: 10px 20px; border-radius: 4px; gap:5px; align-items: center; transition: 0.3s;}
.boardFile a::before {content: '\f0c6'; font: var(--fa-font-solid); }
.boardFile a::after {content: 'Download'; color: tomato; font-weight: 600; font-size: 14px; transition: 0.3s; }
.boardFile a b {font-weight: 500; flex: 1;}
.boardFile a:hover {color: #0063ff;}
.boardFile a:hover::after {color: #ff2700;}

.pushArea {width: 100%; display: flex; flex-direction:column;}
.pushArea > strong {color: #fff; padding: 20px 0 10px 0;}
.pushArea > div {width: 100%; display: flex;  padding: 10px; border: 1px solid #696969; border-bottom: 0; align-items: flex-end;}
.pushArea > div:first-of-type { border-radius: 6px 6px 0 0;}
.pushArea > div:last-of-type { border-radius: 0 0 6px 6px; border-bottom: 1px solid #696969; padding: 16px;}
.pushArea > div textarea {flex:1; background: transparent; border:0; min-height: 90px; resize : none; color: #fff; outline: none; } 
.pushArea > div textarea::placeholder { font-size: 16px; letter-spacing: -0.025em; color: var(--flex-f-h-color); font-size: 16px; line-height: 130%;} 
.pushArea > div button {background: var(--flex-f-h-color); color: #121212; width: 80px; border-radius: 4px; font-weight: 500; height: 36px;}
.boardView .btnWrap {padding-top: 30px;}
.boardView .btnWrap .btn {all:unset;cursor: pointer; flex:1; background: transparent; border: 1px solid #a5a5a5; color: #a2a2a2; display: flex; justify-content: center; align-items: center; font-size: 17px; height: 48px; border-radius: 6px; transition: 0.4s; max-width: 267px;}
.pushArea > div button:hover {opacity: 0.8;}
.boardView .btnWrap .btn:hover {background: var(--flex-f-h-color); color: #121212; border-color: transparent; font-weight: 500;}

@media (min-width:991px) {
    .boardList .btnWrap  {max-width: 540px; margin: 0 auto;}
    
}

@media (max-width:991px) {
    .boardInfo {flex-direction: column;}   
    .pushArea,
    .boardInfo > div:last-of-type {display: none;}
    .boardView .btnWrap .btn {max-width: 100%;}
    .boardFnWrap {flex-direction: column;  align-items: flex-start; padding-top: 0; padding-bottom: 12px; }
    .boardFnWrap  .searchWrap {width: 100%;}
    .boardFnWrap .tabWrap {padding: 16px 0 16px 0 ; flex-wrap: wrap; width: 100%;} 
    .searchWrap > div > input[type="text"] {max-width: 100%; flex: 1; min-height: 38px;}


}
@media (max-width:786px) { 
    .boardView h2 {font-size: 24px; line-height: 135%;}
    .boardInfo {padding-bottom: 16px;}
    .boardInfo > div:first-of-type {font-size: 14px;}
    .boardCon {min-height: 40vh;}
    .boardConWrap {padding: 18px;}
    .boardFile a b{line-height: 135%;}
    .boardFile a::after {display: none;}
    .boardView .btnWrap {padding-top: 16px;}
    .searchWrap > div > input[type="text"] {font-size: 15px; min-height: 28px; }
    .boardFnWrap .tabWrap {padding-top: 8px; padding-bottom: 10px;}
    .tabWrap .btn {font-size: 14px; height: 32px;}
}