@charset "UTF-8";
@font-face {
  font-family: Pretendard;
  font-weight: 300;
  src: url(/font/Pretendard-Light.eot);
  src: local("※"), url(/font/Pretendard-Light.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 400;
  src: url(/font/Pretendard-Regular.eot);
  src: local("※"), url(/font/Pretendard-Regular.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 500;
  src: url(/font/Pretendard-Medium.eot);
  src: local("※"), url(/font/Pretendard-Medium.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 600;
  src: url(/font/Pretendard-SemiBold.eot);
  src: local("※"), url(/font/Pretendard-SemiBold.woff) format("woff");
}
@font-face {
  font-family: Pretendard;
  font-weight: 700;
  src: url(/font/Pretendard-Bold.eot);
  src: local("※"), url(/font/Pretendard-Bold.woff) format("woff");
}
/* 대쉬보드 */
#mySnu .con {
  position: relative;
  display: flex;
  min-height: 800px;
}
#mySnu .menuOpenBtn {
  display: none;
  position: absolute;
  top: 20px;
  left: 16px;
  padding: 7px;
  border-radius: 8px;
  background: #FFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 9;
}
@media screen and (max-width: 1024px) {
  #mySnu .menuOpenBtn {
    display: block;
  }
}
#mySnu .sideMenu {
  flex-shrink: 0;
  padding: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
  width: 280px;
  background: #fff;
}
@media screen and (max-width: 1300px) {
  #mySnu .sideMenu {
    width: 260px;
  }
}
@media screen and (max-width: 1024px) {
  #mySnu .sideMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    transition: width 0.2s ease-in-out, opacity 0.3s ease-in-out;
  }
  #mySnu .sideMenu.open {
    width: 260px;
    overflow: visible;
    opacity: 1;
    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.12);
    z-index: 9;
  }
}
#mySnu .sideMenu .sideLogo {
  padding: 20px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #637381;
  font-family: "Public Sans";
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.48px;
}
#mySnu .sideMenu .sideLogo button {
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.9999 12.0009C17.9999 12.1999 17.9209 12.3906 17.7802 12.5313C17.6396 12.6719 17.4488 12.7509 17.2499 12.7509H8.56038L11.7809 15.9699C11.8506 16.0397 11.9059 16.1225 11.9437 16.2136C11.9814 16.3047 12.0008 16.4023 12.0008 16.5009C12.0008 16.5996 11.9814 16.6972 11.9437 16.7883C11.9059 16.8794 11.8506 16.9622 11.7809 17.0319C11.7111 17.1017 11.6284 17.157 11.5373 17.1947C11.4461 17.2325 11.3485 17.2519 11.2499 17.2519C11.1513 17.2519 11.0536 17.2325 10.9625 17.1947C10.8714 17.157 10.7886 17.1017 10.7189 17.0319L6.21888 12.5319C6.14903 12.4623 6.09362 12.3795 6.05581 12.2884C6.018 12.1973 5.99854 12.0996 5.99854 12.0009C5.99854 11.9023 6.018 11.8046 6.05581 11.7135C6.09362 11.6224 6.14903 11.5396 6.21888 11.4699L10.7189 6.96995C10.8597 6.82912 11.0507 6.75 11.2499 6.75C11.449 6.75 11.64 6.82912 11.7809 6.96995C11.9217 7.11078 12.0008 7.30178 12.0008 7.50095C12.0008 7.70011 11.9217 7.89112 11.7809 8.03195L8.56038 11.2509H17.2499C17.4488 11.2509 17.6396 11.33 17.7802 11.4706C17.9209 11.6113 17.9999 11.802 17.9999 12.0009Z' fill='%23637381'/%3E%3C/svg%3E") no-repeat center center;
  display: none;
}
@media screen and (max-width: 1024px) {
  #mySnu .sideMenu .sideLogo button {
    display: block;
  }
}
#mySnu .sideMenu .sideMenuCon {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 100px;
}
#mySnu .sideMenu .first {
  border-top: 1px solid rgba(145, 158, 171, 0.26);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#mySnu .sideMenu .first a {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
}
#mySnu .sideMenu .first a:hover, #mySnu .sideMenu .first a.active {
  background: rgba(57, 110, 156, 0.14);
}
#mySnu .sideMenu .first a:hover span, #mySnu .sideMenu .first a.active span {
  color: #396E9C;
}
#mySnu .sideMenu .first a:hover svg path, #mySnu .sideMenu .first a:hover svg rect, #mySnu .sideMenu .first a.active svg path, #mySnu .sideMenu .first a.active svg rect {
  fill: #396E9C;
}
#mySnu .sideMenu .first a span {
  color: #637381;
  font-size: 16px;
  font-weight: 600;
}
#mySnu .sideMenu .second {
  padding: 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 8px;
  background: #F3F4F6;
}
#mySnu .sideMenu .second a {
  display: flex;
  align-items: center;
  gap: 12px;
}
#mySnu .sideMenu .second a span {
  color: #637381;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
#mySnu .mySnuMain {
  position: relative;
  flex-grow: 1;
  min-width: 0;
  padding: 38px 46px;
  background: #F3F4F6;
}
@media screen and (max-width: 1250px) {
  #mySnu .mySnuMain {
    padding: 38px 30px;
  }
}
@media screen and (max-width: 1024px) {
  #mySnu .mySnuMain {
    padding: 60px 20px 20px 20px;
  }
}
#mySnu .mySnuMain.open::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
#mySnu .mySnuMain .mySnuCon {
  margin-top: 19px;
}
#mySnu .mySnuMain .mySnuCon .myTabs {
  margin-top: 15px;
  margin-bottom: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid #EDEDED;
  background: #FFF;
  overflow-x: auto;
  white-space: nowrap;
}
#mySnu .mySnuMain .mySnuCon .myTabs li {
  min-width: 110px;
  flex-shrink: 0;
  flex-grow: 1;
}
#mySnu .mySnuMain .mySnuCon .myTabs li a {
  padding: 18px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
}
@media screen and (max-width: 1250px) {
  #mySnu .mySnuMain .mySnuCon .myTabs li a {
    padding: 12px 0;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .mySnuCon .myTabs li a {
    padding: 8px 0;
    border-radius: 8px;
  }
}
#mySnu .mySnuMain .mySnuCon .myTabs li a svg path {
  fill: #396E9C;
}
#mySnu .mySnuMain .mySnuCon .myTabs li a.active {
  background: #396E9C;
}
#mySnu .mySnuMain .mySnuCon .myTabs li a.active svg path {
  fill: #fff;
}
#mySnu .mySnuMain .mySnuCon .myTabs li a.active span {
  color: #fff;
}
#mySnu .mySnuMain .mySnuCon .myTabs li a span {
  color: #626262;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .mySnuCon .myTabs li a span {
    font-size: 15px;
  }
}
#mySnu .mySnuMain .mySnuCon .mySubTitB {
  padding-left: 13px;
  color: #2A2A2A;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.6px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .mySnuCon .mySubTitB {
    font-size: 18px;
  }
}
#mySnu .mySnuMain .mySnuCon .mySubTitB .mySubTitBSub {
  color: #676767;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .mySnuCon .mySubTitB .mySubTitBSub {
    font-size: 14px;
  }
}
#mySnu .mySnuMain .mySnuCon .mySubTit {
  padding-left: 13px;
  color: #676767;
  font-size: 15px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.3px;
}
#mySnu .mySnuMain .colHead {
  margin-top: 45px;
  margin-bottom: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  border-bottom: 1px solid #E0E0E0;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .colHead {
    padding: 0;
  }
}
#mySnu .mySnuMain .colHead .colSearch {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#mySnu .mySnuMain .colHead .searchCon {
  position: relative;
  width: 216px;
}
#mySnu .mySnuMain .colHead .searchCon::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.71 19.29L17.31 15.9C18.407 14.5025 19.0022 12.7767 19 11C19 9.41775 18.5308 7.87103 17.6518 6.55544C16.7727 5.23985 15.5233 4.21447 14.0615 3.60897C12.5997 3.00347 10.9911 2.84504 9.43928 3.15372C7.88743 3.4624 6.46197 4.22433 5.34315 5.34315C4.22433 6.46197 3.4624 7.88743 3.15372 9.43928C2.84504 10.9911 3.00347 12.5997 3.60897 14.0615C4.21447 15.5233 5.23985 16.7727 6.55544 17.6518C7.87103 18.5308 9.41775 19 11 19C12.7767 19.0022 14.5025 18.407 15.9 17.31L19.29 20.71C19.383 20.8037 19.4936 20.8781 19.6154 20.9289C19.7373 20.9797 19.868 21.0058 20 21.0058C20.132 21.0058 20.2627 20.9797 20.3846 20.9289C20.5064 20.8781 20.617 20.8037 20.71 20.71C20.8037 20.617 20.8781 20.5064 20.9289 20.3846C20.9797 20.2627 21.0058 20.132 21.0058 20C21.0058 19.868 20.9797 19.7373 20.9289 19.6154C20.8781 19.4936 20.8037 19.383 20.71 19.29ZM5 11C5 9.81332 5.3519 8.65328 6.01119 7.66658C6.67047 6.67989 7.60755 5.91085 8.7039 5.45673C9.80026 5.0026 11.0067 4.88378 12.1705 5.11529C13.3344 5.3468 14.4035 5.91825 15.2426 6.75736C16.0818 7.59648 16.6532 8.66558 16.8847 9.82946C17.1162 10.9933 16.9974 12.1997 16.5433 13.2961C16.0892 14.3925 15.3201 15.3295 14.3334 15.9888C13.3467 16.6481 12.1867 17 11 17C9.4087 17 7.88258 16.3679 6.75736 15.2426C5.63214 14.1174 5 12.5913 5 11Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .mySnuMain .colHead .searchBtn {
  padding: 6px 12px;
  background: #919EAB;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
#mySnu .mySnuMain .colHead .resetBtn {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid rgba(145, 158, 171, 0.24);
  border-radius: 8px;
  color: #69737c;
  font-size: 15px;
  font-weight: 500;
}
#mySnu .mySnuMain .colHead .search {
  padding-left: 45px;
  border-radius: 8px;
  width: 100%;
  border: 1px solid rgba(145, 158, 171, 0.2);
  background: #FFF;
}
#mySnu .mySnuMain .colHead .search::-moz-placeholder {
  color: #919EAB;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
#mySnu .mySnuMain .colHead .search::placeholder {
  color: #919EAB;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .colHead .search::-moz-placeholder {
    font-size: 13px;
  }
  #mySnu .mySnuMain .colHead .search::placeholder {
    font-size: 13px;
  }
}
#mySnu .mySnuMain .colHead .colEdit {
  margin-bottom: 7px;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px 12px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .colHead .colEdit {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
#mySnu .mySnuMain .colHead .colEdit button {
  padding: 6px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.24);
  font-size: 15px;
  font-weight: 600;
  line-height: 146%;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .colHead .colEdit button {
    font-size: 13px;
  }
}
#mySnu .mySnuMain .colHead .colEdit .blueBtn {
  background: #396E9C;
  color: #fff;
}
#mySnu .mySnuMain .colHead .colEdit .whiteBtn {
  background: #fff;
  color: #1C252E;
}
#mySnu .mySnuMain .colHead .colInfom {
  display: flex;
  align-items: center;
  gap: 4px;
}
#mySnu .mySnuMain .colHead .colInfom svg path {
  fill: #396E9C;
}
#mySnu .mySnuMain .colHead .colInfom span {
  color: #637381;
  font-size: 16px;
  font-weight: 600;
}
#mySnu .mySnuMain .colHead .colInfom span.blue {
  color: #396E9C;
}
#mySnu .mySnuMain .collectionTab {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .collectionTab {
    gap: 12px;
  }
}
#mySnu .mySnuMain .collectionTab li {
  position: relative;
  padding-bottom: 12px;
}
#mySnu .mySnuMain .collectionTab li.noDivider.on::after {
  display: none;
}
#mySnu .mySnuMain .collectionTab li.on::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #396E9C;
}
#mySnu .mySnuMain .collectionTab li.on svg path {
  fill: #396E9C;
}
#mySnu .mySnuMain .collectionTab li.on span {
  color: #396E9C;
}
#mySnu .mySnuMain .collectionTab li.on .count {
  background: #396E9C;
}
#mySnu .mySnuMain .collectionTab li a {
  display: flex;
  align-items: center;
  gap: 5px;
}
#mySnu .mySnuMain .collectionTab li a span {
  color: #637381;
  font-size: 16px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .collectionTab li a span {
    font-size: 15px;
  }
}
#mySnu .mySnuMain .collectionTab li a span.count {
  padding: 0 6px;
  display: flex;
  min-width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background: rgba(145, 158, 171, 0.55);
  color: #FFF;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
