@charset "UTF-8";
.main_inner {
  max-width: unset;
  margin-right: unset;
  margin-left: unset;
  padding-right: 0;
  padding-left: 0;
}

.archive-style .hide {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  width: 1px;
  height: 1px;
}
.archive-style .top-visual {
  width: 100%;
  z-index: 10;
  position: relative;
}
.archive-style .top-visual .visual-img {
  display: none;
}
.archive-style .top-visual .visual-logo {
  display: none;
}
.archive-style .top-visual .video-area video {
  width: 100%;
  height: 604px;
  vertical-align: top;
  object-fit: cover;
}
.archive-style .layout-content {
  position: relative;
  z-index: 11;
  background: #fff;
  padding: 48px 16px 0;
  max-width: 1226px;
  margin-right: auto;
  margin-left: auto;
}
.archive-style .layout-content .text-area {
  padding-bottom: 24px;
}
.archive-style .layout-content .text-area p {
  margin-bottom: 24px;
  color: #222;
  font-size: 15px;
  font-weight: 400;
  line-height: 186%;
  letter-spacing: -0.6px;
}
.archive-style .layout-content .text-area p:last-of-type {
  margin-bottom: 0;
}
.archive-style .layout-content .text-area p:nth-of-type(1) ~ p {
  display: none;
}
.archive-style .layout-content .text-area .btn-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  margin: 24px auto 0;
  border: 1px solid #ccc;
  border-radius: 24px;
}
.archive-style .layout-content .text-area .btn-toggle:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.916 7.05339L10.416 13.7201C10.1792 13.9304 9.82271 13.9304 9.58594 13.7201L2.08594 7.05339L2.91602 6.11914L10.001 12.4163L17.0859 6.11914L17.916 7.05339Z' fill='%23222222'/%3E%3C/svg%3E%0A") no-repeat;
}
.archive-style .layout-content .text-area .btn-toggle.on:after {
  transform: rotate(180deg);
}
.archive-style .layout-content .text-area.on p:nth-of-type(1) ~ p {
  display: block;
}
.archive-style .layout-content .list-area {
  padding-top: 48px;
}
.archive-style .layout-content .list-area .list-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.archive-style .layout-content .list-area .list-header strong {
  color: #222;
  font-family: UniqloPro Regular, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 133%;
}
.archive-style .layout-content .list-area .list-header .sort-button {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.archive-style .layout-content .list-area .list-header .sort-button button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}
.archive-style .layout-content .list-area .list-header .sort-button button:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
}
.archive-style .layout-content .list-area .list-header .sort-button button.btn-column:before {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.75C19.5 4.61193 19.3881 4.5 19.25 4.5H4.75C4.61193 4.5 4.5 4.61193 4.5 4.75V19.25C4.5 19.3881 4.61193 19.5 4.75 19.5H19.25C19.3881 19.5 19.5 19.3881 19.5 19.25V4.75ZM21 19.25C21 20.2165 20.2165 21 19.25 21H4.75C3.7835 21 3 20.2165 3 19.25V4.75C3 3.7835 3.7835 3 4.75 3H19.25C20.2165 3 21 3.7835 21 4.75V19.25Z' fill='%23A8A8A8'/%3E%3C/svg%3E%0A") no-repeat center;
}
.archive-style .layout-content .list-area .list-header .sort-button button.btn-row:before {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.75C19.5 4.61193 19.3881 4.5 19.25 4.5H12.75V19.5H19.25C19.3881 19.5 19.5 19.3881 19.5 19.25V4.75ZM4.5 19.25C4.5 19.3881 4.61193 19.5 4.75 19.5H11.25V4.5H4.75C4.61193 4.5 4.5 4.61193 4.5 4.75V19.25ZM21 19.25C21 20.2165 20.2165 21 19.25 21H4.75C3.7835 21 3 20.2165 3 19.25V4.75C3 3.7835 3.7835 3 4.75 3H19.25C20.2165 3 21 3.7835 21 4.75V19.25Z' fill='%23A8A8A8'/%3E%3C/svg%3E%0A") no-repeat center;
}
.archive-style .layout-content .list-area .list-header .sort-button button.on.btn-column:before {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.75C19.5 4.61193 19.3881 4.5 19.25 4.5H4.75C4.61193 4.5 4.5 4.61193 4.5 4.75V19.25C4.5 19.3881 4.61193 19.5 4.75 19.5H19.25C19.3881 19.5 19.5 19.3881 19.5 19.25V4.75ZM21 19.25C21 20.2165 20.2165 21 19.25 21H4.75C3.7835 21 3 20.2165 3 19.25V4.75C3 3.7835 3.7835 3 4.75 3H19.25C20.2165 3 21 3.7835 21 4.75V19.25Z' fill='%23000000'/%3E%3C/svg%3E%0A") no-repeat center;
}
.archive-style .layout-content .list-area .list-header .sort-button button.on.btn-row:before {
  background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.75C19.5 4.61193 19.3881 4.5 19.25 4.5H12.75V19.5H19.25C19.3881 19.5 19.5 19.3881 19.5 19.25V4.75ZM4.5 19.25C4.5 19.3881 4.61193 19.5 4.75 19.5H11.25V4.5H4.75C4.61193 4.5 4.5 4.61193 4.5 4.75V19.25ZM21 19.25C21 20.2165 20.2165 21 19.25 21H4.75C3.7835 21 3 20.2165 3 19.25V4.75C3 3.7835 3.7835 3 4.75 3H19.25C20.2165 3 21 3.7835 21 4.75V19.25Z' fill='%23000000'/%3E%3C/svg%3E%0A") no-repeat center;
}
.archive-style .layout-content .list-area .contents-list {
  margin: 0 -16px;
  display: grid;
}
.archive-style .layout-content .list-area .contents-list .list-item a {
  display: block;
}
.archive-style .layout-content .list-area .contents-list .list-item a .img-area img {
  width: 100%;
}
.archive-style .layout-content .list-area .contents-list .list-item a .text-area {
  padding: 16px 16px 0;
}
.archive-style .layout-content .list-area .contents-list .list-item a .text-area strong {
  display: block;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #222;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.64px;
}
.archive-style .layout-content .list-area .contents-list .list-item a .text-area strong:after {
  content: "";
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3358 2.16602C13.3667 2.16602 13.397 2.1691 13.4263 2.17448C13.4278 2.17476 13.4294 2.17484 13.4309 2.17513C13.4561 2.17999 13.4801 2.18813 13.5038 2.19661C13.5102 2.19891 13.517 2.19991 13.5233 2.20247C13.5615 2.21795 13.5966 2.23905 13.6294 2.26302C13.6454 2.27477 13.6609 2.28754 13.6757 2.30143C13.6845 2.30962 13.6929 2.31802 13.7011 2.32682C13.7142 2.34103 13.7263 2.35581 13.7375 2.37109C13.7984 2.45394 13.8358 2.55531 13.8358 2.66602C13.8358 2.67454 13.8349 2.68299 13.8345 2.69141V12.5462C13.8345 12.8223 13.6106 13.0461 13.3345 13.0462C13.0584 13.0462 12.8345 12.8224 12.8345 12.5462V3.8724L3.02137 13.6862C2.82612 13.8813 2.50956 13.8813 2.31434 13.6862C2.11913 13.491 2.11923 13.1744 2.31434 12.9792L12.1275 3.16602H3.45953C3.18338 3.16602 2.95953 2.94216 2.95953 2.66602C2.95953 2.38987 3.18338 2.16602 3.45953 2.16602H13.3358Z' fill='%23222222'/%3E%3C/svg%3E%0A") no-repeat;
}
.archive-style .layout-content .list-area .contents-list .list-item a .text-area p {
  color: #222;
  font-size: 14px;
  font-weight: 400;
  line-height: 142%;
  letter-spacing: -0.56px;
}
.archive-style .layout-content .list-area .contents-list.column {
  gap: 32px;
  grid-template-columns: 1fr;
}
.archive-style .layout-content .list-area .contents-list.row {
  gap: 32px 0;
  grid-template-columns: 1fr 1fr;
}
.archive-style .layout-content .list-area .contents-list.row .list-item a .text-area strong:after {
  display: none;
}

