div {
	    cursor: default;
	}

	* {
	    margin: 0;
	    padding: 0;
	    text-decoration: none;
	    list-style: none;
	}

	xmp {
	    font-size: 1rem;
	    font-family: '微软雅黑';
	    margin: 0 auto;
	    padding: 0px 20px 20px 20px;
	    width: 80%;
	    overflow-x: auto;
	    border: #ffffff dotted 1px;
	    backdrop-filter: blur(10px) brightness(131%);
	    background-color: rgba(0, 0, 0, 0.623);
	    white-space: pre-wrap;
	}

	a {
	    color: #FFF;
	}

	body {
	    background: url(img/bg.jpg) #000;
	    width: 100%;
	    margin: auto;
	    overflow-x: hidden;
	    font-size: 62.5%;
	}

	h1 {
	    font-size: 2rem;
	}

	nav {
	    width: 100%;
	    height: 60px;
	    display: flex;
	    justify-content: center;
	    position: fixed;
	    top: 0;
	    z-index: 100;
	    background-color: rgba(0, 0, 0, 0.507);
	}

	.title {
	    color: #8d8d8d;
	}

	.title>li {
	    cursor: pointer;
	    float: left;
	    line-height: 35px;
	    transition: all .2s ease-out;
	}

	.title_margin_li {
	    margin-left: 50px;
	}

	.title_high_brightness {
	    color: #FFF;
	    font-weight: 500;
	    font-size: 2rem;
	}

	.div_main {
	    margin: 0 auto;
	    width: 1200px;
	    color: #FFF;
	    padding-top: 60px;
	}

	.div_main .module {
	    display: none;
	    width: 100%;
	}

	.portfolio,
	.portfolio img {
	    width: 100%;
	    margin-bottom: -4px;
	}

	.flex_layout {
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: center;
	}

	.left_layout {
	    justify-content: left;
	    text-align: left;
	}

	.right_layout {
	    justify-content: right;
	    text-align: center;
	}

	.all_center {
	    margin: 0 auto;
	    text-align: center;
	    justify-content: center;
	}

	.spacing_50px {
	    margin-top: 50px;
	}

	.first_page_text {
	    margin-top: 400px;
	}

	.first_content {
	    font-size: 8rem;
	    font-weight: 800;
	    text-align: center;
	    animation: amplification 3s cubic-bezier(0.215, 0.610, 0.355, 1);
	}

	.second_content {
	    margin-top: 400px;
	}

	.second_content .text_area {
	    width: 700px;
	}

	.avatar_img {
	    width: 374px;
	    height: 350px;
	    margin-top: 50px;
	    margin-left: 100px;
	}

	.third_and_four_content {
	    transform: scale(1);
	    margin-top: 700px;
	}

	.third_and_four_content .text_area {
	    width: 320px;
	}

	.contact_information {
	    width: 800px;
	}

	.contact_information ul {
	    display: flex;
	    justify-content: center;
	    flex-wrap: wrap;
	}

	.contact_information ul li {
	    font-size: 1rem;
	    font-weight: 100;
	    width: 33%;
	    margin: 30px 0px 30px 0px;
	}

	.main_heading {
	    font-size: 4rem;
	    font-weight: 700;
	}

	.subheading {
	    font-size: 2.5rem;
	    font-weight: 700;
	}

	.main_text {
	    font-size: 1.1rem;
	    font-weight: 200;
	    line-height: 1.5rem;
	}

	.small_text {
	    font-size: .5rem;
	}

	.background_modile {
	    width: 100vw;
	    height: 2267px;
	    position: fixed;
	    top: -3px;
	    z-index: -999;
	    background: url(https://gd-hbimg.huaban.com/03602575f7874bceef1056a42f3f3c705e8bccddf7a8c-TZ8Txg);
	    background-size: cover;
	    background-position: left bottom;
	}

	.starry_sky_background_module {
	    z-index: -998;
	}

	.content-container {
	    z-index: -998;
	    overflow: hidden;
	}

	.sun,
	.moon,
	.meteorite {
	    position: absolute;
	    z-index: -998;
	    width: 50px;
	    height: 50px;
	    top: 50%;
	    left: 50%;
	}

	.sun {
	    position: absolute;
	    width: 400px;
	    height: 400px;
	    transform: translate(-50%, -50%);
	    animation: sunbigorsmall 5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.moon {
	    animation: LunarRotation 20s linear infinite;
	}

	.meteorite {
	    animation: LunarRotation2 10s linear infinite;
	}

	.earth {
	    position: absolute;
	    top: 2000px;
	    left: -600px;
	    z-index: -998;
	    transform: scale(3);
	    transition: all .5s linear;
	}

	.mars {
	    position: absolute;
	    top: 1500px;
	    right: -600px;
	    z-index: -997;
	    transform: scale(4);
	    transition: all .5s linear;
	}

	.meteor {
	    position: fixed;
	    z-index: -1000;
	    width: 150px;
	    height: 2px;
	    background: linear-gradient(90deg,
	            rgba(255, 255, 255, 0) 0%,
	            rgba(255, 255, 255, 1) 50%,
	            rgba(255, 255, 255, 0) 100%);
	    transform: rotate(-45deg);
	    animation: meteorFall 1.5s linear infinite;
	    opacity: 0;
	}

	@keyframes meteorFall {
	    0% {
	        transform: rotate(-45deg) translate(200%, 200%);
	        opacity: 1;
	    }

	    100% {
	        transform: rotate(-45deg) translate(-600%, -600%);
	        opacity: 0;
	    }
	}

	.trail {
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
	    animation: trailEffect 2s ease-out infinite;
	    opacity: 0;
	}

	@keyframes trailEffect {
	    0% {
	        opacity: 0.8;
	        transform: translate(-20px, 20px) scale(1.2);
	    }

	    100% {
	        opacity: 0;
	        transform: translate(20px, -20px) scale(0.5);
	    }
	}

	@keyframes LunarRotation {
	    from {
	        transform: translate(-50%, -50%) rotate(145deg) translateX(400px);
	    }

	    to {
	        transform: translate(-50%, -50%) rotate(505deg) translateX(400px);
	    }
	}

	@keyframes LunarRotation2 {
	    from {
	        transform: translate(-50%, -50%) rotate(30deg) translateX(250px);
	    }

	    to {
	        transform: translate(-50%, -50%) rotate(-330deg) translateX(250px);
	    }
	}

	@keyframes sunbigorsmall {
	    from {
	        transform: translate(-50%, -50%) scale(3);
	    }
	}

	to {
	    transform: translate(-50%, -50%) scale(1);
	}

	@keyframes amplification {
	    0% {
	        opacity: 0;
	        transform: scale(0);
	    }

	    100% {
	        opacity: 1;
	        transform: scale(1);
	    }
	}

	.flip_animation {
	    animation: flip_animation_an .5s linear forwards;
	}

	.big_to_small {
	    animation: big_to_small_an 2s cubic-bezier(-0.02, 1.44, 0.97, 0.58) forwards;
	}

	@keyframes flip_animation_an {
	    0% {
	        opacity: 0;
	        transform: scaleX(-1);
	    }

	    100% {
	        opacity: 1;
	        transform: scaleX(1);
	    }
	}

	@keyframes big_to_small_an {
	    0% {
	        transform: scale(0);
	        opacity: 0;
	    }

	    50% {
	        transform: scale(1.5);
	        opacity: 1;
	    }

	    100% {
	        transform: scale(1);
	    }
	}

	@media screen and (max-width: 1200px) {
	    .div_main {
	        width: 100%;
	    }

	    .first_page_text,
	    .second_content {
	        margin-top: 200px;
	    }

	    .first_content {
	        font-size: 4rem;
	    }

	    .second_content {
	        text-align: center;
	    }

	    .avatar_img {
	        display: none;
	    }

	    .content-container {
	        display: none;
	    }

	    .third_and_four_content {
	        margin-top: 400px;
	    }

	    .main_heading {
	        font-size: 2rem;
	        font-weight: 700;
	    }

	    .contact_information {
	        margin-top: 30px;
	        width: 100%;
	    }

	    .contact_information ul {
	        display: block;
	    }

	    .contact_information ul li {
	        width: 100%;
	        margin: 5px 0px 5px 0px;
	    }
	}

	.Dynamic_effect {
	    background: #1759e7;
	    cursor: pointer;
	    display: block;
	    font-size: 2em;
	    padding: 1em;
	    margin: 0 auto;
	    text-align: center;
	    text-shadow: 0px 1px 2px black;
	    box-shadow: 1px 1px 2px gray;
	    box-sizing: border-box;
	    position: relative;
	    width: 400px;
	}

	.Dynamic_effect a {
	    color: White;
	    text-decoration: none;
	}

	.Dynamic_effect::before,
	.Dynamic_effect::after {
	    color: White;
	    transition: all 1.2s ease;
	    position: absolute;
	    overflow: hidden;
	    background: #1775e0;
	    width: 50%;
	    padding: 1em 0em;
	    top: 0;
	}

	.Dynamic_effect::before {
	    text-align: right;
	    content: '动态';
	    left: 0;
	}

	.Dynamic_effect::after {
	    text-align: left;
	    content: '效果';
	    right: 0;
	}

	.Dynamic_effect:hover::before,
	.Dynamic_effect:hover:hover::after {
	    width: 15%;
	    color: #1775e0;
	}

	.Dynamic_effect2 {
	    background: #000;
	    cursor: pointer;
	    font-size: 2em;
	    padding: .3rem;
	    margin: 10px auto 0 auto;
	    text-align: center;
	    border-radius: 3px;
	    box-shadow: .5px -.5px 4px 2px rgb(49, 224, 224);
	    width: 200px;
	    transition: all 1.5s ease;
	}

	.Dynamic_effect2:hover {
	    background: #e7cb29;
	    color: #000;
	    box-shadow: 0px;
	}

	.Dynamic_effect3 {
	    background: #fff;
	    font-size: 2em;
	    padding: .3rem;
	    overflow: hidden;
	    position: relative;
	    margin: 10px auto;
	    color: #000;
	    border-radius: 3px;
	    width: 200px;
	    height: 100px;
	    outline: #fff solid 1px;
	    transition: all .7s ease-in-out;
	}

	.Dynamic_effect3::after {
	    content: '';
	    width: 0;
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 0px;
	    border-radius: 100px;
	    background-color: #000;
	    opacity: 0;
	    transition: all 1.5s ease;
	}

	.Dynamic_effect3:hover::after {
	    content: '';
	    transform: scale(5);
	    opacity: 1;
	    width: 200px;
	    height: 200px;
	}

	.Dynamic_effect3::before {
	    content: '动态效果3\a[暗色模式]';
	    white-space: pre-line;
	    position: absolute;
	    font-size: 1rem;
	    text-align: center;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    transition: all .5s ease;
	}

	.Dynamic_effect3:hover::before {
	    z-index: 1;
	    color: #fff;
	}

	.Dynamic_effect4 {
	    text-align: center;
	    margin: 20px auto;
	    overflow: hidden;
	    width: 128px;
	    height: 140px;
	}

	.Dynamic_effect4::after {
	    content: '悬停展示文字';
	    text-align: center;
	    display: flex;
	    justify-content: center;
	    opacity: 0;
	    font-size: 1.3rem;
	    margin-top: 10px;
	    transition: all .2s ease-out;
	}

	.Dynamic_effect4:hover::after {
	    content: '悬停展示文字';
	    opacity: 1;
	    margin-top: -18px;
	}

	.Dynamic_effect5 {
	    text-align: center;
	    font-size: 1.5rem;
	    margin: 20px auto;
	    overflow: hidden;
	    width: 300px;
	    height: 150px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    border: 5px solid #fff;
	    border-image: linear-gradient(45deg, #ff0000, #00ff00, #0000ff) 10;
	}

	.Dynamic_effect5:hover {
	    animation: border_an infinite .5s linear;
	}

	@keyframes border_an {
	    0% {
	        filter: hue-rotate(0deg);
	    }

	    100% {
	        filter: hue-rotate(360deg);
	    }
	}

	.Dynamic_effect6 {
	    text-align: center;
	    font-size: 1.5rem;
	    margin: 20px auto;
	    overflow: hidden;
	    width: 300px;
	    height: 150px;
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    z-index: 1;
	    border-radius: 10px;
	}

	.Dynamic_effect6::before {
	    content: '';
	    width: 40px;
	    height: 336px;
	    z-index: -1;
	    background: linear-gradient(#f01bf0, #0eccf7);
	    transform: rotate(0deg);
	    transition: all .4s linear;
	    filter: hue-rotate(0deg);
	}

	.Dynamic_effect6:hover::before {
	    transform: rotate(180deg);
	    filter: hue-rotate(360deg);
	}

	.Dynamic_effect6::after {
	    content: '动态效果6[线性跟随边框走动(流动边框)]';
	    position: absolute;
	    top: 3px;
	    left: 3px;
	    width: 294px;
	    height: 144px;
	    background: #000;
	    display: flex;
	    align-items: center;
	    z-index: 0;
	    border-radius: 10px;
	}

	.Dynamic_effect7 {
	    text-align: center;
	    font-size: 1.5rem;
	    margin: 20px auto;
	    overflow: hidden;
	    width: 300px;
	    height: 150px;
	    position: relative;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    z-index: 1;
	    border-radius: 10px;
	}

	.Dynamic_effect7 div {
	    width: 15px;
	    height: 15px;
	    margin: 10px;
	    border-radius: 8px;
	    opacity: 0.8;
	    background: #fff;
	    animation: ball_an1 infinite 3s ease-out;
	}

	.Dynamic_effect7 div:nth-child(1) {
	    animation-delay: -1s;
	}

	.Dynamic_effect7 div:nth-child(2) {
	    animation-delay: -.8s;
	}

	.Dynamic_effect7 div:nth-child(3) {
	    animation-delay: -.6s;
	}

	.Dynamic_effect7 div:nth-child(4) {
	    animation-delay: -.4s;
	}

	.Dynamic_effect7 div:nth-child(5) {
	    animation-delay: -.2s;
	}

	.Dynamic_effect7 div:nth-child(6) {
	    animation-delay: 0s;
	}

	@keyframes ball_an1 {

	    0%,
	    100% {
	        transform: scale(1);
	        opacity: 0.8;

	    }

	    50% {
	        transform: scale(1.5);
	        opacity: 1;
	    }
	}