
body{background: black; margin: 0%;width: 100%;
	overflow-x: hidden;}
section, footer{width:1200px; margin:auto;}
span {color: #FFFF00 ;font-size: 1.5em;line-height: 150%; background: none}


 section img {
            transition: transform 0.4s; /* 변환 효과에 0.3초의 지속 시간 적용 */
        }

        /* 마우스 호버 시 이미지에 적용되는 스타일 */
        section img:hover {
            transform: scale(1.2) rotate(2deg); /* 1.2배 크기로 확대하고 2도만큼 회전하는 효과 적용 */
            animation: buzz 0.01s ease-in-out infinite alternate; /* buzz 애니메이션 적용 */
        }

        /* BUZZ 애니메이션 정의 */
        @keyframes buzz {
            0% { transform: translate(-2px, -2px); }
            100% { transform: translate(2px, 2px); }}

.bg1 {background-image: url('1.png');
	  background-size: cover; margin-top: 50px; 
	  background-position: center;width: 1200px; height: 930px;
      overflow-x: hidden;}

.bg2 {background-image: url('2.png');
	  background-size: cover; margin-top: -5px;
	  background-position: center;width: 1200px; height: 857px;}

.bg3 {background-image: url('3.png');
	  background-size: cover; margin-top: -5px;
	  background-position: center;width: 1200px; height: 847px;}

.bg4 {background-image: url('4.png');margin-top: -5px;
	  background-size: cover; 
	  background-position: center;width: 1200px; height: 830px;}

.bg5 {background-image: url('5.png');margin-top: -5px;
	  background-size: cover; 
	  background-position: center;width: 1200px; height: 830px;}

.margin-top1{margin-top: -8px}

@keyframes marquee_1 { 0% { left: 20%; } 100% { left: -80%; } }
    @keyframes marquee_2 { 0% { right: 100%; } 100% { right: 0; } }
    @keyframes marquee_3 { 0% { left: 70%; } 100% { left: -30%; } }
 
    .marquee .outer {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        overflow-x: hidden; overflow: hidden;}
 
    .marquee .outer .inner {
        position: relative;
        display: flex;
        width: 200%;}
 
    .marquee .outer .inner:nth-child(1) {
        animation: marquee_1 10s linear infinite;}
 
    .marquee .outer .inner:nth-child(2) {
        animation: marquee_2 10s linear infinite;}
 
    .marquee .outer .inner:nth-child(3) {
        animation: marquee_3 10s linear infinite;}
 
    .marquee .outer .inner .content {
        width: 50%;}
.margin2 {margin-bottom: 600px}

.star {position: absolute;left: 0;top: 0;}

.button {text-align : center;  }

#intro{position: relative; overflow: hidden;}
	  

