.container-inner {
  position: relative;
  max-width: 1200px;
  padding-left: 40px;
  padding-right: 40px;
  margin: 0 auto;
  width: 100%;
  /* overflow: hidden;*/
}

/*header*/
.header-section {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1003;
  margin: 0 auto;
}

.header-section .header {
  position: relative;
  z-index: 1003;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 40px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.25);
  height: 68px;
}

.header-section.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

.header-section .img-logo {
  display: inline-block;
  background: url(../images/logo-white.svg) no-repeat center center / contain;
  width: 132px;
  height: 20px;
}

.header-section .header-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}

.header-section .header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-section .nav-btns .nav-btn-items {
  display: flex;
  align-items: center;
  gap: 40px;
}

.header-section .nav-btns .nav-btn-items .nav-btn-item>a {
  font-size: 1.4rem;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.60);
}

.header-section .nav-btns .nav-btn-items .nav-btn-item.on>a {
  font-weight: 700;
  color: #fff;
}

.icon-grobal {
  display: inline-block;
  background: url(../images/ic-global-white.svg) no-repeat center center / contain;
  width: 21px;
  height: 21px;
}

.icon-grobal-black {
  display: inline-block;
  background: url(../images/ic-global-dark.svg) no-repeat center center / contain;
  width: 21px;
  height: 21px;
}

.header-section .btn-store {
  display: flex;
  padding: 10px 16px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.60);
  color: #fff;
  text-align: right;
  font-family: "Pretendard SemiBold";
  font-size: 12px;
  line-height: 130%;
  /* 15.6px */
}

.header-section .btn-store-group {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-section.is-fixed .header.white {
  background-color: #fff;
}
.header-section.is-fixed .header.black{
  background-color: #14121E;
}
.header-section.is-fixed .header.white .img-logo {
  display: inline-block;
  background: url(../images/logo-black.svg) no-repeat center center / contain;
  width: 132px;
  height: 20px;
}

.header-section.is-fixed .header.white .icon-grobal {
  display: inline-block;
  background: url(../images/ic-global-dark.svg) no-repeat center center / contain;
  width: 21px;
  height: 21px;
}

.header-section.is-fixed .header.white .nav-btns .nav-btn-items .nav-btn-item>a {
  font-size: 1.4rem;
  line-height: 20px;
  color: rgba(0, 0, 0, 0.60);
}

.header-section.is-fixed .header.white .nav-btns .nav-btn-items .nav-btn-item.on>a {
  font-weight: 700;
  color: #1D1D1F;
}

.header-section .mobile-btn {
  display: none;
}

.header-section.is-fixed .header.white .btn-store {
  border-radius: 100px;
  border: 1px solid rgba(29, 29, 31, 0.60);
  color: #1D1D1F;
}

.mobile-layer{
  display: none;
}

@media screen and (max-width:767px) {
  .header-section.header {
    background-color: #fff;
  }
  .header-section .header.black .img-logo {
    background: url(../images/logo-white.svg) no-repeat center center / contain;
  }
  .header-section .header .img-logo {
    background: url(../images/logo-black.svg) no-repeat center center / contain;;
  }

  .header-section .header .icon-grobal {
    background: url(../images/ic-global-dark.svg) no-repeat center center / contain;
  }

  .header-section .header .nav-btns .nav-btn-items .nav-btn-item>a {
    color: rgba(0, 0, 0, 0.60);
  }

  .header-section .header .nav-btns .nav-btn-items .nav-btn-item.on>a {
    color: #1D1D1F;
  }
  .header-section .header {
    padding: 0px 20px;
    height: 64px;
  }

  .header-section .nav-btns {
    display: none;
  }

  .header-section .mobile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .header-section .mobile-btn .btn-store {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    color:#fff;
    text-align: right;
    font-family: "Pretendard SemiBold";
    font-size: 12px;
    line-height: 130%;
    border-radius: 100px;
    border: 1px solid rgba(29, 29, 31, 0.60);
    color: #1D1D1F;
  }
  .header-section .header.black .mobile-btn .btn-store {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.60);
    color: #fff;
    text-align: right;
    font-family: "Pretendard SemiBold";
    font-size: 12px;
    line-height: 130%;
    border-radius: 100px;
  }
  .header-section .header.black .mobile-btn .btn-menu .ico-menu {
    display: inline-block;
    background: url(../images/btn-menu.png) no-repeat center center / contain;
    width: 32px;
    height: 32px;
  }
  .header-section .mobile-btn .btn-menu {
    width: 32px;
    height: 32px;
  }
  .header-section .mobile-btn .btn-menu .ico-menu{
    display: inline-block;
    background: url(../images/btn-menu-black.png) no-repeat center center / contain;
    width: 32px;
    height: 32px;
  }
  .header-section.is-fixed .header.white .mobile-btn .btn-menu .ico-menu {
    background: url(../images/btn-menu-black.png) no-repeat center center / contain;
    width: 32px;
    height: 32px;
  }
  .mobile-layer {
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: block;
  }
  .mobile-layer.off{
    display: none;
  }
  .mobile-layer .mobile-header {
    position: relative;
    z-index: 1003;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.25);
    height: 64px;
  }

  .mobile-layer .mobile-header .img-logo {
    display: inline-block;
    background: url(../images/logo-black.svg) no-repeat center center / contain;
    width: 132px;
    height: 20px;
  }

  .mobile-layer .mobile-header .mobile-btn {
    display: flex;
    gap: 8px;
  }

  .mobile-layer .mobile-header .mobile-btn .btn-store {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid rgba(29, 29, 31, 0.60);
    color: #1D1D1F;
    text-align: right;
    font-family: "Pretendard SemiBold";
    font-size: 12px;
    line-height: 130%;
  }

  .mobile-layer .mobile-header .mobile-btn .btn-close {
    width: 32px;
    height: 32px;
  }

  .mobile-layer .mobile-body {
    padding: 20px 0;
    height: calc(100vh - 120px);
  }

  .mobile-layer .mobile-body .link {
    color: #1D1D1F;
    font-family: "Pretendard SemiBold";
    font-size: 20px;
    line-height: 130%;
    text-decoration: none;
    display: block;
    padding: 20px 20px;
    /* 26px */
  }

  .mobile-layer .mobile-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 24px;
  }

  .mobile-layer .mobile-foot .btn-langs {
    display: flex;
    align-items: center;
  }

  .mobile-layer .mobile-foot .btn-langs .btn-lang {
    width: 27px;
    height: 20px;
    color: #A8A8A8;
    font-size: 16px;
    line-height: 100%;
    /* 16px */
  }

  .mobile-layer .mobile-foot .btn-langs .btn-lang.on {
    color: #1D1D1F;
    font-weight: 600;
  }

  .mobile-layer .mobile-foot .btn-langs .bar {
    display: inline-block;
    width: 1px;
    width: 0.5px;
    margin: 0px 8px;
    height: 10px;
    background: #999;
  }
}

