@charset "utf-8";
body {background: #fff;}
main {color: #222;}

/* 공통 */
.sect {}
.sect-inner {max-width: 1600px; margin: 0 auto;}
.sect-content {}
.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;}
/* 공통 */

.intro {}
.intro-inner {padding: 10rem 0;}
.intro-pre {}
.intro-title {line-height: 132%; margin-top: 1.89rem;}
.intro-title-st {font-weight: 500;}
.intro-feature {display: flex; flex-wrap: wrap; column-gap: 1.88rem; row-gap: 3.76rem; margin-top: 5rem;}
.intro-feature-content {width: calc(100% / 2 - 1.88rem / 2); position:relative; padding: 1.88rem 2.5rem; box-sizing: border-box; border-radius: 1.25rem; background: var(--color-background-secondary); flex: 1 1 auto;}
.intro-feature-no {position: absolute; top: 0.625rem; left: 0.625rem; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; font-size: 1.25rem; background: var(--color-secondary); color: #fff; font-weight: 700; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.intro-feature-title {font-size: 1.38rem;}
.intro-feature-desc {font-size: 1.1rem; margin-top: 0.75rem; color: var(--color-tertiary);}

.binder-explanation {background: #261AAE; color: #fff;}
.binder-explanation-inner {display: flex; justify-content: space-between;}
.binder-explanation-content {padding: 7.5rem 0;}
.binder-explanation-title {}
.binder-explanation-title-st {font-weight: 500;}
.binder-explanation-title-line {display: inline-block; border-top: 1px solid #fff; height: 0px; width: 6.88rem; margin: 1.2rem 1rem 0.8rem;}
.binder-explanation-desc {display: flex; flex-direction: column; gap: 1.25rem; margin-top: 3.88rem;}
.binder-explanation-desc-p {font-weight: 300;}
.binder-explanation-img-wrap {align-self: flex-end; width: 47.88rem; aspect-ratio: 766 / 465; margin-right: 1rem;}
.binder-explanation-img {display: block; width: 100%; height: 100%; object-fit: cover;}

.binder-spec {padding-top: 10.88rem;}
.binder-spec-inner {background: #F6F6F6; padding: 7.5rem 0;}
.binder-spec-size {}
.binder-spec-size-title {font-weight: 500; text-align: center;}
.binder-spec-size-desc {font-size: 1.38rem; text-align: center; margin-top: 1.31rem;}
.binder-spec-size-img-wrap {width: 95%; aspect-radio: 1533 / 642; margin: 1.813rem auto 0;}
.binder-spec-size-img {display: block; width: 100%; height: 100%; object-fit: cover;}
.binder-spec-notice {margin-top: 4.875rem;}
.binder-spec-notice-title {font-weight: 500; text-align: center;}
.binder-spec-notice-cards {margin-top: 5.38rem; display: flex; justify-content: space-around;}
.binder-spec-notice-card {width: 35%;}
.binder-spec-notice-card-img-wrap {width: 100%; aspect-ratio: 558 / 351;}
.binder-spec-notice-card-img {display: block; width: 100%; height: 100%; object-fit: cover;}
.binder-spec-notice-card-title {margin-top: 2.81rem; font-size: 2rem; font-weight: 500; text-align: center;}
.binder-spec-notice-card-desc {font-size: 1.25rem; text-align: center; margin-top: 1.75rem; }

.feature {background-image: url('https://www.picosoft.kr/image/prd0/bg0.jpg'); color: #fff; position: relative;}
.feature::before {content: ''; position: absolute; inset: 0; background: rgb(3 0 18 / 71%);}
.feature-inner {padding: 6.6rem 0; max-width: 1200px; position: relative; z-index: 1;}
.feature-content {}
.feature-title {text-align: center;}
.feature-list {display: flex; flex-direction: column; gap: 1.5rem; margin-top: 3rem; }
.feature-item {background: rgba(255,255,255,.1); border-radius: 10rem; padding: 1.5rem 3.65rem 1.5rem 7.5rem; display:flex; gap: 1rem; position: relative;}
.feature-item-ico-wrap {width: 2.19rem; aspect-ratio: 1/1; position: absolute; top: 50%; left: 3.65rem; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center;}
.feature-item-ico-wrap svg {width: 100%; height: 100%; object-fit: cover; fill: #fff;}
.feature-item-content {display:flex; flex-direction: column; gap: 0.3rem;}
.feature-item-title {font-size: 1.5rem;}
.feature-item-desc {font-size: 1.25rem; color: rgba(255,255,255,.71); line-height: 120%;}


.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;}

.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;}

.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;}

.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 {width: 50%; position: relative; padding: 0 1.5rem; box-sizing: border-box; font-size: 1.2rem; line-height: 1.8rem; font-weight: 400;}
.check-point-item::before {content: ''; position: absolute; top: 50%; 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){
	.sect-pre {text-align: center;}
	.sect-title {font-size: 2rem; text-align: center;}
	.sect-desc {text-align: center;}

	.intro-inner {padding: 4rem 0.8rem 5rem;}

	.binder-explanation-inner {flex-direction: column;}
	.binder-explanation-content {padding: 4rem 0.8rem 2rem;}
	.binder-explanation-img-wrap {margin: 0; align-self: center; width: 100%;}
	
	.binder-spec {padding-top: 0;} 
	.binder-spec-inner {padding: 5rem 0.8rem 6rem;}
	.binder-spec-size-desc {font-size: 1.25rem;}

	.binder-spec-notice {margin-top: 5rem;}
	.binder-spec-notice-cards {margin-top: 4rem;}
	.binder-spec-notice-card {width: 46%;}
	.binder-spec-notice-card-title {font-size: 1.5rem; margin-top: 2rem;}	
	.binder-spec-notice-card-desc {font-size: 1.1rem; margin-top: 1.25rem;}	

	.feature-inner {padding: 6rem 0.8rem;}
	.feature-item-title {font-size: 1.25rem;}
	.feature-item-desc {font-size: 1rem;}

	.portfolio {padding: 5rem 0.8rem 6rem;}
	.portfolio-item {width: calc(100% / 2);}
	.portfolio-overlay-title {font-size: 1.5rem;}

	.process-inner {padding: 5rem 0.8rem 6rem;}
	.process-item {width: calc(100% / 3); margin-top: 1.6rem;}

	.keyword-inner {padding: 7rem 0.8rem;}
	.keyword-title {text-align: left;}
	.keyword-item {font-size: 0.8rem;}


	.check-point-inner {padding: 7rem 0.8rem;}
	.check-point-title {text-align: left;}
	.check-point-desc {text-align: left;}
	.check-point-item {width: 100%;}
}

@media screen and (max-width:320px){
	.intro-title {font-size: 1.8rem;}
	.binder-spec-notice-cards{flex-direction: column; gap: 5rem;}
	.binder-spec-notice-card{width: 100%;}
	.portfolio-item {width: 100%;}
	.process-item {width: 100%;}
}
@media screen and (min-width:321px) and (max-width:360px){
	.intro-title {font-size: 1.8rem;}
	.binder-spec-notice-cards{flex-direction: column; gap: 5rem;}
	.binder-spec-notice-card{width: 100%;}
	.portfolio-item {width: 100%;}
	.process-item {width: 100%;}
}
@media screen and (min-width:361px) and (max-width:428px){
	.intro-title {font-size: 1.8rem;}
	.binder-spec-notice-cards{flex-direction: column; gap: 5rem;}
	.binder-spec-notice-card{width: 100%;}
	.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;}
}
@media screen and (min-width:1281px) and (max-width:1399px){
}
@media screen and (min-width:1400px) and (max-width:1599px){
}
@media screen and (min-width:1600px) and (max-width:1679px){
}
@media screen and (min-width:1680px) and (max-width:1919px){
}
@media screen and (min-width:1920px){
}