html {
    height: 100%;
}

body {
    font-family: "Microsoft JhengHei", "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    font-size: 16px;
    color: #222;
    margin: 0;
    background-image: url(../images/bg01.png);
}

body.page_bg {
    background-image: url(../images/woodland-656969_1920.jpg);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body.page_bg1 {
    background-image: url(../images/bg01.jpg);
}

body.page_bg2 {
    background-image: url(../images/bg02.jpg);
}

body.page_bg3 {
    background-image: url(../images/bg03.jpg);
}

body.page_bg4 {
    background-image: url(../images/bg04.jpg);
}




h1,
h2,
h3,
h4,
h5,
h6,
p,
th,
tr,
td,
ul,
ol,
li,
time,
div,
a,
select,
option,
input {
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    font-size: 16px;
    text-decoration: none !important;
    color: #333;
}


ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
    list-style-type: none;
}

img {
    border: 0;
}

a {
    -webkit-transition: 0.2s ease-in-out all;
    -moz-transition: 0.2s ease-in-out all;
    -o-transition: 0.2s ease-in-out all;
    transition: 0.2s ease-in-out all;
    text-decoration: none;
}

section {
    overflow: hidden;
}

a:link,
a:visited {
    color: #000;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #2d2d2d;
    outline: none;
    text-decoration: none;
}

a.a_style2 {
    color: #fff !important;
    background-color: #f7819a;
    display: inline-block;
}

.file_icon {
    width: 20px;
    height: auto;
}

/*bootstrap---------------------------------------------------------------*/
.text-danger {
    color: #db4357;
}

.text-gray {
    color: #999;
}

.alert {}

.alert-danger {
    background: #ffedee;
    border-color: #ffa8b4;
    color: #353535;
    font-size: 15px;
    line-height: 1.8em;
}

.alert-write {
    background: #fff;
    border-color: #ccc;
    color: #353535;
    font-size: 15px;
    line-height: 1.8em;

}

/*-按鈕----------------------------------------------------------*/
.btn.btn-round {
    width: 36px;
    height: 36px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.42;
    border-radius: 50%;
}

.btn.btn-round.btn-xs {
    width: 22px;
    height: 22px;
    line-height: 1;
    padding: 3px 0;
}

.btn.btn-round.btn-sm {
    width: 30px;
    height: 30px;
}

.btn.btn-round.btn-lg {
    width: 45px;
    height: 45px;
}

.btn.btn-round.btn-lg i {
    margin-top: 2px;
}

.btn.btn-round.btn-default {
    color: #e7e7e2;
}

.btn.btn-round.btn-default:hover,
.btn.btn-round.btn-default:focus,
.btn.btn-round.btn-default:active,
.btn.btn-round.btn-default.active {
    color: #c4c4b8;
}

.btn.btn-round.btn-default:hover i,
.btn.btn-round.btn-default:focus i,
.btn.btn-round.btn-default:active i,
.btn.btn-round.btn-default.active i {
    color: #c4c4b8;
}

/*紅*/
.btn-danger {
    color: #fff;
    background-color: #ff6a7f;
    border-color: #ff6a7f;
}

a.btn-danger {
    color: #fff !important;
}

.btn-danger:focus,
.btn-danger.focus {
    color: #fff;
    background-color: #f15369;
    border-color: #f15369;
}

.btn-danger:hover {
    color: #fff;
    background-color: #f15369;
    border-color: #f15369;
}

.btn-danger:active,
.btn-danger.active,
.open>.dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #f15369;
    border-color: #f15369;
}

/*綠*/
.btn-success {
    color: #fff;
    background-color: #90c263;
    border-color: #90c263;
}

a.btn-success {
    color: #fff !important;
}

.btn-success:focus,
.btn-success.focus {
    color: #fff;
    background-color: #7db64a;
    border-color: #7db64a;
}

.btn-success:hover {
    color: #fff;
    background-color: #7db64a;
    border-color: #7db64a;
}

.btn-success:active,
.btn-success.active,
.open>.dropdown-toggle.btn-success {
    color: #fff;
    background-color: #7db64a;
    border-color: #7db64a;
}

/*湖水綠*/
.btn-info {
    color: #fff;
    background-color: #63c2a8;
    border-color: #63c2a8;
}

a.btn-info {
    color: #fff !important;
}

.btn-info:focus,
.btn-info.focus {
    color: #fff;
    background-color: #49b597;
    border-color: #49b597;
}

.btn-info:hover {
    color: #fff;
    background-color: #49b597;
    border-color: #49b597;
}

.btn-info:active,
.btn-info.active,
.open>.dropdown-toggle.btn-info {
    color: #fff;
    background-color: #49b597;
    border-color: #49b597;
}




/*body--------------------------------------------------------------------------------*/
body #wrapAll {
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
    -webkit-transition: opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
    -moz-transition: opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
    -o-transition: opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
    -ms-transition: opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms;
}

body.load #wrapAll {
    opacity: 1;
}

body .section01 {
    /*opacity: 0;
    transition: transform 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
    -moz-transition: -moz-transform 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
    -o-transition: -o-transform 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
    -ms-transition: -ms-transform 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 0ms, opacity 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
    transform: translate3d(0, 0, 15px);
    -webkit-transform: translate3d(0, 15px, 0);
    -moz-transform: translate3d(0, 15px, 0);
    -ms-transform: translate3d(0, 15px, 0);
    -o-transform: translate3d(0, 15px, 0);*/
}

body.load .section01 {
    /*opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -ms-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);*/
}

.rslides .caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: initial;
}

.rslides .caption .caption_text {
    overflow: hidden;
    text-align: left;
    display: block;
    width: 90%;
    margin-left: 5%;
}

.rslides .caption h3 {
    font-size: 60px;
    color: #FFF;
    font-family: "微軟正黑體", "新細明體", "標楷體";
    font-weight: bold;
    display: block;
    padding: 0;
    margin: 0;
    line-height: 1.3em;
    text-shadow: 0px 0px 10px #222222;
}

.rslides .caption p {
    font-size: 24px;
    line-height: 1.6em;
    font-family: "微軟正黑體", "新細明體", "標楷體";
    font-weight: bold;
    color: #FFF;
    display: block;
    padding: 0;
    margin: 0;
    text-shadow: 0px 0px 5px #222222;
}

.rslides .caption p span {
    display: block;
    color: #FFF;
    font-size: 24px;
}

@media(max-width:1024px) {
    .rslides .caption h3 {
        font-size: 52px;
    }

    .rslides .caption p,
    .rslides .caption p span {
        font-size: 18px;
    }
}

@media(max-width:768px) {
    .rslides .caption .caption_text {
        width: 84%;
        margin-left: 8%;
    }

    .rslides .caption h3 {
        font-size: 42px;
    }

    .rslides .caption p,
    .rslides .caption p span {
        font-size: 16px;
    }
}

@media(max-width:540px) {
    .rslides .caption .caption_text {
        width: 84%;
        margin-left: 2%;
    }

    .rslides .caption h3 {
        font-size: 32px;
    }

    /*.rslides .caption p, .rslides .caption p span {
        font-size: 16px;
    }*/
    .rslides .caption p span {
        display: inline;
    }
}

@media(max-width:411px) {
    .rslides .caption h3 {
        font-size: 28px;
    }

    .rslides .caption p,
    .rslides .caption p span {
        font-size: 14px;
        line-height: 1.4em;
    }
}

@media(max-width:360px) {
    .rslides .caption h3 {
        font-size: 24px;
    }

    .rslides .caption p,
    .rslides .caption p span {
        font-size: 14px;
        line-height: 1.2em;
    }
}

.banner_bg {
    background-image: url(../images/bg02.png);
}



.bg02 {
    background-color: rgba(220, 233, 180, 0.25);
    /* display: block; */
    padding: 15px 0;
    margin-top: 30px;
}

.page_main {
    background-image: url(../images/bg01.png);
    overflow: hidden;
}

.top_main,
.banner_main,
.index_main,
.page_main,
.footer_main {
    width: 1280px;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 1366px) {
    .top_main {
        width: auto;
        margin-right: 0;
        margin-left: 0;
    }

    .banner_main {
        width: auto;
        margin-right: 0;
        margin-left: 0;
    }

    .index_main {
        width: auto;
        margin-right: 30px;
        margin-left: 30px;
    }

    .page_main {
        width: auto;
        margin-right: 50px;
        margin-left: 50px;
    }

    .footer_main {
        width: auto;
        margin-right: 20px;
        margin-left: 20px;
    }
}

@media (max-width: 1280px) {
    .index_main {
        width: auto;
        margin-right: 20px;
        margin-left: 20px;
    }

    .page_main {
        width: auto;
        margin-right: 30px;
        margin-left: 30px;
    }
}

