@charset "UTF-8";
/*-------------------------------------------------
title       : 문장웹진 디자인 개편
Author      : ㅈㅁㅈ
Create date : 2026-03-24
-------------------------------------------------*/
@font-face {
  font-family: "StunningSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2410-2@1.0/STUNNING-Bd.woff2") format("woff2");
  font-weight: normal;
  font-display: swap;
}
#contents.contents {
  overflow: hidden;
  margin-bottom: 0;
}

.line_group {
  display: none;
}

#spot {
  padding: 6.4rem 3rem 6.1rem;
  text-align: center;
}
#spot h1 {
  margin-bottom: 1.6rem;
  font-size: 5.6rem;
  color: #151515;
  line-height: 130%;
}
#spot li {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#spot ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  width: calc(100% + 3rem);
  font-size: 2rem;
  color: #999;
  gap: 3.2rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#spot ul::-webkit-scrollbar {
  height: 1px;
}
#spot ul::-webkit-scrollbar-track {
  background-color: #E5E9E9;
}
#spot ul::-webkit-scrollbar-thumb {
  background-color: transparent;
}
#spot ul::-webkit-scrollbar-button {
  display: none;
}
#spot button, #spot a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  height: 4.6rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#spot button::before, #spot a::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #999;
  content: "";
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#spot button:hover::before, #spot button:focus::before, #spot a:hover::before, #spot a:focus::before {
  width: 100%;
}
#spot .active {
  font-weight: 600;
  color: #151515;
}
#spot .active button::before, #spot .active a::before {
  width: 100%;
  background-color: #151515;
}

.section {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.section.container {
  max-width: 160rem;
  width: calc(100% - 6rem);
}
.section .swiper-button {
  display: none;
}
.section ~ .section {
  position: relative;
  padding: 8rem 0;
  border-top: 1px solid #ddd;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.section ~ .section::before {
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  z-index: -1;
  width: 1000%;
  height: calc(100% + 2px);
  background-color: #F6F6F6;
  content: "";
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.section ~ .section h2 {
  margin-bottom: 0;
  font-family: "StunningSans";
  font-size: 5.6rem;
  color: #151515;
}
.section ~ .section:hover, .section ~ .section:hover + .section, .section ~ .section:focus, .section ~ .section:focus + .section {
  border-color: #f6f6f6;
}
.section ~ .section:hover::before, .section ~ .section:focus::before {
  opacity: 1;
}
.section .title_area {
  width: 31%;
  -ms-flex-preferred-size: 31%;
      flex-basis: 31%;
}
.section .title_area strong {
  margin: 1.2rem 0 3.2rem;
  font-size: 2.4rem;
  font-weight: 400;
  color: #555;
}
.section .title_area + .item_list {
  display: grid;
  grid-template-columns: 100%;
  gap: 4rem;
}
.section .title_area + p[style="color:#555"] {
  font-size: 2.8rem;
  color: #aaa !important;
}
.section .title_area .more {
  padding-bottom: 0;
  font-size: 2rem;
}
.section .title_area .more::before {
  height: 0.2rem;
}
.section .item_list {
  width: 69%;
  margin: 0;
  padding: 0;
  -ms-flex-preferred-size: 69%;
      flex-basis: 69%;
}
.section .item_list .thumb, .section .item_list .etc_info, .section .item_list .desc {
  display: none;
}
.section .item_list .txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: static;
  width: 100%;
  gap: 0.75rem;
}
.section .item_list .item {
  padding: 0;
  font-size: 2.8rem;
}
.section .item_list .swiper-wrapper {
  display: grid;
  grid-template-columns: 100%;
  gap: 4rem;
}
.section .item_list .writer {
  display: inline !important;
  margin-bottom: 0;
  font-size: inherit;
  color: #aaa !important;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.section .item_list .writer::before {
  content: " · ";
}
.section .item_list .writer::after {
  position: relative;
  left: -1rem;
  margin-left: 1rem;
  font-family: "remixicon";
  font-weight: 400;
  color: #151515;
  content: "\f5db";
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.section .item_list .title {
  overflow: hidden;
  position: relative;
  z-index: 0;
  max-width: calc(100% - 8rem);
  margin: 0 !important;
  font-size: inherit !important;
  font-weight: 500;
  color: #151515;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
}
.section .item_list .title::before {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background-color: #F9E37C;
  content: "";
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}
.section .item_list .item {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section .item_list .item:hover .writer::after, .section .item_list .item:focus .writer::after {
  left: 0;
  opacity: 1;
}
.section .item_list .item:hover .title, .section .item_list .item:focus .title {
  font-weight: 600;
}
.section .item_list .item:hover .title::before, .section .item_list .item:focus .title::before {
  width: 100%;
}

.section_cover_story {
  min-width: 100%;
  margin: 0;
  padding: 0;
}
.section_cover_story .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  padding: 6rem 3rem;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1.5;
}
.section_cover_story .item .thumb {
  position: static;
  width: 68rem;
  height: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.section_cover_story .item i {
  overflow: hidden;
  position: relative;
  z-index: -1;
}
.section_cover_story .item i, .section_cover_story .item i::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.section_cover_story .item i::before {
  z-index: 1;
  background-color: #000;
  opacity: 0.55;
  content: "";
}
.section_cover_story .item i img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  min-width: 110%;
  max-width: 110%;
  min-height: 100%;
  -webkit-filter: blur(10px);
          filter: blur(10px);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.section_cover_story .item .txt {
  display: block;
  position: static;
  width: 92rem;
  padding-right: 20rem;
  font-family: inherit;
  color: #fff !important;
}
.section_cover_story .item .txt p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  margin: 12rem 0 1.6rem;
  font-size: 2rem;
  font-weight: 300;
  line-height: 170%;
  text-overflow: ellipsis;
}
.section_cover_story .item .txt .title {
  width: 17.5rem;
  margin-left: 0;
  font-size: 10rem;
  font-weight: 900;
  word-break: break-all;
  line-height: 110%;
  color: transparent !important;
  -webkit-text-stroke: 1.5px #fff;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.section_cover_story .item .txt a {
  display: block;
}
.section_cover_story .item .txt a:hover > span::before, .section_cover_story .item .txt a:focus > span::before {
  width: 6rem;
}
.section_cover_story .item .txt a > span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  font-size: 2.4rem;
  font-weight: 600;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.2rem;
  align-items: center;
}
.section_cover_story .item .txt a > span::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.2rem;
  background-color: #fff;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.section_cover_story .item .txt a > span::after {
  font-family: "remixicon";
  font-weight: 400;
  content: "\ea6c";
  text-decoration: none;
}
.section_cover_story .item .txt h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-column-gap: 3rem;
     -moz-column-gap: 3rem;
          column-gap: 3rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.section_cover_story .item .txt h2 > span {
  width: calc(100% - 23.6rem);
  padding-bottom: 0.8rem;
}
.section_cover_story .item .txt h2 > span strong, .section_cover_story .item .txt h2 > span span {
  display: block;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.section_cover_story .item .txt h2 > span small {
  display: block;
  margin-top: 1.2rem;
  font-size: 2.4rem;
  font-weight: 400;
}
.section_cover_story .cover_title {
  width: calc(100% - 6rem);
  max-width: 160rem;
  margin: 4rem auto;
}
.section_cover_story .cover_title .magazine_view button {
  padding-bottom: 0;
  border-bottom-width: 0.2rem;
}

.section_poem {
  border-top: 0 none !important;
}
.section_poem .item_list .swiper-wrapper {
  grid-template-columns: repeat(2, 50%);
}

.section .section_partg .item_list {
  width: 100%;
}

.section_plan .item_list .item {
  display: block !important;
}
.section_plan .item_list .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  color: #7B6472;
  text-overflow: ellipsis;
}

