html {
  scroll-behavior: smooth;
  height: 100%;
}

#__next,
body {
  display: -webkit-flex;
  display: flex;
  width: 100%;
}

#__next {
  -webkit-flex-direction: column;
  flex-direction: column;
}

body {
  min-height: 100%;
  margin: 0;
}

button {
  color: #000000;
}

.cursor-pointer {
  cursor: pointer !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.main-layout {
  /* padding-top: 80px; */
  display: flex;
  position: relative;
  flex: 1 1;
  flex-direction: column;
  width: 100%;
}

.main-layout-content {
  display: block;
  flex: 1 1;
  width: 100%;
  min-height: 450px;
}

.open-modal {
  overflow: hidden;
  padding-right: 15px;
}

.btn-secondary .icon-arrow-solid {
  color: #009c9d;
  /* margin-top: 0.125rem; */
  transition: transform 0.2s ease;
  transform: translateX(0);
}

.btn-secondary:hover .icon-arrow-solid {
  transform: translateX(0.5rem);
}

.btn-primary .icon-arrow-solid {
  margin-top: 0.125rem;
  transition: transform 0.2s ease;
  transform: translateX(0);
}

.btn-primary:hover .icon-arrow-solid {
  transform: translateX(0.5rem);
}

.btn-secondary .icon-fs-download {
  color: #009c9d;

  margin-left: 0.25rem;
}

.btn-with-arrow .icon-arrow-solid {
  transition: transform 0.2s ease;
  transform: translateX(0);
}

.btn-with-arrow:hover .icon-arrow-solid {
  transform: translateX(0.5rem);
}

.btn-with-arrow-flip .icon-arrow-solid {
  transition: transform 0.2s ease;
  transform: rotate(180deg) translateX(0);
}

.btn-with-arrow-flip:hover .icon-arrow-solid {
  transform: rotate(180deg) translateX(0.5rem);
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (min-width: 1025px) {
  .main-layout {
    /* padding-top: 64px; */
  }

  .main-layout.non-overlay {
    padding-top: 104px;
  }

  .visible-tablet,
  .visible-downtablet {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .visible-mobile {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .main-layout.non-overlay {
    padding-top: 56px;
  }
}

@media (max-width: 767px) {
  .visible-fromtablet,
  .visible-tablet {
    display: none !important;
  }

  .main-layout {
    /* padding-top: 56px; */
  }

  .open-modal {
    overflow: hidden;
    padding-right: 0;
  }
}

@media (max-width: 1024px) {
  .visible-desktop {
    display: none !important;
  }

  .btn-secondary .icon-arrow-solid {
    font-size: 0.875rem;
  }

  .btn-primary .icon-arrow-solid {
    font-size: 0.875rem;
  }

  .btn-secondary:hover .icon-arrow-solid {
    transform: translateX(0.25rem);
  }

  .btn-primary:hover .icon-arrow-solid {
    transform: translateX(0.25rem);
  }
}

.text-primary {
  color: #ec1c24;
}

.bg-primary {
  background: #ec1c24;
}

.bg-primary-2 {
  background: #00a9ac;
}

.bg-gray {
  background: #919191;
}

.btn-h-48 {
  height: 48px !important;
  border-radius: 24px !important;
}

.btn-h-42 {
  height: 42px !important;
  border-radius: 21px !important;
}

.px-32 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.tn-card-area {
  padding-left: 1rem;
  padding-right: 1rem;
}

.tn-loading {
  position: fixed;
  z-index: 9999999;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.tn-loading-logo {
  width: 100%;
  max-width: 160px;
}

.pb-100 {
  padding-bottom: 100px;
}

@media (min-width: 1025px) {
  .pb-dt-140 {
    padding-bottom: 140px;
  }
}

@media (max-width: 1024px) {
  .pb-mb-100 {
    padding-bottom: 100px;
  }
}

.tn-home-banner-list-wt img {
  z-index: -1;
}

.tn-home-banner-list-wt > div {
  z-index: -1;
}

.tn-esg-banner-list-wt img {
  z-index: -1;
}

.tn-esg-banner-list-wt > div {
  z-index: -1;
}

/* font */

.tn-title-text {
  font-weight: 700;
  text-transform: capitalize;
}

.tn-p {
  font-weight: 400;
}

@media (min-width: 1025px) {
  .tn-title-text {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }

  .tn-p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .tn-title-text {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .tn-p {
    font-size: 0.875rem;
    line-height: 1.375rem;
  }
}

@media (max-width: 767px) {
  .tn-title-text {
    font-size: 1rem;
    line-height: 1.55rem;
  }

  .tn-p {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
}

.tn-newsDetail-detail img {
  max-width: 100% !important;
  height: auto;
}

.d-none {
  display: none !important;
}

/* search */
.tn-search-box {
  width: 100%;
  border: 0.063rem solid #e4e4e4;
  display: flex;
  align-items: center;
}

.tn-search-box:focus-within {
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
}

.tn-search-box input {
  width: calc(100% - 1.5rem);
  height: 100%;
  border: none;
  padding: 0;
  padding-right: 0.5rem;
  font-size: 1rem;
  font-weight: 400;
  color: #6c6c6c;
}

.tn-search-box input:focus-visible {
  outline: none;
}

.tn-search-box input:placeholder {
  font-weight: 400;
  color: #6c6c6c;
}

.tn-search-box input:-webkit-input-placeholder {
  font-weight: 400;
  color: #6c6c6c;
}

.tn-search-box input::-moz-placeholder {
  font-weight: 400;
  color: #6c6c6c;
}

.tn-search-box input:-ms-input-placeholder {
  font-weight: 400;
  color: #6c6c6c;
}

.tn-search-box input:-moz-placeholder {
  font-weight: 400;
  color: #6c6c6c;
}

.tn-search-icon {
  position: relative;
}

@media (min-width: 768px) {
  .tn-search-box {
    height: 3rem;
    border-radius: 1.5rem;
    padding: 0.25rem 1.25rem;
  }

  .tn-search-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (max-width: 767px) {
  .tn-search-box {
    height: 2.25rem;
    border-radius: 1.5rem;
    padding: 0.25rem 1rem;
    padding-right: 0.75rem;
  }

  .tn-search-box input {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }

  .tn-search-box input {
    width: calc(100% - 1rem);
  }

  .tn-search-icon {
    width: 1rem;
    height: 1rem;
  }
}

/* input date */

.tn-inputBox-input::-webkit-datetime-edit-fields-wrapper {
  opacity: 0;
}

.tn-inputBox-input.active::-webkit-datetime-edit-fields-wrapper,
.tn-inputBox-input:focus::-webkit-datetime-edit-fields-wrapper,
.tn-inputBox-input:focus-visible::-webkit-datetime-edit-fields-wrapper {
  opacity: 1;
}

.tn-esg-pj-description img {
  max-width: 100%;
}

.tn-milestone-section-swiper {
  height: 100%;
}

/* map mb service */
/* .btn-map-rg-mb {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.btn-map-rg-mb-prev {
  left: 0;
}

.btn-map-rg-mb-next {
  right: 0;
} */
.lightbox-image {
  background: #ffffff;
  max-width: 450px !important;
  z-index: 9999;
}

@media (max-width: 767px) {
  .lightbox-image {
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  .lightbox-image {
    max-width: 450px !important;
  }
}

.main-swipe .swiper-wrapper {
  height: auto !important;
}

.tn-contentBox-detail-box * {
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
}