@charset "UTF-8";
.fn-hide {
  display: none; }

a {
  text-decoration: none; }

html {
  font-size: 62.5%;
  width: 100%;
  height: 100%; }

body {
  max-width: 1440px;
  min-width: 320px;
  margin: 0 auto;
  font-family: "Lantinghei SC", "Hiragino Sans GB", "华文细黑", "STHeiti", "微软雅黑", "Microsoft YaHei", SimHei, "Helvetica Neue", Helvetica, Arial, sans-serif; }

#welcome {
/*
  background: url("img/SaaS-logo.png") black center center no-repeat;
  background-size: 100%;
  width: 100%;
  padding-bottom: 55.6%;
  position: relative;
  z-index: 100; 
*/
    position: relative;
}
#welcome .mack{
    background: #000;
    opacity: 0.45;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}
  #welcome .logos {
    width: 8.58%;
    margin: 1.2% 0 0 2%;
    display: inline-block;
    float: left; }
    #welcome .logos a {
      display: inline-block;
      background-size: contain !important;
      height: 19px;
      vertical-align: middle;
      width: 100%; }
      #welcome .logos a img {
        width: 18px;
		height: 19px;
}
    #welcome .logos span {
      font-size: 16px;
      color: white;
      display: inline-block;
      vertical-align: middle;
      display: inline-block;
      border-right: 1px solid white;
      height: 30px;
      margin: 0 8%; }
  #welcome .mobile-nav-btn {
    display: none; }
  #welcome .atomlink {
    background: url("img/atomlink.png") no-repeat;
    width: 34%;
    background-size: 100%;
    height: 0;
    padding-bottom: 50%;
    position: absolute;
    right: -5%;
    top: -10%;
    display: none; }
  #welcome .button-link {
    position: absolute;
    color: #cd4b3c;
    border: 1px solid #cd4b3c;
    border-radius: 20px;
    font-size: 14px;
    background-color: transparent;
    right: 21%;
    bottom: 16%;
    padding: 5px 15px; }
  #welcome .nav {
    float: right;
    width: 79.86111%;
    margin-right: 2%;
    height: 65px;
    z-index: 100; }
    #welcome .nav ul {
      list-style: none;
      text-align: right;
      padding: 0 !important;
      height: 65px;
      margin: 0; }
      #welcome .nav ul li {
        display: inline-block;
        margin-right: 1.90476%;
        height: 65px;
        line-height: 65px; }
        #welcome .nav ul li:last-child {
          margin-right: 0; }
        #welcome .nav ul li a {
          color: #F1F1F1;
          font-size: 14px; }
/*
        #welcome .nav ul li.on a {
          font-size: 16px;
          color: white !important; }
*/
#welcome .nav ul li .nav_h:hover{
	color: #08D0A3;
}
    #welcome .nav.show {
      display: block !important;
      background-color: white;
      border-radius: 4px;
      width: 150px;
      position: absolute;
      right: 10px;
      top: 50px;
      z-index: 20;
      border: 1px solid #ccc; }
      #welcome .nav.show ul {
        text-align: center; }
        #welcome .nav.show ul li {
          text-align: center;
          padding: 5px 0;
          display: block; }
          #welcome .nav.show ul li a {
            color: black; }
  #welcome .nav-box {
    width: 100%;
    height: 65px;
    z-index: 99;
    position: fixed;
    top: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00000d+74,140522+100&0.7+0,0.7+100 */
    background: -webkit-linear-gradient(left, rgba(0, 0, 13, 0.7) 0%, rgba(0, 0, 13, 0.7) 74%, rgba(20, 5, 34, 0.7) 100%);
    background: linear-gradient(to right, rgba(0, 0, 13, 0.7) 0%, rgba(0, 0, 13, 0.7) 74%, rgba(20, 5, 34, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b300000d', endColorstr='#b3140522',GradientType=1 ); }
  #welcome .nav-box.fixed {
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    z-index: 100;
    height: 50px; }
    #welcome .nav-box.fixed .nav {
      position: relative; }
      #welcome .nav-box.fixed .nav ul {
        margin-top: 16px; }
    #welcome .nav-box.fixed .logos {
      position: relative;
      margin-top: 0; }
  #welcome .mobile-nav-btn {
    color: white;
    position: absolute;
    right: 20px;
    top: 4px;
    font-size: 18px;
    cursor: pointer;
    padding: 10px; }
  #welcome h1 {
    width: 100%;
    color: white;
    text-align: center;
    margin: 0;
    position: absolute;
    top: 34%;
    text-align: center; }
    #welcome h1 img {
      width: 35%;
      display: inline-block; }
    #welcome h1 strong {
      font-size: 36px;
      font-size: 3.6rem;
      display: block;
      margin: 20px 0;
      letter-spacing: 15px;
      font-weight: normal; }
    #welcome h1 span {
      font-size: 28px;
      display: block;
      color: rgba(255, 255, 255, 0.6);
      opacity: 0.6;
      font-weight: normal; }
    #welcome h1 .main {
      width: 90%;
      font-size: 48px;
      font-size: 4.8rem;
      font-weight: normal;
      letter-spacing: 15px;
      background-size: contain;
      display: inline-block;
      height: 0;
      padding-bottom: 10.43478%; }
      #welcome h1 .main img {
        display: inline-block;
        width: 297px;
        position: relative;
        top: 20px;
        margin: 0 10px; }
  #welcome .info {
    position: absolute;
    bottom: 7%;
    width: 100%;
    text-align: center;
    color: #6C5F53;
    font-size: 18px;
    font-size: 1.8rem; }
    #welcome .info span {
      margin-right: 25px;
      text-shadow: 1px 1px white; }
      #welcome .info span a {
        color: #6C5F53; }
      #welcome .info span i {
        margin: 0 10px; }
      #welcome .info span b {
        display: inline-block;
        text-align: left;
        vertical-align: top;
        font-weight: normal; }
        #welcome .info span b i {
          font-size: 14px;
          font-style: normal;
          margin: 0; }
    #welcome .info img {
      position: relative;
      top: 15px; }
  #welcome button {
    display: none; }
  #welcome #animate-title {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1; }
  #welcome #animate-subtitle {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1; }
  #welcome #animate-small, #welcome #animate-info {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1; }

.section {
  width: 100%;
  padding: 40px 0 20px 0;
  background-color: white;
  position: relative;
  overflow: hidden; }
  .section.gray {
    background-color: #f8f8f8; }
  .section h2 {
    text-align: center;
    font-size: 24px;
    color: #000;
    font-weight: normal;
    margin: 0; }
    .section h2.hilight {
      color: #000; }
    .section h2.green {
font-size: 24px;
color: #08D0A3;
letter-spacing: -1.76px;}
    .section h2 span {
      display: block;
      color:#08D0A3;
      font-size: 16px;
      margin: 15px 0;
      font-weight: normal; }
  .section .mark {
    display: block;
    margin: 30px auto; }
  .section .container {
/*    width: 72.84722%;*/
    margin: 0 auto; }
    .section .container h2 {
      text-align: left;
      margin-top: 40px;
      font-size: 30px;
      color: #653512; }
.paixu{
  text-align: center;
  font-size: 16px;
}
#feature .weidu{
	text-align: center;
	margin-top: 45px;
}
#feature .weidu .img_m{
	display: none;
	}
#calendar {
	background: #011E3C;	
}
#reg{
	padding-bottom: 80px;
}
#intro {
  padding-bottom:0; }
  #intro:before {
    content: "";
    display: block;
    position: absolute;
    width: 35.27778%;
    padding-bottom: 34.72222%;
    height: 0;
