@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium.otf');
    font-weight: 500;
	font-style: normal;
}
body{
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    max-width: 500px;
    margin: auto;
}
.logo{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    width: 110px;
}
.entry{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    max-width: 100%;
    height: 100%;
    background-image: url('img/bg-house.png');
    background-size: 100%;
    background-position: center center;
    z-index: 2;
    opacity: 1;
    /* animation: entry 1s 1.2s linear forwards; */
}
.door_l{
    position: absolute;
    left: 0;
    top: 0;
    width: 50vw;
    max-width: 250px;
    height: 100%;
    box-sizing: border-box;
    /* animation: open_l .7s .5s linear forwards; */
}
.door_r{
    position: absolute;
    right: 0;
    top: 0;
    width: 50vw;
    max-width: 250px;
    height: 100%;
    box-sizing: border-box;
    /* animation: open_r .7s .5s linear forwards; */
}
.door_l_bg{
    height: 100%;
    width: 100%;
    background-image: url('img/door-left.png');
    background-size: cover;
    background-position: right;
    position: absolute;
    top: 0;
    left: 0;
    animation: doorbgl .7s .5s linear forwards;
    z-index: 2;
}
.door_r_bg{
    height: 100%;
    width: 100%;
    background-image: url('img/door-right.png');
    background-size: cover;
    background-position: left;
    position: absolute;
    top: 0;
    right: 0;
    animation: doorbgl .7s .5s linear forwards;
    z-index: 2;
}
.door img{
    position: relative;
    z-index: 2;
}
.blur{
    height: 100%;
    width: 100%;
    background-size: cover;
    /* -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px); */
    position: absolute;
    top: 0;
}
.door_l .blur{
    background-image: url('img/blur.jpg');
    animation: doorbgl .7s .5s linear forwards;
    left: 0;
}
.door_r .blur{
    background-image: url('img/blur.jpg');
    animation: doorbgl .7s .5s linear forwards;
    background-position: right;
    right: 0;
}
@keyframes open_l {
    0%{left: 0;}
    100%{left: -50vw;}
}
@keyframes open_r {
    0%{right: 0;}
    100%{right: -50vw;}
}
@keyframes entry {
    0%{background-size: 100%; opacity: 1;}
    50%{background-size: 110%; opacity: 1;}
    70%{background-size: 110%; opacity: 1;}
    100%{background-size: 110%; opacity: 0}
}
@keyframes doorbgl {
    0%{width: 100%;}
    100%{width: 0%;}
}
.entry_title{
    /* width: 100vw; */
    height: 648px;
    position: absolute;
    top: 0;bottom: 0;left: 0;right: 0;
    margin: auto;
    background-image: url('img/light.png');
    background-size: cover;
    background-position: center center;
    color: #eb5a16;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 32px;
    opacity: 0;
    animation: title_bg .3s 1.5s linear forwards;
}
.entry_title span{
    opacity: 0;
    position: relative;
    top: -50px;
    animation: title_span .4s 1.5s linear forwards;
}
.entry_title h1{
    margin: 0;
    margin-top: 5px;
    font-size: 40px;
    font-weight: 900;
    opacity: 0;
    position: relative;
    top: -70px;
    animation: title_h1 .4s 1.5s linear forwards;
}
@keyframes title_bg{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes title_span{
    0%{opacity: 0; top: -50;}
    100%{opacity: 1; top: 0;}
}
@keyframes title_h1{
    0%{opacity: 0; top: -70;}
    100%{opacity: 1; top: 0;}
}
.wrapper{
    width: 500px;
    max-width: 100vw;
    overflow: hidden;
    position: relative;
}
#animation_container{    
    width: 100% !important;
}
.btn_area{
    position: absolute;
    width: 91vw;
    bottom: 4vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: auto;
}
.btn{
    width: 28vw;
    height: 38vw;
    border-radius: 5vw;
    position: relative;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: .3s;
}
.btn::before{
    content: '';
    position: absolute;
    width: 39px;
    height: 17px;
    background-image: url('img/ic-down.svg');
    left: 0;
    right: 0;
    margin: auto;
    top: -40px;
    animation: arrow_down 1.0s infinite;
}
@keyframes arrow_down{
    0%{top: -45px;}
    50%{top: -35px;}
    100%{top: -45px;}
}
.btn1{
    background-image: linear-gradient(149deg, #eb5a16 7%, #ff6821 98%);
}
.btn2{
    background-image: linear-gradient(149deg, #218fc8 7%, #29abdb 98%);
}
.btn3{
    background-image: linear-gradient(149deg, #e53926 7%, #ff506b 98%);
}
.btn.shine{
    box-shadow: 0 0 5px 0 #fff;
    animation: btnshine .8s linear infinite;
}
.btn.op{
    opacity: 0.3;
}
.btn_area.hidetri .btn::before{
    display: none;
}
.btn_area.hidetri{
    pointer-events: none
}
@keyframes btnshine{
    0%{box-shadow: 0 0 8px 1px #fff;}
    50%{box-shadow: 0 0 8px 4px #fff;}
    100%{box-shadow: 0 0 8px 1px #fff;}
}
.btn img{
    margin-bottom: 20px;
}
.question{
    text-align: center;
    color: #960000;
    font-size: 5.6vw;
    font-weight: bold;
    position: absolute;
    width: 100%;
    top: 8vw;
}
.Q{
    font-size: 17.5vw;
    color: #fff;
    opacity: 0.3;
    font-family: Gotham;
    font-weight: 500;
}
.choose{
    font-size: 4.2vw;
    margin-top: 10px;
    font-weight: normal;
}
.cong{
    text-align: center;
    color: #fa4d1b;
    font-size: 7.9vw;
    font-weight: bold;
    position: absolute;
    width: 100%;
    top: 12vw;
    display: none;
}

.final_page{
    display: none;
}
.final_title{
    position: absolute;
    width: 73vw;
    margin: auto;
    left: 11vw;
    right: 0;
    top: 3vw;
}
.final_btn{
    width: 82vw;
    height: 18vw;
    border-radius: 9vw;
    border: solid 1px #ffb789;
    background-image: linear-gradient(149deg, #fa4d1b 29%, #fa821b 117%);
    position: absolute;
    bottom: 5vw;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apply{
    width: 39vw;
    display: none;
}
.share{
    width: 34.5vw;
    display: none;
}

.swal2-popup{
    border-radius: 15px !important;
}
.swal2-html-container{
    color: #333 !important;
}
.swal2-confirm{
    width: 120px;
    height: 45px;
    border-radius: 28px !important;
}