@charset "utf-8";

body {
    font-size: 16px;
    
    background:#636363;
    background:url(../images/bg-pic_04.png) no-repeat left top,
               url(../images/bg-pic_08.png) no-repeat right bottom,
    url(../images/swirl_pattern-bg.jpg) repeat 0 0;  
    background-attachment: fixed;
}

/*===========裝置尺寸設定============*/

.for-d {
    display: block;
}
.for-m-768 {
    display: none;
}
.img-responsive{
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%; 
    height: auto;
}

/*.navbar-default*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:active {
    background: none;
}

/*-----------GO top-----------*/
.scroll2top:link,
.scroll2top:visited{
    background:url(../images/top.png) no-repeat 0 0;  
    width:80px; 
    height:80px;
    right: 4%;
    z-index: 2;
}
.scroll2top:hover{
    background:url(../images/top.png) no-repeat 0 -80px;
    -webkit-animation: icon-up 0.75s ease-out;
    -moz-animation: icon-up 0.75s ease-out;
    -o-animation: icon-up 0.75s ease-out;
    animation: icon-up 0.75s ease-out;
}
@keyframes icon-up {
    0%,
    50%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    25%,
    75% {
        -webkit-transform: translateY(-26px);
        -moz-transform: translateY(-26px);
        -o-transform: translateY(-26px);
        transform: translateY(-26px);
    }
}

/*------------banner------------*/
.topBanner {
    width: 100%;
}
.topBanner h1 {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;/*垂直對齊*/
    justify-content: center;/*水平對齊*/      
}/*讓Banner不會隨視窗縮小,保持置中,高度*/

.banner-layout{}

/*------------SEO麵包削------------*/
.breadcrumb{
    padding: 5px 15px 10px 15px;
    background-color: #ffffff;
}
.breadcrumb ul li{
    display: inline;
    color: #545454;
    font-size: 1rem;
}
.breadcrumb ul li:after{
    content: ">";
}
.breadcrumb ul li:first-child:after{
    content: "";
}
.breadcrumb ul li:last-child:after{
    content: "";
}
.breadcrumb ul li a{
    color: #545454;
}


/*-----------mobile-menu-----------*/
#nav-icon1 {
    display: block;
    width: 28px;
    height: 24px;
    position: relative;
    cursor: pointer;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 501;
    background-color: #ff5a00;
    border-left:10px solid #ff5a00;
    border-right:10px solid #ff5a00;
    border-top:10px solid #ff5a00;
    border-bottom:5px solid #ff5a00;
    box-sizing: content-box;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
#nav-icon1.nav-icon1-scroll{    
    top: 0px;
    right: 0px;
}/*主選單往下捲動時定位到右上角*/


#nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #ffffff;
    border-radius: 2px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    z-index: 999;
}
#nav-icon1 span:nth-child(1) {
    top: 0px;
}
#nav-icon1 span:nth-child(2) {
    top: 8px;
}
#nav-icon1 span:nth-child(3) {
    top: 16px;
}

/*.open點開後變X*/
#nav-icon1.open span {
    margin-top: 0px;
}
#nav-icon1.open span:nth-child(1) {
    top: 8px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
#nav-icon1.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}
#nav-icon1.open span:nth-child(3) {
    top: 8px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.wrapper{
    margin: 0 auto; 
    max-width:1400px; 
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 10px rgba(0,0,0, 0.8);
    overflow: hidden;
    background:url(../images/menu-bg.jpg ) repeat;/*menu背景延伸*/
}

/*-----------menu-----------*/
.menu {
    display: block;
    width: 25%;
    max-width: 350px;
    float: left;
    background:url(../images/menu-bg.jpg ) repeat;
}
.menu ul li {
}
.menu ul li a{
    display: block;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font: 1.8rem/75px "Verdana","Geneva","sans-serif","微軟正黑體";
    padding-left:30px;
    color: #ffffff;
    border-right:0px solid #dd5003;
}
.menu ul li a:before{
    display: inline-block;
    content: '';
    width: 30px;
    height: 30px;
    background:url(../images/menu-icon.png ) no-repeat center center;
    margin-right: 10px; 
}

a.choose1:hover, .index1 a.choose1,
a.choose2:hover, .index2 a.choose2,
a.choose3:hover, .index3 a.choose3,
a.choose4:hover, .index4 a.choose4,
a.choose5:hover, .index5 a.choose5,
a.choose6:hover, .index6 a.choose6,
a.choose7:hover, .index7 a.choose7,
a.choose8:hover, .index8 a.choose8,
a.choose9:hover, .index9 a.choose9,
a.choose10:hover, .index10 a.choose10,
a.choose11:hover, .index11 a.choose11{
    border-right:5px solid #dd5003;
    box-shadow: inset 0 -2px 1px #dd5003;
    -moz-box-shadow:    inset 0 -2px 1px #dd5003;
    -webkit-box-shadow: inset 0 -2px 1px #dd5003;  
    background: #ff5a00;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all  0.5s ease-in-out;
    -o-transition: all  0.5s ease-in-out;
    transition: all  0.5s ease-in-out;
}
a.choose1:hover:after, .index1 a.choose1:after,
a.choose2:hover:after, .index2 a.choose2:after,
a.choose3:hover:after, .index3 a.choose3:after,
a.choose4:hover:after, .index4 a.choose4:after,
a.choose5:hover:after, .index5 a.choose5:after,
a.choose6:hover:after, .index6 a.choose6:after,
a.choose7:hover:after, .index7 a.choose7:after,
a.choose8:hover:after, .index8 a.choose8:after,
a.choose9:hover:after, .index9 a.choose9:after,
a.choose10:hover:after, .index10 a.choose10:after,
a.choose11:hover:after, .index11 a.choose11:after{
    display: inline-block;
    float: right;
    content: '';
    width: 30px;
    height: 70px;
    background:url(../images/triangle-icon.png ) no-repeat center center;   
}

