@charset "UTF-8";

/*philosophy*/
section {
	position:relative;
	width:100%;
	margin:auto;
	color:#000;
}
.leadTxt {
	width:80%;
	margin:3rem 10% auto 10%;
}
.philosophyImg {
	width:80%;
	margin:3rem 10%;
}
.philosophyImg img {
	width:100%;
	height:100%;
	max-height:430px;
	object-fit: contain;
}


/**/
.president {
	position:relative;
	width:80%;
	padding:10%;
}
.presidentImg {
	position:absolute;
	top:7rem;
	width:80%;
	height:450px;
}
.presidentImg img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.president .backimg {
	position:absolute;
	top:350px;
	left:0;
	width:100%;
	height:calc(100% - 150px);
	background-color:#fff;
	z-index:-1;
}
.contentWrap {
}
.content {
	position:relative;
	width:100%;
	margin:470px auto auto auto;
	padding:3rem 0;
	text-align:left;
}
.content__en {
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-size:0.9rem;
}
.content__title {
	margin:1rem auto;
	font-size:1.1rem;
	line-height:2rem;
	font-weight:bold;
}
p.content__name {
	margin:1rem auto 3rem auto;
	font-size:0.95rem;
}
.content__txt {
}


/**/
.history {
	width:100%;
	color:#fff;
}
.contentsBar {
	width:65%;
	margin:0 0 auto 15%;
	padding:5% 10%;
	background-color:#323130;
	font-weight:normal;
	font-size:0.9rem;
}

.history table.list {
	margin:2rem auto;
	line-height:1.4rem;
	color:#fff;
	text-align:justify;
}
.history .list th {
	width:5rem;
	padding:0.5rem 0;
	font-size:0.85rem;
	vertical-align:top;
}
.history .list td {
	width:calc(100% - 6rem);
	padding:0.5rem 0;
	vertical-align:top;
	font-size:0.9rem;
	letter-spacing:0;
}

/**/
.gallery {
	width:80%;
	margin:30% 10%;
	color:#fff;
}
.gallery h3.titleB {
	margin:10% auto;
}
.gallery h3.titleB .en {
	line-height:1.5rem;
}
.gallery h3.titleB small {
	font-size:0.8rem;
}


/*masonry*/
.wrap {
  width:100%;
  margin:5rem auto 1rem auto;
}
.demo01 {
  margin:0 auto;
}
.item {
  width:100%;
  margin:10px auto;
}
.item img {
  width:100%;
}


@media print, screen and (min-width: 481px) {

/*philosophy*/
.leadTxt {
	width:70%;
	margin:3rem 15% 5rem 15%;
}
.philosophyImg {	
	width:70%;
	margin:3rem 15%;	
}


/**/
.president {
	width:70%;
	padding:15% 15% 10% 15%;
}
.presidentImg {
	top:12rem;
	width:70%;
	height:550px;
}
.president .backimg {
	top:460px;
	left:0;
	height:calc(100% - 300px);
}
.content {
	margin:600px auto auto auto;
}

/**/
.contentsBar {
	width:55%;
	margin:0 0 auto 25%;
	padding:5% 10%;
}


/**/
.gallery {
	width:70%;
	margin:15% 15% 20% 15%;
}
}


@media print {
.philosophyImg {
	padding:20px 10px !important;
	background-color:#1F1F1F !important;
}
.presidentImg {
	width:80% !important;
	margin:auto!important;
	height:300px !important;
}
.contentsBar {
	width:70% !important;
	margin:0 0 auto 15% !important;
}

.item {
  width:80% !important;
  margin:20px auto !important;
}
}


@media only screen and (min-width: 769px) {
	
/*philosophy*/
section {
	position:relative;
	width:100%;
	margin:auto;
	padding-top:5%;
	color:#000;
}
.philosophyWrap {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display:flex;
	margin:4rem auto 10% auto;
}
.leadTxt {
	width:30%;
	margin:auto 5% auto 15%;
}
.philosophyImg {
	width:35%;
	margin:auto 15% auto 0;
}

/**/
.president {
	position:relative;
	width:100%;
	margin:2rem auto 0 auto;
	padding:0%;
}
.president .titleB {
	margin:3% auto 1.5% 15%;
}
.contentWrap {
}
.content {
	float:left;
	width:30%;
	margin:auto 0 8% 0;
	padding:8% 15% 8% 15%;
	background-color:#fff;
}
.presidentImg {
	position:static;
	float:right;
	width:40%;
	margin:-4rem 0 auto 0;
}
.presidentImg img {
	object-position: 50% 25%;
}
.president .backimg {
	top:6rem;
	left:0;
	height:calc(100% - 6rem);
}
/**/
.history {
	position:relative;
	float:right;
	width:40%;
	margin:0%;
	z-index:5;
}
.history .titleB {
	margin:1.5rem auto;
}
.contentsBar {
	width:74%;
	margin:0 0 0 0%;
	padding:6% 13%;
	font-size:0.8rem;
}

/**/
.gallery {
	margin:-5% auto 13% auto;
}
.gallery h3.titleB {
	margin-bottom:3rem;
}
.gallery p {
	width:55%;
	margin:auto 45% auto 0%;
}

/*masonry*/
.wrap {
  width:calc(100% + 20px);
  margin:4rem auto 8rem -10px;
}
.item {
  width:calc(50% - 20px);
  margin:10px;
}
}