@charset "utf-8";

.motion {}

/* 메인 메뉴 */
.stickmenu{ background-color:transparent}
.localNavi > ul > li > a{ color:#fff;}
.logo h1 .logo_w {display: block;}
.logo h1 .logo_b {display: none;}
.stickmenu.sticky .logo h1 .logo_b, .stickmenu:hover .logo h1 .logo_b {display: block !important}
.stickmenu.sticky .logo h1 .logo_w, .stickmenu:hover .logo h1 .logo_w {display: none !important}
.stickmenu.sticky .localNavi > ul > li > a, 
.stickmenu:hover .localNavi > ul > li > a{ color:#222;}
#opNav > em {background:rgba(255,255,255,0.7); }
.stickmenu.sticky #opNav > em, .stickmenu:hover #opNav > em  { background:rgba(0,0,0,0.7); }
#container {padding-top: 0;}

/* 공통타이틀 */
.title_area { margin-bottom: 50px; display: block; letter-spacing: -0.05em; position: relative; z-index: 99; text-align: center;}
.title_area h3 {font-size: 480%; color:#1d1d1d; font-weight: 800; display: block;  font-family: 'Roboto';}
.title_area strong{font-size: 200%; color:#1d1d1d; font-weight: 700; display: block; }
.title_area p{ position: relative;color: #646975; word-break: keep-all; font-size: 120%; display: block; font-weight: 500; padding-top: 10px;  padding:10px 7% 0 7%; }
.title_area span{ color: #646975; word-break: keep-all; font-size: 150%;  font-weight: 500;   }

@media only screen and (max-width:1300px){
    .title_area {font-size: 90%;}

}
@media only screen and (max-width:1100px){
    .title_area {font-size: 80%;}
    .title_area p{font-size: 140%; }
    .title_area h3 {font-size: 400%;}

}
@media only screen and (max-width:768px){
    .title_area {font-size: 65%;}
    .title_area p{font-size: 150%; }

}
.m_con {position: relative; }

/* 모션 */
.animated { opacity: 0; transition: all 1s ease; top: -100px; position: relative;}
.animated.active { opacity: 1; top:0;}

.motion .tit_animated{ opacity: 0; transition: all 0.7s ease-out;; bottom: -150px; position: relative;}
.motion.active .tit_animated{ opacity: 1; bottom:0;}
.motion.active  h3.tit_animated{transition-delay: 0.8s;}
.motion.active  h4.tit_animated{transition-delay: 0.8s;}
.motion.active  span.tit_animated{transition-delay: 0.5s;}
.motion.active  p.tit_animated{transition-delay: 1.1s;}
.motion.active  .company_visual.tit_animated{transition-delay: 0.7s;}




/* 메인 비주얼 */
#main_visual { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; text-align: center; background-color: #1d1d1d;  color: #fff; }
.main_visual_txt {left:0px; right:0px; top:0; bottom:0;width: 100%; position: absolute; overflow: hidden;  z-index: 10; }
.visual_txt { display: flex; justify-content: left; align-items: center; height: 100vh; width: 100%; text-align: left; padding: 0 8%; position: relative; text-shadow: 0 0 10px rgba(0,0,0, 0.8); word-break: keep-all;}
.visual_txt strong { font-size: 400%; font-weight: 800; }
.visual_txt strong > span{ display: block; }
.visual_txt strong > em{ display: block; font-size:60%; padding-bottom: 10px;}
.visual_txt p { font-size: 130%; font-weight: 500; display: block; word-break: keep-all; padding-bottom: 30px; }
.visual_txt p > i{font-weight: 700;}

.visual_slider .slick-current .visual_txt strong > span{ animation-name:fadeInUp; animation-delay:1.4s;}
.visual_slider .slick-current .visual_txt strong > em{ animation-name:fadeInUp; animation-delay:1s;}
.visual_slider .slick-current .visual_txt p { animation-name:fadeInUp; animation-delay:0.8;}

.visual_slider .prev, .visual_slider .next {position: absolute; }

.main_visual_txt .slick-dots { position: absolute; bottom:50px; display: flex; align-items: center;  justify-content: center;}
.main_visual_txt .slick-dots li {width: 20px; height: 10px; text-align: center; display: block; }
.main_visual_txt .slick-dots li button { width: 10px; height: 10px; margin: 0 auto; padding:0}
.main_visual_txt .slick-dots li button:before{ content: ''; border-radius: 50%; background-color: rgba(255,255,255, 0.8); width: 10px; height: 10px; opacity: 1; transition: all 0.3s; left:50%; margin-left: -5px; top:5px;}
.main_visual_txt .slick-dots li.slick-active button { width: 20px; height: 20px;}
.main_visual_txt .slick-dots li.slick-active button:before{ background-color: #242697; width: 20px; height: 20px; margin-left: -10px; top:0; box-shadow: 0 0 10px rgba(0,0,0,0.4);}

.m_visual { transition: all 1s;  }
.m_visual::after {content: ''; left:0px; right:0px; top:0; bottom:0;width: 100%; position: absolute; background-position: center center ; background-repeat: no-repeat;background-size: cover;}
.m_visual > div {position: relative; z-index: 2;}
.m_visual.bg01::after{ background-image: url(/_dainit/images/main/main_visual001.jpg); } 
.m_visual.bg02::after{ background-image: url(/_dainit/images/main/main_visual002.jpg); }
.m_visual.bg03::after{ background-image: url(/_dainit/images/main/main_visual003.jpg); } 

.slick-slide.slick-current .m_visual  {animation-name:scaleIn; animation-duration: 7s; }


@media only screen and (max-width:1200px){
    .visual_txt {font-size: 80%;}
    .visual_txt p { font-size: 150%; text-shadow: 0 0 10px rgba(0,0,0, 1); }
    .visual_txt strong { font-size: 350%; font-weight: 800; }
}
@media only screen and (max-width:650px){
    .visual_txt {font-size: 70%; padding:0 50px; padding-bottom: 130px;}
    .m_visual::after { background-position: 60% center ;}
    .m_visual.bg03::after{  background-position: 40% center ; background-size: auto 100%;;} 
    .visual_txt p i{display: block;}
    .visual_txt strong { font-size: 300%;  }

}


/* 비주얼 비디오 
.main_visual_bg {left:0; right:0; top:0; bottom:0; position: absolute; overflow: hidden; }
.main_visual_bg::after { content: ''; left:0; right:0; top:0; bottom:0; position: absolute; background-color: rgba(12,19,69, 0.1);}
.main_visual_bg video{width: 100%;  min-height: 100vh;  height: 100%;  object-fit: cover;}
*/

/******************* 비지니스 ***************************/

#main_business {display: block; background-color: #e2e4eb; position:relative;}

.m_left {width: 23%;position: relative; padding-top:120px; }
.m_left .title_area {text-align: right;  left: -200px; transition: all 0.8s ease-out;; opacity: 0;}
.m_left .title_area h3 {font-size: 350%;}
.m_left .title_area h3, .m_left .title_area strong{ color:#fff}

#main_business.active .m_left .title_area { opacity: 1; left: 0px; transition-delay: 0s;}

.m_right { width:70%; padding: 10% 10% 10% 5%; position: relative; }
.m_right .business_item {float: right; text-align: right; width: 550px; margin: 150px 0;}
.m_right .business_item:nth-child(even) { float: left; text-align: left;}

.business_item .video_img{ position: relative; width: 100%; overflow: hidden;  border-radius: 30px; display: inline-block; padding-bottom: 70%; }
.business_item .video_img video{width: 100%;  min-height: 100%;  height: 100%;  object-fit: cover; position: absolute; left:0; top:0; transition: all 0.6s;}
.business_item .video_img::after {content: ''; /*background-color: rgba(6,27,156, 0.3); */background-color: rgba(0,0,0, 0.3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1;}
.business_item:hover .video_img {/*box-shadow: 0px 0px 20px rgba(255,255,255,0.3); */}
.business_item:hover .video_img video{  transform: scale(1.2);}


.business_item .item_txt{ color:#fff; display: block; padding: 20px; position: relative; margin-top: -60px; z-index: 20; transition: all 0.3s; }
.business_item .item_txt h4{ font-size: 300%; font-weight: 800; display: block; padding-bottom: 10px; }
.business_item .item_txt p{ font-size: 130%; font-weight: 500; word-break: keep-all;}

#main_business .m_right .business_item:nth-child(odd) .video_img{ right:-200px; top:0;}
#main_business .m_right .business_item:nth-child(odd) .video_img.active{ right:0px;}
#main_business .m_right .business_item:nth-child(even) .video_img{ right:200px; top:0;}
#main_business .m_right .business_item:nth-child(even) .video_img.active{ right:0px;}


.business_item .video_img.active{ opacity: 1;  }
.business_item .item_txt h4.active { transition: all 1.5s; }
.business_item .item_txt p.active {  transition: all 1.5s; }
.business_item:hover .item_txt{ transform:translateY(-25px)}
.business_item:hover .item_txt p.active{  }

.mball {position: absolute;}
.mball.ball_mov1 {left:-150px; top:30%; width:600px;}
.mball.ball_mov2 {width:250px; right:-100px; top:70%}

@media only screen and (max-width:1200px){
    .m_left {width: 100%; padding-top:10%; }
    .m_left .title_area {text-align: center; }
    .m_right { width:100%; padding: 5% 5% 10% 5%; }
    .m_right .business_item {margin-top: 50px;}
}

@media only screen and (max-width:991px){
    .m_left {width: 100%;  }
    .m_right .business_item {margin-top: 0px; width:51%; font-size: 70%;}
}

@media only screen and (max-width:768px){
    .m_left {padding-top: 100px;}
    .m_right .business_item { width:70%; }
}

@media only screen and (max-width:450px){
    .m_right .business_item { width:85%; }
}

.service_slider .prev, .service_slider .next {position: absolute; }
.service_slider .prev { margin-left: 10%;}
.service_slider .next { margin-right: 10%;}
.service_slider .prev:before, .service_slider .next:before {color: rgba(0,0,0, 0.7); font-size: 200%;}
.service_slider .nav button:hover::before, .service_slider .nav button:focus::before{color: #000}


.slick-track {display: flex; align-items: center;  }
.service_slider .cell{ padding: 20px 0px;}
.service_slider .cell > a{display: block; background-position: center center; background-repeat: no-repeat;background-size: cover; padding-bottom:550px; position: relative; border-radius: 40px; transition: all 0.7s; transform: scale(0.8); filter: grayscale(100%); opacity: 0.7; filter: blur(1px);}
.service_slider .cell .service_txt{ position: absolute; left:0; right: 0 ;bottom: 0; top: 0; display: flex; align-content: center; flex-wrap: wrap; padding: 0 10%;  opacity: 0; word-break: keep-all;}
.service_slider .cell .service_txt > *{ display: block; color: #fff; width: 100%; text-shadow: 0 0 15px rgba(0,0,0, 0.7); }
.service_slider .cell .service_txt > span{font-weight: 600; font-size: 120%;}
.service_slider .cell .service_txt > strong{font-size: 300%; font-weight:800; padding: 25px 0 35px 0;}
.service_slider .cell .service_txt > p{font-weight: 300; font-size: 90%; color: rgba(255,255,255, 0.8);}
.service_slider .cell .service_txt > em{display: inline-block; width: auto; padding: 8px 30px; border-radius: 30px; border: 1px solid rgba(255,255,255, 0.3); font-size: 80%; color: rgba(255,255,255, 0.8); margin-top: 25px;}
.service_slider .cell a:hover .service_txt > em{ border: 1px solid rgba(255,255,255, 1);  color: rgba(0,0,0, 0.7); background-color: #fff;  padding: 8px 60px; font-weight: 600;}

.service_bg01 {background-image: url(/_dainit/images/main/service01.jpg);}
.service_bg02 {background-image: url(/_dainit/images/main/service02.jpg);}
.service_bg03 {background-image: url(/_dainit/images/main/service03.jpg);}
.service_bg04 {background-image: url(/_dainit/images/main/service04.jpg);}
.service_bg05 {background-image: url(/_dainit/images/main/service05.jpg);}

.service_slider .slick-center .cell > a {box-shadow: 0 0 20px rgba(0,0,0, 0.8); transform: scale(1); filter: grayscale(0%); opacity: 1; filter: blur(0px);}
.service_slider .slick-center .cell .service_txt {opacity: 1;}
.service_slider .slick-center .cell .service_txt > span{ animation-name:fadeInUp; animation-delay:0.6s;}
.service_slider .slick-center .cell .service_txt > strong{ animation-name:fadeInUp; animation-delay:1s;}
.service_slider .slick-center .cell .service_txt > p{ animation-name:fadeInUp; animation-delay:1.3s;}
.service_slider .slick-center .cell .service_txt > em{ animation-name:fadeInUp; animation-delay:1.6s;}

@media only screen and (max-width:991px){
    .service_slider .prev { margin-left: 7%;}
    .service_slider .next { margin-right: 7%;}
    .service_slider .cell .service_txt > span{font-size: 90%;}
    .service_slider .cell .service_txt > strong{font-size: 220%;}
    .service_slider .cell .service_txt > p{font-size: 85%;;}
    .service_slider .cell .service_txt > em{ font-size: 80%; }
}
@media only screen and (max-width:550px){
    #main_business .title_area{margin-bottom: 10px;}
    .service_slider .cell .service_txt > span{font-size: 80%;}
    .service_slider .cell .service_txt > strong{font-size: 180%;}
	.service_slider .cell > a{ padding-bottom:450px; }
}

/******************* 파트너 ***************************/

#main_partner {padding-top: 12%;}
.txt_ani_human {font-size: 800%; font-weight: 800; font-family: 'Roboto'; color: #fff; white-space: nowrap; line-height: 103px; padding-top: 100px;  display: block; position: relative; padding-left: 190%;-webkit-text-stroke: 2px rgba(71,111,243,1); }

.partner_con { background-color: #1d71ed; padding: 7% 0 7% 0; display: block; background: linear-gradient(90deg, rgba(71,111,243,1), rgba(71,111,243,1)); } 

/* 배너 설정 */
.banner_item .cell{display: block; padding:10px 10px;  }
.banner_item .slick-track {transition-timing-function: linear !important; animation-iteration-count: infinite !important;display: flex; align-items: center;}

.banner_item {display: block;}
.banner_item .thumbnail {width:200px; display: block;  overflow: hidden;  background-color: #fff;  position: relative;  padding-bottom: 100%;  border-radius: 50%; opacity: 1; transition: all 0.8s; }
/*.banner_item .thumbnail {width:300px; display: block;  overflow: hidden;  background-color: #fff;  position: relative;  padding-bottom: 50%;  border-radius: 15px; opacity: 1; transition: all 0.8s; }*/

.banner_item .thumbnail img { position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  max-width: 100%;  max-height: 100%;  margin: auto; transition: all 2s ;transform: scale(1);  mix-blend-mode:darken;  border-radius: 50%; }
.banner_item .thumbnail:hover {opacity: 1;  box-shadow: 0px 0px 10px rgba(0,0,0,0.6);  background-color: #94d3ff;}
.banner_item .thumbnail:hover img{}


@media only screen and (max-width:1400px){
    .banner_item .thumbnail {width:200px; }
    .txt_ani_human {font-size: 600%; line-height: 73px; padding-top: 100px; padding-left: 180%;}

}
@media only screen and (max-width:991px){
    .partner_con { padding:15% 0} 

    .banner_item .thumbnail {width:150px; }
    .txt_ani_human {font-size: 400%; line-height: 42px; padding-top: 50px; padding-left: 400%;}

    .txt_ani_human {-webkit-text-stroke: 1px rgba(71,111,243,1); }

}
@media only screen and (max-width:768px){
    #main_partner {padding-top: 100px;}
}


/******************* 회사소개 뉴스 등 ***************************/

#main_company { background-color: #fff; display: block; padding-top: 15%; color: #fff;} 
#main_company .company_visual{display: block; background-image: url(/_dainit/images/main/company_bg.jpg); padding-bottom: 20%; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size: cover; background-position: center center; } 

.company_con .row {align-items: flex-end;}
.company_con {display: block; background-color: #14193e; padding: 8% 0;}
.company_con .title_area h3{ text-align: left; color:#fff; }


#main_company .row > div:first-child { left:-100px; top:0;}
#main_company .row > div:first-child.active{ left:0px;}
#main_company .row > div:last-child{ right:-100px; top:0;}
#main_company .row > div:last-child.active{ right:0px;}



.bbs_list li {display: block;}
.bbs_list li + li {border-top: 1px solid rgba(255,255,255, 0.1);}
.bbs_list li a {display: block; padding: 43px 130px 43px 5px; position: relative;}
.bbs_list li a:after{content: ''; width:80px; height: 80px; background-image: url(/_dainit/images/main/arrew_more.png); background-repeat: no-repeat;  position: absolute; right:0; top:calc(50% - 40px); background-size: 100% auto;}
.bbs_list li a span{position: relative; text-overflow: ellipsis; white-space:nowrap;  overflow: hidden; display:block; font-weight: 600; font-size: 150%; padding: 0px 0; margin-bottom: 15px;}
.bbs_list li a span:after{content: ''; position: absolute; bottom:0; left:0; width:0; border-bottom: 2px solid rgba(255,255,255, 0.5); transition: all 0.6s ease;}
.bbs_list li a:hover span:after{width:100%;}
.bbs_list li a em{ font-family: 'Roboto'; color: rgba(255,255,255, 0.7); font-size: 120%;}

.company_goto {display: block; padding: 40px 0; margin-left: 100px;}
.company_ban {position: relative; display: block; background-size: 100% auto; background-position: center center; padding-bottom: 200px;  border-radius: 20px; overflow: hidden; transition: all 0.6s ease; }
.company_ban + .company_ban {margin-top: 30px;}
.company_ban::after {content: ''; position: absolute; left:0; right:0; top:0; bottom: 0; transition: all 0.6s; }
.company_ban.ban_img01 {background-image: url(/_dainit/images/main/company_b01.jpg);}
.company_ban.ban_img01::after {background: linear-gradient(90deg, rgba(7,10,43,1), rgba(7,10,43,1), rgba(7,10,43,0), rgba(7,10,43,0)); }
.company_ban.ban_img02 {background-image: url(/_dainit/images/main/company_b02.jpg);}
.company_ban.ban_img02::after {background: linear-gradient(-90deg, rgba(36,40,94,1), rgba(36,40,94,1), rgba(36,40,94,0), rgba(36,40,94,0)); }
.company_ban.ban_img02 .txt {justify-content: right;}
/*
.company_ban.ban_img01:hover::after {right:-600px}
.company_ban.ban_img02:hover::after {left:-600px}
*/

.company_ban:hover {background-size: 140% auto;}
.company_ban:hover::after {background: #0b1c9e }


.company_ban .txt{position:absolute; left: 0; right: 0; top:0; bottom: 0; padding:30px 50px; z-index: 10; display: flex; align-content: center; flex-wrap: wrap;  transition: all 0.6s ease; }
.company_ban .txt strong{ font-size: 190%; font-weight: 700; display: block; width: 100%; transition: all 0.5s;}
.company_ban .txt p{ font-weight: 500;  display: block; width: 100%; padding: 10px 0 15px 0; transition: all 0.5s;}
.company_ban .txt span{ display: block; width:150px;  border: 1px solid rgba(255,255,255, 0.2); padding: 6px 60px 6px 20px; font-size: 80%; background-image: url(/_dainit/images/main/arrew_more.png); background-repeat: no-repeat; background-size: 50px auto; background-position: right center; border-radius: 30px; transition: all 0.5s;}


.company_ban.ban_img01:hover .txt{ margin-left: 50px; }
.company_ban.ban_img02:hover .txt{ margin-right: 50px;}
.company_ban:hover .txt span {border: 1px solid rgba(255,255,255, 0.5);  width:200px; }

@media only screen and (max-width:1400px){
    .company_goto {margin-left: 0px;}

}



@media only screen and (max-width:991px){
    .company_ban {padding-bottom: 150px;   }

    #main_company .company_visual {padding-bottom: 150px;} 

    .company_con { padding: 15% 0 10% 0;}

    .bbs_list li a { padding: 28px 80px 28px 5px; position: relative;}
    .bbs_list li a span{font-size: 130%; }
    .bbs_list li a:after{ width:50px; height: 50px;  top:calc(50% - 25px); }

    .company_con .title_area {margin-bottom: 10px;}
}


@media only screen and (max-width:768px){

    #main_company {  padding-top: 100px;} 

}

@media only screen and (max-width:560px){
    .company_ban .txt strong{ font-size: 150%;}
    .company_ban .txt p{ font-size: 90%;}


}