@media (max-width: 1024px) {
    .page_main {
        width: auto;
        margin-right: 0;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .page_main {
        height: auto;
    }
}



@media (max-width: 540px) {
    .index_main {
        width: auto;
        margin-right: 15px;
        margin-left: 15px;
    }
}



/*-----------------------------------------------------------------------------------*/
/*.container-fluid{
    margin:0 30px 0 0;
}
@media (max-width: 1160px) {
    .container-fluid{
        margin-right:  10px;
    }
}

@media (max-width: 960px) {
    .container-fluid{
        margin-right:  0;
    }
}
@media (max-width: 640px) {
    .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}*/



/*page_banner-------------------------------------------------------------------------------*/
.page_banner {
    text-align: center;
    /* background-image: url(../images/page_banner2.jpg); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 70px 20px;
}

.page_banner h1 {
    color: #333;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
}

@media(max-width:1024px) {
    .page_banner {
        padding: 50px 20px;
    }

    .page_banner h1 {
        font-size: 32px;
    }
}

@media(max-width:640px) {
    .page_banner {
        padding: 25px 20px;
    }

    .page_banner h1 {
        font-size: 30px;
    }
}

@media print {
    .page_banner {
        display: none;
    }
}


/*標題--------------------------------------------------------------------------------*/
.index_title {
    display: block;
    text-align: center;
    margin-bottom: 20px;
}

.index_title h2 {
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 2px #5fb3ce solid;
    display: inline-block;
    padding: 0 0 10px 0;
    margin: 0;
}

.index_title h3 {
    font-family: Helvetica, Arial;
    font-size: 18px;
    line-height: 1em;
    padding: 0;
    margin: 5px 0 15px 0;
}

.index_title .bg-danger2 {
    color: #ff566c;
    font-size: 18px;
}


.title01 {
    display: block;
    padding: 10px 0;
    font-size: 24px;
    font-weight: bold;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
}

.title03 {
    display: block;
    padding: 0 0 10px 0;


    border-bottom: 1px #ccc solid;


}

.title03 h3 {
    padding: 0 0 0 10px;
    margin: 0;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    line-height: 1em;
    border-left: 3px #cf8e5e solid;
}

@media(max-width:1024px) {
    .title01 {
        font-size: 22px;
    }
}

@media(max-width:640px) {
    .title01 {
        font-size: 18px;
    }
}

@media(max-width:540px) {}

.title02 {
    display: block;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
}



/*分頁==============================================================*/

.page_footer {
    clear: both;
    overflow: hidden;
    text-align: center;
    margin-bottom: 30px;
}

.pagination>li>a,
.pagination>li>span {
    padding: 4px 10px;
    background-color: #fff;
    border: 1px solid #eb9ba7;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #555;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    color: #fff;
    background-color: #eb9ba7;
    border-color: #eb9ba7;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #eb9ba7;
    border-color: #fff;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    border-color: #eb9ba7;
}

@media(max-width:414px) {
    .page_footer {
        clear: both;
        overflow: hidden;
        text-align: center;
        margin-bottom: 10px;
    }
}

/*回上一頁=====================================*/

.btn_box {
    text-align: center;
    padding: 30px 0;
    overflow: hidden;
    clear: both;
    margin: 0;
}

/*超連結按鈕樣式======================================*/
.btn_row {
    display: block;
    padding: 10px 0;
    text-align: center;
}

.btn_row .no_xl {
    display: inline-block;
    background-color: #999;
    color: #FFF;
    font-family: "微軟正黑體", "新細明體", "標楷體";
    line-height: 1.5em;
    padding: 0.4em 2.2em;
    margin: 5px;
    font-size: 20px;
}

a.a_style {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    font-family: "微軟正黑體", "新細明體", "標楷體";
    line-height: 1.5em;
    color: #fff;
}

a.a_style:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

a.a_style:hover,
a.a_style:focus,
a.a_style:active {
    color: #fff;
}

a.a_style:hover:before,
a.a_style:focus:before,
a.a_style:active:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

/*黃*/

a.a_yellow {
    color: #fff;
    background: #e2be66;
    padding: 0.4em 1.8em;
}

a.a_yellow:before {
    background: #d6b156;
}

/*綠*/

a.a_green {
    color: #fff;
    background: #9bb966;
    padding: 0.4em 1.8em;
}

a.a_green:before {
    background: #8aac4f;
}

/*紅*/

a.a_red {
    color: #fff !important;
    background: #df626d;
    padding: 0.4em 1.8em;
}

a.a_red:before {
    background: #d34a57;
}

/*黑*/

a.a_black {
    color: #fff;
    background: #959595;
    padding: 0.4em 1.8em;
}

a.a_black:before {
    background: #727272;
}

/*白*/

a.a_white {
    color: #222;
    background: #fff;
    padding: 0.4em 1.8em;
    border: 1px #222 solid;
}

a.a_white:before {
    background: #727272;
}

/*紫*/

a.a_purple {
    color: #fff;
    background: #beafd6;
    padding: 0.4em 1.8em;
}

a.a_purple:before {
    background: #ab96cc;
}

a.a_s {
    padding: 0.4em 1.6em;
    margin: 5px;
    font-size: 15px;
}


a.a_m {
    padding: 0.4em 1.8em;
    margin: 5px;
    font-size: 16px;
}

a.a_x {
    padding: 0.4em 2em;
    margin: 5px;
    font-size: 18px;
}

a.a_xl {
    padding: 0.4em 2.2em;
    margin: 5px;
    font-size: 20px;
}

/*button樣式======================================================================*/

.btn_style {
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial !important;
    line-height: 1.5em;
}

.btn_style:hover,
.btn_style:focus {
    -moz-transition: background 500ms;
    -o-transition: background 500ms;
    -webkit-transition: background 500ms;
}

/*紅*/

.btn_red {
    background-color: #df626d;
    color: #fff;
}

.btn_red:hover,
.btn_red:focus {
    background-color: #d34a57;
}

/*黃*/

.btn_yellow {
    background: #e2be66;
    color: #fff;
}

.btn_yellow:hover,
.btn_yellow:focus {
    background: #d6b156;
}

/*綠*/

.btn_green {
    color: #fff;
    background: #9bb966;
}

.btn_green:hover,
.btn_green:focus {
    background: #8aac4f;
}

/*黑*/

.btn_black {
    color: #fff;
    background: #959595;
}

.btn_black:hover,
.btn_black:focus {
    background: #727272;
}

/*白*/

.btn_white {
    color: #222;
    background: #fff;
    border: 1px #222 solid;
}

.btn_white:hover,
.btn_white:focus {
    color: #fff;
    background: #727272;
}

/*紫*/

.btn_purple {
    color: #fff;
    background: #beafd6;
}

.btn_purple:hover,
.btn_purple:focus {
    background: #ab96cc;
}

.btn_s {
    padding: 0.4em 1.6em;
    margin: 5px;
    font-size: 15px;
}

.btn_m {
    padding: 0.4em 1.8em;
    margin: 5px;
    font-size: 16px;
}

.btn_x {
    padding: 0.4em 2em;
    margin: 5px;
    font-size: 18px;
}

.btn_xl {
    padding: 0.4em 2.2em;
    margin: 5px;
    font-size: 20px;
}


/*footer============================================================*/
footer {
    display: block;
    padding: 20px 0 40px 0;
    background-color: #78736e;
    margin-top: 0;
    color: #fff;
}

footer * {
    color: #fff;
    font-size: 15px;
}

.footer_all {
    overflow: hidden;
}

.footer_left {
    float: left;
    text-align: left;
    display: block;
}

.footer_right {
    float: right;
    display: block;
}

footer p {
    font-size: 15px;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    text-decoration: none;
    -moz-transition: color 250ms;
    -o-transition: color 250ms;
    -webkit-transition: color 250ms;
}

footer a {
    text-decoration: none;
    color: #fff !important;
}

footer span {
    display: inline-block;
    margin-right: 20px;
    position: relative;
}

footer p span:after {
    position: absolute;
    display: inline-block;
    top: 0;
    right: -11px;
    font-size: 12px;
    content: "|";
}

footer p span:last-child {
    margin-right: 0;
}

footer p span:last-child:after {
    content: "";
}


@media(max-width:1024px) {
    footer {
        padding: 10px 0 30px 0;

    }

    .footer_left,
    .footer_right {
        float: none;

    }

    .footer_right {
        margin-top: 20px;
    }
}

@media(max-width:768px) {
    .footer_left {
        float: left;
        margin: 0;
    }

    .footer_right {
        float: right;

    }


    footer p span {
        display: block;
        margin-right: 0;
        position: relative;
    }

    footer p span:after {
        position: absolute;
        display: inline-block;
        top: 0;
        right: 0;
        font-size: 12px;
        content: "";
    }
}

@media(max-width:540px) {
    footer p {
        line-height: 1.8em;
        font-size: 14px;
    }

    .footer_left,
    .footer_right {
        float: none;
    }

    .footer_right {
        margin-top: 20px;
    }
}

@media print {
    .footer_main {
        display: none;
    }
}

/*submit-------------------------------------------------------------------*/
.submit_3 {
    -moz-border-radius: 5px !important;
    -webkit-border-radius: 5px !important;
    border-radius: 5px !important;
    border: none;
    color: #ffffff;
    padding: 0.7em 5em;
    font-size: 15px;
    background-color: #f58c9a;
}

.submit_3:hover,
.submit_3:focus {
    background: #e4707f;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

.submit_3::-moz-focus-inner {
    border: none !important;
    background: #e4707f;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

/*動畫黑底-------------------------------------------------------------------------------------------*/
li .black_bg {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    opacity: 0;
    transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
}

li:hover .black_bg {
    width: 100%;
    height: 100%;
    opacity: 1;
}

/*放大--------------------------------------------------------------------------------------*/
.zoom_img {
    display: block;
    vertical-align: bottom;
    overflow: hidden;
    position: relative;
}

.zoom_img img {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

li:hover .zoom_img img,
li:focus .zoom_img img,
li:active .zoom_img img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/*收縮--------------------------------------------------------------------------------------*/
.shrink {
    display: block;
    vertical-align: bottom;
    overflow: hidden;
    position: relative;
}

.shrink img {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 1;
}

li:hover .shrink img,
li:focus .shrink img,
li:active .shrink img {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

/*-ind_news_li-----------------------------------------------------------------------------index_ul--------------------------*/

.ind_news_title {
    border-bottom: 2px #bca58e solid;
    overflow: hidden;
}

.ind_news_title h2 {
    float: left;
    display: inline-block;
    font-size: 22px;
    font-weight: bold;
    position: relative;
    padding-left: 0.5em;
}

.ind_news_title h2:before {
    position: absolute;
    top: 10px;
    left: 0;
    content: "";
    width: 7px;
    height: 7px;
    background-color: #8aac4f;
    display: inline-block;
}

.ind_news_title .link_box {
    float: right;
    top: 15px;
    display: block;
    font-size: 22px;
    font-weight: bold;
    position: relative;
    padding-left: 0.5em;
    color: #666;
}

.ind_news_title .link_box a {
    color: #666;
}

.ind_news_title .link_box a:hover {
    color: #000;
}

/*----------------------------------------------------------------------------------*/
.ind_left {
    float: left;
    width: 48%;
    margin-right: 2%;
}

.ind_right {
    float: right;
    width: 48%;
    margin-left: 2%;
}

.ind_news_ul {
    padding: 0;
    margin: 0 0 0 0;
    list-style: none;
    list-style-type: none;
}

.ind_news_ul li {
    position: relative;
    display: block;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    border-bottom: 1px #bca58e dashed;
    padding: 13px 0 8px 0;
    overflow: hidden;
    width: 100%;
}


.ind_news_ul li .news_label {
    width: 5em;
    float: left;
    padding: 0;
}

.ind_news_ul li .news_mark {
    display: inline-block;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 15px;
    color: #333;
    padding: 2px 7px;
}

.ind_news_ul li p {
    display: block;
    font-size: 16px;
    color: #333;
    top: 0;
    left: 0;
    display: block;
    margin-top: 5px;
    margin-left: 5em;
    margin-right: 6.5em;
    margin-bottom: 0;
    padding: 0;
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ind_news_ul li time {
    position: absolute;
    top: 13px;
    right: 0;
    display: inline-block;
    width: 6.5em;
    padding: 0 0;
    text-align: right;
    font-size: 16px;
    line-height: 1em;
}

.meeting_div01 {
    display: inline-block;
    margin-right: 2em;
}

.meeting_div02 {
    display: inline-block;
}

/*申請表單ul----------------------------------------------------------------------------------------*/
.ind_down_ul {
    padding: 0;
    margin: 0 0 0 0;
    list-style: none;
    list-style-type: none;
}

.ind_down_ul li {
    position: relative;
    display: block;
    transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    border-bottom: 1px #bca58e dashed;
    padding: 13px 0 8px 0;
    overflow: hidden;
    width: 100%;
}


.ind_down_ul li .down_label {
    width: 5em;
    float: left;
    padding: 0;
}

.ind_down_ul li .down_mark {
    display: inline-block;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 15px;
    color: #333;
    padding: 2px 7px;
}

.ind_down_ul li p {
    display: block;
    font-size: 16px;
    color: #333;
    top: 0;
    left: 0;
    display: block;
    margin-top: 5px;
    margin-left: 5em;
    margin-right: 6.5em;
    margin-bottom: 0;
    padding: 0;
    font-family: "微軟正黑體", "新細明體", 'Open Sans', sans-serif, Helvetica, Arial;
    line-height: 1em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ind_down_ul li time {
    position: absolute;
    top: 13px;
    right: 0;
    display: inline-block;
    width: 6.5em;
    padding: 0 0;
    text-align: right;
    font-size: 16px;
    line-height: 1em;
}

.down_title {
    float: left;
    width: 15%;
    text-align: right;
}

.down_time {
    float: left;
    width: 15%;
    text-align: right;
}

/*分類的背景色---------------------------------------------------------------------------------------------------------*/
.item_bg_00 {
    background-color: #b2dfb8;
}

.item_bg_00:hover {
    background-color: #90c597;
}

.item_bg_01 {
    background-color: #ffbbc0;
}

.item_bg_01:hover {
    background-color: #ff979e;
}

.item_bg_02 {
    background-color: #ffd6ad;
}

.item_bg_02:hover {
    background-color: #ffbd84;
}

.item_bg_03 {
    background-color: #ffe5ae;
}

.item_bg_03:hover {
    background-color: #ffd486;
}

.item_bg_04 {
    background-color: #dce9b4;
}

.item_bg_04:hover {
    background-color: #c6da8d;
}

.item_bg_05 {
    background-color: #afd4ee;
}

.item_bg_05:hover {
    background-color: #87bae2;
}

.item_bg_06 {
    background-color: #dcc1e8;
}

.item_bg_06:hover {
    background-color: #c69fd9;
}

.item_bg_07 {
    background-color: #aee1e6;
}

.item_bg_07:hover {
    background-color: #86ced5;
}

.item_bg_08 {
    background-color: #e0d2c5;
}

.item_bg_08:hover {
    background-color: #ccb7a4;
}



.bg_00 {
    background-color: #f9d8e4;
}

.bg_01 {
    background-color: #eeecc9;
}

.bg_02 {
    background-color: #cbe8ce;
}

.bg_03 {
    background-color: #b2def1;
}

.bg_04 {
    background-color: #f9d8da;
}

.bg_05 {
    background-color: #e3d2ec;
}

.bg_06 {
    background-color: #f2e0d1;
}

.bg_07 {
    background-color: #dde8c5;
}

.bg_08 {
    background-color: #bfe7e3;
}

.bg_09 {
    background-color: #d1d7f1;
}

@media(max-width:900px) {
    .ind_left {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .ind_right {
        float: none;
        width: 100%;
        margin-left: 0;
    }
}


@media(max-width:540px) {
    .ind_news_ul li {
        padding: 6px 0;
    }




    .ind_news_ul li .news_label {
        width: auto;
        float: none;
        padding: 0;
        display: block;
    }

    .ind_news_ul li p {
        display: block;
        font-size: 16px;
        color: #333;
        top: 0;
        left: 0;
        margin: 7px 0 0 2px;
        padding: 0;
        line-height: 1.5em;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .ind_news_ul li time {
        position: absolute;
        top: 9px;
        right: 0;
        display: block;
        width: auto;
        padding: 0 5px 0 0;
        margin: 0;
        text-align: left;
        font-size: 14px;
        line-height: 1.2em;
        font-style: italic;
    }
}


/*ind_member-----------------------------------------------------------------------------------------*/
.ind_member_row {
    background-color: #fff;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 20px;
    padding: 25px;
}

.ind_member_header {
    overflow: hidden;
}

.ind_member_title {
    float: left;
    display: block;
    color: #816c58;
    font-size: 18px;
    font-weight: bold;
    padding: 0;
    margin: 0 0 7px 3px;
}

.ind_member_link {
    float: right;
    font-size: 15px;
}

.ind_member_left {
    float: left;
    width: 48%;
    margin-right: 2%;
}

.ind_member_right {
    float: left;
    width: 48%;
    margin-left: 2%;
}

.ind_member_link a {
    display: inline-block;
    color: #666;
    margin: 0 5px;
    font-size: inherit;
}

.ind_member_link a:hover {
    color: #288dc7;
}

.ind_member_link a i {
    display: inline-block;
    margin-right: 3px;
    font-size: inherit;
}



/*數字區----*/
.number_box {
    background-color: #f9b06b;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
    overflow: hidden;
    height: 92px;
}

.num_left {
    float: left;
    margin-left: 10px;
}

.num_right {
    float: right;
    margin-top: 7px;
    margin-right: 10px;
}

.number_box2 {
    background-color: #d2b895;
}

.number_box .num2 {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 48px;
    color: #FFF;
    padding: 0;
    margin: 0;
    line-height: 1em;
}

.number_box .num_t {
    display: block;
    font-size: 16px;
    color: #FFF;
    padding: 0;
    margin: 0;
    line-height: 1.5em;
}

.number_box img {
    width: 60px;
    height: auto;
}

/*登入區-----*/
.login_header {
    overflow: hidden;
    border-bottom: 1px #a59381 solid;
    position: relative;
    padding-bottom: 5px;
}

.login_header h3 {
    color: #f17b86;
    float: left;
    padding: 0;
    margin: 0;
    line-height: 1.2em;
    font-size: 30px
}

.login_header .a_box {
    position: absolute;
    bottom: 7px;
    right: 0;
    font-size: 15px;
    color: #705c48;
}

.a_box a {
    font-size: 15px;
    color: #705c48;
    margin-left: 1em;
}

@media(max-width:1024px) {
    .ind_member_row {
        padding: 25px 17px;
    }


    .number_box {
        padding: 10px 5px;
    }

    .number_box .num2 {
        font-size: 42px;
        line-height: 1.2em;
    }

    .number_box .num_t {
        line-height: 1.2em;
    }

    .number_box img {
        width: 35px;
        margin-top: 10px;
    }
}

@media(max-width:900px) {
    .ind_member_row {
        padding: 25px;
    }

    .number_box {
        padding: 10px 15px;
    }

    .number_box img {
        width: 55px;
        margin-top: 0;
    }
}

@media(max-width:640px) {
    .ind_member_row {
        padding: 25px 17px;
    }



    .number_box {
        padding: 10px 5px;
    }


    .number_box img {
        width: 50px;
        margin-top: 0;
    }
}

@media(max-width:480px) {
    .ind_member_row {
        padding: 15px;
    }

    .number_box {
        padding: 10px;
    }
}


/*@media(max-width:414px){
    .number_box img {
        width: 45px;
        margin-top: 0;
    }

}*/


@media(max-width:360px) {



    .login_header h3 {
        font-size: 26px
    }
}

@media(max-width:414px) {
    .ind_member_row {
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border-radius: 7px;
        padding: 10px;
    }

    .number_box {
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        padding: 10px;
        height: 72px;
    }

    .num_left {
        float: left;
        margin-left: 0;
    }

    .num_right {
        float: right;
        margin-top: 7px;
        margin-right: 0;
    }

    .number_box .num2 {
        font-size: 30px;
    }

    .number_box .num_t {
        font-size: 15px;
    }

    .number_box img {
        width: 40px;
    }
}

@media(max-width:360px) {
    .num_right {
        margin-top: 5px;
    }
}

@media(max-width:320px) {
    .number_box {
        height: 66px;
    }

    .number_box .num_t {
        font-size: 14px;
    }

    .number_box img {
        width: 36px;
    }
}

/*表單區=========================================================*/
.form_frame {
    width: 500px;
    margin: 40px auto;
}


.form_row {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: block;
    padding: 6px 0;
}

.form_row_50 {
    float: left;
    width: 50%;
}

.form_row_span {}

.form_label {
    width: 5em;
    float: left;
    padding: 5px 0 0 0;
}

.form_ctrol {
    top: 0;
    left: 0;
    display: block;
    margin-left: 5em;
    vertical-align: middle;
}

.form_row_span .form_ctrol {
    padding-top: 5px
}


.form_ctrol_inline {}

.form_ctrol_inline input,
.form_ctrol_inline select,
.form_ctrol_inline span {
    display: inline-block;
    width: auto;
}


.form_row2 {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 0;
}

.form_label2 {
    width: 7.5em;
    float: left;
    padding: 4px 0 0 0;
}

.form_ctrol2 {
    top: 0;
    left: 0;
    display: block;
    margin-left: 7.5em;
    vertical-align: middle;
}

.TBValidate_img img {
    width: 100%;
    height: auto;
    border: none !important;
}






/*page_item------------------------------------------------------------------------------------------*/
.page_item {
    margin-top: 10px;
}

.page_item li {
    display: block;
    float: left;
    width: 32.66%;
    height: 80px;
    text-align: center;
    margin: 0.5% 1% 0.5% 0;
    -moz-transition: background 350ms;
    -o-transition: background 350ms;
    -webkit-transition: background 350ms;
}

.page_item li:nth-child(1) {
    width: 100%;
    margin-right: 0;
}


.page_item li:nth-child(4),
.page_item li:nth-child(7),
.page_item li:nth-child(10) {
    margin-right: 0;
}


.page_item li .page_item_title {
    display: block;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
}


.page_item li .page_item_title i {
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    color: rgb(107, 81, 73);
}


.page_item li .page_item_title img {
    width: auto;
    height: 90%;
}


@media(max-width:1280px) {
    .page_item li {
        width: 49.5%;
        height: 70px;
    }

    .page_item li:nth-child(4),
    .page_item li:nth-child(10) {
        margin-right: 1%;
    }

    .page_item li:nth-child(3),
    .page_item li:nth-child(5),
    .page_item li:nth-child(7) {
        margin-right: 0;
    }

    .page_item li .page_item_title {
        height: 70px;
        line-height: 70px;
    }
}

@media(max-width:900px) {
    .page_item li {
        width: 32.66%;
    }

    .page_item li:nth-child(4),
    .page_item li:nth-child(7) {
        margin-right: 0;
    }

    .page_item li:nth-child(3),
    .page_item li:nth-child(5) {
        margin-right: 1%;
    }

}

@media(max-width:640px) {
    .page_item li {
        width: 49.5%;
        height: 60px;
    }

    .page_item li:nth-child(4),
    .page_item li:nth-child(10) {
        margin-right: 1%;
    }

    .page_item li:nth-child(3),
    .page_item li:nth-child(5),
    .page_item li:nth-child(7) {
        margin-right: 0;
    }

    .page_item li .page_item_title {
        height: 60px;
        line-height: 60px;
    }

    .page_item li .page_item_title i {
        font-size: 28px;
    }

    .page_item li .page_item_title img {
        height: 98%;
    }
}

@media(max-width:414px) {
    .page_item li {
        width: 100%;
        height: 55px;
        margin: 3px 0;
    }

    .page_item li:nth-child(4),
    .page_item li:nth-child(10) {
        margin-right: 0;
    }

    .page_item li:nth-child(3),
    .page_item li:nth-child(5),
    .page_item li:nth-child(7) {
        margin-right: 0;
    }

    .page_item li .page_item_title {
        height: 55px;
        line-height: 55px;
    }

    .page_item li .page_item_title i {
        font-size: 26px;
    }
}










/*三欄式ul-------------------------------------------------------------------*/
.li3_m0 li {
    position: relative;
    float: left;
    width: 33.33%;
    margin: 0;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

@media(max-width:900px) {
    .li3_m0 li {
        float: left;
        width: 48%;
        margin: 1% !important;
    }
}


@media(max-width:540px) {
    .li3_m0 li {
        float: left;
        width: 46%;
        margin: 2% !important;
    }
}

/*4欄式ul-------------------------------------------------------------------*/
.li4_m0 li {
    float: left;
    width: 25%;
    margin: 0;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

@media(max-width:640px) {
    .li4_m0 li {
        width: 50%;
    }
}

/*5欄式ul-------------------------------------------------------------------*/
.li5_m0 li {
    float: left;
    width: 20%;
    margin: 0;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

@media(max-width:900px) {
    .li5_m0 li {
        width: 33.33%;
    }

    .li5_m0 li:nth-child(4),
    .li5_m0 li:nth-child(5) {
        width: 50%;
    }
}

@media(max-width:480px) {
    .li5_m0 li {
        width: 50%;
    }

    .li5_m0 li:nth-child(5) {
        width: 100%;
    }
}


/*首頁產品products_ul----------------------------------------------------------------------------------*/

.ind_products_row {
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: auto;
}

.ind_title {
    display: block;
    font-size: 26px;
    letter-spacing: 0.2em;
    padding: 0 1em;
    margin: 1em 0;
    text-align: center;
}

/*縮放*/
.box_shrink img {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    /*過渡效果持續?秒*/
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.box_shrink img:hover,
.box_shrink img:focus,
.box_shrink img:active {
    -webkit-transform: scale(0.96);
    transform: scale(0.96);
}

@media(max-width:960px) {
    .ind_title {
        font-size: 24px;
    }

    .ind_products_row {
        padding-right: 0;
        padding-left: 0;
    }
}



/*index_text--------------------------------------------------------------------index_text*/
.index_text {
    display: block;
    margin: 20px 0;
    padding: 30px 0;
}

/*works_ul-----------------------------------------------------------------------works_ul*/
.works_ul {
    overflow: hidden;
}

.works_ul li img {
    width: 100%;
    height: auto;
}

.saturate_img img {
    -webkit-filter: saturate(20%);
    /* Safari */
    filter: saturate(20%);
}

li:hover .saturate_img img,
li:focus .saturate_img img,
li:active .saturate_img img {
    -webkit-filter: saturate(100%);
    /* Safari */
    filter: saturate(100%);
}



.works_ul li h2 {
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 10px 0 0 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.works_ul li h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1px;
    background-color: #c3af8f;
    width: 0;
    z-index: 999;
    opacity: 0;
    transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -webkit-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -moz-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -o-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -ms-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.works_ul li:hover h2:after {
    opacity: 1;
    width: 100%;
}

.works_ul li h3 {
    display: block;
    font-size: 15px;
    text-align: left;
    padding: 0;
    margin: 5px 0 0 0;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.works_ul li:hover h2 {
    -webkit-transform: translate(10px);
    transform: translate(10px);
}


.works_ul li:hover h3 {
    -webkit-transform: translate(10px);
    transform: translate(10px);
}


/*fb常駐區塊-------------------------------------------------------------*/
.shopping_box {
    position: fixed;
    right: 0;
    top: 200px;
    display: inline-block;
    z-index: 9999;
}

.shopping_box a {
    display: block;
    margin-bottom: 10px;
    background-color: #f77649;
    color: #fff;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-bottomleft-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-topleft-radius: 8px;
    padding: 15px 8px 15px 12px;
    text-align: center;
    opacity: 0.8;
}

.shopping_box a:hover {
    background-color: #f45e35;
    opacity: 1;
}


.shopping_box a img {
    width: 26px;
    height: 26px;
    display: inline-block;
}

.shopping_box a i,
.shopping_box a span {
    display: block;
    width: 20px;
    color: #fff;
    line-height: 1.2em;
    font-size: 18px;
    text-align: center;
}

.shopping_box a span {
    display: inline-block;
}


@media(max-width:1024px) {
    .shopping_box {
        top: 120px;
    }

    .shopping_box a {
        padding: 10px 5px 10px 8px;
    }

    .shopping_box a i,
    .shopping_box a span {
        width: 18px;
        line-height: 1.2em;
        font-size: 16px;
    }
}

@media(max-width:540px) {
    .shopping_box a {
        padding: 10px 5px 10px 8px;
    }

    .shopping_box a i,
    .shopping_box a span {
        width: 18px;
        line-height: 1.2em;
        font-size: 15px;
    }
}

@media print {
    .shopping_box {
        display: none;
    }
}

/*gnav--------------------------------------------------------------------------------*/
.gnav {
    margin: 0;
    list-style: none;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    float: left;
}

.gnav li {
    float: left;
}

.gnav li a {
    display: block;
    padding: 12px 20px;
    font-weight: 700;
    text-align: center;
    color: #111;
    font-size: 1.2em;
    font-family: "微軟正黑體", "新細明體", "標楷體";
    letter-spacing: 2px;
    -webkit-transition: all .4s cubic-bezier(.165, .84, .44, 1);
    transition: all .4s cubic-bezier(.165, .84, .44, 1);
    -webkit-transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    transition-timing-function: cubic-bezier(.165, .84, .44, 1);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.gnav li a div {
    position: relative;
    display: inline !important
}

@media screen and (-ms-high-contrast:active),
screen and (-ms-high-contrast:none) {
    .gnav li a div {
        display: inline-block !important
    }
}

@supports (-ms-ime-align:auto) {
    .gnav li a div {
        display: inline-block !important
    }
}

.gnav li a div:before {
    content: "";
    position: absolute;
    top: 23px;
    left: -5%;
    width: 0;
    height: 2px;
    background-color: #ffb400;
    opacity: 1;
    z-index: -1;
    -webkit-transition: all .4s cubic-bezier(.215, .61, .355, 1);
    transition: all .4s cubic-bezier(.215, .61, .355, 1);
    -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1);
    transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}

.gnav li a:active,
.gnav li a:focus,
.gnav li a:hover {
    text-decoration: none
}

.gnav li a:active div:before,
.gnav li a:focus div:before,
.gnav li a:hover div:before {
    opacity: 1;
    width: 110%
}

.sticky .gnav li a {
    padding: 5px 20px;
}



@media (max-width:1160px) {
    .gnav li a {
        padding: 10px 20px;
    }
}

@media (max-width:960px) {
    .gnav li a {
        padding: 10px 13px;
    }
}

@media (max-width:800px) {
    .gnav li a {
        padding: 10px 10px;
        font-size: 1em;
        letter-spacing: 0
    }
}

@media (max-width:720px) {
    .gnav li a {
        padding: 7px 10px;
        font-size: 1em;
        letter-spacing: 0
    }

    .sticky .gnav li a {
        padding: 5px 10px;
    }
}

@media (max-width:640px) {
    .gnav {
        float: none;
        width: 100%;
        margin-top: 0;
        padding: 0;
        border-top: 1px #fff solid;
    }

    .gnav li {
        float: left;
        width: 25%;
        margin: 0 !important;
        border-right: 1px #fff solid;
        -webkit-box-sizing: border-box;
        /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;
        /* Firefox, other Gecko */
        box-sizing: border-box;
        /* Opera/IE 8+ */
        background-color: #f1f1f1;
        background-color: #ffc13d;
    }

    .gnav li:last-child {
        border: none;
    }

    .gnav li:hover {
        background-color: rgb(231, 231, 231);
        -moz-transition: background 250ms;
        -o-transition: background 250ms;
        -webkit-transition: background 250ms;
    }

    .gnav li a {
        display: block;
        padding: 12px 0;
        margin: 0;
        font-size: 1em;
    }

    .sticky .gnav li a {
        padding: 5px 0;
    }
}

@media (max-width: 480px) {
    .gnav li a {
        padding: 10px 0;
    }
}


/*產品側選單------------------------------------------------------------------------*/

/*--按鈕---*/
.left_menu {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    padding: 3px 10px 5px 3px;
    margin-bottom: 0;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    /*white-space: nowrap;*/
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-image: url(../images/bg03.png);
    border: none;
    border-radius: 0;
    color: #333;
    margin-left: 0;
    z-index: 9999;
    font-size: 16px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottomright-radius: 5px;
}

.left_menu:hover {
    /*background-image: url(../images/bg02.png);*/
}

@media(max-width:768px) {
    .left_menu {
        display: inline-block;

    }

    .left_menu span,
    .left_menu i {
        display: inline-block;
        width: auto;
        height: auto;
    }
}

.left_menu i,
.left_menu span {
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    line-height: 1em;
    letter-spacing: 0.05em;
    color: #333;
}

.left_menu i {
    padding-left: 5px;
}

.list-group {
    margin-top: 50px;
    padding-left: 0;
    margin-right: 1em;
}

.list-group h3 {
    position: relative;
    font-size: 20px;
    line-height: 2em;
    font-weight: bold;
    padding: 0 0 0 2em;
    margin: 0 0 20px 0;
    text-align: left;
}

.list-group h3:before {
    position: absolute;
    top: 20px;
    left: 0;
    height: 1px;
    width: 1.5em;
    background-color: #333;
    display: inline-block;
    content: "";
}

.list-group h4 {
    display: block;
    font-size: 16px;
    line-height: 1.2em;
    font-weight: bold;
    padding: 0 0 0 2.5em;
    margin-top: 8px 0 0 0;
    text-align: left;
    color: #357dcc;
}

.list-group ul {
    list-style: none;
    list-style-type: none;
    padding: 0 0 12px 0;
    margin: 0 0 0 4em;
}

.list-group ul li {
    font-size: 15px;
    margin: 0;
    display: block;
    text-align: left;
}

.list-group ul li a {
    position: relative;
    margin-left: 0;
    padding: 8px 0;
    /*background-image: url(../images/bg02.png);*/
    color: #000;
    text-decoration: none;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    display: block;
    font-size: 15px;
    border-bottom: #999 dotted 1px;
}

.list-group ul li a::before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: -16px;
    top: 12px;
    content: "\f0da";
    font-size: 3px;
    color: #666;
}

.list-group ul li a .bg-danger2 {
    display: inline-block;
    color: rgb(241, 62, 77);
}

.list-group ul li button {
    color: #000;
    text-decoration: none;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    display: inline-block;
    font-size: 15px;
}

/*.list-group ul li a:hover {
                    transform: translate(8px, 0);
                    -moz-transform: translate(8px, 0);
                    -webkit-transform: translate(8px, 0);
                    -o-transform: translate(8px, 0);
                    -ms-transform: translate(8px, 0);                    
                    color: #1ba5cb;
                    font-weight:bold
                }*/
.list-group ul li a.active,
.list-group ul li button.active {
    background-color: rgba(27, 165, 203, 0.9);
    color: #fff !important;
}

.list-group ul li a:hover {
    background-color: rgba(27, 165, 203, 0.3);
    color: #333 !important;
}

.list-group ul li a.active .bg-danger2,
.list-group ul li button.active .bg-danger2,
.list-group ul li a:hover .bg-danger2 {
    background-color: rgba(255, 118, 141, 0.9);
    color: rgb(255, 255, 255) !important;
}



/*'第二層*/
.list-group ul li ul {
    margin-left: 0;
    margin-top: 0;

}

.list-group ul li ul li {
    font-size: 15px;
    margin: 0;
    display: block;
    text-align: left;
}

.list-group ul li a {
    position: relative;
    margin-left: 0;
    padding: 7px 0 7px 8px;
    /*background-image: url(../images/bg02.png);*/
    color: #000;
    text-decoration: none;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    display: block;
    font-size: 15px;
    border-bottom: #999 dotted 1px;
}

.list-group ul li ul li a::before {
    display: none;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    left: -16px;
    top: 12px;
    content: "";
}



@media(max-width:1160px) {


    .list-group h3 {
        padding: 0;
    }

    .list-group h3:before {
        top: 40px;
        width: 2em;
    }

    .list-group h4 {
        padding-left: 0.5em;

    }

    .list-group ul {
        margin-left: 2em;
    }

}

@media(max-width:1024px) {
    .list-group {
        margin-top: 40px;
        margin-right: 0;
    }

    .list-group ul {
        margin-left: 0.5em;
    }


    .list-group ul li a::before {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        position: absolute;
        left: -16px;
        top: 12px;
        content: "";
        font-size: 3px;
        color: #666;
    }
}

/*---------------------------------------------------------------------------------*/
.container2 {
    display: block;
    overflow: hidden;
    margin-top: 20px;
}

/*class_ul-----------------------------------------------------------------------class_ul*/
.class_ul {
    overflow: hidden;
}

.class_ul li {
    float: left;
    width: 32%;
    margin: 1% 2% 1% 0;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

.class_ul li img {
    width: 100%;
    height: auto;
}

.class_ul li:nth-child(3),
.class_ul li:nth-child(6),
.class_ul li:nth-child(9),
.class_ul li:nth-child(12),
.class_ul li:nth-child(15),
.class_ul li:nth-child(18),
.class_ul li:nth-child(21),
.class_ul li:nth-child(24),
.class_ul li:nth-child(27),
.class_ul li:nth-child(30),
.class_ul li:nth-child(33),
.class_ul li:nth-child(36) {
    margin-right: 0;
}

.class_ul a:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    content: "\f002";
    font-size: 24px;
    color: #fff;
    opacity: 0;
    position: absolute;
    left: 50%;
    margin-left: -12px;
    bottom: 40%;
    margin-top: -12px;
    z-index: 99;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.class_ul li:hover a:before {
    opacity: 1;
    bottom: 50%;
}

.class_ul li:hover img {
    opacity: 1;
    transform: scale(1.05);
}



.class_ul li h2 {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 10px 0 0 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.class_ul li h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 1px;
    background-color: #c2cd75;
    width: 0;
    z-index: 999;
    opacity: 0;
    transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -webkit-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -moz-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -o-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -ms-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}

.class_ul li:hover h2:after {
    opacity: 1;
    width: 100%;
}


.class_ul li:hover h2 {
    -webkit-transform: translate(10px);
    transform: translate(10px);
}



@media(max-width:1366px) {}

@media(max-width:768px) {}

@media(max-width:540px) {
    .class_ul {
        margin-left: 25px;
        margin-right: 25px;
    }


    .class_ul li {
        float: left;
        width: 46%;
        margin: 2% !important;
    }
}


@media(max-width:480px) {
    .class_ul {
        margin-left: 0;
        margin-right: 0;
    }


    .class_ul li {
        float: left;
        width: 46%;
        margin: 2% !important;
    }
}

/*class_ul2-----------------------------------------------------------------------class_ul2*/
.class_ul2 {
    overflow: hidden;
}

.class_ul2 li {
    text-align: center;
}

.class_ul2 li img {
    width: 100%;
    height: auto;
}

.class_ul2 li .black_bg div {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    opacity: 0;
}

.class_ul2 li .black_bg p {
    color: #f2f2f2;
    font-size: 15px;
    padding: 10px;
    margin: 0;
}

/*.class_ul2 li:hover .img_make3 {
    color: #fff;
    width: 100%;
    height: 100%;
    opacity: 1;
}*/
.class_ul2 li:hover .black_bg div {
    bottom: 0;
    opacity: 1;
}

.class_ul2 li:hover img {
    opacity: 1;
    transform: scale(1.05);
}



.class_ul2 li h2 {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 10px 0 0 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.class_ul2 li h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    height: 2px;
    background-color: #5fb3ce;
    width: 0;
    z-index: 999;
    opacity: 0;
    transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -webkit-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -moz-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -o-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
    -ms-transition: width 400ms cubic-bezier(0.645, 0.045, 0.355, 1) 0ms;
}



.class_ul2 li:hover h2:after {
    opacity: 1;
    width: 100%;
}

.class_ul2 li h2 span {
    display: inline-block;
}

/*99*/
.class_ul2 li p {
    display: block;
    text-align: center;
    padding: 0;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-property: transform;
    transition-property: transform;
}



.class_ul2 li:hover p {
    -webkit-transform: translate(0, 5px);
    transform: translate(0, 5px);
}

@media(max-width:1024px) {
    .class_ul2 li h2 {
        font-size: 16px;
    }
}

@media(max-width:900px) {
    .class_ul2 li h2 {
        font-size: 18px;
    }

    .class_ul2 li h2 span {
        display: block;
        text-align: center;
    }

    .class_ul2 li h2 span:last-child {
        margin-top: 5px
    }
}

@media(max-width:768px) {
    .class_ul2 li h2 {
        font-size: 16px;
    }
}

/*二手區-------------------------------------------------------------------------------*/
/*secondhand_ul-----------------------------------------------------------------------secondhand_ul*/
.secondhand_ul {
    margin-top: 20px;
    overflow: hidden;
}

.secondhand_ul li {
    text-align: center;
}

.secondhand_ul li img {
    width: 100%;
    height: auto;
}


.secondhand_ul li:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.secondhand_ul li h2 {
    position: relative;
    display: block;
    font-size: 18px;
    line-height: 1.3em;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 0 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #229fce;
}

.secondhand_ul li .s_date {
    display: block;
    text-align: left;
    margin-top: 10px;
    color: #666666;
}

.secondhand_ul li .price {
    display: block;
    text-align: left;
    margin-top: 10px;
    color: #ee5151;
}




@media(max-width:1024px) {
    .secondhand_ul li h2 {
        font-size: 16px;
    }
}

@media(max-width:900px) {
    .secondhand_ul li h2 {
        font-size: 18px;
    }

    .secondhand_ul li h2 span {
        display: block;
        text-align: center;
    }

    .secondhand_ul li h2 span:last-child {
        margin-top: 5px
    }
}

@media(max-width:768px) {
    .secondhand_ul li h2 {
        font-size: 16px;
    }
}

/*二手區側欄-------------------------------------------------------------------------------*/
/*secondhand_ul-----------------------------------------------------------------------secondhand_ul*/
.secondhand_ul01 {
    overflow: hidden;
    display: block;
    width: 100%;
}

.secondhand_ul01 li {
    text-align: left;
    display: block;
    float: none;
}

.secondhand_ul01 li div>a>img {
    width: 100px;
    height: auto;
}


.secondhand_ul01 li:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.secondhand_ul01 li h2 {
    position: relative;
    display: block;
    font-size: 16px;
    line-height: 1.3em;
    font-weight: bold;
    text-align: left;
    padding: 0;
    margin: 0 0 0 0;
    color: #333;
}

.secondhand_ul01 li .s_date {
    display: block;
    text-align: left;
    margin-top: 10px;
    color: #666666;
}

.secondhand_ul01 li .price {
    display: block;
    text-align: left;
    margin-top: 5px;
    color: #ee5151;
}


@media(max-width:900px) {
    .secondhand_ul01 li h2 {
        font-size: 16px;
    }
}

@media(max-width:768px) {
    .secondhand_ul01 li h2 {
        font-size: 15px;
    }
}


/*商品內容頁--------------------------------------------------------------------------*/
.pro_content {
    display: block;
    margin-top: 50px;
    padding-bottom: 40px;
    padding-right: 20px;
    position: relative;
}

.page_title_right {
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    display: block;
}

a.change_map {
    text-align: center;
}

a.change_map i {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background: #2f9ec2;
    color: #fff;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
}

a.change_map span {
    display: block;
    font-size: 15px;
}

a.change_map:hover i {
    background: #1b7faa;
}

.pro_img {
    float: left;
    width: 48.5%;
    margin-right: 1.5%;
}

.pro_left {
    float: left;
    width: 48.5%;
    margin-left: 1.5%;
}

.fck_content {
    clear: both;
    display: block;
    padding: 15px 0;
    border-bottom: 1px #ccc solid;
    margin-bottom: 20px;
}

@media(max-width:540px) {}

.pro_img img {
    /* width: 100%;
    height: auto; */
}

.pro_left h1 {
    font-size: 24px;
    font-weight: bold;
    color: #8aac4f;
    margin: 0;
    line-height: 1.2em;
}

.pro_left h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #666;
}

.pro_left .pro_left_summary {
    font-size: 15px;
    line-height: 1.5em;
}

@media(max-width:1024px) {
    .pro_content {
        margin-top: 40px;
        padding-right: 10px;
    }
}

@media(max-width:768px) {
    .pro_content {
        padding-right: 0;
    }
}

@media print {
    .pro_content {
        display: block;
        margin-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        border: 1px #ccc solid;
    }
}

@media(max-width:640px) {
    .pro_img {
        float: none;
        width: auto;
        margin: 0 25px;
    }

    .pro_left {
        float: none;
        width: auto;
        margin: 20px 25px 0 25px;
    }
}

@media(max-width:540px) {
    .pro_img {
        float: none;
        width: auto;
        margin: 0 0;
    }

    .pro_left {
        float: none;
        width: auto;
        margin: 20px 0 0 0;
    }

    .col-sm-9 {
        /*padding-left: 20px;
            padding-right: 20px;*/
    }
}


/*-產品縮圖及大圖------------------------------------------------------------------------------------------*/
.img_box {
    width: 100%;
    margin: 0;
}

/*JQuery*/

.showbox {
    width: 100%;
    margin: 0 auto;
    border: 1px #ccc solid;
    overflow: hidden;
}

.showbox img {
    width: 100%;
    height: auto;
}

/*場地---------------------------------------------------------------------------------*/
.site_content {
    display: block;
    overflow: hidden;
    padding-right: 20px;
}

/*場地縮圖---------------------------------------------------------------------------*/
.thumb_img {
    width: 100%;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.thumb_img li {
    float: left;
    width: 19.2%;
    margin-top: 1%;
    margin-right: 1%;
    border: 1px #ccc solid;
}

.thumb_img li:nth-child(5),
.thumb_img li:nth-child(10),
.thumb_img li:nth-child(15),
.thumb_img li:nth-child(20) {
    margin-right: 0;
}

.thumb_img li a {
    display: block;
    border: 1px solid #ccc;
    vertical-align: bottom;
}

.thumb_img li img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

@media(max-width:360px) {

    .thumb_img li {
        float: left;
        width: 24.2%;
        margin-top: 1%;
        margin-right: 1%;
        border: 1px #ccc solid;
    }

    .thumb_img li:nth-child(5),
    .thumb_img li:nth-child(10),
    .thumb_img li:nth-child(15),
    .thumb_img li:nth-child(20) {
        margin-right: 1%;
    }

    .thumb_img li:nth-child(4),
    .thumb_img li:nth-child(8),
    .thumb_img li:nth-child(12),
    .thumb_img li:nth-child(16),
    .thumb_img li:nth-child(20) {
        margin-right: 0;
    }
}

/*線上場地預借查詢列---------------------------------------------------------------------------------------*/
.site_row {
    display: block;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;

}

.site_row_group {
    display: inline-block;
    padding-bottom: 10px;
}

.site_row_group .site_row_label {
    display: inline-block;
}

.site_row_group input.form-control {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 7em;
    width: 8em;
}

.site_row_group select.form-control {
    width: auto;
    padding-left: 5px;
    padding-right: 5px;

}


.site_row_group .radio-inline {
    padding-left: 0;
    margin-left: 0;
    display: inline-block;
}

.site_row_group .form-control {
    display: inline-block;
}

@media(max-width:375px) {
    .site_row_group .site_row_label {
        display: inline-block;
        width: 5em;
    }

    .site_row_group input.form-control {
        padding-left: 8px;
        padding-right: 8px;
        min-width: 7em;
        width: 12em;
    }

    .site_row_group select.form-control {
        width: auto;
        padding-left: 5px;
        padding-right: 5px;
        width: 12em;
    }
}

@media print {
    .site_row {
        display: none;
    }
}



/*表格*/
.lease_table {}

.lease_table {}

.lease_table td,
.lease_table th {
    background-color: #fff !important;
    text-align: center;


}

.table-bordered th,
.table-bordered td {
    border: 1px solid #ccc !important;
}

.lease_table td.td01 {
    position: relative;
    padding: 0 0 35px 0;
}


.lease_week {
    display: block;
    overflow: hidden;
    padding-bottom: 5px;
}

.lease_week_left {
    float: left;
    width: 33%;
    padding-left: 1%;
}

.lease_week_center {
    float: left;
    width: 34%;
    text-align: center;
}


.lease_week_right {
    float: left;
    width: 33%;
    text-align: right;
    padding-right: 1%;
}

.lease_week a {
    display: block;
    font-size: 15px;
    color: #333;
}

.lease_week a:hover {
    color: #228ddd;
}

/*日檢視模式===========================================================*/
.site_day_box {
    float: left;
    width: 25%;
    border: 1px #ccc solid;
}

/*租資資料區===============================================================*/
.lease_box {
    margin: 0;
    padding: 0;
    display: block;
}

.lease_box li {
    font-size: 15px;
    display: block;
    color: #555;
    border-top: 1px #ccc dotted;
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 6px;
    width: auto;
}

.lease_box li:first-child {
    border: none !important;
}

/*週模式*/
.lease_box_no {
    font-size: 15px;
    display: block;
    color: #999;
}

/*日模式*/
.lease_box_no2 {
    font-size: 15px;
    display: block;
    color: #999;
}


/*我要預約鈕------------------------------------------------------------------------------------------------*/
a.lease_btn {
    font-size: 14px;
    font-weight: normal;
    color: #40a4c4;
    position: absolute;
    bottom: 8px;
    margin-left: 0;
    display: block;
    text-align: center;
    width: 100%;
}

/*print_ul---------印刷類主分類--------------------------------------------------------------print_ul*/
.print_ul {
    overflow: hidden;
}

.print_ul li {}

.print_ul li a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}



.print_ul li a img {
    width: 100%;
    height: auto;
}

.print_ul li a:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    content: "\f002";
    font-size: 24px;
    color: #fff;
    opacity: 0;
    position: absolute;
    left: 50%;
    margin-left: -12px;
    bottom: 40%;
    margin-top: -12px;
    z-index: 99;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.print_ul li:hover a:before {
    opacity: 1;
    bottom: 50%;
}

.print_ul li:hover img {
    opacity: 1;
    transform: scale(1.05);
}


.print_ul li .img_make3 {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    opacity: 0;
    color: #fff;
    transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
}


.print_ul li .img_make3 div {
    position: absolute;
    bottom: -100px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: block;
    width: 100%;
    padding: 10px;
    opacity: 0;
}

.print_ul li .img_make3 p {
    color: #f2f2f2;
    font-size: 15px;
    padding: 0;
    margin: 0;
}

.print_ul li:hover .img_make3 {
    color: #fff;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.print_ul li:hover .img_make3 div {
    bottom: 0;
    opacity: 1;
}

.print_ul li h2 {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 0;
    margin: 10px 0 0 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}


.print_ul li:hover h2 {
    -webkit-transform: translate(0, -5px);
    transform: translate(0, -5px);
}


@media(max-width:540px) {
    .print_ul {
        margin-left: 25px;
        margin-right: 25px;
    }
}

@media(max-width:480px) {
    .print_ul {
        margin-left: 0;
        margin-right: 0;
    }
}

/*頁面map----------------------------------------------------------------------------------*/
.page_map {
    display: block;
    text-align: right;
}

.page_map a,
.page_map i,
.page_map span {
    display: inline-block;
    color: #555;
    text-decoration: none;
    font-size: 15px;
    padding: 0 2px;
}

.page_map a:hover {
    color: #8aac4f;
}

/*---小資方案列表--------------------------------------------------------------------------*/
.plan_ul {}

.plan_ul li {
    display: block;
    margin: 0 0 20px 0;
}

.plan_ul li img {
    width: 100%;
    height: auto;
}

/*三欄式ul-------------------------------------------------------------------*/
.li3 li {
    float: left;
    width: 31.33%;
    margin: 1%;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}



@media(max-width:540px) {
    .li3 li {
        float: left;
        width: 46%;
        margin: 2%;
    }
}

/*4欄式ul-------------------------------------------------------------------*/
.li4 li {
    float: left;
    width: 23%;
    margin: 1%;
    -moz-transition: background 250ms;
    -o-transition: background 250ms;
    -webkit-transition: background 250ms;
}

@media(max-width:960px) {
    .li4 li {
        float: left;
        width: 32.33%;
        margin: 0.5%;
    }
}

@media(max-width:640px) {
    .li4 li {
        float: left;
        width: 48%;
        margin: 1%;
    }
}

/*縮略----------------------------------------------------------------*/
.figcaption,
.figcaption2 {
    font-size: 16px;
    line-height: 1.5em;
    width: auto;
    height: 4.5em;
    margin: 5px 0 10px 0;
    overflow: hidden;
}

.figcaption2 {
    height: 3em;
    text-align: left;
    margin: 5px 0 5px 0;
}

.figcaption p,
.figcaption2 p {
    font-size: 16px;
    margin: 0;
    line-height: 1.5em;
}

/*會議記錄------------------------------------------------------============*/
.ind_meeting_record_ul {}

.ind_meeting_record_ul li {
    display: block;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    padding: 7px 0;
    background: #fff;
}

.ind_meeting_record_th {
    background-color: #5fb3ce !important;
    border-bottom: 2px #5fb3ce solid !important;
    color: #fff !important;
}

.ind_meeting_record_th div {
    color: #fff !important;
}

.ind_meeting_record_ul .div01 {
    float: left;
    width: 75%;
    padding: 0 8px;
    color: #666;
    font-size: 15px;
}

.ind_meeting_record_ul .div02 {
    float: left;
    width: 25%;
    padding: 0 8px;
    color: #666;
    text-align: right;
    font-size: 15px;
}

.ind_meeting_record_ul .span01 {
    display: none;
}

.ind_meeting_record_ul a {
    color: #3ea3ca;
}

.ind_meeting_record_ul a:hover {
    color: #666;
}

@media(max-width:414px) {
    .ind_meeting_record_th {
        display: none !important;
    }

    .ind_meeting_record_ul li {
        background: none;
    }

    .ind_meeting_record_ul .div01 {
        float: none;
        width: 100%;
    }

    .ind_meeting_record_ul .div02 {
        float: none;
        width: 100%;
        padding: 6px 8px 0 8px;
        text-align: left;
    }

    .ind_meeting_record_ul .span01 {
        display: inline;
    }
}

/*======================================================================*/
.page_footer1 {
    text-align: center
}

.page_footer {
    clear: both;
    overflow: hidden;
    text-align: center;
    margin-bottom: 30px;
}

.pagination>li>a,
.pagination>li>span {
    padding: 0.2em 0;
    width: 2em;
    background-color: #fff;
    border: 1px solid #c1c1c1;
    color: #555;
    border-radius: 0;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus {
    color: #fff;
    background-color: #c1c1c1;
    border-color: #ccc;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #c1c1c1;
    border-color: #ccc;
    color: #FFF;
}

.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    border-color: #ccc;
}

@media(max-width:414px) {
    .page_footer {
        clear: both;
        overflow: hidden;
        text-align: center;
        margin-bottom: 10px;
    }
}

.no_data {
    text-align: center;
    display: block;
    border: 1px #ccc solid;
    padding: 15px;
    overflow: hidden;
}

/*副選單----------------------------------------------------------------------------------------------*/
.sub_class_row {
    display: block;
}

.sub_class_nav {}

.sub_class_nav li {
    display: inline-block;
}

.sub_class_nav li a {
    display: block;
    padding: 3px 1em;
    background-color: #fca195;
    font-size: 15px;
}

.sub_class_nav li a:hover {
    background-color: #fd8979;
}

.store_btn a {
    display: inline-block;
}

/*訂單搜尋列---------------------------------------------------------------------*/
.orders_search_row {
    display: block;
    border-bottom: 1px #ccc solid;
    padding-top: 10px;
    padding-bottom: 10px;
    padding: 5px 10px;
    text-align: left;
}

.form_group {
    display: inline-block;
    margin: 2px 0;
}

.form_group label,
.form_group span,
.form_group .btn,
.form_group .form-control {
    display: inline-block;
}


.orders_search_row .form-control {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 15px;
    border-radius: 4px;
    border-color: #ccc;
    width: auto;
}

.orders_search_row .btn {
    height: 32px;
    padding: 0 10px;

}

select.form-control {
    padding-top: 3px;
    font-size: 15px;
    line-height: 2em;
}

.orders_p {
    display: block;
    padding: 2px 10px;
    padding-bottom: 0;
    color: #f65757;
    font-size: 14px;
}


@media(max-width:414px) {
    .orders_search_row {
        padding: 5px 0;
    }

    .form_group {
        display: block;
        margin-bottom: 10px;
    }

    .form_group label,
    .form_group span,
    .form_group .btn,
    .form_group .form-control {
        display: block;
    }

    .form_group .form-control {
        width: 100%;
    }
}

/*--------------------------------------------------------------------------------*/
.orders_ul {
    padding: 0;
    margin: 0;
}

.orders_ul li {
    float: left;
    overflow: hidden;
    border: 1px #ccc solid;
    padding: 1px;
    margin: 1%;
    width: 31.33%;
    background: #fff;
}

.orders_ul li h2 {
    background: #5fb3ce;
    color: #fff;
    margin: 0;
    padding: 8px;
}

.orders_ul_txt {
    display: block;
    margin: 8px;
}

.orders_ul li p {
    margin: 3px 0;
    padding: 0;
    font-size: 15px;
    color: #333;
}

.orders_ul_btn {
    display: block;
    text-align: center;
    margin: 8px 0;
    padding-top: 8px
}

.orders_ul_btn a {
    display: inline-block;
    width: auto;
    padding: 3px 0.3em;
    border: 1px #ccc solid;
    border-radius: 4px;
    text-align: center;
    font-size: 15px;
    color: #333;
}

.orders_ul_btn a i {
    display: inline-block;
    font-size: inherit;
    padding-right: 5px;
    color: initial;
}

@media(max-width:960px) {
    .orders_ul li {
        margin: 1%;
        width: 48%;
    }
}


@media(max-width:479px) {
    .orders_ul li {
        margin: 1% 0;
        width: 100%;
    }
}

/*訂單明細-------------------------------------------------------------------------------------------*/
.item_row {
    overflow: hidden;
    margin-top: 10px;
}

.item_left {
    float: left;
    width: 60%;
}

.item_left02 {
    float: left;
    width: 40%;
}

.orders_item {
    overflow: hidden;
    width: 100%;
    position: relative;
    display: block;
    margin-bottom: 5px;
}

.orders_item_label {
    width: 5em;
    float: left;
    padding: 0;
}

.orders_item_ctrl {
    top: 0;
    left: 0;
    display: block;
    margin-left: 5em;
    vertical-align: middle;
}

.orders_item_ul {
    padding: 0;
    margin: 0;
}

.orders_item_ul li {
    float: left;
    width: 23%;
    padding: 0;
    margin: 1%;
    text-align: center;
}

.orders_item_ul li .text {
    overflow: hidden;
    height: 4.2em;
    margin-top: 10px;
}

.orders_item_ul li h4 {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3em;
    padding: 0;
    margin: 0 0 0 0;
}

.orders_item_ul li p {
    font-size: 15px;
    line-height: 1.3em;
    height: 2.4em;
    overflow: hidden;
    padding: 0;
    margin: 0 0 0 0;
}


.orders_item_ul li img {
    width: 100%;
    height: auto;
}

@media(max-width:540px) {
    .item_left {
        float: left;
        width: 65%;
    }

    .item_left02 {
        float: left;
        width: 35%;
    }

    .orders_item span,
    .orders_item div {
        font-size: 15px;
    }
}


@media(max-width:480px) {
    .orders_item_ul li {
        width: 31.33%;
        margin: 1%;
    }
}

@media(max-width:375px) {
    .orders_item_ul li {
        width: 48%;
        margin: 1%;
    }

    .item_left,
    .item_left02 {
        float: none;
        width: 100%;
    }
}

/*關鍵字標籤----------------------------------------------------------*/
.tab_row {
    display: block;
    padding: 15px 0 0 0;
}

.tab_row i {
    font-size: 15px;
    color: #5fb3ce;
}

.tab_row a {
    display: inline-block !important;
    padding: 2px 5px;
    border: 1px #ccc solid;
    background: #fff;
    font-size: 15px;
    margin: 3px;
}

/*識別證-------------------------------------------------------------------------------------*/
.card_box {
    display: block;
    width: 700px;
    margin: 30px auto;
}

.card_box img {
    width: 100%;
    height: auto;
}


.card_row1 {}

.card_row2 {
    background: url(../images/card_02.jpg);
    background-size: 100%;
    padding: 1.5em 0;
    overflow: hidden;
    display: block;
}

.card_text {
    display: block;
    margin-left: 4em;
}

.card_text h1 {
    font-family: DFKai-SB;
    font-size: 52px;
    color: #222;
    font-weight: bold;
    margin: 0 0 0.5em 0;
    padding: 0;
    letter-spacing: 0.05em;
}

.card_text p {
    margin: 0.5em 1em;
    padding: 0;
}

.card_text span {
    font-family: DFKai-SB;
    font-size: 32px;
    color: #222;
    font-weight: bold;
    letter-spacing: 0.05em;
    display: inline-block;
}

@media(max-width:720px) {
    .card_box {
        width: 600px;
        margin: 20px auto;
    }

    .card_text {
        margin-left: 3em;
    }

    .card_text h1 {
        font-size: 48px;
    }

    .card_text span {
        font-size: 28px;
    }
}

@media(max-width:640px) {
    .card_box {
        width: 100%;
        margin: 0 auto;
    }
}

@media(max-width:540px) {
    .card_row2 {
        padding: 1.2em 0;
    }

    .card_text {
        margin-left: 3em;
    }

    .card_text h1 {
        font-size: 48px;
    }

    .card_text p {
        margin: 0.4em 1em;
        padding: 0;
    }

    .card_text span {
        font-size: 28px;
    }
}

@media(max-width:480px) {
    .card_row2 {
        padding: 1.2em 0;
    }

    .card_text {
        margin-left: 1em;
    }

    .card_text h1 {
        font-size: 42px;
    }

    .card_text p {
        margin: 0.3em 1em;
        padding: 0;
    }

    .card_text span {
        font-size: 24px;
        letter-spacing: 0;
    }
}

@media(max-width:375px) {
    .card_row2 {
        padding: 1.2em 0;
    }

    .card_text {
        margin-left: 0.5em;
    }

    .card_text h1 {
        font-size: 38px;
        letter-spacing: 0.01em;
    }

    .card_text p {
        margin: 0.3em 0em;
        padding: 0;
    }

    .card_text span {
        font-size: 20px;
        letter-spacing: 0;
    }
}


/*photo_list------------------------------------------------------------*/
.site_ul_row {
    display: block;
    text-align: center;
    overflow: hidden;
}

.photo_list {
    display: block;
    overflow: hidden;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.photo_list li {
    /*position: relative;*/
    background: #fff;
    text-align: left;
    float: left;
    display: block;
    width: 24%;
    margin: 0.5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

.photo_list li h4 {
    color: #fff;
    font-size: 16px;
    display: block;
    background: #5fb3ce;
    margin: 0 0 10px 0;
    padding: 8px 3px;
    background: #999;
}

a.lease_btn2 {
    font-size: 14px;
    font-weight: normal;
    color: #1695db;
    display: block;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 10px;
}

@media print {
    a.lease_btn2 {
        display: none;
    }
}

.del_btn a {
    font-size: 14px;
    font-weight: normal;
    color: #ff622f;
    display: block;
    text-align: center;
    padding-top: 5px;
}


.photo_list2 {
    display: block;
    overflow: hidden;
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.photo_list2 li {
    display: inline-block;
    border: 1px #ccc solid;
    padding: 10px;
    width: 18%;

}



@media(max-width:1024px) {
    .photo_list li {
        width: 32.33%;
        margin: 0.5%;
    }
}

@media(max-width:800px) {
    .photo_list li {
        width: 31.33%;
        margin: 1%;
    }
}

@media(max-width:640px) {
    .photo_list li {
        width: 47%;
        margin: 1.5%;
    }
}

/*場地預約日模式-----------------------------------*/
#outbox {
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    column-count: 4;
    column-gap: 10px;
    width: 100%;
    float: left;
}

.content_box {
    width: 100%;
    display: inline-block;
    border: 1px solid #b3b3b3;
    padding: 3px;
    margin: 5px 5px 5px 0;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.5em;
    letter-spacing: 1pt;
    color: #353535;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
}

.content_box h1 {
    color: #fff;
    font-size: 16px;
    display: block;
    background: #5fb3ce;
    margin: 0 0 10px 0;
    padding: 8px 3px;
    background: #999;
}


.content_box_txt {
    border-bottom: 1px dotted #999;
    margin: 0 5px;
}

@media(max-width:1160px) {
    #outbox {
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        column-count: 3;
        column-gap: 10px;
    }
}

@media(max-width:800px) {
    #outbox {
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;
    }
}

@media print {
    #outbox {
        -moz-column-count: 3;
        -moz-column-gap: 10px;
        -webkit-column-count: 3;
        -webkit-column-gap: 10px;
        column-count: 3;
        column-gap: 10px;
    }
}


/*場地預約留言板=========================================================*/
.site_contact {
    margin: 0 0%;
}

.site_contact_btn {
    text-align: right;
    margin-bottom: 10px;
}

.site_contact_box {
    display: block;
    border: 1px #ccc solid;
    border-radius: 10px;
    padding: 15px 15px 8px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.40);
}

.site_contact_top {
    overflow: hidden;

}

.site_contact_name {
    float: left;
    font-size: 16px;
    font-weight: bold;
}

.site_contact_time {
    float: right;
    font-size: 15px;
    color: #777
}

.site_contact_ps {
    margin: 10px 0;
    clear: both;
    font-size: 15px;
    line-height: 1.7em;
}

.site_contact_sub_row {
    border-left: 2px #48b7cd solid;
    margin-left: 0.5em;
}

.site_contact_sub_ps {
    margin-left: 10px;
    margin-top: 8px;
    margin-bottom: 0px;
    border-bottom: 1px #ccc dashed;

}

.site_contact_sub_ps:last-child {
    border: none;
}

@media(max-width:640px) {
    .site_contact_name {
        float: none;
    }

    .site_contact_time {
        float: none;
    }
}

/*報名活動的列表------------------------------------------------------------*/
.sign_ul {
    display: block;
    overflow: hidden;
}

.sign_ul li {
    display: block;
    overflow: hidden;
    border-bottom: 1px rgb(175, 175, 175) dashed;
    padding: 8px 0;
}

li.sign_th {
    border-bottom: 2px #5b92af solid;
    background: rgba(0, 0, 0, 0.1);
}

li.sign_th div,
li.sign_td div {
    text-align: center;
    text-align: center;
}

li.sign_td .sign_title {
    text-align: left;
}

.sign_ul li .sign_title {
    float: left;
    width: 34%;
    margin-right: 1%;
    /* background: #1695db; */
}

.sign_ul li .sign_date {
    float: left;
    width: 19%;
    margin-right: 1%;
    /* background: #e1ec7a; */
}

.sign_ul li .sign_time {
    float: left;
    width: 26%;
    margin-right: 1%;
    /* background: #ecbe7a; */
}

.sign_ul li .sign_type {
    float: left;
    width: 18%;
    /* background: #7ae6d4; */
}

@media(max-width:800px) {}


/*響應表格--------------------------------------------------------------------------*/

.responsive-table {
    border-collapse: collapse;
    width: 100%;
}

.responsive-table tr td,
.responsive-table tr th {
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 16px;
    color: #666;
    text-align: center;
}

.responsive-table tr th {
    background: #888b96;
    color: #fff;
    text-align: center;
}

/* .responsive-table tr td:first-child {
    text-align: left;
} */

.responsive-table tr td a {
    color: #3598c2
}

.responsive-table>tbody>tr {}

.responsive-table>tbody>tr:nth-of-type(odd) {}


@media only screen and (max-width: 992px) {
    table.responsive-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        display: block;
        position: relative;
        /* sort out borders */
    }

    table.responsive-table td:empty:before {
        content: "";
    }

    table.responsive-table th,
    table.responsive-table td {
        margin: 0;
        vertical-align: top;

    }

    table.responsive-table td a {}

    table.responsive-table th {
        text-align: left;
    }

    table.responsive-table thead {
        display: block;
        float: left;
    }

    table.responsive-table thead tr {
        display: block;
        padding: 0 0px 0 0;
    }

    table.responsive-table thead tr th::before {
        content: "";
    }

    table.responsive-table tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }

    table.responsive-table tbody tr {
        display: inline-block;
        vertical-align: top;
    }

    table.responsive-table th {
        display: block;
        text-align: right;
        min-height: 2em;
        padding-left: 10px;
        padding-right: 10px;
        border-bottom: none;
        font-size: 16px;
    }

    table.responsive-table td {
        display: block;
        min-height: 2em;
        text-align: left;
        padding-left: 0.5em;
        padding-right: 0.5em;
        border-bottom: none;
        font-size: 16px;

    }

    table.responsive-table td:last-child {
        border-bottom: 1px #ccc solid;
        margin-bottom: 20px;
    }


    table.responsive-table tr {
        border-bottom: none;
        padding: 0;
    }

    table.responsive-table thead {
        border: 0;
        border: none;

    }

    .responsive-table>tbody>tr {}
}


/*---------------*/
.sign_data_row {
    display: block;
    border: 1px #ccc solid;
    background: #fff;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
}

.radio_ul {}

.radio_ul li {
    display: block;
    padding: 3px 0;

}

.radio_ul li label {
    display: inline;
    font-weight: normal;
}

.radio_ul li input {
    display: inline-block;
    margin-right: 6px;
}

/*報名資料列表---------------------------------------------------------------*/
.trtr_ul {
    display: block;
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    border: 1px #ccc solid;
    margin-bottom: 0.5em;

}

.trtr_ul_header {
    overflow: hidden;
    display: block;
    background: rgba(110, 86, 63, 0.3);
    padding: 8px 16px;
}

.trtr_ul_header_left {
    float: left;
    width: 50%;

}

.trtr_ul_header_right {
    float: left;
    width: 50%;
    text-align: right;

}

.trtr_ul_body {
    display: block;
    overflow: hidden;
    padding: 8px 16px;
    font-size: 15px;
}

.trtr_ul_body_1 {
    float: left;
    width: 25%;
}

.trtr_ul_body_2 {
    float: left;
    width: 25%;
}

.trtr_ul_body_3 {
    float: left;
    width: 30%;
}

.trtr_ul_body_4 {
    float: left;
    width: 20%;
    text-align: right;

}

.trtr_ul_body_ul {
    display: block;
}

.trtr_ul_body_ul li {
    display: block;
    color: #444;
    padding: 1px 0;
}

.trtr_ul_body .btn {
    font-size: 14px;
    width: 5em;
    margin: 2px;
    padding: 3px 8px;
}

@media(max-width:960px) {
    .trtr_ul_body_1 {
        width: 26%;
    }

    .trtr_ul_body_2 {
        width: 26%;
    }

    .trtr_ul_body_3 {
        width: 33%;
    }

    .trtr_ul_body_4 {
        width: 15%;
        text-align: right;
    }
}

@media(max-width:600px) {
    .trtr_ul_body_1 {
        width: 50%;
    }

    .trtr_ul_body_2 {
        width: 50%;
    }

    .trtr_ul_body_3 {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px #ccc solid;
        width: 100%;
    }

    .trtr_ul_body_4 {
        padding-top: 20px;
        padding-bottom: 5px;
        width: 100%;
        text-align: center;
    }
}

@media(max-width:414px) {
    .trtr_ul_body_1 {
        width: 100%;
    }

    .trtr_ul_body_2 {
        width: 100%;
    }

    .trtr_ul_body_3 {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px #ccc solid;
        width: 100%;
    }

    .trtr_ul_body_4 {
        padding-top: 20px;
        padding-bottom: 5px;
        width: 100%;
        text-align: center;
    }
}

.hr01 {
    display: block;
    height: 1px;
    background: #ccc;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/*margin-------*/
.m5 {
    margin: 5px;
}

.m10 {
    margin: 10px;
}

.m15 {
    margin: 15px;
}

.m20 {
    margin: 20px;
}

.m25 {
    margin: 25px;
}

.m25 {
    margin: 25px;
}

.m30 {
    margin: 30px;
}

.m40 {
    margin: 40px;
}

.m50 {
    margin: 50px;
}

/*margin-top-------*/
.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

/*margin-bottom-------*/
.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb25 {
    margin-bottom: 25px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

/*margin-left-------*/
.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.ml50 {
    margin-left: 50px;
}

/*margin-right-------*/
.mr5 {
    margin-right: 5px;
}

.mr10 {
    margin-right: 10px;
}

.mr15 {
    margin-right: 15px;
}

.mr20 {
    margin-right: 20px;
}

.mr25 {
    margin-right: 25px;
}

.mr30 {
    margin-right: 30px;
}

.mr40 {
    margin-right: 40px;
}

.mr50 {
    margin-right: 50px;
}

/*padding-------*/
.p5 {
    padding: 5px;
}

.p10 {
    padding: 10px;
}

.p15 {
    padding: 15px;
}

.p20 {
    padding: 20px;
}

.p25 {
    padding: 25px;
}

.p25 {
    padding: 25px;
}

.p30 {
    padding: 30px;
}

.p40 {
    padding: 40px;
}

.p50 {
    padding: 50px;
}

/*padding-top-------*/
.pt5 {
    padding-top: 5px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt20 {
    padding-top: 20px;
}

.pt25 {
    padding-top: 25px;
}

.pt30 {
    padding-top: 30px;
}

.pt40 {
    padding-top: 40px;
}

.pt50 {
    padding-top: 50px;
}

/*padding-bottom-------*/
.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb25 {
    padding-bottom: 25px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

/*padding-left-------*/
.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.pl25 {
    padding-left: 25px;
}

.pl30 {
    padding-left: 30px;
}

.pl40 {
    padding-left: 40px;
}

.pl50 {
    padding-left: 50px;
}

/*padding-right-------*/
.pr5 {
    padding-right: 5px;
}

.pr10 {
    padding-right: 10px;
}

.pr15 {
    padding-right: 15px;
}

.pr20 {
    padding-right: 20px;
}

.pr25 {
    padding-right: 25px;
}

.pr30 {
    padding-right: 30px;
}

.pr40 {
    padding-right: 40px;
}

.pr50 {
    padding-right: 50px;
}

/*自助旅行表單步驟------------------------------------------------*/
.trdiy_step {
    display: block;
    text-align: center;
    padding: 10px 0;
}

.trdiy_step_ul {
    display: inline-block;
}

.trdiy_step_ul li {
    display: inline-block;
    padding: 3px 0;
}

.trdiy_step_ul li .num {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    padding: 0 5px;
}

ul.trdiy_step_ul li.active .num {
    background: #ff7e5d !important;
}

ul.trdiy_step_ul li a:hover .num {
    background: #ff7e5d !important;
}

.trdiy_step_ul li .tt {
    display: inline-block;
    padding: 0 5px;
    line-height: 28px;
}

.trdiy_step_ul li .linne {
    display: inline-block;
    height: 1px;
    background: #666;
    width: 3em;
    vertical-align: middle;
    padding: 0 5px;
}


/*自助旅行表單區------------------------------------------------*/
.trdiy_add_form {
    display: block;
    width: 100%;
    margin: 10px auto;
}






@media(max-width:1024px) {
    .trdiy_add_form {
        display: block;
        width: 95%;
        margin: 10px auto;
    }
}

.trdiy_add_form2 {
    /*第三頁的*/
    display: block;
    width: 400px;
    margin: 50px auto 15px auto;
}



/*上傳核銷圖片------------------------------------------------------*/
.trdiy_img_box img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.trdiy_img {
    position: relative;
}

.trdiy_img_close {
    position: absolute;
    top: 3px;
    right: 3px;

}

.trdiy_img_close a {
    color: #fff;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    margin: 6px
}

.trdiy_img_close a:hover {
    background: rgba(0, 0, 0, 0.8);
}

.trdiy_img_close i {
    font-size: 20px;
    font-weight: normal;
    line-height: 35px;
}

.trdiy_img_box p {
    display: block;
    padding: 2px 8px;
    font-size: 15px;
}

/*左右兩欄-標題列---------------------------------------------*/
.title_row {
    overflow: hidden;
    border-bottom: 1px #ccc solid;
    margin-bottom: 1em;
}

.title_row_left {
    float: left;
}

.title_row_right {
    float: right;
}

.title_row_left h4 {
    font-size: 22px;
}

/*員工旅遊列表-------------------------------*/
.trdiy_list {

    display: block;
    border: 1px #ccc solid;
    border-radius: 0;
    padding: 3px;
    background: #fff;
    overflow: hidden;
    color: #555;
    font-size: 15px;
    line-height: 1.8em;
    margin-bottom: 20px;
}

.trdiy_list_msg {
    display: block;
    background: #c21e34;
    color: #fff;
    padding: 5px 10px;
}

.trdiy_list_msg_green {
    display: block;
    background: #7db64a;
    color: #fff;
    padding: 5px 10px;
}


.trdiy_row {
    position: relative;
    display: block;
    overflow: hidden;
}

.trdiy_list_left {
    margin-right: 22rem;
    padding: 8px 10px;
}

.trdiy_list_right {
    position: absolute;
    top: 15px;
    right: 0;
    width: 20rem;
}

.trdiy_list_left .title04,
.trdiy_list_left a .title04 {
    font-size: 18px;
    font-weight: bold;
    color: #228ddd;
    margin: 0;
    padding: 0;
}

.trdiy_list_left .btn-xs {
    margin-bottom: 5px;
}



.trdiy_list_right .btn {
    width: 13em;
}


/*送件狀態---*/
.handle_box {
    display: block;
    margin-bottom: 5px;
}

.handle_ul {
    display: block;
}

.handle_ul li {
    display: inline-block;
    padding-right: 1.5em;
    position: relative;
    margin: 4px 0;
}

.handle {   
    display: block;
    padding: 4px 14px;
    border-radius: 30px;
    background: #e0e0e0;
    color: #333;
    font-size: 15px;
    line-height: 1em;  
    width: 6em;  
    text-align: center;
}
.handle1_active {
    background: #f090a0 !important;
    color: #fff !important;
}

.handle:after {
    position: absolute;
    right: 0;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size:15px;
    width:20px;
    color: #999;
    content: "\f061";
}

.handle_ul li:last-child .handle:after {
    content: "";
}




@media(max-width:600px) {
    .trdiy_list_left {
        margin-right: 0;

    }

    .trdiy_list_right {
        margin-top: 5px;
        margin-bottom: 15px;
        padding-left: 10px;
        padding-right: 10px;
        position: static;
        top: 0;
        right: 0;
        width: auto;
        text-align: center;
    }

    .trdiy_list_right .btn {
        width: 80%;
    }
}

@media(max-width:480px) {
    .trdiy_list_right .btn {
        width: 100%;
    }
}


/*ol01有序號列表-----------------------*/
.ol01 {
    margin: 0 0 0 1.5em;
    padding: auto;
    list-style-type: decimal
}

.err_ul ul {
    display: inline-block;
}

.err_ul ul li {
    position: relative;
    display: inline-block;
    color: #ff566d;
    padding-right: 1.5rem;
}

.err_ul ul li::after {
    position: absolute;
    content: "、";
    right: 0;
    top: 0;
}

.err_ul ul li:last-child::after {
    content: "";
}

.tab-content {
    background: #fff;
    overflow: hidden;
    border-right: 1px #ccc solid;
    border-left: 1px #ccc solid;
    border-bottom: 1px #ccc solid;
    padding-top: 20px;
    padding-bottom: 20px;
    min-height: 400px;
}

/*一日遊,多日遊活動列表-------------------------------------------------*/
.sign_list {
    display: block;
    overflow: hidden;
    padding-bottom: 20px;
}

.sign_list li {
    float: left;
    width: 31.33%;
    margin: 1%;
    display: block;
    border: 1px #ccc solid;
}

.sign_list_title {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9fdcec;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    height: 100px;
    padding: 0 10px;
}


.sign_list_bg0 {
    background: #ffbdac
}

a.sign_list_bg0:hover {
    background: #faa893
}

.sign_list_bg1 {
    background: #9fdcec
}

a.sign_list_bg1:hover {
    background: #76c8dd
}

.sign_list_bg2 {
    background: #d4ccc6
}

a.sign_list_bg2:hover {
    background: #c5b7ad
}

.sign_list_title div {
    display: inline-block;
    font-size: 18px;
}

.sign_list_text {
    display: block;
    padding: 10px;
}

.sign_list h3 {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #666;
}

.sign_list .sign_list_btn_box {
    display: block;
    text-align: center;
}

.sign_list .sign_list_btn_box a {
    margin: 5px;
}


@media(max-width:1024px) {
    .sign_list li {
        width: 48%;
    }
}

@media(max-width:767px) {
    .sign_list li {
        width: 48%;
    }
}

@media(max-width:540px) {
    .sign_list li {
        float: none;
        width: 100%;
        margin: 10px 0;
    }

    .sign_list_title {
        height: 70px;
    }
}

@media(max-width:414px) {
    .sign_list_title {
        height: 90px;
    }
}