body, html{ overflow-x: hidden; }

.inner{width: 1620px; margin: 0 auto; }
#footer{z-index: 4;position: relative}



/* 메인비주얼 */
.main_visual{width:100vw;position: relative;z-index: 3; height: 100vh; background: #fff;}
.main_visual .main_slider{ height:100%;overflow: hidden; position: relative;}
.main_visual .main_slider .slide_box{ overflow: hidden;width:100%;height:100%; position: relative; background-color: #fff; }
.main_visual .main_slider .slide_box > div{ overflow: hidden;height:inherit;position: absolute;left:0;top:0;right:0; z-index: 3; overflow: hidden;
width: 100%; height: 100%;
opacity:0;
}
.main_visual .main_slider .slide_box > div{
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}

.main_visual .main_slider .slide_box .main_img{ position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); overflow: hidden; width: 100%; height: 100%;
-moz-transition: all 8s ;
-webkit-transition: all 8s;
-o-transition: all 8s;
-ms-transition: all 8s ;
transition: all 8s ;
}

.main_visual .main_slider .slide_box .main_img #videobcg{
display: block; object-fit: fill; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); max-width: 100%;
}



.main_visual .main_slider .slide_box .main_img img{ display: block; min-width: 100%;  max-width: auto;height: 100%; position: absolute; left: 50%; transform: translate(-50%,-50%) scale(1.1); top: 50%;  transition: transform 5s; }
.main_visual .main_slider .slide_box div.on .main_img img{ transform: translate(-50%,-50%) scale(1);}

.main_visual .main_slider .slide_box .in_obj{text-align: left; top:0%; width: 100%; z-index: 9}
.main_visual .main_slider .slide_box .in_obj:after{content: ''; display: block}
.main_visual .main_slider .slide_box .in_obj .wrap_t{margin-bottom: 25px;}
.main_visual .main_slider .slide_box div div.wrap_tit{display: block;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
transition-delay: 0.6s;}
.main_visual .main_slider .slide_box div.on div.wrap_tit{
    opacity: 1
}



.main_visual .main_slider .slide_box > div.on{ z-index: 5; opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}




