/*--- Start of reset ---*/
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
figure,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

img,
picture,
video,
canvas,
svg {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus,
a:hover {
  text-decoration: underline;
}

ul,
ol {
  list-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

button {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

button:disabled {
  cursor: default;
  opacity: 0.6;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 0%;
}

[contenteditable] {
  outline: none;
}

em,
i {
  font-style: normal
}

/*--- End of reset ---*/


/*--- Start of common ---*/

:root {
  --text: 24, 24, 27;
  --white: 255, 255, 255;
  --black: 0, 0, 0;
  --accent: 255, 63, 122;
  --gray: 98, 107, 123;
  --ease: cubic-bezier(0, 1.5, 0.52, 1);
  --ease-light: cubic-bezier(0, 1.2, 0.85, 1);
}


body {
  background: url(../img/bg-pattern.jpg) repeat center;
  color: rgb(var(--text));
  letter-spacing: 0;
  line-height: 1.35;
  font-family: 'Pretendard', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}

body.resizing * {
  transition: none !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: forwards !important;
}

.saira {
  font-family: 'Saira' !important;
}

#container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.wrap {
  position: relative;
  margin: 0 auto;
}

.sub-section {
  background: url(../img/bg.jpg) no-repeat center top
}

@media (min-width: 1081px) {
  html {
    font-size: 100px;
  }

  .pc-only {
    display: block !important
  }

  .mo-only {
    display: none !important
  }

  #container {
    max-width: 25.6rem;
  }

  .wrap {
    width: 19.2rem;
  }

  .sub-section {
    background-size: 25.6rem auto;
  }

  .sub-section .wrap {
    width: 10rem
  }
}

@media (max-width: 1080px) {
  html {
    font-size: calc((100vw / 1080) * 100px)
  }

  .pc-only {
    display: none !important
  }

  .mo-only {
    display: block !important
  }

  .wrap {
    width: 100%;
  }

  .sub-section {
    background-size: 250% auto;
    background-position-x: left
  }

  .sub-section .wrap {
    width: 6.4rem
  }
}


.section {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.sec-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%
}

.section .wrap {
  z-index: 1
}

.section .kv {
  position: absolute
}

.sec-name {
  display: block;
  margin: .55rem auto 0
}

.sec-title {
  display: block;
  margin: 0 auto;
  position: relative
}

.sec-name+.sec-title {
  margin-top: .22rem
}


.deco-line {
  position: absolute
}

.deco-line::before,
.deco-line::after {
  content: "";
  display: block;
  position: absolute;
}

.deco-line::before {
  width: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: width .25s ease-in
}

.deco-line::after {
  height: 0;
  transition: height .25s ease-in
}

.deco-line.lft::before {
  right: 0;
}

.deco-line.lft::after {
  bottom: 0;
}

.deco-line.rgt::before {
  left: 0;
}

.deco-line.rgt::after {
  top: 0;
}

.round-bar {
  pointer-events: none;
  width: 25.6rem;
  height: 1.06rem;
  position: absolute;
  left: 50%;
  transform: rotate(-30deg) translate(-50%, -50%);
  transform-origin: 0 0;
  overflow: hidden;
}

.round-bar .box {
  position: absolute;
  box-shadow: .09rem .1rem 0 rgba(47, 17, 78, .2);
  width: .8rem;
  height: .53rem;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  border-radius: .27rem;
}

.round-bar .box::before,
.round-bar .box::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center
}

.round-bar .box::before {
  transform: translate(-50%, -50%);
}

.round-bar .box::after {
  transform: translate(50%, -50%);
}

.sec-title .deco-line {
  bottom: -.08rem;
  width: .6rem;
  height: .23rem
}

.sec-title .deco-line::before {
  height: .03rem;
  transition-duration: .45s;
  transition-delay: .4s;
}

.sec-title .deco-line::after {
  width: .03rem;
  transition-duration: .35s;
  transition-delay: .45s;
}

.sec-title .deco-line.lft {
  left: -1.16rem
}

.sec-title .deco-line.lft::after {
  right: .1rem
}

.sec-title .deco-line.rgt {
  right: -1.16rem
}

.sec-title .deco-line.rgt::after {
  left: .1rem
}

.sec-title.inview .deco-line::before {
  width: 100%;
}

.sec-title.inview .deco-line::after {
  height: 100%;
}

.sec-title .def {
  position: relative;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0s .6s ease-out;
}

.sec-title .act {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  transition: clip-path .3s .3s ease-out;
}

.sec-title.inview .act {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.sec-title.inview .def {
  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
}


/* tab-buttons */
.tab-buttons {
  display: flex;
  width: 100%;
  align-items: stretch;
  justify-content: center;
  gap: .09rem;
  height: .64rem;
}

.tab-buttons>li {
  flex: none;
  overflow: hidden
}

.tab-buttons .tab-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  font-size: 1px;
  line-height: 0;
  right: 100%;
  bottom: 100%;
  opacity: 0;
}

.tab-buttons .tab-label {
  width: 2.78rem;
  height: .64rem;
  padding: .18rem 0;
  position: relative;
  display: block;
  transition: all .15s;
  background-color: transparent;
  cursor: pointer;
}

.tab-buttons .tab-label .txt {
  font-weight: 600;
  letter-spacing: -.05em;
  display: block;
  text-align: center;
}

.tab-buttons .tab-label .line {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-width: .01rem;
  border-style: solid;
  border-color: #545454;
  color: rgb(var(--text));
  transition: all .15s;
  pointer-events: none;
}

.tab-buttons .tab-label .line::before,
.tab-buttons .tab-label .line::after {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url(../img/tab-off.png)
}


.tab-buttons .tab-label .line::after {
  opacity: 0
}

.tab-buttons .tab-radio+.tab-label:hover,
.tab-buttons .tab-radio:checked+.tab-label {
  background-color: #3b5287;
  color: rgb(var(--white));
}

.tab-buttons .tab-radio:checked+.tab-label .line {
  border-color: #bfa3ff
}

.tab-buttons .tab-radio:checked+.tab-label .line::before,
.tab-buttons .tab-radio:checked+.tab-label .line::after {
  opacity: 1;
  background-image: url(../img/tab-on.png)
}

.tab-buttons>li:first-child .tab-label,
.tab-buttons>li:first-child .tab-label .line {
  border-radius: 0 .15rem 0 .15rem
}

.tab-buttons>li:first-child .tab-label .line::before {
  left: 0;
  top: 0
}

.tab-buttons>li:first-child .tab-label .line::after {
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

.tab-buttons>li:first-child .tab-radio:checked+.tab-label .line {
  border-radius: 0 .14rem 0 .14rem
}

.tab-buttons>li:last-child .tab-label,
.tab-buttons>li:last-child .tab-label .line {
  border-radius: .15rem 0 .15rem 0
}

.tab-buttons>li:last-child .tab-label .line::before {
  right: 0;
  top: 0;
  transform: rotate(90deg);
}

.tab-buttons>li:last-child .tab-label .line::after {
  left: 0;
  bottom: 0;
  transform: rotate(270deg);
}

.tab-buttons>li:last-child .tab-radio:checked+.tab-label .line {
  border-radius: .14rem 0 .14rem 0
}


.tab-details {
  position: relative
}

.tab-details .tab-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 1
}

