@charset "utf-8";
ul {list-style:none; margin:0; padding:0;}

.introWrap {display:grid; grid-template-columns: auto auto; gap:100px; padding-bottom:100px !important;}
.introWrap .introTitle h3 {color:var(--base1); font-weight:600; font-size:var(--fs45); margin-bottom:20px;}
.introWrap .introTitle .introSubtitle {color: #000;}
.introWrap .introTitle .introSubtitle b {font-size:var--(fs24);}
.introWrap .introTitle .introSubtitle b span {color:var(--base2);}
.introWrap .introTitle .introDescription {margin-top:40px; font-size:var(--fs32); font-weight: 600; color:#000; line-height:1.3;}
.introWrap .introTitle .introDescription span {color:var(--base1);}
.introWrap .introTitle .introDescription p {margin-top:25px; font-size:var(--fs18); font-weight: 400; line-height: 1.6;}
.introWrap .introTitle .introImages {display:grid; grid-template-columns:auto auto; gap:30px; justify-content: start; margin-top:60px;}
.introWrap .introTitle .introImages .img {width:19vw;}
.introWrap .introBg {width:39vw; }
.introWrap .introBg img {border-radius:0 0 80px 0;}

.introWrap .introTitle .introDescription {padding-right:8.5vw;}


.introFeatures {display:grid; grid-template-columns: auto auto auto; gap:50px; padding-top:150px;}
.introFeatures h4 {position:relative; padding:25px 0 60px 40px; border-radius:20px 20px 0 0; color:var(--base1); font-size:var(--fs22); background:#F9F9F9; font-weight:700; z-index:-1; transition:.5s;}
.introFeatures h4:before {content:""; position:absolute; width:5px; height:5px; border-radius:100px; background:var(--base1); left:25px; top:25px;}

.introFeatures .featuresWrap {background:#fff; margin-top:-40px; padding:40px 30px; border-radius:20px; border:1px solid #F4F4F4; transition:.5s;}
.introFeatures div img {height:250px; overflow:hidden; border-radius:10px;}
.introFeatures .featuresWrap p {margin-top:20px; color:#000; line-height:1.4;}

.introFeatures li:hover h4 {background:var(--base1); color:#fff;}
.introFeatures li:hover h4:before {background:#fff;}
.introFeatures li:hover .featuresWrap {box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.05);}



/* ************************ 태블릿 이하(~1199) ************************ */
@media (max-width: 1199px) {
	
	.introWrap {grid-template-columns: auto; gap: 50px;}
	.introWrap .introBg {display:none;}
	.introWrap .introTitle .introImages {margin-top: 30px; width: 70%;}
	.introWrap .introTitle .introImages .img {width:100%;}
	.introWrap .introTitle .introDescription {padding-right:0;}
	
	.introFeatures {grid-template-columns: auto auto;}
	
}



/* ************************ 모바일 ************************ */
@media (max-width: 767px) {

	.introWrap .introTitle .introImages {width:100%;}
	.introFeatures {grid-template-columns: auto; padding-top:60px;}
	.introWrap .introTitle .introImages {grid-template-columns: auto; gap:10px;}
	
	.introWrap {padding-bottom:50px !important;}
}