@charset "utf-8";
/* background fixed 사용시 버그 대응용 * 한 번 스크롤로 페이지 전체 넘김을 할 때는 html스타일에서 height속성 제거하기 */
/* html { overflow: hidden; height: 100%; } */
/* body { overflow: auto; height: 100%; } */


/* ************************ 셋팅 ************************ */
:root { 
    --f_Pretendard:'Pretendard';
    --base1:#000;
    --base2:#DFBF8A;
    
    --fs12:1.2rem;
    --fs13:1.3rem;
    --fs14:1.4rem;
    --fs15:1.5rem;
    --fs16:1.6rem;
	--fs17:1.7rem;
    --fs18:1.8rem;
    --fs20:2rem;
    --fs22:2.2rem;
    --fs24:2.2rem;
    --fs26:2.6rem;
    --fs24:2.2rem;
    --fs28:2.3rem;
    --fs30:2.4rem;
    --fs32:2.8rem;
    --fs36:3.0rem;
    --fs40:3.3rem;
    --fs45:4.5rem;
    --fs48:3.3rem;
    --fs50:5rem; 
	--fs60:6rem;
    --fs64:4.4rem;
    --fs70:5.5rem;
    --fs80:4.5rem;
} 

@media (max-width: 1249px) {
    :root {

        --fs32:2.8rem;
        --fs40:3.5rem;
        --fs80:6rem;

    }
}

@media (max-width: 991px) {
    :root { 

        --fs30:2.5rem;
        --fs80:7rem;

    }
}

@media (max-width: 767px) {
    :root { 

    --fs24:1.9rem;
    --fs30:2rem;
    --fs40:3rem;
    --fs45:3.5rem; 
    --fs48:3.8rem; 
    --fs50:4rem;
    --fs64:5.4rem;
    --fs70:5rem;
    --fs80:6rem;

    } 
}


@media (max-width: 500px) {
    :root { 
        
        --fs18:1.6rem;
        --fs20:1.8rem;
        --fs40:2.5rem;
        --fs45:3rem; 
        --fs22:1.8rem;
        --fs24:2rem;
        --fs26:2.3rem;
        --fs32:2.2rem;
        --fs50:3.5rem;
        --fs64:5rem;
        --fs80:5rem;

    } 
}


