/* 大屏幕（大桌面显示器，大于等于 1200px） */

/* 中等屏幕（桌面显示器，大于1024小于1200） */
@import url(Pc.css) screen and (min-width: 1024px) and (max-width:1200px);

/* 小屏幕（平板，大于640小于1024） */
@import url(Pad.css) screen and (min-width: 640px) and (max-width: 1024px);

/* 超小屏幕（手机，小于 640px） */
@import url(Mobile.css) screen and (max-width: 640px);


/*
 * PcMode-max
 */
body:after {
  display: block;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
  content: 'Pc';
}

.wrap {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  padding: 0 5px;
}
.PcMode:after {
  content: 'Pc' !important;
}

.UnpcPush,
.MobilePush {
  display: none;
}

/*
 * PcMode-min
 */
@media only screen and (min-width: 1024px) and (max-width: 1200px) {

  .wrap {
    max-width: 1002px;
    ;
  }

}

/*
 * PadMode
 */
@media only screen and (min-width: 640px) and (max-width: 1024px) {

  body:after {
    content: 'Pad';
  }

  body {
    user-select: none;
    -webkit-user-select: none;
  }

  body,
  input,
  textarea,
  button,
  select {
    font-size: 14px;
  }

  .wrap {
    padding-left: 2%;
    padding-right: 2%;
    max-width: none;
  }

  .PcPush {
    display: none;
  }

  .UnpcPush {
    display: block;
  }

}

/*
 * MobileMode
 */
@media only screen and (max-width: 640px) {

  body:after {
    content: 'Mobile';
  }

  body,
  input,
  textarea,
  button,
  select {
    font-size: 16px;
  }

  /*.wrap{padding-left:4%;padding-right:4%; }*/
  .UnmobilePush {
    display: none;
  }

  .MobilePush {
    display: block;
  }

  img[data-src] {
    opacity: 1;
  }

}

/* ---------------------------------------------------------- */
/*                                                            */
/* A media query that captures:                               */
/*                                                            */
/* - Retina iOS devices                                       */
/* - Retina Macs running Safari                               */
/* - High DPI Windows PCs running IE 8 and above              */
/* - Low DPI Windows PCs running IE, zoomed in                */
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in  */
/* - Android hdpi devices and above                           */
/* - Android tvdpi devices, including Google Nexus 7          */
/* - Chrome running on high DPI Macs and PCs                  */
/* - Opera running on high DPI Macs, PCs and mobile devices   */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/* A test for CSS pixel densites can be found here:           */
/* http://bjango.com/articles/min-device-pixel-ratio/         */
/*                                                            */
/*                                  @marcedwards from @bjango */
/*                                                            */
/* ---------------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {

  /* Your code to swap higher DPI images */
  .xykj-section_npark .xykj-media-box {
    background: none;
    color: #fff
  }
}

/* ---------------------------------------------------------- */
/*                                                            */
/* A media query for iphone device                            */
/*                                                            */
/*                                                            */
/* Please note that that this code assumes you'll swap a      */
/* 2× version of your images. If you'd like to supply         */
/* finer increments, other thresholds might be appropriate.   */
/*                                                            */
/*                             hotone1985@sina.com from @tony */
/*                                                            */
/* ---------------------------------------------------------- */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2) {

  /*iphone4*/
  .xykj-ghost-center p {
    padding: 0;
    font-size: 0.9rem;
  }
}

@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2) {

  /*iphone5*/
  .xykj-ghost-center p {
    padding: 0;
    font-size: 0.9rem;
  }
}

@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2) {

  /*iphone6*/
  .join_step .join_step_c {
    height: 180px;
  }
}

@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2) {
  /*iphone6+*/

}

/* ---------------------------------------------------------- */
/*                                                            */
/* 专门针对ANDROID设备                                        */
/*                                                            */
/* 可解决安卓不同分辨率引起的页面重构问题                     */
/*                                                            */
/* ---------------------------------------------------------- */

@media only screen and (max-device-width:240px) {
  /* 240px的宽度Styles */
}

@media only screen and (min-device-width:241px) and (max-device-width:360px) {
  /* 360px的宽度Styles */
}

