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

/*-----css基本設定---------*/
/* 定義字體族群：源樣黑體 */

/* Extra Light */
@font-face {
    font-family: 'GenYoGothic';
    src: url('../websiteFont/GenYoGothic-EL.ttc') format('collection');
    font-weight: 200;
    font-style: normal;
}

/* Light */
@font-face {
    font-family: 'GenYoGothic';
    src: url('../websiteFont/GenYoGothic-L.ttc') format('collection');
    font-weight: 300;
    font-style: normal;
}

/* Normal / Regular */
@font-face {
    font-family: 'GenYoGothic';
    src: url('../websiteFont/GenYoGothic-R.ttc') format('collection'),
         url('../websiteFont/GenYoGothic-N.ttc') format('collection');
    font-weight: 400;
    font-style: normal;
}

/* Medium */
@font-face {
    font-family: 'GenYoGothic';
    src: url('../websiteFont/GenYoGothic-M.ttc') format('collection');
    font-weight: 500;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'GenYoGothic';
    src: url('../websiteFont/GenYoGothic-B.ttc') format('collection');
    font-weight: 700;
    font-style: normal;
}

/* Heavy */
@font-face {
    font-family: 'GenYoGothic';
    src: url('../websiteFont/GenYoGothic-H.ttc') format('collection');
    font-weight: 900;
    font-style: normal;
}

/* --- 全站預設套用 --- */
html, body {
    font-family: 'GenYoGothic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*, body, h1, h2, h3, h4, h5, h6, a, p, select  {
	font-family: 'GenYoGothic', -apple-system, BlinkMacSystemFont, "微軟正黑體", "Microsoft JhengHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/*文字反選顏色*/
::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);
}*/


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: 1vw auto;
	width: 100%;
	height: 1px;
	background: #000;
}

/*------------------------WebStart----------------------*/
#wrap {
	display: block;
	position: relative;
}
/*-------------------------Header-----------------------*/
header {
	display: block;
	position: fixed;
	background: rgba(255, 255, 255, .8);
	width: 100%;
	z-index: 10;
}

.Logo {
display: block;
    position: absolute;
    width: 2vw;
    top: 1.5vw;
    left: 1.5vw;
	z-index: 1;
}

.Logo a {
	
}

.Logo a:hover {
	
}

/*---------------------------Menu-----------------------*/
.Menu {
	display: block;
	position: relative;
	width: 100%;
}

nav {
	display: block;
}

nav ul {
	display: flex;
	position: relative;
	justify-content: center;
}

nav ul li {
	margin: 0 1vw;
	padding: 1.5vw 0;
}

nav ul li a {
	font-size: 1.2vw;
	color: #17315D;
	line-height: 2vw;
	display: block;
	position: relative;
}

nav ul li.active a, nav ul li.active a:hover {
	color: #007ccf;
	font-weight: bold;
}

nav ul li a:hover {
	color: #0f5ac8;
}

nav ul li.active a::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0.2vw;
    background: #007ccf;
    bottom: -0.2vw;
}



#CerBtn {
    display: block;
    width: 8vw;
    text-align: center;
    position: absolute;
    top: 1.25vw;
    right: 1vw;
    height: 2.5vw;
}

#CerBtn a {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1.2vw;
    font-weight: bold;
    line-height: 2.5vw;
    color: #fff;
    background: linear-gradient(to bottom, rgba(44,95,181,1) 0%,rgba(0,50,136,1) 100%);
}

#CerBtn a:hover {
    background: linear-gradient(to bottom, rgba(0,50,136,1) 0%, rgba(44,95,181,1) 100%);
}

#CerBtn a::before {
    content: "";
    display: inline-block;
    background: url(../images/icon_Location.png) center no-repeat;
    background-size: contain;
    width: 1vw;
    height: 2.5vw;
    vertical-align: middle;
    margin-right: 0.2vw;
}


/*-----手機版選單------*/
.MenuBtn {
    display: none;
    position: absolute;
    text-align: center;
	right: 1.5vw;
    top: 2.5vw;
    width: 8vw;
    height: 8vw;
	
}

.MenuBtn a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.MenuBtnLine {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.MenuBtnLine span {
    display: block;
    position: absolute;
    width: 100%;
    height: 1.2vw;
    background: #1e3862;
    border-radius: 1vw;
    left: 0;
    transition: .5s;
}

.MenuBtnLine span:nth-child(1) {
    top: 0;
}

.MenuBtnLine span:nth-child(2) {
    top: calc(50% - 0.6vw);
	opacity: 1;
}

.MenuBtnLine span:nth-child(3) {
    bottom: 0;
}

header.active .MenuBtnLine span:nth-child(1) {
    transform: rotate(45deg);
    top: calc(50% - 0.6vw);
}

header.active .MenuBtnLine span:nth-child(2) {
    opacity: 0;
}

header.active .MenuBtnLine span:nth-child(3) {
    transform: rotate(-45deg);
    top: calc(50% - 0.6vw);
}



.MenuBtnTxt {
    font-size: 3vw;
    font-weight: bold;
    color: #fff;
}


.MenuBtn.active .MenuBtnTxt {
    color: #112db3;
}

.MenuBtn.active .MenuBtnLine span {
    background: #112db3;
}

.MenuBtn.active .MenuBtnLine span:nth-child(2) {
    opacity: 0;
}

.MenuBtn.active .MenuBtnLine span:nth-child(1) {
    transform: rotate(45deg);
}

.MenuBtn.active .MenuBtnLine span:nth-child(3) {
    transform: rotate(-45deg);
}

.MenuBtn.active .MenuBtnLine span:nth-child(1), .MenuBtn.active .MenuBtnLine span:nth-child(3) {
    top: 50%;
}


/*-------------------------BODY-------------------------*/
article {
    padding-top: 5vw;
}

section {
    position: relative;
}

/*-------------------------FOOTER-----------------------*/
footer {
	display: block;
	padding: 3vw 0;
	background: #1e3862;
	color: #fff;
}

#footer {
	width: 82.5%;
	margin: 0 auto;
}

#footer h5 {
    font-size: 1.2vw;
}

#footer ul {
    list-style: disc;
    padding-left: 0.8vw;
}

#footer ul li {
    font-size: 0.8vw;
}

#footer ul li b {
    font-size: inherit;
}
/*--------------------------共用項目-------------------------------*/
img {
    display: block;
    width: 100%;
    height: auto;
}


/*----------內頁第二層選單----------*/
.SideMenu {
    display: block;
    background: rgba(255, 255, 255, .8);
    position: sticky;
    top: 5vw;
    z-index: 5;
}

.topline {
    border-top: 1px solid #18315d;
}

/*--- 淺藍色選單 ---*/
.lightBlueMenu ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightBlueMenu ul li {
    margin: 0 0.5vw 1vw;
}

