@charset "utf-8";
/* CSS Document */
#conbody .topphoto{
	width:100%;
}
#conbody .topphoto img{
	width:100%;
	vertical-align:middle;
}
.content{
	margin-bottom: 50px;
}
.content .list{
	width:33.333333333333333333%;
	float:left;
	/*padding:2px;*/
    overflow: hidden;
	position:relative;
    opacity:0;
    
}
.content .list .info{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	font-size:0;
	background:rgba(0,0,0,0.5);
	border:#FFF 2px solid;
	opacity:0;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
.content .list:hover .info{
	opacity:1;
}
.content .list .info:before{
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 0;
	height: 100%;
}
.content .list .name{
	width:100%;
	color:#C7B183;
	display: inline-block;
	font-size:15px;
	vertical-align: middle;
	margin:0 auto;
	text-align:center;
	overflow:hidden;
	padding-bottom:25px;
	background:url(../data/works/view.png) center bottom no-repeat;
}
.content .list .photo{
	height:auto;
	text-align:center;
	position: relative;
    width: 100%;
    height: 100%;
}
.content .list .photo img{
	max-width:none;
	max-height:none;
	width:100%;
	height:auto !important;
	vertical-align:middle;
}
.content .list .date{
	color:#FFF;
	line-height:25px;
	font-size:14px;
	font-weight:bold;
}
.content .list .con{
	font-size:12px;
	color:#B8B8B8;
	padding-top:10px;
	border-top:#555555 1px dashed;
}
#controls .close{
	position:absolute;
	left:0px;
	top:0px;
}
#controls-wrapper.close {
	background:none;
}
#controls #slidecounter{
	background: url(../data/works/title-2.png) left no-repeat;
}
#controls-wrapper.close #controls #slidecounter{
	background: url(../data/works/title-2_2.png) left no-repeat;
}
#controls-wrapper.close #controls #slidecounter .slidenumber,
#controls-wrapper.close #controls #slidecounter .slidenumber_2,
#controls-wrapper.close #controls #slidecounter .totalslides{
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
}

@media (max-width: 1000px) {
.content .box{
	width:33.333333333333333333%;
}
}
@media (max-width: 800px) {
.content .list{
	width:50%;
}
}
@media (max-width: 400px) {
.content .list{
	width:100%;
}
.content .list .photo{
	margin:0 auto;
}
.content .list .photo, .content .list .info, .content .list .view{
	float:none;
	width:100%;
	padding:0px;
}
}
/**************************************************************/
/**************************************************************/
#photo_box{
	position:relative;
}
#content_in{
	width:415px;
	height:100%;
	position:fixed;
	right:0px;
	top:0px;
	background:rgba(0,0,0,0.8);
	z-index:5;
}
#btn_op{
	width:35px;
	height:150px;
	cursor:pointer;
	position:fixed;
	bottom:30px;
	right:0px;
	z-index:5;
	display:none;
	background: url(../data/works/info.png) no-repeat;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
#btn_op2{
  width: 35px;
  height: 140px;
  cursor: pointer;
  position: fixed;
  bottom: 180px;
  right: 0px;
  z-index: 5;
  display: none;
  background: url(../data/works/back-2.png) no-repeat;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}
#btn_op2>a{
  width: 35px;
  height: 110px;
  display:block;
}
#btn_op:hover{
	background:url(../data/works/info_.png) no-repeat;
}
#content_in .btn_cl{
	width:54px;
	height:54px;
	cursor:pointer;
	position: absolute;
	top:0px;
	right:0px;
	z-index:5;
	background:url(../data/works/close.png) no-repeat;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
	
}
#content_in .btn_cl_bottom{
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: absolute;
	top: auto;
	bottom:10%;
	right:auto;
	left:40px;
	z-index: 5;
	background: url(../data/works/close.png)center center no-repeat;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
#content_in .btn_cl_bottom:hover{
	background:url(../data/works/close_.png)center center no-repeat;
}
#content_in .btn_cl:hover{
	background:url(../data/works/close_.png) center center no-repeat;
}
#content_in .info_box{
	position:relative;
	padding:95px 0px 40px 40px;
    height: 100%
}
#content_in .info_box .title{
	margin-right:40px;
	margin-bottom:10px;
}
#content_in .info_box .title span{
	color:#FFF;
	font-family:"Trajan Pro", "新細明體";
	font-weight:bold;
	display:none;
	line-height:20px;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
