@charset "UTF-8";

#header {position: fixed; top: 0; right: 0; left: 0; width: 100%; height: auto; padding: 24px 0; background: transparent; z-index: 100; transition: all .3s;}

#header .menu-bar {width: 100%; max-width: 1200px; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: 24px;}

#header .logo-area {display: block; max-width: 200px; height: 80px; transition: height .3s;}
#header .logo-area .logo {display: block; width: 100%; height: 100%; object-fit: contain;}

#header .btn-area {display: -webkit-flex; display: flex; justify-content: end; align-items: center; gap: 24px;}
#header .btn-area .btn {display: -webkit-flex; display: flex; justify-content: start; align-items: center; column-gap: 12px; font-size: 1.125rem; color: var(--darkgray); letter-spacing: -0.2px;}
#header .btn-area .btn i {font-size: 1.125rem;}
#header .btn-area .btn-move {padding: 0.75rem 1.875rem;}
#header .btn-move2 {font-weight: 600; font-size: 1.125rem; color: #222;}

#header.shrink {padding: 15px 0; background: rgba(255, 255, 255, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, .1);}
#header.shrink .logo-area {height: 50px;}





/* Safari 14.1 이전 버전 */
@supports not (inset: 0){
    #header .logo-area {margin-right: 24px;}
    #header .btn-area .btn i {margin-right: 12px;}
    #header .btn-area .btn-move {margin-left: 24px;}
}



@media screen and (max-width:1200px){
    #header {padding: 24px 36px;}
    #header.shrink {padding: 15px 36px;}
}

@media screen and (min-width:993px){
}

@media screen and (max-width:992px){
    #header {padding: 20px 36px;}
    #header .menu-bar {column-gap: 16px;}
    #header .logo-area {height: 60px;}
    #header .btn-area {gap: 16px;}
    #header .btn-area .btn {column-gap: 10px;}
    #header.shrink {padding: 12px 40px;}
    #header.shrink .logo-area {height: 40px;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        #header .logo-area {margin-right: 16px;}
        #header .btn-area .btn-move {margin-left: 16px;}
    }
}

@media screen and (max-width:768px){
    #header {padding: 20px 32px;}
    #header .logo-area {height: 50px;}
    #header.shrink {padding: 12px 30px;}
    #header.shrink .logo-area {height: 36px;}
}

@media screen and (max-width:480px){
    #header {padding: 14px 16px;}
    #header .menu-bar {column-gap: 12px;}
    #header .logo-area {height: 40px;}
    #header .btn-area {gap: 12px;}
    #header .btn-area .btn {column-gap: 8px;}
    #header.shrink {padding: 10px 16px;}
    #header.shrink .logo-area {height: 30px;}



    /* Safari 14.1 이전 버전 */
    @supports not (inset: 0){
        #header .logo-area {margin-right: 12px;}
        #header .btn-area .btn i {margin-right: 8px;}
        #header .btn-area .btn-move {margin-left: 12px;}
    }
}