/**电脑 1280以上分辨率**/

@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 900px) {
  .mobile-nav {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  .flex-wrap-mobile{
    flex-wrap: wrap;
    display: flex;
  }
  body {
    position: relative; 
  }
  html .header {
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 0 15px;
    align-items: center;
  }
  html .header .search-sign-area {
    display: none;
  }

  html .header .logo {
    width: 70%;
    /* height: auto; */
    height: 20px;
  }
  html .header .logo img {
    object-fit: fill;
    /* width: 100%; */
    /* height: auto; */
    height: 100%;
    width: auto;
  }
  html .menu {
    height: 20px;
    width: 20px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      #fff 0%,
      #fff 10%,
      transparent 10%,
      transparent 30%,
      #fff 30%,
      #fff 40%,
      transparent 30%,
      transparent 60%,
      #fff 60%,
      #fff 70%,
      transparent 70%
    );
    position: absolute;
    right: 20px;
    top: 35px;
    z-index: 100;
    /* height: 0; */
    /* transform: translateY(); */
  }
  html .menu .language{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -50px;
    color: #fff;
  }
  html .menu .menu-bar {
    min-width: 90px;
    box-sizing: border-box;
    padding: 5px 10px;
    flex-flow: column;
    align-items: flex-start;
    position: absolute;
    background: #fff;
    top: 50px;
    right: 0;
    height: auto;
    display: none;
  }
  /* html .menu:hover .menu-bar{
        display: block;
    } */
  html .menu .menu-bar .menu-item {
    margin-bottom: 10px;
  }
  html .menu .menu-bar .menu-item a {
    margin-right: 0;
    white-space: nowrap;
    display: block !important;
  }
  html .menu .menu-bar .menu-item.active a::after {
    display: none;
  }
  .mobile-nav {
    display: block;
    padding: 5px 10px 5px 20px;
  }
  html .menu .menu-bar .menu-item .mobile-nav a {
    position: relative;
    margin-bottom: 5px;
    display: block;
    color: #353535;
  }
  html .menu .menu-bar .menu-item .mobile-nav a:before {
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    position: absolute;
    left: -10px;
    top: 2px;
    background: #c9c9c9;
  }
  html .menu .menu-bar .menu-item .mobile-nav a::after {
    content: "";
    display: block;
    width: 8px;
    height: 1px;
    position: absolute;
    left: -10px;
    top: 12px;
    background: #c9c9c9;
  }
  html .stickyMenu {
    display: none !important;
  }
  html .homePageContainer .notification .content .contentTitle {
    box-sizing: border-box;
    padding-left: 20px;
  }
  html .homePageContainer .notification .content .contentTitle .text {
    width: auto;
  }
  html .homePageContainer .notification .content .contentTitle .text_en {
    text-align: left;
  }
  html .homePageContainer .notification .content .contentTitle .more {
    bottom: 43px;
    right: 20px;
  }
  html .homePageContainer .notification .content .contentWrapper {
    flex-flow: column;
    margin-right: 0;
  }
  html
    .homePageContainer
    .notification
    .content
    .contentWrapper
    .carousel
    .swiper-wrapper
    .swiper-slide
    .notificationTitle {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html
    .homePageContainer
    .notification
    .content
    .contentWrapper
    .carousel
    .swiper-wrapper
    .swiper-slide
    .notificationDesc {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html .footer {
    height: auto;
  }
  html .footer .logoAndQrCode .renminUnivercityLogo {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  html .footer .logoAndQrCode .renminUnivercityLogo img {
    object-fit: fill;
    width: 80%;
    height: auto;
  }
  html .footer .logoAndQrCode {
    margin-right: 0;
  }
  html .footer .footerWrapper {
    flex-flow: column;
  }
  html .footer .logoAndQrCode .qr_code_container {
    flex-flow: column;
    align-items: center;
    flex-wrap: wrap;
  }
  html .footer .footerWrapper .recommendedChannel {
    width: 100%;
    margin-right: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  html .footer .footerWrapper .listItemsWrapper .title{
    margin-bottom: 20px;
  }
  html .footer .footerWrapper .recommendedChannel .channelItems.listItems ul {
    align-items: center;
    height: auto;
    border-left: none;
    flex-flow: column;
    padding-left: 0;
  }
  html .footer .footerWrapper .listItemsWrapper .listItems ul .item {
    width: 150px;
  }
  html .footer .footerWrapper .listItemsWrapper {
    display: flex;
    flex-flow: column;
    align-items: center;
  }
  html .footer .footerWrapper .listItemsWrapper .listItems ul {
    justify-content: center;
    height: auto;
    border-left: none;
  }
  html .footer .footerWrapper .listItemsWrapper .listItems.contactUsItems ul .item {
    width: 150px;
  }
  html .footer .copyright {
    box-sizing: border-box;
    padding: 0 15px 30px 15px;
  }
  html .homePageContainer .notification .content .contentWrapper .carousel {
    width: auto;
  }
  html .homePageContainer .notification .content .contentWrapper .carousel .swiper-wrapper {
    width: auto;
  }
  html .homePageContainer .notification .content .contentWrapper .carousel .swiper-wrapper .swiper-slide {
    width: 100% !important;
  }
  html .homePageContainer .notification .content .contentWrapper .swiper_thumb {
    width: 100%;
    padding: 0 !important;
    overflow: visible !important;
  }
  html .homePageContainer .notification .content .contentWrapper .swiper_thumb .swiper-wrapper .swiper-slide {
    width: 100% !important;
  }
  html
    .homePageContainer
    .notification
    .content
    .contentWrapper
    .swiper_thumb
    .swiper-wrapper
    .swiper-slide.swiper-slide-thumb-active::after {
    right: 0;
  }
  html .homePageContainer .notification .collegueNews .contentWrapper .image-text .image {
    width: 100%;
  }
  html .homePageContainer .notification .collegueNews .contentWrapper .image-text .text-area {
    width: 100%;
  }
  html .homePageContainer .notification .collegueNews .contentWrapper .image-text .text-area .title {
    width: 100%;
  }
  html .homePageContainer .notification .collegueNews .contentWrapper .introduction {
    width: 100%;
  }
  html .homePageContainer .notification .collegueNews .contentWrapper .image-text .text-area .description {
    width: 100%;
  }
  html
    .homePageContainer
    .notification
    .collegueNews
    .contentWrapper
    .introduction
    .introductionWrapper
    .introductionItem
    .titleAndDescription {
    width: calc(100% - 110px);
  }
  html
    .homePageContainer
    .notification
    .collegueNews
    .contentWrapper
    .introduction
    .introductionWrapper
    .introductionItem
    .titleAndDescription
    .title {
    width: 100%;
  }
  html
    .homePageContainer
    .notification
    .collegueNews
    .contentWrapper
    .introduction
    .introductionWrapper
    .introductionItem
    .titleAndDescription
    .description {
    width: 100%;
  }
  html .homePageContainer .imageAndDescriptions {
    width: auto;
    height: auto;
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide
    .bgImage {
    width: 100%;
    margin-bottom: 30px;
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide
    .bgImage
    .img {
    width: 100%;
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide.swiper-slide-duplicate-active {
    flex-flow: column;
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide
    .textContainer
    .titleAndDescription
    .title {
    width: 100%;
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide
    .textContainer
    .titleAndDescription
    .description {
    width: 100%;
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide
    .textContainer
    .titleAndDescription {
    width: calc(100% - 100px);
  }
  html
    .homePageContainer
    .imageAndDescriptions
    .carousel
    .academicExchangeSwiper
    .swiper-wrapper
    .swiper-slide
    .textContainer {
    width: 100%;
  }
  html .homePageContainer .introductionCarousel {
    width: 100%;
    height: auto;
  }
  html .homePageContainer .introductionCarousel .introductionWrapper .introductionItem {
    width: 100%;
  }
  html .homePageContainer .introductionCarousel .introductionWrapper .introductionItem .titleAndDescription {
    width: calc(100% - 100px);
  }
  html .homePageContainer .introductionCarousel .introductionWrapper .introductionItem .titleAndDescription .title {
    width: 100%;
  }
  html
    .homePageContainer
    .introductionCarousel
    .introductionWrapper
    .introductionItem
    .titleAndDescription
    .description {
    width: 100%;
  }
  html .homePageContainer .nationalPolicyReview .personaIntroduction .personaIntroductionWrapper {
    flex-flow: column;
  }
  html .homePageContainer .nationalPolicyReview .personaIntroduction .personaIntroductionWrapper .personaItem .image {
    width: 100%;
  }
  html .homePageContainer .nationalPolicyReview .personaIntroduction .personaIntroductionWrapper .personaItem {
    margin-bottom: 50px;
  }
  html .homePageContainer .academicCollections {
    width: 100%;
    height: auto;
  }
  html .homePageContainer .academicCollections .academicCollectionsDetails {
    flex-flow: column;
    height: auto;
    gap: none;
  }
  html .homePageContainer .academicCollections .bg_image img {
    height: 100%;
  }
  html .homePageContainer .academicCollections .academicCollectionsDetails .detailsWrapper .container {
    width: 100%;
    height: 300px;
  }
  html .homePageContainer .academicCollections .academicCollectionsDetails .detailsWrapper .bookDetailsWrapper {
    width: 100%;
    padding: 30px 10px;
    height: 300px;
  }
  html .homePageContainer .academicCollections .academicCollectionsDetails .detailsWrapper {
    width: 100%;
    height: 300px;
  }
  html
    .homePageContainer
    .academicCollections
    .academicCollectionsDetails
    .detailsWrapper
    .bookDetailsWrapper
    .book_image {
    flex: 1;
  }
  html
    .homePageContainer
    .academicCollections
    .academicCollectionsDetails
    .detailsWrapper
    .bookDetailsWrapper
    .book_image
    img {
    object-fit: fill;
    height: auto;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .mainImageText {
    width: auto;
  }
  html .collegueNewsContainer .content .contentWrapper .nav {
    display: none;
  }
  html .collegueNewsContainer .content .contentWrapper {
    display: block;
    width: auto !important;
    /* word-break: break-all; */
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails,
  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .mainImageText .text,
  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .mainImageText .text .title,
  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .mainImageText .text .descriptions,
  html .collegueNewsContainer .content .contentWrapper .contentDetails .introduction,
  html
    .collegueNewsContainer
    .content
    .contentWrapper
    .contentDetails
    .introduction
    .introductionWrapper
    .introductionItem
    a,
  html
    .collegueNewsContainer
    .content
    .contentWrapper
    .contentDetails
    .introduction
    .introductionWrapper
    .introductionItem
    .titleAndDescription
    .description {
    width: auto !important;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText {
    display: block;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .mainImageText .image {
    width: auto;
    height: auto;
  }

  html .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .mainImageText .image img {
    width: 100%;
    height: auto;
  }
  .collegueNewsContainer .content .contentWrapper .contentDetails .imageText .thumbnailImageText {
    margin-top: 20px;
  }
  .collegueNewsContainer
    .content
    .contentWrapper
    .contentDetails
    .imageText
    .thumbnailImageText
    .thumbnailImageTextListsWrapper {
    padding-top: 0.1px;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination ul li {
    margin-left: 5px;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination button {
    min-width: 14px;
    padding: 4px;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination ul #pageLast,
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination ul #pageTotal,
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination ul #pageHome {
    display: none;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination input {
    margin-left: 0;
  }
  .collegueNewsContainer.collegueIntroductionContainer .content .contentWrapper .history {
    padding: 30px 30px 0;
  }
  html .collegueNewsContainer.collegueIntroductionContainer .content .contentWrapper .history .historyDescriptions {
    width: auto;
    height: auto;
  }
  html .collegueNewsContainer.collegueIntroductionContainer .content .contentWrapper .history .historyPath {
    margin-top: 20px;
    margin-bottom: 0;
  }
  html
    .collegueNewsContainer.collegueIntroductionContainer
    .content
    .contentWrapper
    .history
    .historyPath
    .historyPathWrapper
    .historyPathItem
    .details
    .detailsDescription {
    width: auto;
  }
  html
    .collegueNewsContainer.collegueIntroductionContainer
    .content
    .contentWrapper
    .history
    .historyPath
    .historyPathWrapper
    .historyPathItem
    .details
    .detailsTitle {
    height: auto;
  }
  html
    .collegueNewsContainer.collegueIntroductionContainer
    .content
    .contentWrapper
    .history
    .introductionContent
    .textAndImage
    .text {
    float: initial;
    width: auto;
    height: auto;
    margin-bottom: 25px;
  }
  html
    .collegueNewsContainer.collegueIntroductionContainer
    .content
    .contentWrapper
    .history
    .introductionContent
    .textAndImage
    .image {
    float: initial;
    position: initial;
    background: none;
    width: 100%;
    height: auto;
  }
  html
    .collegueNewsContainer.collegueIntroductionContainer
    .content
    .contentWrapper
    .history
    .introductionContent
    .textAndImage
    .image
    img {
    position: initial;
    width: 100%;
    height: auto;
  }
  html .collegueNewsContainer .content {
    padding-bottom: 20px;
  }
  html .collegueNewsContainer.collegueIntroductionContainer .content .contentWrapper .history.hasBg {
    margin-bottom: 0;
    word-break: break-all;
  }
  html .imageSwiperContent {
    overflow: visible;
  }
  html .collegueNewsContainer.collegueImageCustom .content .imageTitle {
    padding-left: 30px;
  }
  html .administrativeOrgan .content .contentWrapper .info {
    align-items: flex-start;
  }
  html .administrativeOrgan .content .contentWrapper .info .textBlue {
    white-space: nowrap;
  }
  html .administrativeOrgan .content .contentWrapper .info div p {
    display: flex;
  }
  html .governanceFramework .history {
    width: 100%;
    box-sizing: border-box;
  }
  html .governanceFramework .nameItem {
    width: 30%;
    height: 88px;
    margin-right: 3.3%;
  }
  html .governanceFramework .introductionContent .nameItem {
    width: 60%;
  }
  html .governanceFramework .nameItem span {
    font-size: 16px;
  }
  html .governanceFramework .nameItem .textGray {
    font-size: 12px;
  }
  html .teachingAndResearch .selectTab {
    display: block;
    padding: 0 22px;
  }
  html .selectItem,
  .selectedItem {
    margin-left: 0;
    display: inline-block;
    white-space: nowrap;
  }
  html .selectedType,
  html .selectType {
    text-align: left;
    width: auto;
  }
  html .selectTab.initialSelectTab .flex.mb16 {
    display: block;
  }
  html .resultPhotoCard .photoCardItem {
    margin: 0 2% 20px;
  }
  html .administrativeDepartment .history {
    padding: 30px 10px !important;
  }
  html .administrativeDepartment .infoTable .w200 {
    width: auto;
  }
  html .administrativeDepartment .infoTable td {
    font-size: 12px;
  }
  html .third-nav {
    flex-wrap: wrap;
    /* width: 100%; */
  }
  html .third-nav a {
    width: 45%;
    margin-right: 0;
    font-size: 14px;
    margin-bottom: 20px;
    box-sizing: border-box;
    margin-left: calc(10% / 3);
  }
  html .party .module h3::before {
    top: 10px;
    transform: translateY(0);
  }
  html .party .module {
    padding: 30px 10px;
  }
  html .jobInfo table tr td {
    padding: 6px;
  }
  html .developTutor article img {
    width: 100%;
    height: auto;
  }
  html .party .contentWrapper {
    padding-bottom: 0;
  }
  html .party .contentDetails {
    margin-bottom: 0;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .pagination {
    margin-bottom: 0;
  }
  html .titleAndDescription .descriptions {
    width: 100%;
  }
  html .teacherInfo .content .contentWrapper .nav {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 100px;
  }
  html .teacherInfo .teacherInfoTop {
    margin-top: 400px;

    margin-left: 0;
  }
  html .teacherInfo .teacherName {
    min-width: 120px;
    /* margin: 0 auto; */
    margin-left: 50%;
    transform: translateX(-50%);
  }
  html
    .homePageContainer
    .notification
    .collegueNews
    .contentWrapper
    .introduction
    .introductionWrapper
    .introductionItem {
    display: block;
  }
  html
    .homePageContainer
    .nationalPolicyReview
    .personaIntroduction
    .personaIntroductionWrapper
    .personaItem
    .titleAndDescription {
    width: 100%;
  }
  html
    .homePageContainer
    .nationalPolicyReview
    .personaIntroduction
    .personaIntroductionWrapper
    .personaItem
    .titleAndDescription
    .description {
    width: 100%;
  }
  html .collegueNewsContainer img {
    width: 100% !important;
    /* width: 140px !important; */
  }
  html .collegueNewsContainer .history.hasBg .introductionContent .info img{
    width: 24px !important;
  }
  html .collegueNewsContainer p {
    padding: 0 20px;
  }
  html .collegueNewsContainer .normalText p {
    padding: 0;
  }
  html .teacherInfo .banner .bgImage img {
    height: 400px;
  }

  html .partyHome ul{
    flex-wrap: wrap;
    justify-content: center;
  }

  html .homePageContainer .notification .content .contentWrapper .swiper_thumb .swiper-wrapper .swiper-slide .content-wrapper{
    width: calc(100% - 50px);
  }
  html .homePageContainer .notification .content .contentWrapper .swiper_thumb .swiper-wrapper .swiper-slide .notificationTitle{
    width: 100%;
  }
  html .homePageContainer .notification .content .contentWrapper .swiper_thumb .swiper-wrapper .swiper-slide .notificationDesc{
    width: 100%;
  }

  html .collegueNewsContainer .content .contentWrapper .contentDetails .introduction .introductionWrapper{
    width: auto !important;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .introduction .introductionWrapper .introductionItem{
    width: auto !important;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .introduction .introductionWrapper .introductionItem a{
    width: auto !important;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .introduction .introductionWrapper .introductionItem a{
    width: auto !important;
  }
  html .party .titleAndDescription .descriptions{
    width: auto !important;
  }
  html .collegueNewsContainer .content .contentWrapper .contentDetails .introduction .introductionWrapper .introductionItem .titleAndDescription .title{
    width: auto !important;
  }
}

/**手机viewport 手机适配用**/

@media only screen and (max-width: 479px) {
}