@charset "utf-8";
/* CSS Document */

/*-----css基本設定---------*/
*, body, h1, h2, h3, h4, h5, h6, a, p, select  {
	font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Arial, Helvetica;
}
/*文字反選顏色*/
::selection, ::-moz-selection {
	background: #e78d09;
	color: #ffffff;
}

/*a:focus {
	background-color: #F7AD00 !important;
}*/
a {
	transition: .5s;
}
/*a:hover {
	filter:brightness(110%);
	transition: .5s;
}*/
/*a:focus img {
	-webkit-filter:saturate(0.2);
}*/


/*--行動版隱藏--*/
.mob {
	display: none !important;
}


html {
	height: 100%;
	margin: 0;
}
body {
	margin: 0;
	min-height: 100%;
}


/*清除格式*/
.CleanFormat { 
	clear: both;
}
article::after, section::after, header::after {
	content: "";
	display: block;
	clear: both;
}

/*分隔線*/
.Dividers {
	margin: 10px auto;
	width: 100%;
	height: 1px;
	border-bottom: 1px dotted #373b80;
}

/*------------------------WebStart----------------------*/
#wrap {
	display: block;
	position: relative;
}



/*-------------------------Header-----------------------*/
header {
    display: block;
    position: fixed;
    z-index: 50;
    font-size: 0;
    top: 1vw;
	left: 2.5%;
    transition: .5s;

	padding: 0.5vw 1vw;
	width: calc(95% - 2vw);
	background: #fff;
	border-radius: 0.5vw;
}
/*---------------------------Menu-----------------------*/
#Logo {
    display: inline-block;
	vertical-align: middle;
	width: 10%;
}

#Logo a {
    display: block;
}

#Logo img, #ExoCoBioLogo img {
    display: block;
    width: 100%;
	height: auto;
    margin: 0 auto;
}

#ExoCoBioLogo {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1%;
    width: 5%;
	border-left: 1px solid #000;
    padding-left: 1%;
}

nav {
    display: inline-block;
    vertical-align: middle;
	width: calc(83% - 1px);
}

nav > ul {
    font-size: 0;
    display: block;
    width: 100%;
    text-align: right;
}

nav > ul > li {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3vw;
	position: relative;
}

nav > ul > li a {
    color: #000;
}

nav > ul > li.active > a  {
    color: #4E86B4;
	font-weight: bold;
}

nav > ul > li.active a div {
	border-bottom: 0.1vw solid #4E86B4;
}

nav > ul > li a:hover {
    color: #4E86B4;
}

nav > ul > li a div {
    font-size: 1vw;
    line-height: 1.5vw;
}


nav > ul > li:nth-child(5) {
    width: 1vw;
}

nav img {
    display: block;
    width: 100%;
    height: auto;
}

nav > ul > li:last-child {
    width: 1.65vw;
	margin-left: 1vw;
}



ul.sideMenu {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 100%;
    text-align: center;
    width: 9vw;
    left: calc(50% - 4.5vw);
    padding-top: 0.7vw;
    max-height: 0;
    transition: .5s;
}

ul.sideMenu li {
    background: #fff;
    line-height: 2vw;
}


ul.sideMenu li.active a {
   	color: #4E86B4;
	font-weight: bold;
}

ul.sideMenu a {
    font-size: 1vw;
}

li:hover ul.sideMenu {
    max-height:5vw;
}




/*-----縮小狀態-----*/


header.active nav {
    display: inline-block;
	vertical-align: middle;
    width: calc(100% - 15vw);
}

header.active nav ul {
    text-align: right;
}

header.active nav li {
    width: auto;
    margin: 0 0 0 2%;
	text-align: left;
}

header.active nav li a div {
    font-size: 0.8vw;
}


/*-----手機版選單------*/
.MobileMenu {
    display: none;
    position: absolute;
    top: calc(50% - 20px);
    right: 5vw;
    z-index: 51;
}

.MobileMenu a {
    display: block;
    width: 40px;
    height: 40px;
    transition: 0.5s;
}

.MobileMenu a span {
    display: block;
    background: #3e3756;
    height: 3px;
    border-radius: 3px;
    position: absolute;
    right: 0;
    transition: 0.5s;
}

.MobileMenu a span:first-child {
    width: 33%;
    margin-bottom: 8px;
    top: 0;
}

.MobileMenu a span:nth-child(2) {
    width: 66%;
    margin-bottom: 8px;
    top: 10px;
}

.MobileMenu a span:nth-child(3) {
    top: 20px;
    width: 100%;
}

.MobileMenu a p {
    position: absolute;
    bottom: 0;
    font-size: 0.7rem;
    letter-spacing: 1.2px;
    font-weight: bold;
    line-height: 0.7rem;
    color: #3e3756;
    transition: 0.5s;
    width: 100%;
    text-align: center;
}


.MobileMenu.active a span {
    background: #4E86B4;
}

.MobileMenu.active a span:first-child {
    width: 100%;
    top: 30%;
    transform: rotate(45deg);
}

.MobileMenu.active a span:nth-child(2) {
    opacity: 0;
    right: 22%;
}

.MobileMenu.active a span:nth-child(3) {
    top: 30%;
    transform: rotate(-45deg);
}
.MobileMenu.active a p {
    letter-spacing: 0.9px;
    color: #4E86B4;
}
/*-------------------------BODY-------------------------*/
article.page {
	padding-top: 80px;
}
section {
	
}
/*-------------------------FOOTER-----------------------*/
footer {
	background: #4E86B4;
} 

.FooterBg {
    
}

/*回頂端*/
#Gotop {
    width: 3vw;
    display: block;
    position: fixed;
    right: 1vw;
    bottom: -5vw;
    z-index: 10;
    transition: .5s;
    text-shadow: 0 0 0.25vw #000;
}

#Gotop.active {
    bottom: 5vw;
}

#Gotop a {
    display: block;
    width: 100%;
    position: relative;
    background: url(../images/btn_gotop_B.png);
    background-size: cover;
    background-position: center;
}

#Gotop a img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 1;
    transition: .5s;
}

#Gotop a:hover img {
    opacity: 0;
}


/*社群*/
#community {
    padding: 3vw 0;
    text-align: center;
}

#community ul {
    display: block;
    margin: 0 auto;
    font: 0;
}

#community li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2.5vw;
}

#community li:last-child {
    margin-right: 0px;
}

#community a {
    display: block;
    color: #fff;
    font-size: 0;
}

#community a > div:first-child {
    display: inline-block;
    vertical-align: middle;
    height: 1.5vw;
    margin-right: 0.75vw;
}

#community a > div:first-child svg {
    display: block;
    height: 100%;
    width: auto;
}

#community a > div:last-child {
    display: inline-block;
    vertical-align: middle;
    font-size: 1vw;
    font-weight: bold;
}


/*免責聲明*/
#Notice {
	padding: 3vw 0;
    color: #fff;
}
#Notice > div:first-child {
    font-size: 1.5vw;
    text-align: center;
    margin-bottom: 1vw;
}
#Notice > div:last-child {
    width: 70%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10% 1vw;
}
#Notice > div:last-child p {
    font-size: 0.5vw;
    text-align: justify;
    margin-bottom: 0.5vw;
}

#Notice > div:last-child p:last-child {
    margin-bottom: 0;
}

/*版權宣告列*/
#footer {
    
}

#CopyRight {
    font-size: 1vw;
    color: #FFF;
    padding: 1vw 0;
    text-align: center;
	background: #355876;
}
/*--------------------------共用項目-------------------------------*/
/*----------共用寬度----------*/
.siteWidth {
    width: 70%;
    margin: 0 auto;
}

/*----------頁面名稱----------*/
.pageName h1 {
    font-size: 1.5vw;
    color: #4e86b4;
}

.pageName h2 {
    font-size: 1vw;
}

.pageName {
    text-align: center;
    margin-bottom: 2vw;
}

