@charset "utf-8";
/* 디테일 */
.project-detail-wrap { position: relative; width: 100%; margin: 0 auto; }
.project-detail-wrap .project-detail-layer { width: 100%; }
.project-detail-wrap .project-detail-layer .project-detail { background: #fff; width: 100%; height: auto; min-height: 1200px; margin-top: 80px; border-radius: 5px; }
.project-detail-wrap .close-btn { position: absolute; z-index: 13; width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(0,0,0,0.3); top: 50px; left: 50px; background-image: url(../../img/common/arrow_back.svg); background-size: 25px; background-repeat: no-repeat; background-position: center; cursor: pointer; outline: 0; opacity: .7; transition: opacity .25s ease; }
.project-detail-wrap .close-btn:hover { background: rgba(0,0,0,.5); background-image: url(../../img/common/arrow_back.svg); background-size: 25px; background-repeat: no-repeat; background-position: center; opacity: 1; }

.project-detil .intro { padding: 50px 0; }
.project-detil .intro .txt-box { float: left; width: 65%; padding-right: 30px; position: relative;}
.project-detil .intro .txt-box:after { content: ''; position: absolute; top: 5%; right: -1px; width: 1px; height: 95%; background: #000; z-index: 10; }
.project-detil .project-info-layer { float: left; width: 35%; background: #fff; padding-left: 30px; position: relative; }
.project-detil .project-info-layer:after { content: ''; position: absolute; top: 5%; left: 0; width: 1px; height: 90%; background: #000; }
.project-detil .project-info-layer .info { width: 100%; }
.project-detil .project-info-layer .info-box { padding: 20px; padding-right: 0; padding-left: 15px; border-bottom: 1px solid #dee3eb; }
.project-detil .project-info-layer .info-box:last-child { border-bottom: none; }
.project-detil .project-info-layer .info-box .head { font-size: 1.45rem; font-weight: 800; display: block; margin-bottom: 8px; transform: skew(-0.1deg); }
.project-detil .project-info-layer .info-box .cont { color: #666; font-size: 1.45rem; transform: skew(-0.1deg);  line-height: 1.5;}
.project-detil .box-title { font-size: 4rem; font-weight: 800; display: block; margin-bottom: 15px; }

.project-detil.cec .intro-box { background-image: url("../../img/portfolio/detail-banner/intro_bg.png"); }
.project-detil { overflow: hidden; }
.project-detil .intro-box .title .sub-title { font-size: 1.7rem; color: #fff; margin-bottom: 15px; }
.project-detil .intro-box .title .main-title { font-size: 4.5rem; font-weight: 800; color: #fff; }
.project-detil .intro-box .web-go-btn { height: 40px; display: inline-block; line-height: 40px; padding: 0 15px; border-radius: 4px; background: rgba(0,0,0,0.4); color: #fff; font-size: 1.35rem; font-weight: 300; margin-top: 20px; transition: background .25s ease; }
.project-detil .intro-box .web-go-btn:hover { background: rgba(0,0,0,0.5); }
.project-detil .intro-box .web-go-btn img { width: 18px; margin-top: 10px; margin-right: 5px; opacity: 0.8; }
.project-detil .intro-box { padding: 100px 50px; position: relative; overflow: hidden; background-size: cover; background-position: center bottom; background-repeat: no-repeat; text-align: center;}
.project-detil p { font-size: 1.65rem; color: #666; font-weight: 400; line-height: 30px; }
.project-detil .img-box { background: #fff; padding: 50px 0; }
.project-detil .img-box img { max-width: 100%; display: block; margin: 0 auto; }
.project-detil .media-box { float: left; width: 100%; background: #000; height: 500px; margin-top: 100px; }
.project-detil .media-box iframe { height: 100%; width: 100%; }

.rsp { width: 1170px; margin: 0 auto; }


/* 포트폴리오 상세 미디어 쿼리 */
@media all and (max-width: 1200px) {
	.project-detail-wrap .project-info-layer .thumb { height: auto; }
	.project-detail-wrap .project-info-layer .thumb img { height: auto; width: 100%; }
	.rsp { width: 100%; }

	.project-detil .intro,
	.project-detil .img-box { padding: 50px 20px 0; }
}

@media all and (max-width: 1024px) {	
	.project-detil .intro .txt-box,
	.project-detil .project-info-layer { width: 100%; padding: 0; padding-bottom: 50px; }
	.project-detil .project-info-layer:after,
	.project-detil .intro .txt-box:after { display: none; }
	.project-detil .project-info-layer .info-box { padding-left: 0; }
	.project-detil .project-info-layer .info-box .head { font-size: 1.7rem; }
	.project-detil .project-info-layer .info-box .cont { font-size: 1.7rem; }
	.project-detil .media-box { margin-top: 50px; }
	.project-detail-wrap .close-btn { top: 20px; left: 20px; }
}

@media all and (max-width: 768px) {
	.project-detil .intro-box .title .main-title { font-size: 4rem; }
}

@media all and (max-width: 500px) {
	.project-detail-wrap .close-btn:hover,
	.project-detail-wrap .close-btn { width: 40px; height: 40px; background-size: 17px; }
	.project-detail-wrap .project-info-layer .info  { width: 100%; }
	.project-detail-wrap .project-info-layer .thumb { display: none; }
	.project-detil p { font-size: 1.7rem; line-height: 26px; }
	.project-detil .intro-box { padding: 80px 20px 50px; }
	.project-detil .intro-box .txt-area .title { word-break: keep-all; }
	.project-detil .intro-box .title .main-title { font-size: 3rem; }
	.project-detil .project-info-layer {padding-bottom: 0;}
	.project-detil .intro .txt-box { padding-bottom: 30px; }
	.project-detil .project-info-layer .info-box { padding: 20px 0; }
	.project-detil .project-info-layer .info-box .head { font-size: 1.7rem; }
	.project-detil .project-info-layer .info-box .cont { font-size: 1.6rem; }
	.project-detil .media-box { margin-top: 30px; height: auto; }
}