@charset "utf-8";

.inner {width: 100%; max-width: 1520px; margin: 0 auto;}
.inner .inner {padding: 0;}

header {position: fixed; top: 0; left: 0; width: 100%; background-color: rgba(11, 11, 11, 0.6); z-index: 999999;}
header > .inner {height: 80px; display: flex; justify-content: space-between; align-items: center;}
header > .inner .gnb {height: 100%; display: flex;}
header > .inner .gnb li {height: 100%;}
header > .inner .gnb li a {height: 100%; line-height: 80px; padding: 0 40px; color: #fff;}
header > .inner .gnb li a:hover,
.mo-gnb li a:hover {color: #1673E2; transition: all 0.3s;}

.mo-btn{position:relative;display:none;width:30px;height:30px;cursor:pointer;}
.mo-btn span,
.mo-btn span:before,
.mo-btn span:after{display:block;position:absolute;left:0;width:100%;height:3px;background:#fff;transition:all 0.3s;}
.mo-btn span{top:50%;transform:translteY(-50%,-50%);}
.mo-btn span:before,
.mo-btn span:after{content:'';}
.mo-btn span:before{top:-10px;}
.mo-btn span:after{top:10px;}
.mo-gnb {display: none; row-gap: 30px; flex-direction: column; padding: 30px 32px;}
.mo-gnb li a {display: flex; justify-content: center; color: #fff; font-size: 18px; font-weight: 500;}

.menu-open .mo-btn>span{background:transparent;}
.menu-open .mo-btn>span:before{top:0;transform:rotate(45deg);}
.menu-open .mo-btn>span:after{top:0;transform:rotate(-45deg);}
.menu-open .mo-gnb {display: flex;}


footer {padding: 47px 0; background-color: #2D2D2D;}
footer > .inner {display: flex; flex-direction: column; row-gap: 80px;}
footer > .inner .footer-t {display: flex; justify-content: space-between; align-items: center;}
footer > .inner .footer-t .logo img {height: 104px;}
footer > .inner .footer-t p {font-size: 20px; color: #fff; line-height: 40px; text-align: right; word-break: keep-all;}
footer > .inner .footer-t p b {font-size: 24px; font-weight: 700;}
footer > .inner .footer-b {display: flex; justify-content: space-between; align-items: flex-end;}
footer > .inner .footer-b ul li {color: #fff; word-break: keep-all;}
footer > .inner .footer-b ul:not(.link) {display: flex; flex-direction: column; row-gap: 24px;}
footer > .inner .footer-b ul.link {display: flex; column-gap: 50px;}
footer > .inner .footer-b ul.link a:hover {color: #1673E2; transition: all 0.3s;}

.floating {position: fixed; bottom: 50px; right: 75px; display: flex; flex-direction: column; align-items: center; row-gap: 24px; z-index: 999;}
.floating a {display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.floating a .icon {width: 60px; height: 60px; background-color: #1673E2; display: flex; align-items: center; justify-content: center; border-radius: 20px; box-shadow: 0px 4px 20px 1px rgba(222, 222, 222, 0.6);}
.floating a .icon svg {width: 33px; height: auto;}
.floating a .icon svg path {fill: #fff;}
.floating a:not(.call) .icon {background-color: #36B44A;}
.floating a span {font-size: 20px; font-weight: 600;}


/* 반응형 */
@media screen and (max-width: 1520px) {
    .inner {padding: 0 32px;}
}

@media screen and (max-width: 1200px) {
    header > .inner .gnb li:last-of-type a {padding: 0 0 40px 0;}

    footer > .inner {row-gap: 60px;}
    footer > .inner .footer-t {flex-direction: column; align-items: flex-start; row-gap: 20px;}
    footer > .inner .footer-t p {text-align: left; line-height: 36px;}
    footer > .inner .footer-t .logo img {height: 72px;}
    footer > .inner .footer-b {flex-direction: column; align-items: flex-start; row-gap: 40px;}
    footer > .inner .footer-b ul:not(.link) {row-gap: 10px;}

    .floating {right: 4%;}
}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 768px) {

    .inner {padding: 0 20px;}

    header > .inner .gnb {display: none;}
    .mo-btn {display: block;}

    footer {padding: 42px 0;}
    footer > .inner {row-gap: 50px;}
    footer > .inner .footer-t .logo img {height: 52px;}
    footer > .inner .footer-t p,
    footer > .inner .footer-t p b {font-size: 16px; line-height: 24px;}


}

@media screen and (max-width: 500px) {

}

@media screen and (max-width: 410px) {

}