﻿/* ---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;}
.txtPink { color:#e3007a;}
a.Anchor { margin: -75px 0 0 0; padding: 75px 0 0 0; display:block;}

/* -- 右側主選項 -- */
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;}
footer.ineven { background:url(../images/footerBG.png) no-repeat center bottom #f5f5f5;}

/* -- 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;}


/*-- 講座 --*/
#eventH { width:100%; background: url(../images/eventBG.jpg) no-repeat center top; height:680px;}
a.join { position:absolute; right:90px; bottom:-170px;}

#eventTitle { float:left; margin:130px 0 0 10px;}
#eventTxt { font-size:1.12em; color:#e20078; line-height:26px; clear:both; margin: 15px 0 0 120px; width:50%; font-weight:bold;}
#eventTxt b { border-top:#e20078 4px dotted; margin: 20px 0 0 0; padding-top: 20px; color:#33757f; font-size:16px; display:block;}

#eventInfo { font-size:1.12em; color:#535353; line-height:45px; margin: 30px auto 30px auto; width:1040px; letter-spacing:1px;}
#eventInfo b { font-size:2em; font-weight:bold;}

h2.event { font-size:1.5em; font-weight:bold; color:#4b3724; width:85%; margin: 0 auto 28px auto;}
ul.speaker { width:1040px; margin: 0 auto;}
ul.speaker li { width:47%; margin: 0 40px 0 0; float:left;}
ul.speaker li.last { margin:0; border-right:none; width:47%; border-left: #CCC 2px dotted; padding: 0 0 0 40px; }
ul.speaker li b { font-size:30px; color:#457b87; line-height:34px; font-weight:bold; display:block; margin: 10px 0;}
ul.speaker li img { float:right; margin: 0 0 20px 20px;}
ul.speaker li .name { font-size:30px; font-weight:bold; color:#000; display:block; margin: 5px 0 10px 0;}
.intro { font-size:15px; line-height:22px; color:#666;}

#formzone { background:#f5f5f5; padding:30px 0; margin-top:60px;}
#eventform { float:left; width:55%; margin-right:2%; font-size:1em;}
#eventnote { float:right; width:43%; font-size:13px; line-height:22px; color:#666; text-align:justify;}
#eventnote b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#e3007a;}
#eventnote ol { margin: 0 0 0 -25px;}

.address, .addressform, .btn-send { display: inline-block;}

ul.joinform li { margin:25px 0; font-weight:bold;}
ul.joinform li input, ul.joinform li select { margin: 0 15px 0 0; font-size:18px; color:#e3007a; padding: 5px 10px; border:none; font-family:"微軟正黑體";}
ul.joinform li input[type="radio"] { margin: 0 5px;}
#formzone input[type="submit"] { background:#004b98; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}
.btn { background:#e3007a; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}
a.sbtn { background:#e3007a; color:#fff; font-size:15px; text-align:center; border:none; padding:0 15px; border-radius:5px; font-family:"微軟正黑體"; cursor:pointer; display:inline-block; margin: 0 0 0 15px;}

.formTitle { font-size:32px; display:block; color:#036; margin-bottom:30px;}
table { font-size:16px; color:#036; line-height:32px; border-radius:6px; width:90%; border-bottom:#fff 1px solid;}
table th { background:#036; color:#fff; padding: 10px 15px;}
table tr { border-bottom:#ee007a 1px solid;}
table tr:last-child { border-bottom:none;}
table td { padding: 10px 15px;}
table tr:nth-child(odd) { background:none; color:#fff;}
table tr:nth-child(even) { color:#ee007a; background:#fff;}

/*-- 活動 --*/
#event2H { width:100%; background: url(../images/event2BG.jpg) no-repeat center top;}
#event2Title { float:left; margin:130px 0 0 100px; }
#event2Txt { font-size:28px; color:#644b33; clear:both; margin: 18px 0 0 120px; font-weight:bold; background:url(../images/event2TxtBG.png) left top; width:526px; letter-spacing:-1px;}
#event2Txt b { margin: 10px 0 0 0; line-height:38px; color:#644b33; font-size:16px; display:block;}
#event2Txt a { color:#CC0000;}

#formzone2 { background: url(../images/formBG.png) no-repeat center top; width:1130px; padding:60px 70px; margin: 60px auto 0 auto;}
.event2form { float:left; width:47%; margin-right:6%; font-size:1em;}
#event2note { float:right; width:47%; font-size:13px; line-height:22px; color:#666; text-align:justify;}
#event2note>b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#cb1212;}

a.join2 { position:absolute; left:600px; top:400px;}
h2.event2 { font-size:30px; font-weight:bold; color:#4b3724; width:100%; margin: 0 auto 28px auto; background:url(../images/icon_item.png) no-repeat left center; padding: 0 0 0 23px; height:46px;}
h2.event2 b { font-size:18px;}

ul.join2form li { margin:25px 0 40px 0; font-size:18px; line-height:28px;}
ul.join2form li b { font-size:22px; color:#cb1212; display:block; margin: 0 0 10px 0; font-weight:bold; line-height:30px;}
ul.join2form li label { margin: 0 10px 0 0;}
ul.join2form li input, ul.join2form li select { margin: 0 5px 0 0; font-size:18px; color:#004b98; padding: 5px 10px; border:none;}
ul.join2form li input[type="radio"] { margin: 0 5px;}

ul.join3form li { margin:25px 0 40px 0; font-size:18px; line-height:28px; text-align:left;}
ul.join3form li b { font-size:22px; color:#cb1212; display:block; margin: 0 0 10px 0; font-weight:bold; line-height:30px;}
ul.join3form li label { margin: 0 10px 0 0;}
ul.join3form li input, ul.join3form li select { margin: 0 5px 10px 0; font-size:18px; color:#004b98; padding: 5px 10px; border:none; border-bottom:#CCCCCC 1px solid; background:none; outline:none; font-family:"微軟正黑體";}
ul.join3form li input.all { width:100%; margin: 0 0 10px 0;}
ul.join3form li input[type="radio"] { margin: 0 5px;}

ol.warning li { font-size:15px; line-height:22px; color:#333; margin: 0 0 5px 0;}

#formzone2 input[type="submit"] { background:#e3007a; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}

#resultSpring { width:100%; background: url(../images/result_BG1.jpg) no-repeat center top;}
#resultSummer { width:100%; background: url(../images/result_BG2.jpg) no-repeat center top;}
#resultAutumn { width:100%; background: url(../images/result_BG3.jpg) no-repeat center top;}
#resultWinter { width:100%; background: url(../images/result_BG4.jpg) no-repeat center top;}
#resultTxt { font-size:28px; color:#fff; clear:both; margin: 18px 0 0 120px; font-weight:bold; r-spacing:-1px;}
#resultTxt img { display:block; margin: 15px 0 0 0;}

#Lottery { background:#efece2; border:#d0c6b8 1px solid; box-shadow: 5px 5px 5px #CCC; padding: 25px 50px 25px 80px; position:relative;}
ul.LotteryL { width:40%; float:left; padding: 0 5% 0 0; border-right: #aaa8a0 1px solid; margin: 0 5% 0 0;}
ul.LotteryL li { background: url(../images/icon_item2.png) no-repeat right bottom; border-bottom: #aaa8a0 3px dotted; padding: 12px 10px; color:#4b3724; font-size:40px; font-weight:bold; display:block; width:auto; letter-spacing:-2px;}
ul.LotteryL li:last-child { border:none;}
#LotteryR { font-size:18px; line-height:30px; color: #4b3724; padding: 30px 0 110px 0; position:relative;}
#LotteryR b { font-weight:bold; font-size:26px; display:block; margin: 0 0 10px 0; padding: 0 0 0 -15px;}
a.moreInfo { position:absolute; bottom:-20px; right:0; display:block;}

#forumInfo { font-size:18px; line-height:28px; color:#333; margin: 40px 0 0 0;}
#forumInfo>b { display: inline-block; font-size:48px; font-weight:bold; color:#644b33; line-height:48px; letter-spacing:-1px; float:left; padding: 0 20px 0 0; margin: 0 20px 0 0; border-right: #999 1px solid;}
.speakerPic { float:right; margin: 0 0 0 20px; font-size:15px; text-align:center;}
.speakerPic img { display:block; margin: 0 0 0px 0;}
.speakerPic b { color: #600; font-size:18px; display:block;}
.pinkt24 { font-size:30px; margin: 0; display:block; line-height:30px; font-weight:bold; letter-spacing:-1px;}
}


/* --窄螢幕版型------------------------------------- */
@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;}

/*-- 講座 --*/
h2.event { font-size:1.5em; font-weight:bold; color:#4b3724; width:100%; margin: 0;}
ul.speaker { width:100%; margin: 0 auto; background:#060}
ul.speaker li { width:100%; margin: 0 0 40px 0; float:none;}
a.join { position:absolute; left:70%; top:500px; width:30%;}
a.join img { width:100%; height:auto;}
#eventInfo { font-size:1.12em; color:#535353; line-height:45px; margin: 30px auto 30px auto; width:80%; letter-spacing:1px;}
#eventInfo b { font-size:2em; font-weight:bold;}
#formzone { background:#f5f5f5; padding:30px 0; margin-top:60px;}
#eventform { float:left; width:50%; margin-right:2%; font-size:1em;}
#eventnote { float:right; width:40%; font-size:13px; line-height:22px; color:#666; text-align:justify;}
#eventnote b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#e3007a;}
#eventnote ol { margin: 0 0 0 -25px;}

#formzone2 { background: url(../images/formBG.png) no-repeat center top; background-size:100% 400px; width:98%; padding:80px 70px 60px 70px; margin: 60px auto 0 auto;}
.event2form { float:none; width:100%; margin: 0 auto; font-size:1em;}
#event2note { float:none; width:100%; margin: 0 auto; font-size:13px; line-height:22px; color:#666; text-align:justify;}
#event2note>b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#cb1212;}
}

/* --平板版型------------------------------------- */

@media screen and (min-width: 415px) 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;}

footer.ineven .wide { padding: 50px 30% 80px 0; color:#575757; font-size:14px; line-height:18px; width:96%; margin: 0 auto;}
footer.ineven .warning { font-size:16px; color:#181818; margin: 20px 0; font-weight:bold; line-height:20px;}
footer.ineven .copyright { font-size:12px; color:#cecece;}
footer.ineven 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;}

/*-- 講座 --*/
h2.event { font-size:1.25em; font-weight:bold; color:#4b3724; width:100%; margin: 0 auto 28px auto;}
a.join { position:absolute; left:70%; top:500px; width:30%;}
a.join img { width:100%; height:auto;}
#eventTitle { float:left; margin:120px 0 0 10px; width:60%;}
#eventTitle img { width:100%; height:auto;}
#eventTxt { font-size:1.12em; color:#e20078; line-height:26px; clear:both; margin: 45px 0 0 30px; width:60%; font-weight:bold; padding-top:30px;}
#eventTxt b { border-top:#e20078 4px dotted; margin: 20px 0 0 0; padding-top: 20px; color:#33757f; font-size:16px; display:block;}
#eventInfo { font-size:1.12em; color:#535353; line-height:45px; margin: 30px auto 30px auto; width:1040px; letter-spacing:1px;}
#eventInfo b { font-size:2em; font-weight:bold;}
ul.speaker { width:100%; margin: 0 auto;}
ul.speaker li { width:100%; margin: 0 0 30px 0; float:none; border-top: #CCC 2px dotted; padding: 30px 0 0 0; }
ul.speaker li.last { margin: 30px 0 0 0; border-right:none; width:100%; border-top: #CCC 2px dotted; border-left: none; padding: 30px 0 0 0; }
#eventInfo { font-size:1em; color:#535353; line-height:45px; margin: 30px auto 30px auto; width:100%; letter-spacing:1px;}
#eventInfo b { font-size:1.5em; font-weight:bold;}
#formzone { background:#f5f5f5; padding:30px 0; margin-top:60px;}
#eventform { float:none; width:95%; margin:0 auto; font-size:1em;}
#eventnote { float:none; width:95%; font-size:13px; line-height:22px; color:#666; text-align:justify; margin: 30px auto 0 auto;}
#eventnote b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#e3007a;}
#eventnote ol { margin: 0 0 0 -25px;}

/*-- 活動 --*/
#event2H { width:100%; background: url(../images/event2BG.jpg) no-repeat center top;}
#event2Title { float:left; margin:130px 0 0 50px; }
#event2Txt { font-size:28px; color:#644b33; clear:both; margin: 18px 0 0 70px; font-weight:bold; background:url(../images/event2TxtBG.png) left top; width:526px; letter-spacing:-1px;}

#formzone2 { background: url(../images/formBG.png) no-repeat center top; background-size:100% 400px; width:98%; padding:80px 70px 60px 70px; margin: 60px auto 0 auto;}
.event2form { float:none; width:100%; margin: 0 auto; font-size:1em;}
#event2note { float:none; width:100%; margin: 0 auto; font-size:13px; line-height:22px; color:#666; text-align:justify;}
#event2note>b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#cb1212;}

a.join2 { position:absolute; left:500px; top:550px;}
h2.event2 { font-size:30px; font-weight:bold; color:#4b3724; width:100%; margin: 0 auto 28px auto; background:url(../images/icon_item.png) no-repeat left center; padding: 0 0 0 23px; height:46px;}
h2.event2 b { font-size:18px;}

ul.join2form li { margin:25px 0 40px 0; font-size:18px; line-height:28px;}
ul.join2form li b { font-size:22px; color:#cb1212; display:block; margin: 0 0 10px 0; font-weight:bold; line-height:30px;}
ul.join2form li label { margin: 0 10px 0 0;}
ul.join2form li input, ul.join2form li select { margin: 0 5px 0 0; font-size:18px; color:#004b98; padding: 5px 10px; border:none;}
ul.join2form li input[type="radio"] { margin: 0 5px;}

ul.join3form li { margin:25px 0 40px 0; font-size:18px; line-height:28px;}
ul.join3form li b { font-size:22px; color:#cb1212; display:block; margin: 0 0 10px 0; font-weight:bold; line-height:30px;}
ul.join3form li label { margin: 0 10px 0 0;}
ul.join3form li input, ul.join3form li select { margin: 0 5px 10px 0; font-size:18px; color:#004b98; padding: 5px 10px; border:none; border-bottom:#CCCCCC 1px solid; background:none; outline:none;}
ul.join3form li input[type="radio"] { margin: 0 5px;}

ol.warning li { font-size:15px; line-height:22px; color:#333; margin: 0 0 5px 0;}

#formzone2 input[type="submit"] { background:#e3007a; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}
.btn { background:#e3007a; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}
a.sbtn { background:#e3007a; color:#fff; font-size:15px; text-align:center; border:none; padding:0 15px; border-radius:5px; font-family:"微軟正黑體"; cursor:pointer; display:inline-block; margin: 0 0 0 15px;}

#resultSpring { width:100%; background: url(../images/result_BG1.jpg) no-repeat center top;}
#resultSummer { width:100%; background: url(../images/result_BG2.jpg) no-repeat center top;}
#resultAutumn { width:100%; background: url(../images/result_BG3.jpg) no-repeat center top;}
#resultWinter { width:100%; background: url(../images/result_BG4.jpg) no-repeat center top;}
#resultTxt { font-size:28px; color:#fff; clear:both; margin: 18px 0 0 40px; font-weight:bold; r-spacing:-1px;}
#resultTxt img { display:block; margin: 15px 0 0 0;}

#Lottery { background:#efece2; border:#d0c6b8 1px solid; box-shadow: 5px 5px 5px #CCC; padding: 25px 50px 100px 50px; position:relative; margin-bottom:100px;}
ul.LotteryL { width:100%; float:none; padding: 0 0 0 0; border-right: none; margin: 0;}
ul.LotteryL li { background: url(../images/icon_item2.png) no-repeat right bottom; border-bottom: #aaa8a0 3px dotted; padding: 12px 10px; color:#4b3724; font-size:40px; font-weight:bold; display:block; width: inherit; letter-spacing:-2px; text-align:center;}
ul.LotteryL li:last-child { border-bottom: #aaa8a0 3px dotted;}
#LotteryR { font-size:18px; line-height:30px; color: #4b3724; padding: 30px 0 80px 0; position:relative;}
#LotteryR b { font-weight:bold; font-size:26px; display:block; margin: 0 0 10px 0; padding: 0 0 0 -15px;}
a.moreInfo { position:absolute; bottom:-80px; right:0; display:block;}

#forumInfo { font-size:18px; line-height:28px; color:#333; margin: 40px 0 0 0;}
#forumInfo>b { display: block; font-size:32px; font-weight:bold; color:#644b33; line-height:32px; letter-spacing:-1px; float:none; padding: 0 20px 0 0; margin: 0 0 20px 0; border-right: #999 1px solid; clear:right; width:100px;}
.speakerPic { float:right; margin: 0 0 0 20px; font-size:15px; text-align:center;}
.speakerPic img { display:block; margin: 0 0 0px 0;}
.speakerPic b { color: #600; font-size:18px; display:block;}
.pinkt24 { font-size:30px; margin: 0; display:block; line-height:30px; font-weight:bold; letter-spacing:-1px;}
}

/* --手機版型------------------------------------- */

@media screen and (max-width: 414px) {
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;}


#eventH { width:100%; background: url(../images/eventBG-M.jpg) no-repeat center top #a8ddeb; background-size:600px auto; height:770px;}
h2.event { font-size:1.25em; font-weight:bold; color:#4b3724; width:100%; margin: 0 auto 28px auto;}
a.join { position: relative; left:0; top:0; width:200px; margin: 20px 0 0 30%;}
a.join img { width:140px; height:auto;}

#eventTitle { float:left; margin:220px 0 0 0; width:90%;}
#eventTitle img { width:100%; height:auto;}

#eventTxt { font-size:1.12em; color:#e20078; line-height:26px; clear:both; margin: 45px auto 0 auto; width:90%; font-weight:bold; padding-top:30px;}
#eventTxt b { border-top:#e20078 4px dotted; margin: 20px 0 0 0; padding-top: 20px; color:#33757f; font-size:16px; display:block;}

#eventInfo { font-size:1.12em; color:#535353; line-height:45px; margin: 30px auto 30px auto; width:1040px; letter-spacing:1px;}
#eventInfo b { font-size:2em; font-weight:bold; display:block;}

ul.speaker { width:100%; margin: 0 auto;}
ul.speaker li { width:100%; margin: 0 0 30px 0; float:none; border-top: #CCC 2px dotted; padding: 30px 0 0 0; }
ul.speaker li.last { margin: 30px 0 0 0; border-right:none; width:100%; border-top: #CCC 2px dotted; border-left: none; padding: 30px 0 0 0; }
ul.speaker li b { font-size:24px; color:#457b87; line-height:30px; font-weight:bold; display:block; margin: 10px 0;}
ul.speaker li img { float:left; margin: 0 20px 20px 0; width:40%; height:auto; clear:both;}
ul.speaker li .name { font-size:24px; font-weight:bold; color:#000; display:block; margin: 5px 0 10px 0;}

ul.joinform li input, ul.joinform li select { margin: 0 15px 15px 0; font-size:16px; color:#004b98; padding: 5px 10px; border:none; font-family:"微軟正黑體";}

#eventInfo { font-size:1em; color:#535353; line-height:45px; margin: 30px auto 30px auto; width:100%; letter-spacing:1px;}
#eventInfo b { font-size:1.5em; font-weight:bold;}
#formzone { background:#f5f5f5; padding:30px 0; margin-top:60px;}
#eventform { float:none; width:95%; margin:0 auto; font-size:1em;}
#eventnote { float:none; width:95%; font-size:13px; line-height:22px; color:#666; text-align:justify; margin: 30px auto 0 auto;}
#eventnote b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#e3007a;}
#eventnote ol { margin: 0 0 0 -25px;}

/*-- 活動 --*/
#event2H { width:100%; background: url(../images/event2BG-M.jpg) no-repeat center top; background-size:500px auto;}
#event2Title { float:none; margin:0 0 0 2%; width:90%; padding: 100px 0 0 0;}
#event2Title img { width:100%; height:auto;}
#event2Txt { font-size:28px; color:#644b33; clear:both; margin: 60px auto 0 auto; font-weight:bold; background:none; width:90%; letter-spacing:-1px;}
#event2Txt b { margin: 10px 0 0 0; line-height:30px; color:#644b33; font-size:16px; display:block;}

#formzone2 { background: url(../images/formBG.png) no-repeat center top; background-size:100% 400px; width:96%; padding:80px 30px 60px 30px; margin: 60px auto 0 auto;}
.event2form { float:none; width:100%; margin: 0 auto; font-size:1em;}
#event2note { float:none; width:100%; margin: 0 auto; font-size:13px; line-height:22px; color:#666; text-align:justify;}
#event2note>b { display:block; margin-bottom:10px; font-weight:bold; font-size:15px; color:#cb1212;}

a.join2 { position:absolute; left:60%; top:570px; width:35%;}
a.join2 img { width:100%; height:auto;}
h2.event2 { font-size:24px; font-weight:bold; color:#4b3724; width:100%; margin: 0 auto 28px auto; background:url(../images/icon_item.png) no-repeat left center; padding: 0 0 0 23px; height:46px;}
h2.event2 b { font-size:18px;}

ul.join2form li { margin:25px 0 40px 0; font-size:18px; line-height:28px;}
ul.join2form li b { font-size:22px; color:#cb1212; display:block; margin: 0 0 10px 0; font-weight:bold; line-height:30px;}
ul.join2form li label { margin: 0 10px 0 0;}
ul.join2form li input, ul.join2form li select { margin: 0 5px 0 0; font-size:18px; color:#004b98; padding: 5px 10px; border:none;}
ul.join2form li input[type="radio"] { margin: 0 5px;}

ul.join3form li { margin:25px 0 40px 0; font-size:18px; line-height:28px; text-align:left;}
ul.join3form li b { font-size:22px; color:#cb1212; display:block; margin: 0 0 10px 0; font-weight:bold; line-height:30px;}
ul.join3form li label { margin: 0 10px 0 0;}
ul.join3form li input, ul.join3form li select { margin: 0 5px 10px 0; font-size:18px; color:#004b98; padding: 5px 10px; border:none; border-bottom:#CCCCCC 1px solid; background:none; outline:none;}
ul.join3form li input[type="radio"] { margin: 0 5px;}

ol.warning li { font-size:15px; line-height:22px; color:#333; margin: 0 0 5px 0;}

#formzone2 input[type="submit"] { background:#e3007a; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}
.btn { background:#e3007a; color:#fff; font-size:20px; text-align:center; border:none; padding:15px 60px; font-family:"微軟正黑體"; cursor:pointer;}
a.sbtn { background:#e3007a; color:#fff; font-size:15px; text-align:center; border:none; padding:0 15px; border-radius:5px; font-family:"微軟正黑體"; cursor:pointer; display:inline-block; margin: 0 0 0 15px;}
.btn-send { color:#fff; font-size:20px; text-align:center; border:none; padding:15px 30px; font-family:"微軟正黑體"; cursor:pointer;}


#resultSpring { width:100%; background: url(../images/result_BG1.jpg) no-repeat center top;}
#resultSummer { width:100%; background: url(../images/result_BG2.jpg) no-repeat center top;}
#resultAutumn { width:100%; background: url(../images/result_BG3.jpg) no-repeat center top;}
#resultWinter { width:100%; background: url(../images/result_BG4.jpg) no-repeat center top;}
#resultTxt { font-size:28px; color:#fff; clear:both; margin: 18px auto 0 auto; font-weight:bold; r-spacing:-1px; padding:0; width:90%;}
#resultTxt img { display:block; margin: 15px 0 0 0; width:100%; height:auto;}

#Lottery { background:#efece2; border:#d0c6b8 1px solid; box-shadow: 5px 5px 5px #CCC; padding: 25px; position:relative;}
ul.LotteryL { width:100%; float:none; padding: 0; border-right: none; margin: 0 0 20px 0;}
ul.LotteryL li { background: url(../images/icon_item2.png) no-repeat right bottom; border-bottom: #aaa8a0 3px dotted; padding: 12px 10px; color:#4b3724; font-size:26px; text-align:center; font-weight:bold; display:block; width:auto; letter-spacing:-2px;}
ul.LotteryL li:last-child { border:none;}
#LotteryR { font-size:18px; line-height:30px; color: #4b3724; padding: 30px 0 100px 0; position:relative;}
#LotteryR b { font-weight:bold; font-size:18px; display:block; margin: 0 0 10px 0; padding: 0 0 0 -15px;}
a.moreInfo { position:absolute; bottom:-30px; right:0; display:block;}

#forumInfo { font-size:18px; line-height:28px; color:#333; margin: 40px 0 0 0;}
#forumInfo>b { display: block; font-size:32px; font-weight:bold; color:#644b33; line-height:32px; letter-spacing:-1px; float:none; padding: 0 20px 0 0; margin: 0 0 20px 0; border-right: #999 1px solid; clear:right; width:100px;}
.speakerPic { float:left; margin: 0 5% 30px 0; font-size:15px; text-align:center; width:45%; display:inline-block;}
.speakerPic img { display:block; margin: 0; width:100%; height:auto;}
.speakerPic b { color: #600; font-size:18px; display:block;}
.pinkt24 { font-size:30px; margin: 0; display:block; line-height:30px; font-weight:bold; letter-spacing:-1px;}

.formTitle { font-size:24px; display:block; color:#036; margin-bottom:30px;}
}

@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; }
}