@charset "utf-8";
/*
@font-face {
	font-family: 'SourceHanSansCN';
	src: url('../fonts/SourceHanSansCN-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'SourceHanSansCN';
	src: url('../fonts/SourceHanSansCN-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'SourceHanSansCN';
	src: url('../fonts/SourceHanSansCN-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'SourceHanSansCN';
	src: url('../fonts/SourceHanSansCN-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'SegoeUI';
	src: url('../fonts/Segoe-UI-Black.ttf') format('truetype');
	font-weight: 900;
	font-display: swap;
}

@font-face {
	font-family: 'SegoeUI';
	src: url('../fonts/Segoe-UI-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'SegoeUI';
	src: url('../fonts/Segoe-UI-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'SegoeUI';
	src: url('../fonts/Segoe-UI-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}
*/
/*初始化样式*/
* {
	-webkit-tap-highlight-color: transparent;
	box-sizing: border-box;
}

/*html5设置*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
	display: block;
}

html,
body,
div,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
ol,
ul,
li {
	margin: 0;
	padding: 0;
}

body {
	background-color: #F5F5F5;
	color: #444;
	font: 400 16px/1.875em 'SourceHanSansCN', 'serif';
	overflow-x: hidden;
	width: 100%;
	word-wrap: break-word;
}

a {
	text-decoration: none;
	outline: none;
	color: #444;
}

a:focus {
	outline: none;
	-moz-outline: none;
}

a:hover {
	color: #399CC3;
}

a img {
	border: none;
}

li {
	list-style: none;
}

select,
input,
textarea,
button {
	border-radius: 0;
	-webkit-border-radius: 0;
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	outline: none;
	font-family: Arial, 'Microsoft Yahei';
}

input:focus {
	outline: none;
}

textarea {
	resize: none;
}

input[type='text']::-moz-placeholder {
	opacity: 1;
}

input[type='text']:-moz-placeholder {
	opacity: 1;
}

input[type='text']::-webkit-input-placeholder {
	opacity: 1;
}

input[type='text']:-ms-input-placeholder {
	opacity: 1;
}

table {
	background-color: transparent;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	border-top: solid 1px #e4e4e4;
	border-left: solid 1px #e4e4e4;
	box-sizing: border-box;
}

table th {
	background-color: #f9f9f9;
	text-align: center;
	box-sizing: border-box;
}

table td,
table th {
	padding: 1%;
	border: 1px solid #e4e4e4;
	box-sizing: border-box;
}

/*全局样式*/
.inner {
	width: 1146px;
	max-width: 93.75%;
	margin: 0 auto;
}

.clear {
	clear: both;
	height: 0px;
	overflow: hidden;
}

.figure {
	overflow: hidden;
	position: relative;
}

.figure a {
	display: block;
	overflow: hidden;
}

.figure img {
	display: block;
	width: 100%;
	height: auto;
}

.figure .img {
	background: no-repeat center center;
	background-size: cover;
	display: block;
	transition: all .3s;
}

.rows {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

.font20 {
	font-size: 20px;
}

.font30 {
	font-size: 30px;
}



.entry {
	font-family: SegoeUI, SourceHanSansCN
}

.entry img {
	max-width: 100%;
	height: auto !important
}

.entry ol,
.entry ul {
	margin-left: 2em
}

.entry ul li {
	list-style: outside disc none
}

.entry ol li {
	list-style: outside decimal none
}

.entry h1 {
	font-size: 1.5em
}

.entry h2 {
	font-size: 1.25em
}

.entry h3 {
	font-size: 1.125em
}

.entry h4 {
	font-size: 1em
}

.entry h5 {
	font-size: .875em
}

.entry h6 {
	font-size: .75em
}

.entry blockquote {
	margin: 0 2em;
	font-style: italic;
	opacity: .95;
	padding: 1em;
	border: 1px solid #e8e8e8;
	background-color: #f9f9f9
}

.entry hr {
	border: none;
	clear: both;
	border-bottom: 1px solid #e6e6e6
}

#banner .pic {
	background: no-repeat center center;
	background-size: cover;
	padding-bottom: 20%
}

#header .inner {
	display: table;
	table-layout: fixed
}

#logo {
	width: 8.81326353%;
	display: table-cell;
	vertical-align: middle
}

#logo h1 {
	padding-bottom: 49.5049505%;
	position: relative
}

#logo a {
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-indent: -99999em;
	background: no-repeat left center;
	background-size: contain
}

#social {
	width: 11.34380454%;
	display: table-cell;
	vertical-align: middle
}

#social ul {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between
}

#social li {
	width: 32.30769231%
}

#social a {
	display: block;
	overflow: hidden;
	padding-bottom: 80.95238095%;
	background: no-repeat center center;
	background-size: contain;
	transition: all .3s;
}

#social a:hover {
	transform: translateY(-15%);
}

#social .weibo a {
	background-image: url(../images/social_weibo.svg)
}

