@charset "UTF-8";

/* 소개 - 인접한 3개의 원형 */
.intro-box{position:relative;margin:0 auto;padding:20px 0;max-width:1000px;}
.intro-box ul{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;}
.intro-box ul li{position:relative;margin:0 -5px;padding:20px;border-radius:50%;}
.intro-box ul li div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;position:relative;width:240px;height:240px;border-radius:50%;}
.intro-box ul li div > p{font-size:1.125rem;line-height:1.625rem;box-sizing:border-box;text-align:center;}
.intro-box ul li div:after{content:'';display:block;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) rotate(45deg);width:calc(100% + 2px);height:calc(100% + 2px);border-radius:50%;}
.intro-box ul li div:before{content:'+';display:block;position:absolute;top:50%;right:-22px;z-index:20;transform:translateY(-50%);font-size:1.875rem;line-height:1;color:#fff;text-shadow:2px 2px rgba(0, 0, 0, 0.3);}
.intro-box ul li:last-of-type div:before{display:none;}
.intro-box ul li:before{content:'';display:block;position:absolute;top:-11px;left:50%;transform:translatex(-50%);z-index:10;width:30px;height:30px;background:#749bde;border-radius:50%;}
.intro-box ul li:after{content:'';display:block;position:absolute;bottom:-11px;left:50%;transform:translatex(-50%);z-index:10;width:30px;height:30px;background:#749bde;border-radius:50%;}
.intro-box ul li.start:before{background:#4f93c4;}
.intro-box ul li.start:after{background:#4f93c4;}
.intro-box ul li.middle:before{background:#5489b2;}
.intro-box ul li.middle:after{background:#5489b2;}
.intro-box ul li.end:before{background:#635cb4;}
.intro-box ul li.end:after{background:#635cb4;}
.intro-box ul li.start div:after{border-left:30px solid rgba(117, 156, 223, 0.6);border-bottom:30px solid rgba(117, 156, 223, 0.6);border-right:30px solid rgba(128, 186, 210, 0.6);border-top:30px solid rgba(128, 186, 210, 0.6);}
.intro-box ul li.middle div:after{border-left:30px solid rgba(128, 186, 210, 0.6);border-bottom:30px solid rgba(128, 186, 210, 0.6);border-right:30px solid rgba(146, 131, 176, 0.6);border-top:30px solid rgba(146, 131, 176, 0.6);}
.intro-box ul li.end div:after{border-left:30px solid rgba(146, 131, 176, 0.6);border-bottom:30px solid rgba(146, 131, 176, 0.6);border-right:30px solid rgba(139, 139, 210, 0.6);border-top:30px solid rgba(139, 139, 210, 0.6);}
.intro-box ul li div > p > span{display:block;padding:0 0 10px;width:100%;font-size:1.25rem;}
.intro-box ul li.start div > p > span:first-of-type{color:#749bde;}
.intro-box ul li.middle div > p > span:first-of-type{color:#5489b2;}
.intro-box ul li.end div > p > span:first-of-type{color:#6962b5;}
.intro-box ul li div > p .main-txt{font-size:1.125rem;line-height:1.625rem;}

@media screen and (max-width: 1024.98px) {
	/* 소개 - 인접한 3개의 원형 */
	.intro-box{text-align:center;}
	.intro-box ul{display:inline-block;flex-wrap:unset;justify-content:unset;align-items:unset;}
	.intro-box ul li{margin:-14px 0;}
	.intro-box ul li:before{top:-5px;width:25px;height:25px;}
	.intro-box ul li:after{bottom:-5px;width:25px;height:25px;}
	.intro-box ul li.start:after{display:none;}
	.intro-box ul li.middle:before{display:none;}
	.intro-box ul li.middle:after{display:none;}
	.intro-box ul li.end:before{display:none;}
	.intro-box ul li div{width:200px;height:200px;}
	.intro-box ul li div:before{top:100%;left:50%;right:auto;transform:translateX(-50%);}
	.intro-box ul li.start div:after{border-width:25px;}
	.intro-box ul li.middle div:after{border-width:25px;}
	.intro-box ul li.end div:after{border-width:25px;}
	.intro-box ul li div > p .main-txt{font-size:1.285rem;line-height:1.857rem;}
}
@media screen and (max-width: 768px) {
	/* 소개 - 인접한 3개의 원형 */
	.intro-box ul li div:before{top:101%}
}