#mySnu .mySnuMain .myReportCol {
  margin: 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .myReportCol {
    gap: 8px;
  }
}
#mySnu .mySnuMain .myReportCol .searchCon {
  position: relative;
  flex-grow: 1;
  min-height: 0;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .myReportCol .searchCon {
    min-width: 300px;
  }
}
#mySnu .mySnuMain .myReportCol .searchCon::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.71 19.29L17.31 15.9C18.407 14.5025 19.0022 12.7767 19 11C19 9.41775 18.5308 7.87103 17.6518 6.55544C16.7727 5.23985 15.5233 4.21447 14.0615 3.60897C12.5997 3.00347 10.9911 2.84504 9.43928 3.15372C7.88743 3.4624 6.46197 4.22433 5.34315 5.34315C4.22433 6.46197 3.4624 7.88743 3.15372 9.43928C2.84504 10.9911 3.00347 12.5997 3.60897 14.0615C4.21447 15.5233 5.23985 16.7727 6.55544 17.6518C7.87103 18.5308 9.41775 19 11 19C12.7767 19.0022 14.5025 18.407 15.9 17.31L19.29 20.71C19.383 20.8037 19.4936 20.8781 19.6154 20.9289C19.7373 20.9797 19.868 21.0058 20 21.0058C20.132 21.0058 20.2627 20.9797 20.3846 20.9289C20.5064 20.8781 20.617 20.8037 20.71 20.71C20.8037 20.617 20.8781 20.5064 20.9289 20.3846C20.9797 20.2627 21.0058 20.132 21.0058 20C21.0058 19.868 20.9797 19.7373 20.9289 19.6154C20.8781 19.4936 20.8037 19.383 20.71 19.29ZM5 11C5 9.81332 5.3519 8.65328 6.01119 7.66658C6.67047 6.67989 7.60755 5.91085 8.7039 5.45673C9.80026 5.0026 11.0067 4.88378 12.1705 5.11529C13.3344 5.3468 14.4035 5.91825 15.2426 6.75736C16.0818 7.59648 16.6532 8.66558 16.8847 9.82946C17.1162 10.9933 16.9974 12.1997 16.5433 13.2961C16.0892 14.3925 15.3201 15.3295 14.3334 15.9888C13.3467 16.6481 12.1867 17 11 17C9.4087 17 7.88258 16.3679 6.75736 15.2426C5.63214 14.1174 5 12.5913 5 11Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .mySnuMain .myReportCol .searchCon input {
  padding: 0 20px 0 46px;
  width: 100%;
  height: 54px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  background: #FFF;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .myReportCol .searchCon input {
    height: 40px;
  }
}
#mySnu .mySnuMain .myReportCol .searchCon input::-moz-placeholder {
  overflow: hidden;
  color: #919EAB;
  font-size: 15px;
  font-weight: 400;
}
#mySnu .mySnuMain .myReportCol .searchCon input::placeholder {
  overflow: hidden;
  color: #919EAB;
  font-size: 15px;
  font-weight: 400;
}
#mySnu .mySnuMain .myReportCol .myReportSel {
  position: relative;
}
#mySnu .mySnuMain .myReportCol .myReportSel .dropDownBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 182px;
  height: 54px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.24);
  background: #FFF;
}
@media screen and (max-width: 767px) {
  #mySnu .mySnuMain .myReportCol .myReportSel .dropDownBtn {
    height: 40px;
    width: 115px;
    gap: 20px;
  }
}
#mySnu .mySnuMain .myReportCol .myReportSel .dropDownBtn.on + .dropDownList {
  display: block;
}
#mySnu .mySnuMain .myReportCol .myReportSel .dropDownList {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
  background: #fff;
  z-index: 10;
}
#mySnu .mySnuMain .myReportCol .myReportSel .dropDownList a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  color: #000;
  font-weight: 400;
  line-height: 157%;
}
#mySnu #sub_bar.sub_bar_type2 {
  margin-bottom: 19px;
}
#mySnu h3.page_sub_tit {
  color: #676767;
}
#mySnu .collectionRecommend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}
@media screen and (max-width: 1024px) {
  #mySnu .collectionRecommend {
    gap: 20px 20px;
  }
}
#mySnu .collectionRecommend .recommendCard {
  position: relative;
  padding: 25px 20px;
  width: calc(33.3333% - 20px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
  box-sizing: border-box;
}
@media screen and (max-width: 1500px) {
  #mySnu .collectionRecommend .recommendCard {
    width: 100%;
  }
}
#mySnu .collectionRecommend .recommendCard > .likes {
  position: absolute;
  top: 26px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
#mySnu .collectionRecommend .recommendCard > .likes span {
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
}
#mySnu .collectionRecommend .recommendCard h3 {
  margin-bottom: 8px;
  color: #424242;
  font-size: 20px;
  font-weight: 600;
  line-height: 110%;
}
@media screen and (max-width: 767px) {
  #mySnu .collectionRecommend .recommendCard h3 {
    font-size: 18px;
  }
}
#mySnu .collectionRecommend .recommendCard h4 {
  margin-bottom: 15px;
  color: #737373;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 767px) {
  #mySnu .collectionRecommend .recommendCard h4 {
    font-size: 15px;
  }
}
#mySnu .collectionRecommend .recommendCard .colTags {
  margin-bottom: 55px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media screen and (max-width: 767px) {
  #mySnu .collectionRecommend .recommendCard .colTags {
    margin-bottom: 30px;
  }
}
#mySnu .collectionRecommend .recommendCard .colTags li {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(57, 110, 156, 0.39);
  background: rgba(57, 110, 156, 0.12);
  color: #396E9C;
  font-size: 15px;
  font-weight: 600;
  line-height: 146%;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 767px) {
  #mySnu .collectionRecommend .recommendCard .colTags li {
    font-size: 14px;
  }
}
#mySnu .collectionRecommend .recommendCard .collectionTab {
  padding: 15px 12px 0 12px;
  border-bottom: 1px solid #E0E0E0;
  overflow-x: auto;
  overflow-y: clip;
}
#mySnu .collectionRecommend .recommendCard .collectionTab li a span {
  font-size: 15px;
}
@media screen and (max-width: 767px) {
  #mySnu .collectionRecommend .recommendCard .collectionTab li a span {
    font-size: 14px;
  }
}
#mySnu .collectionRecommend .recommendCard .colBookBox {
  margin-bottom: 20px;
  border-radius: 12px;
  background: #F4F5F6;
}
#mySnu .collectionRecommend .recommendCard .colBookBox .colBookS {
  overflow: hidden;
  padding: 50px 50px 40px 50px;
}
#mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide {
  width: 98px;
  aspect-ratio: 98/136;
  border-radius: 4px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.25);
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s;
}
@media screen and (max-width: 767px) {
  #mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide {
    width: 80px;
    aspect-ratio: 80/111;
  }
}
#mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide.swiper-slide-active {
  transform: scale(1.2);
  opacity: 1;
  z-index: 2;
}
#mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide.swiper-slide-prev, #mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide.swiper-slide-next {
  opacity: 1;
  z-index: 1;
}
#mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide a {
  display: block;
}
#mySnu .collectionRecommend .recommendCard .colBookBox .colBookS .swiper-slide a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mySnu .collectionRecommend .recommendCard .edit {
  display: flex;
  gap: 10px;
}
#mySnu .collectionRecommend .recommendCard .edit li.pep a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M6.75098 7.5C8.40783 7.5 9.75098 6.15685 9.75098 4.5C9.75098 2.84315 8.40783 1.5 6.75098 1.5C5.09412 1.5 3.75098 2.84315 3.75098 4.5C3.75098 6.15685 5.09412 7.5 6.75098 7.5Z' fill='%23919EAB'/%3E%3Cpath d='M6.75098 15.7507C9.65047 15.7507 12.001 14.4076 12.001 12.7507C12.001 11.0939 9.65047 9.75075 6.75098 9.75075C3.85148 9.75075 1.50098 11.0939 1.50098 12.7507C1.50098 14.4076 3.85148 15.7507 6.75098 15.7507Z' fill='%23919EAB'/%3E%3Cpath d='M15.7502 12.75C15.7502 13.9928 14.2232 15 12.3595 15C12.9085 14.4 13.2865 13.6463 13.2865 12.7515C13.2865 11.8553 12.9077 11.1015 12.3572 10.5008C14.2217 10.5 15.7502 11.508 15.7502 12.75ZM13.5002 4.5C13.5005 4.86204 13.4133 5.21879 13.2462 5.53996C13.0792 5.86113 12.837 6.13723 12.5404 6.34483C12.2438 6.55243 11.9015 6.68539 11.5425 6.73243C11.1836 6.77946 10.8186 6.73918 10.4785 6.615C10.8449 5.97041 11.0369 5.24145 11.0357 4.5C11.0357 3.73125 10.8332 3.00975 10.4792 2.38575C10.8193 2.26172 11.1842 2.22156 11.5431 2.26867C11.9019 2.31577 12.2441 2.44876 12.5406 2.65634C12.8371 2.86392 13.0792 3.13997 13.2462 3.46106C13.4133 3.78215 13.5004 4.13805 13.5002 4.5Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .collectionRecommend .recommendCard .edit li.like a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M15.2026 12.1991L15.7313 9.13912C15.7623 8.95977 15.7538 8.77581 15.7063 8.6001C15.6588 8.42439 15.5735 8.26118 15.4564 8.12188C15.3392 7.98258 15.193 7.87056 15.0281 7.79365C14.8631 7.71674 14.6833 7.6768 14.5013 7.67662H10.6156C10.5249 7.67664 10.4353 7.65692 10.353 7.61882C10.2707 7.58073 10.1977 7.52517 10.139 7.45602C10.0803 7.38687 10.0374 7.30577 10.0133 7.21836C9.9891 7.13096 9.98425 7.03934 9.99906 6.94987L10.4963 3.91612C10.577 3.42355 10.554 2.91955 10.4288 2.43637C10.3752 2.23672 10.2721 2.05386 10.1289 1.90477C9.98569 1.75568 9.80713 1.64521 9.60981 1.58362L9.50106 1.54837C9.25518 1.46939 8.98839 1.48764 8.75556 1.59937C8.50056 1.72237 8.31456 1.94662 8.24556 2.21287L7.88856 3.58837C7.77491 4.02609 7.60975 4.44879 7.39656 4.84762C7.08531 5.43037 6.60381 5.89762 6.10281 6.32887L5.02356 7.25887C4.87384 7.38826 4.7569 7.55127 4.68233 7.73457C4.60776 7.91786 4.57768 8.11621 4.59456 8.31337L5.20356 15.3581C5.2304 15.6697 5.37309 15.9598 5.60345 16.1713C5.83381 16.3828 6.1351 16.5002 6.44781 16.5004H9.93381C12.5453 16.5004 14.7736 14.6809 15.2026 12.1991Z' fill='%23919EAB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.22606 7.11412C2.371 7.10779 2.51279 7.1577 2.6218 7.25343C2.73082 7.34917 2.79862 7.48332 2.81106 7.62787L3.53856 16.0549C3.55088 16.1804 3.5375 16.307 3.49922 16.4272C3.46093 16.5473 3.39857 16.6584 3.31592 16.7536C3.23327 16.8489 3.13207 16.9263 3.01851 16.9811C2.90495 17.0359 2.78141 17.067 2.65543 17.0724C2.52946 17.0779 2.40369 17.0576 2.28581 17.0128C2.16794 16.9681 2.06042 16.8997 1.96984 16.812C1.87926 16.7243 1.80751 16.619 1.75898 16.5026C1.71044 16.3863 1.68614 16.2612 1.68756 16.1351V7.67587C1.68762 7.53088 1.74366 7.39152 1.844 7.28685C1.94433 7.18219 2.0812 7.12031 2.22606 7.11412Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .collectionRecommend .recommendCard .edit li.share a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.20167 3.55599C9.20167 2.32932 10.2017 1.33399 11.4337 1.33399C11.7262 1.33329 12.0159 1.39021 12.2864 1.50149C12.5569 1.61278 12.8029 1.77626 13.0102 1.98259C13.2175 2.18892 13.3822 2.43407 13.4948 2.70403C13.6073 2.974 13.6656 3.26349 13.6663 3.55599C13.6663 4.78332 12.6663 5.77866 11.4337 5.77866C11.1381 5.77902 10.8453 5.72063 10.5725 5.60686C10.2996 5.4931 10.0521 5.32625 9.84434 5.11599L6.75434 7.21999C6.8404 7.64866 6.79819 8.09318 6.63301 8.49799L10.021 10.7247C10.4201 10.3992 10.9194 10.2218 11.4343 10.2227C11.7268 10.222 12.0166 10.279 12.2871 10.3904C12.5575 10.5018 12.8034 10.6653 13.0107 10.8717C13.2179 11.0781 13.3825 11.3233 13.495 11.5933C13.6075 11.8633 13.6657 12.1528 13.6663 12.4453C13.6663 13.672 12.6663 14.6673 11.4337 14.6673C10.8431 14.6686 10.2761 14.4352 9.85758 14.0185C9.43902 13.6018 9.20309 13.0359 9.20167 12.4453C9.20116 12.1337 9.26683 11.8256 9.39434 11.5413L6.03301 9.33399C5.62595 9.68793 5.10442 9.88237 4.56501 9.88132C4.27249 9.88202 3.98269 9.82508 3.71218 9.71374C3.44168 9.60241 3.19576 9.43886 2.98848 9.23245C2.7812 9.02604 2.61663 8.78081 2.50416 8.51077C2.39169 8.24073 2.33353 7.95118 2.33301 7.65866C2.33362 7.36619 2.39184 7.07671 2.50435 6.80675C2.61686 6.53679 2.78145 6.29164 2.98872 6.0853C3.19599 5.87895 3.44188 5.71547 3.71234 5.60417C3.9828 5.49288 4.27254 5.43596 4.56501 5.43666C5.27434 5.43666 5.90501 5.76532 6.31367 6.27732L9.30901 4.23799C9.23774 4.01768 9.20153 3.78754 9.20167 3.55599Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .collectionRecommend .recommendCard .edit li.edit a {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.54977 13.6127L14.0968 8.06573C13.1635 7.67608 12.3159 7.10679 11.6023 6.39023C10.8854 5.67639 10.3158 4.82856 9.92602 3.89498L4.37902 9.44198C3.94627 9.87473 3.72952 10.0915 3.54352 10.33C3.32385 10.6114 3.13549 10.916 2.98177 11.2382C2.85202 11.5112 2.75527 11.8022 2.56177 12.3827L1.54027 15.445C1.49326 15.5852 1.48628 15.7357 1.52013 15.8797C1.55398 16.0236 1.62731 16.1553 1.73187 16.2599C1.83644 16.3644 1.9681 16.4378 2.11206 16.4716C2.25602 16.5055 2.40656 16.4985 2.54677 16.4515L5.60902 15.43C6.19027 15.2365 6.48052 15.1397 6.75352 15.01C7.07602 14.8562 7.38052 14.668 7.66177 14.4482C7.90027 14.2622 8.11702 14.0455 8.54977 13.6127ZM15.6358 6.52673C16.1888 5.97365 16.4996 5.22352 16.4996 4.44135C16.4996 3.65919 16.1888 2.90905 15.6358 2.35598C15.0827 1.8029 14.3326 1.49219 13.5504 1.49219C12.7682 1.49219 12.0181 1.8029 11.465 2.35598L10.7998 3.02123L10.8283 3.10448C11.1561 4.04252 11.6926 4.8939 12.3973 5.59448C13.1188 6.32025 14 6.86731 14.9705 7.19198L15.6358 6.52673Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .collectionRecommend .recommendCard .edit li.del {
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M2.25 4.78169C2.25 4.41869 2.50875 4.12394 2.82825 4.12394H4.827C5.22375 4.11194 5.574 3.82469 5.709 3.40019L5.7315 3.32519L5.81775 3.03194C5.87025 2.85194 5.916 2.69444 5.9805 2.55419C6.234 1.99994 6.7035 1.61519 7.24575 1.51694C7.38375 1.49219 7.52925 1.49219 7.69575 1.49219H10.3043C10.4715 1.49219 10.617 1.49219 10.7542 1.51694C11.2965 1.61519 11.7667 1.99994 12.0195 2.55419C12.084 2.69444 12.1297 2.85119 12.183 3.03194L12.2685 3.32519L12.291 3.40019C12.426 3.82469 12.846 4.11269 13.2435 4.12394H15.171C15.4913 4.12394 15.75 4.41869 15.75 4.78169C15.75 5.14469 15.4913 5.43944 15.1718 5.43944H2.8275C2.50875 5.43944 2.25 5.14469 2.25 4.78169Z' fill='%23919EAB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.697 16.4922H9.303C11.3903 16.4922 12.4335 16.4922 13.113 15.8277C13.791 15.1632 13.86 14.0734 13.9988 11.8939L14.199 8.75294C14.274 7.57019 14.3115 6.97844 13.9718 6.60419C13.6312 6.22919 13.0568 6.22919 11.907 6.22919H6.093C4.94325 6.22919 4.368 6.22919 4.02825 6.60419C3.68775 6.97919 3.72525 7.57019 3.801 8.75294L4.00125 11.8939C4.14 14.0734 4.209 15.1639 4.88775 15.8277C5.5665 16.4922 6.60975 16.4922 8.697 16.4922ZM7.6845 9.13394C7.6545 8.80844 7.3785 8.57144 7.0695 8.60369C6.75975 8.63594 6.53475 8.92619 6.5655 9.25169L6.9405 13.1989C6.9705 13.5244 7.2465 13.7614 7.5555 13.7292C7.86525 13.6969 8.09025 13.4067 8.0595 13.0812L7.6845 9.13394ZM10.9312 8.60369C11.2402 8.63594 11.466 8.92619 11.4345 9.25169L11.0595 13.1989C11.0295 13.5244 10.7527 13.7614 10.4445 13.7292C10.1347 13.6969 9.90975 13.4067 9.9405 13.0812L10.3155 9.13394C10.3455 8.80844 10.623 8.57144 10.9312 8.60369Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .collectionRecommend .recommendCard .edit li .nickname {
  color: #637381;
  font-size: 13px;
  font-weight: 400;
}
#mySnu .collectionRecommend .recommendCard .edit li a {
  padding-left: 21px;
  display: block;
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 400;
  line-height: 138%;
}
#mySnu .favoriteCon {
  margin-top: 37px;
}
#mySnu .favoriteCon .editHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mySnu .favoriteCon .editHeader button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
#mySnu .checkboxCon input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
#mySnu .checkboxCon input[type=checkbox]:checked + label .check-icon {
  background: #0078FE;
  border-color: #0078FE;
}
#mySnu .checkboxCon input[type=checkbox]:checked + label .check-icon:after {
  opacity: 1;
}
#mySnu .checkboxCon label {
  padding-left: 0;
}
#mySnu .checkboxCon .check-icon {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  border: 1px solid rgba(145, 158, 171, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}
#mySnu .checkboxCon .check-icon:after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
}
#mySnu .boxStyle {
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.16);
  background: #FFF;
  box-shadow: 0 12px 12px -4px rgba(145, 158, 171, 0.12);
}
#mySnu .ListConBox {
  position: relative;
  display: block;
  margin-top: 20px;
  padding: 25px 30px 15px 60px;
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.16);
  background: #FFF;
  box-shadow: 0 12px 12px -4px rgba(145, 158, 171, 0.12);
}
#mySnu .ListConBox.load {
  padding: 30px 25px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox.load {
    padding: 41px 25px 15px 25px;
  }
}
#mySnu .ListConBox.loadEdit .inputBoxCon {
  margin-top: 0;
  gap: 0;
  max-width: 600px;
  width: 100%;
}
#mySnu .ListConBox.loadEdit .aiComment {
  margin-bottom: 0;
  margin-top: 20px;
}
#mySnu .ListConBox.loadEdit .locationBox {
  gap: 60px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox {
    padding: 25px 25px 15px 25px;
  }
}
#mySnu .ListConBox:not(:last-child) {
  margin-bottom: 20px;
}
#mySnu .ListConBox .likeStar {
  position: absolute;
  top: 14px;
  right: 29px;
  width: 20px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'%3E%3Cg clip-path='url(%23clip0_1356_5903)'%3E%3Cpath d='M9.0036 0.624274L6.73624 5.27896L1.66332 6.02779C0.753597 6.16138 0.389014 7.29693 1.04874 7.94732L4.71887 11.5684L3.85082 16.6836C3.69457 17.6083 4.65637 18.3008 5.46193 17.8684L10.0001 15.4532L14.5383 17.8684C15.3439 18.2973 16.3057 17.6083 16.1494 16.6836L15.2814 11.5684L18.9515 7.94732C19.6112 7.29693 19.2467 6.16138 18.3369 6.02779L13.264 5.27896L10.9967 0.624274C10.5904 -0.205414 9.41332 -0.215961 9.0036 0.624274Z' fill='%23FFAB00'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1356_5903'%3E%3Crect width='20' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .ListConBox .likeStar:hover .tooltip {
  display: block;
}
#mySnu .ListConBox .likeStar .tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: #183989;
  border-radius: 5px;
  color: #fff;
  padding: 5px;
  font-size: 12px;
}
#mySnu .ListConBox .likeStar .tooltip::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8.66px solid #183989;
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
}
#mySnu .ListConBox .editLeft {
  position: absolute;
  top: 22px;
  left: 22px;
}
#mySnu .ListConBox .listWBox {
  display: flex;
  gap: 40px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .listWBox {
    flex-wrap: wrap;
  }
}
#mySnu .ListConBox .listWBox .imgCon {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .listWBox .imgCon {
    width: 100%;
  }
}
#mySnu .ListConBox .listWBox .imgCon a {
  display: block;
  width: 134px;
  aspect-ratio: 134/180;
  border-radius: 12px;
  border: 1px solid rgba(145, 158, 171, 0.28);
  background: #C3C3C3;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .listWBox .imgCon a {
    width: 120px;
  }
}
#mySnu .ListConBox .listWBox .imgCon a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mySnu .ListConBox .textCon {
  display: flex;
  flex-direction: column;
}
#mySnu .ListConBox .textCon h3 {
  margin-bottom: 8px;
  color: #2A2A2A;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .textCon h3 {
    margin-bottom: 3px;
    font-size: 17px;
  }
}
#mySnu .ListConBox .textCon h3:has(.classify) {
  display: flex;
  align-items: center;
  gap: 20px;
}
#mySnu .ListConBox .textCon .classify {
  padding: 2px 6px;
  display: inline-block;
  border-radius: 6px;
  background: #CCF1F7;
  color: #00B8D9;
  font-size: 13px;
  font-weight: 700;
  line-height: 154%;
}
#mySnu .ListConBox .textCon .subInfo {
  margin-bottom: 8px;
  display: block;
  color: #9E9E9E;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.45px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .textCon .subInfo {
    margin-bottom: 3px;
    font-size: 14px;
  }
}
#mySnu .ListConBox .textCon .desc {
  margin-bottom: 20px;
  color: #737373;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.48px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .textCon .desc {
    margin-bottom: 15px;
  }
}
#mySnu .ListConBox .aiComment {
  margin-bottom: 20px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  max-width: 100%;
  border: 1px solid rgba(0, 184, 217, 0.16);
  background: rgba(0, 184, 217, 0.08);
}
#mySnu .ListConBox .aiComment svg {
  flex-shrink: 0;
}
#mySnu .ListConBox .aiComment .memoText {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid #00B8D9;
  color: #00B8D9;
  font-size: 13px;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .aiComment .memoText {
    font-size: 11px;
  }
}
#mySnu .ListConBox .aiComment p {
  flex: 1;
  min-width: 0;
  color: #006C9C;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .aiComment p {
    font-size: 13px;
  }
}
#mySnu .ListConBox .topInfo {
  margin-top: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 17px;
}
#mySnu .ListConBox .topInfo a {
  display: flex;
  align-items: center;
  gap: 3px;
}
#mySnu .ListConBox .topInfo a.star.selected svg path {
  fill: #FF5630;
}
#mySnu .ListConBox .topInfo a.xi-eye, #mySnu .ListConBox .topInfo a.xi-eye-off {
  color: #7D8B98;
}
#mySnu .ListConBox .topInfo a span {
  color: #7D8B98;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -1px;
}
#mySnu .ListConBox .inputBox {
  position: relative;
  margin-top: 30px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .inputBox {
    margin-top: 20px;
  }
}
#mySnu .ListConBox .inputBox .memo {
  padding: 3px 8px;
  position: absolute;
  width: -moz-max-content;
  width: max-content;
  left: 5px;
  top: -16px;
  border-radius: 6px;
  background: #FF715B;
  color: #FFF;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 500;
  line-height: 138%;
}
#mySnu .ListConBox .inputBox input {
  padding: 0 14px;
  width: 100%;
  height: 54px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  border-radius: 8px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .inputBox input {
    height: 45px;
  }
}
#mySnu .ListConBox .inputBox input::-moz-placeholder {
  color: #919EAB;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
