@media only screen and (min-width:1024px) {
    .clear{clear: both;}
    .mid{width: 1002px;margin: 5px auto;}
    .mid .top{width: 100%;}
    .mid .top .top_left{width: 48%;float: left;border-top:1px solid #000;border-bottom: 1px solid #000;}
    .mid .top .top_left .intro{width:100%;padding: 0 10px;}
    .mid .top .top_left .calc{width: 100%;}
    .mid .top .top_left .calc form{border:1px solid #000;padding: 5px;}
    .mid .top .top_left .calc .midtitle h2{background-size: 230% 120%;}
    .mid .top .top_left .calc form button{margin-left:20px;width: 90px; }
    .mid .top .top_left .calc form label.limt{width: 210px;display: inline-block;text-align: justify;text-align-last: justify;text-transform: capitalize;}
    .mid .top .top_right{width: 48%;float: right;}
    .mid .top .top_right embed{width:480px;height:360px;}

    .mid .center{width: 100%;margin: auto;float: left;}
    .mid .center .midtitle h2,.mid .top .top_left .calc .midtitle h2{display: flex;align-items: flex-end; font-size: 16px; background-image: url("../images/titlebg.jpg");background-repeat: no-repeat;height: 38px;font-weight: bold;text-transform: capitalize;padding: 0;margin: 0;color: #fff;}
    .mid .center .midtitle h2{background-size: 110% 120%;}
    .mid .center ul{list-style: none;width: 100%;padding: 0;margin: 10px 0;}
    .mid .center ul li{display: inline-block;width: 250px;height: 220px;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;}
    .mid .center ul li a{display: block;text-align: center;text-decoration: none;}
    .mid .center ul li img{width: 220px;height: 180px;margin:5px auto;}
    .mid #bott{width: 1002px;margin: 5px auto;}
    .mid #bott .mid_title99{
        clear:both;
        height:38px;
        padding-left:5px;
        padding-bottom:3px;
        border-bottom:#CC6600 solid 1px;
        color:#000000;
        font-size:14px;
        font-weight:bold;
        cursor:pointer;
    }
    .mid #bott .mid_title99 div{ float:left; line-height:41px; padding-left:10px; padding-right:10px; margin-right:5px; background:#CCCCCC;text-transform: capitalize;width: 140px;text-align: center;}
    .mid #bott .mid_title99 div.hover{background:#C60;color:#000011;}
    .mid #bott .mid_title99 div:hover{background:#C60;color:#000011;}
    .mid #bott .bott-left{float:left;clear:both;width:50%;/*height:800px;*/border:0px;line-height:25pt;overflow: hidden;}
    .mid #bott .bott-left ul
    {
        margin-top:10px;list-style: none;
    }
    .mid #bott .bott-left li{
        border:1px solid #ccc;
    }
    .mid #bott .bott-left p
    {
        font-size:14px;
        line-height: 26px;
    }
    .mid #bott .bott-left a
    {
        font-weight:bold;
    }
    .mid #bott #con_mm_3{padding-top: 10px;padding-bottom: 10px;}
    .mid #bott #con_mm_3 .trans_image_box {
        width: 1500px;  /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
        height: 375px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    .mid #bott #con_mm_3 .trans_image_box img{
        display:inline-block;
        margin: 0;
        width: 500px;
    }
    .mid #bott #con_mm_3 .trans_image {
        width: 500px;  /*这些根据需求可自定义*/
        height:375px;
        float: left;
        margin-left: 0px;
    }
}

