* {box-sizing:border-box;letter-spacing:-0.02em;}
.flex {display:flex; align-items: center; justify-content: space-between;}
.clear {content:"";display:block;clear:both;}

#header {position: absolute;top:0;left:0;width: 100%;z-index: 10;padding: 24px 80px;background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%)}
#header_content {display:flex;; align-items: center; justify-content: space-between;}
#gnb {width:100%;}
#gnb ul {display:flex;justify-content: flex-end;}
#gnb ul li a {padding: 0 30px;display:inline-block;font-size:18px;color:#fff;}
/* #gnb ul li a:hover, #gnb ul li a:active {color:#111;} */
#header.sub_header {border-bottom: 1px solid #eee;position: relative;background: transparent;}
#header.sub_header #gnb ul li a {color:#616161;}
#header.sub_header.absolute {position: absolute;border: none;}
#header.sub_header.absolute #gnb ul li a {color:#fff;}

#side_menu {position:fixed;right:0;bottom: 0;z-index: 100;}
#side_menu a {display:flex;width:102px;height:102px;align-items: center;justify-content: center;color: #fff;flex-direction: column;}
#side_menu a img {display: block;margin:0 0 4px;}
#side_menu ul li:nth-child(1) a {background: #68553D;}
#side_menu ul li:nth-child(2) a {background: #4E3E2B;}

