@charset "utf-8";

/*------------------------  
* background
------------------------*/
/* 공통 */
.section{ position: relative; }
.back_bg{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    width:100%;height:100%;
    z-index: -2000;
    overflow: hidden;
}
.bg_box{position: absolute;}
.back_bg ul{
    position: relative;
    width:1000px;height:970px;
    margin:auto;
    
    -webkit-transition:1s;
        -ms-transition:1s;
            transition:1s;
}

/*------- -------  
    Main PAGE
------- --------*/
/*------- main::visual box position/setting --------*/
.visual .back_bg, .base-bg{
    -ms-filter:progid:DXImageTransform.Microsoft.Gradient(
        startColorStr='#ff0000',
        endColorStr='#702e8b', 
        GradientType=0 /*0=Vertical, 1=Horizontal gradient*/
    );
  -webkit-background:linear-gradient(150deg, rgba(223,46,58,1) 30em, rgba(112,30,139,1) 82em);
     -moz-background:linear-gradient(150deg, rgba(223,46,58,1) 30em, rgba(112,30,139,1) 82em);
          background:linear-gradient(150deg, rgba(223,46,58,1) 30em, rgba(112,30,139,1) 82em);
  
  -webkit-transition: 150ms cubic-bezier(0.1, 0.7, 0.6, 0.9);
      -ms-transition: 150ms cubic-bezier(0.1, 0.7, 0.6, 0.9);
          transition: 150ms cubic-bezier(0.1, 0.7, 0.6, 0.9);
}
.back_bg ul .bg_box{opacity: 0;}
.visual .bg_box0{
    background:url(../images/main_bg01.png) no-repeat center;
    background-size:cover;
    top:0;left:0;
    width:100%;height:100%;
}
.visual .bg_box1{
    background:url(../images/main_box01.png) no-repeat center;
    top:2px;left:-45%;
    width: 45%;height:50%;
}
.visual .bg_box2{
    background:url(../images/main_box02.png) no-repeat center;
    top:32px;left:-2.5%;
    width:50%;height:47%;
}
.visual .bg_box3{
    top:-26px;right:-60.1%;
    width:60%;height:53%;
    overflow: hidden;
}
.visual .bg_box3:after{
    content:'';
    position: absolute;top:0;left:0;
    width:100%;height: 100%;
    background: none no-repeat 0 100%;
    background-image:url(../images/main_box03.png);
}
.visual .bg_box4{
    bottom:1.7%;left:-50%;
    width:50%;height:48%;
    overflow: hidden;
}
.visual .bg_box4:after{
    content:'';
    position: absolute;top:0;left:0;
    width:100%;height: 100%;
    background: none no-repeat 100% 0;
    background-image:url(../images/main_box04.png);
}
.visual .bg_box5{
    background:url(../images/main_box05.png) no-repeat center;
    bottom:15px;right:0;
    width:40%;height:50%;
}
.visual .bg_box6{
    bottom:-5.3%;right:-50%;
    width:50%;height:55%;
    overflow: hidden;
}
.visual .bg_box6:after{
    content:'';
    position: absolute;top:0;left:0;
    width:100%;height: 100%;
    background: none no-repeat 0 0;
    background-image:url(../images/main_box06_2.png);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
}

.visual .bg_box1.ani{
    -webkit-animation:aniBox1 3s;
        -ms-animation:aniBox1 3s;
            animation:aniBox1 3s;
    opacity: 1;
}
.visual .bg_box2.ani{
    -webkit-animation:aniBox2 1.25s; 
        -ms-animation:aniBox2 1.25s; 
            animation:aniBox2 1.25s; 
    opacity: 1;
}
.visual .bg_box3.ani:after{
    -webkit-animation:aniBox3 2.5s; 
        -ms-animation:aniBox3 2.5s; 
            animation:aniBox3 2.5s;
    opacity: 1; 
}
.visual .bg_box4.ani:after{
    -webkit-animation:aniBox4 2s; 
        -ms-animation:aniBox4 2s; 
            animation:aniBox4 2s;
    opacity: 1; 
}
.visual .bg_box5.ani{
    -webkit-animation:aniBox5 3s; 
        -ms-animation:aniBox5 3s; 
            animation:aniBox5 3s;
    opacity: 1; 
}
.visual .bg_box6.ani:after{
    -webkit-animation:aniBox6_2 2.5s; 
        -ms-animation:aniBox6_2 2.5s; 
            animation:aniBox6_2 2.5s;
    opacity: 1; 
}
.visual .bg_box3.ani,
.visual .bg_box4.ani,
.visual .bg_box6.ani{opacity: 1; }


