/*body { background: url(../images/repeatBg.jpg) top center repeat-y; }*/
body {background: url(../images/hearderBg.jpg) top center no-repeat; background-attachment: fixed;}
.baseBg { background:#fff }

.width1100px { margin: 0 auto; width: 1100px; }

header .headerTitleContent { position: relative; height: 480px; }
header .headerTitleContent h1 { position: absolute;top:7%; left: 20%; display: inline-block;}
header .headerTitleContent .pc { display: inline-block; }
header .headerTitleContent .mobile { display: none; }

.buttonBase { text-align: center; background: #472874 }
.buttonBase li { display: inline-block; padding: 0px 10px; margin: 12px 0; font: 16px/22px "arial","微軟正黑體"; color: #ebded2; border-right: 1px solid  #ebded2; cursor: pointer;}
.buttonBase li:last-child { border-right: none }
.buttonBase li a {color: #ebded2;}

.contentBase {text-align: center;}
.contentBase h6 { margin: 0 0 20px 0; font: 16px/22px "arial","微軟正黑體"; color: #545454; letter-spacing: 4px}
.contentBase h6 b { padding: 0 10px; font-size:30px; line-height: 60px; border:1px solid #545454; }


.contentBase .photoInformation { position: relative; display: inline-block; width: 25%; height: auto; background: rgba(0,0,0,0.1); background-size: 100%; }
.contentBase .photoInformation h3 { display: inline-block; margin: 20vh 0; padding: 5px 20px; font: 16px/22px "arial","微軟正黑體"; color: #fff; letter-spacing: 4px; background: rgba(0,0,0,0.8)}
.contentBase .photoInformation h3 small { font-size: 8px }
.contentBase .photoInformation h5 { display: none; position: absolute; top: 0; left:0; padding: 10%; width: 100%; height: 100%;font: 16px/22px "arial","微軟正黑體"; color: #fff; letter-spacing: 2px;background: rgba(0,0,0,0.8); z-index:1}

.contentBase .photoInformation:nth-child(1) {background: url(../images/photoInformation_giza.jpg) top center no-repeat}
.contentBase .photoInformation:nth-child(2) {background: url(../images/photoInformation_saqqara.jpg) top center no-repeat}
.contentBase .photoInformation:nth-child(3) {background: url(../images/photoInformation_egyptianMuseum.jpg) top center no-repeat}
.contentBase .photoInformation:nth-child(4) {background: url(../images/photoInformation_thebes.jpg) top center no-repeat}


.contentBase .photoInformationTurkey:nth-child(1) {background: url(../images/photoInformation_troy.jpg) top center no-repeat; background-size: 115%;}
.contentBase .photoInformationTurkey:nth-child(2) {background: url(../images/photoInformation_pamukkale.jpg) top center no-repeat; background-size: 115%;}
.contentBase .photoInformationTurkey:nth-child(3) {background: url(../images/photoInformation_cappadocia.jpg) top center no-repeat; background-size: 115%;}
.contentBase .photoInformationTurkey:nth-child(4) {background: url(../images/photoInformation_ephesus.jpg) top center no-repeat; background-size: 115%;}



/*C23 use*/
.contentBase .carrier {  width:100%; margin: 0; padding: 0 0 20px 0; height: auto;background:url(../images/ulBgRight.jpg) bottom right no-repeat; }
.contentBase .carrier .box-head,
.intro-anchors { display: none; }

.contentBase .carrier ul {margin: 0 auto 100px auto; width: 100%;  }
.contentBase .carrier ul li { position: relative; width: 100%; margin: 20px 0 0px 0; text-align: left; }
.contentBase .carrier ul li:hover { background:#fff3dd }
.contentBase .carrier ul li:hover a,
.contentBase .carrier ul li:hover a strong { color: #f25804 !important; }
.contentBase .carrier ul li a {font:14px/28px "arial","微軟正黑體"; color: #444;}
.contentBase .carrier ul li a strong {font: bold 22px/28px "arial","微軟正黑體"; color: #000; display: block; letter-spacing: 2px }
.contentBase .carrier ul li em { position: absolute;bottom: 0; right: 0;font: bold 16px/28px "arial","微軟正黑體"; }
.contentBase .carrier ul li em span {font: bold 22px/28px "arial","微軟正黑體";}
.contentBase .carrier h4 { margin: 0; padding: 10px 0; font: bold 30px/30px "arial","微軟正黑體";}

/* C26 use */
.locPoint{font-size: 0px;}
.group-type-ph{font-size: 0px;}
.ph{width: 90%; margin:10px 5%; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); transition: 0.5s; display: inline-block; position: relative;}
.ph:hover{box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.2);}
.ph-img{width: 100%;}
.ph-img{width: 100%;}
.ph-img > img{width:100%;}
.ph-title{font-size: 20px; font-weight: bold; height: 40px; margin:5px; color:#472B72;}
.ph-detail{font-size: 15px; height: 60px; margin:5px 5px 40px; text-align: justify; color:#666; line-height: 22px;}
.price{ /* font-size: 16px; margin:10px 1% 10px calc(99% - 100px); */ position: absolute; bottom: 5px; right: 5px;}
.price > span{font-size: 24px;}
.price > i{vertical-align: middle;}


.archList{position: fixed; top:30%; text-align: center; right: -200px; background-color: rgba(0,0,0,0.6); z-index: 10;}
.archList > li{color:#fff; font-size: 16px; padding:10px; cursor: pointer;}



@media only screen and (max-width: 768px) {
	.buttonBase { width: 100%; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;overflow-scrolling: touch; }
	.buttonBase li {position:relative; z-index: 10; padding: 0 5px; white-space:nowrap; width:auto; }	
}


@media only screen and (max-width: 1100px) {
.width1100px { margin: 0 auto; width: 100%; }
header .headerTitleContent .pc { width: 90% }

.contentBase .photoInformation h3 { margin: 25vh 0;}
.contentBase .photoInformationTurkey:nth-child(1) { background-size: 150%;}
.contentBase .photoInformationTurkey:nth-child(2) { background-size: 150%;}
.contentBase .photoInformationTurkey:nth-child(3) { background-size: 150%;}
.contentBase .photoInformationTurkey:nth-child(4) { background-size: 150%;}

}

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

.width1100px { margin: 0 auto; width: 80%; }

header .headerTitleContent { position: relative;height: auto; width: 100%; }
header .headerTitleContent h1 { position: static;display: inline-block; margin: 0; padding: 0}
header .headerTitleContent .pc { display:none ; }
header .headerTitleContent .mobile { display: inline-block; width: 100%; }


.contentBase .photoInformation { position: relative; display: inline-block; width: 50%; height: auto; background: rgba(0,0,0,0.1); background-size: 100%; }
.contentBase .photoInformation h3 {  margin: 17vh 0; }
.contentBase .carrier ul li { padding: 0 0 10% 0 }

.contentBase .carrier ul li a {font:14px/28px "arial","微軟正黑體"; color: #444;}
.contentBase .carrier ul li a strong {font: bold 16px/28px "arial","微軟正黑體"; color: #000; display: block; letter-spacing: 2px }
.contentBase .carrier ul li em { position: absolute;bottom: 0; right: 0;font: bold 16px/28px "arial","微軟正黑體"; }
.contentBase .carrier ul li em span {font: bold 22px/28px "arial","微軟正黑體";}
.contentBase .carrier h4 { margin: 0; padding: 10px 0; font: bold 30px/30px "arial","微軟正黑體";}



}

@media only screen and (max-width: 414px) {
.contentBase .photoInformation h3 { letter-spacing: 0px; }
.contentBase .photoInformation h5 { font-size:14px; letter-spacing: 0px; }





}

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

.contentBase .photoInformation { position: relative; display: inline-block; width: 100%; height: auto; background: rgba(0,0,0,0.1); background-size: 100%; }

}

@media only screen and (min-width: 769px){
	.ph{width: 48%; margin:10px 1%;}
	.archList{width: 150px;}
} 

@media only screen and (min-width: 1000px){
	.ph{width: 23%; margin:10px 1%;}
}