.p-story__head p {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 72px;
  line-height: 3.6rem;
}

.p-story__main {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
@media (max-width: 767px) {
  .p-story__main {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.p-story__main .p-story__example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  width: 780px;
  gap: 30px;
}
@media (max-width: 1100px) {
  .p-story__main .p-story__example {
    width: 65%;
  }
}
@media (max-width: 767px) {
  .p-story__main .p-story__example {
    width: 100%;
    margin: 0 auto;
    gap: 10px;
  }
}
.p-story__main .p-story__example__list {
  position: relative;
  width: 240px;
  margin-bottom: 54px;
}
.p-story__main .p-story__example__list:hover .thumb {
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}
@media (max-width: 767px) {
  .p-story__main .p-story__example__list {
    margin-left: auto;
    margin-right: auto;
  }
}
.p-story__main .p-story__example__list .thumb {
  width: 100%;
  height: auto;
  padding-top: 140%;
  margin-bottom: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transition: -webkit-transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), -webkit-transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 767px) {
  .p-story__main .p-story__example__list .thumb {
    width: 100%;
    margin-bottom: 18px;
  }
}
.p-story__main .p-story__example__list .thumb a {
  display: block;
}
.p-story__main .p-story__example__list .anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.p-story__main .p-story__example__list a:hover {
  opacity: 0.6;
  -webkit-transition: 0.8s all;
  transition: 0.8s all;
}
.p-story__main .p-story__example__list .title {
  font-size: 1.8rem;
  color: #222222;
}
.p-story__main .p-story__example__list .tag {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  font-size: 1.3rem;
  color: #808080;
}
.p-story__main .p-story__search {
  background-color: #F5F5F5;
  width: 260px;
  padding-top: 60px;
  padding-bottom: 69px;
}
@media (max-width: 1100px) {
  .p-story__main .p-story__search {
    width: 30%;
  }
}
@media (max-width: 767px) {
  .p-story__main .p-story__search {
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__tool {
    width: 80%;
    margin: 0 auto;
  }
}
.p-story__main .p-story__search__tool div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 56px;
}
.p-story__main .p-story__search__tool div input {
  background-color: #fff;
  font-size: 1.4rem;
  height: 31px;
  padding-left: 14px;
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__tool div input {
    width: 100%;
  }
}
.p-story__main .p-story__search__tool div button {
  background-color: #213B16;
  width: 31px;
  height: 31px;
}
.p-story__main .p-story__search__tool div button img {
  display: block;
  margin: auto;
}
.p-story__main .p-story__search__recent {
  margin-bottom: 48px;
  width: 230.5px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__recent {
    width: 80%;
  }
}
.p-story__main .p-story__search__recent__h3 {
  font-size: 1.6rem;
  color: #222222;
  border-bottom: 1px solid #707070;
  padding-bottom: 14.5px;
  margin-bottom: 32.5px;
}
.p-story__main .p-story__search__recent__ul li {
  font-size: 1.4rem;
  color: #222222;
  line-height: 3.2rem;
}
.p-story__main .p-story__search__recent__ul li a {
  position: relative;
}
.p-story__main .p-story__search__recent__ul li a::after {
  position: absolute;
  bottom: -2px;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  background: #222222;
  -webkit-transform: scale(0, 1);
          transform: scale(0, 1);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}
.p-story__main .p-story__search__recent__ul li a:hover::after {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
}
.p-story__main .p-story__search__tag {
  width: 100%;
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__tag {
    width: 80%;
    margin: 0 auto;
  }
}
.p-story__main .p-story__search__tag__h3 {
  font-size: 1.6rem;
  color: #222222;
  border-bottom: 1px solid #707070;
  padding-bottom: 14.5px;
  margin-bottom: 32.5px;
  width: 230.5px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__tag__h3 {
    width: 100%;
  }
}
.p-story__main .p-story__search__tag__ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 14.8px;
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__tag__ul {
    padding-left: 0;
  }
}
.p-story__main .p-story__search__tag__ul a {
  font-size: 1.4rem !important;
  color: #F5F5F5;
  background-color: #213B16;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 6px 13px;
}
@media (max-width: 767px) {
  .p-story__main .p-story__search__tag__ul a {
    font-size: 1.2rem !important;
    padding: 6px 10px;
  }
}
.p-story__main .p-story__search__tag__ul a:hover {
  opacity: 0.6;
}