@charset "utf-8";

/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

/* layout */
body {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 16px; color: #1A1A1B;}
.wrap {margin: 0 auto; position: relative; overflow: hidden;}


/* header */
header {width: 100%; position: fixed; z-index: 100;}
header .goTop {position: fixed; right: 40px; bottom: 50px; padding: 18px 20px; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.4); box-sizing: border-box; background: hsla(0,0%,100%,.7); backdrop-filter: blur(8px); transition: all 0.2s;}
header .goTop:hover {background: #ececec;}
header .goTop.on {opacity: 0;}
header .goTop span {color: #2757FF; font-weight: bold; font-size: 18px;}
.innerHeader {width: 97%; height: 50px; padding-top: 24px; margin: 0 auto;}
.innerHeader .mainMenu {width: 370px; display: flex; margin: 0 auto; position: relative;}
.innerHeader .mainMenu .gnb {display: flex; justify-content: space-between; width: 100%; border-radius: 20px; padding: 6px 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); background: hsla(0,0%,100%,.7); backdrop-filter: blur(8px); position: relative;}
.innerHeader .mainMenu .gnb li {padding: 6px 10px; font-weight: bold; position: relative; transition: all 0.3s;}
.innerHeader .mainMenu .gnb li:hover {background: rgba(0,0,0,0.1); border-radius: 20px; transition: all 0.3s;}
.innerHeader .mainMenu .gnb li:nth-child(5) {background: #222; border-radius: 20px; color: #82D7FF;}
.innerHeader .mainMenu .gnb li a {display: block; width: 100%; height: 100%; z-index: 3;}

/* contact */
.contact {margin: 0 auto; width: 100%; height: 100%; text-align: center;
padding: 300px 0 100px; box-sizing: border-box;}
.contact .top {padding-bottom: 150px;}
.contact .top h2 {font-size: 8vw; line-height: 85%; letter-spacing: -6px;}
.contact .top .box {width: 348px; display: flex; justify-content: space-between; margin: 24px auto 0; align-items: center; }
.contact .top .box .img {width: 110px; height: 110px; overflow: hidden; border-radius: 10px; border: 1px solid #2757FF;}
.contact .top .box .img img {width: 100%;}
.contact .top .box .inFormation {font-size: 20px;}
.contact .top .box .inFormation .tel {padding: 12px 20px; border: 1px solid #2757FF; letter-spacing: -1px;
font-weight: 500;}
.contact .top .box .inFormation .tel:nth-child(1) {border-radius: 10px; margin-bottom: 10px;}
.contact .top .box .inFormation .tel:nth-child(2) {border-radius: 10px;}
.contact .bottom {width: 96%; height: 24px; margin: 0 auto; display: flex; justify-content: space-between; font-size: 20px; color: #acacac; padding-bottom: 32px; border-bottom: 2px solid #acacac;}
.contact .bottom .left {display: flex; width: 28%; letter-spacing: -1px;}
.contact .bottom .left p span {color: #1A1A1B; padding-right: 20px}
.contact .bottom .left .e-mail {display: flex;}
.contact .bottom .left .e-mail .first {padding-right: 20px; border-right: 2px solid #acacac;}
.contact .bottom .left .e-mail .second {padding-left: 20px;}
.contact .bottom .right {width: 11%; display: flex; text-align: right;}
.contact .bottom .right p span {color: #1A1A1B; padding-right: 20px;}


/* animation */
.contact .top .box {animation-name: textAni; animation-duration: 2s;}
.motion .char { display: inline-block;
    animation: textAni 1s cubic-bezier(.10, 0, .10, 1) both;
    animation-delay: calc(30ms * var(--char-index));
}

@keyframes textAni {
    0% {opacity: 0;}
    40% {opacity: 0; transform: translate3d(0,40px,0); transform-origin: top left;}
}


/* responsiveWeb */
/* pc 1650px~ 1301px */
@media screen and (max-width:1650px) {
    .contact .bottom .left {width: 50%;}
    .contact .bottom .right {width: 16%;}

}

/* mobile 400px~301px */
@media screen and (max-width:400px) {
    .innerHeader {width: 97%; height: 50px; padding-top: 24px; margin: 0 auto;}
    .innerHeader .mainMenu {width: 320px;}
    .innerHeader .mainMenu .gnb li {font-size: 14px; padding: 4px 8px; font-weight: bold; position: relative; transition: all 0.3s;}
    .contact {padding: 300px 0 40px; width: 94%;}
    .contact .top {padding-bottom: 180px; border-bottom: 2px solid #acacac;}
    .contact .top h2 {font-size: 50px; line-height: 1; letter-spacing: -3px;}
    .contact .top .box {width: 225px;}
    .contact .top .box .img {width: 70px; height: 70px;}
    .contact .top .box .inFormation {font-size: 14px;}
    .contact .top .box .inFormation .tel:nth-child(1) {padding: 6px 11px;}
    .contact .top .box .inFormation .tel:nth-child(2) {padding: 6px 11px;}
    .contact .bottom {display: none;}
    .contact .bottom .left {margin-bottom: 10px;}
    .contact .bottom .left .e-mail {display: block;}
    .contact .bottom .left .e-mail .first {border: none; padding-right: 0;}
    .contact .bottom .left .e-mail .second {padding-left: 0;}
    .contact .bottom .right {width: 100%;}
    .contact .bottom .left {width: 100%;}
}