@media (min-width: 769px) {
  .archive-style .top-visual {
    position: relative;
    height: 774px;
  }
  .archive-style .top-visual .visual-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 11;
    max-width: 1226px;
    padding: 0 40px;
    margin-right: auto;
    margin-left: auto;
    height: 100%;
  }
  .archive-style .top-visual .visual-img {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  .archive-style .top-visual .visual-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .archive-style .top-visual .visual-logo {
    display: block;
  }
  .archive-style .top-visual .video-area {
    width: 401px;
    height: 646px;
  }
  .archive-style .top-visual .text-area {
    display: none;
  }
  .archive-style .layout-content > .text-area {
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 48px;
  }
  .archive-style .layout-content > .text-area p {
    font-size: 16px;
    line-height: 175%;
    letter-spacing: -0.64px;
  }
  .archive-style .layout-content > .text-area p:nth-of-type(1) ~ p {
    display: block;
  }
  .archive-style .layout-content > .text-area p:nth-of-type(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .archive-style .layout-content > .text-area .btn-toggle {
    display: none;
  }
  .archive-style .layout-content .list-area {
    max-width: 906px;
    margin: 0 auto;
  }
  .archive-style .layout-content .list-area .list-header {
    justify-content: center;
    margin-bottom: 24px;
  }
  .archive-style .layout-content .list-area .list-header strong {
    font-size: 32px;
    line-height: 150%;
  }
  .archive-style .layout-content .list-area .list-header .sort-button {
    display: none;
  }
  .archive-style .layout-content .list-area .contents-list {
    grid-template-columns: 1fr 1fr;
    gap: 48px 24px;
    margin-left: 0;
    margin-right: 0;
  }
  .archive-style .layout-content .list-area .contents-list .list-item a .text-area strong {
    font-size: 18px;
    line-height: 155%;
    letter-spacing: -0.9px;
  }
  .archive-style .layout-content .list-area .contents-list .list-item a .text-area p {
    font-size: 16px;
    line-height: 150%;
    letter-spacing: -0.64px;
  }
  .archive-style .layout-content .list-area .contents-list.column, .archive-style .layout-content .list-area .contents-list.row {
    grid-template-columns: 1fr 1fr;
    gap: 48px 24px;
  }
}
/* 기존소스들 */
.w-100 {
  width: 100%;
}

#sect_final small {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1b1b1b;
  word-break: keep-all;
  padding: 20px 0 2px;
  width: fit-content;
  text-align: center;
  margin: 0 auto;
  border-bottom: 1px solid #636363;
}

