/* 提取的应急领域-消防系列相关CSS */
.index-dimensional {
    height: 400px;
    position: relative;
    margin-top: 11.71875px;
    background: url("https://www.lusy-flight.com/upload//drone/boxbg1.jpg");
}

.index-dimensional .more-a {
  display: inline-block;
  padding: 8px 20px;
  color: #000;
  background-color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-top: 250px;
  margin-right: 200px; 
}

.index-dimensional .text-content {
    color: #fff;
    position: absolute;
    top: 26.172px;
    left: 0;
    width: 100%;
    text-align: center;
}

.index-dimensional .text-content .title {
    font-size: 24px;
    line-height: 24px
}

.index-dimensional .text-content .desc {
    font-size: 16px;
    line-height: 16px;
    margin-top: 16px
}

.index-dimensional .product-item {
    position: absolute;
    width: 10.1565px;
    height: 10.1565px;
    top: 0;
    left: 0;
    cursor: pointer
}

/* 光晕效果 */
.dott {
    width: 10.93725px;
    height: 10.93725px;
    border-radius: 19.5315px;
    z-index: 90;
    border-radius: 50%;
    border: 0.39075px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

.dott:before {
    content: "";
    opacity: .8;
    display: block;
    position: absolute;
    background: hsla(196, 41%, 96%, .3);
    width: 97%;
    height: 97%;
    border-radius: 50%;
}

.dott:after {
    position: absolute;
    content: "";
    height: 10.93725px;
    width: 10.93725px;
    display: block;
    opacity: .0174664;
    border-radius: 50%;
    background: rgba(146, 219, 246, .5);
    -webkit-animation: dot-change 2.5s cubic-bezier(0,0,.2,1) infinite;
    animation: dot-change 2.5s cubic-bezier(0,0,.2,1) infinite;
}

.index-dimensional .product-item .message-modal {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 0;
    height: 0;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding-top: 11.71875px;
    padding-left: 11.71875px;
    display: none
}

.index-dimensional .product-item .message-modal .animate-box {
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top
}

.index-dimensional .product-item .message-modal .animate-box,
.index-dimensional .product-item .message-modal .content {
    width: inherit;
    height: inherit;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: .01s;
    animation-duration: .01s
}

.index-dimensional .product-item .message-modal .content {
    position: absolute;
    top: 11.71875px;
    left: 11.71875px;
    color: #3d3c38;
    opacity: 0;
    overflow: hidden;
    background-size: 100% 100%;
    border-radius: 6px;
}

.index-dimensional .product-item .message-modal .content .product-icon {
    text-align: center;
    height: 7.81275px;
    margin-top: 8.5935px;
    margin-left: auto;
    margin-right: auto;
    width: 85.93725px;
    display: none
}

.index-dimensional .product-item .message-modal .content .check-more {
    font-size: 7.81275px;
    line-height: 7.81275px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 8.5935px;
    left: 0;
    color: #3d3c38
}

.index-dimensional .product-item:hover {
    z-index: 100
}

.index-dimensional .product-item:hover .message-modal {
    display: block
}

.index-dimensional .product-item:hover .message-modal .content {
    opacity: 1
}

.index-dimensional .modal-show {
    z-index: 100
}

.index-dimensional .modal-show .message-modal {
    display: block
}

.index-dimensional .modal-show .message-modal .content {
    opacity: 1
}

.index-dimensional .bottom-show .message-modal {
    left: 0;
    top: 0
}

.index-dimensional .fpdi-item .message-modal {
    left:0.151rem ;
    top: -0.10rem;
    padding-left: 0;
    padding-right: 0.15625rem
}

.index-dimensional .bottom-left-show .message-modal {
    left: unset;
    right: 0;
    top: 0;
    padding-left: 0;
    padding-right: 0.15625rem;
}

.index-dimensional .bottom-left-show .message-modal .animate-box {
    -webkit-transform-origin: right top;
    -ms-transform-origin: right top;
    transform-origin: right top
}

.index-dimensional .bottom-left-show .message-modal .content {
    left: unset;
    right: 0.15625rem
}

.index-dimensional .light {
    position: absolute;
    width: 390.39px;
    height: 157.05px;
    top: 128.88285px;
    left: -1.55625px;
    animation-name:product-photo-animate;
    animation-duration:1.8s;
    animation-iteration-count:infinite;
    background: url("../images/light.png") center;
    background-size:100% 100%;
}

/* 动画定义 */
@keyframes product-photo-animate {
    0% {
        opacity: 1
    }

    44% {
        opacity: .7
    }

    55% {
        opacity: .3
    }

    66% {
        opacity: 0
    }

    77% {
        opacity: .3
    }

    88% {
        opacity: .7
    }

    to {
        opacity: 1
    }
}

@keyframes dot-change {
    25%,to {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
        opacity: .8
    }

    75%,to {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0
    }
}

/* 产品项特定位置 */
.index-dimensional .product-m500 {
    top: 133.55325px;
    left: 512.1405px;
}

.index-dimensional .product-m500 .message-modal {
    width: 156.24975px;
    height: 117.1875px;
}

.index-dimensional .product-m600 {
    top: 235.55325px;
    left: 606.6405px;
}

.index-dimensional .product-m600 .message-modal {
    width: 156.24975px;
    height: 117.1875px;
}

.index-dimensional .product-m700 {
    top: 168.80325px;
    left: 434.1405px;
}

.index-dimensional .product-m700 .message-modal {
    width: 156.24975px;
    height: 117.1875px;
}

.index-dimensional .bottom-left-show1 .message-modal {
    left: unset;
    right: 0.2rem;
    top: -1.5868rem;
    padding-left: 0;
    padding-right: 0.15625rem;
}

.index-dimensional .bottom-left-show2 .message-modal {
    left: unset;
    right: 0.2rem;
    top: -1.5868rem;
    padding-left: 0;
    padding-right: 0.15625rem;
}

/* bx1 无人机展示区块样式 */
.bx1 {
  width: 100%;
  margin-top: 30px;
  height: 400px;
  background: url("https://www.lusy-flight.com/upload//drone/01.jpg");
  position: relative;
}

.bx1 .tdian {
  position: absolute;
  top: 17.6px;
  left: 65%;
}
.bx1 .tdian li {
  float: left;
  margin-left: 3.2px;
}

.toptitle {
  position: absolute;
  height: 24px;
  line-height: 24px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  top: 16px;
  left: 23%;
  z-index: 99;
}

.btmtitle {
  text-align: left;
  position: absolute;
  width:450px;
  height: 16px;
  font-size: 16px;
  color: #fff;
  top: 15%;
  left: 12%;
}

.bx1 .more-a {
  display: inline-block;
  padding: 8px 20px;
  color: #000;
  background-color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  margin-top: 200px;
  margin-right: 600px;  
}

/* bx2 植保无人机区块样式 */
.bx2 {
  width: 100%;
  height:400px;
  background-image: url('https://www.lusy-flight.com/upload//drone/phone_bg/02_1.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 30px 0;
}

.bx2-box {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  text-align: left;
}

.bx2-box h4 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.bx2-box p {
  font-size: 16px;
  margin-bottom: 20px;
}

.bx2-box .more-a {
  display: inline-block;
  padding: 8px 20px;
  color: #000;
  background-color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
}

@media (max-width: 768px) {
    .index-dimensional {
        background: url("https://www.lusy-flight.com/upload//drone/phone_bg/boxbg1.jpg");
    }
    .bx1 {
        background: url("https://www.lusy-flight.com/upload//drone/phone_bg/bx1phonebg.jpg");
    }
    .bx2 {
        background-image: url('https://www.lusy-flight.com/upload//drone/phone_bg/phonebox02.jpg');
    }
    .index-dimensional .text-content .desc
    {
        text-align: left;
        font-size: 16px;
        width: 250px;
        margin-left: 20px;
    }
    .index-dimensional .text-content .title{
        font-weight:700;
        text-align: left;
        margin-left: 30px;
    }
    .btmtitle{
       width: 250px;
       left: 9%; 
    }
    .toptitle {
        left: 9%;
    }
    .bx1 .more-a {
        margin-top:300px;
        margin-right:200px;  
    }
    .bx1 .tdian {
        position: absolute;
        top: 17.6px;
        left: 65%;
        display: none;
    }
    .index-dimensional {
        height: 435.936256px;
        margin-top: 20px;
    }
    .index-dimensional .text-content {
        top: 44.66688px;
    }
    .index-dimensional .text-content .title {
        font-size: 24px;
        line-height: 32px;
    }
    .index-dimensional .text-content .desc {
        font-size: 16px;
        line-height: 16px;
        margin-top: 10.66624px;
    }
    .index-dimensional .product-item {
        width: 17.33376px;
        height: 17.33376px;
    }
    .dott {
        width: 18.66624px;
        height: 18.66624px;
        border-radius: 33.33376px;
        border: 0.66688px solid #fff;
    }
    .dott:after {
        height: 18.66624px;
        width: 18.66624px;
    }
    .index-dimensional .product-item .message-modal {
        padding-top: 20px;
        padding-left: 20px;
    }
    .index-dimensional .product-item .message-modal .content {
        top: 20px;
        left: 20px;
        border-radius: 10.24px;
    }
    .index-dimensional .product-item .message-modal .content .product-icon {
        height: 13.33376px;
        margin-top: 14.66624px;
        width: 146.66624px;
    }
    .index-dimensional .product-item .message-modal .content .check-more {
        font-size: 13.33376px;
        line-height: 13.33376px;
        bottom: 14.66624px;
    }
    .index-dimensional .light {
        width: 666.2656px;
        height: 268.032px;
        top: 219.960064px;
        left: -2.656px;
    }
    .index-dimensional .product-m500 {
        top: 227.93088px;
        left: 874.05312px;
    }
    .index-dimensional .product-m500 .message-modal {
        width: 266.66624px;
        height: 200px;
    }
    .index-dimensional .product-m600 {
        top: 402.01088px;
        left: 1035.33312px;
    }
    .index-dimensional .product-m600 .message-modal {
        width: 266.66624px;
        height: 200px;
    }
    .index-dimensional .product-m700 {
        top: 288.09088px;
        left: 740.93312px;
    }
    .index-dimensional .product-m700 .message-modal {
        width: 266.66624px;
        height: 200px;
    }
}