@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 {
    text-decoration: none;
    outline: none;
    color: #000;
}
a:hover {
    text-decoration: none;
} 

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: #b7f0ff;    
}

#web-outer {
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
	line-height:1.8em;
	font-size:15px;
    color:#363636;
    background: url("../images/bg01.jpg") center top repeat-y;
}

/*大圖輪播*/
.header{
	position: relative;
	height: 825px;
}

.curve{
  position: absolute;
  background: url("../images/bg-header.png") center top ;
  width: 100%;
  height: 397px;
  bottom: 0px;
  z-index: 10;
}

.main-slide{
	position: absolute;
	width: 100%;
	height: 825px;
    }

.main-title{position: absolute; left: 70%;transform: translateX(-50%);top:500px;top: 100px;background: url("../images/main-title.png") center top no-repeat;aspect-ratio:  635 / 423;width: 635px; background-size: contain;}

h1 {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}




/*nav CSS*/

#main-nav {
   z-index: 990;
   position: relative;
   margin-top:-110px;
   overflow: hidden;
}

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

.sticky {
    top: 30px;
}

.menu_box {
	display:inline-block;
}
.menu_box a {
    display: inline-block;     
}

.menu { margin-right: 0px; line-height: 118px; overflow: hidden;}
.menu:last-child { margin-right: 0px;  }
.menu a {  color: #336e7e; text-decoration: none;  /*padding:3px 8px;*/ text-indent: -5000px; margin-left: 15px; }
.menu a:hover ,.menu a.active {   border-radius: 8px; }


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

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

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

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

.menu .menu05 {  background: url("../images/nav.png") -656px 0 no-repeat; width: 180px;  }
.menu a:hover .menu05 ,.menu .active .menu05 { background: url("../images/nav.png") -656px -123px no-repeat;   }

.menu .menu06 {  background: url("../images/nav.png") -836px 0 no-repeat; width: 200px;  }
.menu a:hover .menu06 ,.menu .active .menu06 { background: url("../images/nav.png") -836px -123px no-repeat;   }


.active {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/*------------*/

.ct35 { max-width:35%; }
.ct65 { max-width:65%; }
.ct50 { max-width:50%; }

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

#main { 
    background: url("images/bg04.png") center top repeat-y; 
    z-index: 100;  
}
.subtitle { text-align: center; margin-top:50px; margin-bottom:2rem; }

.bg-deco { background: url("../images/bg07.png") center top repeat-y; padding:30px 0 40px 0;}
.bg-middle {  background: url("../images/bg02.jpg") center top repeat-y; padding:30px 0 40px 0;}

.pic-frame { background: url("../images/pic-frame.png") left top no-repeat; padding: 4px 20px 20px 12px;   }
.pic-frame-l { background: url("../images/pic-frame-l.png") right top no-repeat; padding: 4px 22px 12px 12px;   }

.pic-frame02 { background: url("../images/pic-frame02.png") left top no-repeat; padding: 4px 20px 20px 12px;   }
.pic-frame02-l { background: url("../images/pic-frame02-l.png") right top no-repeat; padding: 4px 22px 12px 12px;   }

.pic-frame03 { background: url("../images/pic-frame03.png") left top no-repeat; padding: 4px 20px 20px 12px;   }
.pic-frame03-l { background: url("../images/pic-frame03-l.png") right top no-repeat; padding: 4px 22px 12px 12px;   }

.rslides { border: 4px solid #fff;   }

#north {  padding-top:100px; margin-top: -100px; z-index: 100; }
#middle {  padding-top:150px; margin-top: -150px;   }
#south {  padding-top:150px; margin-top: -150px;   }
#sale {  padding-top:220px; margin-top: -220px;  position: relative;  }



/*---------*/

.ct-box { max-width: 960px; margin:0 auto; clear:both; margin-bottom: 60px; overflow: hidden;  }

.pic-box {  background: url("../images/bg-pic.png") 20px 20px no-repeat; max-width: 100%; }

.pic01 { max-width:65%; display: inline-block; vertical-align:top;}
.pic02 { max-width:32%; display: inline-block; vertical-align:bottom; padding-right: 10px; }
.pic02 img { margin-top:180px;}
.pic03 { vertical-align:bottom; padding: 10px; padding-left: 100px; }

.spot-box { padding: 10px; }
.spot-title {  background: url("../images/bg-spot-title.png") left top no-repeat; line-height:69px; height: 69px;  padding:0 0 0px 55px;  }
.spot-title2 { background: url("../images/bg-spot-title02.png") left top no-repeat;  }
.spot-title3 { background: url("../images/bg-spot-title03.png") left top no-repeat;  }
.spot-title p { font: 600 27px "微軟正黑體" ; color: #7552a4; }
.spot-title2 p { color:#007192; }
.spot-title3 p { color:#018730; }

.spot-title p span.icon { float:right; margin-right: 20px; margin-top:-5px; }
.spot-title p span.top1 { margin-top:-11px;}
.spot-title p span.top2 { margin-top:-15px;}
.spot-title p span.top3 { margin-top:-13px;}

.spot-ct { margin:0px 10px 20px 10px; padding:10px; font: 600 16px "微軟正黑體" ; line-height: 1.8em; }
.spot-ct span { font: 600 18px "微軟正黑體" ; color: #318b6c; display: block; border-bottom:1px solid #318b6c; margin-bottom: 0.75rem;}
.ct-blue { background: #caf8f7;}
.ct-blue2 { background:#e6fffe;}
.ct-green { background: #daf4dd;}

.people { margin-left: 6rem;}

.spic { margin-left: 2rem;}
.spic2 { margin-left: 1rem; margin-top:-28px;}


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

#tour {  padding-top:150px; margin-top: -150px;  }

.bg-tour { background: url("../images/bg03.jpg") center top repeat-y;  }
.bg-tour2 { background: url("../images/bg-tour02.png") center bottom no-repeat; min-height: 233px; padding-top:30px; padding-bottom: 233px; }

.tour-box { padding:0 20px; margin:0 10px;}

.bg-grey { background: #969696; }
.border-grey { border-top:4px solid #969696;}
.bg-purple { background: #a0869f; }
.border-purple { border-top:4px solid #a0869f;}
.bg-org { background: #a0869f;background: #FF8C34; background: #F4A51C;}
.border-org { border-top:4px solid #FF8C34;}

.tour-title { 
    height:30px; width: 150px; line-height:30px; padding-top:5px ;letter-spacing: 1px;
    color:#ffffff; font: 600 20px "微軟正黑體" ; text-align: center; border-radius: 8px 8px 0 0; 
}
.city { 
    color:#a3984f; font: 600 15px "微軟正黑體" ;display: inline-block; 
    border:1px solid #a3984f; border-width: 0 0 1px 5px;
    margin: 1rem 0 1rem 1rem; padding: 4px; 
}

.tour-list {  background: #edfffe; margin-bottom:2rem;padding: 20px; background:#FFFFFF;border-radius: 0 0 10px 10px;}

.tour-list li  { 
    font: 600 16px "微軟正黑體" ; color: #505050; line-height: 1.8em;
    padding:4px 0; margin-bottom:10px; border-bottom:1px dashed #969696; margin: 0 15px 10px 15px; 
    padding-left: 33px;
    text-indent: -21px;
 
}

.tour-list li a h3::before {
    content: url("../images/icon-leaf.png") ;
    width:21px;
    vertical-align: text-top;

}
.tour-list li a span.price_r::before {
    content: "" ;
}

.tour-list li a { color: #505050; text-decoration:none; display: block; width: 100%; height:100%; }
.tour-list li a h3 { display: inline-block;}
.tour-list li a em { font-style: normal; font: 600 14px "微軟正黑體" ; color:#ce8a06; padding-left: 6px;  }

.name_l { max-width:85%;   }
.price_r { max-width:15%;  float: right; color:#df4103; }
.price_r strong{margin: 0 3px;font-size: 18px;}


/*買一送一*/
.sale-box{
  font-size: 16px;
  color: #006B41;
  font-weight: 600;
}

.sale-box p strong{
  color: #FF5F00;
}

.sale-box .tour-box{margin-top: 60px;}

/*---------------------*/

#blog {  padding-top:150px; margin-top: -150px; }

.bg-blog { background: url("../images/bg06.jpg") center top repeat-y; }
.bg-blog2 { background: url("../images/bg05.png") center top repeat-y; padding:30px 0 100px 0; }

.blog-box { /*padding:0 20px;*/ /**/ }
.ct50 { float: left;  }
.b-box { margin:0 15px 20px 15px; position: relative;}
.b-pic { /*border:3px solid #fff;*/ width: 100%;  }
.b-link { position: absolute; bottom:8px; background:rgba(62,62,62,0.7); width:97%;  padding:5px 0; padding-left: 3%; }
.b-box a { width:100%; height: 100%; display:block;   }
.b-box a .b-link  { color:#fff; font: 600 18px "微軟正黑體" ; text-decoration: none; }
 

/*主推行程*/
.hotsale {
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin: 30px 0;
}

.hotsale a{
  text-decoration: none;
}

.hot-pic {
    width: 60%;
    height: auto;
    position: relative;
    z-index: 1;
}

.hot-pic img {
    border-radius: 50px 0 0 0;
  width: 100%;
  height: 100%;
}

.hot-tour {
    width: 45%;
    height: auto;
    /*margin-top: 40px;
  transform: translateX(-30px);
  */
  background: #FFFBE8;
    padding: 35px 25px;
    box-sizing: border-box;
    letter-spacing: 1px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
    z-index: 2;
    position: relative;
  border-radius: 0 0 50px 0;
}

.hot-tour a{
    display: block;
  text-decoration: none;
}

.hotsale .city1 {
    position: absolute;
    top: 0px;
    right: 0px;
    background: #D9CFA1;
    padding: 3px 5px;
    color: #FFFFFF;
    border-radius: 0 0 0 10px;
}

.hot-name {
    font-size: 20px;
    font-weight: 500;
    color: #04a8d1;
}

.hot-info {
    list-style-type: none;
}

.hot-info a{
  text-decoration: none;
}

.hot-info li {
    font-size: 15px;
    font-weight: 400;
    position: relative;
    text-indent: 0px;
    margin-bottom: 0px;
    border-bottom: 0px;
   padding-left: 15px;
}

.hot-info li a {
    display: block;
}

.hot-info li::before {
    position: absolute;
    content: '◆';
    left: 0px;
    top: 6px;
}

.hot-price {
    font-size: 16px;
    text-align: right;
}

.hot-price strong {
    font-size: 26px;
    color: #ff5027;
    margin: 0 5px 0px 3px;
}

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

@media only screen and ( max-width:960px) 
{ 
    .pic-frame { background: url("../images/pic-frame-s.png") left top no-repeat;  }
    .pic-frame-l { background: url("../images/pic-frame-l-s.png") right top no-repeat;   }
    
    .pic-frame02 { background: url("../images/pic-frame02-s.png") left top no-repeat;   }
    .pic-frame02-l { background: url("../images/pic-frame02-l-s.png") right top no-repeat;  }
    
    .pic-frame03 { background: url("../images/pic-frame03-s.png") left top no-repeat;   }
    .pic-frame03-l { background: url("../images/pic-frame03-l-s.png") right top no-repeat;   }
               
}

@media only screen and ( max-width:960px) 
{ 
.menu a {  margin-left: 0px; }
}


@media only screen and ( max-width:812px)
{     
    .ct35 { max-width:100%; }
    .ct65 { max-width:100%; }  
    .left { float:none;}
    .right { float:none; }
    .icon { display:inline-block;}    
  
    .tour-box { margin:0 20px; }   
}
/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
    #main-nav { display: none; }
    .subtitle { margin-top:10px;  }  
    #north,#middle,#south,#tour,#blog {  padding-top:0px; margin-top: 0px; }
    .hotsale {
        flex-direction: column;
        width: 95%;
        margin: 0 auto;
    }

    .hot-pic {
        width: 100%;
        height: auto;
    }

    .hot-pic img {
        border-radius: 10px 0 0px 0;
        display: block;
    }

    .hot-pic::before {
        width: 0px;
        height: 0px;
    }

    .hot-tour {
        width: 100%;
        height: auto;
        margin-top: 0px;
        transform: translateX(0px);
        border-radius: 0px 0 30px 0;
    }  
.header{
	height: 450px;
}

.curve{
  position: absolute;
  background: url("../images/bg-header-s.png") center top no-repeat ;
  width: 100%;
  height: 397px;
  background-size: cover;
}

.main-slide{height: 450px;}

.main-title{width: 400px;top: 40px;}


    
  
}

@media only screen and ( max-width:680px) 
{ 
    .ct50 { float:none; max-width:100%; margin-bottom: 20px; }
}

@media only screen and (max-width:600px) 
{

}

/*---手機版-----*/
@media only screen and ( max-width:500px) 
{ 


    .name_l { max-width:100%;   }
    .price_r { max-width: 100%;  font-size:18px; float:none; text-align:right;  }
    .tour-list li a span { display: block;}
    .tour-list li a em { display: block; margin-left: 15px; }
    .tour-box { margin:0; }    
    
}

@media only screen and ( max-width:380px) 
{ 
   
}