@charset "utf-8";

#wrap{background-color: #000;}

.title{font-weight: 700; font-size: 18px; text-align: center;}

/* 가운데영역 */
.container{max-width: 1380px; margin: 0 auto; padding: 0 20px;}

/* 헤더 */
#header{position: fixed; top:-100px; left:0; right:0; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; z-index: 999; transition: all 1.5s;}
#header.active{top: 0;}
#header.scroll{background-color: rgba(0,0,0,.5);}
#header .logoBox h1 a,
#header .logoBox h1 a img{display: block;}
#header .menu{display: flex;}
#header .menu li a{ padding: 29px 14px; display: block; color: #fff; font-weight: 500; font-size: 16px;}
#header .menu li a span{position: relative;}
#header .menu li a span::before{content: ''; position: absolute; bottom: -2px; left:0; width: 0; height: 1px; background-color: #fff; transition: all .5s;}
#header .menu li a:hover span::before{width: 100%;}
#header .mobileMenuBtnBox{display: none;}
#header .mobileMenuBox{display: none;}

@media (max-width: 1199px){

    #header .mobileMenuBtnBox{display: block;}
    #header .menu{display: none;}
    #header{padding: 15px 20px;}
    #header .mobileBtn{display: flex; flex-direction: column-reverse; justify-content: center; align-items: flex-end;  gap: 8px 0; width: 40px; height: 19px;}
    #header .mobileBtn::after,
    #header .mobileBtn::before{content: ''; width: 70%; height: 3px; border-radius: 50px; background-color: #fff;} 
    #header .mobileBtn::before{content: ''; width: 100%;}
    #header .mobileMenuBox{padding: 80px 0 0; display: block; position: fixed; top:0; right:-3000px; bottom: 0; background-color: #000; z-index: 99999;}
    #header .mobileMenu li a{padding: 15px 166px 15px 50px; display: block; color: #fff; font-size: 16px;}
    #header .mobileCloseBtnBox{position: absolute; top:20px; right:20px; width: 30px; height: 30px;}
    #header .mobileCloseBtn{position: relative; width: 100%; height: 100%;}
    #header .mobileCloseBtn::after,
    #header .mobileCloseBtn::before{content: ''; position: absolute; top:14px; width: 100%; height: 3px; border-radius: 50px; background-color: #fff;}
    #header .mobileCloseBtn::after{left:0; transform: rotate(45deg);}
    #header .mobileCloseBtn::before{right: 0; transform: rotate(-45deg);}
 
}

/* 인트로영역 */
#introWrap .introBox{height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#introWrap .logoBox{margin-bottom: 102px;}
#introWrap .logoBox img{display: block; margin: 0 auto; }
#introWrap .titleBox img{display: block; margin: 0 auto;}

@media (max-width: 1199px){

    #introWrap{padding: 0;}
    #introWrap .introBox{height: 100vh;}
    #introWrap .logoBox{margin-bottom: 70px;}
    #introWrap .logoBox img{width: 600px;}

}

@media (max-width: 767px){

    #introWrap .logoBox{margin-bottom: 50px;}
    #introWrap .titleBox img,
    #introWrap .logoBox img{width: 500px;}

}

@media (max-width: 576px){

    #introWrap .logoBox{margin-bottom: 10vw;}
    #introWrap .titleBox img,
    #introWrap .logoBox img{max-width: 480px; width: 100%;}

}

/* 소개영역 */
#aboutWrap{padding: 140px 0 192px; background: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077);}
#aboutWrap .title{margin-bottom: 114px; color: #fff;}
#aboutWrap .imgBox{margin-bottom: 142px;}
#aboutWrap .imgBox img{display: block; margin: 0 auto;}
#aboutWrap .titleBox{ width: 1200px; margin: 0 auto 126px; padding: 61px 0; border: 1px solid #fff; border-width: 1px 0;}
#aboutWrap .titleBox h3{font-weight: 700; color: #fff; font-size: 42px; text-align: center;} 
#aboutWrap .content{margin-bottom: 118px; text-align: center; font-size: 18px; color: #fff; line-height: 2;} 
#aboutWrap .logoBox img{display: block; margin: 0 auto;}

