@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 430 / var(--inner) * 100vw ), 430px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 430 / var(--inner) * 100vw ), 430px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"충남 천안시 서북구 성환읍 잠실길 7-48"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:13px; margin-top:var(--padding-12); line-height:1.1; font-size: var(--font-size-14); color: var(--color-body);}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:6px; width:4px; height: 4px; background:#ccc; border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

/*  css 파일 추가 처리(선택사항)  */
.fr-box .swiper-wrapper {display:block;}

.blocker {z-index: 100;}
.modal {max-width:980px; width: 100%;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}

.greet-flx {display: flex; flex-wrap: wrap; gap:var(--padding-80);}
.greet-flx .imgbx {width:clamp(300px, calc( 620 / var(--inner) * 100vw ), 620px);}
.greet-flx .imgbx img {border-radius: clamp(99px, calc( 160 / var(--inner) * 100vw ), 160px) 0 clamp(99px, calc( 160 / var(--inner) * 100vw ), 160px) 0; }
.greet-flx .textbx {flex: 1; letter-spacing: -0.5px; padding-top: var(--padding-50);}
.greet-flx .titbx {display: flex;flex-direction: column;gap: var(--padding-20);}
.greet-flx .titbx .txt1 {font-size:var(--font-size-24);line-height:1.41;}
.greet-flx .titbx .txt2 {font-size: var(--font-size-28); font-weight: bold; color: var(--color-primary); line-height: 1.1;}
.greet-flx .decbx {margin-top: var(--padding-50); display: flex;flex-direction: column;gap: var(--paddig-25);}
.greet-flx .decbx .dec {font-size: var(--font-size-18); line-height: 1.5; color: var(--color-body);}
.greet-flx .signbx {margin-top: var(--padding-25); display: flex;align-items: center;gap:var(--padding-30);}
.greet-flx .signbx .name {font-size: var(--font-size-18); font-weight: 600;}
.greet-flx .signbx .sign {font-size: var(--font-size-40); font-family: var(--font-nanum);}