.lightBlueMenu ul li a {
    display: block;
    font-size: 1vw;
    border: 1px solid #007CCF;
    color: #007CCF;
    padding: 0 0.5vw;
}

.lightBlueMenu ul li.active a {
    background: #007CCF;
    color: #FFF;
    font-weight: bold;
}


/*--- 深藍色選單 ---*/
.darkBlueMenu {
    display: block;
    width: 80%;
    margin: 0 auto;
    padding: 1vw 0;
}

.darkBlueMenu ul {
    display: flex;
    justify-content: center;
}

.darkBlueMenu li a {
    font-size: 1vw;
    color: #17315D;
    display: block;
    border: 1px solid #18315D;
    padding: 0.2vw 0.5vw;
}

.darkBlueMenu li.active a {
    background: #17315D;
    color: #fff;
}

.darkBlueMenu li {
    margin: 0.2vw 0.5vw;
}


/*---選單說明---*/
.BlueMenuInfo {
    text-align: center;
}

.BlueMenuInfoTItle {
    font-size: 1vw;
    font-weight: bold;
}

.BlueMenuInfoType {
    display: flex;
    justify-content: center;
    gap: 1vw;
    padding: 0.5vw 0;
}

.BlueMenuInfoType > div {
    border: 1px solid #16315d;
    padding: 0.2vw 0.5vw;
    font-size: 0.8vw;
    cursor: no-drop;
}

.BlueMenuInfoType > div:first-child {
    color: #fff;
    background: #16315d;
}

.BlueMenuInfoType > div:last-child {
    color: #16315d;
}

.BlueMenuInfoNote {
    font-size: 0.8vw;
    color: #7c7c7c;
}

.BlueMenuInfoNote span {
    font-size: inherit;
	color: #FF474A;
}



/*---------- 複選 ----------*/
/* 1. 隱藏原始的 Checkbox 方框 */
.darkBlueMenu input[type="checkbox"] {
    display: none;
}

/* 2. 讓 label 繼承原本 a 標籤的樣式 */
.darkBlueMenu li label {
    font-size: 1vw;
    color: #17315D;
    display: block;
    border: 1px solid #18315D;
    padding: 0.2vw 0.5vw;
    cursor: pointer; /* 增加滑鼠手型指針，優化體驗 */
    transition: all 0.2s ease; /* 增加一點轉場效果 */
}

/* 3. 當 Checkbox 被選取時，改變 label 的背景與顏色 (模擬 .active) */
/* 使用 :has() 選擇器，當 label 裡面包含被勾選的 input 時觸發 */
.darkBlueMenu li label:has(input:checked) {
    background: #17315D;
    color: #fff;
}

/* 滑鼠懸停效果 (選配，增加互動感) */
.darkBlueMenu li label:hover {
    background: rgba(23, 49, 93, 0.1);
}

/* 確保原本 li 的間距一致 */
.darkBlueMenu li {
    margin: 0.2vw 0.5vw;
}


/*---------- 標題設定 ----------*/
h1.PageTitle {
    font-size: 2.5vw;
    text-align: center;
    color: #18315d;
}

h2.secTitle {
    font-size: 2vw;
    text-align: center;
    color: #18315d;
    margin-bottom: 1vw;
}





/*-----------麵包屑----------*/
#breadcrumb {
    display: flex;
    width: calc(100% - 2vw);
    margin: 0 auto;
    padding: 0.5vw 1vw;
    background: rgba(0, 0, 0, 0.2);
    align-items: center;
}

#breadcrumb > div {
    font-size: 1vw;
    color: #fff;
    font-weight: bold;
}

#breadcrumb nav {
    display: block;
    color: #fff;
}

#breadcrumb nav ol {
    display: flex;
    align-items: center;
	flex-wrap: wrap;
}

#breadcrumb nav ol li a, #breadcrumb nav ol li {
    font-size: 1vw;
}

#breadcrumb nav ol li::after {
    content: "/";
    padding: 0 0.5vw;
}

#breadcrumb nav ol li a {
    text-decoration: underline;
    color: #FFDD4E;
}

#breadcrumb nav ol li:last-child::after {
    display: none;
}


/*----------文章內文格式設定----------*/
.Content {
    display: block;
	font-size: 1vw;
}

.Content p, .Content a, .Content ul, .Content ol, .Content li, .Content b, .Content i, .Content span {
	font-size: 1em;
}

.Content p {
}

.Content h2 {
    font-size: 1.6em;
    margin-bottom: 1vw;
    color: #19264b;
}

.Content h3 {
    font-size: 1.2em;
    color: #19264b;
}

.Content img {
	width: auto;
	height: auto;
	max-width: 100%;
}

/*----------右側固定按鈕----------*/
#ScrolTopBtn {
}

/*--------------------------內容開始-------------------------------*/
.view_w {display: block;}
.view_m {display: none;}



/*---------- 首頁 ----------*/
#index_kv {
	width: 100%;
	padding-top: 30vw;
	background: url("../../data/index/KV.jpg") center no-repeat;
	background-size: contain;
}


#indexInfo, #indexFAQ {
    display: flex;
    padding: 3vw;
    width: 65%;
    border-radius: 0.5vw;
    background: #1e3862;
    color: #fff;
    margin: 0 auto 5vw;
    align-items: stretch;
}

.indexInfoLinkBk, .indexFAQLinkBk {
    width: 16%;
    padding: 0.5vw 3vw 0.5vw 0;
    border-right: 1px solid #fff;
    margin-right: 3vw;
}

.indexInfoLinkBk h2, .indexFAQLinkBk h2 {
    font-size: 2vw;
    margin-bottom: 0.5vw;
}

.IndexInfoLink a {
    display: flex;
    justify-content: flex-start;
    gap: 0.5vw;
}

.IndexInfoLink a span {
    font-size: 1.2vw;
    line-height: 2vw;
    text-decoration: underline;
}

.IndexInfoLink a::after {
    content: "→";
    display: block;
    font-size: 1.5vw;
    line-height: 2vw;
    width: 2vw;
    border: 1px solid;
    text-align: center;
    border-radius: 1vw;
    transition: .5s;
}

.IndexInfoLink.w a {
    color: #fff;
}

.IndexInfoLink.w a::after {
    border-color:#fff;
}

.IndexInfoLink.w a:hover::after {
    background: #fff;
    color: #1e3862;
}

.IndexInfoLink.b a {
    color: #1e3862;
}

.IndexInfoLink.b a::after {
    border-color:#1e3862;
}

.IndexInfoLink.b a:hover::after {
    background: #1e3862;
    color: #fff;
}










.indexInfoContent h3 {
    font-size: 1.5vw;
}

