Difference between revisions of "Template:CPU CHINA/common CSS"

Line 1: Line 1:
−
@font-face {
+
#contain .left {
−
  font-family: MONTSERRAT-BLACK1;
+
    position: -webkit-sticky;
−
  src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff")
+
    position: sticky;
−
     format("woff");
+
    float: left;
 +
     width: 25%;
 +
    top: 20%;
 
}
 
}
  
−
@font-face {
+
#contain .left .Frosting {
−
  font-family: MONTSERRAT-BLACKITALIC2;
+
    position: absolute;
−
  src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff")
+
    top: 0;
−
     format("woff");
+
    left: 15%;
 +
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
 +
        0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
 +
        0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
     -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
 +
    z-index: 2;
 
}
 
}
  
−
@font-face {
+
#contain .left .catalogue-title {
−
  font-family: CABIN-REGULAR;
+
    position: absolute;
−
  src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff")
+
    top: 25px;
−
     format("woff");
+
    left: 20%;
 +
    width: 60%;
 +
    text-align: center;
 +
    color: #202020;
 +
    font-family: "MONTSERRAT-BLACK1";
 +
    font-size: large;
 +
    font-weight: 800;
 +
     z-index: 3;
 
}
 
}
  
−
@font-face {
+
#contain .left .catalogue {
−
  font-family: CABIN-ITALIC;
+
    position: absolute;
−
  src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff")
+
    padding-left: 14px;
−
     format("woff");
+
    overflow: hidden;
 +
    top: 60px;
 +
     width: 65%;
 +
    z-index: 3;
 
}
 
}
  
−
@font-face {
+
#contain .left .catalogue li {
−
  font-family: BLACKITALIC;
+
    color: #404040;
−
  src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff")
+
    margin: 5% 10%;
−
    format("woff");
+
    text-overflow: ellipsis;
 +
    overflow: hidden;
 +
    white-space: nowrap;
 +
    font-family: "CABIN-REGULAR";
 +
    font-weight: lighter;
 +
    width: 95%;
 +
    list-style: square inside url("https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--circle.svg");
 
}
 
}
  
−
body {
+
#contain .left .catalogue li:hover {
−
  background-color: #fafafa;
+
    list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");
 
}
 
}
  
−
* {
+
#contain .left .catalogue .current {
−
  box-sizing: border-box;
+
    color: #0071ff;
 +
    list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");
 
}
 
}
  
−
#contain {
+
#contain .left .catalogue li:hover a {
−
  margin-top: -12px;
+
    color: #0071ff;
−
  padding: 0 3% 10%;
+
    text-decoration: none;
−
  width: 100%;
+
−
  background-color: #fafafa;
+
−
  z-index: 1;
+
−
  text-align: left;
+
−
  box-sizing: border-box;
+
 
}
 
}
  
−
.background {
+
#contain .left .catalogue li:hover .circle {
−
  position: fixed;
+
    fill: #0071ff;
−
  width: 100%;
+
−
  top: 0;
+
−
  z-index: -1;
+
−
  box-sizing: border-box;
+
 
}
 
}
  
−
#header #title {
+
#contain #detail {
−
  position: fixed;
+
    float: right;
−
  top: 9vw;
+
    position: relative;
−
  font-family: "MONTSERRAT-BLACKITALIC2";
+
    width: 65%;
−
  line-height: normal;
+
    margin-right: 8%;
−
  font-weight: bolder;
+
    padding:5%;
−
  font-size: 8vw;
+
    border-radius: 8px;
−
  color: #fafafa;
+
    box-sizing: border-box;
−
  z-index: -1;
+
    line-height: 1.3em;
 +
    font-size: 1.1em;
 +
    font-family: "CABIN-REGULAR";
 +
    font-weight: lighter;
 +
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 +
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 +
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 +
    -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 
}
 
}
  
