@charset "utf-8";
/* -----------------------------------------------
	* 인덱스 스타일 정의
--------------------------------------------------
	- 최초 작성일 : 2021.08.15
	- 최초 작성자 : 아보카도
	- 최종 수정일 : 
	- 최종 수정자 : 
--------------------------------------------------*/

/****************************************************
	Index Wrap Style
*****************************************************/

html, body			{ position: relative; height: 100%; margin: 0; padding: 0; overflow: hidden; }


/****************************************************
	Index User Style
*****************************************************/
#wrap			{ height: 100%; }
#wrapper		{ width: 100%; height: 100%; }
#wrapper iframe { width: 100%; height: 100%; background-color: transparent; overflow:scroll; }

#bgm			{ position: fixed; top: 0; right: 0; text-align: center; width: 145px; z-index: -999; }
#bgm a			{ display: none; width: 15px; height: 15px; text-indent: -999px; overflow: hidden; }
#bgm a.on		{ display: inline-block; }
#site_bgm_box	{ width: 0px; height: 0px; overflow: hidden; }

html.single #header .bgm-btn {display:inline-block !important;}

body #header,
html.single #header {display:none;}

/* 커튼 이미지 설정 */
#curtain-wrapper {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

/* 커튼이 열린 후에는 pointer-events를 none으로 설정 */
#curtain-wrapper.opened {
    pointer-events: none;
}

.curtain {
    position: absolute;
    transition: all 1.5s ease; /* 애니메이션 속도 */
    object-fit: cover;
}

#curtain-top {
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 101;
}

#curtain-left {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

#curtain-right {
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    z-index: 100;
}

/* 로고 위치 */
#logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    cursor: pointer;
}

/* 로고 사라지기 애니메이션 */
#logo.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 모바일 최적화 (화면 너비가 768px 이하일 때) */
@media (max-width: 768px) {
    #curtain-wrapper {
        height: 100%;
        width: 100%;
    }
    
    #logo {
        width: 180px;
    }
    
    /* 모바일에서는 상단에서 100px만 남기기 */
    #curtain-top.open-top {
        transform: translateY(-80%);
    }
    
    /* 커튼이 열린 상태 (모바일) */
    #curtain-left.open-left {
        transform: translateX(-98%);
    }
    
    #curtain-right.open-right {
        transform: translateX(98%);
    }
}

/* 태블릿 최적화 (화면 너비가 769px~1024px일 때) */
@media (min-width: 769px) and (max-width: 1024px) {
    #logo {
        width: 250px;
    }
    
    /* 태블릿에서는 상단에서 120px만 남김 */
    #curtain-top.open-top {
        transform: translateY(-75%);
    }
    
    /* 커튼 열린 상태 (태블릿) */
    #curtain-left.open-left {
        transform: translateX(-90%);
    }
    
    #curtain-right.open-right {
        transform: translateX(90%);
    }
}

/* 데스크탑 스타일 (화면 너비가 1025px 이상일 때) */
@media (min-width: 1025px) {
    #logo {
        width: 300px;
    }
    
    /* 데스크탑에서는 상단에서 150px만 남기기 */
    #curtain-top.open-top {
        transform: translateY(-70%);
    }
    
    /* 커튼이 열린 상태 (데스크탑) */
    #curtain-left.open-left {
        transform: translateX(-30%);
    }
    
    #curtain-right.open-right {
        transform: translateX(630%);
    }
}

/* 처음에는 #logo-container만 pointer-events를 auto로, 나머지는 none으로 설정 */
#curtain-top,
#curtain-left,
#curtain-right {
    pointer-events: none;
}

#logo-container {
    pointer-events: auto;
}

/* 로고가 사라질 때 스타일 */
#logo-container.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0s 0.5s;
}

/* 로고 컨테이너 숨김 */
#logo-container.hidden {
    display: none;
}