/* ----------------------------------------------------------------

   課程報名

-----------------------------------------------------------------*/

 #register {

     width: 100%;

     height: auto;

     padding: 8% 3%;

     overflow: hidden;

 }

 #register img.bs_yellow {
    box-shadow: -30px 30px 0px rgba(212, 160, 33, 0.6);
}

input{

    margin-bottom: 1rem;
}


label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 2rem;
    color: #727272;
}

.course{  background:rgba(256,256,256,.5); border-radius: 8px; 
padding: 2% 2%; margin-bottom: 2rem;  /*border:1px solid #4a3600;*/ 
}


.course p{ color: #4a3600;line-height: 1.6; }


.grid_center{ width: 100%; display: block; text-align: center; }

.grid_right{ width: 100%; display: block; text-align: right; }


.btn_register, .btn_register:visited {

    font-size: 1.75rem;

    color: #fffbf0;

    letter-spacing: 2px;

    padding:0.5rem 3.5rem;   

    background-color: #4a3600;

    font-weight: normal;

    display: inline-block;

    transition: all 0.3s ease-out;

    text-decoration: none;

    border-radius: 20px; 

    margin-bottom: 1rem;

}



.btn_register:hover {

    transform: scale(0.95);

    text-decoration: none;

    color: #fffbf0;

}

.btn_register.yellow{
    width: 360px;
    padding: 0.5rem 0;
    text-align: center;
}


.btn_register.word-break{
    white-space: nowrap;     
  word-break: keep-all;   
  overflow-wrap: normal;
}


@media (max-width: 991px) {

 #register {

     padding: 23% 3% 8% 3%;


 }

 label { font-size: 1.5rem; }

 .course{  
    padding: 4% 6%;
    }

.btn_register, .btn_register:visited {

    font-size: 1.5rem;

    padding: 0.5rem 1.5rem;  

    display: inline-block;

    width: 48%;

    letter-spacing: 0px;
    margin-right: 1%;


}

.btn_register.yellow {
    width: auto;
    padding: 0.5rem 3rem;
    text-align: center;
}

}

.btn_register.word-break{
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}


@media (max-width: 320px) {



    .btn_register, .btn_register:visited {

        font-size: 1.5rem;

    }



}


 /* ----------------------------------------------------------------

   道場簡介

-----------------------------------------------------------------*/



 #intro {

     width: 100%;

     height: 1024px;

     padding: 7% 3%;

     background: url(../images/bg_intro.jpg) no-repeat 100% bottom;

 }



 @media (max-width: 1680px) {

     #intro {

         background: url(../images/bg_intro.jpg) no-repeat 40% bottom;

     }

 }







 @media (max-width: 768px) {

     #intro {

         background: url(../images/bg_intro_phone.jpg) no-repeat 0 150px;

         background-size: cover;

         height: 100%;

         padding: 23% 3% -150px 3%;

     }

 }


  @media (max-width: 375px) {

     #intro {
         height: 108%!important;


     }

 }



 /* ----------------------------------------------------------------

   法師簡介與傳承

-----------------------------------------------------------------*/



 #teacher {

     width: 100%;

     height: 960px;

     padding: 12% 3%;

     background: #77673c url(../images/bg_teacher.jpg) no-repeat 100% bottom;

 }



 @media (max-width: 1680px) {

     #teacher {

         background: #77673c url(../images/bg_teacher.jpg) no-repeat 40% bottom;

     }

 }



 @media (max-width: 768px) {

     #teacher {

         background: #77673c url(../images/bg_teacher_phone.jpg) no-repeat right bottom;

         background-size: cover;

         height: auto;

         padding: 23% 3% 11% 3%;

         overflow: hidden;

     }

 }



 @media (max-width: 375px) {

     #teacher {

         background: #77673c url(../images/bg_teacher_phone.jpg) no-repeat right top;

         background-size: 120%;

     }

 }

 

 