.dropdown-la {
  position: relative;
}

.dropdown-la .btn-dropdown {
  position: relative;
}

.dropdown-la .dropdown-menu {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 8px;
  /* study_longtap */
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.40), 0 1.2px 12px 0 rgba(0, 0, 0, 0.09);
}

.dropdown-la.open .dropdown-menu {
  display: block;
}

.dropdown-la .dropdown-menu::after {
  content: '';
  position: absolute;
  top: -7px;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/dropdown-arrow.png) no-repeat center center /contain;
  width: 29px;
  height: 8px;
}

.dropdown-la .dropdown-item {
  color: #1D1D1F;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  /* 14px */
  border-bottom: 0.5px solid #E2E2E8;
  width: 68px;
  height: 38px;
}

.dropdown-la .dropdown-item:last-child {
  border-bottom: 0px;
}

.main-visual-section {
  position: relative;
  background: url(../images/bg-main-visual.png) no-repeat center center / cover;
  height: 100vh;
  overflow: hidden;
}
.main-visual-section::after{
  content: '';
  display: block;
  padding-bottom: 100%;
}
.main-visual-section > .video{
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: -2px;
  max-width: 100%;
  width: 100%;
  height: 101%;
  object-fit: cover;
}

.main-visual-section .btn-arrow {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateY(-50%);
  width: 36px;
  height: 16px;
  z-index: 1;
}

@media screen and (max-width:767px) {
  .container-inner {
    padding: 0px 20px;
  }

  .main-visual-section {
    position: relative;
    background: url(../images/bg-main-visual.png) no-repeat center center / cover;
    height: 284px;
  }

  .main-visual-section .btn-arrow {
    bottom: 16px;
    width: 16px;
    height: 6px;
  }
}

.section-header {
  margin-bottom: 80px;
}

.section-header-02 {
  margin-bottom: 56px;
}

.section .sub-text {
  color: #6B6B6B;
  text-align: center;
  font-size: 24px;
  line-height: 130%;
  margin-bottom: 16px;
}

.section .sub-text-02 {
  color: #6B6B6B;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  line-height: 150%;
  margin-top: 20px;
}

