@charset "UTF-8";
/* Index Template */
*{
    box-sizing: border-box; /**For flexbox**/
}
.background {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-content: center;
    width:100vw;  
    height:100vh;
}
@media only screen and (max-width:1400px) and (orientation:portrait)
    {.background {height: 100vh;}}

#page-wrapper{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 2% 0;
}
@media only screen and (max-width:767px) and (orientation:portrait)
    {#page-wrapper{margin:0 0;}}

#index-header{/*use when index message is present*/
    height:auto; 
    padding: 1% 10%; 
    font-size: 2vmin; 
    font-weight:100;
}
/*#index-header {
    height:3vh;
}
@media only screen and (max-width:699px) and (orientation:landscape)
    {#index-header{height:1vh;}}
@media only screen and (orientation:portrait)
    {#index-header {height: 10vh}}*/

#index-parent{
    max-width: 110rem;
}
#index-selection-parent{
}
#index-box-cluster{
    width: 100%;
    height: 109rem;/*confine index boxes within the center box cluster*/
    display: flex;
    flex-flow: row wrap; 
    justify-content: space-between;
}
#index-box-logo,
#index-box-fullerton,
#index-box-fullerton:hover,
#index-box-fullerton:active,
#index-box-fv,
#index-box-fv:hover,
#index-box-fv:hover,
.index-box {
    width: 53rem;
    height: 53rem;
}
#index-box-logo{
    position:relative;
    display: inline-block;
    overflow:hidden;
    font-size: 11.2rem;
    font-weight: 500;
    color: transparent;
    line-height: 11.2rem;
    padding: 0.57em 0 0 0.3em;
    margin-bottom:3%;
}
#index-box-logo .logo-text{
    position:relative;
    z-index:100;
}
#index-box-logo .logo-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
#index-box-logo .top {
    z-index: 1; 
}
#index-box-logo .bottom {
    opacity:0; 
    z-index:1;
}
.index-box{
    position:relative;
    background-color:#cefafe;
    text-align:left;
    font-size: 5.3rem;
    color: transparent;
    padding: 16% 2% 3% 0%;
}
.index-box .bg-note {
    position: absolute;
    top: 0; left: 0;
    width: 100%; 
    height: 100%;
    background: url("../Assets/index/index-logo-br-yellow-note.png") no-repeat center;
    background-size: contain;
    opacity: 0;
    z-index: 0;
}
.index-box .text-right-bottom {
    z-index: 1;
    width: 50rem;
    height: 40rem;
    display:flex;
    flex-flow:column nowrap;
    align-items:flex-end;
}
.text-right-bottom span{
    display:block;   
}
#index-box-fullerton,
#index-box-fv{
    position: relative;
    background-size: contain;
}
.branch-name-text{
    font-family: 'Impact','sans-serif';
    font-size: 10rem;
}
#index-box-fullerton .branch-name-text{
    position: absolute;
    bottom:0;
    right:0;
    margin-right:0.5rem;
    margin-bottom:-1.8rem;
}
#index-box-fv .branch-name-text{
    line-height:7.2rem;
    float:left;
    margin-top:1rem;
    margin-left:0.6rem;
}
.branch-county{
    font-size: 3.5rem;
    color:#777777;
}
#index-box-fullerton .branch-county{
    position: absolute;
    top: 64%;
    margin-left: 10%;
}
#index-box-fv .branch-county{
    position: absolute;
    top: 35%;
    right: 10%;
    text-align:right;
}
#index-box-cluster #index-box-fullerton:hover,
#index-box-cluster #index-box-fullerton:active,
#index-box-cluster #index-box-fv:hover, 
#index-box-cluster #index-box-fv:active,
#index-box-fullerton:hover .branch-county,
#index-box-fullerton:hover .branch-county,
#index-box-fv:hover .branch-county,
#index-box-fv:hover .branch-county{
    cursor:pointer;
    background-color: #cdcdfe;
    animation: index-box-branch-color-hover 0.5s linear 0s,
            index-box-branch-county-text 0.2s ease-out 0s;
    animation-fill-mode: forwards;
}
@keyframes index-box-branch-color-hover{
    0% {background-color: #FBFF2C;}
    100% {background-color:#cdcdfe;}
}
@keyframes index-box-branch-county-text{
    0% {color:#777777;}
    100% {color:#FFFFFF;}
}

#selection-box-cluster-hide-fullerton{display:none;}
#selection-box-cluster-hide-fv{display:none;}
.selection-box-cluster{
    width: 110rem;
    height: 25rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.selection-box-close,
#selection-box-phone-fullerton,
#selection-box-direction-fullerton,
#selection-box-fullerton,
#selection-box-phone-fv,
#selection-box-direction-fv,
#selection-box-fv{
    width: 25rem;
    height: 25rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
}
@media only screen and (max-width:1400px) and (orientation:portrait)
    {.selection-box-cluster{width:83rem;display:flex;flex-flow:row wrap; gap:3rem;}
     .selection-box-close,
     #selection-box-phone-fullerton,
     #selection-box-direction-fullerton,
     #selection-box-fullerton,
     #selection-box-phone-fv,
     #selection-box-direction-fv,
     #selection-box-fv{
        width: 40rem;
        height: 40rem;}}

.selection-box-close{
    background-image: url("../Assets/index/selection-return.png");
    background-color:#71c8f0;
}
#selection-box-phone-fullerton {
    background-image: url("../Assets/index/selection-fullerton-phone.png");
    background-color:#FFE5A2;
}
#selection-box-direction-fullerton {
    background-image: url("../Assets/index/selection-fullerton-direction.png");
    background-color:#FFD461;
}
#selection-box-fullerton {
    background-image: url("../Assets/index/selection-fullerton-enter.png");
    background-color:#FFBC06;
}
#selection-box-phone-fv{
    background-image: url("../Assets/index/selection-fv-phone.png");
    background-color: #cdcdfe;
}
#selection-box-direction-fv{
    background-image: url("../Assets/index/selection-fv-direction.png");
    background-color: #C4ABE1;
}
#selection-box-fv{
    background-image: url("../Assets/index/selection-fv-enter.png");
    background-color: #BA9CDC;
}
.selection-box-close:hover,
.selection-box-close:active,
#selection-box-phone-fullerton:hover,
#selection-box-phone-fullerton:active,
#selection-box-direction-fullerton:hover,
#selection-box-direction-fullerton:active,
#selection-box-fullerton:hover,
#selection-box-fullerton:active,
#selection-box-phone-fv:hover,
#selection-box-phone-fv:active,
#selection-box-direction-fv:hover,
#selection-box-direction-fv:active,
#selection-box-fv:hover,
#selection-box-fv:active{
    background-color: #C9C9C9;
}

footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    color: #777777;
    z-index: 200;
    width: 100%;
}
#footer-center{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    max-width: 150rem;
    font-size: 1.8rem;
    margin:0 auto;
}
.footer-content{
    padding:1% 2%;
}
.footer-logo-col2{height:12%; width:100%;}
.footer-logo-col2.logo-1{background:url('../Assets/index/YMF.png') no-repeat 4% center; background-size: contain;}
.footer-logo-col2.logo-2{background:url('../Assets/index/YMS-new.png') no-repeat 4% center; background-size: contain;}
.footer-logo-col2.logo-3{background:url('../Assets/index/ymes-new.png') no-repeat left center; background-size: contain;}
.footer-logo-col2.logo-4{background:url('../Assets/index/abrsm.png') no-repeat 2% center; background-size: contain;}
.footer-logo-col2.logo-5{background:url('../Assets/index/mtac.png') no-repeat 5% center; background-size: contain;}
#footer-center .footer-content:nth-child(1){flex:80%;width:80%}
#footer-center .footer-content:nth-child(2){flex:20%;width:20%;display: flex; flex-flow: column nowrap; justify-content: space-evenly; align-items:flex-start;}