@charset "UTF-8";
@media screen and (max-width: 1440px) {
    /*跑馬燈*/
    .Urgent .wrap {
        padding: 15px 10%;
    }
    /*影音專區*/
    .VideoBox .leftBox .autoSize {
        /*padding-bottom: 47%;*/
    }
    /*行程推薦區塊*/
    .gridItemSlideBox>ul>li:first-child {
        height: 32vw;
    }
    .gridItemSlideBox>ul>li {
        height: 16vw;
    }
    /*影音專區*/
    .indexAlbum ul li a {
        height: 12.5vw;
    }
}

@media screen and (max-width: 1366px) {
    /*首頁主要Banner區塊*/
    .Main .titleBox h2 span {
        font-size: 4rem;
    }
}

@media screen and (max-width: 1280px) {
    /*Header*/
    header .topNav {
        padding: 20px 20px 0;
    }
    header .leftBox .info {
        margin-left: 5px;
    }
    header .leftBox .info .weather .term{
        margin-right: 5px;
    }
    header .rightBox .subNav ul li {
        margin: 0 5px;
    }
    header .rightBox .search {
        padding: 0 5px;
    }
    header .rightBox .search .box input {
        width: 65%;
    }
    /*首頁主要Banner區塊*/
    .Main .titleBox h2 span {
        font-size: 3rem;
    }
}

@media screen and (max-width: 1180px) {
    .FiveTour .ecNetUlTabs>li>a{
        width: 130px;
        height: 130px;
        padding: 0 20px;
    }
}
@media screen and (max-width: 1050px){
    /*Header*/
    header .topNav {
        padding: 20px 10px 0;
    }
}

