*{margin: 0; text-decoration: none; transition: 0.2s; }
.navi{width: 100%; height: 40px; background-color: black; position: fixed; z-index: 4;}
.navi-item{width: 100%; height: 40px; }
.logo{width: 10%; height: 40px; background-color: rgb(255, 208, 1); position: absolute;}
.li{display: flex; flex-wrap: wrap; right: 0; width: 90%; height: 40px; background-color: rgb(107, 0, 0); float: right; justify-content: right; position: absolute;}
#navilogo{width: 60px; height: 75px; margin: 5px 0px 0px 10px; }

#menu-icon{display: none; margin-top: 5px; margin-right: 15px; transition: 0.5;}
#menu-close{display: none; margin-top: 5px; margin-right: 15px; transition: 0.5s;}

.nav-li{margin-right: 20px; margin-top: 9px;}
.nav-li h3{font-size: 16px; color: white;transition: 0.5s;}
.nav-li h3:hover{ opacity: .7; transition: 0.5s;}

.mob-navi{width: 100%; height: 100%; position: fixed; z-index: 3; background-color: rgba(15, 0, 0, 0.986); overflow: scroll; display: none;}
.mob-navi-box{width: 100%; height: auto; position: absolute; margin-top: 50px; }
.mob-nav-li h3{color: aliceblue; font-size: 20px;  border-bottom: 1px solid rgb(46, 0, 0); padding-bottom: 20px; padding-top: 20px; align-items: center;}

.body{position: absolute; width: 100%; height: auto; margin-top: 40px;}
.cnt{position: relative;}
.contener{width: 100%; height: auto; position: relative; }

.school-text{width: 100%; height: 550px; background-color: rgb(255, 255, 255); margin-top: 20px; }
.school-text-box{ position: absolute; display: flex; flex-wrap: wrap; margin-left: auto; margin-right: auto; }
.paragrap{width: 750px; height: 550px; background-color: rgb(255, 255, 255);}
.schole-img{width: 400px; height: 500px; background-color: rgba(255, 0, 0, 0); margin-top: 20px;}
#mmv-h2-002{font-size: 35px; font-family: COOPBL; color: #660000;}
#mmv-h3-002{font-size: 24px; padding: 20px;}
#mmv-img-002{width: 300px; height: 400px; margin: 20px 30px 0px 70px;}
#mob-mmv-img-002{display: none;}