−
#header #load {
+
#contain #detail h2 {
−
  position: fixed;
+
    padding: 10% 0;
−
  display: flex;
+
    font-family: "MONTSERRAT-BLACKITALIC2";
−
  width: 100%;
+
    font-size: 3em;
−
  height: 100%;
+
    text-align: center;
−
  background-color: white;
+
    line-height: normal;
−
  align-items: center;
+
−
  justify-content: center;
+
−
  z-index: 20;
+
 
}
 
}
  
−
#header #load img {
+
#contain #detail h3 {
−
  width: 50vmin;
+
    margin: 5% 0;
 +
    font-size: 2em;
 +
    font-family: "MONTSERRAT-BLACKITALIC2";
 +
    color: #424242;
 +
    text-align: center;
 +
    line-height: normal;
 
}
 
}
  
−
#header #menu {
+
#contain #detail h4{
−
  z-index: 10;
+
    font-size: 1.5em;
 +
    margin: 2% 0;
 
}
 
}
  
−
#header #menu #menuBack {
+
#contain #detail p {
−
  position: fixed;
+
    margin: 2% 0;
−
  width: 100%;
+
    line-height: 1.5em;
−
  height: 100%;
+
    font-size: 1.1em;
−
  box-sizing: border-box;
+
    text-indent:2.2em;
−
  z-index: 10;
+
    text-align: justify;
 +
    font-family: "CABIN-REGULAR";
 +
    font-weight: lighter;
 
}
 
}
  
−
#header #menu .menu {
+
/* 图注 */
−
  background-color: #000000ad;
+
#contain #detail .imgdescribe{
−
  transition: background-color 2s;
+
    text-indent:0em;
 +
    text-align: left;
 +
    font-size: 0.9em;
 
}
 
}
  
−
#header #menu #logo {
+
#contain #detail .center{
−
  position: fixed;
+
    text-align: center;
−
  top: 3vmin;
+
−
  left: 1vmin;
+
−
  width: 25vmin;
+
−
  z-index: 11;
+
 
}
 
}
  
−
#header #menu #menuImg {
+
/* 引用 */
−
  position: fixed;
+
#contain #detail .reference{
−
  top: 2vmin;
+
    text-indent:0em;
−
  right: 1vmin;
+
    text-align: left;
−
  width: 15vmin;
+
    font-size: 0.9em;
−
  z-index: 11;
+
    color: #636363;
 +
}
 +
#contain #detail strong{
 +
    font-weight: bold;
 +
}
 +
#contain #detail ol {
 +
list-style: decimal;
 
}
 
}
  
−
#header #menu .class {
+
#contain #detail ul {
−
  position: fixed;
+
    list-style: disc;
−
  top: 14vmin;
+
}
−
  z-index: 11;
+
#contain #detail a{
 +
    color: #0071fe;
 +
}
 +
#contain #detail a:hover{
 +
    color: #fa0909;
 +
}
 +
#contain #detail img {
 +
    width: 100%;
 +
    margin: 5% 0 2%;
 +
}
 +
#contain #detail em{
 +
    font-style: italic;
 
}
 
}
  
−
#header #menu .class li {
+
/* 下载按钮 */
−
  padding: 6% 0;
+
#contain #detail #downLoad {
−
  margin: 2vmin;
+
    position: relative;
−
  border-radius: 30px;
+
    margin: 2vw 0;
−
  text-align: center;
+
    width: 100%;
−
  font-family: "MONTSERRAT-BLACKITALIC2";
+
    height: 7vmin;
−
  font-size: 1.5em;
+
    line-height: 7vmin;
−
  font-weight: bolder;
+
    border-radius: 30px;
 +
    background-image: linear-gradient(to right, #D9D9D9 , #FFFFFF);
 
}
 
}
  
−
#header #menu #class-a {
+
#contain #detail #downLoad span{
−
  right: 1vmin;
