/****** 공통 ******/
legend {position:absolute; left:-9999px;}
.scroll-y::-webkit-scrollbar {height:3px; width:10px;}
.scroll-y::-webkit-scrollbar-thumb {background-color:#999; border-radius:5px;}
.scroll-y::-webkit-scrollbar-track {background-color:#ccc; border-radius:5px;}

.about .tit_text h1, .about .tit_text h2 {font-size:clamp(30px, 4vw, 70px); color:var(--base4); font-weight:700;}
.about .tit_text h1+p, .about .tit_text h2+p {color:#fff; font-weight:500; font-size:clamp(20px, 4vw, 30px);}

.about .subpart {position:relative; z-index:22; min-height:100vh; padding:20vh; display:flex; justify-content:center; align-items:center; text-align:center;}
.about .subpart h2 {color:var(--base4);}


/** 홈페이지 제작 ~ 연결합니다. **/
.about .subpart.first .tit_text {position:relative; padding-top:10vh;}
.about .subpart.first .tit_text:before {content:""; display:block; width:50px; height:2px; background:#fff; position:absolute; top:0; left:50%; transform:translateX(-50%);}
.about .small_txt {color:#fff; line-height:1.8;}
.about .small_txt p {opacity:0.7;}
.about .small_txt b {font-weight:700; font-size:clamp(18px,1.5vw,24px); opacity:1; color:#fff;}
.about .subpart.first .small_txt {margin-top:30px; opacity:.5; font-weight:200;}
.about .subpart.first .scroll_down {position:absolute; bottom:50px; left:50%; transform:translateX(-50%); overflow:hidden; height:160px; width:35px;}
.about .subpart.first .scroll_down div {z-index:2; position:absolute; display:block; width:21px; height:160px; animation:ani_slideDown 2s infinite; background:url(/images/about/scorll_down2.png) no-repeat center;}

@keyframes ani_slideDown {
	from{transform:translateY(-35px); opacity:0;}
	50%{transform:translateY(0); opacity:1;}
	to{transform:translateY(35px); opacity:0;}
}


/** 기업 핵심 가치 **/
.about .subpart.value {width:100%; background:url(/images/about/bg_about_intro2.webp) no-repeat center; background-size:cover;}
.about .subpart.value .cover {background:rgba(0,0,0,0.5) no-repeat center; width:100%; height:100%; position:absolute; top:0; left:0;}
.about .subpart.value .inner {position:relative; z-index:3;}
.about .subpart.value .small_txt {margin-top:3vh;}
.about .squareWrap {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:10vh; text-align:left;}
.about .squareWrap li {background:#fff; border-radius:clamp(10px, 1.2vw, 20px); box-sizing:border-box; padding:clamp(30px, 3vw, 50px);}
.about .squareWrap li span.num {font-size:clamp(32px, 4vw, 64px); color:var(--base3); font-weight:700; line-height:1;}
.about .squareWrap li p {margin-top:clamp(10px,1.5vw,50px); color:#000; line-height:1.4; font-size:clamp(18px, 1.5vw, 20px); font-weight:500;}


/** 숫자로 보는 이비아이 **/
.about .subpart.numbers {background:transparent;}
.about .num_grid {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:10vh; text-align:left;}
.about .num_grid li {background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:clamp(10px,1.2vw,20px); padding:clamp(30px,3vw,50px); box-sizing:border-box;}
.about .num_grid li strong {font-size:clamp(40px,5vw,80px); font-weight:700; color:var(--base4); line-height:1;}
.about .num_grid li strong em {font-size:0.5em; font-style:normal; color:var(--base1);}
.about .num_grid li span {display:block; margin-top:10px; font-size:clamp(14px,1vw,18px); color:#fff; font-weight:500;}
.about .num_grid li p {margin-top:15px; color:rgba(255,255,255,0.7); line-height:1.6; font-size:clamp(14px,1vw,16px);}


/** 회사 연혁 **/
.about .subpart.history {background:#f5f5f5; padding-top:20vh; padding-bottom:20vh;}
.about .subpart.history .tit_text h2 {color:#111;}
.about .subpart.history .tit_text h2+p {color:#666; font-size:clamp(16px,1.2vw,22px);}
.about .history_list {width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:10vh;}
.about .history_list::before {display:none;}
.about .history_list li {background:#fff; border-radius:clamp(10px,1.2vw,20px); padding:clamp(30px,3vw,50px); box-sizing:border-box; display:flex; flex-direction:column; box-shadow:0 4px 30px rgba(0,0,0,0.06); border-top:4px solid var(--base4); transition:transform 0.3s;}
.about .history_list li:hover {transform:translateY(-6px);}
.about .history_list .year {font-size:clamp(28px,3vw,52px); font-weight:700; color:var(--base2); line-height:1; min-width:auto;}
.about .history_list .cont {padding-left:0; margin-top:20px; flex:1;}
.about .history_list .cont strong {font-size:clamp(15px,1.1vw,18px); color:#111; font-weight:700; line-height:1.4; display:block;}
.about .history_list .cont p {margin-top:10px; color:#888; line-height:1.7; font-size:clamp(14px,0.85vw,16px);}


/** 이비아이 주요 서비스 **/
.about .subpart.services {background:#fff; padding-top:15vh; padding-bottom:15vh;}
.about .subpart.services .tit_text h2 {color:#111;}
.about .subpart.services .tit_text h2+p {color:#888; font-size:clamp(15px,1.1vw,20px);}
.about .service_grid {display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8vh;}
.about .service_grid li {list-style:none;}
.about .service_grid li a {display:flex; align-items:center; justify-content:center; text-align:center; padding:clamp(20px,2.5vw,40px) clamp(15px,1.5vw,24px); border-radius:clamp(10px,1vw,16px); border:1px solid #e8e8e8; color:#222; font-size:clamp(14px,1vw,17px); font-weight:600; line-height:1.4; text-decoration:none; transition:all 0.25s; background:#fff; position:relative; overflow:hidden;}
.about .service_grid li a::before {content:""; position:absolute; bottom:0; left:0; width:100%; height:3px; background:var(--base1); transform:scaleX(0); transition:transform 0.25s; transform-origin:left;}
.about .service_grid li a:hover {border-color:var(--base1); color:var(--base1); transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.about .service_grid li a:hover::before {transform:scaleX(1);}


/** 전국 대응 체계 **/
.about .subpart.locations {height:auto; padding-bottom:20vh;}
.about .locations .map_wrap {display:grid; grid-template-columns:1fr 1fr; gap:70px; margin-top:30px;}
.about .locations .map_wrap .root_daum_roughmap .wrap_controllers,
.about .locations .map_wrap .root_daum_roughmap .cont .section.lst {display:none;}
.about .locations .small_txt {margin-top:35px;}
.about .locations .small_txt p {margin-top:10px;}
.about .locations .map_bx {background:#fff; border-radius:clamp(10px, 1.2vw, 20px); overflow:hidden;}
.about .locations .map_bx .root_daum_roughmap {width:100%;}
.about .locations .map_bx .root_daum_roughmap .wrap_map {height:500px;}
.about .locations .map_bx .address_txt {padding:clamp(30px,4vw,70px); text-align:left;}
.about .locations .map_bx .address_txt dt {font-size:clamp(18px,1.5vw,30px); font-weight:600; color:#000;}
.about .locations .map_bx .address_txt dd {margin-top:15px; color:#000;}
.about .locations .map_bx .address_txt p {color:var(--base2); margin-top:15px;}


/* ======================== 태블릿 (~1249) ======================== */
@media screen and (max-width:1249px) {

	/****** 공통 ******/
	.about .subpart {height:auto; padding:15vh 0;}

	/** 홈페이지 제작 ~ 연결합니다. **/
	.about .subpart.first .tit_text {padding-top:5vh;}
	.about .subpart.first .small_txt {margin-top:10vh;}

	/** 기업 핵심 가치 **/
	.about .squareWrap {margin-top:8vh;}

	/** 숫자로 보는 이비아이 **/
	.about .num_grid {grid-template-columns:repeat(2,1fr); margin-top:6vh;}

	/** 회사 연혁 **/
	.about .history_list {grid-template-columns:repeat(2,1fr); margin-top:6vh;}

	/** 이비아이 주요 서비스 **/
	.about .service_grid {grid-template-columns:repeat(3,1fr); margin-top:6vh;}

	/** 전국 대응 체계 **/
	.about .subpart.locations {padding-bottom:15vh;}
	.about .locations .map_wrap {gap:40px;}
	.about .locations .map_bx .root_daum_roughmap .wrap_map {height:300px;}
}


/* ======================== 태블릿 (~991) ======================== */
@media screen and (max-width:991px) {

	/****** 공통 ******/
	.about .subpart {padding:13vh 0;}

	/** 홈페이지 제작 ~ 연결합니다. **/
	.about .subpart.first .small_txt {margin-top:5vh;}

	/** 기업 핵심 가치 **/
	.about .squareWrap {grid-template-columns:repeat(2,1fr);}

	/** 이비아이 주요 서비스 **/
	.about .service_grid {grid-template-columns:repeat(2,1fr);}

	/** 전국 대응 체계 **/
	.about .subpart.locations {padding-bottom:13vh;}
	.about .locations .small_txt {margin-top:25px;}
	.about .locations .map_wrap {grid-template-columns:1fr;}
}


/* ======================== 모바일 (~767) ======================== */
@media screen and (max-width:767px) {

	/****** 공통 ******/
	.about .subpart {padding:12vh 0;}

	/** 기업 핵심 가치 **/
	.about .squareWrap {grid-template-columns:repeat(1,1fr); gap:10px; margin-top:40px;}

	/** 숫자로 보는 이비아이 **/
	.about .num_grid {grid-template-columns:repeat(1,1fr); gap:10px; margin-top:40px;}

	/** 회사 연혁 **/
	.about .history_list {grid-template-columns:repeat(1,1fr); gap:14px; margin-top:40px;}
	.about .history_list li {flex-direction:row; align-items:flex-start; gap:20px; border-top:none; border-left:4px solid var(--base4);}
	.about .history_list .year {min-width:50px; font-size:clamp(22px,5vw,28px);}
	.about .history_list .cont {margin-top:0;}

	/** 이비아이 주요 서비스 **/
	.about .service_grid {grid-template-columns:repeat(2,1fr); gap:10px; margin-top:40px;}
	.about .service_grid li a {padding:20px 12px; font-size:13px;}

	/** 전국 대응 체계 **/
	.about .subpart.locations {padding-bottom:12vh;}
	.about .locations .map_wrap {gap:30px;}
	.about .locations .map_bx .address_txt {padding:30px;}
}