@import url('style.css');

/* Section-1 */
#main-area > .section-1 {
  margin-top: 100px;

  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (min-width: 1024px) {
  #main-area > .section-1 {
    height: 50.2083vw;

    background-image: url(../img/article-4_img_01.png);
  }
  #main-area > .section-1 .mask {
    display: none;
  }
  #main-area > .section-1 > .title {
    padding-top: 23.54166666666667vw;
    padding-left: 4.114583vw;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 5.677083vw;
    line-height: 110%;

    letter-spacing: -0.02em;
    color: #ffffff;
  }
  #main-area > .section-1 > .title > DIV {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 5.052083vw;

    letter-spacing: -0.02em;
    color: #ffffff;
  }
  #main-area > .section-1 > DIV.div {
    margin-top: 4.16666666666667vw;
    margin-left: 4.114583vw;

    width: 91.66666666666667vw;
    height: 1px;

    background: rgba(255, 255, 255, 0.5);
  }
  #main-area > .section-1 > .info {
    margin-top: 3.125vw;
    margin-left: 4.114583vw;
  }
  #main-area > .section-1 > .info > LI {
    display: inline-block;
    margin-right: 6.25vw;
  }
  #main-area > .section-1 > .info DT {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 1.14583vw;

    color: #ffffff;
  }
  #main-area > .section-1 > .info DD {
    margin-top: 0.625vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 0.9375vw;

    color: #ffffff;
  }
  #main-area > .section-1 > .desc {
    margin-top: 1.5625vw;
    margin-left: 4.114583vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 1.14583vw;
    line-height: 180%;

    color: #ffffff;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-1 {
    height: 160vw;
    background-image: url(../img/article-4_M_img_01.png);
    padding: 0 5.333333333333333vw;
  }
  #main-area > .section-1 .mask {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #282828;
    opacity: 0.6;
  }
  #main-area > .section-1 > .title {
    position: absolute;
    padding-top: 39.5vw;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 10.666666666666667vw;
    line-height: 130%;

    letter-spacing: -0.02em;
    color: #ffffff;
  }
  #main-area > .section-1 > DIV.div {
    position: absolute;
    top: 72.533333333333333vw;

    width: 89.333333333333333vw;
    height: 1px;

    background: rgba(255, 255, 255, 0.5);
  }
  #main-area > .section-1 > .info {
    position: absolute;
    top: 81vw;
    display: flex;
    column-gap: 13.333333333333333vw;
    color: #fff;
  }
  #main-area > .section-1 > .info DT {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 3.733333333333333vw;
  }
  #main-area > .section-1 > .info DD {
    margin-top: 0.9vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 3.733333333333333vw;

    color: #ffffff;
  }
  #main-area > .section-1 > .desc {
    position: absolute;
    top: 97.6vw;
    width: 89.333333333333333vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 3.733333333333333vw;
    line-height: 180%;

    color: #ffffff;
  }
}

/* Section-2 */
@media (min-width: 1024px) {
  #main-area > .section-2 {
    position: relative;
    height: 58vw;

    background-color: #222222;
  }
  #main-area > .section-2 > .content {
    position: absolute;
    top: 7.8125vw;
    left: 13.54166666666667vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 3.22916666666667vw;
    line-height: 140%;

    color: #ffffff;
  }
  #main-area > .section-2 > IMG {
    position: absolute;
    top: 7.8125vw;
    left: 57.29166666666667vw;
    width: 29.16666666666667vw;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-2 {
    padding: 21.333333333333333vw 5.333333333333333vw;
    overflow: hidden;
    background-color: #222222;
  }
  #main-area > .section-2 > .content {
    color: var(--white, #fff);
    font-family: Pretendard;
    font-size: 8.533333333333333vw;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 41.6px */
    letter-spacing: -0.64px;
  }
  #main-area > .section-2 > IMG {
    margin-top: 8vw;
    width: 100%;
  }
}

/* Section-3 */
@media (min-width: 1024px) {
  #main-area > .section-3 {
    position: relative;
    height: 33vw;
  }
  #main-area > .section-3 > .content-1 > DT {
    position: absolute;
    top: 7.8125vw;
    left: 13.54166666666667vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 3.22916666666667vw;
    line-height: 140%;
    color: #282828;
  }
  #main-area > .section-3 > .content-1 > DD {
    position: absolute;
    top: 13.125vw;
    left: 13.54166666666667vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 1.14583vw;
    line-height: 26px;
    color: #282828;
  }
  #main-area > .section-3 > .content-2 {
    position: absolute;
    top: 7.8125vw;
    left: 60vw;
    width: 29.32291666666667vw;
    text-align: justify;
  }
  #main-area > .section-3 > .content-2 > LI {
    margin-bottom: 2.60416666666667vw;
  }
  #main-area > .section-3 > .content-2 > LI DT {
    margin-bottom: 0.78125vw;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 1.14583vw;
    color: #282828;
  }
  #main-area > .section-3 > .content-2 > LI DD {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 0.83vw;
    line-height: 160%;
    color: #444444;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-3 {
    padding: 21.333333333333333vw 5.333333333333333vw;
    overflow: hidden;
  }
  #main-area > .section-3 > .content-1 > DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 8.533333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.64px;
    margin-bottom: 2.666666666666667vw;
  }
  #main-area > .section-3 > .content-1 > DD {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 22.4px */
    text-transform: capitalize;
  }
  #main-area > .section-3 > .content-2 > LI {
    margin-top: 8vw;
  }
  #main-area > .section-3 > .content-2 > LI DT {
    color: var(--black, #282828);
    font-family: Pretendard;
    font-size: 5.333333333333333vw;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
  }
  #main-area > .section-3 > .content-2 > LI DD {
    color: var(--black, #282828);
    font-family: Pretendard;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: -0.28px;
    margin-top: 2.666666666666667vw;
  }
}