#mySnu .ListConBox .inputBox input::placeholder {
  color: #919EAB;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
#mySnu .ListConBox .inputBox .nPopupCtrl {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}
#mySnu .ListConBox .editBtnCon {
  position: absolute;
  top: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 11px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .editBtnCon {
    top: 10px;
    right: 10px;
  }
}
#mySnu .ListConBox .editBtnCon button {
  padding: 6px 17px 6px 40px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.24);
  background: #FFF;
  font-size: 15px;
  font-weight: 600;
  line-height: 146%;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 1024px) {
  #mySnu .ListConBox .editBtnCon button {
    padding: 4px 12px 4px 35px;
    background-position: left 11px center !important;
    font-weight: 500;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .editBtnCon button {
    font-size: 13px;
  }
}
#mySnu .ListConBox .editBtnCon .edit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.54977 13.6127L14.0968 8.06573C13.1635 7.67608 12.3159 7.10679 11.6023 6.39023C10.8854 5.67639 10.3158 4.82856 9.92602 3.89498L4.37902 9.44198C3.94627 9.87473 3.72952 10.0915 3.54352 10.33C3.32385 10.6114 3.13549 10.916 2.98177 11.2382C2.85202 11.5112 2.75527 11.8022 2.56177 12.3827L1.54027 15.445C1.49326 15.5852 1.48628 15.7357 1.52013 15.8797C1.55398 16.0236 1.62731 16.1553 1.73187 16.2599C1.83644 16.3644 1.9681 16.4378 2.11206 16.4716C2.25602 16.5055 2.40656 16.4985 2.54677 16.4515L5.60902 15.43C6.19027 15.2365 6.48052 15.1397 6.75352 15.01C7.07602 14.8562 7.38052 14.668 7.66177 14.4482C7.90027 14.2622 8.11702 14.0455 8.54977 13.6127ZM15.6358 6.52673C16.1888 5.97365 16.4996 5.22352 16.4996 4.44135C16.4996 3.65919 16.1888 2.90905 15.6358 2.35598C15.0827 1.8029 14.3326 1.49219 13.5504 1.49219C12.7682 1.49219 12.0181 1.8029 11.465 2.35598L10.7998 3.02123L10.8283 3.10448C11.1561 4.04252 11.6926 4.8939 12.3973 5.59448C13.1188 6.32025 14 6.86731 14.9705 7.19198L15.6358 6.52673Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left 17px center;
  color: #919EAB;
}
#mySnu .ListConBox .editBtnCon .del {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M2.25 4.78169C2.25 4.41869 2.50875 4.12394 2.82825 4.12394H4.827C5.22375 4.11194 5.574 3.82469 5.709 3.40019L5.7315 3.32519L5.81775 3.03194C5.87025 2.85194 5.916 2.69444 5.9805 2.55419C6.234 1.99994 6.7035 1.61519 7.24575 1.51694C7.38375 1.49219 7.52925 1.49219 7.69575 1.49219H10.3043C10.4715 1.49219 10.617 1.49219 10.7542 1.51694C11.2965 1.61519 11.7667 1.99994 12.0195 2.55419C12.084 2.69444 12.1297 2.85119 12.183 3.03194L12.2685 3.32519L12.291 3.40019C12.426 3.82469 12.846 4.11269 13.2435 4.12394H15.171C15.4913 4.12394 15.75 4.41869 15.75 4.78169C15.75 5.14469 15.4913 5.43944 15.1718 5.43944H2.8275C2.50875 5.43944 2.25 5.14469 2.25 4.78169Z' fill='%23FF5630'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.697 16.4922H9.303C11.3903 16.4922 12.4335 16.4922 13.113 15.8277C13.791 15.1632 13.86 14.0734 13.9988 11.8939L14.199 8.75294C14.274 7.57019 14.3115 6.97844 13.9718 6.60419C13.6312 6.22919 13.0568 6.22919 11.907 6.22919H6.093C4.94325 6.22919 4.368 6.22919 4.02825 6.60419C3.68775 6.97919 3.72525 7.57019 3.801 8.75294L4.00125 11.8939C4.14 14.0734 4.209 15.1639 4.88775 15.8277C5.5665 16.4922 6.60975 16.4922 8.697 16.4922ZM7.6845 9.13394C7.6545 8.80844 7.3785 8.57144 7.0695 8.60369C6.75975 8.63594 6.53475 8.92619 6.5655 9.25169L6.9405 13.1989C6.9705 13.5244 7.2465 13.7614 7.5555 13.7292C7.86525 13.6969 8.09025 13.4067 8.0595 13.0812L7.6845 9.13394ZM10.9312 8.60369C11.2402 8.63594 11.466 8.92619 11.4345 9.25169L11.0595 13.1989C11.0295 13.5244 10.7527 13.7614 10.4445 13.7292C10.1347 13.6969 9.90975 13.4067 9.9405 13.0812L10.3155 9.13394C10.3455 8.80844 10.623 8.57144 10.9312 8.60369Z' fill='%23FF5630'/%3E%3C/svg%3E") no-repeat left 17px center;
  color: #FF5630;
}
#mySnu .ListConBox .locationBox {
  margin-top: 28px;
  padding: 30px 35px;
  display: flex;
  align-items: center;
  gap: 60px;
  border-radius: 12px;
  background: #F4F5F6;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .locationBox {
    padding: 15px 20px;
    gap: 20px;
  }
}
#mySnu .ListConBox .locationBox > div {
  flex-shrink: 0;
}
#mySnu .ListConBox .locationBox .info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 19px;
}
#mySnu .ListConBox .locationBox .info.infoDet {
  flex-direction: column;
  text-align: center;
}
#mySnu .ListConBox .locationBox .info.infoDet .ghostTags {
  justify-content: center;
}
#mySnu .ListConBox .locationBox .info .infoDelBtn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: #FF715B;
}
#mySnu .ListConBox .locationBox .info .imgCon {
  width: 112px;
  aspect-ratio: 112/150;
  border-radius: 12px;
  border: 1px solid rgba(145, 158, 171, 0.28);
  overflow: hidden;
}
#mySnu .ListConBox .locationBox .info .imgCon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mySnu .ListConBox .locationBox .info .classify {
  margin-bottom: 13px;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .locationBox .info .classify {
    margin-bottom: 8px;
  }
}
#mySnu .ListConBox .locationBox .info .classify.red {
  background: #F6DBD6;
  color: #FF5630;
}
#mySnu .ListConBox .locationBox .info h3 {
  color: #393939;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.54px;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #mySnu .ListConBox .locationBox .info h3 {
    font-size: 15px;
  }
}
#mySnu .ListConBox .locationBox .arrow {
  position: relative;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='15' viewBox='0 0 27 15' fill='none'%3E%3Cpath d='M26.7071 8.07039C27.0976 7.67986 27.0976 7.0467 26.7071 6.65617L20.3431 0.292213C19.9526 -0.0983109 19.3195 -0.0983109 18.9289 0.292213C18.5384 0.682738 18.5384 1.3159 18.9289 1.70643L24.5858 7.36328L18.9289 13.0201C18.5384 13.4107 18.5384 14.0438 18.9289 14.4343C19.3195 14.8249 19.9526 14.8249 20.3431 14.4343L26.7071 8.07039ZM0 7.36328V8.36328H26V7.36328V6.36328H0V7.36328Z' fill='%230078FE'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .ListConBox .locationBox .arrow .addMore {
  padding: 6px 6px;
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  color: #0078FE;
  display: flex;
  gap: 4px;
  border-radius: 9px;
  border: 2px dashed #0078FE;
  width: -moz-max-content;
  width: max-content;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
#mySnu .ListConBox .locationBox .locationCenter .top {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85px;
  height: 62px;
}
#mySnu .ListConBox .locationBox .locationCenter .top .circle {
  position: absolute;
  width: 62px;
  height: 62px;
  background: rgba(145, 158, 171, 0.55);
  border-radius: 50%;
}
#mySnu .ListConBox .locationBox .locationCenter .top .circle:first-of-type {
  left: 0;
  top: 0;
}
#mySnu .ListConBox .locationBox .locationCenter .top .circle:last-of-type {
  right: 0;
  bottom: 0;
}
#mySnu .ListConBox .locationBox .locationCenter .top span {
  position: relative;
  color: #FFF;
  font-family: "Public Sans";
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.36px;
  z-index: 1;
}
#mySnu .ListConBox .locationBox .locationCenter .bottom {
  margin-top: 16px;
}
#mySnu .ListConBox .locationBox .locationCenter .bottom span {
  display: block;
  text-align: center;
  color: #393939;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.48px;
}
#mySnu .reviewCon {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon {
    flex-direction: column;
  }
}
#mySnu .reviewCon .thumbnail {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 430px;
}
@media screen and (max-width: 1500px) {
  #mySnu .reviewCon .thumbnail {
    width: 350px;
  }
}
@media screen and (max-width: 1200px) {
  #mySnu .reviewCon .thumbnail {
    width: 330px;
  }
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon .thumbnail {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  }
}
#mySnu .reviewCon .thumbnail .thumbBox {
  padding: 20px 15px;
  display: flex;
  gap: 37px;
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.16);
  background: #FFF;
  box-shadow: 0 12px 12px -4px rgba(145, 158, 171, 0.12);
}
@media screen and (max-width: 1200px) {
  #mySnu .reviewCon .thumbnail .thumbBox {
    gap: 20px;
  }
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon .thumbnail .thumbBox {
    width: 265px;
    flex-shrink: 0;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .reviewCon .thumbnail .thumbBox {
    padding: 15px 10px;
    width: 240px;
    gap: 15px;
  }
}
#mySnu .reviewCon .thumbnail .thumbBox.active {
  border: 2px solid #00B8D9;
}
#mySnu .reviewCon .thumbnail .thumbBox .imgCon {
  flex-shrink: 0;
  width: 83px;
  aspect-ratio: 83/126;
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon .thumbnail .thumbBox .imgCon {
    width: 70px;
  }
}
#mySnu .reviewCon .thumbnail .thumbBox .imgCon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mySnu .reviewCon .reviewDCon {
  padding: 30px 25px;
  position: sticky;
  top: 150px;
  display: block;
  flex: 1;
  border-radius: 16px;
  background: #FFF;
}
@media screen and (max-width: 767px) {
  #mySnu .reviewCon .reviewDCon {
    padding: 25px 20px;
  }
}
#mySnu .reviewCon .reviewDCon .top {
  margin-bottom: 35px;
  padding: 20px 15px;
  display: flex;
  gap: 30px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.2);
  background: rgba(145, 158, 171, 0.1);
}
#mySnu .reviewCon .reviewDCon .top .imgCon {
  width: 83px;
  aspect-ratio: 83/126;
}
#mySnu .reviewCon .reviewDCon .top .imgCon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mySnu .reviewCon .reviewDCon .bottom {
  position: relative;
}
#mySnu .reviewCon .reviewDCon .bottom .editBtnCon {
  position: absolute;
  top: -26px;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