/*-----------背景圖片----------*/
.PageBG {
	display: block;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 0;
	background: url("../images/bg_page.jpg") center no-repeat;
	background-size: cover;
}


/*----------更多按鈕----------*/
.MoreBtn {
    display: block;
    width: 15vw;
    margin: 0 auto;
    text-align: center;
}

.MoreBtn a {
    display: block;
    background: #4e86b4;
    color: #fff;
    line-height: 2.2vw;
    font-size: 1.2vw;
	border: 1px solid #4e86b4;
	border-radius: 0.5vw;
}

.MoreBtn a:hover {
    background: #FFF;
    color: #4e86b4;
}


/*-----手機版-----*/
.disp_w {
	display: block;
}
.disp_m {
	display: none;
}


/*----------頁碼控制----------*/
.pageCtrl ul {
    font-size: 0;
    text-align: center;
}

.pageCtrl {
    display: block;
    width: 90%;
    margin: 0 auto;
    border-top: 1px solid #000;
    padding: 2vw 0;
}

.pageCtrl ul li {
    display: inline-block;
    margin-right: 1vw;
}

.pageCtrl ul li a {
    display: block;
    font-size: 1vw;
    width: 2vw;
    color: #4E86B4;
    border-radius: 0.25vw;
}

.pageCtrl ul li.active a {
    color: #fff;
    background: #4E86B4;
}

.pageCtrl ul li:last-child {
    margin-right: 0;
}



/*----------文章設定----------*/
.pageContent {
    font-size: 1vw;
	color: #656565;
	text-align: justify;
}
.pageContent h1 {
    font-size: 2vw;
}

.pageContent h2 {
    font-size: 1.8vw;
}
.pageContent h3 {
    font-size: 1.6vw;
}

.pageContent p {
    font-size: inherit;
    margin-bottom: 1vw;
}

.pageContent a {
    font-size: inherit;
    color: #4e86b4;
    text-decoration: underline;
}

.pageContent span {
    font-size: inherit;
}

.pageContent img {
	display: block;
	width: auto;
	height: auto !important;
	max-width: 100%;
    margin: 0 auto 1vw;
}




/*--------------------------內容開始-------------------------------*/
/*----------首頁----------*/
/*KV*/
.slider-container {
    position: relative;
    width: 100%; /* 滿版寬度 */
    height: 100vh; /* 滿版高度 */
    overflow: hidden;
}

.slider-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* opacity 和 transition 仍然保留在 slide 上，用於淡入淡出 */
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.kvImg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute; /* 確保可以疊加控制顯示 */
    top: 0;
    left: 0;
}

.slide.active {
    opacity: 1; /* 顯示目前圖片 */
}

/* 左右箭頭 */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /* 預設隱藏 */
    transition: opacity 0.3s ease-in-out; /* 鼠標移入顯示動畫 */
    z-index: 10;
}

.arrow.prev-arrow {
    left: 20px;
}

.arrow.next-arrow {
    right: 20px;
}

/* 箭頭內容 */
.prev-arrow::before {
    content: '❮';
}

.next-arrow::before {
    content: '❯';
}

/* 鼠標懸停在輪播容器時顯示箭頭 */
.slider-container:hover .arrow {
    opacity: 1;
}

/* 進度提示點 */
.pagination {
    position: absolute;
    bottom: 3vw;
    right: 3vw;
    display: flex;
    gap: 0.5vw;
    z-index: 10;
}

.pagination-dot {
    width: 2vw;
    height: 0.2vw; /* 調整高度為長條形 */
    background-color: rgba(255, 255, 255, 0.5); /* 預設透明度50%的白色底色 */
    border-radius: 1vw; /* 導圓角 */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.pagination-dot.active {
    width: 4vw; /* 目前圖片的提示點寬度 */
    background-color: rgba(255, 255, 255, 1); /* 透明度100% */
}


/*KV SEO使用*/
/* 輪播內容區塊的樣式 - 使用 visibility 和 opacity 控制顯示 */
.slide-content {
    /* ***** 針對 SEO 友善的調整 ***** */
    opacity: 0; /* 預設為透明 */
    visibility: hidden; /* 預設隱藏，但不影響佈局 */
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out; /* 淡入淡出效果 */
}




/*----------醫師專訪----------*/
#ind_interview {
	display: block;
	background: url("../images/bg_interview.jpg") center no-repeat;
	background-size: cover !important;
	padding: 5vw 0;
	font-size: 0;
}

#ind_interview > div {
    display: inline-block;
    vertical-align: middle;
}

.interview_Text {
    width: 12vw;
    padding: 0 calc(5vw - 4px) 0 8vw;
}

.interview_Text h2 {
    font-size: 2vw;
    margin-bottom: 1vw;
    color: #4E86B4;
}

.interview_Text p {
    font-size: 1vw;
}

.interview_VideoList {
	width: calc(100% - 27vw);
	padding-right: 2vw;
}

#ind_interview .slick-slide {
    padding: 1vw 0;
}

#ind_interview .slick-slide > div {
    padding: 0 0.5vw;
}

#ind_interview .slick-slide > div > div {
	height: 100%;
}

.interview_VideoList a {
    display: flex;
	flex-direction: column;
	height: calc(100% - 2vw);
    background: #fff;
    border-radius: 1vw;
    padding: 1vw;
	box-shadow: 0 0 0.5vw 0 rgba(0, 0, 0, .3);
}

.InterviewVideoCover {
    border-radius: 2vw;
    overflow: hidden;
}

.interview_VideoList img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5vw;
}

.InterviewVideoContent {
    margin-top: 1vw;
    color: #000;
}

.InterviewVideoContent h3 {
    font-size: 1vw;
}

.InterviewVideoContent p {
    font-size: 1vw;
}

#ind_interview .slick-prev, #ind_interview .slick-next {
	width: 2vw;
	height: 2vw;
	filter: drop-shadow(0px 0px 0.2vw rgba(0, 0, 0, 0.3));
}

#ind_interview .slick-prev:before, #ind_interview .slick-next:before {
	font-size: 2vw;
	line-height: 2vw;
}

#ind_interview .slick-prev {
     left: -2vw; 
}

#ind_interview .slick-next {
	right: -2vw;
}

/* --- 讓 a 標籤等高 --- */
/* --- 讓 slick-slide 等高 (更新版) --- */

/* 1. 將軌道容器 .slick-track 設定為 flexbox */
#ind_interview .slick-track {
    display: flex;
    /* align-items: stretch 是 flexbox 的關鍵屬性，
       它會強制所有子元素(slide)在交叉軸（此處為垂直方向）上拉伸至相同高度 */
    align-items: stretch;
}

/* 2. 重設 slide 的高度，讓 flexbox 來接管 */
#ind_interview .slick-slide {
    height: auto; /* 取消 slick 可能會加上去的行內 height，改由 flexbox 控制 */
}

/* 3. 讓 slide 內的各層元素都能繼承並填滿高度 */
/* 這確保從 .slick-slide > div 到 a 標籤都是 100% 高 */
#ind_interview .slick-slide > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 4. 最後，讓文字內容區塊自動伸展，填滿所有剩餘空間 */
.InterviewVideoContent {
    flex-grow: 1; /* 讓文字區塊填滿 a 標籤內部的剩餘空間 */
}

/* 5. (可選) 讓段落填滿文字區塊的剩餘空間，可以讓佈局更穩定 */
.InterviewVideoContent p {
    flex-grow: 1;
}




/*產品說明*/
#ind_Products {
	background: #fff;
	background: linear-gradient(180deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%);
    display: block;
    padding: 5vw 0;
}

.ProductsList > ul {
    display: flex;
    justify-content: center;
    gap: 3vw;
}

.ProductsList > ul > li {
    width: 15vw;
    padding: 1vw;
    border-radius: 0.5vw;
    background: #ffffff;
	transition: .5s;
}

.ProductsList > ul > li:hover {
    transform: scale(1.1);
}


