@font-face {
  font-family: 'Alibaba-PuHuiTi-Bold';
  font-display: swap;
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Bold/webfont.eot'); /* IE9*/
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Bold/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Bold/webfont.woff2') format('woff2'),
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Bold/webfont.woff') format('woff'), /* chrome、firefox */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Bold/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Bold/webfont.svg#AlibabaPuHuiTiH') format('svg'); /* iOS 4.1- */
}
@font-face {
  font-family: 'Alibaba-PuHuiTi-Regular';
  font-display: swap;
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Regular/webfont.eot'); /* IE9*/
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Regular/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Regular/webfont.woff2') format('woff2'),
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Regular/webfont.woff') format('woff'), /* chrome、firefox */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Regular/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Regular/webfont.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}
@font-face {
  font-family: 'Alibaba-PuHuiTi-Light';
  font-display: swap;
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Light/webfont.eot'); /* IE9*/
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Light/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Light/webfont.woff2') format('woff2'),
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Light/webfont.woff') format('woff'), /* chrome、firefox */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Light/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Light/webfont.svg#AlibabaPuHuiTiL') format('svg'); /* iOS 4.1- */
}
@font-face {
  font-family: 'Alibaba-PuHuiTi-Heavy';
  font-display: swap;
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Heavy/webfont.eot'); /* IE9*/
  src: url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Heavy/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Heavy/webfont.woff2') format('woff2'),
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Heavy/webfont.woff') format('woff'), /* chrome、firefox */
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Heavy/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('/themes/blog2019/simple/fonts/Alibaba-PuHuiTi-Heavy/webfont.svg#AlibabaPuHuiTiL') format('svg'); /* iOS 4.1- */}
body{/*font-family: 'Alibaba-PuHuiTi-Bold';*/margin: 0;padding: 0;}
h1, h2, h3, h4, h5 {
    letter-spacing: .8px;
    /*font-family: roboto slab,serif;*/
}
p {
    letter-spacing: .5px;
    font-size: 13px;
    line-height: 34px;
    font-weight: 300;
}
p {
    margin: 0 0 10px;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
    float: left;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.page_head{
	background: #f6f6f6;
	height: 800px;
	/*background: url(img/img-wave.png) #f6f6f6 no-repeat center bottom;*/
    background-size: cover;
}
.page_head .container{
	padding-bottom: 90px;
	padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 1170px;
    position: relative;
}
.page_head .container .container_left{width: 500px;}
.title1{
	font-family: 'Alibaba-PuHuiTi-Heavy';
    /*font-family: 'Alibaba-PuHuiTi-Bold';*/
    font-weight: 800;
    display: block;
    font-size: 80px;
    color: #fb5353;
    line-height: 90px;
}
.title2{
	font-family: 'Alibaba-PuHuiTi-Regular',Raleway,Microsoft Yahei;
	font-size: 47px;
    line-height: 53px;
    color: #404040;
    font-weight: 800;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}
.page_head .container .contact_info{overflow: hidden;padding-top: 20px;}
.page_head .container .contact_info p{font-size: 20px;line-height: 30px;color: #454545;/*font-family: 'Raleway';*/}
.page_head .container .contact_info ul{margin: 0;padding: 0;overflow: hidden;}
.page_head .container .contact_info ul li{margin: 0;padding: 0;list-style: none;float: left;color: #343434;padding-right: 34px;font-size: 24px;line-height: 30px;font-family: 'Open Sans', sans-serif;/*font-weight: 800;*/}
.page_head .container .contact_info ul li i{font-size: 22px;line-height: 30px;}
.page_head .container .contact_info ul li span{font-size: 24px;line-height: 30px;}
.container_left{float: left;overflow: hidden;}
.container_right{float: right;overflow: hidden;}
.page_top{padding-top: 50px;/*padding-bottom: 39px;*/position: absolute;z-index: 999999;top: 0;left: 50%;margin-left: -585px;/*font-family: 'Alibaba-PuHuiTi-Light';*/}
.page_top .container{width: 1170px;margin: 0 auto;height: 66px;padding: 0;}
.page_top .container h1{padding: 0;margin: 0;overflow: hidden;display: block;float: left;width: 66px;height: 66px;border-radius: 50%;}
.page_top .container h1 a{max-width: 66px;display: block;}
.page_top .container h1 a:-webkit-any-link {color: -webkit-link;cursor: pointer;}
.page_top .container h1 a img{width: 66px;height: 66px;display: block;border:none;}
.page_top .container .menu_nav_btn{transition-delay: 0s;transition-duration: 0.6s;transition-property: all;transition-timing-function: ease;display: block;
-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 23px 0 0 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;}
.page_top .container .menu_nav_btn .menu-button{width: 31px;
    font-size: 0;
    float: right;
    height: 19px;
    position: relative;
    z-index: 1000001;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    border: 0;
    outline: 0;
}
.page_top .container .menu_nav_btn .menu-button span{display: block;
    position: absolute;
    z-index: 1000002;
    height: 3px;
    width: 100%;
    background: #111111;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;}
.page_top .container .menu_nav_btn .menu-button span.l1{
	top: 0px;
}
.page_top .container .menu_nav_btn .menu-button span.l2{top: 7px;}
.page_top .container .menu_nav_btn .menu-button span.l3{top: 14px;}
.page_top .container .menu_nav_btn .menu-nav-list{display: none;
    position: fixed;
    z-index: 1000000;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.8);
    padding: 0;
    margin: 0;
    padding-top: 199px;}
.page_top .container .menu_nav_btn .menu-nav-list li{font-weight: 800;
    font-size: 36px;
    display: block;}
.page_top .container .menu_nav_btn .menu-nav-list li a{display: inline-block;
    line-height: 60px;
    color: #404040;
    text-decoration: none;
    position: relative;
    transition: all ease .3s;
    -webkit-transition: all ease .3s;
    text-decoration: none;
    -webkit-appearance: none;
    outline: 0;
    font-family: 'Alibaba-PuHuiTi-Regular';
    font-weight: normal;
}
.page_top .container .menu_nav_btn .menu-nav-list li.nav-active a{color: #fb5353;}
.page_top .container .menu_nav_btn .menu-nav-list li a:hover{text-decoration: none;
	color: #fb5353}
.blur{/*text-shadow:#000 0 0 14px;*/color:rgba(255,255,255,.1);filter: blur(2px);}
.menu_nav_btn ul li.blur{/*text-shadow:#000 0 0 14px;*/color:rgba(255,255,255,.1);filter: blur(2px);}
.menu_nav_btn a:hover,.menu_nav_btn a.act{/*font-weight: 400;*/text-decoration: underline;}
.menu_nav_btn a:hover>i{opacity:1;right:-20px}
.menu_nav_btn ul li a{position:relative}
.menu_nav_btn ul li a i{width:10px;height:13px;position:absolute;top:33px;right:0;border:0;margin:0;background:0 0;opacity:0;transition:all ease .3s;-webkit-transition:all ease .3s;font-style:normal;background:url(../images/arrow-menu1.png) no-repeat}
#menu-button.opened span.l1{top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);}
#menu-button.opened span.l2{opacity: 0;
    left: -60px;}
#menu-button.opened span.l3{top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);}

.page_head .container .container_right{float: right;overflow: hidden;width: 600px;}
.contat-from-wrapper{overflow: hidden;}
.contat-from-wrapper ul{margin: 0;padding: 0;}
.contat-from-wrapper ul li{margin: 0;padding: 24px 0 0 0;list-style: none;overflow: hidden;}
.contat-from-wrapper ul li input,.contat-from-wrapper ul li select,.contat-from-wrapper ul li textarea{
    width: 285px;
    display: block;
    outline: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #ddd;
    background-color: inherit;
    color: #404040;
    font-size: 18px;
    line-height: 23px;
    padding-bottom: 24px;
    float: left;
    font-family: 'Raleway',Alibaba-PuHuiTi-Regular,Microsoft Yahei;
    vertical-align: baseline;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-align: start;
    cursor: text;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    -webkit-writing-mode: horizontal-tb !important;
    -webkit-rtl-ordering: logical;
}
.contat-from-wrapper ul li.long input{float: none;width: 100%;}
.contat-from-wrapper ul li textarea{float: none;width: 100%;height: 77px;margin-top: 56px;}

.contact-form-submit{text-align: center;}
.contact-form-submit a{
    display: inline-block;
    border: none;
    outline: none;
    width: 200px;
    line-height: 60px;
    text-transform: uppercase;
    font-size: 21px;
    color: #FFF;
    /*font-weight: 800;*/
    letter-spacing: 2px;
    background-color: #e84d49;
    margin: 41px auto;
    margin-bottom: 0;
    text-decoration: none;
    text-align: center;
    border-radius: 3px;
}
.contact-form-submit a:hover{background-color:#fb5353;}
input::-webkit-input-placeholder{color:#bbbbbb;}
input::-moz-placeholder{/* Mozilla Firefox 19+ */color:#bbbbbb;}
input:-moz-placeholder{/* Mozilla Firefox 4 to 18 */color:#bbbbbb;}
input:-ms-input-placeholder{/* Internet Explorer 10-11 */color:#bbbbbb;}
textarea::-webkit-input-placeholder{color:#bbbbbb;}
textarea::-moz-placeholder{/* Mozilla Firefox 19+ */color:#bbbbbb;}
textarea:-moz-placeholder{/* Mozilla Firefox 4 to 18 */color:#bbbbbb;}
textarea:-ms-input-placeholder{/* Internet Explorer 10-11 */color:#bbbbbb;}

.footer{
    background-color: #FFF;
    padding-top: 100px;
    padding-bottom: 77px;
    text-align: center;
    font-family: 'Raleway',Alibaba-PuHuiTi-Regular,Microsoft Yahei;
}
.footer > h1 a {
    margin: 0 auto;
    display: block;
    max-width: 66px;
}
.footer > h1 a img{
    vertical-align: middle;
    border:0;
}

.footer > h1{padding: 0;margin: 0;text-align: center;}
.footer > h1 a{max-width: 66px;display: inline-block;overflow: hidden;display: block;width: 66px;height: 66px;border-radius: 50%;background: #eff2f7;padding: 5px;}
.footer > h1 a:-webkit-any-link {color: -webkit-link;cursor: pointer;}
.footer > h1 a img{width: 66px;height: 66px;display: block;border:none;border-radius: 50%;}

.footer .footer-nav {
    padding-top: 37px;
    padding-bottom: 43px;
}
.footer .footer-nav ul{
    text-align: center;
    padding: 0;
    margin: 0;
}
.footer .footer-nav ul li{
    display: inline-block;
    text-transform: uppercase;
    font-size: 15px;
    margin: 0 13px;
}
.footer .footer-nav ul li a{
    color: #9d9d9d;
    text-decoration: none;
    font-size: 16px;
}
.footer .footer-nav ul li a:hover {
    text-decoration: none;
    color: #fb5353
}

.footer ul.social-icons {
    padding: 0;
    margin: 0;
    text-align: center;
    padding-bottom: 40px;
}
.footer ul.social-icons li{
    display: inline-block;
    margin: 0 6.5px;
    padding: 0;
    list-style: none;
}
.footer ul.social-icons li a{
    display: block;
    width: 42px;
    height: 42px;
    background-color: #bbbbbb;
    color: #FFF;
    line-height: 42px;
    font-size: 20px;
    border-radius: 100%;
    text-align: center;
    text-decoration: none;
}
.footer ul.social-icons li a:hover{
    background-color: #fb5353;
}
.footer .copy-right {
    text-align: center;
    display: block;
    font-size: 14px;
    line-height: 16px;
    color: #9c9c9c;
    font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
}
.footer .copy-right a{color: #9c9c9c;}
.bg-white{background: #ffffff;}
.bg-gray{background: rgb(246, 246, 246);}
.content-wrap{/*overflow: hidden;*/font-family: 'Raleway',Alibaba-PuHuiTi-Regular,Microsoft Yahei;}
.content-item{padding: 100px 0;position: relative;}
.content-container{overflow: hidden;width: 1170px;margin: 0 auto;}
.content-left{float: left;width: 290px;}
.content-left h3{letter-spacing: .8px;font-size: 24px;position: relative;text-transform: uppercase;font-family: 'Alibaba-PuHuiTi-Regular';}
.content-left h3 span:after{content: "";position: absolute;bottom: -20px;height: 3px;background: #fb5353;width: 28px;left: 0;}
.content-left .content-description{font-weight: 400;
    margin-top: 70px;
    line-height: 30px;
    font-size: 16px;
    letter-spacing: .4px;}
.content-left .content-description p{margin-bottom: 1em;font-size: 16px;line-height: 1.75em;font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";}
.content-right{width: 796px; float: right;}
ul.portfolio-image{list-style: none;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;}
ul.portfolio-image li{float: left;width: 398px;height: 398px;
    display: block;
    list-style: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    /*padding-top: 46%;*/
    }

ul.portfolio-image li a{display: block;color: #2f2f2f;
    text-decoration: none;
    transition: ease .6s;
    -webkit-transition: ease .6s;
    -moz-transition: ease .6s;
    -o-transition: ease .6s;
    -ms-transition: ease .6s;}
ul.portfolio-image li img{display: block;width: 100%;height: 100%;border:none;position: absolute;
    left: 0;
    top: 0;
    -webkit-filter: grayscale(100%);
    transition: filter,transform,.5s;}
ul.portfolio-image li .decription-wrap{position: absolute;
    width: 358px;
    height: 358px;
    top: 0;
    left: 0;
    background: rgba(242,242,242,.4);
    padding: 20px;
    transition: background,.5s;}
ul.portfolio-image li .decription-wrap .image-bg{color: #2f2f2f;
    background: #fff;
    background: rgba(255,255,255,.9);
    font-size: 14px;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    display: inline-block;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    /*padding: 10px 0;*/
    position: relative;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transition: opacity,.5s;
    letter-spacing: 1.5px;
    font-weight: 300;
    color: transparent;}
ul.portfolio-image li .decription-wrap .image-bg .desc{position: absolute;
    z-index: 1;
    top: 45%;
    left: 0;
    display: table-cell;
    right: 0;
    text-align: center;
    color: #2f2f2f;
    font-size: 14px;
    font-weight: 700;}
ul.portfolio-image li:hover {
    cursor: pointer
}
ul.portfolio-image li:hover img {
    -webkit-filter: grayscale(20%);
    transform: scale(1.15)
}
ul.portfolio-image li:hover .image-bg {
    opacity: 1
}
ul.portfolio-image li:hover .description-wrap {
    background: rgba(186,186,186,.6)
}
.listing-item {
    list-style: none;
    display: inline-block;
    width: 100%;
    padding: 5px 0 0 0;
    margin: 0;

}

.col-md-4 {
    width: 33.33333333%;
    float: left;
}
.icon {
    font-family: glyphter;
    font-size: 30px;
    line-height: 20px;
    color: #818181;
    margin: 0;
    font-weight: normal;
}
.head-sm {
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 20px;
    /*font-family: roboto,sans-serif;*/
    font-weight: 700;
}
.text-grey {
    color: #434343;
    line-height: 26px;
    margin-bottom: 60px;
    padding-right: 2em;
    font-size: 14px;
    font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
}
.col-md-6 {
    width: 50%;
}
.wrap-card {
    position: relative;
    box-shadow: 0 0 0 #818181;
    transition: all .2s ease 0s;
    -webkit-transform: translateY(0px) translateX(0px)
}

.wrap-card:before,.wrap-card:after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 100%;
    height: 3px;
    background: #818181;
    -webkit-transform: scaleX(0);
    transition: all .2s ease
}

.wrap-card:before {
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 0
}

.wrap-card:after {
    bottom: 0;
    left: 0;
    -webkit-transform-origin: 100% 0
}

.wrap-card:hover {
    box-shadow: 20px 20px 0 #818181;
    -webkit-transform: translateY(-10px) translateX(-10px);
    transition: all .2s ease .4s
}

.wrap-card:hover:after,.wrap-card:hover:before {
    -webkit-transform: scaleX(1)
}

.card {
    background: #fefefe;
    padding: 30px 35px 45px;
    margin-bottom: 30px;
    border: 1px solid rgba(129,129,129,.1)
}

.card:before,.card:after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 3px;
    height: 100%;
    background: #818181;
    -webkit-transform: scaleY(0);
    transition: all .2s ease .2s
}

.card:before {
    top: 0;
    left: 0;
    -webkit-transform-origin: 0 100%
}

.card:after {
    top: 0;
    right: 0;
    -webkit-transform-origin: 0 0
}

.card:hover:after,.card:hover:before {
    -webkit-transform: scaleY(1)
}

.year {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 10px;
    /*font-family: roboto,sans-serif;*/
}
.job {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #ccc;
    font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
}
.company {
    font-size: 12px;
    line-height: 14px;
    border: 1px solid #ececec;
    color: #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 5px;
    font-weight: 400;
    font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}
.text-detail {
    margin-top: 30px;
    color: #5f5f5f;
}
.text-detail p{line-height: 1.75em;font-size: 16px;font-family: "Microsoft Yahei","Hiragino Sans GB","Helvetica Neue",Helvetica,tahoma,arial,Verdana,sans-serif,"WenQuanYi Micro Hei","\5B8B\4F53";}
.skillst {
    margin-top: 30px
}

.skillst .skillbar {
    width: 100%;
    height: 10px;
    background-color: #fdfdfd;
    position: relative;
    margin-bottom: 60px;
    padding: 2px;
    box-sizing: border-box
}

.skillst .count-bar {
    width: 100%;
    height: 5px;
    width: 0;
    position: relative
}

.skillst .count-bar {
    background-color: #818181
}

.skillst .count-bar span {
    font-size: 12px
}

.skillst .title {
    position: absolute;
    line-height: 25px;
    top: -35px;
    left: 0;
    padding-left: 10px;
    font-size: 12px!important
}

.skillst .count-bar .count {
    position: absolute;
    line-height: 18px;
    top: -28px;
    right: -20px;
    width: 40px;
    height: 18px;
    color: #fff;
    text-align: center;
    background-color: #2f2f2f
}

.skillst .count-bar .count span {
    position: relative;
    display: block;
    font-family: roboto,sans-serif;
    color: #ffffff;
    font-weight: bold;
}

.skillst .count-bar .count span:after {
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 18px;
    content: "";
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

.skillst .count-bar .count {
    background-color: #818181
}

.skillst .count-bar .count span:after {
    border-top: 4px solid #818181
}
#contact form {
    margin-top: 25px
}

#contact .slider-masks {
    background-color: rgba(129,129,129,.7);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#contact .group {
    position: relative;
    margin-bottom: 65px
}

#contact input,#contact textarea {
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #999999;
    background: 0 0;
    color: #969696;
    font-size: 16px
}

#contact input:focus,#contact textarea:focus {
    outline: none;
    border-bottom: none
}

#contact label {
    color: #2b2b2b;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

#contact input:focus~label,#contact input:valid~label,#contact textarea:focus~label,#contact textarea:valid~label {
    top: -25px;
    font-size: 12px;
    color: #818181
}

#contact .bar {
    position: relative;
    display: block;
    width: 100%
}

#contact .bar:before,#contact .bar:after {
    content: '';
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #818181;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

#contact .bar:before {
    left: 50%
}

#contact .bar:after {
    right: 50%
}

#contact input:focus~.bar:before,#contact input:focus~.bar:after,#contact textarea:focus~.bar:after,#contact textarea:focus~.bar:before {
    width: 50%
}

#contact .highlight {
    position: absolute;
    height: 60%;
    width: 100%;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: .5
}

#contact input:focus~.highlight,#contact textarea:focus~.highlight {
    -webkit-animation: inputHighlighter .3s ease;
    -moz-animation: inputHighlighter .3s ease;
    animation: inputHighlighter .3s ease
}

#contact input[type=submit] {
    border: 1px solid #999999 !important;
    color: #666666;
    padding: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    transition: .2s ease all;
    -moz-transition: .2s ease all;
    -webkit-transition: .2s ease all
}

#contact input[type=submit]:hover {
    background: #fb5353;
    color: #fff;
    cursor: pointer;
    border-color: #fb5353 !important;
}

@-webkit-keyframes inputHighlighter {
    from {
        background: #5264ae
    }

    to {
        width: 0;
        background: 0 0
    }
}

@-moz-keyframes inputHighlighter {
    from {
        background: #818181
    }

    to {
        width: 0;
        background: 0 0
    }
}

@keyframes inputHighlighter {
    from {
        background: #818181
    }

    to {
        width: 0;
        background: 0 0
    }
}
/*loading*/
#page-preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: #f1f3f2; z-index: 99999999; }

#page-preloader .spinner { display: block; position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; border: 3px solid transparent; border-top-color: #fb5353; border-radius: 50%; z-index: 1001; -webkit-animation: spin 2.5s infinite linear; animation: spin 2.5s infinite linear; }

#page-preloader .spinner:before, #page-preloader .spinner:after { content: ''; position: absolute; border-radius: 50%; }

#page-preloader .spinner:before { top: 5px; left: 5px; right: 5px; bottom: 5px; border: 3px solid transparent; border-top-color: #088cdc; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; }

#page-preloader .spinner:after { top: 15px; left: 15px; right: 15px; bottom: 15px; border: 3px solid transparent; border-top-color: #52bf81; -webkit-animation: spin 1s infinite linear; animation: spin 1s infinite linear; }

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes spin { 0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.about-me p{font-size: 18px;color: #777;font-family: 'Raleway',Alibaba-PuHuiTi-Regular,Microsoft Yahei;line-height: 1.75em;margin-bottom: 0.5em;}
#codeArea{position: absolute;z-index: 2;width: 100%;height: 100%;top: 0;left: 0;background: rgba(255,255,255,.8);display: none;}
#codeArea>div{width: 500px;margin: 0 auto;position: relative;}
#codeArea .code_input input{padding-left: 0;padding-right: 0;font-size: 18px;}
#codeArea .code_input input:focus{border-bottom: 1px #999999 solid;}
#codeArea .code_img{width: 160px;height: 47px;position: absolute;top: 0;right: 0;}
#codeArea a{display: block;text-align: center;padding: 10px 0;margin: 0 auto;margin-top: 50px;font-size: 16px;color: #666;text-decoration: none;border:1px #999999 solid;}
#codeArea a:hover{background: #fb5353;color: #ffffff;border-color: #fb5353;}
#codeArea .tt{font-size: 28px;margin-top: 70px;text-align: center;}
#codeArea .txt{margin-top: 80px;}
#codeArea .closeBtn{width: 32px;height: 32px;text-align: center;line-height: 32px;display: block;position: absolute;top: 20px;right: 20px;z-index: 999;font-size: 32px;cursor: pointer;}
.layui-layer-dialog .layui-layer-content{font-size: 18px !important;}
.section-icon { position: absolute; top: -25px; left: 50%; margin-left: -25px; z-index: 11; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; background: #eff2f7; text-align: center; }
.section-icon .icon{ line-height: 50px; font-size: 24px; color: #666666; position: relative; z-index: 3; }
.section-icon:after { content: ""; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; display: block; background: #fff; border: 1px solid #dcdfe4; }
.single-icon{position: relative;margin: 0;top: auto;left: auto;cursor: pointer;}
.single-icon:hover:after{background: #ff6400;}
.single-icon .icon{font-size: 18px;}
.single-icon:hover .icon{color: #fff;}
.footer ul.social-icons li{margin: 0;}