/*    background: url("img/stars.png") center center no-repeat;*/
    background-size: contain;
    top: -8%;
    left: -15%; }
  #intro h3 {
    font-size: 24px;
    line-height: 1.9em;
    margin: 30px 0;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-align: center; }
    #intro h3 span {
      font-size: 12px;
      line-height: 1.5em; }
  #intro .gotoreg {
    color: white;
    background-color: #653512;
    font-size: 20px;
    padding: 10px 20px;
    margin-bottom: 50px; }
    #intro .gotoreg.red {
      background-color: #653512;
      margin-right: 2%; }
  #intro .detail {
    width: 100%;
    overflow: auto;
    margin-bottom: 35px;
	padding-top: 30px;
    padding-bottom: 10px;
/*    text-align: center;*/
}
    #intro .detail:last-child {
      margin-bottom:0; }
    #intro .detail h4 {
      color: #653512;
      font-size: 20px;
      font-size: 2rem; }
    #intro .detail .rules ul {
      list-style: none;
      padding: 0; }
      #intro .detail .rules ul li {
        font-size: 15px;
        font-size: 1.5rem;
        margin: 0.5em auto;
        line-height: 1.5em;
        background-color: #EBEEF1;
        padding: 3%;
        border-radius: 5px; 
		
	}
    #intro .detail .text {
      width: 100%;
      display: inline-block;
      text-align: left;
}
#intro .detail .text .match_img .img_bt{
height: 19px;
opacity: 0.63;
background: #D8D8D8;
width: auto;
}
#intro .detail .text .match_img li{
	border: 3px solid transparent;
	-webkit-transition: opacity 1s, -webkit-transform 0.5s;
	transition: opacity 1s, -webkit-transform 0.5s;
	transition: opacity 1s, transform 0.5s;
	transition: opacity 1s, transform 0.5s, -webkit-transform 0.5s;
}

#intro .detail .text .match_img li:hover{
border: 3px solid #08D0A3;
-webkit-transform: scale3d(1.2,1.2,1);
transform: scale3d(1.2,1.2,1);
/*
-webkit-transform: scale3d(1.2 1.2, 1);
transform: scale3d(1.2 1.2, 1);
*/
}

#intro .detail .text .it_text{
	width: 62%;
	margin: auto;
	margin-bottom: 16px;
	color: #000;
}
#intro .detail .text .it_first{
	margin-top: 40px;
	color: #000;
}
#intro .detail .text .it_renwu{
	margin: auto;
	margin-top: 45px;
	background: url('img/3_m.jpg') center center no-repeat;

}    
#intro .detail .text .ren_gr{
	width: 62%;
    margin: auto;
    font-size: 16px;
    color: #08D0A3;
    padding-top: 23px;
    text-align: center;
}
#intro .detail .text .renwu_ul{
	margin: 0 auto;
	width: 75%;
}
#intro .detail .text .renwu_ul li{
	width: 100%;
}
        #intro .detail .text p:first-child {
          margin-top: 0; }
      #intro .detail .text span {
        display: block;
        margin-top: 40px;
        font-size: 22px;
        font-size: 13px;
        color: #333333; }
      #intro .detail .text ul {
        margin: 0;
        padding: 0;
        margin-top: 30px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%; 
        text-align: center;
}
        #intro .detail .text ul li {
          list-style: none;
          width: 33%;
          display: inline-block;
          margin-right: 15px; }
          #intro .detail .text ul li div {
            width: 120px;
            height: 120px;
            overflow: hidden;
/*            border: 2px solid #653512;*/
/*            border-radius: 50%;*/
            text-align: center;
			margin: auto;			
}
#intro .detail .text ul li div .ic_img{
    margin-top:27px;
}
          #intro .detail .text ul li span {
            margin-top: 20px;
            text-align: center;
			color: #fff;
			font-size: 16px;
}

      #intro .detail .text a {
        margin-top: 50px;
        display: inline-block;
        width: 220px;
        height: 46px;
        line-height: 46px;
        margin-right: 20px;
        text-align: center;
        color: #ff3d62;
        font-size: 22px;
        font-size: 2.2rem; }
        #intro .detail .text a.on {
          color: #fff;
          background-color: #ff3d62; }
        #intro .detail .text a.right {
          margin-right: 50px; }
    #intro .detail .division {
      overflow: hidden;
      width: 100%;
      font-size: 0; }
      #intro .detail .division h4 {
        color: black; }
      #intro .detail .division ul {
        width: 100%;
        margin: 0;
        padding: 0;
        text-align: center; }
        #intro .detail .division ul li {
          list-style: none;
          width: 25%;
          display: inline-block; }
          #intro .detail .division ul li a {
            display: block; }
            #intro .detail .division ul li a img {
              width: 100%;
              max-width: 1000px; }
    #intro .detail .two ul {
      text-align: left; }
      #intro .detail .text p {
        font-size: 12px;
        color: #fff;
        line-height: 1.75em;
        letter-spacing: 0.1em;
        text-align: left;
}
#intro .detail .text .match_img li img{
width: 100%;
	;}
#feature .text {
  color: #666;
  text-align: center;
  line-height: 1.75em;
  margin-top: 40px;
  font-size: 16px;
  font-size: 1.6rem;
  letter-spacing: 0.1em; }
#feature h3 {
  font-size: 24px;
  font-size: 2.4rem;
  text-align: center;
  font-weight: normal; }
#feature ul {
  width: 75.69444%;
  text-align: center;
  padding: 0;
  margin: 50px auto; }
  #feature ul li {
    display: inline-block;
    width: 29.54128%;
    vertical-align: top;
    padding-top: 10px;
    border-top: 5px solid;
    margin-right: 12.36111%;
    margin-bottom: 7.5%; }
    #feature ul li img {
      display: inline-block;
      width: 19.23077%;
      vertical-align: top;
      float: left; }
    #feature ul li div {
      display: inline-block;
      width: 76.92308%;
      text-align: right; }
      #feature ul li div strong {
        font-size: 22px;
        font-size: 2.2rem; }
      #feature ul li div p {
        text-align: justify;
        width: 90%;
        float: right;
        margin-top: 0;
        font-size: 14px;
        font-size: 1.4rem; }
        #feature ul li div p a {
          color: #419BF9; }
          #feature ul li div p a i {
            font-size: 13px;
            margin-left: 5px; }
    #feature ul li.li1 {
      border-color: #DC1A39; }
    #feature ul li.li2 {
      border-color: #8AC831; }
    #feature ul li.li3 {
      border-color: #00A2C2; }
    #feature ul li.li4 {
      border-color: #672993; }
    #feature ul li strong {
      display: block;
      font-size: 36px;
      font-weight: normal;
      margin-bottom: 15px; }
    #feature ul li i {
      font-style: normal;
      font-size: 17.5px;
      font-size: 1.75rem;
      font-weight: normal; }

#calendar h2 span {
  vertical-align: top; }
#calendar ul {
  padding: 0;
  width: 56%;
  margin: 0 auto;
  text-align: center;
