@charset "utf-8";


/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
body{ font-family:Verdana, Arial; font-size:15px; background-color:#5d5d5d;}

/*topLink*/
#overview{width:100%;background:url(/images/top_bg.jpg) left top repeat-x;height: 24px;}
#topLink{width:950px;margin:0 auto;}
/*topLine*/
#topLine{width:100%;background:url(images/topLine.png) center top repeat-x;margin:0 auto;height: 3px;}

/*wrapper*/
#wrapper,#wrapper2{width:100%; margin:0 auto;}
#wrapper{background:url(images/bg.png) center top repeat-y; background-color:#0c356a;}
#wrapper2{background:url(images/bg2.png) left top repeat-x; background-color:#385171;}

/*header*/
#header,#header2{width:950px; margin:0 auto;}
#header{height:235px;}
#header2{height:173px;}

/*main*/
#main{width:950px; height:368px; margin:0 auto; background:url(images/main.jpg) center top no-repeat; position:relative;}
#main .getstart{position:absolute;display:block;width:284px;height:166px;left:628px;top:170px;background:url(images/getstart.png) center top no-repeat;}
#main a.btn{position:absolute;display:block;width:284px;height:87px;left:628px;top:170px;background:url(images/getstart.png) center top no-repeat;}
#main a.btn:link{}
#main a.btn:hover{box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);filter:alpha(opacity=80);}

.border{position:absolute;width:570px;height:150px;left:35px;top:100px;}
/*menu*/
#menu{width:950px; height:60px; margin:0 auto; background:url(images/menu.png) center top no-repeat;position:relative;}
#menu ul{ margin:0 75px; height:60px;}
#menu ul li{ float:left; display:inline; height:60px;}
#menu ul li a{ display:block; width:200px; height:60px; cursor:pointer;}
/*
#menu ul li a.M1:link{ display:block; width:200px; height:60px; cursor:pointer;}
#menu ul li a.M1:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -75px -60px no-repeat ;cursor:pointer;}
#menu ul li a.M2:link{ display:block; width:200px; height:60px; cursor:pointer;}
#menu ul li a.M2:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -275px -60px no-repeat ;cursor:pointer;}
#menu ul li a.M3:link{ display:block; width:200px; height:60px; cursor:pointer;}
#menu ul li a.M3:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -475px -60px no-repeat ;cursor:pointer;}
#menu ul li a.M4:link{ display:block; width:200px; height:60px; cursor:pointer;}
#menu ul li a.M4:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -675px -60px no-repeat ;cursor:pointer;}
*/


.M1 a:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -75px -60px no-repeat ;cursor:pointer;}
.M2 a:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -275px -60px no-repeat ;cursor:pointer;}
.M3 a:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -475px -60px no-repeat ;cursor:pointer;}
.M4 a:hover{ display:block; width:200px; height:60px; background:url(images/menu.png) -675px -60px no-repeat ;cursor:pointer;}

.M1_on { display:block; width:200px; height:60px; background:url(images/menu.png) -75px -60px no-repeat ;cursor:pointer;}
.M2_on { display:block; width:200px; height:60px; background:url(images/menu.png) -275px -60px no-repeat ;cursor:pointer;}
.M3_on { display:block; width:200px; height:60px; background:url(images/menu.png) -475px -60px no-repeat ;cursor:pointer;}
.M4_on { display:block; width:200px; height:60px; background:url(images/menu.png) -675px -60px no-repeat ;cursor:pointer;}

/*page*/
#page{width:950px; margin:0 auto; background:url(images/page.png) center top no-repeat; background-color:#09274e; padding:20px 0 10px;}
#page h1{height:37px; display:block;}
#page h1.title01,#page h1.title02,#page h1.title03,#page h1.title04{margin-left:84px;}
#page h1.title01{ background:url(images/title.png) 0 0 no-repeat;}
#page h1.title02{ background:url(images/title.png) 0 -37px no-repeat;}
#page h1.title03{ background:url(images/title.png) 0 -74px no-repeat;}
#page h1.title04{ background:url(images/title.png) 0 -111px no-repeat;}