#social .weibo a:hover {
	background-image: url(../images/social_weibo_on.svg)
}

#social .Twitter a {
	background-image: url(../images/social_Twitter.png)
}

#social .Twitter a:hover {
	background-image: url(../images/social_Twitter_on.png)
}

#social .shop a {
	background-image: url(../images/social_shop.png)
}

#social .shop a:hover {
	background-image: url(../images/social_shop_on.png)
}
#social .mail a {
	background-image: url(../images/social_mail.svg)
}

#social .mail a:hover {
	background-image: url(../images/social_mail_on.svg)
}

#social .menu {
	display: none
}

/*language*/
#language {
	display: table-cell;
	vertical-align: middle;
	width: 10em;
	line-height: 1.5em;
	font-weight: 500;
	text-align: center;
	padding: 0 2.2em;
}

#language a {
	display: block;
	float: left;
	width: 50%;
	background-color: #BDBDBD;
	color: #fff;
}

#language .current {
	background-color: #FFDE5B;
	color: #399CC3;
}

/*navi*/
#navi .ul {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	padding: 0 3.49344978%
}

#navi .ul>li {
	width: 25%;
	padding: 1.3em 0;
	position: relative
}

#navi .ul>li:after {
	height: 1.25em;
	width: 1px;
	background-color: #399CC3;
	content: '';
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: .25
}

#navi li {
	text-align: center;
	font-weight: 500;
	line-height: 1.5em
}

#navi a {
	display: block;
	position: relative;
	z-index: 1
}

#navi span {
	display: inline-block;
	position: relative
}

#navi span i {
	font-style: normal;
	position: absolute;
	left: 100%;
	top: -.8em;
	font-weight: 300;
	font-size: .5em;
	background-color: #FFDE5B;
	width: 3.1em;
	height: 1.8em;
	line-height: 1.7em;
	border-radius: .9em;
	color: #399CC3
}

#navi span:before {
	background-color: #FFDE5B;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1em;
	content: '';
	display: block;
	width: 100%;
	z-index: -1;
	opacity: 0;
	transition: all .3s
}

#navi span a {
	color: #399CC3;
	padding: 0 .5em;
	transition: transform .3s
}

#navi span:hover:before {
	opacity: 1
}

#navi span:hover a {
	transform: translateY(-0.3em);
	font-weight: 700;
}

#footer {
	background-color: #8BECF2;
	color: #fff;
	line-height: 1.5em;
	padding: 2.86458333% 0
}

#footer .inner {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-direction: row-reverse
}

#footer a {
	color: #fff
}

#footer a:hover {
	opacity: .75
}

#pagelist ul {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	font-weight: 700
}

#pagelist li {
	margin-left: 3.25em
}

#wrapper {
	overflow: hidden;
	padding: 5.20833333% 0 6.25%
}

.columnname {
	text-align: center;
	font-size: 54px;
	font-weight: 700;
	line-height: 1.125em;
	color: #399CC3;
	margin-bottom: 1.66666667em
}

.columnname span {
	display: inline-block;
	padding: 0 1.11111111em;
	position: relative
}

.columnname span:after,
.columnname span:before {
	width: .05555556em;
	height: .9em;
	background-color: #399CC3;
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	border-radius: .02777778em;
	margin-top: -.37037037em
}

.columnname span:before {
	transform: rotate(-30deg);
	left: 0
}

.columnname span:after {
	transform: rotate(30deg);
	right: 0
}

#category {
	line-height: 1.83333333em;
	font-weight: 700;
	letter-spacing: .33333333em;
	margin-bottom: .83333333em
}

#category ul {
	display: table;
	width: 100%;
	background-color: #8BECF2
}

#category li {
	text-align: center;
	position: relative;
	display: table-cell;
	vertical-align: middle
}

#category a {
	display: block;
	color: #399CC3;
	padding: 0 1.33333333em
}

#category .current {
	background-color: #FFDE5B
}

#category .current:after {
	border-top: .6em solid #FFDE5B;
	border-left: .36666667em solid transparent;
	border-right: .36666667em solid transparent;
	content: '';
	display: block;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-left: -.16666667em
}

.newsitem {
	border-bottom: 1px solid #E5E5E5;
	padding: 3.05410122% 0
}

.newsitem:last-child {
	border-bottom: none
}

.newsitem a {
	display: block;
	padding: .83333333em 1.66666667em .83333333em 1.83333333em;
	position: relative;
	transition: all .3s
}

.newsitem a:before {
	width: 4.46666667em;
	height: 5.56666667em;
	background: url(../images/squares.png) no-repeat center center;
	background-size: contain;
	content: '';
	display: block;
	position: absolute;
	top: -1.16666667em;
	right: .83333333em;
	opacity: 0;
	transition: all .3s
}

.newsitem a:hover {
	background-color: #E6F4F5
}

.newsitem a:hover:before {
	opacity: 1
}

.newsitem .info {
	overflow: hidden;
	position: relative;
	z-index: 2
}

