@charset "utf-8";

body{margin:0px; padding:0px}
.fixNav{position:fixed; bottom:0px; width:100%; background:#222}
.fixNav #leftNavi{display:table; margin:0px auto; width:85%; border-left:1px solid #111; border-right:1px solid #333}
.fixNav #leftNavi>li{display:table-cell; position:relative; width:7.6%; border-top:1px solid #111; z-index:2}
.fixNav #leftNavi>li>a{display:block; padding-top:70px; padding-bottom:10px; height:30px; line-height:20px; text-align:center; color:#888; border-left:1px solid #333; border-right:1px solid #111}
.fixNav #leftNavi>li.ic01>a{background:url(/open_content/share/images/inc/ic_family01.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic02>a{background:url(/open_content/share/images/inc/ic_family02.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic03>a{background:url(/open_content/share/images/inc/ic_family03.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic04>a{background:url(/open_content/share/images/inc/ic_family04.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic05>a{background:url(/open_content/share/images/inc/ic_family05.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic06>a{background:url(/open_content/share/images/inc/ic_family06.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic07>a{background:url(/open_content/share/images/inc/ic_family07.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic08>a{background:url(/open_content/share/images/inc/ic_family08.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic09>a{background:url(/open_content/share/images/inc/ic_family09.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic10>a{background:url(/open_content/siteall/images/siteall_ic10.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic11>a{background:url(/open_content/siteall/images/siteall_ic11.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic11>a{background:url(/open_content/siteall/images/siteall_ic11.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic12>a{background:url(/open_content/siteall/images/siteall_ic12.png) no-repeat center 10px}
.fixNav #leftNavi>li.ic13>a{background:url(/open_content/siteall/images/siteall_ic13.png) no-repeat center 10px}
/* .fixNav #leftNavi>li.select{background:#0d6aca; background:linear-gradient(to bottom, #217ad6 0%,#0d6aca 30%)}
.fixNav #leftNavi>li.select>a{font-weight:bold; color:#fff; border-color:#0754a3}
.fixNav #leftNavi>li.select+li a{border-left-color:#111}*/
.fixNav #leftNavi>li.select{background:#d23939; background:linear-gradient(to bottom, #eb4d4d 0%,#d23939 30%)}
.fixNav #leftNavi>li.select>a{font-weight:bold; color:#fff; border-color:#d23939}
.fixNav #leftNavi>li.select+li a{border-left-color:#111}
.fixNav #leftNavi>li ul{display:none; z-index:3}
.fixNav #leftNavi>li>ul{position:absolute; padding:20px 25px; min-width:200px; bottom:110px; background:#202020; border:1px solid #181818}
.fixNav #leftNavi>li.ic04>ul,
.fixNav #leftNavi>li.ic05>ul,
.fixNav #leftNavi>li.ic06>ul,
.fixNav #leftNavi>li.ic02>ul,
.fixNav #leftNavi>li.ic08>ul,
.fixNav #leftNavi>li.ic07>ul,
.fixNav #leftNavi>li.ic12>ul{right:0px}
.fixNav #leftNavi>li>ul>li{border-top:1px dotted #484848}
.fixNav #leftNavi>li>ul>li:first-child{border-top:0px}
.fixNav #leftNavi>li>ul>li>a{display:block; padding:5px 3px; color:#ccc}
.fixNav #leftNavi>li>ul>li>ul{padding:10px 15px; background:#252525; border:1px dotted #484848; border-bottom:0px}
.fixNav #leftNavi>li>ul>li:last-child>ul{border-bottom:1px dotted #484848}
.fixNav #leftNavi>li>ul>li>ul>li a{display:block; padding:0px; color:#aaa; font-size:14px}
.fixNav #leftNavi>li>ul>li>ul>li>ul{margin:5px 0px; padding:5px 10px; background:#333}

.tit{padding:3% 0% 0%; font-size:50px; text-align:center; color:#333; letter-spacing:-1px}
.txt{margin:1% auto 2%; padding:1.5%; width:50%; background:#fff; border:2px solid #303030; border-radius:10px}
.txt p{text-align:center; font-size:18px; color:#484848}
.txt p span{display:inline-block; position:relative; font-weight:bold}
.txt p span:after{display:block; content:''; position:absolute; bottom:2px; width:100%; height:1px; background:#484848}
.arraysite{margin:0px auto; width:90%; text-align:center; overflow:hidden}
.arraysite>li{float:left; width:16.6%}
.arraysite>li>a{position:relative; display:block; margin:10px; padding:10px 10px; box-shadow:0px 1px 1px rgba(0,0,0,.7); border-radius:5px; background:#fff; overflow:hidden}
.arraysite>li>a p span{display:none; padding-top:30%; color:#fff; font-weight:bold; font-size:20px; line-height:30px}
.arraysite>li>a p{display:none; position:absolute; left:0px; top:100%; width:100%; height:100%; border-radius:4px}
.arraysite>li.on>a p{display:block; top:0px; background:#fff; background:rgba(0,0,0,.7)}
.arraysite>li.on>a p span{display:block}
.arraysite>li.off>a p{display:block; top:0px; background:#000; background:rgba(255,255,255,.5)}
.arraysite>li img{display:block; width:100%}

/*************************************************************************************************************************************************/

@media screen and (min-width:1260px){
	.fixNav #leftNavi{min-width:1260px; }
	.arraysite{min-width:1200px; max-width:1700px}
	/* .arraysite>li:nth-child(7){margin-left:8.3%} */
}
@media screen and (max-width:1260px){
	.fixNav #leftNavi{width:100%}
	.fixNav #leftNavi>li>a{font-size:14px; letter-spacing:-1px}
	.arraysite>li{width:25%}
	.tit{font-size:33px; font-weight:bold}	
	.txt{padding:5%; width:75%}
	.txt p{display:inline; font-size:14px}
}
@media screen and (max-width:768px){
	.fixNav #leftNavi{display:block}
	.fixNav #leftNavi>li{display:table; float:left; width:16.6%}
	.fixNav #leftNavi>li>a{display:table-cell; vertical-align:middle; padding-top:0px; padding-bottom:0px; height:60px; background:none !important}
	.fixNav #leftNavi>li>ul{bottom:120px; padding:5%; width:90%; left:0px}
	.tit{font-size:18px}	
	.arraysite>li{width:33.3%}
	.arraysite>li>a{margin:5px}
	.arraysite>li>a p span{padding-top:30%; font-size:16px; line-height:25px}
	.arraysite>li>a img{max-height:70px}
}
@media screen and (max-width:480px){
	.arraysite>li{width:50%}
	.arraysite>li>a p span{padding-top:15%}
}