body{ background-color: #EFEFEF;color:black; margin:0;}
a{text-decoration: none;color:black;}
*{margin:0;padding:0;}
ul,ol {text-decoration: none;list-style:none;}
[data-x] { transform: translateY(200px); opacity: 0;transition: all 0.8s;}
[data-x].onset,.topNavBar.onset {    transform:translateY(0);    opacity: 1;}
.clearfix::after{ content:''; display: block;clear: both;}
.icon {   width: 1em; height: 1em;  vertical-align: -0.15em;   fill: currentColor;  overflow: hidden;}


.topNavBar .logo .rs{font-size:32px;color:#E8676B; font-family:Aharoni;margin-right:4px;}
.topNavBar .logo .card{font-size:28px;color:#9A9DA2;font-family:Aharoni;}
.topNavBar {padding:34px 0px 34px 0px;width:100%; position:fixed;left:0; top:0;  transition:all 0.3s; color:#C2C4C7;
    transform: translateY(-200px);  opacity: 0;transition: all 0.5s; }
.topNavBar nav>ul>li{position:relative; float: left;list-style: none; margin-top:3px; margin-bottom:3px;margin-left:17px;margin-right:17px;padding-bottom:12px;}
.topNavBar nav>ul>li>a{position:relative;color:inherit;font-size:15px; font-weight:bold;padding-bottom:9px;}
.topNavBar .submenu li:hover{
    color:#E8676B;
}
.topNavBar nav>ul>li .submenu{display:none; position:absolute; right:0; top:79%; white-space:nowrap; padding:13px 15px 7px 15px;background:white;box-shadow: 0 0 10px  rgba(0,0,0,0.25);}
.topNavBar nav>ul>li .submenu>li {padding-bottom:6px;color:#3F4653;}
.topNavBar nav>ul .menuTrigger.active> .submenu {display:block; animation:submenuSlide 0.2s linear; cursor:pointer; }
@keyframes submenuSlide{ 0% { margin-right:100%;  opacity: 0; } 100% {    margin-right:0; opacity: 1;  } }
.topNavBar nav>ul .menuTrigger.active>a::after,
.topNavBar nav>ul .menuTrigger.highlight>a::after {content:'';position: absolute;left:0;top:100%;height:3px;background-color: #E8676B; animation:NavSlide 0.2s linear;width:100%;}
@keyframes NavSlide{0% {width:0;}100% {width:100%;}}
.topNavBar nav>ul{ margin:0;padding:0;}
.topNavBar a{float:left; color: inherit; }
.topNavBar nav{  float:right;}
.banner {height:515px;background-position:center center;background-size:cover;}
.banner .mask {height:515px;background-color:rgba(0,0,0,0.8);}
.topNavBar-inner {margin:0px 193px;}
.topNavBar.active{ background: white; padding:17px 0px 0px 0px; box-shadow: 0 0 10px 5px rgba(0,0,0,0.25); color: #3d4451; z-index: 1;}





.userCard {max-width:930px; margin-left:auto;margin-right:auto;background-color:#FFFFFF;margin-top:-350px;box-shadow: 0px 5px 29px -8px rgba(0,0,0,0.75);}
.userCard .pictureAndText {padding:60px 50px 45px 50px;}
.userCard .picture {float:left;margin-right:65px;}
.userCard .text {float:left;width:490px;}
.userCard .media {background-color:#E8676B ;text-align: center;height:74px;}
.userCard .pictureAndText .text .welcome {position:relative;font-weight: bold;color:white;background-color:#E8676B;font-size:14px;display:inline-block;line-height: 30px;
    padding:0px 12px;}
.userCard .pictureAndText .text .welcome .triangle { position:absolute; display:inline-block; border-color:transparent; border-width:10px; border-style:solid; left:4px; top:100%;
    border-top-width:0px; border-left-color: #E8676B;}
.userCard .pictureAndText .text h1 { margin-top:27px;}
.userCard .pictureAndText .text h2{  margin-top:13px;}
.userCard .pictureAndText .text hr{ margin-top:24px; height:0; border:none; border-top:1px solid #DEDEDE;}
.userCard .pictureAndText .text dt { clear:both; float:left; width:30%; font-weight: bold; margin-bottom:15px;}
.userCard .pictureAndText .text dd { float:right; width:70%; color:#AAA0A7; margin-bottom:15px;}
.userCard .pictureAndText .text dl { margin-top:30px;}
.userCard .media a { display:inline-block; margin:17px 32px; border-radius: 50%; width:40px; line-height:26px; padding:7px 0;}
.userCard .media a:hover { background-color:#CF5D5F;}
.userCard svg {  width:26px;  height:26px;  fill:white;  vertical-align:top;}



main .downloadResume {  border:1px solid #CDCFD1; border-radius:3px; padding:25px 58px; display: inline-block; font-size:15px; font-weight:bold;
    line-height:16px; transition: box-shadow 0.2s; background: #EFEFEF;}
main .downloadResumeWrapper { text-align: center; margin:35px 0;}
main .downloadResume:hover { box-shadow: 0px 5px 19px -6px rgba(0,0,0,0.75);}
main .selfIntroduce { max-width:930px; margin-left:auto; margin-right:auto; text-align: center; line-height:40px; font-size:25px; font-family:华文行楷; color:#7A7A7A;}



section.skills ,
section.portfolio { max-width:930px; margin-left:auto; margin-right:auto;}
section.skills h3 { font-size:13px; color:#3F4653; margin-bottom:8px;}
section.skills h2,
section.portfolio h2,
section.message { text-align: center; margin-top:67px; margin-bottom:29px; font-size:30px; color:#3D4451;}
section.skills>ol li { float:left; width:47%; padding-bottom:34px;}
section.skills>ol li:nth-child(even) { float:right;}
section.skills ol li .progressBar{ height:5px; background: #FAE1E1; border-radius: 3px; overflow: hidden;}
section.skills ol li .progress { height:100%; background: #E8676B; width:50%; border-radius: 3px; transform: translate(-100%); transition: all 1s;}
section.skills.onset>ol .progress { transform: translate(0);}
section.skills ol {  padding:39px 50px 17px 50px;  background:white;  box-shadow: 0px 5px 29px -8px rgba(0,0,0,0.75);}
section.portfolio .swiper-container { width: 888px;   height: 666px;    border-radius: 5px;   box-shadow: 0px 5px 29px -8px rgba(0,0,0,0.75);    margin-bottom:100px;}
section .swiper-button-prev,
section .swiper-button-next{    outline:none;   background-color:white;    box-shadow: 0px 5px 29px -8px rgba(0,0,0,0.75);    width:78px;
    height:78px;    border-radius:50%;    right:100%;    left:auto;}
section .swiper-button-next{    left:100%;    right:auto;}
section.portfolio .swiper-container img{height:666px; align-items: center;}
section.message{   margin-bottom:150px;    }
section.message form{    text-align: left;    font-size:24px;    width:930px;    margin:20px auto;
    /* padding:15px;
    border:3px solid #3D4451;
    border-radius: 9px;
    box-shadow: 0px 0px 8px -4px rgba(0,0,0,0.75);  */}
section.message label{    margin-right:30px;}
section.message ol {    display: inline-block;    width:930px;text-align: left;    margin:20px auto;    font-size: 24px;    border-top:3px solid #ddd;    border-radius:9px;}
section.message li {    padding:15px;    border-bottom:3px solid #ddd;    border-right:3px solid #ddd;    border-left:3px solid #ddd;
    word-wrap:break-word; /*连续的数字或者英文就会不换行 得使用强制换行*/
	word-break:break-all;  /*连续的数字或者英文就会不换行 得使用强制换行*/
    border-radius:9px;    box-shadow: 0px 0px 8px -4px rgba(0,0,0,0.75); }
section.message input[name="name"]{    vertical-align:center;    margin-bottom:20px;    line-height: 25px;   border-radius: 5px;    box-shadow: inset 0px 0px 33px -16px rgba(0,0,0,0.75);}
section.message textarea[name="content"] {      border-radius: 5px;   box-shadow: inset 0px 0px 37px -16px rgba(0,0,0,0.75); resize:none; margin-left:5px;    width:791px;    height:300px;    font-size:24px;    vertical-align: top;    font-family: "黑体";}
section.message input[value="留言提交"]{       border-radius: 8px; background: linear-gradient(180deg, rgba(62,172,234,1) 0%, rgba(0,128,210,1) 100%);   border:rgba(0,128,210,1) 1px solid; color:white;    width:100px;    height:2em;     cursor: pointer;    outline:none;    margin-top:15px;    margin-left:106px;    font-size: 17px;font-family: "华文中宋";}
section.message input[value="留言提交"]:hover{    background: linear-gradient(180deg, #2D8DD3 0%, #0452B8 100%); border:#0452B8 1px solid;}
.spanTagName{
    color:Red;
}
.spanTagContent{
    white-space: pre;
}