@media (max-width: 1199px){

    #aboutWrap{padding: 100px 0;}
    #aboutWrap .content{margin-bottom: 70px;}
    #aboutWrap .imgBox{margin-bottom: 80px;}
    #aboutWrap .title{margin-bottom: 70px;}
    #aboutWrap .titleBox{max-width: 500px; width: 100%; padding: 20px 0; margin: 0 auto 60px;}
    #aboutWrap .titleBox h3{font-size: 18px;}
    #aboutWrap .content{font-size: 16px;}
    #aboutWrap .logoBox img{width: 70px;}

}

@media (max-width: 767px){

    #aboutWrap .imgBox img{max-width: 600px; width: 100%;}

}

@media (max-width: 414px){

    #aboutWrap .imgBox{margin-bottom: 60px;}
    #aboutWrap .titleBox{margin: 0 auto 40px;}

}

/* 티저 영역 */
#teaserWrap{/*padding: 177px 0 300px; */ padding: 177px 0; border-bottom: 7px solid transparent;
    border-image: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077) 1;} 
#teaserWrap .title{margin-bottom: 120px; color: #ff002a;}
#teaserWrap .teaserList{width: 753px; margin: 0 auto;} 
#teaserWrap .teaserList li a{display: flex; align-items: center; justify-content: center; height: 140px; margin-bottom: 30px; font-weight: 800; font-size: 37px; background: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077); -webkit-background-clip: text; color: transparent; border: 7px solid transparent;
    border-image: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077) 1;}
#teaserWrap .teaserList li.logoMotion a{background: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077); color: #000;}


@media (max-width: 1199px){

    #teaserWrap{padding: 100px 0; border-bottom: 3px solid transparent;
        border-image: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077) 1;}
    #teaserWrap .teaserList{max-width: 500px; width: 100%;}
    #teaserWrap .teaserList li a{height: auto; padding: 15px 20px; font-size: 24px; border: 3px solid transparent;
        border-image: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077) 1;}
    #teaserWrap .title{margin-bottom: 70px;}

}

@media (max-width: 767px){

    #teaserWrap .teaserList li a{font-size: 18px;}

}

/* 스케줄영역 */
#schedulerWrap{position: relative; padding: 175px 0 192px; z-index: 1;}
#schedulerWrap .butterflyImg{position: absolute; z-index:-1;}
#schedulerWrap .butterflyImg01{top:456px; right: 324px;}
#schedulerWrap .butterflyImg02{bottom:132px; right: 522px;}
#schedulerWrap .butterflyImg03{top:540px; left: 291px;}
#schedulerWrap .title{margin-bottom: 100px; color: #ff002a;}
#schedulerWrap .schedulerList li{margin-bottom: 30px;}
#schedulerWrap .schedulerList li .date{margin-bottom: 3px; display: block; color: #fff; font-weight: 700; text-align: center;}
#schedulerWrap .schedulerList li .timeBox .box{margin-bottom: 3px; display: flex; gap: 0 9px; justify-content: center;}
#schedulerWrap .schedulerList li .timeBox .time{flex-shrink: 0; color: #fff; font-weight: 700;}
#schedulerWrap .schedulerList li .timeBox .content{color: #fff;}

@media (max-width: 1500px){

    #schedulerWrap .butterflyImg01{top:150px; right: 150px;}
    #schedulerWrap .butterflyImg02{bottom:100px; right: 200px;}
    #schedulerWrap .butterflyImg03{top:540px; left: 150px;}

}

@media (max-width: 1199px){

    #schedulerWrap{padding: 100px 0;}
    #schedulerWrap .title{margin-bottom: 70px;}
    #schedulerWrap .butterflyImg03,
    #schedulerWrap .butterflyImg02{width: 200px;}

}

