/* ---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;}
.tRed { color:#C00;}
@font-face { font-family: GOTHIC; src: url(../fonts/GOTHIC.TTF);}

/* --電腦版型------------------------------------- */
body { background: url(../images/mainBG.gif) no-repeat center top #fff3c3;}
body.in { background: url(../images/mainBG-in.gif) no-repeat center top #fae0da;}

.mainCon { width:1070px; 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;}

p { margin-bottom:25px;}

/* -- 主選項 -- */
nav { position:fixed; top:10px; right:0; font-size:18px; font-weight:bold; z-index:fff; z-index: 9999999; background:url(../images/navBG.png) repeat-y right top; height:100%;}
nav img { position:absolute; top:20px; right:10px;}
nav ul { padding: 20px 0; z-index: 99999999; margin-top:60px;}
nav li { margin:0 0 10px 0; display: block; text-align: right;}
nav li a { display:block; color:#17587a; padding:10px 40px 10px 0;}
nav li a b,
nav li a.click b { font-size:22px; font-weight: bold; display:block; margin-top:5px;}
nav li a.click { color:#f95551; background: url(../images/navMark.png) no-repeat right center;}

/* -- 主選項2 -- */
nav { position:fixed; top:10px; right:0; font-size:18px; font-weight:bold; z-index:fff; z-index: 9999999; background:url(../images/navBG.png) repeat-y right top; height:100%;}
nav img { position:absolute; top:20px; right:10px;}
nav ul.check { padding: 20px 0; z-index: 99999999; margin-top:60px;}
nav ul.check li { margin:0 0 10px 0; display: block; text-align: right;}
nav ul.check li a { display:block; color:#fffc9f; padding:10px 40px 10px 0;}
nav ul.check li a b,
nav ul.check li a.click b { font-size:22px; font-weight: bold; display:block; margin-top:5px;}
nav ul.check li a.click { color:#f95551; background: url(../images/navMark.png) no-repeat right center;}

/* -- develop chester -- */
.menu_tag { color:#f95551; background: url(../images/navMark.png) no-repeat right center;}
.menu_tag:hover { color:#f95551;}
.menu_tag:hover a,
.menu_tag:hover a b { color:#f95551;}

/* -- 首頁 -- */
#home { width:1250px; position:relative; margin: 0 auto; height:617px;}
img.title01 { position:absolute; top: 199px; left: 105px; display:inline-block;}
img.title02 { position:absolute; top: 82px; left: 539px; display:inline-block; z-index:0;}
img.title03 { position:absolute; top: 375px; left: 679px; display:inline-block; z-index:0;}
img.mainView { position:absolute; top: 143px; left: 251px; display:inline-block; z-index:1;}

/* -- 活動 -- */
#event { background:#fff3c3; padding-bottom:50px;}
.indxe_new{float:left;width: 45%; }
img.fontTxt { display:block; margin-top:20px;width:100%; height:auto;}
img.fontTxt-M { display:none;}
img.tv { display:block; float:right; width:50%; height:auto; margin-top:60px;}
img.eventL { float:left; margin-top:-30px; width:50%; height:auto;}
img.eventR { margin-top:-30px; width:100%; height:auto;}

iframe { width:100%; height:400px;}

/* -- 滑動頁籤 -- */
.abgne_tab { margin: 0; position: absolute; right:10px; top:0;}
.abgne_tab ul.tabs { width: 100%; height: 182px;}
.abgne_tab ul.tabs li { display:inline-block; width:134px; margin: 15px 5px 0 5px; cursor:pointer; font-weight:bold; height:162px; background: url(../images/bookMarkBG.png) no-repeat center bottom; color:#fe8165; text-align:center; font-size:22px; line-height:26px; padding-top:40px;}
.abgne_tab ul.tabs li.active { background: url(../images/bookMarkBG.png) no-repeat center top; color:#fff;}
.abgne_tab ul.tabs li a:hover { color:#fe8165;}
.abgne_tab ul.tabs li a { color:#fe8165;}

div.tab_container { width: 100%; margin: 0 auto; position:relative;}
div.tab_container .tab_content { min-height:300px;}

ul.list { width:100%; padding:35px 0 0 0; text-align:center;}
ul.list li { width:260px; display:inline-block; margin: 0 45px 30px 45px; font-size:22px; font-weight:bold; vertical-align:top; line-height:26px;}
ul.list li a { color:#656565;}
ul.list li a:hover { color:#e85d3e;}
ul.list li a img { border-radius: 20px; margin-bottom: 20px; opacity:.9; filter:alpha(opacity=90);}
ul.list li a img.go { width:44px; height:auto; display:block; margin: 20px auto 0 auto;}
ul.list li a:hover img { border-radius: 20px; opacity:1; filter:alpha(opacity=100);}

/* -- 文章區 -- */
ul.list2 { width:100%; padding:35px 0 0 0;}
ul.list2 li { font-size:24px; font-weight:bold; vertical-align:top; line-height:32px;}
ul.list2 li a { color:#17587a; position:relative; width:45%; display:inline-block; margin: 0 4% 30px 1%; padding: 0 50px 30px 0 ; float:left; border-bottom:#fe8165 1px dotted; min-height:100px;}
ul.list2 li a b { display:block; font-size:15px; color:#666; margin-top:5px;}
ul.list2 li a:hover { color:#e85d3e;}
ul.list2 li a img.go { width:44px; height:auto; display: inline-block; position:absolute; right:0; top:0; opacity:.8; filter:alpha(opacity=80);}
ul.list2 li a:hover img.go { border-radius: 20px; opacity:1; filter:alpha(opacity=100);}

#articles { background:#fae0da; padding: 35px 0 50px 0;}
#item01 { background: url(../images/markBG.gif) repeat-x; height:182px; position:relative; padding: 0 0 0 15px;}

h1 { font-size:36px; font-weight:bold; color:#bd3416; text-align:center; margin: -10px auto 40px auto; padding:20px 0; border:#d64525 1px dotted; border-radius: 80px;}

#content { font-size:18px; line-height:34px; color:#333; text-align:justify; width:96%; margin: 0 auto; padding-bottom:40px;}
#content b { font-size:22px; font-weight:bold; display:block; margin-bottom:10px; color:#bd3416;}
#editor { padding: 20px 0; text-align:left; font-size: 16px; color:#996633; font-weight:bold; width:96%; margin: 0 auto;}
.photo { float:left; margin: 0 30px 30px 0; width:40%;}
.photo img { width:100%; height:auto; display:block; border-radius: 20px; margin-bottom: 10px;}
.photo2{float:right;width: 35%;margin: 0 0 30px 30px;}
.photo2 img {margin-bottom: 0;}
#content small{font-size: 13px;color:#606060; line-height: 13px;margin-top: 10px; }
#content p span{ color:#bd3416; font-weight:bold;}
/* -- Footer -- */
footer { width:100%; color:#606060; padding:25px 0 45px 0; background:#89c972; text-align:center; font-weight:bold;}
footer b { font-size:11px; color:#fff; display:block; line-height:18px; font-weight:normal;}
footer img { display: block; margin: 0 auto 10px auto; vertical-align:middle;}
a.where { display:block; margin: 24px auto; width: 340px; background:#fe8165; color:#fff; font-weight:bold; border-radius:100px; font-size:25px; padding: 20px 0;}
a.where:hover { background:#e85d3e;}

/* -- 長高迷思 -- */
body.event1 { background: url(../images/eventBG.gif) no-repeat center top #e6e7e9;}
img.eventView { position:absolute; top: 100px; left: 37.5%; display:inline-block; z-index:1;}
img.title04 { position:absolute; top: 110px; left: 17.5%; display:inline-block;}
#eventhome { width:1250px; position:relative; margin: 0 auto; text-align:center;}
#eventFontxt { margin: 0 auto; font-size:20px; color:#407b9b; padding-top:750px; line-height:32px; font-weight:bold;}
#eventFontxt .space { font-size:24px; display: inline-block; margin: 10px;}
a.giftlist { border-radius:50px; background:#d7696c; color:#fff; margin: 0 0 0 10px; font-size:16px; font-weight:bold; padding: 5px 20px; width:auto; border:none; font-family:"微軟正黑體"; text-align:center; display: inline-block;}
.listitem { font-size:18px; font-weight:bold; color:#fff; display:block; margin: 0 auto 15px auto; text-align:center; padding: 10px; border-radius:30px; background:#fe8165; width:380px;}
ul.name { text-align:center; margin-bottom:0;}
ul.name li { font-size:16px; display:block; margin-bottom:5px; width:20%; display:inline-block; color:#f5efe5; letter-spacing:1px;}
ul.name li b { font-size:24px; color:#fff; display:block; margin-bottom:5px; font-weight:bold;}


#game { width:1250px; margin: 0 auto; text-align:center;}
img.Qtitle { display:block; width:auto; margin: 10px auto;}
.Qno { font-family: GOTHIC; color:#009ba0; font-size:20px; font-weight:bold; display:block;}
.Qno b { font-size:48px;}
.Qtxt { color:#d7696c; font-size:48px; font-weight:bold; display:block; margin:20px auto 40px 0;}
img.Aerror { padding-right:40px; border-right: #d7696c 2px dotted; margin-right:10px;}
img.Acorrect { margin-left:30px;}
input[type="submit"] { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 150px auto; font-size:30px; font-weight:bold; padding: 15px 0; width:400px; border:none; font-family:"微軟正黑體"; text-align:center; display:block;}
input[type="submit"]:hover,
input[type="button"] { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 150px auto; font-size:30px; font-weight:bold; padding: 15px 0; width:400px; border:none; font-family:"微軟正黑體"; text-align:center; display:block;}
input[type="button"]:hover,
a.morelink:hover { background:#ae3f42;}
input[type="radio"] { display:none;}
label { cursor:pointer;}
.Qinfo { color:#d7696c; font-size:22px; font-weight:bold; display:block; line-height:30px;}
.total { color:#d7696c; font-size:72px; font-weight:bold;}
.total b { font-size:140px; font-family:GOTHIC;}

ul.datalist { margin: 20px auto; color:#009ba0; font-size:15px; width:100%;}
ul.datalist li { margin: 0 auto 20px auto; font-size:24px; font-weight:bold; color:#009ba0; width:60%;}
ul.datalist li input { border:none; border-bottom:#009ba0 1px solid; padding: 5px; font-family:"微軟正黑體", Arial; color:#000; font-size:18px; outline:none; background:none; display:block; text-align:center; margin-top:10px; width:100%;}
.warning { color:#000; line-height:24px; display:block; width:70%; text-align:left; margin: 0 auto;} .warning b { font-size:20px; font-weight:bold; color:#009ba0; display:block; margin-bottom:10px;}

.container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* Hide the browser's default checkbox */
.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #fff; border:#009ba0 1px solid;}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark { background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #009ba0;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none;}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after { display: block;}
/* Style the checkmark/indicator */
.container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.totalSub { display:block; height:74px; text-align:center; background:url(../images/event-titleBG.gif) repeat-x center bottom; margin: 20px auto 0 auto; width:80%;}
.scoreTxt { font-size:18px; font-weight:bold; color:#333; line-height:26px; text-align:left; display:block; margin: 20px auto 100px auto; width:80%;}

a.morelink { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 150px auto; font-size:30px; font-weight:bold; padding: 20px 30px; width: inherit; border:none; font-family:"微軟正黑體"; text-align:center; display:block;}

ol.note { margin-top:10px; background:#009ba0; padding: 30px 5%;}
b.note { font-size:24px; font-weight:bold; color:#fff; display:block; margin: 0 0 20px -20px;}
ol.note li { width:100%; font-size:15px; font-weight:normal; text-align:justify; line-height:22px; color:#fff;}

ul.gift { text-align:center; vertical-align:middle;}
ul.gift li { width:30%; margin: 0 1% 10px 1%; display:inline-block; color:#f5efe5; font-size:15px; vertical-align:top; font-weight:bold;}
ul.gift li img { width:100%; height:auto;}
ul.gift li b { font-size:24px; font-weight:bold; color:#fff; display:block; margin-bottom:5px;}

.Quota { display:block; font-size:20px; font-weight:bold; color:#FF0000;}

/* -- 成長檢測 -- */
body.check { background: url(../images/checkBG.gif) no-repeat center top #abd6d3;}
img.slogo { margin: 40px 60px 0 0; display:block; float:right;}
img.title05 { position:absolute; top: 327px; left: 540px; display:inline-block; z-index:0;}
img.checkView { position:absolute; top: 125px; left: 0; display:inline-block; z-index:1;}
#checkFontxt { margin: 0 auto; font-size:20px; color:#676c7f; padding-top:690px; line-height:32px; font-weight:bold;}
#checkform { position:relative; margin:0 auto; width:1009px; background:url(../images/checkForm4.gif) repeat-y center bottom;}
#checkform img.form1 {}
#checkform img.form4 {}
#checkform>ul { width: 75%; margin: 0 auto; border-top: #009ba0 2px dotted; z-index:999;}
#checkform>ul>li { color:#444; font-size:32px; padding: 20px 0; border-bottom:#666 1px dotted;}
#checkform>ul>li:last-child { border-bottom: #009ba0 2px dotted;}
a.morearticle { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 20px auto; font-size:30px; font-weight:bold; padding: 15px 0; width:320px; border:none; font-family:"微軟正黑體"; text-align:center; display:block;}
a.morearticle:hover { background:#bf363a;}
img.checkTitle { width:322px; margin: 0 auto; display:block;}

#qaContent { width:100%; margin:0 auto;}
#qaContent ul { width: 75%; margin: 0 auto; border-top: #009ba0 2px dotted; z-index:999; padding-bottom:150px;}
#qaContent ul li:last-child { border-bottom: #009ba0 2px dotted;}
#qaContent ul li .qa_title { color:#444; font-size:32px; padding: 20px 0 20px 40px; border-bottom:#666 1px dotted; cursor:pointer; background:url(../images/checkbox.gif) no-repeat left center;}
/*#qaContent ul li .qa_title:hover { background: url(../images/checkbox2.gif) no-repeat left center;}*/
#qaContent ul li .qa_title b { color:#ff5a35; font-size:36px; font-weight:bold;}
#qaContent ul li .qa_title_on { text-decoration: none; background: url(../images/checkbox2.gif) no-repeat left center;}
#qaContent ul li .qa_content { background:url(../images/checkIcon.gif) no-repeat left top; width:100%; color: #484848; padding: 0 0 0 75px; margin: 20px 0;}
#qaContent ul li .qa_content p{font-size:18px; line-height:28px; text-align:justify;margin-bottom:10px;}
#qaContent ul li .qa_content .qa_ref h6{font-size:12px; line-height:28px; }
#qaContent ul li .qa_content .qa_ref ol{padding: 0; padding-left: 15px;}
#qaContent ul li .qa_content .qa_ref li{font-size:12px; line-height:20px; }
#qaContent ul li .qa_content .qa_ref li:last-child { border-bottom: 0;}
#qaContent ul li .qa_content .qa_ref li a{color: #009ba0;}
#qaContent ul li .qa_content img { display: inline-block; margin: 0 0 20px 20px; float:right;}
#qaContent ul li .qa_content b { display:block; margin:15px 0 0 0; width:100%; font-size:24px; color:#009ba0; border: #ff5a35 1px solid; padding: 20px 40px; font-weight:bold;}

/* -- video-- */
.videotitle{text-align: center;font-size: 26px;color: #f98f6f;font-weight: bold;padding: 20px 0; line-height: 26px;}
.videotitle::before{content: ''; display: block;background: #f98f6f;width: 34px;height: 7px;margin: 0 auto;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;margin-bottom: 15px;}
.video_main{margin: 0 auto;display: flex;justify-content: center;align-items:stretch;margin: 60px 0 ;}
.video_main > div{width: 48%;margin: 0 auto;} 
.video_main div a{display: flex;justify-content: center;align-items:stretch;cursor: pointer; background: #e97578;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.video_main div a:hover{ background: #e6585c;}
.video_main div a div:first-child{width:65%;position: relative;margin:-25px 0 25px 20px;}
.video_main div a div:first-child img{width: 100%;}
.video_main div a div:last-child{display: flex;align-items:center;justify-content: center;flex-direction: column;width: 30%;text-align: center;}
.video_main div a h6{font-size:27px; color: #ffc2c2;line-height:30px;font-weight: bold;}
.video_main div a p{font-size:20px; color:#fff; line-height:26px;font-weight: 500;padding: 13px 0; margin-bottom: 0;}
.video_main div a small{font-size:14px;color:#fff;display: block;width: 80px;height: 25px;line-height: 22px; border: 2px solid #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}

.videomore{width: 1200px;margin: 0 auto;display: flex;justify-content: center;align-items:stretch;}
.videomore div {text-align: center;margin: 30px;  border: 6px solid #f7c344;background: #f7c344;-webkit-border-radius: 18px;-moz-border-radius: 18px;border-radius: 18px;cursor: pointer;}
.videomore div:hover{background: #f98f6f;border: 6px solid #f98f6f;}
.videomore div a h5 {position: relative; display: block;overflow: hidden; background: #fffae7;-webkit-border-top-left-radius:12px;-webkit-border-top-right-radius:12px;-moz-border-radius-topleft:12px;-moz-border-radius-topright:12px;border-top-left-radius:12px;border-top-right-radius:12px;}
.videomore div a h5::before,.video_main div a div:first-child::before{content: '';display: block;width: 106px;height: 84px;background: url(../images/playbtn.png);position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%);background-size: 100% 100%;}
.videomore div a:hover h5::before,.video_main div a:hover div:first-child::before{background: url(../images/playbtn_over.png);background-size: 100% 100%;width: 78px;height: 56px}
.videomore div a h5 img{width: 100%; }
.videomore div a h3{padding: 20px 0 10px 0;font-size: 24px;color: #ffffff;line-height: 29px;font-weight: bold;}
.videomore div a small{display: block;line-height: 28px; background: #fffae7;text-align: right;margin: 0; padding-right: 15px; font-size: 13px;color: #5e5e5e;}
.videomore div a p{font-size: 16px; color: #824d09; line-height: 26px;margin-bottom: 0;padding-bottom: 15px;font-weight: 600;}
.videomore div a:hover p{color: #ae4c42;}
/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1024px) and (max-width: 1249px) {

body { background: url(../images/mainBG.gif) no-repeat center top #fff3c3; background-size: 2100px auto;}
body.in { background: url(../images/mainBG-in.gif) no-repeat center top #fae0da; background-size: 2100px auto;}

.mainCon { margin:0 0 0 2%; position:relative; width:90%; max-width: 1070px;}

/* -- 主選項 -- */
nav { position:fixed; top:10px; right:0; font-size:16px; font-weight:bold; z-index:fff; z-index: 9999999; background:url(../images/navBG.png) repeat-y right top; height: auto;}
nav img { position:absolute; top:20px; right:10px;}
nav ul { padding: 20px 0; z-index: 99999999; margin-top:60px;}
nav li { margin:0 0 10px 0; display: block; text-align: right;}
nav li a { display:block; color:#17587a; padding:10px 30px 10px 0;}
nav li a b { font-size:20px; font-weight: bold; display:block; margin-top:5px;}

/* -- 首頁 -- */
#home { width:96%; max-width: 1070px; position:relative; margin: 0 auto; height:550px;}
img.title01 { position:absolute; top: 139px; left: 25px; display:inline-block;}
img.title02 { position:absolute; top: 32px; left: 459px; display:inline-block; z-index:0;}
img.title03 { position:absolute; top: 325px; left: 599px; display:inline-block; z-index:0;}
img.mainView { position:absolute; top: 83px; left: 171px; display:inline-block; z-index:1;}

/* -- 活動 -- */
#event { background:#fff3c3; padding-bottom:50px;}
img.fontTxt { display:block; float:left; margin-top:20px; width:100%;}
img.tv {margin-top: 0;}
.indxe_new{width:45%;padding-left: 20px;}
iframe { width:100%; height:400px;}

/* -- 滑動頁籤 -- */
.abgne_tab { margin: 0; position: absolute; right:10px; top:0;}
.abgne_tab ul.tabs { width: 100%; height: 182px;}
.abgne_tab ul.tabs li { display:inline-block; width:134px; margin: 15px 0 0 5px; cursor:pointer; font-weight:bold; height:162px; background: url(../images/bookMarkBG.png) no-repeat center bottom; color:#fe8165; text-align:center; font-size:22px; line-height:26px; padding-top:40px;}

ul.list li { width:30%; display:inline-block; margin: 0 1.5% 30px 1.5%; font-size:22px; font-weight:bold; max-width:260px;}

/* -- 長高迷思 -- */
#eventhome { width:98%; position:relative; margin: 0 auto; text-align:center;}
#game { width:98%; margin: 0 auto; text-align:center;}


/* -- 成長檢測 -- */
img.title05 { position:absolute; top: 327px; left: 350px; display:inline-block; z-index:0;}
img.checkView { position:absolute; top: 100px; left: -50px; display:inline-block; z-index:1;}

.videomore{width: 96%; margin: 0 auto;}
.videomore div a h3{font-size:1.8vw;}
.videomore div{margin: 15px;}
}


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

@media screen and (min-width: 768px) and (max-width: 1023px) {
	
body { background: url(../images/mainBG.gif) no-repeat center top #fff3c3; background-size: 1500px auto;}
body.in { background: url(../images/mainBG-in.gif) no-repeat center top #fae0da; background-size: 1500px auto;}
.mainCon { margin:0 auto; position:relative; width:90%; max-width: none;}

nav { display:none;}

h4 { width:90px; height:45px; background: url(../images/menuicon.png) no-repeat center center; background-size:90px 45px; position: fixed; top:15px; right:15px; display:block; z-index:9999;}
h4:hover { display:block; width:90px; height:45px; background: url(../images/menuicon.png) no-repeat center center; background-size:90px 45px; cursor: pointer;}

#SUBMENU { width:100%; height:100%; padding:0; margin:0; position: fixed; top:0; left:0; display:none; z-index:9997; background: url(../images/videoBG.png) no-repeat center bottom rgba(184,217,223,.95); background-size: 40% auto;}
#SUBMENU ul { padding: 0; margin: 80px auto 0 auto; width:40%; text-align:center;}
#SUBMENU ul li { width:100%;}
#SUBMENU ul li a { font-size:1.25em; color: #18597a; font-weight:bold; padding: 15px 0; text-align:center; width:100%; margin: 0; border:#fff 1px dotted; text-align:center; display:block; border-radius:80px; margin-bottom:15px; background:#fff;}
#SUBMENU ul li a:hover { ; border:#fe8166 1px dotted; background:#fe8166; color:#fff;}
#SUBMENU ul li b { font-size:15px; display:block; margin: 0 0 5px 0;}
#SUBMENU ul li a:hover b { }

/* -- 首頁 -- */
#home { width:94%; max-width: 1070px; position:relative; margin: 0 auto; height:350px;}
img.title01 { position:absolute; top: 100px; left: 10%; display:inline-block; width:20%; height:auto;}
img.title02 { position:absolute; top: 32px; left: 50.1%; display:inline-block; z-index:0; width:43.1%; height:auto;}
img.title03 { position:absolute; top: 235px; left: 60.3%; display:inline-block; z-index:0; width:29%; height:auto;}
img.mainView { position:absolute; top: 83px; left: 27%; display:inline-block; z-index:1; width:35%; height:auto;}

#item01 { background: url(../images/markBG.gif) repeat-x center bottom; height:344px; position:relative; padding: 0; text-align:center;}

/* -- 活動 -- */
#event { background:#fff3c3; padding-bottom:40px;}
img.fontTxt-M { display: block; float:none; margin:20px auto 0 auto; width:90%;}
img.fontTxt { display:none;}
img.tv {  width:45%; margin:0;}
img.eventL { float:left; margin:-40px 0 0 5%; width:50%; height:auto;}
.indxe_new{width: 50%;padding-top:4%;}

iframe { width:100%; height:400px;}

/* -- 滑動頁籤 -- */
.abgne_tab { margin: -20px 0 0 0; position: absolute; right:0; top:0; text-align:center; width:100%;}
.abgne_tab ul.tabs { width: 100%; height: 182px; margin: 182px auto 0 auto; text-align:center;}
.abgne_tab ul.tabs li { display:inline-block; width:134px; margin: 15px 0 0 5px; cursor:pointer; font-weight:bold; height:162px; background: url(../images/bookMarkBG.png) no-repeat center bottom; color:#fe8165; text-align:center; font-size:22px; line-height:26px; padding-top:40px;}

ul.list { width:100%; margin: 0 auto; text-align:center;}
ul.list li { width:30%; display: inline-block; margin: 0 1% 50px 1%; font-size:18px; font-weight:bold; max-width: none; text-align: center; position:relative;}
ul.list li a img { border-radius: 20px; margin: 0 auto 20px auto; opacity:1; filter:alpha(opacity=100); display:block; width:100%; height:auto; max-width:none;}

/* -- 文章區 -- */
ul.list2 { width:100%; padding:35px 0 0 0;}
ul.list2 li { font-size:22px; font-weight:bold; vertical-align:top; line-height:28px;}
ul.list2 li a { color:#17587a; position:relative; width:47%; display:inline-block; margin: 0 1.5% 20px 1.5%; padding: 0 50px 20px 0 ; float:left; border-bottom:#fe8165 1px dotted; min-height:150px;}
ul.list2 li a b { display:block; font-size:14px; color:#666; margin-top:5px;}
ul.list2 li a:hover { color:#e85d3e;}
ul.list2 li a img.go { width:44px; height:auto; display: inline-block; position:absolute; right:0; top:0; opacity:.8; filter:alpha(opacity=80);}
ul.list2 li a:hover img.go { border-radius: 20px; opacity:1; filter:alpha(opacity=100);}

h1 { font-size:30px; font-weight:bold; color:#bd3416; text-align:center; margin: -10px auto 40px auto; padding:20px 0; border:#d64525 1px dotted; border-radius: 80px; line-height:38px;}
.photo { float:left; margin: 0 30px 30px 0;width:40%;}
.photo img { width:100%; height:auto; display:block; border-radius: 20px;}

/* -- 長高迷思 -- */
body.event1 { background: url(../images/eventBG.gif) no-repeat center top #e6e7e9; background-size: 1800px auto;}
#eventhome { width:98%; position:relative; margin: 0 auto; text-align:center;}
#game { width:98%; margin: 0 auto; text-align:center;}
img.eventView { position:absolute; top: 100px; left: 37.5%; display:inline-block; z-index:1; width:30%;}
img.title04 { position:absolute; top: 90px; left: 17.5%; display:inline-block; width:75%;}
#eventFontxt { margin: 0 auto; font-size:18px; color:#407b9b; padding-top:620px; line-height:30px; font-weight:bold; width:96%;}


/* -- 成長檢測 -- */
body.check { background: url(../images/checkBG.gif) no-repeat center top #abd6d3; background-size: 1800px auto;}
img.slogo { margin: 40px 0 0 60px; display:block; float:left; width:200px; height:auto;}
img.title05 { position:absolute; top: 200px; left: 40%; display:inline-block; z-index:0; width:55%; height:auto;}
img.checkView { position:absolute; top: 100px; left: -30px; display:inline-block; z-index:1; width:50%; height:auto;}
#checkFontxt { margin: 0 auto; font-size:20px; color:#676c7f; padding-top:500px; line-height:32px; font-weight:bold;}
#checkform { position:relative; margin:0 auto; width:90%; background:url(../images/checkForm4.gif) repeat-y center bottom; background-size:100% auto;}
#checkform img.form1 { width:100%; height: auto;}
#checkform>ul { width: 75%; margin: 0 auto; border-top: #009ba0 2px dotted; z-index:999;}
#checkform>ul>li { color:#444; font-size:32px; padding: 20px 0; border-bottom:#666 1px dotted;}
#checkform>ul>li:last-child { border-bottom: #009ba0 2px dotted;}

img.checkTitle { width:322px; margin: 0 auto; display:block;}

#qaContent { width:100%; margin:0 auto;}
#qaContent ul { width: 75%; margin: 0 auto; border-top: #009ba0 2px dotted; z-index:999; padding-bottom:150px;}
#qaContent ul li:last-child { border-bottom: #009ba0 2px dotted;}
#qaContent ul li .qa_title { color:#444; font-size:32px; padding: 20px 0 20px 40px; border-bottom:#666 1px dotted; cursor:pointer; background:url(../images/checkbox.gif) no-repeat left center;}
#qaContent ul li .qa_title:hover { background: url(../images/checkbox2.gif) no-repeat left center;}
#qaContent ul li .qa_title b { color:#ff5a35; font-size:36px; font-weight:bold;}
#qaContent ul li .qa_title_on { text-decoration: none; background: url(../images/checkbox2.gif) no-repeat left center;}
#qaContent ul li .qa_content { background:url(../images/checkIcon.gif) no-repeat left top; width:100%; color: #484848; font-size:18px; line-height:28px; text-align:justify; padding: 0 0 0 75px; margin: 20px 0;}
#qaContent ul li .qa_content img { display: block; margin: 0 0 20px 0; float:none;}
#qaContent ul li .qa_content b { display:block; margin:15px 0 0 0; width:100%; font-size:24px; color:#009ba0; border: #ff5a35 1px solid; padding: 20px 40px; font-weight:bold;}
/* -- video-- */
.videomore{width: 96%; margin: 0 auto;}
.videomore div{margin: 15px;}
.videomore div a h5::before, .video_main div a div:first-child::before{width:30%;background-size: 100% auto;background-repeat: no-repeat; background-position: center;}
.videomore div a p{font-size: 1.5vw; line-height: 2.3vw;}
.videomore div a h3{font-size:2.5vw;}
.video_main{flex-direction: column;}
.video_main > div{width: 85%;}
.video_main > div:first-child{margin-bottom: 80px;}
}

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

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

body { background: url(../images/mainBG-M.gif) no-repeat center top #fff3c3; background-size: 100% auto;}
body.in { background: url(../images/mainBG-in-M.gif) no-repeat center top #fae0da; background-size: 100% auto;}
.mainCon { margin:0 auto; position:relative; width:96%; max-width: none;text-align: center;}

nav { display:none;}

h4 { width:90px; height:45px; background: url(../images/menuicon.png) no-repeat center center; background-size:90px 45px; position: fixed; top:20px; right:15px; display:block; z-index:9999;}
h4:hover { display:block; width:90px; height:45px; background: url(../images/menuicon.png) no-repeat center center; background-size:90px 45px; cursor: pointer;}

#SUBMENU { width:100%; height:100%; padding:0; margin:0; position: fixed; top:0; left:0; display:none; z-index:9997; background: url(../images/videoBG.png) no-repeat center bottom rgba(184,217,223,.95); background-size: 90% auto;}
#SUBMENU ul { padding: 0; margin: 80px auto 0 auto; width:70%; text-align:center;}
#SUBMENU ul li { width:100%;}
#SUBMENU ul li a { font-size:1.25em; color: #18597a; font-weight:bold; padding: 15px 0; text-align:center; width:100%; margin: 0; border:#fff 1px dotted; text-align:center; display:block; border-radius:80px; margin-bottom:15px; background:#fff;}
#SUBMENU ul li a:hover { ; border:#fe8166 1px dotted; background:#fe8166; color:#fff;}
#SUBMENU ul li b { font-size:15px; display:block; margin: 0 0 5px 0;}
#SUBMENU ul li a:hover b { }

/* -- 首頁 -- */
#home { width:94%; max-width: 1070px; position:relative; margin: 0 auto; height:130vw;}
img.title01 { position:absolute; top: 75px; left: 10%; display:inline-block; width:30%; height:auto;}
img.title02 { position:absolute; top: 60px; left: 40%; display:inline-block; z-index:0; width:55%; height:auto;}
img.title03 { position:absolute; top: 175px; left: 50%; display:inline-block; z-index:0; width:40%; height:auto;}
img.mainView { position:absolute; top: 190px; left: 10%; display:inline-block; z-index:1; width:75%; height:auto;}

#item01 { background: url(../images/markBG.gif) repeat-x center bottom; height:270px; position:relative; padding: 0; text-align:center;}
#item01 img { width:90%; height:auto;}

/* -- 活動 -- */
#event { background:#fff3c3; padding-bottom:50px;}
img.fontTxt { display: block; float:none; margin:0 auto 0 auto; width:80%;}
img.fontTxt-M { display:none;}
img.tv { display: inline-block; float: none; width:80%; height:auto; margin:0 auto; tac}
img.eventL { float:none; margin: -60px auto 0 auto; width:90%; height:auto; display:block;}
img.eventR { float:none; margin: -30px auto 0 auto; width:90%; height:auto; display:block;}
.indxe_new{width:100%;}
iframe { width:100%; height:auto;}

/* -- 滑動頁籤 -- */
.abgne_tab { margin: -20px 0 0 0; position: absolute; right:0; top:0; text-align:center; width:100%;}
.abgne_tab ul.tabs { width: 100%; height: 97px; margin: 182px auto 0 auto; text-align:center;}
.abgne_tab ul.tabs li { display:inline-block; width:80px; margin: 15px 0 0 0; cursor:pointer; font-weight:bold; height:97px; background: url(../images/bookMarkBG.png) no-repeat center bottom; color:#fe8165; text-align:center; font-size:15px; line-height:18px; padding-top:20px;}

.abgne_tab { margin: -20px 0 0 0; position: absolute; right:0; top:0; text-align:center; width:100%;}
.abgne_tab ul.tabs { width: 100%; height: 97px; margin: 170px auto 0 auto; text-align:center;}
.abgne_tab ul.tabs li { display:inline-block; width:80px; margin: 15px 0 0 0; cursor:pointer; font-weight:bold; height:97px; background: url(../images/bookMarkBG.png) no-repeat center bottom; background-size:80px auto; color:#fe8165; text-align:center; font-size:15px; line-height:18px; padding-top:20px;}
.abgne_tab ul.tabs li.active { background: url(../images/bookMarkBG.png) no-repeat center top; color:#fff; background-size:80px auto;}
.abgne_tab ul.tabs li a:hover { color:#fe8165;}
.abgne_tab ul.tabs li a { color:#fe8165;}

ul.list { width:100%; margin: 0 auto; text-align:center;}
ul.list li { width:100%; display: block; margin: 0 0 50px 0; font-size:18px; font-weight:bold; max-width: none; text-align: center; position:relative;}
ul.list li a img { border-radius: 20px; margin: 0 auto 20px auto; opacity:1; filter:alpha(opacity=100); display:block; width:80%; height:auto; max-width:none;}

/* -- 文章區 -- */
ul.list2 { width:94%; padding:35px 0 0 0; margin: 0 auto;}
ul.list2 li { font-size:22px; font-weight:bold; vertical-align:top; line-height:28px;}
ul.list2 li a { color:#17587a; position:relative; width:100%; display:inline-block; margin: 0 1.5% 20px 1.5%; padding: 0 0 20px 0 ; float:none; border-bottom:#fe8165 1px dotted; min-height:120px;}
ul.list2 li a img.go { width:44px; height:auto; display: inline-block; position:absolute; right:0; top:0; opacity:1; filter:alpha(opacity=100);}
ul.list2 li a:hover img.go { border-radius: 20px; opacity:1; filter:alpha(opacity=100);}

h1 { font-size:24px; font-weight:bold; color:#bd3416; text-align:center; margin: -10px auto 20px auto; padding:20px 10px; border:#d64525 1px dotted; border-radius: 80px; line-height:30px;}

#content { font-size:16px; line-height:30px; color:#333; text-align:justify; width:96%; margin: 0 auto; padding-bottom:40px;}
#editor { padding: 20px 0; text-align:left; font-size: 14px; color:#996633; font-weight:bold; width:96%; margin: 0 auto;}

.photo { float:none; margin: 0 0 30px 0;width:100%; clear:both;}
.photo img { width:100%; height:auto; display:block; border-radius: 20px;}

/* -- Footer -- */
footer { width:100%; color:#606060; padding: 25px 30px 45px 30px; background:#89c972; text-align:center; font-weight:bold; line-height:24px; }
footer b { font-size:11px; color:#fff; display:block; line-height:18px; font-weight:normal;}
footer img { display: block; margin: 0 auto 10px auto; vertical-align:middle; width:90%; height:auto;}
a.where { display:block; margin: 24px auto; width: 90%; background:#fe8165; color:#fff; font-weight:bold; border-radius:100px; font-size:22px; padding: 20px 0;}
a.where:hover { background:#e85d3e;}

/* -- 長高迷思 -- */
body.event1 { background: url(../images/eventBG.gif) no-repeat center top #e6e7e9; background-size: 1200px auto;}
img.eventView { position:absolute; top: 100px; left: 37.5%; display:inline-block; z-index:1; width:30%;}
img.title04 { position:absolute; top: 70px; left: 10%; display:inline-block; width:80%;}
#eventhome { width:98%; position:relative; margin: 0 auto; text-align:center;}
#eventFontxt { margin: 0 auto; font-size:15px; color:#407b9b; padding-top:380px; line-height:22px; font-weight:bold; width:92%;}
#eventFontxt .space { font-size:18px; display: inline-block; margin: 10px;}

#game { width:98%; margin: 0 auto; text-align:center;}
img.Qtitle { display:block; width:auto; margin: 10px auto; width:90%; height:auto;}
.Qno { font-family: GOTHIC; color:#009ba0; font-size:16px; font-weight:bold; display:block;}
.Qno b { font-size:30px;}
.Qtxt { color:#d7696c; font-size:30px; font-weight:bold; display:block; margin:20px auto 40px 0;}
img.Aerror { padding-right:5%; border-right: #d7696c 2px dotted; margin-right:0; width:140px;}
img.Acorrect { margin-left:5%; width:120px;}
input[type="submit"] { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 50px auto; font-size:20px; font-weight:bold; padding: 15px 0; width:90%; border:none; font-family:"微軟正黑體"; text-align:center; display:block; outline:0px; -webkit-appearance:none;}
input[type="button"] { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 50px auto; font-size:20px; font-weight:bold; padding: 15px 0; width:90%; border:none; font-family:"微軟正黑體"; text-align:center; display:block; outline:0px; -webkit-appearance:none;}
.Qinfo { color:#d7696c; font-size:20px; font-weight:bold; display:block; line-height:30px;}
.total { color:#d7696c; font-size:60px; font-weight:bold;}
.total b { font-size:90px; font-family:GOTHIC;}

ul.datalist li { margin: 0 auto 20px auto; font-size:20px; font-weight:bold; color:#009ba0; width:90%;}
.warning { color:#000; line-height:24px; display:block; width:90%; text-align:left; margin: 0 auto;}
.warning b { font-size:20px; font-weight:bold; color:#009ba0; display:block; margin-bottom:10px;}

.totalSub { display:block; height:74px; text-align:center; background:url(../images/event-titleBG.gif) repeat-x center bottom; margin: 20px auto 0 auto; width:80%;}
.scoreTxt { font-size:16px; font-weight:bold; color:#333; line-height:24px; text-align:left; display:block; margin: 20px auto 100px auto; width:80%;}

a.morelink { border-radius:50px; background:#d7696c; color:#fff; margin: 50px auto 150px auto; font-size:18px; font-weight:bold; padding: 15px 0; width:100%; border:none; font-family:"微軟正黑體"; text-align:center; display:block;}

b.note { font-size:14px; font-weight:bold; color:#fff; display:block; margin: 0 0 20px 0;}

.Quota { display:block; font-size:20px; font-weight:bold; color:#FF0000;}
ol.note li { width:90%; font-size:12px; font-weight:normal; text-align:justify; line-height:18px; color:#fff; margin: 0 auto;}

ul.gift { text-align:left; vertical-align:middle; width:80%; margin: 0 auto;}
ul.gift li { width:100%; margin: 0 0 25px 0; display:block; color:#f5efe5; font-size:15px; vertical-align: middle; font-weight:bold; clear:both; text-align:center;}
ul.gift li img { width:20%; height:auto; float:none; display:block;}
ul.gift li b { font-size:24px; font-weight:bold; color:#fff; display:block; margin-bottom:5px;}

a.giftlist { border-radius:50px; background:#d7696c; color:#fff; margin: 0 0 0 10px; font-size:16px; font-weight:bold; padding: 5px 20px; width:auto; border:none; font-family:"微軟正黑體"; text-align:center; display: inline-block;}
.listitem { font-size:15px; font-weight:bold; color:#fff; display:block; margin: 0 auto 15px auto; text-align:center; padding: 5px; border-radius:30px; background:#fe8165; width:100%;}
ul.name { text-align:center; margin-bottom:10px;}
ul.name li { font-size:16px; display:block; margin-bottom:5px; width:50%; display:inline-block; color:#f5efe5; letter-spacing:1px;}
ul.name li b { font-size:24px; color:#fff; display:block; margin-bottom:5px; font-weight:bold;}


/* -- 成長檢測 -- */
body.check { background: url(../images/checkBG.gif) no-repeat center top #abd6d3; background-size: 1300px auto;}
img.slogo { margin: 30px 0 0 20px; display:block; float:left; width:150px; height:auto;}
img.title05 { position:absolute; top: 330px; left: 10%; display:inline-block; z-index:0; width:80%; height:auto;}
img.checkView { position:absolute; top: 80px; left: 0; display:inline-block; z-index:1; width:auto; height:320px;}
#checkFontxt { margin: 0 auto; font-size:18px; color:#676c7f; padding-top:540px; line-height:28px; font-weight:bold; width:80%;}
#checkform { position:relative; margin:0 auto; width:98%; background:url(../images/checkForm4.gif) repeat-y center bottom; background-size:100% auto;}
#checkform img.form1 { width:100%; height: auto;}
#checkform>ul { width: 75%; margin: 0 auto; border-top: #009ba0 2px dotted; z-index:999;}
#checkform>ul>li { color:#444; font-size:32px; padding: 20px 0; border-bottom:#666 1px dotted;}
#checkform>ul>li:last-child { border-bottom: #009ba0 2px dotted;}
a.morearticle { border-radius:50px; background:#d7696c; color:#fff; margin: 20px auto 20px auto; font-size:18px; font-weight:bold; padding: 15px 0; width:200px; border:none; font-family:"微軟正黑體"; text-align:center; display:block;}
img.checkTitle { width:200px; margin: 0 auto; display:block;}

#qaContent { width:100%; margin:0 auto;}
#qaContent ul { width: 75%; margin: 0 auto; border-top: #009ba0 2px dotted; z-index:999; padding-bottom:50px;}
#qaContent ul li:last-child { border-bottom: #009ba0 2px dotted;}
#qaContent ul li .qa_title { color:#444; font-size:20px; padding: 15px 0 15px 25px; border-bottom:#666 1px dotted; cursor:pointer; background:url(../images/checkbox.gif) no-repeat left 15px; background-size: 20px auto;}
#qaContent ul li .qa_title:hover { background: url(../images/checkbox2.gif) no-repeat left 15px; background-size: 20px auto;}
#qaContent ul li .qa_title b { color:#ff5a35; font-size:20px; font-weight:bold;}
#qaContent ul li .qa_title_on { text-decoration: none; background: url(../images/checkbox2.gif) no-repeat left center;}
#qaContent ul li .qa_content { background:url(../images/checkIcon.gif) no-repeat left top; width:100%; color: #484848; font-size:16px; line-height:26px; text-align:justify; padding: 65px 0 0 0; margin: 10px 0 20px 0;}
#qaContent ul li .qa_content img { display: block; margin: 0 0 20px 0; float:none; width:100%; height:auto;}
#qaContent ul li .qa_content b { display:block; margin:15px 0 0 0; width:100%; font-size:24px; color:#009ba0; border: #ff5a35 1px solid; padding: 20px 40px; font-weight:bold;}
/* -- video-- */
.video_ttpic{max-width: 90%;}
.video_main{ flex-direction: column; }
.video_main > div{width:90%;margin: 0 auto;} 
.video_main > div:first-child{margin-bottom: 60px;}
.videomore{width:100%; flex-direction: column;}
.videomore div{margin: 15px 30px;}
.video_main div a{flex-direction: column;}
.video_main div a div:last-child{width: 100%;padding-bottom: 25px;}
.video_main div a div:first-child{width: 100%;margin:-20px 0 15px 0;}
.video_main div a div:first-child img{width: 90%;margin: 0 auto;}
.videomore div a p{font-size:4vw; line-height: 5.5vw;}
.videomore div a h3{font-size:5.7vw; line-height: 7vw;}
}