#page div.dcrip{text-align:left; width:878px; height:165px; margin:0 0 0 36px; position:relative;}
#page .dcrip_01{ background:url(images/dcrip.png) 0 0 no-repeat;}
#page .dcrip_02{ background:url(images/dcrip.png) 0 -165px no-repeat;}
#page .dcrip_03{ background:url(images/dcrip.png) 0 -330px no-repeat;}
#page a.startBTN{ position:absolute; left:655px; top:88px; width:196px; height:49px; display:block; background:url(images/btn.png) 0 0 no-repeat;}
#page a.startBTN:link{ position:absolute; left:655px; top:88px; width:196px; height:49px; display:block; background:url(images/btn.png) 0 0 no-repeat;}
#page a.startBTN:hover{ position:absolute; left:655px; top:88px; width:196px; height:49px; display:block; background:url(images/btn.png) 0 0 no-repeat;box-shadow:0px 0px 4px rgba(100%,100%,50%,0.8);filter:alpha(opacity=80);}
#page a.repeatBTN{float:right; left:548px; top:88px; width:119px; height:49px; display:block; background:url(images/btn.png) 0 -49px no-repeat;}
#page a.repeatBTN:link{float:right;left:743px;top:0px;width:119px;height:37px;display:block;background:url(images/btn.png) 0 -49px no-repeat;}
#page a.repeatBTN:hover{float:right;left:743px;top:0px;width:119px;height:37px;display:block;background:url(images/btn.png) 0 -49px no-repeat;box-shadow:0px 0px 4px rgba(50%,100%,50%,0.8);	filter:alpha(opacity=80);}
#page a.reportBTN{ position:absolute; left:697px; top:88px; width:154px; height:49px; display:block; background:url(images/btn.png) 0 -98px no-repeat;}
#page a.reportBTN:link{ position:absolute; left:697px; top:88px; width:154px; height:49px; display:block; background:url(images/btn.png) 0 -98px no-repeat;}
#page a.reportBTN:hover{ position:absolute; left:697px; top:88px; width:154px; height:49px; display:block; background:url(images/btn.png) 0 -98px no-repeat;box-shadow:0px 0px 4px rgba(100%,50%,50%,0.8);filter:alpha(opacity=80);}

#page h1.titleR01,#page h1.titleR02,#page h1.titleR03,#page h1.titleR04,#page h1.titleR05,#page h1.titleR06,#page h1.titleR07,#page h1.titleR08,#page h1.titleR09{margin:0 44px 0 44px;font:small-caps bold 37px/95% "Times New Roman", Times, serif;}/*1222*/
#page h1.titleR01{ background:url(images/titleReport.png) 0 0 no-repeat; position:relative;}
#page h1.titleR02{ background:url(images/titleReport.png) 0 -37px no-repeat; position:relative;}
#page h1.titleR03{ background:url(images/titleReport.png) 0 -74px no-repeat; position:relative;}
#page h1.titleR04{ background:url(images/titleReport.png) 0 -111px no-repeat; position:relative;}
#page h1.titleR05{ background:url(images/titleReport.png) 0 -148px no-repeat; margin-top:16px;}
#page h1.titleR06{ background:url(images/titleReport.png) 0 -185px no-repeat; margin-top:16px;}
#page h1.titleR07{ background:url(images/titleReport.png) 0 -222px no-repeat; margin-top:16px;}
#page h1.titleR08{ background:url(images/titleReport.png) 0 -259px no-repeat; margin-top:16px;}
#page h1.titleR09{ background:url(images/titleReport.png) 0 -296px no-repeat; margin-top:16px;}

#page h1 ul{font-size:13px;color:#fff;float:right;font-weight:normal;margin-right:20px; margin-top:20px;margin-top:20px\9;*margin-top:-15px;_margin-top:-15px;}
#page h1 ul li{float:left; display:inline;}
#page h1 ul li a{float:left; display:block; text-align:right; height:12px; line-height:12px;}
#page h1 ul li a.testee{display:block;padding-left:14px; background:url(images/testicon.png) 0 0 no-repeat; margin-right:10px;}
#page h1 ul li a.lasttest{display:block;padding-left:14px;background:url(images/testicon.png) 0 -12px no-repeat;}
#page h1 ul li a.testTime{display:block;}

