.imagedetail{padding:58px 0; background:#f8f8f8; }
.imagedetail-contain{float:left; width:75%; padding:0 38px 0 0;}
.imagedetail.left .imagedetail-contain{float:right; padding:0 0 0 38px;}
.imagedetail-head{overflow:hidden; background:#fff; padding:28px 28px 0 28px;}
.imagedetail-info{margin:18px 0 0; padding-bottom:8px; border-bottom:1px solid #e8e8e8; color:#686868;}
.imagedetail-info>b{font-weight:normal;}
.imagedetail-info>i{font-style:normal; padding-right:18px;}
.imagedetail-info>i>a{color:#686868;}
.imagedetail-info>i>a:hover{color:#1258af;}
.imagedetail-li{display:block; margin:18px 0 0;}
.imagedetail-li>u{text-decoration:none; padding:6px 18px; margin-right:6px; border-radius:6px; background:#f8f8f8; display:inline-block;}
.imagedetail-text{display:block; margin:28px 0 0; font-size:17px;}
.imagedetail-param{display:block; margin-top:18px; font-size:16px;}
.imagedetail-param>dl+dl{margin-top:8px;}
.imagedetail-param>dl:after{display:block; content:''; clear:both;}
.imagedetail-param>dl>dt{float:left; color:#686868;}
.imagedetail-param>dl>dd{float:left;}
.imagedetail-price{display:block; margin-top:18px; color:red;}
.imagedetail-swiper{overflow:hidden; position:relative;}
.imagedetail-outer{width:10000%;}
.imagedetail-item{float:left; width:1%;}
.imagedetail-item img{width:100%; display:block;}
.imagedetail-item b{display:block; margin-top:16px; font-size:18px; color:#fff;}
.imagedetail-prev,
.imagedetail-next{position:absolute; z-index:8; top:50%; width:48px; height:48px; line-height:48px; text-align:center; margin-top:-18px; background:rgba(0,0,0,0.28); cursor:pointer; opacity:0; transition:0.3s;}
.imagedetail-swiper:hover .imagedetail-prev,
.imagedetail-swiper:hover .imagedetail-next{opacity:1;}
.imagedetail-prev i,
.imagedetail-next i{color:#fff; font-size:48px;}
.imagedetail-prev:hover i,
.imagedetail-next:hover i{color:#1258af;}
.imagedetail-prev{left:0;}
.imagedetail-next{right:0;}
.imagedetail-content{display:block; padding:28px; background:#fff;}
.imagedetail-content>aside{padding-bottom:38px;}
.imagedetail-content>aside>p+p{margin-top:8px;}
.imagedetail-tags{padding:0 28px 18px 28px; background:#fff;}
.imagedetail-tags>a{display:inline-block; border:1px solid #e8e8e8; padding:8px 18px; background:rgba(0,0,0,.01); border-radius:3px;}
.imagedetail-tags>a:hover{color:#fff; background:#1258af;}
.imagedetail-comment{padding-top:28px;}
dir{text-align:left; border-top:1px solid #e8e8e8; padding:12px 28px; background:#fff;}
dir>dl{padding:6px 0;}
dir>dl:after{display:block; content:''; clear:both;}
dir>dl>dt{float:left; margin-right:8px;}
dir>dl>dt>b{font-weight:normal; color:#989898;}
dir>dl>dd{float:left;} 
dir>dl>dd>i{font-style:normal;}
.imagedetail-comment{background:#fff; padding:28px; margin-top:28px;}
.imagedetail-sub{float:left; width:25%;}
.imagedetail-recom ul{padding:8px;}
.imagedetail-recom ul:after{display:block; content:''; clear:both;}
.imagedetail-recom ul>li{float:left; width:50%; padding:8px;}
.imagedetail-recom ul>li>a{display:block; position:relative;}
.imagedetail-recom ul>li>a:before{position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; content:''; opacity:0; visibility:hidden; transform:scale(0.5); transition:.3s; background:#1258af;}
.imagedetail-recom ul>li>a:hover:before{opacity:.68; visibility:visible; transform:scale(1);}
.imagedetail-recom ul>li>a>ins{display:block; overflow:hidden;}
.imagedetail-recom ul>li>a>ins>img{display:block; width:100%; transition:.3s;}
.imagedetail-recom ul>li>a:hover>ins>img{transform:scale(1.08);}
.imagedetail-recom ul>li>a>span{position:absolute; z-index:2; left:0; right:0; top:50%; color:#fff; font-weight:bold; text-shadow:0 0 2px #000; transform:translateY(-50%); text-align:center; padding:8px;}
@media(max-width:1200px){
.imagedetail{padding:38px 0;}
.imagedetail-swiper{margin:0 auto; float:none;}
.imagedetail-swiper + .imagedetail-head{margin:28px 0 0 0;}
.imagedetail-contain,
.imagedetail.left .imagedetail-contain{float:none; width:auto; padding:0 0 18px 0;}
.imagedetail-sub{float:none; width:auto;}
}
@media(max-width:1200px) and (min-width:992px){
.imagedetail-recom ul>li{width:25%;}
}
@media(max-width:767px){
.imagedetail{padding:18px 0;}
.imagedetail-swiper{margin-top:18px;}
.imagedetail-info{margin:12px 0 18px 0;}
.imagedetail-head{padding:12px 12px 0 12px;}
.imagedetail-head>h1{font-size:20px;}
.imagedetail-swiper + .imagedetail-head{margin:18px 0 0 0;}
dir{padding:12px;}
.imagedetail-tags{padding:0 12px 18px 12px; background:#fff;}
.imagedetail-content{padding:12px;}
.imagedetail-comment{padding:12px; margin-top:18px;}
}