#mySnu .reviewCon .reviewDCon .bottom .editBtnCon button {
  padding: 4px 10px 4px 33px;
  border-radius: 6px;
  border: 1px solid rgba(145, 158, 171, 0.24);
  background: #FFF;
  font-size: 13px;
  font-weight: 600;
  line-height: 146%;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon .reviewDCon .bottom .editBtnCon button {
    padding: 4px 12px 4px 35px;
    background-position: left 11px center !important;
    font-weight: 500;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .reviewCon .reviewDCon .bottom .editBtnCon button {
    font-size: 13px;
  }
}
#mySnu .reviewCon .reviewDCon .bottom .editBtnCon .edit {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.54977 13.6127L14.0968 8.06573C13.1635 7.67608 12.3159 7.10679 11.6023 6.39023C10.8854 5.67639 10.3158 4.82856 9.92602 3.89498L4.37902 9.44198C3.94627 9.87473 3.72952 10.0915 3.54352 10.33C3.32385 10.6114 3.13549 10.916 2.98177 11.2382C2.85202 11.5112 2.75527 11.8022 2.56177 12.3827L1.54027 15.445C1.49326 15.5852 1.48628 15.7357 1.52013 15.8797C1.55398 16.0236 1.62731 16.1553 1.73187 16.2599C1.83644 16.3644 1.9681 16.4378 2.11206 16.4716C2.25602 16.5055 2.40656 16.4985 2.54677 16.4515L5.60902 15.43C6.19027 15.2365 6.48052 15.1397 6.75352 15.01C7.07602 14.8562 7.38052 14.668 7.66177 14.4482C7.90027 14.2622 8.11702 14.0455 8.54977 13.6127ZM15.6358 6.52673C16.1888 5.97365 16.4996 5.22352 16.4996 4.44135C16.4996 3.65919 16.1888 2.90905 15.6358 2.35598C15.0827 1.8029 14.3326 1.49219 13.5504 1.49219C12.7682 1.49219 12.0181 1.8029 11.465 2.35598L10.7998 3.02123L10.8283 3.10448C11.1561 4.04252 11.6926 4.8939 12.3973 5.59448C13.1188 6.32025 14 6.86731 14.9705 7.19198L15.6358 6.52673Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left 10px center;
  color: #919EAB;
}
#mySnu .reviewCon .reviewDCon .bottom .editBtnCon .del {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M2.25 4.78169C2.25 4.41869 2.50875 4.12394 2.82825 4.12394H4.827C5.22375 4.11194 5.574 3.82469 5.709 3.40019L5.7315 3.32519L5.81775 3.03194C5.87025 2.85194 5.916 2.69444 5.9805 2.55419C6.234 1.99994 6.7035 1.61519 7.24575 1.51694C7.38375 1.49219 7.52925 1.49219 7.69575 1.49219H10.3043C10.4715 1.49219 10.617 1.49219 10.7542 1.51694C11.2965 1.61519 11.7667 1.99994 12.0195 2.55419C12.084 2.69444 12.1297 2.85119 12.183 3.03194L12.2685 3.32519L12.291 3.40019C12.426 3.82469 12.846 4.11269 13.2435 4.12394H15.171C15.4913 4.12394 15.75 4.41869 15.75 4.78169C15.75 5.14469 15.4913 5.43944 15.1718 5.43944H2.8275C2.50875 5.43944 2.25 5.14469 2.25 4.78169Z' fill='%23FF5630'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.697 16.4922H9.303C11.3903 16.4922 12.4335 16.4922 13.113 15.8277C13.791 15.1632 13.86 14.0734 13.9988 11.8939L14.199 8.75294C14.274 7.57019 14.3115 6.97844 13.9718 6.60419C13.6312 6.22919 13.0568 6.22919 11.907 6.22919H6.093C4.94325 6.22919 4.368 6.22919 4.02825 6.60419C3.68775 6.97919 3.72525 7.57019 3.801 8.75294L4.00125 11.8939C4.14 14.0734 4.209 15.1639 4.88775 15.8277C5.5665 16.4922 6.60975 16.4922 8.697 16.4922ZM7.6845 9.13394C7.6545 8.80844 7.3785 8.57144 7.0695 8.60369C6.75975 8.63594 6.53475 8.92619 6.5655 9.25169L6.9405 13.1989C6.9705 13.5244 7.2465 13.7614 7.5555 13.7292C7.86525 13.6969 8.09025 13.4067 8.0595 13.0812L7.6845 9.13394ZM10.9312 8.60369C11.2402 8.63594 11.466 8.92619 11.4345 9.25169L11.0595 13.1989C11.0295 13.5244 10.7527 13.7614 10.4445 13.7292C10.1347 13.6969 9.90975 13.4067 9.9405 13.0812L10.3155 9.13394C10.3455 8.80844 10.623 8.57144 10.9312 8.60369Z' fill='%23FF5630'/%3E%3C/svg%3E") no-repeat left 10px center;
  color: #FF5630;
}
#mySnu .reviewCon .reviewDCon .bottom h4 {
  margin-bottom: 7px;
}
#mySnu .reviewCon .reviewDCon .bottom .date {
  margin-bottom: 35px;
}
@media screen and (max-width: 767px) {
  #mySnu .reviewCon .reviewDCon .bottom .date {
    margin-bottom: 25px;
  }
}
#mySnu .reviewCon .reviewDCon .bottom p {
  color: #56595B;
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.48px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}
@media screen and (max-width: 767px) {
  #mySnu .reviewCon .reviewDCon .bottom p {
    font-size: 15px;
  }
}
#mySnu .reviewCon .reviewDCon .bottom .viewMore {
  position: relative;
  margin-top: 15px;
  padding-left: 21px;
  display: inline-block;
  color: #00B8D9;
  font-size: 14px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.42px;
}
#mySnu .reviewCon .reviewDCon .bottom .viewMore::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.99955 10.3335C7.84378 10.3338 7.69282 10.2796 7.57288 10.1802L3.57288 6.84687C3.28938 6.61122 3.25057 6.19037 3.48621 5.90687C3.72186 5.62336 4.14271 5.58456 4.42621 5.8202L7.99955 8.80687L11.5729 5.92687C11.7106 5.81502 11.8872 5.76269 12.0637 5.78146C12.2401 5.80022 12.4018 5.88855 12.5129 6.02687C12.6363 6.16544 12.6964 6.34918 12.6787 6.5339C12.661 6.71863 12.5671 6.88761 12.4195 7.0002L8.41955 10.2202C8.29616 10.3039 8.14828 10.3438 7.99955 10.3335Z' fill='%2300B8D9'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .reviewCon .textCon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
@media screen and (max-width: 1200px) {
  #mySnu .reviewCon .textCon {
    gap: 0;
  }
}
#mySnu .reviewCon .textCon h4 {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#mySnu .reviewCon h4 {
  color: #2A2A2A;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.54px;
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon h4 {
    font-size: 16px;
  }
}
#mySnu .reviewCon .subTit {
  display: block;
  color: #9E9E9E;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.45px;
}
@media screen and (max-width: 1024px) {
  #mySnu .reviewCon .subTit {
    font-size: 14px;
  }
}
#mySnu .reviewCon .reviewB {
  padding: 4px 12px;
  margin-top: auto;
  border-radius: 30px;
  border: 1px solid #00B8D9;
  background: #EBFAFC;
  color: #00B8D9;
  font-size: 14px;
  font-weight: 600;
  line-height: 157%;
}
#mySnu .myActivated {
  margin: 20px 0 30px;
  display: flex;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 767px) {
  #mySnu .myActivated {
    flex-wrap: wrap;
    gap: 15px;
  }
}
#mySnu .myActivated li {
  flex: 1;
  padding: 30px 25px;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  background: #DBECFF;
}
@media screen and (max-width: 767px) {
  #mySnu .myActivated li {
    gap: 15px;
    padding: 15px;
    min-width: 187px;
  }
}
#mySnu .myActivated .tit {
  display: block;
  color: #637381;
  font-size: 15px;
  font-weight: 400;
  line-height: 146%;
  letter-spacing: -0.3px;
}
#mySnu .myActivated .number {
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: -0.4px;
}
#mySnu .myActivated .number span {
  font-size: 14px;
}
#mySnu .myActivated .circle {
  width: 58px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #fff;
}
#mySnu .starBox .title {
  color: #637381;
  font-size: 13px;
  font-weight: 600;
}
#mySnu .starBox .stars .star {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none'%3E%3Cpath d='M10.8898 12.9966C10.7776 12.9971 10.667 12.9713 10.5671 12.9214L6.98948 11.0954L3.41183 12.9214C3.29566 12.981 3.16468 13.0076 3.03378 12.9981C2.90288 12.9887 2.77731 12.9437 2.67135 12.8682C2.56539 12.7927 2.48329 12.6897 2.43437 12.571C2.38546 12.4522 2.3717 12.3225 2.39466 12.1965L3.09616 8.34622L0.205981 5.61068C0.115809 5.52295 0.0518417 5.41294 0.020945 5.29246C-0.00995168 5.17198 -0.0066118 5.04556 0.0306063 4.92679C0.0712651 4.80525 0.146056 4.69725 0.246493 4.61505C0.346929 4.53285 0.468989 4.47974 0.598821 4.46175L4.59737 3.89412L6.35813 0.385787C6.41557 0.270162 6.50526 0.172649 6.61692 0.104418C6.72858 0.036188 6.8577 0 6.98948 0C7.12126 0 7.25038 0.036188 7.36204 0.104418C7.4737 0.172649 7.56338 0.270162 7.62083 0.385787L9.40263 3.88728L13.4012 4.45491C13.531 4.4729 13.6531 4.52601 13.7535 4.60821C13.8539 4.69041 13.9287 4.79841 13.9694 4.91995C14.0066 5.03872 14.01 5.16514 13.9791 5.28562C13.9482 5.4061 13.8842 5.51611 13.794 5.60384L10.9038 8.33938L11.6053 12.1897C11.6304 12.3179 11.6173 12.4504 11.5676 12.5716C11.5178 12.6928 11.4336 12.7975 11.3247 12.8735C11.1977 12.9603 11.0448 13.0036 10.8898 12.9966Z' fill='%239E9E9E'/%3E%3C/svg%3E") no-repeat center center;
  cursor: pointer;
}
#mySnu .starBox .stars .star.active {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none'%3E%3Cpath d='M10.8898 12.9966C10.7776 12.9971 10.667 12.9713 10.5671 12.9214L6.98948 11.0954L3.41183 12.9214C3.29566 12.981 3.16468 13.0076 3.03378 12.9981C2.90288 12.9887 2.77731 12.9437 2.67135 12.8682C2.56539 12.7927 2.48329 12.6897 2.43437 12.571C2.38546 12.4522 2.3717 12.3225 2.39466 12.1965L3.09616 8.34622L0.205981 5.61068C0.115809 5.52295 0.0518417 5.41294 0.020945 5.29246C-0.00995168 5.17198 -0.0066118 5.04556 0.0306063 4.92679C0.0712651 4.80525 0.146056 4.69725 0.246493 4.61505C0.346929 4.53285 0.468989 4.47974 0.598821 4.46175L4.59737 3.89412L6.35813 0.385787C6.41557 0.270162 6.50526 0.172649 6.61692 0.104418C6.72858 0.036188 6.8577 0 6.98948 0C7.12126 0 7.25038 0.036188 7.36204 0.104418C7.4737 0.172649 7.56338 0.270162 7.62083 0.385787L9.40263 3.88728L13.4012 4.45491C13.531 4.4729 13.6531 4.52601 13.7535 4.60821C13.8539 4.69041 13.9287 4.79841 13.9694 4.91995C14.0066 5.03872 14.01 5.16514 13.9791 5.28562C13.9482 5.4061 13.8842 5.51611 13.794 5.60384L10.9038 8.33938L11.6053 12.1897C11.6304 12.3179 11.6173 12.4504 11.5676 12.5716C11.5178 12.6928 11.4336 12.7975 11.3247 12.8735C11.1977 12.9603 11.0448 13.0036 10.8898 12.9966Z' fill='%23FFAB00'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .stars {
  display: flex;
  align-items: center;
  gap: 1px;
}
#mySnu .stars .star {
  margin-bottom: 18px;
  width: 14px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='13' viewBox='0 0 14 13' fill='none'%3E%3Cpath d='M10.8898 12.9966C10.7776 12.9971 10.667 12.9713 10.5671 12.9214L6.98948 11.0954L3.41183 12.9214C3.29566 12.981 3.16468 13.0076 3.03378 12.9981C2.90288 12.9887 2.77731 12.9437 2.67135 12.8682C2.56539 12.7927 2.48329 12.6897 2.43437 12.571C2.38546 12.4522 2.3717 12.3225 2.39466 12.1965L3.09616 8.34622L0.205981 5.61068C0.115809 5.52295 0.0518417 5.41294 0.020945 5.29246C-0.00995168 5.17198 -0.0066118 5.04556 0.0306063 4.92679C0.0712651 4.80525 0.146056 4.69725 0.246493 4.61505C0.346929 4.53285 0.468989 4.47974 0.598821 4.46175L4.59737 3.89412L6.35813 0.385787C6.41557 0.270162 6.50526 0.172649 6.61692 0.104418C6.72858 0.036188 6.8577 0 6.98948 0C7.12126 0 7.25038 0.036188 7.36204 0.104418C7.4737 0.172649 7.56338 0.270162 7.62083 0.385787L9.40263 3.88728L13.4012 4.45491C13.531 4.4729 13.6531 4.52601 13.7535 4.60821C13.8539 4.69041 13.9287 4.79841 13.9694 4.91995C14.0066 5.03872 14.01 5.16514 13.9791 5.28562C13.9482 5.4061 13.8842 5.51611 13.794 5.60384L10.9038 8.33938L11.6053 12.1897C11.6304 12.3179 11.6173 12.4504 11.5676 12.5716C11.5178 12.6928 11.4336 12.7975 11.3247 12.8735C11.1977 12.9603 11.0448 13.0036 10.8898 12.9966Z' fill='%23FFAB00'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .myReportLists {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#mySnu .myReportLists .reportBox {
  position: relative;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.16);
  background: #FFF;
  box-shadow: 0 12px 12px -4px rgba(145, 158, 171, 0.12);
}
@media screen and (max-width: 767px) {
  #mySnu .myReportLists .reportBox {
    padding: 28px 20px 20px 20px;
  }
}
#mySnu .myReportLists .reportBox .editBtnCon {
  position: absolute;
  top: 19px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  #mySnu .myReportLists .reportBox .editBtnCon {
    top: 9px;
    right: 15px;
  }
}
#mySnu .myReportLists .reportBox .editBtnCon a {
  color: #7D8B98;
  font-size: 14px;
  font-weight: 500;
  line-height: 128%;
  letter-spacing: -1px;
}
#mySnu .myReportLists .reportBox .editBtnCon .download {
  display: block;
  padding-left: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.99935 1.04102C9.83359 1.04102 9.67462 1.10686 9.55741 1.22407C9.4402 1.34128 9.37435 1.50026 9.37435 1.66602V10.8102L7.97435 9.17602C7.92094 9.11364 7.85578 9.06239 7.78257 9.0252C7.70936 8.988 7.62954 8.96559 7.54767 8.95925C7.4658 8.9529 7.38348 8.96275 7.30541 8.98821C7.22735 9.01368 7.15506 9.05428 7.09268 9.10768C7.0303 9.16109 6.97906 9.22625 6.94186 9.29946C6.90467 9.37267 6.88226 9.45249 6.87592 9.53436C6.86957 9.61623 6.87941 9.69855 6.90488 9.77662C6.93035 9.85468 6.97094 9.92697 7.02435 9.98935L9.52435 12.906C9.58302 12.9746 9.65587 13.0297 9.73786 13.0675C9.81986 13.1053 9.90907 13.1248 9.99935 13.1248C10.0896 13.1248 10.1788 13.1053 10.2608 13.0675C10.3428 13.0297 10.4157 12.9746 10.4743 12.906L12.9743 9.98935C13.0278 9.92697 13.0683 9.85468 13.0938 9.77662C13.1193 9.69855 13.1291 9.61623 13.1228 9.53436C13.1164 9.45249 13.094 9.37267 13.0568 9.29946C13.0196 9.22625 12.9684 9.16109 12.906 9.10768C12.8436 9.05428 12.7714 9.01368 12.6933 8.98821C12.6152 8.96275 12.5329 8.9529 12.451 8.95925C12.3692 8.96559 12.2893 8.988 12.2161 9.0252C12.1429 9.06239 12.0778 9.11364 12.0243 9.17602L10.6243 10.8093V1.66602C10.6243 1.50026 10.5585 1.34128 10.4413 1.22407C10.3241 1.10686 10.1651 1.04102 9.99935 1.04102Z' fill='%23919EAB'/%3E%3Cpath d='M11.8743 7.49935V7.81435C12.2638 7.67591 12.6881 7.67012 13.0813 7.79786C13.4744 7.92561 13.8142 8.17973 14.0479 8.52067C14.2816 8.86161 14.396 9.27025 14.3734 9.68297C14.3507 10.0957 14.1923 10.4894 13.9227 10.8027L11.4227 13.7193C11.2467 13.9246 11.0283 14.0894 10.7826 14.2023C10.537 14.3153 10.2698 14.3738 9.99935 14.3738C9.72894 14.3738 9.46174 14.3153 9.21606 14.2023C8.97038 14.0894 8.75204 13.9246 8.57602 13.7193L6.07602 10.8027C5.80717 10.4892 5.64935 10.0957 5.62706 9.68329C5.60478 9.27089 5.71927 8.86268 5.95277 8.52203C6.18627 8.18138 6.5257 7.92735 6.91837 7.79938C7.31104 7.67142 7.73498 7.67668 8.12435 7.81435V7.49935H6.66602C4.30935 7.49935 3.13018 7.49935 2.39852 8.23185C1.66602 8.96352 1.66602 10.1427 1.66602 12.4993V13.3327C1.66602 15.6893 1.66602 16.8685 2.39852 17.6002C3.13018 18.3327 4.30935 18.3327 6.66602 18.3327H13.3327C15.6893 18.3327 16.8685 18.3327 17.6002 17.6002C18.3327 16.8685 18.3327 15.6893 18.3327 13.3327V12.4993C18.3327 10.1427 18.3327 8.96352 17.6002 8.23185C16.8685 7.49935 15.6893 7.49935 13.3327 7.49935H11.8743Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .myReportLists .reportBox .editBtnCon .preview {
  display: block;
  padding-left: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M17.2583 16.075L14.425 13.25C15.3392 12.0854 15.8352 10.6472 15.8333 9.16667C15.8333 7.84813 15.4423 6.5592 14.7098 5.46287C13.9773 4.36654 12.9361 3.51206 11.7179 3.00747C10.4997 2.50289 9.15927 2.37087 7.86607 2.6281C6.57286 2.88534 5.38497 3.52027 4.45262 4.45262C3.52027 5.38497 2.88534 6.57286 2.6281 7.86607C2.37087 9.15927 2.50289 10.4997 3.00747 11.7179C3.51206 12.9361 4.36654 13.9773 5.46287 14.7098C6.5592 15.4423 7.84813 15.8333 9.16667 15.8333C10.6472 15.8352 12.0854 15.3392 13.25 14.425L16.075 17.2583C16.1525 17.3364 16.2446 17.3984 16.3462 17.4407C16.4477 17.4831 16.5567 17.5048 16.6667 17.5048C16.7767 17.5048 16.8856 17.4831 16.9872 17.4407C17.0887 17.3984 17.1809 17.3364 17.2583 17.2583C17.3364 17.1809 17.3984 17.0887 17.4407 16.9872C17.4831 16.8856 17.5048 16.7767 17.5048 16.6667C17.5048 16.5567 17.4831 16.4477 17.4407 16.3462C17.3984 16.2446 17.3364 16.1525 17.2583 16.075ZM4.16667 9.16667C4.16667 8.17776 4.45991 7.21106 5.00932 6.38882C5.55873 5.56657 6.33962 4.92571 7.25325 4.54727C8.16688 4.16883 9.17222 4.06982 10.1421 4.26274C11.112 4.45567 12.0029 4.93187 12.7022 5.63114C13.4015 6.3304 13.8777 7.22131 14.0706 8.19122C14.2635 9.16112 14.1645 10.1665 13.7861 11.0801C13.4076 11.9937 12.7668 12.7746 11.9445 13.324C11.1223 13.8734 10.1556 14.1667 9.16667 14.1667C7.84059 14.1667 6.56882 13.6399 5.63114 12.7022C4.69345 11.7645 4.16667 10.4928 4.16667 9.16667Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .myReportLists .reportBox .editBtnCon .delete {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 5.3132C2.5 4.90987 2.7875 4.58237 3.1425 4.58237H5.36333C5.80417 4.56904 6.19333 4.24987 6.34333 3.7782L6.36833 3.69487L6.46417 3.36904C6.5225 3.16904 6.57333 2.99404 6.645 2.8382C6.92667 2.22237 7.44833 1.79487 8.05083 1.6857C8.20417 1.6582 8.36583 1.6582 8.55083 1.6582H11.4492C11.635 1.6582 11.7967 1.6582 11.9492 1.6857C12.5517 1.79487 13.0742 2.22237 13.355 2.8382C13.4267 2.99404 13.4775 3.1682 13.5367 3.36904L13.6317 3.69487L13.6567 3.7782C13.8067 4.24987 14.2733 4.56987 14.715 4.58237H16.8567C17.2125 4.58237 17.5 4.90987 17.5 5.3132C17.5 5.71654 17.2125 6.04404 16.8575 6.04404H3.14167C2.7875 6.04404 2.5 5.71654 2.5 5.3132Z' fill='%23919EAB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.66333 18.3249H10.3367C12.6558 18.3249 13.815 18.3249 14.57 17.5865C15.3233 16.8482 15.4 15.6374 15.5542 13.2157L15.7767 9.7257C15.86 8.41154 15.9017 7.75404 15.5242 7.3382C15.1458 6.92154 14.5075 6.92154 13.23 6.92154H6.77C5.4925 6.92154 4.85333 6.92154 4.47583 7.3382C4.0975 7.75487 4.13917 8.41154 4.22333 9.7257L4.44583 13.2157C4.6 15.6374 4.67667 16.849 5.43083 17.5865C6.185 18.3249 7.34417 18.3249 9.66333 18.3249ZM8.53833 10.149C8.505 9.78737 8.19833 9.52404 7.855 9.55987C7.51083 9.5957 7.26083 9.9182 7.295 10.2799L7.71167 14.6657C7.745 15.0274 8.05167 15.2907 8.395 15.2549C8.73917 15.219 8.98917 14.8965 8.955 14.5349L8.53833 10.149ZM12.1458 9.55987C12.4892 9.5957 12.74 9.9182 12.705 10.2799L12.2883 14.6657C12.255 15.0274 11.9475 15.2907 11.605 15.2549C11.2608 15.219 11.0108 14.8965 11.045 14.5349L11.4617 10.149C11.495 9.78737 11.8033 9.52404 12.1458 9.55987Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .myReportLists .reportBox h4 {
  color: #2A2A2A;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.54px;
}
@media screen and (max-width: 767px) {
  #mySnu .myReportLists .reportBox h4 {
    font-size: 17px;
  }
}
#mySnu .myReportLists .reportInfo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px 15px;
}
#mySnu .myReportLists .reportInfo span {
  color: #9E9E9E;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.45px;
}
@media screen and (max-width: 767px) {
  #mySnu .myReportLists .reportInfo span {
    font-size: 14px;
  }
}
#mySnu .ghostTags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#mySnu .ghostTags li {
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #00B8D9;
  color: #00B8D9;
  font-size: 13px;
  font-weight: 700;
  line-height: 154%;
}
#mySnu .colorTags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
#mySnu .colorTags li {
  padding: 2px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 142%;
}
@media screen and (max-width: 767px) {
  #mySnu .colorTags li {
    font-size: 13px;
  }
}
#mySnu .colorTags .green {
  background: #DBF6E5;
  color: #118D57;
}
#mySnu .colorTags .yellow {
  background: #FFF1D6;
  color: #B76E00;
}
#mySnu .colorTags .blue {
  background: #CFE6FF;
  color: #0078FE;
}
#mySnu .colorTags .red {
  background: #FFE4DE;
  color: #8B3B38;
}
#mySnu .myNoActived {
  margin: 17px 0 35px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}
