@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: 'DINMedium';
	src: url('fonts/DINMedium.eot');
	src: url('fonts/DINMedium.eot') format('embedded-opentype'),
		 url('fonts/DINMedium.woff2') format('woff2'),
		 url('fonts/DINMedium.woff') format('woff'),
		 url('fonts/DINMedium.ttf') format('truetype'),
		 url('fonts/DINMedium.svg#DINMedium') format('svg');
}
@font-face {
	font-family: 'DINLight';
	src: url('fonts/DINLight.eot');
	src: url('fonts/DINLight.eot') format('embedded-opentype'),
		 url('fonts/DINLight.woff2') format('woff2'),
		 url('fonts/DINLight.woff') format('woff'),
		 url('fonts/DINLight.ttf') format('truetype'),
		 url('fonts/DINLight.svg#DINLight') format('svg');
}
@font-face {
    font-family: 'bs';
    src: url('fonts/bs.eot');
    src: url('fonts/bs.eot') format('embedded-opentype'),
         url('fonts/bs.woff2') format('woff2'),
         url('fonts/bs.woff') format('woff'),
         url('fonts/bs.ttf') format('truetype'),
         url('fonts/bs.svg#bs') format('svg');
}

html { overflow-y:scroll; }
body { background:#FFF; font-size: 14px; line-height: 22px; -webkit-text-size-adjust: 100%; }
body, input, textarea, select { color:#4A4A4A; font-family: 'PingFangSC-Regular', 'Microsoft YaHei', '微软雅黑', sans-serif; }
body, h1, h2, h3, p, ul, dl, dd, form, textarea, input, ol { margin:0; }
/*h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: normal; }*/
ul, ol, td, th { padding:0; list-style:none outside; }
a { color:#4A4A4A; transition: color 0.3s; text-decoration:none; -webkit-tap-highlight-color:transparent; }
a:not(.logo):hover, .works a:hover em { color: #D0021B; }
i, strong, em {/* font-style:normal; font-weight:normal; */}
a:focus, input, textarea, select { outline:none; }
textarea { overflow:auto; resize:none; }
input, textarea, select { font-size:100%; }
img { border:0; vertical-align:middle; max-width: 100%; }
table { border-collapse:collapse; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button,
input[type=submit], input[type=reset], input[type=number], input[type=tel],
input[type=text], input[type=password], button, textarea { -webkit-appearance: none !important; margin: 0; }
input[type=number] { -moz-appearance:textfield; }
input, textarea, button { border-radius:0; }

.animate { transition:all 0.3s; -webkit-transition:all 0.3s; }
.clear:after { display:block; clear:both; content:''; visibility:hidden; height:0; }.clear { zoom:1; }
.breakall { word-break:break-all; word-wrap:break-word; }
.float-left { float:left; display:inline; } .float-right { float:right; display:inline; }
.justify { text-align:justify; text-justify:inter-ideograph; }
.nowrap { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.noright { margin-right:0!important; padding-right:0!important; }
.noborder { border:none!important; }

.homeimage { width: 100%; height: 100%; position: absolute; background-size: cover; }
.container { max-width: 980px; box-sizing: border-box; padding: 0 20px; margin-left: auto; margin-right: auto; }
.header { position: absolute; line-height: 60px; width: 100%; font-family: 'bs'; left: 50%; transform: translateX(-50%); top: 50px; z-index: 99; }
.header h1{ font-size: inherit; font-weight: normal; width:260px;}
	.header h1 small { font-size: 1em; line-height: 16px; width:160px; display: inline-block; vertical-align: top; margin: 23px 0 0 0.8em; }
	.logo { font-size: 30px; float: left; }
		.white .logo, .white .lang, .white .navigation a, .showmenu .navigation a, .cwhite, .cwhite a, .showmenu .logo, .showmenu .lang { color: #FFF; }
		.white .header a, .white .navigation a { text-shadow: 1px 1px 3px #000; }
	.lang { float: right; font-size: 20px; }
	.menu { display: none; float: right; width: 32px; height: 32px; margin-top: 14px; background: url(../image/menu.svg) 50% no-repeat; background-size: 100% auto; }
		.home .menu, .white .menu { background-image: url(../image/menu-white.svg); }
		.showmenu .menu { background-image: url(../image/close.svg); background-size: 24px auto; }
.navigation { font-family: 'bs'; position: absolute; top: 50px; right: 50%; margin-right: -405px; line-height: 60px; font-size: 24px; text-transform: capitalize; z-index: 99; }
	.showmenu .navigation { transition: opacity 0.3s; }
	.navigation li { margin-left: 36px; float: left; }
		.navigation a:hover, a.lang:hover { color: #000; }
		.white .navigation a:hover, .white a.lang:hover { color: #DDD; }
.footer { background-color: #FFF; text-align: center; font-family: 'DINLight'; padding: 40px 0; font-size: 12px; }
	.footer, .footer a { color: #9B9B9B; }
.content { margin-top: 200px; min-height: calc(100vh - 300px) }
	.bgwhite { position: relative; background-color: #FFF; z-index: 99; margin-top: 660px; overflow: hidden; }
.works { font-size: 0; line-height: 28px; }
	.works li { font-size: 20px; margin: 0 16px 35px 0; display: inline-block; vertical-align: top; }
		.works em { transition: color 0.3s; color: #000; font-family: 'DINMedium'; font-weight: bold; padding-right: 6px; }
		.works i { font-family: 'DINLight', 'PingFangSC-Light', 'Microsoft YaHei Light', 'Microsoft YaHei'; font-size: 18px; }
.feeds { text-align: center; line-height: 22px; }
	.feeds li { width: 465px; float: left; position: relative; padding-bottom: 45px; }
		.feeds .cwhite { position: absolute; left: 38px; top: 48px; font-family: 'DINMedium'; line-height: 19px; }
		.feeds .title { text-overflow: ellipsis; overflow: hidden; width: 100%; margin-top: 16px; display: block; white-space: nowrap; padding: 0 16px; box-sizing: border-box; }
		.zoomImage { display: block; height: 290px; position: relative; overflow: hidden; }
			.feed-image { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; transition: transform 1s; }
			.zoomImage:hover .feed-image { transform: scale(1.05); }
	.feeds li:nth-of-type(2n) { float: right; }
.page { padding-top: 30px; text-align: center; }
	.page + .page { margin-top: 80px; }
.article li { overflow: hidden; margin-bottom: 20px; }
	.article .cwhite { display:none; width: 110px; line-height: 34px; margin-right: 14px; text-align: center; float: left; border-radius: 7px; color:#B3B3B3;/*background-color: #D8D8D8;*/ }
	.article-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 34px; display: block; }
	.article-time { margin: 0px 0 0 0px; font-family: 'DINMedium'; font-size: 12px; color: #B3B3B3; }
.topimage { height: 660px; background-size: cover; background-position: 50%; }
	#topimage { position: fixed; left: 0; top: 0; width: 100%; z-index: -1; }
#topimage + .bgwhite .content { margin-top: 80px; min-height: calc(100% - 842px); }
	.contact { font-family: 'Simsun', '宋体'; }
h2.title { line-height: 32px; font-size: 20px; text-align: center; font-weight: bold;}
	h2.title.text-left { text-align: left; }
	h2.title small { font-size: 16px; display: block; line-height: 20px; margin-top: 20px; color: #B3B3B3; }
.word { font-family: 'Simsun', '宋体'; margin-top: 40px; line-height: 24px; }
	.word + h2.title { margin-top: 60px; }
	.word p { margin-bottom: 1em;}
	.word h1, .word h2, .word h3, .word h4, .word h5, .word h6 { margin:30px 0 15px 0; }
	.bio span {font-family: Arial; display: inline-block; vertical-align: top; width: 50px; margin-left: -50px;}
	.bio spanr {float:right; margin-left:20px;}
	.bio p {padding-left:50px; text-indent: 0; margin-bottom: 10px;}
.roundimage { width: 460px; height: 460px; margin: 0 auto 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: 50%; display:none; }
	.roundimage span { font-family: 'DINMedium'; font-size: 128px; }
.my-gallery { overflow: hidden; margin: 40px 0; }
	.pswp__top-bar { background-color: transparent!important; }
	.my-gallery figure { float: left; margin: 0 20px 20px 0; }
		.my-gallery figure:nth-of-type(4n) { margin-right: 0; }
		.my-gallery a { display: block; position: relative; width: 220px; overflow: hidden; height: 220px; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
			.my-gallery img { position: absolute; left: 50%; top: 50%; max-width: none; transform: translate(-50%, -50%); visibility: hidden; }
.works-detail-image { margin: 0; text-align: center; }
	.works-detail-image figure { float: none; margin: 0 0 2em; }
		.works-detail-image a { width: auto; height: auto; display: inline-block; vertical-align: top; }
			.works-detail-image img { position: static; transform: translate(0, 0); visibility: visible; max-width: 100%; max-height: 800px; width: auto!important; height: auto!important; }
		figcaption { margin: 5px 0 0; text-align: left; }
			.pswp__caption__center { max-width: none!important; }
.list { margin: 40px 0; }
	.list li { float: left; margin: 0 20px 20px 0; }
		.list a { width: 220px; height: 220px; position: relative; overflow: hidden; display: block; }
			.list img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform 1s; max-width: none; }
			.list span { position: absolute; left: 14px; right: 14px; bottom: 10px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFF; opacity: 0; transition: opacity 0.3s; text-shadow: 1px 1px 5px #000; }
		.list a:hover span { opacity: 1; }
		.list a:hover img { transform: translate(-50%, -50%) scale(1.05); }
		.list li:nth-of-type(4n) { margin-right: 0; }
.timeline { padding-top: 25px; }
	.timeline dl { margin-bottom: 32px; }
		.timeline dt { float: left; width: 64px; line-height: 64px; border-radius: 50%; text-align: center; margin: -17px 36px 0 0; color: #FFF; background-color: #D8D8D8; }
		.timeline dd { overflow: hidden; }
			.timeline .title { margin-bottom: 25px; line-height: 28px; font-family: 'PingFangSC-Light', 'Microsoft YaHei Light', 'Microsoft YaHei'; }
			.timeline .word { margin-top: 0; }
			.timeline .word spanr {float:right; margin-left:20px;}
	.timeline dl:nth-of-type(1) dt { margin-top: 0; }
	.timeline span{float:right;}
.visible-xs { display: none; }
@media screen and (max-width: 960px){
	.visible-xs { display: block; }
	.menu { display: block; }
		.lang { display: none; }
		.showmenu .menu { background-size: 16px auto; }
	.navigation { display: none; left: 0; top: 0; width: 100%; height: 100%; background-color: #BABABA; margin: 0; box-sizing: border-box; padding: 120px 30px 0; z-index: 98; }
		.navigation li { float: none; text-align: right; }
		.showmenu .navigation { display: block; }
	.showmenu .header, .showmenu .navigation { position: fixed; }
}
@media screen and (max-width: 768px){
	body { font-size: 14px; line-height: 24px; }
	.header { top: 25px; padding: 0 20px; line-height: 36px; }
		.menu { display: block; width: 24px; height: 24px; margin-top: 18px; margin-top: 4px; }
		.showmenu .header a, .white .navigation a { text-shadow: none; }
		.logo { font-size: 25px; }
		.header h1 small { margin-top: 9px; }
	.navigation { padding: 80px 20px 0; font-size: 16px; line-height: 40px; }
	.content { margin-top: 100px; min-height: 0; }
		.works li { font-size: 14px; margin: 0 8px 18px 0; }
			.works i { font-size: 11px; }
		.bgwhite { margin-top: 33.3vh; z-index: 97; }
	.footer { padding: 20px 0; font-size: 10px; }
	.topimage { height: 33.3vh; }
		#topimage + .bgwhite .content { margin-top: 40px; min-height: 0; }
			h2.title { font-size: 18px; line-height: 26px; }
				h2.title small { font-size: 14px; margin-top: 10px; line-height: 20px; }
			.word { margin-top: 20px; }
	.my-gallery { margin: 20px 0; }
		.my-gallery figure { width: calc((100% - 10px) / 2); margin: 0 10px 10px 0; }
			.my-gallery a { width: 100%; height: 0; padding-top: 100%; }
		.my-gallery figure:nth-of-type(2n) { margin-right: 0; }
	.works-detail-image { margin: 0; }
		.works-detail-image figure { width: 100%; float: none; margin: 0 0 2em; }
			.works-detail-image a { width: 100%; height: auto; padding-top: 0; }
	.page { padding-top: 15px; }
		.page + .page { margin-top: 40px; }
	.list { margin: 20px 0; }
		.list li { width: calc((100% - 10px) / 2); margin: 0 10px 10px 0; height: auto; }
			.list li a { display: block; padding-top: 100%; width: auto; height: auto; }
		.list li:nth-of-type(2n) { margin-right: 0; }
	.feeds li { padding-bottom: 20px; width: calc(50% - 5px); }
		.zoomImage { height: 110px; }
		.feeds .cwhite { left: 19px; top: 24px; line-height: 10px; }
		.feeds .title { margin-top: 8px; padding: 0 8px; }
	.roundimage { width: 60vw; height: 60vw; margin-bottom: 30px; position: relative; }
		.roundimage span { position: absolute; font-size: 64px; width: 100%; text-align: center; left: 0; top: 50%; transform: translateY(-50%); }
	.article li { margin-bottom: 20px; }
		.article-time { font-size: 10px; margin-left: 0px; }
		.article .cwhite { width: 72px; }
	.word + h2.title { margin-top: 30px; }
	.timeline dt { width: 48px; height: 48px; margin: -12px 18px 0 0; line-height: 0; display: flex; justify-content: center; align-items: center; padding-top: 2px; box-sizing: border-box; }
		.timeline .title { line-height: 14px; margin-bottom: 12px; }
}