/* ******************************************************************
* look-main
****************************************************************** */
.look-main {
  height: 100%;
  background: #F9D3DD;
}

.look-main__ttl {
  display: none;
}

.look-list {
  width: 40rem;
  max-width: 100%;
  margin: 0 auto;
}

.look-list > *:last-child {
  margin-bottom: 0;
}

.look-list__item {
  --common-margin: 1.6rem;
  --border-width: .4rem;
  display: flex;
  gap: .8rem;
  margin-bottom: var(--common-margin);
  padding: 1.5rem 1.8rem;
  border: var(--border-width) solid var(--point-color);
  border-radius: 3.2rem;
  background: #fff;
  box-shadow: 0 .6rem 0 #00000014;
}

.look-list__item--play {
  --point-color: #3292DE;
}

.look-list__item--reading {
  --point-color: #F54D4B;
}

.look-list__item--writing {
  --point-color: #43AE6D;
}

.look-list__item--study-center {
  --point-color: #8244A0;
  --icon-size: 4.2rem;
  position: relative;
  margin-top: calc(var(--common-margin) * 2 + var(--icon-size));
}

.look-list__item--study-center::before {
  position: absolute;
  left: 50%;
  top: calc((var(--common-margin) + var(--border-width) + var(--icon-size)) * -1);
  width: var(--icon-size);
  height: var(--icon-size);
  background: url(../image/common/icon/icon__plus-round.svg) no-repeat center / contain;
  transform: translateX(-50%);
  content: '';
}

