xihuaDesign/xihuaTemplate/css/media.css

@media screen and (max-width: 1366px) {
  .header_layout {
    padding: 16px 20px;
  }
  .header_logo img {
    max-width: 300px;
  }
  .header_layout .header_menu {
    padding-left: 20px;
  }
  .header_btm_wrapper {
    padding: 130px 20px;
  }
  .footer_layout .lay_footer .footer_menu .logo {
    padding-right: 40px;
  }
  .footer_layout .lay_footer .footer_menu .menus .wp-menu {
    padding-left: 40px;
    gap: 20px;
  }
}
@media screen and (max-width: 1152px) {
  .header_layout {
    justify-content: space-between;
  }
  .header_logo {
    flex: 1;
  }
  .header_logo img {
    max-width: 100%;
    max-height: 40px;
  }
  .header_layout .header_menu {
    display: none;
  }
  .header_layout .mobile_menu {
    display: block;
  }
  .banner_wrapper {
    padding-top: 72px;
  }
  .page_tabs_box {
    width: 100%;
  }
  .page_tabs_box .column_title_box {
    padding: 12px 20px;
    margin-bottom: 0;
  }
  .column_title_box .arrow {
    display: block;
  }
  .page_tabs_box .column_title {
    font-size: 22px;
  }
  .page_tabs_box .page_tab_list {
    display: none;
  }
  .page_tabs_box .page_tab_list .page_list_item .item_link {
    padding: 16px 24px;
  }
  .page_tabs_box .page_tab_list .page_list_item .sub_list {
    padding: 0 24px 20px;
  }
  .header_btm_wrapper {
    padding: 72px 0;
    flex-direction: column;
  }
  .content_wrapper {
    padding: 40px 40px 0;
  }
  .search_box .wp-search {
    padding: 16px 20px;
  }
  .search_box .wp-search .form_box {
    height: 40px;
  }
  .wp-navi-aside {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  .wp-navi-aside .navi-aside-mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
  }
  .wp-navi-aside .aside-inner {
    position: absolute;
    top: 0;
    right: -200px;
    height: 100%;
    width: 200px;
    overflow-y: auto;
    z-index: 2;
    background-color: #fff;
  }
  .wp-navi-aside .wp-menu {
    padding: 20px;
  }
  .wp-navi-aside .wp-menu a {
    width: 100%;
    display: block;
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .wp-navi-aside .wp-menu li {
    padding: 5px 0;
  }
  .wp-navi-aside .wp-menu .menu-item {
    position: relative;
  }
  .wp-navi-aside .wp-menu .menu-link {
    position: relative;
    padding-left: 12px;
    padding-right: 30px;
  }
  .wp-navi-aside .wp-menu .menu-item .menu-switch-arrow {
    display: block;
    width: 32px;
    height: 32px;
    position: absolute;
    right: 0;
    top: 5px;
    background: url("../images/arrow_down.png") no-repeat center/20px 20px;
    transition: all 0.4s ease-in-out;
    cursor: pointer;
  }
  .wp-navi-aside .wp-menu .menu-item .menu-switch-arrow.open {
    transform: rotate(180deg);
  }
  .wp-navi-aside .wp-menu .sub-menu {
    display: none;
  }
  .wp-navi-aside .wp-menu .sub-menu a {
    padding-left: 24px;
  }
  .banner_wrapper .focus .focus-navigation {
    display: none;
  }
  .home_lay_title {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .home_lay_item_box {
    padding: 40px 0;
  }
  .news_tit {
    font-size: 16px;
  }
  .news_lay_box {
    grid-template-columns: 1fr;
  }
  .news_lay_box .news_lay_item {
    max-width: 100%;
  }
  .news_lay_box .news_lay_item .list_item .cover {
    height: 210px;
  }
  .news_lay_box .news_lay_item .list_item img {
    height: 210px;
  }
  .news_lay_box .news_lay_item .list_item.news_1 {
    font-size: 18px;
    line-height: 28px;
  }
  .spe_cards {
    height: 900px;
    flex-direction: column;
  }
  .spe_cards .cards_item {
    height: auto;
    margin: 0;
    padding: 40px 20px;
  }
  .spe_cards .cards_item .card_top {
    display: flex;
    align-items: center;
  }
  .spe_cards .cards_item .card_tit {
    margin-top: 0;
    padding-left: 20px;
    transition: all 0.3s ease-in-out;
  }
  .spe_cards .cards_item:hover {
    flex: 2;
    padding: 20px 20px 40px;
  }

  .spe_cards .cards_item:hover .card_tit {
    padding-left: 10px;
    font-size: 18px;
  }
  .spe_cards .cards_item .card_desc {
    padding: 0 20px 20px;
  }
  .tabs_header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .tabs_header .home_lay_title {
    margin-bottom: 20px;
  }
  .tabs_header .tabs_nav_list {
    padding-bottom: 10px;
    justify-content: flex-start;
    overflow-x: auto;
  }
  .tabs_header .tabs_nav_list .list_item {
    font-size: 16px;
  }
  .tab_list {
    grid-template-columns: repeat(2, 1fr);
  }
  .tab_list .list_item .list_img {
    height: 200px;
  }
  .tab_list .list_item img {
    height: 200px;
  }
  .tab_list.research_list .list_item .item .list_img {
    height: 300px;
  }
  .tab_list.research_list .list_item img {
    height: 300px;
  }
  .works_tab .tab_list .list_item {
    height: 300px;
  }
  .research_bg {
    background-size: cover;
  }
  .work_bg {
    background-size: cover;
  }
  .service_list {
    grid-template-columns: repeat(2, 1fr);
  }
  .service_list .ser_item a {
    padding: 18px 30px;
  }
  .service_list .ser_item a .ser_icon {
    padding-right: 30px;
  }
  .service_list .ser_item a .ser_icon img {
    width: 80px;
    height: 80px;
  }
  .service_list .ser_item a .ser_tit {
    padding-left: 30px;
    font-size: 20px;
  }
  .footer_layout .lay_footer .footer_menu {
    flex-direction: column;
  }
  .footer_layout .lay_footer .footer_menu .logo {
    text-align: center;
    border-right: none;
    padding-right: 0;
  }
  .footer_layout .lay_footer .footer_menu .logo img {
    display: inline-block;
  }
  .footer_layout .lay_footer .footer_menu .menus {
    display: none;
  }
  .teachers_box .teachers_swiper {
    width: 100%;
    /* height: 300px; */
  }
  .teachers_box .teachers_swiper .teacher_item {
    /* height: 300px; */
  }
  /* .teachers_box .teachers_swiper .teacher_slide {
    width: 290px;
  } */
  .page_title_box {
    height: 400px;
  }
  .page_title_box .title h1 {
    font-size: 28px;
  }
  .page_article_list,
  .page_teacher_list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 1440px) {
  .footer_layout .lay_footer .footer_menu {
    padding: 80px 20px;
  }
  .spe_cards .cards_item:hover .card_icon img,
  .spe_cards .cards_item .card_icon {
    width: 54px;
    height: 54px;
    transition: all 0.3s ease-in-out;
  }
}
@media screen and (max-width: 750px) {
  .home_lay_title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  .home_lay_item_box {
    padding: 30px 0;
  }
  .tabs_header .home_lay_title {
    margin-bottom: 10px;
  }
  .content_wrapper {
    padding: 20px 20px 0;
  }
  .content_wrapper .page_article_box {
    padding: 20px;
  }
  .tab_list.research_list {
    grid-template-columns: repeat(1, 1fr);
  }
  .tab_list {
    grid-template-columns: repeat(1, 1fr);
  }
  .service_list {
    grid-template-columns: repeat(1, 1fr);
  }
  .service_list .ser_item a {
    padding: 14px 20px;
  }
  .service_list .ser_item a .ser_icon {
    padding-right: 20px;
  }
  .service_list .ser_item a .ser_icon img {
    width: 60px;
    height: 60px;
  }
  .service_list .ser_item a .ser_tit {
    padding-left: 20px;
    font-size: 18px;
  }
  .service_list .ser_item a .ser_tit .desc {
    margin-top: 10px;
    font-size: 14px;
  }
  .footer_fix_link a {
    font-size: 12px;
    width: 32px;
    height: 84px;
  }
  .page_title_box {
    height: 320px;
  }
  .page_title_box .title h1 {
    font-size: 24px;
  }

  .wp_paging li.pages_count,
  .wp_paging li.page_jump {
    display: none;
  }

  .page_article_list,
  .page_teacher_list {
    grid-template-columns: repeat(2, 1fr);
  }
  .page_teacher_name_list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 576px) {
  .page_article_list,
  .page_teacher_list {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 1366px) {

  .spe_cards .cards_item .card_desc .desc {
    max-height: 100px;
    overflow: hidden;
    font-size: 12px;
  }
  .spe_cards .cards_item .card_desc .more .more_text {
    font-size: 14px;
  }
  .spe_cards .cards_item .card_desc .more .arrow {
    width: 14px;
    height: 14px;
  }
}