/*  border-left: 3px solid #08D0A3;*/
	border: none;
  position: relative;
  left: 5%;
  padding-bottom: 40px;
  margin-top: 40px; 	}
  #calendar ul li {
    list-style: none;
    display: inline-block;
    width: 100%;
    position: relative;
    left: -10%; }
    #calendar ul li.open b {
      background-color: #08D0A3;
      color: white; }
    #calendar ul li.open div p {
      display: block; }
      #calendar ul li.open div p.node {
        color: white; }
        #calendar ul li.open div p.node i {
          background-position: 0 -24px; }
    #calendar ul li:hover b {
      background-color: #08D0A3;
      color: white; }
    #calendar ul li:hover div .node {
      background-color:#08D0A3;;
      color: white; }
      #calendar ul li:hover div .node i {
        background-position: 0 -48px; }
    #calendar ul li b {
      display: inline-block;
      width: 100px;
      height: 100px;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      font-weight: normal;
      vertical-align: top;
      margin-right: 4%;
      -webkit-transition: all 0.4s ease;
      transition: all 0.4s ease;
      font-size: 14px;
      font-size: 1.4rem;
      position: relative;
      top: -10px; }
      #calendar ul li b span {
        display: block;
        margin-top: 25px;
        font-size: 18px;
        font-size: 1.8rem; }
    #calendar ul li div {
      display: inline-block;
      width: 75.8%; }
      #calendar ul li div p {
        width: 100%;
        border-radius: 10px;
        margin: 0;
        text-align: left;
        padding: 3%;
        box-sizing: border-box;
        color: #4A4A4A;
        background-color: #fff;
        margin-bottom: 5%;
        display: none;
        font-size: 13px;
        font-weight: normal; }
        #calendar ul li div p span {
          font-size: 14px;
          font-size: 1.4rem; }
          #calendar ul li div p span i {
            color: #ccc; }
        #calendar ul li div p strong {
          display: block; }
        #calendar ul li div p.node {
		  color: #fff;
          border: 1px solid #FFFFFF;
	      border-radius: 8px;
          display: block;
          position: relative;
          -webkit-transition: all 0.4s ease;
          transition: all 0.4s ease;
          background-color: transparent; }
          #calendar ul li div p.node i {
            position: absolute;
            width: 24px;
            height: 24px;
            right: 20px;
            top: 50%;
            margin-top: -12px;
            background-image: url("img/arrow.png");
            background-size: 100%; }

#guests, #guests2, #guests3 {
  padding-bottom: 20px;
  z-index: 10; }
  #guests ul, #guests2 ul, #guests3 ul {
    width: 72.91667%;
    margin: 5.55556% auto 0 auto; }
    #guests ul li, #guests2 ul li, #guests3 ul li {
      width: 15.2381%;
      display: inline-block;
      vertical-align: top;
      margin-right: 4.28571%;
      text-align: center;
      margin-bottom: 5.55556%; }
      #guests ul li img, #guests2 ul li img, #guests3 ul li img {
        width: 100%; }
      #guests ul li p strong, #guests2 ul li p strong, #guests3 ul li p strong {
        display: block;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: normal; }
      #guests ul li p span, #guests2 ul li p span, #guests3 ul li p span {
        color: #999;
        font-size: 14px;
        line-height: 1.4em; }
#guests .cio_border{
	border-radius: 10px;
	overflow: hidden;
}

#guests2 ul li .turn {
  width: 140px;
  height: 165px;
  float: left;
  margin-left: 10px;
  overflow: hidden;
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg); }
  #guests2 ul li .turn .show {
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg); }
    #guests2 ul li .turn .show .bg {
      width: 100%;
      height: 100%;
      overflow: hidden;
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg);
      position: relative;
      background: #fff; }

#guests3 ul li {
  width: 15.2381%; }
  #guests3 ul li.more div img {
    width: 83%; }
  #guests3 ul li div {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 50%;
    overflow: hidden;
/*    border: 1px solid #ccc; */
}
  #guests3 ul li a {
    color: black !important; }
  #guests3 ul li strong {
    color: black !important; }

#subjects:before {
  content: "";
  display: block;
  position: absolute;
  width: 28.81944%;
  padding-bottom: 28.95833%;
  height: 0;
  background: url("img/astro.png") center center no-repeat;
  background-size: contain;
  top: -24%;
  right: -8%; }
#subjects ul {
  width: 67.01389%;
  margin: 4.58333% auto 0 auto;
  list-style: none; }
  #subjects ul li {
    width: 15.54404%;
    margin-right: 3.10881%;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 8.29016%;
    vertical-align: top;
    position: relative; }
    #subjects ul li.rotate {
      -webkit-perspective: 2000px;
      perspective: 2000px; }
      #subjects ul li.rotate .circle {
        -webkit-transform: rotate3d(0, 1, 0, 180deg);
        transform: rotate3d(0, 1, 0, 180deg);
        z-index: -1; }
      #subjects ul li.rotate .circle-clone {
        -webkit-transform: rotate3d(0, 1, 0, 360deg);
        transform: rotate3d(0, 1, 0, 360deg);
        z-index: 10;
        vertical-align: middle; }
        #subjects ul li.rotate .circle-clone p {
          display: inline-block;
          vertical-align: middle; }
      #subjects ul li.rotate .bar i {
        color: #DC1A39; }
    #subjects ul li.sending .bar {
      position: relative; }
      #subjects ul li.sending .bar:after {
        content: "投票中...";
        display: block;
        position: absolute;
        width: 100%;
        height: 35px;
        background-color: #333;
        top: 0;
        left: 0;
        line-height: 35px;
        padding-left: 10px;
        color: white;
        box-sizing: border-box; }
    #subjects ul li .circle {
      background-color: #ECECEC;
      color: #DC1A39;
      border-radius: 50%;
      position: relative;
      margin: 0 auto 5px auto;
      text-align: center;
      position: relative;
      z-index: 10;
      -webkit-transition: all 0.5s ease-in-out;
      transition: all 0.5s ease-in-out;
      -webkit-transform: rotate3d(0, 1, 0, 0deg);
      transform: rotate3d(0, 1, 0, 0deg); }
      #subjects ul li .circle i {
        padding: 29.01554% 15.54404%;
        font-size: 60px;
        line-height: 90.66667%;
        display: block; }
        #subjects ul li .circle i.txt {
          font-size: 45px;
          font-style: normal;
          padding: 34.71503% 15.54404%; }
    #subjects ul li .circle-clone {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      -webkit-transform: rotate3d(0, 1, 0, 180deg);
      transform: rotate3d(0, 1, 0, 180deg);
      z-index: -1; }
      #subjects ul li .circle-clone p {
        padding: 7px 20px;
        color: black; }
        #subjects ul li .circle-clone p span {
          color: #DC1A39;
          display: block;
          font-size: 36px;
          margin: 5px 0; }
    #subjects ul li .bar {
      height: 35px;
      width: 100%;
      background-color: #333;
      box-sizing: border-box;
      padding: 0 10px; }
      #subjects ul li .bar span {
        line-height: 35px;
        color: white;
        font-size: 14px; }
      #subjects ul li .bar i {
        color: white;
        float: right;
        line-height: 35px;
        font-size: 16px;
        font-size: 1.6rem; }

#reg .card-box {
  	margin: 0 auto;
    text-align: center;
    margin-top: 3.125%;
    width: 80%; }
  #reg .card-box .card {
    width: 25%;
    padding: 0 1.38889%;
    display: inline-block;
    min-height: 328px;
    text-align: left;
    position: relative;
    max-width: 392px;
    box-sizing: border-box;
    margin-right: 5.55556%;
    vertical-align: top;
    background-color: white; }
    #reg .card-box .card:last-child {
      margin-right: 0; }
    #reg .card-box .card h3 {
      font-size: 18px;
      padding: 7.65306%;
	  	color: #000;
      margin: 0;
      text-align: center; }
      #reg .card-box .card h3 span {
       font-size: 14px;
	   color: #9B9B9B;
        font-weight: normal; }
    #reg .card-box .card ul {
		width: 80%;
		margin: 20px auto 0;
      list-style: none;
      padding: 0; }
    #reg .card-box .card li {
      padding: 2.55102% 0;
      color: #000;
      font-size: 12px;
	  letter-spacing: 2px;
}
      #reg .card-box .card li:last-child {
        border-bottom: none; }
      #reg .card-box .card li p {
        font-size: 12px;
        color: #565656;
        line-height: 1.4em; }
    #reg .card-box .card p {
      color: #666;
      font-size: 14px;
      font-size: 1.4rem; }
    #reg .card-box .card button, #reg .card-box .card a {
      padding: 5px 10px;
      position: absolute;
      bottom: 0;
      left: 50%;
		border: none;
      margin-left: -38px;
      border-radius: 4px;
