label {
    width: 3.5vw;
    height: 1.5vw;
    background: #ccc;
    position: relative;
    display: inline-block;
    border-radius: 1vw;
    transition: 0.4s;
    box-sizing: border-box;
    margin-top: 0.5vw;
    top: 0vw;
    left: -1vw;
}

input:checked + label {
    background-color: #39639F;
}

input[type=checkbox]{
	display: none;
}

label::after {
    content: '';
    position: absolute;
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 100%;
    left: 0vw;
    top: 0vw;
    z-index: 2;
    background-color: #39639F;
    transition: 0.4s;
    cursor: pointer;
}

input:checked + label::after {
    left: 2vw;
    background: #fff;
}

.fill_img{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%
}

.height_fill_img{
    height:100%;
}

.click_negate{
    pointer-events:none;
}

body {
    background-image: url("./image/main/background.png"); 
}

#map_div {
    position:absolute;
    top:0;
    left:15vw;
    width: 18vw;
    height: 18vw;
    z-index: 2;
}

#canvas_div {
    width: 100%;
    height: 100%;
    background-color: skyblue;
}

#zoom_button_div {
    position: absolute;
    bottom: 0vw;
    width: 20%;
}

#openstreetmap_div {
    position: absolute;
    background-color: #FFF;
    bottom: 0vw;
    right: 0vw;
    width: 70%;
    font-size: 0.8vw;
}

#map_button_div{
    position:relative;
    height: 5vw;
    width: 5vw;
    z-index: 2;
    float: left;
}

#home_button_div{
    position:relative;
    height: 5vw;
    width: 5vw;
    z-index: 2;
    float: left;
}

#arrow_div {
    top:32vw;
    left:39vw;
    width: 20vw;
    height: 16vw;
    position:absolute;
    display: inline-block;
    z-index: 2;
}

#front_arrow_div{
    top:0vw;
    left:5vw;
    width: 10vw;
    height: 10vw;
    position:absolute;
    display: inline-block;
}

#left_arrow_div{
    top: 6vw;
    left: -3vw;
    width: 10vw;
    height: 10vw;
    position:absolute;
    display: inline-block;
}

#right_arrow_div{
    top: 6vw;
    right: -3.5vw;
    width: 10vw;
    height: 10vw;
    position:absolute;
    display: inline-block;
}

#circle_div{
    opacity: 0.3;
    z-index: 3;
}

#movie_div {
    top:0;
    left:15vw;
    width: 70vw;
    height: 35vw;
    position: absolute;
    z-index: 1;
}

#instruction_div {
    position: absolute;
    top: 36vw;
    left: 15vw;
    height: 10vw;
    width: 40vw;
    font-size: 0.9vw;
}

#logo_div {
    position: absolute;
    top: 40vw;
    left: 14vw;
    height: 3.9vw;
    width: 26vw;
}

#button_ui_div{
    position: absolute;
    top: 36vw;
    left: 40vw;
    height: 6vw;
    width: 28vw;
}

#slider_ui_div{
    position: absolute;
    top: 37vw;
    left: 60vw;
    width: 12vw;
    height: 1vw;
    background-color:#ececec;
    border-radius: 1vw;
    overflow: hidden;
}

#slider{
    position: absolute;
    top: -3vw;
    height: 5vw;
    width: 0vw;
    background-color: aqua;
}

#toggle_ui_div{
    position: absolute;
    top: 35vw;
    left: 73vw;
    width: 11vw;
    height: 12.5vw;
    font-size: 1vw;
    background-color: #6993CF;
    padding-left: 1vw;
}

#copyright_div {
    position: absolute;
    top: 42vw;
    left: 40vw;
    height: 8vw;
    width: 33vw;
    font-size: 1vw;
}