@import url(common.css);


.intro_top {}

.intro_top .intro_title {
  max-width: 144rem;
  width: calc(100% - 4rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 8rem 0 10rem;
}

.intro_top .intro_title p {
  font-size: 1.8rem;
}

.intro_top .intro_title h3 {
  font-size: 7rem;
}

.intro_top .img_wrap {
  width: 100vw;
  height: 40rem;
  position: sticky;
  top: 0;
  background: url(/image/about-hero.png) center center / cover no-repeat;
  background-attachment: fixed;
}

/*.intro_top .img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}*/
.tab_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10rem 0 10rem;
}

.sub_tab {
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  border-radius: 10rem;
}

.sub_tab li {
  border-radius: 10rem;
  cursor: pointer;
}

.sub_tab li a {
  font-size: 1.8rem;
  display: inline-block;
  padding: 1.6rem 10rem;
}

.sub_tab.safety li a {
  padding: 1.6rem 4rem;
}

.sub_tab li.active {
  background-color: var(--color-primary);
}

/*.sub_tab li:hover {
  background-color: #f5f5f5;
}

.sub_tab li.active:hover {
  background-color: var(--color-primary);
}*/

.sub_tab li.active a {
  color: #fff;
  font-weight: 500;
}

.sub_tab_dropdown {
  position: relative;
  z-index: 20;
}

.sub_tab_current {
  display: none;
}

.sub_cont {
  max-width: 144rem;
  width: calc(100% - 4rem);
  margin: 0 auto 20rem;
}

.sub_cont .sub_list {
  display: flex;
  justify-content: space-between;
  opacity: 1;
  transform: translateY(0);
}

.sub_cont .sub_list.philosophy {
  flex-direction: column;
  align-items: center;
}

.sub_cont .sub_list .greeting_title {}

.sub_cont .sub_list h3 {
  font-size: 6rem;
}