font-size: 14px;
color: #011E3C; } 
#reg .zoujin{
	width: 70%;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0 2px 9px 0 rgba(0,0,0,0.50);
    border-radius: 8px;
    margin-top: 74px;
}
#reg .zoujin .zou_left{
	float: left;
    margin-right: 46px;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: -1.32px;
    background: #08D0A3;
	padding: 40px 13px 83px 13px;
} 
#reg .zoujin .zou_left .txt{
	font-size: 14px;
    color: #000000;
    letter-spacing: -1.03px;
}
#reg .zoujin .zou_right{
	font-size: 12px;
    color: #4A4A4A;
    letter-spacing: 2px;
    line-height: 20px;
    padding: 24px 74px 42px 0;
}
#reg .zoujin .zou_right .btn{
	float: right;
	background: #08D0A3;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
font-size: 14px;
color: #011E3C;
padding: 2px 4px;
}

#reg .card-box .card.fee button:hover{
	background: #08D0A3;
}
#reg .card-box .card.fee a:hover {
	  background:  #08D0A3;
}
      #reg .card-box .card button.disabled, #reg .card-box .card a.disabled {
        background-color: #ccc !important;
/*        margin-left: -70px; */
}
      #reg .card-box .card button.sending, #reg .card-box .card a.sending {
        margin-left: -92px; }
    #reg .card-box .card.fee {
	background: #FFFFFF;
	box-shadow: 0 2px 9px 0 rgba(0,0,0,0.50);
	border-radius: 8px; }
      #reg .card-box .card.fee h3 {
		  font-weight: normal;
        border-bottom:2px solid #08D0A3; }
      #reg .card-box .card.fee button, #reg .card-box .card.fee a {
        background: #D8D8D8;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50); }
    #reg .card-box .card.media {
      color: #653512;
      border-color: #653512; }
      #reg .card-box .card.media h3 {
        border-bottom: 1px solid #653512; }
      #reg .card-box .card.media button, #reg .card-box .card.media a {
        background-color: #653512; }
    #reg .card-box .card.author {
      color: #2DB0FF;
      border-color: #2DB0FF; }
      #reg .card-box .card.author h3 {
        border-bottom: 1px solid #2DB0FF; }
      #reg .card-box .card.author button, #reg .card-box .card.author a {
        background-color: #2DB0FF; }

.slide-box-arrow {
  width: 63.8%;
  margin: 50px auto;
  position: relative; }
  .slide-box-arrow .viewport {
    width: 90%;
    margin: 0 auto;
    height: 0;
    padding-bottom: 19%;
    overflow: hidden;
    position: relative; }
    .slide-box-arrow .viewport ul {
      width: 100%;
      padding-left: 0;
      display: inline-block;
      position: absolute;
      left: 100%; }
      .slide-box-arrow .viewport ul.current {
        left: 0; }
      .slide-box-arrow .viewport ul li {
        width: 30%;
        display: inline-block;
        margin: 0 1.3%; }
        .slide-box-arrow .viewport ul li img {
          width: 100%;
          height: auto; }
    .slide-box-arrow .viewport > div {
      display: none; }
  .slide-box-arrow .arr {
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 34px;
    top: 50%;
    margin-top: -17px; }
  .slide-box-arrow .larr {
    background-image: url("img/al.png");
    left: -10px; }
  .slide-box-arrow .rarr {
    background-image: url("img/ar.png");
    right: 0; }
  .slide-box-arrow.h .arr {
    background-size: 100%;
    width: 46px;
    height: 46px; }
    .slide-box-arrow.h .arr:hover {
      background-position: 0 -46px; }
  .slide-box-arrow.h .larr {
    background-image: url("img/alh.png"); }
  .slide-box-arrow.h .rarr {
    background-image: url("img/arh.png"); }

.hlist {
  width: 63.8%;
  margin: 20px auto;
  list-style: none; }
  .hlist li {
    padding: 2.27273% 4.54545%;
    border-bottom: 1px solid #D8D8D8;
    font-size: 20px;
    font-size: 2rem; }
    .hlist li:last-child {
      border-bottom: none; }
  .hlist a {
    color: #333;
    font-size: 20px;
    font-size: 2rem; }
    .hlist a i {
      background-color: transparent !important;
      margin-left: 10px; }
    .hlist a span {
      float: right;
      vertical-align: middle; }

#history h2 span, #history2 h2 span {
  color: #653512; }
  #history h2 span a, #history2 h2 span a {
    color: #A8A8A8; }
    #history h2 span a.on, #history2 h2 span a.on {
      color: #653512; }
#history .place, #history2 .place {
  display: none; }
  #history .place.on, #history2 .place.on {
    display: block; }
  #history .place .slide-box-arrow .viewport div, #history2 .place .slide-box-arrow .viewport div {
    display: none; }
  #history .place .hlist, #history2 .place .hlist {
    width: 55%;
    padding-left: 0;
    margin: 0 auto; }
    #history .place .hlist li, #history2 .place .hlist li {
      display: block;
      overflow: auto;
      padding: 20px 0;
      border-bottom: 1px solid #ccc; }
      #history .place .hlist li:last-child, #history2 .place .hlist li:last-child {
        border-bottom: none; }
      #history .place .hlist li a, #history2 .place .hlist li a {
        color: #4A4A4A;
        text-decoration: none;
        font-size: 16px;
        font-size: 1.6rem;
        line-height: 40px; }
        #history .place .hlist li a i, #history2 .place .hlist li a i {
          font-style: normal; }
        #history .place .hlist li a span, #history2 .place .hlist li a span {
          display: inline-block;
          width: 85px;
          line-height: 36px;
          color: white;
          background-color: #2DB0FF;
          float: right;
          border-radius: 4px;
          text-align: center;
          font-size: 14px;
          font-size: 1.4rem; }

#host {
  padding-top: 0; }
  #host .host-box {
    width: 55.55556%;
    margin: 20px auto;
    text-align: center; }
    #host .host-box div {
      vertical-align: middle; }
    #host .host-box .host-logo {
      margin-top: 40px; }
      #host .host-box .host-logo a {
        width: 24%;
        display: inline-block;
        vertical-align: middle;
        margin: 20px 30px; }
        #host .host-box .host-logo a img {
          width: 100%; }
      #host .host-box .host-logo .tmt {
        margin-bottom: 10px !important; }
      #host .host-box .host-logo .bs {
        width: 25.75107%; }
    #host .host-box .host-info {
      height: 110px;
      margin-top: 40px; }
      #host .host-box .host-info a {
        color: #333; }
      #host .host-box .host-info p {
        width: 40%;
        color: #666;
        line-height: 1.75em;
        font-size: 16px;
        font-size: 1.6rem;
        letter-spacing: 0.1em;
        text-align: left;
        over-flow: hidden; }
        #host .host-box .host-info p:nth-child(1) {
          margin-left: 30px;
          float: left; }
        #host .host-box .host-info p:nth-child(2) {
          float: right; }
        #host .host-box .host-info p span {
          vertical-align: top; }