.section .gradient-text {
  color: #353535;
  font-family: "Pretendard ExtraBold";
  font-size: 72px;
  line-height: 100%;
  /* 72px */
  letter-spacing: -1.44px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #32A4F6, #4F32F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text {
  background: linear-gradient(90deg, #32A4F6, #4F32F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.guide-text {
  color: #A8A8A8;
  font-size: 14px;
  line-height: 120%;
  margin-top: 40px;
  text-align: center;
}

.section .gradient-text.plus {
  position: relative;
}

.section .gradient-text.plus::after {
  content: '';
  display: block;
  background: url(../images/ico_plus.svg) no-repeat center center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  right: -40px;
}

.section .section-title {
  color: #1D1D1F;
  text-align: center;
  font-family: "Pretendard Light";
  font-size: 40px;
  line-height: 130%;
  /* 52px */
  letter-spacing: -0.14px;
}

.section .section-title .flex {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.section .section-title.bold {
  color: #1D1D1F;
  text-align: center;
  font-family: "Pretendard Bold";
  font-size: 40px;
  line-height: 130%;
  /* 52px */
  letter-spacing: -0.14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media screen and (max-width:767px) {
  .section-header {
    margin-bottom: 40px;
  }

  .section .sub-text {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .section .section-title .flex {
    display: block;
  }

  .section-header-02 {
    margin-bottom: 40px;
  }

  .section .section-title.bold {
    display: block;
    font-size: 28px;
  }

  .section .gradient-text {
    margin-top: 8px;
    font-size: 56px;
    display: inline-block;
  }

  .section .gradient-text.plus::after {
    width: 28px;
    height: 28px;
    right: -32px;
    top: 8px;
  }

  .section .sub-text-02 {
    font-size: 16px;
    line-height: 150%;
    /* 30px */
    margin-top: 20px;
  }

  .section .section-title {
    font-size: 28px;
  }

  .guide-text {
    margin-top: 24px;
  }
}

.section-01 {
  background: url(../images/bg-section-01.png) no-repeat center center / cover;
  padding: 120px 0;
}

.section-01 .section-title .logo {
  width: 175px;
  height: 30.143px;
  flex-shrink: 0;
  margin-left: 20px;
}

.section-01 .card-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  max-width: 852px;
  margin: 0 auto;
}


.section-01 .card-item {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-radius: 20px;
  padding: 32px 12px 12px 32px;
  height: 200px;
}

.section-01 .card-item img {
  width: 110px;
  height: 110px;
}

.section-01 .card-item.item-01 {
  background-color: #F7958B;
}

.section-01 .card-item.item-02 {
  background-color: #90A1FF;
  padding-right: 38px;
}

.section-01 .card-item.item-03 {
  background-color: #F7958B;
}

.section-01 .card-item.item-04 {
  background-color: #8EB5F5;
}
.section-01 .card-item.item-03 .count-num {
  display: inline-block;
  width: 92px;
}
.section-01 .card-item.item-04 .count-num {
  position: relative;
  display: inline-block;
  width: 196px;
}
.section-01 .card-item.item-04 .count-num::after {
  content: '';
  display: block;
  background: url("../images/ico-plus-white.png") no-repeat center center / contain;
  width: 18px;
  height: 18px;
  position: absolute;
  bottom: 10px;
  right: -18px;
}
.section-01 .card-item.item-03 .text{
  font-family: "Hakgyoansim Chilpanjiugae B";
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.56px;
  text-transform: lowercase;
}
.section-01 .card-item.item-03 .text .small{
  font-size: 24px;
}
.section-01 .card-item .text-area  {
  align-self: flex-start;
}
.section-01 .card-item .text-area .sub-text {
  color: #fff;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  margin-bottom: 13px;
  text-align: left;
}

.section-01 .card-item .text-area .title {
  color: #FFF;
  font-family: "Pretendard Bold";
  font-size: 48px;
  line-height: 100%;
  letter-spacing: -0.96px;
  text-transform: uppercase;
}


@media screen and (max-width:767px) {
  .section-01 {
    padding: 56px 0;
  }

  .section-01 .section-title .logo {
    width: 125px;
    height: 21.945px;
    margin-left: 0px;
  }

  .section-01 .card-items {
    grid-template-columns: repeat(1, 1fr);
  }

  .section-01 .card-item {
    display: flex;
    min-width: 280px;
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 12px;
    height: 98px;
  }

  .section-01 .card-item .text-area .sub-text {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .section-01 .card-item .text-area .title {
    font-size: 32px;
  }

  .section-01 .card-item img {
    display: flex;
    width: 74px;
    height: 74px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
  }
  .section-01 .card-item.item-03 .count-num {
    width: 64px;
  }
  .section-01 .card-item.item-04{
    padding-right: 34px;
  }
  .section-01 .card-item.item-04 .count-num {
    width: 128px;
  }
  .section-01 .card-item:nth-child(2) .text-area,
  .section-01 .card-item:nth-child(4) .text-area{
    order: 2;
  }
  .section-01 .card-item .text-area {
    align-self: center;
  }

  .section-01 .card-item.item-04 .count-num::after {
    width: 13px;
    height: 13px;
    bottom: 10px;
  }
}

.section-02 {
  background: url(../images/bg-section-02.png) no-repeat top center / cover;
  /* background-color: rgba(78, 50, 246, 1); */
  padding: 120px 0px 0px;
  overflow: hidden;
}

.section-02 .content-block {
  display: flex;
  align-items: center;
  gap: 80px;
  align-self: stretch;
  padding-bottom: 120px;
}

.section-02 .content-block .content {
  position: relative;
  width: 100%;
}

.section-02 .content-block:first-child .content img {
  position: absolute;
  left: -73px;
  bottom: -10px;
  z-index: 2;
  width: 128px;
  height: 192px;
}

.section-02 .content-block:nth-child(2) .content img {
  position: absolute;
  left: -72px;
  bottom: -18px;
  z-index: 2;
  width: 145px;
  height: 248px;
}

.section-02 .content-block:nth-child(3) .content img {
  position: absolute;
  right: -72px;
  bottom: -18px;
  z-index: 2;
  width: 146px;
  height: 200px;
}

.section-02 .content-block:nth-child(4) .content img {
  position: absolute;
  right: -72px;
  bottom: -18px;
  z-index: 2;
  width: 214.967px;
  height: 248px;
}

.section-02 .content-block .video-area {
  border: 2px solid #EEEEEF;
  width: 100%;
  border-radius: 23px;
}

.section-02 .content-block .video-area .video {
  position: relative;
  max-width: 960px;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  border: 12px solid #F9F9FB;
  box-shadow: 18.452px 18.452px 36.904px 0 rgba(68, 68, 68, 0.30);
}

.section-02 .content-block .video-area .video::after {
  content: '';
  display: block;
  padding-bottom: 70.75%;
  background-color: #fff;
}

.section-02 .content-block .video-area .video>video {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  z-index: 1;
  border-radius: 12px;
  border: 2px solid #E0E0E0;
}

.section-02 .content-block .text-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.section-02 .content-block .text-area .sub-text {
  display: block;
  color: #FFF;
  text-align: left;
  font-family: "Hakgyoansim Chilpanjiugae B";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  /* 31.2px */
  margin-bottom: 16px;
}

.section-02 .content-block .text-area .title {
  color: #fff;
  font-family: "Pretendard Bold";
  font-size: 40px;
  line-height: 130%;
  /* 52px */
  letter-spacing: -0.35px;
}

.section-02 .content-block .text-area .tags .flex {
  display: flex;
  gap: 8px;
}

.section-02 .content-block .text-area .tags .flex+.flex {
  margin-top: 8px;
}

.section-02 .content-block .text-area .tag {
  color: rgba(255, 255, 255, 0.90);
  font-family: "Pretendard SemiBold";
  font-size: 16px;
  line-height: 100%;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #5237E4;
  /* 16px */
  display: inline-block;
  padding: 12px 16px;
  gap: 8px;
}

.section-02 .content-block .swiper-slide {
  width: auto;
  cursor: grab;
}
.section-02 .content-block .swiper-slide .img-box{
  width: 243px;
  cursor: grab;
}
.section-02 .content-block .text-area {
  margin-top: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 130%;
}

.section-02 .content-block .swiper-container {
  clip-path: inset(0 -10000px 0 0);
  width: 100%;
  /* margin-right: 147px; */
}

.section-02 .tool-section {
  padding: 100px 0;
  align-items: flex-start
}

.section-02 .tool-section .text-box {
  width: 158px;
  flex-shrink: 0;
  overflow: hidden;
}

.section-02 .tool-section .text-box .title {
  color: #fff;
  font-family: "Pretendard Bold";
  font-size: 40px;
  line-height: 130%;
  /* 52px */
  letter-spacing: -0.14px;
}

.section-02 .tool-section .btn-more {
  display: flex;
  padding: 8px 16px;
  gap: 8px;
  border-radius: 100px;
  background: #fff;
  width: 39px;
  height: 28px;
  margin-top: 20px;
}

.section-02 .tool-section .btn-more img {
  width: 7px;
  height: 12px;
}

@media screen and (max-width:767px) {
  .section-02{
    padding-top: 56px;
  }
  .section-02 .content-block.tool-section {
    padding: 0px 0px 56px;
    display: block;
  }

  .section-02 .tool-section .text-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 40px;
  }

  .section-02 .tool-section .text-box .title {
    font-size: 28px;
  }

  .section-02 .tool-section .btn-more {
    margin-top: 0px;
  }

  .section-02 .content-block.tool-section .text-area {
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0px;
    font-size: 14px;
    margin-top: 20px;
  }
}

@media screen and (max-width:767px) {
  .section-02 .content-block:first-child .content img {
    width: 60px;
    height: 90.578px;
    right: 0px;
    left: auto;
    bottom: -14px;
  }

  .section-02 .content-block:nth-child(2) .content img {
    width: 60px;
    height: 106.003px;
    left: -1px;
  }

  .section-02 .content-block:nth-child(3) .content img {
    right: -1px;
    bottom: -40px;
    width: 75px;
    height: 104.619px;
  }

  .section-02 .content-block:nth-child(4) .content img {
    width: 172.985px;
    height: 183.982px;
    left: -36px;
    bottom: -40px;
  }

  .section-02 .content-block .text-area .title {
    font-size: 28px;
  }

  .section-02 .content-block .text-area .tag {
    font-size: 14px;
    padding: 12px 16px;
  }

  .section-02 .content-block {
    display: grid;
    gap: 0px;
    padding-bottom: 64px;
  }

  .section-02 .content-block:nth-child(2) .text-area,
  .section-02 .content-block:nth-child(4) .text-area {
    order: 1;
  }

  .section-02 .content-block:nth-child(2) .content,
  .section-02 .content-block:nth-child(4) .content {
    order: 2;
  }

  .section-02 .content-block .text-area .tags .flex+.flex {
    margin-top: 0px;
  }

  .section-02 .content-block .text-area .sub-text {
    font-size: 20px;
    margin-bottom: 12px;
    text-align: center;
  }
  .section-02 .content-block .video-area .video {
    border: 7px solid #F9F9FB;
  }
  .section-02 .content-block .text-area {
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-top: 0px;
    margin-bottom: 40px;
  }

  .section-02 .content-block .text-area .tags .flex {
    display: inline-block;
  }
  .section-02 .content-block .text-area .tags .flex + .flex-en{
    margin-top: 8px;
    display: block;
  }
}

.section-03 {
  padding: 120px 0px;
}

.section-03 .logos {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.section-03 .gradient-text{
  width: 132px;
}
.section-03 .logo-rolling-list-01 {
  animation: rolling-01 25s linear infinite;
  margin-bottom: 24px;
}

@keyframes rolling-01 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0%);
  }
}

.section-03 .logo-rolling-list-02 {
  animation: rolling-02 25s linear infinite;
}

@keyframes rolling-02 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.section-03 .logos .logo-item {
  border-radius: 15px;
  border: 1.875px solid #FFF;
  background: #F9FAFB;
  display: inline-block;
  padding: 24px;
}

.section-03 .logos .logo-item>img {
  width: 72px;
  height: 72px;
  max-width: fit-content;
}

@media screen and (max-width:767px) {
  .section-03 {
    padding: 56px 0px;
  }

  .section-03 .logos {
    gap: 16px
  }
  .section-03 .gradient-text {
    width: 100px;
  }
  .section-03 .logo-rolling-list-01 {
    margin-bottom: 16px;
  }
}

.section-04 {
  background-color: #F9F9FB;
  padding: 120px 0px;
}
.section-04 .gradient-text {
  width: 206px;
}
.section-04 .swiper-slide {
  width: auto;
}

.section-04 .swiper-slide .book-item {
  position: relative;
  width: 240px;
  cursor: grab;
  border-radius: 12px;
  overflow: hidden;
  border: 0.706px solid #D1D6DB;
}

.section-04 .swiper-slide .book-item .btn-area {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  /* left:50%;*/
  /* transform:translateX(-50%);*/
  opacity: 0;
  background: linear-gradient(180deg, rgba(127, 127, 127, 0.70) 0%, rgba(0, 0, 0, 0.70) 79.33%);
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;

}

.section-04 .swiper-slide .book-item .btn-book {
  display: inline-block;
  padding: 16px 24px;
  border-radius: 100px;
  border: 1px solid #FFF;
  color: #FFF;
  font-size: 14px;
  line-height: 100%;
  /* 14px */
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.section-04 .swiper-slide .book-item:hover .btn-area {
  opacity: 1;
}

@media screen and (max-width:767px) {
  .section-04 {
    padding: 56px 0px;
  }

  /* .section-04 .swiper-slide {
      width: 168px;
  } */
  .section-04 .gradient-text {
    width: 160px;
  }
  .section-04 .swiper-slide .book-item {
    position: relative;
    width: 168px;
  }

  .section-04 .swiper-slide .book-item .btn-book {
    padding: 14px 20px;
    width: 116px;
    bottom: 28px;
    text-align: center;
  }

  .section-03 .logos .logo-item {
    border-radius: 10px;
    padding: 16px;
  }

  .section-03 .logos .logo-item>img {
    width: 48px;
    height: 48px;
  }
}

.section-05 {
  padding: 120px 0px;
}
.section-05 .gradient-text {
  width: 300px;
}
.section-05 .swiper-slide {
  width: auto;
  cursor: grab;
}


.section-05 .card {
  display: flex;
  width: 491px;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 20px;
  background: #F9FAFB;
  min-height: 354px;
}
.section-05 .card.en{
  min-height: 376px;
}
.section-05 .card-head .title {
  color: #1C1C1C;
  font-family: "Pretendard Bold";
  font-size: 20px;
  line-height: 140%;
}

.section-05 .card-head .tags {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-top: 12px;
}

.section-05 .card-head .tags .tag {
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  border: 0.5px solid rgba(78, 50, 246, 0.08);
  background: rgba(78, 50, 246, 0.08);
  color: #4E32F6;
  font-size: 12px;
  line-height: 100%;
  /* 12px */
}

.section-05 .card-body > p {
  color: #3E3E3E;
  font-size: 16px;
  line-height: 150%;
  /* 24px */
}

.section-05 .card-foot .name {
  color: #A8A8A8;
  font-size: 16px;
  line-height: 100%;
  /* 16px */
}
.section-05 .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.section-05 .swiper-buttons{
  position: absolute;
  width:560px;
  top: 55%;
  left: 49%;
  transform: translateX(-50%);
  z-index: 2;
}
.section-05 .swiper-button-prev {
  /* top: 50%; */
  /* left: 231px; */
  height: 54px;
  width: 54px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
}

.section-05 .swiper-button-next {
  /* top: 50%;
  right: 231px; */
  height: 54px;
  width: 54px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  right: -18px;
}

.section-05 .swiper-button-next.swiper-button-disabled,
.section-05 .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  background-color: #fff;
}

.section-05 .swiper-button-next.swiper-button-disabled,
.section-05 .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
}

