@charset "utf-8";


#container {background:#000;}



.main_visual {text-align:center; position:relative; width:100%; ;margin:5% 5% 0%; width:auto; overflow:hidden; width:auto; border-radius:50px;  z-index:1; background:#000;  }

.main_visual ul#main_visual_wrap {height:100vh; position:relative; z-index:1; }
.main_visual li.jarallax {height:100vh; width:100%; }
.main_visual li.jarallax .video{position:relative; z-index:0;  }
.main_visual li.jarallax .text{color:#fff; width:22ch;  animation: typing 2s steps(22), blink .5s step-end infinite alternate;  white-space: nowrap;  overflow: hidden;  border-right: 3px solid;	z-index:3;  position:relative; margin:0 auto; top:40%; font-family: 'Pretendard'; font-weight:800; font-size:40px; line-height:50px;}
.main_visual li.jarallax .bg{width:100%; height:100%; background:rgba(0,0,0,0); position:absolute; left:0px; top:0px; z-index:1;}

.main_visual li.jarallax .text01{width:24ch;}
.main_visual li.jarallax .text02{width:24ch;}
.main_visual li.jarallax .text03{width:24ch;}
@keyframes typing {from {width:0}}
@keyframes blink {50% {border-color: transparent}}


.main_pager {position:absolute; width:100%; left:0px; bottom:180px;  z-index:9;  text-align:center; }
.main_pager div{display:inline-block; vertical-align:middle; cursor:pointer; text-indent:-9999; border:1px rgba(255,255,255,0.3) solid; padding:5px;  border-radius:18px; width:18px; height:18px;line-height:18px; margin:0px 5px; position:relative;}
.main_pager div.cycle-pager-active{  border:1px rgba(255,255,255,1) solid;}
.main_pager div span {display:inline-block;  width:8px; height:8px;  border-radius:10px; vertical-align:middle; background:rgba(255,255,255,0.3) }
.main_pager div.cycle-pager-active span {  background:rgba(255,255,255,1)}

/*.main_visual .bg_bottom {background:url(../images/main/main_visual_bg.png) left bottom repeat-x; position:absolute; left:0px; bottom:50px; width:100%; height:367px;  z-index:3; display:none;}*/




.main_about_wrap {text-align:center; position:relative; ;  margin:0% 5% 5%; z-index:2;}
.main_about_wrap .title {color:#fff; position:relative; z-index:2;  text-align:left;  margin-bottom:90px; padding-top:200px;  }
.main_about_wrap .title .t1{font-size: 80px;    font-weight: 900;    color: #fff;    margin-bottom:100px;}
.main_about_wrap .title .t2{font-size:50px; line-height:50px;    }
.main_about_wrap .title .t3{color: rgba(255, 255, 255, 0.7);   font-size:18px; line-height:30px;  margin-top:30px;  }
.main_about_wrap .title .btns {margin-top:70px; display:none;}
.main_about_wrap .title .btns a {display:inline-block; padding-left:40px; line-height:50px; border:2px #fff solid;  color:#fff; font-size:16px;}
.main_about_wrap .title .btns a span{display:inline-block; padding-left:20px;  padding-right:20px;  border-left:2px #fff solid;  color:#fff; font-size:16px; margin-left:40px;vertical-align:middle;}
.main_about_wrap .title .btns a span .feather{ width:20px;    height:20px;    stroke-width:2px;   color:#fff; position:relative; top:6px;}


.main_about_wrap .icon{position:absolute;top:0px;right:0px; animation:move 4s linear infinite; opacity: 0.06;}
.main_about_wrap .icon .feather{ width:600px;    height:600px;    stroke-width:1px;   color:rgba(255,255,255,1); }
@keyframes move {
	50% { transform:translateY(0); }
	0%,100% { transform:translateY(50px); }
}






.main_business_wrap {position:relative; margin:0px 5%;  margin-top:200px; }
.main_business_wrap .li-group {margin-bottom:40px;}
.main_business_wrap .li-group ul {display:table; width:100%; table-layout:fixed;}
.main_business_wrap .li-group ul li{display:table-cell; width:50%;   transition: all 0.5s; -webkit-transition: all 0.3s;  -moz-transition: all 0.3s;  -o-transition: all 0.3s;  transition: all 0.3s;  transition-timing-function: ease-in-out ;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;  }
.main_business_wrap .li-group ul li .box { background:rgba(255,255,255,0.1) ; border-radius:50px; transition: all 0.5s; overflow:hidden; position:relative; }
.main_business_wrap .li-group ul li:nth-child(2n+1){padding-right:20px;}
.main_business_wrap .li-group ul li:nth-child(2n+2){padding-left:20px;}
.main_business_wrap .li-group ul li:hover{width:65%;  }

.main_business_wrap .li-group ul li .box .bg{ position:absolute; left:0px; top:0px; width:100%; height:100%;   transition: all 0.5s;  background-size:cover; background-repeat:no-repeat; background-position:no-repeat; display:none; z-index:0; opacity:0.2; }


.main_business_wrap .li-group ul li .info {position:relative; z-index:1; }
.main_business_wrap .li-group ul li:hover .box .bg {display:block;}


.main_business_wrap ul li .box { padding:80px; border-radius:50px;  }

.main_business_wrap ul li .info{  position:relative; }
.main_business_wrap ul li .info .t0{font-size:20px; color:rgba(255,255,255,0.6);font-weight:900}
.main_business_wrap ul li .info .t1{font-size:35px; color:#fff; margin-top:40px; font-weight:800}
.main_business_wrap ul li .info .t2{font-size:17px; color:rgba(255,255,255,0.8); margin-top:40px; height:40px; line-height:20px;}
.main_business_wrap ul li .info .t3{ margin-top:40px}
.main_business_wrap ul li .info .t3 a{display:inline-block; width:50px; height:50px; line-height:50px; border-radius:50px; border:1px #fff solid; position:relative; text-align:center;  transition: all 0.5s; }
.main_business_wrap ul li .info .t3 .fonti{color:#fff; position:relative;   font-size:20px;  transition: all 0.5s;}
.main_business_wrap ul li:hover .info .t3 .fonti{ margin-right:-20px;}





/*
.main_works_wrap {padding:200px 5%;  position:relative;  }

.main_works_wrap .title {}
.main_works_wrap .title .t1{ font-size:60px;  line-height:60px; color:#FFF; font-weight:900; }
.main_works_wrap .title .t2{margin-top:10px; line-height:30px; font-size:17px; color:rgba(255,255,255,0.6); font-weight:normal;}

.main_works_wrap .main_works_box{ margin: 0 auto; margin-top:80px;}
.main_works_wrap .main_works_box #gallery_grid{ margin: 0 auto; max-width:1340px;}
.main_works_wrap .main_works_box #gallery_grid .gall_li { width:317px; margin-bottom:20px; overflow:hidden;}

.main_works_wrap .main_works_box #gallery_grid .gall_li .photo{ transition: all 0.2s;  cursor:pointer; overflow:hidden;  position:relative; z-index:0; }
.main_works_wrap .main_works_box #gallery_grid .gall_li .photo img {width:100%; vertical-align:middle; transition: 0.2s all ease;  ; border-radius:5px;}


.main_works_wrap .main_works_box #gallery_grid .gall_li .subject {font-size:17px;   line-height:22px; color:rgba(255,255,255,0.6); transition: all 0.2s; text-align:center;   position:absolute; left:0px; bottom:-60px; width:100%; z-index:2;}
.main_works_wrap .main_works_box #gallery_grid .gall_li .subject a{color:rgba(255,255,255,0.6);     overflow: hidden;     white-space: nowrap;     text-overflow: ellipsis; display:block; padding:0 30px;}
.main_works_wrap .main_works_box #gallery_grid .gall_li:hover .subject{ bottom:30px;}
.main_works_wrap .main_works_box #gallery_grid .gall_li:hover .subject a{color:rgba(255,255,255,1);}


.main_works_wrap .main_works_box #gallery_grid .gall_li .bg { position:absolute; left:0px; bottom:-3000px;  height:100%;background:rgba(0,0,0,0.6); width:100%; z-index:1; transition: 0.2s all ease}
.main_works_wrap .main_works_box #gallery_grid .gall_li:hover .bg {top:0px; }

*/






.main_works_wrap {padding-left:5%; margin-top:200px;   position:relative;  padding-bottom:200px; }

.main_works_wrap .title {}
.main_works_wrap .title .t1{ font-size:40px;  line-height:50px; color:#FFF; font-weight:900; }
.main_works_wrap .title .t2{margin-top:5px; line-height:30px; font-size:17px; color:rgba(255,255,255,0.6); font-weight:normal;}

.main_works_wrap .main_works_box {margin-top:40px;}
.main_works_wrap .main_works_box ul {margin-top:40px;}
.main_works_wrap .main_works_box ul li{margin-right:20px; border-radius:30px; overflow:hidden; position:relative; width:500px; }
.main_works_wrap .main_works_box ul li a{position:relative;}
.main_works_wrap .main_works_box ul li .photo {position:relative; z-index:0; opacity:0.6;  transition: 0.2s all; }
.main_works_wrap .main_works_box ul li img {vertical-align:middle; width:100%;  border-radius:30px;  }
.main_works_wrap .main_works_box ul li .subject {position:absolute; bottom:-30px; left:0px; width:100%; text-align:Center;  z-index:2; font-size:17px; color:#fff;     overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis; padding:0 20px; transition: 0.2s all;  text-shadow:0px 0px 10px rgba(0,0,0,0.9); }
.main_works_wrap .main_works_box ul li .bg {position:absolute; top:-100%; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1; transition: 0.2s all; display:none;}



.main_works_wrap .main_works_box ul li:hover .photo { opacity:1}
.main_works_wrap .main_works_box ul li:hover .subject {bottom:30px;}
.main_works_wrap .main_works_box ul li:hover .bg {top:0px;  display:none; }
.main_works_wrap .main_works_box ul li:hover .bg {top:0px;  display:none; }




.main_works_wrap .main_works_box .btn {position:absolute; left:0%; top:40%; width:95%;  z-index:0;}
.main_works_wrap .main_works_box .btn .s_btn {float:left;   background:#444;width:50px; height:50px; border-radius:50px; line-height:50px; text-align:center; color:rgba(255,255,255,0.5);; font-size:12px; cursor:pointer; box-shadow: 0 5px 15px 0 rgba(136, 136, 136, 0.1); font-size:15px;}
.main_works_wrap .main_works_box .btn .s_btn#works_prev {margin-left:-25px;  }
.main_works_wrap .main_works_box .btn .s_btn#works_next {float:right; margin-right:-25px; }
.main_works_wrap .main_works_box .btn .s_btn:hover {background:#222; color:#fff} 






@media all and (max-width:1024px) {

#container {padding-top:60px;}


.main_visual {margin:15px 15px 0%;   border-radius:20px;    }

.main_visual ul#main_visual_wrap {height:300px; position:relative; z-index:1; }
.main_visual li.jarallax {height:100%; width:100%; }
.main_visual li.jarallax .video{position:relative; z-index:0;  }
.main_visual li.jarallax .text{color:#fff; width:22ch;     top:40%;  font-size:20px; line-height:30px;}


.main_visual li.jarallax .text01{width:24ch;}
.main_visual li.jarallax .text02{width:14ch;}
.main_visual li.jarallax .text03{width:24ch;}
@keyframes typing {from {width:0}}
@keyframes blink {50% {border-color: transparent}}
.main_pager {position:absolute; width:100%; left:0px; bottom:80px; }



.main_about_wrap {  margin:0% 15px 5%; z-index:2;}
.main_about_wrap .title {  margin-bottom:90px; padding-top:100px;  }
.main_about_wrap .title .t1{font-size:30px;    margin-bottom:30px;}
.main_about_wrap .title .t2{font-size:30px; line-height:30px;    }
.main_about_wrap .title .t3{font-size:16px; line-height:22px;  margin-top:20px;  }
.main_about_wrap .title .btns {margin-top:40px; }




.main_business_wrap { margin:0px 15px;  margin-top:100px; }
.main_business_wrap .li-group {margin-bottom:40px;}
.main_business_wrap .li-group ul {display:block; width:auto; table-layout:fixed; }
.main_business_wrap .li-group ul li{display:block; width:auto;  padding:0px !important; margin-bottom:10px}
.main_business_wrap .li-group ul li .box { background:rgba(255,255,255,0.1) ; border-radius:20px; padding:30px !important; }
.main_business_wrap .li-group ul li:hover{width:auto;;  }



.main_business_wrap ul li .info{  position:relative; }
.main_business_wrap ul li .info .t0{font-size:18px; }
.main_business_wrap ul li .info .t1{font-size:25px;margin-top:20px;}
.main_business_wrap ul li .info .t2{font-size:16px;  margin-top:20px; height:auto; line-height:20px;}
.main_business_wrap ul li .info .t3{ margin-top:40px}





.main_works_wrap {padding-left:15px; margin-top:100px; padding-bottom:100px; }

.main_works_wrap .title {}
.main_works_wrap .title .t1{ font-size:30px;  line-height:30px; }
.main_works_wrap .title .t2{margin-top:5px; line-height:20px; font-size:16px}

.main_works_wrap .main_works_box {margin-top:40px;}
.main_works_wrap .main_works_box ul li{margin-right:20px; border-radius:20px;  width:280px; }
.main_works_wrap .main_works_box ul li img { border-radius:20px;  }







.main_works_wrap .main_works_box .btn {position:absolute; left:15px; top:40%; width:95%;  z-index:0;}
.main_works_wrap .main_works_box .btn .s_btn { width:40px; height:40px; border-radius:40px; line-height:40px;}





}


@media all and (min-width:1025px) and (max-width:1440px) {




#container {padding-top:90px;}


.main_visual {margin:15px 15px 0%;   border-radius:20px;    }

.main_visual ul#main_visual_wrap {height:700px; position:relative; z-index:1; }
.main_visual li.jarallax {height:100%; width:100%; }


.main_about_wrap {  margin:0% 15px 5%; z-index:2;}


.main_business_wrap { margin:0px 15px;  margin-top:100px; }



.main_works_wrap {padding-left:15px; margin-top:100px; padding-bottom:100px; }

.main_works_wrap .main_works_box ul li {width:350px;}



}