@media only screen and (min-width: 1242px) {
    .banner-img{
        width: 100%;
        height: 23.6vw;
        padding-top: 11.8vw;
        background: url("../imgs/process/banner.jpg") no-repeat 0 0/cover;
    }
    .banner-img > h1{
        font-size: 3vw;
        font-weight: 100;
        text-align: center;
        color: #ffffff;
        vertical-align: 100%;
    }
    .banner-img > p{
        margin-top: 2.3vw;
        font-size: 0.7vw;
        text-align: center;
        letter-spacing: 0px;
        color: #ffffff;
    }
    section{
        width: 1242px;
        margin: 40px auto 0;
    }
    section > div{
        position: relative;
        width: 100%;
        height: 320px;
        margin-bottom: 10px;
        background-color: #ffffff;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -ms-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
    }
    .divnone{
        display: block;
        margin-top: 320px;
    }
    section > div > div{
        width: 100%;
        height: 100%;
        padding: 164px 0 0 114px;
    }
    section > div:nth-child(1) >div{
        background: url("../imgs/process/NO1.png") no-repeat 0 0/106px 78px ,url("../imgs/process/01.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(2) >div{
        background: url("../imgs/process/NO2.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/02.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(3) >div{
        background: url("../imgs/process/NO3.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/03.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(4) >div{
        background: url("../imgs/process/NO4.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/04.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(5) >div{
        background: url("../imgs/process/no5.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/05.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(6) >div{
        background: url("../imgs/process/NO6.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/06.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(7) >div{
        background: url("../imgs/process/no7.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/07.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(8) >div{
        background: url("../imgs/process/no8.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/08.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div:nth-child(9) >div{
        background: url("../imgs/process/NO9.jpg") no-repeat 0 0/106px 78px ,url("../imgs/process/09.jpg") no-repeat 674px 81px/505px 320px;
    }
    section > div > div > h1{
        font-size: 40px;
        color: #0e0f12;
    }
    section > div > div > p{
        margin-top: 42px;
        font-size: 14px;
        color: #434f5c;
    }
}
@media only screen and (max-width: 1242px) {
    .banner-img{
        width: 100%;
        height: 88vw;
        margin-bottom: 1vw;
        padding-top: 30vw;
        background: url("../imgs/mobile/process/banner.jpg") no-repeat 0 0/cover;
    }
    .banner-img > h1{
        font-size: 5vw;
        text-align: center;
        line-height: 3vw;
        color: #ffffff;
        color: #ffffff;
    }
    .banner-img > p{
        margin: 10vw auto 0;
        font-size: 3vw;
        text-align: center;
        letter-spacing: 0vw;
        color: #ffffff;
    }
    section{
        width: 100%;
        background: #ffffff;
    }
    section > div > div{
        width: 100%;
        height: 105vw;
        margin-bottom: 1vw;
        padding-top: 20vw;
    }
    section > div > div > h1{
        font-size: 6vw;
        text-align: center;
        line-height: 4vw;
        letter-spacing: 0vw;
        color: #434f5c;
    }
    section > div > div > p{
        width: 88vw;
        margin: 6vw auto 0;
        font-size: 3vw;
        line-height: 5vw;
        letter-spacing: 0vw;
        color: #120b0a;
    }
    section > div:nth-child(1) > div{
        background: url("../imgs/mobile/process/no1.jpg") no-repeat 41vw 0/17vw 11vw,url("../imgs/mobile/process/step1.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(2) > div{
        background: url("../imgs/mobile/process/no2.jpg") no-repeat 41vw 0/17vw 11vw,url("../imgs/mobile/process/step2.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(3) > div{
        background: url("../imgs/mobile/process/no3.jpg") no-repeat 41vw 0/18vw 11vw,url("../imgs/mobile/process/step3.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(4) > div{
        background: url("../imgs/mobile/process/no4.jpg") no-repeat 41vw 0/18vw 11vw,url("../imgs/mobile/process/step4.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(5) > div{
        background: url("../imgs/mobile/process/no5.jpg") no-repeat 41vw 0/17vw 11vw,url("../imgs/mobile/process/step5.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(6) > div{
        background: url("../imgs/mobile/process/no1.jpg") no-repeat 41vw 0/17vw 11vw,url("../imgs/mobile/process/step6.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(7) > div{
        background: url("../imgs/mobile/process/no1.jpg") no-repeat 41vw 0/18vw 11vw,url("../imgs/mobile/process/step7.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(8) > div{
        background: url("../imgs/mobile/process/no1.jpg") no-repeat 41vw 0/18vw 11vw,url("../imgs/mobile/process/step8.jpg") no-repeat 0 58vw/100%;
    }
    section > div:nth-child(9) > div{
        background: url("../imgs/mobile/process/no1.jpg") no-repeat 41vw 0/17vw 11vw,url("../imgs/mobile/process/step9.jpg") no-repeat 0 58vw/100%;
    }
}