.tab-details .tab-content.visible {
  opacity: 1;
  pointer-events: fill;
  z-index: 2
}


/* swiper-container */
.swiper-container {
  overflow: hidden
}


/* divider */
.divider {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: .34rem;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  left: 0;
  transform: translateY(50%)
}

.divider::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: .14rem;
  height: .14rem;
  background: url(../img/deco-star.png) no-repeat center / contain;
  margin-left: -.115rem;
  margin-top: -.07rem;
  animation: divider-star-ani 3s linear infinite;
}

@keyframes divider-star-ani {
  0% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}


/* kv */
.sub-section .kv {
  position: absolute;
}

.sub-section .kv.lft,
.sub-section .kv.rgt {
  top: 50%;
  height: 5rem;
  width: 5rem;
  margin-top: -2.5rem;
}

.sub-section .kv.lft {
  right: 50%;
  margin-right: 5rem;
}

.sub-section .kv.rgt {
  left: 50%;
  margin-left: 5rem;
}

.sub-section .kv>span {
  position: absolute;
  display: block;
}


.sub-section .kv.on-reveal.lft {
  transform: translate3d(2.5%, 5%, 0);
}

.sub-section .kv.on-reveal.rgt {
  transform: translate3d(-2.5%, 5%, 0);
}

.sub-section .kv.on-reveal {
  opacity: 0;
  transition: opacity .35s ease-out, transform .35s ease-out;
}

.sub-section .kv.on-reveal.inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s, 0s
}

.sub-section .kv.on-reveal .char {
  transform: translate3d(0, 10%, 0);
  opacity: 0;
  transition: transform .45s ease-out, opacity .25s ease-out;
}

.sub-section .kv.inview .char {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .35s, .35s
}

.sub-section .kv.inview .char>img {
  animation: character-float 2s .5s ease-in-out infinite;
}

@keyframes character-float {
  0% {
    transform: translate3d(0, .5%, 0);
  }

  50% {
    transform: translate3d(0, -1%, 0);
  }

  100% {
    transform: translate3d(0, .5%, 0);
  }
}

@keyframes charactder-deco-type {
  0% {
    transform: rotate(0deg)
  }

  100% {
    transform: rotate(180deg)
  }
}


/* header */

#header {
  position: fixed;
  display: flex;
  align-items: center;
  transition: all .5s ease-out, left 0s;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}


#header.hide {
  background-color: rgba(var(--text), 0);
  backdrop-filter: blur(5px);
  transform: translateY(-300%);
}

#header h1 {
  flex: none;
  width: 3.2rem;
}

#header::after {
  content: "";
  display: block;
  width: 3.2rem
}

#header h1>a {
  width: 2.71rem;
  display: block;
  margin: 0 auto
}

#header nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0
}

#header nav a {
  flex: none;
  padding: .2rem .5rem;
  display: block;
  position: relative;
}

#header nav a em {
  font-size: .19rem;
  color: rgb(var(--white));
  font-weight: 700;
  line-height: .24rem;
  position: relative;
  display: inline-block
}

#header nav a em::before,
#header nav a em::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: .02rem;
  background-color: rgb(var(--white));
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  transition: width .3s ease
}


nav .deco-line {
  width: .14rem;
  height: .08rem
}

nav .deco-line.lft {
  bottom: 0;
  left: -.2rem
}

nav .deco-line.rgt {
  top: 0;
  right: -.2rem
}

nav .deco-line::before {
  height: .02rem;
  background-color: rgb(var(--gray));
}

nav .deco-line::after {
  width: .02rem;
  background-color: rgb(var(--accent));
}

nav .deco-line.lft::after {
  right: .03rem
}

nav .deco-line.rgt::after {
  left: .03rem
}

nav .active .deco-line::before {
  width: 100%;
}

nav .active .deco-line::after {
  height: 100%;
}

#header nav a.active em {
  color: rgb(var(--accent));
}

#header nav a:hover {
  text-decoration: none;
}

@media (min-width: 1081px) {

  #header {
    height: .64rem;
    min-width: 19.2rem;
    background-color: rgb(var(--text));
  }

  #header nav a:hover em {

    color: rgb(var(--accent));
  }

  .tab-buttons {
    margin-top: .45rem;
    margin-bottom: .3rem
  }

  .tab-buttons .tab-label .txt {
    font-size: .22rem;
    line-height: .28rem;
  }

  .tab-buttons .tab-radio:checked+.tab-label .line {
    left: .04rem;
    top: .04rem;
    right: .04rem;
    bottom: .04rem;
  }

  .tab-buttons .tab-label .line::before,
  .tab-buttons .tab-label .line::after {
    width: .3rem;
    height: .3rem;
  }
}

@media (max-width: 1080px) {

  #header {
    height: .9rem;
    background-color: rgb(var(--white));
  }

  #header nav {
    display: block;
    pointer-events: none;
    z-index: 2;
    flex: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: clip-path .2s ease-out, opacity .25s ease-out;
    opacity: 0;
    background: url(../img/m_nav-bg.jpg) repeat-y center top / cover
  }

  .nav-opened #header nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translateY(0) !important;
    opacity: 1;
    pointer-events: fill;
  }

  #header nav .nav-toggle {
    pointer-events: none;
  }

  .nav-opened #header>.nav-toggle {
    pointer-events: none;
  }

  .nav-opened #header nav .nav-toggle {
    pointer-events: fill;
  }

  .nav-toggle {
    position: absolute;
    right: 0;
    top: .05rem;
    width: .8rem;
    height: .8rem
  }

  #header nav .logo {
    width: 4.03rem;
    margin: 0 auto;
    flex: none;
    padding: .3rem 0
  }

  #header nav a {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    pointer-events: fill;
    height: 1.7rem;
    padding: 0;
    max-height: 16%;
  }

  #header nav a::before,
  #header nav a::after {
    content: "";
    display: block;
    min-height: .22rem;
    flex: 1
  }

  #header nav a+a::before {
    transform: translate3d(0, -.11rem, 0);
    width: 100vw;
    background: url(../img/program-divider.png) no-repeat center top / auto .22rem;
    filter: saturate(0);
  }

  #header nav a em {
    flex: none;
    color: rgb(var(--text));
    font-size: .3rem;
    line-height: .4rem;
  }

  #header nav a em::before,
  #header nav a em::after {
    display: none;
  }

  #nav .deco-line::before {
    height: .1rem;
    width: .03rem;
  }

  #nav .deco-line::after {
    width: .22rem;
    height: .03rem
  }

  #nav .deco-line.lft::before {
    right: .08rem;
    top: 80%
  }

  #nav .deco-line.rgt::before {
    left: .08rem;
    top: 20%
  }

  #nav .scroll-link .deco-line {
    display: none;
    opacity: 0
  }

  #nav .scroll-link.active .deco-line {
    display: block;
    opacity: 1
  }

  .tab-buttons {
    margin-top: .52rem;
    margin-bottom: .4rem
  }

  .tab-buttons .tab-label .txt {
    font-size: .24rem;
    line-height: .28rem;
  }

  .tab-buttons .tab-radio:checked+.tab-label .line {
    left: .05rem;
    top: .05rem;
    right: .05rem;
    bottom: .05rem;
  }

  .tab-buttons .tab-label .line::before,
  .tab-buttons .tab-label .line::after {
    width: .22rem;
    height: .22rem;
  }
}

/* home */

#home .sec-bg {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

#home>.wrap {
  position: relative;
}

#home .sec-name {
  width: 6.02rem
}

#home .agf-logo {
  width: 2.48rem;
  margin: 0 auto .28rem
}

#home .sec-title {
  width: 6.02rem;
  margin-bottom: .55rem
}

#home .summary-box {
  width: 3.96rem;
  height: .45rem;
  margin: 0 auto;
  font-size: 0;
  line-height: 0;
  display: flex;
  overflow: hidden;
  align-items: stretch;
}

#home .summary-box+.summary-box {
  margin-top: .13rem
}

#home .summary-box .subject {
  flex: none;
  width: 1.1rem;
  background-color: rgb(var(--text));
  color: rgba(var(--white), .89);
  font-size: .17rem;
  line-height: .21rem;
  font-weight: 600;
  text-align: center;
  border-radius: .17rem 0 0 0;
  padding: .12rem 0 .12rem .14rem;
  position: relative
}

#home .summary-box .content {
  flex: 1;
  border-radius: 0 0 .17rem 0;
  border: .02rem solid rgb(var(--text));
  color: rgb(var(--gray));
  border-left: none;
  font-size: .17rem;
  line-height: .21rem;
  font-weight: 600;
  text-align: center;
  padding: .1rem 0
}

#home .summary-box .subject::before {
  content: "";
  display: block;
  position: absolute;
  left: .15rem;
  top: 50%;
  margin-top: -.06rem;
  width: .12rem;
  height: .12rem;
  background: url(../img/deco-crosshair.png) no-repeat center / contain;
  opacity: .55
}

#home .kv {
  position: absolute;
  opacity: 0;
  transform: translate3d(-50%, -48%, 0) scale(1.03);
  transition: transform .75s ease-out, opacity .35s ease-out;
}

#home .kv>video {
  width: 100%;
  display: block;
  height: auto;
  object-fit: contain;
}

#home .kv.inview {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition-delay: .1s, .1s
}

#home .round-bar {
  top: 9.9rem;
  left: 33.96%;
}

#home .round-bar .box {
  background: #7e66ff;
  animation: home-round-bar-ani 4.5s var(--ease-light) infinite;
}

#home .round-bar .box::before {
  left: .3rem;
  width: .27rem;
  height: .27rem;
  background-image: url(../img/deco-crosshair.png)
}

#home .round-bar .box::after {
  right: .24rem;
  width: .21rem;
  height: .21rem;
  background-image: url(../img/deco-star.png)
}


#home .deco.circle {
  position: absolute;
  width: .87rem;
  left: 4.67rem;
  top: 10.22rem;
  animation: home-circle-ani 7s linear infinite;
}

@media (min-width: 1081px) {
  #home {
    margin-bottom: -1.95rem;
    background: url(../img/home-area.png) no-repeat center top / cover;
  }

  #home .sec-bg {
    width: 25.6rem;
    height: 100%;
    -webkit-mask-image: url('../img/home-mask.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    -webkit-mask-size: 100% auto;
    mask-image: url('../img/home-mask.png');
    mask-repeat: no-repeat;
    mask-position: center top;
    mask-size: 100% auto;
  }

  #home>.wrap {
    height: 10.23rem;
    display: flex;
    align-items: center;
  }

  #home>.wrap::after {
    content: "";
    display: block;
    flex: 1
  }

  #home>.wrap>.home-content {
    flex: none;
    width: 8rem;
    padding-bottom: .8rem
  }

  #home .kv {
    width: 19.2rem;
    top: 53.5%;
    left: 62.5%;
  }
}

@media (max-width: 1080px) {
  #home {
    margin-bottom: -.85rem;
    background: url(../img/m_home-area.png) no-repeat center bottom / 14.4rem auto;
  }

  #home .deco {
    display: none
  }

  #home .sec-bg {
    width: 14.4rem;
    height: 100%;
    -webkit-mask-image: url('../img/m_home-mask.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center bottom;
    -webkit-mask-size: 100% auto;
    mask-image: url('../img/m_home-mask.png');
    mask-repeat: no-repeat;
    mask-position: center bottom;
    mask-size: 100% auto;
  }

  #home>.wrap {
    padding-bottom: 8rem
  }

  #home>.wrap>.home-content {
    margin: 0 auto;
    width: 100%;
    padding-top: 1.28rem;
  }

  #home .kv {
    width: 13.44rem;
    bottom: -3.96rem;
    left: 49.35%;
  }


  #home .agf-logo {
    width: 1.6rem
  }

  #home .sec-title {
    width: 4.32rem;
    margin-bottom: .45rem
  }

  #home .summary-box {
    width: 4.16rem
  }

  #home .summary-box .subject {
    width: 1.2rem;
    font-size: .19rem;
    line-height: .23rem;
    font-weight: 600;
    border-radius: .19rem 0 0 0;
    padding: .12rem 0 .12rem .14rem;
  }

  #home .summary-box .content {
    flex: 1;
    border-radius: 0 0 .17rem 0;
    font-size: .19rem;
    line-height: .23rem;
    padding: .1rem 0
  }
}

@keyframes home-round-bar-ani {

  0%,
  100% {
    transform: translateX(250%);
    width: .8rem;
    opacity: 0;
  }

  22%,
  60% {
    transform: translateX(-50%);
    width: 1.81rem;
    opacity: .77;
  }

  92% {
    opacity: 0;
    width: 1.4rem;
  }

  95% {
    transform: translateX(-300%);
  }
}

@keyframes home-circle-ani {

  0% {
    transform: rotate(0deg) scale(1)
  }

  25% {
    transform: rotate(90deg) scale(1.1)
  }

  50% {
    transform: rotate(180deg) scale(1)
  }

  100% {
    transform: rotate(360deg) scale(1)
  }
}


/* booth */

#booth .sec-name {
  width: 1.91rem
}

#booth .sec-title {
  width: 1.97rem
}


#booth .tab-content {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}

#booth .frame {
  pointer-events: none;
  display: block;
  position: absolute;
  z-index: 100;
  height: auto;
}

#booth .swiper-button-prev,
#booth .swiper-button-next {
  display: none;
  position: absolute;
  width: .48rem;
  top: 2.38rem;
  background: none;
  pointer-events: fill;
}

#booth .swiper-button-prev:after,
#booth .swiper-button-next:after {
  display: none
}

#booth .swiper-button-prev {
  left: -.72rem
}

#booth .swiper-button-next {
  right: -.72rem;
  transform: rotateY(180deg)
}

#booth .swiper-button-prev:active>img,
#booth .swiper-button-next:active>img {
  transform: scale(.975)
}

.sec-title .deco-line.lft::before {
  background-color: #da47eb;
}

.sec-title .deco-line.lft::after {
  background-color: #2e92c0;
}

.sec-title .deco-line.rgt::before {
  background-color: #3e20ab;
}

