body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, input, select, textarea, div, td, th, tr, dt, dd, dl, a { margin: 0; padding: 0; }

ul, ol { list-style: none; }

em, i { font-style: normal; }

u { text-decoration: none; }

table { border-spacing: 0; border-collapse: collapse; margin: inherit; }

img { border: none; vertical-align: middle; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }

input, select, button { vertical-align: middle; outline: none; }

a { text-decoration: none; color: #666; -webkit-transition: color 0.2s linear; transition: color 0.2s linear; }

.fl { float: left; }

.fr { float: right; }

body { min-width: 1200px; font-family: "Microsoft YaHei", "Arial", "Heiti SC"; background: #f2f5f7; }

.wrap { width: 1200px; margin: 0 auto; }

.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(1); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); -webkit-filter: gray; filter: gray; }

.clear { clear: both; }

.clear::after { content: ""; display: block; clear: both; }

.news_foot_c, .news_foot { height: auto; }

.top { width: 100%; height: 85px; background: #1e222d; }

.top .top_inner { height: 100%; }

.top .top_inner .logo { float: left; width: 137px; height: 36px; margin-top: 25px; margin-right: 40px; padding: 0; }

.top .top_inner .logo img { width: 137px; height: 36px; }

.top .top_inner .top_btn { float: left; margin-top: 27px; }

.top .top_inner a { display: inline-block; width: auto; padding: 5px 15px; color: #ccc; font-size: 16px; }

.top .top_inner a.on { color: #ff6600; }

.top .top_inner a:hover { color: #ff6600; }

.top .top_inner .search { float: right; width: 219px; height: 31px; border: 1px solid #ff6600; margin-top: 27px; margin-left: 30px; }

.top .top_inner .search .search_area { width: 65px; height: 100%; color: #ff6600; background: #fff; text-align: center; line-height: 31px; float: left; }

.top .top_inner .search .search_con { float: left; width: 175px; height: 31px; border: 0; }

.top .top_inner .search .btn { float: left; width: 44px; height: 31px; background: url("https://www.ali213.net/zt/images/sousuo.jpg") no-repeat center; border: 0; }

.con { width: 1200px; margin: 0 auto; }

#ali213SSO .ali213SSO-online-avatar-username-link .ali213SSO-online-avatar { vertical-align: sub; margin-bottom: 17px; }

#ali213SSO .ali213SSO-info-holder { bottom: -100px; }

.bbs .s_content, .bbs .ali-comment-box-tit strong, .bbs .ali-comment-article-join-w, .bbs .ali-comment-article-name-w { color: #fff; }

.bbs .ali_page_fenye_comment { margin-top: 30px; }

.bbs .ali_page_fenye_comment a { padding: 5px 10px; margin: 0 4px; border-radius: 3px; background: #333; color: #fff; border: none; }

.bbs .ali_page_fenye_comment a:hover, .bbs .ali_page_fenye_comment a.currpage_comment:link { background-image: -webkit-gradient(linear, left top, right top, from(#d83e39), to(#992926)); background-image: linear-gradient(to right, #d83e39, #992926); }

#page { margin: 0 auto; padding: 10px 0 20px; width: 100%; overflow: hidden; text-align: center; }

#page a, #page span { display: inline-block; width: auto; padding: 0 15px; height: 36px; text-align: center; line-height: 36px; color: #333; font-size: 15px; background: #fff; border-radius: 3px; border: 1px solid #e6e6e6; margin: 0 5px; -webkit-transition: background 0.2s linear; transition: background 0.2s linear; }

#page span { background-color: var(--ThemeColor); color: #fff; border-color: var(--ThemeColor); -webkit-box-shadow: 1px 4px 8px var(--ThemeColor2); box-shadow: 1px 4px 8px var(--ThemeColor2); }

#page a:hover, #page .activP { background-color: var(--ThemeColor); color: #fff; }

#page .prevPage i, #page .nextPage i { display: inline-block; width: 12px; height: 20px; vertical-align: middle; margin-bottom: 3px; }

#page .MorePage { background: #fff !important; color: var(--ThemeColor) !important; }

#page .nextPage i { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.TabBd .item + .item { display: none; }

.ContentWrap { width: 100%; overflow: hidden; min-height: calc(100vh - 208px); background: url(../images/lostark/pagebg.png) no-repeat center top; position: relative; z-index: 2;background-size: 100%; }

.ContentWrap .MainBox { width: 1200px; margin: 15px auto 0; overflow: hidden; }

.ContentWrap .MainTitle { width: 1200px; height: 70px; text-align: center; margin: 30px auto 0 auto; overflow: hidden; }

.ContentWrap .MainTitle img { height: 70px; display: block; margin: 0 auto; }

.ContentWrap .Main1 { width: 100%; position: relative; height: 60px; }

.ContentWrap .Main1 .WebGameNav { height: 60px; width: 100%; position: relative; z-index: 3; background: rgba(100, 100, 100, 0.6); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.35); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.35); }

.ContentWrap .Main1 .WebGameNav .logo { display: block; height: 64px; background: url(../images/lostark/logo.png) no-repeat; background-size: auto 100%; width: 250px; margin-left: 20px; }

.ContentWrap .Main1 .WebGameNav ul { overflow: hidden; }

.ContentWrap .Main1 .WebGameNav ul li { float: left; height: 60px; position: relative; width: 145px; margin-left: 5px; }

.ContentWrap .Main1 .WebGameNav ul li a { display: block; font-size: 16px; color: #fff; text-align: center; }

.ContentWrap .Main1 .WebGameNav ul li a:hover { color: #ecb47f; }

.ContentWrap .Main1 .WebGameNav ul li a span { display: block; font-weight: bold; margin: 9px 0 0; }

.ContentWrap .Main1 .WebGameNav ul li a i { font-weight: 200; font-size: 14px; }

.ContentWrap .Main1 .WebGameNav ul li.on a { color: #ecb47f; }

.ContentWrap .Main1 .WebGameNav.on { position: fixed; top: 0; }

.ContentWrap .Main2 { height: 458px; margin-top: 550px; }

.ContentWrap .Main2 .downlbtn { display: block; margin: 20px auto 50px; height: 68px; line-height: 48px; width: 360px; background: url(../images/lostark/btnbg.png) no-repeat; background-size: 100% auto; letter-spacing: 11.5px; text-align: center; font-size: 22px; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }

.ContentWrap .Main2 .downlbtn:hover { opacity: 0.88; }

.ContentWrap .Main2 .M2L { width: 590px; height: 320px; background: rgba(0, 0, 0, 0.35); }

.ContentWrap .Main2 .M2L .PicItems { height: 320px; }

.ContentWrap .Main2 .M2L .PicItems .swiper-slide a { display: block; height: 100%; }

.ContentWrap .Main2 .M2L .PicItems .swiper-slide a img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.ContentWrap .Main2 .M2L .PicItems .swiper-pagination { bottom: 12px; text-align: right; }

.ContentWrap .Main2 .M2L .PicItems .swiper-pagination .swiper-pagination-bullet { background: #fff; border-radius: 0; width: 10px; height: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 0 8px; opacity: 1; }

.ContentWrap .Main2 .M2L .PicItems .swiper-pagination .swiper-pagination-bullet-active { background: #ecb47f; }

.ContentWrap .Main2 .M2R { width: 600px; height: 320px; }

.ContentWrap .Main2 .M2R .TabHd { width: 100%; overflow: hidden; float: left; }

.ContentWrap .Main2 .M2R .TabHd .item { display: block; float: left; width: 193px; height: 80px; background: url(../images/lostark/tabBg.png) no-repeat; background-size: 100% 100%; position: relative; cursor: pointer; }

.ContentWrap .Main2 .M2R .TabHd .item span { font-size: 30px; color: #fff; font-weight: bold; letter-spacing: 5px; float: left; line-height: 80px; margin-left: 10px; }

.ContentWrap .Main2 .M2R .TabHd .item img { display: block; position: absolute; bottom: 0; right: 0; max-height: 80px; max-width: 70px; width: auto; }

.ContentWrap .Main2 .M2R .TabHd .item:nth-child(2) img { height: 90px; }

.ContentWrap .Main2 .M2R .TabHd .on { background: url(../images/lostark/tabBgHover.png) no-repeat; background-size: 100% 100%; }

.ContentWrap .Main2 .M2R .TabHd .item + .item { margin-left: 10px; }

.ContentWrap .Main2 .M2R .TabBd { background: rgba(0, 0, 0, 0.35); width: 100%; height: 196px; margin-top: 10px; overflow: hidden; float: left; }

.ContentWrap .Main2 .M2R .TabBd .item li { height: 25px; line-height: 25px; padding: 6px 0; font-size: 14px; border-bottom: 1px dashed #878787; color: #fff; }

.ContentWrap .Main2 .M2R .TabBd .item li .tag { display: block; float: left; height: 22px; width: 60px; line-height: 22px; margin-top: 2px; color: #fff; border-radius: 3px; }

.ContentWrap .Main2 .M2R .TabBd .item li .bt { float: left; width: 460px; height: 25px; line-height: 25px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; display: block; margin: 0 6px; }

.ContentWrap .Main2 .M2R .TabBd .item li:hover .bt, .ContentWrap .Main2 .M2R .TabBd .item li:hover .time { color: #d9001b; }

.ContentWrap .Main2 .M2R .TabMore { background: rgba(0, 0, 0, 0.35); width: 100%; height: 34px; }

.ContentWrap .Main2 .M2R .TabMore .item + .item { display: none; }

.ContentWrap .Main2 .M2R .TabMore .item { display: block; float: right; font-size: 12px; color: #fff; width: 62px; height: 22px; line-height: 22px; background: url(../images/lostark/MoreBox.png) no-repeat; background-size: 100% 100%; margin: 4px 6px 6px 0; }

.ContentWrap .Main3 { height: 720px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: unset; }

.ContentWrap .Main3 .figureBox { width: 680px; height: 580px; position: absolute; z-index: 2; left: 0; top: 115px; }

.ContentWrap .Main3 .figureBox .item { position: relative; width: 100%; height: 100%; }

.ContentWrap .Main3 .figureBox .item .bg { max-width: 100%; max-height: 100%; position: relative; z-index: 1; top: 50%; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

.ContentWrap .Main3 .figureBox .item .ren { max-width: 100%; max-height: 100%; height: auto; position: absolute; top: 0; left: 50%; z-index: 2; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }

.ContentWrap .Main3 .figureBox .primaryJob, .ContentWrap .Main3 .figureBox .primaryJob .items, .ContentWrap .Main3 .figureBox .primaryJob .item, .ContentWrap .Main3 .figureBox .secondaryJob, .ContentWrap .Main3 .figureBox .secondaryJob .items, .ContentWrap .Main3 .figureBox .secondaryJob .item { display: none; width: 100%; height: 100%; }

.ContentWrap .Main3 .DescBox { width: 500px; height: 200px; position: absolute; z-index: 2; right: 0; top: 115px; }

.ContentWrap .Main3 .DescBox .item { display: none; }

.ContentWrap .Main3 .DescBox .item strong { display: block; height: 44px; line-height: 44px; width: 100%; font-size: 32px; color: #fff; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ContentWrap .Main3 .DescBox .item .desc { display: block; width: 100%; position: relative; margin-top: 5px; padding-top: 5px; line-height: 25px; height: 75px; overflow: hidden; text-align: left; color: #fff; font-size: 14px; }

.ContentWrap .Main3 .DescBox .item .desc::before { content: ''; display: block; width: 100%; height: 2px; background: url(../images/lostark/line.png) no-repeat; background-size: 100% 100%; position: absolute; top: 0; left: 0; }

.ContentWrap .Main3 .DescBox .item .linkbtn { display: block; float: right; width: 140px; height: 36px; background: url(../images/lostark/btn.png) no-repeat; background-size: 100%; margin-top: 10px; }

.ContentWrap .Main3 .DescBox .item .linkbtn:hover { opacity: .8; }

.ContentWrap .Main3 .DescBox .primaryJob, .ContentWrap .Main3 .DescBox .primaryJob .items, .ContentWrap .Main3 .DescBox .secondaryJob, .ContentWrap .Main3 .DescBox .secondaryJob .items { display: none; }

.ContentWrap .Main3 .JobTab { width: 500px; height: 300px; position: absolute; z-index: 3; right: 0; top: 310px; padding: 0 50px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.ContentWrap .Main3 .JobTab::after { display: block; content: ""; width: 100%; height: 1px; background: #ecb47f; position: absolute; top: 35px; left: 0; opacity: 0.4; }

.ContentWrap .Main3 .JobTab .swiper-slide { float: left; }

.ContentWrap .Main3 .JobTab .joblist { position: relative; }

.ContentWrap .Main3 .JobTab .joblist .Mainjob { width: 70px; margin: 0 auto; cursor: pointer; }

.ContentWrap .Main3 .JobTab .joblist .Mainjob:hover span { font-weight: bold; color: #ecb47f; }

.ContentWrap .Main3 .JobTab .joblist .img { width: 60px; height: 60px; background: url(../images/lostark/jobbg.png) no-repeat; background-size: 100%; margin: 2px auto; display: block; }

.ContentWrap .Main3 .JobTab .joblist .img img { max-width: 60px; max-height: 60px; position: relative; margin: 50% 0 0 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.ContentWrap .Main3 .JobTab .joblist span { display: block; color: #fff; font-size: 13px; line-height: 20px; height: 20px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ContentWrap .Main3 .JobTab .joblist:hover .list { display: block; }

.ContentWrap .Main3 .JobTab .joblist .list { display: none; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(66, 55, 46, 0.8)), to(transparent)); background-image: linear-gradient(to bottom, rgba(66, 55, 46, 0.8) 50%, transparent 100%); width: 70px; margin: 5px auto; padding: 5px 0; }

.ContentWrap .Main3 .JobTab .joblist .list li { cursor: pointer; }

.ContentWrap .Main3 .JobTab .joblist .list li:hover span { font-weight: bold; }

.ContentWrap .Main3 .JobTab .swiper-button-next, .ContentWrap .Main3 .JobTab .swiper-button-prev { background: #ecb47f; width: 20px; height: 40px; top: 38px; }

.ContentWrap .Main3 .JobTab .swiper-button-next::after, .ContentWrap .Main3 .JobTab .swiper-button-prev::after { color: #fff; font-size: 14px; font-weight: bold; }

.ContentWrap .Main4 .PicItems2 { height: 350px; position: relative; margin-top: 30px; }

.ContentWrap .Main4 .PicItems2 .swiper-slide a { display: block; height: 100%; }

.ContentWrap .Main4 .PicItems2 .swiper-slide a img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.ContentWrap .Main4 .PicItems2 .swiper-button-next::after, .ContentWrap .Main4 .PicItems2 .swiper-button-prev::after { color: #fff; }

.ContentWrap .Main4 .PicItems2 .swiper-pagination { bottom: 20px; text-align: right; }

.ContentWrap .Main4 .PicItems2 .swiper-pagination .swiper-pagination-bullet { background: #fff; border-radius: 0; width: 10px; height: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: 0 15px 0 0; opacity: 1; }

.ContentWrap .Main4 .PicItems2 .swiper-pagination .swiper-pagination-bullet-active { background: #ecb47f; }

.ContentWrap .Main4 .list { overflow: hidden; width: 105%; }

.ContentWrap .Main4 .list a { display: block; float: left; width: 285px; height: 170px; position: relative; overflow: hidden; border-radius: 10px; margin: 20px 20px 0 0; }

.ContentWrap .Main4 .list a img { width: 100%; height: 100%; }

.ContentWrap .Main4 .list a p { width: 100%; height: 30px; line-height: 30px; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; bottom: 0; left: 0; color: #fff; font-size: 15px; background: rgba(0, 0, 0, 0.6); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }

.ContentWrap .Main4 .list a:hover img { opacity: 0.8; }

.ContentWrap .Main4 .list a:hover p { color: #ecb47f; }

.ContentWrap .Main5 { overflow: hidden; position: relative; }

.ContentWrap .Main5 .AudioVisual { width: 100%; height: 550px; border-radius: 10px; margin: 15px 0 30px; padding: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; }

.ContentWrap .Main5 .AudioVisual .TabHd { position: absolute; z-index: 2; bottom: 0; left: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#7f2b14), to(#b8542d)); background-image: linear-gradient(#7f2b14, #b8542d); width: 750px; }

.ContentWrap .Main5 .AudioVisual .TabHd .item { display: block; float: left; width: 50%; height: 55px; text-align: center; line-height: 55px; font-size: 18px; font-weight: bold; text-indent: 24px; color: #ecb47f; cursor: pointer; }

.ContentWrap .Main5 .AudioVisual .TabHd .item.on { background: #cc9145; color: #fff; }

.ContentWrap .Main5 .AudioVisual .TabHd .item:nth-child(1).on { -webkit-clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%); }

.ContentWrap .Main5 .AudioVisual .TabHd .item:nth-child(2).on { -webkit-clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0% 100%); }

.ContentWrap .Main5 .AudioVisual .TabBd { width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0; }

.ContentWrap .Main5 .AudioVisual .TabBd .VideoItem { height: 260px; width: 420px; position: relative; float: left; margin: 15px 0 0 15px; overflow: hidden; }

.ContentWrap .Main5 .AudioVisual .TabBd .VideoItem img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.ContentWrap .Main5 .AudioVisual .TabBd .VideoItem .PlayBtn { width: 80px; height: 80px; position: absolute; z-index: 3; cursor: pointer; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; left: 50%; top: 50%; margin: -40px 0 0 -40px; background: url(../images/lostark/video.png) no-repeat; background-size: 100%; }

.ContentWrap .Main5 .AudioVisual .TabBd .VideoItem .PlayBtn:hover { opacity: 0.6; }

.ContentWrap .Main5 .AudioVisual .TabBd .VideoItem p { width: 100%; height: 45px; line-height: 45px; padding: 0 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; bottom: 0; left: 0; color: #fff; font-size: 16px; background: rgba(0, 0, 0, 0.6); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; }

.ContentWrap .Main5 .AudioVisual .TabBd .item .VideoItem:nth-child(1) { width: 750px; height: 465px; margin-left: 0; }

.ContentWrap .Main5 .AudioVisual .Wallpaper { position: relative; width: 100%; margin: 10px auto; padding: 15px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-slide { width: 760px; height: 400px; }

.ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 10px; }

.ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-button-prev, .ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-button-next { background: url(../images/lostark/arrow.png) no-repeat; background-size: 100%; width: 30px; height: 60px; }

.ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-button-prev::after, .ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-button-next::after { display: none; }

.ContentWrap .Main5 .AudioVisual .Wallpaper .swiper-button-next { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

.ContentWrap .Main6 { padding: 15px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #272c49; border-radius: 6px 6px 0 0; }

.listTabBd ul::-webkit-scrollbar { width: 6px; background: none; }

.listTabBd ul::-webkit-scrollbar-thumb { background-image: -webkit-gradient(linear, left top, left bottom, from(#d83e39), to(#992926)); background-image: linear-gradient(to bottom, #d83e39, #992926); border-radius: 6px; }