.main-visual{
    --size: 100%;
    position: fixed;
    display: block;
    transform: translate(-50%, -50%);
    top: 50% !important;
    left: 50% !important;
    width: unset !important;
    height: var(--size) !important;
}

.main-visual .resizer{
    width: auto;
    display: block;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/*ratio響應式用*/

.main-visual .resizer.landscape{ display: block; }
.main-visual .resizer.portrait{ display: none; }

.main-visual .ui.landscape{ display: unset !important; }
.main-visual .ui.portrait{ display: none !important; }

/*ratio響應式用(完)*/

.main-visual .ui{   /*left top default*/
    padding: 0;

    position: absolute;
    --rot:0;       /*style填寫*/
    --vert-center: 0%;    /*transform 上下置中要素*/
    --hori-center: 0%;    /*transform 左右置中要素*/
    --xpos: 0;     /*style填寫*/
    --ypos: 0;     /*style填寫*/
    transform: translate(calc(var(--hori-center) * -1), calc(var(--vert-center) * -1)) rotate(calc(var(--rot) * 1deg));

    left: var(--xpos);
    top: var(--ypos);

    pointer-events: none;    /*不能被觸碰*/
}

.main-visual .ui.hide{
    display: none;
}

.main-visual .ui.alignVertCenter{
    --vert-center: 50%;    /*transform 上下置中要素*/
}

.main-visual .ui.alignBottom{
    --vert-center: 100%;    /*transform 上下置中要素*/
}

.main-visual .ui.stickBottom{
    /*transform 跟母物件上下相對要素*/
    top: unset;
    bottom: var(--ypos);
}

.main-visual .ui.alignHoriCenter{
    --hori-center: 50%;    /*transform 左右置中要素*/
}

.main-visual .ui.alignRight{
    --hori-center: 100%;    /*transform 左右置中要素*/
}

.main-visual .ui.fullCenter{
    --xpos: 50%;     /*style填寫*/
    --ypos: 50%;     /*style填寫*/
    --vert-center: 50%;    /*transform 上下置中要素*/
    --hori-center: 50%;    /*transform 左右置中要素*/
}

/*IMG RELATED*/

.main-visual svg.ui,
.main-visual img.ui{      /*Default Resize By Height*/
    --width: 100%;
    --height: 100%;
    width: auto;
    height: var(--height);
}

.main-visual svg.ui.width-resize,
.main-visual img.ui.width-resize{     /*Resize By Width*/
    width: var(--width);
    height: auto;
}

/*-----------------landscape ratio (<= 8/5)-----------------*/

@media (max-aspect-ratio: 8/5){
    .main-visual{
        --size: 70%;
    }
}

/*-----------------landscape to portrait ratio (<= 1/1)-----------------*/

@media (max-aspect-ratio: 1/1){
    .main-visual{
        --size: 60%;
        width: var(--size) !important;
        height: unset !important;
    }
    
    .main-visual .resizer{
        width: 100%;
        height: auto;
    }

    /*ratio響應式用*/

    .main-visual .resizer.landscape{ display: none; }
    .main-visual .resizer.portrait{ display: block; }

    .main-visual .ui.landscape{ display: none !important; }
    .main-visual .ui.portrait{ display: unset !important; }

    /*ratio響應式用(完)*/

    .main-visual svg.ui,
    .main-visual img.ui{      /*Portrait排版專用差分(通常為原長寬)*/
        --width-portrait: var(--width);
        --height-portrait: var(--height);
        height: var(--height-portrait);
    }

    .main-visual svg.ui.width-resize,
    .main-visual img.ui.width-resize{     /*Portrait排版專用差分*/
        width: var(--width-portrait);
    }

    
    .main-visual .ui{   /*left top default*/
        --xpos-portrait: var(--xpos);     /*style填寫(portrait差分)*/
        --ypos-portrait: var(--ypos);     /*style填寫(portrait差分)*/

        left: var(--xpos-portrait);
        top: var(--ypos-portrait);
    }

    .main-visual .ui.stickBottom{
        /*transform 跟母物件上下相對要素*/
        bottom: var(--ypos-portrait);
    }

    .main-visual .ui.fullCenter{
        --xpos-portrait: 50%;     /*style填寫(portrait差分)*/
        --ypos-portrait: 50%;     /*style填寫(portrait差分)*/
    }

}

/*-----------------portrait ratio (<= 3/4)-----------------*/

@media (max-aspect-ratio: 3/4){
    .main-visual{
        --size: 80%;
    }
}

/*-----------------portrait ratio (<= 12/20)-----------------*/

@media (max-aspect-ratio: 12/20){
    .main-visual{
        --size: 100%;
    }
}


/*-----------------loading related-----------------*/

#main-visual-layer .layer-common,
#main-visual-layer~#instructions-window{
    /*anim*/
    opacity: 0;
    transition: opacity 0.5s;
}


#main-visual-layer~#instructions-window{
    /*no allow click*/
    pointer-events: none;
}

#main-visual-layer #main-visual-loading-layer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    z-index: 20000;

    /*anim*/
    opacity: 1;
    transition: opacity 0.5s;
}

#main-visual-layer.loaded .layer-common,
#main-visual-layer.loaded~#instructions-window{
    /*anim*/
    opacity: 1;
}

#main-visual-layer.loaded~#instructions-window{
    /*allow click */
    pointer-events: auto;
}

#main-visual-layer.loaded #main-visual-loading-layer{
    /*anim*/
    opacity: 0;
    pointer-events: none;
}