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

#topani{ width: 100%; background: #e7e3d9; position: relative; overflow: hidden; font-family: "Noto Sans KR"; }
#topani>*{ position: absolute; opacity: 0; }
#ani01{ background: url(/images/topaniback.jpg) 50% 0% / cover; width: 100%; }

#ani02{ top:143px; left: calc(50% - 350px); animation: anik02 ease-in-out 1.5s; animation-delay: 0s; animation-fill-mode:forwards;  }
@keyframes anik02{  50% {  opacity:0.5; top:183px; } 100% {  opacity:1; top:163px; } }
#ani03{ 
    font-family: "Cute Font"; font-size: 300%; font-weight: bold; width: 230px; text-align: center;  left: calc(50% - 115px);
    text-shadow: -3px 0px #fff, 0 3px #fff, 3px 0 #fff, 0 -3px #fff;
    animation: anik03 ease-in-out 1.5s; animation-delay: 0s; animation-fill-mode:forwards; 
}
#ani04{ 
    width: 100%; padding:0px 20px; box-sizing: border-box; text-align: center; font-weight: 500; color:rgba(0, 0, 0, 0.9); 
    animation: anik04 ease-in-out 1.5s; animation-delay: 1s; animation-fill-mode:forwards; 
}

#conts{ letter-spacing: -0.03em; color:#555; }
#conts>h1{ color:#000; }

#location{ font-size:95% ; color:rgba(0, 0, 0, 0.54); line-height: 16px ; }
#location .material-icons{ vertical-align:text-bottom; font-size: 17px;}
#location>span{ display: inline-block; padding-right: 10px;}
#location span.rarr{ 
        display: inline-block; padding-right: 30px; 
        background:url(/images/arrowR.svg) no-repeat calc(100% - 10px) 50%;
}

.pagett{ font-family: "Cute Font"; font-weight: initial; line-height: initial; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; background: #fff; }
.pagett>p{ font-family: "Noto Sans KR"; color:rgba(0, 0, 0, 0.5); font-weight: 500; }

@media screen and (min-width: 1024px) {
    html{ height: 100%; }
    body{ 
        background-image: url(/images/pageback.svg), url(/images/pageback.svg); 
        background-repeat: no-repeat, no-repeat;
        background-position: calc(50% - 1000px - 600px + 24px) 415px, calc(50% + 1000px + 600px - 24px) 415px;
        min-height: calc(100% - 237px); padding-bottom: 237px; position: relative; 
    }

    #topani{ height: calc(255px + 77px); }
    #ani01{ height: 1282px; animation: imageZoom linear 40s infinite;}
    @keyframes imageZoom{
        0% { top: 77px; }
        50% { top: calc(-1282px + 255px + 77px); }
        100% { top: 77px; }
    }
    #ani03{ bottom:80px; }
    @keyframes anik03{  50% {  opacity:0.5; bottom:120px; } 100% {  opacity:1; bottom:100px; } }
    #ani04{ font-size: 120%; bottom:70px; }
    @keyframes anik04{  100% {  opacity:1; bottom:50px; } }

    #conts{ width: 1200px; margin: 30px auto 50px auto; } /*position: relative; */
    #location{ position: absolute; text-align: right; top:440px; right: calc(50% - 600px + 75px); }
    .pagett{ font-size: 300%;  height: 150px; margin-bottom: 40px; padding-left: 55px; border:10px solid #a3abf7; border-radius:100px;  } /*margin-top = #nav>li>a height */
    .pagett>p{ 
        height: 40px; line-height: 55px; vertical-align: text-bottom; margin: 5px 0px 0px 25px; 
        font-size: 38%; border-left: 1px solid rgba(0, 0, 0, 0.15); padding-left: 15px; 
    }

    footer{ position:absolute; bottom: 0px; width: 100%; }
}
@media screen and (max-width: 1024px) {
    #topani{ height: 200px; }
    #ani01{ height: 350px; animation: imageZoom linear 10s infinite;}
    @keyframes imageZoom{
        0% { top: 0px; }
        50% { top: calc(-350px + 200px); }
        100% { top: 0px; }
    }
    #ani03{ top:110px; }
    @keyframes anik03{  50% {  opacity:0.5; top:70px; } 100% {  opacity:1; top:90px; } }
    #ani04{ font-size: 105%; top:110px; }
    @keyframes anik04{  100% {  opacity:1; top:130px; } }

    #conts{ min-height: 300px; padding:10px 20px 40px 20px;  }
    #location{ padding: 5px 0px 15px 0px; border-bottom:1px solid rgba(0, 0, 0, 0.15) }
    .pagett{ font-size: 250%;  padding:15px 5px; margin-bottom: 20px; border-width: 0px; border-bottom: 3px dotted rgba(0, 0, 0, 0.15); }
    .pagett>p{font-size: 40%; width: 100%; }
}