@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,figure,article,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td ,header {
    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;}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


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

html { scroll-behavior: smooth; }
#backtop { z-index: 9999; position: relative;}

#web-outer {
    font-family: "Noto Serif TC", serif;
	max-width: 2000px;
	overflow: hidden;
	_overflow: none;
    background:#fbfbf9;
}
/*======================
====Main CSS=====
=======================*/

/*----header------*/

.mainpic { 
    margin: 0 auto;
    height: 662px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: url("../images/header-pic.jpg") center center no-repeat;
}

.main-title {
    margin-right: 20%;
    max-width: 464px;
}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}
.mainpic-xs { display: none;}

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

#main-nav{
    width: 100%;
    z-index: 990;  
    background:#8c4885; 
    margin:0 auto;   
}
 
 #block_menu {
     text-align: center;
     font-family: "Noto Serif TC", serif;
     font-weight: 600;
     overflow: hidden;
 }
 
 .sticky {
     top:40px;
 }

.nav {  margin:0 auto;  }
.nav li {  
    display:inline-block; font: 700 22px "Noto Serif TC", serif; letter-spacing: 1px;
    color:#514c44; margin: 0 4px; 
}
.nav li a { display:block; width:100%; height:100%; text-align: center; padding:12px 10px 10px 10px; text-decoration: none; color:#cfaebf; }
.nav li a:hover,.nav li a.active { color:#7b3774; background:url("../images/bg-nav.png") center center no-repeat; }


/*======================
====main CSS=====
=======================*/ 

.first { padding-top:90px; margin-top: -90px;}

section { margin:0 auto; text-align: center;} 
section:nth-child(odd) .bg-box { background: #f1eef3 url("../images/bg02.png") center 50px no-repeat; padding:50px 15px 60px 15px;  }
section:nth-child(even) .bg-box { background: #fbfbf9 url("../images/bg03.png") center 50px no-repeat; padding:50px 15px 60px 15px; }

#intro .bg-box { 
    background:url("../images/bg03.jpg") top center repeat-y; 
    margin:0 auto;
    padding:70px 20px;
    text-align: center;
}
h2.intro { background:url("../images/title-intro.png") top center no-repeat; padding-top: 104px; min-height: 175px;  }

.speech-bubble {
	position: relative;
    display: inline-block;
	background: #b169a5;
    color:#ffffff;
    font-size:24px;
    line-height: 50px;
    height: 50px;
    padding:0 20px;
    letter-spacing: 1px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 0;
	height: 0;
	border: 14px solid transparent;
	border-left-color: #b169a5;
	border-right: 0;
	margin-top: -14px;
	margin-right: -14px;
}
.intro-word { font-size:30px; color:#723d69; margin-left: 20px; }
#intro p { color:#4b454a; max-width: 600px; text-align: center; margin:0 auto; margin-top: 20px;  font: 600 18px "微軟正黑體"; line-height: 2em;}
#intro p span { display: block; font-size: 20px; margin-top: 20px; color:#723d69;}

h2.subtitle { 
    background: url("../images/bg-subtitle.png") center center no-repeat; 
    font-size: 32px; font-weight: 600; color:#5e385a;  letter-spacing: 1px; 
    padding:20px 0 36px 0;  margin-bottom: 30px;
}
.gift-box { margin:0 auto; border:2px dashed #c181c8; max-width: 630px; margin-top: 2px; margin-bottom: 2px;}
.gift-box article { background: #f7f6f1; padding: 16px 0; margin:3px; }
.gift-box article h3 { font-size: 30px; color:#594657; padding: 0 0 16px 0; }
.gift-box article h4 { font-size: 20px; font-family: "微軟正黑體"; font-weight: 600; color:#7f4771; background: #efe2e0; padding: 16px 10px; line-height: 1.5em; }
.gift-box article h4 span { font-size: 16px; margin-left: 6px; }

.gift-box article h3::before {
    content:url("../images/icon01.png");
    margin-right: 8px;
    width:50px;
    height:50px;
    display: inline-block;
    vertical-align:text-bottom;
}

/*----tour-list---*/

.tour-box { max-width: 1024px; margin:0 auto;  margin-top: 50px; margin-bottom: 100px;  }

.comingsoon { font: 600 22px "微軟正黑體" ; color:#ac1b87; background: #efe2e0; padding: 10px 0px; }

.tour-list { text-align: left;  margin:0 1%; }

.tour-list li  { 
    font: 700 18px "微軟正黑體" ; color: #383838; 
    line-height: 1.8em;
    border-bottom: 1px solid #dfbde3;
    margin:8px 0;
    padding:6px 0px;
}

.tour-list li a { 
    color: #555454;  text-decoration:none; width: 100%; height:100%; display:flex; overflow:hidden;
}
.name_l { flex:0 0 80%; }
.price_r { flex:0 0 20%; text-align: right; color: #000000; font: 600 13px "微軟正黑體"; }
.price_r span { font: 600 24px "微軟正黑體"; color:#fe5400; padding:0 2px; font-family: 'Barlow', sans-serif; }

.tour-list li a h3 span { font: 600 15px "微軟正黑體" ; display: inline;  color: #997aad; padding-left:6px; }
.tour-list li a h3 span:empty { display:none;}
/*.tour-list li a p { display: block; }

.tour-list li a p span { font-style: normal; font: 600 14px "微軟正黑體" ;  color: #027e84; text-decoration: none; padding-left:6px; display: inline-block; }
.tour-list li a p span::before {  
    content: url("images/icon05.png");
    padding-right: 6px;
    vertical-align: middle;
 }*/
.tour-list li a h3 em { padding:2px 4px; border:1px solid #cbaca7; color: #b470a3; font-style: normal; margin:0 8px 0 0px;  border-radius: 4px; font-size: 16px;  }



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


@media only screen and ( max-width:1800px) 
{ 
    .main-title {  margin-right: 16%; }   
}

@media only screen and ( max-width:1600px) 
{ 
    .main-title {  margin-right: 12%; }   
}

@media only screen and ( max-width:1300px) 
{ 
    .main-title  {  margin-right: 8%; }   
}

@media only screen and ( max-width:1100px) 
{ 
    .main-title  {  margin-right: 4%; }   
}

@media only screen and ( max-width:1024px) 
{ 
    .main-title { max-width: 400px; }
    .mainpic { height: 500px;}
}

@media only screen and ( max-width:900px) 
{ 
    .main-title { max-width: 350px; }
    .mainpic { height: 500px;}
}

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

@media only screen and ( max-width:768px) 
{ 
    .first { padding-top:0px; margin-top: 0px;}
    .mainpic { display: none;}
    .mainpic-xs { display: block;}
    #main-nav { display: none;}
    .name_l { width: 70%; }
    .price_r { width: 30%;   align-self:flex-end;}
}

@media only screen and (max-width:600px) 
{   
    .tour-list li a { display: block;}
    .name_l { width: 95%; display: block; }
    .price_r { width: 100%; display: block; padding-top:10px; text-align: right;}

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

@media only screen and (max-width:480px) 
{
    .tour-list li  {font-size:17px; } 
    .gift-box article h4 span { display: block;}
}

@media only screen and (max-width:400px) 
{
    .speech-bubble { font-size:20px; }   
    .intro-word { font-size:26px;  }
}