.box-contents {border: 1px solid #e0e0e0;border-radius: 20px;padding: 40px;display: flex;gap: 45px;align-items: center;}
.box-contents .img-box {width: 80px;}
.box-contents .txt-box {width: calc(100% - 120px);}
.box-contents .tit {font-size: 22px;line-height: 32px;letter-spacing: -0.25px;font-weight: 800;color: #0072bb;margin: 0 0 16px;}

.list-stu {border: 1px solid #e5e5e5;border-radius: 12px;padding: 50px;margin: 0 0 30px;}
.list-stu:last-child{margin: 0;}
.list-stu .title {font-size: 24px;line-height: 54px;color: #003e65;font-weight: 700;padding: 0 0 20px;}
.list-stu > ul {display: flex;flex-wrap: wrap;gap: 20px;}
.list-stu > ul > li {min-width: 201px;max-width: 100%;box-sizing: border-box;background: #eff3f6;border-radius: 5px;padding: 15px 15px 15px 25px;display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.list-stu > ul > li .name {flex: none;font-size: 16px;line-height: 24px;color: #111111;font-weight: bold;}
.list-stu > ul > li .btn-sns {border-radius: 50px;font-size: 14px;line-height: 24px;font-weight: 600;color: #0072bb;padding: 8px 15px;position: relative;background: #FFFFFF;display: flex;gap: 4px;align-items: center;max-width: 100px;width: 100%;}
.list-stu > ul > li .btn-sns:after {background: url(../img/common/ico-sns.png) no-repeat;background-size: cover;width: 11px;height: 11px;content: "";display: block;}
.list-stu > ul > li .btn-sns.disable{color: #999999;pointer-events: none;}
.list-stu > ul > li .btn-sns.disable:after {background: url(../img/common/ico-sns-disable.png) no-repeat;background-size: cover;}


@media screen and (max-width: 1200px){
	.list-stu > ul > li {min-width: calc(25% - 15px);}
}

@media screen and (max-width: 1100px){
	.list-stu > ul {grid-template-columns: repeat(4, 1fr)}
}

@media screen and (max-width: 1024px){
	.list-stu > ul > li {min-width: calc(33.33% - 14px);}
	.list-stu {padding: 25px;}
}

@media screen and (max-width: 768px) {	
	.box-contents {padding: 20px;flex-direction: column;gap: 20px;}
	.box-contents .img-box {margin: 0 auto;}
	.box-contents .txt-box {width: 100%;}

	.list-stu > ul {grid-template-columns: repeat(2, 1fr)}
	.list-stu > ul > li {padding: 10px 10px 10px 15px;}
	.list-stu > ul > li .name {font-size: 14px;line-height: 21px;width: calc(100% - 110px);}
	.list-stu .title {font-size: 20px;line-height: 30px;padding: 0 0 15px;}
	.list-stu > ul > li {min-width: calc(50% - 10px);}

}

@media screen and (max-width: 500px){
	.list-stu > ul > li {min-width: calc(100%);}
}