Team:BIT-China/src/css/style4

@import url(https://2017.igem.org/Team:BIT-China/css/boostrap?action=raw&ctype=text/css); /*rgba(8,41,59,1); F8A886*/

html,body { margin: 0; padding: 0;

 height: 100%;
 width: 100%;

} body {

 height: 100%;
 width: 100%;
 background-color: rgba(242,215,188,0.4);

} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {

 display: block;

} body {

 line-height: 1;

} ol, ul {

 list-style: none;

} blockquote, q {

 quotes: none;

} blockquote:before, blockquote:after, q:before, q:after {

 content: ;
 content: none;

} table {

 border-collapse: collapse;
 border-spacing: 0;

} a {

 font-family: 'Quicksand', sans-serif;

} /*.screen-hidden {

 overflow: hidden;

}*/

{

-webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;
         box-sizing: border-box;

} .navbar-static-top, .navbar, .navbar-default, .container {

 border: 0;
 margin: 0;
 box-sizing: border-box;

} /*@media (min-width: 768px) .navbar-static-top {

   border-radius: 0;

}*/ .navbar-static-top {

   z-index: 1000;
   border-width: 0 0 1px;

} /*@media (min-width: 768px) .navbar {

   border-radius: 4px;

}*/ .navbar-brand img {

 /*width: 100%;*/
 font-size: 0;
 padding: 0;
 margin: 0;
 height: 100%;

} .navbar { width: 100%;

 min-width: 920px;
 top: 16px;

background-color: rgba(8,41,59,1);

 background-image: url("https://static.igem.org/mediawiki/2017/3/38/Bit-china-2017logo.svg");
 background-size: auto 100%  no-repeat;
 left: 0;
   /*border-color: #e7e7e7;*/
   /*position: relative;*/
   min-height: 70px;
   /*margin-bottom: 20px;*/
   /*border: 1px solid transparent;*/

} .navbar-header {

 width: 200px;
 height: 50px;

display: block;

   float: left;

} .navbar-nav {

 /*margin-left: 100px;*/

float: left; list-style: none; }

navbar a {

   text-decoration: none;
   font-size: 18px;
   font-weight: bold;

}

navbar * {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

navbar ul,
navbar li {

   margin: 0;

}

navbar ul {

padding: 0; }

navbar * {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

} .navbar .myactive { background-color: rgba(255,255,255,0.1); } @media (min-width: 768px) .navbar-nav>li {

   float: left;

} .nav { margin: 0; } .nav>li { padding: 0 10px;

   position: relative;
   display: block;
   float: left;

} /*.nav>li a {

 position: relative;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 line-height: 20px;
 color: #ccc;
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav>li a:hover {

 color: rgba(255,255,255,0.5);*/

} /*------------------------dropup dropdown------------------------*/ .dropup, .dropdown {

 position: relative;

} .dropdown-toggle:focus {

 outline: 0;

} .dropdown-menu {

 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 2px 0 0;
 list-style: none;
 font-size: 14px;
 text-align: left;
 background-color: #fff;
 border: 1px solid #ccc;
 border: 1px solid rgba(0, 0, 0, 0.15);
 border-radius: 4px;
 -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
 background-clip: padding-box;

 text-transform: uppercase;
   font-family: 'Quicksand', sans-serif;
   font-weight: 400;
   font-size: 14px;

} .dropdown-menu.pull-right {

 right: 0;
 left: auto;

} .dropdown-menu .divider {

 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;

} .dropdown-menu > li > a {

 display: block;
 padding: 3px 20px;
 clear: both;
 /*font-weight: normal;
 line-height: 1.42857143;
 color: #333333;*/

 white-space: nowrap;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {

 text-decoration: none;
 color: #fff;
 background-color: #f5f5f5;
 font-size: 2em;

} .dropdown-menu > .myactive > a, .dropdown-menu > .myactive > a:hover, .dropdown-menu > .myactive > a:focus {

 color: #fff;
 text-decoration: none;
 outline: 0;
 background-color: #f5f5f5;

} .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {

 color: #fff;

} .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {

 text-decoration: none;
 background-color: transparent;
 background-image: none;
 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 cursor: not-allowed;

} .open > .dropdown-menu {

 display: block;

} .open > a {

 outline: 0;

} .dropdown-menu-right {

 left: auto;
 right: 0;

} .dropdown-menu-left {

 left: 0;
 right: auto;

} .dropdown-header {

 display: block;
 padding: 3px 20px;
 font-size: 12px;
 line-height: 1.42857143;
 color: #777777;
 white-space: nowrap;

} .dropdown-backdrop {

 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 top: 0;
 z-index: 990;

} /*------------------------dropup dropdown------------------------*/ /*.movepic-container {

 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 text-align: center;
 overflow: hidden;

}*/ ul,ol,li {

 /*font-size: 0;*//*控制ol,li之间没有空隙*/
 list-style: none;
 /*padding: 0;*/

}

@media screen and (min-width: 678px) {

 .my-banner img {
   width: 100%;
 }

 #navbar .nav>li {

   padding: 0;
   margin: -20px;
   top: -20px;
   left: 60px;
 }
 #navbar .nav>li a {
   font-size: 14px !important;
 }

@media screen and (min-width: 1024px) {

 .my-banner img {
 width: 100%;
 }
 #navbar .nav>li {

   padding: 0;
   margin: 0 10px;
   top: 0;
   left: 0;
 
 }
 #navbar .nav>li a {
   font-size: 16px !important;
 }

} .page-border {

  width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 display: flex;
 text-align: center;
 overflow: hidden;
 /*margin: auto;*/
 /*overflow: hidden;*/

}

