/****************
  lightbox modal start
  FROM https://www.pcschool.com.tw/2021/css/style_pcschool-webbase.css
****************/

/* base */
.modal-open {
  padding-right: 0 !important;
}

/* 燈箱背景模糊效果 */
.modal-open .modal {
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  padding-right: 0 !important;
  overflow-y: hidden; /* 避免有2個 scrollbar */
}
.modal-open .modal .modal-dialog {
  margin-top: 0.6rem;
}


/* 表單modal start */
/* .close {
  font-size: 32px;
  font-weight: 100;
  position: absolute;
  right: 10px;
  top: 10px;
} */
.btn-close {
  /* background-image: url(../images/close.svg); */
  background-color: #eeeeee;
  width: 30px;
  height: 30px;
}

.netform {
  height: 100vh;
}
.netform .netFormTitle {
  color: rgba(0, 0, 0, 0.75);
  font-size: 32px;
  /* font-weight: 500;
    margin-bottom: 0; */
  /*padding-bottom: 10px; 表單修改*/
  padding-bottom: 5px;
  text-align: center;
  /*margin-top: 1.5rem; 表單修改*/
  /* margin-top: 5px; */
}

.netform .textBreak {
  display: inline-block;
}

.netform span.textBreak {
  display: inline-block;
}

.netform .has-error {
  color: Red;
  font-size: var(--fzXs);
  float: right;
  display: none;
  margin-left: inherit;
}

.netform .form-Img img {} /* modal form 燈箱表單配圖 */
.netform .form-Img img {
  max-width: 90%;
}



/* new added 
2024.3.29 */
.modal-netform .modal-content {
  height: 100%;
}

.modal-netform .modal-closebox {}

.modal-netform .modal-netform-ratio {
  --bs-aspect-ratio: unset;  /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  height: 97%;
}

@media screen and (min-width: 768px) {
  .modal-netform .modal-netform-ratio {
    /* --bs-aspect-ratio: 56.25%; === .ratio-16x9 */
    --bs-aspect-ratio: 60%;  /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  }
}

@media screen and (min-width: 992px) {
  .modal-netform .modal-content {
    height: unset;
  }
}

@media screen and (min-width: 1200px) {
  .modal-netform .modal-netform-ratio {
    /* --bs-aspect-ratio: 56.25%; === .ratio-16x9 */
    --bs-aspect-ratio: 40%;  /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  }
}


/* (width netform 燈箱寬~~~版型) */
.modal-widthnetform .modal-content {
  height: 100%;
}
.modal-widthnetform .modal-content .modal-body {
  padding-top: 0;
}

.modal-widthnetform .modal-closebox {}

.modal-widthnetform .modal-widthnetform-ratio {
  --bs-aspect-ratio: unset;
  height: 140%;
}

@media screen and (min-width: 768px) {
  .modal-widthnetform .modal-widthnetform-ratio {
    /* --bs-aspect-ratio: 56.25%; === .ratio-16x9 */
    --bs-aspect-ratio: 60%;  /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  }
}

@media screen and (min-width: 992px) {
  .modal-widthnetform .modal-content {
    height: unset;
  }
}

@media screen and (min-width: 1200px) {
  .modal-widthnetform .modal-widthnetform-ratio {
    /* --bs-aspect-ratio: 56.25%; === .ratio-16x9 */
    --bs-aspect-ratio: 60%;  /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  }
}





/* (length netform 燈箱長~~~版型)  eg. user login 學員登入燈箱 */
.modal-lengthnetform .modal-content {
  height: 100%;
}
.modal-lengthnetform .modal-content .modal-body {
  padding-top: 0;
}

.modal-lengthnetform .modal-closebox {}

.modal-lengthnetform .modal-lengthnetform-ratio {
  --bs-aspect-ratio: 150%;  /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  height: 90%;
}

.modal-lengthnetform #iFrameContentWrapper .ui-dialog {
  height: auto;
}

#iFrameContentWrapper .ui-dialog .card {
  -webkit-box-shadow: none;
          box-shadow: none;
}

@media screen and (min-width: 768px) {
  .modal-lengthnetform .modal-lengthnetform-ratio {
    /* --bs-aspect-ratio: 56.25%; === .ratio-16x9 */
    --bs-aspect-ratio: 150%; /* NOTE: --bs-aspect-ratio 高度用::before padding-top 撐開 from bootstrap.css 7073行 */
  }
}

@media screen and (min-width: 992px) {
  .modal-lengthnetform .modal-content {
    height: 90%;
  }
  
}

/* @media screen and (min-width: 1200px) {
  .modal-lengthnetform .modal-lengthnetform-ratio {
    --bs-aspect-ratio: 56.25%; === .ratio-16x9 
    --bs-aspect-ratio: 40%;
  }
} */




/*  modal-enrollform 登記課程(開課查詢+產學班+人才培訓班共用) (width netform 燈箱寬~~~版型) */
.modal-enrollform .modal-content {
  background:#ffffff url('../images/bg-modal.webp') repeat right bottom / cover;
}
.modal-enrollform .modal-content .modal-body {
}

.modal-enrollform .modal-closebox {}