/* Section-4 */
@media (min-width: 1024px) {
  #main-area > .section-4 {
    position: relative;
    height: 48vw;
  }
  #main-area > .section-4 > IMG {
    position: absolute;
    top: 4vw;
    width: 58.69791666666667vw;
  }
  #main-area > .section-4 > .content {
    position: absolute;
    top: 4vw;
    left: 60vw;
  }
  #main-area > .section-4 > .content > DT > DIV {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 1.04166666666667vw;
    line-height: normal;
    color: #282828;
  }
  #main-area > .section-4 > .content > DT {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 3.22916666666667vw;
    line-height: 140%;
    color: #282828;
  }
  #main-area > .section-4 > .content > DD {
    margin-top: 2.60416666666667vw;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 0.9375vw;
    line-height: 150%;
    color: #444444;
    width: 29.32291666666667vw;
    text-align: justify;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-4 {
    padding: 0 5.333333333333333vw 21.333333333333333vw;
    overflow: hidden;
  }
  #main-area > .section-4 > .content > DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 8.533333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: 130%; /* 41.6px */
    letter-spacing: -0.64px;
    text-transform: uppercase;
  }
  #main-area > .section-4 > .content > DT > DIV {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 2.666666666666667vw;
  }
  #main-area > .section-4 > .content > DD {
    margin-top: 8vw;
    color: var(--black, #282828);
    font-family: Pretendard;
    font-size: 4.266666666666667vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: -0.32px;
  }
  #main-area > .section-4 > IMG {
    margin-top: 8vw;
    width: 100%;
  }
}

/* Section-5 */
@media (min-width: 1024px) {
  #main-area > .section-5 {
    position: relative;
    height: 32vw;
  }
  #main-area > .section-5 > .content-1 > DT {
    position: absolute;
    top: 7.8125vw;
    left: 13.54166666666667vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 3.22916666666667vw;
    line-height: 140%;
    color: #282828;
  }
  #main-area > .section-5 > .content-1 > DD {
    position: absolute;
    top: 13.125vw;
    left: 13.54166666666667vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 1.14583vw;
    line-height: 26px;
    color: #282828;
  }
  #main-area > .section-5 > .content-2 {
    position: absolute;
    top: 7.8125vw;
    left: 60vw;
    width: 29.32291666666667vw;
    text-align: justify;
  }
  #main-area > .section-5 > .content-2 > LI {
    margin-bottom: 2.60416666666667vw;
  }
  #main-area > .section-5 > .content-2 > LI DT {
    margin-bottom: 0.78125vw;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 1.14583vw;
    color: #282828;
  }
  #main-area > .section-5 > .content-2 > LI DD {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 0.83vw;
    line-height: 160%;
    color: #444444;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-5 {
    padding: 0 5.333333333333333vw 21.333333333333333vw;
    overflow: hidden;
  }
  #main-area > .section-5 > .content-1 > DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 8.533333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.64px;
    text-transform: uppercase;
  }
  #main-area > .section-5 > .content-1 > DD {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 22.4px */
    text-transform: capitalize;
    margin-top: 2.666666666666667vw;
  }
  #main-area > .section-5 > .content-2 > LI {
    margin-top: 8vw;
  }
  #main-area > .section-5 > .content-2 > LI DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 5.333333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
  }
  #main-area > .section-5 > .content-2 > LI DD {
    margin-top: 2.666666666666667vw;
    color: var(--black, #282828);
    font-family: Pretendard;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: -0.28px;
  }
}

