@font-face {
    font-family: 'Montserrat-ExtraBold';
    src: url('../font/Montserrat-ExtraBold.eot') format('embedded-opentype'), url('../font/Montserrat-ExtraBold.woff') format('woff'), url('../font/Montserrat-ExtraBold.ttf') format('truetype'), url('../font/Montserrat-ExtraBold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 使页面滚动顺滑，很重要！！！！！！ */
html,
body {
    scroll-behavior: smooth;
}


body {
    margin: 0;
    font-family: "SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    font-smoothing: antialiased;


    font-weight: 900;


    background-color: white;
}


.header {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;

    z-index: 2;
}


.header_logo {
    font-family: "Montserrat-ExtraBold","SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 30px;
    line-height: 60px;
    color: black;
    text-decoration: none;

    margin-left: 40px;
}



.header_right {
    font-family: "Montserrat-ExtraBold","SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    display: inline;
    position: absolute;
    right: 40px;
}

.header_link {
    font-size: 16px;
    line-height: 60px;
    color: black;
    text-decoration: none;

    margin-left: 44px;

    /* 链接悬浮时下面的横条定位用 */
    position: relative;
}




.header_link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0px;
    height: 2px;
    background: black;

    transition: .6s;
}


.header_link_active:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: black;
}


.header_link:hover:after {
    width: 100%;
    transition: .6s;
}


/* article / design / code / others */
.article_tab {
    width: calc(100% - 264px);
    height: 80px;
    /* padding-left: 40px;
    padding-right: 40px; */
    margin-top: 140px;
    margin-bottom: 64px;
    margin-left: 132px;
    max-width: 1402px;

    /* background-color: white; */

    /* border-bottom: 1px solid #E6E6E6; */

}


.article_article {
    font-family: "Montserrat-ExtraBold","SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 80px;
    line-height: 80px;
    color: black;

    display: inline-block;
}


.article_all_tabs {
    display: inline;
    margin-left: 80px;

}


.article_all_tabs_a {
    font-family: "Montserrat-ExtraBold","SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    text-decoration: none;
    margin-right: 48px;

    color: black;
    font-size: 18px;
    line-height: 18px;

    position: relative;
    cursor: pointer;
}



.article_all_tabs_a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0px;
    height: 2px;
    background: black;

    transition: .6s;
}




.article_all_tabs_a_active:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background: black;
}




.article_all_tabs_a:hover:after {
    width: 100%;
    transition: .6s;
}



/* 文章列表 */

.article_container {
    background-color: black;
    width: calc(100% - 264px);
    /* 减号两侧要各留一个空格 */
    margin: 0 auto;
}


.article {
    width: calc(33.333% - 30px);
    margin-right: 30px;
    margin-bottom: 64px;
    /* min-width:360px; */

    cursor: pointer;

    float: left;
}


.article_box {
    width: 100%;
    height: auto;
    overflow: hidden;
    max-width: 1680px;
}


.article_wrap {
    overflow: hidden;
    margin-right: -30px;

}


.article_img {
    display: block;
    position: relative;

    /* 使其比例为1:1 */
    height: 0;
    width: 100%;
    padding-bottom: 56%;


    overflow: hidden;
    background-color: #EFEFEF;

}


.article_img img {
    display: block;
    width: 100%;

}


/* 图片上覆盖一层暗调遮罩,默认不显示 */
.article_img:after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
    transition: opacity .3s ease;
    opacity: 0;
}

.article:hover .article_img:after {
    opacity: 1;
}



.article_card {
    will-change: transform;
    /* 提前通知浏览器要对元素做什么动画，使其提前准备合适的优化设置，使动画流畅不闪屏 */
    box-shadow: 0 10px 30px transparent;
    /* 初始阴影为空 */
    transition: box-shadow .3s ease;

}


/* 确保缩放过程中不会出现article空白格 */
.article_detail {
    height: 64px;
}


