@charset "UTF-8";

.work-strategy i,
.work-strategy em,
.work-strategy b {
    font-style: normal;
    font-weight: inherit;
}

.work-plan {
    display: inline-flex !important;
    position: relative;
    text-align: left;
}

.work-plan b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.work-plan b.is-visible {
    position: relative;
}

.work-plan[class*="bg-"] {
    background: #CCC;
}

.work-plan[class*="bg-"] b {
    color: #FFF;
    padding: 1.6px 8px;
    padding: 0.1rem 0.5rem;
}

/* rotate-1 */

.work-strategy.rotate-1 .work-plan {
    perspective: 300px;
}

.work-strategy.rotate-1 b {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: rotateX(180deg);
}

.work-strategy.rotate-1 b.is-visible {
    opacity: 1;
    transform: rotateX(0deg);
    animation: work-strategy-rotate-1-in 1.2s;
}

.work-strategy.rotate-1 b.is-hidden {
    transform: rotateX(180deg);
    animation: work-strategy-rotate-1-out 1.2s;
}

@keyframes work-strategy-rotate-1-in {
    0% {
        transform: rotateX(180deg);
        opacity: 0;
    }
    35% {
        transform: rotateX(120deg);
        opacity: 0;
    }
    65% {
        opacity: 0;
    }
    100% {
        transform: rotateX(360deg);
        opacity: 1;
    }
}

@keyframes work-strategy-rotate-1-out {
    0% {
        transform: rotateX(0deg);
        opacity: 1;
    }
    35% {
        transform: rotateX(-40deg);
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    100% {
        transform: rotateX(180deg);
        opacity: 0;
    }
}

/* type */

.work-strategy.type .work-plan {
    vertical-align: top;
    overflow: hidden;
    position: relative;
    padding-right: 3px;
}

.work-strategy.type .work-plan::after {
    content: ' ';
    position: absolute;
    right: 0;
    top: 5%;
    height: 90%;
    width: 2px;
    display: block;
    background-color: transparent;
}

.work-strategy.type .work-plan.waiting::after {
    animation: 1s work-strategy-pulse step-end infinite;
}

.work-strategy.type .work-plan.selected {
    background-color: #212529 !important;
}

.work-strategy.type .work-plan.selected::after {
    visibility: hidden;
}

.work-strategy.type .work-plan.selected b {
    color: #FFF !important;
}

.work-strategy.type b {
    visibility: hidden;
}

.work-strategy.type b.is-visible {
    visibility: visible;
}

.work-strategy.type i {
    position: absolute;
    visibility: hidden;
}

.work-strategy.type i.in {
    position: relative;
    visibility: visible;
}

.work-strategy.type.type-clean-light .work-plan:after {
    width: 8px;
}

.work-strategy.type.type-clean-light .work-plan.waiting::after {
    animation: 500ms work-strategy-pulse-light step-end infinite;
}

.work-strategy.type.type-clean-light .work-plan.selected {
    background-color: transparent !important;
}

@keyframes work-strategy-pulse {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: black;
    }
}

@keyframes work-strategy-pulse-light {
    from,
    to {
        background-color: transparent;
    }
    50% {
        background-color: white;
    }
}

/* rotate-2 */

.work-strategy.rotate-2 .work-plan {
    perspective: 300px;
}

.work-strategy.rotate-2 i,
.work-strategy.rotate-2 em {
    display: inline-block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.work-strategy.rotate-2 b {
    opacity: 0;
}

.work-strategy.rotate-2 i {
    transform-style: preserve-3d;
    transform: translateZ(-20px) rotateX(90deg);
    opacity: 0;
}

.is-visible .work-strategy.rotate-2 i {
    opacity: 1;
}

.work-strategy.rotate-2 i.in {
    animation: work-strategy-rotate-2-in .4s forwards;
}

.work-strategy.rotate-2 i.out {
    animation: work-strategy-rotate-2-out .4s forwards;
}

.work-strategy.rotate-2 em {
    transform: translateZ(20px);
}

.no-csstransitions .work-strategy.rotate-2 i {
    transform: rotateX(0deg);
    opacity: 0;
}

.no-csstransitions .work-strategy.rotate-2 i em {
    transform: scale(1);
}

.no-csstransitions .work-strategy.rotate-2 .is-visible i {
    opacity: 1;
}

@keyframes work-strategy-rotate-2-in {
    0% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(90deg);
    }
    60% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(-10deg);
    }
    100% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(0deg);
    }
}

@keyframes work-strategy-rotate-2-out {
    0% {
        opacity: 1;
        transform: translateZ(-20px) rotateX(0);
    }
    60% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(-100deg);
    }
    100% {
        opacity: 0;
        transform: translateZ(-20px) rotateX(-90deg);
    }
}

/* loading-bar */

.work-strategy.loading-bar span {
    display: inline-block;
    padding: .2em 0;
}

.work-strategy.loading-bar .work-plan {
    overflow: hidden;
    vertical-align: top;
}

.work-strategy.loading-bar .work-plan::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: #212529;
    z-index: 2;
    transition: width .3s -0.1s;
}

.work-strategy.loading-bar .work-plan.is-loading::after {
    width: 100%;
    transition: width 3s;
}

.work-strategy.loading-bar .work-plan.bg-light::after {
    background-color: #212529 !important;
}

.work-strategy.loading-bar .work-plan[class*="bg-"]:not(.bg-light)::after {
    background-color: #FFF !important;
}

.work-strategy.loading-bar b {
    top: .2em;
    opacity: 0;
    transition: opacity .3s;
}