/*------------content------------*/
.content {
    float: right;
    width: 75%;
    background-color: #ffffff; 
    padding-top: 20px;
    min-height: 755px;  /*左側menu的最小高度*/
}
.list-box{
    margin: 0px 30px; 
}
.list-txt{ 
    border-bottom: 1px dotted #aaaaaa;  
}
.list-txt p a{
    display: block;
    font:1.55rem/30px "Verdana","Geneva","sans-serif","微軟正黑體";
    color: #000000;
    text-decoration: none; 
    padding: 15px;
}
.list-txt p a:hover{
    color: #ff5a00;
    box-shadow:0px 3px 0px #ff5a00;
    border:none;
    margin-top:5px; 
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.product {
    padding-top: 30px;
}

.product figure{
    margin: 0 auto;
    width: 80%;    
}
.product figure img{
    width: 100%;
    max-width: 100%;
}
.product h4{
    display: block;
    font-size: 1.7rem;
    line-height: 50px;
    text-align: center;
    letter-spacing: 2px;
    background-color: #5e270b;
    color: #e8d7c5;
    background:url(../images/menu-bg.jpg ) repeat;
    text-shadow: 0px 2px 2px rgba(0,0,0,0.8);
    margin-top: -3px;/*解決與上圖的空白間距*/
}
.product .txt-box{    
}

.product .txt-box li{
    font:1.25rem/1.5 "Verdana","Geneva","sans-serif","微軟正黑體";
    border-bottom: 1px dotted #b9b5b3;
    padding: 8px 20px 15px 20px;
    background-color: #efe5d9;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.product .txt-box li:last-child{
    border-bottom: 0px dotted #b9b5b3;
}

.product .txt-box li span{/*天數數字*/
    font: 2.5rem "Times New Roman","Geneva","sans-serif","微軟正黑體";
    color: #50310c;
    margin: 0 10px;
}
.product .txt-box li:nth-child(even){ background-color: #f9f0e5;}/*偶數欄*/

.product .txt-box li:hover{
    background-color: #ffffff;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3);
}

.btn{
    width: 100%;
    padding: 15px;
    overflow: hidden;
    text-align: center;
}
.order-btn, .download-btn{
    display: inline-block; 
}
.order-btn a, .download-btn a{  
    display: inline-block;
    color: #ffffff;
    background-color: #ff5a00;
    font:1.55rem/30px "Verdana","Geneva","sans-serif","微軟正黑體";
    box-shadow: rgb(219, 90, 4) 1px 2px 0px 0px; 
    background: #ff5a00;
    background: linear-gradient(rgb(255, 81, 0) 5%, rgb(255, 119, 0) 100%) rgb(255, 81, 0); 
    border: 2px solid rgb(214, 75, 0);
    border-radius: 10px; 
    cursor: pointer; 
    color: rgb(255, 255, 255);  
    padding: 7px 25px; 
    margin: 0px 5px;
    text-decoration: none; 
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.order-btn a:hover, .download-btn a:hover{
    background: rgb(255, 81, 0); 
    text-shadow: rgba(128, 80, 21,0) 0px 0px 0px;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    -webkit-transform: scale(0.99);
    -moz-transform: scale(0.99);
    -o-transform: scale(0.99);
    transform: scale(0.99);
    box-shadow: rgb(219, 90, 4) 0px 1px 0px 0px; 
}
.pre-btn input[type=button]{
    display: inline-block;
    float: right;
    padding: 5px 10px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3); 
}
.pre-btn:hover input[type=button]{
    box-shadow: 0 1px 2px rgba(0,0,0,0); 
}


/*------------網站建置中-播報視窗---class="list-non"--------*/
.blackLayer { 
    display: none; 
    position: fixed; 
    top:0; 
    left: 0; 
    padding-top: 5vh; 
    width: 100%;  
    height: 100%; 
    text-align: center !important; 
    z-index: 99999; 
    background: rgba(0,0,0,0.6);
}
.blackLayer .inner { 
    text-align: center !important; 
    max-width: 600px; max-height:600px; 
    background: #ffffff; 
    margin: 0 auto;
}
.blackLayer .btnClose {
    display: inline-block; 
    padding-top:15px; 
    cursor: pointer;  
    margin: 0 auto; 
}
.blackLayer .btnClose p{
    font:1.3rem/20px "Verdana","Geneva","sans-serif","微軟正黑體"; 
    color: #ffffff; 
    text-align: center !important; 
    background-color: #333333;
    padding: 7px 15px;
    border-radius: 5px;
}

.photos-box{
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.photos{
    box-sizing: border-box;
    display:inline-block;
    width: 30%;
    margin: 10px;
}

.photos img{
    width: 100%;
    max-width: 100%;
    border:5px solid rgba(256,256,256,1);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}