.section-05 .swiper-button-next:after {
  content: '';
  background: url("../images/ic-swiper-arrow-black.svg.svg") no-repeat center center / contain;
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
}

.section-05 .swiper-button-prev:after {
  content: '';
  background: url("../images/ic-swiper-arrow-black.svg.svg") no-repeat center center / contain;
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}
@media screen and (max-width:767px) {
  .section-05 {
    padding: 56px 0px;
  }
  .section-05 .gradient-text {
    width: 232px;
  }
  .section-05 .card {
    min-height: 248px;
    width: 284px;
    gap: 16px;
  }
  .section-05 .card-head .tags {
    display: block;
  }

  .section-05 .card-head .tags .tag {
    margin-right: 8px;
  }

  .section-05 .card-head .tags .tag:nth-child(3) {
    margin-top: 8px;
  }

  /* .section-05 .swiper-slide {
      width: 284px;
  } */

  .section-05 .card-head .title {
    font-size: 18px;
  }

  .section-05 .card-body {
    display: none;
  }

  .section-05 .card-foot .name {
    display: block;
    font-size: 14px;
    margin-top: 8px;
  }
  .section-05 .swiper-button-prev,
  .section-05 .swiper-button-next {
    display: none;
  }
  .section-05 .card.en {
    min-height: 323px;
  }
  .section-05 .card.en .card-head .title{
    height: 125px;
  }
  .section-05 .card.en .card-head .tags{
    margin-top: 16px;
  }
  .section-05 .card.en .card-head .tags .tag + .tag{
    margin-top: 8px;
  }

}

.section-banner {
  background: #4E32F6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-banner .container-inner {
  display: flex;
  padding: 64px 40px;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
  width: 100%;
}

