@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
html{height: 100%;}
body {
	padding: 0;
	margin: 0;
	background: #fff;	
	color: #212529;
	line-height: 28px;
	font-size: 15px;
	font-family: "Microsoft JhengHei","微軟正黑體","Arial", sans-serif!important;
    height: 100%;
    width: 100%;
}
body a {
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
	text-decoration: none;
}
body a:hover {
	text-decoration: none;
}
body a:focus, a:hover {
	text-decoration: none;
}
input[type="button"], input[type="submit"] {
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
	font-weight:normal;
    line-height: 1.2;
}
h1, h2, h3, h4{
    font-weight: bolder;
}
h2{font-size: 5.8vmin;}
h3{font-size: 4.4vmin;}
h4{font-size: 3vmin;}
p {
	margin: 0;
	color:#777;
	letter-spacing:1px;
	line-height:1.5em;
	font-size:15px;}
.row{
	margin:0px;
	padding:0px;
}
i{font-weight: 900;}
ul {
	margin: 0;
	padding: 0;
}
label {
	margin: 0;
}
a{
	color:#000;
}
a:focus, a:hover {
	text-decoration: none;
	outline: none;
}
a:focus, a:hover {    
    text-decoration:none;
}
.hide{display: none;}
img{width: 100%;}
section{padding-bottom: 4rem;padding-top: 4rem;}

.scroll-to-top {
  z-index: 1029;
  right: 1rem;
  bottom: 3.3rem;
  display: none;
}

