*{
    margin: 0%;
    padding: 0%;
}

.logo{
    height: 90%;
    margin-top: 0.2%;
}

.main{
    background: linear-gradient(to bottom, #db6f1a 0%, rgb(15 202 8 / 44%) 100%);
    max-width: 100%;
    max-height: 100%;
}

.loader {
    text-align: center;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgb(45, 248, 123);
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader > img {
    width: 400px;
}

.loader.hidden {
    animation: fadeOut 4s;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    100% {
        opacity: 0;
        visibility: hidden;
    }
}


.container {
    background-color: rgb(68 255 139);
    display: inline-flex;
    height: 7vw;
    width: 100%;
}



.heading_top{
    display: inline-block;
    width: 40%;
}

.af{
    font-size: 1.3vw;
    font-family: sans-serif;
}


.H{
    color: #00086c;
    font-family: serif;
    font-size: 4vw;
    margin: auto;
    display: contents;
}

ul{
    float: left;
    margin-top: 1%;
    margin-inline-end: 3%;
    margin-inline-start: 6%;
    width: 43%;
}

ul li{
    display: inline-block;
    margin: 7% auto;
}

ul li a{
    color: black;
    border: 2px solid black;
    padding: 8% 1.5vw;
    transition: 1s ease;
    text-decoration: none;
    font-size: 1.2vw;
    font-weight: bold;
    background-color: hsl(71deg 82% 75% / 96%);
}

ul li a:hover{
    background-color: black;
    color: white;
}


.school{
    width: 20px;
    height: 20px;
}



.c_c1{
    color: #00ff14;
    border: solid 10px;
    border-style: double;
    font-weight: bold;
    margin: auto;
    width: 90%;
    height: 50%;
    text-align: center;
    background-color: #0000006b;

}

.notice_q{
    text-align: -webkit-center;
    width: 45%;
    height: 100%;
}

.board{
    border: 0.3vw solid black;
    text-align: -webkit-center;
    width: 91.5%;
    height: 45%;
}

.n_content{
    color: white;
    border: 0.3vw solid black;
    width: 98%;
    height: 88%;
    background: linear-gradient(to bottom, rgb(15 202 8 / 44%) 0%, #db6f1a 100%);
    font-size: 1vw;
    font-weight: bold;
    overflow: auto;
}

.cond2{
    padding: 1%;
    color: white;
    background-color: rgba(0, 0, 0, 0.800);
    width: 98%;
    height: 70%;
    display: inline-flex;
}

.con2_1{
    width: 60%;
}

.pri{
    font-size: 1.5vw;
    color: white;
}

.pri_p{
    position: absolute;
    width: 8vw;
    height: auto;
}

.p_name{
    margin: 2% 14%;
}

.p_thought {
    margin: -2% 14%;
    font-size: 113%;
    font-family: sans-serif;
}

.con2_2{
    width: 40%;
}

.conm1 {
    width: 100%;
    height: 45vw;
    display: inline-flex;
}


.apb{
    border: 1px solid black;
    color: white;
    background-color: black;
    text-decoration: none;
    padding: 1%;
}

a:hover{
    color: black;
    background-color: white;
    transition: 1s ease;
}

.slide_c{
    background-color: white;
    width: 55%;
    height: 45vw;
}

.slide{
    display: none;
}

.s1, .s2, .s3, .s4, .s5, .s6, .s7{
    height: 44.3vw;
    width: 98.4%;
    border: solid black 6px;
}

.ani{
    animation:fading 5s infinite
}

@keyframes fading{0%{opacity:0.5}50%{opacity:1}100%{opacity:1}}

.para_about, .para_mission, .para_vision{
    font-family: sans-serif;
    display: inline-block;
    color: white;
    background-color: #00000080;
    font-size: 112%;
    border: solid black 10px;
    border-style: double;
    margin: 1% 1%;
    padding: 1%;
    width: 94.5%;
    height: auto;
}

.main_about{
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #db6f1a 0%, rgb(15 202 8 / 44%) 100%);
}

.about_d{
    display: inline-flex;
    background-color: #00000080;
}

.about_d1, .about_d2{
    width: 50%;
    font-family: sans-serif;
    font-size: 50%;
    display: inline-flex;
}

.dir, .sec{
    position: inherit;
    width: 7vw;
    height: 9vw;
    margin-top: 2%;
}

.dir_m, .sec_m{
    font-family: sans-serif;
    margin-inline: 2%;
    margin-top: 2%;
    margin-bottom: 7%;
    font-size: 200%;
    color: whitesmoke;
}

.row{
    display: inline-flex;
}

.c{
    width: 23%;
    float: left;
    padding: 1%;
}

.c img{
    width: 100%;
    opacity: 0.9;
    cursor: pointer;
    height: 22vw;
}

.c img:hover{
    border: 1px solid black;
    opacity: 1;
}

.expand{
    text-align: center;
    margin: auto;
    z-index: 1;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.842);
    display: none;
    top: 0%;
    left: 0%;
}

.closebtn {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
  }

.pic{
    width: auto;
    height: 80%;
    margin-top: 5%;

}

.main_event{
    width: 100%;
    background: linear-gradient(to bottom, #db6f1a 0%, rgb(15 202 8 / 44%) 100%);
}

.quote{
    margin-top: 3%;
    font-size: 2.4vw;
    width: 100%;
    height: 100%;
}

.main_staff{
    background-color: #d2f9f9;
}


table, th, td {
    border-collapse: collapse;
}


th, td {
    padding: 5px;
    text-align: left;    
}

.main_apply{
    min-width: 250px;
    width: 100%;
    height: 100%;
}

.form{
    text-align: -webkit-center;
    background: linear-gradient(to bottom, #db6f1a 0%, rgb(15 202 8 / 44%) 100%);
}


.t {
    
    width: 60%;
    border: 8px solid black;
    border-style: dashed;
}

.t_da{
    text-align: inherit;
    margin-block-end: 1%;
    font-weight: bold;
    padding: 1.2%;
}

input{
    width: 90%;
    font-size: 1.18vw;
    border: solid black 2px;
    border-radius: 5px;
}

select{
    font-size: 1.18vw;
    border: 2px solid;
    border-radius: 5px
}

textarea{
    font-size: 1.18vw;
    border: 2px solid;
    border-radius: 5px
}

.btn {
    margin-bottom: 3%;
    margin-top: 3%;
    font-size: 2.5vw;
    border: 2px solid;
    border-radius: 5px;
    padding: 1.3% 7%;
    background-color: hsl(71deg 82% 75% / 96%);
    font-weight: bold;
}

.btn:hover{
    background-color: black;
    color: whitesmoke;
    transition: 0.7s ease;
    cursor: pointer;
}

p a:hover{
    background-color: dimgrey;
}

.main_admin{
    width: 100%;
    background: linear-gradient(to bottom, #db6f1a 0%, rgb(15 202 8 / 44%) 100%);
}

.btn1{
    color: black;
    border: 2px solid black;
    padding: 0.5% 1%;
    transition: 1s ease;
    text-decoration: none;
    font-size: 2vw;
    font-weight: bold;
    background-color: hsl(71deg 82% 75% / 96%);
    margin-block: 1.5%;

}

.btn1:hover{
    background-color: black;
    color: white;
}

.main_check{
    width: 100%;
    background: linear-gradient(to bottom, #db6f1a 0%, rgb(15 202 8 / 44%) 100%);
}


.main_academic{
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgb(15 202 8 / 44%) 0%, #db6f1a 100%);
}

.academic{
    width: 100%;
    display: inline-flex;
}

.nav{
    text-align: -webkit-center;
    width: 15%;
    background-color: chocolate;
    display: block;
}

table tr td a{
    color: white;
    text-decoration: underline;
    font-size: 1.5vw;
}

.facility{
    font-size: 1.5vw;
    border: 5px solid black;
    width: 85%;
}

.fee{
    font-size: 1.5vw;
    border: 5px solid black;
    width: 85%;
}

.syllabus{
    text-align: -webkit-center;
    font-size: 1.5vw;
    border: 5px solid black;
    width: 85%;
}

.holiday{
    text-align: -webkit-center;
    font-size: 1.5vw;
    border: 5px solid black;
    width: 85%;
}

.result{
    text-align: -webkit-center;
    font-size: 1.5vw;
    border: 5px solid black;
    width: 85%;
}

.sample{
    text-align: -webkit-center;
    font-size: 1.5vw;
    border: 5px solid black;
    width: 85%;
}





























@media screen and (max-width: 1250px){
    ul {
        margin-top: 0.8%;
        margin-inline-start: 4%;
        width: 52%;
    }
}

@media screen and (max-width: 1025px){
    .con2_2 {
        width: 100%;
        margin-top: 8%;
    }

    .con2_1 {
        width: 100%;
    }


    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 1%;
        margin-inline-start: 5%;
        width: 45%;
    }




    .cond2 {
        padding: 1%;
        background-color: rgba(0, 0, 0, 0.800);
        width: 98%;
        height: 70%;
        display: inline-block;
    }



    .slide_c {
        background-color: white;
        width: 55%;
        height: 42vw;
    }

        
    .pri_p {
        position: absolute;
        width: 13vw;
        height: auto;
    }


    .conm1 {
        width: 100%;
        height: 43vw;
        display: inline-flex;
    }

    .s1, .s2, .s3, .s4, .s5, .s6, .s7{
        height: 41.8vw;
        width: 97.9%;
        border: solid black 6px;
    }
}

@media screen and (max-width: 890px){
    .pri_p {
        position: absolute;
        width: 13.5vw;
        height: auto;
    }

    ul {
        margin-top: 0%;
        margin-inline-start: 3%;
        width: 60%;
    }
}


@media screen and (max-width: 769px){
    .board {
        border: 0.3vw solid black;
        text-align: -webkit-center;
        width: 94.5%;
        height: 45%;
    }

    .n_content {
        color: white;
        border: 0.3vw solid black;
        width: 98%;
        height: 90%;
        background: linear-gradient(to bottom, rgb(15 202 8 / 44%) 0%, #db6f1a 100%);
        font-size: 1vw;
        font-weight: bold;
        overflow: auto;
    }


    ul li a {
        color: black;
        border: 2px solid black;
        padding: 8% 1vw;
        transition: 1s ease;
        text-decoration: none;
        font-size: 1.6vw;
        font-weight: bold;
        background-color: hsl(71deg 82% 75% / 96%);
    }



    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 7%;
        margin-inline-start: -7%;
        width: 49%;
    }


    .container {
        background-color: rgb(68 255 139);
        display: inline-flex;
        height: 15vw;
        width: 100%;
    }

    .H{
        font-family: serif;
        font-size: 6vw;
        margin: auto;
        display: contents;
    }



    .conm1 {
        width: 100%;
        height: 60vw;
        display: inline-flex;
    }

    .p_thought {
        margin: -2% 14%;
        font-size: 113%;
        font-family: sans-serif;
    }

    .con2_1 {
        width: 100%;
    }
    

    .slide_c {
        background-color: white;
        width: 55%;
        height: 60vw;
    }

    .s1, .s2, .s3, .s4, .s5, .s6, .s7{
        height: 58.5vw;
        width: 97.1%;
        border: solid black 6px;
    }

    .dir, .sec {
        position: inherit;
        width: auto;
        height: 15vw;
        margin-top: 2%;
    }
}

@media screen and (max-width: 651px){
    ul li a {
        color: black;
        border: 2px solid black;
        padding: 8% 1vw;
        transition: 1s ease;
        text-decoration: none;
        font-size: 1.8vw;
        font-weight: bold;
        background-color: hsl(71deg 82% 75% / 96%);
    }


    .btn {
        margin-bottom: 3%;
        margin-top: 3%;
        font-size: 4.5vw;
        border: 2px solid;
        border-radius: 5px;
        padding: 1.3% 7%;
        background-color: hsl(71deg 82% 75% / 96%);
        font-weight: bold;
    }

    .t_ro{
        margin-block-end: 1%;
        display: grid;
    }

    .t {
        width: 100%;
        border: 4px solid black;
        border-style: dashed;
    }

    input {
        width: 90%;
        font-size: 3vw;
        border: solid black 2px;
        border-radius: 5px;
    }

    select {
        width: 50%;
        font-size: 3vw;
        border: 2px solid;
        border-radius: 5px;
    }

    textarea {
        font-size: 3vw;
        border: 2px solid;
        border-radius: 5px;
    }

    .t_da {
        text-align: inherit;
        font-weight: bold;
    }


    .dir_m, .sec_m {
        font-family: sans-serif;
        margin-inline: 2%;
        margin-top: 2%;
        margin-bottom: 7%;
        font-size: 130%;
        color: whitesmoke;
    }

    .dir, .sec {
        position: inherit;
        width: auto;
        height: 17vw;
        margin-top: 2%;
    }


    .pri_p {
        position: absolute;
        width: 18vw;
        height: auto;
    }

    .p_thought {
        margin: -2% 20%;
        font-size: 100%;
        font-family: sans-serif;
    }

    .p_name {
        margin: 2% 20%;
    }


    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 5%;
        margin-inline-start: -12%;
        width: 80%;
    }



    .para_about, .para_mission, .para_vision {
        font-family: sans-serif;
        display: inline-block;
        color: white;
        background-color: #00000080;
        font-size: 112%;
        border: solid black 10px;
        border-style: double;
        margin: 1% 1%;
        padding: 1%;
        width: 91.5%;
        height: auto;
    }

    .s1, .s2, .s3, .s4, .s5, .s6, .s7 {
        height: 58.5vw;
        width: 95.3%;
        border: solid black 6px;
    }
}

@media screen and (max-width: 550px){
    .pic{
        width: 80%;
        height: 80%;
        margin-top: 5%;
    
    }


    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 5%;
        margin-inline-start: -25%;
        width: 82%;
    }
}

@media screen and (max-width: 426px){
    .board {
        border: 0.3vw solid black;
        text-align: -webkit-center;
        width: 94.5%;
        height: 40%;
    }

    .notice_q {
        text-align: -webkit-center;
        width: 100%;
        height: 100%;
    }

    .n_content {
        color: white;
        border: 0.3vw solid black;
        width: 98%;
        height: 90%;
        background: linear-gradient(to bottom, rgb(15 202 8 / 44%) 0%, #db6f1a 100%);
        font-size: 2vw;
        font-weight: bold;
        overflow: auto;
    }

    
    .pic{
        width: 80%;
        height: 80%;
        margin-top: 5%;
    
    }

    .dir, .sec {
        position: inherit;
        width: auto;
        height: 20vw;
        margin-top: 2%;
    }


    .pri_p {
        position: absolute;
        width: 20vw;
        height: auto;
    }


    .para_about, .para_mission, .para_vision {
        font-family: sans-serif;
        display: inline-block;
        color: white;
        background-color: #00000080;
        font-size: 100%;
        border: solid black 10px;
        border-style: double;
        margin: 1% 1%;
        padding: 1%;
        width: 92.5%;
        height: auto;
    }

    .about_d1, .about_d2 {
        width: 100%;
        font-family: sans-serif;
        font-size: 50%;
        display: inline-flex;
    }

    .about_d {
        display: inline-block;
        background-color: #00000080;
    }


    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 5%;
        margin-inline-start: -20%;
        width: 70%;
    }





    .conm1 {
        width: 100%;
        height: 60vw;
        display: inline-block;
    }



    .slide_c {
        background-color: white;
        width: 100%;
        height: auto;
    }

    .s1, .s2, .s3, .s4, .s5, .s6, .s7{
        height: 58.5vw;
        width: 97.2%;
        border: solid black 6px;
    }

    .cond2 {
        padding: 1%;
        background-color: rgba(0, 0, 0, 0.800);
        width: 98%;
        height: 70%;
        display: inline-block;
    }

    .p_thought {
        margin: -2% 14%;
        font-size: 62%;
        font-family: sans-serif;
    }

    .p_name {
        width: 77%;
        margin: 2% 23%;
    }

    .con2_2 {
        font-size: 75%;
        width: 90%;
        margin: 7% 5%;
    }

    
}

@media screen and (max-width: 376px){
    .pic{
        width: 90%;
        height: 80%;
        margin-top: 5%;
    
    }

    ul li a {
        color: black;
        border: 2px solid black;
        padding: 8% 0.5vw;
        transition: 1s ease;
        text-decoration: none;
        font-size: 1.9vw;
        font-weight: bold;
        background-color: hsl(71deg 82% 75% / 96%);
    }


    .dir, .sec {
        position: inherit;
        width: auto;
        height: 22vw;
        margin-top: 2%;
    }


    .p_name {
        font-size: 80%;
        width: 75%;
        margin: 2% 23%;
    }


    .pri_p {
        position: absolute;
        width: 20vw;
        height: auto;
    }


    .para_about, .para_mission, .para_vision {
        font-family: sans-serif;
        display: inline-block;
        color: white;
        background-color: #00000080;
        font-size: 73%;
        border: solid black 10px;
        border-style: double;
        margin: 1% 1%;
        padding: 1%;
        width: 91.5%;
        height: auto;
    }


    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 4%;
        margin-inline-start: -20%;
        width: 64%;
    }



    



    .p_thought {
        margin: -6% 14%;
        font-size: 50%;
        font-family: sans-serif;
    }

    
}

@media screen and (max-width: 321px){
    th, td {
        padding: 0px;
        text-align: left;
    }

    .pri_p {
        position: absolute;
        width: 20vw;
        height: auto;
    }


    .con2_2 {
        font-size: 75%;
        width: 95%;
        margin: 20% 5%;
    }


    .para_about, .para_mission, .para_vision {
        font-family: sans-serif;
        display: inline-block;
        color: white;
        background-color: #00000080;
        font-size: 70%;
        border: solid black 10px;
        border-style: double;
        margin: 1% 1%;
        padding: 1%;
        width: 90.5%;
        height: auto;
    }





    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 3%;
        margin-inline-start: -25%;
        width: 70%;
    }

    ul li a {
        color: black;
        border: 2px solid black;
        padding: 8% 0.5vw;
        transition: 1s ease;
        text-decoration: none;
        font-size: 2vw;
        font-weight: bold;
        background-color: hsl(71deg 82% 75% / 96%);
    }





    .p_thought {
        margin: -6% 14%;
        font-size: 50%;
        font-family: sans-serif;
    }

    .s1, .s2, .s3, .s4, .s5, .s6, .s7{
        height: 58.5vw;
        width: 96.2%;
        border: solid black 6px;
    }
    

    .p_name {
        font-size: 80%;
        width: 75%;
        margin: 2% 23%;
    }


}

@media screen and (max-width: 290px){
    .dir_m, .sec_m {
        font-family: sans-serif;
        margin-inline: 2%;
        margin-top: 2%;
        margin-bottom: 7%;
        font-size: 100%;
        color: whitesmoke;
    }


    .p_name {
        font-size: 80%;
        width: 71%;
        margin: 2% 27%;
    }


    .pri_p {
        position: absolute;
        width: 24vw;
        height: auto;
    }


    ul {
        margin-inline-end: 3%;
        float: left;
        margin-top: 2.5%;
        margin-inline-start: -25%;
        width: 70%;
    }

    .para_about, .para_mission, .para_vision {
        font-family: sans-serif;
        display: inline-block;
        color: white;
        background-color: #00000080;
        font-size: 70%;
        border: solid black 10px;
        border-style: double;
        margin: 1% 1%;
        padding: 1%;
        width: 89.5%;
        height: auto;
    }


    .dir, .sec {
        position: inherit;
        width: auto;
        height: 26vw;
        margin-top: 2%;
    }

}