footer{
    background-color: var(--cb-color-900);
    color: #fff;
}
footer .common-frame{
    padding: var(--space-x-large) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
}
.f-content1{
    display: flex;
    justify-content: space-between;
    align-items: center
}
.f-nav{
    display: flex;
    gap: var(--space-large);
    align-items: center;
}
.f-logo img{
    height: 100px;
}
.fnb{
    display: flex;
    gap: var(--space-large);
    align-items: center;
}
.fnb li:last-of-type{
    color: var(--cb-color-200);
}
.news-letter{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
}
.news-letter input[id="u-email"] {
    background-color: #fff;
    color: #606060;
    width: 440px;
    height: 40px;
    border-radius: .5rem;
    padding-left: var(--space-normal);
    box-sizing: border-box;
}
.news-letter button {
    background-color: var(--cb-color-400);
    width: 80px;
    height: 40px;
    text-align: center;
    border-radius: .5rem;
    position: absolute;
    right: 0;
    top: 0;
}
.u-agree-box{
    display: flex;
    align-items: center;
    gap: var(--space-small);
}
input[id="u-agree"]{
    background-color: #fff;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
input[id="u-agree"]:checked:after{
    content: '';
    background: linear-gradient(180deg,var(--cb-color-400),var(--cb-color-800));
    border-radius: 50%;
    width: 80%;
    height: 80%;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.f-content2{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.co-info{
    display: grid;
    grid-template-columns: repeat(2,auto);
    gap: var(--space-small) var(--space-x-large);
}
.co-info dd{
    font-weight: var(--fw-bold);
}
.sub-co-info{
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
}
.sub-co-info>p{
    text-align: right;
}
.sub-co-info .sns{
    display: flex;
    justify-content: flex-end;
    gap: var(--space-small);
}
.copy{
    text-align: center;
}




@media (max-width: 1440px){

}


@media (max-width: 1100px){
    .f-content1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-normal);
    }
    .news-letter input[id="u-email"] {
        width: 550px;
    }
    .news-letter button {
        right: 0;
        left: initial;
    }
}


@media (max-width: 768px){
    .f-content1 {
        flex-direction: column;
        align-items: center;
    }
    .f-logo img {
        height: 70px;
    }
    .f-nav {
        flex-direction: column;
        align-items: center;
        margin-bottom: var(--space-large);
    }
    .fnb {
        gap: var(--space-normal);
        justify-content: space-between;
        white-space: nowrap;
    }
    .co-info {
        gap: var(--space-small) var(--space-normal);
        margin-bottom: var(--space-large);
    }
    .f-content2 {
        flex-direction: column;
        align-items: center;
    }
    .sub-co-info {
        flex-direction: column;
        align-items: center;
    }
    .sub-co-info>p {
        text-align: center;
    }
    main .bottom-banner {
        height: auto;
    }
    .news-letter input[id="u-email"] {
        width: 100%;
        height: 30px;
    }
    .news-letter button {
        width: 60px;
        height: 30px;
        /* left: calc(320px - 50px); */
    }
    input[id="u-agree"] {
        width: 13.2px;
        height: 13.2px;
    }
    .news-letter.pc{
        display: none;
    }
    .news-letter.mo{
        display: block;
        margin-bottom: var(--space-large);
    }
    .news-letter.mo input{
        margin-bottom: var(--space-small);
    }
    .news-letter.mo .u-agree-box {
        align-items: flex-start;
    }
    .f-content1 .f-nav {
        margin-bottom: 0;
    }
    .news-letter.mo button {
        /* left: calc(100% - 50px); */
    }
    

}



@media (max-width: 300px){
    .fnb {
        gap: var(--space-small);
    }

}