.modal {
  box-shadow: 0 0 3px #ccc !important;
  background-color: white;
  padding: 3%; }
  .modal .close-modal {
    font-size: 30px;
    color: #BFC4C2;
    position: absolute;
    top: 10px;
    right: 20px; }
  .modal img {
    width: 196px;
    margin: 0px auto 30px auto;
    display: block; }
  .modal strong {
    font-size: 32px;
    font-size: 3.2rem;
    text-align: center;
    display: block;
    font-weight: normal;
    margin-bottom: 20px; }
  .modal .error_msg {
    text-align: center;
    margin: 20px;
    color: red; }
  .modal .sign-msg {
    background-color: #EDEFEE;
    color: #666;
    padding: 20px 0;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    border-radius: 4px;
    font-size: 14px;
    font-size: 1.4rem; }
    .modal .sign-msg i {
      font-style: normal; }
    .modal .sign-msg span {
      color: #653512;
      padding: 0 5px; }
  .modal input.btn {
    width: 20%;
    height: 35px;
    display: block;
    background-color: #653512;
    border: none;
    color: white;
    border-radius: 4px;
    margin: 25px auto 15px auto;
    cursor: pointer;
    -webkit-appearance: none; }
  .modal .note {
    text-align: center; }
    .modal .note a {
      color: #653512; }
  .modal .form {
    width: 80%;
    margin: 0 auto; }
    .modal .form label {
      display: block;
      margin: 20px 0;
      text-align: left;
      width: 45%; }
      .modal .form label.section-line {
        display: block !important;
        margin-bottom: 20px !important;
        height: auto !important;
        text-align: center !important;
        width: 100% !important; }
        .modal .form label.section-line b {
          display: block;
          margin: 0 auto;
          text-align: center !important;
          width: auto;
          margin-bottom: 10px;
          font-size: 16px;
          font-size: 1.6rem; }
        .modal .form label.section-line div {
          position: relative;
          left: 3%; }
        .modal .form label.section-line label {
          height: auto !important;
          margin: 5px 0 !important; }
        .modal .form label.section-line input {
          height: auto; }
      .modal .form label.place {
        width: 60%; }
        .modal .form label.place .inline-box {
          display: inline-block; }
          .modal .form label.place .inline-box .radio-box {
            width: 150px;
            position: relative; }
            .modal .form label.place .inline-box .radio-box label {
              font-size: 14px;
              position: absolute;
              top: -2px;
              width: 200px; }
      .modal .form label b {
        width: 80px;
        display: inline-block;
        font-weight: normal;
        font-size: 14px; }
      .modal .form label p {
        width: 60%;
        height: 25px;
        line-height: 25px;
        display: inline-block;
        font-weight: normal;
        font-size: 14px;
        font-size: 1.4rem; }
      .modal .form label input {
        width: 60%;
        height: 25px;
        line-height: 25px;
        border-radius: 2px;
        border: 1px solid #ccc; }
        .modal .form label input.cbox {
          width: auto; }
        .modal .form label input.gender {
          width: 12px;
          height: 12px;
          margin: 0 10px; }
    .modal .form .captcha-part {
      display: none; }
      .modal .form .captcha-part.show {
        display: block; }
      .modal .form .captcha-part input {
        width: 20%;
        margin-right: 10px; }
      .modal .form .captcha-part img {
        width: 62px;
        height: 25px;
        display: inline-block;
        margin-bottom: 0;
        vertical-align: middle; }
      .modal .form .captcha-part i {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-size: 100%;
        vertical-align: middle;
        margin-left: 10px; }
        .modal .form .captcha-part i.sending {
          -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite; }
  .modal .invoice-box {
    width: 80%;
    margin: 0 auto; }
    .modal .invoice-box label {
      height: auto !important;
      font-size: 14px;
      font-size: 1.4rem;
      margin-bottom: 15px !important; }
    .modal .invoice-box input[type=checkbox] {
      width: auto !important;
      height: auto !important;
      margin-right: 10px !important; }
    .modal .invoice-box strong {
      font-size: 14px;
      font-size: 1.4rem;
      text-align: left; }
    .modal .invoice-box .invoice-form label {
      height: 65px !important;
      margin-bottom: 0 !important; }
    .modal .invoice-box .invoice-form input, .modal .invoice-box .invoice-form textarea {
      display: block; }
    .modal .invoice-box .invoice-form input {
      height: 25px;
      line-height: 25px;
      border-radius: 2px;
      border: 1px solid #ccc;
      width: 90%;
      display: inline-block; }

#login, #register {
  width: 50%; }
  #login .form, #register .form {
    width: 90%; }
    #login .form label, #register .form label {
      margin: 20px auto;
      text-align: center; }
      #login .form label b, #register .form label b {
        text-align: left; }

#apply {
  width: 60%; }
  #apply .form {
    margin-top: 30px;
    text-align: left; }
    #apply .form label {
      display: inline-block;
      margin: 0;
      height: 65px;
      line-height: 65px;
      vertical-align: top; }
      #apply .form label select {
        width: 60%; }
      #apply .form label b {
        text-align: right;
        margin-right: 10px; }
      #apply .form label span {
        color: red;
        display: block;
        margin-left: 94px;
        margin-top: 7px;
        text-align: left; }
      #apply .form label i {
        width: 60%;
        display: inline-block;
        font-style: normal;
        color: #666;
        text-align: left; }
  #apply .success {
    padding: 150px 0;
    text-align: center; }
    #apply .success strong {
      color: #08D0A3;
      font-size: 28px;
      font-size: 2.8rem;
      border: 1px solid #08D0A3;
      border-left: none;
      border-right: none;
      padding: 15px 0; }
    #apply .success p {
      color: #666;
      margin-top: 25px;
      font-size: 14px;
      font-size: 1.4rem; }
      #apply .success p a {
        color: #08D0A3; }

#reginfo {
  width: 60%;
  overflow: auto; }
  #reginfo .close-modal {
    top: 0;
    right: 0; }
  #reginfo .form label {
    display: inline-block;
    margin: 0;
    height: 65px;
    vertical-align: top;
    width: 50%;
    height: 35px; }
    #reginfo .form label b {
      margin-right: 0;
      width: 60px; }
    #reginfo .form label i {
      font-style: normal;
      color: #E53743;
      display: inline-block;
      width: 70%; }
    #reginfo .form label.section-area {
      display: block;
      width: 100%; }
      #reginfo .form label.section-area b {
        vertical-align: top; }
      #reginfo .form label.section-area i {
        width: 80%; }
    #reginfo .form label a {
      font-weight: bold;
      display: inline-block;
      border: 1px solid #E53743;
      padding: 5px 10px;
      border-radius: 4px;
      background-color: #E53743;
      color: white; }

#vendor .v-box {
  width: 80%;
  margin: 20px auto;
  max-width: 1000px; }
  #vendor .v-box h3 {
    color: #323232;
    font-size: 24px;
    border-bottom: 1px solid #979797;
    font-weight: normal;
    padding: 30px 0; }
  #vendor .v-box ul {
    list-style: none;
    padding: 0; }
    #vendor .v-box ul li {
      display: inline-block;
      margin: 0 15px 15px 0;
      border: 1px solid #ccc;
      height: 67px; }

#wemedia .box {
  width: 80%;
  margin: 20px auto;
  max-width: 1000px; }
  #wemedia .box ul {
    list-style: none;
    margin-top: 35px; }
    #wemedia .box ul li {
      display: inline-block;
      width: 80px;
      height: auto;
      margin-right: 5%;
      margin-bottom: 20px;
      vertical-align: top; }
      #wemedia .box ul li p {
        font-size: 14px;
        text-align: center; }
      #wemedia .box ul li img {
        width: 100%;
        border-radius: 50%;
        border: 1px solid #ddd; }

footer {
  color: white;
  background: #172F4B;
  font-size: 14px;
  padding: 20px 30px; }
  footer span {
    margin: 0 20px; }