@media only screen and (min-device-width:361px) and (max-device-width:480px) {
  /* 480px的宽度Styles */
}


/*
 * 栅格
 */
.row {
  width: 102%;
}

.row:after,
.row:before {
  clear: both;
  display: table;
  content: " ";
}

.full-row .row .span-1,
.span-1 {
  float: left;
  margin-right: 2%;
  width: 6.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-2,
.span-2 {
  float: left;
  margin-right: 2%;
  width: 14.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-3,
.span-3 {
  float: left;
  margin-right: 2%;
  width: 23%;
  transition: .2s width ease;
}

.full-row .row .span-4,
.span-4 {
  float: left;
  margin-right: 2%;
  width: 31.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-5,
.span-5 {
  float: left;
  margin-right: 2%;
  width: 39.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-6,
.span-6 {
  float: left;
  margin-right: 2%;
  width: 48%;
  transition: .2s width ease;
}

.full-row .row .span-7,
.span-7 {
  float: left;
  margin-right: 2%;
  width: 56.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-8,
.span-8 {
  float: left;
  margin-right: 2%;
  width: 64.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-9,
.span-9 {
  float: left;
  margin-right: 2%;
  width: 73%;
  transition: .2s width ease;
}

.full-row .row .span-10,
.span-10 {
  float: left;
  margin-right: 2%;
  width: 81.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-11,
.span-11 {
  float: left;
  margin-right: 2%;
  width: 89.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-12,
.span-12 {
  float: left;
  margin-right: 2%;
  width: 98%;
  transition: .2s width ease;
}

.full-row .row .span-13,
.span-13 {
  float: left;
  margin-right: 2%;
  width: 106.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-14,
.span-14 {
  float: left;
  margin-right: 2%;
  width: 114.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-15,
.span-15 {
  float: left;
  margin-right: 2%;
  width: 123%;
  transition: .2s width ease;
}

.full-row .row .span-16,
.span-16 {
  float: left;
  margin-right: 2%;
  width: 131.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-17,
.span-17 {
  float: left;
  margin-right: 2%;
  width: 139.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-18,
.span-18 {
  float: left;
  margin-right: 2%;
  width: 148%;
  transition: .2s width ease;
}

.full-row .row .span-19,
.span-19 {
  float: left;
  margin-right: 2%;
  width: 156.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-20,
.span-20 {
  float: left;
  margin-right: 2%;
  width: 164.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-21,
.span-21 {
  float: left;
  margin-right: 2%;
  width: 173%;
  transition: .2s width ease;
}

.full-row .row .span-22,
.span-22 {
  float: left;
  margin-right: 2%;
  width: 181.33333333%;
  transition: .2s width ease;
}

.full-row .row .span-23,
.span-23 {
  float: left;
  margin-right: 2%;
  width: 189.66666667%;
  transition: .2s width ease;
}

.full-row .row .span-24,
.span-24 {
  float: left;
  margin-right: 2%;
  width: 198%;
  transition: .2s width ease;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.center {
  position: relative;
  left: -1%;
  float: none;
  clear: both;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.pull-left-1 {
  position: relative;
  left: -8.33333333%;
}

.pull-left-2 {
  position: relative;
  left: -16.66666667%;
}

.pull-left-3 {
  position: relative;
  left: -25%;
}

.pull-left-4 {
  position: relative;
  left: -33.33333333%;
}

.pull-left-5 {
  position: relative;
  left: -41.66666667%;
}

.pull-left-6 {
  position: relative;
  left: -50%;
}

.pull-left-7 {
  position: relative;
  left: -58.33333333%;
}

.pull-left-8 {
  position: relative;
  left: -66.66666667%;
}

.pull-left-9 {
  position: relative;
  left: -75%;
}

.pull-left-10 {
  position: relative;
  left: -83.33333333%;
}

.pull-left-11 {
  position: relative;
  left: -91.66666667%;
}

.pull-left-12 {
  position: relative;
  left: -100%;
}

.pull-left-13 {
  position: relative;
  left: -108.33333333%;
}

.pull-left-14 {
  position: relative;
  left: -116.66666667%;
}

.pull-left-15 {
  position: relative;
  left: -125%;
}

.pull-left-16 {
  position: relative;
  left: -133.33333333%;
}

.pull-left-17 {
  position: relative;
  left: -141.66666667%;
}

.pull-left-18 {
  position: relative;
  left: -150%;
}

.pull-left-19 {
  position: relative;
  left: -158.33333333%;
}

.pull-left-20 {
  position: relative;
  left: -166.66666667%;
}

.pull-left-21 {
  position: relative;
  left: -175%;
}

.pull-left-22 {
  position: relative;
  left: -183.33333333%;
}

.pull-left-23 {
  position: relative;
  left: -191.66666667%;
}

.pull-left-24 {
  position: relative;
  left: -200%;
}

.pull-right-1 {
  position: relative;
  left: 8.33333333%;
}

.pull-right-2 {
  position: relative;
  left: 16.66666667%;
}

.pull-right-3 {
  position: relative;
  left: 25%;
}

.pull-right-4 {
  position: relative;
  left: 33.33333333%;
}

.pull-right-5 {
  position: relative;
  left: 41.66666667%;
}

.pull-right-6 {
  position: relative;
  left: 50%;
}

.pull-right-7 {
  position: relative;
  left: 58.33333333%;
}

.pull-right-8 {
  position: relative;
  left: 66.66666667%;
}

.pull-right-9 {
  position: relative;
  left: 75%;
}

.pull-right-10 {
  position: relative;
  left: 83.33333333%;
}

.pull-right-11 {
  position: relative;
  left: 91.66666667%;
}

.pull-right-12 {
  position: relative;
  left: 100%;
}

.pull-right-13 {
  position: relative;
  left: 108.33333333%;
}

.pull-right-14 {
  position: relative;
  left: 116.66666667%;
}

.pull-right-15 {
  position: relative;
  left: 125%;
}

.pull-right-16 {
  position: relative;
  left: 133.33333333%;
}

.pull-right-17 {
  position: relative;
  left: 141.66666667%;
}

.pull-right-18 {
  position: relative;
  left: 150%;
}

.pull-right-19 {
  position: relative;
  left: 158.33333333%;
}

.pull-right-20 {
  position: relative;
  left: 166.66666667%;
}

.pull-right-21 {
  position: relative;
  left: 175%;
}

.pull-right-22 {
  position: relative;
  left: 183.33333333%;
}

.pull-right-23 {
  position: relative;
  left: 191.66666667%;
}

.pull-right-24 {
  position: relative;
  left: 200%;
}

.full-row {
  width: 100%;
}

.full-row:after,
.full-row:before {
  clear: both;
  display: table;
  content: " ";
}

.full-row [class*=midd],
.full-row [class*=smal],
.full-row [class*=span] {
  margin-right: 0;
}

.full-row .span-1 {
  width: 8.33333333%;
}

.full-row .span-2 {
  width: 16.66666667%;
}

.full-row .span-3 {
  width: 25%;
}

.full-row .span-4 {
  width: 33.33333333%;
}

.full-row .span-5 {
  width: 41.66666667%;
}

.full-row .span-6 {
  width: 50%;
}

.full-row .span-7 {
  width: 58.33333333%;
}

.full-row .span-8 {
  width: 66.66666667%;
}

.full-row .span-9 {
  width: 75%;
}

.full-row .span-10 {
  width: 83.33333333%;
}

.full-row .span-11 {
  width: 91.66666667%;
}

.full-row .span-12 {
  width: 100%;
}

.full-row .span-13 {
  width: 108.33333333%;
}

.full-row .span-14 {
  width: 116.66666667%;
}

.full-row .span-15 {
  width: 125%;
}

.full-row .span-16 {
  width: 133.33333333%;
}

.full-row .span-17 {
  width: 141.66666667%;
}

.full-row .span-18 {
  width: 150%;
}

.full-row .span-19 {
  width: 158.33333333%;
}

.full-row .span-20 {
  width: 166.66666667%;
}

.full-row .span-21 {
  width: 175%;
}

.full-row .span-22 {
  width: 183.33333333%;
}

.full-row .span-23 {
  width: 191.66666667%;
}

.full-row .span-24 {
  width: 200%;
}

.full-row .center {
  left: auto;
}

@media only screen and (max-width:64em) {

  .full-row .row .midd-1,
  .midd-1 {
    width: 6.33333333%;
  }

  .full-row .row .midd-2,
  .midd-2 {
    width: 14.66666667%;
  }

  .full-row .row .midd-3,
  .midd-3 {
    width: 23%;
  }

  .full-row .row .midd-4,
  .midd-4 {
    width: 31.33333333%;
  }

  .full-row .row .midd-5,
  .midd-5 {
    width: 39.66666667%;
  }

  .full-row .row .midd-6,
  .midd-6 {
    width: 48%;
  }

  .full-row .row .midd-7,
  .midd-7 {
    width: 56.33333333%;
  }

  .full-row .row .midd-8,
  .midd-8 {
    width: 64.66666667%;
  }

  .full-row .row .midd-9,
  .midd-9 {
    width: 73%;
  }

  .full-row .row .midd-10,
  .midd-10 {
    width: 81.33333333%;
  }

  .full-row .row .midd-11,
  .midd-11 {
    width: 89.66666667%;
  }

  .full-row .row .midd-12,
  .midd-12 {
    width: 98%;
  }

  .full-row .row .midd-13,
  .midd-13 {
    width: 106.33333333%;
  }

  .full-row .row .midd-14,
  .midd-14 {
    width: 114.66666667%;
  }

  .full-row .row .midd-15,
  .midd-15 {
    width: 123%;
  }

  .full-row .row .midd-16,
  .midd-16 {
    width: 131.33333333%;
  }

  .full-row .row .midd-17,
  .midd-17 {
    width: 139.66666667%;
  }

  .full-row .row .midd-18,
  .midd-18 {
    width: 148%;
  }

  .full-row .row .midd-19,
  .midd-19 {
    width: 156.33333333%;
  }

  .full-row .row .midd-20,
  .midd-20 {
    width: 164.66666667%;
  }

  .full-row .row .midd-21,
  .midd-21 {
    width: 173%;
  }

  .full-row .row .midd-22,
  .midd-22 {
    width: 181.33333333%;
  }

  .full-row .row .midd-23,
  .midd-23 {
    width: 189.66666667%;
  }

  .full-row .row .midd-24,
  .midd-24 {
    width: 198%;
  }

  .midd-hide {
    display: none;
  }

  .midd-center {
    position: relative;
    left: -1%;
    float: none;
    clear: both;
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

  .full-row .midd-1 {
    width: 8.33333333%;
  }

  .full-row .midd-2 {
    width: 16.66666667%;
  }

  .full-row .midd-3 {
    width: 25%;
  }

  .full-row .midd-4 {
    width: 33.33333333%;
  }

  .full-row .midd-5 {
    width: 41.66666667%;
  }

  .full-row .midd-6 {
    width: 50%;
  }

  .full-row .midd-7 {
    width: 58.33333333%;
  }

  .full-row .midd-8 {
    width: 66.66666667%;
  }

  .full-row .midd-9 {
    width: 75%;
  }

  .full-row .midd-10 {
    width: 83.33333333%;
  }

  .full-row .midd-11 {
    width: 91.66666667%;
  }

  .full-row .midd-12 {
    width: 100%;
  }

  .full-row .midd-13 {
    width: 108.33333333%;
  }

  .full-row .midd-14 {
    width: 116.66666667%;
  }

  .full-row .midd-15 {
    width: 125%;
  }

  .full-row .midd-16 {
    width: 133.33333333%;
  }

  .full-row .midd-17 {
    width: 141.66666667%;
  }

  .full-row .midd-18 {
    width: 150%;
  }

  .full-row .midd-19 {
    width: 158.33333333%;
  }

  .full-row .midd-20 {
    width: 166.66666667%;
  }

  .full-row .midd-21 {
    width: 175%;
  }

  .full-row .midd-22 {
    width: 183.33333333%;
  }

  .full-row .midd-23 {
    width: 191.66666667%;
  }

  .full-row .midd-24 {
    width: 200%;
  }
}

@media only screen and (max-width:40em) {

  .full-row .row .smal-1,
  .smal-1 {
    width: 6.33333333%;
  }

  .full-row .row .smal-2,
  .smal-2 {
    width: 14.66666667%;
  }

  .full-row .row .smal-3,
  .smal-3 {
    width: 23%;
  }

  .full-row .row .smal-4,
  .smal-4 {
    width: 31.33333333%;
  }

  .full-row .row .smal-5,
  .smal-5 {
    width: 39.66666667%;
  }

  .full-row .row .smal-6,
  .smal-6 {
    width: 48%;
  }

  .full-row .row .smal-7,
  .smal-7 {
    width: 56.33333333%;
  }

  .full-row .row .smal-8,
  .smal-8 {
    width: 64.66666667%;
  }

  .full-row .row .smal-9,
  .smal-9 {
    width: 73%;
  }

  .full-row .row .smal-10,
  .smal-10 {
    width: 81.33333333%;
  }

  .full-row .row .smal-11,
  .smal-11 {
    width: 89.66666667%;
  }

  .full-row .row .smal-12,
  .smal-12 {
    width: 98%;
  }

  .full-row .row .smal-13,
  .smal-13 {
    width: 106.33333333%;
  }

  .full-row .row .smal-14,
  .smal-14 {
    width: 114.66666667%;
  }

  .full-row .row .smal-15,
  .smal-15 {
    width: 123%;
  }

  .full-row .row .smal-16,
  .smal-16 {
    width: 131.33333333%;
  }

  .full-row .row .smal-17,
  .smal-17 {
    width: 139.66666667%;
  }

  .full-row .row .smal-18,
  .smal-18 {
    width: 148%;
  }

  .full-row .row .smal-19,
  .smal-19 {
    width: 156.33333333%;
  }

  .full-row .row .smal-20,
  .smal-20 {
    width: 164.66666667%;
  }

  .full-row .row .smal-21,
  .smal-21 {
    width: 173%;
  }

  .full-row .row .smal-22,
  .smal-22 {
    width: 181.33333333%;
  }

  .full-row .row .smal-23,
  .smal-23 {
    width: 189.66666667%;
  }

  .full-row .row .smal-24,
  .smal-24 {
    width: 198%;
  }

  .smal-hide {
    display: none !important;
  }

  .smal-center,
  .smal-show {
    display: block;
  }

  .smal-center {
    position: relative;
    left: -1%;
    float: none;
    clear: both;
    margin-right: auto;
    margin-left: auto;
  }

  [class*=pull-left-],
  [class*=pull-right-] {
    right: auto;
    left: auto;
  }

  .full-row .smal-1 {
    width: 8.33333333%;
  }

  .full-row .smal-2 {
    width: 16.66666667%;
  }

  .full-row .smal-3 {
    width: 25%;
  }

  .full-row .smal-4 {
    width: 33.33333333%;
  }

  .full-row .smal-5 {
    width: 41.66666667%;
  }

  .full-row .smal-6 {
    width: 50%;
  }

  .full-row .smal-7 {
    width: 58.33333333%;
  }

  .full-row .smal-8 {
    width: 66.66666667%;
  }

  .full-row .smal-9 {
    width: 75%;
  }

  .full-row .smal-10 {
    width: 83.33333333%;
  }

  .full-row .smal-11 {
    width: 91.66666667%;
  }

  .full-row .smal-12 {
    width: 100%;
  }

  .full-row .smal-13 {
    width: 108.33333333%;
  }

  .full-row .smal-14 {
    width: 116.66666667%;
  }

  .full-row .smal-15 {
    width: 125%;
  }

  .full-row .smal-16 {
    width: 133.33333333%;
  }

  .full-row .smal-17 {
    width: 141.66666667%;
  }

  .full-row .smal-18 {
    width: 150%;
  }

  .full-row .smal-19 {
    width: 158.33333333%;
  }

  .full-row .smal-20 {
    width: 166.66666667%;
  }

  .full-row .smal-21 {
    width: 175%;
  }

  .full-row .smal-22 {
    width: 183.33333333%;
  }

  .full-row .smal-23 {
    width: 191.66666667%;
  }

  .full-row .smal-24 {
    width: 200%;
  }
}