@media only screen and (min-width:993px) and (max-width:1023px){
    .clear{clear: both;}
    .mid{width: 993px;margin: 5px auto;}
    .mid .top{width: 100%;}
    .mid .top .top_left{width: 48%;float: left;border-top:1px solid #000;border-bottom: 1px solid #000;}
    .mid .top .top_left .intro{width:100%;padding: 0 10px;}
    .mid .top .top_left .calc{width: 100%;}
    .mid .top .top_left .calc form{border:1px solid #000;padding: 5px;}
    .mid .top .top_left .calc .midtitle h2{background-size: 230% 110%;}
    .mid .top .top_left .calc form button{margin-left:20px;width: 90px; }
    .mid .top .top_left .calc form label.limt{width: 210px;display: inline-block;text-align: justify;text-align-last: justify;text-transform: capitalize;}
    .mid .top .top_right{width: 48%;float: right;}
    .mid .top .top_right embed{width:475px;height:360px;}

    .mid .center{width: 100%;margin: auto;float: left;}
    .mid .center .midtitle h2,.mid .top .top_left .calc .midtitle h2{display: flex;align-items: flex-end; font-size: 15px; background-image: url("../images/titlebg.jpg");background-repeat: no-repeat;height: 35px;font-weight: bold;text-transform: capitalize;padding: 0;margin: 0;color: #fff;}
    .mid .center .midtitle h2{background-size: 110% 120%;}
    .mid .center ul{list-style: none;width: 100%;padding: 0;margin: 10px 0;}
    .mid .center ul li{display: inline-block;width: 250px;height: 220px;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;}
    .mid .center ul li a{display: block;text-align: center;text-decoration: none;}
    .mid .center ul li img{width: 220px;height: 180px;margin:5px auto;}
    .mid #bott{width: 993px;margin: 5px auto;}
    .mid #bott .mid_title99{
        clear:both;
        height:38px;
        padding-left:5px;
        padding-bottom:3px;
        border-bottom:#CC6600 solid 1px;
        color:#000000;
        font-size:14px;
        font-weight:bold;
        cursor:pointer;
    }
    .mid #bott .mid_title99 div{ float:left; line-height:41px; padding-left:10px; padding-right:10px; margin-right:5px; background:#CCCCCC;text-transform: capitalize;width: 140px;text-align: center;}
    .mid #bott .mid_title99 div.hover{background:#C60;color:#000011;}
    .mid #bott .mid_title99 div:hover{background:#C60;color:#000011;}
    .mid #bott .bott-left{float:left;clear:both;width:50%;/*height:800px;*/border:0px;line-height:25pt;overflow: hidden;}
    .mid #bott .bott-left ul
    {
        margin-top:10px;list-style: none;
    }
    .mid #bott .bott-left li{
        border:1px solid #ccc;
    }
    .mid #bott .bott-left p
    {
        font-size:14px;
        line-height: 26px;
    }
    .mid #bott .bott-left a
    {
        font-weight:bold;
    }
    .mid #bott #con_mm_3{padding-top: 10px;padding-bottom: 10px;}
    .mid #bott #con_mm_3 .trans_image_box {
        width: 1500px;  /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
        height: 375px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    .mid #bott #con_mm_3 .trans_image_box img{
        display:inline-block;
        margin: 0;
        width: 500px;
    }
    .mid #bott #con_mm_3 .trans_image {
        width: 500px;  /*这些根据需求可自定义*/
        height:375px;
        float: left;
        margin-left: 0px;
    }
}

@media only screen and (min-width:768px) and (max-width:992px){
    .clear{clear: both;}
    .mid{width: 768px;margin: 5px auto;}
    .mid .top{width: 100%;}
    .mid .top .top_left{width: 48%;float: left;border-top:1px solid #000;border-bottom: 1px solid #000;}
    .mid .top .top_left .intro{width:100%;padding: 0 10px;}
    .mid .top .top_left .calc{width: 100%;}
    .mid .top .top_left .calc form{border:1px solid #000;padding: 5px;}
    .mid .top .top_left .calc .midtitle h2{background-size: 230% 110%;}
    .mid .top .top_left .calc form button{margin-left:20px;width: 90px; }
    .mid .top .top_left .calc form label.limt{width: 190px;display: inline-block;text-align: justify;text-align-last: justify;text-transform: capitalize;font-size:14px; }
    .mid .top .top_left .calc form input[type=text]{width: 80px;}
    .mid .top .top_right{width: 48%;float: right;}
    .mid .top .top_right embed{width:368px;height:276px;}

    .mid .center{width: 100%;margin: auto;float: left;}
    .mid .center .midtitle h2,.mid .top .top_left .calc .midtitle h2{display: flex;align-items: flex-end; font-size: 15px; background-image: url("../images/titlebg.jpg");background-repeat: no-repeat;height: 35px;font-weight: bold;text-transform: capitalize;padding: 0;margin: 0;color: #fff;}
    .mid .center .midtitle h2{background-size: 110% 120%;}
    .mid .center ul{list-style: none;width: 100%;padding: 0;margin: 10px 0;}
    .mid .center ul li{display: inline-block;width: 230px;height: 202px;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;}
    .mid .center ul li a{display: block;text-align: center;text-decoration: none;}
    .mid .center ul li img{width: 210px;height: 157px;margin:5px auto;}
    .mid #bott{width: 768px;margin: 5px auto;}
    .mid #bott .mid_title99{
        clear:both;
        height:38px;
        padding-left:5px;
        padding-bottom:3px;
        border-bottom:#CC6600 solid 1px;
        color:#000000;
        font-size:14px;
        font-weight:bold;
        cursor:pointer;
    }
    .mid #bott .mid_title99 div{ float:left; line-height:41px; padding-left:10px; padding-right:10px; margin-right:5px; background:#CCCCCC;text-transform: capitalize;width: 120px;text-align: center;}
    .mid #bott .mid_title99 div.hover{background:#C60;color:#000011;}
    .mid #bott .mid_title99 div:hover{background:#C60;color:#000011;}
    .mid #bott .bott-left{float:left;clear:both;width:50%;/*height:800px;*/border:0px;line-height:25pt;overflow: hidden;}
    .mid #bott .bott-left ul
    {
        margin-top:10px;list-style: none;
    }
    .mid #bott .bott-left li{
        border:1px solid #ccc;
    }
    .mid #bott .bott-left p
    {
        font-size:14px;
        line-height: 26px;
    }
    .mid #bott .bott-left a
    {
        font-weight:bold;
    }
    .mid #bott #con_mm_3{padding-top: 10px;padding-bottom: 10px;}
    .mid #bott #con_mm_3 .trans_image_box {
        width: 1500px;  /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
        height: 375px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    .mid #bott #con_mm_3 .trans_image_box img{
        display:inline-block;
        margin: 0;
        width: 500px;
    }
    .mid #bott #con_mm_3 .trans_image {
        width: 500px;  /*这些根据需求可自定义*/
        height:375px;
        float: left;
        margin-left: 0px;
    }
}