.indexInfoContent {
    display: block;
    width: calc(84% - 6vw - 1px);
    padding: 0.5vw 0;
}

.indexInfoContent .Content {
    margin-bottom: 1vw;
}

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

.indexInfoIcon ul li {
    width: 13%;
}

.IndexInfoIconTag {
    font-size: 1.19vw;
    text-align: center;
}

.indexInfoIcon img {
    width: 4vw;
    margin: 0 auto;
}





#indexBk_2 {
    padding: 0 0 5vw;
    width: 70%;
    margin: 0 auto;
}

.indexBk h2 {
    font-size: 2vw;
    margin-bottom: 1vw;
    color: #1e3862;
}

ul.Index_selectInfo {
    display: flex;
    justify-content: space-between;
    padding: 1vw 0;
}

ul.Index_selectInfo > li {
    width: 30%;
}

ul.Index_selectInfo h3 {
    font-size: 1.5vw;
    text-align: center;
    color: #1e3862;
    margin-bottom: 0.5vw;
}

.blueTag {
    margin: 0 auto;
    display: block;
    width: 5vw;
    background: #007CCF;
    text-align: center;
    color: #fff;
    font-size: 1.1vw;
    border-radius: 2vw;
    margin-bottom: 0.5vw;
}

ul.Index_selectInfo .Content span::after {
    content: "";
    margin: 0 0.5vw;
    border-right: 1px solid #333;
}

ul.Index_selectInfo .Content span:last-child::after {
    display: none;
}

ul.Index_selectInfo .Content {
    color: #333;
}





#indexBk_3 {
    background: #EFEFEF;
    border-radius: 0.5vw;
    padding: 2vw;
    width: calc(70% - 4vw);
    margin: 0 auto;
}

#indexBk_3 .index_Content {
    display: flex;
}

#indexBk_3 .index_ContentTxt {
    width: 26%;
    margin-right: 4%;
}

#indexBk_3 .index_ContentTxt .Content {
    margin-bottom: 1vw;
}

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

ul.Cataract_Technology_STEP li {
    width: 32%;
}

#indexBk_3 .index_ContentImg {
    width: 70%;
}

ul.Cataract_Technology_STEP li img {
    margin-bottom: 0.5vw;
}

ul.Cataract_Technology_STEP li div {
    text-align: center;
    font-size: 1vw;
}





#index_News {
    padding: 5vw 0;
    width: 70%;
    margin: 0 auto;
}

ul.index_NewsList {
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

ul.index_NewsList > li {
    width: 24%;
}


ul.index_NewsList a {
    display: block;
}


ul.index_NewsList h5 {
    font-size: 1.2vw;
    color: #18315d;
    padding: 0.5vw 0;
}







.indexFAQContent h3 {
    font-size: 1.5vw;
}

.indexFAQContent {
    display: block;
    width: calc(84% - 6vw - 1px);
    padding: 0.5vw 0;
}

.indexFAQContent .Content {
    margin-bottom: 1vw;
}





/*---------- Cataract, SOAL, GACT ----------*/
#Cataract section, #SOAL section, #GACT section  {
    width: 70%;
    margin: 0 auto;
    padding: 5vw 0;
    border-bottom: 1px solid #18315d;
}

#Cataract section:last-child, #SOAL section:last-child, #GACT section:last-child {
    border-bottom: none;
}

.secDec {
    width: 80%;
    margin: 0 auto;
}

.secDec.Content p {
    margin-bottom: 1vw;
}

.secDec.Content p:last-child {
    margin-bottom: 0;
}

.secImg {
    margin: 2vw auto 0;
}


.secImg img {
    width: auto;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}







#indexBk_5 {
    padding: 5vw 0;
    width: 70%;
    margin: 0 auto;
}

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

.indexSearchBk > div {
    width: calc(50% - 5vw - 0.5px);
}

.indexSearch_Cer {
    border-right: 1px solid #1e3862;
    padding-right: 5vw;
    margin-right: 5vw;
}

.indexSearchBk .CerLocateSearch {
    display: flex;
    justify-content: flex-start;
    padding: 0vw 0 1vw;
}




/*---------- SOAL ----------*/
/*----- 互動遊戲 -----*/
/* 基礎頁面控制 */
.GamePage, .result-box, .GameDisclaimer {
    display: none;
}

/* 第一頁 */
#GamePage_1 {
    display: flex;
    justify-content: center;
    gap: 5vw;
    align-items: center;
}

.GamePage1_Btn button {
    border: none;
    background: linear-gradient(to bottom,  rgba(44,95,181,1) 0%,rgba(0,50,136,1) 100%);
    color: #fff;
    padding: 3vw 1.5vw;
    cursor: pointer;
    transition: 0.5s;
    font-weight: bold;
}

.GamePage1_Btn button span {
    text-align: center;
    display: block;
}

.GamePage1_Btn button span:first-child {
    font-size: 2vw;
    margin-bottom: 0.5vw;
}

.GamePage1_Btn button span:last-child {
    font-size: 1.2vw;
}

.GamePage {
    height: 25vw;
}

.GamePage1_Btn button:hover {
    background: linear-gradient(to bottom, rgba(0,50,136,1) 0%, rgba(44,95,181,1) 100%);
}


/* 第二頁 */
.QNum {
  margin: 0 auto 1vw;
  width: 4vw;
  height: 3vw;
  background-color: #5e5e5e;
  color: white;
  font-family: sans-serif;
  font-size: 1.5vw;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1vw;
  box-sizing: border-box;
  -webkit-mask-image: radial-gradient(circle at 50% 130%, transparent 40%, black 40.5%);
  mask-image: radial-gradient(circle at 50% 160%, transparent 50%, black 0%);
}

.GamePage h3 {
    text-align: center;
    color: #007CCF;
    font-size: 1.2vw;
    margin-bottom: 1vw;
}

.GameBtnGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
}

/* 隱藏原始 Checkbox/Radio */
.GameBtnLabel input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.GameBtnStyle {
    box-shadow: 0 0 0.5vw 0 #c2c2c2;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.GameBtnTitle {
    background: #007ccf;
    text-align: center;
    color: #fff;
    font-size: 1.2vw;
    font-weight: bold;
    padding: 0.3vw 0;
}

.GameBtnContent {
    padding: 0.8vw;
    border: 0.2vw solid #ffffff;
    transition: .5s;
    border-top: none;
}

label:hover .GameBtnContent, .GameBtnLabel input:checked + .GameBtnStyle .GameBtnContent {
    border: 0.2vw solid #007ccf;
    border-top: none;
	filter: brightness(1) blur(0);
}

#GamePage_2 .GameBtnLabel input:checked + .GameBtnStyle .GameBtnContent {
    background: #d1f0ff;
}


