@charset "UTF-8";
.work-wrap {
    position: relative; 
    height: 100%; 
    color: #fff; 
    background-image: url('../img/sub_work.jpg'); 
    background-size: cover;
    padding: 0 30px;
    padding-bottom: 30px;
}

.work-inner {
    padding-top: 126px;
    padding-bottom: 10px;
    line-height: 32px;
}
.work-inner h1 {
    padding-bottom: 40px;
}

.ourwork-wrap {width: 100%;}
.our-work-list li {margin: 0px auto 50px;}
.our-work-list img {width: 100px; float: left; padding-top: 25px;}

.inconvenient-wrap {
    position: relative;
    width: 320px;
    height: 130px;
    padding-left: 50px;
    background-color: #037eff;
    border-radius: 80px;
    box-shadow: 10px 10px 10px #000;
}
.inconvenient-wrap a > img {position: absolute; top: 0; right: 50px; width: 33px;}
.grtz-wrap {
    position: relative;
    width: 320px;
    height: 130px;
    padding-left: 50px;
    background-color: #fff;
    color: black;
    /* color: #2457a8; */
    border-radius: 80px;
}
.grtz-wrap a > img {position: absolute; top: 0; right: 50px; width: 33px;}

.kitsune-wrap {
    position: relative;
    width: 320px;
    height: 130px;
    padding-left: 50px;
    background-color: #bc3031;
    border-radius: 80px;
}
.kitsune-wrap a > img {position: absolute; top: 0; right: 50px; width: 33px;}
.wainft-wrap {
    position: relative;
    width: 320px;
    height: 130px;
    padding-left: 50px;
    background-color: #000;
    border-radius: 80px;
}
.wainft-wrap a > img {position: absolute; top: 0; right: 50px; width: 33px;}

.wisec-wrap {
    position: relative;
    width: 320px;
    height: 130px;
    padding-left: 50px;
    background-color: #fff;
    color: #000;
    border-radius: 80px;
}
.kok-wrap {
    position: relative;
    width: 320px;
    height: 130px;
    padding-left: 50px;
    background-color: #FE6D00;
    border-radius: 80px;
    box-shadow: 10px 10px 10px #000;
}
.kok-wrap a > img {position: absolute; top: 0; right: 50px; width: 33px;}
.in-tit {position: absolute; bottom: 25px;}

.commingsoon {padding-top: 25px; font-size: 0.8em;}
@media screen and (max-width: 339px) {
    .work-wrap {
        padding: 0 10px;
    }
    .grtz-wrap {
        width: 260px;
        padding-left: 25px;
    }
    .grtz-wrap > .in-tit {font-size: 0.9em;}
    .kitsune-wrap, .inconvenient-wrap, .wainft-wrap, .wisec-wrap, .kok-wrap  {
        width: 260px;
        padding-left: 35px;
    }
}
@media screen and (max-width: 767px) {
    .work-wrap {
        text-align: center;
    }
    .in-txt {display: none;}
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .our-work-list img {width: 150px; padding-top: 40px;}
    .inconvenient-wrap, .grtz-wrap, .kitsune-wrap, .wainft-wrap, .wisec-wrap, .kok-wrap  {
        width: 500px; 
        height: 200px; 
        border-radius: 100px;
    }
    .in-tit {bottom: 55px; font-size: 1.3em;}
    .inconvenient-wrap > .in-tit {bottom: 65px;}
    .inconvenient-wrap > .in-txt {width: 300px; bottom: 15px; text-align: left;}
    .in-txt {position: absolute; bottom: 30px;}
    .inconvenient-wrap a > img {top: 10px;}
    .grtz-wrap a > img {top: 10px;}
    .kitsune-wrap a > img {top: 10px;}
    .wainft-wrap a > img {top: 10px;}
    .kok-wrap a >img {top: 10px;}
}
@media screen and (min-width: 1280px) {
    .padding-top40 {padding-top: 40px !important;}

    .wo-txt {position: relative;}
    .work-inner h1{font-size: 2.5em;}
    .work-inner h1::after{
        content: '';
        display: block;
        position: absolute;
        top: 140px;
        left: 450px;
        width: 50px;
        border-top: 1px dotted #aaa;
    }
    .wo-txt {position: absolute; top: 125px; left: 550px; color: #ddd;}
    .inconvenient-wrap img, .grtz-wrap img, .kitsune-wrap img, .wisec-wrap img, .kok-wrap img {width: 200px; padding-top: 75px; margin-left: 170px;}
    .wainft-wrap img {width: 200px; padding-top: 55px; margin-left: 170px;}
    .inconvenient-wrap, .grtz-wrap, .kitsune-wrap, .wainft-wrap, .wisec-wrap, .kok-wrap  {
        width: 1550px; 
        height: 200px; 
        border-radius: 100px;
    }
    .in-tit {top: 65px; font-size: 1.5em; left: 600px;}
    .in-txt {position: absolute; top: 100px; font-size: 1.1em; left: 600px;}
    .kitsune-wrap > img {padding-top: 40px;}
    .inconvenient-wrap a > img {top: 0; right: 100px; width: 55px;}
    .grtz-wrap a > img {top: 0; right: 100px; width: 55px;}
    .kitsune-wrap a > img {top: 0; right: 100px; width: 55px;}
    .wainft-wrap a > img {top: 0; right: 100px; width: 55px; padding-top: 75px;}
    .commingsoon {position: absolute; top: 50px; right: 50px; font-size: 1.1em;}
    .kok-wrap a > img {top: 0; right: 100px; width: 55px;}
}
@media screen and (min-width: 1550px) {}