canvas {
	width: 100%;
	height: 100%;
	position: absolute;
}
div.ConBox{
	width: 1200px;
	margin: 0 auto;
}
div.s_ul{
	position: absolute;
	top: calc(30% - 35.5px);
    left: 0;
    width: 100%;
}
div.s_ul1{
	animation: downIn .6s both;
    animation-name: downIn;
    animation-duration: 0.6s;
    animation-timing-function: initial;
    animation-delay: .8s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-fill-mode: both;
    animation-play-state: initial;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
.s_ul > ul {
    padding-left: 1px;
    text-align: center;
}
div.s_ul>ul>li{
	
}
figure, body {
    margin: 0;
    padding: 0;
    line-height: 1.4;

}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #eee;
}
.demo {
    background-color: #666;
}
h1, h2, h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}
h1 {
    font-size: 24px;
}
h1, #wrapper > figure > figcaption {
    text-align: center;
}
#wrapper > figure > figcaption {
    margin: 1em;
}
.demo h1,
.demo #wrapper > figure > figcaption {
    color: #fff;
}
.mis-slider li figcaption {
    font-weight: 500;
    letter-spacing: .5px;
}
.main {
    width: 80%;
    margin: 2em auto;
    /*display: block;*/
}
div.main pre {
    font-size: 1.1em;
    overflow: auto;
    max-height: 500px;
    background-color: #fff;
    padding: 0 1em 1em;
}
@media screen and (min-width: 1200px) {
    .main {
        width: 50%;
    }
}
/*return*/
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.3) url(http://www.100sucai.com/img/demo/1335.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
 -webkit-transition: opacity .3s 0s, visibility 0s .3s;
 -moz-transition: opacity .3s 0s, visibility 0s .3s;
 transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
 -webkit-transition: opacity .3s 0s, visibility 0s 0s;
 -moz-transition: opacity .3s 0s, visibility 0s 0s;
 transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
	visibility: visible;
	opacity: 1;
}
.cd-top.cd-fade-out {
	opacity: .5;
}
.no-touch .cd-top:hover {
	background-color: #e86256;
	opacity: 1;
}
div.s_ul>ul>li{
        display: inline-block;
    /* margin: 0 .7%; */
    text-align: center;
    width: 104px;
    height: 120px;
    margin-left: 4.85885px;
    margin-right: 4.85885px;
}
div.s_ul>ul>li img{
	width: 100%;
	height: 100%;
}
.pro {
	width:100%;
	height:300px;
	background: #fff;
	box-shadow: 0px 4px 4px #000000;
	-webkit-box-shadow: 0px 4px 4px #000000;
	-moz-box-shadow: 0px 4px 4px #000000;
}
.lists{
	width:95%;
	height: 100%;
	overflow: visible;
}
.lists div {
	width:19%;
	height:80%;
}
.ser{
	width:100%;
	height:100%;
}
.ser_list{
	width:100%;
}
.ser_list>div{
	width:23%;
	height:15em;
	margin-right:1%;
	margin-top:1%;
}
.ser_list h1{
	line-height: 32px;
}
.ser_list p{
	text-align: center;
	color:#333333;
	font-size:14px;
	line-height:20px;
}


figure, body {
    margin: 0;
    padding: 0;
    line-height: 1.4;

}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #eee;
}
.demo {
    background-color: #666;
}
h1, h2, h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}
h1 {
    font-size: 24px;
}
h1, #wrapper > figure > figcaption {
    text-align: center;
}
#wrapper > figure > figcaption {
    margin: 1em;
}
.demo h1,
.demo #wrapper > figure > figcaption {
    color: #fff;
}
.mis-slider li figcaption {
    font-weight: 500;
    letter-spacing: .5px;
}
.main {
    width: 80%;
    margin: 2em auto;
    /*display: block;*/
}
div.main pre {
    font-size: 1.1em;
    overflow: auto;
    max-height: 500px;
    background-color: #fff;
    padding: 0 1em 1em;
}
@media screen and (min-width: 1200px) {
    .main {
        width: 50%;
    }
}


