@font-face { font-family: "Times Newer Roman"; src: url('TimesNewerRoman-Regular.otf'); }
/*.pace {*/
/*    -webkit-pointer-events: none;*/
/*    pointer-events: none;*/
/*    -webkit-user-select: none;*/
/*    -moz-user-select: none;*/
/*    user-select: none;*/
/*}*/

/*.pace-inactive {*/
/*    display: none;*/
/*}*/

/*.pace .pace-progress {*/
/*    background-color: white;*/
/*    position: fixed;*/
/*    !*z-index: 0;*!*/
/*    top: 0;*/
/*    right: 100%;*/
/*    bottom: 0;*/
/*    width: 100%;*/
/*}*/
html,body {
    /*cursor: url(arrow.png), auto;*/
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /*display: flex;*/
    background-color: black;
    /*transition: background-color 0s;*/
}
a, p, div {
    text-decoration: none;
    font-family: "Times Newer Roman","Times","Times New Roman","Songti SC","宋体",STSong, Simsun,'Noto Serif CJK SC', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc,TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif;
    font-weight: 400;
    line-height: 18px;
    /*letter-spacing: 0.1px;*/
    color: #e0e0e0;
    /*hyphens: auto;*/
    /*-webkit-hyphens: auto;*/
    /*-moz-hyphens: auto;*/
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
a[href^=tel] {
    text-decoration:inherit;
    color: inherit;
}
::selection {
    background: grey;
}
::-moz-selection {
    background: grey;
}
::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}

.partNavi{
    transition: opacity 1s;
    opacity: 0;
}
#naviHint{
    opacity: 0;
    transition: opacity 1s;
}
.naviItem {
    position: fixed;
    left: 15px;
    display: block;
    font-size: 15px;
}
#naviTitle-en ,#hintTitle {
    top: 15px;
}
#naviTitle-ch {
    top: 33px;
}
#naviInfo,#hintInfo {
    top: 15px;
    left: 20vw;
}
#naviPhoto,#hintPhoto {
    top: 33.333333%;
    transform: translateY(-50%);
}
#naviPainting, #hintPaint {
    top: 66.666666%;
    transform: translateY(-50%);
}
#naviEssay ,#hintEssay {
    bottom: 15px;
}
#naviAutoplay ,#hintPlay{
    top: 66.666666%;
    right: 15px;left: auto;
    transform: translateY(-50%);
}
#naviSubProjects{
    top: 33.333333%;
    right: 15px;left: auto;
    transform: translateY(-50%);
}
#naviDetail ,#hintDetail{
    bottom: 15px;
    right: 15px;left: auto;
}
.naviPhotoProject, .naviPaintingProject, .naviEssayProject{
    overflow-y: scroll;
    max-height: 50%;
     display: none;
     position: fixed;
     background-color: white;
     width: intrinsic;           /* Safari/WebKit uses a non-standard name */
     width: -moz-max-content;    /* Firefox/Gecko */
     width: -webkit-max-content; /* Chrome */
     width: max-content;
     left: 130px;
     padding: 5px 25px 15px 7px;
 }
