*{
    /*border: 1px solid red;/**/
}
.main{
    width: 100%;
    /* height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;

    
    background-image: url(../images/backbg50.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.topmain{
    width: 100%;
    height: 4rem;
    background: transparent linear-gradient(180deg, #474747 0%, #0E0E0E 100%) 0% 0% no-repeat padding-box; 
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    /*border: 1px solid red;/**/
}
.text-slide {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    /*border: 1px solid red;/**/
}

.text-slide span {
    display: inline-block;
    padding-left: 100%;
    animation: slide-left 12s linear infinite;
    font-size: 1.0rem;
    font-weight: 400;
    color: #8e44ad; /* สีทอง */
    text-shadow:
        -1px -1px 0 rgba(255, 255, 255, 0.685),
         1px -1px 0 rgba(255, 255, 255, 0.685),
        -1px  1px 0 rgba(255, 255, 255, 0.685),
         1px  1px 0 rgba(255, 255, 255, 0.685);
}
@keyframes slide-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-120%); }
}

.headbanner{
    width: 100%;
    height: 2rem;
    /*border: 1px solid red;/**/
    background-color: rgb(61,69,79);
    display: flex;
    align-items: center;
    justify-content: center;
}
.banner{
    width: 85%;
    height: 26.5vw;
    background-color: antiquewhite;
    border-radius: 0.5vh;
    background-image: url(../images/bannernew.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;


}
.bannertext{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffb300;

    font-size: 2.0rem;
    font-weight: 500;
    
    color: #d6af2e; /* สีทอง */
    text-shadow:
        -1px -1px 0 #ffffff,
         1px -1px 0 #ffffff,
        -1px  1px 0 #ffffff,
         1px  1px 0 #ffffff;
         animation: blink 2s infinite;
}
@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

.mainloginbox{
    width: 330px;
    height: 460px;
    background-color: rgb(61,69,79);
    border-radius:1.5vh ;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mainloginboxinner{
    width: 310px;
    height: 440px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 1.2vh;
    border: 1px solid #ffffff;
    border-radius:1.5vh ;
}

.toplogin{
    height: 2.2rem;
    width: 300px;
    /*border: 1px solid white;/**/
    display: flex;
    justify-content: space-around;
    color: aliceblue;
}
.rule{
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
}
.forgotpass{
    width: 45%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: underline;
}
.topmainlogo{
    height: 5rem;
    width: 5rem;
    background-image: url(../images/logow-Photoroom.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.logoweb{
    height: 12rem;
    width: 12rem;
    /*border: 1px solid white;/**/
    color: rgb(124, 12, 12);

    background-image: url(../images/logow-Photoroom.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.registerbox{
    height: 8vh;
    width: 18rem;
    /*border: 1px solid #ffffff;/**/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1vh;
    border-radius: 1.5vh;
    margin-bottom: 2vh;
}
.registerboxtext{
    width: 47%;
    height: 60%;
    background-color: #474747; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb300;
    border-radius: 1.5vh;
    border: 1px solid #ffb300;

}
.loginboxtext{
    width: 47%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: aliceblue;
    border-radius: 1.5vh;
    background:linear-gradient(180deg,#ffd27d,#d19302); /**/
    border: 1px solid #ffb300;

}
.registerboxtext:hover,.loginboxtext:hover{
    transform: scale(1.05);
}

.formloginmain{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.5vh;
    /*border: 1px solid red;/**/
}
.form-label{
    color: whitesmoke;
}

.phonebox{
    /*border: 1px solid red;/**/
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.passbox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* .bg-light{
    background-color: rgb(42, 42, 48);
} */

.form-control{
    height: 2.4rem;
    background-color: rgba(102, 51, 153, 0);
    border-color: #7c7c7c;
    border-radius: 1.2vh;
    width: 18rem;
}

.botleft{
    width: 85%;
    height: 52vh;
    /*border: 1px solid red;/**/
    display: flex;
    gap: 1.5vh;
    flex-wrap: wrap;
}


.resultbox{
    /*width: 390px;   /* iPhone 12–15 */
    margin: 0 auto;
    height: 470px;
    background-color: rgb(61,69,79);
    border-radius:2.0vh ;
    display: flex;
    align-items: center;
    justify-content: center;
    
/*     background-image: url(../images/huay.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; */
    /*border: 1px solid red;/**/
}

/* มือถือ */
@media (max-width: 767px) {
    .resultbox {
      width: 390px;
      max-width: 100%;
    }
  }
  @media (max-height: 767px) {
    .resultbox {
    height: 240px;
    max-height: 100%;
    }
  }


  /* PC / Tablet */
  @media (min-width: 768px) {
    .resultbox {
      width: 410px;
    }
  }

  .l1{

    height: 49vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;

    background-image: url(../images/l1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}
.l2{

    height: 49vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;

    background-image: url(../images/l2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}
.l3{

    height: 49vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vh;

    background-image: url(../images/l2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

}