*{
margin: 0;
padding: 0;
font-style: none;


}


body,html {

}

::selection {
	background: #b5c7e1;
	color: white;
}

::-moz-selection {
	background: #b5c7e1;
	color: white;
}

@media (min-width: 1200px){
  .containerr {
    max-width: 1250px;
    margin: 0 auto;
  }
  
}

.swiperbox1{
display: none;

}

.swiperbox{
  display: block;
  
  }


.dot{
  /* display: flex; */
}

.dot-1{
  /* display: flex; */
  justify-content: center;
  align-items: center;
}



.nnn{
  
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -20px;
  flex-direction: column;
}

.nnn p{
  

  font-size: 23px;
  color: #5f5f5f;
  position: relative;
  margin: 0;
  font-weight: bold;
  text-align: center;

}
.fff{

width: 150px;
height: 150px;
margin: 0 auto 50px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 50%;
}

.map{
  width: 85px;
  margin: 0 auto;
 
}
.map img{
  width: 100%;
}

.nnn p::before {
  content: '';
  width: 17px;
  height: 2px;
  background: #82a1cd;
  position: absolute;
  left: -26px;
  display: block;
  top: 16px;
}


.nnn p::after {
  content: '';
  width: 17px;
  height: 2px;
  background: #82a1cd;
  position: absolute;
  right:  -26px;
  display: block;
  top: 16px;
}


/* @media (min-width: 1800px){
  .containerr {
      max-width: 1600px;
      margin: 0 auto;
  }
  } */




.containerr {

  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.scholarshipbarimg{
  width: 215px;

}

.scholarshipbarimg img{
  width: 100%;
  
}


/* --------首頁 */

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
width: 100%;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  
}

/* -----------icon */

#ICON img{
  width:140px;
  height: 140px;  
}

#ICON{
	position:absolute;
	right: 40px;
	top:200px;
	width:150px;
	text-align:center;
z-index: 20;

}



#ICON:hover{
       
  transform:scale(1.1) ;

}

#ICON-1:hover{
       
  transform:scale(1.1) ;

}


#ICON p{
  text-align: center;
  color: white;
  text-shadow: 0px 0px 16px #0f1c00;
  font-size: 23px;
  font-weight: bolder;
  background-color: #724384;

  margin-top: -20px;
  border-radius: 14px;
  position: relative;
  z-index: 2;

 
}

#ICON-1{
  position: fixed;
  bottom: 0px;
  right: 0;
  z-index: 99;
  text-align: center;
  display: none;
 

}



#ICON-1 img {
  width: 130px;
  height: 130px;
  margin: 0 auto;

}


#ICON-1 p {
  position: absolute;
  top: 32px;
  left: 3px;
  color: white;
  text-align: center;
  background-color: #724384;
padding: 0 4px;
  font-size: 20px;
  transform: rotate( 
-13deg );
  margin: 0 auto;
  font-weight: bolder;
  border-radius: 10px;
}


.blank{
height: 70px;
width: 100%;  
}

/* ==============未開放報名 */


.xx{

  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.697);
  position: fixed;
  left: 0;
  top:0;
  z-index: 20;

}






.colorful{
  background-color:#7f548e
}




.modal-1 { /* 整個畫面 */
  padding: 0!important;
  text-align: center;

}
.modal-1::before{
content:'';
display: inline-block;
height: 80%;
margin-right: -4px;
vertical-align: middle;


}
.modal-1 .modal-dialog{
text-align: left;
display: inline-block;
vertical-align: middle;

}



.modal-l1 { /* 整個畫面 */
  padding: 0!important;
  text-align: center;

}
.modal-l1::before{
content:'';
display: inline-block;
height: 80%;
margin-right: -4px;
vertical-align: middle;


}
.modal-l1 .modal-dialog{
text-align: left;
display: inline-block;
vertical-align: middle;

}


@media screen and (min-width: 768px){
 .modal-box
{
  width: 400px!important;
} 
}

/* ================= */


/* --------- */
.img-box-1 {
  width: 160px;
  line-height: 70px;
}
       
    .img-box-1 img{
    width: 100%;
    }
  
  .header-ph{
    display:none;
  }
  
  
  #scholarship{
    position: fixed;
    top:0;
    left: 0px;
    z-index: -1;
    opacity: 0;
    height: 100%;
    }
  
  
  .small{
    display: none;
  }
  
  .side-menu{
    display: block;
    z-index: 100;
    width: 100%;
    
  }
  
  .small li{
    padding:  7px 0!important;
    background-color: #fff!important;
    border-bottom:0 !important; 
    
    
  }
  
  .smallbr{
   border-top: solid 1px #ddd!important;
    border-bottom:0 !important; 
  }
  
  
  
  .header-ph{
    position: fixed;
    background-color: #7f548e;
    width: 100%;
    z-index: 110;
    box-shadow: 0px 0px 11px rgb(145 165 193);
    height: 70px;
   
    
  }
  
  
   .header-ph li a:hover{
    text-decoration: none;
    color: #139884;
   }
  
  
  
.menu-control{
position: absolute;
width: 50px;
height: 50px;
border: solid 2px white;

top:10px;
right:10px;

} 


.menu-control span{
display: block;
height: 3px;
background-color: white;
margin: 9px; 
transform-origin: 3px;

transition: .3s;


}
  
    .menu-control2{
     display: none;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
      position: fixed;
      left: 0;
      top:0;
      z-index: 10;
      }
   
   
   
    .side-menu {
     box-sizing: border-box;
     background: #eee;
  transition: all .3s;
   overflow: auto;
   position: fixed;
   width: 60%;
   top:70px;
   height: 100vh;
   z-index: 95;
   transform: translateX(-100%);
     
   }

  
  
   #scholarship:checked ~.side-menu{
      transform: translateX(0%);
   }   
  
   #scholarship:checked ~ .menu-control2{
    display: block;
    }
    
   
  
  
    
  .side-menu li {
    list-style: none;
    padding: 15px 0;
    
    border-bottom: 1px solid #c5c4c4;
      color: #666;
    
   } 
  
   
   
  
   .side-menu  a{
    text-decoration: none;
    color: #666;
    font-size: 19px;
    padding: 11px 5px 10px 20px;
    font-weight: bold;
    width: 100%;
    display: inline-block;

    border-bottom: 1px solid #c5c4c4;
    color: #666;
   
    }
   
  
  
    .side-menu  a:hover{
      color: #48055e;
      text-decoration: none;
    }

    /* ------ */
  
    .line1_rotate{
      width: 40px;
    
  transform: translate(0px,0) rotate(45deg);}

    .line2_hide{
      opacity: 0;
  }

   .line3_rotate{
      width: 40px;
      
      transform: translate(0px,0) rotate(-45deg);}

      .menu li{
       display: block;
          
          }







 
 

.headerbar{
background-color: #7f548e;
width: 100%;
position: fixed;
z-index: 21;
display: flex;
justify-content: space-between;
padding: 5px 20px;



}


.headerbar  nav{
display: flex;
justify-content: flex-end;
align-items: center;



}



.headerbar a + a{
margin-left: 10px;  
}



.headerbar a:hover{
text-decoration: none;

}