.GameBtn1Img {
    display: block;
    margin: 0 auto 1vw;
    height: 7vw;
}

.GameBtn1Txt {
    font-size: 1vw;
    text-align: center;
    color: #595959;
    line-height: 1.5vw;
    height: 4.5vw;
}

.GameBtn1Txt.Multiple {
    display: flex;
}

.GameBtn1Txt.Multiple > div {
    width: 50%;
}

.GameBtn1Txt.Multiple > div:first-child {
    border-right: 1px dashed #333;
    padding-right: 0.5vw;
}

.GameBtn1Txt.Multiple > div span {
    display: block;
}

.GameBtn1Txt.Multiple > div:last-child {
    padding-left: 0.5vw;
}

.GameBtn1Img img {
    height: 100%;
    width: auto;
    margin: 0 auto;
}

.GameBtn1Txt.Multiple > div span:first-child {
    font-size: 1vw;
}

.GameBtn1Txt.Multiple > div span:last-child {
    font-size: 1vw;
}

.GameBtnLabel {
    cursor: pointer;
}

.GameBtnGroup li {
    width: 20vw;
}



.GameBtn1Txt.Single {
    width: 85%;
    margin: 0 auto;
}

.GameNextBtn, .GameRestartBtn {
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
}

.GameNextBtn button, .GameRestartBtn button {
    border: none;
    background: linear-gradient(to bottom,  rgba(44,95,181,1) 0%,rgba(0,50,136,1) 100%);
    color: #fff;
    padding: 0.5vw 1vw;
    width: 10vw;
    font-size: 1.2vw;
    font-weight: bold;
    cursor: pointer;
}


.GameBtnStyle:hover {
    border-color: #005596; /* 蔡司藍色參考 */
    background-color: #f9f9f9;
}



/* Q2 圖片容器 */
.GameBtn2Img {
    height: 12.5vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0.5) blur(3px);
}

/* 結果頁連結樣式 */
#ResultLink {
    display: flex;
    padding: 1vw 0;
    gap: 1vw;
}

#ResultLink a {
    padding: 0.5vw 1vw;
    background: #fff;
    color: #003288;
    font-size: 1.2vw;
    font-weight: bold;
    line-height: 1.2vw;
    border-radius: 5px;
}

#ResultLink a:hover {
    background: #003288;
    color: #fff;
}

.resultBk {
    height: calc(100% - 8vw);
    padding: 4vw;
    background: rgba(23, 49, 93, 0.8);
    color: #fff;
}

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

.GameDisclaimer ol {
    list-style: disc;
    padding-left: 1.2vw;
}

.GameDisclaimer ol li {
    font-size: 1.2vw;
}







/*----- 阿貝系數 -----*/
#Abbe {
    display: block;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: calc(100% - 3.3vw);
	transition: .5s;
}

#Abbe.active {
    top: 0;
	background: rgba(0, 0, 0, .5);
}

#Abbe .AbbeTitle {
	background: -webkit-linear-gradient(rgba(90,90,90,1) 0%, rgba(175,175,175,1) 100%);
	background: -o-linear-gradient(rgba(90,90,90,1) 0%, rgba(175,175,175,1) 100%);
	background: linear-gradient(rgba(90,90,90,1) 0%, rgba(175,175,175,1) 100%);

	/* 基礎設定 */
	padding: 0.5vw 3vw; /* 增加左右 padding 給予裁切空間 */
	color: white;
	text-align: center;
	font-weight: bold;
	font-size: 1vw;
	width: fit-content;
	margin: 0 auto;
  
	/* 關鍵屬性：裁切成梯形 (左上, 右上, 右下, 左下) */
	/* 讓上方左右各縮進 10% */
  	clip-path: polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%);
	cursor: pointer;
	transition: .5s;
}

#Abbe.active .AbbeTitle {
	background: -webkit-linear-gradient(rgba(0,50,136,1) 0%, rgba(44,95,181,1) 100%);
	background: -o-linear-gradient(rgba(0,50,136,1) 0%, rgba(44,95,181,1) 100%);
	background: linear-gradient(rgba(0,50,136,1) 0%, rgba(44,95,181,1) 100%);
}

.AbbeTitleBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1vw;
}

#Abbe .AbbeTitleBtn .icon {
	/* 旋轉 90 度讓雙箭頭朝上 */
	transform: rotate(90deg);
	position: relative;
	font-size: 1.5vw;
	transition: .5s;
    animation-name: AbbeArrow;
    animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes AbbeArrow{
    0%{
    	top: -0.2vw;
    }
	50%{
    	top: -0.2vw;
    }
    100%{
    	top: 0.2vw;
    }
}

#Abbe.active .AbbeTitleBtn .icon {
	/* 旋轉 90 度讓雙箭頭朝上 */
	transform: rotate(-90deg);
	letter-spacing: .1vw;
	transition: .5s;
}

.AbbeTitleBtn h2 {
	 font-size: 1.2vw;
}

.AbbeBk {
	background: #fff;
	position: relative;
	overflow: auto;
	height: calc(100vh - 3vw);
}

#Abbe .AbbeBk::before {
	content: "";
	display: block;
	position: sticky;
	top: 0;
	width: 100%;
	height: 0.5vw;
	background: -webkit-linear-gradient(rgba(175,175,175,1) 0%, rgba(175,175,175,0) 100%);
	background: -o-linear-gradient(rgba(175,175,175,1) 0%, rgba(175,175,175,0) 100%);
	background: linear-gradient(rgba(175,175,175,1) 0%, rgba(175,175,175,0) 100%);
	transition: .5s;
}

#Abbe.active .AbbeBk::before {
	background: -webkit-linear-gradient(rgba(44,95,181,1) 0%, rgba(44,95,181,0) 100%);
	background: -o-linear-gradient(rgba(44,95,181,1) 0%, rgba(44,95,181,0) 100%);
	background: linear-gradient(rgba(44,95,181,1) 0%, rgba(44,95,181,0) 100%);
}


.AbbeContent {
    width: 66%;
    margin: 0 auto;
    padding: 4vw 0;
}

.AbbeContent .Text {
    font-size: 1vw;
    text-align: center;
    margin-bottom: 2vw;
}


.Abbe_ContentImg {
    display: flex;
    justify-content: space-between;
	margin-bottom: 2vw;
}

.Abbe_ContentImg img {
    width: 25%;
}

.AbbeContent h5 {
    font-size: 1.6vw;
}


