#header2 {
  z-index: 99999;
}
.whnr {
  white-space: nowrap;
}
.sec * {
  word-break: keep-all;
  font-family: "Pretendard Variable";
  box-sizing: border-box;
}
.sec p {
  margin: 0;
}
.sec1 {
  width: 100%;
  aspect-ratio: 1440/699;
  background-image: url("https://landit.dothome.co.kr/landingzone/freecourse/img/heroback_pc.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  justify-content: center;
  /* padding-top: 110px; */
  align-items: center;
  position: relative;
}
.heroimg1 {
  width: 184px;
  position: absolute;
  left: 0;
  top: 41px;
}
.heroimg2 {
  width: 293px;
  position: absolute;
  left: 52px;
  bottom: 19px;
}
.heroimg3 {
  width: 184px;
  position: absolute;
  right: 36px;
  bottom: 19px;
}
.heroimg4 {
  width: 187px;
  position: absolute;
  right: 82px;
  top: 0;
}
.sec.sec1 .text-box {
  position: relative;
  line-height: 1;
  text-align: center;
}
.sec.sec1 .text-box p.t1 {
  font-family: "Pretendard Variable";
  font-weight: 400;
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 32px;
}
.sec.sec1 .text-box p.t1 span {
  font-weight: 700;
}
.sec.sec1 .text-box p.t2 {
  font-family: "SBaggro";
  font-weight: 300;
  font-size: 54px;
  color: #ffffff;
  margin-bottom: 19px;
}
.sec.sec1 .text-box p.t3 {
  color: #ffffff;
  font-family: "SBaggro";
  font-weight: 700;
  font-size: 98px;
  position: relative;
}

.sec.sec1 .text-box p.t4 {
  color: #ffe6a6;
  font-family: "Birthstone";
  font-weight: 400;
  font-size: 120px;
  margin-top: -59px;
  text-align: center;
  display: block;
  position: relative;

  margin-top: -30px;
}
.sec.sec1 .text-box p.t4 img {
  width: 100%;
}
.sec.sec1 .text-box a {
  background-color: #fff;
  width: 100%;
  display: block;
  border-radius: 100px;
  aspect-ratio: 411/74;
  color: #525aff;
  font-size: 30px;
  font-weight: 800;
  font-family: "Pretendard Variable";
  text-align: center;
  align-content: center;
  margin-top: 31px;
}

/* sec2 */
.sec.sec2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 200px;
}
.sec.sec2 .inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.sec.sec2 .inner .top-box {
  text-align: center;
}
.sec.sec2 .inner .top-box p.t1 {
  color: #4b63de;
  font-weight: 500;
  font-size: 38px;
  font-family: "SBaggro";
  margin-bottom: 20px;
}
.sec.sec2 .inner .top-box p.t2 {
  color: #000;
  font-weight: 300;
  font-size: 52px;
  font-family: "SBaggro";
  margin-bottom: 67px;
}
.sec.sec2 .inner .top-box p.t2 span {
  color: #4b63de;
  font-weight: 500;
  font-size: 52px;
  font-family: "SBaggro";
}
.sec.sec2 .inner .top-box p.t2 span.whnr,
.sec.sec2 .inner .top-box p.t2 span.xxc {
  color: #000;
  font-size: 52px;
  font-weight: 300;
}
.sec.sec2 .card-list {
  display: flex;
  flex-direction: column;
  gap: 44px;
}
.sec.sec2 .card-list .card-item {
  border-radius: 16px;
  border: 1px solid #cacaca;
  padding: 48px;
  padding-right: 70px;
  width: 100%;
  display: flex;
  width: 100%;
  gap: 52px;
}
.sec.sec2 .card-list .card-item .img-box {
  max-width: 404px;
  height: 328px;
  border-radius: 16px;
  overflow: hidden;
}
.sec.sec2 .card-list .card-item .img-box img {
  width: 100%;
}

