﻿@charset "utf-8";
/* CSS Document */
/* 隱藏 */
.xs-hidden {display:none !important;}
.xs-block {display:block !important;visibility:inherit !important;}

/* 對齊方向 */
.xs-a-cen {text-align:center !important;}.xs-a-left {text-align:left !important;}
.xs-a-right {text-align:right !important;}

/* 寬度 */
.xs-w-0 {width:100% !important;}.xs-w-5 {width:5% !important;}.xs-w-10 {width:10% !important;}
.xs-w-15 {width:15% !important;}.xs-w-20 {width:20% !important;}.xs-w-25 {width:25% !important;}
.xs-w-30 {width:30% !important;}.xs-w-35 {width:35% !important;}.xs-w-40 {width:40% !important;}
.xs-w-45 {width:45% !important;}.xs-w-50 {width:50% !important;}.xs-w-55 {width:55% !important;}
.xs-w-60 {width:60% !important;}.xs-w-65 {width:65% !important;}.xs-w-70 {width:70% !important;}
.xs-w-75 {width:75% !important;}.xs-w-80 {width:80% !important;}.xs-w-85 {width:85% !important;}
.xs-w-90 {width:90% !important;}.xs-w-95 {width:95% !important;}

.header {position:static;padding-bottom:0;height:auto;}
.right-menu .menus {position:relative;display:block;margin-bottom:.2em;right:-200px;}
.right-menu .open-menu {
    position:relative;right:37px;
    /*top:10px;*/
    width:40px;height:41px;font-size:40px;
    text-align:center;cursor:pointer;
} 
.right-menu .open-menu label {cursor:pointer;}
.right-menu #open-chk:checked + .menus ,.right-menu #open-chk:checked + .menus + .menus {right:40px;}

/* 側選單 */
.phone-menu ,.nav-menu {
    display:block;position:fixed;top:22px;right:15px;cursor:pointer;
    height:50px;width:50px;text-align:center;
    z-index:9999;background:white;border-radius:4px;
    box-shadow:0 0 10px black;
}
.phone-menu:before ,.nav-menu:before {
    content:"\f0c9";font-family:FontAwesome;font-size:2.5em !important;color:white;
    line-height:50px;color:#314d18;
}
.phone-menu {height:40px;width:40px;background:url(sl-e.jpg) no-repeat center center white \9;}
.phone-menu:before {line-height:40px;font-size:25px !important;z-index:999;}

.header-right {
    position:fixed !important;width:0px;height:100%;top:0;left:0;z-index:9999;
    background:url(../images/mask.png);
    background:rgba(0,0,0,.7);overflow:hidden;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    -moz-transition: all .3s ease;
}
.header-right.adk {width:200px;}
.header-right .menu .menu-a {display:block;width:200px;border-bottom:solid 1px white;}
.header-right .menu .menu-a > a:after {display:none;}
.header-right .menu .menu-a .drop-menu {position:static;padding:1em 0;width:100%;}
.header-right .menu .menu-a .drop-menu.adk {display:block !important;}
.header-right .menu .menu-a .drop-menu .mask {
    padding:0;padding-bottom:1em;border-right:none;width:100% !important;
}
.header-right .menu .menu-a .drop-menu .mask a + a {/*display:none;*/}
.header-right .menu .menu-a:hover .drop-menu {display:none;}
.header-right .menu .menu-a.adk .drop-menu {display:block;}
.header-right .menu {overflow-y:auto;width:220px;height:100%;}

/* 導覽列 */
.nav-1 {height:auto;position:relative;top:0;}
.nav-1 a {width:100%;border-bottom:solid 1px white;}
.nav-1 .nav-menu {
    position:static;box-shadow:none;
    background:none;width:100%;text-align:left;text-indent:1em;
}
.nav-1 .nav-menu:before {color:black;font-size: 1.25em !important;}  
.nav-1 .nav-menu:after {content:attr(atr);padding-left:1em;}
.nav-1 > span {display:block;overflow:hidden;width:100%;height:0;}
.nav-1 > span .lag {display:none;}
.nav-1 > span.adk {position:absolute;height:auto;z-index:9999;background:#314d18;background:rgba(0,0,0,.7);}
.nav-1 > span.adk .lag {display:block;position:static;width:100%;text-align:left;padding-left:2em;}

/* 視覺圖 */
.visual {height:auto;}
.visual img {min-height:auto;}

.marquee {margin-top:-4px;}
.marquee .marquee-title {text-align:center;}
.marquee .s-marquee {height:42px;margin:0;line-height:42px;}

/* Sort-1 */
.sort-1 {padding:0;}
.sort-1 ,.sort-1 .cell {display:block;}
.sort-1 .cell + .cell {padding-top:0;}
.sort-1 .box {width:45%;}
.sort-1 .title {width:92%;margin:auto;margin-bottom:1em;}

/* Sort-2 */
.sort-2 ,.sort-2 > .cell {display:block;}
.sort-2 .cell {overflow:hidden;}
.sort-2 .cell.repeat-1 {width:15%;}
.sort-2 .list .cell {padding:0;}
.sort-2 .fackbook-iframe {width:100%;}

.sort-3 .title a {width:70%;margin-bottom:1em;}

.sort-4 {overflow:Hidden;}
.sort-4 ,.sort-4 .cell ,.sort-6 ,.sort-6 .cell {display:block;}
.sort-4 a {width:44%;}
.sort-4 .cell {padding:0;}

.sort-6 {padding:0;overflow:hidden;}
.sort-6 .tabs {width:100%;}
.sort-6 .cell {padding:0;}

/* 右側選單類 */
.content {position:relative;}
.content .rwd-left-menu {height:40px;cursor:pointer;}
.content > .cell {display:block;}
.content .content-left-menu {
    position:absolute;background:white;left:-100%;
    transition:.3s;
}
.content .content-left-menu.adk {left:0;}
.content .nav.table {padding:1em 0;}
.content .nav.table .cell {display:block;}

/* footer */
.foot ,.foot .cell {display:block;text-align:center !important;}
.foot .cell {padding:0;}


.content .content-text {padding:.4em; }
.sort-6 .tabs + .tabs +.tabs +.tabs +.tabs {margin-top:0;}

/* 2016-05-14 */
.rwd-table ,.rwd-table tr ,.rwd-table td ,.rwd-table tbody ,.rwd-table th {display:block;width:100%;}
.rwd-table th ,.rwd-table td {padding:.4em 0;}
.rwd-table td img ,.rwd-table th img {margin:0 !important;}

/* 2016-06-28 旅遊導引 / 遊憩區域 / 西北園區 / 景觀據點 MAP */
.map-wrap .map01 
{
    width: 100% !important;
}

.marquee .community {padding:0;}


/* 2016-08-06 內頁的手機版頁籤 */ 
.nav + .xs-block {width:100% !important;}
.nav + .xs-block > .btn {margin-bottom:10px;width:40%;height:auto;margin-left: 7px;}

.tt {text-indent:10px;}

/* 2016-10-03 內頁的MP4影片 */
.embed-container 
{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    /*overflow: hidden;*/
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed ,
.embed-container video 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    z-index:10;left:5%;
}
div#nav {z-index:11;}