/* 基礎設定 */
.step-wrapper {
  display: flex;
  flex-direction: row; /* 電腦版預設橫排 */
  width: 100%;
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* 箭頭區域通用樣式 */
.stepArrow {
    padding: 0.5vw 1vw;
    color: white;
    min-height: 5.5vw;
    display: flex;
    flex-direction: column;
    position: relative;
	text-align: left;
}

.stepArrow h3 {
    margin: 0 0 0.5vw 0;
    font-size: 1.2vw;
}

.stepArrow p {
  margin: 0;
  font-size: 1vw;
}

/* 圖片區域 */
.AbbeStepImg {
    width: 96%;
}

.step-2 .AbbeStepImg {
	background: rgba(48, 103, 196, .05);
}

.AbbeStepImg img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.step-wrapper {
margin-left: 0;
}

.step {
margin-left: -1vw; /* 負邊距達成重疊效果 */
}

.step-1 { margin-left: 0; z-index: 3; }
.step-2 { z-index: 2; }
.step-3 { z-index: 1; }

/* 第一個區塊：右側凸，左側平 */
.step-1 .stepArrow {
background-color: #0078d4;
	clip-path: polygon(0% 0%, calc(100% - 1vw) 0%, 100% 50%, calc(100% - 1vw) 100%, 0% 100%);
	padding-left: 10%;
}

/* 中間與最後區塊：左側凹，右側凸 */
.step-2 .stepArrow, .step-3 .stepArrow {
    clip-path: polygon(0% 0%, calc(100% - 1vw) 0%, 100% 50%, calc(100% - 1vw) 100%, 0% 100%, 1vw 50%);
    padding-left: 10%;
}

.step-2 .stepArrow { background-color: #3b71ca; }
.step-3 .stepArrow { background-color: #1c355e; }








/*---------- NEWS ----------*/
.darkBlueMenu li label:has(input:checked) {
    background: #17315D;
    color: #fff;
}

ul#NewsList {
    display: flex;
    padding: 5vw 0;
    width: 70%;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

ul#NewsList > li {
    width: 47%;
    margin-bottom: 2vw;
    display: none; /* 由 jQuery fadeIn 控制顯示 */
}


ul#NewsList a {
    display: block;
}

.NewsCover {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    height: 0;
    background-size: cover !important;
    background-position: center !important;
}

.NewsCover > div {
    display: block;
    position: absolute;
	filter: drop-shadow(0 0 0.5vw #000)
}

.Yt {
    width: 10%;
    left: 45%;
    top: 47%;
}

.News {
    width: 10%;
    left: 45%;
    top: 45%;
}

ul#NewsList h5 {
    font-size: 1.2vw;
    color: #18315d;
    padding: 0.5vw 0;
}

ul.hashTag {
    display: flex;
    border-top: 1px solid #7c7c7c;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5vw;
}

ul.hashTag li {
    margin: 0.2vw;
}

ul.hashTag li a {
    border: 1px solid #18315d;
    padding: 0 0.5vw;
    border-radius: 5vw;
    color: #18315d;
    font-size: 0.8vw;
}



/* 隱藏不符合篩選的項目 */
#NewsList li.is-hidden { display: none !important; }
/* Lazyload 隱藏尚未加載的項目 */
#NewsList li.is-lazy { display: none; }



/*---------- FAQ ----------*/
#FAQ section {
    padding: 5vw 0;
}

.FAQTitle {
    display: block;
    width: 68%;
    margin: 0 auto 1vw;
    font-size: 2vw;
    border-left: 1vw solid #007CCF;
    color: #007CCF;
    padding-left: 1vw;
}

.FAQList {
    width: calc(68% + 2vw);
    margin: 0 auto;
}

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

.FAQ_Q {
    font-size: 1.2vw;
    font-weight: bold;
    color: #18315d;
    padding: 1vw 0;
}

.FAQ_A {
    padding: 0 0 1vw;
    color: #414141;
}

#FAQ section:nth-child(even) {
    background: #f2f6f9;
}







/*---------- 認證院所 ----------*/
.CerLocateSearch, .NewsTitleSearch {
    padding: 2vw 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CerLocateSearch select {
    margin-right: 1vw;
    font-size: 1vw;
    height: calc(2.4vw + 2px);
    padding: 0.2vw 1vw 0.2vw 0.5vw;
    border-radius: 0;
    border: 1px solid #EFEFEF;
    color: #6e6e6e;
}

.CerLocateSearch input[type="text"], .NewsTitleSearch input[type="text"] {
    font-size: 1vw;
    line-height: 2vw;
    padding: 0.2vw;
    border-radius: 0;
    border: 1px solid #EFEFEF;
    border-right: 0;
    width: 20vw;
}

.CerLocateSearch input[type="submit"], .CerLocateSearch input[type="button"], .NewsTitleSearch input[type="button"] {
    width: calc(2.4vw + 2px);
    height: calc(2.4vw + 2px);
    border: 0;
    font-size: 0;
    background: url("../images/icon_cer_search.svg") center no-repeat, #007CCF;
    background-size: contain;
	cursor: pointer;
}

.SearchResults {
    padding-bottom: 2vw;
    text-align: center;
    font-size: 1vw;
}

.SearchResults span {
    padding: 0 0.5vw;
    color: #e11d1d;
    font-size: inherit;
}

#NoExpertMsg {
    display:none;
    text-align:center;
    padding: 50px 0;
    font-size: 1.2vw;
    color: #18315d;
}

.PlaceBlockMenu {
    padding-bottom: 2vw;
}

.PlaceBlockMenu ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

.PlaceBlockMenu ul li a {
    display: block;
    font-size: 1vw;
    color: #007ccf;
    border: 1px solid #007ccf;
    padding: 0.2vw 1vw;
    font-weight: bold;
}

.PlaceBlockMenu ul li {
    margin: 0 0.5vw;
}

.PlaceBlockMenu ul li.active a, .PlaceBlockMenu ul li.active a:hover {
    background: #007ccf;
    color: #fff;
}

.PlaceBlockMenu ul li a:hover {
    background: #ddf1ff;
}

.HighLevelInfo {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.HighLevelIcon {
    background: #dede4c;
    color: #fff;
    text-align: center;
    border-radius: 10vw;
    transform: rotate(-20deg);
    font-weight: bold;
}

.HighLevelInfo .HighLevelIcon {
    width: 2.5vw;
    height: 2.5vw;
    line-height: 2.5vw;
    font-size: 0.8vw;
    margin-right: 0.5vw;
}

.HighLevelTxt > div:first-child::before {
    content: "高階";
    display: block;
    position: absolute;
    background: #dede4c;
    color: #fff;
    text-align: center;
    border-radius: 10vw;
    transform: rotate(-20deg);
    font-weight: bold;
    width: 2.5vw;
    height: 2.5vw;
    line-height: 2.5vw;
    font-size: 0.8vw;
    left: 0;
    top: 0;
}

.HighLevelTxt > div {
    font-size: 1vw;
    line-height: 2.5vw;
    padding-left: 3vw;
    position: relative;
}

.HighLevelTxt > div > span {
    font-size: inherit;
}

#CertifiedContent {
    width: 70%;
    margin: 0 auto;
    padding: 2vw 0;
    border-top: 1px solid #000;
}


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