#PD_1 {
    background: linear-gradient(180deg,rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 62.5%, rgba(0, 173, 196, 1) 100%);
}

#PD_2 {
    background: linear-gradient(180deg,rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 62.5%, rgba(0, 175, 160, 1) 100%);
}

#PD_3 {
    background: linear-gradient(180deg,rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 62.5%, rgba(239, 53, 129, 1) 100%);
}

.ProductsList li div {
    margin-bottom: 1vw;
}

.ProductsList img {
    display: block;
    margin: 0 auto;
    height: 13vw;
	width: auto;
}

.ProductsList h2 {
    font-size: 1.5vw;
    text-align: center;
}

#PD_1 h2 {
    color: #00ADC4;
}

#PD_2 h2 {
    color: #00AFA0;
}

#PD_3 h2 {
    color: #EF3581;
}

.ProductsList h3 {
    font-size: 1.2vw;
    text-align: center;
    margin-bottom: 1vw;
    color: #656565;
}

.ProductsList ul ul {
    display: block;
    padding: 1vw 0;
    text-align: center;
}

.ProductsList ul ul li {
    padding: 0;
    font-size: 1vw;
    margin-bottom: 0.5vw;
    width: auto;
}

.dline {
    display: block;
    height: 1px;
    margin: 0 auto;
    background: #656565;
    width: 80%;
}






/*----------最新消息文章----------*/
#ind_news {
    /*background: url("../images/bg_news.jpg") center no-repeat;*/
	background-size: cover;
    padding: 5vw 0;
}

.ind_newsBk {
    display: block;
    width: 60%;
    margin: 0 auto 2vw;
}

.ind_newsBk a {
    display: flex;
	border-radius: 1vw;
    overflow: hidden;
}

.ind_NewsCover {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    width: 60%;
    padding-top: 38%;
}

.ind_NewsContent {
    width: 50%;
    background: #fff;
    padding: 2vw;
}

.ind_NewsContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ind_NewsContent h2 {
    font-size: 1.5vw;
    color: #4e86b4;
    line-height: 2vw;
    margin-bottom: 0.5vw;
}

.ind_NewsType {
    font-size: 1vw;
    color: #666666;
    margin-bottom: 1vw;
}

.ind_NewsShorts {
	font-size: 1vw;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	color: #000;
	text-align: left;
	line-height: 1.5vw;
	max-height: 7.5vw;
	margin-bottom: 1vw;
}

.ind_NewsReadmore {
    text-align: right;
    font-size: 1vw;
    color: #4E86B4;
}





/*影片*/
#ind_Video {
    display: block;
}

#ind_Video a {
    display: block;
    position: relative;
    padding-top: 56.25%;
	background-size: cover !important;
	background-position: center !important;
}

.ind_VideoBtn {
    display: inline-block;
    vertical-align: middle;
}

#ind_Video a::before {
}

#ind_Video a > div {
    display: block;
    position: absolute;
}

.ind_VideoBtn {
    width: 5.417%;
    left: 47.4265%;
    top: 45.75%;
    background: url("../images/btn_Video_A.png");
	background-size: cover;
	background-position: center;
}

.ind_VideoBtn img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0;
}

.ind_VideoTitle {
    bottom: 0;
    padding: 1vw;
    background: rgba(0, 0, 0, .5);
    width: calc(100% - 2vw);
    color: #fff;
    font-size: 1.5vw;
    opacity: 0.1;
}

a .ind_VideoBtn img, a .ind_VideoTitle {
    transition: .5s;
}

a:hover .ind_VideoBtn img, a:hover .ind_VideoTitle {
    opacity: 1;
}

/*圖片跑馬燈*/
#ind_recommend {
	background: url("../images/bg_mq.jpg") center no-repeat;
	background-size: cover;
	padding: 5vw 0;
}

#ind_recommend h2 {
	font-size: 2vw;
	text-align: center;
	margin-bottom: 2vw;
	color: #4E86B4;
}


.MqListBk {
	display: block;
	font-size: 0;
}

.marqList > div, .marqList .str_move_clone {
	display: flex;
	align-items: stretch;
}

.marqList li {
    /*display: inline-block;*/
    vertical-align: middle;
    width: 17vw;
    margin: 1vw 1.5vw;
    filter: drop-shadow(0 0 0.3vw rgba(0, 0, 0, 0.3));
}

.marqList {
    font-size: 0;
}

.marqList li a {
    display: block;
	height: calc(100% - 2vw);
    padding: 1vw;
    background: #fff;
    border-radius: 1vw;
}

.MqCover {
    display: block;
    margin-bottom: 1vw;
}

.MqCover img {
    display: block;
    width: 100%;
    height: auto;
	border-radius: 0.5vw;
}

.MqContent h3 {
    font-size: 1.2vw;
	line-height: 1.7vw;
    color: #4E86B4;
    margin-bottom: 0.5vw;
}

.MqContent h4 {
    font-size: 1vw;
	line-height: 1.5vw;
    color: #B7B7B7;
    margin-bottom: 0.5vw;
	white-space: break-spaces;
}

.MqContent p {
    font-size: 1vw;
    color: #000;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制在 3 行 */

  /* 為了更好的視覺效果，可以加上以下屬性 */
    line-height: 1.5vw; /* 建議設定行高 */
    height: 3vw;  /* 建議設定最大高度 (line-height * line-clamp) */
	white-space: break-spaces;
}




/*-----彈跳視窗設定-----*/
#mqPup {
	display: none;
}

.fancybox-content {
    background: none !important;
    padding: 0 !important;
}

.fancybox-slide--html {
    padding: 0 !important;
}

.fancybox-slide--html .fancybox-close-small {
	padding: 0 !important;
}

.mqPupBk {
    display: flex;
    align-items: stretch;
    width: 60vw;
	border-radius: 1vw;
    overflow: hidden;
}

.mqPupBk > div {
    width: 50%;
}

.dr_Img img {
    display: block;
    width: 100%;
    height: auto;
}

.dr_Txt {
    padding: 3vw 2vw;
    background: #fff;
}

.dr_Txt h3 {
	color: #4E86B4;
    font-size: 2vw;
}

.dr_Txt h4 {
	color: #B7B7B7;
    font-size: 1.2vw;
    margin-bottom: 1vw;
}

.dr_Content {
    max-height: 24vw;
    overflow: auto;
    padding-right: 0.5vw;
}

.dr_Content p {
    font-size: 1vw;
    text-align: justify;
    line-height: 2vw;
}



/*----------文章區：列表----------*/
.SidePage {
    padding-top: 7vw;
}

.NewsMenu {
    display: block;
    text-align: center;
    margin-bottom: 2vw;
}

.NewsMenu ul {
    font-size: 0;
    display: block;
}

.NewsMenu ul li {
    display: inline-block;
    vertical-align: middle;
}

.NewsMenu li a {
    font-size: 1vw;
    color: #000;
	display: inline-block;
	vertical-align: middle;
}

.NewsMenu li.active a {
    color: #4E86B4;
}

.NewsMenu li::after {
    content: "";
    background: #fff;
    vertical-align: middle;
    display: inline-block;
    width: 1px;
    height: 2.5vw;
    margin: 0 1vw;
    transform: rotate(25deg);
}

.NewsMenu li:last-child::after {
    display: none;
}


#article_top {
}

.NewsTop {
    display: block;
    width: 70%;
    margin: 0 auto;
}

.NewsTop a {
    display: flex;
}

