@charset "utf-8";
#Menu { margin-bottom:5vw; }
#Center .guide_title { position:absolute; top:0; left:0; }

/* 浮動效果 */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
	.MenuFix #Wrap { padding-top:calc(10vw + 60px + 5vw); }
}
@media screen and (min-width: 1280px) and (max-width: 1439px) {
	.MenuFix #Wrap { padding-top:calc(10vw + 80px + 5vw); }
}
@media screen and (min-width: 1440px) {
	.MenuFix #Wrap { padding-top:calc(145px + 80px + 5vw); }
}

/*----------------------------------------------------------------------*/
/* 背景 */
#KeyVisual::before, .IndexFocusGuide.ph::before, .IndexFocusGuide.md::before { content:''; display:block; position:absolute; z-index:-1; }
#KeyVisual::before { right:0; background:url(../images/bg1.png) right 0 no-repeat; background-size:contain; }
.IndexFocusGuide.ph::before { left:0; background:url(../images/bg2.png) left 0 no-repeat; background-size:contain; }
.IndexFocusGuide.md::before { right:0; background:url(../images/bg3.png) right 0 no-repeat; background-size:contain; }

@media screen and (max-width:639px) {
#KeyVisual::before { top:50%; width:70.2vw; height:49.16vw; }
.IndexFocusGuide.ph::before { bottom:-15%; width:31.34vw; height:45.72vw; }
.IndexFocusGuide.md::before { bottom:-20%; width:35.3vw; height:42.6vw; }
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
#KeyVisual::before { top:60%; width:52.65vw; height:36.97vw; }
.IndexFocusGuide.ph::before { bottom:-20%; width:23.5vw; height:34.29vw; }
.IndexFocusGuide.md::before { bottom:-30%; width:24.67vw; height:31.95vw; }
}
@media screen and (min-width: 1024px) {
#KeyVisual::before { top:75%; width:35.10vw; height:24.58vw; }
.IndexFocusGuide.ph::before { bottom:-25%; width:15.67vw; height:22.86vw; }
.IndexFocusGuide.md::before { bottom:-45%; width:17.65vw; height:21.3vw; }
}


/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual { position:relative; z-index:9999; }
	@media screen and (min-width: 1024px) {
	#KeyVisual { padding:0 4vw; }
	}
	@media screen and (max-width: 1439px) {
	#KeyVisual { margin-bottom:80px; }
	}
	@media screen and (min-width: 1440px) {
	#KeyVisual { margin-bottom:5vw; }
	}
#KeyVisual  > div { max-width:1400px; margin:0 auto; }

#KeyVisual a { display:block; position: relative; width: 100%; height: 100%; }
#KeyVisual a:hover, #KeyVisual a:focus { opacity:0.8; }
#KeyVisual a:focus::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px dashed #ff6a18; box-sizing: border-box; }

/* noscript */
#KeyVisual.noscript > div { max-width:960px; }
#KeyVisual.noscript .bxSlider_list { display:block; background-image:none; overflow:visible; }
#KeyVisual.noscript .bxSlider_list li { float:none; display:block; margin:10px 0; }
#KeyVisual.noscript .bxSlider_list li img { opacity:1; }


/*----------------------------------------------------------------------*/
/* 首頁區塊 */
.IndexBlock { margin-top:80px; margin-bottom:100px; position:relative; }
@media screen and (max-width: 639px) {
.IndexBlock { padding:0 10px; }
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.IndexBlock { padding:0 20px; }
}
@media screen and (min-width: 1024px) {
.IndexBlock { padding:0 4vw; }
}
#Center section:first-of-type { margin-top:0; }
.IndexBlock > div { max-width:1400px; margin:0 auto; }
.IndexBlock > div::after { content:''; display:block; clear:both; }

