body{
    margin:0;
    padding:0;
    font-family: 'Noto Sans Thai', sans-serif;

  
    background: url(../images/bg-red2.png) no-repeat center;
    background: url(../images/bg-blackcard.jpg) no-repeat center;
    background-size: cover ;
    background-attachment: fixed;
}
header{
    padding: 15px 0 0;
    box-shadow: 0 10px 10px #6e040f;
    box-shadow: 0 10px 30px #000000;

    background: #c1061e;
    background: -moz-linear-gradient(left,  #c1061e 0%, #db0621 7%, #db0621 16%, #c1061e 30%, #b5000c 99%);
    background: -webkit-linear-gradient(left,  #c1061e 0%,#db0621 7%,#db0621 16%,#c1061e 30%,#b5000c 99%); 
    background: linear-gradient(to right,  #c1061e 0%,#db0621 7%,#db0621 16%,#c1061e 30%,#b5000c 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1061e', endColorstr='#b5000c',GradientType=1 ); 

    background: linear-gradient(to right,  #181818 0%,#282828 7%,#2c2c2c 16%,#202020 30%,#000000 99%);

}
.menu-nav a{
    font-weight: 600;
    font-family: 'Noto Sans Thai', sans-serif;
    color:#ffffff !important;
}
h1{
    font-weight: bold;
    font-size:3rem;
    font-family: 'Noto Sans Thai', sans-serif;
    margin-bottom:30px;
    margin-top:30px;
}
.topHeader{
    background: url(../images/top-image.png) no-repeat;
    background-size: 70%;
    background-position: right center;
    min-height: 500px;
    padding: 2rem 0 8rem;
}
.topHeader p{
    font-size:16px;
    font-weight: 300;
    font-family: 'Mitr', sans-serif;
}
.block-cover{
    margin: 0 auto 0;
    clear:both;
    overflow: hidden;
}
.block-item{
    width:16.66%;
    height: 65px;
    padding:0;
    margin:0;
    display:inline;
    float: left;
}
main { /* แก้ให้เมนูอยู่ชิดด้านล่าง */
    /* position: fixed;
    bottom: 0;
    width: 100%; */
}
.block-item a{
    display: block;
    text-align: center;
    background: linear-gradient(to bottom, #db0621 0%,#c1061e  100%); 
    background: linear-gradient(to bottom, #222222 0%,#000000  100%);
    /*background: url(../images/btn-square.png) no-repeat;*/
    background-size: contain;
    background-position: center;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: #e1c22e;
    color: #d2b58a;
    text-shadow:0 0 2px #cb061c;
    text-shadow:0 0 2px #000000;
    height: 65px;
    border-radius:0;
    line-height:14px;
    padding-top:5px;
    margin-bottom: 30px;
    position:relative;
}
.block-item a:hover{
    background: linear-gradient(to bottom, #3e3e3e 0%,#141414 100%);
}
.block-item a span{
    font-weight: 100;
    font-size:10px;
    color:#c2a721;
    color: #d4b88c;
    display: block;
}
.block-item a img{
    display:block;
    margin:0 auto;
    width:25px;
    height:auto;
}
.block-item a:hover{
  
}
.block-item a:before, .block-item a:after{
	content:"";
	position: absolute;
	width: 1px;
	height: 100%;
	top: 0;
	border-radius: 30px;
}	
.block-item a:before{
	right: 0;
	background: #db0621;
    background:#303030;
}
.block-item a:after{
	right: 1px;
	background: #b5000b;
    background:#060606;
}
section{
    padding:3rem 0;
}
h2{
    font-weight: bold;
    font-size:1.6rem;
    font-family: 'Noto Sans Thai', sans-serif;
    margin-bottom: 30px;
}
h4{
    font-weight: bold;
    font-size:2rem;
    font-family: 'Noto Sans Thai', sans-serif;
    margin-bottom: 30px;
}
.btn-three{
    text-align:center;
    max-width:600px;
    margin:0 auto;
    width: 100%;
    display: inline-flex;
}
.btn-three-item{
    display: inline-block;
    margin: 10px 5px;
    background:#222;

    margin: 20px 1% 0;
    width: 31.3%;
    height: 45px;
    line-height: 45px;
    border-radius: 8px;
}
.btn-line{
    background: #43C507;
}
.btn-three-item:last-child{
    background:#da0101;
}
.social-item a, .btn-three-item a{
    color:#222222;
    text-decoration: none;
    font-weight: 600;
    font-size:15px;
    font-family: 'Noto Sans Thai', sans-serif;
}
.btn-three-item a{
    color:#ffffff;
}   
.btn-three-item a img{
    width:20px;
    height: auto;
    vertical-align: sub;
}
.logo img{
    width:auto;
    height:50px;
}
a.logo{
    color:#efd453;
    font-size: 30px;
    font-weight: bold;
}
.btn-black{
    background: #ffffff url(../images/btn-black.png) no-repeat;
    background-size: 100%;
    background-position: center;
    border-radius: 0;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 700;
    max-width: 200px;
    height: 50px;
    padding: 0;
    color: #f1f1f1;
    margin: auto ;
    margin-top:15px;
    background: #2a2a2a;
    border-radius: 3px;
    /* box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%); */
}
.btn-black:hover{
    background: #000000;
    color:#fff;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.btn-red{
    background: #ffffff url(../images/btn-green.png) no-repeat;
    background-size: 100%;
    background-position: center;
    border-radius: 0;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 700;
    padding: 0;
    color: #f1f1f1;
    max-width: 200px;
    height: 50px;
    padding: 0;
    color: #f9f9f9;
    margin:auto;
    margin-top:15px;
    background: #c90100;
    background:#d9b152;
    border-radius: 3px;
    /* box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 3px 10px 0 rgb(0 0 0 / 19%); */
}
.btn-red:hover{
    background: #cd0200;
    background: #b9943e;
    color:#fff;
    box-shadow: 0 8px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.btn-contact{
    background: #fff;
    padding: 0px 30px;
    border-radius: 30px;
    text-shadow: 0 0 3px #9f7928;
    background:url(../images/btn-contact.png) no-repeat;
    background-size: 100%;
    color:#ffffff !important;

    margin-left:15px;
}
.block-card{
    width: 100%;
    max-width: 630px;
    padding: 15px;
    margin: auto;
    padding: 4rem 2rem 3rem;
    background: #ffffff;
    border-radius:8px;
    color: #000000;
    /* background: rgba( 255, 255, 255, 0.25 ); */
    box-shadow: 0 8px 32px 0 rgb(0 0 0 / 37%);
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.block-card .bank-name{
    font-size: 24px;
    margin: 15px 0;
    color: #4e2a81;
}
.block-card .bank-user{
    font-size: 24px;
    margin: 15px 0;
}
.block-card .bank-number{
    font-size: 32px;
    margin: 15px 0;
    letter-spacing: 2px;
    font-weight: bold;
}
.bank-number-none{
    opacity: 0;
    height: 0;
    margin: 0;
}
.copyLink{
    padding: 5px 15px;
    background: #eee;
    border-radius: 30px;
    margin: 0 0 20px 0;
    display: inline-block;
    color: #2e2e2e;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    z-index: 9;
}
.block-card-detail{
    font-weight: 300;
    font-family: 'Mitr', sans-serif;
    color: #222;
}
.block-card-detail strong{
    font-weight: 500;
    color:#da0101;
}
footer{
    color:#ddd;
}

label{
    text-align: left;
    font-weight: bold;
}
.form-control{
    padding:0.7rem;
    border:0 solid #c3c3c3;
    background: rgb(221 202 162 / 18%);
}
.form-group{
    position: relative;
    padding-left: 50px;
    border-radius:0;
    background:#ffffff;
    border-radius:0;
}
.form-group i {
    position: absolute;
    left: 13px;
    top: 11px;
    font-size: 18px;
    width:20px;
    height:20px;
    background-size:18px;
    background-position: center;
    background-repeat: no-repeat;
}
.form-group i.icon-user {
    background-image: url(../images/icon-user.svg);
}
.form-group i.icon-password {
  background-image: url(../images/icon-password.svg);
}
.btn-primary {
    display:block;
    width:100%;
    color: #f1f1f1;
    background: rgb(42 42 42);
    border-color: transparent;
    font-weight: bold;
    border-radius: 0;
    font-family: 'Noto Sans Thai', sans-serif;
    font-weight: 700;
}

/* Sign up */
.wrap-signup .block-card ,.wrap-login .block-card{
    max-width: 430px;
    padding: 3rem 2rem;
    border-radius: 0;
}
.wrap-signup .form-group{
    padding-left: 0;
    border-radius:3px;
}
.wrap-signup input[type="submit"]{
    background: #2196f3;
    border: 1px solid #2196f3;
    color: #fff;
    font-weight: bold;
}

/* Login */
.wrap-login .form-group{
    background: #f7f7f7;
}


.block-black{
    background: #000000;
    color:#ffffff;
    border-radius: 18px;
    border: 1px solid rgb(210 181 137);
}
.block-black .block-item{
    width: 31%;
    margin-bottom: 30px;
    margin-right: 1%;
    margin-left: 1%;
}
.block-black .block-item a{
    margin-bottom: 0;
    font-size: 15px;
    height: 85px;
    padding-top: 10px;
    border-radius: 13px;
    background: linear-gradient(to bottom, #222222 0%,#0e0e0e 100%);
}
.block-black .block-item a:hover{
    background: linear-gradient(to bottom, #0e0e0e 0%,#0e0e0e 100%);
    box-shadow: 0 0 1px #b1b1b1;
}
.block-black .block-item a img{
    width:35px;
}
.block-black .block-item a:before, .block-black .block-item a:after{
    content:none;
}
.block-black .block-item:nth-child(4n) a:before, .block-black .block-item:nth-child(4n) a:after{
    background:transparent;
}

.block-black .block-item:nth-child(7n) a:before, .block-black .block-item:nth-child(7n) a:after{
    background:transparent;
}

footer small{
    font-size:10px;
    color:#8d8d8d;
}


@media screen and (max-width: 991px){
    body{
        background-color: #2a2a2a;
        background-size: 200%;
        background-attachment: unset;
        /* background-position: top left; */
        background-repeat: repeat;
    }
    header{
       background: linear-gradient(to right,  #181818 0%,#282828 40%,#2c2c2c 45%,#202020 60%,#000000 99%)
    }
    .menu-nav{display:none !important;}
    .block-card, .wrap-signup .block-card ,.wrap-login .block-card{width:94%;margin: 0 auto;padding:3rem 15px 2rem;border-radius:8px;}
    .block-cover{width:100%;}
    .topHeader{display: none;}
    section{padding:0;}
    .btn-black, .btn-red{border-radius:0;box-shadow:none;}
}

@media screen and (max-width: 567px){
    .link-to-home a{
        width:30%;
        height: 80px;
        display: inline-block;
        background: url(../images/btn-facebook-mobile-black.png) no-repeat;
        background-size:100%;
    }
    .link-to-home a:nth-child(2){
        background-image: url(../images/btn-home-mobile-black.png)
    }
    .link-to-home a:first-child{
        background-image: url(../images/btn-line-mobile-black.png)
    }
    .link-to-home img{
        display:none;
    }
}