+
    margin-left: 1vw;
 +
    font-size: 0.9em;
 
}
 
}
  
−
#header #menu #class-a li {
+
#contain #detail #downLoad a{
−
  width: 30vmin;
+
    position: absolute;
−
  background-color: #fafafa;
+
    right: 0;
−
  border: #fafafa solid 3px;
+
    width: 20%;
 +
    height: 7vmin;
 +
    line-height: 7vmin;
 +
    border: none;
 +
    text-align: center;
 +
    background-color: #0071ff;
 +
    color: #FAFAFA;
 +
    font-weight: bold;
 +
    font-size: 0.8em;
 +
    border-radius: 30px;
 
}
 
}
  
−
#header #menu #class-a li:hover {
+
.current {
−
  border: #0072fe solid 3px;
+
    color: #0071ff;
 
}
 
}
  
−
#header #menu #class-a .class-a {
+
.section {
−
  background-color: #0072fe;
+
    margin-top: 30px;
−
  border: #0072fe solid 3px;
+
−
  color: #fafafa;
+
 
}
 
}
  
−
#header #menu #class-b {
+
#contain #detail .fundation{
−
  right: 33vmin;
+
  margin: 5% 0;
 
}
 
}
  
−
#header #menu #class-b li {
+
#contain #detail figure{
−
  border: #0072fe solid 2px;
+
    margin: 5% 0;
−
  width: 39vmin;
+
    border-radius: 12px;
 +
    overflow-x: auto;
 
}
 
}
  
−
#header #menu #class-b li a {
+
/* 滚动条宽度 */
−
  color: #fafafa;
+
#contain #detail figure::-webkit-scrollbar {
 +
    height: 5px;
 
}
 
}
  
−
#header #menu #class-b li:active {
+
/* 滚动条轨道 */
−
  background-color: #0000008f;
+
#contain #detail figure::-webkit-scrollbar-track {
 +
    background: #FAFAFA;
 +
    border-radius: 10px;
 
}
 
}
−
#header #menu #class-b .class-b {
+
 
−
  background-color: #00000047;
+
/* 小滑块 */
 +
#contain #detail figure::-webkit-scrollbar-thumb {
 +
    background: #c5daee49;
 +
    border-radius: 10px;
 +
    width: 5px;
 
}
 
}
  
−
#bodyContent a[href ^="https://"], .link-https{
+
#contain #detail figure::-webkit-scrollbar-thumb:hover {
−
  padding: 0;
+
    background: #41a0ff;
 
}
 
}
  
−
footer {
+
#contain #detail table {
−
  position: -webkit-sticky;
+
    margin: 0;
−
  left: 0;
+
    width: 100%;
−
  padding-bottom: 0.5vmin;
+
    border: none;
−
  width: 100%;
+
    border-radius: 12px;
−
  background-color: #424242;
+
    font-family: "CABIN-REGULAR";
 +
    font-weight: lighter;
 +
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 +
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 +
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 +
    -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
 
}
 
}
  
−
footer #sponsor {
+
#contain #detail table tr {
−
  position: relative;
+
    text-align: center;
−
  display: flex;
+
−
  justify-content: center;
+
−
  margin: 0;
+
−
  padding: 0.5vmin;
+
−
  padding-bottom: 3vmin;
+
−
  top: -3vmin;
+
−
  width: 100%;
+
−
  border-radius: 20px;
+
−
  background-color: #ffffff;
+
−
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+
−
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+
−
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+
−
  -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+
−
  z-index: 1;
+
 
}
 
}
−
footer #sponsor img {
+
 
−
  width: 96%;
+
#contain #detail table thead tr,
 +
#contain #detail table tbody tr {
 +
    height: 50px;
 +
    /*background-color: pink;*/
 
}
 
}
−
footer #connect {
+
 
−
  position: relative;
+
#contain #detail table tr td {
−
  margin: 0;
+
    display:table-cell; vertical-align:middle;
