@charset "utf-8";
@import "sub2026.css";


/* ######################################################################################################################################################################################################## */
header {position:fixed;top:0;left:0;width:100%;height:6.4rem;z-index:10;}
header .menuWrap {display:flex;gap:2.4rem;flex-direction:column;align-items:center;position:fixed;top:0;left:0;width:100%;height:100vh;padding-top:18rem;transform:translate(100%,0);transition:all 0.4s;background:#000;overflow:hidden;}
header .menuWrap:before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/2026/common/menu/bg_menu.jpg') no-repeat center top;}
header .menuWrap.active {transform:translate(0,0);z-index:1;}
header .menuWrap .menu {position:relative;}
header .menuWrap .menu a {display:block;display:flex;justify-content:center;align-items:center;color:#222;font-size:0;text-indet:-9999px; overflow:hidden;}
header .menuWrap .menu.m1 a {width:17.0rem;height:5.3rem;background:url('../images/2026/common/menu/menu-01.svg') no-repeat center center/100%;}
header .menuWrap .menu.m1.on a {color:#222;background:url('../images/2026/common/menu/menu-01-on.svg') no-repeat center center/100%;}
header .menuWrap .menu.m2 a {width:12.6rem;height:5.3rem;background:url('../images/2026/common/menu/menu-02.svg') no-repeat center center/100%;}
header .menuWrap .menu.m2.on a {color:#222;background:url('../images/2026/common/menu/menu-02-on.svg') no-repeat center center/100%;}
header .menuWrap .menu.m6 a {width:13.8rem;height:5.3rem;background:url('../images/2026/common/menu/menu-03.svg') no-repeat center center/100%;}
header .menuWrap .menu.m6.on a {color:#222;background:url('../images/2026/common/menu/menu-03-on.svg') no-repeat center center/100%;}
header .menuWrap .menu.m4 a {width:11.1rem;height:5.3rem;background:url('../images/2026/common/menu/menu-04.svg') no-repeat center center/100%;}
header .menuWrap .menu.m4.on a {color:#222;background:url('../images/2026/common/menu/menu-04-on.svg') no-repeat center center/100%;}



body.home header {background:#12112E;}
body.home header h1.h-logo {position:absolute;top:1.9rem;left:50%;transform:translate(-50%,0);width:10.7rem;height:2.8rem;background:url('../images/2026/common/pglogo.svg') no-repeat center center/100%;text-indent:-99999px;}
body.home header h1.h-logo a {display:block;height:100%;}
body.sub header h1.h-logo a {display:none;}
header a.header-prev-btn {position:absolute;top:2rem;left:2.4rem;width:2.4rem;height:2.4rem;background:url('../images/2026/common/header-prev-btn_w.svg') no-repeat center center;text-indent:-99999px;}
header a.btn-home {position:absolute;top:2rem;left:5.6rem;width:2.4rem;height:2.4rem;background:url('../images/2026/common/home_w.svg') no-repeat center center;text-indent:-99999px;}

body.home a.header-prev-btn,
body.home a.btn-home {display:none;}



header.visible {transform:translate(0,0);}
header.hidden {transform:translate(0,-120%);}

/* GNB-ALL-MENU */
header .gnb-all-menu {position:absolute;top:50%;right:2.8rem;transform:translate(0,-50%);width:2.4rem;height:2.4rem;background-color:transparent;z-index:1;}
header .gnb-all-menu span {position:absolute;top:50%;left:50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
margin-left: -1rem;
width:1.8rem;
height:.2rem;
border-radius:.2rem;
background-color:#fff;
-o-transition: margin-top .2s .2s ease-in-out, margin-left .3s .2s ease-in-out, width .3s .6s ease-in-out, -o-transform .2s .0s ease-in-out, opacity .4s .2s ease-in-out;
-ms-transition: margin-top .2s .2s ease-in-out, margin-left .3s .2s ease-in-out, width .3s .6s ease-in-out, -ms-transform .2s .0s ease-in-out, opacity .4s .2s ease-in-out;
-moz-transition: margin-top .2s .2s ease-in-out, margin-left .3s .2s ease-in-out, width .3s .6s ease-in-out, -moz-transform .2s .0s ease-in-out, opacity .4s .2s ease-in-out;
-webkit-transition: margin-top .2s .2s ease-in-out, margin-left .3s .2s ease-in-out, width .6s .4s ease-in-out, -webkit-transform .2s .0s ease-in-out, opacity .4s .2s ease-in-out;
transition: margin-top .2s .2s ease-in-out, margin-left .3s .2s ease-in-out, width .3s .6s ease-in-out, transform .2s .0s ease-in-out, opacity .4s .2s ease-in-out;
}
header .gnb-all-menu span.l1 {margin-top:-.7rem;}
header .gnb-all-menu span.l2 {}
header .gnb-all-menu span.l3 {margin-top:.7rem;}
header .gnb-all-menu.active span {
-o-transition: margin-top .2s .2s ease-in-out, margin-left .2s .0s ease-in-out, width .2s .0s ease-in-out, -o-transform .2s .4s ease-in-out, opacity .4s .2s ease-in-out;
-ms-transition: margin-top .2s .2s ease-in-out, margin-left .2s .0s ease-in-out, width .2s .0s ease-in-out, -ms-transform .2s .4s ease-in-out, opacity .4s .2s ease-in-out;
-moz-transition: margin-top .2s .2s ease-in-out, margin-left .2s .0s ease-in-out, width .2s .0s ease-in-out, -moz-transform .2s .4s ease-in-out, opacity .4s .2s ease-in-out;
-webkit-transition: margin-top .2s .2s ease-in-out, margin-left .2s .0s ease-in-out, width .2s .0s ease-in-out, -webkit-transform .2s .4s ease-in-out, opacity .4s .2s ease-in-out;
transition: margin-top .2s .2s ease-in-out, margin-left .2s .0s ease-in-out, width .2s .0s ease-in-out, transform .2s .4s ease-in-out, opacity .4s .2s ease-in-out;
}
header .gnb-all-menu.active span.l1 {margin-top:0;transform:rotate(45deg); background:#CDD8EF;}
header .gnb-all-menu.active span.l2 {width:0rem;margin-left:0rem;opacity:0;}
header .gnb-all-menu.active span.l3 {margin-top:0;transform:rotate(-45deg); background:#CDD8EF;}

.historyHead header a.btn-home {background:url('../images/2026/common/home.svg') no-repeat center center;}
.historyHead header a.header-prev-btn {background:url('../images/2026/common/header-prev-btn.svg') no-repeat center center;}
.historyHead header .gnb-all-menu span {background-color: #45186D;}

/* ######################################################################################################################################################################################################## */
footer {padding:12.5rem 0; background:#07071A;}
footer .wrap {position:relative;}
footer .wrap  h1.f-logo {width:10rem;height:8.2rem;margin:0 auto;background:url('../images/2026/common/main_slogan.svg') no-repeat center center/100%;text-indent:-99999px;}
footer .wrap .family-wrap {position:absolute;left: 50%;transform: translateX(-50%);bottom:60px;max-width:18.7rem;margin:2.8rem auto 0; border:0.2rem solid #fff;border-radius:1.6rem; overflow: hidden;}
footer .wrap .family-wrap > a.familysite {display:flex;justify-content:space-between;align-items:center;width:18.7rem;background-color:#07071A;color:#fff;font-size:1.6rem;font-weight:700;line-height:4.6rem;padding:0 2rem;}
footer .wrap .family-wrap > a.familysite:after {content:"";width:1.6rem;height:0.8rem;background:url('../images/2026/common/main_familysite-icon.svg') no-repeat center center/cover;}
footer .wrap .family-wrap > ul {display:none;width:100%;max-height:22rem;background-color:#07071A;padding-top:1rem;padding-bottom:1.6rem;overflow-y:auto;}
footer .wrap .family-wrap > ul li a {display:block;color:#fff;font-size:1.6rem;padding:.3rem 2rem;}
footer .wrap .family-wrap.on > a.familysite:after {transform:rotate(180deg);}
footer .wrap  p.copy {padding-top:10rem; font-size:1.4rem;line-height:1.2;color:#fff;text-align:center;}

.historyHead footer {background:#fff;}
.historyHead footer .wrap p.copy {color:#222;}
.historyHead footer .wrap .family-wrap {border: 0.2rem solid #222;}
.historyHead footer .wrap .family-wrap > a.familysite {color:#222; background:#fff}
.historyHead footer .wrap .family-wrap > a.familysite:after {background: url(../images/2026/common/familysite-icon.svg) no-repeat center center / cover;}
.historyHead footer .wrap .family-wrap > ul {background:#fff; color:#222;}
.historyHead footer .wrap .family-wrap > ul li a {color:#222;}


#quickmenu {position:fixed;bottom:3rem;right:2rem;z-index:21;}
#quickmenu ul {display:none;position:absolute;bottom:8rem;left:50%;transform:translate(-50%,0);padding-bottom:2.4rem;}

#quickmenu ul li {margin-bottom:.8rem;}
#quickmenu ul li a {display:block;width:4.8rem;height:4.8rem;text-indent:-99999px;}
#quickmenu ul li a.starfield {background:url('../images/2026/common/main_quick-icon-starfield.svg') no-repeat center center;}
#quickmenu ul li a.youtube {background:url('../images/2026/common/main_quick-icon-youtube.svg') no-repeat center center;}
#quickmenu ul li a.instagram {background:url('../images/2026/common/main_quick-icon-instagram.svg') no-repeat center center;}
#quickmenu > a.btn {position:relative;display:block;width:4.8rem;height:4.8rem;text-indent:-99999px;z-index:1;}
#quickmenu > a.btn:after {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/2026/common/quick-icon-plus.svg') no-repeat center center;}
#quickmenu > a.btn:before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/2026/common/main_quick-icon-rectangle.svg') no-repeat center center;}
#quickmenu.on > a.btn:after {background:url('../images/2026/common/quick-icon-minus.svg') no-repeat center center;}
/*#quickmenu > a.btn:before {
content:"";position:absolute;top:0;left:0;width:100%;height:100%;border:2px dashed #A571D3;border-radius:50%;background-color:#fff;z-index:-1;
animation: quickMenuLine 10s 0s linear infinite;
}
@keyframes quickMenuLine {
0%{transform:rotate(0deg);}
100%{transform:rotate(359deg);}
}*/

#quickmenu .pageScrTop {display:block;width:4.8rem;height:4.8rem;margin-top:.8rem;background:url('../images/2026/common/main_pagescrTop.svg') no-repeat center center/100%;text-indent:-99999px;}


body.home footer .wrap  h1.f-logo {background:url('../images/2026/common/main_slogan.svg') no-repeat center center/100%;}
body.home footer .wrap .family-wrap  {background-color:#000;color:#fff;border-color:#fff;}
body.home footer .wrap .family-wrap > a.familysite {background-color:#000;color:#fff;}
body.home footer .wrap .family-wrap > a.familysite:after {background:url('../images/2026/common/main_familysite-icon.svg') no-repeat center center/cover;}
body.home footer .wrap .family-wrap > ul {background-color:#000;border-color:#fff;}
body.home footer .wrap .family-wrap > ul li a {color:#fff;}
body.home footer .wrap  p.copy {color:#fff;}

body.home #quickmenu ul li a.starfield {background:url('../images/2026/common/main_quick-icon-starfield.svg') no-repeat center center;}
body.home #quickmenu ul li a.youtube {background:url('../images/2026/common/main_quick-icon-youtube.svg') no-repeat center center;}
body.home #quickmenu ul li a.instagram {background:url('../images/2026/common/main_quick-icon-instagram.svg') no-repeat center center;}
body.home #quickmenu > a.btn:after {background:url('../images/2026/common/quick-icon-plus.svg') no-repeat center center;}
body.home #quickmenu > a.btn:before {background:url('../images/2026/common/main_quick-icon-rectangle.svg') no-repeat center center;}
body.home #quickmenu.on > a.btn:after {background:url('../images/2026/common/quick-icon-minus.svg') no-repeat center center;}
body.home #quickmenu .pageScrTop {background:url('../images/2026/common/main_pagescrTop.svg') no-repeat center center/100%;}
body.home header .gnb-all-menu span {background:#fff}

/* ######################################################################################################################################################################################################## */
/* MAIN */
body.home {background:#07071A;}
body.home .content {position:relative;overflow:hidden;width:100%;margin:0 auto;}
body.home .content.mbgWrap1 {background:url('../images/2026/main/mbg1.jpg') no-repeat center top;}
body.home .content.mbgWrap2 {background:url('../images/2026/main/mbg2.jpg') no-repeat center top;}
body.home .content.mbgWrap3 {background:url('../images/2026/main/mbg3.jpg') no-repeat center top;padding: 0 0 10rem 0;}
body.home .content .vslObj {position:absolute;}


body.home .content .main-visual {position:relative; min-height:63rem; margin-top:6.4rem;}
body.home .content .main-visual .main-slogan {left:50%; transform:translateX(-50%); top:14.5rem; width:25.4rem; z-index:2;}
body.home .content .main-visual .main-keyboard {left:50%; transform:translateX(-105%); top:1rem; z-index:2;}
body.home .content .main-visual .main-keyboard > img[src*="bg_"] {position:relative;display:block;z-index:1;}
body.home .content .main-visual .main-keyboard > img:not([src*="bg_"]) {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:2;-webkit-animation: keyboardBounce 3s ease-in-out infinite;-moz-animation: keyboardBounce 3s ease-in-out infinite;-ms-animation: keyboardBounce 3s ease-in-out infinite;animation: keyboardBounce 3s ease-in-out infinite;}
@-webkit-keyframes keyboardBounce {
	0%, 6.67%, 16.67%, 20%, 26.67%, 33.33%, 100% { -webkit-transform: translate(-50%, -50%) translateY(0); }
	13.33% { -webkit-transform: translate(-50%, -50%) translateY(-20px); }
	20% { -webkit-transform: translate(-50%, -50%) translateY(-10px); }
}
@-moz-keyframes keyboardBounce {
	0%, 6.67%, 16.67%, 20%, 26.67%, 33.33%, 100% { -moz-transform: translate(-50%, -50%) translateY(0); }
	13.33% { -moz-transform: translate(-50%, -50%) translateY(-20px); }
	20% { -moz-transform: translate(-50%, -50%) translateY(-10px); }
}
@-ms-keyframes keyboardBounce {
	0%, 6.67%, 16.67%, 20%, 26.67%, 33.33%, 100% { -ms-transform: translate(-50%, -50%) translateY(0); }
	13.33% { -ms-transform: translate(-50%, -50%) translateY(-20px); }
	20% { -ms-transform: translate(-50%, -50%) translateY(-10px); }
}
@keyframes keyboardBounce {
	0%, 6.67%, 16.67%, 20%, 26.67%, 33.33%, 100% { transform: translate(-50%, -50%) translateY(0); }
	13.33% { transform: translate(-50%, -50%) translateY(-20px); }
	20% { transform: translate(-50%, -50%) translateY(-10px); }
}
body.home .content .main-visual .main-electric {left:50%; transform:translateX(20%); top:2rem; z-index:2;}
body.home .content .main-visual .main-electric > img[src*="bg_"] {position:relative;display:block;z-index:1;}
body.home .content .main-visual .main-electric > span {position:absolute;z-index:2;width: 4.9rem;}
body.home .content .main-visual .main-electric > .el1 {left:4px; top:31%;animation-duration: 3.6s;animation-fill-mode: both;animation-name: shake-vertical;animation-iteration-count: infinite;will-change: transform;}
body.home .content .main-visual .main-electric > .el2 {left:41px; top:34%;animation-duration: 3.6s;animation-fill-mode: both;animation-name: shake-vertical-reverse;animation-iteration-count: infinite;will-change: transform;}
body.home .content .main-visual .main-electric > .el3 {left:76px; top:27%;animation-duration: 3.6s;animation-fill-mode: both;animation-name: shake-vertical;animation-iteration-count: infinite;will-change: transform;}
@keyframes shake-vertical {
	0% { transform: translateY(0); }
	2.5% { transform: translateY(-0.75rem); }
	5% { transform: translateY(0.75rem); }
	7.5% { transform: translateY(-0.75rem); }
	10% { transform: translateY(0.75rem); }
	12.5% { transform: translateY(-0.75rem); }
	15% { transform: translateY(0.75rem); }
	16.67%, 100% { transform: translateY(0); }
}
@keyframes shake-vertical-reverse {
	0% { transform: translateY(0); }
	2.5% { transform: translateY(0.75rem); }
	5% { transform: translateY(-0.75rem); }
	7.5% { transform: translateY(0.75rem); }
	10% { transform: translateY(-0.75rem); }
	12.5% { transform: translateY(0.75rem); }
	15% { transform: translateY(-0.75rem); }
	16.67%, 100% { transform: translateY(0); }
}

body.home .content .main-visual .main-guitar {left:50%; transform:translateX(-150%); top:35rem; z-index:2; width:11.6rem;}
body.home .content .main-visual .main-guitar > img[src*="bg_"] {position:relative;display:block;z-index:1;}
body.home .content .main-visual .main-guitar > img:not([src*="bg_"]) {position:absolute;top:50%;left:50%;transform:translate3d(-66%, -69%, 0);z-index:2;backface-visibility: hidden;animation: shake 3.8s cubic-bezier(.36,.07,.19,.97) infinite 2s;perspective: 1000px;}
body.home .content .main-visual .main-base {left:50%; transform:translateX(47%); top:35rem; z-index:2;}
body.home .content .main-visual .main-base > img[src*="bg_"] {position:relative;display:block;z-index:1;}
body.home .content .main-visual .main-base > img:not([src*="bg_"]) {position:absolute;top:50%;left:50%;transform:translate3d(-50%, -57%, 0);z-index:2;backface-visibility: hidden;animation: shakeBass 3.8s cubic-bezier(.36,.07,.19,.97) infinite 3.5s;perspective: 1000px;}
@keyframes shakeBass {
	0%, 78.95% {
		transform: translate3d(-50%, -57%, 0);
	}
	81.06%, 97.90% {
		transform: translate3d(-50%, -57%, 0) translate3d(-1px, 0, 0);
	}
	83.16%, 95.79% {
		transform: translate3d(-50%, -57%, 0) translate3d(2px, 0, 0);
	}
	85.27%, 89.48%, 93.69% {
		transform: translate3d(-50%, -57%, 0) translate3d(-4px, 0, 0);
	}
	87.37%, 91.58% {
		transform: translate3d(-50%, -57%, 0) translate3d(4px, 0, 0);
	}
	100% {
		transform: translate3d(-50%, -57%, 0);
	}
}
@keyframes bassShake {
	0% { transform: translate(-50%, -57%) translate(1px, -2px) rotate(-1deg); }
	10% { transform: translate(-50%, -57%) translate(-1px, 2px) rotate(-1deg); }
	20% { transform: translate(-50%, -57%) translate(1px, 2px) rotate(0deg); }
	30% { transform: translate(-50%, -57%) translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(-50%, -57%) translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-50%, -57%) translate(-1px, -2px) rotate(-1deg); }
	60% { transform: translate(-50%, -57%) translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(-50%, -57%) translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-50%, -57%) translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(-50%, -57%) translate(-3px, 0px) rotate(1deg); }
	100% { transform: translate(-50%, -57%) translate(1px, 1px) rotate(0deg); }
}
body.home .content .main-visual .main-drum {left:50%; transform:translateX(-50%); top:36rem; z-index:2; width:15.6rem}
body.home .content .main-visual .main-drum .s1 {bottom: 39px;left: 42px;width: 75px;}
body.home .content .main-visual .main-drum .s2 {bottom: 39px;left: 42px;width: 75px;}
body.home .content .main-visual .main-drum .m1 {bottom: 34px;left: 58px;z-index: 2;}
body.home .content .main-visual .main-drum .m2 {top: 40px;left: 37px;z-index: 2;}
body.home .content .main-visual .main-drum .m3 {top: 44px;right: 32px;z-index: 2;}
body.home .content .main-visual .main-drum .m4 {top: 23px;left: 59px;z-index: 2;}
body.home .content .main-visual .main-drum .m5 {top: 26px;left: 59.2px;z-index: 2;}
body.home .content .main-visual .main-drum .m6 {top: 17px;left: 74px;z-index: 2;}
body.home .content .main-visual .main-drum .m7 {top: 12px;left: 79px;z-index: 2;}
body.home .content .main-visual .main-drum .m8 {top: 26px;right: 48px;z-index: 2;}
body.home .content .main-visual .main-drum .s3 {top: 21px;right: 58px;z-index: 3;}
body.home .content .main-visual .main-drum .s4 {top: 18px;left: 70px;z-index: 3;}


body.home .content .main-visual .line-box {left:0; right:0; top:3rem; z-index:1;}
body.home .content .main-visual .line-box svg {width:100%}
body.home .content .main-visual .line-box2 {left:0; right:0; top:35.5rem; z-index:1;}
body.home .content .main-visual .line-box2 svg {width:100%}
body.home .content .line-box3 {left:0; right:0; top:26.5rem; z-index:1;}
body.home .content .line-box3 svg {width:100%}
body.home .content .main-visual .main-note1 {left:-23px; top:2rem; z-index:2;
animation-name: anim;
animation-timing-function: linear;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
@keyframes anim {
  0% {transform: rotateZ(0);}
  16% {transform: rotateZ(2deg);}
  32% {transform: rotateZ(-3deg);}
  48% {transform: rotateZ(4deg);}
  64% {transform: rotateZ(-3deg);}
  82% {transform: rotateZ(2deg);}
  100% {transform: rotateZ(0);}
}
body.home .content .main-visual .main-note2 {right:-26px; top:9rem; z-index:2; animation: wiggle2 2s ease-in-out infinite;}
body.home .content .main-visual .main-note3 {left:-36px; top:15rem; z-index:2; animation: wiggle3 2s ease-in-out infinite;}

@keyframes wiggle2 {
	0% { transform: rotate(0deg); }
	20% { transform: rotate(3deg); }
	40% { transform: rotate(-3deg); }
	60% { transform: rotate(2deg); }
	80% { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}

@keyframes wiggle3 {
	0% { transform: rotate(0deg); }
	20% { transform: rotate(3deg); }
	40% { transform: rotate(-3deg); }
	60% { transform: rotate(2deg); }
	80% { transform: rotate(-2deg); }
	100% { transform: rotate(0deg); }
}

@keyframes bounceQnaKeyboard {
	0%, 100%, 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
		-webkit-transform: translateX(-56%) translateY(0);
		-ms-transform: translateX(-56%) translateY(0);
		transform: translateX(-56%) translateY(0);
	}
	40% {
		-webkit-transform: translateX(-56%) translateY(-30px);
		-ms-transform: translateX(-56%) translateY(-30px);
		transform: translateX(-56%) translateY(-30px);
	}
	50% {
		-webkit-transform: translateX(-56%) translateY(-15px);
		-ms-transform: translateX(-56%) translateY(-15px);
		transform: translateX(-56%) translateY(-15px);
	}
}

@keyframes bouncePartnerGuitar {
	0%, 100%, 5%, 15%, 25%, 35%, 45%, 55%, 65%, 75%, 85%, 95% {
		-webkit-transform: translateX(-56%) translateY(0);
		-ms-transform: translateX(-56%) translateY(0);
		transform: translateX(-56%) translateY(0);
	}
	40% {
		-webkit-transform: translateX(-56%) translateY(-30px);
		-ms-transform: translateX(-56%) translateY(-30px);
		transform: translateX(-56%) translateY(-30px);
	}
	50% {
		-webkit-transform: translateX(-56%) translateY(-15px);
		-ms-transform: translateX(-56%) translateY(-15px);
		transform: translateX(-56%) translateY(-15px);
	}
}

@keyframes shake {
	0%, 78.95% {
		transform: translate3d(-66%, -69%, 0);
	}
	81.06%, 97.90% {
		transform: translate3d(-66%, -69%, 0) translate3d(-1px, 0, 0);
	}
	83.16%, 95.79% {
		transform: translate3d(-66%, -69%, 0) translate3d(2px, 0, 0);
	}
	85.27%, 89.48%, 93.69% {
		transform: translate3d(-66%, -69%, 0) translate3d(-4px, 0, 0);
	}
	87.37%, 91.58% {
		transform: translate3d(-66%, -69%, 0) translate3d(4px, 0, 0);
	}
	100% {
		transform: translate3d(-66%, -69%, 0);
	}
}

/* 마구마구 이벤트 */
body.home .content .magumagu {position:relative;display:flex;flex-direction:column;padding-top:3.6rem;z-index:2;}
body.home .content .magumagu h1 {width:14.5rem;height:10.6rem;margin:0 auto;line-height:0;}
body.home .content .magumagu .enent-list {}
body.home .content .magumagu .enent-list ul {}
body.home .content .magumagu .enent-list ul li {}
body.home .content .magumagu .enent-list ul li .thumb {border-radius:2.8rem;overflow:hidden;font-size:0;line-height:0;/*border:2px solid #ECECEC;*/}
body.home .content .magumagu .enent-list ul li h3 {position:relative;margin-top:2rem;font-size:2rem;font-weight:800;color:#fff;}
body.home .content .magumagu .enent-list ul li h3.doodle-zone:after {content:"";position:absolute;bottom:-0.9rem;left:8.6rem;width:14rem;height:1.2rem;background:url('../images/2026/common/doodle-zone.svg') no-repeat;background-size:100%;}
body.home .content .magumagu .enent-list ul li h3.sns-zone:after {content:"";position:absolute;bottom:0;left:14.0rem;width:4.7rem;height:3.6rem;background:url('../images/2026/common/sns-zone.svg') no-repeat;background-size:100%;}
body.home .content .magumagu .enent-list ul li h3 span {min-width:8.4rem;display:inline-block;line-height:3.2rem;margin-right:1.2rem;font-size:1.4rem;font-weight:800;border-radius:20rem;vertical-align:middle;text-align:center;background-color:#F6B519;color:#1C0038;}
body.home .content .magumagu .enent-list ul li p.txt {margin-top:1.6rem;line-height:normal;font-size:1.6rem;color:#fff;word-break:break-all;}
body.home .content .magumagu .swiper-container {position:relative;max-width:32rem;width:100%;margin:7rem auto 0;transform:translate(-1rem,0);/*padding:0 2rem;*/}
body.home .content .magumagu .swiper-container .swiper-wrapper {display:flex;}
body.home .content .magumagu .swiper-container .swiper-wrapper .swiper-slide {position:relative;width:100%; padding-left:1rem;/*margin-right:2rem;*/}
body.home .content .magumagu .swiper-container .magumagu-btn-wrap {text-indent:-99999px;}
body.home .content .magumagu .swiper-container .magumagu-btn-wrap .prev {position:absolute;top:30%;left:-1rem;width:4rem;height:4rem;border-radius:50%;background:#C9264D url('../images/2026/common/slide-arrow-prev.png') no-repeat center center;cursor:pointer;z-index:1;}
body.home .content .magumagu .swiper-container .magumagu-btn-wrap .next {position:absolute;top:30%;right:-3rem;width:4rem;height:4rem;border-radius:50%;background:#C9264D url('../images/2026/common/slide-arrow-next.png') no-repeat center center;cursor:pointer;z-index:1;}
body.home .content .magumagu .swiper-container .magumagu-btn-wrap .swiper-button-disabled {display:none;}
body.home .content .wave-top {width:100%;}
body.home .content .wave-top svg {width:100%;}
body.home .content .btn-introduce {position:relative;display:block;max-width:20rem;margin:4rem auto 0;padding:1.6rem 2rem;line-height:1;font-size:1.6rem;font-weight:800;border-radius:1.6rem;background-color:#3DB894;color:#fff;text-align:center;}

/* YES DOODLE 2023 */
body.home .content .yes-doodle {position:relative;margin:0 auto;padding:10rem 0 0;z-index:1;}
body.home .content .yes-doodle h1 {width:22.7rem;height:11rem;margin:0 auto;}
body.home .content .yes-doodle .swiper-container {position:relative;max-width:28rem;margin:2rem auto 0;}
body.home .content .yes-doodle .swiper-container .swiper-wrapper {display:flex;}
body.home .content .yes-doodle .swiper-container .swiper-wrapper .swiper-slide {position:relative;width:25rem;margin:0 1.5rem;}
body.home .content .yes-doodle .swiper-container .yesdoodle-btn-wrap {text-indent:-99999px;}
body.home .content .yes-doodle .swiper-container .yesdoodle-btn-wrap .prev {position:absolute;top:50%;left:-2rem;transform:translate(0,-50%);width:4rem;height:4rem;border-radius:50%;background:#FF44BB url('../images/2026/common/slide-arrow-prev.png') no-repeat center center;cursor:pointer;z-index:2;}
body.home .content .yes-doodle .swiper-container .yesdoodle-btn-wrap .next {position:absolute;top:50%;right:-2rem;transform:translate(0,-50%);width:4rem;height:4rem;border-radius:50%;background:#FF44BB url('../images/2026/common/slide-arrow-next.png') no-repeat center center;cursor:pointer;z-index:2;}
body.home .content .yes-doodle .btn-wrap {display:flex;align-items:center;justify-content:center;margin-top:4rem;}
body.home .content .yes-doodle .btn-wrap a.btn-all-view {min-width:20.0rem;padding:1.6rem 2rem;line-height:1;font-size:1.6rem;font-weight:800;border-radius:1.6rem;background-color:#3DB894;color:#fff;text-align:center;}
body.home .content .yes-doodle .swiper-container .yesdoodle-btn-wrap .swiper-button-disabled {display:none;}


/* 함께한 친구들 */	
body.home .content .together-friend {position:relative;margin:14.4rem auto 0;z-index:1;overflow:hidden;text-align:center;}
body.home .content .together-friend h4 {width:14.7rem;height:5.2rem;margin:0 auto;background:url('../images/2026/main/tit-together-friend.png') no-repeat center center;text-indent:-99999px;}
body.home .content .together-friend .cont {display:flex;justify-content:center;align-items:center;margin-top:2rem;flex-direction: column;}
body.home .content .together-friend .cont .friend-name {margin-top:.8rem; line-height:1;font-size:1.6rem;font-weight:700;color:#fff;}
body.home .content .together-friend .cont .friend-name:first-child {margin-top:0;}
body.home .content .together-friend .cont .friend-name span {position:relative;display:inline-block;}
body.home .content .together-friend .cont .friend-name span + span {padding-left:3rem;}
body.home .content .together-friend .cont .friend-name span + span:after {content:"";position:absolute;top:calc(50% - .3rem);left:1.5rem;transform:translate(-50%,0);width:.6rem;height:.6rem;background: url('../images/2026/main/main-to-friend-dotted.png') no-repeat center center/100%;}
body.home .content .together-friend a.btn-friend-more {display:inline-block;margin-top:4rem;min-width:20.0rem;padding:1.6rem 2rem;line-height:1;font-size:1.6rem;font-weight:800;border-radius:1.6rem;background-color:#3DB894;color:#fff;text-align:center;}

@media only screen and (max-width:330px){
body.home .content .together-friend .cont {flex-wrap:wrap;}
body.home .content .together-friend .cont .friend-name {position:relative;width:100%;}
body.home .content .together-friend .cont .friend-name + .friend-name:before {content:"";position:absolute;top:-1.6rem;left:50%;transform:translate(-50%,0);width:.6rem;height:.6rem;background: url('../images/2026/main/main-to-friend-dotted.png') no-repeat center center/100%;}
}


/* 궁금해요 */	
body.home .content .qna-board {position:relative;padding-top:22rem;z-index:1;text-align:center;margin-top: 10rem;}
body.home .content .qna-board .main-keyboard {left: 50%;transform: translateX(-56%);top: 19px;width: 19.6rem; -webkit-animation-name: bounceQnaKeyboard; animation-name: bounceQnaKeyboard; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
body.home .content .qna-board .main-keyboard img {width:100%}
body.home .content .qna-board .txt {margin-top:2rem;line-height:normal;font-size:1.6rem;font-weight:700;color:#fff;}
body.home .content .qna-board .btn-faq {display:inline-block;margin-top:4rem;min-width:20.0rem;padding:1.6rem 2rem;line-height:1;font-size:1.6rem;font-weight:800;border-radius:1.6rem;background-color:#3FABE1;color:#fff;text-align:center;}


/* 제휴 문의하기 */	
body.home .content .partnershipInquire {position:relative;margin:13.7rem auto 0;padding-top:22rem;z-index:1;text-align:center;}
body.home .content .partnershipInquire .main-guitar {left: 50%;transform: translateX(-56%);top: 19px;width: 19.6rem; z-index:2; -webkit-animation-name: bouncePartnerGuitar; animation-name: bouncePartnerGuitar; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;}
body.home .content .partnershipInquire .line-box4 {left:0; right:0; top:-3rem; z-index:1;}
body.home .content .partnershipInquire .line-box4 svg {width:100%}
body.home .content .partnershipInquire .main-guitar img {width:100%}
body.home .content .partnershipInquire ul.cont li.tit-partner {width:10.3rem;height:5.2rem;margin:0 auto;background:url('../images/2026/main/tit-partner.png') no-repeat center center;text-indent:-99999px;}
body.home .content .partnershipInquire a.btn-inquire {display:inline-block;margin-top:4rem;min-width:20.0rem;padding:1.6rem 2rem;line-height:1;font-size:1.6rem;font-weight:800;border-radius:1.6rem;background-color:#3FABE1;color:#fff;text-align:center;}



@media only screen and (max-width:560px){


}