#arrangement h2.green{
    margin-bottom: 50px;
}
.slick_h5{
    display: none !important;
}
.saas_img {
    position: absolute;
    width: 44%;
    top: 180px;
    z-index: 10;
    left: 50%;
    margin-left: -300px;
}

#arrangement {
background: url(img/green_m.jpg) center center no-repeat;
background-size: cover;
    
}

.city {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 377px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}
.city li{
/*    margin-bottom: 66px;*/
}
.city li .city_div{    
    width: 114px;
    height: 114px;
/*    opacity: 0.48;*/
    border: 2px solid #08D0A3;
    border-radius: 50%;
    margin-bottom: 5px;
    text-align: center;
}
.city li .city_div .spot{
    font-size: 21px;
    color: #fff;
    margin-bottom: 7px;
    margin-top: 20px;
}
.city li .city_div .time,.add{
    font-size: 9px;
    color: #fff;
}
.city li .city_bottom {
    background: #fff;
    border-radius: 8px;
    width: 126px;
    height: 18px;
    font-size: 12px;
    color: #000;
    text-align: center;
    margin-top: -22px;
}
.city li .city_bottom:hover{
	background: #08D0A3;
	color: #fff;
}
.city li .vertical_line{
    width: 57px;
    height: 50px;
    border-right: 3px solid #08D0A3;
        
}

.season {
    width: 430px;
    margin: 0 auto;
    text-align: center;
}
.season .first_sea,.second_so{
    width: 180px;
	border: 2px solid #08D0A3;
}
.re_city .trian_x{
	margin-top: 5px;
	text-align: center;
}
.first_sea {
    margin-right: 20px;
}

.bg_arrangement {
    width: 500px;
    margin: 0 auto;
    position: relative;
}
.bg_arrangement .border_h5{
    width: 510px;
    margin-left: -44px;
}

.re_city {
    top: 6px;
/*    position: absolute;*/
}
.re_city .triangle{
    border-width: 50px 30px 30px 30px;
    border-style: solid;
    border-color: #653512 transparent  transparent transparent;
    width: 0;
    height: 0;
    text-align: center;
    margin: 0 auto;
    position: relative;
    margin-top: -3px;
}
.bott{
    text-align: center;
}
/*
.bott{
    position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent #999 transparent;
}
.bott::before{
  position: absolute;
  content: '';
  top: 1px;
  left: -9.5px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 9.5px 19px 9.5px;
  border-color: transparent transparent #ffffff transparent;
}
*/

.re_city .triangle:after{
    content: "";
    height: 0;
    width: 0;
    border-width: 38px 22px 22px 22px;
    border-style: solid;
    border-color: #f8f8f8 transparent  transparent transparent;
    margin-top: 38px;
    top: -84px;
    position: absolute;
    left: -22px;
    border-bottom: 0
    
}

@media (max-width: 1400px) {
  .modal .form label.place {
    width: 65%; } }
@media (max-width: 1350px) {
  #reg .card-box .card {
    min-height: 328px; }

  #host .host-box .host-info p {
    width: 45%; } }
@media (max-width: 1300px) {
  .modal .form label.place {
    width: 75%; }

  #host .host-box .host-logo a {
    width: 22%; }

  #calendar .container img {
    width: 100%; } }
@media (max-width: 1200px) {
  #host .host-box .host-info p {
    width: 47%; } }
@media (max-width: 1150px) {
  #reg .card-box .card {
    min-height: 328px; }
    #reg .card-box .card button, #reg .card-box .card a {
      bottom: 4%; }

  #guests2 ul li {
    width: 20.2381%; }

  #guests3 ul li {
    width: 18.2381%; }

  #subjects ul {
    width: 90%; }

  .modal .form label {
    width: 48%; }
    .modal .form label.place {
      width: 80%; }

  #host .host-box .host-info p {
    width: 41%; } }

@media (max-width: 1100px) {
  #welcome .nav {
    width: 76.38889%; }
    #welcome .nav ul li {
      display: inline-block;
      margin-right: 1.90476%; }

  #reg .card-box .card {
    min-height: 328px; }
    #reg .card-box .card button, #reg .card-box .card a {
      bottom: 3%; }

  #guests2 ul {
    text-align: center; }
    #guests2 ul li {
      width: 20.2381%; }

  #calendar .container img {
    width: 100%; }

  .modal .form label {
    width: 116%; }
    .modal .form label.place {
      width: 90%; }

  #history .place .slide-box-arrow, #history2 .place .slide-box-arrow {
    width: 80%; }
    #history .place .slide-box-arrow .arr, #history2 .place .slide-box-arrow .arr {
      display: none; }
    #history .place .slide-box-arrow .viewport, #history2 .place .slide-box-arrow .viewport {
      width: 100%;
      height: 0;
      padding-top: 56%; }
      #history .place .slide-box-arrow .viewport div, #history2 .place .slide-box-arrow .viewport div {
        display: block;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-size: 1.8rem; }
      #history .place .slide-box-arrow .viewport ul, #history2 .place .slide-box-arrow .viewport ul {
        position: absolute;
        top: 0;
        width: 100%; }
        #history .place .slide-box-arrow .viewport ul li, #history2 .place .slide-box-arrow .viewport ul li {
          width: 100%;
          margin: 15px 0; }
  #history .place .hlist, #history2 .place .hlist {
    width: 80%; }
    #history .place .hlist a span, #history2 .place .hlist a span {
      display: none !important; }
  #history .place strong, #history2 .place strong {
    width: 90%; }
  #history .place ul, #history2 .place ul {
    width: 90%; }
    #history .place ul li a, #history2 .place ul li a {
      height: 40px;
      width: 45%; }

  #host .host-box .host-logo a {
    width: 21%; } }