html { font-size:0.625rem; } 
html body { font-family:var(--f_Pretendard), sans-serif; font-size:var(--fs16); font-weight:300; line-height:1.6; color:#333; word-break:keep-all; overflow-x:hidden; } 


a { text-decoration:none !important; outline:none !important; selector-dummy:expression(this.hideFocus=true) !important; transition:var(--ani); color:inherit; } 
a:link, a:visited, a:hover, a:active { text-decoration:none; color:inherit; } 
a,img,i,button { transition:all .5s ease; -webkit-transition:all .5s ease; -moz-transition:all .5s ease; } 

.scroll-y::-webkit-scrollbar { height:3px; width:10px; } 
.scroll-y::-webkit-scrollbar-thumb { background-color:#999; border-radius:5px; } 
.scroll-y::-webkit-scrollbar-track { background-color:#ccc; border-radius:5px; } 

select, button { cursor: pointer; } 


/* lnb 배경 */
.lnbWrap { position: relative; }
.sub-visual {height: 400px;}

.lnbWrap .text { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } 
.lnbWrap .text p { writing-mode: vertical-rl; text-orientation: upright; color:#BDBDBD; margin-top:40px; letter-spacing: 4px; font-size: var(--fs15); line-height: 1; } 
.lnbWrap .scroll { position: absolute; right: 25px; bottom: 0; display: flex; align-items: center; gap:10px; font-size: var(--fs13); color: var(--base3); font-weight: 700; z-index: 95; } 

.sub-visual { position:relative; width:100%; overflow: hidden; position: relative; background:#000 center / cover no-repeat;}

.sub-visual.company {background-image:url(/images/common/lnb-company.webp); background-position: 0 -410px;} 
.sub-visual.awards {background-image:url(/images/common/lnb-awards.webp);}
.sub-visual.location {height: 100vh; background-image:url(/images/common/lnb-location.jpg); background-position: center top;}
.sub-visual.portfolio {height:800px; background:url(/images/common/lnb-portfolio.jpg) no-repeat center top / cover; } 
.sub-visual.process { background:url(/images/common/lnb-process.jpg) no-repeat center top / cover; } 
.sub-visual.support { background:url(/images/common/lnb-members.jpg) no-repeat center top / cover; } 




/* lnb 텍스트 */
.sub-visual .sub-visual-wrap { position:absolute; top:260px; width:100%; display: flex; align-items: center; justify-content: center; color:#fff; font-size: var(--fs45); font-weight: 600; line-height:1;} 
.sub-visual .sub-visual-text { display:flex; flex-direction:column; justify-content:center; height:100%; padding-top:150px; box-sizing:border-box; } 
.sub-visual .sub-visual-text span { font-size:var(--fs20); font-weight:700; color:#fff; text-align:left; z-index:5; position:relative; } 
.sub-visual .sub-visual-text p { font-size:var(--fs40); line-height:1.2; font-weight:700; color:#000; text-align:left; position:relative; color:#fff; margin-top:20px; text-shadow: 0px 0px 30px #000; } 

.contents .part1 { text-align:center; height:700px; position:relative; padding-top:120px; } 
.contents .sub-toptext { } 
.contents .lnbWrap { height:100px; position:absolute; display:flex; width:100%; max-width:1400px; margin:0 auto; justify-content:space-between; align-items:flex-end; left:50%; transform:translateX(-50%); top:300px; } 
.sub-top-visual { position:fixed; width:100%; height:100vh; top:0; left:0; background-size:cover; } 
.sub-top-visual.association .cover { background:rgba(0,0,0,0.5); } 
.sub-top-visual.company { background:url(../images/common/bg_sub_depth1.webp); background-position:center -400px; background-repeat: no-repeat; z-index:-1; } 
.sub-top-visual.welfare { background:url(../images/common/bg_hompage_welfare.webp); background-repeat: no-repeat; background-size: cover; z-index:-1; } 

.site-route { color: #888; display: flex; justify-content: space-between; align-items: center; margin-top: 60px !important; } 
.site-route p { color: var(--base2); font-weight: 800; } 
.site-route h2 { position: relative; display: flex; gap: 10px; align-items: center; color: var(--black); font-size:var(--fs24); } 
.site-route h2 i { display: flex; align-items: center; justify-content: center; background: var(--base3); border-radius: 100px; width: 28px; height: 28px; } 
.site-route span { color: rgba(17,45,92,4%); position: absolute; left: 80px; top: -45px; font-size:var(--fs80); font-weight: 800; } 
.site-route ul { display: flex; align-items: center; font-size: 14px; font-weight: 500; opacity: 0.7; } 
.site-route ul i { margin-right: 8px; } 
.site-route ul li { position: relative; } 
.site-route ul li img { transform: translateY(-2px); } 
.site-route ul li+li { padding-left: 25px; } 
.site-route ul li+li:before { content: ""; display: block; width: 2px; height: 8px; position: absolute; top: 6px; left: 10px; background: #CCC; transform: rotate(-45deg); } 



.contents .site-routeWrap { width: calc(100% - 520px); position:relative; } 
.contents .site-routeWrap:after { content:""; display:block; width:100%; position:absolute; bottom:11px; border:1px solid rgba(255,255,255,0.2); } 
.black_header_Bg { height:120px; background:#000; } 


.sidequickWrap { position:fixed; right:30px; bottom:60px; z-index:900; overflow:visible; } 
.sidequickWrap ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } 
.sidequickWrap li a { position:relative; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:0; line-height:0; overflow:visible; width:60px; height:60px; border-radius:100px; transition:all .3s ease; } 
.sidequickWrap li a img { width:30px; } 
.sidequickWrap li a::after { position:absolute; right:0; top:50%; transform:translateX(40%) translateY(-50%); opacity:0; content:""; white-space:nowrap; font-size:16px; font-weight:600; color:#fff; background:#26A9D3; padding:0 25px; line-height:60px; border-radius:100px; padding-right:65px; transition:opacity .35s ease,transform .45s cubic-bezier(0.22,1,0.36,1); pointer-events:none; z-index:-1 } 
.sidequickWrap li a:hover::after,.sidequickWrap li a:focus::after { opacity:1; transform:translateX(0) translateY(-50%) } 
.sidequickWrap li:nth-child(1) a::after { content:"푸름터 소개"; background:#26A9D3; } 
.sidequickWrap li:nth-child(2) a::after { content:"오시는 길"; background:#085EB5; } 
.sidequickWrap li:nth-child(3) a::after { content:"입소 상담"; background:#122D64; } 
.sidequickWrap li:nth-child(4) a::after { content:"1308 위기임산부상담"; background:#EB6363; } 
.sidequickWrap li:nth-child(5) a::after { content:"카톡 실시간 상담"; background:#FAE101; color:#371C1D; } 
.sidequickWrap li:nth-child(1) a { background:#26A9D3; } 
.sidequickWrap li:nth-child(2) a { background:#085EB5; } 
.sidequickWrap li:nth-child(3) a { background:#122D64; } 
.sidequickWrap li:nth-child(4) a { background:#EB6363; } 
.sidequickWrap li:nth-child(5) a { background:#FAE101; } 





/*footer*/
footer { position:relative; padding:60px 0; background:#F9F9F9; font-size:16px; z-index:5; font-weight:400; } 
footer .footer-info { display:flex; justify-content:space-between; } 
footer .footer-info h1 { font-size:20px; } 
footer .footer-info .infoWrap { display: flex; gap:50px; } 
footer .footer-info .infoWrap h2 {font-size: var(--fs40); color: var(--base2); font-weight: 400; line-height: 1.1;}
footer .footer-info .infoWrap .infoCon {color: #666;}

footer .footer-info .infoWrap .infoCon h3 {color: #000;}
footer .footer-info .infoWrap .infoCon div {position: relative; padding-left: 10px; margin-top: 24px;}
footer .footer-info .infoWrap .infoCon div::before {position: absolute; content: ""; left: 0; top: 3px; width: 1px; height: 35px; background: #666;}
footer .footer-info .infoWrap .infoCon div p { line-height: 1.5; font-size:14px; font-weight:300; }
footer .footer-info .infoWrap p span+span { padding:0 10px; } 

footer .consult {display: flex; gap: 10px; align-items: flex-start;}
footer .consult a.consultBtn {display: inline-block; padding: 15px 30px; line-height: 1; background: #000; color: #fff; border-radius: 100px;}
footer .consult a.consultBtn:hover {background: var(--base2);}



/*** 전체메뉴팝업 ***/
.popAllMenu { z-index:99999; position:fixed; top:0; right:0; width:100%; height:100%; display:flex; align-items: stretch; justify-content:flex-end; color:#fff; background: #000; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(3px); opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease; } 

.popAllMenu.on { opacity:1; visibility:visible; } 
.popAllMenu.on .popContent { transform:translateX(0); opacity:1; } 
.popAllMenu.off { opacity:0; visibility:hidden; } 
.popAllMenu.off .popContent { transform:translateX(50px); opacity:0; } 

.popAllMenu .popContent .close { z-index:999; position:absolute; top:50px; right:50px; text-indent:-9999px; width:50px; height:50px; border-radius:8px; border:2px solid rgba(255,255,255,.3); background:url(../images/common/i_colose.png) no-repeat center/50%; cursor:pointer; } 
.popAllMenu .popContent .close:hover { border:2px solid #fff; } 

.popAllMenu .popContent { position:relative; width:45%; /*height:100%; */ background:var(--base1); transform:translateX(50px); opacity:0; transition:transform .5s ease .2s, opacity .5s ease .2s; padding:100px; display: flex; align-items: flex-start; flex-direction: column; justify-content: center; gap: 100px; } 
.popAllMenu .popContent .etc { display:flex; justify-content: space-between; width: 100%; font-size:var(--fs15); opacity:.3; } 
.popAllMenu .popContent .etc div { display:flex; gap:10px; } 
.popAllMenu .popContent .wrap ul>li>a { font-weight:700; font-size:var(--fs32); display:block; } 

.popAllMenu .popContent .wrap { width:100%; } 
.popAllMenu .popContent .wrap ul>li>ul>li>a { display: inline-block; color:rgba(255,255,255,.4); font-size:var(--fs18); font-weight:400; transition: transform 0.3s ease, color 0.5s ease; padding-bottom: 3px; } 
.popAllMenu .popContent .wrap ul>li>ul>li>a:hover { color:#fff; transform:translateX(10px); } 

.popAllMenu .popContent .wrap ul { display:flex; justify-content: space-between; } 
.popAllMenu .popContent .wrap ul>li { position:relative; } 
.popAllMenu .popContent .wrap ul>li:before { position:absolute; content:""; width:1px; height:100%; background:rgba(255,255,255,.08); left:-50px; } 
.popAllMenu .popContent .wrap ul>li:nth-child(1):before { content:none; } 
.popAllMenu .popContent .wrap ul>li>ul { display:inline-block; margin-top:40px; } 
.popAllMenu .popContent .wrap ul>li>ul>li>ul { margin-top:0; } 

.popAllMenu .popContent .wrap .toggle-submenu { position:relative; color:#fff; padding-left:20px; } 
.popAllMenu .popContent .wrap .toggle-submenu:hover { transform:translateX(0px); } 
.popAllMenu .popContent .wrap .toggle-submenu:before { content: ""; position: absolute; left: 0px; top: 9px; width: 12px; height: 8px; background:url(/images/common/gnb-arrow.svg) no-repeat left; transition: all 0.3s; filter: invert(1); } 
.popAllMenu .popContent .wrap .active-sub .toggle-submenu:before { transform: rotate(-180deg); } 
.popAllMenu .popContent .wrap .has-sub { padding:8px 0; } 
.popAllMenu .popContent .wrap ul>li>ul>li:before { content:none; } 







/* ************************ 데스크탑 (1249~) ************************ */
@media screen and (min-width: 1249px), print { html,body { min-width:1200px; } 
.mobile { display:none !important; } 


.lnb.fixOn { position: fixed; top: 0; z-index: 99; background: #fff; transform: translate(0, 0); max-width: 100%; left:0; right:0; bottom:0; height:60px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; } 
.lnb.fixOn .lnb-wrap { width: 100%; max-width: 1400px; margin: 0 auto; border-top: 0; } 
.lnb.fixOn .lnb-wrap .lnb-depth>ul li a { padding-top: 0; color: var(--black); } 
.lnb.fixOn .lnb-wrap .lnb-depth>ul li.on a:after { background: var(--black); } 


/*헤더**/
header { z-index:999; position:absolute; width:100%; min-width:1200px; top:0; left:0; } 



header .head { width:90vw; margin:0 auto; position:relative; } 
header .head h1 { position:absolute; z-index:99999; left:0; top:30px; } 
header .head h1 a { } 
header .head h1 a img { max-width:433px; width:100%; } 

header aside { position:absolute; right:80px; top:36px; z-index:99999; color:#fff; } 
header aside>* { float:left; } 
header aside .allView { width: 70px; height: 70px; background:url(/images/common/menu.png) center / 22px no-repeat; } 

/*gnb*/
nav.mobile { visibility:hidden; } 
nav.pc { z-index:99; position:absolute; display:block; width:100%; overflow:hidden; height:130px; } 
nav.pc:hover { border-bottom:0; } 
nav.pc .navbg { position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0); transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important; } 
nav.pc.on .navbg { background:rgba(255,255,255,1); } 
nav.pc .navbg .dep1 { display : none; position: absolute; width: 100%; height: 100px; } 
nav.pc.on .navbg .dep1 { display : block; transition : all 2s ease; /*border-bottom:1px solid #e0e0e0;*/ } 

nav.pc .wrap { z-index:1300; position:relative; display:block; max-width:1400px; height:130px; margin:0 auto; } 

nav.pc .gnb { /*padding-left:270px; */ position:relative; width: 100%; max-width:90vw; margin:0 auto; letter-spacing:0; } 
nav.pc .gnb a.on { color:var(--blue); } 
nav.pc .gnb > ul { display:flex; justify-content:center; } 
nav.pc .gnb>ul>li { position:relative; padding-top:65px; padding-right:3.2vw; } 
nav.pc .gnb>ul>li:last-child { padding-right:0!important; } 
nav.pc .gnb>ul>li>a { display:block; position : relative; color:#fff; font-size:20px; font-weight:500; } 
nav.pc.sub .gnb>ul>li>a { color:#fff; } 
nav.pc .gnb>ul>li>a span { font-size:14px; font-weight:400; padding-left:5px; } 
nav.pc.on .gnb>ul>li>a span { color:#999; } 
nav.pc.on .gnb>ul>li>a:hover span { color:var(--base1); } 
nav.pc.on .gnb>ul>li.on>a, nav.pc.on .gnb>ul>li.on>a span { color:var(--base1)!important; } 
nav.pc.on .gnb>ul>li.on>a:after { border-bottom:2px solid var(--base1)!important; } 
nav.pc .gnb>ul>li>a:after { position: absolute; content:""; display: block; border-bottom: 2px solid var(--base1); transition:width 250ms ease-out; left: 0; right: auto; width:0; } 
nav.pc .gnb>ul>li>a:hover { color:var(--base1)!important; } 
nav.pc .gnb>ul>li>a:hover:after, nav.pc .gnb>ul>li.on>a:after { width:100%; } 
nav.pc .gnb>ul>li.on>a:after { border-bottom: 2px solid #fff; } 
nav.pc .gnb>ul>li>ul { position:absolute; top:130px; left:0; width:100% !important; padding-bottom:80px; transition:all .3s ease !important; -webkit-transition:all .3s ease !important; -moz-transition:all .3s ease !important; } 
nav.pc.on .gnb>ul>li>ul { top:140px; } 
nav.pc .gnb>ul>li>ul>li>a { position: relative; display: inline-block; color:#666; letter-spacing:-.5px; font-size:18px; font-weight:300; white-space: nowrap; } 
nav.pc .gnb>ul>li>ul>li>a span { font-size:14px; color:#999; padding-left:5px; } 
nav.pc .gnb>ul>li>ul>li.on>a span { color:var(--base1); } 
nav.pc .gnb>ul>li>ul>li>a:hover { color:var(--base1)!important; } 
nav.pc .gnb>ul>li>ul>li>a:hover span { color:var(--base1); } 
nav.pc .gnb>ul>li>ul>li>a:after { position: absolute; content:""; display: block; border-bottom: 1px solid var(--base1); transition: width 250ms ease-out; left: auto; right: 0; width:0; } 
nav.pc .gnb>ul>li>ul>li+li a { margin-top:15px; } 

nav.pc .gnb>ul>li>ul>li.on a { color:var(--base1)!important; font-weight:600; border-bottom:2px solid #000;} 

nav.pc .asideWrap { position: absolute; right: 5px; top: 65px; } 
nav.pc .asideWrap a { color: #fff; display: inline-block; width:27px; height:27px; text-indent: -9999px; /* 텍스트 숨기기 */
	overflow: hidden;} 

nav.pc .asideWrap a.ohouseBtn {background: url(/images/common/i-home.svg) no-repeat center;}
nav.pc .asideWrap a.instaBtn {background: url(/images/common/i-insta.svg) no-repeat center; margin-left:15px;} 

nav.pc.on .asideWrap a.ohouseBtn { background: url(/images/common/i-home-b.svg) no-repeat center; } 
nav.pc.on .asideWrap a.instaBtn { background: url(/images/common/i-insta-b.svg) no-repeat center; } 


@keyframes wide { 
 from { transform:scaleX(0); } 
to { transform:scaleX(1); } 
 }



/* lnb */
.lnb { position:absolute; bottom:-25px; left:0; width:100%; max-width:calc(1400px - 5%); left: 50%; right: 50%; transform: translate(-50%, -50%); height:80px; } 
.lnb .lnb-wrap { display:flex; align-items:center; justify-content: flex-start; position:relative; height:100%; width: 95%; overflow: hidden; border-top: 1px solid rgba(255,255,255,.2); } 
/*.lnb .lnb-wrap>* { float:left; } */
.lnb .lnb-wrap a { font-size:16px; color:#000; } 
.lnb .lnb-wrap h3 { background:var(--green); color:#fff; font-weight:500; height:100%; padding:20px 30px; box-sizing:border-box; font-size:18px; } 
.lnb .lnb-wrap .home { display:block; width:40px; height:40px; font-weight:300; background:#fff url(../images/common/i-home.png)no-repeat center / 15px; border-radius:50%; border:1px solid #efefef; } 
.lnb .lnb-wrap .lnb-depth { position:relative; } 
.lnb .lnb-wrap .lnb-depth .onmenu { display:block; font-size:16px; font-weight:400; color:#000; cursor:pointer; line-height:60px; background:url(../images/common/lnb_arrow.png)100% center no-repeat } 
.lnb .lnb-wrap .lnb-depth.dep2 .onmenu { color : var(--base); background:url(../images/common/lnb_arrow2.png)100% center no-repeat; } 
.lnb .lnb-wrap .lnb-depth>ul { display:flex; width:100%; gap:40px; height: 60px; align-items:center; } 
.lnb .lnb-wrap .lnb-depth>ul li { position:relative; } 
/*.lnb .lnb-wrap .lnb-depth>ul li+li:before { content:""; display:block; width:1px; height:18px; background:#ddd; position:absolute; left:-30px; top:50%; transform:translateY(-50%); } */
.lnb .lnb-wrap .lnb-depth>ul li:last-child { border-bottom:none; } 
.lnb .lnb-wrap .lnb-depth>ul li a { display:block; padding:10px 0; font-weight:600; color:#fff; opacity:0.7; text-align:center; font-size:18px; } 
.lnb .lnb-wrap .lnb-depth>ul li:hover a { opacity:1; } 
.lnb .lnb-wrap .lnb-depth>ul li.on a { position:relative; opacity:1; } 
.lnb .lnb-wrap .lnb-depth>ul li.on a:after { content:""; display:block; position:absolute; width:100%; height:2px; background:#fff; bottom:6px; } 
.lnb .lnb-wrap .lnb-depth.on>ul { display:block; } 
.lnb #gotop { position:absolute; right:0; top:50%; transform:translateY(-50%); display:block; width:85px; line-height:42px; font-size :12px; font-weight:600; background:#fff url(../images/common/i-gotop_arrow.png) no-repeat 20px center / 8px; text-align:center; opacity:1 !important; font-weight:800; border:1px solid #efefef; border-radius:40px; padding-left:15px; } 



/*컨텐츠*/
.contents { padding:80px 0 100px 0; } 

.contents-wrap { padding:80px 0!important; margin:0px auto!important; max-width:100%; } 
.w90vw { width:90vw; margin:0 auto!important; max-width:100%; } 
.w1000 { max-width:1000px; margin:0 auto!important; width:100%; } 
.w1100 { max-width:1100px; margin:0 auto!important; width:100%; } 
.w1200 { max-width:1200px; margin:0 auto!important; width:100%; } 
.w1300 { max-width:1300px; margin:0 auto!important; width:100%; } 
.w1400 { max-width:1400px; margin:0 auto!important; width:100%; } 
.w1600 { max-width:1600px; margin:0 auto!important; width:100%; } 

}

/** gnb 부분수정 **/
@media screen and (max-width: 1500px), print { /*header .head h1 a img { max-width:350px; width:21vw; } */
nav.pc .gnb>ul>li>a { font-size:20px; } 
nav.pc .gnb>ul>li>ul>li>a { font-size:16px; } 
 }

/* ************************ 태블릿 이하(~1249) ************************ */
@media screen and (max-width: 1249px){



 .pc { display:none !important; } 

.w90vw { padding:0!important; max-width:100%; } 

/*헤더*/
header { position:absolute; left:0; top:0; width:100%; z-index:999; height:90px; background:ease-gradient(to bottom, rgba(0,0,0,.7), transparent); } 
header .head { } 
header .head .gnbView { position:absolute; right:0; top:0; width:90px; height:90px; background:url(../images/common/menu-w.png)center /22px no-repeat; } 
header .head .gnbView img { } 
header .head h1 { display:inline-block; } 
header .head h1 a { height:70px; display:flex; align-items:center; padding-left:30px; transform:translateY(30px); } 
header .head h1 a img { height:75px; width:auto; } 
.black_header_Bg { height:60px; } 


.sub-visual.company {background-image:url(/images/common/lnb-company.png); background-position: center;} 
.sub-visual.awards {background-image:url(/images/common/lnb-awards.png);}
.sub-visual.location {height: 80vh; background-image:url(/images/common/lnb-location.png) no-repeat center top / cover;}
.sub-visual.portfolio {height:560px;} 
.sub-visual.process { background-image:url(/images/common/lnb-process.png) no-repeat center top / cover; } 
.sub-visual.support { background-image:url(/images/common/lnb-members.png) no-repeat center top / cover; } 



/*gnb*/
nav.mobile { z-index:9999; position:fixed; top:0; width:50%; min-width:320px; height:100%; overflow:hidden; box-shadow:0 !important; background:#fff; } 
nav.mobile .closeWrap { position:relative; height:60px; border-bottom: 1px solid rgba(0,0,0,.15); overflow:hidden; font-weight : 500; } 
nav.mobile .closeWrap .gnbClose { display:block; width:60px; height:60px; background:url(../images/common/icon_close.png)center no-repeat; background-size:20px; border-left:1px solid rgba(0,0,0,.15); float:right; } 
nav.mobile .closeWrap .link { float:left; padding:0 20px; line-height:60px; font-size:12px; } 
nav.mobile .closeWrap .link+.link { padding-left:0; } 
.gnbCover { z-index:9998; position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.5); } 

nav.mobile .gnb { position:relative; width:100%; height:100%; overflow-y:auto; text-align:left !important; font-weight : 400; } 
nav.mobile .gnb * { width:100% !important; } 
/* nav.mobile .gnb .home { display:block; width:100%; background-color:#f0f0f0; padding:12px 20px; border-bottom:1px solid #333; } */
nav.mobile .gnb>ul>li { clear:both; position:relative; border-bottom:1px solid #e5e5e5; } 
nav.mobile .gnb>ul>li>a { display:block; padding:20px; font-size:17px; } 
nav.mobile .gnb>ul>li>a span { font-size:14px; color:#999; padding-left:5px; } 
nav.mobile .gnb>ul>li.on { border-color:var(--base1); } 
nav.mobile .gnb>ul>li.on>a { background:var(--base1); color:#fff; } 
nav.mobile .gnb>ul>li.on>a span { color:#fff; } 
nav.mobile .gnb>ul>li>ul { display:none; } 
nav.mobile .gnb>ul>li>ul>li { position:relative; border-top: 1px solid #eee; } 
nav.mobile .gnb>ul>li>ul>li a { display:block; padding:15px 40px; font-size:15px; letter-spacing:-.8px; background:#fff; } 
nav.mobile .gnb>ul>li>ul>li a span { font-size:14px; color:#999; padding-left:5px; } 
nav.mobile .gnb>ul>li>ul>li:last-child a { border-color:#e0e0e0; } 
nav.mobile .gnb>ul>li>ul>li a:hover { color:#000; background-color:#f5f5f5; } 
nav.mobile .gnb>ul>li>ul>li.on a { color:var(--base1); font-weight:700; } 
nav.mobile .gnb>ul>li>ul>li.on a span { color:var(--base1); } 

nav.mobile .asideWrap { display: none; } 

header .closeWrap a.inquire { display:inline-block; background-color:var(--base1); width:100px; height:40px; text-align:center; line-height:40px; color:#fff; border-radius: 3rem; margin:10px; } 
header .closeWrap a.call { display:flex; justify-content: center; align-items: center; width: 40px; height:40px; border-radius:50%; position:absolute; top:10px; left:120px; background:var(--base1); } 






/* footer */
footer { padding:50px 30px 35px; } 
footer .f_btnWrap article { padding:40px; } 
footer .f_btnWrap article dt { font-size:24px; } 
footer .f_btnWrap article dd { font-size:16px; } 
footer .f_btnWrap article .white_btn { padding:12px 35px; font-size:16px; } 
footer .footer-info .top .callnum a { font-size:32px; } 
footer .footer-info .top .callnum .icon { width:40px; height:40px; background: var(--base1) url(/images/common/i-callW.png) no-repeat center / 17px; } 
footer .footer-info .top .logoWrap > div a { font-size:15px; } 
footer .footer-info .infoWrap { gap: 20px; flex-direction: column; } 


/* lnb */
.lnb { position:relative; height:30vh; opacity:0; background-position:center; background-repeat:no-repeat; background-size:cover; } 
.contents .lnbWrap { top:40%; padding:0 30px; } 
.sub-toptext > p.sub-tit { font-size:20px; } 
.sub-toptext h2 { font-size:36px; } 
.contents .site-routeWrap { width: calc(100% - 450px); } 

/*컨텐츠*/
.contents { position:relative; color: #26293D; padding:80px 20px;} 
.contents-wrap { width:100%; padding:60px 20px 60px; max-width:100%; } 
.contents .wrapper { width:100%; padding:50px 0; } 
.contents .part1 { padding-top:60px; height:60vh; } 

a.gotop { position:fixed; right:10px; bottom:60px; display:block; width:40px; height:40px; background:#fff url(../images/common/i-gotop.png) no-repeat center; line-height:1; border-radius:50%; border:2px solid #000; text-indent:-999px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,.2); } 


.lnbWrap {grid-template-columns: calc(100% - 70px) 70px;}
.lnbWrap .text p {margin-top: 65px; font-size: var(--fs14); letter-spacing: 3px;}
.lnbWrap .scroll {right:20px; }


/*.sub-visual .cover { display : block; position : absolute; background : rgba(0,0,0,.4); width : 100%; height : 100%; top:0; } */
.sub-visual .sub-visual-wrap { position : absolute; width:100%; height:100%; top:50%; left:50%; transform:translate(-50%,-50%); padding-top: 30px;} 

.sub-visual.location .sub-visual-wrap, .sub-visual.portfolio .sub-visual-wrap {top: 200px;}

.sub-visual .sub-visual-text { padding-top:80px; padding:80px 30px 0; } 
.sub-visual .sub-visual-text h2 { position:relative; font-size:30px; font-weight:800; letter-spacing:-.5px; color:#fff; z-index : 5; } 
.sub-visual .sub-visual-text h2:before { top:-20px; height:2px; width:60px; } 
.sub-visual .sub-visual-text p {position:relative; margin-top:20px; line-height:1.3; } 


.contents-wrap { padding:50px 20px 50px!important; } 
/*.contents h2 { font-weight:500; font-size : 20px; color : #000; } 
.contents h2 span { display: inline-block; width: 15px; height: 21px; border-radius: 5px; background: #434867; transform: translateY(5px); margin-right: 15px; } */ 


body .site-route {padding: 0 30px;}


} 
/* ************************ 모바일 (0~991) ************************ */
@media screen and (max-width: 991px){
 .sub-visual { height:300px; } 
.contents .lnbWrap { top:auto; bottom:50px; } 
.sub-visual .sub-visual-text h2 { font-size:24px; } 
.sub-visual .sub-visual-text h2:before { width:50px; } 
.sub-visual .sub-visual-text p { margin-top:0px; text-align: center;  } 

footer { font-size:15px; } 
footer .footer-info { flex-direction: column; gap:15px; } 
footer .footer-info h1 img { height:45px; } 
footer .footer-info .infoWrap { text-align:left; } 
footer .footer-info .bottom { margin-top:20px; } 
footer .f_btnWrap { grid-template-columns: 1fr; } 
footer .f_btnWrap article { padding:30px; } 
footer .f_btnWrap article dt { font-size:20px; } 
footer .footer-info .top .logoWrap img { width:150px; } 
footer .footer-wrap .footer_btn ul { bottom:50px; } 
 }


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) { body { font-family: 'NEXON Lv2 Gothic'; font-size:16px; } 


/*header { height:50px; } 
header .head h1 a { height:50px; } */
header .head h1 a {height: 70px; display: flex; padding-left: 30px; transform: translateY(15px);}
header .head h1 a img { height:50px; } 
.sub-visual { height:200px; border-radius: 0; } 
.sub-visual .sub-visual-text h2 { font-size: 24px; } 
.sub-visual .sub-visual-text p {font-size: 18px;}
.sub-visual .sub-visual-text p:before { top:-8px; } 

.sub-visual.location {height: 60vh; background-image: url(/images/common/lnb-location.jpg);}
.sub-visual.location .sub-visual-wrap, .sub-visual.portfolio .sub-visual-wrap {top: 105px;}

.contents-wrap { padding:40px 20px 50px!important; } 
.lnbWrap .scroll {display: none;}

.contents {padding:50px 20px;}
.contents .lnbWrap { height:auto; flex-direction:column; align-items: flex-start; bottom:0; padding:0 20px; } 

.contents .sub-toptext { width:100%; padding:0; } 
.contents .site-routeWrap { width:100%; } 
.contents .site-routeWrap:after { display:none; } 
.sub-toptext h2 { font-size:24px; } 
.sub-toptext > p.sub-tit { font-size:16px; line-height:1.6; } 

/*footer*/
footer { padding:30px 20px; } 
footer .footer-info { flex-direction:column; } 
footer .footer-info .infoWrap { order:2; margin-top:20px; } 
footer .footer-info .top { gap:10px; } 
footer .footer-info .bottom { font-size:14px; margin-top:5px; } 
footer .footer-info .bottom > p { margin-top:20px; font-size:14px; } 
footer .footer-info .bottom ul:first-child { flex-direction:column; } 
footer .footer-info .bottom ul:first-child li+li { padding-left:0; margin-left:0; } 
footer .footer-info .top .callnum a { font-size:24px; } 
footer .footer-info .bottom ul:first-child li+li:before { display:none; } 
footer .footer-info .bottom_toggle { display:block; margin-top:15px; padding-right:20px; background:url(/images/common/select_arrow.png) no-repeat right center/11px; color:#666; } 
footer .footer-info .bottom_toggle+.bottom { display:none; } 
footer .footer-info .infoWrap .infoCon div::before {height: 100%; top: 0;}

.privacyPopup { width:95%; } 
.privacyPopup .txt h3 { font-size:20px; } 

.sidequickWrap { width: 100%; right: auto; bottom: 0; } 
.sidequickWrap ul { flex-direction: row; gap: 0; } 
.sidequickWrap li { width: 100%; } 
.sidequickWrap li a::after { content: none !important; } 
.sidequickWrap li a { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; border-radius: 0; width: 100%; height: 85px; flex-direction: column; text-align: center; padding: 10px; } 
.sidequickWrap li a p { margin: 0; height: 35px; display: flex; align-items: center; margin-top: 5px; } 
.sidequickWrap li:last-child a p { color: #371c1d; } 

.lnbWrap {display: block; }
.lnbWrap .sideWrap {display: none;}

header .head .gnbView { background: url(../images/common/menu-w.png) center / 22px no-repeat; width: 70px; height: 70px;}

}

/* ************************ 모바일 (0~500) ************************ */
@media screen and (max-width:500px) { 
    


    nav.mobile { visibility:hidden; } 
    header .head h1 a { padding-left:20px; } 
    header .head .gnbView { background: url(../images/common/menu-w.png) center / 22px no-repeat;}

    
    .sub-visual .sub-visual-text h2 { font-size:20px; } 



    footer { } 
    footer .f_btnWrap article dt { font-size:18px; } 
    footer .f_btnWrap article dd { font-size:16px; } 
    footer .f_btnWrap article:nth-child(1) { background-size:50px; } 
    footer .f_btnWrap article:nth-child(2) { background-size:50px; } 
    footer .f_btnWrap article:nth-child(3) { background-size:33px; } 
    footer .f_btnWrap article .white_btn { padding:8px 30px; } 
    footer .footer-info .bottom ul:nth-child(2) li strong { display:block; } 
    footer .footer-info .infoWrap p span { display: block; } 

    footer .footer-info .infoWrap p span+span { padding: 0; } 

    footer .kakaoConsult a {width: 100%;}
    footer .kakaoConsult a span {display: block;}

    .contents {padding: 40px 20px;}
    .contents .part1 { height:600px; padding-left: 0; } 


    .sidequickWrap ul li:nth-child(1), .sidequickWrap ul li:nth-child(2) {display: none;}
    .sidequickWrap li a img {width: 23px;}

    body .site-route {display: block; margin-top: 30px !important;}
    .site-route .site-route-navi {margin-top: 15px;}


 }