@charset "utf-8";
@font-face {
    font-family: 'TmonMonsori';
    src: url('https://cdn.jsdelivr.net/gh/wizfile/font/TmonMonsori.eot');
    src:url('https://cdn.jsdelivr.net/gh/wizfile/font/TmonMonsori.woff') format('woff');
    font-style: normal;
}

body, html {margin: 0; padding: 0;font-family: Arial, sans-serif;}
body {background-color: #000;overflow-x: auto; overflow-y: scroll;user-select: none;
    -webkit-user-select: none; /* For Safari */
    -moz-user-select: none; /* For Firefox */
    -ms-user-select: none; /* For Internet Explorer/Edge */}
li {list-style: none}
a {text-decoration: none;outline: none;}
a:focus {outline: none;}
h1, h2, h3, h4, h5 {margin: 0}

#project_box {width: 1920px;background-color: #383333;margin: auto}

#container {width: 1920px;margin: auto;}

.top-bg {width: 100%;position: absolute;top: 0;left: 0;z-index: 10;}
.top-bg img {width: 100%;z-index: 10;}


/*스토리*/

.story {position: relative;width: 100%;height: 950px;border-radius: 30px;overflow: hidden;background: url('../img/story/story_bg.png') no-repeat center center;background-size: cover;}

.story-menu {position: absolute;top: 218px;left: 85px;transform: rotate(-6deg);z-index: 10;font-family: "Noto Sans JP"}
.story-menu ul {display: flex;gap:10px}
.story-menu ul li {padding: 10px 37px}
.story-menu ul li:hover a {color: #8b7b7b;}
.story-menu ul li.st-pick {background-color: #ba3741;border-radius: 10px}
.story-menu ul li.st-pick a {color: #fffaf5;}
.story-menu ul li a {text-decoration: none;font-size: 20px;font-weight: 900;color: #ba3741}

.tab-contents {position: relative}

#story01 {width: 100%;height: 950px;background: url('../img/story/story_1p.png') no-repeat right bottom;background-size: cover;z-index: 1}
#story02 {width: 100%;height: 950px;background: url('../img/story/story_2p.png') no-repeat right bottom;background-size: cover;z-index: 1}

.st-text {position: absolute;bottom: 77px;left: 120px;}
.st-text img {width: 100%;height: 403px}



/*staff*/

.staff {position: relative;width: 100%;height: 950px;border-radius: 30px;overflow: hidden;background: url('../img/story/story_bg.jpg') no-repeat center center;background-size: cover;}
.staff-text {position: absolute;height: 196px;bottom: 290px;left: 370px}
.staff-logo {height: 613px;position: absolute;bottom: 116px;right: 265px}


@media(min-width:3839px){
    #project_box {width: 3840px;}
    #container {width: 3840px;margin: auto;}
    
    .story {width: 100%;height: 1902px;}
    .top-bg {width: 100%;height: 470px;}
    .story-menu {top: 440px;left: 210px}
    .story-menu ul {gap:10px}
    .story-menu ul li {padding: 20px 60px}
    .story-menu ul li a {font-size: 40px;}
    #story01, #story02, #story03, #story04, #story05 {height: 1902px}
    .st-text {bottom: 147px;left: 242px}
    .st-text img {height: 805px}
    
    .staff {width: 100%;height: 1902px;}
    .staff-text {height: 390px;bottom: 580px;left: 745px}
    .staff-logo {height: 1226px;bottom: 232px;right: 528px;}
}