.banner-area { position: relative; }
.slick-arrow { position: absolute; top: calc(50% - 1.4rem); height: 3.75rem; width: 3.75rem; background-color: #d0d0d0; border-radius: 50%; color: #333; border: none; cursor: pointer; z-index: 9999; transition: all .3s; }
.slick-arrow:hover { background-color: #ff5c18; color: #fff;}
.cr-slick-prev { left: -9rem; }
.cr-slick-next { right: -9rem; }


.detail-content-container { display: flex; flex: 0 0 100%; padding: 2.625rem 0 5.625rem 0; flex-wrap: wrap; align-items: flex-start; }
.detail-content-container img { width: 100%;  }
.detail-content-container h3 { color: #000; font-size: 1.375rem; text-align: left; }
.detail-content-container h1, .detail-content-container h2 {text-align: left;}
.detail-content-container p { flex: 0 0 100%; padding-bottom: 1rem; text-align: left; font-size: 1rem; color: #6f7071;}
.detail-content-container hr { border-top: #e5e5e5 1px solid; margin: 5.25rem 0; flex: 0 0 100%;}

.any-container { padding-top: 4.25rem; display: flex; flex-wrap: wrap; flex: 0 0 75%; margin: 0 auto;  }
.any-box { flex-wrap: wrap; display: flex; flex: 0 0 calc(100% - 15%);}
.prev-container { padding-bottom: 1.625rem;}
.prev-container , .next-container { flex: 0 0 100%; display: flex; justify-content: start; align-items: end;}
.prev-container > a, .prev-container > span, 
.next-container > a, .next-container > span { font-size: 1.25rem; color: #a3a3a3;  line-height: 1.5;}
.next-container > a.cur { color: #ff5c18; font-size: 1.625rem; }
.go-netx-icon { width: 1.9375rem; height: 1.9375rem; margin-left: 10px;}
.next-container > a { display: flex; align-items: center; }

/**
分享
*/
.share-box { display: flex; flex: 1; align-items: end; }
.share-box .wechat-icon { background-image: url(/images/wechat.svg); background-size: 100% 100%; content: ''; display: block;  width: 3rem; height: 3rem; }
.share-box .sina-icon { background-image: url(/images/sina.svg); background-size: 100% 100%; content: ''; display: block;  width: 3rem; height: 3rem; }
.share-box span { flex: 0 0 5.25rem; color: #a3a3a3; font-size: 1rem; }
.share-box ol { flex: 0; display: flex;}
.share-box ol li { flex: 1; display: flex; align-items: end;}
.empty-box {flex: 0;}

.recommend-container { padding-top: 0; display: flex; flex-wrap: wrap; flex: 0 0 75%; margin: 0 auto;  }
.recommend-container hr { border-top: #e5e5e5 1px solid;margin: 5.25rem 0;flex: 0 0 100%; }
.recommend-title { position: relative; flex: 0 0 100%; }
.recommend-title h1 { font-size: 3.875rem;line-height: 5.2rem;color: #000;font-weight: 400;text-align: left;}
.btn-Refresh { color: #616161; position: absolute; top: 0; right: 0; padding: 2px 5px; display: flex; flex-wrap: wrap; align-items: center; border: #ebebeb 1px solid; transition: transform 0.5s ease;  }
.btn-Refresh::before { background-image: url(/images/refresh.svg); background-size: 100% 100%; content: ''; display: block;  width: 18px; height: 18px; margin-right: 2px; }
.btn-Refresh:hover::before { 
    /* animation: rotate 1s linear infinite;  */
    animation: rotate 1s linear infinite; 
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media only screen and (min-width: 310px) and (max-width: 768px) {
    .cr-slick-prev { left: -3rem; }
    .cr-slick-next { right: -3rem; }
    .slick-arrow { position: absolute; top: calc(50% - 1rem); height: 2rem; width: 2rem; font-size: 1rem; }
    
}
@media only screen and (min-width: 300px) and (max-width: 1024px) { 
    .detail-container { flex: 0 0 95%; margin: 0 auto;}
    .detail-flag-container ol li { flex: 0 0 50%; max-width: 50%; padding-bottom: 1rem; }
    .any-container {  flex: 0 0 90%; margin: 0 auto; }
    .any-box { flex: 0 0 100%;}
    .share-box { flex: 0 0 100%; padding-top: 3rem;}
    .any-container { justify-content: right;}
    .empty-box{ flex: 1;}
    .recommend-container { flex: 0 0 95%; margin: 0 auto; }
}
.detail-container { padding-top: 5.25rem; display: flex; flex-wrap: wrap; flex: 0 0 75%; margin: 0 auto; }
.detail-title { padding-bottom: 1.875rem; flex: 0 0 100%; line-height: 1; }
.detail-title h1 {font-size: 3rem;text-align: left; align-items: end; justify-content: end; }
.detail-flag-container { flex: 0 0 100%; display: flex; border-bottom: #ccc 1px dotted; padding-bottom: 5px; }
.detail-flag-container > ol { flex: 0 0 calc(100% - 4.375rem); display: flex; flex-wrap: wrap; }
.detail-flag-container > ol > li { padding: 0; display: flex; }
.detail-flag-container > ol > li .detail-flag-item { display: flex; flex: 1; align-items: flex-end;height: 100%; }
.detail-flag-container > ol > li .detail-flag-item > span { font-size: 1rem; line-height: 1; color: #b6b6b6;font-style: normal; flex: 0 0 6.25rem; text-align: left;}
.detail-flag-container > ol > li .detail-flag-item > h4.active { color: #ff5c18;}
.detail-flag-container > ol > li .detail-flag-item > h4 { font-size: 1rem; color: #6f7071; flex: 0 0 calc(100% - 6.25rem); text-align: left; }
.go-back { color: #ccc; font-size: 1rem; flex: 0 0 4.375rem; display: flex; flex-wrap: wrap; justify-content: center; height: fit-content; }
.go-back:hover { color: #ff5c18; }
.go-back::before { background-image: url(/images/go-back.svg); background-size: 100% 100%; content: ''; display: block;  width: 25px; height: 25px; }
.go-back-container { position: relative; display: flex; flex-wrap: wrap; flex: 0 0 4.375rem; align-items: end;  }

.detail-content-container video { width: 100% !important; height: auto !important; }

@media only screen and (min-width: 300px) and (max-width: 1024px) {
    .detail-container { flex: 0 0 90%;margin: 0 auto;} 
    /* .go-back-container {padding-bottom: 1rem;} */
}