@charset "UTF-8";
:root{
    --main-theme-color:#222;
    --main-theme-text:#EEE;
    --main-header-color:rgba(0,0,0,0.7);
}
:root{
    --main-theme-color:#FFF;
    --main-theme-text:#222;
    --main-theme-text2:#666;
    --main-header-color:rgba(225,225,225,0.5);
    --main-header-color:#FFF;
    --main-theme-highlight:#00c3bd;
}
*{box-sizing:border-box;}

ul,li{
    list-style:none;
    padding:0;
    margin:0;
    font-family:;
}
a{
    text-decoration:none;
    color:inherit;
}
html,body{
    margin:0;
    padding:0;
    /* background:var(--main-theme-color); */
    /* background: #020104; */
    font-family: 'Cardo', serif;
    font-family: 'Cardo','Nanum Myeongjo', serif;
    font-size: 18px;
}

body::before {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/media/bg-p.jpg');
    background-size: cover;
    /*     -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transform: scale(1.02);  */
    filter: sepia(1);
    z-index: -1;
    content: "";
}


.background{
/*     position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:#020104;
    background-image:url('/media/bg-p.jpg');
    background-size:cover;
    filter: sepia(1); */
}
.background>video,
.background>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* html{min-height: 100%;background-color:#020104;background-image:url('/media/bg-p.jpg');background-size:cover;background-position: center;} */
@media (orientation: landscape) {
    .background{
/*         background-image:url('/media/bg-l.jpg'); */
    }
    body::before {
        content: "";
        background:
        radial-gradient(circle, transparent 30%, var(--color-v) 45%),
        linear-gradient(to right, var(--color), var(--color)),
        var(--image2);
        background-position: center center;
/*         background-size: cover; */
        background-blend-mode:
        var(--blend-top, normal),
        var(--blend-bottom, saturation),
        normal;
        --image: url('/media/bg-p.jpg');
        --image2: url('/media/bg-p.jpg');
        --color-v: black;
        --color: grey; //hsla(343,100%,50%,.5);
    }
}

.wrap{
    text-align:center;
    /* padding-top: 25px; */
}
.wrap .contents{
    width: 100%;
    max-width: 600px;
    display:inline-block;
    padding: 20px 20px 50px;
}
.wrap .title{
    color:#EEE;
    animation-name: ani-apear;
    animation-duration: 500ms;
    animation-delay: 100ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease;
}
.card{
    background: rgba(0,0,0,0.7);
    width:100%;
    min-height: 500px;
    position:relative;
    z-index: 10;
    display: inline-block;
    padding:30px;
    border-radius:10px;
    text-align:left;
    animation-name: ani-apear;
    animation-duration: 500ms;
    animation-delay: 600ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    margin-bottom: 15px;
}
.card>p{
    animation-name: ani-apear;
    animation-duration: 1000ms;
    animation-delay: 2000ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    color: #DDD;
    min-height: 24px;
    margin: 0;
    line-height: 28px;
}
@keyframes ani-apear {
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
}
.contents>.button-area{width: 80%;margin: 0 auto;}
.contents button{/*     display:block; */border:0;padding:10px 30px;border-radius:6px;box-shadow:5px 5px 5px 0 rgba(0,0,0,0.5);font-size:18px;font-weight:100;opacity:0;background-color: #131313;border: 1px solid #272424;}
.contents>.button-area.show>button{
    opacity:1;
    animation-name: ani-apear;
    animation-duration: 1000ms;
    animation-delay: 200ms;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    width: 100%;
    margin-bottom: 10px;
    /* background: rgba(100,100,100,0.9); */
    background: rgba(0,0,0,0.5);
    border: 1px solid #555;
    color: #DDD;
}
.contents>.button-area.show>button+button{
    animation-delay: 600ms;
}
.contents>.button-area.show>button+button+button{
    animation-delay: 1000ms;
}
.contents>.button-area.show>button+button+button+button{
    animation-delay: 1400ms;
}