.borderless a {
padding: 10px;
letter-spacing: 3px;
font-size: 22px;
color: white;
text-decoration: none;
color: #fff;
background: transparent;
border-width: 1px;
border-style: solid;
border-color: #fff;
position: relative;
margin: 15px;
display: inline-block;
font-weight: 600!important;
transition: all 0.3s ease-in-out;
text-align: center;
border-color: rgba(0, 0, 0, 0);


}
.borderless a:before,
.borderless a:after {
content: "";
display: block;
position: absolute;
border-color: #fff;
box-sizing: border-box;
border-style: solid;
width: 1em;
height: 1em;
transition: all 0.3s ease-in-out;
border-color: transparent;
}
.borderless a:before {
top: -6px;
left: -6px;
border-width: 1px 0 0 1px;
z-index: 5;
}
.borderless a:after {
bottom: -6px;
right: -6px;
border-width: 0 1px 1px 0;
}
.borderless a:hover:before,
.borderless a:hover:after {
width: calc(100% + 12px);
height: calc(100% + 12px);
border-color: #fff;
}



.borderless a:hover {
border-color: #fff;
background-color: transparent;
color: #fff;

}

.pboxx p{
background-color:#b58ec2!important}


.banner{
width: 100%;
background-image: url(../img/banner.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 550px;
background-position: center 12%;
display: flex;
align-items: center;
}

.date-1 .pbox{

width: 30%;

padding: 7px;

text-align: center;
color: white;

display: flex;
justify-content: center;
align-items: center;

}

.pbox p{
margin: 0; 
color: white; 
font-size: 17px;
background-color: #742d8d;
padding: 8px;
border-radius: 20px;
width: 140px;
text-align: center;

}

.bac{
  background-color: #efe8f2;

  margin-top: 80px;
}

.bac-1{
  background-image: url(../img/dot.png);
  background-size:contain;
}


.date-1 .abox {
width: 100%;
color: #48055e;
padding: 10px;
margin: 0;
display: flex;
align-items: center;
letter-spacing: 1px;
background-color: #fff;
}

.date-1  .abox a:hover{
text-decoration: none;
}

.abox  a{
margin: 0; 
color: #5f5f5f!important;
 font-weight: bold!important;
 font-size: 17px;

}


.abox  p{
display: inline-block;
margin: 0;
  
  }

.abox  a:hover{
  margin: 0; 
   color: #5f5f5fc7;
  
  }

.date-1{
width: 49%;
display: flex;
justify-content: center;
padding: 5px 0;

border-bottom: 1px dashed #bfa69b;

}

.dateallbox{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

  .datebox{
    margin-top: 50px; 
    font-size: 16px;
    width: 100%;
    margin:  0 auto;
 
  

    
   }

   .ttbtn{

    margin-bottom: 20px!important;
    border-bottom: 0!important;
   }

   .tabc{
    border-bottom:0!important;
    margin-top: 40px !important;
    position: relative;
    z-index: 5;
   }


   .tabc li{
    font-weight: bold;
    font-size: 20px;
   }



   .ttbtn  li{
    margin-right: 10px; 
    font-weight: bold;
   }
   .line{
    margin-right: 4px;
    color: #b7b7b7;
   }

   .linkbtn{
    border: 0!important;
    background-color: #73bb27;
    box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);
    border-radius: 20px!important;
    color: white;
    font-size: 20px;
    
   }


.boxs {
 
    display: none;
   
    /*把全部的內容.boxs都關掉*/
}

.boxxs {
 
  display: none;
 
  /*把全部的內容.boxs都關掉*/
}

.boxs ul li {
 
  list-style:none;
}

 .open {
    display: block;
}

.openn {
  display: block;
}


.oneone{
 display: flex;
 justify-content: center;
 align-items: center; 
 margin-top: 15px;

}
.oneone-1 {
  display: flex;
  font-size: 20px;
  list-style:none;




}

.oneone-1 .nowTabb {
  background-color: #82a1cd;
 
}


.oneone-1 .nowTab {
  background-color: #82a1cd;
 
}

.contentt{
  background-color: white;
  padding: 10px 30px!important;
  box-shadow: 2px 2px 38px rgb(220 148 89 / 17%);
  border-radius: 14px;
  margin-top: -80px;


  

}





  


.oneone-1  a{
  box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);
  background-color: #b4c7e1;
  padding: 5px;
  border-radius: 50%; 
  font-size: 17px;
  width: 40px;
  height: 40px;
  line-height: 32px;
    text-align: center;
    color: white;
margin: 8px;
cursor: pointer;
}


.oneone-1  a:hover{
  background-color: #82a1cd;
text-decoration: none;
 
    color: white;

}



   .linkbtn.active{
    background-color: #82a1cd!important;
   
    color: white!important;

   }

   .linkbtn:hover {
   color: white; 
   background-color: #82a1cd;
}
   .nav-link-1{
    margin-right: 15px;
         margin-left: 15px;
         
     
   }

 
   .nav-link-1.active {
    color: #742d8d!important;
    background-color: transparent!important;
    border: none!important;}

   .linkbtn-1{
 padding: 0!important;
    cursor: default;
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-bottom-color: transparent; */
    border-bottom: 2px solid #7a4b5a;
    margin-bottom: -1px;
    border: 0!important;
    color: #5f5f5f;
 cursor: pointer;
    border-radius: 0!important;
   }



   .dateallsvg{
     display: flex;
     width: 32%;
     justify-content: flex-start;
   
     
   }




   .dateallimg h1{
     font-size: 20px;
     margin: 0;
     text-align: center;
     font-weight: bold!important;
     color: #454545;
   }

   .dateallimg p{
    font-size: 15px;
    margin-top: 10px;
    color: #5f5f5f;
    font-weight: bold!important;
  }


   .dateallimg {
    width: 26%;
   
  }

  .dateallimg2 {
    width: 80%;
    margin: 0 auto;
}
  
  .dateallimg img{
    width: 100%;
  }


  #fb{
    border-radius: 50%;
    background-color: white;
  }

  #fb:hover{
    box-shadow: 2px 2px 3px rgb(127, 127, 127);
  }
  
  #line{
    border-radius: 50%;
    background-color: white;
  }

  #line:hover{
    box-shadow: 2px 2px 3px #aaa;
  }

  .st00{fill:#4B63A7;}
	.st01{fill:#4B64A7;}
	.st02{fill:#9CAACE;}
	.st03{fill:#A9B5D5;}
	.st04{fill:#3A559E;}

  .svg2{fill:#00C400;}
	.svg3{fill:#01C401;}

.dateallsvg svg{
  width: 40px;
  margin-top: 10px;

}

.dateallsvg {
  width: 40px;
  margin-top: 10px;

}

.dateallsvg img{
  width: 95%;
  border-radius: 50%;
margin: 0 auto;
}

.dateallsvg img:hover{
  box-shadow: 2px 2px 3px #aaa;

}


.dateallsvg a + a{
    margin-left: 10px;
  }


  .Activity{
    display: flex;
    justify-content: space-between;

  }

  .gr{
    background-image: url(../img/dot.png);
    padding: 40px 20px 80px 20px;
    background-attachment: fixed;
    background-size: contain;
    
   
    

   
  
  }
.tba{
 background-color: #fffdf0;
 padding-bottom: 80px;
    background-attachment: fixed;
    background-size: contain;
   }


  .lecture{
     margin-top: 30px;
    width: 100%;
   position: relative;
   z-index: 3;
   position: relative;
   z-index: 5;
    
  }

  .qq{
    background-color: white;
    width: 170px;
    height: 170px;
    margin: 0 auto;
     border-radius: 50%;
     display: flex;
    flex-direction: column;
    justify-content: center;
   
   
  }


  .qqbox{
    width: 50%;
    margin: 0 auto;
  }

  .qqbox img{
    width: 100%;
    margin-top: -20px;
  }

  .qq p{
    text-align: center;
    margin: 0;
    font-size: 23px;
    font-weight: bold;
    letter-spacing: 2px;
    position: relative;
    margin-top: 3px;
    color: #5f5f5f;
  }

  .qq p::before {
    content: '';
    width: 17px;
    height: 2px;
    background: #82a1cd;
    position: absolute;
    left: -2px;
    display: block;
    top: 20px;
}

.qq p::after {
  content: '';
  width: 17px;
  height: 2px;
  background: #82a1cd;
  position: absolute;
  right: -2px;
  display: block;
  top: 20px;
}




/* ----------taiwan */

.taiwan{
  width: 100%;
  margin: 0px auto 0 auto;
position: relative;



}

.taiwan svg {

    width: 75%;
    padding: 10px;
    margin: 0 auto;
  
    padding-right: 205px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    


 
  }
  
  
  
.st0-1 {
fill: #ffbedd;
stroke: #FFFFFF;
cursor: pointer;
}

.st0-2 {
fill: #ffd05e;
stroke: #FFFFFF;
cursor: pointer;
}


.st0-3 {
fill: #ffe120;
stroke: #FFFFFF;
cursor: pointer;
}


.st0-4 {
fill: #c4e344;
stroke: #FFFFFF;
cursor: pointer;
}
  
.st1 {
fill: #7ec603dc;
stroke: #FFFFFF;
}

.st11 {
  fill: #82a1cd;
  stroke: #FFFFFF;
  }
 
  
.group-1:hover {
fill: #ffbeddba;}

.group-2:hover {
fill: #ffcf5ebe;}


.group-3:hover {
fill: #ffe120de;}

.group-4:hover {
fill: #c3e344c7;}
  
  
  


/* ------ */



.north {
  background-color: #fff5d5;
  display: inline-block;
  padding: 14px;
  position: absolute;
  top: 124px;
  right: -3px;
display: block;
border-radius: 10px;
width: 280px;


}

.north p{
  font-size: 18px;
  color: #ffa8d1;
  border: solid 2px #ffa8d1;
 margin: 0;
display: inline-block;
padding: 2px;
border-radius: 10px;
text-align: center;

font-weight: bold!important;
}


.north h1{
  text-align: center;
  background-color: #ffa8d1;
  color: white;
  font-size: 20px;
  border-radius: 10px;
  padding: 6px;
  font-weight: bold!important;
  margin: 0 0 10px 0;

  

}

.north h2 {
  font-size: 20px;
  border-radius: 10px;
  padding: 6px;
  font-weight: bold!important;
  margin: 0;
  color: #5f5f5f;
}


.north  a{
 font-size: 17px;
 letter-spacing: 1px;
 color: #5f5f5f;
 font-weight: bold!important;
 display: block;

 margin-bottom: 8px;
 border-bottom: 1px dashed #bfa69b;
 padding-bottom: 5px;
}

.north  a:hover{
text-decoration: none;
  color: #5f5f5fc7;
 }



.place{
  margin-bottom: 5px;
  color: #5f5f5f;
}



.north::after{
  content: '';
  position: absolute;
  top: 75px;
  left: -29px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 30px solid #fff5d5;
}





.middle p{
margin: 0;
}


.middle {
  background-color: #fff5d5;
  display: inline-block;
  padding: 14px;
  position: absolute;
  top: 124px;
  left: -39px;
  display: block;
  border-radius: 10px;
  width: 280px;

}

.middle p{
  font-size: 18px;
  color: #ffc63d;
  border: solid 2px #ffc63d;
 margin: 0;
display: inline-block;
padding: 2px;
border-radius: 10px;
text-align: center;
/* margin-bottom: 10px; */
font-weight: bold!important;
}


.middle  a{
 font-size: 17px;
 letter-spacing: 1px;
 color: #5f5f5f;
 font-weight: bold!important;
 display: block;
 margin-bottom: 8px;
 border-bottom: 1px dashed #bfa69b;

}

.middle  h1{
  font-size: 20px;
  border-radius: 10px;
padding: 6px;
  font-weight: bold!important;
  margin: 0 0 10px 0;
  background-color: #ffc63d;
  color: white;
  text-align: center;
 }

 .middle  h2{
  font-size: 20px;
  border-radius: 10px;
padding: 6px;
  font-weight: bold!important;
  margin: 0;
  color: #5f5f5f;

 }

.middle  a:hover{
text-decoration: none;
  color: #5f5f5fc7;
 }



.middle::after{
  content: '';
  position: absolute;
  top: 75px;
  right: -30px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #fff5d5;
}


.south p{
  margin: 0;
}

.south {
  background-color: #fff5d5;
  display: inline-block;
  padding: 14px;
  position: absolute;
  top: 485px;
  left: -39px;
  display: block;
border-radius: 10px;
width: 275px;


}

.south p{
  font-size: 18px;
  
  border: solid 2px #fbde1f;
  color: #fbde1f;
 margin: 0;
display: inline-block;
padding: 2px;
border-radius: 10px;
text-align: center;
margin-bottom: 5px;
font-weight: bold!important;

}


.south  a{
 font-size: 17px;
 letter-spacing: 1px;
 color: #5f5f5f;
 font-weight: bold!important;
 margin-bottom: 8px;
 border-bottom: 1px dashed #bfa69b;
 padding-bottom: 5px;
 display: block;
}


.south  h2{
  font-size: 20px;
  border-radius: 10px;
padding: 6px;
  font-weight: bold!important;
  margin: 0;
  color: #5f5f5f;

 }

 .south  h1{
  font-size: 20px;
  border-radius: 10px;
padding: 6px;
  font-weight: bold!important;
  margin: 0 0 10px 0;
  background-color: #ffde06;
  color: white;
  text-align: center;
 }


 


.south  a:hover{
text-decoration: none;
  color: #5f5f5fc7;
 }


.south::after{
  content: '';
  position: absolute;
  top: 86px;
  right: -29px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 30px solid #fff5d5;
  

}

 .east  h2{
  font-size: 20px;
  border-radius: 10px;
padding: 6px;
  font-weight: bold!important;
  margin: 0;
color: #5f5f5f;

 } 


 .east  h1{
  font-size: 20px;
  border-radius: 10px;
padding: 6px;
  font-weight: bold!important;
  margin: 0 0 10px 0 ;
  text-align: center;
  background-color: #bee12d;
  color: white;


 } 

.east {
  background-color: #fff5d5;
  display: inline-block;
  padding: 14px;
  position: absolute;
  top: 485px;
  right: -3px;
  display: block;
border-radius: 10px;
width: 275px;






}

.east p{
  color: #bee12d;
  border: solid 2px #bee12d;
  font-size: 18px;
  color: #bee12d;
 margin: 0;
display: inline-block;
padding: 2px;
border-radius: 10px;
text-align: center;
margin-bottom: 5px;
font-weight: bold!important;
}


.east  a{
 font-size: 17px;
 letter-spacing: 1px;
 color: #5f5f5f;
 font-weight: bold!important;
 margin-bottom: 8px;
 border-bottom: 1px dashed #bfa69b;
 padding-bottom: 5px;
 display: block;
}

.east  a:hover{
text-decoration: none;
  color: #5f5f5fc7;
 }


.east::after{
  content: '';
  position: absolute;
  top: 86px;
  left: -29px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 30px solid #fff5d5;
}

#NAV .open {
	display: block;
}


  .close:not(:disabled):not(.disabled):focus, 
  .close:not(:disabled):not(.disabled):hover {
   
    outline: none;
}

#content .box-open {
    display: block;
    box-shadow: 0px 0px 16px #ffdd6e;
    
}

.box-open1{
  box-shadow: 0px 0px 16px #ffa8d0d1;
}

.box-open2{
  box-shadow: 0px 0px 16px #f9bd2c;
}

.box-open3{
  box-shadow: 0px 0px 16px #ffde08;
}

.box-open4{
  box-shadow: 0px 0px 16px #bee12cd6;
}

.taiwan-1{
  display: none;
}

.bb{
  display: flex;
 flex-direction: column;
 width: 36%;
}
.sss{
  display: flex;
  flex-direction: column;
  width: 53%;


 
}

.boo{
  display: flex;
 flex-direction: column;
 width: 100%;
}
.bw{
  width: 80%;
  line-height: 29px;
}

.line-1{
  height: 5px;
  width: 85%;
  border-bottom: 1px solid #ddd;
  margin: 0 auto;
  margin-top: 20px;

}
.bw p{
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  text-align: justify;
  font-weight: bold;
}




  
  .modal-lecture{
    width: 100%;
  }
  
  .modal-lecture img{
    width: 100%;
  }
  

  





.conpyright{
  width: 100%;
  background-color: #9f80ab;
  display: flex;

 
  padding: 20px 0;
  
}


.logo1{
  width: 70%;

  display: flex;
  
  justify-content: flex-end;
  align-items: center;

}


.logo1img {
  width: 90%;
}

.logo1img img{
  width: 100%;
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
 
  
}

.logo2img {
  width: 100%;
  margin-top: 15px;
}

.logo2img img{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}






.color {
 
  background-color: #48055ed6!important;
  border-color: #48055ed6!important;
}


.c1 p{
  font-weight: bold!important;
color: #ffffff;
  font-size: 18px;
  margin: 0;
  text-align: center;




}
.c2 p{
  font-weight: bold!important;
  color: #000000;
  font-size: 18px;
  margin: 0;

  
  text-align: center;
  

}

.boo-1{
  display: flex;
  flex-direction: column;
  width: 100%;
}

.t1{


  font-weight: bold!important;

 
}
.t1 p{
  text-align: center;
  margin: 0!important;
  color: rgb(71 6 93 / 78%);
  font-weight: bold!important;
  font-size: 20px;
  color: #ffffff;

}

.article{
margin-bottom:-50px;
background-color: #eaeff7;
padding-top: 20px;
}


.nav-link-1:hover{
  color: #5f5f5f;
}

.join{
  display: none;
}


.t2 p{
  text-align: center;
  margin: 0!important;
  font-size: 20px;
  font-weight: bold!important;
   text-align: center;

color: #ffffff;
 
}



  .t2{
    margin-top: -10px;
  }

  .askword-1{
   margin-top: 40px; 
  }

  .askword-1 p{
text-align: justify;
  font-size: 20px;
  color: #4e4d4d;
  font-weight: bold;
  margin-bottom: 25px;  
  }


  .askword-2 p{
    text-align: justify;
      font-size: 21px;
      color: #636363;
      font-weight: bold;
      margin-bottom: 40px;
      margin-top: 30px; 
      line-height: 1.6; 
      letter-spacing: 1px;
      }


  .askword-3{
    margin-bottom: 50px; 
   }


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

@keyframes f-up {
  0% {
      will-change: transform;
      opacity: 0;
      transform: translateY(80px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}

.f-up {
  animation-name: f-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: 0s;
}

/* ------- */
@keyframes g-up {
  0% {
      will-change: transform;
      opacity: 0;
      transform: translateY(70px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}

.g-up {
  animation-name: g-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: .1s;
}

/* ------- */

@keyframes h-up {
  0% {
      will-change: transform;
      opacity: 0;
      transform: translateY(60px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}

.h-up {
  animation-name: h-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: .2s;
}

/* ------- */
@keyframes i-up {
  0% {
      will-change: transform;
      opacity: 0;
      transform: translateY(50px);
  }
  100% {
      opacity: 1;
      transform: translateY(0px);
  }
}

.i-up {
  animation-name: i-up;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-delay: .3s;
}


.logo2 {
  width: 30%;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 30px;
/* margin-top: 20px; */
border-left: solid 1px #ddd;
margin-left: -50px;
padding: 10px;
}





@media screen and (max-width: 767px) {

  .tba {
    background-color: #fffdf0;
    padding-bottom: 30px;}
  
  .askword-2 p {
  
    font-size: 17px!important;
  }

  .askword-3{
    font-size: 17px!important; 
  }




    .askword-1 p {
      text-align: justify;
      font-size: 17px;
      margin-bottom: 10px !important}

  .dateallsvg a{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dateallsvg img {
    width: 14%;}

  .askword-1{
    margin-top: 0px; 
   }

  .abox  p{
    display: block;
    margin-bottom: 0;
    margin-left: 16px;
      
      }

  .dot {
    display: inline-block;
}

  .dot-1 {
  
    align-items: initial;
    justify-content:initial;
}

  .swiperbox1{
    display: block;
    
    }

    .swiperbox{
      display: none;
      
      }
  


  .pbox p {
    margin: 0;
    color: white;
    font-size: 16px;
    width: 125px;}

    .tabc li {
      font-weight: bold;
      font-size: 20px;
  }

  .qq p {
    text-align: center;
    margin: 0;
    font-size: 21px;}

    .qq p::before {
      content: '';
      width: 17px;
      height: 2px;
      background: #82a1cd;
      position: absolute;
      left: -2px;
      display: block;
      top: 16px;
  }

  .qq p::after {
    content: '';
    width: 17px;
    height: 2px;
    background: #82a1cd;
    position: absolute;
    right: -2px;
    display: block;
    top: 16px;
}


    .abox a {
   
      font-size: 16px;}

  .qq {
    background-color: white;
    width: 150px;
    height: 150px;}

  .swiper-pagination-bullet {
    width: 9px!important;
    height: 9px!important;
  }


  .bac-1 {

    background-size: cover;
    background-attachment: scroll;}

    .gr {
    
      padding: 20px 20px 80px 20px;
    background-size: cover;
      background-attachment: scroll;}

  .c1{
    text-align: center;
      margin-bottom: 20px;
  }


  .t2 {
    margin-right: 0px;
    margin-top: 0;
}
  .bb {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.fff{
  margin-bottom: 30px;
}
  .boo {
  
    width: 100%;
}

.sss {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-left: none;
  padding-left: 0px;}

  .contentt {
    background-color: white;
    padding: 10px 10px!important;}

  .tabc{
    border-bottom:0!important;
    margin-top: 90px !important;
    justify-content: center;
   }


  .Activity{
    flex-direction: column;
    margin: 0;
  }

  .table-1 td, .table-1 th {
    padding: 5px 3px!important;}


  .c1 p{
  
      font-size: 18px;
      margin: 0;
      text-align: center;
    
    
    }
    .c2 p{
    
  
      font-size: 18px;
      margin: 0;
      text-align: center;
      
    
    }
    
    .t1{
      border-radius: 14px;
     position: relative;
      padding: 10px;
     font-size: 19px;
    margin-right: 0px; 
     
    }

    

    .t2 p{
      text-align: center;
      margin: 0!important;
      font-size: 22px;
      font-weight: bold!important;
     
    }


    .t1 p{
      text-align: center;
      margin: 0!important;
      font-size: 22px;
      font-weight: bold!important;
    
    }



 



  .blank{
    height: 70px;
    width: 100%;  
    }


  #ICON-1 {
    display: block;}

    #ICON {
     display: none}

  .header-ph{
    display: block;
  }


.modal-dialog {
top:  5%;
display: block;
}

.fade{
  display: block
}



  .datebox{
    margin-top: 50px; 
    font-size: 16px;
    width: 100%;
   
   }

.headerbar{
display: none;
}  


.banner{
background-position: center;
height: 375px;
width: 100%;
background-image: url(../img/banner-1.jpg);

}

.date-1 .abox {
 padding: 8px;
width: 60%;}

 .date-1 {
padding: 0px;
width: 100%;
}


  .date-1 .pbox {
   width: 40%;}

   .dateallbox {
   flex-direction: column;
}

.dateallimg {
  width: 95%;
}
.dateallimg p{
  font-size: 16px;
}
.dateallimg h1 {
  font-size: 20px;

  letter-spacing: 0;
 
}

.dateallsvg {
  display: flex;
  width: 100%;
  justify-content: center;
}

.dateallsvg a + a{
  margin-left: 20px;
}

.dateallsvg svg {
  width: 50px;
  margin-top: 20px;
}

   .taiwan svg {
    width: 100%;
    padding: 10px;
    margin: 0 auto;
    padding-right: 0px;
  }

  .taiwan {
    width: 100%;
    margin: 0px auto 0 -50px;
    display: none;
}


.taiwan-1{
width: 100%;
margin: 0px auto 0 -50px;
position: relative;
display: block;
margin-bottom: 50px;

}

.conpyright {
flex-direction: column;
padding: 20px 20px 150px 20px;
}

.short{
  padding: 20px 20px 40px 20px!important; 
}


.logo1 {
  width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 30px;
margin-top: 20px;
padding-bottom: 40px;
    border-bottom: solid 1px white;}








.logo1img img {
  width: 50%;




}

.logo2img img {
  width: 100%;
  margin-top: 20px;
}

.logo1img {
  width: 100%;
  text-align: center;
}

.bw {
  width: 100%;}

.logo1img-1 img {
  width: 55%;

}


  .logo2{
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  margin: 40px 0 0 0;
  border-left: none;
}

.dateallimg2 {
  width: 65%;

}

    .logo2img {
      width: 100%;
 
  }

  .c1 p {
    width: 100%;
  display: inline;}



    .c2 p {
      width:100%;
 }

.pink p{
  background-color: #ffbedd;
}

.org p{
  background-color: #ffd05e;
}

.yellow p{
  background-color: #ffe120;
}

.green p{
  background-color: #c4e344;
}


.modal-body {
  padding:  1rem!important;
}

.phone-place p{
  margin-top: 7px!important;
font-size: 19px;
font-weight: bold;
color: white;
margin: 0;
display: inline-block;
padding: 2px;
border-radius: 10px;
text-align: center;
margin-bottom: 3px;
}




.phone-place  a{
  font-size: 18px;
  letter-spacing: 1px;
  color: #5f5f5f;
  display: block;
  margin-bottom: 6px;
  border-bottom: 1px dashed #bfa69b;
  padding-bottom: 7px;
  font-weight: 500;
}

 
 
 .phone-place  a:hover{
 text-decoration: none;
   color: #5f5f5fc7;
  }


  
 



}

@media screen and (min-width: 768px) and (max-width: 1023px) {



  .askword-1{
    margin-top: 0px; 
   }


  .modal-1::before {
    content: '';
    display: inline-block;
    height: 40%;
    margin-right: -4px;
    vertical-align: middle;
}

  .bb {

    width: 43%;
}

.abox p {
  display: block;
  margin-bottom: 0;
  margin-left: 16px;
}

.bac-1 {

  background-size: cover;
  background-attachment: scroll;}

  .gr {
  
    padding: 20px 20px 80px 20px;
  background-size: cover;
    background-attachment: scroll;}




.logo2img img {
  width: 80%!important;
  margin-top: 40px;
}

  .fff{
    margin-bottom: 10px;
  }

  .logo1img img {
    
    width: 62%;}
    
  .logo2 {
    width: 29%;
    margin-top: 60px;
    width: 100%;
    margin-left: 0px;
    border-left: none;
}

  .header-ph {
    display: block;
}

.headerbar{
  display: none;
}

.sss{
  padding-left: 10px;
  width: 90%;
  justify-content: center;
  align-items: center;
}


.dateallsvg {
  display: flex;
  width: 8%;
  justify-content: center;
  margin-top: 25px;
}

 .nonono{
   display: none!important;
 }

 .nono{
   display: block!important;
 }

  .know1box {
  
    flex-direction: column;
}

.know1 {
  width: 100%!important;
 
 
}

.knowutable {

  margin-top: 35px;
}

.knowimg {
  width: 100%!important; 
  margin-bottom: 40px;
}
  


  .timelinee ul li {
    padding-top: 30px!important;
}

.know2box {
  margin-top: 90px!important;
  flex-direction: column-reverse;
}
.knowimg2 {
  width: 100%!important;
  margin-bottom: 40px;
}

.know3 {
  width: 100%!important;
  
}


  .timelinee {
   
    padding-bottom:200px!important;
}

  .ww{
    position: initial!important;
    width: 100%!important;;
    margin-top: 10px;
  
  }
  .ww-1{
    position: initial!important;
    width: 100%!important;;
    margin-top: 10px;
  
  }

  .logo1img {
    width: 95%;
    
}

.logo2img {
  width: 100%;
  margin-top: 0px;
}

.c1 p {
display: inline;
font-size: 15px;
}

.c2 p {

  font-size: 16px;

}



  .taiwan-1 svg {
 width: 90%;

}


.taiwan {

  display: none;
}

.taiwan-1{
  display: block;

}

#content .box-open {
  display: block;
  
}

.modal-dialog {
  top: 35%;
  display: block;
}
#ICON-1 {
  display: block;}

  #ICON {
   display: none}


   .banner {
height: 350px;}

.dateallbox {
flex-direction: column;
}


.dateallsvg svg {
  width: 40px;
}


.dateallimg {
  width: 50%;
}

.datebox {
  width: 100%;
margin-top: 30px;}



.pink p{
  background-color: #ffbedd;
}

.org p{
  background-color: #ffd05e;
}

.yellow p{
  background-color: #ffe120;
}

.green p{
  background-color: #c4e344;
}

.phone-place p{

font-size: 22px;

color: white;
margin: 0;
display: inline-block;
padding: 2px;
border-radius: 10px;
text-align: center;
margin-bottom: 5px;
}



.phone-place  a{
  font-size: 19px;
  letter-spacing: 1px;
  color: #5f5f5f;
 }
 
 .phone-place  a:hover{
 text-decoration: none;
   color: #5f5f5fc7;
  }

  .modal-dialog {
    margin: -8.25rem auto!important;
}


.conpyright {
  flex-direction: column;
  padding: 30px 20px 150px 20px;
}


.logo1 {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
}


}

@media screen and (min-width: 1024px) and (max-width: 1199px){

  .abox p {
    display: block;
    margin-bottom: 0;
    margin-left: 16px;
  }

  .phone-place a {
    font-size: 19px;
    letter-spacing: 1px;
    color: #5f5f5f;
    display: block;
    margin-bottom: 6px;
    border-bottom: 1px dashed #bfa69b;
    padding-bottom: 10px;
}

  .bac-1 {

    background-size: cover;
    background-attachment: scroll;}

    .gr {
    
      padding: 20px 20px 80px 20px;
    background-size: cover;
      background-attachment: scroll;}

  .know33 {
    width: 45%!important;
    top: 189px!important;
    right: 30px!important;}

  .logo2img img {
    width: 110%;
    margin-top: 30px;}

  .t2{
    margin-top: -10px;
  }
  .sss{
    width: 100%;
  }

  .bb {
    display: flex;
    flex-direction: column;
    width: 100%;
}

  .fff{
    margin-bottom: 10px;
  }

.join{
  display: block;
  margin-top: 103px!important;
}

.taiwan-1 svg{
  width: 80%;
}

  .boo {
   
    width: 90%;
}
  .c1 p {

    font-size: 17px;
  
}
  .article{
    margin-bottom: 80px;
    }
    

  /* .east,.north,.middle,.south{
    display: none;
  }

  #content .box-open {
    display: none;
    
} */


.t2 p {
 
  margin: 10px!important;}



svg {
  width: 100%;
 
 }

 .taiwan {

  display: none;
}

.taiwan-1{
  display: block;


}


.modal-dialog {
  top: 35%;
  display: block;
}


#ICON-1 {
  display: block;}

  #ICON {
   display: none}

   .pink p{
    background-color: #ffbedd;
  }
  
  .org p{
    background-color: #ffd05e;
  }
  
  .yellow p{
    background-color: #ffe120;
  }
  
  .green p{
    background-color: #c4e344;
  }
  
  .phone-place p{
  
  font-size: 22px;
  
  color: white;
  margin: 0;
  display: inline-block;
  padding: 2px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 5px;
  }
  
  
  
  .phone-place  a{
    font-size: 19px;
    letter-spacing: 1px;
    color: #5f5f5f;
   }
   
   .phone-place  a:hover{
   text-decoration: none;
     color: #5f5f5fc7;
    }

    .modal-dialog {
      margin: -8.25rem auto!important;
  }

}




/* ---------衛教 */

.join p {
  text-align: center;
  margin: 0;
  font-size: 25px;
  background-color: #724384;
  color: white;
  border-radius: 13px;
  font-weight: bold!important;
  margin-top: -104px;
  padding: 6px;
}
.join{
  margin: 80px auto 0 auto;
}

.up{
  margin-left: 10px;
}

.ra p{
  font-size: 25px;
  text-align: center;
  color: #5e7699;
  font-weight: 600;
  margin: 0;
  ;
}

.ra-1 p{
  font-size: 25px;
  text-align: center;
  color: #5e7699;
  font-weight: 600;
  margin-bottom: 20px;
}

.know1box{
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 40px;
}


.know2box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 70px;
  position: relative;
}


.know1{

width: 50%;  
}

.know1 h1{
  font-size: 25px;
  color: #48055e;
  font-weight: bold!important;
}


.know3 h1{
  font-size: 25px;
  color: #48055e;
}

.www{
  width: 55%; 
}



.know33 {
  width: 35%;
  position: absolute;
  top: 229px;
  right: 30px;
  background-color: #ffffffc7;
  padding: 11px;
  border-radius: 14px;
}



.know2{
  margin-top: 80px;
}



.knowimg{
  width: 45%;
  overflow: hidden;
  border-radius: 14px;

  
  

}

.nono{
  display: none;
}


.nonono{
  display: block;
}

.knowimg img{
  width: 150%; 
  border-radius: 14px;
  box-shadow: 9px 10px 0 #b6b6b65e;

 
}

.knowimg2{
  width: 100%;
margin-top: 30px;

}

.knowimg2 img{
  width: 100%; 
  border-radius: 14px;
  box-shadow: 9px 10px 0 #b6b6b65e;
}


.knowbox{
  width: 100%;
}

.know{
  width: 100%;

  margin: 50px 0 50px 0;
  
}

.know{
display: flex;
padding: 13px;
justify-content: center;
 align-items: center;
flex-direction: column;
/* margin-bottom: 80px; */
background-color: #eae1ed;
}

.know h1{

  font-weight: bold!important;;
  font-size: 38px!important;
 letter-spacing: 2px;

 color: #6c377d;
 padding: 5px 0px;
 border-top: solid 2px #6c377d;
 border-bottom: solid 2px #6c377d;

 
 

 

}

.know p{
  

  font-weight: bold!important;
display: block;
  font-size: 28px!important;
 letter-spacing: 2px;
 margin: 0;
 color: #505050;



 
 
}

.knowutable {
margin-top: 10px;
font-size: 15px;
margin-bottom: 45px;
color: #505050;
}

.table-1{
  border: solid 1px rgba(170, 170, 170, 0.781);
  text-align: center;
  background-color: white;
}

.table-1 thead tr{
  background-color: #47065dd1;
  color: white;
}

.table-1 td, .table-1 th {
  font-weight: bold!important;
  vertical-align: middle!important;

}

.table-1 tbody tr:nth-child(even){
background-color:#545b621a;
}

.know1 p{
  font-weight: bold!important;
  font-size: 20px;
  text-align: justify;
  line-height: 30px;
  color: #505050;
} 

.know2 p{
  font-size: 20px;
  text-align: justify;
  line-height: 35px;
  color: #505050;
} 


.know3 p{
  font-size: 19px;
  text-align: justify;
  line-height: 32px;
  font-weight: bold!important;
  color: #505050;
} 





.bgk{
  background-color: #eaf4ee;
padding: 30px 0;
}


.knowsvg p {
  text-align: center;
  margin: 0;
  font-size: 19px;
  margin-bottom: 20px;
  font-weight: bold!important;


}



.knowsvg svg{
  fill: white;
  width: 200px;
  height: 100px;
 display: flex;
 justify-content: center;
 align-items: center;


 
}




.allknowsvg{
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: space-between;

}

.knowsvg{
  width: 210px;
  height: 210px;
  background-color: #82a1cd;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 10px;

}

.knowsvg:hover .ss {

  animation: ss .6s linear infinite  alternate;}

  .hight{
    margin-bottom: 200px!important;
  }
  .other p{
    text-align: center;
    color: tomato;
    font-size: 25px;
    margin-top: 20px;
  }


  .sshow{
    display:none;
  }  

  .ww{
    position: absolute;
    top: 60px;
    left: 200px;
    width: 150%;
    font-weight: bold!important;
    font-size: 19px;
    color: #505050;
  }

  .ww-1{
    position: absolute;
    top: 60px;
   right: 200px;
    width: 150%;
    font-size: 19px;
    font-weight: bold!important;
    color: #505050;
  }

  
  .discovery{
    position: relative;
  }
  .ra{
    margin: 20px 0 30px 0;
  }
  
  .pta{
    display: none;
  }

  .bground label{
    margin:0 !important;
    font-size: 17px;
    
  }


@keyframes ss
{
    0%{ transform: rotate(-10deg); }
   100%{ transform: rotate(10deg); } 
}



@media (min-width: 768px)and (max-width: 1023px) {

.c1{
  text-align: center;
}

  .phone-place a {
    font-size: 19px;
    letter-spacing: 1px;
    color: #5f5f5f;
    display: block;
    margin-bottom: 6px;
    border-bottom: 1px dashed #bfa69b;
    padding-bottom: 10px;
}

.join{
  display: block;
 margin-top: 103px;
}

  .date-1 .pbox {
    width: 38%;}

  .pta{
    display: block;
  }

  .ptaa{
    display: none;
  }


  .knowsvg {
 
    margin-top: 20px;
}

.bgk {
  background-color: #d7eadf83;
  padding: 20px 0;
}


.allknowsvg {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

}


@media (max-width: 767px) {





  .oneone-1 a {
    box-shadow: inset 2px 2px 2px 0px rgb(255 255 255 / 50%), 7px 7px 20px 0px rgb(0 0 0 / 10%), 4px 4px 5px 0px rgb(0 0 0 / 10%);
    background-color: #b4c7e1;
    padding: 5px;
    border-radius: 50%;
    font-size: 17px;
    width: 40px;
    height: 40px;
    line-height: 32px;
    text-align: center;
    color: white!important;
    margin: 8px;
    cursor: pointer;
    
}

  .nnn p {
    font-size: 21px;
 
}

  .map {
    width: 75px;
    margin: 0 auto;
}

  .pta{
    display: block;
  }

  .ptaa{
    display: none;
  }

  .nono{
    display: block;
  }

  .nonono{
    display: none;
  }


  .ww{
    position: initial;
    width: 100%;
    margin-top: 10px;
    font-size: 17px;
  
  }
  .ww-1{
    position: initial;
    width: 100%;
    margin-top: 10px;
    font-size: 17px;
  
  }

  .know h1 {
    font-size: 26px!important;
    letter-spacing: 1px;
   
}

.know p {
  display: block;
  font-size: 21px!important;}

  .join p {
  
    font-size: 19px;
    margin-top: -50px;
 
  
  }

  .join {
  
width: 90%;
margin: 30px auto 10px auto;
 
  
  }

  .know1box{
    margin-top: 0;
  }

  .know {
    width: 100%;
   
    margin: 30px 0 0 0;
}
.know1box {
flex-direction: column;
}

.knowimg {
  width: 100%;
  margin-top: 30px;
}

.logo2img-1{
  width: 60%;
  margin: 6px auto 25px auto;
}

.know1 {
  width: 100%;
  margin-top: 40px;
}
.know3{
  width: 100%;
}

.knowimg2 {
  width: 100%;
margin-bottom: 40px;}

.know2box {
  display: flex;
flex-direction: column-reverse;}

  .disappear{
   display: none; 
  }

  .sshow{
    display: block;
  }

  .knowutable {
    /* display: block;
    overflow-x: auto; */
    /* white-space: nowrap; */
  }

  .knowsvg{
   flex-direction: column;
   
  
  }

  .allknowsvg  .knowsvg + .knowsvg{
   margin-top: 25px; 
  }

 

  .allknowsvg {
    display: flex;
    width: 100%;
    padding: 0;
    justify-content: center;
  }


 .knowsvg p {
  font-size: 25px;
}


.other p{
  text-align: center;
  color: tomato;
  font-size: 20px;
  margin-top: 20px;
}


.taiwan-1 svg{
  width: 100%;
}





}




/* --------- 問卷*/

.bground{
  background-image: url(../img/dot-1-01.jpg);

background-attachment: fixed;
background-size: contain;

}

.ttab{
  background-color: #fff8d9;
  border-radius: 14px;
  padding: 10px 10px ;
  ;
}


.ba {
  width: 100%;
  /* background-color: rgb(255 255 255 / 70%); */
  border-radius: 13px;
}

.a{
  padding-top: 100px;
}






.word h1 {
  font-size: 20px;
  margin: 0;
  
  display: inline;
}

.word {
  font-weight: 500!important;
  display: flex;
  border: 1px solid #aaaa;
  width: 100%;
  color: white;
  background-color: #9f80ab!important;}









table tr {
  margin-top: 20px;
}



.borderbox {

  border: solid 2px #aaa3;
  padding-bottom: 180px;

  background-color: #fff;
  padding-bottom: 50px!important;
  border-radius: 17px;
box-shadow: 0px 0px 5px rgba(170, 170, 170, 0.786);
}

.bg {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-0 {
  background-color: rgb(255 255 255 / 20%);
}

.bg .btn0 {
  outline: none;
  border: none;
}

.bg .btn0 {
  width: 280px;
  height: 50px;
  background-color: #7f548e;
  border-radius: 13px;
  margin: 20px 0;
  color: white;
  font-size: 23px;
  font-weight:600!important;
  text-decoration: none;
}

.bg .btn0:hover {
  background-color: #7f548ec8;
}






.font {
  display: flex;
  justify-content: space-between;
}

.title {
  width: 100%;
  color: #7f548e;
  font-weight: bold;
}

.title p {
  text-align: center;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* rwd table css */

.rwd-table {
  overflow: hidden;
}

.rwd-table {
  min-width: 100%;
  border: 1px solid #aaaaaa91!important;
  padding: 10px;
}




.rwd-table td {
  display: block;
  padding: 13px 13px 13px 13px;
  width: 211px;
  height: 50px;
}

.rwd-table td:after {
  content: attr(data-th);
  display: inline-block;
}

.rwd-table tr {
  
  display: inline-block;
  width: 100%;
}



input[type="text"] {
  border: none;
  width: 366px;
}

.l input[type="text"] {
  border: none;
  width: 366px;
}

.border {
  border-bottom: solid 2px #aaaa;
  border-top: solid 2px #aaaa;
}

input[type="text"]:focus {
  outline: none;
}

.font h1 {
  font-size: 21px;
  margin-bottom: 30px;
  font-weight: bold;
}

.font-2 h1 {
  font-size: 18px;
  color: rgba(255, 0, 0, 0.781);
  margin-bottom: 0;
  margin-top: 5px;
  margin-bottom: 5px;
}

.font-1 h1 {
  font-size: 23px;
  margin-top: 50px;
  margin-bottom: 30px;
  font-weight: bold;
}

.cn {
  text-align: center;
}

@media (min-width: 583px) {
  .rwd-table td:after {
      display: none;
  }
  .rwd-table th
 {
      display: table-cell;
      border: 1px solid #aaaaaa91;
      padding: 11px;
      background-color: white;
  }


  .rwd-table td {
    display: table-cell;
    border: 1px solid #aaaaaa91;
    padding: 5px;
    background-color: white;
}
  .rwd-table tr {
      margin-bottom: 0px;
      display: table-row;
  }
  .header-img {
      width: 240px;
      height: 70px;
      line-height: 70px;
      padding: 0 10px;
  }


}


/* -------------------------------------------------------四 */



iframe {
  margin-top: 20px;
  width: 700px;
  height: 400px;
  border: solid 5px #fff;
  box-shadow: 4px 5px 16px #797878aa;
}







.new {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.new-box {
  width: 318px;
  background-color: #ffffff;
  border-radius: 13px;
  transition: .9s;
  overflow: hidden!important;
}

.new-box:hover {
  box-shadow: 3px 3px 4px rgba(82, 82, 82, 0.438);
}

.new-box:hover .img-text p::after {
  transform: translateY(0px);
}

.new .img {
  width: 318px;
  background-color: #fff;
  border-radius: 13px;
  padding: 10px;
}

.new .img img {
  width: 100%;
  border-radius: 13px;
}

.img-text {
  width: 100%;
  margin: 0;
  font-size: 20px;
}

.img-text p {
  padding: 10px;
  font-size: 17px;
  position: relative;
  margin-top: -10px!important;
  margin-bottom: 20px;
}

.img-text p::after {
  content: '';
  width: 100%;
  height: 17px;
  background-color: #ff6863;
  position: absolute;
  top: 84px;
  left: 0;
  transition: .8s;
  transform: translateY(7px);
}

.img-text a {
  color: #000;
  text-decoration: none;
}

.img-text:hover a {
  color: #000;
  text-decoration: none;
}










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

@media (min-width: 769px)and (max-width: 1023px) {
  .bg-1 .p2 {
      color: #e1345d;
      font-size: 45px;
  }
 
  .big-box .sbox {
      margin: 5px;
  }
  .img-box {
      width: 630px;
  }
  .container,
  .container-md,
  .container-sm {
      max-width: 720px!important;
  }
}

@media (min-width: 768px)and (max-width: 1199px) {

 .p{
   margin: 0!important;
 }

}

@media (max-width: 768px) {



  
  .rwd-table td {
      display: block;
  }
  .rwd-table td {
      width: 100%;
      height: 50px;
  }

  .font {
      display: flex;
      flex-wrap: wrap;
  }
 
  .rwd-table tr .no{
      display: none;
  }

  .rwd-table th, .rwd-table td {
   border: none;
   padding: 11px;
  }
  

}

@media (max-width: 767px) {

  .p{
    margin: 0!important;
  }

  .join{
    display: block;
  }

  .know1 h1 {
 text-align: center;
 font-size: 27px;
 margin-bottom: 20px;
}

.know1 p {
  font-weight: bold!important;
  font-size: 19px;}


  .knowsvg p {
  margin-top: -25px;
    font-size: 20px;
  }

  
  .knowutable {
    margin-top: 10px;
    font-size: 16px;
    margin-bottom: 25px;
    margin-top: 30px;
}

  .font-2 p {
      display: block;
  }

  table tr {
      margin-top: 0px;
  }

  .word h1 {
      font-size: 20px;}
 

      .bg .btn0 {
          width: 190px;
          height: 50px;
          
          border-radius: 13px;
          color: white;
          font-size: 20px;
          text-decoration: none;
      
      }

 
 
  iframe {
      margin-top: 20px;
      width: 100%;
      height: 250px;
      box-shadow: 2px 2px 6px #aaaaaa8a;
  }
 
 
  input[type="text"] {
      border: none;
      width: 205px;
  }
 
  .title p {
      text-align: center;
      font-size: 22px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 224px;
      margin: 0 auto;
      line-height: 1.3;
  }
 

  






  .rwd-table tr .pd {
      font-weight: normal;
      padding: 5px 13px 20px 13px;
      height: 50px;
  }

 
  



}

@media (max-width: 320px) {

  .tba {
   
    padding-bottom: 0px;
}

  input[type="text"] {
      border: none;
      width: 160px;
  }
  .bg .btn0 {
      width: 200px;
      height: 45px;
     
      border-radius: 13px;
      color: white;
      font-size: 20px;
      text-decoration: none;
  }

  .title p {
      text-align: center;
      font-size: 24px;}


      .bground label {
          /* display: inline!important; */
          font-size: 14px;
      }


      .banner {
        background-position: center;
        height: 305px}

        .side-menu li a {
     font-size: 18px;}
      
     

      .word h1 {
          font-size: 18px;}
}

@media (min-width: 1700px) {
  .logo1img img{
margin-left: 138px;
}

.logo1img {
  width: 100%;
}

.logo1img img {
  width: 25%;
  margin: 0 auto;
}

.logo2img  {
  width: 70%;
  margin: 0 auto;
}


.logo2img img {
  width: 90%;
  margin: 0 auto;
}

.t1{


  font-weight: bold!important;
 
 
}
}

@media (min-width: 1035px){
  .conpyright {
    padding-bottom: 10px!important;
}

}
@media (min-width: 1024px)and (max-width: 1299px) {


  .know3 p {
    margin: 0;
  }
  .timelinee {
   
    padding-bottom: 170px!important;
}

.logo2 {
  width: 29%;}

.know2box {

  margin-top: 0px;
  margin-bottom: 70px;
}

  .logo1img {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.logo2img {
  width: 100%;
}

.conpyright {
  padding-bottom: 110px;

}

.ww{
  position: initial!important;
  width: 100%!important;
  margin-top: 10px;

}
.ww-1{
  position: initial!important;
  width: 100%!important;
  margin-top: 10px

}





}

@media (min-width: 1300px){

  .boxs{

    min-height: 220px;  
  }



}

@media (min-width: 1500px)and (max-width: 1699px) {
 
  .banner{
    height: 540px;
  }
}


@media (min-width: 1700px)and (max-width: 1800px) {
 
  .banner{
    height: 570px;
  }
}


@media (min-width: 1900px)and (max-width: 2099px) {
 
  .banner{
    height: 650px;
  }
}




@media (min-width: 2100px)and (max-width: 2299px) {
 
  .banner{
    height: 708px;
  }
}



@media (min-width: 2300px)and (max-width: 2499px) {
 
  .banner{
    height: 850px;
  }
}


@media (min-width: 2500px)and (max-width: 3000px) {
 
  .banner{
    height: 860px;
  }
}


/* ================timeline */



.timelinee {
  font: normal 16px/1.5 'Titillium Web', sans-serif;
  background-color: transparent; 
  width: 100%;
  padding-top: 20px;
  padding-bottom: 50px;

}


.timelinee ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;

  background: #48055e;
}
.timelinee ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%) rotate(45deg);
  width: 20px;
  height: 20px;
  z-index: 1;
  background: rgb(190, 188, 188);
}
.timelinee ul li div {
  position: relative;
  bottom: 0;
 width: 180px;
 height: 180px;
 
}
.timelinee ul li div time {
  position: absolute;
  background: #f5af19;
  width: 100px;
  height: 30px;
  top: -15px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
}
.timelinee ul li div div {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.timelinee ul li div div p {
  text-align: center;
}
.timelinee ul li div .discovery {
  margin-right: 10px;
}
.timelinee ul li:nth-of-type(odd) > div {
  left: 75px;
  top: -20px;
}
.timelinee ul li:nth-of-type(even) > div {
  left: -255px;
  bottom: 40px;
}

.timelinee ul li div {

  opacity: 1;
  transition: all 0.5s ease-in-out;
}
/* .timelinee ul li:nth-of-type(odd) div {
  transform: translate3d(100px, -10px, 0) rotate(10deg);
}
.timelinee ul li:nth-of-type(even) div {
  transform: translate3d(-100px, -10px, 0) rotate(10deg);
} */
.timelinee ul li.in-view div {
  transform: none;
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 800px) {


  .timelinee ul li {
  
    padding-top: 100px;
 
  }

  .timelinee ul li div .discovery {
    margin: 35px auto 0 auto;

}

.ee{
  margin: 00px auto 0 auto!important; 
}

.ra {
  margin: 20px 0 10px 0;
}

.timelinee ul li div .discoveryy {
  margin: 35px auto 0 auto;
  
}

  .timelinee ul li div div p {
    text-align: center;
    margin-bottom: 30px;
}

  .timelinee ul li div {
    width: 250px;
    flex-direction: column;
  }
  .timelinee ul li div div {
    width: 200px;
    height: 200px;
    margin: 10px;
  }
  .timelinee ul li:nth-of-type(even) > div {
    left: -289px;
  }

  .timelinee ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 90px;
  }

  .timelinee ul li:nth-of-type(odd) > div {
    left: 45px;
}


}
@media screen  and (max-width: 600px) {
 
/*    background-image: url(/image/106.jpg);
    height:100vh;
    background-attachment:fixed;
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;*/

  .timelinee ul li:nth-of-type(even) > div {
    left: -289px;
    top: -90px;
  }

  .timelinee ul li::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 145px;
  }

  .timelinee ul li:nth-of-type(odd) > div {
    left: 45px;
    top: -90px;
}

  .timelinee {
    
   /* background-image: linear-gradient(45deg, #ffdde2 0%, #fdcfd5c0 100%); */
  
   
    background-repeat: no-repeat;
    background-attachment: scroll;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;

    width: 100%;
  
  }

  .timelinee ul li {
    margin-left: 20px;
  }
  .timelinee ul li div {
    width: calc(100vw - 91px);
  }
  .timelinee ul li:nth-of-type(even) > div {
    left: 45px;
  }

}

@media screen  and (min-width: 1199px) {

  
.modal-lecture{
  width: 700px;
}

.modal-lecture img{
  width: 100%;
}

.modal-box-lecture-1{
  width: 700px!important;
}

.modal-dialog-1{
  max-width: 700px!important;
}
}


@media screen  and (max-width: 1199px) {
.modal-l1::before {
  content: '';
  display: inline-block;;
margin-right: 0px;
height: 10%;

}

.modal-dialog-1{
  width: 95%;
}

}