@charset "UTF-8";


/*
.main_visual_wrapper{ overflow: hidden; height: 1050px; width: 100%; margin: 0 auto; position: relative; padding-top: 93px; }
*/
/* 동영상 백그라운드 인경우*/
.main_visual_wrapper{ overflow: hidden; width: 100%; margin: 0 auto; position: relative;}
.visual_item{ height: 100%; width: 100%; opacity: 0; position: absolute; top: 0; left: 0; overflow: hidden; }
.visual_item.pre {        opacity: 1; }
.visual_item.pre.pre2{    opacity: 0; transition: all 1.5s ease;}
.visual_item.on  {        opacity: 1; }
.bgbefore{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}


.main_visual{ height: 100%; width: 100%; position: absolute; top: 0; left: 0; }
.visual_item .split_img_wrapper::before{position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  /* background-color: #38b4b6; opacity: 0.0; */
  z-index: 10;
  content: ""; }
.visual_item.on .split_img_wrapper::before{
  /* opacity: 0.5; */
  width: 100%;
  transition: all 4s ease;
}
/* .divide_img{border-left: 1px rgba(56,180,182, 0.7) solid;} */


/* #visual_item_2::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.4;
  top: 0;
  left: 0;
  z-index: 1;
} */

/* .divide_img{border-left: 1px rgba(188,188,188, 0.3) solid; } */
/* .divide_img{border-left: 1px rgba(188,188,188, 1) solid; } */
#divide_0{border-left: 0; }
.split_img_wrapper{width: 1920px; position: absolute; left: 50%; transform: translate(-50%, 0); height: 100%; }