.newsitem .figure {
	width: 5.9em;
	float: left;
	overflow: visible
}

.newsitem .img {
	padding-bottom: 100%
}

.newsitem .new {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateX(50%);
	font-size: .66666667em;
	text-align: center;
	width: 3.5em;
	height: 3.5em;
	line-height: 3.2em;
	color: #399CC3;
	z-index: 2
}

.newsitem .new:before {
	width: 65.5%;
	height: 65.5%;
	background-color: #FFDE5B;
	content: '';
	display: block;
	position: absolute;
	left: .6em;
	top: .5em;
	transform: rotate(45deg);
	z-index: -1
}

.newsitem .text {
	margin-left: 5.9em;
	padding-left: 1.83333333em
}

.newsitem .title {
	font-size: 1em;
	line-height: 1.25em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #399CC3;
	margin-bottom: .56666667em
}

.newsitem .excerpt {
	font-size: .66666667em;
	line-height: 1.5em;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2.5em
}

.newsitem .date {
	overflow: hidden
}

.newsitem time {
	display: block;
	float: right;
	color: #fff;
	background-color: #8BECF2;
	font-size: .66666667em;
	width: 9.75em;
	line-height: 1.55em;
	text-align: center
}

#pagenavi {
	text-align: center;
	color: #399CC3;
	font-family: SegoeUI;
	padding: 2em 0
}

#pagenavi a {
	display: inline-block;
	vertical-align: middle;
	min-width: 2.6em;
	height: 1.55em;
	line-height: 1.4em;
	margin: 0 .375em;
	border: 1px solid #399CC3;
	color: #399CC3;
	padding: 0 .25em
}

#pagenavi a:hover {
	border-color: #8BECF2;
	border-color: #8BECF2;
	color: #8BECF2;
}

#pagenavi a.a_cur {
	background-color: #FFDE5B;
	border-color: #FFDE5B
}

#pagenavi a.a_cur:hover {
	opacity: 1
}

#pagenavi .a_next,
#pagenavi .a_prev {
	background: no-repeat center center;
	background-size: .75em auto
}

#pagenavi .a_prev {
	margin-right: 2.5em;
	background-image: url(../images/arrow_left.svg)
}

#pagenavi .a_prev:hover {
	background-image: url(../images/arrow_left_on.svg);
}

#pagenavi .a_next {
	margin-left: 2.5em;
	background-image: url(../images/arrow_right.svg)
}

#pagenavi .a_next:hover {
	background-image: url(../images/arrow_right_on.svg);
}

#backtop {
	position: fixed;
	bottom: 20%;
	width: 2.26666667em;
	right: 6%;
	z-index: 8;
	display: none;
}

#backtop a {
	display: block;
	overflow: hidden;
	padding-bottom: 150%;
	position: relative
}

#backtop svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#backtop path {
	fill: #8febf0;
	transition: all .2s;
}

#backtop a:after {
	width: 61.76470588%;
	padding-bottom: 64.70588235%;
	background: url(../images/back_arrow.svg) no-repeat center center;
	background-size: contain;
	content: '';
	display: block;
	position: absolute;
	left: 19.11764706%;
	bottom: 20%
}

#backtop a:hover {
	opacity: 1;
}

#backtop a:hover path {
	fill: #FFDE5B;
}

#details {
	padding: 3em 0
}

#details .title {
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1.5em;
	color: #399CC3;
	border-bottom: 1px solid #E9E9E9;
	padding-bottom: 2.16666667em;
	margin-bottom: 2.53333333em
}

#details .title time {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	font-size: .66666667em;
	font-family: SegoeUI;
	font-weight: 400;
	background-color: #8BECF2;
	width: 9.65em;
	height: 1.55em;
	line-height: 1.45em;
	text-align: center;
	margin-top: -.35em;
	margin-right: .75em
}

#details .entry {
	font-size: 1em;
	line-height: 2.4em;
	margin-bottom: 3.5em;
	font-weight: 300
}

#postnavi {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	font-size: 1em;
	flex-wrap: wrap;
	font-weight: 300
}

#postnavi span {
	display: block;
	width: 9.75em
}

#postnavi .back {
	width: auto;
	min-width: 9.75em
}

#postnavi a {
	display: block;
	overflow: hidden;
	border: 1px solid #399CC3;
	color: #399CC3;
	height: 1.55em;
	line-height: 1.45em;
	letter-spacing: .1em;
	text-align: center;
	padding: 0 .5em
}

#postnavi a:hover {
	color: #8BECF2;
	border-color: #8BECF2;
}

#postnavi a i {
	display: block;
	font-style: normal;
}

#joblist {
	padding: 1em 0
}

.jobitem {
	font-family: SegoeUI;
	padding-bottom: 4.88656195%;
	margin-bottom: 6.10820244%;
	border-bottom: 1px solid #E5E5E5
}

.jobitem:last-child {
	border-bottom: none;
	padding-bottom: 0
}

.jobitem .apply {
	overflow: hidden;
	letter-spacing: .16666667em
}