.HighLevelSelect input {
    width: 1.2vw;
    height: 1.2vw;
	vertical-align: middle;
}

.HighLevelSelect label {
    font-size: 1.2vw;
    color: #1e3862;
    font-weight: bold;
	vertical-align: middle;
}




ul.CerList {
    display: flex;
    width: 90%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
}

ul.CerList > li {
    width: 45%;
    position: relative;
    margin-bottom: 2vw;
	transition: transform 0.3s ease; /* 增加一點點位移感 */
}

ul.CerList .HighLevelIcon {
    width: 2.5vw;
    height: 2.5vw;
    line-height: 2.5vw;
    font-size: 1vw;
    position: absolute;
    right: 0;
    top: 0;
}

ul.CerList h3 {
    font-size: 1.5vw;
    line-height: 2vw;
    padding: 0.5vw 3vw 0.5vw 0vw;
    color: #17315d;
    border-bottom: 1px solid #17315d;
}

.ContactInfo {
    padding: 0.5vw 0;
}

.ContactInfo li a {
    line-height: 2.5vw;
    font-size: 1vw;
    color: #5a5a5a;
    text-decoration: underline;
}

.ContactInfo li a::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5vw;
    width: 2vw;
    height: 2vw;
    border-radius: 2vw;
    background-size: cover !important;
}


.ContactInfo li.tel a:hover {
    color: #007ccf;
}

.ContactInfo li.tel a::before {
    background: url(../images/icon_cer_tel.svg) no-repeat center left, #007ccf;
}

.ContactInfo li.local a:hover {
    color: #333333;
}

.ContactInfo li.local a::before {
    background: url(../images/icon_cer_location.svg) no-repeat center left, #333333;
}

.ContactInfo li.site a:hover {
    color: #8dd1f2;
}

.ContactInfo li.site a::before {
    background: url(../images/icon_cer_site.svg) no-repeat center left, #8dd1f2;
}

.ContactInfo li.fb a:hover {
    color: #0a66ff;
}

.ContactInfo li.fb a::before {
    background: url(../images/icon_cer_fb.svg) no-repeat center left, #0a66ff;
}

.ContactInfo li.ig a:hover {
    color: #f301ba;
}

.ContactInfo li.ig a::before {
    background: url(../images/icon_cer_ig.svg) no-repeat center left, #f301ba;
}

.ContactInfo li.yt a:hover {
    color: #ff0000;
}

.ContactInfo li.yt a::before {
    background: url(../images/icon_cer_yt.svg) no-repeat center left, #ff0000;
}



/*----------尋找專家----------*/
.ExpertsList {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2vw 0;
    margin: 0 auto;
    border-top: 1px solid #000;
}

ul.ExpertsList > li {
    width: 45%;
    margin-bottom: 2vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.DrCover {
    width: 30%;
    padding-top: 40%;
    background-size: cover !important;
    background-position: center !important;
}

.DrInfo {
    width: 65%;
}

.DrInfo h3 {
    font-size: 2vw;
    color: #18315d;
}

.DrInfo h4 {
    font-size: 1.2vw;
}

.DrLink {
    margin-bottom: 0.5vw;
}

.DrLink a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #007ccf;
}

.DrLink a span {
    font-size: 1vw;
    text-decoration: underline;
}

.DrLink a::after {
    content: "→";
    line-height: 1vw;
    width: 1vw;
    text-align: center;
    border: 1px solid #007ccf;
    border-radius: 1vw;
    margin-left: 0.2vw;
}











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

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

}



/*--寬--*/
@media only screen and (max-width: 720px) {
.view_w {display: none;}
.view_m {display: block;}
	
	
/*----------共用----------*/
#Loading img {
    width: 15vw !important;
    margin-bottom: 10vw !important;
}

.LoadingLine {
    width: 60% !important;
    height: 2vw !important;
    border-radius: 1vw !important;
}	
	

	
/*---內容---*/	
.Content {
    font-size: 4vw;
}	
	
	
/*----------選單----------*/	
	
.Logo {
    width: 10vw;
}

.Menu {
    display: none;
	background: rgba(255, 255, 255, 0.9);
	top: 13vw;
	height: calc(100vh - 13vw);
}

header {
    height: 13vw;
}

.MenuBtn {
    display: block;
    
}
	
nav ul {
    flex-direction: column;
    align-items: center;
    padding-top: 5vw;
}

nav {
    display: block;
    margin: 0 auto 10vw;
    width: 70%;
}

nav ul li {
    border-bottom: 1px dashed #1e3862;
    margin: 0;
    width: 100%;
    text-align: center;
    padding: 0;
}

nav ul li a {
    font-size: 4vw;
    line-height: normal;
    padding: 3vw 0;
}

#CerBtn {
    position: relative;
    margin: 0 auto;
    top: auto;
    right: auto;
    width: 70%;
    height: 10vw;
}

#CerBtn a {
    font-size: 5vw;
    line-height: 10vw;
}

#CerBtn a::before {
    width: 4vw;
    height: 5vw;
    margin-right: 3vw;
    top: -0.5vw;
    position: relative;
}
	
	
/*--- 頁尾 ---*/
footer {
    padding: 10vw 0;
}

#footer {
    width: 90%;
}

#footer h5 {
    font-size: 5vw;
    text-align: center;
    margin-bottom: 2vw;
}

#footer ul {
    padding-left: 4vw;
}

#footer ul li {
    font-size: 3.5vw;
}
	
	
	
/*---頁面共用---*/
article {
    padding-top: 13vw;
}
	
.SideMenu {
	top: 13vw;
}
	

h1.PageTitle {
    font-size: 8vw;
    padding-top: 5vw;
}	
	
h2.secTitle {
    font-size: 6vw;
    margin-bottom: 3vw;
}

#Cataract section, #SOAL section, #GACT section {
    width: 90%;
    padding: 13vw 0;
}

.secImg {
    margin-top: 10vw;
}	
	
.Content iframe {
    width: 100% !important;
    height: 56.25vw !important;
}	
	
	
/*----- 選單 -----*/
/* 淺色 */
.lightBlueMenu ul li {
    margin: 0;
}

.lightBlueMenu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2vw;
}

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

.lightBlueMenu {
    width: 90%;
    margin: 0 auto;
}
	
/* 深色 */	
.darkBlueMenu {
    width: 85%;
    padding: 2vw 0;
}	
	
	
/* 選單說明 */
.BlueMenuInfoTItle {
    font-size: 3.5vw;
}

.BlueMenuInfoType {
    gap: 2vw;
    padding: 1vw 0;
}

