﻿/*公用*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; }
body, button, input, select, textarea { font-size: 12px; font-family: "Microsoft Yahei",arial; }
em, strong, th, i { font-style: normal; font-weight: normal; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
a { text-decoration: none; cursor: pointer; outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul, li { list-style: none; }
fieldset, img { border: 0; }
input, select, textarea { outline: none; border: none; background: none; }
textarea { resize: none; }
html body { background: #000; width: 100%;}
.none {display: none!important;} 
.noclick{pointer-events: none;}

/*.snk {display: block; position: absolute; width: 138px; height: 38px; top: 45px; left: 110px; z-index: 10; background: url(../images/snk.png) no-repeat;}*/

/* background */
/*.wrapper { z-index: 1; overflow: hidden; text-align: left; zoom: 1; position:relative;min-width:1280px; margin-top: 40px}*/
#wrapper {position:relative;width:100%;overflow:hidden;min-width:1280px;max-width:2560px;margin:0 auto;}
/*.bg { left: 50%; top: 0; width: 1920px; margin-left: -960px; z-index: -1; zoom: 1}
.bg_01 { height: 1080px}
.bg_02 {background: url(../images/bg_body.jpg) no-repeat; height: 1080px}
.bg_03 {background: url(../images/bg_body.jpg) no-repeat; height: 1080px}*/

.section {width: 100%; position: relative;}