.topbg { padding: var(--padding-120) var(--container-space);border-radius: 16px; overflow: hidden;}
.topbg .text  {color: #fff; font-size: var(--font-size-22); line-height: 1.5; text-align: center;}

.sub1_2_1 {margin-bottom: var(--padding-100);  background: url(../images/sub/sub2_2-bg.jpg ) no-repeat center center / cover; }
.sub1_2_2 {display:grid; grid-template-columns: repeat(3, 1fr); gap:clamp(20px, calc(40 / var(--inner) * 100vw), 40px); align-items:stretch;}
.sub1_2_2__item {border:1px solid #ddd; border-radius:16px; padding:clamp(30px, calc(50 / var(--inner) * 100vw), 50px) clamp(20px, calc(30 / var(--inner) * 100vw), 30px); box-sizing:border-box; background:var(--color-white);}
.sub1_2_2__inner {display:flex; flex-direction:column; align-items:center; gap:var(--padding-30); width:100%;}
.sub1_2_2__icon {flex-shrink:0; width:clamp(35px, calc(64 / var(--inner) * 100vw), 64px); height:clamp(35px, calc(64 / var(--inner) * 100vw), 64px); overflow:hidden;}
.sub1_2_2__icon img {display:block; width:100%; height:100%; object-fit:contain;}
.sub1_2_2__body {display:flex; flex-direction:column; align-items:stretch; gap:var(--padding-20); width:100%; text-align:center;}
.sub1_2_2__titwrap {display:flex; flex-direction:column; align-items:center; gap:var(--padding-10); width:100%;}
.sub1_2_2__cate {margin:0; font-size:var(--font-size-16); font-weight:400; line-height:1.2; letter-spacing:-0.03em; color:var(--color-primary);}
.sub1_2_2__tit {margin:0; font-size:var(--font-size-24); font-weight:600; line-height:1.2; letter-spacing:-0.03em; color:#121212;}
.sub1_2_2__desc {margin:0; font-size:var(--font-size-18); font-weight:400; line-height:1.56; letter-spacing:-0.03em; color:var(--color-body);}

.sub1_3_1 {margin-bottom: var(--padding-150);  background: url(../images/sub/sub1_3-bg.jpg ) no-repeat center center / cover; }
.history {padding:0 var(--padding-80);}
.history .item {display:flex;}
.history .item h3 {display: flex;flex-direction: column;gap: var(--padding-20); margin-bottom:40px; padding-right: 20px; font-size: var(--font-size-64); font-weight: 700; letter-spacing: -.03em; line-height: 1.4em; color: var(--color-primary); text-align:left; width:clamp(250px, calc(380 / var(--inner) * 100vw), 380px); line-height:1em; margin:-8px 0 0;}
.history .item h3 .dec {font-size: var(--font-size-16); color: var(--color-body); line-height: 1.62; }
.history .list {flex:1 1 auto; min-width:0; width:1%; padding-bottom: var(--padding-80) ; position:relative;}
.history .list:after {position:absolute; content:""; left:0; top:0; width:1px; height:100%; background:#ddd; z-index:-1;}
.history .list li {position: relative; padding-left: 30px; margin-bottom:var(--padding-80); display:flex; line-height:1.4em; color: var(--color-body); }
.history .list li:before {position:absolute; content:""; background:#fff; margin-left:-8px; top:2px; left:0; width:16px; height:16px; border-radius:100%; border:5px solid var(--color-primary);}
.history .list li:last-child {margin-bottom:0;}
.history .list strong {line-height:1em; min-width:clamp(55px, calc( 100 / var(--inner) * 100vw ), 100px); font-size:var(--font-size-24); color:#121212; font-weight:600;}
.history .item:last-child .list {padding-bottom:0;} 
.history .list li .contbx {display: flex;flex-direction: column;gap: var(--padding-20);}
.history .list li .contbx .cont {padding-left: 15px; position: relative;}
.history .list li .contbx .cont:before {position:absolute; content:""; background:#fff;  top:8px; left:0; width:5px; height:5px; border-radius:100%; background: #878787;}

@media (max-width: 640px) {
	.history .item {border:0; display:block;}
	.history .item h3 {margin-bottom:25px; width: 100%;}
	.history .list {padding-bottom:50px; width:100%; }
	.history .list li {flex-direction: column; }
	.history .list:after {display:none;}
	.history .list li:before {width:14px; height:14px; top:2px; margin-left:0; border-width: 4px;}
    .history .list strong {margin-bottom: 15px; width: 100%;}
}

.map-direction {display: flex;flex-wrap: wrap; gap: var(--padding-50 ); position: relative; margin-top:clamp(-90px, calc( -90 / var(--inner) * 100vw ), -40px) ; z-index: 10;}
.map-direction .logobx {width: clamp(200px, calc( 400 / var(--inner) * 100vw ), 400px);  }
.map-direction .logo {padding: var(--padding-80) var(--padding-40); background: #fff; border-radius: 8px; box-shadow: 0 4px 16px 0 rgba(46, 67, 105, 0.25); text-align: center;}
.map-direction .logo img {height: 100%; object-fit: scale-down;}
.map-direction .directions {flex: 1; padding-top: var(--padding-140);}
.directions .address-info .addr {color:#121212; font-size:var(--font-size-24); font-weight:600; line-height:1.33em; letter-spacing:-.03em; margin-bottom:var(--padding-30);}
.directions .contact-info {border-top:1px solid #ddd; line-height:1.5em;}
.directions .contact-info dl {display:flex; padding:var(--padding-24) 0; border-bottom:1px solid #ddd;}
.directions .contact-info dt {width:clamp(120px, calc( 155 / var(--inner) * 100vw ), 155px); padding-left:var(--padding-20); color:#121212; font-size:1.125em; font-weight:600;}
.directions .contact-info dt img {vertical-align:middle; margin:-.2em 15px 0 0;}
.directions .contact-info dt path {fill:var(--color-primary);}
.directions .contact-info dd {flex:1 1 auto; min-width:0; width:1%; color:var(--color-body); font-size:1.125em;}

.catalog-list {display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--padding-60) var(--padding-40);}
.catalog-item {display: block;}
.catalog-item .images {position:relative; padding-bottom:133.43%; overflow:hidden;}
.catalog-item .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.catalog-item .images:after {position: absolute;content: ''; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.catalog-item .downicn {opacity: 0; position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); display: inline-flex;align-items: center;justify-content: center;flex-direction: column;gap:5px; background: var(--color-primary); width:clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); height: auto; aspect-ratio: 1 / 1 ; border-radius: 50%; z-index: 2;}
.catalog-item .downicn svg {width:clamp(12px, calc( 24 / var(--inner) * 100vw ), 24px); height:auto; aspect-ratio: 1 / 1 ;}
.catalog-item .downicn .txt {font-size: var(--font-size-14); font-weight: bold; line-height: 1; color: #fff;}
.catalog-item .textbx {margin-top:var(--padding-30); text-align: center;}
.catalog-item .textbx .tit {font-size:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:600; line-height:1.33em; letter-spacing:-.03em; color:#121212;}
.catalog-item:hover .images:before {position: absolute; content: ''; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; z-index: 1;}
.catalog-item:hover .downicn {opacity: 1;}

.linetit {margin-bottom: var(--padding-40); padding-left:15px; position: relative; font-size: var(--font-size-32); font-weight: 600;}
.linetit::before {position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); background: var(--color-primary); z-index: -1;}

.patent-wrap {display: flex; flex-direction: column;gap: var(--padding-150);}
.patent-list {display: grid; grid-template-columns: repeat(4, 1fr); gap:var(--padding-60) var(--padding-40);}
.patent-item .images {position:relative; padding-bottom:140.62%; overflow:hidden;}
.patent-item .images img {position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:auto; max-width:100%; min-height:100%;object-fit : cover;}
.patent-item .images:after {position: absolute;content: ''; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.patent-item .name {margin-top:var(--padding-30); font-size:clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; line-height: 1; text-align: center; word-break: break-all;}