.look-list__head {
  flex: 1 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.look-main-item__sub-ttl {
  display: inline-block;
  margin-bottom: .8rem;
  padding: .4rem 1.1rem;
  border-radius: 10.5rem;
  font-family: 'Cafe24Syongsyong', sans-serif;
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: -0.07em;
  background: #F0F0F0;
}

.look-main-item__ttl {
  margin-bottom: .4rem;
  font-weight: 400;
  font-size: 2.4rem;
}

.look-main-item__ttl strong {
  display: block;
  font-family: 'Jalnan', sans-serif;
  font-size: 4rem;
  color: var(--point-color);
}

.look-main-item__guide {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2rem;
  font-size: 1rem;
  color: #9E9E9E;
  text-align: center;
}

.look-main-item__guide .icon-star {
  --box-size: .4rem;
  width: var(--box-size);
  height: var(--box-size);
}

.look-main-item__guide svg path {
  fill: var(--point-color);
}

.look-list__visual {
  display: flex;
  align-items: center;
  min-height: 0;
}

.look-list__visual img {
  width: 100%;
}

.look-main__btn {
  width: 24rem;
  height: 6.8rem;
  margin: 3.5rem auto 0;
  border-radius: 4rem;
  font-size: 2.6rem;
}

@media (min-width: 1180px) {
  .look-main {
    background: #F9D3DD url(../image/sub/look/look__bg--deco.svg) no-repeat center / 188rem;
  }

  .look-main__ttl {
    display: block;
    margin-bottom: 5.4rem;
  }

  .look-main .content__contain {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: initial;
    max-width: initial;
  }

  .look-list {
    --common-gap: 2.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    gap: var(--common-gap);
  }

  .look-list__item {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 32rem;
    height: 52rem;
    margin-bottom: 0;
    padding: 3.6rem 1.6rem;
    border-radius: 4.8rem;
    box-shadow: .8rem .8rem 0 #00000014;
  }

  .look-list > *:last-child {
    margin-right: 0;
  }

  .look-list__item--study-center {
    --icon-size: 5.8rem;
    margin-top: 0;
    margin-left: calc(var(--common-gap) + var(--icon-size));
  }
  
  .look-list__item--study-center::before {
    top: 50%;
    left: calc((var(--common-gap) + var(--border-width) + var(--icon-size)) * -1);
    transform: translate(0, -50%);
  }

  .look-list__head {
    flex: 1 0 42%;
    justify-content: initial
  }

  .look-main-item__sub-ttl {
    margin-bottom: 1rem;
    padding: .8rem 1.8rem;
    border-radius: 10.5rem;
    font-size: 2.4rem;
  }
  
  .look-main-item__ttl {
    margin-bottom: 0;
    font-size: 3rem;
  }
  
  .look-main-item__ttl strong {
    font-size: 4.8rem;
  }
  
  .look-main-item__guide {
    flex: 1;
    font-size: 1.6rem;
  }
  
  .look-list__visual img {
    width: initial;
    height: 100%;
  }

  .look-main__btn {
    --box-shadow-y: .8rem;
    min-width: 34rem;
    height: 8.8rem;
    margin-top: 6.4rem;
    font-size: 3.6rem;
    border-radius: 8rem;
  }
}
/* ******************************************************************
* //look-main
****************************************************************** */


/* ******************************************************************
* look-content
****************************************************************** */
.look-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

[data-content-color="blue"] {
  --point-bg-color: #3292DE;
  --sub-bg-color: #E8F3FC;
}

[data-content-color="red"] {
  --point-bg-color: #FF4F4F;
  --sub-bg-color: #FEF1F1;
}

[data-content-color="green"] {
  --point-bg-color: #43AE6D;
  --sub-bg-color: #F2FBF6;
}

[data-content-color="purple"] {
  --point-bg-color: #714FAD;
  --sub-bg-color: #F6F1FF;
}

.look-content__header {
  text-align: center;
  background: var(--point-bg-color) no-repeat center 6.6rem / 150rem;
}

.look-content__sub-ttl {
  padding: 3rem 0 1.2rem;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0;
  color: #fff;
}

.look-content__sub-ttl strong {
  font-weight: 700;
  font-size: 1.6rem;
}

.look-content__ttl {
  font-family: 'Jalnan', sans-serif;
  font-size: 3rem;
  color: #fff;
  letter-spacing: 0.08em;
}

.look-content__ttl strong {
  font-size: 4rem;
  text-shadow: 0 .3rem .6rem rgba(0, 0, 0, 0.16);
}

.look-content__guide {
  display: inline-block;
  margin: 1.7rem 0 1.6rem;
  padding: .4rem 2rem;
  border: .1rem solid rgba(255, 255, 255, 24%);
  border-radius: 1.7rem;
  font-weight: 400;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0;
}

.look-content__address {
  margin: 1.3rem 0 2.1rem;
  font-weight: 400;
  font-size: 2rem;
  color: #fff;
}

.look-content__body {
  --pattern-height: 3.2rem;
  flex: 1;
  position: relative;
  padding-top: 16rem;
  margin-top: -12.8rem;
  padding-bottom: 7.6rem;
}

.look-content__body {
  background: var(--sub-bg-color);
}

.look-content__body::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--pattern-height);
  background: var(--point-bg-color) repeat-x left top / contain;
  content: '';
}

.look-content__body::after {
  position: absolute;
  left: 0;
  top: calc(var(--pattern-height) - .1rem);
  width: 100%;
  height: .1rem;
  background: var(--sub-bg-color);
  content: '';
}

[data-content-color="blue"] .look-content__body::before {
  background-image: url(../image/common/pattern/pattern__wave2--blue.svg);
}

[data-content-color="red"] .look-content__body::before {
  background-image: url(../image/common/pattern/pattern__wave2--red.svg);
}

[data-content-color="green"] .look-content__body::before {
  background-image: url(../image/common/pattern/pattern__wave2--green.svg);
}

[data-content-color="purple"] .look-content__body::before {
  background-image: url(../image/common/pattern/pattern__wave2--purple.svg);
}

.look-content__visual {
  z-index: 1;
  position: relative;
  margin: 0 2.5rem;
}

.look-content__visual img {
  width: 31rem;
  margin: 0 auto;
}

.look-content__contain {
  width: 40rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.look-content__video {
  margin-bottom: 4rem;
}

.look-content__btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.start-learning-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 34rem;
  max-width: 100%;
  height: 7rem;
  border-radius: 1rem;
  font-size: 2.1rem;
}

@media (min-width: 1180px) {
  [data-content-color="blue"] .look-content__header {
    background-image: url(../image/sub/look/look-content__header--deco--blue.svg);
  }
  
  [data-content-color="red"] .look-content__header {
    background-image: url(../image/sub/look/look-content__header--deco--red.svg);
  }
  
  [data-content-color="green"] .look-content__header {
    background-image: url(../image/sub/look/look-content__header--deco--green.svg);
  }
  
  [data-content-color="purple"] .look-content__header {
    background-image: url(../image/sub/look/look-content__header--deco--purple.svg);
  }

  .look-content__sub-ttl {
    padding: 8.5rem 0 1.6rem;
    font-size: 2.4rem;
  }
  
  .look-content__sub-ttl strong {
    font-size: 3.2rem;
  }

  .look-content__ttl br {
    display: none;
  }
  
  .look-content__ttl strong {
    font-size: 8rem;
    text-shadow: 0 .6rem 1.2rem rgba(0, 0, 0, 0.16);
  }
  
  .look-content__guide {
    margin: 4.4rem 0 4.2rem;
    padding: .8rem 5rem;
    border: .1rem solid #fff;
    font-size: 1.6rem;
  }

  .look-content__address {
    font-size: 4.8rem;
  }
  
  .look-content__body {
    --pattern-height: 6.4rem;
    margin-top: -25.6rem;
    padding-top: 38rem;
    padding-bottom: 18.2rem;
  }
  
  .look-content__visual {
    margin: 0 5rem;
  }

  .look-content__visual img {
    width: initial;
  }
  
  .look-content__contain {
    width: 94rem;
    padding: 0;
  }
  
  .look-content__video {
    margin-bottom: 8rem;
  }

  .look-content__btn-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3.8rem;
  }
  
  .look-content__btn {
    display: inline-flex;
    width: 44rem;
  }

  .look-content__btn:active {
    box-shadow: none;
    transform: translateY(var(--box-shadow-y));
  }

  .start-learning-btn {
    gap: 2rem;
    width: 91.8rem;
    height: 18.4rem;
    border-radius: 45.6rem;
    font-size: 6.8rem;
  }
}
/* ******************************************************************
* //look-content
****************************************************************** */

/* ******************************************************************
* study-content
****************************************************************** */
.study-content-experience-btn {
  margin: 0 auto;
}

@media (min-width: 1180px) {
  .study-content-body {
    padding-top: 32rem;
  }

  .study-content-experience-btn {
    width: 44rem;
    height: 12rem;
  }
}

/* study-content-visual */
.study-content-visual {
  z-index: 1;
  position: relative;
}

.study-content-visual__contain {
  position: relative;
  display: inline-block;
}

.study-content-visual__caption {
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  position: absolute;
  bottom: 0;
  left: 38%;
  width: 58%;
  font-weight: 500;
  font-size: .8rem;
  color: #000;
  text-align: left;
}

.study-content-visual__caption li {
  display: flex;
  gap: .4rem;
}

.study-content-visual__caption li::before {
  content: '·';
}

.start-learning-btn {
  display: flex;
  margin: 0 auto;
}

.start-learning-btn .basics-btn__icon {
  --box-size: 2.8rem;
  width: var(--box-size);
  height: var(--box-size);
  background: url(../image/common/icon/icon__arr-round2--fff.svg) no-repeat center / contain;
}

@media (min-width: 360px) {
  .study-content-visual__caption {
    top: 77%;
    font-size: 1rem;
  }
}

@media (min-width: 1180px) {
  .study-content-visual__caption {
    font-size: 1.6rem;
  }

  .start-learning-btn .basics-btn__icon {
    --box-size: 7.4rem;
  }
}
/* //study-content-visual */


/* study-content-guide */
.study-content-guide {
  --icon-size: 2.3rem;
  display: flex;
  flex-direction: column;
  gap: 2.7rem;
  width: 31.6rem;
  max-width: 100%;
  margin: 0 auto 2.4rem;
  padding-left: calc(var(--icon-size) * 1.5);
}

.study-content-guide__ttl {
  position: relative;
  margin-bottom: .5rem;
  font-family: 'Jalnan', sans-serif;
  font-size: 2rem;
  color: #714FAD
}