.article_title {
    font-size: 22px;
    line-height: 30px;
    color: black;
    font-weight: 900;
    margin-top: 14px;
    margin-bottom: 0px;

    /* 最多显示两行 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}



.project_title {
    margin-bottom: 0;

    transition: .4s ease;
    opacity: 0;
    -webkit-transform: translateY(40px) scale(0);
    -ms-transform: translateY(40px) scale(0);
    transform: translateY(40px) scale(0);
    will-change: transform;


    font-size: 36px;
    color: white;

    text-decoration: none;
    line-height: 1;
}



/* 汉堡菜单 */
.hamberger_container {
    width: 22px;
    height: 60px;
    background-color: transparent;
    opacity: 0;


    position: absolute;
    top: 0;
    right: 0;

    cursor: pointer;
    z-index: -1;
}


@media screen and (max-width:801px) {

    .header_link {
        visibility: hidden;
        opacity: 0;
        transition: .1s;
        -webkit-user-select: none;
        -webkit-user-drag: none;
        display: none;
    }


    .hamberger_container {
        opacity: 1;
        z-index: auto;
        transition: .1s;

    }


}


.hamburger {
    padding: 16px 0px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, -webkit-filter;
    transition-property: opacity, filter;
    transition-property: opacity, filter, -webkit-filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;

    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;

    position: absolute;
    left: 0;
}

.hamburger:hover {
    opacity: 1;
}

.hamburger-box {
    width: 22px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}


.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 22px;
    height: 3px;
    background-color: #000;
    border-radius: 0px;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}


.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -9px;
    /*       width:75%; */
}

.hamburger-inner::after {
    bottom: -10px;
    width: 70%;
    right: 0;
}


/* Collapse Reverse */
.hamburger--collapse-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.15s;
    transition-delay: 0.15s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r .hamburger-inner::after {
    top: -18px;
    transition: top 0.3s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: top 0.12s 0.3s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}


.hamburger--collapse-r.is-active .hamburger-inner {
    -webkit-transform: translate3d(0, -10px, 0) rotate(45deg);
    transform: translate3d(0, -10px, 0) rotate(45deg);
    transition-delay: 0.32s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.3s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.27s linear;
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: top 0.12s 0.18s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s 0.42s cubic-bezier(0.215, 0.61, 0.355, 1);
}




/* 点击汉堡按钮后出现的内容 */
.header_black_menu_mask {
    widows: 1px;
    height: 100%;
    border-radius: 0px;
    background-color: white;
    /* opacity: .8; */

    position: fixed;
    right: 0;
    top: 0;
    z-index: 1;

    overflow: hidden;
}


.header_hambburger_menu_container {
    position: absolute;
    width: 100%;
    margin-top: 132px;


}


.header_hamburger_menu {
    display: block;
    text-align: left;
    font-family: "Montserrat-ExtraBold","SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 52px;
    line-height: 52px;
    margin-bottom: 44px;
    /* margin-left: 135px; */
    margin-left: 295px;
    margin-right: auto;


    text-decoration: none;
    color: #B3B3B3;

    transition: .3s;
}


.header_hamburger_menu:hover {
    color: black;
    transition: .3s;
}


.header_hamburger_menu_active {
    color: black;
    transition: .3s;
}

/* 汉堡图标点击之后出现菜单底部的链接和版权声明 */
.header_hamburger_bottom_container {
    position: absolute;
    bottom: 40px;

    overflow: hidden;
}



.header_hamburger_bottom {
    font-family: "Montserrat-ExtraBold","SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 12px;
    line-height: 12px;
    margin-top: 10px;
    color: #B3B3B3;

    /* margin-left: 135px; */
    margin-left: 295px;

    white-space: nowrap;
    /* 文本不换行 */

}


.header_hamburger_link {
    color: #B3B3B3;
}

.header_hamburger_link:hover {
    color: black;
    transition: .3s;
}



.tabs_article_container{
    max-width: 1665px;
    margin: 0 auto;
}


/* wechat dribbble uplabs instagram */
.social_icon_container {
    width: 492px;
    margin: 120px auto 0 auto;
    position: relative;
  }
  
  
  .social_icon_wrap {
    overflow: hidden;
    margin-right: -64px;
  }
  
  .social_icon_a {
    float: left;
    margin-right: 84px;
    cursor: pointer;
    background-color: black;
    border-radius: 50%;
  }
  
  .social_icon_img {
    width: 60px;
    -webkit-user-drag: none;
    user-select: none;
  }
  
  
  
  /* social_icon hover状态*/
  #social_icon_wechat:hover {
    background-color: #5ECC71;
    transition: .2s;
  }
  
  #social_icon_dribbble:hover {
    background-color: #D9588A;
    transition: .2s;
  }
  
  
  #social_icon_uplabs:hover {
    background: -webkit-linear-gradient(left, #5B32CA, #3F6EEE);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #5B32CA, #3F6EEE);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #5B32CA, #3F6EEE);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #5B32CA, #3F6EEE);
    /* 标准的语法 */
  
    transition: .2s;
  }
  
  
  #social_icon_instagram:hover {
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    transition: .2s;
  }
  
  #social_icon_email:hover {
    background-color: pink;
    transition: .2s;
  }



  /* blog详情页底部内容 */
