﻿@charset "utf-8";

html, body { height:100%;}

a, a:hover, a:active, a:visited, a:link { color: #15780e;  cursor:pointer;}
a { color: #15780e;  cursor:pointer;}
ul { list-style:none;}
.table { font-size:1.8em;}
.clear {
	clear: both;
}
/*.warp {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background-color: #ddd;
  border: 1px solid #333;
  padding: 20px;
  text-align: center;
}}
*/

b, strong {   font-weight: bold;   font-size: 110%;   color: #3c763d;}


.modal-content {   background-color: #fff;}
button {border: none; text-align: center;  }
.showimg { -webkit-backface-visibility: hidden; height: 100%;  left: 0;  outline: none;
    position: fixed;   -webkit-tap-highlight-color: transparent;     top: 0;     -ms-touch-action: manipulation;
    touch-action: manipulation;  transform: translateZ(0);  width: 100%;  z-index: 99992;
	background:#eee;
}
.showimg  img { margin:0 auto;}
.carousel-control.right  { background:none;}
.carousel-control.left  { background:none;}

/* ================= 文字 ================= */
.Black{ color:#000; }
.grey{color: #AAA;}
.main-title {color:#000; font-size:20px; font-weight: bold;}
.main-text {color:#000; font-size:15px; line-height: 30px;}
.orang {color: #F60; font-size:17px; font-weight: bold;}
.h4, h4 {  font-weight: bold;}

.carousel-container {z-index: 10000; }
/* ================= 按鈕 ================= */
.more-bt{
	color: #FFF;
	font-size: 16px;
	letter-spacing: 2px;
	background: #00895F;
	padding: 8px 50px;
}
.more-bt a{ color:#FFF ; }
.more-bt a:hover{ color:#E5FF99 ; }
.more-bt a:active{ color:#E5FF99 ; }

/* ================= 麵包屑 ================= */

.sitemap{ font-size:15px; color: #000;}
.sitemap span{ margin-right: 10px;color: #999;}
.sitemap span::after{ margin-left: 10px;content:"/";color: #999;}
.sitemap span a{ color: #999;}

.main-glory {height: 300px;  margin-bottom:20px; display: block !important; overflow: hidden; }


/* ================= TOP Area ================= */

.top-header{ width:100%;/* position: absolute; z-index:99; height: 80px;*/}
.top-logo { /*background: #00895F;*/ text-align:center; }
.mobile-logo {display: none;}
.pg-inner {   position: relative;    width: 100%;    overflow: hidden;}

/* ================= Main Content Area ================= */

.main-news {padding:150px 0 0px 0;}
.main-note-title ul, .main-news ul,.main-glory ul{padding:0px;}
.main-note-title { margin-top:40px;}
.main-note-title ul li, .etest ul li{ display: inline-block; vertical-align: top;}
.main-note-title ul li:nth-child(1){ margin-right: 10px;}
.main-note-title span, .main-note-title h2, .etest span, .etest h2{ color:#000; font-weight: bold;}
.main-note-title span{ font-size: 16px; line-height: 20px;}
.main-note-title h2{ font-size: 60px; line-height: 62px; padding:0; margin: 0;}

.main-news ul{ margin: 20px 0 0 0;}
.main-news ul li { /*border-top: solid 1px #CCC ; */}
.main-news ul li:last-child{border-bottom: solid 1px #CCC ; }
.main-news ul li p{ display:inline-block; font-size:26px; vertical-align: top;}
.main-news-l { text-align:center; color:#00885F;}
.Inside-container h3 {color: #F60; font-size:20px; font-weight: bold;}
.glory-container{ height: auto; margin: 50px 0 60px 0;  background:#ECE9E2;padding: 45px 0 50px 0;}
.main-glory ul li{font-size: 25px;padding: 0 0 10px 50px;margin-bottom: 10px;border-bottom: dotted 1px #999;
line-height:28px;background-image: url(../img/arrow-left2.png);background-repeat: no-repeat;background-position: 10px 0px;
}
.main-more { margin-top: 40px; text-align:center;}
.multiedia-container {margin: 40px 0;  }
.multiedia-title { text-align:center; margin-bottom:30px;}
.multiedia-title h3, .multiedia-title p {  color: #333; margin: 0; }
.multiedia-title h3 { font-size:36px; letter-spacing: 4px; font-weight: bold;}
.multiedia-title p { font-size:28px; padding: 5px 0 15px 0;}
.multiedia-title span{ border-top: solid 1px #333; padding: 0px 30px; }
.multiedia-list { padding: 40px 15px 0 30px !important}
[role=tabpanel]  ul li { border-top: solid 1px #CCC ; padding:5px 0;}

.etest1 { background: #1978B1; color: #FFF; text-align: center; padding: 20px 0;}
.etest1 h2{ font-size: 20px; line-height: 40px; padding:0; margin: 0;font-weight: bold; }
.etest1 span{ font-size: 18px; line-height: 40px; font-weight: bold;}
.etest1 a{color: #FFF;}
.etest1 a:hover{color: #CCC;}
.etest2 { background: #DEEEF7; color: #1978B1; text-align: center; padding: 25px 0;}
.etest2 h2{ font-size: 20px; line-height: 40px; padding:0; margin: 0;font-weight: bold; }
.etest2 span{ font-size: 18px; line-height: 40px; font-weight: bold;}
.etest2 p{ padding: 0 40px;}
.etest2 a{color: #1978B1;}
.tab-content {background:#fff;}
.tab-content ol li {line-height:1.8em;}

.pagination { bottom:0; position:absolute;}
/* ================= 首頁聯絡我們 Area ================= */
.main-contact { background: url(../img/Main-Contact-BG.jpg) no-repeat ;text-align:center; padding-top: 20px; }
.main-contact h1, .main-contact h2 {color:#FFF; }
.main-contact h1 {font-size:36px; font-weight: bold;}
.main-contact h2 {font-size:20px;}
.main-contact2 { background: #FFF; padding: 25px 0;  max-width: 800px; margin: 15px auto 0 auto; }
.main-contact2 p{ color: #000; font-size: 15px; margin-top: 25px;}

/* ================= 內頁 ================= */
.Top-banner { width:100%;}
.Top-banner img{ width:100%;}
.Inside-writing h2{ color:#00895F; font-size: 24px; font-weight: bold; line-height: 30px; background: url(../img/arrow-right.png) no-repeat ; border-bottom: solid 1px #999; padding: 0 0 10px 30px; margin-bottom:30px;}

.aside-widget { margin-top:20px;}

[aria-hidden=true]{display:none;}
[role=tab][aria-selected=true]{ /*padding: 15px 0;   background-color: #eee;   box-shadow: 0 0 0 1px #ddd;   top: 15px;   transition: top .2s; */}
[role=tab][aria-selected=false]{ /*background: white;*/}
[role=tabpanel] {clear:both; padding-top:.2em;}
button.accordion-headings[aria-selected=true]:before {content:" - ";}
button.accordion-headings[aria-selected=false]:before {content:" + ";}
.accordion-headings {display:block;}
.fancyTab { width:25%;}
.fancybox-slide--iframe .fancybox-content {
	/*width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
	margin: 0;*/
  background: #191919;
}

h1, h2, h3, h4, h5, h6 {
  font-size:3em;
  font-weight:700;
}

/*--------------------------------------------------------------
# Departments Tabs Section
--------------------------------------------------------------*/
.departments-tabs .section-label {
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 0;
  display: block;
}

.departments-tabs .medical-specialties {
  margin-top: 3rem;
}

.departments-tabs .specialty-navigation {
  margin-bottom: 2rem;
}

.departments-tabs .specialty-navigation .nav-pills {
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
}

@media (max-width: 768px) {
  .departments-tabs .specialty-navigation .nav-pills {
    flex-direction: column;
    gap: 0.5rem;
  }
}

.departments-tabs .specialty-navigation .department-tab {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  border: none;
  border-radius: 0;
  color: var(--default-color);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 2rem 1.5rem;
  position: relative;
  transition: all 0.3s ease;
  flex: 1;
  text-align: center;
}

@media (max-width: 992px) {
  .departments-tabs .specialty-navigation .department-tab {
    font-size: 1rem;
    padding: 1.5rem 1rem;
  }
}

@media (max-width: 768px) {
  .departments-tabs .specialty-navigation .department-tab {
    width: 100%;
    margin-bottom: 0;
  }
}

.departments-tabs .specialty-navigation .department-tab:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.departments-tabs .specialty-navigation .department-tab.active {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.departments-tabs .specialty-navigation .department-tab.active::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 12px solid var(--accent-color);
}

@media (max-width: 768px) {
  .departments-tabs .specialty-navigation .department-tab.active::after {
    display: none;
  }
}

.departments-tabs .department-content {
  background-color: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 3rem;
  margin-top: 1.5rem;
}

@media (max-width: 768px) {
  .departments-tabs .department-content {
    padding: 2rem 1.5rem;
  }
}

.departments-tabs .department-layout {
  align-items: stretch;
}

.departments-tabs .department-image {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.departments-tabs .department-image img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.departments-tabs .department-image img:hover {
  transform: scale(1.05);
}

@media (max-width: 992px) {
  .departments-tabs .department-image {
    height: 300px;
    margin-bottom: 2rem;
  }
}

.departments-tabs .department-info {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 992px) {
  .departments-tabs .department-info {
    height: auto;
  }
}

.departments-tabs .department-title {
  color: var(--heading-color);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .departments-tabs .department-title {
    font-size: 1.8rem;
  }
}

.departments-tabs .department-description {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.departments-tabs .service-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding: 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.departments-tabs .service-item:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  transform: translateY(-2px);
}

.departments-tabs .service-icon {
  background-color: var(--accent-color);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.departments-tabs .service-icon i {
  color: var(--contrast-color);
  font-size: 1.5rem;
}

.departments-tabs .service-content {
  flex: 1;
}

.departments-tabs .service-content h4 {
  color: var(--heading-color);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.departments-tabs .service-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}

.departments-tabs .tab-pane {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.departments-tabs .tab-pane.show.active {
  opacity: 1;
  transform: translateY(0);
}
.arrow-down {
	display:none;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 22px solid #8f2828;
  /*border-top: 22px solid #ddd;*/
  position: absolute;
  top: -1px;
  left: calc(50% - 20px);
}

.arrow-down-inner {
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
 /* border-top: 12px solid #fff;*/
  position: absolute;
  top: -22px;
  left: -18px;
}

.fancyTab.active .arrow-down {
  display: block;
}

@media (max-width: 1200px) {
  
  .fancyTab .fa {
  	font-size: 36px;
  }
  
  .fancyTab .hidden-xs {
    font-size:22px;
	}
		
}
	
	
@media (max-width: 992px) {
    
  .fancyTab .fa {
  	font-size: 33px;
  }
    
  .fancyTab .hidden-xs {
  	font-size:18px;
    font-weight:normal;
  }
		
}
	
	
@media (max-width: 768px) {
    
  .fancyTab > a {
    font-size:18px;
  }
    
  .nav > li.fancyTab > a {
    padding:15px 0;
    margin-bottom:inherit;
  }
    
  .fancyTab .fa {
    font-size:30px;
  }
    
  .nav-tabs > li.fancyTab > a {
    border-right:1px solid transparent;
    padding-bottom:0;
  }
    
  .fancyTab.active .fa {
    color: #333;
	}
		
}

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
	h1:after {content:" DESKTOP MODE";}
	.accordion-headings {display:none;}
}

@media only screen and (max-width: 767px) {
    /* phones */
	h1:after {content:" MOBILE MODE";}
	#tabs {display:none;}
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
    /* portrait phones */
		h1:after {content:" LANDSCAPE MOBILE MODE";}
	.accordion-headings {display:none;}
	#tabs {display:block;}
}

.s-img { -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width:100%; 
	margin:0 auto;}
.s-img li>img { display: block;   float: left;  margin:10px 0px; /* width: 33%;*/}
.portfolio-items { display: flex; flex-wrap: wrap;}
.item {
    flex: 1 1 33.33%;
    background: #eee;
    margin: 1em auto;
}
.clean-list li {
    line-height: 23px;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 25px;
}
.clean-list li:hover {
    display:block;
    background-color: #E8E8E8;
    line-height: 23px;
    margin-bottom: 14px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 25px;
}

.equipt-title {
	color: #060;
	font-size: 20px;
	font-weight: bold;
	padding-left: 60px;
	line-height: 40px;
	margin-bottom: 20px;
	background-color: #E8E8E8;
	background-image: url(../img/Icon-photo.png);
	background-repeat: no-repeat;
	background-position: 8px center;
}

.input-group>.form-control  {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 50% !important;
    margin-bottom: 0;
}


label { margin-bottom: 0px; }

/* ===============科系表格  ===================== */ 

.tablex table tbody tr td {
	font-family: "微軟正黑體", "新細明體";
}

.tablex table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	border-spacing: 10px 10px;
    border-collapse: separate;
}
.tablex table>tbody>tr>td, .tablex table>tbody>tr>th, .tablex table>tfoot>tr>td, .tablex table>tfoot>tr>th,.tablex table>thead>tr>td, .tablex table>thead>tr>th {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	border: 1px solid #ddd;
	margin: 5px;
}
.tablex table>thead>tr>th {
	vertical-align: bottom;
	border-bottom: 2px solid #ddd
}
.tablex table>caption+thead>tr:first-child>td, .tablex table>caption+thead>tr:first-child>th, .tablex table>colgroup+thead>tr:first-child>td, .tablex table>colgroup+thead>tr:first-child>th, .tablex table>thead:first-child>tr:first-child>td, .tablex table>thead:first-child>tr:first-child>th {
	border-top: 0
}
.tablex table>tbody+tbody {
	border: 2px solid #ddd
		margin: 5px;

}
.table>thead>tr {background: #a94442; color:#fff; text-align:center;}
.table>thead>tr>th {text-align:center;}



/* ================= Footer Area ================= */
 
footer{ background: #FFF; padding: 25px 0; }
.footer-logo{
	
}
.footer-copyright{
	color: #000;
	line-height:30px;
}


.foot-text { margin-top:13px; text-align:left;}


/* ================= Mobile Area ================= */

@media (min-width:0px)and (max-width:399px) {
.main-contact2 { width: 90%; height: 310px}
.main-contact { height: 470px;}

}



@media (min-width:400px)and (max-width:499px) {
.main-contact2 { width: 75%; height: 310px}
.main-contact { height: 470px;}
}

@media (min-width:500px)and (max-width:699px) {
.main-contact2 { width: 90%; height: 300px;}
.main-contact { height: 470px;}
}

@media (min-width:700px)and (max-width:999px) {
.main-contact2 { width: 90%; height: 200px;}
.main-contact { height: 380px;}
}







@media (min-width:1000px)and (max-width:1099px) {
.Black { 
	font-size:14px;
	line-height:16px !important;
	}
.top-logo { width: 200px; padding: 10px 0; margin-left: 5px;}
.top-menu { background: #00895F;}
.main-news ul li p{ line-height: 22px;}
.main-news-l {padding: 10px 0 0 5px; width: 13%; }
.main-news-r {padding: 10px 0 0 20px; width: 87%; }	

}

@media (min-width:1100px)and (max-width:2500px) {
.Black { 
	font-size:16px;
	}
.top-logo { width: 200px; padding: 0px 0;}
.main-news ul li p{ /*line-height: 30px;*/}
.main-news-l { width: 16%; }
.main-news-r { width: 84%;  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;   }
.top-menu { background: #00895F;}
.footer-copyright{
	font-size:16px;
}
}


	
@media (min-width:0px)and (max-width:999px) {
.top-logo { display: none;}
.mobile-logo { display:block; margin: 5px auto 0 auto; width: 80px; z-index: 20000 !important;}
.Mobile-menu { margin-left:10px; z-index: 999;}
.sitemap{ margin: 0 0 10px 15px;}
.main-news { margin-bottom: 30px;} 
.main-news-l {padding: 14px 0 15px 20px; width: 28%;}
.main-news-r {padding: 14px 0 15px 0; width: 68%;}
.main-note-title { margin-left: 20px;}
.Top-banner img{ margin-top: 60px !important;}
.Inside-container {  margin: 0 0 20px 0;  padding: 0 20px;}
.top-header{ background: #00895F !important; height: 60px; position: fixed;}
}

@media (max-width: 2500px) and (min-width: 1000px)
.top-menu {
    background: #00895F;
}

@media (min-width:1300px)and (max-width:2500px) {


.grey{font-size: 13px;margin-right: 15px !important;}
.Mobile-menu { display: none;}
.sitemap{ margin: 0 0 5px 0; }
.main-contact2 { height: 180px}
.main-contact { height: 390px;}
/*.Inside-container { margin: 30px 0; */}
}


@media (min-width:700px)and (max-width:799px) {
.top-header{ height: 113px; margin-top:0px;background:none;}

}

@media (min-width:0px)and (max-width:800px) {
.top-header{ background: #00895F !important; height: 60px; position: fixed;}
}



@media (min-width:0px)and (max-width:1099px) {
.footer-copyright{
	font-size:14px;
}
}
