body{background: #fff7d9;}
body .contentWidth1100px { margin: 0 auto; width: 1100px;}
.for_pc{display: block;}
.for_m{display: none;}
header { width: 100%; background: url(../images/headerBg_20200421.jpg) top center no-repeat; }
header.summerHd { width: 100%; background: url(../images/headerBg_friends.jpg) top center no-repeat; }
header .headerContent { position: relative; height: 550px; }
header .headerContent img { position: absolute; left: 30% }
header .mobileTitle {display: none}

/*for公告資訊展開*/
.postTitle{position: relative; width: 100%; max-width: 1100px; margin-bottom: 40px; border: solid 1px #aaebff; border-radius: 15px;}
.postTitle img{width: 100%; height: auto; max-width: 1100px; margin: auto; border-radius: 11px;}
.postTitle .btn{position: absolute; bottom: -25px; left:50%; margin-left: -90px; width: 180px; color: #fff; background: #083eb7; border-radius: 25px; transition: all 0.5s ease-in;}
.postTitle .btn:hover{background: #175cf9;}
.postArea{display: block; padding: 9px;}
/*for公告資訊展開 end*/

.postBase { height: auto; }
.postBase .postArea { position: relative; margin: 20px auto; width: 1100px; border: 5px solid #000; background: #FFF;text-align: center;}
.postBase .postArea .img { display: inline-block; margin: 40px 20px }
.postBase .postArea .txt  { display: inline-block; margin: 20px ; width: 95%;margin: 10px auto;vertical-align: middle;font: 16px/1.8 "arial","微軟正黑體"; color: #000;text-align: left;}
.postBase .postArea .txt h2{font: bold 26px/1 "arial","微軟正黑體"; color: #1e59a1; padding-bottom: 2%;}
.postBase .postArea::after { content: ""; position: absolute; top:10px; left: 10px; display: block; width: 100%; height: 100%;z-index: -1 }
.postBase .postArea::after{background: -webkit-gradient(linear, left top, right bottom, from(#bbb), color-stop(0.25, #bbb), color-stop(0.25, rgba(0,0,0,0)), color-stop(0.5, rgba(0,0,0,0)), color-stop(0.5, #bbb), color-stop(0.75, #bbb), color-stop(0.75, rgba(0,0,0,0)), to(rgba(0,0,0,0)));
background: -moz-linear-gradient(-45deg, #bbb 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, #bbb 50%, #bbb 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0));
background: linear-gradient(-45deg, #bbb 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, #bbb 50%, #bbb 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0));
background-size: 4px 4px;}

.postBase .postArea .txt .txtBtn {background:#1e59a1;display: block;padding: 7px 10px;border-radius: 15px;color: #FFF;font: 20px/22px "arial","微軟正黑體";margin: 0 auto;text-align: center;width: 280px;cursor: pointer;transition: 0.3s;}
.postBase .postArea .txt .txtBtn:hover{transform: translateX(-5px);}
.lightboxbg { border: 3px solid #1e59a1;box-shadow: 0 0 0 5px white;background: #FFF;overflow-y: auto;height: 100%;padding: 5%;border-radius: 20px;}


/*lightbox*/
.lightbox{position: fixed;top:0;width: 100%;height: 100%;z-index: 9999;background: rgba(0,0,0,0.8);padding: 3% 5%;overflow-y: scroll;text-align: left;display:none;}
.lightbox b {font:bold 18px/1.8 "arial","微軟正黑體";color:#c64a4a;margin: 0 auto;text-align: left;}
.lightbox p {font:16px/1.8 "arial","微軟正黑體";color:#000;margin: 0 auto 5px auto;text-align: left;}
.lightbox h3{font: bold 26px/1.4 "arial","微軟正黑體"; color: #1e59a1;margin: 10px auto; border: 1px solid #1e59a1;display: inline;padding: 2px 5px;}
.lightbox .title {font:bold 24px/2 "arial","微軟正黑體";color:#16e674;margin: 0 auto;text-align: left;border-radius: 25px;border: 1px solid #16e674;padding: 0px 10px; }
.lightbox li {font:16px/1.6 "arial","微軟正黑體";color:#FFF;margin: 0 auto;text-align: left;}
.lightbox a{color:#FFF;text-decoration: underline;}

.readBtn {background:#1e59a1;display: block;padding: 7px 10px;border-radius: 15px;color: #FFF;font: 20px/22px "arial","微軟正黑體";margin: 0 auto;text-align: center;width: 280px;cursor: pointer;transition: 0.3s;}
.readBtn:hover{transform: translateX(-5px);}


.close{position: absolute;right: 120px;top:80px; opacity: 1;}
.close svg g .st0{fill:#1e59a1;border: 3px solid #1e59a1;}
.close svg{width: 50px; height: 50px; opacity: 1;transition: .3s;cursor: pointer;}
.close svg:hover g .st0{fill:#c64a4a;}



nav {position: -webkit-sticky; position:sticky; top:0;  width: 100%; background: #1a78cd; z-index: 9999; box-shadow:0 5px 5px rgba(0,0,0,0.1)  }
nav ul { text-align: center; }
nav ul li { display: inline-block; margin: 15px 20px 15px 20px; font: 30px/30px "arial","微軟正黑體"; color: #fff }
nav ul li small { font-size: 12px; line-height:12px }
nav ul li a:link,
nav ul li a:visited { color: #fff  }
nav ul li a:hover {color: #ffea94; text-shadow: 0px 0px 10px rgba(0,0,0,0.2)}
nav #h4ButtonInput { padding: 5px 0; text-align: center; background: #c3e7f3;}
nav #h4ButtonInput a {  padding: 0 10px; font: 18px/18px "arial","微軟正黑體";color:#000 ; cursor: pointer;}






.eventItemRulePost { margin:40px 0 20px 0;}
.eventItemRulePost > div { position: relative; display: inline-block; margin:0 1.5%; width: 22%; border-radius: 20px; border:5px solid #fff;
 background: #f55ac1 ; text-align: center; }

.eventItemRulePost h3 { border-radius: 20px 20px 0 0; background: #bf3190; font: bold 26px/1.4em "arial","微軟正黑體"; color: #fff; letter-spacing: 1px;}
.eventItemRulePost > div:nth-child(3) h3 { background: #7d2aa0; }
.eventItemRulePost p { padding: 20px 0; font: 300 20px/1.4em "arial","微軟正黑體";color: #fff; letter-spacing: normal; }
.eventItemRulePost p strong { font-size: 30px; color: #fff200; font-weight: bold; }

.eventItemRulePost > div::after { content: ""; position: absolute; top:calc(50% - 10px); right:-30px; width: 20px; 
height: 20px; background: url(../images/iconPlusSmall.png) top center no-repeat; }
.eventItemRulePost > div:nth-child(3)::after {  background: url(../images/iconPlusSmall2.png) top center no-repeat;}

.eventItemRulePost > div:last-child::after { display: none; }

.eventItemRulePost > div:nth-child(3) { background:#983dc0; }
.eventItemRulePost > div:nth-child(3) .stop{position: absolute; right:-30px;bottom: -12px;}




/*C26 use*/

/*
.contentBase { background: #57ddef;padding:0 0 30px 0; }
.contentBase.ski { background: #fff200 url(../images/skyBg-pc.jpg) center center no-repeat;background-size: cover;padding:30px 0; }
.contentBase.spring{ background: #fff200 url(../images/springBg-pc.jpg) center center no-repeat;background-size: cover;padding:30px 0;  }
.contentBase.ski .group-type-ph,.contentBase.spring .group-type-ph{max-width: 1400px;margin:0 auto;}
.contentBase .group-type-ph { text-align: center; }
.contentBase .group-type-ph .ph { display: inline-block; position: relative; margin: 10px; width: 300px; height: auto; vertical-align: top; background:#1dc6fc; box-shadow: 5px 5px 0px rgba(0,0,0,0.1)}
.contentBase .group-type-ph .ph .ph-img {  margin: 0 0px 0 0 ; overflow: hidden; }
.contentBase .group-type-ph .ph .ph-img img {  height: auto; max-width:320px;display:block;margin:0 auto; }
.contentBase .group-type-ph .ph .ph-title {padding:10px 0 0 0; font: bold 18px/24px "arial","微軟正黑體"; color: #fff; vertical-align: middle;margin-bottom:20px;}
.contentBase .group-type-ph .ph .ph-detail { margin:0 0 20px 20px;padding:0 10px 0 0;font: 14px/20px "arial","微軟正黑體"; color: #fff; text-align: left; vertical-align: middle;}
.ph .price { margin: 0; padding: 0; font: bold 18px/26px "arial","微軟正黑體";color:#fff71c; }
.ph .price span {margin: 0; padding: 0; font: bold 26px/26px "arial","微軟正黑體";color:#fff71c; }
.ph .go {width: 80%;  margin: 0 10% 2% 10%;    border-radius: 99em; height: auto;    font: 16px/30px "arial","微軟正黑體";    text-align: center;    color: #000;    background: #fff71c;}
*/

.contentBase{width: 75%;margin: 15px auto 0 auto;}
.contentBase h4{font: bold 36px/1.4 "arial","微軟正黑體";margin: 10px 10px 3px 10px;text-align: center;color: #1a78cd;}
.group-type-ph { text-align: center;display: block; padding-top:0px; width: 100%; margin:5px auto; padding-bottom: 20px;}
.group-type-ph .ph { transition: 0.3s; border-radius: 15px;display: inline-block; position: relative; margin:10px 5px; width:23%; text-align: left; vertical-align: top; box-shadow: 0px 2px 5px rgba(0,0,0,0.3);cursor: pointer;transition: 0.5s;}
.group-type-ph .ph a { display: block; width: 100%; height:auto;  }
.group-type-ph .ph .ph-img,.group-type-ph .ph .ph-img img{display: block;width:100% ; margin:0 auto;height:auto;border-radius: 15px 15px 0 0 ;}
.group-type-ph .ph .ph-img { position: static;width:100%;  z-index: 1;transition: 1s;  -webkit-transition: 1s;height:auto; overflow: hidden;}
.group-type-ph .ph .ph-img img{ -webkit-transition:1s all ease;transition: 1s all ease;}
.ph-title { position: static; bottom: 0; padding:2% 5%; width: 100% ; font: bold 16px/1.2 "arial","微軟正黑體"; text-align: center; color: #FFF; background: #000; letter-spacing: 0px; z-index: 2}
.ph-detail { margin: -1px auto 0 auto; padding:1% 3% 1% 3%; width: 100% ; font: bold 16px/1.2 "arial","微軟正黑體"; letter-spacing: 1px; color: #303030; overflow: hidden; background: #FFF;}
.ph-detail li {list-style: disc;}
.ph img { width: 100%; }
.ph-feature { display:none;margin: 0 auto; padding: 0 3%; width:100%; text-align: left;font: bold 14px/20px "arial","微軟正黑體"; color: #e83928;}
.ph em { display: block; width: 100%; font: bold 24px/40px "Century Gothic","微軟正黑體";text-align: center; letter-spacing: 0px; color: #e83928;padding: 10px 0 10px 0 ;background: #FFF;border-radius: 0 0 15px 15px;transition: 0.5s;}
.ph em span{ margin: 0 0 0 -5px ; font:bold 40px/29px "Century Gothic","微軟正黑體"; color:  #e83928;}
.ph em i { margin: 0 0 0 -5px ;font: 20px/40px "Century Gothic","微軟正黑體";}
.ph a,
.ph a:link { color: #000 }

.ph em::after{content:"\7acb\5373\6436\4f4d";text-align:center;position: relative;bottom: 0px;left:20%;color:#FFF;border-radius: 40px; width: 60%;font: bold 26px/1.4 "arial","微軟正黑體"; background:#369eff;display: block;margin: 5px 0 5px 0;text-shadow: 1px 1px 2px #0266f0;transition: 0.5s;}
.group-type-ph .ph:hover em::after {transform: scale(0.95);}





.otherCityMenu {text-align: center;}
.otherCityMenu li {background: #FFF;border-radius: 30px;font: 18px/1.6 "arial","微軟正黑體";display: inline-block;padding:3px 10px;cursor: pointer;margin: 5px;transition: 0.3s;}
.otherCityMenu li.on{background:#ffea94;}
.otherCityMenu li:hover{background:#ffea94;}

.otherCityC26{display: none;}
.otherCityC26.on{display: block;}
.prodTitle{
	font: normal 36px/26px "arial","微軟正黑體";
	color:#fff;
	margin:0 auto;
	padding:18px 0;
	text-align: center;
	text-shadow: 0 0 8px rgba(0,0,0,0.6);
}
.prodTitle strong{
	font: bold 15px/1.4 "arial","微軟正黑體";
	display: block;
	padding-top:10px;
	letter-spacing: 10px;
	text-shadow: 0 0 8px rgba(0,0,0,0.4);

}
.contentBase .prodTitle,
.contentBase.spring .prodTitle{
	color:#000;
}

.contentBase.ski .prodTitle{
	color:#fff;
}


/* *C23* */
.carrier .box-head{display: none;}
.carrier{
	margin: 20px auto;
	width: 90%;
	max-width: 1400px;
	text-align: center;
	background-color: #fff;
	padding: 20px;
	box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
	font-family: "arial","微軟正黑體";
	position: relative;
}

.carrier > a{position: absolute;top:-88px;}
.intro-anchors{margin: 0px auto 40px; text-align: center; display: none;}
.intro-anchors a{color: #fff; font-size: 24px; margin: 5px 10px;}
.intro-anchors a:hover{color: #fff200;}

.carrier h4{font-size: 30px; margin: 10px;}
.carrier ul{text-align: left; font-family: "arial","微軟正黑體";}
.carrier li{
	margin: 20px 0px;
	border-bottom: dashed 1px #aaa;
	padding: 10px 10px 40px;
	position: relative;
}
.carrier li a{
	font-size: 16px;
	line-height:1.8em;
	letter-spacing: 1px;
	color: #888;
}
.carrier strong{
	display: block;
	font-size: 22px;
	color: #555;
	line-height: 28px;
	margin: 5px 0;
}
.carrier em.price{
	text-align: right;
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 20px;
	font-weight: bold;
}
.carrier em.price span{font-size: 20px;}

@media only screen and (max-width: 1400px) {
	.postATT div{width:90%; margin: 0 auto;}
	.contentBase{width:90%;margin: 0 auto;}
}

@media only screen and (max-width: 1200px) {
	.eventItemRulePost h3 { font-size: 1.4rem; }
	.eventItemRulePost p { font-size: 1rem; }

}	

@media only screen and (max-width: 1100px) {
	body .contentWidth1100px { margin: 0 auto; width:100%;}

	.postBase { height: auto;}
	.postBase .postArea { position: relative; margin: 20px auto; width: 80%; border: 5px solid #000; background: #fff;}
	.postBase .postArea .img { display: inline-block; margin: 1%; width: 20%; }
	.postBase .postArea .img img { width: 100%;margin:30% 0 0 0;}
	.postBase .postArea .txt  { display: inline-block;  vertical-align: middle; color: #000;}
	.group-type-ph .ph {width: 33%;}
}


@media only screen and (max-width: 1000px) {
.close{position: absolute;right: 80px;top:60px; opacity: 1;}
.close svg{width: 40px; height: 40px; }
}

@media only screen and (max-width: 900px) {
	header .headerContent img { left: 20%;}
	.postTitle .btn{bottom: -30px;}
}

@media only screen and (max-width: 800px) {
	.group-type-ph .ph {width: 45%;}

	.for_pc{display: none;}
	.for_m{display: block;}
	header { width: 100%; background-position: 0 0;}
	header .headerContent { display: none; }
	header .mobileTitle {display:block; width: 100%;}
	nav ul li{font:20px/1 "arial","微軟正黑體";margin: 10px 20px 10px 20px;}


}

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

.eventItemRulePost > div {  border:2px solid #fff;  }
.eventItemRulePost > div::after {  top:calc(50% - 8px); right:-20px; width: 16px; 
height: 16px; background: url(../images/iconPlusSmall.png) top center no-repeat; background-size:  100% 100%; }
.eventItemRulePost > div:nth-child(3) .stop{position: absolute; right:-10px;bottom: -20px;}
.eventItemRulePost h3 { font-size: 1rem; }

}



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



	nav #h4ButtonBase { width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; background: #ffd2b5;}
	nav #h4ButtonInput { padding: 2% 0; text-align: center;  white-space:nowrap; width:auto;}
	nav #h4ButtonInput a {  padding: 0 10px; font: 18px/18px "arial","微軟正黑體";color:#000 ; cursor: pointer;}

	nav { width: 100%;  }
	nav ul { text-align: center; }
	nav ul li { display: inline-block; margin:3% 2% 3% 2%; font: 16px/1.2 "arial","微軟正黑體"; color: #fff; }

	.postTitle .btn{bottom: -25px; line-height: 1; font-size: 15px;}

	.contentBase.ski { background: #fff200 url(../images/skyBg-m.jpg) center bottom no-repeat;padding:30px 0;background-size: cover; }
	.contentBase.spring { background: #fff200 url(../images/springBg-m.jpg) center bottom no-repeat;padding:30px 0;background-size: cover; }
	.contentBase.ski .group-type-ph .ph img,
	.contentBase.spring .group-type-ph .ph img{max-width:100%;}
	.contentBase.ski .group-type-ph,.contentBase.spring .group-type-ph{max-width: 320px;margin:0 auto;}
}


@media only screen and (max-width: 600px) {
.eventItemRulePost > div {  margin:1% 3%; width: 44%;  }
.eventItemRulePost h3 { padding: 5% 0; } 
.eventItemRulePost p { padding: 5% 0; }
.eventItemRulePost p.small { letter-spacing: -1px }
.eventItemRulePost > div:nth-child(3) .stop{position: absolute; right:-10px;bottom: 30px;}

.group-type-ph .ph {width: 80%;}

.close{position: absolute;right: 60px;top:40px;}
}

@media only screen and (max-width: 450px) {
.lightbox h3 {display: block;margin:5px auto;}
}

@media only screen and (max-width: 420px) {
.postBase .postArea .txt .txtBtn,.readBtn  {width: 100%;}
.close{position: absolute;right: 20px;top:10px;}
}


@media only screen and (max-width: 414px) {
	header .headerContent img { left: 15% }
	.contentBase.ski .group-type-ph,
	.contentBase.spring .group-type-ph{max-width: 80%;margin:0 auto;}
	.group-type-ph .ph {width: 90%;}
}

@media only screen and (max-width: 320px) {
	header .headerContent img { position: static; }
}




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

}