@import 'https://fonts.googleapis.com/css?family=Titillium+Web';
    @import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
        body {
        margin: 0;
        font-family: 'Titillium Web', 'Noto Sans Korean', sans-serif;
        overflow-x: hidden;
        background-color: black;
            }
        #header {
            position: fixed;
            width: 100%;
            z-index: 10;
            height: 150;
            transition: 0.3s;
            color: #00B4F0;
        }
        #footer {
            background-color: black;
            color: white;
            position: fixed;
            bottom: -200px;
            height: 230px;
            width : 100%;
            padding: 10px;
            transition: 0.8s;
            z-index: 12;
            box-shadow: 0 0px 90px 90px black;
        }
        #footer2 {
            background-color: black;
            color: white;
            position: fixed;
            bottom: -164px;
            height: 195px;
            width : 100%;
            padding: 10px;
            transition: 0.8s;
            z-index: 12;
            box-shadow: 0 0px 30px 30px black;
            cursor: pointer;
        }
        #por_a {
            position: relative;
            top: 20%;
            width: 100%;
            z-index: 1;
            transition: 0.5s;
            max-width: 1250px;
            margin: 0 auto;
        }
        #dark {
            position: fixed;
            width: 100%;
            height: 105%;
            background-color: black;
            top: -5%;
            left: 0;
            opacity: 0;
            transition: 0.4s;
        }
        
        div.els {
            position: absolute;
            display: inline-block;
            margin: 5px;
            transition: 0.3s;
            z-index: 1;
            width: 33%;
            cursor: pointer;
            opacity: 0;
        }
        .el_img {
            transition: 0.3s;
            width: 100%;
            border-radius: 5px;
        }
        #white {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 0;
            background-color: "rgba(255,255,255,0)";
        }
        #logo {
            transition: 0.3s;
            width: 100%;
            cursor: pointer;
            z-index: 2;
        }
        #head1 {
            position: absolute;
            transition: 0.3s;
            top: 50px;
            width: 100%;
            font-size: 18px;
        }
        #head2 {
            position: absolute;
            top: 80px;
            transition: 0.3s;
            width: 100%;
            font-size: 18px;
            cursor:pointer;
        }
        #head2:hover {
            transform:scale(0.9);
        }

#home_p {
    position: fixed;
    top:-100%;
    left: 0;
    width:100%;
    height:100%;
    overflow-y: scroll;
    text-align: center;
    background-color: rgba(0,0,0,0.75);
    cursor: pointer;
    z-index: 9999999999;
    transition: 0.5s;
}

@media only screen and (min-width:800px) {
#home_p > img {
    width:80%;
    max-width: 1200px;
}
    }
@media only screen and (max-width:799px) {
#home_p > img {
    width:100%;
}
}
.home_pr_mob {
    position: absolute;
    background-color: #00B4F0;
    padding:2px 5px 3px;
    text-align: center;
    color:black;
    font-weight: bold;
    bottom: 0;
    right: 0;
}

        #por_b {
            position: fixed;
            left: 100%;
            width: 100%;
            height: 100%;
            transition: 0.5s;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -moz-overflow-scrolling: touch;
            overflow-scrolling: touch;
            z-index: 1;
        }
        #po_iframe {
            width: 100%;
            height: inherit;
        }
        #exit {
            transition: 0.5s;
            cursor: pointer;
            position:fixed;
            right:-120px;
            bottom:60px;
            font-size:44px;
            line-height:52px;
            color:#00B4F0;
            width:60px;
            height:60px;
            border-radius:100%;
            background-color:white;
            box-shadow:5px 5px 10px rgba(0,0,0,0.5);
            text-align:center;
            z-index:101;
            border:4px solid #00b4f0;
            box-sizing: border-box;
        }
