@charset "utf-8";

.contents .about .aboutWrap {position:relative;}
.contents .about .aboutWrap .intro {display:grid; grid-template-columns:440px auto; padding:100px 80px;}
.contents .about .aboutWrap .intro li:first-child {background:#fdfdfd; padding:80px;}
.contents .about .aboutWrap .intro li:last-child {padding:100px;}
.contents .about .aboutWrap .intro div img {height:420px; box-shadow: rgba(0, 0, 0, 0.2) 40px 40px 25px -20px;}
.contents .about .aboutWrap .intro h3 {position:relative; font-weight:300; padding:20px; padding-top:0; display:flex; justify-content: space-between; font-size:20px; align-items: center;}
.contents .about .aboutWrap .intro h4 {padding-bottom:40px; font-size:24px;}
.contents .about .aboutWrap .intro h3:before {position:absolute; content:""; width:80px; height:1px; background:#bbb; right:110px; bottom:29px;}
.contents .about .aboutWrap .intro h3 span {font-size:13px; opacity:.3;}
.contents .about .aboutWrap .intro p {font-weight:300; font-size:17px;}


.contents .about .review {padding:100px 80px; border:1px solid #000; border-right:0; border-left:0; padding:80px;}
.contents .about .review+.review {border-top:0;}
.contents .about .review span {display:inline-block; margin-bottom:50px; font-size:18px;}
.contents .about .review p {font-weight:300; color:#8f8f8f; text-align: justify; transition:.3s;}
.contents .about .review p+p {margin-top:20px;}
.contents .about .review p:hover {color:#000;}
.contents .about .review li:last-child {color:#8f8f8f; text-align:right; font-size:15px; padding-top:70px;}


.contents .about .aboutWrap .history {display:grid; grid-template-columns:250px auto auto; align-items: start; height:100%; overflow: visible; padding:100px 80px;}
.contents .about .aboutWrap .history h4 {font-size:24px;}
.contents .about .aboutWrap .history .sticky {position: sticky; top: 80px; z-index: 5;  display: block;}
.contents .about .aboutWrap .history p {position:relative; font-weight:300; padding-left:23px; color:#313131; transition:.3s}
.contents .about .aboutWrap .history p:hover {color: var(--base3);}
.contents .about .aboutWrap .history p:before {position:absolute; content:""; width:8px; height:2px; background:#9f9f9f; top:11px; left:0px;}
.contents .about .aboutWrap .history img {max-width:250px;}
.contents .about .aboutWrap .history .imgWrap {margin-top:80px;}
.contents .about .aboutWrap .history .imgWrap div:nth-child(2) {text-align:right; margin:40px 0;}


/* ******* 태블릿 이하(~1249) ******** */
@media screen and (max-width: 1249px) {
	
	.contents .about .aboutWrap .intro {justify-items: start; grid-template-columns: auto;}
	.contents .about .aboutWrap .intro li:last-child {padding:80px 0 0 0;}
	.contents .about .aboutWrap .history .sticky {position:static; }
	.contents .about .aboutWrap .history {grid-template-columns:auto; gap:30px;}
}





/* ******** 모바일 (0~767) ******* */
@media screen and (max-width: 767px) {
	
	
	.contents .about .aboutWrap .intro {padding:50px 20px; padding-top:0;}
	.contents .about .aboutWrap .intro div img {width:100%; height:auto;}
	.contents .about .aboutWrap .intro li:first-child {padding:30px;}
	.contents .about .aboutWrap .intro li:last-child {padding-top:50px;}
	.contents .about .aboutWrap .intro h3:before {content:none;}
	.contents .about .aboutWrap .intro h4 {padding-bottom:20px;}
	
	.contents .about .review span {margin-bottom:20px;}
	.contents .about .review li:last-child {padding-top:40px;}
	.contents .about .review {padding:50px 20px;}
	

	.contents .about .aboutWrap .history {padding:50px 20px;}
	.contents .about .aboutWrap .history .imgWrap {margin-top:0px;}
	
}