@font-face {
    font-family: 'OpunMai-Regular';
    src:  url('font/Opun-Mai-Lite-Regular-WebOnly.woff2') format('woff2')
}

@font-face {
    font-family: 'OpunMai-SemiBold';
    src:  url('font/Opun-Mai-Lite-SemiBold-WebOnly.woff2') format('woff2')
}

.f-OpunMai-Regular{
    font-family: OpunMai-Regular;
}

.f-OpunMai-SemiBold{
    font-family: OpunMai-SemiBold;
}

/*THA*/
.f-IBM{
    font-family: IBM Plex Sans Thai;
}

/*THA*/
.f-Kanit{
    font-family: Kanit;
}

/*ENG*/
.f-ReadexPro{
    font-family: Readex Pro;
}

.bg-index{
    background: url('img/backgr_com-01.svg') center top /cover no-repeat;
    /*background-attachment: fixed;*/
}

.bg-navbar{
    background-image: url('img/back_navbar.jpg');
    background-size: cover;
    background-position: left left;
    box-shadow: 0px 5px 10px #2125299c;
}

.bg-whiter{
    background-image: url('img/back_white.jpg');
    background-size: cover;
    background-position: center center;
}

.bg-glass-10015{
    background: rgba(255, 255, 255, 0.332);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255,255,255,0.25);
}

.bg-footter{
    background-image: url('img/backgr_footer.jpg');
    background-size: cover;
    background-position: left left;
    
}

hr {
    margin: 1rem 0;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: 0.25;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////*/

.text-dark-50{
    color: #434343;
}


.bg-index-fixd{
    background: url('img/back_login.png') center /cover no-repeat;
    background-attachment: fixed;
}

.bg-send-elder{
    background: url('img/back_send_elder.png') center /cover no-repeat;
    background-attachment: fixed;
}

.bg-send-student{
    background: url('img/back_send_student.png') center /cover no-repeat;
    background-attachment: fixed;
}

.bg-glass-navbar{
    background-color: rgba(0, 0, 0, 0.24); 
}

.bg-menu{
    background-image: url('img/back_menu.png');
    background-size: cover;
    background-position: right bottom;
}

.bg-eider{
    background: url('img/back_elder.png') center top /cover no-repeat;
    background-attachment: fixed;
}

.bg-eider-area{
    background: url('img/footer6.png') center top /cover no-repeat;
    background-attachment: fixed;
}

.bg-elder-water{
    background-image: url('img/water.png');
    background-size: cover;
    background-position: center top;
}

.bg-student{
    background: url('img/back_student.png') center top /cover no-repeat;
    background-attachment: fixed;
}

.bg-student-dragon{
    background-image: url('img/dragon.png');
    background-size: cover;
    background-position: center top;
}

.bg-student-area{
    background: url('img/footer2.png') center top /cover no-repeat;
    background-attachment: fixed;
}

.bg-student-select{
    background: url('img/back_student_select.png') center top /cover no-repeat;
    background-attachment: fixed;
}

.bg-up-glass{
    background-image: url('img/up_glass.png');
    background-size: cover;
    background-position: center top;
}

.bg-glass{
    background-color: rgba(255, 255, 255, 0.897);
    border-radius: 10px;
    box-shadow: rgba(36, 35, 35, 0.151) 0px 0px 20px 0px;
}

.bg-glass-board{
    background-color: rgba(255, 255, 255, 0.63);
    border-radius: 10px;
    box-shadow: rgba(36, 35, 35, 0.151) 0px 0px 20px 0px;
}

.bg-footter-4{
    background-image: url('img/footer4.png');
    background-size: cover;
    background-position: center bottom ;
    
}

.bg-footter-5{
    background-image: url('img/footer5.png');
    background-size: cover;
    background-position: center bottom ;
    
}

.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.bg-header{
    background: url('img/back_header.svg') center /cover no-repeat;
    
}



.img-center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}



.card-login{
    border-radius: 8px;
    background: rgba(242, 248, 255, 0.712);
    margin: 0px;
    color: rgb(255, 255, 255);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
}


.text-glow {
    text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(9, 12, 19);
  }