.developer_original_button_daftar{
    position: relative;
    margin-top: 55px;

    & button,& input[type="Submit"]{
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        background: rgb(0, 132, 255);
        width: 50%;
        height:60px;
        border-radius: 10px;
        color:white;
        font-size: bold;
        border: 2px solid cyan;
        transition: 0.3s;

        &:hover{
            border: 2px solid rgb(0, 140, 255);
            background: rgb(0, 174, 255);
            box-shadow: 0px 0px 10px cyan;
        }
    }

    & i{
        position: absolute;
        width:100%;
        bottom:10px;
        text-align: center;
        transform: rotate(180deg) translateY(0);
        animation: hand 1s infinite;
        color:#4233ff;
        font-size:70px;
    }
}

.developer-original-modal, .developer-original-modal-02, .developer-original-modal-03{
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    background: white;
    width:400px;
    height:200px;
    padding:10px;
    border-radius: 10px;
    z-index: 10000;
    text-align: center;
    transition: 0.3s;
    opacity: 0%;
    pointer-events: none;

    & div[question]{
        font-size: 22px;
    }

    & div[decision]{
        & button{
            width:80px;
            height: 40px;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: #ffffff;
        }
        & :nth-child(1){
            background: red;
            
            &:hover{
                background-color: #ca0000;
            }
        }
        & :nth-child(2){
            background: rgb(0, 119, 255);

            &:hover{
                background-color: #0065d1;
            }
        }
    }

    & img{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width:400px;
    }
}

.developer-original-modal-03{
    background: none;
    opacity: 100%;
    pointer-events: all;
    width:auto;
    height: auto;
    transition: 3s;
    width:100vw;

    & p{
        font-weight: bold;
        color:white;
        font-size: 120px;

        & span{
            opacity: 0%;
            transition: 1s;
        }
    }
}

.developer-original-blackbarrier, .developer-original-blackbarrier-02{
    position: fixed;
    width:100vw;
    height:100vh;
    left:0px;
    top:0px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    opacity: 0%;
    transition: 0.3s;
    pointer-events: none;
}

.developer-original-blackbarrier-02{
    transition: 3s;
    opacity: 100%;
    pointer-events: all;
}

.developer-original-lowongan-buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

    & div[buttonparent]{
        width: 450px;
        cursor: pointer;
    
        & div[button]{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: rgb(241, 241, 241);
            border-radius: 10px;
            height:140px;
            padding-top: 20px;
            transition: 0.3s;

            & img{
                border: 1px solid grey;
                border-radius: 5px;
                width:70px;
                transition: 0.3s;
            }

            &:hover{
                background: rgb(3, 0, 177);
                color:white;
            }

            & p{
                font-size: 20px;
                font-weight: bold;
            }
        }

        & div[button][active]{
            background: rgb(3, 0, 177);
            color:white;
            text-shadow: 0px 0px 10px white;

            & img{
                box-shadow: 0px 0px 8px white;
            }
        }
    }
}

.developer-original-lowongan{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
    transition: 0.3s;
}

.developer-original-lowongan-content{
    opacity: 100%;
    pointer-events: all;
}

.developer-original-lowongan-content-hide{
    opacity: 0%;
    pointer-events: none;
}

