@charset "utf-8";
/* CSS Document */

.section{ background-size: cover; }

#section0 { background-image:url(../images/background4.jpg); background-position: center center; background-repeat: no-repeat; background-size:cover; }
#section0 .blur { background-image:url(../images/background4_blur.jpg); }

.sub_content { padding: 150px 0; }
.sub_content .sub_title { margin-bottom: 40px; font-size: 32px; letter-spacing:-1px; color:#181818; font-weight: 400; }
.sub_content .sub_title span { display: inline-block; }
.sub_content .sub_title span::after { display:block; content:''; width: 150%; height:1px; background-color: #aaa; margin:-10px 0 0 2px; }
.sub_content h3 { font-size: 24px; font-weight: 400; color:#181818; }
.sub_content > div.back { background-color: #f2f2f2; }
.sub_content > div > div { max-width: 1234px; width: 90%; }

.portfolio { padding: 50px 0;}
.portfolio .portfolio_title { padding: 7px 5px; display:inline-block; color: #fff; background-color:#4f4f4f; font-weight:400; font-size:15px; letter-spacing:0.5px; margin-bottom: 25px; }
.portfolio .item { position:relative; margin-right: 15px; padding:10px; border: solid 1px #000; overflow: hidden; }
.portfolio .item .img { overflow: hidden; }
.portfolio .item .img  img { width: 100%; height:100% }
.portfolio .item .item_hover { position: absolute; top:75%; bottom:0px; left:0px; right:0px; background-color: rgba(0, 0, 0, 0.5); padding: 10px 20px; color: #fff;
								-webkit-transition: .25s top; -moz-transition: .25s top; -o-transition: .25s top; transition: .25s top;}
.portfolio .item .item_hover.active { top: 0px }
.portfolio .item .item_hover .top { padding: 5px 0 30px 0; }
.portfolio .item .item_hover .top span { height: 19px; display: block; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width:100%; }
.portfolio .item .item_hover .top p { display: block; height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size:16px; margin: 2px auto 0 0; width:90%; }
.portfolio .item .item_hover .btm { font-size: 14px; font-weight:100; line-height:180%; }
.portfolio .item .itme_hover .btm p:after { content: ''; display:block; clear:both; float:none; }
.portfolio .item .item_hover .btm p span { float: left; display:block; width: 67%; word-break: break-all; }
.portfolio .item .item_hover .btm p span:first-child { width: 33%; }
.portfolio .item_slide { position:relative; }
.portfolio .item_nav_left { position:absolute; top: 50%; left: -50px; cursor:pointer; }
.portfolio .item_nav_right { position:absolute; top: 50%; right: -50px; cursor:pointer; }

.x-btn {
  top: 20px; right:20px;
  width: 20px; height: 20px; position: absolute; cursor: pointer; float: right;
  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;
}
.x-btn span { display: block; position: absolute; background: #fff; opacity: 1; }
.x-btn span:nth-child(1) { height: 1px; width: 20px; top: 9.5px; left: 0; }
.x-btn span:nth-child(2) { height: 20px; width: 1px; top: 0px; left: 9.5px; }
.x-btn.open { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }