@charset "utf-8";

/* 공통 (default) */
.sect-pre {display: block; font-size: 1.25rem; font-weight: 500; color: var(--color-primary);}
.sect-title {font-size: 3rem; font-weight: 300;}
.sect-title-b {font-weight: 500; color: var(--color-primary); border-bottom: 2px solid var(--color-primary);}
.sect-desc-wrap {margin-top: 1rem;}
.sect-desc {font-size: 1.25rem; font-weight: 400;}
@media screen and (max-width:1280px){
	.sect-pre {text-align: center;}
	.sect-title {font-size: 2rem; text-align: center;}
	.sect-desc {text-align: center;}
}
/* 공통 (default) */

/* 포트폴리오 (portfolio) */
.portfolio-inner {padding: 7.5rem 0;}
.portfolio-title {line-height: 1.5;}
.portfolio-desc {color: var(--color-secondary);}
.portfolio-list {display: flex; flex-wrap: wrap; margin-top: 3rem; position: relative; left: -0.625rem; width: calc(100% + 1.25rem);}
.portfolio-item {width: calc(100% / 4); aspect-ratio: 1/1; padding: 0.625rem; box-sizing: border-box;}
.portfolio-link {display: block; width: 100%; height: 100%; position: relative; border-radius: 1.25rem; overflow: hidden;}
.portfolio-img {display: block; width: 100%; height: 100%; object-fit:cover;}
.portfolio-date {z-index: 1; position: absolute; top: 1rem; right: 1rem; font-size: 0.875rem; display: block; border-radius: 10rem; color: #fff; background: var(--color-primary); padding: 0.5rem 0.94rem; transition: .5s;}
.portfolio-item:hover .portfolio-date {background: none;}
.portfolio-overlay {position: absolute; inset: 0; opacity: 0;}
.portfolio-item:hover .portfolio-overlay {background: rgba(8, 13, 24, 0.8); opacity: 1; transition: .5s;}  
.portfolio-overlay-content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; width: 96%;}
.portfolio-overlay-title {text-align: center; font-size: 1.75rem;}
.portfolio-overlay-desc {text-align: center; margin-top: 0.5rem}
.portfolio-overlay-company {position: absolute; bottom: 1.25rem; right: 1.25rem; color: #5acaff;}
@media screen and (max-width:1280px){
	.portfolio {padding: 5rem 0.8rem 6rem;}
	.portfolio-item {width: calc(100% / 2);}
	.portfolio-overlay-title {font-size: 1.5rem;}
}
@media screen and (max-width:320px){
	.portfolio-item {width: 100%;}
}
@media screen and (min-width:321px) and (max-width:360px){
	.portfolio-item {width: 100%;}
}
@media screen and (min-width:361px) and (max-width:428px){
	.portfolio-item {width: 100%;}
}
/* 포트폴리오 (portfolio) */

/* 제작과정 (process) */
.process {background: #edf0f6;}
.process-inner {padding: 7.5rem 0;}
.process-title {}
.process-desc {color: var(--color-secondary);}
.process-list {display: flex; flex-wrap: wrap; margin-top: 2rem;}
.process-item {display: flex; flex-direction: column; align-items: center; }
.process-item-ico {background: #fff; width: 10rem; aspect-ratio: 1/1; display: flex; justify-content: center; align-items: center; border-radius: 50%;}
.process-item-ico-svg-wrap {width: 2.5rem; height: 2.5rem;}
.process-item-ico-svg-wrap svg {display: block; width: 100%; height: 100%; fill: #454356;}
.process-item-no {display: block; margin: 0.4rem 0 0.26rem; font-size: 1.8rem; color: var(--color-secondary); font-weight: 900; line-height: 3rem;}
.process-item-line {width: 100%; height: 0.25rem; background: #dce2ef; position: relative;}
.process-item-line::after {content: ''; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #dce2ef; position: absolute; top: 50%; left:50%; transform: translate(-50%, -50%); }
.process-item-content {margin-top: 1rem; text-align: center;}
.process-item-title {}
.process-item-desc {margin-top: 0.6rem; font-weight: 400; color: #545e6a;}
@media screen and (max-width:1280px){
	.process-inner {padding: 5rem 0.8rem 6rem;}
	.process-item {width: calc(100% / 3); margin-top: 1.6rem;}
}
@media screen and (max-width:320px){
	.portfolio-item {width: 100%;}
	.process-item {width: 100%;}
}
@media screen and (min-width:321px) and (max-width:360px){
	.portfolio-item {width: 100%;}
	.process-item {width: 100%;}
}
@media screen and (min-width:361px) and (max-width:428px){
	.portfolio-item {width: 100%;}
	.process-item {width: 100%;}
}
@media screen and (min-width:429px) and (max-width:767px){
	.process-item {width: calc(100% / 2);}
}
@media screen and (min-width:768px) and (max-width:1024px){
	.process-item {width: calc(100% / 2);}
}
@media screen and (min-width:1025px) and (max-width:1280px){
	.process-item {width: calc(100% / 3);}
}
@media screen and (min-width:1281px){
	.process-item {flex: 1;}
}
/* 제작과정 (process) */

/* 키워드 (keyword) */
.keyword {}
.keyword-inner {padding: 7.5rem 0;}
.keyword-title {font-weight: 500;}
.keyword-list {margin-top: 2rem; display: flex; flex-wrap: wrap; column-gap: 0.38rem; row-gap: 0.75rem;}
.keyword-item {background: #e6efff; border: 1px solid #e6efff; color: var(--color-button-background-hover); border-radius: 1.2rem; padding: 0.36rem 0.9rem; font-size: 1.2rem; font-weight: 500; transition:all 0.1s ease-in}
.keyword-item:hover {border:1px solid var(--color-primary); color: #fff; background-color:var(--color-button-background)}
@media screen and (max-width:1280px){
	.keyword-inner {padding: 7rem 0.8rem;}
	.keyword-title {text-align: left;}
	.keyword-item {font-size: 0.8rem;}
}
/* 키워드 (keyword) */

/* 체크포인트 (Check Point) */
.check-point {background: #2c2b2e; color: #fff;}
.check-point-inner {padding: 7.5rem 0;}
.check-point-content {}
.check-point-title {}
.check-point-title-b {font-weight: 500; border-bottom: 2px solid #fff;}
.check-point-desc {margin-top: 1.25rem;}
.check-point-list {margin-top: 2.5rem; display: flex; flex-wrap: wrap; row-gap: 0.94rem}
.check-point-item {position: relative; width: 50%; padding: 0 1.5rem; box-sizing: border-box; font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; word-break: keep-all}
.check-point-item::before {content: ''; position: absolute; top: 0.72rem; left: 0.36rem;  width: 0.36rem; height: 0.36rem; border-radius: 50%; background: #fff;}
.check-point-item-link {color: var(--color-text-link-light);}
.check-point-item-link:hover {text-decoration: underline;}
@media screen and (max-width:1280px){
	.check-point-inner {padding: 7rem 0.8rem;}
	.check-point-title {text-align: left;}
	.check-point-desc {text-align: left;}
	.check-point-item {width: 100%;}
}
/* 체크포인트 (Check Point) */