/* ////////////// 共用：捲軸底色 ////////////// */
.modal-body::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff6c0;
}
/* 捲軸寬度 */
.modal-body::-webkit-scrollbar{
  width: 6px;
  background-color: black;
}
/* 捲軸本體顏色 */
.modal-body::-webkit-scrollbar-thumb {
  background-color: #bba765;
}
/* ////////////// 捲軸底色 ////////////// */



.modal {
  line-height: 3.2rem;
  font-weight: 500;
  text-align: left;
  text-align: justify;
  scrollbar-width: none;
  margin: auto;
  background-color: #0c082dbd;
}

.modal-backdrop {
  /* background-color: rgba(0, 0, 0, 1) !important; */
}

.modal-content {
  position: relative;
  background-color: transparent !important;
  /* background: url(../img/modal/modal_bg_01.png) no-repeat center center; 
  background-size: 100% 100%;*/
  border: none !important;
}


.modal-header,
.modal-footer {
  position: relative;
  border: 0px solid #dee2e6 !important;
  margin-bottom: 0.5rem;
  background-color: transparent !important;
}
.modal-header{
  padding: 0;
  margin: 0;
}


.modal-header .close {
  margin: auto;
  position: absolute;
  top: -2.5rem;
  right: 0rem;
}

a.close {
  background: url(../img/modal/close.png) no-repeat center center;
  background-size: 90% 90%;
  width: 40px;
  height: 40px;
}
a:focus {
  outline: 0px dotted !important;
  outline: 0px auto -webkit-focus-ring-color !important;
}



.modal-body {
  position: relative;
  width: 100%;
  margin: auto;
  text-align: center;
  /* padding-bottom: 0 !important; */
}


.modal-footer{
  text-align: center;
  padding: 0 0.75rem 0.75rem 0.75rem !important;
  justify-content: center !important;
}
.modal-footer a {
  margin-bottom: 1.5rem;
}






/* ////////////// 各區塊 ////////////// */

/* ////////////// 1. ////////////// */
#modal01.modal-dialog{
  max-width: 500px;

  @media (width >1441px) {
    max-width: 650px;
  }
  
}

#modal01 .modal-body{
  position: relative;
  background-color: transparent !important;
  background: url(../img/modal/modal_bg.webp) no-repeat top center; 
  background-size: 100% auto;
  aspect-ratio: 1277/1072;/*比例綁定*/
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 11.5rem;

  @media (width >1441px) {
    padding-top: 16.5rem;
  }
}


.body_t {
  position: relative;
  display: flex;
  flex-direction: column;
} 
.body_t .notice_title{
  width: 90px;
  margin-left: 2rem;

  @media (width >1441px) {
    width: 100px;
    margin-left: 3.5rem;

  }

}
.body_t .notice_txt{
  width: 80%;
  margin: auto;
  max-width: 280px;
}
.body_t .notice_txt img{
  width: 100%;
}




.body_b {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 1rem auto 1rem auto;

  @media (width >1441px) {
    margin: 1.5rem auto 1rem auto;
  }
} 

.body_b a{
  width: 150px;

  @media (width >1441px) {
    width: 200px;
  }

}



/*--------------------------------------------------------------
  RWD X 平板以下 
--------------------------------------------------------------*/


@media (max-width: 1024px) {
  #modal01.modal-dialog{
    max-width: 650px;
  }
  #modal01 .modal-body{
    padding-top: 15.5rem;
  }
  .body_t .notice_title{
    width: 110px;
    margin-left: 3rem;
  }
  .body_t .notice_txt{
    max-width: 360px;
  }
  .body_b a{
    width: 180px;
  }
}


@media (max-width: 576px) {
  #modal01.modal-dialog{
    max-width: 400px;
    margin: auto;
  }
  #modal01 .modal-body{
    padding-top:8.5rem;
  }
  .body_t .notice_title{
    width: 80px;
    margin-left: 0rem;
  }
  .body_t .notice_txt img{
    width: 250px;
  }
  .body_b{
    margin: .5rem auto 0rem auto;
  }
  .body_b a{
    width: 140px;
  }

}


@media (max-width: 391px) {
  .modal-dialog-centered{
    min-height: calc(90% - 1rem);
  }
  #modal01.modal-dialog{
    width: 370px;
  }
  .body_t .notice_title{
    width: 70px;
  }
  #modal01 .modal-body{
    padding-top: 7.5rem;
  }

}

@media (max-width: 376px) {
    #modal01.modal-dialog{
    width: 350px;
  }
  #modal01 .modal-body{
    padding-top: 7rem;
  }
  .body_t .notice_txt img{
    width: 220px;
  }
  .body_b{
    justify-content:space-between;
  }
}