@charset "utf-8";

/* font-family: 'Knewave', 'Roboto', cursive, sans-serif; */
@import url("https://fonts.googleapis.com/css2?family=Knewave&family=Roboto:wght@400;500;700&display=swap");

/* Pretendard Variable */
@import url("./common/pretendardvariable-dynamic-subset.css");

/* 변수선언 */
@import url(./common/variable.css);

/* 캐릭터 슬라이더 myWeb3 */

main .myWeb3 {
  width: 100%;
  height: 40%;
  background-color: #000;
  overflow: hidden;
}

.ag-container-shops {
  width: 100%;
  padding: 60px 0;
}

.js-flickity-slider {
  display: flex;
}

.ag-card-bg {
  height: 100%;
  width: 200%;
  background-position: 50%;
  background-size: cover;

  position: absolute;
  top: 0;
  left: -55%;

  -webkit-transition: height 0.6s;
  -moz-transition: height 0.6s;
  -o-transition: height 0.6s;
  transition: height 0.6s;
}

.ag-shop-card_box-wrap {
  padding: 15px;
}

.ag-shop-card_box {
  background-color: #fff;

  overflow: hidden;

  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);
  -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);
  -o-box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 35, 0.25);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;

  cursor: pointer;
}

.ag-shop-card_box:hover .ag-shop-card-footer_link {
  background-color: var(--color-point);
}

.ag-shop-card_body {
  display: block;
  height: 18vw;
  width: 21.6vw;
  background-position: 50%;
  background-size: cover;

  overflow: hidden;

  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;

  position: relative;
}

.ag-shop-card-body_link {
  height: 100px;
  width: 100px;
  margin: 0 auto;

  overflow: hidden;

  z-index: 9;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;

  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.35);
  -o-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.35);

  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);

  -webkit-transition: top 0.4s;
  -moz-transition: top 0.4s;
  -o-transition: top 0.4s;
  transition: top 0.4s;
}

.ag-shop-card-body_img {
  max-width: 100%;
}

.ag-shop-card_footer {
  padding: 15px 30px;
  border: 0;
  background-color: #fff;

  position: relative;
}

.ag-shop-card-footer_title {
  display: block;
  line-height: 1.3;

  font-weight: 700;
  font-size: 14px;
  color: #000;
}

.ag-shop-card-footer_products {
  display: block;
  line-height: 1.3;

  font-size: 12px;
}

.ag-shop-card-footer_link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  width: 35px;
  background-color: #5a5a5a;

  position: absolute;
  right: 30px;
  top: 15px;

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.ag-shop-card-footer_arrow {
  max-width: 16px;
}

/* 캐릭터 팝업창 ag-container-popup */
/* 공통 */
.ag-container-popup {
  width: 100%;
  height: 100vh;

  position: fixed;
  top: 0;
  z-index: 999999999;
  background-color: #00000056;

  text-align: center;
}

.ag-container-popup .popup-bg {
  width: 70%;
  height: 85vh;
  background-color: #fff;
  overflow: hidden;

  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);

  margin: 0 auto;

  display: flex;
  position: relative;
}

.ag-container-popup .popup-bg .small-box1 {
  width: 60%;
  padding: 3vw;
}

.ag-container-popup .popup-bg .small-box1 img {
  width: 100%;
  height: 100%;
}

.ag-container-popup .popup-bg .small-box2 {
  width: 40%;
  margin: 3vw auto;
  padding: 0 2vw;
  border-left: #d9d8d8 solid 1px;
}

/* 닫힘버튼 */
.ag-container-popup .popup-bg .small-box2 .closed {
  position: absolute;
  top: 5px;
  right: 10px;

  width: 3%;
  height: 100%;

  cursor: pointer;
}

.ag-container-popup .popup-bg .small-box2 .closed p {
  font-size: var(--font-size-30);
  font-weight: 400;
  text-align: right;
}

/* 텍스트 */
.ag-container-popup .popup-bg .small-box2 .bg-txt {
  font-size: var(--font-size-13);
}

.ag-container-popup .popup-bg .small-box2 .bg-txt .title {
  font-weight: 700;
  font-size: var(--font-size-18);
  margin-bottom: 8px;
}

.ag-container-popup .popup-bg .small-box2 .bg-txt .sub-title {
  font-weight: 600;
  font-size: var(--font-size-15);
  margin-bottom: 5px;
}

.ag-container-popup .popup-bg .small-box2 .bg-txt p:nth-child(3) {
  width: 93%;
  margin: 0 auto;
}

/* 개별 */
.ag-container-popup .popup-bg .small-box2 .bg-img {
  text-indent: -999999px;
  width: 100%;
  height: 73%;
  margin-bottom: 15px;
}
.ag-container-popup .popup-bg .small-box2 .bg-img1 {
  background: url(./images/character_ebg4.png) no-repeat 50% / 100%;
}

.ag-container-popup .popup-bg .small-box2 .bg-img2 {
  background: url(./images/character_kt4.png) no-repeat 50% -10% / 120%;
}

.ag-container-popup .popup-bg .small-box2 .bg-img3 {
  background: url(./images/character_ace4.png) no-repeat 50% -10% / 120%;
}

.ag-container-popup .popup-bg .small-box2 .bg-img4 {
  background: url(./images/character_hada4.png) no-repeat 50% -10% / 120%;
}

.ag-container-popup .popup-bg .small-box2 .bg-img5 {
  background: url(./images/character_fun4.png) no-repeat 50% 30%/ 110%;
}

.popup-bg1,
.popup-bg2,
.popup-bg3,
.popup-bg4,
.popup-bg5 {
  display: none;
}