.slider_navi{position: absolute; bottom: 150px; left: 50%; transform: translate(-50%, 0); z-index: 1000; }
.slider_navi li{display: inline-block;margin: 0 3px;  }
.slider_navi li a{display: block; width: 50px; padding: 23px 0; font-size: 0; }
.slider_navi li a::after{content: ""; height: 4px; top: 50%; left: 0; margin-top: -2px; background-color: white; opacity: 0.8; display: block;   }
.slider_navi li.on a{width: 60px; }
.slider_navi li.on a::after{ background-color: #4678b7; opacity: 1; }


.visual_item .inner{ height: 100%; position: relative; }
.visual_item.item_position_left   .text_wrapper{ position: absolute; left: 0;  top: 385px; width: 750px; height: 200px; z-index:5; }
.visual_item.item_position_right  .text_wrapper{ position: absolute; right: 0; top: 360px; width: 750px; height: 200px; z-index:5; }
.visual_item.item_position_center .text_wrapper{position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%);
  width: 1000px; height: 150px; text-align: center; z-index:5;
}
.visual_item .visual_text{width: 100%; }
.visual_item .padding-left{padding-left: 400px;}
.visual_item.item_align_left   .text_wrapper{ text-align: left;  }
.visual_item.item_align_right  .text_wrapper{ text-align: right; }
.visual_item.item_align_center .text_wrapper{ text-align: center;}
/* 전환효과 : 페이드 */
.visual_item.item_layout_1 .visual_text_1{ font-size: 20px; line-height: 20px; opacity: 0; position: absolute; top: 60px; }
.visual_item.item_layout_1 .visual_text_2{ font-size: 140px; line-height: 140px; font-weight: 200; opacity: 0; position: absolute; top: 110px;}
.visual_item.item_layout_1 .visual_text_3{ font-size: 23px; line-height: 30px; opacity: 0; position: absolute; top: 284px;}
.visual_item.item_layout_1.on .visual_text_1{opacity: 1; transition: all 2.2s ease; top:   0px; }
.visual_item.item_layout_1.on .visual_text_2{opacity: 1; transition: all 2.2s ease; top:  50px; transition-delay: 0.6s; }
.visual_item.item_layout_1.on .visual_text_3{opacity: 1; transition: all 2.2s ease; top: 224px; transition-delay: 1.6s; }
/*.visual_item.item_layout_1 .visual_text_4{ font-size: 123px; line-height: 130px; position: absolute; top: 90px;color:#4678b7;text-shadow: -1px 0 #042340, 0 1px #042340, 1px 0 #042340, 0 -1px #042340;}*/
.visual_item.item_layout_1 .visual_text_4{ font-size: 123px; line-height: 120px; position: absolute; top: 90px;color:#4678b7;}

/* 전환효과 : 크로스이미지 */
.visual_item.item_layout_3.on .visual_text{opacity: 1; }
.visual_item.item_layout_3 .visual_text_1{ font-size: 20px; line-height: 20px; opacity: 0; position: absolute; top: 60px; }
.visual_item.item_layout_3 .visual_text_2{ font-size: 140px; line-height: 140px; font-weight: 200;  opacity: 0; position: absolute; top: 110px; }
.visual_item.item_layout_3 .visual_text_3{ font-size: 23px; line-height: 30px; opacity: 0; position: absolute; top: 284px; }
.visual_item.item_layout_3.on .visual_text_1{transition: all 2.2s ease; top:   0px; transition-delay: 2s;  }
.visual_item.item_layout_3.on .visual_text_2{transition: all 2.2s ease; top:  50px; transition-delay: 2.8s; }
.visual_item.item_layout_3.on .visual_text_3{transition: all 2.2s ease; top: 234px; transition-delay: 3.4s; }
/* {text-shadow: 2px 2px 3px black;} */


/* 스퀘어 팝 ! */
/* .visual_item.item_layout_2.item_position_left .text_wrapper{top: 365px; }
.visual_item.item_layout_2.item_position_right .text_wrapper{top: 365px; }
.visual_item.item_layout_2.item_position_center .text_wrapper{top: 365px; } */
.visual_item.item_layout_2 .visual_text_1{font-size: 20px; line-height: 20px; opacity: 0; position: absolute; top: 60px; }
.visual_item.item_layout_2 .visual_text_2{font-size: 140px; line-height: 140px; font-weight: 400;  opacity: 0; position: absolute; top: 110px; }
.visual_item.item_layout_2 .visual_text_3{font-size: 23px; line-height: 30px; opacity: 0; position: absolute; top: 284px; }
.visual_item.item_layout_2.on .visual_text_1{opacity: 1; transition: all 2.2s ease; top:   0px; }
.visual_item.item_layout_2.on .visual_text_2{opacity: 1; transition: all 2.2s ease; top:  50px; transition-delay: 0.6s; }
.visual_item.item_layout_2.on .visual_text_3{opacity: 1; transition: all 2.2s ease; top: 234px; transition-delay: 1.6s; }

.border_wrapper{ width: 680px; height: 480px; position: absolute; top: 260px; right: -62px; }
.border_wrapper2{ width: 680px; height: 480px; position: absolute; top: 260px; right: 148px; }
.border_wrapper3{ width: 760px; height: 480px; position: absolute; top: 260px; right: 108px; }
.visual_border{width: 30px; height:30px; background-color: rgba(25, 171, 234, 0.5);; position: absolute;z-index: 10;}
/* .visual_border{width: 30px; height:30px; background-color: rgba(255, 255, 255, 0.5); position: absolute;z-index: 10;} */
/* .visual_border_{width: 20px; height: 20px; background-color: rgba(25, 171, 234, 0.5); position: absolute;z-index: 10;}
.visual_border__{width: 30px; height: 30px; background-color: rgba(25, 171, 234, 0.5); position: absolute;z-index: 10;} */
.border_wrapper3 .visual_border{width: 15px; height:15px; background-color: rgba(255, 255, 255, 0.5); position: absolute;z-index: 10;}
.visual_border_1{bottom: 375px; left: 0px; height: 0;}
.visual_border_2{top: 0px; left: 0px; width: 0;}
.visual_border_3{top: 0px; right: 0px; height: 0;}
.visual_border_4{top: 464px; right: 0; width: 0;}
.border_wrapper3 .visual_border_1{bottom: 375px; left: 0px; height: 0;}
.border_wrapper3 .visual_border_2{top: 0px; left: 0px; width: 0;}
.border_wrapper3 .visual_border_3{top: 0px; right: 0px; height: 0;}
.border_wrapper3 .visual_border_4{top: 464px; right: 15px; width: 0;}
.visual_item.on .visual_border{ transition: all 0.4s ease; }
.visual_item.on .visual_border_1{ height: 75px; }
.visual_item.on .visual_border_2{ transition-delay: 0.4s; width:650px;  }
.visual_item.on .visual_border_3{ transition-delay: 0.8s; height: 464px; }
.visual_item.on .visual_border_4{ transition-delay: 1.2s; width: 680px;  }
.visual_item.on .border_wrapper3 .visual_border{ transition: all 0.4s ease; }
.visual_item.on .border_wrapper3 .visual_border_1{ height: 90px; }
.visual_item.on .border_wrapper3 .visual_border_2{ transition-delay: 0.4s; width:745px;  }
.visual_item.on .border_wrapper3 .visual_border_3{ transition-delay: 0.8s; height: 479px; }
.visual_item.on .border_wrapper3 .visual_border_4{ transition-delay: 1.2s; width: 745px;  }


/*구름*/
.item_cloud_1 .cloud_wrapper{width: 100px; height: 100px; position: absolute;
  top: -40px;
  left: -10%;
  transform: translate(-50%, 0);
  /* left: 350px; top: -100px; */
  z-index:3;}
.item_cloud_1 .cloudLayer { position: absolute; left: 0; top: 0;  width: 306px; height: 306px; opacity: 0.6; opacity: 1; }
.item_cloud_1 .cloud_1{ transform: translateX(19.2317px)   translateY(54.6799px)   rotateZ(2.58238deg);        /*border: 1px blue solid;*/ }
.item_cloud_1 .cloud_2{ transform: translateX(-110.7683px) translateY(114.6799px)  rotateZ(62.58238deg);       /*border: 1px red solid;*/ }
.item_cloud_1 .cloud_3{ transform: translateX(-200.7683px) translateY(144.6799px)  rotateZ(42.58238deg);       /*border: 1px yellow solid; */ }
.item_cloud_1 .cloud_4{ transform: translateX(-250.7683px) translateY(64.6799px)   rotateZ(-37.41762deg);      /*border: 1px gray solid; ;*/ }
.item_cloud_1 .cloud_5{ transform: translateX(-190.7683px) translateY(344.6799px)  rotateZ(-17.41762deg);      /*border: 1px gold solid; ;*/ }
.item_cloud_1 .cloud_6{ transform: translateX(1079.2317px) translateY(14.6799px)   rotateZ(-24.65421deg);      /*border: 1px blue solid; ;*/ }
.item_cloud_1 .cloud_7{ transform: translateX(940.2317px)  translateY(54.6799px)   rotateZ(-85.14587deg);      /*border: 1px red solid; ;*/ }
.item_cloud_1 .cloud_8{ transform: translateX(1200.2317px) translateY(124.6799px)  rotateZ(-21.13135deg);      /*border: 1px yellow solid; ;*/ }
.item_cloud_1 .cloud_1.getOff{ left: -400px; opacity: 0; transition: all 10s ease; }
.item_cloud_1 .cloud_2.getOff{ left: -380px; opacity: 0; transition: all 10s ease; }
.item_cloud_1 .cloud_3.getOff{ left: -460px; opacity: 0; transition: all 10s ease; }
.item_cloud_1 .cloud_4.getOff{ left: -350px; opacity: 0; transition: all 10s ease; }
.item_cloud_1 .cloud_5.getOff{ left: -700px; opacity: 0; transition: all 8.5s ease; }
.item_cloud_1 .cloud_6.getOff{ left: 700px;  opacity: 0; transition: all 12s ease; }
.item_cloud_1 .cloud_7.getOff{ left: 650px;  opacity: 0; transition: all 12s ease; }
.item_cloud_1 .cloud_8.getOff{ left: 640px;  opacity: 0; transition: all 12s ease; }

.item_cloud_2 .cloud_wrapper{position: absolute; left: -400px; top: 200px; z-index: 500; transform: scale(0.9); opacity: 0.4; }
.item_cloud_2.on .cloud_wrapper{opacity: 1; left: 130px; transition: all 6s ease; }
.item_cloud_2 .cloudLayer { position: absolute; left: 0; top: 0;  width: 520px; height: 346px; opacity: 0.4;  }
.item_cloud_2 .cloud_1{ transform: translateX(169.2317px)   translateY(-25.3201px)   rotateZ(2.58238deg);      /*border: 1px blue solid;*/ }
.item_cloud_2 .cloud_2{ transform: translateX(-140.7683px) translateY(84.6799px)  rotateZ(32.58238deg);        /*border: 1px red solid;*/ }
.item_cloud_2 .cloud_3{ transform: translateX(-230.7683px) translateY(-15.3201px)  rotateZ(42.58238deg);       /*border: 1px yellow solid; */ }
.item_cloud_2 .cloud_4{ transform: translateX(-290.7683px) translateY(144.6799px)   rotateZ(2.58238deg);       /*border: 1px gray solid; ;*/ }
.item_cloud_2 .cloud_5{ transform: translateX(-530.7683px) translateY(124.6799px)  rotateZ(2.58238deg);        /*border: 1px gold solid; ;*/ }
.item_cloud_2 .cloud_1.getOff{ left: 0; opacity: 0.95;     transition: all 7s ease; }
.item_cloud_2 .cloud_2.getOff{ left: 0; opacity: 0.97;     transition: all 5s ease; }
.item_cloud_2 .cloud_3.getOff{ left: 0; opacity: 0.9;     transition: all 4.5s ease; }
.item_cloud_2 .cloud_4.getOff{ left: 0; opacity: 0.95;     transition: all 4.8s ease; }
.item_cloud_2 .cloud_5.getOff{ left: 0; opacity: 0.94;     transition: all 6s ease; }

.item_cloud_2 .split_logo_wrapper{position: absolute; left: 10px; top: 260px; overflow: hidden; width: 260px; height: 176px; z-index: 1000; }
.item_cloud_2 .split_logo_wrapper .divide_img{border-left: 0; }
.item_cloud_2 .split_logo_wrapper img{width: auto; display: none; }
.item_cloud_2 .split_logo_wrapper .divide_img{border-left: 0; }
.item_cloud_2 .split_logo_wrapper #divide_0{border-left: 0; }
.item_cloud_2 .split_logo_wrapper .split_img_wrapper{width: auto; position: absolute; left: 50%; transform: translate(-50%, 0); }
.item_cloud_2 .split_logo_wrapper .divide_img::before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; opacity: 1; content: ""; }
.item_cloud_2 .split_logo_wrapper .divide_img{border-left: 0;}




