@charset "UTF-8";
/*窗口宽度≥1680px*/
@media screen and (min-width: 1680px) {
  .home .home-content {
    padding-top: 5% !important;
    width: 1200px !important;
  }
  .home .home-content-left .home-hi {
    font-size: 95px;
  }
  .home .home-content-left .home-welcome {
    font-size: 20px !important;
    line-height: 48px !important;
  }
  .home .home-content-left .home-name {
    font-size: 14px !important;
  }
  .home .home-content-left .home-desc {
    font-size: 38px !important;
  }
  .home .home-content-right #my {
    width: 450px !important;
  }
  .show-content {
    padding-top: 5%;
  }
  .show-content-left h1 {
    font-size: 30px !important;
  }
  .show-content-left h2 {
    font-size: 20px !important;
  }
  .show-content-left p {
    font-size: 16px !important;
    line-height: 34px !important;
    padding-right: 40px;
  }
  .show-content-left-button a {
    padding: 0 30px !important;
    line-height: 54px !important;
    font-size: 16px;
  }
  .show-content-right img {
    width: 125% !important;
    margin: 22% auto 0 !important;
  }
  .about-content {
    padding-top: 9% !important;
  }
  .about-content-title > div h3 {
    font-size: 17px !important;
  }
  .about-content-title > div h4 {
    font-size: 20px !important;
  }
  .about-content-title > span {
    font-size: 24px !important;
  }
  .about-content-text {
    font-size: 17px !important;
    line-height: 40px !important;
  }
  .other-content {
    padding-top: 9% !important;
  }
}
/*宽度介于 1440px 和 1679px 之间*/
@media screen and (max-width: 1679px) and (min-width: 1440px) {
  .show-content-left {
    padding-top: 17% !important;
  }
  .show-content-left h1 {
    font-size: 24px !important;
  }
  .show-content-left h2 {
    font-size: 16px !important;
  }
  .show-content-left p {
    font-size: 14px !important;
    line-height: 30px !important;
    padding-right: 40px;
  }
  .show-content-left-button a {
    padding: 0 28px !important;
    line-height: 48px !important;
    font-size: 14px;
  }
  .show-content-right img {
    width: 120% !important;
    margin: 25% auto 0 !important;
  }
  .about-content-title > div h3 {
    font-size: 14px !important;
  }
  .about-content-title > div h4 {
    font-size: 18px !important;
  }
  .about-content-title span {
    font-size: 20px !important;
  }
  .about-content-text {
    font-size: 14px !important;
    line-height: 32px !important;
  }
}
/*窗口宽度≥1440px*/
@media screen and (min-width: 1440px) {
  .home .bg-yellow {
    width: 1732px !important;
    height: 1444px !important;
    top: -600px !important;
    left: -400px !important;
  }
  .home .bg-green {
    width: 1819px !important;
    height: 1506px !important;
    top: 60px !important;
    left: -400px !important;
  }
  .home .bg-purple {
    width: 1819px !important;
    height: 1506px !important;
    top: -750px !important;
    left: 100px !important;
  }
  .home .bg-yellow-right {
    top: 300px !important;
    left: 800px !important;
  }
  .home .home-content {
    width: 1024px !important;
  }
  .home .home-content-left {
    margin-top: 200px !important;
  }
  .home .home-content-left .home-hi {
    font-size: 90px;
  }
  .home .home-content-left .home-welcome {
    font-size: 18px !important;
    line-height: 44px !important;
  }
  .home .home-content-left .home-name {
    font-size: 16px;
  }
  .home .home-content-left .home-desc {
    font-size: 30px !important;
  }
  .home .home-content-left .home-btn {
    margin-top: 80px !important;
  }
  .home .home-content-right {
    margin-top: 200px !important;
  }
  .home .home-content-right #my {
    width: 430px !important;
  }
  .home .home-content-right .skill .iconfont {
    width: 24px !important;
  }
  .home .home-content-right .skill-title {
    font-size: 16px !important;
  }
  .home .home-content-right .skill-content {
    font-size: 14px !important;
    padding-left: 32px !important;
  }
  .home .home-content-right .skill-float {
    top: 72px !important;
  }
  .home .home-content-right .skill-float h4 {
    font-size: 18px !important;
  }
  .home .home-content-right .skill-float p {
    font-size: 14px !important;
    line-height: 26px !important;
  }
  header {
    padding: 30px 5% !important;
  }
  header #menu li {
    font-size: 16px !important;
  }
  header #menu li a {
    padding: 18px 35px !important;
  }
  header #toggle-sidebar {
    font-size: 30px;
  }
  .show .bg-green {
    top: 250px !important;
    left: -300px !important;
  }
  .show-content {
    width: 1200px !important;
    margin: 0 auto;
  }
  .show-content-left {
    padding-left: 0 !important;
    padding-top: 12% !important;
    width: 40% !important;
  }
  .about .bg-green {
    top: 140px !important;
    left: 950px !important;
  }
  .about-content {
    width: 1200px !important;
  }
  .other-content {
    width: 1200px !important;
  }
  .other-content-email {
    padding-bottom: 100px !important;
  }
  .other-content-footer .logo {
    width: 120px !important;
  }
  .other-content-footer .text1,
  .other-content-footer .text2 {
    font-size: 14px !important;
  }
  .other-content-footer .link .span {
    font-size: 30px !important;
  }
}
/*宽度介于 1280px 和 1439px 之间*/
@media screen and (max-width: 1439px) and (min-width: 1280px) {
  #my {
    width: 370px !important;
  }
}
@media screen and (max-width: 1280px) and (min-width: 900px) {
  .other-content {
    padding-bottom: 60px;
  }
  .other-content-email {
    padding-bottom: 24px !important;
  }
  .other-content-email .title {
    padding-top: 20px !important;
  }
  .other-content-email .title span {
    top: 32px !important;
  }
  .other-content-email .title p {
    top: 70px !important;
  }
  .other-content-email .input {
    width: 60% !important;
    padding-top: 55px !important;
  }
  .other-content-footer {
    padding: 20px 0 !important;
  }
  .other-content-footer .logo {
    width: 60px;
  }
  #count {
    font-size: 16px !important;
  }
}
/*宽度介于 769px 和 1280px 之间*/
@media screen and (max-width: 1280px) and (min-width: 769px) {
  .skill #skill-1,
  .skill #skill-4 {
    left: auto;
    right: 0;
  }
}
/*宽度介于 1025px 和 1279px 之间*/
@media screen and (max-width: 1279px) and (min-width: 1025px) {
  .home .bg-yellow {
    left: -200px !important;
  }
  .home .bg-green {
    left: -100px !important;
  }
  .home .bg-yellow-right {
    left: 700px !important;
  }
  .home .home-content {
    padding-top: 70px;
  }
  .show-content-left {
    padding-top: 17% !important;
  }
  .show-content-right img {
    margin: 45% auto 0 !important;
  }
}
/*详情页窗口宽度≤1024px*/
@media screen and (max-width: 1024px) {
  #sidebar {
    overflow-y: scroll;
  }
}
/*宽度介于 901px 和 1024px 之间*/
@media screen and (max-width: 1024px) and (min-width: 901px) {
  .home .home-content {
    width: 100% !important;
    overflow: hidden;
    padding: 50px 11% 50px;
  }
  .home .home-content-left {
    margin-top: 120px !important;
  }
  .home .home-content-right {
    margin-top: 98px !important;
  }
  .show-content-left {
    padding-top: 17% !important;
  }
  .show-content-left-button {
    padding-top: 40px !important;
  }
  .show-content-left-button a {
    padding: 0 10px !important;
  }
  .show-content-right img {
    margin: 40% auto 0 !important;
  }
}
/*窗口宽度>900px*/
@media screen and (min-width: 901px) {
  #sidebar {
    width: 50% !important;
  }
  [data-sidebar-open='false'] {
    right: -50% !important;
  }
}
/*窗口宽度≤900px*/
@media screen and (max-width: 900px) {
  #fullpage {
    overflow: hidden;
  }
  header #menu {
    display: none !important;
  }
  footer {
    display: flex;
  }
  .other-content {
    padding-bottom: 60px;
  }
  #count {
    font-size: 14px !important;
  }
}
/*宽度介于 769px 和 900px 之间*/
@media screen and (max-width: 900px) and (min-width: 769px) {
  #sidebar {
    width: 65% !important;
  }
  #sidebar .sidebar-main {
    padding: 30px 22px 0 !important;
  }
  [data-sidebar-open='false'] {
    right: -65% !important;
  }
  .home .bg-yellow,
  .home .bg-purple {
    width: 756px !important;
    height: 561px !important;
  }
  .home .bg-green {
    width: 884px !important;
    height: 688px !important;
    top: 120px !important;
    left: -100px !important;
  }
  .home .bg-yellow {
    top: -200px !important;
    left: -160px !important;
  }
  .home .bg-purple {
    top: -250px !important;
    left: 200px !important;
  }
  .home .bg-yellow-right {
    display: none;
  }
  .home .home-content {
    width: 100% !important;
    overflow: hidden;
    padding: 0 11% 50px;
  }
  .home .home-content-left {
    margin-top: 180px !important;
  }
  .home .home-content-left .home-btn {
    margin-top: 35px !important;
  }
  .home .home-content-right #my {
    width: 310px !important;
  }
  .show .bg-green {
    display: none;
  }
  .show-content {
    overflow: hidden;
    padding-bottom: 80px;
  }
  .show-content-left {
    width: 45% !important;
    padding-top: 7% !important;
    padding-left: 11% !important;
  }
  .show-content-left-button {
    padding-top: 40px !important;
  }
  .show-content-left-button a {
    padding: 0 10px !important;
  }
  .section-title {
    display: block !important;
  }
  .about .bg-green {
    top: 60px !important;
    left: 500px !important;
  }
  .about-content {
    width: 78% !important;
    margin-top: 35px !important;
    padding: 0 0 30px !important;
  }
  .other-content {
    width: 78% !important;
    padding-top: 30px !important;
  }
}
/*窗口宽度≤768px*/
@media screen and (max-width: 768px) {
  #sidebar {
    width: 80% !important;
  }
  [data-sidebar-open='false'] {
    right: -80% !important;
  }
  .home .bg-yellow,
  .home .bg-green,
  .home .bg-purple {
    width: 1000px !important;
    height: 850px !important;
  }
  .home .bg-yellow {
    top: -150px !important;
    left: -340px !important;
  }
  .home .bg-purple {
    top: -200px !important;
    left: 140px !important;
    opacity: 0.3 !important;
  }
  .home .bg-green {
    top: 40px !important;
    left: -130px !important;
    opacity: 0.3 !important;
  }
  .home .bg-yellow-right {
    display: none;
  }
  .home .home-content {
    width: 100% !important;
    padding: 115px 4% 20px;
    position: relative;
    overflow: hidden;
  }
  .home .home-content-left {
    width: 100% !important;
    margin-top: 0 !important;
    float: none !important;
    display: block;
  }
  .home .home-content-left .home-hi {
    display: none;
  }
  .home .home-content-left .home-welcome {
    letter-spacing: 2px !important;
    line-height: 26px !important;
    display: block;
  }
  .home .home-content-left .home-welcome br {
    display: none;
  }
  .home .home-content-left .home-line {
    margin: 15px 0 !important;
  }
  .home .home-content-left .home-name {
    font-size: 14px !important;
    display: block;
  }
  .home .home-content-left .home-desc {
    font-size: 28px !important;
    display: block;
  }
  .home .home-content-left .home-btn {
    margin: 30px 0 40px !important;
  }
  .home .home-content-right {
    margin-top: 20px !important;
    width: 100%;
    float: none !important;
    position: static !important;
    -moz-column-count: 2;
    /* Firefox */
    -webkit-column-count: 2;
    /* Safari 和 Chrome */
    column-count: 2;
    -moz-column-gap: 3%;
    -webkit-column-gap: 3%;
    column-gap: 3%;
  }
  .home .home-content-right #my {
    display: none;
  }
  .home .home-content-right .skill {
    position: static !important;
    margin-bottom: 12px;
    padding: 8px 3% !important;
    box-shadow: 0 3px 8px 2px rgba(0, 0, 0, 0.05), inset 0 2px 0 0 #ffffff !important;
    background: rgba(255, 255, 255, 0.8) !important;
    -moz-page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }
  .home .home-content-right .skill br {
    display: none;
  }
  .home .home-content-right .skill-title {
    padding-top: 8px !important;
  }
  .home .home-content-right .skill-content {
    padding-top: 10px;
    padding-left: 4px !important;
  }
  .home .home-content-right .skill-float {
    display: block !important;
    position: static !important;
    background: rgba(255, 255, 255, 0) !important;
    box-shadow: none !important;
    padding: 38px 20px 10px 27px !important;
    width: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .home .home-content-right .skill-float h4 {
    display: none;
  }
  .show .bg-green {
    display: none;
  }
  .show-content-left {
    width: 92% !important;
    padding: 20px 0 0 !important;
    margin: 0 auto;
    float: none !important;
  }
  .show-content-left-button {
    padding: 20px 0 20px !important;
    position: absolute;
    bottom: 40px;
    text-align: center;
    width: 92vw !important;
    z-index: 5;
  }
  .show-content-left-button a {
    display: inline;
    float: none;
    padding: 12px 20px;
  }
  .show-content-right {
    width: 92% !important;
    margin: 10px auto 0;
    float: none !important;
    padding: 0 0 120px !important;
    overflow: hidden;
    text-align: center;
    height: auto;
  }
  .show-content-right img {
    margin: 10px auto 0 !important;
    padding-top: 10px;
    background: rgba(43, 44, 46, 0.03);
    border-radius: 8px;
  }
  .section-title {
    display: block !important;
    margin: 10px 0 !important;
  }
  .section-title h3 {
    color: rgba(43, 44, 46, 0.8) !important;
    font-size: 32px !important;
  }
  .section-title p,
  .section-title span {
    display: none !important;
  }
  .about .bg-green {
    top: 60px !important;
    left: 150px !important;
    opacity: 0.2 !important;
  }
  .about-content {
    width: 92% !important;
    margin-top: 35px !important;
    padding: 0 0 30px !important;
  }
  .other-content {
    width: 92% !important;
    padding-top: 30px !important;
  }
  .other-content .input {
    width: 65% !important;
  }
}
/*窗口宽度≥450px*/
/*窗口宽度≤450px*/
@media screen and (max-width: 450px) {
  .home .bg-yellow,
  .home .bg-green,
  .home .bg-purple {
    width: 600px !important;
    height: 500px !important;
  }
  .home .bg-yellow {
    top: -150px !important;
    left: -300px !important;
  }
  .home .bg-purple {
    top: -150px !important;
    left: -40px !important;
    opacity: 0.3 !important;
  }
  .home .bg-green {
    top: 120px !important;
    left: -150px !important;
    opacity: 0.3 !important;
  }
  .home .home-content-right {
    -moz-column-count: 1;
    /* Firefox */
    -webkit-column-count: 1;
    /* Safari 和 Chrome */
    column-count: 1;
  }
  .home .home-content-right .skill {
    width: 100%;
    height: auto;
    margin-bottom: 8px;
  }
  .sidebar-main {
    padding: 30px 22px 0 !important;
  }
  .about .bg-green {
    top: 60px !important;
    left: 80px !important;
    opacity: 0.2 !important;
  }
  .about-content-title span {
    display: none;
  }
}
/*窗口宽度≤360px*/
@media screen and (max-width: 360px) {
  header {
    padding: 20px 20px !important;
  }
  header > a:first-child > img {
    height: 42px !important;
  }
  header #toggle-sidebar {
    font-size: 16px !important;
  }
  .home .home-content {
    padding: 90px 4% 20px !important;
  }
  footer #menu {
    gap: 8px !important;
  }
  footer #menu li a {
    padding: 6px 10px !important;
  }
}

/* 基础断点 */
@media (max-width: 1440px) {
  .home-content {
    width: 90%;
    max-width: 1200px;
  }
}

/* 平板设备 */
@media (max-width: 1024px) {
  .home-content {
    flex-direction: column;
    padding: 80px 5%;
  }
  
  .home-content-left,
  .home-content-right {
    width: 100%;
  }
  
  .skill {
    position: relative !important;
    margin-bottom: 20px;
  }
}

/* 移动设备 */
@media (max-width: 768px) {
  header {
    padding: 20px;
  }
  
  .home-content-left .home-hi {
    font-size: 60px;
  }
  
  .home-content-right #my {
    width: 100%;
    max-width: 300px;
  }
  
  .show-content {
    flex-direction: column;
  }
}