/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

/* ---reset.css--- */

html { font-family: "微軟正黑體", Arial; font-size:18px; -webkit-text-size-adjust:none; background: url(../images/mainBG.jpg) no-repeat center top;}

html { overflow-x: hidden;}
* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */}
	
* a:link, * a:visited { text-decoration:none;}
* a:hover, * a:active { text-decoration:none;}
.clear { clear:both;}
@font-face { font-family: GOTHIC; src: url(../fonts/GOTHIC.TTF);}


/* --電腦版型------------------------------------- */
h1 { position:absolute; left:0; top:-1000px;}
body { background: url(../images/footerBG.jpg) repeat-x center bottom;}
.mainCon { position:relative; max-width:1250px; margin: 0 auto 0 auto; width:90%;}

/* -- 首頁 -- */
#home { width:100%; position:relative; padding: 0; text-align:center; z-index:2222; max-width:1300px; margin: 0 auto;}
img.logo { display:inline-block; height:50px; margin-left:30px;}
#logoTop { position: absolute; right:20px; top: 30px; z-index:9999;}
img.mainBoy { position:absolute; left:2%; top:360px;}
img.mainTitle01 { position:absolute; top:345px; left:20%; z-index:1;}
img.mainTitle02 { position:relative; margin: 295px auto 0 auto;}
img.mainTitle03 { position:absolute; top:157px; right:10%;}
img.mainGirl { position:absolute; right:-5%; top:360px;}
img.mouse { width:auto; margin: 50px auto; display:block;}

#linkBall { position:relative; z-index:4444;}
ul.link { text-align:center; position:relative; width: 560px; margin: 0 auto;}
ul.link li { display:inline-block;}
ul.link li.item01 a { display:inline-block; position:absolute; top:-40px; left:0;}
ul.link li.item05 a { display:inline-block; position:absolute; top:-40px; right:0;}
ul.link li.item02 a { display:inline-block; position:absolute; top:20px; left:23%;}
ul.link li.item04 a { display:inline-block; position:absolute; top:-40px; right:0;}
ul.link li.item03 a { display:inline-block; position:absolute; top:20px; right:23%;}

