html,body {
        width: 100%;
        height: 100%;
        font-size: 16px;
        font-family: Arial, "微軟正黑體";
        line-height: 32px;
        
    }

/*右側選單*/    
    nav {
        position: fixed;
        z-index: 99;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    nav>a {
        display: block;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        background-color: #ceb474;
        width: 20px;
        height: 20px;
        margin: 50px 30px;
        border-radius: 10px;
    }
    nav>a.active{
        background-color: #ae1f24;
    }
    nav>a>i{
        display: block;
        width: 88px;
        height: 70px;    
        position: absolute;

    }
    nav>a:nth-of-type(1):hover>i{
     background-image: url(../../images/a01.png);
     top:25px;
     right: 55px;   
    }
     nav>a:nth-of-type(2):hover>i{
     background-image: url(../../images/a02.png);
     top:95px;
     right: 55px;   
    }  

     nav>a:nth-of-type(3):hover>i{
     background-image: url(../../images/a03.png);
     top:165px;
     right: 55px;   
    } 
    nav>a:hover{
    background-color: #ae1f24; 
    } 
    .gift{
    background-image: url(../../images/gift.png); 
    width: 64px;
    height: 77px;
    position: fixed;
    z-index: 99;
    right: 10px;
    top: 65%;
    } 
    .gift:hover{
    background-image: url(../../images/gift-hover.png); 
    } 

/*主視覺大區塊 bg-固定背景 content-非固定背景*/     
    main {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    .bg,.bg1 {
        position: relative;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
    .bg {
        background-image:url(../../images/bg01.jpg);

    }
/*主視覺大區塊標題*/    
    .title01 {
        position: absolute;
        top: 15%;
        right:18%;
        /*transform: translateX(25%) translateY(25%);*/
        width: 380px;
        height: 421px;
        background-image: url(../../images/title.png) ;
        font-size: 0;
        background-size:100%;
        background-repeat: no-repeat; 
        z-index: 19;
    }

/*按鈕*/
    .b{
        position: absolute;
        bottom:18%;
        right:18%;   
    }
    .btn {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 350px;
        height:50px;
        line-height: 50px;
        text-decoration: none !important;
        color: #fff !important; 
        overflow: hidden;
        letter-spacing: 1px;
        font-weight: bolder;
        background: #ae1f24;
        text-transform: uppercase;
        transition: all 300ms;
        text-align: center;
        z-index: 20;
    }
   .btn:after {
        position: absolute;
        content: "";
        width: 50%;
        height: 100%;
        top: 0;
        left: -60%;
        background: #fff;
        opacity: .2;
        transform: skew(-30deg);
        transition: all 300ms;
    }
    
    .btn:hover {
        color: #5d0b0e;
        background-color: #f04b51;
        transition: all 300ms 300ms;
    }
    
    .btn:hover:after {
        left: 110%;
    }

/*MV*/ 
    .mv{
        margin:20px auto;
    }
    iframe {
            max-width:100%;
          }
    /*旁邊點綴插圖*/    
    #sea{
        background-image: url(../../images/sea.png) ;
        width: 530px;
        height: 366px;
        z-index: 5;
        top: -30%;
        right: 0;
    } 
    #sea1{
        background-image: url(../../images/sea1.png) ;
        width: 545px;
        height: 390px;
        z-index: 5;
        top: 60%;
        right: 0;
    } 
    #photo1{
        background-image: url(../../images/photo1.png) ;
        width: 223px;
        height: 253px;
        z-index: 5;
        top: 50%;
        right: 0;
    }
    #photo2{
        background-image: url(../../images/photo2.png) ;
        width: 231px;
        height: 256px;
        z-index: 4;
        top: 50%;
        left: 5%;
    }
    #photo3{
        background-image: url(../../images/photo3.png) ;
        width: 235px;
        height: 260px;
        z-index: 5;
        top: 70%;
        left: 0;
    } 
     
    .bn-col{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    background-size: 100%;

    }
    .content {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        background-image:url(../../images/bg02.jpg);
        background-position: right;
        background-repeat: no-repeat;
    }
    /*標題*/
    .title02{
        position: absolute;
        top: 5%;
        left:28%;
        max-width: 848px;
        width: 100%;
        visibility: hidden; 
    }
    .content>div>p{ padding-top: 5%;}



    
