@charset "utf-8";

/*====================================================================

item-detail.css

====================================================================*/
.item-detail{}

/*--------------------------------------------------------------------
layout
--------------------------------------------------------------------*/
.item-detail{
   overflow: hidden;
   zoom: 1;
}
.item-detail .images{
   float: left;
   width: 384px;
}
.item-detail .main{
   float: right;
   width: 420px;
}


/*--------------------------------------------------------------------
images
--------------------------------------------------------------------*/
.item-detail .images{
   position: relative;
}
.item-detail .images img{
   display: block;
   width: 100%;
   height: auto;
}

.item-detail .images .main-image{}

.item-detail .images .detail-images{}
.item-detail .images .detail-images .detail-image{
   display: inline-block;
   width: 170px;
   margin: 50px 40px 0 0;
}
.item-detail .images .detail-images .detail-image:nth-child(2n){
   margin-right: 0;
}
.item-detail .images .detail-images .detail-image .caption{
   margin-top: 5px;
}
.item-detail .images .detail-images .detail-image .caption .title{
   font-size: 12px;
   font-weight: bold;
}
.item-detail .images .detail-images .detail-image .caption .desc{
   font-size: 10px;
   margin-top: 5px
}


/*--------------------------------------------------------------------
main
--------------------------------------------------------------------*/
.item-detail .main{}

.item-detail .main .name{}
.item-detail .main .name .title{
   font-size: 28px;
   line-height: 1.4;
}
.item-detail .main .name .code{
   font-size: 13px;
   margin-top: 5px;
}

.item-detail .main .info{
   margin-top: 35px;
}

.item-detail .main .info .price{
   line-height: 1;
}
.item-detail .main .info .price .normal,
.item-detail .main .info .price .sale{
   font-size: 20px;
   font-weight: bold;
}
.item-detail .main .info .price .default{
   font-size: 11px;
}

.item-detail .main .info .stock{
   margin-top: 5px;
}

.item-detail .main .info .info-item{
   margin-top: 30px;
}
.item-detail .main .info .info-item dt{font-weight: bold;}


/*colors*/
.item-detail .colors{
   margin-top: 35px;
}
.item-detail .colors table{
   width: 100%;
}
.item-detail .colors table tr{
}
.item-detail .colors table td{
   vertical-align: middle;
   padding-bottom: 10px;
}

.item-detail .colors .color{
   text-align: left;
}
.item-detail .colors .color .thumb,
.item-detail .colors .color .text{
   display: inline-block;
   vertical-align: middle;
}
.item-detail .colors .color .thumb{
   height: 50px;
   width: auto;
   margin-right: 5px;
}

.item-detail .colors .quantity{
   text-align: right;
   padding: 0 10px 10px;
}
.item-detail .colors .quantity .text,
.item-detail .colors .quantity .select{
   display: inline-block;
   vertical-align: middle;
}
.item-detail .colors .quantity .text{
   margin-right: 5px;
}

.item-detail .colors .quantity,
.item-detail .colors .btns{
   text-align: center;
}
.item-detail .colors .btns .btn{
   width: 100%;
   height: 50px;
   line-height: 50px;
   text-align: center;
   padding: 0;
}




@media screen and ( max-width:750px ){

   .item-detail .images,
   .item-detail .main{
      width: auto;
      float: none;
      padding: 20px;
   }

   .item-detail .main .detail-images{}
   .item-detail .main .detail-images .image{
      display: block;
      margin-top: 20px;
   }
   .item-detail .main .detail-images .image img{
      width: 100%;
      height: auto;
   }

}