@charset "utf-8";
/* layout.css — header / quick / footer 공통 레이아웃 */

/* ===== header ===== */
.header{position:fixed; left:0; top:0; width:100%; height:var(--header_h); z-index:100; transition:background .3s ease;}
.header .cont{position:relative; display:flex; align-items:center; height:100%; padding:0 4.5%; max-width:100%;}
.header .logo{display:flex; align-items:center;}
.header .gnb{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.header .gnb ul{display:flex; gap:2px;}
.header .gnb a,
.header .gnb a span{display:block; text-align:center; font-size:1.25rem; font-weight:500; color:#fff;}
.header .gnb a{display:flex; align-items:center; justify-content:center; min-width:141px; height:var(--header_h); transition:background-color .3s ease;}
.header .gnb a span{transition:color .3s ease;}
.header .gnb a:hover{background:#c9ab6b;}
.header .gnb a:hover span{color:#fff; font-weight:700;}
.header .utils{display:flex; align-items:center; gap:16px; margin-left:auto;}
.header .utils .icon_call{display:flex; align-items:center; gap:16px; padding:10px 30px; background:rgba(0,0,0,0.2); border-radius:2em; border:1px solid rgba(255,255,255,0.4); transition:background-color .3s ease, border-color .3s ease;}
.header .utils .icon_call span{font-size:1.125rem; font-weight:500; color:#fff; letter-spacing:-0.015em; white-space:nowrap;}
.header .utils .icon_menu{display:none; align-items:center; justify-content:center; padding:0; background:none; border:0; cursor:pointer;}
.header .utils .icon_menu .ico_close{display:none;}
.header .gnb_clone{position:absolute; width:0; height:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}
.header .gnb_clone a span{font-size:1.25rem; font-weight:500; color:#c9ab6b;}

/* scrolled / menu-open: white bar, dark text, colour CI */
/* the cases roll is sliced by the bar at uneven card heights — fade that edge into the backdrop */
.header::after{content:""; position:absolute; left:0; right:0; top:100%; height:70px; background:linear-gradient(180deg, #121116 0%, rgba(18,17,22,0) 100%); opacity:0; transition:opacity .3s ease; pointer-events:none;}
.header.over_cases::after{opacity:.7;}

.header .logo .logo_color{display:none;}
.header.on{background:#fff;}
.header.on .logo .logo_white{display:none;}
.header.on .logo .logo_color{display:block;}
.header.on .gnb a span{color:#000;}
.header.on .gnb a:hover span{color:#fff;}
.header.on .utils .icon_call{background:#f9f9f9; border-color:#f9f9f9;}
.header.on .utils .icon_call span{color:#000;}
.header.on .utils .icon_menu .ico_open{filter:brightness(0);}

/* gnb_mo — full menu panel below the bar (tablet/mobile) */
.header .gnb_mo{position:fixed; left:0; right:0; top:var(--header_h); bottom:0; display:flex; flex-direction:column; padding:55px 18px 50px; background:#c9ab6b; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .35s ease, transform .35s ease, visibility .35s ease; pointer-events:none;}
.header.menu_on .gnb_mo{opacity:1; visibility:visible; transform:none; pointer-events:auto;}
.header .gnb_mo ul{padding-left:30px; margin-bottom:30px;}
.header .gnb_mo ul li + li{margin-top:28px;}
.header .gnb_mo a span{font-size:30px; font-weight:500; color:#fff; line-height:1;}
.header .gnb_mo .menu_call{display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:12px; height:70px; margin-top:auto; border:1px solid #fff; border-radius:20px; box-sizing:border-box;}
.header .gnb_mo .menu_call img{filter:brightness(0) invert(1);}
.header .gnb_mo .menu_call span{font-size:20px; font-weight:500; color:#fff;}
.header.menu_on .icon_menu .ico_open{display:none;}
.header.menu_on .icon_menu .ico_close{display:block;}

@media screen and (max-width: 1240px){
.header .gnb{display:none;}
.header .utils .icon_menu{display:flex;}
}

@media screen and (max-width: 768px){
:root{
--header_h:55px;
--padding:16px;}
.header .utils .icon_call{display:none;}
.header .logo{width:90px;}
.header::after{display:none;}   /* the roll goes flat here, so card tops line up and need no fade */
}

/* ===== main_quick ===== */
.main_quick{position:fixed; right:clamp(10px, 2vw, 30px); top:50%; transform:translateY(-50%); z-index:90; width:70px; will-change:transform;}
.main_quick .tit{display:block; padding:5px 0; background:#342a2b; border-radius:8px 8px 0 0; text-align:center; font-size:0.6875rem; font-weight:700; color:#fff; line-height:1.2;}
.main_quick ul{display:flex; flex-direction:column;}
.main_quick ul li a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:57px; background:#fff; box-sizing:border-box;}
.main_quick ul li span{font-size:0.6875rem; font-weight:400; color:#888; line-height:1.2; text-align:center;}
.main_quick .talk a,
.main_quick .blog a{border-top:1px solid #e1e1e1;}
.main_quick .blog a{border-radius:0 0 8px 8px;}
.main_quick .consult{margin-top:11px;}
.main_quick .consult a{height:41px; background:#f7d82b; border-radius:8px;}
.main_quick .top{margin-top:11px;}
.main_quick .top a{gap:2px; height:41px; background:var(--point-color-1); border-radius:8px;}
.main_quick .top a span{font-weight:700; color:#fff;}

@media screen and (max-width: 768px){
.main_quick{display:none;}
}

/* ===== footer ===== */
.footer{padding:120px 0; background:#241D1E;}
.footer .cont{display:flex; gap:100px;}
.footer .info{flex:1; }
.footer .info li{font-size:1.125rem; font-weight:400; color:#fff; line-height:1.5;}
.footer .info .copyright{margin-top:34px; padding-top:34px;   border-top:1px solid #707070; }
.footer .info .copyright li{color:#c9c9c9;}
@media screen and (max-width: 960px){
.footer .cont{flex-direction:column; gap:40px;}
.footer{padding:40px 0;}
.footer .logo{margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.5); text-align:center;}
.footer .logo img{width:186px;}
.footer .info li{font-size:13px;}
.footer .info .copyright{margin-top:20px; padding-top:0; border-top:none; font-size:12px;}
.footer .cont{flex-direction:column; gap:0;}
}