−
  padding-top: 1vmin;
+
    /*设置table表格每列底部边框*/
−
  top: -8vmin;
+
    padding: 8px;
−
  width: 100%;
+
    font-size: medium;
−
  background-color: #424242;
+
    border-left: none;
−
  border-radius: 20px;
+
    border-right: none;
−
  z-index: 2;
+
    border-bottom: 1px solid #eaeaea;
 
}
 
}
  
−
footer #connect #contact {
+
/*table tr:last-child td:first-child,
−
  display: flex;
+
table tr:last-child td:nth-child(2),
−
  padding: 0;
+
table tr:last-child td:nth-child(3),
−
  flex-wrap: wrap;
+
table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/
−
  align-items: center;
+
    border-bottom: 2px solid #000;
−
  justify-content: center;
+
}*/
 +
#contain #detail table tr th {
 +
    display:table-cell; vertical-align:middle;
 +
    padding: 8px;
 +
    border: none;
 +
    background: #0071fe;
 +
    font-family: "MONTSERRAT-BLACK1";
 +
    font-size: larger;
 +
    line-height: 1.5em;
 +
    color: #FAFAFA;
 +
 
 
}
 
}
  
−
footer #connect h4 {
+
#contain #detail table tr:first-child th:first-child {
−
  margin: 1% 0 5vmin;
+
    border-top-left-radius: 12px;
−
  text-align: center;
+
−
  color: #ffffff;
+
−
  font-size: 1.5em;
+
−
  font-weight: bold;
+
−
  font-family: "MONTSERRAT-BLACK1";
+
 
}
 
}
  
−
footer #connect #contact li {
+
#contain #detail table tr:first-child th:last-child {
−
  width: 280px;
+
    border-top-right-radius: 12px;
−
  font-family: "CABIN-REGULAR";
+
−
  border: #424242 solid 10px;
+
−
  justify-content: center;
+
−
  flex-direction: column;
+
−
  align-items: center;
+
−
  text-align: center;
+
 
}
 
}
  
−
footer #connect #contact li:hover {
+
#contain #detail table tr:last-child td:first-child {
−
  border: none;
+
    border-bottom-left-radius: 12px;
 
}
 
}
  
−
footer #connect li img {
+
#contain #detail table tr:last-child td:last-child {
−
  margin-bottom: 2vw;
+
    border-bottom-right-radius: 12px;
−
  width: 20%;
+
 
}
 
}
−
footer #connect li p {
+
/* 轮播图 */
−
  color: #ffffff;
+
#contain #detail .rotationChart{
−
  font-size: 1.1em;
+
    margin: 2vw;
−
   text-align: center;
+
}
 +
 
 +
#contain #detail .rotationChart img{
 +
    margin: 0;
 +
    width: 100%;
 +
    border-radius: 20px;
 +
}
 +
 
 +
#contain #detail .rotationChart #text{
 +
    margin: 1vmin 0;
 +
    position: relative;
 +
    height: 6vmin;
 +
    line-height: 6vmin;
 +
    text-align: center;
 +
    font-weight: bold;
 +
    font-size: 1.2em;
 +
    font-family: "BLACKITALIC";
 +
}
 +
 
 +
#contain #detail .rotationChart button{
 +
    background-color: #0071fe;
 +
    width: 6vmin;
 +
    height: 6vmin;
 +
    border:none;
 +
    border-radius: 50%;
 +
    font-size: 1.5em;
 +
    font-weight: bold;
 +
    color: #FAFAFA;
 +
   
 +
}
 +
 
 +
#contain #detail .rotationChart button:nth-child(1){
 +
    position: absolute;
 +
    left: 0;
 +
}
 +
 
 +
#contain #detail .rotationChart button:nth-child(2){
 +
    position: absolute;
 +
    right: 0;
 +
}
 +
 
 +