/* Section-6 */
@media (min-width: 1024px) {
  #main-area > .section-6 {
    position: relative;
    height: 103.6vw;

    background-color: #f4f4fa;
  }
  #main-area > .section-6 > .content {
    position: absolute;
    top: 7.8125vw;
    left: 13.54166666666667vw;
  }
  #main-area > .section-6 > .content > DT > DIV {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-size: 1.04166666666667vw;
    line-height: normal;
    color: #282828;
  }
  #main-area > .section-6 > .content > DT {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 3.22916666666667vw;
    line-height: 140%;
    color: #282828;
  }
  #main-area > .section-6 > .content > DD {
    margin-top: 2.60416666666667vw;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 0.9375vw;
    line-height: 150%;
    color: #444444;
    width: 35.41666666666667vw;
    text-align: justify;
  }
  #main-area > .section-6 > IMG {
    position: absolute;
    top: 0vw;
    width: 100vw;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-6 {
    padding: 21.333333333333333vw 5.333333333333333vw;
    overflow: hidden;
    background-color: #f4f4fa;
  }
  #main-area > .section-6 > .content > DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 8.533333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.64px;
    text-transform: uppercase;
  }
  #main-area > .section-6 > .content > DT > DIV {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
    margin-bottom: 2.666666666666667vw;
  }
  #main-area > .section-6 > .content > DD {
    margin-top: 8vw;
    color: var(--black, #282828);
    font-family: Pretendard;
    font-size: 4.266666666666667vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: -0.32px;
  }
  #main-area > .section-6 > IMG {
    margin-top: -15vw;
    margin-left: -10vw;
    width: 120%;
  }
}

/* Section-7 */
@media (min-width: 1024px) {
  #main-area > .section-7 {
    position: relative;
    height: 27vw;
  }
  #main-area > .section-7 > .header {
    position: absolute;
    top: 7.8125vw;
    left: 13.54166666666667vw;
  }
  #main-area > .section-7 > .header > DT {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 3.22916666666667vw;
    line-height: 140%;
    color: #282828;
  }
  #main-area > .section-7 > .header > DD {
    margin-top: 0.78125vw;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 1.14583vw;
    color: #282828;
  }
  #main-area > .section-7 > UL {
    position: absolute;
    top: 17.3125vw;
    left: 13.54166666666667vw;
  }
  #main-area > .section-7 > UL > LI {
    display: inline-block;
    width: 28.64583vw;
    margin-right: 8.3vw;
    vertical-align: top;
  }
  #main-area > .section-7 > UL DT {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    font-size: 1.14583vw;
    color: #282828;
  }
  #main-area > .section-7 > UL DD {
    margin-top: 0.78125vw;
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 0.83vw;
    line-height: 160%;

    color: #444444;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-7 {
    padding: 21.333333333333333vw 5.333333333333333vw;
    overflow: hidden;
  }
  #main-area > .section-7 > .header > DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 8.533333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.64px;
    text-transform: uppercase;
  }
  #main-area > .section-7 > .header > DD {
    margin-top: 2.666666666666667vw;
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: 160%; /* 22.4px */
    text-transform: capitalize;
  }
  #main-area > .section-7 > UL > LI {
    margin-top: 8vw;
  }
  #main-area > .section-7 > UL DT {
    color: var(--black, #282828);
    font-family: Inter;
    font-size: 5.333333333333333vw;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
  }
  #main-area > .section-7 > UL DD {
    margin-top: 2.666666666666667vw;
    color: var(--black, #282828);
    font-family: Pretendard;
    font-size: 3.733333333333333vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: -0.28px;
  }
}

/* Section-final */
@media (min-width: 1024px) {
  #main-area > .section-final {
    position: relative;
    height: 11.5vw;
  }
  #main-area > .section-final > .content {
    position: absolute;
    top: 10.41666666666667vw;
    left: 13.54166666666667vw;

    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-size: 1.14583vw;
    line-height: 180%;

    color: #777777;
  }
}
@media (max-width: 1024px) {
  #main-area > .section-final {
    padding: 10vw 5.333333333333333vw 10vw;
  }
  #main-area > .section-final > .content {
    font-family: Pretendard;
    font-size: 4.266666666666667vw;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
    letter-spacing: -0.32px;
  }
}

/* article-navi */
#main-area > .article-navi {
  position: relative;
  height: 17.1875vw;
}
#main-area > .article-navi > UL {
  margin-top: 10.41666666666667vw;
}
#main-area > .article-navi > UL > LI {
  position: absolute;
  width: 50vw;
  height: 17.1875vw;

  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 1.66666666666667vw;

  color: #ffffff;

  text-align: center;
}
#main-area > .article-navi > UL > LI.prev {
  width: 50vw;
  background-image: url(../img/article-4_navi_img.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#main-area > .article-navi > UL > LI.next {
  left: 50vw;
  background-image: url(../img/article-1_navi_img.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#main-area > .article-navi > UL > LI > .text {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 9.4vw;
  background-color: rgb(16, 16, 16);
  opacity: 0.7;
  color: white;

  padding-top: 7.76041666666667vw;
  cursor: pointer;
}
#main-area > .article-navi > UL > LI > .text:hover {
  background-color: transparent;
  opacity: initial;
}
#main-area > .article-navi > UL > LI > .text > IMG {
  vertical-align: top;
  margin-right: 1vw;
  margin-left: 1vw;
}