body, a, span, div ,span {
    /*
    font-family: "Microsoft JhengHei","新細明體", "PMingLiU", "細明體", "MingLiU", "標楷體", "DFKai-sb", "serif";
    */
}


/* reset */
a {
    color: #000000;
}

a:hover {
    text-decoration: none;
}


/* menu */
#navbar2SupportedContent ul {
    overflow: hidden; /* 超過範圍隱藏 */
    white-space: nowrap; /* 不斷行 */
}
#navbar2SupportedContent ul li{display: inline; /* 水平排列 */}
#navbar2SupportedContent ul li a {
    display: inline-block;  /* 水平內顯示為區塊 */
    text-decoration:none;
}


/* banner */
.title-banner2 {
  background-color:#ffffff;
  width: 100%;
  height: 150px;
  overflow: hidden;
  text-align: center;
}
.title-banner2 .img {
  width: 1440px;
  margin:0 calc(50% - 960px);
}



.vertical-divider {
	padding: 20px;
}



#omb_login {
    display: none;
}

#cart {
    color: black;
}

#cartnum {
    color: white;
    background-color: cornflowerblue;
    vertical-align: top;
}

#top-menu {
    color: black;
	text-align: center;
}

#top-menu .navbar-brand {
    height: auto;
}

#top-menu .navbar-brand img {
	padding: 5px;
}

#top-menu .nav-link {
    font-size: 1.063rem;
	padding: 10px 15px;
    color: black;
	font-weight: 900;
}

#search {
    width: 200px;
    float: right;
    padding: 5px;
    border-radius: 4px;
    border-right: 0px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}


#myCarousel {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}


#sub_menu col {
	padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}


.headline {
	font-size: 1.2rem;
}



.title-banner {
	text-align: center;
}

.title-banner img {
	
}



#news {
	padding-top: 50px;
	padding-bottom: 40px;
    /*
	background-color: #EFEEEB;
    */
    background-color: #EFEEEB;
}

.news-divider {
	border-right: 1px solid #CDCDCB;
	padding-bottom: 30px;
}

.news-block {
	padding: 0px 20px;
    max-width: 450px;
}

.news-title {
	height: 50px;
	line-height: 50px;
}

.news-title2 {
	font-size: 1.2rem;
	font-weight: 900;
}

.news-image {
	padding-top: 20px;
    
    overflow: hidden;
}

.news-image img {
    transform: scale(1,1);
    transition: all 1s ease-out;
	padding: 10px;
}

.news-image img:hover{
    transform: scale(1.1,1.1);
    -webkit-filter: opacity(70%); /* Safari */
    filter: opacity(70%);
}




.news-text {
	padding-top: 20px;
}

#latest_news {
	font-size: 0.875rem;
	color: #000000;
}


#about_haps {
	font-size: 0.875rem;
	color: #00468D;
}


.news-title3 {
	font-size: 1.5rem;
	font-weight: 900;
}


.news-title4 {
	font-size: 1.2rem;
	color: #005CBA;
	font-weight: 900;
	padding-bottom: 10px;
}

.news-title5 {
	font-size: 1rem;
	font-weight: 900;
	padding-top: 10px;
	padding-bottom: 20px;
}

.news-title6 {
	font-size: 1.2rem;
	font-weight: 900;
	color: #FF4000;
}


.news-title7 {
	font-size: 1.2rem;
	font-weight: 900;
	color: #005CBA;
}

.news-title8 {
	font-size: 1.5rem;
	font-weight: 900;
	color: #005CBA;
}


.news-btn-danger {
    font-size: 1.2rem;
    padding: .5rem 2rem;
    line-height: 2;
    border-radius: .1rem;
    
    border-top: 1px solid #cc0066;
    border-left: 1px solid #cc0066;
    border-right: 1px solid #cc0066;
    /*
    border-top: 1px solid #005CBA;
    border-left: 1px solid #005CBA;
    border-right: 1px solid #005CBA;
    */
    /*
    border-top: 1px solid #bd2130;
    border-left: 1px solid #bd2130;
    border-right: 1px solid #bd2130;
    */    
}

