ul {

    padding: 0;

}

.panel-default>div{

    margin-right: 20px;

}



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

    .panel {

        width: 100%;

        float: left;

    }

    .panel>div{

        margin-right: 0;

    }



}



/* 缩略图 */

.thumbnail {

    width: 100%;

    max-width: 452px;

    overflow: hidden;

    position: relative;

    height: 80px;

    box-sizing: border-box;

}

.thumbnail>span {

    position: absolute;

    display: block;

    width: 26px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    background-color: #f5f5f5;

    cursor: pointer;

    user-select: none;

}

.thumbnail>span:hover {

    background-color: orange;

    color: white;

    cursor: pointer;

}

.thumbnail>span.left {

    left: 0;

    top: calc(50% - 25px)

}

.thumbnail>span.right {

    right: 0;

    top: calc(50% - 25px)

}

.thumbnail>span.right::after{

    position: absolute;

    content: " ";

    display: inline-block;

    border-color: transparent #666;

    border-style: solid;

    border-width: 10px 0 10px 10px;

    top: 15px;

    left: 10px;

    cursor:pointer;

}

.thumbnail>span.left::after{

    position: absolute;

    content: " ";

    display: inline-block;

    border-color: transparent #666;

    border-style: solid;

    border-width: 10px 10px 10px 0;

    top: 15px;

    right: 10px;

    cursor:pointer;

}

.thumbnail>span:hover::after{

    border-color: transparent rgb(255, 255, 255);

}

.tm-m-photos,

.tm-m-photos-thumb {

    zoom: 1;

}

.tm-m-photos-thumb {

    margin-top: 10px;

    list-style-type: none;

    white-space: nowrap;

    width: auto;

    min-width: 1000px;

    box-sizing: border-box;

    position: absolute;

    height: 60px;

    left: 29px;

    transition: .5s;

}

.tm-m-photos-thumb li {

	width: 60px;

    height: 60px;

    display: inline-block;

    border: 1px solid #f2f2f2;

    padding: 2px;

    margin-right: 8px;

    position: relative;

    transition: border-color .2s ease-out;

	/*display:table;*/

	float: left;

	text-align: center;

}

.tm-m-photos-thumb li span{ 

	position: relative;

    width: 100%;

    height: 100%;

    display: block;

	text-align: center;

}

.tm-m-photos-thumb .tm-current {

    border: 1px solid #f23d6a;

    border-radius: 2px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -o-border-radius: 2px;

    cursor: auto;

}



.tm-photos-arrow {

    width: 0;

    height: 0;

    line-height: 0;

    font-size: 0;

    border: 6px dashed transparent;

    border-top: 6px solid #f23d6a;

    position: absolute;

    left: 15px;

    filter: alpha(opacity=0);

    opacity: 0;

    bottom: -12px;

    background: 0 0;

}



/* .tm-current .tm-photos-arrow { filter: alpha(opacity=100); opacity: 1; } */

.tm-m-photos-thumb img {

    display: inline-block;

    max-width: 100%;

    max-height: 100%;

    user-select: none;

    overflow: hidden;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

}

.tm-m-photo-box {

    /*display: table;*/

    

}

.tm-m-photo-viewer {

    position: relative;

    /*box-sizing: border-box;*/

    /*margin: 10px 0;*/

    width: 100%;

    height: 100%;

    max-width: 452px;

    max-height:452px;

    border: 1px solid #ccc;

    background: #fff;

    /*padding: 2px;*/

    overflow: hidden;

    transition: all 0.2s ease-in;

    /*display: table-cell;*/

    vertical-align: middle;

    text-align: center;

}

.tm-m-photo-viewer > img {

    overflow-y: hidden;

    max-height: 100%;

    max-width: 100%;

    display: inline-block;

    position:absolute;

    top:0;

    bottom:0;

    left:0;

    right:0;

    margin:auto;    

}





.tm-m-photo-viewer-navleft,

.tm-m-photo-viewer-navright {

    top: 0;

    bottom: 0;

    position: absolute;

    width: 30%;

    background: url(http://assets.alicdn.com/s.gif);

    /*解决IE 下背景透明的空白元素无法触发 click 和 hover 事件*/

}



.tm-m-photo-viewer-navleft {

    left: 0;

}



.tm-m-photo-viewer-navright {

    right: 0;

}



.tm-m-photo-viewer-navleft i,

.tm-m-photo-viewer-navright i {

    top: 50%;

    margin-top: -24px;

    position: absolute;

    width: 48px;

    height: 48px;

    display: none;

}



.tm-m-photo-viewer-navleft i {

    left: 0;

}



.tm-m-photo-viewer-navright i {

    right: 0;

}



.pictureBox {

    position: fixed;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    display: none;

    z-index: 99;

}

.pictureBox>div.box1 {

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);

}

.pictureBox>.box2{

    /* position: absolute; */

    position: fixed;

    max-width: 50%;

    max-height: 70%;

    background-color: #fff;

    /* left: 50% !important;

    top: 50% !important; */

    transform: translateY(-50%) translateX(-50%);

    padding: 50px;

}

.pictureBox>.box2>div{

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    /* background-color: #ffffff; */

    /* padding-bottom: 100%;

    position: relative; */

}

.pictureBox>.box2>div img {

    /* content: '';

    position: absolute; */

    max-width: 100%;

    max-height: 100%;

    /* width: 100%;

    height: 100%; */

    object-fit: cover;

    /* left: 50%;

    top: 50%;

    transform: translateY(-50%) translateX(-50%); */



}

/* .pictureBox>.box2>div{

    background-color: #ffffff;

}

.pictureBox img {

    margin: auto;

    position: absolute;

    z-index: 1;

    max-width: 100%;

    top: 0;

    bottom: 0;

} */

.pictureBox>.box2>span{

    position: absolute;

    z-index: 3;

    cursor: pointer;

    display: inline-block;

    width: 48px;

    height: 48px;

    box-sizing: border-box;

    /* background-color: red; */

    transition: 0.2s;

    border-radius: 50%;

    overflow: hidden;

    background-color: #fff;

    opacity: 0.7;

    user-select: none;

}

.pictureBox>.box2>span>img{

    width: 48px;

    height: 48px;

    position: absolute;

    left: 0;

    top: 0

}

.pictureBox>.box2>span.next{

    top: calc(50% - 20px);

    right: 5px;

}

.pictureBox>.box2>span.prev{

    left: 5px;

    top: calc(50% - 20px);

}

.pictureBox>.box2>span.close{

    right: 10px;

    bottom:10px;

}
@media only screen and ( max-width: 641px ) {
    .panel-default>div{
        margin-left: 0;
        margin-right: 0;
    }
}