fullpage {

 position: relative;
 top: 0;
 height: 100%;
 /*position: fixed;*/
 width: 100%;
 /*top: -50px;*/
 /*top: -667px;控制出现那一页图片*/
 text-align: center;
 font-size: 0;

 /*translate3d(0px, px , 0px);*/
 -webkit-transition: all 0.7s;
 -moz-transition: all 0.7s;
 -o-transition: all 0.7s;
 transition: all 0.7s;

} .fp-section {

 /*position: absolute;*/
 /*visible的时候要加上*/
 display: flex;
 height: 100%;
 width: 100%;
 
 /*-webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;*/
 
 animation-duration: 0.5s;
 animation-timing-function: ease-out;
 animation-name: slidein;

} @keyframes slidein {

 from {
   transform: translateY(500px);
 }
 to {
   transform: translateY(0);
 }

}

.circle {

 display: none;
 z-index: 100;
 position: fixed;
 width: 100%;
 bottom: 60px;

 display: flex;

} .circle ol {

   display: none;
 margin: auto;

} .circle li {

 float: left;
 margin: 2em;

} .circle li span {

 display: block;
 height: 20px;
 width: 20px;
 border: 6px solid #333;
 border-radius: 50%;
 margin: auto;
 background-color: #fff;

} .circle li span:hover {

 opacity: 0.8;
 box-shadow: 2px 2px 2px #fff;

} .fa-circle {

 color: #444;
 text-shadow: 2px 2px 2px #fff;

}

Maxamed {

 width: 100%;
 display: flex;
 position: fixed;
 bottom: 3em;

} .nav__mine {

 position: relative;
 margin: auto;

}

.nav__item {

 line-height: 1;
 position: relative;
 /*display: block;*/
 margin: 10px;
 padding: 0;
 letter-spacing: 0;
 color: currentColor;
 border: 0;
 background: none;
 -webkit-tap-highlight-color: rgba(0,0,0,0);

}

.nav__item:focus {

 outline: none;

} .nav--maxamed .nav__item {

 width: 36px;
 height: 36px;

}

.nav--maxamed .nav__item::before {

 content: ;
 position: absolute;
 top: 0.75em;
 right: 0;
 width: 16px;
 height: 16px;
 box-shadow: inset 0 0 0 6px #3F598E;
 border: 2px solid #fff;
 border-radius: 50%;
 -webkit-transition: -webkit-transform 0.3s, box-shadow 0.3s;
 transition: transform 0.3s, box-shadow 0.3s;

}

