.border-box {position: relative;}
.border-box .con-p {font-size: 22px;font-weight: 600;}
.border-box .tit {position: absolute;padding: 15px 50px;;border-radius: 30px;top: -30px;left: 50%;transform: translatex(-50%);background: orange;font-size: 22px;font-weight: 500;line-height: 1.2;color: #000000;}


.list-item .item {display: flex;gap: 30px;padding: 0 0 30px;}
.list-item .item:last-child {padding:0;}
.list-item .item .left {width: 10%;border-radius: 12px;overflow: hidden;}
.list-item .item .right {flex: 1;}
.list-item .item > div > p {font-size: 18px;color: #fff;text-align: center;padding: 20px;box-sizing: border-box;display: flex;align-items: center;justify-content: center;height: 100%;}
.list-item .item > div.bg01 {background: #C55A11;}
.list-item .item > div.bg03 {background: #808080;}

.list-item .item .right > ul > li {font-size: 18px;font-weight: 500;line-height: 130%;border-radius: 12px;padding: 20px;text-align: center;margin: 0 0 15px;}
.list-item .item .right > ul > li:last-child {margin: 0;}
.list-item .item .right > ul > li .kr {font-size: 22px;line-height: 130%;font-weight: 600;}
.list-item .item .right > ul > li.bg02 {background: #843C0B;color: #fff;}
.list-item .item .right > ul > li.bg04 {background: #D9D9D9;color: #003378;}

.wrap-bg {background: url(/_res/nsu/dxtechmgmtscience/img/content/bg-wrap-vision.png)no-repeat center;background-size: 100% 100%;background-position-y: 60px;position: relative;z-index: 10;padding: 0 30px 50px;}
.wrap-bg:before {content: "";position: absolute;left: 0;width: 100%;height: calc(100% - 60px);background: #333F50;opacity: 0.5;z-index: -1;top: 60px;}
.wrap-bg .bg-box {margin: 0 auto 100px;}
.wrap-bg .bg-box .con-p {color: #003378;font-weight: 500;}
.wrap-bg .bg-box .con-p .kr {font-size: 22px;line-height: 130%;font-weight: 600;}
.vision-item {display: flex;gap: 20px 30px;flex-wrap: wrap;}
.vision-item .item{flex: 1;background: rgba(157, 195, 230, 0.5);border: 1px solid #518dde;padding: 15px;box-sizing: border-box;}
.vision-item .item .top {border-bottom: 1px solid #fff;padding: 0 20px 10px;min-height: 201px;box-sizing: border-box;}
.vision-item .item .top .tit {font-size: 25px;font-weight: 600;line-height: 130%;color: #fff;margin: 0 0 30px;}
.vision-item .item .top ul li {color: #fff;}
.vision-item .item .top .ul-type-dot > li:before {background-color: #fff;}
.vision-item .item .bot {margin: 20px;overflow: hidden;border-radius: 5px;}
.vision-item .item .bot img {width: 100%;height: 100%;object-fit: cover;transition: transform .5s ease;}
.vision-item .item:hover .bot img {transform: scale(1.1);}


@media (max-width: 1024px){
	.border-box .con-p {font-size: 18px;}
	.border-box .tit {font-size: 18px;padding: 10px 30px;top: -20px;}
	.vision-item .item {flex: 0 0 calc(50% - 15px);}
	.wrap-bg .bg-box {margin: 0 auto 50px;}
}

@media (max-width: 768px){
	.border-box .tit {font-size: 14px;padding: 5px 30px;top: -15px;}
	.border-box {padding: 15px 20px;}
	.border-box .con-p {font-size: 16px;}
	
	.list-item .item {flex-direction: column;gap: 15px;}
	.list-item .item .left {width: 100%;}
	.list-item .item > div > p {padding: 15px;}
	.list-item .item .right > ul > li .kr {font-size: 20px;}
	.list-item .item .right > ul > li {font-size: 16px;}
	
	.vision-item .item .top {min-height: unset;}
	.wrap-bg {padding: 0 20px 30px;}
	.vision-item .item {flex: 0 0 100%;}
	.vision-item .item .bot {margin: 20px 0 0;}
	.vision-item .item .top .tit {font-size: 20px;margin: 0 0 15px;}
}