@charset "UTF-8";
@import url(https://fonts.bunny.net/css?family=noto-sans:400,700|noto-sans-jp:400,700|noto-sans-kr:400,700);
@import url('https://fonts.cdnfonts.com/css/muli');

/* reset */
* {box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
h1, h2, h3, h4, h5, h6, p {margin: 0; padding: 0;}
p {display: inline-block;}
ol, ul {margin: 0; padding: 0; list-style: none;}
a {text-decoration: none; color: inherit;}
button {padding: 0; cursor: pointer; line-height: 1.5; text-indent: -9999px;}
button, select {-webkit-appearance: none; background: none; border: none; outline: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
address {font-style: normal;}


html {overflow-x: hidden; font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: #0d0f13;}
::selection {color: #1c1d29; background-color: #d92e5b;}

body.en {font-family: 'Muli', -apple-system, sans-serif;}
body.kr {font-family: 'Muli', 'Noto Sans KR', -apple-system, sans-serif;}
body.jp {font-family: 'Muli', 'Noto Sans JP', -apple-system, sans-serif;}

#wrap {color: #c2c4ca; overflow-x: hidden;}


/* header */
#header {position: fixed; width: 100%; top: 0; background: #050608; color: #fff; z-index: 998;}
#header .header-inner {max-width: 1300px; width: 100%; height: 88px; margin: 0 auto; padding: 0 25px; display: flex; justify-content: space-between; align-items: center;}
#header .header-inner .logo a {display: flex;}
#header .header-inner .logo img {height: 40px;}

#header .gnb-wrap .lang-list {display: none;}

#header .gnb {display: flex; flex-direction: row;}
#header .gnb li {margin: 0 18px; position: relative; font-size: 16px; font-weight: 700; -webkit-font-smoothing: antialiased; cursor: pointer; z-index: 0;}
#header .gnb li:before {position: absolute; content: ''; left: -11px; right: -11px; top: -12px; bottom: -13px; border-radius: 10px; background: #d92e5b; z-index: -1; opacity: 0; transition: all 0.3s;}
#header .gnb li a {transition: all 0.3s;}
#header .gnb li img {width: 15px; height: 15px; filter: grayscale(1); margin-left: 4px; vertical-align: -2px;}

#header .btn-sound {display: none;}
.m-btn-menu {display: none;}

.inner {max-width: 1180px; width: 100%; margin: 0 auto; padding: 128px 12px 0;}
.tit {margin-bottom: 24px; font-size: 36px; font-weight: 700; -webkit-font-smoothing: antialiased; color: #fff;}

#main {height: 100vh; padding-top: 88px; align-content: center;}
#main .inner {padding: 0 12px;}
#main .main-vd-wrap .vd-wrap img {width: 100%;}
#main .main-vd-wrap .vd-wrap {position: relative;}
#main .main-vd-wrap .vd-wrap .btn-sound {position: absolute; right: 12px; bottom: 13px; width: 50px; height: 50px; background: url(../img/video-btn.png) no-repeat;}
#main .main-vd-wrap .vd-wrap .btn-sound.mute {background: url(../img/video-btn-mute.png) no-repeat;}

#main .m-main {display: none;}

#main .tit {margin: 45px 0; line-height: 1; font-weight: 900; text-align: center; font-size: 52px;}
#main .tit br {display: none;}

#main .store-wrap {display: flex; justify-content: center;}
#main .store-wrap .apps {margin-right: 30px; margin-left: 20px; min-width: 169px;}
#main .store-wrap .apps a {justify-content: flex-end;}
.store-wrap a {display: flex;}
#main .store-wrap img {height: 60px;}


#event {display: none;}


#story .img-wrap {position: relative;}
#story .img-wrap img {width: 100%;}
#story .img-wrap p {position: absolute; right: 20px; top: 20px; font-size: 10px;}

#story .txt-wrap p {line-height: 1.8; color: #777b85;}
#story .txt-wrap p .pcbr {display: block;}
#story .txt-wrap p .mbbr {display: none;}
#story .txt-wrap p:first-child {margin-top: 31px; font-size: 22px; font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.36; letter-spacing: -1.1px; color: #c2c4ca;}
#story .txt-wrap p:nth-child(2) {margin: 20px 0 22px;}



#game .game-top {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px;}
#game .tit {margin-bottom: 0;}
#game .game-txt-wrap {visibility: hidden; position: absolute; opacity: 0;}
#game .game-slider {width: 100%;}
#game .game-slider .swiper-slide {position: relative; width: auto; height: 537px; display: flex; border-radius: 10px; overflow: hidden; cursor: pointer;}
#game .game-slider .swiper-slide .txt-wrap {opacity: 0; transform: translateY(100px); transition: opacity 0.4s ease, transform 0.4s ease; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; text-align: center; background: linear-gradient(0deg,rgba(190, 47, 83, 0.9) 0%, rgba(190, 47, 83, 0.9) 33%, rgba(255, 255, 255, 0) 50%);}
#game .game-slider .swiper-slide .txt-wrap p {position: absolute; left: 0; right: 0; bottom: 54px;  padding: 0 25px; font-size: 18px; line-height: 1.54; font-weight: 700; -webkit-font-smoothing: antialiased; color: #e0dbe3; opacity: 0.8; -webkit-font-smoothing: antialiased;}

#game .swiper-btn-wrap {display: flex; flex-direction: row; justify-content: flex-end;}
#game .swiper-btn-wrap div {position: unset; width: 33px; height: 33px; margin-top: 0;}

#game .swiper-btn-wrap .swiper-button-prev {background: url(../img/slide-btn-01.png) no-repeat 50% 50%;}
#game .swiper-btn-wrap .swiper-button-next {background: url(../img/slide-btn-02.png) no-repeat 50% 50%;}
#game .swiper-btn-wrap .swiper-button-prev:after {content: '';}
#game .swiper-btn-wrap .swiper-button-next:after {content: '';}

.swiper-button-prev, .swiper-button-next {user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}


.intro-wrap {background: #0d0f13 url(../img/member-bg.jpg) no-repeat center top;}
#members {height: 100%;}
#members .inner {padding-top: 160px;}
#members .mem-slider-wrap {display: flex; align-items: center; margin-top: 75px;}
#members .thum-wrap .thumnail {width: 77px; margin: 7px;}
#members .thum-wrap .thumnail img {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
#members .thum-wrap .thumnail .mb-img {height: 77px; border-radius: 17px; overflow: hidden; background: #272c35;}
#members .thum-wrap .thumnail .mb-img img {transition: all 0.3s ease;}
#members .thum-wrap .thumnail .hover {width: 120%; left: 50%; top: -8px; transform: translateX(-50%);}

/* #members .thum-wrap {display: flex; align-items: center; flex-wrap: wrap; width: 310px; text-align: center;} */
.thum-wrap .thum-wrap-inner {display: flex; align-items: center; flex-wrap: wrap; width: 370px; text-align: center;}
.thum-wrap .thumnail {position: relative; display: flex; flex-direction: column; cursor: pointer;}
.thum-wrap .thumnail img {width: 100%;}
.thum-wrap .thumnail.on p {font-size: 16px; color: #fff; font-weight: bold;}
.thum-wrap .thumnail.on .hover {opacity: 1;}
.thum-wrap .thumnail .hover {opacity: 0; position: absolute; left: 0; top: 0; transition: opacity 0.4s;}
.thum-wrap .thumnail p {margin: 9px;}

#members .txt-slider {width: 360px; margin: 0;}
#members .txt-slider p {display: block;}
#members .txt-slider .info {margin: 43px 0 30px;}

.txt-slider .info .row {display: flex; align-items: center; margin-bottom: 12px;}
.txt-slider .info .label {position: relative; min-width: 66px; margin: 0 20px; padding: 7px 2px; flex: 0 0 auto; text-align: center; color: #0d0f13; background: #d92e5b; font-weight: bold;}
.txt-slider .info .label:before {content: ''; position: absolute; left: -19px; top: 0; width: 20px; height: 100%; background: url(../img/m-title-bg_01.png) no-repeat;}
.txt-slider .info .label:after {content: ''; position: absolute; right: -19px; top: 0; width: 20px; height: 100%; background: url(../img/m-title-bg_03.png) no-repeat;}

.txt-slider .info .value {margin-left: 6px; padding-bottom: 6px; flex: 1; /* width: 243px; */ font-size: 18px; color: #fff; border-bottom: 1px solid #a3a5aa;}
.txt-slider p:last-child {font-size: 16px; padding-left: 10px; letter-spacing: -0.4px; line-height: 1.5;}


#members .rt {flex: 1; width: 100%; min-width: 0; margin-bottom: 25px; padding-left: 19%;}
#members .member-slider .swiper-slide {text-align: center;}
#members .member-slider img {-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
#members .member-slider .swiper-button-prev {background: url(../img/slide-btn-01.png) no-repeat 50% 50%;}
#members .member-slider .swiper-button-next {background: url(../img/slide-btn-02.png) no-repeat 50% 50%;}
#members .member-slider .swiper-button-prev:after {content: '';}
#members .member-slider .swiper-button-next:after {content: '';}


#vamkids .inner {padding: 186px 12px 30px;}
#vamkids .subtit {margin-bottom: 30px; font-size: 20px; font-weight: bold;}

#vamkids .slider-wrap {position: relative;}
#vamkids .thum-wrap {position: absolute; left: 26px; top: 30px; z-index: 10;}
#vamkids .thum-wrap .thum-wrap-inner {width: 265px;}
#vamkids .thum-wrap .thumnail {width: 65px;}

#vamkids .vamkids-slider {height: 395px; border-radius: 24px; background: url(../img/char-bg.png) no-repeat 50% 50%; text-align: center;}
#vamkids .vamkids-slider .swiper-slide {position: relative;}
#vamkids .vamkids-slider img {margin-top: 80px; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
#vamkids .vamkids-slider .name {position: absolute; left: 50%; top: 40px; transform: translateX(-50%); font-size: 23px; font-weight: bold; color: #e0dccd; text-shadow: #fe3a66 0px 0 8px;}
#vamkids .vamkids-slider .swiper-button-prev {left: 30px; background: url(../img/vamkids-slide-btn-01.png) no-repeat 50% 50%;}
#vamkids .vamkids-slider .swiper-button-next {right: 30px; background: url(../img/vamkids-slide-btn-02.png) no-repeat 50% 50%;}
#vamkids .vamkids-slider .swiper-button-prev:after {content: '';}
#vamkids .vamkids-slider .swiper-button-next:after {content: '';}

#vamkids .txt-slider {margin-top: 33px;}
#vamkids .txt-slider .info .label {min-width: 91px;}
#vamkids .txt-slider .info .value {flex: 1;}
#vamkids .txt-slider .swiper-slide > p {margin-top: 18px;}


#videos .inner {padding-bottom: 236px;}
#videos .off-vd-wrap {display: flex;}
#videos .vd-wrap {width: 360px; margin-right: 20px; cursor: pointer;}
#videos .vd-wrap .vd-img-wrap {display: flex; margin-bottom: 20px; border-radius: 12px; overflow: hidden;}
#videos .vd-wrap img {transition: transform 0.3s; width: 100%;}


.vd-popup {display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 910px; width: 100%; padding: 0 30px; text-align: right; background: #fff; border-radius: 20px; z-index: 999;}
.vd-popup .btn-close {width: 30px; height: 30px; margin: 15px 0 10px; background: url(../img/video-close-btn.png) no-repeat 50% 50%;}
.vd-popup .vd-outer {position: relative; width: 100%; padding-top: 56.25%; height: 0; background: black; overflow: hidden;}
.vd-popup iframe {position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block;}
.vd-popup .store-wrap {display: flex; align-items: center; justify-content: center; margin: 35px 0 45px;}
.vd-popup .store-wrap .apps {margin-right: 38px;}
.vd-popup .store img {height: 47px;}
.dim {display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: url(../img/video-bg.png) no-repeat 50% 50%; background-size: cover; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 998;}



/* language */
.lang-wrap {position: relative; border-radius: 10px; background: #d92e5b;}

.lang-wrap .select_lng_txt {position: relative; width: 105px; height: 40px; font-size: 15px; line-height: 40px; cursor: pointer; color: #050608; font-weight: bold;}
.lang-wrap .select_lng_txt:before {position: absolute; content: ''; width: 19px; height: 19px; right: 10px; top: 50%; transform: translateY(-50%); transition: all 0.3s; background: url(../img/header-ico-lang-down.png) no-repeat 50% 50%;}
.lang-wrap .select_lng_txt.active:before {transform: translateY(-50%) rotateZ(180deg);}
.lang-wrap .select_lng_img {position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 17px;}
.lang-wrap .select_lng_txt p {position: relative; left: 50%; transform: translateX(-50%);}

.lang-wrap .lang-list {display: none; position: absolute; left: 0; right: 0; top: 48px; padding: 15px 0; text-align: center; border-radius: 10px; background-color: #373739;}
.lang-wrap .lang-list li {cursor: pointer; padding: 5px 10px; color: #fff;}
.lang-wrap .lang-list.active {display: block;}


/* floating */
.floating {position: absolute; bottom: 77px; right: 50px; width: 135px; height: 316px; border-radius: 10px; overflow: hidden; z-index: 10;}
.floating .top {display: flex;}
.floating .top img {cursor: pointer;}

.floating .bottom {position: relative; background: url(../img/float-ico-bg.png) no-repeat 50% 50%; background-size: cover;}
.floating .bottom > img {opacity: 0;}
.floating .bt-wrap {position: absolute; left: 0; top: 0; padding: 18px 12px 12px; height: 146px; display: flex; flex-direction: column; justify-content: space-between; z-index: 1;}
.floating .float.store-wrap img {width: 100%;}
.floating .float.store-wrap .apps {margin-bottom: 8px;}

.floating .sns-list {display: flex; justify-content: space-between;}
.floating .sns-list a {display: flex; position: relative;}
.floating .sns-list a:hover img {transition: all 0.2s;}
.floating .sns-list a .hover {position: absolute; left: 0; top: 0; opacity: 0;}



/* footer */
#footer {width: 100%; padding: 40px 12px 80px; border-top: 2px solid #38383b; background: url(../img/footer-bg.png) repeat-x center top;}

#footer .store-wrap {display: none;}

#footer .ft-inner {max-width: 1300px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center;}
#footer .ft-inner .sns-list {display: flex;}
#footer .ft-inner .sns-list a {display: flex; transition: all 0.2s;}

#footer .line {max-width: 415px; width: 100%; height: 1px; background: #232325;}

#footer .ft-menu {display: flex;}
#footer .ft-menu li {margin: 0 10px; font-size: 12px; font-weight: 700; -webkit-font-smoothing: antialiased;}
#footer .ft-menu li a {display: flex; padding: 14px 0; transition: all 0.2s;}

#footer .copy {margin: 20px 0 30px; font-size: 11px; line-height: 1.5; color: #5b5b5b; text-align: center;}
#footer .br {display: none;}

#footer .logo-wrap {display: flex; align-items: center;}
#footer .logo-wrap a {display: flex; margin: 0 20px;}
#footer .logo-wrap a:first-child img {height: 20px;}
#footer .logo-wrap a:last-child img {height: 29px;}



@media screen and (min-width: 1921px) {
  .inner {padding-top: 100px;}
  .tit {font-size: 40px;}

  #story .img-wrap p {font-size: 12px;}

  #story .txt-wrap p {font-size: 19px;}
  #story .txt-wrap p:first-child {font-size: 20px;}

  #game .inner {padding: 186px 12px 0;}
  #game .game-slider .swiper-slide {height: 537px;}
  #game .game-slider .swiper-slide img {width: 100%;}

  #members .inner {padding-top: 196px;}
  #members .txt-slider p {font-size: 19px;}
  #members .txt-slider .info .label {font-size: 17px;}
  .txt-slider .row p {line-height: 1.5;}
  .txt-slider .info .label:before, .txt-slider .info .label:after {background-size: 20px 40px;}
  .txt-slider p:last-child {line-height: 1.8;}

  #vamkids .inner {padding: 186px 12px 0;}
  #vamkids .subtit {font-size: 23px;}
  #vamkids .vamkids-slider {background-size: cover;}
  #vamkids .txt-slider p {font-size: 19px;}
  #vamkids .txt-slider .info .label {font-size: 17px;}

  #videos .inner {padding: 186px 12px 286px;}
  #videos .off-vd-wrap p {font-size: 20px;}

  #footer {padding: 80px 12px 110px; background-position: center bottom;}
  #footer .ft-inner .sns-list {margin-bottom: 10px;}
  #footer .line {max-width: 435px;}
  #footer .ft-menu li a {padding: 18px 0;}
  #footer .copy {font-size: 13px; line-height: 1.7;}
}



/* 1024 이상일때 마우스호버 */
@media screen and (min-width: 1024px) { 
  #header .gnb li:hover:before {opacity: 1;}
  #header .gnb li:hover a {color: #d92e5b;}

  .floating .sns-list a:hover img {opacity: 0;}
  .floating .sns-list a:hover .hover {opacity: 1;}

  #game .swiper-btn-wrap .swiper-button-prev:hover {background: url(../img/slide-btn-01-hover.png) no-repeat 50% 50%;}
  #game .swiper-btn-wrap .swiper-button-next:hover {background: url(../img/slide-btn-02-hover.png) no-repeat 50% 50%;}
  #game .game-slider .swiper-slide:hover .txt-wrap {transform: translate(0); opacity: 1;}

  #members .thum-wrap .thumnail:hover .mb-img img {transform: scale(1.05);}
  /* #members .thum-wrap .thumnail:hover .hover {opacity: 1;} */
  #members .member-slider .swiper-button-prev:hover {background: url(../img/slide-btn-01-hover.png) no-repeat 50% 50%;}
  #members .member-slider .swiper-button-next:hover {background: url(../img/slide-btn-02-hover.png) no-repeat 50% 50%;}

  #vamkids .vamkids-slider .swiper-button-prev:hover {background: url(../img/vamkids-slide-btn-01-hover.png) no-repeat 50% 50%;}
  #vamkids .vamkids-slider .swiper-button-next:hover {background: url(../img/vamkids-slide-btn-02-hover.png) no-repeat 50% 50%;}

  #videos .vd-wrap .vd-img-wrap:hover img {transform: scale(1.05);}

  #footer .ft-inner .sns-list li:hover a {opacity: 0.5;}
  #footer .ft-menu li:hover a {opacity: 0.5;}
}

/* 1300 이상일때 마우스호버 */
@media screen and (min-width: 1300px) {
  #header .gnb li:hover a {color: #050608;}
}


@media screen and (max-width: 1536px) {
  .floating {display: none;}
}


@media screen and (max-width: 1300px) {
  #header {background: transparent; border-bottom: none;}
  #header.scroll {background: #050608;}
  #header.scroll .btn-sound {display: none;}
  #header.scroll .lang-wrap .select_lng_txt {background: #be2f53 url(../img/m-header-icon-05-bk.png) no-repeat 50% 50%;}
  #header.scroll .m-btn-menu {background: url(../img/m-menu-btn-bg.png) no-repeat 50% 50%;}
  #header.scroll .m-btn-menu span {background: #0d0f13;}

  #header .header-inner {justify-content: flex-end; height: 81px; padding: 0 24px 0 14px;}
  #header .logo {margin-right: auto;}

  #header .gnb-wrap {display: flex; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; transform: translateX(100%); background-color: #0d0f13; z-index: 1; transition: all 0.2s;}
  #header .gnb-wrap.active {transform: translateX(0%);}
  #header .gnb-wrap.active li {
    opacity: 1; 
    transform: translateY(0);
  }
  #header .gnb-wrap.active .lang-list {
    opacity: 1; 
    transform: translateY(0);
  }
  
  /* 메뉴 닫으면 */
  #header .gnb-wrap:not(.active) .gnb li {opacity: 0; transform: translateY(20px); transition-delay: 0s;}
  #header .gnb-wrap:not(.active) .lang-list {opacity: 0; transform: translateY(100%); transition-delay: 0s;}
  
  #header .gnb {flex-direction: column; text-align: center;}
  #header .gnb li {opacity: 0; line-height: 2.5; font-size: 28px; letter-spacing: -0.7px; transform: translateY(250%); transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);}
  
  #header .gnb li:nth-child(1) {transition-delay: 0.3s;}
  #header .gnb li:nth-child(2) {transition-delay: 0.35s;}
  #header .gnb li:nth-child(3) {transition-delay: 0.4s;}
  #header .gnb li:nth-child(4) {transition-delay: 0.45s;}
  #header .gnb li:nth-child(5) {transition-delay: 0.5s;}
  #header .gnb li:nth-child(6) {transition-delay: 0.55s;}

  #header .gnb li img {width: 23px; height: 23px; filter: grayscale(0); vertical-align: -3px;}

  #header .gnb-wrap .lang-list {display: flex; justify-content: space-evenly; position: absolute; left: 23px; right: 23px; bottom: 0; opacity: 0; transform: translateY(100%); transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s; padding: 24px 23px 37px; border-top: 1px solid rgba(123, 118, 105, 0.3);}
  #header .gnb-wrap .lang-list li {padding: 8px 15px; border-radius: 7px; color: #a1a1a1; line-height: 1; font-weight: 700; -webkit-font-smoothing: antialiased; cursor: pointer;}
  #header .gnb-wrap .lang-list li.active {background: #be2f53; font-weight: 900; color: #0d0f13;}

  #header .btn-sound {display: block; width: 57px; height: 57px; border-radius: 9px; background: rgba(25, 26, 28, 0.9) url(../img/m-header-icon-02.png) no-repeat 50% 50%;}
  #header .btn-sound.unmute {background: rgba(25, 26, 28, 0.9) url(../img/m-header-icon-03.png) no-repeat 50% 50%;}
  
  .lang-wrap {margin: 0 15px; background: transparent;}
  .lang-wrap .select_lng_txt {width: 57px; height: 57px; border-radius: 9px; background: rgba(25, 26, 28, 0.9) url(../img/m-header-icon-05.png) no-repeat 50% 50%; transition: background .38s ease-in-out;}
  .lang-wrap .select_lng_txt:before {display: none;}
  .lang-wrap .select_lng_txt img, .lang-wrap .select_lng_txt p {display: none;}
  .lang-wrap .lang-list {left: unset; top: 63px; width: 105px; padding: 10px 0;}
  .lang-wrap .lang-list li {font-weight: bold; color: #f5f5f7; padding: 10px;}
  
  /* .m-btn-menu {display: block; width: 57px; height: 57px; border-radius: 9px; background: rgba(25, 26, 28, 0.9) url(../img/m-header-icon-04.png) no-repeat 50% 50%;} */
  .m-btn-menu {
  display: block;
  width: 57px;
  height: 57px;
  position: relative;
  /* margin: 50px auto; */
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  background: url(../img/m-header-icon-01.png) no-repeat 50% 50%;
  z-index: 1;
  }

  .m-btn-menu span {
    display: block;
    position: absolute;
    height: 4px;
    width: 41%;
    background: #c9c9ca;
    border-radius: 9px;
    opacity: 1;
    left: 50%;
    -webkit-transform: rotate(0deg) translateX(-50%);
    -moz-transform: rotate(0deg) translateX(-50%);
    -o-transform: rotate(0deg) translateX(-50%);
    transform: rotate(0deg) translateX(-50%);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

    .m-btn-menu span:nth-child(1) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .m-btn-menu span:nth-child(2) {
    top: 26px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .m-btn-menu span:nth-child(3) {
    top: 35px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  .m-btn-menu.open span:nth-child(1) {
    -webkit-transform: rotate(45deg) translateX(-50%);
    -moz-transform: rotate(45deg) translateX(-50%);
    -o-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
    top: 26px;
    /* left: 8px; */
  }

  .m-btn-menu.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  .m-btn-menu.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg) translateX(-50%);
    -moz-transform: rotate(-45deg) translateX(-50%);
    -o-transform: rotate(-45deg) translateX(-50%);
    transform: rotate(-45deg) translateX(-50%);
    top: 26px;
    /* left: 8px; */
  }


  #header .gnb-wrap {background: #010101 url(../img/m-menu-bg.png) repeat-x center bottom;}
  #header .gnb li:hover:before {opacity: 0;}

  .inner {padding: 90px 35px 0;}

  #main .inner {padding: 0 35px;}
  #main .main-vd-wrap .vd-wrap .btn-sound {display: none;}

  #main .tit span {display: none;}
  #main .tit br {display: block;}

  /* #game .inner {padding: 128px 0 0 35px;} */
  /* #game .swiper-btn-wrap {margin-right: 35px;} */

  #game .inner {padding: 90px 0 0 0;}
  #game .game-top {display: block; margin-bottom: 0;}
  #game .tit {padding: 0 35px;}

  #game .game-txt-wrap {visibility: visible; position: static; opacity: 1; margin: 24px 30px 24px 35px; font-size: 20px; font-weight: bold; line-height: 1.5; color: #c2c4ca; letter-spacing: -0.7px;}

  #game .swiper-btn-wrap {display: none;}
  #game .game-slider {margin-left: 35px;}
  #game .game-slider .swiper-slide {height: auto;}
  #game .game-slider .swiper-slide img {width: 230px;}
  /* #game .game-slider .txt-wrap {opacity: 1; position: unset;} */
  #game .game-slider .txt-wrap {display: none;}
  #game .game-slider .txt-wrap p {position: unset;}


  .intro-wrap {background: #0d0f13;}
  #members {background: url(../img/m-member-bg.png) no-repeat 50% 50%; background-size: cover;}
  #members .inner {padding: 90px 0 0;}
  #members .tit {padding: 0 35px;}
  #members .mem-slider-wrap {position: relative; flex-direction: column; align-items: unset; margin-top: 0;}

  .thum-wrap {width: 100%; background: #0d0f13; overflow: hidden;}
  .thum-wrap .thum-wrap-inner {width: 100%; padding: 0 30px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #1f1f1f9e transparent;}
  .thum-wrap .thumnail {flex: 0 0 auto;}
  .thum-wrap .thumnail p {margin-bottom: 20px;}

  #members .line {width: calc(100% - 35px); margin: 0 auto; padding: 0 12px; height: 1px; background: #2e2e2d;}

  #members .txt-slider {position: absolute; left: 0; bottom: 85px; width: 100%; padding: 0 35px 0; z-index: 10;}
  #members .txt-slider .info {width: 100%; margin-bottom: 24px;}
  #members .txt-slider .info .value {width: 100%; padding-bottom: 4px;}
  #members .txt-slider p:last-child {padding: 0 10px;}
  #members .txt-slider p:last-child br {display: none;}
  
  #members .rt {padding: 0;margin-bottom: 0;}
  #members .member-slider {background: url(../img/m-member-bg-2.png) no-repeat center bottom; background-size: cover;}
  #members .member-slider .swiper-button-prev, #members .member-slider .swiper-button-next {display: none;}
  #members .member-slider img {width: 457px;}


  #vamkids .inner {padding: 90px 0 0;}
  #vamkids .tit, #vamkids .subtit {margin-bottom: 15px; padding: 0 35px;}
  #vamkids .thum-wrap {position: unset;}
  #vamkids .thum-wrap .thum-wrap-inner {width: 100%; padding: 0 30px;}
  #vamkids .thum-wrap .thumnail {width: 85px; margin: 0 3px;}
  #vamkids .vamkids-slider {margin: 0 35px; margin-top: 105px; overflow: unset;}
  #vamkids .vamkids-slider .name {width: 100%; top: -60px;}

  #vamkids .txt-slider {padding: 0 35px;}

  #videos .inner {padding: 90px 35px 236px;}
}



/* mobile 모바일 */
@media screen and (max-width: 767px) {

  .tit {margin-bottom: 24px; font-size: 28px; letter-spacing: -0.7px;}
  .inner {padding: 90px 22px 0;}

  #main {height: auto; padding-top: 0; overflow: hidden;}
  #main h1 {display: none;}
  #main .inner {padding: 0;}

  #main .store-wrap {display: none;}

  #main .main-vd-wrap .vd-wrap img {display: none;}
  #main .main-vd-wrap .vd-wrap img.m-main {display: block;}

  #event {display: block;}
  #event img {width: 100%; cursor: pointer;}
  #event .store-wrap {display: flex; justify-content: space-between; padding: 25px 0; border-bottom: 1px solid rgba(123, 118, 105, 0.3);}
  #event .store-wrap .apps img {width: 90%;}
  #event .store {width: 50%;}
  #event .store img {width: 100%;}

  #story .img-wrap p {top: unset; bottom: 20px;}
  
  #story .txt-wrap p .pcbr {display: none;}
  #story .txt-wrap p .mbbr {display: block;}
  #story .txt-wrap p:first-child {font-size: 20px;}
  #story .txt-wrap p:nth-child(2) {margin-bottom: 0;}

  .kr #story .txt-wrap p:first-child {word-break: keep-all;}

  #game .tit {padding: 0 22px;}
  #game .game-txt-wrap {margin: 24px 22px;}
  #game .game-slider {margin-left: 22px;}

  #members .tit, #vamkids .subtit {padding: 0 22px;}
  #members .line {width: 100%; margin-left: 22px;}
  #members .member-slider img {max-width: 381px; width: 100%;}
  #members .thum-wrap {padding: 0 15px;}
  #members .thum-wrap .thum-wrap-inner {padding: 0;}

  #members .txt-slider {padding: 0 22px;}

  .thum-wrap .thum-wrap-inner {padding: 0 15px;}

  #vamkids .tit, #vamkids .subtit {padding: 0 22px;}
  #vamkids .thum-wrap {padding: 0 15px;}
  #vamkids .thum-wrap .thum-wrap-inner {padding: 0;}

  #vamkids .vamkids-slider {margin: 105px 22px 0; height: 350px; background-position-y: 85%;}
  #vamkids .vamkids-slider img {height: 230px; margin-top: 65px;}
  #vamkids .txt-slider {padding: 0 22px 0 15px;}


  #videos .inner {padding: 90px 22px 42px;}
  #videos .off-vd-wrap {flex-direction: column;}
  #videos .vd-wrap {width: 100%; margin: 0 0 48px;}
  #videos .off-vd-wrap .vd-wrap p {font-size: 19px; color: #c2c4ca;}

  .vd-popup {width: 90%; padding: 0 10px; border-radius: 7px;}
  .vd-popup .btn-close {width: 21px; height: 21px; margin: 18px 0 16px; background-image: url(../img/m-video-btn.png);}
  .vd-popup .store-wrap {margin: 26px 0 27px;}
  .vd-popup .store-wrap .apps {margin-right: 36px;}
  .vd-popup .store img {height: 39px;}


  #footer {border-top: 2px solid #38383b; padding: 92px 22px 138px; background: url(../img/m-footer-bg.png) repeat-x center 95%;}
  #footer .store-wrap {display: flex; justify-content: center; padding-bottom: 28px; border-bottom: 2px solid #232325;}
  #footer .store-wrap .store {margin: 0 12px}
  #footer .store-wrap img {height: 43px;}

  #footer .line {max-width: none; height: 2px; background: #232325;}

  #footer .sns-list {margin: 20px 0 26px;}
  #footer .sns-list li {margin: 0 8px;}
  #footer .sns-list li img {width: 74px;}

  #footer .ft-menu li {margin: 21px 16px;}
  #footer .ft-menu li a {padding: 2px 0; color: #a1a1a1; font-size: 16px;}

  #footer .copy {padding: 0 8px; font-size: 13px;}
}

@media screen and (min-width: 390px) and (max-width: 500px) {
  #footer .br {display: block;}

}