.section-banner .section-header {
  width: 100%;
  margin-bottom: 0px;
}

.section-banner .section-header .section-title {
  color: #fff;
  font-family: "Pretendard Light";
  font-size: 32px;
  line-height: 140%;
  /* 44.8px */
  text-align: left;
}

.section-banner .section-header .text {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.section-banner .section-header .logo {
  display: inline-block;
  width: 151px;
  height: 26px;
  flex-shrink: 0;
}

.section-banner .btns {
  margin-top: 32px;
}
.section-banner .btns .row{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
/* .section-banner .btns .row:last-child {
    margin-top: 0px;
} */
.section-banner .btn-app {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.20);
}

.section-banner .btn-app .logo {
  width: 20px;
  height: 20px;
}

.section-banner .btn-app .text {
  color: #F9F9FB;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: -0.35px;
  /* 19.6px */
  white-space: pre;
}

.section-banner .content {
  width: 362px;
  flex-shrink: 0;
}

@media screen and (max-width:884px) {
  .section-banner .container-inner {
    display: grid;
    padding: 40px 20px;
    align-items: center;
    gap: 20px;
    justify-content: center;
    width: 100%;
  }

  .section-banner .btns {
    justify-content: center;
    gap: 4px;
  }
  .section-banner .btns .row{
    justify-content: center;
    flex-wrap: wrap;
  }

  .section-banner .btn-app {
    padding: 0px 20px;
    height: 44px;
  }

  .section-banner .section-header .section-title {
    font-size: 20px;
    text-align: center;
    width: 100%;
  }

  .section-banner .section-header .text {
    display: block;
    gap: 0px;
  }

  .section-banner .section-header .logo {
    width: 96px;
    height: 16.53px;
  }

  .section-banner .btn-app .logo {
    width: 20px;
    height: 20px;
  }

  .section-banner .content {
    width: 220px;
    margin: 0 auto;
  }
}

.footer-section {
  background: #1C1C1C;
  padding: 80px 0 80px;
  margin: 0 auto;
  /* padding: 80px calc(constant(safe-area-inset-right)+0px) calc(constant(safe-area-inset-bottom)+80px) calc(constant(safe-area-inset-left)+0px);
  padding: 80px calc(env(safe-area-inset-right)+0px) calc(env(safe-area-inset-bottom)+80px) calc(env(safe-area-inset-left)+0px);
  margin-bottom: calc(constant(safe-area-inset-bottom)+0px);
  margin-bottom: calc(env(safe-area-inset-bottom)+0px); */
}

.footer-section .logo {
  display: inline-block;
  width: 166px;
  height: 26.998px;
}

.footer-section .row {
  display: flex;
  justify-content: space-between;
}

.footer-section .link-text-group {
  display: flex;
  flex-wrap: wrap;
  margin: 36px 0px;
}

.footer-section .link-text-group .link-text {
  color: #fff;
  /* font-family: "Pretendard SemiBold"; */
  font-size: 14px;
  line-height: 140%;
  /* 19.6px */
  position: relative;
  display: inline-block;
  padding-right: 12px;
  margin-right: 12px;
  white-space: nowrap;
}
.footer-section .link-text-group .link-text > strong{
  font-family: "Pretendard Bold";
}
.footer-section .link-text-group>a::after {
  content: '';
  display: inline-block;
  position: absolute;
  right: 0;
  top: 4px;
  background-color: #999;
  height: 10px;
  width: 1px;
}

.footer-section .link-text-group>a:last-child::after {
  display: none;
}

.footer-section .copyright-text {
  color: #C2C2C2;
  font-family: "Pretendard Light";
  font-size: 14px;
  line-height: 140%;
  /* 19.6px */
}

.footer-section .copyright-text>li {
  position: relative;
  display: inline-block;
  padding-right: 8px;
  margin-right: 4px;
}

.footer-section .copyright-text>li a {
  color: #C2C2C2;
  margin-left: 4px;
}

.footer-section .copyright-text>li:first-child {
  padding-left: 0;
}

.footer-section .copyright-text>li::after {
  content: '';
  display: inline-block;
  position: absolute;
  right: 0;
  top: 4px;
  background-color: #C2C2C2;
  height: 10px;
  width: 1px;
}

.footer-section .copyright-text>li:last-child::after {
  display: none;
}

.footer-section .copyright {
  margin-top: 20px;
  font-size: 12px;
}
.only-pc {
  display: inline-block !important;
}

.only-mobile {
  display: none !important;
}
@media screen and (max-width:767px) {

  .footer-section {
    background: #1C1C1C;
    padding: 40px 24px 40px;
    margin: 0 auto;
    /* padding: 40px calc(constant(safe-area-inset-right)+24px) calc(constant(safe-area-inset-bottom)+40px) calc(constant(safe-area-inset-left)+24px);
    padding: 40px calc(env(safe-area-inset-right)+24px) calc(env(safe-area-inset-bottom)+40px) calc(env(safe-area-inset-left)+24px);
    margin-bottom: calc(constant(safe-area-inset-bottom)+0px);
    margin-bottom: calc(env(safe-area-inset-bottom)+0px); */
  }
  .footer-section .link-text-group {
    margin: 24px 0px;
  }
  .footer-section .link-text-group .link-text {
    font-size: 12px;
  }

  .footer-section .copyright-text>li {
    padding-right: 6px;
    margin-right: 3px;
  }

  .footer-section .copyright-text>li::after {
    height: 6px;
    top: 5px
  }

  .footer-section .copyright-text>li a {
    margin-left: 0px;
  }

  .footer-section .container-inner {
    padding: 0px 0px;
  }

  .footer-section .row {
    display: block;
  }

  .footer-section .row .logo {
    margin-top: 0px;
    margin-bottom: 24px;
    width: 103.999px;
    height: 16.999px;
  }

  .footer-section .copyright-text {
    font-size: 10px;
  }

  .only-pc {
    display: none !important;
  }

  .only-mobile {
    display: inline-block !important;
  }

  .footer-section .copyright {
    margin-top: 32px;
  }
}

.know-how-wrap {
  background-color: #14121E;
}

.know-how-visual-section {
  position: relative;
  padding-bottom: 80px;
}
.know-how-visual-section .container-inner{
  padding-left:0px ;
  padding-right: 0px;
}
.know-how-visual-section .container-inner > header{
  position: relative;
  z-index: 1;
}
.know-how-visual-section img{
  margin-top: -120px;
}
.know-how-visual-section .title {
  margin-top: 224px;
  color: #FFF;
  text-align: center;
  font-family: "Pretendard Bold";
  font-size: 80px;
  line-height: 110%;
  /* 80px */
}
.know-how-visual-section .text {
  color: #E0E0E0;
  text-align: center;
  font-size: 28px;
  line-height: 100%;
  /* 28px */
  letter-spacing: -0.56px;
  margin-top: 28px;
}

.know-how-visual-section .box {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  display: inline-flex;
  padding: 40px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  max-width: 852px;
  width: 100%;
}

.know-how-visual-section .box .box-title {
  color:#FFF;
  text-align: center;
  font-family: "Hakgyoansim Chilpanjiugae L";
  font-size: 40px;
  font-style: normal;
  font-weight: 300;
  line-height: 100%;
  margin-bottom: 20px;
  /* 40px */
}
.know-how-visual-section .box .box-text {
  color:#E2E2E8;
  text-align: center;
  font-size: 20px;
  line-height: 150%;
  /* 30px */
}
@media screen and (max-width:767px) {
  .know-how-visual-section{
    padding-bottom: 120px;
  }
  .know-how-visual-section .container-inner{
    padding: 0px;
  }
  .know-how-visual-section header {
    margin-bottom: -20px;
  }

  .know-how-visual-section img {
    margin-top: 0px;
  }
  .know-how-visual-section .title {
    margin-top: 148px;
    font-size: 48px;
  }
  .know-how-visual-section .title > .gradient-text{
    margin-top: 8px;
    display: block;
  }
  .know-how-visual-section .text {
    font-size: 16px;
    margin-top: 24px;
  }
  .know-how-visual-section .box {
    position: absolute;
    bottom: -80px;
    left: 50%;
    padding: 24px;
    gap: 8px;
    max-width: 322px;
  }
  .know-how-visual-section .box .box-title {
    font-size: 24px;
    margin-bottom: 8px;
  }

  .know-how-visual-section .box .box-text {
    font-size: 14px;
  }
}


.sub-section-title {
  color: #FFF;
  text-align: center;
  font-family: "Pretendard Bold";
  font-size: 40px;
  line-height: 130%;
  /* 52px */
  letter-spacing: -0.14px;
}

.sub-section-header {
  margin-bottom: 56px;
}

.sub-section-01 {
  padding-top: 144px;
  padding-bottom: 120px;
}

.sub-section-01 .sub-section-banner {
  padding: 56px 80px 0;
  height: 637px;
}

.sub-section-01 .sub-section-banner-01 {
  background: #F1E6FF;
}

.sub-section-01 .sub-section-banner-02 {
  background: #E7EDFF;
}

.sub-section-01 .sub-section-banner-03 {
  background: #FFEBDF;
}

.sub-section-01 .sub-section-banner-04 {
  background: #FFF6DE;
}
.sub-section-01 .sub-section-banner-05 {
  background: #F3FFDF;
  justify-content: space-between;
}
.sub-section-01 .sub-section-banner-06 {
  background: #E7FDFF;
  justify-content: space-between;
}
.sub-section-01 .sub-section-banner-07 {
  background: #FFEBF0;
  justify-content: space-between;
}
.sub-section-01 .sub-section-banner-08{
  background: #FFF0C7;
  justify-content: space-between;
}
.sub-section-01 .swiper {
  overflow: visible;
}

.sub-section-01 .swiper-slide {
  /* width: 800px; */
  cursor: grab;
  flex-shrink: 0;
  width: auto;
}

.sub-section-01 .sub-section-header::after {
  content: '';
  position: absolute;
  top: -144px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 64px;
  background: #E0E0E0;
}

.sub-section-01 .swiper-control-group{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 32px;
}
.sub-section-01 .swiper-control-box{
  display: flex;
  align-items: center;
  gap: 16px;
}
.sub-section-01 .swiper-control-area .btn-pause {
  /* position: absolute;
  top: -12px;
  right: -17px;
  z-index: 10; */
  display: inline-block;
  background: url("../images/ic-pause-24.svg") no-repeat center center/ contain;
  width: 24px;
  height: 24px;
}

.sub-section-01 .swiper-control-area .btn-pause.on {
  /* position: absolute;
  top: -12px;
  right: -17px;
  z-index: 10; */
  display: inline-block;
  background: url("../images/ic-player-24.svg") no-repeat center center/ contain;
  width: 24px;
  height: 24px;
}

.sub-section-01 .indi-progress {
  position: relative;
  /* position: absolute;
  left: 80px;
  left: calc(constant(safe-area-inset-left) + 80px);
  left: calc(env(safe-area-inset-left) + 80px); */
  z-index: 10;
  width: 50px;
  height: 4px;
}

.sub-section-01 .indi-progress .autoplay-progress {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  overflow: hidden;
}
.sub-section-01 .swiper-pagination-bullets.swiper-pagination-horizontal{
  position: relative;
  width: auto;
  bottom: 0;
  margin-top:0px ;
}
.sub-section-01 .swiper-pagination-bullet{
  width: 6px;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.75);
  margin-left: 16px;
  margin-right: 16px;
}
.sub-section-01 .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background-color: rgba(255, 255, 255, 1);
}
.sub-section-01 .indi-progress .autoplay-progress svg {
  --progress: 0;
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  stroke-width: 16px;
  stroke: #fff;
  fill: none;
  stroke-dashoffset: calc(100 * (1 - var(--progress)));
  stroke-dasharray: 100;
  border-radius: 10px;
}
.sub-section-banner {
  display: flex;
  width: 800px;
  flex-direction: column;
  gap: 40px;
  flex-shrink: 0;
  border-radius: 20px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  overflow: hidden;
}

