@charset "utf-8";

body		{font-size: 80%;}
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td , ul, li
{
    margin: 0px;
    padding: 0px;
    border:none;
    outline: 0px;
    font-weight:normal;
    font-style:normal;
    line-height: normal;
    color:#333333;
    font-family: "微軟正黑體", Verdana, Arial, "新細明體", sans-serif;
}
input {font-family:"微軟正黑體", Verdana, Arial,"新細明體",  sans-serif;}
table {border-collapse: collapse; border-spacing: 0;}
ul 			{list-style:none;}
a img,
:link img,
:visited img {border:none;}

/*去除連結虛線框*/
a		{blr:expression(this.onFocus=this.blur());}
a:focus {-moz-outline-style: none; }

/*clearfix*/
.clearfix:after			{content: ".";  display: block;  height: 0; clear: both; visibility: hidden;}
.clearfix				{display: inline-block;}
html[xmlns] .clearfix	{display: block;}
* html .clearfix		{height: 1%;}

/*chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #	{} }

/*A*/
.textInput			{background: #ffffff; padding:7px 10px; border:0; border-right:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; border-top:1px solid #bbb; border-left:1px solid #bbb; position:relative; -webkit-box-shadow:inset #ccc 1px 1px 3px; -moz-box-shadow:inset #ccc 1px 1px 3px; box-shadow:inset #ccc 1px 1px 3px;  -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; behavior: url(css/PIE.htc); color:#333}
.textInput:focus	{background:#FFC;  border:1px solid #CC9; outline:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none;}
label				{cursor:pointer; padding:5px 10px 5px 0;; }
input[type="text"]	{}



.textInput			{background: #ffffff; padding:9px 10px;  border:1px solid #CCc; color:#999; -webkit-box-shadow:inset #ddd 1px 1px 3px; -moz-box-shadow:inset #ddd 1px 1px 3px; box-shadow:inset #ddd 1px 1px 3px;  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(css/PIE.htc); position:relative; width:250px; }
.textInput:focus	{background:#FFC; border:1px solid #CC9; color:#000; outline:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
.textInput.error	{background:#FFF; border:1px solid #F3494E;  color:#999; }
textarea			{background:#F3F3F5; padding:9px 10px;  border:1px solid #CCc; color:#999; -webkit-box-shadow:inset #ddd 1px 1px 3px; -moz-box-shadow:inset #ddd 1px 1px 3px; box-shadow:inset #ddd 1px 1px 3px;  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; behavior: url(css/PIE.htc); position:relative; }
textarea:focus		{background:#FFC; border:1px solid #CC9; color:#000; outline:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }
.dateInput			{background:url(../images/icon_calendar.png) no-repeat right; width:160px;}

.text-xs			{width:30px;}
.text-s				{width:160px;}

select				{padding:8px;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border:1px solid #ccc; }

.button 			{display: inline-block; border:none; text-align:center;  color: #999; background:#ddd; font-size:13px; font-size:15px; line-height:120%; padding:10px 23px; padding:12px 40px;  -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;  behavior: url(css/PIE.htc); position:relative; text-decoration:none; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s;}
.button:hover		{background: #eee; cursor:pointer;}
.button:active 		{background:#ddd;  position:relative; top: 1px; color:#bbb; text-shadow: 0 0 0, 1px 1px 0px rgba(255, 255, 255, 0.3); -webkit-box-shadow:inset 1px 1px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow:inset 1px 1px 10px rgba(0, 0, 0, 0.2); box-shadow:inset 1px 1px 10px rgba(0, 0, 0, 0.2); }

.blue-btn		 	{background: #00a1cb; color:#FFF}
.blue-btn:hover 		{background: #00b5e5;}
.blue-btn:active	{background: #1495b7; color: #00647f;}

.red-btn			{background: #e54028; color:#FFF}
.red-btn:hover 		{background: #e8543f;}
.red-btn:active 	{background: #CF2929; color:#900; }

.green-btn		 	{background: #7db500; color: white;}
.green-btn:hover 	{background: #8fcf00;}
.green-btn:active	{background: #76a312; color: #486900;}

.orange-btn		 	{background: #FF6C0A; color: white;}
.orange-btn:hover 	{background: #FF8533;}
.orange-btn:active	{background: #F96400; color: #8A3700;}

.trash-btn:link,
.trash-btn:visited	{background:url("../images/icon_trashcan.png") no-repeat center; display:block; float:right; width:13px; height:15px; padding:10px 15px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;  behavior: url(css/PIE.htc); position:relative; }
.trash-btn:hover	{background:#eee url("../images/icon_trashcan.png") no-repeat center;}
.trash-btn:active	{background:#E54028 url("../images/icon_trashcan2.png") no-repeat center;}


.button.disable 				{border:none!important; color: #999!important; background:#ccc!important; text-shadow: 0 0 0, 1px 1px 0px #e3e3e3!important;}
.button.disable:hover		{background: #ccc!important; cursor:default!important;}
.button.disable:active 		{top: 0px; -webkit-box-shadow:none!important; -moz-box-shadow:none!important; box-shadow:none!important; }

.white-btn		 	{background: #f6f6f6;color: #333!important;border:1px solid #ccc!important;}
.white-btn:hover 	{background: #FFF;color: #333!important;}
.white-btn:active	{}

/*main*/
body						{background-color:#ffffff; border-top:0px solid #00588c;}
.mainContainer				{width:860px; margin:30px auto;}
.header						{}
.header  img					{}
.main						{margin:20px 0;}
.main img					{}
.panes						{width:100%; margin-bottom:20px;}
.pane						{width:580px; float:left; margin-right:20px;}
.sidebar					{width:180px; float:right;}
.toolbar					{width:100%; float:left; text-align:center; margin:40px 0;}

h1				{font-size:25px;}
h2				{font-size:20px; font-weight:bold; color:#003366}
h3				{font-size:16px; font-weight:bold; color:#000;}
h4				{font-size:13px; font-weight:bold; color:#000;}
p				{font-size:15px; color:#333; line-height:180%;}
.register-title {
  margin-bottom: 45px;
}
.item				{float:left; width:100%; margin:15px 0}
.item img			{float:left;}
.item h3				{float:left; margin:0; margin-left:10px; width:150px;}
.item p				{float:left; margin:0; margin-left:12px; font-size:13px;}
.contactUs a			{padding:3px 0; display:block; color:#333}
.note h3				{margin:0;}
.note a				{display:block; background:#FFCD45; padding:10px 5px; text-decoration:none; color:#573F00; text-align:center; font-weight:normal; font-size:13px; margin-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;  behavior: url(css/PIE.htc);}

table			{width:100%; margin:20px 0 10px 0;}
table th			{width:70px; font-size:13px; border-top:1px dotted #ccc; text-align:right; font-weight:bold;}
table td			{padding:0px 10px; font-size:13px; line-height:200%; border-top:1px dotted #ccc; height:50px;}
/*table th span		{display:block; font-size:13px; margin:10px; color:#999}*/
table thead th,
table thead td	{background:#fabc35; padding:8px 10px; text-align:center; border:0px;}
table thead th	{background:#cc3300; color:#fff;}

.infor			{}
.infor p			{font-size:13px; margin:15px 0;}

.ticketTypeClass .textInput	{margin:10px 0;}

.profile		{width:96%; margin-bottom:20px; border:5px solid #eee; padding:10px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;  behavior: url(css/PIE.htc); }
.profile li		{margin:10px 0;}
.profile li span 	{width:135px; display:inline-block; text-align:right;vertical-align: middle;}
.profile li span + *:not(span) {vertical-align: middle;}
.profile li .labelGroup {display: inline-block;width: 400px;}
.profile .textInput	{margin-left:6px;}

.profile select, .profile textarea {margin-left: 5px;}

.profile li div.desc 	{margin-left:145px;}

.invoice		{width:100%; margin:20px 0; border:5px solid #eee; padding:10px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;  behavior: url(css/PIE.htc);}
.invoice li		{margin:5px 0;}
.invoice li span 	{width:100px; display:inline-block; text-align:right;}

#done .infor td em	{color:#FFCD46; font-size:24px; font-family:Verdana; font-weight:bold;}

#regProfile			{}
#regProfile h4		{margin:10px 0;}
/**/
.popupStyle 			{display:none; min-width:320px; padding:20px; text-align:center; background:#fff; -webkit-border-radius: 10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px;  -webkit-box-shadow: #999 0px 0px 10px; -moz-box-shadow: #999 0px 0px 10px; box-shadow: #999 0px 0px 10px;  behavior:url(css/PIE.htc); }
.popupStyle h1			{font-family:Arial,"微軟正黑體"; width:100%;}
.popupStyle h2			{font-size:18px; width:100%; margin: 10px 0;}
.popupStyle h3			{font-size:12px; width:100%; font-weight:normal; margin:5px 0; line-height: 160%;}
.popupStyle .inner		{width:100%; text-align:left; float:left; margin:10px 0; height:360px; overflow:auto;}
.popupStyle p			{font-size:12px; margin:0; color:#666;}
.popupStyle li			{color:#666; margin:5px 0;}
.popupStyle .tool		{margin-top:30px;}
.popupStyle .close		{padding:5px; position: absolute; right:-5px; top:5px; cursor: pointer; height:20px; width:20px; z-index:99;}
.popupStyle .close:hover 		{filter:alpha(opacity=60);opacity:0.6;zoom:1;}
.popupStyle .close:active 		{top:6px;}
.popupStyle .button.close		{position:relative; right:auto; top:auto; width:auto; height:auto; white-space:nowrap;  padding:10px 12px; }
.popupStyle .toolbar				{margin:10px 0;}
.popupStyle .toolbar .button				{margin-top:5px; margin-left:10px;}
.popupStyle .toolbar .button.close:link,
.popupStyle .toolbar .button.close:visited	{display: inline-block; border:none; text-align:center; font-size:13px; font-size:15px; line-height:120%; padding:10px 23px; padding:12px 40px;  -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;  behavior: url(css/PIE.htc); position:relative; text-decoration:none; -webkit-transition: 0.2s; -moz-transition: 0.2s; transition: 0.2s;}
.popupStyle .toolbar .button.close:hover		{cursor:pointer;}
/*.popupStyle .toolbar .button.close:active 	{background:#ddd;  position:relative; top: 1px; color:#bbb; text-shadow: 0 0 0, 1px 1px 0px rgba(255, 255, 255, 0.3); -webkit-box-shadow:inset 1px 1px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow:inset 1px 1px 10px rgba(0, 0, 0, 0.2); box-shadow:inset 1px 1px 10px rgba(0, 0, 0, 0.2); }*/
.popupStyle .toolbar label				{width:100%; display:block; padding:5px;}

#approvalContent		{width:800px; height:500px;left:25%}
#systemMsgAlert		    {width:300px; height:150px;left:25%}

/*date*/
.date {}
#calroot 				{z-index:10000; margin-top:-1px; width:198px;  padding:2px; background-color:#fff; font-size:11px; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 15px #666; -webkit-box-shadow: 0 0 15px #666;}
#calhead				{padding:2px 0; height:22px;}
#caltitle				{font-size:14px; color:#0150D1; float:left; text-align:center; width:155px; line-height:20px; text-shadow:0 1px 0 #ddd;}
#calnext,
#calprev 				{display:block; width:20px; height:20px; background:transparent url(../images/prev.gif) no-repeat scroll center center; float:left; cursor:pointer;}
#calnext 				{background-image:url(../images/next.gif); float:right;}
#calprev.caldisabled,
#calnext.caldisabled 	{visibility:hidden;}
#caltitle select 			{font-size:10px; padding:0px;}
#caldays 				{height:14px; border-bottom:1px solid #ddd;}
#caldays span 			{display:block;float:left;width:28px;text-align:center;}
#calweeks 				{background-color:#fff; margin-top:4px;}
.calweek 				{clear:left; height:22px;}
.calweek a 				{display:block; float:left; width:27px; height:20px; text-decoration:none; font-size:11px; margin-left:1px; text-align:center; line-height:20px; color:#666;  -moz-border-radius:3px; -webkit-border-radius:3px;}
.calweek a:hover,
.calfocus 				{background-color:#ddd;}
a.calsun 				{color:red;}
a.caloff 				{color:#ccc;}
a.caloff:hover 			{background-color:rgb(245, 245, 250);}
a.caldisabled 			{background-color:#efefef !important; color:#ccc	!important; cursor:default;}
#calcurrent				{background-color:#498CE2;color:#fff;}
#caltoday 				{background-color:#333; color:#fff;}

.error      				{color: red; background:#F3494E; color:#FFF; padding:5px 5px; margin-left:10px;}

#information			{border:5px solid #eee; padding:10px;}
#information  P			{margin:0;}
#information  ol			{}
#information  li			{margin:8px 0; line-height:160%; font-size:12px;}

#cancelBtn				{margin-left:10px;}



#error-page				{background:#eee; text-align:center;}
#error					{width:100%; background:#fff; border:1px solid #faa; float:left; margin:20px auto; float:left; text-align:center; padding:30px 0; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;  behavior: url(css/PIE.htc); }
#error h2				{font-size:25px; margin:20px 0;}
#error-page #error		{border:0;}

/* add */
#information {
  width: 550px;
}
#approvalContent {
  width: calc(100% - 80px);
  max-width: 800px;
  height: auto;
  left: 50%;
  transform: translateX(-50%);
}
#confirmOverlay {
  left: 50%;
  transform: translateX(-50%);
}
.popupStyle {
  min-width: 290px;
}

@media (max-width: 900px) {
  .mainContainer {
    width: 580px;
    padding: 0 10px;
    margin: 0 auto;
  }
  .msg.error-msg {
    margin-top: 0!important;
    margin-bottom: 28px;
    padding: 14px
  }
  .msg.error-msg pre {
    white-space: pre-wrap;
  }
  .panes {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }
  html[xmlns] .clearfix {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 2;
    width: 100%;
  }
  .register-title {
    font-size: 22px;
    margin-bottom: 32px;
  }
  .panes .pane-title {
    font-size: 18px;
  }
  .clearfix html[xmlns] p {
    font-size: 14px;
    line-height: 26px;
  }
  .pane > p {
    /*margin-top: 6px;*/
    margin: 0;
  }
  .pane p iframe html[xmlns] body p {
    font-size: 14px;
    line-height: 26px;
  }
  .pane {
    width: 100%;
    clear: both;
    float: none;
    display: flex;
    flex-direction: column;
    margin-right: 0;
  }
  .sidebar {
    clear: both;
    float: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%!important;
    margin-top: 20px;
  }
  .sidebar h2 {
    margin-left: 0!important;
  }
  .sidebar .item p {
    margin-left: 0!important;
  }
  .panes.clearfix {
    margin-top: 40px;
  }
  #regProfile .profile {
    width: initial;
    margin-bottom: 0;
  }
  #regProfile .profile:not(:last-child) {
    margin-bottom: 16px;
  }
  .panes.clearfix .toolbar {
    margin: 20px auto 0;
  }
  .toolbar .button {
    margin-top: 0;
  }
  #information {
    margin: 32px auto;
  }
  #information p {
    font-size: 12px;
  }
  .ticketTypeClass {
    padding-top: 10px;
  }

  /*finish page*/
  .atm-btn {
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .mainContainer {
    width: calc( 100% - 40px );
  }
  .ticketTypeIndent {
    padding-left: 25px;
    text-indent: -27px;
  }
  .ticketTypeClass .error {
    display: inline-block;
    padding-left: 33px;
    margin-top: 3px;
    margin-left: 0;
  }
  #information {
    width: calc( 100% - 40px );
  }
  #information ol {
    padding: 0 15px;
  }
  .popupStyle {
    padding: 10px;
  }
  #approvalContent h1 {
    font-size: 18px;
    line-height: 26px;
  }
  #approvalContent .inner h2 {
    font-size: 16px;
  }

  /* confirm page */
  .confirm_toolbar {
    width: 100%!important;
  }
  .confirm_toolbar .button {
    display: block;
    margin: 0 auto;
  }
  .confirm_toolbar .button:not(:last-child) {
    margin-bottom: 10px;
  }
  #confirmOverlay h1 {
    font-size: 16px;
    line-height: 32px;
  }

  /*profile*/
  .profile input,.profile textarea,.profile select {box-sizing:border-box;margin-left: 0;}
  .profile textarea {height:36px!important;}
  .profile li > *:not(.error) {display:block;}
  .profile li span {display:block;text-align:left;margin-bottom:6px;}
  .profile li span,.profile li span  + *{width: 100%!important;}
  .profile li span,.profile .textInput {margin-left: 0;}
  .profile textarea{ height: 36px;}
  .profile .error {margin-top: 3px;margin-left:0;display:inline-block;}
  .profile .labelGroup > select + .error {margin-left: 3px;}
}

@media (max-width: 460px) {
  .header img {
    width: 100%;
    height: auto;
  }
  html[xmlns] .clearfix {
    align-items: flex-start;
  }
  .sidebar {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 220px!important;
    align-items: flex-start;
  }
  #regProfile .profile li span {
    text-align: left;
    width: initial;
    width: 99.5px;
  }
  #regProfile .profile li .textInput,
  #regProfile .profile li textarea {
    /* width: 176px!important;
    margin-left: 0; */
  }
  #regProfile .profile select {
    margin-left: 0;
  }
  #regProfile .profile li div.desc {
    text-align: left;
    margin-left: 0;
  }

  /*finish page*/
  .finish_toolbar {
    clear: left;
    float: none;
  }
  .finish_toolbar .button {
    display: block;
    margin: 0 auto;
  }
  .finish_toolbar .button:not(:last-child) {
    margin-bottom: 10px;
  }
  .finish_toolbar a.button {
    display: inline-block;
  }
  .finish_toolbar #cancelBtn {
    margin-left: auto;
  }
}

@media (max-width: 414px) {

}