header {
    width: 100%;
    position: absolute;
    text-align: center;
    z-index: 5;
    top: var(--space-45)
}
header h1.logoarea {
    z-index: 1;
}
header .layout-wide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:100%;
}
header .inner {
    display: var(--flex-box);
    align-items: flex-end;
    justify-content: flex-start;
}
nav ul {
    display: var(--flex-box);
    margin-left: var(--space-100)
}
nav ul li {
    margin: 0 var(--space-25)
}
nav ul li a {
    font-family: var(--font-en);
    font-size: var(--font-16);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    transition: var(--transition);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    
}
nav ul li a:hover,
nav ul li.on a {
    color: var(--color-red);
    font-weight: var(--fw-extrabold);
}
nav ul li a::after,
nav ul li.on a::after {
    content: attr(data-text);
    content: attr(data-text)/"";
    height: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    pointer-events: none;
    font-weight: var(--fw-extrabold);
}
    /* Header 미디어쿼리 */
    @media all and (max-width:1000px) {
        header {
            top: 2rem;
        }
        nav {
            display: none;
        }
        header h1.logoarea {
            width:130px
        }
        header h1.logoarea img {
            width:100%
        }
    }
    @media all and (max-width:640px) {
        header {
            top: var(--space-20)
        }
        header h1.logoarea {
            width:105px
        }
    }

/* Footer */
footer {
    width: 100%;
    background-color: #191919;
    color: var(--color-white)
}
footer a {
    color: inherit;
    transition: var(--transition);
    font-size: inherit
}
footer a:hover {
    color: var(--color-pink);
}
footer .ft-tit {
    color: var(--color-white);
    font-weight: var(--fw-b);
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--space-20)
}
footer .footer-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: var(--space-90) 0
}
footer .footer-logo {
    width: 20%;
}
footer .footer-logo .logo {
    width: 180px;
    display: block;
}
footer .footer-logo img {
    width: 100%;
}
footer .footer-logo .cs-center {
    display: block;
    font-size: var(--font-40);
    font-weight: var(--fw-b);
    font-family: var(--font-en);
    margin-top: var(--space-40)
}
footer .footer-content {
    width:75%;
    max-width: 1018px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
footer .footer-info {
    width: 60%
}
footer .footer-info .ft-company dl {
    font-size: var(--font-16);
    opacity: 0.8;
}
footer .footer-info .ft-company dt {
    float: left;
    width: 90px
}
footer .footer-info .ft-company dd {
    width:100%;
    padding-left: var(--space-90);
}
footer .footer-info .ft-company dd:not(:last-of-type) {
    margin-bottom: var(--space-10)
}
footer .footer-info .ft-company dd::after {
    content:"";
    clear:both
}
footer .footer-element {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
footer .footer-element strong {
    display: block;
}
footer .footer-element .element-policy a {
    font-weight: var(--fw-b);
}
footer .footer-element .sns-list {
    display: flex;
    justify-content: space-between;
}
footer .footer-element .sns-list li:not(:last-child) {
    margin-right: 7px
}
footer .footer-element .sns-list li a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-lgray);
    border-radius: 1000000px
}
footer .footer-element .sns-list li a:hover {
    border: 1px solid var(--color-pink);
}
footer .footer-element .sns-list li a .st0 {
    transition: all 0.3s;
}
footer .footer-element .sns-list li a:hover .st0 {
    fill: var(--color-pink)
}
footer .footer-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.3);
    padding: var(--space-25) 0;
}
footer .footer-bottom {
    color: var(--color-white);
    font-size: var(--font-16);
    color: #949494;
    display: flex;
    justify-content: space-between;
    font-weight: var(--fw-l)
}
    /* Footer 미디어쿼리 */
    @media all and (max-width:1200px) {
        footer .footer-logo {
            width: 30%;
        }
        footer .footer-content {
            width:65%;
        }
        footer .footer-top {
            padding: var(--space-60) 0
        }
    }
    @media all and (max-width:1000px) {
        footer .ft-tit {
            margin-bottom: var(--space-10)
        }
        footer .footer-top {
            flex-direction: column;
        }
        footer .footer-logo {
            width:100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
        }
        footer .footer-logo .cs-center {
            margin-top: 0
        }
        footer .footer-logo .logo {
            width: 150px;
        }
        footer .footer-logo .cs-center {
            font-size: var(--font-30);
        }
        footer .footer-content {
            width:100%;
            margin-top: var(--space-40)
        }
        footer .footer-info .ft-company dd:not(:last-of-type) {
            margin-bottom: var(--space-5)
        }
    }
    @media all and (max-width:640px) {
        footer .footer-top {
            padding: var(--space-40) 0
        }
        footer .ft-tit {
            font-size: var(--font-16)
        }
        footer .footer-logo .logo {
            width: 120px;
        }
        footer .footer-logo .cs-center {
            font-size: var(--font-20);
        }
        footer .footer-content {
            flex-wrap: wrap;
        }
        footer .footer-info,
        footer .footer-element {
            width:100%
        }
        footer .footer-info {
            margin-bottom: var(--space-40)
        }
        footer .footer-info .ft-company dt {
            width: 80px;
        }
        footer .footer-info .ft-company dd {
            padding-left: var(--space-80);
        }
        footer .footer-info .ft-company dd:not(:last-of-type) {
            margin-bottom: 0
        }
        footer .footer-element .element-sns {
            margin-top: var(--space-40)
        }
        footer .footer-element .sns-list {
            justify-content: flex-start;
        }
    }