.banner-header .title {
  color: #1D1D1F;
  font-family: "Pretendard Bold";
  font-size: 32px;
  line-height: 130%;
  /* 41.6px */
  letter-spacing: -0.112px;
}

.banner-header .text {
  color: #6B6B6B;
  font-size: 20px;
  line-height: 150%;
  /* 30px */
  letter-spacing: -0.07px;
  margin-top: 16px;
}

.banner-header .guide-text {
  color: rgba(0, 0, 0, 0.30);
  font-size: 16px;
  line-height: 130%;
  /* 20.8px */
  margin-top: 12px;
  text-align: left;
}

.sub-section-banner .banner-body .video-area .video {
  position: relative;
  max-width: 960px;
}

.sub-section-banner .banner-body .video-area .video::after {
  content: '';
  display: block;
  padding-bottom: 60.9375%;
  background-color: #fff;
}

.sub-section-banner .banner-body .video-area .video>video {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  z-index: 1;
}

.sub-section-banner .title-area {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sub-section-banner .img-badge {
  height: 32px;
  width: 166px;
}
@media screen and (max-width:767px) {
  .sub-section-header {
    margin-bottom: 40px;
  }

  .sub-section-title {
    font-size: 28px;
  }

  .sub-section-01 {
    padding-top: 72px;
    padding-bottom: 56px;
  }

  .sub-section-01 .sub-section-header::after {
    content: '';
    position: absolute;
    top: -72px;
    height: 32px;
  }

  /* .sub-section-01 .swiper-slide {
      width: 342px;
  } */

  .sub-section-01 .sub-section-banner {
    width: 342px;
    height: 351px;
    padding: 40px 40px 0 40px;
  }

  .banner-header .title {
    font-size: 20px;
  }

  .banner-header .text {
    font-size: 14px;
    font-style: normal;
  }

  .banner-header .guide-text {
    font-size: 14px;
  }
  .sub-section-banner .img-badge {
    height: 24px;
    width: 24px;
  }
  .sub-section-banner .title-area{
    justify-content: space-between;
  }
}
@media screen and (max-width:390px) {
  .sub-section-01 .swiper-slide,
  .sub-section-01 .sub-section-banner {
    width: 260px;
  }
  .sub-section-01 .swiper-slide br,
  .sub-section-01 .swiper-slide .only-mobile,
  .sub-section-01 .swiper-slide .only-pc {
    display: none !important;
  }
  /* 배너 이미지는 모바일 버전 표시 */
  .sub-section-01 .swiper-slide .video img.only-mobile {
    display: block !important;
  }
  /* 뱃지 아이콘도 모바일 버전 표시 */
  .sub-section-01 .swiper-slide .img-badge.only-mobile {
    display: inline-block !important;
  }
  /* 텍스트는 표시 (only-mobile 클래스가 있는 텍스트) */
  .sub-section-01 .swiper-slide .title.only-mobile {
    display: block !important;
  }
  .sub-section-01 .swiper-slide .text.only-mobile {
    display: block !important;
  }
  .sub-section-01 .swiper-slide .guide-text .only-mobile {
    display: inline !important;
  }
}
.sub-section-02 {
  padding: 120px 0;
  background: #272530;
  position: relative;
}

.sub-section-02 .sub-section-banner {
  width: 580px;
  gap: 0;
}

.sub-section-02 .sub-section-banner .banner-header {
  padding: 56px 56px 0;
}

.sub-section-02 .swiper {
  overflow: visible;
}

.sub-section-02 .swiper-slide {
  /* width: 580px; */
  width: auto;
  opacity: 0.5;
  border-radius: 20px;
  opacity: 0.5;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
  filter: blur(0.5px);
  cursor: grab;
}

.sub-section-02 .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.sub-section-02 .swiper-buttons{
  width: 641px;
  position: absolute;
  top: 50%;
  left: 289px;
  transform: translateX(-50%);
  z-index: 555;

}
.sub-section-02 .swiper-button-prev {
  left: 0;
  height: 54px;
  width: 54px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
}

.sub-section-02 .swiper-button-next {
  right: 0;
  height: 54px;
  width: 54px;
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.10);
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
}