#content_in .info_box .title span span{
	color:#C6B183;
	font-weight: normal;
}
#content_in .info_box .name{
	font-size:14px;
	line-height:20px;
	padding:6px 10px;
	color:#BABABA;
	border:#BABABA 1px solid;
	margin-bottom:40px;
	margin-right:40px;
}
#content_in .btn{
	width:130px;
	height:36px;
	position: absolute;
	/*left:40px;*/
	right:40px;
	bottom:10%;
	z-index:5;
	padding-top:30px;
	padding-bottom:30px;
}
#content_in .btn a{
	width:130px;
	height:36px;
	display:block;
	background: url(../data/works/back.png) no-repeat;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;
}
#content_in .btn a:hover{
	background: url(../data/works/back_.png) no-repeat;
}
#content_in .info_center{
	width:335px;
	font-size:15px;
	line-height:25px;
	color:#BABABA;
}
/**************************************************************/
/**************************************************************/
@media screen and (max-width: 1024px) , screen and (max-height: 767px) {
    #content_in .cap_scroll2{
        max-height: 355px;
    }
}
@media (max-width: 1024px) {
    #content_in .btn{
        bottom: 20px;
    }
    #content_in .btn_cl_bottom{
        bottom: 20px;
    }
    
}
@media (max-width: 1010px) {
#controls-wrapper {
	top:65px;
	left: 20px;
	z-index: 4;
}
#thumb-tray_box{
	bottom: 65px;
	left: 20px;
	height: 84px;
	max-width: 530px;
}
}
@media (max-width: 970px) {
#thumb-tray_box{
	max-width: 280px;
}
}
@media (max-width: 700px) {
#supersized {
	position: relative;
	width: 100%;
	height:200px;
	margin-bottom:10px;
}
#supersized li {
	position: absolute;
}
#supersized img{
	width:auto !important;
	max-height:200px;
	top:0 !important
}
body #thumb-tray_box{
	max-width:100%;
	height:0px;
	width:100%;
	bottom:auto;
	top: auto;
	left: auto;
	margin-bottom:0px;
	margin-top:-100px;
}
#prevslide {
	left: 0px;
	top:-50px;
}
#nextslide {
	right: 0px;
	top:-50px;
}
#controls-wrapper {
	position:relative;
	width:100%;
	height: auto;
	z-index: 4;
	top:auto;
	left:auto;
	padding:10px;
	margin-bottom:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#controls {
	width:100%;
	height: auto;
	position: relative;
	text-align: left;
	z-index: 5;
}
#thumb-tray{
	display:none !important;
}
.cap_scroll {
	width:100% !important;
	height:113px !important;
	overflow: hidden;
}
.slidecaption {
	width:100% !important;
}
#slidecounter {
	width:100% !important;
}
#content_in{
	width: auto;
	height: auto;
	right:0px !important;
	position: relative;
}
.btn_cl{
	display:none;
}
#content_in .info_box{
	position:relative;
	padding:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#content_in .info_box .title img{
	display:none;
}
#content_in .info_box .title span{
	display:block;
}
#content_in .info_box .name{
	margin-bottom:20px;
	margin-right:0px;
}
#btn_op{
	display:none !important;
}
#btn_op2{
	display:none !important;
}
.cap_scroll, .cap_scroll2 {
	width:100% !important;
	height: auto !important;
	overflow: hidden;
}
.jspContainer{
	height: auto !important;
}
.jspPane{
	position:relative !important;
}
#content_in .info_center{
	width:100% !important;
	font-size: 18px;
	line-height: 26px;
	color:#BABABA;
}
#content_in .info_box .name{
	font-size: 18px;
	line-height: 26px;
}
#content_in .btn{
	width:130px;
	height:36px;
	position: static;
	left: auto;
	bottom:auto;
	z-index:5;
	margin:0 auto;
	margin-bottom:10px;
}
}