.sub_cont .sub_list .greeting_cont {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.sub_cont .sub_list .greeting_cont ul {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.sub_cont .sub_list .greeting_cont ul>li {
  font-size: 2rem;
  line-height: 1.5;
}

.sub_cont .sub_list .greeting_cont p {
  font-size: 2rem;
}

.sub_cont .sub_list .greeting_cont p strong {
  font-size: 2.4rem;
}

.sub_cont .sub_list .philosophy_wrap {
  display: flex;
  flex-direction: column;
}

.sub_cont .sub_list .philosophy_wrap .philosophy_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub_cont .sub_list .philosophy_wrap .philosophy_title p {
  width: 49%;
  font-size: 2rem;
  line-height: 1.5;
}

.sub_cont .sub_list .philosophy_wrap .philosophy_img {
  width: 100%;
  height: 60rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 5rem 0;
}

.sub_cont .sub_list .philosophy_wrap .philosophy_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sub_cont .sub_list .philosophy_wrap ul {
  display: flex;
  justify-content: space-between;
}

.sub_cont .sub_list .philosophy_wrap ul>li {
  width: calc((100% / 3) - 2rem);
  display: flex;
  flex-direction: column;
  gap: 3rem;
  padding: 5rem 3.6rem;
  border: 1px solid #ddd;
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform 0.3s;
}

/*.sub_cont .sub_list .philosophy_wrap ul>li:hover {
  background-color: var(--color-primary-soft);
  box-shadow: 0.5rem 0.5rem 1rem rgb(0, 0, 0, 0.1);
  transform: translateY(-1rem);
}*/

.sub_cont .sub_list .philosophy_wrap ul>li strong {
  font-size: 2.2rem;
}

.sub_cont .sub_list .philosophy_wrap ul>li p {
  font-size: 1.8rem;
}

.sub_cont .sub_list .purpose_wrap {
  width: 100%;
  margin-top: 10rem;
}

.sub_cont .sub_list .purpose_wrap h3 {
  text-align: center;
}

.sub_cont .sub_list .purpose_wrap .purpose {
  width: 100%;
  display: flex;
  gap: 2rem;
  margin: 5rem 0;
}

.sub_cont .sub_list .purpose_wrap .purpose li {
  flex: 1;
  height: 60rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transition: flex 0.3s;
}

.sub_cont .sub_list .purpose_wrap .purpose li::after {
  content: '';
  display: block;
  background-color: rgb(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.sub_cont .sub_list .purpose_wrap .purpose li:first-child {
  background: url(../image/Professional_realistic_photograph_of_Korean_kinder-1772588842741.png) center center / cover no-repeat;
}

.sub_cont .sub_list .purpose_wrap .purpose li:nth-child(2) {
  background: url(../image/Professional_realistic_photograph_of_Korean_kinder-1772589053532.png) center center / cover no-repeat;
}

.sub_cont .sub_list .purpose_wrap .purpose li:nth-child(3) {
  background: url(../image/Professional_realistic_photograph_of_Korean_childc-1772588957158.png) center center / cover no-repeat;
}

.sub_cont .sub_list .purpose_wrap .purpose li:last-child {
  background: url(../image/Professional_realistic_photograph_of_modern_Korean-1772588964506.png) center center / cover no-repeat;
}

/*.sub_cont .sub_list .purpose_wrap .purpose li:hover {
  flex: 1.7;
}*/

.sub_cont .sub_list .purpose_wrap .purpose li h4 {
  font-size: 3rem;
  color: var(--color-white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9;
}

/*.sub_cont .sub_list .purpose_wrap .purpose li:hover h4 {
  display: none;
}*/

.sub_cont .sub_list .purpose_wrap .purpose li .text_wrap {
  opacity: 0;
  visibility: hidden;
  width: calc(100% - 4rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background-color: var(--color-white);
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  border-radius: var(--radius-sm);
  padding: 3rem;
  transition: visibility 0.3s 0.3s;
}

.sub_cont .sub_list .purpose_wrap .purpose li .text_wrap p {
  font-size: 1.8rem;
  line-height: 1.5;
}

/*.sub_cont .sub_list .purpose_wrap .purpose li:hover .text_wrap {
  opacity: 1;
  visibility: visible;
  z-index: 9;
  transition: visibility 0.3s 0.3s;
}*/

.sub_cont .sub_list .purpose_wrap .purpose li .text_wrap .purpose_img {}

.sub_cont .sub_list .purpose_wrap .purpose li .text_wrap .purpose_img img {
  width: 8rem;
  height: 8rem;
  display: block;
  object-fit: cover;
}

.sub_cont .sub_list .purpose_wrap .purpose li .text_wrap .purpose_img span {
  font-size: 2.2rem;
  font-weight: 600;
}



.sub_visual {
  width: 100vw;
  height: 35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sub_visual::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.8);
  position: absolute;
  top: 0;
  left: 0;
}


.sub_visual.edu {
  background: url(../image/edu_hero.png) center center / cover no-repeat;
}

.sub_visual.guide {
  background: url(../image/guide_hero.png) center center / cover no-repeat;
}

.sub_visual.notice {
  background: url(../image/notice_hero.png) center center / cover no-repeat;
}

.sub_visual.mypage {
  background: url(../image/mypage_hero.png) center center / cover no-repeat;
}


.sub_tab.edu li a,
.sub_tab.edu li.active a {
  padding: 1.6rem 3.8rem;
}

.sub_visual .visual_inner {
  max-width: var(--max-width);
  width: calc(100% - 4rem);
  margin: 0 auto;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.sub_visual .path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  z-index: 9;
}

.sub_visual .path li {
  color: #999;
}

.sub_visual .path li a {
  font-size: 1.6rem;
  color: #999;
}

.sub_visual .path li img {
  width: 1.6rem;
  height: 1.6rem;
  object-fit: cover;
  display: block;
  filter: invert(1);
  transform: rotate(180deg);
}

.sub_visual .path li:last-child {
  color: var(--color-white);
}

.sub_visual .sub_title {
  display: flex;
  flex-direction: column;
  z-index: 9;
}

.sub_visual .sub_title p {
  font-size: 1.6rem;
  color: #999;
}

.sub_visual .sub_title h4 {
  font-size: 5rem;
  color: var(--color-white);
  line-height: 1.5;
}

.sub_list.safety,
.sub_list.report,
.sub_list.prevention,
.sub_list.welfare,
.sub_list.disability,
.sub_list.guide,
.sub_list.class,
.sub_list.cert,
.sub_list.myclass,
.sub_list.mycert,
.sub_list.myinfo {
  flex-direction: column;
}

.sub_list .item_top {
  display: flex;
  gap: 8rem;
  padding-bottom: 10rem;
  border-bottom: 1px solid #121212;
}

.sub_list .item_top .img_wrap {
  width: 50%;
  height: 40.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sub_list .item_top .img_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sub_list .item_top .text_wrap {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  flex: 1;
}

.sub_list .item_top .text_wrap h5 {
  font-size: 4rem;
}

.sub_list .item_top .text_wrap .edu_cont {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sub_list .item_top .text_wrap .edu_cont li {
  display: flex;
  gap: 5rem;
}

.sub_list .item_top .text_wrap .edu_cont li strong {
  font-size: 1.8rem;
  color: var(--color-primary);
  font-weight: 500;
  white-space: nowrap;
}

.sub_list .item_top .text_wrap .edu_cont li span {
  font-size: 1.8rem;
}

.sub_list .item_top .text_wrap .edu_desc {
  width: 100%;
  padding: 2rem;
  background-color: #f5f5f5;
  border-radius: var(--radius-sm);
}

.sub_list .item_top .text_wrap .edu_desc p {
  font-size: 1.6rem;
  color: #777;
}

.sub_list .item_top .text_wrap .btn_wrap {
  width: 100%;
  display: flex;
  gap: 2.4rem;
}

.sub_list .item_top .text_wrap .btn_wrap li {
  width: calc(100% / 2 - 2.4rem);
  border: 1px solid var(--color-text);
  border-radius: 10rem;
  flex: 1;
}

.sub_list .item_top .text_wrap .btn_wrap li a {
  font-size: 1.8rem;
  display: block;
  text-align: center;
  padding: 1.6rem 0;
}

.sub_list .item_top .text_wrap .btn_wrap li.btn_bg {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 10rem;
}

.sub_list .item_top .text_wrap .btn_wrap li.btn_bg a {
  color: var(--color-white);
  font-weight: 500;
}

.sub_list .item_desc {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  margin: 3.2rem 0;
}

.sub_list .item_desc .item h6 {
  font-size: 2.8rem;
  margin-bottom: 2.4rem;
  padding-left: 1rem;
}

.sub_list .item_desc .item.desc01 {}

.sub_list .item_desc .item.desc01 .desc_text {
  background-color: #f9f9f9;
  border-radius: var(--radius-md);
  padding: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sub_list .item_desc .item.desc01 .desc_text li:first-child {
  color: var(--color-text);
  font-size: 1.8rem;
}

.sub_list .item_desc .item.desc01 .desc_text li {
  color: #777;
}

.sub_list .item_desc .item.desc01 .desc_text li.pl {
  padding-left: 1rem;
}

.sub_list .item_desc .item.desc02 {}

.sub_list .item_desc .item.desc02 p {
  font-size: 1.8rem;
  line-height: 1.7;
}

.sub_list .item_desc .item.desc02 .desc_cont {
  background-color: #f5f5f5;
  border-radius: var(--radius-md);
  padding: 3.2rem;
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.2rem;
}

.sub_list .item_desc .item.desc02 .desc_cont li.title {
  font-size: 2rem;
  font-weight: 600;
  width: 100%;
  text-align: center;
  background-color: transparent;
  display: block;
  padding: 0;
  flex: none;
}

.sub_list .item_desc .item.desc02 .desc_cont li {
  width: calc(100% / 3 - 6.4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 3.2rem 5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  flex: 1;
}

.sub_list .item_desc .item.desc02 .desc_cont li span {
  font-size: 1.6rem;
}

.sub_list .item_desc .item.desc02 .desc_cont li strong {
  font-size: 1.8rem;
}

.sub_list .item_desc .item.desc03 .desc_cont {
  display: flex;
  gap: 3.2rem;
}

.sub_list .item_desc .item.desc03 .desc_cont>li {
  width: calc(100% / 2 - 3.2rem);
  flex: 1;
  padding: 3.2rem;
  background-color: #f5f5f5;
  border-radius: var(--radius-md);
}

.sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap li:last-of-type {
  color: #555;
}

.sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap li span {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap li strong {
  font-size: 2rem;
}

.sub_list .item_desc .item.desc04 {}

.sub_list .item_desc .item.desc04 .way {}

.sub_list .item_desc .item.desc04 .way .way01 {
  display: flex;
  flex-direction: column;
}

.sub_list .item_desc .item.desc04 .way .way01 .way_title {
  font-size: 2rem;
  color: var(--color-white);
  padding: 2rem;
  background-color: var(--color-primary);
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  text-align: center;
  display: block;
}

.sub_list .item_desc .item.desc04 .way.way01 .way_title {
  display: block;
  text-align: center;
  font-size: 2rem;
  background-color: #fff8f5;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--color-primary);
  border-bottom: 0;
}

.sub_list .item_desc .item.desc04 .way .way_cont {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sub_list .item_desc .item.desc04 .way .way03 .way_cont:first-of-type,
.sub_list.safety .item_desc .item.desc04 .way .way01 .way_cont:first-of-type {
  flex: 1;
}

.sub_list .item_desc .item.desc04 .way .way03 .way_cont:last-of-type,
.sub_list.safety .item_desc .item.desc04 .way .way01 .way_cont:last-of-type {
  flex: 2;
}

.sub_list.safety .item_desc .item.desc04 .way .way01 .way_cont ul {
  width: 100%;
}

.sub_list .item_desc .item.desc04 .way .way03 .way_cont ul {
  width: 100%;
}

.sub_list .item_desc .item.desc04 .way .cont_wrap {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 3.2rem;
  border: 1px solid var(--color-primary);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  border-top: 0;
}

.sub_list .item_desc .item.desc04 .way .way_cont .way_sub_title {
  font-size: 2rem;
  margin-bottom: 3.2rem;
}

.sub_list .item_desc .item.desc04 .way .way_cont ul {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex: 1;
}

.sub_list .item_desc .item.desc04 .way .way_cont ul>li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.2rem 5rem;
  border-radius: var(--radius-md);
  gap: 1rem;
  border: 1px solid var(--color-border);
  flex: 1;
}

.sub_list .item_desc .item.desc04 .way .way_cont ul>li.way_bg {
  background-color: #f5f5f5;
  border: 0;
}

.sub_list .item_desc .item.desc04 .way .way_cont ul>li strong {
  margin-bottom: 1rem;
}

.sub_list .item_desc .item.desc04 .way .way_cont ul>li span {
  color: #555;
}

.sub_list .item_desc .item.desc04 .way .way_cont ul>li p {}

.sub_list .item_desc .item.desc04 .way .way02 {
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 3rem 0;
}

.sub_list .item_desc .item.desc04 .way .way02 span.way_line {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

.sub_list .item_desc .item.desc04 .way .way02 strong {
  font-size: 2rem;
}

.sub_list .item_desc .item.desc04 .way .way03 .way_title {
  font-size: 2rem;
  color: var(--color-white);
  padding: 2rem;
  background-color: #333;
  border-top-left-radius: 1.5rem;
  border-top-right-radius: 1.5rem;
  text-align: center;
  display: block;
}

.sub_list .item_desc .item.desc04 .way .way03 .cont_wrap {
  border: 1px solid #333;
}

.sub_list .item_desc .item.desc04 .way .way03 .way_cont ul>li {
  width: 100%;
  background-color: #f5f5f5;
  border: 0;
}

.sub_list .item_desc .item.desc05 {
  padding: 3.2rem;
  background-color: #fff8f5;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.sub_list .item_desc .item.desc05 .item_title {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.sub_list .item_desc .item.desc05 .item_title strong {
  font-size: 1.8rem;
}

.sub_list .item_desc .item.desc05 .item_title span.circle {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sub_list .item_desc .item.desc05 p {
  line-height: 1.5;
}



/* 교육안내 */
.sub_list {}

.sub_list .guide_title {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}

.sub_list .guide_title h6 {
  font-size: 3.2rem;
}

.sub_list .guide_title p {
  font-size: 2rem;
}

.sub_list .guide_item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sub_list .guide_item>li {
  width: 100%;
  padding: 3.2rem;
  border-radius: var(--radius-lg);
  display: flex;
  gap: 2.4rem;
  background-color: #f5f5f5;
}

.sub_list.class .guide_item>li {
  flex-direction: column;
  gap: .8rem;
}

.sub_list .guide_item>li .number {
  font-size: 2.4rem;
  color: var(--color-primary);
  display: block;
}

.sub_list .guide_item>li .item_depth {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.sub_list .guide_item>li .step {
  color: var(--color-primary);
  font-weight: 500;
}

.sub_list .guide_item>li .item_depth .item_title {
  font-size: 2rem;
  font-weight: 500;
}

.sub_list .guide_item>li .item_depth li {
  font-size: 1.8rem;
  line-height: 1.5;
}

.sub_list .cert_way {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 3.2rem;
  border-radius: var(--radius-lg);
  background-color: #f5f5f5;
  margin-bottom: 2.4rem;
}

.sub_list .cert_way li {
  font-size: 1.8rem;
}

.sub_list .cert_way li:first-of-type {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

.sub_list .caution {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 3.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-primary);
  background-color: #fff5f2;
}

.sub_list .caution li {
  font-size: 1.6rem;
}

.sub_list .caution li:first-of-type {
  font-size: 1.8rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: .5rem;
}

.sub_list .caution li strong {
  color: var(--color-primary);
}



/* 마이페이지 */
.sub_list.myclass {}

.sub_list.myclass h4 {
  font-size: 3rem;
  margin: 0 0 2rem 1rem;
  font-weight: 600;
}

.sub_list.myclass .profile {
  padding: 3.2rem;
  border-radius: var(--radius-lg);
  background-color: #f5f5f5;
  margin-bottom: 3rem;
  display: flex;
  gap: 3rem;
  align-items: center;
}

.sub_list.myclass .profile .profile_img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  background-color: #555;
  color: var(--color-white);
  font-size: 3.2rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sub_list.myclass .profile .profile_text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sub_list.myclass .profile .profile_text h6 {
  font-size: 2.4rem;
}

.sub_list.myclass .profile .profile_text .user_info {
  display: flex;
  gap: 2rem;
}

.sub_list.myclass .profile .profile_text .user_info li {
  font-size: 1.6rem;
  color: #777;
  position: relative;
}

.sub_list.myclass .profile .profile_text .user_info li.line::after {
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background-color: #777;
  position: absolute;
  top: 0;
  right: -1rem;
}

.sub_list.myclass .class_list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sub_list.myclass .class_list .class_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sub_list.myclass .class_list .class_item .class_left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sub_list.myclass .class_list .class_item .class_left .class_title {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.sub_list.myclass .class_list .class_item .class_left .class_title p {
  font-size: 2rem;
  font-weight: 600;
}

.sub_list.myclass .class_list .class_item .class_left .class_title .badge {
  font-size: 1.4rem;
  padding: .5rem 1rem;
  border-radius: 10rem;
  background-color: #f5f5f5;
  color: #999;
  ;
}
.sub_list.myclass .class_list .class_item.not_started .class_btn a {
  background-color:#999;
}
.sub_list.myclass .class_list .class_item.completed .class_btn a {
  background-color:#ccc;
  color:var(--color-white);
}
.sub_list.myclass .class_list .class_item.in_progress .class_btn a {
  background-color:var(--color-white);
  color:var(--color-primary);
  border:1px solid var(--color-primary);
}
.sub_list.myclass .class_list .class_item .class_left .class_title .badge.not_started {
  background-color: #f5f5f5;
  color: #999;
}

.sub_list.myclass .class_list .class_item .class_left .class_title .badge.in_progress {
  background-color: #fff3e0;
  color: #e65100;
}

.sub_list.myclass .class_list .class_item .class_left .class_title .badge.completed {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.sub_list.myclass .class_list .class_item .class_left .progress {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.sub_list.myclass .class_list .class_item .class_left .progress .progress_bar {
  width: 30rem;
  height: .6rem;
  background-color: #f5f5f5;
  border-radius: 1rem;
}

.sub_list.myclass .class_list .class_item .class_left .progress .progress_bar span {
  display: block;
  height: 100%;
  background: #f5f5f5;
  border-radius: 999px;
}

.sub_list.myclass .class_list .class_item.in_progress .class_left .progress .progress_bar span {
  background: var(--color-primary);
}

.sub_list.myclass .class_list .class_item.completed .class_left .progress .progress_bar span {
  background: #4caf50;
}

.sub_list.myclass .class_list .class_item .class_left .progress span {
  font-size: 1.6rem;
  color: #999;
}

.sub_list.myclass .class_list .class_item .class_left>span {
  font-size: 1.6rem;
  color: #999;
}

.sub_list.myclass .class_list .class_item .class_btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.sub_list.myclass .class_list .class_item .class_btn a {
  width: 14rem;
  font-size: 1.6rem;
  display: block;
  padding: 1.4rem 3rem;
  text-align: center;
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 10rem;
}

.sub_list.myclass .class_list .class_item .class_btn a.repeat {
  background-color: #999;
}

.sub_list.myclass .class_list .class_item .class_btn a.cert_down {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.sub_list.mycert {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.sub_list.mycert p {
  font-size: 1.8rem;
}

.sub_list.mycert .cert_list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sub_list.mycert .cert_list .cert_item {
  padding: 3.2rem;
  border-radius: var(--radius-lg);
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sub_list.mycert .cert_list .cert_item .cert_left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.sub_list.mycert .cert_list .cert_item .cert_left .cert_title {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.sub_list.mycert .cert_list .cert_item .cert_left .cert_title p {
  font-size: 2rem;
  font-weight: 600;
}

.sub_list.mycert .cert_list .cert_item .cert_left .cert_title .badge {
  color: #2e7d32;
  padding: .4rem 1rem;
  background-color: #e8f5e9;
  border-radius: 10rem;
  font-size: 1.4rem;
}

.sub_list.mycert .cert_list .cert_item .cert_left .down_deadline {
  display: flex;
  gap: 2rem;
}

.sub_list.mycert .cert_list .cert_item .cert_left .down_deadline li {
  font-size: 1.6rem;
  color: #777;
}

.sub_list.mycert .cert_list .cert_item .download_btn {}

.sub_list.mycert .cert_list .cert_item .download_btn a {
  padding: 1.4rem 3rem;
  border-radius: 10rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}


.sub_list.myinfo .confirm_wrap {
  width: 50rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0 auto;
}

.sub_list.myinfo .confirm_wrap p {
  font-size: 1.8rem;
}

.sub_list.myinfo .confirm_wrap input {}

.sub_list.myinfo .confirm_wrap button {}

/* 모달 오버레이 */
.confirm_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 999999;
}

/* 모달 카드 */
.confirm_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9001;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 24px;
  padding: 40px 36px 32px;
  text-align: center;
  box-sizing: border-box;
  z-index:999999;
  box-shadow:0.2rem 0.2rem 1rem rgb(0, 0, 0, 0.1);
}

.confirm_modal .confirm_id_box img,
.confirm_toggle_pw img {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  object-fit: cover;
}

/* 자물쇠 아이콘 */
.confirm_lock_icon {
  width: 52px;
  height: 52px;
  background: #FEF0EC;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.confirm_title {
  font-size: 3rem;
  font-weight: 600;
  color: #111;
  margin: 0 0 8px;
}

.confirm_desc {
  font-size: 1.6rem;
  color: #888;
  line-height: 1.4;
  font-weight: 300;
  margin: 0 0 22px;
}

/* 아이디 박스 */
.confirm_id_box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f7f7f7;
  border-radius: 8px;
  margin-bottom: 22px;
  font-size: 1.6rem;
  color: #888;
}

.confirm_id_box span {
  font-weight: 600;
  color: #222;
}

/* 라벨 */
.confirm_label {
  display: block;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}

/* input 래퍼 */
.confirm_input_wrap {
  position: relative;
}

/* input */
.confirm_input {
  width: 100%;
  height: 46px;
  padding: 0 44px 0 14px;
  box-sizing: border-box;
  font-size: 1.6rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  color: #222;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.confirm_input:focus {
  border-color: #ED613D;
  box-shadow: 0 0 0 3px rgba(237, 97, 61, 0.1);
}

.confirm_input::placeholder {
  color: #bbb;
}

/* 눈 토글 버튼 */
.confirm_toggle_pw {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

/* 확인 버튼 */
.confirm_submit_btn {
  width: 100%;
  height: 48px;
  margin-top: 16px;
  background: #ED613D;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

/*.confirm_submit_btn:hover {
  background: #d4522f;
}*/

.confirm_submit_btn:active {
  transform: scale(0.99);
}

/* 취소 버튼 */
.confirm_cancel_btn {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  background: none;
  color: #aaa;
  border-radius: 8px;
  font-size: 1.6rem;
  cursor: pointer;
  transition: color 0.15s;
  border: 1px solid #ddd;
}

/*.confirm_cancel_btn:hover {
  color: #666;
}*/

/* 반응형 */
@media (max-width: 500px) {
  .confirm_modal {
    padding: 32px 20px 24px;
	width:90%;
  }
  .confirm_title {font-size:2.4rem;}
  .confirm_desc {font-size:1.4rem;}
}

/* 배경 안내 텍스트 */
.myinfo_guide {
  padding: 60px 0;
  text-align: center;
  color: #bbb;
  font-size: 0.9rem;
}









.sub_list.contact {
  flex-direction: row;
}

.contact_header {
  display: flex;
  flex-direction: column;
}

.contact_header h2 {
  font-size: 7rem;
  margin-top: 1rem;
}

.contact_header p {
  font-size: 2rem;
  line-height: 1.5;
  margin: 5rem 0 0;
}

.contact_form {
  width: 48%;
}

.contact_form .form_wrap {
  width: 100%;
  display: inline-flex;
  flex-direction: column;
  gap: 2rem;
}

.contact_form .form_wrap .form_item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact_form .form_wrap .form_item label {
  font-size: 2rem;
}

.contact_form .form_wrap .form_item label span {
  color: var(--color-primary);
}

.contact_form .form_wrap .form_item input {
  width: 100%;
  background-color: #f6f6f6;
  border-radius: 1rem;
  padding: 2rem;
}

.contact_form .form_wrap .form_item textarea {
  width: 100%;
  background-color: #f6f6f6;
  border-radius: 1rem;
  padding: 2rem;
  resize: none;
}

.contact_form .form_wrap .form_agree {
  display: flex;
  gap: 1rem;
}

.contact_form .form_wrap .form_agree label {
  font-size: 2rem;
}

.contact_form .form_wrap .contact_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;
}

.contact_form .form_wrap .contact_btn button {
  display: inline-block;
  font-size: 2.4rem;
  padding: 1.4rem 5rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 10rem;
  font-weight: 600;
  transition: background-color 0.3s;
}

/*.contact_form .form_wrap .contact_btn button:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}*/





.edu_classroom,
.edu_player_page {
  max-width: var(--max-width);
  width: calc(100% - 4rem);
}

.edu_classroom {
  margin: 10rem auto 15rem;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.edu_player_page {
  margin: 5rem auto 15rem;
}

.course_summary {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 4rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.course_summary span {
  font-size: 1.6rem;
}

.course_summary h3 {
  font-size: 32px;
}

.course_summary .badge_wrap {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.course_summary .summary_progress .bar span {
  color: var(--color-primary);
}

.course_summary .cate {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: .5rem 1rem;
  border-radius: 10rem;
}

.course_summary .time {
  color: #999;
}

.class_video {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.lesson_card_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.lesson_card_wrap .lesson_card .thumb {
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.lesson_card_wrap .lesson_card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lesson_card_wrap .lesson_card .thumb .badge {
  line-height: 1;
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1rem;
  border-radius: .5rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  background: #999;
  z-index: 2;
}

.lesson_card_wrap .lesson_card .thumb .play_btn {
  color: var(--color-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
}

.edu_classroom h4 {
  font-size: 2rem;
  padding: 0 1rem;
}

.lesson_card_wrap .lesson_card .badge.not_started {
  background: #999;
}

.lesson_card_wrap .lesson_card .badge.in_progress {
  background: var(--color-primary);
}

.lesson_card_wrap .lesson_card .badge.completed {
  background: #10b981;
}

.edu_notice {
  border: 1px solid #ed613d40;
  border-radius: var(--radius-sm);
  padding: 2.4rem;
  background-color: #fff8f5;
}

.edu_notice span {
  color: var(--color-primary);
  font-weight: 500;
  margin-right: 1rem;
}

.edu_notice {
  color: #777;
}

.course_summary .class_title {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.course_summary .summary_progress {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.course_summary .summary_progress .bar {
  flex: 1;
  height: 0.8rem;
  background: #e9e9e9;
  border-radius: 999px;
  overflow: hidden;
}

.course_summary .summary_progress .bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
}

.course_summary .summary_progress strong {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1;
  flex-shrink: 0;
}

.lesson_card_wrap .lesson_card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lesson_card_wrap .lesson_card .thumb {
  overflow: hidden;
  position: relative;
}

.lesson_card_wrap .lesson_card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.lesson_card_wrap .lesson_card .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background .35s ease;
  z-index: 1;
}

.lesson_card_wrap .lesson_card .thumb .badge {
  z-index: 3;
}

.lesson_card_wrap .lesson_card .thumb .play_btn {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.8rem;
  z-index: 3;
  transition: opacity .3s ease;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background-color: #ed613de6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lesson_card_wrap .lesson_card .thumb .thumb_overlay {
  position: absolute;
  left: 2rem;
  right: 2rem;
  bottom: 2rem;
  z-index: 3;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .35s ease, transform .35s ease;
}

.lesson_card_wrap .lesson_card .thumb .thumb_overlay strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/*.lesson_card_wrap .lesson_card:hover .thumb::after {
  background: rgba(0, 0, 0, 0.45);
}

.lesson_card_wrap .lesson_card:hover .thumb img {
  transform: scale(1.04);
}

.lesson_card_wrap .lesson_card:hover .thumb .thumb_overlay {
  opacity: 1;
  transform: translateY(0);
}*/

.lesson_card_wrap .lesson_card .lesson_progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.lesson_card_wrap .lesson_card .lesson_progress .bar {
  flex: 1;
  height: .6rem;
  background: rgb(0, 0, 0, 0.3);
  overflow: hidden;
}

.lesson_card_wrap .lesson_card .lesson_progress .bar span {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.lesson_card_wrap .lesson_card .lesson_progress em {
  display: none;
}

.lesson_card_wrap .lesson_card .lesson_info {
  display: none;
}




.player_top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
}

.player_top p {
  font-size: 1.6rem;
  color: #777;
}

.player_top h3 {
  font-size: 2.6rem;
  font-weight: 600;
}

.player_top .current_class {
  text-decoration: underline;
  text-underline-position: under;
}

.player_top .player_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.player_top .player_title a {
  padding: 1rem 1.6rem;
  color: #555;
  border-radius: .7rem;
  border: 1px solid var(--color-border);
  display: block;
  line-height: 1;
}

.player_info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.player_info>div {
  color: #777;
  display: flex;
  gap: 1rem;
  padding: 1.6rem 2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.player_info>div span {
  color: var(--color-text);
  display: block;
}

.player_info .border-ri {
  border-right: 1px solid var(--color-border);
}

.player_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36rem;
  align-items: start;
  border-bottom: 1px solid var(--color-border);
}

.player_layout .video_area {
  min-width: 0;
}

#vimeoPlayer {
  height: 60.6rem;
}

#vimeoPlayer iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.player_layout .toc_area {
  border-left: 1px solid var(--color-border);
}

.player_layout .toc_area h4 {
  padding: 1.6rem 2rem;
  font-weight: 500;
  font-size: 1.8rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid var(--color-border);
}

.player_layout .toc_area>ul li {
  padding: 2rem;
}

.video_box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 */
  background: #000;
  overflow: hidden;
}

.video_box #vimeoPlayer,
.video_box #vimeoPlayer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.toc_head {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.toc_head_left {
  display: flex;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}

.toc_num {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #e0e0e0;
  color: #777;
}

.toc_item.active .toc_num {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.toc_title_row {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.toc_title_row .toc_title {
  font-weight: 500;
  overflow: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc_title_row .toc_time {
  color: #999;
  font-size: 1.4rem;
  white-space:nowrap;
}

.toc_title_row .toc_badge {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1.4rem;
  padding: .6rem;
  line-height: 1;
  border-radius: .5rem;
  white-space:nowrap;
}

.toc_body {
  display: none;
  margin-top: 1.6rem;
}

.toc_body .toc_desc {
  color: #777;
}

.toc_item.open .toc_body {
  display: block;
}

.toc_title_wrap {
  flex: 1;
  min-width: 0;
}

.toc_progress {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.toc_bar {
  flex: 1;
  height: .6rem;
  background: #eee;
  border-radius: 999px;
  overflow: hidden;
}

.toc_bar span {
  display: block;
  height: 100%;
  background: #ed613d;
  border-radius: 999px;
}

.toc_progress em {
  font-style: normal;
  font-size: 1.4rem;
  color: #8c8c8c;
  min-width: 4rem;
  text-align: right;
}

.toc_top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.toc_item {
  border-bottom: 1px solid var(--color-border);
  transition: background-color .25s ease, border-color .25s ease;
}

.toc_item.active {
  background-color: #fef7f5;
}

.toc_item:last-child {
  border: 0;
}

.toc_toggle {
  flex-wrap: wrap;
  flex-shrink: 0;
  display: block;
}

.toc_toggle img {
  transform: rotate(-90deg);
  width: 2.4rem;
  object-fit: cover;
  display: block;
}

.toc_item.active .toc_toggle::before {
  transform: translate(-50%, -30%) rotate(-135deg);
}


.cert_modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.cert_modal.show {
  display: block;
}

.cert_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.cert_modal_dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.92);
  width: min(90vw, 58rem);
  max-height: 90vh;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.cert_modal.show .cert_modal_dialog {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.cert_modal_body {
  max-height: 90vh;
  overflow: auto;
  text-align: center;
  background: #f8f8f8;
}

.cert_modal_body img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, 0.12);
}

.cert_modal_body iframe {
  display: block;
  width: 100%;
  height: 80vh;
  border: 0;
  background: #fff;
}

.cert_modal_close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 4rem;
  height: 4rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  z-index: 2;
}

.cert_modal_close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2rem;
  height: .2rem;
  background: #fff;
  border-radius: 999px;
}

.cert_modal_close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.cert_modal_close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.modal_open {
  overflow: hidden;
  height: 100%;
}


/* 재수강 필요 */
.sub_list.myclass .class_list .class_item .class_left .class_title .badge.expired {
  background: #ffecec;
  color: #ff8484;
}

.download_btn a.disabled {
  background: #ddd;
  color: #888;
  pointer-events: none;
  cursor: default;
}


/* 나의강의실,이수증관리 필터탭 */
.filter_tab {
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.filter_tab>ul {
  display: flex;
  gap: 1rem;
}

.filter_tab>ul li {
  padding: 1rem 2rem;
  border: 1px solid #ddd;
  border-radius: 10rem;
  line-height: 1;
  font-size: 1.8rem;
  font-weight: 300;
  cursor: pointer;
}

.filter_tab>ul li.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 0;
}







@media (hover: hover) and (pointer: fine) {
	.sub_tab li:hover {
	  background-color: #f5f5f5;
	}

	.sub_tab li.active:hover {
	  background-color: var(--color-primary);
	}


	.sub_cont .sub_list .philosophy_wrap ul>li:hover {
	  background-color: var(--color-primary-soft);
	  box-shadow: 0.5rem 0.5rem 1rem rgb(0, 0, 0, 0.1);
	  transform: translateY(-1rem);
	}

	.sub_cont .sub_list .purpose_wrap .purpose li:hover {
	  flex: 1.7;
	}
	.sub_cont .sub_list .purpose_wrap .purpose li:hover h4 {
	  display: none;
	}

	.sub_cont .sub_list .purpose_wrap .purpose li:hover .text_wrap {
	  opacity: 1;
	  visibility: visible;
	  z-index: 9;
	  transition: visibility 0.3s 0.3s;
	}
	.confirm_submit_btn:hover {
	  background: #d4522f;
	}

	.confirm_cancel_btn:hover {
	  color: #666;
	}
	.contact_form .form_wrap .contact_btn button:hover {
	  background-color: var(--color-primary);
	  color: var(--color-white);
	}
	.lesson_card_wrap .lesson_card:hover .thumb::after {
	  background: rgba(0, 0, 0, 0.45);
	}

	.lesson_card_wrap .lesson_card:hover .thumb img {
	  transform: scale(1.04);
	}

	.lesson_card_wrap .lesson_card:hover .thumb .thumb_overlay {
	  opacity: 1;
	  transform: translateY(0);
	}
}










@media (max-width: 1440px) {
  .contact_header h2 {
    font-size: 6rem;
  }

  .intro_top .intro_title h3 {
    font-size: 6rem;
  }

  .sub_visual .sub_title h4 {
    font-size: 4rem;
  }

  .sub_visual .sub_title {
    gap: .5rem;
  }

  .sub_tab.edu li a,
  .sub_tab.edu li.active a {
    padding: 1.6rem 2.4rem;
    text-align: center;
  }
  .sub_list .item_desc .item.desc04 .way .way_cont ul>li {padding:3.2rem;}
}

@media (max-width: 1024px) {
	.mob_1024 {display:none;}
  .contact_header h2 {
    font-size: 5rem;
	margin-top:0;
  }
  .contact_header p {margin:2rem 0 0;}
  .contact_form {width:100%;}
  .sub_cont .sub_list h3 {
    font-size: 5rem;
  }

  .intro_top .intro_title h3 {
    font-size: 5rem;
  }

  .intro_top .intro_title {
    padding: 5rem 0;
  }

  .intro_top .img_wrap {
    height: 30rem;
  }

  .tab_wrap {
    margin: 8rem auto;
  }

  .sub_cont {
    margin: 0 auto 15rem;
  }

  .sub_cont .sub_list {
    flex-direction: column;
    gap: 8rem;
  }
  .sub_cont .sub_list.mycert {gap:2rem;}
  .sub_list.mycert .cert_list .cert_item {padding:2.4rem;}
  .sub_list.mycert .cert_list .cert_item .cert_left .cert_title p {font-size:1.6rem;}
  .sub_cont .sub_list .greeting_cont {
    width: 100%;
    gap: 8rem;
  }

  .sub_cont .sub_list h3 br.mob {
    display: none;
  }

  .sub_cont .sub_list .philosophy_wrap .philosophy_title {
    flex-direction: column;
    gap: 2rem;
  }

  .sub_cont .sub_list .philosophy_wrap .philosophy_title p {
    width: 100%;
    font-size: 1.8rem;
  }

  .sub_cont .sub_list .philosophy_wrap ul>li {
    padding: 3rem 2rem;
    width: calc((100% / 3) - 1rem);
  }

  .sub_cont .sub_list .philosophy_wrap ul>li strong {
    font-size: 2rem;
  }

  .sub_cont .sub_list .philosophy_wrap ul>li p {
    font-size: 1.6rem;
  }

  .sub_cont .sub_list .purpose_wrap {
    margin-top: 0;
  }

  .sub_cont .sub_list .purpose_wrap .purpose {
    flex-wrap: wrap;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li {
    flex: auto;
    height: 40rem;
    width: 100%;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li h4 {
    display: none;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li .text_wrap {
    opacity: 1;
    visibility: visible;
    z-index: 99;
    padding:2rem;
    width: 40%;
    right: 2rem;
    left: auto;
    height: calc(100% - 4rem);
  }

  .sub_cont .sub_list .purpose_wrap .purpose li .text_wrap .purpose_img {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li:first-child {
    background-position: left;
  }

  .sub_list .item_top .text_wrap h5 {
    font-size: 3rem;
  }

  .sub_list .item_top {
    gap: 3rem;
    flex-direction: column;
    padding-bottom: 5rem;
  }

  .sub_list .item_top .img_wrap {
    width: 100%;
  }

  .sub_cont .sub_list.safety {
    gap: 5rem;
  }

  .sub_list .item_desc {
    margin: 0;
    gap: 6rem;
  }

  .sub_list .item_desc .item h6 {
    font-size: 2.4rem;
  }

  .sub_list .item_desc .item.desc04 .way .way01 .way_title,
  .sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap li strong,
  .sub_list .item_desc .item.desc04 .way .way03 .way_title,
  .sub_list .item_desc .item.desc04 .way .way_cont .way_sub_title {
    font-size: 1.8rem;
  }

  .sub_list .item_desc .item.desc04 .way .way_cont ul>li span {
    text-align: center;
    display: block;
  }

  .sub_list .item_desc .item.desc04 .way .way_cont ul>li {
    padding: 2.4rem 3rem;
  }

  .sub_cont .sub_list.guide, .sub_cont .sub_list.class, .sub_cont .sub_list.cert {
    gap: 0;
  }
  .sub_tab li a {padding:1.6rem 5rem;}
  .sub_cont .sub_list.myclass {gap:3rem;}
  .sub_list.myclass h4 {margin:0 0 0 1rem;}
  .sub_list.myclass .profile {margin-bottom:0;padding:2.4rem;}
  .filter_tab {margin-bottom:0;}
  .sub_list.myclass .profile .profile_text h6 {font-size:2rem;}
  .sub_list.myclass .profile .profile_img {width:7rem;height:7rem;font-size:3rem;}
  .sub_list.myclass .class_list .class_item {padding:2rem;}
  .sub_list.myclass .class_list .class_item .class_btn a {padding:1.2rem 3rem;}
  .edu_classroom {margin:5rem auto 10rem;}
  .edu_player_page {margin:3rem auto 10rem;}


}

@media (max-width: 768px) {
  .intro_top .intro_title {
    gap: 1rem;
  }

  .intro_top .intro_title h3 {
    font-size: 4rem;
  }

  .sub_cont .sub_list h3 {
    font-size: 4rem;
  }

  .sub_cont .sub_list {
    gap: 5rem;
  }

  .sub_tab li a {
    padding: 1.6rem 6rem;
    font-size: 1.6rem;
  }

  .tab_wrap {
    margin: 5rem auto;
  }

  .sub_cont .sub_list .greeting_cont ul>li {
    font-size: 1.8rem;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li {
    height: 30rem;
    box-shadow: .2rem .2rem 1rem rgb(0, 0, 0, 0.1);
  }

  .sub_cont .sub_list .purpose_wrap .purpose li::after {
    display: none;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li .text_wrap {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
  }

  .sub_cont .sub_list .philosophy_wrap .philosophy_img {
    height: 40rem;
    margin: 2rem 0;
  }

  .sub_cont .sub_list .philosophy_wrap ul {
    flex-direction: column;
    gap: 2rem;
  }

  .sub_cont .sub_list .philosophy_wrap ul>li {
    width: 100%;
  }

  .sub_cont .sub_list .philosophy_wrap ul>li p {
    display: none;
  }

  .sub_visual {
    height: 25rem;
  }

  .sub_visual .visual_inner {
    gap: 2rem;
  }

  .sub_visual .sub_title h4 {
    font-size: 3rem;
  }

  .tab_wrap {
    width: 100%;
    margin: 5rem auto;
    overflow: visible;
  }

  .sub_tab_dropdown {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    z-index: 20;
  }

  .sub_tab_current {
    width: 100%;
    height: 5.2rem;
    padding: 0 1.8rem;
    border: 1px solid #ddd;
    border-radius: 1.2rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    z-index: 21;
  }

  .sub_tab_current span {
    font-size: 1.6rem;
    color: #121212;
  }

  .sub_tab_current img {
    width: 2.4rem;
    height: 2.4rem;
    display: block;
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
    pointer-events: none;
  }

  .sub_tab_dropdown .sub_tab {
    width: 100%;
    display: none;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 1.2rem;
    background-color: #fff;
    overflow: hidden;
    position: absolute;
    z-index: 22;

  }

  .sub_tab_dropdown.open .sub_tab_current {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
  }

  .sub_tab_dropdown.open .sub_tab {
    display: flex;
    z-index: 99;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .sub_tab_dropdown.open .sub_tab_current img {
    transform: rotate(-270deg);
  }

  .sub_tab li {
    width: 100%;
    border-radius: 0;
  }

  .sub_tab li+li {
    border-top: 1px solid #f1f1f1;
  }

  .sub_tab li a {
    width: 100%;
    display: block;
    padding: 1.6rem 1.8rem;
    font-size: 1.5rem;
    text-align: left;
  }

  .sub_tab li.active {
    background-color: #fff8f5;
  }

  .sub_tab li.active a {
    color: var(--color-primary);
    font-weight: 600;
  }

  .sub_visual .path li {
    font-size: 1.4rem;
  }

  .sub_list .guide_title {
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .sub_list .guide_title h6 {
    font-size: 2.4rem;
  }

  .sub_list .guide_title p,
  .sub_list .guide_item>li .item_depth li,
  .sub_list .cert_way li,
  .sub_list .caution li:first-of-type {
    font-size: 1.6rem;
  }

	.sub_list .guide_item>li {
	  padding: 2rem;
	  gap: 2rem;
	  border-radius: var(--radius-md);
	}

	.sub_list .guide_item>li .item_depth .item_title, .sub_list .cert_way li:first-of-type {
	  font-size: 1.8rem;
	}
	.sub_list .cert_way {
	  padding:2rem;
	  gap:1rem;
	  border-radius: var(--radius-md)
	}
	.sub_list .caution {
	  padding:2rem;
	  gap:.5rem;
	  border-radius: var(--radius-md)
	}
	.sub_list .caution li {font-size:1.5rem;}
	.sub_cont {margin:0 auto 10rem;}
	.contact_header h2 {display:none;}
	.contact_form .form_wrap .form_item input {padding:1.4rem;}
	.contact_form .form_wrap .form_item label, .contact_form .form_wrap .form_agree label {font-size:1.8rem;}
	.contact_header p {font-size:1.8rem;text-align:center;margin:0;}
	.contact_form .form_wrap .contact_btn button {font-size:2rem;}
	.sub_cont .sub_list.myclass {gap:2rem;}
  .sub_list.myclass .profile {margin-bottom:0;padding:2rem;border-radius:var(--radius-md);}
  .filter_tab {margin-bottom:0;}
  .sub_list.myclass h4 {font-size:2.4rem;}
  .sub_list.myclass .profile .profile_text h6 {font-size:2rem;}
  .sub_list.myclass .profile .profile_img {width:7rem;height:7rem;font-size:3rem;}
  .sub_list.myclass .class_list .class_item {padding:2rem;border-radius:var(--radius-md);flex-wrap:wrap;row-gap:1rem;}
  .sub_list.myclass .class_list .class_item .class_btn {flex-direction:row;}
  .sub_list.myclass .class_list .class_item .class_btn a {padding:1rem 2rem;width:12rem;}
  .sub_list.myclass .class_list .class_item .class_left .class_title p {font-size:1.8rem;}
  .sub_list.myclass .class_list .class_item .class_left>span {font-size:1.4rem;}
  .sub_list.myclass .class_list .class_item .class_left .class_title .badge {font-size:1.2rem;}
  .sub_list.myclass .class_list .class_item .class_left .progress .progress_bar {width:25rem;}
  .edu_classroom {margin:3rem auto 8rem;}
  .course_summary {padding:3rem;}
  .course_summary h3 {font-size:2.4rem;}
  .course_summary .class_title {gap:1rem;}
  .course_summary .summary_progress .bar {height:0.6rem;}
  .lesson_card_wrap {grid-template-columns:repeat(2, 1fr);}
  .edu_notice {padding:2rem;}
  .player_top {padding:1.6rem;}
  .player_top h3 {font-size:2.4rem;}
  .player_layout {display:flex;flex-direction:column;}
  .player_layout .video_area, .player_layout .toc_area {width:100%;}
  .player_info>div {padding:1.2rem;font-size:1.4rem;width:calc(100%/4);}
  .player_layout .toc_area {border-top:1px solid var(--color-border);border-right:1px solid var(--color-border);}
  .player_info {display:flex;width:100%;}
  .sub_list.mycert p {font-size:1.6rem;}


}/* 768 */

@media (max-width: 500px) {
  .intro_top .intro_title h3,
  .sub_cont .sub_list h3 {
    font-size: 3rem;
  }

  .sub_visual .sub_title h4 {
    font-size: 2.2rem;
  }

  .sub_cont .sub_list.philosophy h3 {
    text-align: center;
  }

  .contact_form .form_wrap .contact_btn {
    margin-top: 0;
  }

  .intro_top .intro_title {
    padding: 3rem 0;
  }

  .intro_top .img_wrap {
    height: 20rem;
  }

  .sub_cont .sub_list .greeting_cont ul {
    gap: 2rem;
  }

  .sub_cont {
    margin: 0 auto 8rem;
  }

  .sub_cont .sub_list .greeting_cont {
    gap: 5rem;
  }

  .sub_cont .sub_list .purpose_wrap .purpose {
    margin-top: 3rem;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li {
    height: 20rem;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li .text_wrap {
    gap: 0;
    padding: 2rem;
  }

  .sub_cont .sub_list .purpose_wrap .purpose li .text_wrap .purpose_img img {
    width: 6rem;
    height: 6rem;
  }

  .sub_cont .sub_list .philosophy_wrap .philosophy_img {
    height: 25rem;
  }

  .sub_cont .sub_list .philosophy_wrap ul>li {
    padding: 2rem;
  }

  .sub_cont .sub_list .philosophy_wrap ul {
    gap: 1rem;
  }

  .sub_tab li a {
    padding: 1.2rem 5rem;
  }

  .sub_cont .sub_list .philosophy_wrap ul>li strong,
  .sub_cont .sub_list .purpose_wrap .purpose li .text_wrap p,
  .sub_cont .sub_list .philosophy_wrap .philosophy_title p,
  .intro_top .intro_title p {
    font-size: 1.6rem;
  }

  .tab_wrap {
    margin: 2rem 0;
  }

  .sub_list .item_top .img_wrap {
    height: 25rem;
  }

  .sub_visual {
    height: 20rem;
  }

  .sub_list .item_top .text_wrap h5 {
    font-size: 2.4rem;
  }

  .sub_list .item_top .text_wrap .edu_cont li,
  .sub_list .item_top .text_wrap {
    gap: 2rem;
  }

  .sub_list .item_top .text_wrap .btn_wrap {
    gap: 1rem;
  }

  .sub_list .item_top .text_wrap .btn_wrap li {
    width: 100%;
  }

  .sub_list .item_top .text_wrap .edu_cont li strong,
  .sub_list .item_top .text_wrap .edu_cont li span,
  .sub_list .item_top .text_wrap .btn_wrap li a,
  .sub_list .item_desc .item.desc02 .desc_cont li strong {
    font-size: 1.6rem;
  }

  .sub_list .item_top {
    padding-bottom: 3rem;
    gap: 2rem;
  }

  .sub_cont .sub_list.safety {
    gap: 3rem;
  }

  .sub_list .item_desc .item h6 {
    font-size: 2.4rem;
    margin-bottom: 2rem;
    padding-left: 0;
    text-align: center;
  }

  .sub_list .item_desc .item.desc01 .desc_text {
    gap: 1rem;
    padding: 2rem;
  }

  .sub_list .item_top .text_wrap .btn_wrap li a {
    padding: 1.2rem 0;
  }

  .sub_list .item_desc .item.desc01 .desc_text li:first-child {
    font-size: 1.6rem;
  }

  .sub_list .item_desc .item.desc02 p {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .sub_list .item_desc .item.desc01 .desc_text li,
  .sub_visual .sub_title p,
  .sub_list .item_top .text_wrap .edu_desc p,
  .sub_list .item_desc .item.desc05 p {
    font-size: 1.5rem;
  }

  .sub_list .item_desc .item.desc02 .desc_cont {
    column-gap: 1rem;
    row-gap: 2rem;
  }

  .sub_list .item_desc .item.desc02 .desc_cont li {
    width: 100%;
    padding: 2rem;
    flex: auto;
    gap: 1rem;
  }

  .sub_list .item_desc .item.desc03 .desc_cont {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .sub_list .item_desc .item.desc03 .desc_cont>li {
    width: 100%;
    flex: auto;
  }

  .sub_list .item_top .text_wrap .edu_cont,
  .sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap {
    gap: 1rem;
  }

  .sub_list .item_desc .item.desc03 .desc_cont>li,
  .sub_list .item_desc .item.desc05,
  .sub_list .item_desc .item.desc04 .way .cont_wrap,
  .sub_list .item_desc .item.desc02 .desc_cont,
  .sub_list .item_desc .item.desc04 .way .way_cont ul>li {
    padding: 2rem;
  }

  .sub_list .item_desc .item.desc02 .desc_cont li.title {
    font-size: 1.8rem;
  }

  .sub_list .item_desc .item.desc03 .desc_cont>li .text_wrap li:last-of-type {
    text-align: center;
  }

  .sub_list .item_desc .item.desc04 .way .cont_wrap,
  .sub_list .item_desc .item.desc04 .way .way_cont ul {
    flex-direction: column;
  }

  .sub_list .item_desc .item.desc04 .way .way_cont ul>li strong {
    margin-bottom: 0;
  }

  .sub_list .item_desc .item.desc04 .way .way_cont .way_sub_title {
    margin-bottom: 2rem;
  }

  .toggle_item {
    position: relative;
    cursor: pointer;
    z-index: 30;
  }

  .toggle_text {
    display: block;
    padding-right: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: all 0.3s ease;
  }

  /* 열렸을 때 */
  .toggle_item.open .toggle_text {
    white-space: normal;
  }

  /* 화살표 */
  .toggle_item .arrow {
    position: absolute;
    right: 0;
    top: 0.2rem;
    width: 2rem;
    height: 2rem;
  }

  .toggle_item .arrow::after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    z-index: 30;
  }

  /* 열리면 회전 */
  .toggle_item.open .arrow::after {
    transform: rotate(-135deg);
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list {
    gap: 0;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list .toggle_head {
    width: 100%;
    display: block;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    position: relative;
    padding-right: 3rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list .toggle_head_text,
  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list .arrow,
  .toggle_item .toggle_text,
  .toggle_item .arrow,
  .toggle_head .toggle_head_text,
  .toggle_head .arrow {
    pointer-events: none;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list .toggle_head_text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list .arrow {
    position: absolute;
    top: 0.4rem;
    right: 0;
    width: 1rem;
    height: 1rem;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list .arrow::after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    box-sizing: border-box;
    z-index: 99;
  }

  /* 기본은 첫 줄만 보이기 */
  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list>li:not(.toggle_head) {
    display: none;
    margin-top: 1rem;
  }

  /* 열렸을 때 아래 내용 보이기 */
  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list.open>li:not(.toggle_head) {
    display: block;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list.open .arrow::after {
    transform: rotate(-135deg);
  }

  .sub_list .item_desc .item.desc01 .desc_text li.pl {
    padding-left: 0;
  }

  .sub_list .item_desc .item.desc01 .desc_text.desc_toggle_list.open .toggle_head_text {
    white-space: normal;
  }

  .sub_cont {
    margin: 0 auto 5rem;
  }
  .sub_cont .sub_list.contact {gap:3rem;}
  .contact_form .form_wrap .form_item label, .contact_form .form_wrap .form_agree label {font-size:1.6rem;}
  .contact_form .form_wrap .contact_btn button {font-size:1.6rem;padding:1.2rem 5rem;background-color:var(--color-primary);color:var(--color-white);}
  .contact_header p, .filter_tab>ul li, .sub_list.myclass .class_list .class_item .class_left .class_title p {font-size:1.6rem;}
  .sub_cont .sub_list.myclass {gap:2rem;}
	.sub_list.myclass h4 {text-align:center;margin:0;}
	.sub_list.myclass .profile .profile_img {width:5rem;height:5rem;font-size:2rem;}
	.sub_list.myclass .profile .profile_text h6 {font-size:1.6rem;}
	.sub_list.myclass .profile {gap:2rem;}
	.sub_list.myclass .class_list .class_item .class_left .progress, .sub_list.myclass .class_list .class_item .class_left .progress .progress_bar, 
	.sub_list.myclass .class_list .class_item .class_left {width:100%;}
	.sub_list.myclass .class_list .class_item .class_btn a {font-size:1.4rem;}
	.sub_list.myclass .class_list .class_item {justify-content:center;row-gap:2rem;padding:1.6rem;}
	.sub_list.myclass .class_list .class_item .class_left .progress {gap:1rem;}
	.sub_list.myclass .class_list .class_item .class_left {gap:.5rem;}
	.course_summary {padding:2rem;border-radius:var(--radius-md);gap:1rem;}
	.course_summary span, .lesson_card_wrap .lesson_card .thumb .badge {font-size:1.4rem;}
	.course_summary h3 {font-size:2rem;}
	.course_summary .summary_progress strong {font-size:1.6rem;}
	.edu_classroom {margin:3rem auto 5rem;gap:2rem;}
	.lesson_card_wrap {grid-template-columns:repeat(1, 1fr);}
	.class_video {gap:1.6rem;}
	.edu_notice span {display:block;margin-right:0;margin-bottom:.5rem;font-size:1.6rem;}
	.edu_notice {padding:1.6rem;font-size:1.4rem;}
	.course_summary .badge_wrap {gap:1rem;}
	.edu_player_page {margin:3rem auto 5rem;}
	.player_top {padding:1rem 0;}
	.player_top p {font-size:1.4rem;}
	.player_info {flex-wrap:wrap;}
	.player_info>div {width:calc(100%/2);}
	.player_layout .toc_area h4 {padding:1.2rem;font-size:1.6rem;}
	.player_layout .toc_area>ul li {padding:1.2rem;}
	.toc_title_row .toc_badge {font-size:1.2rem;}
	.player_info .border-ri:nth-of-type(2) {border-right:0;}
	.player_info .border-ri:nth-of-type(1), .player_info .border-ri:nth-of-type(2) {border-bottom:0;}
	.toc_body .toc_desc {text-align:center;font-size:1.4rem;}
	.player_top .player_title a {font-size:1.4rem;}

}/* 500 */