@charset "utf-8";

.project84-content0 .work-title {display: inline-block; padding-right: 10px; background-color: #3a8cd7; color: transparent;
	background: -webkit-linear-gradient(top, #13b5b1, #3a8cd7);
	background:		-moz-linear-gradient(bottom, #13b5b1, #3a8cd7);
	background:			linear-gradient(to bottom, #13b5b1, #3a8cd7);
	-webkit-background-clip: text;
			background-clip: text;
}
.project84-content0:before {content: ''; position: absolute; top: 52px; left: 0; width: 100%; height: 1680px; background: url('/resource/images/work/project84/bg0.png') no-repeat 50% 0; background-size: 1920px auto;}
.project84-content2:before {content: ''; position: absolute; top: 526px; left: 0; width: 100%; height: 1680px; background: url('/resource/images/work/project84/bg1.png') no-repeat 50% 0; background-size: 1920px auto;}

.project84-content0 .work-design {padding: 0 0 158px;}
.project84-content0 .item0 {position: relative; left: 50%; width: 1009px; margin-left: -686px;}
.project84-content0 .item1 {position: absolute; bottom: 53px; left: 50%; width: 892px; margin-left: -142px;}
.project84-content0 .item0 > img,
.project84-content0 .item1 > img {width: 100%;}

.project84-content1 {padding: 30px 0; margin-top: -30px; margin-bottom: -30px;}
.project84-content1 > img,
.work-item-list .col > img {box-shadow: 0 0 30px 0 rgba(0,0,0,0.16);}

.work-item-list {overflow: visible; padding-bottom: 200px;}
.work-item-list:after {content: ''; clear: both; display: block; height: 0;}
.work-item-list .col {width: calc(50% - 20px); padding: 0 20px 0 0;}
.work-item-list .col + .col {padding: 0 0 0 20px;}
.work-item-list .col > img + img {margin-top: 80px;}

@media screen and (max-width: 1366px) {
	.project84-content0 .item0 {width: 73.865vw; margin-left: -50.220vw;}
	.project84-content0 .item1 {bottom: 53px; width: 65.300vw; margin-left: -10.395vw;}
}

@media screen and (max-width: 1024px) {
	.project84-content0:before {top: 85px; height: 896px; background-size: 1024px auto;}
	.project84-content2:before {top: 192px; height: 896px; background-size: 1024px auto;}
	.project84-content0 .work-design {padding-bottom: 84px;}
	.project84-content0 .item0 {width: 540px; margin-left: -366px;}
	.project84-content0 .item1 {bottom: 28px; width: 474px; margin-left: -74px;}

	.project84-content1 {overflow: visible; max-width: calc(100% - 296px); padding-top: 16px; padding-bottom: 16px; margin: -16px auto;}
	.project84-content1 > img,
	.work-item-list .col > img {box-shadow: 0 0 16px 0 rgba(0,0,0,0.16);}
	.work-item-list {padding-bottom: 120px;}
	.work-item-list .col {width: calc(50% - 10px); padding-right: 10px;}
	.work-item-list .col + .col {padding-left: 10px;}
	.work-item-list .col > img + img {margin-top: 44px;}
}

@media screen and (max-width: 768px) {
	.project84-content0:before {top: 39%; height: 0; padding-bottom: 88%; background-size: 100% auto;}
	.project84-content2:before {top: 32.2%; height: 0; padding-bottom: 88%; background-size: 100% auto;}
	.project84-content0 .work-design {padding-bottom: 9%;}
	.project84-content0 .item0 {width: 64.5%; margin-left: -40.4%;}
	.project84-content0 .item1 {bottom: 4%; width: 53%; margin-left: -8.4%;}
	.project84-content1 {max-width: calc(100% - 72px);}
	.project84-content1 > img {width: 100%;}

	.project84-content1 {padding-top: 6px; padding-bottom: 6px; margin: -6px auto;}
	.project84-content1 > img,
	.work-item-list .col > img {box-shadow: 0 0 6px 0 rgba(0,0,0,0.16);}
	.work-item-list .col {float: left; width: calc(50% - 5px); padding-right: 5px;}
	.work-item-list .col + .col {padding-left: 5px;}
	.work-item-list .col > img + img {margin-top: 18px;}
}