:root {
    --active-color:#e473ff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: url("https://sez-asset.daekyo.com/image/cursor/default-pointer.svg"), auto !important;
}

canvas {
    display: block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0; /* 원하는 위치로 조정할 수 있습니다 */
    left: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    cursor: url("https://sez-asset.daekyo.com/image/cursor/default-pointer.svg"), auto !important;
    cursor: url("https://sez-asset.daekyo.com/image/cursor/click-pointer.svg"), pointer !important;
    cursor: url("https://sez-asset.daekyo.com/image/cursor/click-pointer.svg"), grab !important;
}

img {
    -webkit-user-select:none;
    -khtml-user-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;

    -webkit-user-drag:none;
    -khtml-user-drag:none;
    -moz-user-drag:none;
    -o-user-drag:none;
    user-drag:none;
    object-fit:scale-down;

    image-rendering:high-quality;
    image-rendering:-moz-crisp-edges;
    image-rendering:-o-crisp-edges;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;

    transform:translateZ(0);
    backface-visibility:hidden;
}

@font-face {
    font-family:'happyB';
    src:url('../../image/fonts/Happiness-Sans-Bold.woff2') format('woff2');
}

@font-face {
    font-family:'happyR';
    src:url('../../image/fonts/Happiness-Sans-Regular.woff2') format('woff2');
}

@font-face {
    font-family:'happyT';
    src:url('../../image/fonts/Happiness-Sans-Title.woff2') format('woff2');
}

@font-face {
    font-family:'GmarketM';
    src:url('../../image/fonts/GmarketSansMedium.woff2') format('woff2');
}

@font-face {
    font-family:'GmarketM';
    src:url('../../image/fonts/GmarketSansMedium.woff2') format('woff2');
}

/* 웹폰트 불러온거 */
@font-face {
    font-family: 'TTHakgyoansimMonggeulmonggeulR';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_keris@1.0/TTHakgyoansimMonggeulmonggeulR.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.sound-container {
    position:absolute;
    top:0%;
    left:0%;
    width:100%;
    height:100%;
    z-index:13;
}

.sound-container .black-filter {
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.7);
}

.sound-wrap {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
}

.sound-btns {
    margin-top:2rem;
}

.browser-comment {
    width:50%;
    background:rgba(255,255,255,.3);
    border-radius:1rem;
    padding:2rem 0rem;
    margin:0 auto;
    margin-top:5%;
    font-family:'GmarketM';
}

.browser-comment p {
    font-size:1rem;
}

.browser-comment p.small-size {
    font-size:0.75rem;
    margin-bottom:6% !important;
}

.browser-comment .browser-items {
    margin:3% 0%;
}

.browser-comment .browser-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:15%;
    text-align:center;
}

.browser-comment .browser-item:nth-child(1) {
    margin-right:10%;
}

.browser-comment .browser-item p {
    font-size:0.8rem;
}

.browser-comment .browser-item img {
    width:100%;
}

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

.scroll-content {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 100;
}

.scroll-title {
    width:100%;
}

.scroll-title p {
    font-family:'GmarketM';
    color:#fff;
    margin:0;
    text-align:center;
    font-size:1.5em;
    letter-spacing:2px;
}

.scroll-arrow {
    position:absolute;
    top:230%;
    width:40%;
    animation:arrow-moving 1.5s infinite linear;
}

.scroll-arrow img {
    width:100%;
}

@keyframes arrow-moving {
    0%, 100% {
        top:230%;
    }
    50% {
        top:280%;
    }
}

.all-planet-container {
    /*background: url('../../image/intro-space.jpg') center/cover no-repeat;*/
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    z-index:99;
}

.planet-container-intro {
    background: url('../../image/pc_loading_bg.jpg') center/cover no-repeat;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:100%;
    height:100%;
    z-index:99;
}

.planet-box {
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%, -65%);
    /*width:100%;*/
}

.planet-wrap {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:15.5rem;
}

.planet {
    position:absolute;
    width:35%;
    opacity:0 !important;
    display:none;
    transition:opacity 1s ease-in-out;
    margin-bottom:10rem;
}

.planet img {
    width:100%;
}

.planet.show {
    opacity:1 !important;
}

.loading-ufo-wrap {
    width:100%;
    margin:0 auto;
}

.loading-ufo {
    margin:0 auto;
    width:10%;
}

