@import url('../../font_sourse/font.css');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

.container{
    min-width: 100%;
    position: relative;
    height: 100vh;
    width: 90%;
    background: url(../images/背景图片.jpg) no-repeat center;
    background-size: 100% 100%;
    margin: 0 auto;
    box-shadow: 0 0 8px 2px rgb(88, 86, 86);
}

/* 顶部区域 start */
.container .topArea{
    position: absolute;
    top: 0;
    right: calc(45 / 1440 * 100%);
    width: calc(1140 / 1440 * 100%);
    height: calc(204 / 1024 * 100%);
}

.topArea .topTitle{
    position: absolute;
    top: 8px;
    left: calc(346 / 1140 * 100%);
    width: calc(245 / 1140 * 100%);
    height: auto;
    object-fit: contain;
}

.topArea .leftTip {
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(25 / 204 * 100%);
    width: 25px;
    height: 72px;
    background: url(../images/顶部竖向底图标签.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftTip p {
    writing-mode: vertical-lr;
    text-align: center;
    color: rgba(77, 63, 63, 1);
    font-size: 12px;
    font-weight: bold;
    font-family: "Source Han Serif SC", "Songti SC", "SimSun", serif;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 2px;
}

.topArea .rightTip {
    display: block;
    position: absolute;
    right: calc(248 / 1140 * 100%);
    bottom: 0;
    width: 25px;
    height: 72px;
    background: url(../images/顶部竖向底图标签.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rightTip p {
    writing-mode: vertical-lr;
    text-align: center;
    color: rgba(77, 63, 63, 1);
    font-size: 12px;
    font-weight: bold;
    font-family: "Source Han Serif SC", "Songti SC", "SimSun", serif;
    margin: 0;
    line-height: 1.4;
    letter-spacing: 2px;
}

.topArea .musicBtn{
    position: absolute;
    right: 0;
    top: calc(63 / 204 * 100%);
    width: 47px;
    height: 46px;
    object-fit: contain;
    cursor: pointer;
}
/* 顶部区域 end */

/* 主要内容区域 start */
.mainArea{
    position: absolute;
    bottom: calc(40 / 1024 * 100%);
    right: calc(44 / 1440 * 100%);
    width: calc(1367 / 1440 * 100%);
    height: calc(538 / 1024 * 100%);
}

/* 梳理区域 start */
.mainArea .distinctArea{
    position: absolute;
    top: 0;
    right: calc(250 / 1367 * 100%);;
    width: calc(700 / 1367 * 100%);;
    height: calc(430 / 538  * 100%);;
}

.distinctArea .centerBridge{
    position: absolute;
    top: calc(84 / 538 * 100%);
    left: calc(140 / 700 * 100%);
    width: calc(300 / 700 * 100%);
    object-fit: contain;
}

.distinctArea ul{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.distinctArea ul li{
    position: absolute;
    width: calc(131 / 700 * 100%);
    height: calc(36 / 430 * 100%);
}

.distinctArea ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../../index/images/确认标签.png) no-repeat center;
    width: 100%;
    height: 100%;
    font-size: 20px;
    letter-spacing: 18%;
    color: rgba(128, 83, 38, 1);
    font-family: 'songti';
    text-align: center;
}

.distinctArea ul li:first-child{
    top: calc(139 / 430 * 100%);
    right: 0;
}

.distinctArea ul li:nth-child(2){
    top: calc(232 / 430 * 100%);
    right: calc(47 / 700 * 100%);
}

.distinctArea ul li:nth-child(3){
    bottom: calc(47 / 430 * 100%);
    right: calc(119 / 700 * 100%);
}

.distinctArea ul li:nth-child(4){
    bottom: calc(2 / 430 * 100%);
    left: calc(315 / 700 * 100%);
}

.distinctArea ul li:nth-child(5){
    bottom: calc(47 / 430 * 100%);
    left: calc(126 / 700 * 100%);
}

.distinctArea ul li:nth-child(6){
    bottom: calc(150 / 430 * 100%);
    left: 0;
}

.distinctArea ul li:nth-child(7){
    top: calc(113 / 430 * 100%);
    left: calc(35 / 700 * 100%);
}
/* 梳理区域 end */

/* 左侧对话区域 start */
.mainArea .leftDialog{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(328 / 1367 * 100%);
    height: calc(369 / 538 * 100%);
}

.leftDialog .npcWrapper{
    position: absolute;
    left: 0;
    top: calc(19 / 369  * 100%);
    width: 100%;
    height: calc(238 / 369 * 100%);
}

.npcWrapper .npc{
    position: absolute;
    top: 0;
    left: calc(13 / 328 * 100%);
    height: calc(160 / 238 * 100%);
    object-fit: contain;
}

.npcWrapper .dialog_npc{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(83 / 238 * 100%);
    background: url(../images/npc对话框.png) no-repeat center;
    background-size: 100% 100%;
    font-family: 'xingkaiti';
    padding: 3px 2px;
    font-size: clamp(14px, 1.2vw, 20px);
}

.dialog_npc p{
    display: block;
    margin-left: 13px;
    width: calc(301 / 328 * 100%);
    font-size: inherit;
    color: rgba(68, 67, 67, 1);
}

.dialog_npc p span{
    color: rgba(194, 58, 60, 1);
}

.leftDialog .dialog_bottom{
    position: absolute;
    left: 0;
    bottom: calc(42 / 328 * 100%);
    width: calc(238 / 328 * 100%);
    height: calc(60 / 369 * 100%);
    background: url(../images/npc对话框.png) no-repeat center;
    background-size: 100% 100%;
    font-family: 'xingkaiti';
    padding: 2px 8px;
}

.dialog_bottom p{
    color: rgba(68, 67, 67, 1);
    font-size: clamp(12px, 1vw, 16px);
}

.dialog_bottom p span{
    color: rgba(194, 58, 60, 1);
}

/* 左侧对话区域 end */

/* 键盘导航 start */
.mainArea .keyBoardH{
    position: absolute;
    top: calc(250 / 538 * 100%);
    left: calc(300 / 1367 * 100%);
    width: calc(123 / 1367 * 100%);
    height: calc(44 / 538 * 100%);
    background: url(../images/键盘导航标签.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyBoardH p{
    /* 以 15px 为基准，随视口宽度按 1367 设计基准自适应 */
    font-size: calc(15 / 1367 * 100vw);
    /* 风格与“点击梳理，理清世界脉络！！”一致 */
    font-family: 'xingkaiti';
    color: rgba(68, 67, 67, 1);
    text-align: center;
    line-height: 1.2;
    margin: 0;
    /* 给右侧 H 键图标留出空间 */
    padding-right: calc(20 / 123 * 100%);
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
}

.keyBoardH .iconH{
    position: absolute;
    top: calc(-14 / 44 * 100%);
    right: calc(-4 / 123 * 100%);
}
/* 键盘导航 end */

/* 改名卡区域 start */
.mainArea .changeName{
    position: absolute;
    top: 0;
    left: calc(442 / 1367 * 100%);
    width: calc(497 / 1367 * 100%);
}

.changeName .nameCard{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.changeName .dataWrapper{
    position: absolute;
    left: calc(77 / 497 * 100%);
    bottom: calc(95 / 358 * 100%);
    width: calc(324 / 497 * 100%);
    height: calc(146 / 358 * 100%);
}

.dataWrapper li{
    position: relative;
    width: 100%;
    height: calc(38 / 146 * 100%);
    margin-bottom: calc(6 / 146 * 100%);
}

.dataWrapper li h2{
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 20px;
    letter-spacing: 20%;
    color: rgba(126, 101, 70, 1);
    font-family: 'wushuti';
}

.dataWrapper li:first-child .rightUser{
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(253 / 324 * 100%);
    font-family: 'wushuti';
    border-bottom: 2px solid black;
    color: rgba(75, 67, 67, 1);
    font-size: clamp(16px, 1.6vw, 28px);
    padding-left: 7px;
}

.dataWrapper li:nth-child(2) ul{
    position: absolute;
    top: calc(15 / 38 * 100%);
    right: calc(65 / 324 * 100%);
    width: calc(188 / 324 * 100%);
    height: calc(24 / 38 * 100%);
    display: flex;
    justify-content: space-between;
}

.dataWrapper li:nth-child(2) ul li{
    background: url(../images/性别标签.png) no-repeat center;
    background-size: contain;
    width: calc(82 / 188 * 100%);
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.dataWrapper li:nth-child(2) ul li span{
    display: block;
    margin-left: calc(30 / 82 * 100%);
    color: rgba(115, 99, 99, 1);
    font-size: 16px;
    font-family: 'songti';
}

.dataWrapper li:last-child .rightHabbits{
    position: absolute;
    bottom: 0;
    right: 0;
    width: calc(253 / 324 * 100%);
    font-family: 'wushuti';
    border-bottom: 2px solid black;
    color: rgba(75, 67, 67, 1);
    font-size: 16px;
    padding-left: 7px;
    letter-spacing: 20%;
}

.changeName .bottomBtn{
    position: absolute;
    left: calc(189 / 497 * 100%);
    bottom: calc(44 / 358 * 100%);
    width: calc(109 / 497 * 100%);
    height: calc(31 / 358 * 100%);
    background: url(../images/确认标签.png) no-repeat center;
    background-size: contain;
    color: rgba(156, 89, 53, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.bottomBtn span{
    position: absolute;
    top: calc(5 / 31 * 100%);
    font-size: clamp(12px, 1vw, 18px);
    font-family: 'wushuti';
}

/* 改名卡区域 end */

/* 左下角区域 start */
.mainArea .leftBottom{
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(180 / 1367 * 100%);
    height: calc(145 / 538 * 100%);
}

.mainArea .iconHead{
    position: absolute;
    top: 0;
    left: 0;
    width: calc(54 / 180 * 100%);
    height: calc(58 / 145 * 100%);
    object-fit: contain;
    cursor: pointer;
}

.mainArea .askAnswer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(180 / 180 * 100%);
    height: calc(77 / 145 * 100%);
    background: url(../images/智桥问答标签.png) no-repeat center;
    background-size: 100% 99%;
}

.mainArea .askAnswer p{
    position: absolute;
    right: calc(4 / 180 * 100%);
    bottom: calc(17 / 77 * 100%);
    width: calc(109 / 180 * 100%);
    height: calc(34 / 77 * 100%);
    display: block;
    color: rgba(128, 38, 38, 1);
    font-size: clamp(18px, 1.2vw, 20px);
    font-family: 'songti';
}
/* 左下角区域 end */

/* 底部导航区域 start */
.mainArea .bottomNav{
    position: absolute;
    bottom: 0;
    left: calc(264 / 1367 * 100%);
    width: calc(510 / 1367 * 100%);
    height: calc(68 / 538 * 100%);
}

.bottomNav ul{
    position: absolute;
    left: 0;
    bottom: calc(9 / 68 * 100%);
    width: calc(432 / 510 * 100%);
    height: calc(42 / 68 * 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottomNav ul li {
    width: calc(132 / 432 * 100%);
    height: 100%;
}

.bottomNav ul li a {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/底部导航标签.png) no-repeat center;
    background-size: 100% auto;
    color: rgba(128, 83, 38, 1);
    font-family: 'songti';
    font-size: clamp(12px, 1vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: calc(15 / 132 * 100%);
}

.bottomNav ul li a span{
    display: block;
    letter-spacing: 20%;
}

.bottomNav .circleBtn{
    position: absolute;
    top: 0;
    right: 0;
    width: calc(60 / 510 * 100%);
    height: calc(57 / 68 * 100%);
    object-fit: contain;
    cursor: pointer;
}
/* 底部导航区域 end */

/* 小视频区域 start */
.mainArea .videoArea{
    position: absolute;
    right: 0;
    bottom: calc(66 / 1367 * 100%);
    width: calc(308 / 1367 * 100%);
    height: calc(194 / 538 * 100%);
}

.videoArea .innerVideo{
    position: absolute;
    right: 0;
    top: 0;
    width: calc(240 / 308 * 100%);
    height: calc(135 / 194 * 100%);
    background: url(../images/视频标签.png) no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.videoArea .innerVideo video{
    width: calc(221 / 240 * 100%);
    height: calc(112 / 135 * 100%);
}

.videoArea .dialogNpc{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(59 / 194 * 100%);
    background: url(../images/npc标签.png) no-repeat center;
    background-size: 100% 100%;
    font-size: clamp(15px, 1vw, 16px);
    font-family: 'xingkaiti';
    color: rgba(68, 67, 67, 1);
    padding-left: calc(45 / 221 * 100%);
    padding-top: calc(1 / 55 * 100%);
}

.videoArea .dialogNpc p{
    display: block;
}

.videoArea .dialogNpc p span{
    color: rgba(161, 45, 45, 1);
}
/* 小视频区域 end */

/* 主要内容区域 end */