.jobitem .apply a {
	display: block;
	color: #399CC3;
	background-color: #FFDE5B;
	width: 6.26666667em;
	height: 2.2em;
	line-height: 2.2em;
	text-align: center;
	float: right
}

.jobitem .apply a:hover {
	background-color: #8BECF2;
	color: #fff
}

.jobitem .entry {
	color: #666;
	font-size: 1em;
	line-height: 2.1em;
	letter-spacing: -.0025em;
	margin-bottom: 4.01396161%;
	font-weight: 300
}

.jobitem .meta {
	color: #399CC3;
	font-size: 1em;
	line-height: 1.8em;
	margin-bottom: 1.30890052%;
	text-align: left
}

.jobitem .meta span {
	display: inline-block;
	vertical-align: middle;
	background: no-repeat left .4em;
	background-size: auto 1.05em;
	padding-left: 1.5em;
	margin-right: 1.5em;
	letter-spacing: .095em
}

.jobitem .meta span:last-child {
	margin-right: 0
}

.jobitem .meta .date {
	background-image: url(../images/icon_date.svg)
}

.jobitem .meta .addr {
	background-image: url(../images/icon_addr.svg);
	padding-left: 1.25em
}

.jobitem .meta .num {
	background-image: url(../images/icon_num.svg);
	padding-left: 1.8em
}

.jobitem .meta .welf {
	background-image: url(../images/icon_welf.svg)
}

.jobitem .title {
	font-family: SourceHanSansCN;
	font-weight: 500;
	color: #399CC3;
	line-height: 1.35em;
	margin-bottom: 2.61780105%
}

.jobitem .title i {
	font-style: normal;
	height: 1.33333333em;
	line-height: 1.33333333em;
	border-radius: .66666667em;
	background-color: #FFDE5B;
	padding: 0 .55em;
	display: inline-block;
	vertical-align: middle;
	font-weight: 400;
	margin-top: -.26666667em;
	margin-right: .33333333em
}

#applyform {
	color: #399CC3;
	font-family: SegoeUI;
	margin-bottom: 1.7452007%
}

#applyform .title {
	font-weight: 500;
	line-height: 1.5em;
	margin-bottom: 2em
}

#applyform .row {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	flex-wrap: wrap
}

#applyform .item {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin-bottom: 2.5em
}

#applyform .wrap {
	width: 100%;
	margin-bottom: 2.5em
}

#applyform .wrap .label {
	margin-bottom: .25em
}

#applyform .label {
	display: block;
	font-weight: 700;
	font-size: 1em;
	white-space: nowrap;
	position: relative;
	padding-right: 1.5em;
	line-height: 1.875em
}

#applyform .label i {
	font-style: normal;
	color: #FFDE5B;
	position: absolute;
	top: 0;
	line-height: 1em
}

#applyform .input {
	width: 100%;
	position: relative
}

#applyform select {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	font-size: 1em;
	color: #399CC3;
	padding: 0 15px;
}

#applyform em {
	display: block;
	width: 1.6em;
	height: 1.6em;
	position: absolute;
	top: 50%;
	right: .3em;
	background: #E0E0E0 url(../images/icon_arrow.svg) no-repeat center center;
	background-size: 65.625% auto;
	cursor: pointer;
	transform: translateY(-50%)
}

#applyform .text {
	border: 1px solid #399CC3;
	display: block;
	width: 100%;
	height: 2.2em;
	line-height: 1.2em;
	padding: .5em 15px;
	font-size: 1em;
	color: #399CC3
}

#applyform .text:focus,
#applyform .text:hover {
	border-color: #8BECF2
}

#applyform textarea.text {
	height: 9.55em
}

#applyform .row2 .item {
	width: 45.37521815%
}

#applyform .row3 .item {
	width: 33.15881326%
}

#applyform .row3 .w270 {
	width: 23.56020942%
}

#applyform .row3 .w400 {
	width: 34.90401396%
}

#applyform .btn {
	overflow: hidden;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	justify-content: flex-end
}

#applyform .button {
	width: 6.26666667em;
	height: 2.2em;
	font-size: 1em;
	font-weight: 400;
	color: #399CC3;
	cursor: pointer;
	background-color: #FFDE5B;

	display: block
}

#applyform .submit:hover {
	background-color: #8BECF2;
	color: #fff;
}

#applyform .back {
	background-color: #E0E0E0;
	margin-left: 1.66666667em;
	text-align: center;
	line-height: 2.2em;
}

#applyform .back:hover {
	/* background-color: #eee; */
	background-color: #EAEAEA;
    color: #90C2D6;
}

#applyform .upload input[type=file] {
	display: none
}

#worklist {
	padding: 70px 0 20px
}

.workbox {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	width: 102%;
	width: 103.4904014%
}

.workitem {
	width: 33.333%;
	padding: 2.95109612% 3.37268128% 2.95109612% 0
}

.workitem a {
	display: block;
	position: relative;
	color: #444
}

