@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%;}
header{position:absolute; top:0px; display:flex;    align-items: center; gap:5em;padding: 1em 2em;z-index: 10000;    width: 100%;background: #fff;}
.logo{background:url('../images/logo.png') center center no-repeat; background-size:contain; width:140px; height:50px; font-size:0px;}
.logo a{display: inline-block;    width: 100%;    height: 100%;}
.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;
    }
}
h2.title{color:#4F3DD3; font-size: 52px; padding-bottom:1em;}
.about.parallax section:nth-child(1){transform: translateZ(-250px) scale(5);}
.about.parallax section:nth-child(2){bottom:-900px;background-color: #fff;transform:translateZ(-20px) scale(1.25);
    padding-top: 5em;
    padding-bottom: 15em;}
.about.parallax section:nth-child(3){bottom:-1100px;transform:translateZ(-40px) scale(1.5);}
.about.parallax section:nth-child(4){bottom:-2100px;padding-top: 20em;}
.about.parallax section:nth-child(5){bottom:-2450px;}


.event.parallax section:nth-child(1){flex-direction: column; gap:2em; padding:5em 0em; top:200px;}
.event.parallax section:nth-child(1) img{width:80%; max-width:780px;}



.event.parallax section:nth-child(1) p{display:block; font-size:20px; line-height:1.5em; margin-top:1em;}
.event.parallax section:nth-child(2){bottom:-180px;background-color: #fff;
    padding-top: 5em;
    padding-bottom: 10em;}
.event.parallax section:nth-child(3){bottom:-900px;}


.flex.two-wide{display:flex; flex-direction: row; padding:3em 0em; }
.flex.two-wide div{flex:1; display: flex; gap:1em; flex-direction: column;    align-items: center; width:350px;}
.flex.two-wide div .img{height: 150px; width:80%; }

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



    .flex.two-wide div .img {
        height: 261px;
        width: 90%;
        flex: auto;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .event_title{position: fixed;left: 250px;  position: sticky; top: 100px;}
    .bg-img {height: 1700px;
        width: 100%;
        padding:100px 0px;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;    margin: 0 auto;    background-color: #fff; text-align: center;
        display: flex;
            flex-direction: row;
            align-items: flex-start;justify-content: center;gap:2em;
    }
        section.event section{padding:0em;}
        .bg-img img{width: 400px;}
        .bg-img .event_top{width:200px; margin:0em 0em 2em 0em;}
        .event_top{width:200px; margin:0em 0em 2em 0em;}
.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.sub{height: auto;}
.bar{display:inline-block; height:2px; width:100px; background:#ccc;}
.mainTxt{font-size:32px;font-weight:bold;margin-top: 12em;}
.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;}

.mainBanner{max-height:40%; text-align:center;display: flex;
    align-items: center;
    justify-content: center;}
.event .mainBanner{max-height:50%;}
.mainBanner h1{font-size:54px;    font-weight: 900;}

.subBanner{background:#4F3DD3 url('../images/sub_title.png') center center no-repeat;font-size:0px; background-size: 80% auto; width: 100%;padding:2em 0em;}
.about.parallax .subBanner{background: #4F3DD3; }
.about.parallax .subBanner h3{color:#fff;font-family: "stolzl", sans-serif; font-size:66px; font-weight: 100;    margin: 0.75em 1em;}

section.sub p{font-size:24px;margin-bottom: 5em; line-height: 1.75; }
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: #fbfbfb;}
.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;
    }
}

.footer-cont ul{display: inline-flex; gap:1em; }
.sns.naver{display: block;position: relative; width: 35px;height: 35px;background: url('../images/sns_n.png') 0 0 no-repeat;background-size: contain;}
.sns.kakao{display: block;position: relative; width: 35px;height: 35px;background: url('../images/sns_k.png') 0 0 no-repeat;background-size: contain;}
.sns.instargram{display: block;position: relative; width: 35px;height: 35px;background: url('../images/sns_i.png') 0 0 no-repeat;background-size: contain;}
.sns.youtube{display: block;position: relative; width: 35px;height: 35px;background: url('../images/sns_y.png') 0 0 no-repeat;background-size: contain;}
.footer-comp{padding:1em 0em; border-top:1px solid #ccc; background-color: #fff;}
.footer-comp ul{display:flex;gap:4em;justify-content: center; overflow: hidden;}
.footer-comp ul img{width:195px;}


.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%;}
.btn.type01{padding:10px 25px; background-color: #fff; color:#fe16c4; font-weight: 700; border-radius: 3px; font-size:18px;}
.btn.type02{padding:10px 30px; background-color: red; color:#fff; font-weight: 700; border-radius: 5px;font-size: 18px; margin:20px 0px; display: inline-block;}
.event_cont{width:100%; max-width: 850px;}
.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;
  }
  .event .mainBanner{ flex-direction: column; max-height: none; display: inline-block; text-align: center;height: initial;}
  section.event{padding: 5em 0em;}
  .pc{display: inline-block;}
  .mo{display: none;}
  .event p{margin-bottom:1.5em;word-break: keep-all;    font-weight: 500; /*text-shadow: 0px 0px 15px #fff; */}
  .event .msg {
    margin-left:50px;
    font-size: 20px;
    line-height: 1.75;
    margin-top:50px;
    }
    .bg-img{padding:100px 100px;}
section.footer ,section.event section.footer{padding:5em;}

@media screen and (max-width : 1300px) {
    .event .msg { margin-left: 0px; }
    .bg-img{padding:100px 100px;}
    .bg-img img{width:400px;}
    .event_title{left:100px;}
}

@media screen and (max-width : 1000px) {
    .event .msg { margin-left: 0px; }
    .bg-img{padding:100px 50px;}
    .bg-img img{width:300px;}
}
@media screen and (max-width : 900px) {
    .event .msg { margin-left: 50px; }
    .event_title{left:70px;}
    .event .msg { margin-left: 0px;}
    .bg-img{height:2200px;}
}
  @media screen and (max-width : 780px) {
    .bg-img img{width:250px;}
    .mo{display: inline-block;}
    .pc{display: none;}
    .parallax section{position: relative;}
    .about.parallax section{bottom:auto;}
    .mainBanner{max-height: 250px;}


    .about.parallax section:nth-child(1){transform: translateZ(-250px) scale(3);}
    .about.parallax section:nth-child(2){bottom:-500px;background-color: #fff;transform:translateZ(-20px) scale(1);
        padding-top: 5em;
        padding-bottom: 15em;}
    .about.parallax section:nth-child(3){bottom:-500px;transform:translateZ(-40px) scale(1.5);        z-index: 1000;}
    .about.parallax section:nth-child(4){bottom:-500px;padding-top: 15em;}
    .about.parallax section:nth-child(5){bottom:-500px;}
    .about.parallax .subBanner h3{font-size: 40px; padding:20px 0em;}
    .flex.two-wide{flex-direction: column;gap:5em;}
    .event.parallax section:nth-child(1){flex-direction: column; gap:2em; padding:5em 0em; top:200px;}
    .event.parallax section:nth-child(1) img{width:80%; max-width:780px;}
    .event.parallax section:nth-child(1) p{display:block; font-size:20px; line-height:1.5em; margin-top:1em;}
    .event.parallax section:nth-child(2){bottom:-300px;background-color: #fff;
        padding-top: 5em;
        padding-bottom: 10em;}
    .event.parallax section:nth-child(3){bottom:-900px;}

    section.sub p{visibility: visible !important;}
    .flex.row{flex-direction: column;}
    .flex.row > div{width: 100%;}
    .container{max-width: 90%;}
    iframe{width: 100%;}
    section.footer{padding:2em;}
    .event .mainBanner{}

    .flex.two-wide div .img {
        height: 261px;
        width: 90%;
        flex: auto;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    .event_title{position: relative; top:0px; left:0px;}
    .bg-img .event_top{width:120px;}
    .bg-img {
        width: 100%;
        height: 2400px;
        flex: none;
        display: flex;
        background-repeat: no-repeat;
        background-position: center;
        flex-direction: column;
    }
        .event .msg {
            font-size: 16px;
            line-height: 1.75;
        }

  }