.sec-title .deco-line.rgt::after {
  background-color: #45b11b
}

#booth .kv {
  top: 62.25%
}

#booth .kv.lft .obj {
  left: 2.19rem;
  top: 1.86rem;
  width: 2.58rem;
}

#booth .kv.rgt .obj {
  left: 2.49rem;
  top: .17rem;
  width: .9rem;
}

#booth .char .deco {
  position: absolute;
}

#booth .char.ch-1 {
  left: 2.36rem;
  top: 3.37rem;
  width: 2.33rem;
  transition-delay: .55s
}

#booth .char.ch-1>img {
  animation-duration: 3.8s
}

#booth .char.ch-1 .deco {
  width: .22rem;
  left: .6rem;
  top: -.35rem;
  animation: charactder-deco-type .8s .5s steps(3) infinite
}

#booth .char.ch-2 {
  left: .38rem;
  top: -.3rem;
  width: 1.94rem;
  ;
}

#booth .char.ch-2 .deco {
  width: .29rem;
  left: 1.6rem;
  top: -.15rem;
  animation: charactder-deco-type .8s .5s steps(3) infinite reverse
}

#booth .char.ch-2>img {
  animation-duration: 3.5s
}

#booth .char.ch-3 {
  left: .93rem;
  top: 1.57rem;
  width: 2.33rem;
  transition-delay: .5s
}

#booth .char.ch-2>img {
  animation-duration: 3s
}


@media (min-width: 1081px) {
  #booth {
    padding-top: 2.55rem
  }

  #booth .divider {
    background-image: url(../img/booth-divider.png);
  }

  #booth .tab-content {
    width: 9.81rem;
  }

  #booth .tab-details {
    height: 7.24rem
  }

  #booth .frame {
    width: 10.04rem;
    left: -.02rem;
    top: -.11rem;
  }
}

@media (max-width: 1080px) {
  #booth {
    padding-top: 2.6rem;
    padding-bottom: .75rem
  }

  #booth .divider {
    display: none
  }


  #booth .tab-content {
    width: 6.04rem;
  }

  #booth .tab-details {
    height: 3.4rem
  }

  #booth .frame {
    width: 6.18rem;
    left: .11rem;
    top: -.06rem;
  }

  #booth .tab-buttons {
    margin-bottom: .2rem;
    margin-top: .95rem
  }

  #booth .kv.lft {
    margin: 0;
    right: 50%;
    margin-right: 1.8rem;
    left: auto;
    top: 2.65rem;
    width: 1.63rem;
  }

  #booth .kv.rgt {
    margin: 0;
    left: 50%;
    margin-left: 1.85rem;
    right: auto;
    top: 1.7rem;
    width: 1.63rem;
  }

  #booth .kv.lft .obj {
    width: .76rem;
    left: 1.12rem;
    top: -.34rem;
  }

  #booth .char.ch-1 .deco {
    width: .22rem;
    left: .35rem;
    top: -.3rem;
  }

  #booth .kv.rgt .obj {
    width: .63rem;
    left: 0rem;
    top: .34rem;
  }

  #booth .char.ch-2 .deco {
    width: .29rem;
    left: .85rem;
    top: -.35rem;
  }

  #booth .kv .obj.deco-1 {
    width: .67rem;
    left: .58rem;
    top: .24rem;
  }

  #booth .kv .char {
    width: 100%;
    position: static;
    transform: none;
  }

}



/* program */

#program .sec-name {
  width: 2.85rem
}

#program .sec-title {
  width: 1.87rem
}

#program .sec-title .deco-line.lft::before {
  background-color: #476beb;
}

#program .sec-title .deco-line.lft::after {
  background-color: #2ec043;
}

#program .sec-title .deco-line.rgt::before {
  background-color: #ab2047;
}

#program .sec-title .deco-line.rgt::after {
  background-color: #1b8fb1
}

#program .notice {
  display: block;
  color: rgba(var(--black), .8);
  font-weight: 500;
  letter-spacing: -.03em;
}

#program .content {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

#program .frame {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.program-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.day {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: .04rem;
}

.day-header {
  flex: none;
  width: 100%;
  text-align: center;
  background: #404048;
  font-weight: 600;
  font-size: .18rem;
  letter-spacing: -.03em;
  line-height: .24rem;
  padding: .12rem 0
}

.program-grid .day-1 .day-header {
  border-radius: .2rem 0 .2rem 0;
  color: #ee5aff
}

.program-grid .day-2 .day-header {
  border-radius: 0 0 .2rem .2rem;
  color: #5ac7ff
}

.program-grid .day-3 .day-header {
  border-radius: 0 .2rem 0 .2rem;
  color: #ffaf04
}

.program-grid .day-1 .day-body>.card:first-child {
  border-radius: 0 .2rem 0 0
}

.program-grid .day-1 .day-body>.card:last-child {
  border-radius: 0 0 0 .2rem
}

.program-grid .day+.day .day-body::before {
  content: "";
  display: block;
  position: absolute;
  width: .22rem;
  height: .22rem;
  background: url(../img/program-tb-star.png) no-repeat center / contain;
  top: -.13rem;
  left: -.13rem;
}

.program-grid .day-2 .day-body>.card:first-child {
  border-radius: .2rem .2rem 0 0
}

.program-grid .day-3 .day-body>.card:first-child {
  border-radius: .2rem 0 0 0
}

.program-grid .day-3 .day-body>.card:last-child {
  border-radius: 0 0 .2rem 0
}

.day-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .04rem;
}

.day-body>.card {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.day-body>.card.short {
  flex: 0.5;
}

.day-body>.empty-box {
  flex: 1;
  background: url(../img/program-tb-pattern.jpg) repeat center
}

.program-grid .card>img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transition: transform .25s ease-out
}

.program-grid .card:hover>img {
  transform: translate(-50%, -50%) scale(1.085)
}

.program-grid .card .cnt {
  position: absolute;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(var(--text), .8) 20%, rgba(var(--text), 0) 100%)
}

.program-grid .card .info {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  font-size: 0;
  line-height: 0
}

.program-grid .card .info::before,
.program-grid .card .info::after {
  content: "";
  display: block;
  flex: 1;
}

.program-grid .card .info .category {
  display: inline-block;
  color: #66fffd;
  flex: none;
  position: relative;
  font-weight: 300;
  padding-top: .3em;
  letter-spacing: .06em
}

.program-grid .card .info .category::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: .01rem;
  background: #66fffd;
  bottom: 0
}

.program-grid .card .info .name {
  font-weight: 600;
  flex: none;
  color: rgb(var(--white));
}

.program-grid .card .add {
  position: absolute;
  right: 0;
}

.program-grid .card .add .icon {
  display: block;
  background: rgba(var(--black), .42);
  border-radius: 100%
}


#program .kv.lft {
  top: 58.6%;
}

#program .kv .obj.deco-1 {
  width: 1.51rem;
  left: 1.26rem;
  top: -1.54rem
}

#program .kv .obj.deco-2 {
  width: .85rem;
  left: 1.95rem;
  top: 5.9rem
}

#program .kv .char {
  width: 4.48rem;
  left: 1.03rem;
  top: -1.06rem
}