@media only screen and (min-width:390px) and (max-width:767px){
    .clear{clear: both;}
    .mid{width: 100%;margin: 5px auto;}
    .mid .top{width: 100%;display: flex;flex-direction: column-reverse;}
    .mid .top .top_right{width: 100%;float: left;}
    .mid .top .top_right embed{width:100%;height:50vw;}
    .mid .top .top_left{width: 100%;float: right;border-top:1px solid #000;border-bottom: 1px solid #000;}
    .mid .top .top_left .intro{width:100%;padding: 0 10px;}
    .mid .top .top_left .calc{width: 100%;}
    .mid .top .top_left .calc form{border:1px solid #000;padding: 5px;}
    .mid .top .top_left .calc .midtitle h2{background-size: 170% 110%;}
    .mid .top .top_left .calc form button{margin-left:20px;width: 90px; }
    .mid .top .top_left .calc form label.limt{width: 190px;display: inline-block;text-align: justify;text-align-last: justify;text-transform: capitalize;font-size:14px; margin-right: 3px;}
    .mid .top .top_left .calc form input[type=text]{width: 100px;}


    .mid .center{width: 100%;margin: auto;float: left;}
    .mid .center .midtitle h2,.mid .top .top_left .calc .midtitle h2{display: flex;align-items: flex-end; font-size: 15px; background-image: url("../images/titlebg.jpg");background-repeat: no-repeat;height: 35px;font-weight: bold;text-transform: capitalize;padding: 0;margin: 0;color: #fff;}
    .mid .center .midtitle h2{background-size: 170% 120%;}
    .mid .center ul{list-style: none;width: 100%;padding: 0;margin: 10px 0;}
    .mid .center ul li{display: inline-block;width: 48%;height: 43vw;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;}
    .mid .center ul li a{display: block;text-align: center;text-decoration: none;}
    .mid .center ul li img{width: 80%;height: 80%;margin:5px auto;}
    .mid #bott{width: 100%;margin: 5px auto;}
    .mid #bott .mid_title99{
        clear:both;
        padding-left:5px;
        padding-bottom:3px;
        border-bottom:#CC6600 solid 1px;
        color:#000000;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap:1vw;
    }
    .mid #bott .mid_title99 div{ float:left; line-height:4vw; background:#CCCCCC;text-transform: capitalize;text-align: center;vertical-align: center;display: flex;align-items: center;justify-content:center;height: 10vw;}
    .mid #bott .mid_title99 div.hover{background:#C60;color:#000011;}
    .mid #bott .mid_title99 div:hover{background:#C60;color:#000011;}
    .mid #bott .bott-left{float:left;clear:both;width:50%;/*height:800px;*/border:0px;line-height:25pt;overflow: hidden;}
    .mid #bott .bott-left ul
    {
        margin-top:10px;list-style: none;
    }
    .mid #bott .bott-left li{
        border:1px solid #ccc;
    }
    .mid #bott .bott-left p
    {
        font-size:14px;
        line-height: 26px;
    }
    .mid #bott .bott-left a
    {
        font-weight:bold;
    }
    .mid #bott #con_mm_3{padding-top: 10px;padding-bottom: 10px;}
    .mid #bott #con_mm_3 .trans_image_box {
        width: 1500px;  /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
        height: 375px;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    .mid #bott #con_mm_3 .trans_image_box img{
        display:inline-block;
        margin: 0;
        width: 500px;
    }
    .mid #bott #con_mm_3 .trans_image {
        width: 500px;  /*这些根据需求可自定义*/
        height:375px;
        float: left;
        margin-left: 0px;
    }
}