.BlueMenuInfoType > div {
    font-size: 3vw;
    padding: 1vw 2vw;
}

.BlueMenuInfoNote {
    font-size: 3vw;
}
	
/*----------首頁----------*/
#index_kv {
    padding-top: 100vw;
}	
	
	
/*--- 第二區塊及第六區塊 ---*/	
	
#indexInfo, #indexFAQ {
    padding: 5%;
    width: 80%;
    border-radius: 2vw;
    flex-direction: column-reverse;
	margin-bottom: 15vw;
}

.indexInfoLinkBk, .indexFAQLinkBk {
    width: 100%;
    padding: 3vw 0 0 0;
    margin-right: 0;
    border-top: 1px solid #fff;
    border-right: none;
    display: flex;
    align-items: center;
    gap: 3vw;
}

.indexInfoLinkBk h2, .indexFAQLinkBk h2 {
    font-size: 9vw;
    margin-bottom: 0;
}

.IndexInfoLink a {
    gap: 1vw;
}

.IndexInfoLink a span {
    font-size: 4vw;
    line-height: 4vw;
}

.IndexInfoLink a::after {
    font-size: 3vw;
    line-height: 4vw;
    width: 4vw;
    border-radius: 2vw;
}

.indexInfoContent {
    width: 100%;
    margin-bottom: 3vw;
    padding: 0;
}

.indexInfoContent h3 {
    font-size: 5vw;
}

.indexInfoContent .Content {
    margin-bottom: 3vw;
}

.indexInfoIcon ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
}

.indexInfoIcon ul li {
    width: 30%;
}

.indexInfoIcon img {
    width: 15vw;
}

.IndexInfoIconTag {
    font-size: 4vw;
}
	
.indexFAQContent h3 {
    font-size: 5vw;
}

.indexFAQContent {
    width: 100%;
    padding: 0;
    margin-bottom: 3vw;
}
	
	
/*---第三區塊---*/	
#indexBk_2 {
    width: 90%;
    padding: 0 0 15vw;
}

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

ul.Index_selectInfo {
    flex-direction: column;
    gap: 5vw;
}

ul.Index_selectInfo > li {
    width: 100%;
}

ul.Index_selectInfo h3 {
    font-size: 5vw;
    margin-bottom: 1vw;
}

.blueTag {
    font-size: 4vw;
    width: 15vw;
    border-radius: 5vw;
    margin-bottom: 1vw;
}

ul.Index_selectInfo .Content span {display: block;text-align: center;}

ul.Index_selectInfo .Content span::after {
    display: none;
}

.IndexInfoLink.b a {display: flex;justify-content: center;}

.index_Content {
    margin-bottom: 5vw;
}	
	
	
/*---第四區塊---*/	
	
#indexBk_3 {
    width: 80%;
    padding: 5%;
    border-radius: 2vw;
}

#indexBk_3 .index_Content {
    flex-direction: column-reverse;
    margin-bottom: 0;
}

#indexBk_3 .index_ContentTxt {
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
}

#indexBk_3 .index_ContentImg {
    width: 100%;
    margin-bottom: 6vw;
}

ul.Cataract_Technology_STEP li {
    width: 75%;
}

ul.Cataract_Technology_STEP {
    flex-direction: column;
    align-items: center;
    gap: 5vw;
}

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

	
/*--- 第五區塊 ---*/
#index_News {
    padding: 15vw 0;
    width: 90%;
}

ul.index_NewsList {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5vw;
    margin-bottom: 5vw;
}

ul.index_NewsList > li {
    width: calc(50% - 1.25vw);
}

ul.index_NewsList h5 {
    font-size: 4vw;
}

	
/*--- 第六區塊 ---*/
.indexFAQContent h3 {
    font-size: 5vw;
}

.indexFAQContent {
    width: 100%;
    padding: 0;
    margin-bottom: 3vw;
}
	
	
/*--- 第七區塊 ---*/
#indexBk_5 {
    width: 90%;
    padding: 15vw 0;
}

.indexSearchBk {
    display: flex;
    flex-direction: column;
}

.indexSearchBk > div {
    width: 100%;
}

.indexSearch_Cer {
    border-right: 0;
    border-bottom: 1px solid #1e3862;
    margin-bottom: 5vw;
    padding-bottom: 5vw;
    padding-right: 0;
    margin-right: 0;
}

.indexSearchBk > div .index_Content {
    margin-bottom: 0;
}

.indexSearchBk .CerLocateSearch {
    padding-bottom: 6vw;
    justify-content: center;
}

.CerLocateSearch select {
    font-size: 4vw;
    margin-right: 3vw;
    padding: 1vw 2vw 1vw 1vw;
    height: 10vw;
}

.CerLocateSearch input[type="text"], .NewsTitleSearch input[type="text"] {
    font-size: 4vw;
    line-height: 8vw;
    padding: 1vw;
    width: 60%;
}

.CerLocateSearch input[type="submit"], .CerLocateSearch input[type="button"], .NewsTitleSearch input[type="button"] {
    width: 10vw;
    height: 10vw;
}
	

/* 搜尋結果 */	
.SearchResults {
    font-size: 4.5vw;
}	
	
#NoExpertMsg {
    font-size: 5vw;
}

	
/*----- 白內障 -----*/
.secImg {
    margin-top: 10vw;
}

.darkBlueMenu.topline {
    width: 90%;
    padding: 3vw 0;
}

.darkBlueMenu ul {
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 2vw;
    overflow: auto;
}

.darkBlueMenu li {
    margin: 0;
}

.darkBlueMenu li a {
    font-size: 3vw;
    white-space: nowrap;
}	
	
	
/*----- 人工水晶體的選擇 -----*/
/* 互動 */
.GamePage {
    height: auto;
}

.Game {
    overflow: hidden;
}

#GamePage_1 {
    display: flex;
    flex-direction: column;
}

.GamePage1_Btn button {
    padding: 10vw 5vw;
}

.GamePage1_Btn button span:first-child {
    font-size: 12vw;
    margin-bottom: 3vw;
}

.GamePage1_Btn button span:last-child {
    font-size: 5vw;
}

.QNum {
    font-size: 5vw;
    width: 8vw;
    height: 10vw;
    margin-bottom: 2vw;
}

.GamePage h3 {
    font-size: 5vw;
}

.GamePage2_Btn {
    width: 100%;       /* 改用 100% 適配父層 */
    max-width: 90vw;   /* 限制最大寬度為視窗的 90% */
    padding: 0.5vw 0;
    margin: 0 auto;    /* 居中 */
    overflow-x: auto;  /* 明確指定橫向溢出 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* 讓手機版滑動更流暢 */
}

.GameBtnGroup {
	display: flex;
	justify-content: space-between;
	width: 215%;
}