.workitem a:hover .pic {
	transform: scale(1.1)
}

.workitem a:hover .title {
	opacity: 1
}

.workitem .pic {
	transition: all .3s
}

.workitem .box {
	transform: skew(-10deg);
	overflow: hidden
}

.workitem .figure {
	transform: skew(10deg) scale(1.27)
}

.workitem .img {
	padding-bottom: 152%
}

.workitem .title {
	background-color: #FFDE5B;
	padding: 0 .5em;
	font-weight: 300;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 2em;
	line-height: 2em;
	position: absolute;
	left: -40%;
	bottom: 0;
	margin-bottom: 4.22535211%;
	width: 104.22535211%;
	font-size: 1em;
	text-align: center;
	opacity: 0;
	transition: all .3s
}

#related {
	margin-top: 160px
}

#related ul {
	width: 112.04188482%;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap
}

#related li {
	width: 33.333%;
	padding-right: 10.74766355%;
	padding-bottom: 2.5%;
	text-align: center
}

#related a {
	display: block;
	position: relative;
	color: #444
}

#related a:after,
#related a:before {
	content: '';
	display: block;
	position: absolute;
	opacity: 0;
	transition: all .3s
}

#related a:before {
	border: 1px solid #8BECF2;
	width: 45%;
	padding-bottom: 45%;
	z-index: 1;
	transform: rotate(45deg);
	right: -15%;
	top: 0;
	margin-top: 62%
}

#related a:after {
	width: 46.20689655%;
	padding-bottom: 57.5862069%;
	z-index: 3;
	background: url(../images/squares.png) no-repeat center center;
	background-size: contain;
	left: -15%;
	top: 0;
	margin-top: -24.13793103%
}

#related a:hover:after,
#related a:hover:before {
	opacity: 1
}

#related a:hover .figure {
	transform: scale(1.103)
}

#related .figure {
	margin-bottom: 8.96551724%;
	position: relative;
	z-index: 2;
	transition: all .3s
}

#related .img {
	padding-bottom: 100%
}

#related .name,
#related .tag {
	font-size: 1em;
	font-weight: 700;
	line-height: 1.8em;
	letter-spacing: .1em
}

#related .tag span {
	display: inline-block;
	position: relative;
	min-width: 0
}

#related .tag span:before {
	width: 100%;
	height: 1em;
	background-color: #FFDE5B;
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: -1;
	transform: translateX(-50%);
	padding: 0 .525em
}

#hmnews {
	padding: 6% 0;
	position: relative
}

#hmnews:after,
#hmnews:before {
	content: '';
	display: block;
	position: absolute;
	background: no-repeat center center;
	background-size: contain
}

#hmnews:before {
	background-image: url(../images/hmnews_left.png);
	width: 20.5vw;
	height: 26.15vw;
	left: 3%;
	top: 50%;
	transform: translateY(-55%)
}

#hmnews:after {
	background-image: url(../images/hmnews_right.png);
	width: 28.15vw;
	height: 41.1vw;
	right: 0;
	top: -30%
}

#hmnews .inner {
	position: relative;
	z-index: 2
}

#hmnews ul {
	width: 103.53403141%;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap
}

#hmnews li {
	width: 33.333%;
	padding-right: 3.41340076%;
	padding-bottom: 3.41340076%
}

#hmnews .figure {
	margin-bottom: 4.22535211%
}

#hmnews .figure .img {
	transform: scale(1.01);
}

#hmnews .figure a {
	position: relative
}

#hmnews .figure a:after {
	border-top: 1.7em solid #8BECF2;
	border-right: 1.7em solid transparent;
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2
}

#hmnews .figure a:hover .img {
	transform: scale(1.1);
}

#hmnews .img {
	padding-bottom: 100%
}

#hmnews .title {
	font-family: SegoeUI;
	font-weight: 300;
	font-size: 1em;
	line-height: 1.7em;
	height: 3.4em;
	-webkit-line-clamp: 2;
	margin-bottom: 4.22535211%
}

#hmnews .title a {
	color: #444
}

#hmnews .more {
	overflow: hidden
}

#hmnews .more a {
	display: block;
	overflow: hidden;
	font-size: 1em;
	width: 5.45em;
	height: 1.5em;
	line-height: 1.5em;
	background-color: #FFDE5B;
	color: #399CC3;
	float: right;
	text-align: center;
	transition: all .2s;
}

#hmnews .more a:hover {
	color: #fff;
	background-color: #8BECF2
}

#hmnews .more a:hover i {
	background-image: url(../images/icon_arrow_01_on.svg)
}

#hmnews .more i {
	display: inline-block;
	font-style: normal;
	background: url(../images/icon_arrow_01.svg) no-repeat right center;
	background-size: .45em auto;
	padding-right: .9em
}

#hmwork {
	background: url(../images/bg_hmwork.png) no-repeat 5% center;
	background-size: cover;
	padding: 9.75% 0 8.25%;
	position: relative
}

