/* *******************************************************
■ 서브페이지 공통
******************************************************* */
.con{width:60rem; margin:0 auto; font-size: 0.9rem; font-weight: 500; line-height:1.6;}
.con .page_main_title {margin-top: 6.5rem !important;}
.con .page_main_title > p { margin-top: 2.25rem; font-size: 1.1rem; font-family:'Noto Sans KR','sans-serif'; font-weight:600; color:#215c98;}

@media (max-width:1200px){
	.con{width:100%; padding:0 1rem;}
}

@media (max-width:767px){
	.con{font-size: 1.1rem;}
	.con .page_main_title {padding:0 !important;}
}

/* *******************************************************
■ 제품 공통
******************************************************* */
.notice > li {display: flex; gap: 8px; font-size: 1rem; font-weight: 500; color: #000; letter-spacing: 0;}
.notice > li:not(:first-child) {margin-top:0.75rem;}
.notice > li > span {flex-shrink:0;}
.notice ul{padding-left:1rem; margin-top:0.75rem;}
.notice ul li:not(:first-child) {margin-top:0.25rem;}

@media (max-width:767px){
	.notice > li {font-size: 1.2rem;}
}

/* *******************************************************
■ 회사소개
******************************************************* */

/* 회사소개 */
.greeting {padding-bottom:6.2rem; font-size: 1rem; position:relative;}
.greeting:after {content: ""; display: block; width: 100%; height: 35.1rem; position: absolute;  top: -45%; left: 38%;  background: url('/images/default/content/ov_bg01.jpg') no-repeat center center; z-index: -3;}
.greeting h5 {margin-bottom: 1rem; font-size: 1.2rem; color:#215c98; font-weight: 700; font-family:'Noto Sans KR', 'sans-serif';}
.greeting span {color:#000;}
.greeting p {line-height:1.55;}
.greeting p:last-child {margin-top: 1.65rem;}

.ov {padding:3.95rem 0 4.6rem; position:relative; }
.ov:after {content: ""; display: block;  width: 100vw;  height: 100%;  position: absolute;  top: 0;  left: 50%; transform:translate(-50%,0);  background: url('/images/default/content/ov_bg02.jpg') no-repeat center center;  background-size: cover; z-index: -3;}
.ov .page_main_title  {margin-top:0 !important; margin-bottom: 1.8rem !important; color:#fff !important; }
.ov .page_main_title > p {color:#fff;}
.ov .info {display:flex; gap:1rem 1.3rem;}
.ov .info > li {padding:2rem 0.5rem 2.65rem; width:calc((100% - 1.3rem * 3)/4); background:#f4f7fa; border-radius:1rem; text-align:center; font-weight: 600;}
.ov .info > li:first-child .txt_box {word-break:break-all;}
.ov .info .overview_tit {margin:2.45rem 0 0.65rem; font-size: 1.2rem; font-weight: 700; color:#215c98; font-family:'Noto Sans KR', 'sans-serif';}

.pro .page_main_title {margin-bottom: 4.75rem !important; margin-top:6.8rem !important;}
.pro .page_main_title > p {margin-top: 1.8rem !important;}
.pro_list {display:flex; flex-wrap:wrap; gap:1rem 3.25rem; text-align:center;}
.pro_list > li {width:calc(( 100% - 3.25rem * 4)/5);}
.pro_list > li .img_box {width:9.7rem; border-radius:50%; overflow:hidden; border:1px solid #c1c1c1; aspect-ratio: 1;}
.pro_list > li .img_box > img {width:98%;}
.pro_list > li > p {margin-top: 1.2rem; font-weight: 600; font-size: 0.85rem;}

@media (max-width:1200px){
	.greeting .web {display:none;}
	.greeting:after {top: -35%; left:10%;}

	.pro_list > li .img_box {width:100%;}
}
@media (max-width:1030px){
	.greeting:after {background-size:contain; height:70vh;}

	.pro_list {gap:1rem 1.25rem;}
	.pro_list > li {width:calc(( 100% - 1.25rem * 4)/5);}
	
	.ov .info {flex-wrap:wrap; justify-content: center;}
	.ov .info > li {width:calc((100% - 1.3rem * 2)/3);}
}
@media (max-width:767px){
	.greeting:after {top:35%;}

	.pro_list {gap:2rem 1.25rem; justify-content: center;}
	.pro_list > li {width:calc(( 100% - 1.25rem * 2)/3);}

	.ov .info > li {width:calc((100% - 1.3rem * 1)/2);}2.2rem91

	.ov:after {background-position:90% center !important;}
}
@media (max-width:450px){
	.pro_list > li {width:calc(( 100% - 1.25rem * 1)/2);}
	.ov .info > li {width:100%; padding: 1.5rem 1rem;}
}

/* 연혁 */
.his{padding-left:6.35rem; display:flex; justify-content: space-between;}
.his > ul { position:relative;}
.his > ul:after {content:""; display:block; width:1px; height:calc( 100% - 4% ); position:absolute; top:4%; left:4.9rem; background:#555555; z-index: -1;}
.his:not(:last-child){margin-bottom:8.5rem;}

.his > ul > li {display:flex;}
.his > ul > li:not(:first-child) {padding-top:1.35rem;}
.his > ul > li:nth-child(3) {padding-top: 2.1rem;}
.his > ul > li:nth-child(4) {padding-top:2.9rem;}
.his > ul > li:last-child {padding-top: 0.9rem;}
.his ul li h6{display:inline-block; flex-shrink:0; width:3.8rem; font-size:1.5rem; font-weight:700; position:relative; color:#000;}
.his ul li h6:before{content:""; display:block; width:13px; height:13px; aspect-ratio:1; position:absolute; top:0.5em; right:-1.45rem; border-radius:50%; box-shadow: 0 0 0 2px #1d3462 inset; background:#fff;}
.his ul .now h6 {color:#225c97;}

.his .his_wrap{ position:relative;display:flex; flex-direction:column; padding-left:2.75rem;  margin-top:2.1rem;}
.his li:nth-child(2) .his_wrap {margin-top: 1.7rem;}
.his li:nth-child(4) .his_wrap {margin-top: 2.4rem;}
.his li:last-child .his_wrap {margin-top: 2.6rem;} 
.his .his_wrap li:not(:first-child) {margin-top: 0.3rem;}
.his .his_wrap li > p {display:flex;}
.his .his_wrap span {padding-right:0.55rem; font-weight:800; color:#000; }

@media (max-width:1200px){
	.his {padding-left: 0;}
}
@media (max-width:1030px){
	.his {gap:2rem;}
}
@media (max-width:767px){	
	.his {flex-direction:column;}
	.his .img_box {order:-1; width:100%; height:20rem; background:url('/images/default/content/his_img.png') no-repeat; background-size:cover; background-position:center 7%;}
	.his .img_box img {display:none;}
	
	.his > ul:after {left:0.35em;}
	.his > ul > li {flex-direction:column;}
	.his > ul > li:not(:first-child) {padding-top: 1.7rem;}
	.his > ul > li:nth-child(3),.his > ul > li:nth-child(4) {padding-top: 1.7rem;}
	.his ul li h6 {padding-left:2rem;}
	.his ul li h6:before {right:auto; left:0;}
	.his .his_wrap {padding-left:2rem; margin-top: 1rem;}
	.his li:nth-child(2) .his_wrap, 
	.his li:nth-child(4) .his_wrap,
	.his li:last-child .his_wrap {margin-top: 1rem;} 
}

/* 경영이념 */
.ideo {display:flex; gap: 1rem 1.6rem;}
.ideo > li {width:calc((100% - 1.6rem * 3)/4);}
.ideo > li img {width:100%;}

.ideo .txt_box { margin-top: 1.85rem; color:#215c98;}
.ideo .txt_box > h5 {font-size: 1.2rem; font-weight: 700;}
.ideo .txt_box > span {font-size: 0.8rem; margin-top: 0.25rem; white-space: nowrap;  display: inline-block; font-weight: 600;}
.ideo .txt_box > p {padding:0 1.2rem; font-size: 0.8rem; color:#555; margin-top: 0.55rem; line-height:1.875; font-weight: 500 ;word-break: break-all;text-align: justify;}
.ideo .txt_box > p .short {display: none;}

@media (max-width:1200px){
	.ideo > li br {display: none;}
	.ideo .txt_box {padding:0;}
	.ideo .txt_box > span  {white-space: wrap;}
}
@media (max-width:1030px){
	.ideo {flex-wrap:wrap;}
	.ideo > li {width:calc((100% - 1.6rem * 1)/2);}
	.ideo .txt_box > p {padding: 0; text-align:center; text-align: center; text-align-last: unset; text-wrap: pretty;}
}
@media (max-width:767px){
	.ideo {gap:1.6rem;}
	.ideo > li {width:100%;}
	.ideo > li br {display: block;}
	.ideo > li img {width:60%;}
	.ideo .txt_box {max-width: 28rem; margin: 1.85rem auto 0 auto;}
	.ideo .txt_box > h5 {font-size: 1.5rem;}
	.ideo .txt_box > p {font-size: 0.95rem;}
	.ideo .txt_box > span {font-size: 1rem;}
}
@media (max-width:450px){
	.ideo > li img {width:100%;}
	.ideo .txt_box > p .short {display: block;}
}
@media (max-width:350px){
	.ideo > li br {display: none;}
}


/* 로고 */
.logo_wrap .img_box {position:relative; }
.logo_wrap .img_box > img {width:100%;}
.logo_wrap .img_box .cate {padding:0 1.95rem; height:2.1rem; line-height:2.1rem; position:absolute; top:0; left:0; color:#fff; background:#989898; z-index: 2;}

.logo_wrap .img_box > div {width:100%; position:absolute; left:50%; transform:translate(-50%,-50%); font-weight: 600;}
.ci_wrap .img_box > div {top:52%;}
.ci_wrap .img_box > div img {width: 20.55rem;}
.bi_wrap {margin-top: 7.85rem;}
.bi_wrap .img_box > div {top:56.5%;}
.bi_wrap .img_box > div img {width: 16.35rem;}
.logo_wrap .img_box > div p {margin-top: 2rem;}

.color {display:flex; flex-wrap:wrap; gap:1rem 1.9rem; padding-top: 3.9rem;}
.color > li {width:calc((100% - 1.9rem * 3)/4);}
.color > li img {width:100%;}

@media (max-width:1030px){
	.ci_wrap .img_box > div {top:50%;}
	.bi_wrap .img_box > div {top:50%;}
}

@media (max-width:767px){
	.logo_wrap .img_box > div {position:static; transform: translate(0,0);}
	.logo_wrap .img_box > div p {margin-top: 1rem; font-size: 1rem; padding: 0 1rem;}
	.logo_wrap .img_box > div p br {display:none;}
	.logo_wrap .img_box > img {display:none;}
	.ci_wrap .img_box > div,  
	.bi_wrap .img_box > div {padding:2rem 1rem; width:100%; background:url('/images/default/content/grid.svg') no-repeat center center; background-size:cover;}
}

@media (max-width:450px){
	.logo_wrap .img_box > div p {padding: 0;}
	.color > li {width:calc((100% - 1.9rem * 1)/2);}
	.ci_wrap .img_box > div img {width:60%;}
	.bi_wrap .img_box > div img {width:40%;}
}

@media (max-width:350px){
	.color {justify-content: center;}
	.color > li {width:70%;}
}


/* 오시는길 */
.fac_img img {width:100%;}
.map {display:flex; gap:1rem 2.4rem; margin-top:2.95rem;}
.map_wrap {display:flex; flex-direction:column; width:calc((100% - 2.4rem * 1)/2);}
.map_wrap iframe {width:100%; height:20.95rem;}
.map_wrap .add > h5 {padding: 0.65rem 0; width:100%; text-align:center; color:#fff; font-size: 1.1rem; background:#215c98;}
.map_wrap .add > ul {height:8rem; padding: 0.9rem 1.35rem 2.2rem; background:#ededea;}

@media (max-width:767px){
	.map {flex-wrap:wrap; gap:2.4rem;}
	.map_wrap iframe {height: 15rem;}
	.map_wrap {width:100%;}	
	.map_wrap .add > h5 {font-size: 1.4rem;}
	.map_wrap .add > ul {height:auto;}
}


/* *******************************************************
■ 연구소
******************************************************* */

/* 기술현황 */
.tech {display:flex; flex-wrap:wrap; }
.tech > li {display:flex; width:100%; gap: 1rem 0.9rem; align-items: center;}
.tech > li:not(:first-child) {margin-top:2.85rem;}
.tech .img_box img {aspect-ratio:1; flex-shrink:0;}
.tech .txt_box {display: flex; align-items: center; padding:0 2.25rem; width:100%;  height:5.45rem; border-radius:0.5rem; background:#dee7f0; color:#000;}

.tech .txt_box p {display:flex; align-items: baseline; gap:1rem 0.35rem; font-weight: 300;}
.tech .txt_box span {font-size: 1rem;  flex-shrink:0; font-weight: 500;}

@media (max-width:1200px){
	.tech .txt_box {height:8rem;}
}

@media (max-width:1030px){
	.tech .txt_box {padding:0 1rem; height:10rem;}
	.tech .txt_box p {flex-direction: column;}
}

@media (max-width:767px){
	.tech .txt_box {height: auto; padding: 1rem;}
	.tech .txt_box span {font-size: 1.3rem;}
	.tech > li {flex-direction:column;}
	.tech .txt_box p  {gap: 0.35rem;}
}

@media (max-width:450px){
	.tech .txt_box p {flex-direction:column; gap: 0.5rem;}
}

/* *******************************************************
■ 커뮤니티
******************************************************* */

/* Contact us */
.contact_tit h5 {font-size: 1.2rem; color:#215c98; font-weight: 700;}
.contact_tit p {margin-top: 1rem;}

.num_info {display:flex; justify-content: center; gap:0 6.9rem; margin-top: 3.4rem; padding: 2.85rem 1rem; text-align:center; background:#eaf3f3; border-radius:1rem;}
.num_info .num_wrap h6 {font-size: 1.2rem; color:#215c98; }
.num_info .num_wrap em {display:block; font-size: 1.8rem; color:#215c98; font-weight: 600; line-height:1.15; margin-top:0.25rem;}
.num_info .num_wrap em:last-child {margin-top: 0.65rem; margin-bottom: 1rem;}
.num_info .num_wrap p {font-size: 1.1rem; text-align:left;}
.num_info .num_wrap p:last-child {margin-top:0.75rem;}
.num_info .num_wrap p > span {color:#000;}

.num_info .as em:last-child {margin-top: 1rem;}
.num_info .as > p:first-of-type {margin-top: 2.55rem;}

.process {display:flex; padding:0 2.75rem; margin-top:3.15rem; gap:0 5.6rem;}
.process > li {width:calc((100% - 5.6rem * 3)/4); text-align:center; font-size: 1.1rem; position:relative;}
.process > li:not(:last-child):after {content:""; display:block; width:2.75rem; height:1rem; position:absolute; top:35%; right:-4.5rem; transform:translate(0, -50%); background:url('/images/default/content/process_arrow.svg') no-repeat center center;}
.process > li img {width:auto; aspect-ratio:1;}
.process > li .txt_box h6 {margin-top:0.2rem; font-size:1.2rem; color:#215c98; font-weight: 600;}
.process > li .txt_box p {margin-top: 0.4rem; color:#000; font-size: 0.95rem;}


@media (max-width:1200px){
	.process > li img {width:100%;}
	.process > li:not(:last-child):after {background-size:contain;}
	.process > li:not(:last-child):after {right:-4rem;}


@media (max-width:1030px){
	.process {padding:0;}
	.num_info {gap:3rem;}
	.num_info .num_wrap p {display:flex; flex-direction:column;}
}

@media (max-width:767px){
	.contact_tit h5 {font-size: 1.3rem;}
	.num_info {flex-direction:column;}
	.num_info > div:first-child {position:relative;}
	.num_info > div:first-child:after{content:""; display:block; width:70%; height:1px; background-color:#ddd; position:absolute; bottom: -1.5rem; left:50%; transform:translate(-50%,0);} 
	.num_info .num_wrap p {text-align:center;}
	.num_info .as > p:first-of-type {margin-top: 0;}

	.process {gap: 3.6rem; flex-wrap:wrap;}
	.process > li {width:calc((100% - 3.6rem * 1)/2);}
	.process > li:not(:last-child):after {right:-2.6rem}
	.process > li:nth-child(2):after {display:none;} 
	.process > li img {width:60%;}	
}

@media (max-width:450px){
	.num_info .num_wrap p {display:flex; flex-direction: column;}
	.num_info .num_wrap em {font-size: 1.5rem;}
	.num_info > div:first-child:after {width:100%;}

	.process {gap: 5.6rem;}
	.process > li {width:100%;}
	.process > li:not(:last-child):after {right:auto; left:49.8%; top:auto; bottom:-3.2rem; transform:translate(-50%, 0) rotate(90deg);}
	.process > li:nth-child(2):after {display:block;} 
}