@charset "UTF-8";

* { margin:0; padding:0; }
body { font-family: proxima-nova, sans-serif;; width:100vw; background:#fafafa; }
.content { max-width:1200px; text-align: center; margin:auto; }

#main_content { font-family:'jaf-bernino-sans-condensed'; background:#fff; color:#333; }
.header { text-align:center; padding:40px 0; }
.header h2 { font-size:56px; padding:0 0 20px; }
.header p { font-family:'jaf-facitweb'; font-size:18px; line-height:24px; padding:0 20px 0px; }
.header p a { color:#ff5500; font-weight:bold; text-decoration:none; }
.header .back { font-family:'jaf-facitweb'; font-weight:bold; font-size:14px; color:#ff5500; cursor:pointer; }

#category_content { background:#dddddd; padding:60px 0; }
#category_content .category .title2 { background:#333; color:#fff; font-size:22px; max-width:570px; margin:0 auto; cursor: pointer; }
#category_content .category .screen { display:inline-block; width:125px; height:80px; line-height:80px; margin:10px; vertical-align:middle; text-align: center; overflow:hidden; }
#category_content .category .screen img { max-width:125px; max-height:80px;  border-radius:5px;}
#category_content .category .vertical_right { float: right; padding: 30px 20px 0 0; text-align: center;}
#category_content .category .vertical_right.show svg{ -webkit-transform: rotate(180deg); transform:rotate(180deg); }
#category_content .category b { display:inline-block; max-width:360px; padding: 0 10px 5px; }
#category_content .category .photosets { padding:0 0 40px; font-family:'jaf-facitweb'; color:#333; }
#category_content .category .photoset { background:#fff; max-width:550px; max-height:0; margin:0 auto; border-bottom:1px solid #d9d9d9; padding:0 20px; box-sizing: border-box; transition:all 0.6s; overflow:hidden; }
#category_content .category .photoset .title3 { font-size:18px;  }
#category_content .category .photoset .date { font-size:12px; font-weight:bold; color:#999;  }
#category_content .category .photoset.show { max-height:120px; padding:12px 20px; cursor: pointer; }


#gallery_content { background:#dddddd; padding:60px 0; min-height:510px; width:100vw; margin:0 auto; }
#gallery_content .photo { width: 165px; height: 165px; line-height: 165px; display: inline-block; margin: 5px; vertical-align: middle; text-align: center; overflow: hidden; }
#gallery_content .photo a { width: 165px; height: 165px; line-height: 165px; display: inline-block; text-align: center; }
#gallery_content .photo img { min-width: 165px; min-height: 165px; vertical-align: middle; margin: -125px -600px; }
#gallery_content .back_nav { display:none; z-index:100; padding:20px; position: fixed; top: 0px; width: 100vw; background: #ddd; border-bottom: solid 1px #333;}
#gallery_content .back_nav .back { font-family:'jaf-facitweb'; font-weight:bold; font-size:14px; color:#ff5500; cursor:pointer; }
#gallery_content .backPic_nav { display:none; z-index:300; padding:20px; position: fixed; top: 0px; width: 100vw; background: #ddd; border-bottom: solid 1px #333;}
#gallery_content .backPic_nav .back { font-family:'jaf-facitweb'; font-weight:bold; font-size:14px; color:#ff5500; cursor:pointer; }
#gallery_content .show_pic { display:none; position: fixed; top: 0; width: 100vw; height: 100vh; line-height:100vh; text-align:center; z-index: 200; background: #333;}
#gallery_content .show_pic span.left { top: 7vh; position: absolute; margin-left: -50px; cursor: pointer;}
#gallery_content .show_pic span.left svg { height: 50px; width: 50px; opacity: 0.7; fill: white; -webkit-transform: rotate(180deg);transform: rotate(180deg); }
#gallery_content .show_pic span.right { top: 7vh; position: absolute; margin-right: -50px; cursor: pointer;}
#gallery_content .show_pic span.right svg { height: 50px; width: 50px; opacity: 0.7; fill: white; }
#gallery_content .pic { padding-top: 60px; max-width: 100vw; max-height: 70vh; min-width: 600px; vertical-align: middle; margin: 0 -50px; box-sizing: content-box;}


@media screen and (max-width: 700px){
	#gallery_content .photo { width: 120px; height: 120px; line-height: 120px; margin: 2.5px;}
	#gallery_content .photo a { width: 120px; height: 120px; line-height: 120px; }
	#gallery_content .photo img {  min-width: 120px; min-height: 120px; }
}
@media screen and (max-width: 500px){
	#gallery_content .photo { width: 78px; height: 78px; line-height: 78px; margin: 1px;}
	#gallery_content .photo a { width: 78px; height: 78px; line-height: 78px; }
	#gallery_content .photo img {  min-width: 78px; min-height: 78px; }
}
@media screen and (max-width: 600px){
	#gallery_content .pic { min-width: 100vw; }
}

@media screen and (max-width: 410px){
	#category_content .category .title2 { text-align: center; }
	#category_content .category .vertical_right { position: absolute; right: 0; padding: 50px 20px 0 0;}
	#category_content .category b { min-width: 320px; }
}