@charset "utf-8";

/* ----------------------- 공통 ----------------------- */
:root { /*color*/
 --color-primary:#1555B6;
 --color-secondary:#D02121;
 --color-primaryGra: linear-gradient(127.82deg, #1555B6 12%, #003a92 75%);
 /*transition*/
 --transition-custom: all 0.4s ease-in-out;}
 .br_mo {display:none; }
.wrap {position:relative; height:auto; min-height:100%; word-break: keep-all;/*영문에만 추가*/} 
.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;}
.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:15px; left:3%; width: 190px; height: 66px; background:url(../images/logo_hm.svg) center no-repeat;}

/* 언어 & 햄버거메뉴 */
.header_right {position:absolute; top:0px; right:3%; display:flex; z-index:10000;}
.header_right .language { display:flex; align-items:center; height:95px; justify-content:space-between; margin-right:40px;}
.header_right .language::before {content:''; display:inline-block; width:16px; height:16px; background:url(../images/ico_language_w.svg) left center no-repeat; background-size: contain; margin-right: 8px;}
.header_right .language a {display:inline-block; padding: 0 5px; font-weight:700; font-size:16px; color:#fff; opacity:.5;}
.header_right .language a:hover {opacity:1;}
.header_right .language a:hover:first-child::after {opacity:.5;}
.header_right .language a:last-child {cursor:pointer; }
.header_right .language a:first-child::after {content:''; display:inline-block; width:1px; height:12px; background:#fff; opacity:.8; margin-left:10px;}
.header_right .language a.on {color:#fff; opacity:1; }
.header_right .language a, .header_right .language::before{transition: all 0.4s;}

/* 햄버거메뉴 */
.header_menu {display:block; position:relative; z-index: 100;}
.header_menu, .header_menu span {transition: all 0.4s; box-sizing:border-box;}
.header_r {display:flex; align-items:center; height:95px;}
.header_menu {width:24px; height:40px; background:none;}
.header_menu span {position:absolute; right:0; width:100%; height:2px; background:#fff; border-radius:4px;}
.header_menu span:nth-of-type(1) {top:10px;}
.header_menu span:nth-of-type(2) {top:19px; width:70%;}
.header_menu span:nth-of-type(3) {bottom:10px;}
.header_menu.active-1 span:nth-of-type(1) {transform: translateY(10px) rotate(-45deg); background:#222; z-index:1000;}
.header_menu.active-1 span:nth-of-type(2) {opacity: 0; }
.header_menu.active-1 span:nth-of-type(3) {transform: translateY(-8px) rotate(45deg); background:#222;}

/* GNB */
.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; line-height:95px; font-weight:500; font-size:18px; letter-spacing:-0.03em; 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 {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);}

/* GNB > hover */
.header.hover .logo {background:url(../images/logo_hm_ful.svg) no-repeat !important;}
.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);}

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


/* GNB > 스크롤시 header 변경 */
.header.active {background-color:rgba(255, 255, 255, 0.8); transition:background .8s; backdrop-filter:blur(10px); -webkit-backdrop-filter: blur(10px);}
.header.active a.logo {background:url('../images/logo_hm_ful.svg') no-repeat; }
.header.active .gnb > ul > li > a, .active .gnb > ul > li.on > a {line-height:96px; color:rgba(0, 0, 0, 0.8);}
.header.active .gnb > ul > li:hover > a, .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 {width:16px; height:16px;  background:url(../images/ico_language.svg) left no-repeat;}
.header.active .language a, .header.hover .language a {color:#000; opacity:.2;}
.header.active .language a:first-child::after {content:''; display:inline-block; width:1px; height:10px; background:#000; opacity:.8; 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);}

/*nav*/
.sitemap {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; overflow-x:hidden !important; z-index:99;}
.sitemap::before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
.sitemap .nav_wrap h1 a {z-index:11;}
.sitemap .nav_wrap h1 > .logo {display:block; position:absolute; top:12px; left:3%; width:190px; height:66px; background:url(../images/logo_hm_ful.svg) no-repeat; }
.sitemap .nav_wrap {position:relative; display:flex; align-items:center; width:100%; height:100%; padding:0 20px; z-index:10;}
.sitemap .nav_wrap .gnb_wrap {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; z-index:11;}
.sitemap .gnb {display:flex; justify-content:space-between; position:relative; width:1280px; margin:0 auto;}
.sitemap .gnb dl {overflow:hidden; margin-bottom:50px; width:220px;}
.sitemap .gnb dl:nth-child(3) {width:350px;}
.sitemap .gnb dt {position:relative; color:#000; font-size:22px; font-weight:500;}

.sitemap .gnb > dl > dt > a {position:relative; display:inline-block; _line-height:56px; font-weight:500; font-size:22px; color:#000; letter-spacing:-0.03em; transition:0.2s;}
.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%);}
.sitemap .gnb > dl:hover > dt > a::before {width:100%;}

.sitemap .gnb dd {margin-top:20px; font-weight:500;}
.sitemap .gnb ul li {overflow:hidden; padding:10px 0; _height:34px;}
.sitemap .gnb ul li:hover a {color:var(--color-primary); transition:0s; transition-delay:0s; font-weight:500;}
.sitemap .gnb ul li ~ li {margin-top:8px;}
.sitemap .gnb ul li a {display:block; font-size:18px; font-weight:400; line-height:18px; _line-height:1.4; letter-spacing:-0.03em; color:#666;}
.sitemap .gnb ul li a span {position:relative; display:inline-block; color:#fff; font-weight:300; padding-right:15px;}
.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; }
.sitemap .gnb ul li.on a span::before,
.sitemap .gnb ul li a:hover span::before {right:0; opacity:1;}
.sitemap .nav_bg img {position:absolute; bottom:0; right:-360px; width:80vw; opacity:0.1;}
.sitemap .gnb dt a { position:relative; display:inline-block; transition:all 0.3s ease-in-out;}
.sitemap .gnb dl.none a {position:relative;}
.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;}
.sitemap .gnb dl.none a span {display:none;}

/* 탑버튼 */
.topBtn {display:none; position:fixed; bottom:100px; right:3%; width:60px; height:60px; z-index:1000;}
.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;}

/* list hover style */
.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; box-sizing:border-box;}
.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;}

/* footer */
footer {padding:40px 3% 100px; background:#242428; color:#fff;}
.footer_in {display:flex; align-items:bottom; position:relative; max-width:1440px; margin:0 auto;}
.footer_top {display:flex; align-items:flex-end; justify-content:space-between;}
.footer_logo {width:220px;}
.footer_logo img {margin-left:-10px; width:85%;}
.footer_content {display:flex; justify-content:space-between; align-items:flex-end; width:calc(100% - 220px); margin-top:20px; padding-bottom:20px; font-size:16px; border-bottom:1px solid rgba(255, 255, 255, .2);}
.footer_menu {display:flex;}
.footer_menu li {position:relative; color:#fff; opacity:.4;}
.footer_menu li:first-child::after {content:'|'; display:inline-block; position:absolute; top:4px; right:-40px; color:#bbb; width:40px; text-align:center; font-size:10px;}
.footer_menu li:first-child {margin-right:36px;}
.footer_list {margin-top:20px;}
.footer_list li {opacity:.7; margin-bottom:2px;}
.footer_list li:first-child {font-weight:600; margin-bottom:6px; opacity:1;}
.footer_list li span {display:inline-block; width:40px;}
.footer_copyright {position:absolute; left:220px; bottom:-40px; color:#fff; font-size:14px; opacity:.4;}

/* footer > family site */
.ft_family {position:relative; font-size:14px; height:42px;}
.ft_family .btn_family {display:block; padding:10px 20px; height:100%; background:#18181D; font-size:14px; color:#eee; font-weight:500; box-sizing:border-box;}
.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); }
.ft_family .family_list {opacity:0; visibility:hidden; overflow-y:auto; position:absolute; left:0; bottom:42px; width:100%; padding:10px; background:#fff; box-sizing:border-box; transition:var(--transition-custom); z-index:1100;}
.ft_family .family_list li a {display:block; padding:3px; font-size:14px; color:#333;}
.ft_family .family_list li a:hover {color:var(--color-primary);}
.ft_family.open .family_list {opacity:1; visibility:visible;}
.ft_family.open .btn_family::after {color:#fff; transform:rotate(90deg); transition:var(--transition-custom);}

/* 페이지네이션 */
.pagination {display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 90px;}
.pagination a {display: inline-block; width: 40px;}
.pagination a:hover {color: var(--color-primary);}
.pagination .page-item {font-size: 16px; min-width: 14px; margin: 0 10px; position: relative; display: inline-block !important; vertical-align: middle; text-align: center; color: #999; flex: none !important; height: auto !important; border: none !important; padding: inherit !important;}
.page-item#first img:hover {content: url(../images/icon_left_double_on.svg);}
.page-item#previous img:hover {content: url(../images/icon_left_on.svg);}
.page-item#next img:hover {content: url(../images/icon_right_on.svg);}
.page-item#end img:hover {content: url(../images/icon_right_double_on.svg);}
.page-item.active {color: var(--color-primary) !important; font-weight: bold;}

/* ----------------------- main page ----------------------- */
.main_wrap {position:relative; width:100%;}
/* 메인 > 컨텐츠 */
.main_contents {position:relative; _overflow:hidden; width:100%; height:100%;}
.main_con {position:relative; width:1440px; margin:0 auto; padding:6% 0;}
.main_con.project {text-align:center;}
.news_wrap {display:flex; align-items:center; position:relative; width:100%; height:100vh; background:url(../images/news_bg.jpg) center no-repeat; background-size:cover; background-attachment:fixed; _padding:0 0 380px 0;}
.news_wrap::before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:calc(100% - 33%); background:#F3F1EE;}
.news_wrap::after {content:'Hanmac Building Rooftop Garden'; position:absolute; bottom:-10px; right:3%; display:block; font-size:40px; font-weight:800; color:#fff; opacity:.5; letter-spacing:-2px; z-index:10;}
/* .main_con.technology::before, .main_con.technology::after, .main_con.news::after, .main_con.recruit::before {position:absolute; display:block; font-size:100px; font-weight:800; letter-spacing:-2px; color:#000; opacity:.04; z-index:-1;}
.main_con.technology::before {content:'Technology'; top:300px; left:-100px;}
.main_con.technology::after {content:'Development'; top:382px; left:0px;} */
.main_con.news::before, .main_con.news::after {position:absolute; display:block; font-size:100px; font-weight:900; letter-spacing:-6px; color:#000; opacity:.04; z-index:1;}
.main_con.news::before {content:'Hanmac';top: 310px;left:-48px;}
.main_con.news::after {content:'Story';top: 390px;left: 129px;}
/* .main_con.recruit::before {content:'Go together';top: -110px; right: 0px; z-index:0;} */
.main_con_title {z-index:10;}
.main_con_title h3 {color:#000; font-size:65px; line-height:72px; font-weight:800; letter-spacing:-1.5px;}
.main_con_title h3 .br_mo {display:none;}
.main_con_title h3 p {color:#0257D7; font-size:16px; font-weight:600;}

/* intro */
.intro {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;overflow: hidden;pointer-events: none;}
.notTop .intro{display: none;}
.mask{_position:relative; width: 100%; height: 120vh; position: absolute; top:-20vh; left: 0; display: flex; flex-direction: column; transition-timing-function: linear; background: rgba(255,255,255,0.4);}
.mask_section{flex-grow: 1; display: flex;}
.mask_section-main{flex-grow: 0;}
.mask_block{width: calc(100% + 2px); height: calc(100% + 2px); background:#fff; margin: -1px;}
.mask_block.mask_block-side{width: calc(37.5% + 2px);}
.mask_logo {width:30%; z-index: 1;}
.mask_logo img {width:100%;}

.typin_wrap {width:100%; position:absolute; bottom:calc(50% - 260px); left:50%; transform:translateX(-50%); font-size:36px; letter-spacing:-2px; text-align:center;}
.typin_wrap .text {display:none; font-size:20px; margin-top:10px; color:#777;}
p.typing-txt {display:none;}

.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}
  }
.blue{color: #2063C8; font-weight:600;}
.orange{color: #DD762B; font-weight:600;}
.green{color: #54AA41; font-weight:600;}

/* main_visual */
.content.main_visual {height:220vh; 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 > 사업영역 */
.main_business.mo {display:none;}
.main_business .btn_news_all {margin-top:100px; display:inline-block; color:#fff;}
.main_business .btn_news_all::after {content:'\2192'; display:inline-block; margin-left:8px;}
.main_business .btn_news_all:hover {color:#fff;}
.main_business .btn_news_all:hover::after {margin-left:16px; color:#fff; transition: .2s;}

.fixed_motion {width:780px;}
.fixed_motion li {position:relative; height:300px; margin-bottom:40px; overflow:hidden;}
.fixed_motion li a {height:100%;}
.fixed_motion li a .card_body {height:100%; display:flex; flex-direction:column; justify-content:space-between;}
.fixed_motion li a .card_body .icon_motion {display:none; width:80px; margin-bottom:15px;}
.fixed_motion li a .card_body .icon_motion img {width:100%;}
.fixed_motion li a .card_body h4 {font-size:32px; margin-top:0px; line-height:36px; z-index:10;}
.fixed_motion li a .card_body h4 p {font-size:12px; color:#fff; font-weight:800;}
.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;}
.fixed_motion li:nth-child(2) {margin-top:280px;}
.fixed_motion li:nth-child(odd) {margin-top:-280px;}
.fixed_motion li:nth-child(1) {margin-top:0;}
.sp_container {width:1440px; margin:0 auto;}
.main_business {display:flex; justify-content:center; position:relative; height:2600px;}
.main_business_wrap {width:100%; height:100%; position:relative}
.main_business_wrap .bg-wrap {position:absolute; top:5%; left:0; width:100%; height:100%;}
.main_business_wrap::before {content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, .5);}
.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_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_business .sp_container {height:100%;}
.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_business .section_head p {font-size:14px; font-weight:700; color:#257CFE; line-height:20.27px;}
.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_business .section_head .section_ttl {font-size:56px; font-weight:700; line-height:1.4; margin:0;}
.main_business .section_body {will-change:contents; padding-top:120px; padding-bottom:750px;}

.fixed_motion {display:flex; flex-wrap:wrap; justify-content:space-between; transition-duration:1.5s;}
.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_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_business .section_body .card.is_active h4 p {color:var(--color-secondary);}
.main_business .section_body .card.is_active .card_body .icon_motion, .main_business .section_body .card:hover .card_body .icon_motion {display:block;}
.main_business .section_body .card:hover {background:rgba(255, 255, 255, .85); color:#000; opacity:1;}
.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_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_business .section_body .card:hover h4 p {color:var(--color-secondary);}
.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_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_business .section_body .card.is_active .card_body .cad_img_box img, .main_business .section_body .card:hover .card_body .cad_img_box img {opacity:1; transition: .5s;}
.cad_img_box {position:relative;}
.cad_img_box span {position:absolute; bottom:10px; left:0px; display:inline-block; font-size:12px; font-weight:600; color:#999; opacity:0;}
.main_business .section_body .card.is_active .cad_img_box span {opacity:1; transition: .2s;}
.main_business .section_body .card.is_active, .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%;}


/* 사업영역 배경이미지 */
.main_business_wrap .bg {background:url("../images/hm_main.jpg") center no-repeat; background-size:cover;}

/* 메인 > 기술개발 */
.technology_wrap {display: flex;width:100%; _background:red; height:100vh; align-items:center; background:#F3F1EE;}
.technology_wrap {display:flex; align-items: center; height:100vh; position:relative; z-index:100;}
.project_wrap {display:flex; align-items: center; background:#F3F1EE; height:100vh; position:relative; z-index:100;}
.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;}
.project_wrap::before {content:''; position:absolute; top:60px; left:0; display:block; width:100%; height:100%; background:url(../images/line02.svg) no-repeat; background-size:100%; opacity:.7;}
.technology .main_con_list {margin-top:-100px;}
.technology .main_con_list {width:calc(100% - 200px); align-items:flex-start; display:flex; justify-content:flex-end; margin-left:200px;}
.technology .main_con_list > li {position:relative; flex:1; align-items:flex-start; color:#fff; box-sizing:border-box;}
.technology .main_con_list > li > a {display:flex; flex-wrap:wrap; width:100%; height:100%; padding:240px 30px 30px; box-sizing:border-box;}
.technology .main_con_list > li:nth-child(1) {margin-top:200px; background:url(../images/main_technology_bn01.png) center no-repeat; background-size:cover;}
.technology .main_con_list > li:nth-child(2) {margin-right:24px; margin-left:24px; background:url(../images/main_technology_bn02.png) center no-repeat; background-size:cover;}
.technology .main_con_list > li:nth-child(3) {margin-top:100px; background:url(../images/main_technology_bn03.png) center no-repeat; background-size:cover;}
.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;}
.technology .main_con_list > li:hover::before {margin-left:12px; transition:.2s; opacity:1;}
.technology .main_con_list .technology_txt {color:#fff; font-size:14px; margin-top:20px; z-index:10;}
.technology .main_con_list .technology_txt > li {text-indent:-6px; padding-left:12px;}
.technology .main_con_list .technology_txt > li::before {content:'-'; display:inline-block; margin-right:6px;}
.technology h4 {width:100%; color:#fff; font-size:24px; line-height:26px; z-index:10;}
.technology h4 p {font-size:14px; color:var(--color-secondary);}
.technology .main_con_list > li:hover {margin-bottom:10px; box-shadow:0px 0px 10px rgba(0, 0, 0, 0.4); transition: 1s;}

/* 메인 > 주요실적 */
.project {padding-bottom:10%;}
.project .main_con_list {margin-top:60px;}
/* .project::before {content:'Main Project'; display:block; position:absolute; top:230px; left:-120px; font-size:100px; font-weight:800; letter-spacing:-2px; color:#000; opacity:.05; z-index:-1; animation: fadein 3s ease;} */
.project .main_con_list {display:flex; justify-content:center; align-items:flex-end; flex-wrap:wrap; gap:24px;}
.project .main_con_list li {position:relative; flex:1 1 20%; height:200px; _margin-top:12px;}
.project .main_con_list li::before {content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:80px; background:linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, 0)); z-index:5;}
.project .main_con_list li > p {position:absolute; bottom:8px; left:12px; color:#fff; font-size:14px; text-align:left; letter-spacing:-0.5px; z-index:6;}
.project .main_con_list li img {width:100%; height:100%; object-fit:cover;}
.project .main_con_list .project_detail {opacity:0; position:absolute; bottom:8px; left:-14px; display:flex; justify-content:space-between; flex-direction:column; width:100%; min-height:70px; padding:12px; color:#fff; text-align:left; background:linear-gradient(#2460BA, #0045AD); border-radius:2px; box-sizing:border-box;}
.project .main_con_list li:last-child {height:0;}
.project .main_con_list li:last-child::before {display:none;}
.project .main_con_list li:last-child:hover {box-shadow:none;}
/* 메인 > 주요실적 > hover */
.project .main_con_list li:hover > p {display:none;}
.project .main_con_list li:hover {height:200px; margin-top:0; box-shadow:0px 2px 14px rgba(0, 0, 0, .5);}
.project .main_con_list li:hover .project_detail {opacity:1; left:-12px; transition:.2s; z-index:10;}
.project .project_detail_top {display:flex; justify-content:space-between; font-size:12px; margin-bottom:12px;}
.project .project_detail_top span:first-child {display:inline-block; padding:0 8px; height:18px; line-height:18px; font-weight:600; background:#fff; color:var(--color-primary);}
.project .project_detail_top span:last-child {opacity:.7;}
.project .main_con_list .project_detail p {font-size:14px; font-weight:500;}
.main_contents .main_contents_txt {margin-top:10px; color:#333; font-size:20px; letter-spacing:-1px;}
.main_contents .main_contents_txt em {font-weight:500;}
.main_content_mainproject {display:flex; flex-wrap:wrap; margin-top:80px; }
.main_content_mainproject li {width:calc(25% - 24px); margin:12px;}
.main_content_mainproject li img {width:100%;}

/* 메인 > 한맥뉴스 */
.main_con.news {display:flex; width:1440px; min-height:700px; _padding:150px 0 0 0; margin:0 auto 240px;}
.main_con.news .main_con_title {width:586px;}
.main_con.news .main_con_list {width:calc(100% - 586px + 40px);}
.main_con.news .main_con_list li {position:relative;}
.main_con.news .main_con_list a {display:flex; justify-content:space-between; width:100%; padding:24px; box-sizing:border-box;}
.main_con.news .main_con_list a #newsDate {width:140px; font-size:26px; font-weight:800; line-height:26px;}
.main_con.news .main_con_list a #newsYear {display:block; font-size:16px; color:#BFBFBF; font-weight:600;}
.main_con.news .main_con_list a .text_wrap {width:calc(100% - 140px);}
.main_con.news .main_con_list a .text_wrap div:first-child {width:calc(100% - 150px - 24px);}
.main_con.news .main_con_list a .text_wrap.none div:first-child {width:100%;}
.main_con.news .main_con_list a .news_title {font-size:22px; font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.main_con.news .main_con_list a .news_text {margin-top:8px; font-size:16px; font-weight:300; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.main_con.news .main_con_list a > div {display:flex; justify-content:space-between;}
.main_con.news .main_con_list .news_imgbox img {width:auto; max-width:124px; height:100%;}
.main_con.news .main_con_list > li::before {content:''; position:absolute; top:12px; left:calc(100% - 60px); margin-left:0px; display:block; background:#fff url(../images/ico_arr.svg) center no-repeat; width:40px; height:40px; opacity:0;}
.main_con.news .main_con_list > li:hover::before {margin-left:12px; transition:.2s; opacity:1;}

/* 메인 > 인재채용 */
.recruit_wrap {padding: 150px 0;}
.main_con.recruit {display: flex; width: 1440px; min-height:500px; _background-color: #fff; padding: 0 8%; justify-content: space-between;  align-items: center; background-image: url(../images/intro03.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 4px;}
.main_con.recruit .main_con_title * {color: #fff;}
.main_con.recruit .main_con_title .main_contents_txt em {position: relative; margin: 0 4px;}
.main_con.recruit .main_con_title .main_contents_txt em::after {content: ""; position: absolute; top: 0; left: -4px; background-color: var(--color-secondary); width: calc(100% + 8px); height: 100%; z-index: -1;}
.main_con.recruit .btn_wrap {width: 40%;}
.main_con.recruit .btn_wrap br.brk{display: none;}
.main_con.recruit .btn_wrap .btn_recruit {width: 100%; height: 100px; display: flex;justify-content: space-between; align-items: center; font-size: 28px; padding: 0 8%; border-radius: 4px; box-shadow: inset 0 0 0 2px #000000; background: linear-gradient(180deg, #FFF 50%, #CDCDCD 100%); color: var(--color-primary); position: relative;}
.main_con.recruit .btn_wrap .btn_recruit::after {position: absolute; content: ""; top: 8px; right: 8px; width: 100%; height: 100%; background-image: url(../images/logo_hm_symbol_primary.svg); opacity: 0.08; background-repeat: no-repeat; background-position: center right; background-size: contain;}
.main_con.recruit .btn_wrap .btn_recruit .icon {width: 24px; height: 24px; background-image: url(../images/ico_blank_primary.svg); background-position: center; background-size: 100%; background-repeat: no-repeat;}
.main_con.recruit .btn_wrap .btn_recruit:hover {box-shadow: inset 0 0 0 6px var(--color-primary);}
.main_con.recruit .btn_wrap .btn_recruit:hover .icon {background-image:url(../images/ico_blank_primary_hover.svg); background-size: cover; transition:0.2s;}
.main_con.recruit .btn_wrap > div {width: 100%; margin-top: 16px; color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative;}
.main_con.recruit .btn_wrap > div > a {width: 58%; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 4px;}
.main_con.recruit .btn_wrap > div > a:last-child {width:38%;} 
.main_con.recruit .btn_wrap > div > a > span {position: relative; margin-right: 12px;}
.main_con.recruit .btn_wrap > div > a > span::after {position: absolute; content: ""; top: 50%; right: -20px; width: 14px; height: 14px; background-image: url("../images/ico_blank_w.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; transform: translate(0, -50%);}
.main_con.recruit .btn_wrap > div > a:hover {background-color: #ffffff; color: var(--color-primary); font-weight: 700;}
.main_con.recruit .btn_wrap > div > a:hover > span::after {background-image: url(../images/ico_blank_primary_hover.svg);}

.btn_news_all {margin-top:100px; display:inline-block; color:#222;}
.btn_news_all::after {content:'\2192'; display:inline-block; margin-left:8px;}
.btn_news_all:hover {border-bottom:1px solid var(--color-primay); color:var(--color-primary);}
.btn_news_all:hover::after {margin-left:16px; color:var(--color-primary); transition: .2s;}

/* hover_box3적용 시 클릭 안될 때 */
.pr_news .hover_box3 > li::after,
.main_con.news .hover_box3 > li::after,
.main_con_list.hover_box3 > li::after,
.item_wrap.hover_box3 > li::after,
.main_business .section_body .card::after,
.main_business .section_body .card_mo::after {z-index: -1;}

/* scroll animation */
.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;}
.scroll:before, .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;}
.scroll_w:before, .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;}
.scroll:before, .scroll_w:before {top: 24px;}
.scroll:after, .scroll_w:after {top: 18px; animation-delay: .35s;}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    margin-top: 10px;
  }
}

/* ----------------------- sub page ----------------------- */
/* --------------------- sub page 공통 ----------------------- */
/* sub_container */
.sub_container {width:100%;}
.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; text-align:center;}
.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_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_banner_wrap h2 {font-size:70px; color:#fff; z-index:2; transition:var(--transition-custom);}
.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_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 > location */
.location {display:flex; align-items:center; margin-top:90px; font-size:14px; z-index:2;}
.location::before {content:''; display:inline-block; width:20px; height:20px; margin-right:10px; background:url(../images/ico_home.svg) center no-repeat;}
.location span::after {content:'\203A'; display:inline-block; width:24px; text-align:center;}
.location span:last-child::after {display:none;}

/* sub_container > sub_tab */
.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_tab ul {display:flex; width:1440px; margin:0 auto;}
.sub_tab li {position:relative; flex:1; text-align:center;}
.sub_tab li::before {position:absolute; top:0; right:0; content:''; display:inline-block; width:1px; height:100%; background:#fff; opacity:.2;}
.sub_tab li:last-child::before, .sub_tab li.on::before {display:none;}
.sub_tab li a {display:block; width:100%; height:54px; line-height:54px; text-align:center; font-size:16px; color:#fff; opacity:.8;}
.sub_tab li.on {background-color:var(--color-primary);}
.sub_tab li.on a {font-weight:600; opacity:1;}

/* sub_container > sub_tab_mobile */
.sub_tab_mobile {display:none; position:relative; margin-top:-44px;}
.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_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_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_tab_mobile .sub_tab_list li {margin:8px 0;}
.sub_tab_mobile .sub_tab_list li a {display:block; }
.sub_tab_mobile .sub_tab_list li.on a {color:var(--color-primary); font-weight:600;}
.sub_tab_mobile.open .sub_tab_list {display:block;}
.sub_tab_mobile.open .btn_sub_tab::after {transform:rotate(90deg); transition:var(--transition-custom);}

/* sub_contents */
.sub_contents {width: 100%;}
.sub_contents h3 {padding:80px 0 60px;; font-size:46px; color:#222; text-align:center;}
.sub_contents .w1440 {max-width: 1440px; width:1440px;}
.sub_text {font-size:22px; color:#666; font-weight:300; letter-spacing:-0.5px;}
.sub_text em {color:#222; font-weight:500;}


/* ----------------------- 회사소개 ----------------------- */
/* 회사소개 > 인사말 */
.sub_contents.company_greeting {position:relative; display:flex; justify-content:center; width:100%; padding-bottom:10%;}
.sub_contents.company_greeting .sub_contents_in {width:1440px;}
.company_list01 {margin-top:80px; font-size:20px;}
.company_list01 li {margin-top:10px; color:#222;}
.company_list01 li span {display:inline-block; width:164px; color:#999;}
.sub_contents.company_greeting .company_contents {display:flex; flex-direction: row-reverse; width:100%;}
.sub_contents.company_greeting .sub_text {width:calc(100% - 580px);}
.sub_contents.company_greeting .sub_imgbox {width:500px; height:100%; margin-left:80px; background:#f2f2f2;}
.ceo_name {display:inline-block; position:relative; margin-top:15px;}
.ceo_name::after {content:''; position:absolute; top:0; right:-150px; display:inline-block; width:140px; height:80px; background:url(../images/ceo_sign.png) center no-repeat; background-size:100%; }
.ceo_sign {margin-top:15px;}
.company_list01 li em {margin-right:5px;}
.company_list01 li em:last-child {margin-left:20px;}

/* 회사소개 > 경영이념 */
.mision_contents {flex-direction:column; align-items:center; text-align:center; }
.mission_pictogram {position:relative; width:430px; height:406px; margin:85px auto 40px;}
.mission_pictogram::before {content:''; position:absolute; top:-50px; left:50%; transform:translateX(-50%); display:block; width:0; height:0; border-bottom: 250px solid #a7a7a7; border-top: 100px solid transparent;  border-left: 150px solid transparent; border-right: 150px solid transparent;}
.mission_pictogram::after {content:'한맥가족의 \ 공유가치'; position:absolute; top:50%; left:50%; transform:translate(-50%, -10%); display:block; width:100px; height:80px; text-align:center; font-weight:500; color:#fff; font-size:20px; line-height:24px;}
.mission_pictogram .move .dot { position: absolute; top: calc(50% - 5px); left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background-color: #9B1A1A; transform-origin: 50% 50%; opacity:1; z-index: 3; animation-duration:8s; animation-iteration-count: infinite; }
.mission_pictogram .dot.m_01 { animation-name: mission-dot-anim-01; }
.mission_pictogram .dot.m_02 { animation-name: mission-dot-anim-02; }
.mission_pictogram .dot.m_03 { animation-name: mission-dot-anim-03; }

.vi {/*background:#fafafa;*/ width:100%; padding:80px 0; margin:0 auto; }
.vi .vision_item { text-align: justify; margin-top: 30px; margin-bottom:50px; }
.vi .vision_item li { text-align: center; text-align-last: center;  display: inline-block; width: 59%;  vertical-align: middle;  height:150px; line-height:140px;  border-radius:100px;border:5px solid #092775; }
.vi .vision_item li:nth-child(2) { width:8%; border:none; border-radius: 0; border-bottom:3px dotted #dedede; height:4px;}
.vi .vision_item li:nth-child(3) { width:25%; border:3px solid #092775; }
.vi .vision_item li:nth-child(3) div {display:flex; align-items: center; height:150px;}
.vi .vision_item li strong {font-size:35px !important;   color:#333; text-align:center; font-weight:500;}
.vi .vision_item li p { font-size:20px !important; line-height:30px;  color:#555; margin:0 auto;  text-align:center; font-weight:300; _padding-top:48px; color:#444; }

@keyframes mission-dot-anim-01 {
0% { transform: rotate(10deg) translateX(190px); opacity:1}
33% { transform: rotate(130deg) translateX(190px); opacity:0 }
66% { transform: rotate(250deg) translateX(190px); opacity:1}
100% { transform: rotate(370deg) translateX(190px); opacity:0}
}
@keyframes mission-dot-anim-02 {
0% { transform: rotate(130deg) translateX(190px); opacity:1}
33% { transform: rotate(250deg) translateX(190px); opacity:0 }
66% { transform: rotate(370deg) translateX(190px); opacity:1}
100% { transform: rotate(490deg) translateX(190px); opacity:0 }
}
@keyframes mission-dot-anim-03 {
0% { transform: rotate(250deg) translateX(190px); opacity:1}
33% { transform: rotate(370deg) translateX(190px); opacity:0 }
66% { transform: rotate(490deg) translateX(190px); opacity:1}
100% { transform: rotate(610deg) translateX(190px); opacity:0 }
}

.circle_red_rotate02 {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:380px; height:380px; border:1px solid #A44D4D; opacity:0.5; border-radius:50%; animation: 10s linear infinite; _background-size:cover;}
.mission_pictogram li {position:absolute; width:180px; height:180px; border-radius:50%; text-align:center; font-size:26px; font-weight:700; color:#fff; padding-top:70px; box-sizing:border-box; box-shadow:2px 2px 8px rgba(0, 0, 0, .4); z-index:20;}
.mission_pictogram li span {display:block; font-size:12px; color:rgba(255, 255, 255, .5); font-weight:400;}
.Value_bg {position:relative; width:100%; height:350px; background:url(../images/value_bg.jpg) center no-repeat; background-size:cover; background-attachment:fixed; margin-top:80px; padding:0 218px;}
.Value_bg_bg::after {content:'Hanmac'; display:block; position:absolute; bottom:-32px; right:3%; font-size:100px; font-weight:800; color:#fff; opacity:.2; letter-spacing:-2px;}

.mission_pictogram .mission_technology {top:-10%; left:50%; transform: translateX(-50%);background:#2471CD;}
.mission_pictogram .mission_human {bottom:20px; left:-10%; background:#EC681D;}
.mission_pictogram .mission_nature {bottom:20px; right:-10%; background:#16973A;}
.pictogram_wrap {position:relative; display:flex; align-items:center; justify-content:center; width:1000px; height:700px; margin:0 auto;}
.pictogram_wrap::after {content:''; position:absolute; top:50%; transform:translateX(-50%); left:calc(50% - 225px); transform:translateY(-50%); display:block; width:450px; height:450px; background:rgba(237, 189, 189, .2); border:1px solid #A44D4D; border-radius:50%; z-index:1;}
.blue_circle {position:relative; display:flex; align-items:center; justify-content:center; width:270px; height:270px; line-height:50px; background:#0C3192; border-radius:50%; color:#fff; font-size:40px; font-weight:800; z-index:2;}
.circle_red_rotate {position:absolute; left:calc(50% - 270px); _transform:translateX(-50%); width:540px; height:540px; background:url(../images/circle_red.svg) center no-repeat; animation:spin 23s linear infinite; transform-origin: 50% 50%;}
  @keyframes spin {
    100% {transform:rotate(360deg);}
  }
  @keyframes dot-anim-04 {
  0% { transform: rotate(270deg) translateX(150px) }
  25% { transform: rotate(360deg) translateX(150px) }
  50% { transform: rotate(450deg) translateX(150px) }
  75% { transform: rotate(540deg) translateX(150px) }
  100% { transform: rotate(630deg) translateX(150px) }
  }
  @keyframes dot-anim-01 {
  0% { transform: rotate(0deg) translateX(150px) }
  25% { transform: rotate(90deg) translateX(150px) }
  50% { transform: rotate(180deg) translateX(150px) }
  75% { transform: rotate(270deg) translateX(150px) }
  100% { transform: rotate(360deg) translateX(150px) }
  }
  @keyframes dot-anim-02 {
  0% { transform: rotate(90deg) translateX(150px) }
  25% { transform: rotate(180deg) translateX(150px) }
  50% { transform: rotate(270deg) translateX(150px) }
  75% { transform: rotate(360deg) translateX(150px) }
  100% { transform: rotate(450deg) translateX(150px) }
  }
  @keyframes dot-anim-03 {
  0% { transform: rotate(180deg) translateX(150px) }
  25% { transform: rotate(270deg) translateX(150px) }
  50% { transform: rotate(360deg) translateX(150px) }
  75% { transform: rotate(450deg) translateX(150px) }
  100% { transform: rotate(540deg) translateX(150px) }
  }

/* mision 이미지 */
.mision_bg {position:relative; width:100%; height:380px; background:url(../images/mision_bg.jpg) center no-repeat; background-size:cover; background-attachment:fixed; margin-top:80px; padding:0 218px;}
.company_mision .mision_contents {display:flex; width:100%;}
.company_mision .mision_contents .sub_text {padding:0 3%; }
.company_mision .mision_contents .sub_text p {font-size:26px; font-weight:400; margin-bottom:10px; letter-spacing:-1.5px; color:#444;}
.company_mision .mision_contents .sub_text p .t_blue {font-weight:600; color:#397AC9;}
.company_mision .mision_contents .sub_text p .t_orange {font-weight:600; color:#2E994B;}
.company_mision .mision_contents .sub_text p .t_green {font-weight:600; color:#DD6F32;}
.mision_contents .sub_contents { max-width: 1440px; }
.mision_contents .eng_swdev_in {display:flex; justify-content:center;}
.mision_contents .eng_swdev_in,
.mision_contents .smart_build_in {display: flex; flex-direction: column; justify-content: flex-start; text-align: left; width:1440px; padding:80px 0 20px; }
.mision_contents .eng_swdev_in h4, .smart_build_in h4 {font-weight: 400; font-size: 36px; line-height: 1.2; padding-bottom: 12px; letter-spacing:-1px;}
.mision_contents .eng_swdev_in ul.desc_wrap { position: relative; opacity:.6; }
.mision_contents .eng_swdev_in ul.desc_wrap li { padding-left: 22px; }
.mision_contents .eng_swdev_in ul.desc_wrap li::before { content: "-"; position: absolute; left: 0; width: 20px; text-align: center; }
.mision_contents .eng_swdev_in h4 {font-size:32px}
.mision_contents .action_plan_wrap {display:flex; justify-content:center; width:100%; background:url(images/action_bg.png) top no-repeat;}
.mision_contents .eng_swdev_in {display:flex; justify-content:center;}
.action_plan { display: flex; justify-content: center; padding: 170px; }
.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; }
.circle_solid_pink { position: relative; width: 360px; height: 360px; margin: 0 auto; background: linear-gradient(rgba(237, 189, 189, 0.1), rgba(103, 18, 18, 0.1)); border-radius: 50%; border: 1px solid #A44D4D; }
.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; }
.circle_blue p { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color:#fff; font-size: 24px; font-weight: 500; text-align: center; line-height: 1.3; z-index: 2; }

.Value {position:relative;}
/* .Value::before {content:'Vision';position:absolute; bottom:31px; left:50%;transform: translateX(-50%);display:block; text-align:center; width:100%; font-size: 130px;font-weight: 800;opacity: .05;LETTER-SPACING: -7PX;} */

.mision_contents .action_plan {padding: 170px 170px 50px 170px;}
.action_plan_wrap {position:relative;}
/* .action_plan_wrap::before {content:'Shared Value';position:absolute;bottom: -168px; left: 0;transform: translateY(-50%);display:block; text-align:center;font-size: 160px;font-weight:800;opacity: .05;LETTER-SPACING: -7PX;} */

.fix_mo {display: none;}
.action_plan .fix p {font-size:18px; color:#000; font-weight: 700;display: flex; flex-direction: column; align-items: center;}
.action_plan .fix p span {font-weight:400;font-size: 14px;color: #999;}
.action_plan .fix_01 {position:absolute;top: -110px;left: 115px;text-align:center;}
.action_plan .fix_01::before {content:'';position:absolute;top: 31px;left: 40px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action01.svg) center no-repeat;}
.action_plan .fix_02 {position:absolute;top: 62px;right: -192px;text-align: left;}
.action_plan .fix_02::before {content:'';position:absolute;top: -6px;right: 135px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action02.svg) center no-repeat;}
.action_plan .fix_03 {position:absolute;top: 62px;left: -184px;text-align: center;}
.action_plan .fix_03::before {content:'';position:absolute;top: -6px;left: 129px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action03.svg) center no-repeat;}
.action_plan .fix_04 {position:absolute;bottom: -2px;right: -130px;text-align: right;}
.action_plan .fix_04::before {content:'';position:absolute;top: -12px;left: -54px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action04.svg) center no-repeat;}
.action_plan .fix_05 {position:absolute;bottom: -2px;left: -86px;text-align: right;}
.action_plan .fix_05::before {content:'';position:absolute;top: -12px;right: -54px;display:block;width:46px;height:46px;border-radius:50%;background:url(../images/icon_action05.svg) center no-repeat;}

.action_plan .fix_02 p {align-items: flex-start;}
.action_plan .fix_04 p {align-items: flex-start;}
.action_plan .fix_03 p {align-items: flex-end;}
.action_plan .fix_05 p {align-items: flex-end;}

.action_plan .dot {position:absolute; width:10px; height:10px; border-radius:50%; background-color:#9B1A1A; z-index:3; }
.action_plan .dot.f_01 {top:0; left:50%; transform: translateX(-50%) translateY(-6px); }
.action_plan .dot.f_02 {top:27%; right:3.5%; transform: rotate(-120deg);}
.action_plan .dot.f_03 {top:27%; left:3.5%; transform: rotate(30deg);}
.action_plan .dot.f_04 {bottom:15%; right:11%; transform: rotate(50deg);}
.action_plan .dot.f_05 {bottom:15%; left:11%; transform: rotate(-230deg);}
.action_plan .fix .dot::before { content: ''; position: absolute; border-top: 1.5px dashed #9B1A1A; width: 30px; z-index: 0; }
.action_plan .fix .dot.f_01::before { transform: translate(-50%, -50%) rotate(90deg); top: -160%; left: 50%; }
.action_plan .fix .dot.f_02::before { transform: translate(-50%, -50%) rotate(90deg); top: 270%; left: 50%; }
.action_plan .fix .dot.f_03::before { transform: translate(-50%, -50%) rotate(180deg); top: 50%; left: -170%; }
.action_plan .fix .dot.f_04::before { transform: translate(-50%, -50%) rotate(180deg); top: 50%; left: 260%; }
.action_plan .fix .dot.f_05::before { transform: translate(-50%, -50%) rotate(180deg); top: 50%; left: 260%; }
.action_plan .move .dot { position: absolute; top: calc(50% - 5px); left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background-color: #9B1A1A; transform-origin: 50% 50%; opacity: 0.3; z-index: 3; animation-duration: 12s; animation-iteration-count: infinite; }
.action_plan .dot.m_01 { animation-name: action-dot-anim-01; }
.action_plan .dot.m_02 { animation-name: action-dot-anim-02; }
.action_plan .dot.m_03 { animation-name: action-dot-anim-03; }
.action_plan .dot.m_04 { animation-name: action-dot-anim-04; }
.action_plan .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 .history_list .box{position:relative;}
.company_history .history_list .box::before{content:'';position:absolute;top: 365px;left:50%;transform:translateX(-50%);height: calc(100% - 365px);width: 1px;background: #eeeeee;}
.company_history .history_list .box::after{content:''; position:absolute; top: 365px; left:50%; transform:translateX(-50%); height: 0; width: 1px; background:var(--color-primary); transition:1s}
.company_history .history_list .box .mid_txt{position:absolute; top: 34%; left: 0; width: 100%; /* font-family: 'Roboto', sans-serif; */ font-weight:900; font-size:180px; color: #f8f8f8; text-align: center; text-transform: uppercase; z-index: -1;}
.company_history .history_list .box .h_tit{position:relative; height: 300px; background-size:cover !important;}
.company_history .history_list .box .h_tit.bg01{background:url(/img/sub/history01.png) 50% 50% no-repeat; }
.company_history .history_list .box .h_tit.bg02{background:url(/img/sub/history02.png) 50% 50% no-repeat; }
.company_history .history_list .box .h_tit.bg03{background:url(/img/sub/history03.png) 50% 50% no-repeat; }
.company_history .history_list .box .h_tit .txt{position:absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform:translate(-50%,-50%);}
.company_history .history_list .box .h_tit p{font-weight:bold; font-size:22px; color: #f37321; text-transform: uppercase;}
.company_history .history_list .box .h_tit h4{font-weight:bold; font-size:46px; color: #fff; margin-top: 20px;}
.company_history .history_list .box .h_tit h4 span{font-weight:500; font-size:32px;}
.company_history .history_list .box > ul{position:relative; _padding: 140px 0;}
.company_history .history_list .box > ul:last-of-type{padding-bottom:0;}
.company_history .history_list .box > ul > li{position:relative; width: calc(50% - 70px); margin-left: auto; padding-bottom:80px;}
.company_history .history_list .box > ul > li::before{content:'';position:absolute;top: 14px;left: -70px;width: 1px;height: 0; background:var(--color-primary);transition:0.5s}
.company_history .history_list .box > ul > li:nth-of-type(2n)::before{left: auto; right: -71px;}
.company_history .history_list .box > ul > li:first-of-type::before{height: 0; _top: -70px; top:0;}
.company_history .history_list .box > ul > li.on::before{height: 100%;}
.company_history .history_list .box > ul > li:first-of-type.on::before{height: calc(100% + 84px);}
.company_history .history_list .box:last-of-type > ul > li:last-of-type{padding-bottom:0;}
.company_history .history_list .box:last-of-type > ul > li:last-of-type::before{display:none; }
.company_history .history_list .box > 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 .history_list .box > ul > li > span::before{content:""; position:absolute; top: 20px; left: -75px; width: 10px; height: 10px; box-sizing:border-box; border-radius:50%; background: var(--color-primary); z-index: 2;}
.company_history .history_list .box > ul > li > span::after{content:""; position:absolute; top: 14px; left: -81px; width: 22px; height: 22px; box-sizing:border-box; border-radius:50%; background: #fff; border:1px solid var(--color-primary); transform:scale(0); transition:0.4s;}
.company_history .history_list .box > ul > li.on > span::after{transform:scale(1);}
.company_history .history_list .box > ul > li > ul > li{padding-left: 40px; position:relative;	font-size:20px; color:#444; margin-bottom:16px;}
.company_history .history_list .box > ul > li > ul > li:last-of-type{margin-bottom:0;}
.company_history .history_list .box > ul > li > ul > li > span{position:absolute;top: 0px; left: 0; font-weight:700; font-size:20px; color: #222;}
.company_history .history_list .box > ul > li:nth-of-type(2n){margin-left: 0; margin-right: auto; text-align: right;}
.company_history .history_list .box > ul > li:nth-of-type(2n) > span::before{left: auto; right: -75px}
.company_history .history_list .box > ul > li:nth-of-type(2n) > span::after{left: auto; right: -81px;}
.company_history .history_list .box > ul > li:nth-of-type(2n) > ul > li{padding-left: 0; padding-right: 40px; }
.company_history .history_list .box > ul > li:nth-of-type(2n) > ul > li > span{left: auto; right: 0;}
.company_history .history_list .box > ul > li .history_imgbox {margin-top:10px;}
.company_history .history_list .box > ul > li .history_imgbox img {width:50%; margin-bottom:6px;}

/* 회사소개 > 오시는길 */
.company_contents .contact .map{width: 100%; position: relative; padding-bottom: 4%;}
.company_contents .contact .map_box {width: 100%; height: 64vh; overflow: hidden; position: relative;}
.company_contents .contact .map_box iframe {width: 100%; height: 100%; border: none;}
.company_contents .contact .map_info {position: absolute; top: -32px; right: calc((100% - 1440px) / 2); background-color: #1555b6ee; width: 400px; height: 256px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; font-size: 20px;}
.company_contents .contact .map_info .logo {width: 48%; margin-top: 8px;}
.company_contents .contact .map_info .text {font-size: 20px; line-height: 32px; text-align:center; display: flex; flex-direction: column; justify-content: center; align-items: center; letter-spacing: 0;}
.company_contents .contact .map_info .text .addr {display:block; margin-bottom: 16px;}
.company_contents .contact .map_info .text p .bold {font-weight: 700; width: 50px; display: inline-block;}
.company_contents .dept_num {margin: 0 auto; padding-bottom: 8%; }
.company_contents .dept_num h4 {font-size: 32px; padding-bottom: 24px;}
.company_contents .dept_num .nums {width: 100%;}
.company_contents .dept_num .nums ul {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 24px; pointer-events: none;}
.company_contents .dept_num .nums ul li {box-shadow: 0 0 0 1px #ddd; display: flex; padding: 12px 24px; justify-content: space-between; align-items: center; font-size: 18px;}
.company_contents .dept_num .nums ul li .telnum {width: fit-content; padding: 12px 0 12px 32px;}
.company_contents .dept_num .nums ul li span:last-child {position: relative; font-weight: 700;}
.company_contents .dept_num .nums ul li span:last-child::after {position: absolute; content: ""; top: 50%; left: -24px; width: 16px; height: 16px; background:url(../images/ico_call.svg) no-repeat center; background-size: 12px; transform: translateY(-50%);}


/* ----------------------- 은진 ----------------------- */
/* 기술개발 > 기술개발센터 */
.technology_contents { position: relative; flex-direction: column; align-items: center; text-align: center; }
.sub_contents.technology_center { width: 100%; padding: 0; }
.technology_center .sub_contents_in {width: 100%; margin: 0;}
.intro_center {padding: 60px 3% 20px; max-width: 1440px; margin: 0 auto 60px;}
.intro_center h3 {line-height: 1.2;}
.intro_center h3 br {display: none;}

.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; }
.dot_glow.hanmac { left: -52px; top: 28px; }
.dot_glow.ptc { right: -151px; top: 75px; }
.dot_glow.saman { right: -180px; top: 251px; }
.dot_glow.jangheon { left: -134px; top: 318px; }
.dot_glow.halla { right: 173px; top: 120px; }
.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; }
.dot_glow.hanmac:before { animation-delay: 1s; }
.dot_glow.ptc:before { animation-delay: 2s; }
.dot_glow.saman:before { animation-delay: 3s; }
.dot_glow.jangheon:before { animation-delay: 4s; }
.dot_glow.halla:before { animation-delay: 5s; }

@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; }
}

.eng_swdev, .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;}
.eng_swdev h4, .smart_build h4 { font-weight: 400; color: #222; font-size: 32px; line-height: 1.2; padding-bottom: 12px; letter-spacing:-1px;}
.eng_swdev ul.desc_wrap { position: relative; }
.eng_swdev ul.desc_wrap li { padding-left: 22px; }
.eng_swdev ul.desc_wrap li::before { content: "-"; position: absolute; left: 0; width: 20px; text-align: 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; }
.l_img { background-color: #000; width:1063px; height: 734px; }
.quantum { position: absolute; display: flex; margin-bottom: 150px; top: 46px; justify-content: center; animation: float 1.7s ease-in-out infinite; }

 @keyframes float {
 0% { transform: translateY(0); }
 50% { transform: translateY(-20px); }
 100% { transform: translateY(0); }
 }

.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; }
.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); }
.quantum img.atom_all { position: absolute; height: 400px; width: auto; opacity: 0.7; }
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; }
p.bg_txt br {display: none;}

.sw_3d {justify-content: center; width: 100%; margin: 40px 0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.sw_3d .circle-container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; height: 460px}
.sw_3d .circle-container > * {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%;}
.sw_3d .circle_line {width:85%; height:85%; border: 1.5px dashed #A44D4D33;}
.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;}
.sw_3d .circle_blue {width:55%; height: 55%; background: linear-gradient(#0C3192, #092775); box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}
.sw_3d .dot_wrap {width: 100%; height: 100%; }
.sw_3d .dot_wrap.move {animation-duration: 12s; animation-iteration-count: infinite; animation-name: dot-rotate; top: 0; left: 0; opacity: 0.3;}
.sw_3d .dot_wrap .dot {position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #9B1A1A;}
.sw_3d .dot_wrap .dot::before {position: absolute; content: ""; width: 1px; height: 48px; border-left: 1.5px dashed #9B1A1A;  bottom: 0; left: 50%; }
.sw_3d .dot_wrap.move .dot::before {display: none;}
.sw_3d .dot_wrap .dot:nth-child(1){top: 50px; left: 50%; transform: translateX(-50%);}
.sw_3d .dot_wrap .dot:nth-child(2) {top: 50%; right: 50px; transform: translateY(-50%) rotate(90deg);}
.sw_3d .dot_wrap .dot:nth-child(3) {bottom: 50px; left: 50%; transform: translateX(-50%) rotate(180deg);}
.sw_3d .dot_wrap .dot:nth-child(4){top: 50%; left: 50px; transform: translateY(-50%) rotate(-90deg);}
.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);}
}

.sw_3d .fix_wrap {width: 100%; max-width: 780px; height: 680px; position: relative; font-size: 14px; color:#888; line-height: 1.2;}
.sw_3d .fix_wrap .fix_cont {position: absolute; text-align: center; }
.sw_3d .fix_wrap .fix_cont img {width: 42px;}
.sw_3d .fix_wrap .fix_cont li {text-indent:-8px; padding-left:10px; margin-bottom:5px;}
.sw_3d .fix_wrap .fix_cont:nth-child(1) {top: 0; left: 50%; transform: translateX(-50%);}
.sw_3d .fix_wrap .fix_cont:nth-child(2) {top: 50%; right: 0; transform: translateY(-50%); text-align: left;}
.sw_3d .fix_wrap .fix_cont:nth-child(3) {bottom: 0; left: 50%; transform: translateX(-50%);}
.sw_3d .fix_wrap .fix_cont:nth-child(4) {top: 50%; left: 0; transform: translateY(-50%); text-align: right;}
.sw_3d .fix_wrap .fix_cont em {display:block; margin:10px 0; font-size: 18px; color:#000; line-height:22px;}
.sw_3d .fix_wrap .fix_cont .fix_03 p .br_mo {display:none;}


.eng_swdev .rec { display: grid; grid-template-columns: repeat(2, 1fr); position: relative; width: 100%; max-width: 1440px; margin-top: 40px; gap: 16px;}
.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; }
.eng_swdev .rec_01 { background: url(../images/tech_rec_01.png) 0 0 / contain no-repeat; }
.eng_swdev .rec_02 { background: url(../images/tech_rec_02.png) 0 0 / contain no-repeat; }
.eng_swdev .rec_03 { background: url(../images/tech_rec_03.png) 0 0 / contain no-repeat; }
.eng_swdev .rec_04 { background: url(../images/tech_rec_04.png) 0 0 / contain no-repeat; }
.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; }

.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;}
.smart_build .smart_img > div {position: relative;}
.smart_build .smart_img > div br {display: none;}
.smart_build .smart_img > div:nth-child(1) {grid-column: 1 / span 2; grid-row: 1 / span 3; overflow: hidden; position: relative;}
.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%);}
.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;}
.smart_build .smart_img  .pic_big .pic_num {width: 32px; height: 32px; font-size: 20px;}
.smart_build .smart_img  .pic_big .pic_num:nth-child(1) {top: 24%; left: 28%;}
.smart_build .smart_img  .pic_big .pic_num:nth-child(2) {top: 45%; left: 60%;}
.smart_build .smart_img  .pic_big .pic_num:nth-child(3) {top: 80%; left: 52%;}
.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;}
.smart_build .smart_img > div:nth-child(1) .pic_info {background-color: #000}
.smart_build .smart_img > div img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

.feature_list {display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 16px;}
.feature_list li { width: 100%; border-radius: 6px; padding: 30px 0; background-color: #f1f1f1; text-align: center; }
.feature_list p { font-size: 16px; color: #6B6B6B; }
.feature_list em { font-size: 20px; color: #1562BE; }


/* 기술개발-R&D  technology_rnd */
.technology .rnd {margin: 0 auto; margin-bottom: 120px;}
.technology .rnd > div {width: 100%;}
.technology .rnd h4 {font-size: 32px; color: initial; margin-bottom: 20px;}
.technology .rnd .h4_main  {font-size: 32px; }
.technology .rnd .major .brk {display: none;}
.technology .rnd .major h5 {font-size:20px; margin-bottom:8px; letter-spacing:-0.05em;}
.technology .rnd .list {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 24px; pointer-events: none;}
.technology .rnd .list > li {box-shadow: 0 0 0 1px #ddd; padding: 24px 32px;}
.technology .rnd .list > li:nth-child(2) .thms_wrap {height:348px;}
.technology .rnd .list > li .thms_wrap {display: flex; justify-content: space-between;  gap: 16px; width: 100%; height: 320px; margin: 24px 0;}
.technology .rnd .list > li .thm {width: 100%; height: 100%; position: relative;}
.technology .rnd .list > li .thm img {width: 100%; height: 50%; object-fit: cover; object-position: center;}
.technology .rnd .list > li .thm .thm_tit {position: absolute; font-size: 12px; font-weight: 700; color: #fff; padding: 4px 8px; z-index: 1; text-align: center;}
.technology .rnd .list > li .thm .thm_tit::before {position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--color-primary); z-index: -1; opacity: 0.7;}
.technology .rnd .list > li .thm.lay2 .thm_tit:nth-of-type(1) {top: 0; left: 0;}
.technology .rnd .list > li .thm.lay2 .thm_tit:nth-of-type(2) {bottom: 0; left: 0;}
.technology .rnd .list > li .thm.lay4 img {width: 50%; float: left;}
.technology .rnd .list > li .thm.lay4 .thm_tit {width: 50%;}
.technology .rnd .list > li .thm.lay4 .thm_tit:nth-of-type(1) {top: 0; left: 0;}
.technology .rnd .list > li .thm.lay4 .thm_tit:nth-of-type(2) {top: 0; right: 0;}
.technology .rnd .list > li .thm.lay4 .thm_tit:nth-of-type(3) {bottom: 0; left: 0;}
.technology .rnd .list > li .thm.lay4 .thm_tit:nth-of-type(4) {bottom: 0; right: 0;}
.technology .rnd .list > li .info {width: 100%; display: grid; grid-template-columns: minmax(30px, auto) 1fr; grid-column-gap: 24px; grid-row-gap:12px; margin-top: 24px;}
.technology .rnd .list > li .thm.gaia img {height: 100%;}
.technology .rnd .list > li .thm.gaia .thm_tit {top:0}
.technology .rnd .list > li .thm.lay2 .thm_tit.twin {top: 50%; left: 0; transform: translateY(-50%); font-size: 16px; border: 2px solid #fff; border-top-right-radius: 8px; border-bottom-right-radius: 8px; overflow: hidden; border-left-width: 0;}
.technology .rnd .list > li .thm.lay2 .thm_tit.twin::before {opacity: 1;}
.technology .rnd .list > li .thm.lay2 .thm_arr.ver {position: absolute; width: 20px; height: 100%; top: 50%; left: 0; transform: translate(8px, -50%);}
.technology .rnd .list > li .thm.lay2 .thm_arr.ver::before,
.technology .rnd .list > li .thm.lay2 .thm_arr.ver::after {position: absolute; content: ""; width: 100%; height: 50%; background-image: url(../images/thm_arrow_ver.svg); background-repeat: no-repeat; background-size: contain; background-position: bottom center;}
.technology .rnd .list > li .thm.lay2 .thm_arr.ver::before {top: 25%; left: 0;  transform: translateY(-50%);}
.technology .rnd .list > li .thm.lay2 .thm_arr.ver::after { bottom: 25%; left: 0; transform: rotate(180deg) translateY(-50%);}
.technology .rnd .list > li .thm.lay2 .thm_arr.hori {position: absolute; width: 100%; height: 20px; bottom: 0; left: 50%; transform: translate(-50%, -8px); display: none;}
.technology .rnd .list > li .thm.lay2 .thm_arr.hori::before,
.technology .rnd .list > li .thm.lay2 .thm_arr.hori::after {position: absolute; content: ""; background-image: url(../images/thm_arrow_hori.svg); background-position: center right; width: 50%; height: 100%; background-repeat: no-repeat; background-size: contain;}
.technology .rnd .list > li .thm.lay2 .thm_arr.hori::before {left: -40px;}
.technology .rnd .list > li .thm.lay2 .thm_arr.hori::after {transform: rotate(180deg); left: calc(50% + 40px);}

.technology .rnd .list > li .logo {grid-row-end: span 2;}
.technology .rnd .list > li .logo img {height: 52px; object-fit: contain;}
.technology .rnd .list > li .detail {font-size: 14px; color: #999;}
.technology .rnd .list > li .detail span {display:block;}
.technology .rnd .list > li .detail span > em {margin-right: 12px;}
.technology .rnd .list > li .tit {font-size: 18px; font-weight: 700;}
.technology .rnd .projects {margin-top: 120px;}
.technology .rnd .projects .tit {margin-top: 8px;}
.technology .rnd .projects .contents {padding-left: 10px; font-size: 14px; line-height: 24px; margin-top: 16px;}
.technology .rnd .projects .contents > li {list-style-type:"- ";}

.technology .technology_contents .br_mo {display:block;}

/* 기술개발 > 지식재산권 */
.tab_content {display:none; width:100%;}
.tab_content.active { display: block; width: 100%; }
.sub_tab_menu { display: flex; gap: 6px; justify-content: center; align-items: center; width: 708px; max-width: 100%; margin-bottom: 60px; }
.sub_tab_menu .newtech li { flex: 0 0 33.33333%; max-width: 33.33333%; background-color: #ececec; cursor: pointer; }
.sub_tab_menu > li { flex: 0 0 33.33333%; max-width: 33.33333%; background-color: #ececec; cursor: pointer; }
.sub_tab_menu > li.active { background-color: var(--color-primary); }
.sub_tab_menu > li a { color: #666; border-bottom: none; padding: 19px 0; width: 100%; height: 100%; display: inline-block; }
.sub_tab_menu > li.active a { color: #fff; font-weight: 500; }
.tab_content { flex-direction: column; justify-content: flex-start; text-align: left; max-width: 1440px; padding-bottom: 100px; }
.tab_content .total p { font-size: 16px; }
.tab_content .total span { color:var(--color-primary); font-weight: 600; }
.tab_content.newtech ul { display: flex; flex-direction: row; justify-content: space-between; margin-top: 14px; flex-wrap: wrap; }
.tab_content.ip ul,
.tab_content.design ul { display: flex; flex-direction: column; justify-content: space-between; margin-top: 14px; gap: 20px; }
.tab_content li { display: flex; flex-direction: column; justify-content: flex-start; flex: 0 0 32.5%; border:1px solid #ccc; padding:32px; }
.tab_content.ip li,
.tab_content.design li { display: flex; align-items: center; flex-direction: row; justify-content: space-between; flex: 0 0 100%; border: 1px solid #ccc; _padding: 40px; height: 164px; gap: 20px; }
.img_scan { width:100%; }
.tab_content.newtech li img { width: 100%; }
.tab_content .download { font-size: 16px; font-weight: 600; }
.item_wrap .desc_data {_display:flex; _gap:24px;}
.item_wrap li {position: relative;}
.technology .item_wrap li a {width:100%;}
.technology .item_wrap li a::after {content:''; display:inline-block; position:absolute; right:30px; top:20px; _top:calc(50% - 10px); _translate:translateY(-50%); color:#999; transition: .2s;;}
.technology .item_wrap li:hover a::after {right:46px; color:#1555B6; font-weight:600;}
.technology .item_wrap.hover_box3 li::before {content:''; position:absolute; top:8px; left:calc(100% - 110px); width:90px; height:40px; margin-left:0; display:block; background:#fff url(../images/icon_download.svg) right 30% no-repeat; background-size:24px; color:#1555B6;  line-height:32px; opacity:0;}
.technology .item_wrap.hover_box3 li:hover::before {_margin-left:6px; margin-top:6px; transition:.2s; opacity:1;}

.download img { display: inline-block; width: 24px; height: 24px; vertical-align: -6px; }
.download p { display: inline-block; padding-right: 4px; }
.download .downsvg { display: inline-block; vertical-align: middle; height: 24px; }
.download a { display: flex; justify-content: space-around; align-items: center; width: 90px; }
.download a:hover p { color: var(--color-primary); }
.download a:hover rect { fill:var(--color-primary); }
.img_desc p.desc_no, p.desc_date { color:#aaa; font-weight: 600; }
.img_desc p.desc_no span, p.desc_date span { color:#aaa; font-weight:400; padding-left: 6px; }
.img_desc p.desc_tit { color:#000; font-size: 18px; font-weight:600; padding:10px 0; line-height: 1.2; }
.ipdesign_desc { width: 86%; }
.ipdesign_desc p.desc_no { margin-right: 40px; }
.ipdesign_desc p.desc_no, p.desc_date { display: inline-block; color:#aaa; font-weight: 600; }
.ipdesign_desc p.desc_no span, p.desc_date span { color:#aaa; font-weight:400; padding-left: 6px; }
.ipdesign_desc p.desc_tit { color:#000; font-size: 22px; font-weight:600; padding-top:12px; line-height: 1.4; }

/* 회사소개 > 업면허 */
.sub_contents.company_license { position:relative; width:100%; display:flex; justify-content: center; padding-bottom:5%; }
.sub_contents.company_license .sub_contents_in { width:1440px; }
.sub_contents.company_license h4 { font-size: 36px; font-weight: 400; letter-spacing: -0.05em; padding: 16px 0; z-index: 1; }
.sub_contents.company_license .eng_cont { display:flex; flex-direction: column; margin-bottom: 60px; }

.eng_cont .desc_data p { display: inline-block; color: #aaa; font-weight: 600; margin-right: 30px; }
.eng_cont .desc_data span { color: #aaa; font-weight: 400; padding-left: 8px; }
.eng_cont_in { display: flex; gap: 16px; padding-top:20px; }
.eng_cont_in div {width: 50%;;}
.eng_cont_in img { width: 100%; }
.eng_cont_in p { font-size: 22px; font-weight: 600; padding: 16px 0 8px }
.eng_cont_in span { font-size: 16px; color:#666; }

.lic_cont .total h4 { display: inline-block; }
.lic_cont .total p { display: inline-block; font-size: 20px; padding-left: 16px; }
.lic_cont .total span { color: var(--color-primary); font-weight: 600; }
.lic_cont .lic_desc { width: 100%; }
.lic_cont .lic_desc .desc_data { display: flex; flex-direction: column; margin-top:10px;}
.lic_cont .lic_desc .desc_data .desc_org { flex:2; }
.lic_cont .lic_desc .desc_data .desc_no { flex:2; }
.lic_cont .lic_desc .desc_data .desc_date { flex:1.5; }
.lic_cont .lic_desc .desc_data p { font-size: 14px; display: inline-block; color: #aaa; font-weight: 600; }
.lic_cont .lic_desc .desc_data span { font-weight: 400; padding-left: 8px; }
.lic_cont .lic_desc .desc_tit { font-size: 18px; font-weight: 600; padding:0 0 10px 0; letter-spacing: -0.03em;; }
.lic_cont ul { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 18px; margin: 0 auto; }
.lic_cont li { display: flex; flex-grow: 0; flex-basis: auto; flex-shrink: 1; align-items: center; flex-direction: row; justify-content: space-between; border: 1px solid #ccc; padding: 24px; width: 49.4%; height: 110px; }

/* ----------------------- //은진 ----------------------- */


/* -----------------홍보센터------------------------ */
/* 한맥뉴스 */
.pr_news .sub_contents_in {width:1440px; margin:0 auto; padding-bottom:140px;}
.pr_news .con_list {width:100%;}
.pr_news .con_list li {position:relative; border:1px solid #ddd; margin-bottom:20px;}
.pr_news .con_list a {display:flex; justify-content:space-between; width:100%; padding:24px; box-sizing:border-box;}
.pr_news .con_list a #newsDate {width:140px; font-size:26px; font-weight:800; line-height:26px;}
.pr_news .con_list a #newsYear {display:block; font-size:16px; color:#BFBFBF; font-weight:600;}
.pr_news .con_list a .text_wrap {width:calc(100% - 140px);}
.pr_news .con_list a .text_wrap div:first-child {width:calc(100% - 170px - 24px);}
.pr_news .con_list a .text_wrap.none div:first-child {width:100%;}
.pr_news .con_list a .text_wrap div {display:flex; flex-direction:column; justify-content: space-around;}
.pr_news .con_list a .news_title {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:22px; font-weight:600; letter-spacing:-0.4px;}
.pr_news .con_list a .news_text {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:24px; font-size:16px; font-weight:400; color:#666;}
.pr_news .con_list a > div {display:flex; justify-content:space-between;}
.pr_news .con_list a .news_imgbox {width:170px; height:110px; background:#ddd;}
.pr_news .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;}
.pr_news .con_list  > li:hover::before {margin-left:12px; transition:.2s; opacity:1;}
.pr_news .con_list .news_imgbox img {width: auto; height:100%;}

/* 한맥뉴스 디테일 */
.pr_news .news_detail .title > div {display:inline-block;}
.pr_news .news_detail .title > div > h4 {width:100%; padding:20px 0;}
.pr_news .news_detail .contents > div > .text_wrap {font-size:18px;}
.pr_news .news_detail .list .prev > p::after {padding:0 20px;}
.pr_news .news_detail .list .prev.none > p::after {padding:0 20px;}
.pr_news .news_detail .list .next > p::after {padding:0 20px;}
.pr_news .news_detail .title > div {display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:24px 0; border-top: #000 1px solid; border-bottom: #c7c7c7 1px solid;}
.pr_news .news_detail .title > div > h4 {font-size:32px; font-weight:700; letter-spacing:-0.05em; width:calc(100% - 108px - 160px);}
.pr_news .news_detail .title > div > p span {font-size:20px; font-weight:600; color:#a3a3a3; width:108px;}
.pr_news .news_detail .contents > div {padding:60px 0; border-bottom: #c7c7c7 1px solid;}
.pr_news .news_detail .contents > div > .img_box {width:100%; height:100%; background-color:#fff; margin-bottom:40px; text-align: center;}
.pr_news .news_detail .contents > div > .img_box img {width:50%;}
.pr_news .news_detail .contents > div > .img_box .w100 {width:100%;}
.pr_news .news_detail .contents > div > .img_box .w80 {width:80%;}
.pr_news .news_detail .contents > div > .img_box .w60 {width:60%;}
.pr_news .news_detail .contents > div > .img_box .w50 {width:50%;}
.pr_news .news_detail .contents > div > .img_box .w25 {width:25%;}
.pr_news .news_detail .contents > div > .text_wrap {height:calc(100% - 640px); letter-spacing:-0.05em; line-height:45px; font-size:22px; margin-top:50px; font-weight: 300;}
.pr_news .news_detail .contents.none > div > .text_wrap {height:100%; letter-spacing:-0.05em; line-height:45px; font-size:20px;}
.pr_news .news_detail .list_btn {display:flex; justify-content:flex-end; padding:60px 0;}
.pr_news .news_detail .list_btn > button {width:222px; height:84px; background-color:#2460BA; color:#fff; font-size:24px; font-weight:bold;}
.pr_news .news_detail .list > li {display:flex; justify-content:flex-start; align-items:center; font-size:20px; padding:30px 0; border-top: #c7c7c7 1px solid;}
.pr_news .news_detail .list .prev > p::after {content:""; display:inline-block; background:url(../images/prev.svg) center no-repeat; width:16px; height:16px; padding:0 50px;}
.pr_news .news_detail .list .next > p::after {content:""; display:inline-block; background:url(../images/next.svg) center no-repeat; width:16px; height:16px; padding:0 50px;}
.pr_news .news_detail .list .next {border-bottom: #c7c7c7 1px solid;}
.pr_news .news_detail .list > li > a {width:80%; word-break:break-word; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}

/* 이전글이 없습니다 */
.pr_news .news_detail .list .prev.none > p::after {content:""; display:inline-block; background:url(../images/prev_gray.svg) center no-repeat; width:16px; height:16px; padding:0 50px;}
.pr_news .news_detail .list .prev.none > a {color: #D1D1D1;}
.pr_news .news_detail .list .next.none > a {color: #D1D1D1;}

/* 한맥뉴스 디테일 */
.pr_news .news_detail .list .prev > p::after {padding:0 10px;}
.pr_news .news_detail .list .prev.none > p::after {padding:0 10px;}
.pr_news .news_detail .list .next > p::after {padding:0 10px;}

/* 홍보센터 PR CONTENTS */
.pr_ci {padding-bottom:40px;}
.pr_contents {display:flex; flex-direction:column; align-items:center; width:100%;}
.pr_contents > div {margin-bottom:100px;}
.pr_contents h4 {margin-bottom:12px; font-size:32px; font-weight:700; letter-spacing:-0.05em;}
.pr_contents .grid {width:100%; padding:80px 0; border:1px solid #b6b6b6; border-radius:5px; background-size: 16px 16px; background-position: -1px -2px; background-image:linear-gradient(90deg, #eaeaea 1px, transparent 1px), linear-gradient(#eaeaea 1px, transparent 1px);}
.sub_container .text {font-size:18px; letter-spacing:-1px; margin-top:10px;}
.sub_container .text .blue {color:var(--color-primary); font-weight:500;}
.sub_container .text .red {color:var(--color-secondary); font-weight:500;}

/* 심볼마크 */
.h4_wrap {position:relative; display:flex; justify-content:space-between; align-items:flex-start; width:100%;}
.pr_symbol {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:48px;}
.pr_symbol .btn_ci {display:flex; justify-content:center; align-items:center; position:relative; padding:0 62px 0 24px; height:60px; border:1px solid #000; border-radius:2px; font-size:22px; font-weight:500; }
.pr_symbol .btn_ci::after {content:''; display:inline-block; position:absolute; top:16px; right:24px; background:url(../images/arrow.svg) no-repeat center; width:16px; height:22px; background-size:16px;}
.pr_symbol .btn_ci:hover {background-color:var(--color-primary); color:#fff; border:1px solid var(--color-primary);}
.pr_symbol .btn_ci:hover::after {background:url(../images/arrow_w.svg) no-repeat center;}
.pr_symbol .mark {display:flex; justify-content:center; align-items:center;}
.pr_symbol .mark div {display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; _gap:17px;}
.pr_symbol .mark div:nth-child(2) {margin:0 60px 0 40px;}
.pr_symbol .mark div:nth-child(2)::before, .pr_symbol .mark div:nth-child(2)::after {display:inline-block; position:absolute; top:25px; font-size:40px; color:#666; font-weight:300;}
.pr_symbol .mark div:nth-child(2)::before {content:"+"; left:-40px;}
.pr_symbol .mark div:nth-child(2)::after {content:"="; right:-40px;}
.pr_symbol .mark div p {margin-top:20px; text-align: cneter;}
/* 한맥이미지 */
.pr_bg {position:relative; width:100%; height:350px; background:url(../images/hm_main.jpg) no-repeat; background-size:cover; background-attachment:fixed; padding: 0 218px;}
.pr_bg::after {content:'Hanmac'; display:block; position:absolute; bottom:-32px; right:3%; font-size:100px; font-weight:800; color:#fff; opacity:.2; letter-spacing:-2px;}
/* 워드마크 */
.pr_word .mark {display:flex; justify-content:center; align-items:center;}
.pr_word .mark img {width:370px;}
/* 시그니처 */
.pr_signature ul {display:flex; gap:24px;}
.pr_signature ul li {display:flex; justify-content:center; align-items:center;}
/* 전용색상 */
.pr_color .palette {display:flex; justify-content:space-between; width:100%; gap:24px;}
.pr_color .palette li {width:100%; border-radius:5px; }
.pr_color .palette li div {display:flex; align-items:flex-end; justify-content:space-between; height:200px; padding:20px; color:#fff; border-radius:4px;}
.pr_color .palette li div p {font-weight:600;}
.pr_color .palette li div span {font-weight:400 ;}
.pr_color .palette li.red div {background:var(--color-secondary);}
.pr_color .palette li.blue div {background:var(--color-primary);}
.pr_color .palette li.black div {background:#000;}
.pr_color .palette .palette_info {margin-top:20px; color:#999; font-weight: 400;}

/* 브로슈어 */
.pr_brochure {display:flex; width:100%; justify-content:space-between; gap:52px;}
.pr_brochure ul {display:flex; gap:24px; _margin:20px 0 40px;  _height:450px;}
.pr_brochure ul li a {position:relative; display:block; }
.pr_brochure ul li span {display:block; padding:14px 0 20px; font-size:22px; font-weight:500;}
.pr_brochure ul li:hover span {position:relative; padding:14px 20px 20px 20px; transition:.2s;}
.pr_brochure ul li:hover span::after {content:'PDF보기'; display:inline-block; margin:0 20px 0 4px;}
.pr_brochure ul li:hover span::before {content:''; display:inline-block; position:absolute; bottom:25px; right:0px; background:url(../images/view.svg) center no-repeat; width:25px; height:25px;}
.pr_brochure h4 {font-size: 32px; font-weight: 500;}

.brochure_list {display:flex; width:100%; justify-content:space-between; gap:24px; margin-top:24px;}
.brochure_list li {flex:1; background:#f1f1f1;}
.brochure_list li div {text-align:center; padding:50px 40px;}
.brochure_list li div img {width:100%; box-shadow:4px 4px 10px rgba(0, 0, 0, .3);}
.brochure_list li p {padding:20px; border-top:1px solid #d9d9d9;}
/* .brochure_list li p::after {content:'pdf 보기'; margin-left:6px; display:inline-block; color:#fff; opacity:0;} */
.brochure_list li:hover p {background:#1555B6; color:#fff; font-weight:600; transition:.2s; }
.brochure_list li:hover p::after {opacity:1;}
.brochure_list li::before {content:''; position:absolute; top:14px; left:calc(100% - 52px); margin-left:0; display:block; background:#fff url(../images/view.svg) center 35% no-repeat; width:40px; height:40px; opacity:0;}
.brochure_list li:hover::before {margin-left:8px; margin-top:-8px; transition:.2s; opacity:1;}


/* -----------------유나 작성------------------------ */
/* 사업영역 BUSINESS CONTENTS */
.business .sub_banner_wrap p .brk {display: none;}
.business .sub_tab_b {display: none;}

/* business > 사업영역 */
.business {overflow-x: hidden;}
.business .sub_tab {display: none;}
.business .sub_tab_b {display: block; position: absolute; top:602px; left:50%; transform:translateX(-50%); width: 1440px; 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; line-height:18px;}
.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_contents {display: flex; flex-direction: column; align-items: center; width: 100%; }
.business_contents h4 {font-size: 36px; font-weight: 400; line-height:40px; _letter-spacing: -0.05em;}

/* 01.LNB 헤더  business_contents > top_box  */
.business_contents .head {width: 100%; padding-bottom: 8%; position: relative;}
.business_contents .eng_menu {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.business_contents .eng_menu::after {position: absolute; top:-120px; left: 40px; width: 100%; height: 100%; text-align: right; font-size: 150px; line-height: 140px; font-weight: 900; color: #f3f3f3; z-index: -1; letter-spacing: -0.06em;}
.business_contents .top_box {width: 100%; height: 500px; background-repeat:no-repeat; background-position: center; background-size: cover;}
.business_contents .top_text {position: absolute; top: 0; left: 0; width: 550px; padding: 24px; background-color: var(--color-primary); color: #fff;}

/* LNB별 탑이미지 & 영문명 */
/* 전체 */
/*.all .eng_menu::after {content: "All Business"; top: -60px;} */
/*도로*/
.roads .top_box {background-image: url(../images/roads_topBox.jpg);}
/* .roads .eng_menu::after {content: "Roads";} */
/*구조*/
.structure .top_box {background-image: url(../images/structure_topBox.jpg);}
/* .structure .eng_menu::after {content: "Structure";} */
/*지반터널*/
.ground .top_box {background-image: url(../images/ground_topBox.jpg);}
/* .ground .eng_menu::after {content: "Ground Tunnel";} */
/*교통*/
.transport .top_box {background-image: url(../images/transport_topBox.jpg);}
/* .transport .eng_menu::after {content: "Transportation";} */
/*도시계획*/
.urban .top_box {background-image: url(../images/urban_topBox.jpg);}
/* .urban .eng_menu::after {content: "Urban Planning";} */
/*조경*/
.landscape .top_box {background-image: url(../images/landscape_topBox.jpg);}
/* .landscape .eng_menu::after {content: "Landscape";} */
/*수자원*/
.waterRsc .top_box {background-image: url(../images/waterRsc_topBox.jpg);}
/* .waterRsc .eng_menu::after {content: "Water Resources";} */
/*환경평가*/
.envEvl .top_box {background-image: url(../images/envEvl_topBox.jpg);}
/* .envEvl .eng_menu::after {content: "Environmental Evaluation"; top: -110px; font-size: 100px;} */
/* 상하수도 */
.waterSS .top_box {background-image: url(../images/waterSS_topBox.jpg);}
/* .waterSS .eng_menu::after {content: "Water Supply & Sewage"; font-size: 130px;} */
/*건설사업관리*/
.constructionPM .top_box {background-image: url(../images/constructionPM_topBox.jpg);}
/* .constructionPM .eng_menu::after {content: "Construction Project Management"; top: -105px; font-size: 92px;} */
/*안전진단*/
.safety .top_box {background-image: url(../images/safety_topBox.jpg);}
/* .safety .eng_menu::after {content: "Safety Assessment";} */
/*항만*/
.ports .top_box {background-image: url(../images/ports_topBox.jpg);}
/* .ports .eng_menu::after {content: "Ports";} */

/* 전체사업영역 */
.sub_contents.all {position: relative; overflow: hidden;}
.sub_contents.all::after {position: absolute; content: "Hanmac Enginnering"; width: fit-content; height: fit-content; bottom: -12px; right: 0; font-size: 150px; line-height: 140px; font-weight: 900; color: #f3f3f3; z-index: -1; letter-spacing: -0.06em;}
.sub_contents.all::before {position: absolute; content: ""; width: 100%; height: 100%; top: 170px; left: 0; background: url(../images/line.svg) no-repeat; background-size: 100%;}
.business_contents .all_areas {padding-bottom:8%;}
.business_contents .all_areas .list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 20px;}
.business_contents .all_areas .list ul li {position: relative; padding-bottom: 24px;}
.business_contents .all_areas .list ul li .thm {width: 100%; height: 200px; background: url(../images/logo_hm.svg) no-repeat center, #eee; background-size: 60%; overflow: hidden; position: relative;}
.business_contents .all_areas .list ul li .thm img {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.business_contents .all_areas .list ul li .text {margin-top:20px; height:218px;}
.business_contents .all_areas .list ul li .text.long {height:443px;}
.business_contents .all_areas .list ul li:hover .text {padding: 0 24px;}
.business_contents .all_areas .list ul li span {display: block; font-size: 20px; color:#222; margin-bottom: 8px; font-weight: 700;}
.business_contents .all_areas .list ul li p {color: #777; font-size: 16px;}
.business_contents .all_areas .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_contents .all_areas .list ul li:hover::before {margin-left:14px; transition:.2s; opacity:1;}
/* 02.사업영역  business_contents > area  */
.business_contents .areas {width: 100%; height: 100vh; min-height: 850px; position: relative; background: linear-gradient(360deg, rgba(0, 0, 0, 0.10) 35%, rgba(2, 2, 2, 0.10) 100%); mix-blend-mode: multiply; padding: 0 calc((100% - 1440px) / 2); display: flex; justify-content: space-between; align-items: center;}
.business_contents .areas::after {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/sub_business_area_bg.png) center no-repeat; background-size: cover; z-index: -1; opacity: 0.15; }
.business_contents .areas::before {position: absolute; content: "Our\A   Business"; white-space: pre; font-size: 130px; line-height: 110px; font-weight: 900; opacity: 0.05; letter-spacing: -0.06em; top: 55%; transform: translateX(-3%);}
.business_contents .areas .text {min-width: fit-content ; font-size: 22px; flex-grow: 1; display: flex; align-items: center; padding-left: 80px;}
.business_contents .areas .text h4 {margin-bottom: 16px; text-align: left;}
.business_contents .areas .text > div > p > em {color: var(--color-primary);}
.business_contents .areas .detail {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px; margin-left: 40px;}
.business_contents .areas .detail > div {height: 375px; background-color: #fff; padding: 30px; display: flex; flex-direction: column; justify-content: center;}
.business_contents .areas .detail > div > span {display: block; font-weight: 700; font-size: 18px; line-height:22px; margin: 0 0 8px 0; _letter-spacing: -0.06em;}
.business_contents .areas .detail > div > ul {padding-left: 10px;}
.business_contents .areas .detail > div > ul > li {list-style-type:"- "; margin-top: 4px; color: #666;}
/* 사업영역 2개 */
.business_contents .areas .detail.d2 {width: 680px;}
.business_contents .areas .detail.d2 > div {width: 680px;}
.business_contents .areas .detail.d2 > div > span {width: 200px; font-weight: 700;}
/* 사업영역 3~4개 */
.business_contents .areas .detail.d4_2 {width: calc(320px * 2 + 24px);}
.business_contents .areas .detail.d4_2 > div {width: 320px;}
.business_contents .areas .detail.d4_2 div:nth-child(3) {width:400px;}
.business_contents .areas .detail.d4_2 div:nth-child(4) {width:240px;}
.business_contents .areas .detail.d4 {width: calc(320px * 2 + 24px);}
.business_contents .areas .detail.d4 > div {width: 320px;}
.business_contents .areas .detail.d4w {width: calc(420px * 2 + 24px);}
.business_contents .areas .detail.d4w > div {width: 420px;}
.business_contents .areas .detail.d4w_2 {width: calc(440px * 2 + 24px);}
.business_contents .areas .detail.d4w_2 > div {width: 440px;}

/* 사업영역 5~6개 */
.business_contents .areas .detail.d6 {width: calc(300px * 3 + 24px * 2);}
.business_contents .areas .detail.d6 > div {width: 300px; padding: 30px;}
/* 사업영역 5~6개 넓이 좁게 */
.business_contents .areas .detail.d6_2 {width: calc(292px * 3 + 24px * 2);}
.business_contents .areas .detail.d6_2 > div {width: 292px; padding: 30px;}
/* 사업영역 7~8개 */
.business_contents .areas .detail.d8 {width: calc(256px * 4 + 16px * 3); gap: 16px;}
.business_contents .areas .detail.d8 > div {width: 256px; padding: 30px;}
/* 회사명 */
.business_contents .areas .detail div.company_name {width: 240px; height: 80px; position: absolute; background: url(../images/logo_hm.svg) no-repeat center, var(--color-primary); box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3); border-radius: 50px; color: #fff; display: flex; justify-content: center; align-items: center; padding: 0; background-size: 200px;}

/* 03.대표실적  business_contents > represent ------SWIPER */
.business_contents .represent {height: 100vh; min-height: 850px; padding-top: 8%; display: flex; flex-direction: column; justify-content: center; position: relative; width: 100%;}
.business_contents .represent h4 {margin-bottom: 3%;}
.business_contents .represent .items_wrap {width: 100%; height: 70%; min-height: 650px; position: relative;}
.business_contents .represent .slider_wrap {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-end; position: absolute; top: 0; left: 0;}
.business_contents .represent .slider_wrap .swiper.select {width: 75%; height: 100%; margin: 0;}
.business_contents .represent .slider_wrap .swiper.select .swiper-slide {position: relative; width: 100%; height: 100%; overflow: hidden;}
.business_contents .represent .slider_wrap .swiper.select .swiper-slide img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.business_contents .represent .slider_wrap .swiper-button-next,
.business_contents .represent .slider_wrap .swiper-button-prev {color: #fff; width: 48px; height: 48px; --swiper-navigation-size: 20px; border-radius: 100%; background-color: #ffffff77; font-weight: 700;}
.business_contents .represent .slider_wrap .swiper-button-next:hover,
.business_contents .represent .slider_wrap .swiper-button-prev:hover {background-color: var(--color-primary); color: #fff;}

.business_contents .represent .slider_wrap .swiper.thm {width: 24%; margin: 0;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-wrapper {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; overflow: hidden;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-slide {opacity: 0.7; overflow: hidden; width: 100% !important; height: 100px; cursor: pointer;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-slide img {width:100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-slide:hover {opacity: 1;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-slide-thumb-active {opacity: 1;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-slide-thumb-active::after {position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 0 4px var(--color-primary);}

.business_contents .represent .info_wrap {width: 33%; position: absolute; top: 0; right: 0; z-index: 1; background: var(--color-primaryGra); border-left: 4px solid var(--color-secondary); color: #fff; padding: 1.3%; box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.4);}
.business_contents .represent .info_wrap::before {position: absolute; content: ""; top: 0; right: 0; width: 100%; height: 100%; background: url(../images/logo_hm_symbol_w.svg) no-repeat right; opacity: 0.1;}
.business_contents .represent .info_wrap .swiper.info .swiper-slide span {display: block;}
.business_contents .represent .info_wrap .swiper.info .swiper-slide span.name {font-size: 24px; min-height: 125px; line-height:30px; letter-spacing:-0.03em; font-weight: 700;}
.business_contents .represent .info_wrap .swiper.info .swiper-slide span.date {color: rgba(255, 255, 255, .6);}

/* 04.주요실적  business_contents > works */
.business_contents .works {position: relative; padding: 8% 0;}
.business_contents .works h4 {margin-bottom: 4%; text-align: center;}
.business_contents .works .list {width: 100%; height: 100%;}
.business_contents .works .list .total {display:block; margin-bottom: 16px;}
.business_contents .works .list ul {display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 20px;}
.business_contents .works .list ul li .thm {width: 100%; height: 200px; background: url(../images/logo_hm.svg) no-repeat center, #eee; background-size: 60%; margin-bottom: 8px; overflow: hidden; position: relative;}
.business_contents .works .list ul li .thm img {width:100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover;}
.business_contents .works .list ul li span {display: block; color: #777; font-size: 14px; font-weight: 700;}
.business_contents .works .list ul li span.order {margin-bottom: 4px;}
.business_contents .works .list ul li span.name {font-size: 18px; color:#222; _height: 52px; line-height: 22px; margin-bottom:10px;}
.business_contents .works .list ul li span.date {color: #aaa; font-weight: 400;}

/* search 스타일 */
.search_wrap {display: flex; justify-content: center; margin-bottom: 4%; gap: 12px; height: 48px;}
.search_wrap .select_box select,
.search_wrap > input {border: 1px solid #ccc; border-radius: 4px; height: 100%; padding: 0 16px;}
.search_wrap .select_box {position: relative; width: 136px;}
.search_wrap .select_box::after {position:absolute; content:"\276E"; width:15px; height: 12px; line-height: 12px; transform-origin: center; top: calc(50% - 6px); right: 16px; transform: rotate(-90deg); transform-origin: center center; text-align: center;}
.search_wrap .select_box select {width: 100%; height: 100%; -moz-appearance: none; -webkit-appearance: none; appearance: none;}
.search_wrap .select_box select:focus {border: 1px solid var(--color-primary);}

.search_wrap > input {width: 280px;}
.search_wrap > input:focus {border-color: var(--color-primary);}
.search_wrap > input::placeholder {color: #aaa; font-size: 14px; font-weight: 400;}
.search_wrap > button {width: 80px; height: 100%; background-color: var(--color-primary); border-radius: 4px;}
.search_wrap > button > span {position: relative; margin-left: 20px; color: #fff; font-weight: 700; font-size: 14px;}
.search_wrap > button > span::after {position: absolute; content: ""; background: url(../images/ico_search.svg) no-repeat center; width: 100%; height: 100%; top: 0; left: -26px; background-size: 16px;}

/* business_contents > nav_left */
.nav_left {position: fixed; top: 50%; left: calc((100% - 1440px) / 2 ); transform: translate(-180%, -50%);}
.nav_left ul {width: 80px; font-size: 16px;}
.nav_left ul li {width: 100%; height: 40px; color: #888;}
.nav_left ul li a {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.nav_left ul li.on {position: relative; color: #000; font-weight: 700;}
.nav_left .on::after {position: absolute; width: 6px; height: 6px; content: ""; top: 50%; left: -10px; transform: translateY(-50%); background-color: #000;}

/* 기술개발-R&D  technology_rnd */
.technology .rnd {margin: 0 auto; margin-bottom: 120px;}
.technology .rnd > div {width: 100%;}
.technology .rnd h4 {font-size: 32px; color: initial; margin-bottom: 20px;}
.technology .rnd .h4_main  {font-size: 32px; }
.technology .rnd .major .brk {display: none;}
.technology .rnd .major h5 {font-size:20px; margin-bottom:8px;}
.technology .rnd .list {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 24px; pointer-events: none;}
.technology .rnd .list > li {box-shadow: 0 0 0 1px #ddd; padding: 20px;}
.technology .rnd .list > li .thms {display: flex; justify-content: space-between; }
.technology .rnd .list > li .thms img {width: 49%; height:auto; object-fit: cover;}
.technology .rnd .list > li .info {width: 100%; display: grid; grid-template-columns: minmax(30px, auto) 1fr; grid-column-gap: 24px; grid-row-gap:12px; margin-top: 24px;}
.technology .rnd .list > li .logo {grid-row-end: span 2;}
.technology .rnd .list > li .logo img {height: 52px; object-fit: contain;}
.technology .rnd .list > li .detail {font-size: 14px; color: #999;}
.technology .rnd .list > li .detail span:first-child {margin-right: 32px;}
.technology .rnd .list > li .detail span > em {margin-right: 12px;}
.technology .rnd .list > li .tit {font-size: 18px; font-weight: 700;}
.technology .rnd .projects {margin-top: 120px;}
.technology .rnd .projects .tit {margin-top: 8px;}
.technology .rnd .projects .contents {padding-left: 10px; font-size: 14px; line-height: 24px; margin-top: 16px;}
.technology .rnd .projects .contents > li {list-style-type:"- ";}

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

/* -----------------//유나 작성------------------------ */



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

 /* 공통 > header  */
 .header .gnb > ul > li > a {padding:0 20px;}
 .header.hover .gnb > ul > li > a {padding: 0 26px;}
 .sitemap .nav_bg img { width: 100vw; }
 .scroll {_bottom:100px; display:none;}

/* main > main visual  */
.typin_wrap {width:100%; position:absolute; bottom:calc(50% - 290px); left:50%; transform:translateX(-50%); font-size:30px;}
.typin_wrap .text {font-size:18px; margin-top:10px; color:#777; }
.side_section .side_section_in {width:100%; padding:0 6%;}
.sitemap .gnb{width:100%; padding:0 6%; margin:0 auto; display: flex;justify-content: space-between;}
.main_business .section_wrap {padding:260px 0 0;}
.sp_container {width:100%; padding:6%;}
.fixed_motion {width:650px;}
/* main > main contents  */
.main_con_title h3 .br_mo, .main_contents_txt .br_mo {display:block;}
.main_con_title h3  {line-height:66px;}
.main_business .section_body .card {max-width:300px;}
.technology_wrap, .main_con {width:100%; padding:5% 3%; box-sizing:border-box;}
.technology .main_con_list > li a {padding:45% 30px 30px;}
.technology .main_con_list > li a h4 p {display:none;}
.main_con.news {margin-bottom:0;}
.main_con.news .main_con_title {width:450px;}
.main_con.news .main_con_list {width:calc(100% - 450px);}
.recruit_wrap {padding: 150px 3%;}
.main_con.recruit {width: 100%;}

.mision_contents .eng_swdev_in, .mision_contents .smart_build_in {width:100%;}
.company_mision .sub_contents_in {width:100%; margin:0;}
.company_mision .txt_wrap {padding:0 3%;}

.project .main_con_list {flex-wrap: wrap;}
.project .main_con_list li {position:relative; flex:1 1 30%; width:calc(50% - 10px); height:180px; _margin-top:12px;}
.project .main_con_list li:hover {height:180px;}

.technology .main_con_title h3 {font-size:60px; font-weight:800;}
.technology .main_con_title h3 p {color:#0257D7; font-size:14px; font-weight:600;}
.sub_tab, .sub_tab ul {width:100%;}
.sub_contents_in, .pr_news .sub_contents_in {width:94%; margin:0 3% 3%; box-sizing:border-box; transition:var(--transition-custom);}

.w1440 {width:100% !important; padding:0 3%; box-sizing:border-box;}
.swiper.sub_tab { width:100%;}

/* company > 연혁 */
.company_history .history_list .box > ul > li .history_imgbox img {width:80%;}

/* company > 업면허 */
.lic_cont li { width: 100%; }

/* company > 오시는길 */
.company_contents .contact .map_info {top:0; right: 0%;}

/* business > 사업영역 */
.business .sub_tab_b {display: block; position: absolute; top:602px; width: 100%; height:44px;}

.business .all::after {font-size: 120px; bottom: -20px;}
.business_contents .top_text {left: 3%;}
.business_contents .eng_menu::after {left: -3%; font-size: 120px; top: -110px;}
.all .eng_menu::after {top: -56px;}
.envEvl .eng_menu::after {top: -100px; font-size: 96px;}
.constructionPM .eng_menu::after {top: -100px; font-size: 72px;}

.business_contents .all_areas .list ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 20px;}
.business_contents .all_areas .list ul li p {color: #777; font-size: 15px;}
.business_contents .all_areas .list ul li .text {height: 255px;}
.business_contents .all_areas .list ul li .text.long {height: 320px;}

.business_contents .areas {flex-direction: column; justify-content: center; gap: 48px; padding: 12% 3%; height: 100%; min-height: initial;}
.business_contents .areas .text {margin:0; padding: 0; flex-grow: initial; text-align: center;}
.business_contents .areas .text h4 {text-align: center;}
.business_contents .areas .text .brk {display: none;}
.business_contents .areas::before {display: none;}

.business_contents .areas .detail > div.company_name {display: none;}
.business_contents .areas .detail {margin: 0; width: 100% !important;}
.business_contents .areas .detail > div {padding: 16px !important;}
.business_contents .areas .detail.d4 > div:not(.company_name), .business_contents .areas .detail.d4_2 > div:not(.company_name),
.business_contents .areas .detail.d4w > div:not(.company_name) {width: calc((100% / 2) - 12px);}
.business_contents .areas .detail.d6 > div:not(.company_name) {width: calc((100% / 3) - (12px * 2));}

/* 사업영역 5~6개 넓이 좁게 */
.business_contents .areas .detail.d6_2 {width: calc(292px * 3 + 24px * 2);}
.business_contents .areas .detail.d6_2 > div:not(.company_name) {width: calc((100% / 3) - (12px * 2));}

.business_contents .areas .detail.d8 > div:not(.company_name) {width: calc((100% / 4) - (12px * 3));}
.business_contents .works .list {padding: 0 3%;}

.vi {/*background:#fafafa;*/ width:100%; padding:50px 0; margin:0 auto; }
.vi .vision_item { text-align: justify; text-align-last: justify; margin:0 auto; }
.vi .vision_item li { text-align: center; text-align-last: center;  display: inline-block; width: 100%;  vertical-align: middle;  height:100px; line-height:100px;  border-radius:100px; margin:0 auto; border:3px solid #092775;}
.vi .vision_item li:nth-child(2) { width:50%; border:none; border-radius: 0; border-right:2px dotted #dedede; height:44px;}
.vi .vision_item li:nth-child(3) { width:80%;  margin-left:10%;}
.vi .vision_item li:nth-child(3) div {height:100px;}
.vi .vision_item li strong {font-size:30px !important;   color:#333; text-align:center; font-weight:500;}
.vi .vision_item li p { font-size:20px !important;  color:#555; margin:0 auto;  text-align:center; font-weight:300; _padding-top:34px; color:#444; }	
.vi .vision_item li p br {display:none;}
 }


/*/////  최대 1280px  /////*/
@media (max-width: 1281px){
 /* 공통 > header  */
.header, .header::before, .header_r {height:60px;}
.header .logo, .sitemap .nav_wrap h1 > .logo {top:0; height:60px; background-position:center left;}
.header > .gnb ul, .header_right .language {height:60px; margin-right:20px; transition:var(--transition-custom);}
.sitemap .gnb {padding:0 10%;}
.header nav {display:none; cursor:default;}
.scroll {_bottom:100px; display:none;}
.sitemap .gnb dl:nth-child(3) {width:auto;}

/* main > intro */
.mask_logo {width:50%; z-index:1;}
.main_contents .main_contents_txt {font-size:18px;}
.mask_block.mask_block-side {width:calc(50.5% + 2px);}
.typin_wrap {font-size:22px; bottom:calc(50% - 200px);}
.typin_wrap .text {font-size:15px; color:#444; font-weight:300; letter-spacing:-0.5px;}

/* main > main visual  */
.fixed_motion {width:600px;}
.main_business .section_body .card  {height:455px; max-width:280px; border-radius:10px;}
.main_business .section_body .card::after {border-radius:10px;}
.fixed_motion li a .card_body h4 p {font-size:11px;}
.fixed_motion li a .card_body > p {font-size:14px;}
.main_business .section_body .card.is_active .cad_img_box span {opacity:0;}

/* main > contents  */
.main_business {height:2300px;}
.main_con.news {flex-direction:column;}
.main_con.news .main_con_title {width:100%; text-align:center;}
.main_con.news .main_con_title h3 {font-size:50px; font-weight:800;}
.main_con.news .main_con_title h3 p {font-size:13px; font-weight:600;}
.btn_news_all {margin-top:40px;}
.main_con.news .main_con_list {width:100%; margin-top:40px;}
.main_con.news .main_con_list a {padding:24px 0;}
.news_wrap::before {height:calc(100% - 220px);}

/* main > 기술개발 */
.technology_wrap {height:100%; padding:100px 3%;}
.main_con.technology .main_con_title {text-align:center;}
.main_con.technology .main_con_title h3 {font-size:50px; font-weight:800;}
.main_con.technology .main_con_title h3 p {font-size:13px; font-weight:600;}
.technology .main_con_list {_flex-direction:column; width:100%; margin-left:0; margin-top:60px; gap:12px;}
.technology .main_con_list .technology_txt {_display:none;}
.technology .main_con_list > li:nth-child(1), .technology .main_con_list > li:nth-child(3) {margin-top:0;}
.technology .main_con_list > li:nth-child(2) {margin:0;}
.technology .main_con_list > li > a {padding-top:195px; height:360px;}
.technology .main_con_list > li > a h4 {font-size:20px;}
.main_con.project .main_con_title h3 {font-size:50px; font-weight:800;}
.main_con.project .main_con_title h3 p {font-size:13px; font-weight:600;}

/* main > news */
.main_con.news .main_con_list a {display:flex; flex-direction: column; padding:12px 24px;}
.main_con.news .main_con_list a .text_wrap {width:100%;}
.main_con.news .main_con_list a .date {font-size:16px; color:#999; font-weight:500;}
.main_con.news .main_con_list a .date span {display:inline-block; color:#999; font-weight:500;}
.main_con.news .main_con_list a .date span::after {content:'.'; display:inline-block;}
.main_con.news .main_con_list a .news_text {-webkit-line-clamp:2;}
.main_con.news .main_con_list a .news_imgbox {overflow:hidden; height:85px;}
.news_wrap::after {bottom:-10px; right:0px; font-size:50px; color:#fff; opacity:.3;}
.news_wrap {height:auto; padding-bottom:280px;}
.main_con.news .main_con_list > li::before {height:60px; width:50px; top:3px; left:calc(100% - 65px);}
.main_con.news::before {content:'Hanmac'; top:unset; bottom: 0px; left:-48px;}
.main_con.news::after {content:'Story'; top:unset; bottom:-77px; left: 129px;}


.main_con.recruit .btn_wrap .btn_recruit {height:80px;}
.main_con.recruit .btn_wrap > div > a {height:30px;}
.main_con.recruit .btn_wrap > div > a:first-child {width:56%;}
.main_con.recruit .btn_wrap > div > a > span {font-size:12px;}

.business .sub_tab_b .swiper-slide a {font-size:15px;}

.project_wrap {height:100%; padding:80px 3%;}
.project .main_con_list {flex-wrap: wrap;}
.project .main_con_list li {position:relative; flex:1 1 30%; width:calc(50% - 10px); height:180px;}
.project .main_con_list li:hover {height:180px;}
.sub_banner_wrap {padding:0 6% 0; height:400px; text-align:center;}
.company .location {display:none;}
.sub_tab {top:344px; width:100%; height:56px;}
.sub_tab li a {_height:44px; _line-height:44px; font-size:14px;}
.sub_banner_wrap h2 {margin-top:-10px; font-size:50px;}
.sub_banner_wrap p {font-size:17px; letter-spacing:-0.5px;}

.sub_contents h3 {padding-bottom:50px; font-size:40px;}
.sub_text {font-size:18px; }
.company_contents {display:block; }
.sub_contents.company_greeting .sub_text {width:100%;}
.sub_contents.company_greeting .sub_imgbox {width:100%; height:400px; overflow:hidden; margin:0 0 40px 0;}

/* company > 인사말 */
.company_contents {display:block;}
.sub_contents.company_greeting .sub_text {width:100%;}
.sub_contents.company_greeting .sub_imgbox {width:100%; height:320px;  margin:0 0 40px 0;}
.ceo_sign {margin-top:50px;}
.ceo_sign p {font-size:16px;}
.ceo_sign .ceo_name {font-size:30px;}
.company_list01 {margin-top:100px; font-size:16px;}
.company_list01 li span {width:120px;}

/* -----------------------범지연------------------------ */

/* 인사말 */
.sub_contents.company_greeting .company_contents { flex-direction: column; position: relative;}
.sub_contents.company_greeting .sub_imgbox{display:flex; justify-content:center; align-items: center; }
.sub_contents.company_greeting .sub_imgbox img {height: auto; }
.company_greeting .sub_contents_in {margin: 0;}
.company_greeting .sub_text {padding: 0  3%;}

/* 경영이념 */
.sub_contents.company_mision .eng_swdev_in {width: 100%;}
.sub_contents.company_mision .eng_swdev { width: 100%;}
.vi .vision_item li:nth-child(3) div {}

/* ----------------------- // 범지연 ------------------------ */

/* company > 연혁 */
.company_history .history_list .box > ul > li > ul > li {font-size:16px;}
.company_history .history_list .box > ul > li .history_imgbox img {width:100%;}

/* company > 오시는길 */
.company_contents .contact .map {padding-bottom: 8%;}
.company_contents .contact .map_box {height: 48vh;}
.company_contents .contact .map_info {position: inherit; width: 100%; height: 176px; flex-direction: row; justify-content:space-evenly;}
.company_contents .contact .map_info .logo {width: 24%; margin: 0;}
.company_contents .contact .map_info .text {font-size: 20px; line-height: 32px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.company_contents .contact .map_info .text .addr {display:block; margin-bottom: 16px;}
.company_contents .contact .map_info .text p .bold {font-weight: 700; width: 50px; display: inline-block;}
.company_contents .contact .dept_num {padding: 0 0 8% 0;}

/* 기술개발 > 기술개발센터 */
p.bg_txt {font-size: 60px; }
p.bg_txt br {display: block;}
.feature_list p .br_mo {display:none;}

/* 기술개발 > R&D */

.technology .rnd .major h5 {font-size:17px; margin-bottom:8px; letter-spacing:-0.05em;}
.technology .rnd .major h5 .brk {display:none;}
.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 .list > li:nth-child(2) .thms_wrap {height:508px;}


/* pr > 한맥뉴스 */
.pr_news .con_list a .date {width:100px; font-size:22px; font-weight:800; line-height:22px;}
.pr_news .con_list a .date span {font-size:14px;}
.pr_news .con_list a .text_wrap {width:calc(100% - 100px);}
.pr_news .con_list a .news_title {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:20px; font-weight:600;}
.pr_news .con_list a .news_text {font-size:16px;}
.pr_news .con_list a > div {display:flex; justify-content:space-between;}
.pr_news .con_list a .news_imgbox {width:170px; height:124px; background:#ddd; overflow:hidden;}

.pr_signature ul {flex-direction:column;}
.pr_signature .box {width:100%;}
.pr_ci div img {height:80px;}

/* pr > brochure */
.brochure_list li div {padding:20px 25px;}
.pr_color .palette li div {flex-direction:column; justify-content:flex-end; align-items:flex-start;}

/* business  */
.business .sub_tab_b {top: 356px;}
.business_contents .eng_menu::after {left: -3%; font-size: 96px; top: -105px;}
.business_contents .top_box {height: 360px;}
.business_contents .top_text {width: 100%; position: static;}
.all .eng_menu::after {top: -40px;}
.envEvl .eng_menu::after {top: -96px; font-size: 70px;}
.waterSS .eng_menu::after {top: -96px; font-size: 70px;}
.constructionPM .eng_menu::after {top: -84px; font-size: 44px;}
.safety .eng_menu::after {top: -100px; font-size: 72px;}
.business_contents .all_areas .list ul {grid-template-columns: repeat(2, 1fr);}
.business .all::after {display: none;}
.business_contents .all_areas .list ul li .thm {height: 200px;}
.business_contents .all_areas .list ul li .text {height: 132px;}
.business_contents .all_areas .list ul li .text.long {height: 174px;}
.business_contents .all_areas .list ul li span {font-size: 18px; margin-bottom: 4px;}
.business_contents .all_areas .list ul li p {font-size: 14px;}
/* .business_contents .areas {flex-direction: column; justify-content: center; gap: 48px; padding: 12% 3%; height: 100%; min-height: initial;}
.business_contents .areas .text {margin:0; padding: 0; flex-grow: initial; text-align: center;}
.business_contents .areas .text h4 {text-align: center;}
.business_contents .areas .text .brk {display: none;}
.business_contents .areas::before {display: none;} */
.business_contents .represent {height: 100%; justify-content: initial; min-height: fit-content;}
.business_contents .represent .slider_wrap {flex-direction: column; gap: 24px;}
.business_contents .represent .slider_wrap .swiper.select {width: 100%; height: auto; flex-grow: 1;}
.business_contents .represent .slider_wrap .swiper.thm {width: 100%; height: 100px;}
.business_contents .represent .slider_wrap .swiper.thm .swiper-wrapper {grid-template-columns:repeat(auto-fit, minmax(30px, 1fr));}
.business_contents .represent .slider_wrap .swiper.thm .swiper-slide {height: 100%;}
.business_contents .works .list ul {grid-template-columns: repeat(2, 1fr);}
.security .brk {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;}
 }


 /*///// 최대 1024px /////*/
 @media (max-width: 1024px){
    /* main > 사업영역 */
.main_business .section_wrap {padding: 120px 0 0;}


.recruit_wrap {padding: 0%; }
.main_con.recruit {flex-direction: column; justify-content: center; gap: 40px; border-radius:0;}
.main_con.recruit::before {display: none;}
.main_con.recruit .btn_wrap {width: 72%;}
.main_con.recruit .btn_wrap .btn_recruit {height: 80px; font-size: 20px; letter-spacing: -0.06em;}
.main_con.recruit .btn_wrap .btn_recruit .icon {width: 18px; height: 18px;}
.main_con.recruit .btn_wrap > div {font-size: 12px;}
.main_con.recruit .btn_wrap > div > a {height: 32px;}
.main_con.recruit .btn_wrap > div > a > span::after {width: 10px; height: 10px; right: -14px;}


.business .sub_tab_b .swiper-slide a {font-size:14px;}
/* 사업영역 5~6개 */
.business_contents .areas .detail.d6 > div:not(.company_name) {width: calc((100% / 2) - (12px * 2));}



.fixed_motion {width:450px; gap:12px; justify-content:flex-end;}
.main_business .section_body .card {max-width:360px; height:390px;}
.fixed_motion .card {margin:0 0 0 0;}
.fixed_motion li:nth-child(2) {margin-top:0;}
.fixed_motion li:nth-child(odd) {margin-top:0;}
.card_body .cad_img_box img {display:none; width:auto; height:170px; margin-top:-100px;}
.business_contents .represent .info_wrap {width: 40%;}
.business_contents .represent .info_wrap .swiper.info .swiper-slide span.name {font-size: 20px; line-height:26px; height: auto; margin-bottom:10px;}
.technology .technology_contents .br_mo {display:none;}
.pr_brochure h4 {font-size:20px;}



 }


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

/* 공통 > header */
.br_mo {display:block;}

.header:has(.sitemap.on) #dimHeader {display:block;}
.sitemap {right:0; left:auto; width:80%; height:100vh;}
.sitemap .nav_wrap {overflow:hidden;}
.sitemap .nav_wrap h1 > .logo {top:0px; left:6px; _width:140px; height:60px;}
.nav_wrap {overflow:auto; height:100%;}
.sitemap .nav_wrap .gnb_wrap {top:120px; left:50%; transform:translateX(-50%);}
.sitemap .gnb {flex-direction:column; padding:0; }
.sitemap .gnb dt {font-size:0;}
.sitemap .gnb dt a {width:100%; font-size:18px; line-height:24px; text-indent:20px; pointer-events:none;}
.sitemap .gnb dd {margin-top:10px; }
.sitemap .gnb dl {padding:14px 0; margin:0; width:auto;}
.sitemap .gnb ul {background:#eee; padding:16px 0;}
.sitemap .gnb ul li {width:100%; padding:10px 0; _border-bottom:1px solid #eee; line-height:76px; margin:0;}
.sitemap .gnb ul li ~ li {margin:0;}
.sitemap .gnb ul li a {font-size:16px; _text-indent:32px; padding-left:26px; line-height:16px;}
.sitemap .sitemap_header {display:none;}
.sitemap .nav_bg {display:none;}
.sitemap .nav_wrap .gnb_wrap {top:70px;height: -webkit-fill-available; overflow:auto;}
.sitemap a span {background-size:24px auto; display:block; width:24px; height:24px; right:20px; position:absolute; top:0px; }
.sitemap a span.sitemap_arrow_down {background: url(../images/sitemap_arrow_down.svg) no-repeat; }
.sitemap a span.sitemap_arrow_up {background: url(../images/sitemap_arrow_up.svg) no-repeat; }
.sitemap .gnb > dl > dt > a {position:relative; display:inline-block; line-height:24px; font-weight:500; font-size:22px; color:#000; text-indent:-3px; padding-left:20px; transition:0.2s;}
.sitemap .gnb > dl > dt > a::before {display:none;}
.sitemap .gnb > dl:hover > dt > a::before {display:none;}
 /* main > 기술개발 */
.technology_wrap {height:100%; padding:100px 3%;}
.main_con {display:flex; flex-direction:column;}
.technology .main_con_list {flex-direction:column; margin-top:40px; gap:12px;}
.technology .main_con_list > li {width:100%; height:20%; margin:0;}
.technology .main_con_list > li:nth-child(1), .technology .main_con_list > li:nth-child(3) {margin-top:0;}
.technology .main_con_list > li:nth-child(2) {margin:0;}
.technology .main_con_list > li > a {padding-top:120px; height:240px;}
.technology .main_con_list > li > a h4 {font-size:20px;}
.technology .main_con_list > li > a h4 {font-size:20px;} 



/* 기술개발 > 기술개발센터 */
.eng_swdev .rec {gap: 8px;}
.eng_swdev .rec li {height: 240px;}
.smart_build .smart_img {grid-template-rows: repeat(3, 200px); gap: 8px;}
.smart_build .smart_img > div:nth-child(1) {grid-column: 1 / span 3; grid-row: 1 / span 2;}
.smart_build .smart_img  .pic_big .pic_num:nth-child(1) {top: 7%; left: 32%;}
.smart_build .smart_img  .pic_big .pic_num:nth-child(2) {top: 42%; left: 60%;}
.smart_build .smart_img  .pic_big .pic_num:nth-child(3) {top: 80%; left: 52%;}
.feature_list p {font-size: 14px;}
.feature_list em {font-size: 18px}

/* 기술개발 > 지식재산권 */
.tab_content li {flex: 0 0 49%; margin-bottom: calc(1px + 2vw);}
.tab_content.ip ul, .tab_content.design ul {gap:0;}
.technology .rnd .list {grid-template-columns: repeat(1, 1fr);}
.technology .rnd .major .detail span {display: initial;}
.technology .rnd .major .brk {display: none;}
.technology .rnd .projects .detail span {display: initial;}

.action_plan_wrap::before {font-size:120px; bottom:-100px;}

}

 /*///// 최대 850px /////*/
 @media (max-width: 850px){
    /* main > 사업영역 */
.fixed_motion {width:400px; gap:12px; justify-content:flex-end;}
.main_business .section_body .card {max-width:360px; height:390px;}


 }


/*///// 최대 800px /////*/
@media (max-width:800px){
 /* main visual */
.scroll {display:none;}
.main_visual video.mo {display:block; height:100%;}
.main_visual video.pc {display:none;}
/* main visual > mobile 적용 */
.main_business.pc {display:none;}
.main_business.mo {display:block; height:2240px; z-index:100;}
.main_business.mo .section_wrap {padding-top:40px;}
.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_business.mo .section_body .card_mo h4 {font-size:26px; line-height:30px;}
.main_business.mo .section_body .card_mo h4 p {font-size:10px; color:var(--color-secondary);}
.main_business.mo .section_body .card_body > p {margin-top:10px; font-size:13px; color:#666; letter-spacing:-1px;}
.main_business.mo .section_body li a .card_body .icon_motion {position:absolute; top:25px; right:25px; width:46px;}
.main_business.mo .icon_motion img {width:100%;}
.main_business.mo .cad_img_box {position:relative;}
.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_business.mo .section_body .card_mo .cad_img_box span {opacity:1; transition: .2s;}
.main_business.mo .section_body .card_mo,
.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_business.mo .section_body  li a .card_body > p {display:block;}
.mo_business_wrap {position:relative; background:url("../images/hm_main_mo2.png") center no-repeat; background-size:cover; height:100%; z-index:-1;}
.mo_business_wrap::before {content:''; position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:rgba(0, 0, 0, .6); }
.main_business.mo .section_body {padding-top:40px;}

  /* main > business  */
.main_business .btn_news_all {margin-top:25px; background:rgba(255, 255, 255, .1); padding:8px 14px; border-radius:2px;}
.main_business .section_wrap {padding:120px 0 0 0;}
.main_con_title {width:100%; text-align:center; z-index:1;}
.main_con_title h3 {font-size:42px;}
.main_con_title .main_contents_txt {font-size:16px;}
.main_con.news .main_con_title {width:100%;}
.main_business .section_body {z-index:10;}
.fixed_motion {flex-direction:column; width:100%; gap:12px; z-index:100;}
.fixed_motion li {margin:0 0 0 0;}
.fixed_motion li:nth-child(2) {margin-top:0;}
.fixed_motion li:nth-child(odd) {margin-top:0;}
.main_business .section_body .card {width:100%; max-width:none; height:150px;}
.main_business .section_body .card.is_active {height:300px; z-index:1000; opacity:1;}
.fixed_motion li a .card_body > p {display:none;}
.fixed_motion li.is_active a .card_body > p {display:flex; position:absolute; width:calc(100% - 60px); bottom:30px; left:30px;}
.card_body .cad_img_box img {margin-top:-240px; _width:100%; max-height:300px; height:auto;}
.section_body {width:100%;}
.pagination {margin: 60px 0 50px;}
.page-item {margin: 2px 0;}
/* .recruit_wrap {padding: 0%; }
.main_con.recruit {flex-direction: column; justify-content: center; gap: 40px; border-radius:0;}
.main_con.recruit::before {display: none;}
.main_con.recruit .btn_wrap {width: 72%;}
.main_con.recruit .btn_wrap .btn_recruit {height: 80px; font-size: 20px; letter-spacing: -0.06em;}
.main_con.recruit .btn_wrap .btn_recruit .icon {width: 18px; height: 18px;}
.main_con.recruit .btn_wrap > div {font-size: 12px;}
.main_con.recruit .btn_wrap > div > a {height: 32px;}
.main_con.recruit .btn_wrap > div > a > span::after {width: 10px; height: 10px; right: -14px;} */
.company_mision .mision_contents .sub_text p {font-size:22px;}

/* -----------------------범지연------------------------ */
/* company > 경영이념 */
.company_mision .mission_pictogram .move {transform: translateY(202px) rotate(45deg);}
.company_mision .action_plan .move {transform: translateY(179px) rotate(360deg);}
.vi .vision_item li:nth-child(3) div {_height:46px; display:flex; align-items: center;}

/* 230901 */
.company_mision .mision_contents .sub_text .txt_sub  {font-size: 16px; font-weight: 300; letter-spacing:-0.5px;}
.mision_contents .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; height:auto; padding:10px 20px;}

.company_contents .dept_num h4 {font-size: 24px;}
.business_contents .areas .text h4 {font-size: 26px; line-height:32px;}
.business_contents .areas .text p {font-size: 16px;}
.business_contents h4 {font-size: 24px;}
.sub_text {font-size: 16px; letter-spacing: -1px;}
.technology_center .eng_swdev_in h4,.technology_center .smart_build_in h4 {font-size: 24px;}
.eng_swdev_in ul.desc_wrap {font-size: 16px;}
.eng_cont_in div {width:100%;}
.technology .rnd .h4_main {font-size: 24px;}
.technology .rnd h4 {font-size: 18px;}
.technology .rnd .list > li .detail {display: flex; flex-direction: column;}
.item_wrap .desc_data {flex-direction: column; gap: 0px;}
.pr_brochure h4 {font-size: 20px;}
.pr_contents h4 {font-size: 20px;}
.pr_symbol .mark {display:flex;justify-content:center;/* align-items:center; */flex-direction: row;flex-wrap: wrap;gap: 26px;}
.pr_bg::after {font-size: 80px;}


/* 기술개발 > 기술개발센터 */
.intro_center h3 {padding: 20px 0 60px; letter-spacing:-1px;}
.quantum_wrap {transform: scale(0.8) !important;}
p.bg_txt {font-size: 50px;}


.sw_3d {margin-bottom: 0}
.sw_3d .circle-container {width: 320px; height: 320px; top: initial; left: initial; transform: rotate(45deg);}
.sw_3d .circle_txt {font-size: 18px;}
.sw_3d .dot_wrap .dot:nth-child(1) {top: 36px;}
.sw_3d .dot_wrap .dot:nth-child(2) {right: 36px;}
.sw_3d .dot_wrap .dot:nth-child(3) {bottom: 36px;}
.sw_3d .dot_wrap .dot:nth-child(4) {left: 36px;}

.sw_3d .fix_wrap {display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; max-width: 480px; height: 535px; grid-template-rows: repeat(2, 1fr); ;}
.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%;}
.sw_3d .fix_wrap .fix_cont:nth-child(2), .sw_3d .fix_wrap .fix_cont:nth-child(4) {text-align: right;align-items: flex-end;}
.sw_3d .fix_wrap .fix_cont:nth-child(3), .sw_3d .fix_wrap .fix_cont:nth-child(4) {justify-content: flex-start; margin-top:180px;}
.sw_3d .fix_wrap .fix_cont img {display:none;}


.smart_build .smart_img > div br {display: block;}
.feature_list {grid-template-columns: repeat(1, 1fr);}
}



/*///// 최대 768px /////*/
@media (max-width:769px) {
.pagination a {width:26px;}
#dimHeader {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0, 0, 0, 0.8);  z-index:20;}
.header .logo, .sitemap .nav_wrap h1 > .logo {left:0; height:50px; margin-top:5px;}
/* 탑버튼 */
.topBtn {position:absolute; bottom:100px; right:3%; width:60px; height:60px; z-index:1000;}

.gnb_wrap::-webkit-scrollbar {width:6px;}
.gnb_wrap::-webkit-scrollbar-track {background-color: transparent;}
.gnb_wrap::-webkit-scrollbar-thumb {border-radius: 3px;background-color: #ccc;}
.gnb_wrap::-webkit-scrollbar-button {width: 0;height: 0;}

.location {display: none;}
.main_con.technology::before {display:none;}
.main_con.technology::after {display:none;}
.project::before {display: none;}

/* main visual */
.typin_wrap {position:absolute; width:88%; padding:0 6%; bottom:calc(50% - 200px); left:50%; transform:translateX(-50%); font-size:24px; letter-spacing: -1.5px;}
.typin_wrap .text {display:none;}
.main_con.technology .main_con_title h3 {font-size:32px; line-height:38px;}
.main_con.technology .main_con_title h3 p {font-size:11px; font-weight:600;}
.main_con.project .main_con_title h3 {font-size:32px; font-weight:800;}
.main_con.project .main_con_title h3 p {font-size:11px; font-weight:600;}
.main_con.news .main_con_title h3 {font-size:32px; font-weight:800;}
.main_con.news .main_con_title h3 p {font-size:11px; font-weight:600;}
.main_con .main_contents {font-size:14px;}
.main_business .section_body .card.is_active, .main_business .section_body .card:hover {background: linear-gradient(180deg, rgba(255,255,255, 0.7) 0%, rgba(255,255,255, 1) 95%), url(../images/sample_bg.png) 70px 172px no-repeat; background-size: 130%;}
.mask_logo {width:200%; z-index:1;}

.sub_container .text {font-size:16px;}
.sub_container .sub_banner_wrap .bg {height:300px;}

.sub_banner_wrap h2 {font-size:32px; line-height:38px;}
.sub_banner_wrap {padding:0 6% 0; height:300px; text-align:center;}
.sub_banner_wrap p span {display:block;}

/* company > 인사말 */
.ceo_sign {margin-top:30px;}
.news_wrap::after {font-size:60px;}
.main_con.news::before, .main_con.news::after {display:none;}
.main_con.news {flex-direction:column;}
.main_con.news .main_con_list {width:100%; margin-top:30px; }
.main_con.news .main_con_list a {display:flex; flex-direction: column; padding:24px; border-bottom:1px solid #ddd;}
.main_con.news .main_con_list a .text_wrap {width:100%; margin-top:8px;}
.main_con.news .main_con_list a .text_wrap div:first-child {width:100%;}
.main_con.news .main_con_list a .news_imgbox {display:none;}
.main_con.news .main_con_list a > p {font-size:16px; font-weight:600;}
.main_con.news .main_con_list a > p #newsYear {display:inline-block; color:#999; }
.main_con.news .main_con_list a > p #newsYear::after {content:'.'; display:inline-block; font-weight:600;}
.main_con.news .main_con_list a > p #newsDate {font-size:16px; color:#999; font-weight:600; }
.main_con.news .main_con_list a .news_text {-webkit-line-clamp:2;}
.news_wrap::after {bottom:-10px; right:0px; font-size:35px; color:#fff; opacity:.3;}
.news_wrap {height:auto; padding-bottom:280px;}
.news_wrap::before {_height:760px;}
.main_con.news .btn_news_all {margin-top:25px; background:#fff; padding:8px 14px; border-radius:2px;}
.main_con_list.hover_box3 > li::after, .main_con_list.hover_box3 > li::before, .main_con_list.hover_box3 > li:hover::before, .main_con_list.hover_box3 > li:hover::before {display:none;}
.main_con.news .main_con_list a .news_title {font-size:18px;}
.main_con.news .main_con_list a .news_text {margin-top:8px; font-size:14px; color:#666;  -webkit-line-clamp:2;}


.project .main_con_list {gap:12px;}
.project .main_con_list li {flex:1 1 50%; width:100%; margin-top:0;}
.sub_contents h3 {padding-bottom:30px; font-size:28px;}
.sub_text {font-size:16px; line-height:25px;}
.sub_tab {display:none;}
.sub_tab_mobile {display:block;}
.desc_wrap {font-size:16px; color:#666; font-weight:300;}

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

/* company > 인사말 */
.ceo_sign p {font-size:14px;}
.ceo_sign .ceo_name {font-size:26px;}
.company_list01 {font-size:14px;}
.company_list01 li span {width:80px;}

/* company > 오시는길 */
 .company_contents .contact .map_box {height: 40vh;}
 .company_contents .contact .map_info {position: inherit; width: 100%; height: 184px; flex-direction: column; justify-content:center; gap: 16px;}
 .company_contents .contact .map_info .logo {width: 32%; margin: 0;}
 .company_contents .contact .map_info .text {font-size: 16px; line-height: 24px; margin: 0;}
 .company_contents .contact .map_info .text .addr {display:block; margin-bottom: 8px;}
 .company_contents .dept_num .nums ul {grid-template-columns: repeat(1, 1fr); gap: 20px; pointer-events: visible;}

.company_contents .dept_num .nums ul li {padding:12px 24px; align-items:flex-start; flex-direction: column;}
.company_contents .dept_num .nums ul li .telnum {padding:0 0 0 32px;}

/* search 스타일 */
.search_wrap {flex-direction:column; margin-bottom:4%; gap:4px; height:auto;}
.search_wrap .select_box, .search_wrap > input, .search_wrap > button {width:100%; height:42px;}

/* -----------------------범지연------------------------ */
/* 인사말 */
.sub_contents.company_greeting .sub_text{font-size: 16px; line-height: 24px;}

/* 경영이념 */
.mision_contents .sub_text  {font-size: 16px; letter-spacing:-0.5px;}
.mision_contents .sub_text .txt_sub  {font-size: 16px; letter-spacing:-0.5px;}
.mision_contents .eng_swdev_in ul.desc_wrap li{font-size: 16px ; letter-spacing:-0.5px;}
.mission_pictogram {width:280px; height:342px; margin:24px auto 20px;}
.mission_pictogram li {width: 110px; height: 110px; font-size: 18px; padding-top:35px;}

.mission_pictogram::after {top: 47%; font-size:18px; line-height:22px;}
.circle_red_rotate02 { width: 180px;  height: 180px;}
.Value_bg {margin-top:0;}
.circle_solid_pink {width:200px; height: 200px;}

.mission_pictogram::before {top:0px; border-bottom: 150px solid #a7a7a7;border-top: 80px solid transparent; border-left: 80px solid transparent; border-right: 80px solid transparent;}

.mission_pictogram .mission_technology {top:7%;}
.mission_pictogram .mission_human {bottom:54px; left:0;}
.mission_pictogram .mission_nature {bottom:54px; right:0;}
.mission_pictogram li span {line-height:14px;}

.mision_bg, .Value_bg {padding:50px 0 ;}
.eng_cont_in {gap:30px;}
.eng_cont_in p {padding:6px 0 2px;}

.vi {/*background:#fafafa;*/ width:100%; padding:30px 0 0 0; margin:0 auto; }
.vi .vision_item li { text-align: center; text-align-last: center;  display: inline-block; width: calc(100% - 5px);  vertical-align: middle;  height:80px; line-height:76px;  border-radius:100px; margin:0 auto;border:3px solid #092775;}
.vi .vision_item li:nth-child(2) { width:50%; border:none; border-radius: 0; border-right:2px dotted #dedede; height:15px;}
.vi .vision_item li:nth-child(3) { height:50px; line-height:50px; width:80%;  margin:0 auto; left:9%; position: relative;}
.vi .vision_item li:nth-child(3) div {height:46px;}
.vi .vision_item li strong {font-size:16px !important;   color:#333; text-align:center; font-weight:500;}
.vi .vision_item li p { font-size:13px !important;  color:#555; margin:0 auto;  text-align:center; font-weight:300; _padding-top:14px; color:#444;line-height: 16px; }	
.mision_contents .eng_swdev_in,
.mision_contents .smart_build_in {padding: 0;}

.mision_contents .action_plan {padding:150px 0;}
.circle_blue p {font-size:17px; letter-spacing:-1.5px;}
.action_plan .fix p {position: relative; font-size:14px;color:#000;font-weight: 700;top:-2px; letter-spacing:-1px;}
.action_plan .fix p span {font-weight:400; font-size: 10px;}
.action_plan .fix_01 {position:absolute;top: -114px;left: 131px;left: 68px;text-align: center;/* line-height:24px; */}
.action_plan .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;}
.action_plan .fix_02 {position:absolute;top: 59px;right: -85px;text-align: center;}
.action_plan .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;}
.action_plan .fix_03 {position:absolute;top: 59px;left: -81px;text-align: center;}
.action_plan .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;}
.action_plan .fix_04 {position:absolute;bottom: -75px;right: -43px;text-align: right;}
.action_plan .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;}
.action_plan .fix_05 {position:absolute;bottom: -75px;left: -27px;text-align: right;}
.action_plan .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;}


.circle_blue{ width:120px; height:120px;}
.circle_line_pink {width: 220px; height: 220px;}
.action_plan_wrap::before {left:10px;bottom: -64px;font-size: 60px;letter-spacing: -5px;letter-spacing: -px;}
.action_plan .dot.f_01 {top: 2px;}

  .company_mision .mission_pictogram .move {transform: translateY(170px) rotate(45deg);}
  @keyframes mission-dot-anim-01 {
  0% {transform: rotate(10deg) translateX(90px);opacity:1}
  33% {transform: rotate(130deg) translateX(90px);opacity:0}
  66% {transform: rotate(250deg) translateX(90px);opacity:1}
  100% {transform: rotate(370deg) translateX(90px);opacity:0}
  }
  @keyframes mission-dot-anim-02 {
  0% { transform: rotate(130deg) translateX(90px); opacity:1}
  33% { transform: rotate(250deg) translateX(90px); opacity:0}
  66% { transform: rotate(370deg) translateX(90px); opacity:1}
  100% { transform: rotate(490deg) translateX(90px); opacity:0 }
  }
  @keyframes mission-dot-anim-03 {
  0% { transform: rotate(250deg) translateX(90px); opacity:1}
  33% { transform: rotate(370deg) translateX(90px); opacity:0}
  66% { transform: rotate(490deg) translateX(90px); opacity:1}
  100% { transform: rotate(610deg) translateX(90px); opacity:0}
  }

  .company_mision .action_plan .move {transform: translateY(98px) 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) }
    }

/* 사업영역 */
.business .sub_tab_b {display: none;}
.all .business_contents .head {display: none;}
.business .sub_banner_wrap p {text-align: center;}
.business .sub_banner_wrap p .brk {display: inline;}
.business_contents .eng_menu::after {display: none;}
.business_contents .all_areas .list ul {grid-template-columns: repeat(1, 1fr); gap:24px;}
.business_contents .all_areas .list ul li .text {height: auto;}
.business_contents .all_areas .list ul li .text.long {height: auto;}

.business_contents .areas .detail div {width:100% !important; height:auto;}

.business_contents .areas .detail {gap: 12px;}
.business_contents .areas .detail > div > span {font-size: 18px; margin-bottom: 4px;}
.business_contents .areas .detail > div > ul > li {font-size: 14px; margin-top: 0;}
.business_contents .represent {padding-bottom: 8%;}
.business_contents .represent .slider_wrap {height: 102%;}
.business_contents .represent .slider_wrap .swiper.select {width: 100%; height: 440px; flex-grow: initial;}
.business_contents .represent .slider_wrap .swiper.thm {height: 76px;}
.business_contents .represent .info_wrap {top:initial; bottom: 80px; width: 100%; border: none; padding: 4%; font-size: 14px;}
.business_contents .represent .info_wrap .swiper.info .swiper-slide span.name {min-height:auto; font-size: 20px;}
.business_contents .works {padding: 8% 3%;}
.business_contents .works .list {padding: 0;}
.business_contents .works .list ul {grid-template-columns: repeat(1, 1fr); gap: 24px;}
.business_contents .works .list ul li span.name {height: fit-content; margin-bottom: 8px;}

/* 기술개발 > 기술개발센터 */
.intro_center h3 br {display: block;}
.sw_3d {_padding: 290px 0;}
.quantum_wrap {transform: scale(0.7) !important;}
.bg_city {margin-top: 130px;}
.eng_swdev .txt_wrap br {display: block;}
.smart_build .txt_wrap br {display: block;}
.technology .rnd .major h4, .eng_swdev h4, .smart_build h4 {font-size:24px;}


/* 기술개발 > 지식재산권 */
.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 .projects {margin-top:60px;}
.technology .rnd .projects h4 {font-size:24px;}
.technology .rnd .list > li .thms {flex-direction: column;}
.technology .rnd .list > li .thms img {width:100%; margin-bottom:4px;}
.technology .rnd .list > li .info {display:flex; flex-direction: column;}
.technology .rnd .list > li .logo {display:none;}
.technology .rnd .list > li .tit {font-size:16px;}


/* 홍보센터 > 한맥뉴스 */
.pr_news .con_list li {margin-bottom:12px;}
.pr_news .con_list a {display:flex; flex-direction:column;}
/* .pr_news .con_list a .date {width:100px; margin-bottom:8px; font-size:14px; color:#bbb;}
.pr_news .con_list a .date span {display:inline-block; font-size:14px; color:#bbb; margin-right:3px; font-weight:800;}
.pr_news .con_list a .date span::after {content:'.'; display:inline-block;} */
.pr_news .con_list a .text_wrap {width:100%;}
.pr_news .con_list a .text_wrap div:first-child {width:100%;}
.pr_news .con_list a .news_title {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:18px; font-weight:600;}
.pr_news .con_list a .news_text {margin-top:10px; font-size:14px;}
.pr_news .con_list a > div {display:flex; justify-content:space-between;}
.pr_news .con_list a .news_imgbox {display:none !important;}
.pr_news .con_list a > p {font-size:16px; font-weight:600;}
.pr_news .con_list a > p #newsYear {display:inline-block; color:#999; }
.pr_news .con_list a > p #newsYear::after {content:'.'; display:inline-block; font-weight:600;}
.pr_news .con_list a > p #newsDate {font-size:16px; color:#999; font-weight:600;}

/* 홍보센터 > 한맥뉴스 > 타이틀 */
/* .pr_news .news_detail .title > div {flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:24px 0;}
.pr_news .news_detail .title > div > h4 {font-size:32px; font-weight:700; letter-spacing:-0.05em; width:100%;}
.pr_news .news_detail .title > div > p {font-size:20px; font-weight:600; color:#a3a3a3; width:100%;} */
.pr_news .news_detail .title > div {flex-direction: column; align-items: flex-start; gap:18px;}
.pr_news .news_detail .title > div > p span {font-size: 16px;}
.pr_news .news_detail .title > div > h4 {width:100%; font-size: 26px; padding: 0; }

/* 홍보센터 > 한맥뉴스 > 내용 */
.pr_news .news_detail .contents > div {padding:60px 0; border-bottom: #c7c7c7 1px solid;}

.pr_news .news_detail .contents > div > .text_wrap {height:calc(100% - 640px); letter-spacing:-0.05em; line-height:45px; font-size:22px;}
.pr_news .news_detail .contents.none > div > .text_wrap {height:100%; letter-spacing:-0.05em; line-height:45px; font-size:20px;}

.pr_news .news_detail .contents > div > .text_wrap {font-size: 18px; line-height: 35px; margin: 0; }
.pr_news .news_detail .contents > div > .img_box img {width: 100%;}
.pr_news .news_detail .contents > div > .img_box .w100, .pr_news .news_detail .contents > div > .img_box .w80,
.pr_news .news_detail .contents > div > .img_box .w60, .pr_news .news_detail .contents > div > .img_box .w50,
.pr_news .news_detail .contents > div > .img_box .w25 {width: 100%;}

/*  홍보센터 > 한맥뉴스 > 목록 버튼 */
.pr_news .news_detail .list_btn {display:flex; padding:24px 0;}
.pr_news .news_detail .list_btn > button {width:100%; height:60px; font-size:22px;;}

/* 홍보센터 > 한맥뉴스 > 목록 리스트 */
.pr_news .news_detail .list > li {display:flex; justify-content:flex-start; align-items:center; font-size:20px; padding:30px 0; border-top: #c7c7c7 1px solid;}
.pr_news .news_detail .list .prev > p::after {content:""; display:inline-block; background:url(../images/prev.svg) center no-repeat; width:16px; height:16px; padding:0 50px;}
.pr_news .news_detail .list .next > p::after {content:""; display:inline-block; background:url(../images/next.svg) center no-repeat; width:16px; height:16px; padding:0 50px;}
.pr_news .news_detail .list .next {border-bottom: #c7c7c7 1px solid;}
.pr_news .news_detail .list > li > a {width:80%; word-break:break-word; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;}

/* 홍보센터 > 이전글이 없습니다 */
.pr_news .news_detail .list .prev.none > p::after {content:""; display:inline-block; background:url(../images/prev_gray.svg) center no-repeat; width:16px; height:16px; padding:0 50px;}
.pr_news .news_detail .list .prev.none > a {color: #D1D1D1;}

/* 홍보센터 > 한맥뉴스 디테일 */
.pr_news .news_detail .list .prev > p::after {padding:0 10px;}
.pr_news .news_detail .list .prev.none > p::after {padding:0 10px;}
.pr_news .news_detail .list .next > p::after {padding:0 10px;}


/* 홍보센터 > 브로슈어 */
.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;}
.pr_symbol .btn_ci {padding: 0 41px 0 24px; height: 46px;font-size: 16px;}
.pr_symbol .btn_ci::after {width: 8px; height: 14px; background:url(../images/arrow.svg) no-repeat center; background-size: 10px;}
.pr_symbol .btn_ci:hover::after {background:url(../images/arrow_w.svg) no-repeat center; background-size: 10px;}
.pr_bg {padding:0;}

/* footer */
footer {padding:40px 3% 60px; background:#242428; color:#fff;}
.footer_in {flex-direction:column; width:100%; padding:0 3%; box-sizing:border-box;}
.footer_top {display:flex; align-items:flex-end; justify-content: space-between;}
.footer_logo {width:220px;}
.footer_logo img {margin-left:-10px;}
.footer_content {flex-direction:column; width:100%; padding-bottom:20px; border-bottom:none;}
.footer_content div {width:100%; font-size:14px;}
.footer_menu {display:flex;}
.footer_menu li {position:relative; color:#fff; opacity:.4;}
.footer_menu li:first-child::after {content:'|'; display:inline-block; position:absolute; top:4px; right:-40px; color:#bbb; width:40px; text-align:center; font-size:10px;}
.footer_menu li:first-child {margin-right:36px;}
.footer_list {margin-top:20px;}
.footer_list li {opacity:.9; margin-bottom:2px;}
.footer_list li:first-child {font-weight:600; margin-bottom:6px; opacity:1;}
.footer_list li span {display:inline-block; width:40px;}
.footer_copyright {left:3%; bottom:-20px; color:#fff; font-size:12px; opacity:.4;}

/* footer > family site */
.ft_family {width:100%; height:42px; margin-top:20px;}
.ft_family .btn_family {display:flex; justify-content:space-between; padding:10px 20px; height:100%; background:#18181D; font-size:14px; color:#eee; font-weight:500; box-sizing:border-box;}
.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); }
.ft_family .family_list {opacity:0; visibility:hidden; overflow-y:auto; position:absolute; left:0; bottom:100%; width:100%; padding:10px; background:#fff; box-sizing:border-box; transition:var(--transition-custom);}
.ft_family .family_list li a {display:block; padding:3px; font-size:14px; color:#333;}
.ft_family .family_list li a:hover {color:var(--color-primary);}
.ft_family.open .btn_family::after {color:#fff; transform:rotate(90deg); transition:var(--transition-custom);}
.topBtn {right:6%; bottom:122px;}

}

/* 최대 576px */
@media (max-width:577px){
  .main_con.recruit .btn_wrap {width:86%;}
  .main_con.recruit .btn_wrap br.brk{_display: block; font-size: 18px;}
  .main_con.recruit .btn_wrap .btn_recruit {padding: 0 6%; height: 96px;}
  .main_con.recruit .btn_wrap .btn_recruit:hover {box-shadow: inset 0 0 0 6px var(--color-primary);}
  .main_con.recruit .btn_wrap > div {_flex-direction: column; height: 64px;}
  .main_con.recruit .btn_wrap > div::after {width: 100%; height: 1px; transform: translate(-50%, -50%); display: none;}
  .main_con.recruit .btn_wrap > div > a {width: 100%;}
  .main_con.recruit .btn_wrap > div > a > span {font-size: 14px; line-height:16px;}
  .eng_swdev .rec {grid-template-columns: repeat(1, 1fr)}
  .eng_swdev .rec p {font-size: 12px;}

  .smart_build .smart_img {grid-template-columns: repeat(1, 1fr); grid-template-rows: 320px 160px 160px 160px; gap: 4px;}
  .smart_build .smart_img > div br {display: none;}
  .smart_build .smart_img > div:nth-child(1) {grid-column: initial; grid-row: initial; margin-bottom: 12px;}
  .smart_build .smart_img  .pic_big {width: 580px;}
  .smart_build .smart_img  .pic_big .pic_num {width: 24px; height: 24px; font-size: 16px;}
  .smart_build .smart_img  .pic_big .pic_num:nth-child(1) {top: 16%; left: 32%;}
  .smart_build .smart_img  .pic_big .pic_num:nth-child(2) {top: 45%; left: 60%;}
  .smart_build .smart_img  .pic_big .pic_num:nth-child(3) {top: 80%; left: 52%;}
  .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;}
}