.image-container {
  position: relative;
}

.popup-text {
    display: inline-block;
    font-weight: 320;
    margin-left: calc(100% - 14.5625rem);
    margin-right: 0.125rem;
    font-family: 'IBMPlexSans-ExtraLight';
}

.image-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  padding: 8px;
  box-sizing: border-box;
}
.popup-content {
  text-align: center;
}

.image-text2 {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 16px;
  padding: 8px;
  box-sizing: border-box;
}

.image-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
}



.image-overlay span {
  display: inline-block;
  margin-top: 50%;
  transform: translateY(-50%);
}

/*1rem =16px*/

 @font-face {
     font-family: 'IBMPlexSans-Regular';
     src: url('../font/IBM-Plex-Sans/IBMPlexSans-Regular.otf');
}
 @font-face {
     font-family: 'IBMPlexSans-ExtraLight';
     src: url('../font/IBM-Plex-Sans/IBMPlexSans-ExtraLight.otf');
}
 @font-face {
     font-family: 'IBMPlexSans-BoldItalic';
     src: url('../font/IBM-Plex-Sans/IBMPlexSans-BoldItalic.otf');
}
 @font-face {
     font-family: 'Neue-Plak-Extended-Regular';
     src: url('../font/Neue-Plak-Extended-Regular.ttf');
}
 @font-face {
     font-family: 'Neue-Plak-Wide-Regular';
     src: url('../font/Neue-Plak-Wide-Regular.ttf');
}
 @font-face {
     font-family: 'Neue-Plak-Wide-SemiBold';
     src: url('../font/Neue-Plak-Wide-SemiBold.otf');
}

 body,html,div{
     font-family: "PingFang SC",pingfang,"Helvetica Neue","Arial";
     border: 0;
     margin:0;
     padding: 0;
}
 body,html{
     width: 100% !important;
     height: 100%;
}
 html::-webkit-scrollbar{
     width: 0rem;
}
 html::-webkit-scrollbar-thumb{
     border-radius: 0.625rem;
     background: #aaa;
}


/*-------------------------------------------loadding-----------------------------------------*/
 #loadding{
     width: 100%;
     height: 100%;
     background: #fff;
     position: fixed;
     top: 0;
     z-index: 99999;
     text-align: center;
     opacity: 1;
     transition:opacity .2s ease;
}
 #loadding img{
     width: 8.75rem;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
