﻿@charset "utf-8";


.Calendar .page-content-with-left .PageMenu,
.Calendar.event .page-content-with-left .PageMenu { border:0; padding:0;}

/*行事曆大事件及線上預約------------------------*/
.Calendar .dateTable .calendar-wrapper { background:rgba(240,240,240,1);}
.Calendar .dateTable .calendar-wrapper-weekday { background:white;}
.Calendar .dateTable .cal-day {width:100%;}
/*2019122.Calendar .dateTable .cal-day td.wrapper{ background:white; padding:10px;}*/
.Calendar .dateTable .cal-weekday {width:100%; background:white;}
.Calendar .dateTable .cal-weekday td.evnet { background:rgba(0,0,0,0.05);}
.Calendar .dateTable .cal-weekday td.evnet a { text-align:left;}
.Calendar .dateTable .cal-month {width:100%; table-layout:fixed;}
.Calendar .dateTable .cal-month th{ color:black; height:40px;}
.Calendar .dateTable .cal-month th.holiday{ color:Crimson;}
.Calendar .dateTable .cal-month td{ border-top:1px solid rgba(240,240,240,1);border-left:1px solid rgba(240,240,240,1);}
.Calendar .dateTable .cal-month td.CalToday { border:Crimson 1px solid; background:white; text-align:left;}
.Calendar .dateTable .cal-day .event .time-list td.active { background-color:#FFC}

.Calendar .dateTable{ font-size:0.8rem; margin:15px auto; text-align:center; width:100%; float:left; margin:0;}
.Calendar .dateTable a{ text-decoration:none; color:rgba(0,0,0,0.6); font-family:Arial, Helvetica,'微軟正黑體', sans-serif; font-size:0.8rem; text-align:center; display:block; width:100%; height:auto; height:20px; line-height:20px; overflow:hidden; float:left; height:auto;}
/*20191220.Calendar .dateTable .cal-day td.wrapper > div a { text-align:left;  line-height:30px; height:auto;}*/
.Calendar .max-w-box .dateTable > tbody > tr > td > table > tbody > tr:nth-of-type(odd) { background:rgba(0,0,0,0.05);}
.Calendar .max-w-box .dateTable > tbody > tr > td > table > tbody > tr > td { line-height:30px; padding:5px;}
.Calendar .max-w-box .dateTable > tbody > tr > td > table > tbody > tr > td.td_right { border:0; padding:5px; background:none;}
.Calendar .max-w-box .dateTable > tbody > tr > td > table[bgcolor="rgba(240,240,240,1)"] > tbody > tr > td { line-height:30px; padding:0;}
.Calendar .PageMenu .dateTable table { margin:0 auto;}
.Calendar .day-number{ padding:10px; color:black; font-size:0.6rem;border-right:rgba(240,240,240,1) 1px solid;border-bottom:rgba(240,240,240,1) 1px solid;background:rgba(240,240,240,1);}
.Calendar .Calday { background:white; text-align:left;}
.Calendar .CalToday { border:Crimson 1px solid; background:white; text-align:left;}
.Calendar .CalWeekday { background:rgba(0,0,0,0.05); color:rgba(0,0,0,0.7); padding:5px;}
.Calendar .CalNoday { background:rgba(0,0,0,0.05); text-align:left;}
.Calendar .CalNoday .day-number{  color:rgba(0,0,0,0.2);}
.ugC_Calendar_Detail_table{ border-top:1px solid rgba(210,160,140,1); border-right:1px solid rgba(210,160,140,1);}
.Calendar td.td_right,
.Calendar .ugC_Calendar_Detail_table td{ text-align:left; padding:5px; border-bottom:1px solid rgba(210,160,140,1); line-height:30px;  border-left:1px solid rgba(210,160,140,1); padding-left:10px; min-height:25px; background:white; }
.Calendar .Bu_cancel{ margin-top:20px; border:0; outline:0; width:70px; height:30px; text-indent:-9999px;}
.Calendar .Bu_cancel:hover{}
.Calendar th { text-align:center;}
.Calendar td { font-size:0.8rem; color:rgba(0,0,0,0.4); text-decoration:none; line-height:150%; vertical-align:top; line-height:normal; min-height:0; padding:5px;}
.Calendar td a { text-decoration:none; color:#f29c97;}

.Calendar .dateTable .cal-heder-yyyy-mm { color:black; font-weight:bold;}
.Calendar .dateTable .cal-header-bg{ background:rgba(240,240,240,1);}
.Calendar .dateTable .cal-header-bg td { vertical-align:middle;}
.Calendar .dateTable .cal-month-inc {width:100%; table-layout:fixed; }
.Calendar .dateTable .cal-month-inc th{ color:black;}
.Calendar .dateTable .cal-month-inc th.holiday{ color:Crimson;}
.Calendar .dateTable .cal-month-inc td{ background:white; padding:0;}
.Calendar .dateTable td.cal-heder-yyyy-mm{ padding:10px 0;}
.Calendar .dateTable .cal-month-inc td.today{border:1px solid Crimson;}
.Calendar .dateTable .cal-month-inc td.current{ background:white;}
.Calendar .dateTable .cal-month-inc td.not-current-month a{ color:rgba(0,0,0,0.2)}
.Calendar .dateTable ul,
.Calendar .dateTable li { padding:0; margin:0; list-style:none; float:left;}
.Calendar .dateTable li { padding:5px; padding:0 5px;}
.Calendar .dateTable ul.Type { float:right;}
 
.Calendar .dateTable .cal-month ul.CaldayList { float:none; display:block;}
.Calendar .dateTable .cal-month ul.CaldayList li { float:none; line-height:20px; padding:0; margin-top:5px;}
.Calendar .dateTable .cal-month ul.CaldayList li span.Time { display:block; line-height:30px;}
.Calendar .dateTable .cal-month ul.CaldayList li a { text-align:left; padding:5px;}
.Calendar .dateTable .cal-month ul.CaldayList li a:nth-of-type(even) { background:rgba(0,0,0,0.05);}

.Calendar .calendarform { width:100%; height:auto; overflow:hidden; max-width:470px; border:1px solid rgba(0,0,0,0.2); margin:0 auto; padding:20px;
/*圓角*/
-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
.Calendar .calendarform ul { padding:0; margin:0; list-style:none; width:100%; height:auto; overflow:hidden; margin:0 auto; margin-bottom:10px;}
.Calendar .calendarform ul * { padding:0; margin:0; list-style:none;}
.Calendar .calendarform ul li { width:100%; height:auto; overflow:hidden; position:relative; padding-left:90px; margin:10px 0;}
.Calendar .calendarform ul li > div:not(.calendarform_box) { width:90px; height:30px; line-height:30px; font-weight:normal; text-align:left; position:absolute; top:0; left:0; }
.Calendar .calendarform ul li .calendarform_box { width:100%; height:auto; overflow:hidden; float:left; min-height:30px; line-height:30px;}
.Calendar .calendarform ul li .calendarform_box input { width:100%; height:30px; line-height:30px; padding:0 5px; border:1px solid rgba(0,0,0,0.2); outline:none;}
.Calendar .calendarform ul li .calendarform_box input#txtCaptchacode { max-width:60px; float:left;}
.Calendar .calendarform ul li .calendarform_box .Captcha { width:100%; max-width:80px; height:auto; overflow:hidden; padding:5px 0; display:block; float:left; margin-left:5px;}
.Calendar .calendarform ul li .calendarform_box .Captcha img { max-width:100%; height:auto;}
.Calendar .calendarform ul li .calendarform_box a { width:100%; max-width:80px; height:30px; line-height:30px; display:block; float:left; margin-left:5px; text-decoration:none;}

.Calendar .EventList_Table thead tr th { background:rgba(0,0,0,0.05); padding:10px; background:#f29c97; color:#fff;}
.Calendar .EventList_Table tbody tr:nth-child(even) { background:rgba(0,0,0,0.05);}

/*活動報名------------------------*/
.event .event-form { width:100%; padding:20px; overflow:hidden; line-height:25px; padding:0;}
.event .event-form * { padding:0; margin:0; list-style:none;}
.event .event-form h2  { font-weight:normal;  background:rgba(0,0,0,0.6); background:#f29c97; color:white; padding:10px; }
.event .event-form ul { width:100%; height:auto; overflow:hidden; border:1px solid rgba(0,0,0,0.05);}
.event .event-form ul li{ width:100%; height:auto; overflow:hidden; border-bottom:1px dotted rgba(0,0,0,0.05); position:relative; padding-left:130px; min-height:50px;}
.event .event-form ul li:nth-of-type(odd){ background:rgba(0,0,0,0.05);}
.event .event-form ul li > div:not(.form-box) { height:50px; line-height:50px; width:130px; overflow:hidden; font-weight:normal; position:absolute; left:0; top:0;  z-index:2; padding-left:10px;}


.event .event-form #signup-content ul li{ padding-left:360px;}
.event .event-form #signup-content ul li > div:not(.form-box) { width:360px;}

.event .event-form ul li .form-box { width:100%; height:auto; overflow:hidden; padding:0 10px; min-height:50px;}
.event .event-form ul li .form-box * { float:left; max-width:100%; margin:10px 0;}
.event .event-form ul li .form-box input[type="radio"] { margin:12.5px 5px;}
.event .event-form ul li .form-box input[type="text"] { margin-right:10px; padding:0 5px;  font-family:"微軟正黑體"}
.event .event-form ul li .form-box input[type="text"] + .ui-datepicker-trigger { margin:17px 0; margin-right:5px;}
.ui-datepicker-title { width:calc( 100% - 66px );}
.event .event-form ul li .form-box textarea { display:block; width:100%; padding:5px;  font-family:"微軟正黑體"}
.event .event-form ul li .form-box input#txtCaptchacode { max-width:70px; float:left;}
.event .event-form ul li .form-box #imgCaptcha ~ a { line-height:25px; display:inline-block; float:left; margin:10px 0;}
.event .event-form ul li .form-box span { margin:10px 5px 10px 0; min-height:30px; line-height:30px;}
.event .event-form ul li .form-box span * { margin:0;}
.event .event-form ul li .form-box span input[type="text"] { margin-right:0;}
.event .event-form ul li .form-box select { height:25px; line-height:23px; font-family:"微軟正黑體"; font-size:20px; margin-right:5px;}
.event .event-form ul li input { display:inline; margin:0; height:25px; line-height:25px;}
.event .event-form ul li a { font-size:0.8rem; display:inline-block; text-decoration:none; color:white; background:black; background:#f29c97; padding:0 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.event .event-form ul li a:hover { background:black;}
.event .event-form p.Center { text-align:center; margin:20px 0 0 0;}
.event .event-form .Btn_Two { margin:20px auto;}
.event  #signup-content { margin-top:40px;}
.event .event-form ul.InfoUl li:nth-of-type(odd){ background:white;}
.event .event-form ul.InfoUl li { border-top:1px solid rgba(0,0,0,0.05); border-bottom:none;}
.event .event-form ul.InfoUl li:nth-child(1) { border:none;}
.event .event-form ul.InfoUl li:after { content:''; display:block; width:130px; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.05); z-index:0;}

.event .Event_prv { width:100%; height:auto; overflow:hidden; margin:0 auto;}
.event .Event_prv .Event_prv_btn { width:100%; height:auto; overflow:hidden; margin:0 auto;}
.event .Event_prv .Icon_EventCancel { width:100%; height:auto; overflow:hidden; float:left;}
.event .Event_prv .Icon_EventCancel a{ display:block; width:100%; height:35px; text-indent:-9999px; background:url(../Images/Layout/UI/Calendar/Icon_EventCancel.gif) 0 0 no-repeat; margin:0 auto;-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain; text-indent:0; background:none; border:1px solid rgba(240,240,240,1); text-decoration:none; text-align:center; color:rgba(100,100,100,1); margin-bottom:10px; line-height:35px;
/*基礎動畫設定*/
-webkit-transition:all .5s, -webkit-transform .5s; transition:all .5s, transform .5s;
/*圓角*/
-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
.event .Event_prv .Icon_EventCancel a:hover{ background:url(../Images/Layout/UI/Calendar/Icon_EventCancel_o.gif) 0 0 no-repeat;-moz-background-size:contain;-webkit-background-size:contain;-o-background-size:contain;background-size:contain; text-indent:0; background:none;border:1px solid rgba(100,100,100,1);}

.incCalendarTable {table-layout:fixed;width:140px;height:30px; text-align:center;}

.fc div { width:auto;}
.fc .fc-button-primary { background:#ef857d; border:0;}
.fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:hover{ background:#f29c97;}
.fc-daygrid-dot-event { display:block;}
.fc .fc-button .fc-icon { line-height:1em;}
.fc .fc-toolbar-title { font-size:1em;}

.fc .fc-daygrid-body-balanced .fc-daygrid-day-events { position:static;}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events .fc-daygrid-event { white-space:normal;}


.event .event-form .btn-wrap { margin-top:20px;}
.event .event-form .btn-wrap .btn { padding:0 10px; margin-right:5px; margin-bottom:10px;}

@media only screen and (min-width:0px) and (max-width:768px) {
	/*行事曆大事件及線上預約------------------------*/
.Calendar th { padding:5px;}
.Calendar td { padding:5px;}
.Calendar table[bgcolor="rgba(240,240,240,1)"] td { padding:0;}
.Calendar table[bgcolor="rgba(240,240,240,1)"] td td { padding:0;}
.Calendar table[bgcolor="rgba(240,240,240,1)"] td td td { padding:5px;}

.event .event-form #signup-content ul li { padding-left:0;}
.event .event-form #signup-content ul li > div:not(.form-box) { width:100%; position:static; left:auto; top:auto; background:rgba(0,0,0,0.05); height:auto; line-height:30px; padding:10px;}
.event .event-form #signup-content ul li:nth-of-type(odd) { background:none;}

.fc .fc-button,
.fc .fc-toolbar-title{ font-size:12px;}

.fc .fc-scrollgrid table { font-size:14px;}
	}
	
@media only screen and (min-width:0px) and (max-width:540px) {
	/*行事曆大事件及線上預約------------------------*/
.Calendar .Event_prv .Event_prv_btn { max-width:150px; }
.Calendar .Event_prv .Icon_EventAppointments { width:100%; margin:5px auto;}
.Calendar .Event_prv .Icon_EventCancel { width:100%; margin:5px auto;}
.Calendar .calendarform ul li > div:not(.calendarform_box) { position:static; width:100%; text-align:center; background:rgba(0,0,0,0.05);}
.Calendar .calendarform ul li .calendarform_box { padding:10px;}
.Calendar .calendarform ul li { padding-left:0;}
	.fc .fc-scrollgrid table { font-size:12px;}
	}

@media only screen and (min-width:0px) and (max-width:480px) {
	.fc .fc-toolbar { display:block;}
	.fc .fc-toolbar > .fc-toolbar-chunk:first-child { width:120px; float:left; line-height:30px;}
	.fc .fc-toolbar > .fc-toolbar-chunk:first-child > * { float:left;}
	.fc .fc-toolbar > .fc-toolbar-chunk:first-child + .fc-toolbar-chunk { width:calc( 100% - 120px ); float:left; line-height:30px;}
	.fc .fc-toolbar > .fc-toolbar-chunk:first-child + .fc-toolbar-chunk + .fc-toolbar-chunk { width:100%; overflow:hidden;}
	}

@media only screen and (min-width:0px) and (max-width:360px) {
	.event .event-form ul li { padding-left:0;}
	.event .event-form ul li > div:not(.form-box) { width:100%; position:static; left:auto; top:auto; background:rgba(0,0,0,0.05);}
	.event .event-form ul li:nth-of-type(odd) { background:none;}
	.event .event-form ul.InfoUl li:after { display:none;}
	.event .event-form ul li .form-box span { font-size:14px;}
		.fc .fc-scrollgrid table { font-size:10px;}
	}