#contain #detail .rotationChart #briefText{
 +
    width: 100%;
 +
    padding: 3vmin;
 +
    background-color: #EFEFEF;    
 +
    border-radius: 20px;
 +
}
 +
 
 +
/* 文字切换 */
 +
#contain #detail #TextSwitch{
 +
    margin: 5% 0;
 +
    padding: 5%;
 +
    width: 100%;
 +
    border-radius: 20px;
 +
    color: white;
 +
    background: #0071fe;
 +
}
 +
 
 +
#contain #detail #TextSwitch h5{
 +
    margin: 2% 0;
 +
    font-size: 1.2em;
 +
    font-weight: bold;
 +
    text-align: center;
 +
}
 +
 
 +
#contain #detail #TextSwitch .switchButton{
 +
    display: flex;
 +
    align-items: center;
 +
    justify-content: center;
 +
}
 +
 
 +
#contain #detail #TextSwitch .switchButton input:nth-child(1){
 +
    width: 25px;
 +
    height: 25px;
 +
}
 +
 
 +
#contain #detail #TextSwitch .switchButton input:nth-child(2){
 +
    height: 25px;
 +
    width: 25px;
 +
}
 +
 
 +
@media screen and (max-width: 1024px){
 +
    #contain #detail #downLoad span{
 +
        font-size: 0.7em;
 +
    }
 +
}
 +
@media screen and (max-width: 850px){
 +
    #contain #detail #downLoad span{
 +
        font-size: 0.5em;
 +
    }
 +
}
 +
@media screen and (max-width: 730px) {
 +
    #contain #detail #downLoad span{
 +
        font-size: 0.4em;
 +
    }
 +
    #contain .left {
 +
        display: none;
 +
    }
 +
 
 +
    #contain #detail {
 +
        width: 100%;
 +
        float: none;
 +
        padding: 5%;
 +
        box-sizing: border-box;
 +
    }
 +
}
 +
 
 +
@media screen and (max-width: 450px){
 +
    #contain #detail h2{
 +
        font-size: 1.5em;
 +
    }
 +
    #contain #detail h3{
 +
        font-size: 1.2em;
 +
    }
 +
    #contain #detail h4{
 +
        font-size: 1.1em;
 +
    }
 +
    #contain #detail p{
 +
        font-size: 1em;
 +
        text-indent:2em;
 +
    }
 +
    #contain #detail figure{
 +
        overflow-x: auto;
 +
    }
 
}
 
}

Revision as of 13:02, 19 October 2021

  1. contain .left {
   position: -webkit-sticky;
   position: sticky;
   float: left;
   width: 25%;
   top: 20%;

}

  1. contain .left .Frosting {
   position: absolute;
   top: 0;
   left: 15%;
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
       0 0 40px rgba(0, 0, 0, 0.1) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),
       0 0 40px rgba(0, 0, 0, 0.1) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
   z-index: 2;

}

  1. contain .left .catalogue-title {
   position: absolute;
   top: 25px;
   left: 20%;
   width: 60%;
   text-align: center;
   color: #202020;
   font-family: "MONTSERRAT-BLACK1";
   font-size: large;
   font-weight: 800;
   z-index: 3;

}

  1. contain .left .catalogue {
   position: absolute;
   padding-left: 14px;
   overflow: hidden;
   top: 60px;
   width: 65%;
   z-index: 3;

}

  1. contain .left .catalogue li {
   color: #404040;
   margin: 5% 10%;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
   font-family: "CABIN-REGULAR";
   font-weight: lighter;
   width: 95%;
   list-style: square inside url("https://static.igem.org/mediawiki/2021/9/9b/T--CPU_CHINA--circle.svg");

}

  1. contain .left .catalogue li:hover {
   list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");

}

  1. contain .left .catalogue .current {
   color: #0071ff;
   list-style: square inside url("https://static.igem.org/mediawiki/2021/5/5b/T--CPU_CHINA--circle2.svg");

}

  1. contain .left .catalogue li:hover a {
   color: #0071ff;
   text-decoration: none;

}

  1. contain .left .catalogue li:hover .circle {
   fill: #0071ff;

}

  1. contain #detail {
   float: right;
   position: relative;
   width: 65%;
   margin-right: 8%;
   padding:5%;
   border-radius: 8px;
   box-sizing: border-box;
   line-height: 1.3em;
   font-size: 1.1em;
   font-family: "CABIN-REGULAR";
   font-weight: lighter;
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;

}

  1. contain #detail h2 {
   padding: 10% 0;
   font-family: "MONTSERRAT-BLACKITALIC2";
   font-size: 3em;
   text-align: center;
   line-height: normal;

}

  1. contain #detail h3 {
   margin: 5% 0;
   font-size: 2em;
   font-family: "MONTSERRAT-BLACKITALIC2";
   color: #424242;
   text-align: center;
   line-height: normal;

}

  1. contain #detail h4{
   font-size: 1.5em;
   margin: 2% 0;

}

  1. contain #detail p {
   margin: 2% 0;
   line-height: 1.5em;
   font-size: 1.1em;
   text-indent:2.2em;
   text-align: justify;
   font-family: "CABIN-REGULAR";
   font-weight: lighter;

}