#exit:hover {
    background-color: rgba(255,255,255,0.85);
    font-size:24px;
    transform: scale(1.5);
    border-width: 2px;
}
        #about_anim {
            transition: 1s;
        }
        #about_anim2 {
            transition: 1s;
        }
        div.foot_el {
            color:#00B4F0;
            margin:10px;
            border-left:1px #00B4F0 solid;
            font-size:12px;
        }
        div.foot_el2 {
            position: relative;
            height: 100px;
            color:#00B4F0;
            margin:10px;
            border-left:1px #00B4F0 solid;
            margin-bottom: 200px;
            font-size:12px;
        }
        div.foot_mob {
            color:#00B4F0;
            margin:10px; 
            border-left:1px #00B4F0 solid;
            width: 90%;
            margin-top: 20px;
            padding-left: 10px;
            font-size: 14px;
            position: relative;
        }
        img.face {
            position: absolute;
            left: 100%;
            bottom: 0!important;
            opacity: 1;
            transition: 0.5s;
            transform: translateY(150px);
        }   
        div.elText {
            position: absolute;
            background-color: rgba(0,0,0,0.8);
            top:0;
            left: 0;
            bottom: 5;
            width: 100%;
            height: 105%;
            text-align: center;
            color: white;
            font-size: 12px;
            z-index: 2;
            opacity: 0;
            transition: 0.3s;
            cursor: pointer;
        }
.elText > p {
    max-width: 300px;
    width:50%;
    min-width: 120px;
    font-size:15px;
    color:#00B4F0;
    font-weight: 600;
    text-align: center;
    padding:5px 8px 6px;
    margin: 50px auto auto;
    border:1px solid #00B4F0;
}
        div.elText:hover {
        opacity: 1;
            cursor: pointer;
                    }
        
        
        
        @media screen and (max-width : 1590px) {
            div.foot_el2 {
                display:none!important;
            }
            div.foot_el {
                float: left!important;
            }
        }
        
        @media screen and (max-width : 800px) {
            .els {
                width: 47%!important;
            }
            #footer {
                display: none!important;
            }
            #footer2 {
                display: inline-block!important;
            }
            #por_a {

            }
            #about_anim {
                margin-top: -20px!important;
            }
            footer {
                font-size: 12px!important;
            }
            div.about {
                display: none!important;
                font-size: 18px!important;
            }
            #head2 {
                display: none!important;
            }
            img.face {
                width: 50px!important;
            }
            #dark {
                display: none!important;
            }
            #text_a {
                display: inline-block !important;
            }
            .elText {
                font-size: 12px!important;
            }
        }
        
        
        @media screen and (min-width : 801px) {
            .elText {
                font-size: 24px!important;
            }
            .els {
                width:33%!important;
            }
            #footer {
                display: inline-block!important;
            }
            #footer2 {
                display: none!important;
            }
            #dark {
                display: inline-block!important;
            }
            #footer:hover {
            bottom: 0!important;
        }
            /*.el_img:hover {
            /*opacity: 0.8;
            -webkit-filter: blur(2.5px);
            -moz-filter: blur(2.5px);
            filter: blur(2.5px);
            transform: rotateY(-20deg);}*/

        
            #about_anim {
                margin-top: 0px!important;
            }
            footer {
                font-size: 18px!important;
            }
            div.foot_el {
                margin-top: 30px!important;
                float:right!important;
                padding:15px 100px 15px 40px !important;
                margin-bottom: 500px!important;
            }
            div.foot_el2 {
                margin-top: 30px!important;
                float:left!important;
                padding:15px 100px 15px 40px !important;
                max-width:35%!important;
            }
            div.about {
                display: inline-block !important;
                font-size: 18px!important;
            }
            #head2 {
                display: inline-block!important;
            }
            img.face {
                width: 300px!important;
            }
            div#text_a {
                display: none !important;
            }
        }
@keyframes intro_anim {
    0% {transform: translateY(300px);opacity: 0;}
    100% {transform: translateY(0px);opacity: 1;}
}

/*Loading*/
#loading {
    width:120px;
    position:absolute;
    margin:auto;
    top:-60px;
    left:-60px;
    bottom:0;
    right:0;
    animation: loading_anim 2s linear infinite;
}
@keyframes loading_anim {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}