.ft_white {color: #fff;}
.ft_yellow {color: #ffd800;}

.section0 {background: url(../images/bg_body.jpg) no-repeat center top; height: 1050px; position:relative; z-index: 10;}
.section0 .d-nr {margin-left: 20%; padding-top: 200px; animation: hm2 .7s ease-in-out forwards;}
.section0 .d-nr .d1 {position: relative; z-index: 20; height: 630px;}
.section0 .d-nr ul {overflow: hidden;}
.section0 .d-nr ul li {float: left; margin-right: 40px;height: 100px}
.section0 .d-nr ul li+li {padding-top: 0px;}
.d1-bt {font-size: 85px; color: #4b4e5d;line-height: 85px;}
.d1-sp1 {font-size: 48px; color: #cc985c;}
.d1-sp2 {color: #4c4f5e; font-size: 16px;}
.d1-bt,.a-js {font-family: serif;font-weight:bold;}

/*.d1-sp1 {font-family: 'times_new_romanregular';}*/
.p-hx {background: url(../images/hx.png) no-repeat; width: 489px; height: 9px; margin: 0 0 10px;}
.d1-p1 {color: #cc985c; font-size: 26px; padding-bottom: 10px;height: 36px;}
.d1-p2 {color: #4b4e5d; font-size: 16px; width: 650px; line-height: 26px; padding-bottom: 10px; height: 88px;}
.a_video {display: block; background: url(../images/btn_video.png) no-repeat; width: 486px; height: 270px; margin: 10px 0 0 0; position: relative; z-index: 20;}
.a_gstc:hover {animation: h-scale .3s ease-in-out forwards;}
@keyframes h-scale {
  0%   {transform: scale(1);}
  100% {transform: scale(1.02);}
}
.p_video {position: absolute; top: 264px; left: 3px; z-index: 10; width: 486px; height: 270px; border: 3px solid #dac6a5; filter: brightness(50%);}
.a_gstc {display: block;background: url(../images/btn_gushi.png) no-repeat; width: 190px; height: 59px; margin: 30px 0 0 145px;}
.p-rw-bg {/*background: url(../images/b_lethita.png) no-repeat;*/ width: 1710px; height: 1050px; margin: -826px 0 0 -122px; position: relative; z-index: 15; animation: hm1 .7s ease-in-out forwards;}
@keyframes hm1 {
  0%   {transform: translateX(50px); opacity: 0;}
  100% {transform: translateX(0); opacity: 1;}
}
@keyframes hm2 {
  0%   {opacity: 0;}
  100% {opacity: 1;}
}

/*.section1 {height: 1080px; position:relative; z-index: 11; margin-top: -1080px;}
.section1 .c1 {width: 1280px; margin: 0 auto; position: relative; padding-top: 75px;}
.section1 .c1 .p_rw {background: url(../images/bg_rw.png) no-repeat; width: 1005px; height: 1333px; position: absolute; top: 10px; right: 50px;}*/
.section1 {background: #20222c; width: 210px; height: 100%; position: absolute; top: 0; left: 0; z-index: 15;}
.section1 .logo{display: block;position: absolute;width: 130px;height: 82px;top: 20px;left: 40px; z-index: 30; background: url(../images/bg_logo.png) no-repeat;}
.section1 .d-nav {width: 210px; height:910px; overflow-x: hidden;overflow-y: auto; margin-top: 140px;}
.section1 .d-nav ul {overflow: hidden;}
.section1 .d-nav ul li {}
.section1 .d-nav ul li a {display: flex; background: url(../images/nav.png) no-repeat 0 -48px; background-size: 200px 96px; width: 200px; height: 48px; justify-content: center; align-items: center; font-size: 22px; color: #a2aabf; letter-spacing: 2px;}
.section1 .d-nav ul li a:hover,.section1 .d-nav ul li a.a-js-h {background-position: 0 0; color: #ffebd3;}

.section2 {height: 1050px; position:relative; z-index: 12; margin-top: -1050px;}
.section2 .c1 {width: 1280px; margin: 0 auto; height: 1050px; position: relative;}
.section2 .c1 .d-nr {background: #fff; width: 1710px; height: 1050px; position: absolute; top: 0; left: 50%; margin-left: -620px;}





/*.popup {
  z-index: 200;
  position: fixed;
  left: 50%;
  top: 50%;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1920px;
  height: 760px;
  background-repeat: no-repeat;
}*/

/*.popup--1 {background: url(../images/tc_1.png) no-repeat;}*/

/*.tc_0 .content_1 {background: url(../images/tc_1.png) no-repeat; width: 1920px; height: 760px; background-size: 1920px 760px;}*/
/*.tc_0 .close_btn {display: block; width: 60px;height: 60px; position: absolute;top: 22px;right: -60px;z-index: 101;}*/

/*.tc {display: none; z-index: 100;   position: fixed;
  left: 50%!important;
  margin-left: -960px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
    width: 1920px;
  height: 760px;
}*/

.s_tc {display: none; z-index: 100; /*height: 800px;*/}
/*.tc_s .close_btn {display: block;width: 53px;height: 53px;position: absolute;top: 0;right: -60px;z-index: 101; background: url(../images/btn_close.png) no-repeat;}*/

.tc_1 .content_1 {background: url(../images/tc1.png) no-repeat; width: 698px; height: 806px;}
.tc_1 .close_btn {display: block;width: 98px;height: 91px;position: absolute;top: 0;right: -80px;z-index: 101; background: url(../images/btn_close.png) no-repeat;}
.tc_1 .content_1 a {position: absolute; top: 400px; width: 104px; height: 91px;}
.tc_1 .content_1 a.a_prev {background: url(../images/btn_prev.png) no-repeat; left: -150px; display: none;}
.tc_1 .content_1 a.a_next {background: url(../images/btn_next.png) no-repeat; right: -150px;}

/*.tc_2 .content_1 {background: url(../images/tc2_1.png) no-repeat; width: 1136px; height: 643px;}*/
/*.tc_2 .close_btn {display: block;width: 53px;height: 53px;position: absolute;top: 0;right: -30px;z-index: 101; background: url(../images/btn_close.png) no-repeat;}*/

.tc_3 .content_1 {background: url(../images/tc3.png) no-repeat; width: 1032px; height: 838px;}
.tc_3 .close_btn {display: block;width: 98px;height: 91px;position: absolute;top: 0;right: -20px;z-index: 101; background: url(../images/btn_close.png) no-repeat;}

.tc_video,.tc_video #video {width: 800px; height: 450px;}
.tc_video .close_btn {display: block;width: 43px;height: 43px; background: url(../images/btn_close.jpg) no-repeat; position: absolute;top: 0;right: -45px;z-index: 101;}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 10px;
    /*height: 10px;*/
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
    border-radius: 20px;
    background-color: #282a36;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 20px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #4a4c5d;
}

.gray { 
    -webkit-filter: grayscale(50%);
    -moz-filter: grayscale(50%);
    -ms-filter: grayscale(50%);
    -o-filter: grayscale(50%);
    
    filter: grayscale(50%);
	
    filter: gray;
	
	/*cursor: default;*/
  color: gray!important;
}


.load {display: none; background: #fff; height: 100%; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;}
.load .load_s {
  position: absolute;
  width:100px;
  height: 50px;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-25px;
  text-align: center;
}
.load .load_img {background: url(../images/load.gif) no-repeat; width: 32px; height: 32px; margin: 0 auto;}
.load .load_num_b {font-size: 20px; font-weight: bold; padding: 5px 0}

.stroke {text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;}

/*.topVid {width:1920px; height: 1080px;display: block; position: absolute; top: 0px; left: 50%; margin-left: -960px; pointer-events: none;overflow: hidden; z-index: 2}*/




#roleSvg1 {width: 835px; height: 183px; position: absolute; top: 220px; left: 0; z-index: 16;}
/*.cls-1{stroke-dasharray:11057; stroke-dashoffset: 0; animation:  cls 5s ease-in-out; -webkit-animation:  cls 5s ease-in-out;}
  @keyframes cls{
      0%{stroke-dashoffset: 11057;}
      100%{stroke-dashoffset:0;}
  }*/
.sn{stroke-dasharray:5082; stroke-dashoffset: 0; animation: sn 5s ease-in-out; -webkit-animation: sn 5s ease-in-out;}
.als{stroke-dasharray:3856; stroke-dashoffset: 0; animation: als 5s ease-in-out; -webkit-animation: als 5s ease-in-out;}

@keyframes sn{
    0%{stroke-dashoffset: 5082;}
    100%{stroke-dashoffset:0;}
}
@keyframes als{
    0%{stroke-dashoffset: 3856;}
    100%{stroke-dashoffset:0;}
}
/*.p_slogan {background: url(../images/slogan.png) no-repeat; width: 937px; height: 499px; z-index: 15; position: absolute; top: 240px; left: -180px;}*/
/*.p_slogan a {display: block; width: 90px; height: 80px; position: absolute; top: 27px; left: 544px;}*/
/*.p_slogan2 {background: url(../images/slogan2.png) no-repeat; width: 522px; height: 131px; z-index: 15; position: absolute; top: 520px; left: 130px;}*/

/*.p_cloud1 {background: url(../images/cloud.png) repeat-x; width: 2083px; height: 237px; z-index: 15; position: absolute; bottom: -12px; left: 0; margin-left: -320px;}*/
/*.p_cloud2 {background: url(../images/cloud.png) no-repeat 0px 0px; width: 2083px; height: 237px; z-index: 15; position: absolute; bottom: -12px; right: 0; margin-right: -320px;}*/



@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -50px, 0);
    transform: translate3d(0, -50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(50px, 0, 0);
    transform: translate3d(50px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-500px, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-500px, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-500px, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-500px, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/*.topVid1 {width:1920px; height: 1080px;display: block; position: absolute; top: 0; left: 50%; margin-left: -960px; pointer-events: none;overflow: hidden; z-index: 12}
.topVid2 {width:1920px; height: 1080px;display: block; position: absolute; top: 0; left: 50%; margin-left: -960px; pointer-events: none;overflow: hidden; z-index: 11}

ul.nav {overflow: hidden; width: 412px; position: absolute; top: 70px; right: 0px; z-index: 30;}
ul.nav li {float: left;}
ul.nav li a {display: block; width: 119px; height: 51px; margin-left: 15px;}
ul.nav li a.a_zc {background: url(../images/btn_zc1.png) no-repeat;}
ul.nav li a.a_zc:hover {background: url(../images/btn_zc2.png) no-repeat;}
ul.nav li a.a_gw {background: url(../images/btn_gw1.png) no-repeat;}
ul.nav li a.a_gw:hover {background: url(../images/btn_gw2.png) no-repeat;}
ul.nav li a.a_xz {background: url(../images/btn_xz1.png) no-repeat;}
ul.nav li a.a_xz:hover {background: url(../images/btn_xz2.png) no-repeat;}*/




.animated {
  -webkit-animation-duration: .7s;
  animation-duration: .7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}




.video_view{ width: 100%; height: 100%; overflow: auto; background: rgba(0,0,0,.50); position: fixed; top: 0; left: 0; z-index: 150; padding-top: 150px; display: none;}
.video_view .view{ width: 720px; border-radius: 30px; background: #ebebeb; margin: 0 auto; position: relative; margin-bottom: 100px; border-radius: 20px;}
.video_view .view .close{ width: 50px; height: 50px; background: url(../images/bg_close.png) no-repeat; position: fixed; top: 180px; left: 50%; margin-left: 362px; text-indent: -9999px; cursor: pointer;}
.video_view .view .top{ width: 50px; height: 50px; background: url(../images/bg_top.png) no-repeat; position: fixed; top: 240px; left: 50%; margin-left: 362px; text-indent: -9999px; cursor: pointer; display: none;}

.video_view .view .txt{font-size: 16px; line-height: 24px; letter-spacing: 2px; color: #4a4d5c; width: 576px; margin: 0 auto; padding: 50px 0;}
.video_view .view .txt h3{text-align: center; color: #d1a473; font-size: 38px; font-weight: bold; text-decoration: underline; text-underline-offset: 10px; height: 70px;}
.video_view .view .txt p,.video_view .view .txt img{ margin-bottom: 20px;width: 576px;}