.NewsTopCover {
    display: block;
    width: 60%;
	padding-top: 40%;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.NewsTopCover img {
    display: block;
    width: 100%;
    height: auto;
}

.NewsTopBk {
    display: block;
    padding: 2vw;
    background: #fff;
	width: 40%;
}

.NewsTopType {
    display: inline-block;
    padding: 0.5vw 1vw;
    color: #fff;
    background: #4E86B4;
    font-size: 1vw;
    line-height: 1vw;
    margin-bottom: 0.5vw;
	border-radius: 0.5vw;
}

.NewsTopTitle {
    font-size: 1.5vw;
    font-weight: bold;
    color: #4E86B4;
}

.NewsTopInfo {
    color: #000;
    font-size: 1vw;
    line-height: 2vw;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}


/*-----文章類型-----*/
.article_type {
    text-align: center;
    margin-bottom: 2vw;
}

.article_type ul {
    font-size: 0;
}

.article_type li {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1vw;
}

.article_type li a {
    display: block;
    font-size: 1vw;
    color: #4E86B4;
	border-radius: 1vw;
}

.article_type li:last-child {
    margin-right: 0;
}

.article_type li.active a {
    font-weight: bold;
    color: #fff;
	background:  #4E86B4;
	padding: 0 1vw;
}





/*----------列表----------*/
#article_list {
    padding: 2vw 0;
}


.NewsList {
    width: 70%;
    display: block;
    margin: 0 auto 3vw;
}

.NewsList ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5%;
    row-gap: 3vw;
    flex-direction: row;
    align-items: center;
}

#article_list .NewsList li {
	width: 47.5%;
}

.NewsList a {
    display: block;
    padding: 1vw;
    background: #fff;
    border-radius: 1vw;
}

.NewsListCover {
    display: block;
    position: relative;
    padding-top: 75%;
    background-position: center !important;
    background-size: cover !important;
    margin-bottom: 1vw;
}

.NewsListType {
    display: inline-block;
    padding: 0.2vw 0.5vw;
    background: #5288b5;
    color: #fff;
    font-size: 1vw;
    border-radius: 0.5vw;
    margin-bottom: 0.5vw;
}

.NewsListDate {
    font-size: 1vw;
    color: #666;
}

.NewsListTitle {
    font-size: 1.5vw;
    color: #4e86b4;
    font-weight: bold;
}

.NewsListLink {
    font-size: 1vw;
    color: #000;
    text-align: right;
}


/*----------文章頁面----------*/
#News {
    background-size: 100% auto;
}

.News {
    display: block;
    width: 65%;
    margin: 0 auto;
}

.NewsCover {
	display: block;
	width: 100%;
}

.NewsCover img {
	display: block;
	width: 100%;
	height: auto;
}

.NewsContentBk {
    background: #fff;
    padding: 2vw;
}

.NewsContent {
    padding: 1vw 0;
    border-bottom: 1px solid #000;
    margin-bottom: 2vw;
}

/*----------院所搜尋----------*/
#location {
}


#locat_search, #locat_search .searchResults {
    padding-bottom: 2.5vw;
}

#locatSearchBar {
    text-align: center;
    margin-bottom: 2.5vw;
}

#locatSearchBar form {
    font-size: 0;
    display: block;
}

#locatSearchBar #kw {
    display: inline-block;
    background: rgba(255, 255, 255, 1);
    width: 15vw;
    border-radius: 0.5vw;
    border: 1px solid #4e86b4;
    padding: 0 0.5vw;
    height: 2.5vw;
    font-size: 1vw;
    vertical-align: middle;
    margin-right: 1vw;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

#locatSearchBar .SearchBtn {
    display: inline-block;
    width: 5vw;
    border: none;
    height: 2.5vw;
    vertical-align: middle;
    font-size: 1vw;
    font-weight: bold;
    color: #fff;
    padding: 0;
    background: #4E86B4;
    border-radius: 0.5vw;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

#locatSearchBar select {
	display: inline-block;
    height: 2.5vw;
    width: 7vw;
    font-size: 1vw;
    vertical-align: middle;
    background: url(../images/icon_arrow.svg) right 0.4vw center no-repeat, rgba(255, 255, 255, 1);
    border-radius: 0.5vw;
    background-size: 1vw;
    border: 1px solid #4e86b4;
    margin-right: 1vw;
    color: #4E86B4;
    padding: 0 1vw 0 0;
    text-align: center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

/*----------院所地圖----------*/
.locationBk {
    padding-bottom: 5vw;
	display: none;
}

.CityBlock {
    display: block;
    padding: 2vw;
    background: rgba(255, 255, 255, .5);
    margin-bottom: 2vw;
    border-radius: 1vw;
}

.CityName {
    text-align: center;
    font-size: 2vw;
    font-weight: bold;
    color: #4E86B4;
    margin-bottom: 3vw;
    padding-bottom: 2vw;
    border-bottom: 1px solid #4E86B4;
}

.CityList ul {
    display: flex;
    gap: 5%;
    row-gap: 3vw;
    flex-wrap: wrap;
}

.CityList li {
    width: calc(95% / 2 - 2vw);
    background: rgba(255, 255, 255, 0.8);
    padding: 1vw;
    border-radius: 1vw;
}

.CityList li:nth-child(3n) {
    margin-right: 0;
}

.HostName {
    font-size: 1.2vw;
    color: #4E86B4;
    font-weight: bold;
}

.HostAdd, .HostTel {
    font-size: 1vw;
    color: #909090;
}

.HostContact {
    font-size: 0;
    padding-top: 0.5vw;
}

.HostContact a {
    display: inline-block;
    width: 8%;
    margin-right: 3%;
    background: #4e86b4;
    border-radius: 5vw;
	border: 1px solid #4e86b4;
}

.HostContact a img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
	filter: brightness(3);
	transition: .5s;
}

.HostContact a:hover {
    background: #fff;
}

.HostContact a:hover img {
	filter: brightness(1);
}

/*搜尋*/
.searchResults div {
    text-align: center;
    font-size: 1.5vw;
    color: #909090;
}

.searchResults div span {
    font-size: inherit;
    color: #ffa1a1;
}







/*-----BA照-----*/
.BA_Bg {
    display: block;
    position: absolute;
    width: 100%;
    background: url(../images/bg_2.jpg);
	background-position: center;
	background-size: 100% auto;
    padding-top: 35%;
    z-index: -1;
}

.PD_CUT_5 {
    display: block;
    position: relative;
    padding: 0 0 5vw;
}

.BA_Title img {
    display: block;
    width: 52.55%;
    height: auto;
    margin: 0 auto;
}

.BA_Slider {
    display: block;
    padding: 2vw 2vw 3vw;
    background: #fff;
    border-radius: 1vw;
    width: 60%;
    margin: 0 auto;
}

#BA_Imglist img {
	display: block;
	width: 100%;
	height: auto;
}





/*----------影片區----------*/
#video_top {
    width: 65%;
    margin: 0 auto;
}

#video_top a {
    display: block;
    position: relative;
    padding-top: 56.25%;
    background-size: cover !important;
    background-position: center !important;
}


#video_top a > div {
    display: block;
    position: absolute;
}

#video_list {
    padding: 2vw 0 5vw;
    background-size: 100% auto;
}

.video_List {
    display: flex;
    width: 65%;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 5%;
    row-gap: 3vw;
    flex-direction: row;
	justify-content: space-between;
}

.video_List li {
    width: calc(47.5% - 2vw);
    background: #fff;
    padding: 1vw;
    border-radius: 1vw;
}

.video_List li a {
    font-size: 0;
}



.video_List li a > div {
	width: 100%;
}

.Video_Cover {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.Video_Cover > .ind_VideoBtn {
    position: absolute;
    width: 15%;
    left: 42.5%;
    top: 40%;
}

.Video_InfoBk {
	padding: 0.5vw 0;
}

.Video_Type {
	position: relative;
	display: inline-block;
    padding: 0.2vw 1vw;
    background: #4E86B4;
    color: #fff;
    font-size: 1vw;
	margin-bottom: 0.5vw;
	border-radius: 0.5vw;
}

.Video_Title {
    font-size: 1.5vw;
    font-weight: bold;
    color: #4E86B4;
    margin-bottom: 0.5vw;
    line-height: 2vw;
}

.Video_Content {
    font-size: 1vw;
    color: #000;
    text-align: justify;
    padding-right: 0.5vw;
}


/*----------常見問題----------*/
#faqs {
	background: url(../images/bg_3.jpg);
}

