/* about.css */

.techon_about {width:100%;color:#0d2139;background:#fff;font-family:'NanumSquareNeoVariable',sans-serif;overflow:hidden;box-sizing:border-box;}
.techon_about * {box-sizing:border-box;}
.techon_about_inner {width:1300px;max-width:calc(100% - 40px);margin:0 auto;}

/* 메인 비주얼 */
.techon_about_hero {
	position:relative;width:100%; height:460px; background:#eef5fb;overflow:hidden;
	background:url('/page/hybrid/202509/img/about_main.jpg') center center/100% auto no-repeat;
}
.techon_about_hero_bg {position:absolute;inset:0;width:100%;height:100%;}
.techon_about_hero_inner {position:relative;z-index:2;display:flex;align-items:center;width:1300px;max-width:calc(100% - 40px);height:100%;margin:0 auto;}
.techon_about_hero_content {width:52%;}
.techon_about_hero_eng {margin-bottom:18px;color:#365875;font-size:12px;font-weight:700;letter-spacing:4px;}
.techon_about_hero_title {margin:0 0 22px;font-size:52px;font-family:'NanumSquareNeo800' !important;line-height:1.25;letter-spacing:-2px;color:#081f3a;}
.techon_about_blue {color:#0878e8;}
.techon_about_hero_text {font-size:17px;line-height:1.8;color:#344d66;}
.techon_about_buttons {display:flex;gap:12px;margin-top:32px;}
.techon_about_btn {display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;border-radius:5px;text-decoration:none;font-size:14px;font-weight:700;}
.techon_about_btn_blue {background:#0878e8;color:#fff;}
.techon_about_btn_white {border:1px solid #aebccc;background:#fff; color:#555;}


/* 기술온 소개 */
.techon_about_intro {padding:40px 0;}
.techon_about_intro_grid {display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;}
.techon_about_intro_image {height:470px;display:flex;align-items:center;justify-content:center;color:#6c7c8c;font-size:14px;}
.techon_about_intro_image img { height:470px; }
.techon_about_section_eng {margin-bottom:13px;color:#0878e8;font-size:12px;font-family:'NanumSquareNeo800' !important;letter-spacing:3px;}
.techon_about_section_title {margin:0;font-size:38px;font-family:'NanumSquareNeo800' !important;line-height:1.35;letter-spacing:-1.5px;color:#0b223e;}
.techon_about_intro_text {margin-top:25px;color:#425a72;font-size:15px;line-height:1.9;}
.techon_about_intro_point {margin-top:30px;}
.techon_about_intro_point_item {display:flex;align-items:flex-start;gap:16px;padding:14px 0;}
.techon_about_intro_icon {flex:0 0 48px;width:48px;height:48px;border-radius:9px;background:#e9f3ff;display:flex;align-items:center;justify-content:center;color:#0878e8;font-size:20px;font-family:'NanumSquareNeo800' !important;}
.techon_about_intro_point_item strong {display:block;margin-bottom:5px;font-size:15px;color:#0c233e;}
.techon_about_intro_point_item span {font-size:13px;color:#53687d;line-height:1.6;}


/* 주요 서비스 */
.techon_about_service {padding:40px 0;background:#f7f9fc;}
.techon_about_center {text-align:center;}
.techon_about_center_text {margin-top:12px;color:#53687d;font-size:14px;}
.techon_about_service_list {display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:45px;}
.techon_about_service_card {background:#fff;border:1px solid #e3e8ee;border-radius:7px;overflow:hidden;box-shadow:0 6px 20px rgba(20,47,77,.04);}
.techon_about_service_image { background:#e7ecf1;display:flex;align-items:center;justify-content:center;color:#718090;font-size:12px;}
.techon_about_service_image img { width:100%; }
.techon_about_service_body {padding:23px 20px 25px;}
.techon_about_service_num {margin-bottom:14px;color:#0878e8;font-size:12px;font-family:'NanumSquareNeo800' !important;}
.techon_about_service_body h3 {margin:0 0 10px;font-size:17px;font-family:'NanumSquareNeo800' !important;color:#0c233e;}
.techon_about_service_body p {min-height:63px;margin:0;color:#53687d;font-size:12px;line-height:1.75;}
.techon_about_service_link {display:inline-block;color:#0878e8;font-size:12px;font-weight:700;text-decoration:none;}


/* 매칭 */
.techon_about_matching {position:relative;width:100%;height:480px;background:#102b48;color:#fff;overflow:hidden;}
.techon_about_matching_bg {position:absolute;inset:0;width:100%;height:100%;background:url('/page/hybrid/202509/img/about_matching.jpg') center center/100% auto no-repeat;}
.techon_about_matching:after {content:"";position:absolute;inset:0;background:rgba(5,24,45,.48);}
.techon_about_matching_inner {position:relative;z-index:2;width:1300px;max-width:calc(100% - 40px);height:100%;margin:0 auto;padding:55px 0 70px;}
.techon_about_matching .techon_about_section_eng {color:#a7c9ed;}
.techon_about_matching .techon_about_section_title {color:#fff;}
.techon_about_matching .techon_about_center_text {color:#d6e0ea;}
.techon_about_matching_process {display:flex;align-items:center;justify-content:center;margin-top:45px;}
.techon_about_matching_circle {display:flex;flex-direction:column;align-items:center;justify-content:center;width:205px;height:205px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(46,79,115,.55);text-align:center;}
.techon_about_matching_circle strong {font-size:22px;}
.techon_about_matching_circle span {margin-top:11px;font-size:14px;line-height:1.5;color:#fff;}
.techon_about_matching_center {width:220px;height:220px;background:#fff;color:#162e49;box-shadow:0 0 35px rgba(30,145,255,.65);}
.techon_about_matching_center .techon_about_matching_logo, .techon_about_matching_logo1, .techon_about_matching_logo2 {margin-bottom:8px;color:#0878e8;font-size:45px;font-weight:900;}
.techon_about_matching_logo img { width:60px; }
.techon_about_matching_logo1 img { width:40px; }
.techon_about_matching_logo2 img { width:60px; }
.techon_about_matching_center span {color:#455b71;}
.techon_about_matching_arrow {width:80px;text-align:center;font-size:36px;color:#fff;}


/* 플랫폼 */
.techon_about_platform {padding:50px 0 50px;}
.techon_about_platform_head {display:flex;align-items:flex-end;justify-content:space-between;}
.techon_about_platform_link {color:#0878e8;font-size:12px;font-weight:700;text-decoration:none;}
.techon_about_platform_list {display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;}
.techon_about_platform_card {border:1px solid #e2e7ed;border-radius:7px;background:#fff;overflow:hidden;box-shadow:0 5px 18px rgba(24,47,72,.05);}
.techon_about_platform_body {padding:23px; }
.techon_about_platform_icon {display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-bottom:16px;border-radius:7px;background:#e9f3ff;color:#0878e8;font-size:19px;font-family:'NanumSquareNeo800' !important;}
.techon_about_platform_body h3 {margin:0 0 11px;font-size:17px;color:#0c233e;}
.techon_about_platform_body p {margin:0;color:#53687d;font-size:12px;line-height:1.75;}
.techon_about_platform_image {background:#edf1f4;display:flex;align-items:center;justify-content:center;color:#718090;font-size:12px;}
.techon_about_platform_image img {width:100%;display:block;}


/* 모바일 */
@media(max-width:1299px){
	
    .techon_about { margin-top:85px; }
	.techon_about_inner {width:100%;max-width:none;padding-left:20px;padding-right:20px;}

	/* 메인 비주얼 */
	.techon_about_hero {
		height:520px; background:url('/page/hybrid/202509/img/about_main.jpg'); 
		background-size:auto 520px; background-repeat: no-repeat; background-position:right 5% bottom; 
	}
	.techon_about_hero_bg {background-size:auto 100%;background-position:center center;}
	.techon_about_hero_inner {width:100%;max-width:none;padding-left:20px;padding-right:20px;}
	.techon_about_hero_content {width:60%;}
	.techon_about_hero_eng {font-size:12px;letter-spacing:2px;color:#fff;text-shadow:1px 1px 3px #000;}
	.techon_about_hero_title {font-size:34px;letter-spacing:-1.5px; color:#fff;text-shadow:1px 1px 3px #000;}
	.techon_about_hero_text {font-size:14px;line-height:1.7; color:#fff;text-shadow:1px 1px 3px #000;}
	.techon_about_buttons {gap:8px;flex-wrap:wrap;}
	.techon_about_btn {width:100%;white-space:nowrap;font-size:13px;padding:0 18px; height:42px}


	/* 기술온 소개 */
	.techon_about_intro {padding:30px 0;}
	.techon_about_intro_grid {grid-template-columns:1fr;gap:35px;}
	.techon_about_intro_image {width:100%;height:auto;}
	.techon_about_intro_image img {width:100%;height:auto;display:block;}
	.techon_about_section_title {font-size:27px;letter-spacing:-1px;}
	.techon_about_intro_text {margin-top:18px;font-size:13px;}
	.techon_about_intro_point {margin-top:20px;}


	/* 주요 서비스 */
	.techon_about_service {padding:30px 0;}
	.techon_about_service_list {grid-template-columns:1fr 1fr;gap:10px;margin-top:30px;}
	.techon_about_service_image {}
	.techon_about_service_body {padding:17px 15px 19px;}
	.techon_about_service_body h3 {font-size:14px;}
	.techon_about_service_body p {min-height:auto;font-size:12px;}
	.techon_about_service_num {margin-bottom:9px;}
	.techon_about_service_link {margin-top:11px;}

	/* 매칭 */
	.techon_about_matching {aspect-ratio:auto;min-height:880px;}
	.techon_about_matching_bg {background-size:auto 100%;background-position:center center;}
	.techon_about_matching_inner {width:100%;max-width:none;height:auto;padding:35px 20px;}
	.techon_about_matching_process {flex-direction:column;margin-top:35px;}
	.techon_about_matching_circle {width:190px;height:190px; }
	.techon_about_matching_circle > * {position:relative;top:-10px;}
	.techon_about_matching_circle strong {  font-size:18px; }
	.techon_about_matching_circle span { margin-top:5px; font-size:13px; }
	.techon_about_matching_center {width:180px;height:180px;}
	.techon_about_matching_arrow {width:auto;height:45px;line-height:45px;transform:rotate(90deg);font-size:27px;}
	.techon_about_matching_logo img { width:50px; }
	.techon_about_matching_logo1 img { width:35px; }
	.techon_about_matching_logo2 img { width:50px; }

	/* 플랫폼 */
	.techon_about_platform {padding:30px 0;}
	.techon_about_platform_head {display:block;}
	.techon_about_platform_link {display:inline-block;margin-top:15px;}
	.techon_about_platform_list {grid-template-columns:1fr 1fr;gap:10px;margin-top:28px;}
	.techon_about_platform_body {padding:17px 17px 12px 17px;}
	.techon_about_platform_body h3 {font-size:14px;}
}