#hmwork:after,
#hmwork:before {
	content: '';
	display: block;
	position: absolute;
	background: no-repeat center center;
	background-size: contain
}

#hmwork:before {
	background-image: url(../images/hmwork_left.png);
	width: 17.2vw;
	height: 24.85vw;
	left: 3%;
	top: 10%
}

#hmwork:after {
	background-image: url(../images/hmwork_right.png);
	width: 9.95vw;
	height: 14.85vw;
	right: 8.75vw;
	top: 50%
}

#hmwork .inner {
	position: relative;
	z-index: 2
}

#hmwork .columnname {
	margin-bottom: .77777778em
}

#slides {
	position: relative
}

#slides .img {
	padding-bottom: 74.9%
}

#slides .bubble {
	width: 14.1%;
	position: absolute;
	z-index: 2;
	top: 23.365%;
	left: 83.5%;
	display: none;
}

#slides .bubble i {
	display: block;
	padding-bottom: 100%;
	background: no-repeat center center;
	background-size: contain;
}

#slides .scroll {
	font-size: 30px;
	width: 7.73333333em;
	height: 2.23333333em;
	line-height: 2.16666667em;
	text-align: center;
	color: #fff;
	border-radius: .16666667em;
	font-family: SegoeUI;
	font-weight: 600;
	position: absolute;
	left: 37.9%;
	top: 47.79706275%;
	transform: translateX(-50%);
	background-color: #FFDE5B
}

#slides .scroll:after {
	width: 1.46666667em;
	height: 1.36666667em;
	background: url(../images/icon_arrow_02.svg) no-repeat center center;
	background-size: contain;
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	z-index: 2;
	margin-top: -5%
}

#hmabout {
	padding: 0 0 5.75%;
	margin-top: -3%;
	position: relative;
	z-index: 2
}

#hmabout .intro>* {
	opacity: 0;
	transform: translateY(200%);
	transition: all 1.5s;
}

#hmabout .intro .show {
	opacity: 1;
	transform: translateY(0);
}

#hmabout:after,
#hmabout:before {
	content: '';
	display: block;
	position: absolute;
	background: no-repeat center center;
	background-size: contain
}

#hmabout:before {
	background-image: url(../images/hmabout_left.png);
	width: 28.15vw;
	height: 33.2vw;
	left: 2%;
	top: 10%
}

#hmabout:after {
	background-image: url(../images/hmabout_right.png);
	width: 18.85vw;
	height: 21.5vw;
	right: 9.5vw;
	top: 25%
}

#hmabout .inner {
	position: relative;
	z-index: 3
}

#hmabout .intro {
	font-family: SegoeUI;
	line-height: 2.5em;
	letter-spacing: .1em
}

#hmabout .intro h3 {
	font-size: 1.5em;
	line-height: 2em;
	font-weight: 700
}

#hmabout .intro h3 span {
	display: inline-block;
	position: relative
}

#hmabout .intro h3 span:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	background-color: #FFDE5B;
	height: 1em;
	width: 100%;
	z-index: -1;
	padding: 0 .5em
}

/*click*/
.click {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0px;
	padding-bottom: 0px;
	z-index: 11;
}

.click i {
	position: absolute;
	transition: all .5s ease-out 0s;
	transform: scale(0) translate(0%, 0%);
	z-index: 5;
	opacity: 1;
}

.mouse i {
	opacity: 0;
}

/*style1*/
.style1 i:nth-child(1) {
	width: 32px;
	right: 50%;
	bottom: 100%;
}

.style1 i:nth-child(2) {
	width: 20px;
	left: 100%;
	bottom: 100%;
}

.style1 i:nth-child(3) {
	width: 22px;
	right: 0;
	top: 100%;
}

.style1 i:after {
	display: block;
	content: '';
	background: no-repeat center center;
	background-size: contain;
}

.style1 i:nth-child(1):after {
	padding-bottom: 114.9%;
	background-image: url(../images/style1_01.png);
}

.style1 i:nth-child(2):after {
	padding-bottom: 90%;
	background-image: url(../images/style1_02.png);
}

.style1 i:nth-child(3):after {
	padding-bottom: 118.75%;
	background-image: url(../images/style1_03.png);
}

.mouse .style1 i:nth-child(1) {
	transform: scale(1) translate(-100%, -100%);
}

.mouse .style1 i:nth-child(2) {
	transform: scale(1) translate(100%, 100%);
}

.mouse .style1 i:nth-child(3) {
	transform: scale(1) translate(-100%, 100%);
}

/*style2*/
.style2 i:nth-child(1) {
	width: 37px;
	left: 50%;
	bottom: 100%;
	transform: scale(0) translate(-100%, 0%);
}

.style2 i:nth-child(2) {
	width: 50px;
	left: 100%;
	bottom: 100%;
	transform: scale(0) translate(0%, 53%);
}

.style2 i:nth-child(3) {
	width: 25.5px;
	left: 100%;
	top: 100%;
}