#sect_final {
  margin-top: 48px;
}

#sect_final h3 {
  margin-bottom: 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.related-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 32px;
  column-gap: 2%;
  justify-content: center;
}

.related {
  flex: 1;
}

.related strong {
  display: block;
  margin: 16px 0 4px 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 150%;
  /* 21px */
  text-transform: uppercase;
}

related.related-2 .img-wrap {
  height: 86px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.related.related-2 .img-wrap img {
  height: 100%;
  width: 100%;
  display: block;
  object-fit: cover;
}

.related.related-7 .img-wrap {
  height: 156px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.related.related-7 .img-wrap .ut-img-wrap {
  position: relative;
}

.related.related-7 .img-wrap .ut_icon_wrp {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 10px;
}

.related.related-7 .img-wrap .ut_icon_wrp img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#sect10 {
  padding: 60px 0px;
  text-align: center;
}

#sect10 h3 {
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 800;
}

#sect10 h3.market-title {
  font-size: 22px;
  margin-bottom: 5px;
}

.market-img-wrap {
  display: inline-block;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  text-align: left;
}

.market-img-wrap .market_inner {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 20px 0;
  justify-content: center;
}

.market-img {
  flex: 0 0 120px;
  height: 120px;
}

.market-img-wrap .market-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.market-img-wrap .store {
  display: flex;
  gap: 5px;
}

.market-gray {
  color: #666;
}

