@charset "UTF-8";
html,
body {
  font-family: 'Jost', 'Noto Sans CJK', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', sans-serif;
  font-weight: 200;
}
aside.modal-active {
  overflow-x: hidden !important;
}

body {
  width: 100vw;
  max-width: 720px;
  margin: 0 auto;
}
body:has(nav) {
  padding-top: 0vw;
  position: relative;
}
body.body-padding {
  padding-top: min(13.8888888889vw, 100px);
  transition: padding-top 0.5s ease-in-out;
}
body.body-hidden {
  overflow: hidden;
}
header > img {
  height: 3.6111111111vw;
  max-height: 26px;
  width: auto;
}
img.classIcons {
  height: 6.3888888889vw;
  max-height: 46px;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(6.9444444444vw, 50px) min(6.25vw, 45px);
  background-color: #ededed;
  width: 100vw;
  max-width: 720px;
  box-sizing: border-box;
  height: 0;
  z-index: 10;
  position: fixed;
  transform: translateY(max(-20.8333333333vw, -150px));
}
nav > a:nth-of-type(1) > img {
  width: 4.4444444444vw;
  max-width: 32px;
  height: auto;
}
nav > a:nth-of-type(2) {
  position: absolute;
  right: min(15.5555555556vw, 112px);
}
nav > a:nth-of-type(2) > img {
  height: 5vw;
  max-height: 36px;
  width: auto;
}
nav > a:nth-of-type(3) > img {
  width: 3.8888888889vw;
  max-width: 28px;
  height: auto;
}
nav > h1 {
  font-size: min(4.4444444444vw, 32px);
  font-weight: 600;
  text-align: center;
}
nav.nav-active {
  position: fixed;
  height: 5.2777777778vw;
  max-height: 38px;
  transform: translateY(max(-13.8888888889vw, -100px));
}
nav.nav-hidden {
  position: fixed;
  transform: translateY(max(-28vw, -202px));
  transition: transform 0.3s ease-in-out;
}
nav.nav-fixed {
  height: 5.2777777778vw;
  max-height: 38px;
  position: fixed;
  transform: translateY(max(-13.8888888889vw, -100px));
  transition: transform 0.3s ease-in-out;
}
.magazine > section > article > aside > header,
.video.popup-slide ~ aside > header,
.modal-aside > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(8.0555555556vw, 58px) min(6.25vw, 45px);
  width: 100vw;
  max-width: 720px;
  box-sizing: border-box;
  height: 0;
  z-index: 10;
  position: fixed;
  transform: translateY(max(-16.1111111111vw, -116px));
  transition: transform 0.3s ease-in-out;
}
.magazine > section > article > aside > header.header-active,
.video.popup-slide ~ aside > header.header-active,
.modal-aside > header.header-active {
  position: fixed;
  height: 5.2777777778vw;
  max-height: 38px;
}
.magazine > section > article > aside > header.header-hidden,
.video.popup-slide ~ aside > header.header-hidden,
.modal-aside > header.header-hidden {
  position: fixed;
  transform: translateY(max(-32.2222222222vw, -232px));
  transition: transform 0.3s ease-in-out;
}
.magazine > section > article > aside > header.header-fixed,
.video.popup-slide ~ aside > header.header-fixed,
.modal-aside > header.header-fixed {
  height: 5.2777777778vw;
  max-height: 38px;
  position: fixed;
  transform: translateY(max(-16.1111111111vw, -116px));
  transition: transform 0.3s ease-in-out;
}
footer {
  width: 100vw;
  height: 46.1111111111vw;
  max-width: 720px;
  max-height: 332px;
  overflow: hidden;
}
footer > img[usemap] {
  width: 100vw;
  height: auto;
  max-width: 720px;
  border: none;
  min-width: min(100vw, 720px);
}
/* body */
body.mainIndex .swiper > hgroup > h2 > img,
body .swiper.mainIndex > hgroup > h2 > img {
  height: 8.0555555556vw !important;
  max-height: 58px !important;
  width: auto;
}
.swiper-padding-bottom {
  padding-bottom: min(8.1944444444vw, 59px) !important;
}
body.mainIndex .swiper > hgroup > h2,
body .swiper.mainIndex > hgroup > h2 {
  font-size: min(5.5555555556vw, 40px) !important;
  align-items: center;
}
body.mainIndex .swiper > hgroup > h3,
body .swiper.mainIndex > hgroup > h3 {
  font-size: min(3.6111111111vw, 26px) !important;
  width: 87.5vw;
  max-width: 630px;
  word-break: break-all;
  line-height: 1.3;
  margin-top: min(0.6944444444vw, 5px);
}
/* swiper */
.swiper, swiper-container {margin: 0;}
.swiper.brown-txt {color: #53402d;}
.swiper.white-txt {color: #fff;}
.swiper.text-right {text-align: right;}
.swiper-slide img:not(.playBtns) {
  width: 100%;
  height: 100%;
}
.swiper > hgroup {
  display: flex;
  flex-direction: column;
  gap: min(1vw, 8px);
}
.swiper > hgroup > h2 {
  font-weight: 600;
  letter-spacing: max(-0.25vw, -1.8px);
  display: flex;
  align-items: flex-end;
  gap: min(1.5vw, 11px);
  font-size: min(4.5833333333vw, 33px);
}
.swiper > hgroup > h3 {
  font-weight: 500;
  font-size: min(3.0555555556vw, 22px);
}

.low,
.high,
.square,
.card,
.high-loop,
.low-loop,
.image-popup,
.fourth-depth-high {
  padding: min(4.0277777778vw, 29px) 0 min(4.0277777778vw, 29px) min(6.25vw, 45px);
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-width: 720px;
  height: auto;
  box-sizing: border-box;
  gap: min(3.3333333333vw, 24px);
  z-index: 1;
}
.high > .swiper-wrapper > .swiper-slide,
.high-loop > .swiper-wrapper > .swiper-slide ,
.fourth-depth-high > .swiper-wrapper > .swiper-slide {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 285px;
  height: auto;
}
.high > .swiper-wrapper > .swiper-slide > div,
.high-loop > .swiper-wrapper > .swiper-slide > div,
.image-popup > .swiper-wrapper > .swiper-slide > div,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div {
  display: flex;
  flex-direction: column;
  line-height: 2;
  margin-top: min(1.9444444444vw, 14px);
}
.high > .swiper-wrapper > .swiper-slide > div > h4,
.high-loop > .swiper-wrapper > .swiper-slide > div > h4,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4 {
  font-size: min(3.3333333333vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  word-break: break-all;
  width: 39.5833333333vw;
  max-width: 285px;
}
.high > .swiper-wrapper > .swiper-slide > div > h4,
.high-loop > .swiper-wrapper > .swiper-slide > div > h4,
.square > .swiper-wrapper > .swiper-slide > div > h4,
.low > .swiper-wrapper > .swiper-slide > div > h4,
.low-loop > .swiper-wrapper > .swiper-slide > div > h4,
.image-popup > .swiper-wrapper > .swiper-slide > div > h4,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4 {
  display: grid;
  grid-template-columns: auto max-content;
  gap: min(3.0555555556vw, 22px);
}
.high > .swiper-wrapper > .swiper-slide > div > h4 > span,
.high-loop > .swiper-wrapper > .swiper-slide > div > h4 > span,
.square > .swiper-wrapper > .swiper-slide > div > h4 > span,
.low > .swiper-wrapper > .swiper-slide > div > h4 > span,
.low-loop > .swiper-wrapper > .swiper-slide > div > h4 > span,
.image-popup > .swiper-wrapper > .swiper-slide > div > h4 > span,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4 > span {
  justify-content: flex-end;
  position: relative;
  right: min(1.1111111111vw, 8px);
  font-weight: 400;
}
.high > .swiper-wrapper > .swiper-slide > div > h4 > i,
.high > .swiper-wrapper > .swiper-slide > div > h5,
.image-popup > .swiper-wrapper > .swiper-slide > div > h4 > i,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4 > i,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h5 {
  font-size: min(3.0555555556vw, 22px);
  font-weight: 500;
}
.high > .swiper-wrapper > .swiper-slide > div > h5,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h5 {
  display: inline-block;
  line-height: 1.2;
  width: 39.5833333333vw;
  max-width: 285px;
  word-break: break-all;
}
.high > .swiper-wrapper > .swiper-slide > img,
.high > .swiper-wrapper > .swiper-slide > picture > img,
.high-loop > .swiper-wrapper > .swiper-slide > img,
.high-loop > .swiper-wrapper > .swiper-slide > picture > img,
.fourth-depth-high > .swiper-wrapper > .swiper-slide > img {
  width: 39.5833333333vw;
  height: 52.7777777778vw;
  max-width: 285px;
  max-height: 380px;
  border-radius: min(1.3888888889vw, 10px);
}
.low > .swiper-wrapper > .swiper-slide,
.low-loop > .swiper-wrapper > .swiper-slide {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 533.3333333333px;
  height: auto;
}
.low > .swiper-wrapper > .swiper-slide > div,
.low-loop > .swiper-wrapper > .swiper-slide > div {
  display: flex;
  flex-direction: column;
  line-height: 2;
  margin-top: min(0.6944444444vw, 5px);
}
.low > .swiper-wrapper > .swiper-slide > div > h4,
.low-loop > .swiper-wrapper > .swiper-slide > div > h4 {
  font-size: min(3.3333333333vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  word-break: break-all;
  width: 74.0740740741vw;
  max-width: 533.3333333333px;
}
.low > .swiper-wrapper > .swiper-slide > div > h5,
.low-loop > .swiper-wrapper > .swiper-slide > div > h5 {
  display: inline-block;
  line-height: 1.2;
  width: 74.0740740741vw;
  max-width: 533.3333333333px;
  word-break: break-all;
}
.low > .swiper-wrapper > .swiper-slide > img,
.low-loop > .swiper-wrapper > .swiper-slide > img {
  width: 74.0740740741vw;
  height: 41.6666666667vw;
  max-width: 533.3333333333px;
  max-height: 300px;
  border-radius: min(1.3888888889vw, 10px);
}
.low-43 > .swiper-wrapper > .swiper-slide > img {
  width: 61.1111111111vw;
  max-width: 440px;
  height: 45.8333333333vw;
  max-width: 440px;
}
.square > hgroup > h2 {
  font-size: min(3.8vw, 28px);
}
.square > hgroup > h2 > img {
  width: auto;
  height: 3.8888888889vw;
  max-height: 28px;
}
.square > .swiper-wrapper > .swiper-slide {
  width: 41.6666666667vw;
  height: auto;
  max-width: 300px;
}
.square > .swiper-wrapper > .swiper-slide > img {
  width: 41.6666666667vw;
  height: 41.6666666667vw;
  max-width: 300px;
  max-height: 300px;
  border-radius: min(1.3888888889vw, 10px);
}
.square > .swiper-wrapper > .swiper-slide > div {margin-top: min(1.5vw, 11px);}
.square > .swiper-wrapper > .swiper-slide > div h4,
.square > .swiper-wrapper > .slick-list > .slick-track > .swiper-slide > div h4 {
  font-size: min(3.4vw, 25px);
  font-weight: 600;
  width: 41.6666666667vw;
  max-width: 300px;
  word-break: break-all;
}
.square > .swiper-wrapper > .swiper-slide > div h5 {
  font-size: min(3.3333333333vw, 24px);
  font-weight: 400;
  width: 41.6666666667vw;
  max-width: 300px;
  word-break: break-all;
  line-height: 1.4;
}
.image-popup > .swiper-wrapper > .swiper-slide {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: 250px;
  height: auto;
}
.image-popup > .swiper-wrapper > .swiper-slide > img {
  width: 34.7222222222vw;
  height: 61.6666666667vw;
  max-width: 250px;
  max-height: 444px;
  border-radius: min(1.3888888889vw, 10px);
}
.image-popup > .swiper-wrapper > .swiper-slide > div > h4,
.image-popup > .swiper-wrapper > .swiper-slide > div > h5 {
  font-size: min(3.3333333333vw, 24px);
  width: 34.7222222222vw;
  max-width: 250px;
  word-break: break-all;
  line-height: min(4.7222222222vw, 34px);
  letter-spacing: -0.03em;
}
.image-popup > .swiper-wrapper > .swiper-slide > div > h4 {
  margin-top: min(2.7777777778vw, 20px);
  font-weight: 600;
}
.image-popup > .swiper-wrapper > .swiper-slide > div > h5 {
  font-weight: 500;
}


.grid-wrapper {
  width: 100vw;
  max-width: 720px;
  padding: min(3.3333333333vw, 24px) 0;
  background-color: #ececec;
}
.gridAllView{padding-top :0;}
.grid {
  width: 87.5vw;
  max-width: 630px;
  height: auto;
  box-sizing: border-box;
  z-index: 2;
  margin: 0 auto;
}
.grid > hgroup {
  color: #e85a19;
}
.grid > hgroup {
  display: flex;
  align-items: center;
}
.grid > hgroup > h2 {
  font-size: min(5vw, 36px);
  margin-bottom: min(3vw, 22px);
  font-weight: 600;
}
.grid > .swiper-wrapper > .swiper-slide > div > h3 {
  font-size: min(3.6111111111vw, 26px);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.2;
  margin-left: min(0.6944444444vw, 5px);

}
.grid > .swiper-wrapper > .swiper-slide > div > h3 {
  font-size: min(3.6111111111vw, 26px);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.2;
  margin-left: min(0.6944444444vw, 5px);
}
.grid > button {
  font-size: min(3.0555555556vw, 22px);
  padding: min(1.9444444444vw, 14px) min(2.0833333333vw, 15px);
  background-color: #e85a19;
  color: #fff;
  font-weight: 500;
  border-radius: min(6.9444444444vw, 50px);
  margin: min(3.3333333333vw, 24px) 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.grid > aside {
  display: block;
  visibility: hidden;
  z-index: -1;
  width: 100vw;
  max-width: 720px;
  height: 100vh;
  box-sizing: border-box;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: calc(50% - min(360px, 50vw));
}
.grid > aside > header {
  display: flex;
  justify-content: center;
  padding: min(6.1111111111vw, 44px) min(6.25vw, 45px);
  background-color: #e85a19;
  color: #fff;
}
.grid > aside > header > h1 {
  font-size: min(4.4444444444vw, 32px);
  font-weight: 500;
  text-align: center;
}
.grid > aside > header > img {
  position: absolute;
  top: 0;
  right: 0;
  margin: min(6.5277777778vw, 47px);
}
.grid > .swiper-pagination-fraction {
  width: min(22.2222222222vw, 160px);
  padding: min(1.9444444444vw, 14px) 0;
  box-sizing: border-box;
  border-radius: min(6.9444444444vw, 50px);
  margin-top: min(3.3333333333vw, 24px);
  background-color: #e85a19;
  color: #fff;
  font-size: min(3.0555555556vw, 22px);
  font-weight: 600;
  letter-spacing: -1px;
  position: relative;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.grid > .swiper-wrapper > .swiper-slide > div {position: relative;}
.grid > .swiper-wrapper > .swiper-slide > div > img {border-radius: min(1.3888888889vw, 10px);}
.grid > .swiper-wrapper > .swiper-slide > img {
  display: block;
  height: 2.7777777778vw;
  width: 39.1666666667vw;
  max-width: 282px;
  max-height: 20px;
  object-fit: contain;
  margin: min(1.3888888889vw, 10px) auto 0 auto;
}
.video > .swiper-wrapper > .swiper-slide,
.gallery > .swiper-wrapper > .swiper-slide {
  height: 56.25vw;
  max-height: 405px;
}

.video > .swiper-wrapper > .swiper-slide > figure,
.vimeosReady {
  width: 100vw;
  height: 56.25vw;
  max-width: 720px;
  max-height: 405px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video > .swiper-wrapper > .swiper-slide > figure > video {
  width: 100%;
  height: 100%;
}
.video > .swiper-wrapper > .swiper-slide > figure > figcaption {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: min(2.0833333333vw, 15px);
  position: absolute;
  bottom: min(2.0833333333vw, 15px);
  left: min(4.1666666667vw, 30px);
}
.video > .swiper-wrapper > .swiper-slide > figure > figcaption > h2 {
  font-weight: 400;
  font-size: min(3.6111111111vw, 26px);
  width: 91.6666666667vw;
  max-width: 660px;
}
.video > .swiper-wrapper > .swiper-slide > figure > figcaption > h3 {
  font-size: min(3.0555555556vw, 22px);
  width: 87.5vw;
  max-width: 630px;
  word-break: keep-all;
}
.video > .swiper-wrapper > .swiper-slide > figure > img {
  filter: brightness(80%);
}
.video.filter-light > .swiper-wrapper > .swiper-slide > figure > img {
  filter: brightness(100%);
}
.modal-aside {
  display: none;
}
.modal-aside.modal-active {
  display: block;
  width: 100vw;
  max-width: 720px;
  height: 100vh;
  box-sizing: border-box;
  overflow: scroll;
  position: fixed;
  top: 0;
  left: calc(50% - min(360px, 50vw));
  background-color: #fff;
  z-index: 100;
}
.video > .swiper-pagination-fraction,
.gallery > .swiper-pagination-fraction {
  color: #fff;
  width: auto;
  height: auto;
  position: absolute;
  top: min(2.7777777778vw, 20px);
  bottom: auto;
  left: auto;
  right: min(2.7777777778vw, 20px);
  border-radius: min(6.9444444444vw, 50px);
  font-size: min(2.7777777778vw, 20px);
}
.gallery > .swiper-wrapper > .swiper-slide > h2 {
  font-size: min(4.1666666667vw, 32px);
  font-weight: 500;
  color: #fff;
  position: absolute;
  top: min(5.5555555556vw, 40px);
  left: min(6.25vw, 45px);
}
.gallery > .swiper-button-prev,
.gallery > .swiper-button-next {
  color: #fff;
  top: var(--swiper-navigation-top-offset, 55%);
  width: 3.75vw;
  max-width: 27px;
  height: 6.1111111111vw;
  max-height: 44px;
}
.gallery > .swiper-button-prev::after,
.gallery > .swiper-button-next::after {font-size: min(6.1111111111vw, 44px);}
.gallery > .swiper-button-prev {left: var(--swiper-navigation-sides-offset, min(4.8611111111vw, 35px));}
.gallery > .swiper-button-next {right: var(--swiper-navigation-sides-offset, min(4.8611111111vw, 35px));}
.card > .swiper-wrapper > .swiper-slide {
  width: auto;
  max-width: 630px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.card > .swiper-wrapper > .swiper-slide > img {
  width: 87.5vw;
  height: 49.21875vw;
  max-width: 630px;
  max-height: 354.375px;
  border-radius: min(1.3888888889vw, 10px);
}
.card > .swiper-wrapper > .swiper-slide > h4 {
  margin-top: min(2.2222222222vw, 16px);
  font-size: min(3.3333333333vw, 24px);
  font-weight: 600;
}

.magazine {
  display: flex;
  flex-direction: column;
  padding-top: min(5vw, 36px);
  width: 100vw;
  max-width: 720px;
  box-sizing: border-box;
}
.magazine > hgroup > h2,
.magazine > hgroup > h3 {
  padding: 0 min(6.25vw, 45px);
}
.magazine > hgroup > h2 {
  font-size: min(5vw, 36px);
  font-weight: 600;
  margin-bottom: min(3.75vw, 27px);
  text-align: center;
}
.magazine > hgroup > h2 > img {
  height: 6.25vw;
  max-height: 45px;
  width: auto;
}
.magazine > hgroup > h3 {
  font-size: min(4.1666666667vw, 30px);
  font-weight: 600;
  width: 87.5vw;
  max-width: 630px;
}
.magazine > section {
  padding: 0 min(6.25vw, 45px);
}
.magazine > section > article {
  /* display: inline-block; */
  width: 41.6666666667vw;
  max-width: 300px;
  float: left;
}
.magazine > section > div {
  width: min(4.1666666667vw, 30px);
}

.webzine {
  width: 41.6666666667vw;
  max-width: 300px;
  border: min(2.3611111111vw, 17px) solid transparent;
  box-sizing: border-box;
}
.webzine.frame-1 {
  background: url(/am/img/index/frame/frame-1.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-2 {
  background: url(/am/img/index/frame/frame-2.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-3 {
  background: url(/am/img/index/frame/frame-3.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-4 {
  background: url(/am/img/index/frame/frame-4.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-5 {
  background: url(/am/img/index/frame/frame-5.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-6 {
  background: url(/am/img/index/frame/frame-6.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-7 {
  background: url(/am/img/index/frame/frame-7.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-8 {
  background: url(/am/img/index/frame/frame-8.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-9 {
  background: url(/am/img/index/frame/frame-9.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-10 {
  background: url(/am/img/index/frame/frame-10.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-11 {
  background: url(/am/img/index/frame/frame-11.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-12 {
  background: url(/am/img/index/frame/frame-12.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-13 {
  background: url(/am/img/index/frame/frame-13.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-14 {
  background: url(/am/img/index/frame/frame-14.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-15 {
  background: url(/am/img/index/frame/frame-15.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine.frame-16 {
  background: url(/am/img/index/frame/frame-16.webp) no-repeat;
  background-origin: border-box;
  background-size: 100% 100%;
}
.webzine > .swiper-pagination-fraction {
  color: #fff;
  width: auto;
  height: auto;
  position: absolute;
  bottom: auto;
  top: min(2.3611111111vw, 17px);
  left: auto;
  right: min(2.3611111111vw, 17px);
  border-radius: min(6.9444444444vw, 50px);
  font-size: min(2.5vw, 18px);
}
.webzine.long > .swiper-wrapper {
  height: 49.2593055556vw;
  max-height: 354.667px;
}
.webzine.short > .swiper-wrapper {
  height: 36.9444444444vw;
  max-height: 266px;
}
.magazine > section > article > h4 {
  font-weight: 600;
  line-height: 1.2;
  font-size: min(3.8vw, 28px);
  margin-top: min(2.5vw, 18px);
  word-break: break-all;
}
.magazine > section > article > p {
  line-height: 1.3;
  font-size: min(3.4vw, 25px);
  font-weight: 500;
  margin: min(2.0833333333vw, 15px) 0 min(3vw, 22px);
  word-break: break-all;
}
/* magazine 팝업창 */
.magazine > section > article > p > a {
  display: none;
}
.magazine > section > article > p > ins,
div:has(.shopping-main) ~ .magazine > section > article > p > a {
  display: block;
  font-weight: 500;
  font-size: min(3.0555555556vw, 22px);
  line-height: 2;
}
div:has(.shopping-main) ~ .magazine > section > article > p > a {
  text-decoration: underline;
}
.magazine > section > article > aside {
  display: none;
}
.magazine > section > article > aside.aside-padding,
.video.popup-slide ~ aside.aside-padding,
.modal-aside.aside-padding {
  padding-top: min(16.1111111111vw, 116px);
  transition: padding-top 0.5s ease-in-out;
}
.magazine > section > article > aside.modal-active {
  display: block;
  width: 100vw;
  max-width: 720px;
  height: 100vh;
  box-sizing: border-box;
  overflow: scroll;
  position: fixed;
  top: 0;
  left: calc(50% - min(360px, 50vw));
  background-color: #fff;
  z-index: 100;
}
/* main */
main {
  width: 100vw;
  max-width: 720px;
  padding: min(3.3333333333vw, 24px) 0;
  box-sizing: border-box;
  display: grid;
  justify-content: space-between;
  gap: min(1.1111111111vw, 8px);
}
main > div {
  display: flex;
  flex-direction: column;
  grid-column: 1/4;
  padding: 0 min(4.1666666667vw, 30px);
}
main > div > h2 {
  font-size: min(4.4444444444vw, 32px);
  font-weight: 600;
  line-height: min(4.8611111111vw, 35px);
  display: grid;
  grid-template-columns: min(65.6944444444vw, 473px) max-content;
  gap: min(2.7777777778vw, 20px);
}
main > div > h2 > small {
  padding: min(1.1111111111vw, 8px);
  border-radius: 50px;
  font-size: min(2.6388888889vw, 19px);
  margin-left: min(1.1111111111vw, 8px);
  font-weight: 600;
  height: 4.8611111111vw;
  max-height: 35px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
main > div > h3 {
  font-size: min(3.4722222222vw, 25px);
  font-weight: 600;
  margin-top: min(1.1111111111vw, 8px);
  line-height: 1.2;
  word-break: break-all;
}
main > table {
  grid-row: 2/3;
  align-self: flex-start;
  justify-self: flex-start;
  margin-left: min(4.1666666667vw, 30px);
}
main > table > tbody > tr > td {
  font-size: min(3.0555555556vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  word-break: break-all;
}
main > table > tbody > tr > td > em {
  margin-right: min(1.8055555556vw, 13px);
  display: inline-block;
  white-space: nowrap;
}
main > picture {
  grid-row: 2/3;
  align-self: center;
  justify-self: center;
  width: 1px;
  height: 10vw;
  max-height: 72px;
  box-sizing: border-box;
  margin-bottom: max(-5px, -0.6944444444vw);
}
main > section {
  grid-row: 2/3;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: min(1.1111111111vw, 8px) 0;
  margin-right: min(4.1666666667vw, 30px);
  justify-self: flex-end;
}
main > section > a,
main > section > button,
main > section > input {
  border-radius: 50px;
  width: 22.4263888889vw;
  max-width: 161.47px;
  font-size: min(2.9166666667vw, 21px);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  height: 7.7125vw;
  max-height: 55.53px;
  word-break: break-word;
  text-align: center;
}
main > section > a {
  position: relative;
}
main > .swiper {
  padding: min(4.7222222222vw, 34px) 0 min(4.7222222222vw, 34px) min(6.25vw, 45px);
}
/* dining */
.dining-overview {
  background: url(/am/img/dining/categoryBg.webp) top center;
  background-size: cover;
  width: 100vw;
  max-width: 720px;
}
main.dining-main {
  background-color: #e8ddcc;
  padding: min(3.3333333333vw, 24px) 0 0;
}
main.dining-main > div > h2 > small {
  border: 1px solid #000;
  font-weight: 500;
}
main.dining-main > section > input,
main.dining-main > section > a {
  color: #fff;
  font-weight: 500;
  width: 25vw;
  max-width: 180px;
}
main.dining-main > section > input {
  background-color: #698496;
  font-family: 'Jost', 'Noto Sans CJK', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', sans-serif;
  padding: 0;
  border: none;
}
main.dining-main > section > a {background-color: #69533d;}
main.dining-main.two-pdf > section {
  display: grid;
}
main.dining-main.two-pdf > section > a {grid-column: 1/4;}
main.dining-main.two-pdf > section > input,
main.dining-main.two-pdf > section > span {
  color: #fff;
  height: 7.7125vw;
  max-height: 55.53px;
  display: flex;
  align-items: center;
  line-height: 1.1;
  border: none;
}
main.dining-main.two-pdf > section > input {
  width: 11.1111111111vw;
  max-width: 80px;
}
main.dining-main.two-pdf > section > input:nth-of-type(1) {
  justify-content: flex-end;
  text-align: right;
  border-radius: 50px 0px 0px 50px;
}
main.dining-main.two-pdf > section > input:nth-of-type(2) {
  justify-content: flex-start;
  text-align: left;
  border-radius: 0px 50px 50px 0px;
}
main.dining-main.two-pdf > section > span {
  width: 2.7777777778vw;
  max-width: 20px;
  justify-content: center;
  background-color: #698496;
  font-weight: 500;
  font-size: min(2.9166666667vw, 21px);
}
.swiper.dining-recommend {
  background: url(/am/img/dining/mainBg.webp) no-repeat;
  background-size: 100% 100%;
  padding: min(7.9166666667vw, 57px) 0 min(10vw, 72px) min(6.25vw, 45px);
  color: #4f401c;
}
/* shopping */
.shopping-overview {
  color: #fff;
  background: url(/am/img/shopping/categoryBg.webp);
  background-size: contain;
  width: 100vw;
  max-width: 720px;
}
.shopping-overview > .swiper > hgroup > h2,
.shopping-overview > .swiper > .swiper-wrapper > .swiper-slide > div > h4 {
  font-weight: 500;
}
.shopping-overview > .swiper > .swiper-wrapper > .swiper-slide > div > h5 {
  font-weight: 400;
}
main.shopping-main {
  background: url(/am/img/shopping/mainBg.webp) no-repeat;
  background-size: cover;
  position: relative;
  top: -1px;
  z-index: 1;
}
main.shopping-main > div,
main.shopping-main > table {
  color: #fff;
}
main.shopping-main > table > tbody > tr > td {
  white-space: nowrap;
}
main.shopping-main > div > h2 > small {
  background-color: #fff;
  color: #ff6c00;
  border: 1px solid #fff;
}
main.shopping-main > section > a {
  background-color: #fff;
  color: #e85a19;
  margin-top: min(1.1111111111vw, 8px);
}
.magazine.shopping-magazine > section > article > dl {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 2.5vw;
  margin-top: min(1.1111111111vw, 8px);
}
.magazine.shopping-magazine > section > article > dl > dt,
.magazine.shopping-magazine > section > article > dl > dd {
  line-height: 1.3;
  font-size: min(3.4vw, 25px);
  font-weight: 500;
}
.magazine.shopping-magazine > section > article > dl > dd {
  word-break: break-all;
}
.magazine > section > article > dl + p {
  margin: 0 0 min(3vw, 22px);
}
.shop-location {
  position: relative;
  height: auto;
  box-sizing: border-box;
  grid-column: 1/4;
}
.shop-location > h2 {
  font-size: min(3.6111111111vw, 26px);
  font-weight: 600;
  grid-template-columns: max-content max-content;
  gap: 0;
}
.shop-location > h2 > img,
.shop-location > h2 > picture > img {
  width: 3.4722222222vw;
  height: auto;
  max-width: 25px;
  margin-right: min(1.1111111111vw, 8px);
}
.shop-location > img:nth-of-type(1) {
  width: 100%;
  height: auto;
}
.shop-location > img[alt='4층'] {
  padding-top: min(3vw, 22px);
}
.shop-location > img:nth-of-type(2) {
  position: absolute;
  width: 8vw;
  max-width: 58px;
  height: auto;
}
/* shopping 팝업 */
.grid > aside.modal-active {
  visibility: visible;
  background-color: #fff;
  z-index: 100;
}
.grid > aside > section {
  padding: min(5vw, 36px) min(6.25vw, 45px) min(3.3333333333vw, 24px);
}
.grid > aside > section:nth-of-type(2n) {
  background-color: #ededed;
}
.grid > aside > section > dl {
  font-weight: 400;
  font-size: min(3.8888888889vw, 28px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: min(1.3888888889vw, 10px);
}
.grid > aside > section > dl > dt {
  width: max-content;
  max-width: min(60.8333333333vw, 438px);
  word-break: break-all;
  margin-bottom: min(1.6666666667vw, 12px);
  line-height: 1.1;
}
.grid > aside > section > dl > dt {
  max-width: min(50.5555555556vw, 364px);
}
.grid > aside > section > dl > dd {
  line-height: 1.1;
}
/* shopping 4depth */
.image-popup {
  padding: 0 0 min(8.3333333333vw, 60px) min(4.1666666667vw, 30px);
  gap: min(2.7777777778vw, 20px);
}
.fourth-depth #tmpls .video > .swiper-wrapper > .swiper-slide,
.fourth-depth #tmpls .video > .swiper-wrapper > .swiper-slide > figure {
  height: 75vw;
  max-height: 540px;
}
.fourth-depth-high,
.image-popup {
  padding: 0 0 min(8.3333333333vw, 60px) min(4.1666666667vw, 30px);
  gap: min(2.7777777778vw, 20px);
}
.fourth-depth-high> hgroup > h2 {
  font-size: min(5.5555555556vw, 40px);
  letter-spacing: -0.04em;
}
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div,
.image-popup > .swiper-wrapper > .swiper-slide > div {
  margin-top: 0;
}
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4,
.fourth-depth #tmpls .image-popup > .swiper-wrapper > .swiper-slide > div > h4 {
  display: initial;
}
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4:empty,
.image-popup > .swiper-wrapper > .swiper-slide > div > h4:empty {
  margin-top: 0;
}
.fourth-depth-high > .swiper-wrapper > .swiper-slide > div > h4 {
  margin-top: min(3.3333333333vw, 24px);
  line-height: 1;
  font-weight: 500;
}
.image-popup > .swiper-wrapper > .swiper-slide > div {
  margin-top: 0;
}
.image-popup > .swiper-wrapper > .swiper-slide > div > h4:empty {
  margin-top: 0;
}

.brand-slogan {
  padding: min(8.3333333333vw, 60px) min(4.1666666667vw, 30px);
}
.brand-slogan > h3 {
  font-size: min(4.7222222222vw, 34px);
  font-weight: 600;
  word-break: break-all;
  line-height: min(4.7222222222vw, 34px);
  letter-spacing: -0.03em;
}
.brand-slogan > p {
  font-size: min(3.8888888889vw, 28px);
  font-weight: 500;
  margin-top: min(1.3888888889vw, 10px);
  word-break: break-all;
  line-height: min(4.7222222222vw, 34px);
}
.brand-designer {
  padding: 0 min(4.1666666667vw, 30px) min(8.3333333333vw, 60px);
}
.brand-designer > .webzine {
  border: none;
  border-radius: min(1.3888888889vw, 10px);
  width: 41.6666666667vw;
  height: 55.5555555556vw;
  max-width: 300px;
  max-height: 400px;
}
.brand-designer > section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
.brand-designer > section > h1 {
  font-size: min(5.5555555556vw, 40px);
  font-weight: 600;
  margin-bottom: min(2.7777777778vw, 20px);
}
.brand-designer > section > div,
.brand-designer > section > ul {
  margin: 0 min(2.7777777778vw, 20px);
}
.brand-designer > section > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: min(2.7777777778vw, 20px);
}
.brand-designer > section > div > h2 {
  font-size: min(4.4444444444vw, 32px);
  font-weight: 500;
  word-break: break-all;
  padding: min(1.1111111111vw, 8px) min(1.3888888889vw, 10px) min(0.6944444444vw, 5px);
  border-radius: min(1.3888888889vw, 10px);
  background-color: #f1f1f1;
}
.brand-designer > section > ul {
  display: flex;
  flex-direction: column;
}
.brand-designer > section > ul > li {
  font-size: min(3.3333333333vw, 24px);
  font-weight: 500;
  word-break: break-all;
  line-height: min(4.5833333333vw, 33px);
  letter-spacing: -0.03em;
}
.brand-designer > section > div > details {
  position: relative;
  z-index: 2;
}
.brand-designer > section > div > details > summary {
  list-style: none;
}
.brand-designer > section > div > details > summary > span {
  display: inline-block;
  font-size: min(3.3333333333vw, 24px);
  font-weight: 500;
  text-decoration: underline;
}
/* carryingBrand .brand-designer 모달 */
.brand-designer > section > div > details > summary > div {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
  pointer-events: none;
}
body:has(details[open]) {
  height: 100%;
  overflow: hidden;
}
body:has(details[open]) > nav {
  z-index: 1;
}
.brand-designer > section > div > details[open] > summary > div {
  height: 100vh;
  pointer-events: all;
  touch-action: none;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.8);
  opacity: 0.5;
  z-index: 2;
}
.brand-designer > section > div > details > aside {
  width: 87.5vw;
  max-width: 630px;
  background-color: #fff;
  border-radius: min(1.3888888889vw, 10px);
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  pointer-events: none;
  touch-action: none;
  z-index: 3;
}
.brand-designer > section > div > details > aside > header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #666;
}
.brand-designer > section > div > details > aside > header > div {
  width: 80%;
  pointer-events: all;
}
.brand-designer > section > div > details > aside > header > img {
  max-width: 20%;
  pointer-events: none;
  padding: min(5.2777777778vw, 38px);
}
.brand-designer > section > div > details > aside > ul {
  padding: min(4.1666666667vw, 30px) 0 min(2.7777777778vw, 20px) min(2.5vw, 18px);
  pointer-events: all;
  max-height: 70vh;
  overflow: scroll;
  display: flex;
  flex-direction: column-reverse;
}
.brand-designer > section > div > details > aside > ul > li {
  font-size: min(3.0555555556vw, 22px);
  font-weight: 500;
  word-break: break-all;
  list-style-type: '- ';
  margin: 0 min(4.1666666667vw, 30px) min(0.5555555556vw, 4px) min(3.0555555556vw, 22px);
  line-height: min(4.5833333333vw, 33px);
}
.brand-slogan ~ footer {
  margin-top: min(3.0555555556vw, 22px);
}
/* room & amenity */
.amenity-overview {
  background: url(/am/img/amenities/categoryBg.webp) top center;
  background-size: contain;
  width: 100vw;
  max-width: 720px;
}
.room-overview {
  background: url(/am/img/room/categoryBg.webp) top center;
  background-size: contain;
  width: 100vw;
  max-width: 720px;
}
main.amenity-main,
main.room-main {
  background-color: #c8c8c8;
}
main.amenity-main {
  grid-template-rows: min-content min-content auto;
  padding: min(3.3333333333vw, 24px) 0;
}
main.room-main {
  padding: min(3.3333333333vw, 24px) 0 0;
}
main.amenity-main > div,
main.room-main > div {
  grid-column: 1/3;
}
main.room-main > div {
  box-sizing: border-box;
  width: 100vw;
  max-width: 720px;
  word-break: break-all;
}
main.room-main > div > h2 {
  grid-template-columns: auto;
  word-break: break-all;
}
main.amenity-main > div > h2 > small,
main.room-main > div > h2 > small {
  border: 1px solid #000;
  font-weight: 500;
}
main.amenity-main > section > a,
main.amenity-main > section > button,
main.room-main > section > a,
main.room-main > section > button {
  font-weight: 500;
  line-height: 1.1;
}
main.amenity-main > section > a,
main.room-main > section > a {
  color: #fff;
  background-color: #834a42;
}
main.amenity-main > section > button,
main.amenity-main > section > input,
main.room-main > section > button {
  background-color: #091123;
  color: #fff;
  border: none;
}
main.amenity-main > p {
  font-size: min(3.3333333333vw, 24px);
  font-weight: 400;
  grid-column: 1/3;
  grid-row: 2/3;
  margin: 0 min(4.1666666667vw, 30px);
  line-height: 1.2;
  align-self: flex-start;
}
main.amenity-main > table,
main.amenity-main > section {
  grid-row: 3/4;
  margin-top: min(2.5vw, 18px);
}
main.room-main > section > a,
main.room-main > section > button {
  width: 25vw;
  max-width: 180px;
}
main.room-main + .swiper.square {
  background-color: #c8c8c8;
}
/* casino */
main.casino-main {
  background: url(/am/img/casino/mainBg.webp) no-repeat;
  background-size: cover;
  color: #fff;
  padding: min(3.3333333333vw, 24px) 0 0;
}
main.casino-main > div > h2 {
  grid-template-columns: min(46.9444444444vw, 338px) max-content;
}
main.casino-main > div > h2 > small {
  color: #890a0a;
  background-color: #fff;
}
.swiper.casino-recommend {
  background: url(/am/img/casino/mainSwiperBg.webp) no-repeat;
  background-size: cover;
  color: #fff;
}

.addPd-35 {padding-bottom: min(4.8611111111vw, 35px);}
.playBtns{
  position: absolute;
  width: 16vw;
  height: 16vw;
  max-width: 115px;
  max-height: 115px;
}
.mainIndex:not(.card) > .swiper-wrapper > .swiper-slide > img {
  width: 39.5833333333vw;
  height: 52.7777777778vw;
  max-width: 285px;
  max-height: 380px;
  border-radius: min(1.3888888889vw, 10px);
}

.sig_paddings {padding: min(7.9166666667vw, 57px) 0 min(10vw, 72px) min(6.25vw, 45px);}
.card.mainIndex {background-size: cover !important;}

/* 팝업 스와이퍼 페이지네이션 수정 (min 720) */
#tmpls .popup-swiper .swiper-pagination {
	width: fit-content !important;
	height: min(2.222vw, 16px) !important;
	margin: 0 auto !important;
	padding: min(0.555vw, 4px) min(1.944vw, 14px) !important;
	position: absolute !important;
	top: min(1.666vw, 12px) !important;
	/* bottom: min(1.666vw, 12px) !important; */
	left: 50% !important;
	transform: translateX(-50%) !important;
	gap: min(0.555vw, 4px);
	background: rgba(0, 0, 0, 0.5) !important;
	border-radius: min(2.777vw, 20px) !important;
}

#tmpls .popup-swiper .swiper-pagination,
#tmpls .popup-swiper .swiper-pagination span {
	color: #FFFFFF !important;
	font-size: min(1.944vw, 14px) !important;
}

#tmpls .popup-swiper .swiper-pagination-bullet {
	display: none !important;
}

#tmpls .popup-swiper {
	/*padding-bottom: min(2.777vw, 20px) !important;*/
	background: #FFFFFF;
}

/*#tmpls .swiper-wrapper {*/
/*	margin-bottom: min(4.166vw, 30px);*/
/*}*/

/*#tmpls .popupMain .swiper-wrapper {*/
/*  margin-bottom: 0 !important;*/
/*}*/

/* 이미지 + 쿠폰 다운로드 같이 있을 경우 쿠폰 다운로드 영역이 화면에서 잘림 */
#tmpls .swiper-slide.swiper-slide-active {
	/* active 슬라이드만 overflow: hidden 제거 */
	overflow: visible !important;
}

/* 이미지만 있는 경우 화면 높이 조정 */
#tmpls .swiper-slide:not(:has(a[href*="imageDownloadAjax"])) a:first-child {
	height: auto !important;
	max-height: min(106.944vw, 770px) !important;
	flex: 1 0 auto !important; /* 남은 여백 차지 */
}

/* 이미지만 있는 경우 화면 높이 조정 */
#tmpls .swiper-slide:not(:has(a[href*="imageDownloadAjax"])) a:first-child img {
	aspect-ratio: auto !important; /* 모바일 화면에서도 꽉 차도록 */
}

.popup-p-pg-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.popup-p-pg-box {
	width: 100%;
	height: 100%;
	padding: min(1.944vw, 14px);
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}

.popup-p-pg-box:first-child {
	border-right: 1px solid #B1B8C0;
}