@charset "utf-8";
/*
 * Dislyte 海外官网 · 角色详情页（PC）
 * 复用 home_pc.css 的 #page-root / header / footer 骨架，本文件只覆盖位置与本页内容
 * 第 1 段：源站 css/characterlist.css 原值（已去注释、素材路径改为项目 img/，区块背景改由 config 驱动）
 * 第 2 段：适配层——页内滚动容器、首页 index.css 同名规则的残留还原、Swiper 11 兼容
 * 由 .a2web/replicate/build-css-character.mjs 生成，改源站值请改脚本后重跑
 */

/* ================= 源站样式 ================= */
.part1{height: 871px; background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}
.part2{height: 1035px; background-size: cover;background-repeat: no-repeat;background-position: 50% 50%; overflow: hidden;}
.part1 .center{width: 1400px; position: relative; margin: 0 auto;}
.part1 .center .swiper_box{top: 100px;}
.part1 .center #mySwiper1{width: 1600px;}
.part1 .center #mySwiper1 .swiper_left{float: left;}
.part1 .center #mySwiper1 .swiper_right{float: right; width: 614px;}
.part1 .center #mySwiper1 .swiper_left img{display: inline-block; width: 820px; height: 840px;}
.part1 .center #mySwiper1 .swiper_right .grade_box{display: flex; align-items: center; justify-content: space-between; margin-top: 85px;}
.part1 .center #mySwiper1 .swiper_right span:nth-of-type(1){display: block; width: 97px; height: 24px; background-image: url(../img/common/characterlist/grade.webp); margin-right: 20px;}
.part1 .center #mySwiper1 .swiper_right span:nth-of-type(2){display: block; width: 79px; height: 79px; background-image: url(../img/common/characterlist/camp.webp);}
.part1 .center #mySwiper1 .swiper_right .p1{color: #fff; font-size: 100px; font-family: 'IMPACT';}
.part1 .center #mySwiper1 .swiper_right .p2{color: #6fffdb; font-size: 35px; font-family: 'IMPACT';}
.part1 .center #mySwiper1 .swiper_right .p3{color: #fff; font-size: 30px; font-family: 'Helvetica'; margin-top: 130px;}
.part1 .center #mySwiper1 .swiper_right .p4{color: #fff; font-size: 30px; font-family: 'Helvetica'; margin-top: 34px;}
.part1 .center #mySwiper1 .swiper_right .p5{color: #fff; font-size: 30px; font-family: 'Helvetica'; margin-top: 39px;}
.part1 .center #mySwiper1 .swiper_right .p6{margin-top: 110px;}
.part1 .center #mySwiper1 .swiper_right .p6 a{display: block; width: 211px; height: 40px; background-image: url(../img/en/characterlist/download.webp);}
.part1 .part1-button-prev1{width: 56px !important; height: 56px !important; background-image: url(../img/common/characterlist/left.webp); transition: all .3s; left: 0 !important;top: 383px !important;left: auto;}
.part1 .part1-button-next1{width: 56px !important; height: 56px !important; background-image: url(../img/common/characterlist/right.webp); transition: all .3s; left: 817px !important;top: 383px !important;right: auto;}
.fadeline .fade{transform: translateX(0);opacity: 1;transition: all .4s;}
.fadeline .fade1{transform: translateX(0);opacity: 1;transition: all .4s;}
.fadeline .fade2{transform: translateX(0);opacity: 1;transition: all .6s;}
.fadeline .fade3{transform: translateX(0);opacity: 1;transition: all .8s;}
.fadeline .fade4{transform: translateX(0);opacity: 1;transition: all  1s;}
.fadeline .fade5{transform: translateX(0);opacity: 1;transition: all  1.2s;}
.fadeline .fade6{transform: translateX(0);opacity: 1;transition: all  1.4s;}
.fadeline .fade7{transform: translateX(0);opacity: 1;transition: all  .2s;}
.fade{transform: translateX(100px);opacity: 0;transition: all .4s;}
.fade1{transform: translateX(650px);opacity: 1;transition: all .4s;}
.fade2{transform: translateX(650px);opacity: 1;transition: all .6s;}
.fade3{transform: translateX(650px);opacity: 1;transition: all .8s;}
.fade4{transform: translateX(650px);opacity: 1;transition: all  1s;}
.fade5{transform: translateX(650px);opacity: 1;transition: all  1.2s;}
.fade6{transform: translateX(650px);opacity: 1;transition: all  1.4s;}
.fade7{transform: translateX(650px);opacity: 1;transition: all  .2s;}
.part2 .center{width: 1400px; height: 1700px; position: relative; margin: 0 auto;}
.part2 .center .biography_box,.skill_box,.more_box{margin-top: 125px;}
.part2 .center .biography_box .title1{display: block;}
.part2 .center .biography_box .Info_box{text-align: left;}
.part2 .center .biography_box p{margin-top: 50px; display: flex; justify-content: space-between; align-items: center;}
.part2 .center .biography_box p span{width: 700px; font-size: 40px; font-family: 'IMPACT'; color: #1e2731;}
.part2 .center .biography_box p span em:nth-of-type(1){display: inline-block; width: 8px; height: 35px; margin-right: 15px; background-color: #8f79ff;}
.part2 .center .skill_box .title2{display: block;}
.part2 .center .skill_box .p1{color: #1e2731; font-size: 30px; font-family: 'Helvetica'; margin-top: 30px;}
.part2 .center .skill_box ul{margin-top: 50px;}
.part2 .center .skill_box ul li{display: flex; align-items: center; margin: 70px 0 70px 0;}
.part2 .center .skill_box ul li .skill_img{width: 127px; height: 117px; margin-right: 50px;}
.part2 .center .skill_box ul li .skill_img img{display: block; width: 127px; height: 117px;}
.part2 .center .skill_box ul li .skill_introduce p:nth-of-type(1){font-size: 50px; color: #1e2731; font-family: 'IMPACT';}
.part2 .center .skill_box ul li .skill_introduce p:nth-of-type(2){font-size: 25px; color: #1e2731; font-family: 'Helvetica';}
.part2 .center .skill_box ul li .skill_introduce p:nth-of-type(3){font-size: 20px; color: #5f6285; font-family: 'Helvetica';}
.part2 .center .more_box .title3{display: block;}
.part2 .center #mySwiper2{width: 1400px; margin-top: 70px;}
.part2 .center #mySwiper2 .img_list{display: flex; flex-direction: column; align-items: center;}
.part2 .center #mySwiper2 .img_list img{display: block; width: 112px; height: 104px;}
.part2 .center #mySwiper2 .img_list span{display: block;font-size: 20px;color: #1a1a32;font-family: 'Helvetica'; margin-top: 5px;}
.part2 .part2-button-prev1{width: 37px !important; height: 37px !important; background-image: url(../img/common/characterlist/left2.webp); transition: all .3s; left: 0 !important;top: 57px !important;left: auto;}
.part2 .part2-button-next1{width: 36px !important; height: 37px !important; background-image: url(../img/common/characterlist/right2.webp); transition: all .3s; right: 0 !important;top: 57px !important;right: auto;}
.part2 .center .more_esper{display: block; width: 201px; height: 40px; background-image: url(../img/common/characterlist/more_esper.webp); margin: 50px auto 0; text-align: center; line-height: 40px; color: #fff; font-size: 26px; font-family: 'IMPACT';}

/* ================= 适配层 ================= */
.sub_scroll { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-x: hidden; overflow-y: auto; z-index: 1; background-color: #8f79fe; }
/* 首页 index.css 的 .part1 .center / .part3 规则在子页的残留：源站子页未加载 index.css，这里还原 */
.part1 .center { z-index: auto; }
.part3 { height: auto; overflow: visible; }
.part2 .center .title2, .part2 .center .title3 { transform: none; opacity: 1; transition: none; } /* 首页 index.css 同名标题入场动画 */
/* Swiper 11：容器同时带 .swiper；源站箭头是背景图，隐藏 11 版默认字形 */
.part2-button-prev1::after, .part2-button-next1::after { display: none; }