.naviSubProject{
    left: 10px;
    position: relative;
    color: black;
    font-size: 13px;
    top: -5px;
}
.naviPhotoProject{
    top: 30%;
}
.naviPaintingProject{
    bottom: 25%;
}
.naviEssayProject{
    bottom: 15px;
}
.project{
    padding-bottom: 3px;
    display: block;
    color: black;
    font-size: 13px;
}
.projectPhoto{
}
.article{
    position: fixed;
    overflow-y: scroll;
    background-color: white;
    color: black;
    left: 20%;right: 20%;
    top: 10%; bottom: 15px;
    /*transform: translateY(-50%);*/
    padding: 5px 7px 100px 7px;
    /*width: 60%;*/
    font-size: 13px;
}
.article img{
    width:100%;
}
.info{
    display: none;
    position: fixed;
    overflow-y: scroll;
    background-color: white;
    color: black;
    left: 18%;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 7px 100px 7px;
    width: 64%;
    font-size: 13px;
}
.info a{
    color: black;
    text-decoration:underline;
}
.detail{
    display: none;
    position: fixed;
    overflow-y: scroll;
    background-color: black;
    border: white 0.8px solid;
    color: white;
    padding: 5px 7px 100px 7px;
    font-size: 13px;

    right: 12px;
    left: 70%;
    width: auto;
    bottom: 45px;
    top: 20%;
    transform: translateY(0);
}
.showNaviArea {
    position: fixed;
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.contentHolder{
}
.content{
    opacity: 0;
    transition: opacity 1s;
    position: fixed;
    max-width: 70vw;
    max-height: 80%;
    width: auto; height: auto;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    /*object-fit: contain;*/
    /*max-width: 100%; max-height: 100%;width: auto; height: auto;*/
    /*display: block;object-fit: contain;*/

}
.content1{
    opacity: 0;
    transition: opacity 1s;
    max-width: 70vw;
    max-height: 80%;
    width: auto; height: auto;
    left: 50%; top: 50%;
    /*transform: translate(-50%,-50%);*/
    /*object-fit: contain;*/
    /*max-width: 100%; max-height: 100%;width: auto; height: auto;*/
    /*display: block;object-fit: contain;*/

}
.videoContent{
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}
.panArea{
    position: fixed;
    height: 50%;
    width: 60%;
    top: 25%; left: 20%;
}
/*.videoArea{*/
/*    position: fixed;*/
/*    height: 30px; width: 30px;*/
/*    top: 45%; left: 20%;*/
/*    background-color: white;*/
/*    border-radius: 50%;*/
/*}*/
.videoControlArea {
    display: none;
    /*opacity: 0;*/
    position: fixed;
    background-color: white;
    width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    width: -moz-max-content;    /* Firefox/Gecko */
    width: -webkit-max-content; /* Chrome */
    width: max-content;
    height: auto;
    left: 50%; top: 50%;
    transform: translate(5%,-50%);
    padding: 5px 40px 15px 7px;
}
.videoButtons{
    padding-bottom: 3px;
    display: block;
    color: black;
    font-size: 13px;
    line-height: 15px;
}


@media (max-aspect-ratio: 3/5) {
}

@media (max-aspect-ratio: 1/1) {
    .detail a{
        line-height: 13px;
    }
    .naviItem {
        left: 12px;
    }

    #naviTitle-en ,#hintTitle{
        top: 12px;
    }
    #naviTitle-ch {
        top: 30px;
    }
    #naviInfo,#hintInfo{
        top: 12px;
        left: auto;
        right: 12px;
    }
    .naviPhotoProject, .naviPaintingProject, .naviEssayProject{
        left: 70px;
    }
    .naviPhotoProject{
        top: 25%;
    }
    .article{
        left: 20%;
        width: auto;
        right: 11px;
        bottom: 15px;
        transform: translateY(0);
        top: 8%;
        font-size: 11px;
        line-height: 13px;
    }
    .info{
        left: 26%;
        width: auto;
        right: 11px;
        bottom: 15px;
        transform: translateY(0);
        top: 10%;
        font-size: 11px;
        line-height: 13px;
    }
    .detail{
        left: 41%;
        width: auto;
        right: 11px;
        bottom: 45px;
        top: 40px;
        transform: translateY(0);
        font-size: 11px;
        line-height: 13px;
    }
    .content{
        max-width: calc(100% - 30px);
        max-height: 90%;
    }
    .content1{
        max-width: calc(100vw - 30px);
    }
    .panArea{
        width: 100%;
        left: 0; top: 30%;
        height: 40%;
    }
}


@keyframes to-pho {
    from {
        left: 100vw;
    }
    to {
        left: 0;
    }
}
@media (max-width: 400px) and (min-aspect-ratio: 1/1){
    #naviTitle-en, #hintTitle {
        top: 3vw;
    }
    #naviTitle-ch {
        top: 7vw;
    }
    .naviItem {
        left: 3vw;
        font-size: 3vw;
    }
    #naviInfo, #hintInfo {
        top: 3vw;
        left: 23vw;
    }
    #naviEssay, #hintEssay {
        bottom: 3vw;
    }
    #naviDetail, #hintDetail {
        bottom: 3vw;
        right: 3vw;
    }
    #naviAutoplay, #hintPlay {
        right: 3vw;
    }
    .naviPhotoProject, .naviPaintingProject, .naviEssayProject {
        left: 20vw;
        padding: 1vw 3vw 2vw 2vw;
    }
    .info{
        height: 80vh;
    }
    .naviPaintingProject {
        bottom: 20%;
    }
    .naviEssayProject {
        bottom: 2vw;
    }
    .project {
        padding-bottom: 1vw;
        font-size: 2vw;
        line-height: 2.5vw;
    }
    .info,.detail {
        padding: 1vw 1vw 5vw 1vw;
        font-size: 1.5vw;
        line-height: 2vw;
    }
    .detail {
        right: 2vw;
        width: auto;
        bottom: 2vw;
    }
}