﻿.info-box {
	position:relative;
	margin-bottom:8px;
}
.info-heading {
	background-color:#dedede;
	padding:3px 7px 2px;
	font-size:13px;
	margin-bottom:8px;
}
.info-title {
	float:left;
	width:12%;
	margin-right:10px;
	color:#999999;
	font-size:13px;
	font-size:1.3rem;
	padding-top:1px;
}
.info-content {
	float:left;
	width:86%;
	/*text-align: justify;
	text-justify:inter-ideograph; 20160628 跟carrie討論後決定先註解 Gabby*/
}
.info-content > span { margin-right:15px; }

.info-content .list li > span {  margin-right: 3px; }
.info-content .list li { margin-bottom: 3px; }
.info-content .list li > span.title { width: 95%; color: #454545; }

.fee .info-content > span { display:inline-block; margin-right:0; min-width:100px; }
.fee span.fee-cost { min-width:70px; }
.fee span.fee-type { min-width:90px; }
.fee span.fee-remark { min-width:200px; }
.fee .info-content > span.slash { min-width:inherit; margin:0 6px; }

.active-date, .active-time {
	font-size:24px;
	font-size:2.4rem;
	line-height:30px;
	font-family:Century Gothic, Verdana, Geneva, sans-serif;
	letter-spacing:0px;
	color:#666666;
}
.active-time {
	font-size:16px;
	font-size:1.6rem;
	line-height:18px;
	color:#787878;
	margin-top:3px;
}
.active-date span, .active-time span {
	color:#888888;
	/*font-size:12px;
	font-size:1.2rem;
	line-height:14px;*/
	margin:0 3px;
}
.active-date span.slash, .active-time span.slash {
	margin:0 8px;
	font-size:16px;
	font-size:1.6rem;
}

.subInfo .area-info { padding-bottom:15px; border-bottom:1px solid #dedede; }
.subInfo .area-info.venue, .subInfo .area-info.related { margin-bottom:0; border-bottom:none; }
.subInfo .info-box {
	margin-bottom:5px;
}
.subInfo .info-title {
	width:100%;
	margin-right:0;
}
.subInfo .info-content {
	width:100%;
	font-size:13px;
	font-size:1.3rem;
	text-align:left;
	margin-left:1px;
}
.subInfo [class^="btn-"] ~ .info-title { margin-top:10px; }
.subInfo .itemBox .name {
	font-size:14px;
	font-size:1.4rem;
}
.subInfo .info-box .itemBox { margin-top:20px; }
.subInfo .info-box .itemBox:first-child { margin-top:0; }
.subInfo .info-box .list li:last-child { margin-bottom:0; }
.subInfo .info-box .readMore {
	margin-right: 2px;
    padding-top: 3px;
    text-align: right;
}


/* 上下頁 回列表 */
.pager {
 	position: relative;
 	font-weight: normal;
 	z-index: 99;
 	padding: 40px 0 20px;
 	text-align: center;
}
.pager a, .pager .inactive {
	width: 51px;
	height: 51px;
	line-height: 51px;
	text-align: center;
	font-size: 17px;

	/*float: left;*/
	position: relative;
	display: inline-block;

	-webkit-transition: border-color .5s ease-in-out;
	-moz-transition: border-color .5s ease-in-out;
	-o-transition: border-color .5s ease-in-out;
	-ms-transition: border-color .5s ease-in-out;
	transition: border-color .5s ease-in-out;

	background-color: #ffffff;
	border: 1px solid #555555;

	margin: 0 -3px;
}
/*.pager a.prev { margin-right: -1px; }
.pager a.next { margin-left: -1px; }*/
.overlaywrapper {
	width: 250px;
	padding: 14px 18px 15px;
	position: absolute;
	bottom: -1px;
	background-color: #000000;
	color: #ffffff;
	display: none;

	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	overflow:hidden;
}
a.prev .overlaywrapper { right: 100%; }
a.next .overlaywrapper { left: 100%; }
.pager .icon {
	display: block;
	color: #000000;
}
/*.pager .icon > i {
	font-family: "Ionicons";
	line-height: 51px;
}
.pager .icon > i.fa-arrow-left::before {
	content: "\f2ca";
}
.pager .icon > i.fa-arrow-right::before {
	content: "\f30f";
}
.pager .icon > i.fa-bars::before {
	content: "\f20e";
}*/

.pager a.list {
	background: #ffffff url(../ModuleImages/icon/arrowList.png) no-repeat center;
}
.pager a.prev {
	background: #ffffff url(../ModuleImages/icon/arrowPrev.png) no-repeat center;
}
.pager a.next {
	background: #ffffff url(../ModuleImages/icon/arrowNext.png) no-repeat center;
}

.pager a.list:hover {
	background: #222222 url(../ModuleImages/icon/arrowList-hover.png) no-repeat center;
}
.pager a.prev:hover {
	background: #222222 url(../ModuleImages/icon/arrowPrev-hover.png) no-repeat center;
}
.pager a.next:hover {
	background: #222222 url(../ModuleImages/icon/arrowNext-hover.png) no-repeat center;
}

.overlaywrapper .sub {
	font-size: 14px;
	color: black;
	display: block;
}
.overlaywrapper .title {
	font-size: 22px;
	line-height: 24px;
	color: white;
	font-weight: 300;
}
.list .overlaywrapper {
	right: -52px;
	width: 119px;
	bottom: 52px;
	text-align:center;
}
.prev .overlaywrapper {
	right: -108px;
}
.pager a:hover {
	background-color: #000000;
	border-color: #000000;
}
.pager a:hover .icon {
	color: #ffffff;
}


/*responsive*/
@media screen and (max-width : 1024px) {
}
@media screen and (max-width : 979px) {
}

@media screen and (max-width : 800px) {
}

@media screen and (max-width : 768px) {
}

@media screen and (max-width : 680px) {
	.info-title { width: 100%;}
	.overlaywrapper { display: none !important; }
}

@media screen and (max-width : 600px) {
}

@media screen and (max-width : 540px) {		
}

@media screen and (max-width : 512px) {
}

@media screen and (max-width : 480px) {
}

@media screen and (max-width : 320px) {
}

@media screen and (max-width : 240px) {
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1280px) and (orientation:portrait)  {/*直*/
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1280px) and (orientation:landscape) {/*橫*/
}


/*
==============================================
   Chrome Hack
==============================================
*/
@media screen and (-webkit-min-device-pixel-ratio:0){
}  


/*
==============================================
   IE11 Hack
==============================================
*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