.profession-ser span{
	 overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.drop-down{position:absolute;bottom:32px;width:100%;height:50px;font-size: 16px;color: #E8E8E8;cursor: pointer;font-weight: bold;}
.drop-down{-webkit-transform-origin:0;-moz-transform-origin:0;-ms-transform-origin:0;transform-origin:0;-webkit-animation-name:arrowDown;-moz-animation-name:arrowDown;-ms-animation-name:arrowDown;animation-name:arrowDown;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;animation-duration:2s;-webkit-animation-direction:normal;-moz-animation-direction:normal;-ms-animation-direction:normal;animation-direction:normal;-webkit-animation-timing-function:linear;-moz-animation-timing-function:linear;-ms-animation-timing-function:linear;animation-timing-function:linear}
@-webkit-keyframes arrowDown{0%,100%{opacity:.5;transform:translateY(0)}
50%{opacity:1;transform:translateY(5px)}}
@-moz-keyframes arrowDown{0%,100%{opacity:.5;transform:translateY(0)}
50%{opacity:1;transform:translateY(5px)}}
@-ms-keyframes arrowDown{0%,100%{opacity:.5;transform:translateY(0)}
50%{opacity:1;transform:translateY(5px)}}
@keyframes arrowDown{0%,100%{opacity:.5;transform:translateY(0)}
50%{opacity:1;transform:translateY(5px)}}


#hexGrid {
    overflow: hidden;
    width: 780px;
	margin: 0px auto;
   /* margin: -69px auto 0px 35px;*/
    padding: 0.866% 0;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
}
#hexGrid:after {
    content: "";
    display: block;
    clear: both;
}
#hexGrid  .hex {
    position: relative;
    list-style-type: none;
    float: left;
    overflow: hidden;
    visibility: hidden;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
    -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
        -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
            transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
#hexGrid .hex * {
    position: absolute;
    visibility: visible;
    outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
#hexGrid .hexIn {
    display:block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    overflow: hidden;
    -webkit-transform: skewY(-30deg) rotate(60deg);
        -ms-transform: skewY(-30deg) rotate(60deg);
            transform: skewY(-30deg) rotate(60deg);
}

/*** HEX CONTENT **********************************************************************/
#hexGrid .hex img {
    left: -100%;
    right: -100%;
    width: auto;
    height: 100%;
    margin: 0 auto;
}

#hexGrid .hex h1, .hex p {
    width: 102%;
    left:-1%; /* prevent line on the right where background doesn't cover image */
    padding: 5%;
    box-sizing:border-box;
    background-color: rgba(0, 101, 206, 0.88);
    font-weight: 300;
    -webkit-transition:  -webkit-transform .2s ease-out, opacity .3s ease-out;
            transition:          transform .2s ease-out, opacity .3s ease-out;
}
#hexGrid .hex h1 {
    /*bottom: 50%;*/
    padding-top:50%;
    height: 100%;
    font-size: 1em;
    z-index: 1;
    -webkit-transform:translateY(-100%) translatez(-1px);
        -ms-transform:translateY(-100%) translatez(-1px);
            transform:translateY(-100%) translatez(-1px);
}
#hexGrid .hex h1:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 45%;
    width: 10%;
    text-align: center;
    border-bottom: 1px solid #fff;
}
#hexGrid .hex p {
    top: 50%;
    padding-bottom:50%;
    -webkit-transform:translateY(100%) translatez(-1px);
        -ms-transform:translateY(100%) translatez(-1px);
            transform:translateY(100%) translatez(-1px);
}


/*** HOVER EFFECT  **********************************************************************/
#hexGrid .hexIn:hover h1, .hexIn:focus h1,
#hexGrid .hexIn:hover p, .hexIn:focus p{
    -webkit-transform:translateY(0%) translatez(-1px);
        -ms-transform:translateY(0%) translatez(-1px);
            transform:translateY(0%) translatez(-1px);
}