.nav--maxamed .nav__item:not(.nav__item--current):focus::before, .nav--maxamed .nav__item:not(.nav__item--current):hover::before {

 box-shadow: inset 0 0 0 6px #1D3045;

}

.nav--maxamed .nav__item--current::before {

 -webkit-transform: scale3d(1.75,1.75,1);
 transform: scale3d(1.75,1.75,1);
 box-shadow: inset 0 0 0 1px #3F598E;

}

.nav--maxamed .nav__item-title {

 position: absolute;
 left: 3.5em;
 top: 0;
 pointer-events: none;
 padding: 0.75em 0;
 font-weight: bold;
 white-space: nowrap;
 -webkit-transform-origin: 0 50%;
 transform-origin: 0 50%;
 opacity: 0;
 -webkit-transform: scale3d(0.5,0.5,1);
 transform: scale3d(0.5,0.5,1);
 -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
 transition: opacity 0.5s, transform 0.5s;
 -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
 transition-timing-function: cubic-bezier(0.2,1,0.3,1);

}

.nav--maxamed .nav__item--current .nav__item-title {

 opacity: 1;
 -webkit-transform: scale3d(1,1,1);
 transform: scale3d(1,1,1);

}

/*====================下拉栏=============================*/ .caret {

   display: inline-block;
   width: 0;
   height: 0;
   margin-left: 5px;
   vertical-align: middle;
   border-top: 4px dashed;
   border-top: 4px solid \9;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;

} .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {

   /*color: transparent;*/
   color: white;
   /*background-color: #e7e7e7;*/
   background-color:  transparent;

} .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {

   color: #fff;

}

.nav>li a {

 position: relative;
 display: block;
 padding-top: 25px;
 padding-bottom: 25px;
 line-height: 20px;
 color: white;
 /*background-color: #08293b;*/
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

}