/* 图注 */

  1. contain #detail .imgdescribe{
   text-indent:0em;
   text-align: left;
   font-size: 0.9em;

}

  1. contain #detail .center{
   text-align: center;

}

/* 引用 */

  1. contain #detail .reference{
   text-indent:0em;
   text-align: left;
   font-size: 0.9em;
   color: #636363;

}

  1. contain #detail strong{
   font-weight: bold;

}

  1. contain #detail ol {

list-style: decimal; }

  1. contain #detail ul {
   list-style: disc;

}

  1. contain #detail a{
   color: #0071fe;

}

  1. contain #detail a:hover{
   color: #fa0909;

}

  1. contain #detail img {
   width: 100%;
   margin: 5% 0 2%;

}

  1. contain #detail em{
   font-style: italic;

}

/* 下载按钮 */

  1. contain #detail #downLoad {
   position: relative;
   margin: 2vw 0;
   width: 100%;
   height: 7vmin;
   line-height: 7vmin;
   border-radius: 30px;
   background-image: linear-gradient(to right, #D9D9D9 , #FFFFFF);

}

  1. contain #detail #downLoad span{
   margin-left: 1vw;
   font-size: 0.9em;

}

  1. contain #detail #downLoad a{
   position: absolute;
   right: 0;
   width: 20%;
   height: 7vmin;
   line-height: 7vmin;
   border: none;
   text-align: center;
   background-color: #0071ff;
   color: #FAFAFA;
   font-weight: bold;
   font-size: 0.8em;
   border-radius: 30px;

}

.current { 

   color: #0071ff;

}

.section { 

   margin-top: 30px;

}

  1. contain #detail .fundation{
  margin: 5% 0;

}

  1. contain #detail figure{
   margin: 5% 0;
   border-radius: 12px;
   overflow-x: auto;

}

/* 滚动条宽度 */

  1. contain #detail figure::-webkit-scrollbar {
   height: 5px;

}

/* 滚动条轨道 */

  1. contain #detail figure::-webkit-scrollbar-track {
   background: #FAFAFA;
   border-radius: 10px;

}

/* 小滑块 */

  1. contain #detail figure::-webkit-scrollbar-thumb {
   background: #c5daee49;
   border-radius: 10px;
   width: 5px;

}

  1. contain #detail figure::-webkit-scrollbar-thumb:hover {
   background: #41a0ff;

}

  1. contain #detail table {
   margin: 0;
   width: 100%;
   border: none;
   border-radius: 12px;
   font-family: "CABIN-REGULAR";
   font-weight: lighter;
   -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;
   -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0) inset;

}

  1. contain #detail table tr {
   text-align: center;

}

  1. contain #detail table thead tr,
  2. contain #detail table tbody tr {
   height: 50px;
   /*background-color: pink;*/

}

  1. contain #detail table tr td {
   display:table-cell; vertical-align:middle;
   /*设置table表格每列底部边框*/
   padding: 8px;
   font-size: medium;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid #eaeaea;

}