@media (min-width: 1081px) {
  #program {
    padding-top: .65rem;
    padding-bottom: 1.5rem
  }

  #program .divider {
    background-image: url(../img/program-divider.png);
  }

  #program .content {
    width: 10rem;
    padding-top: .1rem
  }

  #program .frame {
    width: 10.13rem;
    top: -.04rem;
    left: -.06rem;
  }

  #program .notice {
    text-align: right;
    font-size: .14rem;
    line-height: .18rem;
    padding: .56rem .08rem .1rem;
  }

  .program-grid {
    width: 9.82rem;
    height: 5.24rem;
    gap: .04rem;
  }

  .program-grid .card .info {
    gap: .08rem;
  }

  .program-grid .card .info .category {
    font-size: .12rem;
    line-height: .15rem;
  }

  .program-grid .card .info .name {
    font-size: .2rem;
    line-height: .3rem;
  }

  .program-grid .card .add {
    width: .4rem;
    padding-bottom: .1rem;
    bottom: 0;
  }

  .program-grid .card .add .icon {
    width: .32rem;
  }
}

@media (max-width: 1080px) {
  #program {
    padding-top: .65rem;
    padding-bottom: .6rem
  }

  #program .sec-name {
    width: 1.83rem;
  }

  #program .divider {
    display: none
  }

  #program .content {
    width: 6rem;
    padding-top: .08rem
  }

  #program .frame {
    width: 6.12rem;
    top: -.06rem;
    left: -.06rem;
  }

  #program .notice {
    text-align: left;
    font-size: .18rem;
    line-height: .22rem;
    padding: .46rem .24rem .18rem;
  }

  #program .kv.lft {
    margin: 0;
    left: 50%;
    margin-left: .95rem;
    right: auto;
    top: -.08rem;
    width: 3.13rem
  }

  #program .kv .obj.deco-1 {
    width: .67rem;
    left: .58rem;
    top: .24rem;
  }

  #program .kv .char {
    width: 100%;
    position: static;
    transform: none;
  }

  .program-grid {
    width: 5.84rem;
    height: 5.24rem;
    gap: .04rem;
  }

  .program-grid .card .info {
    gap: .06rem;
  }

  .program-grid .card .info .category {
    font-size: .11rem;
    line-height: .16rem;
  }

  .program-grid .card .info .name {
    font-size: .18rem;
    line-height: .22rem;
  }

  .program-grid .card .add {
    width: .28rem;
    padding: .01rem;
    top: 0;
  }

  .program-grid .card .add .icon {
    width: .28rem;
  }
}


/* cast */
#cast {
  padding-top: .8rem
}

#cast .divider {
  background-image: url(../img/cast-divider.png);
}

#cast .kv {
  top: 58.6%;
}

#cast .kv.lft .obj {
  width: .59rem;
  left: 4.88rem;
  top: -.96rem
}

#cast .kv.rgt .obj {
  width: 1.69rem;
  left: 1.69rem;
  top: -2.91rem
}

#cast .kv .char {
  width: 5.44rem;
  left: -1.68rem;
  top: -.8rem
}

#cast .sec-name {
  width: 1.44rem
}

#cast .sec-title {
  width: 1.39rem
}



.cnt-bg {
  position: absolute
}

.cast-card {
  flex: none;
  position: relative;
  background: rgb(var(--text));
  transition: transform .3s var(--ease-light)
}

.cast-card .card-frame {
  overflow: hidden;
  position: absolute;
  left: .06rem;
  top: .06rem;
  bottom: .06rem;
  right: .06rem;
  border-radius: .36rem 0 .36rem 0;
  border-width: .02rem;
  border-style: solid
}

.cast-card::before,
.cast-card::after {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  -webkit-mask-image: url('../img/star-mask.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-size: 100% auto;
  mask-image: url('../img/star-mask.png');
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: 100% auto;
  width: .12rem;
  height: .12rem
}

.cast-card::before {
  left: .05rem;
  top: .05rem
}

.cast-card::after {
  right: .05rem;
  bottom: .05rem
}

.cast-card .card-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  /* Rendering hints to reduce blur/antialias on transformed layers */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}


.cast-card .icon {
  position: absolute;
  background: rgb(var(--black));
  border-radius: 100%;
  width: .43rem;
  height: .43rem;
}


.cast-card .card-inner::before {
  content: "";
  display: block;
  padding-top: 100%
}

.cast-card .profile {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: transform .3s ease-out
}

.cast-card .details {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center
}

.mc-grid {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cos-grid {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: start;
}

.cos-grid .cast-card[name="cos1"] {
  background-color: #cb4caf
}

.cos-grid .cast-card[name="cos1"] .card-frame {
  border-color: #ffa0f5
}

.cos-grid .cast-card[name="cos1"]::before,
.cos-grid .cast-card[name="cos1"]::after {
  background-color: #ffa0f5
}

.cos-grid .cast-card[name="cos2"] {
  background-color: #2f887f
}

.cos-grid .cast-card[name="cos2"] .card-frame {
  border-color: #5bb6be
}

.cos-grid .cast-card[name="cos2"]::before,
.cos-grid .cast-card[name="cos2"]::after {
  background-color: #5bb6be
}

.cos-grid .cast-card[name="cos3"] {
  background-color: #54597b
}

.cos-grid .cast-card[name="cos3"] .card-frame {
  border-color: #9f89f1
}

.cos-grid .cast-card[name="cos3"]::before,
.cos-grid .cast-card[name="cos3"]::after {
  background-color: #9f89f1
}

.cos-grid .cast-card[name="cos4"] {
  background-color: #2a5c9f
}

.cos-grid .cast-card[name="cos4"] .card-frame {
  border-color: #9f89f1
}

.cos-grid .cast-card[name="cos4"]::before,
.cos-grid .cast-card[name="cos4"]::after {
  background-color: #9f89f1
}

.cos-grid .cast-card[name="cos5"] {
  background-color: #e3557d
}

.cos-grid .cast-card[name="cos5"] .card-frame {
  border-color: #ffb38d
}

.cos-grid .cast-card[name="cos5"]::before,
.cos-grid .cast-card[name="cos5"]::after {
  background-color: #ffb38d
}

.cos-grid .cast-card[name="cos6"] {
  background-color: #2f887f
}

.cos-grid .cast-card[name="cos6"] .card-frame {
  border-color: #5bb6be
}

.cos-grid .cast-card[name="cos6"]::before,
.cos-grid .cast-card[name="cos6"]::after {
  background-color: #5bb6be
}

.cos-grid .cast-card[name="cos7"] {
  background-color: #2a5c9f
}

.cos-grid .cast-card[name="cos7"] .card-frame {
  border-color: #9f89f1
}

.cos-grid .cast-card[name="cos7"]::before,
.cos-grid .cast-card[name="cos7"]::after {
  background-color: #9f89f1
}

.cos-grid .cast-card[name="cos8"] {
  background-color: #54597b
}

.cos-grid .cast-card[name="cos8"] .card-frame {
  border-color: #9f89f1
}

.cos-grid .cast-card[name="cos8"]::before,
.cos-grid .cast-card[name="cos8"]::after {
  background-color: #9f89f1
}

.cos-grid .cast-card[name="cos9"] {
  background-color: #88632f
}

.cos-grid .cast-card[name="cos9"] .card-frame {
  border-color: #b6ad46
}

.cos-grid .cast-card[name="cos9"]::before,
.cos-grid .cast-card[name="cos9"]::after {
  background-color: #b6ad46
}

.cos-grid .cast-card[name="cos10"] {
  background-color: #ed6b1d
}

.cos-grid .cast-card[name="cos10"] .card-frame {
  border-color: #ffb38d
}

.cos-grid .cast-card[name="cos10"]::before,
.cos-grid .cast-card[name="cos10"]::after {
  background-color: #ffb38d
}

#cast .cast-card:disabled,
#cast .cast-card[disabled] {
  background-color: #858585 !important;
  pointer-events: none !important;
  cursor: default;
}