.work-strategy.loading-bar b.is-visible {
    opacity: 1;
    top: 0;
}

/* slide */

.work-strategy.slide span {
    display: inline-block;
    padding: .2em 0;
}

.work-strategy.slide .work-plan {
    overflow: hidden;
    vertical-align: top;
}

.work-strategy.slide b {
    opacity: 0;
    top: .2em;
}

.work-strategy.slide b.is-visible {
    top: 0;
    opacity: 1;
    animation: slide-in .6s;
}

.work-strategy.slide b.is-hidden {
    animation: slide-out .6s;
}


/* clip */

.work-strategy.clip span {
    display: inline-block;
    padding: .2em 0;
}

.work-strategy.clip .work-plan {
    overflow: hidden;
    vertical-align: top;
}

.work-strategy.clip .work-plan::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #212529;
}

.work-strategy.clip b {
    opacity: 0;
}

.work-strategy.clip b.is-visible {
    opacity: 1;
}

/* zoom */

.work-strategy.zoom .work-plan {
    perspective: 300px;
}

.work-strategy.zoom b {
    opacity: 0;
}

.work-strategy.zoom b.is-visible {
    opacity: 1;
    animation: zoom-in .8s;
}

.work-strategy.zoom b.is-hidden {
    animation: zoom-out .8s;
}


.work-strategy.rotate-3 .work-plan {
    perspective: 300px;
}

.work-strategy.rotate-3 b {
    opacity: 0;
}

.work-strategy.rotate-3 i {
    display: inline-block;
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.is-visible .work-strategy.rotate-3 i {
    transform: rotateY(0deg);
}

.work-strategy.rotate-3 i.in {
    animation: work-strategy-rotate-3-in .6s forwards;
}

.work-strategy.rotate-3 i.out {
    animation: work-strategy-rotate-3-out .6s forwards;
}

.no-csstransitions .work-strategy.rotate-3 i {
    transform: rotateY(0deg);
    opacity: 0;
}

.no-csstransitions .work-strategy.rotate-3 .is-visible i {
    opacity: 1;
}

@keyframes work-strategy-rotate-3-in {
    0% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes work-strategy-rotate-3-out {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

/* scale */

.work-strategy.scale b {
    opacity: 0;
}

.work-strategy.scale i {
    display: inline-block;
    opacity: 0;
    transform: scale(0);
}

.is-visible .work-strategy.scale i {
    opacity: 1;
}

.work-strategy.scale i.in {
    animation: scale-up .6s forwards;
}

.work-strategy.scale i.out {
    animation: scale-down .6s forwards;
}

.no-csstransitions .work-strategy.scale i {
    transform: scale(1);
    opacity: 0;
}

.no-csstransitions .work-strategy.scale .is-visible i {
    opacity: 1;
}


.work-strategy.push b {
    opacity: 0;
}

.work-strategy.push b.is-visible {
    opacity: 1;
    animation: push-in .6s;
}

.work-strategy.push b.is-hidden {
    animation: push-out .6s;
}



/* Home Concept */

.work-plan-concept {
    background: transparent url(../img/home/home-concept.png) no-repeat center 0;
    width: 100%;
    overflow: hidden;
}

.work-plan-concept strong {
    display: block;
    font-family: "Shadows Into Light", cursive;
    font-size: 1.8em;
    font-weight: normal !important;
    position: relative;
    margin-top: 30px;
    color: #0d6efd;
}

.work-plan-concept .row {
    position: relative;
}

.work-plan-concept .plan-image {
    background: transparent url(../img/home/home-concept-item.png) no-repeat 0 0;
    width: 160px;
    margin: 120px auto 0 auto;
    padding-bottom: 50px;
    position: relative;
    z-index: 1;
}

.work-plan-concept .plan-image img {
    border-radius: 150px;
    margin: 7px 8px;
    width: auto;
    height: auto;
    max-width: 145px;
    max-height: 145px;
}

@media (min-width: 992px) {
    .work-plan-concept .plan-image.plan-image-on-middle {
        margin-top: 95px;
    }
}

.work-plan-concept .our-work {
    margin-top: 52px;
    font-size: 2.2em;
}

.work-plan-concept .project-plan-image {
    background: transparent url(../img/home/home-concept-item.png) no-repeat 100% 0;
    width: 350px;
    margin: 20px 0 0 -30px;
    padding-bottom: 45px;
    position: relative;
    z-index: 1;
}

.work-plan-concept .plan {
    background: transparent url(../img/home/home-concept-icons.png) no-repeat 0 0;
    width: 60px;
    height: 56px;
    display: block;
    position: absolute;
    left: 0;
    top: 65px;
}

.work-plan-concept .cloud {
    background: transparent url(../img/home/home-concept-icons.png) no-repeat 100% 0;
    width: 116px;
    height: 56px;
    display: block;
    position: absolute;
    left: 53%;
    top: 35px;
}

@media (max-width: 991px) {
    .work-plan-concept {
        background-image: none;
    }
    .work-plan-concept .project-plan-image {
        margin: 20px auto 0 auto;
    }
    .work-plan-concept .plan-image {
        margin-top: 0;
        padding-bottom: 25px;
    }
}

@media (max-width: 479px) {
    .work-plan-concept .project-plan-image {
        background-position: 0 0;
        margin-left: auto;
        max-width: 160px;
    }
    .work-plan-concept .fc-slideshow {
        max-width: 145px;
        height: 145px;
    }
    .work-plan-concept .fc-slideshow img {
        max-height: 145px;
        max-width: 145px;
    }
}