/* Floating Menu */
#floatingMenu {
    position: fixed;
    bottom: 5%;
    right: 2%;
    z-index: 100;
}
#floatingMenu .floatingWrap {
    display: block;
    cursor: pointer;
}
#floatingMenu .floatingTit {
    position: relative;
    width:110px;
    height:110px;
    border-radius: 100000000px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255,255,255,0.95);
    text-align: center;
    margin: 0 auto;
    margin-bottom: 5px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-name: FloatingJump;
    animation-name: FloatingJump;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    pointer-events: none;
}
#floatingMenu .floatingWrap:hover .floatingTit {
    border: 1px solid rgba(0, 0, 0, 1);
}
@-webkit-keyframes FloatingJump {
    0% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
}
@keyframes FloatingJump {
    0% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
    50% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
    100% {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }
}
#floatingMenu .floatingBtn {
    overflow: hidden;
    position: relative;
    display: block;
    padding-left: 5px;
    padding-right: 5px;
    width: 30px;
    margin: 0 auto;
    -webkit-transition: width .3s .5s ease, border-radius 1.1s ease;
    transition: width .3s .5s ease, border-radius 1.1s ease;
}
#floatingMenu .floatingBtn a {
    display: block;
    position: relative;
    color: #000000;
    text-decoration: none;
    overflow: hidden;
    padding: 5px;
}
#floatingMenu .floatingBtn a:hover {
    text-decoration: inherit;
    color: white;
    background-color: #000000;
    -webkit-transition: background-color .5s ease;
    transition: background-color .5s ease;
}
#floatingMenu .floatingBtn::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    line-height: 20px;
    text-align: center;
    font-size: 1.1rem;
    background-color: #000000;
    color: white;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    -webkit-transition: all .3s .5s ease;
    transition: all .3s .5s ease;
    cursor: pointer;
    cursor: hand;
}
#floatingMenu .floatingBtn ul {
    opacity: 0;
}
#floatingMenu .floatingBtn ul {
    margin-top: 11px;
    opacity: 0;
    width: 100%;
    margin-left: 0px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    text-align: center;
    font-size: 15px;
}
#floatingMenu .floatingBtn ul li {
    background-color: #1E1E1E;
    margin-top: 5px;
    width: 100%;
    height: 0px;
    overflow: hidden;
    -webkit-transition: height 1s ease;
    transition: height 1s ease;
    text-align:center;
}
#floatingMenu .floatingBtn ul li:first-child {
    background-color: #D90060
}
#floatingMenu .floatingBtn ul li a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF
}
#floatingMenu .floatingBtn ul li a:hover {
    background-color: #D90060
}
#floatingMenu .floatingWrap:hover .floatingTit {
    -webkit-animation-duration: 0s;
    animation-duration: 0s;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
#floatingMenu .floatingWrap:hover .floatingBtn {
    width: 158px;
    padding-bottom: 5px;
    -webkit-transition: width .3s ease, border-radius .3s ease, padding-bottom .3s ease;
    transition: width .3s ease, border-radius .3s ease, padding-bottom .3s ease;
}
#floatingMenu .floatingWrap:hover .floatingBtn::after {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    left: 50%;
    top: 10px;
    -webkit-transform: translateY(-5px) translateX(-50%);
    transform: translateY(-5px) translateX(-50%);
}
#floatingMenu .floatingWrap:hover .floatingBtn ul {
    opacity: 1;
    margin-top: 30px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
#floatingMenu .floatingWrap:hover .floatingBtn li {
    height: 40px;
    -webkit-transition: height 1s ease;
    transition: height 1s ease;
}
    /* 퀵메뉴 미디어쿼리 */
    @media all and (max-width:640px) {
        #floatingMenu {
            bottom: 3%
        }
        #floatingMenu .floatingTit {
            width: 80px;
            height: 80px
        }
        #floatingMenu .floatingTit img {
            width: 30px
        }
    }