.detail_page_bottom {
    width: 100%;
    height: 132px;
  
    text-align: center;
    margin-top: 80px;
  }
  
  .all_articles {
    font-family: "Montserrat-ExtraBold", "SF UI Text", Helvetica, Arial, "PingFang SC", "Source Han Sans SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 36px;
    font-weight: 900;
    line-height: 132px;
    color: black;
    text-decoration: none;
  
    margin: 0 auto;
  
    /* 鼠标悬浮时下面出现的长条定位用 */
    position: relative;
  
  
  }
  
  
  .all_articles:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 4px;
    background: black;
  
    transition: .6s;
  
  }
  
  
  .all_articles:hover:after {
    width: 100%;
    transition: .6s;
  }
  
  
  .copyright {
    font-size: 14px;
    line-height: 132px;
    color: #B3B3B3;
  
    float: left;
    margin-left: 40px;
    font-weight: 600;
  
  }
  
  .find_me_on_github {
    font-size: 14px;
    line-height: 132px;
    color: #B3B3B3;
  
    float: right;
    margin-right: 40px;
    font-weight: 600;
  
  }
  
  .find_me_on_github a {
    color: #B3B3B3;
  }
  
  .find_me_on_github a:hover {
    color: black;
    transition: .3s;
  }

  

  /* 底部copyright */
@media screen and (max-width: 1001px) and (min-width:769px) {

    .detail_page_bottom {
      width: 100%;
      height: 96px;
      text-align: center;
      margin-top: 304px;
    }
  
    .copyright {
      line-height: 14px;
      display: block;
      float: none;
      margin-left: 0;
    }
  
  
    .all_articles {
      font-size: 36px;
      line-height: 36px;
      text-decoration: none;
      margin: 0 auto;
      position: relative;
      display: block;
      margin-top: -110px;
    }
  
    .find_me_on_github {
      line-height: 14px;
      float: none;
      margin-right: 0;
      display: block;
      margin-top: 92px;
    }
  
    .all_articles:after {
      height: 0px;
    }
  
  }
  
  /* 底部copyright */
  @media screen and (max-width: 769px) {
  
    .detail_page_bottom {
      width: 100%;
      height: 96px;
      text-align: center;
      margin-top: 304px;
    }
  
    .copyright {
      line-height: 14px;
      display: block;
      float: none;
      margin-left: 0;
    }
  
  
    .all_articles {
      font-size: 28px;
      line-height: 36px;
      text-decoration: none;
      margin: 0 auto;
      position: relative;
      display: block;
      margin-top: -110px;
    }
  
    .find_me_on_github {
      line-height: 14px;
      float: none;
      margin-right: 0;
      display: block;
      margin-top: 92px;
    }
  
    .all_articles:after {
      height: 0px;
    }
  
  }
  
  
  /* 页面宽度缩小到689时，底部social_icon距离变小 */
  @media screen and (max-width:689px) and (min-width:415px) {
    .social_icon_a {
      margin-right: 9vw;
    }
  
    .social_icon_img {
      width: 9vw;
    }
  
  
    .social_icon_wrap {
      margin-right: -9vw;
    }
  
  
    .social_icon_container {
      width: 63vw;
    }
  
  }
  
  
  /* 页面宽度小于415px时底部copyright */
  @media screen and (max-width: 415px) {
    /* 底部内容 */
    .social_icon_container {
      width: 280px;
      margin: 80px auto 0 auto;
    }
  
  
    .social_icon_wrap {
      overflow: hidden;
    }
  
    .social_icon_a {
      float: left;
      margin-right: 40px;
      cursor: pointer;
    }
  
    .social_icon_img {
      width: 40px;
      -webkit-user-drag: none;
      user-select: none;
    }
  
    .socoal_copyright_containter {
      width: 100%;
      background-color: black;
      padding-top: 80px;
    }
  
    .detail_page_bottom {
      width: 100%;
      height: 96px;
      text-align: center;
      margin-top: 304px;
    }
  
    .copyright {
      line-height: 14px;
      display: block;
      float: none;
      margin-left: 0;
    }
  
  
    .all_articles {
      font-size: 28px;
      line-height: 36px;
      text-decoration: none;
      margin: 0 auto;
      position: relative;
      display: block;
      margin-top: -110px;
    }
  
    .find_me_on_github {
      line-height: 14px;
      float: none;
      margin-right: 0;
      display: block;
      margin-top: 92px;
    }
  
    .all_articles:after {
      height: 0px;
    }
  
  }