@media (max-width: 960px) {
  #welcome {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0; }
    #welcome .nav {
      display: none;
      height: auto; }
      #welcome .nav.show ul {
        height: auto;
        padding: 10px 0 !important; }
        #welcome .nav.show ul li {
          padding: 12px 0;
          height: 25px;
          line-height: 25px; }
          #welcome .nav.show ul li.on {
            color: #08D0A3!important; }
            #welcome .nav.show ul li.on a {
              color: #08D0A3!important; }
    #welcome .nav-box {
      height: 50px; }
      #welcome .nav-box.fixed .logos {
        margin-top: 0 !important; }
      #welcome .nav-box.fixed .mobile-nav-btn {
        top: 0; }
    #welcome .logos {
      min-width: 120px; }
      #welcome .logos a {
        width: 18px; }
        #welcome .logos a img {
          width: 18px;
			height: 19px;}
    #welcome .mobile-nav-btn {
      display: block; }
    #welcome h1 {
      top: 34%; }
      #welcome h1 .main {
        padding-bottom: 13%; }
    #welcome .info {
      bottom: 7%; }
    #reg .card-box .card button, #reg .card-box .card a {
      bottom: 3%; }

  #intro .detail .division ul li {
    width: 80%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px; }

  #feature ul li {
    width: 40%; }

  #guests ul, #guests3 ul {
    width: 90%; }

  #guests2 ul li {
    width: 24.2381%; }

  #subjects ul li {
    width: 20%; }

  #reg .card-box .card {
    width: 45%;
    margin-bottom: 20px; }

  #login, #register, #reginfo, #apply {
    width: 75%; }
    #login img, #register img, #reginfo img, #apply img {
      width: 30%;
      height: auto;
      max-width: 80px; }
    #login .form, #register .form, #reginfo .form, #apply .form {
      width: 100%;
      text-align: center; }
      #login .form label, #register .form label, #reginfo .form label, #apply .form label {
        width: 100%;
        text-align: left; }
        #login .form label input, #register .form label input, #reginfo .form label input, #apply .form label input {
          width: 100%; }
        #login .form label #reg_captcha_input, #register .form label #reg_captcha_input, #reginfo .form label #reg_captcha_input, #apply .form label #reg_captcha_input {
          width: 50%; }
        #login .form label b, #register .form label b, #reginfo .form label b, #apply .form label b {
          display: none; }
    #login .btn, #register .btn, #reginfo .btn, #apply .btn {
      width: 60% !important;
      max-width: 150px; }
    #login .sign-msg, #register .sign-msg, #reginfo .sign-msg, #apply .sign-msg {
      width: 100%;
      padding: 5% 10%;
      box-sizing: border-box; }

  #register {
    height: 90%;
    overflow: auto; }
    #register .close-modal {
      top: 0;
      right: 0; }

  #reginfo {
    width: 70%; }
    #reginfo .form label {
      display: block;
      height: 28px;
      margin-right: 4%;
      text-align: left;
      width: 100%; }
      #reginfo .form label b {
        display: inline-block; }
      #reginfo .form label i {
        width: auto !important; }

  #apply .form {
    text-align: left; }
    #apply .form label {
      height: auto;
      margin-bottom: 10px; }
      #apply .form label.section-line b {
        display: block; }
      #apply .form label.section-line input {
        width: auto; }
      #apply .form label input {
        width: 95%; }
        #apply .form label input.gender {
          width: 13%; }

  #host .host-box {
    width: 76.38889%; }
    #host .host-box .host-logo a {
      width: 24%; }
    #host .host-box .host-info p {
      width: 47%; }

  #calendar ul {
    width: 93%;
    border: none;
    padding: 0;
    margin: 15px auto;
    position: static;
    left: auto;
    margin-top: 40px; }
    #calendar ul li {
      position: static;
      left: auto; }
      #calendar ul li.open b, #calendar ul li:hover b {
        background-color: white;
        color: #4A4A4A; }
      #calendar ul li.open div p.node i, #calendar ul li:hover div p.node i {
        background-position: 0 -16px; }
      #calendar ul li b {
        background-color: transparent;
        color: #4A4A4A;
        width: auto;
        height: auto;
        line-height: 1em;
        border: none !important;
        font-size: 18px;
        font-size: 1.8rem; }
        #calendar ul li b span {
			color: #fff;
          display: inline;
          font-size: 18px;
          font-size: 1.8rem;
          margin: 0 10px;
          background-color: none !important; }
      #calendar ul li div {
        width: 100%;
        background-color: transparent;
        border-radius: 5px;
        margin-bottom: 25px; }
        #calendar ul li div p {
          width: 93%;
          margin: 10px auto;
          padding-bottom: 30px; }
          #calendar ul li div p.node i {
            bottom: 5px;
            top: auto;
            left: 50%;
            background-image: url("img/arrow_m.png");
            background-position: 0 0;
            width: 28px;
            height: 16px;
            margin-left: -14px; } }
@media (max-width: 900px) {
  #host .host-box {
    width: 100%; } }
@media (max-width: 800px) {
  #welcome h1 {
    top: 34%; }
    #welcome h1 strong {
      margin-top: 0; }
    #welcome h1 .main {
      padding-bottom: 13%;
      font-size: 35px;
      font-size: 3.5rem; }
      #welcome h1 .main img {
        width: 200px;
        top: 12px; }
  #welcome .info {
    bottom: 7%; }

  #intro .detail .text ul {
    display: inherit;
    width: 100%;
    text-align: left; }
    #intro .detail .text ul li {
      width: 47%;
      margin-right: 0; }
	#intro .detail .text ul .match_li img{
		width: 100%;
	}
  #guests ul li, #guests3 ul li {
    width: 20%; }

  #guests2 ul {
    width: 100%;
    padding: 0; }
    #guests2 ul li {
      width: 20%; }

	#intro .container {
    padding-left: 0; }
  #intro h3 {
    font-size: 2.4rem;
    margin: 10% auto 5% auto; }

  #subjects ul {
    width: 90%; }

  #calendar .day-box {
    width: 80% !important;
    border: none !important; }

  #history .hlist, #history2 .hlist {
    padding: 0;
    width: 80%; }

  .slide-box-arrow {
    width: 80%;
    margin: 20px auto; }
    .slide-box-arrow .arr {
      display: none; }
    .slide-box-arrow .viewport {
      width: 100%;
      height: 0;
      padding-top: 56%; }
      .slide-box-arrow .viewport div {
        display: block;
        position: absolute;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-size: 1.8rem; }
      .slide-box-arrow .viewport ul {
        position: absolute;
        top: 0;
        width: 100%; }
        .slide-box-arrow .viewport ul li {
          width: 100%;
          margin: 15px 0; } }
.back {
  position: fixed;
  right: 20px;
  bottom: 80px;
  border: 1px solid #929292;
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  z-index: 999; }
  .back:hover {
    background-color: #929292; }
    .back:hover:after {
      border-color: transparent transparent white transparent; }
  .back:after {
    content: "";
    display: block;
    border: 8px solid;
    border-color: transparent transparent #929292 transparent;
    width: 0;
    position: relative;
    top: 22%;
    left: 34%; }
@media (max-width: 760px){
	#welcome .logos{
	margin-top: 3.2%;
	}
	#feature .weidu .img_pc{
	display: none;
		
	}
	#feature .weidu .img_m{
		display: block;
		margin: 0 auto;
	}
	#intro .detail .text .it_renwu{
		background: #344a60;
	}
	#intro .detail .text .it_renwu .renwu_ul p{
		color: #08D0A3;
	}
	#reg .zoujin .zou_left{
		float: none;
    margin-right: 0;
    padding: 20px;
	} 
	#reg .zoujin .zou_right{
		padding: 20px 20px 50px;
}
	#intro .container h3{
		width: 85%;
		margin: 0 auto;
	}
	#intro .container .detail .match_img{
		    width: 85%;
    margin: 0 auto;
	}
	#intro .detail .text .it_renwu .trig1{
		border-width: 20px 10px 10px 10px;
    border-style: solid;
    border-color: #f8f8f8 transparent transparent transparent;
    width: 0;
    height: 0;
    top: 0;
	margin: 0 auto;
	} 
	#arrangement .sai_di{
		text-align: center;
	}
	#arrangement .sai_di .trig1,#calendar .sai_di .trig1{
		
		border-width: 20px 10px 10px 10px;
    border-style: solid;
    border-color: #f8f8f8 transparent transparent transparent;
    width: 0;
    height: 0;
    top: 0;
    position: absolute;
		    left: 48%;
	}   
	#reg .card-box{
		width: 100%;
	}
	
 }
@media (max-width: 700px) {
  #guests2 ul li {
    width: 24%; }

  #subjects ul {
    text-align: center;
    padding: 0; }
    #subjects ul li {
      width: 25%; }

  #host .host-box .host-logo a {
    width: 22%; } }