.style2 i:nth-child(4) {
	width: 26.5px;
	right: 100%;
	bottom: 100%;
	transform: scale(0) translate(0%, 50%);
}

.style2 i:after {
	display: block;
	content: '';
	background: no-repeat center center;
	background-size: contain;
}

.style2 i:nth-child(1):after {
	padding-bottom: 114.865%;
	background-image: url(../images/style2_01.svg);
}

.style2 i:nth-child(2):after {
	padding-bottom: 113.132%;
	background-image: url(../images/style2_02.svg);
}

.style2 i:nth-child(3):after {
	padding-bottom: 94.118%;
	background-image: url(../images/style2_03.svg);
}

.style2 i:nth-child(4):after {
	padding-bottom: 115.095%;
	background-image: url(../images/style2_04.svg);
}

.mouse .style2 i:nth-child(1) {
	transform: scale(1) translate(-100%, -150%);
}

.mouse .style2 i:nth-child(2) {
	transform: scale(1) translate(130%, 40%);
}

.mouse .style2 i:nth-child(3) {
	transform: scale(1) translate(230%, 230%);
}

.mouse .style2 i:nth-child(4) {
	transform: scale(1) translate(-150%, 300%);
}

/*style3*/
.style3 i:nth-child(1) {
	width: 64px;
	left: 50%;
	bottom: 100%;
}

.style3 i:nth-child(2) {
	width: 40px;
	left: 100%;
	top: 100%;
}

.style3 i:nth-child(3) {
	width: 37px;
	right: 100%;
	bottom: 100%;
}

.style3 i:after {
	display: block;
	content: '';
	background: no-repeat center center;
	background-size: contain;
}

.style3 i:nth-child(1):after {
	padding-bottom: 90.625%;
	background-image: url(../images/style3_01.svg);
}

.style3 i:nth-child(2):after {
	padding-bottom: 105%;
	background-image: url(../images/style3_02.svg);
}

.style3 i:nth-child(3):after {
	padding-bottom: 94.595%;
	background-image: url(../images/style3_03.svg);
}

.mouse .style3 i:nth-child(1) {
	transform: scale(1) translate(0%, -100%);
}

.mouse .style3 i:nth-child(2) {
	transform: scale(1) translate(100%, 100%);
}

.mouse .style3 i:nth-child(3) {
	transform: scale(1) translate(-200%, 20%);
}

@media only screen and (max-width:1920px) {
	.columnname {
		font-size: 2.8125vw
	}

	#worklist {
		padding: 3.64583333vw 0 1.04166667vw
	}

	.workitem {
		padding-top: 1.82291667vw;
		padding-bottom: 1.82291667vw
	}

	#related {
		margin-top: 8.33333333vw
	}
}

@media only screen and (max-width:1600px) {
	.font30 {
		font-size: 1.875vw
	}

	#slides .scroll {
		font-size: 1.875vw
	}
}

@media only screen and (max-width:1440px) {
	#backtop {
		right: 3.125%;
	}

	#hmwork .list,
	#worklist {
		padding-left: 3%;
		padding-right: 3%
	}

	.workitem .title {
		left: -19%
	}
}

@media only screen and (max-width:1222px) {
	.font20 {
		font-size: 1.63666121vw
	}
}

@media only screen and (max-width:1000px) {
	.font20 {
		font-size: 16px
	}

	.font30 {
		font-size: 20px
	}

	#logo {
		width: 83px
	}

	#navi .ul {
		padding: 0
	}

	/*1000px*/
	.columnname {
		font-size: 28px;
		margin-bottom: 5%
	}

	#pagenavi {
		padding: 3.41333333% 0
	}

	#pagenavi a {
		margin: 0 .64%
	}

	#pagenavi .a_prev {
		margin-right: 4.26666667%
	}

	#pagenavi .a_next {
		margin-left: 4.26666667%
	}

	#details {
		padding: 5.12% 0
	}

	#details .title {
		padding-bottom: 3.52%;
		margin-bottom: 4.26666667%
	}

	#details .title time {
		width: 16.42666667%
	}

	#details .entry {
		line-height: 2em;
		margin-bottom: 11.09333333%
	}

	#applyform .title {
		margin-bottom: 4.26666667%
	}

	#applyform .item,
	#applyform .wrap {
		margin-bottom: 5.33333333%
	}

	#category a {
		padding: 0 6px
	}

	#related ul {
		width: 106.704%
	}

	#related li {
		padding-right: 6.28280102%;
		padding-top: 1%;
		padding-bottom: 1%
	}

	#hmwork .columnname {
		margin-bottom: 2.324%
	}

	#hmabout .intro {
		line-height: 2em
	}

	#hmabout .intro h3 {
		line-height: 1.875em
	}
}

