/*案例底层列表*/
.project_collection_list .project_caption{  background-color:#1b1b1c; padding-top:80px;  padding-bottom:50px;  }
.project_collection_list .project_caption_box{ display: block; max-width: 960px; margin:0 auto;}
.project_collection_list .project_caption h2{ font-size: 26px;}
.project_collection_list .project_caption a{ color: #fff; font-size: 16px; }
.project_collection_list .project_caption a:hover , .project_img_slideshow_info a.tag:hover{ color:#00796b; }
.divsocial_media{background-color: #1b1b1c; }
.social_media{ color: #fff; text-align: center; height: 43px;padding-bottom: 20px;width: 430px; margin: 0 auto }
.social_media_photo{ color: #fff; text-align: center; background-color: #1b1b1c; height: 43px;padding-bottom: 20px;width: 715px;margin: 0 auto;}
.media_group li{background-color: #1b1b1c;}
.project_collection_list .project_caption:after{ display:none;}
.project_item_list{ display: block; max-width: 960px; margin: 0 auto; }
.project_item_list ul{ overflow: hidden; margin-top: 30px;}
/*.project_item_list ul li{ display: inline-block;  float:left; width:23%; height:auto; margin-right:2.6%; margin-bottom:2.6%; overflow: hidden;}*/
.project_item_list ul li{position: relative;float: left;width: 220px;height: 148px;text-align: center;overflow: hidden;margin-right: 2.6%;margin-bottom: 2.6%;}/*by chiao*/
.project_item_list ul li:nth-child(4n){ margin-right:0px;}
.project_item_list ul li a{  display: block; width:100%; height:auto; }
/*.project_item_list ul li a img{ width: 100%; height: auto;}*/
.project_item_list ul li a img{position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: auto;height: 100%;}/*by chiao*/
.project_item_list ul li a:hover img{  -webkit-transform: scale(1.03, 1.03);
-moz-transform: scale(1.03, 1.03);   -ms-transform: scale(1.03, 1.03);   -o-transform: scale(1.03, 1.03);   transform: scale(1.03, 1.03);-webkit-transition: all 200ms ease-out;    -moz-transition: all 200ms ease-out;    -o-transition: all 200ms ease-out;    -ms-transition: all 200ms ease-out;    transition: all 200ms ease-out;}

.fb_base {padding-top:3px;}
.line_base { display: inline-block; float: left; margin-top: 8px; margin-left: 8px;  }

/*案例底层大图*/
.view_project_slideshow_mode{ background-color:#1b1b1c; padding-top:20px;  padding-bottom:50px; position: relative;}
.view_project_slideshow_mode .project_caption:after{display: none;} 

.project_caption_info{ display: block;position:relative; z-index: 9; box-sizing: border-box;}
.project_caption_info h4 {font-size:1.375em;}
.project_caption_info h4,.project_caption_info h4 a{ display: block; text-align: center; margin: auto; font-weight:bolder; color: #fff;  line-height: 1.4em; padding: 0 20px; margin:20px 0; }
.project_caption_info span{ display: block; text-align: center; margin: 0 auto; color: #c89863;margin-bottom: 10px;padding: 0 10px;}
.project_caption_info ul { display: block; width: 100%; margin: auto; text-align: center; margin-top: 15px;padding: 0 20px; box-sizing: border-box; }
.project_caption_info ul li{ display: inline-block; height: 14px; line-height: 14px;  color: #fff; font-size: .875em; padding: 0 20px; border-right: 1px solid #fff;}
.project_caption_info ul li:last-child{border-right: 0;}

.view_project_slideshow_mode a.close{ display: block;}
.view_project_slideshow_mode a.close { display: block;  position: absolute;  right:32px;  top:60px;  width:32px;  height:32px;  opacity:0.5;z-index:10;}
.view_project_slideshow_mode .close:hover {  opacity:1;}
.view_project_slideshow_mode .close:before,.view_project_slideshow_mode .close:after {  position: absolute;  left: 15px;  content:'';  height: 33px;  width: 2px;  background-color:#fff;}
.view_project_slideshow_mode .close:before {  transform: rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}
.view_project_slideshow_mode .close:after {  transform: rotate(-45deg);-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
.project_img_slideshow_box{ display: block;/*max-width:960px;*/ margin: 0 auto; margin-top: 0px; }
.project_img_recommend{ display: block;max-width:960px; margin: 0 auto;margin-top: 0px; }

/*网页版直图等比置中*/
.project_img_slideshow_box ul li {
    display: inline-block;
    overflow: hidden;
    width: 960px;
    height: auto;
}
.project_img_slideshow_box ul li div{ position: relative; margin: 0 auto; max-width: 960px;max-height: 640px;}
.project_img_slideshow_box ul li img{ max-width: 960px;max-height: 640px; }

.fb_like_2013{    margin: 5px 5px 5px 0px;}

.project_img_recommend ul li{ display: inline-block; max-width:960px; height:auto; overflow: hidden; width: 100% }
.project_img_recommend ul li .img_box{ max-width: 960px; }
.project_img_recommend ul li img{ width: 100%; height:auto;}

.project_img_slideshow_info{ position: relative;text-align: center;}
.project_img_slideshow_info .btn_arrow_pre , .project_img_slideshow_info .btn_arrow_next , .project_img_slideshow_nav .btn_arrow_pre , .project_img_slideshow_nav .btn_arrow_next{ display: block; width: 46px; height:46px; background-image:url(../images/index_arrow_pre.png); position: absolute; opacity: 0.85; filter: alpha(opacity=85); z-index: 1;}
.project_img_slideshow_info .btn_arrow_next , .project_img_slideshow_nav .btn_arrow_next{background-image:url(../images/index_arrow_next.png);}
.project_img_slideshow_info .btn_arrow_pre:hover , .project_img_slideshow_info .btn_arrow_next:hover , .project_img_slideshow_nav .btn_arrow_pre:hover , .project_img_slideshow_nav .btn_arrow_next:hover{opacity: 1;filter: alpha(opacity=100);}
    .project_img_slideshow_info .btn_arrow_pre {
        left: 0;
        top: calc( 960px / 3 * 2 * 0.4 );
    }
    .project_img_slideshow_info .btn_arrow_next {
        right: 0;
        top: calc( 960px / 3 * 2 * 0.4 );
    }
.project_img_slideshow_info span{ display: block; color:#666; font-size: 13px;}
.project_img_slideshow_info  p{ color: #fff; padding:20px 30px; box-sizing: border-box; }
.project_img_slideshow_info a.tag{ display:inline-block; font-size: 14px;padding: 0 10px; color:#009688;}
.project_img_slideshow_info a.tag:hover{color:#00796B;}

@media screen and (max-width:960px) {
    .project_img_slideshow_box ul li {
        width: 100%;
    }

        .project_img_slideshow_box ul li img {
            max-width: 100%;
        }

    .project_img_slideshow_info .btn_arrow_pre {
        top: calc( 100vw / 3 * 2 * 0.4 );
    }

    .project_img_slideshow_info .btn_arrow_next {
        top: calc( 100vw / 3 * 2 * 0.4 );
    }
}

/*案例底层大图选单*/
.project_img_slideshow_nav{ margin-top: 20px; position: relative;  border-top:1px dotted #666;}
.project_img_slideshow_nav span{ color: #666; display: block; padding: 10px 0; font-size: 16px;}
.project_img_slideshow_nav ul{ overflow: hidden;}
.project_img_slideshow_nav ul li{ display: inline-block; float:left; width:18%; margin-right:2.5%;}
.project_img_slideshow_nav ul li:nth-child(5n){margin-right: 0;}
.project_img_slideshow_nav ul li a{ display:block; width:100%;height: auto; opacity: 0.6; filter:alpha(opacity=60);}
.project_img_slideshow_nav ul li a:hover {opacity: 1; filter: alpha(opacity=100);}
.project_img_slideshow_nav ul li a img{ width: 100%; height: auto;}
.project_img_slideshow_nav .btn_arrow_pre{left: 0; top:30%;}
.project_img_slideshow_nav .btn_arrow_next{right: 0; top:30%;}

footer{ margin-top: 0;}


/* VR底层页 begin*/
.project_vr_box{ display: block; margin: 0 auto; margin-top: 0px; }
.project_vr_info{ position: relative;text-align: center;}
.project_vr_info div{ position: relative; margin: 0 auto; max-width: 2000px; height: 640px;}
.project_vr_info span{ display: block; color:#c89863;}
.project_vr_info  p{ color: #fff; padding:5px 30px 20px 30px; box-sizing: border-box; max-width: 960px; margin: 0 auto; text-align: left; }

.project_caption_vr_info{ display:block; max-width: 960px; margin:0 auto; position:relative; z-index: 9; font-size:13px; margin-bottom: 10px; padding-left:5px;}
.project_caption_vr_info h4,.project_caption_vr_info h4 a{display: inline-block; color: #fff;}
.project_caption_vr_info span{display: inline-block; color: #c89863;padding-left: 10px;}
.project_caption_vr_info p{display:inline-block; color: #fff}
/* VR底层页 end*/




@media screen and (min-width:768px) and (max-width:768px){ 
    
/*案例底层列表*/
.project_item_list ul li{position: relative;float: left;width: 337px;height: 230px;text-align: center;overflow: hidden;margin:2% 2.5% ;}/*by chiao*/
    
/*案例底层大图*/    
.project_img_slideshow_box{ padding:30px 20px; margin-top: 0; box-sizing: border-box;}

/*为了大张直图而设定的*/
.project_img_slideshow_box ul li img{ max-width: 600px; max-height: 600px; }

.project_img_slideshow_info  p{padding: 0;}
    
/*案例底层大图选单*/
.project_img_slideshow_nav{ display: none;}

/*分享组件*/
.social_media {width: 424px;}
.social_media_photo {width: 95%}

}


@media screen and (min-width:640px) and (max-width:767px) {   
    
.project_img_slideshow_box{ padding:30px 20px; margin-top: 0; box-sizing: border-box;}

.project_img_slideshow_info  p{padding: 0;}
    
/*案例底层列表*/
.project_item_list ul{ overflow: hidden; margin-top:10px;}
/*.project_item_list ul li{ width:45%; height:auto; margin:2% 2.5% ; }*/
.project_item_list ul li{position: relative;float: left;width: 288px;height: 192px;text-align: center;overflow: hidden;margin:2% 2.5% ;}/*by chiao*/
    
/*案例底层大图*/   
.view_project_slideshow_mode{ padding-top: 80px;}
.close{ top:8%;right: 10px; }
    
/*案例底层大图选单*/
.project_img_slideshow_nav{ display:none;}

/*分享组件+*/
.media_open {display: inline-block;}
.share_more{background-color: #1b1b1c}
.photoSocial .w_google,.photoSocial .w_pocket,.photoSocial .w_pin,.photoSocial .w_twitter,.photoSocial .w_plurk,.photoSocial .w_sina {display:none;}

/*分享组件*/
.social_media_photo {width: 450px}

}


@media screen and (min-width:415px) and (max-width:639px) {
    
.project_img_slideshow_box{ padding:30px 20px; margin-top: 0; box-sizing: border-box;}

.project_img_slideshow_info  p{padding: 0;}
    
/*案例底层列表*/    
.project_item_list ul{ overflow: hidden; margin-top:10px;}
/*.project_item_list ul li{  width:45%; height:auto; margin:2% 2.5% ; }*/
.project_item_list ul li{position: relative;float: left;width: 186px;height: 124px;text-align: center;overflow: hidden;margin:2% 2.5% ;}/*by chiao*/


/*案例底层大图*/
.view_project_slideshow_mode{ padding-top: 80px;}
.close{ top:10%;right: 10px; }
.project_img_slideshow_info .btn_arrow_pre{ top:40%;}
.project_img_slideshow_info .btn_arrow_next{ top:40%;}
    
/*案例底层大图选单*/
.project_img_slideshow_nav{ display: none;}

/*分享组件+*/
.media_open {display: inline-block;}
.share_more{background-color: #1b1b1c}
.photoSocial .w_google,.photoSocial .w_pocket,.photoSocial .w_pin,.photoSocial .w_twitter,.photoSocial .w_plurk,.photoSocial .w_sina {display:none;}
    
/*分享组件*/
.social_media_photo {width: 450px}

/* VR底层页 begin*/
.project_vr_info div{ max-height: 510px;}
/* VR底层页 end*/

 }

@media screen and (max-width: 414px) {
    
/*案例底层列表*/   
.project_item_list ul{ overflow: hidden; margin-top:10px;}
/*.project_item_list ul li{  width:45%; height:auto; margin:2% 2.5% ; }*/
.project_item_list ul li{position: relative;float: left;width: 168px;height: 112px;text-align: center;overflow: hidden;margin:2% 2.5% ;}/*by chiao*/

.project_img_slideshow_box{ padding:30px 20px; margin-top: 0; box-sizing: border-box;}  

.project_img_slideshow_info  p{padding: 0;}
    
/*案例底层大图*/
.view_project_slideshow_mode{ padding-top: 80px;}
.close{ top:10%;right: 10px; }
    
/*案例底层大图选单*/
.project_img_slideshow_nav{ display: none;}

/*分享组件+*/
.media_open {display: inline-block;}
.share_more{background-color: #1b1b1c}
.photoSocial .w_google,.photoSocial .w_pocket,.photoSocial .w_pin,.photoSocial .w_twitter,.photoSocial .w_plurk,.photoSocial .w_sina {display:none;}

/*分享组件*/
.social_media_photo { width: 240px;}
.fb_base { padding: 0; margin-left: 55px; clear: left; width: 51px;}

/* VR底层页 begin*/
.project_vr_info div{ max-height: 510px;}
/* VR底层页 end*/

}


/*by chiao*/
@media screen and (max-width: 320px) {
    
/*案例底层列表*/   
.project_item_list ul{ overflow: hidden; margin-top:10px;}
.project_item_list ul li{position: relative;float: left;width: 144px;height: 96px;text-align: center;overflow: hidden;margin:2% 2.5% ;}/*by chiao*/

.project_img_slideshow_box{ padding:30px 20px; margin-top: 0; box-sizing: border-box;}  

.project_img_slideshow_info  p{padding: 0;}
    
/*案例底层大图*/
.view_project_slideshow_mode{ padding-top: 80px;}
.close{ top:10%;right: 10px; }
.project_img_slideshow_info .btn_arrow_pre{ top:40%}
.project_img_slideshow_info .btn_arrow_next{ top:40%;}
    
/*案例底层大图选单*/
.project_img_slideshow_nav{ display: none;}


/*分享组件+*/
.media_open {display: inline-block;}
.share_more{background-color: #1b1b1c}
.photoSocial .w_google,.photoSocial .w_pocket,.photoSocial .w_pin,.photoSocial .w_twitter,.photoSocial .w_plurk,.photoSocial .w_sina {display:none;}

/*分享组件*/
.social_media_photo { width: 240px;}
.fb_base { padding: 0; margin-left: 55px; clear: left; width: 51px;}

/* VR底层页 begin*/
.project_vr_info div{ max-height: 325px;}
/* VR底层页 end*/

}

/*相关案例报导 begin*/
.DesignPages{
	background-color: #1b1b1c;
}
.DesignPages .multiCol_container .rdate {
    font-size: 0.6875em;
    color: #bbb;
    width: 45em;
    line-height: 24px;
}
.multiCol_container .rintro a {
    font-size: 0.8125em;
    color: #bbb;
    line-height: 1.5em;
}
.multiCol_container .rintro:hover a {
    color: #777;
}
.DesignPages .btn_primary_green {
    display: block;
    width: 310px;
	margin: 0 auto;
	margin-bottom: 40px;
    margin-top: 40px;
}

@media screen and (max-width: 767px){
	.DesignPages{
		display: none;
	}	
	
}
/*相关案例报导 end*/