/* ------------------------------------------------------------------ */
/* fv背景 */
/* ------------------------------------------------------------------ */
#fv-bg1 {
    opacity: 1;
    visibility: visible;
    transition: all .3s;
}

#fv-bg1.hovered {
    opacity: 0;
    visibility: hidden;
}

#fv-bg2 {
    position: absolute; 
    top: 0; 
    left: 0%;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

#fv-bg2.hovered {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------------ */
/* fv logo */
/* ------------------------------------------------------------------ */
.fv-logo-wrap #fv-logo1 {
    opacity: 1;
    visibility: visible;
    transition: all .3s;
    position: absolute;
    top: 0;
    left: 0;
}

.fv-logo-wrap.hovered #fv-logo1 {
    opacity: 0;
    visibility: hidden;
}

.fv-logo-wrap #fv-logo2 {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.fv-logo-wrap.hovered #fv-logo2 {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------------ */
/* about背景 */
/* ------------------------------------------------------------------ */
#about-bg1 {
    opacity: 1;
    visibility: visible;
    transition: all .3s;
}

#about-bg1.hovered {
    opacity: 0;
    visibility: hidden;
}

#about-bg2 {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    position: absolute;
    top: 0;
    left: 0;
}

#about-bg2.hovered {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------------ */
/* about logo */
/* ------------------------------------------------------------------ */
#about-logo1 {
    opacity: 1;
    visibility: visible;
    transition: all .3s;
}

.about-logo-wrap.hovered #about-logo1 {
    opacity: 0;
    visibility: hidden;
}

#about-logo2 {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
    position: absolute;
    top: 0%;
    left: 0%;
}

.about-logo-wrap.hovered #about-logo2 {
    opacity: 1;
    visibility: visible;
}

/* ------------------------------------------------------------------ */
/* about item */
/* ------------------------------------------------------------------ */
#about-item1 {
    /* opacity: 1;
    visibility: visible;
    transition: all .3s; */
}

#about-item1.hovered {
    transition: all .3s;
    opacity: 0;
    visibility: hidden;
}

#about-item2 {
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

#about-item2.hovered {
    opacity: 1;
    visibility: visible;
}

#about-item3 {
    /* opacity: 1;
    visibility: visible;
    transition: all .3s; */
}

#about-item3.hovered {
    opacity: 0;
    visibility: hidden;
}

#about-item4 {
    opacity: 0;
    visibility: hidden;
    transition: visibility .3s;
}

#about-item4.hovered {
    opacity: 1;
    visibility: visible;
}