.notice-board{width: 100%; height: 800px; background-color: rgba(255, 230, 0, 0);}
.notice-back{width: 100%; height: 800px; position: absolute; left: -0; right: 0; background: linear-gradient(45deg, #0d1128 0%, #fd6100 100%); opacity: 0.8;}
.notice-content{position: absolute; z-index: 3; justify-items: center; display: flex; flex-direction: column; width: 100%; left: -0;}
.notice-box{ display: flex; flex-wrap: wrap; margin-top: 20px; justify-content: center;}
.notice-img-box{width: 350px; height: 500px; background-color: rgba(255, 0, 0, 0); margin: 15px 15px;}
.notice-img-box img:hover{transform: scale(1.07);}
.notice-img-box img{width: 350px; height: 450px; border-radius: 20px;}
.notice-img-box h3{font-size: 20px; margin-top: 10px; color: white;}
#notice-h2-003{width: 100%; height: 40px;  color: rgb(255, 255, 255); font-size: 40px; margin-top: 35px; margin-bottom: 10px; font-family: comicbd; 
              -webkit-text-stroke: 1px rgb(82, 1, 1);}
#hr-003{border: 1px solid rgb(255, 166, 0);}
#more-notice-button{width: 200px; height: 50px; background-color: rgb(255, 187, 0); border-radius: 50px; margin-top: 20px; font-size: 25px;}
#more-notice-button:hover{background-color: #990000; border: none; color: #fdba00;}
#Utube{width: 550px; height: 300px;}

.row{justify-content: center;}


@media screen and (max-width:1199px) {
    #notice-img-box-3{}
    .notice-board{width: 100%; height: 1350px; background-color: rgba(255, 230, 0, 0);}
    .notice-back{width: 100%; height: 1350px; position: absolute; left: -0; right: 0; background: linear-gradient(45deg, #0d1128 0%, #fd6100 100%); opacity: 0.8;}
    .paragrap{width: 650px; height: 550px; background-color: rgb(255, 255, 255);}
    .schole-img{width: 200px; height: 500px; background-color: rgba(255, 0, 0, 0); margin-top: 20px;}
    #mmv-h2-002{font-size: 25px; }
    #mmv-h3-002{font-size: 20px; padding: 20px;}
    #mmv-img-002{width: 220px; height: 320px; margin: 20px 30px 0px 70px;}
   
    #Utube{width: 450px; height: 350px;}
}
@media screen and (max-width:1000px) {
    #navilogo{width: 50px; height: 65px; margin: 5px 0px 0px 10px; }
    .school-text-box{  display: flex; flex-wrap: wrap; width: 800px; height: auto; background-color: #24000000; position: absolute;  left: 0; right: 0;}
    .paragrap{width: 580px; height: 550px; background-color: rgb(255, 255, 255);}
    .schole-img{width: 220px; height: 500px; background-color: rgba(255, 0, 0, 0); margin-top: 20px;}
    #mmv-h2-002{font-size: 30px; }
    #mmv-h3-002{font-size: 20px; padding: 20px;}
    #mmv-img-002{width: 220px; height: 320px; margin: 30px 0px 0px 0px;}
    
    #Utube{width: 100%; height: 350px; }
    .col-md-6 {max-width: 100%; flex: none;}
    #mmv-h2-004{text-align: center;}
    .ion-ios-play{display: none;}
    #mmv-h1-001{font-size: 45px;}
    
    
}
@media screen and (max-width:880px) {
  #mmv-h1-001{font-size: 45px; text-align: center;}
}
@media screen and (max-width:800px) {

  .school-text-box{ position: absolute; display: block; flex-wrap: nowrap; margin-left: auto; margin-right: auto; width: 100%;}
  .paragrap{width: 100%; height: 550px; background-color: rgb(255, 255, 255); float: left;}
  .schole-img{width: 400px; height: 500px; background-color: rgba(255, 0, 0, 0); float: right; display: none;}
  #mmv-h1-001{font-size: 45px; text-align: center;}
  #mmv-h2-002{font-size: 30px; }
  #mmv-h3-002{font-size: 20px; padding: 20px;  }
  #mmv-img-002{display: none;}
  #mob-mmv-img-002{display: block; width: 150px; height: 220px; float: right;}

  #notice-img-box-2{}
 
  #menu-icon{display: block;}
  .nav-li{display: none;}
  #menu-icon{display: block;}

  .notice-board{width: 100%; height: 1930px; }
  .notice-back{width: 100%; height: 1930px; }
  .notice-img-box{width: 400px; height: 550px; background-color: rgba(255, 0, 0, 0); margin: 10px 10px;}
  .notice-img-box img{width: 400px; height: 500px; border-radius: 20px;}
  .notice-img-box h3{font-size: 20px; margin-top: 10px; color: white;}
  #notice-h2-003{width: 100%; height: 25px; font-size: 30px; margin-top: 15px; margin-bottom: 10px;}
  #more-notice-button{width: 200px; height: 50px; background-color: yellow; border-radius: 50px; margin-top: 20px; font-size: 25px;}
  
  .mb-4{font-size: 25px;}
  #h5-003{font-size: 20px;}

  #Utube{width: 100%; height: 250px; }
}
@media screen and (max-width:700px) {
  .logo{width: 15%;}
  .li{width: 85%;}

  #mmv-h1-001{font-size: 40px;}
}
@media screen and (max-width:600px) {
  #mob-mmv-img-002{display: block; width: 120px; height: 170px; float: right;}
  #mmv-h3-002{font-size: 18px; padding: 20px;  }

  .mb-4{font-size: 25px;}
  #h5-003{font-size: 18px;}

}

@media screen and (max-width:500px) {
  .logo{width: 20%;}
  .li{width: 80%;}

  #mob-mmv-img-002{display: block; width: 90px; height: 120px; float: right;}
  #mmv-h2-002{font-size: 25px;}
  #mmv-h3-002{font-size: 16px; padding: 20px;  }
  .school-text{width: 100%; height: 550px; background-color: rgb(255, 255, 255); margin-top: 20px; }

  .notice-board{width: 100%; height: 1570px; }
  .notice-back{width: 100%; height: 1570px; }
  .notice-img-box{width: 300px; height: 450px; background-color: rgba(255, 0, 0, 0); margin: 0px 10px;}
  .notice-img-box img{width: 300px; height: 400px; border-radius: 20px;}
  .notice-img-box h3{font-size: 20px; margin-top: 10px; color: white;}
  #notice-h2-003{width: 100%; height: 25px; font-size: 30px; margin-top: 15px; margin-bottom: 10px;}
  #more-notice-button{width: 150px; height: 50px; background-color: yellow; border-radius: 50px; margin-top: 10px; font-size: 20px;}
  
  .mb-4{font-size: 20px;}
  #mmv-h1-001{font-size: 30px;}
  .owl-carousel.home-slider{height: 450px;}
  .owl-carousel.home-slider .slider-item{height: 450px;}
  .owl-carousel.home-slider .slider-item .slider-text{height:450px}
  #h5-003{font-size: 16px;}
  .heading-section.heading-section-white h2{text-align: center; font-size: 30px;}
}
@media screen and (max-width:360px) {
  .school-text{width: 100%; height: 670px; background-color: rgb(255, 255, 255); margin-top: 20px; }
  .heading-section.heading-section-white h2{text-align: center; font-size: 28px;}
  .logo{width: 20%;}
  .li{width: 80%;}
  #navilogo{width: 40px; height: 55px; margin: 5px 0px 0px 10px; }
}
@media screen and (max-width:310px) {
  #mmv-h2-002{font-size: 23px;}
  #mob-mmv-img-002{display: block; width: 120px; height: 170px; float: none; margin-left: auto; margin-right: auto; margin-bottom: 10px;}
  #mmv-h3-002{font-size: 16px; padding: 20px; text-align: center; }
  .school-text{width: 100%; height: 800px; background-color: rgb(255, 255, 255); margin-top: 20px; }
  .owl-carousel.home-slider{height: 400px;}
  .owl-carousel.home-slider .slider-item{height: 400px;}
  .owl-carousel.home-slider .slider-item .slider-text{height:400px}

  .notice-board{width: 100%; height: 630px; }
  .notice-back{width: 100%; height: 630px; }
  .notice-img-box{width: 280px; height: 420px; background-color: rgba(255, 0, 0, 0); margin: 0px 10px;}
  .notice-img-box img{width: 280px; height: 380px; border-radius: 20px;}
  .notice-img-box h3{font-size: 20px; margin-top: 10px; color: white;}
  #notice-h2-003{width: 100%; height: 25px; font-size: 30px; margin-top: 15px; margin-bottom: 10px;}
  #more-notice-button{width: 150px; height: 50px; background-color: yellow; border-radius: 50px; margin-top: 10px; font-size: 20px;}
  
  .ftco-counter .img-video{height: 122px;}
  .heading-section.heading-section-white h2{text-align: center; font-size: 26px;}
  #Utube{width: 100%; height: 200px; }
}


::-webkit-scrollbar {
    width: 5px;
  }
::-webkit-scrollbar-track {
    background: #4d0000; 
  }
::-webkit-scrollbar-thumb {
    background: #ffd900; 
  }
::-webkit-scrollbar-thumb:hover {
    background: #f1b900; 
  }


  /* font */
  @font-face {
    font-family: COOPBL;
    src: url(mmvfont/COOPBL.TTF);
  }
  @font-face {
    font-family:comicbd ;
    src: url(mmvfont/comicbd.ttf);
  }