/* page1 */
	html,
	body {
		height: 100%;
		color:black;
		background: black;
		font-family: "Noto Sans KR",sans-serif;
		font-size: 16px;
		letter-spacing: 0px;
		word-spacing: 0px;
		line-height: 1.6;
		text-align: left;
		word-break: keep-all;
	}

	@keyframes fadein {
		from { opacity: 0 }
	
		to { opacity: 1 }
	}

	h1 {
		opacity: 1;
		padding-left: 5px;
		margin-left: 30px;
		margin-top: 40px;
		width: 260px;
		background-color: WhiteSmoke;
		animation: fadein 1s ease-in-out;
	}

	section {
		padding-bottom: 2px;
		padding-right: 2px;
		padding-top: 2px;
		padding-left: 5px;
		margin-left: 30px;
		width: 595px;
		height: auto;
		background-color: WhiteSmoke;
		animation: fadein 1s ease-in-out;
	}

	pre {
		font-family: "Consolas", monospace;
		font-size: 13px;
		letter-spacing: 0px;
		word-spacing: 0px;
		line-height: 1.2;
		background-color: WhiteSmoke;

	}

	div {
		animation: fadein 2s ease-in-out;
	}

	#band {
		width: 565px;
	}

	#fun {
		padding-left: 4px;
		width: 95px;
		height: auto;
		background-color: whitesmoke;
	}
/* vertical */

	#vertical {
		padding-left: 5px;
		transform: rotate(-90deg);
		color: black;
		background-color: whitesmoke;
		width: 345px;
		height: auto;
		margin-left: 70vw;
		position: absolute;
	    animation: scrollDown 12s linear infinite,fadein 2.5s ease-in-out;
	}

	@keyframes scrollDown {
	    0% {
	        top: -30%;
	    }
	    100% {
	        top: 130vh;
	    }
	}

/* section */
	
	label, #section7 {
		cursor: pointer;
		color: magenta;
	}

	input[type="checkbox"]:checked + label + #section2,
	input[type="checkbox"]:checked + label + #section3 {
	    display: inline;
	}

	#section2, #section3, #section4 ,#ipod {
		display: none; 
		margin: 0;
		padding: 0;
	}

	input[type="checkbox"] {
		display: none;
	}

	input[type="checkbox"]:checked + label {
		display: none;
	}

	label[for="toggle1"], 
	label[for="toggle2"], 
	label[for="toggle3"], 
	label[for="toggle4"], 
	label[for="toggle5"],
	label[for="toggle6"],
	label[for="toggle7"], 
	#playmusic, 
	.blink-text,
	#section7 {
	    animation: blinking 2s ease-in-out infinite; /* 깜빡이는 애니메이션 적용 */
	}

	@keyframes blinking {
	    0% {
	        opacity: 1;
	    }
	    50% {
	        opacity: 0.1;
	    }
	    100% {
	        opacity: 1;
	    }
	}

/* pages */
	
	/* menu */
	a {
		text-decoration: none;
		color: inherit;
	}

	#main:hover,
	#backto1:hover,
	#backto2:hover,
	#backto3:hover,
	#backto4:hover,
	#to1:hover,
	#to2:hover,
	#to3:hover,
	#to4:hover,
	#to5:hover {
		color: black;
		background-color: whitesmoke; 
	}

	#main {
		width: 35px;
		background-color: black;
		color: darkgray;
	}

	#number1 {
		width: 65px;
		margin-top: -72.5px;
		margin-left: 75px;

	}

	#number2 {
		width: 65px;
		margin-top: -72.5px;
		margin-left: 110px;
	}

	#number3 {
		width: 65px;
		margin-top: -72.5px;
		margin-left: 145px;
	}

	#number4 {
		width: 65px;
		margin-top: -72.5px;
		margin-left: 180px; 
	}

	#number5 {
		width: 75px;
		margin-top: -72.5px;
		margin-left: 215px; 
	}

	#backto1 {
		width: 25px;
		margin-top: -72.5px;
		margin-left: 75px;
		color: darkgray;
		background-color: black;
	}

	#backto2 {
		width: 25px;
		margin-top: -72.5px;
		margin-left: 110px;
		color: darkgray;
		background-color: black;
	}

	#backto3 {
		width: 25px;
		margin-top: -72.5px;
		margin-left: 145px;
		color: darkgray;
		background-color: black;
	}

	#backto4 {
		width: 25px;
		margin-top: -72.5px;
		margin-left: 180px;
		color: darkgray;
		background-color: black;
	}

	#to2 { 
		width: 25px;
		margin-top: -72.5px;
		margin-left: auto;
		margin-right: 145px;
		color: darkgray;
		background-color: black;
	}

	#to3 { 
		width: 25px;
		margin-top: -72.5px;
		margin-left: auto;
		margin-right: 110px;
		color: darkgray;
		background-color: black;
	}

	#to4 { 
		width: 25px;
		margin-top: -72.5px;
		margin-left: auto;
		margin-right: 75px;
		color: darkgray;
		background-color: black;
	}

	#to5 { 
		width: 35px;
		margin-top: -72.5px;
		margin-left: auto;
		margin-right: 30px;
		color: darkgray;
		background-color: black;
	}


	/* 나머지 */
	#ipod { 
		margin-left: 0px;
		margin-top: 30px;
		margin-bottom: 30px;
		width: 267px;
		background-color: WhiteSmoke;
	}


	input[type="checkbox"]:checked + label + #ipod {
		display: block;
	}

