html, body, h1, h2, h3, h4, h5, h6, p, textarea, input, select, ul, ol, li, fieldset, figure {
margin: 0;
padding: 0;
border: none; }
article, aside, canvas, figure, figure img, figcaption,
hgroup, footer, header, nav, section, audio, video {
position: relative;
display: block; }
body,
textarea,
input,
select {
font-size: 20px;
color: #585248;
line-height: 1.6;
font-family: "Exo 2", "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: none; }
::selection {
background-color: #ff9500;
color: white; }
h1, h2, h3, h4, h5, h6 {
font-weight: 500; }
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important; }
html,
body {
background: #e6e4e1;
height: 100%; }
body.static {
overflow: hidden;
}
a {
text-decoration: none;
color: #2f4f8d;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
a:hover {
color: #2f4f8d; }
img {
border: none; }
strong, b {
font-weight: 500; }
.wrap {
max-width: 1440px;
margin: 0 auto;
position: relative; }
.wrap.narrow {
padding-left: 80px;
padding-right: 80px; }
.clearfix {
*zoom: 1; }
.clearfix:before, .clearfix:after {
display: table;
content: ""; }
.clearfix:after {
clear: both; }
.hidden {
display: none; }
.bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: cover;
background-position: center; }
.gradient {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 101;
background-color: #338dec;
background-image: -webkit-linear-gradient(-405deg, #338dec 0%, #c0c0c0 100%);
background-image: linear-gradient(135deg,#338dec 0%, #c0c0c0 100%); }
.gradient.grey {
background: rgba(88, 82, 72, 0.8); }
.gradient.white {
background: rgba(255, 255, 255, 0.2); }
.gradient.black {
background: rgba(0, 0, 0, 0.4); }
.gradient.blackTransition {
background: linear-gradient(135deg, #4a4a4a 0%, #2b2b2b 100%); }
.gradient.transparent {
opacity: .7; }
.button {
position: relative;
font-size: 16px;
line-height: 46px;
height: 46px;
width: 160px;
display: inline-block;
border-radius: 0px;
color: #262626;
}
.button.plain {
padding: 0 20px;
border: 1px solid #848077;
color: #585248; }
.button.plain:hover {
border-color: #585248;
background: #585248;
color: white; }
.button.solid {
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
color: white;
height: 50px;
line-height: 50px;
padding: 0 36px;
border-radius: 0; }
.button.shiny {
padding: 1px;
background-color: #c0c0c0;
background-image: -webkit-linear-gradient(-405deg, #c0c0c0 0%, #c0c0c0 100%);
background-image: linear-gradient(135deg,#c0c0c0 0%, #c0c0c0 100%); }
.button.shiny .button-text-wrap {
display: block;
background: white;
padding: 0 8px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.button.shiny .button-text {
color: #262626;}
.button.shiny:hover .button-text-wrap {
background: transparent; }
.button.shiny:hover .button-text {
-webkit-background-clip: none;
-webkit-text-fill-color: initial;}
.button.white {
background: white;
font-size: 20px;
height: 48px;
line-height: 48px;
padding: 0 18px; }
.button.white-border {
line-height: 36px;
height: 36px;
padding: 0 20px;
border: 1px solid white;
font-size: 16px;
color: white; }
.button.white-border:hover {
background: white;
color: #585248; }
.button.grey {
background: #eeedec;
border-radius: 0;
color: #585248;
height: 44px;
line-height: 44px;
padding: 0 20px; }
.button.grey:hover {
background: #e4e3e1; }
.float-item-wrap {
float: left;
position: relative;
margin: 2px s;}
.float-item-wrap.full {
width: 100%; }
.float-item-wrap.half {
width: 50%; }
.float-item-wrap.quarter {
width: 25%; }
.float-item-wrap.full-height {
height: 698px; }
.float-item-wrap.half-height {
height: 347px; }
.float-item {
margin:4px;
height: 100%;
position: relative; }
.main {
background: white;
min-height: 100%;
box-sizing: border-box; }
.main.without-hero {padding-top: 120px;}
.breadcrumb-nav {
font-size: 16px;
margin-bottom: 16px; }
.breadcrumb-nav .breadcrumb-link {
color: #ff9500; }
.breadcrumb-nav .slash {
color: #a69a88;
margin: 0 -1px; }
header {
height: 0;
position: relative; }
nav ul, nav ol, nav li {
list-style: none; }
.global-nav {
z-index: 20000;
position: absolute;
left: 0;
width: 100%;
height: 60px;
margin-top: 10px;
}
.global-nav ul, .global-nav ol {
list-style: none; }
.global-nav .wrap {
/* max-width: 1240px; */
padding-left: 1em;
padding-right: 1em;
/* border-bottom: 3px solid rgba(255, 255, 255, 0.2); */
height: 60px;
}
.global-nav .logo-link {
float: left;
height: 60px; }
@media (max-width: 800px) {
.global-nav .logo-link {height: 32px;}
.global-nav .wrap {height: 32px;}
.global-nav {height: 32px;}
}
.global-nav .logo-link:hover .icon-logo {
/**background-position: -42px 0; **/
}
.global-nav .logo-link:active .icon-logo {
background-position: -84px 0; }
.global-nav .logo-link .icon-logo {
vertical-align: 10px;
margin-right: 5px; }
.global-nav .logo-link .icon-logotype {
height: 100%;
}
.global-nav .logotype-orange {
display: none; }
.global-nav .mobile-nav-button {
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 60px;
display: none;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.global-nav .mobile-nav-button .icon-logo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -14px;
margin-left: -16px;
vertical-align: 10px;
width: 32px;
height: 28px;
background-image: url("../img/icon-logo.svg");
background-size: 116px 28px;
background-position: -42px 0; }
.global-nav .mobile-nav-button.hidden-animated {
visibility: hidden;
opacity: 0; }
.global-nav .right-nav {
float: right;
margin-right: -18px; }
.global-nav .nav-item {
float: left; }
.global-nav .nav-link {
color: white;
display: block;
padding: 0 18px;
line-height: 60px;
font-size: 16px;
font-weight: 400; }
.global-nav .nav-link .text {
display: block; }
.global-nav .nav-link.current .text, .global-nav .nav-link:hover .text {
border-bottom: 3px solid white; }
.global-nav.light .wrap {
border-bottom: 1px solid #eeeeed;
border-bottom: 1px solid rgba(88, 82, 72, 0.1); }
.global-nav.light .icon-logotype path {
fill: #ff9500; }
.global-nav.light .logotype-white {
display: none; }
.global-nav.light .logotype-orange {
display: block; }
.global-nav.light .logo-link .icon-logo,
.global-nav.light .mobile-nav-button .icon-logo {
background-image: url("../images/icons/icon-logo-dark.svg"); }
.global-nav.light .nav-link {
color: #585248; }
.global-nav.light .nav-link.current .text, .global-nav.light .nav-link:hover .text {
color: #ff9500;
border-color: #ff9500; }
.footer {
text-align: center; }
.footer .wrap {
background: white;
padding-top: 2em;
padding-bottom: 3em;
border-top: 1px solid rgba(88, 82, 72, 0.1); }
.page-contact .footer .wrap, .contact + .footer .wrap {
border-top: none; }
.footer .social {
font-size: 0.1px; }
.footer .social .icon {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.footer .social .social-option {
width: 32px;
height: 32px;
display: inline-block; }
.footer .social .social-option:hover .icon {
opacity: .8; }
.footer .social .social-option + .social-option {
margin-left: 30px; }
.footer .text {
font-size: 16px;
font-weight: 200;
margin-top: 16px; }
.footer .logo-link {
margin-top: 36px;
display: inline-block; }
.footer .logo-link .icon-logo {
width: 32px;
height: 28px;
background-image: url("../images/icons/icon-logo.svg");
background-size: 116px 28px;
background-position: 0 0; }
.footer .logo-link:hover .icon-logo {
background-position: -42px 0; }
.footer .logo-link:active .icon-logo {
background-position: -84px 0; }
.footer .logo-link .icon-logo {
background-image: url("../images/icons/icon-logo-dark.svg"); }
.social-option-dd-wrap {
position: relative; }
.social-option-dd-wrap .social-option-dd {
opacity: 0;
visibility: hidden;
position: absolute;
background: white;
width: 120px;
height: 120px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-radius: 6px;
bottom: 0;
left: 50%;
margin-left: -60px;
margin-bottom: 50px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
-o-transform: translateY(-15px);
transform: translateY(-15px); }
.social-option-dd-wrap .social-option-dd:after {
content: '';
position: absolute;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid white;
left: 50%;
margin-left: -8px;
bottom: 0;
margin-bottom: -8px; }
.social-option-dd-wrap .qrcode {
width: 100px;
height: 100px;
margin-top: 10px; }
.social-option-dd-wrap:hover .social-option-dd {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.mobile-nav {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 20000;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
visibility: hidden;
opacity: 0; }
.mobile-nav ul, .mobile-nav ol {
list-style: none; }
.mobile-nav.active {
visibility: visible;
opacity: 1; }
.mobile-nav.active .mobile-nav-close-button .stroke {
opacity: 1;
visibility: visible;
-webkit-transform: rotate(-45deg) translate3d(8px, -8px, 0);
-moz-transform: rotate(-45deg) translate3d(8px, -8px, 0);
-ms-transform: rotate(-45deg) translate3d(8px, -8px, 0);
-o-transform: rotate(-45deg) translate3d(8px, -8px, 0);
transform: rotate(-45deg) translate3d(8px, -8px, 0); }
.mobile-nav.active .mobile-nav-close-button .stroke + .stroke {
-webkit-transform: rotate(45deg) translate3d(8px, 7px, 0);
-moz-transform: rotate(45deg) translate3d(8px, 7px, 0);
-ms-transform: rotate(45deg) translate3d(8px, 7px, 0);
-o-transform: rotate(45deg) translate3d(8px, 7px, 0);
transform: rotate(45deg) translate3d(8px, 7px, 0); }
.mobile-nav .mobile-nav-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index:2000;
background-color: #2f4f8d;
overflow: scroll; }
.mobile-nav .gradient {
opacity: .9; }
.mobile-nav .logo-link {
position: absolute;
left: 20px;
top: 0;
/* height: 80px; */
z-index: 1; }
.mobile-nav .logo-link .icon-logo {
width: 32px;
height: 28px;
background-image: url("../images/icons/icon-logo.svg");
background-size: 116px 28px;
background-position: 0 0; }
.mobile-nav .logo-link:hover .icon-logo {
background-position: -42px 0; }
.mobile-nav .logo-link:active .icon-logo {
background-position: -84px 0; }
.mobile-nav .logo-link .icon-logotype {
margin-top: 20px; }
.mobile-nav .mobile-nav-close-button {
width: 60px;
height: 60px;
position: absolute;
top: 0;
right: 0;
z-index: 1; }
.mobile-nav .mobile-nav-close-button .stroke {
width: 32px;
height: 4px;
position: absolute;
background: white;
left: 50%;
margin-left: -16px;
top: 50%;
margin-top: 10px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.mobile-nav .mobile-nav-close-button .stroke + .stroke {
margin-top: -12px; }
.mobile-nav ul {
position: relative;
padding-top: 80px;
margin-top: -20px;
padding-bottom: 20px; }
.mobile-nav .nav-item + .nav-item {
margin-top: 12px; }
.mobile-nav .nav-link {
position: relative;
color: white;
display: block;
text-align: center;
font-size: 20px;
line-height: 44px;
margin: 0 20px; }
.mobile-nav .nav-link .text {
display: inline-block;
border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.mobile-nav .nav-link.current .text {
border-color: white; }
.hero .video{width: 100%; min-height: 806px;}
.hero {
height: auto;
/* max-height: 680px; */
position: relative;
width: 100%;
display: block; }
.hero .hero-title-wrap {
position: absolute;
width: 100%;
height: 100%;
z-index:200;
top: 0;
left: 0;
text-align: center; }
.hero .hero-title-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; }
.hero .hero-title-inner {
display: inline-block;
vertical-align: middle;
color: white; }
.hero .gradient {
opacity: .7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
.hero .hero-video-poster {
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.hero .hero-video-poster.active {
visibility: visible;
opacity: 1; }
.hero .hero-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
overflow: hidden; }
.hero .hero-bg video {
position: absolute;
width: 100%;
height: auto;
top: 0;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease; }
.hero .hero-bg video.active {
visibility: visible;
opacity: 1; }
.hero .hero-bg .video-fallback-cover {
position: absolute;
height: 100%;
top: 0;
left: 50%;
margin-left: -700px; }
.hero .hero-title {
font-size: 60px;
position: relative;
font-style: italic;
margin-top: -36px;
font-weight: lighter; }
.hero .hero-copy {
font-size: 30px;
font-weight: 300;
margin-top: -6px; }
.hero .full-video-link {
position: absolute;
right: 20px;
bottom: 20px;
color: white;
text-transform: uppercase;
font-size: 14px;
opacity: .8; }
.hero .full-video-link .icon {
margin-right: 4px;
vertical-align: -3px; }
.hero .full-video-link:hover {
opacity: 1; }
.intro {
color:#7e7e7e;
font-size: 18px;
text-align: center;
display: block;
padding: 100px;
}
.intro .copy {
max-width: 1080px;
margin: 0 auto;
/* font-size: 1.2em; */
line-height: 2em;
}
.intro .copy strong {
font-style: italic;
font-size: 1.2em; }
.intro .button {
margin-top: 20px; }
.products {
overflow: hidden;
position: relative;
padding:0px 100px;
}
@media (max-width: 800px) {
.products {padding:0px 0px;}
}
.products .float-item-wrap {
width: 33.333333%; }
.products .float-item-wrap.hidden {
display: none; }
.products .product-items-wrap {
margin: -4px; }
.products .product-item {
background: #fafaf9;
padding-bottom: 100%;
display: block;
position: relative; }
.products .product-item:hover .info-wrap {
visibility: visible;
opacity: 1; }
.products .product-item:hover .name {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.products .product-item:hover .copy {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.products .product-item:hover .button {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.products .product-item.extra:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fafaf9;
left: 100%;
margin-left: 4px; }
.products .info-wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
background-color: rgba(16,40,88,0.8);
/* background-image: -webkit-linear-gradient(-405deg, rgba(0 ,167, 255, 0.4) 0%, rgba(51, 201, 234 ,0.4) 100%);
background-image: linear-gradient(135deg rgba(0 ,167, 255 ,0.4) 0%, rgba(51 ,201 ,234, 0.4) 100%); */
visibility: hidden;
opacity: 0.8; }
.products .info {
font-size: 20px;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity:1;
color: white;
display: table; }
.products .content-wrap {
display: table-cell;
vertical-align: middle;
text-align: center;
padding:30px; }
.products .content-wrap-move {
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #262626;
padding:30px;}
.products .product-item:hover .content-wrap-move {
background-color: #4e4e4e;
color: white;
}
.products .name {
font-weight: 500;
font-size: 32px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translateY(-35px);
-moz-transform: translateY(-35px);
-ms-transform: translateY(-35px);
-o-transform: translateY(-35px);
transform: translateY(-35px); }
.products .copy {
font-size: 16px;
margin-top: 12px;
text-align: left;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
-o-transform: translateY(-20px);
transform: translateY(-20px); }
.products .button {
margin-top: 36px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px); }
.products .more {
font-size: 16px;
font-weight: 500;
background-color: #fff;
border:1px solid #c0c0c0;
height: 80px;
line-height: 80px;
display: block;
text-align: center;
color: #c0c0c0;
margin-top: 4px; }
.products .more:hover {
background-color: #c0c0c0;
color:#fff;
background-image: -webkit-linear-gradient(-405deg, #c0c0c0 0%, #c0c0c0 100%);
background-image: linear-gradient(135deg,#c0c0c0 0%, #c0c0c0 100%); }
.products .more .icon {
margin-left: 8px; }
.section-title-wrap {padding:60px 0px}
.section-title-wrap .section-title {
font-size: 1.6em;
line-height: 2.4em;
}
.section-title-wrap .section-desc {
font-weight: 300;
color: #626262;
font-size: 1em;
line-height: 1em;
}
.career {
overflow: hidden; }
.career .section-title-wrap .section-title-inner {
float: left;
}
.career .section-title-wrap .button {
float: right;
margin-top: 27px; }
.career .gallery {
margin: -2px -2px -6px; }
.career .float-item {
padding-bottom: 100%;
}
.career .more {
color: white;
position: relative;
padding-bottom: 50%; }
.career .more-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
height: auto;
bottom: 4px;
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
box-sizing: border-box;
padding: 100px 80px; }
.career .more-inner p + p {
margin-top: .8em; }
.career .more-link {
color: white;
display: inline-block;
font-size: 16px; }
.career .more-link .icon {
margin-left: 5px; }
.career .more-link:hover {
opacity: .6; }
.news .wrap {
background: white; }
.news .section-title-wrap {
text-align: center; }
.news .article-preview {
width: 1000px;
margin: 0 auto; }
.news .article-content-preview {
padding-bottom: 50px;
display: block; }
.news .article-content-preview:hover .button .button-text-wrap {
background: transparent; }
.news .article-content-preview:hover .button .button-text {
-webkit-background-clip: none;
-webkit-text-fill-color: initial;
color: white \9; }
.news .article-content {
font-weight: 300;
margin: 1.25em auto 0;
max-width: 760px;
color: #585248; }
.news .button-wrap {
text-align: center;
margin-top: 30px; }
.article-cover-wrap {
position: relative; }
.article-cover-wrap .article-cover {
height: 560px;
position: relative; }
.article-cover-wrap .article-title-wrap {
position: absolute;
width: 100%;
left: 0;
bottom: 0; }
.article-cover-wrap .article-title-wrap-inner {
max-width: 760px;
background: white;
padding: 32px 40px 0;
margin: auto; }
.article-cover-wrap .article-title {
font-size: 40px;
line-height: 1.2;
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background: none\9;
color: #ff9500 \9; }
.article-cover-wrap .time {
color: #9b9791;
float: right;
font-size: 16px;
margin-top: 1.4em;
font-weight: 300;
background: white;
-webkit-text-fill-color: initial; }
.news {overflow: hidden; padding: 0px 100px;}
.news .list-view{width:48%; padding-bottom: 20px; border-bottom: white 3px solid; margin-bottom: 40px;}
.news .list-view:hover{
border-bottom: #3258a0 3px solid;
}
.news .list-view img{border: 0px; margin-bottom: 10px;}
.news .list-view:nth-child(even){margin-right: 2%; float: left;}
.news .list-view:nth-child(odd){margin-left: 2%; float: right;}
.news .zhaopin-con{width: 100%;}
.news .zhaopin-item{width: 49.6%; overflow: hidden;}
.news .zhaopin-item img{border: 0px;}
.news .zhaopin-item:nth-child(1){float:left;}
.news .zhaopin-item:nth-child(2){float:right;}
.news .zhaopin-item-top{width: 100%; height: 49%; margin-bottom: 1%;}
.news .zhaopin-item-top>.left{width: 49.3%; float: left;}
.news .zhaopin-item-top>.right{width: 49.3%; float: right;}
.news .zhaopin-item-end{width: 100%; height: 50%; display: table; position: relative;}
.news .zhaopin-item-end .text{
position: absolute;
display: table;
z-index: 1;
height: 100%;
}
.news .zhaopin-item-end .text1{
display: table-cell;
vertical-align: middle;
padding: 30px;
}
.news .zhaopin-item-end img{position: relative;}
@media(max-width: 800px) {
.news {overflow: hidden; padding: 0px;}
.news .list-view{width:100%;}
.news .list-view:nth-child(odd){margin-right:0px; float:left;}
.news .list-view:nth-child(even){margin-left:0px; float:left;}
.news .list-view .info-wrap{padding: 0px 20px;}
.news .zhaopin-item{width: 100%;}
}
.zhaopin-end {
color: #7e7e7e;
font-size: 18px;
text-align: center;
display: block;
padding: 60px 100px;
}
.news .section-title-wrap .section-title-inner {
float: left;
padding-left: 3%;
}
.news .section-title-wrap .button {
float: right;
margin-top: 27px; }
.news .gallery {
margin: -2px -2px -6px; }
.news .float-item {
padding-bottom: 10%;
}
.news .more {
color: white;
position: relative;
padding-bottom: 50%; }
.news .more-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
height: auto;
bottom: 4px;
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
box-sizing: border-box;
padding: 100px 80px; }
.news .more-inner p + p {
margin-top: .8em; }
.news .more-link {
color: white;
display: inline-block;
font-size: 16px; }
.news .more-link .icon {
margin-left: 5px; }
.news .more-link:hover {
opacity: .6; }
.contact {
position: relative;
height: 16em;
display: block;
text-align: center; }
.contact .wrap {
height: 100%; }
.contact .gradient {
opacity: .85;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; }
.contact .icon-location {
position: absolute;
top: 50%;
left: 50%;
margin-top: -32px;
margin-left: -28px; }
.contact .title {
font-size: 32px;
margin-bottom: 8px; }
.contact .content-wrap {
color: white;
text-align: right;
margin-top: 115px;
display: inline-block;
width: 240px;
position: relative; }
.contact .content-wrap + .content-wrap {
text-align: left;
margin-left: 250px; }
.contact .content-wrap p {
font-weight: 300; }
.contact .content-wrap a {
color: white; }
.contact .content-wrap a:hover {
opacity: .6; }
.hero-video-full-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #585248;
background: rgba(88, 82, 72, 0.85);
z-index: 20;
text-align: center;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.hero-video-full-wrap.active {
visibility: visible;
opacity: 1; }
.hero-video-full-wrap:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; }
.hero-video-full-wrap .hero-video-full {
display: inline-block;
vertical-align: middle;
width: 100%;
height: 100%;
position: relative; }
.hero-video-full-wrap #hero-video-youku {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
.hero-video-full-wrap .dismiss {
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
z-index: 1; }
.hero-video-full-wrap .dismiss .icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px; }
.posts {
margin-top: 4px;
overflow: hidden; }
.posts .post-items-wrap {
margin: -2px; }
.posts .float-item-wrap {
width: 50%; }
.posts .post-item {
box-sizing: border-box;
display: block;
height: 347px;
background: rgba(0, 0, 0, 0.1);
position: relative;
background: #f8f8f8;
color: #585248;
overflow: hidden; }
.posts .post-item .bg {
opacity: .1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; }
.posts .post-item:hover {
color: white;
background: #585248; }
.posts .post-item:hover .bg {
opacity: .2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; }
.posts .post-item:hover .post-content {
background-color: white;
background-image: -webkit-linear-gradient(-90deg, white 0%, white 85%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(-180deg,white 0%, white 85%, rgba(255, 255, 255, 0) 100%);
background-color: transparent; }
.posts .post-content {
position: absolute;
top: 32px;
bottom: 60px;
left: 40px;
right: 40px;
overflow: hidden;
background-color: #585248;
background-image: -webkit-linear-gradient(-90deg, #585248 0%, #585248 85%, rgba(88, 82, 72, 0) 100%);
background-image: linear-gradient(-180deg,#585248 0%, #585248 85%, rgba(88, 82, 72, 0) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent; }
.posts .post-title {
font-size: 32px;
line-height: 1.25;
font-weight: normal; }
.posts .post-content-preview {
font-weight: 300;
margin-top: 20px; }
.posts .category {
position: absolute;
bottom: 32px;
left: 40px;
font-size: 16px;
opacity: .5; }
.posts .time {
position: absolute;
right: 40px;
bottom: 32px;
font-size: 16px;
opacity: .5; }
.posts .pagination {
text-align: center;
padding: 50px 0; }
.posts .pagination .button + .button {
margin-left: 80px; }
.page-post .article-title {
background: none;
-webkit-background-clip: initial;
-webkit-text-fill-color: initial; }
.article {
max-width: 760px;
margin: 0 auto;
padding: 0 40px 50px;
position: relative; }
.article p,
.article img {
margin-top: 1.2em; }
.article img {
max-width: 100%;
width: auto;
height: auto; }
.contact-main {
overflow: hidden;
margin-top: 2px; }
.contact-main .contact-main-inner {
margin-left: -2px;
margin-right: -2px; }
.contact-main .float-item {
background: #f8f8f8; }
.contact-main .float-item-inner {
padding-bottom: 100%; }
.contact-main .title {
font-size: 32px;
margin-bottom: 10px; }
.contact-main p + .title {
margin-top: 25px; }
.contact-main .content-wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding-left: 80px;
padding-top: 65px;
box-sizing: border-box; }
.contact-main .map iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0; }
.careers-gallery {
overflow: hidden;
margin-top: 4px; }
.careers-gallery .careers-gallery-inner {
margin: -2px; }
.careers-gallery .content-wrap {
background: #f8f8f8;
background: rgba(248, 248, 248, 0.85);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
box-sizing: border-box;
padding: 120px 80px 0;
font-size: 24px; }
.careers-gallery .content-wrap .title {
margin-bottom: 32px;
font-size: 32px;
font-weight: 500; }
.careers-gallery .content-wrap .more-info {
display: inline-block;
margin-top: 32px;
font-size: 18px; }
.careers-gallery .content-wrap .more-info .icon {
vertical-align: -1px;
margin-left: 5px; }
.careers-gallery .content-wrap .more-info:hover {
color: #ff9500;
opacity: .6; }
.careers-gallery .float-item-inner {
padding-bottom: 100%; }
.job-categories {
text-align: center;
padding-bottom: 60px; }
.job-categories .job-categories-inner {
margin: -10px auto;
max-width: 1020px; }
.job-categories .float-item-wrap {
margin: 10px 0; }
.job-categories .float-item {
margin: 0 10px; }
.job-categories .job-category-item {
width: 320px;
height: 200px;
padding-top: 120px;
background: #f8f8f8;
display: block; }
.job-categories .job-category-item .title {
font-weight: normal;
font-size: 20px;
margin-top: 2px;
color: #585248;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
.job-categories .job-category-item .hover-state {
display: none; }
.job-categories .job-category-item:hover {
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%); }
.job-categories .job-category-item:hover path {
fill: white; }
.job-categories .job-category-item:hover .title {
color: white; }
.job-categories .job-category-item:hover .hover-state {
display: block; }
.job-categories .job-category-item:hover .normal-state {
display: none; }
.job-categories .job-category-item.more {
width: auto;
height: 100px;
line-height: 100px;
padding: 0; }
.job-categories .job-category-item.more .title {
display: inline;
margin: 0; }
.job-categories .icon-career-engineering {
margin-top: 1px; }
.job-categories .icon-career-game {
margin-top: 2px;
margin-bottom: 1px; }
.job-categories .icon-career-other {
margin-top: 18px;
margin-bottom: 12px; }
.job-categories .icon-career-graduate-intern {
vertical-align: -6px;
margin-right: 18px;
vertical-align: middle\9; }
.job-items-wrap {
border-top: 1px solid rgba(88, 82, 72, 0.1); }
.job-items-wrap .job-title {
font-size: 32px;
font-weight: normal;
line-height: 1;
margin-bottom: 5px; }
.job-items-wrap .text {
color: #ff9500;
font-size: 18px; }
.job-items-wrap .apply-for-job {
position: absolute;
right: 0;
top: 50px; }
.job-items-wrap .job-item {
padding: 40px 0;
position: relative; }
.job-items-wrap .job-item + .job-item {
border-top: 1px solid #eeeeed;
border-top: 1px solid rgba(88, 82, 72, 0.1); }
.job-items-wrap .job-item.active .job-desc {
display: block; }
.job-items-wrap .job-desc {
font-size: 18px;
margin-top: 24px;
max-width: 700px;
display: none; }
.job-items-wrap .job-desc ol,
.job-items-wrap .job-desc ul {
padding-left: 24px; }
.job-items-wrap .job-desc ol li + li,
.job-items-wrap .job-desc ul li + li {
margin-top: 5px; }
.job-items-wrap .job-desc p + p, .job-items-wrap .job-desc p + ul, .job-items-wrap .job-desc p + ol,
.job-items-wrap .job-desc ul + p,
.job-items-wrap .job-desc ul + ul,
.job-items-wrap .job-desc ul + ol,
.job-items-wrap .job-desc ol + p,
.job-items-wrap .job-desc ol + ul,
.job-items-wrap .job-desc ol + ol {
margin-top: 20px; }
.job-apply-main {
border-top: 1px solid rgba(88, 82, 72, 0.1);
padding-top: 40px;
padding-bottom: 60px; }
.job-apply-main .job-apply-main-content {
max-width: 700px; }
.job-apply-main .title {
font-size: 32px;
font-weight: normal; }
.job-apply-main .copy {
font-size: 18px;
margin-top: 25px;
font-weight: lighter; }
.job-apply-form {
margin-top: 30px; }
.job-apply-form .input-field + .input-field {
margin-top: 22px; }
.job-apply-form .input-title {
font-size: 18px;
float: left;
line-height: 44px;
min-width: 130px; }
.job-apply-form .input-wrap {
font-size: 0.1px;
float: left; }
.job-apply-form .asterisk {
color: #ff9500; }
.job-apply-form input[type=text] {
border-radius: 1px;
width: 322px;
height: 22px;
font-size: 18px;
line-height: 22px;
padding: 10px 13px;
border: 1px solid #bcbab6; }
.job-apply-form input[type=text]:focus {
border-color: #ff781e; }
.job-apply-form input[type=text].short {
width: 137px; }
.job-apply-form input[type=text] + input {
margin-left: 20px; }
.job-apply-form input[type=text]::-webkit-input-placeholder {
color: rgba(88, 82, 72, 0.4); }
.job-apply-form input[type=text]::-moz-placeholder {
color: rgba(88, 82, 72, 0.4); }
.job-apply-form input[type=text]:-moz-placeholder {
color: rgba(88, 82, 72, 0.4); }
.job-apply-form input[type=text]:-ms-input-placeholder {
color: rgba(88, 82, 72, 0.4); }
.job-apply-form textarea {
width: 472px;
height: 200px;
font-size: 18px;
line-height: 22px;
padding: 10px 13px;
border: 1px solid #bcbab6;
resize: vertical; }
.job-apply-form textarea:focus {
border-color: #ff781e; }
.job-apply-form .embed-social-profile .icon {
vertical-align: -4px;
margin-right: 8px; }
.job-apply-form .embed-social-profile + .embed-social-profile {
margin-left: 20px; }
.job-apply-form .social-profile-input {
position: relative; }
.job-apply-form .social-profile-input input {
width: 332px;
padding-left: 153px; }
.job-apply-form .social-profile-input label {
line-height: 42px;
height: 42px;
width: 138px;
border-right: 1px solid #bcbab6;
display: inline-block;
background: #eeedec;
position: absolute;
top: 1px;
left: 1px;
text-align: center;
font-size: 16px; }
.job-apply-form .social-profile-input .icon {
vertical-align: -4px;
margin-right: 8px; }
.job-apply-form .social-profile-input + .social-profile-input {
margin-top: 20px; }
.job-apply-form .submit-form {
margin-top: 20px;
margin-left: 130px;
font-size: 16px;
width: 164px;
text-align: center;
padding: 0; }
.resume-upload-wrap {
position: relative; }
.resume-upload-wrap:hover .resume-upload-btn {
background: #e4e3e1; }
.resume-upload-wrap .resume-upload-input {
opacity: 0;
font-size: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer; }
.resume-upload-wrap.dragging .resume-upload-input {
position: fixed;
z-index: 100; }
.resume-upload-wrap.dragging .resume-upload-btn {
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
color: white; }
.resume-upload-wrap.dragging .resume-upload-btn strong {
border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.resume-upload-wrap .resume-upload-btn {
width: 350px;
background: #eeedec;
height: 44px;
line-height: 44px;
display: block;
font-size: 14px;
color: #585248;
font-weight: lighter;
text-align: center;
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal; }
.resume-upload-wrap .resume-upload-btn .filename {
display: none; }
.resume-upload-wrap .resume-upload-btn.active .text {
display: none; }
.resume-upload-wrap .resume-upload-btn.active .filename {
display: inline; }
.resume-upload-wrap .resume-upload-btn strong {
font-weight: 500;
font-style: italic;
border-bottom: 1px solid rgba(88, 82, 72, 0.2);
direction: inline-block;
padding-bottom: 2px; }
.resume-upload-wrap .mobile-text {
display: none; }
.page-products .hero {
overflow: visible;
z-index: 1; }
.page-products .hero .hero-copy {
max-width: 720px;
margin-left: auto;
margin-right: auto; }
.page-products .products {
margin-top: 4px; }
.page-products .view-products {
margin-top: 28px;
font-size: 18px;
font-weight: 400;
position: relative;
display: inline-block; }
.page-products .view-products .button {
min-width: 110px;
text-align: left;
padding-right: 44px; }
.page-products .view-products.active .view-products-button {
border-radius: 3px 3px 0 0; }
.page-products .view-products.active .icon {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg); }
.page-products .view-products.active .button-text {
color: #585248;
background: none;
-webkit-background-clip: inherit;
-webkit-text-fill-color: inherit; }
.page-products .view-products.active .view-products-nav {
visibility: visible;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0); }
.page-products .view-products .button-text {
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent; }
.page-products .view-products .icon {
position: absolute;
top: 21px;
right: 18px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.page-products .view-products .view-products-nav {
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: white;
text-align: left;
font-size: 16px;
border-radius: 0 0 3px 3px;
overflow: hidden;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
visibility: hidden;
opacity: 0;
margin-top: -2px;
padding-bottom: 6px; }
.page-products .view-products .view-products-nav.filtered .nav-link.all {
display: block; }
.page-products .view-products ul, .page-products .view-products ol, .page-products .view-products li {
list-style: none; }
.page-products .view-products .nav-link {
color: #585248;
padding: 0 18px;
display: block;
line-height: 40px; }
.page-products .view-products .nav-link:hover, .page-products .view-products .nav-link.active {
color: white;
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%); }
.page-products .view-products .nav-link:hover:before, .page-products .view-products .nav-link.active:before {
color: white; }
.page-products .view-products .nav-link:hover .num, .page-products .view-products .nav-link.active .num {
color: white; }
.page-products .view-products .nav-link.all {
display: none; }
.page-products .view-products .num {
color: #a6a6a6;
font-size: 14px;
position: relative;
margin-left: 6px;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease; }
.page-products .view-products .num:before {
position: absolute;
content: '(';
right: 100%;
top: -13px; }
.page-products .view-products .num:after {
position: absolute;
content: ')';
left: 100%;
top: -13px; }
.page-products .view-products ul ul .nav-link:before {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
content: '-';
color: #a6a6a6; }
.page-product-single .products .section-title-wrap {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
background: #f8f8f8; }
/* .page-product-single .global-nav .wrap {
background-color: rgba(0, 0, 0, 0.05); } */
.product-meta {
background: #f8f8f8;
font-size: 16px;
color: #a6a6a6;
padding: 0 100px; }
.product-meta .meta-item {
width: 25%;
float: left;
padding-top: 40px;
padding-bottom: 40px; }
.product-meta .meta-title {
display: block;
text-transform: uppercase;
margin-bottom: 4px; }
.product-meta .meta-content {
font-size: 0.9em;
color: #585248; }
.product-content-wrap {
padding:100px;
position: relative; }
.product-content-wrap .product-image {
position: absolute;
right: 0;
bottom: 0; }
.product-content-wrap .product-video-wrap {
float: right; }
.product-content-wrap .product-video-wrap .caption {
font-size: 14px;
text-align: right;
color: #9b9791;
margin-top: 6px; }
.product-content-wrap .product-video {
width: 500px;
height: 280px;
position: relative;
cursor: pointer; }
.product-content-wrap .product-video .full-video-link {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1; }
.product-content-wrap .product-video:hover .video-play-button {
opacity: .8; }
.product-content-wrap .product-video:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.3); }
.product-content-wrap .product-video .video-play-button {
position: absolute;
top: 50%;
left: 50%;
margin-top: -38px;
margin-left: -38px;
width: 76px;
height: 76px;
background: black;
background: rgba(0, 0, 0, 0.6);
border-radius: 38px; }
.product-content-wrap .product-video .video-play-button .icon {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -8px; }
.product-content {
/**max-width: 700px;**/
margin-top: -12px; }
.product-video-wrap + .product-image + .product-content {
min-height: 860px; }
.product-content .content-title {
font-size: 1.4em; }
.product-content p,
.product-content img,
.product-content ul,
.product-content ol {
margin-top: 1.2em; font-size: 1em;}
.product-content ol,
.product-content ul {
padding-left: 24px; }
.product-content ol li + li,
.product-content ul li + li {
margin-top: 5px; }
.product-content .download-wrap {
margin-top: 40px;
text-align: center;}
.product-content .download-btn {
display: inline-block; }
.product-content .download-btn + .download-btn {
margin-left: 20px; }
.product-content .download-btn img {
margin: 0;
vertical-align: top; }
.story-section {
position: relative;
height: 1000px; }
.story-section + .story-section {
margin-top: 10px; }
.story-section.light-bg .next-story-section svg path {
fill: #585248; }
.story-section.light-bg .content-wrap {
color: #585248; }
.story-section.light-bg .time {
color: rgba(88, 82, 72, 0.5); }
.story-section .next-story-section {
position: absolute;
width: 100%;
height: 106px;
left: 0;
bottom: 0;
z-index: 1; }
.story-section .next-story-section .icon {
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -16px; }
.story-section .content-wrap {
padding-top: 80px;
width: 600px;
position: relative;
margin: 0 auto;
color: white;
font-size: 18px; }
.story-section .time {
color: rgba(255, 255, 255, 0.5);
position: absolute;
line-height: 48px;
text-align: right;
right: 100%;
padding-right: 36px;
font-size: 14px;
font-style: italic; }
.story-section .time:after {
content: '';
position: absolute;
width: 8px;
height: 8px;
border-radius: 4px;
background: #ff9500;
top: 50%;
margin-top: -3px;
right: 18px; }
.story-section .year {
font-size: 80px;
font-style: italic;
font-weight: 300; }
.story-section .year + .story-item {
margin-top: 10px; }
.story-section .story-item {
position: relative; }
.story-section .story-item + .story-item {
margin-top: 40px; }
.story-section .story-item + .year {
margin-top: 20px; }
.story-section .story-item.with-app {
min-height: 100px; }
.story-section .story-item-title {
font-size: 30px;
color: #ff9500;
font-style: italic;
line-height: 1.4;
font-weight: normal; }
.story-section .story-app-icon {
position: absolute;
left: 100%;
margin-left: 50px;
top: 10px; }
.story-section .story-content {
margin-top: 10px; }
.story-section .story-content a {
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
display: inline-block; }
.story-section .story-content a:hover {
opacity: .6; }
.story-side-nav-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none; }
.story-side-nav-wrap .wrap {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
margin-left: -700px; }
.story-side-nav-wrap .story-side-nav {
position: absolute;
top: 50%;
margin-top: -91px;
right: 30px; }
.story-side-nav-wrap .side-nav-item {
width: 12px;
height: 12px;
border-radius: 6px;
display: block;
background: rgba(255, 255, 255, 0.6);
position: relative;
pointer-events: auto; }
.story-side-nav-wrap .side-nav-item:after {
content: '';
position: absolute;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
width: 16px;
height: 16px;
border: 2px solid white;
border-radius: 10px;
top: -4px;
left: -4px;
visibility: hidden;
opacity: 0; }
.story-side-nav-wrap .side-nav-item.current {
background: white; }
.story-side-nav-wrap .side-nav-item.current:after {
visibility: visible;
opacity: 1; }
.story-side-nav-wrap .side-nav-item + .side-nav-item {
margin-top: 22px; }
.error-title {
font-size: 32px;
text-align: center;
font-weight: 300;
margin-top: 30px;
margin-bottom: 50px; }
.hanoi-game {
text-align: center;
padding-bottom: 60px; }
.hanoi-game .inner {
display: inline-block; }
.hanoi-game .drophere {
height: 160px;
width: 140px;
float: left;
position: relative; }
.hanoi-game .drophere:before {
content: '';
position: absolute;
width: 10px;
top: 10px;
left: 50%;
bottom: 10px;
margin-left: -5px;
border-radius: 2px;
background: rgba(88, 82, 72, 0.1); }
.hanoi-game .box {
position: absolute;
width: 100%;
bottom: 4px; }
.hanoi-game #message {
margin-bottom: 60px;
display: block; }
.hanoi-game .dragme {
height: 14px;
margin: 3px auto;
border: 3px solid white;
background: #ff9500;
border-radius: 5px; }
.hanoi-game .dragme-1 {
width: 40px; }
.hanoi-game .dragme-2 {
width: 60px; }
.hanoi-game .dragme-3 {
width: 80px; }
.hanoi-game .dragme-4 {
width: 100px; }
.hanoi-game #steps {
display: block;
margin-top: 10px;
font-size: 16px;
color: #9b9791; }
.hero .swiper{min-height:680px;}
/* @media(min-width: 800px) {
.hero .swiper{height: 280px;}
} */
@media (max-width: 100%) {
.swiper-slide h3{
font-size: 1.2em;
}
.swiper-slide p{
font-size: 1em;
}
.company{
min-height: 600px;
}
.hero {
height: 56vw;
min-height: 0; }
.story-side-nav-wrap .wrap {
width: 100%;
left: auto;
margin-left: 0; }
.careers-gallery .content-wrap {
padding: 80px 60px;
font-size: 22px;
font-size: 1.9vw; }
.careers-gallery .content-wrap .title {
margin-bottom: 20px; }
.careers-gallery .content-wrap .more-info {
margin-top: 16px; }
.product-content-wrap .product-content {
max-width: 100%; }
.product-content-wrap .product-video-wrap {
width: 40%; }
.product-content-wrap .product-video {
width: 100%;
height: 240px; }
.product-content-wrap .product-image {
width: 40%; } }
@media (max-width: 1200px) {
.company{
min-height: 600px;
}
.swiper-slide h3{
font-size: 1.2em;
}
.swiper-slide p{
font-size: 1em;
}
.contact-main {
font-size: 18px; }
.contact-main .title {
font-size: 28px;
margin-bottom: 5px; }
.contact-main .content-wrap {
padding-left: 60px;
padding-top: 50px; }
.career .more-inner {
padding: 60px;
font-size: 18px; } }
@media (max-width: 1040px) {
.company{
min-height: 600px;
}
.swiper-slide h3{
font-size: 1.2em;
}
.swiper-slide p{
font-size: 1em;
}
.job-categories .job-categories-inner {
margin: -10px auto;
max-width: 680px; }
.product-video-wrap + .product-image + .product-content {
min-height: 0; }
.product-content .download-wrap {
margin-top: 20px; }
.product-content-wrap {
max-width: 700px;
margin: 0 auto; }
.product-content-wrap .product-video-wrap {
width: auto;
float: none;
margin-bottom: 30px; }
.product-content-wrap .product-content {
max-width: none; }
.product-content-wrap .product-video {
width: 100%;
height: 392px; }
.product-content-wrap .product-image {
position: relative;
margin: 50px auto -80px;
display: block;
max-width: 100%;
display: none; } }
@media (max-width: 1000px) {
.company{
min-height: 430px;
}
.swiper-slide h3{
font-size: 1.2em;
}
.swiper-slide p{
font-size: 1em;
}
.global-nav .wrap {
padding-left: 60px;
padding-right: 60px; }
.careers-gallery .content-wrap {
padding: 50px 40px;
font-size: 22px;
font-size: 1.8vw; }
.wrap.narrow {
padding-left: 60px;
padding-right: 60px; }
.section-title-wrap {
padding: 60px;
text-align: center; }
.intro {
padding: 60px; }
.career .section-title-wrap .section-title-inner {
float: none; }
.career .section-title-wrap .button {
float: none;
margin-top: 15px; }
.career .more-inner {
padding: 40px; }
.hero .hero-title {
font-size: 64px; }
.news .article-preview {
width: 100%; }
.product-meta {
padding-left: 60px;
padding-right: 60px; }
.product-content-wrap {
padding: 60px; }
.contact .content-wrap + .content-wrap {
margin-left: 160px; }
.contact-main {
font-size: 17px; }
.contact-main .title {
font-size: 24px;
margin-bottom: 2px; }
.contact-main p + .title {
margin-top: 18px; }
.contact-main .content-wrap {
padding-left: 50px;
padding-top: 32px; }
.contact-main .float-item-inner {
padding-bottom: 110%; }
.story-section {
height: auto; }
.story-section.hero {
height: 56vw; }
.story-section:last-child .content-wrap {
padding-bottom: 50px; }
.story-section .story-item.with-app {
margin-right: 125px; }
.story-section .story-app-icon {
margin-left: 20px; }
.story-section .content-wrap {
padding: 50px 0 120px; }
.page-post .article-cover-wrap .article-cover {
height: 56vw;
margin: 0; }
.page-post .article-cover-wrap .article-title-wrap {
position: relative;
left: auto;
width: auto;
bottom: auto; } }
@media (max-width: 840px) {
.article-cover-wrap .article-cover {
height: 56vw;
margin: 0; }
.swiper-slide h3{
font-size: 1em;
}
.swiper-slide p{
font-size: 0.5em;
}
.article-cover-wrap .article-title-wrap {
position: relative;
left: auto;
width: auto;
bottom: auto; } }
@media (max-width: 800px) {
.global-nav .wrap {
padding-left: 40px;
padding-right: 40px; }
.swiper-slide h3{
font-size: 1.2em;
}
.swiper-slide p{
font-size: 1em;
}
.global-nav .right-nav {
margin-right: -14px; }
.global-nav .nav-link {
padding: 0 14px; }
.wrap.narrow {
padding-left: 40px;
padding-right: 40px; }
.careers-gallery .half {
width: 100%; }
.careers-gallery .half .float-item-inner {
padding-bottom: 0; }
.careers-gallery .content-wrap {
padding: 30px 40px;
font-size: 20px;
position: relative;
height: auto; }
.careers-gallery .content-wrap .title {
margin-bottom: 12px; }
.careers-gallery .content-wrap .more-info {
margin-top: 8px; }
.page-product-single .hero {
height: 56vw;
padding: 0; }
.page-product-single .hero:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
background-image: -webkit-linear-gradient(-450deg, rgba(0, 0, 0, 0.4) 0%, transparent 50%);
background-image: linear-gradient(180deg,rgba(0, 0, 0, 0.4) 0%, transparent 50%);
background-color: transparent;
z-index: 1; }
.page-product-single .global-nav .wrap {
background: none; }
.hero {
display: block;
padding: 125px 40px 60px;
width: auto;
height: auto; }
.hero.story-section {
height: auto; }
.hero .hero-title {
font-size: 48px;
margin-top: 0; }
.hero .hero-copy {
font-size: 22px;
margin-top: 0; }
.hero .hero-title-wrap {
display: block;
top: auto;
left: auto;
width: auto;
height: auto;
position: relative; }
.hero .hero-title-wrap:before {
display: none; }
.page-post .article-cover-wrap .article-title-wrap-inner {
padding-left: 0;
padding-right: 0; }
.page-post .article {
padding-left: 0;
padding-right: 0; }
.posts .float-item-wrap {
width: 100%; }
.posts .post-item {
height: auto;
padding: 32px 40px 70px; }
.posts .post-content {
position: relative;
top: auto;
left: auto;
right: auto;
bottom: auto; }
.products .float-item-wrap {
width: 50%; }
.product-meta {
padding-left: 40px;
padding-right: 40px; }
.product-content-wrap {
padding: 40px; }
.contact-main .float-item-wrap.half {
width: 100%; }
.contact-main .title {
float: left; }
.contact-main p {
margin-left: 120px;
margin-top: 8px; }
.contact-main p + .title {
margin-top: 12px; }
.contact-main p + .title + p {
margin-top: 20px; }
.contact-main .float-item-inner {
padding-bottom: 0; }
.contact-main .content-wrap {
position: relative;
width: auto;
height: auto;
padding: 35px 40px; }
.contact-main .map .float-item-inner {
padding-bottom: 56%; }
.section-title-wrap,
.intro {
padding: 40px; }
.career .float-item-wrap.half {
width: 100%; }
.career .float-item-wrap.half .float-item {
padding-bottom: 50%; }
.career .float-item-wrap.half .float-item.more {
height: auto;
padding-bottom: 0; }
.career .float-item-wrap.quarter {
width: 50%; }
.career .more-inner {
position: relative;
padding: 36px 40px; }
.news .article-content-preview {
margin-top: 0; }
.news .article-content {
padding-left: 40px;
padding-right: 40px; }
.article-cover {
margin-left: -40px;
margin-right: -40px;
height: 56vw; }
.article {
padding-bottom: 40px; }
.article-cover + .article {
margin-top: 0;
padding-left: 0;
padding-right: 0;
background: none; }
.page-products .view-products {
margin-top: 15px; }
.story-side-nav-wrap {
display: none; }
.story-section + .story-section {
margin-top: 4px; }
.story-section .year {
font-size: 48px; }
.story-section .story-item + .story-item {
margin-top: 25px; }
.story-section .content-wrap {
padding: 30px 40px 40px 80px;
width: auto; }
.story-section .next-story-section {
display: none; } }
@media (max-width: 680px) {
body,
textarea,
input,
select {
font-size: 16px;
line-height: 1.5; }
.swiper-slide h3{
font-size: 1em;
}
.swiper-slide p{
font-size: 0.5em;
}
.company{
min-height: 200px;
}
.hero {
padding: 115px 20px 50px; }
.hero .hero-title {
font-size: 40px;
line-height: 1.2; }
.hero .hero-copy {
font-size: 20px; }
.hero .full-video-link {
position: relative;
right: auto;
bottom: auto;
margin: 15px auto 0;
display: block;
text-align: center;
margin-bottom: -8px; }
.main.without-hero {
padding-top: 95px; }
.error-title {
font-size: 28px; }
.hanoi-game {
display: none; }
.page-products .view-products .button {
font-size: 18px;
height: 44px;
line-height: 44px; }
.page-products .view-products .button .icon {
vertical-align: 2px; }
.global-nav .wrap {
padding-left: 20px;
padding-right: 20px; }
.global-nav .logo-link .icon-logo {
display: none; }
.global-nav .right-nav {
display: none; }
.global-nav .mobile-nav-button {
display: block; }
.wrap.narrow {
padding-left: 20px;
padding-right: 20px; }
.careers-gallery .quarter {
width: 50%; }
.careers-gallery .content-wrap {
padding: 18px 20px;
font-size: 18px;
position: relative;
height: auto; }
.careers-gallery .content-wrap .title {
margin-bottom: 8px;
font-size: 28px; }
.careers-gallery .content-wrap .more-info {
margin-top: 8px;
font-size: 18px;
line-height: 1.2; }
.page-product-single .products .section-title-wrap {
padding: 24px 20px 30px; }
.product-meta {
padding: 10px 20px; }
.product-meta .meta-title {
display: inline-block;
margin-right: 20px; }
.product-meta .meta-item {
display: block;
width: 100%;
float: none;
padding: 2px 0; }
.product-content-wrap {
padding: 20px; }
.product-content-wrap .product-video-wrap {
margin-bottom: 20px; }
.product-content-wrap .product-video {
height: 50vw; }
.product-content .content-title {
font-size: 28px; }
.posts .post-title {
font-size: 28px; }
.posts .float-item-wrap {
width: 100%; }
.posts .post-item {
height: auto;
padding: 18px 20px 48px; }
.posts .post-content-preview {
margin-top: 8px; }
.posts .category {
left: 20px;
bottom: 18px; }
.posts .time {
right: 20px;
bottom: 18px; }
.posts .pagination {
padding: 30px 0; }
.posts .pagination .button + .button {
margin-left: 20px; }
.contact-main {
text-align: center; }
.contact-main .title {
float: none; }
.contact-main p {
margin-left: 0;
margin-top: 5px; }
.contact-main p + .title + p {
margin-top: 5px; }
.contact-main .content-wrap {
padding: 18px 20px; }
.products .more {
height: 60px;
line-height: 60px; }
.products .info-wrap {
display: none; }
.job-categories {
padding-bottom: 4px; }
.job-categories .job-categories-inner {
margin: -2px;
overflow: hidden; }
.job-categories .float-item-wrap {
margin: 2px 0;
width: 50%; }
.job-categories .float-item-wrap.full {
width: 100%; }
.job-categories .float-item {
margin: 0 2px; }
.job-categories .job-category-item {
width: auto;
height: auto;
padding-bottom: 33.333333%;
padding-top: 33.333333%; }
.job-categories .job-category-item .title {
font-size: 16px;
line-height: 1.2;
padding: 0 10px;
height: 18px; }
.job-items-wrap .job-title {
font-size: 28px; }
.job-items-wrap .job-item {
padding: 16px 0 20px; }
.job-items-wrap .view-desc {
display: block; }
.job-items-wrap .apply-for-job {
position: relative;
top: auto;
right: auto;
margin-top: 10px;
height: 44px;
line-height: 44px;
padding: 0 24px; }
.job-items-wrap .job-desc {
margin-top: 15px;
font-size: 16px; }
.intro {
font-size: 18px;
padding: 30px 20px 35px; }
.intro .copy strong {
font-size: 18px; }
.intro .button {
margin-top: 15px; }
.section-title-wrap {
padding: 24px 20px 30px; }
.section-title-wrap .section-title {
font-size: 1.2em;
margin-bottom: 0.2em;
text-align: center;
}
.career .more-inner {
padding: 18px 20px; }
.article-cover-wrap .article-title-wrap-inner {
padding: 18px 20px 0; }
.article-cover-wrap .article-title {
font-size: 28px; }
.article-cover-wrap .time {
font-size: 14px; }
.news .article-content-preview {
padding-bottom: 25px; }
.news .article-content {
padding-left: 20px;
padding-right: 20px;
margin-top: .75em; }
.news .button-wrap {
margin-top: 15px; }
.contact {
text-align: center;
height: auto;
padding: 32px 20px; }
.contact .icon-location {
position: relative;
top: auto;
left: auto;
margin: 0; }
.contact .title {
font-size: 28px;
line-height: 1; }
.contact .content-wrap {
text-align: center;
width: auto;
display: block;
margin-top: 20px; }
.contact .content-wrap + .content-wrap {
text-align: center;
margin-top: 20px;
margin-left: 0; }
.article-cover {
margin-left: -20px;
margin-right: -20px; }
.article {
padding: 0 20px 30px; }
.article-cover + .article {
margin-top: 0;
padding-left: 0;
padding-right: 0;
background: none; }
.article .time {
font-size: 14px; }
.article .article-title {
font-size: 28px; }
.story-section .year {
font-size: 40px; }
.story-section .story-item + .story-item {
margin-top: 12px; }
.story-section .story-item.with-app {
margin-right: 0; }
.story-section .story-item.with-app .story-content {
min-height: 120px;
margin-top: 12px; }
.story-section .time {
position: relative;
right: auto;
padding-right: 0;
display: inline-block;
line-height: inherit;
margin-bottom: 4px; }
.story-section .time:after {
display: none; }
.story-section .content-wrap {
padding: 20px 20px 20px;
width: auto;
font-size: 16px; }
.story-section .story-item-title {
font-size: 28px;
line-height: 1; }
.story-section .story-content {
margin-top: 6px; }
.story-section .story-app-icon {
left: auto;
position: relative;
float: right;
margin-left: 15px;
top: 3px; }
.job-apply-main {
padding-top: 20px;
padding-bottom: 20px; }
.job-apply-main .title {
font-size: 28px; }
.job-apply-main .copy {
margin-top: 12px;
font-size: 16px; }
.job-apply-form textarea {
width: 452px; }
.job-apply-form .submit-form {
margin-left: 0;
margin-top: 10px; }
footer .wrap {
padding: 30px 0 50px; }
footer .wrap .text {
font-size: 14px;
margin-top: 20px; }
footer .wrap .logo-link {
margin-top: 25px; } }
@media (max-width: 500px) {
.company{
min-height: 200px;
}
.swiper-slide h3{
font-size: 1em;
}
.swiper-slide p{
font-size: 0.5em;
}
.section-title-wrap .section-title {
font-size: 1.6em;
line-height: 1.2em;
}
.resume-upload-wrap .resume-upload-btn {
width: 100%; }
.resume-upload-wrap .mobile-text {
display: inline; }
.resume-upload-wrap .desktop-text {
display: none; }
.job-apply-form {
margin-top: 12px; }
.job-apply-form .input-title {
font-size: 16px; }
.job-apply-form .input-field + .input-field {
margin-top: 10px; }
.job-apply-form .input-wrap {
width: 100%; }
.job-apply-form input[type=text] {
width: 100%;
height: 42px;
box-sizing: border-box;
font-size: 16px; }
.job-apply-form input[type=text].short {
width: 47.5%; }
.job-apply-form input[type=text].short + .short {
float: right;
margin-left: 0; }
.job-apply-form .embed-social-profile {
width: 47.5%;
padding: 0;
text-align: center; }
.job-apply-form .embed-social-profile + .embed-social-profile {
float: right;
margin-left: 0; }
.job-apply-form textarea {
width: 100%;
box-sizing: border-box; } }
.icon {
display: inline-block;
background-size: contain; }
.icon img {
display: block; }
.company{
margin-top: 6px;
}
.company {
overflow: hidden; }
.company .section-title-inner {
width: 50%;
margin-left: 5%;
}
.company .button {
float: right;
margin-top: 27px; }
.company .gallery {
margin: -2px -2px -6px; }
.company .float-item {
padding-bottom: 100%; }
.company .more {
color: white;
position: relative;
padding-bottom: 50%; }
.company .more-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
height: auto;
bottom: 4px;
background-color: #ff9500;
background-image: -webkit-linear-gradient(-405deg, #ff9500 0%, #ff5e3a 100%);
background-image: linear-gradient(135deg,#ff9500 0%, #ff5e3a 100%);
box-sizing: border-box;
padding: 100px 80px; }
.company .more-inner p + p {
margin-top: .8em; }
.company .more-link {
color: white;
display: inline-block;
font-size: 16px; }
.company .more-link .icon {
margin-left: 5px; }
.company .more-link:hover {
opacity: .6; }
.companyinner{
position: absolute;
}
.textLeft{
text-align: left;
}
.paddingTop0{
padding-top: 0;
}
.paddingTop10{
padding-top: 3em;
}
.paddingBottom0{
padding-bottom: 0;
}
.newsTitle{
font-size: 1.1em;
color: #333333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.newsTxt{
font-size: 0.9em;
color: #828282;
}
.setMoreNewsButton{
display: block;
width: 2.5em;
margin-top: 1em;
}
.setMoreNewsBorder{
border-bottom: 4px solid #fff;
}
.setMoreNewsBorder:hover{
border-bottom: 4px solid #c0c0c0;
border-image: -webkit-linear-gradient(#c0c0c0, #c0c0c0) 20 20;
border-image: -moz-linear-gradient(#c0c0c0, #c0c0c0) 20 20;
border-image: -o-linear-gradient(#c0c0c0,#c0c0c0) 20 20;
border-image: linear-gradient(#c0c0c0, #c0c0c0) 20 20;
}
.setMoreNewsBo{
border-bottom: 4px solid #c0c0c0;
border-image: -webkit-linear-gradient(#c0c0c0, #c0c0c0) 20 20;
border-image: -moz-linear-gradient(#c0c0c0, #c0c0c0) 20 20;
border-image: -o-linear-gradient(#c0c0c0,#c0c0c0) 20 20;
border-image: linear-gradient(#c0c0c0, #c0c0c0) 20 20;
}
.setMarginB{
margin-bottom: 1em;
}
.setSwiper{
position: absolute;
left: 0;
z-index: 1000;
top: 0;
width: 100%;
height: 100%;
}
.swiper-slide{
color: #fff;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.secColorB{
color: #7e7e7e;
}
.zIndex111{
z-index:111
}
.main .contact a.secColorB{
color: #7e7e7e;
}
#container{
width: 80%;
height:18em;
margin-left:10%;
margin-bottom:2em
}
.contact-us{
width: 80%;
height: 100%;
overflow: hidden;
display: table;
padding: 0px 10%;
top: 0;
position: absolute;
z-index: 2;
}
.contact-us-view{
display: table-cell;
vertical-align: middle;
}
.contact-us-view-con{display: flex;}
.contact-us-view-con .contact-us-left{
width: 90%;
border-right: 2px solid #7e7e7e;
margin-left: 10%;
}
.contact-us-view-con .contact-us-right{
width: 90%;
margin-left: 10%;
}
.contact-us-view-con .top-title{
font-size:1.5em; font-weight: bold;
}
.contact-us-view-con .tel{
font-size:2em; font-weight: bold;
}
.contact-us-view-con .address{
font-size:1em; font-weight: bold;
}
.mapbackgroundimg{
position: relative;
width: 100%;
height: 100%;
display: table;
}
@media (max-width: 800px) {
.contact-us-view-con{display: table;}
.contact-us-view-con .contact-us-left{
width: 100%;
border-right: 0px solid #7e7e7e;
margin-left: 0;
}
.contact-us-view-con .contact-us-right{
width: 100%;
margin-left: 0;
}
.contact-us-view-con .top-title{font-size: 1em;}
.contact-us-view-con .tel{
font-size:0.3em;
}
.contact-us-view-con .address{
font-size:0.3em;
}
}
.opacity07{
background-color: #000000;
opacity: 0.6;
height: 98%;
width: 100%;
top: 0;
position: absolute;
z-index: 1;
}
.mapbackgroundimg p{
color:#fff;
}
.mapbackgroundimg .contact-us .contact-us-left{
border-color:#fff
}
.joinus .content-wrap{
margin-top: 6em;
margin-bottom: 6em;
text-align: center;
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-bottom: 0px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
margin-bottom: 3px;
}
.job i {
border: solid #c0c0c0;
border-width: 0 1px 1px 0;
display: inline-block;
padding: 4px;
margin-left: 10px;
}
.joinUs-content-wrap p.packup{
text-align: right;
color: #c0c0c0;
cursor: pointer;
}
.sendHr{
display: none;
}
.joinUs-content .content-title{
font-size: 16px;
}
.joinUs-content p{
font-size: 0.9em;
}
.showAll{
color: #c0c0c0;
cursor: pointer;
}
.joinUs-meta {
background: #f8f8f8;
font-size: 16px;
color: #a6a6a6;
margin: 0 2em;
border-bottom:1px solid #7e7e7e
}
.joinUs-content-wrap{
background-color: #fff;
display: none;
}
.borderWhite{
border-bottom-color: #fff;
}
.joinUs-main{
margin-bottom: 1em;
}
.baidu-map{width:80%; height:20em; border:5px solid #CCD5DB; margin:0px auto 60px auto;}
.lxwm-con{
width: 80%; margin:40px auto;
display: table;
}
.lxwm-con-view{
display: table-cell;
vertical-align: middle;
}
.lxwm-con-view-con{display: flex;}
.lxwm-left{
width: 100%;
}
.lxwm-right{
width: 100%;
float: right;
}
.lxwm-con-view-con .top-title{
font-size:1.5em; font-weight: bold;
}
.lxwm-con-view-con .tel{
font-size:1em; font-weight: bold;
}
.lxwm-con-view-con .address{
font-size:1em; font-weight: bold;
}
@media (max-width: 800px) {
.lxwm-con-view{display: table;}
.lxwm-con-view-con{display: block;}
.lxwm-con-view-con .top-title{font-size: 1em;}
.lxwm-con-view-con .tel{
font-size:0.3em;
}
.lxwm-con-view-con .address{
font-size:0.3em;
}
}
.join{padding: 20px 100px;}
.join-title{padding:1em;}
.join-title .section-title {
font-size: 1.6em;
line-height: 2.4em;
}
.join-title .section-desc {
font-weight: 300;
color: #626262;
font-size: 1em;
line-height: 1.5em;
}
.join-main{
border: #dfdfdf 2px solid;
background-color: #eef0ef;
display: table;
width: 100%;
}
.join-main-top{background-color: #dfdfdf; display: flex; font-size: 1em; font-weight: bold; line-height:3em;}
.join-main-top .item{width: 100%; text-align: center; cursor: pointer; border-bottom: #dfdfdf 2px solid;}
.join-main-top .itemhover{
border-bottom: #0e8ee7 2px solid;
color: #0e8ee7;
}
.join-main-con{line-height: 1.5em; font-size: 0.8em; padding: 20px; display: none;}
.join-main-con-block{display: block;}
.join-main-con .listview{width: 100%;}
.listview .listview-top{cursor: pointer; position:relative; font-weight: bold; padding: 20px 10px; border-bottom: #dfdfdf 1px solid;}
.listview-top:hover{color: #0e8ee7;}
.listview-top .listitem{display: flex;}
.listview-top .listitem .titleitme{margin-right: 10%;}
.listview-top .icon{position: absolute; right:10px; bottom:30%;}
.listview-top .icon i{border:10px solid #eef0ef; position: relative; top:10px; border-top-color:#d4d2d3;}
.listview-top .icon a{background-color: #0b98f4; display: none; padding: 8px 12px; border: #1082db 1px solid; color: white; border-radius:4px;}
.listview-top .icon a:hover{background-color: #1082db; border: #1078c9 1px solid;}
.join-main-con .contentview{
padding: 20px 10px;
display: none;
border-bottom: #dfdfdf 1px solid;
}
@media (max-width: 800px) {
.join{padding:0px;}
.join-main{
border: #dfdfdf 0px solid;
}
}