.visual_item.zoom1 .main_visual{transform: scale(1.2) rotate(.001deg); transition: all 13s ease; }
.visual_item.zoom2 .main_visual{transform: scale(1.1) rotate(.001deg); transition: all 10s ease; }



@media only screen and (max-width : 1205px) {
  .main_visual_wrapper{height: 100%; }


  .slider_navi{width: 100%; text-align: center; }
  .slider_navi li{padding: 0 3px; }
  .slider_navi li a{width: 35px; padding: 15px 0; }
  .slider_navi li.on a{width: 35px; }

  .visual_item.item_align_left   .text_wrapper{ text-align: left;  }
  .visual_item.item_align_right  .text_wrapper{ text-align: left; }
  .visual_item.item_align_center .text_wrapper{ text-align: left; }

  /* .visual_item .text_wrapper{padding: 14px; }
  .visual_item .visual_text_1{ width: calc(100% - 28px); }
  .visual_item .visual_text_2{ width: calc(100% - 28px); }
  .visual_item .visual_text_3{ width: calc(100% - 28px); }
  .visual_item.item_position_left .text_wrapper{width: 100%; word-break: keep-all; }
  .visual_item.item_layout_1 .visual_text_1{font-size: 26px; }
  .visual_item.item_layout_1 .visual_text_2{font-size: 22px; }
  .visual_item.item_layout_1 .visual_text_3{font-size: 16px; top: 154px; }
  .visual_item.item_layout_1.on .visual_text_3{ line-height: 20px; top: 94px; }

  .visual_item.item_position_center .text_wrapper{width: 100%; word-break: keep-all; text-align: center; }
  .visual_item.item_layout_3 .visual_text_1{font-size: 26px; }
  .visual_item.item_layout_3 .visual_text_2{font-size: 18px; top: 148px; }
  .visual_item.item_layout_3 .visual_text_3{font-size: 18px; }
  .visual_item.item_layout_3.on .visual_text_1{ }
  .visual_item.item_layout_3.on .visual_text_2{ top: 88px; }
  .visual_item.item_layout_3.on .visual_text_3{ } */

  .slider_navi{bottom: 10px; }
  .slider_navi ul{width: 280px; margin: 0 auto;   }

  .visual_item.item_position_center .text_wrapper{width: calc(100% - 36px); word-break: keep-all; text-align: center; height: auto;
    top: 38%; left: 50%; transform: translate(-50%, -50%);
    max-width: 370px;
  }
  .visual_item.item_position_right .text_wrapper{ width: calc(100% - 36px); word-break: keep-all; text-align: center; height: auto;
    top: 38%; left: 50%; transform: translate(-50%, -50%);
    max-width: 370px;
  }
  .visual_item.item_position_left .text_wrapper{  width: calc(100% - 36px); word-break: keep-all; text-align: center; height: auto;
    top: 38%; left: 50%; transform: translate(-50%, -50%);
    max-width: 370px;
  }
  .visual_item.item_layout_1 .visual_text_1{ font-size: 14px; top: 25px;}
  .visual_item.item_layout_1 .visual_text_2{ font-size: 30px; top: 50px;}
  .visual_item.item_layout_1 .visual_text_3{ font-size: 16px; top: 130px; line-height: 22px; }
  .visual_item.item_layout_1.on .visual_text_1{top: 15px; }
  .visual_item.item_layout_1.on .visual_text_2{top: 0; }
  .visual_item.item_layout_1.on .visual_text_3{top: 100px; }

  .visual_item.item_layout_2 .visual_text_1{ font-size: 14px; top: 25px;}
  .visual_item.item_layout_2 .visual_text_2{ font-size: 30px; top: 50px;}
  .visual_item.item_layout_2 .visual_text_3{ font-size: 16px; top: 130px; line-height: 22px; }
  .visual_item.item_layout_2.on .visual_text_1{top: 15px; }
  .visual_item.item_layout_2.on .visual_text_2{top: 0; font-size:3em;font-weight: bold;}
  .visual_item.item_layout_2.on .visual_text_3{top: 100px; }

  .visual_item.item_layout_3 .visual_text_1{ font-size: 14px; top: 25px; }
  .visual_item.item_layout_3 .visual_text_2{ font-size: 30px; top: 50px; }
  .visual_item.item_layout_3 .visual_text_3{ font-size: 16px; top: 130px; line-height: 22px; }
  .visual_item.item_layout_3.on .visual_text_1{top: 15px; }
  .visual_item.item_layout_3.on .visual_text_2{top: 0; }
  .visual_item.item_layout_3.on .visual_text_3{top: 100px; }


  .border_wrapper{ width: 370px; height: 300px;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  }
  .border_wrapper2{ width: 270px; height: 200px;
    position: absolute; top: 35%; left: 18%;
  }
  .border_wrapper3{ width: 370px; height: 200px;
    position: absolute; top: 35%; left: 5%;
  }
  .visual_border{width: 15px; height: 15px; background-color: background-color: rgba(25, 171, 234, 0.5); position: absolute; }

  .visual_border_1{bottom: unset; top: 15px; left: 0px; height: 0;}
  .visual_border_2{top: 0px; left: 0px; width: 0;}
  .visual_border_3{top: 15px; right: 0px; height: 0;}
  .visual_border_4{top: 185px; right: 15px; width: 0;}
  .visual_item.on .visual_border{ transition: all 0.4s ease; }
  .visual_item.on .visual_border_1{ height: 90px; }
  .visual_item.on .visual_border_2{ transition-delay: 0.4s; width: 100%;  }
  .visual_item.on .visual_border_3{ transition-delay: 0.8s; height: calc(100% - 15px);  }
  .visual_item.on .visual_border_4{ transition-delay: 1.2s; width: calc(100% - 15px);  }

  .border_wrapper3 .visual_border_1{bottom: unset; top: 15px; left: 0px; height: 0;}
  .border_wrapper3 .visual_border_2{top: 0px; left: 0px; width: 0;}
  .border_wrapper3 .visual_border_3{top: 15px; right: 0px; height: 220;}
  .border_wrapper3 .visual_border_4{top: 200px; right: 15px; width: 0;}

  .visual_item.on .border_wrapper3 .visual_border_1{ height: 90px; }
  .visual_item.on .border_wrapper3 .visual_border_2{ transition-delay: 0.4s; width: 100%;  }
  .visual_item.on .border_wrapper3 .visual_border_3{ transition-delay: 0.8s; height: 100%;  }
  .visual_item.on .border_wrapper3 .visual_border_4{ transition-delay: 1.2s; width: calc(100% - 15px);  }
}

@media only screen and (max-width : 800px) {
  /*아이패드 세로*/
}
@media only screen and (max-width : 450px) {
  /*아이폰plus 내 모바 기준*/
}

@media only screen and (max-width : 400px) {
  /*아이폰6이하*/
}

@media only screen and (max-width : 370px) {
  /*작은폰*/
}

@media only screen and (max-width : 360px) {
  /*?? 스마트와치에서 볼까?*/
}