/*MV & 景點介紹*/  
    .content>div,.vtitle-c{
        width: 70%;
        margin: 0 auto;        
        text-align: center;
        padding: 80px 0;  
    }
    .v1-c,.v2-c,.v3-c,.v4-c{
        width: 70%;
        margin: 0 auto;        
        text-align: left;   
    }
    .vtitle-c{
      padding: 70px 0; 
      visibility: hidden;  
    }
    .vtitle{
        background-image: url(../../images/bg03.jpg) ;
        background-color:#fff; 
        background-repeat: no-repeat;
        max-width: 1920px;
        background-size:100%;
        background-position: center;
    }
    .v1,.v3{
        background-color:#ffecc2;  
    }

    .vtitle-c h2{
        font-family: Arial, "華康粗明體";
        color: #fff;
        font-size: 48px;
        padding-top: 30px;
    }
     .vtitle-c p{
        color: #fff;
        padding-top: 35px;
     }
     .viewbox{
        margin:0 auto; 
     }
    .viewbox h3{
        font-family: Arial, "華康粗明體";
        font-weight: bold;
        font-size: 40px;
        line-height: 40px;
        color: #ae1f24; 
    }
    .viewbox img{
        max-width: 500px;
        width: 100%;
        margin:3% 0;
    }
    .viewbox-l{
        margin:10%;
        width: 35%;
        float: left;
    }
    .viewbox-r{
        margin:10%;
        width: 35%;
        float: right;
    }
    .c23box{
        clear: both;
    }
    .viewbox h3:before{
    content:url(../../images/icon.png);
    padding-right: 5%;      
    }

    .viewbox p{
        padding: 30px 0;
    }
    /*旁邊點綴插圖 1 */  
    #city{
        background-image: url(../../images/v01.png) ;
        width: 274px;
        height: 171px;
        z-index: 5;
        top: 600px;
        left: 100px;
    }  
    #flower{
        background-image: url(../../images/v02.png) ;
        width: 202px;
        height: 259px;
        z-index: 5;
        top: 1000px;
        right:200px;
    } 
    #line-a{
        background-image: url(../../images/lline.png) ;
        width: 528px;
        height: 297px;
        top: 650px;
        left:500px;
        transform:rotate(8deg);

    }
    /*旁邊點綴插圖 2 */  
    #leaf01{
        background-image: url(../../images/leaf01.png) ;
        width: 304px;
        height: 770px;
        z-index: 5;
        top: 1600px;
        right: 0px;
    }
    #light{
        background-image: url(../../images/v03.png) ;
        width: 147px;
        height: 200px;
        z-index: 5;
        top: 2200px;
        left: 400px;
    }
    #train{
        background-image: url(../../images/v04.png) ;
        width: 421px;
        height: 141px;
        z-index: 5;
        top: 2750px;
        right: 200px;
    } 
    #line-b{
        background-image: url(../../images/lline02.png) ;
        width: 334px;
        height: 322px;
        top: 2200px;
        left:680px;
        transform:rotate(8deg);
    }
    #line-c{
        background-image: url(../../images/lline03.png) ;
        width: 272px;
        height: 299px;
        top: 2700px;
        left:680px;
        transform:rotate(8deg);
    }
    #camara{
        background-image: url(../../images/camara.png) ;
        width: 357px;
        height: 1319px;
        top: 2200px;
        left:0px;
    }
    #camara1{
        background-image: url(../../images/camara02.png) ;
        width: 286px;
        height: 531px;
        top: 2200px;
        right: 10px;
    }
    /*旁邊點綴插圖 3 */  
   #leaf02{
        background-image: url(../../images/leaf02.png) ;
        width: 300px;
        height: 633px;
        top: 5000px;
        left:  0px;
    }
    #brick{
        background-image: url(../../images/v05.png) ;
        width: 186px;
        height: 136px;
        z-index: 5;
        top: 4300px;
        left: 400px;
    }
    #bicycle{
        background-image: url(../../images/v06.png) ;
        width: 203px;
        height: 126px;
        z-index: 5;
        top: 4850px;
        right: 500px;
    }
    #line-d{
        background-image: url(../../images/lline02.png) ;
        width: 334px;
        height: 322px;
        top: 4250px;
        left:680px;
        transform:rotate(8deg);
    }
    #line-e{
        background-image: url(../../images/lline03.png) ;
        width: 272px;
        height: 299px;
        top: 4800px;
        left:680px;
        transform:rotate(8deg);
    }
    /*旁邊點綴插圖 4 */  
   #leaf03{
        background-image: url(../../images/leaf03.png) ;
        width: 168px;
        height: 659px;
        top: 5700px;
        right: 0px;
    }
   #bird{
        background-image: url(../../images/v07.png) ;
        width: 189px;
        height: 184px;
        top: 6240px;
        left:  560px;
        z-index: 5;
    }
    #river{
        background-image: url(../../images/v08.png) ;
        width: 299px;
        height: 158px;
        top: 6730px;
        right:  330px;
        z-index: 5;
    }
    #otherbg{
        background-image: url(../../images/otherbg.png) ;
        width: 532px;
        height: 924px;
        top: 5900px;
        left: 0px;
    }
    #otherbg01{
        background-image: url(../../images/otherbg02.png) ;
        width: 551px;
        height: 652px;
        top: 6500px;
        right:  0px;
    }
