@charset "utf-8";

/* --- 기본설정 --- */
:root { /*color*/
  --color-primary:#1D418D;
  --color-secondary:#AE232A;
  --color-primaryGra: linear-gradient(127.82deg, var(--color-primary) 12%, #003a92 75%);
  /*transition*/
  --transition-custom: all 0.4s ease-in-out;
}

* {padding: 0; margin: 0; }
.wrap {position:relative; height:auto; min-height:100%; }
.brk {display:none; }
.w1440 {width:100%; max-width: 1440px; margin: 0 auto;}

.gra {position: relative;}
.gra::after {position: absolute; content: ""; inset: 0; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; border-radius: inherit;}

.hover_box3 > li {position:relative;}
.hover_box3 > li::after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:6px solid var(--color-primary); opacity:0; pointer-events:none; }
.hover_box3 > li:hover::after {border:6px solid var(--color-primary); opacity:1; box-shadow:0px 0px 10px rgba(0, 0, 0, .5); transition:.4s; cursor:pointer; box-sizing: border-box;}

.btn_wrap .btn {display:flex; flex-direction: initial; justify-content:center; align-items:center; position:relative; width: max-content; height:48px; border-radius:2px; font-size:16px; font-weight:500; border: 1px solid #ddd; z-index: 1;}
.btn_wrap .btn::after {content:''; display:inline-block; margin-left: 8px; background-image:url(../images/arrow.svg); background-repeat: no-repeat; background-position: center; background-size:contain; width:12px; height:100%; }
.btn_wrap .btn:hover {background-color: var(--color-primary); color: #fff;}
.btn_wrap .btn:hover::after {background-image:url(../images/arrow_w.svg);}

/* --- 헤더 header --- */
header {transition:background .8s; display:flex; position:fixed; top:0; left:0; width:100%; height:95px; justify-content:center; align-items:center; z-index:10000; background-color:#ffffff55; backdrop-filter:blur(10px); -webkit-backdrop-filter: blur(10px);}
header::after {content:''; position:absolute; top:95px; left:0; width:100%; height:1px; background:#999; z-index:-1; opacity:0;}
header::before,
header .bg {display:none; position:absolute; top:0; left:0; width:100%; height:592px; background:#fff; opacity:0.95; z-index:-1;}
header::before {content:''; display:block; height:95px; opacity:0; transition:0.2s }
header .logo {display:block; position:absolute; top:0px; left:3%; width: 120px; height: 100%; background-image:url(../images/logo_jh_full.png); background-size: contain; background-position: center left; background-repeat: no-repeat;}
header .header_right {position:absolute; top:0px; right:3%; display:flex; z-index:10000;}
header .header_right .language {display:none; align-items:center; height:95px; justify-content:space-between; margin-right:40px;}
header .header_right .language::before {content:''; display:inline-block; width:20px; height:20px; background:url(../images/ico_language_w.svg) left center no-repeat;}
header .header_right .language a {display:inline-block; padding: 0 5px; font-weight:600; font-size:14px; color:#fff; opacity:.4;}
header .header_right .language a:last-child {cursor:default; }
header .header_right .language a:first-child::after {content:''; display:inline-block; width:1px; height:10px; background:#bbb; margin-left:10px;}
header .header_right .language a.on {color:#fff; opacity:1; }
header .header_menu {display:block; position:relative; z-index: 100;}
header .header_menu,
header .header_menu span {transition: all 0.4s; }
.header_r {display:flex; align-items:center; height:95px;}
header .header_menu {width:24px; height:40px; background:none;}
header .header_menu span {position:absolute; right:0; width:100%; height:2px; background:#fff; border-radius:4px;}
header .header_menu span:nth-of-type(1) {top:10px;}
header .header_menu span:nth-of-type(2) {top:19px; width:70%;}
header .header_menu span:nth-of-type(3) {bottom:10px;}
header .header_menu.active-1 span:nth-of-type(1) {transform: translateY(10px) rotate(-45deg); background:#222; z-index:1000;}
header .header_menu.active-1 span:nth-of-type(2) {opacity: 0; }
header .header_menu.active-1 span:nth-of-type(3) {transform: translateY(-8px) rotate(45deg); background:#222;}
header .gnb > ul {display:flex; justify-content:center;}
header .gnb > ul > li {position:relative;}
header .gnb > ul > li > a {position:relative; display:inline-block; vertical-align:top; padding:0 40px; font-weight:500; font-size:18px; line-height:95px; color:#fff; transition:0.2s;}
header .gnb > ul > li > a::after {content:""; position:absolute; bottom:-1px; left:50%; width: 0; height:2px; background:var(--color-primary); transition:0.4s; transform:translateX(-50%);}
header .gnb > ul > li > a > .recruit {position: relative;}
header .gnb > ul > li > a > .recruit::after {position:absolute; content:""; top:50%; right:-16px; transform:translate(0, -50%); width:12px; height:12px; background:url(../images/ico_blank_w.svg) center no-repeat; background-size:contain;}
header .gnb > ul > li > ul {display:none; position:absolute; _overflow:hidden; top:95px; left:0; width:100%; height:auto; padding:30px 0; z-index:10;}
header .gnb > ul > li:hover ul a {color:#222;}
header .gnb > ul > li:first-of-type > ul::before {content:''; position:absolute; top:0; left:0; width:1px; background:#eee; opacity:0.3;}
header .gnb > ul > li > ul > li > a {display:inline-block; vertical-align:top; width:100%; text-align:center; font-weight:400; font-size:16px; color:#a4a4a4; padding:6px 0;}
header .gnb > ul > li > ul > li:hover > a, header .gnb > ul > li > ul > li > a.active {color:var(--color-primary); font-weight:500;}
header .gnb > ul > li:hover > a::after {width: 100%;}
header .gnb > ul > li > a:hover > .recruit::after {background-image: url(../images/ico_blank_k_hover.svg);}
header.hover .logo {background-image:url(../images/logo_jh_full.png);}
header.hover::after {opacity: 0.3;}
header.hover .gnb > ul > li > a {padding: 0 60px; color:#222 !important;}
header.hover .gnb > ul > li:first-of-type > ul::before,
header.hover .gnb > ul > li > ul::after {opacity: 0.3; height:auto;}
header.hover .gnb > ul > li .recruit::after {background-image: url(../images/ico_blank_k_hover.svg);}
/* --- GNB > 스크롤시 header 변경 */
header.active {background-color:rgba(255, 255, 255, 0.8); transition:background .8s;}
header.active a.logo {background-image:url('../images/logo_jh_full.png');}
header.active .gnb > ul > li > a,
header.active .gnb > ul > li.on > a {line-height:95px; color:rgba(0, 0, 0, 0.8);}
header.active .gnb > ul > li:hover > a,
header.active .gnb > ul > li.on:hover > a {color:#24548b;}
header.active .menu-right a {background:url(../images/gnb_menu_b.png) center center no-repeat; width:80px; height:100px;}
header.active .gnb > ul > li > a:after {background:#184682;}
header.active .language::before,
header.hover .language::before {background:url(../images/ico_language.svg) center no-repeat;}
header.active .language a,
header.hover .language a {color:#000; opacity:.4;}
header.active .language a:first-child::after {content:''; display:inline-block; width:1px; height:10px; background:#bbb; margin-left:10px;}
header.active .language a.on,
header.hover .language a.on {color:#000; opacity:1;}
header.active .header_menu span,
header.hover .header_menu span {background:#222;}
header.active .gnb > ul > li .recruit::after {background-image: url(../images/ico_blank_k_hover.svg);}

header .sitemap {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; overflow-x:hidden !important; z-index:99;}
header .sitemap::before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
header .sitemap .nav_wrap h1 a {z-index:11;}
header .sitemap .nav_wrap h1 > .logo {display:block; position:absolute; top:0px; left:3%; width:120px; height:95px; background-image:url(../images/logo_jh_full.png);}
header .sitemap .nav_wrap {position:relative; display:flex; align-items:center; width:100%; height:100%; padding:0 20px; z-index:10;}
header .sitemap .nav_wrap .gnb_wrap {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; z-index:11;}
header .sitemap .gnb {display:flex; justify-content:space-between; position:relative; width:1100px; margin:0 auto;}
header .sitemap .gnb dl {overflow:hidden; margin-bottom:50px;}
header .sitemap .gnb dt {position:relative; color:#000; font-size:22px; font-weight:500;}
header .sitemap .gnb > dl > dt > a {position:relative; display:inline-block; line-height:56px; font-weight:500; font-size:22px; color:#000; transition:0.2s;}
header .sitemap .gnb > dl > dt > a::before {content:""; position:absolute; bottom:-1px; left:50%; width:0; height:2px; background:var(--color-primary); transition:0.4s; transform:translateX(-50%);}
header .sitemap .gnb > dl:hover > dt > a::before {width:100%;}
header .sitemap .gnb dd {margin-top:20px; font-weight:500;}
header .sitemap .gnb ul li {overflow:hidden; padding:4px 0; height:34px;}
header .sitemap .gnb ul li:hover a {color:var(--color-primary); transition:0s; transition-delay:0s; font-weight:500;}
header .sitemap .gnb ul li ~ li {margin-top:8px;}
header .sitemap .gnb ul li a {display:block; font-size:18px; font-weight:400; line-height:1.4; color:#666;}
header .sitemap .gnb ul li a span {position:relative; display:inline-block; color:#fff; font-weight:300; padding-right:15px;}
header .sitemap .gnb ul li a span::before {content: ""; position:absolute; top:50%; right:10px; width:6px; height:9px; margin-top:-5px; opacity:0; transition: 0.2s; }
header .sitemap .gnb ul li.on a span::before,
header .sitemap .gnb ul li a:hover span::before {right:0; opacity:1;}
header .sitemap .nav_bg img {position:absolute; bottom:32px; right:32px; width:40vw; opacity:0.1;}
header .sitemap .gnb dt a { position:relative; display:inline-block; transition:all 0.3s ease-in-out;}
header .sitemap .gnb dl.none a {position:relative;}
header .sitemap .gnb dl.none a::after {content:""; display:inline-block; width:12px; height:12px; margin-left:10px; background:url(../images/ico_blank_k.svg) center no-repeat; background-size:contain;}
header .sitemap .gnb dl.none a span {display:none;}


/* --- 푸터 footer --- */
footer {padding:40px 3% 100px; background:#ededf0; color:#000; border-top: 1px solid #00000011;}
footer .footer_in {display:flex; align-items:bottom; position:relative; max-width:1440px; margin:0 auto;}
footer .footer_top {display:flex; align-items:flex-end; justify-content:space-between;}
footer .footer_logo {width:220px;}
footer .footer_logo img {width:70%;}
footer .footer_content {display:flex; justify-content:space-between; align-items:flex-end; width:calc(100% - 220px); padding-bottom:20px; font-size:16px; border-bottom:1px solid #00000033;}
footer .footer_menu {display:flex;}
footer .footer_menu li {position:relative; color:#000;}
footer .footer_menu li:first-child::after {content:'|'; display:inline-block; position:absolute; top:4px; right:-40px; width:40px; text-align:center; font-size:10px;}
footer .footer_menu li:first-child {margin-right:36px;}
footer .footer_list {margin-top:20px;}
footer .footer_list li {opacity:.7; margin-bottom:2px;}
footer .footer_list li:first-child {font-weight:600; margin-bottom:6px; opacity:1;}
footer .footer_list li span {display:inline-block; width:40px;}
footer .footer_copyright {position:absolute; left:220px; bottom:-40px; font-size:14px;}
footer .ft_family {position:relative; font-size:14px; height:42px;}
footer .ft_family .btn_family {display:block; padding:10px 20px; height:100%; background:#00000077; font-size:14px; color:#fff; font-weight:500; }
footer .ft_family .btn_family::after {content:"\276E"; display:inline-block; width:20px; height:20px; line-height:20px; margin-left:20px; text-align:center; transform:rotate(-90deg); }
footer .ft_family .family_list {opacity:0; visibility:hidden; overflow-y:auto; position:absolute; left:0; bottom:42px; width:100%; padding:10px; background:#fff;  transition:var(--transition-custom); z-index:1100;}
footer .ft_family .family_list li a {display:block; padding:3px; font-size:14px; color:#333;}
footer .ft_family .family_list li a:hover {color:var(--color-primary);}
footer .ft_family.open .family_list {opacity:1; visibility:visible;}
footer .ft_family.open .btn_family::after {color:#fff; transform:rotate(90deg); transition:var(--transition-custom);}

/* 탑버튼 topBtn */
.topBtn {display:none; position:fixed; bottom:100px; right:3%; width:60px; height:60px; z-index:1000; transition: bottom 0.3s ease;}
.topBtn .topClr {position:relative; display:inline-block; vertical-align:top; position:absolute; left:calc(50% + 1px); top:50%; transform:translate(-50%, -50%); width:60px; height:60px; background:rgba(0, 0, 0, 0.8); transition:0.25s;}
.topBtn .topClr .topArr {display:block; width:2px; height:35px; background:#fff; position:absolute; left:50%; bottom:0; transform:translateX(-50%); transition:0.25s;}
.topBtn .topClr .topArr:before {content:""; display:block; position:absolute; right:calc(100% - 1px); top:0px;  width:15px; height:2px; transform:rotate(-45deg); background:#fff; transition: 0.25s; transform-origin: 100%;}
.topBtn .topClr .topArr:after {content:""; display:block; position:absolute; left:calc(100% - 1px); top:0; width:15px; height:2px; transform:rotate(45deg); background:#fff; transition: 0.25s; transform-origin:0;}

/* --- 공통적용 sub_container --- */
.sub_container {width:100%; position:relative;}
.sub_container .sub_banner_wrap {position:relative; display:flex; overflow:hidden; flex-direction:column; justify-content:center; align-items:center; height:646px; padding-top:80px; box-sizing: border-box; color:#fff;}
.sub_container .sub_banner_wrap .bg {position:absolute; top:0; left:0; width:100%; height:646px; background-position:center; background-repeat:no-repeat; background-size:cover; animation: visualScale 4s linear alternate both; z-index:-1; }
.sub_container .sub_banner_wrap::before {content:''; display:flex; position:absolute; top:0; left:0; width:100%; height:646px; background:rgba(0, 0, 0, .6); z-index:0;  backdrop-filter:blur(1px);}
.sub_container .sub_banner_wrap h2 {font-size:70px; color:#fff; z-index:2; transition:var(--transition-custom);}
.sub_container .sub_banner_wrap p {margin-top:14px; font-size:20px; font-weight:300; z-index:2; color:rgba(255, 255, 255, .9); transition:var(--transition-custom);}
.sub_container .sub_banner_wrap p em {font-weight:500;}
/* sub_banner_wrap GNB별 배경 */
.sub_container.company > .sub_banner_wrap > .bg {background-image: url(../images/sb_company.png); } /*회사소개*/
.sub_container.business > .sub_banner_wrap > .bg {background-image: url(../images/sb_business.png);} /*사업영역*/
.sub_container.technology > .sub_banner_wrap > .bg {background-image: url(../images/sb_technology.png); } /*기술개발*/
.sub_container.pr > .sub_banner_wrap > .bg {background-image: url(../images/sb_pr.png); } /*홍보센터*/
.sub_container.recruit > .sub_banner_wrap > .bg {background-image: url(../images/sb_recruit.png); } /*인재채용*/
.sub_container.security > .sub_banner_wrap > .bg {background-image: url(../images/sb_security.png); } /*개인정보*/
@keyframes visualScale {
  0% { transform: translateZ(0) scale(1) rotate(0deg) }
  100% { transform: translateZ(0) scale(1.08) rotate(0.0001deg) }
}
.sub_container .sub_banner_wrap .location {display:flex; align-items:center; margin-top:90px; font-size:14px; z-index:2;}
.sub_container .sub_banner_wrap .location::before {content:''; display:inline-block; width:20px; height:20px; margin-right:8px; background:url(../images/ico_home.svg) center no-repeat;}
.sub_container .sub_banner_wrap .location span::after {content:'\203A'; display:inline-block; width:24px; text-align:center;}
.sub_container .sub_banner_wrap .location span:last-child::after {display:none;}
.sub_container .sub_tab {position:absolute; top:592px; left:50%; transform: translateX(-50%); width:100%; height:54px; background:rgba(32, 27, 20, .7); z-index:10;}
.sub_container .sub_tab ul {display:flex; width: 100%; max-width:1440px; margin:0 auto;}
.sub_container .sub_tab li {position:relative; flex:1; text-align:center;}
.sub_container .sub_tab li::before {position:absolute; top:0; right:0; content:''; display:inline-block; width:1px; height:100%; background:#fff; opacity:.2;}
.sub_container .sub_tab li:last-child::before,
.sub_container .sub_tab li.on::before {display:none;}
.sub_container .sub_tab li a {display:block; width:100%; height:54px; line-height:54px; text-align:center; font-size:16px; color:#fff; opacity:.8;}
.sub_container .sub_tab li.on {background-color:var(--color-primary);}
.sub_container .sub_tab li.on a {font-weight:600; opacity:1;}
.sub_container .sub_tab_mobile {display:none; position:relative; margin-top:-44px;}
.sub_container .sub_tab_mobile .btn_sub_tab {display:block; background:var(--color-primary); color:#fff; display:flex; align-items:center; padding-left:4%; width:100%; height:44px; font-size:15px; font-weight:600;}
.sub_container .sub_tab_mobile .btn_sub_tab::after {content:"\276E"; display:inline-block; position:absolute; right:4%; width:20px; height:20px; line-height:20px; margin-left:20px; text-align:center; transform:rotate(-90deg); transition:var(--transition-custom);}
.sub_container .sub_tab_mobile .sub_tab_list {position:absolute; top:44px; left:0; _opacity:1; display:none; background:#fff; width:100%; padding:4%; border-bottom:1px solid #ddd; color:#222; z-index:10;}
.sub_container .sub_tab_mobile .sub_tab_list li {margin:8px 0;}
.sub_container .sub_tab_mobile .sub_tab_list li a {display:block; }
.sub_container .sub_tab_mobile .sub_tab_list li.on a {color:var(--color-primary); font-weight:600;}
.sub_container .sub_tab_mobile.open .sub_tab_list {display:block;}
.sub_container .sub_tab_mobile.open .btn_sub_tab::after {transform:rotate(90deg); transition:var(--transition-custom);}
.sub_container .sub_contents {width: 100%; position: relative; padding: 80px 0 160px;}
.sub_container .sub_contents > h3 {font-size:46px; color:#222; text-align:center; margin-bottom: 80px;}
.sub_container .sub_contents > div {width: 100%; margin: 0 auto; }
.sub_container .sub_contents .sub_text {font-size:22px; letter-spacing:-0.04em;}
.sub_container .sub_contents .fixed_bg {position:relative; width:100%; height:380px; background-position:center; background-repeat: no-repeat; background-size:cover; background-attachment:fixed; margin-top:80px; padding:0 218px;}


/* --- 메인 main --- */
.main {width: 100%;}
.main header .gnb > ul > li > a {color:#222; }
.main header .logo {background-image:url(../images/logo_jh_full.png);}
.main header .header_menu span {background:#222; }
.main header .gnb > ul > li > a > .recruit::after {background-image:url(../images/ico_blank_k.svg);}
.main header .header_right .language a, .wrap.main .header_right .language a.on{color: #000;}
.main header .header_right .language a:first-child::after {background: #000;}
.main header .header_right .language::before{background: url(../images/ico_language.svg) left center no-repeat; background-size: contain;}

.main .container {position:relative; width:100%;  z-index:1000}

/* > 인트로 intro */
.main .intro {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;overflow: hidden;pointer-events: none;}
.main .notTop .intro{display: none;}
.main .mask {width: 100%; height: 100vh; position: absolute; top:0; left: 0; display: flex; flex-direction: column; transition-timing-function: linear; background: rgba(255,255,255,0.4);}
.main .mask_section{flex-grow: 1; display: flex;}
.main .mask_section-main{flex-grow: 0;}
.main .mask_block {width: calc(100% + 2px); height: calc(100% + 2px); background:#fff; margin: -1px;}
.main .mask_block.mask_block-side{width: calc(37.5% + 2px);}
.main .mask_logo {width:30%; z-index: 1;}
.main .mask_logo img {width:100%;}
.main .typin_wrap {width:100%; position:absolute; bottom:calc(50% - 160px); left:50%; transform:translateX(-50%); font-size:36px; letter-spacing:-2px; text-align:center; z-index: 1;}
.main .typin_wrap .text {display:none; font-size:20px; margin-top:10px; color:#777;}
.main p.typing-txt {display:none;}
.main .typing {display: inline-block; animation-name:cursor; animation-duration: 0.3s; animation-iteration-count: infinite;}
  @keyframes cursor{
    0%{border-right: 1px solid #fff}
    50%{border-right: 1px solid #000}
    100%{border-right: 1px solid #fff}
  }
.main .blue{color: #2063C8; font-weight:600;}
.main .orange{color: #DD762B; font-weight:600;}
.main .green{color: #54AA41; font-weight:600;}
/* scroll animation */
.main .scroll {z-index:100; width:150px; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); text-align:center; color:#222; font-weight:500; font-size:13px; cursor:default;}
.main .scroll:before,
.main .scroll:after {content: ""; width: 8px; height: 8px; display: block; position: absolute; left: calc(50% - 4px); border: solid #222; border-width: 0 1px 1px 0; transform: rotate(45deg); animation: scroll 1.5s infinite ease; opacity: 0;}
.main .scroll_w:before,
.main .scroll_w:after {content: ""; width: 8px; height: 8px; display: block; position: absolute; left: calc(50% - 4px); border: solid #fff; border-width: 0 1px 1px 0; transform: rotate(45deg); animation: scroll 1.5s infinite ease; opacity: 0;}
.main .scroll:before,
.main .scroll_w:before {top: 24px;}
.main .scroll:after,
.main .scroll_w:after {top: 18px; animation-delay: .35s;}
@keyframes scroll {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0; margin-top: 10px;}
}

/* > 메인비주얼 main_visual */
.content.main_visual {height:160vh; overflow:unset; z-index:100;}
.main_visual_slide {position:sticky; top: 0; left: 0;}
.visual_bg {z-index: 1; position: relative; overflow: hidden;width: 100%; height:100vh;}
.visual_video video {position: absolute; width: 100%;height: 100vh;object-fit: cover;left: 50%;top: 50%;transform: translate(-50%,-50%); _opacity:.2;}
.video_list {position:relative; top:-35px; left:0; width:100%; height:102vh; overflow:hidden;}
.visual_video > video {display:block; position:absolute; left:50%; top:0; transform: translate(-50%, 0); z-index:1;}
.main_visual video.mo {display:none;}/* mobile none */


/* > 메인 컨텐츠 main_contents */
.main .main_contents {position:relative; width:100%; height:100%;}
.main .main_con {position:relative; width:1440px; margin:0 auto; padding:6% 0;}
.main .project {text-align:center;}
.main .technology::before,
.main .technology::after,
.main .recruit::before {position:absolute; display:block; font-size:100px; font-weight:800; letter-spacing:-2px; color:#000; opacity:.04; z-index:-1;}
.main .technology::before {content:'Technology'; top:300px; left:-100px;}
.main .technology::after {content:'Development'; top:382px; left:0px;}
.main .recruit::before {content:'Go together';top: -110px; right: 0px; z-index:0;}
.main .main_con_title {z-index:10;}
.main .main_con_title h3 {color:#000; font-size:65px; font-weight:800;}
.main .main_con_title h3 p {color:#0257D7; font-size:16px; font-weight:600;}

/* >> 사업영역 main_business */
.main .main_business {display:flex; justify-content:center; position:relative; height:2600px;}
.main .main_business.mo {display:none;}
.main .main_business .btn_news_all {margin-top:100px; display:inline-block; color:#fff;}
.main .main_business .btn_news_all::after {content:'\2192'; display:inline-block; margin-left:8px;}
.main .main_business .btn_news_all:hover {color:#fff;}
.main .main_business .btn_news_all:hover::after {margin-left:16px; color:#fff; transition: .2s;}
.main .main_business_wrap {width:100%; height:100%; position:relative}
.main .main_business_wrap::before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .5);}
.main .main_business_wrap .main_con_title {filter: drop-shadow(0 0 4px #000);}
.main .main_business_wrap .main_con_title p {color: #fff;}
.main .main_business_wrap .bg-wrap {position:absolute; top:5%; left:0; width:100%; height:100%;}
.main .main_business_wrap .bg {position:fixed; display:block; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center center; transition-duration:0.3s; transition:0.3s; z-index:-10;}
.main .main_business_wrap .bg {background:url("../images/hm_main.jpg") center no-repeat; background-size:cover;}
.main .sp_container {max-width:1440px; height:100%; margin:0 auto;}
.main .fixed_motion {width:780px;display:flex; flex-wrap:wrap; justify-content:space-between; transition-duration:1.5s;}
.main .fixed_motion li {position:relative; height:300px; margin-bottom:40px; overflow:hidden;}
.main .fixed_motion li a {height:100%;}
.main .fixed_motion li a .card_body {height:100%; display:flex; flex-direction:column; justify-content:space-between;}
.main .fixed_motion li a .card_body .icon_motion {display:none; width: 100%; margin-bottom:15px;}
.main .fixed_motion li a .card_body .icon_motion img {width:100%;}
.main .fixed_motion li a .card_body h4 {font-size:32px; margin-top:0px; z-index:10;}
.main .fixed_motion li a .card_body h4 p {font-size:12px; color:#fff; font-weight:800;}
.main .fixed_motion li a .card_body > p {font-weight:400; z-index:10; display:flex; align-items:flex-end; flex-direction:column; letter-spacing: -0.5px;}
.main .fixed_motion li:nth-child(2) {margin-top:280px;}
.main .fixed_motion li:nth-child(odd) {margin-top:-280px;}
.main .fixed_motion li:nth-child(1) {margin-top:0;}
.main .main_business .section_wrap {position:sticky;  display:flex; flex-wrap:wrap; justify-content:space-between; height:100vh; top:0; padding-top:260px; z-index:1;}
.main .main_business .section_head {display:flex; flex-direction:column; align-items:flex-start; justify-content:start; width:42%; position:sticky; height:700px; top:200px;}
.main .main_business .section_head p {font-size:14px; font-weight:700; color:#257CFE; line-height:20.27px;}
.main .main_business .section_head h3 {width: 566px; height:261px; color:#fff; font-size:52px; font-weight:700; line-height:67.6px; letter-spacing:-5px;}
.main .main_business .section_head .section_ttl {font-size:56px; font-weight:700; line-height:1.4; margin:0;}
.main .main_business .section_body {will-change:contents; padding-top:120px; padding-bottom:750px;}
.main .main_business .section_body .card {display:flex; flex-direction:column; justify-content:space-between; max-width:370px; width:100%; height:520px; padding:48px 35px 46px; color:#fff; border-radius:5px; background:rgba(255, 255, 255, .15);
  box-shadow:0px 0px 4px rgb(0, 0, 0, .3); _opacity:0.2; _border:8px solid #fff; backdrop-filter: blur(4px);}
.main .main_business .section_body .card.is_active {background:rgba(255, 255, 255, .85); color:#000; box-shadow: 0px 6px 24px 10px rgba(0, 0, 0, 80%); backdrop-filter: blur(10px);}
.main .main_business .section_body .card.is_active h4 p {color:var(--color-secondary);}
.main .main_business .section_body .card.is_active .card_body .icon_motion,
.main .main_business .section_body .card:hover .card_body .icon_motion {display:block;}
.main .main_business .section_body .card:hover {background:rgba(255, 255, 255, .85); color:#000; opacity:1;}
.main .main_business .section_body .card::after {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:6px solid var(--color-primary); border-radius:5px; opacity:0; box-sizing:border-box;}
.main .main_business .section_body .card:hover::after {border:6px solid var(--color-primary); opacity:1; box-shadow:0px 0px 10px rgba(0, 0, 0, .5); transition:.4s; cursor:pointer;}
.main .main_business .section_body .card:hover h4 p {color:var(--color-secondary);}
.main .main_business .section_body .card::before {content:''; position:absolute; top:24px; left:calc(100% - 60px); margin-left:0px; display:block; background:url(../images/ico_arr.svg) no-repeat; width:30px; height:30px; opacity:0;}
.main .main_business .section_body .card:hover::before {margin-left:12px; transition:.2s; opacity:1;}
.card_body .cad_img_box img {width:calc(100% + 35px); margin-top:-40px; margin-left:-35px; opacity:0;}
.main .main_business .section_body .card.is_active .card_body .cad_img_box img,
.main .main_business .section_body .card:hover .card_body .cad_img_box img {opacity:1; transition: .5s;}
.main .main_business .section_body .card.is_active .cad_img_box span {opacity:1; transition: .2s;}
.main .main_business .section_body .card.is_active,
.main .main_business .section_body .card:hover {background: linear-gradient(180deg, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, .95) 80%), url(../images/sample_bg.png) 70px 172px no-repeat; background-size: 130%;}

/* >> 기술개발 technology_wrap */
.main .technology_wrap {display:flex; align-items: center; height:100vh; position:relative; z-index:100; width:100%;  background:#F3F1EE;}
.main .technology_wrap::before {content:''; position:absolute; top:60px; left:0; display:block; width:100%; height:100%; background:url(../images/line01.svg) no-repeat; background-size:100%; opacity:.7;}
.main .technology h4 {width:100%; color:#fff; font-size:24px; z-index:10;}
.main .technology h4 p {font-size:14px; color:var(--color-secondary);}
.main .technology .main_con_list {margin-top:-160px;}
.main .technology .main_con_list {width:64%; align-items:flex-start; display:flex; justify-content:flex-end; margin-left:auto; gap: 24px;}
.main .technology .main_con_list > li {position:relative; align-items:flex-start; color:#fff; box-sizing:border-box; width: 100%; height: 320px;}
.main .technology .main_con_list > li > a {display:flex; flex-wrap:wrap; align-content: end; width:100%; height:100%; padding:0px 30px 30px; box-sizing:border-box;}
.main .technology .main_con_list > li:nth-child(1) {background:url(../images/main_technology_bn01.png) center no-repeat; background-size:cover; margin-top: 80px;}
.main .technology .main_con_list > li:nth-child(2) {background:url(../images/main_technology_bn02.png) center no-repeat; background-size:cover;}
/* .main .technology .main_con_list > li:nth-child(3) {margin-top:100px; background:url(../images/main_technology_bn03.png) center no-repeat; background-size:cover;} */
.main .technology .main_con_list > li::before {content:''; position:absolute; top:6px; left:calc(100% - 68px); margin-left:0px; display:block; background:#fff url(../images/ico_arr.svg) center no-repeat; width:50px; height:50px; opacity:0;}
.main .technology .main_con_list > li:hover::before {margin-left:12px; transition:.2s; opacity:1;}
.main .technology .main_con_list .technology_txt {color:#fff; font-size:14px; margin-top:20px; z-index:10;}
.main .technology .main_con_list .technology_txt > li::before {content:'-'; display:inline-block; margin-right:6px;}
.main .technology .main_con_list > li:hover {margin-bottom:10px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4); transition: 1s;}


/* --- 회사소개 company --- */
/* > 인사말 greeting */
.company .greeting > div {display: flex; gap: 80px; width: 100%; max-width: 1280px;}
.company .greeting .sub_text {display: flex; flex-direction: column; gap: 40px; width: 100%;}
.company .greeting .sub_text .tit {font-size: 32px; font-weight: 400; line-height: 1.6;}
.company .greeting .sub_text p {line-height: 1.6; font-weight: 300;}
.company .greeting .sub_imgbox {width: 100%; max-width: 400px;}
.company .greeting .sub_imgbox img {width: 100%; height: 100%; object-position: center; object-fit: cover;}


/* 회사소개 > 경영이념 */
.company .mission {padding-bottom: 0;}
.company .mission > div {display:flex; flex-direction:column; align-items:center; text-align:center; }
.company .mission .sub_text p {font-size:26px; font-weight:400; margin-bottom:10px; letter-spacing:-1.5px; color:#444;}
.company .mission .sub_text p .t_blue {font-weight:600; color:#397AC9;}
.company .mission .sub_text p .t_orange {font-weight:600; color:#2E994B;}
.company .mission .sub_text p .t_green {font-weight:600; color:#DD6F32;}
.company .mission .sub_text div {margin-top: 10px; color: #777;}
.company .mission .fixed_bg.missionv {background-image:url(../images/mission_bg.jpg);}
.company .mission .fixed_bg.value {background-image:url(../images/value_bg.jpg);}
.company .mission .eng_swdev {display: flex; flex-direction: column; justify-content: flex-start; text-align: left; margin: 160px auto 80px;}
.company .mission .eng_swdev h4 {font-weight: 400; font-size: 32px;padding-bottom: 12px; letter-spacing:-0.04em;}
.company .mission .vision ul {margin: 30px 0 50px; display: flex; align-items: center;}
.company .mission .vision ul li { display: flex; justify-content: center; align-items: center; text-align: center; text-align-last: center; width: 65%; height: max-content; padding: 40px ; vertical-align: middle;  border-radius:100px;border:5px solid #092775; }
.company .mission .vision ul li:nth-child(2) { width:10%; border:none; border-radius: 0; border:dotted #dedede; border-width: 3px 0 0 0; height: 1px; padding: 0;}
.company .mission .vision ul li:nth-child(3) { width:25%; border:3px solid #092775; font-size:20px; line-height:140%; color:#555; margin:0 auto;  text-align:center; font-weight:300; color:#444;}
.company .mission .vision ul li strong {font-size:35px; color:#333; text-align:center; font-weight:500;}
.company .mission .action {display:flex; justify-content:center; position:relative;}
.company .mission .action::before {content:'Shared Value'; position:absolute; bottom: -130px; font-size: 160px; font-weight:800; opacity: .05; letter-spacing: -0.04em;}
.company .mission .action .action_plan { display: flex; justify-content: center; position: relative; width: 360px; height: 360px; margin: 160px auto; background: linear-gradient(rgba(237, 189, 189, 0.1), rgba(103, 18, 18, 0.1)); border-radius: 50%; border: 1px solid #A44D4D; }
.company .mission .action .action_plan .circle_blue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(#0C3192, #092775); width:240px; height: 240px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  display: flex; justify-content: center; align-items: center;}
.company .mission .action .action_plan .circle_blue p { color:#fff; font-size: 24px; font-weight: 500; text-align: center; line-height: 1.3; z-index: 2; }
.company .mission .action .action_plan .circle_line_pink { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1.5px dashed #A44D4D; width:400px; height:400px; border-radius: 50%; opacity: 0.3; z-index: -1; }
.company .mission .action .action_plan .dot {position:absolute; width:10px; height:10px; border-radius:50%; background-color:#9B1A1A; z-index:3; }
.company .mission .action .action_plan .fix p {font-size:18px; color:#000; font-weight: 700;display: flex; flex-direction: column; align-items: center;}
.company .mission .action .action_plan .fix p span {font-weight:400;font-size: 14px;color: #999;}
.company .mission .action .action_plan div[class*="fix_"] {position:absolute;}
.company .mission .action .action_plan div[class*="fix_"]::before {content:''; position:absolute; display:block; width:46px; height:46px; border-radius:50%; background-position: center; background-repeat: no-repeat;}
.company .mission .action .action_plan .fix .fix_01 {top: -37%; left: 130px; text-align:center;}
.company .mission .action .action_plan .fix .fix_01::before {top: 51px; left: 26px; background-image:url(../images/icon_action01.svg);}
.company .mission .action .action_plan .fix .fix_02 {top: 47px; right: -157px; text-align: left;}
.company .mission .action .action_plan .fix .fix_02::before {top: 2px; right: 99px; background-image:url(../images/icon_action02.svg);}
.company .mission .action .action_plan .fix .fix_03 {top: 51px; left: -151px; text-align: center;}
.company .mission .action .action_plan .fix .fix_03::before {top: -2px; left: 92px; background-image:url(../images/icon_action03.svg);}
.company .mission .action .action_plan .fix .fix_04 {bottom: -8px; right: -110px; text-align: right;}
.company .mission .action .action_plan .fix .fix_04::before {top: -1px; left: -54px; background-image:url(../images/icon_action04.svg);}
.company .mission .action .action_plan .fix .fix_05 {bottom: -6px; left: -72px; text-align: right;}
.company .mission .action .action_plan .fix .fix_05::before {top: 0px;right: -54px; background-image:url(../images/icon_action05.svg);}
.company .mission .action .action_plan .fix .fix_02 p {align-items: flex-start;}
.company .mission .action .action_plan .fix .fix_03 p {align-items: flex-end;}
.company .mission .action .action_plan .fix .fix_04 p {align-items: flex-start;}
.company .mission .action .action_plan .fix .fix_05 p {align-items: flex-end;}
.company .mission .action .action_plan .fix .dot.f_01 {top:0; left:50%; transform: translateX(-50%) translateY(-6px); }
.company .mission .action .action_plan .fix .dot.f_02 {top:27%; right:3.5%; transform: rotate(-120deg);}
.company .mission .action .action_plan .fix .dot.f_03 {top:27%; left:3.5%; transform: rotate(30deg);}
.company .mission .action .action_plan .fix .dot.f_04 {bottom:15%; right:11%; transform: rotate(50deg);}
.company .mission .action .action_plan .fix .dot.f_05 {bottom:15%; left:11%; transform: rotate(-230deg);}
.company .mission .action .action_plan .fix .dot::before { content: ''; position: absolute; border-top: 1.5px dashed #9B1A1A; width: 30px; z-index: 0; }
.company .mission .action .action_plan .fix .dot.f_01::before { transform: translate(-50%, -50%) rotate(90deg); top: -160%; left: 50%; }
.company .mission .action .action_plan .fix .dot.f_02::before { transform: translate(-50%, -50%) rotate(90deg); top: 270%; left: 50%; }
.company .mission .action .action_plan .fix .dot.f_03::before { transform: translate(-50%, -50%) rotate(180deg); top: 50%; left: -170%; }
.company .mission .action .action_plan .fix .dot.f_04::before { transform: translate(-50%, -50%) rotate(180deg); top: 50%; left: 260%; }
.company .mission .action .action_plan .fix .dot.f_05::before { transform: translate(-50%, -50%) rotate(180deg); top: 50%; left: 260%; }
.company .mission .action .action_plan .move .dot {top: 50%; left: 50%; translate: -50% -50%; opacity: 0.3; animation-duration: 12s; animation-iteration-count: infinite; }
.company .mission .action .action_plan .move .dot.m_01 { animation-name: action-dot-anim-01; }
.company .mission .action .action_plan .move .dot.m_02 { animation-name: action-dot-anim-02; }
.company .mission .action .action_plan .move .dot.m_03 { animation-name: action-dot-anim-03; }
.company .mission .action .action_plan .move .dot.m_04 { animation-name: action-dot-anim-04; }
.company .mission .action .action_plan .move .dot.m_05 { animation-name: action-dot-anim-05; }
@keyframes action-dot-anim-01 {
  0% { transform: rotate(-26deg) translateX(180px) }
  20% { transform: rotate(42deg) translateX(180px) }
  40% { transform: rotate(138deg) translateX(180px) }
  60% { transform: rotate(206deg) translateX(180px) }
  80% { transform: rotate(270deg) translateX(180px) }
  100% { transform: rotate(334deg) translateX(180px)}
}
@keyframes action-dot-anim-02 {
  0% { transform: rotate(42deg) translateX(180px) }
  20% { transform: rotate(138deg) translateX(180px) }
  40% { transform: rotate(206deg) translateX(180px) }
  60% { transform: rotate(270deg) translateX(180px) }
  80% { transform: rotate(334deg) translateX(180px)}
  100% { transform: rotate(402deg) translateX(180px) }
}
@keyframes action-dot-anim-03 {
  0% { transform: rotate(138deg) translateX(180px) }
  20% { transform: rotate(206deg) translateX(180px) }
  40% { transform: rotate(270deg) translateX(180px) }
  60% { transform: rotate(334deg) translateX(180px)}
  80% { transform: rotate(402deg) translateX(180px) }
  100% { transform: rotate(498deg) translateX(180px) }
}
@keyframes action-dot-anim-04 {
  0% { transform: rotate(206deg) translateX(180px) }
  20% { transform: rotate(270deg) translateX(180px) }
  40% { transform: rotate(334deg) translateX(180px)}
  60% { transform: rotate(402deg) translateX(180px) }
  80% { transform: rotate(498deg) translateX(180px) }
  100% { transform: rotate(566deg) translateX(180px) }
}
@keyframes action-dot-anim-05 {
  0% { transform: rotate(270deg) translateX(180px) }
  20% { transform: rotate(334deg) translateX(180px)}
  40% { transform: rotate(402deg) translateX(180px) }
  60% { transform: rotate(498deg) translateX(180px) }
  80% { transform: rotate(566deg) translateX(180px) }
  100% { transform: rotate(630deg) translateX(180px) }
}


/* 회사소개 > 연혁 */
.company .history > ul{position:relative;}
.company .history > ul::before{content:'';position:absolute;top: 365px;left:50%;transform:translateX(-50%);height: calc(100% - 365px);width: 1px;background: #eeeeee;}
.company .history > ul::after{content:''; position:absolute; top: 365px; left:50%; transform:translateX(-50%); height: 0; width: 1px; background:var(--color-primary); transition:1s}
.company .history > ul:last-of-type{padding-bottom:0;}
.company .history > ul > li{position:relative; width: calc(50% - 70px); margin-left: auto; padding-bottom:80px;}
.company .history > ul > li::before{content:'';position:absolute;top: 14px;left: -70px;width: 1px;height: 0; background:var(--color-primary);transition:0.5s}
.company .history > ul > li:nth-of-type(2n)::before{left: auto; right: -71px;}
.company .history > ul > li:first-of-type::before{height: 0; top:0;}
.company .history > ul > li.on::before{height: 100%;}
.company .history > ul > li:first-of-type.on::before{height: calc(100% + 84px);}
.company .history > ul > li:last-of-type{padding-bottom:0;}
.company .history > ul > li:last-of-type::before{display:none; }
.company .history > ul > li > span{position:relative; display:inline-block; vertical-align:top; font-weight:800; font-size:36px; color:var(--color-primary); margin-bottom:20px;}
.company .history > ul > li > span::before{content:""; position:absolute; top: 20px; left: -75px; width: 10px; height: 10px;  border-radius:50%; background: var(--color-primary); z-index: 2;}
.company .history > ul > li > span::after{content:""; position:absolute; top: 13px; left: -82px; width: 22px; height: 22px;  border-radius:50%; background: #fff; border:1px solid var(--color-primary); transform:scale(0); transition:0.4s;}
.company .history > ul > li.on > span::after{transform:scale(1);}
.company .history > ul > li > ul > li{padding-left: 40px; position:relative; font-size:20px; color:#444; margin-bottom:16px;}
.company .history > ul > li > ul > li:last-of-type{margin-bottom:0;}
.company .history > ul > li > ul > li > span {position:absolute;top: 0px; left: 0; font-weight:700; color: #222;}
.company .history > ul > li:nth-of-type(2n){margin-left: 0; margin-right: auto; text-align: right;}
.company .history > ul > li:nth-of-type(2n) > span::before{left: auto; right: -75px}
.company .history > ul > li:nth-of-type(2n) > span::after{left: auto; right: -82px;}
.company .history > ul > li:nth-of-type(2n) > ul > li{padding-left: 0; padding-right: 40px; }
.company .history > ul > li:nth-of-type(2n) > ul > li > span{left: auto; right: 0;}


/* 회사소개 > 공장현황 */
.company .factory {overflow-x: hidden; padding-bottom: 0;}
.company .factory > div {padding-bottom: 120px;}
.company .factory h4 { font-size: 36px; line-height: 1.2; margin-bottom: 24px; min-width: max-content;}
.company .factory .info {display: grid; grid-template-columns: 2.2fr 1.5fr 2.2fr; grid-template-rows: 300px 520px; gap: 24px;}
.company .factory .info div {position: relative;}
.company .factory .info div img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.company .factory .info div > span {width: 100%; position: absolute; height: 32px; background-color: var(--color-primary); bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; color: #fff; padding: 0 16px; font-weight: 500; white-space: nowrap;}
.company .factory .info div:nth-child(1) ul li {margin-bottom: 8px; font-size: 18px;}
.company .factory .info div:nth-child(1) ul em {display: inline-block; width: 52px; margin-right: 8px;} 
.company .factory .info div:nth-child(2) > span {width: 100%;} 
.company .factory .info div:nth-child(4) {grid-column: span 3;}
.company .factory .info div:nth-child(4) > span {bottom: initial; top: 0;}
.company .factory .quality div {margin: 0 auto; width: max-content; padding: 40px 0 80px;}
.company .factory .quality div img {height: 560px; aspect-ratio: 16/9; object-fit: cover;}
.company .factory .quality div span {display: block; font-size: 20px; color: var(--color-primary); background-color: #f5f5f5; width: 100%; text-align: center; padding: 12px 0;}
.company .factory .quality div span em {padding-right: 12px;}
.company .factory .facility ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.company .factory .facility ul li {display: flex; align-items: center; justify-content: center; height: 80px; border: 1px solid #ccc;}
.company .factory .process h4 span {font-size: 18px; color: #aaa; font-weight: 400; padding-left: 24px; }
.company .factory .process h4 span b {padding-right: 8px;}
.company .factory .process ul {position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap:32px; margin-top: 80px;}
.company .factory .process ul::after {position: absolute; content: ""; width: 100vw; height: 1px; top: 56px; left: 50%; translate: -50% 0; background: linear-gradient(90deg, #fff 0%, #aaa 16%, #aaa 84%, #fff 100% ); z-index: -1;}
.company .factory .process ul li {display: flex; flex-direction: column; gap: 48px;}
.company .factory .process ul li span {position: relative; width: 100%; font-size: 20px; text-align: center; height: 56px; font-weight: 500; animation-name: text_ani;}
.company .factory .process ul li span::before,
.company .factory .process ul li span::after {content: ""; position: absolute; top: calc(100% - 6px); left: 50%; translate: -50% 0; }
.company .factory .process ul li span::before {width: 1px; height: 80px; border-left: 1px dashed #ccc; z-index: -1;}
.company .factory .process ul li span::after {width: 12px; height: 12px; background-color: #ccc; border-radius: 50px; outline: 1px solid transparent; animation-name: highlight_ani;}
.company .factory .process ul li span,
.company .factory .process ul li span::after { animation-duration: 7.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
.company .factory .process ul li:nth-child(1) span,
.company .factory .process ul li:nth-child(1) span::after {animation-delay: 0s;}
.company .factory .process ul li:nth-child(2) span,
.company .factory .process ul li:nth-child(2) span::after {animation-delay: 1.5s;}
.company .factory .process ul li:nth-child(3) span,
.company .factory .process ul li:nth-child(3) span::after {animation-delay: 3s;}
.company .factory .process ul li:nth-child(4) span,
.company .factory .process ul li:nth-child(4) span::after {animation-delay: 4.5s;}
.company .factory .process ul li:nth-child(5) span,
.company .factory .process ul li:nth-child(5) span::after {animation-delay: 6s;}
.company .factory .process ul li > img {width: 100%; aspect-ratio: 1/1; object-position: center; object-fit: cover;}
.company .factory .process.conc ul::after {display: none;}
.company .factory .process.conc ul li {gap: 0; background-color: #fff; border: 1px solid #00000011;}
.company .factory .process.conc ul li:nth-child(even) {background-color: #4D82A511;}
.company .factory .process.conc ul li span {animation: none; display: flex; justify-content: center; align-items: center; height: 120px;}
.company .factory .process.conc ul li span::after { display: none;}
.company .factory .fixed_bg.rebar {background-image:url(../images/company_factory_rebar_bg.jpg); margin-bottom: 240px; }
.company .factory .fixed_bg.conc {background-image:url(../images/company_factory_conc_bg.jpg); margin-bottom: 0 !important; }
@keyframes text_ani {
  10% {color: var(--color-primary);}
  20% {color: #000;}
}
@keyframes highlight_ani {
  10% {background-color: var(--color-primary); outline-offset: 6px; outline-color: var(--color-primary); color: var(--color-primary);}
  20% {background-color: #ccc; outline-offset: 6px; outline-color: transparent; color: #000;}
}

/* > 오시는길 contact */
.company .contact > div {position: relative;}
.company .contact .map_box {width: 100%; height: 64vh; overflow: hidden; position: relative;}
.company .contact .map_box iframe {width: 100%; height: 100%; border: none;}
.company .contact .map_info {position: absolute; top: -32px; right: calc((100% - 1440px) / 2); background-color: #fafafa; width: 480px; height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-top: 4px solid var(--color-primary) ; font-size: 20px; gap: 24px; box-shadow: 0 8px 16px #00000033;}
.company .contact .map_info .logo {width: 48%; text-align: center;}
.company .contact .map_info .logo img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.company .contact .map_info .text {font-size: 20px; line-height: 32px; display: flex; flex-direction: column; justify-content: center; align-items: center; letter-spacing: 0; text-align: center}
.company .contact .map_info .text .addr {display:block; margin-bottom: 16px;}
.company .contact .map_info .text p .bold {font-weight: 700; width: 50px; display: inline-block;}


/* --- 제품소개 business --- */
/* > 전체 all */
.business .sub_banner_wrap p .brk {display: none;}
.business .sub_tab_b {display: none;}
.business .all {position: relative; padding-bottom: 160px; overflow: hidden;}
.business .all::before {position: absolute; content: ""; width: 100%; height: 100%; top: 560px; left: 0; background: url(../images/line.svg) no-repeat; background-size: 100%; z-index: -1;}
.business .all .brk {display: none;}
.business .all .con_text {text-align: center;}
.business .all .con_text h5 {font-size: 24px; font-weight: initial; letter-spacing: -0.05em;}
.business .all .con_text ul {display: flex; margin: 48px auto 0; justify-content: center; }
.business .all .con_text ul li {width: 24%; height: 160px; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(180deg, #B3D0E033 0%, #fff 100%); border-radius: 8px; color: var(--color-primary); font-size: 18px; letter-spacing: -0.04em;}
.business .all .con_text ul li:nth-child(2) {background-image: linear-gradient(0deg, #B3D0E033 0%, transparent 100%);}
.business .all .list {margin: 200px auto 0; position: relative;}
.business .all .list:after {position: absolute;  width: fit-content; height: fit-content; font-size: 100px; line-height: 100%; font-weight: 900; color: #f3f3f3; z-index: -1; letter-spacing: -0.06em;}
.business .all .list h4 {font-size: 32px; font-weight: 700; letter-spacing: -0.05em; margin-bottom: 24px; }
.business .all .list ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.business .all .list ul li {display: flex; flex-direction: column; box-shadow: 0 4px 4px #00000011; border: 1px solid #00000011; border-radius: 8px; overflow: hidden; position: relative;}
.business .all .list ul li img {aspect-ratio: 16/9; object-fit: cover; object-position: center; background-color: #fff;}
.business .all .list ul li p {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: flex-end; gap: 8px; padding: 16px 24px; background-image: linear-gradient(180deg, #00000001 70%, #00000022 100%);}
.business .all .list ul li p span {color: #000; font-size: 24px; font-weight: 700; _filter: drop-shadow(0 0 2px #000);}
.business .all .list ul li p small {font-size: 0.8em; font-weight: initial;}
.business .all .list ul li::before {content:''; position:absolute; top:6px; left:calc(100% - 60px); margin-left:6px; display:block; background:#fff url(../images/ico_arr.svg) center no-repeat; width:40px; height:40px; opacity:0; z-index:10;}
.business .all .list ul li:hover::before {margin-left:14px; transition:.2s; opacity:1;}
.business .all .list.deck::after {content: "Deck & Safety Line"; top: -40px; right: -100px;}
.business .all .list.pc::after {content: "PC \A Bridge Line"; bottom: 0px; right: -50px; white-space: pre;}

/* > 상세페이지 detail */
.business .detail {background: url(../images/business_bg.png), linear-gradient(180deg, #E5F0F4 0, transparent 800px); background-repeat: no-repeat; background-size: contain; background-position: top center; letter-spacing: -0.04em; font-size: 22px; line-height: 160%; padding-bottom: 0; max-width: 1920px; margin: 0 auto;}
.business .detail h3 {line-height: 100%; text-align: center;}
.business .detail h3 span {font-size: 22px; font-weight: 400; color: #777; display: flex; justify-content: center; align-items: center; background-image: linear-gradient(90deg, transparent 0%, #fff 25%, #fff 75%, transparent 100%); width: max-content; margin: 16px auto 0; padding:  0 40px; letter-spacing: 0;}
.business .detail h4 {font-size: 38px; font-weight: initial; text-align: center; line-height: 1.2;}
.business .detail > div {padding: 160px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 80px; margin: 0 auto;}
.business .detail > div::after {position: absolute;  width: fit-content; height: fit-content; font-size: 160px; line-height: 100%; font-weight: 900; color: #f7f7f7; z-index: -1; letter-spacing: -0.06em;}
.business .detail .top {margin: 0 auto; padding: 40px 0 80px; gap: 0;}
.business .detail .top > img {width: 92%;  max-width: 1000px; object-fit: contain; object-position: center;}
.business .detail .top .info {display: grid; grid-auto-flow: column; gap: 16px; justify-content: center; text-align: center; width: 96%;}
.business .detail .top .info li {padding: 8px 24px; border-radius: 50px; border: 4px solid #1D428955; background-image: linear-gradient(180deg, #F1F6FF 0%, #fff 80%); color: var(--color-primary); font-weight: 700;}
.business .detail .overview {padding-bottom: 240px; position: relative;}
.business .detail .overview::after {content: "Overview"; top: 140px; left: 24%; translate:-50% 0;}
.business .detail .overview ul {padding: 40px 120px; display: flex; flex-direction: column; gap: 16px; background-image: linear-gradient(180deg, #E9EDF4 0%, #fff 100%); position: relative; width: fit-content; max-width: 1440px;}
.business .detail .overview ul::after {padding: 2px; background: linear-gradient(50deg, var(--color-primary) 0%, #00000005 16px, #00000005 calc(100% - 16px), var(--color-primary) 100%); }
.business .detail .overview ul li {list-style:initial; }
.business .detail .overview ul li.line {list-style: none; text-indent: -24px; width: calc(100% + 24px); height: 1px; background-color: #00000011; translate: -24px 0; margin: 24px 0;}
.business .detail .overview ul li.spec {list-style: none; position: relative; display: flex; gap: 16px; transform: translateX(-24px); width: calc(100% + 24px);}
.business .detail .overview ul li.spec .tit {padding: 2px 16px; min-width: max-content; white-space: nowrap; height: max-content; background-image: linear-gradient(180deg, #fff 0%, #eee 100%); border: 1px solid #00000033; border-radius: 4px; font-size: 0.8em; font-weight: 500; transform: translateY(-3px);}
.business .detail .adv {background-image: linear-gradient(180deg, #F1F5F8 0%, transparent 100%); position: relative; overflow: hidden;}
.business .detail .adv::after { content: "Advantages"; bottom: 0; right: 40px;}
.business .detail .adv ul {display: flex; flex-direction: column; gap: 80px; margin: 0 auto; width: 100%;}
.business .detail .adv ul > li {display: grid; grid-template-columns: 1fr 2fr; border-radius: 8px; min-height: 360px; height: 360px; position: relative;}
.business .detail .adv ul > li p {display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 40px; background-image: linear-gradient(142deg, #fff 0%, transparent 50%); height: 100%; border-radius: inherit; border-radius: 8px 0 0 0;}
.business .detail .adv ul > li p::after {padding: 1px 0 0 1px; background-image: linear-gradient(142deg, #1D428955 0%, transparent 50%);}
.business .detail .adv ul > li p span {font-size: 28px; font-weight: 700; position: relative; color: var(--color-primary); padding-left: 28px;}
.business .detail .adv ul > li p span::before {position: absolute; top: 8px; left: 0; content: ""; width: 22px; aspect-ratio: 1/1; background-image: url(../images/li_style.svg); background-position: center; background-size: contain; background-repeat: no-repeat; margin-right: 8px;}
.business .detail .adv ul > li:nth-child(even) {grid-template-columns: 2fr 1fr;}
.business .detail .adv ul > li:nth-child(even) p {order: 1; border-radius: 0 8px 0 0; background-image: linear-gradient(-142deg, #fff 0%, transparent 50%); }
.business .detail .adv ul > li:nth-child(even) p::after {padding: 1px 1px 0 0; background: linear-gradient(-142deg, #1D428955 0%, transparent 50%);}
.business .detail .adv ul > li div {display: flex; gap: 8px; overflow: hidden; height: 100%;}
.business .detail .adv ul > li div img {width: 100%; min-width: calc(50% - 4px); height: 100%; object-fit: cover; object-position: center; border-radius: 8px; overflow: hidden;}
.business .detail .adv ul > li div img.monitor {position: absolute; bottom: -32px; right: -32px; width: initial; min-width: initial; height: 180px;}
.business .detail .adv ul > li:nth-child(even) div img.monitor {left: -32px; right: initial;}
.business .detail .adv ul > li.steam {grid-template-columns: 1fr !important; height: initial; min-height: initial;}
.business .detail .adv ul > li.steam p {background-image: linear-gradient(188deg, #fff 0%, transparent 50%);}
.business .detail .adv ul > li.steam p::after {padding: 1px 1px 0 0; background: linear-gradient(188deg, #1D428955 0%, transparent 50%);}
.business .detail .adv ul > li.steam.odd p {background-image: linear-gradient(-188deg, #fff 0%, transparent 50%);}
.business .detail .adv ul > li.steam.odd p::after {padding: 1px 0 0 1px; background: linear-gradient(-188deg, #1D428955 0%, transparent 50%);}
.business .detail .tech {padding: 160px 8%; background-image:linear-gradient(180deg, #FAFBFC 0%, transparent 120px), url(../images/business_tech_bg.png); background-position: center bottom; background-size: cover; background-repeat: no-repeat; border-top: 1px solid #eee;}
.business .detail .tech ul {display: grid; grid-template-columns: 32% 1fr; gap: 80px; width: 100%; align-items: center; padding: 120px 0;}
.business .detail .tech ul .con_text {display: flex; flex-direction: column; gap: 24px; }
.business .detail .tech ul .con_text .tit {font-size: 48px; color: var(--color-primary); line-height: 130%; white-space: nowrap;}
.business .detail .tech ul .imgs_wrap {width: 100%; height: 100%; position: relative;}
.business .detail .tech ul .imgs_wrap img {width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid #000000aa; box-shadow: 8px 12px 32px #00000055;}
.business .detail .tech ul:has(.imgs_wrap.num1) {padding: 0;}
.business .detail .tech ul .imgs_wrap.num1 {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; font-size: 18px; text-align: center;}
.business .detail .tech ul .imgs_wrap.num1 img {width: 80%; max-width: 800px; border: none; box-shadow: initial;}
.business .detail .tech ul .imgs_wrap.num2 img {width: 56%; position: absolute; translate: 0 -50%;}
.business .detail .tech ul .imgs_wrap.num2 img:nth-child(1) {top: 80%; left: 0%;}
.business .detail .tech ul .imgs_wrap.num2 img:nth-child(2) {top: 20%; right: 0%;}
.business .detail .tech ul .imgs_wrap.num3 {padding: 80px 0 120px;}
.business .detail .tech ul .imgs_wrap.num3 img {width: 48%; position: absolute; translate: 0% -50%;}
.business .detail .tech ul .imgs_wrap.num3 img:nth-child(1) {top: 0%; left: 4%;;}
.business .detail .tech ul .imgs_wrap.num3 img:nth-child(2) {top: 50%; right: 4%; z-index: 1;}
.business .detail .tech ul .imgs_wrap.num3 img:nth-child(3) {top: 100%; left: 8%; z-index: 2;}
.business .detail.deck .adv ul > li:nth-child(1) img {object-fit: contain;}
.business .detail.deck .adv ul > li > div {position: relative; }
.business .detail.deck .adv ul > li > div .tit {position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; width: calc(50% - 4px); height: 40px; background-color: #00000099; border-radius: 0 0 8px 8px; color: #fff;}
.business .detail.deck .adv ul > li > div .tit.psc {left: 0;}
.business .detail.deck .adv ul > li > div .tit.rc {right: 0;}
.business .detail.deck .prc {width: 100%; overflow: hidden; background-image: linear-gradient(180deg, #fafafa 0%, transparent 50%); border-top: 1px solid #0000000f;}
.business .detail.deck .prc ul {position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap:32px;}
.business .detail.deck .prc ul::after {position: absolute; content: ""; width: 100vw; height: 1px; top: 56px; left: 50%; translate: -50% 0; background: linear-gradient(90deg, #fff 0%, #aaa 16%, #aaa 84%, #fff 100% ); z-index: -1;}
.business .detail.deck .prc ul li {display: flex; flex-direction: column; gap: 48px;}
.business .detail.deck .prc ul li span {position: relative; width: 100%; font-size: 20px; text-align: center; height: 56px; font-weight: 500; animation-name: text_ani;}
.business .detail.deck .prc ul li span::before,
.business .detail.deck .prc ul li span::after {content: ""; position: absolute; top: calc(100% - 6px); left: 50%; translate: -50% 0; }
.business .detail.deck .prc ul li span::before {width: 1px; height: 80px; border-left: 1px dashed #ccc; z-index: -1;}
.business .detail.deck .prc ul li span::after {width: 12px; height: 12px; background-color: #ccc; border-radius: 50px; outline: 1px solid transparent; animation-name: highlight_ani;}
.business .detail.deck .prc ul li span,
.business .detail.deck .prc ul li span::after { animation-duration: 6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
.business .detail.deck .prc ul li:nth-child(1) span,
.business .detail.deck .prc ul li:nth-child(1) span::after {animation-delay: 0s;}
.business .detail.deck .prc ul li:nth-child(2) span,
.business .detail.deck .prc ul li:nth-child(2) span::after {animation-delay: 1.5s;}
.business .detail.deck .prc ul li:nth-child(3) span,
.business .detail.deck .prc ul li:nth-child(3) span::after {animation-delay: 3s;}
.business .detail.deck .prc ul li:nth-child(4) span,
.business .detail.deck .prc ul li:nth-child(4) span::after {animation-delay: 4.5s;}
.business .detail.deck .prc ul li > img {width: 100%; aspect-ratio: 1/1; object-position: center; object-fit: cover;}
.business .detail.deck .tech ul .imgs_wrap.num1 {gap: 0;}
.business .detail.deck .tech ul .imgs_wrap.num1 img {object-fit: contain; border: 1px solid #00000011; border-bottom: 0; background-color: #fff; border-radius: 8px 8px 0 0;}
.business .detail.deck .tech ul .imgs_wrap.num1 span {width: 80%; max-width: 800px; padding: 12px; background-color: #F1F6FF; border-radius: 0 0 8px 8px; font-size: 22px; font-weight: 700; color: var(--color-primary); border: 1px solid #00000011;}
.business .detail.grb .adv ul > li:nth-child(1) img {object-fit: contain;}
.business .detail.nod .overview .imgs_wrap {display: grid; grid-template-columns: repeat(3, 1fr); height: 240px; gap: 16px;}
.business .detail.nod .overview .imgs_wrap img {width: 100%; height: 100%; object-fit: cover; object-position: center; overflow: hidden;}
.business .detail.nod .adv ul > li:nth-child(1) div {position: relative;}
.business .detail.nod .adv ul > li:nth-child(1) div img {position: absolute; height: 200px; width: initial; object-fit: contain; object-position: center; border-radius: 0;}
.business .detail.nod .adv ul > li:nth-child(1) div img:nth-child(1) {top: 0; left: 0;}
.business .detail.nod .adv ul > li:nth-child(1) div img:nth-child(2) {bottom: 0; right: 0;}
.business .detail.nod .tech ul .imgs_wrap.num1 {align-items: start;}
.business .detail.nod .tech ul .imgs_wrap.num1 img {width: 70%;}
.business .detail.nod .tech ul .imgs_wrap.num1 img.monitor {width: 60%; position: absolute;  bottom: -80px; right: 0px; object-fit: contain; object-position: right center;}
.business .detail.beam .top {display: grid; grid-template-rows: 360px auto; grid-auto-columns: 1fr; grid-auto-flow: column; justify-items: center; gap: 32px 40px; padding-bottom: 160px;}
.business .detail.beam .top > img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.business .detail.beam .top p {text-align: center; padding: 8px 40px; border-radius: 50px; width: max-content; font-weight: 700; line-height: 1.4; color: var(--color-primary); background-image: linear-gradient(180deg, #F1F6FF 0%, #fff 80%); border: 4px solid #1D428955;}
.business .detail.rebar .process {display: flex; flex-direction: column; align-items: center; gap: 80px; background-image:linear-gradient(180deg, #F1F5F8 0%, transparent 240px);}
.business .detail.rebar .process > p {text-align: center; font-size: 24px; line-height: 1.4;}
.business .detail.rebar .process .mini {display: grid; grid-template-columns: repeat(6, 1fr); width: 80%; background-color: #fff; border-radius: 100px; box-shadow: 0 0 12px #00000022;}
.business .detail.rebar .process .mini li {display: flex; flex-direction: column; _justify-content: center; align-items: center; gap: 8px; color: var(--color-primary); line-height: 1.2; padding: 16px 0; font-size: 18px; position: relative; text-align: center;}
.business .detail.rebar .process .mini li::before{position: absolute; content: ""; width: 24px; height: 100%; top: 0; right: 0px; background-image: url(../images/business_rebar_mini_arr.svg); background-repeat: no-repeat; background-size: cover; background-position: center right; filter: drop-shadow(1px 0 0px #00000011); mix-blend-mode: darken;}
.business .detail.rebar .process .mini li:last-child::before {display: none;}
.business .detail.rebar .process .steps_wrap {position: relative;}
.business .detail.rebar .process .steps_wrap .line {position: absolute; top: 120px; left: 50%; translate: -50% 0; width: 2px; height: 100%; background-image: linear-gradient(180deg, var(--color-primary) calc(100% - 120px), transparent 100%);}
.business .detail.rebar .process .steps_wrap .steps_list {display: flex; flex-direction: column; gap: 160px; width: 100%; margin: 120px auto 0;}
.business .detail.rebar .process .steps_wrap .steps_list > li {width: 100%; display: grid; grid-template-columns: 1fr 40px 1fr; grid-template-areas: "img cir text"; gap: 24px;}
.business .detail.rebar .process .steps_wrap .steps_list > li > img {height: 200px; aspect-ratio: 16/9; border-radius: 4px; border: 1px solid #00000033; grid-area: img; justify-self: end; object-fit: cover; object-position: center; }
.business .detail.rebar .process .steps_wrap .steps_list > li > .cir {grid-area: cir; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-primary); margin-top: 92px; outline: 1px solid var(--color-primary); outline-offset: 6px; }
.business .detail.rebar .process .steps_wrap .steps_list > li > .text {grid-area: text; margin: 0;}
.business .detail.rebar .process .steps_wrap .steps_list > li > .text p {display: flex; flex-direction: column; font-size: 32px; gap: 4px; color: var(--color-primary); margin-bottom: 32px;}
.business .detail.rebar .process .steps_wrap .steps_list > li > .text ul li {display: flex; flex-direction: column; gap: 4px; line-height: 140%; margin-bottom: 12px; color: #333;}
.business .detail.rebar .process .steps_wrap .steps_list > li:nth-child(even) {grid-template-areas: "text cir img";}
.business .detail.rebar .process .steps_wrap .steps_list > li:nth-child(even) > img {justify-self: initial;}
.business .detail.rebar .process .steps_wrap .steps_list > li:nth-child(even) > .text {justify-self: end; text-align: right;}


/* --- 연구개발 technology --- */
/* > 기술개발센터 center */
.technology .sub_tab ul {width: 50%;}
.technology .center h3 br {display: none;}
.technology .center h4{ font-weight: 400; color: #222; font-size: 32px; line-height: 1.2; padding-bottom: 12px; letter-spacing:-1px;}
.technology .center .intro { position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; text-align: center; padding: 60px 3% 20px; max-width: 1440px; margin: 0 auto 220px;}
.technology .center .intro .quantum { display: flex; margin-top: 160px; justify-content: center; animation: float 1.7s ease-in-out infinite; }
.technology .center .intro .quantum::after { content: ""; position: absolute; width: 378px; height: 434px; right: -194px; top: -5px; background: url(../images/atom_line.svg) 0 0 / contain no-repeat; background-size:100%; z-index: 9; }
.technology .center .intro .quantum img.atom_logo { position: absolute; width: 500px; top: 26px; left: -238px; z-index: 1; animation: rotation 20s infinite; transform-origin: center; animation-timing-function: cubic-bezier(0.4, 0.1, 0.4, 1); }
.technology .center .intro .quantum img.atom_all { position: absolute; height: 400px; width: auto; opacity: 0.7; }
.technology .center .intro .quantum .dot_glow { display: flex; justify-content: center; align-items: center; width: 10px; height: 10px; background-color: #eee; border-radius: 50%; position: absolute; z-index: 10; }
.technology .center .intro .quantum .dot_glow:before { content: ""; width: inherit; height: inherit; border: 5px solid #eee; border-radius: inherit; position: absolute; z-index: -10; opacity: 0; animation: 2s expand cubic-bezier(0.29, 0, 0, 1) infinite; }
.technology .center .intro .quantum .dot_glow.hanmac { left: -52px; top: 28px; }
.technology .center .intro .quantum .dot_glow.hanmac:before { animation-delay: 1s; }
.technology .center .intro .quantum .dot_glow.ptc { right: -151px; top: 75px; }
.technology .center .intro .quantum .dot_glow.ptc:before { animation-delay: 2s; }
.technology .center .intro .quantum .dot_glow.saman { right: -180px; top: 251px; }
.technology .center .intro .quantum .dot_glow.saman:before { animation-delay: 3s; }
.technology .center .intro .quantum .dot_glow.jangheon { left: -134px; top: 318px; }
.technology .center .intro .quantum .dot_glow.jangheon:before { animation-delay: 4s; }
.technology .center .intro .quantum .dot_glow.halla { right: 173px; top: 120px; }
.technology .center .intro .quantum .dot_glow.halla:before { animation-delay: 5s; }
@keyframes float { 
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
@keyframes expand {
  1% { width: 0; height: 0; opacity: 1; }
  100% { width: 750%; height: 750%; opacity: 0; border-color: #fff; background-color: none; border-width: 2px; }
}
.technology .center .bg_city { position: relative; background: url(../images/bg_city.jpg) no-repeat center; width: 100%; height: 360px; background-size: cover; background-attachment: fixed; margin-top: 226px; z-index: -2; }
.technology .center .bg_city p.bg_txt { position: absolute; font-size: 80px; font-weight: 800; color: #fff; letter-spacing: -0.05em; line-height: 1; width: 100%; text-align: center; left: 50%; bottom: -6px; transform: translate(-50%, 0); opacity: 0.2; }
.technology .center .bg_city p.bg_txt br {display: none;}
.technology .center .eng_swdev { display: flex; position: relative; flex-direction: column; justify-content: flex-start; text-align: left; padding: 80px 3%; max-width: 1440px; margin: 0 auto;}
.technology .center .eng_swdev .txt_wrap ul.desc_wrap { position: relative; color:#666; }
.technology .center .eng_swdev .txt_wrap ul.desc_wrap li { padding-left: 22px; }
.technology .center .eng_swdev .txt_wrap ul.desc_wrap li::before { content: "-"; position: absolute; left: 0; width: 20px; text-align: center; }.technology .center .eng_swdev .sw_3d {justify-content: center; width: 100%; margin: 40px 0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.technology .center .eng_swdev .sw_3d .circle-container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; height: 460px}
.technology .center .eng_swdev .sw_3d .circle-container > * {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;}
.technology .center .eng_swdev .sw_3d .circle_line {width:85%; height:85%; border: 1.5px dashed #A44D4D33;}
.technology .center .eng_swdev .sw_3d .circle_pink {width: 76%; height: 76%; margin: 0 auto; background: linear-gradient(rgba(237, 189, 189, 0.1), rgba(103, 18, 18, 0.1)); border: 1px solid #A44D4D;}
.technology .center .eng_swdev .sw_3d .circle_blue {width:55%; height: 55%; background: linear-gradient(#0C3192, #092775); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.technology .center .eng_swdev .sw_3d .dot_wrap {width: 100%; height: 100%; }
.technology .center .eng_swdev .sw_3d .dot_wrap.move {animation-duration: 12s; animation-iteration-count: infinite; animation-name: dot-rotate; top: 0; left: 0; opacity: 0.3;}
.technology .center .eng_swdev .sw_3d .dot_wrap .dot {position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #9B1A1A;}
.technology .center .eng_swdev .sw_3d .dot_wrap .dot::before {position: absolute; content: ""; width: 1px; height: 48px; border-left: 1.5px dashed #9B1A1A;  bottom: 0; left: 50%; }
.technology .center .eng_swdev .sw_3d .dot_wrap.move .dot::before {display: none;}
.technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(1){top: 50px; left: 50%; transform: translateX(-50%);}
.technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(2) {top: 50%; right: 50px; transform: translateY(-50%) rotate(90deg);}
.technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(3) {bottom: 50px; left: 50%; transform: translateX(-50%) rotate(180deg);}
.technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(4){top: 50%; left: 50px; transform: translateY(-50%) rotate(-90deg);}
.technology .center .eng_swdev .sw_3d .circle_txt {color:#fff; font-size: 24px; font-weight: 500; text-align: center; line-height: 1.3; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
@keyframes dot-rotate {
  0% {transform: rotate(0);}
  25% {transform: rotate(90deg);}
  50% {transform: rotate(180deg);}
  75% {transform: rotate(270deg);}
  100% {transform: rotate(360deg);}
}
.technology .center .eng_swdev .sw_3d .fix_wrap {width: 100%; max-width: 780px; height: 680px; position: relative; font-size: 14px; color:#888; line-height: 1.2;}
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont {position: absolute; text-align: center; }
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont img {width: 42px;}
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(1) {top: 0; left: 50%; transform: translateX(-50%);}
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(2) {top: 50%; right: 0; transform: translateY(-50%); text-align: left;}
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(3) {bottom: 0; left: 50%; transform: translateX(-50%);}
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(4) {top: 50%; left: 0; transform: translateY(-50%); text-align: right;}
.technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont em { font-size: 18px; color:#000; line-height: 2;}
.technology .center .eng_swdev .rec { display: grid; grid-template-columns: repeat(2, 1fr); position: relative; width: 100%; max-width: 1440px; margin-top: 40px; gap: 16px;}
.technology .center .eng_swdev .rec li { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 342px; color: #fff; background-size: cover; background-position: center; }
.technology .center .eng_swdev .rec_01 { background: url(../images/tech_rec_01.png) 0 0 / contain no-repeat; }
.technology .center .eng_swdev .rec_02 { background: url(../images/tech_rec_02.png) 0 0 / contain no-repeat; }
.technology .center .eng_swdev .rec_03 { background: url(../images/tech_rec_03.png) 0 0 / contain no-repeat; }
.technology .center .eng_swdev .rec_04 { background: url(../images/tech_rec_04.png) 0 0 / contain no-repeat; }
.technology .center .eng_swdev .rec p { padding: 8px 0; font-size: 14px; text-align: left; background-color: #000; text-align: center; }
hr { display: block; border-top: 1px solid #efefef; }
.technology .center .smart_build { display: flex; position: relative; flex-direction: column; justify-content: flex-start; text-align: left; padding: 80px 3%; max-width: 1440px; margin: 0 auto;}
.technology .center .smart_build .smart_img {display: grid; grid-template-rows: repeat(3, 240px); grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; margin: 40px 0;}
.technology .center .smart_build .smart_img > div {position: relative;}
.technology .center .smart_build .smart_img > div br {display: none;}
.technology .center .smart_build .smart_img > div:nth-child(1) {grid-column: 1 / span 2; grid-row: 1 / span 3; overflow: hidden; position: relative;}
.technology .center .smart_build .smart_img  .pic_big {width: 950px; height: 100%; background-image: url('../images/tech_smart_01.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.technology .center .smart_build .smart_img > div .pic_num {position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; background-color: var(--color-secondary); color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 100%; font-size: 14px; font-weight: 700; line-height: 60px;}
.technology .center .smart_build .smart_img  .pic_big .pic_num {width: 32px; height: 32px; font-size: 20px;}
.technology .center .smart_build .smart_img  .pic_big .pic_num:nth-child(1) {top: 24%; left: 28%;}
.technology .center .smart_build .smart_img  .pic_big .pic_num:nth-child(2) {top: 45%; left: 60%;}
.technology .center .smart_build .smart_img  .pic_big .pic_num:nth-child(3) {top: 80%; left: 52%;}
.technology .center .smart_build .smart_img > div .pic_info {position: absolute; bottom: 0; left: 0; background-color: #000; width: 100%; padding: 8px 0; text-align: center; color: #fff; font-size: 14px;}
.technology .center .smart_build .smart_img > div:nth-child(1) .pic_info {background-color: #000}
.technology .center .smart_build .smart_img > div img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.technology .center .smart_build .feature_list {display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 16px;}
.technology .center .smart_build .feature_list li { width: 100%; border-radius: 6px; padding: 30px 0; background-color: #f1f1f1; text-align: center; }
.technology .center .smart_build .feature_list p { font-size: 16px; color: #6B6B6B; }
.technology .center .smart_build .feature_list em { font-size: 20px; color: #1562BE; }

/* > R&D rnd */
.technology .rnd {padding-bottom: 240px; background-image: url(../images/rnd_bg.svg); background-repeat: no-repeat; background-position: center bottom; background-size: contain;}
.technology .rnd ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 16px; margin: 0 auto;}
.technology .rnd ul li {display: flex; flex-direction: column; align-items: center; border-radius: 8px; overflow: hidden; border: 1px solid #00000033;}
.technology .rnd ul li img {width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center;}
.technology .rnd ul li p {display: flex; flex-direction: column; justify-content: center; gap: 8px; align-items: center; width: 100%; height: 100%; padding: 20px 16px;  font-weight: 700; font-size: 22px; text-align: center; letter-spacing: -0.04em;}
.technology .rnd ul li p {background-image: linear-gradient(180deg, #CDDEE8 0%, #FBFDFF 35%, #fff 70%, #E5F4FF 100%);}
.technology .rnd ul li:nth-child(4n + 2) p,
.technology .rnd ul li:nth-child(4n + 3) p {background-image: linear-gradient(180deg, #efefef 0%, #fcfcfc 35%, #fff 70%, #eee 100%);}
.technology .rnd ul li p span {color: #555; font-weight: initial; font-size: 18px;}

/* > 지식재산권 ip */
.technology .ip {margin: 0 auto;}
.technology .ip .total p { font-size: 16px; }
.technology .ip .total span { color:var(--color-primary); font-weight: 600; }
.technology .ip ul {display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; padding: 24px 0 240px;}
.technology .ip ul li {display: flex; flex-direction: column; justify-content: flex-start; border:1px solid #ccc; padding:24px; gap: 16px}
.technology .ip ul li .thumbnail {width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center; outline: 1px solid #eee;}
.technology .ip ul li .desc_data {gap: 16px; color:#aaa; font-weight: 600; }
.technology .ip ul li .desc_data em {padding-right: 16px;}
.technology .ip ul li .desc_tit { color:#000; font-size: 18px; font-weight:600; padding:10px 0; line-height: 1.2; }


/* --- 홍보센터 pr --- */
/* > CI ci */
.pr .sub_tab ul {width: 50%;}
.pr .ci > div {max-width: 1200px; display: flex; flex-direction: column; gap: 120px;}
.pr .ci > div > div {display: flex; justify-content: space-between;}
.pr .ci .tit {width: 200px; display: grid; grid-auto-rows: max-content;}
.pr .ci .tit span {font-weight: 700; color: var(--color-primary);}
.pr .ci .tit h4 {font-size:32px; margin-bottom: 24px;}
.pr .ci > div > div > ul {width: 100%; max-width: 960px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; gap: 24px;}
.pr .ci > div > div > ul li {display: flex; flex-direction: column; border-radius: 8px; width:100%; height: 100%; padding: 24px; overflow: hidden; position: relative;}
.pr .ci .signature .tit .btn_wrap .btn { padding: 0 16px; background-color: var(--color-primary); color: #fff;}
.pr .ci .signature .tit .btn_wrap .btn::after {background-image:url(../images/arrow_w.svg);}
.pr .ci .signature .tit .btn_wrap .btn:hover {background-color: #142E60;}
.pr .ci .signature ul li {justify-content: center; align-items: center; padding: 40px; border:1px solid #00000005; border-radius:8px; background-size: 24px 24px; background-position: -2px -2px; background-image:linear-gradient(90deg, #00000005 1px, transparent 1px), linear-gradient(#00000005 1px, transparent 1px); background-color: #004CBF05;}
.pr .ci .signature ul li span {position: absolute; top: 16px; left: 16px; font-size: 16px; font-weight: 500; color: #555;}
.pr .ci .signature ul li img {width: 100%;} 
.pr .ci .color ul li {flex-direction: row; align-content: end; align-items: end; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: #fff;}
.pr .ci .color ul li.blue {background-color: var(--color-primary);}
.pr .ci .color ul li.red {background-color: var(--color-secondary);}
.pr .ci .color ul li * {opacity: 0.8;}
.pr .ci .color ul li h5 {font-size: 24px; opacity: 1; width: 50%;}

/* > 브로슈어 brochure */
.pr .brochure {background-image: url(../images/pr_brochure_bg.jpg);background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
.pr .brochure > div {display: flex; justify-content: space-between; align-items: center; margin-top: 120px; }
.pr .brochure > div img {width: 46%;}
.pr .brochure > div .txt {width: 46%; position: relative;}
.pr .brochure > div .txt::after {content: 'Brochure'; position: absolute; top: -100px; right: 0; width: fit-content; height: fit-content; font-size: 120px; line-height: 100%; font-weight: 900; color: #0000000a; z-index: -1; letter-spacing: -0.06em;}
.pr .brochure > div .txt p {font-size: 24px; _font-weight: 300; line-height: 1.6; letter-spacing: -0.05em; margin-bottom: 40px;}
.pr .brochure > div .txt ul {display: flex; gap: 16px;}
.pr .brochure > div .txt ul li.btn_wrap .btn {padding: 0 32px; font-size: 18px; height: 64px;}
.pr .brochure > div .txt ul li.view .btn {background-color: var(--color-primary); padding: 0 64px; color: #fff;}
.pr .brochure > div .txt ul li.view .btn::after {background-image:url(../images/view_w.svg); width:16px;}
.pr .brochure > div .txt ul li.view .btn:hover {background-color: #142E60;}

/* 인재채용 .recruit */
.recruit .sub_contents {background-image: url(../images/recruit_bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: 100%;}
.recruit .sub_contents > div {margin-bottom: 80px;}
.recruit h4 {font-size: 32px;}
.recruit .values {padding:40px 100px 80px;}
.recruit .values h4 {text-align: center;}
.recruit .values ul {display: flex; gap:32px; justify-content: center; width: 100%; padding-top: 80px;}
.recruit .values ul li {text-align: center; font-size: 20px; display: flex; flex-direction: column; gap: 48px; position: relative; width:100%;}
.recruit .values ul li:nth-child(1) {color:#007CC8;}
.recruit .values ul li:nth-child(2) {color:#FCA60D;}
.recruit .values ul li:nth-child(3) {color:#26AB1F;}
.recruit .values ul li .cir {width: 100%; height: 120px; background-image: radial-gradient(85% 85% at 30% 20%, #FFF 60%, #E6E6E6 100%);; border-radius: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; position: relative; font-size: 16px; z-index: 1; outline: 1px dashed; outline-offset: 16px;}
.recruit .values ul li .cir::before {position: absolute; content: ""; top: 50%; left: 50%; width: 100%; height: 100%; translate: -50% -50%; border-radius: inherit; mask-image: linear-gradient(135deg, #ffffff55 20%, #fff 100%); border: 4px solid;}
.recruit .values ul li .cir em {font-size: 32px; line-height: 1.2;}
.recruit .values ul li span {color: #555 !important;}
.recruit .values ul li .line {width: calc(100% + 32px); height: 120px; position: absolute; top: 0; left: -16px; z-index: 2;}
.recruit .values ul li .line::after,
.recruit .values ul li .line::before {position: absolute; content: "●"; top: 50%;  translate: 0 -50%; font-size: 8px; line-height: 0;}
.recruit .values ul li:nth-child(1) .line::after {right: calc(100% - 4px);}
.recruit .values ul li:nth-child(2) .line::after {right: -4px;} 
.recruit .values ul li:nth-child(2) .line::before {left: -4px; color: #3BC4CE;} 
.recruit .values ul li:nth-child(3) .line::after {left: calc(100% - 4px);} 
.recruit .values ul li:nth-child(1) .line::before,
.recruit .values ul li:nth-child(3) .line::before {content: ""; width: 80px; height: 1px; border-top: 1px dashed; }
.recruit .values ul li:nth-child(1) .line::before {right: calc(100% - 4px); mask-image: linear-gradient(90deg, transparent 0%, #000 100%);}
.recruit .values ul li:nth-child(3) .line::before {left: calc(100% - 4px); mask-image: linear-gradient(90deg, #000 0%, transparent 100%);}
.recruit .details {padding-bottom: 40px; background-image: url(../images/recruit_process_bottom_bg.png); background-position: center bottom; background-repeat: no-repeat; background-size: 80%;}
.recruit .details .h4_wrap {display:flex; justify-content:space-between; align-items:center; width:100%; height: 80px; border-bottom: 1px solid #000; }
.recruit .details > ul {display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #000; _background-image: linear-gradient(180deg, #fff 0%, transparent 50%);}
.recruit .details > ul > li {padding: 48px 0; display: flex; flex-direction: column; gap: 24px; align-items: center; font-size: 20px; color: #555;}
.recruit .details > ul > li:nth-child(-n + 2) {border-right: 1px solid #ccc;}
.recruit .details > ul > li h5 {font-size: 24px; color:#000;}
.recruit .details .steps {display: grid; grid-template-columns: repeat(6,1fr); gap: 48px; width: 100%; max-width: 1200px;}
.recruit .details .steps li {width: 100%; aspect-ratio: 1/1; background-color: #fff; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border: 1px solid #00000011; box-shadow: 0 0 16px #00000011; font-size: 22px; color: #000; position: relative;}
.recruit .details .steps li:nth-child(even) {background-color: #4D82A511;}
.recruit .details .steps li::after {position: absolute; content: "▶"; font-size: 16px; display: inline-block; left: calc(100% + 16px); color: #ccc;}
.recruit .details > ul > li:last-child {grid-column: span 3;}
.recruit .details .steps li:last-child::after {display: none;}
.recruit .details .steps li em {color: var(--color-primary); font-size: 0.8em;}
.recruit .benefits {margin: 120px auto;}
.recruit .benefits ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 80px; width: 100%; max-width: 1200px; margin: 0 auto;}
.recruit .benefits ul li {display: flex; flex-direction: column; align-items: center; gap: 8px; background-image: linear-gradient(180deg, #fff 30%, #4D82A511 100%); border-radius: 8px; border: 1px solid #4D82A533; padding: 32px 0;}
.recruit .benefits ul li img {width: 40%; }
.recruit .benefits ul li em {font-size: 24px;}


/* --- 개인정보 security --- */
.security .box {padding: 56px; border: 4px #eee solid; text-align: center; font-size: 18px; display: flex; flex-direction: column; gap: 20px;}
.security .box span {font-size: 24px; font-weight: 700;}
.security .list_1 {counter-reset: number 0; margin-top: 80px;}
.security .list_1 .tit {font-weight: 700;}
.security .list_1 > li {margin-bottom: 40px;}
.security .list_1 > li::before {counter-increment: number 1; content: '제' counter(number) '조.'; font-weight: 700; margin-right: 8px;}
.security .list_2 {margin-top: 16px;}
.security .list_2 > li {list-style: decimal; padding-left: 8px; margin-left: 32px; margin-bottom: 16px;}
.security .list_3 {margin-left: 8px; margin-top: 8px;}
.security .list_3 > li {list-style-type:"- "; margin-bottom: 4px;}
.security .list_3 .tit {position: relative; padding-left: 8px;}
.security .list_3 .tit::before {position: absolute; top: 48%; left: -10px; content: "▶"; transform: translateY(-50%); font-size: 12px;}
.security span.src {display: block; font-size: 16px; margin-top: 16px; color: #777; font-weight: 500;}


/*/////  최대 1440px  /////*/
@media (max-width: 1440px){

  .w1440 {max-width: initial; padding:0 4%; box-sizing:border-box; }

  header .gnb > ul > li > a {padding:0 30px;}
  header .sitemap .gnb {width:100%; padding:0 6%; margin:0 auto; display: flex;justify-content: space-between;}
  header.hover .gnb > ul > li > a {padding: 0 40px;}

  .scroll {display:none;}
  .main .typin_wrap {width:100%; position:absolute; bottom:calc(50% - 290px); left:50%; transform:translateX(-50%); font-size:30px;}
  .main .typin_wrap .text {font-size:18px; margin-top:10px; color:#777; }
  .main .sp_container {width:100%; padding:6%;}
  .main .fixed_motion {width:650px;}
  .main .main_con {width:100%; padding:5% 3%; box-sizing:border-box;}
  .main .main_business .section_wrap {padding:260px 0 0;}
  .main .main_business .section_body .card {max-width:300px;}
  .main .technology .main_con_title h3 {font-size:60px; font-weight:800;}

  .company .greeting .sub_text .tit br {display: none;}
  .company .contact .map_info {top:0; right: 0%;}

  .business {overflow-x: hidden;}
  .business .sub_tab {display: none;}
  .business .sub_tab_b {display: block; position: absolute; top:602px; width: 100%; height:44px;}
  .business .sub_tab_b .swiper {width: calc(100% - 88px); height: 100%; background:rgba(32, 27, 20, .7); z-index:10; color:#fff; font-size: 18px;}
  .business .sub_tab_b .swiper-slide {height: 100%; opacity:.8; _width: 120px;}
  .business .sub_tab_b .swiper-slide a {width: 100%; height: 100%; text-align: center; display: flex; justify-content: center; align-items: center;}
  .business .sub_tab_b li.on {background-color:var(--color-primary);opacity: 1;}
  .business .sub_tab_b li.on a {font-weight:600; opacity:1;}
  .business .sub_tab_b  li::before {position:absolute; top:0; right:0; content:''; display:inline-block; width:1px; height:100%; background:#fff; opacity:.2;}
  .business .sub_tab_b .swiper-button-next,
  .business .sub_tab_b .swiper-button-prev {color: #fff; width: 44px; height: 44px; --swiper-navigation-size: 20px; font-weight: 700; background-color: #000; position: absolute; top: 0px; margin: 0;}
  .business .sub_tab_b .swiper-button-next {right: 0;}
  .business .sub_tab_b .swiper-button-prev {left: 0;}
  .business .sub_tab_b .swiper-button-next:hover,
  .business .sub_tab_b .swiper-button-prev:hover {background-color: var(--color-primary); color: #fff;}
  .business .all .list:after {font-size: 84px;}
  .business .all .list.deck::after {right: 0;}
  .business .all .list.pc::after {right: 0;}
  .business .detail > div::after {font-size: 120px;}
  .business .detail .top {padding:  40px 4% 80px;}
  .business .detail .overview::after {top: 20px;}
  .business .detail .tech {padding: 160px 4%;}
  .business .detail .tech ul {grid-template-columns: 0.7fr 1fr;}
  .business .detail .tech ul .con_text .tit {font-size: 38px;}
  .business .detail .overview {width: 100%; padding: 0 4% 240px;}
  .business .detail .tech ul .imgs_wrap.num1 {font-size: 14px;}
  .business .detail .tech ul .imgs_wrap.num1 img {width: 100%;}
  .business .detail.deck .tech ul .imgs_wrap.num1 span {width: 100%;}
  .business .detail.rebar .process .mini {width: 92%;}
  .business .detail.rebar .process .mini .brk {display: initial;}
  .business .detail.rebar .process .steps_wrap br {display: none;}

  .security .box {width: 94% !important;}
}

/*/////  최대 1280px  /////*/
@media (max-width: 1280px){

  header,
  header::before,
  header .header_r {height: 60px;}
  header .header_right .language {opacity:0; transition:var(--transition-custom);}
  header > .gnb ul,
  header .sitemap .gnb {padding:0 10%;}
  header nav {display:none; cursor:default;}
  header .sitemap .gnb dl {margin-bottom: 0;}
  header .sitemap .gnb > dl > dt > a {height: 48px;}
  header .sitemap .gnb ul li {height: 28px;}

  .sub_container .sub_banner_wrap {padding:0 6% 0; height:400px; text-align:center;}
  .sub_container .sub_banner_wrap h2 {margin-top:-10px; font-size:50px;}
  .sub_container .sub_banner_wrap p {font-size:17px; letter-spacing:-0.5px;}
  .sub_container .sub_banner_wrap .location {margin-top: 40PX;}
  .sub_container .sub_tab {top:356px; width:100%; height:44px;}
  .sub_container .sub_tab li a {height:44px; line-height:44px; font-size:14px;}
  .sub_container .sub_contents h3 {padding-bottom:50px; font-size:40px;}
  .sub_container .sub_contents .sub_text {font-size:18px; }

  .main .mask_logo {width:50%; z-index:1;}
  .main .main_contents .main_contents_txt {font-size:18px;}
  .main .mask_block.mask_block-side {width:calc(50.5% + 2px);}
  .main .typin_wrap {font-size:22px; bottom:calc(50% - 200px);}
  .main .typin_wrap .text {font-size:15px; color:#444; font-weight:300; letter-spacing:-0.5px;}
  .main .fixed_motion {width:570px;}
  .main .main_business .section_body .card  {height:400px; max-width:270px; border-radius:10px;}
  .main .main_business .section_body .card::after {border-radius:10px;}
  .main .fixed_motion li a .card_body h4 p {font-size:11px;}
  .main .fixed_motion li a .card_body > p {font-size:14px;}
  .main .main_business .section_body .card.is_active .cad_img_box span {opacity:0;}
  .main .main_business {height:2300px;}
  .main .btn_news_all {margin-top:40px;}
  .main .technology_wrap {height:initial; padding:100px 3%;}
  .main .technology::before,
  .main .technology::after {display: none;}
  .main .technology .main_con_list > li::before {display:none;}
  .main .technology .main_con_title {text-align:center;}
  .main .technology .main_con_title h3 {font-size:50px; font-weight:800;}
  .main .technology .main_con_title h3 p {font-size:13px; font-weight:600;}
  .main .technology .main_con_list {_flex-direction:column; width:100%; margin-left:0; margin-top:60px; gap:12px;}
  .main .technology .main_con_list > li {margin:0 !important;}
  .main .technology .main_con_list > li > a h4 {font-size:20px;}

  .company .greeting .sub_text .tit {font-size: 28px;}
  .company .greeting .sub_text p {font-size: 18px;}
  .company .mission .vision ul {flex-direction: column;}
  .company .mission .vision ul li {width: 100%;}
  .company .mission .vision ul li:nth-child(2) {height: 56px; width: 1px; border-width: 0 3px 0 0;}
  .company .mission .vision ul li:nth-child(3) {width: max-content; padding: 20px 40px;}
  .company .mission .vision ul li:nth-child(3) br {display: none;}
  .company .mission .action::before {font-size: 120px; bottom: -120px;}
  .company .history > ul > li > ul > li {font-size:16px;}
  .company .factory .sub_contents_in {margin: 0; width: 100%;}
  .company .factory .process ul {gap: 12px;}
  .company .factory .process.conc ul li span {font-size: 18px;}
  .company .contact .map_box {height: 48vh;}
  .company .contact .map_info {position: inherit; width: 100%; height: 176px; flex-direction: row; justify-content:space-evenly; box-shadow: none; background-color: initial;}
  .company .contact .map_info .logo {width: 24%; margin: 0;}
  .company .contact .map_info .text {font-size: 20px; line-height: 32px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
  .company .contact .map_info .text .addr {display:block; margin-bottom: 16px;}
  .company .contact .map_info .text p .bold {font-weight: 700; width: 50px; display: inline-block;}
  .company .contact .dept_num {padding: 0 0 8% 0;}
  .company .location {display:none;}

  .technology .center h3 {padding: 0; margin: 0;}
  .technology .center .bg_city p.bg_txt {font-size: 60px; }
  .technology .center .bg_city p.bg_txt br {display: block;}
  .technology .rnd .list > li .thms_wrap {flex-direction: column; height: 480px;}
  .technology .rnd .list > li .thm {height: 50%;}
  .technology .rnd .list > li .thm img {width: 50%; height: 100%; float: left;}
  .technology .rnd .list > li .thm.lay2 .thm_tit:nth-of-type(2) {top:0; left: initial; right: 0; bottom: initial;}
  .technology .rnd .list > li .thm.lay4 img {height: 50%;}
  .technology .rnd .list > li .thm.lay2 .thm_tit.twin {top:initial; bottom: 0; left: 50%; transform: translateX(-50%); border: unset; border-radius: unset;  border-top-left-radius: 8px; border-top-right-radius: 8px; border: 2px solid #fff; border-bottom-width: 0;}
  .technology .rnd .list > li .thm.gaia img {width: 100%;}
  .technology .rnd .list > li .thm.lay2 .thm_arr.hori {display: block;}
  .technology .rnd .list > li .thm.lay2 .thm_arr.ver {display: none;} 
  .technology .rnd .major .detail span {display: block;}
  .technology .rnd .major .brk {display: initial;}
  .technology .rnd .projects .list > li .tit .brk {display: none;}
  .technology .rnd .projects .detail span {display: block;}
  .technology .ip ul {grid-template-columns: repeat(3, 1fr); gap: 24px;}
  
  .business .sub_tab_b {top: 356px;}
  .business .all::before {top: 440px;}
  .business .all .con_text ul li {width: 30%; height: 120px; }
  .business .all .list {margin: 120px auto 0;}
  .business .all .list ul {gap: 12px;}
  .business .all .list ul li p { padding: 12px 16px;}
  .business .all .list ul li p span {font-size: 20px;}
  .business .all .list:after {font-size: 70px;}
  .business .all .list.deck::after {top: -20px; right: 0;}
  .business .all .list.pc::after {right: 0;}
  .business .detail .brk {display: initial;}
  .business .detail .overview {padding: 0 16px 120px;}
  .business .detail .overview::after {top: 22px;}
  .business .detail .overview ul {padding: 40px 64px}
  .business .detail .adv ul {width: 80%;}
  .business .detail .adv ul > li {grid-template-columns: initial !important; height: initial; min-height: initial;}
  .business .detail .adv ul li p {order: 0 !important; padding: 24px 24px 48px; height: max-content; gap: 12px; background-image: linear-gradient(180deg, #fff 0%, transparent 100%) !important; border-radius: 8px !important;}
  .business .detail .adv ul li p::after {padding: 1px 1px 0 !important; background-image: linear-gradient(180deg, #1D428955 0%, transparent 100%) !important;}
  .business .detail .adv ul li p span br {display: none;}
  .business .detail .adv ul > li div img {height: 240px;}
  .business .detail .adv ul > li div img.computer {height: initial;}
  .business .detail .tech ul .imgs_wrap.num3 img {width: 64%;}
  .business .detail.deck .prc ul {gap: 16px;}
  .business .detail.deck .prc ul li {gap: 24px;}
  .business .detail.nod .overview .imgs_wrap {height: 180px;}
  .business .detail.nod .adv ul > li:nth-child(1) div {flex-direction: column;}
  .business .detail.nod .adv ul > li:nth-child(1) div img {position: initial; height: initial;}
  .business .detail.beam .top {grid-template-rows: 240px auto;}
  .business .detail.beam .top p {font-size: 18px;}

  .recruit .values {padding-bottom: 80px;}
  .recruit .values ul li .cir {padding-top: 0;}
  .recruit .values ul li .cir em {font-size: 24px;}
  .recruit .values ul li:nth-child(1) .line::before,
  .recruit .values ul li:nth-child(3) .line::before {width: 48px;}

  .pr .ci > div > div {flex-direction: column; gap: 40px;}
  .pr .ci .tit {width: 100%;}
  .pr .ci .tit h4 {margin-bottom: 0;}
  .pr .ci .tit .btn_wrap {grid-area: 1/2/span 2/3; align-self: flex-end; justify-self: end;}
  .pr .ci .signature ul li {padding: 24px;}
  .pr .brochure > div {flex-direction: column-reverse; gap: 80px; margin-top: 0;}
  .pr .brochure > div img {width: 80%; max-width: 640px;}
  .pr .brochure > div .txt {width: 80%;}
  .pr .brochure > div .txt::after {font-size: 80px; top: -60px;}
  .pr .brochure > div .txt p {text-align: center; font-size: 22px;}
  .pr .brochure > div .txt p br {display: none;}
  .pr .brochure > div .txt ul {justify-content: center;}
  .pr .brochure > div .txt ul li.btn_wrap .btn {padding: 0 24px;}
  .pr .brochure > div .txt ul li.view .btn {padding: 0 40px;}

  .security .brk {display: none;}
}

/*///// 최대 1000px /////*/
@media (max-width:1000px){

  .main .fixed_motion {width:380px; gap:12px; justify-content:flex-end;}
  .main .main_business .section_body {padding-bottom: 560px;}
  .main .main_business .section_body .card {max-width:360px; height:max-content;}
  .main .fixed_motion .card {margin:0 0 0 0;}
  .main .fixed_motion li:nth-child(2) {margin-top:0;}
  .main .fixed_motion li:nth-child(odd) {margin-top:0;}
  .main .fixed_motion li a .card_body {gap: 16px;}
  .main .card_body .cad_img_box img {display:none; width:auto; height:170px; margin-top:-100px;}

  .company .greeting > div {flex-direction: column-reverse; padding: 0;}
  .company .greeting  .sub_text {padding: 0 4%;}
  .company .greeting  .sub_imgbox {max-width: initial; height: 240px;}
  .company .factory h4 {font-size: 32px; }
  .company .factory .fixed_bg {height: 320px;}
  .company .factory .info {grid-template-rows: auto 300px 500px;}
  .company .factory .info div:nth-child(1) {grid-column: span 3; display: flex; flex-direction: column; justify-content: space-between;}
  .company .factory .info div:nth-child(1) ul {display: flex; flex-wrap: wrap; width: 100%;}
  .company .factory .info div:nth-child(1) ul li {width: 49%;}
  .company .factory .info div:nth-child(3) {grid-column: span 2;}
  .company .factory .quality div {width: 100%;padding: 20px 0 40px;}
  .company .factory .quality div img {height: initial; width: 100%;}
  .company .factory .facility ul {gap: 8px;}
  .company .factory .facility ul li {height: 56px;}
  .company .factory .process h4 span {font-size: 16px;}
  .company .factory .process ul {margin-top: 48px;}
  .company .factory .process ul li span,
  .company .factory .process.conc ul li span {font-size: 16px; letter-spacing: -0.04em;}

  .technology .center .eng_swdev .rec {gap: 8px;}
  .technology .center .eng_swdev .rec li {height: 240px;}
  .technology .center .smart_build .smart_img {grid-template-rows: repeat(3, 200px); gap: 8px;}
  .technology .center .smart_build .smart_img > div:nth-child(1) {grid-column: 1 / span 3; grid-row: 1 / span 2;}
  .technology .center .smart_build .smart_img .pic_big .pic_num:nth-child(1) {top: 7%; left: 32%;}
  .technology .center .smart_build .smart_img .pic_big .pic_num:nth-child(2) {top: 42%; left: 60%;}
  .technology .center .smart_build .smart_img .pic_big .pic_num:nth-child(3) {top: 80%; left: 52%;}
  .technology .center .smart_build .feature_list p {font-size: 14px;}
  .technology .center .smart_build .feature_list em {font-size: 18px}
  .technology .sub_tab ul {width: 100%;}
  .technology .rnd {padding-bottom: 120px;}
  .technology .rnd ul {gap: 40px 16px;}
  .technology .rnd ul li p {font-size: 18px; padding: 12px;}
  .technology .rnd ul li p span {font-size: 14px;}

  .business .all .con_text h5 br.brk {display: initial;}
  .business .all .con_text ul li {font-size: 16px;}
  .business .all .list::after {font-size: 70px;}
  .business .all .list.deck::after {top: -50px;}
  .business .all .list ul {grid-template-columns: repeat(2,1fr);}
  .business .detail > div {padding: 120px 0;}
  .business .detail .overview::after {display: none;}
  .business .detail .overview ul {width: 100%; padding: 32px 32px 32px 64px;}
  .business .detail .tech {padding: 120px 16px;}
  .business .detail .tech ul {display: flex; flex-direction: column; gap: 40px; width: 100%; padding: 4%;}
  .business .detail .tech ul .con_text {text-align: center;}
  .business .detail .tech ul .con_text .tit {font-size: 28px;}
  .business .detail .tech ul .con_text .tit br {display: none;}
  .business .detail .tech ul .imgs_wrap img {box-shadow: initial;}
  .business .detail .tech ul .imgs_wrap.num1 {font-size: 14px; text-align: center;}
  .business .detail .tech ul .imgs_wrap.num2,
  .business .detail .tech ul .imgs_wrap.num3 {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;}
  .business .detail .tech ul .imgs_wrap.num2 img,
  .business .detail .tech ul .imgs_wrap.num3 img {position: initial; width: 48%; translate: initial;}
  .business .detail .tech ul .imgs_wrap.num3 {padding: 0;}
  .business .detail .tech ul .imgs_wrap.num3 img:nth-child(3) {transform: translateY(-40px);}
  .business .detail.deck .top ul {gap: 8px; bottom: 20px; font-size: 16px;}
  .business .detail.deck .top ul li {border-width: 2px; padding: 4px 24px;}
  .business .detail.rebar .process .steps_wrap .line {translate: initial; left: calc(4% + 18px); top: 0;}
  .business .detail.rebar .process .steps_wrap .steps_list {margin: 40px 0 0; gap: 80px;}
  .business .detail.rebar .process .steps_wrap .steps_list > li {grid-template-columns: 40px 1fr;}
  .business .detail.rebar .process .steps_wrap .steps_list > li img {grid-column: 2; grid-row: 1; justify-self: initial; }
  .business .detail.rebar .process .steps_wrap .steps_list > li .cir {grid-column: 1; grid-row: span 2;}
  .business .detail.rebar .process .steps_wrap .steps_list > li .text {grid-column: 2; grid-row: 2; justify-self: initial; text-align: left !important;}
  .business .detail.rebar .process .steps_wrap .steps_list > li > .text p {flex-direction: row; gap: 16px; align-items: center;}

  .recruit .sub_tab ul {width: 100%;}
  .recruit .values {padding: 40px 0;}
  .recruit .values ul {flex-direction: column; align-items: center; gap: 56px;}
  .recruit .values ul li {width: 70%; max-width: 480px; gap: 32px;}
  .recruit .values ul li .line {width: 80vw; height: 1px; border-top: 1px dashed; background-image: none; top: 50px; left: 50%; transform: translateX(-50%); mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%); overflow: hidden; z-index: -1;}
  .recruit .values ul li .line::after,
  .recruit .values ul li .line::before {display: none;}
  .recruit .values ul li .cir {aspect-ratio: initial; height: 100px; border-radius: 100px; gap: 4px;}
  .recruit .details > ul {grid-template-columns: initial;}
  .recruit .details > ul > li {padding: 32px 0;}
  .recruit .details > ul > li h5 {width: 120px; text-align: center;}
  .recruit .details > ul > li:nth-child(-n + 2) {border-width:0;}
  .recruit .details > ul > li:nth-child(-n + 3) { border-bottom: 1px solid #ccc; flex-direction: row;}
  .recruit .details > ul > li:last-child {grid-column: initial; overflow: hidden;}
  .recruit .details > ul > li:last-child h5 {align-self: flex-start;}
  .recruit .details .steps {grid-template-columns: repeat(3, 1fr); width: 92%; gap: 24px 40px;}
  .recruit .details .steps li:nth-child(3)::after {display: none;}
  .recruit .benefits ul {grid-template-columns: repeat(2, 1fr); padding-top: 40px; max-width: 700px;}

  .pr .sub_tab ul {width: 100%;}
  .pr .brochure .list {grid-template-columns: repeat(3, 1fr);}
}

/*///// 최대 800px /////*/
@media (max-width:800px){

  .main_visual video.mo {display:block; height:100%;}
  .main_visual video.pc {display:none;}
  .main .main_business.pc {display:none;}
  .main .main_business.mo {display:block; height:2200px; z-index:100;}
  .main .main_business.mo .section_wrap {padding-top:40px;}
  .main .main_business.mo .section_body .card_mo {display:flex; flex-direction:column; justify-content:space-between; width:100%; width:100%; margin-bottom:12px; padding:25px; background:rgba(255, 255, 255, .85);  border-radius:5px; backdrop-filter: blur(4px);}
  .main .main_business.mo .section_body .card_mo h4 {font-size:26px;}
  .main .main_business.mo .section_body .card_mo h4 p {font-size:10px; color:var(--color-secondary);}
  .main .main_business.mo .section_body .card_body > p {display:block; margin-top:64px; font-size:13px; color:#666; letter-spacing:-1px;}
  .main .main_business.mo .section_body li a .card_body .icon_motion {position:absolute; top:16px; right:16px;}
  .main .main_business.mo .icon_motion img {height: 120px; object-position: right top;}
  .main .main_business.mo .cad_img_box {position:relative;}
  .main .main_business.mo .cad_img_box span {position:absolute; bottom:10px; left:0px; display:inline-block; font-size:12px; font-weight:600; color:#999; opacity:0;}
  .main .main_business.mo .section_body .card_mo .cad_img_box span {opacity:1; transition: .2s;}
  .main .main_business.mo .section_body .card_mo,
  .main .main_business.mo .section_body .card_mo:hover {background: linear-gradient(180deg, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, .95) 90%), url(../images/sample_bg.png) 70px 172px no-repeat; background-size: 130%;}
  .main .mo_business_wrap {position:relative; background:url("../images/hm_main_mo.jpg") center no-repeat; background-size:cover; height:100%; z-index:0;}
  .main .mo_business_wrap::before {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0, 0, 0, .6); pointer-events:none;}
  .main .main_business.mo .hover_box3 > li::after {pointer-events:none;}
  .main .main_business.mo .section_body {padding-top:40px;}
  .main .main_business .btn_news_all {margin-top:25px; background:rgba(255, 255, 255, .1); padding:8px 14px; border-radius:2px;}
  .main .main_business .section_wrap {padding:120px 0 0 0;}
  .main .main_con_title {width:100%; text-align:center; z-index:1;}
  .main .main_con_title h3 {font-size:42px;}
  .main .main_con_title .main_contents_txt {font-size:16px;}
  .main .fixed_motion {flex-direction:column; width:100%; gap:12px; z-index:100;}
  .main .fixed_motion li {margin:0 0 0 0;}
  .main .fixed_motion li:nth-child(2) {margin-top:0;}
  .main .fixed_motion li:nth-child(odd) {margin-top:0;}
  .main .fixed_motion li a .card_body > p {display:none;}
  .main .fixed_motion li.is_active a .card_body > p {display:flex; position:absolute; width:calc(100% - 60px); bottom:30px; left:30px;}
  .main .main_business .section_body {z-index:10; width: 100%;}
  .main .main_business .section_body .card {width:100%; max-width:none; height:150px;}
  .main .main_business .section_body .card.is_active {height:300px; z-index:1000; opacity:1;}
  .main .card_body .cad_img_box img {margin-top:-240px; _width:100%; max-height:300px; height:auto;}


  .company .mission .mision_contents .sub_text p {font-size:22px;}
  .company .mission .action_plan .sub_text p {font-size:22px;}
  .company .mission .action_plan .move {transform: translateY(179px) rotate(360deg);}
  .company .mission .action_plan .sub_text .txt_sub  {font-size: 16px; font-weight: 300; letter-spacing:-0.5px;}
  .company .mission.technology  .eng_swdev_in h4 {font-size: 24px;}
  .sub_contents.company_license h4 {font-size: 24px;}
  .eng_cont_in {flex-direction: row; flex-wrap: wrap;}
  .lic_cont .lic_desc .desc_data { display: inline-block; }
  .lic_cont .lic_desc .desc_data .desc_org { display: block; }
  .lic_cont .lic_desc .desc_data .desc_no {margin-right: 3px;}
  .lic_cont li {padding-left: 15px; padding-right: 0;}

  .technology .center {padding-bottom: 0;}
  .technology .center .intro .quantum {transform: scale(0.8) !important;}
  .technology .center .bg_city p.bg_txt {font-size: 50px;}
  .technology .center .eng_swdev .sw_3d {margin-bottom: 0}
  .technology .center .eng_swdev .sw_3d .circle-container {width: 320px; height: 320px; top: initial; left: initial; transform: rotate(45deg);}
  .technology .center .eng_swdev .sw_3d .circle_txt {font-size: 18px;}
  .technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(1) {top: 36px;}
  .technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(2) {right: 36px;}
  .technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(3) {bottom: 36px;}
  .technology .center .eng_swdev .sw_3d .dot_wrap .dot:nth-child(4) {left: 36px;}
  .technology .center .eng_swdev .sw_3d .fix_wrap {display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 480px; height: 480px; grid-template-rows: repeat(2, 1fr); ;}
  .technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont {position: initial; transform: initial !important; font-size: 14px; color: #888; text-align: left; display: flex; flex-direction: column; width: 100%; height: 100%;}
  .technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(2),
  .technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(4) {text-align: right;align-items: flex-end;}
  .technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(3),
  .technology .center .eng_swdev .sw_3d .fix_wrap .fix_cont:nth-child(4) {justify-content: flex-end;}
  .technology .center .smart_build .smart_img > div br {display: block;}
  .technology .center .smart_build .feature_list {grid-template-columns: repeat(1, 1fr);}
  .technology .rnd .h4_main {font-size: 24px;}
  .technology .rnd h4 {font-size: 18px;}
  .technology .rnd .list > li .detail {display: flex; flex-direction: column;}

  .pr .ci > div > div > ul {grid-template-columns: 1fr;}
  .pr .ci .signature ul li {padding: 24px 80px;}
  .pr .ci .color ul {grid-auto-rows: 160px;}
}

/*///// 최대 768px /////*/
@media (max-width:769px) {
  /* 공통 > header */
  #dimHeader {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0, 0, 0, 0.8);  z-index:20;}
  header:has(.sitemap.on) #dimHeader {display:block;}
  header .gnb_wrap::-webkit-scrollbar {width:6px;}
  header .gnb_wrap::-webkit-scrollbar-track {background-color: transparent;}
  header .gnb_wrap::-webkit-scrollbar-thumb {border-radius: 3px;background-color: #ccc;}
  header .gnb_wrap::-webkit-scrollbar-button {width: 0;height: 0;}
  header .sitemap {right:0; left:auto; width:70%; height:100vh;}
  header .sitemap .nav_wrap {overflow:hidden;}
  header .sitemap .nav_wrap h1 > .logo {top:0px; left:24px; height:60px;}
  .nav_wrap {overflow:auto; height:100%;}

  header .sitemap .gnb {flex-direction:column; padding:0; }
  header .sitemap .gnb dt {font-size:0;}
  header .sitemap .gnb dt a {width:100%; font-size:18px; line-height:24px; text-indent:20px; pointer-events:none;}
  header .sitemap .gnb dd {margin-top:10px; }
  header .sitemap .gnb dl {padding:14px 0; margin:0;}
  header .sitemap .gnb ul {background:#eee; padding:16px 0;}
  header .sitemap .gnb ul li {width:100%; padding:10px 0; _border-bottom:1px solid #eee; line-height:76px; margin:0;}
  header .sitemap .gnb ul li ~ li {margin:0;}
  header .sitemap .gnb ul li a {font-size:16px; text-indent:32px; line-height:16px;}
  header .sitemap .sitemap_header {display:none;}
  header .sitemap .nav_bg {display:none;}
  header .sitemap .nav_wrap .gnb_wrap {top:80px;height: -webkit-fill-available; overflow:auto;left:50%; transform:translateX(-50%);}
  header .sitemap a span {background-size:24px auto; display:block; width:24px; height:24px; right:20px; position:absolute; top:0px; }
  header .sitemap a span.sitemap_arrow_down {background: url(../images/sitemap_arrow_down.svg) no-repeat; }
  header .sitemap a span.sitemap_arrow_up {background: url(../images/sitemap_arrow_up.svg) no-repeat; }
  header .sitemap .gnb > dl > dt > a {position:relative; display:inline-block; line-height:24px; font-weight:500; font-size:22px; color:#000; transition:0.2s;}
  header .sitemap .gnb > dl > dt > a::before {display:none;}
  header .sitemap .gnb > dl:hover > dt > a::before {display:none;}

  /* footer */
  footer {padding:40px 3% 60px;}
  footer .footer_in {flex-direction:column; gap: 24px; width:100%; padding:0 3%; }
  footer .footer_logo {width:180px;}
  footer .footer_logo img {margin-left:-10px;}
  footer .footer_content {flex-direction:column; width:100%; border-bottom:none;}
  footer .footer_content div {width:100%; font-size:14px;}
  footer .footer_copyright {left:3%; bottom:-20px; font-size:12px;}
  footer .ft_family {width:100%; margin-top:20px;}
  footer .ft_family .btn_family {display:flex; justify-content:space-between;}

  
  .sub_container .sub_banner_wrap {padding:0 6% 0; height:400px; text-align:center;}
  .sub_container .sub_banner_wrap .bg {height:100%;}
  .sub_container .sub_banner_wrap h2 {font-size:42px;}
  .sub_container .sub_banner_wrap p span {display:block;}
  .sub_container .sub_banner_wrap .location {display: none;}
  .sub_container .sub_contents h3 {padding-bottom:30px; font-size:32px;}
  .sub_container .sub_text {font-size:16px; line-height:25px;}
  .sub_container .sub_tab {display:none;}
  .sub_container .sub_tab_mobile {display:block;}
  .sub_container .desc_wrap {font-size:16px;}
  .sub_container .text {font-size:16px;}
  
  /* --- 메인 --- */
  /* main > 기술개발 */
  .main .mask_block.mask_block-side {display: none;}
  .main .mask_logo {width: 100%;}
  .main .technology .main_con_list {flex-direction:column; margin-top:40px; gap:12px;}
  .main .technology .main_con_list > li {width:100%; height:240px; margin:0;}
  .main .technology .main_con_list > li > a h4 {font-size:20px;}


  /* --- 회사소개 --- */
  /* 인사말 */
  .company .greeting .sub_text .tit {font-size: 24px; }
  .company .greeting .sub_text p { font-size: 16px;}

  /* company > 연혁 */
  .company .history ul:before {left:40px;}
  .company .history > ul > li {width:calc(100% - 40px); margin-left:auto;}
  .company .history > ul > li > span {margin-left:29px;}
  .company .history > ul > li > span::before,
  .company .history > ul > li:nth-of-type(2n) > span::before {top:24px; left:-33px;}
  .company .history > ul > li > span::after,
  .company .history > ul > li:nth-of-type(2n) > span::after {top:18px; left:-39px;}
  .company .history > ul > li:nth-of-type(2n) {margin-left:auto; margin-right:0; text-align:left;}
  .company .history > ul > li .history_imgbox img {width:80%;}
  .company .history > ul > li::before {left:0;}
  .company .history > ul > li > ul {margin-left:30px;}
  .company .history > ul > li > ul > li > span {top:-3px;}
  .company .history > ul > li:nth-of-type(2n) > ul > li {padding:0 0 0 40px;}
  .company .history > ul > li:nth-of-type(2n) > ul > li > span {left:0; right:auto;}
  .company .history > ul > li:nth-of-type(2n)::before {left:0; right:auto;}


  /* company > 오시는길 */
  .company .contact .map_box {height: 40vh;}
  .company .contact .map_info {position: inherit; width: 100%; height: 240px; flex-direction: column; justify-content:center; gap: 24px;}
  .company .contact .map_info .logo {width: 28%; margin: 0;}
  .company .contact .map_info .text {font-size: 16px; line-height: 24px; margin: 0; align-items: center;}
  .company .contact .map_info .text .addr {display:block; margin-bottom: 8px;}



  /* 경영이념 */
  .company .mission .brk {display: initial;}
  .company .mission .sub_text {font-size: 16px; letter-spacing:-0.5px; line-height: 1.4;}
  .company .mission .sub_text .txt_sub {font-size: 16px; letter-spacing:-0.5px;}
  .company .mission .technology .eng_swdev_in ul.desc_wrap li{font-size: 16px ; letter-spacing:-0.5px;}
  .company .mission .fixed_bg {padding:50px 0 ;}
  .company .mission .fixed_bg.value {margin-top:0;}
  .company .mission .vision ul li {padding: 20px;} 
  .company .mission .vision ul li strong {font-size:20px}
  .company .mission .vision ul li:nth-child(3) br {display: initial;}
  .company .mission .vision ul li:nth-child(3) { font-size:13px !important;}	
  .company .mission .action::before {left:10px;bottom: 0px;font-size: 48px;;}
  .company .mission .action .action_plan {width:200px; height: 200px; scale: 0.95;}
  .company .mission .action .action_plan .circle_blue { width:120px; height:120px;}
  .company .mission .action .action_plan .circle_blue p {font-size:17px; letter-spacing:-1.5px;}
  .company .mission .action .action_plan .circle_line_pink {width: 220px; height: 220px;}
  .company .mission .action .action_plan .fix p {position: relative; font-size:14px;color:#000;font-weight: 700;top:-2px; letter-spacing:-1px;}
  .company .mission .action .action_plan .fix p span {font-weight:400; font-size: 10px;}
  .company .mission .action .action_plan .fix .fix_01 {position:absolute;top: -114px;left: 131px;left: 68px;text-align: center;/* line-height:24px; */}
  .company .mission .action .action_plan .fix .fix_01::before {content:'';position:absolute;top: 35px;left: 9px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action01.svg) center no-repeat;}
  .company .mission .action .action_plan .fix .fix_02 {position:absolute;top: 59px;right: -85px;text-align: center;}
  .company .mission .action .action_plan .fix .fix_02::before {content:'';position:absolute;top: -50px;right: 18px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action02.svg) center no-repeat;}
  .company .mission .action .action_plan .fix .fix_03 {position:absolute;top: 59px;left: -81px;text-align: center;}
  .company .mission .action .action_plan .fix .fix_03::before {content:'';position:absolute;top: -50px;left: 17px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action03.svg) center no-repeat;}
  .company .mission .action .action_plan .fix .fix_04 {position:absolute;bottom: -75px;right: -43px;text-align: right;}
  .company .mission .action .action_plan .fix .fix_04::before {content:'';position:absolute;top: -50px;left: -5px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action04.svg) center no-repeat;}
  .company .mission .action .action_plan .fix .fix_05 {position:absolute;bottom: -75px;left: -27px;text-align: right;}
  .company .mission .action .action_plan .fix .fix_05::before {content:'';position:absolute;top: -50px;right: -109px;right: -13px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action05.svg) center no-repeat;}

  .company .mission .action .action_plan .dot.f_01 {top: 2px;}
  .company .mission .action .action_plan .move {transform: translateY(-2px) rotate(1deg);}
  @keyframes action-dot-anim-01 {
  0% {transform: rotate(-26deg) translateX(97px);}
  20% {transform: rotate(42deg) translateX(97px);}
  40% {transform: rotate(138deg) translateX(97px);}
  60% {transform: rotate(206deg) translateX(97px);}
  80% {transform: rotate(270deg) translateX(97px);}
  100% {transform: rotate(334deg) translateX(97px);}
  }
  @keyframes action-dot-anim-02 {
  0% { transform: rotate(42deg) translateX(97px) }
  20% { transform: rotate(138deg) translateX(97px) }
  40% { transform: rotate(206deg) translateX(97px) }
  60% { transform: rotate(270deg) translateX(97px) }
  80% { transform: rotate(334deg) translateX(97px)}
  100% { transform: rotate(402deg) translateX(97px) }
  }
  @keyframes action-dot-anim-03 {
  0% { transform: rotate(138deg) translateX(97px) }
  20% { transform: rotate(206deg) translateX(97px) }
  40% { transform: rotate(270deg) translateX(97px) }
  60% { transform: rotate(334deg) translateX(97px)}
  80% { transform: rotate(402deg) translateX(97px) }
  100% { transform: rotate(498deg) translateX(97px) }
  }
  @keyframes action-dot-anim-04 {
  0% { transform: rotate(206deg) translateX(97px) }
  20% { transform: rotate(270deg) translateX(97px) }
  40% { transform: rotate(334deg) translateX(97px)}
  60% { transform: rotate(402deg) translateX(97px) }
  80% { transform: rotate(498deg) translateX(97px) }
  100% { transform: rotate(566deg) translateX(97px) }
  }
  @keyframes action-dot-anim-05 {
  0% { transform: rotate(270deg) translateX(97px) }
  20% { transform: rotate(334deg) translateX(97px)}
  40% { transform: rotate(402deg) translateX(97px) }
  60% { transform: rotate(498deg) translateX(97px) }
  80% { transform: rotate(566deg) translateX(97px) }
  100% { transform: rotate(630deg) translateX(97px) }
  }


  /* 공장현황 */
  .company .factory h4 {font-size: 26px; display: flex; flex-direction: column;}
  .company .factory .info {grid-template-rows: auto 200px 280px; gap: 8px;}
  .company .factory .info div:nth-child(1) {margin-bottom: 16px;}
  .company .factory .info div:nth-child(1) ul li {width: 100%;}
  .company .factory .info div > span {font-size: 14px;}
  .company .factory .quality div {width: 100%; padding: 0;}
  .company .factory .quality div span {font-size: 16px;}
  .company .factory .quality div span em {display: block; padding: 0; padding-bottom: 4px; font-size: 18px;}
  .company .factory .facility ul {grid-template-columns: repeat(2, 1fr);}
  .company .factory .process {margin-bottom: 0px !important;}
  .company .factory .process h4 span {padding-left: 0; padding-top: 8px;}
  .company .factory .process ul {display: flex; flex-direction: column; padding: 40px 0; gap: 40px; width: 60%; margin: 0 auto;}
  .company .factory .process ul::after {width: 1px; height: 100%; background: linear-gradient(0deg, #fff 0%, #aaa 5%, #aaa 95%, #fff 100% ); top: 0; left: -8%;}
  .company .factory .process ul li {width: 100%; gap: 16px;}
  .company .factory .process ul li span {text-align: left; height: max-content;}
  .company .factory .process ul li span::before {display: none;}
  .company .factory .process ul li span::after {top: 6px; left: -8%;}
  .company .factory .process ul li img {aspect-ratio: 16/9;}
  .company .factory .process.conc ul {width: 100%;}
  .company .factory .process.conc ul li span {height: max-content; padding: 16px 0;}
  .company .factory .process.conc ul li span br {display: none;}
  .company .factory .fixed_bg {height: 240px; margin-top: 0;}
  .company .factory .fixed_bg.rebar {margin-bottom: 120px;}

  /* 사업영역 */
  .business .sub_tab_b {display: none;}

  /* 기술개발 > 기술개발센터 */
  .technology .center .brk {display: initial;}
  .technology .center h3 br {display: initial;}
  .technology .center .intro .quantum {transform: scale(0.7) !important;}
  .technology .center .bg_city {margin-top: 130px;}
  .technology .eng_swdev .txt_wrap br {display: block;}
  .technology .center .smart_build .txt_wrap br {display: block;}

  /* 기술개발 > 지식재산권 */
  .tab_content.newtech ul {flex-direction: column;}
  .tab_content li {padding:20px}
  .newtech .desc_data p.desc_no,
  .newtech .desc_data p.desc_date {font-size:14px;}
  .newtech .img_desc p.desc_tit {font-size:14px;}
  .ipdesign_desc p.desc_no { margin-right:20px; }
  .ipdesign_desc p.desc_no, p.desc_date {font-size:14px; text-align:left;}
  .ipdesign_desc p.desc_tit {font-size:16px; line-height:1.2;}
  .tab_content.ip li, .tab_content.design li {padding:16px; gap:10px;}
  .download a {flex-direction:column-reverse; gap:4px; width: 70px;}
  .download p {font-size:13px;}
  .sub_tab_menu > li {flex:1;}
  .technology .rnd {background-size: 160%;}
  .technology .rnd ul {grid-template-columns: repeat(1, 1fr);}
  .technology .rnd ul li p {background-image: linear-gradient(180deg, #CDDEE8 0%, #FBFDFF 35%, #fff 70%, #E5F4FF 100%) !important;}
  .technology .rnd ul li:nth-child(even) p {background-image: linear-gradient(180deg, #efefef 0%, #fcfcfc 35%, #fff 70%, #eee 100%) !important;}
  .technology .ip ul {grid-template-columns: repeat(2, 1fr); gap: 24px 16px;}
  .technology .ip ul li {padding: 8px;}


  /* 홍보센터 > 브로슈어 */
  .pr_brochure {flex-direction: column;}
  .brochure_list li div {padding:12% 15%;}

  /* 홍보센터 > ci */
  .pr_signature ul {gap:12px;}
  .pr_ci div img {height:40px;}
  .pr_color .palette {flex-direction:column;}
  .pr_color .palette > li {width:100%; margin-bottom:30px;}
  .pr_color .palette li div > p {font-size:22px; font-weight:500; color:#fff; flex-grow:2;}
  .pr_color .palette li div > span {font-size:16px; font-weight:300; color:#fff; flex-grow:0;}
  .pr_color .palette li ul {margin-top:60px; color:#969696;}
  .btn_ci {padding: 0 41px 0 24px; height: 46px;font-size: 16px;}
  .btn_ci::after {width: 8px; height: 14px; background:url(../images/arrow.svg) no-repeat center; background-size: 10px;}
  .btn_ci:hover::after {background:url(../images/arrow_w.svg) no-repeat center; background-size: 10px;}
  .pr_bg {padding:0;}

  .business .all .con_text {padding: 0 16px;}
  .business .all .con_text h5 {font-size: 20px;}
  .business .all .con_text ul {flex-direction: column; gap: 2px;}
  .business .all .con_text ul li {width: 100%; height: initial; padding: 24px 12px; font-size: 16px; background-image: linear-gradient(90deg, #B3D0E033 0%, #fff 100%);}
  .business .all .con_text ul li:nth-child(2) {background-image: linear-gradient(-90deg, #B3D0E033 0%, #fff 100%);}
  .business .all .con_text ul li br {display: none;}
  .business .all .list::after {display: none;}
  .business .all .list ul li p span {font-size: 18px;}

  .business .detail {font-size: 16px;}
  .business .detail h3 span {font-size: 16px;}
  .business .detail h4 {font-size: 28px;}
  .business .detail > div {gap: 32px; padding: 80px 0;}
  .business .detail > div::after {display: none;}
  .business .detail .overview ul {padding: 24px 24px 24px 40px;}
  .business .detail .overview ul li.line {margin: 8px 0;}
  .business .detail .adv ul {gap: 56px;}
  .business .detail .adv ul > li p span {font-size: 20px; padding-left: 20px;}
  .business .detail .adv ul > li p span::before {top: 8px; width: 14px;}
  .business .detail .adv ul > li div {flex-direction: column;}
  .business .detail .tech {padding: 80px 16px 120px;}
  .business .detail .tech ul .con_text {gap: 16px; margin-top: 24px; font-size: 16px; line-height: 140%;}
  .business .detail .tech ul .con_text .tit {font-size: 22px;}
  .business .detail.deck .tech ul .imgs_wrap.num1 span {font-size: 16px; padding: 8px;}
  .business .detail.nod .overview .imgs_wrap {height: 140px;}
  .business .detail.beam .top {gap: 8px 16px; padding: 0 16px 80px;}
  .business .detail.beam .top p {font-size: 16px; padding: 8px 0; width: 100%; border-width: 2px;}
  .business .detail.rebar .process .mini {grid-template-columns: repeat(3, 1fr); border-radius: 24px; position: relative;}
  .business .detail.rebar .process .mini::after {content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 100%; height: 1px; background-color: #ddd;}
  .business .detail.rebar .process .mini li:nth-child(3)::before {display: none;}
  .business .detail.rebar .process .steps_wrap .steps_list > li > .text p {font-size: 20px; margin-bottom: 16px; gap: 4px;}

  .pr .brochure {background-size: contain;}
  .pr .brochure > div img {width: 92%;}
  .pr .brochure > div .txt {width: 92%;}
  .pr .brochure > div .txt p {font-size: 18px;}
  .pr .brochure > div .txt ul {gap: 8px;}
  .pr .brochure > div .txt ul li.btn_wrap .btn {height: 48px; font-size: 16px; padding: 0 16px;}
  .pr .brochure > div .txt ul li.view {width: 100%; max-width: 320px;}
  .pr .brochure > div .txt ul li.view .btn {padding: 0; width: 100%; }
  .pr .brochure > div .txt ul li.view .btn::after {width: 14px;}

  .recruit .values ul li .line {width: 92vw;}
  .recruit .details {padding-bottom: 24px;}
  .recruit .details .h4_wrap h4 {font-size: 28px;}
  .recruit .details > ul > li {font-size: 16px;}
  .recruit .details > ul > li h5 {font-size: 20px;}
  .recruit .details .steps li {font-size: 16px;}
  .recruit .benefits ul li em {font-size: 20px;}
}

/* 최대 576px */
@media (max-width:577px){
  .main .main_business.mo {height: 2020px;}
  .main .main_business.mo .icon_motion img {height: 70px;}
  .main .main_business.mo .section_body .card_body > p {margin-top: 40px;}

  .technology .eng_swdev .rec {grid-template-columns: repeat(1, 1fr)}
  .technology .eng_swdev .rec p {font-size: 12px;}


  /* 인사말 */
  /* .company .greeting {padding-bottom: 0;} */
  .company .greeting .sub_text p {margin-bottom: 16px;}
  .company .factory .info {grid-template-columns: 2.5fr 1.5fr 1fr; grid-template-rows: auto 160px 200px;}
  .company .factory .info div:nth-child(1) ul li {font-size: 16px; margin-bottom: 6px;}
  .company .factory .info div > span {font-size: 12px;}
  .company .factory .info div:nth-child(3) > span {width: 100%;}
  .company .factory .facility ul {grid-template-columns: repeat(1, 1fr);}
  .company .factory .facility ul li {height: 42px;}
  .company .factory .fixed_bg {display: none;}

  .technology .center .eng_swdev .rec {grid-template-columns: repeat(1, 1fr);}
  .technology .center .smart_build .smart_img {grid-template-columns: repeat(1, 1fr); grid-template-rows: 320px 160px 160px 160px; gap: 4px;}
  .technology .center .smart_build .smart_img > div br {display: none;}
  .technology .center .smart_build .smart_img > div:nth-child(1) {grid-column: initial; grid-row: initial; margin-bottom: 12px;}
  .technology .center .smart_build .smart_img  .pic_big {width: 580px;}
  .technology .center .smart_build .smart_img  .pic_big .pic_num {width: 24px; height: 24px; font-size: 16px;}
  .technology .center .smart_build .smart_img  .pic_big .pic_num:nth-child(1) {top: 16%; left: 32%;}
  .technology .center .smart_build .smart_img  .pic_big .pic_num:nth-child(2) {top: 45%; left: 60%;}
  .technology .center .smart_build .smart_img  .pic_big .pic_num:nth-child(3) {top: 80%; left: 52%;}
  .technology .center .smart_build .smart_img > div .pic_info  {font-size: 12px;}
  .technology .rnd .list > li .thms_wrap {height: 320px;}
  .technology .rnd .list > li .thm .thm_tit {font-size: 10px; padding: 4px 6px;}
  .technology .rnd .list > li .thm.lay2 .thm_tit.twin {font-size: 12px;}
  .technology .rnd .list > li .thm.lay2 .thm_arr.hori {height: 16px;}
  .technology .ip ul li .desc_data {font-size: 14px;}
  .technology .ip ul li .desc_data p {display: flex; flex-direction: column; margin-bottom: 6px;}
  .technology .ip ul li .desc_tit {font-size: 16px; padding-top: 0;}
  .technology .ip ul li .desc_tit br {display: none;}

  .business .all .con_text ul li br {display: initial;}
  .business .all .list {margin: 80px auto 0;}
  .business .all .list h4 {font-size: 22px; margin-bottom: 16px;}
  .business .all .list ul {grid-template-columns: 1fr;}
  .business .detail h3 {margin-bottom: 40px;}
  .business .detail .top {padding: 0 0 120px;}
  .business .detail .top .info {grid-auto-flow: row;  padding: 0;}
  .business .detail .adv ul {width: 100%; gap: 56px;}
  .business .detail .adv ul > li div img {height: 160px;}
  .business .detail.deck .prc {gap: 48px;}
  .business .detail.deck .prc ul {gap: 8px;}
  .business .detail.deck .prc ul::after {top: 40px;}
  .business .detail.deck .prc ul li span {font-size: 16px; height: 40px;}
  .business .detail.beam .top {grid-template-rows: 160px auto;}
  .business .detail.beam .top p {font-size: 13px; letter-spacing: -0.06em;}
  .business .detail.rebar .process .steps_wrap .steps_list > li > img {width: 100%;}

  .pr .brk {display: initial;}
  .pr .ci > div {gap: 80px;}
  .pr .ci .signature ul {grid-auto-rows: 200px;}
  .pr .ci .signature ul li {padding: 24px;}
  .pr .ci .signature ul li span {top: 8px; left: 8px;}
  .pr .ci .color ul {grid-auto-rows: 240px;}
  .pr .ci .color ul  li {flex-direction: column; flex-wrap: nowrap; align-items: initial; justify-content: end;}
  .pr .brochure .list li div {padding: 32px 20px;}

}