.sec.sec2 .card-list .card-item .text-box {
  flex: 1;
}
.sec.sec2 .card-list .card-item .text-box .x-num {
  width: 44px;
  height: 44px;
  font-weight: 500;
  font-family: "Pretendard Variable";
  font-size: 24px;
  color: #fff;
  text-align: center;
  align-content: center;
  border-radius: 7px;
}
.sec.sec2 .card-list .card-item:nth-child(1) .text-box .x-num {
  background-color: #4b63de;
}
.sec.sec2 .card-list .card-item:nth-child(2) .text-box .x-num {
  background-color: #24c37d;
}
.sec.sec2 .card-list .card-item:nth-child(3) .text-box .x-num {
  background-color: #4b63de;
}
.sec.sec2 .card-list .card-item:nth-child(4) .text-box .x-num {
  background-color: #24c37d;
}
.sec.sec2 .card-list .card-item .text-box .t3 {
  font-size: 36px;
  font-weight: 500;
  font-family: "SBaggro";
  color: #000;
  position: relative;
  margin-top: 14px;
  margin-bottom: 28px;
  text-align: left;
}
.sec.sec2 .card-list .card-item .text-box .t3 span {
  font-family: "SBaggro";
}
.sec.sec2 .card-list .card-item .text-box .t3 span.blue {
  color: #4b63de;
  position: relative;
}
.sec.sec2 .card-list .card-item .text-box .t3 span.green {
  color: #20cb96;
  position: relative;
}
.sec.sec2 .card-list .card-item .text-box .t4 {
  font-size: 25px;
  font-weight: 400;
  font-family: "Pretendard Variable";
  color: #000;
  position: relative;
  margin: 0;
  line-height: 43px;
}
.sec.sec2 .card-list .card-item .text-box .t3 .color-bg {
  position: absolute;
  height: 23px;
  top: 19px;
}
.sec.sec2 .card-list .card-item:nth-child(1) .text-box .t3 .color-bg {
  background-color: #4b63de33;
  width: 107%;
  left: -4px;
}
.sec.sec2 .card-list .card-item:nth-child(2) .text-box .t3 .color-bg {
  background-color: #20cb9633;
  width: 107%;
  left: -4px;
}
.sec.sec2 .card-list .card-item:nth-child(3) .text-box .t3 .color-bg {
  background-color: #4b63de33;
  width: 107%;
  left: -4px;
}
.sec.sec2 .card-list .card-item:nth-child(4) .text-box .t3 .color-bg {
  background-color: #20cb9633;
  width: 107%;
  left: -4px;
}
.sec.sec2 .card-list .card-item:nth-child(2) .img-box {
  order: 2;
}
.sec.sec2 .card-list .card-item:nth-child(2) .text-box {
  order: 1;
}
.sec.sec2 .card-list .card-item:nth-child(4) .img-box {
  order: 2;
}
.sec.sec2 .card-list .card-item:nth-child(4) .text-box {
  order: 1;
}

.sec.sec2 .card-list .card-item:nth-child(2),
.sec.sec2 .card-list .card-item:nth-child(4) {
  padding-right: 45px;
}

