@import "michuan.css";
*{box-sizing:border-box}
.flex{display: flex;flex-wrap:wrap;justify-content:space-between}
.list.flex{justify-content:flex-start;}
body{width:100%;max-width:750px;margin:0 auto;padding-bottom:50px;background:#fff;}

.banner{position:relative;overflow: hidden;}
.banner .p img{width:100%}
.banner .alt{color:#fff;position: absolute;left:10px;top:15px;}
.banner .alt p{font-size:11px;color:#000}
.banner .alt h2{font-size:20px;font-weight:bold;}
.banner .logo{position: absolute;right:10px;top:10px;}
.banner .logo img{height:15px;}
.banner .title{position: absolute;right:35px;bottom:10px;text-align:center;}
.banner .title h2{font-size:14px;font-weight:bold;color:#fff;}

.bottom{padding:80px 50px 30px;background:#000000;position: relative;}
.bottom .bg{animation: float 10s ease-in-out infinite;position: absolute;left:0;bottom:10px;width:100%;z-index:9;}
@keyframes float {
  0%{transform: translateX(0);}
  50%{transform: translateX(40px);}
  100%{transform: translateX(0);}
}
/*.clear{clear:both;}*/
.footer_menu{border-top:5px solid #000000;position: fixed;bottom:0;left:0;display:flex;align-items: center;justify-content: center;width:100%;z-index:11;height:50px;background:#FFFFFF;}
.footer_menu a{display: flex;flex-direction: column;align-items: center;justify-content: center;flex:1;height:50px;}
.footer_menu a .i{width:20px;height:20px;}
.footer_menu a .i img{width:100%;height:100%;}
.footer_menu a .p{font-weight:500;margin-top:2px;font-size:12px;color:#000000;}
.footer_menu a.on .p{color:#E54141}

.contact{padding:20px 15px 25px;}
.contact .title{display:flex;align-items: center;}
.contact .title .p img{height:40px;}
.contact .title .t{padding-left:10px;color:#0166B3;}
.contact .title .t h3{font-size:20px;font-weight:bold;}
.contact .title .t p{font-size:16px;}
.contact .c1{position: relative;padding-bottom:30px;}
.contact .c1 .wx{position: absolute;right:0;top:0;max-width:100px;text-align:center;}
.contact .c1 .wx img{width:100%;}
.contact .c1 .wx p{font-size:12px;color:#0166B3;line-height:18px;padding-top:5px}
.contact .c1 .txt{padding:20px 0 0 35px;}
.contact .c1 .txt h3{font-size:15px;color:#000000;}
.contact .c1 .txt p{font-size:12px;color:#000000;}
.contact .c1 .txt a{font-size:26px;color:#0166B3;font-weight:bold;}
.contact .c2{padding-bottom:15px;}
.contact .c2 .pic{padding:10px 0 25px;}
.contact .c2 .txt h2{font-size:24px;color:#0166B3;font-weight:bold;}
.contact .c2 .txt h3{margin:5px 0 10px;font-size:15px;text-transform:uppercase;color:#0166B3;font-weight:bold;}
.contact .c2 .txt p{font-size:14px;margin-bottom:5px;line-height:22px;color:#000000;}
.contact .c2 .txt p a:hover{color:#0166B3;}

.about .body{padding:20px 10px 25px;border-bottom:5px solid #0166B3;font-size:14px;line-height:24px;color:#000000;}
.about .body p{margin-bottom:15px; }
.about .bottom{background:none;padding: 0 0 10px 0; position: fixed; bottom: 40px;z-index: -1;}
.about .a2{padding:30px 10px 0px 10px;justify-content: space-between;display:flex;}
.about .a2 .txt{width:50%;}
.about .a2 .txt p{font-size:14px;line-height:24px;margin-bottom:15px;}
.about .a2 .pic{width:48%;text-align:center;}
.about .a2 .pic img{margin-bottom:10px;}

.about .a3{    font-size: 14px;    line-height: 24px;    color: #000000;}
.about .a4{padding:10px; }
.about .a5{width:49%; float: left; margin-right:2%;}
.about .a6{width:49%; float: right; margin-right:0;}
.about .a7{ margin-bottom:200px; display:inline-block}



.pro_index{padding:80px 40px 70px;background:#000000;}
.pro_index a{position: relative;margin:0 auto;display:block;;width:120px;height:120px;border-radius:15px;}
.pro_index a::after{transform: rotate(315deg);background:#999999;border-radius:15px;content:"";position: absolute;left:0;top:0;width:100%;height:100%;}
.pro_index a .p{text-align:center;position: relative;z-index:2;width:100%;height:100%;display:flex;align-items: center;justify-content: center;flex-direction: column;}
.pro_index a .p img{height:30px;}
.pro_index a .p h2{font-size:16px;font-weight:bold;color:#0166B3;}
.pro_index a .p h3{font-size:14px;font-weight:bold;color:#000000;}
.pro_index a .p h4{font-size:10px;color:#000000;font-weight:bold;margin-top:5px;}

.pro_list{background:url(../images/pro_bg.jpg) no-repeat center center;background-size:100% 100%;padding:15px;}
.pro_list a{display:block;margin-bottom:15px;width:100%;position: relative;overflow: hidden;border-radius:15px;width: 100%;  /*float: left; margin-right: 4%;*/}
/*.pro_list a:nth-child(2n){margin-right: 0;}*/
.pro_list a .pic img{width:100%;}
.pro_list a .alt{position: absolute;left:0px;top:0px;background:#0166B3;width:140px;height:40px;display:flex;align-items: center;padding:0 5px;border-bottom-right-radius: 15px;justify-content: space-between}
.pro_list a .alt img{height:20px;width:20px;}
.pro_list a .alt span{width:calc(100% - 30px);font-size:16px;font-weight:bold;color:#fff;}

#capture-area-box{position: absolute;left:0;top:0;width:100%;height:100%;z-index:0;}
#capture-area-box img{width:100%;height:100%;position: absolute;left:0;top:0;}

.pro_show{z-index:1;width:100%;background:url(../images/pro_bg.jpg) no-repeat center center;background-size:100% 100%;position: absolute;left:0;top:0;padding:25px 15px;height:calc(100% - 50px)}
.pro_show .head{position: relative;height: calc(100% - 180px);}
.pro_show .head .pic{ background-repeat: no-repeat;background-position: center;background-size: cover;position: absolute;left:15%;width:70%;height:100%;border:5px solid #fff;box-shadow:0 15px 30px rgba(0,0,0,0.3);}
.pro_show .head .pic .p1,.pro_show .head .pic .p2{position: absolute;top:0;left: 0;z-index:1;width:100%;height:100%;display:none;}
.pro_show .head .left,.pro_show .head .right{position: absolute;top:50%;transform: translateY(-50%);}
.pro_show .head .right{right:0;}
.pro_show .head .left a img,.pro_show .head .right a img{width:24px;height:24px;}
.pro_show .head .menu{width:50px;position: absolute;right:-10px;top:25px}
.pro_show .head .menu a{width:45px;background:#fff;margin-bottom:15px;height:45px;border-radius:45px;display:flex;align-items: center;justify-content: center;border:1px solid #0166B3;}
.pro_show .head .menu a img{width:75%;}
.pro_show .hd{margin:10px auto;display:flex;align-items: center;justify-content: center;}
.pro_show .hd .item{border:2px solid #fff;width:100px;box-shadow:0 15px 30px rgba(0,0,0,0.3);background:#fff;border-radius:10px;display:flex;align-items: center;justify-content: center;flex-direction: column;height:80px;margin-right:30px;}
.pro_show .hd .item:last-child{margin-right:0;}
.pro_show .hd .item img{height:30px;}
.pro_show .hd .item p{font-size:16px;color:#000;margin-top:8px;}
.pro_show .hd .item.on{border-color:#0166B3;}
.pro_show .bd{display:flex;width:100%;height:80px;margin:0 auto;padding:20px 10px;background:rgba(0,0,0,.5);border-radius:8px}
.pro_show .bd .box{display:flex;align-items: center;overflow-x:auto;min-width: 100%;}
.pro_show .bd .box .item{margin-right:15px;display:flex;align-items: center;width:110px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex-shrink: 0;}
.pro_show .bd .box .item img{width:100%;}
.pro_show .bd .box .item:last-child{margin-right:0;}

.layer-iframe{position: fixed;left:0;transition-duration:.4s;bottom:-100%;width:100%;height:100%;z-index:999;display:flex;align-items: center;justify-content: center;flex-direction: column;opacity:0;}
.close{position: absolute;right:10px;top:10px;width:30px;cursor: pointer;z-index:9999999999;display:none;}
.layer-iframe .info{position: relative;background:#fff;width:100%;height:100%;}
.layer-iframe .info .logo{padding:10px;}
.layer-iframe .info .logo img{height:25px;}
.layer-iframe .info .pic{width:45%;text-align:center;margin:10px auto;}
.layer-iframe .info .alt{text-align:center;}
.layer-iframe .info .alt h2{color:#0166B3;font-size:20px;font-weight:bold;margin-bottom:5px;}
.layer-iframe .info .alt h3{font-size:14px;color:#999;}
.layer-iframe.show{bottom:0;opacity:1;}
.layer-iframe .company{position: absolute;bottom:0;left:0;width:100%;padding:0 10px;text-align:center;}
.layer-iframe .company::after{background:url(../images/company.png) no-repeat center / cover;content:"";position: absolute;left:0;bottom:0;width:100%;height:200%;z-index:2;}
.layer-iframe .company .t{position: relative;display:flex;align-items: center;justify-content: center;margin-bottom:8px}
.layer-iframe .company .t .line{background:#0166B3;flex:1;height:5px;}
.layer-iframe .company .t h2{padding:0 15px;display:inline-block;color:#000;font-weight:bold;font-size:18px;position: relative;z-index:99;}
.layer-iframe .company h3{font-size:14px;color:#0166B3;}
.layer-iframe .company h4{font-size:12px;color:#0166B3;}
.layer-iframe .company .tel{display:flex;align-items: center;justify-content: center;}
.layer-iframe .company .tel .t{margin:8px 0;display:flex;align-items: center;flex-direction: column;justify-content: center;}
.layer-iframe .company .tel .t h5{font-size:14px;font-weight:bold;}
.layer-iframe .company .tel .t p{font-size:11px;}
.layer-iframe .company .tel a{margin-left:10px;font-weight:bold;color:#0166B3;font-size:20px}
.layer-iframe .btn{width:100px;height:100px;margin:0px auto;text-align:center;position: relative;z-index:5;border-radius:100%;display:flex;align-items: center;justify-content: center;flex-direction: column;}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.layer-iframe .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../images/btn_bg.png) no-repeat center / cover;
    border-radius: inherit;
    animation: spin 4s linear infinite;
    z-index: -1;
}
.layer-iframe .btn img{height:25px}
.layer-iframe .btn span{color:#0166B3;font-size:12px;font-weight:bold;margin-top:5px;}

.index_1{height:18vh;width:100%;background:url(../images/index1.jpg) no-repeat center / cover;}
.index_2{height:calc(65vh - 49px);;position: relative;}
.index_2 .p{position: absolute;left:0;top:0;width:100%;height:100%;background:url(../images/index2.jpg) no-repeat center / cover;}
.index_3{height:20vh;padding:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
.index_3 .logo{padding:0 auto;text-align:center; position: fixed; bottom: -8px; z-index: 0;}
.index_3 .logo img{width:100%;}
.index_3 .alt{text-align:center;color:#fff;padding-top: 0%; z-index: 9999;;}
.index_3 .alt h3{font-size:20px;font-weight:bold;}
.index_3 .alt p{font-size:12px;}
.index_3 .bg img{width:100%;height:150px;}
.pro_index{height:calc(50vh - 49px);;position: relative;display:flex;align-items:center;justify-content:center}
#iframe3{position: absolute;display:none;left:0;top:0;opacity:0;width:100%;height:100vh;z-index:999999999}
#iframe3 img{width:100%;height:100%;}