* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

/*------- menu bar ------*/
.menu {
    padding: 10px 0;
    background-image: linear-gradient(#020C0B, #015e65, #01eaf9);
}

.topMenu {
    display: flex;
    justify-content: end;
}

.topMenu ul li {
    display: inline-block;
    margin: 4px 10px 0;
}

.topMenu ul li a {
    text-decoration: none !important;
    color: white;
    font-size: 15px;
    font-weight: 500;
}

.logoBox {
    margin: 10px 0;
}

.logo {
    width: 350px;
    height: 80px;
}

.bannerBox {
    margin: 10px 0;
    padding: 10px 0px !important;
    background-color: white;
}

.menuList ul {
    height: 30px;
}

.menuList ul li {
    display: inline-block;
    list-style-type: none;
    margin: 4px 10px;
}

.menuList ul li a {
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 500;
    color: #dc3545 !important;
}

.menuList ul li a:hover {
    color: #af0e0e !important;
}


.dropdown,
.dropdown2 {
    margin-top: 40px;
    position: relative;
    display: none;
}

.HoverList:hover .dropdown {
    display: block;
}

.HoverList2:hover .dropdown2 {
    display: block;
}

.dropdown ul {
    position: absolute;
    bottom: -245px;
    left: 0;
    background-color: #003c60;
    width: 200px;
    height: 280px !important;
    padding: 10px 0;
    z-index: 11;
}

.dropdown2 ul {
    position: absolute;
    bottom: -185px;
    left: 120px;
    background-color: #fff;
    width: 200px;
    height: 310px !important;
    padding: 10px 0;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.05);
    z-index: 11;
}

.dropdown ul li {
    display: block !important;
    text-align: start;
    margin: 10px 10px !important;
}

.dropdown ul li a {
    font-size: 14px !important;
    font-weight: 600;
    color: white !important;
}

.dropdown2 ul li a {
    font-size: 14px !important;
    font-weight: 600;
    color: #003c60 !important;
}

.dropdown ul li a:hover {
    color: #003c60 !important;
}

.dropdown2 ul li a:hover {
    color: #fff !important;
}

.slider {
    width: 600px;
    height: 400px;
}

.bannerLeft {
    margin: 5px 0;
}

.owl-carousel img {
    height: 50vh;
}

.owl-dots {
    display: none;
}

.bannerRight {
    margin: 1px 0;
}

.bannerRightBox {
    display: flex;
    background-color: #eeeeee;
    width: 300px;
    padding: 8px;
    border: 0.7px solid rgba(0, 0, 0, 0.09);
}

.bannerRightBox img {
    width: 100px;
    height: 70px;
}

.bannerRightBox p {
    padding-left: 16px;
    padding-top: 4px;
}

.bannerRightBox a {
    color: #003c60 !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
}

.bannerRightBox a:hover {
    text-decoration: underline !important;
}

/*------- /menu bar ------*/

/*------- feature ---------*/
.feature {
    padding: 30px 0;
}

.featureBox {
    margin: 10px 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.featureBox img {
    width: 100%;
    height: 25vh;
}

.info {
    position: absolute;
    left: 0;
    bottom: 0;
    max-height: 30px;
    transition-duration: 0.6s;
    width: 100%;
}

.featureBox:hover .info {
    max-height: 200px;
    transition-duration: 0.6s;
}

.info h6 {
    background-color: #003c60;
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 5px;
}

.info p {
    color: white;
    padding-left: 4px;
}

.marqueBox {
    background-color: #003c60;
    color: white;
    padding: 2px;
}

/*------- /feature ---------*/

/*------ notice & others -------*/
.notice {
    padding: 30px 0;
}

.noticeBox {
    margin: 10px 0;
}

.noticeBox h2 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 7px;
    border-bottom: 1px solid white;
    color: #003c60;
}

.notice_info {
    display: flex;
    margin: 15px 0;
}

.notice_info img {
    width: 80px;
    height: auto;
    padding: 2px;
}

.notice_info h6 {
    font-size: 14px;
    font-weight: 600;
    padding-left: 5px;
}

.notice_info p {
    font-size: 14px;
    font-weight: 500;
    padding-left: 5px;
    margin-bottom: -1px;
}

.notice_info p span {
    font-size: 14px;
    font-weight: 600;
}

.notice_info p a {
    font-size: 14px;
    color: #003c60 !important;
}

.noticeBox h3 {
    font-size: 16px;
    font-weight: 700;
    color: #003c60;
    margin-bottom: 10px;
}

.noticeBox select {
    width: 200px;
}

.noticeBox select option {
    font-size: 12px;
    margin: 6px 0;
    text-transform: uppercase;
}

.stuVerificationBox {
    margin: 10px 0;
    border: 0.5px solid white
}

.stuVerificationBox a {
    padding: 5px;
    color: #02770b !important;
    font-size: 25px;
    font-weight: 700;
    text-decoration: none !important;
    display: block;
    margin: 2px 0;
}

.stuVerificationBox img {
    width: 100%;
    height: 70px;
}

.stu2 {
    height: 60px !important;
}

.stu3,
.stu4 {
    height: 40px !important;
}

/*------ /notice & others -------*/

/*----- footer -------*/
.footer {
    padding: 30px 0;
    background-color: black;
}

.footer h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
}

.footer p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 50px;
    color: white;
}

.footerBox {
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
}

.footerBox i {
    font-size: 30px;
    color: white !important;
}

.footerInfo {
    padding-left: 15px;
}

.footerInfo h5 {
    font-size: 19px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
}

.footerInfo p {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0;
}

