@charset "utf-8";

body {background: #fff;}
main {color: #222;}

/*섹션_1(인트로)*/
.intro-inner {padding: 10rem 0; text-align: center;}
.intro-title {line-height: 132%; margin-top: 1.89rem;}
.comment{margin: 1em 0; color: var(--color-secondary);}

@media screen and (max-width:320px){
	.intro-title {font-size: 1.8rem;}
}
@media screen and (min-width:321px) and (max-width:360px){
	.intro-title {font-size: 1.8rem;}
}
@media screen and (min-width:361px) and (max-width:428px){
	.intro-title {font-size: 1.8rem;}
}

@media screen and (max-width:1280px){
	.intro-inner {padding: 4rem 3vw;}
	.comment{font-size: 1rem}
}

@media screen and (min-width:1281px){
	.comment{font-size: 1.25rem;}
}
/*섹션_1(인트로)*/

/*섹션_2(설명)*/
.char-explanation {background: var(--color-background-4); color: #fff}
.char-explanation-inner {display: flex; justify-content: space-between; align-items: center;}
.char-explanation-content {padding: 7.5rem 0;}
.char-explanation-title-st {font-weight: 500;}
.char-explanation-desc {display: flex; flex-direction: column; gap: 1.25rem; margin-top: 3.88rem;}
.char-explanation-desc-p {font-weight: 300;}
.char-explanation-img-wrap {width: 31.25rem; aspect-ratio: 500 / 550; margin-right: 1rem;}
.char-explanation-img {display: block; width: 100%; height: 100%;}

@media screen and (max-width:1280px){
	.char-explanation-inner {flex-direction: column;}
	.char-explanation-content {padding: 4rem 3vw 2rem;}
	.char-explanation-img-wrap {margin: 0; align-self: center; width: 100%;}
}
/*섹션_2(설명)*/

/*섹션_3(안내)*/
.char-info-inner {padding: 7.5rem 0;}
.char-info-content{display: flex; flex-wrap: wrap; gap: 2rem;}
.char-info-wrap {border: 1px solid #222; border-radius: 35px; padding: 2rem 2.5rem; position: relative; box-sizing: border-box;}
.char-info-wrap:before{content: ""; position: absolute; top: -3px; left: -3px; width: 40px; height: 40px; border-top: 5px solid var(--color-background-4); border-left: 5px solid var(--color-background-4); border-top-left-radius: 35px;}
.char-info-title-wrap {display: flex; align-items: center; justify-content: space-between;}
.char-info-icon > i {display: block; width: 3rem; height: 3rem;}
.char-info-desc-wrap > p {line-height: 180%;}
.char-info-desc-wrap > p:nth-of-type(1) {margin-top: 1rem;}
.char-info-desc-wrap > p:nth-of-type(2) {margin-top: 2.5rem;}

@media screen and (max-width:766px){
	.char-info-wrap{width: calc((100% - (2rem * 0)) / 1);}
	.char-info-desc-wrap > span {font-size: 1rem;}
}

@media screen and (min-width:767px) and (max-width:1280px){
	.char-info-wrap{width: calc((100% - (2rem * 1)) / 2);}
	.char-info-desc-wrap > p {white-space: pre-line;}
	.char-info-desc-wrap > span {font-size: 14px;}
}

@media screen and (min-width:1281px){
	.char-info-desc-wrap > p {white-space: pre-line;}
	.char-info-desc-wrap > span {font-size: 14px;}
	.char-info-wrap {width: calc((100% - (2rem * 1)) / 2);}
}
/*섹션_3(안내)*/

/*섹션_4(캐릭터종류)*/
.char-type-wrap {border: 1px solid black; border-radius: 40px; padding: 2rem 2.5rem; display: flex; justify-content: space-between; align-items: center;}
.char-type-wrap:nth-of-type(1), .char-type-wrap:nth-of-type(2) {margin-bottom: 2rem}
.char-type-content{margin-top: 4rem}
.char-type-txt {display: flex; flex-direction: column; justify-content: space-between; height: 150px;}
.char-type-txt > span {color: var(--color-text-1); font-weight: 500}
.char-type-img > img {width: 120px; height: 150px}

@media screen and (max-width:766px){
	.char-type-wrap{flex-direction: column; align-items: flex-start;}
}

@media screen and (min-width:767px) and (max-width:1280px){
	.char-type-wrap {align-items: center;}
	.char-type-desc {white-space: pre-line;}
}

@media screen and (max-width:1280px){
	.char-type-txt p {white-space: pre-line;}
}

@media screen and (min-width:1281px){
	.char-type-wrap {align-items: center;}
	.char-type-title {white-space: pre-line;}
	.char-type-desc {white-space: pre-line;}
	.char-type-txt p {white-space: pre-line;}
}
/*섹션_4(캐릭터종류)*/

/*섹션_5(포트폴리오)*/
.portfolio-type-wrap {margin-top: 4.375rem}
.portfolio-type {border-radius: 15px; background-color: var(--color-background-4); padding: 1rem; width: 180px; margin: 0 auto; text-align: center; font-size: 1.5625rem;}
.portfolio-img-wrap {display: flex;}
.portfolio-img-standard {flex-wrap: wrap; gap: 2rem; margin-top: 3.125rem;}
.portfolio-img-box {background-color: var(--color-background-5); padding: 1rem; border-radius: 15px; box-sizing: border-box}
.portfolio-img-box img {width: 100%; aspect-ratio: 1 / 1}    

@media screen and (max-width:766px){
	.portfolio-img-box{width: calc((100% - (2rem * 0)) / 1);}
}

@media screen and (min-width:767px) and (max-width:1280px){
	.portfolio-img-box{width: calc((100% - (2rem * 1)) / 2);}
}

@media screen and (max-width:1280px){
	.portfolio-img-premium {flex-direction: column;}
}

@media screen and (min-width:1281px){
	.portfolio-img-box {width: calc((100% - (2rem * 3)) / 4);}
	.portfolio-img-premium > img {width: 50%}
}
/*섹션_5(포트폴리오)*/

/*섹션_6(프로세스)*/
.process-item-desc-1 {display: block; margin-top: 0.9rem}
/*섹션_6(프로세스)*/