.modal-enrollform .modal-widthnetform-ratio {
  background-color: transparent;
  border-radius: 15px;
  overflow: hidden;
  margin-top: 10px;
  -webkit-box-shadow: 0 0 10px #391b1b29;
          box-shadow: 0 0 10px #391b1b29;
}

.modal-enrollform .modal-widthnetform-ratio .form-course-wrapper {
  border: 6px solid #2A4EB0;
}
.modal-enrollform .modal-widthnetform-ratio .form-header-title {
  color: var(--jgun-red-light);
  border: 6px solid #20cccc;
}

@media screen and (min-width: 768px) {
  .modal-enrollform .modal-widthnetform-ratio {
  }
}

@media screen and (min-width: 992px) {
  .modal-enrollform .modal-content {
  }
}

@media screen and (min-width: 1200px) {
  .modal-enrollform .modal-widthnetform-ratio {
  }
}


/****************
  lightbox modal end
  FROM https://www.pcschool.com.tw/2021/css/style_pcschool-webbase.css
****************/





/****************
  form template start
****************/

/* from css/gov.css */
/* layout rules: 
form-col, form-col-lg-6, form-col-12 
from bootstrap5's col, col-6 ...
*/
.form-contact .row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: calc(-1* var(--bs-gutter-y));
  margin-right: calc(-0.5* var(--bs-gutter-x));
  margin-left: calc(-0.5* var(--bs-gutter-x));
}

.form-col {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
  padding-bottom: 1rem;
}

.form-col-lg-6 {
  padding-bottom: 1rem;
}

.form-col-lg-6:nth-of-type(1) {}

.form-col-lg-6:nth-of-type(2) {}

.form-col-12 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 100%;
  padding-bottom: 1rem;
}


/*  */
.form-wrapper {}
.form-header {
  text-align: center;
  padding: 0.5rem 0 0.2rem;
}
.form-header-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 2%;
  /* max-width: 300px; */
  font-size: var(--fz2);
  font-weight: 700;
}
.form-header-subtitle {
  margin-bottom: 0.7rem;
}
.form-body {}
.form-body-head {
  margin: 0.5rem 0;
}
.form-body .flex-list {
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  border: 0px solid var(--jgun-red-light);
}
.form-body .flex-list p {}
.form-body .flex-list li {
  line-height: 1.6;
    margin-bottom: 0.7rem;
}
.form-body .flex-list li .head {
  color: var(--bs-primary-text-emphasis);
  font-weight: 700;
  padding-right: 10px;
  margin-bottom: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 75px;
}
.form-this {}

.form-this input:not([type="checkbox"]), .form-this select {
  width: 100%;
  height: 40px;
  line-height: 40px;
  max-height: 40px;
  font-size: 1rem;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #b1b1b1;
  color: var(--text-gray);
  border-radius: 5px;
  padding: 5px;
}

.form-this input[type="checkbox"] {
  border: 1px solid;
}
.form-this .form-group .form-check {
  margin-bottom: 0.5rem;
}

@media screen and (min-width: 992px) {
  /* from css/gov.css */
  /* layout rules: 
  form-col, form-col-lg-6, form-col-12 
  from bootstrap5's col, col-6 ...
  */
  .form-contact .row {}
  
  .form-col {}
  
  .form-col-lg-6 {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 50%;
  }
  
  .form-col-lg-6:nth-of-type(1) {
    padding-right: 6px;
  }

  .form-col-lg-6:nth-of-type(2) {
    padding-left: 6px;
  }
  .form-col-12 {}
  
  
  /*  */
  .form-wrapper {}
  .form-header {}
  .form-header-title {}
  .form-header-subtitle {}
  .form-body {}
  .form-body-head {}
  .form-body .flex-list {}
  .form-body .flex-list p {}
  .form-body .flex-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .form-body .flex-list li .head {}
  .form-this {}
  
  .form-this input:not([type="checkbox"]), .form-this select {
    
  }
  
  .form-this input[type="checkbox"] {} 

}
/****************
  form template end
****************/



/****************
  form course start
****************/
    .form-course-wrapper {}

    .netform-course {
      height: 100vh;
    }
    .form-course-wrapper {}
    .form-course-wrapper .form-header {}
    .form-course-wrapper .form-header .form-header-title {
      color: var(--jgun-red-dark);
    }
    .form-course-wrapper .form-header .form-header-subtitle {
      font-size: var(--fz4);
    }
    .form-course-wrapper .form-body {}
    .form-course-wrapper .form-body .form-body-head {
      color: var(--jgun-red-dark);
      font-weight: 500;
    }
    .form-course-wrapper .form-body .form-body-head .flex-list {}
    .form-course-wrapper .form-body .form-body-head .flex-list li {}
    .form-course-wrapper .form-body .form-body-head .flex-list li .head {
    }
    .form-course-wrapper .form-body .flex-list {margin-top: 0;}
    .form-course-wrapper .form-body .form-this {}    
    .form-course-wrapper .form-body .form-this .form-check {}
    .form-course-wrapper .form-body .form-this .form-check .form-check-label {}

/****************
  form course end
****************/