.footer {background-color:#15171B; display:flex; flex-direction:column; align-items: end; padding:50px 8vw; gap:4vw;}

.footer_top{width:100%; display:flex; align-items:center; justify-content:space-between;}
.footer_top .logo {display:flex; align-items: center; width:fit-content;}
.footer_top .logo a > img {width: 32px; height: auto; margin-right: 15px;}
.footer_top .logo a { color:#FFF; font-family: 'Bitter', serif; font-size: 24px; font-weight: 300; width: fit-content; text-decoration: none; height: fit-content; line-height: 1rem;}
.link {display:flex; align-items:center; gap:2vw; width:fit-content; height:fit-content;}
#linkedin a, #pdf_portfolio a {font-size: 20px; color:#FFF; text-decoration: none;}
#linkedin a > i, #pdf_portfolio a > i {margin-right:10px;}
#link_line {width:1px; height: 20px; border: 1px solid #FFF;}

.footer_nav{display:flex; align-items: start; gap:10vw; width:100%;}
.footer-group {border:none;}
.footer-group summary{list-style: none; cursor: default; pointer-events: none; font-size: 20px; color:#FFF; font-weight:500; margin: 0 0 20px 0;}
.footer-group summary::after{ display: none;}
.footer-group summary::-webkit-details-marker{ display: none;}
.footer-group ul{ display: block; display:flex; flex-direction:column; gap:20px;padding:0;margin:0; }
.footer-group ul li {list-style:none;}
.footer-group ul li > a:hover, .footer-group ul li > a:active {text-decoration: dashed;}
.footer-group ul li > a {font-size:18px; color:#FFF; font-weight:lighter; margin:0; text-decoration: none; list-style: none; }
.footer-group ul li a > i {margin-right:10px;}

.footer_bottom{width:100%; display:flex; flex-direction:column; align-items: end; gap:2vw;}
.footer_bottom .footer_line {width:100%; height:1px; border:1px solid #c9c9c9;}
.footer_bottom p {font-size:18px; font-weight:lighter; color:#d4d4d4; padding:0; margin:0;}


/**반응형**/
@media(max-width:14400px){
    #linkedin a, #pdf_portfolio a {font-size: 18px;}
    #link_line {height:16px;}
    .footer-group summary{font-size: 18px;}
    .footer-group ul li > a {font-size:16px;}
    .footer_bottom p {font-size:16px;}
}

@media(max-width:1280px){
    .footer{padding:50px 6vw;}
}

@media(max-width:1024px){
    .footer_top .logo a > img {width: 30px;}
    .footer_top .logo a {font-size:22px;}
    #linkedin a, #pdf_portfolio a {font-size: 16px;}
    #link_line {height:14px;}
    .footer-group summary{font-size: 16px;}
    .footer-group ul li > a {font-size:14px;}
    .footer_bottom p {font-size:14px;}
}

@media(max-width:768px){
    .footer{padding:40px 4vw; gap:6vw;}
    .footer_top .logo a > img {width:20px; margin-right: 6px;}
    .footer_top .logo a {font-size:17px;}     
    .footer_top {flex-direction:column; justify-content: start; align-items:start; gap:4vw;}
    
    .footer-group {width:100%;}
    .footer_nav{flex-direction: column; gap: 2.5vw;}
    .footer-group summary{pointer-events: auto; cursor: pointer; border-bottom: 1px solid #9d9d9d; width:100%; margin:0; padding-bottom:20px; display:flex; justify-content: space-between;  }
    /*.footer-group summary::after{content: "▾"; transition: transform 0.2s ease;}*/
    .footer-group[open] summary::after{transform: rotate(180deg);}
    .footer-group summary::after{ display: block;   color:#d4d4d4; content: ""; width: 10px; height: 10px; border-right: 2px solid #fff; border-bottom: 2px solid #fff;
      transform: rotate(45deg); transition: transform 0.25s ease; margin-left: 12px;}
    .footer-group[open] summary::after{ transform: rotate(-135deg); }
    .footer_bottom .footer_line {display:none;}

}

@media(max-width:480px){
    .footer{padding:40px 15px; gap:10vw;}
    .footer_top{gap:6vw;}
    #linkedin a, #pdf_portfolio a {font-size: 14px;}
    #link_line {width:0.5px; height:12px;}
    .footer_nav {gap:6vw;}
    .footer-group summary {font-size:14px; font-weight:normal; padding-bottom:10px;}
    .footer-group ul li > a {font-size:14px;}
    .footer_bottom p {font-size:14px;}

}