/*横版*/
@media (orientation:landscape){
  @media only screen and (max-width:1920px){
    .books-list-avatar-new {
      flex: 1;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      padding-left: 1vh;
    }

    .books-left-default {
      width: 42vh;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }
    .books-right-default{
      width: 62vh;
      height: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }
    .books-right-detail-box-default{
      height: 100%;
      padding: 4vh 8vh 3vh 0.9vh;
      font-size: 1.5vh
    }
    .books-flex-default {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }
    .books-right-detail-name {
      height: 13%;
      margin-bottom: 0.5vh;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      font-size: 3vh;
      font-weight: bold;
    }
    .books-right-detail-name-tag {
      background-color: #90b13a;
      border-radius: 0.5vh;
      width: 1vh;
      height: 80%;
      margin-right: 1vh;
    }
    .books-right-detail-career {
      width: 100%;
      height: 15%;
      margin-bottom: 2vh;
    }
    .books-right-detail-career ul {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      color: #633400;
    }
    .books-right-detail-career ul li {
      background-color: #f4ecbd;
      width: 32%;
      height: 50%;
      margin-bottom: 3px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .books-right-detail-career ul li .skilltag-bar {
      width: 50%;
      height: 40%;
      position: relative;
      display: flex;
      flex-direction:column;
      justify-content:center;
    }
    .books-right-detail-career ul li .skilltag-bar .skilltag-bar-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
    .books-right-detail-career ul li .skilltag-bar .skilltag-bar-fill {
      margin-left: 1%;
      position: absolute;
      z-index: 2;
      height: 80%;
      border-radius:10%;
      overflow: hidden;
    }
    .skilltag-bar-divide-wrap {
      height: 100%;
    }
    .skilltag-bar .skilltag-bar-divide {
      height: 100%;
      width: 2px;
      position: absolute;
      z-index: 3;
    }
    .gradeimg {
      height: 65%;
    }

    .books-right-detail-text {
      height: 27%;
      padding-right: 0.2vw;
      overflow: auto;
      margin-bottom: 1.5vh;
      line-height: 1.8vh;
      color: #494312;
      font-weight: bold;
      font-size: 1.5vh;
    }
    /* 滚动条 */
    .books-right-detail-text::-webkit-scrollbar {
      width: 1vh;
    }
    .books-right-detail-text::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
      border-radius: 1vh;
      background-color: #cba066;
    }
    .books-right-detail-text::-webkit-scrollbar-thumb {
      border-radius: 1vh;
      -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
      border: 2px solid;
      background-color: #81cc2d;
    }

    
    .books-right-detail-plantLabel {
      display: flex;
      flex-wrap:wrap;
    }
    .plantLabelWrap {
      height: 3.5vh;
      padding: 0 1vh;
      line-height: 3.5vh;
      color: #fff;
      font-size: 1.8vh;
      text-align: center;
      margin-right: 0.3vh;
      background-repeat:no-repeat;
      background-size: 100% 100%;
    }

    .books-detail-moredata-default {
      display: flex;
      align-self : flex-end ;
      margin-top: 3vh;
      margin-right: 6vh;
    }
    .books-detail-moredata-default>a{
      background: url("/assets/images/image/title-active.png") no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size:1.5vh;
      padding: 1.3vh 3.5vh;
    }
    .books-detail-moredata-default>a:hover{
      background: url("/assets/images/image/title-over.png") no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size:1.5vh;
      padding: 1.3vh 3.5vh;
    }
  }
  @media only screen and (min-width:1921px){
    .books-left-default {
      width: 40vh;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }
    .books-right-default{
      width: 64vh;
      height: 100%;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }
    .books-right-detail-box-default{
      height: 100%;
      padding: 4vh 7vh 3vh 0vh;
      font-size: 1.5vh
    }
    .books-flex-default {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
    }
    .books-right-detail-name {
      height: 13%;
      margin-bottom: 1.5vh;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      font-size: 3vh;
      font-weight: bold;
    }
    .books-right-detail-name-tag {
      background-color: #90b13a;
      border-radius: 0.5vh;
      width: 1vh;
      height: 80%;
      margin-right: 1vh;
    }
    .books-right-detail-career {
      width: 100%;
      height: 15%;
      margin-bottom: 2vh;
    }
    .books-right-detail-career ul {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      color: #633400;
    }
    .books-right-detail-career ul li {
      background-color: #f4ecbd;
      width: 32%;
      height: 50%;
      margin-bottom: 15px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .books-right-detail-career ul li .skilltag-bar {
      width: 50%;
      height: 40%;
      position: relative;
      display: flex;
      flex-direction:column;
      justify-content:center;
    }
    .books-right-detail-career ul li .skilltag-bar .skilltag-bar-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
    .books-right-detail-career ul li .skilltag-bar .skilltag-bar-fill {
      margin-left: 1%;
      position: absolute;
      z-index: 2;
      height: 80%;
      border-radius:10%;
      overflow: hidden;
    }
    .skilltag-bar-divide-wrap {
      height: 100%;
    }
    .skilltag-bar .skilltag-bar-divide {
      height: 100%;
      width: 2px;
      position: absolute;
      z-index: 3;
    }
    .gradeimg {
      height: 65%;
    }

    .books-right-detail-text {
      height: 27%;
      padding-right: 0.2vw;
      overflow: auto;
      margin-bottom: 1.5vh;
      line-height: 1.8vh;
      color: #494312;
      font-weight: bold;
      font-size: 1.5vh;
    }
    /* 滚动条 */
    .books-right-detail-text::-webkit-scrollbar {
      width: 1vh;
    }
    .books-right-detail-text::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
      border-radius: 1vh;
      background-color: #cba066;
    }
    .books-right-detail-text::-webkit-scrollbar-thumb {
      border-radius: 1vh;
      -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
      border: 2px solid;
      background-color: #81cc2d;
    }

    .books-right-detail-plantLabel {
      display: flex;
      flex-wrap:wrap;
    }
    .plantLabelWrap {
      height: 3.5vh;
      padding: 0 1vh;
      line-height: 3.5vh;
      color: #fff;
      font-size: 1.8vh;
      text-align: center;
      margin-right: 0.3vh;
      background-repeat:no-repeat;
      background-size: 100% 100%;
    }

    .books-detail-moredata-default {
      display: flex;
      align-self : flex-end ;
      margin-top: 3vh;
      margin-right: 6vh;
    }
    .books-detail-moredata-default>a{
      background: url("/assets/images/image/title-active.png") no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size:1.5vh;
      padding: 1.3vh 3.5vh;
    }
    .books-detail-moredata-default>a:hover{
      background: url("/assets/images/image/title-over.png") no-repeat;
      background-size: 100% 100%;
      color: white;
      font-size:1.5vh;
      padding: 1.3vh 3.5vh;
    }
  }
}
/*竖版*/
@media (orientation:portrait){
  @media only screen and (min-width:1081px){
    .main-plant {
      display: none;
      height: 87%;
      width: 100%;
      padding: 0 12vw;
      margin-top: 1.5vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .p-planttop {
      height: 4vh;
      font-size: 4vw;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .p-planttitle {
      display: flex;
      align-items: center;
    }
    .p-planttag {
      background-color: #90b13a;
      border-radius: 1vh;
      width: 2vw;
      height: 4vh;
      margin-right: 0.6vh;
    }
    .p-moredata-default {
      height: 3vh;
    }
    .p-plantimg {
      height: 13vh;
      position: relative;
    }
    .p-plantimg img {
      position: absolute;
      height: 20vh;
      bottom: 0;
      transform:translate(-50%);
    }

    .p-planticon {
      display: flex;
      flex-wrap:wrap;
      justify-content: center;
      margin: 1vh 0;
    }
    .p-plantLabelWrap {
      height: auto;
      padding: 0 0.5vh;
      line-height: 2.2vh;
      color: #fff;
      font-size: 1.1vh;
      margin: 0 0.2vw;
      background-repeat:no-repeat;
      background-size: 100% 100%;
    }

    .p-plantdetailtext {
      position: relative; 
      height: 10vh; 
      overflow: hidden; 
      font-size: 1.4vh;
      line-height: 1.7vh;
      text-align: left;
    }

    .scroll-content {
      height: 100%;
      overflow: auto; 
    }
  }
  @media only screen and (max-width:1080px){
    .main-plant {
      display: none;
      height: 87%;
      width: 100%;
      padding: 0 12vw;
      margin-top: 1.5vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .p-planttop {
      height: 4vh;
      font-size: 4vw;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .p-planttitle {
      display: flex;
      align-items: center;
    }
    .p-planttag {
      background-color: #90b13a;
      border-radius: 1vh;
      width: 2vw;
      height: 4vh;
      margin-right: 0.6vh;
    }
    .p-moredata-default {
      height: 3vh;
    }
    .p-plantimg {
      height: 13vh;
      position: relative;
    }
    .p-plantimg img {
      position: absolute;
      height: 20vh;
      bottom: 0;
      transform:translate(-50%);
    }

    .p-planticon {
      display: flex;
      flex-wrap:wrap;
      justify-content: center;
      margin: 1vh 0;
    }
    .p-plantLabelWrap {
      height: auto;
      padding: 0 0.5vh;
      line-height: 2.2vh;
      color: #fff;
      font-size: 1.1vh;
      margin: 0 0.2vw;
      background-repeat:no-repeat;
      background-size: 100% 100%;
    }

    .p-plantdetailtext {
      position: relative; 
      height: 10vh; 
      overflow: hidden; 
      font-size: 1.4vh;
      line-height: 1.7vh;
      text-align: left;
    }

    .scroll-content {
      height: 100%; 
      overflow: auto; 
    }

    .gradient-mask {
      position: absolute; 
      bottom: -1vh;
      left: 0;
      width: 100%;
      height: 5vh; 
      background: linear-gradient(to top, rgba(254, 239, 214, 1) 0%, transparent 100%);
      pointer-events: none; 
      z-index: 1; 
      
    }
  }
}