.scroll-to-top a {
  width: 3.1rem;
  height: 3.1rem;
  background-color: rgba(33, 37, 41, 0.5);
  line-height: 3.1rem;
}
/*-- //Reset-Code --*/
.bg-blue{background-color: #cce5e4;}
.bg-green{background-color: #c7eae1;}
.bg-green2{background-color: #586B34;}
.bg-green3{background-color: #E4E28F;}
.bg-red{background-color: #d61c0f;}
.bg-pink{background-color: #e30082;}
.bg-g{background-color: #ccc ;}
.bg-o{background-color: #f9c270 ;}
.bg-bk{background-color: #000 ;}
.bg-yellow{background-color: #fee28a ;}
.bg-gray{background-color: #dcdcdc;}
.bg-purple{background-color: #c6d6ee;}


.f-blue{color: #3057a5;}
.f-pink{color: #e05c6f;}
.f-white{color: #FFFFFF;}
.f-green{color: #6E7455;}
.f-yellow{color: #C7A869!important;}
.f-or{color: #ff683b!important;}

.bg_banner{
	background-image: url("../images/banner.png");
	background-position:center!important;
	background-size: cover!important;
    background-repeat: repeat;
}
.bg_th1{
	width: 100%;
	background-image: url("../images/pt1-bg.png");
	background-position:center;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th1-2{
	width: 100%;
	background-image: url("../images/pt1-bgline.png");
	background-position:center;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	-ms-background-size: contain;
	-moz-background-size: contain;
	-webkit-background-size: contain;
}
.bg_th2{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt2-bg.png");
	background-position:center;	
	background-repeat: no-repeat;
    background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th3{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt3-bg.png");
	background-position:center;	
	background-repeat: no-repeat;
    background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

.bg_th4{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt4-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th5{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt5-bg.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th6{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt5-bg-2.png");
	background-position:center top;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}
.bg_th8{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt7-bg.png");
	background-position:center;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

.bg_yellow{
	z-index: -1;
	width: 100%;
	background-image: url("../images/bg-yellow.png");
	background-position:center;	
	background-repeat: repeat;
	background-attachment: fixed;
	background-size: auto;
	-ms-background-size: auto;
	-moz-background-size: auto;
	-webkit-background-size: auto;
}


/*BTN AREA*/
.topline{width:70px;}
/*BTNN*/
.hoverbig img{
	filter:drop-shadow(2px 2px 2px #303030);
}
.hoverbig:hover img{
	transform: scale(1.1, 1.1);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
filter:drop-shadow(0px 0px 0px #303030);
}

.btngo{
	font-size: 2.4vmin;
	line-height: 2;
    width: 30%;
	font-weight: bolder;
	color: #fff;
	background-color: #f16723;
	padding: 10px 0;
    margin-top: 25px;
	box-shadow: 6px 6px 0 rgba(100,100,100,.8);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
    display: inline-block;
}
.btngo:hover{
	color: #ffe05f;
	box-shadow: 2px 2px 0 rgba(100,100,100,.8);
    transform: scale(1.1, 1.1);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
}
/*#BTNN*/

/*top-menu*/
.bg-topmenubg-topmenu{background-color: #4E7CA3 !important;}
.topmenu{padding-top:0.3em;padding-bottom: 0.3em; }	
.topmenu .tag_clr{padding: 3px; background-color: #fff;color: #313663;border-radius:1rem!important;margin-bottom: 0.5em;display: inline-block;}
.topmenu ul{display: inline-block;width: 100%;}
.topmenu ul li{display: inline-block;text-align: center;width: calc( calc( 100% / 6) - 5px);position: relative;}
.topmenu ul li:hover .tag_clr{background-color: #3E3A39;color: #FFFF00;}
.topmenu ul li:hover h5{color: #FFFF00;}


.top,.bottom{position:fixed;width:100%;z-index:9999}
.top{top:0;left: 0;}.bottom{bottom:0;left: 0;}
.hide{display:none!important}

.topmenu{width:100%!important;}
.topmenu table{text-align:center;}
.bg-topmenu{background-color: #172b42 !important;}
.topmenu a{display: block;color:#c22b30;font-size:1.2rem; line-height:2.2rem;text-align:center;font-weight: bold;text-shadow: 0 0 5px #fff;}
.topmenu a.m1{background-color: #8cc2de;}
.topmenu a.m2{background-color: #fcdeb2;}
.topmenu a.m3{background-color: #db6163;}
.topmenu a.m4{background-color: #f7cfd1;}
.topmenu a.m5{background-color: #bae0d9;}
.topmenu a.m6{background-color: #abcf21;}
.topmenu a p{color:#000;border-radius: 20px;padding: 5px 10px; font-size:0.8rem;background: #fff; line-height:1.1rem;text-align:center;display: table;margin:0 auto;}
.topmenu a:hover div{color:#FFF;background-color: #EB7624;}
.ttittle,.ttittle2 {
-webkit-box-shadow: 0px  2px 4px #2D2D2D;
-moz-box-shadow: 0px 2px 4px #2D2D2D;
box-shadow: 0px  2px 4px #2D2D2D;
}

.ttittle th img{
    display:block; margin:auto;
}
.ttittle2 th img{
    display:block; margin:auto;
}

/****top-menu-MEDIA******/
@media screen and (max-width: 991px) {
.topmenu a {
    font-size: 1.2rem;
    line-height: 1.4rem;
    padding: 5px 0;
}
.ttittle span{display: block;}
.topmenu br{display: none;}	

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

.topmenu{padding-top:0.5em;padding-bottom: 0.5em; }	


.topmenu ul li {
    width: calc( calc( 100% / 3) - 5px);
}
.topmenu ul li p{display: none!important;}
.topmenu ul li h5,topmenu ul li p{display: inline-block;}
.topmenu {padding-left: -15px;padding-right: -15px!important;}
.topmenu .container{padding-left: -15px;padding-right: -15px;}
	
}@media screen and (max-width: 400px) {

.top{top:0;left: 0;}.bottom{bottom:0;left: 0;}

}
/*#top-menu*/
/*PART1*/
.linebox{
    border-radius: 50%;
    display: block;
    background-color: #f57b3c;
    width: 170px;
    height: 170px;
    line-height: 170px;
    vertical-align:  middle;
    text-align: center;
    filter:drop-shadow(5px 5px 5px rgba(0,0,0,.5));
    margin: 0 auto;
    
}
.linebox h2{
    color: #fff;
    font-weight: bolder;
    font-size: 3.2vmin;
    display: block;line-height: 1.1;
    padding-top:2rem;
}
.linebox h2 p{
    color: #fff;
    font-weight: bold;
    font-size: 4vmin;
    display: block;
    line-height: 1.1;
    margin-top: 1%;
}
.linebox:hover{
    background-color: #6e58a3;
    filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5));
    transform: scale(1.1, 1.1);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
}
.linebox:hover h2,
.linebox:hover h2 p{
    color: #ffeb59;
}
/*PART2*/

/*#swiper*/
.swiper-wrapper{
    padding-bottom: 5vmin;
    
}
.videobox{
    position: absolute;
    left: 0;
    bottom:-4.5vmin;
    color: #6e58a3;
    width: 100%;
    font-size: 4vmin;
    font-weight: bolder;
}
.swiper-container {
      width: 100%;
      height: 100%;
    }

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

      /* 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-pagination-bullet {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      margin: 0 3px;
      font-size: 12px;
      color: #000;
      opacity: 1;
      background: rgba(0, 0, 0, 0.2);
    }

.swiper-pagination-bullet-active {
      color: #fff;
      background: #6e58a3;
    }
.swiper-pagination {
    position: relative; 
    width: 100%;
    margin-top:1vmin;
}
/*#swiper*/


/*PART3*/

    
/*選項卡*/
#part3 a:hover,#part3 a:focus{
		    outline: none;
		    text-decoration: none;
		}
#part3 .tab{ text-align: left; }
#part3 .tab .nav-tabs{
/*		    display: inline-block;*/
		    position: relative;
		    border-bottom: none;
		}
#part3 .tab .nav-tabs li{
		    margin: 0;
            display: inline-block;
/*            width: 25%;*/
		}
#part3 .tab .nav-tabs li a {
    display: block;
    background: #3eb5b1;
    font-size: 3.2vmin;
    line-height: 1.4;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    border-radius: 0;
    border-top-right-radius: 20px;
    border: none;
    border-top-left-radius: 20px;
/*    border-bottom: 2px solid #fff;*/
/*    padding-top: 15%;*/
    margin-right: 0;
    overflow: hidden;
    z-index: 1;
    position: relative;
    transition: all 0.3s ease 0s;
		}

#part3 .tab .nav-tabs li a.active,
#part3 .tab .nav-tabs li a:hover{
		    border: none;
     background: #018F8A;    
		}
#part3 .tab .nav-tabs li.active a{
/*		    border-bottom: 2px solid #29335c;*/
		}
#part3 .tab-content{
    padding: 1.5% 0;    
}
#part3 .tab-content h2{
    text-align: center;
    margin-bottom: 2%;
    padding-bottom: 1.5%;
    font-size: 7.8vmin; 
    color: #caefed;
    border-bottom: 1px solid #d2d2d2;
}


 /*##選項卡*/


h2.pt3-title{
    display: block;
    border-top-right-radius: 55px;
    background-color:#3eb5b1 ;
    color: #fff;
    padding: 25% 5% 8% 5%;
    text-align: left;
    font-size: 5vmin;
    letter-spacing: 3px;
}
.pt3-con{
    text-align: center;
    color: #6d6d6d;}
.pt3-con dt{
    color: #3eb5b1;
    font-size: 3vmin;
    letter-spacing: 2px;
    font-weight: bolder;
    line-height: 1.6;
    margin-bottom: 5px;
}
.pt3-con dd{
    color: #6d6d6d;
    font-size: 2vmin;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: left;
    font-weight: bolder;
    -ms-flex-pack: justify !important;
  justify-content: space-around!important;
    display: -ms-flexbox !important;
  display: flex !important;
}
.pt3-con span{
   display: block;
   width: 40%;
text-align: left;    
}



h2.con-title{
    color: #6e58a3;  line-height: 1.5;  
}
h2.con-title span{
    color: #f57b3c;    
}
h4.con-sec{
    color: #6d6d6d;
}
.school{margin-top: 3%;}
.school li{
    display: inline-block;
    border-radius: 50px;
    width: 16%;
    margin: 1.5% 1.5%;
}
.school li a{
    display: block;
    border-radius: 30px;
    padding: 10px 16px;
    font-size: 2.8vmin;
    color: #fff;
    line-height: 1.5;
    font-weight: bolder;    
}
.school li a:hover{
    background-color: #32186F;
    transform: scale(1.1, 1.1);
	transition: 0.3s all;
	-webkit-transition: 0.3s all;
	-moz-transition: 0.3s all;
	-o-transition: 0.3s all;
	-ms-transition: 0.3s all;
}
.school li small{
    font-size: 70%;
    font-weight: 400;
    display: block;
    line-height: 1;
}
.school li:nth-child(odd){
    background-color: #6e58a3;
}

.school li:nth-child(even){
    background-color: #fca383;
}
.school li:nth-child(odd),
.school li:nth-child(even){
    filter:drop-shadow(2px 2px 4px #303030);
}
#part5 h2.con-title,
#part7 h2.con-title{
    color: #172b42;  
    display: inline-block;
}
#part5 h2.con-title span,
#part7 h2.con-title span{
    color: #c43c24;    
}
#part5 .embed-responsive{
    margin-top: 23%;
    margin-bottom: 23%;
}
#part5 article{
   display: table;
}

.pt6-title{
    position: absolute;
    top: -95px;;
    left: 0;
    width: 100%;
    
}
#part6 article{
    padding-top: 4%;
}
.student_box{
    border-radius: 30px;
    background-color: #fff;
    padding: 15px;
    padding: 2% 5% 5% 5%;
    min-height: 40vmin;
}
.student_box table th:nth-child(1){ 
   vertical-align:bottom;
   width: 60%;
}

.student_box table h3 small {
    font-size: 85%;
    font-weight: bolder!important;
}
.student_box table h6 {
    font-size: 2.6vmin;
    font-weight: bolder;
    color: #172b42;
}
.student_box p{
    font-size: 2.2vmin;
    line-height: 1.4;
    margin-top: 15px;
}
.student_titilebox{
    position: absolute;
    top: 4%;
    left: 0;
    width: 64%;
}

.student_titilebox h3 {
    font-size: 3.5vmin;
    color: #c43c24;
display: inline-table;
text-align: left;
}
.student_titilebox img.pic1{
    width: 38%;
    display: inline-block;
}
/*
.pic1{
    position: absolute;
    left:10%;
    top: 0;
    width: 35%;
}
*/

#part7 img{
   margin-bottom: 7%;    
}

#part7 h3{position: absolute;
top: 78%;font-size: 3.8vmin;
left: 0;color: #172b42;
width: 100%;}
#part7 p{
    line-height: 1.2;
    display: block;
    width: 60%;
    margin-left: 20%;
}


/*footerstyle*/
.bg-footer{
background-color: #172b42;    
}
#footerstyle{
	padding: 4em 0;	
	color: #f6efdc;
	font-size: 16px;
    line-height: 1;
	text-align:left;}
footer h4{
    line-height: 1.6;
    font-size: 2.6vmin;
    margin-bottom: 2vmin;}
footer a{
    color: rgba(246,239,220,0.6);
    display: block;letter-spacing: 2px;
    font-size: 1.6vmin;
    line-height: 1.4;
}
footer a:hover{
    color: rgba(246,239,220,0.8);
    font-weight: bolder;
}
#copyright{
text-align: center;
padding: 1% 0;
background-color: #222;
}
#copyright p{
color:rgba(255,255,255,0.4); 
    font-size: 12px;}
@media screen and (max-width: 1199px) {

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

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

}@media screen and (max-width: 575px) {	
#footerstyle{
	padding: 2em 0;
    text-align: center;}  
footer h4{
    font-size: 5vmin;
    display: inline-block;
margin-bottom: 0;}    
footer a{
    font-size: 5vmin;
    display: inline-block;
    margin-left: 10px;
    color: rgba(246,239,220,.9);
    }    
#copyright{
padding: 4% 0 16% 0;}  

hr {
    margin-top: .5rem;
    margin-bottom: .5rem;
    border-top: 1px solid rgba(255,255,255,.5);
}
}	
/*end_footerstyle*/

/*---------------------------media------------------------------*/
@media screen and (max-width: 1400px) {



}/*992~1200*/
@media screen and (max-width: 1199px) {
section {
    padding-bottom: 3rem;
    padding-top: 3rem;
}
.pt3-con dl{
    margin-left: 12%;
}
.pt3-con dt{
    font-size: 4vmin;
    text-align: left;    
    margin-bottom: 8px;
}
.pt3-con dd{
    font-size: 2.6vmin;
  justify-content: space-between!important;
}
.pt3-con span{
   width: 50%;
}


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

.linebox {
    width: 140px;
    height: 140px;
}
.school li a {  
    padding: 10px 16px;
    font-size: 2vmin;}    
    
}@media screen and (max-width: 767px) {
section {
    padding-bottom: 2rem;
    padding-top: 2rem;
}
.bg_th1-2{
	width: 100%;
	background-image: url("../images/pt1-bg-square.png");
}
.school li {
    width: 25%;
}

/*576以上*/
}@media screen and (min-width: 576px) {
.type_ph{display: none!important;}
	
}/*手機板575*/
@media screen and (max-width: 575px) {
.linebox h2 p{
    font-size: 5vmin;
}
.videobox {
    bottom: -8.5vmin;
    font-size: 7vmin;
}    
.swiper-wrapper {
    padding-bottom: 10vmin;
}    
h2.pt3-title {
    font-size: 6vmin;}
#part3 .tab-content h2 {
    margin-bottom: 4%;
     padding-top: 4.5%;
     padding-bottom: 4.5%;}   
#part3 .tab-content{padding-bottom: 10%;    }    
.pt3-con dl{
    margin-left: 12%;
}
.pt3-con dt{
    font-size: 6vmin;
    margin-bottom: 8px;
}
.pt3-con dd{
    font-size: 4vmin;
}

    
 
h2.con-title{
    font-size: 7.2vmin;line-height: 1.2;
}   
h4 {
    font-size: 4vmin;
}
.school li a {
    padding: 8px 16px;
    font-size: 3.6vmin;
}   
#part5 .embed-responsive {
    margin-top: 30%;
    margin-bottom: 40%;
    border: 10px solid #fff;  
    box-shadow: 0px 0px 20px #222;
} 
.pt6-title {
    top: -80px;
    left: 10%;
    width: 80%;
}  
#part6 article {
    padding-top: 12%;
}   
.student_box{
    margin-bottom: 5%;
    min-height: 76vmin;
    }    
.student_titilebox h3 {
    font-size: 7.5vmin;  
}    
.student_box table h6 {
    font-size: 5.6vmin;
}

.student_box p {
    font-size: 3.5vmin;
    text-align: left;
}    
.btngo {
    font-size: 4.4vmin;
    line-height: 1.7;
    width: 50%;}
.bg_th8{
	z-index: -1;
	width: 100%;
	background-image: url("../images/pt7-bg.png");
	background-position:center;	
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-ms-background-size: cover;
	-moz-background-size: cover;
	-webkit-background-size: cover;
}

.bg_th8:before {    
content: ' ';    
position: fixed;    
z-index: -1;    
top: 0;    
right: 0;    
bottom: 0;    
left: 0;    
background: url("../images/pt7-bg.png") center 0 no-repeat;    
background-size: cover;
}
    
section{padding-bottom: 3rem;padding-top: 3rem;}	
.type_pc{display: none!important;}
.container:not(.nolr){
    padding-left: 0!important;
    padding-right: 0!important;}	


/*PART1*/    

.linebox {
    width: 135px;
    height: 135px;
    margin: 22px auto; 
    line-height: 135px;
    } 
.linebox h2 {   
    font-size: 6.2vmin;padding-top: 1.5rem;}
 h2.pt3-title {
    border-top-right-radius: 20px;
    padding: 20% 7% 10% 8%;
    font-size: 5.8vmin;
}
#part7 h3 {
    font-size: 6.2vmin;}    
#part7 p {
    width: 94%;
    margin-left: 3%;
}    
    
    
}/*END(max-width: 575px)*/
@media screen and (max-width: 472px) {	
.pt3-con dl{
    margin-left: 7%;
}
.pt3-con dt{
    font-size: 6vmin;
    margin-bottom: 8px;
}
.pt3-con dd{
    font-size: 4.5vmin;
}
#part3 .tab .nav-tabs li a {
    font-size: 5.8vmin;
    line-height: 1.2;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;}
}/*END(max-width: 472px)*/
@media screen and (max-width: 420px) {


}