@charset "UTF-8";

.w2_patterns_inner {
  width: 6060px;
  background-image: url(/assets/img/unified_new/partner_scroll.webp);
}

@media screen and (min-width: 1440px) {
  .w2_feature_list {
    max-width: 900px;
  }
}

@media screen and (min-width: 768px) {
  .w2_feature_list {
    grid-template-columns: repeat(8, 1fr);
  }

  #Feature .w2_feature_list li {
    grid-column: span 2;
  }

  #Feature .w2_feature_list li:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

#Intro {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
  padding: 30px 15px;
}

#Intro h3 {
  font-weight: 600;
}

#Intro p {
  font-size: 16px;
  margin-top: 45px;
  line-height: 180%;
}

#Intro .box_img {
  text-align: center;
}

@media screen and (max-width: 768px) {
  #Intro {
    grid-template-columns: 1fr;
  }

  #Intro .box_img {
    margin-top: 15px;
  }

  #Intro p {
    margin-top: 20px;
  }
}

@media screen and (min-width: 768px) {
  #Intro {
    gap: 15px;
  }

  #Intro h3 {
    font-size: 20px;
  }

  #Intro p {
    font-size: 14px;
    margin-top: 30px;
  }
}

@media screen and (min-width: 1440px) {
  #Intro {
    padding: 30px 60px;
    gap: 0;
  }

  #Intro h3 {
    font-size: 25px;
  }

  #Intro p {
    font-size: 16px;
    margin-top: 45px;
  }

}

#ItemStore .w2_img-wrapper--single {
  padding: 0;
}

#ItemStore .no-padding {
  padding-top: 0;
}

#ItemStore .itemstore_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 15px;
  margin: 0;
}

#ItemStore .itemstore_list li {
  width: calc(20% - 15px);
  text-align: center;
}

#ItemStore .itemstore_list li img {
  width: 100%;
}

#ItemStore .itemstore_list li p {
  font-weight: bold;
  font-size: 1vw;
}

#ItemStore .itemstore_system {
  margin-top: 0;
  border-radius: 0;
}

#ItemStore .itemstore_system .itemstore_system_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between;
  gap: 15px;
}

#ItemStore .itemstore_system .itemstore_system_list li {
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  border: solid 2px #0E5CCC;
  box-sizing: border-box;
  background: #fff;
}

#ItemStore .itemstore_system .itemstore_system_list li h4 {
  background: #0E5CCC;
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 1vw;
  margin-bottom: 0;
}

#ItemStore .itemstore_system .itemstore_system_list li p {
  width: 75%;
  box-sizing: border-box;
  padding: 10px;
  text-align: left;
  line-height: normal;
}

@media screen and (min-width: 768px) {
  #ItemStore .itemstore_list {
    padding: 30px 15px;
  }

  #ItemStore .itemstore_system {
    padding: 30px 15px;
  }

  #ItemStore .itemstore_system .itemstore_system_list li p {
    padding: 15px;
  }
}

@media screen and (min-width: 1440px) {
  #ItemStore .itemstore_list {
    padding: 50px 60px;
  }

  #ItemStore .itemstore_list li p {
    font-size: 14px;
  }

  #ItemStore .itemstore_system {
    padding: 30px 60px;
  }

  #ItemStore .itemstore_system .itemstore_system_list li h4 {
    font-size: 16px;
  }

  #ItemStore .itemstore_system .itemstore_system_list li p {
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  #ItemStore .itemstore_list {
    padding: 30px 15px;
    gap: 10px 0;
  }

  #ItemStore .itemstore_list li {
    width: calc(50% - 5px);
  }

  #ItemStore .itemstore_list li p {
    font-size: 14px;
  }

  #ItemStore .itemstore_system {
    padding: 10px;
  }

  #ItemStore .itemstore_system .itemstore_system_list {
    grid-template-columns: 1fr;
  }

  #ItemStore .itemstore_system .itemstore_system_list li {
    width: 100%;
  }

  #ItemStore .itemstore_system .itemstore_system_list li h4,
  #ItemStore .itemstore_system .itemstore_system_list li p {
    font-size: 14px;
  }

  #ItemStore .itemstore_system .itemstore_system_list li p {
    padding: 10px;
  }
}

#Popular .popular_head h3 {
  font-size: 25px;
  text-align: center;
}

#Popular .popular_arrows {
  display: none;
}

#Popular .popular_list {
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 30px;
}

#Popular .popular_list li {
  max-width: 250px;
  box-shadow: 0px 5px 30px rgb(51 51 51 / 3%);
  background: #fff;
  padding: 25px 15px;
  box-sizing: border-box;
}

#Popular .popular_list li h4 {
  text-align: center;
  color: var(--color-w2-blue);
}

#Popular .popular_list li p {
  line-height: 150%;
  font-size: 13px;
  text-align: left;
}

#Popular .popular_list li p {
  margin-top: 20px;
}