#page strong.percent{ color:#FFF;}
#page strong.marginLeft140{margin-left:140px;}
#page strong.marginLeft115{margin-left:115px;}
#page strong.marginLeft295{margin-left:295px;}
#page strong.marginLeft220{margin-left:220px;}
#page strong.marginLeft320{margin-left:320px;}

#page strong.percent em{font-size:20px; margin:0 8px;}
#page div.report{text-align:left; width:878px;margin:0 0 0 36px;}
#page .reportTop{ background:url(images/reportBG_top.png) 0 0 no-repeat; width:100%; height:20px;}
#page .reportCenter{ background:url(images/reportBG_center.png) 0 0 repeat-y; width:100%; padding-top:45px;}

#page .Xaxis{ width:90%; height:26px; color:#fff; margin:0 auto 20px;}

#page .Xaxis a.heigh,#page .Xaxis a.low{width:3%;display:block; font:small-caps bold 22px/90% "微軟正黑體";}

#page .Xaxis div.ex{float:left;width:750px;height:21px;position:relative; margin-left:-14px; background:url(images/exBG.png) 22.5px bottom no-repeat;}
#page .Xaxis .smile{width:45px; height:53px;position:absolute; top:-48px; background:url(images/smile.png) left top no-repeat;}
#page .reportCenter p{margin:0 30px 0 36px; color:white; line-height:26px; padding:4px 0 10px 0;}
#page .reportBottom{background:url(images/reportBG_bottom.png) 0 0 no-repeat; width:100%; height:20px;}

/*testQ*/
/*
#testQ{width:850px;margin:0px auto;padding:20px 0 0 12px;line-height:30px;}
#testQ ol{margin-left:24px; color:white}
#testQ ol li{ list-style:decimal; text-align:left; margin-bottom:15px;}
#testQ ol li h2.question{color:white; }
#testQ ol li a{color:#cbe2ff;margin-right:20px; font-weight:bold;}
#testQ ol li a label{ vertical-align:middle;}
#testQ ol li a input{ vertical-align:middle; margin-right:5px;}
#testQ ol li a.current{color:#23497a;margin-right:20px; font-weight:bold;}*/
#testQ{width:850px;margin:0px auto;padding:20px 0 0 12px;line-height:30px; padding-left:24px;}
#testQ li{text-align:left; margin-bottom:15px; color:white;}
#testQ li h2.question{color:white;font-weight:bold;}
#testQ li a{color:#cbe2ff;margin-right:20px; }
#testQ li a label{ vertical-align:middle;}
#testQ li a input{ vertical-align:middle; margin-right:5px;}
#testQ li a.current{color:#23497a;margin-right:20px; font-weight:bold;}
#testQ li.selected h2.question{ color:#6d85a4;}
#testQ li.selected a label{color:#3d5676;}
#testQ li.selected a label input{-webkit-opacity:0.7;-moz-opacity:0.7;opacity:0.7;filter:alpha(opacity=70);}
/*detail Report*/
#detailR{width:850px;margin:0px auto;line-height:30px;padding: 15px 20px;}
#detailR .analysis{background-color:#071d3a;border:1px solid #069;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;color: #e4e4e4;}
#detailR tr.BGcolor{background-color:#021732;}
#detailR th,#detailR td{text-align:center;}
#detailR th{border-bottom:3px double #153259; background-color:#20426f; font-weight:bold;}
#detailR td{border-bottom:1px double #153259;}
#detailR .width01,#detailR .width02,#detailR .width03,#detailR .width04{width:10%; text-align:center;}
#detailR .width05{width:60%;text-align:left;}
#detailR .textCenter{ text-align:center;}
#detailR .figure{width:850px;margin:0px auto;padding-top:30px;}
/*#detailR ol{margin-left:24px; color:white}
#detailR ol li{ list-style:decimal; text-align:left; margin-bottom:15px;}
#detailR ol li h2{color:white; font-weight:bold;}
#detailR ol li p{color:#fce1f8;}
*/
#totalR{width:850px;margin:0px auto;line-height:30px;}
#totalR ol{margin-left:46px; color:white}
#totalR ol li{ list-style:decimal; text-align:left;}
#totalR ol li h2{color:#fce1f8; font-weight:bold;}
#totalR ol li p{color:white;}