@keyframes aniBox1 {
    20%{width:0;}
    100%{width:45%;}
}
@keyframes aniBox2 {
    20%{top:-30%;}
    100%{top:32px;}
}
@keyframes aniBox3 {
    20%,100%{-webkit-transform-origin: right bottom;-webkit-transition:.3s;}
    20%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
    100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes aniBox4 {
    20%,100%{-webkit-transform-origin:100% 100%;-webkit-transition:.5s;}
    20%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);}
    100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}
@keyframes aniBox5 {
    20%{width:0;-webkit-transform-origin: right;}
    100%{width:40%;-webkit-transform-origin: right;}
}
@keyframes aniBox6_2 {
    20%,100%{-webkit-transform-origin:0 0;-webkit-transition:.5s;}
    20%{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);}
    100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
}

@-ms-keyframes aniBox1 {
    20%{width:0;}
    100%{width:45%;}
}
@-ms-keyframes aniBox2 {
    20%{top:-30%;}
    100%{top:32px;}
}
@-ms-keyframes aniBox3 {
    20%,100%{-ms-transform-origin: right bottom;-ms-transition:.3s;}
    20%{-ms-transform:rotate(90deg);}
    100%{-ms-transform:rotate(0deg);}
}
@-ms-keyframes aniBox4 {
    20%,100%{-ms-transform-origin:100% 100%;-ms-transition:.5s;}
    20%{-ms-transform:rotate(-90deg);}
    100%{-ms-transform:rotate(0deg);}
}
@-ms-keyframes aniBox5 {
    20%{width:0;-ms-transform-origin: right;}
    100%{width:40%;-ms-transform-origin: right;}
}
@-ms-keyframes aniBox6_2 {
    20%,100%{-ms-transform-origin:0 0;-ms-transition:.5s;}
    20%{-ms-transform:rotate(-90deg);}
    100%{-ms-transform:rotate(0deg);}
}

@media screen and (max-width:1300px){
    .back_bg ul{ width: 100%;height: 100%; }
    .visual ul .bg_box{ display: none; }
}


/*------- main::visual --------*/
.visual{ min-height: 100vh; }
.main_txt{
    /* position: absolute;
    top: 0;left: 0;right: 0;bottom: 0;
    height: 76%;
    margin:auto; */
    position: relative;
    padding-top:150px;
}
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    /* .main_txt{
        padding-top:103px;
    } */
}

/*------- //main::visual box position/setting --------*/






/*------- -------  
    Sub PAGE
------- --------*/
.back_bg .bg_box8{ 
    width: 50%;height: 350px;
    background:url(../images/main_box08.png) no-repeat;
    background-size:auto 100%;
}
.back_bg .bg_box9{ 
    width:60%;height: 500px;
    background:url(../images/main_box09.png) no-repeat;
    background-size:auto 90%;
}
.back_bg .bg_box11{ 
    width:50%;height: 300px;
    background:url(../images/main_box11.png) no-repeat;
    background-size:auto 100%;
}


/* 1차 블라인드 오픈 */
.blindopen{
    background: url(../images/main-bg02.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center 0;
    position: relative;
    z-index: -1;
}
/* .blindopen::before{
    content: '';
    position: absolute;
    bottom: -15%;left: 0;right: 0;
    z-index: -2;
    width:100%;height: 100%;
    background: url(../images/main-foot.png) no-repeat;
    background-size: 100% auto;
    background-position: center 100%;
    opacity: .6;
} */

.blindopen .back_bg .bg_box8{ top:-1%;right: -10%; }
.blindopen .back_bg .bg_box9{ top:48%;left: -23%; }
.blindopen .back_bg .bg_box9:nth-child(3){ 
    transform: rotate(90deg); 
    left: auto;
    right: -30%;
    top: 70%;
}
.blindopen .back_bg .bg_box11{bottom: -2%;}


.bottom-bg{
    position: relative;
    padding-bottom: 15%;
}
.bottom-bg:before{
    content: '';
    position: absolute;
    bottom: 0;left: 0;right: 0;
    /* z-index: -2; */
    width:100%;height: 100%;
    background: url(../images/main-foot.png) no-repeat;
    background-size: 100% auto;
    background-position: center 100%;
    opacity: .6;
}


/* 2차 얼리버드 티켓 */
.section-award {
    background: url(../images/bg-award.jpg) no-repeat;
    background-size: cover;
}



/* tab & mobile */
@media screen and (max-width:780px){
    .visual .bg_box0{
        background: url(../images/m-main-bg01.jpg) no-repeat;
        background-size: cover;
    }
}