.font45{font-family: 'Kittithada Light 45';}
.fontpro{font-family: 'PSL Kittithada Pro ( )';}
.font55{font-family: 'Kittithada Roman 55';}

*{color: #707070; font-style: normal;}

.form-control::placeholder {color: #aaa; opacity: 1;}
.form-control:-ms-input-placeholder {color: #aaa;}
.form-control::-ms-input-placeholder {color: #aaa;}

body{height: 100vh; background: #fff; position: relative;
   
}

header{height: 12.8%; position: relative;
    background: rgb(146,16,94); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(146,16,94,1) 0%, rgba(229,30,22,1) 60%, rgba(255,35,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(146,16,94,1) 0%,rgba(229,30,22,1) 60%,rgba(255,35,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(146,16,94,1) 0%,rgba(229,30,22,1) 60%,rgba(255,35,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92105e', endColorstr='#ff2300',GradientType=1 ); /* IE6-9 */
}
header > img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 47%;}

section{background: #fff;}

.dataform{width: 100%; padding: 10% 10% 0;}
.dataform > .form-group{margin-bottom: 5%; width: 100%; border: 1px solid #707070; -webkit-border-radius: 30px; border-radius: 30px; padding: 0 3%; overflow: hidden; background-color: #fff; position: relative; position: relative;}
.dataform .form-group > .form-control{font-size: 80px; padding: 0 15px; color: #707070; border: none; outline: none !important; height: 97.5%; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; background: none !important; font-family: 'Kittithada Light 45';}
.dataform .form-group > span{height: 100%; line-height: 140px; font-size: 80px; color: #707070; position: relative; z-index: 99; font-family: 'Kittithada Light 45';}
.dataform .form-group > span.group-name{display: inline-block;}

.appqr{padding: 5% 7.5% 0;}
.appqr > img{width: 100%;}

.btncover{text-align: center; padding: 16% 0 18%;}
.btn{
    width: 53%;  -webkit-border-radius: 30px; border-radius: 30px; color: #fff; font-family: 'Kittithada Light 45'; font-size: 80px; border: none;
    background: rgb(146,16,94); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(146,16,94,1) 0%, rgba(229,30,22,1) 60%, rgba(255,35,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(146,16,94,1) 0%,rgba(229,30,22,1) 60%,rgba(255,35,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(146,16,94,1) 0%,rgba(229,30,22,1) 60%,rgba(255,35,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92105e', endColorstr='#ff2300',GradientType=1 ); /* IE6-9 */
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.btn.sub{background: #fff; color: #707070; border: 1px solid #707070;}

.btn:disabled {
    background: #aaa;
}

footer{height: 4%;
    background: rgb(146,16,94); /* Old browsers */
    background: -moz-linear-gradient(left,  rgba(146,16,94,1) 0%, rgba(229,30,22,1) 60%, rgba(255,35,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(146,16,94,1) 0%,rgba(229,30,22,1) 60%,rgba(255,35,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(146,16,94,1) 0%,rgba(229,30,22,1) 60%,rgba(255,35,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#92105e', endColorstr='#ff2300',GradientType=1 ); /* IE6-9 */}

.trempop{position: fixed; background: rgba(0,0,0,0.4); width: 100%; height: 100%; z-index: 999; top: 0; text-align: center; transition: 0.2s; overflow: auto; }
.pophide{opacity: 0; visibility: hidden;}
.trempop_pop{max-width: 80%; display: inline-block; background: #fff; -webkit-border-radius: 50px; border-radius: 50px; padding: 5%; width: 100%; margin-top: 5%;
    -moz-box-shadow:     0 0 10px rgba(0,0,0,0.3);
    -webkit-box-shadow:  0 0 10px rgba(0,0,0,0.3);
    box-shadow:          0 0 10px rgba(0,0,0,0.3);
}
.trempop_pop h2{font-size: 70px; font-weight: bold;}
.trempop_pop p{font-size: 55px; font-weight: normal; text-align: left; line-height: 1.2; margin-bottom: 10%; font-family: 'Kittithada Light 45';}
.trempop_pop h3{font-size: 35px; font-weight: normal;}
.trempop_pop > ul{padding: 0; padding: 5% 0;}
.trempop_pop li{font-size: 30px; text-align: left; line-height: 1; position: relative; padding-left: 35px; font-family: 'Kittithada Light 45'; list-style: none; margin-bottom: 15px;}
.trempop_pop li.p0{padding-left: 0 !important;}
.trempop_pop li > i{font-style: normal; position: absolute; top: 0; left: 0;}
.trempop .btn{width: 80%;}


.samllpop{position: fixed; background: rgba(0,0,0,0.4); width: 100%; height: 100%; z-index: 999; top: 0; text-align: center; transition: 0.2s;}
.samllpop.popshow{opacity: 1; visibility: visible;}
.samllpop_pop{display: inline-block; background: #fff; -webkit-border-radius: 50px; border-radius: 50px; width: 80%; position: absolute; top: 16%; left: 0; right: 0; margin: auto; padding: 4% 0;
    -moz-box-shadow:     0 0 10px rgba(0,0,0,0.3);
    -webkit-box-shadow:  0 0 10px rgba(0,0,0,0.3);
    box-shadow:          0 0 10px rgba(0,0,0,0.3);
}
.samllpop_pop h2{font-size: 95px; font-weight: normal; line-height: 1; margin-bottom: 1%;}
.samllpop_pop h3{font-size: 80px; font-weight: normal; margin-bottom: 1%;}
.samllpop_pop span{font-size: 55px; font-weight: normal; color: #B8B8B8; display: block;}
.samllpop_pop span > i{font-style: normal;}

.codepop{position: fixed; background: rgba(0,0,0,0.4); width: 100%; height: 100%; z-index: 999; top: 0; text-align: center; transition: 0.2s;}
.codepop.pophide{opacity: 0; visibility: hidden;}
.codepop_pop{display: inline-block; background: #fff; -webkit-border-radius: 50px; border-radius: 50px; width: 80%; position: absolute; top: 16%; left: 0; right: 0; margin: auto; padding: 4% 0;
    -moz-box-shadow:     0 0 10px rgba(0,0,0,0.3);
    -webkit-box-shadow:  0 0 10px rgba(0,0,0,0.3);
    box-shadow:          0 0 10px rgba(0,0,0,0.3);
}
.codepop_pop-inner{width: 65%; text-align: center; display: inline-block;}
.codepop_pop-inner span{font-size: 95px; font-weight: normal; line-height: 1; margin-bottom: 2%; display: block;}
.codepop_pop-inner input[type="text"]{font-size: 80px; color: #707070; display: block; background: #F1F1F1; height: 140px; -webkit-border-radius: 30px; border-radius: 30px; text-align: center; width: 100%; border: none; outline: none !important; padding: 0; margin-bottom: 4%;
    -moz-box-shadow:    inset 0 0 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
    box-shadow:         inset 0 0 5px rgba(0,0,0,0.1);
}
.codepop_pop-inner .errornote{display: none; color: #B20000; font-size: 12px; margin-top: 10px; margin-bottom: 0;}
.codepop_pop-inner button{width: 100% !important; min-width: inherit !important;}
.codepop_pop.errorcode input[type="text"]{border: 1px solid #B20000;}
.codepop_pop.errorcode .errornote{display: block;}
.codepop_pop.errorcode button{margin-top: 10px;}



/* CSS_UPDATE_260563 */
.otpform{padding: 7.1%; text-align: center;}
.otpform_inner{width: 72%; display: inline-block; padding: 0;}
.otpform_inner h2{font-size: 95px; font-family: 'Kittithada Roman 55'; display: block; margin-bottom: 2%;}
.otpform_inner > .form-group{margin: 0;}
.otpform_inner > .form-group > .form-control{padding: 0 !important; text-align: center;}
.otpform_inner > .form-group > .group-name{opacity: 0; visibility: hidden; line-height: 160px;}
.otpform_inner-ref{display: block; text-align: left; color: #707070; margin-bottom: 1%; line-height: 1; font-family: 'Kittithada Light 45'; font-size: 55px;}
.otpform_inner-error{display: block; text-align: center; color: #B20000; line-height: 1; font-family: 'Kittithada Light 45'; font-size: 55px; margin-top: 2%; opacity: 0;}
.otpform_inner .btn{width: 80%; margin-top: 3%;}
.otpform_line{width: 100%; height: 1px; background: #707070; margin: 10% 0 5%;}
.otpform_repeat{text-align: center;}
.otpform_repeat button{background: none; color: #707070; font-size: 85px; padding: 0; font-family: 'Kittithada Roman 55'; border: none; line-height: 1; margin-bottom: 3%;}
.otpform_repeat span{display: block; color: #B8B8B8; font-size: 60px; font-family: 'Kittithada Light 45'; line-height: 1.2;}
.otperror .form-group{border-color: #B20000;}
.otperror .otpform_inner-error{opacity: 1;}

.samllpop_pop .exit{width: 3%; background: none; border: none; background: none; position: absolute; top: 14%; right: 4%;}
/* CSS_UPDATE_260563 */


@media (max-width: 1200px) {
    .dataform > .form-group{-webkit-border-radius: 15px; border-radius: 15px;}
    .dataform .form-group > .form-control{font-size: 60px; padding: 0 15px;}
    .dataform .form-group > span{line-height: 100px; font-size: 60px;}
    .btn{font-size: 60px;  -webkit-border-radius: 15px; border-radius: 15px;}

    .trempop_pop{-webkit-border-radius: 30px; border-radius: 30px;}
    .trempop_pop h2{font-size: 50px;}
    .trempop_pop p{font-size: 40px;}

    .samllpop_pop{-webkit-border-radius: 30px; border-radius: 30px;}
    .samllpop_pop h2{font-size: 80px;}
    .samllpop_pop h3{font-size: 60px;}
    .samllpop_pop span{font-size: 40px;}

    .codepop_pop{-webkit-border-radius: 30px; border-radius: 30px;}
    .codepop_pop-inner{width: 65%;}
    .codepop_pop-inner span{font-size: 80px;}
    .codepop_pop-inner input[type="text"]{font-size: 60px; height: 100px; -webkit-border-radius: 15px; border-radius: 15px;}
    .codepop_pop-inner .errornote{font-size: 12px;}

    /* CSS_UPDATE_260563 */
    .otpform_inner h2{font-size: 85px;}
    .otpform_inner > .form-group > .group-name{line-height: 120px;}
    .otpform_repeat button{font-size: 75px;}
    .otpform_repeat span{font-size: 50px;}
    .otpform_inner-ref{font-size: 45px;}
    .otpform_inner-error{font-size: 45px;}

    /* CSS_UPDATE_260563 */
}


@media (max-width: 800px) {
    .dataform .form-group > .form-control{font-size: 50px; padding: 0 15px;}
    .dataform .form-group > span{line-height: 80px; font-size: 50px;}
    .btn{font-size: 50px;}  

    .trempop_pop{-webkit-border-radius: 20px; border-radius: 20px;}
    .trempop_pop h2{font-size: 30px;}
    .trempop_pop p{font-size: 23px;}

    .samllpop_pop{-webkit-border-radius: 20px; border-radius: 20px;}
    .samllpop_pop h2{font-size: 60px;}
    .samllpop_pop h3{font-size: 40px;}
    .samllpop_pop span{font-size: 30px;}

    .codepop_pop{-webkit-border-radius: 20px; border-radius: 20px;}
    .codepop_pop-inner{width: 65%;}
    .codepop_pop-inner span{font-size: 60px;}
    .codepop_pop-inner input[type="text"]{font-size: 50px; height: 80px; -webkit-border-radius: 15px; border-radius: 15px;}
    .codepop_pop-inner .errornote{font-size: 12px;}

    /* CSS_UPDATE_260563 */
    .otpform_inner h2{font-size: 75px;}
    .otpform_inner > .form-group > .group-name{line-height: 100px;}
    .otpform_repeat button{font-size: 65px;}
    .otpform_repeat span{font-size: 40px;}
    .otpform_inner-ref{font-size: 35px;}
    .otpform_inner-error{font-size: 35px;}
    /* CSS_UPDATE_260563 */
    
}

@media (max-width: 650px) {
    header{height: 11%;}
    .dataform .form-group > .form-control{font-size: 25px; padding: 0 15px;}
    .dataform .form-group > span{line-height: 50px; font-size: 25px;}
    .btncover{padding: 16% 0 15%; position: absolute; width: 100%; left: 0; bottom: 0;}
    .btn{font-size: 25px; }  
    footer{height: 2.5%; position: absolute; width: 100%; left: 0; bottom: 0;}

    .samllpop_pop h2{font-size: 40px;}
    .samllpop_pop h3{font-size: 30px;}
    .samllpop_pop span{font-size: 25px;}

    .codepop_pop{-webkit-border-radius: 20px; border-radius: 20px;}
    .codepop_pop-inner{width: 65%;}
    .codepop_pop-inner span{font-size: 40px;}
    .codepop_pop-inner input[type="text"]{font-size: 25px; height: 50px; -webkit-border-radius: 15px; border-radius: 15px;}
    .codepop_pop-inner .errornote{font-size: 12px;}
    

    /* CSS_UPDATE_260563 */
    .trempop_pop h2{font-size: 28px;}
    .trempop_pop p{font-size: 20px;}

    .otpform_inner h2{font-size: 40px;}
    .otpform_inner > .form-group > .group-name{line-height: 65px;}
    .otpform_repeat button{font-size: 35px;}
    .otpform_repeat span{font-size: 25px;}
    .otpform_inner-ref{font-size: 22px;}
    .otpform_inner-error{font-size: 22px;}
    /* CSS_UPDATE_260563 */


    
}

@media (max-width: 440px) {
    .dataform > .form-group{-webkit-border-radius: 10px; border-radius: 10px;}
    .btn{-webkit-border-radius: 10px; border-radius: 10px;}

    .trempop_pop{-webkit-border-radius: 15px; border-radius: 15px;}

    .samllpop_pop{-webkit-border-radius: 15px; border-radius: 15px;}
    .samllpop_pop h2{font-size: 30px;}
    .samllpop_pop h3{font-size: 25px;}
    .samllpop_pop span{font-size: 18px;}

    .codepop_pop{-webkit-border-radius: 15px; border-radius: 15px;}
    .codepop_pop-inner{width: 65%;}
    .codepop_pop-inner span{font-size: 30px;}
    .codepop_pop-inner input[type="text"]{font-size: 25px; height: 50px; -webkit-border-radius: 10px; border-radius: 10px;}
    .codepop_pop-inner .errornote{font-size: 12px;}

    /* CSS_UPDATE_260563 */
    .trempop_pop h2{font-size: 25px;}
    .trempop_pop p{font-size: 18px;}

    .otpform_inner h2{font-size: 35px;}
    .otpform_inner > .form-group > .group-name{line-height: 60px;}
    .otpform_repeat button{font-size: 30px;}
    .otpform_repeat span{font-size: 22px;}
    .otpform_inner-ref{font-size: 18px;}
    .otpform_inner-error{font-size: 18px;}

    /* CSS_UPDATE_260563 */
}

@media (max-width: 380px) {
    .dataform .form-group > .form-control{font-size: 23px; padding: 0 15px;}
    .dataform .form-group > span{line-height: 45px; font-size: 23px;}
    .btn{font-size: 23px; } 

    

    .codepop_pop-inner{width: 65%;}
    .codepop_pop-inner span{font-size: 26px;}
    .codepop_pop-inner input[type="text"]{font-size: 23px; height: 45px;}
    .codepop_pop-inner .errornote{font-size: 12px;}

    /* CSS_UPDATE_260563 */
    .trempop_pop h2{font-size: 23px;}
    .trempop_pop p{font-size: 16px;}

    .otpform_inner h2{font-size: 30px;}
    .otpform_inner > .form-group > .group-name{line-height: 50px;}
    .otpform_repeat button{font-size: 27px;}
    .otpform_repeat span{font-size: 20px;}

    .otpform_inner-ref{font-size: 16px;}
    .otpform_inner-error{font-size: 16px;}

    /* CSS_UPDATE_260563 */
}


@media (max-width: 350px) {

}