:root { --width:1920*100vw
; }

body { min-width: auto; overflow-x: none; }

.zt_kv { background: url("/sw/csby2/images/kv.png") no-repeat center; background-size: auto 100%; height: calc(635 / var(--width)); }

.part01 { width: 100%; height: calc(1066 /var(--width)); position: relative; overflow: hidden; }

.part01 .part01-dress { width: calc(1920 /var(--width)); height: calc(1066 /var(--width)); position: absolute; background: url(/sw/csby2/images/bg-partner-dress.png) 0 0/100% no-repeat; top: 0; left: 0; }

.part01 .part01-cent { height: calc(1066 /var(--width)); width: 100%; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: calc(0 /var(--width)); }

.part01 .part01-title { position: absolute; top: calc(42 / var(--width)); text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; z-index: 10; }

.part01 .part01-title .btn { display: inline-block; vertical-align: middle; width: calc(360 / var(--width)); height: calc(70 / var(--width)); background: no-repeat center; background-size: auto 100%; margin: 0 calc(32 / var(--width)); }

.part01 .part01-title .btn:hover { opacity: 0.9; }

.part01 .part01-title .btn:nth-of-type(1) { background-image: url("/sw/csby2/images/btn1.png"); }

.part01 .part01-title .btn:nth-of-type(2) { background-image: url("/sw/csby2/images/btn2.png"); }

.part01 .part01-title .btn:nth-of-type(3) { background-image: url("/sw/csby2/images/btn3.png"); }

.part01 .part01_switch { position: absolute; top: calc(166 /var(--width)); width: calc(500 /var(--width)); left: 50%; margin-left: calc(-250 /var(--width)); height: calc(80 /var(--width)); display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 9; }

.part01 .part01_switch .btn { background: url(/sw/csby2/images/spr-hero.png) center top no-repeat; background-size: calc(494 /var(--width)) auto; height: calc(110 /var(--width)); display: block; width: calc(247 /var(--width)); text-indent: -999em; cursor: pointer; }

.part01 .part01_switch .btn:nth-child(1) { background-position: 0 0; }

.part01 .part01_switch .btn:nth-child(1).on, .part01 .part01_switch .btn:nth-child(1):hover { background-position: 0 calc(-110 / var(--width)); }

.part01 .part01_switch .btn:nth-child(2) { background-position: calc(-247 /var(--width)) 0; }

.part01 .part01_switch .btn:nth-child(2).on, .part01 .part01_switch .btn:nth-child(2):hover { background-position: calc(-247 /var(--width)) calc(-110 /var(--width)); }

.item01-list { width: 100%; height: 100%; position: relative; }

.item01-list .item-hero { width: 100%; height: 100%; position: relative; }

.item01-list .swiper { width: 100%; height: 100%; }

.item01-list .nano-bt { position: relative; z-index: 5; position: absolute; top: calc(370 /var(--width)); left: 50%; margin-left: calc(-540 /var(--width)); }

.item01-list .nano-bt li { width: calc(120 /var(--width)); height: calc(140 /var(--width)); background: url("/sw/csby2/images/box-roles.png") center top no-repeat; background-size: calc(120 /var(--width)) auto; position: relative; cursor: pointer; margin-top: calc(-15 /var(--width)); }

.item01-list .nano-bt li.on, .item01-list .nano-bt li:hover { background-position: 0 calc(-140 /var(--width)); }

.item01-list .nano-bt li img { width: 100%; }

.item01-list .nano-bt li:nth-child(2n) { margin-left: calc(-60 /var(--width)); }

.item01-list .text-box { width: calc(610 /var(--width)); height: calc(631 /var(--width)); background: url("/sw/csby2/images/bgbox.png") center calc(80 /var(--width)) no-repeat; background-size: 100% auto; position: absolute; left: 50%; top: 0; margin: calc(300 /var(--width)) auto 0 calc(-380 /var(--width)); }

