@charset "UTF-8";
/*
* @data 2016-4-22
* Author: Linda Lu
*
*/

/*=====================================================
   RESET
=====================================================*/
html,body { height: 100%; }
html, body, div, span, p, ul, li, input, select, option { margin: 0; padding: 0; }
body { line-height: auto; font-size: 100%; font-weight: normal; font-family: '微軟正黑體', 'Microsoft JhengHei', 'Microsoft YaHei', Helvetica, Arial, sans-serif; word-wrap: break-word; -webkit-text-size-adjust: none; }
a img, img { max-width: 100%; height:auto; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.boxsizing { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

/*=====================================================
   Sticky Footer
=====================================================*/
html,body { height: 100%; overflow-x: hidden; }
.wrapper { position: relative; min-height: 100%; }
.header { position: relative; width: 100%; height: 40px;  border-bottom: 2px solid #ed1865; }
.content { padding: 0 0 41px 0; }
.footer { font-size: 14px; position: absolute; bottom: 0; left: 0; width: 100%; height: 41px; }
.w1000i{
  max-width: 1200px;
  margin:  0 auto;
}
.icon-logo { margin-left: 10px; display: inline-block; width: 109px; height: 40px;  }
.footer-copyright { position: absolute; bottom: 0; width: 100%; line-height: 40px; }
.footer-copyright:before { content: "©"; font-size: 16px; margin: 0 4px 0 0; }
@media screen and (max-width: 768px) {
	.footer { font-size: 13px; line-height: 41px; letter-spacing: -0.03em; }
}

/*=====================================================
   BASE
=====================================================*/
.showMobile { display: none; }
.breakDesktop { display: block; }
.breakMobile { display: inline; }
.display-inline { display: inline; }
.display-inlineBlock { display: inline-block; }
.display-none { display: none; }
.display-block { display: block; }

@media screen and (max-width: 640px) {
	.hideMobile, .breakDesktop { display: none; }
	.showMobile { display: inline-block; }
}
@media screen and (max-width: 532px) {
	.breakMobile { display: block; }		
}

/*-------- position ----------*/
.position-fixed { position: fixed; }

/*-------- width ----------*/
.w280 { width: 280px; }
/*.w49pct { width: 49%; }*/
/*.w95pct { width: 95%; }*/
.w144 { width: 144px; } /* btn-action */
.w1000 { width: 100%; max-width: 319px;}
.w100pct { width: 100%; }
@media screen and (max-width: 1000px) {
	.w1000 { width: 95%; margin: 0 auto; }
}
@media screen and (max-width: 532px) {
	.w1000 { width: 90%; margin: 0 auto; }
}

/*-------- lists  ----------*/
.unordered { list-style: none; margin-left: 0; }
.mb-15 > li { margin-bottom: 15px; }


/*-------- float ----------*/
.fl { float: left; }
.fr { float: right; }

/*-------- padding  ----------*/
.pv-5 { padding-top: 5px; padding-bottom: 5px; }
.pv-10 { padding-top: 10px; padding-bottom: 10px; }
.ph-10 { padding-left: 10px; padding-right: 10px; }
.padding-10 { padding: 10px; }
.padding-20 { padding: 20px; }

/*-------- margin ----------*/
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-30 { margin-bottom: 30px; }
.ml-5 { margin-left: 5px; }
.mv-10 { margin-top: 10px; margin-bottom: 10px; }
.mv-20 { margin-top: 20px; margin-bottom: 20px; }
.mh-auto { margin-left: auto; margin-right: auto; }
.m-ctn-button{ margin: 20px auto 10px auto; }
@media screen and (max-width: 768px) {
	.mobile-mvl0 { margin-top: 0; margin-bottom: 0; }
}

/*=====================================================
   TYPEFACES
=====================================================*/
.f-uppercase { text-transform: uppercase; }
.f-justify { text-align: justify; }
.f-normal { font-weight: normal; }
.f-bold { font-weight: bold; }
.lineHeight-22 { line-height: 22px; }
.lineHeight-32 { line-height: 32px; }
.letterSpacing-03 { letter-spacing: 0.03em; }
.letterSpacing-06 { letter-spacing: 0.06em; }
.upWards-arrow:before { content: "\2191"; margin: 0 2px; font-weight: bold; }
.downWards-arrow:before { content: "\2193"; margin: 0 2px; font-weight: bold; }

/*-------- align ----------*/
.textAlign-left { text-align: left; }
.textAlign-right { text-align: right; }
.textAlign-ctn { text-align: center; }
.verticalAlign-top { vertical-align: top; }
.verticalAlign-middle { vertical-align: middle; }

/*-------- text ----------*/
i { font-style: normal; }
i.num { font-style: normal; letter-spacing: 0.06em; padding: 0 3px; }
.f-13 { font-size: 13px; }
.f-14 { font-size: 14px; }
.f-16 { font-size: 16px; }
.f-18 { font-size: 18px; }
.f-20 { font-size: 20px; }
.f-24 { font-size: 24px; }
i, .f-13, .f-14, .f-16, .f-18, .f-20, .f-24, a, button {
	font-family: "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif; 
}
h1.f-18.lineHeight-22 { line-height: 26px; }
@media screen and (max-width: 532px) {
	.f-13 { line-height: 18px; font-size: 14px; }
	.f-14 { font-size: 16px; line-height: 24px; }
	.f-18 { font-size: 22px; line-height: 18px; } 	
}

/*=====================================================
   COLORS
=====================================================*/
.f-green { color: #00a99d; }
.f-greenLight { color: #8ec31f; }
.f-pink { color: #ED1865; }
.f-pinkLight { color: #f788b2; }
.f-yellow { color: #feac02; }
.f-grey { color: #666; }
.f-greyLight { color: #888; }
.f-greyLighter { color: #ababab; }

.f-white { color: #fff; }
.f-black { color: #262626; }
.f-orange { color: #ea5415; }
.f-violet { color: #7e318d; }
.f-stock-green { color: #009900; }
.f-stock-red { color: #ed1164; }

/*-------- background ----------*/
.bg-green { background-color: #00a99d; }
.bg-greenLight { background-color: #66cbc4; }
.bg-greenLightest { background-color:#e0f5f3; }
.bg-pink { background-color: #ed1865; }
.bg-pinkLight { background-color: #f788b2; }
.bg-pinkLightest { background-color: #feedf3; }
.bg-yellow { background-color: #fbad18; }
.bg-yellowLight{ background-color: #ffe0aa; }
.bg-yellowLightest { background-color: #fff1d3; }
.bg-black { background-color: #262626; }
.bg-greyDark { background-color: #858585; }
.bg-greyLight { background-color: #e9e9e9; }
.bg-greyLightest { background-color: #f4f4f4; }
.bg-secondary-green { background-color:#daecd4; }
.bg-secondary-pink{ background-color: #ffe2e2; }

/*-------- border ----------*/
.border-green { border: 1px solid #00a99c; }
.broder-grey { border: 1px solid #b9b9b9; }
.border-tab-green.border-tab-top { border-top: 1px solid #00a99c; }
.border-tab-green { border: 1px solid #00a99c; border-top: none; }
.borderRadius-8 { border-radius: 8px; }

/*=====================================================
   BUTTONS
=====================================================*/
a { text-decoration: none; cursor: pointer; }
button { border: none; }
.btn-action { height: 40px; line-height: 38px; }
.btn-input { height: 35px; line-height: 35px; }
.btn-action.bg-pink:hover { background-color: #cf0653; }
.btn-action.bg-yellow:hover { background-color: #fd8f19; }

/*=====================================================
   FORMS
=====================================================*/
.loginAid {
    text-align: center;
    margin-top: 10px;
}
.loginAid-link {
    color: #666;
    font-size: 1em;
    line-height: 1;
	top: 0;
	left: 0;
}
.tabs-content--loginForm .select, .tabs-content--loginForm .input--text, .tabs-content--loginForm .pwd, .tabs-content--loginForm .btn--pink {
    margin-bottom: 15px;
}
.pwd, .id {
    width: 100%;
    position: relative;
}
.input--text, .input--pwd, .input--birth {
    width: 100%;
    height: 35px;
    position: relative;
    box-sizing: border-box;
    border: #00a99d 1px solid;
    font-size: 1.0em;
}
.icon--eye, .icon-eye {
    width: 35px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 3px;
    text-align: center;
    cursor: pointer;
}
.boxShadow-greyLight { box-shadow: 0 0 3px rgba(9, 2, 4, 0.4); -webkit-box-shadow: 0 0 3px rgba(9, 2, 4, 0.4); -moz-box-shadow: 0 0 3px rgba(9, 2, 4, 0.4); }
.tabStyle { line-height: 44px; height: 44px; }
.icon-disc:before { display: inline-block; content: "\2022"; color: #00a99d; padding-right: 7px; margin-bottom: 5px; }

/*-------- text ----------*/
.textField { padding: 0 0 5px 12px; }

/*-------- input ----------*/
input, input:hover, .dropdown select:focus { outline: 0; }
input[type="text"], input[type="password"] { height: 37px; line-height: 37px; box-sizing: border-box; text-indent: 7px; }
input[type="text"]:disabled, input[type="password"]:disabled { background-color: #efefef; border: 1px solid #b9b9b9; }
input:disabled::-webkit-input-placeholder { color: #b8b8b8; } /* WebKit browsers */
input:disabled:-ms-input-placeholder { color: color: #b8b8b8; }  /* Internet Explorer 10+ */
::-webkit-input-placeholder { color: #666; } /* Chrome/Opera/Safari */ 
::-moz-placeholder { color: #666; } /* Firefox 19+ */ 
:-ms-input-placeholder { color: #666; } /* IE 10+ */ 
:-moz-placeholder { color: #666; } /* Firefox 18- */ 

/*-------- checkbox ----------*/
.checkbox { display: block; }
.checkbox.notAllowed input[type=Checkbox]:not(old) + label { cursor: not-allowed; }
input[type=Checkbox]:not(old) { width: 0; margin: 0; padding: 0; opacity: 0; }
input[type=checkbox][disabled] + label  { background: url(../images/form/icon-chk-disabled.png) no-repeat; cursor: not-allowed; }
input[type=Checkbox]:not(old) + label  { display: inline-block; min-height: 26px; line-height: 26px; vertical-align: bottom; padding-left: 33px; background: url(../images/form/icon-chk-unchecked.png) no-repeat; cursor: pointer; }
input[type=Checkbox]:not(old):checked + label { background: url(../images/form/icon-chk-checked.png) no-repeat; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }

/*-------- select ----------*/
.dropdown { position: relative; overflow: hidden; }
.dropdown, .dropdown select { height: 37px; line-height: 37px; }
.dropdown select { width: 100%; background: transparent; appearance: none; -webkit-appearance: none; position: absolute; top: 0; left: 0; border: none; text-indent: 7px; }
.dropdown.flat-green { background: #fff url(../images/form/bg-select.png) no-repeat right; border: 1px solid #00a99c; }
.dropdown.flat-grey { background: #efefef url(../images/form/bg-select-disabled.png) no-repeat right; border: 1px solid #b9b9b9; }
select:disabled { color: #b8b8b8; }
@media screen and (max-width: 532px) {
	.dropdown.flat-green, .dropdown.flat-grey { width: 100%; }
}

/*-------- validate ----------*/
.validate label.error { color: #FBAD18; line-height: 18px; vertical-align: text-top; margin-left: 10px; }
.validate label.error:before { display: inline-block; content: url(../images/form/icon-error.png); width: 18px; height: 18px; margin-left: 8px; margin-right: 4px; }
@media screen and (max-width: 532px) {
	input[type="text"], input[type="password"] { width: 100%; }
	.validate label.error { display: block; padding-top: 10px; margin-left: 0; }
	.validate label.error:before { margin-left: 0; }
}