.bg-strategy {padding: 60px;border: 1px solid #0000001A;border-radius: 30px;}
.strategy-container { display: flex; flex-direction: column; gap: 20px;margin: 0 auto 40px;}
.strategy-card { display: flex;gap: 30px;}
.strategy-card .card-left { flex: 0 0 150px;display: flex; align-items: center; gap: 20px; padding: 30px 24px;box-sizing: border-box;background: #FFFFFF;border-radius: 16px;border: 1px solid #0000001A;justify-content: center;}
.strategy-card .card-left .card-title {font-weight: 700;font-size: 20px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #262626;}
.strategy-card .card-right { flex: 1;background: #F4F8FC; padding: 30px 40px; display: flex; align-items: center; box-sizing: border-box;border: 1px solid #003B901A;border-radius: 16px;justify-content: center;}
.strategy-card .card-right > p {font-weight: 700;font-size: 20px;line-height: 140%;letter-spacing: 0;text-align: center;vertical-align: middle;color: #003B90;text-align: center;}
.strategy-card:last-child .card-right {border: 1px solid #009BB41A;background: #009BB414;}
.strategy-card:last-child .card-right > p {color: #009BB4;}


.strategy-diagram-wrap {background: #F7F7F7;border: 1px solid #0000001A;padding: 50px 40px;border-radius: 16px;}
.strategy-diagram-wrap .diagram-header {padding: 20px;font-weight: 700;font-size: 24px;line-height: 140%;letter-spacing: 0;vertical-align: middle;color: #fff;background: #003B90;border-radius: 16px;text-align: center;margin: 0 0 30px;}
.strategy-diagram-wrap .diagram-body { display: flex;  align-items: stretch; justify-content: space-between; gap: 15px; width: 100%; }

.strategy-diagram-wrap .arrow-tit {background: #003B901A;border: 1px solid #003B901A;border-radius: 16px;padding: 16px 10px;box-sizing: border-box;}
.strategy-diagram-wrap .arrow-tit > p{font-weight: 700;font-size: 18px;line-height: 140%;letter-spacing: 0;text-align: center;vertical-align: middle;color: #003B90;}
.strategy-diagram-wrap .side-boxes-column {display: flex; flex-direction: column;justify-content: space-between;gap: 10px;max-width: 240px;width: 100%;}
.strategy-diagram-wrap .arrow-box-wrap { display: flex; align-items: center; gap: 10px; width: 100%;position: relative;}
.strategy-diagram-wrap .arrow-box-wrap:after {content: "";background: url(../img/content/ico-arrow01.png)no-repeat center center;width: 56px;height: 30px;background-size: contain;flex-shrink: 0;position: absolute;top: 50%;right: -30px;transform: translateY(-50%);}
.strategy-diagram-wrap .arrow-box-wrap:last-child:after {background: url(../img/content/ico-arrow02.png)no-repeat center center;background-size: cover;}
.strategy-diagram-wrap .arrow-box-wrap.reverse {justify-content: flex-end; }
.strategy-diagram-wrap .arrow-box-wrap.reverse:after {content: "";background: url(../img/content/ico-arrow02.png)no-repeat center center;width: 56px;height: 30px;background-size: contain;flex-shrink: 0;position: absolute;top: 50%;left: -30px;transform: translateY(-50%) rotate(180deg)}
.strategy-diagram-wrap .arrow-box-wrap.reverse:last-child:after {background: url(../img/content/ico-arrow01.png)no-repeat center center;background-size: cover;}
.strategy-diagram-wrap .content-box { flex: 1; background: #ffffff; border: 1px solid rgba(0, 59, 144, 0.08); border-radius: 16px; padding: 20px 24px; box-sizing: border-box;min-height: 135px;display: flex;align-items: center;}
.strategy-diagram-wrap .bullet-list { margin: 0; padding: 0; list-style: none;width: 100%;}
.strategy-diagram-wrap .bullet-list li { position: relative; padding: 0 0 5px 14px;font-weight: 400;font-size: 16px;line-height: 140%;letter-spacing: 0;vertical-align: middle;text-align: left;color: #545454;}
.strategy-diagram-wrap .bullet-list li:last-child {padding-bottom: 0;}
.strategy-diagram-wrap .bullet-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background-color: #545454; }


.strategy-diagram-wrap .center-image-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px; box-sizing: border-box; }
.strategy-diagram-wrap .center-image-wrap img { width: 100%; max-width: 320px; height: auto; object-fit: contain; }

.box-tit {display: flex;justify-content: space-between;padding: 0 0 30px;flex-wrap: wrap;gap: 20px;}

@media (max-width: 1400px) {
	.strategy-diagram-wrap .strategy-diagram-wrap { padding: 20px 15px; }
	.strategy-diagram-wrap .diagram-header { font-size: 18px; padding: 12px 20px; }
	.strategy-diagram-wrap .diagram-body { flex-direction: column;}
	.strategy-diagram-wrap .side-boxes-column {flex-direction: row;width: 100%;flex-wrap: wrap;max-width: unset;order: 3;}
	.strategy-diagram-wrap .arrow-tit {width: 100%;}
	.strategy-diagram-wrap .arrow-tit + .arrow-box-wrap {order: 2;}
	.strategy-diagram-wrap .arrow-box-wrap { gap: 15px;flex-direction: column;width: calc(50% - 15px);}
	.strategy-diagram-wrap .side-boxes-column:not(.reverse) .arrow-tit {order: 3;}

	.strategy-diagram-wrap .content-box {width: 100%;}
	.strategy-diagram-wrap .arrow-icon { display: none; }
	.strategy-diagram-wrap .center-image-wrap { flex: auto; width: 100%;order:2;}

	.strategy-diagram-wrap .side-boxes-column.reverse {order: 1;}


	.strategy-diagram-wrap .arrow-box-wrap:after {top: auto;top: -20px;left: 50%;right: auto;transform: translatex(-50%) rotate(270deg);}
	.strategy-diagram-wrap .arrow-box-wrap.reverse:after {top: auto;bottom: -20px;left: 50%;right: auto;transform: translatex(-50%) rotate(90deg);}
}

@media (max-width: 768px) {
	.box-tit {padding: 0 0 20px;gap: 10px;}
	
	.bg-strategy {padding: 20px;}
	.strategy-diagram-wrap {padding: 20px;}
	.strategy-card { flex-direction: column;gap: 15px;}
	.strategy-card .card-left { flex: auto; width: 100%;padding: 20px;}
	.strategy-card .card-right > p {font-size: 16px;}
	.strategy-card .card-right { padding: 24px 20px; }
	

	.strategy-diagram-wrap .content-box {min-height: auto;}
	.strategy-diagram-wrap .center-image-wrap img {max-width: unset;}
	.strategy-diagram-wrap .diagram-body {gap: 40px;}
	
	.strategy-diagram-wrap .arrow-box-wrap:after {width: 40px;height: 20px;}
	.strategy-diagram-wrap .arrow-box-wrap.reverse:after {width: 40px;height: 20px;}
	.strategy-diagram-wrap .side-boxes-column {flex-direction: column;gap: 30px;}
	.strategy-diagram-wrap .arrow-box-wrap {width: 100%;}
}