.parent {
    position: relative;
    width: 20vw;
    height: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5vh;
    left: 0vw;
}

.parent2 {
    position: relative;
    width: 18vw;
    height: 18vw;
    background-color: var(--colorBody);
}

.parent2 img{
    width: 24vw;
}

.child {
    position: absolute;
    top: 2vw;
    left: 2vw;
    width: 20vw;
    height: 20vw;
    display: flex;
    align-items: center;
    background-color: var(--colorBody);
    border: solid var(--ColorNumber5) 1vw;
	justify-content: center;

}

.parent3 {
    position: relative;
    width: 80vw;
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5vh;
    left: 10vw;
}

.parent4 {
    position: relative;
    width: 78vw;
    height: 33vw;
    background-color: var(--colorBody);
}

.child2 {
    position: absolute;
    width: 38vw;
    height: 29vw;
    display: flex;
    align-items: center;
    background-color: var(--colorBody);
    border: solid var(--ColorNumber5) 1vw;
    flex-direction: column;
    top: -5vh;
    left: 45vw;
}

.child3 {
    position: absolute;
    top: 4vw;
    left: 3vw;
    width: 30vw;
    height: 23vw;
    display: flex;
    align-items: center;
    background-color: var(--colorBody);
    border: solid var(--ColorNumber5) 1vw;
    flex-direction: column;
}

@media screen and (orientation: portrait) and (max-width: 500px) {
    .parent {
        width: 60vw;
        height: 60vw;
        top: 0vh;
    }
    .parent2 {
        width: 55vw;
        height: 55vw;
    }
	
	.parent2 img{
    width: 60vw;
}
    .child {
        width: 60vw;
        height: 60vw;
        border: solid var(--ColorNumber5) 2vw;
    }
    .parent3 {
		width: 86vw;
        height: 301vw;
    }
    .parent4 {
        width: 80vw;
        height: 296vw;
    }
    .child2 {
        width: 78vw;
        height: 210vw;
        top: 38vh;
        left: 0vw;
		overflow: auto;
    }
    .child3 {
		top: 4vw;
        left: 0vw;
        width: 78vw;
        height: 71vw;
		overflow: auto;
    }
}

@media screen and (orientation: portrait) and (min-width: 501px) {
    .parent {
        width: 40vw;
        height: 40vw;
        top: 0vh;
    }
    .parent2 {
        width: 35vw;
        height: 35vw;
    }
	.parent2 img{
    width: 45vw;
}
    .child {
        width: 40vw;
        height: 40vw;
        border: solid var(--ColorNumber5) 2vw;
    }
    .parent3 {
        width: 86vw;
        height: 108vw;
    }
    .parent4 {
		width: 80vw;
        height: 102vw;
    }
    .child2 {
        width: 78vw;
        height: 55vw;
        top: 28vh;
        left: 0vw;
    }
    .child3 {
		top: 2vw;
        left: 20vw;
        width: 40vw;
        height: 34vw;
		
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .parent3 {
        height: 32vw;
    }
    .parent4 {
        height: 30vw;
    }
    .child2 {
        height: 40vw;
    }
    .child3 {
        left: 1vw;
        width: 40vw;
        height: 30vw;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1367px) and (orientation: landscape) {
    .parent3 {
        height: 27vw;
    }
    .parent4 {
        height: 25vw;
    }
    .child2 {
        height: 37vw;
    }
    .child3 {
        height: 23vw;
        width:35vw;
    }
}