@media screen and (max-width: 1024px) {
  #mySnu .myNoActived {
    gap: 15px;
  }
}
#mySnu .myNoActived li {
  flex: 1;
  min-width: 300px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
}
@media screen and (max-width: 767px) {
  #mySnu .myNoActived li {
    padding: 16px;
    border-radius: 12px;
  }
}
#mySnu .myNoActived li .textCon {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 767px) {
  #mySnu .myNoActived li .textCon {
    gap: 6px;
  }
}
#mySnu .myNoActived li .textCon span {
  color: #1C252E;
  font-size: 16px;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 767px) {
  #mySnu .myNoActived li .textCon span {
    font-size: 15px;
  }
}
#mySnu .myNoActived li .textCon .tit {
  font-size: 16px;
  font-weight: 600;
}
#mySnu .myNoActived li .textCon .number {
  font-size: 15px;
  font-weight: 600;
}
#mySnu .myNoActived li .textCon .number span {
  font-size: 32px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #mySnu .myNoActived li .textCon .number span {
    font-size: 20px;
  }
}
#mySnu .myNoActived li .textCon .topic {
  font-size: 15px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  #mySnu .myNoActived li .textCon .topic {
    font-size: 14px;
  }
}
#mySnu .recentCards {
  margin-top: 10px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 25px;
  width: calc(100% + 20px);
  padding-left: 10px;
  padding-right: 10px;
  margin-left: -10px;
  margin-right: -10px;
  overflow-y: visible;
  overflow-x: auto;
}
#mySnu .recentCards > li {
  flex: 1;
  min-width: 215px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #EFEFEF;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
