.exp-museum-dtl-all {
    position: relative;
    color: #fff;
    text-align: center;
}
.exp-museum-dtl-bg {
}
.exp-museum-dtl-bg img {
    max-width: 100%;
    height: auto;
}  
.menu-all {
    position: absolute;
    top: 0;
}
.menu-back {
    background: #ff5907;
    transition: background-color .5s ease;
    width: 218px;
    height: 88px;
    line-height: 88px;
    border-bottom: 1px solid #ff7a39;
}
.menu-back a {
    color: #fff;
    display: block;
}
.menu-back img {
    margin-right: 9px;
    margin-top: -3px;
}
.menu-back:hover {
    background-color: #c64100;
}
.menu-list > ul {
    font-size: 0;
}
.menu-list > ul > li {
    position: relative;
    background-color: #ff5907;
    transition: background-color .5s ease;
    cursor: pointer;
    width: 218px;
    height: 394px;
    padding-top: 5.8vw;
}
.menu-list > ul > li img {
    margin-bottom: 16px;    
}
.menu-list > ul > li h2 {
    font-weight: normal;
    font-size: 18px;
    color: #fff;
}
.menu-list > ul > li p {
    font-size: 14px;
    color: #ffb28c;
}
.menu-list > ul > li.on,
.menu-list > ul > li:hover {
    background-color: #c64100;
}
.menu-list > ul > li img {
    width: 92px;
    height: 92px;
}
.list-btm-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);     
    -moz-transform: translateX(-50%);    
    -webkit-transform: translateX(-50%); 
    -o-transform: translateX(-50%);  
    width: 137px;
    height: 1px;
    background-color: #ff7a39;
}
.list-dtl-more {
    position: absolute;
    left: 83.7%;
    top: 32.5%;
    height: 34px;
    width: 34px;
    color: #fff;
    background: #ff5907;
    border-radius: 50%;
    cursor: pointer;
}
.list-dtl-more-wave {
    background-color: #ff5907;
    opacity: .4;
    height: 34px;
    width: 34px;
    border-radius: 50%; 
    animation:waveGo 1.4s ease infinite;
}
@keyframes waveGo {
    0% {
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
        opacity: .6;
    }
    100% {
        -webkit-transform: scale(2.6);
        -ms-transform: scale(2.6);
        transform: scale(2.6);
        opacity: 0;
    }
}
@-webkit-keyframes waveGo {
    0% {
        -webkit-transform:  scale(1.0);
        transform:  scale(1.0);
        opacity: .6;
    }
    100% {
        -webkit-transform: scale(2.6);
        transform: scale(2.6);
        opacity: 0;
    }
}
.list-dtl-more-click {
    position: absolute;
    top: 0;
    height: 34px;
    width: 34px;
}
.list-dtl-more-xh,
.list-dtl-more-xv {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);     
    -moz-transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%);  
    background-color: #fff;
}
.list-dtl-more-xh {
    width: 16px;
    height: 1px;
    transition: all .6s ease;
}
.list-dtl-more-click:hover .list-dtl-more-xh {
    transform: translate(-50%, -50%) rotate(180deg);
    -ms-transform: translate(-50%, -50%) rotate(180deg);     
    -moz-transform: translate(-50%, -50%) rotate(180deg);    
    -webkit-transform: translate(-50%, -50%) rotate(180deg); 
    -o-transform: translate(-50%, -50%) rotate(180deg);  
}
.list-dtl-more-xv {
    width: 1px;
    height: 16px;
}
.list-dtl-more-desc-line {
    position: relative;
    margin-left: -250px; 
    margin-top: 20px;  
    cursor: auto; 
}
.list-dtl-more-desc-line p {
    position: absolute;
    bottom: 10px;
    left: -17px;
    font-size: 20px;
    color: #ff5907;
    width: 250px;
}
.list-dtl-more-hand {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 16px;
    animation:handGo 3s ease infinite;
}
@keyframes handGo {
    0% {
        opacity: 0;
        -webkit-transform: translate(-300px, 100px);
        -ms-transform: translate(-300px, 100px);
        transform: translate(-300px, 100px);
    }
    20% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    65% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }
    75% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    80% {
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
    }
    85% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    92% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes handGo {
    0% {
        opacity: 0;
        -webkit-transform: translate(-300px, 100px);
        transform: translate(-300px, 100px);
    }
    20% {
        opacity: 1;
    }
    50% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    65% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    70% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    75% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    80% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
    85% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    92% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.list-dtl-more-hand img {
    width: 28px;
}
.pros-show {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);     
    -moz-transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    width: 65%;
}
.pros-show > ul {
    font-size: 0;
}
.pros-show > ul > li {
    background-color: #fe691f;
    opacity: .9;
    display: inline-block;
    width: 190px;
    height: 190px;
    line-height: 190px;
    margin-left: 18px;
    margin-right: 18px;
    font-size: 26px;
    border-radius: 50%;
    opacity: 0;
}
.pros-show-line {
    background: url('../images/pros-show-line.png') no-repeat center center;
    width: 190px;
    height: 190px;
    position: absolute;
} 
.pros-show-line:hover {
    animation:rockGo .6s ease-out 1;
}
.pros-show-line a {
    display: block;
    width: 100%;
    height: 100%;
}
@keyframes rockGo {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
    26% {
        -webkit-transform: rotate(-30deg);
        -ms-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    66% {
        -webkit-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }
}
@-webkit-keyframes rockGo {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    26% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }
    66% {
        -webkit-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
.pros-show-line-wave {
    position: absolute;
    top: 0;
    z-index: -1;
    background-color: #fe691f;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    transition: all .7s ease;
    transform: scale(1.7);
    -ms-transform: scale(1.7);     
    -moz-transform: scale(1.7);    
    -webkit-transform: scale(1.7); 
    -o-transform: scale(1.7); 
    opacity: 0;
}
.pros-show-line:hover ~ .pros-show-line-wave {
    transform: scale(1);
    -ms-transform: scale(1);     
    -moz-transform: scale(1);    
    -webkit-transform: scale(1); 
    -o-transform: scale(1); 
    opacity: .7;
}
@media(max-width: 1500px) {
    .pros-show > ul {
        transform: scale(.8);
        -ms-transform: scale(.8);     
        -moz-transform: scale(.8);    
        -webkit-transform: scale(.8); 
        -o-transform: scale(.8); 
    }
    .list-dtl-more-desc {
        transform: scale(.75) translateY(-30px);
        -ms-transform: scale(.75) translateY(-30px);     
        -moz-transform: scale(.75) translateY(-30px);    
        -webkit-transform: scale(.75) translateY(-30px); 
        -o-transform: scale(.75) translateY(-30px); 
    }
}
@media(max-width: 1400px) {
    .pros-show > ul {
        transform: scale(.7);
        -ms-transform: scale(.7);     
        -moz-transform: scale(.7);    
        -webkit-transform: scale(.7); 
        -o-transform: scale(.7); 
    }
}