.IndexBlock .index_block_title { margin-bottom:20px; text-align:center; }
.IndexBlock .index_block_title h2 { padding-bottom:0.3em; color:#3c215e; line-height:1.6em; position:relative; }
.IndexBlock.IndexAbreast .index_block_title h2 { color:#000; }
	@media screen and (max-width: 639px) {
	.IndexBlock .index_block_title h2 { font-size:1.5rem; }
	}
	@media screen and (min-width: 640px) {
	.IndexBlock .index_block_title h2 { font-size:1.75rem; }
	}
.IndexBlock .index_block_title h2::after { 
	content:''; display:block; position:absolute; bottom:0; left:50%; margin-left:-30px; width:60px; height:2px; background-color:#f15f5f; 
	}
.IndexBlock .index_block_title .en { 
	display:block; margin-top:10px; color:#9a0074; font-weight: 900; text-transform:uppercase; line-height:2em; 
	}
	@media screen and (max-width: 639px) {
	.IndexBlock .index_block_title .en { font-size:0.8125rem; }
	}
	@media screen and (min-width: 640px) {
	.IndexBlock .index_block_title .en { font-size:0.875rem; }
	}

.IndexBlock .btn_more { margin-top:40px; text-align:center; position:relative; }
.IndexBlock .btn_more a { 
	display:inline-block; border:1px solid #2b2148; background-color:#2b2148; padding:0 30px; line-height:44px; 
	text-align:center; color:#fff; font-weight:700; letter-spacing:0.15em; text-decoration:none; position:relative; 
	-webkit-border-radius:23px;
	-moz-border-radius:23px;
	border-radius:23px;
	-webkit-box-shadow:0 6px 0 0 #f15f5f;
	-moz-box-shadow:0 6px 0 0 #f15f5f;
	box-shadow:0 6px 0 0 #f15f5f;
	}
.IndexBlock .btn_more a::after {
	content:''; display:inline-block; width:20px; height:20px; margin-left:8px; vertical-align:text-top; 
	background:url(../images/icon_index_more.png) no-repeat right 0; background-size:200%;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
.IndexBlock .btn_more a:hover, .IndexBlock .btn_more a:focus { 
	transform:translateY(6px);
	-webkit-box-shadow:0 0 0 0 #ff6a18;
	-moz-box-shadow:0 0 0 0 #ff6a18;
	box-shadow:0 0 0 0 #ff6a18;
	}


/*----------------------------------------------------------------------*/
/* 最新消息 */
/* list */
.index_news_list li { border-bottom:1px solid #dedede; }
.index_news_list .date { 
	text-align:center; color:#555; font-weight:700; font-size:0.875rem; line-height:2em; white-space:nowrap; 
	}
.index_news_list .cat { text-align:center; }
.index_news_list .cat span { 
	display:inline-block; background-color:#ffcfb7; padding:0 12px; color:#3c215e; font-weight: 700; font-size:0.875rem; line-height:2em; white-space:nowrap; 
	-webkit-border-radius:14px;
	-moz-border-radius:14px;
	border-radius:14px;
	}
.index_news_list .title a { 
	display:block; color:#333; font-size:1.125rem; line-height:1.5em; text-decoration:none; position:relative; 
	-webkit-transition:color 0.3s ease;
	-moz-transition:color 0.3s ease;
	transition:color 0.3s ease;
	}
.index_news_list .title a:hover, .index_news_list .title a:focus { color:#2b2148; font-weight:bold; }
@media screen and (min-width: 1024px) {
.index_news_list .title a { padding-right:25px; }
.index_news_list .title a::after { 
	content:''; display:block; position:absolute; top:50%; right:0; width:14px; height:14px; margin-top:-7px; 
	background:url(../images/icon_news_list.png) no-repeat 0 0; background-size:100%;
	-webkit-transition: right 0.3s ease;
	-moz-transition: right 0.3s ease;
	transition: right 0.3s ease;
	}
.index_news_list .title a:hover::after, .index_news_list .title a:focus::after { background-position:0 bottom; right:-6px; }
}

@media screen and (max-width: 639px) {
.index_news_list li { padding:20px 0; }
.index_news_list .date { display:inline-block; }
.index_news_list .cat { display:inline-block; }
.index_news_list .title { display:block; margin-top:10px; }
}
@media screen and (min-width: 640px) {
.index_news_list ul { display:table; width:100%; border-collapse:collapse; border-spacing:0; }
.index_news_list li {display:table-row; }
.index_news_list li > span { display:table-cell; vertical-align:middle; }
}
	@media screen and (min-width: 640px) and (max-width: 959px) {
	.index_news_list li > span { padding:20px 1.2vw; }
	}
	@media screen and (min-width: 960px) and (max-width: 1399px) {
	.index_news_list li > span { padding:25px 1.6vw; }
	}
	@media screen and (min-width: 1400px) {
	.index_news_list li > span { padding:32px 25px; }
	}


/*----------------------------------------------------------------------*/
/* 電子報/會員註冊 */
.IndexAbreast .index_block_title { text-align:left; }
.IndexAbreast .index_block_title h2::after { left:0; margin-left:0; }
.IndexAbreast .btn_more { text-align:left; }

.IndexAbreast > div {
	display:flex; flex-wrap:wrap; align-items:stretch; align-content:center; 
	-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:stretch; -ms-align-content:center; 
	}
.IndexAbreast > div > div { flex:0 1 auto; }
	@media screen and (max-width: 639px) {
	.IndexAbreast > div > div { width:100%; }
	}
	@media screen and (min-width: 640px) {
	.IndexAbreast > div > div { width:50%; }
	}
.IndexAbreast > div > div > div { 
	padding-top:20px; padding-bottom:30px; height:100%; 
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 30px rgba(0,0,0,0.1);
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
	}
	@media screen and (max-width: 767px) {
	.IndexAbreast > div > div > div { padding-left:20px; padding-right:20px; }
	}
	@media screen and (min-width: 768px) and (max-width: 1399px) {
	.IndexAbreast > div > div > div { padding-left:5.8vw; padding-right:5.8vw; }
	}
	@media screen and (min-width: 1400px) {
	.IndexAbreast > div > div > div { padding-left:80px; padding-right:80px; }
	}
.IndexAbreast .desc { width:90%; margin-top:25px; line-height:1.625em; }
	@media screen and (min-width: 640px) and (max-width: 767px) {
	.IndexAbreast .desc { width:100%; }
	}

/* 電子報 */
@media screen and (min-width: 640px) and (max-width: 767px) {
.IndexEpaper { padding-right:15px; }
}
@media screen and (min-width: 768px) and (max-width: 1399px) {
.IndexEpaper { padding-right:2.2vw; }
}
@media screen and (min-width: 1400px) {
.IndexEpaper { padding-right:30px; }
}
.IndexEpaper > div { background:#e7e2ed url(../images/bg_index_epaper.png) right bottom no-repeat; background-size:contain; }
.IndexEpaper .index_block_title h2::after { background-color:#d23f24; }
.IndexEpaper .btn_more a::after { background-position:right 50%; }

/* 會員註冊 */
@media screen and (max-width: 639px) {
.IndexReg { margin-top:40px; }
}
@media screen and (min-width: 640px) and (max-width: 767px) {
.IndexReg { padding-left:15px; }
}
@media screen and (min-width: 768px) and (max-width: 1399px) {
.IndexReg { padding-left:2.2vw; }
}
@media screen and (min-width: 1400px) {
.IndexReg { padding-left:30px; }
}
.IndexReg > div { background:#ffe1cf url(../images/bg_index_reg.png) right bottom no-repeat; background-size:contain; }
.IndexReg .index_block_title h2::after { background-color:#f15f5f; }
.IndexReg .btn_more a::after { background-position:right 100%; }
.IndexReg .btn_more a { 
	border-color:#d33535; background-color: #d33535;
	-webkit-box-shadow:0 6px 0 0 #ffc261;
	-moz-box-shadow:0 6px 0 0 #ffc261;
	box-shadow:0 6px 0 0 #ffc261;
	}


/*----------------------------------------------------------------------*/
/* 分眾導覽:一般民眾/醫療人員 */
.index_focus_guide_list { max-width:1280px; margin:40px auto 0; }
.index_focus_guide_list ul { 
	display:flex; align-items:center; flex-wrap:wrap;
	-ms-display:flex; -ms-align-items:center; -ms-flex-wrap:wrap;
	}
.index_focus_guide_list li { flex:0 1 auto; }
@media screen and (max-width: 499px) {
.index_focus_guide_list li { width:50%; padding:10px 10px }
}
@media screen and (min-width: 500px) and (max-width: 899px) {
.index_focus_guide_list li { width:50%; padding:10px 25px }
}
@media screen and (min-width: 800px) and (max-width: 959px) {
.index_focus_guide_list li { width:25%; padding:10px 10px }
}
@media screen and (min-width: 960px) {
.index_focus_guide_list li { width:25%; padding:10px 20px }
}

.index_focus_guide_list a { 
	display:block; background-color:#fff; padding:10px 10px 20px 10px; text-decoration:none; position:relative; 
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
.index_focus_guide_list a::after { 
	content:''; display:block; width:14px; height:14px; margin:20px auto 0; 
	background:url(../images/icon_focus_guide_list.png) 0 0 no-repeat; background-size:100%; 
	}
.index_focus_guide_list a > span { display:block; }
.index_focus_guide_list .sn { 
	display:inline-block; color:#555; font-size:0.875rem; font-weight:700; letter-spacing:0.2em; position:relative; 
	}
.index_focus_guide_list .sn::after { 
	content:''; display:block; position:absolute; top:50%; right:0; width:1px; height:20px; background-color:#626262; 
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	}
.index_focus_guide_list .img { margin:15px auto; background-repeat:no-repeat; background-position:center center; background-size:contain; }
	@media screen and (max-width: 399px) {
	.index_focus_guide_list .img { width:80px; height:80px; }
	}
	@media screen and (min-width: 400px) {
	.index_focus_guide_list .img { width:100px; height:100px; }
	}
.index_focus_guide_list .title { text-align:center; color:#555; font-size:1.125rem; font-weight:bold; }

.index_focus_guide_list a:hover, .index_focus_guide_list a:focus {
	-webkit-box-shadow: 0 0 18px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 18px rgba(0,0,0,0.15);
    box-shadow: 0 0 18px rgba(0,0,0,0.15);
	}
.index_focus_guide_list a:hover .title, .index_focus_guide_list a:focus .title { color:#2b2148; }
.index_focus_guide_list a:hover::after, .index_focus_guide_list a:focus::after { background-position:0 100%; }


/*----------------------------------------------------------------------*/
/* 相關連結 */
.index_links_list { margin:20px 0; position:relative; }
.index_links_list li { padding-top:15px; padding-bottom:15px; }
@media screen and (max-width: 767px) {
.index_links_list li { padding-left:5px; padding-right:5px; }
}
@media screen and (min-width: 768px) and (max-width: 1399px) {
.index_links_list li { padding-left:10px; padding-right:10px; }
}
@media screen and (min-width: 1400px) {
.index_links_list li { padding-left:15px; padding-right:15px; }
}
.index_links_list a { 
	display:block; max-width:250px; max-height:100px; margin:0 auto; overflow:hidden; 
	-webkit-box-shadow:0 0 10px rgba(0,0,0,0.15);
	-moz-box-shadow:0 0 10px rgba(0,0,0,0.15);
	box-shadow:0 0 10px rgba(0,0,0,0.15);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	}
.index_links_list a:hover, .index_links_list a:focus { 
	opacity:0.8;
	-webkit-box-shadow:0 0 15px rgba(0,0,0,0.5);
	-moz-box-shadow:0 0 15px rgba(0,0,0,0.5);
	box-shadow:0 0 15px rgba(0,0,0,0.5);
	}
.index_links_list img { display:block; max-width:100%; max-height:100%; margin:0 auto; }

/*----------------------------------------------------------------------*/
/* 輪播 owl-carousel */
.index_links_list .owl-carousel { position:static; max-width:1440px; margin:0 auto; }
.index_links_list .owl-stage { display:flex; align-items:center; }
.index_links_list .owl-item { flex:0 1 auto; }
.owl-carousel .disabled { display: none; }

.owl-carousel .owl-nav > div {
	position:absolute; top:50%; background-color:#fff; text-indent:-999px; z-index:9999; overflow:hidden;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.15);
    box-shadow: 0 0 15px rgba(0,0,0,0.15);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
.owl-carousel .owl-nav > div:hover {
	background-color:#ffb448; 
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
	}
.owl-carousel .owl-nav > div::after { 
	content:''; display:block; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px;
	border-left:2px solid #7b8b8d; border-top:2px solid #7b8b8d; 
	}
	.owl-carousel .owl-nav .owl-prev::after { 
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
		}
	.owl-carousel .owl-nav .owl-next::after { 
		-webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
		}
.owl-carousel .owl-nav > div:hover::after { border-color:#fff; }
	@media screen and (max-width: 1023px) {
	.owl-carousel .owl-nav > div { margin-top:-18px; width:36px; height:36px; }
	.owl-carousel .owl-nav .owl-prev { left:-5px; }
	.owl-carousel .owl-nav .owl-next { right:-5px; }
	.owl-carousel .owl-nav .owl-prev::after { left:50%; margin-left:-3px; }
	.owl-carousel .owl-nav .owl-next::after { right:50%; margin-right:-3px; }

	#KeyVisual .owl-carousel .owl-nav .owl-prev { left:5px; }
	#KeyVisual .owl-carousel .owl-nav .owl-next { right:5px; }
	}
	@media screen and (min-width: 1024px) {
	.owl-carousel .owl-nav > div { margin-top:-20px; width:40px; height:40px; }
	.owl-carousel .owl-nav .owl-prev { left:calc((-4vw - 20px) / 2); }
	.owl-carousel .owl-nav .owl-next { right:calc((-4vw - 20px) / 2); }
	.owl-carousel .owl-nav .owl-prev::after { left:50%; margin-left:-3px; }
	.owl-carousel .owl-nav .owl-next::after { right:50%; margin-right:-3px; }

	#KeyVisual .owl-carousel .owl-nav .owl-prev { left:calc((-4vw - 40px) / 2); }
	#KeyVisual .owl-carousel .owl-nav .owl-next { right:calc((-4vw - 40px) / 2); }
	}

.owl-carousel .owl-dots { position:absolute; left:0; bottom:-20px; width:100%; text-align:center; line-height:0; }
.owl-carousel .owl-dots .owl-dot { 
	display:inline-block; width:10px; height:10px; margin:0 0.67vw; background-color:#dedede;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	}
.owl-carousel .owl-dots .owl-dot:focus { outline:0; }
.owl-carousel .owl-dots .owl-dot.active, .owl-carousel .owl-dots .owl-dot:hover, .owl-carousel .owl-dots .owl-dot:focus { 
	background-color:#f15f5f; 
	}