.bx-wrapper {border:none !important;}
#mainvisual {position: relative; top:0;left:0; height:880px; width:100%; background:url('../images/mainvisual.jpg') center center no-repeat; background-size:cover;}
#mainvisual::before {content:"";display: block;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 62.98%, rgba(0, 0, 0, 0.60) 100%);}
.main_txt {position: absolute;bottom:0;z-index: 10;color: #fff;left:0;padding: 78px 80px;width: 100%;}
.main_txt h2 {font-size: 7.875em;letter-spacing: -0.04em;}
.main_txt h4 {font-size: 1.25em;position: relative;padding: 0 0 0 180px;}
.main_txt h4::before {display: block;content: "";width: 140px;height:1px;background: #fff;position: absolute;top:50%;left:20px;transform:translate(0, -50%);}
.main_txt img {max-width: 60%;}

.title_wrap {margin:0 0 2em;}
.title_wrap.flex {display: flex;justify-content: space-between;align-items: end;}
h3.title {font-size: 2.75em;font-weight: 600;letter-spacing: -0.04em;line-height: 1.3em;word-break: keep-all;}
h3.title + p {font-size: 1.25em;color: #616161;margin:2em 0 0;line-height: 1.5em;}
.title_wrap h5 {font-size: 1.25em;text-transform: uppercase;color: #A8A8A8;margin:0 0 6px;}
.title_wrap.white h3.title {color: #fff;}
.title_wrap.white h5 {color: #EFEFEF;}

.arrow {display: flex;gap:12px;transition:all 0.3s;}
.arrow span {font-size: 1.125em;font-weight: 500;}
.arrow:hover {gap:48px;}

.gallery ul:after {content:"";display:block;clear:both;}
.gallery ul {display: flex;gap:10px;flex-wrap: wrap;}
.gallery ul li {width:calc(( 100% - 20px ) / 3 );}
.gallery ul li a {position: relative;height:580px;display: block;}
.gallery ul li .img {display:block;width:100%;height:100%;background:url('../images/main/no-img.png') center center no-repeat; background-size: cover;}
.gallery ul li .img::before {content:"";display: block;width: 100%;height: 100%;background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.6) 100%);}
.gallery ul li .gallery_txt {position: absolute;padding: 58px 48px;bottom:0;left:0;}
.gallery ul li h5 {font-size:2em;font-weight:500;color:#fff;margin:0 0 6px;}
.gallery ul li p {font-size:1.125em;color:#efefef;word-break: keep-all;line-height: 1.4em;display: -webkit-box; -webkit-line-clamp: 2; /* 표시할 줄 수 */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.gallery ul li p span {display:inline-block;min-width:120px;}

.portpolio ul li a {height:460px;}
.portpolio ul li .gallery_txt {padding: 48px 40px;}

.sec_about {padding: 120px 80px 160px;display: flex;justify-content: space-between;}
.sec_about .img {display: flex;gap:2rem;}
.sec_about .img .img_lg {margin:4.5rem 0 0;}
.sec_about .txt {display: flex;flex-direction: column;justify-content: space-between;padding: 130px 0 180px;}

.sec_board {padding: 0 80px 160px;}
.sec_board .gallery ul li:nth-last-child(2) {width:calc(( 100% - 20px ) / 2 );}
.sec_board .gallery ul li:nth-last-child(1) {width:calc(( 100% - 20px ) / 2 );}

.sec_contact {padding: 167px 80px;background: url('../images/sec03.jpg') no-repeat center center/cover;}
.sec_contact .title {color: #fff;}
.sec_contact .title + p {color: #ddd;margin:1.5em 0 0;}

#footer_content {border-top:1px solid #ddd;display: flex;justify-content: space-between;padding:40px 160px 40px 80px;}
address {font-size:1em;color: #818181;}
address div {display: flex;gap:2em;line-height: 1.8em;}
#footer_content .sns {display: flex;align-items: center;gap:1em;}

.portpolio_top {display: flex;justify-content: space-between;align-items: end;margin: 0 0 42px;}
.portpolio_top span {display: block;font-size: 4em;font-weight: 800;}
.portpolio_top h5 {font-size: 1.25em;color: #818181;margin: 1.5em 0 0.5em;}
.portpolio_top .page_arrow {display: flex;}
.portpolio_top .page_arrow > div a {padding: 0 24px;display: flex;align-items: center;gap:16px;color: #9e9e9e;}
.portpolio_top .page_arrow > div.active a {color: #111;}
.portpolio_top .page_arrow div.prev {border-right: 1px solid #ddd;}

.paginate strong {background:#111;}

.portpolio_list {padding:80px 80px 180px;}

.thumbnail_new .thumb_bg {position: absolute;}

.inner {padding: 0 80px;}

.about .subvisual {height: calc(100vh - 93px );background: url('../images/about01.jpg') no-repeat center center/cover;display: flex;align-items: end;padding: 62px 0;position: relative;}
.about .subvisual::before {content:"";display: block;width: 100%;height: 100%;position: absolute;top:0;left:0;background: linear-gradient(to bottom, rgba(33,18,2,0.2) 0%, rgba(33,18,2,0.31) 38%, rgba(33,18,2,0.9) 76%);opacity: 0.8;}
.about .subvisual .inner {position: relative;z-index: 1;}
.about .subvisual p {color: #fff;margin:0 0 24px;font-size: 1.125em;}
.about .safe {padding: 126px 0 134px;}
.about .safe .left {width: 70%; word-break: keep-all;}
.about .safe .left ul h5 {font-size: 1.5em;font-weight: 600;margin:6px 0 12px}
.about .safe ul {gap:52px;margin:64px 0 0;}

.about .greetings {padding: 161px 0;background: #f8f8f8;}
.about .greetings h3.title + p {margin: 1.5em 0 3em;}

.about .story {padding: 68px 80px;position: relative;}
.about .story p {color: #616161;font-size: 1.125em;margin:0 0 20px;}
.about .story p b {font-weight: 500;color: #111;}
.about .story .arrow {margin: 64px 0 0;}
.about .story .info {padding: 0 250px 0 120px;}
.about .story .bg_wrap {position: absolute; right:0;top:50%;transform:translateY(-50%);z-index: -1;}
.about .story .bg_wrap .bg {opacity: 0.8;}

.contact {padding: 0 0 180px;}
.contact h3.title + p {margin:16px 0 40px;}
.contact .map_wrap {display: flex;justify-content: space-between;}
.contact .subvisual {height: calc(100vh - 93px );background: url('../images/contact01.jpg') no-repeat center center/cover;display: flex;align-items: end;padding: 62px 0;position: relative;}
.contact .subvisual::before {content:"";display: block;width: 100%;height: 100%;position: absolute;top:0;left:0;background: linear-gradient(180deg, rgba(63, 60, 57, 0.20) 0%, rgba(63, 60, 57, 0.31) 30.5%, rgba(63, 60, 57, 0.80) 76.92%);opacity: 0.8;}
.contact .subvisual .inner {position: relative;z-index: 1;}
.contact .subvisual p {color: #fff;margin:0 0 24px;font-size: 1.125em;}
.contact .service {padding: 100px 0;border-bottom: 1px solid #ddd;margin: 0 0 120px;;}
.contact .service ul {display: flex;gap:24px;}
.contact .service ul h5 {font-weight: 500;font-size: 1.75em;margin:16px 0 24px}
.contact .contact_txt {width: 32%;padding: 0 56px 0 0;}
.contact .contact_map {width: 66%;}
.contact .contact_txt .txt_logo img {width: 180px;}
.contact .contact_txt .txt_add {margin: 42px 0 56px;}
.contact .contact_txt .txt_add > div {margin:0 0 24px;}
.contact .contact_txt .txt_add p {color: #818181;margin:0 0 4px;}
.contact .contact_txt .txt_add h5 {font-size: 1.25em;font-weight: 600;}
.contact .contact_txt .txt_add .flex div h5 {font-size: 1.875em;font-weight: 700;}
.contact .contact_txt .txt_add .flex div a {color: #111;}
.contact .contact_txt .txt_add p.caption {color: #111;}
.contact .contact_txt ul li a {display: flex;padding:24px 0;border-bottom: 1px solid #ddd;font-size: 1.125em;gap:12px;align-items: center;}

.root_daum_roughmap .cont .section.lst {display: none;}

.board_Vtable tbody tr td div.gallery_content {text-align:center;}
.board_Vtable tbody tr td div.gallery_content img {max-width:100%;margin:0 0 10px;}
.paginate {margin:80px 0 0;}

.portpolio_view {padding:0 0 160px;}

.thumbnail_new {position: relative;}
.thumbnail_new .thumb_img {width: 100%;height:100vh;}
.thumbnail_new .thumb_img::before {content:"";position: absolute;top:0;left:0;width: 100%;height: 100%;opacity: 0.8;
	background: linear-gradient(180deg, rgba(17, 17, 17, 0.10) 0%, rgba(17, 17, 17, 0.60) 44.71%, #111 78.37%);}
.thumbnail_new .thumb_img img {width: 100%;height: 100%;object-fit: cover;}
.thumbnail_new .thumb_txt {position: absolute;top:0;left:0; width: 100%;height: 100%;padding: 80px;display: flex;flex-direction: column;justify-content: end;}
.thumbnail_new .thumb_txt h4 {color: #fff;font-size: 3em;margin:0 0 8px;font-weight: 600;}
.thumbnail_new .thumb_txt h5 {color: #fff;font-size: 2em;margin:0 0 32px;font-weight: 600;}
.thumbnail_new .thumb_txt p {color: #efefef;font-size: 1.125em;max-width:60%;word-break: keep-all;}
.thumbnail_new .thumb_txt .arrow {color: #fff;margin:40px 0 0;}
.thumbnail_new .thumb_txt .arrow img {width: 65px;}

.gallery_content {padding: 60px 0 0;max-width:980px;margin:0 auto;}
.gallery_content .gallery_half {display: flex;gap:20px;}
.gallery_content .gallery_half > div {width: calc( (100% - 20px) /2 );}
.gallery_content div img {width: 100%;}
.gallery_content .item {margin:0 0 20px;}

.gallery_top {margin:0 0 86px; text-align: center;}
.gallery_bottom {margin:86px 0 0; text-align: center;}

.view_btn_wrap {margin:86px 0 0;display: flex;justify-content: space-between;padding: 0 80px;}
.view_btn_wrap > div a {display: inline-block;padding: 16px 64px 16px 28px;}
.view_btn_wrap > div.list_btn a {color: #68553D;background: url('../images/view_i_list.svg') right 24px center no-repeat;border: 1px solid #68553D;}
.view_btn_wrap > div.call_btn a {background: url('../images/view_i_call.svg') right 24px center no-repeat;background-color: #68553D;border: 1px solid #68553D;color: #fff;}



@media screen and (max-width:1402px) { 
	.content {width:100%;}
	#header {width:100%;}
}

@media screen and (max-width:768px) { 
	
	#header {width:100%;height:80px;z-index: 100;padding: 0 20px;}
	#gnb {display:none;}
	#header_content {height:80px;}
	.logo img {width:100px;}
	
	/* nav */
	#top_right {display:block;float:right; }
	.allmenu { position:relative;}
	#menu-icon2{
	  position: relative;
	  width: 30px;
	  height: 20px;
	  transform: rotate(0deg);
	  transition: 0.5s ease-in-out;
	  cursor: pointer;
	}
	#menu-icon2 span{
	  display: block;
	  position: absolute;
	  height: 3px;
	  width: 100%;
	  background: #fff;
	  opacity: 1;
	  left: 0;
	  transform: rotate(0deg);
	  transition: 0.25s ease-in-out;
	}
	#header.sub_header #menu-icon2 span {background: #111;}
	#header.sub_header.absolute #menu-icon2 span {background: #fff;}
	#menu-icon2 span.short {
		width:20px;
		left:10px;
	}
	#menu-icon2 span:nth-child(1){top: 0px;}
	#menu-icon2 span:nth-child(2){top: 8px;}
	#menu-icon2 span:nth-child(3){top: 17px;}
	#menu-icon2.open span:nth-child(1) {
	  top: 6px;
	  transform: rotate(-45deg);
	}
	#menu-icon2.open span:nth-child(2) {
	  opacity: 0;    /*클릭하면 중간선이 사라집니다.*/
	}
	#menu-icon2.open span:nth-child(3) {
	  top: 6px;
	  transform: rotate(-135deg);
	  width:30px;
	  left:0;
	}
	nav {position:absolute; top:80px; right:0; width:100%; text-align:left; z-index:1100;}
	#nav {display:block;}
	#nav li {position:relative; border-top:1px solid #ddd; background:#fff;}
	#nav li.m4 {border-bottom: 1px solid #ddd;}
	#nav li a {position:relative; color:#111; font-size:1.1em; font-weight:600; display:block; line-height:230%; padding:10px 20px 10px 20px;}

	#side_menu {width: 100%;;}
	#side_menu ul {display: flex;width: 100%;}
	#side_menu ul li {width: 50%;}
	#side_menu a {width:100%;height:64px;flex-direction: row;}
	#side_menu a img {display: block;margin:0 4px 0 0;}

	h3.title {font-size: 2.285em;}
	.title_wrap.flex {flex-direction: column;gap:24px;}
	/* #con_area {padding: 20px 20px 120px;} */

	#mainvisual {height:84vh;}
	.main_txt {padding: 0 20px 60px;}
	.main_txt h4 {padding: 0;}
	.main_txt h4::before {display: none;}

	.sec_about {flex-direction: column;padding: 80px 20px;}
	.sec_about .txt {padding: 0 0 80px;}
	.sec_about .txt div {padding: 0 0 60px;}
	.sec_about .img {align-items: end;}
	.sec_about .img div {width: 80%;}
	.sec_about .img div img {width: 100%;}

	.sec_board {padding: 80px 20px;}

	.gallery ul li .gallery_txt {padding: 36px 24px;}
	.gallery ul li a {height:420px;}
	.sec_board .gallery ul li:nth-last-child(-n+2) {width: 100%;}

	.sec_contact {padding: 58px 24px;}
	.sec_contact .title + p {margin: 1em 0 0;}

	.gallery ul li {float:none;width:100%;}
	
	#footer_content {padding: 42px 20px 120px;}

	address div {flex-direction: column;gap:6px;margin:0 0 24px;}
	
	.inner {padding: 0 20px;}

	.about .subvisual {padding: 0 0 80px;}
	.about .subvisual .inner {padding: 0 20px;}

	.about .greetings .flex {gap:16px;flex-direction: row;flex-wrap:wrap}
	.about .greetings .flex span {width: calc( (100% - 16px)/2 );}
	.about .greetings .flex span img {width: 100%;}
	.about .safe {padding: 80px 0;}
	.about .safe .left {width: 100%;margin:0 0 40px;}
	.about .safe img {max-width: 100%;}

	.about .story {padding: 80px 20px;}
	.about .story .info {padding: 40px 0 0;}
	.about .story .info img {width: 100%;}

	.contact .subvisual {padding: 0 0 80px;}
	.contact .subvisual .inner {padding: 0 20px;}
	.contact .service ul {flex-direction: column;gap:48px;}
	.contact .map_wrap {flex-direction: column;}
	.contact .contact_txt {width: 100%;padding: 0;}
	.contact .contact_txt ul li a {width: 100%;height:auto;}
	.contact .contact_map {width: 100%;margin:40px 0 0;}

	.portpolio_list {padding: 40px 20px 80px;}
	.portpolio_top  {flex-direction: column-reverse;align-items: start;gap:40px;}
	.portpolio_top .page_arrow {width: 100%;}
	.portpolio_top .page_arrow > div {width: 50%;}
	.portpolio_top .page_arrow > div a {padding: 0 12px;justify-content: center;}
	.portpolio_top .page_arrow > div a p {word-break: keep-all;}
	.portpolio_top .page_arrow > div a img {width: 42px;}

	.flex {flex-direction: column;}

	.thumbnail_new .thumb_img {height:calc(100vh - 64px);}
	.thumbnail_new .thumb_txt {padding: 20px 20px 48px;}
	.thumbnail_new .thumb_txt h5 {font-size: 2.25em;}
	.thumbnail_new .thumb_txt p {max-width: 100%;font-size: 1em;}
	.thumbnail_new .thumb_img {min-height: 700px;}

	.gallery_content .item {margin: 0 0 10px;}
	.gallery_content {padding: 60px 20px 0;}
	.gallery_content .gallery_half > div {width: calc((100% - 10px) / 2);}
	.gallery_content .gallery_half {gap:10px;}
	.view_btn_wrap {padding: 0 20px;flex-direction: column;gap:16px;}
	.view_btn_wrap > div a {padding: 16px 22px 16px 18px;;width: 100%;}
	.contact .contact_txt .txt_add .flex div {width: 100%;margin:0 0 8px;}
	.contact .contact_txt .txt_add .flex div h5 {font-size: 2.5em;font-weight: 700;}

}
.license {
    --license-bg: #f7f5f1;
    --license-ink: #1b1b1b;
    --license-muted: #6a6a6a;
    --license-line: #d8d2c8;
    --license-accent: #2e5f58;
    padding: 90px 0 130px;
    background: linear-gradient(180deg, #ffffff 0%, var(--license-bg) 100%);
    color: var(--license-ink);
}

.license .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.license_top {
    margin-bottom: 90px;
}

.license_card {
    border: 1px solid var(--license-line);
    background: #fff;
    padding: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(20, 20, 20, 0.08);
}

.license_info {
    flex: 1;
}

.license_title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 28px;
    letter-spacing: -0.02em;
}

.license_row {
    margin-bottom: 20px;
}

.license_label {
    font-size: 15px;
    font-weight: 600;
    color: var(--license-muted);
    margin-bottom: 6px;
}

.license_value {
    font-size: 22px;
    font-weight: 700;
}

.license_company {
    font-size: 20px;
    font-weight: 700;
    margin-top: 26px;
}

.license_image {
    width: 320px;
    height: 420px;
    border: 1px solid var(--license-line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #faf9f7;
    flex-shrink: 0;
    overflow: hidden;
}

.license_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.license_zoom {
    cursor: zoom-in;
}

body.license-modal-open {
    overflow: hidden;
}

.license_modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.license_modal.is-open {
    display: flex;
}

.license_modal_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.7);
}

.license_modal_content {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    padding: 16px;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.license_modal_content img {
    max-width: 88vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.license_section {
    margin-bottom: 90px;
}

.license_section .title_wrap .title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.license_section .title_wrap .sub {
    font-size: 17px;
    font-weight: 600;
    color: var(--license-muted);
}

.license_list {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.license_list li {
    border: 1px solid var(--license-line);
    background: #fff;
    padding: 22px 16px 28px;
    text-align: center;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(20, 20, 20, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.license_list li:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(20, 20, 20, 0.1);
}

.license_list .license_name {
    font-size: 15px;
    font-weight: 600;
    color: var(--license-muted);
}

.license_list strong {
    font-size: 34px;
    font-weight: 800;
    color: var(--license-accent);
}

.patent_wrap {
    border: 1px solid var(--license-line);
    background: #fff;
    padding: 30px;
    display: flex;
    gap: 28px;
    align-items: stretch;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(20, 20, 20, 0.08);
}

.patent_list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 16px;
    font-weight: 600;
}

.patent_list li::before {
    content: "•";
    margin-right: 8px;
    color: var(--license-accent);
}

.patent_certificates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.patent_certificates li {
    width: 160px;
    height: 210px;
    border: 1px solid var(--license-line);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #faf9f7;
}

.patent_certificates img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .license_card {
        flex-direction: column;
        align-items: flex-start;
    }

    .license_image {
        width: 100%;
        max-width: 420px;
        height: 360px;
    }

    .license_list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .patent_wrap {
        flex-direction: column;
    }

    .patent_certificates {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .patent_certificates li {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .license {
        padding: 60px 0 90px;
    }

    .license_card {
        padding: 34px;
    }

    .license_title {
        font-size: 28px;
    }

    .license_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .patent_certificates {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}