/* 폰트 */
/* 프리텐다드 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* 초기화 코드 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  width: 100%;
  font-family: "Pretendard Variable",'Pretendard', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
body::-webkit-scrollbar {
  background-color: #d6d6d6;
  width: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #9247EE;
  border-radius: 50px;
}

img {
  width: 100%;
}
input {
  outline: none;
  font-family: 'Pretendard';
}
input:focus {
  outline: auto;
}
textarea {
  outline: none;
  resize: none;
  font-family: 'Pretendard';
}
textarea::-webkit-scrollbar {
  background-color: #d6d6d6;
  width: 6px;
}
textarea::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 50px;
}
select {
  outline: none;
  font-family: 'Pretendard';
}


/* 색상 변수 */
:root {
  --mainColor: #7426D5;
  --subColor: #EADAFF;
  --anColor: #F7F0FF;
  --whiteColor: #fff; 

  /* 텍스트 색상 */
  --TtitColor: #111;
  --titColor: #222;
  --txtColor: #333;
  --warningColor: #FF5B19;
  --txtPColor: #9B84B7;
  --txt6Color: #666;
  --txt9Color: #999;
  --txtGColor: #707070;
  --txtBColor: #0f33ff;
  --txtSColor: #6394FF;

  /* 박스 */
  --borderBack: #f8f8f8;
  --borderLine : #D4D8DD;

  --backGColor: #E9E9E9;
  --backColor: #F5F5F5;

  --pageLine: #C1C1C1;

  /* 마우스 호버 */
  --hoverColor: #7018db;
  
  --checkColor: #c39bf7;

  /* 모형 */
  --borderRadius: 20px;

  --tableBack: #f1f1f1;
  --tableLine: #a1a1a1;
}

/** 공통 요소 **/

/* 페이지별 전체 영역 */
.frame {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 65px 0 0 0; /* 고정 헤더 높이 */
}