.item01-list .text-box .text01 { height: calc(90 /var(--width)); line-height: calc(70 /var(--width)); color: #2a8de1; font-weight: bold; font-size: calc(70 /var(--width)); }

.item01-list .text-box .text01 em { font-size: calc(32 /var(--width)); color: #283139; display: inline-blcok; padding-left: calc(15 /var(--width)); }

.item01-list .text-box .text02 { color: #0f3c6f; line-height: calc(24 / var(--width)); font-size: calc(16 / var(--width)); padding-bottom: calc(26 /var(--width)); }

.item01-list .text-box .scroll { overflow-y: auto; padding: 0 calc(30 /var(--width)); margin-top: calc(40 /var(--width)); height: calc(400 /var(--width)); }

.item01-list .text-box ol { color: #0f3c6f; font-size: calc(16 / var(--width)); }

.item01-list .text-box ol li { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: calc(70 / var(--width)); -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: calc(20 /var(--width)); }

.item01-list .text-box ol li .bt_ img { height: calc(70 / var(--width)); }

.item01-list .text-box ol li .infor { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; }

.item01-list .text-box .btn { background: url("/sw/csby2/images/bg.png") no-repeat center top; background-size: 100% 100%; width: calc(169 / var(--width)); height: calc(43 / var(--width)); display: block; position: absolute; color: #fff; font-size: calc(17 / var(--width)); font-weight: bold; text-align: center; line-height: calc(43 / var(--width)); bottom: calc(50 / var(--width)); right: calc(45 / var(--width)); }

.item01-list .text-box .btn:hover { opacity: 0.8; }

.item01-list .nano-img { position: absolute; left: 50%; margin-left: calc(180 /var(--width)); top: calc(320 /var(--width)); width: calc(640 /var(--width)); height: calc(760 /var(--width)); }

.item01-list .nano-img img { width: 100%; }

.item01-list .nano-box::after { position: absolute; content: ''; width: calc(210 /var(--width)); height: calc(536 /var(--width)); display: block; left: 50%; top: calc(490 /var(--width)); margin-left: calc(670 /var(--width)); background: url(/sw/csby2/img/roles-small2.png) center center no-repeat; background-size: 100% auto; }

.item01-list .nano-box { display: none; }

.item01-list .runner-box .text-box { margin-left: calc(-220 /var(--width)); }

.item01-list .runner-box .nano-img { width: calc(560 /var(--width)); height: calc(-920 /var(--width)); margin-left: calc(-754 /var(--width)); top: calc(160 /var(--width)); z-index: -1; }

.item01-list .runner-box .nano-bt { margin-left: calc(420 /var(--width)); top: calc(300 /var(--width)); }

.item01-list .runner-box .nano-bt li { margin-top: calc(-25 /var(--width)); }

.item01-list .runner-box .nano-bt li:nth-child(2n) { margin-left: calc(60 /var(--width)); }

.item01-list .runner-box::after { position: absolute; content: ''; width: calc(254 /var(--width)); height: calc(467 /var(--width)); display: block; left: 50%; top: calc(490 /var(--width)); margin-left: calc(-880 /var(--width)); background: url(/sw/csby2/img/roles-small1.png) center center no-repeat; background-size: 100% auto; }

.part02 { width: 100%; height: calc(1522 /var(--width)); position: relative; overflow: hidden; background: url("/sw/csby2/images/bj2.png") no-repeat center top; background-size: 100% 100%; background-position: 0 0; margin-top: -8px; }

.part02 .part02-dress { width: calc(1930 /var(--width)); height: calc(1597 /var(--width)); position: absolute; background: url(/sw/csby2/images/part02-dress.png) 0 0/100% no-repeat; top: 8px; left: 0; }

.part02 .part02-cent { height: calc(1606 /var(--width)); width: calc(1200 /var(--width)); -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; top: calc(0 /var(--width)); left: 50%; margin-left: calc(-600 /var(--width)); padding-top: calc(87 / var(--width)); box-sizing: border-box; }

.part02 .part02-cent .item { padding-bottom: calc(60 / var(--width)); width: calc(1244 / var(--width)); position: relative; left: calc(-22 / var(--width)); }

.part02 .part02-cent .item .title { background: url("/sw/csby2/images/title.png") 0 0/100% no-repeat; height: calc(65 / var(--width)); width: calc(1169 / var(--width)); margin: 0 auto; background-size: 100% auto; text-align: center; color: #fff; font-size: calc(38 / var(--width)); line-height: calc(62 / var(--width)); margin-bottom: calc(40 / var(--width)); }

.part02 .part02-cent .item .box { background: url("/sw/csby2/images/item.png") 0 0/100% no-repeat; height: calc(169 / var(--width)); width: calc(267 / var(--width)); background-size: 100% auto; display: block; overflow: hidden; margin-right: calc(44 / var(--width)); margin: 0 auto; }

.part02 .part02-cent .item .box .bt { color: #fff; height: calc(43 / var(--width)); line-height: calc(43 / var(--width)); font-size: calc(24 / var(--width)); padding-left: calc(35 / var(--width)); -webkit-box-sizing: border-box; box-sizing: border-box; }

.part02 .part02-cent .item .box .img { height: calc(121 / var(--width)); width: 100%; margin: 0 auto; display: block; position: relative; background: none !important; }

.part02 .part02-cent .item .box .img img { width: calc(261 / var(--width)); height: 100%; display: block; -o-object-fit: cover; object-fit: cover; margin: 0 auto; }

.part02 .part02-cent .item .box .img::before, .part02 .part02-cent .item .box .img::after { background: url("/sw/csby2/images/item.png") 0 0/100% no-repeat; background-size: calc(267 / var(--width)) auto; content: ''; position: absolute; height: calc(54 / var(--width)); top: 50%; margin-top: calc(-27 / var(--width)); width: calc(5 / var(--width)); display: block; z-index: 1; }

.part02 .part02-cent .item .box .img::before { left: 0px; background-position: calc(0 / var(--width)) calc(-77 / var(--width)); }

.part02 .part02-cent .item .box .img::after { right: 0px; background-position: calc(-261 / var(--width)) calc(-77 / var(--width)); }

.part02 .part02-cent .item.theme { width: calc(1200 / var(--width)); left: 0px; }

.part02 .part02-cent .item.theme .title { margin-bottom: calc(30 / var(--width)); }

.part02 .part02-cent .item .thumbs .btn { background: url("/sw/csby2/images/btnhover.png") 0 0/100% no-repeat; height: calc(30 / var(--width)); width: calc(200 / var(--width)); display: block; color: #fff; line-height: calc(30 / var(--width)); text-align: center; cursor: pointer; background-size: 100% 100%; opacity: 0.8; }

.part02 .part02-cent .item .thumbs .btn:hover { background-image: url("/sw/csby2/images/btnhover.png"); opacity: 1; }

.part02 .part02-cent .item .thumbs .active .btn { background-image: url("/sw/csby2/images/btn_active.png"); opacity: 1; }

.part02 .part02-cent .item .swiper-box { padding-top: calc(12 / var(--width)); }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 { height: calc(228 / var(--width)); width: calc(600 / var(--width)); display: block; overflow: hidden; background: no-repeat center top; background-size: 100% auto; }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .img_left { width: calc(357 / var(--width)); height: 100%; position: relative; float: left; }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .img_left img { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .text-rit { float: right; width: calc(215 / var(--width)); margin-right: calc(10 / var(--width)); padding-top: calc(2 / var(--width)); height: calc(220 / var(--width)); position: relative; }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .text-rit .name { height: calc(35 / var(--width)); line-height: calc(35 / var(--width)); color: #fff; font-size: calc(18 / var(--width)); overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .text-rit .tex { height: calc(112 / var(--width)); line-height: calc(28 / var(--width)); color: #fff; font-size: calc(14 / var(--width)); overflow-y: auto; margin: calc(10 / var(--width)) 0 0 calc(22 / var(--width)); }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .text-rit .btn { position: absolute; width: calc(143 / var(--width)); height: calc(30 / var(--width)); line-height: calc(30 / var(--width)); display: block; text-align: center; color: #000; background: #fff; font-size: calc(16 / var(--width)); left: 50%; bottom: 0px; margin-left: calc(-70 / var(--width)); font-weight: bold; opacity: 0.8; }

.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .text-rit .btn:hover { opacity: 1; }

.part02 .part02-cent .item .swiper-box .box2.boxch1 { background-image: url("/sw/csby2/images/box1.png"); }

.part02 .part02-cent .item .swiper-box .box2.boxch1 .text-rit .btn { background-color: #6e3dc0; color: #000; }

.part02 .part02-cent .item .swiper-box .box2.boxch2 { background-image: url("/sw/csby2/images/box2.png"); }

.part02 .part02-cent .item .swiper-box .box2.boxch2 .text-rit .btn { background-color: #ba9d45; color: #3f2e13; }

.part02 .part02-cent .item .swiper-box .box2.boxch3 { background-image: url("/sw/csby2/images/box3.png"); }

.part02 .part02-cent .item .swiper-box .box2.boxch3 .text-rit .btn { background-color: #3dcdfe; color: #000; }

.part02 .part02-cent .item .swiper-box .box2.boxch4 { background-image: url("/sw/csby2/images/box4.png"); }

.part02 .part02-cent .item .swiper-box .box2.boxch4 .text-rit .btn { background-color: #c9c8c8; color: #000; }

.hide { display: none; }

.swiper-button-next, .swiper-button-prev { background: url("/sw/csby2/images/next.png") no-repeat center; width: calc(35/var(--width)); height: calc(35/var(--width)); border-radius: none; background-size: 100% auto; opacity: 1; cursor: pointer; }

.swiper-button-next::after, .swiper-button-prev::after { display: none; }

.swiper-button-next { right: 0px; }

.swiper-button-prev { left: 0px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

@media (max-width: 100%) { :root { --width:1920*130vh
     ; } }

/*--- animation ---*/
.part01 .text-box, .part01 .nano-img { opacity: 0; }

.part01 .nano-box .swiper-slide-active .nano-img, .part01 .runner-box .swiper-slide-active .text-box { animation: moveRight .5s .3s linear forwards; -webkit-animation: moveRight .5s .3s linear forwards; }

.part01 .nano-box .swiper-slide-active .text-box, .part01 .runner-box .swiper-slide-active .nano-img { animation: moveLeft .5s .3s linear forwards; -webkit-animation: moveLeft .5s .3s linear forwards; }

.part01 .swiper-slide-active .nano-img { animation-delay: .5s; -webkit-animation-delay: .5s; }

@keyframes moveLeft { 0% { -webkit-transform: translateX(-0.5rem); transform: translateX(-0.5rem);
    opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes moveLeft { 0% { -webkit-transform: translateX(-0.5rem);
    opacity: 0; }
  100% { -webkit-transform: translateX(0);
    opacity: 1; } }

@keyframes moveRight { 0% { -webkit-transform: translateX(0.5rem); transform: translateX(0.5rem);
    opacity: 0; }
  100% { -webkit-transform: translateX(0); transform: translateX(0);
    opacity: 1; } }

@-webkit-keyframes moveRight { 0% { -webkit-transform: translateX(0.5rem);
    opacity: 0; }
  100% { -webkit-transform: translateX(0);
    opacity: 1; } }

@keyframes moveBottom { 0% { -webkit-transform: translateY(0.5rem); transform: translateY(0.5rem);
    opacity: 0; }
  100% { -webkit-transform: translateY(0); transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes moveBottom { 0% { -webkit-transform: translateY(0.5rem);
    opacity: 0; }
  100% { -webkit-transform: translateY(0);
    opacity: 1; } }
body{min-width:100%; }
.NEW_ICO{position: absolute; color: #333; text-transform: uppercase; text-align: center; font-weight: bold;}
.item01-list .text-box .text01 .NEW_ICO{position: absolute; top: 0px;  margin-left: calc(10 / var(--width)); background: url("/sw/csby2/images/newico2.png") no-repeat center; background-size: 100% auto; font-size: calc(20 / var(--width));;height: calc(26 / var(--width)); line-height: calc(26 / var(--width));  width: calc(96 / var(--width));}
.item01-list .nano-bt li .NEW_ICO{position: absolute; bottom:  calc( 14 / var(--width)); left: 50%; margin-left: calc( -35 / var(--width));  background: url("/sw/csby2/images/newico1.png") no-repeat center; background-size: 100% auto; font-size: calc(14 / var(--width));;height: calc(18 / var(--width)); line-height: calc(18 / var(--width));  width: calc(75 / var(--width));}
.part02 .part02-cent .item .swiper-box .swiper-slide .box2 .img_left .NEW_ICO{position: absolute; top:  calc( 40 / var(--width)); right: 8%; z-index: 2;   background: url("/sw/csby2/images/newico3.png") no-repeat center; background-size: 100% auto; font-size: calc(14 / var(--width));;height: calc(18 / var(--width)); line-height: calc(18 / var(--width));  width: calc(71 / var(--width));}
/* 人物角色切换上下页 */
.item01-list .nano-bt{top: 50% !important; transform: translateY(-40%);}
.item01-list .nano-bt .scroll_{overflow: hidden;position: relative; top: 0px; left: 0; padding: calc(25/var(--width)) 0; height: calc(680/var(--width)); }
.item01-list .nano-bt ul{position: relative; top: 0px; left: 0;}
.item01-list .nano-bt .next, 
.item01-list .nano-bt .prev { background: url("/sw/csby2/images/next.png") no-repeat center;  width: calc(35/var(--width)); height: calc(35/var(--width)); border-radius: none;  background-size: 100% auto; opacity: 1; cursor: pointer;position: absolute; left: 50%;}
.item01-list .nano-bt .prev { top:  calc(-50/var(--width)); margin-left:  calc(-48/var(--width));-webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }
.item01-list .nano-bt .next { bottom:  calc(-30/var(--width));margin-left:  calc(10/var(--width)); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
.item01-list .nano-box .nano-bt{left: 45%;}
.item01-list .nano-box .nano-bt ul{padding-left: calc(60 /var(--width));}
.item01-list .nano-box .nano-bt .scroll_{height: calc(726/var(--width));  }
.item01-list .nano-box .nano-bt .prev{top: calc(-40/var(--width)); margin-left: calc(10/var(--width));}
.item01-list .nano-box .nano-bt .next{margin-left: calc(-50/var(--width)); bottom: calc(-37/var(--width));}
/* s1  黎明公测主题 */
.zt_theme {background: #e4edf0;}
.zt_theme .zt_kv{height: calc(529 / var(--width));}
.zt_theme .part01{height: calc(1062 /var(--width));}
.zt_theme .part01 .part01-cent{height: calc(1062 / var(--width));}
.zt_theme .item01-list .text-box .text01{color: #a567ff;}
.zt_theme .part02{height: calc(1530 /var(--width));} 
.zt_theme .part02 .part02-dress{display: none;}
.zt_theme .part02 .part02-cent .item .box{height: calc(173 / var(--width));  width: calc(261 / var(--width));}
.zt_theme .part02 .part02-cent .item .box .bt{height: calc(35 / var(--width)); color: #8af0d9;font-size: calc(22 / var(--width));line-height: calc(38 / var(--width));}
.zt_theme .part02 .part02-cent .item .box .img{height: calc(135 / var(--width));width: calc(260 / var(--width)); clip-path: polygon(100% 0, 100% 95%, 97% 100%, 0% 100%, 0% 0%);}