@charset "utf-8";
/* CSS Document */

#popupwrap{ position: absolute; top:0px; left: 0px; }
#popupwrap>div{ position:absolute; z-index: 200; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);  }
.popdiv>div{ width: 100%; height: 100%; position:absolute; z-index: 1; top:0px }
.popdiv>div>a{ position:absolute; display: block; width: 100%; height: calc(85% - 40px); top:calc(15%); }
.popdiv>img{ display: block; position: relative; z-index: -1;}
.xpop{ position: absolute; top:-20px; right: -20px; }
.dayclose{ position:absolute; z-index: auto; bottom:0px; line-height: 40px; padding-left: 10px; font-size: 95%; }
#popwin{ width: fit-content; height: fit-content; position: relative; }

h1:not(header h1){ font-family: "Cute Font"; font-size: 3.5rem; font-weight: 500; color:#000; width: 100%; letter-spacing: -0.05em; }

#idxani{ position: relative; overflow: hidden; font-family: "Noto Sans KR"; letter-spacing: -0.03em; color:#fff; text-align: center;  }
#idxani>*{ position: absolute; z-index: auto; opacity: 0;}
#aniback{ width: 100%; height: 100%; position: absolute; z-index: 0; width: 100%; height:100%; animation: anikeyback ease-in-out 1.5s; animation-fill-mode:forwards; }
@keyframes anikeyback{ 100% {  opacity:1; } }
#aniback .bgdiv{ height:100%; width: 100%; background-position: 50% 50%; background-repeat: no-repeat; position: absolute; background-size: cover; }

#idxani01{ 
    width: 750px; height: 305px; background: url(/images/idx_anibox.svg) no-repeat;
    top:calc(100px + (600px - 305px)/2); left: calc(50vw - 375px);
    animation: anikey01 ease-in-out 1.5s; animation-fill-mode:forwards;
}
@keyframes anikey01{ 
    0%{ scale: 0.8;} 
    40%{ scale: 1.1; opacity:1; } 
    100% { scale: 1; opacity:1; } 
}
#idxani02{ 
    width: 750px; top:var(--ani02top); left: calc(50vw - 375px);
    font-family: "Cute Font"; font-size: 5em; font-weight: bold; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    animation: anikey02 ease-in-out 2s; animation-delay: 1s; animation-fill-mode:forwards;
}
@keyframes anikey02{ 
    50% { top:calc(var(--ani02top) - 40px); opacity:1; } 
    100% { top:calc(var(--ani02top) - 20px); opacity:1; } 
}
#idxani03{ 
    width: 750px; top:var(--ani03top); left: calc(50vw - 375px);
    font-size: 1.5em; font-weight: 500; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
    animation: anikey03 ease-in-out 1s; animation-delay: 2.5s; animation-fill-mode:forwards;
}
@keyframes anikey03{ 
    100% { top:calc(var(--ani03top) - 20px); opacity:1; } 
}

#qbnznoe{
    display: flex; flex-wrap: wrap; justify-content: space-between; text-align: center;
    position: relative; top: -70px;
}
#qbnznoe>a{
    display: block; width: 32.5%; border-radius: 10px; color:#fff; padding: 2.5rem 2rem; 
    background-repeat: no-repeat, repeat; background-position: 0% 100%, 0%; background-size: 100%, auto;
}
#qbnznoe>a>h1{ color: inherit; font-size: 3rem; font-family: 'Cute Font'; margin-bottom: 1rem; }
#qbnznoe>a>h1+p{ opacity: 0.6; font-weight: 300; }
#qbnznoe>a:nth-child(1){background-color: #87252C; background-image: url(/images/idxqimg_01.png), url(/images/p_circle.svg);}
#qbnznoe>a:nth-child(2){background-color: #357A34; background-image: url(/images/idxqimg_02.png), url(/images/p_circle.svg);}
#qbnznoe>a:nth-child(3){background-color: #344646; background-image: url(/images/idxqimg_03.png), url(/images/p_circle.svg);}

#idxbbswrap{ display: flex; flex-wrap: wrap; background: #f2f2f2; width: 100%;  justify-content: center; column-gap: 1em; padding:3em 0em; } 
.idxbbsel{ width: calc(var(--fullwidth)/2 - 0.5em); }
.idxbbsel>h1>span
{ font-size: 1.8rem; display: inline-block; margin-left: 0.6em; color:rgba(0, 0, 0, 0.5); letter-spacing: -0.03em; }

