@charset "utf-8";
/* CSS Document */
html{overflow:hidden}
#galleryAllOut{top:-21px;position:relative;}
.gTit_dot{display:inline-block;margin:0 10px;top:-5px;position:relative}

#galleryTitle_txt{position:absolute;z-index:10;width:100%;font-size:xx-large;letter-spacing:21px;text-shadow:1px 1px 1px #00000085, 4px 4px 5px #000;opacity:.8}
.galleryListOut{width:100%;display:flex;flex-wrap:wrap;position:relative;margin-bottom:25px}
.galleryTitleOut{width:100%;overflow:hidden}
.galleryTitle{color:rgba(255,255,255,0.7);position:relative;display:block;font-size:16px;letter-spacing:10px;top:7px;margin:13px}
.photoTitle{top:0px}
.galleryListDivOuter{position:relative;margin:0 auto;}
.galleryListDivOut{display:inline-block;flex:1;position:relative;margin:0.7vw;max-height:190px;cursor:pointer;height:90px;max-width:18vw;min-width:17vw;}
.galleryListDivOut2{margin:0.5%;width:32%;height:125px;max-width:inherit;min-width:auto;flex:inherit;}
.galleryListDiv{width:100%;height:100%;position:relative;overflow:hidden;
transition:0.55s cubic-bezier(.19,1.12,.76,1.27);z-index:9;}
.galleryListDivIn{width:100%;height:100%;position:relative;display:flex;box-shadow:5px 4px 14px #00000079;padding:7px;background-color:rgb(28 11 0 / 58%);}
.galleryListFlash{position:absolute;width:500px;height:500px;z-index:11;opacity:0;transition:.55s cubic-bezier(.19,1.12,.76,1.27);top:-110px;right:-110px;
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  transform:rotate(-45deg);
background: rgba(255,255,255,0);
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.46) 83%, rgba(255,255,255,0.58) 91%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(68%, rgba(255,255,255,0)), color-stop(83%, rgba(255,255,255,0.46)), color-stop(91%, rgba(255,255,255,0.58)), color-stop(96%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.46) 83%, rgba(255,255,255,0.58) 91%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.46) 83%, rgba(255,255,255,0.58) 91%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.46) 83%, rgba(255,255,255,0.58) 91%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.46) 83%, rgba(255,255,255,0.58) 91%, rgba(255,255,255,1) 96%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );}
.galleryListIn{width:100%;display:flex;overflow:hidden;}
.galleryListSdwOut{position:absolute;width:100%;height:100%;padding:10px 0 10px 10px;z-index:5}
.galleryListSdw{opacity:0.3;background-color:rgba(0,0,0,1);box-shadow:0px 0px 11px 10px rgba(0,0,0,1);z-index:5;width:100%;height:100%;}
.gallery_title{font-size:0.9vw;letter-spacing:4.3px;font-weight:400;position:absolute;text-align:center;width:100%;color:#eee;
text-shadow:4px 4px 5px #000000, 1px 1px 8px #000000, -1px -1px 7px #000000;z-index: 20;}
.galleryImg0{flex:2}
.galleryImg{flex:1}
.galleryImgBlur{filter:blur(8px);-webkit-filter:blur(8px);}
.g_listName{display:inline;font-weight:500;font-size:23px}

.photos_title{display:inline-block}
.sort_btn{display:inline-block;letter-spacing:0.4px;padding:8px 12px;background-color:#3c3c3c;border-radius:55px;
cursor:pointer;transition:0.25s ease-in}
.sort_btn:hover{-moz-transform: translate(0px, -6px);
-webkit-transform: translate(0px, -6px);
-o-transform: translate(0px, -6px);
-ms-transform: translate(0px, -6px);
transform: translate(0px, -6px)}
.sort_by_txt{display:inline-block;letter-spacing:2px;float:right}
.onsort,.notsort{width:19px;height:19px;display:inline-block;border-radius:50px;top:3px;position:relative;
-webkit-box-shadow: inset 0px 3px 3px 3px rgba(0,0,0,0.58);
-moz-box-shadow: inset 0px 3px 3px 3px rgba(0,0,0,0.58);
box-shadow: inset 0px 3px 3px 3px rgba(0,0,0,0.58);}
.onsort{background-color:#e2e2e2}

#gallery_images{width:98%;margin:0 auto}
.gdiv{padding:9px;width:25%;height:auto}
.gimg{cursor:pointer}
.gtitle{position:absolute;left:0;font-size:20px;opacity:.95;letter-spacing:0.1px;width:100%;max-height:25%;min-height:85px;text-align:center;padding-bottom:23px;bottom:0;background: linear-gradient(360deg, rgba(0,0,0,0.79) 0%,rgba(0,0,0,0.69) 50%, rgba(0,0,0,0) 100%);display:none;text-shadow:2px 2px 3px #000000, 1px 1px 6px #000000}
	.gtitle1{font-size:x-large;margin-bottom:9px}
	.gtitle2{font-size:xx-small;opacity:.9;letter-spacing:0.4vw}
#imgPopupOut{position:fixed;width:100%;height:100%;padding-top:36px;top:0px;left:0;z-index:49}
#imgPopup{width:100%;height:100%;background: #333333dd;
box-shadow:0 0 3px 5px rgba(255,255,255,.3);display:flex;justify-content: center}
	#imgPopupDiv{background-color: rgb(2 2 2);flex:5;overflow:hidden;width:100%;height:100%;position:relative;}
		#imgPopupImgD{display:flex;width:100%;height:100%}
		#imgPopupImg{position:relative;margin:0 auto;padding:15px;width:auto;height:100%;z-index:5;transition:0.5s;opacity:0;pointer-events: auto}
.exif_data{font-size:14px !important;padding:10px 20px;position:absolute;bottom:0}
.exif_dataIn{display:flex;flex-wrap:wrap;background-color:#222222;padding:7px 0 0 7px;
	box-shadow: -3px -3px 5px 4px #00000065;border-radius:15px}
	#ptitle1{font-size:xx-large;margin-bottom:5px;line-height:48px;margin-bottom:20px;}
	#ptitle2{font-size:large;padding-bottom:5px}
	#ptitle3{font-size:small;padding-bottom:20px}
	.imgPopupExif{flex:1}
	#updataOut{flex:1;display:flex;flex-wrap:wrap;background-color:#0b0b0bf5;}
	.upinputtitle{width:138px;line-height:35px;font-weight:bold}
	.upinputtitle2,.upinputtitle3{width:150px;padding:1px 10px;margin-bottom:0.4vw;font-weight:bold;background-color:#313131;border-radius:20px}
	.updatatxt2{padding:1px 1px;flex:4;margin-bottom:0px;font-weight:normal}
	.datadiv3{width:100%;display:flex;padding-right:5px}
	.datadiv3+.datadiv3{padding:0}
	.updatatxt3{padding:1px 1px;flex:1 !important;margin-bottom:0px;font-weight:normal}
	.breakspace{width:20px}
	#endPopDiv{width:100%;height:100%;position:absolute;z-index:2}

@media screen and (max-width: 767px) and (orientation: landscape) {
.gdiv{width:33.33%}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
.gdiv{width:50%}
}

@media screen and (max-width: 767px) {
#galleryTitle_txt{font-size:medium;letter-spacing:6px;}
.galleryListDiv:hover{transform: matrix3d(0.9,0,0.00,-0.0009,0.00,1,0.00,0,0,0,1,0,-5,0,0,1);
-webkit-transform: matrix3d(0.9,0,0.00,-0.0009,0.00,1,0.00,0,0,0,1,0,-5,0,0,1);}
.sort_btn{margin:10px 0px}
.gdiv{padding:0px;}
#gallery_images{width: 100%;}
.galleryListDivOut{flex:auto;width:25%;height:64px;margin:3px}
.galleryTitle{font-size:13px;letter-spacing:0.5vw}
.photos_title{display:block}
.sort_by_txt{display:block}
.gallery_title{font-size:2.9vw;letter-spacing:0.5vw}
.onsort,.notsort{width:16px;height:16px}
#imgPopup{display:block;overflow-y:scroll;width:100%}
.exif_data{position:relative;width:100%}
#imgPopupImg{padding:0}
#ptitle1{font-size:x-large;}
}

@media screen and (orientation: landscape) {
	
}

@media screen and (orientation: portrait) {
#imgPopup{display:block;overflow-y:scroll;width:100%}
.exif_data{position:relative;width:100%}
}

@media screen and (min-width: 768px) and (orientation: portrait) {

}

@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

}

@media (min-width: 768px) and (max-width: 991px) {
.galleryListDiv:hover{transform: matrix3d(0.9,0,0.00,-0.0009,0.00,1,0.00,0,0,0,1,0,-15,0,0,1);
-webkit-transform: matrix3d(0.9,0,0.00,-0.0009,0.00,1,0.00,0,0,0,1,0,-15,0,0,1);}
.gdiv{width:50%}
#imgPopupDiv{flex:3;overflow:auto}
#galleryTitle_txt{font-size:large;}
}

@media (min-width: 992px) and (max-width: 1199px) and (orientation: portrait) {

}

@media (max-width: 850px){
#galleryTitle_txt{font-size:large;}
}

@media (min-width: 992px) and (max-width: 1920px) {
#galleryTitle_txt{font-size:x-large;}
.galleryListDiv:hover{transform: matrix3d(0.9,0,0.00,-0.0009,0.00,1,0.00,0,0,0,1,0,-25,0,0,1);
-webkit-transform: matrix3d(0.9,0,0.00,-0.0009,0.00,1,0.00,0,0,0,1,0,-25,0,0,1);}
.gdiv{width:33.33%}
#imgPopupDiv{flex:4;overflow:auto;}
}

@media (min-width: 1921px) and (max-width: 2048px){

}



@media print{

}