@media only screen and (max-width:768px) {
	.font30 {
		font-size: 18px
	}

	#header .inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 13px 0
	}

	#logo {
		width: 90px;
		display: block;
		position: relative;
		z-index: 10
	}

	/*768px*/
	#language {
		padding: 0 15px 0 35px;
		display: block;
	}

	#social {
		display: block;
		width: 120px
	}

	#social li {
		width: 26px
	}

	#social .menu {
		display: block
	}

	#social .menu a {
		position: relative;
		margin-left: 10%;
		z-index: 10
	}

	#social .menu a i,
	#social .menu a:after,
	#social .menu a:before {
		display: block;
		width: 100%;
		height: 3px;
		background-color: #bdbdbd;
		position: absolute;
		right: 0;
		transition: all .3s
	}

	#social .menu a i {
		top: 50%;
		transform: translateY(-50%)
	}

	#social .menu a:before {
		content: '';
		top: 2px
	}

	#social .menu a:after {
		content: '';
		bottom: 2px
	}

	#social .active a i {
		opacity: 0
	}

	#social .active a:before {
		top: 50%;
		background-color: #8BECF2;
		transform: rotate(45deg)
	}

	#social .active a:after {
		bottom: auto;
		top: 50%;
		background-color: #8BECF2;
		transform: rotate(-45deg)
	}

	#navi {
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(245, 245, 245, .75);
		z-index: 9;
		display: none
	}

	#navi .ul {
		display: block;
		background-color: #fff;
		width: 300px;
		max-width: 80%;
		height: calc(100% - 70px);
		position: fixed;
		right: 0;
		top: 70px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
		padding: 5vh 2em;
		transform: translateX(100%);
		transition: all .3s
	}

	#navi .ul>li {
		width: auto;
		text-align: left;
		font-size: 18px
	}

	#navi .ul>li:after {
		width: 100%;
		height: 1px;
		top: auto;
		bottom: 0;
		transform: none
	}

	#navi span {
		display: block;
		margin-right: 25px
	}

	#navi span i {
		width: 25px;
		text-align: center
	}

	#navi .active {
		transform: translateX(0)
	}

	#footer {
		padding: 5% 0
	}

	#footer .inner {
		display: block;
		text-align: center
	}

	#pagelist {
		margin-bottom: 2%
	}

	#pagelist ul {
		justify-content: center
	}

	#pagelist li {
		margin: 0 3.5%
	}

	#wrapper {
		padding: 7% 0 8%
	}

	.columnname {
		font-size: 24px
	}

	/*768px*/
	#category {
		letter-spacing: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 15px;
		margin-bottom: 0;
	}

	#category ul {
		min-width: 350px
	}

	#category .current:after {
		margin-left: 0
	}

	/*768px*/
	.newsitem {
		padding: 5% 0
	}

	.newsitem a {
		padding: 0
	}

	.newsitem a:hover {
		background: 0 0
	}

	.newsitem .text {
		padding-left: 1.5em
	}

	.newsitem .title {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-height: 1.5em;
		max-height: 3em;
	}

	.newsitem .excerpt {
		margin-bottom: 10px
	}

	.newsitem time {
		width: 7em;
	}

	#backtop {
		width: 1.5em
	}

	/*768px*/
	#details {
		padding: 3.125% 0
	}

	#details .title {
		font-size: 1.125em
	}

	#details .title time {
		width: 85px;
		font-size: 14px
	}

	#details .entry {
		line-height: 1.875em
	}

	/*768px*/
	#postnavi span {
		width: 5.5em;
	}

	#postnavi .back {
		min-width: 8.75em
	}

	/*768px*/
	.jobitem .meta {
		font-size: 13px;
	}

	.jobitem .apply a {
		font-size: 16px
	}

	#applyform .title span {
		display: block
	}

	#applyform .row2 .item,
	#applyform .row3 .item {
		width: 100%
	}

	#applyform .label {
		padding-right: 1em
	}

	#applyform .button {
		font-size: 16px
	}

	#hmwork .list,
	#worklist {
		padding-left: 6%;
		padding-right: 6%
	}

	.workitem {
		width: 50%
	}

	.workitem .title {
		opacity: 1;
		font-size: 13px;
	}

	#hmwork .columnname {
		margin-bottom: 5%
	}

	#hmwork .workitem {
		width: 33.333%
	}

	#hmnews ul {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	#hmnews li {
		width: auto;
		padding-right: 0;
		padding-bottom: 5%
	}

	#hmnews .figure {
		margin-bottom: 3%
	}

	#hmnews .title {
		height: auto;
		max-height: 3.4em
	}

	#hmabout .intro {
		line-height: 1.875em
	}

	#hmabout .intro h3 {
		line-height: 1.5em;
		font-size: 1.35em
	}
}

@media only screen and (max-width:540px) {
	#related ul {
		width: auto;
		display: block
	}

	#related li {
		width: auto;
		padding-right: 0;
		padding-bottom: 4.5%
	}

	#related a:hover .figure {
		transform: scale(1)
	}

	#related .figure {
		margin-bottom: 3.5%
	}

	/*540px*/
	#hmabout .intro {
		font-size: 13px;
		letter-spacing: 0;
	}
}