@font-face {
    font-family: 'db_heavent_med';
    src: url('./fonts/db_heavent_med_v3.2-webfont.ttf');
}
@font-face {
    font-family: 'db_heavent_light';
    src: url('./fonts/db_heavent_li_v3.2-webfont.ttf');
}
@font-face {
    font-family: 'db_heavent_regular';
    src: url('./fonts/font/DB\ Wittayu\ X\ Med.ttf');
}


body{
    background-image: url('./img/hell/BG02.jpg');
    background-size: contain;
    /*background: rgba(139,0,0,1);*/
    margin: 0;
}

.div-menu-top{
    position: fixed;
    width: 186px;
    z-index: 1;
    background-color: #e9b70b;
    /*background-color: transparent;*/
    right: -185px;
    transition: 0.5s;
}
.div-menu-top.active
{
    transition: 0.5s;
    right: 0px;
    /*animation-name: fademenu;
    animation-duration: 2s;*/
}

.div-banner{
    /*margin-top: 30px;*/
}

.div-menu-top::after{
    content: url('./img/hell/menu2.png');
    position: absolute;
    top: 0;
    left: -40px;
}


.li-memu-top{
    /*display: inline-flex;*/
    list-style: none;
    width: 100%;
    padding:0;
}
.li-memu-top li{
    /*width: 25%;*/
    text-align: center;
    margin: 0px 0;
    padding: 7px 0;
}
.li-memu-top li a, .li-memu-top li a:hover{
    color: rgba(139,0,0,1);
    font-family: 'db_heavent_regular';
    font-size: 3.5vw;
    text-decoration: none;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

img{
    width: 100%;
}


.li-memu-top li.linehepl
{
    color: #fff;
    background: #4cc764;
    /*background: radial-gradient(circle, rgba(48, 204, 0, 0.914) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%);*/
    border: 6px solid white;
    border-radius: 50px;

}

.li-memu-top li.libuy{
    color: #fff;
    background: rgb(204,17,0);
    background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%);
    border: 6px solid white;
    border-radius: 50px;
    width: 50%;
}


.btn-hell{
    
    background: rgb(204,17,0);
    background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%); 
    color: #fff;
    font-family: 'db_heavent_regular';
    font-size: 6vw;
    border: 6px solid white;
    border-radius: 50px;
    padding: 5px 30px;
    width: 80%;
    margin-bottom: 0px;
    margin-top: 25px;
    box-shadow: 6px 9px 0px 0px #e9b70b;

    /*font-size: 5rem;
    border: 6px solid white;
    border-radius: 50px;
    padding: 10px 30px;
    width: 50%;
    height: 200px;
    margin-bottom: 50px;
    margin-top: 50px;
    box-shadow: 19px 25px 0px 0px #e9b70b;*/
}



.btn-hell:hover{
    color: #e9b70b;
    border-color: #e9b70b;
    box-shadow: 6px 9px 0px 0px #fff;

}

.btn-line, .btn-line:hover{
    cursor: pointer;
    color: #fff;
    background: #06c755;
    box-shadow : unset !important;
    border : 0px;
    font-size: 4vw;
    /*background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%); */
}

.munu-button img{
    width: 80%;
}

.div-contact{
    /*background-color: #931712;
    border: 5px solid #e9b70b;
    padding: 0 30px;*/

    background-color: #6b030f8f;
    border: 4px solid #e9b70b;
    padding: 0px 30px;
    margin: 30px;
    border-radius: 10px;

}

.contact-1{
    width: 100%;
    text-align: center;
    border-bottom: 5px solid #e9b70b;
}

.contact-1 img{
    width: 60%;
    margin: 20px 0;
}

.contact-2-1{
    text-align: center;
    padding-bottom: 40px;
}
.contact-2-1 p{
    font-size: 6vw;
    font-family: 'db_heavent_regular';
    color: #fff;
    margin-top: 0px;
    margin-bottom: 0;
    margin-top: 15px;
}

.contact-2{
    width: 100%;
    margin-top: 20px;
}
.div-footer{
    padding: 50px 10% 10px;
    background-color: #6b020f;
}
.ul-social{
    display: inline-flex;
    list-style: none;
    padding: 0;
}