/*常見問題搜尋Bar*/
#FAQsearchBar {
    text-align: center;
    margin-bottom: 1.5vw;
	padding-top: 14vw;
}

.SearchBtn {
    width: 7.5vw;
    padding-left: 1.5vw;
    border: none;
    height: 2.5vw;
    vertical-align: middle;
    font-size: 1.2vw;
    font-weight: bold;
    color: #fff;
    background: url(../images/icon_sc.svg) 2vw center no-repeat, rgb(62 55 86);
    background: url(../images/icon_sc.svg) 2vw center no-repeat, -webkit-linear-gradient(-45deg, rgb(147 124 178) 0%,rgb(62 55 86) 100%);
    background: url(../images/icon_sc.svg) 2vw center no-repeat, linear-gradient(135deg, rgb(147 124 178) 0%,rgb(62 55 86) 100%);
	background-size: auto 1vw;
}

#kw {
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 1);
    padding: 0.5vw;
    /* border-radius: 50px; */
    width: 15vw;
    font-size: 1.2vw;
    /* text-align: center; */
    margin-right: 0.5vw;
    vertical-align: middle;
}

/*常見問題列表*/
#FAQsList {
    padding-bottom: 2vw;
}

#FAQsList > ul {
    display: block;
}

#FAQsList > ul > li {
    margin-bottom: 0.5vw;
}

#FAQsList > ul > li:last-child {
    margin: 0;
}

.FAQTitle {
	position: relative;
    display: block;
    background: #3e3756;
    color: #fff;
    padding: 0.5vw 2vw 0.5vw 1vw;
    transition: .5s;
    cursor: pointer;
}

.FAQTitle::after {
	content:"";
	display: block;
	position: absolute;
	background: url("../images/FAQarrow.png") no-repeat center;
	background-size: 100%;
	width: 1vw;
    height: 1vw;
    right: 1vw;
    top: calc(50% - 0.5vw);
    transition: .5s;
	transform: rotate(90deg);
}

.active .FAQTitle {
    background: #4E86B4;
}

.FAQTitle::before {
    content: "．";
    display: inline-block;
    vertical-align: top;
    font-size: 1.2vw;
    line-height: 1.8vw;
    margin-right: 0.25vw;
    width: 1vw;
    font-weight: bold;
}

.active .FAQTitle::after {
	transform: rotate(0deg);
}

.FAQTitle > div {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 1.25vw);
    font-size: 1.2vw;
    line-height: 1.8vw;
    font-weight: bold;
}

.FAQContent {
    display: none;
    padding: 3%;
	background: #fff;
}


/*常見問題搜尋結果*/
/*.FAQTitle span {
    color: #ffea76;
    font-size: inherit;
    text-decoration: underline;
}

.searchResults {
    padding: 2vw 0;
    text-align: center;
}

.searchResults div {
    font-size: 1.5rem;
    font-weight: bold;
    color: #1c346c;
}

.searchResults div span {
    font-size: inherit;
    color: #d70026;
}*/

#FAQsList .searchResults {
	padding: 2vw 0;
}




/*----------正貨認證流程----------*/
/*---選單---*/
.CerMenu {
    display: block;
    margin: 0 auto 3vw;
    text-align: center;
}

.CerMenu ul {
    font-size: 0;
}

.CerMenu ul li {
    display: inline-block;
}

.CerMenu ul li:first-child {
    margin-right: 1vw;
}

.CerMenu ul li a {
    font-size: 1vw;
    padding: 0.5vw 1vw;
    background: #4e86b4;
    color: #fff;
    border-radius: 2vw;
    display: block;
    width: 10vw;
    border: 0.2vw solid #fff;
    font-weight: bold;
    box-shadow: 0 0 0.5vw #204869;
}




/*---第一個部份---*/
.cerbg {
    background: rgba(255, 255, 255, .5);
    padding: 5vw 0;
    border-radius: 2vw;
	margin-bottom: 5vw;
}

.cerTitle {
    text-align: center;
    margin: 0 auto 2vw;
}

.cerTitle h2 {
    font-size: 2.5vw;
    color: #4e86b4;
    text-shadow: 0 0 0.5vw #aed5ff;
    margin-bottom: 1vw;
}

.cerTitle p {
    font-size: 1.2vw;
}

.CerCover {
    width: 55%;
    margin: 0 auto;
}

.CerCover img {
    display: block;
    width: 100%;
    height: auto;
}


.cerStepBk {
    display: block;
    width: 54%;
    margin: 0 auto;
}

.cerStepBk > ul {
    display: block;
}

.cerStepBk > ul > li {
    border: 0.5vw solid #4e86b4;
    margin-bottom: 2vw;
    padding: 1vw;
    border-radius: 2vw;
    width: calc(100% - 3vw);
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 0.5vw 0 #a4a4a4;
}

h3.cerStepTitle {
    display: block;
    font-size: 0;
    text-align: center;
    margin-top: -2.5vw;
    margin-bottom: 1vw;
}

h3.cerStepTitle span {
    display: block;
    margin: 0 auto 0.5vw;
    width: 20%;
    vertical-align: middle;
    font-size: 1.2vw;
    line-height: 2.5vw;
    background: #4e86b4;
    color: #FFF;
    border-radius: 2vw;
    padding: 0 2vw;
}

h3.cerStepTitle div {
    font-size: 1.8vw;
    display: inline-block;
    vertical-align: middle;
    color: #4e86b4;
}



.cerStepImg {
    display: block;
    width: 50%;
    margin: 0 auto -1.5vw;
}

.cerStepImg img {
    display: block;
    width: 100%;
    height: auto;
    /* image-rendering: auto; */
}

.cerStepTxt {
    font-size: 1vw;
    text-align: center;
    padding: 2vw 1vw 1vw;
    color: #484848;
    border: 1px solid #4e86b4;
    background: rgb(78 134 180 / 20%);
    border-radius: 1vw;
}

.cerStepTxt strong {
	font-weight: bold;
	color: #4e86b4;
}

.cerStepImg a {
    position: relative;
    display: block;
    font-size: 1.5vw;
    font-weight: bold;
    text-align: center;
    background: #4e86b4;
    color: #fff;
    border-radius: 5vw;
    padding: 1vw 1.5vw 1vw 0;
    box-shadow: 0 0.2vw 0 #204869;
}

.cerStepImg a:hover {
    box-shadow: 0 0vw 0 #204869;
    background: #437198;
}

