html{
    font-size: 4vmin ;
}

body{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  
    font-family: NanumGothic,'Noto Sans CJK TC', sans-serif;
    background-color: #000;

    padding: 0;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 101.03%), #0F283C;

     margin:0;
     border: 0;
     /* outline:0;
     border: 0; */
}
.page{
    padding-left:0.75rem;
    padding-right:0.75rem;
}
main{
    position: relative;
    display: flex;
    flex-direction: column;
}

h1{
    color: #FFF;
    font-family: var(--Font-style-Nanum-NotoTC-NotoJP, NanumGothic);
    font-size: 2rem;
    font-style: normal;
    font-weight: 800;
    line-height: 2.5rem; /* 125% */
    letter-spacing: var(--Letter-spacing-0-10, 0rem);
    margin-block: 0;
}
h2{
    color: #FFF;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.25rem; /* 128.571% */
    letter-spacing: var(--Letter-spacing-0-10, 0rem);
    margin-block: 0;
}
p{
    color: #FFF;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 171.429% */
    margin-block: 0;
}
button{
    border: none;
    outline: none;
    font-family: var(--Font-style-Nanum-NotoTC-NotoJP, NanumGothic);
}
button:focus {outline:0;}
#_hint{
    padding-right:5rem;
}

#_button_lang, #_button_back, .button_top{
    position: absolute;
    z-index: 10;
    
    width: 3.125rem;
    height: 3.125rem;
    background: transparent;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

    
    border: none;
    outline: none;
}

#_button_lang{
    top:1rem;
    right:1rem;
}
#_button_lang.en{
    background-image: url('/assets/ui/mobile_en_default.svg');    
}
#_button_lang.zh{
    background-image: url('/assets/ui/mobile_zh_default.svg');    
}
#_button_lang.jp{
    background-image: url('/assets/ui/mobile_jp_default.svg');    
}
#_button_back, .button_top{
  
    left:1rem;
    right: unset;

    background-image: url('/assets/ui/arrow_default.svg');
}
.button_top{
    position: fixed;
    z-index: unset;
    top:unset;
    left:unset;
    bottom: 1rem;
    right: 1rem;
    transform: rotate(90deg);
}

#_list{
    margin-top: 1.87rem;
    margin-bottom:5.62rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}
#_list>button{
    
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;

    color: #FFF;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem; /* 114.286% */
    letter-spacing: var(--Letter-spacing-0-10, 0rem);

    background-color: transparent;
    border: none;
}
#_list>button>p{
    height: 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    margin-bottom: 1rem;
}
#_item{
    position: absolute;
    top:0;
    left:0;
    right:0;

    /* padding: 1rem; */
    padding-top: 1rem;
    padding-bottom: 5.62rem;

    /* background-color: #000; */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 59%), 
                 #0F283C;
                /* url('/assets/ui/bg_mobile.png') no-repeat top center; */
    /* background-size: cover; */

    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap:3rem; */

    color:white;

    overflow-x: hidden;
}

#_title{
    color: #FFF;
    text-align: center;
    font-family: var(--Font-style-Nanum-NotoTC-NotoJP, NanumGothic);
    font-size: 2.625rem;
    font-style: normal;
    font-weight: 800;
    line-height: 2.5rem; /* 95.238% */
    letter-spacing: var(--Letter-spacing-0-10, 0rem);
}


#_content{
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    align-items: stretch;
}
#_content>div{

    /* border: 1px solid #FFF; */
    border-radius: 1.875rem 3.75rem 1.875rem 1.875rem;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.00) 70.5%, rgba(255, 255, 255, 0.16) 100%);

    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap:0.75rem;
    align-items: stretch;
}

#_model{
    aspect-ratio: 16/9;
    width: 30rem;
    margin-top: 5.94rem;
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    z-index: 1;
}

#_item_video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#_item_arrow{
    position: absolute;
    bottom: 0;
    width: 85vw;
}

#_level{
    color: #FFF;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 800;
    line-height: 0.625rem; /* 71.429% */

    border-radius: 1.25rem;
    background: rgba(18, 132, 80, 0.70);

    display: flex;
    padding: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;

    align-self: center;
}
#_level.EN, .mobile_level.EN{
    background-color: rgba(202, 114, 7, 0.7);
}
#_level.CR, .mobile_level.CR{
    background-color: rgba(224, 45, 35, 0.7);
}
#_level.NT, .mobile_level.NT{
    background-color: rgba(215, 172, 4, 0.70);
    
}

.row{
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    justify-content: center;
    align-items: top;
}

#_label_scientific_name{
    color: #FFF;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 800;
    line-height: 0.75rem; /* 85.714% */
    letter-spacing: var(--Letter-spacing-0-10, 0rem);
    white-space: nowrap;
}

#_scientific_name{
    color: #FFF;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 0.75rem; /* 85.714% */
    white-space: nowrap;
}

#_info{
    display: flex;
    flex-direction: column;
    gap:1.69rem;
    z-index: 1;
    /* align-items: stretch; */
}

.hide{
    /* transform: scale(0); */
    opacity: 0;
    transform-origin: center;
    transition: all 0.3s ease-in-out;
}
.show{
    /* transform: scale(1); */
    opacity: 1;
    transition: all 0.5s ease-in-out;
}
#_button_prev, #_button_next{
    width:2.7rem;
    height:3.13rem;
    background: transparent;
  
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
    background-image: url(/assets/ui/switch.svg);
}
#_button_next{
    background-position: right;    
}
#_switch{
    display: flex;
    flex-direction: row;    
    z-index: 1;
}
#_mask{
    position: absolute;
    top:0;   
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

#_video_bg{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    /* border: none;
    outline: none;
    clip-path: fill-box; 
    outline: none; */
    /* object-fit:cover; */
}
video:focus { outline:none; }