#cast .cast-card:disabled .card-frame,
#cast .cast-card[disabled] .card-frame {
  border-color: #a9a9a9
}

#cast .cast-card:disabled::before,
#cast .cast-card:disabled::after,
#cast .cast-card[disabled]::before,
#cast .cast-card[disabled]::after {
  background-color: #a9a9a9
}

.cast-card .details {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  bottom: 0;
  height: 50%;
  text-align: center;
  background: linear-gradient(to top, rgba(var(--text), .8) 0%, rgba(var(--text), 0) 100%);
}

.cast-card .details .name,
.cast-card .details .coming-soon,
.cast-card .details .dday {
  position: absolute;
  font-family: 'Saira';
  font-weight: 700;
  letter-spacing: .1em;
}

.cast-card .details .coming-soon {
  font-size: .16rem;
  line-height: .2rem
}

.mc-grid .cast-card .details .name {
  font-size: .22rem;
  line-height: .26rem
}

.cast-card .details .dday {
  opacity: .7;
  bottom: .42rem;
  left: 0;
  width: 82%;
  font-size: .24rem;
  line-height: .3rem;
  padding-bottom: .06rem
}

.cast-card .details .dday::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: .64rem;
  left: 50%;
  margin-left: -.32rem;
  height: .01rem;
  background: #d1d1d1;
  opacity: .7
}


.cast-card .details .coming-soon {
  bottom: .88rem;
  left: 0;
  width: 90%;
}

#cast .cnt-bg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

#cast .cnt-bg .lft {
  position: absolute;
  width: 1.79rem;
  left: -.44rem;
  top: .04rem
}

#cast .cnt-bg .rgt {
  position: absolute;
  width: 1.92rem;
  left: 7.92rem;
  top: 3.35rem
}

@media (min-width: 1081px) {

  #cast .tab-buttons {
    margin-top: .5rem;
    margin-bottom: .56rem
  }

  .cast-card {
    transform: skewX(-16.5deg);
  }

  .cos-grid .cast-card:hover {
    transform: scale(1.1) skewX(-16.5deg);
  }

  .mc-grid .cast-card:hover {
    transform: scale(1.065) skewX(-16.5deg);
  }

  .cast-card .card-inner {
    transform: translate3d(-50%, -50%, 0) skewX(16.5deg);
  }

  .cast-card .icon {
    top: 100%;
    left: 52.5%;
    transform: translate3d(-50%, -50%, 0) skewX(16.5deg) scale(0);
    box-shadow: .09rem .09rem .03rem rgba(46, 47, 55, .23);
    transition: transform .25s
  }

  .cast-card:hover .icon {
    transform: translate3d(-50%, -50%, 0) skewX(16.5deg) scale(1);
  }

  .cast-card .details .name,
  .cast-card .details .coming-soon,
  .cast-card .details .dday {
    color: #d1d1d1;
  }

  .cast-card:hover .name {
    color: rgb(var(--white));
  }

  .cast-card .details .name {
    bottom: .32rem;
    left: 0;
    width: 78%;
  }

  .cos-grid {
    width: 10rem;
    gap: .07rem
  }

  .cos-grid .cast-card {
    width: 1.81rem;
    height: 2.89rem;
  }

  .cos-grid .cast-card[name="cos6"] {
    margin-left: .06rem;
  }

  .cos-grid .cast-card:hover {
    z-index: 10;
    box-shadow: .09rem .09rem .03rem rgba(46, 47, 55, .23);
  }

  .cos-grid .cast-card:hover .profile {
    transform: scale(1.12);
  }

  .cos-grid .card-inner {
    width: 2.88rem;
  }

  .cos-grid .cast-card .details .name {
    font-size: .16rem;
    line-height: .2rem
  }

  .mc-grid .cast-card .details .name {
    font-size: .22rem;
    line-height: .26rem
  }

  .mc-grid .card-inner {
    width: 3.68rem;
  }

  .mc-grid {
    width: 10rem;
    margin: .5rem auto 0;
    gap: .38rem;
  }

  .mc-grid .cast-card {
    width: 2.72rem;
    height: 3.8rem;
    box-shadow: .13rem .13rem .03rem rgba(46, 47, 55, .23);
  }

  .mc-grid .cast-card .profile {
    /*filter: saturate(.15);*/
    top: -12.5%
  }
  .mc-grid .cast-card[name="mc2"] .profile {
    top: 0
  }

  .mc-grid .cast-card:hover {
    z-index: 10;
  }

  .mc-grid .cast-card:hover .profile {
    transform: scale(1.12);
    /*filter: saturate(1)*/
  }

  .mc-grid .cast-card {
    /*background-color: #666a70*/
    background-color: #e3557d
  }

  .mc-grid .cast-card .card-frame {
    /*border-color: #cec3be*/
    border-color: #ffb38d
  }

  .mc-grid .cast-card::before,
  .mc-grid .cast-card::after {
    /*background-color: #cec3be*/
    background-color: #ffb38d
  }

  .mc-grid .cast-card[name="mc1"] {
    background-color: #f8d03f
  }


  .mc-grid .cast-card.guest {
    background-color: #2884d2
  }

  .mc-grid .cast-card.guest .card-frame {
    border-color: #90e0e9
  }

  .mc-grid .cast-card.guest::before,
  .mc-grid .cast-card.guest::after {
    background-color: #90e0e9
  }

  #cast .tab-details {
    height: 7.4rem
  }

}

@media (max-width: 1080px) {
  #cast {
    padding-bottom: .75rem
  }

  #cast .divider {
    display: none
  }

  #cast .tab-buttons {
    margin-top: .52rem;
    margin-bottom: .4rem
  }

  .cast-card {
    transform: scale(1);
  }

  .cast-card .card-inner {
    transform: translate3d(-50%, -50%, 0);
  }

  .cast-card .icon {
    transform: translate3d(-50%, 0, 0);
    left: 50%;
  }

  .cast-card .details .name {
    left: 25%;
    width: 50%;
    color: rgb(var(--white));
    font-weight: 600;
    text-shadow: 0 0 .35rem rgba(47, 17, 78, .2), 0 .02rem .16rem rgba(47, 17, 78, .8);
  }

  .cos-grid {
    align-items: center;
    justify-content: center;
    width: 6rem;
    gap: .05rem
  }

  .cos-grid .cast-card {
    width: 1.46rem;
    height: 2.36rem;
  }

  .cos-grid .card-inner {
    width: 2.3rem;
  }

  .cos-grid .cast-card .details .name {
    bottom: .62rem;
    font-size: .18rem;
    line-height: .18rem
  }

  .cos-grid .cast-card .icon {
    bottom: .14rem
  }

  .mc-grid .cast-card .details .name {
    bottom: .72rem;
    font-size: .18rem;
    line-height: .18rem
  }

  .mc-grid .cast-card .icon {
    bottom: .18rem
  }

  .mc-grid .card-inner {
    width: 3.18rem;
  }
  .mc-grid .cast-card[name="mc2"] .card-inner {
    width: 4.72rem;
  }

  .mc-grid {
    width: 6rem;
    margin: 0 auto;
    gap: .14rem;
  }

  .mc-grid .cast-card {
    width: 1.91rem;
    height: 4.81rem;
  }

  .mc-grid .cast-card::before,
  .mc-grid .cast-card::after {
    background-color: #cec3be
  }

  .mc-grid .cast-card {
    background-color: #e3557d
  }

  .mc-grid .cast-card .card-frame {
    border-color: #ffb38d
  }

  .mc-grid .cast-card::before,
  .mc-grid .cast-card::after {
    background-color: #ffb38d
  }

  .mc-grid .cast-card.guest {
    background-color: #2884d2
  }

  .mc-grid .cast-card.guest .card-frame {
    border-color: #90e0e9
  }

  .mc-grid .cast-card.guest::before,
  .mc-grid .cast-card.guest::after {
    background-color: #90e0e9
  }

  #cast .tab-details {
    height: 7.18rem
  }

  #cast .kv.lft {
    left: 50%;
    right: auto;
    margin: 0;
    bottom: auto;
    height: auto;
    margin-left: 3.1rem;
    width: .69rem;
    top: 2.4rem;
  }

  #cast .kv.lft .obj {
    position: static;
    width: 100%
  }

  #cast .kv.rgt {
    margin: 0;
    right: 50%;
    left: auto;
    margin-right: 2.15rem;
    width: 1.04rem;
    top: 75%;
  }

  #cast .kv.rgt .obj-1 {
    position: static;
    width: 100%
  }

  #cast .kv.rgt .obj-2 {
    width: .52rem;
    left: 100%;
    top: 1.55rem;
  }
}


/* goods */

#goods .sec-name {
  width: 1.91rem
}

#goods .sec-title {
  width: .92rem
}

.goods-info {
  margin: 0 auto;
  position: relative;
  background: url(../img/goods-box-pattern.jpg) repeat center;
  box-shadow: .04rem .04rem .04rem rgba(128, 140, 190, .22);
  border-radius: .3rem .3rem 0 0
}

.goods-info::before,
.goods-info::after {
  content: "";
  display: block;
  position: absolute;
  width: .46rem;
  height: .46rem;
  background: url(../img/goods-box-deco.png) no-repeat center / contain;
  bottom: 0;
}

.goods-info::before {
  left: 0
}

.goods-info::after {
  right: 0;
  transform: rotateY(180deg);
}

.goods-info .desc {
  display: flex;
  width: 100%;
  height: fit-content;
  justify-content: center;
  flex-direction: column;
}

.goods-info .desc::before,
.goods-info .desc::after {
  content: "";
  display: block;
  flex: 1
}

.goods-info .desc>p {
  flex: none;
  color: #252930;
  font-weight: 600;
  letter-spacing: -.05em;
}

.goods-info .desc>p strong {
  font-weight: 600;
}

.goods-showcase {
  margin: 0 auto;
  margin-top: .1rem
}
.goods-showcase > img{
  image-rendering: -moz-crisp-edges; 
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

#goods .cnt-bg {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none
}

#goods .character,
#goods .cnt-bg .lft,
#goods .cnt-bg .rgt {
  position: absolute;
  width: 5.44rem;
  height: auto;
  pointer-events: none
}

#goods .cnt-bg .lft,
.tab-content[name="goodsTab1"] .character {
  left: -3.82rem;
  top: -.44rem
}

.tab-content[name="goodsTab1"] .goods-info .desc>p strong {
  color: #3463b4
}

.tab-content[name="goodsTab2"] .goods-info .desc>p strong {
  color: #7634b4
}

#goods .cnt-bg .rgt,
.tab-content[name="goodsTab2"] .character {
  right: -3.82rem;
  top: -.52rem
}


#goods .tab-content .cnt-bg .lft {
  transform: translate3d(2.5%, 5%, 0);
}

#goods .tab-content .cnt-bg .rgt {
  transform: translate3d(-2.5%, 5%, 0);
}

#goods .tab-content .cnt-bg>span {
  opacity: 0;
  transition: opacity .35s ease-out, transform .35s ease-out;
}

#goods .tab-content.visible .cnt-bg>span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s, 0s
}

#goods .tab-content .character {
  transform: translate3d(0, 10%, 0);
  opacity: 0;
  transition: transform .45s ease-out, opacity .25s ease-out;
}

#goods .tab-content.visible .character {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: .15s, .15s
}

#goods .tab-content.visible .character>img {
  animation: character-float 2s .5s ease-in-out infinite;
}

.showcase-light {
  position: absolute;
  width: 6.77rem
}

.showcase-light.rgt {
  transform: rotateY(180deg)
}

.showcase-light>span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 0
}

.showcase-light .overlay {
  mix-blend-mode: overlay;
  background-image: url(../img/goods-light-overlay.png)
}

.showcase-light .dodge {
  mix-blend-mode: color-dodge;
  opacity: .6;
  filter: sepia(.5);
  background-image: url(../img/goods-light-dodge.png)
}

@media (min-width: 1081px) {
  #goods {
    padding-top: 1.25rem
  }

  #goods .tab-details {
    height: 8rem
  }

  .goods-info {
    width: 9.75rem;
  }

  .goods-showcase {
    width: 10.2rem;
    margin-left: -.1rem;
  }

  .showcase-light {
    bottom: .5rem;
  }

  .showcase-light.lft {
    left: -.52rem
  }

  .showcase-light.rgt {
    right: -.52rem;
  }

  .goods-info .desc {
    min-height: 1.2rem;
    padding: 0 .24rem;
  }

  .goods-info .desc .deco {
    position: absolute;
    left: .72rem;
    right: .72rem;
    top: 50%;
    height: 0;
    top: 50%;
    pointer-events: none;
  }

  .goods-info .desc .deco::before,
  .goods-info .desc .deco::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -.18rem;
    width: .36rem;
    height: .36rem;
    -webkit-mask-image: url('../img/star-mask.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/star-mask.png');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: #b4b7e4
  }

  .goods-info .desc .deco::before {
    left: 0
  }

  .goods-info .desc .deco::after {
    right: 0
  }

  .goods-info .desc>p {
    text-align: center;
    font-size: .22rem;
    line-height: .26rem;
  }
}

