@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


@import url("https://use.typekit.net/yaz3ggb.css");

html, body, *{font-family:'pretendard', sans-serif;}
.stolzl{font-family: "stolzl", sans-serif;}
html,body{height:100%;background: #f2f7ff;}
header{position:absolute; top:0px; display:flex;    align-items: center; gap:5em;padding: 3em 4em;z-index: 10000;    width: 100%;}
.logo{background:url('../images/logo.png') center center no-repeat; background-size:contain; width:110px; height:50px; font-size:0px;}
.menu{display:flex; gap:3em;}
.menu li, .menu li a{color:#878787;}
.menu li a{margin: 0.2em 0em;
    font-weight: 600;
    display: inline-block;}
.menu li.on{ color:#111111; border-bottom:2px solid #111111;}
.menu li.on a{color:#111;}
.parallax{perspective: 100px; height: 100vh;overflow-x: hidden; overflow-y: auto; 
position:absolute; top:0; left:0; right:0; bottom:0;padding:0px;}
.parallax section{position:absolute;padding:0em;}
.parallax section:nth-child(1){z-index: 1000;}
.parallax section:nth-child(2){z-index: 1000;}
.parallax section:nth-child(3){z-index: 1000;}
.parallax section:nth-child(4){z-index: 1000;}
.parallax section:nth-child(5){z-index: 1000;}
.parallax section:nth-child(6){z-index: 1000;}
.parallax section:nth-child(7){z-index: 1000;}
.parallax section:nth-child(8){z-index: 1000;}
.parallax section:nth-child(9){z-index: 1000;}
.parallax section:nth-child(10){z-index: 1000;}

.ani{opacity: 0;}
.aniMove{animation: slideInLeft 1s ease-in 0s 1 forwards; animation-fill-mode: forwards; }
.aniFadeIn{animation: fadeIn 1s ease-in 0s 1 forwards; animation-fill-mode: forwards; }
@keyframes slideInLeft{
    from{
        position:absolute;
        opacity: 1;
        left:-1000px;
    }
    to{
        left:0px;
        opacity: 1;
    }
}

@keyframes fadeIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.about.parallax section:nth-child(1){transform: translateZ(-350px) scale(5);}
.about.parallax section:nth-child(2){bottom:-200px;background-color: #fff;transform:translateZ(-20px) scale(1.25);
    padding-top: 5em;
    padding-bottom: 5em;}
.about.parallax section:nth-child(3){bottom:-450px;transform:translateZ(-20px) scale(1.25);}
.about.parallax section:nth-child(4){bottom:-1100px;background-color: #fff;transform:translateZ(-20px) scale(1.25);    padding: 6em 0em;}
.about.parallax section:nth-child(5){bottom:-1600px;transform:translateZ(-20px) scale(1.25);}
.about.parallax section:nth-child(6){bottom:-2000px;transform:translateZ(-20px) scale(1.25);}
.about.parallax section:nth-child(7){bottom:-3200px;}
.about.parallax section:nth-child(8){bottom:-3500px;}


.portfolio.parallax section:nth-child(1){transform: translateZ(-350px) scale(5);}
.portfolio.parallax section:nth-child(2){bottom:-800px;background-color: #fff;transform:translateZ(-35px) scale(1.25);
    padding-top: 5em;
    padding-bottom: 10em;}
.portfolio.parallax section:nth-child(3){bottom:-900px;}

*,
*::before,
*::after {
  box-sizing: border-box;
}


.fixedBg{ height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;}

.footButton{width:50px; height:50px; background-color: #000;border-radius: 50%;
position:absolute; bottom:2em; right: 2em;}
section{width:100%; height:100%; padding:5em; position:relative;}
section{width:100%; height:100%; padding:0em; position:relative; 
    position: absolute;  /* relative는 중복이니 제거 */
    inset: 0;            /* top:0; left:0; right:0; bottom:0 의 축약형 */
    width: 100%;
    height: 100%;
    padding: 4em;        /* border-box 덕분에 오버플로우 안 생김 */
    overflow: hidden;
    
}
section.sub{height: auto;}
#bubble{color:#1573ff; font-size: 2.5rem;    font-weight: 500;}

.clock {
    font-size: 4rem;
    position: absolute;
    left: 50%;
    top: 70%;
    margin-left: -45%;
}
.clock ul{    margin: 0 auto;
    padding: 0px;
    list-style: none;
    text-align: center;}

    .clock ul li#point{display: none;}
    ul li:first-child{padding-left: 0;}
.clock ul li {
    display: inline;
    float: left;
    font-size: 5.5rem;
    font-weight: 500;
    text-align: center;
    color:#000; color:#1573ff;
    }
.bar{display:inline-block; height:2px; width:100px; background:#ccc;}
.mainTxt{font-size:32px;font-weight:bold;margin-top: 8em;}
.main_title{background:url('../images/main_title.png') left center no-repeat;font-size:0px; background-size: contain; width: 700px; height: 200px; position:absolute; bottom:0px;}
.main_title_txt{font-size:110px; font-weight: 100; color:#DEDEDE; letter-spacing: -2px;    line-height: 90px;
    position: absolute;
    bottom: 0.25em;}
.foot_title_txt{font-size: 20px;
    position: absolute;
    bottom: 0.25em;    justify-content: space-between;display: flex; 
    width: 100%;    left: 0px;    font-size: 16px; padding:0px 4em;
}
.foot_title_txt a{color:#000; color:#1573ff; font-size: 14px;}
.foot_title_txt {
    position: absolute;
    left: 0;          /* 부모의 '패딩 안쪽' 기준 */
    right: 0;         /* ← 둘 다 주면 패딩 안쪽 너비에 자동 맞춤 */
    bottom: 0.25em;   /* 하단 패딩도 존중됨 */
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 90px;
  }
.mainBanner{max-height:50%; text-align:center;display: flex;
    align-items: center;
    justify-content: center;}
.mainBanner h1{font-size:54px;}

.subBanner{background:#1E1E1E url('../images/sub_title.png') center center no-repeat;font-size:0px; background-size: 80% auto; width: 100%; height: 200px !important;}
.about.parallax .subBanner{background: #1E1E1E; }
.about.parallax .subBanner h3{color:#878787;font-family: "stolzl", sans-serif; font-size:110px; font-weight: 100;    margin: 0.5em 1em;}

section.sub p{font-size:24px;margin-bottom: 5em;}
section.center{    display: flex; align-items: center; justify-content: center; text-align: center;    flex-direction: column; }

section span.sub-title{font-size:16px; font-weight: 300;     color: #aeaeae; padding:0.5em 0em; display:inline-block;}
section h2{font-size: 36px;
    font-weight: 900;
    line-height: 56px;    line-height: 50px;}

.flex{display:flex;}
.flex.row{display:flex;flex-direction: row;}
.g2{gap:2em;}
.g5{gap:5em;}
.g10{gap:10em;}
.m-t-5{margin-top:5em;}
.container{max-width: 980px;margin:0 auto;}
.flex.type02{align-items: flex-end;justify-content: center;    justify-content: space-between;}
.t-center{text-align: center;}
.t-left{text-align: left;}
.t-right{text-align: right;}
.subText{width:570px;line-height: 24px;
    font-size: 16px;}
    .t-content{line-height: 24px;
        font-size: 16px;}
.partner-img{background: url('../images/con2.png') center bottom no-repeat;font-size:0px; background-size: 100% auto; 
    width: 570px; height: 200px !important;}

.bg02{background-color: #F0F0F0;}
.title-type03{font-size:26px; margin-top:-2em;margin-bottom:2em;}
.contact{margin-top:10em;    height: auto; }
.contact .info p{margin-top:2em; line-height: 1.25em;}
.contact .info span{font-size: 14px;}

.contact .container{border-bottom:1px solid #ccc; padding-bottom: 10em;}
section.footer{padding:2em 5em 7em 5em;}
.footer span{margin:1em 0em;    display: inline-block; color:#747474;font-size: 14px;}
.gm-style .place-card-large{display: none;}
.contact-wrap .title-type03{margin-left:-5em;}
.contact-wrap .contact .container{border-bottom: 0px;}
.contact-wrap .contact .container .flex.type02{position:relative;}
.joinus{position:absolute; right:-10em;bottom:0px; color:#000;font-weight: 700;font-size:20px;}
.contact .info .joinus span{width:40px; height:20px; display: inline-block;font-size: 20px;padding-left:10px;}
/*.joinus span::before{width:20px;height:20px; content: '→'; font-size: 20px;display:inline-block; }*/

.aniMoveLR{animation: wave 1s ease-in 0s infinite alternate; animation-fill-mode: forwards; }
@keyframes wave{
    from{
        padding-left:0px;
    }
    to{
        padding-left:20px;
    }
}

.portfolio .cate {margin-bottom: 1em; padding-bottom: 1em; border-bottom:2px solid #000;    display: inline-block;
    width: 100%;}
.portfolio .cate li{float: left; font-size:26px;font-weight: 500; color: #000; letter-spacing: -1px; display: flex;
    justify-content: center;
    align-items: center; margin-right:2em; opacity: .4; cursor: pointer;}
.portfolio .cate li.on{opacity: 1;}
.portfolio .cate li span{font-size:0.6em; margin-left: 0.25em; font-weight: 100;}

.flex-col{display: flex;clear: both; gap:2em;}
.flex-col .list-wrap{flex:1;}
.flex-col .list-wrap .list li{padding:0.5em 0em; border-bottom:1px solid rgba(0,0,0,.4); font-size:18px;font-weight: 400;color:#000; opacity: .8;cursor: pointer;}
.flex-col .list-wrap .list li.on{font-weight: 600; opacity: 1;}
.flex-col .list-wrap .list li:hover,.flex-col .list-wrap .list li:active{font-weight: 600; opacity: 1;}
.flex-col .detail{flex:1;padding-top:2.5em;}
.flex-col .detail h3{padding:1em 0em 0.25em 0em;}
.flex-col .detail span{font-weight: 100;color:#808080;}
.flex-col .detail p{padding:1em 0em; color:#111; font-size:18px;}
.flex-col .detail img{width:100%;}

.menu-trigger {
    margin-right: 70px;
    margin-bottom: 50px;
  }
  .menu-trigger,
  .menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
  }
  
  .menu-trigger {
    position: relative;
    width: 50px;
    height: 44px;
  }
  
  .menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
  }
  
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  
  .menu-trigger span:nth-of-type(2) {
    top: 20px;
  }
  
  .menu-trigger span:nth-of-type(3) {
    bottom: 0;
  }

  @media (max-width: 640px) { 
    header{padding:2em;}
    section{padding:2em;}
    .mainTxt{    margin-top: 7em;}
    .clock{left:0px; margin-left:32px;        top: 60%;    }
    .foot_title_txt{flex-direction: column; line-height: 1.25em; padding:0em 32px; gap:2em;bottom:32px;}
  }