.study-content-guide__icon {
  position: absolute;
  top: 50%;
  left: calc(var(--icon-size) * -1.5);
  width: var(--icon-size);
  height: var(--icon-size);
  background: url(../image/common/icon/icon__check-box.svg) no-repeat center / contain;
  transform: translateY(-50%);
}

.study-content-guide__desc {
  font-weight: 400;
  font-size: 1.4rem;
  color: #777;
}

.study-content-capture {
  gap: 1.6rem;
  width: 26rem;
  margin: 0 auto 4.5rem;
}

@media (min-width: 1180px) {
  .study-content-guide {
    --icon-size: 4rem;
    gap: 4rem;
    width: 94rem;
    margin-bottom: 6rem;
  }
  
  .study-content-guide__ttl {
    margin-bottom: 2rem;
    font-size: 4rem;
  }

  .study-content-guide__desc {
    font-size: 2.4rem;
  }

  .study-content-guide > *:first-child br,
  .study-content-guide__desc br {
    display: none;
  }

  .study-content-capture {
    gap: 3.2rem;
    width: 94rem;
    margin-bottom: 9rem;
  }
}
/* //study-content-guide */
/* ******************************************************************
* //study-content
****************************************************************** */


/* ******************************************************************
* capture
****************************************************************** */
.capture__wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.capture {
  display: inline-flex;
  flex-direction: column;
}

.capture__img img {
  width: 100%;
}

.capture__caption {
  margin: .5rem 1rem 0 0;
  font-weight: 500;
  font-size: 1rem;
  text-align: right;
}

@media (min-width: 1180px) {
  .capture__wrap {
    row-gap: 5rem;
  }

  .capture__img img {
    width: initial;
  }

  .capture__caption {
    margin: 1rem 2rem 0 0;
    font-size: 2rem;
  }
}
/* ******************************************************************
* //capture
****************************************************************** */


/* ******************************************************************
* hangeul-program
****************************************************************** */
/* hangeul-program-header */
.hangeul-program-header {
  overflow: hidden;
  position: relative;
  padding: 4rem 0 0;
  background: url(../image/sub/look/hangeul-program__clouds--m.png) no-repeat left 1.2rem bottom 10.4rem / 100%;
}

.hangeul-program-header__ttl {
  width: 30.2rem;
  max-width: 100%;
  margin: 0 auto 2rem;
  text-align: center;
}

.hangeul-program-header__ttl img {
  width: 100%;
}

.hangeul-program-header__desc {
  z-index: 1;
  position: relative;
  padding: 0 4rem;
  font-size: 1.2rem;
  color: #777;
  text-align: center;
  line-height: 1.5;
}

.hangeul-program-header__desc strong {
  color: #000;
}

@media (min-width: 768px) {
  .hangeul-program-header {
    background-image: url(../image/sub/look/hangeul-program__clouds--t.png);
  }
}

@media (min-width: 1180px) {
  .hangeul-program-header {
    padding-top: 10rem;
    background-image: none;
  }

  .hangeul-program-header__ttl {
    width: 74.6rem;
    margin-bottom: 5.8rem;
  }
  
  .hangeul-program-header__desc {
    padding: 0 8rem;
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.8;
  }

  .hangeul-program-header__desc strong {
    font-weight: 700;
  }

  .hangeul-program-header__desc .line-break {
    display: none;
  }
}
/* //hangeul-program-header */