.ul-social li{
    text-align: center;
}
.ul-social li img{
    width: 65%;
}

.display-content{
    /*padding: 0 20%;*/
    padding: 0 10%;
    margin-top: 45px;
}

.display-content div{
    margin-bottom: 40px;
}

.img-detail{
    background-image: linear-gradient(#0000001c, #3131317a, #0000001c);
}

.slick-track{
    margin: 0;
}

.img-logo{
    display: none;
}

.li-memu-top li:nth-child(3)
{
    /* width: 0 !important; */
}

.contact-1-1 {
    text-align: center;
}
.contact-1-1 img {
    width: 60%;
    margin: 20px 0;
}

.li-memu-top li.linehepl a{
    color: #ffffff !important;
    text-shadow: unset !important;
    padding: 3% 20%;
}

.li-memu-top li.libuy a{
    color: #e9b70b !important;
    text-shadow: unset !important;
    padding: 3% 35%;
}

.copyright{
    color: #fff;
    font-size: 4vw;
    font-family: 'db_heavent_regular';
    margin: 0;
}

.div-copyright{
    background-color: #6b020f;
    padding: 0 0 30px;
}


@media only screen and (min-width: 534px) {
    .div-menu-top{
        width: 226px;
        right: -225px;
    }
    .li-memu-top li.libuy{
        color: #fff;
        background: rgb(204,17,0);
        background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%);
        border: 6px solid white;
        border-radius: 50px;
        width: 50%;
    }
    
}

@media only screen and (min-width: 838px) {
    .div-menu-top{
        width: 300px;
        right: -299px;
    }
    .li-memu-top li.libuy{
        color: #fff;
        background: rgb(204,17,0);
        background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%);
        border: 6px solid white;
        border-radius: 50px;
        width: 50%;
    }
    
}

@media only screen and (min-width: 794px) {

    .btn-hell {
        padding: 10px 30px;
        border-radius: 100px;
    }
    .li-memu-top li.libuy{
        color: #fff;
        background: rgb(204,17,0);
        background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%);
        border: 6px solid white;
        border-radius: 50px;
        width: 50%;
    }


}
@media only screen and (min-width: 1280px) {

    .div-menu-top {
        background-color: transparent;
    }
    .img-logo{
        display: none;
    }
    .div-menu-top{
        position: unset;
        width: 100%;
    }
    .li-memu-top {
        display: inline-flex;
    }
    .li-memu-top li {
        /* width: 20%; */
        /*margin: 0px 0;*/
        /* margin: 0px 0; */
        margin: 0px 2%;
    }
    .li-memu-top li a, .li-memu-top li a:hover {
        font-size: 3vw;
    }

    .div-contact{
        display: flex;
        padding: 15px 0;
    }
    .contact-1{
        width: 35%;
        border-right:5px solid #e9b70b ;
    }
    .contact-2{
        width: 65%;
    }
    .contact-2-1 {
        padding: 20px 30px;
    }

    .img-banner-1 {
        content: url('./img/hell/Set4/web.jpg');
    }

    .img-banner-2 {
        content: url('./img/hell/Set1/web.jpg');
    }

    
    .img-logo{
        position: absolute;
        width: 10%;
        z-index: 1;
        transform: translate(-50%,12%);
    }

    .contact-1 {
        border-bottom: 0 !important;
    }

    .contact-2{
        display: inline-flex;
    }
    .contact-2-1{
        width: 100%;
    }
    .contact-1-1 img {
        width: 100%;
        margin: 20px 0;
    }

    .ul-social li img {
        width: 80%;
    }

    .div-footer {
        padding: 50px 37%;
    }

        
    .copyright{
        font-size: 2vw;
    }

    .li-memu-top li.libuy{
        color: #fff;
        background: rgb(204,17,0);
        background: radial-gradient(circle, rgba(204,17,0,0.9135855025603992) 0%, rgba(139,0,0,1) 72%, rgba(102,0,0,1) 100%);
        border: 6px solid white;
        border-radius: 50px;
        width: 10%;
    }
}