/* BASIC css start */
#contentWrapper {padding:0;}

#ep-header .center-box {display:none;}

#main .main-logo {    
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 300px;
    pointer-events: none;
    }
#main .main-logo img {width:100%;}

#main {width: 100%; font-size:0;}
#main a {font-size: 0 !IMPORTANT;line-height: 0 !important;}
#main .part-1 {width: 100%;     position: relative;}
#main .part-1 img,
#main .part-1 video{width: 100%; height:auto;;}
#main .part-1 h2 {font-size: var(--p-1); display: block; text-align: center; color:white; position: absolute; z-index: 2; left: 50%;  bottom: 40px;  transform: translate(-50%, 0);}

#main .part-2 {width: 100%; display: flex; align-items: stretch;position: relative; z-index: 2;}
#main .part-2 .bx {flex: 1;width: 50%; position: relative;}
#main .part-2 .bx a {width:100%; display:block;}
#main .part-2 .bx h2 {   
    font-size: var(--f-1);
    display: block;
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
}
#main .part-2 img,
#main .part-2 video{width: 100%; height:calc(100% - 105px); object-fit: cover;}

#main .part-3 {width: 100%; height: 60vh; background: url(http://magjay.co.kr//web/2024_web/main/back_6201.jpg); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; background-size: cover; background-position: center center;position: relative;}
#main .part-3 a {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    -webkit-background-attachment: fixed, scroll;
    background: rgba(0,0,0,0.2);
}
#main .part-3 .text-box { position: absolute; left: var(--p-1); bottom: var(--p-2);  text-align: left;}
#main .part-3 .text-box h2 {font-size: var(--f-4); color: #fff; margin: 0 0 var(--p-1);}
#main .part-3 .text-box p {font-size: var(--f-3); color: #fff;}

#main .part-4 { width: 100%;position: relative; z-index: 2;    font-size: 0;}
#main .part-4 h2 {    
    font-size: var(--f-1);
    display: block;
    text-align: center;
    line-height: 2;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
    z-index: 2;
    }
#main .part-4 .bx {width: 33.3333%; display: inline-block; vertical-align: top; position: relative;}
#main .part-4 .bx a {width:100%;display:block;}
#main .part-4 .bx a:after {content:" ";}

#main .part-4 img,
#main .part-4 video{width: 100%;transition: all var(--speed); <!--filter: grayscale(1)-->;}
#main .part-4 .bx:hover img,
#main .part-4 .bx:hover video {filter: grayscale(0);}

#main .vjs-controls-disabled {width: 100%; height:auto;}
.LogoTop{z-index: 9999;
    left: 50%;
    top:10px;
    transform: translate(-50%, 0%);
    font-size: 47px;
    position: fixed;
    opacity: 1; /* óÀ½¿¡´Â ¼û±è */
    transition: opacity 0.2s ease-in-out; /* ºÎµå·¯¿î ÆäÀ̵å È¿°ú */
}

#main .part-1 .mainCol2{display:flex;}
#main .part-1 .mainCol2 li{position:relative; width:50%;}
body{height:max-content; position:relative;}
/* BASIC css end */