/* 页面宽度大于768px小于1025px时 */
/* @media screen and (max-width: 1025px) and (min-width:768px){


    .article_tab{
      width: calc(100% - 80px);
      height: 62px;
  
      margin-top:100px;
      margin-bottom: 48px;
    
    }
  
  
    .article_article{
      font-size: 60px;
      line-height: 60px;
    }
  
  
  
    .article_all_tabs_a{
      font-size: 16px;
      line-height: 18px;
    }
    
  } */


/* 页面宽度大于600px小于916px时 */
/* @media screen and (max-width: 916px) and (min-width:600px){
  
  
    .article_tab{
      width: calc(100% - 80px);
      height: 117px;
  
      margin-top:100px;
      margin-bottom: 48px;
    
    }
  
  
    .article_article{
      font-size: 52px;
      line-height: 52px;
    }
  
  
    .article_all_tabs{
      display: block;
      margin-left: 0px;
      margin-top: 36px;
    
    }
  
    .article_all_tabs_a{
      font-size: 16px;
      line-height: 16px;
    }
    
  } */




/* 页面宽度小于500px时 alltabs */
/* @media screen and (max-width: 600px){
    .article_tab{
      height: 91px;
  
      margin-top:140px;
      margin-bottom: 44px;
    
    }
  
  
    .article_article{
      font-size: 36px;
      line-height: 36px;
    }
  
  
    .article_all_tabs{
      display: block;
      margin-left: 0px;
      margin-top: 28px;
    
    }
  
  
    .article_all_tabs_a{
      font-size: 14px;
      line-height: 14px;
    }
    
  
  } */


/* @media screen and (max-width: 585px) and (min-width:411px){
  
    .article_all_tabs_a{
      margin-right: 36px;
    }
  
  
    .article_tab{
      width: calc(100% - 40px);
      margin-left: 20px;
    }
    
  
  } */

/* @media screen and (max-width: 411px){
  
    .article_all_tabs_a{
      margin-right: 26px;
    }
  
    .article_tab{
      width: calc(100% - 40px);
      margin-left: 20px;
    }
  } */






/* 文章列表页的自适应 */
/* 页面大于1160px小于1441px时 */
@media screen and (max-width:1441px) and (min-width:1160px) {

    .article_tab {
        width: calc(100% - 200px);
        margin-left: 100px;
    }


    .article_container {
        width: calc(100% - 200px);
        /* 减号两侧要各留一个空格 */
    }

}



/* 页面小于 */
@media screen and (max-width:1161px) and (min-width:1100px) {



    .article_tab {
        width: calc(100% - 200px);
        margin-left: 100px;
    }


    .article_container {
        width: calc(100% - 200px);
        /* 减号两侧要各留一个空格 */
    }

    .article {
        width: calc(50% - 30px);
    }

}




@media screen and (max-width:1101px) and (min-width:799px) {
    .article_tab {
        width: calc(100% - 160px);
        height: 114px;

        margin-left: 80px;
    }


    .article_article {
        font-size: 52px;
        line-height: 52px;
    }


    .article_all_tabs {
        display: block;
        margin-left: 0px;
        margin-top: 36px;

    }

    .article_all_tabs_a {
        font-size: 16px;
        line-height: 16px;
    }



    .article_container {
        width: calc(100% - 160px);
        /* 减号两侧要各留一个空格 */
    }


    .article {
        width: calc(50% - 30px);
    }

}


@media screen and (max-width:800px) and (min-width:657px) {
    .article_tab {
        width: calc(100% - 80px);
        height: 114px;

        margin-left: 40px;
    }


    .article_article {
        font-size: 52px;
        line-height: 52px;
    }


    .article_all_tabs {
        display: block;
        margin-left: 0px;
        margin-top: 36px;

    }

    .article_all_tabs_a {
        font-size: 16px;
        line-height: 16px;
    }



    .article_container {
        width: calc(100% - 80px);
        /* 减号两侧要各留一个空格 */
    }


    .article {
        width: calc(50% - 30px);
    }

    .header_hamburger_menu {
        font-size: 56px;
        line-height: 56px;
    }
}


