@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, figure, mark {
    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;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {color: #333333; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:hover {}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font-size:15px;	
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}
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%;}

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

body {   
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/	
	background: #ffd800 url("../img/bg_01.webp") top repeat;
}


/*基本變數*/
:root {
	/*基本*/
	--white-color:#fff;
	--black-color:#141115;
	--family-basic:Verdana,'微軟正黑體';
	--family-noto:"Noto Sans TC",Verdana;	
}

#web-outer{	
	clear: both;
	overflow: hidden;	
	min-height: 3000px;
}

header h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}
.header-content{
	height: 700px;
	background: url("../img/main_bk.webp") top no-repeat;	
}
.header-title{max-width: 600px; position: relative;margin: 0 auto;text-align: center; padding-top: 50px;}
.photo01{position: absolute;left: -240px;top:320px;width: 200px;height: 350px;}
.photo01 img{border-radius: 100px;}
.photo02{position: absolute;right: -240px; top:60px;width: 200px;height: 350px;}
.photo02 img{border-radius: 100px;}

.boy01{position: absolute;left: -60px;top:50px;}
.boy02{position: absolute;right: -60px;top:50px;z-index: 99;}
.header-content .mobile{display: none;}


/*動畫*/
.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(10%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(10%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

.floating02{
	animation-name: floating02;
	-webkit-animation-name: floating02;

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating02 {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(10%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating02 {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(10%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

/*標題*/
h2.big-title {
	max-width: 563px;
	background: url("../img/title_bg.webp") top no-repeat;
	text-align: center;
	margin: 50px auto;
}

h2.big-title span {
	min-width: 400px;
      display: inline-block;
      padding: 15px;
      border: 3px solid #051b36;
      background-color: #1857a4;
      color: #fff;     
      font-weight: bold;
      border-radius: 999px;
      text-align: center;
      position: relative;
      box-sizing: border-box;
	font-size: 45px;
	font-family: var(--family-basic);
	margin: 0 auto;
    }

    .big-title span::before {
      content: '';
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border: 4px solid #fff;
      border-radius: 999px;
      pointer-events: none;
    }
h2.big-title span em{font-style:normal;font-size: 35px;margin-right: 10px;}
h2.big-title span strong{color: #ffd800;}

.text-wrap{ 
	max-width: 500px;	  
	display: flex;
      justify-content: center;
      align-items: center;
	 margin: 30px auto;
	font-family: var(--family-basic);	
	  } 

    .container {	
      font-size:30px;      
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      text-align: center;	
	font-weight: 600;
		position: relative;
    }

    .scroll-box {
      height: 30px;
      overflow: hidden;
      position: relative;
      display: inline-block;
      color: #1857a4;
      width: 125px;
    }

	p.txt{position: absolute;font-size: 20px;color: #525252;right: 80px;top: -30px;font-family: var(--family-basic);letter-spacing:5px;transform: rotate(-5deg);}

    .scroll-text {
      display: flex;
      flex-direction: column;
      animation: scrollUp 4s 0s linear infinite;
    }

    .scroll-text p {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @keyframes scrollUp {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-50%);
      }
    }


.about-wrap{
	max-width: 1300px;
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap:1%;	
	margin: 0 auto;
}

.about-box{
	width: 48%;
	background: #fff;
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-direction: column;
	padding: 15px;
    border: 3px solid #051b36;    
    border-radius: 30px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
	margin-top: 25px;
}

.about-box::before {
      content: '';
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border: 4px solid #fff;
      border-radius: 30px;
      pointer-events: none;
    }

h3.min-title{text-align: center;font-size: 30px;font-family: var(--family-basic);color: #fff;margin: 15px auto;border-bottom: 2px #fff solid;padding-bottom: 20px;display: block;width: 100%;}
h3.min-title strong{}
.color-01{color: #b9dfff;}
.color-02{color: #ffdbcd;}
.color-03{color: #88ebd1;}
.color-04{color: #efd6ff;}
h3.min-title span{}
h3.min-title span em{font-style:normal;font-size: 25px;margin: 0 5px;}
h3.min-title span strong{border-radius: 25px;padding: 8px 10px;color: #fff;}
.bg-color-01{background-color: #065ea6;}
.bg-color-02{background-color: #b43504;}
.bg-color-03{background-color: #057b5c;}
.bg-color-04{background-color: #561082;}	

.blue { background-color: #3b82c4; }
.orange { background-color: #e4572e; }
.green { background-color: #0b9e77; }
.purple { background-color: #9d69be; }
.white{background-color: #fff;}

.father-wrap{
	position: relative;	
    display:flex;
	/*flex-wrap: wrap;*/
	margin: 0 auto;	
	width: 100%;
	z-index: 30;
	/*align-items:center;*/}

.father-photo{width: 47%;margin: 0 1% 0 1%;}
.father-photo img{border-radius: 25px;}
.father-txt{width: 49%;margin: 0 1% 0 1%;text-align:left;}
.father-txt p{font-family: var(--family-basic);	font-size: 15px;font-weight: 600; line-height: 2em;color: #fff;}
.father-txt p.title{color: #ffd800;font-size: 18px;font-weight: 600;line-height: 1.5em;}
.father-txt p.spot{background-color: #fff;display: inline-block;padding: 0px 8px;color: #080808;border-radius: 25px;margin: 15px 0 8px 0;}

.father-txt ul{ font-family: var(--family-basic);font-size: 15px;line-height: 2em;color: #fff;font-weight: 600;}
.father-txt ul li{margin-top: 5px;}
.father-txt ul li span{border-radius: 10px;padding: 3px 5px;border:1px #fff solid;margin-right: 3px;}


/*推薦行程*/

/*---單區塊行程---*/
.tour-wrap {margin:0 auto;clear:both;}
.tour-box{position: relative;max-width: 1200px; margin:0 auto; }
.tour-box a { text-decoration: none; display:flex; flex-wrap: nowrap;}

.ct55 {flex:0 0 55%;  justify-content:flex-start; align-items:flex-start;  align-content: stretch;z-index: 30;}
.ct55 img{	
	background: #fff;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	padding: 5px;
    border: 3px solid #051b36;    
    border-radius: 30px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
	margin-top: 25px;
}

.ct55 img::before {
      content: '';
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border: 4px solid #fff;
      border-radius: 30px;
      pointer-events: none;
    }
.ct45 {flex:0 0 45%; justify-content:flex-start; align-items:flex-start;  align-content: stretch;z-index: 99;}
.tour-txt {margin-left:-30px;margin-top: 15%; background:#fff;border-radius: 25px;padding-bottom: 10px;border: 2px #051b36 solid;}
.tour-txt h3{font-family: var(--family-basic);font-size: 18px;line-height: 1.8em;color:#fff;padding: 10px 15px;background-color: #2148a2;border-radius: 22px 22px 0 0;}
.tour-txt h3 em{font-style:normal;color: #def0ff;font-size: 15px;margin-left: 5px;}
.tour-txt h3 strong{font-size: 15px;font-weight: 600; background-color: #2148a2;border-radius: 10px;color: #fff;padding: 3px 5px;border: 1px #fff solid;margin-right: 5px;}
ul.tour-mark{width: 90%;text-align: left;margin: 10px 10px 10px 30px;}
ul.tour-mark li{font-family: var(--family-basic);font-size: 15px;font-weight: 500;	line-height: 2em;color: #666;margin-top: 10px;list-style-type: circle;}

.tour-pic img { border-radius: 50px;}


.tour-txt p.price{	
	color: #f74040;
	text-align: right;
	font-family: var(--family-basic);
	font-size: 15px;
	font-weight: 500;
	padding-right: 10px;
	font-weight: 600; 	
}

.tour-txt em{	
	font-style:normal;
	color: #f74040;		
}

.tour-txt p.price strong {
	font: 600 20px "Anton", sans-serif;margin: 0 2px;letter-spacing:1px;	
}

.tour-txt span{display: block;font-size: 15px;color: #717171;font-weight: 600; text-align: right;margin-bottom: 5px;}
.tour-txt span em{color:#717171;border: none;margin: 0; font-style:normal;text-decoration:line-through;}

.tour-main{max-width: 1250px; border-radius: 25px;background-color: #fff;margin: 30px auto;padding: 30px 0;}
.tour-list {width: 98%;margin: 0 auto;}
.tour-list a {display:flex;padding: 10px;overflow: hidden;border-bottom: dashed 1px #696969;text-decoration: none;
			justify-content:space-between;align-items:center;}
.tour-list a:hover { background-color: #ebf6ff;}
.name-l{flex:0 0 85%;font-family: var(--family-basic);font-size: 18px;color:#666;line-height: 1.8em;}
.name-l em{font-style:normal;color: #fff;font-family: var(--family-basic);font-size: 15px;border-radius: 5px;background-color: #3e86c1; padding: 3px;margin-right: 5px;}
.name-l span{font-family: var(--family-basic);font-size: 15px;color: #3e86c1;margin-left: 5px;}
.price-r{flex:0 0 15%; text-align:right;font-family: var(--family-basic);font-weight: 600; font-size: 15px;line-height: 1.2em;color: #f74040;}
.price-r strong{font: 600 20px "Anton", sans-serif;margin: 0 2px;letter-spacing:1px;}

.price-r span{display: block;font-size: 15px;color: #717171;font-weight: 600; text-align: right;margin-bottom: 5px;}
.price-r em{color:#717171;border: none;margin: 0; font-style:normal;text-decoration:line-through;}


.flex-center {	
	justify-content: center;
}
.flex-end {	
	justify-content: flex-end;	
}
.flex-between {	
	justify-content: Space-between;	
}
.flex-row-right {	
	flex-direction: row-reverse;	
}

/*錨點*/

.block-first{overflow: hidden;/*padding-top: 80px;margin-top: -50px;*/ margin-bottom: 50px;}

@media only screen and ( max-width:1250px) {
.tour-main{max-width: inherit;width: 90%;}
}
@media only screen and ( max-width:1200px) {
	.tour-box{max-width: inherit;width: 90%;}	
}

@media only screen and ( max-width:959px) {
	.about-box{width: 80%;margin-top: 0;margin-bottom: 25px;}
	
}

/*---平板-----*/
@media only screen and ( max-width:768px) 	
{
	.header-content{
	height: inherit;
	background: inherit;	
	}	
.header-content .header-title{display: none;}	
.header-content .mobile{display: block;}
	
.tour-box{margin-bottom: 30px;}	
.tour-box a{	
	background: #fff;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	padding: 5px;
    border: 3px solid #051b36;    
    border-radius: 30px;
    text-align: center;
    position: relative;
    box-sizing: border-box;	
}

.tour-box a::before {
      content: '';
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      border: 4px solid #fff;
      border-radius: 30px;
      pointer-events: none;
    }
	
.tour-box a {display:block;}	
.ct55 {width:100%;margin-top: 0;margin: 0 auto;}
	
.ct55 img{	
	background: #fff;
	display:block;
	padding: 0;
    border: inherit;    
    border-radius: 30px 30px 0 0;   
	margin-top: inherit;
}

.ct55 img::before {
      content: '';
      position: inherit;
      border: inherit;
      border-radius: inherit;      
    }		
	
.ct45 {width:100%;margin: 0 auto;}	
.tour-txt {margin-left:0;margin-top: 10px;border: inherit;}	
.tour-txt h3{border-radius: 0;text-align: left;}	
	
.name-l{flex:0 0 80%;}
.price-r{flex:0 0 20%;}	
	
.block-first{padding-top: 50px;margin-top: -50px;}	
}

@media only screen and ( max-width:600px) {
	 .container {
        font-size: 25px;
        /*flex-direction: column;*/
      }
	p.txt{right: 60px;}
      .scroll-box {
        height: 25px;
        width: auto;
      }
      .scroll-text p {
        height: 25px;
      }	
	
	.about-box{width: 90%;}		
	.father-wrap{display:contents;}
	.father-photo{width: 90%;margin: 0 auto 10px auto;}
	.father-txt{width: 90%;margin: 0 auto 10px auto;}	
	
	.tour-list a  {display:inherit;}	
	.name-l{flex:initial;width: 100%; display: block;}
	.price-r,.price-p,.price-t{flex:initial;width: 100%;display: block;margin-top: 5px;}
}
@media only screen and (max-width:500px) 
{
h3.min-title span{display: block;margin-top: 25px;}
h3.min-title span em{margin: 0 5px 0 0;}	
}
/*---手機版-----*/
@media only screen and (max-width:480px) 
{
	.header-content .mobile{padding-top: 30px;}
	.container { font-size: 22px;}	
	p.txt{right: 50px;}
	.scroll-box {
        height: 22px;
        width: auto;
      }
	.scroll-text p {
        height: 22px;
      }		
	
	h2.big-title {
	margin: 0 auto 30px auto;}	
	h2.big-title span {
	min-width: 350px;margin: 10px;font-size: 35px;
    }
	h2.big-title span em{font-size: 30px;}
}
@media only screen and (max-width:370px) 
{
	h2.big-title span {min-width: inherit;margin: 10px;}
}