@charset "utf-8";

/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;	
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

.clearfix {
  overflow: auto;
}

img { max-width:100%;}

.left { float: left;}
.right { float: right;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

#backtop { z-index: 9999; position: relative;}

body {
    font-family:"微軟正黑體","黑體", Arial, Helvetica, sans-serif;
    background-color: #052653;    
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	font-size:15px;
    color:#ffffff;
    position: relative;
}

h1,h2,h3 { display:none; }

.bg01 { background: url("images/bg02.png") center top repeat-y;  }
.bg02 { background: url("images/bg03.png") center top repeat-y;  }

.btn-side { position: fixed; top:50%; right:0;}

/*======================
====Main CSS=====
=======================*/

.mainpic { 
    background:url("images/header.jpg") center top no-repeat;  
    height: 766px; 
}
.bg-inner { 
    max-width: 960px;
    position: relative; 
    margin: 0 auto;
    min-height: 766px; 
    z-index: 1;    
}
.bg-inner .main-title { position: absolute; margin-left: 60%; padding-top:95px;}

.qa-menu {
    max-width: 960px;
    margin: 0 auto;           
}

.qa { margin: 0 auto; max-width: 768px; background: #052653; border-radius: 30px;  }
.qa span { display: none;  padding-right: 10px; font: 300 22px "微軟正黑體" ;  }
.qa img { display: inline-block; vertical-align:middle; }
.qa img:first-child { padding-right: 10px;}

/*======================
====nav CSS=====
=======================*/

#main-nav {
	width: 100%;
    
}   
.block_menu {
	width: 100%;
	text-align: center;
    font-family: 'Noto Serif TC', serif,Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    height: 219px;
      
}

.sticky {
    top: 0;
    left:0;
}

.menu_box {
    display:inline-block;
    
}
.menu_box a {
    display: inline-block;   
}   
.menu .menu01, .menu .menu02,.menu .menu03,.menu .menu04 { height: 219px;  text-indent: -5000px;    }

.menu .menu01 {  background: url("images/nav.png") 0 0 no-repeat; width: 112px; }
.menu a:hover .menu01 ,.menu .active .menu01 { background: url("images/nav.png") 0 -219px no-repeat;   }

.menu .menu02 {  background: url("images/nav.png") -112px 0 no-repeat; width: 135px; }
.menu a:hover .menu02 ,.menu .active .menu02 { background: url("images/nav.png") -112px -219px no-repeat;  }

.menu .menu03 {  background: url("images/nav.png") -247px 0 no-repeat; width: 128px; }
.menu a:hover .menu03 ,.menu .active .menu03 { background: url("images/nav.png") -247px -219px no-repeat;  }

.menu .menu04 {  background: url("images/nav.png") -375px 0 no-repeat; width: 89px;  }
.menu a:hover .menu04 ,.menu .active .menu04 { background: url("images/nav.png") -375px -219px no-repeat;   }


/*.main-nav-xs { margin:10px; }
.main-nav-xs li.btn1 { background:  }
.main-nav-xs li.btn2 { }
.main-nav-xs li.btn3 { }
.main-nav-xs li.btn4 { }*/



/*------------*/
#red { padding-top:90px; margin-top: -90px; }
#yellow,#blue,#orange { padding-top:120px; margin-top: -120px; }
.bg-red { background: url("images/bg04.png") top center no-repeat; }
.bg-orange,.bg-blue { background: url("images/bg05.png") top right no-repeat; }
.bg-yellow { background: url("images/bg06.png") top center no-repeat; }


.row { max-width: 960px; margin:0 auto;   }

.pic-box-red { max-width: 100%; min-height: 300px; background: url("images/pic-red.jpg") top center no-repeat; border-radius:100px 100px 0 0;  }
.pic-box-orange { max-width: 100%; min-height: 300px; background: url("images/pic-orange.jpg") top center no-repeat; border-radius:100px 100px 0 0;  }
.pic-box-yellow { max-width: 100%; min-height: 300px; background: url("images/pic-yellow.jpg") top center no-repeat; border-radius:100px 100px 0 0;  }
.pic-box-blue { max-width: 100%; min-height: 300px; background: url("images/pic-blue.jpg") top center no-repeat; border-radius:100px 100px 0 0;  }

.word-box { margin-left: 62%; min-height: 300px; background: url("images/bg01.png") top center no-repeat;  border-radius:0 100px 0 0; padding-right: 30px;}

.word-box img { margin-top:-50px; padding-left: 20px;}
.word-box p { color:#ffffff; font: 300 17px "微軟正黑體" ; line-height: 1.8em; padding:10px 0 20px 20px ;}

/*----box tour----*/

.ct33 {  width:33%; display: inline-block; vertical-align: top;  }
.ct50 {  width:49%;  display: inline-block; vertical-align: top;  }

.ct-box { max-width: 960px; margin:0 auto; clear:both; overflow: hidden; margin-top:30px; padding-bottom: 60px; text-align: center;}

.ct33 a,.ct50 a  { text-decoration: none; display:block; margin:0 6px; border:1px solid #0279b0; margin-bottom: 20px;}
.ct33 a:hover,.ct50 a:hover {  border:1px solid #ffffff;  }

.ct33 a .main-tour-box { margin:7px; min-height: 440px; background: #052653;/*display:table;  */}
.ct50 a .main-tour-box { margin:7px; min-height: 480px; background: #052653; }

.hotel-pic { margin:0 auto; text-align: center;  }

.tour-name { 
    color:#ffffff; font: 500 20px "微軟正黑體" ; line-height: 24px; padding:10px;
    text-align: center; border-bottom: 1px solid #93946e; 
}
.tour-name span { display: block;}

.tour-info-list { margin:10px 10px;  min-height: 90px; padding-bottom:30px; }
.tour-info-list li ,.tour-info-list p { 
    font: 500 13px "微軟正黑體" ; color: #ffffff; line-height: 1.8em;
    padding-left: 20px; text-indent: -20px; 
    text-align: left;
}
.tour-info-list li::before {
    content: url("images/icon01.png");
    font-size:14px;
    padding-right: 6px;
}
.tour-info-list li span { color:#e5e5bc;}

.tour-price { color: #ffffff; font: 600 14px "微軟正黑體" ; text-align: center; padding:20px 0 10px 0; position:absolute; right: 0; bottom: 0; left: 0; margin: auto; }
.tour-price span {  color:#e6de0c;  font: 600 32px "微軟正黑體" ; font-family: 'Barlow', sans-serif; }



/*------media query----------*/

@media only screen and ( max-width:960px) 
{ 
    .tour-name span { display:inline;}      
}

@media only screen and ( max-width:910px)
{    
    .ct33 {  width:32%; }
    .ct50 {  width:48%; }
}


/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    .mainpic { background:url("images/header-md.jpg") center top no-repeat; height: 400px; }
    .bg-inner { min-height: 400px; } 
    .bg-inner .main-title img { max-width: 65%;}
    .bg-inner .main-title { margin-left: 55%; padding-top:30px;}    
    #main-nav { display: none; }
    #red,#yellow,#blue,#orange { padding-top:0px; margin-top: 0px;}
    .people-red { display: none; }
    .red-lantern { margin-top:30px;}
    .btn-side { display: none;  }
}

@media only screen and ( max-width:700px) 
{ 
    .qa img { display: none;}  
    .qa span { display: block; text-align: center; padding:10px; }  
    .word-box { margin-left: 52%; }
    .ct-box { margin-left:15px; margin-right:15px;}    
    .ct33 {  display: block; width:100%;  }
    .ct50 {  display: block;width:100%; }
    .ct33 a { margin:25px 0; }
    .ct50 a { margin:25px 0; }
    .ct33 a .main-tour-box { min-height: auto;  }
    .ct33 a .main-tour-box { min-height: auto;  }
}

@media only screen and (max-width:600px) 
{
    .bg-inner .main-title img { max-width: 70%;}
    .pic-box-red,.pic-box-yellow,.pic-box-blue,.pic-box-orange { padding-top:335px; }   
    .word-box { margin-left: 0;  min-height: 135px; border-radius: 0;}
    .word-box { text-align: right;}
    .word-box p { text-align: left;}  
}

/*---手機版-----*/

@media only screen and (max-width:480px) 
{
    .mainpic { background:url("images/header-xs.jpg") center top no-repeat; height: 350px; }
    .bg-inner { min-height: 350px; }  
    .bg-inner .main-title img { max-width: 90%;}    
    .bg-inner .main-title { margin-left: 50%; padding-top:20px;}    
    ul.tour-info-list { margin-bottom:30px;}    
    .ct-box { padding-bottom: 15px;}
    .tour-price { text-align: right; padding-right: 10px;}      
}