.FingerAni {
    filter: drop-shadow(0px 0px 0.05vw #254f72);
    display: block;
    position: absolute;
    width: 10%;
    right: 5%;
    top: 1vw;
}

.FingerAni img {
    position: absolute;
    top: 0;
    left: 0;
}

.FingerAni .animated-finger {
    animation: fingerFadeInOut 2s infinite; /* 5秒完成一次循環 (3s隱藏 + 2s顯示), 無限重複 */
    /* 確保初始狀態是隱藏的，在動畫開始前 */
    opacity: 0;
}

/* 定義動畫 */
@keyframes fingerFadeInOut {
    0% { opacity: 0; }   /* 開始時完全透明 (隱藏) */
    60% { opacity: 0; }  /* 持續透明 3 秒 (5秒動畫的 60%) */
    61% { opacity: 1; }  /* 瞬間顯示 */
    100% { opacity: 1; } /* 持續顯示到動畫結束 (2秒) */
}




/*---第二區塊---*/
.cerFakeTxt {
    text-align: center;
    font-size: 1.2vw;
	margin-bottom: 1vw;
}

.cerFakeTxt span {
    font-size: inherit;
    color: #ff0000;
}

/* 將動畫應用到 .cerFakeTxt strong */
.cerFakeTxt strong {
    animation: textColorChange 2s infinite alternate; /* 2秒完成一次循環，並來回交替 */
    /* 確保初始顏色是黑色，在動畫開始前 */
    color: black;
}

/* 定義文字顏色漸變動畫 */
@keyframes textColorChange {
    0%   { color: black; }  /* 初始顏色：黑色 */
    50%  { color: red; }    /* 1秒後漸變到紅色 */
    100% { color: black; }  /* 再1秒後漸變回黑色 */
}


.cerFakeNote {
    font-size: 1.2vw;
    width: 83%;
    margin: 0 auto 3vw;
    background: #4e86b4;
    color: #fff;
    padding: 1vw;
    font-weight: bold;
    border-radius: 1vw;
}



.cerFakeImgBk {
    display: block;
    width: calc(50% - 2vw);
    margin: 0 auto;
    background: #000;
    padding: 1vw;
    text-align: center;
	animation: backgroundColorChange 2s infinite alternate; /* 2秒完成一次循環，並來回交替 */
    /* 確保初始背景顏色是黑色，在動畫開始前 */
    background-color: #000; /* 確保初始狀態 */
}

/* 定義背景顏色漸變動畫 */
@keyframes backgroundColorChange {
    0%   { background-color: #000; }  /* 初始顏色：黑色 */
    50%  { background-color: red; }   /* 1秒後漸變到紅色 */
    100% { background-color: #000; }  /* 再1秒後漸變回黑色 */
}

.cerFakeImgTitle {
    color: #fff;
    font-size: 2vw;
    font-weight: bold;
    padding: 1vw 0;
    background: #000;
    border-top-left-radius: 2vw;
    border-top-right-radius: 2vw;
}

.cerFakeImgTitle::after, .cerFakeImg::after {
    content: "";
    display: block;
    width: 90%;
    margin: 1vw auto 0;
    border-bottom: 1px solid #ff0000;
}

.cerFakeImg {
    display: block;
	position: relative;
    font-size: 0;
    background: #000;
}

.cerFakeImg img {
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    height: auto;
    margin: 0 2%;
}

.NoBuy {
    display: block;
    width: 100%;
    height: calc(100% - 1vw - 1px);
    position: absolute;
    top: 0;
    left: 0;
}

.NoBuy span {
    display: block;
    position: absolute;
    width: 90%;
    height: 0.5vw;
    background: #ff0000;
    left: 5%;
    top: calc(50% - 0.25vw);
    border-radius: 1vw;
}

.NoBuy span:first-child {
    transform: rotate(45deg);
}

.NoBuy span:last-child {
    transform: rotate(-45deg);
}

.cerFakeContent {
    background: #000;
    color: #fff;
    padding: 0 0 1vw;
	border-bottom-left-radius: 2vw;
    border-bottom-right-radius: 2vw;
}

.cerFakeContent div:first-child {
    font-size: 3vw;
    font-weight: bold;
}

.cerFakeWarning p {
    font-size: 1.2vw;
}

.cerFakeWarning p:last-child {
    font-weight: bold;
    color: #ff0000;
}






/*---------------------------自適應內容----------------------------*/
/*--高--*/
@media only screen and (max-height: 820px) {

}
@media only screen and (max-height: 600px) {

}



/*--寬--*/
@media only screen and (max-width: 1650px) {

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

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

	
}


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

	
}

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

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

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

}

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

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

}

@media only screen and (max-width: 720px) {
/*-----手機版-----*/
.disp_m {
	display: block;
}
.disp_w {
	display: none;
}
	
#Gotop {
    width: 30px;
    right: 10px;
}
	
#community {
    padding: 30px 0;
}
	
#CopyRight {
    font-size: 14px;
}

#Notice > div:first-child {
    font-size: 18px;
}

#Notice > div:last-child {
    width: 80%;
    padding: 0 10% 20px;
}

#Notice > div:last-child p {
    font-size: 10px;
    margin-bottom: 10px;
}

/*--通用樣式--*/
/*頁碼*/
.pageCtrl {
    padding: 20px 0;
}

.pageCtrl ul li {
    margin-right: 10px;
}

.pageCtrl ul li a {
    width: 20px;
    font-size: 14px;
    border-radius: 4px;
}	
	
	
/*編輯器*/
.pageContent {
    font-size: 14px;
}

.pageContent h1 {
    font-size: 26px;
}

.pageContent h2 {
    font-size: 22px;
}
.pageContent h3 {
    font-size: 18px;
}
	
.pageContent p {
    margin-bottom: 14px;
}

	
	
	
/*-----選單-----*/
header {
    top: 2%;
    padding: 2vw 5vw;
    width: calc(95% - 10vw);
	border-radius: 3vw;
}	
	
#Logo {
    margin: 0;
	width: auto;
	padding: 10px 0px;
}
	
#Logo img, header.active #Logo img {
    height: 8vw;
    width: auto;
}	
	
#ExoCoBioLogo {
	display: none;
    width: auto;
    margin-left: 4%;
}	
	
#ExoCoBioLogo img, header.active #Logo img {
    height: 10vw;
    width: auto;
}	
	
	
.MobileMenu {
	display: block;
}
	
	
nav, header.active nav {
    display: block;
	position: fixed;
	right: 2.5%;
	height: calc(100% - 49vw);
	background: rgb(255 255 255 / 95%);
	width: 95% !important;
	padding: 15vw 0 5vw;
	transition: .5s;
	border-radius: 3vw;
}
	
nav {

    top: 100vh;
}	
	
nav.active {
	top: 25vw;
}	
	
header.active nav > ul {
	text-align: center;
}


nav > ul > li, header.active nav > ul > li {
    display: block;
    text-align: center;
    width: 80%;
    margin: 0 auto 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #3a2e73;
}
	

	
nav > ul > li a div {
    font-size: 4vw;
    line-height: 5vw;
}

nav > ul > li.active > a div {
    border-bottom: none;
}	
	
nav > ul > li a div {
    font-size: 4vw;
    line-height: 5vw;
}

nav > ul > li.active > a div {
    border-bottom: none;
}

ul.sideMenu {
    position: relative;
    width: 100%;
    left: 0;
    padding-top: 0vw;
}
	
li:hover ul.sideMenu {
    padding-top: 5vw;
    max-height: 24vw;
}	

ul.sideMenu li {
    background: none;
    line-height: 12vw;
	border-top: 1px dashed #5087b4;
}

ul.sideMenu a {
    font-size: 4vw;
}	
	
	
nav > ul > li:nth-child(5), nav > ul > li:nth-child(6) {
    display: inline-block;
    text-align: center;
    border-bottom: none;
    margin-bottom: 10%;
}

nav > ul > li:nth-child(5) a, nav > ul > li:nth-child(6) a {
    display: block;
    margin: 0 auto;
}

nav > ul > li:nth-child(6) {
    width: 6%;
    margin-right: 36%;
}

nav > ul > li:nth-child(5) {
    width: 4%;
    margin-right: 16%;
}	
	


	
nav > ul > li a div:nth-child(4), header.active nav > ul > li a div:nth-child(4) {
    font-size: 1.5rem;
    line-height: 1.5rem;
}

nav > ul > li a div:nth-child(5), header.active nav > ul > li a div:nth-child(5) {
    font-size: 1.2rem;
	line-height: 1rem;
	border-bottom: none;
}	
	
	
	
	
	
header.active {
    padding: 0;
    width: 100%;
	background: rgb(221 220 239 / 95%);
}	
	
/*----------手機版內容 start----------*/	
	
	
/*-----首頁-----*/	
/*kv*/
.arrow {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
    .arrow.prev-arrow {
        left: 10px;
    }
    .arrow.next-arrow {
        right: 10px;
    }
    .pagination {
        bottom: 10px;
        right: 10px;
        gap: 5px;
    }
    .pagination-dot {
        width: 20px;
    }
    .pagination-dot.active {
        width: 40px;
    }
	
	
/*醫師推薦*/
#ind_interview > div {
    display: block;
    padding: 0;
    margin: 0 auto;
    width: 95%;
}

