@font-face {
    font-family: "lantingxihei";
    src: url(https://x0.ifengimg.com/ucms/2022/1121/lantingxihei.TTF);
}
img {display: block;}
body { color: #424242; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;}
header{width: 940px;height: 408px;margin: 0 auto;display: flex;align-items: center;background: no-repeat top/cover;}
.header-title-wrap{width: 100%;color: #ffffff; text-align: center; text-transform: uppercase;text-shadow: 0 0 10px #000;}
.header-title-wrap h2{font-size: 50px; line-height: 1;}
.header-title-wrap h3{margin-top: 30px; font-size: 20px;}
/*  */
.main-content{background: #f1f1f1;padding-top: 30px;}
.main-container{width: 940px;padding: 0 20px 35px;margin: 0 auto;background: #ffffff;}
.top-desc{font-size: 18px; line-height: 1.6; color: #333333; margin: 1em 0;}
.top-desc:last-child{margin-bottom: 0;padding-bottom: 1em;border-bottom: thin solid #eeeeee;}
.photo-frame{position: relative;}
.photo-set{margin: 50px 0;}
.photo-set img{width: 100%;}
.photo-info{width: 100%; position: absolute; bottom: 0; line-height: 2; color: #ffffff; background: linear-gradient(transparent, rgba(0,0,0,0.4));padding: 4% 0 1%;}
.photo-info span{ font-family: lantingxihei; margin: 0 7% 0 0;}
.photo-info span:first-child{margin:0 7% 0 4%;}
.photo-desc-frame{padding: 2em 0; display: flex; justify-content: space-evenly; align-content: flex-start; border-bottom: thin solid #eeeeee;}
.photo-desc-frame i{display: flex;align-items: flex-start; width: 84px; height: 84px; justify-content: center;background: url(https://x0.ifengimg.com/ucms/2022_49/B628F4A75573A6F2ABA651FD7A45E1EB9C40D379_size0_w84_h84.png) no-repeat center/contain;}
.photo-desc-frame .serial{ font-family: lantingxihei; align-self: center; font-size: 50px; transform: translateX(-6%);color: #111111;white-space: nowrap;}
.photo-desc-frame span{font-size: 48px; font-weight: 100;}
.photo-desc-frame img{width: 32px;}
.photo-desc{width: 77%; text-align: justify; font-size: 16px;line-height: 1.6;}
.intro{font-size: 18px;line-height: 1.6;padding: 0 4%;}
footer {width: 100%;font-family: Arial, simsun, serif;text-align: center;color: #969696;margin: 7% auto 10%;line-height: 1.8;}
@media only screen and (max-width: 640px) {
	p{width: 94vw; padding:0 3vw;}
	header{height: 43vw;width: auto;}
	.photo-set:nth-child(1){margin-top: 2vh;}
	.main-content{padding: 0;}
	.header-title-wrap h2{font-size: 6vmin;padding: 0 2vw;}
	.header-title-wrap h3{font-size: 3.5vmin;padding: 0 2vw;}
	.main-container{width: 100vw;padding:6vw 0;}
	.photo-desc{width: 68%;font-size: 3.8vmin;}
	.photo-desc-frame i{width: 12vmin;height: 12vmin;}
	.photo-desc-frame img{width: 6.6vmin;}
	.photo-desc-frame .serial{margin-left: 0; font-size: 7vmin;}
	.top-desc, .intro{font-size: 4vmin;line-height: 1.6;}
	.photo-info{ display: flex; justify-content: space-around; font-size: 3.4vmin; line-height: 1; padding-bottom: 2%;}
	.photo-info span, .photo-info span:first-child{margin: 0;}
	.intro {padding: 0; margin: 0 auto;}
	footer {margin: 10% auto 2%;}
}