/* CSS Document */

section#sub-section {	
	padding: 0;
	width:100%;
	height: 100vh;
}
section#sub-bg {
	width: 100%;
	background: #fbfbfb;
}
#sub-bg .section-in {
	width: 1024px;
	margin: auto;
}
/*.sub-top {	
	width: 100%;
	height: 100%;
	background: url("../images/portfolio/port-bg01.jpg") no-repeat center / cover;
	background-attachment: fixed !important;
}*/
.sub-top-bg {
	position: fixed; 
	top: 0;      
	left: 0;     
	width: 100%;  
	height: 100%;
	background-image: url("../images/portfolio/port-bg01.jpg");   
	background-repeat: no-repeat;
	background-size: cover;             
	background-position: center center; 
	transform: translateZ(0); 
	z-index: -1;
}
.sub-top-bg.second {	
	background: url("../images/portfolio/port-bg02.png") no-repeat center / cover;
}
.sub-top-bg.third {	
	background: url("../images/portfolio/port-bg03.jpg") no-repeat center / cover;
}
.sub-top-bg.fourth {	
	background: url("../images/portfolio/port-bg04.jpg") no-repeat center / cover;
}
.sub-top-bg.fifth {	
	background: url("../images/portfolio/port-bg05.png") no-repeat center / cover;
}
.sub-top-bg.sixth {	
	background: url("../images/portfolio/port-bg06.png") no-repeat center / cover;
}
.sub-top-bg.seventh {	
	background: url("../images/portfolio/port-bg07.png") no-repeat center / cover;
}
.sub-top-bg.eighth {	
	background: url("../images/portfolio/port-bg08.png") no-repeat center / cover;
}
.sub-top-bg.ninth {	
	background: url("../images/portfolio/port-bg09.png") no-repeat center / cover;
}
.sub-top-bg.tenth {	
	background: url("../images/portfolio/port-bg10.png") no-repeat center / cover;
}
.sub-top-bg.eleventh {	
	background: url("../images/portfolio/port-bg11.png") no-repeat center / cover;
}
.sub-top-bg.twelfth {	
	background: url("../images/portfolio/port-bg12.png") no-repeat center / cover;
}
.sub-top-bg.thirteenth {	
	background: url("../images/portfolio/port-bg13.png") no-repeat center / cover;
}
.sub-top-bg.fourteenth {	
	background: url("../images/portfolio/port-bg14.png") no-repeat center / cover;
}
.sub-tit-wrap {
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.sub-tit-wrap small {
	display: block;
	margin-bottom: 10px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #510c9f;
}
.sub-tit-wrap h2 {
	font-weight: 700;
}
.view-btn {
	display: block;
	width: 98px;
	height: 34px;
	line-height: 34px;
	border-radius: 50px;
	border: 1px solid #510c9f;
	font-size: 1rem;
	text-align: center;
	font-weight: 600;
	color: #510c9f;
	transition: all .3s ease-in;
}
.view-btn:hover {
	border: 1px solid #510c9f;
	background: #510c9f;
	color: #fff;
	box-shadow: 0px 10px 15px 1px rgb(110, 19, 213, 0.15);
}
.view-btn.tablet {display: none;}
.view-btn.mobile {display: none;}
.sub-txt {
	margin-bottom: 40px;
	font-size: 5rem;
	font-weight: 800;
	color: #ececec;
	text-align: center;
}
.sub-txt.m {
	margin-top: 150px;
	text-align: left;
}
.sub-img-wrap {
	position: relative;
}
.pc-border {
	border-radius: 20px 20px 0 0;
}
.pc-cover {
	position: absolute;
	top: 0;
	width: 100%;
	padding: 30%;
	border: 5px solid #181c25;
	border-radius: 20px;
	box-sizing: border-box;
}
.mobile-img {
	display: flex;
}
.mobile-img li {
	width: 33.33%;
	height: 640px;
	border: 5px solid #181c25;
	border-radius: 30px;
	box-sizing: border-box;
	background: url("../images/portfolio/port01-mobile.jpg") no-repeat top / cover;
}
.mobile-img.second li {
	background: url("../images/portfolio/port02-mobile.jpg") no-repeat top / cover;
}
.mobile-img.third li {
	background: url("../images/portfolio/port03-mobile.jpg") no-repeat top / cover;
}
.mobile-img.fourth li {
	background: url("../images/portfolio/port04-mobile.png") no-repeat top / cover;
}
.mobile-img.fifth li {
	background: url("../images/portfolio/port05-mobile.jpg") no-repeat top / cover;
}
.mobile-img.sixth li {
	background: url("../images/portfolio/port06-mobile.png") no-repeat top / cover;
}
.mobile-img.seventh li {
	background: url("../images/portfolio/port07-mobile.jpg") no-repeat top / cover;
}
.mobile-img.eighth li {
	background: url("../images/portfolio/port08-mobile.png") no-repeat top / cover;
}
.mobile-img.ninth li {
	background: url("../images/portfolio/port09-mobile.png") no-repeat top / cover;
}
.mobile-img.tenth li {
	background: url("../images/portfolio/port10-mobile.png") no-repeat top / cover;
}
.mobile-img.eleventh li {
	background: url("../images/portfolio/port11-mobile.jpg") no-repeat top / cover;
}
.mobile-img.twelfth li {
	background: url("../images/portfolio/port12-mobile.png") no-repeat top / cover;
}
.mobile-img.thirteenth li {
	background: url("../images/portfolio/port13-mobile.jpg") no-repeat top / cover;
}
.mobile-img.fourteenth li {
	background: url("../images/portfolio/port14-mobile.png") no-repeat top / cover;
}
.pc-cover.gray, .mobile-img.gray li {
	border-color: #919191;
}
.mobile-img li:nth-child(2) {
	margin: 100px 30px 0;
	background-position: 0 -565px;
}
.mobile-img li:nth-child(3) {
	margin: 50px 0px 0;
	background-position: 0 bottom;
}
section#sub-bg2 {
	background: #fff;
}
.sub-img-wrap.subpage {
	margin-bottom: 100px;
	box-shadow: 0px 5px 15px 0px rgb(0, 0, 0, 0.1);
}
.sub-img-wrap.subpage img {
	border-radius: 0;
}