.interview_Text {
    margin-bottom: 4vw !important;
}

.interview_Text h2 {
    font-size: 6vw;
    text-align: center;
    margin-bottom: 2vw;
}

.interview_Text p {
    font-size: 4vw;
}

#ind_interview .slick-slide {
    padding: 3vw 1vw;
}	
	
.InterviewVideoContent h3 {
    font-size: 5vw;
}

.InterviewVideoContent p {
    font-size: 4vw;
}

.interview_VideoList a {
    padding: 2vw;
	border-radius: 3vw;
}
	
	
/*產品介紹*/
.ProductsList > ul {
    display: flex;
	gap: 5vw;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
	

	
.ProductsList > ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.ProductsList > ul > li {
    width: 70%;
    padding: 5vw;
    border-radius: 3vw;
}

.ProductsList img {
    height: 50vw;
}

.ProductsList li div {
    margin-bottom: 5vw;
}

.ProductsList h2 {
    font-size: 6vw;
}

.ProductsList h3 {
    font-size: 5vw;
    margin-bottom: 5vw;
}

.ProductsList ul ul li {
    font-size: 4vw;
}

.ProductsList ul ul {
    padding: 2vw 0;
    height: 28vw;
}
	
	
/*-----跑馬燈-----*/
.marqList li {
    width: 77vw;
}
	
#ind_recommend h2 {
    font-size: 8vw;
}
	
.marqList li a {
    height: calc(100% - 6vw);
    padding: 3vw;
    border-radius: 3vw;
}
	
.MqContent h3 {
    font-size: 6vw;
    line-height: 7vw;
    margin-bottom: 1vw;
}	

.MqContent h4 {
    font-size: 4vw;
	line-height: 6vw;
    margin-bottom: 1vw;
}
	
.MqContent p {
    font-size: 4vw;
    line-height: 6vw; /* 建議設定行高 */
    height: 12vw;  /* 建議設定最大高度 (line-height * line-clamp) */
}	
	
	
.mqPupBk {
    align-items: center;
    width: 90%;
    flex-direction: column;
	margin: 0 auto;
}	
	
.mqPupBk > div {
    width: 100%;
}

.dr_Txt h3 {
    font-size: 6vw;
    text-align: center;
}

.dr_Txt h4 {
    font-size: 5vw;
    text-align: center;
    margin-bottom: 2vw;
}

.dr_Content {
    max-height: none;
    padding-right: 0;
    overflow: inherit;
}
	
.dr_Content, .dr_Content p {
    font-size: 4vw;
	line-height: 6vw;
}	

.fancybox-slide--html .fancybox-close-small {
    right: 5% !important;
}	
	
	
/*----------首頁最新消息----------*/
.ind_newsBk {
    width: 80%;
    margin-bottom: 5vw;
}	
	
.ind_newsBk a {
    border-radius: 3vw;
    flex-direction: column;
    align-items: center;
}
	
.ind_NewsCover {
    width: 100%;
    padding-top: 75%;
}
	
.ind_NewsContent {
    width: calc(100% - 6vw);
    padding: 3vw;
}
	
.ind_NewsShorts {
    font-size: 4vw;
    line-height: 5vw;
    max-height: 25vw;
    margin-bottom: 2vw;
}	
	
.ind_NewsContent h2 {
    font-size: 5vw;
    line-height: 6vw;
    margin-bottom: 1vw;
}
	
.ind_NewsReadmore {
    font-size: 4vw;
}	
	
.MoreBtn {
    width: 50%;
}

.MoreBtn a {
    font-size: 4vw;
    line-height: 8vw;
    border-radius: 2vw;
}	
	
	
/*---------媒體專區----------*/
	
.SidePage {
    padding-top: 21vw;
}

.NewsMenu li a {
    font-size: 4vw;
}

.NewsMenu {
    padding-top: 5vw;
    margin-bottom: 5vw;
}

.NewsMenu li::after {
    height: 8vw;
    margin: 0 5vw;
}	
	
	
	
	
	

	
.NewsTop {
    padding: 0;
    width: 100%;
}

.NewsTop a {
    flex-direction: column;
    align-items: center;
}	
	
.NewsTopCover {
    width: 100%;
    padding-top: 75%;
}	
	
	
.NewsTopBk {
	width: calc(100% - 10vw);
    padding: 5vw;
}

.NewsTopType {
    padding: 5px 10px;
    font-size: 14px;
    line-height: 14px;
	border-radius: 1.5vw;
}

.NewsTopTitle {
    font-size: 24px;
}

.NewsTopInfo {
	font-size: 4vw;
    line-height: 6vw;
    color: #686868;
}
	
	
.NewsList {
    width: 90%;
}

#article_list .NewsList li {
    width: 100%;
}

.NewsList ul {
    gap: 5vw 0;
    justify-content: space-between;
}	
	

.NewsList a {
    padding: 5vw;
    border-radius: 3vw;
}
	
.NewsListCover {
    margin-bottom: 3vw;
}	
	
#article_list {
    padding: 30px 0;
}

.article_type {
    margin-bottom: 30px;
}

.article_type li {
    margin-right: 10px;
}

.article_type li a {
    font-size: 14px;
}
	
	
.NewsListType {
    font-size: 4vw;
    padding: 0.5vw 2vw;
    border-radius: 1.5vw;
    margin-bottom: 2vw;
}

.NewsListTitle {
    font-size: 5vw;
    line-height: 7vw;
    margin-bottom: 2vw;
}

.NewsListDate {
    font-size: 3vw;
}

.NewsListLink {
    font-size: 4vw;
}	
	
	
	
.News {
    width: 90%;
    padding-top: 0;
}

.NewsContentBk {
    padding: 20px;
}

.NewsContent {
    padding: 10px 0 20px;
    margin-bottom: 20px;
}

/*影音*/
#video_top {
	width: 100%;
}

#video_list {
    padding: 20px 0 30px;
}

.video_List {
	width: 90%;
	row-gap: 5vw;
}

.video_List li {
	width: 100%;
	        padding: 5vw;
}

.Video_InfoBk {
    padding: 0;
    width: 100%;
}

.Video_Type {
    
	padding: 1vw 2vw;
	font-size: 4vw;
	line-height: 6vw;
	border-radius: 2vw;
	margin-bottom: 1vw;
}

.Video_Title {
    font-size: 5vw;
    line-height: 7vw;
    margin-bottom: 1vw;
}

.Video_Content {
    font-size: 4vw;
    line-height: 6vw;
    padding-right: 0;
}

.video_List li a > div {
    display: block;
}

.Video_Cover {
    width: 100%;
    padding-top: 56.25%;
    margin: 0 0 2vw;
}


/*常見問題*/
#FAQsearchBar {
	padding-top: 70px;
    margin-bottom: 30px;
}
	
#kw {
    width: 230px;
    padding: 5px;
    font-size: 14px;
    margin-right: 10px;
}

.SearchBtn {
    width: 70px;
    height: 30px;
    font-size: 16px;
    padding-left: 20px;
    background-size: 13px auto, auto;
}

#FAQsList {
    padding-bottom: 30px;
    width: 90%;
}

#FAQsList > ul > li {
    margin-bottom: 10px;
}

.FAQTitle {
    padding: 5px 20px 5px 10px;
}

.FAQTitle::before {
    font-size: 16px;
    line-height: 20px;
    margin-right: 5px;
    width: 16px;
}

.FAQTitle > div {
    width: calc(100% - 21px);
    font-size: 16px;
    line-height: 20px;
}

.FAQTitle::after {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
}
	
.FAQContent {
    padding: 20px;
}
	
#FAQsList .searchResults {
    padding: 0 0 20px 0;
}

.searchResults div {
    font-size: 16px;
}
	
/*院所地圖*/
	
