/* 影视拍摄详情页 */
  /* 1.头部 */
.header{position: relative;z-index: 15;}
.header .header-info{width: 100%;background-color: #313131;padding: 180px 0 20px;position: sticky;position: -webkit-sticky;top: 0;z-index: 50;overflow: hidden;transition: .5s;}
.header-info .film-desc{width: max-content;margin: 0 auto 45px;font-family: 'coolLooseStyle';font-size: 54px;font-weight: 400;color: #d1d1d1;position: relative;line-height: 1.1487;position: relative;z-index: 6;text-align: center;}
.film-desc .desc-en{font-family: 'KaufmannBT';font-size: 22px;text-align: right;padding: 0 12px 14px 0;position: relative;z-index: 6;}
.film-desc::after{position: absolute;content: "”";font-family: 'FounderBigBlack';font-size: 145px;font-weight: 400;top: -10px;}
.film-desc .color{color: #745627;font-family: 'coolLooseStyle';position: relative;}
.color .tagging{position: absolute;width: 25px;height: 25px;border: 4px solid #7d0000;border-radius: 50%;bottom: -15px;z-index: 6;}
.tagging:nth-child(1){left: 26px;}
.tagging:nth-child(2){left: 82px;}
.tagging:nth-child(3){left: 138px;}
.header-info .current-location{font-size: 18px;color: #fff;width: 900px;margin: 0 auto;font-weight: lighter;}
.current-location a{color: #fff;}
.header .header-container{min-height: 200vh;background-color: #000;margin-bottom: -100vh;box-sizing: border-box;}
.header .header-content{position: sticky;position: -webkit-sticky;width: 100%;overflow: hidden;top: 0;margin-top: -370px;}
.header-content::before{content: '';width: 100%;height: 370px;position: relative;z-index: 1;display: block;}
.header-content .header-video{width: 900px;margin: 47px auto 0;border: 1px solid #745627;box-sizing: border-box;}
.header-video video{display: block;width: 100%;height: 500px;object-fit: cover;margin: 0 auto;}
.website-design-detail .header-video video{height: auto;max-width: 100%;}
.header-video img{max-width: 100%;display: block;margin: 0 auto;position: relative;bottom: 1px;}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom: 20px;}
.swiper-pagination-bullet{width: 55px;height: 2px;border-radius: 0;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 5px;}
.swiper-pagination-bullet-active{background-color: #745627;}

.header-video .website-case-link:empty{padding: 0;}

.header-content .flow{width: 900px;margin: 15px auto 100px;overflow: hidden;}
.flow div{font-size: 18px;color: #fff;font-weight: lighter;}
.flow .bshare-custom{display: inline-block;vertical-align: 2px;font-size: 13px;}
.flow .views{margin-right: 26px;}
.flow .consultation-price{padding: 0 10px;height: 26px;line-height: 26px;background-color: #2a2a2a;border-radius: 2px;cursor: pointer;}

  /* 2.影视拍摄详情内容 */
.film-detail{width: 100%;background-color: rgba(49,49,49,0.95);padding: 45px 0 0;position: relative;z-index: 20;}
    /* 制作时间 */
.film-detail .calendar{position: absolute;top: 45px;right: calc((100% - 900px) / 2 + 930px);z-index: 100;}
.calendar .date-item{width: 78px;height: 74px;padding-top: 38px;margin-bottom: 15px;background: url(../images/filmShootingDetail/calendar.png) no-repeat;font-size: 21.5px;color: #767676;text-align: center;font-family: 'FounderSuperThick';box-sizing: border-box;cursor: pointer;}
.calendar .date-item.cur{color: #000;}
.date-item a{display: inline-block;}
    /* 详情介绍 */
.film-detail .film-detail-content{width: 900px;margin: 0 auto;overflow: hidden;}
.film-detail-content p{font-size: 18px;line-height: 30px;font-weight: lighter;color: #d1d1d1;text-indent: 2em;}
.film-detail-content .mb-65{margin-bottom: 30px;}
.film-detail-content .mb-60{margin-bottom: 30px;}
.film-detail-content .mb-45{margin-bottom: 30px;}
.film-detail-content .mb-30{margin-bottom: 30px;}
.film-detail-content .mb-18{margin-bottom: 0;}
.film-detail-content .mb-15{margin-bottom: 0;}
.film-detail-content p.img{text-indent: 0;margin-bottom: 30px;}
p.img img{max-width: 100%;}
.film-detail-content video{display: block;max-width: 100% !important;width: auto !important;height: auto !important;margin: 0 auto;outline: none;}
.film-detail-content p:last-child{margin-bottom: 0;}
.film-detail-content div:last-child{margin-bottom: 0;}
.film-detail-content p a{color: #000;}
.film-detail-content p a:hover{color: #551a8b;text-decoration: underline;}
.film-detail .flow{width: 900px;margin: 30px auto 0;font-size: 18px;line-height: 30px;text-align: right;color: #000;}
.brand-design-detail .film-detail .flow{color: #fff;}
.film-detail .flow .bshare-custom{display: inline-block;vertical-align: 2px;font-size: 13px;margin: 0 20px 0 10px;}
.film-detail .flow img{margin: 0 30px 0 25px;vertical-align: sub;}

.laptop-frame {background: url(../images/websiteDesignDetail/laptop-frame.png) no-repeat center;background-size: cover;width: 900px;height: 520px;margin: 0 auto;position: relative;}
.laptop-frame > .case-frame {position: absolute;top: 29px;left: 108px;width: 683px;height: 425px;z-index: 50;overflow: hidden;}
.laptop-frame > .case-frame > .frame-wrapper {overflow: hidden;width: 683px;position: absolute;top: 0;left: 0;}
.laptop-frame > .case-frame > .frame-wrapper > img {z-index: 54;}
.laptop-frame > .case-frame > .frame-wrapper > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 55;}
.laptop-frame > .case-frame > .scroll-bar {position: absolute;top: 0;right: 2px;height: 70px;width: 3px;background-color: rgba(98, 83, 68, 0.5);z-index: 56;}

.desktop-frame {background: url(../images/websiteDesignDetail/desktop-frame.png) no-repeat center;background-size: cover;width: 900px;height: 833px;margin: 0 auto;position: relative;}
.desktop-frame > .case-frame {position: absolute;top: 38px;left: 38px;width: 827px;height: 465px;z-index: 50;overflow: hidden;}
.desktop-frame > .case-frame > .frame-wrapper {overflow: hidden;width: 827px;position: absolute;top: 0;left: 0;}
.desktop-frame > .case-frame > .frame-wrapper > img {z-index: 54;}
.desktop-frame > .case-frame > .frame-wrapper > div {width: 100%;height: 100%;object-fit: contain;position: absolute;top: 0;left: 0;z-index: 55;}
.desktop-frame > .case-frame > .scroll-bar {position: absolute;top: 0;right: 2px;height: 70px;width: 3px;background-color: rgba(98, 83, 68, 0.5);z-index: 56;}

.phone-frame-2{width: 100%;height: 650px;background-color: #fff;}
.phone-frame-2 .phone-frame-bg{float: left;width: 280px;height: 650px;background: url(../images/brandDesignDetail/bg-1.png) no-repeat center;position: relative;}
.phone-frame-2 .phone-frame-bg:nth-child(1){margin: 0 70px 0 135px;}
.phone-frame-bg .phone-content{position: absolute;width: 218px;height: 388px;left: 31px;top: 154px;overflow: hidden;z-index: 50;}
.phone-content .phone-frame-wrapper{position: absolute;top: 0;left: 0;}
/* .phone-frame-wrapper img{} */
.phone-frame-wrapper div{position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer;z-index: 55;}
.phone-frame-wrapper_transition{transition: top 0.7s ease;}

    /* 为该客户提供的相关服务 */
.film-detail .related-services{width: 100%;margin-top: 120px;text-align: center;}
.related-services .related-services-title{font-size: 58px;font-weight: lighter;color: #fff;line-height: 1.1724;}
.related-services-title .title-en{font-size: 36px;}
.related-services .related-services-list{width: 100%;max-width: 1920px;margin: 40px auto 0;display: flex;flex-wrap: wrap;justify-content: center;}
.related-services-list .related-services-item{position: relative;width: calc((100% - 2px) / 3);margin-right: 1px;}
.related-services-list .related-services-item:nth-child(3n){margin-right: 0;}
.related-services-item a{display: block;width: 100%;overflow: hidden;}
.related-services-item .item-img{width: 100%;opacity: 0.1;position: relative;z-index: 5;transition: .5s;}
.related-services-item .item-mask{position: absolute;width: 100%;top: 0;left: 0;z-index: 2;}
.related-services-item .hover-video{position: absolute;width: 100%;top: 0;left: 0;outline: none;display: none;z-index: 8;}
.related-services-item .item-name{position: absolute;bottom: 0;left: 0;width: 100%;height: 64px;line-height: 64px;background-color: #7d0000;font-size: 18px;color: #fff;font-weight: lighter;z-index: 10;}
.related-services-item a:hover .item-img{opacity: 1;transform: scale(1.05);}

    /* 返回列表 上一篇 下一篇 */
.film-detail .other-page{padding: 20px 0 50px;background-color: #292929;}
.other-page p{width: 900px;padding-left: 350px;margin: 0 auto;font-size: 18px;line-height: 30px;box-sizing: border-box;}
.other-page p a{color: #d1d1d1;}

/* 影视相关案例推荐 */
/* .recommend{width: 100%;padding: 145px 0 66px;background-size: contain;background-attachment: fixed;} */

/* .recommend .sticky-wrapper{position: sticky;position: -webkit-sticky;top: 0;width: 100%;height: 100vh;overflow: hidden;} */
/* #sticky-wrapper canvas{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);} */
.recommend{width: 100%;text-align: center;padding: 180px 0 0;background-color: #000;margin-bottom: -100vh;position: relative;z-index: 10;}
.recommend .recommend-container{width: 100%;}
.recommend-container .recommend-content{position: sticky;position: -webkit-sticky;width: 100%;height: 100vh;top: 0;overflow: hidden;}
.recommend-content .recommend-video{display: block;margin: 0 auto;width: 100%;position: absolute;bottom: 0;left: 0;}
.recommend .recommend-title{font-size: 58px;font-weight: lighter;color: #fff;line-height: 1.1724;position: relative;z-index: 20;}
.recommend-title .title-en{font-size: 36px;}
.recommend .recommend-list{width: 100%;max-width: 1920px;margin: 0 auto;display: flex;flex-wrap: wrap;overflow: hidden;padding-top: 70px;}
.recommend-list .recommend-item{position: relative;width: calc((100% - 2px) / 3);margin-bottom: 1px;margin-right: 1px;}
.recommend-list .recommend-item:nth-last-child(1), .recommend-list .recommend-item:nth-last-child(2), .recommend-list .recommend-item:nth-last-child(3){margin-bottom: 0;}
.recommend-list .recommend-item:nth-child(3n){margin-right: 0;}
.recommend-item a{display: block;width: 100%;overflow: hidden;}
.recommend-item a .recommend-mask{position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 5;}
.recommend-item a .film-logo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: opacity .5s;z-index: 15;}
.film-logo img{width: 100%;}
.film-logo p{position: absolute;width: 100%;left: 0;top: 70%;font-size: 18px;line-height: 28px;color: #fff;padding: 0 20px;box-sizing: border-box;}
.recommend-item a .recommend-img{position: relative;width: 100%;height: auto;opacity: 0.1;transition: .5s;z-index: 10;mix-blend-mode: luminosity;}
.recommend-item a .hover-video{position: absolute;width: 100%;top: 0;left: 0;outline: none;display: none;z-index: 20;}
.recommend-item a:hover .film-logo{opacity: 0;}
.recommend-item a:hover .recommend-img{opacity: 0.9;mix-blend-mode: normal;}
.recommend .more{display: block;font-size: 36px;font-weight: lighter;color: #fff;width: 100%;max-width: 1920px;height: 65px;line-height: 58px;background-color: #7d0000;margin: 0 auto;position: relative;z-index: 5;}

/* 商业摄影详情页 */

/* 平面设计详情页 */

/* 网站设计详情页 */
  /* 网站案例浏览 */
#website-case-browsing{position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 9999;display: none;}

#website-case-browsing.iPad{background: rgba(0,0,0,0.9) url(../images/websiteDesignDetail/case-bg-iPad.png) no-repeat center;}
#website-case-browsing.iPad .case-container{width: 1179px;height: 883px;position: absolute;top: 50%;left: 50%;margin: -439.5px 0 0 -588.5px;}
#website-case-browsing.iPad .case-container iframe{width: 1179px;height: 883px;background-color: #fff;border: none;outline: 0;border-radius: 14px;}

#website-case-browsing.iPhone{background: rgba(0,0,0,0.9) url(../images/websiteDesignDetail/case-bg-iPhone.png) no-repeat center;}
#website-case-browsing.iPhone .case-container{width: 452px;height: 979px;position: absolute;top: 50%;left: 50%;margin: -489.5px 0 0 -226px;}
#website-case-browsing.iPhone .case-container iframe{width: 452px;height: 979px;background-color: #fff;border: none;outline: 0;padding-top: 37px;box-sizing: border-box;border-radius: 50px;}

#iframe::-webkit-scrollbar{width: 8px;height: 8px;background-color: #f5f5f5;}
#iframe::-webkit-scrollbar-thumb{border-radius: 10px;box-shadow: inset 0 0 6px rgba(0,0,0,.3);-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background: #97d6df;}
#iframe::-webkit-scrollbar-track{box-shadow: inset 0 0 6px rgba(0,0,0,0.3);-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);border-radius: 10px;background-color: #f5f5f5;}

#website-case-browsing .close-btn{position: absolute;top: 0;right: 0;width: 50px;height: 50px;background: url(../images/websiteDesignDetail/icon.png) no-repeat 17px -239px;text-indent: -9999px;background-color: #7d0000;}
#website-case-browsing .close-layer{width: 100%;height: 100%;}

.recommend-list .film-item{width: calc((100% - 40px) / 3);border: 1px solid #5f3f16;box-sizing: border-box;transition: .5s;margin-right: 20px;}
.recommend-list .film-item:hover{transform: translateY(-20px);}
.recommend-list .film-item .website-info{position: absolute;width: 100%;bottom:0;left: 0;background-color: #000;z-index: 15;display: none;padding-bottom: 10px;}
.website-info img:nth-child(1){max-width: 100%;}
.website-info h2.customer-name{display: none;}
.website-info p{width: 100%;font-size: 18px;color: #fefefe;font-weight: lighter;line-height: 28px;padding: 0 20px;box-sizing: border-box;text-align: center;}
.website-info p:nth-of-type(1){position: absolute;top: 57%;left: 0;}
.website-info p:nth-of-type(2){position: absolute;top: 81%;left: 0;}
.website-info p:nth-of-type(2) img{margin-right: 6px;vertical-align: bottom;}
.recommend-list .film-item a .film-img{width: 100%;position: relative;z-index: 10;}
.film-item .website-shadow{position: absolute;width: 100%;top: calc(100% - 22px);left: 0;z-index: 8;opacity: 0;transition: .5s;}
.film-item:hover .website-shadow{opacity: 1;}

/* 回到顶部 */
.back-top{position: fixed;right: 50px;bottom: 50px;z-index: 9999;display: none;}

/* hl代码添加 */
.calendar .date-item {font-family: '微软雅黑','Microsoft YaHei';}