@media (max-width: 1080px) {
  #goods {
    padding-top: .65rem
  }

  #goods .tab-details {
    height: 8.65rem
  }

  .goods-info {
    width: 6rem;
    z-index: -1;
  }

  .goods-showcase {
    width: 8.12rem;
    margin-left: -1.03rem;
  }

  .showcase-light {
    bottom: .6rem;
  }

  .showcase-light.lft {
    left: -1rem
  }

  .showcase-light.rgt {
    right: -1rem;
  }

  .goods-info .desc {
    min-height: 2.04rem;
  }

  .goods-info .desc>p {
    text-align: left;
    font-size: .195rem;
    line-height: .28rem;
    padding: 0;
  }

  .tab-content[name="goodsTab1"] .goods-info .desc>p {
    padding-left: 1.9rem
  }

  .tab-content[name="goodsTab2"] .goods-info .desc>p {
    padding-left: .45rem
  }

  #goods .tab-content .character {
    z-index: -1
  }

  #goods .tab-content[name="goodsTab1"] .character {
    width: 3.64rem;
    left: -1.24rem;
    top: -.56rem
  }

  #goods .tab-content[name="goodsTab2"] .character {
    width: 3.88rem;
    left: 3.7rem;
    top: -.4rem;
    right: auto;
  }
}


/* footer */

#footer {
  position: relative;
  background-color: #252930;
  color: rgb(var(--white));
}

#footer .logo-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
}

#footer>.logo-list>li {
  flex: none;
  display: block;
  width: fit-content
}

#footer>.logo-list>li .neowiz {
  width: 1.6rem
}

#footer>.logo-list>li .gamfsn {
  width: 1.28rem
}


#footer .link-list {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  margin-bottom: .2rem
}

#footer .link-list li {
  display: block;
  flex: none;
  position: relative
}

#footer .link-list li+li::before {
  content: "";
  display: block;
  position: absolute;
  left: -.01rem;
  width: .01rem;
  background: #f3e0ff;
  opacity: .02rem;
  top: 50%;
  height: .1rem;
  margin-top: -.05rem
}

#footer .link-list a {
  display: block;
  padding: 0 .11rem;
  color: #f3e0ff;
  font-weight: 300;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer
}

#footer .copyright {
  text-align: center;
  font-size: .14rem;
  letter-spacing: .2em;
  line-height: .19rem;
  color: #848484;
  font-weight: 300;
}

@media (min-width: 1081px) {
  #footer {
    padding: .75rem 0 0
  }

  #footer>.footer-content {
    padding: .4rem 0 1.6rem
  }

  #footer .link-list a {
    font-size: .16rem;
    line-height: .21rem;
  }
}

@media (max-width: 1080px) {
  #footer {
    padding: .6rem 0 0
  }

  #footer>.footer-content {
    padding: .54rem 0 1rem
  }

  #footer .link-list a {
    font-size: .18rem;
    line-height: .24rem;
  }
}



/* modal */
.modal-layer {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  z-index: 3000;
}

.modal-layer.visible {
  display: flex
}

.modal-dim {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  pointer-events: none;
  background: rgba(0, 0, 0, .7);
  transition: opacity .25s ease-out
}

.modal-layer.visible .modal-dim {
  pointer-events: fill;
  opacity: 1
}

.modal-layer .btn-close {
  position: absolute;
  width: .4rem;
  right: .2rem;
  pointer-events: fill;
}

.modal-popup {
  display: none;
  z-index: 10;
  position: absolute;
  left: 50%;
  top: calc(50% + .2rem);
  transform: translate(-50%, -50%);
  margin: 0 auto;
  height: auto;
  transition: transform .25s var(--ease-light);
  pointer-events: none;
  box-sizing: border-box;
}

.modal-popup.visible {
  display: block;
  pointer-events: auto;
}

.popup-container {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.popup-container .name {
  position: relative;
  display: block;
  font-weight: 600;
  font-size: .24rem;
  line-height: .28rem;
  padding: .06rem 0;
  padding-left: .23rem;
  color: rgb(var(--white))
}

.popup-container .name::before,
.popup-container .name::after {
  content: "";
  display: block;
  position: absolute
}

.popup-container .name::before {
  left: 0;
  top: 100%;
  height: .02rem;
  width: .18rem;
  background: #ce215e
}

.popup-container .name::after {
  left: .03rem;
  bottom: -.03rem;
  width: .02rem;
  height: .18rem;
  background: #7483c0
}

.popup-container .name small {
  font-weight: 300;
  display: inline-block;
  vertical-align: baseline;
  font-size: .18rem;
  color: #d48585;
  margin-left: .07rem
}

.popup-container .pic {
  overflow: hidden;
  border-radius: .46rem 0 .46rem 0;
  margin: .15rem auto
}

.popup-container .words {
  height: 1.8rem
}

.popup-container .words>p {
  font-weight: 300;
  font-size: .16rem;
  line-height: .28rem;
  word-wrap: break-word;
  word-break: keep-all;
}

.popup-container .words .subject {
  color: rgb(var(--white));
  width: 2rem;
  text-align: center;
  padding: .05rem 0;
  border-radius: .2rem;
  background: #333;
  margin-left: -.04rem
}

.popup-container .words .content {
  color: #bebebe;
}

.popup-container .links {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: .06rem;
  padding-right: .13rem
}

.popup-container .links>a {
  display: block;
  flex: none;
  width: .4rem;
  border-radius: 100%;
  background: #41414a
}

.modal-layer .btn-close:active,
.popup-container .links>a:active {
  transform: scale(.95)
}

#programDetailModal .words>p {
  letter-spacing: -.03em
}

#programDetailModal .pic {
  max-height: 4.1rem
}

@media (min-width: 1081px) {
  .modal-popup {
    width: 6.87rem;
  }

  .modal-layer .btn-close {
    top: .24rem;
  }

  .popup-container .name::before {
    height: .02rem;
    width: .18rem;
  }

  .popup-container .name::after {
    width: .02rem;
    height: .18rem;
  }

  #programDetailModal .words>p {
    font-size: .16rem;
    line-height: .22rem;
  }

  .popup-container {
    padding: .24rem;
    padding-left: .27rem
  }

  .popup-container .words .content {
    padding: .13rem 0 0
  }
}

@media (max-width: 1080px) {
  .modal-popup {
    width: 6rem;
  }

  .modal-layer .btn-close {
    top: .2rem;
  }

  .popup-container .name::before {
    height: .04rem;
    width: .23rem;
    z-index: 1
  }

  .popup-container .name::after {
    width: .04rem;
    height: .23rem;
    bottom: -.07rem;
    z-index: 0
  }

  #programDetailModal .words>p {
    font-size: .18rem;
    line-height: .22rem;
    padding-left: .06rem;
    padding: 0
  }

  .popup-container {
    padding: .24rem .18rem;
    height: 100%;
  }

  .popup-container .words {
    height: auto
  }

  .popup-container .words .content {
    padding-left: 0;
    padding-right: 0
  }

  .popup-container .links {
    position: absolute;
    bottom: .32rem;
    right: .23rem
  }

  .popup-container .links>a {
    width: .55rem;
  }

  .popup-container .words .subject {
    width: 2rem;
    margin-bottom: .15rem
  }

  .popup-container .words>p {
    font-size: .18rem;
    line-height: .24rem
  }

  .popup-container .pic {
    margin-top: .12rem
  }
}