@media screen and (max-width: 1024px) {
    /*header*/
    header{
        height: auto;
        background: none;
        background-color: #93af30;
    }
    /*首頁主要Banner區塊*/
    .Main,
    .Main .carousel li a {
        height: 768px;
    }
    .Main .video {
        display: none;
    }
    .Main .titleBox .btnBox{
        opacity: 1;
        margin-top: 30px;
    }
    /*跑馬燈*/
    .Urgent .wrap {
        padding: 30px 5%;
    }
    
    /*遊憩系統區塊*/
    .FiveTour .wrap {
        padding-bottom: 5%;
    }
    .FiveTour .ecNetUlTabs {
        width: 100%;
        margin-top: 1em;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent::before {
        display:block;
        left: auto;
        right: 0;
        top: -245px;
        width: 270px;
        padding-bottom: 300px;
        background-position: 0 0;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent {
        top: calc(100px + 3rem);
    }
/*
    .FiveTour .ecNetUlTabs>li>a{
        width: 120px;
        height: 120px;
        padding: 0 10px;
    }
*/
    /*阿里山玩樂地圖*/
    .SearchBox .searchTools .searchSel {
        margin: 30px 15px;
        display: block;
    }
    .SearchBox .searchTools .searchSel label {
        width: 100px;
        display: inline-block;
        text-align: left;
    }
    /*行程推薦區塊*/
    .gridItemSlideBox>ul>li:first-child,
    .gridItemSlideBox>ul>li {
        width: 50%;
        height: 30vw;
    }
    
    .gridItemSlideBox>ul>li:hover figcaption {
        bottom: -110px;
    }
    
/*
    .gridItemSlideBox figcaption{
        bottom: 0;
        height: 100%;
        padding: 20px;
    }
*/
    .gridItemSlideBox>ul>li figcaption h4{
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }
    /*影音專區*/
    .VideoBox .leftBox,
    .VideoBox .rightBox {
        width: 100%;
        height: auto;
        padding: 0;
        text-align: right;
    }
    .VideoBox .leftBox .autoBtn,
    .VideoBox .rightBox .autoBtn {
        position: static;
        display: inline-block;
        margin: 1em 0;
    }
    .VideoBox .leftBox .autoSize {
        padding-bottom: 56%;
    }
    .indexAlbum ul li {
        width: 50%;
    }
    .indexAlbum ul li a {
        height: 30vw;
    }
    .VideoBox .leftBox .textbox,
    .VideoBox .rightBox .textbox {
        padding: 1em 0 0;
        text-align: left;
    }
    .taiwanlantern{
        left:50%;
        -webkit-transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
        width: 100%;
    }
    
    
}

@media screen and (max-width: 840px) {
    /*訊息區塊*/
    .News .wrap>.leftBox,
    .News .wrap>.rightBox {
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    /*首頁主要Banner區塊*/
    .Main,
    .Main .carousel li a {
        height: 570px;
    }
    .Main .titleBox .btnBox{
        display: none;
    }
    .News .wrap .leftBox .Tabs a,
    .News .wrap .leftBox .Tabs a.open,
    .News .wrap .leftBox .Tabs a.Tab{padding: 10px 5px;font-size: 1rem;}
    /*阿里山玩樂地圖區塊*/
    .SearchBox .ecNetUlTabs>li>a {
        width: 150px;
        height: 150px;
    }
    /*行程推薦區塊*/
    .gridItemSlideBox>ul>li:first-child,
    .gridItemSlideBox>ul>li {
        height: 36vw;
    }
    /*分享區塊*/
    .ShareBox .wrap {
        text-align: center;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent::before {
        display:block;
        top: 20px;
        right: 2%;
        width: 30%;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent .box{
        padding: 5px 20px;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent .box p{
    padding: 0 32% 0 0;
    font-size: 90%;
}
}

@media screen and (max-width: 640px) {
    /*首頁主要Banner區塊*/
    .Main .titleBox {
        width: 400px;
        left: calc((100% - 400px)/2);
    }
}

@media screen and (max-width: 560px) {
    /*阿里山玩樂地圖區塊*/
    .SearchBox .ecNetUlTabs>li>a {
        width: 130px;
        height: 130px;
    }
    /*遊憩系統區塊*/
    .FiveTour .ecNetUlTabs>li>a {
        width: 120px;
        height: 120px;
        padding: 0 10px;
    }
}

@media screen and (max-width: 480px) {
    /*首頁主要Banner區塊*/
    .Main .titleBox {
        width: 300px;
        left: calc((100% - 300px)/2);
    }
    .Main .titleBox h2 span {
        font-size: 2rem;
    }
    .Main .titleBox b {
        font-size: 1rem;
    }
    .Main .titleBox .btnBox li a span {
        font-size: 1rem;
    }
    /*跑馬燈*/
    .Urgent .wrap {
        padding: 0 15px;
    }
    .Urgent .urgentBox {
        height: 60px;
        padding: 10px 0;
    }
    .Urgent .urgentBox .urgentTitle {
        width: 40px;
        height: 40px;
        padding: 0;
    }
    .Urgent .urgentBox .urgentTitle h6 {
        display: none;
    }
    .Urgent .urgentBox .marquee {
        width: calc(100% - 55px);
    }
    .Urgent .urgentBox .marquee>li {
        line-height: 40px;
        font-size: 1rem;
    }
    /*遊憩系統區塊*/
    .FiveTour .ecNetUlTabs>li>a.ecNetUlTabSelected>span,
    .FiveTour .ecNetUlTabs>li>a>span {
        font-size: 1.1rem;
    }
    .FiveTour .ecNetUlTabs>li>a {
        width: 110px;
        height: 110px;
        margin: 0 1%;
    }
    /*阿里山玩樂地圖區塊*/
    .SearchBox h2 {
        margin: 0.5em 0;
    }
    .SearchBox .ecNetUlTabs>li>a {
        width: 115px;
        height: 115px;
        background-position: center 30%;
        padding-top: 62%;
    }
    .SearchBox .ecNetUlTabContent {
        padding: 30px 0 0;
    }
    .SearchBox .searchTools .searchSel {
        margin: 30px 0;
    }
    .SearchBox .searchBtn {
        padding: 5px 30px;
    }
    /*行程推薦區塊*/
    .gridItemSlideBox>ul>li:first-child,
    .gridItemSlideBox>ul>li {
        width: 100%;
        height: 48vw;
    }
    /*影音專區區塊*/
    .indexAlbum ul li {
        /*width: 100%;*/
    }
    .indexAlbum ul li a {
        height: 44vw;
    }
    .taiwanlantern {
    width: 100%;
    }
    .taiwanlantern a p{
}
}

@media screen and (max-width: 420px) {
    /*首頁主要Banner區塊*/
    .Main .titleBox {
        top: 43%;
    }
    .Main .titleBox .btnBox li {
        margin: 60px 10px 0;
    }
    /*訊息區塊*/
    .News .wrap h2 {
        min-height: initial;
    }
    .News .wrap>.leftBox,
    .News .wrap>.rightBox {
        padding: 0;
    }
    .News .wrap .leftBox .TabContent li p {
        height: 58px;
    }
    .News .wrap .leftBox .Tabs a {
        font-size: 1rem;
    }
    /*遊憩系統區塊*/
    .FiveTour .wrap{
        padding-top: 30px;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent .box {
        padding: 20px;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent .box p {
        height: 115px;
    }
    .FiveTour .ecNetUlTabs .ecNetUlTabContent .box h3 {
        margin: 0;
    }
    
    .FiveTour .ecNetUlTabs>li>a.ecNetUlTabSelected>span,
    .FiveTour .ecNetUlTabs>li>a>span {
        font-size: 1rem;
    }
    .FiveTour .ecNetUlTabs>li>a {
        width: 100px;
        height: 100px;
    }
    
    .FiveTour .ecNetUlTabs .ecNetUlTabContent .box .link li>a{
        font-size: 1rem;
    }
    
    /*阿里山玩樂地圖區塊*/
    .SearchBox .ecNetUlTabContent {
        padding: 0;
    }
    .SearchBox .ecNetUlTabs li {
        /*        margin: 0;*/
    }
    .SearchBox .ecNetUlTabs>li>a {
        width: 100px;
        height: 100px;
        background-position: center 30%;
        padding-top: 62%;
    }
    .SearchBox .ecNetUlTabs>li>a>span {
        font-size: 0.9rem;
    }
    .SearchBox .ecNetUlTabs>li>a::before {
        border-width: 15px 15px 0 15px;
        left: calc(50% - 15px);
    }
    .SearchBox .ecNetUlTabs>li>.ecNetUlTabSelected::before {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }
    .SearchBox .searchTools .searchSel label,
    .SearchBox .searchTools input,
    .SearchBox .searchTools select,
    .SearchBox .searchBtn {
        width: 100%;
        font-size: 1rem;
    }
    .SearchBox .searchTools .searchSel {
        margin: 20px 0;
    }
    /*行程推薦區塊*/
    .gridItemSlideBox figcaption h4,
    .gridItemSlideBox figcaption h5 {
        font-size: 1rem;
        padding: 5px 0;
    }
    /*影音專區區塊*/
    .VideoBox .leftBox .autoBtn,
    .VideoBox .rightBox .autoBtn {
        margin: 10px 0;
        padding: 5px 10px;
        font-size: 1rem;
    }
}

@media screen and (max-width: 370px) {
    /*首頁主要Banner區塊*/
    .Main .titleBox {
        width: 250px;
        left: calc((100% - 250px)/2);
    }
    .Main .carousel .slick-next,
    .Main .carousel .slick-prev {
        width: 15px;
    }
    /*遊憩系統區塊*/
    .FiveTour .ecNetUlTabs .ecNetUlTabContent {
        top: calc(80px + 2em);
    }
    .FiveTour .ecNetUlTabs>li>a {
        width: 90px;
        height: 90px;
    }
    .FiveTour .ecNetUlTabs>li>a>span {
        font-size: 0.8rem;
        line-height: normal;
    }
    /*阿里山玩樂地圖區塊*/
    .SearchBox .ecNetUlTabs>li>a {
        width: 80px;
        height: 80px;
        padding-top: 57%;
    }
    .SearchBox .ecNetUlTabs>li>a>span {
        font-size: 0.8rem;
    }
}

@media screen and (max-height: 940px) and (min-width: 1024px){
    .Main .video>a{
        bottom: 10%;
    }
}

@media screen and (max-height: 860px) and (min-width: 1024px){
    .Main .video>a{
        bottom: 20%;
    }
}

@media screen and (max-height: 768px) and (min-width: 1024px){
    .Main .titleBox{
        top: 38%;
    }
    .Main .video>a{
        bottom: 30%;
    }
    .Main .titleBox .btnBox{/*opacity: 0;*/margin-top: 25vh;}
}