@charset "utf-8";

.mainArea { position:relative; }

.mainTypo { position: absolute; text-align: right; z-index: 35; right: 7%; bottom: 0; transform: translateY(60%); -ms-transform: translateY(60%); -webkit-transform: translateY(60%);}
.mainTypo p { display:inline-block; margin:-1em auto 0; text-align:right; font-family: 'Crimson Text', serif; font-size: 7.7em; font-size: 5.25vw; line-height: 0.8em; font-weight:100; color:#4cc1e3; pointer-events: none;}

.mainCon:after {content:"";display:block;clear:both;}
.mainLink { position:absolute; width:80%; left:10%; top:50%; margin-top:-26px; z-index:2;}
.mainLink li { float:left; width:33.3%; text-align:center;}
.mainLink li a { position:relative; display:inline-block; padding:0 0.8em 0 0.5em; font-family: 'Playfair Display', serif; font-size:2.5em; line-height:1.6em; font-style:italic; border-bottom:1px solid rgba(255, 255, 255, 0.5); -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
.mainLink li a .line{ position:absolute; right:0; bottom:0; width:10px; height:1px; background:url(../images/bg/white_50.png); transform: translate(0, -3px) rotate(45deg); -ms-transform: translate(0, -3px) rotate(45deg); -webkit-transform: translate(0, -3px) rotate(45deg); }
.mainLink li a:hover { margin-left:0.5em;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto; width:100%; max-width:970px;height:0}
#hd_pop h2, .sound_only {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

@media  (max-width: 1480px){
.mainArea { }

}

@media  (max-width: 1024px){
.mainArea { width:100%; left:0;}
.mainLink { margin-top:-3.2vw; }
.mainLink li a {  padding:0 0.8em 0 0.5em; font-size:3.5vw; line-height:1.8em;}
.mainLink li a .line{  width:6px; transform: translate(0, -1.8px) rotate(45deg); -ms-transform: translate(0, -1.8px) rotate(45deg); -webkit-transform: translate(0, -1.8px) rotate(45deg); }

.mRoom_arrow_inner {width:55%;}
.mRoom_arrow_inner a {width:50%; height:50px; font-size:1.8em;}

}


@media  (max-width: 768px){

}

@media  (max-width: 560px){
}



/* 인트로 */
.intro_wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #fdf4d9;
    /* background-color: #5ddfdb; */
    opacity: 1;
    animation: intro_wrap 3s forwards;
    animation-delay: 0.5s;
    
}
.intro_wrap .intro {
    position: absolute;
    /* top: 45%;
    left: 50%; */
    top: 0;
    left: 0;
    /* transform: translate(-50%, -50%); */
    width: 100%;
    height: 100vh;
    /* animation: intro 3s forwards; */
}
.intro_wrap .intro .video_bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.intro_wrap .intro_m {
    display: none;
}
.intro_wrap .intro_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    animation: intro_logo 3.5s forwards;
}
.intro_wrap .intro_logo .logo {
    position: static;
    height: auto;
    left: auto;
    top: auto;
    z-index: 20;
}
.intro_wrap .intro_logo .text {
    width: 40px;
    margin: 15px auto 0 auto;
}
.intro_wrap .intro img{
    height: auto !important;
}

@keyframes intro_wrap {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; display: none; }
}
@keyframes intro {
    0% { width: 900px; }
    40% { width: 900px; }
    100% { width: 80%; display: none;}
}
@keyframes intro_logo {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
        transform-origin: center;
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
        transform-origin: center;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7) rotate(90deg);
        transform-origin: center;
    }
}
@media( max-width:768px) {
    .intro_wrap {
        top: 50px;
        height: calc(100vh - 50px);
        background-color: #fdf4d9;
        animation-delay: 1s;
    }
    .intro_wrap .intro {
        height: calc(100vh - 50px);
    } 
    .intro_wrap .intro_m {
        display: block;
    }
    .intro_wrap .intro_pc {
        display: none;
    }
    .intro_wrap .intro_logo {
        width: 200px;
        top: 46%;
        left: 48%;
        transform: translate(-50%, -50%);
        animation: intro_logo 4s forwards;
    }
    .intro_wrap .intro_logo img {
        width: 200px;
    }
    @keyframes intro {
        0% { width: 100% }
        30% { width: 100% }
        100% { width: 120%; display: none;}
    }
    @keyframes intro_logo {
        0% { opacity: 1; transform: translate(-50%, -50%) scale(0);}
        40% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5);}
    }
}