#mySnu .recentCards > li .imgCon {
  aspect-ratio: 30/35;
  overflow: hidden;
}
@media screen and (max-width: 1250px) {
  #mySnu .recentCards > li .imgCon {
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .recentCards > li .imgCon {
    aspect-ratio: 4/3;
  }
}
#mySnu .recentCards > li .imgCon img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#mySnu .recentCards > li .textCon {
  padding: 25px 16px 20px 16px;
}
@media screen and (max-width: 767px) {
  #mySnu .recentCards > li .textCon {
    padding: 20px 12px 16px 12px;
  }
}
#mySnu .recentCards > li .textCon .colorTags {
  margin-bottom: 9px;
}
#mySnu .recentCards > li .textCon h5 {
  margin-bottom: 36px;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.54px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  #mySnu .recentCards > li .textCon h5 {
    font-size: 16px;
    margin-bottom: 25px;
  }
}
#mySnu .recentCards > li .textCon .textFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mySnu .recentCards > li .textCon .textFooter .date {
  color: #A8A8A8;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.42px;
}
#mySnu .recentCards > li .textCon .textFooter .xi-eye {
  display: flex;
  gap: 3px;
  color: #7D8B98;
  font-size: 14px;
  font-weight: 500;
  line-height: 128%;
  letter-spacing: -1px;
}
#mySnu .myDashboardTable .subTit h4 {
  display: flex;
  gap: 8px;
}
#mySnu .myDashboardTable .subTit .flexSelect {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#mySnu .myDashboardTable .subTit .flexSelect button {
  color: #1C252E;
}
#mySnu .chartCon {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
#mySnu .chartCon .chartSectionTit {
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
#mySnu .chartCon .chartSectionSubTit {
  margin-top: 4px;
  color: #637381;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
}
#mySnu .chartCon .chartBoxCon {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  --chartGap: 20px;
  gap: var(--chartGap);
}
#mySnu .chartCon .chartBoxCon .div1 {
  width: 100%;
}
#mySnu .chartCon .chartBoxCon .div2 {
  flex: 1;
}
#mySnu .chartCon .chartBoxCon .row2 {
  display: flex;
  flex-direction: column;
  gap: var(--chartGap);
}
#mySnu .chartCon .chartBoxCon .chartBox {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
}
@media screen and (max-width: 767px) {
  #mySnu .chartCon .chartBoxCon .chartBox {
    flex: 1 1 calc(100% - var(--chartGap)) !important;
  }
}
#mySnu .chartCon .chartBoxCon .chartBox .chartHeader {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
@media screen and (max-width: 767px) {
  #mySnu .chartCon .chartBoxCon .chartBox .chartHeader {
    padding: 16px;
  }
}
#mySnu .chartCon .chartBoxCon .chartBox .chartHeader h6 {
  color: #1C252E;
  font-size: 18px;
  font-weight: 600;
  line-height: 155%;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartHeader .subTit {
  color: #637381;
  font-size: 15px;
  font-weight: 400;
  line-height: 146%;
  letter-spacing: -0.3px;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea {
  padding: 16px 24px 28px 24px;
  min-height: 200px;
}
@media screen and (max-width: 767px) {
  #mySnu .chartCon .chartBoxCon .chartBox .chartArea {
    padding: 8px 16px 16px 16px;
  }
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel em {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel em span {
  color: #000;
  font-size: 16px;
  font-weight: 600;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel .levelBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 185px;
  height: 204px;
  background-image: url(/image/common/level_img.png);
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel .levelBox span {
  color: #153A87;
  font-size: 40px;
  font-weight: 700;
  width: 55px;
  display: block;
  text-align: center;
  padding: 0 12px 10px 0;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel p {
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel p span {
  color: #0078FE;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel .levelLine {
  position: relative;
  margin-top: 17px;
  max-width: 335px;
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background: rgba(145, 158, 171, 0.2);
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea.myLevel .levelLine span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00B8D9;
  border-radius: 10px;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  #mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon {
    flex-direction: column;
    gap: 15px;
  }
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox {
  padding: 18px 0 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  gap: 20px;
  border-radius: 12px;
  background: rgba(145, 158, 171, 0.12);
}
@media screen and (max-width: 767px) {
  #mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox {
    padding: 18px 0 23px;
    width: 100%;
    gap: 15px;
  }
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  font-family: "Public Sans";
  font-size: 40px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox .circle {
    font-size: 32px;
  }
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox .circle.black {
  color: #1C252E;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox .circle.blue {
  color: #00B8D9;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox .textCon span {
  display: block;
  text-align: center;
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
#mySnu .chartCon .chartBoxCon .chartBox .chartArea .compassCon .compassBox .textCon span:first-child {
  color: #637381;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon {
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  align-items: center;
  gap: 17px 12px;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(1) {
  background: rgba(255, 171, 0, 0.2);
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(1) .number {
  color: #FFAB00;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(2) {
  background: rgba(0, 167, 111, 0.2);
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(2) .number {
  color: #00A76F;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(3) {
  background: rgba(0, 184, 217, 0.2);
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(3) .number {
  color: #00B8D9;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(4) {
  background: rgba(138, 104, 224, 0.2);
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem:nth-child(4) .number {
  color: #8A68E0;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem .imgCon {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem .textCon h5 {
  color: #1C252E;
  font-size: 15px;
  font-weight: 600;
  line-height: 160%;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem .textCon .number {
  font-family: "Public Sans";
  font-size: 24px;
  font-weight: 700;
}
#mySnu .chartCon .chartBoxCon .chartBox .statCon .statItem .textCon .number span {
  font-size: 16px;
}
#mySnu .knRecord {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
#mySnu .knBox {
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
}
#mySnu .knRecord .knHeader {
  padding: 10px 17px 0 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 20px;
  border-bottom: 2px solid rgba(145, 158, 171, 0.08);
}
#mySnu .knRecord .knHeader .knTab {
  display: flex;
  align-items: center;
}
#mySnu .knRecord .knHeader .knTab a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  line-height: 48px;
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  #mySnu .knRecord .knHeader .knTab a {
    width: 80px;
    font-size: 14px;
    line-height: 35px;
  }
}
#mySnu .knRecord .knHeader .knTab a.selected {
  border-bottom: 2px solid #1C252E;
}
#mySnu .knRecord .knHeader .dropDown {
  margin-left: auto;
}
#mySnu .knRecord .knHeader .dropDownBtn {
  color: #1C252E;
}
#mySnu .knRecord .knRadio {
  padding: 28px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 24px;
}
@media screen and (max-width: 767px) {
  #mySnu .knRecord .knRadio {
    padding: 20px;
  }
}
#mySnu .knRecord .knRadio .labelTitle {
  color: #637381;
  font-size: 15px;
  font-weight: 600;
  line-height: 146%;
}
#mySnu .knRecord .knRadio .radioItem {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
#mySnu .knRecord .knRadio .radioItem input[type=radio] {
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.66675 9.99935C1.66675 14.6017 5.39771 18.3327 10.0001 18.3327C14.6025 18.3327 18.3334 14.6017 18.3334 9.99935C18.3334 5.39698 14.6025 1.66602 10.0001 1.66602C5.39771 1.66602 1.66675 5.39698 1.66675 9.99935ZM2.91675 9.99935C2.91675 6.08733 6.08806 2.91602 10.0001 2.91602C13.9121 2.91602 17.0834 6.08733 17.0834 9.99935C17.0834 13.9114 13.9121 17.0827 10.0001 17.0827C6.08806 17.0827 2.91675 13.9114 2.91675 9.99935Z' fill='%23919EAB' fill-opacity='0.8'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .knRecord .knRadio .radioItem input[type=radio]:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.66675 9.99935C1.66675 14.6017 5.39771 18.3327 10.0001 18.3327C14.6025 18.3327 18.3334 14.6017 18.3334 9.99935C18.3334 5.39698 14.6025 1.66602 10.0001 1.66602C5.39771 1.66602 1.66675 5.39698 1.66675 9.99935ZM6.66675 9.99935C6.66675 8.1584 8.15913 6.66602 10.0001 6.66602C11.841 6.66602 13.3334 8.1584 13.3334 9.99935C13.3334 11.8403 11.841 13.3327 10.0001 13.3327C8.15913 13.3327 6.66675 11.8403 6.66675 9.99935Z' fill='%231C252E'/%3E%3C/svg%3E") no-repeat center center;
}
#mySnu .knRecord .knRadio .ratioCon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 24px;
}
#mySnu .knRecord .knChartCon {
  padding: 10px 30px 40px 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  #mySnu .knRecord .knChartCon {
    padding: 10px 20px 40px 20px;
  }
}
#mySnu .knRecord .knChartCon .knChartBox {
  flex: 1 1 calc(50% - 20px);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.12);
  background: #FFF;
}
@media screen and (max-width: 767px) {
  #mySnu .knRecord .knChartCon .knChartBox {
    flex: 1 1 100%;
    padding: 10px 20px 40px 20px;
  }
}
#mySnu .knRecord .knChartCon .knChartBox .knChartTit {
  margin-bottom: 4px;
  color: #1C252E;
  font-size: 18px;
  font-weight: 600;
  line-height: 155%;
}
#mySnu .knRecord .knChartCon .knChartBox .knChartSubTit {
  margin-bottom: 48px;
  color: #637381;
  font-size: 15px;
  font-weight: 400;
  line-height: 146%;
  letter-spacing: -0.3px;
}
#mySnu .knRecord .knChartCon .knChartBox .chartArea {
  min-height: 200px;
}
#mySnu .knRecord .knDetailBox {
  padding: 5px 20px 20px 20px;
}
@media screen and (max-width: 767px) {
  #mySnu .knRecord .knDetailBox {
    padding: 5px 10px 20px 10px;
  }
}
#mySnu .knRecord .knDetailBox .knDetailCon {
  position: relative;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid rgba(145, 158, 171, 0.16);
}
@media screen and (max-width: 767px) {
  #mySnu .knRecord .knDetailBox .knDetailCon {
    padding: 15px 12px;
  }
}
#mySnu .knRecord .knDetailBox .knDetailCon:last-child {
  border-bottom: none;
}
#mySnu .knRecord .knDetailBox .knDetailCon h6 {
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  line-height: 137%;
  letter-spacing: -0.32px;
}
#mySnu .knRecord .knDetailBox .knDetailCon .knDetailInfo {
  overflow: hidden;
  color: #637381;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
  line-height: 146%;
}
#mySnu .knRecord .knDetailBox .knDetailCon .editBtnCon {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
}
#mySnu .knRecord .knDetailBox .knDetailCon .editBtnCon button {
  padding-left: 24px;
  color: #919EAB;
  font-size: 14px;
  font-weight: 500;
  line-height: 128%;
  letter-spacing: -0.28px;
}
#mySnu .knRecord .knDetailBox .knDetailCon .editBtnCon .pdf {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 10.5H13V13.5H12V10.5ZM7 11.5H8V10.5H7V11.5ZM20 6V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6C4 5.46957 4.21071 4.96086 4.58579 4.58579C4.96086 4.21071 5.46957 4 6 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6ZM9.5 10.5C9.5 10.1022 9.34196 9.72064 9.06066 9.43934C8.77936 9.15804 8.39782 9 8 9H5.5V15H7V13H8C8.39782 13 8.77936 12.842 9.06066 12.5607C9.34196 12.2794 9.5 11.8978 9.5 11.5V10.5ZM14.5 10.5C14.5 10.1022 14.342 9.72064 14.0607 9.43934C13.7794 9.15804 13.3978 9 13 9H10.5V15H13C13.3978 15 13.7794 14.842 14.0607 14.5607C14.342 14.2794 14.5 13.8978 14.5 13.5V10.5ZM18.5 9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .knRecord .knDetailBox .knDetailCon .editBtnCon .myCollec {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M15.4012 2.598C14.3025 1.5 12.5347 1.5 8.99925 1.5C5.46375 1.5 3.6975 1.5 2.598 2.598C2.0295 3.1665 1.75575 3.9135 1.623 4.992C2.02327 4.54625 2.50227 4.1781 3.036 3.906C3.6225 3.6075 4.25025 3.486 4.94475 3.42975C5.616 3.375 6.4425 3.375 7.452 3.375H10.5465C11.5568 3.375 12.3825 3.375 13.0538 3.42975C13.749 3.48675 14.3768 3.6075 14.9625 3.906C15.4962 4.1781 15.9752 4.54625 16.3755 4.992C16.2435 3.9135 15.9697 3.1665 15.4012 2.598Z' fill='%23919EAB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.5 10.5C1.5 8.4 1.5 7.35 1.90875 6.5475C2.26827 5.84192 2.84192 5.26827 3.5475 4.90875C4.35 4.5 5.4 4.5 7.5 4.5H10.5C12.6 4.5 13.65 4.5 14.4525 4.90875C15.1581 5.26827 15.7317 5.84192 16.0912 6.5475C16.5 7.35 16.5 8.4 16.5 10.5C16.5 12.6 16.5 13.65 16.0912 14.4525C15.7317 15.1581 15.1581 15.7317 14.4525 16.0912C13.65 16.5 12.6 16.5 10.5 16.5H7.5C5.4 16.5 4.35 16.5 3.5475 16.0912C2.84192 15.7317 2.26827 15.1581 1.90875 14.4525C1.5 13.65 1.5 12.6 1.5 10.5ZM9.3975 13.1475C9.29203 13.2528 9.14906 13.312 9 13.312C8.85094 13.312 8.70797 13.2528 8.6025 13.1475L6.7275 11.2725C6.67224 11.221 6.62791 11.1589 6.59716 11.0899C6.56642 11.0209 6.54989 10.9464 6.54856 10.8709C6.54722 10.7954 6.56112 10.7203 6.58941 10.6503C6.6177 10.5803 6.65981 10.5166 6.71322 10.4632C6.76664 10.4098 6.83026 10.3677 6.9003 10.3394C6.97034 10.3111 7.04536 10.2972 7.12089 10.2986C7.19642 10.2999 7.2709 10.3164 7.3399 10.3472C7.4089 10.3779 7.471 10.4222 7.5225 10.4775L8.4375 11.3925V8.25C8.4375 8.10082 8.49676 7.95774 8.60225 7.85225C8.70774 7.74676 8.85082 7.6875 9 7.6875C9.14918 7.6875 9.29226 7.74676 9.39775 7.85225C9.50324 7.95774 9.5625 8.10082 9.5625 8.25V11.3925L10.4775 10.4775C10.529 10.4222 10.5911 10.3779 10.6601 10.3472C10.7291 10.3164 10.8036 10.2999 10.8791 10.2986C10.9546 10.2972 11.0297 10.3111 11.0997 10.3394C11.1697 10.3677 11.2334 10.4098 11.2868 10.4632C11.3402 10.5166 11.3823 10.5803 11.4106 10.6503C11.4389 10.7203 11.4528 10.7954 11.4514 10.8709C11.4501 10.9464 11.4336 11.0209 11.4028 11.0899C11.3721 11.1589 11.3278 11.221 11.2725 11.2725L9.3975 13.1475Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .knRecord .knDetailBox .knDetailCon .editBtnCon .review {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.6666 7.99284C14.6666 11.6748 11.6819 14.6595 7.99993 14.6595C6.93326 14.6595 5.92526 14.4088 5.03193 13.9635C4.79594 13.8415 4.52353 13.81 4.26593 13.8748L2.78193 14.2722C2.63504 14.3114 2.48043 14.3112 2.33361 14.2718C2.18679 14.2323 2.05293 14.155 1.94547 14.0474C1.83801 13.9399 1.76072 13.806 1.72136 13.6592C1.68201 13.5123 1.68197 13.3577 1.72126 13.2108L2.11793 11.7268C2.18244 11.4694 2.15067 11.1972 2.02859 10.9615C1.56968 10.0393 1.33163 9.02293 1.33326 7.99284C1.33326 4.31084 4.31793 1.32617 7.99993 1.32617C11.6819 1.32617 14.6666 4.31084 14.6666 7.99284ZM5.33326 8.6595C5.15645 8.6595 4.98688 8.58927 4.86186 8.46424C4.73683 8.33922 4.66659 8.16965 4.66659 7.99284C4.66659 7.81603 4.73683 7.64646 4.86186 7.52143C4.98688 7.39641 5.15645 7.32617 5.33326 7.32617C5.51007 7.32617 5.67964 7.39641 5.80466 7.52143C5.92969 7.64646 5.99993 7.81603 5.99993 7.99284C5.99993 8.16965 5.92969 8.33922 5.80466 8.46424C5.67964 8.58927 5.51007 8.6595 5.33326 8.6595ZM7.33326 7.99284C7.33326 8.16965 7.4035 8.33922 7.52852 8.46424C7.65355 8.58927 7.82312 8.6595 7.99993 8.6595C8.17674 8.6595 8.34631 8.58927 8.47133 8.46424C8.59636 8.33922 8.66659 8.16965 8.66659 7.99284C8.66659 7.81603 8.59636 7.64646 8.47133 7.52143C8.34631 7.39641 8.17674 7.32617 7.99993 7.32617C7.82312 7.32617 7.65355 7.39641 7.52852 7.52143C7.4035 7.64646 7.33326 7.81603 7.33326 7.99284ZM9.99993 7.99284C9.99993 8.16965 10.0702 8.33922 10.1952 8.46424C10.3202 8.58927 10.4898 8.6595 10.6666 8.6595C10.8434 8.6595 11.013 8.58927 11.138 8.46424C11.263 8.33922 11.3333 8.16965 11.3333 7.99284C11.3333 7.81603 11.263 7.64646 11.138 7.52143C11.013 7.39641 10.8434 7.32617 10.6666 7.32617C10.4898 7.32617 10.3202 7.39641 10.1952 7.52143C10.0702 7.64646 9.99993 7.81603 9.99993 7.99284Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .knRecord .knDetailBox .knDetailCon .editBtnCon .share {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.20192 3.55599C9.20192 2.32932 10.2019 1.33399 11.4339 1.33399C11.7264 1.33329 12.0162 1.39021 12.2867 1.50149C12.5572 1.61278 12.8031 1.77626 13.0104 1.98259C13.2178 2.18892 13.3824 2.43407 13.495 2.70403C13.6076 2.974 13.6659 3.26349 13.6666 3.55599C13.6666 4.78332 12.6666 5.77866 11.4339 5.77866C11.1383 5.77902 10.8456 5.72063 10.5727 5.60686C10.2999 5.4931 10.0524 5.32625 9.84458 5.11599L6.75458 7.21999C6.84064 7.64866 6.79844 8.09318 6.63325 8.49799L10.0213 10.7247C10.4203 10.3992 10.9197 10.2218 11.4346 10.2227C11.7271 10.222 12.0168 10.279 12.2873 10.3904C12.5578 10.5018 12.8037 10.6653 13.0109 10.8717C13.2182 11.0781 13.3828 11.3233 13.4953 11.5933C13.6078 11.8633 13.666 12.1528 13.6666 12.4453C13.6666 13.672 12.6666 14.6673 11.4339 14.6673C10.8433 14.6686 10.2764 14.4352 9.85782 14.0185C9.43926 13.6018 9.20333 13.0359 9.20192 12.4453C9.2014 12.1337 9.26707 11.8256 9.39458 11.5413L6.03325 9.33399C5.62619 9.68793 5.10467 9.88237 4.56525 9.88132C4.27273 9.88202 3.98294 9.82508 3.71243 9.71374C3.44192 9.60241 3.196 9.43886 2.98873 9.23245C2.78145 9.02604 2.61687 8.78081 2.5044 8.51077C2.39193 8.24073 2.33378 7.95118 2.33325 7.65866C2.33386 7.36619 2.39209 7.07671 2.5046 6.80675C2.6171 6.53679 2.78169 6.29164 2.98896 6.0853C3.19623 5.87895 3.44212 5.71547 3.71258 5.60417C3.98305 5.49288 4.27279 5.43596 4.56525 5.43666C5.27459 5.43666 5.90525 5.76532 6.31392 6.27732L9.30925 4.23799C9.23799 4.01768 9.20177 3.78754 9.20192 3.55599Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
}
#mySnu .knRecord .knDetailBox .date {
  position: absolute;
  top: 28px;
  right: 30px;
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 12px;
  font-weight: 400;
}
#mySnu .knRecord .knContentTit {
  margin-bottom: 15px;
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
#mySnu .myLevelCon {
  margin-bottom: 55px;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
