.studio{width: 1400px;margin: 80px auto;}
.studio-top{width: 1400px;height: 520px;margin: 52px auto 20px;position: relative;border-radius: 30px;transition: .2s;transition-delay: .5s;}
.studio-top:hover{box-shadow: 0px 10px 30px 0px rgba(34,87,179,0.1);}
.studio-trailer{position: absolute;left: 0;top: 0;width: 100%;height: 520px;background: linear-gradient( 180deg, #EFF7FF 0%, #FFFFFF 100%);transition: .5s;
  clip-path: path('M30,0 L712.288468,0 C728.85701,-3.04359188e-15 742.288468,13.4314575 742.288468,30 C742.288468,32.270422 742.030729,34.533506 741.520203,36.7457852 L635.366357,496.745785 C632.225142,510.357718 620.104301,520 606.134621,520 L30,520 C13.4314575,520 2.02906125e-15,506.568542 0,490 L0,30 C-2.02906125e-15,13.4314575 13.4314575,3.04359188e-15 30,0 Z');
}
.studio-trailer::before{content: '';position: absolute;width: 750px;height: 520px;border-radius: 30px;
background: url(//st-static.699pic.com/images/studio/trailer.jpg) no-repeat 0 0 / 1500px 520px;transition: .3s;}

.studio-top-content{position: relative;padding-left: 70px;padding-top: 126px;color: #FFFFFF;}
.studio-top-content h2{font-size: 40px;line-height: 56px;}
.studio-top-content h3{font-weight: 400;font-size: 20px;color: #FFFFFF;line-height: 30px;letter-spacing: 2px;}
.studio-top-content hr{width: 30px;height: 3px;background: linear-gradient( 270deg, rgba(255,255,255,0.4) 0%, #FFFFFF 100%);
  border-radius: 3px;margin: 30px 0 32px;border: none;}
.studio-top-content p{font-size: 16px;color: #FFFFFF;line-height: 24px;text-shadow: 0px 2px 8px rgba(0,0,0,0.5);margin-bottom: 30px;}
.studio-top-btn{width: 180px;height: 40px;background: linear-gradient( 225deg, #6580FF 0%, #39AEFF 54%, #45C2FF 100%);
  border-radius: 22px;font-size: 16px;color: #FFFFFF;line-height: 40px;text-align: center;cursor: pointer;}
.studio-top-btn:hover{background: linear-gradient( -225deg, #6580FF 0%, #39AEFF 54%, #45C2FF 100%);}

.studio-top-case{margin-right: 97px;padding-top: 61px;text-align: center;font-size: 16px;color: #9598A9;line-height: 24px;}
.studio-top-case .swiper{width: 675px;display: none;}
.studio-top-case .swiper-slide{width: 555px;height: 310px;border-radius: 20px;position: relative;}
.studio-top-case .swiper-slide video{width: 100%;height: 100%;border-radius: 20px;object-fit: cover;}
.video-pause{position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;border-radius: 50%;display: block;width: 47px;height: 47px;background: rgba(0,0,0,0.4);backdrop-filter: blur(5px);font-size: 24px;color: #fff;line-height: 47px;text-align: center;}
.studio-top-case h5{font-size: 22px;font-weight: bold;color: #3D404B;line-height: 30px;margin: 20px 0 10px;}

.studio-trailer:hover{z-index: 2;clip-path: path('M30,0 L1371.28847,-8.17124146e-14 C1387.85701,-8.47560065e-14 1401.28847,13.4314575 1401.28847,30 C1401.28847,32.270422 1401.03073,34.533506 1400.5202,36.7457852 L1400,490 C1400,506.568542 1386.56854,520 1370,520 L30,520 C13.4314575,520 2.02906125e-15,506.568542 0,490 L0,30 C-2.02906125e-15,13.4314575 13.4314575,3.04359188e-15 30,0 Z');}
.studio-trailer:hover::before{width: 530px;background-position-x: -73px;}
.studio-trailer:hover .swiper,.studio-tvc:hover .swiper{display: block;animation: swiperShow .5s forwards;}

@keyframes swiperShow {
  0%{opacity: 0;transform: scale(0);}
  100%{opacity: 1;transform: scale(1);}
}


.studio-tvc{position: absolute;width: 100%;height: 520px;right: 0;top: 0;background: linear-gradient( 180deg, #EFF7FF 0%, #FFFFFF 100%);transition: .5s;
  clip-path: path('M793.865379,0 L1370,0 C1386.56854,-3.04359188e-15 1400,13.4314575 1400,30 L1400,490 C1400,506.568542 1386.56854,520 1370,520 L687.711532,520 C671.14299,520 657.711532,506.568542 657.711532,490 C657.711532,487.729578 657.969271,485.466494 658.479797,483.254215 L764.633643,23.2542148 C767.774858,9.64228212 779.895699,2.56618849e-15 793.865379,0 Z');}
.studio-tvc::before{content: '';position: absolute;right: 0;width: 750px;height: 520px;border-radius: 30px;
background: url(//st-static.699pic.com/images/studio/trailer.jpg) no-repeat -750px 0 / 1500px 520px;transition: .3s;}
.studio-tvc:hover{z-index: 2;clip-path: path('M136.865379,0 L1372,0 C1388.56854,-3.04359188e-15 1402,13.4314575 1402,30 L1402,490 C1402,506.568542 1388.56854,520 1372,520 L30,520 C14.14299,520 0,506.568542 0,490 C0,487.729578 0,485.466494 0,483.254215 L-3.55271368e-15,29 C-5.58177493e-15,13.4314575 13.4314575,3.04359188e-15 30,0 Z');}
.studio-tvc:hover::before{width: 530px;}
.studio-tvc .studio-top-content{text-align: right;padding: 126px 70px 0 0;}
.studio-tvc .studio-top-case{margin-left: 97px;margin-right: 0;}
.trailer-prev,.tvc-prev{position: absolute;left: 0;top: 0;height: 100%;width: 90px;background: transparent;z-index: 1;}
.trailer-next,.tvc-next{position: absolute;right: 0;top: 0;height: 100%;width: 90px;background: transparent;z-index: 1;}



.studio-bottom{width: 1400px;}
.studio-bottom-nav{margin-right: 20px;}
.studio-bottom-nav-item{width: 210px;height: 155px;
  border-radius: 30px;text-align: center;box-sizing: border-box;padding-top: 42px;}
.studio-bottom-nav-item+.studio-bottom-nav-item{margin-top: 20px;}
.studio-bottom-nav-item h5{font-weight: 400;font-size: 30px;color: #3D404B;line-height: 42px;}
.studio-bottom-nav-item p{font-size: 16px;color: #9598A9;line-height: 22px;}
.studio-bottom-nav-item hr{width: 172px;height: 1px;background: linear-gradient(to right, #45C2FF, #39AEFF, #6580FF);
  margin-top: 14px;border: none;display: none;}
.studio-bottom-nav-item.active{background: radial-gradient( circle at center, #D8F4FF 0%, #FFFFFF 50%);}
.studio-bottom-nav-item.active hr{display: block;}

.studio-bottom-body-list{display: none;}
.studio-bottom-body-list.active{display: block;}
.studio-bottom-body-item{width: 210px;height: 330px;background: #FFFFFF;box-shadow: 0px 10px 30px 0px rgba(34,87,179,0.1);
  border-radius: 30px;position: relative;transition: .3s;}
.studio-bottom-body-item+.studio-bottom-body-item{margin-left: 20px;}

.studio-bottom-body-item-cont{font-size: 20px;color: #3D404B;line-height: 28px;display: flex;flex-direction: column;
  align-items: center;justify-content: center;height: 100%;box-sizing: border-box;position: relative;z-index: 1;}
.studio-bottom-body-item-cont i{display: block;width: 53px;height: 61px;background: url(//st-static.699pic.com/images/studio/print_logo.png) no-repeat 0 0 / 275px 61px;}
.studio-bottom-body-item-cont h5{width: 110px;height: 34px;font-weight: 400;font-size: 16px;line-height: 34px;text-align: center;
  background: linear-gradient( 225deg, #FFF5DF 0%, #FFDDC2 100%, #FFDDC2 100%);border-radius: 17px 4px 17px 17px;}
.studio-bottom-body-item-cont p{margin: 10px 0 20px;}

.studio-bottom-body-item-img{position: absolute;top: 0;right: 0;width: 310px;height: 100%;opacity: 0;visibility: hidden;transition: .3s;transition-delay: .3s;
  background: url(//st-static.699pic.com/images/studio/tvc_act_bg.png) no-repeat 0 0 / 310px 1320px;border-radius: 0 30px 30px 0;}

.studio-bottom-body-item-2 i{width: 57px;background-position-x: -60px;}
.studio-bottom-body-item-2 h5{background: linear-gradient( 225deg, #FFF7ED 0%, #FFF3B8 100%, #FFDDC2 100%);}
.studio-bottom-body-item-2 .studio-bottom-body-item-img{background-position-y: -330px;}
.studio-bottom-body-item-3 i{width: 90px;background-position-x: -124px;}
.studio-bottom-body-item-3 h5{width: 90px;background: linear-gradient( 225deg, #E2EFFF 0%, #CBEEFF 100%, #FFDDC2 100%);}
.studio-bottom-body-item-3 .studio-bottom-body-item-img{background-position-y: -660px;}
.studio-bottom-body-item-4 i{background-position-x: -222px;}
.studio-bottom-body-item-4 h5{background: linear-gradient( 225deg, #F9FFE8 0%, #FFEDDE 100%, #FFDDC2 100%);}
.studio-bottom-body-item-4 .studio-bottom-body-item-img{background-position-y: -990px;}
.short-cont i{width: 90px;height: 90px;background: url(//st-static.699pic.com/images/studio/print_logo_2.png) no-repeat 0 0 / 360px 90px;}
.studio-bottom-body-item-6 i{background-position-x: -90px;}
.studio-bottom-body-item-7 i{background-position-x: -180px;}
.studio-bottom-body-item-8 i{background-position-x: -270px;}
.short-cont p{margin-top: -10px;}
.studio-bottom-body-item-5 h5{width: 130px;background: linear-gradient( 225deg, #FFF1FA 0%, #FFDEDE 100%, #FFDDC2 100%);}
.studio-bottom-body-item-6 h5{width: 150px;background: linear-gradient( 225deg, #ECF7FF 0%, #C7D4FF 100%, #FFDDC2 100%);}
.studio-bottom-body-item-7 h5{width: 160px;background: linear-gradient( 225deg, #E2F1FF 0%, #C6F1F5 100%, #FFDDC2 100%);}
.studio-bottom-body-item-8 h5{width: 170px;background: linear-gradient( 225deg, #FFFCE8 0%, #FFEADE 100%, #FFDDC2 100%);}
.studio-bottom-body-item .short-cont h6{display: none;font-size: 14px;color: #9598A9;line-height: 20px;font-weight: 400;}
.studio-bottom-body-item .short-cont::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 244px;border-radius: 30px 30px 0 0;
  background: url(//st-static.699pic.com/images/studio/short_act_bg.png) no-repeat 0 0 / 1920px 244px;visibility: hidden;opacity: 0;transition: .3s;}
.studio-bottom-body-item-6 .short-cont::before{background-position-x: -480px;}
.studio-bottom-body-item-7 .short-cont::before{background-position-x: -960px;}
.studio-bottom-body-item-8 .short-cont::before{background-position-x: -1440px;}

.studio-bottom-body-item.active{width: 480px;}
.studio-bottom-body-item.active .studio-bottom-body-item-cont{width: 264px;}
.studio-bottom-body-item.active .studio-bottom-body-item-img{visibility: visible;opacity: 1;}


.studio-bottom-body-item.active .short-cont{padding-top: 257px;width: 100%;}
.studio-bottom-body-item.active .short-cont i{display: none;}
.studio-bottom-body-item.active .short-cont p{margin: 0 0 4px;}
.studio-bottom-body-item.active .short-cont h5{display: none;}
.studio-bottom-body-item.active .short-cont h6{display: block;}
.studio-bottom-body-item.active .short-cont::before{visibility: visible;opacity: 1;}
.swiper-content-item{display: none;}
.swiper-content-item.active{display: block}
.studio-more{width: 425px;height: 44px;font-size: 16px;color: #FFFFFF;line-height: 44px;text-align: center;cursor: pointer;
  background: linear-gradient( 225deg, #6580FF 0%, #39AEFF 54%, #45C2FF 100%);border-radius: 25px;margin: 40px auto 0;}
.studio-more:hover{background: linear-gradient(-225deg, #6580FF 0%, #39AEFF 54%, #45C2FF 100%);}

.studio[data-page="183"] .studio-trailer,.studio[data-page="183"] .studio-tvc{background: linear-gradient( 180deg, #293F37 0%, #2B2F31 100%);
  box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.1);}
.studio[data-page="183"] .studio-top-case{color: #999;}
.studio[data-page="183"] .studio-top-case h5{color: #fff;}
.studio[data-page="183"] .studio-top-btn{background: linear-gradient( 270deg, #00CBE1 0%, #15CC8F 100%);}
.studio[data-page="183"] .studio-bottom-nav-item.active{background: radial-gradient( circle at center, #2F453D 0%, #242729 50%);}
.studio[data-page="183"] .studio-bottom-nav-item hr{background: linear-gradient(to right, #86DE9B, #33BAFF);}
.studio[data-page="183"] .studio-bottom-nav-item h5{color: #fff;}
.studio[data-page="183"] .studio-bottom-nav-item p{color: #999;}
.studio[data-page="183"] .studio-bottom-body-item{background: #2B2F31;}
.studio[data-page="183"] .studio-bottom-body-item-cont{color: #fff;}
.studio[data-page="183"] .studio-bottom-body-item-cont h5{background: linear-gradient( 225deg, #6C5C38 0%, #513B32 100%, #FFDDC2 100%);}
.studio[data-page="183"] .studio-bottom-body-item-2 h5{background: linear-gradient( 225deg, #89745A 0%, #4A432C 100%, #FFDDC2 100%);}
.studio[data-page="183"] .studio-bottom-body-item-3 h5{background: linear-gradient( 225deg, #516A86 0%, #334148 100%, #FFDDC2 100%);}
.studio[data-page="183"] .studio-bottom-body-item-4 h5{background: linear-gradient( 225deg, #777751 0%, #5E4E40 100%, #FFDDC2 100%);}
.studio[data-page="183"] .short-cont h5{background: linear-gradient( 270deg, #345356 0%, #2F453E 100%);}
.studio[data-page="183"] .studio-bottom-body-item-img{background-image: url(//st-static.699pic.com/images/studio/v_tvc_act_bg.png);}
.studio[data-page="183"] .studio-bottom-body-item.active .short-cont::before{background-image: url(//st-static.699pic.com/images/studio/v_short_act_bg.png);}
.studio[data-page="183"] .short-cont i{background-image: url(//st-static.699pic.com/images/studio/v_print_logo_2.png);}
.studio[data-page="183"] .studio-more{background: linear-gradient( 270deg, #00CBE1 0%, #15CC8F 100%);}
.studio[data-page="183"] .studio-more:hover,.studio[data-page="183"] .studio-top-btn:hover{background: linear-gradient(270deg, #00A4B7 0%, #00BC7D 100%);}
.studio[data-page="183"] .module-title-common2{font-weight: 600;font-size: 30px;color: #FFFFFF;line-height: 42px;text-align: center;}
.studio[data-page="183"] .module-title-text i{display: none;}


@media screen and (max-width: 1500px) {
  .studio{width: 1200px;}
  .studio-top{margin-top: 30px;transform: scale(0.85);transform-origin: 0 0;}
  .studio-bottom{margin-top: -75px;transform: scale(0.85);transform-origin: 0 0;}
  .studio-more{margin-top: 0;}
}