/* pc */
@media only screen and (min-width: 750px) {

    /* 产品应用 */
    .application {
        /* background-image: url(/web/img/yobg.jpg); */
        /* background-size: 1920px 100%;
        background-repeat: no-repeat;
        background-position: center center; */
        position: relative;
    }

    .application::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/web/img/yobg.jpg);
        background-size: 1920px 100%;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -3;
    }

    .appli_list {
        display: flex;
        justify-content: space-between;
        padding: 74px 0 75px 0;
        position: relative;
        border-top: 1px dashed #cecece;
    }

    .appli_list:nth-child(1) {
        border: none;
    }

    .appli_list:nth-child(1)::after {
        display: none;
    }

    .appli_list::after {
        position: absolute;
        content: "";
        width: 1320px;
        height: 118px;
        background-image: url(/web/img/yinying.png);
        background-size: 100% 100%;
        z-index: -2;
        top: 0px;
        left: 0px;
    }

    .appli_left {
        width: 504px;
        height: 356px;
        background-color: #f2f2f2;
        box-sizing: border-box;
        border: 15px solid #f2f2f2;
        overflow: hidden;
    }

    .appli_left img {
        width: 100%;
        height: 100%;
        display: block;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

    .appli_right {
        padding-left: 50px;
        padding-right: 35px;
        width: 680px;
    }

    .appli_tit {
        font-size: 30px;
        color: #0270c1;
        margin-top: 25px;
    }

    .appli_text {
        font-size: 20px;
        color: #5c5c5c;
        -webkit-line-clamp: 4;
        line-height: 32px;
        margin-top: 20px;
        height: 128px;
    }

    .details {
        font-size: 16px;
        color: #656567;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
        width: 113px;
        height: 32px;
        border: 1px solid #ababab;
    }

    .details img {
        width: 11px;
        height: 10px;
        margin-left: 8px;
    }

    .details .img1,
    .appli_list:hover .details .img2 {
        display: block;
    }

    .details .img2,
    .appli_list:hover .details .img1 {
        display: none;
    }

    .appli_list_cont{
        display: flex;
        position: relative;
    }

    .appli_list_cont::before {
        position: absolute;
        content: '';
        left: 0px;
        top: 0;
        right: 0px;
        bottom: 0px;
        /* width: 100%; */
        /* height: 356px; */
        background-color: rgba(1, 112, 193, .7);
        transition: -webkit-transform 0.4s ease;
        transition: transform 0.4s ease;
        transition: transform 0.4s ease, -webkit-transform 0.4s ease;
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        transform: scale(0, 1);
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        z-index: -1;
    }

    .appli_list:hover  .appli_list_cont::before {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
    }

    .appli_list_cont:nth-child(2)::before{
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
    }
    .appli_list:nth-child(2):hover  .appli_list_cont::before{
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
    }




    .appli_list:hover .appli_tit, .appli_list:hover .appli_text{
        color: #fff;
    }
    .appli_list:hover .details {
        color: #fff;
        border: 1px solid #fff;
    }
    .appli_list:hover .appli_left img{
        transform: scale(1.2);
    }

    /* 产品应用详情页 */
    .applidelt {
        display: flex;
        justify-content: space-between;
        padding: 77px 0 55px 0;
    }

    .applidelt_left {
        width: 978px;
        box-shadow: 0 0 8px 2px rgba(229, 233, 243, .9);
        border-radius: 5px;
        overflow: hidden;
        padding: 35px 0 100px 0;
        background-color: #fff;
    }

    .applidelt_left_tit {
        width: 100%;
        height: 63px;
        background-image: url(/web/img/aptit.png);
        background-size: 100% 100%;
        color: #fff;
        line-height: 63px;
        font-size: 30px;
        padding: 0 38px;
        box-sizing: border-box;
    }

    .applidelt_left_tit span {
        font-weight: bold;
        display: inline-block;
        margin-right: 20px;
    }

    .applidelt_left_text {
        margin-top: 66px;
        padding: 0 55px;
        font-size: 20px;
        color: #5c5c5c;
        line-height: 41px;
        text-indent: 2em;
    }

    .applidelt_left_text img {
        max-width: 100%;
        display: block;
        margin: auto;
    }

    .applidelt_left_text p,
    .applidelt_left_text span {
        font-size: 20px;
        color: #5c5c5c;
        line-height: 41px;
    }

    .applidelt_right {
        width: 315px;
    }

    .applidelt_right .applidelt_list {
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 8px 2px rgba(229, 233, 243, .9);
        border-radius: 5px;
        overflow: hidden;
        margin-top: 25px;
    }

    .applidelt_right .applidelt_list:nth-child(1) {
        margin-top: 0;
    }

    .applidelt_list_tit {
        display: flex;
        align-items: center;
        height: 66px;
        padding: 0 30px;
        background: linear-gradient(to right, #dee9f5, #f3f8fc);
    }

    .applidelt_list_tit img {
        width: 31px;
        height: 31px;
        display: block;
    }

    .applidelt_list_tit p {
        color: #0270c1;
        font-size: 25px;
        margin-left: 20px;
    }

    .applidelt_list_text {
        padding: 15px 30px 15px 30px;
    }

    .applidelt_list_text .wen {
        font-size: 16px;
        color: #676767;
        line-height: 20px;
        -webkit-line-clamp: 3;
        height: 60px;
    }

    .applidelt_list_text .details {
        margin-top: 16px;
        margin-left: auto;
    }

}

/* 移动 */
@media only screen and (max-width: 750px) {

    /* 产品应用 */
    .application {
        position: relative;
    }
    .application::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(/web/img/yobg.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
        z-index: -3;
    }

    .appli_list {
        display: flex;
        justify-content: space-between;
        padding: 9.867vw 0 5vw 0;
        position: relative;
        border-top: 0.133vw dashed #cecece;
        flex-direction: column;
    }

    .appli_list:nth-child(2) {
        flex-direction: column-reverse;
    }

    .appli_list:nth-child(1) {
        border: none;
    }

    .appli_list:nth-child(1)::after {
        display: none;
    }

    .appli_list::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 10vw;
        background-image: url(/web/img/yinying.png);
        background-size: 100% 100%;
        z-index: -2;
        top: 0px;
        left: 0px;
    }

    .appli_left {
        width: 100%;
        height: 62vw;
        background-color: #f2f2f2;
        box-sizing: border-box;
        border: 2vw solid #f2f2f2;
        overflow: hidden;
    }

    .appli_left img {
        width: 100%;
        height: 100%;
        display: block;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

    .appli_right {
        padding: 2vw 3vw 5vw 3vw;
        width: 100%;
        box-sizing: border-box;
    }

    .appli_tit {
        font-size: 4.5vw;
        color: #0270c1;
        margin-top: 3.333vw;
    }

    .appli_text {
        font-size: 3.5vw;
        color: #5c5c5c;
        -webkit-line-clamp: 4;
        line-height: 5vw;
        margin-top: 2.667vw;
        height: 20vw;

    }

    .details {
        font-size: 3vw;
        color: #656567;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 6.667vw;
        width: 18vw;
        height: 6vw;
        border: 0.133vw solid #ababab;
    }

    .details img {
        width: 1.467vw;
        height: 1.333vw;
        margin-left: 1.067vw;
    }

    .details .img1,
    .appli_list:hover .details .img2 {
        display: block;
    }

    .details .img2,
    .appli_list:hover .details .img1 {
        display: none;
    }

    .appli_list_cont{
        position: relative;
    }

    .appli_list_cont::before {
        position: absolute;
        content: '';
        left: 0px;
        top: 0;
        right: 0px;
        bottom: 0px;
        background-color: rgba(1, 112, 193, .7);
        transition: -webkit-transform 0.4s ease;
        transition: transform 0.4s ease;
        transition: transform 0.4s ease, -webkit-transform 0.4s ease;
        -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
        transform: scale(0, 1);
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
        z-index: -1;
    }

    .appli_list:hover  .appli_list_cont::before {
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
    }

    .appli_list_cont:nth-child(2)::before{
        -webkit-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        transform: scale(1, 1);
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
    }
    .appli_list:nth-child(2):hover  .appli_list_cont::before{
        -webkit-transform-origin: left center;
        -ms-transform-origin: left center;
        transform-origin: left center;
    }

    .appli_list:hover .appli_tit, .appli_list:hover .appli_text{
        color: #fff;
    }
    .appli_list:hover .details {
        color: #fff;
      border: 0.133vw solid #fff;
    }
    .appli_list:hover .appli_left img{
        transform: scale(1.2);
    }

    /* 产品应用详情页 */
    .applidelt {

        padding: 10.267vw 0 7.333vw 0;
    }

    .applidelt_left {
        box-shadow: 0 0 1.067vw 0.267vw rgba(229, 233, 243, .9);
        border-radius: 0.667vw;
        overflow: hidden;
        padding: 4.667vw 0 13.333vw 0;
        background-color: #fff;
    }

    .applidelt_left_tit {
        width: 100%;
        height: 8.400vw;
        background-image: url(/web/img/aptit.png);
        background-size: 100% 100%;
        color: #fff;
        line-height: 8.400vw;
        font-size: 4.5vw;
        padding: 0 5.067vw;
        box-sizing: border-box;
    }

    .applidelt_left_tit span {
        font-weight: bold;
        display: inline-block;
        margin-right: 2.667vw;
    }

    .applidelt_left_text {
        margin-top: 8.800vw;
        padding: 0 7.333vw;
        font-size: 3.5vw;
        color: #5c5c5c;
        line-height: 5.467vw;
        text-indent: 2em;
    }

    .applidelt_left_text img {
        max-width: 100%;
        display: block;
        margin: auto;
    }

    .applidelt_left_text p,
    .applidelt_left_text span {
        font-size: 3.5vw;
        color: #5c5c5c;
        line-height: 5.467vw;
    }

    .applidelt_right {
        width: 42.000vw;
        display: none;
    }

    .applidelt_right .applidelt_list {
        width: 100%;
        background-color: #fff;
        box-shadow: 0 0 1.067vw 0.267vw rgba(229, 233, 243, .9);
        border-radius: 0.667vw;
        overflow: hidden;
        margin-top: 3.333vw;
    }

    .applidelt_right .applidelt_list:nth-child(1) {
        margin-top: 0;
    }

    .applidelt_list_tit {
        display: flex;
        align-items: center;
        height: 8.800vw;
        padding: 0 4.000vw;
        background: linear-gradient(to right, #dee9f5, #f3f8fc);
    }

    .applidelt_list_tit img {
        width: 4.133vw;
        height: 4.133vw;
        display: block;
    }

    .applidelt_list_tit p {
        color: #0270c1;
        font-size: 4vw;
        margin-left: 2.667vw;
    }

    .applidelt_list_text {
        padding: 2.000vw 4.000vw 2.000vw 4.000vw;
    }

    .applidelt_list_text .wen {
        font-size: 3vw;
        color: #676767;
        line-height: 2.667vw;
        -webkit-line-clamp: 3;
        height: 8.000vw;
    }

    .applidelt_list_text .details {
        margin-top: 2.133vw;
        margin-left: auto;
    }
}