@media screen and (max-width: 1024px) {
  #Popular {
    position: relative;
    overflow: hidden;
    padding-top: 15px;
  }

  #Popular .popular_head {
    position: relative;
  }

  #Popular .popular_head h3 {
    font-size: 18px;
  }

  #Popular .popular_arrows {
    position: absolute;
    right: 10px;
    top: 50%;
    display: flex;
    gap: 10px;
    transform: translateY(-50%);
  }

  #Popular .popular_arrow {
    position: relative;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 2px solid #0e5ccc;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
  }

  #Popular .popular_arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-top: 2px solid #0e5ccc;
    border-right: 2px solid #0e5ccc;
  }

  #Popular .popular_arrow--prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
  }

  #Popular .popular_arrow--next::before {
    transform: translate(-65%, -50%) rotate(45deg);
  }

  #Popular .popular_list {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 0 10px 6px;

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #Popular .popular_list li {
    max-width: 100%;
    min-width: 260px;
  }

  #Popular .popular_list::-webkit-scrollbar {
    display: none;
  }
}

#Offline .w2_img-wrapper--single {
  padding-bottom: 0;
}

#Offline .w2_img-wrapper--single h3 {
  font-size: 18px;
}

@media screen and (min-width: 1440px) {
  #Offline .w2_img-wrapper--single h3 {
    font-size: 20px;
  }
}

.offline_omo ul {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.offline_omo li {
  padding: 10px 0;
  position: relative;
  box-sizing: border-box;
  z-index: 0;
  box-shadow: 1px 6px 9px rgba(51, 51, 51, 0.15);
  background: #fff;
}

.offline_omo li h4 {
  font-size: 12px;
  font-weight: 500;
  padding: 10px 0;
}

.offline_omo .tp_line_box::before {
  height: 3px;
}

@media screen and (max-width: 768px) {
  .offline_omo {
    padding-top: 0;
  }

  .offline_omo .box_inner {
    padding: 30px 15px 0;
  }

  .offline_omo .box_inner ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .offline_omo .box_inner ul li p {
    font-size: 14px !important;
  }

}

#Brand .w2_img-wrapper--single {
  padding-bottom: 0;
}

.brand_design ul {
  display: grid;
  gap: 15px;
}

.brand_design img {
  width: 100%;
}

.brand_design h4 {
  font-size: 20px;
  font-weight: 500;
}

@media (min-width: 768px) {
  .brand_design {
    margin-top: 2.34375vw;
  }

  .brand_design ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 30px;
  }

  .brand_design li {
    width: 31.25%;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
  }

  .brand_design li h4 {
    font-size: min(0.875vw, 14px);
  }
}

#Recommend .w2_img-wrapper--multi {
  gap: 65px;
}

#Recommend .w2_img-wrapper--multi .box_inner p {
  text-align: center;
  font-size: 14px;
  margin-top: 15px;
}

@media (min-width: 768px) {
  #Recommend .w2_img-wrapper--multi .box_inner {
    gap: 60px;
  }
}

/* ===============================================
  Progress / Infra
=============================================== */
.w2_infra .w2_img-wrapper--single img {
  width: 100%;
}

.w2_progress .w2_img-wrapper--single img {
  width: 85%;
}

.w2_progress .w2_scroll_icon {
  display: none;
}

@media screen and (max-width: 767px) {
  #Progress .w2_sp_scroll_container {
    position: relative;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
    background: transparent;
    box-shadow: unset;
  }

  #Progress .w2_sp_scroll_container>img {
    width: 200vw;
    margin: 0 auto;
  }

  #Progress .w2_sp_scroll_container .w2_scroll_icon {
    position: absolute;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    background: #FFFFFF;
    filter: drop-shadow(0 10px 30px rgba(51, 51, 51, 0.3));
    border: solid 2px #DDDDDD;
    justify-content: center;
    align-items: center;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.2s linear;
    display: block;
    width: 25.6vw;
    height: 23.2vw;
    margin-left: -12.8vw;
    margin-top: -11.6vw;
    border-radius: 1.33333vw;
  }

  #Progress .w2_sp_scroll_container .w2_scroll_icon>div {
    font-size: 3.46667vw;
    display: block;
  }

  #Progress .w2_sp_scroll_container .w2_scroll_icon>div>span {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  #Progress .w2_sp_scroll_container .w2_scroll_icon .w2_scroll_icon_img {
    margin: auto;
    width: 11.73333vw !important;
    height: 12.8vw !important;
    margin-bottom: 1.33333vw;
    animation: w2_scroll_icon_img_animation 0.6s alternate-reverse infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }

  #Progress .w2_sp_scroll_container .w2_scroll_icon.w2_hide {
    opacity: 0;
  }

  #Progress .w2_sp_scroll_container::before {
    content: none;
  }
}

@media screen and (min-width: 1440px) {
  .w2_progress .w2_img-wrapper--single img {
    width: 75%;
  }
}