#mySnu .myLevelCon .myLevelTop {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
@media screen and (max-width: 1550px) {
  #mySnu .myLevelCon .myLevelTop {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop {
    gap: 15px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel {
  flex-grow: 1;
  border-radius: 16px;
  border: 1px solid rgba(145, 158, 171, 0.12);
  background: #FFF;
  box-shadow: 0 20px 40px -4px rgba(145, 158, 171, 0.16);
  overflow: hidden;
}
@media screen and (max-width: 1550px) {
  #mySnu .myLevelCon .myLevelTop .cLevel {
    width: 100%;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo {
  padding: 37px 37px 28px 37px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #425B8B;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo {
    gap: 15px;
    padding: 25px 20px 20px 20px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .circle {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #7A8CAE;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .circle {
    width: 80px;
    height: 80px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .circle span {
  color: #FFF;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 500;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .circle span.number {
  font-size: 36px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .circle span.number {
    font-size: 28px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div span {
  color: #FFF;
  font-size: 16px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div span {
    font-size: 15px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div .tooltipCon {
  position: relative;
  display: flex;
  align-items: center;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div svg:hover + .tooltipD {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: all;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div .tooltipD {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  padding: 15px 20px;
  width: 300px;
  border-radius: 12px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: all 0.15s ease-in-out;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div .tooltipD {
    width: 250px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div .tooltipD::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #fff;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div .tooltipD p {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > div .tooltipD p strong {
  color: #396E9C;
  font-weight: 700;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelInfo .desc > p {
    font-size: 15px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress {
  padding: 30px 40px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress {
    padding: 20px 25px 30px 25px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress .progressInfo {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress .progressInfo span {
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress .progressInfo span {
    font-size: 15px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress .progressBar {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background: rgba(145, 158, 171, 0.2);
}
#mySnu .myLevelCon .myLevelTop .cLevel .cLevelProgress .progressBar .progress {
  height: 100%;
  border-radius: 10px;
  background: #FF715B;
}
#mySnu .myLevelCon .myLevelTop .cLevelLists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: 20px;
}
@media screen and (max-width: 1550px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists {
    gap: 15px;
  }
}
@media screen and (max-width: 500px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists {
    grid-template-columns: 1fr;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevelLists li {
  padding: 25px 23px;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 315px;
  height: 127px;
  border-radius: 16px;
  background: #FFF;
  box-sizing: border-box;
}
@media screen and (max-width: 1600px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li {
    width: 290px;
  }
}
@media screen and (max-width: 1550px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li {
    padding: 16px;
    height: 105px;
    gap: 15px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevelLists li .circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(145, 158, 171, 0.2);
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li .circle {
    width: 60px;
    height: 60px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevelLists li .cat {
  margin-bottom: -5px;
  display: block;
  color: #52575B;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li .cat {
    font-size: 14px;
  }
}
#mySnu .myLevelCon .myLevelTop .cLevelLists li .number {
  color: #396E9C;
  font-family: "Public Sans";
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.8px;
}
@media screen and (max-width: 1600px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li .number {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelTop .cLevelLists li .number {
    font-size: 26px;
  }
}
#mySnu .myLevelCon .subTit {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
#mySnu .myLevelCon .subTit h4 {
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
#mySnu .myLevelCon .subTit h5 {
  color: #676767;
  font-size: 15px;
  font-weight: 400;
}
#mySnu .myLevelCon .myLevelTable {
  overflow-x: auto;
}
#mySnu .myLevelCon .myLevelTable table {
  width: 100%;
  min-width: 760px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0 0 2px 0 rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
  overflow: hidden;
}
#mySnu .myLevelCon .myLevelTable table thead th {
  padding: 22px 0;
  background: #F7F8F9;
  color: #1C252E;
  font-size: 16px;
  font-weight: 600;
  line-height: 112%;
}
#mySnu .myLevelCon .myLevelTable table tbody td {
  text-align: center;
  padding: 16px;
  border-top: 1px solid rgba(145, 158, 171, 0.16);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 128%;
}
#mySnu .myLevelCon .myLevelTable table tbody td.date {
  color: #637381;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 700;
  line-height: 138%;
}
#mySnu .myLevelCon .myLevelTable table tbody td.point {
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 12px;
  font-weight: 400;
  line-height: 150%;
}
#mySnu .myLevelCon .myLevelTable table tbody td.rank.top div {
  background: #33C6E1;
  color: #fff;
}
#mySnu .myLevelCon .myLevelTable table tbody td.rank div {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  background: #DEE2E6;
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 700;
}
#mySnu .myLevelCon .myLevelTable table tbody td.type .colorTags {
  justify-content: center;
}
#mySnu .myLevelCon .myLevelTable table tbody td.name {
  color: #637381;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
#mySnu .myLevelCon .myLevelTable table tbody td.topic .topicTags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
#mySnu .myLevelCon .myLevelTable table tbody td.topic .topicTags li {
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(145, 158, 171, 0.12);
  color: #1C252E;
  font-family: "Public Sans";
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
}
#mySnu .myLevelCon .myLevelTable table tbody td.openC span {
  display: inline-block;
  padding-left: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7.3125 9C7.3125 8.55245 7.49029 8.12323 7.80676 7.80676C8.12323 7.49029 8.55245 7.3125 9 7.3125C9.44755 7.3125 9.87677 7.49029 10.1932 7.80676C10.5097 8.12323 10.6875 8.55245 10.6875 9C10.6875 9.44755 10.5097 9.87677 10.1932 10.1932C9.87677 10.5097 9.44755 10.6875 9 10.6875C8.55245 10.6875 8.12323 10.5097 7.80676 10.1932C7.49029 9.87677 7.3125 9.44755 7.3125 9Z' fill='%23919EAB'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.5 9C1.5 10.23 1.81875 10.6432 2.45625 11.472C3.729 13.125 5.8635 15 9 15C12.1365 15 14.271 13.125 15.5438 11.472C16.1813 10.644 16.5 10.2292 16.5 9C16.5 7.77 16.1813 7.35675 15.5438 6.528C14.271 4.875 12.1365 3 9 3C5.8635 3 3.729 4.875 2.45625 6.528C1.81875 7.3575 1.5 7.77075 1.5 9ZM9 6.1875C8.25408 6.1875 7.53871 6.48382 7.01126 7.01126C6.48382 7.53871 6.1875 8.25408 6.1875 9C6.1875 9.74592 6.48382 10.4613 7.01126 10.9887C7.53871 11.5162 8.25408 11.8125 9 11.8125C9.74592 11.8125 10.4613 11.5162 10.9887 10.9887C11.5162 10.4613 11.8125 9.74592 11.8125 9C11.8125 8.25408 11.5162 7.53871 10.9887 7.01126C10.4613 6.48382 9.74592 6.1875 9 6.1875Z' fill='%23919EAB'/%3E%3C/svg%3E") no-repeat left center;
  color: #919EAB;
  font-family: "Public Sans";
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}
#mySnu .myLevelCon .myLevelRank {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
#mySnu .myLevelCon .myLevelRank .myRankInfo {
  padding: 48px 20px 42px 20px;
  width: calc(30% - 10px);
  text-align: center;
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  #mySnu .myLevelCon .myLevelRank .myRankInfo {
    padding: 38px 15px 30px 15px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelRank .myRankInfo {
    padding: 25px 15px 17px 15px;
  }
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .rankTit {
  margin-bottom: 5px;
  display: block;
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.4px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelRank .myRankInfo .rankTit {
    font-size: 18px;
  }
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .rankSubTit {
  margin-bottom: 40px;
  display: block;
  color: #676767;
  font-size: 15px;
  font-weight: 400;
}
@media screen and (max-width: 1024px) {
  #mySnu .myLevelCon .myLevelRank .myRankInfo .rankSubTit {
    margin-bottom: 25px;
  }
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .circle {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 143px;
  height: 143px;
  border-radius: 50%;
  background: #367D73;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .myLevelRank .myRankInfo .circle {
    width: 120px;
    height: 120px;
  }
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .circle .top {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 128%;
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .circle .rankNumber {
  color: #FFF;
  font-size: 24px;
  font-weight: 600;
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .circle .rankNumber span {
  font-size: 24px;
}
#mySnu .myLevelCon .myLevelRank .myRankInfo .myCuRank {
  margin-top: 35px;
  display: block;
  color: #1C252E;
  font-size: 14px;
  font-weight: 600;
}
@media screen and (max-width: 1024px) {
  #mySnu .myLevelCon .myLevelRank .myRankInfo .myCuRank {
    margin-top: 20px;
  }
}
#mySnu .myLevelCon .myLevelRank .myRankChart {
  padding: 27px 20px 37px 20px;
  width: calc(70% - 10px);
}
@media screen and (max-width: 1024px) {
  #mySnu .myLevelCon .myLevelRank .myRankChart {
    width: 100%;
  }
}
#mySnu .myLevelCon .myLevelRank .myRankChart h4 {
  margin-bottom: 9px;
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.4px;
}
#mySnu .myLevelCon .myLevelRank .myRankChart h5 {
  margin-bottom: 25px;
  color: #676767;
  font-size: 15px;
  font-weight: 400;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon:not(:last-child) {
  margin-bottom: 20px;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon .progressInfo {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon .progressInfo span {
  color: #1C252E;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.32px;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon .progressBar {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 10px;
  background: #E9ECEE;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon .progressBar .progress {
  height: 100%;
  border-radius: 10px;
  background: #B9C1C9;
}
#mySnu .myLevelCon .myLevelRank .myRankChart .rankProgressCon .progressBar .progress.my {
  background: #367D73;
}
#mySnu .myLevelCon .LevelBanner {
  padding: 35px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 155px;
  border-radius: 8px;
  border: 1px solid rgba(136, 136, 136, 0.16);
  background: rgba(91, 186, 187, 0.15);
}
@media screen and (max-width: 1500px) {
  #mySnu .myLevelCon .LevelBanner {
    gap: 70px;
  }
}
@media screen and (max-width: 1024px) {
  #mySnu .myLevelCon .LevelBanner {
    padding: 20px 30px;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner {
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px 20px;
  }
}
#mySnu .myLevelCon .LevelBanner .left {
  display: flex;
  align-items: center;
  gap: 45px;
}
@media screen and (max-width: 1500px) {
  #mySnu .myLevelCon .LevelBanner .left {
    gap: 30px;
  }
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner .left {
    gap: 15px;
  }
  #mySnu .myLevelCon .LevelBanner .left svg {
    transform: scale(0.7);
  }
}
#mySnu .myLevelCon .LevelBanner .left h5 {
  color: #2A2A2A;
  font-size: 20px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.6px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner .left h5 {
    font-size: 17px;
  }
}
#mySnu .myLevelCon .LevelBanner .right {
  flex-grow: 1;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner .right {
    width: 100%;
  }
}
#mySnu .myLevelCon .LevelBanner .right h6 {
  margin-bottom: 19px;
  color: #5BBABB;
  font-size: 16px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.48px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner .right h6 {
    margin-bottom: 12px;
    font-size: 15px;
  }
}
#mySnu .myLevelCon .LevelBanner .right .progressCon {
  margin-bottom: 16px;
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #FFF;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner .right .progressCon {
    margin-bottom: 12px;
  }
}
#mySnu .myLevelCon .LevelBanner .right .progressCon .progressBar {
  position: relative;
  height: 100%;
  border-radius: 3px;
  background: #5BBABB;
}
#mySnu .myLevelCon .LevelBanner .right .progressCon .progressBar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 21px;
  height: 21px;
  background: #fff;
  border: 3px solid #5BBABB;
  border-radius: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}
