html,body{
      width: 100%;
      height: 99%;
      background-color: transparent !important;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    body{
      background-image: url(../img/loading-1.gif);
      background-repeat: no-repeat;
      background-position: center center;
    }
    #titleBox{
      width: 91vw;
      height: 25.2vh;
      top:0;
      left:0;
      position: relative;
      margin: 10vh 0 0 4%;
    }
    #photoBox{
      width: 90vw;
      height: auto;
      border: .5vw solid #694728;
      border-radius: 10px;
      top:0;
      left:0;
      position: relative;
      margin: 1.2vh 0 0 4%;
      opacity: 0;      
      background-color: rgba(62,33,14,1);
    }
    .photoLine{width:100%; height: 9vh; overflow: hidden; padding:0;margin:.3vh 0 0 0;}
    .photoLine td{
      /* background-image: url(../img/loading-1.gif);
      background-repeat: no-repeat;
      background-size: 15px 15px;
      background-position: center center; */
    }
    .photoLine td img{
      height: 100%;
      width: auto;
      opacity: 1;
      height: 9vh;
      /*  */
      background-image: url(../img/loading-1.gif);
        background-repeat: no-repeat;
        background-size: 15px 15px;
        background-position: center center;
    }  
    

    /* 展示图层 */
    .showMySelf{
      width: 10vw;
      height: 13vw;
      position: absolute;
      border: 0.3vw solid #BB935B;
      z-index: 99;
      line-height: 0;
      opacity: 0;
      background-color: rgba(187,147,91,0.9);
      margin: -6vh 0 0 -3.3vw;
      transform:scale(0.5);
      display: none;
      overflow: hidden;
    }
    .showMySelf .mask{
      position: absolute;
      width: 10vw;
      height: 100%;
      z-index: 9999;
      left: 0;
      top: 0;
    }
    .showMySelf .image{
      width: 10vw;
      height: 100%;
      margin-top: -1px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% auto;
      background-color: rgba(62,33,14,.5);
    }
    .showMySelf .name{
      height: 3.2vh;
      width: 8vw;
      background-color: rgba(187,147,91,0.9);
      border-radius: 20px;
      position: absolute;
      left: .98vw;
      bottom: 10%;
      color: #ffffff;
      line-height: 3.2vh;
      cursor: pointer;
      text-align: center;
    }
    .showMySelf .name b{font-weight: 300;font-size:.9rem;letter-spacing: .15rem;font-family: nsLight;}
    .showMySelf .name img{
      display: block;
      float: left;
      height: 1.6vh;
      margin: 0.77vh 0.8vw 0 1.2vw;
    }
    .showMySelf .close{
      position: absolute;
      right: 0.8vw;
      top: 1vh;
      cursor: pointer;
      width: 1.15vw;
      z-index: 99;
    }
    #titleBox dl{
      display: none;
      opacity: 0;
      font-family: nsLight;
    }
    #titleBox dl dt{
      overflow: hidden;
      clear: both;
    }
    #titleBox dl dt img{
      position: absolute;
      height: 3.5vh;
      top: 3vh;
    }
    #titleBox dl dt .r{
      border-bottom: 2px solid #ffffff;
      max-width: 90%;
      width: auto;
      color: #dddddd;
      height: 7vh;
      padding-bottom: 1vh;
      margin-left: 3.2vw;
      float: left;
    }
    #titleBox dl dt .r h3{
      float: left;
      height: 7vh;
      line-height: 7vh;
      margin-right: 0;
      color: #B38D58;
      font-size: 3.4rem;
      font-weight: 300;
    }
    #titleBox dl dt .r .t{
      height: 7vh;
      float: left;
      margin-left: 1vw;
    }
    #titleBox dl dt .r .t p{
      clear: both;
      white-space: nowrap;
      font-size: .9rem;
      font-weight: 300;
      padding: 0;
      margin-top: 0.4vh;
    }
    #titleBox dl dt .r .clr{
      height: 7vh;
      width: 10%;
      float: left;
    }
    #titleBox dl dd{
      margin: 1vh 0 0 3.2vw;
      color: #dddddd;
      font-size: 1.1rem;
      line-height: 1.6;
      height: 16vh;
      overflow-y: auto;
      scrollbar-gutter: stable;      
    }

    .section::-webkit-scrollbar {
      width: 5px;
    }
    .section::-webkit-scrollbar-track {
      background-color:#654E2E;
    }
    .section::-webkit-scrollbar-thumb {
      box-shadow: inset 0 0 6px rgba(179, 141, 99, 0.95);
    }

    #titleBox dl dd p{
      text-indent: 2rem;
      margin-bottom: .5vh;
    }
    #titleBox dl dd{
      text-indent: 2rem;
    }

    .anim01{
      animation-name: anim01;
      animation-duration: .6s;
      animation-timing-function: ease;
      animation-iteration-count: 1;
      animation-fill-mode:forwards;
    }
    @keyframes anim01{
      0%   {opacity:0;transform:scale(0.5);}
      100% {opacity:1;transform:scale(1);}
    }
    @-webkit-keyframes anim01 /* Safari and Chrome */
    {
      0%   {opacity:0;-webkit-transform:scale(0.5);}
      100% {opacity:1;-webkit-transform:scale(1);}
    }

    .anim02{
      animation-name: anim02;
      animation-duration: 1s;
      animation-timing-function: ease;
      animation-iteration-count: 1;
      animation-fill-mode:forwards;
    }
    @keyframes anim02{
      0%   {opacity:0;}
      100% {opacity:1;}
    }
    @-webkit-keyframes anim02 /* Safari and Chrome */
    {
      0%   {opacity:0;}
      100% {opacity:1;}
    }

    .anim03{
      animation-name: anim03;
      animation-duration: 1s;
      animation-timing-function: ease;
      animation-iteration-count: 1;
      animation-fill-mode:forwards;
    }
    @keyframes anim03{
      0%   {width:10vw;}
      100% {width:45vw;}
    }
    @-webkit-keyframes anim03 /* Safari and Chrome */
    {
      0%   {width:10vw;}
      100% {width:45vw;}
    }

    .tabs{
      display: none;
      float: right;
      height: 11vw;
      width: 34.5vw;
      height: 19.96vh;
      line-height: normal;
      position: absolute;
      right: 0;
      top: 0;
      overflow-y: auto;
      scrollbar-gutter: stable;
    }
    .tabs span{color: #ffffff; font-size: .7rem; display: block; float: left;padding:0vh 1vh 0.2vh 1vh; font-family: nsLight; border-radius: 1.7vh;    background-color: #ff0000;
    margin:0 .25vw .5vh 0;}
    .tab1,.tab2,.tab3{clear: both; overflow: hidden;margin-bottom:.3vh;width: 98%;margin-left: auto;margin-right: auto;}
    .tab1{margin-top: 1vh;}
    .tab1 span{ background-color: #F29700;}
    .tab2 span{ background-color: #6A3906;}
    .tab3 span{ background-color: #9E9F9F;}

    #colee_left_1 td{margin: 0;padding:0}
    #colee_left_1 td p{margin: 0 2px 0 0;padding:0}
    #colee_left_1 td p img{margin: 0;padding:0; display: block;}

    #colee_left_2 td{margin: 0;padding:0}
    #colee_left_2 td p{margin: 0 2px 0 0;padding:0}
    #colee_left_2 td p img{margin: 0;padding:0; display: block;}

    #colee_left_3 td{margin: 0;padding:0}
    #colee_left_3 td p{margin: 0 2px 0 0;padding:0}
    #colee_left_3 td p img{margin: 0;padding:0; display: block;}

    #colee_left_4 td{margin: 0;padding:0}
    #colee_left_4 td p{margin: 0 2px 0 0;padding:0}
    #colee_left_4 td p img{margin: 0;padding:0; display: block;}

    #colee_left_5 td{margin: 0;padding:0}
    #colee_left_5 td p{margin: 0 2px 0 0;padding:0}
    #colee_left_5 td p img{margin: 0;padding:0; display: block;}

    #colee_left_6 td{margin: 0;padding:0}
    #colee_left_6 td p{margin: 0 2px 0 0;padding:0}
    #colee_left_6 td p img{margin: 0;padding:0; display: block;}

    .tabsBox{
      position: absolute;
      bottom: -4.1vh;
      right: 0;
      display: none;
    }
    .tabsBox span{
      color: #ffffff;
      font-size: .7rem;
      display: block;
      float: right;
      padding: 0.06vw 1.5vw 0vw 1.5vw;
      border-radius: 1.7vh;
      margin: 0 1.25vw 0 0;
      line-height: 1.5;
    }
    .tabsBox span.t1{
      background-color: #F29700;
    }
    .tabsBox span.t2{
      background-color: #9E9F9F;
    }
    .tabsBox span.t3{
      background-color: #6A3906;
    }
    .showMySelf-div{
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 999;
    }
    .show-close{
      position: absolute;
      right: 1rem;
      top: 1rem;
      width: 1.5rem;
      z-index: 99;
      cursor: POINTER;
    }