html,
    body {
      padding: 0;
      margin: 0;
    }

    div,
    p {
      font-family: sans-serif;
    }

    .about {
      width: 92.75%;
      margin: 25px auto 0;
    }

    .about img {
      width: 100%;
      text-align: center;
    }

    .mainView {
      width: 100%;
      height: 250px;
      position: relative;
    }

    .mainView-part01 {
      width: 100%;
      min-height: 30%;
    }

    .mainView-part02 {
      width: 100%;
    }

    .map {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    #HomeButton {
      position: absolute;
      top: 74px;
      left: 20px;
      z-index: 50;
    }

    #HomeButton2 {
      position: absolute;
      top: 74px;
      left: 20px;
      z-index: 50;
    }

    #HomeButton3 {
      position: absolute;
      top: 74px;
      left: 20px;
      z-index: 50;
    }

    #HomeButton4 {
      position: absolute;
      top: 74px;
      left: 20px;
      z-index: 50;
    }

    #attributionDiv {
      position: absolute;
      bottom: 0;
      right: 5px;
      z-index: 51;
      text-align: right;
    }

    #attributionDiv2 {
      position: absolute;
      bottom: 0;
      right: 5px;
      z-index: 51;
      text-align: right;
    }

    #attributionDiv3 {
      position: absolute;
      bottom: 0;
      right: 5px;
      z-index: 51;
      text-align: right;
    }

    #attributionDiv4 {
      position: absolute;
      bottom: 0;
      right: 5px;
      z-index: 51;
      text-align: right;
    }

    .mainView-part03 {
      width: 100%;
      min-height: 30%;
    }

    .calcite .HomeButton .home {
      width: 24px;
      height: 24px;
      line-height: 24px;
      margin-top: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.8);
      ;
      cursor: pointer;
    }

    .calcite .HomeButton .home:before {
      content: "\e610";
      color: #181818;
    }

    .calcite .esriSimpleSlider .esriSimpleSliderIncrementButton:before {
      content: "\e620";
      color: #181818;
    }

    .calcite .esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
      width: 24px;
      height: 24px;
      line-height: 24px;
      border-radius: 50%;
      outline: none;
      border-bottom: none;
      background-color: rgba(255, 255, 255, 0.8);
      ;
      cursor: pointer;
    }

    .calcite .esriSimpleSlider {
      box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
    }

    .calcite .esriSimpleSlider .esriSimpleSliderDecrementButton {
      width: 24px;
      height: 24px;
      line-height: 24px;
      margin-top: 10px;
      border-radius: 50%;
      outline: none;
      background-color: rgba(255, 255, 255, 0.8);
      ;
      cursor: pointer;
    }

    .calcite .esriSimpleSlider .esriSimpleSliderDecrementButton:before {
      content: "\e621";
      color: #181818;
    }

    .calcite .LayerSwipe .vertical .handle {
      /*width: 30px;
      height: 30px;
      background-color: rgba(50, 50, 50, 0.75);
      border-radius: 50%;
      margin-left: -10px;
      margin-top: -50%;
      top: 50%;
      left: 0;
      user-select: none; */

      width: 100px;
      height: 30px;
      margin-left: -45px;
      user-select: none;

    }

    .calcite .LayerSwipe .vertical .handleContainer:after {
      content: "";
      width: 30px;
      height: 30px;
      display: block;
      background-color: rgba(50, 50, 50, 0.75);
      border-radius: 50%;
      margin-left: -10px;
      margin-top: -110%;
      top: 50%;
      left: 0;
      user-select: none;
      z-index: 30px;
      position: absolute;
    }

    .calcite .LayerSwipe .vertical .handle:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 7px solid white;
      border-bottom: 4px solid transparent;
      position: absolute;
      top: 50%;
      right: 39px;
      margin-top: -4px;
      user-select: none;
    }

    .calcite .LayerSwipe .vertical {
      width: 10px;
      height: 100%;
      cursor: col-resize;
    }

    .calcite .LayerSwipe .vertical .handle:before {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-right: 7px solid white;
      border-bottom: 4px solid transparent;
      position: absolute;
      top: 50%;
      left: 41px;
      margin-top: -4px;
      user-select: none;
    }

    html,
    body {
      margin: 0;
      padding: 0;
    }

    #container *,
    #container1 *,
    #container2 *,
    #container3 *,
    #container4 *,
    #container5 *,
    #container6 * #container7 * {
      user-select: none;
    }

    #container {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;
    }

    #container1 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;

    }

    #container2 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;
    }

    #container3 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;

    }

    #container4 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;
    }

    #container5 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;
    }

    #container6 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;
    }

    #container7 {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      margin-bottom: 10px;
    }

    .img-box {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .line-box {
      width: 30px;
      height: 100%;
      position: absolute;
      left: 50%;
      margin-left: -15px;
      top: 0;
      user-select: none;
    }

    .line-box .line {
      width: 10px;
      background-color: rgba(50, 50, 50, 0.75);
      height: 100%;
      margin-left: 10px;
      user-select: none;
      margin-top: 0;
    }

    .line-box .circle {
      width: 30px;
      height: 30px;
      background-color: rgba(50, 50, 50, 0.75);
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -15px;
      user-select: none;
    }

    .logo {
      position: absolute;
      bottom: 0;
      right: 5px;
      text-align: right;
      user-select: none;
    }

    .logo img {
      width: 25%;
    }

    .triangle-left {
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-right: 7px solid white;
      border-bottom: 4px solid transparent;
      position: absolute;
      top: 50%;
      left: 4px;
      margin-top: -4px;
      user-select: none;
    }

    .triangle-right {
      width: 0;
      height: 0;
      border-top: 4px solid transparent;
      border-left: 7px solid white;
      border-bottom: 4px solid transparent;
      position: absolute;
      top: 50%;
      right: 4px;
      margin-top: -4px;
      user-select: none;
    }

    .title {
      font-size: 19px;
      font-weight: bold;
      color: #333;
    }

    .center {
      text-align: center;
    }

    .bold {
      font-weight: bold;
    }

    .calcite {
      padding: 20px 15px;
    }

    .content p {
      font-size: 14px;
      color: #666;
      line-height: 30px;
      text-align: justify;
    }

    .lh-20 {
      line-height: 16px;
      font-size: 12px;
      color: #999;
    }

    .last {
      margin-bottom: 25px;
    }

    .first {
      margin-top: 25px;
    }

    .h30 {
      height: 60px;
    }

    .tooltip {
      width: 100%;
      margin: 25px auto 15px;
    }

    .tooltip img {
      width: 100%;
    }

    .yg-info {
      margin: 10px 0 25px 0;
      color: #999;
    }

    .line {
      width: 110px;
      margin: 15px auto 20px;
      height: 1px;
      background-color: #c1c1c1;
    }

    .calcite .esriSimpleSliderTL {
      top: 14px;
      left: 20px;
    }

    .pic_info_line1 {
      margin-bottom: 4px;
    }

    .sub_title {
      font-size: 12px;
      color: #d2d2d2;
      margin-top: 10px;
      /* display: flex; */
      overflow: hidden;
    }

    .sub_title_date {
      float: left;
      /* flex: 1; */
      /* text-align: left; */
    }

    .sub_title_count {
      /* flex: 1; */
      /* text-align: right; */
      float: right;
    }

    .mainView * {
      -webkit-touch-callout:none;  
        -webkit-user-select:none;  
        -khtml-user-select:none;  
        -moz-user-select:none;  
        -ms-user-select:none;  
        user-select:none; 
    }