.videoBox{width:100%;height:100%; overflow:hidden; position:absolute}

#imgBG{
	position:fixed; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   height:auto;
   min-height:100%; /*동영상 높이를 꽉차게*/
  transform:translateX(-50%) translateY(-50%);
   z-index:-100;
}

.cls-1 {
   fill: none;
   stroke: #000000;
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 40px;
   scale: 1;
}
.down{
   display: block; position: absolute; width: 50px; height: 90px;
	left:50%; margin-left: -17px; bottom: 15%;
   overflow: hidden;
   border: 1px solid #101010;
   border-radius: 30px;
   box-shadow: 0 0 10px var(--font-color-sub);
   backdrop-filter: blur(2px);
}

#scrolldown{
   animation:ani 1.5s infinite ease;
}
@keyframes ani {
	0% { transform:translateY(-100px); opacity:1; color:#fff;}
	100% { transform:translateY(100px); opacity:1; color:#fff;}
}		

	
#content{ width:100%; margin:0;; background:rgba(0,0,0,.9);position: relative;}
#content h2{
   position: absolute; top: -400px;
   width: 100%; text-align: center; font-size: 5rem; color: #fafafa;
}
section:first-of-type{
   
    @media screen and (max-width:1024px) {
        margin: 0;
    }
       & h4{
        font-size: 4rem; text-align: center; padding: 50px 0;
        & >span{
            font-size: 5rem;
            line-height: 4.7rem;
            @media screen and (max-width:768px) {
                font-size: 4rem;
                line-height: 3rem;
            }
            @media screen and (max-width:640px) {
                font-size: 4rem;
                line-height: 3rem;
            }
        }
        @media screen and (max-width:768px) {
            font-size: 3rem;
        }
    }
        & >p{
        font-size: 1.4rem; text-align: center;
        padding: 0 20%;
        margin-bottom: 100px;
        font-family: 'Electronic Arts Display';
        @media screen and (max-width:768px) {
            font-size: 1.2rem;
            padding:20px;
        }
       
    }
}


.bm{
    padding-bottom: 100px;
    & .tabs{
        display: flex; align-items: center; justify-content: center; gap: 1%; flex-wrap: wrap;
        font-size: clamp(1rem, 1.5vw, 1.5rem);
        margin-bottom: 100px;
        @media screen and (max-width:1024px) {
            margin: 0;
        }
        @media screen and (max-width:768px) {
            display: none;
        }
        & >a{
            color: var(--font-color-point1);
            font-weight: bolder;
            padding: 1% 2%;
            /* border: 1px solid var(--font-color-point1); */
            box-shadow: 0 0 10px var(--font-color-point1);
            border-radius: 100px;
            margin: 10px 5px;
            transition: all .5s ease-in-out;
                & >span{
                    @media screen and (max-width:768px) {
                        display: none;
                    }
                }
            @media screen and (max-width:768px) {
               padding: 0;
               width: 10px; height: 10px;
            }
        }
        & >a.active{
            color: var(--font-color-sub);
            border: none;
            box-shadow: inset 0 0 10px var(--font-color-sub);
        }
    }
    & .sntxt{
            display: flex; align-items: center;
            margin: 0 5%;
            @media screen and (max-width:1024px) {
                flex-direction: column;
                margin: 0;
            }
            & .map_explain{
                width: 50%; height: 50%;
                @media screen and (max-width:1024px) {
                    width: 100%;
                }
                & .page{
                    
                    & img{
                        object-fit: cover;
                        width: 100%;
                        z-index: -2;
                        @media screen and (max-width:1024px) {
                            padding: 10%;
                        }
                    }
                }
            }
            & #maps_exp{
                width: 50%;
                @media screen and (max-width:1024px) {
                    width: 100%;
                }
                & dl{
                    position: relative;
                    height: 100%;
                    @media screen and (max-width:1024px) {
                            position: static;
                    }
                    & dt{
                        position: absolute; top: 39%; left: -100%; z-index: 2;
                        font-size: clamp(3.2rem, 5vw, 5rem);
                        text-shadow: 0 0 10px var(--font-color-point1);
                        width: 100%;
                        text-align: center;
                        @media screen and (max-width:1024px) {
                            position: static;
                        }
                    }
                    & dd{
                        font-size: clamp(1rem, 1.3vw, 1.5rem);
                        padding: 2%;
                        & >span{
                            font-size: clamp(1.5rem, 1.8vw, 2.1rem);
                            line-height: 25px;
                        }
                        @media screen and (max-width:768px) {
                            padding: 20px;
                    }
                }
            }
        }
    }
}