.nav li>.dropdown-a {

 position: relative;
 display: block;
 height: 50px;
 /*padding-top: 25px;*/
 /*padding-bottom: 15px;*/
 /*line-height: 50px;*/
 color: white;
 background-color: #F8A886;
 vertical-align:middle;
 text-align: center;
  -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav li>.dropdown-a>span {

 display: block;
 position: relative;
 top: -15px;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -o-transition: all 0.5s;
 transition: all 0.5s;

} .nav>li a:hover {

 /*background-color: transparent;*/
 color: #fff;

}

navbar .dropdown-a:hover {

 background-color: #F8A886;
 opacity: 0.8;

}

navbar>ul>li>a:hover {

  color: #F8A886;

}

navbar>.nav>.myactive:hover {

 color: #fff;

} .main-nav-link {

 border: 0;
 margin: 0;
 height: 50px;

} .dropdown-menu li:first-child .dropdown-a{

 border-top-right-radius: 10px;
 border-top-left-radius: 10px;

} .dropdown-menu li:first-child {

 border-top-right-radius: 10px;
 border-top-left-radius: 10px;

} .dropdown-menu li:last-child .dropdown-a{

 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;

} .dropdown-menu li:last-child {

 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;

} .dropdown-menu {

 border: 0;
 border-radius: 10px;
  -webkit-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;

} .nav>.dropdown>.dropdown-menu {

 border-radius: 10px;

} .dropdown-menu:before {

 /*z-index: 10000;*/
 content: ;
 position: absolute;
 bottom: 100%;
 left: 30%;
 right: auto;
 -webkit-transform: translateX(-50%);
     -ms-transform: translateX(-50%);
         transform: translateX(-50%);
 height: 0;
 width: 0;
 border: 8px solid transparent;
 border-bottom-color: #F8A886;
 -webkit-transition: opacity .3s;
 transition: opacity .3s;

}

navbar .navbar-nav {

 display: flex !important;
 justify-content: space-between;
 width: 80%;

}

/*===========下拉菜单动画============*/ .nav li>.dropdown-a>span {

 padding: 5px 20px;
 text-decoration: none;
 -webkit-transition: color .2s ease-in-out;
 transition: color .2s ease-in-out;

}

.nav li>.dropdown-a>span:before {

 content: "";
 position: absolute;
 bottom: 0;
 width: 0;
 border-bottom: solid 2px;

}

.nav li>.dropdown-a>span:before {

 left: 0;

}

.nav li>.dropdown-a>span:hover {

 color: #fff;

}

.nav li>.dropdown-a>span:hover:before {

 width: 80%;
 left: 10%;

}

.nav li>.dropdown-a>span:before {

 -webkit-transition: width .2s ease-in-out;
 transition: width .2s ease-in-out;

}

/*=====================my-main-container========================*/ .my-main-container, .my-banner {

 position: relative;
 top: 70px;
 margin: 0;

} .my-main-container {

 display: flex;

} .my-pdf {

 margin: auto;
 padding-top: 100px;
 min-width: 856px;
 margin-bottom: 200px;

} .my-banner {

 z-index: 1000;
 width: 100%;
 box-shadow: 5px 5px 20px #333;

} .my-content-box {

 display: flex;
 flex-direction: column;
 width: 100%;
 /*margin: 2em;*/
 padding: 50px;

} .my-content-box p {

 /*margin: auto;*/

} .my-content-box img, .my-content-box span {

 margin: auto;

} .my-content-box span {

 padding: 2em;
 font-weight: bold;

} .my-content-box .formula {

 width: 80%;
 margin-bottom: -50px;

} .my-img-box {

 display: flex;
 justify-content: space-around;

} .content_container_img {

 position: relative;
 top: 100px;
 width: 100%;
 margin: 100px 0;

} .my-home-box {

 /*padding: 5%;*/
 /*margin: 50px 0;*/
 display: flex;
 justify-content: center;

} .my-home-box a {

 display: block;
  width: 25%;
 /*height: 25%;*/
 margin: 20px;
 border-radius: 20px;
 opacity: 0.7;
 box-shadow: 2px 2px 5px #777;
   -webkit-transition: all ease 0.4s;a
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;

} .my-home-box img {

 width: 100%;
 border-radius: 20px;

} .my-home-box a:hover {

 opacity: 1.0;
 box-shadow: 5px 5px 10px #777;

} .my-backTop {

 width: 40px;
 position: fixed;
 bottom: 40px;
 right: 40px;
 z-index: 1000;
 cursor: pointer;
 color: #F8A886;
 text-decoration: none;

} .my-backTop img {

 width: 100%;

} .my-backTop:hover {

 text-decoration: none;

} .my-backTop span {

 font-size: 15px;
 font-weight: bold;

} .my-backTop img, .my-backTop span {

   -webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;

} .my-backTop:hover img {

 -webkit-transform: rotate(180deg);
 -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);

} .my-backTop:hover span {

 font-size: 20px;
 color: #F8A886;

} .effect {

 display: inline-block;
 position: relative;
 text-decoration: none;
 color: #fff;
 text-transform: capitalize;
 font-family: 'Roboto', sans-serif;
 font-size: 18px;
 padding: 20px 0px;
 width: 150px;
 border-radius: 6px;
 overflow: hidden;

}

.effect.effect-4 {

 -webkit-transition: all 0.2s linear 0s;
 transition: all 0.2s linear 0s;

} .effect.effect-4:before {

 content: "\f178";
 font-family: FontAwesome;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
     -ms-flex-align: center;
         align-items: center;
 -webkit-box-pack: center;
     -ms-flex-pack: center;
         justify-content: center;
 position: absolute;
 top: 0;
 left: 0px;
 width: 100%;
 height: 100%;
 text-align: center;
 font-size: 30px;
 -webkit-transform: scale(0, 1);
         transform: scale(0, 1);
 -webkit-transition: all 0.2s linear 0s;
 transition: all 0.2s linear 0s;

} .effect.effect-4:hover {

 text-indent: -9999px;

} .effect.effect-4:hover:before {

 -webkit-transform: scale(1, 1);
         transform: scale(1, 1);
 text-indent: 0;

} .my-button {

 z-index: 1000;
 position: fixed;
 bottom: 40px;
 right: 40px;

} /*=================================*/

