.roboto-text {
  font-family: 'Roboto', sans-serif; }

.header-space {
  margin-top: 80px; }
  @media screen and (min-width: 1040px) {
    .header-space {
      margin-top: 128px; } }

.p-w75 {
  margin: 0 auto; }

.swiper-pagination-bullet {
  width: 8px;
  height: 8px; }
  @media screen and (min-width: 1040px) {
    .swiper-pagination-bullet {
      width: 8px;
      height: 8px; } }

/* Primary Button */
/* YouTube Button */
.youtube-button {
  display: block;
  text-align: center;
  margin: 0 auto 180px;
  width: 95%; }
  .youtube-button img {
    margin: 0 auto;
    width: 70%; }
  @media screen and (max-width: 768px) {
    .youtube-button {
      width: 90%;
      max-width: 662px;
      transition: .4s; }
      .youtube-button:hover {
        opacity: .8; } }

/* Section Feature */
.feture-list {
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 1040px) {
    .feture-list {
      margin-top: 50px;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 50px 35px; } }
  .feture-list li {
    width: 90%;
    margin: 20px auto 0px; }
    @media screen and (min-width: 1040px) {
      .feture-list li {
        width: calc(33.333% - 35px); } }
    .feture-list li img {
      width: 100%;
      object-fit: contain; }
    .feture-list li p {
      width: 90%;
      margin: 10px auto 0;
      text-align: left;
      line-height: 1.5; }

/* Section Course */
.course-list {
  display: flex;
  flex-direction: column; }
  @media screen and (min-width: 1040px) {
    .course-list {
      margin-top: 20px;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 40px; } }
  .course-list li {
    width: 90%;
    margin: 30px auto 0px;
    background-color: #41999d;
    color: #fff; }
    @media screen and (min-width: 1040px) {
      .course-list li {
        width: calc(50% - 20px); }
      .course-list li:hover {
        opacity: .8; } 
}
    .course-list li img {
      width: 100%;
      object-fit: contain; }

    .course-list li .text {
      height: 183px; }
@media screen and (max-width: 760px) {
    .course-list li .text {
      height: 150px; }
}
      @media screen and (min-width: 1040px) {
        .course-list li .text {
          height: 133px; } }
    .course-list li h3 {
      font-size: 20px;
      text-align: center;
      position: relative;
      margin-top: 1rem;
      letter-spacing: 1px; }
      .course-list li h3::after {
        position: absolute;
        content: "";
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 90%;
        height: 1px;
        background-color: #fff; }
    .course-list li p {
      width: 90%;
      margin: 11px auto 22px;
      text-align: left;
      font-size: 14px;
      line-height: 1.5; }

/* Section Reason */
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-bottom: 50px; }
  @media screen and (min-width: 1040px) {
    .reason-list {
      margin: 50px auto;
      flex-direction: row;
      gap: 33px; } }
  @media screen and (min-width: 1040px) {
    .reason-list li {
      width: calc(33.333% - 33px); } }
  .reason-list img {
    width: 100%;
    margin-bottom: 10px; }
  .reason-list p {
    margin-left: 1rem; }
    @media screen and (min-width: 740px) {
      .reason-list p {
        font-size: 22px; } }
    @media screen and (min-width: 1040px) {
      .reason-list p {
        font-size: 16px; } }

.t3_g {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 6px;
	margin-top: 10px;
    line-height: 150%;
	letter-spacing: 1px;
    border-left: 4px solid #ffffff;
    padding-left: 10px;
    text-align: left;
    font-weight: 700!important;
}

/* Section ORIENTATION */
.orientation table {
  width: 100%;
  border: 1px solid #151515;
  margin-top: 50px; }
  @media screen and (min-width: 1040px) {
    .orientation table {
      width: 90%;
      margin: 0 auto; } }
  .orientation table tr {
    width: 100%;
    display: block;
    border-bottom: 1px solid #151515; }
    @media screen and (min-width: 1040px) {
      .orientation table tr {
        display: table; } }
    .orientation table tr:last-child {
      border-bottom: none; }
  .orientation table tr {
    transition: .4s; }
    .orientation table tr:hover {
      background-color: #fff571; }
  @media screen and (min-width: 1040px) {
    .orientation table {
      margin-top: 73px; } }
.orientation th {
  white-space: nowrap;
  text-align: left;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Roboto', sans-serif; }
  @media screen and (min-width: 740px) {
    .orientation th {
      padding-left: 75px; } }
  .orientation th .small {
    font-size: 16px; }
  @media screen and (min-width: 1040px) {
    .orientation th {
      width: 25%;
      padding-left: 70px; } }
.orientation td {
  font-size: 16px;
  padding: .5rem; }
  @media screen and (min-width: 1040px) {
    .orientation td {
      font-size: 16px; } }
.orientation .w25 {
  white-space: nowrap;
  text-align: left;
  vertical-align: bottom; }
  @media screen and (min-width: 1040px) {
    .orientation .w25 {
      width: 25%;
      vertical-align: middle; } }
.orientation .w50 {
  display: block;
  text-align: left;
  font-weight: bold; }
  @media screen and (min-width: 740px) {
    .orientation .w50 {
      padding-left: 75px; } }
  @media screen and (min-width: 1040px) {
    .orientation .w50 {
      display: unset;
      vertical-align: bottom;
      padding-left: unset;
      width: 100%;
      line-height: 3; } }