@keyframes top_img_wrap_ani {
    0% {
        
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(20%);
        -moz-transform: translatey(20%);
        -o-transform: translatey(20%);
        transform: translatey(20%);
    }
}
@-webkit-keyframes top_img_wrap_ani {
    0% {
        
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(20%);
        -moz-transform: translatey(20%);
        -o-transform: translatey(20%);
        transform: translatey(20%);
    }
}

@keyframes middle_img_ani {
    0% {
        
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes middle_img_ani {
    0% {
        
    }
    100% {
        opacity: 1;
    }
}

@keyframes login_wrap_ani {
    0% {
        
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(-100px);
        -moz-transform: translatey(-100px);
        -o-transform: translatey(-100px);
        transform: translatey(-100px);
    }
}
@-webkit-keyframes login_wrap_ani {
    0% {
        
    }
    100% {
        opacity: 1;
        -webkit-transform: translatey(-100px);
        -moz-transform: translatey(-100px);
        -o-transform: translatey(-100px);
        transform: translatey(-100px);
    }
}



/*reset CSS*/
* { margin: 0; padding: 0;}
a { text-decoration: none; color: black; }
li { list-style: none; }
img { border: none; }

/***************************************/
body { width: 100%; height: 100%;
       position: fixed; top: 0; left: 0;
       background-color: #fff; overflow: hidden; }

/*Costa 글씨부분*/
#top_div { position: relative; width: 100%; height: 8%; margin-top: 7%; text-align: center;}
#top_img_wrap {position: absolute; width: 100%; height: 100%; top: -20%; left: 0; opacity: 0;}
#top_img_wrap.on {
    -webkit-animation: top_img_wrap_ani .5s linear forwards;
    -moz-animation: top_img_wrap_ani .5s linear forwards;
    -o-animation: top_img_wrap_ani .5s linear forwards;
    animation: top_img_wrap_ani .5s linear forwards;
}



#top_img { height: 100%; }

#middle_div { position: relative; width: 100%; height: 35%; text-align: center; }
.middle_img { position: relative; height: 70%; top: 15%; z-index: 9; opacity: 0;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}
.middle_img.on {
    -webkit-animation: middle_img_ani .5s linear forwards;
    -moz-animation: middle_img_ani .5s linear forwards;
    -o-animation: middle_img_ani .5s linear forwards;
    animation: middle_img_ani .5s linear forwards;
}
#ok_circle_img.error {
    -moz-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    
    opacity: 0 !important;
}
#error_circle_img {
    /*
    -moz-transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
     */
}
#error_circle_img.error {
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}


/**************************하단 땅부분**************************/
#sequence_no_hill_wrap {position: absolute;}

#hills_div { width: 100%; height: 100%; background-color: #fff;
              position: relative; bottom: 0; left: 0; }

#hills_div > ol { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/*서브 언덕부분*/
.sequence_sub_hill { width: 100%; height: 100%;
        position: absolute; bottom: 0; left: 0;
        background-size: cover; background-repeat: no-repeat; }



/*언덕 아래에 위치*/
.sequence_sub_hill01 { margin-bottom: 0; z-index: 5; bottom: -200%;  }
.sequence_sub_hill02 { margin-bottom: 35%; z-index: 4; bottom: -200%; }
.sequence_sub_hill03 { margin-bottom: 45%; z-index: 3; bottom: -200%; }

/*언덕 원래 자리에 위치*/
.sequence_sub_hill01 { margin-bottom: 0; z-index: 5; bottom: 0%;  }
.sequence_sub_hill02 { margin-bottom: 35%; z-index: 4; bottom: 0%; }
.sequence_sub_hill03 { margin-bottom: 45%; z-index: 3; bottom: 0%; }

/********************************로그인 영역************************************/
#bottom_div { position:relative; width: 90%; height: 40%; text-align: center; margin: 0 auto; z-index: 9; }

#login_wrap { width: 100%; height: 100%; margin-top: 100px; text-align: center; opacity: 0; }
#login_wrap.on {
    -webkit-animation: login_wrap_ani .5s linear forwards;
    -moz-animation: login_wrap_ani .5s linear forwards;
    -o-animation: login_wrap_ani .5s linear forwards;
    animation: login_wrap_ani .5s linear forwards;
}
#login_text_img { width: 80%; }
#login_text_wrap { color: #DCCEBA; font-weight: bold; text-align: center; margin-bottom: 15px; font-size: 110%; }
#login_text_wrap strong { color: #FF1A00; font-size:75%; }
#login_input { position: relative; width: 90%; height: 45px; margin-bottom: 10px;
                color: #fff; background-color: #5A0019; border: none; font-size: 1.5em; text-align: center; letter-spacing: 2px; }
#login_button { position: relative; width: 90%; height: 45px; margin: 0 auto;
                background-color: #EE1F08; color: #000; margin-bottom: 0; cursor: pointer; line-height: 45px; }



/******************************************태블릿 모드*******************************************/
@media screen and (min-width: 600px) {
   /*가운데 원 그림 부분*/
   #circle_pic { /*transform:scale(1.5);*/
                 width: 480px; height: 480px;
                 top: 40%; margin-left: -240px; }

   /*로그인 부분*/
   #login { transform: scale(1.7); }
}
/************************************************************************************************/