hexGrid {

 width: 95%;
 height: 100%;
 margin-top: 100px;
 /*padding: 20px;*/
 box-sizing: border-box; 
 display: flex;
 flex-flow: row wrap;           /*//从左到右、从上到下、多列显示*/
 -webkit-flex-flow: row wrap;   
 /*justify-content: space-between;*/
 /*四个并列元素两头对齐，剩下空间平均分配*/
 align-items: center;           /*//侧轴对齐居中*/

}

hexGrid>li {

 padding: 0;
 margin: 50px 0;
 width: 20%;

}

hexGrid>li:first-child {

 width: 30%;
 left: 20%;

}

hexGrid>li:nth-child(2) {

 width: 30%;
 left: 30%;
 margin-right: 30%;

}

hexGrid>li img {

 width: 80%;

} .hex, .hexIn {

 padding: 0;
 margin: 0;

} .hex {

 position: relative;
 list-style-type: none;
 float: left;
 overflow: hidden;
 outline:1px solid transparent; 
 animation-play-state: paused; 
 animation-name: drive;
 animation-duration: 1s;
 animation-iteration-count: infinite;
   /*-webkit-transition: all ease 0.4s;
 -moz-transition: all ease 0.4s;
 -ms-transition: all ease 0.4s;
 -o-transition: all ease 0.4s;
 transition: all ease 0.4s;*/

} .hex:hover {

 animation-play-state: running;
 /*webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 transform: rotate(10deg);*/

}

@keyframes drive {

 0% {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 animation-timing-function: ease-out;
 }
 25% {
 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 transform: rotate(10deg);
 animation-timing-function: ease-in;
 }
 50% {
 -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 animation-timing-function: ease-out;
 } 
 75% {
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 transform: rotate(-10deg);
 animation-timing-function: ease-in;

 }
 100% {
  -webkit-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -o-transform: rotate(0deg);
 transform: rotate(0deg);
 animation-timing-function: ease-out;
 }

} .hexIn {

 width: 100%;
 text-align: center;
 /*display: flex;*/

} .hexIn p {

 z-index: 1000;
 position: absolute;
 /*margin: auto;*/

} .hexIn h1 {

 position: absolute;
 bottom: 25px;
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 width: 80%;

}

/*============================*/ .title-h1 {

 font-weight: bold;

} .title-h2 {

 width: 100%;
 padding-top: 86px;
 margin: auto;
 text-align: center;
 font-weight: bold;
 letter-spacing: 3px;
 /*text-shadow: 1px 1px 10px rgba(8,41,59,0.5);*/
 /*text-decoration: underline;*/

} .title-h3 {

 margin: 2em 0 1em 0;
 font-weight: bold;
 color: #234464;

} .title-h4 {

 font-weight: bolder;
 text-indent: 4em;

} p {

 line-height: 1.5em;

} .my-content-p {

 width: 100%;
 margin: auto;
 /*font-family: Roboto, sans-serif;*/
 font-family: 'Quicksand', sans-serif;
 /*font-weight: normal;*/
 /*font-size: 10px;*/
 /*font-size: 14px;*/
 /*line-height: 1.42857143;*/
 /*color: #333;*/
 font-weight: 500;
 font-size: 18px !important;
 line-height: 1.7;
 margin-bottom: 20px;
 color: #333;

} .my-content-li {

 width: 100%;
 margin: auto;
 /*font-family: Roboto, sans-serif;*/
 font-family: 'Quicksand', sans-serif;
 font-weight: 500;
 font-size: 18px !important;
 line-height: 1.7;
 color: #333;

} .section-upline {

 /*display: block;*/
 width: 100%;
 /*height: 1px;*/
 /*margin-bottom: 80px;*/

} table {

 /*width: 100%;*/
 font-size: 0.8;
 position: relative;
 left: 4em;
 border: 1px solid #fff;
 border-collapse:collapse;

} table caption {

 text-align: left;
 margin: 10px 0px;

} table thead {

 border: 1px solid #fff;
 background-color: #444;
 color: #fff;
 text-align: left;

} table tfoot {

 background-color: #aaa;
 color: #fff;

} table td, table tr {

 border: 1px solid #aaa;

} table td {

 padding: 5px 10px;

}