/* 헤더 */
header {
  width: 100%;
  height: 65px;
  background-color: var(--whiteColor);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.headerPC {
  width: 100%;
  height: 65px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.headerInner {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 로고 */
.logo {
  width: 140px;
}

/* 메뉴 */
.headerMenuList {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.headerMenus {
  font-size: 19px;
  color: var(--titColor);
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 700;
}
.headerMenus::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--backGColor);
  border-radius: 20px;
}
.headerMenuList > .headerMenus:last-child::after {
  display: none;
}
.headerMenus > span {
  display: inline-block;
  height: 65px;
  cursor: pointer;
  line-height: 65px;
}
.headerMenus > span:hover {
  color: var(--hoverColor);
  border-bottom: 3px solid var(--hoverColor);
}

.headerSubMenus {
  display: none;
  width: 100%;
  min-height: 150px;
  padding: 30px 0 60px 0;
  background-color: var(--whiteColor);
  position: absolute;
  top: 65px;
  left: 0;
  box-shadow: inset 4px 1px 5px rgba(0, 0, 0, 0.2);
  align-items: center;
  justify-content: center;
  z-index: 9;
  flex-direction: column;
}

.headerMenus.on > span {
  color: var(--hoverColor);
}
.headerMenus.on .headerSubMenus {
  display: flex;
}

/* 헤더 문의 영역 */
.headerCenterTxt {
  width: 75%;
  display: flex;
  align-items: end;
  flex-direction: column;
  margin: 3% 0 0 0;
  gap: 8px;
}
.centerTxtBox {
  display: flex;
  gap: 5px;
  font-size: 15px;
  color: var(--txt6Color);
  font-weight: 400;
}

/* 서브메뉴 */
.headerSubMenus > ul {
  width: 75%;
  height: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.subMenuLi {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-size: 19px;
}

.subMenuDiv {
  display: inline-block;
  width: 90%;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #C1C1C1;
  padding: 0 10px;
  color: var(--titColor);
  cursor: pointer;
}

.subMenuUl {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.subMenuUl li {
  width: 90%;
  font-size: 15px;
}
.subMenuUl li:hover {
  text-decoration: underline;
}
.subMenuUl li:hover > a {
  color: var(--mainColor);
}
.subMenuLi:hover .subMenuDiv {
  color: var(--mainColor);
}


.subMenuUl li a {
  color: var(--txt6Color);
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
}

.subMenuUl li a::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--txt6Color);
  border-radius: 40px;
}

/* 메뉴 배경 */
.headerMenuBack {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: -9;
  display: none;
}

.headerMenuBack.on {
  display: block;
}

/* 로그인 전/후 헤더 */
.loginBefore {
  /* display: none; */
  display: block; /* 로그인 전 일 때 display:block, 로그인 후 display: none */
}

/* 로그인 후 */
.loginAfter {
  /* display: flex; */
  display: none; /* 로그인 전 일 때 display: none, 로그인 후 display: flex */
  align-items: center;
  gap:15px;
}

.myIconBtn {
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.myIconBtn > i {
  font-size: 35px;
  color: var(--mainColor);
}

.myPopup {
  position: absolute;
  width: 250px;
  right: -105px;
  top: 65px;
  background-color: var(--whiteColor);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  display: none;
  align-items: center;
  flex-direction: column;
}
.myIconBtn.on .myPopup {
  display: flex;
}
.myPopup::before {
  content: '';
  width: 15px;
  height: 15px;
  background-color: var(--whiteColor);
  position: absolute;
  transform: rotate(45deg);
  top: -6px;
  z-index: -9;
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.1);
}

.myPopTop {
  padding: 20px 0;
  font-size: 14px;
  color: var(--txtColor);
}
.userName {
  color: var(--mainColor);
}

.myPopMenus {
  display: flex;
  width: 100%;
}
.myPopMenus > a {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border-top: 1px solid var(--borderLine);
}
.myPopMenus > a:hover {
  background-color: var(--anColor);
}

.myPageBtn {
  color: var(--mainColor);
}
.lmsBtn {
  color: var(--warningColor);
  border-left: 1px solid var(--borderLine);
}


/* 푸터 */
footer {
  width: 100%;
  padding: 25px 0;
  background-color: #2E2E2E;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footerTop {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerTop > ul {
  display: flex;
  gap: 10px;
  align-items: center;
}
.footerTop a {
  font-size: 15px;
  color: #eee;
}
.footerTop > ul > li {
  display: flex;
  align-items: center;
}
.footerTop > ul > li:nth-child(2) {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 0 10px;
  height: 13px;
}
.footerTop > ul > li:nth-child(2) > a {
  color: #ffd900
}

.footerBottom {
  font-size: 13px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footerTxts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #ccc;
}
.footerTxts > div {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.footerBottom > p {
  color: #888;
}

.headerM {
  width: 100%;
  height: 65px;
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.logoM {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 40px;
}
.logoM img {
  width: 100%;
}

.mSideMenu {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mSideMenu > i {
  font-size: 26px;
  color: var(--mainColor);
  font-weight: 600;
}

/* 모바일 사이드 메뉴 */
.headerSideM {
  display: none;
  width: 100%;
  height: 100vh;
  background-color: var(--whiteColor);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  flex-direction: column;
}
.headerSideM.on {
  display: flex;
}

.headerSideTop {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  flex-shrink: 0;
}

/* 로그인 및 회원정보 */
.sideInfo {
  width: 100%;
  background-color: var(--anColor);
  padding: 20px;
  border-top: 1px solid var(--subColor);
  border-bottom: 1px solid var(--subColor);
}

.sideInfo .loginBtn {
  width: 85%;
  height: 35px;
}

.sideInfo .loginAfter .loginBtn {
  border: 1px solid var(--mainColor);
  background-color: var(--anColor);
  color: var(--mainColor);
}

.sideInfo > div {
  display: flex;
  justify-content: center;
}

.sideInfo .loginAfter {
  display: none;
  gap: 15px;
  flex-direction: column;
}

.userInfo {
  color: var(--txtColor);text-align: center;
  font-size: 15px;
}

.userMenus {
  width: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.userMenus > a {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.userMenus .myPageBtn {
  border-right: none;
  background-color: var(--mainColor);
  color: var(--whiteColor);
  border-radius: 60px;
}

.userMenus .lmsBtn {
  background-color: var(--warningColor);
  color: var(--whiteColor);
  border-radius: 60px;
}

/* 모바일 nav */
.sideNav {
  width: 100%;
  flex: 1;
  background-color: var(--mainColor);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sideNav > li {
  width: 100%;
}

.sideNavTop {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  gap: 5px;
  color: var(--whiteColor);
}

.sideNavLi.on .sideSubNav {
  display: flex;
}

.sideSubNavLi.on .sideInnerNav {
  display: flex;
}

.sideSubNavLi.on .sideSubNavTop {
  background-color: var(--subColor);
  color: var(--mainColor);
}

.sideSubNav {
  width: 100%;
  /* display: flex; */
  flex-direction: column;
  display: none;
}

.sideSubNavTop {
  width: 100%;
  height: 50px;
  background-color: var(--whiteColor);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-bottom: 1px solid var(--borderLine);
  gap: 5px;
  color: var(--titColor);
}
.sideInnerNav {
  /* display: flex; */
  flex-direction: column;
  width: 100%;
  background-color: var(--anColor);
  border-bottom: 1px solid var(--borderLine);
  display: none;
}

.sideInnerNav > li {
  width: 100%;
  height: 40px;
  font-size: 13px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
}
.sideInnerNav > li::before {
  content: '●';
  font-size: 5px;
  color: var(--txtColor);
}

.sideInnerNav > li > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--txtColor);
}

/* 반응형 */
@media screen and (max-width: 1200px) {
  .headerInner {
    width: 90%;
  }
  .headerSubMenus > ul {
    width: 90%;
  }
  .logo {
    width: 120px;
    height: 40px;
  }
  .headerMenus {
    font-size: 16px;
  }
  .subMenuDiv {
    font-size: 15px;
  }
  .subMenuUl li {
    font-size: 14px;
  }

} 

/* 모바일 헤더 */
@media screen and (max-width: 1000px) { 

  /* 헤더 */
  .headerPC {
    display: none;
  }

  .headerM {
    display: flex;
  }


  aside {
    display: none;
  }
}

@media screen and (max-width: 800px) {   
  .footerTop a {
    font-size: 13px;
  }
  .footerBottom {
    font-size: 13px;
  }

  .footerTxts {
    width: 90%;
    margin: 0 auto;
  }

  .footerTxts > div {
    flex-direction: column;
  }

  .footerTxts > span {
    word-break: keep-all;
    line-height: 22px;
  }

}

@media screen and (max-width: 600px) {   
  .sideSubNavTop {
    font-size: 13px;
  }

  .sideInfo .loginBtn {
    font-size: 13px;
  }
  .userMenus > a {
    font-size: 13px;
  }

  .footerTop a {
    font-size: 13px; 
  }
  .footerBottom {
    font-size: 13px;
  }

  .footerTxts > div {
    gap: 6px;
  }
}