@charset "utf-8";

.sub-visual {position:relative; width:100%; height:500px; background:#000 center /cover no-repeat;}
.sub-visual .cover {position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,.2);}
.sub-visual {background-image:url(/images/common/bg_sub.png);}
.sub-visual.company     { background-image: url('/images/common/bg_company.WEBP'); }
.sub-visual.service    { background-image: url('/images/common/bg_service.WEBP'); background-position:50% 80%;}
.sub-visual.tech        { background-image: url('/images/common/bg_tech.WEBP'); background-position: 50% 100%;}
.sub-visual.portfolio { background-image: url('/images/common/bg_portfolio.WEBP'); background-position: 50% 65%;}
.sub-visual.data          { background-image: url('/images/common/bg_rd.WEBP'); }
.sub-visual.customer    { background-image: url('/images/common/bg_customer.WEBP'); }
.sub-visual.rd    { background-image: url('/images/common/bg_rnd.WEBP'); background-position: 50% 60%;}


/* 데스크탑 (1200px~) */
@media screen and (min-width: 1200px), print {
	.sub-visual {position:relative; height:450px; background:url(/images/common/coverImg_01.jpg)center /cover no-repeat;}
	.sub-visual .cover {width:100%; height:100%; background:rgba(0,0,0,0.3); left:0;top:0; position:absolute;}
	.sub-visual-wrap {padding:300px 0 0; display:flex; align-items:end; justify-content:space-between; position:relative;}
	.sub-visual-text {}
	.sub-visual-text p {color:#f7f7f7; font-size:var(--fs24); font-weight:600; line-height:1.2;}
	.sub-visual-text h2 {padding:15px 0 0; color:#f7f7f7; font-size:var(--fs60); font-weight:800; line-height:1;}
	.sub-visual-nav {display:flex; gap:10px; align-items:center; opacity:.8;}
	.sub-visual-nav p {color:#fff; line-height:1.2;}
	
	.lnb {position:absolute; left:0; width:100%; background:var(--c_base1); z-index:999;}
	.lnb-wrap {display:flex; border-left:1px solid var(--border2);}
	.lnb-home {width:60px; height:60px;border-right:1px solid var(--border2);}
	.lnb-home img {width:100%; height:100%; object-fit:scale-down;}
	.lnb-menu {position:relative; border-right:1px solid var(--border2);}
	.lnb-menu>a {padding:0 20px; width:240px; color:#fff; line-height:60px; background:url(/images/common/icon_lnb_arrow.svg)calc(100% - 15px) 50% no-repeat; display:block;}
	.lnb-menu ul {width:100%; display:none; left:0; top:60px; background:#fff; position:absolute; box-shadow:0 0 10px rgba(0,0,0,.1);}
	.lnb-menu:hover ul {display:block;}
	.lnb-menu ul li {}
	.lnb-menu ul li a {padding:10px 20px; display:block;}
	.lnb-menu ul li+li a {border-top:1px solid var(--border1);}
	.lnb-menu ul li a:hover {background:#f5f5f5;}
	.lnb-menu ul li.on a {color:var(--c_base1); font-weight:500;}
	
	.lnb.fixOn {width:100%; position:fixed; top:0; z-index:999;  box-shadow:rgba(0,0,0,0.05) 0px 10px 20px -3px, rgba(0,0,0,0.05) 0px 4px 8px -2px;}
	.lnbH {height:60px;}
}

/* 태블릿 이하 (~1199px) */
@media screen and (max-width: 1199px) {
	
	.sub-visual {position:relative; height:300px; background:url(/images/common/coverImg_01.jpg)center /cover no-repeat;}
	.sub-visual .cover {width:100%; height:100%; background:rgba(0,0,0,0.5); left:0;top:0; position:absolute;}
	.sub-visual-wrap {padding:160px 30px 0; display:flex; align-items:end; justify-content:space-between; position:relative;}
	.sub-visual-text {}
	.sub-visual-text p {color:var(--c_base1); font-size:var(--fs24); font-weight:600; line-height:1.2;}
	.sub-visual-text h2 {padding:15px 0 0; color:#fff; font-size:var(--fs60); font-weight:800; line-height:1;}
	.sub-visual-nav {display:flex; gap:10px; align-items:center; opacity:.8;}
	.sub-visual-nav p {color:#fff; line-height:1.2;}
	
	.lnb {background:var(--c_base1);}
	.lnb-wrap {display:flex; border-left:1px solid var(--border2);}
	.lnb-home {width:60px; height:60px;border-right:1px solid var(--border2);}
	.lnb-home img {width:100%; height:100%; object-fit:scale-down;}
	.lnb-menu {position:relative; border-right:1px solid var(--border2);}
	.lnb-menu>a {padding:0 20px; width:240px; color:#fff; line-height:60px; background:url(/images/common/icon_lnb_arrow.svg)calc(100% - 15px) 50% no-repeat; display:block;}
	.lnb-menu ul {width:100%; display:none; left:0; top:60px; background:#fff; position:absolute; box-shadow:0 0 10px rgba(0,0,0,.1);}
	.lnb-menu:hover ul {display:block;}
	.lnb-menu ul li a {padding:10px 20px; display:block;}
	.lnb-menu ul li+li a {border-top:1px solid var(--border1);}
	.lnb-menu ul li a:hover {background:#f5f5f5;}
	.lnb-menu ul li.on a {color:var(--c_base1); font-weight:500;}
	
	
	
}

/* 모바일 (~767px) */
@media screen and (max-width: 767px) {
	
	.sub-visual {height:auto;}
	.sub-visual-wrap {padding:120px 30px 30px;flex-direction:column; gap:10px; align-items:start;}
	.sub-visual-text {}
	.sub-visual-text h2 {padding:10px 0 0;}
	
	.sub-visual-nav p img {width:12px;}
}