@media (max-width: 640px) {
  .word {
    width: 100%;
    padding: 80px 5%;
    text-align: center;
  }
  .main_title {
    font-size: 20px;
    line-height: 30px;
    font-weight: bold;
  }
  .sub_title {
    margin-top: 20px;
    font-size: 18px;
    line-height: 25px;
    font-weight: 600;
    margin-bottom: 25px;
  }
  .subcontent {
    margin-top: 20px;
    font-size: 16px;
  }
  .word_more {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 600;
  }
  .word_more a:after {
    /*after 가상요소*/
    margin: 10px auto 0 auto;
    display: block; /*a요소를 블록 요소라고 선언*/
    width: 200px;
    content: "";
    border-bottom: solid 2.5px rgb(58, 58, 58);
  }
}
@media (min-width: 641px) {
  .word {
    width: 100%;
    padding: 80px 5%;
    text-align: center;
  }
  .main_title {
    font-size: 35px;
    line-height: 50px;
    font-weight: bold;
  }
  .sub_title {
    margin-top: 50px;
    font-size: 25px;
    line-height: 35px;
    font-weight: 600;
    margin-bottom: 25px;
  }
  .subcontent {
    margin-top: 25px;
  }
  .word_more {
    margin-top: 50px;
    font-size: 25px;
    font-weight: 600;
  }
  .word_more a:after {
    /*after 가상요소*/
    margin: 10px auto 0 auto;
    display: block; /*a요소를 블록 요소라고 선언*/
    width: 200px;
    content: "";
    border-bottom: solid 2.5px rgb(58, 58, 58);
  }
}
@media (min-width: 1024px) {
  .word {
    width: 100%;
    max-width: 1460px;
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
  }

  .l_word {
    float: left;
    width: 49%;
  }
  .r_word {
    width: 49%;
  }
  .main_title {
    font-size: 38px;
    line-height: 70px;
    font-weight: bold;
  }

  .sub_title {
    margin-top: 0px;
    font-size: 26px;
    line-height: 40px;
    font-weight: 600;
    margin-bottom: 60px;
  }

  .subcontent {
    margin-bottom: 25px;
    font-size: 20px;
    line-height: 1.5;
  }
  .word_more {
    font-weight: bold;
    font-size: 30px;
  }
  .word_more a:after {
    /*after 가상요소*/
    margin-top: 10px;
    display: block; /*a요소를 블록 요소라고 선언*/
    width: 200px;
    content: "";
    border-bottom: solid 3px rgb(58, 58, 58);
    transform: scaleX(0); /*크기를 0으로 줌으로써 평상시엔 밑줄 없음*/
    transition: transform 250ms ease-in-out; /*변형 방식*/
  }
  .word_more a:hover:after {
    transform: scaleX(1); /*a 속성에 hover시 기존 크기로*/
  }
}

.text_color {
  color: rgb(54, 115, 173);
}
