@import url(//tlhj.changyou.com/m/logo/logo.css);
* { box-sizing: border-box; }

:before, :after { pointer-events: none; }

@font-face { font-family: 'hyjk'; src: url(hyjk.ttf); }

@font-face { font-family: 'hysw'; src: url(hysw.ttf); }

body { font-size: 20px; }

a { text-decoration: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; }

* { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent; }

@keyframes fadeIn { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes pulse { 0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); } }

.wrap { display: flex; flex-direction: column; width: 100%; font-family: 'hyjk'; background-color: #000; }

.header { display: none; justify-content: space-between; align-items: center; width: 750px; height: 80px; padding: 0 32px; background: url(../img/header.jpg) no-repeat center/cover; position: fixed; top: 0; left: 0; z-index: 11; }

.header.active { display: flex; animation: fadeIn .6s forwards; }

.header-logo { width: 152px; height: 70px; font-size: 0px; color: transparent; background: url(../img/home-logo.png) no-repeat center/cover; }

.header-return { display: flex; justify-content: center; align-items: center; width: 154px; height: 48px; font-size: 24px; color: #926c42; font-family: 'hysw'; background: url(../img/header-return.png) no-repeat center/cover; }

.header-return:before { content: ''; width: 30px; height: 22px; background: url(../img/header-return-before.png) no-repeat center/cover; margin-right: 10px; }

.aslide { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 750px; height: 237px; padding-top: 12px; background: url(../img/aslide.png) no-repeat center/cover; position: fixed; left: 0; bottom: 0; z-index: 11; opacity: 0; pointer-events: none; transition: opacity .6s; }

.aslide.active { opacity: 1; pointer-events: auto; }

.aslide-return { display: flex; justify-content: center; align-items: center; width: 254px; height: 76px; font-size: 42px; color: #926c42; font-family: 'hysw'; background: url(../img/aslide-return.png) no-repeat center/cover; }

.aslide-return:before { content: ''; width: 49px; height: 36px; background: url(../img/aslide-return-before.png) no-repeat center/cover; margin-right: 10px; }

.aslide-item { display: flex; flex-wrap: wrap; justify-content: center; }

.aslide-item li { display: flex; flex-direction: column; width: 233px; margin: 10px 4px; }

.aslide-item li.active a { background-position: 0 -73px; }

.aslide-item a { display: flex; justify-content: center; align-items: center; width: 100%; height: 73px; font-size: 34px; color: #fff4d7; font-family: 'hysw'; text-shadow: 0 0 4px #ad551a, 0 0 4px #ad551a, 0 0 4px #ad551a, 0 0 4px #ad551a; background: url(../img/aslide-item.png) no-repeat 0 0/100% 146px; }

.page { display: none; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: auto; padding: 178px 0 180px; background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; opacity: 0; pointer-events: none; }

.page.active { display: flex; pointer-events: auto; animation: fadeIn .6s forwards; }

.page-title { width: 750px; height: auto; margin-bottom: 0; }

.page-con { display: flex; flex-direction: column; align-items: center; width: 100%; }

.page-tabbox { display: grid; }

.page-tabslide { display: flex; grid-area: 1/1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .6s,transform .6s,visibility 0s linear .6s; }

.page-tabslide.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .6s,transform .6s,visibility 0s; }

.home { justify-content: flex-end; height: 1624px; padding-bottom: 142px; background-image: url(../img/home.jpg); }

.home-logo { width: 241px; height: 111px; font-size: 0px; color: transparent; background: url(../img/home-logo.png) no-repeat center/cover; position: absolute; top: 73px; left: 17px; }

.home-slogan { font-size: 0px; color: transparent; }

.home-tabbar { display: flex; flex-wrap: wrap; justify-content: center; }

.home-tabbar li { display: flex; justify-content: center; align-items: center; width: 223px; height: 60px; font-size: 34px; color: #fff4d7; font-family: 'hysw'; text-shadow: 0 0 4px #ad551a, 0 0 4px #ad551a, 0 0 4px #ad551a, 0 0 4px #ad551a; background: url(../img/home-tabbar.png) no-repeat 0 0/100% 120px; cursor: pointer; margin: 0 2.5px; transition: all .3s; margin: 16px 0; }

.home-tabbar li.active { background-position: 0 -60px; }

.skill { background-image: url(../img/skill.jpg); }

.skill-1 { height: 954px; padding: 50px 310px 0 32px; }

.skill-1-desc { display: flex; flex-direction: column; align-items: center; width: 340px; font-size: 24px; color: #ffebaf; padding: 40px 0 80px; }

.skill-1-btn { align-self: flex-start; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; font-size: 0rem; color: transparent; position: relative; margin-left: 50px; }

.skill-1-btn:before, .skill-1-btn:after { content: ''; width: 160px; height: 160px; background: url(../img/skill-1-btn.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; margin: -80px 0 0 -80px; }

.skill-1-btn:after { width: 221px; height: 221px; background-image: url(../img/skill-1-btn-after.png); margin: -110.5px 0 0 -110.5px; }

.skill-1-btn:before { animation: pulse 1.8s linear infinite; }

.skill-2 { height: 682px; }

.skill-2-swiper { display: flex; align-items: center; }

.skill-2-swiper .swiper { width: 100%; height: 100%; }

.skill-2-swiper .swiper-slide { display: flex; justify-content: center; align-items: center; }

.skill-2-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.skill-2-swiper .swiper-prev, .skill-2-swiper .swiper-next { width: 62px; height: 60px; background: url(../img/skill-prev.png) no-repeat center/cover; position: relative; z-index: 2; }

.skill-2-swiper .swiper-prev.swiper-button-disabled, .skill-2-swiper .swiper-next.swiper-button-disabled { opacity: 0.5; }

.skill-2-swiper .swiper-next { transform: rotate(180deg); }

.skill-2-box { width: 672px; height: 360px; position: relative; margin: 67px -30px 0; }

.skill-2-box:after { content: ''; width: 740px; height: 414px; background: url(../img/skill-2-swiper.png) no-repeat center/cover; position: absolute; top: -35px; left: -34px; z-index: 2; }

.skill-2-pagination { width: 672px; height: auto; margin-top: 40px; }

.skill-2-pagination .swiper-slide { display: flex; justify-content: center; align-items: center; }

.skill-2-pagination .swiper-slide i { display: flex; justify-content: center; align-items: center; width: 158px; height: 90px; border: 1px solid #ffba60; position: relative; }

.skill-2-pagination .swiper-slide i:after { content: ''; width: 160px; height: 91px; background: url(../img/skill-2-pagination.png) no-repeat center/cover; position: absolute; top: 51%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s; }

.skill-2-pagination .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.skill-2-pagination .swiper-slide.swiper-slide-thumb-active i:after { opacity: 1; }

.skill-3 { height: 1250px; }

.skill-3-box { display: flex; flex-direction: column; align-items: center; width: 740px; height: 1136px; padding-top: 60px; background: url(../img/skill-3-box.png) no-repeat center/cover; margin-top: 30px; }

.skill-3-tab { display: flex; align-items: center; }

.skill-3-tab li { display: flex; justify-content: center; align-items: center; width: 203px; height: 70px; font-size: 34px; color: #926c42; font-family: 'hysw'; background: url(../img/skill-3-tab.png) no-repeat 0 0/100% 140px; margin: 0 4px; cursor: pointer; }

.skill-3-tab li.active { color: #fff6df; background-position: 0 -70px; }

.skill-3-tabslide { flex-direction: column; align-items: center; }

.skill-3-desc { display: flex; align-items: center; width: 641px; height: 204px; padding: 0 25px; background: url(../img/skill-3-desc.png) no-repeat center/cover; margin: 38px 0 10px; }

.skill-3-desc div { display: flex; flex-direction: column; align-items: center; }

.skill-3-desc strong { flex: none; font-size: 42px; color: #ffe493; line-height: 1; }

.skill-3-desc p { font-size: 24px; color: #fff1d7; }

.skill-3-add { display: flex; flex-direction: column; width: 639px; height: 719px; background: url(../img/skill-3-add.png) no-repeat center/cover; }

.skill-3-add-left { flex: none; display: flex; align-items: center; height: 204px; padding: 0 25px; }

.skill-3-add-left i { flex: none; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; position: relative; }

.skill-3-add-left i:after { content: ''; width: 100%; height: 100%; background: url(../img/skill-3-add-left.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.skill-3-add-left img { width: 100%; height: 100%; object-fit: cover; }

.skill-3-add-left div { flex: auto; display: flex; flex-direction: column; padding-left: 20px; }

.skill-3-add-left strong { font-size: 42px; color: #926c42; line-height: 1; margin-bottom: 10px; }

.skill-3-add-left p { font-size: 24px; color: #926c42; }

.skill-3-add-right { flex: auto; height: 1px; padding: 10px 10px 20px 18px; }

.skill-3-add-right ul { display: flex; flex-direction: column; height: 100%; padding-right: 15px; overflow-y: auto; }

.skill-3-add-right ul::-webkit-scrollbar { width: 5px; }

.skill-3-add-right ul::-webkit-scrollbar-track { background-color: #f3e8d3; }

.skill-3-add-right ul::-webkit-scrollbar-thumb { background-color: #d9c496; }

.skill-3-add-right li { flex: none; display: flex; padding: 20px 0; border-bottom: 1px dashed #926c42; }

.skill-3-add-right li:last-child { border-bottom: none; }

.skill-3-add-right i { flex: none; display: flex; justify-content: center; align-items: center; width: 110px; height: 110px; position: relative; }

.skill-3-add-right i:after { content: ''; width: 100%; height: 100%; background: url(../img/skill-3-add-right.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.skill-3-add-right img { width: 100%; height: 100%; object-fit: cover; }

.skill-3-add-right div { flex: auto; display: flex; flex-direction: column; padding-left: 25px; }

.skill-3-add-right strong { font-size: 32px; color: #926c42; line-height: 1; }

.skill-3-add-right em { font-size: 24px; color: #db712b; }

.skill-3-add-right p { font-size: 20px; color: #926c42; margin-top: 10px; }

.skill-3-skills { display: flex; flex-direction: column; padding-top: 50px; }

.skill-3-skills li { display: flex; width: 641px; height: 288px; padding: 35px; background: url(../img/skill-3-skills.png) no-repeat center/cover; margin-bottom: 25px; }

.skill-3-skills i { flex: none; display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; position: relative; }

.skill-3-skills i:after { content: ''; width: 100%; height: 100%; background: url(../img/skill-3-add-right.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.skill-3-skills img { width: 100%; height: 100%; object-fit: cover; }

.skill-3-skills div { display: flex; flex-direction: column; padding-left: 25px; }

.skill-3-skills strong { display: flex; flex-direction: column; font-size: 42px; color: #926c42; line-height: 1; padding: 0 0 10px; margin-bottom: 10px; }

.skill-3-skills strong:after { content: ''; width: 424px; height: 6px; background: url(../img/skill-3-skills-after.png) no-repeat center/cover; transform: translateY(100%); }

.skill-3-skills p { font-size: 24px; color: #926c42; }

.skill-3-change { flex: auto; display: flex; flex-direction: column; height: 1px; margin: 50px -15px 0 0; overflow-y: auto; }

.skill-3-change::-webkit-scrollbar { width: 5px; }

.skill-3-change::-webkit-scrollbar-track { background-color: #f3e8d3; }

.skill-3-change::-webkit-scrollbar-thumb { background-color: #d9c496; }

.skill-3-change li { flex: none; display: flex; align-items: center; width: 641px; height: 288px; padding: 0 20px; background: url(../img/skill-3-change.png) no-repeat center/cover; margin-bottom: 20px; }

.skill-3-change li:last-child { margin-bottom: 0; }

.skill-3-change dl { flex: auto; display: flex; flex-direction: column; align-items: center; }

.skill-3-change dt { flex: none; display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; position: relative; }

.skill-3-change dt:after { content: ''; width: 100%; height: 100%; background: url(../img/skill-3-add-right.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.skill-3-change img { width: 100%; height: 100%; object-fit: cover; }

.skill-3-change dd { font-size: 32px; color: #926c42; padding-top: 5px; }

.skill-3-change div { display: flex; flex-direction: column; padding-left: 25px; }

.skill-3-change p { display: flex; flex-direction: column; margin-bottom: 20px; }

.skill-3-change p:after { content: ''; width: 424px; height: 6px; background: url(../img/skill-3-skills-after.png) no-repeat center/cover; transform: translateY(100%); }

.skill-3-change p:last-child strong, .skill-3-change p:last-child span { color: #db712b; }

.skill-3-change p:last-child:after { display: none; }

.skill-3-change strong { font-size: 20px; color: #926c42; line-height: 1; }

.skill-3-change span { font-size: 20px; color: #926c42; padding-top: 5px; }

.link-desc { font-size: 32px; color: #ffebaf; margin: 10px 0 30px; }

.link-scene { display: flex; flex-wrap: wrap; justify-content: center; }

.link-scene li { display: flex; flex-direction: column; align-items: center; margin: 0 20px 50px; }

.link-scene li > img { width: auto; height: 37px; }

.link-scene div { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 315px; height: 332px; position: relative; margin-top: 25px; }

.link-scene div:after { content: ''; width: 100%; height: 100%; background: url(../img/link-scene.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.link-scene div img { width: 100%; height: 247px; object-fit: cover; position: relative; z-index: 1; }

.link-scene a { display: flex; justify-content: center; align-items: center; width: 213px; height: 65px; font-size: 32px; color: #fef0ca; font-family: 'hysw'; background: url(../img/link-scene-hover.png) no-repeat center/cover; position: relative; z-index: 3; margin-top: 12px; }

.link-battlefield { display: flex; flex-wrap: wrap; justify-content: center; }

.link-battlefield li { display: flex; flex-direction: column; align-items: center; width: 315px; height: 600px; padding-top: 40px; background: url(../img/link-battlefield.png) no-repeat center/cover; margin: 0 15px 30px; }

.link-battlefield li > img { width: auto; height: 44px; margin: 44px 0 20px; }

.link-battlefield div { display: flex; justify-content: center; align-items: center; width: 238px; height: 238px; position: relative; z-index: 1; }

.link-battlefield div:before { content: ''; width: 295px; height: 319px; background: url(../img/link-battlefield-icon.png) no-repeat center/cover; position: absolute; top: -44px; left: -29px; z-index: -1; }

.link-battlefield div:after { content: ''; width: 64px; height: 92px; background: url(../img/link-battlefield-after.png) no-repeat center/cover; position: absolute; left: -6px; bottom: 8px; }

.link-battlefield div img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.link-battlefield p { width: 280px; height: 120px; font-size: 20px; color: #926c42; }

.link-battlefield a { display: flex; justify-content: center; align-items: center; width: 208px; height: 62px; font-size: 34px; color: #926c42; font-family: 'hysw'; background: url(../img/link-battlefield-btn.png) no-repeat center/100%; }

.link-battlefield a:after { content: ''; width: 14px; height: 19px; background: url(../img/link-battlefield-btn-after.png) no-repeat center/cover; margin-left: 10px; }

.link-update { display: flex; flex-direction: column; align-items: center; width: 666px; height: 600px; padding: 20px 20px 0; background: url(../img/link-update.png) no-repeat center/cover; margin-top: 30px; }

.link-update i { flex: none; display: flex; justify-content: center; align-items: center; width: 597px; height: 265px; position: relative; }

.link-update i:after { content: ''; width: 100%; height: 100%; background: url(../img/link-update-img.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.link-update i img { width: 100%; height: 100%; object-fit: cover; }

.link-update div { flex: auto; display: flex; flex-direction: column; align-items: center; }

.link-update strong { display: flex; justify-content: flex-end; align-items: center; width: 603px; height: 72px; font-size: 24px; color: #db712b; background: url(../img/link-update-title.png) no-repeat center/cover; margin: 10px 0 0 -30px; }

.link-update p { font-size: 20px; color: #926c42; width: 597px; padding: 10px 0 0; }

.link-update a { display: flex; justify-content: center; align-items: center; width: 208px; height: 62px; font-size: 34px; color: #926c42; font-family: 'hysw'; background: url(../img/link-battlefield-btn.png) no-repeat center/100%; }

.link-update a:after { content: ''; width: 14px; height: 19px; background: url(../img/link-battlefield-btn-after.png) no-repeat center/cover; margin-left: 10px; }

.link-activity { display: flex; flex-direction: column; padding-top: 15px; }

.link-activity li { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 666px; height: 343px; background: url(../img/link-activity.png) no-repeat center/cover; margin-bottom: 15px; }

.link-activity li > img { height: 35px; }

.link-activity div { flex: none; display: flex; justify-content: center; align-items: center; width: 603px; height: 181px; position: relative; margin: 15px 0; }

.link-activity div:after { content: ''; width: 100%; height: 100%; background: url(../img/link-activity-img.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.link-activity div img { width: 100%; height: 100%; object-fit: cover; }

.link-activity p { width: 400px; font-size: 20px; color: #926c42; padding: 15px 0; }

.link-activity a { display: flex; justify-content: center; align-items: center; width: 208px; height: 62px; font-size: 34px; color: #926c42; font-family: 'hysw'; background: url(../img/link-battlefield-btn.png) no-repeat center/100%; }

.link-activity a:after { content: ''; width: 14px; height: 19px; background: url(../img/link-battlefield-btn-after.png) no-repeat center/cover; margin-left: 10px; }

.link-1.page { min-height: 1624px; }

.link-1-return { align-self: flex-start; width: 102px; height: 76px; background: url(../img/link-1-box-return.png) no-repeat center/cover; margin: 0 0 20px 35px; }

.link-1-box { display: none; flex-direction: column; justify-content: center; align-items: center; }

.link-1-box.active { display: flex; opacity: 1; pointer-events: auto; }

.link-1-box-big { width: 682px; height: 386px; }

.link-1-box-big .swiper-slide { display: flex; justify-content: center; align-items: center; }

.link-1-box-big .swiper-slide:after { content: ''; width: 100%; height: 100%; background: url(../img/dia-link3.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }

.link-1-box-big .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

.link-1-box-small { display: flex; flex-wrap: wrap; width: 682px !important; margin-top: 30px; position: static; }

.link-1-box-small div { display: flex; justify-content: center; align-items: center; width: 320px; height: 180px; position: relative; margin: 0 42px 30px 0 !important; opacity: 1; border-radius: 0; background: none; }

.link-1-box-small div:nth-child(2n) { margin-right: 0 !important; }

.link-1-box-small div:after { content: ''; width: 100%; height: 100%; background: url(../img/dia-swiper-small-after.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.link-1-box-small div img { width: 100%; height: 100%; object-fit: contain; }

.link-1-box-small div.swiper-pagination-bullet-active:after { background-image: url(../img/dia-swiper-small-active.png); }

.link-1-box-video { width: 207px; height: 207px; background: url(../img/dia-swiper-play.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; }

.link-1-box-img { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.system-box { display: flex; flex-direction: column; width: 740px; height: 1136px; padding: 70px 40px; background: url(../img/system-box.png) no-repeat center/cover; margin-top: 20px; }

.system-box em { font-size: 32px; color: #db712b; text-align: center; font-style: normal; }

.system-scroll { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: 0 30px; }

.system-scroll::-webkit-scrollbar { width: 5px; }

.system-scroll::-webkit-scrollbar-track { background-color: #f3e8d3; }

.system-scroll::-webkit-scrollbar-thumb { background-color: #d9c496; }

.system-scroll p { font-size: 24px; color: #926c42; margin: 10px 0 30px; }

.system-scroll img { width: 100%; height: auto; margin: 10px 0; }

.system-intro { display: flex; align-items: flex-end; margin: 10px 0; }

.system-intro strong { display: flex; font-size: 42px; color: #6c4821; line-height: 1; position: relative; margin-right: 120px; }

.system-intro strong:after { content: ''; width: 95px; height: 13px; background: url(../img/system-intro.png) no-repeat center/cover; position: absolute; bottom: 0; right: -120px; transform: translateY(47%); }

.system-intro:after { content: ''; flex: auto; height: 1px; background: #946b40; }

.carnival-1 .system-box { justify-content: center; align-items: center; height: 910px; background-image: url(../img/system-box2.png); }

.carnival-2 { margin-top: 50px; }

.carnival-activity { display: flex; flex-wrap: wrap; justify-content: center; }

.carnival-activity li { display: flex; flex-direction: column; align-items: center; width: 688px; height: 414px; padding-top: 25px; background: url(../img/carnival-activity.png) no-repeat center/cover; margin-bottom: 15px; }

.carnival-activity li:first-child { height: 738px; background-image: url(../img/carnival-activity-big.png); }

.carnival-activity li:nth-child(2) dd { width: 285px; height: 311px; background-image: url(../img/carnival-activity-item-big.png); }

.carnival-activity p { display: flex; align-items: center; font-size: 30px; color: #fbda82; line-height: 1; margin-bottom: 10px; }

.carnival-activity p:before, .carnival-activity p:after { content: ''; width: 155px; height: 10px; background: url(../img/carnival-activity-title.png) no-repeat center/cover; margin: 0 15px; }

.carnival-activity p:after { transform: rotate(180deg); }

.carnival-activity dl { display: flex; flex-wrap: wrap; justify-content: center; }

.carnival-activity dd { display: flex; flex-direction: column; align-items: center; width: 202px; height: 311px; padding-top: 10px; background: url(../img/carnival-activity-item.png) no-repeat center/cover; margin: 0 10px 20px; }

.carnival-activity div { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 60px; }

.carnival-activity strong { font-size: 24px; color: #633211; }

.carnival-activity span { font-size: 18px; color: #633211; }

.carnival-activity i { display: flex; justify-content: center; align-items: center; width: 177px; height: 160px; position: relative; margin: 15px 0; }

.carnival-activity i:after { content: ''; width: 100%; height: 100%; background: url(../img/carnival-activity-img.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.carnival-activity img { width: 100%; height: 100%; object-fit: cover; }

.carnival-activity a { display: flex; justify-content: center; align-items: center; width: 122px; height: 37px; font-size: 20px; color: #926c42; font-family: 'hysw'; background: url(../img/link-battlefield-btn.png) no-repeat center/100%; }

.carnival-activity a:after { content: ''; width: 8px; height: 11px; background: url(../img/link-battlefield-btn-after.png) no-repeat center/cover; margin-left: 10px; }

.carnival-3 { margin-top: 50px; }

.carnival-boss { display: flex; flex-direction: column; justify-content: center; }

.carnival-boss li { display: flex; justify-content: center; align-items: center; width: 689px; height: auto; margin-bottom: 10px; }

.carnival-boss li div { width: 100%; height: 1261px; padding: 20px; background: url(../img/carnival-boss.png) no-repeat center/cover; }

.carnival-boss li i { display: flex; align-items: flex-start; width: 100%; height: 100%; overflow-y: auto; padding-right: 10px; }

.carnival-boss li i::-webkit-scrollbar { width: 5px; }

.carnival-boss li i::-webkit-scrollbar-track { background-color: #f3e8d3; }

.carnival-boss li i::-webkit-scrollbar-thumb { background-color: #d9c496; }

.carnival-boss li i img { width: 100%; height: auto; }

.carnival-boss li > img { width: 100%; height: auto; }

.fashion-1-box { display: flex; flex-direction: column; align-items: center; margin-top: 30px; padding-bottom: 90px; position: relative; }

.fashion-1-box:last-child { padding-bottom: 0; }

.fashion-1-con { display: none; flex-direction: column; align-items: center; align-items: center; }

.fashion-1-con.active { display: flex; }

.fashion-1-item { display: flex; padding-top: 85px; }

.fashion-1-item li { display: flex; flex-direction: column; align-items: center; }

.fashion-1-item p { display: flex; flex-direction: column; align-items: center; }

.fashion-1-item span { display: flex; flex-direction: column; align-items: center; font-size: 24px; color: #ffebaf; }

.fashion-1-item span:after { content: ''; width: 275px; height: 6px; background: url(../img/fashion-1-item-after.png) no-repeat center/cover; margin: 10px 0; }

.fashion-1-item strong { font-size: 30px; color: #ffebaf; }

.fashion-1-item div { display: flex; align-items: center; padding-top: 20px; }

.fashion-1-item i { display: flex; justify-content: center; align-items: center; width: 164px; height: 164px; margin: 0 5px; }

.fashion-1-item img { width: 100%; height: 100%; object-fit: contain; }

.fashion-1-role { display: flex; justify-content: center; align-items: center; width: 628px; height: 628px; background: url(../img/fashion-1-role.png) no-repeat center/cover; position: relative; }

.fashion-1-role img { width: 750px; height: 750px; object-fit: contain; }

.fashion-1-role div { display: flex; width: 112px; height: 370px; background: url(../img/fashion-1-desc.png) no-repeat center/cover; padding: 76px 18px 0 20px; position: absolute; top: 13px; left: -50px; }

.fashion-1-role span { width: 32px; font-size: 24px; color: #572209; line-height: 32px; writing-mode: vertical-rl; text-orientation: upright; }

.fashion-1-role strong { width: 50px; font-size: 24px; color: #572209; line-height: 50px; writing-mode: vertical-rl; text-orientation: upright; padding-top: 15px; }

.fashion-1-role em { font-size: 18px; }

.fashion-1-role p { width: 100%; font-size: 22px; color: #fbe5b2; text-align: center; position: absolute; left: 0; bottom: -40px; }

.fashion-1-toggle { display: flex; flex-direction: column; position: absolute; top: 400px; left: 0; }

.fashion-1-toggle a { display: flex; justify-content: center; align-items: center; width: 106px; height: 106px; font-size: 32px; color: #8f5c24; text-align: center; line-height: 1; padding: 0 10px; background: url(../img/fashion-3-pagination.png) no-repeat center/cover; position: relative; margin: 15px 0; }

.fashion-1-toggle a.active { color: #fff1ae; background-image: url(../img/fashion-3-pagination-active.png); }

.fashion-1-toggle a.active:after { content: ''; width: 30px; height: 64px; background: url(../img/fashion-3-pagination-after.png) no-repeat center/cover; position: absolute; top: 50%; right: 0; transform: translate(85%, -50%) rotate(180deg); }

.fashion-2 { padding-top: 60px; }

.fashion-2-con { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }

.fashion-2-title { width: auto; height: 50px; }

.fashion-2-swiper { display: flex; justify-content: center; align-items: flex-start; width: 750px; margin-top: -20px; position: relative; }

.fashion-2-swiper .swiper { width: 750px; height: auto; margin: 0 -80px; background: url(../img/fashion-2-swiper.png) no-repeat center/620px 397px; }

.fashion-2-swiper .swiper-slide { display: flex; flex-direction: column; align-items: center; }

.fashion-2-box { display: flex; justify-content: center; align-items: center; width: 750px; height: 460px; position: relative; margin-top: 20px; }

.fashion-2-box img { width: 100%; height: 100%; object-fit: contain; }

.fashion-2-box p { width: 100%; font-size: 22px; color: #fbe5b2; text-align: center; position: absolute; left: 0; bottom: 0; }

.fashion-2-intro { display: flex; width: 112px; height: 370px; background: url(../img/fashion-1-desc.png) no-repeat center/cover; padding: 76px 18px 90px 20px; position: absolute; top: 0; left: 80px; z-index: 3; }

.fashion-2-intro span { width: 32px; font-size: 24px; color: #572209; line-height: 32px; writing-mode: vertical-rl; text-orientation: upright; }

.fashion-2-intro strong { width: 50px; font-size: 24px; color: #572209; line-height: 50px; text-align: center; writing-mode: vertical-rl; text-orientation: upright; }

.fashion-2 .swiper-prev, .fashion-2 .swiper-next { align-self: center; width: 62px; height: 60px; background: url(../img/skill-prev.png) no-repeat center/cover; position: relative; z-index: 3; }

.fashion-2 .swiper-prev.swiper-button-disabled, .fashion-2 .swiper-next.swiper-button-disabled { opacity: 0.5; }

.fashion-2 .swiper-next { transform: rotate(180deg); }

.fashion-2 .swiper-pagination { display: flex; justify-content: center; align-items: center; position: absolute; bottom: 50px; }

.fashion-2 .swiper-pagination span { width: 28px; height: 28px; border: 0; opacity: 1; background: url(../img/swiper-pagination.png) no-repeat center/cover; margin: 0 15px; }

.fashion-2 .swiper-pagination span.swiper-pagination-bullet-active { background-image: url(../img/swiper-pagination-active.png); }

.fashion-3-swiper { display: flex; flex-direction: column; align-items: center; width: 750px; position: relative; margin-top: 30px; }

.fashion-3-swiper .swiper { width: 750px; height: auto; }

.fashion-3-swiper .swiper { display: flex; justify-content: center; align-items: center; }

.fashion-3-swiper .swiper div { display: flex; justify-content: center; align-items: center; width: 100%; height: 640px; position: relative; background: url(../img/fashion-3-swiper.png) no-repeat center/1100px 640px; }

.fashion-3-swiper .swiper img { width: 110%; height: 110%; object-fit: contain; }

.fashion-3-swiper p { display: flex; width: 112px; height: 370px; background: url(../img/fashion-1-desc.png) no-repeat center/cover; padding: 120px 18px 0 20px; position: absolute; top: 0; left: 73px; z-index: 3; }

.fashion-3-swiper p span { width: 32px; font-size: 24px; color: #572209; line-height: 32px; writing-mode: vertical-rl; text-orientation: upright; }

.fashion-3-swiper p strong { width: 50px; font-size: 24px; color: #572209; line-height: 50px; writing-mode: vertical-rl; text-orientation: upright; padding-top: 25px; }

.fashion-3-swiper em { font-size: 22px; color: #572209; font-style: normal; position: absolute; left: 50%; bottom: 310px; transform: translateX(-50%); z-index: 3; }

.fashion-3 .swiper-prev, .fashion-3 .swiper-next { align-self: center; width: 62px; height: 60px; background: url(../img/skill-prev.png) no-repeat center/cover; position: absolute; left: 0; top: 320px; z-index: 3; margin-top: -30px; }

.fashion-3 .swiper-prev.swiper-button-disabled, .fashion-3 .swiper-next.swiper-button-disabled { opacity: 0.5; }

.fashion-3 .swiper-next { right: 0; left: auto; transform: rotate(180deg); }

.fashion-3 .swiper-pagination { display: flex; flex-wrap: wrap; justify-content: center; width: auto; position: static; margin-top: 40px; }

.fashion-3 .swiper-pagination span { flex: none; display: flex; justify-content: center; align-items: center; width: 106px; height: 106px; font-size: 38px; color: #8f5c24; writing-mode: vertical-rl; text-orientation: upright; border-radius: 0; background: url(../img/fashion-3-pagination.png) no-repeat center/cover; opacity: 1; position: relative; margin: 0 15px !important; }

.fashion-3 .swiper-pagination span:first-child { margin-left: 100px !important; }

.fashion-3 .swiper-pagination span:nth-child(4) { margin-right: 100px !important; }

.fashion-3 .swiper-pagination span.swiper-pagination-bullet-active { color: #fff1ae; background-image: url(../img/fashion-3-pagination-active.png); }

.fashion-3 .swiper-pagination span.swiper-pagination-bullet-active:after { content: ''; width: 64px; height: 30px; background: url(../img/fashion-3-pagination-after2.png) no-repeat center/cover; position: absolute; top: 0; left: 50%; transform: translate(-50%, -80%); }

.dia { width: 100%; height: 100%; margin: 0 !important; position: fixed !important; left: 0 !important; top: 0 !important; display: none; }

.dia-box { display: flex; flex-direction: column; align-items: center; width: 740px; height: 404px; padding: 40px 60px; background: url(../img/dia-box.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.dia-close { width: 43px; height: 43px; background: url(../img/dia-close.png) no-repeat center/cover; position: absolute; top: -50px; right: 40px; }

.dia-auto { flex: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.dia-title { width: auto; height: 50px; margin-bottom: 20px; }

.dia-link, .dia-carnival { justify-content: flex-start; width: 100%; padding-right: 5px; overflow-y: auto; }

.dia-link::-webkit-scrollbar, .dia-carnival::-webkit-scrollbar { width: 5px; }

.dia-link::-webkit-scrollbar-track, .dia-carnival::-webkit-scrollbar-track { background-color: #f3e8d3; }

.dia-link::-webkit-scrollbar-thumb, .dia-carnival::-webkit-scrollbar-thumb { background-color: #d9c496; }

.dia-link img, .dia-carnival img { width: 100%; height: auto; }

.dia-swiper { justify-content: center; width: 750px; height: auto; padding: 0; background: none; left: 50%; }

.dia-swiper .dia-close { width: 34px; height: 26px; background-image: url(../img/dia-swiper-close.png); position: fixed; top: 0; left: 10px; transform: translate(0, -180%) scale(1.5); z-index: 11111; }

.dia-swiper-link { display: flex; flex-direction: column; }

.dia-swiper-big { width: 750px; height: 422px; }

.dia-swiper-big .swiper-slide { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }

.dia-swiper-big .swiper-slide:after { content: ''; width: 100%; height: 100%; background: url(../img/dia-swiper-big-after.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.dia-swiper-big .swiper-slide img, .dia-swiper-big .swiper-slide video { width: 100%; height: 100%; object-fit: cover; }

.dia-swiper-big .swiper-slide video::-webkit-media-controls-fullscreen-button { display: none !important; }

.dia-swiper-big .swiper-slide a { width: 207px; height: 207px; background: url(../img/dia-swiper-play.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; }

.dia-swiper-small { width: 750px; margin-top: 30px; }

.dia-swiper-small .swiper-slide { display: flex; justify-content: center; align-items: center; }

.dia-swiper-small .swiper-slide div { display: flex; justify-content: center; align-items: center; width: 200px; height: 113px; position: relative; }

.dia-swiper-small .swiper-slide div:after { content: ''; width: 100%; height: 100%; background: url(../img/dia-swiper-small-after.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.dia-swiper-small .swiper-slide img { width: 100%; height: 100%; object-fit: contain; }

.dia-swiper-small .swiper-slide.swiper-slide-thumb-active div:after { background-image: url(../img/dia-swiper-small-active.png); }

.dia-tips { width: 635px; height: 380px; padding: 50px 0; background-image: url(../img/dia-tips.png); }

.dia-tips .dia-close { top: 0; right: -50px; display: none; }

.dia-desc { font-size: 48px; color: #936c42; font-family: 'hyjk'; }

.dia-btn { display: flex; }

.dia-btn a { display: flex; justify-content: center; align-items: center; width: 338px; height: 90px; font-size: 52px; color: #ffedc1; font-family: 'hyjk'; background: url(../img/dia-btn.png) no-repeat center/cover; }

.dia-video { width: 100%; height: auto; padding: 0; background: none; }

.dia-video .dia-close { top: -50px; right: 0; }

.dia-video video, .dia-video img { width: 100%; height: auto; object-fit: cover; }