.market-link {
  font-size: 15px;
  position: relative;
  border: 1px solid #333;
  padding: 8px 0;
  margin-top: 10px;
  display: block;
  border-radius: 50px;
  text-align: center;
  flex: 1;
}

.market-arrow {
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  top: 56%;
  transform: translateX(-50%);
  right: -18%;
}

.market-arrow::after {
  position: absolute;
  left: 0px;
  top: 0px;
  content: "";
  width: 10px;
  /* 사이즈 */
  height: 10px;
  /* 사이즈 */
  border-top: 1px solid #000;
  /* 선 두께 */
  border-right: 1px solid #000;
  /* 선 두께 */
  transform: rotate(45deg);
  /* 각도 */
}

@media screen and (min-width: 814px) {
  #sect_final {
    margin-bottom: 0;
    padding: 60px 0;
  }
  #sect_final h3 {
    font-size: 20px;
    margin-bottom: 40px;
  }
}
@media screen and (min-width: 1024px) {
  #sect_final small {
    font-size: 16px;
    padding-left: 0;
  }
  .related.related-2 .img-wrap {
    height: 222px;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .related.related-2 .img-wrap img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
  }
  .related.related-7 .img-wrap {
    height: 222px;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .related.related-7 .img-wrap .ut-img-wrap {
    position: relative;
  }
  .related.related-7 .img-wrap .ut_icon_wrp {
    position: absolute;
    display: inline-block;
    width: 100px;
    height: 100px;
    top: 0;
    left: 15px;
  }
  .related.related-7 .img-wrap .ut_icon_wrp img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  #sect10 h3.market-title {
    display: inline-block;
    font-size: 32px;
  }
  .market-img {
    width: 130px;
  }
  .market-gray {
    display: inline-block;
    padding-left: 20px;
    font-size: 20px;
    position: relative;
    bottom: 3px;
  }
  .market-arrow {
    top: 62%;
    right: unset;
    left: 26%;
  }
  .market-arrow::after {
    width: 6px;
    height: 6px;
  }
}
@media screen and (min-width: 1200px) {
  .related-wrap {
    width: 100%;
    justify-content: center;
  }
  .related {
    flex: 0 0 40%;
    max-width: 40%;
  }
}
#app-download {
  margin: 48px -16px 0;
}
#app-download .img-area img {
  width: 100%;
}
#app-download .btn-area {
  margin-top: 16px;
  text-align: center;
}
#app-download .btn-area .btn-app-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 32px;
  border-radius: 22px;
  border: 1px solid #ddd;
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 100%;
}
#app-download .btn-area .btn-app-download:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7096 12.4993C18.0548 12.4993 18.3346 12.7792 18.3346 13.1243V16.8743C18.3346 17.6798 17.6817 18.3327 16.8763 18.3327H3.1263C2.32089 18.3327 1.66797 17.6798 1.66797 16.8743V13.1243C1.66797 12.7792 1.94779 12.4993 2.29297 12.4993C2.63815 12.4993 2.91797 12.7792 2.91797 13.1243V16.8743C2.91797 16.9894 3.01124 17.0827 3.1263 17.0827H16.8763C16.9914 17.0827 17.0846 16.9894 17.0846 16.8743V13.1243C17.0846 12.7792 17.3645 12.4993 17.7096 12.4993ZM10.0013 1.66602C10.3465 1.66602 10.6263 1.94584 10.6263 2.29102V11.8239L14.1427 8.30745C14.3868 8.06338 14.7825 8.06338 15.0265 8.30745C15.2706 8.55153 15.2706 8.94717 15.0265 9.19124L10.4432 13.7746C10.1991 14.0187 9.80348 14.0187 9.55941 13.7746L4.97607 9.19124C4.732 8.94717 4.732 8.55153 4.97607 8.30745C5.22015 8.06338 5.61579 8.06338 5.85986 8.30745L9.3763 11.8239V2.29102C9.3763 1.94584 9.65612 1.66602 10.0013 1.66602Z' fill='%23222222'/%3E%3C/svg%3E%0A") no-repeat;
}

@media (min-width: 769px) {
  #app-download {
    display: none;
  }
}

/*# sourceMappingURL=archive.css.map */