/*-----------------------------------------------Nav------------------------------------------*/
#wrapUpBg{
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    clip: rect(0,auto,auto,0);
}
 #wrapUp{
     width: 25rem;
     position: fixed;
     left: 2rem;
     right: 0;
     top: 0.5rem;
     z-index: 1001;
     filter: invert(100%);

 }

 #wrapUp .label{
     display: inline-block;
     margin:0;
     position: absolute;
     left: 42%;
     font-family: 'Neue-Plak-Wide-SemiBold', "PingFang SC","Helvetica Neue","Arial";
     font-weight: 600;
     color: #888;
}
 #wrapUp ul{
     font-family: 'Neue-Plak-Wide-SemiBold', "PingFang SC","Helvetica Neue","Arial";
     list-style: none;
     display: inline-block;
     margin: 0rem;
     padding: 0rem;
     padding-top:0rem;
     white-space: nowrap;
     float: left;
}
 #wrapUp ul li a{
     list-style: none;
     text-decoration:none;
}
 #wrapUp li{
     display: block;
     font-size: 4.2rem;
     padding: 0rem 0rem 0rem 0.1rem;
     line-height: 5.2rem;

}
 #wrapUp li a{
     opacity: 1;
     transition: color .2s ease;
     cursor: pointer;
     color: rgba(0,0,0,0);
     -webkit-text-stroke:0.07rem #000;
}
 #wrapUp p{
     font-size: 0.7rem;
     font-family: 'Neue-Plak-Extended-Regular';
     transition: color .5s ease;
     line-height: 1.2rem;
     padding-top: 1rem;
     padding-left: 0.1rem;
     color: #555;
}
 #wrapUp ul li .dot{
    height: 2rem;
    width: 2rem;
    display: inline-block;
    margin: 0;
    position: relative;
    padding-left: 1.1rem;
    padding-top: 0.2rem;
 }
 #wrapUp p:hover{
    color: #000;
 }
 #wrapUp li a:hover{
     opacity: 1 !important;
     color:#00aeff;
     -webkit-text-stroke:0.07rem #00aeff;
}
 #wrapUp .active a{
     color: black;
     font-family: 'Neue-Plak-Wide-SemiBold';
     opacity: 1;
     transition:color .2s ease;
}

 #wrap{
     width: 25rem;
     position: fixed;
     left: 2rem;
     right: 0;
     top: 0.5rem;
     z-index: 1000;
}
 #wrap .label{
     display: inline-block;
     margin:0;
     position: absolute;
     left: 42%;
     font-family: 'Neue-Plak-Wide-SemiBold', "PingFang SC","Helvetica Neue","Arial";
     font-weight: 600;
     color: #888;
}
 #wrap ul{
     font-family: 'Neue-Plak-Wide-SemiBold', "PingFang SC","Helvetica Neue","Arial";
     list-style: none;
     display: inline-block;
     margin: 0rem;
     padding: 0rem;
     padding-top:0rem;
     white-space: nowrap;
     float: left;
}
 #wrap ul li a{
     list-style: none;
     text-decoration:none;
}
 #wrap li{
     display: block;
     padding: 0rem 0rem 0rem 0.1rem;
     font-size: 4.2rem;
     line-height: 5.2rem;
}
 #wrap li a{
     opacity: 1;
     transition: color .2s ease;
     cursor: pointer;
     color: rgba(255,255,255,0);
     -webkit-text-stroke:0.07rem #000;
}
 #wrap p{
     font-size: 0.7rem;
     font-family: 'Neue-Plak-Extended-Regular';
     transition: color .5s ease;
     line-height: 1.2rem;
     padding-top: 1rem;
     z-index: -10;
     color: #bbb;
     padding-left: 0.1rem;
}
 #wrap ul li .dot{
    height: 2rem;
    width: 2rem;
    display: inline-block;
    margin: 0;
    position: relative;
    padding-left: 1.1rem;
    padding-top: 0.2rem;
 }
 #wrap p:hover{
    color: #000;

 }
 #wrap li a:hover{
     opacity: 1 !important;
     color:#00aeff;
     -webkit-text-stroke:0.07rem #00aeff;
}
 #wrap .active a{
     color: black;
     font-family: 'Neue-Plak-Wide-SemiBold';
     opacity: 1;
     transition:color .2s ease;
}
/*--------------------------------------------NAV-MOBILE-----------------------------------------*/
 #wrapMobile{
     width: calc(100% - 1.875rem);
     font-size:1.125rem;
     margin:0 auto;
     display: none;
     transition: margin-top .4s ease;
}
 #wrapMobile img{
     width: 6.875rem;
}
 #wrapMobile .menuType{
     display: inline-block;
     font-weight: 320;
     margin-left: calc(100% - 14.5625rem);
     margin-right: 0.125rem;
     font-family: 'IBMPlexSans-ExtraLight';
}
 #wrapMobile .menu{
     display: inline-block;
     font-weight: 700;
     margin-right: 0.25rem;
     font-family: 'IBMPlexSans-ExtraLight';
}
 #wrapMobile div{
     display: inline-block;
}
 #wrapMobilebg{
     background-color: #000;
     opacity: .8;
     width: 100vw;
     height: 100vh;
     z-index: 999;
     position: fixed;
     top: 0;
     overflow: hidden;
     text-align: right;
     display: none;
}
 #wrapMobilebg a{
     font-family: 'IBMPlexSans-ExtraLight';
     text-decoration: none;
     display: block;
     margin-top: 1.5rem;
     margin-right:1.25rem;
     opacity: 1;
     font-size:1.625rem;
     color: #eee;
     line-height: 0.875rem;
     font-weight: 300;
}
/*-----------------------------------------------share------------------------------------------*/
#shareUp{
    font-family: 'Neue-Plak-Extended-Regular';
     position: fixed;
     left: 1.8rem;
     bottom: 1rem;
     z-index: 11;
     width: 1.4rem;
}
#shareUpBg{
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    clip: rect(0,auto,auto,0);
}
#shareUp .crossbar{
    position: fixed;
    width: 0.3rem;
    height: 1.1rem;
    background-color: #ccc;
    margin: auto 0;
    left: 2.4rem;
    top: 0;
    bottom:0;
}
#shareUp img{
    display: inline-block;
    width: 1.3rem;
    filter: invert(100%);
}
#shareUp ul{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
#shareUp ul li{
    -webkit-writing-mode: vertical-rl;  
    margin: 1rem 0;
}
#shareUp ul li a{
    text-decoration: none;
    color: #ccc;
    font-size: 1.1rem;
}