/* c23模組 */
.c23box{
    background-color: #e6ecc7;
    border: 14px solid #96a063;

}
.c23box>h4{
    background-color: #40471f;
    color: #e6ecc7;
    font-size:30px;
    line-height: 64px;
    padding-left: 3%;
    width: 28%;
}
.c23box>h4:before{
    content:url(../../images/icon1.png);
    padding-right: 5%;
}
.cms23 img{
    display:block;
    width:538px;
    height:80px;
    font-size:0;
    margin:0px auto;
    clear: both;
}
q:before, q:after {
    content: "";
}
*+html .carrier li {
    min-height: 1%;
}
.carrier li:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.intro-anchors {
    display: none;
}
.carrier {
    font-family: Verdana, Geneva, sans-serif, "微軟正黑體";
    margin:0px auto;   
}
.carrier h4 {
    display: none;
}


.carrier ul {
    padding:5px 0;
    margin: 10px auto;
    width:90%;
    
}
.carrier li {
    list-style-type: none;
    border-bottom: 1px dotted #666;
    padding: 10px 18px 7px;
    line-height: 1.3em;
}
.carrier li:hover {
    background-color: #edeecc;
}
.carrier li:last-child{border:none;}

.carrier li a:link, .carrier li a:visited {
    text-decoration: none;
    font-size: 15px;
    font-family: "微軟正黑體";
    color: #ae1f24;
    letter-spacing: 1px;
    line-height: 22px;
    display: block;
    font-family: Verdana, Geneva, sans-serif;
}
.carrier li a strong {
    font-weight: normal;
    display: block;
    font-size: 20px;
    font-weight: bolder;
    font-family: "微軟正黑體";
    color: #333547;
    margin: 2px 0 6px 0;
    line-height: 1.2em;
}
.carrier li a:hover strong {
    color: #F24A6C;
    text-decoration: none;
}
.carrier li a strong span {
    font-weight: normal;
    font-size: 15px;
    color: #F24A6C;
    margin: 0 0 6px;
    *margin: 0;
}
.carrier .box-head {
    display: none;
    /*border-bottom:2px solid #800033; margin-top:-4px;*/
}
.carrier .box-head:hover {
    background: #fff;
}
.carrier .box-head a:link, .carrier .box-head a:visited {
    margin: -15px 0;
    cursor: default;
}

.carrier .box-head a strong, 
.carrier .box-head a img, 
.carrier .box-head p span {
    display: none;
}


.carrier .box-head q {
    display: block;
    font-weight: bold;
    padding-left: 13px;
    color: #e5735c;
}

.carrier li em.price {
    font-size: 15px;
    color: #ae1f24;
    font-family: Verdana, Geneva, sans-serif, arial;
    float: right;
    *margin-top: -1.2em;
    font-weight: bold;
}

.carrier li em.price span, .carrier li em.price var {
    font-size: 18px;
}

.no-topic {
    display: block;
    margin-top: -5px;
}

.no-topic .carrier h4 {
    display: none;
}

/*最下方電影送票活動*/
    .mvevent{
        background-color:#40471f;
        margin-top:40px;       
        text-align: center;
    }
    .mvevent>h2{
        color: #fff;
        font-size: 60px;
        font-family: Arial, "微軟正黑體";
        font-weight: normal;
        margin:40px auto; 
        padding-top: 60px;
        line-height: 68px;
        letter-spacing: 3px;
    }
    .mvevent>h2>span{
    font-family: Arial, "微軟正黑體";
      font-size: 42px;  
    }
    .mvevent>p{

        color: #fff;
        font-size: 18px;
        width: 80%;
        margin:0 auto;
        letter-spacing: 1px; 
    }

    .btnOK{
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 350px;
        height:60px;
        line-height: 60px;
        text-decoration: none !important;
        color: #40471f !important; 
        overflow: hidden;
        letter-spacing: 1px;
        font-weight: bolder;
        background: #ffb400;
        text-transform: uppercase;
        transition: all 300ms;
        text-align: center;
        z-index: 20;
        font-size: 30px;
        margin:30px 0;
    }
      .btnOK:after {
        position: absolute;
        content: "";
        width: 50%;
        height: 100%;
        top: 0;
        left: -60%;
        background: #fff;
        opacity: .2;
        transform: skew(-30deg);
        transition: all 300ms;
    }
    
    .btnOK:hover {
        color: #40471f;
        background-color: #ffb400;
        transition: all 300ms 300ms;
    }
    
    .btnOK:hover:after {
        left: 110%;
    }
    .mvevent img{
        max-width: 1200px;
        width: 100%;
        margin-bottom: 50px;
        opacity:0.9;
    }
    .mvevent img:hover{
        opacity:1;
    }