:root {
  --theme-bg: #1b1b1b;
  --border-radius: 3.125vw;
  --max-height: calc(100vh - 60px);
  --page-padding: 2.604vw;
  --border-color: #fff
}
.container{
  width: 100%;
  height: auto;
}
.floor-container{
  width: 100%;
  height: auto;
}
.floor1-box{
  width: 100%;
  height: 42.708vw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.floor1-box .left{
  width: var(--layout-left-width);
  height:  100%;
  border-right:1px solid #fff;
}
.floor1-box .left .title{
  border-bottom:1px solid #fff;
}
.floor1-box .center{
  width: var(--column-width);
  height: 100%;
}
.floor1-box .center-img{
  width: calc(var(--column-width) * 6);
  height: 100%;
}
.floor1-box .center-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floor1-box .right-img{
  width: var(--column-width);
  height: 100%;
}
.floor1-box .right-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
.floor1-box .right-img-first{
  width: 100%;
  height: 52%;
  overflow: hidden;
}
.floor1-box .right-img-last{
  width: 100%;
  height: 48%;
  padding-top: 2.344vw;
  overflow: hidden;
  border-top:1px solid #D9D9D9;
}
.floor1-bottom{
  width: 100%;
  height: var(--home-block-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.floor1-bottom .left{
  height: 100%;
  background-color: var(--theme-color);
  width: var(--layout-left-width);
  border-right: 1px solid #fff;
}
.floor1-bottom .right{
  height: 100%;
  width: calc(100vw - var(--layout-left-width));
}

.floor1-container .title{
   width: 100%;
   height: 35%;
   display: flex;
   align-items: center;
   color: var(--theme-color);
   background-color: #ffff00;
   padding: 3.125vw 2.604vw;
}
.floor1-container .desc{
  width: 100%;
  height: 65%;
  display: flex;
  align-items: flex-start;
  padding: 3.125vw 2.604vw;
}
.floor-container .title{
  font-weight: bold;
  font-size: 4.167vw;
}
.floor-container .desc{
  font-size: 1.458vw;
  line-height: 1.5;
  color: #fff;
}
.floor2-box{
  width: 100%;
  height: 37.24vw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.floor2-box .left{
  width: calc(var(--column-width) * 2);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.floor2-box .left img{
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: var(--home-block-height);
  object-fit: cover;
  overflow: hidden;
  border-top: 1px solid #fff;
}
.floor2-box .center{
  width: 50vw;
  height: 100%;
}
.floor2-box .center img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.floor2-box .right{
  width: calc(50vw - var(--column-width)*2);
  height: 100%;
}
.floor2-box .right .title{
   width: 100%;
   height: 40%;
   padding: 3.125vw 2.5vw;
   background-color: #00ffcc;
   color: var(--theme-color);
   line-height: 0.9;
   border-bottom: 1px solid #fff;
}
.floor2-box .right .desc{
  width: 100%;
  height: 60%;
  padding: 3.646vw 2.5vw;
}

.floor3-container {
   width: 100%;
   height: 44.688vw;
   display: flex;
   justify-content: space-between;
}
.floor3-container .left{
  width: var(--layout-left-width);
  height: 100%;
  border-right: 1px solid #fff;
}
.floor3-container .left .title{
  width: 100%;
  height: 34%;
  padding: 3.125vw 2.5vw;
  background-color: var(--theme-color);
  color: #ffff00;
  line-height: 0.9;
  border-bottom: 1px solid #fff;
}
.floor3-container .left .desc{
 width: 100%;
 height: 66%;
 padding: 3.646vw 2.5vw;
}
.floor3-container .right{
  width: calc(100% - var(--layout-left-width));
  height: 100%;
}
.floor3-container .right .right-top{
   width: 100%;
   height: var(--home-block-height);
   border-bottom: 1px solid #fff;
   position: relative;
}
.floor3-container .right .right-top:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8.333vw;
  height: 100%;
  background-color: #ffff00;
}
.floor3-container .right .right-bottom{
  width: 100%;
  height: calc(100% - var(--home-block-height));
}
.floor3-container .right .right-bottom img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
}

.floor4-container{
  width: 100%;
  height: 14.896vw;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #fff;
}
.floor4-box{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.floor4-container .title{
  color:#00ffcc;
  width: 100%;
  text-align: center;
  line-height: 1;
  margin-bottom: 2.083vw;
}

/*  mobile */


@media (max-width: 820px), (orientation: portrait) {
  :root {
    --border-radius: 3.125vw;
    --max-height: calc(100vh - var(--column-width));
    --page-padding: 2.604vw;
  }
  .floor-container .title{
    font-weight: bold;
    font-size: 7vw;
    height: auto;
  }
  .floor-container .desc{
    font-size: 3.72vw;
    line-height: 1.5;
    color: #fff;
  }
  .floor1-box-m .text{
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
  }
  .floor1-box-m .text-left{
      width: calc(100% - var(--column-width));
      border-right: 1px solid #fff;
  }
  .floor1-box-m .text-left .title{
     padding: 0 4.67vw;
     height: var(--column-width);
     border-bottom: 1px solid #fff;
  }
  .floor1-box-m .text-left .desc{
     padding: 4.67vw;
  }
  .floor1-box-m .text-right{
     width: var(--column-width);
     height:  var(--column-width);
     position: relative;
     border-bottom: 1px solid #fff;;
  }
  .floor1-box-m{
    width: 100% ;
    height: auto;
  }
  .floor1-box-m{
    width: 100%;
    height: auto;
    position: relative;
  }
  .floor1-box-m .title{
    width: 100%;
  }
  .floor1-box-m .center-img{
    width: 100%;
    height: 82.71vw;
    position: relative;
  }
  .floor1-box-m .center-img img{
     position: absolute;
     right: 0;
     width: calc(100% - var(--column-width));
     height: 100%;
     object-fit: cover;
     border-left: 1px solid #fff;
  }
  .floor1-box-m .bottom{
     width: 100%;
     height: calc(var(--column-width) * 3);
     display: flex;
     align-items: center;
     justify-content: space-between;
  }
  .floor1-box-m .bottom-pre{
      width: var(--column-width);
      height: 100%;
      position: relative;
  }
  .floor1-box-m .bottom-center{
    width: calc(100% - var(--column-width)*2);
    height: 100%;
    position: relative;
  }
  .floor1-box-m .bottom-after::after{
      content: "";
      width: 100%;
      height: 67%;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 1px solid #fff;
   } 
  .floor1-box-m .bottom-next{
     width: var(--column-width);
     height: 100%;
     overflow: hidden;
  }
  .floor2-box-m .title{
    width: 100%;
    height: var(--column-width);
    display: flex;
    align-items: center;
    padding-left: 7vw;
    color: var(--theme-color);
    background-color: #00ffcc;
  }
  .floor2-box-m .desc{
    padding: 4.672vw;
    width: 100%;
    display: flex;
    align-items: flex-start;
  }
  .floor2-box-m .center{
    width: 100%;
    height: 74.299vw;
  }
  .floor2-box-m .bottom{
    width: 100%;
    height: calc(var(--column-width) * 3);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .floor2-box-m .bottom-left{
     width: calc(100% - var(--column-width));
     height: 100%;
     position: relative;
     border-right: 1px solid #fff
  }
  .floor2-box-m .bottom-left::after{
      content: "";
      width: 100%;
      height: var(--column-width);
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 1px solid #fff;
 }
  .floor2-box-m .bottom-left::before{
      content: "";
      width: 57.2vw;
      height: var(--column-width);
      position: absolute;
      border-right: 1px solid #fff;
      top: 0;
      left: 0;
  }
  .floor2-box-m .bottom-left img{
    width: 57.2vw;
    height: var(--column-width);
    object-fit: cover;
  }
  .floor2-box-m  .bottom-right{
     width: var(--column-width);
     height: 100%;
     background-color: #ffff00;
  
  }
  .floor2-box-m .text{
     width: 100%;
     height: auto;
     padding-left: var(--column-width);
     position: relative;
  }
  .floor2-box-m .text::after{
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: var(--column-width);
    background-color: #FFF;
  }
  .floor2-box-m .text::before{
      content: "";
      width: 100%;
      height: var(--column-width);
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 1px solid #fff;
  }
  /* 3 */
  .floor3-container{
    height: auto;
  }
  .floor3-box-m{
    width: 100%;
    height: auto;
  }
  .floor3-box-m .text{
    width: 100%;
    height: auto;
    padding-right: var(--column-width);
    position: relative;
 }
 .floor3-box-m .text::after{
   content: "";
   width: var(--column-width);
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   border-left: 1px solid #fff;
 }
 .floor3-box-m .text::before{
     content: "";
     width: 100%;
     height: var(--column-width);
     position: absolute;
     top: 0;
     right: 0;
     border-bottom: 1px solid #fff;
 }
 .floor3-box-m .title{
   width: 100%;
   height: var(--column-width);
   display: flex;
   align-items: center;
   padding-left: 4.672vw;
   color: #ffff00;
   background-color: var(--theme-color);
 }
 .floor3-box-m .desc{
   padding: 4.672vw;
   width: 100%;
   display: flex;
   align-items: flex-start;
 }
 .floor3-box-m .center{
    width: 100%;
    height: 60.74vw;
    position: relative;
    overflow: hidden;
    padding-left: var(--column-width);
 }
 .floor3-box-m .center::after{
    content: "";
    height: 100%;
    width: var(--column-width);
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid #fff;
  }
  .floor3-box-m .center::before{
    content: "";
    height: calc(var(--column-width) * 2);
    width: var(--column-width);
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00ffcc;
    border-bottom: 1px solid #fff;
  }
  .floor3-box-m .bottom{
    width: 100%;
    height:var(--column-width);
    position: relative;
  }
  .floor3-box-m .bottom::before{
    content: "";
    height: var(--column-width);
    width: var(--column-width);
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid #fff;
  }
  .floor4-container{
    height: auto;
    width: 100%;
    padding: 4.672vw 7.77vw;
  }
  .floor4-box{
    text-align: center;
  }
}