.idxbbs{ list-style: none; padding: 0em; border-top:1px solid rgba(0, 0, 0, 0.1);  }
.idxbbs>li{ border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding:15px 10px;   }
.idxbbs>li>div, #idxgallery>div>div
{ display: flex; font-size: 1.1em; }
.idxbbs>li>p, #idxgallery>div>p
{color:#F46F5E; font-weight: 300; }

#idxgallery{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2em 0em 3em 0em; width: var(--fullwidth); margin: auto;  }
#idxgallery>h1{ margin-bottom: 1rem; text-align: center; }
#idxgallery>h1>span{ display: block; font-size: 1.8rem; color:rgba(0, 0, 0, 0.5); letter-spacing: -0.03em; }
#idxgallery>div{ width: calc(32.5%); background: #fff; margin-bottom: 2em; }

#idxgallery>div>a:first-of-type{ 
    display: block; margin-bottom: 0.5em; height: 0; padding-bottom: calc(100% * 10/16); overflow: hidden;
    background-position: 50% 50%; background-size: cover; border:1px solid #ddd; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1); transition: transform 0.25s ease-in-out; 
}
#idxgallery>div>a:first-of-type:hover{ transform: scale(1.15); z-index: 2; }
#idxgallery>div>a:first-of-type::before{
    content: ''; display: block; box-sizing: border-box; width: 100%; padding-bottom: calc(100% * 10/16 - 14px); border: 8px solid #fff;
}
#idxgallery>div>div{ display: flex; }

#cscenter{ 
    height: 520px;  background: url(/images/cscenterback.jpg) repeat-x 50% 50% / cover; background-attachment: fixed; 
    text-align: center; color:#fff; line-height: initial; position: relative;
}
#cscenter>h1{ color: #FEF695; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1); padding-top: 1.5em; }
#cscenter>.desc{ font-size: 1.1em; }
#cscenter>.cstel{ font-family: "Cute Font"; font-size: 4rem; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1); letter-spacing: -0.05em; }

a.btn-box{ display: block; width: 150px; line-height: 2.3em; margin: auto; }
a.btn-skew{ margin-top: 2em; }
a.btn-skew:before { background: #7F0022; }

.cpfreepik{ position: absolute; z-index: auto; bottom:1em; right: 1em; font-size: 0.8em; opacity: 0.5; }

/*PC 이상*/
@media screen and (min-width: 1024.1px) {
    :root {
        --ani02top: 320px;
        --ani03top: 420px;
    }
    
    #conts{ padding:0px; }

    /* #idxbbswrap>div, #idxgallery{padding: 3em 0em; } */
    .wd1200{ width: 1200px; margin: auto; }

    #idxani{ height: 700px; }
    #aniback, #aniback>div{ height: 700px; }

    #qbnznoe{ height: calc(390px - 40px); }
    #qbnznoe>a{ height: 390px; }
}
/*탭 이하*/
@media screen and (max-width: 1024px) {
    :root {
        --ani02top: 130px;
        --ani03top: 210px;
    }    
    #conts{ padding-top: calc(3em + 3px); padding: 0em; }
    .lf1em{ padding-left: 1em; padding-right: 1em;}

    #idxani{ height: 350px; }
    #idxani02{ width: 100%; left: 0; font-size: 4em; }
    #idxani03{ width: 100%; padding: 0em 2em; left: 0; font-size: 1.2em; }

    #qbnznoe{ height: calc(350px - 40px); }
    #qbnznoe>a{ height: 350px; }
    #qbnznoe>a>h1{ font-size: 2.5rem; }

    .idxbbsel>h1, #idxgallery>h1 { font-size: 2.5rem; }
    .idxbbsel>h1>span, #idxgallery>h1>span { font-size: 1.5rem; }

    /* .popdiv{ left: 1em !important; } */
    .popdiv>img{ max-width: calc(100vw - 2rem); }    
}
/*모바일 이하*/
@media screen and (max-width: 500px) {
    :root {
        --ani02top: 230px;
        --ani03top: 310px;
    }
    #idxani{ height: 600px; }

    #qbnznoe{ top:0px; margin-top:1em; height: auto; }
    #qbnznoe>a{ width: 100%; margin-bottom: 0.5em; }

    #idxbbswrap{ padding: 0em; }
    .idxbbsel{ width: var(--fullwidth); padding:2em 0em; }
    .idxbbsel:nth-of-type(1) { border-bottom: 1px solid rgba(0, 0, 0, 0.3); }

    .idxbbsel>h1, #idxgallery>h1 { text-align: center; }
    .idxbbsel>h1>span, #idxgallery>h1>span { display: block; margin: 0em; }

    #idxgallery>div{ width: calc(100%); margin-bottom: 1em; text-align: center; }
    #idxgallery>div>div{ justify-content: center; }
    #idxgallery>a{ margin-top: 1em;}

    #cscenter>.cstel{ font-size: 3rem; }
    

    /* .popdiv{ top: 8em !important; } */
    .popdiv{ left: 1em !important; }
    .xpop{ position: absolute; top:-5px; right: -5px; opacity: 0.5; transform: scale(0.7); }    
}