@media all and (max-width:1024px) {
	section#sub-section {
		height: 80vh;
	}
	#sub-bg .section-in {
		width: 80%;
	}
	.mobile-img li {
		width: 50%;
		height: 520px;
	}
	.mobile-img li:first-child {
		margin-right: 15px;
	}
	.mobile-img li:nth-child(2) {
		margin: 100px 0 0 15px;
	}
	.mobile-img li:last-child {
		display: none;
	}
}


@media all and (max-width:860px) {
	.sub-top-bg {
		background: url("../images/portfolio/port-bg01-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.second {
		background: url("../images/portfolio/port-bg02-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.third {
		background: url("../images/portfolio/port-bg03-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.fourth {
		background: url("../images/portfolio/port-bg04-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.fifth {
		background: url("../images/portfolio/port-bg05-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.sixth {
		background: url("../images/portfolio/port-bg06-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.seventh {
		background: url("../images/portfolio/port-bg07-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.eighth {
		background: url("../images/portfolio/port-bg08-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.ninth {
		background: url("../images/portfolio/port-bg09-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.tenth {
		background: url("../images/portfolio/port-bg10-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.eleventh {
		background: url("../images/portfolio/port-bg11-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.twelfth {
		background: url("../images/portfolio/port-bg12-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.thirteenth {
		background: url("../images/portfolio/port-bg13-t.jpg") no-repeat center center / cover;
	}
	.sub-top-bg.fourteenth {
		background: url("../images/portfolio/port-bg14-t.jpg") no-repeat center center / cover;
	}
}


@media all and (max-width:767px) {
	.view-btn.pc {display: none;}
	.view-btn.tablet {display: block;}
	.view-btn.mobile {display: none;}
	.mobile-img li {
		width: 50%;
		height: 480px;
	}
	.sub-txt {
		font-size: 2.75rem;
	}
	.pc-cover, .mobile-img li {
		border-width: 3px;
	}
}


@media all and (max-width:540px) {
	.mobile-img li {
		width: 50%;
		height: 380px;
		border-radius: 20px;
	}
}


@media all and (max-width:480px) {
	.section-in .sub-tit-wrap h2 {margin-bottom: 30px;}
	.view-btn {
		width: 96px;
		height: 30px;
		line-height: 30px;
		font-size: 0.75rem;
	}
	.view-btn.pc {display: none;}
	.view-btn.tablet {display: none;}
	.view-btn.mobile {display: block;}
	.sub-top-bg, .sub-top-bg.second, .sub-top-bg.third, .sub-top-bg.fourth, .sub-top-bg.fifth, .sub-top-bg.sixth, .sub-top-bg.seventh, .sub-top-bg.eighth, .sub-top-bg.ninth, .sub-top-bg.tenth, .sub-top-bg.eleventh, .sub-top-bg.twelfth, .sub-top-bg.thirteenth, .sub-top-bg.fourteenth {
		background-position: -50px center;
	}
	.sub-tit-wrap {
		position: absolute;
		top: 150px;
		transform: inherit;
	}
	.mobile-img li:first-child {
		width: 85%;
		margin: auto;
		height: 600px;
	}
	.mobile-img li:nth-child(2) {
		display: none;
	}
}