.loading-ufo img {
    width:100%;
}

.loading-enter {
    margin:0 auto;
    width:20%;
}

.loading-enter img {
    width:100%;
}

.planet-content-wrap-intro {
    color:#fff;
    text-align:center;
    font-weight:bold;
    margin:0 auto;
}

.planet-content-intro {
    display:none;
    font-size:1.05rem;
    margin-bottom:4rem;
}

.planet-content-intro.show {
    display:block;
}

.loading-container {
    margin-top:2%;
}

.loading-bar-wrap {
    position:relative;
    width:35%;
    height:1rem;
    outline:3px solid #17007d;
    background:#4e3c82;
    border-radius:100rem;
    margin:0 auto;
}

.loading-bar {
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:100%;
    background:#fff57d;
    border:1px solid #825230;
    border-radius:100rem;
    /*animation:loading 0s forwards linear;*/
}

.loading-animation {
    animation:loading 20s forwards linear;
}

@keyframes loading {
    0% {
        width:0%;
    }
    100% {
        width:100%;
    }
}

nav .nav-container {
    position:fixed;
    top:4%;
    left: -1%;
    display:flex;
    justify-content:space-between;
    width:100%;
    padding:0% 2%;
    padding-left:4%;
    z-index:100;
}

nav .nav-container div:nth-child(2) {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

nav .nav-container button {
    width:20%;
}

nav .nav-container button img {
    width:100%;
}

.sound-text {
    width:100%;
    margin:0 auto;
    color:#fff !important;
    font-family:'GmarketM';
    text-align:center;
}

.sound-text h1 {
    font-size:1.2rem;
    margin-bottom:4%;
    line-height:2rem;
}

.sound-text p {
    font-size:0.9rem;
}

.ko{
    width: 25%;
    height: 36%;
    top: 48%;
    left: 39%;
    position: absolute;
}

.en{
    width: 24%;
    height: 36%;
    top: 48%;
    left: 39%;
    position: absolute;
}

.ma{
    width: 24%;
    height: 36%;
    top: 48%;
    left: 39%;
    position: absolute;
}


/* 행성 메뉴 */
.planet-container {
    font-family:'happy';
    background:rgba(0,0,0,.6);
}

.planet-menu {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
}

.planet-menu .planet-img {
    position:relative;
}

.mo-menu-btn {
    display:none;
}

.mo-menu-btn .planet-menu-btn {
    position:absolute;
    width:25%;
}

.pc-menu-btn .planet-menu-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    color:#fff;
    padding:1% 4%;
    border:1px solid #fff !important;
    border-radius:100em;
    font-size:1.7em;
    background:rgba(0,0,0,.2);
    font-family:'happyR';
    font-weight:600;
    transition:all .4s;
    white-space:nowrap;
    max-width:40%;
}

.pc-menu-btn .planet-menu-btn img {
    width:3%;
    margin-left:7%;
}

.pc-menu-btn .planet-menu-btn.active {
    background:var(--active-color) !important;
    border:1px solid transparent !important;
}

.pc-menu-btn .planet-menu-btn:hover {
    background:var(--active-color) !important;
    border:1px solid transparent !important;
}

.mo-menu-btn .planet-menu-btn img {
    width:100%;
}

.ko-planet-container .planet-menu-btn:nth-child(1) {
    top: 12%;
    right: -13%;
}

.ko-planet-container .planet-menu-btn:nth-child(2) {
    top: 30%;
    right: -23%;
}

.ko-planet-container .planet-menu-btn:nth-child(3) {
    top: 53%;
    right: -30%;
}

.en-planet-container .planet-menu-btn:nth-child(1) {
    top: 24.5%;
    right: -20%;
}

.en-planet-container .planet-menu-btn:nth-child(2) {
    top: 48%;
    right: -24%;
}

.math-planet-container .planet-menu-btn:nth-child(1) {
    top: 43%;
    right: -24%;
}

.math-planet-container .planet-menu-btn:nth-child(2) {
    top: 62%;
    right: -24%;
}

.planet-menu-content {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.planet-img {
    width:85%;
}

.planet-img img {
    width:100%;
}

.planet-content-wrap {
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.planet-content {
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    height:100vh;
    text-align:left;
    padding-left:10rem;
}

.planet-title .s-logo {
    width:50%;
    margin-bottom:3%;
}

.planet-depth-wrap .s-logo {
    width:50%;
}

.planet-title .s-logo img,
.planet-depth-wrap .s-logo img {
    width:100%;
}

.planet-description {
    display:flex;
    align-items:center;
    margin-left:-4%;
}

.planet-description img {
    width:10%;
}

.planet-description p {
    margin:0;
    color:#fff;
    font-family:'happyR', sans-serif;
    font-size:1.15em;
    line-height:2.2rem;
}

.planet-description p.animate {
    animation:text-slide .6s ease-in;
}

.planet-depth-sub p.animate {
    animation:text-slide2 .6s ease-in;
}

.planet-depth-wrap h3 {
    font-family:'happyR', sans-serif;
    font-weight:900;
    font-size:2rem;
}

.planet-go {
    position:relative;
    display:none;
    text-transform:uppercase;
}

.planet-go.animate {
    animation:slideIn 0.5s ease-in-out;
}

.planet-go::after {
    content:'';
    display:block;
    border-bottom:1px solid var(--active-color);
    transform:scaleX(0);
    transition:transform .2s ease-in-out;
    transform-origin:0% 50%;
}

.planet-go:hover::after {
    transform:scaleX(1);
}

.planet-go img {
    position:absolute;
    display:none;
    top:45%;
    left:-40%;
}

.planet-depth-wrap p {
    font-family:'happyR', sans-serif;
    font-weight:normal;
    font-size:1.15rem;
    margin-left:7.5%;
    color:#fff;
}

.planet-depth {
    margin-left:6%;
}

.planet-depth ul {
    width:100%;
    font-family:'happyR', sans-serif;
    margin:0;
    padding:0;
    list-style:none;
}

.planet-depth .main-item,
.planet-depth .main-item p,
.planet-depth .sub-item,
.planet-depth .planet-go {
    cursor: url("https://sez-asset.daekyo.com/image/cursor/default-pointer.svg"), pointer !important;
}


.planet-depth ul li,
.planet-depth ul li p {
    font-family:'happyR', sans-serif;
    display:flex;
    align-items:center;
    width:100%;
    font-size:1.7rem;
    margin-top:1.7rem;
}

.planet-depth ul li span {
    font-family:'TTHakgyoansimMonggeulmonggeulR';
    margin-left:5%;
    font-size:1.2rem;
}

.planet-depth ul li ul {
    width:100%;
    font-family: 'happyR', sans-serif;
    height:0;
    overflow:hidden;
    transition:height .2s ease-in-out;
    margin:0;
    margin-left:8%;
}

.planet-depth ul li ul li {
    display:flex;
    flex-direction:row;
    margin-top:1.1rem;
}

.planet-depth ul li ul .planet-go {
    margin-left:1rem;
}

.planet-depth ul > li.active,
.planet-depth ul > li.active p {
    color:var(--active-color);
    transition: all .2s;
}

.planet-depth ul > li p span {
    transform:rotate(0deg);
    transition:all .2s ease;
}

.planet-depth ul > li.active p span {
    transform:rotate(90deg);
    transition:all .2s ease;
}

.planet-depth ul > li.active > .planet-go {
    display: block;
    margin-left:1rem;
}

.planet-depth ul > li.active > ul {
    height:auto;
}

.planet-depth ul > li.active > ul li:hover {
    color: #d679f8;
    transition: all .2s;
}

.planet-depth ul > li.active > ul li:hover .planet-go {
    display:block;
}

.planet-depth ul > li:not(.active) {
    color: #fff;
}

.planet-depth-wrap {
    display:none;
    opacity:0;
    transition:opacity 0.2s ease-in-out;
}

.planet-depth-wrap.active {
    display:block;
    opacity:1;
}

.planet-depth-sub {
    display:flex;
    align-items:center;
    margin-left:4%;
}

.planet-depth-sub img {
    width:6%;
}

.planet-depth-sub p {
    margin:0;
}

.planet-title {
    display:block;
    opacity:1;
    transition:opacity 0.2s ease-in-out;
}

.planet-title.hide {
    display:none;
    opacity:0;
    transition:all 0.2s ease-in-out;
}

.planet-prev {
    position:absolute;
    top:50%;
    left:3%;
    transform:translateY(-50%);
    width:3%;
}

.planet-next {
    position:absolute;
    top:50%;
    right:3%;
    transform:translateY(-50%);
    width:3%;
}

.planet-close {
    position:absolute;
    left:50%;
    bottom:5%;
    transform:translateX(-50%);
    width:4%;
}

.planet-prev img,
.planet-next img,
.planet-close img {
    width:100%;
}

.event-wrap {
    position: fixed;
      top: 0;
      left: 0;
      z-index: 9998;
      display: block;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      outline: 0;
}

.event-dialog {
    z-index: 999;
    min-height: calc(100% - 100px);
    height: calc(100% - 100px);
    max-width: 100%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    position: relative;
    width: auto;
}

.event1-content {
    max-height: 100%;
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      pointer-events: auto;
      background-clip: padding-box;
      outline: 0;
      border-radius: 10px;
}

.event-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.event-wrap .image-wrapper {
     text-align: center;
     position: relative;
}
/*
.event-wrap {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:100;
}
*/

.event-wrap .event-content {
    position:relative;
}

.event-wrap .event-main-img {
    width: 766px;
}

.event-wrap .button-wrap {
    position: absolute;
    bottom: 83px;
    left: 50%;
    transform: translateX(-50%);
    width: 415px;
}

.event-wrap .button-wrap > div {
    width: 100%;
}

.event-wrap .button-wrap button {
    width: 50%;
    border: 0;
    border-radius: 28px;
    height: 48px;
    color: #FFFFFF;
}

.event-wrap .button-wrap button:nth-child(1) {
    margin-right: 5%;
    background: url('/image/event/button_on.png') center/cover no-repeat;
    color: #FFFFFF;
}

.event-wrap .button-wrap button:nth-child(2) {
    background: url('/image/event/button_off.png') center/cover no-repeat;
    color: #5A22F4;
}
/*
.event-wrap .button-wrap button:active {
    background: url('/image/event/button_on.png') center/cover no-repeat;
    color: #FFFFFF;
}
*/

.event-wrap .event-close-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 39px;
    display: flex;
    width: 766px;
}

.event-wrap .event-close-wrap div {
    width: 50%;
    cursor: pointer !important;
}

@keyframes mo-menu-slide {
    0% {
        right:-100%;
    }
    100% {
        right:0%;
    }
}

@keyframes text-slide {
    0% {
        opacity:0;
        transform:translateX(-10%);
    }
    100% {
        opacity:1;
        transform:translateX(0%);
    }
}

@keyframes text-slide2 {
    0% {
        opacity:0;
        transform:translateX(-5%);
    }
    100% {
        opacity:1;
        transform:translateX(0%);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-5%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes textFadeDown {
    0% {
        opacity:0;
        transform:translateY(-70%);
    }
    100% {
        opacity:1;
        transform:translateY(0%);
    }
}

.event-wrap .pc-only {
    display: block;
}

.event-wrap .mo-only {
    display: none;
}

@media (max-width:1024px) and (orientation:portrait) {
    .pc-menu-btn .planet-menu-btn {
        font-size:1rem;
        max-width:35%;
    }

    .en-planet-container .planet-menu-btn:nth-child(1) {
        right:-15%;
    }

    .en-planet-container .planet-menu-btn:nth-child(2) {
        right:-20%;
    }

    .planet-content {
        padding-left:8rem;
    }

    .planet-description p {
        font-size:0.9rem;
        line-height:1.7rem;
    }
    
    .browser-comment {
        width:80%;
    }
}

@media (max-width:1366px) and (orientation:landscape) {
    .pc-menu-btn .planet-menu-btn {
        font-size:1rem;
        max-width:35%;
    }

    .ko-planet-container .planet-menu-btn:nth-child(1) {
        right:-9%;
    }

    .ko-planet-container .planet-menu-btn:nth-child(2) {
        right:-17%;
    }

    .ko-planet-container .planet-menu-btn:nth-child(3) {
        right:-24%;
    }

    .en-planet-container .planet-menu-btn:nth-child(1) {
        right:-15%;
    }

    .en-planet-container .planet-menu-btn:nth-child(2) {
        right:-20%;
    }

    .math-planet-container .planet-menu-btn:nth-child(1),
    .math-planet-container .planet-menu-btn:nth-child(2) {
        right:-20%;
    }

    .planet-content {
        padding-left:10rem;
    }

    .planet-description p {
        font-size:1.1rem;
        line-height:2.1rem;
    }
}

@media (max-width:1181px) and (orientation:landscape) {
    .planet-content {
        padding-left:7rem;
    }

    .planet-description p {
        font-size:0.86rem;
        line-height:1.5rem;
    }

    .browser-comment p {
        font-size:0.9rem;
    }
}

@media (max-width:960px) {
    .planet-container {
        background:none;
    }

    .planet-container-intro {
        background:url('../../image/mo_loading_bg.jpg') center/cover no-repeat;
    }

    .loading-ufo {
        width:25%;
    }

    .loading-enter {
        width:40%;
    }

    .loading-container {
        margin-top:5%;
    }

    .loading-bar-wrap {
        position:relative;
        width:50%;
        height:1rem;
        outline:2px solid #17007d;
        background:#4e3c82;
        border-radius:100rem;
        margin:0 auto;
    }

    nav .nav-container {
        top:2%;
        padding-left:4%;
    }

    nav .nav-container button {
        width:26%;
    }

    .sound-wrap {
        width:100%;
    }

    .sound-text h1 {
        font-size:1.5rem;
        line-height:2rem;
        margin-bottom:4%;
    }

    .sound-text p {
        font-size:1.2rem;
    }

    .browser-comment {
        width:60%;
    }

    .all-planet-container {
        background:url('../../image/mo-slideBg.png') no-repeat center center;
        background-size:cover;
    }

    .planet-prev,
    .planet-next {
        display:none !important;
    }

    .planet-close {
        width:10%;
    }

    .planet-menu {
        height:100%;
        margin-top:5%;
    }

    .planet-content {
        padding:0;
    }

    .planet-img {
        width:75%;
        margin-top:-10%;
    }

    .pc-menu-btn {
        display:none !important;
    }

    .mo-menu-btn {
        display:block !important;
    }

    .planet-menu-content {
        width:100%;
    }

    .mo-menu-btn .planet-menu-btn {
        width:31% !important;
        right:-100%;
        transition: all .5s ease-in;
        border-radius:1.5rem 0 0 1.5rem;
        box-shadow:0px 0px 30px rgba(0,0,0,.5);
    }

    .mo-menu-btn .planet-menu-btn.animate {
        animation:mo-menu-slide 1s ease-in forwards;
    }

    .mo-menu-btn .planet-menu-btn:nth-child(1) {
        top: 26% !important;
        right: -100%;
        z-index:3;
    }

    .mo-menu-btn .planet-menu-btn:nth-child(2) {
        top: 41% !important;
        right:-100%;
        animation-delay:.1s !important;
        z-index:2;
    }

    .mo-menu-btn .planet-menu-btn:nth-child(3) {
        top: 56% !important;
        right:-100%;
        animation-delay:.2s !important;
        z-index:1;
    }

    .planet-content {
        width:100%;
        height:100%;
        align-items:center;
        text-align:center;
    }

    .planet-title {
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        margin-top:-7%;
    }

    .planet-description {
        justify-content:center;
        margin:0%;
    }

    .planet-description p {
        line-height:2.6rem;
        font-size:1.4rem;
    }

    .planet-description p.animate {
        animation:none;
    }

    .planet-description .planet-text-line,
    .planet-depth-wrap .planet-text-line {
        display:none;
    }

    .planet-depth-wrap {
        align-items:center;
        justify-content:flex-start;
        flex-direction:column;
        height:100vh;
        margin-top:20%;
    }

    .planet-title .s-logo {
        width:70%;
        margin-left:16%;
        margin-bottom:5%;
    }

    .planet-depth ul li p span {
        margin-left:5%;
    }

    .planet-depth-wrap .s-logo {
        width:60%;
        margin-left:5%;
    }

    .en-planet-container .planet-depth-wrap[data-content="stem"] .s-logo {
        margin:0%;
    }

    .planet-depth-wrap p {
        margin:0;
        margin-top:4.5%;
        font-size:1.3rem;
        text-align:center;
    }

    .planet-depth-wrap p.planet-depth-sub-title {
        opacity:0;
    }

    .planet-depth-wrap p.planet-depth-sub-title {
        animation:textFadeDown 0.5s linear forwards;
    }

    .planet-depth {
        width:100%;
        padding:0% 12%;
    }

    .planet-depth-sub {
        margin-left:0%;
    }

    .depth-underline {
        display:block !important;
        width:100%;
    }

    .depth-underline img {
        width:100%;
    }

    .planet-go img {
        display:none;
    }

    .planet-depth-wrap.active {
        display:flex !important;
        opacity:1 !important;
    }
}

@media (max-width:769px) and (orientation:portrait) {
    .browser-comment {
        width:60%;
    }
}

@media (max-width:768px) {
    .planet-container {
        background:none;
    }

    .loading-ufo {
        width:35%;
    }

    .loading-enter {
        width:60%;
    }

    .loading-container {
        margin-top:7%;
    }

    nav .nav-container {
        padding-left:5%;
    }

    nav .nav-container div:first-child {
        width:70%;
    }

    nav .nav-container div:first-child img {
        width:100%;
    }

    nav .nav-container button {
        width:40%;
    }

    .sound-wrap {
        width:90%;
    }

    .sound-text {
        width:100%;
        margin:0 auto;
        color:#fff !important;
        font-family:'GmarketM';
        text-align:center;
    }

    .sound-text h1 {
        font-size:1rem;
        margin-bottom:7%;
        line-height:2rem;
    }

    .sound-text p {
        font-size:0.8rem;
    }

    .browser-comment {
        width:80%;
    }

    .browser-comment p {
        font-size:0.8rem;
    }

    .scroll-content {
        width:100%;
    }

    .scroll-content {
        top:35%;
    }

    .planet-menu {
        margin-top:15%;
    }

    .mo-menu-btn .planet-menu-btn {
        width:40% !important;
    }

    .mo-menu-btn .planet-menu-btn:nth-child(1) {
        top: 10% !important;
        right:-100%;
    }

    .mo-menu-btn .planet-menu-btn:nth-child(2) {
        top: 25% !important;
        right:-100%;
        animation-delay:.1s !important;
    }

    .mo-menu-btn .planet-menu-btn:nth-child(3) {
        top: 40% !important;
        right:-100%;
        animation-delay:.2s !important;
    }

    .en-planet-container .mo-menu-btn .planet-menu-btn:nth-child(2) {
        top:26% !important;
    }

    .planet-img {
        width:100%;
    }

    .planet-depth ul li span {
        font-size:1rem;
    }

    .planet-description {
        margin-left:0%;
    }

    .planet-description p {
        font-size:0.9em;
        line-height:1.8rem;
    }

    .planet-depth-wrap {
        margin-top:25%;
    }

    .planet-depth-wrap p {
        font-size:0.9rem;
        margin-top:5%;
    }

    .planet-depth {
        height:45%;
        margin-left:-23%;
        overflow-y:scroll !important;
        overflow-x:hidden !important;
    }

    .planet-depth ul {
        margin-left:16%;
        scrollbar-width:thin;
        scrollbar-color:rgba(255, 255, 255, 0.3) transparent;
    }

    .planet-depth ul::-webkit-scrollbar {
        width:0.2rem !important;
    }

    .planet-depth ul::-webkit-scrollbar-thumb {
        background:rgba(255,255,255,.3) !important;
        border-radius:100rem !important;
    }

    .planet-depth ul::-ms-scrollbar {
        width:0.2rem !important;
    }

    .planet-depth ul::-ms-scrollbar-thumb {
        background:rgba(255, 255, 255, 0.3) !important;
        border-radius:100rem !important;
    }

    .planet-depth ul li,
    .planet-depth ul li p {
        font-size:1.1rem;
        margin-top:1.2rem;
    }

    .planet-depth ul li ul li {
        margin-top:1.2rem;
    }

    .planet-depth ul li span {
        margin-left:5%;
    }

    .event-wrap .pc-only {
        display: none;
    }

    .event-wrap .mo-only {
        display: block;
    }

    .event-wrap {
        width: 100%;
    }

    .event-wrap .event-main-img {
        width: 100%;
    }

    .event-wrap .button-wrap {
        width: 71%;
        bottom: 1%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .event-wrap .event-close-wrap {
    top: -1%;
    height: 27px;
    width: 91%;
        right: 5%;
    }
}

@media (max-width:1330px) screen (orientation:portrait) {
    .planet-depth ul li p span {
        margin-left:5%;
    }
}