.developer-original-image-gallery {
    width: 450px;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.developer-original-image-lowongan {
    width:350px;
    height: 450px;
    display: block;
    margin: 0 auto;
}

.developer-original-medsos{
    position: absolute;
    right:110px;
    top:40px;
    & img{
        width:50px;
        margin: 5px;

        &:hover{
            filter: brightness(70%);
        }
    }
}

div[iframe] {
    margin-top: 30px;
    position: relative;
    width: 100%;
    height: 400px;

    & iframe{
        position: absolute;
        top:0;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        height: 100%;
    }
}

.developer-original-hero{
    position: relative;
    background: #001b96;
    width: 100%;
    height:730px;

    & .developer-original-flags{
        position: absolute;
        width:100%;
        margin-top: 70px;
        z-index: 15;

        & img{
            position: absolute;
            width:75px;

            &[flag-indo]{
                left:40px;
            }

            &[flag-jepang]{
                right:40px;
            }
        }

        & span{
            position: absolute;
            top:55px;
            color:white;
            font-weight: bold;
            font-size:14px;

            &[flag-span-indo]{
                left:35px;
            }

            &[flag-span-jepang]{
                right:64px;
            }
        }
    }

    & img[background-01]{
        position: absolute;
        right:-200px;
        height:100%;
        mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
        -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
        z-index: 10;
        filter: brightness(70%);
    }

    & img[background-02]{
        position: absolute;
        height:100%;
        z-index: 0;
        filter: opacity(10%);
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
    }

    & img[logo]{
        position: absolute;
        width:300px;
        z-index: 15;
        top:50px;
        left: 50%;
        transform: translateX(-50%);
    }

    & .waves{
        position: absolute;
        bottom:-50px;
        z-index: 15;
    }

    & .developer-original-octagon {
        position: absolute;
        width: 125px;
        height: 125px;
        clip-path: polygon(
        30% 0%, 70% 0%, 
        100% 30%, 100% 70%, 
        70% 100%, 30% 100%, 
        0% 70%, 0% 30%
        );
        overflow: hidden;
        z-index: 15;
        filter:opacity(65%);
        transition:0.3s;

        & img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        &:hover{
            filter:opacity(100%);
        }
    }

    & .developer-original-octagon[octa-01]{
        top:190px;
        left:20px;
    }

    & .developer-original-octagon[octa-02]{
        top:330px;
        left:20px;
    }

    & .developer-original-octagon[octa-03]{
        top:470px;
        left:20px;
    }

    & .developer-original-octagon[octa-04]{
        top:260px;
        left:140px;
    }

    & .developer-original-octagon[octa-05]{
        top:400px;
        left:140px;
    }

    & div[content]{
        position: absolute;
        top:350px;
        left: 50%;
        color:white;
        font-family: century gothic;
        z-index: 15;
        width:700px;
        text-align: center;
        transform: translateX(-50%);

        & h1,& h3,& a,& h5{
            color:white;
        }
    }

    & span[support]{
        position: absolute;
        display: block;
        width:250px;
        height:50px;
        left:10px;
        bottom:10px;
        transform: scale(0.8);
        z-index: 15;

        & h5{
            position: absolute;
            top:10px;
            color:white;
            font-weight: bold;
        }

        & div{
            position: absolute;
            width:150px;
            height: 50px;
            left:145px;
            bottom:5px;

            & img{
                display: inline-block;
                width:50px;

                &[img-01]{
                    width:45px;
                }
            }
        }
    }
}

.wavestwo{
    position: absolute;
    top:750px;
}

.developer-original-image-structure{
    width:45vw;
}

.developer-original-textes{
    text-align:center;
    width:80%;
}

.developer-original-map{
    width:60vw;
    height:500px;
}

.developer-original-visimisi:hover{
    & .bi{
        background:rgb(3, 0, 177)!important;
    }
}

.developer-original-youtube{
    & iframe{
        border: 30px solid rgb(37, 37, 46);
        border-radius: 10px;
        box-shadow: 0px 0px 30px black;
    }

    & div[bottom-part]{
        position: absolute;
        bottom:-30px;
        width:50%;
        height:60px;
        background: rgb(37, 37, 46);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
        left:50%;
        border-radius: 10px;
        transform: translateX(-50%);

        & span{
            position: absolute;
            display: block;
            width:15px;
            height:15px;
            border-radius: 50%;
            top:50%;
        }

        & span[sp-01]{
            background: red;
            box-shadow: 0px 0px 10px red;
            right:100px;
            transform: translateY(-50%);
        }
        & span[sp-02]{
            background: yellow;
            box-shadow: 0px 0px 10px yellow;
            right:70px;
            transform: translateY(-50%);
        }
        & span[sp-03]{
            background: lime;
            box-shadow: 0px 0px 10px lime;
            right:40px;
            transform: translateY(-50%);
        }
    }
}

.developer-original-persyaratan-parent{
    background: url('../img/Kantor.jpg') no-repeat center center;
    background-size: cover;
    padding:50px 140px;
    border-radius:7px;
    color:white;
    transition: 0.3s;

    & .developer-original-persyaratan-wrapper{
        background: rgba(97, 76, 20, 0.7);
        border-radius: 10px;
        padding:40px;
        transition: 0.3s;

        & .developer-original-persyaratan-content{
            & .developer-original-persyaratan{
                text-align:left;
                font-size:18px;
                display:block;
            
                & b{
                    font-size:20px;
                }
            }
        }

        & .developer-original-span-biaya-pendidikan{
            display: none;
            opacity: 0%;
            transition: 0.3s;
        }

        &.hidden{
            display: none;
        }
    }
}

.developer-original-kenapa-okayama{
    background:rgba(0,0,0,0.6);
    border-radius:7px;
    padding:40px 0px;
    transform:translateY(-150px);
}

::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background-color: #0036aa;
border-radius: 10px;
border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
background-color: #07006e; 
}

@keyframes hand {
    0%{
        transform: rotate(180deg) translateY(-10px);
    }
    50%{
        transform: rotate(180deg) translateY(5px);
    }
    100%{
        transform: rotate(180deg) translateY(-10px);
    }
}


