/* body */
body{
    background-color: var(--primary);
}

.all-wp {
    width: 100%;
    max-width: var(--w-1200);
    margin: 0 auto;
    min-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
}

.all-wp::-webkit-scrollbar {
    display: none;
}

main {
    width: 100%;
    min-height: 100vh;
    padding: 60px 20px 90px 20px;
}

/* header */
header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 555;
}

.header-in {
    width: 100%;
    max-width: var(--w-1200);
    height: 60px;
    margin: 0 auto;
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background: rgba(33, 37, 42, .3);
}

.header-left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.header-logo {
    padding: 10px 20px;
}

.header-logo img {
    height: 34px;
    /*filter: brightness(0);*/
}

.header-center {
    width: 100%;
    text-align: center;
    height: 60px;
    line-height: 60px;
}

.header-center p {
    padding: 0 60px;
    font-weight: var(--f-w-semibold);
    letter-spacing: -.25px;
}

.header-left:has(.header-logo)+.header-center p {
    font-weight: var(--f-w-semibold);
    font-family: var(--hahmlet);
    text-align: right;
    padding: 0 20px;
}

.header-center p span {
    font-family: var(--hahmlet);
    font-size: var(--f-middle);
    font-weight: var(--f-w-semibold);
}

.btn-back {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-back img {
    filter: brightness(100);
}

/*.header-in.active .header-center p span,*/
/*.header-in.active .header-center p{*/
/*    color: var(--font);*/
/*}*/

/*.header-in.active .header-logo img {*/
/*    filter: none;*/
/*}*/

/* footer */
footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 555;
}

.footer-in {
    width: 100%;
    max-width: var(--w-1200);
    height: 70px;
    margin: 0 auto;
    background-color: var(--font);
    background-color: rgba(54, 59, 65, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 30px 30px 0 0;
    box-shadow: var(--box-shadow);
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}

.footer-in li {
    width: calc(100% / 5);
    text-align: center;
    font-size: var(--f-caption);
}

.footer-in li a{
    display: block;
    text-align: center;
}

.footer-in li svg{
    margin: 0 auto;
}

.footer-in li p {
    margin-top: 4px;
    font-weight: var(--f-w-semibold);
    font-size: var(--f-caption);
    color: var(--text-02);
}

.footer-in li .fill {
    display: none;
}

.footer-in li.active .fill {
    display: block;
}

.footer-in li.active .line {
    display: none;
}

.footer-in li.active p {
    color: var(--white);
}

/* 미디어쿼리 */
@media (min-width:1400px) {
    :root {
        --w-1200: 820px;
    }
    
}

@media all and (min-width:1024px) and (max-width:1180px) {

}

@media all and (min-width:768px) and (max-width:1023px) {

}

@media all and (max-width:767px) {

}

@media all and (max-width:479px) {
    :root {
        /* font size */
        --f-big: 30px;
        --f-large: 22px;
        --f-middle: 18px;
        --f-normal: 14px;
        --f-small: 13px;
        --f-caption: 11px;
    }

    *{
        font-size: var(--f-normal);
    }

    input,
    textarea,
    select{
        font-size: 16px;
    }

	.header-logo img {
		content: url("/assets/images/logo/logo_ver_gold.svg");
	}
}

@media all and (max-width:360px) {
  .footer-in li svg {
    width: 20px;
    height: 20px;
  }

  .footer-in {
    gap: 10px;
  }

}