/* 모색: 기획과 동일 .desc (전역 .item_list .desc 숨김만 section_partg에서 해제) */
.section_partg .item_list .item {
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
  -webkit-box-align: stretch !important;
      -ms-flex-align: stretch !important;
          align-items: stretch !important;
}
.section_partg .item_list .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  margin-top: 1.2rem;
  font-size: 1.6rem;
  color: #7B6472;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
}

[class*=sub01] .breadcrumbs {
  left: auto;
  right: 6.4rem;
  top: 2rem;
  padding: 0 !important;
  font-size: 1.6rem;
  font-weight: 300;
  color: #fff !important;
  -webkit-transform: none;
          transform: none;
}
[class*=sub01] .breadcrumbs > * {
  opacity: 1;
}
[class*=sub01] .breadcrumbs > .ri-arrow-right-s-line {
  opacity: 0.7;
}
[class*=sub01] .breadcrumbs a i {
  position: relative;
  top: -0.2rem;
}
[class*=sub01] .view_section .custom_visual {
  position: relative;
}
[class*=sub01] .view_section .custom_visual::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  content: "";
  backdrop-filter: blur(10px);
}
[class*=sub01] .view_section .custom_visual .container {
  min-height: 38rem;
  color: #fff;
}
[class*=sub01] .view_section .custom_visual .etc_info {
  font-weight: 300;
}
[class*=sub01] .view_section .custom_visual .etc_info i {
  opacity: 0.6;
}
[class*=sub01] .view_section .custom_visual .etc_info li::before {
  display: none !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_cont {
  max-width: 100rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area {
  margin-bottom: 0;
  padding-top: 0;
  border-bottom: 0 none;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area::after {
  display: none;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .page_breaking table {
  width: 100% !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .author_info .thumb {
  overflow: hidden;
  margin-right: 2rem;
  border-radius: 100%;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .author_info .thumb span {
  max-width: 100%;
  max-height: 100%;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 {
  margin-bottom: 6.4rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info {
  max-width: 100rem;
  margin: 0 auto;
  padding: 3rem 0;
  border: 0 none;
  border-bottom: 1px solid #ddd;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .desc {
  display: none;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .thumb {
  width: 8rem;
  height: 8rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt {
  min-width: calc(100% - 10rem);
  margin-bottom: 0;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a {
  display: block;
  position: relative;
  z-index: 0;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 50%;
  height: 4.8rem;
  color: #7B6472;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::before {
  right: 8.4rem;
  z-index: 1;
  font-family: "remixicon";
  font-size: 2rem;
  content: "\f049";
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::after {
  right: 0;
  width: 12.5rem;
  height: 4.8rem;
  padding-left: 4.3rem;
  border-radius: 0.4rem;
  border: 1px solid #7B6472;
  font-weight: 500;
  content: "작가정보";
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a:hover::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a:hover::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a:focus::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a:focus::after {
  color: #fff;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a:hover::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a:focus::after {
  background-color: #7B6472;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .name {
  margin-bottom: 0;
  font-size: 2.2rem;
  font-weight: 600;
  color: #111;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .name > * {
  font-size: inherit !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area blockquote.annotation {
  margin: 6.4rem 0 0;
  padding: 4rem !important;
  background-color: #F8F8F8;
  font-family: "Pretendard";
  font-size: 1.8rem !important;
  color: #666;
  line-height: 170%;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area blockquote.annotation::before {
  display: none;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area blockquote.annotation * {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 100rem;
  margin: 6.4rem auto 0;
  gap: 0.6rem;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .tags .item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 4.2rem;
  padding: 0 1.4rem;
  border: 0.2rem solid #111;
  font-weight: 1.8rem;
  font-weight: 600;
  color: #111;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info {
  margin-top: 4rem;
  padding: 2.5rem 4rem;
  max-width: 100rem;
  border-radius: 0;
  border: 0 none;
  background-color: #DFFD50;
  color: #111;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .desc {
  padding-right: 5rem;
  background: none !important;
  font-size: 1.8rem !important;
  color: inherit !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .thumb {
  width: 9rem;
  height: 9rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .name {
  margin-bottom: 0.4rem;
  font-size: 2.2rem;
  font-weight: 700;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .name > * {
  background: none !important;
  font-size: inherit !important;
  color: inherit !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .txt {
  min-width: calc(100% - 11rem);
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .txt a {
  position: relative;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .txt a::after {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-family: "remixicon";
  font-size: 3rem;
  font-weight: 300;
  content: "\f4b1";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .txt a:hover::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .txt a:focus::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(62, 62, 62);"] .writer1 .author_info .thumb, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(86, 86, 86)"] .writer1 .author_info .thumb, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(44, 97, 51)"] .writer1 .author_info .thumb {
  background-color: #fff !important;
  color: #000 !important;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(62, 62, 62);"] .writer1 .author_info .txt a::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(86, 86, 86)"] .writer1 .author_info .txt a::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(44, 97, 51)"] .writer1 .author_info .txt a::before {
  color: #fff;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(62, 62, 62);"] .writer1 .author_info .txt a::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(86, 86, 86)"] .writer1 .author_info .txt a::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(44, 97, 51)"] .writer1 .author_info .txt a::after {
  border-color: #fff;
  color: #fff;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(62, 62, 62);"] .tags .item, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(86, 86, 86)"] .tags .item, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area[style*="background: rgb(44, 97, 51)"] .tags .item {
  border-color: #fff;
  color: #fff;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area {
  margin-top: 6.4rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area .btn.btn-lg.type2 {
  min-width: 10.7rem;
  min-height: 6.4rem;
  border-radius: 0;
  background-color: #222;
  font-size: 1.8rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area {
  margin-top: 12rem;
  padding: 0;
  background: none;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .container {
  max-width: 142rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .cont {
  height: 8.7rem;
  color: #555;
  -webkit-line-clamp: 3;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item {
  overflow: visible;
  z-index: 0;
  padding-bottom: 15rem;
  border-radius: 0;
  border: 1px solid #ddd !important;
  background-color: #F6F6F8;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item::before {
  position: absolute;
  left: -1px;
  top: -1px;
  z-index: -1;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0.2rem solid #222;
  background-color: #fff;
  opacity: 0;
  content: "";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item .title {
  position: relative;
  margin: 0 0 1.2rem;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item .title::after {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 2rem;
  font-family: "remixicon";
  font-weight: 400;
  content: "\ea6c";
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item:hover::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item:hover .title::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item:focus::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item:focus .title::after {
  opacity: 1;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item:hover .title::after, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item:focus .title::after {
  margin-right: 0;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .path {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 2.4rem;
  font-size: 1.6rem;
  color: #555;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .path span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .path span + span::before {
  position: relative;
  top: -0.1rem;
  margin: 0 0.5rem;
  font-size: 1.8rem;
  content: ">";
  opacity: 0.7;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .path span:last-child {
  font-weight: 500;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  right: 4rem;
  font-size: 1.6rem;
  color: rgba(85, 85, 85, 0.8);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .info li ~ li::before, [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .info i {
  display: none;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .info .writer {
  margin-right: auto;
  font-weight: 600;
  color: #333;
}
[class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .info .writer::before {
  margin-right: 0.2rem;
  font-family: "remixicon";
  font-weight: 400;
  content: "\f049";
}
[class*=sub01] .view_section .custom_visual + .view_cont .comment_area {
  max-width: 100rem;
  margin-top: 12rem;
}

.dark-theme #spot h1, .dark-theme #spot .active {
  color: #fff;
}
.dark-theme #spot .active button::before, .dark-theme #spot .active a::before {
  background-color: #fff;
}
.dark-theme .section ~ .section {
  border-top-color: #333 !important;
}
.dark-theme .section ~ .section h2 {
  color: #fff;
}
.dark-theme .section ~ .section::before {
  background-color: #333;
}
.dark-theme .section .title_area strong {
  color: #999;
}
.dark-theme .section .title_area .more::before {
  background-color: #fff;
}
.dark-theme .section .item_list .title, .dark-theme .section .item_list .writer::after {
  color: #fff;
}
.dark-theme .section .item_list a:hover .title, .dark-theme .section .item_list a:focus .title {
  color: #151515;
}

@media (max-width: 1439.98px) {
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .container, [class*=sub01] .view_section .custom_visual + .view_cont .comment_area {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}
@media (max-width: 1024.98px) {
  .section_poem .item_list .swiper-wrapper {
    grid-template-columns: 100%;
  }
  .section .title_area {
    position: relative;
    min-width: 100%;
  }
  .section .title_area strong {
    display: none;
  }
  .section .title_area .more {
    position: absolute;
    right: 0;
    top: 0;
  }
  .section ~ .section h2 {
    font-size: 5rem;
  }
  .section .item_list .swiper-wrapper, .section .title_area + .item_list {
    gap: 1.5rem;
  }
  .section .item_list {
    width: 100%;
  }
  .section .item_list .item {
    font-size: 2.5rem;
  }
  .section_cover_story .item .txt {
    padding-right: 5rem;
  }
  .section_cover_story .item .txt h2 {
    -webkit-column-gap: 1rem;
       -moz-column-gap: 1rem;
            column-gap: 1rem;
  }
  [class*=sub01] .breadcrumbs {
    right: 0;
  }
  [class*=sub01] .view_section .custom_visual .container {
    min-height: 28rem;
    padding-top: 3rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area {
    padding: 0 3rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::before {
    right: 9.2rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::after {
    padding-left: 3.7rem;
  }
}
@media (max-width: 767px) {
  .section .item_list .title::before, .section ~ .section::before {
    display: none;
  }
  .section_cover_story .item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
  .section_cover_story .item .thumb {
    width: 100%;
  }
  .section_cover_story .item .txt {
    width: 100%;
    margin-bottom: 3.2rem;
    padding-right: 0;
  }
  .section_cover_story .item .txt p {
    margin-top: 3.5rem;
  }
  .section_cover_story .cover_title .magazine_view {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .thumb {
    margin-bottom: 0;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .name {
    text-align: left;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::before {
    right: 7rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer1 .author_info .txt a::after {
    width: 10rem;
    padding-left: 3.5rem;
    font-size: 1.6rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area blockquote.annotation {
    padding: 2.4rem !important;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .desc {
    padding-right: 0;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .thumb {
    margin: 0 0 1.6rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area .writer2 .author_info .txt a::after {
    display: block;
    position: static;
    margin-top: 2.8rem;
    text-align: center;
    -webkit-transform: none;
            transform: none;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .item {
    margin-bottom: 2rem;
    padding: 2.4rem 2.4rem 10.9rem;
  }
  [class*=sub01] .view_section .custom_visual + .view_cont .detail_area ~ .btn_area + .relate_area .info {
    left: 2.4rem;
    bottom: 2.4rem;
    right: 2.4rem;
  }
}
@media (max-width: 473px) {
  #spot ul {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
  }
  .section_cover_story .item .txt .title {
    width: 14rem;
    font-size: 7rem;
    -webkit-text-stroke: 1px #fff;
  }
}