@media (max-width:1220px){
    .developer-original-hero{
        & .developer-original-octagon[octa-01]{
            top:190px;
            left:20px;
        }
    
        & .developer-original-octagon[octa-02]{
            top:330px;
            left:20px;
        }
    
        & .developer-original-octagon[octa-03]{
            top:190px;
            left:auto;
            right:20px;
        }

        & .developer-original-octagon[octa-04]{
            top:330px;
            left:auto;
            right:20px;
        }
    
        & .developer-original-octagon[octa-05]{
            display: none;
        }
    }
}

@media (max-width:1000px){
    .developer-original-medsos{
        right:30px;

        & img{
            width:40px;
            margin: 3px;
        }
    }

    .sitename{
        font-size:20px!important;
    }

    .developer-original-textes{
        font-size:15px;
    }

    .developer-original-lowongan-buttons{
        transform:scale(0.9);
    }

    .developer-original-image-structure{
        width:50vw;
    }

    .developer-original-map{
        width:80vw;
    }

    .developer-original-persyaratan-parent{
        padding:50px 50px;
    }

    .developer-original-kenapa-okayama{
        transform:translateY(-150px);
    }
}

@media (max-width:950px){
    .developer-original-hero{
        & .developer-original-octagon{
            display: none;
        }
    }
}

@media (max-width: 769px) {

    .developer-original-lowongan-buttons{
        transform:scale(0.8);
    }

    .developer-original-image-lowongan {
        width:250px;
        height: 325px;
    }

    .developer-original-image-structure{
        width:60vw;
    }

    .developer-original-hero{
        & .developer-original-octagon[octa-01]{
            left:10px;
            top:420px;
            z-index:20;
        }

        & .developer-original-octagon[octa-03]{
            top:420px;
            left:calc(100% - 10px);
            transform:translateX(-100%);
            z-index:20;
        }

        & div[content]{
            width:300px;

            & span{
                left:30px;
            }
        }
    }
}

@media (max-width: 576px) {
    div[iframe] {
        height: 300px;
    }

    div[iframe] iframe {
        width: 100%;
    }

    .developer-original-map{
        width:95vw;
    }

    .developer-original-hero{
        & .developer-original-flags{
            margin-top: 30px;
            transform: scale(0.9);
    
            & img{
                &[flag-indo]{
                    left:5px;
                }
    
                &[flag-jepang]{
                    right:5px;
                }
            }
    
            & span{
                top:57px;
    
                &[flag-span-indo]{
                    left:0px;
                }
    
                &[flag-span-jepang]{
                    right:29px;
                }
            }
        }
    }
    
    .developer-original-lowongan-buttons{
        transform:scale(0.7);
    }

    .developer-original-image-lowongan {
        width:200px;
        height: 275px;
    }

    .developer-original-image-structure{
        width:80vw;
    }

    .developer-original-modal-03{
        width:100%;
        
        & p{
            font-size: 50px;
        }
    }

    .developer-original-youtube{
        & iframe{
            border: 20px solid rgb(37, 37, 46);
        }

        & div[bottom-part]{
            height: 50px;
        }
    }

    .developer-original-persyaratan-parent{
        padding:50px 10px;
        
        & .developer-original-persyaratan-wrapper{
            padding:15px;
        }
    }
}

@media (max-width: 420px) {
    .developer-original-image-lowongan {
        width:150px;
        height: 225px;
    }

    .developer-original-modal-03{
        & p{
            font-size: 40px;
        }
    }

    .developer-original-medsos{
        top:auto;
        bottom:90px;
    }

    .developer-original-hero{
        & .developer-original-flags{
            transform: scale(0.8);

            & img{
                &[flag-indo]{
                    left:-25px;
                }

                &[flag-jepang]{
                    right:-25px;
                }
            }

            & span{
                &[flag-span-indo]{
                    left:-31px;
                }

                &[flag-span-jepang]{
                    right:-2px;
                }
            }
        }
    }
}

@media (max-width: 350px) {
    .developer-original-image-lowongan {
        width:140px;
        height: 215px;
    }

    .developer-original-image-lowongan {
        width:150px;
        height: 225px;
    }

    .developer-original-map{
        width:95vw;
    }

    .developer-original-persyaratan-parent{
        padding:50px 0px;
        
        & .developer-original-persyaratan-wrapper{
            padding:10px;
        }
    }

    .developer-original-hero{
        & .developer-original-flags{
            transform: scale(0.7);

            & img{
                &[flag-indo]{
                    left:-55px;
                }

                &[flag-jepang]{
                    right:-55px;
                }
            }

            & span{
                &[flag-span-indo]{
                    left:-60px;
                }

                &[flag-span-jepang]{
                    right:-32px;
                }
            }
        }
    }
}

@media (max-width: 330px) {
    .developer-original-image-lowongan {
        width:130px;
        height: 205px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    div[iframe] iframe {
        width: 75%;
    }
}

@media (min-width: 769px) {
    div[iframe] iframe {
        width: 60%;
    }
}