.news-btn-default {
    font-size: 1.2rem;
    padding: .5rem 2rem;
    line-height: 2;
    border-radius: .1rem;
   
    color: #cc0066;
    border-top: 1px solid #cc0066;
    border-left: 1px solid #cc0066;
    border-right: 1px solid #cc0066;
    /*
    color: #005CBA;
    border-top: 1px solid #005CBA;
    border-left: 1px solid #005CBA;
    border-right: 1px solid #005CBA;
    */
    /*
    color: #bd2130;
    border-top: 1px solid #bd2130;
    border-left: 1px solid #bd2130;
    border-right: 1px solid #bd2130;
    */
    /*
    color: gainsboro;
    border-top: 1px solid gainsboro;
    border-left: 1px solid gainsboro;
    border-right: 1px solid gainsboro;
    */
}

.btn-primary {
    /*
    background-color: #153184;
    */
}

.btn-danger {
    background-color: #cc0066;
}

.btn-danger a:hover {
    background-color: red;
}


#news_tab a:hover{
    color: red;
    /*
    color: #153184;
    */
}




#view_div {
	padding-top: 30px;
	padding-bottom: 40px;
	font-size: 1.5rem;
	text-align: center;
	font-weight: 900;
    color: #cc0066;
}

#view-title {
	font-size: 1.75rem;
    /*
    color: #bd2130;
    */
    /*
	color: #005CBA;
    */
	font-weight: 900;
	padding-top: 20px;
    padding-bottom: 10px;
}

#view-date {
	font-size: 1rem;
    float: right;
    padding-bottom: 40px;
}

#view-html {
    /*
    border-top: 1px solid gray;
    */
	padding-top:0px;
	padding-bottom:60px;
}






#courses-title {
	font-size: 1.5rem;
	color: #005CBA;
	font-weight: 900;
	padding: 50px 0px;
}

#courses-html {
	padding-top:30px;
	padding-bottom:60px;
}

#course-intro a {
    color: blue;
}


#contact-info {
    padding: 20px;
}

#contact-info img {
	padding: 8px;
}

#follow_us {
	padding: 20px 0px;
}

#contact-qrcode {
	float: left;
}

#contact-qrcode img {
	max-width: 150px;
	padding-top: 10px;
}

.contact-qrcode-div {
	padding: 10px;
	float: left;
}



.about-html {
	padding-top: 20px;
	padding-bottom: 50px;
	line-height: 200%;
}

.img-shadow {
	box-shadow: 3px 3px 30px rgba(0,0,0,0.2);
}


#service .service-div {
    max-width: 350px;
    min-width: 240px;
	margin-bottom: 80px;
	box-shadow: 3px 3px 50px rgba(0,0,0,0.2);
}

.service-div .contact_btn {
    text-align: center;
    padding: 0px 20px 30px 20px;
}

.contact_btn button {
	border: 2px solid #005CBA;
    border-radius: 28px;
    padding: 12px 40px;
	text-align: center;
	font-size: 900;
	color: #005CBA;
	cursor: pointer;
    background-color: #FFFFFF;
}


#service .service-title {
	padding: 20px 30px 10px 30px;
	font-weight: 900;
}

#service .service-text {
	padding: 10px 30px 20px 30px;
	min-height: 300px;
	
}


#service_div{
	padding-top: 30px;
	padding-bottom: 40px;
	font-size: 1.5rem;
	text-align: center;
	font-weight: 900;
	color: #005CBA;	
}


#service a:hover {
	text-decoration:none;
}





.center-block {
	/*
    float: none;
    display: block;
    margin: 0 auto;
	*/
	
  width: auto;
  display: table;
  margin-left: auto;
  margin-right: auto;	
}


#more_service {
	padding: 50px;
}

#more_service_btn {
	border: 2px solid #005CBA;
    border-radius: 28px;
    padding: 12px 40px;
	text-align: center;
	color: #005CBA;
	cursor: pointer;
	max-width: 200px;
}



#more_contact_btn {
	font-size: 1rem;
	border: 2px solid #ffffff;
    border-radius: 28px;
    padding: 12px 30px;
	margin-top: 40px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	max-width: 220px;
}



.team-title1 {
	font-size: 1.5rem;
	font-weight: 900;
    padding: 10px;
    background-color: #DCDCDC;
}

.team-title2 {
	font-size: 1.5rem;
	font-weight: 900;
	color: #005CBA;
    padding: 10px;
}

.team-title3 {
	font-size: 1.5rem;
	font-weight: 900;
    padding: 10px;
}

.team-title-block {
    padding: 10px 0px;
}