@media (max-width: 767px){

    #schedulerWrap .title{margin-bottom: 70px;}
    #schedulerWrap .butterflyImg03,
    #schedulerWrap .butterflyImg02{width: 150px;}
    #schedulerWrap .butterflyImg01{top:50px; right: 20px; width: 100px;} 
    #schedulerWrap .butterflyImg02{right: 50px;}
    #schedulerWrap .butterflyImg03{top: 300px; left: 50px;}

}

@media (max-width: 480px){

    #schedulerWrap .butterflyImg01{top: 30px;}
    #schedulerWrap .butterflyImg03{top: 70px; left: 50px; width: 100px;}
    #schedulerWrap .butterflyImg02{width: 100px;}
}

/* 크레딧영역 */
#creditWrap{padding: 120px 0 180px; background: linear-gradient(to right, #ff6077 13%, #ff032c 38%, #ff6077);}
#creditWrap .title{margin-bottom: 52px; color: #000;}
#creditWrap h3{margin-bottom: 77px; font-family: 'Articulatcf'; font-weight: 700; font-size: 35px; text-align: center;}
#creditWrap .creditListBox{display: flex; justify-content: center; gap: 0 150px;}
#creditWrap .creditList01 li{ font-family: 'Articulatcf'; font-size: 18px; font-weight: 700; color: #000;}
#creditWrap .creditList01 > li{margin-bottom: 50px;}
#creditWrap .creditList02{margin-top: 4px;}
#creditWrap .creditList02 li{font-weight: 500;}

@media (max-width: 1199px){

    #creditWrap{padding: 100px 0;}
    #creditWrap h3{font-size: 26px;}

}

@media (max-width: 1024px){

    #creditWrap .creditListBox{flex-wrap: wrap; gap: 0;}
    #creditWrap .creditListBox .creditList01{width: 50%; text-align: center;}

}

@media (max-width: 767px){

    #creditWrap{padding: 80px 0;}

}

@media (max-width: 480px){

    #creditWrap .creditList01 li{font-size: 16px;}
    #creditWrap h3{margin-bottom: 60px;}

}

/* 링크영역 */
#linkWrap{padding: 150px 0;}
#linkWrap .title{margin-bottom: 192px; color: #ff002a;}
#linkWrap .linkList{max-width: 369px; margin: 0 auto; }
#linkWrap .linkList li{margin-bottom: 48px;}
#linkWrap .linkList li a,
#linkWrap .linkList li a span{position: relative; display: flex; align-items: center;}
#linkWrap .linkList li a span::before{content: ''; flex-shrink: 0; width: 50px!important; margin-right: 42px;}
#linkWrap .linkList li a span.twitter::before{content: ''; width: 30px; height: 31px; background: url(../images/main/twitter_icon.png)no-repeat center;}
#linkWrap .linkList li a span.youtube::before{content: ''; width: 44px; height: 31px; background: url(../images/main/youtube_icon.png)no-repeat center;}
#linkWrap .linkList li a span.tiktok::before{content: ''; width: 27px; height: 31px; background: url(../images/main/tiktok_icon.png)no-repeat center;}
#linkWrap .linkList li a span.instagram::before{content: ''; width: 31px; height: 31px; background: url(../images/main/instagram_icon.png)no-repeat center;}
#linkWrap .linkList li a span.weibo::before{content: ''; width: 38px; height: 31px; background: url(../images/main/weibo_icon.png)no-repeat center;}
#linkWrap .linkList li a span{color: #fff; font-weight: 700;}
#linkWrap .linkList li a span em{font-weight: 500;}

@media (max-width: 1199px){

    #linkWrap{padding: 100px 0;}
    #linkWrap .title{margin-bottom: 70px;}
    #linkWrap .linkList li a span::before{margin-right: 25px;}

}

/* footer */
#footer{padding: 100px 0 90px;}
#footer .logoBox{margin-bottom: 50px;}
#footer .logoBox img{display: block; margin: 0 auto;}
#footer address{font-family: 'Articulatcf'; color: #ff002a; font-weight: 300; text-align: center; font-size: 14px; text-transform: uppercase; line-height: 1.8;}

@media (max-width: 1199px){

    #footer{padding: 30px 0 70px;}

}