/*progressBar*/
#hrStyle{margin:20px auto; width:850px; color:#224e86;}
#progressBar{width:684px; height:33px; margin:0 auto 20px; display:block;}
#progressBar ul{}
#progressBar ul li{ float:left; display:inline;}
#progressBar ul li.title{width:186px; height:33px; background:url(images/titleOther.png) 0 0 no-repeat;}   
#progressBar ul li.bar{width:400px; height:30px; border:1px solid #99b4d7; border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px; margin-right:10px;}
#progressBar ul li.bar a{height:30px; display:block; background:url(images/progressBG.jpg) left top repeat-x;}

#progressBar ul li a.resultBTN{display:block; width:79px; height:32px; background:url(images/btn.png) 0 -147px no-repeat; cursor:pointer;}
#progressBar ul li a.resultBTN:link{display:block; width:79px; height:32px; cursor:pointer;}
#progressBar ul li a.resultBTN:hover{display:block; width:79px; height:32px;box-shadow:0px 0px 3px rgba(100%,100%,100%,0.8);filter:alpha(opacity=80); cursor:pointer;}

#progressBar ul li a.nextBTN{display:block; width:79px; height:32px; background:url(images/btn.png) 0 -179px no-repeat; cursor:pointer;}
#progressBar ul li a.nextBTN:link{display:block; width:79px; height:32px; cursor:pointer;}
#progressBar ul li a.nextBTN:hover{display:block; width:79px; height:32px;box-shadow:0px 0px 3px rgba(100%,100%,100%,0.8);filter:alpha(opacity=80); cursor:pointer;}

/*otherLink*/
#otherLink{width:850px;height:32px;	margin:0 auto 20px;display:block;}
#otherLink ul{}
#otherLink ul li{float:left;display:inline;margin-right: 5px;}
#otherLink ul li.title,#otherLink ul li.title2,#otherLink ul li.title5{width:90px;height:32px;}
#otherLink ul li.title{ background:url(images/titleOther.png) 0 -33px no-repeat;}   
#otherLink ul li.title2{ background:url(images/titleOther.png) 0 -66px no-repeat;}   
#otherLink ul li.title3{ width:186px; height:33px; margin-top:0px;margin-right:5px;background:url(images/titleOther.png) 0 -99px no-repeat;}
/*#otherLink ul li.title4{ width:128px; height:33px; margin-top:7px;margin-right:5px;background:url(images/titleOther.png) 0 -132px no-repeat;} */
#otherLink ul li.title4{ width:190px; height:33px; margin-right:5px; background:url(images/titleOther.png) 0 -226px no-repeat; } 
#otherLink ul li.title5{ background:url(images/titleOther.png) 0 -165px no-repeat;}   
#otherLink ul li.title6{ width:160px; height:33px; margin-top:16px; margin-right:5px; background:url(images/titleOther.png) 0 -195px no-repeat; } 

#otherLink ul li a.imgBTN { margin-left:4px; }
#otherLink ul li a.imgBTN img { border:none; }

#otherLink ul li a.step1BTN{display:block; 123px;height:32px; background:url(images/btn.png) 0 -211px no-repeat; cursor:pointer;}
#otherLink ul li a.step1BTN:link{display:block;width:123px;height:32px;cursor:pointer;}
#otherLink ul li a.step1BTN:hover{display:block;width:123px;height:32px;box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);	filter:alpha(opacity=80);cursor:pointer;}

#otherLink ul li a.step2BTN{display:block; width:144px;height:32px; background:url(images/btn.png) 0 -309px no-repeat; cursor:pointer;}
#otherLink ul li a.step2BTN:link{display:block;width:144px;height:32px;cursor:pointer;}
#otherLink ul li a.step2BTN:hover{display:block;width:144px;height:32px;box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);	filter:alpha(opacity=80);cursor:pointer;}

#otherLink ul li a.step3BTN{display:block; width:162px;height:32px; background:url(images/btn.png) 0 -260px no-repeat; cursor:pointer;}
#otherLink ul li a.step3BTN:link{display:block;width:162px;height:32px;cursor:pointer;}
#otherLink ul li a.step3BTN:hover{display:block;width:162px;height:32px;box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);	filter:alpha(opacity=80);cursor:pointer;}

