* {box-sizing: border-box;}#loading-animation, #main-content {position: fixed;top: 0;left: 0;width: 100%;height: 100%;transition: opacity 0.5s ease-in-out;}#loading-animation {background-color: #242424;display: flex;justify-content: center;align-items: center;z-index: 3;}#main-content {opacity: 0;z-index: 1;}.logo-container {position: relative;width: 700px;height: 500px;overflow: hidden;}.logo {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;animation: logoAnimation 3s ease-in-out forwards;}@media screen and (max-width: 480px) {.logo-container {width: 300px;height: 200px;}.logo {max-width: 60%;height: auto;}}@keyframes logoAnimation {0% {opacity: 0;transform: translate(-50%, -50%) scale(0.8);}20% {opacity: 1;transform: translate(-50%, -50%) scale(1);}80% {opacity: 1;transform: translate(-50%, -50%) scale(1);}100% {opacity: 0;transform: translate(-50%, -50%) scale(2.0);}}.hide-animation {display: none;}body {margin: 0;font-family: 'Noto Sans', sans-serif;line-height: 1.6;background-color: #242424;}#hero-section {position: relative;display: flex;flex-direction: column;align-items: center;width: 100%;height: 100vh;margin-top: 40px;margin-bottom: 150px;}@media screen and (max-width: 768px) {#hero-section {margin-top: 25px;height:600px;}}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;pointer-events: none;background: linear-gradient(140deg, #05BBBB 10%, #6203AD 60%);}.hero-content {position: relative;z-index: 1;text-align: left;max-width: 1080px;width: 100%;padding: 20px;background: rgba(255, 255, 255, 0);border-radius: 10px;margin-top: 80px;letter-spacing: 2px;}h1 {font-size: 5rem;line-height: 1.2;margin-bottom: 20px;color: #fff;font-weight: bold;margin-left: -8%;margin-bottom: 5%;}@media screen and (max-width: 768px) {.hero-content {margin-top: 50px;width: 100%;text-align: center;}.hero-content h1 {font-size: 2.5rem;margin-left: 0;margin-top: auto;line-height: 1.2;}.hero-content h3 {margin: 0 auto;margin-top: 20%;text-align: left;display: flex;justify-content: center;align-items: center;width: 100%;font-weight: 300;}}h3 {font-family: 'Noto Sans', sans-serif;font-size:1.5rem;font-weight: lighter;line-height: 2;color: #eee;}.navigation {position: fixed;left: 50%;top: 95%;transform: translate(-50%, -50%);display: flex;flex-direction: column;align-items: center;font-family: Arial, sans-serif;opacity: 0.8;transition: opacity 0.3s ease, visibility 0.3s ease;}.navigation.hidden {opacity: 0;visibility: hidden;pointer-events: none;}.navigation .text {font-size: 18px;letter-spacing: 2px;margin-bottom: 8px;animation: fadeUpDown 2s infinite;}.navigation .arrow {font-size: 24px;animation: fadeUpDown 2s infinite 0.2s;}@keyframes fadeUpDown {0% {opacity: 0;transform: translateY(-20px);}50% {opacity: 1;transform: translateY(0);}100% {opacity: 0;transform: translateY(20px);}}@media screen and (max-width: 768px) {h1 {font-size: 4rem;}h3 {font-size: 1rem;}}@media screen and (max-width: 480px) {h1 {font-size: 2.5rem;margin-top: -200px;line-height: 1.5;}h3 {font-size: 0.6rem;margin-top: 50px;width: 80%;}.triangle {width: 10%;position: absolute;left: 50%;transform: translateX(-50%);bottom: 10%;text-align: center;opacity: 0.6;}}body {margin:0;font-family: 'Noto Sans', sans-serif;line-height: 1.6;color: #fff;background-color: #242424;}#values-section {background-color: #242424;justify-content: center;}@media screen and (max-width: 768px) {}.values-content {max-width: 900px;margin: 0 auto;text-align: center;}.values-content h2 {font-size: 2.5rem;margin-bottom: 20px;color: #fff;}.top-line {position: relative;width: 50%;height: 3px;background-color: #08CDF9;margin-left: 25%;margin-right: 25%;bottom: 25px;}@media screen and (max-width: 768px) {.top-line {width: 70%;margin-left: 15%;margin-right: 15%;}}.values-content > p {font-size: 1rem;font-family: 'Noto Sans', sans-serif;margin-bottom: 40px;line-height: 2.0;justify-content: center;text-align: center;width: 90%;margin-left: 5%;}.value-items {display: flex;flex-direction: column;gap: 40px;background-image: url('../img/top_page/65_1.png');width: 100%;height: 750px;background-size: cover;background-position: center;position: relative;}.value-item {display: flex;align-items: flex-start;text-align: center;padding: 50px 0;}.value-title {display: flex;align-items: center;justify-content: center;width: 400px;position: relative;top: 10px;}.bracket-svg {position: absolute;display: flex;justify-content: center;width: 100%;max-width: 100%;}.bracket-svg img {width: 100%;max-width: 350px;height: auto;}.value-item h3 {font-size: 2rem;font-weight: bold;margin: 0 0 0% 10px;background: linear-gradient(to right, #04F0FF, #FF00E5);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;}.value-item p {font-size: 1rem;font-weight: 600;line-height: 1.4;background: linear-gradient(to right, #FFFFFF,#FFFFFF);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;color: transparent;margin: 25px 0 0 40px;flex: 1;vertical-align: center;}@media screen and (max-width: 768px) {.value-item {flex-direction: column;text-align: center;}.value-title {width: 100%;margin-bottom: 10px;text-align: center;}}@media screen and (max-width: 480px) {.values-content h2 {font-size: 1.4rem;}.values-content h3 {font-size: 1.1rem;}.values-content p {font-size: 0.8rem;}.bracket-svg {width: 250px;margin-bottom: 10px;}.value-item p {margin: 10% 10% 5% 10% ;}}#intro{width:1200px;margin:0 auto;}.intro-content{position: relative;}.intro-back-image{position: absolute;text-align: right;right: 20px;top: 180px;width: 50%;height: 100%;overflow: hidden;border-radius: 10px;}.intro-back-image img{opacity: 0.3;}.intro_title h2{font-size: 4rem;}.intro_text{margin: 0 auto;align-items: center;margin-top: 20px;margin-bottom: 40px;width: 70%;}.intro_text p{font-size: 0.8rem;line-height: 2;margin-top: 20px;margin-bottom: 40px;color: #eee;}@media screen and (max-width: 600px) {#intro {width: 100%;padding: 0 20px;margin: 0 auto;}.intro-content {position: relative;padding: 40px 0 0 0;}.intro_title h2 {font-size: 2rem;line-height: 1.2;margin-bottom: 30px;text-align: center;word-wrap: break-word;overflow-wrap: break-word;}.intro_text {width: calc(100% - 40px);margin: 0 auto;padding: 0;}.intro_text p {font-size: 0.9rem;line-height: 1.8;color: #eee;word-wrap: break-word;overflow-wrap: break-word;}}.split-section {display: flex;width: 1200px;height: auto;margin: 0 auto;padding-top: 100px;}.panel {flex: 1;display: flex;justify-content: center;align-items: center;}.left {position: relative;background: #111;color: #fff;overflow: hidden;}.preview {position: absolute;top: 0;left: 0;width: 97%;height: 97%;background-size: cover;background-position: center;opacity: 0;transition: opacity 0.5s ease;display: flex;flex-direction: column;align-items: center;text-align: center;padding: 0px;border: none;border: 8px solid;border-image: linear-gradient(45deg, #009991, white, #009991) 1;}.preview.active {opacity: 1;}.preview .title {font-size: 2rem;margin-top: 100px;margin-bottom: 20px;text-shadow: #242424 2px 2px 4px;}.preview .desc {font-size: 1rem;max-width: 500px;line-height: 1.6;text-shadow: #242424 1px 1px 3px;}.right {display: flex;flex-direction: column;justify-content: flex-start;gap: 0;padding: 15px;position: relative;}.item {position: relative;width: 250px;margin-top: -100px;cursor: pointer;text-align: center;clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);}.hex-shape {width: 100%;height: auto;pointer-events: visibleFill;}.item:first-child {margin-top: 0;}.item img {width: 100%;display: block;}.item:nth-child(odd) {transform: translateX(-150px);}.item:nth-child(even) {transform: translateX(80px);}@media screen and (max-width: 600px) {.split-section {flex-direction: column;width: 100%;height: auto;padding: 20px 0;overflow: hidden;}.panel {flex: none;width: 100%;}.panel.left {display: none !important;}.right {position: relative;display: flex;flex-direction: column;align-items: center;height: auto;padding: 0 0 40px 0;}.item {position: relative;width: 50vw;margin: -35px 0;transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.item:nth-child(1) {transform: translateX(-35%) translateY(0);z-index: 4;}.item:nth-child(2) {transform: translateX(35%) translateY(-15px);z-index: 3;}.item:nth-child(3) {transform: translateX(-35%) translateY(-30px);z-index: 2;}.item:nth-child(4) {transform: translateX(35%) translateY(-45px);z-index: 1;}.item:active, .item:hover {transform: translateX(0) translateY(-10px) scale(1.08);z-index: 10;box-shadow: 0 20px 40px rgba(0,0,0,0.3);}.content-wrapper {flex-direction: column;align-items: center;gap: 36px;}.overlay_text h3 {font-size: 1.6rem;padding: 0.8rem;width: 100%;}}#content-nav {width: 100%;padding: 5rem 0;}.content-wrapper {display: flex;max-width: 1200px;margin: 0 auto;padding: 0 1rem;position: relative;}.content-left, .content-right {flex: 1;position: relative;}.content-left {z-index: 2;margin-right: -5rem;}.content-right {z-index: 1;margin-left: -5rem;}.content-left a, .content-right a {display: block;position: relative;border-radius: 12px;overflow: hidden;text-decoration: none;transition: transform 0.3s ease, box-shadow 0.3s ease;}.content-left a {clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);}.content-right a {clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);}.content-left:hover {z-index: 3;}.content-right:hover {z-index: 3;}.content-left a:hover, .content-right a:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);}.content-left img, .content-right img {width: 100%;height: auto;display: block;transition: transform 0.3s ease;}.content-left a:hover img, .content-right a:hover img {transform: scale(1.02);}.overlay_text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;z-index: 10;}.overlay_text h3 {margin: 0;font-size: 1.5rem;font-weight: bold;line-height: 1.4;color: white;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);padding: 1rem;border-radius: 8px;background-color: transparent;transition: background-color 0.3s ease;}@media (max-width: 768px) {.content-wrapper {flex-direction: column;align-items: center;}.content-left, .content-right {margin: 0;margin-bottom: -1rem;width: 90%;}.content-right {margin-left: 2rem;margin-top: -1rem;}.content-left a, .content-right a {clip-path: none;}.overlay_text h3 {font-size: 1.2rem;}}@media (max-width: 480px) {#content-nav {padding: 1rem 0;}.content-wrapper {padding: 0 0.5rem;}.content-left, .content-right {width: 95%;}.overlay_text h3 {font-size: 1rem;padding: 0.8rem;}}