@media only screen and (min-width:50px) and (max-width:390px){
    .clear{clear: both;}
    .mid{width: 100%;margin: 5px auto;}
    .mid .top{width: 100%;display: flex;flex-direction: column-reverse;}
    .mid .top .top_right{width: 100%;float: left;}
    .mid .top .top_right embed{width:100%;height:50vw;}
    .mid .top .top_left{width: 100%;float: right;border-top:1px solid #000;border-bottom: 1px solid #000;}
    .mid .top .top_left .intro{width:100%;padding: 0 10px;}
    .mid .top .top_left .intro p span{font-size: 14px;}
    .mid .top .top_left .calc{width: 100%;}
    .mid .top .top_left .calc form{border:1px solid #000;padding: 5px;}
    .mid .top .top_left .calc .midtitle h2{background-size: 200% 110%;}
    .mid .top .top_left .calc form button{margin-left:20px;width: 90px; }
    .mid .top .top_left .calc form label.limt{width: 190px;display: inline-block;text-align: justify;text-align-last: justify;text-transform: capitalize;font-size:14px; margin-right: 3px;}
    .mid .top .top_left .calc form input[type=text]{width: 100px;}


    .mid .center{width: 100%;margin: auto;float: left;}
    .mid .center .midtitle h2,.mid .top .top_left .calc .midtitle h2{display: flex;align-items: flex-end; font-size: 14px; background-image: url("../images/titlebg.jpg");background-repeat: no-repeat;height: 35px;font-weight: bold;text-transform: capitalize;padding: 0;margin: 0;color: #fff;}
    .mid .center .midtitle h2{background-size: 200% 120%;}
    .mid .center ul{list-style: none;width: 100%;padding: 0;margin: 10px 0;}
    .mid .center ul li{display: inline-block;width: 48%;height: 43vw;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;}
    .mid .center ul li a{display: block;text-align: center;text-decoration: none;}
    .mid .center ul li img{width: 80%;height: 80%;margin:5px auto;}
    .mid #bott{width: 100%;margin: 5px auto;}
    .mid #bott .mid_title99{
        clear:both;
        padding-left:5px;
        padding-bottom:3px;
        margin: 10px auto;
        border-bottom:#CC6600 solid 1px;
        color:#000000;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap:1vw;
    }
    .mid #bott .mid_title99 div{ float:left; line-height:4vw; background:#CCCCCC;text-transform: capitalize;text-align: center;vertical-align: center;display: flex;align-items: center;justify-content:center;height: 10vw;}
    .mid #bott .mid_title99 div.hover{background:#C60;color:#000011;}
    .mid #bott .mid_title99 div:hover{background:#C60;color:#000011;}
    .mid #bott .bott-left{float:left;clear:both;width:50%;/*height:800px;*/border:0px;line-height:25pt;overflow: hidden;}
    .mid #bott .bott-left ul
    {
        margin-top:10px;list-style: none;
    }
    .mid #bott .bott-left li{
        border:1px solid #ccc;
    }
    .mid #bott .bott-left p
    {
        font-size:14px;
        line-height: 26px;
    }
    .mid #bott .bott-left a
    {
        font-weight:bold;
    }
    .mid #bott #con_mm_3{padding-top: 10px;padding-bottom: 10px;width: 100%;}
    .mid #bott #con_mm_3 .trans_image_box {
        width: 300%;  /*注意这里是根据图片总长度来确定的，如果小于图片总长度，会出现轮放空白的情况！*/
        height: 50vw;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
        transition: all 1s ease-in-out;
    }
    .mid #bott #con_mm_3 .trans_image_box img{
        display:inline-block;
        margin: 0;
        width: 100%;
    }
    .mid #bott #con_mm_3 .trans_image {
        width: 100%;  /*这些根据需求可自定义*/
        height:50vw;
        float: left;
        margin-left: 0px;
    }
}