@charset "UTF-8";

/** tab ****************************************/

#tab-area{
}

#tabnavi ul{
	margin-left:200px;
	padding:30px 10px;
	
}
#tabnavi li{
	display:inline;
	margin:0 10px;
}
#tabnavi li a{
	display:inline-block;
	background:#286579;
	color:#fff;
	padding:5px;
	width:150px;
	height:30px;
	text-decoration:none;
	text-align:center;
	font-size:1.6em;
	font-family: 'Josefin Sans', sans-serif;
}
#tabnavi li a:hover,
#tabnavi li a.active{
	background:#ddd;
	color:#333;
	text-decoration:none;
}
#tabcontent{
	padding:10px 20px 10px 20px;
}




/** contents ****************************************/

.#content{
	background:#286579;
}


#contents .section {
	width            : 950px;
	overflow         : hidden;
	padding-bottom   : 20px;
	border-bottom    : 1px solid #cccccc;
}

#contents .section ul.iconList {
	width            : 980px;
}

#contents .section ul.iconList li {
	float            : left;
	padding-right    : 15px;
	width            : 300px;
	padding-bottom    : 25px;
}

#contents .section ul.iconList li img {
	float            : left;
	display          : block;
}


#contents .section ul.iconList li.photo img {
	float            : none;
	margin-bottom    : 7px;
}





#contents .section ul.iconList li.photo .card {
	width: 300px;
	height: 180px;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.5s;
}

#contents .section ul.iconList li.photo:hover .card {
	 -webkit-transform: rotateY(180deg); }

#contents .section ul.iconList li.photo .face {
	position: absolute;
	-webkit-backface-visibility: hidden;
}
#contents .section ul.iconList li.photo .back {
	width: 260px;
	height: 140px;
	-webkit-transform: rotateY(180deg);
	background: #b8dce8 ;
	padding:20px;
}

#contents .section ul.iconList li.photo .front {
	 z-index: 10;
}

#contents .section ul.iconList li.photo:hover .front {
	 z-index: 0;
}





#contents .section ul.iconList li div {
	float            : right;
	width            : 210px;
	line-height      : 1.5;
}

#contents .section ul.iconList li.photo div {
	float            : none;
	width            : auto;
}

#contents .section ul.iconList li h3 {
	font-size        : 14px;
	line-height      : 1.43;
	margin-bottom    : 7px;
}

#contents .section ul.iconList li div span {
	font-size        : 10px;
	font-weight      : normal;
}

#contents #private {
	padding          : 0;
	border-bottom    : none;
}

/*/*/



/** security ****************************************/
#security .system {
	border           : 1px solid #cccccc;
	padding          : 19px 19px 4px;
/*	margin-bottom    : 20px;*/
}

#security .system .left {
	width            : 200px;
}

#security .system .right {
	width            : 670px;
}

/*/*/






/* clear ****************************************/

#contents .section ul.iconList:after,
#contents .section ul.iconList li:after,
#security .system:after
{content:" "; height:0px; clear:both; visibility:hidden; display:block;}

#contents .section ul.iconList
#contents .section ul.iconList li,
#security .system
{display :inline-block;}

/*\*/
* html #contents .section ul.iconList,
* html #contents .section ul.iconList li,
* html #security .system
{height:1%;}

#contents .section ul.iconList,
#contents .section ul.iconList li,
#security .system
{display:block;}
/*/*/