.team-subtitle {
    width: 100%;
	font-size: 1.2rem;
	font-weight: 900;
    background-color: #f7f9f9;
    padding: 10px;
}

.team-text {
    padding: 10px 10px 10px 30px;    
}




#slogan {
	background-color: #005CBA;
}

#slogan-right {
	font-size: 1rem;
	background-color: #005CBA;
	color: #ffffff;
	font-weight: 900;
	text-align: center;
	padding-bottom: 30px;
}

#slogan-right img {
    padding-top: 50px;
}

#slogan .up_quotes {
	font-size: 3.2rem;
	font-family: "Arial";
}

#slogan .down_quotes {
	font-size: 3.2rem;
	font-family: "Arial";
}




#activities {
	padding-top: 30px;
	padding-bottom: 80px;
}

#activities a:hover {
	text-decoration:none;	
}


#activities-area {
	padding-top: 30px;
	padding-bottom: 80px;
}

.activities-block {
	padding: 30px;
}

.activities-image {
    overflow: hidden;
}

.activities-image img {
    transform: scale(1,1);
    transition: all 1s ease-out;
	padding: 10px;
}

.activities-image img:hover{
    transform: scale(1.1,1.1);
    -webkit-filter: opacity(70%); /* Safari */
    filter: opacity(70%);
}



.form-control {
	padding: 0.750rem;
	margin: 15px;
	color: #gray;
}

.form-control .btn-lg {
	margin: 15px;
}

#captcha_refresh {
	padding-right: 50px;
}



#bottom {
	background-color: #333333;
}


#bottom-menu {
    border-top: 2px solid lightgray;
    font-size: 0.875rem;
    padding-top: 20px;
    margin-top: 30px;
    margin-bottom: 60px;
}

#bottom-menu a {
    font-size: 0.875rem;
}

#bottom-menu .stand {
    border-right: 1px solid gray;
}


#bottom .submenu {
 	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}



#bottom-right {
	padding-top: 50px;
	padding-left: 50px;
    text-align: left;
	font-size: 0.875rem;
 	background-color: #333333;   
}


#bottom-right .main {
 	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}


#bottom-right .main a {
	color: white;
}

#bottom-right a {
	white-space: nowrap;
	display: inline;
	color: #9DA2B0;
}



#bottom-left div {
 	padding-top: 0.3rem;
	padding-bottom: 0.3rem;	
}


#bottom-left {
	padding-top: 50px;
}

#bottom-left {
	padding-left: 60px;
    border-right: 1px solid #5B5B5B;
	color: #9DA2B0;
	font-size: 0.75rem;
}

#bottom-left .main {
	color: white;
	font-size: 0.875rem;
}



#footer {
	border-top: 1px solid #5B5B5B;
	background-color: #333333;
}


#copyright {
	float: right;
	font-size: 0.75rem;
    color: #ffffff;
	height: 55px;
	line-height: 55px;
}


.error {
    font-size: 0.9rem;
    color: red;
    margin-left: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
}



.navbar {
    padding: 10px !important;
}


.img-responsive {
    margin:0 auto;
}



.carousel-caption {
  font-size: 2.625rem;
  position: absolute;
  bottom: 50%;
  right: 15%;
  z-index: 20;
  color: white;
  text-align: right;
  text-shadow: 1px 2px 5px rgba(0,0,0,1);
  animation:movedown 4s;
  -webkit-animation:movedown 4s; /*Safari and Chrome*/
}

.carousel-button {
  font-size: 1.25rem;
  position: absolute;
  bottom: 52%;
  right: 15%;
  z-index: 20;
  color: white;
  text-shadow: 1px 2px 5px rgba(0,0,0,1);
  animation:moveleft 4s;
  -webkit-animation:moveleft 4s; /*Safari and Chrome*/    
}

.carousel-button div {
   border: 1px solid white;
   border-radius: 5px;
   padding: 5px 15px;
}

.carousel-button div:hover {
   border: 1px solid rgb(50%,50%,50%);
   background-color: gray;
    cursor: pointer;
}

.carousel-content {
  font-size: 1.25rem;
  position: absolute;
  bottom: 44%;
  right: 15%;
  z-index: 20;
  color: white;
  text-shadow: 1px 2px 5px rgba(0,0,0,1);
  animation:moveup 4s;
  -webkit-animation:moveup 4s; /*Safari and Chrome*/    
}