/* marquee 대체 애니매이션 */

	.marquee-container {
	    position: relative;
	    width: 100%;
	    overflow: hidden;
	    height: auto;
	}

	.marquee-content {
		display: inline-block;
	    animation: marqueeAnimation 13s linear infinite, fadein 1.2s ease-in-out; 
	}

	#band {
		display: inline-block;
	    animation: marqueeAnimation 16s linear infinite;
	}

	#fun {
		display: inline-block;
	    animation: marqueeAnimation2 30s linear infinite;
	}


	@keyframes marqueeAnimation {
	    0% {
	        transform: translateX(-100%); 
	    }
	    100% {
	        transform: translateX(108vw); 
	    }
	}
	@keyframes marqueeAnimation2 {
	    0% {
	        transform: translateX(100vw); 
	    }
	    100% {
	        transform: translateX(-100%); 
	    }
	}

	.marquee-content:hover {
	    animation-play-state: paused;
	}

	iframe.sound-player {
      display: none;
    }



/* 실례합니다 */
	
	

	#man1 {
		font-family: "Consolas", monospace;
		font-size: 13px;
		letter-spacing: 0px;
		word-spacing: 0px;
		line-height: 1.1;
		padding-left: 5px;
		color: black;
		background-color: whitesmoke;
		margin-left: 30px;
		font-size: 13px;
		width: 215px;
	}

	#man2-container {
	    margin-left: 30px;
	    margin-top: -25px;
	}

	#man2 {
		padding-left: 5px;
	    background-color: whitesmoke;
	    color: black;
	    transform-origin: top; 
	    width: 215px;
	    transform: scaleY(1);
    	transition: transform 0.5s ease-in-out;
	    
	}

	@media (min-height: 500px) {
	    #man2 {
	        transform: scaleY(1); 
	    }
	}

	@media (min-height: 700px) {
	    #man2 {
	        transform: scaleY(3); 
	    }
	}

	@media (max-height: 400px) {
	    #man2 {
	        transform: scaleY(0.5); 
	    }
	}

	/* pop up */

	.modal {
            display: none; /* 기본적으로 숨김 */
            position: fixed;
            z-index: 1; /* 다른 요소 위에 표시 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 반투명한 배경 */
        }

    /* 모달 내용 */
    .modal-content {
        background-color: whitesmoke;
        margin: 15% auto; /* 화면 가운데 정렬 */
        padding: 20px;
        width: 330px;
        text-align: center;
    }

    /* 닫기 버튼 */
    .close {
        color: #aaa;
        float: right;
        margin-right: -10px;
        margin-top: -12px;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover, .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    #man1 {
    	animation: fadein 2s ease-in-out;
    }

/* page5 */

	#dj {
		margin-left: 30px;
		padding: 7px;
		font-family: "Consolas", monospace;
		font-size: 13px;
		letter-spacing: 0px;
		word-spacing: 0px;
		line-height: 1.4;
		width: 585px;
	}



	.no-mobile {
		display: none;
	  }
	  
	  @media (max-width: 767px) {
		.main-content {
		  display: none;
		}
		.no-mobile {
		  height: 100%;
		  display: flex !important;
		  flex-direction: column;
		  align-items: center;
		  justify-content: center;
		  font-size: 14px;
		  color: white;
		}
		p {
			margin: 0;
			padding: 0;
		}
	  }