#mySnu .myLevelCon .LevelBanner .right .speed {
  display: flex;
  justify-content: space-between;
}
#mySnu .myLevelCon .LevelBanner .right .speed span {
  color: #4F4F4F;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.48px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .LevelBanner .right .speed span {
    font-size: 14px;
  }
}
#mySnu .myLevelCon .roadmap {
  padding: 35px 25px 30px 25px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap {
    padding: 25px 15px 20px 15px;
  }
}
#mySnu .myLevelCon .roadmap h4 {
  margin-bottom: 4px;
  text-align: center;
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.4px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap h4 {
    font-size: 18px;
  }
}
#mySnu .myLevelCon .roadmap .level {
  text-align: center;
  margin-bottom: 30px;
  color: #676767;
  font-size: 15px;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .level {
    margin-bottom: 20px;
    font-size: 14px;
  }
}
#mySnu .myLevelCon .roadmap .level .red {
  color: #FF715B;
  font-size: 16px;
  font-weight: 600;
}
#mySnu .myLevelCon .roadmap .level .red .big {
  font-size: 32px;
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .level .red .big {
    font-size: 28px;
  }
}
#mySnu .myLevelCon .roadmap .stepCon .top {
  --minW: 147px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow-x: auto;
}
#mySnu .myLevelCon .roadmap .stepCon .top .circleCon {
  flex: 1;
  min-width: var(--minW);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#mySnu .myLevelCon .roadmap .stepCon .top .circleCon.success::after {
  content: "";
  position: absolute;
  top: 30px;
  right: -12px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M22 12C22 17.523 17.523 22 12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12ZM16.03 8.97C16.1705 9.11063 16.2493 9.30125 16.2493 9.5C16.2493 9.69875 16.1705 9.88937 16.03 10.03L11.03 15.03C10.8894 15.1705 10.6988 15.2493 10.5 15.2493C10.3012 15.2493 10.1106 15.1705 9.97 15.03L7.97 13.03C7.89631 12.9613 7.83721 12.8785 7.79622 12.7865C7.75523 12.6945 7.73319 12.5952 7.73141 12.4945C7.72963 12.3938 7.74816 12.2938 7.78588 12.2004C7.8236 12.107 7.87974 12.0222 7.95096 11.951C8.02218 11.8797 8.10701 11.8236 8.2004 11.7859C8.29379 11.7482 8.39382 11.7296 8.49452 11.7314C8.59522 11.7332 8.69454 11.7552 8.78654 11.7962C8.87854 11.8372 8.96134 11.8963 9.03 11.97L10.5 13.44L12.735 11.205L14.97 8.97C15.1106 8.82955 15.3012 8.75066 15.5 8.75066C15.6988 8.75066 15.8894 8.82955 16.03 8.97Z' fill='%2300A76F'/%3E%3C/svg%3E") no-repeat center;
}
#mySnu .myLevelCon .roadmap .stepCon .top .circleCon .circle {
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #DFE2E6;
}
#mySnu .myLevelCon .roadmap .stepCon .top .circleCon .levle {
  margin-bottom: 52px;
  padding: 2px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  border: 1px solid #00A76F;
  background: rgba(0, 167, 111, 0.16);
  color: #00A76F;
  font-family: "Public Sans";
  font-size: 13px;
  font-weight: 600;
  line-height: 153%;
  letter-spacing: -0.26px;
}
#mySnu .myLevelCon .roadmap .stepCon .top .step span {
  text-align: center;
  display: block;
  color: #637381;
}
#mySnu .myLevelCon .roadmap .stepCon .top .step .spec {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .stepCon .top .step .spec {
    font-size: 16px;
  }
}
#mySnu .myLevelCon .roadmap .stepCon .top .step .specDesc {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .stepCon .top .step .specDesc {
    font-size: 14px;
  }
}
#mySnu .myLevelCon .roadmap .stepCon .top .progressCon {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  min-width: calc(var(--minW) * 5);
  height: 5px;
  border-radius: 3px;
  background: #DADADA;
}
#mySnu .myLevelCon .roadmap .stepCon .top .progressCon .progressBar {
  position: relative;
  height: 100%;
  border-radius: 3px;
  background: #FF715B;
}
#mySnu .myLevelCon .roadmap .stepCon .top .progressCon .progressBar::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  width: 21px;
  height: 21px;
  background: #fff;
  border: 3px solid #FF715B;
  border-radius: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}
#mySnu .myLevelCon .roadmap .stepCon .descBanner {
  margin-top: 55px;
  padding: 27px 73px;
  border-radius: 8px;
  border: 1px solid rgba(136, 136, 136, 0.16);
  background: rgba(0, 167, 111, 0.08);
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .stepCon .descBanner {
    margin-top: 40px;
    padding: 20px 30px;
  }
}
#mySnu .myLevelCon .roadmap .stepCon .descBanner h5 {
  margin-bottom: 5px;
  color: #367D73;
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.54px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .stepCon .descBanner h5 {
    font-size: 16px;
  }
}
#mySnu .myLevelCon .roadmap .stepCon .descBanner p {
  color: #757C7B;
  font-size: 16px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.48px;
}
@media screen and (max-width: 767px) {
  #mySnu .myLevelCon .roadmap .stepCon .descBanner p {
    font-size: 14px;
  }
}
#mySnu .favCon {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
#mySnu .favCon .subTit {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#mySnu .favCon .subTit h4 {
  color: #1C252E;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
#mySnu .favCon .subTit h5 {
  color: #676767;
  font-size: 15px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.3px;
}
#mySnu .favCon .myInterCon {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}
#mySnu .favCon .myInterCon .div2 {
  flex: 1;
}
@media screen and (max-width: 1400px) {
  #mySnu .favCon .myInterCon .div2 {
    flex: auto;
    width: 100%;
  }
}
#mySnu .favCon .myInterCon .div1 {
  width: 100%;
}
#mySnu .favCon .myInterCon .myInter {
  padding: 25px;
}
@media screen and (max-width: 767px) {
  #mySnu .favCon .myInterCon .myInter {
    padding: 20px;
  }
}
#mySnu .favCon .myInterCon .myInter .interHeader {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}
#mySnu .favCon .myInterCon .myInter .interHeader h5 {
  margin-bottom: 4px;
  color: #1C252E;
  font-size: 20px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  #mySnu .favCon .myInterCon .myInter .interHeader h5 {
    font-size: 18px;
  }
}
#mySnu .favCon .myInterCon .myInter .interHeader h6 {
  color: #676767;
  font-size: 15px;
  font-weight: 400;
  line-height: 130%;
  letter-spacing: -0.3px;
}
#mySnu .favCon .myInterCon .myInter .interHeader .dropDownBtn {
  color: #1C252E;
}
#mySnu .favCon .myInterCon .myInter .interTagBox {
  padding: 20px;
  border-radius: 12px;
  background: rgba(145, 158, 171, 0.12);
}
#mySnu .favCon .interTagBox {
  margin-bottom: 20px;
  overflow-y: auto;
}
#mySnu .favCon .interTagBox::-webkit-scrollbar {
  width: 6px;
}
#mySnu .favCon .interTagBox::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
#mySnu .favCon .interTag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 112px;
}
#mySnu .favCon .interTag.redTags a {
  background: #FF715B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.99984 1.66602C5.40484 1.66602 1.6665 5.40435 1.6665 9.99935C1.6665 14.5943 5.40484 18.3327 9.99984 18.3327C14.5948 18.3327 18.3332 14.5943 18.3332 9.99935C18.3332 5.40435 14.5948 1.66602 9.99984 1.66602ZM3.33317 9.99935C3.33317 8.46102 3.8615 7.04768 4.73984 5.91852L14.0807 15.2593C12.9157 16.1709 11.479 16.6661 9.99984 16.666C6.324 16.666 3.33317 13.6752 3.33317 9.99935ZM15.2598 14.0802L5.919 4.73935C7.08404 3.82793 8.52065 3.33273 9.99984 3.33268C13.6757 3.33268 16.6665 6.32352 16.6665 9.99935C16.6661 11.4785 16.1709 12.915 15.2598 14.0802Z' fill='white'/%3E%3C/svg%3E") no-repeat right 4px center;
}
#mySnu .favCon .interTag.blueTags a {
  background: #00B8D9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cg opacity='0.9'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.3332 9.99935C18.3332 14.6018 14.6023 18.3327 9.99984 18.3327C5.39734 18.3327 1.6665 14.6018 1.6665 9.99935C1.6665 5.39685 5.39734 1.66602 9.99984 1.66602C14.6023 1.66602 18.3332 5.39685 18.3332 9.99935ZM7.47484 7.47435C7.59203 7.35731 7.75088 7.29157 7.9165 7.29157C8.08213 7.29157 8.24098 7.35731 8.35817 7.47435L9.99984 9.11601L11.6415 7.47435C11.76 7.36395 11.9167 7.30385 12.0786 7.3067C12.2405 7.30956 12.395 7.37515 12.5095 7.48966C12.624 7.60418 12.6896 7.75866 12.6925 7.92058C12.6953 8.0825 12.6352 8.2392 12.5248 8.35768L10.8832 9.99935L12.5248 11.641C12.6352 11.7595 12.6953 11.9162 12.6925 12.0781C12.6896 12.24 12.624 12.3945 12.5095 12.509C12.395 12.6235 12.2405 12.6891 12.0786 12.692C11.9167 12.6949 11.76 12.6347 11.6415 12.5243L9.99984 10.8827L8.35817 12.5243C8.23969 12.6347 8.08299 12.6949 7.92107 12.692C7.75915 12.6891 7.60466 12.6235 7.49015 12.509C7.37564 12.3945 7.31005 12.24 7.30719 12.0781C7.30433 11.9162 7.36444 11.7595 7.47484 11.641L9.1165 9.99935L7.47484 8.35768C7.3578 8.24049 7.29205 8.08164 7.29205 7.91602C7.29205 7.75039 7.3578 7.59154 7.47484 7.47435Z' fill='white'/%3E%3C/g%3E%3C/svg%3E") no-repeat right 4px center;
}
#mySnu .favCon .interTag a {
  padding: 7px 30px 7px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.3px;
}
#mySnu .favCon .buttonCon {
  display: flex;
  align-items: center;
  gap: 12px;
}
#mySnu .favCon .buttonCon button {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(145, 158, 171, 0.32);
}
#mySnu .favCon .buttonCon button.block::before {
  content: "";
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.99984 1.66602C5.40484 1.66602 1.6665 5.40435 1.6665 9.99935C1.6665 14.5943 5.40484 18.3327 9.99984 18.3327C14.5948 18.3327 18.3332 14.5943 18.3332 9.99935C18.3332 5.40435 14.5948 1.66602 9.99984 1.66602ZM3.33317 9.99935C3.33317 8.46102 3.8615 7.04768 4.73984 5.91852L14.0807 15.2593C12.9157 16.1709 11.479 16.6661 9.99984 16.666C6.324 16.666 3.33317 13.6752 3.33317 9.99935ZM15.2598 14.0802L5.919 4.73935C7.08404 3.82793 8.52065 3.33273 9.99984 3.33268C13.6757 3.33268 16.6665 6.32352 16.6665 9.99935C16.6661 11.4785 16.1709 12.915 15.2598 14.0802Z' fill='%231C252E'/%3E%3C/svg%3E") no-repeat center;
}
#mySnu .favCon .buttonCon button.add::before {
  content: "";
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8332 9.16602H10.8332V4.16602H9.1665V9.16602H4.1665V10.8327H9.1665V15.8327H10.8332V10.8327H15.8332V9.16602Z' fill='%231C252E'/%3E%3C/svg%3E") no-repeat center;
}
#mySnu .favCon .recommendTags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#mySnu .favCon .recommendTags a {
  padding: 0 14px 0 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  height: 32px;
  border-radius: 10px;
  background: #2C2C2C;
  color: #FFF;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
#mySnu .favCon .recommendTags a::before {
  content: "";
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8332 9.16602H10.8332V4.16602H9.1665V9.16602H4.1665V10.8327H9.1665V15.8327H10.8332V10.8327H15.8332V9.16602Z' fill='white'/%3E%3C/svg%3E") no-repeat center;
}/*# sourceMappingURL=sub_n_my-page.css.map */