@charset "utf-8";
/* CSS Document */

/*--trimtlist page--*/
.procurement {display:block; width:100%;}
.procurement_table {width:100%;}
.procurement_table th,.procurement_table td { padding:10px 5px; text-align: center; }
.procurement_table th {
    position: relative;
    color: #4bb461;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: #4bb461;
    background-color: #f4f4f4;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #c9c9c9;
    text-align: center;
    vertical-align: middle;
    padding-right: 15px;
}
.procurement_table th:after {content:'∣'; position: absolute; right:0; vertical-align: top; margin-top: -2px;}
.procurement_table th:last-child:after {display: none;}
.procurement_table td {border-bottom: 1px solid #eeeeee; vertical-align:middle;}

.procurement_table td:nth-child(1){width:5em;}
.procurement_table td:nth-child(2){width:5em;}
.procurement_table td:nth-child(3){}
.procurement_table td:nth-child(4){width:7em;}
.procurement_table td:nth-child(5){width:5em;}

.procurement_table td a {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    color: #585858;
    text-decoration: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width:30em;
    text-align: left;
    vertical-align:middle;
}

.procurement_table td a:before {
    content: '→';
    display: inline-block;
    width:15px;
    height:15px;
    line-height: 15px;
    color:#fff;
    font-size: 80%;
    background-color: #8ab726;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px; 
    margin-right: 5px;
}

.procurement_table td:nth-child(2) span {
    float:left;
    min-width:90px;
    background-color: #ffa200;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    text-align: center;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 3px;
}

@media screen and (min-width: 900px) and (max-width: 1200px) {
    .procurement_table td a {width:15em;}
}

@media screen and (min-width: 767px) and (max-width: 900px) {.procurement_table td a {width:10em;}}
@media screen and (max-width: 768px) {.procurement_table td a {width:15em;}}
@media screen and (max-width: 700px) {.procurement_table td:nth-child(1),.procurement_table th:nth-child(1){display:none;}}
@media screen and (max-width: 630px) {
    .procurement_table td:nth-child(5),.procurement_table th:nth-child(5){display:none;}
    .procurement_table th:nth-child(4):after {display:none;}
}
@media screen and (max-width: 550px) {
    .procurement_table tr:first-child {display:none;}
    .procurement_table tr td {float:left; border:none; width:100%;}
    .procurement_table td a { display: block; width:100%; max-width: 25em; overflow: hidden;}
    .procurement_table td:nth-child(4) {display:none;}
    .procurement_table td:nth-child(3) {border-bottom: 1px solid #eeeeee; margin-bottom: 10px;}
}

@media screen and (max-width: 480px) {.procurement_table td a {max-width: 20em;}}
@media screen and (max-width: 380px) {.procurement_table td a {max-width: 15em;}}

/*--trimtlist page end--*/

/*--reservation page01 start--*/

.reservation-title {background: #779ebe; display: inline-block; line-height: 60px; color:#fff; padding:0 30px; position: relative; margin-left: 61px; font-size: 1.2em; margin-bottom: 50px;}

.reservation-title:before {
    content: '';
    background-color:#486175;
    width:60px;
    height:60px;
    display: block;
    position: absolute;
    left:-61px;
    background-image: url(../../images/reservation-arrow.svg);
}
.reserve-choose {
    width:100%; 
    background-color: #ffffff; 
/*  display: block; */
/*  overflow: hidden;*/
    display: -webkit-flex;
    display: flex;
}

.reserve-choose div {-webkit-flex: 1; flex: 1; margin:0px 30px;}

.reserve-choose a {
    display: inline-block;
    color:#486175;
    width:186px;
    height:186px;
    background-color:#eeeeee;
    -webkit-border-radius: 93px;
    -moz-border-radius: 93px;
    border-radius: 93px;
    position: relative;
    overflow: hidden;
    outline: none;
    
    -moz-box-shadow:2px 0px 2px rgba(20%,20%,40%,0.3) inset;
    -webkit-box-shadow:2px 0px 2px rgba(20%,20%,40%,0.3) inset;
    box-shadow:2px 0px 2px rgba(20%,20%,40%,0.3) inset;
}

.reserve-choose a:after {
    position: absolute;  
    content: '';
    display: block;
	width: 0;
	height: 0;
    margin-top: -20px; 
	border-left: 83px solid transparent;
	border-right:83px solid transparent;
	border-top: 120px solid #486175;  
    transform-origin:93px 120px;
    transform:rotate(30deg);
    
}

.reserve-choose a:hover:after,.reserve-choose a:focus:after { 
    border-left: 113px solid transparent;
	border-right:113px solid transparent;
	border-top: 150px solid #486175;
}

.reserve-choose a:before {
    position: absolute;
    content: '';
    display: block;

	width: 0;
	height: 0;
    
    margin-top: -20px;
    
	border-left: 93px solid transparent;
	border-right:93px solid transparent;
	border-top: 120px solid #d2dde5;
    
    transform-origin:93px 60px;
    transform:rotate(0deg); 
}

.reserve-choose a:hover:before,.reserve-choose a:focus:before { 
    
    border-left: 63px solid transparent;
	border-right:63px solid transparent;
	border-top: 60px solid #d2dde5;
    
}

.reserve-choose a span { 
    display: block;
    width:166px;
    height:166px;
    background-color:#ffffff;
    -webkit-border-radius: 83px;
    -moz-border-radius: 83px;
    border-radius: 83px;
    position: absolute;
    z-index: 2;
    top:10px;
    left:10px;
    
    padding-top: 60px;
    line-height: 140%;
    font-size: 1.2em;
    text-align: center;
    
    -moz-box-shadow:2px 0px 2px rgba(20%,20%,40%,0.3);
    -webkit-box-shadow:2px 0px 2px rgba(20%,20%,40%,0.3);
    box-shadow:2px 0px 2px rgba(20%,20%,40%,0.3);
}

.reserve-choose a span i {font-size: 0.8em; font-style: italic;}
.reserve-choose a:hover,.reserve-choose a:focus { 
    background-color: #c8ced1;
}

 .reserve-choose a:hover span { 
    display: block;
    width:160px;
    height:160px;
    background-color:#ffffff;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
    position: absolute;
    z-index: 2;
    top:13px;
    left:13px;
    
    padding-top: 57px;
    
    -moz-box-shadow:2px 0px 2px rgba(20%,20%,40%,0.4);
    -webkit-box-shadow:2px 0px 2px rgba(20%,20%,40%,0.4);
    box-shadow:2px 0px 2px rgba(20%,20%,40%,0.4);
     
     
     
    

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+27,ececec+76 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ffffff 27%, #ececec 76%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ffffff 27%,#ececec 76%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ffffff 27%,#ececec 76%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     -moz-text-shadow:1px 1px rgb(100%, 100%, 100%);
-webkit-text-shadow:1px 1px rgb(100%, 100%, 100%);
text-shadow:1px 1px rgb(100%, 100%, 100%);
        
    
    -webkit-transition: all 0.2s ease;                  
    -moz-transition: all 0.2s ease;                 
    -o-transition: all 0.2s ease;   
    -ms-transition: all 0.2s ease;          
    transition: all 0.2s ease; 
} 

/*--pie-color--*/
.pie01 a {color:#486175;}
.pie01 a:after {border-top: 120px solid #486175;}
.pie01 a:hover:after,.pie01 a:focus:after {border-top: 150px solid #486175;}
.pie01 a:before {border-top: 120px solid #d2dde5;}
.pie01 a:hover:before,.pie01 a:focus:before {border-top: 60px solid #d2dde5;}
.pie01 a:hover,.pie01 a:focus { background-color: #c8ced1;}

.pie02 a {color:#2caece;}
.pie02 a:after {border-top: 120px solid #2caece;}
.pie02 a:hover:after,.pie02 a:focus:after {border-top: 150px solid #2caece;}
.pie02 a:before {border-top: 120px solid #b0dfeb;}
.pie02 a:hover:before,.pie02 a:focus:before {border-top: 60px solid #b0dfeb;}
.pie02 a:hover,.pie02 a:focus { background-color: #c8ced1;}


.pie03 a {color:#8fb328;}
.pie03 a:after {border-top: 120px solid #a4ca39;}
.pie03 a:hover:after,.pie03 a:focus:after {border-top: 150px solid #a4ca39;}
.pie03 a:before {border-top: 120px solid #daf491;}
.pie03 a:hover:before,.pie03 a:focus:before {border-top: 60px solid #daf491;}
.pie03 a:hover,.pie03 a:focus { background-color: #c8ced1;}

@media screen and (max-width: 1200px) {
    .reserve-choose div {-webkit-flex: 1; flex: 1; margin:0;}
    .reservation-title {margin-bottom: 30px;}
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    
    .reserve-choose a {
        width:176px;
        height:176px;
        -webkit-border-radius: 88px;
        -moz-border-radius: 88px;
        border-radius: 88px;
    }
    
    .reserve-choose a span {  
        width:156px;
        height:156px;
        -webkit-border-radius: 78px;
        -moz-border-radius: 78px;
        top:10px;
        left:10px; 
        padding-top: 56px;
    }
    
    .reserve-choose a:hover span { 
        width:146px;
        height:146px;
        -webkit-border-radius: 73px;
        -moz-border-radius: 73px;
        border-radius: 73px; 
        top:15px;
        left:15px;
        padding-top: 52px;   
    }  
}


@media screen and (max-width: 605px) {

    .reserve-choose a {
        width:156px;
        height:156px;
        -webkit-border-radius: 78px;
        -moz-border-radius: 78px;
        border-radius: 78px;
    }
    
    .reserve-choose a span {  
        width:136px;
        height:136px;
        -webkit-border-radius: 68px;
        -moz-border-radius: 68px;
        border-radius: 68px;
        top:10px;
        left:10px;
        padding-top: 48px;
        font-size: 1em;
    }
    
    .reserve-choose a:hover span { 
        width:126px;
        height:126px;
        -webkit-border-radius: 63px;
        -moz-border-radius: 63px;
        border-radius: 63px; 
        top:15px;
        left:15px;
        padding-top: 43px;   
    }  
    
}

@media screen and (max-width: 515px) {
    
    .reservation-title {font-size: 0.9em; width:calc(100% - 60px);}
    .reserve-choose div {margin:0 5px;}
    
    .reserve-choose a,.reserve-choose a span {
        position: static;
        width:100%;
        height:auto;
        padding:10px;
        -webkit-border-radius:0;
        -moz-border-radius: 0;
        border-radius:0;
        overflow: visible;
        font-size: 0.9em;
    }
    
    .reserve-choose a span { padding:10px 0;}
    
    .reserve-choose a:hover span { 
        position: static;
        width:auto;
        height:auto;
        -webkit-border-radius:0;
        -moz-border-radius: 0;
        border-radius: 0; 
        padding:10px 0;
    } 
    .pie01 a,.pie01 a:hover,.pie01 a:focus { background-color: #486175;}
    .pie02 a,.pie02 a:hover,.pie02 a:focus { background-color: #2caece;}
    .pie03 a,.pie03 a:hover,.pie03 a:focus { background-color: #a4ca39;}
    
    .reserve-choose a:before,.reserve-choose a:after {display: none;}
}

@media screen and (max-width: 485px) { .reserve-choose a span i {display: none;} }
@media screen and (max-width: 360px) { 
    .reservation-title {font-size: 0.9em; width:calc(100% - 5px); margin-left: 0px;}
    .reservation-title:before {
    content: '';
    background-color:#486175;
    width:5px;
    height:60px;
    display: block;
    position: absolute;
    left:0px;
    background-image:none;
    }
}

/*--reservation page01 end--*/

/*--reservation page02 page07共用 start--*/

.reservation-color,.reservation-color01,.reservation-color02,.reservation-color03 {padding: 1rem;}

.reserve-agree { border:7px solid #eeeeee; padding: 2em; color:#282828; line-height: 1.5em;}
.reserve-agree a {color:#6091ff; text-decoration: underline;}
.agree-check {width:0; height:0; margin-left:-5px; padding: 0;}
.agree-check:focus ~ label,.agree-check:checked ~ label {color:#5780a2;}
.agree-check ~ label {vertical-align: middle; cursor: pointer;}
.agree-check ~ label:before {content: ''; display: inline-block; width:19px; height:19px; background: url(../../images/agree-check01.svg) no-repeat left top; margin-right: 7px; vertical-align:text-bottom; }
.agree-check:checked ~ label:before {background-position: left bottom;}

.reserve-btn {  
    padding:50px 0 30px 0;
    text-align: center;
    display: block;
    overflow: hidden;
}

.reserve-btn input[type="submit"],.reserve-btn input[type="button"],.reserve-btn a,.reserve-btn input,.reserve-btn a 
{
    background-color: #486175;
    color: #FFFFFF;
    border: 1px none #FFFFFF;
    margin: 5px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    height: 43px;
    display: inline-block;
    vertical-align: middle;
}

.reserve-btn input[type="submit"]:hover,.reserve-btn input[type="button"]:hover,.reserve-btn a:hover,.reserve-btn a:hover {
	background-color: #779ebe;
	color: #ffffff;
}

@media screen and (max-width: 1200px) {
    .reserve-btn { padding:30px 0 10px 0;}
    }
@media screen and (max-width: 600px) {
    .reserve-agree {padding: 1em;}
}

/*--reservation page02 page07 end--*/

/*--reservation page03 start--*/
.reserve-date {display: block;}
.reserve-space {margin-bottom:30px;}
.reserve-space div {display:block; margin:10px;}
.reserve-space h5 {display: inline-block;}
.reserve-space select {
    min-height: 2.5em;
    padding-left: 1em;
	padding-right:1em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    border: 1px solid silver;
    outline: none;
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    position: relative;
    vertical-align: middle;
}
.reserve-space select::-ms-expand {display:none;}
.reserve-space select {
	background-image: url(../../images/select-arrow.svg);
	background-repeat: no-repeat;
	background-position: right center;
	-webkit-appearance: none;
	padding-right: 20px;
}
.reserve-space input[type="submit"] {
    background-color: #486175;
    color: #FFFFFF;
    border: 1px none #FFFFFF;
    margin: 5px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    height: 37px;
    display: inline-block;
    vertical-align: middle;
}
.reserve-space input[type="submit"]:hover { background-color:#779ebe; }

.reserve-calendar {width:100%;}
.reserve-calendar th {
    font-family: "微軟正黑體";
    color: white;
    background: #486175;
    border: 1px solid #547290;
    line-height: 40px;
    width:14.25%;
}
.reserve-calendar td {height:80px; border: 1px solid #cbd3db; /* background-color: #f6f9fb; */ text-align: center;}
.reserve-calendar td div {padding: 10px; text-align: left;}
.reserve-calendar td:first-child div,.reserve-calendar td:last-child div {color:#d80000;}
.reserve-calendar .order {
    text-align: center;
    background-color: #717171;
    color: #FFFFFF;
    border: 1px none #FFFFFF;
    margin: 5px 5px 8px 5px;
    padding: 5px 10px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    height: 33px;
    display: inline-block;
    vertical-align: middle;
    font-size:0.9em;
}
.reserve-calendar .order:hover {color:#ffffff; background-color:#779ebe; }

.reserve-calendar .close, .reserve-calendar .explain {
    font-size: 0em;
    display: inline-block;
    background-image: url(../../images/reserve-date-icon.svg);
    background-repeat: no-repeat;
    margin: 0px 0px 8px 0px;    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    width:30px;
    height:30px;
    border: none;
}
.reserve-calendar .close {background-color: #ce4747; background-position: center top;}
.reserve-calendar .explain {background-color: #2caece; background-position: center center;}
.text-explain span {display: block;padding: 5px 0px;}
.text-explain span.blue {color:#17afff; }

@media screen and (min-width: 768px) and (max-width: 900px) {
    .reserve-calendar .order {font-size: 0.75em; padding: 5px 8px; }
}
@media screen and (max-width: 680px) {
    
    .reserve-calendar .order {font-size: 0.75em; padding: 5px 8px; }
}
@media screen and (max-width: 580px) { 
    .reserve-calendar .order {padding: 3px; height:auto;}
    .reserve-calendar td div {padding: 5px; text-align: center;}
}
@media screen and (max-width: 510px) {
    .reserve-calendar td {height:auto;}
    .reserve-space h5 {display: block; padding: 15px 0;}
    .reserve-calendar .order {
         
    font-size: 0em;
    background-image: url(../../images/reserve-date-icon.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    margin: 0px 0px 8px 0px;    
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    width:30px;
    height:30px;
        
    }
}

@media screen and (max-width: 360px) {
    .reserve-space input[type="submit"] { padding:0 15px;}
}

/*--reservation page03 end--*/

/*--reservation page04-06 start--*/

.reserve-require mark,.reserve-progress mark,.reservation-mark { background-color: transparent; color:red;}
.require-table {width:100%;}
.require-table th,.require-table td {
    padding:10px; 
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #999;
    vertical-align: middle;
}

.require-table th {width:12em; padding-left: 0; vertical-align: top;}

.require-table th span,
.require-table th label {
    background-color: #486175;
    line-height: 2.25em;
    padding-right: 2.5%;
    padding-left: 2.5%;
    display: block;
    color: #FFF;
}

.require-table input[type="text"],.require-table input[type="submit"],.reserve-progress input[type="text"] {
    height: 2.375em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding:0 0.625em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    border: 1px solid silver;
    outline: none;
    background: #fff;
    /* appearance: none; */
    -webkit-appearance: none;
    position: relative; 
}

.require-table select {
    height: 2.375em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 0.625em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    border: 1px solid silver;
    outline: none;
    background: #fff;
   /*  appearance: none; */
    -webkit-appearance: none;
    position: relative;
    padding-right: 30px;
    background: url(../../images/select-arrow.svg) no-repeat right 10px;
}

.require-table textarea {
    width:100%;
    vertical-align:text-top;
}

.require-table input[type="text"],.require-table input[type="submit"],.require-table select,.require-table textarea,.reserve-progress input[type="text"] {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.require-table td span.note {color:#818181;}


/*時段css新增*/
/*.require-time {display: block;}

.require-time-ul li {display: block;line-height: 2.25em;}
.require-time-ul li i:before {content: '場次：';}
.require-time-ul li time:before {content: '時段：';}
.require-time-ul li span:before {content: '標題：';}
.require-time-ul li mark:before {content: '剩餘人數：';}
.require-time-ul li i,.require-time-ul li time,.require-time-ul li span,.require-time-ul li mark {display: block;padding-left: 20px;}
.require-time-ul li i {background-color:#ececec;color:#17afff;}

@media screen and (max-width: 500px) {
    .require-table th {float:left; border: none; padding-bottom: 5px; padding-top: 15px;}
    .require-table td {float:left; width:100%; padding-top: 5px; padding-bottom: 15px;}
    .require-table td span.note {display:block; padding-top: 10px;}
    .require-table th span {border-left: 5px solid #2caece;}
    
}*/

.require-times {

}

.require-times li  {
    color:#ffffff; 
    padding:0 3px;
    float: left;
}
.require-times li span {display: block; font-size: 1rem;}
.require-times li span:first-child {padding:3px 0;}
.require-times li input[type="checkbox"] {
    width:0;height;0;
    position: absolute;
}
.require-times li label {
    display: inline-block;
    background-color: #779ebe;
    color:#fff;
    font-size: 0.9rem;
    line-height:31px;
    padding: 0 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin:1px;
    margin-top: 0;
    cursor:pointer;
    padding-left: 30px; 
    position: relative;
    user-select: none;
}
.require-times li label:before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 17px;
    height:17px;
    background: url(../../images/rent-checks.svg);
    left:7px; top:7px;
}

.require-times li input:checked ~ label {background-color: #d4739e;}
.require-times li input:checked ~ label:before {background: url(../../images/rent-check.svg);}
.require-times li input:focus ~ label {text-decoration: underline;}


/*--reservation page04-06 end--*/

/*--reservation page08--*/
.reserve-progress { border:7px solid #eeeeee; padding: 2em; color:#282828; line-height: 1.5em;}
.reserve-progress li {margin:7px 0;}
.reserve-progress input[type="text"] {width:100%;max-width: 300px;}
.reserve-progress li span {display: inline-block;}
.reserve-progress li i {color: red;}
.reservation-mark {display: block;margin-bottom: 15px;}

.reservation-result {display: block;}
.reservation-result p {display: block;background-color:rgb(51, 153, 255); padding:1em; color:#ffffff;}
.reservation-result ul {border:7px solid #eeeeee; padding: 2em;}
.reservation-result ul li {margin:1px 0 0 0;background-color: #f4f4f4;padding-right: .5em; line-height: 1.2em;}
.reservation-result ul li span {padding: 1em 0 1em 1em;display: inline-block;}
.reservation-result ul li span:first-child {color:rgb(51, 153, 255);}

.reserve-contact-info {
    border:7px solid #eeeeee; 
    padding: 2em; color:#282828; 
    line-height: 1.5em;
    margin-top: 2em;
}
.reserve-contact-info h4 {font-size: 1.2em;color: #5ea4f4;padding-bottom: 8px;}
.reserve-contact-info li {padding: 7px 0;}
.reserve-contact-info li i {margin-right: 5px;}
.reserve-contact-info mark {background-color: transparent;color:#eb4667;display: block;}

@media screen and (max-width: 500px) {
    .reserve-progress li span {display: block;}
    .reserve-progress,.reservation-result ul {padding: 1em;}
    .reservation-result ul li span {display: block;padding: .5em 0 .5em 1em;}
    .reserve-contact-info li i {display: block;}
}
/*--reservation page08 end--*/


/*--reservation-color--*/

.reservation-color02 .reservation-title {background: #2caece;}
.reservation-color02 .agree-check:focus ~ label,.reservation-color02 .agree-check:checked ~ label {color:#2caece;}
.reservation-color02 .agree-check ~ label:before { background: url(../../images/agree-check02.svg) no-repeat left top; }
.reservation-color02 .agree-check:checked ~ label:before {background-position: left bottom;}
.reservation-color02 .reserve-calendar th {background: #2caece; border: 1px solid #8fdef2;}
.reservation-color02 .reserve-btn input[type="submit"]:hover,.reservation-color02 .reserve-btn input[type="button"]:hover,.reservation-color02 .reserve-btn a:hover,.reservation-color02 .reserve-btn a:hover {background-color: #2caece; color: #ffffff;}
.reservation-color02 .reserve-space input[type="submit"]:hover,
.reservation-color02 .reserve-calendar .order:hover,
.reservation-color02 .require-table th span { background-color: #2caece; }

.reservation-color03 .reservation-title {background: #a4ca39;}
.reservation-color03 .reservation-title:before {background-color: #48755f;}
.reservation-color03 .agree-check:focus ~ label,.reservation-color03 .agree-check:checked ~ label {color:#a4ca39;}
.reservation-color03 .agree-check ~ label:before { background: url(../../images/agree-check03.svg) no-repeat left top; }
.reservation-color03 .agree-check:checked ~ label:before {background-position: left bottom;}
.reservation-color03 .reserve-calendar th {background: #a4ca39; border: 1px solid #c1f28f;}
.reservation-color03 .reserve-calendar td {border: 1px solid #d5ebbf;}
.reservation-color03 .reserve-btn input[type="submit"],.reservation-color03 .reserve-btn input[type="button"],.reservation-color03 .reserve-btn a,.reservation-color03 .reserve-btn input,.reservation-color03 .reserve-btn a,.reservation-color03 .reserve-space input[type="submit"]{background-color: #48755f;}
.reservation-color03 .reserve-btn input[type="submit"]:hover,.reservation-color03 .reserve-btn input[type="button"]:hover,.reservation-color03 .reserve-btn a:hover,.reservation-color03 .reserve-btn a:hover {background-color: #a4ca39; color: #ffffff;}
.reservation-color03 .reserve-space input[type="submit"]:hover,
.reservation-color03 .reserve-calendar .order:hover,
.reservation-color03 .require-table th span { background-color: #a4ca39; }

/*--reservation-color end--*/

/*--ecology_list--*/

.ecology-wrap,.ecology {display: block;overflow: hidden; margin:10px 0;}
.ecology-wrap h4 {display: block;margin:0 0 20px 0;}
.ecology-wrap h4 span {
    display: inline-block;
    font-size: 1.2em;color:#8a6452;
    border-bottom: 1px solid #8a6452;
    padding:8px 5px 8px 30px;
    background: url(../../images/ecology_icon.gif)5px 13px no-repeat;
    position: relative;
}
.ecology-wrap h4 span::first-letter {font-size: 1.3em;color:#8ebd48;}

.ecology-wrap h4 span:before {
    content: '';
    position: absolute;
    bottom: -1px;
    left:0;
    width:25px;
    height:1px;
    background-color: #a4ca39;
}
.ecology-ul {margin-left: -2%;}
.ecology-ul li {float:left; width:calc((100% - 8%)/ 4 );margin:0 0 2% 2%;}
.ecology-ul li a {display: inline-block;position: relative; padding: 10px;border: 1px solid #ececec; width:100%; overflow:hidden;}
.ecology-ul li a figure {width:100%;overflow: hidden;position: relative;}
.ecology-ul li a figure img {
    max-width:170%;
    margin-left: -35%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.ecology-ul li a:hover figure img,.ecology-ul li a:focus figure img  {
    max-width:170%;
    margin-left: -35%;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.ecology-ul li a figcaption {
    position: absolute;
    top:0;
    left:0;
    z-index: 99;
    width:100%;
    height:100%;
    padding-top:calc(50% - 0.5em);
    text-align: center;
    color:#ffffff;
    background-color:rgba(0,0,0,0.7);
    background-image: url(../../images/ecology-mask.png);
    background-size: 200%;
    font-size: 1.2em;
    opacity: 0;
}
.ecology-ul li a:hover figcaption {opacity: 1;background-size: 100%;}


/*--line*--*/
.ecology-ul li a span {background-color: #84b232; position: absolute;box-sizing: content-box; opacity: 0.4;}
.ecology-ul li a:hover span {opacity: 1;}

.linel1 {left: -1px; bottom: 24px; width: 1px; height:0;}
.linel2 {left: -1px; top: 24px; width: 1px; height:0;}
.liner1 {right: -1px; bottom: 24px; width: 1px; height:0;}
.liner2 {right: -1px; top: 24px; width: 1px; height:0;}
.linet0 {left: -1px;top: -1px;width: 0;height: 1px;}
.lineb0 {right: -1px; bottom: -1px; width: 0; height: 1px;}

.ecology-ul li a:hover .linel1 {bottom: 0px; height:calc(100%/1.14);}
.ecology-ul li a:hover .linel2 {top: 0px; height:calc(100%/1.14);}

.ecology-ul li a:hover .liner1 {bottom: 0px; height:calc(100%/1.14);}
.ecology-ul li a:hover .liner2 {top: 0px; height:calc(100%/1.14);}

.ecology-ul li a:hover .linet0 {width: 100%; padding-left: 2px;}
.ecology-ul li a:hover .lineb0 {width: 100%; padding-left: 2px;}
/*--line*--*/ 

@media screen and (max-width:1200px) {
    .ecology-ul li a figcaption {font-size: 1em;}
}
@media screen and (min-width:768px) and (max-width:1002px) {
    .ecology-ul li a figcaption {font-size: 0.85em;}
}
@media screen and (max-width:600px) {
    .ecology-ul li {width:calc((100% - 8%)/ 2 );margin:0 0 10px 10px;}
}

/*--ecology_list end--*/

/*--ecology_detail--*/
.ecology-content {display: block; line-height: 1.5; color:#3b3b3b;}
.ecology-content a {color:#00a4e0;text-decoration: underline;}
.ecology-content a:hover {color:#0070e0;}
/*編輯器*/
.ecology-content ol,.ecology-content ul {padding-left: 1.5em; list-style-type: decimal;}
.ecology-content ul,.ecology-content ul li,.ecology-content ol li,.ecology-content ol li {list-style-type: inherit;}
/*--ecology_detail end--*/

/*--blog_list--*/

.blog-wrap {display: block;}
.blog-search {display:block;background-color: #ebebeb;padding: 2em;overflow: hidden;}
.blog-search h4 {font-size: 1.2em;display: block;}
.blog-search ul {margin: 1.5em 0;float:left;}
.blog-search ul li {float:left;width:50%;padding:5px 0;color:#3cc4fc;}
.blog-search ul li h5 {display: inline-block;padding: 5px 0;}
.blog-search input[type="text"] {
    min-height: 2.5em;
    padding-left: 1em;
	padding-right:1em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    border: 1px solid silver;
    outline: none;
    background: #fff;
    position: relative;
    vertical-align: middle;
}
.blog-search select {
    min-height: 2.5em;
    padding-left: 0.625em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    border: 1px solid silver;
    outline: none;
    /* appearance: none; */
    -webkit-appearance: none;
    position: relative;
    padding-right: 30px;
    background: url(../../images/select-arrow.svg) no-repeat right 10px;
    background-color: #ffffff;
}
.blog-search input[type="text"],.blog-search select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    font-family: "Microsoft Jhenghei", "微軟正黑體", "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.blog-btn {  
    text-align: center;
    display: block;
    overflow: hidden;
    clear:left;
    padding: 10px 0;
}
.blog-btn input[type="submit"],.blog-btn input[type="button"],.blog-btn a,.blog-btn input,.blog-btn a {
    background-color: #414141;
    color: #FFFFFF;
    border: 1px none #FFFFFF;
    margin: 5px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    line-height: 43px;
    display: inline-block;
    vertical-align: middle;
}
.blog-btn input[type="submit"]:hover,.blog-btn input[type="button"]:hover,.blog-btn a:hover,.blog-btn a:hover {
	background-color: #2c89ce;
	color: #ffffff;
}
.blog-list {display: block;margin-top: 1em;overflow: hidden;}
.blog-listul {margin-left:-1em;}
.blog-listul li {float:left; width:50%; padding:0 0 1em 1em;}
.blog-listul li:nth-child(4n-1) a,.blog-listul li:nth-child(4n-2) a {background-color: #644b3f;}
.blog-card {display:inline-block; width:100%; background-color: #87bb18;}
.blog-card h5 {
    padding:20px;
    color:#fff600;
    overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
}
.blog-card figure {position: relative;overflow: hidden;}
.blog-card figure:after {
    content:'';
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.0);
    position: absolute;
    background-image: url(../../images/lock.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size:100%;
    z-index:2;
    top:0;
    opacity: 0;
}
.blog-card:hover figure:after,.blog-card:focus figure:after {
    background-color:rgba(0,0,0,.7);
    background-size:12.5%;
    opacity: 1;
}
.blog-card figure mark {
    background: rgba(208,15,93,.7);
    position:absolute;
    z-index: 3;
    right:0;
    color:#ffffff;
    line-height: 50px;
    padding: 0 25px;
}
.blog-card figure img {width: 100%; min-height: 280px;}
.blog-card-info {display: block; padding: 20px;}
.blog-card-info span {display: block;padding: 7px 0; color:#ffffff;}
.blog-card-info span strong {font-weight: inherit;color:#fff600;}

@media screen and (max-width:1002px) {
    .blog-search ul li {width:100%;}
    .blog-card figure img {min-height:inherit;}
}

@media screen and (max-width:576px) {
    .blog-listul li {width:100%;}
    .blog-listul li:nth-child(4n-1) a,.blog-listul li:nth-child(4n-2) a {background-color: #87bb18;}
    .blog-listul li:nth-child(even) a {background-color: #644b3f;}
    .blog-card h5 {
        text-overflow:clip;
        overflow: visible;
        white-space: normal;
    }
}

@media screen and (max-width:400px) {
    .blog-search ul li h5 {width:100%;}
}
/*--blog_list end--*/

/*--blog_detail--*/

.blog-detail {display: block;background-color: #ebebeb;}
.blog-detail h5 {
    padding: 15px 25px 15px 45px;
    color: #ffffff;
    background: url(../../images/use_icon.gif) no-repeat 15px 15px #644b3f;
}
.blog-base {display: block;padding:2.5em 2.75em;border-bottom: 1px solid #dedede;}
.blog-base span {display: block; padding: 7px 0;}
.blog-base strong {font-weight: inherit;color:#ef3d8d;}
.blog-detail-content,.blog-view {display: block;padding:2.5em;background-color: #eeeeee; line-height: 1.5;}
.blog-detail-content img,.blog-view img {float:inherit; width:100%;/* margin-bottom: 2em; */}
.blog-view a {display: block; padding-bottom: 1em;}
.blog-view figcaption {display: block;color:#ef3d8d;padding: 10px 0;}

@media screen and (max-width:480px) {
    .blog-base {padding:1.5em 1.75em;}
    .blog-detail-content,.blog-view {padding:1.5em;}
}

@media screen and (max-width:350px) {
    .blog-base {padding:1em 1.25em;}
    .blog-detail-content,.blog-view {padding:1em;}
}

/*--blog_detail end--*/

/*--ecard--*/

.ecard {
    width:100%;
    max-width: 641px;
    background-color: #643f2d;
    margin:15px auto;
    -moz-box-shadow:0px 0px 7px 7px rgba(20%,20%,40%,0.1);
    -webkit-box-shadow:0px 0px 7px 7px rgba(20%,20%,40%,0.1);
    box-shadow:0px 0px 7px 7px rgba(20%,20%,40%,0.1);
    line-height: 1.2;
}
.card-demo {
    display: block; 
    background-color: #fff;
    border: 12px solid #643f2d;
    border-bottom: 0;
}
.card-demo {padding: 10px 10px 30px 10px;}
.card-demo li {padding:5px;}
.card-demo li:first-child {padding:0;padding-bottom: 15px;}
.ecard p {margin-top: -15px;}

.ecard-form {
    width:100%;
    max-width: 641px;
    margin:15px auto;
}
.ecard-form table {width:100%;}
.ecard-form table td,.ecard-form table th {padding: 5px 10px;border: 1px solid #c5b6af;}
.ecard-form table th {background-color: #643f2d; color:#fff;text-align: right;}
.ecard-form input[type="text"],.ecard-form textarea {
    width:100%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
} 
.ecard-form input.codebar {width:auto;vertical-align: middle;}
.codeimg {
    display: inline-block;
    vertical-align: middle;
}
.voice-code {
    width: 35px;
    height: 35px;
    display: inline-block;
}
.ecard-form p {color:#a1a1a1;margin:5px 0; }
.ecard-form input[type="text"] {
    height: 2.375em;
    padding: 0 0.625em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    border: 1px solid silver;
    outline: none;
    background: #fff;
    /* appearance: none; */
    -webkit-appearance: none;
    position: relative;
}
.ecard-btn {
    padding: 30px 0;
    text-align: center;
    display: block;
    overflow: hidden;
}
.ecard-btn input,.ecard-btn a {
    background-color: #505050;
    color: #FFFFFF;
    border: 1px none #FFFFFF;
    margin: 5px;
    padding-right: 30px;
    padding-left: 30px;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    height: 43px;
    display: inline-block;
    vertical-align: middle;
}
.ecard-btn input:hover,.ecard-btn a:hover {
    background-color: #5ea4f4;
}

@media screen and (max-width:550px) {
    .ecard-form table td,.ecard-form table th {
        float:left;
        width:100%;
        border: 0;
    }
    .ecard-form input.codebar {width:100%;margin-bottom: 5px;}
    .ecard-form table th {background-color: #eee;text-align: left; color:#486175;}
    .ecard-form {background-color: #eee;padding: 15px 5px;}
}

/*--ecard end--*/



/*共用ease*/
.blog-card figure img,.audiolist ul li img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.blog-card:hover figure img,.audiolist ul li:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); 
}


a,.reserve-choose a:hover:after,.reserve-choose a:after,.reserve-choose a:hover:before,.reserve-choose a:before,.audiolist ul li,.audiolist ul li:hover,.audiolist ul li img,.audiolist ul li:hover img,
.ecology-ul li a figure img,.ecology-ul li a:hover figure img,
.ecology-ul li a:focus figure img,
.ecology-ul li a span,.ecology-ul li a:hover span,
.ecology-ul li a:focus span,
.ecology-ul li a .linel1,.ecology-ul li a:hover .linel1,
.ecology-ul li a .linel2,.ecology-ul li a:hover .linel2, 
.ecology-ul li a .liner1,.ecology-ul li a:hover .liner1,
.ecology-ul li a .liner2,.ecology-ul li a:hover .liner2, 
.ecology-ul li a .linet0,.ecology-ul li a:hover .linet0,
.ecology-ul li a .lineb0,.ecology-ul li a:hover .lineb0,
.ecology-ul li a figcaption,.ecology-ul li a:hover figcaption,
.ecology-ul li a:focus figcaption,
.blog-card figure img,.blog-card:hover figure img,
.blog-card figure:after,.blog-card:hover figure:after
{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;                 
    -o-transition: all 0.5s ease;   
    -ms-transition: all 0.5s ease;          
    transition: all 0.5s ease; 
}


/*-------------開放資料專區 開始-------------*/

.opendata-st {
    border:0;
    padding: 0;
    margin:0;
}
.opendata-st select {
    width:100%;
    height: 2.375em;
    box-sizing: border-box;
    padding-left: 0.625em;
    font-size: 0.9375em;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    color: #9f9f9f;
    border: 1px solid silver;
    outline: none;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: ' ';
}
.opendata-st > div {
    display: inline-block;
    position: relative;
    width:35%;
    vertical-align: top;
}
.opendata-st > div:after {
    content: "";
    position: absolute;
    top: 38%;
    right: 0.813em;
    z-index: 2;
    width: 12px;
    height: 7px;
    background: url(../../images/select-arrow.png)no-repeat;
    pointer-events: none;
}
.opendata-st input {
    border:0;
    border-radius: 4px;
    color: white;
    background: #ea5413;
    padding: .45rem 1rem;
    min-width: 120px;
}
.opendata-st input:hover,.opendata-st input:focus {
    background: #69af2b;
}

@media (max-width: 576px) {
    .opendata-st {
        padding: 1rem;
        background: #f4f4f4;
    }
    .opendata-st > div {
        width:calc(100% - 70px);
    }
    .opendata-st input {min-width: inherit;}
}

/*提示文字*/
.opendata-dis {
    padding: 1rem 0;
}

/*table*/
.opendata {width: 100%;}
.opendata table {
    width: 100%;
    font-family: "微軟正黑體";
    font-size: 0.9375em;
    table-layout: fixed;
}
.opendata caption {font-size: 0em;position: absolute;}
.opendata th,.opendata td {
    padding: 1em 1%;
    text-align: center;
    }
.opendata th {
    border-top: 1px solid #ea5413;
    border-bottom: 1px solid #ea5413;
    color: #ea5413;
}
.opendata table td {
    line-height: 1.5;
    vertical-align: middle;
    border-bottom: 1px dashed #d4d4d4;
}
.opendata table tr:hover td {background-color: #f4f4f4;}
/*table end*/

/*opendata btn*/

.opendata a {
  display: block;
  text-align: center;
  color: #fff;
  padding: 5px 15px;
  border-radius: 4px;
  margin-bottom: .5rem;
}
.opendata a:hover,.opendata a:focus {
    opacity: .85;
    text-decoration: underline;
}
.opendata a.txt {background-color: #29aae3;}
.opendata a.xml {background-color: #97c956;}
.opendata a.json {background-color: #edae2d;}
.opendata a.url {background-color:#e15c67;}
.opendata a.csv {background-color:#3f8ce8;}
.opendata a.rdf {background-color:#e67ec6;}

.opendata_tit {
    color: #5f5f5f;
     font-size: 1.125rem; 
    line-height: 1.2;
    padding-bottom: .625rem;
}
.opendata_tit a{
    font-size:1rem;
    display:inline-block;
    margin:.625rem;
    color:#ffffff;
    padding:.5rem 1rem;
    border-radius: 2rem;
    background: #70c8ff;
}
.opendata_tit a:hover{
     background: #29aae3;
}
.opendata_tit a:focus{
     outline: 1px #70c8ff solid;
    text-decoration: underline;
}
/*opendata btn end*/

@media (max-width: 767px) {
    .opendata th {display: none;}
    .opendata table td {
        position: relative;
        display: block;
        text-align: left;
        padding-left: 28%;
        vertical-align: top;
    }
    .opendata table td:first-child {
        border-top: 3px solid #8cbc26;
    }
    .opendata table td:last-child {
        /*margin-bottom: 2rem;*/
        border-bottom: 0;
    }
    .opendata table td:before {
        content: attr(data-title);
        position: absolute;
        top:2px;
        left: 0;
        color: #fff;
        background-color: #8cbc26;
        line-height: 1.5;
        width: 25%;
        white-space: nowrap;
        text-align: center;
        font-weight: bold;
        padding: 8px 0;
        margin:.5rem 0;
        border-radius: 3px;
    }
    .opendata table td:nth-child(5) a:first-child {
        margin-top: -5px;
    }
}

/*-------------開放資料專區 結束-------------*/

/*-------------電子報列表(上方搜尋) 開始-------------*/

.epaper-sh {
    border: 0;
    padding: 0;
    margin:0;
}
.epaper-sh > .kf_search_col {width: 100%;}
.epaper-sh input[type="text"] {
    float: left;
    width: 25%;
    margin-right: .75rem;
}
.epaper-sh span {
    float: left;
    margin-top: .75rem;
    margin-right: .75rem;
}
@media (max-width: 575px) {
    .epaper-sh input[type="text"] {
        width:calc(100% - 260px);
    }
}
@media (max-width: 450px) {
    .epaper-sh input[type="text"] {
        width:calc(100% - 80px);
        margin:0 .75rem .5rem 0;
    }
}

/*-------------電子報列表(上方搜尋) 結束-------------*/


/*--------------------------------------------------*/
/*                2017/10/6    無障礙2.0            */
/*--------------------------------------------------*/
.layoutContent { padding: 1rem;}

.invisible{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
table.reservation9 {
    margin:0 auto;
    border-collapse:collapse;
    border-spacing:0;
    width: 20cm;
    font-family: "微軟正黑體";
}
.reservation9 caption,th {
    text-align:left;
}
.reservation9 caption {
    font-size:0em;
    color:#FFFFFF;
    line-height: 0px;
}
/*h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}*/
table.reservation9 th,table.reservation9 td {
    border: 1px solid #c6f2ea;
    padding: 5px;
    background-color: #FFF;
}
table.reservation9 tr:nth-child(odd) td {background: #f8f8f8;}
table.reservation9 th {
    background-color: #9ae1eb;
    text-align: left;
    padding-left:15px;
    font-family: "微軟正黑體";
}
table.reservation9 caption h1 {
    background-color: #62c0ff;
    font-family: "微軟正黑體";
}
.btnarea {
    padding-top: 15px;
    text-align: center;
}
.btnarea input {
    line-height: 20px;
    color: #FFF;
    background-color: #000;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    margin:0 3px;
}
.btnarea input:hover {
    background-color: #0066CC;
}