@charset "utf-8";

.nav_top .dep03_box .loca02-list::-webkit-scrollbar { width: 20px; }
.nav_top .dep03_box .loca02-list::-webkit-scrollbar-track { background: transparent; }
.nav_top .dep03_box .loca02-list::-webkit-scrollbar-thumb { background: var(--black-color08); border-top: 8px solid var(--point-white);}

.appli_list {display: grid; grid-template-columns:var(--grid-array03); gap: clamp(15px, 3vw, 32px);}
.appli_list li {box-shadow: 0 0 clamp(10px, 4vw, 40px) 0 rgba(0, 0, 0, 0.10);}
.appli_list li .thumb{width:100%;aspect-ratio: auto 1.505;overflow: hidden;position: relative;}
.appli_list li .thumb img{width:100%; height: 100%; object-fit:cover;transition:all 0.4s;}
.appli_list li .thumb img.ov {position: absolute;top:50%;left:50%;translate:-50% -50%;opacity:0;pointer-events: none;}
.appli_list li .txt{width:100%;display: flex;align-items: center;justify-content: space-between;box-sizing:border-box;padding:var(--row-gap35) var(--row-gap40);position: relative;}
.appli_list li .txt p{font-size:var(--text-28);font-weight:600;color:var(--black-color01);transition:all 0.4s;letter-spacing:0;}
.appli_list li .txt:before{width:calc(100% - var(--row-gap40) * 2);height:1px;content:"";position: absolute;top:0;left:50%;translate:-50% 0;background:var(--border-color01);}
.appli_list li .txt:after{width:10px;aspect-ratio: auto 1;content:"";border:2px solid var(--black-color08);border-width:2px 2px 0 0;rotate:45deg;translate:0 -50%;position: absolute;top:50%;right:40px;}

	/* over */
	@media (min-width:1023px){
		@media (hover:hover) and (pointer:fine) {
			.appli_list li:hover {background:var(--point-color01);}
			.appli_list li:hover .thumb img:not(.ov) {opacity:0;pointer-events: none;}
			.appli_list li:hover .thumb img.ov{opacity:1;transform: scale(1.05);pointer-events: all;}
			.appli_list li:hover .txt p{color:var(--point-white);}
			.appli_list li:hover .txt:before{background: rgba(255, 255, 255, 0.4);}
			.appli_list li:hover .txt:after{border-color:var(--point-white);}
		}
	}
	
	@media (max-width:1200px){
		.appli_list {grid-template-columns: var(--grid-array02);}
	}
	@media (max-width:640px){
		.appli_list {grid-template-columns: var(--grid-array01);}
	}
		

.sub_solution {}
.sub_solution .page_title h4 + p {margin-top: var(--row-gap20); font-size: var(--text-22); color: var(--black-color05); font-family: var(--font-type02);}
.sub_solution .cont_box {width: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); padding: var(--row-gap50); font-family: var(--font-type02);}

.sub_solution .about_emc .cont_box {display: flex; justify-content: center;}
.sub_solution .about_emc .emc_chart {width: 100%; max-width: 1200px; text-align: center;}
.sub_solution .about_emc .emc_chart h5 {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 50%; max-width: 480px; background: var(--point-color01); box-sizing: border-box; padding: var(--col-gap25) ; font-size: var(--text-24); color: var(--point-white); font-weight: 500;}
.sub_solution .about_emc .emc_list {position: relative; display: flex; gap: var(--row-gap50); padding-top: var(--row-gap60);}
.sub_solution .about_emc .emc_list dl {position: relative; width: 100%;}
.sub_solution .about_emc .emc_list :where(dt,dd) {position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: var(--row-gap15);}
.sub_solution .about_emc .emc_list dt {margin-bottom: var(--row-gap20); gap: 6px; width: 100%; height: 105px; background: var(--point-color04); font-size: var(--text-22); color: var(--point-white);}
.sub_solution .about_emc .emc_list dt span {display: inline-flex; align-items: flex-start; gap: var(--row-gap10); width: max-content; font-size: var(--text-18); opacity: 0.8; font-weight: 300;}
.sub_solution .about_emc .emc_list dt span:before {width: clamp(8px, 1.3vw, 12px); height: clamp(6px, 1vw, 9px); content: ""; background: url(../images/skin/chk_point_w.svg) no-repeat center / auto 100%; display: inline-block; flex-shrink: 0; translate: 0 8px;}
.sub_solution .about_emc .emc_list dd {background: var(--point-white); border: 1px solid var(--border-color01); font-size: var(--text-20); color: var(--black-color05); line-height: 1.4;}
.sub_solution .about_emc .emc_list dd + dd {border-top: 0;}
	.sub_solution .about_emc .emc_list:before {content: ""; position: absolute; left: 50%; top: calc(var(--row-gap60) / 2); translate: -50% 0; width: calc(50% + var(--row-gap50) / 2); height: 1px; background: var(--border-color01);}
	.sub_solution .about_emc .emc_chart h5:before {content: ""; position: absolute; left: 50%; bottom: calc(var(--row-gap60) / -2); translate: -50% 0; width: 1px; height: calc(var(--row-gap60) / 2); background: var(--border-color01);}
	.sub_solution .about_emc .emc_list dl:before {content: ""; position: absolute; left: 50%; top: calc(var(--row-gap60) / -2); translate: -50% 0; width: 1px; height: 100%; background: var(--border-color01);}
	.sub_solution .about_emc .emc_list dt:before {content: ""; position: absolute; left: 50%; top: -5px; translate: -50% 0; width: 9px; height: 9px; background: var(--point-white); box-sizing: border-box; border: 2px solid var(--point-color04);}

