@charset "utf-8";


.gallery116 {box-sizing:border-box;}
.gallery116 ul.board_wrap {position:relative;width: 100%;height: 100%;background: rgba(0,0,0,0.5);float: left;}
.gallery116 ul.board_wrap > li {width:auto;float:left;display:inline-block; max-width:33%;}
.gallery116 ul.board_wrap > li a.board_name {width: 100%; float:left; padding: 0 15px; box-sizing:border-box; overflow: hidden; position: relative;
												color:#ddd; font-size:17px; text-overflow: ellipsis; line-height: 57px; white-space: nowrap; font-weight:400; border-right: 1px solid rgba(255,255,255,0.1);}
.gallery116 ul.board_wrap > li:last-child a.board_name:after {display:none;}
.gallery116 ul.board_wrap > li.active a.board_name {color:#333;font-size:18px;font-weight:600;background:rgba(232, 232, 231, 0.9);}


.gallery116 ul.board_wrap li div ul {position:absolute;display:none;background:#fff;}
.gallery116 ul.board_wrap > li.active div ul {position:absolute;left:0;width:100%;display:block;padding:20px 15px;box-sizing: border-box;}
.gallery116 ul.board_wrap > li.active div ul li {margin-bottom: 5px;float: left;width: 100%;}

.gallery116 ul.board_wrap > li .more_box {display:none;}
.gallery116 ul.board_wrap > li.active .more_box {display:inline;position:absolute;top:0;right: 15px;width:auto;}
.gallery116 ul.board_wrap > li.active .more_box a {font-size:23px; font-family:arial; color:#999; -webkit-transition:color 1s; transition:color 1s;}
.gallery116 ul.board_wrap > li.active .more_box a:hover {color:#fff;}

.gallery116 ul.board_wrap ul li a {text-decoration:none; position:relative; width:100%; float:left;}
.gallery116 ul.board_wrap ul li:not(:first-child) a .imgbox {display:none;}
.gallery116 ul.board_wrap ul li a .imgbox {width:30%;height: 160px;overflow:hidden;float:left;margin-bottom: 10px;position:relative;}
.gallery116 ul.board_wrap ul li a .imgbox img {position:absolute; margin:auto; top:-999px; bottom:-999px; right:-999px; left:-999px; 
                                                min-height:100%; min-width:100%; width:auto; height:auto; max-width:180%; max-height:180%; transition:transform 1s;}
.gallery116 ul.board_wrap ul li:first-child a .txtbox {width:70%;float:left;box-sizing:border-box;padding: 10px 0 10px 15px; text-align:left;}
.gallery116 ul.board_wrap ul li a p.tit {width:80%; float: left; overflow:hidden;
									   color:#555; line-height: 150%;  white-space:nowrap; text-overflow:ellipsis; text-decoration:none; text-align:left;
									   -webkit-transition:color 0.5s; transition:color 0.5s;}
.gallery116 ul.board_wrap ul li a p.tit:before {content:"\2219"; padding-right:3px; color:black; text-decoration:none;}
.gallery116 ul.board_wrap ul li a p.tit:hover {color:#727272;font-weight:600;}
.gallery116 ul.board_wrap ul li:first-child a p.tit {font-size: 18px;font-weight:600;padding-bottom:10px;width: 100%;}
.gallery116 ul.board_wrap ul li:first-child a p.tit:before {content:""; display:none;}
.gallery116 ul.board_wrap ul li:not(:first-child) a p.co {display:none;}
.gallery116 ul.board_wrap ul li a p.co {width: 100%; float: left; display:-webkit-box; max-height: 72px; overflow:hidden;
									  line-height: 150%; word-break:keep-all; white-space:normal; -webkit-line-clamp: 3; -webkit-box-orient:vertical;}
.gallery116 ul.board_wrap ul li a span.date {width:20%;float: left;color:#b4acaa;font-size: 15px;line-height: 150%;
											-webkit-transition:color 0.5s;transition:color 0.5s;text-align: right;}
.gallery116 ul.board_wrap ul li:first-child a span.date {position:relative;padding-top: 10px;float:left;line-height: 150%;text-align: left;}

.gallery116 ul.board_wrap li div ul li.no_data p.tit {font-size:14px; color: #555; line-height:29px; letter-spacing:-1px; padding-left:5px;}


/* hover */
.gallery116 ul.board_wrap ul li:hover a .imgbox img {transform:scale(1.1);}
.gallery116 ul.board_wrap ul li a:hover span.date {color:#838383; font-weight:600;}


/* layout setting */
.layout_01 .gallery116 {height:340px;}
.layout_06 .gallery116 ul.board_wrap > li {width:20%; text-align:center;}


/* layout option */
.border-radius .gallery116 ul.board_wrap ul li a .imgbox {border-radius:10px;}



.layout_height_M .gallery116 ul.board_wrap > li.active div ul li:nth-child(3) ~ li {display:none;}
.layout_height_H .gallery116 ul.board_wrap ul li a p.tit {/* line-height:30px; */}
.layout_height_M .gallery116 ul.board_wrap ul li a .imgbox {height: 90px;}
.layout_height_M .gallery116 ul.board_wrap ul li:first-child a .txtbox {padding: 0 0 0 15px;}
.layout_height_M .gallery116 ul.board_wrap ul li:first-of-type a p.co {white-space:nowrap;text-overflow: ellipsis;display: block;}


	@media (min-width:800px){
		.gallery116 ul.board_wrap > li>div {height:57px;}
		.gallery116 ul.board_wrap > li.active .more_box {height: 57px;line-height: 57px;}
		.gallery116 ul.board_wrap > li.active div ul {top:57px;height: calc(100% - 57px);}

		.layout_height_H .gallery116 {height:350px;}
		.layout_height_M .gallery116 {height:250px;}
	}

	@media (min-width:800px) and (max-width:1200px){
		.gallery116 ul.board_wrap > li.active a.board_name,
		.gallery116 ul.board_wrap > li a.board_name {font-size:17px;}

		.layout_03 .gallery116 ul.board_wrap ul li a span.date {text-indent:-33px; overflow:hidden;}
	}

	@media (max-width:799px){
		.gallery116 ul.board_wrap > li>div {height:44px;}
		.gallery116 ul.board_wrap > li.active .more_box {height:44px;line-height:44px;}
		.gallery116 ul.board_wrap > li.active div ul {top:44px;}

		.gallery116 ul.board_wrap > li.active a.board_name {font-size:17px;}
		.gallery116 ul.board_wrap > li a.board_name {line-height:44px;}
		.gallery116 ul.board_wrap ul li a p.co {font-size:15px;}
		.gallery116 ul.board_wrap ul li a .imgbox {height:120px;}
		.gallery116 ul.board_wrap ul li a .imgbox img {max-width:120%;}

		.layout_01 .gallery116 {height:300px;}

	}
	@media (min-width:600px) and (max-width:799px){
		.layout_height_H .gallery116 {height:344px;}
		.layout_height_M .gallery116 {height:250px;}

		.gallery116 ul.board_wrap > li.active div ul {height:300px;}
	}

	@media (max-width:599px){
		.layout_height_H .gallery116 {height: 299px;}
		.layout_height_M .gallery116 {height: 240px;}
		.layout_height_H .gallery116 ul.board_wrap > li.active div ul {height:255px;}
		.layout_height_M .gallery116 ul.board_wrap > li.active div ul {height: 200px;}

		.gallery116 ul.board_wrap ul li a p.tit {font-size: 15px;width: 80%;}
		.gallery116 ul.board_wrap ul li a span.date {font-size: 14px; overflow:hidden;width: 20%;}
		.gallery116 ul.board_wrap ul li:first-child a span.date {width:100%;}
		.gallery116 ul.board_wrap ul li:first-child a p.tit {font-size:17px;}

		

		.layout_height_H .gallery116 ul.board_wrap ul li a p.co {-webkit-line-clamp:2;}

	}