/*====================*/

popup-change-task {

 position: fixed;
 /*display: -webkit-flex;
   display: flex;*/
 /*position: absolute;*/
 top: 0;
 left: 0;
 z-index: 100;
 display: none;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.7);

} .popup-board {

 /*position: relative;*/

 height: 300px;
 width: 450px;
 margin: auto;
 border-radius: 20px;
 background-color: rgba(242,215,188,1);
 box-shadow: 5px 5px 20px #222;
 animation-duration: 0.5s;
 animation-timing-function: ease-out;
 animation-name: slidein;

} .popup-board header {

 border-radius: 20px 20px 0 0;
 position: relative;
 width: 100%;
 height: 40px;
 background-color: #F8A886;
 text-align: center;

} .popup-board header h1 {

 margin: 0;
 font-size: 1.3rem;
 color: #333;
 line-height: 40px;

} .popup-board header i {

 position: absolute;
 top: 12px;
 right: 12px;
 cursor: pointer;

} .popup-board header i:hover {

 opacity: 0.8;

} .popup-board section {

 margin: 10%;
 /*text-align: center;*/

} .popup-board footer {

 position: relative;
 width: 100%;
 height: 40px;
 text-align: center;

}

/*==============================轮播图*/ /*.cd-section img{

 text-align: center;

}*/ .cd-section h1, .cd-section p {

 /*position: absolute;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 width: 90%;
 max-width: 768px;
 text-align: center;*/

} .cd-section h1 {

 color: white;
 font-weight: 300;
 text-transform: uppercase;
 font-size: 20px;
 font-size: 1.25rem;

} .cd-section p {

 line-height: 1.6;

} @media only screen and (min-width: 768px) {

 .cd-section h1 {
   font-size: 30px;
   font-size: 1.875rem;
 }
 .cd-section p {
   font-size: 20px;
   font-size: 1.25rem;
   line-height: 2;
 }

}

.cd-scroll-down {

 position: absolute;
 left: 50%;
 right: auto;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 transform: translateX(-50%);
 bottom: 20px;
 width: 38px;
 height: 44px;
 /*background: url("../img/cd-arrow-bottom.svg") no-repeat center center;*/

}

/* No Touch devices */ .cd-nav-trigger {

 display: none;

}

.no-touch #cd-vertical-nav {

 position: fixed;
 left: 40px;
 top: 50%;
 bottom: auto;
 -webkit-transform: translateY(-50%);
 -moz-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 -o-transform: translateY(-50%);
 transform: translateY(-50%);
 z-index: 1;

} .no-touch #cd-vertical-nav li {

 text-align: left;
 margin: 6px 0;

} .no-touch #cd-vertical-nav a {

 display: inline-block;
 /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;

} .no-touch #cd-vertical-nav a:after {

 content: "";
 display: table;
 clear: both;

} .no-touch #cd-vertical-nav a span {

 float: left;
 display: inline-block;
 -webkit-transform: scale(0.6);
 -moz-transform: scale(0.6);
 -ms-transform: scale(0.6);
 -o-transform: scale(0.6);
 transform: scale(0.6);

} .no-touch #cd-vertical-nav a:hover span {

 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

} .no-touch #cd-vertical-nav a:hover .cd-label {

 opacity: 1;

} .no-touch #cd-vertical-nav a.is-selected .cd-dot {

 background-color: rgba(8,41,59,1);

} .no-touch #cd-vertical-nav .cd-dot {

 position: relative;
 /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/
 top: 8px;
 height: 22px;
 width: 22px;
 margin: 6px 0;
 border-radius: 50%;
 background-color: #d88683;
 -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
 -moz-transition: -moz-transform 0.2s, background-color 0.5s;
 transition: transform 0.2s, background-color 0.5s;
 -webkit-transform-origin: 50% 50%;
 -moz-transform-origin: 50% 50%;
 -ms-transform-origin: 50% 50%;
 -o-transform-origin: 50% 50%;
 transform-origin: 50% 50%;

} .no-touch #cd-vertical-nav .cd-label {

 position: relative;
 margin-left: 10px;
 /*padding: .4em .5em;*/
 padding: .6em .7em;
 color: white;
 background-color: rgba(8,41,59,1);;
 border-radius: 5px;
 font-size: 18px;
 font-size: 1.4rem;
 -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
 -moz-transition: -moz-transform 0.2s, opacity 0.2s;
 transition: transform 0.2s, opacity 0.2s;
 opacity: 0;
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 transform-origin: 50% 100%;

}