.pageName {
    padding: 5vw 0;
    margin-bottom: 0;
}

.pageName h1 {
    font-size: 6vw;
}

.pageName h2 {
    font-size: 4vw;
}


	
#locatSearchBar {
    width: 100%;
    margin-bottom: 20px;
}

#locatSearchBar select {
    height: 30px;
    width: 75px;
    font-size: 14px;
    padding: 5px 20px 5px 10px;
    background-size: 10px;
    background-position: right 5px center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

#locatSearchBar #kw {
	width: 192px;
	height: 30px;
	font-size: 12px;
	padding-left: 8px;
	margin-right: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#locatSearchBar .SearchBtn {
    display: block;
    margin: 10px auto 0;
    width: 150px;
    border-radius: 5px;
    height: 30px;
    padding: 0;
    font-size: 16px;
}
	

.locationBk {
    padding-bottom: 30px;
    width: 90%;
}

.CityBlock {
    padding: 10px;
    margin-bottom: 10px;
}

.CityName {
    font-size: 20px;
    margin-bottom: 20px;
}

.CityList ul {
    width: 100%;
}		
	
.CityList li {
    width: 100%;
	margin-right: 0;
	padding: 2vw;
}

.HostName {
    font-size: 16px;
}

.HostAdd, .HostTel {
    font-size: 14px;
}

.HostContact {
    padding: 0;
    text-align: right;
}

.HostContact a:last-child {
    margin-right: 0;
}	
	
/*產品介紹*/
#PD_CUT_1 {
    width: 90%;
}

#PD_CUT_1::before {
    display: none;
}

.PD_Img {
    display: block;
    margin: 0 auto 10px;
    width: 60%;
}

.PD_Info {
    display: block;
    width: 100%;
}

.PD_AniLOGO {
    width: 100%;
    margin-bottom: 20px;
}

.PD_Title {
    margin-bottom: 20px;
}

.PD_Title_1 {
    width: 80%;
    margin-bottom: 10px;
}

.PD_Title_2 {
    width: 100%;
}

.PD_InfoTxt p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
}

#PD_CUT_2 {
    width: 90%;
    margin: 0 auto 30px;
}

#PD_CUT_2 > div {
    display: block;
}

.PD_InfoImg {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
}

.PD_InfoImg > div {
    display: block;
    width: 100%;
    margin-bottom: 50px;
    padding: 0;
    margin-right: 0;
}

.PD_InfoImg img {
    max-width: 250px;
    margin: 0 auto;
}

.PD_InfoImg div {
    font-size: 18px;
    font-weight: bold;
}

.PD_InfoImg_1 div {
    margin-top: -35px;
}

.PD_InfoImg_2 div {
    margin-top: 20px;
}

.PD_InfoImg_4 {
    width: 100%;
}
	
#PD_CUT_3 {
    width: 90%;
    margin: 0 auto 50px;
}

.PD_CUTTitle {
    padding: 5px 5px 5px 10px;
    font-size: 20px;
    margin-bottom: 10px;
}

.PD_CUTTitle span {
    display: inline-block;
}	
	
.PD_TipsInfoBk {
    padding-top: 0;
}

.PD_TipsInfoBk > div {
    width: 100%;
}

.PD_TipsInfo {
    margin: 30px 0 25px;
}

.PD_TipsA_GoodGroup {
    width: 68%;
}

.PD_TipsA_Txt {
    font-size: 24px;
    width: 150px;
}

.PD_TipsA_Txt sup {
    font-size: 16px;
}

.PD_TipsInfoTxt {
    padding: 10px;
    width: calc(100% - 20px);
    font-size: 14px;
    border-radius: 5px;
}

.PD_TipsA {margin-right: 0;margin-bottom: 50px;}

.PD_TipsB_Group > div {
    width: 30%;
    margin-right: 5%;
}

.PD_TipsB_Group img {
    margin-bottom: 10px;
}

.PD_TipsB_Txt {
    width: 100%;
    font-size: 20px;
}

.PD_TipsB_Txt sup {
    font-size: 14px;
}

.PD_TipsB_Group {
    bottom: 7%;
}
	
#PD_CUT_4 {
    width: 90%;
    margin: 0 auto 30px;
}
	
#PD_CUT_4 .PD_CUTTitle {
    letter-spacing: 5px;
}	
	
.PD_CoolInfoTxt {
    font-size: 16px;
    margin-bottom: 80px;
    text-align: justify;
}

ul.CoolimgList > li {
    display: block;
    width: 100%;
    margin: 0 auto 80px;
}
	
.CoolimgTitle > div > div {
    font-size: 24px;
    line-height: 30px;
}
	
.CoolimgTitle {
    font-size: 20px;
    left: 0;
    top: -10%;
}
	
.CoolImgBk {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 80px;
}
	
ul.CoolimgList > li:last-child {
    margin-bottom: 0;
}
	
.PD_CoolNoteTxt {
    padding: 5px 10px;
    width: calc(100% - 20px);
    font-size: 16px;
    border-radius: 5px;
}
	
	
.PD_CUT_5 {
    padding: 0 0 30px;
}	
	
.BA_Title img {
    width: 95%;
}

.BA_Slider {
    width: 90%;
    padding: 10px 10px 30px;
    border-radius: 10px;
}
	
	
	
	
	
	
	
	
	#Notice {
		padding-top: 30px;
	}
	
	
	
	
/*----------認證流程----------*/
.CerMenu {
    margin: 5vw auto;
}

.CerMenu ul li:first-child {
    margin-right: 3vw;
}

.CerMenu ul li a {
    font-size: 5vw;
    width: 45vw;
    padding: 1vw 0;
    text-align: center;
    border-radius: 5vw;
}

.cerbg {
    width: 95%;
    border-radius: 5vw;
    padding: 10vw 0;
}

.cerTitle {margin-bottom: 5vw;}

.cerTitle h2 {
    font-size: 6.5vw;
}

.cerTitle p {
    font-size: 4vw;
}

.CerCover {
    width: 100%;
}

.cerStepBk {width: 90%;}

.cerStepBk > ul > li {
    border-width: 1vw;
    padding: 2vw;
    width: calc(100% - 6vw);
    margin-bottom: 8vw;
}

h3.cerStepTitle {
    margin-top: -6vw;
    margin-bottom: 3vw;
}

h3.cerStepTitle span {
    width: 50%;
    font-size: 5vw;
    line-height: 8vw;
    border-radius: 8vw;
    margin-bottom: 1vw;
}

h3.cerStepTitle div {
    font-size: 7vw;
}

.cerStepImg {
    width: 80%;
    margin-bottom: -5vw;
}

.cerStepTxt {
    font-size: 4.1vw;
    text-align: justify;
    padding: 6vw 2vw 2vw;
}

.cerStepBk > ul > li:last-child {
    margin-bottom: 0;
}

.cerStepImg a {
    font-size: 5.5vw;
    padding: 1vw 0 1vw 0;
}

.FingerAni {
    transform: rotate(-25deg);
    top: 3vw;
    right: 4%;
}

.cerFakeTxt {
    font-size: 4vw;
    width: 90%;
    margin: 0 auto 5vw;
    text-align: justify;
}

.cerFakeNote {
    font-size: 5vw;
    width: 90%;
    padding: 2.5vw;
    margin-bottom: 5vw;
}

.cerFakeImgBk {
    width: 90%;
    padding: 2.5vw;
}

.cerFakeImgTitle {
    font-size: 5.5vw;
    padding: 5vw 0;
}

.cerFakeImgTitle::after, .cerFakeImg::after {
    margin-top: 5vw;
}

.NoBuy span {
    height: 2vw;
    top: calc(50% - 3vw);
}

.cerFakeContent {
    padding: 2vw 0;
}

.cerFakeContent div:first-child {
    font-size: 10vw;
}

.cerFakeWarning p {
    font-size: 4.5vw;
}
	
}

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

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

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

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

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


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

}