#share{
    font-family: 'Neue-Plak-Extended-Regular';
     position: fixed;
     left: 1.8rem;
     bottom: 1rem;
     z-index: 10;
     width: 1.4rem;
}
#share .crossbar{
    position: fixed;
    width: 0.3rem;
    height: 1.1rem;
    background-color: #515151;
    margin: auto 0;
    left: 2.4rem;
    top: 0;
    bottom:0;
}
#share img{
    display: inline-block;
    width: 1.3rem;
}
#share ul{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
#share ul li{
    -webkit-writing-mode: vertical-rl;  
    margin: 1rem 0;
}
#share ul li a{
    text-decoration: none;
    color: #515151;
    font-size: 1.1rem;
}


/*---------------------------------------------wrapTitle------------------------------------------*/








/*---------------------------------------------arrow------------------------------------------*/

.arrowDown{
    display: inline;
    position: absolute;
    right: 2.6rem;
    bottom:1.8rem;
    z-index: 99;
}
.arrowUp{
    display: inline-block;
    position: absolute;
    filter: invert(100%);
    right: 2rem;
    bottom: 1rem;
    margin-bottom: -20rem;
    transform:rotate(180deg);
}


/*-----------------------------------------------index------------------------------------------*/
#mobileMask{
    display: none;
}
#mobileMask{
    background-color: #fff;
    z-index: 99999;
    width: 100%;
    height: 100%;
    position: fixed;
}
#mobileMask p{
    color: #0f0f0f;
    display: inline-block;
    position: absolute;
    font-size: 12px;
    text-align: center;
    margin:0 auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 30px 0;
}
 #mobileTip{
     background-color: #000;
     width: 100%;
     opacity: .98;
     height: 3.7rem;
     right: 0;
     left: 0;
     margin: 0 auto;
     z-index: 98;
     text-align: center;
     position: fixed;
     top:0;
     display: none;
     transition:top .6s ease;
}
 #mobileTip p{
     z-index: 99;
     font-size: 0.75rem;
     color: #9a9a9a;
     line-height: 0.625rem;
     font-weight: 400;
     margin-top: 1rem;
}
 .title{
     width: 100%;
     height: 100%;
     text-align: left;
     margin-top:0;
     right: 0rem;
     overflow:hidden;
     background-color: #0f0f0f;
}
 .title span{
     color: #b87e32;
}
 .title img{
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background-size: cover;
    opacity: 100;
    transition: opacity 1s ease-in-out;
}
.title video{
    width: auto;
    min-width: 100%;
    height: auto;
    min-height: 100%;
    background-size: cover;
    opacity: 100;
    transition: opacity 1s ease-in-out;
}
 .part1{
     width: 80rem;
     text-align: right;
     margin-top: 10rem;
     right: 0.1rem;
     position: absolute;
}
 .part1 ol{
     list-style: none;
     position: relative;
     top: -1rem;
     padding: 0;
     padding-right: 0.5rem;
     margin: 0;
     font-size: 0.75rem;
}
 .part1 ol li{
     display: inline-block;
     cursor: pointer;
     padding: 0 0.375rem;
     opacity: 1 !important;
     color: #555;
}
 .part1 ol .active{
     background: #333;
     color: #eee;
}
 .part1 ul{
     display: block;
     top: 0rem;
     list-style-type: none;
}
 .part1 ul li{
     padding: 0;
     margin: 0;
}
 .part1 ul li img{
     width: 100%;
}
 .part1 ul li video{
     width: 100%;
}

 .part1 li {
     -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
     -o-transition: all 0.3s ease-out;
     transition: all 0.3s ease-out;
}
 #container{
}
     
}

 #container li img{
     transition:opacity .2s ease;
     object-fit: cover;
}
 #container li img:hover{
     opacity: .3;
}
 #container li video{
     transition:opacity .2s ease;
}
 #container li video:hover{
     opacity: .3;
}
 #container li:hover >p{
     opacity: 1;
}
 #container li{
     text-align: center;
     width: 32%;
     float: left;
     margin-bottom: -0.1rem;
}
 #container .column-sizer{
    width: 0.25rem;
 }
 #container .column-2{
    
 }
 #container li p:hover + a > img{
     opacity: .3;
}
 #container li p:hover + a > video{
     opacity: .3;
}
 #container li p{
     display: inline-block;
     font-size: 1.0em;
     letter-spacing: 1.0em;
     padding-left: 1.0em;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin:auto;
     opacity: 0;
     color: black;
     z-index: 99;
     height: 1.0em;
     transition:opacity .2s ease;
     font-weight: 600;
     text-transform : uppercase;
     font-family: 'IBMPlexSans-ExtraLight';
}
 .othermenu{
     display: none;
}
 .part1 .over{
    margin-top: 12rem;
    width: 100%;
    text-align: center;
     font-family: 'IBMPlexSans-BoldItalic';
     font-size: 1.2rem;
 }
 .part1 .over p{
    display: inline-block;
    margin:0 auto;
    padding: 0.3rem 1.4rem 0.4rem 1.4rem;
    border:0.2rem solid #000;
    border-radius: 2rem;
 }
 .part1 .footer{
     text-align: center;
     margin: 13rem 0rem 0rem 0rem;
     padding-bottom: 0.6rem;
     font-family: 'IBMPlexSans-BoldItalic';
     font-size: 1rem;
 }


 @media screen and (max-width: 125rem) {

 }
 
 @media screen and (max-width: 98rem) {
    #wrapTitle{
        padding-right: 8.4rem;
    }
    #wrapTitle .wrapP1 {
        padding-right: 23rem;
    }
    #wrapUp li{
        font-size: 2.8rem;
        line-height: 3.4rem;
    }
    #wrap li{
        font-size: 2.8rem;
        line-height: 3.4rem;
    }
    .title .brief{
        font-size: 2rem;
        line-height:2.57rem;
        margin-left: 15.25rem;
    }
    .title{
        width: 100%;
    }
    .part1{
        width: 60rem;
        right: 0rem;
    }
     #container li{
         width: 31.5%;
    }
     #filters{
         width: 66rem;
         padding: 0;
    }
     img.mfp-img {
         max-width: 99% !important;
    }
}

 @media screen and (max-width: 84rem){
    #wrapTitle{
        padding-right: 3.1rem;
        
    }
    #wrapTitle .wrapP1 {
        padding-right: 7.9rem;
    }
    #wrap ul{
        padding-top: 5.2rem;
    }
    .title{
        width: 100%;
    }
    .title img{
        height: 34.5rem;

    }
    .title .brief{
        font-size: 1.5rem;
        line-height:2rem;
        margin-left: 34.25rem;
    }
    .part1{
        width: 48rem;
        right: 0rem;
    }
      #container li{
         width: 31%;
    }
     #filters{
         width: 47rem;
         padding: 0;
    }
     img.mfp-img {
         max-width: 99% !important;
    }
 }

 @media screen and (max-width: 58rem){
     #wrapTitle{
         display: none;
    }
     .title{
         margin-top: 5rem;
         width: 100%;
         display: none;
    }
    #wrapUpBg{
        display: none !important;
    }
    #shareUpBg{
        display: none;
    }
    #share{
        display: none;
    }
    .arrowDown{
        display: none;
    }
    .part1{
        padding: 0;
        width: 22rem;
        margin:0 auto;
        margin-top: 5rem;
        text-align: center;
        position: relative;
    }
     .part1 ul li{
         width: 21.1rem !important;
    }
    #container{
        padding: 0;
        margin-left: 1rem; 
    }
    
     img.mfp-img {
         max-width: 99% !important;
    }
    
     #wrap{
         text-align: center;
         position: absolute;
         display: none !important;
    }
    
     #filters{
         width: auto;
         text-align: center;
    }
    
     .scroll{
         display: none;
    }
     .share{
         display: none;
    }
     #wrapMobile{
         display: block;
         margin-top: 3.4375rem;
    }
     .othermenu{
         display: block;
         width: 90%;
         margin: 0 auto;
         padding-top: 7.5rem;
    }
     .othermenu p{
         font-family: 'IBMPlexSans-ExtraLight', "PingFang SC","Helvetica Neue","Arial";
         font-size: 1.625rem;
         font-weight: 200;
         padding-left: 0.25rem;
         margin-bottom: 1.375rem;
    }
     .othermenu ul{
         padding:0;
         margin: 0;
    }
     .othermenu ul a{
         list-style: none;
         background-color: #003BDA;
         width: 100%;
         height: 4.25rem;
         margin-top: 0.8125rem;
         border-radius: 1.125rem;
         position: relative;
         display: inline-block;
    }
     .othermenu ul a img{
         width: 1.25rem;
         margin-left: 1.625rem;
         margin-bottom:-0.25rem;
         margin-right: 0.375rem;
         display: inline-block;
    }
     .othermenu ul a p{
         font-family: 'IBMPlexSans-BoldItalic', "PingFang SC","Helvetica Neue","Arial";
         font-size: 1.375rem;
         color: white;
         display: inline-block;
         line-height: 4.25rem;
         margin:0;
    }
     .othermenu ul a .menubrife{
         font-size: 0.75rem;
         font-family: 'IBMPlexSans-ExtraLight', "PingFang SC","Helvetica Neue","Arial";
         font-weight: 200;
         position: absolute;
         right: 1.5rem;
         opacity: .8;
    }
}