/* ---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;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */

html { font-family: "微軟正黑體", Arial; font-size:16px; -webkit-text-size-adjust:none;}

* { -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;}

/* --電腦版型------------------------------------- */
a.anchor { margin: -80px 0 0 0; display:block; padding:80px 0 0 0;}

body { background: url(../images/topBG.jpg) #fff no-repeat center top;}
body.in { background: none;}
.wide { width:1250px; margin:0 auto; position:relative;}

h4 { display:none;}
h4:hover { display:block; width:69px; height:69px; background: url(../images/icon_Menu.html) no-repeat #43727a center center;}
#SUBMENU { display:none;}

.ch24 { font-size:24px;}
.ch18 { font-size:18px;}

/* -- 右側主選項 -- */
nav { position:fixed; top:0; right:0; font-size:18px; z-index:998; width:100%; background:#e6e6e8; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); height:75px;}
nav ul { float:right; padding: 30px 0 0 0;}
nav li { margin-bottom:8px; text-align:right; float:left;}
nav li a { display: inline-block; color:#9b0010; padding:0 20px; border-right: #CCC 1px solid;}
nav li a:hover { display: inline-block; color:#000; padding:0 20px; border-right: #CCC 1px solid;}
nav li.fb a { background:url(../images/icon_FB.png) no-repeat center top; width:41px; height:38px; border:none; margin: -10px 20px 0 20px;}
nav li.line a { background: url(../images/icon_Line.png) no-repeat center top; width:41px; height:38px; border:none; margin: -10px 20px 0 0;}
nav li.fb a:hover,
nav li.line a:hover { background-position: center bottom;}

/* -- develop chester -- */
.menu_tag {	color: #000;}

/* -- 首頁標題logo -- */
#logo { position: fixed; top:40px; left:20px; z-index:999;}
#mainView { position:relative; height:700px;}
#kvGrass { background:url(../images/mv_Gress.png) no-repeat center top; width:1039px; height:557px; position:absolute; top:149px; left:106px;}
#kvHeart { position:absolute; top:121px; left:440px;}
#kvTxt { position:absolute; top:310px; left:192px;}

/* -- 內容區 -- */
article { width:1250px; position:relative; margin:0 auto;}
ul.homeArticle { width:100%; margin: 20px 0 40px 0;}
ul.homeArticle li { width:31%; margin:0 2.3% 0 0; float:left; color:#777;}
ul.homeArticle li a { font-size:16px; color:#777; line-height:24px;}
ul.homeArticle li a .more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px 0 0 168px; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover .more { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px 0 0 168px; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover { color:#c77382;}
ul.homeArticle li img { float:left; display:block; margin: 0 20px 0 0; width:148px;}
ul.homeArticle li .circleP { background: url(../images/icon_Pink.png) no-repeat; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 7px; display:block; margin: 10px 0 10px 168px;}
ul.homeArticle li .circleG { background: url(../images/icon_Green.png) no-repeat; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 7px; display:block; margin: 10px 0 10px 168px;}
ul.homeArticle li .circleO { background: url(../images/icon_Orrange.png) no-repeat; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 7px; display:block; margin: 10px 0 10px 168px;}
ul.homeArticle li .title { font-size:30px; font-weight:bold; display:block; margin: 0 0 10px 168px; height:50px; display:block;}
.RED { color:#d55c68;}
.GREEN { color:#759520;}
.ORANGE { color:#d3600c;}

.item { text-align:center; margin-bottom:30px;}
ul.keypoint { margin: 40px 0 40px 0;}
ul.keypoint li { width:270px; float:left; margin: 0 20px 40px 20px; position:relative; font-size:18px; font-weight:bold; line-height:24px;}
ul.keypoint li a { color:#777777;}
ul.keypoint li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover { color:#c77382;}
ul.keypoint li .keyitem { position:absolute; top:-50px; left:-20px;}
ul.keypoint li .keyitem img,
ul.keypoint li:hover .keyitem img { border:none; box-shadow:none;}
ul.keypoint li img { display:block; margin: 0 0 15px 0; border:2px #fff solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4);}
ul.keypoint li:hover img { display:block; margin: 0 0 15px 0; border:2px #c77382 solid;}

/* -- Footer -- */
footer { width:100%; background:url(../images/footerBG.png) no-repeat center top;}
footer .wide { padding: 50px 530px 80px 0; color:#575757; font-size:14px; line-height:18px; width:1250px; margin: 0 auto;}
footer .warning { font-size:16px; color:#181818; margin: 20px 0; font-weight:bold; line-height:20px;}
footer .copyright { font-size:12px; color:#cecece;}
footer b { display:block; font-size:24px; margin-bottom:15px; color:#004b98; font-weight:bold;}

/* -- Backtotop -- */
#topBackupArea { display:block; color:#fff; border-radius: 100px; -moz-border-radius:100px; -webkit-border-radius:100px; position:fixed; right:30px; bottom:30px; background: rgba(199,115,130,0.8); width:88px; height:88px; z-index:999999; text-align:center; line-height:88px; font-size:1.5em; font-weight:bold; cursor:pointer;}

/* -- 內頁文章 -- */
header { width:100%; background:url(../images/headerBG.jpg) no-repeat center top; height:285px;}
#conLeft { float:left; width:250px; margin: -55px 80px 0 0;}
#conLeft ul { width:80%; margin:0 auto 40px auto;}
#conLeft ul li { line-height:22px; position:relative; padding-bottom:25px; margin-bottom:25px;}
#conLeft ul li img { border:#fff 1px solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); position:relative; margin: 0 0 5px 0; width:100%; height:auto;}
#conLeft ul li img:hover { border:1px #c77382 solid;}
img.leftitle { width:100%; height:auto; display:block; margin-bottom:20px;}
#conLeft ul li a { color:#999;}
#conLeft ul li a:hover { color:#c77382;}
#conLeft ul li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
#conLeft ul li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}

#conRight { float:right; padding:25px 0 0 0; width:920px;}
h1 { color:#004b98; font-size:30px; line-height:40px; margin-bottom:25px; font-weight:bold;}
.editor { font-size:12px; color:#666; margin-bottom:20px;}
.editor img { width:60px; height:auto; display:inline-block; margin: 0 10px 0 0;}
#editorInfo { margin: 0 0 20px 0; padding: 20px 0; font-size:15px; line-height:24px; color:#666666; border-top:#e66382 1px solid; border-bottom:#e66382 1px solid;}
#editorInfo b { font-size:20px; font-weight:bold; display:block; margin-bottom:10px;}
#fontTxt { padding: 20px 0; border-top:#dadada 1px solid; border-bottom:#dadada 1px solid; font-size:15px; color:#558594; line-height:22px; margin-bottom:40px;}
#inCon { font-size:18px; line-height:32px; color:#333; text-align:justify; margin: 0 0 120px 0;}
img.conPic { -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); display:block; float:right; margin: 0 0 35px 35px; width:45%; height:auto; border:#fff 2px solid;}
#inCon p { margin: 30px 0 0 0;}

#brandCon { background:#f2f4f6; padding:30px 30px 30px 300px; font-size:15px; color:#6d6d6d; line-height:26px; text-align:justify; position:relative;}
#brandCon p { margin: 0 0 10px 0;}
h2 { color:#004b98; font-size:22px; line-height:36px; margin-bottom:10px; font-weight:bold;}
#brandPic { position:absolute; left:20px; top:-40px; box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); height:177px;}
#brandName { position:absolute; left:20px; top:160px; font-size:15px; color:#999;}
#brandName b { font-size:40px; font-weight:bold; display:block; color:#333; margin-top:6px;}
#brandLink { margin: 20px 0 0 0; text-align:right; color:#e66382; font-size:18px; font-weight:bold;}
#brandLink a.more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display: inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}
#brandLink a.more:hover { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}

h3 { color:#e63879; font-size:24px; margin-bottom:10px; font-weight:bold;}

#warning { background:#F0F0F0; font-size:13px; line-height:20px; padding:20px; margin:40px 0;}

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

.wide { width:96%; margin:0 auto; position:relative;}

/* -- 右側主選項 -- */
nav { position:fixed; top:0; right:0; font-size:16px; z-index:998; width:100%; background:#e6e6e8; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); height:75px;}
nav li a { display: inline-block; color:#9b0010; padding:0 15px; border-right: #CCC 1px solid;}
nav li a:hover { display: inline-block; color:#000; padding:0 15px; border-right: #CCC 1px solid;}
nav li.fb a { background:url(../images/icon_FB.png) no-repeat center top; width:41px; height:38px; border:none; margin: -10px 15px 0 15px;}
nav li.line a { background: url(../images/icon_Line.png) no-repeat center top; width:41px; height:38px; border:none; margin: -10px 15px 0 0;}

/* -- 首頁標題logo -- */
#logo { position: fixed; top:40px; left:20px; z-index:999;}
#mainView { position:relative; height:700px;}
#kvGrass { background:url(../images/mv_Gress.png) no-repeat center top; width:1024px; height:557px; position:absolute; top:149px; left:0;}
#kvHeart { position:absolute; top:121px; left:35%;}
#kvTxt { position:absolute; top:310px; left:10%;}

/* -- 內容區 -- */
article { width:96%; position:relative; margin:0 auto;}
ul.homeArticle { width:100%; margin: 20px 0 40px 0;}
ul.homeArticle li { width:32%; margin:0 1.3% 0 0; float:left; color:#777;}
ul.homeArticle li a { font-size:16px; color:#777; line-height:24px;}
ul.homeArticle li a .more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px 0 0 120px; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover .more { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px 0 0 120px; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover { color:#c77382;}
ul.homeArticle li img { float:left; display:block; margin: 0 20px 0 0; width:100px;}
ul.homeArticle li .circleP { background: url(../images/icon_Pink.png) no-repeat; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 7px; display:block; margin: 10px 0 10px 120px;}
ul.homeArticle li .circleG { background: url(../images/icon_Green.png) no-repeat; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 7px; display:block; margin: 10px 0 10px 120px;}
ul.homeArticle li .circleO { background: url(../images/icon_Orrange.png) no-repeat; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 7px; display:block; margin: 10px 0 10px 120px;}
ul.homeArticle li .title { font-size:30px; font-weight:bold; display:block; margin: 0 0 10px 120px; height:50px; display:block;}

.item { text-align:center; margin-bottom:30px;}
ul.keypoint { margin: 40px 0 40px 0;}
ul.keypoint li { width:22%; float:left; margin: 0 1.5% 40px 1.5%; position:relative; font-size:18px; font-weight:bold; line-height:24px;}
ul.keypoint li a { color:#777777;}
ul.keypoint li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover { color:#c77382;}
ul.keypoint li .keyitem { position:absolute; top:-50px; left:-20px;}
ul.keypoint li .keyitem img,
ul.keypoint li:hover .keyitem img { border:none; box-shadow:none;}
ul.keypoint li img { width:100%; height:auto; display:block; margin: 0 0 15px 0; border:2px #fff solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4);}
ul.keypoint li:hover img { display:block; margin: 0 0 15px 0; border:2px #c77382 solid;}

/* -- Footer -- */
footer { width:100%; background:url(../images/footerBG.png) no-repeat -900px top;}
footer .wide { padding: 50px 530px 80px 0; color:#575757; font-size:14px; line-height:18px; width:96%; margin: 0 auto;}
footer .warning { font-size:16px; color:#181818; margin: 20px 0; font-weight:bold; line-height:20px;}
footer .copyright { font-size:12px; color:#cecece;}
footer b { display:block; font-size:24px; margin-bottom:15px; color:#004b98; font-weight:bold;}

/* -- 內頁文章 -- */
header { width:100%; background:url(../images/headerBG-M.jpg) no-repeat center top; height:285px;}
#conLeft { float:left; width:20%; margin: -55px 80px 0 0;}
#conLeft ul { width:80%; margin:0 auto 5% auto;}
#conLeft ul li { line-height:22px; position:relative; padding-bottom:25px; margin-bottom:25px;}
#conLeft ul li img { border:#fff 1px solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); position:relative; margin: 0 0 5px 0; width:100%; height:auto; border:1px #fff solid;}
#conLeft ul li img:hover { border:1px #c77382 solid;}
img.leftitle { width:100%; height:auto; display:block; margin-bottom:20px;}
#conLeft ul li a { color:#999;}
#conLeft ul li a:hover { color:#c77382;}
#conLeft ul li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
#conLeft ul li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}

#conRight { float:right; padding:25px 0 0 0; width:70%;}
h1 { color:#004b98; font-size:30px; line-height:40px; margin-bottom:25px; font-weight:bold;}
.editor { font-size:12px; color:#666; margin-bottom:20px;}
.editor img { width:60px; height:auto; display:inline-block; margin: 0 10px 0 0;}
#editorInfo { margin: 0 0 20px 0; padding: 20px 0; font-size:15px; line-height:24px; color:#666666; border-top:#e66382 1px solid; border-bottom:#e66382 1px solid;}
#editorInfo b { font-size:20px; font-weight:bold; display:block; margin-bottom:10px;}
#fontTxt { padding: 20px 0; border-top:#dadada 1px solid; border-bottom:#dadada 1px solid; font-size:15px; color:#558594; line-height:22px; margin-bottom:40px;}
#inCon { font-size:18px; line-height:32px; color:#333; text-align:justify; margin: 0 0 120px 0;}
img.conPic { -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); display:block; float:right; margin: 0 0 35px 35px; width:45%; height:auto; border:#fff 2px solid;}
#inCon p { margin: 30px 0 0 0;}

#brandCon { background:#f2f4f6; padding:30px 30px 30px 300px; font-size:15px; color:#6d6d6d; line-height:26px; text-align:justify; position:relative;}
#brandCon p { margin: 0 0 10px 0;}
h2 { color:#004b98; font-size:22px; line-height:36px; margin-bottom:10px; font-weight:bold;}
#brandPic { position:absolute; left:20px; top:-40px; box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); height:177px;}
#brandName { position:absolute; left:20px; top:160px; font-size:15px; color:#999;}
#brandName b { font-size:40px; font-weight:bold; display:block; color:#333; margin-top:6px;}
#brandLink { margin: 20px 0 0 0; text-align:right; color:#e66382; font-size:18px; font-weight:bold;}
#brandLink a.more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display: inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}
#brandLink a.more:hover { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}

h3 { color:#e63879; font-size:24px; margin-bottom:10px; font-weight:bold;}

#warning { background:#F0F0F0; font-size:13px; line-height:20px; padding:20px; margin:40px 0;}

}

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

@media screen and (min-width: 769px) and (max-width: 1023px) {
body { background: url(../images/topBG-M.jpg) #fff no-repeat center top;}
.wide { width:96%; margin:0 auto; position:relative;}

/* -- 右側主選項 -- */
nav { position:fixed; top:0; right:0; font-size:15px; z-index:998; width:100%; background:#e6e6e8; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); height:65px;}
nav li a { display: inline-block; color:#9b0010; padding:0 10px; border-right: #CCC 1px solid;}
nav li a:hover { display: inline-block; color:#000; padding:0 10px; border-right: #CCC 1px solid;}
nav li.fb a { background:url(../images/icon_FB.png) no-repeat center top; width:41px; height:38px; border:none; margin: -10px 10px 0 10px;}
nav li.line a { background: url(../images/icon_Line.png) no-repeat center top; width:41px; height:38px; border:none; margin: -10px 10px 0 0;}

/* -- 首頁標題logo -- */
#logo { position: fixed; top:40px; left:20px; z-index:999; width:15%}
#mainView { position:relative; height:650px;}
#kvGrass { background:url(../images/mv_Gress.png) no-repeat center center; width:100%; height:557px; position:absolute; top:149px; left:0; background-size:100% auto;}
#kvHeart { position:absolute; top:121px; left:30%; width:300px;}
#kvTxt { position:absolute; top:310px; left:12%; width:600px;}
#logo img,
#kvHeart img,
#kvTxt img { width:100%; height:auto;}

/* -- 內容區 -- */
article { width:92%; position:relative; margin:0 auto;}
ul.homeArticle { width:95%; margin: 20px auto 40px auto;}
ul.homeArticle li { width:30%; margin:0 1.5% 0 1.5%; float: left; color:#777; text-align:center;}
ul.homeArticle li a { font-size:16px; color:#777; line-height:24px;}
ul.homeArticle li a .more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px auto 0 auto; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover .more { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px auto 0 auto; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover { color:#c77382;}
ul.homeArticle li img { float:none; display:block; margin: 0 auto 10px auto; width:150px;}
ul.homeArticle li .circleP { background: url(../images/icon_Pink.png) no-repeat center top; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 13px; display:block; margin: 10px auto;}
ul.homeArticle li .circleG { background: url(../images/icon_Green.png) no-repeat center top; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 13px; display:block; margin: 10px auto;}
ul.homeArticle li .circleO { background: url(../images/icon_Orrange.png) no-repeat center top; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 13px; display:block; margin: 10px auto;}
ul.homeArticle li .title { font-size:30px; font-weight:bold; display:block; margin: 0 0 10px 0; height:50px; display:block;}

.item { text-align:center; margin-bottom:30px;}
ul.keypoint { margin: 40px 0 40px 0;}
ul.keypoint li { width:45%; float:left; margin: 0 2.5% 80px 2.5%; position:relative; font-size:18px; font-weight:bold; line-height:24px;}
ul.keypoint li a { color:#777777;}
ul.keypoint li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover { color:#c77382;}
ul.keypoint li .keyitem { position:absolute; top:-50px; left:-20px;}
ul.keypoint li .keyitem img,
ul.keypoint li:hover .keyitem img { border:none; box-shadow:none;}
ul.keypoint li img { width:100%; height:auto; display:block; margin: 0 0 15px 0; border:2px #fff solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4);}
ul.keypoint li:hover img { display:block; margin: 0 0 15px 0; border:2px #c77382 solid;}

/* -- Footer -- */
footer { width:100%; background:url(../images/footerBG.png) no-repeat -450px top; background-size:1800px auto;}
footer .wide { padding: 50px 30% 80px 0; color:#575757; font-size:14px; line-height:18px; width:96%; margin: 0 auto;}
footer .warning { font-size:16px; color:#181818; margin: 20px 0; font-weight:bold; line-height:20px;}
footer .copyright { font-size:12px; color:#cecece;}
footer b { display:block; font-size:24px; margin-bottom:15px; color:#004b98; font-weight:bold;}

/* -- Backtotop -- */
#topBackupArea { display:block; color:#fff; border-radius: 100px; -moz-border-radius:100px; -webkit-border-radius:100px; position:fixed; right:10px; bottom:20px; background: rgba(199,115,130,0.8); width:60px; height:60px; z-index:999999; text-align:center; line-height:60px; font-size:1.25em; font-weight:bold; cursor:pointer;}

/* -- 內頁文章 -- */
header { width:100%; background:url(../images/headerBG-M.jpg) no-repeat center top; height:200px; background-size:auto 200px;}
#conLeft { float:none; width:100%; margin: 50px 0 0 0;}
#conLeft ul { width:100%; margin:0 auto;}
#conLeft ul li { line-height:22px; position:relative; padding-bottom:25px; width:20%; float:left; margin: 0 2.5% 35px 2.5%; position:relative;}
#conLeft ul li img { width:100%; height:auto; border:#fff 1px solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); }
#conLeft ul li img:hover { border:1px #c77382 solid;}
img.leftitle { width:339px; height:auto; display:block; margin: 0 auto 20px auto;}
#conLeft ul li a { color:#999;}
#conLeft ul li a:hover { color:#c77382;}
#conLeft ul li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
#conLeft ul li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}

#brandPic { position:absolute; left:20px; top:-30px; box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px rgba(0, 0, 0, 0.1); height:177px;}
#brandPic img { width:100%; height:auto;}
#brandName { position:absolute; left:20px; top:160px; font-size:15px; color:#999;}
#brandName b { font-size:40px; font-weight:bold; display:block; color:#333; margin-top:6px;}
#brandLink { margin: 20px 0 0 0; text-align:right; color:#e66382; font-size:18px; font-weight:bold;}
#brandLink a.more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display: inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}
#brandLink a.more:hover { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}

#conRight { float:none; padding:10px 0 0 0; width:94%; margin:0 auto;}
}

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

@media screen and (max-width: 768px) {
body { background:url(../images/topBG-M2.jpg) no-repeat center top;}

/* -- 右側主選項 -- */
nav { position:fixed; top:0; right:0; font-size:15px; z-index:998; width:100%; background:#e6e6e8; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); height:50px;}
nav ul { display:none;}
h4 { width:70px; height:43px; background: url(../images/menuM.gif) no-repeat center center; position: fixed; top:5px; right:20px; display:block; z-index:9999;}
h4:hover { display:block; width:70px; height:43px; background: url(../images/menuM.gif) no-repeat center center; cursor: pointer;}

#SUBMENU { width:100%; height:auto; padding:0; margin:0; position: fixed; top:0; left:0; display:none; z-index:9997; background: rgba(277,96,124,0.85);}
#SUBMENU ul { padding: 30px 0; margin: 0 auto;}
#SUBMENU li a { font-size:1.25em; color: #fff; font-weight:bold; padding:20px 0; text-align:center; text-decoration:none; border:none; display:block; background:none;}
#SUBMENU li a:hover { background-color:#d60016; color:#fff;}
#SUBMENU li a .en13 { color:#e9afb5; display:block; margin-top:10px;}

#SUBMENU li.fb a { background:url(../images/icon_FB.png) no-repeat center top; width:41px; height:38px; border:none; margin: 10px auto;}
#SUBMENU li.line a { background: url(../images/icon_Line.png) no-repeat center top; width:41px; height:38px; border:none; margin: 10px auto;}
#SUBMENU li.fb a:hover,
#SUBMENU li.line a:hover { background-position: center bottom;}

.wide { width:96%; margin:0 auto; position:relative;}

/* -- 首頁標題logo -- */
#logo { position: fixed; top:20px; left:20px; z-index:999; width:100px;}
#mainView { position:relative; height:470px;}
#kvGrass { background:url(../images/mv_Gress.png) no-repeat center center; width:100%; height:557px; position:absolute; top:90px; left:0; background-size:100% auto;}
#kvHeart { position:absolute; top:90px; left:0; width:100%; text-align:center;}
#kvTxt { position:absolute; top:350px; left:0; width:100%; text-align:center;}
#logo img { width:100%; height:auto;}
#kvHeart img { width:200px; height:auto;}
#kvTxt img { width:90%; height:auto;}

/* -- 內容區 -- */
article { width:92%; position:relative; margin:0 auto;}
ul.homeArticle { width:95%; margin: 20px auto 30px auto;}
ul.homeArticle li { width:100%; margin:0 0 30px 0; float: left; color:#777; text-align:center;}
ul.homeArticle li a { font-size:16px; color:#777; line-height:24px;}
ul.homeArticle li a .more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px auto 0 auto; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover .more { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:15px; color:#fff; display:block; margin: 10px auto 0 auto; font-weight:normal; padding:3px 7px;}
ul.homeArticle li a:hover { color:#c77382;}
ul.homeArticle li img { float:none; display:block; margin: 0 auto 10px auto; width:150px;}
ul.homeArticle li .circleP { background: url(../images/icon_Pink.png) no-repeat center top; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 13px; display:block; margin: 10px auto;}
ul.homeArticle li .circleG { background: url(../images/icon_Green.png) no-repeat center top; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 13px; display:block; margin: 10px auto;}
ul.homeArticle li .circleO { background: url(../images/icon_Orrange.png) no-repeat center top; height:29px; color:#fff; line-height:29px; letter-spacing:13px; padding: 0 0 0 13px; display:block; margin: 10px auto;}
ul.homeArticle li .title { font-size:30px; font-weight:bold; display:block; margin: 0 0 10px 0; height:50px; display:block;}

.item { text-align:center; margin: 0 auto 40px auto; width:98%;}
.item img { width:100%; height:auto;}
ul.keypoint { margin: 40px auto; width:80%;}
ul.keypoint li { width:100%; float:none; margin: 20px 0 80px 0; position:relative; font-size:18px; font-weight:bold; line-height:24px; clear:both;}
ul.keypoint li a { color:#777777;}
ul.keypoint li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
ul.keypoint li a:hover { color:#c77382;}
ul.keypoint li .keyitem { position:absolute; top:-50px; left:-20px; width:60%; height:60px;}
ul.keypoint li .keyitem img,
ul.keypoint li:hover .keyitem img { border:none; box-shadow:none; width:auto; height:60px;}
ul.keypoint li img { width:100%; height:auto; display:block; margin: 0 0 15px 0; border:2px #fff solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4);}
ul.keypoint li:hover img { display:block; margin: 0 0 15px 0; border:2px #c77382 solid;}

/* -- Footer -- */
footer { width:100%; background:url(../images/footerBG-M.png) no-repeat center top; background-size: 400px auto;}
footer .wide { padding: 130px 0 80px 0; color:#575757; font-size:13px; line-height:18px; width:96%; margin: 0 auto;}
footer .warning { font-size:13px; color:#181818; margin: 20px 0; font-weight:bold; line-height:20px;}
footer .copyright { font-size:11px; color:#cecece;}
footer b { display:block; font-size:18px; margin-bottom:15px; color:#004b98; font-weight:bold;}

/* -- Backtotop -- */
#topBackupArea { display:block; color:#fff; border-radius: 100px; -moz-border-radius:100px; -webkit-border-radius:100px; position:fixed; right:10px; bottom:20px; background: rgba(199,115,130,0.8); width:60px; height:60px; z-index:999999; text-align:center; line-height:60px; font-size:1.25em; font-weight:bold; cursor:pointer;}

/* -- 內頁文章 -- */
header { width:100%; background:url(../images/headerBG-M2.jpg) no-repeat center top; height:180px; background-size:100% auto;}
#conLeft { float:none; width:80%; margin: 50px auto 0 auto;}
#conLeft ul { width:100%; margin:0 auto;}
#conLeft ul li { line-height:22px; position:relative; padding-bottom:25px; width:100%; float:none; margin: 0 0 35px 0; font-size:13px; position:relative;}
#conLeft ul li img { width:100%; height:auto; border:#fff 1px solid; -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.4); }
#conLeft ul li img:hover { border:1px #c77382 solid;}
img.leftitle { width:200px; height:auto; display:block; margin: 0 auto 20px auto;}
#conLeft ul li a { color:#999;}
#conLeft ul li a:hover { color:#c77382;}
#conLeft ul li a .more { background:#e66382; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
#conLeft ul li a:hover .more { background:#a84658; width:60px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:block; font-weight:normal; padding:1px 7px; position:absolute; bottom:0; right:0;}
#inCon { font-size:15px; line-height:24px; color:#333; text-align:justify; margin: 0 0 120px 0;}
img.conPic { -webkit-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); -moz-box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); box-shadow: 0px 0px 15px 0px rgba(170, 170, 170, 0.6); display:block; float:none; margin: 0 auto 35px auto; width:90%; height:auto; border:#fff 2px solid;}
#conRight { float:none; padding:10px 0 0 0; width:94%; margin:0 auto;}
#brandCon { background:#f2f4f6; padding:20px; font-size:15px; color:#6d6d6d; line-height:26px; text-align:justify; position:relative;}
#brandCon p { margin: 0 0 10px 0;}
h2 { color:#004b98; font-size:16px; line-height:24px; margin-bottom:10px; font-weight:bold;}
#brandPic { position: relative; left:0; top:0; box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); width:239px; height:177px; overflow:hidden; margin-bottom:15px;}
#brandPic img { width:239px; height:177px; margin: 0;}
#brandName { position: relative; left:0; top:0; font-size:14px; color:#999;}
#brandName b { font-size:24px; font-weight:bold; display:block; color:#333; margin:0 0 15px 0;}
#brandLink { margin: 20px 0 0 0; text-align:left; color:#e66382; font-size:15px; font-weight:bold; line-height:24px;}
#brandLink a.more { background:#e66382; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display: inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}
#brandLink a.more:hover { background:#a84658; width:100px; text-align:center; border-radius:50px; font-size:13px; color:#fff; display:inline-block; font-weight:normal; padding:10px; margin: 0 0 0 15px;}
}

@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;}
}
@media(max-width: 768px){
	.fl-page h1 span { display: block; }
	.fl-page .btn-download { float: none; margin-bottom: 1em; }
}