@charset utf-8;
/* ===== clearfix ===== */
* html .mainbox-hd, * html .mainbox-hd ul, * html .login-port, * html .accordion dl, * html .accordion dfn{height:1%; overflow:visible;}
*+html .mainbox-hd, *+html .mainbox-hd ul, *+html .login-port, *+html .accordion dl, *+html .accordion dfn{min-height:1%;}
.mainbox-hd:after, .mainbox-hd ul:after, .login-port:after, .accordion dl:after, .accordion dfn:after{content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0;}

/* ===== 系統訊息 ===== */
.sys-msg{position:absolute; top:15%; width:100%; text-align:center;}
.sys-msg p{font-size:15px; padding:1em 1.5em; line-height:1; display:inline-block; margin:0 auto; color:#fff; background:rgba(0,0,0,.7);  -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}


/* ===== layout ===== */
/* 通用 */
.signin-figure, .mainbox{-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
-webkit-box-shadow:0 2px 2px 1px rgba(160,160,160,.5);
-moz-box-shadow:0 2px 2px 1px rgba(160,160,160,.5);
box-shadow:0 2px 2px 1px rgba(160,160,160,.5);}
.date-dash{width:1px; height:9px; display:block; background-color:#222; margin:0 auto;}
.mb-break{display:none;}
/* .data-tb 表格 */
.data-tb{width:100%; border:1px solid #ccc; border-width:1px 0 0 1px; text-align:center; line-height:1.5em; border-collapse:collapse;}
.data-tb th, .data-tb td{padding:2px 3px; border:1px solid #ccc; border-width:0 1px 1px 0; vertical-align:middle; *display:table-row;}
.data-tb thead th, .data-tb tbody th{background:#eee9ff url(/st_ec/img/bg_spritex.gif) repeat-x center bottom; border-left-color:#ccc; padding:5px 2px; padding:7px 2px 3px \9; text-align:center;}
.data-tb thead td{font-weight:bold; padding:5px 2px; text-align:center; background:#f8f8f8;}
.data-tb th p, .data-tb td p{text-align:left; padding:2px; line-height:1.5em; word-break:break-all; margin:0; color:#222;}
.data-tb td p.shipping-fee{float:left; color:#c00; width:auto;}
.data-tb td p.shipping-fee ins{text-decoration:none;}
.data-tb span{text-align:left}
.data-tb q{text-align:left;}
.data-tb input[type="text"]{margin-bottom:3px;}
.data-color tbody tr:hover{background:#fff8e0;}
.data-tb ul li{list-style-type:decimal; list-style-position:inside;}
.cell-mix tbody th{text-align:right; background-image:none; background-color:#eaf3ff; padding:3px 6px; word-wrap:normal; word-break:keep-all;}
.cell-mix tbody td{text-align:left; padding:3px 6px;}
.cell-mix tbody td em{margin-right:1em;}

/* 定位，專屬 UI */
.feedback{poistion:relative; background:#e9e9e9 url(/st_ec/img/bg_ec.gif) repeat center top;}
.container{width:100%; padding-top:20px; padding-bottom:20px;}
.survey-footer{width:100%; text-align:center;}
.survey-footer p{padding:1em;}
.mainbox{position:relative; width:698px; padding:15px; margin:0 auto; background:#fff url(/st_ec/img/survey/mainbox_bg.gif) repeat-x center top; border: 1px solid #bebebe;}
.mainbox .data-tb{margin:20px 0 0};
.mainbox .tb{margin:0 auto;}
.mainbox .tb:first-child{margin:0 auto;}
.set-logo, .mainbox-hd h1, .mainbox-hd ul{display:block; float:left; margin-top:-3px;}
.set-logo:link, .set-logo:visited{background:url(/st_ec/img/set_logo.png) no-repeat 0 0; width:167px; height:37px;}
.set-logo span{visibility:hidden;}
.mainbox-hd{margin:0 -15px; *margin:0; padding:0 15px 5px; background:url(/st_ec/img/survey/header_line.png) no-repeat center bottom;}
.mainbox-hd h1{margin:10px 20px 5px 20px; font-size:21px; color:#222;}
.mainbox-hd ul{float:right; list-style-type:none; margin:10px 0 5px 0; display:none;}
.mainbox-hd li{float:left;}
.mainbox-hd li input:first-child{margin:0 5px 0 0;}
.mainbox-hd li input.btn-m{text-align:center; width:88px; height:30px; padding:4px 0 8px; padding:7px 0 5px \9; background:#7f77d9; border:0; background:url(/st_ec/img/btn_submit_gray_m.gif) no-repeat 0 0; color:#222;}
.mainbox-hd li input.btn-m:hover{background-position:0 -30px; background-position:0 0 \9; *background-position:0 -30px; cursor:pointer; padding:6px 0 7px; padding:7px 0 5px \9; *padding:8px 0px 4px;}
.mainbox-hd li .btn-m-line{text-align:left; width:71px; height:19px; padding:7px 0 2px 32px; border:0; background:url(/st_ec/img/btn_submit_gray_m_line.gif) no-repeat 0 0; color:#222; display:inline-block;}
.mainbox-hd li .btn-m-line:hover{background-position:0 -31px; cursor:pointer; padding:8px 0 1px 32px; text-decoration:none;}
.signin-figure{position:absolute; top:95px; left:25px; width:218px; height:318px; background:url(/st_ec/img/survey/signin_figure.jpg) no-repeat center center; border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.mainbox h3{padding:15px 15px 0 260px; margin:15px 0 0;}
.mainbox h3 p{font-size:13px; font-weight:normal; line-height:1.5; margin-bottom:.5em;}
.mainbox h3 a:link, .mainbox h3 a:visited{font-size:13px;}
.mainbox input[type="submit"].btn-LL{font-size:15px; font-weight:bold; padding:5px 0 7px; padding:7px 0 5px \9;}
.mainbox input[type="submit"].btn-LL:hover{padding:6px 0 6px; padding:8px 0 4px \9;}
.login-port{margin:0 0 15px 260px; padding:10px 0;}
.login-port dt, .login-port dd{display:block; line-height:3;}
.login-port dt{clear:left; line-height:1.5;}
.login-port dt.pct100{width:100%; margin:5px 0 0; text-align:left;}
.login-port dt.pct100 input[type="submit"].btn-LL{margin-top:7px;}
.login-port dt p{float:left; margin:0 0; line-height:1.2; font-weight:normal;}
.login-port dt .err-msg{margin-right:3px;}
.login-port dd input[type="text"]{padding:8px 10px; width:55%; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px;}
.login-port dd span{clear:left; display:block; color:#a0a0a0; line-height:1.75; margin:0 .25em .5em;}
.mainbox h2{margin:25px 5px 5px; font-size:18px;}
.mainbox h2 strong{background:url(/st_ec/img/icon_checker.gif) no-repeat -226px -60px; padding-left:.75em;}
/* 問卷表單 */
.tb{width:100%; border-collapse:collapse;}
.tb th, .tb td{border-bottom:1px solid #dedede; padding:12px 5px; line-height:1.4; *display:table-cell;}
.tb th{font-weight:normal; text-align:right;}
.q-part{width:40%;}
.a-part{width:60%;}
.survey-sub{width:85%; line-height:1.75; margin:2em auto 3em;}
.survey-sub th{vertical-align:top;}
.survey-sub th:first-child{width:13%;}
.survey-sub td span.bit{display:inline-block; margin-right:1em;}
.tb tr.no-baseline th, .tb tr.no-baseline td{border-bottom:none;}
.tb label{margin-right:1em;}
.tb .fix-width label{display:inline-block; width:14em; line-height:2;}
.tb .fix-width label.other-opn{width:3.5em; width:3.8em \9; *width:4em; margin:0;}
.tb .fix-width label.other-opn + input[type="text"]{width:10em;}
.tb .fix-height label{line-height:2;}
.tb .fix-height label input{vertical-align:text-top;}
.tb.scaling{margin-bottom:30px;}
.tb.scaling thead th, .tb.scaling thead td{width:12%; padding:3px 5px; border-bottom:2px solid #b9dfff;}
.tb.scaling thead th{width:40%;}
.tb.scaling thead th{font-size:15px; font-weight:bold; text-align:center;}
.tb.scaling thead td{text-align:center; font-weight:normal; color:#888;}
.tb.scaling tbody th, .tb.scaling tbody td{border-bottom:1px dotted #cecece;}
.tb.scaling tbody th{text-align:center; background:#f3f3f3;}
.tb.scaling tbody th label{position:absolute; margin:-.4% 0 0 .5%;}
.tb.scaling tbody td{text-align:center;}
.tb.scaling tbody td label{margin:0 auto; padding:.75em 1em;}
.tb.scaling tbody td label input{margin:0;}
.tb.scaling tbody .sub-issue.sa th, .tb.scaling tbody .sub-issue.sa td{border-top:2px solid #aaa;}
.tb.scaling tbody .sub-issue td{text-align:left;} 
.tb.scaling tbody .sub-issue td label{margin-right:1em; padding:0;} 
.tb.scaling tbody .sub-issue td label input[type="radio"]{margin-right:4px;} 
.tb.scaling tbody .sub-issue td label:first-child{margin-left:30px; margin-left:27px \9;}
.other-info-answer{width:23em;}
.cust-opinion{width:80%; height:120px;}
.button-box{text-align:center; margin:15px auto;}
.button-box a b{vertical-align:middle; display:inline-block; width:16px; height:16px; margin-right:1px; background:url(/st_ec/img/ui/ui-icons_555555_256x240.png) no-repeat 0 -64px;}
.mainbox .op-grp{width:10em;}
.op-grp option{margin-left:1em;}
.op-grp .op-grp-tle{margin-left:0; font-weight:bold; background:#e0f1ff \9; color:#d52678 \9;}
.ask-email td input{width:25em;}
/* 填寫完畢Dialog */
.ui-dialog-titlebar-close{visibility:hidden;}
.survey-thanks{margin:1em; background:url(/st_ec/img/icon_confirm.png) no-repeat 0 -4px;}
.survey-thanks p{line-height:1.5; margin-left:80px;}

/* 結果統計頁 */
.chart-canvas{width:640px; float:right;}
.result .mainbox{width:948px;}
.result .survey-sub{width:75%; margin:2em 2em 3em 2em;}
.score{text-align:center; float:right; margin:2em; border:3px solid #0a52ab; width:125px; height:125px; border-radius:4px; -webkit-border-radius:4px;}
.score h5{background:#0a52ab; padding:.1em 0 .4em; padding:.3em 0 .2em \9; font-size:13px; color:#fff;}
.score-num{color:#c00; font-size:72px; font-weight:bold; font-family:Arial, sans-serif; line-height:1.4; letter-spacing:-3px;}
.score-num .decimal{vertical-align:baseline; font-size:48px; margin-left:1px;}
.score-num em{font-size:12px; font-weight:bold; margin-left:2px; color:#222;}
.accordion dl{margin:10px 20px 0 0px; padding:3px; display:inline-block; background:#fff; border:1px solid #eee;}
.acc dl:first-child{margin-left:10px;}
.accordion dt, .accordion dd{display:block; float:left; font-size:15px; font-weight:normal; padding:4px 6px; background:#fafafa; border-top:1px dotted #ddd;}
.accordion dl dt:first-child, .accordion dl dt:first-child + dd{border-top:none;}
.accordion dt{clear:left; width:11em;}
.accordion dt a:link, .accordion dt a:visited{text-decoration:underline; margin-left:.5em;}
.accordion dd{width:3em; text-align:right;}
.accordion dd em{margin-right:2px;}
.accordion dt.sbj, .accordion dd.sbj{font-weight:bold; background:#fff8e0;}
.accordion dd.sbj em{font-weight:bold;}
.accordion dt.hedr{width:14.75em; font-weight:bold;}
.accordion.ui-accordion .ui-accordion-content{padding:10px;}
.accordion.ui-accordion h4.ui-accordion-header{color:#0a52ab; font-weight:bold; font-size:15px; margin-top:-1px;}
.accordion.ui-accordion h4.ui-accordion-header strong{color:#c00; margin-left:.2em; padding:0 5px; font-size:20px; position:absolute; top:5px;}
.accordion.ui-accordion h4.ui-accordion-header strong.no-good{color:#fff; background:#c00;}
.accordion h4.ui-accordion-header.ui-state-default{background:url(/st_ec/img/survey/ui-bg_flat_100.png) repeat-x 50% 50%;}
.accordion h4.ui-accordion-header.ui-state-hover{background-position:50% 45%;}
.accordion h4.ui-accordion-header.ui-state-active{color:#000;}
.accordion h4 .ui-icon{display:inline-block; vertical-align:text-top; margin-right:2px;}
.accordion dfn{display:block; clear:left;}
.accordion dfn .btn-func{margin:2px 10px 0;}
.accordion hr{clear:left; height:0; background:none; border:none;}
.accordion hr + .chart-canvas{float:none; margin:10px auto 0;}


/*====== Hack for Chrome & Safari ======*/
@media screen and (-webkit-min-device-pixel-ratio:0){
.mainbox-hd li input.btn-m{padding:6px 0 6px;}
.mainbox-hd li input.btn-m:hover{padding:7px 0 5px;}
}

.is-mobile .mainbox-hd ul{display:block;}

/* ===== media queries ===== */
@media only screen and (min-device-width:320px) and (max-device-width:480px) {
.pc-break{display:none;}
.mb-break{display:block;}
.feedback{background:#fff;}
.container{width:100%; padding:0;}
.mainbox{width:100%; padding:0; padding-top:10px; border:none; border-radius:0; -webkit-border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
.mainbox-hd{margin:0;}
.mainbox-hd ul{float:none; margin:0 0 15px;}
.mainbox-hd .set-logo{float:none;}
.mainbox-hd h1{margin-left:0; margin-right:0;}
.signin-figure{display:none;}
.mainbox h3{padding:0; margin-bottom:15px; margin-left:10px;}
.login-port{margin:0; margin-left:10px; padding:0;}
.mainbox input[type="submit"].btn-LL{margin-bottom:30px; padding:4px 0 8px;}
.mainbox .data-tb{margin:25px 0 10px 10px; width:94%;}
.data-tb .m-hide{display:none;}
.data-tb tbody tr:nth-child(even){background:#f1f1f1;}
.data-tb .vtype{text-align:center;}
.data-tb .vtype a:link, .data-tb .vtype a:visited{display:block; width:1em; margin:0 auto; line-height:1.2;}
.data-tb .vtype a:active, .data-tb .vtype a:hover{text-decoration:none;}
.q-part{width:41%;}
.a-part{width:59%;}
.tb th, .tb td{line-height:2;}
.tb.scaling thead th, .tb.scaling thead td{width:15%; padding:2px 3px; border-bottom:2px solid #b9dfff;}
.tb.scaling thead th{width:25%;}
.tb .fix-width label.other-opn{width:3.8em;}
.tb .fix-height label{display:inline-block; width:8em;}
.tb .fw{display:inline-block; width:8em;}
.survey-sub{width:90%; line-height:1.75; margin:2em auto 3em;}
.survey-sub th:first-child{width:17%;}
.survey-footer{border-top:1px solid #ccc;}
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait){
.mainbox .data-tb{margin:25px 0 10px 10px; width:94%;}
.tb.scaling tbody th label{margin:-1% 0 0 -16.5%;}
.tb.scaling thead th, .tb.scaling thead td{font-size:9px; color:#333;}
.survey-sub th:first-child{width:23%;}
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape){
.mb-break{display:none;}
.mainbox .data-tb{width:96%;}
.data-tb .vtype a:link, .data-tb .vtype a:visited{display:inline; width:auto; margin:0 auto; line-height:none;}
.q-part{width:35%;}
.a-part{width:65%;}
.tb .fix-height label{width:23em;}
.tb .fw{display:inline-block; width:23em;}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
	.tb .fix-width label.other-opn{width:3.8em;}
	.is-mobile .mainbox-hd ul{display:block;}
}

@media screen and (min-width:768px){
	.fix-width > div{display:inline-block; width:49%; vertical-align: top;}
}