/*table tr:last-child td:first-child, table tr:last-child td:nth-child(2), table tr:last-child td:nth-child(3), table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/ 

   border-bottom: 2px solid #000;

}*/

  1. contain #detail table tr th {
   display:table-cell; vertical-align:middle;
   padding: 8px;
   border: none;
   background: #0071fe;
   font-family: "MONTSERRAT-BLACK1";
   font-size: larger;
   line-height: 1.5em;
   color: #FAFAFA;

}

  1. contain #detail table tr:first-child th:first-child {
   border-top-left-radius: 12px;

}

  1. contain #detail table tr:first-child th:last-child {
   border-top-right-radius: 12px;

}

  1. contain #detail table tr:last-child td:first-child {
   border-bottom-left-radius: 12px;

}

  1. contain #detail table tr:last-child td:last-child {
   border-bottom-right-radius: 12px;

} /* 轮播图 */

  1. contain #detail .rotationChart{
   margin: 2vw;

}

  1. contain #detail .rotationChart img{
   margin: 0;
   width: 100%;
   border-radius: 20px;

}

  1. contain #detail .rotationChart #text{
   margin: 1vmin 0;
   position: relative;
   height: 6vmin;
   line-height: 6vmin;
   text-align: center;
   font-weight: bold;
   font-size: 1.2em;
   font-family: "BLACKITALIC";

}

  1. contain #detail .rotationChart button{
   background-color: #0071fe;
   width: 6vmin;
   height: 6vmin;
   border:none;
   border-radius: 50%;
   font-size: 1.5em;
   font-weight: bold;
   color: #FAFAFA;

}

  1. contain #detail .rotationChart button:nth-child(1){
   position: absolute;
   left: 0;

}

  1. contain #detail .rotationChart button:nth-child(2){
   position: absolute;
   right: 0;

}

  1. contain #detail .rotationChart #briefText{
   width: 100%;
   padding: 3vmin;
   background-color: #EFEFEF;   
   border-radius: 20px;

}

/* 文字切换 */

  1. contain #detail #TextSwitch{
   margin: 5% 0;
   padding: 5%;
   width: 100%;
   border-radius: 20px;
   color: white;
   background: #0071fe;

}

  1. contain #detail #TextSwitch h5{
   margin: 2% 0;
   font-size: 1.2em;
   font-weight: bold;
   text-align: center;

}

  1. contain #detail #TextSwitch .switchButton{
   display: flex;
   align-items: center;
   justify-content: center;

}

  1. contain #detail #TextSwitch .switchButton input:nth-child(1){
   width: 25px;
   height: 25px;

}

  1. contain #detail #TextSwitch .switchButton input:nth-child(2){
   height: 25px;
   width: 25px;

}

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

   #contain #detail #downLoad span{
       font-size: 0.7em;
   }

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

   #contain #detail #downLoad span{
       font-size: 0.5em;
   }

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

   #contain #detail #downLoad span{
       font-size: 0.4em;
   }
   #contain .left {
       display: none;
   }

   #contain #detail {
       width: 100%;
       float: none;
       padding: 5%;
       box-sizing: border-box;
   }

}

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

   #contain #detail h2{
       font-size: 1.5em;
   }
   #contain #detail h3{
       font-size: 1.2em;
   }
   #contain #detail h4{
       font-size: 1.1em;
   }
   #contain #detail p{
       font-size: 1em;
       text-indent:2em;
   }
   #contain #detail figure{
       overflow-x: auto;
   }

}