.sub-section-02 .swiper-button-next.swiper-button-disabled,
.sub-section-02 .swiper-button-prev.swiper-button-disabled {
  opacity: 1;
  background-color: #fff;
}

.sub-section-02 .swiper-button-next.swiper-button-disabled,
.sub-section-02 .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}

.sub-section-02 .swiper-button-next:after {
  content: '';
  background: url("../images/ic-swiper-arrow-black.svg.svg") no-repeat center center / contain;
  width: 20px;
  height: 20px;
  transform: rotate(0deg);
}

.sub-section-02 .swiper-button-prev:after {
  content: '';
  background: url("../images/ic-swiper-arrow-black.svg.svg") no-repeat center center / contain;
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}

@media screen and (max-width:767px) {
  .sub-section-02 {
    padding: 56px 0;
  }
  .sub-section-02 .swiper-button-prev,
  .sub-section-02 .swiper-button-next{
    display: none;
  }
  .sub-section-02 .sub-section-banner {
    width: 342px;
    gap: 0;
  }

  .sub-section-02 .sub-section-banner .banner-header {
    padding: 40px 40px 0;
  }
  /* .sub-section-02 .swiper-slide {
      width: 342px;
  } */
}

.sub-section-03 {
  padding: 120px 0;
}

.tab-panel {
  display: none;
  max-width: 728px;
  margin: 0 auto;
}

.tab-panel.active {
  display: block;
}

.tab-nav {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 0;
}

.line-tab-item.active {
  font-weight: bold;
  border-bottom: 2px solid #fff;
}

.line-tab-item {
  color: #C2C2C2;
  text-align: center;
  font-size: 20px;
  line-height: 100%;
  /* 20px */
  height: 40px;
  width: 100%;
  border-bottom: 1px solid #A8A8A8;
  cursor: pointer;
}

.line-tab-item.active {
  color: #FFF;
  text-align: center;
  font-family: "Pretendard Bold";
  font-size: 20px;
  line-height: 100%;
  /* 20px */
}

.card-swiper {
  overflow: visible;
  padding: 64px 0px;
}

.card-swiper .swiper-slide {
  width: 240px;
  cursor: grab;
}

.sub-section-card {
  border-radius: 10px;
  overflow: hidden;
  width: 240px;
  stroke-width: 1px;
  stroke: #A8A8A8;
  opacity: 0.3;
}

.sub-section-03 .swiper-slide.swiper-slide-active .sub-section-card {
  position: relative;
  opacity: 1;
}
.card-swiper .swiper-slide.swiper-slide-active::before{
  content: '';
  display: block;
  background: url(../images/img-ipad.png) no-repeat center center / cover;
  width: 328px;
  height: 410px;
  position: absolute;
  left: -42px;
  top: -44px;
  right: 0;
  bottom: 0;
}


@media screen and (max-width:767px) {
  .sub-section-03 {
    padding: 56px 0;
  }

  .sub-section-03 .tab-nav {
    padding: 0px 0 40px;
    max-width: 280px;
  }

  .sub-section-02 .sub-section-banner .banner-header {
    padding: 40px 40px 0;
  }

  .sub-section-02 .swiper-slide {
    width: 342px;
  }
  .line-tab-item{
    font-size: 16px;

  }
  .card-swiper{
    padding: 32px 0;
  }
  .sub-section-card{
    width: 195px;
  }
  .card-swiper .swiper-slide.swiper-slide-active::before {
    content: '';
    display: block;
    background: url(../images/img-ipad.png) no-repeat center center / cover;
    width: 268px;
    height: 325px;
    position: absolute;
    left: -35px;
    top: -31px;
    bottom: 0;
  }
  .card-swiper .swiper-slide {
    width: 195px;
    cursor: grab;
  }
}

.terms-contents-wrap{
  max-width: 1240px;
  padding: 120px 20px 160px;
  margin: 0 auto;
}

.terms-header{
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #E0E0E0;;
}

