.itemBox {
	position:relative;
	text-align:center;
	/*overflow:hidden;*/
	-webkit-transition:all 0.4s ease-in-out;
	transition:all 0.4s ease-in-out;
}

/* base */
.itemBox .name { color:#222222; font-size:17px; font-size:1.7rem; line-height: 22px; }
.itemBox > .name { margin-top:5px; }
.itemBox .desc { color:#787878; }
.itemBox .label {/*左上角 斜的標籤*/
	font-size:13px;
	font-size:1.3rem;
	background-color:#ffffff;
	width:150px;
	text-align:center;
	padding:3px 0;
	position:absolute;
	top:24px;
	left:-36px;
	z-index:20;
	-webkit-transform:perspective(1px) rotate(-45deg);
	transform:perspective(1px) rotate(-45deg);
}
.itemBox.unpublished .label { /*網站關閉*/ background-color:#ffffff; border:1px solid #aaaaaa; color:#454545; }
.itemBox.publish .label { /*公開上線*/ background-color:#00c300; border:1px solid #ffffff; color:#ffffff; }
.itemBox.restriction .label { /*僅開放成員*/ background-color:#f1bd20; border:1px solid #ff9300; color:#A52A2A; }

.itemBox .date { color:#787878; font-size:12px; font-size:1.2rem; }
.itemBox .name .date { vertical-align:text-bottom; margin-left:5px; }

.itemBox .time { color:#999999; font-size:12px; font-size:1.2rem; }
.itemBox .time i { margin-right:3px; }

.itemBox .btn { margin-top:5px; letter-spacing:0px; /* z-index: 2;carrie 20160321 */ }
.itemBox .btn.bottom {
	text-align: right;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	padding: 10px 0;
	/*background-image:-moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-image:-webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-image:-o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-repeat:repeat-x;*/
	background-color: rgba(0,0,0,0.5);
}
.itemBox .btn.bottom > [class*="btn-"]:last-child { margin-right: 10px; }
.itemBox .btn.top {
	text-align: left;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	padding: 10px 0;
	margin: 0;
	/*background-image:-moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-image:-webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-image:-o-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-image:linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(153, 153, 153, 0.8) 100%);
	background-repeat:repeat-x;*/
	background-color: rgba(0,0,0,0.5);
}
.itemBox .btn.right, .itemBox .btn.left {
	width: 50px;
	text-align: right;
	position: absolute;
	top: 0;
	height: 100%;
	padding: 10px;
	margin: 0;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.itemBox .btn.right { right: 0; }
.itemBox .btn.left { left: 0; }
.itemBox .btn.right > [class*="btn-"], 
.itemBox .btn.left > [class*="btn-"] { display: block; margin: 0 0 10px; }
.itemBox .btn.right > [class*="btn-"] { float: right; }
.itemBox .btn.left > [class*="btn-"] { float: left; }

.itemBox .posted {
	color:#999999;
	font-size:12px;
	font-size:1.2rem;
	font-style:italic;
	margin-top:5px;
}
.itemBox .posted + .posted { margin: 0 5px; }
.itemBox .name .posted { margin-left:5px; }

.itemBox .alert {
	font-size:1.2rem;
	font-size:12px;
	padding:2px 8px;
	margin-top:8px;
}

.itemBox .desc, .itemBox p { font-size:16px; font-size:1.6rem; line-height: 1.4; }
.itemBox h2 * { font-size:inherit; }
.itemBox h2 p { margin-bottom: 0; }

/* defaultWrap */
.defaultWrap {
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
	/*z-index: 1;才不會擋到磚格的拖曳 carrie 20160321*/
	
	-webkit-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}
.defaultWrap img { margin:0 auto; }

.defaultWrap > .name {
	color:#787878;
	font-size:13px;
	font-size:1.3rem;
}
.defaultWrap > .btn {
	position:absolute;
	right:-5px;
	bottom:5px;
}
.defaultWrap > .date {
	text-align:center;
	position:absolute;
	top:13px;
	left:0;
	background-color:#ffffff;
	padding:5px 8px;
	z-index:1;
}
.defaultWrap > .desc {
	text-align:center;
	position:absolute;
	top:13px;
	left:0;
	background-color:#ffffff;
	padding:5px 8px;
	z-index:1;
}
.defaultWrap > .date > span {
	color:#222222;
	display:block;
	font-size:15px;
	font-size:1.5rem;
	line-height:17px;
}
.defaultWrap > .date > span.year {
	color:#787878;
	font-size:12px;
	font-size:1.2rem;
	letter-spacing:2px;
}
.defaultWrap > .date > span.week {
	text-transform:uppercase;
	color:#333333;
	font-weight:bold;
	font-size:12px;
	font-size:1.2rem;
	letter-spacing:.5px;
}

.itemBox .contentText p {
	line-height: 1.5;
	color: #454545;
	/*text-align: justify; 20160630 跟carrie討論後註解 Gabby*/
}

.itemBox .contentText p ~ p { margin-top: 5px; } /* 20160705 Gabby新增 */
.itemBox .contentText ~ .defaultWrap { margin-top: 20px; }
.itemBox .defaultWrap ~ .subTitle { margin-top: 12px; }
.itemBox .defaultWrap ~ .contentText { margin-top: 20px; }
.itemBox .defaultWrap ~ .subTitle ~ .contentText { margin-top: 0px; }
.defaultWrap ~ h2 { margin-bottom: 0; }

/* 次標題 */
.itemBox .subTitle {
	font-size: 22px;
    font-size: 2.2rem;
    margin-bottom: 10px;
    line-height: 28px;
    color: #222222;
    font-weight: 500;
}
.itemBox .subTitle p {
	font-size: inherit;
}


/*
==============================================
   滑過出現內容樣式
==============================================
*/
/* activeWrap 放內容的框 */
.activeWrap {
	text-align: left;
	overflow:hidden;
	color:#ffffff;
	vertical-align:middle;
	position:absolute;
	width:100%;
	height:100%;
	z-index:2;
	left:0;
	background:rgba(0,0,0,0.6);
	opacity:0;
	padding: 25px;

	-webkit-box-sizing: border-box;
	box-sizing: border-box;

	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.activeWrap.light { background:rgba(255,255,255,0.7); }
.activeWrap > div {
	height:100%;
	overflow:hidden;	
}
.defaultWrap > .activeWrap .activeContent {
	display:table;
	width:100%;
	height:100%;
	vertical-align:middle;
}
.alignCenter { width: 100%; vertical-align:middle; }
.defaultWrap > .activeWrap .alignCenter {
	display:table-cell;
}

/* 內容元素 */
.activeWrap h2 { margin-bottom: 0; }
.activeWrap h2 ~ .name { margin-top: 6px; }
.activeWrap .name, .activeWrap * { color:#ffffff; }
.activeWrap .desc, .activeWrap p, .activeWrap .date { color:#dedede; }
.activeWrap.light .desc, .activeWrap.light .date { color:#787878; }
.activeWrap.light p { color:#454545; }
.activeWrap .name { margin-top:0; }
.activeWrap .posted { margin:0; }
.activeWrap .btn { text-align:center !important; width:100%; }
.activeWrap .btn a { margin: 0 5px; }

.defaultWrap > .activeWrap .name, 
.defaultWrap > .activeWrap .desc, 
.defaultWrap > .activeWrap .date { width:100%; }

/* 滑過效果 */
.itemBox.hover, .itemBox[class*='hover-'] { overflow:hidden; }
.itemBox.hover:hover .activeWrap, .itemBox[class*='hover-']:hover .activeWrap { opacity:1; }

/* 影片 */
.itemBox.video.hover .activeWrap {
	background: transparent;
	opacity:1;
}
.itemBox.video .video-info { 
	margin: 2px 0 5px 0; 
	color: #999999;
	font-size: 14px;
	font-size: 1.4rem;
}
.itemBox.video .video-info .video-time { float: left; }
.itemBox.video .video-info .video-view { float: right; }

/* 原地淡入淡出 */
.itemBox.hover .activeWrap { top:0; }
.itemBox.hover:hover .activeWrap { opacity:1; }

/* 往上滑出 */
.itemBox.hover-top .activeWrap {
	bottom: -100%;
	height: auto;
	max-height: 100%;
	top: inherit;
}
.itemBox.hover-top:hover .activeWrap { top: inherit; bottom: 0; }
.itemBox.hover-top .defaultWrap .activeWrap {
	background: transparent;
	background-image:-moz-linear-gradient(top,rgba(0, 0, 0, 1),rgba(153, 153, 153, 0));
	background-image:-webkit-gradient(linear,0 0,100% 0,from(rgba(153, 153, 153, 0)),to(rgba(0, 0, 0, 1)));
	background-image:-webkit-linear-gradient(top,rgba(153, 153, 153, 0),rgba(0, 0, 0, 1));
	background-image:-o-linear-gradient(top,rgba(0, 0, 0, 1),rgba(153, 153, 153, 0));
	background-image:linear-gradient(to top,rgba(0, 0, 0, 1),rgba(153, 153, 153, 0));
	background-repeat:repeat-x;

	background:rgba(0,0,0,.6);
}
.itemBox.hover-top .defaultWrap .activeWrap.light {
	/*background:rgba(255,255,255,.8);*/
	background:rgba(255,255,255,1);/* 討論後決定 所有activeWrap 不要透明度 20160318 Gabby */
}
.itemBox.hover-top h2 ~ .btn, 
.itemBox.hover-top .name ~ .btn {
	position: absolute;
	right: 12px;
	top: 8px;
	width: initial;
}
.itemBox.hover-top .activeWrap .btn { top: inherit; }


/* 圖片往上滑 */
/* 動腦想想就知道 
這種設計 activeWrap內就是只能放簡單的一行東西 
不要妄想放一堆了
未來有人吵 叫他動動腦 或自己寫 carrie 20160113 */
.itemBox.hover-image .activeWrap {
	background-color: transparent;
	height: 60px;
	bottom:0;
	opacity:1;
	z-index:1;
}
.itemBox.hover-image > .defaultWrap > div > img {
	position: relative;
	top:0;
	z-index: 5;
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.itemBox.hover-image:hover > .defaultWrap > div > img {
	top:-60px;
}
.itemBox.hover-image > .defaultWrap > div > img {
	-webkit-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.itemBox.hover-image .defaultWrap > .activeWrap .desc, .itemBox.hover-image .defaultWrap > .activeWrap .date { color: #787878; }
.itemBox.hover-image .defaultWrap > .activeWrap p { color: #454545; }


/*
==============================================
   圖繞文樣式
==============================================
*/
.itemBox.floatL, .itemBox.floatR { width:100%; }
/*.itemBox.floatL, .itemBox.floatL > * { text-align:left; }
.itemBox.floatR, .itemBox.floatR > * { text-align:right; }*/
.itemBox.floatL, .itemBox.floatL > div { float:right; }/*圖靠左*/
.itemBox.floatR, .itemBox.floatR > div { float:left; }/*圖靠右*/

.itemBox.floatL div.defaultWrap { float:left; margin-right:2%; margin-bottom: 10px; }/*圖靠左*/
.itemBox.floatR div.defaultWrap { float:right; margin-left:2%; margin-bottom: 10px; }/*圖靠右*/

.itemBox.floatL > .name, .itemBox.floatR > .name { margin-top:0; }

.itemBox.floatL .btn, .itemBox.floatR .btn { margin-top:10px; }
.itemBox.floatL .defaultWrap > .btn, .itemBox.floatR .defaultWrap > .btn { width:100%; bottom:0; left:0; right:auto; }
.itemBox.floatL .defaultWrap > .btn { text-align:right; }
.itemBox.floatR .defaultWrap > .btn { text-align:left; }

/* 圖片尺寸 */
.itemBox.floatL .defaultWrap, 
.itemBox.floatR .defaultWrap { width:30%; }
.itemBox.floatL.bigImg .defaultWrap, 
.itemBox.floatR.bigImg .defaultWrap { width:50%; }
.itemBox.floatL.smallImg .defaultWrap, 
.itemBox.floatR.smallImg .defaultWrap { width:20%; }

.itemBox.floatR .defaultWrap > .date, 
.itemBox.floatR .defaultWrap > .desc { left:auto; right:0; }

.itemBox.floatL > p, .itemBox.floatR > p { float:none; }
.itemBox.floatL > p, .itemBox.floatR > p { width: auto; }
.itemBox.floatL.bigImg > p, .itemBox.floatR.bigImg > p { width: auto; }
.itemBox.floatL.smallImg > p, .itemBox.floatR.smallImg > p { width: auto; }

/* 次標題 */
.itemBox.floatL > div.subTitle, .itemBox.floatR > div.subTitle {
	float: none;
}

/* 內容 */
.itemBox.floatL > div.contentText, .itemBox.floatR > div.contentText {
	float: none;
}
.itemBox.floatL .defaultWrap ~ .contentText { margin-top: 0px; }
.itemBox.floatR .defaultWrap ~ .contentText { margin-top: 0px; }

/*
==============================================
   文字置左 置右 樣式
==============================================
*/
.itemBox.textL .btn { text-align:right; }
.itemBox.textR .btn { text-align:left; }

/*
==============================================
   日期區塊 樣式
==============================================
*/
.itemBox.block > .date {
	text-align:center;
	background-color:#f7f7f7;
	padding:6px 8px;
	margin-right:10px;
	float:left;
}
.itemBox.block > .date > span {
	color:#222222;
	display:block;
	font-size:15px;
	font-size:1.5rem;
	line-height:17px;
}
.itemBox.block > .date > span.year {
	color:#787878;
	font-size:12px;
	font-size:1.2rem;
	letter-spacing:2px;
}
.itemBox.block > .date > span.week {
	text-transform:uppercase;
	color:#333333;
	font-weight:bold;
	font-size:12px;
	font-size:1.2rem;
	letter-spacing:.5px;
}
.itemBox.block p {
	float:left;
	margin-top:2px;
}
.itemBox.block h2 p { float:none; margin-top:0px; display: inline; }
.itemBox.block * { overflow:hidden; }

/* 文置右 日期區塊 */
.itemBox.textR.block > .date {
	float:right;
	margin-right:0;
	margin-left:10px;
}
.itemBox.textR.block > * { text-align: left; }
.itemBox.textR.block > .btn { text-align: right; }

/* 圖繞文 日期區塊 */
.itemBox.floatL.block > .date, .itemBox.floatR.block > .date {
	width:auto;
	margin-right:0;
	margin-left:0;
}
.itemBox.floatL.block > .date { float:left; }
.itemBox.floatR.block > .date { float:right; }


/*
==============================================
   條狀列表 樣式
==============================================
*/
.listCol { position: relative; margin-bottom: 40px; }
.itemBox.listBox { text-align:left; }
.itemBox.listBox .contentText { position: relative; }
.itemBox.listBox .defaultWrap ~ .contentText { margin-left: 315px; }
.itemBox.listBox h2 {
	font-size:21px;
	font-size:2.1rem;
	line-height: 27px;
    font-weight: 700;
    color: #333333;
}
.itemBox.listBox .defaultWrap {
	background-color:#f7f7f7;
	float:left;
	margin-right:15px;
	width:300px;
	max-height:225px;
	/* 不用這種做法了 問題一堆 carrie 20160113
	display:table;*/
	vertical-align:middle;
	text-align: center;
}
.itemBox.listBox .defaultWrap > div {
	/* 不用這種做法了 問題一堆 carrie 20160113
	display:table-cell;*/
	vertical-align:middle;
}
.itemBox.listBox .defaultWrap img {
	max-width:100%;
	max-height:225px;
}
.itemBox.listBox h2 .desc {
	display: inline-block;
	vertical-align: middle;
	font-weight: 300;
}
.itemBox.listBox .desc > span {
	font-size:12px;
	font-size:1.2rem;
	padding:0px 10px;
	background-color:#f1f1f1;
	color:#777777;
	margin:0 5px 5px 0;
	float:left;
}
.itemBox.listBox h2 .desc > span {
	padding:13px 12px;
	line-height:1.7;
	margin-right:10px;
}
.itemBox.listBox .otherInfo { position:relative; float: left; width: 100%; }
.itemBox.listBox .otherInfo span > span.italic {
	margin-right: 5px;
	color: #999999;
	font-style: italic;
}
.itemBox.listBox .date {
	margin-right:15px;
	font-family:Century Gothic,Verdana,Arial,Helvetica,LiHei Pro Medium,黑體-繁,微軟正黑體,sans-serif;
}
.itemBox.listBox .posted {
	display: inline-block;
	font-style: normal;
	font-weight:normal;
}
.itemBox.listBox .posted > span.img {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin-right: 10px;
	text-align: center;
	border-radius: 100%;
	overflow: hidden;
	vertical-align: middle;
}
.itemBox.listBox ul.unstyled h6 {
	min-width:50px;
	letter-spacing:0px;
	color:#888888;
	font-size:12px;
	font-size:1.2rem;
}
.itemBox.listBox ul.unstyled {
	margin-left:0;
	margin-right: 2%;
	font-size:12px;
	font-size:1.2rem;
	float: left;
	width: 49%;
}
.itemBox.listBox ul.unstyled + ul.unstyled { margin-right: 0; }
.itemBox.listBox ul.unstyled i { margin-right:3px; }
.itemBox.listBox ul li { margin-top:1px; }


/*
==============================================
   區塊列表 樣式
==============================================
*/
.listBlock {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.listCol.block {
	display: -webkit-flex;
	display: flex;
	width: 30%;
	margin:0 5% 4% 0;
    -webkit-flex-direction: column;
    flex-direction: column;
    float: left;

}
.listCol.block:nth-child(3n) { margin-right: 0; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	/* for IE11 */
	.listCol.block {
		flex-direction: row;
	}
}
.listCol.block .itemBox.listBox {
	-webkit-flex: 1;
    flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}
.listCol.block .itemBox.listBox .defaultWrap ~ .contentText { margin-left: 0; margin-top: 10px; }
.listCol.block .itemBox.listBox .defaultWrap {
	float: none;
	margin-right: 0;
	width: 100%;
	display: block;

	background-size: cover;
	background-position: center center; 
	height: 200px; 
}
.listCol.block .itemBox.listBox .defaultWrap > div { display: block; }
.listCol.block .itemBox.listBox .defaultWrap img {
	max-width: 100%;
	max-height: 200px;
}
.listCol.block .itemBox.listBox h2 {
	font-size:21px;
	font-size:2.1rem;
	line-height: 27px;
    font-weight: 700;
    color: #333333;
}
.listCol.block .itemBox.listBox .desc > span {
    font-size: 12px;
    font-size: 1.2rem;
    padding: 0px;
    background-color: transparent;
    color: #777777;
    margin: 0 5px 6px 0;
    float: none;
    display: inline-block;
}
.listCol.block .itemBox.listBox .desc > span.slash {
    color: #dddddd;
    margin: 0 10px;
    vertical-align: top;
}
.listCol.block .itemBox.listBox .desc > span > span {
	display: block;
	width: 12px;
	height: 1px;
	background-color: #000000;
	margin: 0 auto;
	margin-top: 5px;
}
.listCol.block .itemBox.listBox .contentText {
	position: static;
}
.listCol.block .itemBox.listBox .contentText > p { margin-bottom: 0;}
.listCol.block .itemBox.listBox .date { margin-right: 0; text-align: right; float: right; }
.listCol.block .itemBox.listBox .otherInfo {
	width: 100%;
	position: relative;
	bottom: 0;
	left: 0;
	padding: 15px 0 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.listCol.block .itemBox.listBox .posted { margin-top: 0; }
.listCol.block .itemBox.listBox p ~ .time { margin-top: 5px; }


/*
==============================================
   瀑布流列表 樣式
==============================================
*/
.masonry .listCol { float: left; width: 32.33333%; margin:0 .5% 1%; height: 325px; }
.masonry .listCol .itemBox {}
.masonry .listCol .itemBox.hover-top {}
.masonry .listCol .itemBox.listBox .defaultWrap ~ .contentText { margin-left: 0; margin-top: 0; }/*20160224取消瀑布流圖文間距 Gabby*/
.masonry .listCol .itemBox.listBox .defaultWrap {
	float: none;
	margin-right: 0;
	width: 100%;
	height: 200px;
	max-height: inherit;
	display: block;
}
.masonry .listCol .itemBox.listBox .defaultWrap > div { display: block; }
.masonry .listCol .itemBox.listBox .defaultWrap img {
	max-width: 100%;
	max-height: inherit;
	width: 100%;
}
.masonry .listCol .itemBox.listBox .desc > span {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 0px;
    background-color: transparent;
    color: #777777;
    margin: 0 5px 10px 0;
    float: none;
    display: inline-block;
}
.masonry .listCol .itemBox.listBox .desc > span > span {
	display: block;
	width: 12px;
	height: 1px;
	background-color: #000000;
	margin: 0 auto;
	margin-top: 5px;
}
.masonry .listCol .itemBox.listBox .contentText { padding-top: 15px; }
.masonry .listCol .itemBox.listBox .contentText > p { margin-bottom: 0; }
.masonry .listCol .itemBox.listBox .date { margin-right: 0; text-align: right; }




/*
==============================================
   線段 樣式
==============================================
*/
.itemBox.borderT { border-top-width:2px; }
.itemBox.borderB { border-bottom-width:2px; padding-bottom:13px; }
.itemBox.borderL { border-left-width:2px; }
.itemBox.borderR { border-right-width:2px; }

.itemBox.borderT.border-1x { border-top-width:1px; }
.itemBox.borderB.border-1x { border-bottom-width:1px; padding-bottom:14px; }
.itemBox.borderL.border-1x { border-left-width:1px; }
.itemBox.borderR.border-1x { border-right-width:1px; }

.itemBox.borderL * { padding-left:16px; }
.itemBox.borderR * { padding-right:16px; }

.itemBox.borderL.floatL * { padding-left:0; }
.itemBox.borderR.floatR * { padding-right:0; }


/*
==============================================
   圖片圓形 樣式
==============================================
*/
.itemBox.circle .defaultWrap { border-radius:100%; overflow:hidden; }
.itemBox.circle .defaultWrap > .btn { width:100%; bottom:0; right:0; }
.itemBox.circle .defaultWrap > .btn > [class*="btn-"] { width:100%; padding:5px 0 !important; }
.itemBox.circle.floatL > .name, .itemBox.circle.floatR > .name { margin-top:5px; }


/*
==============================================
   需要點擊的 樣式
==============================================
*/
.itemBox.hand .defaultWrap > div > img {
	-webkit-transition:all 0.6s ease-in-out;
	transition:all 0.6s ease-in-out;
}
.itemBox.hand:hover .defaultWrap > div > img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}
.itemBox.hand.hover-image:hover .defaultWrap > div > img {
	-webkit-transform: scale(1);
	transform: scale(1);
}

/*
==============================================
   需要選取的 樣式
==============================================
*/
/* 本來是active 因為此樣式多處會用到 
因此拿掉listBox 改加select 未來破板處皆須加此class
carrie 20160104 */
.itemBox.select {
	border: none;
	overflow: visible;
	padding: 0px;
}
.itemBox.select::before {
	content: '\f383';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Ionicons";
    color: #ffffff;
    width: 100%;
    height: 100%;
    z-index: -2;
    border: 1px solid #666666;
    padding-left: 2px;
    line-height: 18px;
    text-align: left;
    opacity: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}
.itemBox.select::after {
	content: '';
	display: block;
	width: 0;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    border-width: 30px 30px 0 0;
    border-color: #666666 transparent transparent;
    border-style: solid;
    opacity: 0;
    overflow: visible;
    visibility: visible;

    -webkit-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
}
.itemBox.select:hover::before, .itemBox.select:hover::after, 
.itemBox.select.active::before, .itemBox.select.active::after { opacity: 1; }
.itemBox.select:hover::before, .itemBox.select.active::before { z-index: 2; }
.itemBox.select.inactive .defaultWrap img {/*未選取的樣式*/
	-webkit-filter: grayscale(.8);
	-moz-filter: grayscale(.8);
	-ms-filter: grayscale(.8);
	-o-filter: grayscale(.8);
	filter: grayscale(.8);
}
.itemBox.select .desc, .itemBox.select:hover .desc {
	font-size: 13px;
	font-size: 1.3rem;
}
.itemBox.select.active .desc, .itemBox.select:hover .desc {
	background-color: #666666;
	color: #ffffff;
}


/*
==============================================
   未刊登 樣式
==============================================
*/
.itemBox.unpublishedPage .defaultWrap img, 
.itemBox.listBox.unpublishedPage .defaultWrap img {
	-webkit-filter: grayscale(.8);
	-moz-filter: grayscale(.8);
	-ms-filter: grayscale(.8);
	-o-filter: grayscale(.8);
	filter: grayscale(.8);
}
/* .itemBox.unpublishedPage .defaultWrap::before, 
.itemBox.listBox.unpublishedPage .defaultWrap::before {
	content: "未刊登";
	content: "\F209";
	color: #ffffff;
	width:100%;
	text-align:center;
	padding:3px 0;
    background:rgba(0,0,0,0.5);
	position:absolute;
	top:40%;
	left:0;
	z-index:20;
	font-family: 'MaterialDesignIcons';
} 改為下面樣式 carrie 20160328 */
.itemBox.unpublishedPage .defaultWrap::before, 
.itemBox.listBox.unpublishedPage .defaultWrap::before {
	content: "\F209";
	color: #ffffff;
	width:100%;
	text-align:center;
	padding: 0;
    background: rgba(0,0,0,0.4);
	position:absolute;
	top:50%;
	margin-top: -13px;
	font-size: 25px;
	font-size: 2.5rem;
	line-height: 25px;
	left:0;
	z-index:20;
	font-family: 'MaterialDesignIcons';
}
.itemBox.unpublishedPage h2, .itemBox.unpublishedPage p, 
.itemBox.listBox.unpublishedPage h2, .itemBox.listBox.unpublishedPage p {
	color: #787878;
}

/*
==============================================
   四欄
==============================================
*/
.four-column .listCol { float: left; width: 24.0%; margin:0 1% 4% 0; }
.four-column .listCol:nth-child(3n) { margin-right: 1%; }
.four-column .listCol:nth-child(4n) { margin-right: 0; }
.four-column .listCol.block .itemBox.listBox .defaultWrap { height: 161px; }
.four-column .itemBox.listBox .defaultWrap { max-height: 161px; }

/*還沒看的影片*/
.listCol.block .itemBox.unWatch  .defaultWrap {
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-ms-filter: grayscale(1);
	-o-filter: grayscale(1);
	filter: grayscale(1);
}
.listCol.block .itemBox.unWatch .videoTitle,
.listCol.block .itemBox.unWatch .videoTime {
	color: #999999;
}

/*
==============================================
   針對模組列表與內頁 不同排版的調整
==============================================
*/
.layout303 .itemBox.listBox .defaultWrap, 
.layout401 .itemBox.listBox .defaultWrap, 
.layout402 .itemBox.listBox .defaultWrap, 
.layout403 .itemBox.listBox .defaultWrap, 
.layout404 .itemBox.listBox .defaultWrap { width: 200px; max-height: 150px; }

.layout303 .itemBox.listBox .defaultWrap img, 
.layout401 .itemBox.listBox .defaultWrap img, 
.layout402 .itemBox.listBox .defaultWrap img, 
.layout403 .itemBox.listBox .defaultWrap img, 
.layout404 .itemBox.listBox .defaultWrap img { max-height: 150px; }

.layout303 .itemBox.listBox .defaultWrap ~ .contentText, 
.layout401 .itemBox.listBox .defaultWrap ~ .contentText, 
.layout402 .itemBox.listBox .defaultWrap ~ .contentText, 
.layout403 .itemBox.listBox .defaultWrap ~ .contentText, 
.layout404 .itemBox.listBox .defaultWrap ~ .contentText { margin-left: 215px; }

.layout303 .masonry .listCol, 
.layout401 .masonry .listCol, 
.layout402 .masonry .listCol, 
.layout403 .masonry .listCol, 
.layout404 .masonry .listCol {
	width: 48%;
	margin: 0 1% 2%;
}

.layout303 .listCol.block, 
.layout401 .listCol.block, 
.layout402 .listCol.block, 
.layout403 .listCol.block, 
.layout404 .listCol.block {
	width: 48%;
	margin: 0 1% 2%;
}

.layout101 .listCol.block .itemBox.listBox .defaultWrap { max-height: 230px; }
.layout101 .listCol.block .itemBox.listBox .defaultWrap img { max-height: 230px; }

/*.layout303 .masonry .itemBox.listBox .defaultWrap, 
.layout401 .masonry .itemBox.listBox .defaultWrap, 
.layout402 .masonry .itemBox.listBox .defaultWrap, 
.layout403 .masonry .itemBox.listBox .defaultWrap, 
.layout404 .masonry .itemBox.listBox .defaultWrap { width: 50%; height: auto; }

.layout303 .masonry .itemBox.listBox .defaultWrap img, 
.layout401 .masonry .itemBox.listBox .defaultWrap img, 
.layout402 .masonry .itemBox.listBox .defaultWrap img, 
.layout403 .masonry .itemBox.listBox .defaultWrap img, 
.layout404 .masonry .itemBox.listBox .defaultWrap img { max-height: inherit; }*/



/*
==============================================
   responsive
==============================================
*/
@media screen and (max-width : 800px) {
	.layout303 .itemBox.listBox .defaultWrap, 
	.layout401 .itemBox.listBox .defaultWrap, 
	.layout402 .itemBox.listBox .defaultWrap, 
	.layout403 .itemBox.listBox .defaultWrap, 
	.layout404 .itemBox.listBox .defaultWrap { width: 300px; max-height: 225px; }

	.layout303 .itemBox.listBox .defaultWrap img, 
	.layout401 .itemBox.listBox .defaultWrap img, 
	.layout402 .itemBox.listBox .defaultWrap img, 
	.layout403 .itemBox.listBox .defaultWrap img, 
	.layout404 .itemBox.listBox .defaultWrap img { max-height: 225px; }

	.layout303 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout401 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout402 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout403 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout404 .itemBox.listBox .defaultWrap ~ .contentText { margin-left: 315px; }
}

@media screen and (max-width : 680px) {
	.itemBox.floatL div.defaultWrap, .itemBox.floatR div.defaultWrap {
		float: none;
		margin-left: 0;
		margin-right: 0;
	}
	.itemBox.floatL .defaultWrap, .itemBox.floatR .defaultWrap, 
	.itemBox.floatL.smallImg .defaultWrap, .itemBox.floatR.smallImg .defaultWrap, 
	.itemBox.floatL.bigImg .defaultWrap, .itemBox.floatR.bigImg .defaultWrap { width: 100%; }

	.listCol {
		padding-bottom: 40px;
		border-bottom: 1px solid #dedede;
	}
	.listCol.block {
		width: 100%;
		margin:0 0% 30px;
		border-bottom: none;
	}
	.itemBox.listBox .defaultWrap ~ .contentText {
		margin-left: 0px;
	}
	.itemBox.listBox .defaultWrap {
		float: none;
		margin-right:0;
		margin-bottom: 10px;
		width: 100% ;
		height: 300px !important;
		max-height: 300px !important;
		text-align: center;
	}
	.itemBox.listBox .defaultWrap img {
		max-width: 100% !important;
		max-height: inherit !important;
	}
	.itemBox.listBox h2 {
		margin-bottom: 6px;
	}
	.itemBox.listBox .otherInfo {
		margin-top: 3px;
	}
	.itemBox.listBox ul.unstyled {
		margin-right: 0;
		width: 100%;
	}
	.masonry .listCol {
		height: initial;
		width: 100%;
		margin: 0;
		border-bottom: none;
	}
	.masonry .itemBox.listBox .defaultWrap { margin-bottom: 0px; }
	.masonry .listCol .itemBox.listBox .defaultWrap img { width: 100%; }

	.four-column .listCol {
		width: 100%;
		margin:0 0% 30px;
		border-bottom: none;
	}


	/*
	==============================================
	       針對模組列表與內頁 不同排版的調整
	==============================================
	*/
	.layout303 .listCol.block, 
	.layout401 .listCol.block, 
	.layout402 .listCol.block, 
	.layout403 .listCol.block, 
	.layout404 .listCol.block {
		width: 100%;
		margin: 0 0 30px;
	}

	.layout303 .masonry .listCol, 
	.layout401 .masonry .listCol, 
	.layout402 .masonry .listCol, 
	.layout403 .masonry .listCol, 
	.layout404 .masonry .listCol {
		width: 100%;
		margin: 0 0% 2%;
	}

	.layout303 .itemBox.listBox .defaultWrap, 
	.layout401 .itemBox.listBox .defaultWrap, 
	.layout402 .itemBox.listBox .defaultWrap, 
	.layout403 .itemBox.listBox .defaultWrap, 
	.layout404 .itemBox.listBox .defaultWrap { width: 100%; max-height: inherit; }

	.layout303 .itemBox.listBox .defaultWrap img, 
	.layout401 .itemBox.listBox .defaultWrap img, 
	.layout402 .itemBox.listBox .defaultWrap img, 
	.layout403 .itemBox.listBox .defaultWrap img, 
	.layout404 .itemBox.listBox .defaultWrap img { max-height: inherit; }

	.layout303 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout401 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout402 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout403 .itemBox.listBox .defaultWrap ~ .contentText, 
	.layout404 .itemBox.listBox .defaultWrap ~ .contentText { margin-left: 0; }


	.layout101 .listCol.block .itemBox.listBox .defaultWrap { max-height: inherit; }
	.layout101 .listCol.block .itemBox.listBox .defaultWrap img { max-height: inherit; }
}