pfhwyigou/frontend/web/css/house/lpalbumdetails.css

body{background: #fff;}

.y_mbxdh{background: #F8F8F8;}
.y_puicnav_top{
	padding: 8px 0;
}
.y_puicnav_top a{
	font-size: 12px;
	color: #999999;
}
.y_lpxcHead{
	margin-top: 30px;
	width: 100%;
	height: auto;
}
.y_lpxcHead_main{
	width: 1188px;
	margin: 0 auto;
}
.y_lpxcHead_main .y_lpxcHead_l{
	float: left;
}
.y_lpxcHead_main .y_lpxcHead_l p.title{
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content:flex-start;
	align-items:center;
}
.y_lpxcHead_main .y_lpxcHead_l p.title span{
	display: inline-block;
	font-size: 26px;
	color: #333;
	font-weight: bold;
}
.y_lpxcHead_main .y_lpxcHead_l p.title em{
	display: inline-block;
	font-size: 12px;
	color: #fff;
	background: #E03700;
	height: 26px;
	line-height: 26px;
	padding: 0 10px;
	margin-left: 18px;
}

.y_lpxcHead_main .y_lpxcHead_l p.style{
	margin-top: 14px;
}
.y_lpxcHead_main .y_lpxcHead_l p.style i{
	display: inline-block;
	float: left;
	font-size: 12px;
	height: 24px;
	line-height: 24px;
	padding: 0 8px;
	background:#EFF3FC;
	color: #668AE9;
}
.y_lpxcHead_main .y_lpxcHead_l p.style i+i{
	margin-left: 8px;
}
.y_lpxcHead_main .y_lpxcHead_l p.style i:nth-child(1){
	background: #FFE6EC;
	color: #EF3E4A;
}
.y_lpxcHead_main .y_lpxcHead_r{
	float: right;
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content:flex-start;
	align-items:center;
}
.y_lpxcHead_main .y_lpxcHead_r span{
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content:flex-start;
	align-items:center;
	font-size: 24px;
	color: #DFA24E;
	font-weight: bold;
	float: left;
}
.y_lpxcHead_main .y_lpxcHead_r span img{
	width: 30px;
	height: 30px;
	display: inline-block;
	margin-right: 10px;
}
.y_lpxcHead_main .y_lpxcHead_r a{
	display: inline-block;
	float: left;
	height: 35px;
	line-height: 35px;
	background: #E03700;
	font-size: 14px;
	color: #fff;
	border-radius: 3px;
	padding: 0 13px;
	margin-left: 30px;
}
.y_lpxcNav{
	width: 100%;
	height: auto;
	margin-top: 30px;
}
.y_lpxcNav_box{
	width: 1188px;
	height: 50px;
	line-height: 48px;
	background: #F8F8F8;
	margin: 0 auto;
}
.y_lpxcNav_box a{
	font-size: 18px;
	color:#333;
	padding: 0px 15px;
}
.y_lpxcNav_box a span{
	border-bottom: 2px solid #F8F8F8;
	padding: 0 5px;
	display: inline-block;
}
.y_lpxcNav_box a:hover{
	color: #DD2222;
	font-weight: bold;
}
.y_lpxcNav_box a:hover span{
	border-bottom-color: #DD2222;
}
.y_lpxcNav_box a.on{
	color: #DD2222;
	font-weight: bold;
}
.y_lpxcNav_box a.on span{
	border-bottom-color: #DD2222;
}





.v3indexNav{ display: none;}
.lpalbum{ margin-top: 25px;}
.lpalbumBox{width: 1188px; margin: 0 auto;}

.lpalbumBox_l{ width: 848px; float:left;}
.lpalbumBox_l .showimg{ width: 100%; height: 564px;background: #f8f8f8;}
.lpalbumBox_l .showimg .showimg_top_l{float: left;}
.lpalbumBox_l .showimg .showimg_top_l span.list_length{font-size: 20px; color: #666;}
.lpalbumBox_l .showimg .showimg_top_l span.list_length em{display: inline-block; font-size:28px; color: #3072F6; }
.lpalbumBox_l .showimg .showimg_top_l span.tuji{font-size: 14px; color: #333;display:inline-block;margin-left: 29px;}

.lpalbumBox_l .showimg .showimg_top_r{float: right;}
.lpalbumBox_l .showimg .showimg_top_r a{display: block; font-size: 14px; color: #333;}
.lpalbumBox_l .showimg .showimg_top_r i{ width: 15px; height: 11px; display: inline-block; margin-right: 8px; position: relative; top: 2px;}
.lpalbumBox_l .showimg .showimg_top_r i img{width: 100%; height: 100%}
.showimg_center{width: 100%; height: 100%; position: relative;}
.showimg_center .img_c{
	width: 848px;
	height: 564px;
	display: table-cell; vertical-align: middle;text-align: center;
	position: relative;
}
.showimg_center .img_c img{
	width: auto;
	height: auto; 
	max-height: 564px;
	max-width: 848px;
	display: inline-block;
}
.showimg_center a.sub{ opacity: 0.1; width: 59px; height: 80px; display: block; background:rgba(0,0,0,0.4); position: absolute; top: 50%; text-align: center; z-index: 2; margin-top: -40px;}
.showimg_center a.sub img{ width:22px; height: 42px; display:inline-block; position: relative; top: 19px;z-index: 3;}
.showimg_center a.sub.left_PgUp{ left: 0px;}
.showimg_center a.sub.right_PgDn{ right: 0px;}
.showimg_center:hover a.sub{ opacity: 1;}
.showimg_center:hover{cursor:pointer;}




.lpalbumBox_l .tulist{ position: relative; margin-top: 20px;}
.lpalbumBox_l .tulist a.tulist_sub{width: 38px; height: 90px; background: #ddd; display: block; position:  absolute; top: 50%; margin-top: -45px; text-align: center;}
.lpalbumBox_l .tulist a.tulist_sub img{ width: 8px; height: 16px; display: inline-block; position: relative; top: 35px;}
.lpalbumBox_l .tulist a.tulist_sub.tulist_left{left: 0px;}
.lpalbumBox_l .tulist a.tulist_sub.tulist_right{right: 0px;}
.lpalbumBox_l .tulist_main{width: 751px;margin: 0 auto; height: 90px;overflow: hidden;}
.lpalbumBox_l .tulist_main ul li{ width: 138px; height: 86px; border:2px solid rgba(0,0,0,0); float: left;}
.lpalbumBox_l .tulist_main ul li img{ width: 100%; height: 100%;}
.lpalbumBox_l .tulist a.tulist_sub:hover{background:#ccc;}
.lpalbumBox_l .tulist_main ul li.on{border-color:#3072F6; }
.lpalbumBox_l .tulist_main ul li:hover{border-color:#3072F6; }
.lpalbumBox_l .tulist_main ul li+li{ margin-left: 10px;}


.lpalbumBox_r{width: 310px; height: auto; background: #fff; float: right; padding: 15px 0 30px; border:1px solid  #E7E7E7;}
.lpalbumBox_r_t{font-size: 18px; color: #333;padding: 0 20px;}


.lpalbumBox_rNav{ margin-top: 20px;}
.lpalbumBox_rNav a{display: block; padding: 0 20px; font-size: 14px; color: #333; height: 45px; line-height: 45px;}
.lpalbumBox_rNav a span{display: block; float: left;}
.lpalbumBox_rNav a i{display: block; float: right;}
.lpalbumBox_rNav a.on{background: #F8F8F8; color: #DD2222;}
.lpalbumBox_rNav a:hover{background: #F8F8F8; color: #DD2222;}
.lpalbumBox_rNav a em{position: relative; top: 14px; display: inline-block; width: 18px;height: 18px; background-size:100% 100%; margin-right: 5px; float: left; line-height: 18px;}
.lpalbumBox_rNav a[album-id="0"] em{background: url('/image/v2/ico_xc0.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="0"]:hover em{background: url('/image/v2/ico_xc0_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="0"].on em{background: url('/image/v2/ico_xc0_1.png') no-repeat center;}

.lpalbumBox_rNav a[album-id="3"] em{background: url('/image/v2/ico_xc3.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="3"]:hover em{background: url('/image/v2/ico_xc3_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="3"].on em{background: url('/image/v2/ico_xc3_1.png') no-repeat center;}

.lpalbumBox_rNav a[album-id="5"] em{background: url('/image/v2/ico_xc5.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="5"]:hover em{background: url('/image/v2/ico_xc5_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="5"].on em{background: url('/image/v2/ico_xc5_1.png') no-repeat center;}

.lpalbumBox_rNav a[album-id="6"] em{background: url('/image/v2/ico_xc6.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="6"]:hover em{background: url('/image/v2/ico_xc6_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="6"].on em{background: url('/image/v2/ico_xc6_1.png') no-repeat center;}

.lpalbumBox_rNav a[album-id="10"] em{background: url('/image/v2/ico_xc10.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="10"]:hover em{background: url('/image/v2/ico_xc10_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="10"].on em{background: url('/image/v2/ico_xc10_1.png') no-repeat center;}

.lpalbumBox_rNav a[album-id="4"] em{background: url('/image/v2/ico_xc4.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="4"]:hover em{background: url('/image/v2/ico_xc4_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="4"].on em{background: url('/image/v2/ico_xc4_1.png') no-repeat center;}

.lpalbumBox_rNav a[album-id="9"] em{background: url('/image/v2/ico_xc9.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="9"]:hover em{background: url('/image/v2/ico_xc9_1.png') no-repeat center;}
.lpalbumBox_rNav a[album-id="9"].on em{background: url('/image/v2/ico_xc9_1.png') no-repeat center;}


.img_c_cin{position: absolute;right: 20px;top: 20px;background: rgba(0,0,0,0.5);height: 30px;line-height: 30px; font-size: 14px; color: #fff;padding: 0 15px; z-index: 2;}


.showimg_center .img_c i{

	display:none;
	width: 90px;
	height: 90px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -45px;
	margin-left: -45px;
}
.showimg_center .img_c i img{
	width: 100%;
	height: 100%;
}



.lpalbumBox_r .xian_m{height: 1px; width: 100%; background: #f8f8f8; margin: 16px 0;}
.lpalbumBox_r .bin_f{padding: 0 20px;}

.lpalbumBox_r .bin_f .bin_f_l{ float: left; width: 60px; height: 60px;}
.lpalbumBox_r .bin_f .bin_f_l img{ width: 100%; height: 100%;}
.lpalbumBox_r .bin_f .bin_f_r{ float: left; width: 197px; margin-left: 12px; position: relative;}
.lpalbumBox_r .bin_f .bin_f_r .bin_f_text p.jjr span{font-size: 14px; color: #333; font-weight: bold;}
.lpalbumBox_r .bin_f .bin_f_r .bin_f_text p.jjr em{font-size: 12px; color: #68819E;background: #F1F3F8; height: 16px;line-height: 16px; padding: 0 8px; display: inline-block; margin-left: 10px;}
.lpalbumBox_r .bin_f .bin_f_r .bin_f_text p.kt{font-size: 12px; color: #656769; margin-top: 5px;}
.lpalbumBox_r .bin_f .bin_f_r .bin_f_text p.kt span{color: #077AEF;padding: 0 5px;}
.lpalbumBox_r .bin_f .bin_f_r .bin_f_text p.txt{font-size: 12px; color: #A4A5A6; margin-top: 5px;}
.lpalbumBox_r .bin_f .bin_f_r .zixun{ position: absolute; right:-5px; top: 10px; }
.lpalbumBox_r .bin_f .bin_f_r .zixun a{ display: block; font-size: 11px; color:#fff; border: 1px solid #077AEF; border-radius: 17px; background: #077AEF; height: 34px; line-height: 32px; padding: 0 10px; }
.lpalbumBox_r .bin_f .bin_f_r .zixun a i{ width: 15px; height: 15px; display: inline-block; margin-right: 5px; line-height: 15px;}
.lpalbumBox_r .bin_f .bin_f_r .zixun a i img{ width: 100%;height: 100%;}

.telBox{
	text-align: center;
	width: 80%;
	margin: 0 auto;
	margin-top: 30px;
}
.telBox span{
	border-radius: 6px;
	border: 2px solid #DD2222;
	font-weight: bold;
	font-size: 20px;
	color: #DD2222;
	height: 42px;
	line-height: 42px;
	display: -webkit-flex; /* Safari */
  	display: flex;
  	align-items:center;
  	justify-content:center;
}
.telBox span img{
	display: inline-block;
	width: 16px;
	height: 17px;
	line-height: 17px;
	margin-right: 10px;
}





/*弹窗 图片放大特效*/
.weffects {position:fixed;top:0;bottom:0;left:0;width:100%;z-index:1100;background:rgba(0,0,0,1);display:none;}
.weffects-cls {display:inline-block;width:30px;height:30px;position:absolute;top:60px;right:80px;z-index:100;}
.weffects-cls img {display:inline-block;width:100%;height:100%;}
.magnify-box {display:block;width:100%;height:80%;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
align-items:center;
justify-content:center;
}
.magnify-box img {display:inline-block;max-width:886px;max-height:638px;}
.weffects .prev-btn {position:absolute;top:50%;left:116px;width:35px;height:62px;margin-top:-31px;z-index:100;}
.weffects .prev-btn img {display:inline-block;width:35px;height:62px;}
.weffects .next-btn {position:absolute;top:50%;right:116px;width:35px;height:62px;margin-top:-31px;z-index:100;
    transform:rotate(180deg);
  -ms-transform:rotate(180deg);   /* IE 9 */
  -moz-transform:rotate(180deg);  /* Firefox */
  -webkit-transform:rotate(180deg);
  -o-transform:rotate(180deg);  /* Opera */
}
.next-btn img {display:inline-block;width:35px;height:62px;}
.weffects-box {position:absolute;left:0;bottom:20px;height:auto;width:100%;background:rgba(0,0,0,0.8);}
.weffects-list {width:1200px;margin:0 auto;}
.weffects-list-nav {width: 1100px; margin: 0 auto; margin-bottom: 20px;}
.weffects-list-nav a {font-size:13px;color:#666666;padding:13px 0;display:inline-block; border-bottom: 2px solid #000;}
.weffects-list-nav a + a {display:inline-block;margin-left:30px;}
.weffects-list-nav a.on {color:#fff; border-bottom-color:#DD2222; }

.weffects-list-imgbox{
	width: 100%;
	position: relative;
	height: auto;
}
.weffects-list-img { margin: 0 auto; width:1090px;overflow: hidden;}
.weffects-list-img ul li {display:inline-block;width:146px;height:90px;border:1px solid #fff;}
.weffects-list-img ul li.in {border-color:#DD2222}
.weffects-list-img ul li:last-child {margin-left:0px;}
.weffects-list-img ul li > img {display:inline-block;width:100%;height:100%;}




.weffects-list-img .swiper-button-next, .weffects-list-img .swiper-button-prev{
	width: 22px;
	height: 22px;
	opacity: 1;
	top: 50%;
	margin-top: -11px;
}
.weffects-list-img .swiper-button-next{
	background:url('/image/v2/ico_i22_1.png') no-repeat center; 
	background-size:100% 100%; 
	right: 0px;
}
.weffects-list-img .swiper-button-prev{
	background:url('/image/v2/ico_i21_1.png') no-repeat center; 
	background-size:100% 100%; 
	left: 0px;
}




.magnify-box .vidplay{
	width: 100%;
	height: 100%;
	position: relative;
}
.magnify-box .vidplay p{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -443px;
	margin-top: -319px;
	z-index: 5;
}
.magnify-box .vidplay p img{
	width: 100%;
	height:100%;
}

.magnify-box .vidplay i{
	display: inline-block;
	width: 90px;
	height: 90px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -45px;
	margin-top: -45px;
	z-index: 6;
}
.magnify-box .vidplay i img{
	width: 100%;
	height: 100%;
}
.magnify-box .vidplay video{
	display: inline-block;
	width: 100%;
	height: 100%;
	max-width:886px;
    max-height: 638px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -443px;
	margin-top: -319px;
	z-index: 4;
}