@media screen and (max-width:658px) and (min-width:578px) {
    .article_tab {
        width: calc(100% - 80px);
        height: 114px;

        margin-left: 40px;
        margin-bottom: 32px;
    }


    .article_container {
        width: calc(100% - 80px);
    }

    .article {
        width: calc(100% - 30px);
        margin-bottom: 44px;
    }

    .article_detail {
        height: auto;
    }


    .article_article {
        font-size: 52px;
        line-height: 52px;
    }


    .article_all_tabs {
        display: block;
        margin-left: 0px;
        margin-top: 36px;

    }

    .article_all_tabs_a {
        font-size: 16px;
        line-height: 16px;
    }


    .header_hamburger_menu {
        font-size: 56px;
        line-height: 56px;
    }


}



@media screen and (max-width:579px) and (min-width:424px) {
    .article_tab {
        width: calc(100% - 40px);
        height: 91px;

        margin-left: 20px;
        margin-top: 140px;
        margin-bottom: 32px;

    }


    .article_article {
        font-size: 36px;
        line-height: 36px;
    }


    .article_all_tabs {
        display: block;
        margin-left: 0px;
        margin-top: 28px;

    }


    .article_all_tabs_a {
        font-size: 14px;
        line-height: 14px;
        margin-right: 28px;
    }




    .article_container {
        width: calc(100% - 40px);
    }

    .article {
        width: calc(100% - 30px);
        margin-bottom: 44px;
    }

    .article_detail {
        height: auto;
    }

    .header_logo {
        margin-left: 20px;
    }



    .header_right {
        right: 20px;
    }


    .header_hamburger_menu {
        margin-left: 275px;
    }

    .header_hamburger_bottom {
        margin-left: 275px;

    }

}


@media screen and (max-width:425px) and (min-width:375px) {
    .article_tab {
        width: calc(100% - 40px);
        height: 91px;

        margin-left: 20px;
        margin-top: 116px;
        margin-bottom: 32px;

    }


    .article_article {
        font-size: 36px;
        line-height: 36px;
    }


    .article_all_tabs {
        display: block;
        margin-left: 0px;
        margin-top: 28px;

    }


    .article_all_tabs_a {
        font-size: 14px;
        line-height: 14px;
        margin-right: 18px;
    }




    .article_container {
        width: calc(100% - 40px);
    }

    .article {
        width: calc(100% - 30px);
        margin-bottom: 44px;
    }


    .article_title {
        font-size: 20px;
        line-height: 28px;
    }


    .article_detail {
        height: auto;
    }


    .header_logo {
        margin-left: 20px;
        font-size: 24px;
    }


    .header_right {
        right: 20px;
    }



    .header_hamburger_menu {
        /* margin-left: 96px; */
        margin-left: 256px;
    }


    .header_hamburger_bottom {
        /* margin-left: 96px; */
        margin-left: 256px;

    }

}


@media screen and (max-width:376px) {
    .article_tab {
        width: calc(100% - 40px);
        height: 91px;

        margin-left: 20px;
        margin-top: 116px;
        margin-bottom: 32px;

    }


    .article_article {
        font-size: 36px;
        line-height: 36px;
    }


    .article_all_tabs {
        display: block;
        margin-left: 0px;
        margin-top: 28px;

    }


    .article_all_tabs_a {
        font-size: 14px;
        line-height: 14px;
        margin-right: 13px;
    }




    .article_container {
        width: calc(100% - 40px);
    }

    .article {
        width: calc(100% - 30px);
        margin-bottom: 44px;
    }


    .article_title {
        font-size: 20px;
        line-height: 28px;
    }


    .article_detail {
        height: auto;
    }


    .header_logo {
        margin-left: 20px;
        font-size: 24px;
    }


    .header_right {
        right: 20px;
    }



    .header_hamburger_menu {
        /* margin-left: 96px; */
        margin-left: 256px;
        font-size: 46px;
        line-height: 46px;
        margin-bottom: 40px;
    }



    .header_hamburger_bottom {
        /* margin-left: 96px; */
        margin-left: 256px;

    }
}