/* hangeul-program-clouds */
@media (min-width: 1180px) {
  .hangeul-program-clouds__item {
    position: absolute;
    left: 50%;
    background: no-repeat center / contain;
    transform: translateX(-50%);
    animation: ani__clouds 5s infinite linear;
  }

  @keyframes ani__clouds {
    0% {
      transform: translateX(-50%) translateY(0);
    } 25% {
      transform: translateX(-50%) translateY(5%);
    } 50% {
      transform: translateX(-50%) translateY(0);
    } 75% {
      transform: translateX(-50%) translateY(-5%);
    } 100% {
      transform: translateX(-50%) translateY(0);
    }
  }

  .hangeul-program-clouds__item--k {
    top: -49.2rem;
    width: 43.4rem;
    height: 33.5rem;
    margin-left: -64.9rem;
    background-image: url(../image/sub/look/hangeul-program__cloud--d.png);
  }

  .hangeul-program-clouds__item--kk {
    top: -.1rem;
    width: 12.1rem;
    height: 9.4rem;
    margin-left: -42.3rem;
    background-image: url(../image/sub/look/hangeul-program__cloud3--d.png);
  }

  .hangeul-program-clouds__item--a {
    top: -10.8rem;
    width: 19.3rem;
    height: 14.9rem;
    margin-left: 43.4rem;
    background-image: url(../image/sub/look/hangeul-program__cloud4--d.png);
  }

  .hangeul-program-clouds__item--h {
    top: 10.39rem;
    width: 26.7rem;
    height: 22.2rem;
    margin-left: 63.09rem;
    background-image: url(../image/sub/look/hangeul-program__cloud2--d.png);
  }

  .hangeul-program-clouds__item--yo {
    top: 6rem;
    width: 22.1rem;
    height: 22.4rem;
    margin-left: -85rem;
    background-image: url(../image/sub/look/hangeul-program__cloud5--d.png);
  }

  .hangeul-program-clouds__item--r {
    top: -21rem;
    width: 13.6rem;
    height: 12.6rem;
    margin-left: 89rem;
    background-image: url(../image/sub/look/hangeul-program__cloud6--d.png);
  }
}
/* //hangeul-program-clouds */


/* hangeul-program-visual */
.hangeul-program-visual {
  padding: 3rem 2.3rem 0;
}

.hangeul-program-visual__char {
  display: block;
  width: 31.4rem;
  max-width: 100%;
  margin: 0 auto;
}

.hangeul-program-visual img {
  width: 100%;
}


@media (min-width: 1180px) {
  .hangeul-program-visual {
    padding: 6.6rem 4.6rem 0;
  }
  
  .hangeul-program-visual__char {
    width: 94rem;
  }
}
/* //hangeul-program-visual */


/* hangeul-program-body */
.hangeul-program-body {
  margin-top: -5.6rem;
  padding: 8.4rem 1rem 11.7rem;
  background: #F6F6F6;
}

.hangeul-program-body__contain {
  width: 34rem;
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 1180px) {
  .hangeul-program-body {
    margin-top: -18.8rem;
    padding: 34rem 2rem 23.4rem;
  }
  
  .hangeul-program-body__contain {
    width: 118rem;
  }
}
/* //hangeul-program-body */


/* learning-method */
.learning-method__ttl {
  margin-bottom: 2rem;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5em;
  text-align: center;
}

.learning-method__ttl strong {
  font-weight: 700;
  color: #E94F4F;
}

.learning-method__item {
  margin: 10rem 0 8rem;
  position: relative;
  padding: 5.2rem 2.4rem 3rem;
  border-radius: 1.6rem;
  background: #fff;
  box-shadow: 1rem 1rem 2rem rgba(0, 0, 0, 0.07);
}

