#introducebox{
}
#introducebox .wantaJ{
    display: flex;
}
#introducebox .wantaJ:before{
    content:"";
    position: absolute;
    width: 100%;
    height: 520px;
    background: #f1f1f15e;
    z-index: -1;
    bottom: -70px;
}
#introducebox .wantaJ .leftboxJ{
    width: 52%;
    display: flex;
    flex-direction: column;
}
#introducebox .wantaJ .rightboxJ{
    display: flex;
    flex-direction: column;
    width: calc(48% - 140px);
    margin: 0 auto;
    justify-content: center;
}
#introducebox .woplist{
    position: relative;
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    padding: 31px 0;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}
#introducebox .woplist:hover{
    -moz-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform:translateX(-10px);
}
#introducebox .woplist a.masklink{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 5;
}
#introducebox .woplist:hover .gogo a{
    background: #3764a7;
}
#introducebox .woplist .num{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 70px;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    color: #3764a7;
}
#introducebox .woplist .mifom{
    display: flex;
    flex-direction: column;
    width: calc(100% - 80px);
}
#introducebox .woplist .mifom h4{
    font-size: 22px;
    margin-bottom: 8px;
}
#introducebox .textJ{
    display: flex;
    flex-wrap: wrap;
}
#introducebox .textJ p{
    padding-left: 20px;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
}
#introducebox p.threeJ{
    width: 33.3%;
}
#introducebox p.full{
    width: 100%;
}
#introducebox .textJ p:before{
    content:"";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #5c5c5c;
    left: 0;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform:rotate(45deg);
}
#introducebox .woplist .num:before{
    content:"";
    width: 1px;
    height: calc(100% - 35px);
    position: absolute;
    bottom: 0;
    margin-left: 16px;
    background: #3764a79e;
}
#introducebox .gogo{
    display: flex;
    flex-direction: column;
    width: 100px;
    justify-content: center;
    margin-top: 20px;
}
#introducebox .gogo a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    padding: 20px;
    border-radius: 500px;
    border: #dbdbdb 1px solid;
}

#introducebox .woplist:hover .gogo a img{
    filter: brightness(9527);
}

#introducebox .gogo img{
    width: 60px;
}
@media screen and (max-width: 1280px) {
    #introducebox .wantaJ {
        display: flex;
        flex-direction: column;
    }
    #introducebox .wantaJ .leftboxJ{
        width: 100%;
    }
    #introducebox .wantaJ .rightboxJ{
    width: calc(100% - 0px);
}
    #introducebox .wantaJ .leftboxJ img{
    width: 477px;
    object-fit: cover;
    object-position: 50% 50%;
    margin: 0 auto;
}
}
@media screen and (max-width: 640px){
    #introducebox .textJ{
        flex-direction: column;
    }
    #introducebox p.threeJ{
        width: 100%;
    }
    #introducebox .gogo{
}
    #introducebox .gogo a{
        width: 50px;
        height: 50px;
        padding: 5px;
    }
    #introducebox .gogo img{
    width: 22px;
}
}

@media screen and (max-width: 480px){
#introducebox .woplist{
    display: flex;
    flex-wrap: wrap;
    width: 96%;
    border: #e7e7e7 1px solid;
    margin: 8px auto;
    padding: 43px 16px;
    flex-direction: column;
    }
    #introducebox .woplist:hover{
    moz-transform: unset;
    -webkit-transform: unset;
    -o-transform: unset;
    -ms-transform: unset;
    transform: unset;
}
    #introducebox .gogo{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #introducebox .woplist .num{
        width: 33px;
    }
    #introducebox .woplist .mifom{
        width: calc(100% - 0px);
    }
    #introducebox .wantaJ:before{
    background: unset;
}
}