@import url(//tlhj.changyou.com/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); }

html { max-width: 2546px; font-size: 1px; margin: 0 auto; }

body._popupScrollLock { position: static !important; }

@media (max-width: 2546px) { html { font-size: calc(100vw / 2546); } }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

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

::-webkit-scrollbar { width: 5rem; }

::-webkit-scrollbar-track { background-color: transparent; }

::-webkit-scrollbar-thumb { background-color: #db712b; }

#cyou_top { background-size: 100% 65px !important; }

#cyou_bottom { height: auto !important; background-size: 100% 65px !important; }

body { width: 100%; }

.wrap { width: 100%; height: 1440rem; font-family: 'hyjk'; position: relative; }

.aslide { display: flex; flex-direction: column; align-items: center; width: 367rem; height: 1440rem; padding-top: 84rem; background: url(../img/aslide.png) no-repeat center/cover; position: absolute; top: 0; left: 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: 254rem; height: 76rem; font-size: 42rem; color: #926c42; font-family: 'hysw'; background: url(../img/aslide-return.png) no-repeat center/cover; }

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

.aslide-item { display: flex; flex-direction: column; padding-top: 122rem; }

.aslide-item li { display: flex; flex-direction: column; width: 287rem; margin-bottom: 20rem; }

.aslide-item li.active a { background-position: 0 -90rem; }

.aslide-item li.active dl { max-height: 500rem; transition: max-height .6s; }

.aslide-item li dd { flex: none; display: flex; align-items: center; height: 77rem; font-size: 32rem; color: #926c42; font-weight: 400; cursor: pointer; position: relative; }

.aslide-item li dd:before { content: ''; width: 10rem; height: 10rem; border: 1rem solid #926c42; background-color: #f4efdb; position: relative; z-index: 2; transform: rotate(45deg); margin-right: 14rem; }

.aslide-item li dd:after { content: ''; width: 1rem; height: 100%; background-color: #926c42; position: absolute; top: 50%; left: 6rem; }

.aslide-item li dd.active { color: #db712b; }

.aslide-item li dd.active:before { background-color: #db712b; }

.aslide-item li dd:last-child:after { display: none; }

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

.aslide-item dl { display: flex; flex-direction: column; justify-content: flex-start; max-height: 0; padding-left: 40rem; overflow: hidden; }

.page { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 1440rem; background-image: url(../img/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .6s; }

.page.active { opacity: 1; pointer-events: auto; z-index: 2; }

.page-con { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding: 50rem 0 0 367rem; background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .6s; overflow-y: auto; }

.page-con.active { opacity: 1; pointer-events: auto; z-index: 2; }

.page-tabbox { display: grid; }

.page-tabslide { display: flex; grid-area: 1/1; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10rem); 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; }

.page-title { width: auto; height: 300rem; margin-bottom: -40rem; }

.home { justify-content: flex-end; padding-bottom: 160rem; background-image: url(../img/home.jpg); }

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

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

.home-tabbar { display: flex; justify-content: center; position: relative; z-index: 999; }

.home-tabbar li { display: flex; justify-content: center; align-items: center; width: 338rem; height: 90rem; font-size: 52rem; color: #fff4d7; font-family: 'hysw'; text-shadow: 0 0 4rem #ad551a, 0 0 4rem #ad551a, 0 0 4rem #ad551a, 0 0 4rem #ad551a; background: url(../img/home-tabbar.png) no-repeat 0 0/100% 180rem; cursor: pointer; margin: 0 5rem; transition: all .3s; }

.home-tabbar li:hover, .home-tabbar li.active { background-position: 0 -90rem; }

.home video { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; }

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

.skill-1 { padding-right: 980rem; padding-top: 150rem; background-image: url(../img/skill-1.jpg); }

.skill-1-title { width: 973rem; height: auto; }

.skill-1-desc { width: 973rem; font-size: 36rem; color: #ffebaf; padding: 30rem 0 60rem; }

.skill-1-btn { display: flex; justify-content: center; align-items: center; width: 330rem; height: 330rem; font-size: 0px; color: transparent; position: relative; }

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

.skill-1-btn:after { width: 417rem; height: 417rem; background-image: url(../img/skill-1-btn-after.png); margin: -208.5rem 0 0 -208.5rem; }

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

.skill-2 { padding-top: 150rem; }

.skill-2-title { height: 82rem; }

.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: contain; }

.skill-2-swiper .swiper-prev, .skill-2-swiper .swiper-next { width: 103rem; height: 100rem; background: url(../img/skill-prev.png) no-repeat center/cover; }

.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: 1565rem; height: 720rem; position: relative; margin: 60rem 20rem 0; }

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

.skill-2-pagination { width: 1565rem; height: auto; margin-top: 60rem; }

.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: 296rem; height: 167rem; border: 1rem solid #ffba60; position: relative; }

.skill-2-pagination .swiper-slide i:after { content: ''; width: 309rem; height: 179rem; background: url(../img/skill-2-swiper-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 { padding-top: 150rem; }

.skill-3-title { height: 82rem; }

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

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

.skill-3-tab li { display: flex; justify-content: center; align-items: center; width: 444rem; height: 98rem; font-size: 62rem; color: #926c42; font-family: 'hysw'; background: url(../img/skill-3-tab.png) no-repeat 0 0/100% 196rem; margin: 0 30rem; cursor: pointer; }

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

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

.skill-3-desc { display: flex; align-items: center; width: 1757rem; height: 167rem; padding: 0 70rem; background: url(../img/skill-3-desc.png) no-repeat center/cover; margin: 45rem 0 20rem; }

.skill-3-desc div { display: flex; align-items: flex-start; }

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

.skill-3-desc p { font-size: 32rem; color: #fff1d7; line-height: 42rem; }

.skill-3-add { display: flex; align-items: center; width: 1755rem; height: 545rem; background: url(../img/skill-3-add.png) no-repeat center/cover; }

.skill-3-add-left { flex: none; display: flex; flex-direction: column; align-items: center; width: 454rem; }

.skill-3-add-left i { display: flex; justify-content: center; align-items: center; width: 150rem; height: 150rem; 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 { display: flex; flex-direction: column; align-items: center; }

.skill-3-add-left strong { font-size: 42rem; color: #926c42; line-height: 1; margin: 20rem 0; }

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

.skill-3-add-right { flex: auto; height: 100%; padding: 50rem 20rem 50rem 50rem; }

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

.skill-3-add-right ul::-webkit-scrollbar { width: 10rem; }

.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; margin-bottom: 40rem; }

.skill-3-add-right i { flex: none; display: flex; justify-content: center; align-items: center; width: 110rem; height: 110rem; 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: 25rem; }

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

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

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

.skill-3-skills { display: flex; padding-top: 60rem; }

.skill-3-skills li { display: flex; flex-direction: column; align-items: center; width: 457rem; height: 649rem; padding: 60rem 40rem 0; background: url(../img/skill-3-skills.png) no-repeat center/cover; margin: 0 25rem; }

.skill-3-skills i { flex: none; display: flex; justify-content: center; align-items: center; width: 140rem; height: 140rem; 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; align-items: center; }

.skill-3-skills strong { font-size: 42rem; color: #926c42; line-height: 1; padding: 70rem 0 30rem; }

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

.skill-3-change { flex: auto; display: flex; flex-direction: column; height: 1rem; padding: 30rem 30rem 0 0; margin: 30rem -30rem 0 0; overflow-y: auto; }

.skill-3-change::-webkit-scrollbar { width: 10rem; }

.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; width: 1582rem; height: 187rem; padding: 0 30rem; background: url(../img/skill-3-change.png) no-repeat center/cover; margin-bottom: 60rem; }

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

.skill-3-change div { display: flex; flex-direction: column; align-items: center; width: 42%; padding: 20rem 40rem 0; }

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

.skill-3-change span { font-size: 32rem; color: #926c42; line-height: 1; }

.skill-3-change p { font-size: 24rem; color: #926c42; padding-top: 10rem; }

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

.skill-3-change dt { flex: none; display: flex; justify-content: center; align-items: center; width: 140rem; height: 140rem; 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: 42rem; color: #926c42; }

.link-1-box { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 50rem 0 0 367rem; background: url(../img/bg.jpg) no-repeat center/cover; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity .6s; }

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

.link-1-box-return { align-self: flex-start; width: 102rem; height: 76rem; background: url(../img/link-1-box-return.png) no-repeat center/cover; transform: translateX(150%); margin-bottom: -76rem; }

.link-1-box-big { width: 1602rem; height: 902rem; }

.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 { width: 1602rem; margin-top: 30rem; }

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

.link-1-box-small .swiper-slide div { display: flex; justify-content: center; align-items: center; width: 250rem; height: 142rem; position: relative; }

.link-1-box-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%); }

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

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

.link-1-box-video { width: 207rem; height: 207rem; 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%); }

.link-desc { font-size: 48rem; color: #ffebaf; margin: 20rem 0 40rem; }

.link-scene { display: flex; }

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

.link-scene li > img { width: auto; height: 64rem; }

.link-scene div { display: flex; justify-content: center; align-items: center; width: 436rem; height: 706rem; position: relative; margin-top: 25rem; }

.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%); }

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

.link-scene div:hover:after { opacity: 1; }

.link-scene div:hover a { opacity: 1; pointer-events: auto; }

.link-scene a { width: 100%; height: 100%; background: url(../img/link-scene-hover.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; transition: opacity .6s; }

.link-battlefield { display: flex; }

.link-battlefield li { display: flex; flex-direction: column; align-items: center; width: 460rem; height: 875rem; padding-top: 60rem; background: url(../img/link-battlefield.png) no-repeat center/cover; margin: 0 15rem; }

.link-battlefield li > img { width: auto; height: 64rem; margin: 66rem 0 30rem; }

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

.link-battlefield div:before { content: ''; width: 431rem; height: 466rem; background: url(../img/link-battlefield-icon.png) no-repeat center/cover; position: absolute; top: -64rem; left: -42rem; z-index: -1; }

.link-battlefield div:after { content: ''; width: 93rem; height: 133rem; background: url(../img/link-battlefield-after.png) no-repeat center/cover; position: absolute; left: -8rem; bottom: 10rem; }

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

.link-battlefield p { height: 160rem; width: 400rem; font-size: 28rem; color: #926c42; }

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

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

.link-update { display: flex; width: 1914rem; height: 435rem; padding: 40rem 60rem; background: url(../img/link-update.png) no-repeat center/cover; margin-top: 60rem; }

.link-update i { flex: none; display: flex; justify-content: center; align-items: center; width: 459rem; height: 354rem; 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; margin-left: 25rem; padding-left: 70rem; }

.link-update strong { flex: none; display: flex; align-items: center; width: 1287rem; height: 84rem; font-size: 38rem; color: #db712b; padding-left: 340rem; background: url(../img/link-update-title.png) no-repeat center/cover; margin-left: -70rem; }

.link-update p { font-size: 28rem; color: #926c42; padding: 30rem 80px 30px 0; }

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

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

.link-activity { display: flex; padding-top: 35rem; }

.link-activity li { display: flex; flex-direction: column; align-items: center; width: 620rem; height: 499rem; padding: 30rem 50rem 0; background: url(../img/link-activity.png) no-repeat center/cover; margin: 0 15rem; }

.link-activity li > img { width: auto; height: 46rem; }

.link-activity div { display: flex; justify-content: center; align-items: center; width: 499rem; height: 272rem; position: relative; margin: 20rem 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 a { display: flex; justify-content: center; align-items: center; width: 254rem; height: 76rem; font-size: 42rem; color: #926c42; font-family: 'hysw'; background: url(../img/link-battlefield-btn.png) no-repeat center/100%; }

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

.system-box { display: flex; flex-direction: column; width: 1872rem; height: 994rem; padding: 110rem 60rem 70rem; background: url(../img/system-box.png) no-repeat center/cover; margin: -20rem 0 50rem; }

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

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

.system-scroll::-webkit-scrollbar { width: 10rem; }

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

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

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

.system-scroll img { align-self: center; width: auto; height: 62rem; margin: 20rem 0 30rem; }

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

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

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

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

.system-box2 { height: 677rem; background-image: url(../img/system-box1.png); }

.carnival-1 .system-box { justify-content: flex-start; align-items: center; }

.carnival-1 img { width: 1463rem; }

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

.carnival-activity li { display: flex; flex-direction: column; align-items: center; width: 1908rem; height: 434rem; padding-top: 35rem; background: url(../img/carnival-activity-0.png) no-repeat center/cover; }

.carnival-activity li:first-child { height: 551rem; margin-bottom: 20rem; }

.carnival-activity li:first-child dd { width: 286rem; height: 430rem; background-image: url(../img/carnival-activity-item-big.png); }

.carnival-activity li:first-child p:before, .carnival-activity li:first-child p:after { width: 717rem; background-image: url(../img/carnival-activity-title-big.png); }

.carnival-activity li:first-child i { margin-left: 0; }

.carnival-activity li:nth-child(2) { width: 797rem; background-image: url(../img/carnival-activity-1.png); }

.carnival-activity li:nth-child(3) { width: 1093rem; background-image: url(../img/carnival-activity-1.png); margin-left: 18rem; }

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

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

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

.carnival-activity dl { display: flex; }

.carnival-activity dd { display: flex; flex-direction: column; align-items: center; width: 279rem; height: 306rem; padding-top: 24rem; background: url(../img/carnival-activity-item.png) no-repeat center/cover; margin: 0 10rem; position: relative; }

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

.carnival-activity strong { font-size: 34rem; color: #633211; }

.carnival-activity span { font-size: 20rem; color: #633211; }

.carnival-activity i { flex: auto; display: flex; justify-content: center; align-items: center; width: 100%; margin-left: 3rem; }

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

.carnival-activity a { display: flex; justify-content: center; align-items: center; width: 168rem; height: 50rem; font-size: 26rem; color: #926c42; font-family: 'hysw'; background: url(../img/link-battlefield-btn.png) no-repeat center/100%; position: absolute; left: 50%; bottom: 15rem; transform: translateX(-50%); }

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

.carnival-boss { display: flex; flex-direction: column; margin-top: 40rem; }

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

.carnival-boss li div { width: 100%; height: 771rem; padding: 30rem; 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; }

.carnival-boss li i img { width: 1753rem; height: auto; }

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

.fashion-aslide { display: flex; flex-direction: column; position: fixed; top: 50%; right: 0; transform: translateY(-50%); opacity: 0; pointer-events: none; z-index: 111; }

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

.fashion-aslide li { display: flex; justify-content: center; align-items: center; width: 299rem; height: 69rem; font-size: 38rem; color: #d98942; cursor: pointer; }

.fashion-aslide li.active { color: #ffdb95; background: url(../img/fashion-2-aslide.png) no-repeat center/cover; }

.fashion-1-box { display: flex; align-items: center; margin: 50rem 0 0; position: relative; }

.fashion-1-box:last-child { margin: 0 0 50rem -50rem; }

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

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

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

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

.fashion-1-item li:last-child { margin-bottom: 0; }

.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: 36rem; color: #ffebaf; }

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

.fashion-1-item strong { font-size: 44rem; color: #ffebaf; }

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

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

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

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

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

.fashion-1-role div { display: flex; width: 130rem; height: 430rem; background: url(../img/fashion-1-desc.png) no-repeat center/cover; padding: 80rem 12rem 0 24rem; position: absolute; top: 180rem; left: 44rem; }

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

.fashion-1-role strong { width: 46rem; font-size: 28rem; color: #572209; line-height: 46rem; writing-mode: vertical-rl; text-orientation: upright; padding-top: 30rem; }

.fashion-1-role em { font-size: 20rem; }

.fashion-1-role p { font-size: 24rem; color: #572209; position: absolute; left: 50%; bottom: 40rem; transform: translateX(-50%); }

.fashion-1-role a { width: 150rem; height: 150rem; background: url(../img/dia-swiper-play.png) no-repeat center/cover; position: absolute; top: 80rem; right: 60rem; z-index: 11; }

.fashion-1-toggle { display: flex; flex-direction: column; position: absolute; top: 50%; right: 0; transform: translate(150%, -50%); }

.fashion-1-toggle a { display: flex; justify-content: center; align-items: center; width: 106rem; height: 106rem; font-size: 32rem; color: #8f5c24; text-align: center; line-height: 1; padding: 0 10rem; background: url(../img/fashion-3-pagination.png) no-repeat center/cover; position: relative; margin: 15rem 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: 30rem; height: 64rem; background: url(../img/fashion-3-pagination-after.png) no-repeat center/cover; position: absolute; top: 50%; left: 0; transform: translate(-85%, -50%); }

.fashion-2-swiper { display: flex; flex-direction: column; align-items: center; margin-bottom: 110rem; }

.fashion-2-swiper .swiper { width: 1600rem; height: auto; background: url(../img/fashion-2-swiper.png) no-repeat center/1226rem 811rem; margin: 0; }

.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: 1266rem; height: 811rem; position: relative; margin-top: 30rem; }

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

.fashion-2-box p { font-size: 24rem; color: #ffdb95; position: absolute; left: 50%; bottom: 90rem; transform: translateX(-50%); }

.fashion-2-intro { display: flex; width: 201rem; height: 664rem; background: url(../img/fashion-2-desc.png) no-repeat center/cover; padding: 180rem 18rem 160rem 40rem; position: absolute; top: 30rem; left: 250rem; }

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

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

.fashion-2 .swiper-prev, .fashion-2 .swiper-next { align-self: center; width: 103rem; height: 100rem; background: url(../img/skill-prev.png) no-repeat center/cover; position: absolute; top: 50%; left: 0; 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); left: auto; right: 0; }

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

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

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

.fashion-3-swiper { display: flex; align-items: center; position: relative; margin-top: 30rem; }

.fashion-3-swiper .swiper { width: 1748rem; height: auto; position: relative; background: url(../img/fashion-3-swiper.png) no-repeat center/cover; }

.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: 1017rem; }

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

.fashion-3-swiper p { display: flex; position: absolute; top: 130rem; left: 160rem; }

.fashion-3-swiper p span, .fashion-3-swiper p strong { font-size: 54rem; color: #ffebaf; writing-mode: vertical-rl; text-orientation: upright; position: relative; }

.fashion-3-swiper p span { margin-right: 15rem; }

.fashion-3-swiper p span:after { content: ''; width: 11rem; height: 227rem; background: url(../img/fashion-3-swiper-after.png) no-repeat center/cover; position: absolute; top: 0; right: 0; transform: translateX(100%); }

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

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

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

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

.fashion-3 .swiper-pagination { display: flex; flex-direction: column; justify-content: center; width: auto; position: absolute; top: 0; right: 70rem; left: auto; }

.fashion-3 .swiper-pagination span { flex: none; display: flex; justify-content: center; align-items: center; width: 106rem; height: 106rem; font-size: 38rem; 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: 5rem 0 !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: 30rem; height: 64rem; background: url(../img/fashion-3-pagination-after.png) no-repeat center/cover; position: absolute; top: 50%; left: 0; transform: translate(-85%, -50%); }

.fashion-3 .swiper-pagination span:nth-child(1), .fashion-3 .swiper-pagination span:nth-child(9) { transform: translateX(-167rem); }

.fashion-3 .swiper-pagination span:nth-child(2), .fashion-3 .swiper-pagination span:nth-child(8) { transform: translateX(-95rem); }

.fashion-3 .swiper-pagination span:nth-child(3), .fashion-3 .swiper-pagination span:nth-child(7) { transform: translateX(-37rem); }

.fashion-3 .swiper-pagination span:nth-child(4), .fashion-3 .swiper-pagination span:nth-child(6) { transform: translateX(-8rem); }

.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: 1547rem; height: 844rem; padding: 100rem 100rem; background: url(../img/dia-box.png) no-repeat center/cover; position: absolute; top: 50%; left: 56.6%; transform: translate(-50%, -50%); }

.dia-close { width: 87rem; height: 87rem; background: url(../img/dia-close.png) no-repeat center/cover; position: absolute; top: 20rem; right: -100rem; }

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

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

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

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

.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 { width: 2546rem; height: 100%; padding: 0; background: none; left: 50%; }

.dia-swiper .dia-close { width: 102rem; height: 76rem; background-image: url(../img/dia-swiper-close.png); position: fixed; top: 132rem; left: 75rem; transform: translate(0, 0); z-index: 11111; }

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

.dia-swiper-big { width: 2546rem; height: 1440rem; }

.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 a { width: 207rem; height: 207rem; 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: 1602rem; margin-top: 30rem; position: absolute; left: 50%; bottom: 70rem; transform: translateX(-50%); }

.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: 250rem; height: 142rem; 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: 635rem; height: 380rem; padding: 50rem 0; background-image: url(../img/dia-tips.png); }

.dia-tips .dia-close { display: none; }

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

.dia-btn { display: flex; }

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

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

.dia-video .dia-close { top: 0; right: -100rem; }

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

.dia-mp4 { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; }