.blogs {
  margin-top: 6.25vw; }
  @media screen and (max-width: 960px) {
    .blogs {
      margin-top: 16vw; } }

.blog-list {
  display: grid;
  gap: 1.0416666667vw;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 1.8055555556vw; }
  @media screen and (max-width: 960px) {
    .blog-list {
      display: block;
      padding: 0 1.6vw; } }

.blog-item {
  width: auto;
  box-sizing: border-box; }
  @media screen and (max-width: 960px) {
    .blog-item {
      width: 100%;
      padding: 0;
      margin-bottom: 4.2666666667vw; }
      .blog-item:last-child {
        margin-bottom: 0; } }
  .blog-item .blog-item-inner {
    text-decoration: none;
    border-radius: 1.3888888889vw;
    overflow: hidden;
    background: rgba(40, 142, 126, 0.1);
    display: flex;
    flex-direction: column;
    padding: 1.1805555556vw 1.1805555556vw 1.6666666667vw;
    position: relative;
    height: 100%;
    box-sizing: border-box; }
    @media screen and (max-width: 960px) {
      .blog-item .blog-item-inner {
        border-radius: 6.4vw;
        padding: 4.8vw 3.2vw 3.2vw; } }
    @media screen and (min-width: 960px) {
      .blog-item .blog-item-inner:hover .img-wrap img {
        opacity: 1;
        mix-blend-mode: normal;
        filter: grayscale(0); }
      .blog-item .blog-item-inner:hover .button {
        background-color: #045a4b;
        color: #fff; } }
  @media screen and (min-width: 960px) and (min-width: 960px) {
    .blog-item .blog-item-inner:hover .button:hover {
      color: rgba(255, 255, 255, 0.7);
      background-color: #025043; } }

    .blog-item .blog-item-inner .name {
      font-size: 1.5277777778vw;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.14;
      letter-spacing: normal;
      text-align: left;
      color: #025e4e;
      margin-bottom: 1.25vw;
      min-height: 3.1944444444vw;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
      @media screen and (max-width: 960px) {
        .blog-item .blog-item-inner .name {
          font-size: 5.3333333333vw;
          margin-bottom: 3.7333333333vw;
          min-height: 12.2666666667vw;
          line-height: 1.33; } }
    .blog-item .blog-item-inner .desc {
      font-size: 0.9722222222vw;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: 1.29;
      letter-spacing: normal;
      text-align: left;
      color: #025e4e;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; }
      @media screen and (max-width: 960px) {
        .blog-item .blog-item-inner .desc {
          font-size: 3.7333333333vw; } }
    .blog-item .blog-item-inner .img-wrap {
      border-radius: 1.25vw;
      margin-bottom: 1.3888888889vw;
      overflow: hidden;
      background-color: #cee4df; }
      @media screen and (max-width: 960px) {
        .blog-item .blog-item-inner .img-wrap {
          border-radius: 4.8vw;
          margin-bottom: 5.3333333333vw; } }
      .blog-item .blog-item-inner .img-wrap img {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0.5;
        mix-blend-mode: multiply;
        border-radius: 1.25vw;
        transition: .2s ease-in-out opacity, .2s ease-in-out filter;
        filter: grayscale(100); }
        @media screen and (max-width: 960px) {
          .blog-item .blog-item-inner .img-wrap img {
            border-radius: 1.25vw; } }

.blog-header .blog-header-inner {
  height: 38.1944444444vw; }
  @media screen and (max-width: 960px) {
    .blog-header .blog-header-inner {
      height: 138.6666666667vw; } }

.what-header .what-header-inner .data-wrap h1.title.title-blog {
  width: 70.8333333333vw; }
  @media screen and (max-width: 960px) {
    .what-header .what-header-inner .data-wrap h1.title.title-blog {
      padding: 0 4.2666666667vw;
      width: 100%; } }

@media screen and (max-width: 960px) {
  .campaign-text .campaign-text-block {
    margin-top: 8.5333333333vw !important; } }
@media screen and (max-width: 960px) {
  .campaign-text .campaign-text-block .left {
    margin-bottom: 8.5333333333vw !important; } }

.share-buttons {
  display: flex;
  align-items: center;
  gap: 1.1111111111vw; }
  @media screen and (max-width: 960px) {
    .share-buttons {
      gap: 4.2666666667vw; } }
  .share-buttons .share-label {
    font-size: 0.9722222222vw;
    opacity: 0.8;
    margin-right: 0.2777777778vw; }
    @media screen and (max-width: 960px) {
      .share-buttons .share-label {
        font-size: 4.2666666667vw; } }
  .share-buttons .share-btn {
    transition: .2s ease-in-out opacity; }
    @media screen and (min-width: 960px) {
      .share-buttons .share-btn:hover {
        opacity: 0.7; } }
    .share-buttons .share-btn svg {
      width: 1.3888888889vw;
      height: 1.3888888889vw; }
      @media screen and (max-width: 960px) {
        .share-buttons .share-btn svg {
          width: 8.5333333333vw;
          height: 8.5333333333vw; } }

.blog-content {
  padding: 60px 0;
  background: #f8f9fa; }

.blog-meta {
  margin-top: 1.8055555556vw; }
  @media screen and (max-width: 960px) {
    .blog-meta {
      margin-top: 8.5333333333vw; } }

.blog-detail-banner {
  padding: 40px 0; }
  .blog-detail-banner img {
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15); }

.blog-detail-content {
  padding: 60px 0;
  background: #f8f9fa; }
  .blog-detail-content .blog-detail-body {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    line-height: 1.8;
    font-size: 1.1rem; }
    .blog-detail-content .blog-detail-body h1, .blog-detail-content .blog-detail-body h2, .blog-detail-content .blog-detail-body h3, .blog-detail-content .blog-detail-body h4, .blog-detail-content .blog-detail-body h5, .blog-detail-content .blog-detail-body h6 {
      color: #025E4E;
      margin-top: 2rem;
      margin-bottom: 1rem; }
    .blog-detail-content .blog-detail-body p {
      margin-bottom: 1.5rem; }
    .blog-detail-content .blog-detail-body img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin: 2rem 0; }
    .blog-detail-content .blog-detail-body blockquote {
      border-left: 4px solid #025E4E;
      padding-left: 20px;
      margin: 2rem 0;
      font-style: italic;
      color: #666; }
  .blog-detail-content .blog-sidebar .blog-sidebar-section {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px; }
    .blog-detail-content .blog-sidebar .blog-sidebar-section h3 {
      color: #025E4E;
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 20px;
      padding-bottom: 12px;
      border-bottom: 2px solid #f0f0f0; }
    .blog-detail-content .blog-sidebar .blog-sidebar-section .blog-sidebar-item {
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #f0f0f0; }
      .blog-detail-content .blog-sidebar .blog-sidebar-section .blog-sidebar-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none; }
      .blog-detail-content .blog-sidebar .blog-sidebar-section .blog-sidebar-item h4 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 8px;
        line-height: 1.4; }
        .blog-detail-content .blog-sidebar .blog-sidebar-section .blog-sidebar-item h4 a {
          color: #333;
          text-decoration: none;
          transition: color 0.3s ease; }
          .blog-detail-content .blog-sidebar .blog-sidebar-section .blog-sidebar-item h4 a:hover {
            color: #025E4E; }
      .blog-detail-content .blog-sidebar .blog-sidebar-section .blog-sidebar-item .blog-sidebar-date {
        color: #999;
        font-size: 0.875rem; }

.blog-category-filter {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 20px;
  background: white;
  color: #025E4E;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-right: 8px;
  margin-bottom: 8px;
  display: inline-block; }

.blog-category-filter:hover,
.blog-category-filter.active {
  background: #025E4E;
  color: white; }

.share-button {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #025E4E;
  color: white;
  text-align: center;
  line-height: 40px;
  margin-right: 8px;
  text-decoration: none;
  transition: all 0.3s ease; }

.share-button:hover {
  background: #921D2A;
  transform: translateY(-2px); }

.recent-article {
  font-size: 2.7777777778vw;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #025e4e;
  margin-bottom: 2.2222222222vw;
  padding: 0 1.8055555556vw; }
  @media screen and (max-width: 960px) {
    .recent-article {
      font-size: 10.1333333333vw;
      margin-bottom: 9.8666666667vw;
      padding: 0 1.6vw; } }

.text-markup h2, .text-markup h3, .text-markup h4, .text-markup h5 {
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  color: #025e4e; }
.text-markup h2 {
  font-size: 2.9166666667vw;
  margin-bottom: 3.4722222222vw; }
  @media screen and (max-width: 960px) {
    .text-markup h2 {
      font-size: 9.0666666667vw;
      margin-bottom: 8.5333333333vw; } }
.text-markup h3 {
  font-size: 2.3611111111vw;
  margin-bottom: 2.2222222222vw; }
  @media screen and (max-width: 960px) {
    .text-markup h3 {
      font-size: 7.4666666667vw;
      margin-bottom: 7.4666666667vw; } }
.text-markup h4 {
  font-size: 1.8055555556vw;
  margin-bottom: 1.6666666667vw; }
  @media screen and (max-width: 960px) {
    .text-markup h4 {
      font-size: 7.4666666667vw;
      margin-bottom: 5.8666666667vw; } }
.text-markup h5 {
  font-size: 1.5277777778vw;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.09;
  letter-spacing: normal;
  text-align: left;
  color: #025e4e; }
  @media screen and (max-width: 960px) {
    .text-markup h5 {
      font-size: 5.8666666667vw; } }

span[style*="background-color: rgb(252, 198, 198)"],
span[style*="background-color: rgb(215, 94, 108)"],
span[style*="background-color: #fcc6c6"],
span[style*="background-color: rgb(40, 142, 126)"],
span[style*="background-color: #288E7E"] {
  border-radius: 0.4166666667vw;
  padding: 0.1388888889vw 0.2777777778vw; }
  @media screen and (max-width: 960px) {
    span[style*="background-color: rgb(252, 198, 198)"],
    span[style*="background-color: rgb(215, 94, 108)"],
    span[style*="background-color: #fcc6c6"],
    span[style*="background-color: rgb(40, 142, 126)"],
    span[style*="background-color: #288E7E"] {
      border-radius: 2.1333333333vw;
      padding: 1.0666666667vw 1.6vw; } }

/*# sourceMappingURL=blog.min.css.map */