#otherLink ul li a.step4BTN{display:block; width:123px; height:32px; background:url(images/btn.png) 0 -211px no-repeat; cursor:pointer;}
#otherLink ul li a.step4BTN:link{display:block; width:123px; height:32px; cursor:pointer;}
#otherLink ul li a.step4BTN:hover{display:block; width:123px; height:32px; box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);filter:alpha(opacity=80); cursor:pointer;}

#otherLink ul li a.eduBTN{display:block;width:79px;height:32px;	background:url(images/btn.png) 0 -358px no-repeat;cursor:pointer;}
#otherLink ul li a.eduBTN:link{display:block; width:79px; height:32px; cursor:pointer;}
#otherLink ul li a.eduBTN:hover{display:block; width:79px; height:32px;box-shadow:0px 0px 3px rgba(100%,100%,100%,0.8);filter:alpha(opacity=80); cursor:pointer;}

#otherLink ul li a.hrBTN{display:block;width:176px;height:32px;background:url(images/btn.png) 0 -390px no-repeat;cursor:pointer;}
#otherLink ul li a.hrBTN:link{display:block; width:176px; height:32px; cursor:pointer;}
#otherLink ul li a.hrBTN:hover{display:block; width:176px; height:32px;box-shadow:0px 0px 3px rgba(100%,100%,100%,0.8);filter:alpha(opacity=80); cursor:pointer;}

/*#otherLink ul li a.cstarBTN{display:block; width:196px; height:49px; background:url(images/btn.png) 0 -422px no-repeat; cursor:pointer;}*/
#otherLink ul li a.cstarBTN{display:block; width:157px; height:33px; background:url(images/cstarBtn.png) no-repeat; cursor:pointer;}
#otherLink ul li a.cstarBTN:link{display:block; width:157px; height:33px; cursor:pointer;}
#otherLink ul li a.cstarBTN:hover{display:block; width:157px; height:33px; box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);filter:alpha(opacity=80); cursor:pointer;}

/*#otherLink ul li a.searchBTN{display:block; width:168px; height:49px; background:url(images/btn.png) 0 -471px no-repeat; cursor:pointer;}*/
#otherLink ul li a.searchBTN{display:block; margin-top:2px; width:134px; height:33px; background:url(images/searchBtn.png) no-repeat; cursor:pointer;}
#otherLink ul li a.searchBTN:link{display:block; margin-top:2px; width:134px; height:33px; cursor:pointer;}
#otherLink ul li a.searchBTN:hover{display:block; margin-top:2px; width:134px; height:33px; box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);filter:alpha(opacity=80); cursor:pointer;}

#otherLink ul li a.transBTN{display:block; margin-top:2px; width:134px; height:33px; background:url(images/transBtn.png) no-repeat; cursor:pointer;}
#otherLink ul li a.transBTN:link{display:block; margin-top:2px; width:134px; height:33px; cursor:pointer;}
#otherLink ul li a.transBTN:hover{display:block; margin-top:2px; width:134px; height:33px; box-shadow:0px 0px 6px rgba(100%,100%,50%,0.8);filter:alpha(opacity=80); cursor:pointer;}


/*footer*/
#footer{background:url(images/footer.png) center top repeat-x; width:100%;height:60px;}
#footer p{font-size:12px; color:#729ac5; height:60px; line-height:60px;text-align:center; margin:0 auto; width:950px;}

.floatL{float:left;}
.floatR{float: right;}
.red{ color:#c00;}

#satisfaction{height:28px; background:url(images/cs.png) no-repeat center top; position:absolute; left:734px; top:-28px; float:right;}
#satisfaction ul{height:21px;width:90px; margin:0;}
#satisfaction ul li{float:left; display:inline; margin-left:3px; height:21px;}
#satisfaction ul li a{display:block; width:90px; height:21px;}

#social{height:28px; position:absolute; left:834px; top:-28px; float:right;}
#social ul{height:21px;width:111px; margin:0;}
#social ul li{float:left; display:inline; margin-left:3px; height:21px;}
#social ul li a{display:block; width:21px; height:21px; background:url(images/shareBTN.png) no-repeat }
#social ul li a.twitter{}
#social ul li a.fb{background-position: -22px top; }
#social ul li a.google{width:34px; margin:1px 2px; background:none; }