.fonTxt { color:#000; font-size:20px; line-height:40px; width:90%; max-width:1150px; margin: 180px auto 0 auto;}
.fonTxt img { display:inline-block; float:right; margin: 0 0 20px 20px; width:40%; max-width:400px;}
.fonTxt b { color:#19846f; font-size:30px; line-height:42px; font-weight:bold; display:block; margin-bottom:40px;}
#fp:first-letter { font-size : 280%; font-weight : bold; float : left; padding-right: 3px; line-height: 100%;}
.textLine { background:url(../images/fontTxtLine.gif) repeat-x center top; display:block;}

ul.bookmark-3 { text-align:center; margin:20px auto 20px auto; width:100%; max-width:1120px;}
ul.bookmark-3 li { font-size:22px; text-align: center; margin: 0; display:inline-block; font-weight: bold; background: url(../images/bookmark-1.png) no-repeat center center; color:#19846f; position:relative; padding: 25px 0; width: 20%; background-size:100% auto;}
ul.bookmark-3 li.click { background: url(../images/bookmark-2.png) no-repeat center center; color:#fff; background-size:100% auto;}
.content { font-size:18px; line-height:30px; color:#333; margin: 0 auto; font-family: Arial, Helvetica, sans-serif, "微軟正黑體";}

ul.doctorlink {}
ul.doctorlink li img { float:left; display:inline-block; margin: -5px 20px 20px 0; opacity: 0.85; filter: alpha(opacity=85);}
ul.doctorlink li:hover img { opacity: 1.0; filter: alpha(opacity=100);}
ul.doctorlink li { margin: 45px auto; width:100%; max-width:1120px; padding: 0 0 20px 0; border-bottom:#bdbdbd 1px dotted; position:relative; list-style-type:none;}
ul.doctorlink li .conTitle { background: url(../images/titleBG.png) no-repeat left top; background-size: 4px 100%; padding: 0px 0 0px 25px; font-size:24px; line-height:40px; color:#000; width:100%; display:block; font-weight:bold; margin-bottom:35px;}
ul.doctorlink li .conTitle b { color:#f15a24; font-size:32px; display:block; margin-bottom:5px;}
ul.doctorlink li .doctorintro { float:right; width: calc(100% - 250px);}
.doctorTitle { font-size:18px; color:#333; display:block; padding-left:25px;}
.doctorName { font-size:45px; color:#278b74; font-weight:bold; display:block; margin-top:10px; padding-left:25px;}
a .readmore { width:fit-content; position:absolute; right:0; bottom:40px; border-radius:50px; background:#f15a24; color:#fff; font-size:16px; text-align:center; padding:5px 25px; display:block; font-weight:normal;}
a:hover .readmore { background:#cf410f;}

#storypage { width:90%; margin: 150px auto 0 auto; background:url(../images/contentBG-top.png) no-repeat center 32px;}
img.subitem { display:block; margin:0 auto 50px auto;}
h2 { font-size:32px; color:#000; font-weight:bold; display:block; text-align:center;}
h2 b { font-size:48px; color:#19846f; font-weight:bold; text-align:center; display:block; margin:20px auto 0 auto; letter-spacing:-1px;}

.topTxt { width:90%; margin: 50px auto; background: #eff7f3; border-radius:100px; font-size:18px; line-height:32px; color:#006e58; padding: 25px 90px; position:relative; text-align:justify; max-width:1100px;}
img.inL { position:absolute; top:30px; left:40px;}
img.inR { position:absolute; top:30px; right:40px;}
.bgR { background:url(../images/in-R.png) no-repeat right top; width:100%; padding: 0 40px;}
.bgL { background:url(../images/in-L.png) no-repeat left top; width:100%; padding: 0 40px;}
.bottomLink { width:90%; margin: 0 auto 20px auto; background:url(../images/contentBG-bottom.png) no-repeat center top; padding-top:15px;}
a .backindex { width:fit-content; border-radius:50px; background:#f15a24; color:#fff; font-size:16px; text-align:center; padding:15px 25px; display:block; font-weight:normal; display:block; margin: 0 auto;}
a:hover .backindex { background:#cf410f;}

.contentZone { width:90%; max-width:1100px; margin: 0 auto 50px auto; font-size:18px; line-height:34px; text-align: justify; min-height:300px;}
img.conPic { width:90%; max-width:600px; margin: 20px 0;}
.subtitle { color:#006e58; font-size:30px; font-weight:bold; line-height:45px; display:block; margin: 15px 0 25px 0;}
.subtitle2 { color:#000; display:block; margin: 15px 0 10px 0; font-size:25px; font-weight:bold;}
.doctorIN { display: inline-block; float:right; border-radius:10px; border:#c3dfda 1px solid; padding: 0 25px 20px 25px; width:280px; margin: 50px 0 30px 30px; font-size:16px; line-height:24px;}
.doctorIN a { color:#000; width:100%; height:100%; display:block;}
.doctorIN b { color:#278b74; font-size:36px; font-weight:bold; display:block; margin: 15px 0 20px 0;}
.doctorIN a img { width:80%; display:block; margin: -80px auto 20px auto; opacity: 0.85; filter: alpha(opacity=85);}
.doctorIN a:hover img { opacity: 1.0; filter: alpha(opacity=100);}

table.contenTable { margin: 20px 0; margin:0; padding:0; display:block;}
table.contenTable th {}
table.contenTable td { border:#E0F3E2 1px solid; padding: 10px;}

ul.A { list-style-type:decimal; display:block; margin: 20px 0 20px 20px;}
ul.A li::marker { color:#a2c0b6;}
ul.A li b { font-weight:bolder;}

ul.B { list-style-type:square; display:block; margin: 5px 0 5px 30px;}
ul.B li::marker { color:#a2c0b6; font-size:30px; margin-top:10px;}

ul.C { list-style-type:square; display:block; margin: 5px 0 5px 30px;}
ul.C li { width:48%; display: inline-block; line-height:28px;}
ul.C li::marker { color:#fff; font-size:30px; margin-top:10px;}


#linkZone { width:96%; margin: 0 auto; max-width:1200px;}
a.pre { background: url(../images/icon-pre.png) no-repeat left center; font-size:16px; color:#333; display:inline-block; float:left; padding-left:35px; width:45%;}
a.next { background: url(../images/icon-next.png) no-repeat right center; font-size:16px; color:#333; display:inline-block; float:right; padding-right:35px; width:45%; text-align:right;}
a.pre b,
a.next b { display:block; font-size:20px; font-weight:bold;}


/* -- Footer -- */
footer { width:100%; color:#333; padding: 45px 5% 55px 5%; font-size:13px; line-height:26px; text-align:center;}

.logoDown { display: block; margin: 0 auto 30px auto; text-align:center;}
footer img { vertical-align:middle; height:50px; margin: 0 15px;}

img.PC { display:block;}
img.PAD { display:none;}
img.M { display:none;}

@media screen and (min-width: 1250px) and (max-width: 1400px) {



}

/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1249px) {

img.mainBoy { position:absolute; left:-1%; top:360px;}
img.mainTitle01 { position:absolute; top:330px; left:20%; z-index:1;}
img.mainTitle02 { position:relative; margin: 295px auto 0 auto; width:80%;}
img.mainTitle03 { position:absolute; top:135px; right:7%;}
img.mainGirl { position:absolute; right:-8%; top:360px;}
img.mouse { width:auto; margin: 50px auto; display:block;}

.content { width:90%; margin: 0 auto;}
#storypage { width:96%; margin: 150px auto 0 auto; background:url(../images/contentBG-top.png) no-repeat center 32px; background-size:100% 30px;}
.bottomLink { width:96%; margin: 0 auto 20px auto; background:url(../images/contentBG-bottom.png) no-repeat center top; padding-top:15px; background-size:100% 30px;}
}


/* --平板版型------------------------------------- */

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

img.logo { display:inline-block; height:35px; margin-left:30px;}
#logoTop { position: absolute; right:20px; top: 30px; z-index:9999;}

img.mainBoy { position:absolute; left:0%; top:430px; z-index:9998;}
img.mainTitle01 { position:absolute; top:250px; left:10%; z-index:1;}
img.mainTitle02 { position:relative; margin: 250px auto 0 auto; width:80%;}
img.mainTitle03 { position:absolute; top:120px; right:0%; width:220px;}
img.mainGirl { position:absolute; right:0%; top:430px; z-index:9998;}
img.mouse { width:auto; margin: 50px auto; display:block;}

#linkBall { position:relative;}
ul.link { text-align:center; position:relative; width: 520px; margin: 0 auto;}
ul.link li img { width:100%;}
ul.link li.item01 a { display:inline-block; position:absolute; top:-40px; left:0;}
ul.link li.item05 a { display:inline-block; position:absolute; top:-40px; right:0;}
ul.link li.item02 a { display:inline-block; position:absolute; top:20px; left:23%;}
ul.link li.item04 a { display:inline-block; position:absolute; top:-40px; right:0;}
ul.link li.item03 a { display:inline-block; position:absolute; top:20px; right:23%;}

ul.bookmark-3 li { font-size:18px;}

.content { width:90%; margin: 0 auto;}
#storypage { width:96%; margin: 150px auto 0 auto; background:url(../images/contentBG-top.png) no-repeat center 32px; background-size:100% 30px; z-index:-1;}
.bottomLink { width:96%; margin: 0 auto 20px auto; background:url(../images/contentBG-bottom.png) no-repeat center top; padding-top:15px; background-size:100% 30px;}

ul.C li { width:100%; display: block; line-height:28px;}

}

/* --手機版型------------------------------------- */

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

html { background-size:1500px auto;}

img.logo { display:inline-block; height:25px; margin-left:30px;}
#logoTop { position: absolute; right:20px; top: 40px; z-index:9999;}

img.mainBoy { position:absolute; left:0%; top:370px; z-index:9998; width:18%;}
img.mainTitle01 { position:absolute; top:170px; left:4%; z-index:1; width:120px;}
img.mainTitle02 { position:relative; margin: 200px auto 0 auto; width:95%;}
img.mainTitle03 { position:absolute; top:100px; right:0%; width:130px;}
img.mainGirl { position:absolute; right:0%; top:390px; z-index:9998; width:23%;}
img.mouse { width:10%; margin: 20px auto; display:block;}

#linkBall { position:relative; width: 90%; margin: 0 auto;}
ul.link { text-align:center; position:relative; width:100%;}
ul.link li img { width:100%;}
ul.link li.item01 a { display:inline-block; position:absolute; top:-30px; left:0; width:25%;}
ul.link li.item05 a { display:inline-block; position:absolute; top:-40px; right:0; width:25%;}
ul.link li.item02 a { display:inline-block; position:absolute; top:20px; left:23%; width:25%;}
ul.link li.item04 a { display:inline-block; position:absolute; top:-30px; right:0; width:25%;}
ul.link li.item03 a { display:inline-block; position:absolute; top:20px; right:23%; width:25%;}

.fonTxt { font-size:16px; line-height:32px; width:90%; max-width:1150px; margin: 120px auto 0 auto;}
.fonTxt img { display: block; float:none; margin: -30px auto 20px auto; width:60%; max-width:400px;}
.fonTxt b { font-size:22px; line-height:34px; font-weight:bold; display:block; margin-bottom:40px;}
#fp:first-letter { font-size : 230%; font-weight : bold; float : left; padding-right: 3px; line-height: 100%;}
.textLine { background:none;}

ul.bookmark-3 li { font-size:20px; text-align: center; margin: 0; display:inline-block; font-weight: bold; background: url(../images/bookmark-1.png) no-repeat center center; color:#19846f; position:relative; padding: 25px 0; width: 50%; background-size:100% auto;}
ul.bookmark-3 li.click { background: url(../images/bookmark-2.png) no-repeat center center; color:#fff; background-size:100% auto;}
.content { font-size:18px; line-height:30px; color:#333; margin: 0 auto; font-family: Arial, Helvetica, sans-serif, "微軟正黑體";}

ul.doctorlink {}
ul.doctorlink li img { float:none; display: block; margin: -5px 20px 20px 0; opacity: 0.85; filter: alpha(opacity=85); width:35%;}
ul.doctorlink li { margin: 10px auto 45px auto; width:100%; max-width:1120px; padding: 0 0 20px 0; border-bottom:#bdbdbd 1px dotted; position:relative; list-style-type:none;}
ul.doctorlink li .conTitle { background: url(../images/titleBG.png) no-repeat left center; background-size: 4px 100%; padding: 0px 0 0px 25px; font-size:20px; color:#000; width:100%; display:block; font-weight:bold; margin-bottom:15px;}
ul.doctorlink li .conTitle b { color:#f15a24; font-size:26px; display:block; margin-bottom:5px;}
ul.doctorlink li .doctorintro { float:none; width: 100%;}
.doctorTitle { font-size:18px; color:#333; display:block; padding-left:25px;}
.doctorName { font-size:36px; color:#278b74; font-weight:bold; display:block; margin-top:5px; padding-left:25px;}
a .readmore { width:fit-content; position:absolute; right:0; bottom:10px; border-radius:50px; background:#f15a24; color:#fff; font-size:15px; text-align:center; padding:3px 15px; display:block; font-weight:normal;}
a:hover .readmore { background:#cf410f;}

#storypage { width:90%; margin: 150px auto 0 auto; background:url(../images/contentBG-top.png) no-repeat center 32px;}
img.subitem { display:block; margin:0 auto 25px auto; width:50%;}
h2 { font-size:22px; color:#000; font-weight:bold; display:block; text-align:left; width:90%; margin: 0 auto;}
h2 b { font-size:28px; color:#19846f; font-weight:bold; text-align:center; display:block; margin:20px auto 0 auto; letter-spacing:-1px; text-align:left;}

.topTxt { width:95%; margin: 50px auto; background: #eff7f3; border-radius:20px; font-size:16px; line-height:30px; padding: 20px 35px; position:relative; text-align:justify; max-width:1100px;}
img.inL { position:absolute; top:20px; left:15px; width:20px;}
img.inR { position:absolute; top:20px; right:15px; width:20px;}
.bgR { background:url(../images/in-R.png) no-repeat right top; width:100%; padding: 0 40px;}
.bgL { background:url(../images/in-L.png) no-repeat left top; width:100%; padding: 0 40px;}
.bottomLink { width:90%; margin: 0 auto 20px auto; background:url(../images/contentBG-bottom.png) no-repeat center top; padding-top:15px;}
a .backindex { width:fit-content; border-radius:50px; background:#f15a24; color:#fff; font-size:16px; text-align:center; padding:15px 25px; display:block; font-weight:normal; display:block; margin: 0 auto;}
a:hover .backindex { background:#cf410f;}

.content { width:90%; margin: 0 auto;}
#storypage { width:96%; margin: 150px auto 0 auto; background:url(../images/contentBG-top.png) no-repeat center 32px; background-size:100% 30px; z-index:-1;}
.bottomLink { width:96%; margin: 0 auto 20px auto; background:url(../images/contentBG-bottom.png) no-repeat center top; padding-top:15px; background-size:100% 30px;}
a.pre { display: block; float:none; padding-left:35px; width:95%; font-size:15px; margin: 0 auto 20px auto;}
a.next { display: block; float:none; padding-right:35px; width:95%; font-size:15px; margin: 0 auto;}
a.pre b,
a.next b { display:block; font-size:18px; font-weight:bold;}

.contentZone { width:90%; max-width:1100px; margin: 0 auto 50px auto; font-size:16px; line-height:32px; text-align: justify; min-height:300px;}
.subtitle { color:#006e58; font-size:22px; font-weight:bold; line-height:30px; display:block; margin: 15px 0 25px 0;}
.subtitle2 { color:#000; display:block; margin: 15px 0 10px 0; font-size:20px; font-weight:bold;}
.doctorIN { display: block; float:none; border-radius:10px; border:#c3dfda 1px solid; padding: 0 20px 20px 20px; width:90%; max-width:280px; margin: 100px auto 30px auto; font-size:15px; line-height:24px;}
.doctorIN a { color:#000; width:100%; height:100%; display:block;}
.doctorIN b { color:#278b74; font-size:36px; font-weight:bold; display:block; margin: 15px 0 20px 0;}
.doctorIN a img { width:80%; display:block; margin: -80px auto 20px auto; opacity: 0.85; filter: alpha(opacity=85);}
.doctorIN a:hover img { opacity: 1.0; filter: alpha(opacity=100);}

table.contenTable { margin: 20px 0; margin:0; padding:0; display:block;}
table.contenTable th {}
table.contenTable td { border:#E0F3E2 1px solid; padding: 10px;}

.logoDown { display: block; margin: 0 auto 30px auto; text-align:center;}
footer .logoDown img { vertical-align:middle; width:auto; height:45px; margin: 0 auto 20px auto; display:block; margin:}

ul.C li { width:100%; display: block; line-height:28px;}
}

@media all {
	.lightbox { display: none; }
	.fl-page .jumbotron { margin-top: 2em; }
	.fl-page .doc { margin: 2em 0;}
	.fl-page .btn-download { float: right; }
	.fl-page .btn-default { vertical-align: bottom; }
	.fl-page .btn-lg span { font-size: 0.7em; }
	.fl-page .footer { margin-top: 3em; color: #aaa; font-size: 0.9em;}
	.fl-page .footer a { color: #999; text-decoration: none; margin-right: 0.75em;}
	.fl-page .github { margin: 2em 0; }
	.fl-page .github a { vertical-align: top; }
	.fl-page .marketing a { color: #999; }
	/* override default feather style... */
	.fixwidth {	background: rgba(256,256,256, 0.8);}
	.fixwidth .featherlight-content { width: 500px; padding: 25px; color: #fff;	background: #111;}
	.fixwidth .featherlight-close {	color: #fff; background: #333;}
}
#myVideo { position: absolute; top: 0; left: 0; object-fit: cover; min-width: 100%; min-height: 100%; width: 100%; height: 100%;}
@media(max-width: 768px){
	.fl-page h1 span { display: block; }
	.fl-page .btn-download { float: none; margin-bottom: 1em; }
}