@media (max-width: 640px) {
  .section {
    padding: 30px 0; }
    .section h2 {
      font-size: 25px; }

  #welcome .atomlink {
    display: none; }
  #welcome h1 {
    top: 25%; }
    #welcome h1 strong {
      font-size: 24px;
      font-size: 2.4rem; }
    #welcome h1 .main {
      padding-bottom: 13%;
      font-size: 26px;
      font-size: 2.6rem; }
      #welcome h1 .main img {
        width: 160px;
        top: 12px; }

  #guests ul, #guests3 ul {
    width: 85%;
    padding-left: 0;
    text-align: center; }
    #guests ul li, #guests3 ul li {
      width: 45%;
      margin: 0 2%; }

  #guests2 ul {
    text-align: center; }
    #guests2 ul li {
      width: 27%; }

  #feature .text {
    width: 90%;
    margin: 10% auto;
    text-align: left; }
  #feature ul {
    width: 85%;
    margin: 10% auto 0 auto; }
    #feature ul li {
      width: 45%;
      margin-right: 8%; }
  #feature h2:last-child {
    margin: 20px 0 !important; }

  #calendar .container {
    width: 100%;
    margin: 0 auto;
    background: url("img/calendar_info_mobile.png");
    padding-bottom: 245%;
    background-size: cover; }
    #calendar .container img {
      width: 78%;
      margin: 10px 0 20px 0;
      padding: 0;
      border: none; }
      #calendar .container img:first-child {
        display: none;
        border: none; }

  #reg .card-box .card {
    width: 90%;
    min-width: 300px;
    margin: 0;
    margin-bottom: 20px;
    padding: 0 8%;
    min-height: 0; }
    #reg .card-box .card button, #reg .card-box .card a {
      position: relative;
      margin: 20px auto;
      display: block;
      left: 0;
      bottom: 0;
      text-align: center;
      width: 100%;
      box-sizing: border-box; }

  #host .host-box .host-info p {
    width: 42%; } }
@media (max-width: 580px) {
    .season .first_sea,.second_so{
        width: 38%;
    }
#welcome .slick_pc{
        display: none !important;
    }
#welcome .slick_h5{
    display: block !important;
}
.re_city .city li .city_div .spot {
    font-size: 14px;
}
.re_city .city li .city_div .time,.add {
    font-size: 9px;
}
    .re_city .season{
        width: 100%;
    }
#arrangement .bg_arrangement{
    width: inherit;
    margin: 0 10px;
}
#arrangement .bg_arrangement .border_h5{
    width: 100%;
    margin-left: 0;
}
 #arrangement .bg_arrangement .re_city{
        width: 100%;
        top: 0;
    }
#arrangement .bg_arrangement .re_city .city{
        width: 330px;
    }     
/*
.re_city .city li{
.re_city .city li{
        margin-bottom: 30px;
    }
*/
#welcome .saas_img {
    top: 80px;
    margin-left: -160px;
    width: 84%;
}
  #welcome {
/*
    padding-bottom: 55.55556%;
    background-size: contain;
*/
    }
    #welcome h1 {
      top: 36%; }
      #welcome h1 strong {
        font-size: 22px;
        font-size: 2.2rem; }
      #welcome h1 span {
        font-size: 18px;
        font-size: 1.8rem; }
      #welcome h1 .main {
        padding-bottom: 13%;
        letter-spacing: 0;
        font-size: 20px;
        font-size: 2rem; }
        #welcome h1 .main img {
          width: 120px;
          top: 6px; }
    #welcome .info span {
      font-size: 13px;
      font-size: 1.3rem; }

  #guests2 ul {
    text-align: center; }
    #guests2 ul li {
      width: 29%; }

  #intro h3 {
    font-size: 18px;
    font-size: 1.8rem; }
    #intro h3 span {
      font-size: 16px; }

  #subjects ul {
    width: 70%; }
    #subjects ul li {
      width: 45%; }
      #subjects ul li .circle i {
        font-size: 50px;
        font-size: 5rem; }
        #subjects ul li .circle i.txt {
          font-size: 35px;
          font-size: 3.5rem; }

  #vendor .v-box ul {
    padding-left: 10%; }
    #vendor .v-box ul li {
      width: 40%;
      margin-right: 5%;
      height: auto !important; }
      #vendor .v-box ul li img {
        width: 100%;
        height: auto; }

  #apply .form label {
    height: 50px;
    line-height: 50px; }

  #host .host-box .host-logo a {
    width: 20%; }
  #host .host-box .host-info {
    height: 230px;
      overflow: hidden; }
    #host .host-box .host-info p {
      width: 85%; }
      #host .host-box .host-info p:nth-child(1) {
        float: none;
        margin: 0 auto; }
      #host .host-box .host-info p:nth-child(2) {
        float: none;
        margin: 50px auto; } }
@media (max-width: 480px) {
  #welcome {
/*
    background-image: url("img/bg_h5.jpg");
    padding-bottom: 78.61111%;
    background-size: contain;
    background-size: cover;
    width: 100%;
*/
    margin: 49px 0 0 0; }
    #welcome h1 {
      top: 38%;
      display: none !important; }
      #welcome h1 strong {
        font-size: 20px;
        font-size: 2rem; }
      #welcome h1 span {
        font-size: 16px;
        font-size: 1.6rem; }
      #welcome h1 .main {
        padding-bottom: 13%;
        font-size: 20px;
        font-size: 2rem; }
        #welcome h1 .main img {
          width: 100px;
          top: 6px; }
    #welcome .button-link {
      right: 36%;
      bottom: 16%;
      font-size: 13px; }

  #guests2 ul {
    margin: 0; }
    #guests2 ul li {
      width: 30%; }
      #guests2 ul li p {
        padding-left: 25px; }

  #feature ul {
    width: 85%; }
    #feature ul li {
      width: 100%;
      margin-right: 8%;
      overflow: auto;
      margin-bottom: 10% !important; }
      #feature ul li p {
        width: 90%;
        float: right;
        margin: 0;
        font-size: 16px;
        font-size: 1.6rem;
        text-align: justify; }

  #history .hlist, #history2 .hlist {
    padding: 0;
    width: 80%; }
    #history .hlist li, #history2 .hlist li {
      padding-left: 0;
      padding-right: 0; }
      #history .hlist li a, #history2 .hlist li a {
        font-size: 16px;
        font-size: 1.6rem; }

  #host h2 {
    font-size: 24px;
    font-size: 2.4rem; }
  #host .host-box .host-logo a {
    width: 30%;
    margin-right: 2% !important; }
    #host .host-box .host-logo a.bs {
      width: 25%; }

  #intro .detail .text a {
    margin-top: 20px; } }
@media (max-width: 400px) {
  #guests2 ul {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center; }
    #guests2 ul li {
      width: 37%; }
      #guests2 ul li p {
        padding-left: 25px; }

  #subjects ul {
    width: 85%; }
    #subjects ul li {
      width: 45%; }

  #reg .card-box .card {
    width: 80%; }

  #apply .form label {
    height: 40px;
    line-height: 40px; }

  .modal .form label input.gender {
    margin: 0; }
  .modal .form label.place .inline-box .radio-box {
    width: 118px; } }
@media (max-width: 360px) {
    #arrangement .bg_arrangement .re_city .city{
        width: 280px;
    }
/*
    #arrangement .bg_arrangement .re_city .city li .city_div{
        width: 80px;
    }
*/
/*
    #arrangement .bg_arrangement .re_city .city li .city_bottom{
        width: 80px;
    }
*/
/*
    .re_city .city li{
        margin-bottom: 10px;
    }
*/
}
@media (max-width: 375px){
/*
    .re_city .city li{
        margin-bottom: 10px;
    }
*/
    .season .first_sea {
    margin-right: 0px;
}
	#intro .detail .text ul .match_li img{
		width: 100%;
	}
}

@media (max-width: 320px) {
#welcome .saas_img {
    margin-left: -135px;
}
    .season .first_sea,.second_so{
        width: 34%;
    }
    .re_city .season .first_sea,.second_so{
    width: 120px;
}
  #guests2 ul {
    width: 95%; }
    #guests2 ul li {
      width: 44%; }

  #host .host-box .host-info p {
    width: 93%; } 
}


.gray1{
	background: rgba(155,154,155,0.20);
}
.gray2{
	background: rgba(210, 196, 210, 0.33);
}
.section .saas_h2{
font-size: 24px;
color: #08D0A3;
letter-spacing: -1.18px;
}