/* left */
.carousel-caption2 {
  font-size: 2.625rem;
  position: absolute;
  bottom: 50%;
padding-top: 20px;
padding-bottom: 20px;  
  left: 15%;
  z-index: 20;
  color: white;
  text-align: left;
  text-shadow: 1px 2px 5px rgba(0,0,0,1);
  animation:movedown 4s;
  -webkit-animation:movedown 4s; /*Safari and Chrome*/    
}

.carousel-button2 {
  font-size: 1.25rem;
  position: absolute;
  bottom: 52%;
  left: 15%;
  z-index: 20;
  color: white;
  text-shadow: 1px 2px 5px rgba(0,0,0,1);
  animation:moveright 4s;
  -webkit-animation:moveright 4s; /*Safari and Chrome*/    
}

.carousel-button2 div {
   border: 1px solid white;
   border-radius: 5px;
   padding: 5px 15px;
}

.carousel-button2 div:hover {
    cursor: pointer;
   border: 1px solid rgb(50%,50%,50%);
   background-color: gray;
}

.carousel-content2 {
  font-size: 1.25rem;
  position: absolute;
  bottom: 44%;
  left: 15%;
  z-index: 20;
  color: white;
  text-shadow: 1px 2px 5px rgba(0,0,0,1);
  animation:moveup 4s;
  -webkit-animation:moveup 4s; /*Safari and Chrome*/    
}



.blurdown {
  animation:blurdown 4s;
  -webkit-animation:blurdown 4s; /*Safari and Chrome*/    
}

@keyframes blurdown { 
  from {opacity:0.8; filter:blur(4px);}
  to {opacity:1; filter:blur(0px);}
}

@-webkit-keyframes blurdown { /*Safari and Chrome*/
  from {opacity:0.8; filter:blur(4px);}
  to {opacity:1; filter:blur(0px);}
}

@keyframes movedown {
  from {opacity:0; bottom:80%;}
  to {opacity:1; bottom:50%;}
}

@-webkit-keyframes movedown { /*Safari and Chrome*/
  from {opacity:0; bottom:80%;}
  to {opacity:1; bottom:50%;}
}

@keyframes moveright {
  from {opacity:0; left:0%;}
  to {opacity:1; left:15%;}
}

@-webkit-keyframes moveright { /*Safari and Chrome*/
  from {opacity:0; left:0%;}
  to {opacity:1; left:15%;}
}

@keyframes moveleft {
  from {opacity:0; right:0%;}
  to {opacity:1; right:15%;}
}

@-webkit-keyframes moveleft { /*Safari and Chrome*/
  from {opacity:0; right:0%;}
  to {opacity:1; right:15%;}
}

@keyframes moveup {
  from {opacity:0; bottom:10%;}
  to {opacity:1; bottom:44%;}
}
@-webkit-keyframes moveup { /*Safari and Chrome*/
  from {opacity:0; bottom:10%;}
  to {opacity:1; bottom:44%;}
}



/*-------------- max-width -----------------*/


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

	.carousel-caption {
		display: none;
	}
	.carousel-caption2 {
		display: none;
	}
	.carousel-button {
		display: none;
	}
	.carousel-content {
		display: none;
	}
	.carousel-button2 {
		display: none;
	}
	.carousel-content2 {
		display: none;
	}

	#logo2_2 {
		padding-top: 0px;
	}
	
	.title-banner {
		
	}
    
    #bottom-left {
        padding-left: 20px;
    }
    #bottom-right {
        padding-left: 10px;
    }
    
    .vertical-divider {
        padding: 0px;  
    }
	

	#more_contact_btn {

	}
}

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

	.carousel-caption {
		display: none;
	}
	.carousel-caption2 {
		display: none;
	}
	.carousel-button {
		display: none;
	}
	.carousel-content {
		display: none;
	}
	.carousel-button2 {
		display: none;
	}
	.carousel-content2 {
		display: none;
	}

	.title-banner {
        
	}    
}

@media screen and (max-width: 1200px) {
	.carousel-caption {
		font-size: 2.625rem;
	}
	.carousel-caption2 {
		font-size: 2.625rem;
	}
	.carousel-button {
		font-size: 1.25rem;
	}
	.carousel-content {
		font-size: 1.25rem;
	}
	.carousel-button2 {
		font-size: 1.25rem;
	}
	.carousel-content2 {
		font-size: 1.25rem;
	}	
}