.footer hr {
    background-color: white;
    margin: 10px 0;
}

.royel a {
    color: white;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    margin: 10px 0;
}

/*----- /footer -------*/

/*---- responsive for 340px ----*/
@media(max-width:340px) {
    .topMenu {
        display: none;
    }

    .logo {
        width: 305px;
        height: 80px;
    }

    .logoBox {
        margin: 20px 0 !important;
    }

    .menuList ul {
        margin-left: -20px !important;
    }

    .menuList ul li {
        margin: 4px 1px;
    }

    .menuList ul li a {
        font-size: 9px;
    }

    .bannerRightBox {
        width: 296px;
    }

    .footer h1 {
        font-size: 30px;
    }

    .footer p {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .footer p {
        margin-bottom: 11px;
    }

    .regBox form label {
        width: 100px;
    }

    .regBox form input,
    .regBox form select {
        width: 181px;
    }

    .ginp {
        width: 31px !important;
        height: 16px !important;
    }

    .glabel {
        width: 80px !important;
    }
}

/*---- /responsive for 340px ----*/

/*---- responsive for 600px ----*/
@media (min-width:341px) and (max-width:600px) {
    .topMenu {
        display: none;
    }

    .logoBox {
        margin: 18px 10px !important;
    }

    .logo {
        width: 305px;
        height: 80px;
    }

    .menuList ul {
        margin-left: -25px !important;
    }

    .menuList ul li {
        margin: 4px 1px;
    }

    .menuList ul li a {
        font-size: 12px;
    }

    .bannerRightBox {
        width: 300px;
        margin-left: 10px;
    }

    .footer h1 {
        font-size: 30px;
    }

    .footer p {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .footer p {
        margin-bottom: 11px;
    }


    .regBox form label {
        width: 100px;
    }

    .regBox form input,
    .regBox form select {
        width: 181px;
    }

    .ginp {
        width: 31px !important;
        height: 16px !important;
    }

    .glabel {
        width: 80px !important;
    }
}

/*---- /responsive for 600px ----*/




/*---- responsive for 768px ----*/
@media (min-width:601px) and (max-width:767px) {
    .topMenu {
        display: none;
    }

    .logoBox {
        margin: 20px 0 !important;
    }

    .menuList ul {
        margin-left: -25px !important;
    }

    .menuList ul li {
        margin: 4px 1px;
    }

    .menuList ul li a {
        font-size: 14px;
    }

    .bannerRightBox {
        width: 455px;
    }

    .footer h1 {
        font-size: 30px;
    }

    .footer p {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .footer p {
        margin-bottom: 11px;
    }
}

/*---- /responsive for 768px ----*/

/*----- responsive for 992px   ----------*/
@media (min-width:768px) and (max-width:991px) {

    .menuList ul li {
        margin: 4px 6px;
    }

    .menuList ul li a {
        font-size: 14px;
    }

    .bannerRightBox {
        width: 170px;
    }

    .bannerRightBox img {
        width: 80px;
        height: 72px;
    }

    .bannerRightBox a {
        font-size: 10px;
    }

    .footerInfo p {
        font-size: 13px;
    }

    .footerBox {
        flex-wrap: nowrap;
    }

}

/*----- /responsive for 992px   ----------*/

/*----- responsive for 1420px ----*/
@media (min-width:992px) and (max-width:1420px) {
    .bannerRightBox {
        width: 230px;
    }
}

/*----- /responsive for 1420px ----*/

.stuBanner {
    margin: 10px 0;
}

.stuBanner img {
    width: 100%;
}

.stuInformation {
    margin: 10px 0;
    padding: 30px 10px !important;
    border: 1px solid white;
}

.stuInformation h1 {
    margin: 10px 0;
    padding: 20px;
    border: 1px solid white;
    font-size: 26px;
    font-weight: 700;
    color: white;

}

.verifyBox {
    margin: 20px 0;
}

.verifyBox input {
    padding: 2px 4px !important;
    box-shadow: none !important;
    outline: none !important;
}

.studentResult {
    margin: 10px 0;
    background-color: #003c60;
    padding: 10px 20px;
}

.studentResult h2 {
    font-size: 30px;
    font-weight: 700;
    background-color: orange;
    padding: 2px 4px;
    color: white;
}

.studentResult h2 span {
    font-size: 20px !important;
    padding: 2px 15px !important;
    border-radius: 30px;
    border: 2px solid black;
    font-weight: 700;
}

.studentResult img {
    width: 230px;
    margin: 10px 0;
}

.studentResult p {
    font-size: 22px;
    font-weight: 600;
    color: white;
    border-bottom: 1px dotted white;
}

.labelName {
    width: 260px;
    display: inline-block;
}

/*======== registration page ==========*/
.regHero {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(#020C0B, #015e65, #01eaf9);
    min-height: 100vh;
    width: 100%;
}

.regBox {
    padding: 20px;
    background-color: white;
    border-radius: 4px;
}

.regBox h4 {
    text-align: center;
    font-size: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid #003c60;
    font-weight: 700;
    margin-bottom: 30px;
}

.regBox form label {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    display: inline-block;
    margin: 10px 0;
}


.regBox form input,
.regBox form select {
    width: 200px;
    height: 30px;
    outline: none !important;
    box-shadow: none;
    margin: 8px 0;
    padding: 2px 4px;
}

.ginp {
    width: 40px !important;
    height: 20px !important;
}

.subbtn {
    padding: 10px 20px;
    background-color: #003c60;
    color: white;
    outline: none !important;
    border: none !important;
    cursor: pointer;
    height: 40px !important;
}