/**
 * Date: 2019.6.28
 * Update: 2019.6.28
 * Developer: Mine
 * Theme: 新三国志大战M
 */

.insideWide {
  margin: 0 auto;
  width: 1000px;
  position: relative;
}
/*============================================
引入字体开始 
==============================================*/
@font-face {
  font-family: "TBMH_0PP";
  src: url(../../../../gw/font/TBMH_0PP.eot) format('eot');
  src: url(../../../../gw/font/TBMH_0PP.eot#iefix) format("embedded-opentype"),
  url(../../../../gw/font/TBMH_0PP.woff) format("woff"),
  url(../../../../gw/font/TBMH_0PP.ttf) format("truetype"),
  url(../../../../gw/font/TBMH_0PP.svg) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "TBMM_0PP";
  src: url(../../../../gw/font/TBMM_0PP.eot) format('eot');
  src: url(../../../../gw/font/TBMM_0PP.eot#iefix) format("embedded-opentype"),
    url(../../../../gw/font/TBMM_0PP.woff) format("woff"),
    url(../../../../gw/font/TBMM_0PP.ttf) format("truetype"),
    url(../../../../gw/font/TBMM_0PP.svg) format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "TBFZTKRLP";
  src: url(../../../../gw/font/TBFZTKRLP.eot) format('eot');
  src: url(../../../../gw/font/TBFZTKRLP.eot#iefix) format("embedded-opentype"),
  url(../../../../gw/font/TBFZTKRLP.woff) format("woff"),
  url(../../../../gw/font/TBFZTKRLP.ttf) format("truetype"),
  url(../../../../gw/font/TBFZTKRLP.svg) format("svg");
  font-weight: 400;
  font-style: normal;
}
/* @font-face {
  font-family: "TBYMH_0PP";
  src: url(http://www.sangokushi-taisen-mobile.com/gw/font/TBYMH_0PP.eot) format('eot');
  src: url(http://www.sangokushi-taisen-mobile.com/gw/font/TBYMH_0PP.eot#iefix) format("embedded-opentype"),
    url(http://www.sangokushi-taisen-mobile.com/gw/font/TBYMH_0PP.woff) format("woff"),
    url(http://www.sangokushi-taisen-mobile.com/gw/font/TBYMH_0PP.ttf) format("truetype"),
    url(http://www.sangokushi-taisen-mobile.com/gw/font/TBYMH_0PP.svg) format("svg");
  font-weight: 400;
  font-style: normal;
} */
/* ===================================================
导航
====================================================== */
.header {
  background: url(../images/home/nav-bg.png) no-repeat top center;
  width: 100%;
  height: 65px;
  min-width: 1200px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.n1 {
  background-image: url(../images/home/nav-column.png);
  width: 130px;
  height: 28px;
  background-position: 0 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 130px;
  top: 22px;
}
.n1:hover {
  background-position: 0 -28px;
  top: 20px;
}
.n2 {
  background-image: url(../images/home/nav-column.png);
  width: 100px;
  height: 28px;
  background-position: -180px 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 310px;
  top: 22px;
}
.n2:hover {
  background-position: -180px -28px;
  top: 20px;
}
.n3 {
  background-image: url(../images/home/nav-column.png);
  width: 70px;
  height: 26px;
  background-position: -326px 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 460px;
  top: 22px;
}
.n3:hover {
  background-position: -326px -28px;
  top: 20px;
  width: 72px;
  height: 32px;
}
.n4 {
  background-image: url(../images/home/nav-column.png);
  width: 62px;
  height: 26px;
  background-position: -450px 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 582px;
  top: 22px;
}
.n4:hover {
  background-position: -450px -28px;
  top: 20px;
  height: 34px;
}
.n5 {
  background-image: url(../images/home/nav-column.png);
  width: 86px;
  height: 26px;
  background-position: -570px 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 704px;
  top: 22px;
}
.n5:hover {
  background-position: -570px -28px;
  top: 20px;
  height: 31px;
}
.n6 {
  background-image: url(../images/home/nav-column.png);
  width: 48px;
  height: 26px;
  background-position: -710px 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 841px;
  top: 22px;
}
.n6:hover {
  background-position: -710px -28px;
  top: 20px;
  height: 31px;
}
.n7 {
  background-image: url(../images/home/nav-column.png);
  width: 128px;
  height: 26px;
  background-position: -810px 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 938px;
  top: 22px;
}
.n7:hover {
  background-position: -810px -28px;
  top: 20px;
  height: 31px;
}
/* ===================================================
首页底部
====================================================== */
.footer {
  background: url(../images/home/footer-bg2.png) no-repeat center top;
  width: 100%;
  height: 694px;
  min-width: 1200px;
  position: relative;
  overflow: hidden;
}
.community-slo {
  width: 331px;
  height: 74px;
  position: absolute;
  top: 98px;
  left: 84px;
}
.footer-GP {
  width: 156px;
  height: 46px;
  position: absolute;
  top: 182px;
  left: 90px;
}
.footer-APP {
  width: 156px;
  height: 46px;
  position: absolute;
  top: 182px;
  left: 262px;
  cursor: pointer;
}
.footer-right {
  width: 584px;
  height: 140px;
  position: absolute;
  right: 104px;
  top: 92px;
}
.footer-link {
  position: absolute;
  color: #0082db;
  font-size: 16px;
  text-decoration: underline;
  font-family: "TBFZTKRLP";
}
.footer-link::before {
  content: '';
  background: url(../images/footer/link-icon.png) no-repeat;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0; 
  left: -25px;
}
.footer-link1 {
  top: 508px;
  left: 162px;
}
.footer-link2 {
  top: 508px;
  left: 292px;
}
.footer-link3 {
  top: 508px;
  left: 424px;
}
.footer-link4 {
  top: 508px;
  left: 658px;
}
.footer-link:hover {
  color: #ffa200;
}
.community-box {
  position: relative;
  top: 377px;
  left: 0px;
  text-align: center;
}
.community-box a {
  display: inline-block;
  width: 98px;
  height: 99px;
  margin-left: 10px;
  transition: all 0.3s ease-in-out;
}
.community-box a:first-child {
  margin-left: 0;
}
.footer-tw {
  background: url(../images/home/twitter-0.png) no-repeat;
}
.footer-fb {
  background: url(../images/home/facebook-0.png) no-repeat;
}
.footer-youtube {
  background: url(../images/home/youtube-0.png) no-repeat;
}
.footer-tw:hover {
  background: url(../images/home/twitter-1.png) no-repeat;
}
.footer-fb:hover {
  background: url(../images/home/facebook-1.png) no-repeat;
}
.footer-youtube:hover {
  background: url(../images/home/youtube-1.png) no-repeat;
}
/* ===================================================
四条线动画
====================================================== */
.card_border {
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 280px;
  height: 140px;
  top: 50%;
  margin-top: -72px;
  left: 50%;
  margin-left: -140px;
  opacity: 1;
  /* border: 1px solid red; */
}

.card_border.animate .border_top,.card_border.animate .border_left,.card_border.animate .border_bottom,.card_border.animate .border_right {
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.card_border .border {
  -webkit-transition: transform .15s linear;
  -moz-transition: transform .15s linear;
  -ms-transition: transform .15s linear;
  -o-transition: transform .15s linear;
  transition: transform .15s linear;
  background: #bf963f;
}

.card_border .border_top,.card_border .border_bottom {
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
}

.card_border .border_left,.card_border .border_right {
  position: absolute;
  height: 100%;
  width: 1px;
  top: 0;
}

.card_border .border_top {
  top: 0;
  -webkit-transform: translate3d(100%,0,0);
  -moz-transform: translate3d(100%,0,0);
  -ms-transform: translate3d(100%,0,0);
  -o-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
  transition-delay: 0s;
}

.card_border .border_left {
  left: 0;
  -webkit-transform: translate3d(0,-100%,0);
  -moz-transform: translate3d(0,-100%,0);
  -ms-transform: translate3d(0,-100%,0);
  -o-transform: translate3d(0,-100%,0);
  transform: translate3d(0,-100%,0);
  transition-delay: .15s;;
}

.card_border .border_bottom {
  bottom: 0;
  -webkit-transform: translate3d(-100%,0,0);
  -moz-transform: translate3d(-100%,0,0);
  -ms-transform: translate3d(-100%,0,0);
  -o-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
  transition-delay: .3s;
}

.card_border .border_right {
  right: 0;
  -webkit-transform: translate3d(0,100%,0);
  -moz-transform: translate3d(0,100%,0);
  -ms-transform: translate3d(0,100%,0);
  -o-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
  transition-delay: .45s;
}
/*=================================================
dialog通用样式开始 
===================================================*/
#maskLayer {
  display: none;
  position: absolute;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  background: #040001;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
#alertInfo {
  display: none;
  background: rgba(255, 255, 255, 0);
  left: 50%;
  top: -100%;
  position: absolute;
  z-index: 10000;
  width: 100%;
  max-width: 348px;
}
#alertInfo .close {
  position: absolute;
  left: 650px;
  top: -50px;
  overflow: hidden;
  font-size: 0;
  text-indent: -999999px;
  display: block;
  width: 37px;
  height: 37px;
  cursor: pointer;
  background: url(../images/home/close.png) no-repeat center center;
  background-size: 100% 100%;
  z-index: 220;
  -webkit-transition: -webkit-transform ease-in 0.2s;
  transition: -webkit-transform ease-in 0.2s;
  transition: transform ease-in 0.2s;
  transition: transform ease-in 0.2s, -webkit-transform ease-in 0.2s;
}

#alertInfo .close:hover {
  background-position: 0 100%;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
}

.dialog_video {
  position: relative;
  left: 50%;
  margin-left: -517px;
  width: 1034px;
  height: 552px;
}
.video_border {
  position: absolute;
  top: 0;
  left: 0;
}