.main_visual .in_inner{ position: absolute; left: 50%; top: 35%; transform: translate(-50%,-50%); width: 1620px; text-align: left; }
.main_visual .in_inner .in_obj strong{ display: block; font-weight: 500; line-height: 1em; color:#000000; font-size: 60px; transform: translateY(100%); transition: transform 1.4s, color 1s; }
.main_visual .in_inner .in_obj strong span{ display: inline-block; width: 10px; height: 10px; position: relative; }
.main_visual .in_inner .in_obj strong span i{display: block; background-color: #000; position: absolute; }
.main_visual .in_inner .in_obj strong span i:nth-child(1){ width: 0; height: 2px; position: absolute; left: 0; top: 0; transition: .2s linear, background-color 1s; }
.main_visual .in_inner .in_obj strong span i:nth-child(2){ width: 2px; height: 0; position: absolute; right: 0; top: 0; transition: .2s linear, background-color 1s; }
.main_visual .in_inner .in_obj strong span i:nth-child(3){ width: 0%; height: 2px; position: absolute; right: 0; bottom: 0; transition: .2s linear, background-color 1s; }
.main_visual .in_inner .in_obj strong span i:nth-child(4){ width: 2px; height: 0%; position: absolute; left: 0; bottom: 0; transition: .2s linear, background-color 1s; }

.main_visual .list{ position: absolute; left: 0; bottom: 65px; width: 100%; z-index: 10; }
.main_visual .list .inner{ width: 1620px; margin: 0 auto; display: flex; justify-content: flex-end; }
.main_visual .list .inner > div{ width: 200px; height: 200px; position: relative; }
.main_visual .list .inner > div:nth-child(2){ margin-top: 199px; }
.main_visual .list .inner > div a{ display: block; width: 100%; height: 100%;
  transition: background .4s, backdrop-filter .4s;
}
.main_visual .list .inner > div a:hover{
  background: rgba(151,10,44,.5);
  backdrop-filter: saturate(0%) blur(20px);
  -webkit-backdrop-filter: saturate(0%) blur(20px);
}
.main_visual .list .inner > div a .wrap{ position: absolute; width: 100%; padding: 0 20px; bottom: 20px; left: 0;  }
.main_visual .list .inner > div a .wrap strong{ display: block; font-size: 24px; line-height: 29px; color:#FFFFFF; font-weight: 600; margin-bottom: 10px; }
.main_visual .list .inner > div a .wrap p{ font-size: 16px; font-weight: 300; color: #fff; }
.main_visual .list .inner > div a .arrow{ position: absolute; right: 20px; top: 20px; width: 30px; height: 30px; border: 1px solid #fff; }
.main_visual .list .inner > div a .arrow:after{ content:""; display: block; width: 34px; height: 32px; position: absolute; right: 7px; top: 8px; background: url('/img/main/main_arrow.png') center center no-repeat;
  transform: translate(-8px,8px); opacity: 0; transition: transform .5s, opacity .5s;
}
.main_visual .list .inner > div a:hover .arrow:after{ transform: translate(0,0); opacity: 1; }
.main_visual .list .inner > div .line{ transition: opacity .4s; }
.main_visual .list .inner > div .line span{ position: absolute; display: block; background-color: #fff; }
.main_visual .list .inner > div .line span:nth-child(1){ width: 0; height: 1px; position: absolute; left: 0; top: 0; transition: .3s linear; }
.main_visual .list .inner > div .line span:nth-child(2){ width: 1px; height: 0; position: absolute; right: 0; top: 0; transition: .3s linear; }
.main_visual .list .inner > div .line span:nth-child(3){ width: 0%; height: 1px; position: absolute; right: 0; bottom: 0; transition: .3s linear; }
.main_visual .list .inner > div .line span:nth-child(4){ width: 1px; height: 0%; position: absolute; left: 0; bottom: 0; transition: .3s linear; }

#main .ac2 .list .inner > div .line span:nth-child(1){ width: 100%; }
#main .ac2 .list .inner > div .line span:nth-child(2){ height: 100%; transition-delay: .3s; }
#main .ac2 .list .inner > div .line span:nth-child(3){ width: 100%; transition-delay: .6s; }
#main .ac2 .list .inner > div .line span:nth-child(4){ height: 100%; transition-delay: .9s; }

.main_visual .list .inner > div a:hover .line{ opacity: 0; }


.main_visual .in_inner .wrap{ margin-bottom: 30px; overflow: hidden; }
.main_visual .in_inner .wrap2{ margin-bottom: 14px; overflow: hidden; }
.main_visual .in_inner .wrap3{ overflow: hidden; }

.main_visual .in_inner .in_obj p{ font-size: 24px; line-height: 1em; font-weight: 200; color: #999999; transform: translateY(100%); transition: transform 1.4s, color 1s;  }


.main_visual .on .in_inner .in_obj strong{ transform: translateY(0); }
.main_visual .on .in_inner .in_obj .wrap:nth-child(1) strong{ transition-delay: .3s; }
.main_visual .on .in_inner .in_obj .wrap:nth-child(2) strong{ transition-delay: .5s; }
.main_visual .on .in_inner .in_obj .wrap:nth-child(3) strong{ transition-delay: .7s; }

.main_visual .on .in_inner .in_obj p{ transform: translateY(0); }

.main_visual .on .in_inner .in_obj .wrap2 p{ transition-delay: .6s; }
.main_visual .on .in_inner .in_obj .wrap3 p{ transition-delay: .9s; }

.main_visual .on .in_inner .in_obj strong span i:nth-child(1){ width: 100%; transition-delay: 1s, .3s;}
.main_visual .on .in_inner .in_obj strong span i:nth-child(2){ height: 100%; transition-delay: 1.2s, .3s; }
.main_visual .on .in_inner .in_obj strong span i:nth-child(3){ width: 100%; transition-delay: 1.4s, .3s; }
.main_visual .on .in_inner .in_obj strong span i:nth-child(4){ height: 100%; transition-delay: 1.6s, .3s; }




/* 메인 */
#main{ position: relative; }
#main .main_img{ position: relative; }
#main .main_img:after{ content:""; display: block; width: 50%; height: 100%; background: rgb(0,0,0);
  background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%); position: absolute; left: 0; top: 0; opacity: 0;
  transition: opacity 1s;
}
#main .main_img #videobcg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; transition: opacity 8s; }
#main .ac .main_img #videobcg{ opacity: 1; }
#main .main_img > svg{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; opacity: 1; transition: opacity 2s; width: 100%; height: auto; }
#main .ac2 .main_img > svg{ opacity: 0; }
#main .ac2 .main_img:after{ opacity: 1; }
#main .ac2 .in_inner .in_obj strong{ color: #fff; }
#main .ac2 .in_inner .in_obj p{ color: rgba(255,255,255,0.8); }
#main .ac2 .in_inner strong span i{ background-color: #fff; }


@media (min-width: 1920px){
  .main_visual .main_slider .slide_box .main_img #videobcg{ width: 100%; }
}

@media (max-width: 1919px){
  .main_visual .main_slider .slide_box .main_img #videobcg{ max-width: none; }
  #main .main_img > svg{ width: auto; }
}

@media (max-width: 1640px){
  .main_visual .in_inner{ width: 100%; padding: 0 20px; }
  .main_visual .list .inner{ width: 100%; padding: 0 20px; }
  .inner{ width: 100%; padding: 0 20px; }
}



@media (max-width: 850px){
  .main_visual .in_inner .in_obj strong{ font-size: 32px; }
  .main_visual .in_inner .in_obj strong span{ width: 6px; height: 6px; }
  .main_visual .in_inner .wrap2{ margin-bottom: 8px; }
  .main_visual .in_inner .in_obj p{ font-size: 16px; }
  .main_visual .in_inner{ top: 28%; }
  #main .main_img:after{ width: 100%; height: 50%;
    background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
  }
  .main_visual .list .inner > div a .wrap strong{ font-size: 18px; line-height: 24px; }
  .main_visual .list .inner > div a .wrap p{ font-size: 14px; }
  .main_visual .list{ bottom: 60px; }
}

@media (min-height: 1080px){
#main .main_img #videobcg{ height: 100%; }
#main .main_img > svg{ height: 100%; }
}


@media (max-width: 540px){
    .main_visual .list{ bottom: 120px; }
  .main_visual .list .inner > div{ width: 150px; height: 150px; }
  .main_visual .list .inner > div a .wrap{ padding: 0 12px; bottom: 12px; }
  .main_visual .list .inner > div a .arrow{ right: 12px; top: 12px; }
  .main_visual .list .inner > div:nth-child(2){ margin-top: 149px; }
  .main_visual .in_inner .wrap2{ margin-bottom: 4px; }
  .main_visual .in_inner .in_obj p{ word-break: keep-all; line-height: 26px; }
  #header .all_menu .inner .menu > div{ height: 220px;  }
  #header .all_menu .inner .menu > div:before{ top: 15px; }
  #header .all_menu .inner .menu > div:after{ bottom: 15px; }
}










/*  */