/* Touch devices */ .touch .cd-nav-trigger {

 display: block;
 z-index: 2;
 position: fixed;
 bottom: 30px;
 right: 5%;
 height: 44px;
 width: 44px;
 border-radius: 0.25em;
 background: rgba(255, 255, 255, 0.9);

} .touch .cd-nav-trigger span {

 position: absolute;
 height: 4px;
 width: 4px;
 background-color: #3e3947;
 border-radius: 50%;
 left: 50%;
 top: 50%;
 bottom: auto;
 right: auto;
 -webkit-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -ms-transform: translateX(-50%) translateY(-50%);
 -o-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);

} .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after {

 content: ;
 height: 100%;
 width: 100%;
 position: absolute;
 left: 0;
 background-color: inherit;
 border-radius: inherit;

} .touch .cd-nav-trigger span::before {

 top: -9px;

} .touch .cd-nav-trigger span::after {

 bottom: -9px;

}

.touch #cd-vertical-nav {

 position: fixed;
 z-index: 1;
 right: 5%;
 bottom: 30px;
 width: 90%;
 max-width: 400px;
 max-height: 90%;
 overflow-y: scroll;
 -webkit-overflow-scrolling: touch;
 -webkit-transform-origin: right bottom;
 -moz-transform-origin: right bottom;
 -ms-transform-origin: right bottom;
 -o-transform-origin: right bottom;
 transform-origin: right bottom;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.2s;
 -moz-transition-duration: 0.2s;
 transition-duration: 0.2s;
 border-radius: 0.25em;
 background-color: rgba(255, 255, 255, 0.9);

} .touch #cd-vertical-nav a {

 display: block;
 padding: 1em;
 border-bottom: 1px solid rgba(62, 57, 71, 0.1);

} .touch #cd-vertical-nav a span:first-child {

 display: none;

} .touch #cd-vertical-nav a.is-selected span:last-child {

 color: #d88683;

} .touch #cd-vertical-nav.open {

 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);

} .touch #cd-vertical-nav.open + .cd-nav-trigger {

 background-color: transparent;

} .touch #cd-vertical-nav.open + .cd-nav-trigger span {

 background-color: rgba(62, 57, 71, 0);

} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {

 background-color: #3e3947;
 height: 3px;
 width: 20px;
 border-radius: 0;
 left: -8px;

} .touch #cd-vertical-nav.open + .cd-nav-trigger span::before {

 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 top: 1px;

} .touch #cd-vertical-nav.open + .cd-nav-trigger span::after {

 -webkit-transform: rotate(135deg);
 -moz-transform: rotate(135deg);
 -ms-transform: rotate(135deg);
 -o-transform: rotate(135deg);
 transform: rotate(135deg);
 bottom: 0;

} .touch #cd-vertical-nav li:last-child a {

 border-bottom: none;

}

@media only screen and (min-width: 768px) {

 .touch .cd-nav-trigger, .touch #cd-vertical-nav {
   bottom: 40px;
 }

}