.GameBtnGroup li {
    width: 80%;
}

.GameBtnTitle {
    font-size: 4vw;
}

.GameBtn1Img {
    height: 25vw;
}

.GameBtn1Txt {
    font-size: 4vw;
    line-height: 5.5vw;
    height: 15vw;
}

.GameBtnContent {
    padding: 2vw;
    border-width: 1px;
}

.GameBtn1Txt.Multiple > div span:first-child {
    font-size: 4vw;
}

.GameBtn1Txt.Multiple > div span:last-child {
    font-size: 4vw;
}

.GameNextBtn, .GameRestartBtn {
    margin-top: 5vw;
    gap: 10vw;
}

.GameNextBtn button, .GameRestartBtn button {
    font-size: 5vw;
    padding: 2vw 2vw;
    width: 30vw;
}

.GameBtn2Img {
    height: 35vw;
}

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

#ResultLink a {
    padding: 1vw 2vw;
    font-size: 5vw;
    line-height: normal;
    border-radius: 5vw;
}

#ResultLink {
    display: flex;
    flex-wrap: wrap;
    gap: 3vw;
    padding: 3vw 0px;
}

.GameDisclaimer ol {
    padding-left: 4vw;
}

.GameDisclaimer ol li {
    font-size: 4vw;
}
	
	
/* 下方固定頁 */	
#Abbe .AbbeTitle {
    font-size: 5vw;
}

.AbbeTitleBtn h2 {
    font-size: 5vw;
}

#Abbe .AbbeTitleBtn .icon {
    font-size: 5vw;
}

#Abbe {
    top: calc(100% - 8.5vw);
}

.AbbeTitleBtn {
    padding: 0 5vw;
}

.AbbeContent {
    width: 90%;
    padding: 5vw 0;
}

.AbbeContent .Text {
    font-size: 4vw;
    margin-bottom: 5vw;
}

.Abbe_ContentImg {
    flex-direction: column;
    align-items: center;
    gap: 5vw;
    margin-bottom: 10vw;
}

.Abbe_ContentImg img {
    width: 80%;
}

.AbbeContent h5 {
    font-size: 6vw;
    text-align: center;
}

.AbbeBk {
    height: calc(100vh - 8.8vw);
}

.step-wrapper {
    display: flex;
    flex-direction: column;
}

.stepArrow {
    padding: 2vw;
    min-height: auto;
}

.step-1 .stepArrow, .step-2 .stepArrow, .step-3 .stepArrow {
    clip-path: none;
    padding-left: 2vw;
}

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

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

.AbbeStepImg {
    width: 100%;
}

.step {
    margin-left: 0;
}

.step-2 .AbbeStepImg {
    background: none;
}
	
	
	
/*----- 最新消息 -----*/
ul#NewsList {
    width: 90%;
    gap: 10vw;
    flex-direction: column;
    justify-content: space-between;
}

ul#NewsList > li {
    width: 100%;
    margin-bottom: 0;
}

ul#NewsList h5 {
    font-size: 5vw;
    padding: 2vw 0px;
}

#News .lightBlueMenu {
    margin-bottom: 5vw;
}
	
	
	
	
/*----- 醫師解答 -----*/
#FAQ section {
    padding: 10vw 0;
}
	
h2.FAQTitle {
    width: calc(90% - 4vw);
    font-size: 6vw;
    border-left: 2vw solid #007CCF;
    padding-left: 2vw;
    margin-bottom: 3vw;
}

.FAQList {
    width: 90%;
}

.FAQ_Q {
    font-size: 5vw;
    padding: 0;
    margin-bottom: 2vw;
}

.FAQList li {
    padding: 5vw 2vw;
}
	
	
	
/*----- 尋找專家 -----*/
.darkBlueMenu li label {
    font-size: 3.18vw;
}

.darkBlueMenu ul#FilterGroup {
    flex-wrap: wrap;
    padding: 2vw 0;
}	
	
.ExpertsList {
    width: 90%;
	flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 5vw 0;
    gap: 5vw;
}

ul.ExpertsList > li {
    width: 100%;
    margin-bottom: 0;
}

.DrCover {
    width: 45%;
    padding-top: 60%;
    margin-right: 5%;
}

.DrInfo h3 {
    font-size: 6vw;
}

.DrInfo h4 {
    font-size: 4vw;
}

.DrLink {
    margin-bottom: 2vw;
}

.DrLink a span {
    font-size: 4vw;
}

.DrLink a::after {
    line-height: 4vw;
    width: 4vw;
    border-radius: 2vw;
    font-size: 3vw;
    margin-left: 1vw;
}

ul.hashTag {
    padding-top: 3vw;
    gap: 2vw;
}

ul.hashTag li {
    margin: 0;
}

ul.hashTag li a {
    padding: 0.5vw 1.5vw;
    font-size: 3.6vw;
}
	
	
	
/*----- 尋找認證院所 -----*/
.HighLevelInfo .HighLevelIcon {
    width: 8vw;
    height: 8vw;
    line-height: 8vw;
    font-size: 3vw;
    margin-right: 1vw;
}

.HighLevelTxt > div {
    font-size: 4vw;
    line-height: 5vw;
    padding-left: 12vw;
}

.HighLevelTxt > div {
    margin-bottom: 5vw;
}

.HighLevelTxt > div:first-child::before {
    border-radius: 10vw;
    font-weight: bold;
     width: 10vw;
    height: 10vw;
    line-height: 10vw;
    font-size: 4vw;
}


.HighLevelTxt > div > span {
    display: block;
}


.HighLevelSelect input {
    width: 4vw;
    height: 4vw;
}

.HighLevelSelect label {
    font-size: 4vw;
}

.HighLevelSelect {
    margin-bottom: 5vw;
}	
	

.PlaceBlockMenu {
	padding-bottom: 0;
	margin: 5vw 0;
}

.PlaceBlockMenu ul {
    gap: 3vw;
}
	
.PlaceBlockMenu ul li {
    margin: 0;
}

.PlaceBlockMenu ul li a {
    font-size: 4.2vw;
}

#CertifiedContent {
    width: 90%;
    padding: 5vw 0;
}

ul.CerList {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5vw;
}

ul.CerList > li {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 2vw;
    border-bottom: 1px solid #17315d;
}

ul.CerList h3 {
    font-size: 6vw;
    line-height: normal;
    padding: 0 0 2vw;
    margin-bottom: 2vw;
    border-bottom: 1px dashed #d5d5d5;
}

.ContactInfo li a {
    line-height: normal;
    font-size: 4vw;
}

.ContactInfo li a::before {
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
}

ul.CerList .HighLevelIcon {
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
    font-size: 4vw;
}

ul.CerList .HighLevelIcon + h3 {
    padding-right: 10vw;
}
	
	
}