.learning-method__number {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.learning-method__desc {
  display: flex;
  gap: .4rem;
  width: 21.8rem;
  margin: .2rem auto 0;
  font-weight: 400;
  font-size: 1.3rem;
  color: #000;
  line-height: 1.462;
}

.learning-method--online-study .learning-method__desc {
  width: initial;
  text-align: center;
}

.learning-method__desc strong {
  font-weight: 700;
}

.learning-method__line {
  margin: 2rem 0;
  border: 0 none;
  height: .1rem;
  background: url(../image/common/pattern/pattern__dashed--gray.svg) repeat-x left / contain;
}

@media (min-width: 1180px) {
  .learning-method--hangeul .learning-method__number {
    --box-size: 9rem;
  }

  .learning-method__ttl-wrap {
    display: flex;
    align-items: center;
    gap: 3rem;
    width: fit-content;
    margin: 0 auto 7rem;
  }
  
  .learning-method__ttl {
    margin-bottom: 0;
    font-size: 4rem;
  }

  .learning-method__ttl br {
    display: none;
  }

  .learning-method__item {
    margin: 4rem 0;
    padding: 7rem 5.5rem;
  }

  .learning-method--online-study .learning-method__item {
    display: grid;
    grid-template: repeat(2, auto) / auto 1fr;
    justify-items: center;
    align-items: center;
  }
  
  .learning-method__desc {
    gap: 0.8rem;
    width: 43.6rem;
    margin: .8rem 0;
    font-size: 2.4rem;
    line-height: 1.5;
  }

  .learning-method--online-study .learning-method__desc {
    margin: 4rem 0 0;
  }

  .learning-method--online-study .learning-method__desc br{
    display: none;
  }

  .learning-method__number {
    position: static;
    transform: translate(0, 0);
  }

  .learning-method--online-study .learning-method__number {
    grid-row: 1 / -1;
  }
}
/* //learning-method */

/* learning-method-list */
.learning-method-list {
  display: flex;
  flex-direction: column;
}

.learning-method-list__item:last-child::after {
  content: none;
}

.learning-method-list__item::after {
  display: block;
  height: 5rem;
  margin: 0 auto;
  background: url(../image/common/icon/icon__arr.svg) no-repeat center / auto  60%;
  transform: rotate(90deg);
  content: '';
}

.learning-method-list__visual img {
  margin: 0 auto;
}

@media (min-width: 1180px) {
  .learning-method-list {
    flex-direction: row;
    justify-content: center;
    width: 98.3rem;
    margin: 0 auto;
  }

  .learning-method-list > *:last-child {
    padding-right: 0;
  }

  .learning-method-list__item {
    position: relative;
    padding-right: 8rem;
  }

  .learning-method-list__item::after {
    --box-size: 4rem;
    position: absolute;
    top: 28%;
    right: 0;
    width: var(--box-size);
    background-size: 100%;
    transform: rotate(0deg) translateX(-50%);
  }

  .learning-method__line {
    margin: 5rem 0;
  }

  .learning-method__online {
    width: 58.3rem;
    margin: 0 auto;
  }
}
/* //learning-method-list */

/* learning-method-visual */
.learning-method-visual {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  width: 22.7rem;
  margin: 0 auto 2.2rem;
}

.learning-method--online-study .learning-method-visual {
  flex-direction: column;
  gap: .4rem;
  width: 15.8rem;
}

.learning-method-visual__caption {
  font-size: 1rem;
  color: #8F8F8F;
  text-align: center;
}

.learning-method-visual__icon {
  display: block;
  width: 1.4rem;
  height: 2.678rem;
  background: url(../image/common/icon/icon__arr-dot.svg) no-repeat center / contain;
}

@media (min-width: 1180px) {
  .learning-method-visual {
    gap: 2rem;
    width: initial;
    margin: 0 2rem 0 4.2rem;
  }

  .learning-method-visual img {
    width: initial;
  }
  
  .learning-method--online-study .learning-method-visual {
    flex-direction: row;
    gap: .8rem;
    width: initial;
    margin: 0;
  }
  
  .learning-method-visual__caption {
    margin-top: 1rem;
    font-size: 1.4rem;
  }
  
  .learning-method-visual__icon {
    flex: 0 0 auto;
    width: 5.6rem;
    height: 4.6rem;
    margin: 0 3.7rem 0 5.3rem;
    background-image: url(../image/common/icon/icon__arr-dot--col.svg);
  }
}
/* //learning-method-visual */

/* number-icon */
.number-icon {
  --box-size: 7.3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  width: var(--box-size);
  height: var(--box-size);
  border-radius: 50%;
  font-weight: 500;
  font-size: 1.3rem;
  background: #FFD75E;
}

.number-icon__img {
  --box-size: 3.2rem;
  width: var(--box-size);
  height: var(--box-size);
  background: no-repeat center / contain;
}

.number-icon__img--one {
  background-image: url(../image/common/icon/icon__finger--one.svg);
}

.number-icon__img--two {
  background-image: url(../image/common/icon/icon__finger--two.svg);
}


@media (min-width: 1180px) {
  .number-icon {
    --box-size: 11rem;
    flex: 0 0 auto;
    gap: .2rem;
    font-size: 2rem;
  }
  
  .number-icon__img {
    --box-size: 43.7%;
  }
}
/* //number-icon */

/* ******************************************************************
* //hangeul-program
****************************************************************** */


/* step-learning */
.step-learning__item:last-child:after {
  content: none;
}

.step-learning__item::after {
  display: block;
  margin: 2rem 0;
  height: 0.1rem;
  background: url(../image/common/pattern/pattern__dashed--gray.svg) repeat-x left / contain;
  content: '';
}

.step-learning__ex {
  padding: 0 0 2rem;
  font-size: 1.4rem;
  color: #8F8F8F;
  text-align: center;
}

.step-learning__visual {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 90.5%;
  margin: 0 auto 2rem;
}

.step-learning__visual img {
  min-width: 0;
}

.step-learning__visual > *:first-child {
  flex: 1.5;
}


.step-learning__visual > *:last-child {
  flex: 1;
}

.step-learning__icon {
  --box-size: 3rem;
  flex: 0 0 var(--box-size);
  height: var(--box-size);
  background: url(../image/common/icon/icon__plus-round2.svg) no-repeat center / contain;
}

@media (min-width: 1180px) {
  .step-learning {
    width: 94.5rem;
    margin: 0 auto;
  }

  .step-learning__ex {
    padding-bottom: 3rem;
    font-size: 3rem;
    text-align: left;
  }

  .step-learning__cont {
    display: flex;
    gap: 3.05rem;
  }

  .step-learning__visual {
    gap: 2rem;
    width: 47.861rem;
  }

  .step-learning__icon {
    --box-size: 4rem;
  }

  .step-learning__item::after {
    margin: 5rem -6.4rem;
  }
}
/* //step-learning */

/* step-learning-desc */
.step-learning-desc {
  width: 84%;
  margin: 0 auto;
  font-size: 1.3rem;
}

.step-learning-desc__item {
  display: flex;
  line-height: 1.5;
}

.step-learning-desc__item::before {
  padding-right: .8rem;
  content: '-';
}

.step-learning-desc__item strong {
  font-weight: 700;
}

@media (min-width: 1180px) {
  .step-learning-desc {
    font-size: 2.4rem;
  }
}
/* //step-learning-desc */


/* hangeul-program-content */
.hangeul-program-content {
  margin-bottom: 7.2rem;
}

.hangeul-program-content__ttl {
  --deco-gap: 2rem;
  position: relative;
  margin-bottom: calc(var(--deco-gap) * 2);
  font-family: 'Jalnan', sans-serif;
  font-size: 2.4rem;
  text-align: center;
}

.hangeul-program-content__ttl::after {
  position: absolute;
  left: 50%;
  bottom: calc(var(--deco-gap) * -1);
  width: 2.4rem;
  height: .3rem;
  background: #000;
  transform: translateX(-50%);
  content: '';
}

.hangeul-program-content__desc {
  margin-bottom: 3rem;
  font-weight: 400;
  font-size: 1.6rem;
  color: #777;
  text-align: center;
  line-height: 1.5;
}

.hangeul-program-content__desc strong {
  font-weight: 700;
  color: #000;
}

.hangeul-program-content--curriculum picture img {
  width: 100%;
}

.hangeul-program-content--online-study .line-break {
  display: none;
}

@media (min-width: 1180px) {
  .hangeul-program-content:last-child {
    margin-bottom: 0;
  }
  
  .hangeul-program-content {
    margin-bottom: 20rem;
  }
  
  .hangeul-program-content__ttl {
    --deco-gap: 5rem;
    font-size: 7rem;
  }
  
  .hangeul-program-content__ttl::after {
    width: 3.6rem;
    height: .4rem;
  }
  
  .hangeul-program-content__desc {
    margin-bottom: 5rem;
    font-size: 3rem;
  }

  .hangeul-program-content__desc .line-break {
    display: none;
  }

  .hangeul-program-content--online-study .line-break {
    display: block;
  }
}
/* //hangeul-program-content */