.terms-header > .terms-title{
  color: #1C1C1C;
  font-family: "Pretendard Bold";
  font-size: 32px;
  font-style: normal;
  line-height: 100%;
  /* 32px */
}
.terms-seaction{
  margin-bottom: 80px;
}
.terms-seaction>.title {
  color: #1C1C1C;
  font-size: 18px;
  font-family: "Pretendard Bold";
  line-height: 100%;
  margin-bottom: 40px;

}
.terms-block{
  margin-bottom: 80px;
}
.terms-block:last-child{
  margin-bottom: 0px;
}

.terms-block > .sub-title{
  color: #1C1C1C;
  font-size: 16px;
  font-family: "Pretendard Bold";
  margin-bottom: 24px;
}
.terms-block > .text{
  color: #1C1C1C;
  font-size: 16px;
  line-height: 180%;
}

.terms-block .list-01{
  margin-bottom: 40px;
}
.terms-block .list-01 > li{
  margin-bottom: 4px;
  color: #1C1C1C;
  font-size: 16px;
  line-height: 180%;
}
.terms-block .list-02{
  margin-bottom: 24px;
}
.terms-block .list-02>li {
  margin-bottom: 4px;
  color: #1C1C1C;
  font-size: 16px;
  line-height: 180%;
}

.terms-block .list-dot>li {
  position: relative;
  margin-bottom: 4px;
  color: #1C1C1C;
  font-size: 16px;
  line-height: 180%;
  padding-left: 20px;
}

.terms-block .list-dot>li::before {
  content: '';
  position: absolute;
  left: 6px;
  top:12px;
  display: inline-block;
  height: 4px;
  width: 4px;
  border-radius: 4px;
  background-color: #1C1C1C;;
}
.terms-block .list-dot.mt{
  display: block;
  margin-top: 32px;
  margin-bottom: 32px;
}
.terms-block .mt{
  display: block;
  margin-top: 32px;
  margin-bottom: 32px;
}
.terms-block .ml {
  margin-left: 16px;
}
.terms-block .text + .text{
  margin-top: 24px;
}
.terms-block .text + .list-01 {
  margin-top: 24px;
}
.terms-block .text + .list-dot {
  margin-top: 24px;
}
.terms-block .list-dot + .text {
  margin-top: 24px;
}
.terms-block > table{
  width: 100%;
  margin-top: 24px;
  margin-bottom: 24px;
}
.terms-block > table > thead > tr > th {
  font-size: 16px;
  font-family: "Pretendard SemiBold";
  padding: 16px 24px;
  border: 1px solid #E0E0E0;
  line-height: 180%;
}
.terms-block > table > tbody{
  width: 100%;
}
.terms-block > table > tbody > tr > td {
  font-size: 16px;
  padding: 24px 24px;
  border: 1px solid #E0E0E0;
  line-height: 180%;
}
.terms-block > table .width-2{
  width: 50%;
}
.terms-block > table .width-3 {
  width: 33.333%;
}
.terms-btn-area{
  margin-top: 80px;
}

.terms-btn-area .btn-terms{
  color: #FFF;
  font-family: "Pretendard SemiBold";
  font-size: 16px;
  line-height: 180%;
  padding: 16px 32px;
  background-color: #1C1C1C;
  display: inline-block;
}

@media screen and (max-width:767px) {
  .terms-contents-wrap {
    padding: 56px 20px 160px;
  }
  .terms-block {
    margin-bottom: 48px;
  }
  .terms-header{
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
  .terms-header>.terms-title{
    font-size: 24px;
  }
  .terms-block>table>tbody>tr>td {
    padding: 16px 16px;
  }
  .terms-btn-area {
    margin-top: 56px;
  }
}

.sub-section-01 .swiper-slide .only-390,
.sub-section-02 .swiper-slide .only-390 {
  display: none !important;
}

@media screen and (max-width:390px) {

  .sub-section-02 .sub-section-banner,
  .sub-section-02 .swiper-slide {
    width: 260px;
  }
  .sub-section-02 .swiper-slide br,
  .sub-section-02 .swiper-slide .only-mobile,
  .sub-section-02 .swiper-slide .only-pc{
    display: none !important;
  }
  /* 배너 이미지는 모바일 버전 표시 */
  .sub-section-02 .swiper-slide .video img.only-mobile {
    display: block !important;
  }
  /* 텍스트는 표시 (only-mobile 클래스가 있는 텍스트) */
  .sub-section-02 .swiper-slide .title.only-mobile {
    display: block !important;
  }
  .sub-section-02 .swiper-slide .text.only-mobile {
    display: block !important;
  }
  .sub-section-02 .swiper-slide .guide-text .only-mobile {
    display: inline !important;
  }
  .sub-section-01 .swiper-slide .only-390,
  .sub-section-02 .swiper-slide .only-390{
    display: inline-block !important;
  }
}


.main-wrap-en .section-01 .container-inner{
  padding-left: 20px;
  padding-right: 20px;
}
.main-wrap-en .section-02 .content-block .text-area .title{
  font-size: 32px;
}
.know-how-wrap-en{
  background-color: #14121E;
}
.know-how-wrap-en .know-how-visual-section .title{
  font-size: 64px;
}
.know-how-wrap-en .sub-section-02 .swiper-buttons {
  width: 720px;
}
@media screen and (max-width:767px) {
  .main-wrap{
    padding-top: 63px;
  }
  .know-how-wrap-en .know-how-visual-section .title {
    font-size: 42px;
  }
  .main-wrap-en .footer-section,
  .know-how-wrap-en .footer-section {
    padding-left: 20px;
    padding-right: 20px;
  }
  .main-wrap-en .section-02 .content-block .text-area .title {
    font-size: 28px;
  }
}

.dropdown-terms-area{
  position: relative;
}
.dropdown-terms-area .btn-dropdown-terms{
  color: #FFF;
  font-family: "Pretendard SemiBold";
  font-size: 16px;
  line-height: 180%;
  padding: 16px 32px;
  background-color: #1C1C1C;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.dropdown-terms-area .btn-dropdown-terms .arrow{
  display: inline-block;
  background: url("../images/ic-arrow-white.svg") no-repeat center center / contain;
  width: 20px;
  height: 20px;
}

.dropdown-terms-area.is-open .arrow {
  transform: rotate(-180deg);
}
.dropdown-terms-area .layer-dropdown-terms{
  position: absolute;
  display: none;
  left: 0;
  top: 65px;
  background-color: #fff;
  width: 266px;
  padding: 24px 24px 8px;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
  max-height: 140px;
  overflow: auto;
}

.dropdown-terms-area .layer-dropdown-terms > a{
  display: block;
  color:#191F28;

  /* Text Button 2 | 14px */
  font-family: Pretendard;
  font-size: 14px;
  line-height: 20px;
  padding-bottom: 16px;
  /* 142.857% */
}