.sub_solution .about_emc .chart_desc {margin-top: var(--row-gap60); display: flex; flex-direction: column; gap: var(--row-gap20); width: 100%; box-sizing: border-box; padding: var(--row-gap30); background: var(--gray-bg01);}
.sub_solution .about_emc .chart_desc dl {display: flex; align-items: center; gap: var(--row-gap20); font-size: var(--text-22); color: var(--black-color05);}
.sub_solution .about_emc .chart_desc :where(dt,dd) {line-height: 1.4;}
.sub_solution .about_emc .chart_desc dt {display: inline-flex; justify-content: center; align-items: center; width: clamp(60px, 8vw, 80px); padding: 7px 0; background: var(--point-color04); color: var(--point-white);}
.sub_solution .about_emc .chart_desc dd {width: calc(100% - clamp(40px, 8vw, 80px) - var(--row-gap20));}
.sub_solution .about_emc .chart_desc .tit dt {background: var(--point-color01);}

.sub_solution .emi_service .m_ver  {display: none;}

.sub_solution .emi_spec .cont_box {padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--row-gap40);}
.sub_solution .emi_spec .spec_cont {display: grid; gap: var(--row-gap20);}
.sub_solution .emi_spec .type_list {grid-template-columns:var(--grid-array03);}
.sub_solution .emi_spec .type_list dl {width: 100%; box-sizing: border-box; border: 1px solid var(--border-color01); border-top: 0;}
.sub_solution .emi_spec .type_list :where(dt,dd) {width: 100%; box-sizing: border-box; }
.sub_solution .emi_spec .type_list dt {width: calc(100% + 2px); translate: -1px 0; display: flex; justify-content: center; align-items: center; padding: calc(var(--col-gap35) / 2) 10px; font-size: var(--text-24); color: var(--point-white); font-weight: 500; font-family: var(--font-type01); background: var(--point-color01); text-align: center;}
.sub_solution .emi_spec .type_list dd {padding: var(--row-gap30);}
.sub_solution .emi_spec .img_list {grid-template-columns:var(--grid-array04);}

@media (max-width:1340px) {
	.sub_solution .about_emc .cont_box {flex-direction: column;}
	.sub_solution .about_emc .emc_chart, .sub_solution .about_emc .chart_desc {width: 100%;}
	.sub_solution .about_emc .chart_desc {margin-bottom: 0;}
	.sub_solution .about_emc .chart_desc dd br {display: none;}
}
@media (max-width:1023px) {
	.sub_solution .emi_spec .type_list {grid-template-columns: var(--grid-array01);}
	.sub_solution .emi_spec .img_list {grid-template-columns: var(--grid-array02);}
}
@media (max-width:640px) {
	.sub_solution .about_emc .emc_list {flex-direction: column;}
	.sub_solution .about_emc .emc_chart h5 {width: 100%; max-width: inherit;}
	.sub_solution .about_emc .emc_chart h5:before {display: none;}
	.sub_solution .about_emc .emc_list:before {display: none;}
	.sub_solution .about_emc .emc_list dl:before {top: -20%; z-index: -1;}
	.sub_solution .about_emc .emc_list dt {height: auto; padding: var(--row-gap40);}
	
	/* .sub_solution .about_emc .chart_desc dt {width: 54px; height: 36px;}
	.sub_solution .about_emc .chart_desc dd {width: calc(100% - 54px);} */
	
	.sub_solution .emi_service .pc_ver {display: none;}
	.sub_solution .emi_service .m_ver {display: block;}
}
@media (max-width:360px) {
	.sub_solution .about_emc .emc_list dt span {width: auto; align-items: center; flex-direction: column;}
	.sub_solution .about_emc .emc_list dt span:before {translate: none;}
}