body { background: url(../images/headerBg3.jpg) #eebb17 center 45px no-repeat; background-size: 100% auto; }

header.header { height: 680px; position: relative; }
header.header h1 { margin-top: 0px; text-align: center; }
header.header h1 .pc { display: inline-block; }
header.header h1 .mobile { display: none; }
@media screen and (min-width:1200px) and (max-width:1400px){
	header.header { height: 480px; position: relative; }
}
@media screen and (min-width:801px) and (max-width:1199px){
	header.header { height: 380px; position: relative; }
}
nav.pageMenu { position: sticky;top: 0px; left: 0;width: 100%; text-align: center; z-index: 99; }
nav.pageMenu.fixed{position: fixed;}
nav.pageMenu ul { display: inline-block; padding: 0 100px; text-align: center; border-radius: 0px 0px 20px 20px ;background: #2b26a6 }
nav.pageMenu ul li { display: inline-block; margin:10px; padding: 5px 15px ; font: 20px/20px "arial","微軟正黑體"; color:#fff; cursor: pointer; border-radius: 99em; text-shadow: 1px 1px 0 #000; background: rgba(255,255,255,0.1) }
nav.pageMenu ul li:hover { color: #fff200 }
nav.pageMenu ul li:nth-child(1) { padding-top: 15px; padding-bottom: 15px; margin:0 10px; color: #000; text-shadow:none; border-radius: 0; background: #fff200 }
nav.pageMenu ul li:nth-child(1):hover { font-weight: bold }

.postBase { height: auto; }
.postBase .postArea { position: relative; margin: 20px auto; width: 800px; border: 5px solid #000; background-color: #EEBA32;}
.postBase .postArea .img { display: inline-block; margin: 20px }
.postBase .postArea .txt  { display: inline-block; margin: 20px ; width: 73%; vertical-align: middle;font: 20px/30px "arial","微軟正黑體"; color: #000}
.postBase .postArea::after { content: ""; position: absolute; top:10px; left: 10px; display: block;; width: 100%; height: 100%;z-index: -1 }

.base { padding-top: 20px; padding-bottom: 100px; background: url(../images/repeatBg1.jpg) top center no-repeat; background-position: 0 100px; }
.base div,
.base img { vertical-align: top;}
.base h2 { text-align: center;  }
.base h2::after,.base h2::before { content: "//////////"; margin-top:60px; display: inline-block; font: 30px/30px "arial","微軟正黑體"; color:#fff; letter-spacing: 10px; }

.backgroundStyle2 { background: url(../images/repeatBg2.jpg) top center repeat-y; }
.backgroundStyle3 { background: #eebb17 /*url(../images/repeatBg.jpg) top center no-repeat*/; background-size: 100% auto; background-position: 0 100px; }

.backgroundStyleRepeatY { background-repeat: repeat-y; }

.base .contentBase1 { margin:0 auto; width: 1100px; text-align: center; }
.base .contentBase1 > div { position: relative; display: inline-block; margin: 10px; width: 305px; letter-spacing: normal; overflow: visible;}
.base .contentBase1 > div:nth-child(7),.base .contentBase1 > div:nth-child(8),.base .contentBase1 > div:nth-child(9),.base .contentBase1 > div:nth-child(10)
{ width: 200px; }
.base .contentBase1 > div.noChange:nth-child(7),.base .contentBase1 > div.noChange:nth-child(8),.base .contentBase1 > div.noChange:nth-child(9),.base .contentBase1 > div.noChange:nth-child(10)
{ width: 305px; }

.base .contentBase1 > div > img { width: 100%; }
.base .contentBase1 > div > p { position: absolute; bottom: 0; left: 0; padding: 10px 0; width: 100%; font: 18px/18px "arial","微軟正黑體"; color:#fff; text-align: center; letter-spacing: 1px; background: rgba(0,0,0,0.8); }
.base .contentBase1 > div > .logo { position: absolute; top:-5px; left: -5px; display: inline-block; width: 40px; height: 60px; border-radius: 0 0 99em 99em; background: #2b26a6; font: bold 40px/60px "arial"; color: #fff200;text-shadow: 1px 1px 0 #000; z-index: 2 }
.base .contentBase1 > p { font: 16px/24px "arial","微軟正黑體"; color:#fff; text-align:left; letter-spacing: 1px; text-shadow: 1px 1px 0 rgba(0,0,0,0.2) }
.base .contentBase1 > .topMargin { margin-top:20px; }
.base .contentBase1 .buttonBig { width: 50%; height: auto; text-align: center; border-radius: 20px; border-bottom: 6px solid #1a1762; background: #2b26a6 }
.buttonBig a,
.buttonBig a:link { font: 16px/40px "arial","微軟正黑體"; color: #fff; text-align: center; }

.base .contentBase2 > div {position: relative; margin:100px auto 148px auto; width: 1100px; text-align: center; background: #fa9047 ; }
.base .contentBase2 > div::after { position: absolute;bottom: -74px; content: ""; display: block; width: 100%; height: 74px; background: url(../images/contentBase2Before.png) top center no-repeat; }
.base .contentBase2 > div::before { position: absolute;top: -74px; content: ""; display: block; width: 100%; height: 74px; background: url(../images/contentBase2Before.png) top center no-repeat; transform: scaleY(-1); }
.base .contentBase2 > div > .logo { position: absolute; top:10px; left: -70px; display: inline-block; padding: 5px; width: 100px; height: 100px; background: #2b26a6; font: bold 40px/100px "arial"; color: #fff200;text-shadow: 1px 1px 0 #000; z-index: 2 }

.base .contentBase2 > div > .box2 { display: inline-block; width: 50%; text-align: left; }
.base .contentBase2 > div > div { letter-spacing: normal; }
.base .contentBase2 h3 { margin-bottom: 20px; font: bold 30px/30px "arial","微軟正黑體"; color:#2b26a6; text-align: center;  }
.base .contentBase2 h3.small { font-size: 24px } 
.base .contentBase2 p { margin:0 auto; width: 85%; font: 16px/30px "arial","微軟正黑體"; color:#fff; text-align: left; text-shadow: 1px 1px 0 rgba(0,0,0,0.2)}
.base .contentBase2 p b { font-weight: bold; color: #2b26a6}
.base .contentBase2 > div > .box2.album { margin-right:4%; width: 46%; }

.base .contentBase2 > div > .box2.album img { margin:0; width: 100%;}

.base .contentBase2 .button { margin:10px 10px 0 10px; display: inline-block; width: 150px; height: auto; text-align: center; border-radius: 20px; border-bottom: 6px solid #1a1762; background: #2b26a6 }
.base .contentBase2 .button a,
.base .contentBase2 .button a:link { font: 16px/40px "arial","微軟正黑體"; color: #fff; text-align: center; }
.base .contentBase2 iframe { margin: 20px 0; }

.base .contentBase3 { margin:0 auto; width: 1100px; }
.base .contentBase3  {  position: relative; }
.base .contentBase3 > div { margin: 10px 0%;padding: 2%; width: 100%;background: rgba(255,255,255,0.8) }
.base .contentBase3 > div > div { display: inline-block; width: 50% ;letter-spacing: normal;}
.base .contentBase3 > div > div.text { padding-left: 2% }
.base .contentBase3 .photo img { width: 100% }
.base .contentBase3 h3 { font: bold 30px/30px "arial","微軟正黑體"; color:#333; text-align: center;  }
.base .contentBase3 h3 small { font-size: 16px; font-weight: normal; }
.base .contentBase3 p { font: 16px/30px "arial","微軟正黑體"; color:#333; text-align: left; }

.base .contentBase3 .photoX2 img { width: 100% }
.base .contentBase3 .photoX2 { width: 48% ;position: absolute;right:0;padding:6% 3% 0% 1%;}



h5 { margin:10px 0 0 0; font: bold 22px/22px "arial","微軟正黑體"; color:#fff200; text-align: center;  }

.mobileHideButton { display: none; }



/*C23 use*/
.base .contentBase1 > div.carrier {  padding: 0; margin: 0 ;width: 100%; height: auto; text-align: center; }
.base .contentBase1 > div.carrier .box-head ,
.base .contentBase1 > div.intro-anchors { display: none; }
.base .contentBase1 > div.carrier ul {padding:20px; width: 100%; background: rgba(255,255,255,0.8) }
.base .contentBase1 > div.carrier ul li { position: relative; width: 100%; margin: 20px 0 10px 0; padding-bottom: 10px; text-align: left; letter-spacing: 0 ; border-bottom: 1px dashed #aaa}
.base .contentBase1 > div.carrier ul li a {font:16px/28px "arial","微軟正黑體"; color: #555}
.base .contentBase1 > div.carrier ul li a strong {font: bold 20px/28px "arial","微軟正黑體"; display: block; text-align: left; color: #2b26a6 }
.base .contentBase1 > div.carrier ul li em { position: absolute;bottom: 0; right: 0;font: bold 16px/28px "arial","微軟正黑體"; color: #2b26a6; }
.base .contentBase1 > div.carrier ul li em span {font: bold 22px/28px "arial","微軟正黑體";}
.base .contentBase1 > div.carrier h4 { position: relative; margin: 10px 0 10px 0; padding: 0 0px; display: inline-block; height: 30px; font: bold 30px/30px "微軟正黑體","arial"; color: #2b26a6; text-align: center; }

/*增篩選器*/
.date { text-align: center; }
.date .pc { display: block; }
.date .m { display: none; }

.searchButton { display: none; transition: .5s; position: fixed;top:18%; left: 15%; cursor: pointer; z-index: 10; }
.c23FilterBaseAppendClose { display: inline-block; padding: 5px 10px; color: #fff; background: rgba(0,0,0,0.8); cursor: pointer; }
.searchButton img{ width: auto; -webkit-animation: topButton 1s  infinite alternate;animation: topButton 1s  infinite alternate; }
@-webkit-keyframes topButton {
  from { padding-top: 0; }
  to { padding-top: 20px; }
}
@keyframes topButton {
  from { padding-top: 0; }
  to { padding-top: 20px; }
}

#c23FilterBase { position: fixed; top: 10%; left: 0;  width: 100%; text-align: center; background: none !important; padding: 0 !important; }
#c23FilterArea { margin: 0 auto 30px auto !important; padding:10px; width: 80%; background: rgba(230,178,12,1); max-width:1100px !important; }
#c23FilterBase  .c23FilterBaseAppendClose { letter-spacing: normal; }
.informationShow{ display: none; }
.areaIntroduction{ display: none; }
#c23FilterArea .box2{display: none !important;}

@media screen and (max-width: 768px) {
	.date .pc { display: none; }
	.date .m { display: block; }

	#c23FilterBase { display: block; top:-200vh; padding: 0 !important;}
	#c23FilterArea { width: 100% !important; height: 100vh; /*padding:0 5%;*/}

	.searchButton { display: none; }
	.mobileFilterButton {
		bottom:85px !important;
		left: 0;
		width: 40px !important;
		height: 40px !important;
	}
}



@media only screen and (max-width: 1100px) {
	.base .contentBase1 { margin:0 auto; width: 90%; text-align: center; }
	/*
	.base .contentBase1 > div ,.base .contentBase1 > div:nth-child(7),.base .contentBase1 > div:nth-child(8),.base .contentBase1 > div:nth-child(9),.base .contentBase1 > div:nth-child(10)
	 { width: 30%;  }
	*/
	.base .contentBase2 > div { width: 90%; }
	.base .contentBase2 > div img { width: 100%; }
	.base .contentBase2 > div > div.album img { width: 23%; }
	.base .contentBase2 > div > .logo { display: none  }

	.base .contentBase3 { width: 90%; }

}


@media only screen and (max-width: 1110px) {
nav.pageMenu {width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
nav.pageMenu ul { position:relative; width: 100%; z-index: 10; padding: 0 30px; white-space:nowrap; width:auto; border-radius: 0; }
nav.pageMenu ul li { display: inline-block; margin:10px 0 20px 0;padding:10px 20px;font: 20px/20px "arial","微軟正黑體"; color:#fff; cursor: pointer;  }
nav.pageMenuul li:nth-child(1) {margin:10px 0 20px 0;padding:10px 20px; border-radius: 99em; }
nav.pageMenu ul::before,
nav.pageMenu ul::after { content:""; display: inline-block; position: absolute;top:17px; width: 15px; height: 27px; background: url(../images/arrow.png) top center } 
nav.pageMenu ul::before {left: 0px;  } 
nav.pageMenu ul::after {right: 0px; transform: scaleX(-1);  } 

.postBase { height: auto; }
.postBase .postArea { position: relative; margin: 20px auto; width: 80%; border: 5px solid #000;  }
.postBase .postArea .img { display: inline-block; margin: 1%; width: 20% }
.postBase .postArea .img img { width: 100% }
.postBase .postArea .txt  { display: inline-block; margin: 1%; width: 73%; vertical-align: middle;font: 20px/30px "arial","微軟正黑體"; color: #000}

}


@media only screen and (max-width: 800px) {
	body { background: #eebb17 }
	header.header { height: auto; }
	header.header h1 { margin-top: 0 }	
	header.header h1 .pc { display: none; }
	header.header h1 .mobile { display: block; width: 100%; }

	.base { background:none; }
	.backgroundStyle2 { background:#36ccb8}

	.base h2::after,.base h2::before { display: none }
/*
	.base .contentBase1 > div ,.base .contentBase1 > div:nth-child(7),.base .contentBase1 > div:nth-child(8),.base .contentBase1 > div:nth-child(9),.base .contentBase1 > div:nth-child(10)
	 { width: 40%;  }
	 .base .contentBase1 > div.noChange:nth-child(7),.base .contentBase1 > div.noChange:nth-child(8),.base .contentBase1 > div.noChange:nth-child(9),.base .contentBase1 > div.noChange:nth-child(10)
	{ width: 40%; }
*/
	.base .contentBase2 > div > .box2,
	.base .contentBase2 > div > .box2.album { display: block; margin: 0 auto; width: 80%;}
	.base .contentBase2 p { width: 100%;word-wrap:break-word;word-break:normal; }
	.base .contentBase2 iframe { margin: 50px 0 20px 0; }


}

@media only screen and (max-width: 450px){
	.base .contentBase1 > div > p { font-size: 16px }
	.base .contentBase1 > div > .logo { width: 30px; height: 40px ; font-size: 20px; line-height: 40px;}

	.base h2 img { width: 80%; }
	.base .contentBase2 > div { margin:5% auto; padding: 10% 0; }
	.base .contentBase2 > div::after,.base .contentBase2 > div::before { display: none }
	.base .contentBase2 > div > .box2.album img {  width: 100%; }
	.base .contentBase2 iframe { margin-top:10%; }
	.base .contentBase2 .button { margin-top:10%; width: 120px; }
	.base .contentBase2 iframe { margin: 10% 0 2% 0; }

	.base .contentBase3 > div > div { margin: 5% auto;padding: 5%; width: 100%;display: inline-block; letter-spacing: normal; }
	
	.base .contentBase1 > div.carrier ul li { padding-bottom: 10%;}	

	.mobileHideButton { display: inline-block; margin: 5% auto; padding: 1% 2%; width: auto; border: 1px dotted #ddd; text-align: center; font: 14px/14px "arial","微軟正黑體" ; color: #ddd}
	.mobileHide { display: none }


	.base .contentBase3 .photoX2 img { width: 100% }
	.base .contentBase3 .photoX2 { width: 100% ;position: relative;right:0;padding:0% 5% 0% 5%;margin:0% auto 5% auto;}

} 


/**/


 #viewport {
  position: absolute;
  top:50px;
  left: 19%;
  width: 20%;
  height: 600px;  
}

 #viewport2 {
  position: absolute;
  top:0px;
  left: 52%;
  width: 15%;
  height: 600px;    
}


#viewport .smoke,#viewport2 .smoke {
  position: absolute;
  width: 100%;
  height: 251px;
  background:url('../images/smoke.png') no-repeat; 
  background-size:100% 100%;  
  bottom: 30px; 
  margin-left:0px
}

@media only screen and (max-width: 1700px){
 #viewport{	left: 17% }
 #viewport2{ left: 52% }
}

@media only screen and (max-width: 1300px){
 #viewport{ left: 11% }
 #viewport2{ left: 48% }
}
@media only screen and (max-width: 1050px){
 #viewport{ left: 2% }
 #viewport2{ left: 55% }
}
@media only screen and (max-width: 800px){
 #viewport,#viewport2 { display: none}
}


#c23FilterBase{
	z-index: 98 !important;
}
#c23FilterArea .backTop {
	display: none;
}