#teacher .text_yellow_light p{

	color: #fffbf0;

}





 /* ----------------------------------------------------------------

   活動介紹

-----------------------------------------------------------------*/



 #event {

     width: 100%;

     height: 960px;

     padding: 12% 3%;

 }



 #event .mgt_6{

    margin-top: 6%; 

}





 #event img.bs_yellow {

     box-shadow: -30px 30px 0px rgba(212, 160, 33, 0.6);

 }



 #event p {

     line-height: 1.6;

 }



 .panel-group {

     margin-bottom: 0;

     padding: 0;

     margin-top: 2rem;

 }



 .panel-group .panel, .panel-group .pane {

     margin-bottom: 0;

     border-radius: 4px;

     margin-bottom: 1rem;

 }



 .panel-title {

     margin-top: 0;

     margin-bottom: 0;

     text-align: left;

 }



 .panel-heading a:focus, .panel-heading a:active {

     background: url(../images/icon_open.png) no-repeat 97% center;

 }



 .panel-heading a {

     background: url(../images/icon_close.png) no-repeat 97% center;

 }



 .panel-heading {

     border-radius: 48px;

     padding: 0 0;

     border-left: 1px solid #56430f;

     border-right: 1px solid #56430f;

     border-top: 1px solid #56430f;

     border-bottom: 1px solid #56430f!important;

 }



 .panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {

     border: none!important;

 }



 .panel {

     margin-bottom: 20px;

     border: none;

     background: none;

     border-radius: 4px;

     box-shadow: 0 1px 1px rgba(0, 0, 0, 0);

 }



 .panel-heading a {

     display: block;

     height: 4rem;

     line-height: 4rem;

     font-size: 2rem;

     font-weight: 400;

     letter-spacing: 1px;

     color: #727272;

     text-align: center;

 }



 .panel-heading a:hover, .panel-heading a:visited, .panel-heading a:focus {

     text-decoration: none;

 }



 .panel-body {

     padding: 1.5rem 1.5rem 0 1.5rem;

 }



 .panel-body p {

     line-height: 1.6!important;

     font-size: 1.85rem;

 }





      .marquee_img {

         overflow: hidden;

     }

     .marquee_img img {

         height: 300px;

         margin: 0 1rem;

     }



 @media (max-width: 1199px) {

     .panel-heading a {

         font-size: 1.75rem;

         letter-spacing: 0px;

     }

          #event {

         background-size: cover;

         height: auto;

         padding: 23% 3% 11% 3%;

         overflow: hidden;

     }

 }





 @media (max-width: 768px) {





     .panel-heading a {

         font-size: 1.5rem;

     }

     .panel-body p {

         line-height: 1.4!important;

         font-size: 1.5rem;

         letter-spacing: 0;

     }

 }



 @media (max-width: 414px) {

     .panel-heading a {

         min-height: 4rem;

         height: auto;

         line-height: 1.4;

         padding: 2% 10% 2% 4%;

     }

     .marquee_img img {

         height: 240px;

     }

     .panel-heading a {

         background: url(../images/icon_close.png) no-repeat 94% center;

         background-size: 3%;

     }

     .panel-heading a:focus, .panel-heading a:active {

         background: url(../images/icon_open.png) no-repeat 94% center;

         background-size: 3%;

     }

 }



 /* ----------------------------------------------------------------

   影片播放

-----------------------------------------------------------------*/



 #video {

    width: 100%;

    height: 860px;

    padding: 16% 3%;
    display: none;

 }





 #video p{

   line-height: 1.6;



 }





 #video  .bs_yellow {

    box-shadow: 30px 30px 0px rgba(212, 160, 33, 0.6);

}



 



 @media (max-width: 768px) {

      #video {

         background-size: cover;

         height: auto;

         padding: 23% 3% 11% 3%;

         overflow: hidden;

     }





 }    



 /* ----------------------------------------------------------------

   道場位置+入場需知

-----------------------------------------------------------------*/



#location {

     width: 100%;

     height: 920px;

     padding: 0% 0 0 3%;

 }





#location .text{

    padding: 10% 0 0 0;

}



 #location p{

   line-height: 1.6;

   margin-bottom: 15%;



 }


li{

  list-style: none;

  font-size: 2rem;

  line-height: 2;

  color: #727272;

  }



 @media (max-width: 768px) {

      #location {

         background-size: cover;

         height: auto;

         padding: 23% 3% 11% 3%;

         overflow: hidden;

     }



      #location p{

   line-height: 1.4;

   font-size: 1.5rem;

   margin-bottom: 8%;



 }



 li{

    font-size: 1.5rem;

    line-height: 1.8;


   }



   #location {

     width: 100%;

     height: auto;

    padding: 23% 6% 0% 6%;

 }



 }  



     



 /* ----------------------------------------------------------------

   footer

-----------------------------------------------------------------*/



 footer {

     width: 100%;

     padding: 1rem 0%;

     background-color: #fffbf0;



 }



  footer p{

     text-align: center;

     font-size: 1.75rem;

     color: #4a3600;

     margin-bottom: 0;

  }



 @media (max-width: 768px) {

     footer {

         padding: 5% 0%;

         

     }



     footer p{

        font-size: 1.25rem;

     }

 }