.html-wrap{max-width: 1220px;}
.html-image{float: left;width: 100%;position:relative;overflow:hidden;}
.html-image img{float: left;width: 100%;}
.html-image .tips{float:left;width:100%;background-color:rgba(255,255,255,.1);color:#ffffff;padding:20px;overflow: hidden;}
.full-wrap{width: 100%;background-color: #000000;overflow: hidden;}
.thumb{cursor: pointer;}

.atlas{margin:0 auto;width:1200px;overflow: hidden;}
.atlas .atlas-big{float: left;width: 1050px;border:1px solid #333333;overflow: hidden;}
.atlas .atlas-big .image{float: left;width: 100%;height:600px;display:flex;justify-content:center;align-items:center;align-content:center;overflow: hidden;}
.atlas .atlas-big .image img{float: left;max-width: 100%;max-height:600px;overflow: hidden;}
.atlas .atlas-big .name{float: left;width: 100%;height:40px;line-height:40px;padding:0 20px;
    background-color: rgba(255,255,255,.1);
    color:#ffffff;overflow: hidden;}

.atlas .atlas-small{float: left;width: 150px;height:640px;padding-left:20px;overflow: hidden;}
.atlas .atlas-small .atlas-small-wrap{float: left;width: 160px;height: 640px;overflow-x: hidden;overflow-y: auto;}
.atlas .atlas-small .atlas-small-wrap ul {float: left;}
.atlas .atlas-small .atlas-small-wrap ul li{float: left;width: 130px;border:1px solid #333333;margin-bottom: 10px;cursor:pointer;overflow: hidden;}
.atlas .atlas-small .atlas-small-wrap ul li img{float: left;width: 100%;}
.atlas .atlas-small .atlas-small-wrap .selected{border:1px solid #dbdbdb;}


@media (max-width: 1280px) {
    .atlas{width:100%;}
    .atlas .atlas-big{width: calc(100% - 180px);}
}
@media (max-width: 960px){
    .atlas{width:100%;}
    .atlas .atlas-big{width: 100%;margin-bottom:20px;}
    .atlas .atlas-big .image{height:auto;padding:20px;}

    .atlas .atlas-small{float: left;width: 100%;height:auto;padding:0 10px;overflow: hidden;}
    .atlas .atlas-small .atlas-small-wrap{float: left;width: 100%;height:auto;overflow:hidden;}
    .atlas .atlas-small .atlas-small-wrap ul {float:left;width: 100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:stretch;align-content:center;overflow: hidden;}
    .atlas .atlas-small .atlas-small-wrap ul li{flex:none;width: calc(25% - 10px);height:calc(25vw - 20px);margin:5px;display: inline-flex;flex-flow: column nowrap;justify-content: center;align-content: center;align-items: center;overflow: hidden;}
}