.gradient-link-button {
  /* <a> 태그를 버튼처럼 만들기 위한 기본 설정 */
  display: flex; /* flex를 사용해 크기 지정 및 중앙 정렬 */
  justify-content: center; /* 텍스트 가로 중앙 정렬 */
  align-items: center; /* 텍스트 세로 중앙 정렬 */
  text-decoration: none; /* a 태그의 기본 밑줄 제거 */

  /* 크기 및 모양 */
  width: 401px;
  height: 95px;
  border-radius: 100px;

  /* 그라데이션 배경 */
  background: linear-gradient(to right, #ff47e6, #196fe9);

  /* 폰트 스타일 */
  color: white; /* 폰트 색상 */
  font-family: "Pretendard Variable", sans-serif;
  font-size: 35px;
  font-weight: 800;

  /* 기타 */
  cursor: pointer;

  /* Figma 그림자 값 (이미지 기반) */
  box-shadow: 0 2.53px 7.45px rgba(0, 0, 0, 0.25);
  justify-self: center;
  margin-top: 80px;
  margin-bottom: 136px;
}
.sec.sec3 {
  background-color: #ecf2f6;
  width: 100%;
  height: 496px;
  padding-top: 138px;
  text-align: center;
  position: relative;
}
.sec.sec3 img {
  width: 16px;
  margin: 0 auto;
  margin-top: 34px;
}
.sec.sec3 p.t1 {
  font-size: 38px;
  font-family: "SBaggro";
  font-weight: 500;
  line-height: 49px;
  color: #4b63de;
  text-align: center;
  margin-bottom: 19px;
}
.sec.sec3 p.t2 {
  font-size: 52px;
  font-family: "SBaggro";
  font-weight: 500;
  line-height: 49px;
  text-align: center;
  color: #000;
}
.sec.sec3 p.t2 span.blue {
  font-family: "SBaggro";
  color: #4b63de;
}

.sec.sec3 .card-list {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  gap: 20px;
  position: absolute;
  bottom: -127px;
  z-index: 111;
  left: 0;
  right: 0;
}
.sec.sec3 .card-list .card-item {
  border: 3px solid #4b63de;
  flex: 1;
  height: 249px;
  background-color: #fff;
  padding-top: 49px;
  border-radius: 15px;
  position: relative;
}
.sec.sec3 .card-list .card-item p.t3 {
  font-family: "SBaggro";
  font-weight: 500;
  font-size: 25px;
  margin-bottom: 21px;
  color: hsla(0, 0%, 0%, 0.7);
}
.sec.sec3 .card-list .card-item p.t4 {
  font-family: "SBaggro";
  color: #4b63de;
  font-size: 44px;
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  position: relative;
}
.sec.sec3 .card-list .card-item p.t4 span {
  font-family: "SBaggro";
  position: relative;
}
.sec.sec3 .card-list .card-item p.t4 .color-bg {
  position: absolute;
  height: 36px;
  bottom: -4px;
}
.sec.sec3 .card-list .card-item:nth-child(1) p.t4 .color-bg {
  background-color: #4b63de33;
  width: 105%;
  left: -3px;
}
.sec.sec3 .card-list .card-item:nth-child(2) p.t4 .color-bg {
  background-color: #4b63de33;
  width: 105%;
  left: -3px;
}
.sec.sec3 .card-list .card-item:nth-child(2)::before {
  content: "";
  background-image: url(https://landit.dothome.co.kr/landingzone/freecourse/img/plus.png);
  width: 72px;
  height: 72px;
  position: absolute;
  left: -50px;
  top: 88.5px;
  background-size: contain;
  background-repeat: no-repeat;
}
.sec.sec4 {
  background-color: #4b63de;
  width: 100%;
  /* height: 1066px; */
  padding-bottom: 120px;
  padding-top: 161px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.sec.sec4 .inner {
  max-width: 1200px;
  /* position: relative; */
  height: 100%;
  margin: 0 auto;
}
.sec.sec4 .inner .benefit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 42px 40px;
  background-color: #fff;
  border-radius: 16px;
}
.sec.sec4 .inner .benefit-list .benefit-item {
  width: 100%;
  height: 168px;
  display: flex;
  justify-content: space-between;
  border-radius: 16px;
  padding-left: 43px;
  padding-right: 43px;
  align-items: center;
}
.sec.sec4 .inner .benefit-list .benefit-item .t1 {
  font-family: "SBaggro";
  font-weight: 300;
  font-size: 26px;
  color: hsla(0, 0%, 0%, 0.7);
  text-align: left;
}
.sec.sec4 .inner .benefit-list .benefit-item .t2 {
  font-family: "SBaggro";
  font-weight: 500;
  font-size: 35px;
}
.sec.sec4 .inner .benefit-list .benefit-item .t2 span {
  color: #696969;
  font-weight: 300;
  font-size: 26px;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(1) {
  background-color: #fdeaeb;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(2) {
  background-color: #e7eeff;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(3) {
  background-color: #eee6fe;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(4) {
  background-color: #d7efe2;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(1) img {
  width: 80px;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(2) img {
  width: 126px;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(3) img {
  width: 105px;
}
.sec.sec4 .inner .benefit-list .benefit-item:nth-child(4) img {
  width: 148px;
}
.sec.sec5 {
  background-color: #d8e1eb;
  padding-top: 160px;
  padding-bottom: 138px;
}
.sec.sec5 .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.sec.sec5 .inner p.t1 {
  font-family: "SBaggro";
  font-size: 60px;
  font-weight: 500;
  color: #2f547d;
  text-align: center;
  margin-bottom: 56px;
}
.sec.sec5 .inner p.t2 {
  font-family: "SBaggro";
  font-weight: 700;
  font-size: 30px;
  color: #858585;
  margin-bottom: 16px;
}
.sec.sec5 .inner p.t3 {
  font-family: "SBaggro";
  font-weight: 300;
  font-size: 35px;
  color: #000;
}
.sec.sec5 .inner p.t3 span {
  font-family: "SBaggro";
  color: #596aff;
}
.sec.sec5 .inner .how-list {
  display: flex;
  gap: 20px;
  row-gap: 18px;
  flex-wrap: wrap;
}
.sec.sec5 .inner .how-list .how-item,
.how-item-last {
  background-color: #fff;
  max-width: 49%;
  width: 590px;
  height: 460px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  padding-top: 46px;
}
.sec.sec5 .inner .how-list .how-item:nth-child(1) img {
  height: 245px;
  width: fit-content;
  margin-top: 29px;
}
.sec.sec5 .inner .how-list .how-item:nth-child(2) img {
  height: 110px;
  width: fit-content;
  margin-top: 90px;
}
.sec.sec5 .inner .how-list .how-item:nth-child(3) img {
  height: 261px;
  width: fit-content;
  margin-top: 28px;
}
.sec.sec5 .inner .how-list .how-item:nth-child(4) img {
  height: 225px;
  width: fit-content;
  margin-top: 35px;
}
.sec.sec5 .inner a {
  margin-bottom: 0;
}
.how-item-last {
  margin-top: 18px;
  max-width: 100%;
  width: 100%;
  height: 591px;
}
.how-item-last .t3 {
  margin-bottom: 36px;
}
.how-item-last img {
  height: 327px;
}
.sec.sec6 {
  background-color: #fff;
  padding: 148px 0;
}

.sec.sec6 .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.sec.sec6 .t1 {
  font-family: "SBaggro";
  font-weight: 500;
  font-size: 60px;
  color: #2d3033;
  text-align: center;
  margin-bottom: 20px;
}

.sec.sec6 .t2 {
  font-family: "SBaggro";
  font-weight: 300;
  font-size: 24px;
  line-height: 145%;
  color: #353535;
  text-align: center;
}
.sec.sec6 .t3 {
  font-family: "Pretendard Variable";
  font-weight: 500;
  font-size: 20px;
  line-height: 100%;
  color: #4b63de;
  text-align: center;
  margin-top: 36px;
  margin-bottom: 56px;
}
.sec.sec6 .top {
  background-color: #4b63de;
  color: #fff;
  font-weight: 500;
  font-size: 32px;
  font-family: "SBaggro";
  text-align: center;
  border-radius: 16px;
  height: 80px;
  align-content: center;
  margin-bottom: 33px;
  position: relative;
}

.table-container {
  display: flex;
  font-family: "Pretendard Variable";
}
.table-container .table-left {
  background-color: #669edd;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  font-family: "Pretendard Variable";
  border-radius: 16px 0 0 16px;
  text-align: center;
  align-content: center;
  min-width: 82px;
  height: 821px;
  border: 1px solid #e8e8e8;
  position: relative;
}
.sec.sec6 .top img.sample {
  position: absolute;
  top: 6px;
  left: -70px;
  width: 168px;
  height: 168px;
  z-index: 999;
  box-shadow: 1px 0 16px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
}
.table-container table {
  flex: 1;
}
.table-container table thead th {
  height: 102px;
  background-color: #4b63de;
  color: #fff;
  text-align: center;
  font-family: "Pretendard Variable";
  font-weight: 600;
  font-size: 22px;
  box-sizing: border-box;
  min-width: 100px;
  align-content: center;
}
.table-container table thead th.z1 {
  font-size: 18px;
  border-radius: 0 16px 0 0;
}
.table-container table thead th.z2 {
  font-size: 18px;
  border-radius: 0 0 16px 0;
}
.table-container table thead th:nth-child(4) {
  width: 508px;
}
.table-container table tbody tr td {
  text-align: center;
  font-family: "Pretendard Variable";
  font-size: 18px;
  font-weight: 600;
  align-content: center;
}
.table-container table tbody tr td.col-category {
  background-color: #91bae8;
}
.table-container table tbody tr td.col-category2 {
  background-color: #c0d4e8;
}
.table-container table tbody tr td.col-category3 {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  background-color: #e4ecf4;
}
.table-container table tbody tr td.col-category3:first-child {
  border-top: none;
}

.table-container table tbody tr td.borderfftb {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.table-container table tbody tr td.bdte8 {
  border-top: 1px solid #e8e8e8;
}
.table-container table tfoot tr td {
  height: 115px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  align-content: center;
}
.table-container table tbody tr td.col-time {
  background-color: #f8f8f8;
  width: 184px;
}
.table-container table tbody tr td.col-details {
  width: 508px;
}
.sec.sec6 .btn-wrapper {
  display: flex;
  gap: 39px;
  justify-content: center;
}
.sec.sec6 .btn-wrapper a {
  color: #fff;
  display: block;
  background-color: #9a47ff;
  width: 411px;
  height: 74px;
  border-radius: 100px;
  text-align: center;
  align-content: center;

  font-family: "Pretendard Variable";
  font-size: 30px;
  font-weight: 500;
  box-shadow: 0 0.253rem 0.745rem rgba(0, 0, 0, 0.25);
}
.sec.sec6 .btn-wrapper a:nth-child(2) {
  background-color: #226de9;
}
.sec.sec7 {
  background-color: #dfeaf7;
  padding-top: 150px;
  padding-bottom: 138px;
}
.sec.sec7 .t1 {
  font-size: 40px;
  font-weight: 300;
  font-family: "SBaggro";
  margin-bottom: 23px;
  text-align: center;
}
.sec.sec7 .t2 {
  font-size: 60px;
  font-weight: 500;
  font-family: "SBaggro";
  color: #4b63de;
  text-align: center;
}
.sec.sec7 .top-box {
  text-align: center;
}
.sec.sec7 .top-box img {
  width: 260px;
  z-index: 3;
  position: relative;
  margin-bottom: -42px;
}
.sec.sec7 .top-box .info-x {
  position: relative;
  width: 498px;
  height: 84px;
  color: #fff;
  background-color: #4b63de;
  text-align: center;
  align-content: center;
  border-radius: 100px;
  font-size: 30px;
  font-weight: 600;
  place-self: center;
  margin: 0 auto;
  margin-top: -42px;
  z-index: 3333;
}
.sec.sec7 .story-doc {
  background-color: #fff;
  padding: 97px 81px 69px 80px;
  font-size: 28px;
  font-family: "Pretendard Variable";
  font-weight: 400;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  max-width: 1200px;
  margin: 0 auto;
  margin-top: -42px;
  border-radius: 16px;
  position: relative;
  color: #2d2f32;
}
.sec.sec7 .story-doc span.black {
  color: #111212;
}
.sec.sec7 .story-doc span.color-bg {
  position: relative;
}
.sec.sec7 .story-doc span.color-bg::after {
  content: "";
  background-color: hsla(230, 69%, 58%, 0.2);
  position: absolute;
  width: 100%;
  height: 23px;
  bottom: -6px;
  left: 0;
}
.sec.sec7 .story-doc span.blue {
  font-weight: 800;
  color: #4b63de;
}
.sec.sec7 .story-doc span.color-bg::after {
  height: 2.3rem;
  bottom: -0.6rem;
  content: none;
}
.sec.sec7 .story-doc span.color-bg .cb {
  position: relative;
  z-index: 3;
}
.sec.sec7 .story-doc span.txt-span {
  position: relative;
}
.sec.sec7 .story-doc span.color-bg .cb::before {
  content: "";
  z-index: -1;
  background-color: #dbe0f8;
  position: absolute;
  width: 104%;
  left: 0;
  height: 2.3rem;
  bottom: -0.6rem;
  bottom: 0.2rem;
  top: unset;
  height: 40%;
}
.sec.sec7 .gradient-link-button {
  margin-bottom: 0;
}
.sec.sec8 .inner {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
.sec.sec8 .img-box {
  width: 100%;
  text-align: center;
}
.sec.sec8 .img-box img {
  max-width: 1400px;
  width: 100%;
}
.sec.sec8 .dtc1 {
  margin-bottom: 120px;
}
.sec.sec8 .dtc2 {
  margin-bottom: 30px;
}
.sec.sec8 .t1 {
  font-size: 40px;
  color: #4b63de;
  font-weight: 500;
  font-family: "SBaggro";
  text-align: center;
  line-height: 50px;
}

.sec.sec8 .t2 {
  font-size: 52px;
  color: #0b0b0b;
  font-weight: 300;
  font-family: "SBaggro";
  text-align: center;
  line-height: 50px;
  margin-bottom: 50px;
}
p.t3 {
  font-size: 14px;
  color: #2d2f32;
  text-align: center;
}
.sec.sec8 .t2 span.blue {
  color: #4b63de;
  font-weight: 700;
  position: relative;
}
.sec.sec8 .t2 span.blue .color-bg {
  position: absolute;
  height: 36px;
  bottom: -4px;
}
.sec.sec8 .t2 span.blue .color-bg {
  background-color: #4b63de33;
  width: 105%;
  left: -3px;
}
.div-table-container {
  /* border: 1px solid #ddd; */

  overflow: hidden; /* 모서리 둥글게 */
  font-family: sans-serif;
}

/* * 컬럼(열) 너비 정의 
 * 여기서 비율을 조절하면 테이블 전체에 적용됩니다.
*/
.list-header .cell.subject {
  flex-basis: 16.57%;
}
.list-header .cell.instructor {
  flex-basis: 24.28%;
}
.list-header .cell.course-name {
  flex-basis: 33.72%;
}
.list-header .cell.duration {
  flex-basis: 25.44%;
}

.cell.subject {
  flex-basis: 16.57%;
  text-align: center;
  align-content: center;
}
.cell.instructor {
  flex-basis: 29.1%;
  text-align: center;
  align-content: center;
}
.cell.course-name {
  flex-basis: 40.42%;
  text-align: center;

  align-content: center;
}
.cell.duration {
  text-align: center;
  flex-basis: 30.49%;

  border-radius: 0 16px 16px 0;
  align-content: center;
}
.course-group .instructor {
  flex-basis: 29.1%;
  text-align: center;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  align-content: center;
}
.course-group .cell.course-name {
  background-color: #f8f8f8;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
}
.course-group .cell.duration {
  background-color: #eeeeee;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
}

/* 헤더 스타일 */
.list-header {
  border-radius: 16px;
  display: flex;
  font-weight: bold;
  font-size: 30px;
  background-color: #6277e2;
  color: #fff;
  text-align: center;
}

/* * 행 그룹 (예: '회계' 그룹, '경제' 그룹) 
 * '과목' 셀과 '나머지 행'들을 가로로 배치
*/
.course-group {
  display: flex;
  margin-top: 12px;
}

/* 과목 셀 (rowspan 처리) */
.course-group .cell.subject {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background-color: #d1d9ff;
  border-right: 1px solid #eee;
  font-size: 24px;
  border-radius: 16px 0 0 16px;
}

/* 과목을 제외한 나머지 행들 (강사, 강의, 시간) */
.sub-rows {
  display: flex;
  flex-direction: column; /* 행들을 세로로 쌓음 */
  flex-grow: 1; /* 남은 공간을 모두 차지 */
}

/* 개별 행 (강사, 강의, 시간) */
.sub-row {
  height: 94px;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 24px;
}
.sub-row div {
  height: 100%;
}

/* 모든 셀의 공통 스타일 */
.cell {
  padding: 12px 10px;
  box-sizing: border-box;
  word-break: keep-all; /* 단어 줄바꿈 방지 */
}
.course-group .sub-row.lt div.cell {
  border-bottom: 1px solid #e8e8e8;
}
.course-group .cell.duration.nobr {
  border-radius: 0;
}
.course-group .cell.duration.nobb {
  border-radius: 0 16px 0 0;
}
.course-group .cell.duration.nobt {
  border-radius: 0 0 16px 0;
}

.course-group .cell.course-name.nobr {
  border-radius: 0;
}
.course-group .cell.course-name.nobb {
  border-radius: 0 16px 0 0;
}
.course-group .cell.course-name.nobt {
  border-radius: 0 0 16px 0;
}
.sec.sec9 {
  background-color: #f6f6f6;
  padding-top: 148px;
  padding-bottom: 150px;
}
.sec.sec9 .inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sec.sec9 .t1 {
  font-family: "SBaggro";
  color: #4b63de;
  font-weight: 500;
  font-size: 53px;
  line-height: 48px;
  margin-bottom: 51px;
  position: relative;
}
.sec.sec9 .t2 {
  font-size: 14px;
  color: #2d2f32;
}
.sec.sec9 img {
  width: 586px;
  margin-bottom: 60px;
}

.sec.sec9 span.color-bg {
  position: absolute;
  height: 34px;
  width: 104%;
  left: -11px;
  bottom: 0;
  background-color: hsla(230, 69%, 58%, 0.1);
}

.sec.sec9 a {
  margin-top: 0;
  margin-bottom: 18px;
}
.sec.sec10 {
  background-color: #ffffff;
  padding-top: 148px;
  padding-bottom: 150px;
  text-align: center;
}
.sec.sec10 .inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.sec.sec10 p.t1 {
  font-family: "SBaggro";
  font-size: 40px;
  font-weight: 300;
  line-height: 48px;
  text-align: center;
}
.sec.sec10 p.t2 {
  font-family: "SBaggro";
  font-size: 53px;
  font-weight: 300;
  line-height: 48px;
  color: #4b63de;
  position: relative;
  width: fit-content;
  place-self: center;
  text-align: center;
}
.sec.sec10 p.t2 span {
  font-weight: 500;
  font-family: "SBaggro";
}
.sec.sec10 p.t3 {
  font-family: "SBaggro";
  color: #fff;
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 20px;
}
.sec.sec10 span.color-bg {
  position: absolute;
  height: 34px;
  width: 104%;
  left: -11px;
  bottom: 0;
  background-color: hsla(230, 69%, 58%, 0.1);
}

.sec.sec10 .lecture-list {
  display: flex;
  width: 100%;
  gap: 20px;
  margin-top: 42px;
}
.sec.sec10 .lecture-item {
  height: 444px;
  flex: 1;
  border-radius: 20px;
  padding-top: 47px;
  position: relative;
}
.sec.sec10 .lecture-item:nth-child(1) {
  background-color: #3c7f76;
}
.sec.sec10 .lecture-item:nth-child(2) {
  background-color: #a18073;
}
.sec.sec10 .lecture-item img {
  width: 215px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.sec.sec10 .lecture-item a {
  display: block;
  background-color: #fff;
  width: 410px;
  height: 83px;
  color: #3c7f76;
  margin: 0 auto;
  border-radius: 8px;
  align-content: center;
  font-weight: 500;
  font-size: 32px;
  text-decoration: none;
  margin-top: -23px;
  position: relative;
  z-index: 9;
  box-shadow: 5px 5px 16px rgba(0, 0, 0, 0.1);
}
.sec.sec10 .lecture-item a:hover {
  background-color: #eeeeee;
}
.sec.sec11 {
  background-color: #e5e5e5;
  padding-bottom: 138px;
  padding-top: 150px;
}
.sec.sec11 .inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.sec.sec11 .gradient-link-button {
  padding: 25px 38px;
  width: auto;
  margin-bottom: 0;
}

.sec.sec11 .t1 {
  font-family: "SBaggro";
  font-size: 40px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 53px;
}
.sec.sec11 .t4 {
  font-size: 18px;
  font-weight: 700;
  color: #585858;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 32px;
}
.sec.sec11 .faq-list {
  display: flex;
  flex-wrap: wrap; /* 모바일에서 줄바꿈을 위해 (선택 사항) */
  justify-content: space-between;
  gap: 20px; /* 두 열 사이의 간격 */
  border-bottom: 2px solid #f0f0f0; /* FAQ와 하단 안내 구분선 */
  padding-bottom: 20px;
  background-color: #fff;
  padding: 61px 58px 38px 48px;
  border-radius: 24px;
}
.sec.sec11 .faq-list .line {
  /* width: 1px; */
  /* 1. 테두리 너비와 스타일을 설정합니다. */
  /* background-color: white; */

  /* 1. CSS 테두리 굵기를 1px로 설정 */
  width: 1px;
  border-width: 1px;
  background-image: linear-gradient(
    to bottom,
    /* 그라데이션 방향: 세로 */ #c0c0c0 9px,
    /* 점선: 9px까지 #C0C0C0 색 */ transparent 9px /* 간격: 9px부터 투명 처리 */
  );

  /* * 2. 패턴의 총 크기를 설정합니다.
         * - 너비 1px, 높이 18px (점선 9px + 간격 9px)
         */
  background-size: 1px 18px;

  /* 3. 이 패턴을 세로(y축)로 반복합니다. */
  background-repeat: repeat-y;
}
.sec.sec11 .faq-column {
  flex: 1; /* 각 열이 가능한 공간을 균등하게 차지 */
  min-width: 300px; /* 열의 최소 너비 (모바일 반응형 대비) */
}

/* * =========================================
 * 3. 개별 Q&A 아이템
 * =========================================
 */
.sec.sec11 .faq-item {
  margin-bottom: 51px;
}

.sec.sec11 .faq-question {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0 0 12px 0;
}

.sec.sec11 .faq-answer {
  font-size: 18px;
  color: #585858;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
  line-height: 21px;
  margin-left: 18px;
}

.sec.sec11 .button-wrapper {
  text-align: center;
  margin-top: 20px;
}

.sec.sec11 .cta-button {
  display: inline-block;
  background-color: #333a49; /* 이미지의 어두운 버튼 색상 */
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
  text-decoration: none; /* 링크 밑줄 제거 */
  width: 178px;
  height: 61px;
  align-content: center;
  border-radius: 16px; /* 둥근 모서리 */
  cursor: pointer;
  transition: background-color 0.3s ease; /* 부드러운 호버 효과 */
}

.sec.sec11 .cta-button:hover {
  background-color: #4a5468; /* 마우스 올렸을 때 색상 */
}