@import url("common.css");


.container{overflow: hidden;}

/* 비주얼 */
#visual{overflow:hidden; position: relative; z-index: 3;}
#visual .visual_in{width: calc(100% - 30px); height:100vh; overflow: hidden; position: relative; margin: 15px auto; background:#000;}
#visual .visual_in:after{content:''; display:block; width: calc(100% + 5px); height: 100px; background:url('/img/v_deco.png') no-repeat center/auto 100%; position: absolute; left: 50%; bottom: 0; transform:translateX(-50%); margin-left: -1px; z-index: 3;}
#visual .visual_in .radius{display: inline-block; z-index: 9; width: 20px; height: 20px; background:url('/img/radius.png') no-repeat center/100% auto; position: absolute;}
#visual .visual_in .radius1{left: -1px; top: -1px; transform:rotate(-90deg);}
#visual .visual_in .radius2{right: -1px; top: -1px;}
#visual .visual_in .radius3{left: -1px; bottom: 99px; transform:rotate(180deg);}
#visual .visual_in .radius4{right: -1px; bottom: 99px; transform:rotate(90deg);}
#visual .visual_in .v_txt{text-align:center; position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); z-index: 999;}
#visual .visual_in .v_txt .icon{display:inline-block; width:52px; margin: 0 auto 10px; animation:v_txt 1.0s 0.3s; animation-fill-mode:both;}
#visual .visual_in .v_txt .icon svg{width: 100%; height: auto;}
#visual .visual_in .v_txt h2{font-size:70px; font-weight: 700; font-family:var(--korFont); line-height: 120%; color:#fff; animation:v_txt 1.0s 0.6s; animation-fill-mode:both;}
#visual .visual_in .v_txt p{font-size:20px; font-weight: 400; color:#fff; letter-spacing: 0; line-height: 150%; padding: 40px 0 0; animation:v_txt 1.0s 0.9s; animation-fill-mode:both;}
#visual .visual_in .v_bg{position: absolute; left: 0; top:0; width: 100%; height:100%;}
#visual .visual_in .v_bg .jarallax{position: relative; width: 100%; height:100%; opacity: .7;}
#visual .visual_in .v_bg .jarallax iframe{position: absolute;}

@keyframes v_txt {
	0% { transform:translateY(60px); opacity:0; }
	100% { transform:translateY(0); opacity:1; }
}

#visual .scr{display:inline-block; font-size:12px; font-weight:700; color:#fff; line-height:120%; position:absolute; left:50%; transform:translateX(-50%); bottom:72px; z-index:12; transition:all .3s linear;}
#visual .scr:hover{opacity: 0.5;}
#visual .scr span{display:block; margin: 16px auto 0; width: 20px;}
#visual .scr svg{width: 100%; height: auto;}


/* css공통 */
.mTit{font-size:42px; font-weight:600; color:var(--black); font-family:var(--korFont); letter-spacing:0; line-height:120%;}
.mTit.eng{font-size:50px; letter-spacing: 0;}
.mTit small{display:block; font-size:15px; font-weight:700; letter-spacing: 0; color:var(--main); line-height:120%; padding:0 0 8px; font-family: 'Pretendard','Noto Sans KR', 'TheJamsil', Malgun Gothic,'Malgun Gothic', sans-serif;}
.titArea{text-align:center; padding:0 0 60px;}
.titArea .txt{padding:20px 0 0;}

.mTxt{font-size:30px; font-weight:500; color:var(--black); line-height:120%; letter-spacing:0; line-height:120%; font-family:var(--korFont);}

.moreBtn{display: inline-block; width:200px; height: 60px; box-sizing:border-box; border:1px solid rgba(255,255,255,.2); border-radius:60px; transition:all .3s linear; padding:0 25px; position: relative; overflow: hidden; text-align:left; cursor:pointer;}
.moreBtn:hover{border-color:#fff !important;}
.moreBtn:before{content:''; display: inline-block; width: 30px; height: 30px; border-radius:50%; background:#fff; position: absolute; right:15px; top:50%; font-size:20px; margin-top: -15px; transition:all .3s linear;} 
.moreBtn:hover:before{transform:scale(15);}
.moreBtn font{position: relative; z-index: 2; vertical-align: top; display: inline-block; line-height: 58px; font-size:15px; font-weight:600; color:#fff;  transition:all .3s linear;}
.moreBtn:hover font{color:var(--main);}
.moreBtn .arrow{display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align:center; border-radius:50%; color:var(--main); position:absolute; right:15px; top:50%; font-size:20px; margin-top: -15px; transition:all .3s linear;}

.num_list{counter-reset:list-number;}
.num_list li{counter-increment:list-number; font-size:1rem; letter-spacing:0; line-height:160%; box-sizing:border-box; position:relative; padding:0 0 16px 35px; color:#fff;}
.num_list li:last-child{padding-bottom:0;}
.num_list li:before{content:counter(list-number); display: inline-block; width: 26px; height:26px; line-height:26px; text-align:center; border-radius:50%; font-size:13px; font-weight: 700; color:#fff; background:rgba(255,255,255,.1); position: absolute; left: 0; top:0;}

.check_list{}
.check_list > li,
.check_list > dd{font-size:1rem; letter-spacing:0; line-height:150%; box-sizing:border-box; position:relative; padding:0 0 6px 28px;}
.check_list > li:last-child,
.check_list > dd:last-child{padding-bottom: 0;}
.check_list > li:before,
.check_list > dd:before{content:'\f88b'; font-family: "Material Symbols Outlined"; display: inline-block; width: 20px; height: 20px; line-height: 20px; border-radius:3px; background:var(--main); color:#fff; position: absolute; left: 0; top:2px; font-size:20px; text-align:center;}


@keyframes m_vsImg {
	0% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	20% { -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); }
	100% { -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
}





/* AI INFRA */
#infra{overflow: hidden; height: 100vh; display: flex; align-items:center; position: relative; z-index: 3;}
#infra .infra_in{}
#infra .infra_style{display:flex; align-items:center; justify-content:space-between;}
#infra .infra_style > div{box-sizing:border-box; width:calc(50% - 15px);}
#infra .infra_style .imgArea{}
#infra .infra_style .imgArea img{width:100%;}
#infra .infra_style .txtArea{}
#infra .infra_style .txtArea .list{opacity: 0.4; transform:scale(0.9);}
#infra .infra_style .txtArea .list dl{padding:50px 40px; cursor:default; box-sizing:border-box; background:#fff; border-radius:var(--borderR20); overflow:hidden; box-shadow:var(--shadow); display: flex; flex-direction: row-reverse; position: relative; transition:all .3s linear;}

#infra .infra_style .txtArea .list dl:after{content:''; display:block; width:100%; height: calc(100% - 10px); position: absolute; left:0; top:0; background:#fff; border-radius:var(--borderR20);}
#infra .infra_style .txtArea .list:nth-child(1) dl{background:var(--main); background: linear-gradient(to bottom, #fff, var(--main));}
#infra .infra_style .txtArea .list:nth-child(2) dl{background:var(--sub); background: linear-gradient(to bottom, #fff, var(--sub));}
#infra .infra_style .txtArea .list:nth-child(3) dl{background:var(--blue); background: linear-gradient(to bottom, #fff, var(--blue));}
#infra .infra_style .txtArea .list dt{width: 80px; position: relative; z-index: 2;}
#infra .infra_style .txtArea .list dt svg{width: 100%; height: auto;}
#infra .infra_style .txtArea .list dt img{width: 100%;}
#infra .infra_style .txtArea .list dd{width:calc(100% - 80px); padding:0 30px 0 0; box-sizing:border-box; position: relative; z-index: 2;}
#infra .infra_style .txtArea .list dd .mTxt{padding:0 0 0 24px; box-sizing:border-box; position:relative;}
#infra .infra_style .txtArea .list dd .mTxt span{display:inline-block; font-size:16px; font-weight:700; color:rgba(34,34,34,.3); position: absolute; left:0; top:0;}
#infra .infra_style .txtArea .list dd .txt{padding:8px 0 0;}

#infra .infra_style .txtArea .list:nth-child(1){opacity: 1; transform:scale(1); margin:0 0 25px;}
#infra .infra_style .txtArea .list:nth-child(2){opacity: 0.4; transform:scale(0.9); margin:0 0 30px;}
#infra .infra_style .txtArea .list:nth-child(3){opacity: 0.2; transform:scale(0.8);}


/* AI INFRA SOLUTION */
#solution{overflow:hidden; position: relative; z-index: 3;}
#solution .solution_style{width: 850px; height: 700px; margin: 0 auto; position: relative;}
#solution .solution_style .solution_style2{position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#solution .solution_style .ellipse{position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%); width: 850px; height: 300px;}
#solution .solution_style .ellipse span{display:block; width:300px; height:300px; border-radius:50%; position: absolute; top:0; z-index: 1;}
#solution .solution_style .ellipse span.one{background:rgba(45,51,135,.8); left: 0;}
#solution .solution_style .ellipse span.two{background:rgba(137,190,68,.8); right: 0; z-index: 2;}
#solution .solution_style .ellipse span.three{background:rgba(45,51,135,.8); left: 50%; margin-left: -150px;}
#solution .solution_style .ellipse span.four{background:rgba(137,190,68,.8); right: 50%; z-index: 2; margin-right: -150px;}
#solution .solution_style .line{display: block; width: 700px; height: 700px; box-sizing:border-box; border-radius:50%; border:1px solid #eaeaea; position: absolute; left:50%; top:0; margin-left: -350px;}
#solution .solution_style .line:after{content:''; display:block; width:20px; height:20px; background:url('/img/solution_dot.svg') no-repeat center/100% auto; position: absolute; left: 50%; top:-10px; margin-left: -10px; opacity: 0.5;}
#solution .solution_style .ci{width: 600px; margin: 0 auto; position: absolute; left: 50%; top:50%; transform:translate(-50%,-50%);}
#solution .solution_style .ci img{width: 100%;}
#solution .solution_style .txtArea{text-align:center; position: absolute; left: 50%; top:55%; transform:translate(-50%,-50%); width: 100%; z-index: 2;}
#solution .solution_style .txtArea h2{font-size:90px; font-weight: 700; color:var(--black); font-family:var(--korFont); line-height:120%; letter-spacing:0;}
#solution .solution_style .txtArea .btnArea{margin: 30px auto 0;}


/* 효과 */
#solution .solution_style .solution_style1 .ellipse{opacity: 0; transition:all .6s .3s linear;}
#solution .solution_style .solution_style1 .ellipse span.one{transition:all 1s .9s linear;}
#solution .solution_style .solution_style1 .ellipse span.two{transition:all 1s .9s linear;}
#solution .solution_style .solution_style1 .ellipse span.three{transition:all 0.8s 4.8s linear; opacity: 0;}
#solution .solution_style .solution_style1 .ellipse span.four{transition:all 0.8s 4.8s linear; opacity: 0;}
#solution .solution_style .solution_style1 .line{opacity: 0; transition:all 2s .9s linear;}
#solution .solution_style .solution_style1 .ci{opacity: 0;}
#solution .solution_style .solution_style1 .txtArea{}
#solution .solution_style .solution_style1 .txtArea h2{opacity: 0; transition:all 1s .9s linear;}
#solution .solution_style .solution_style1 .txtArea .btnArea{opacity: 0; transition:all 0.6s 5.6s linear;}


#solution .solution_style.aos-animate .solution_style1 .ellipse{opacity: 1;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.one{left:50%; margin-left: -150px; animation:opacity_eff 3s 1s linear forwards;} 
#solution .solution_style.aos-animate .solution_style1 .ellipse span.two{right:50%; margin-right: -150px; animation:opacity_eff 3s 1s linear forwards;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.three{opacity: 1; left: 50%; margin-left: -240px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.four{opacity: 1; right: 50%; margin-right: -240px;}
#solution .solution_style.aos-animate .solution_style1 .line{opacity: 1; animation:line_eff 5s linear infinite;}
#solution .solution_style.aos-animate .solution_style1 .ci{animation:opacity_eff2 4.5s 2s linear forwards;} 
#solution .solution_style.aos-animate .solution_style1 .txtArea h2{opacity: 1;}
#solution .solution_style.aos-animate .solution_style1 .txtArea .btnArea{opacity: 1;}


@keyframes opacity_eff {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes opacity_eff2 {
	0 { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes line_eff {
	from { transform:rotate(0); }
	to { transform:rotate(360deg); }
}



/* ALL IN ONE PLATFORM */ 
#platform{overflow:hidden; position: relative; z-index: 2; padding: 120px 0;}
#platform:before{content:''; display:block; width: 100%; height:100%; background:url('/img/platform_bg.jpg') no-repeat center/cover; position:absolute; left:0; top:0;}
#platform.action:before{transform: scale(1); animation: m_vsImg 1.8s;}

#platform .platform_guide{position: relative; margin: 0 auto 90px; max-width:1350px; width: 94%; display: flex;}
#platform .platform_guide.last{margin-bottom: 0 !important;}
#platform .platform_txt{box-sizing:border-box; width: 50%; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display:flex; flex-direction: column; z-index: 9; transition: all .3s !important; padding: 0 3% 0 0; box-sizing:border-box;}
/* #platform .platform_txt.fixed{position: fixed; transition: all .3s !important; z-index: 2;} */
#platform .platform_txt .platform_txt_in{max-width:675px; width: 100%;}
#platform .platform_txt .mTit{color:#fff; padding: 0; opacity: 0; transform:translateY(40px); transition:all .3s .3s linear;} 
#platform .platform_txt .mTit small{color:#fff;}
#platform .platform_txt .num_list{padding: 25px 0 0; opacity: 0; transform:translateY(40px); transition:all .3s .6s linear;}
#platform .platform_txt .btnArea{padding: 60px 0 0; opacity: 0; transition:all .3s .9s linear; z-index: 2;}
#platform .platform_img{width: 50%;}
#platform .platform_img .platform_img_in{max-width:675px; width: 100%;}
#platform .platform_img img{max-width:100%; opacity: 0; transition:all .3s linear;}
#platform .platform_guide.active .platform_img img{opacity: 1;}


#platform .platform_guide.active .platform_txt{z-index: 9;}
#platform .platform_guide.active .platform_txt .mTit{opacity: 1; transform:translateY(0);}
#platform .platform_guide.active .platform_txt .num_list{opacity: 1; transform:translateY(0);}
#platform .platform_guide.active .platform_txt .btnArea{opacity: 1; transform:translateY(0);}

#platform .platform_lnb{position: absolute; left: 100px; top:50%; transform:translateY(-50%); z-index: 9; width: 220px; opacity: 0;}
#platform.action .platform_lnb{position: fixed; transition: all .3s !important; z-index: 2;}
#platform .platform_lnb.active{opacity: 1;}
#platform .platform_lnb li{cursor:pointer; margin:0 0 10px;}
#platform .platform_lnb li a{display: inline-block; font-size:15px; font-weight: 700; color:transparent; line-height: 40px;}
#platform .platform_lnb li:last-child{margin:0;}
#platform .platform_lnb li span{display: inline-block; vertical-align: middle; margin: -2px 26px 0 0; width: 10px; height: 10px; border-radius:50%; background:#fff; opacity: 0.2; position: relative;}
#platform .platform_lnb li span:before{content:''; display:block; width:100%; height:100%; border-radius:50%; position:absolute; left:0; top:0; box-sizing:border-box; background:#fff; z-index: -1; animation: active-circle 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 1s; animation-delay: 1s;}
#platform .platform_lnb li span:after{content:''; display:block; width:100%; height:100%; border-radius:50%; position:absolute; left:0; top:0; box-sizing:border-box; background:#fff; z-index: -1; animation: active-circle2 1.5s cubic-bezier(1, 2, 0.66, 3) infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}

#platform .platform_lnb li a.active{color:#fff;}
#platform .platform_lnb li a.active span{opacity: 1;}


@keyframes active-circle {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0.02; 
   }
  50% {
	opacity: 0.05; 
   }
  100% {
	-webkit-transform: scale(3);
	transform: scale(3);
	opacity: 0; } 
}


@keyframes active-circle2 {
  0% {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 0.05; 
   }
  50% {
	opacity: 0.1; 
   }
  100% {
	-webkit-transform: scale(3);
	transform: scale(3);
	opacity: 0; } 
}


/* USE CASES */
#cases{overflow: hidden; position: relative; z-index: 3;}
#cases .cases_roll{background:url('/img/case_ci.png') no-repeat center/500px auto;}
#cases .cases_roll .roll{display: flex; justify-content:space-between; }
#cases .cases_roll .roll > div{box-sizing:border-box; width:calc(50% - 15px);}
#cases .cases_roll .imgArea{}
#cases .cases_roll .imgArea img{width: 100%; border-radius:var(--borderR50); overflow: hidden; background-repeat:no-repeat; background-size:cover; background-position:center;}
#cases .cases_roll .txtArea{padding: 0 0 0 45px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
#cases .cases_roll .txtArea .cate{display: inline-block; min-width: 60px; height: 30px; line-height: 28px; box-sizing:border-box; border:1px solid var(--main); border-radius:30px; text-align:center; font-size:15px; font-weight: 700; color:var(--main); letter-spacing: 0; padding: 0 10px; margin: 0 0 15px;}
#cases .cases_roll .txtArea .txt{padding:10px 0 0; line-height: 140%;}
#cases .cases_roll .txtArea .check_list{padding: 35px 0 0; margin:30px 0 0; border-top:1px solid var(--border);}
#cases .slick-arrow{padding: 0; border:0; background:none; width: 60px; height:60px; border-radius:50%; box-sizing:border-box; border:1px solid var(--border); cursor:pointer; font-size:0; position: absolute; right: 0; bottom: 0; z-index: 9999; transition:all .3s linear;} 
#cases .slick-prev{margin-right: 70px;}
#cases .slick-arrow:after{display: inline-block; font-size:32px; color:#bbb; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); transition:all .3s linear; font-family: "Material Symbols Outlined";}
#cases .slick-prev:after{content:'\e5de';}
#cases .slick-next:after{content:'\e5df';}

#cases .slick-arrow:hover{border-color:var(--black);}
#cases .slick-arrow:hover:after{color:var(--black);}


/* TECHONOLOGY */
#techonology{height: 100vh; overflow: hidden; position: relative; z-index: 3; display: flex; left: 0;}
#techonology:before{content:''; display:block; width: 100%; height:100%; background:url('/img/techonology_bg.jpg') no-repeat center/cover; position:absolute; left:0; top:0;}
#techonology.action:before{transform: scale(1); animation: m_vsImg 1.8s;}

#techonology .techonology_in{height: 100vh; position: relative; left: 50%; margin-left: -675px; display: flex; justify-content: flex-start;  align-items: center;} 
#techonology .techonology_in > div{position: relative; z-index: 2; box-sizing:border-box;}
#techonology .txtArea{width:800px; padding:0 20px 0 0;}
#techonology .txtArea .txtArea_in{}
#techonology .txtArea .txtArea_in .mTit{color:#fff;}
#techonology .txtArea .txtArea_in .mTit small{color:#fff;}
#techonology .txtArea .txtArea_in .btnArea{padding:50px 0 0;}
#techonology .imgArea{width: calc(100% - 800px);}
#techonology .imgArea .techonology_roll{display: flex;}
#techonology .imgArea .techonology_roll .roll{margin-right: 35px;} 
#techonology .imgArea .techonology_roll .roll:nth-child(odd){margin-top:80px;}
#techonology .imgArea .techonology_roll .roll:nth-child(even){margin-bottom:80px;}
#techonology .imgArea .techonology_roll .roll a{display:block; padding: 310px 30px 65px; position:relative; box-sizing:border-box; border:1px solid #fff; border-radius:var(--borderR30); overflow: hidden; width: 370px;} 
#techonology .imgArea .techonology_roll .roll:hover a{background:#000; transition:all .3s;}
#techonology .imgArea .techonology_roll .roll dt{background-repeat:no-repeat; background-size:contain; background-position:center; width:100%; height:100%; overflow: hidden; position: absolute; left:0; top:0; clip-path: circle(130px at 50% 190px); }  
#techonology .imgArea .techonology_roll .roll:hover dt{clip-path: circle(200% at 50% 50%); background-size:cover;  transition: 2s; opacity: 0.4;}
#techonology .imgArea .techonology_roll .roll dd{text-align:center; padding:45px 0 0; position: relative; z-index: 2;} 
#techonology .imgArea .techonology_roll .roll dd h5{font-size:22px; font-weight: 700; color:#fff; line-height: 120%; font-family:var(--korFont);} 
#techonology .imgArea .techonology_roll .roll dd .txt{padding:15px 0 0; color:#fff;} 
#techonology .imgArea .techonology_roll .roll dd .brFixed{display:block;}




/*******************************************************************************
    @media 1640px
*******************************************************************************/
@media all and (max-width:1640px){


/* TECHONOLOGY */
#techonology .techonology_in{left:3%; margin-left: 0;} 

/* AI INFRA */
#infra .infra_style .txtArea{}
#infra .infra_style .txtArea .list dl{padding:40px 30px;}



/* ALL IN ONE PLATFORM */ 

#platform .platform_lnb{left: 3%;}



}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){


/* css공통 */
.titArea{padding:0 0 40px;}


/* USE CASES */
#cases{}
#cases .cases_roll{background-size:400px auto;}
#cases .cases_roll .txtArea{padding: 0 0 0 20px;}
#cases .cases_roll .txtArea .check_list{padding: 25px 0 0; margin:20px 0 0;}
#cases .slick-arrow{width: 50px; height:50px;} 
#cases .slick-prev{margin-right: 55px;}
#cases .slick-arrow:after{font-size:26px;}



/* TECHONOLOGY */
#techonology .txtArea{width:600px;}
#techonology .txtArea .txtArea_in .btnArea{padding:40px 0 0;}
#techonology .imgArea{width: calc(100% - 600px);}



/* AI INFRA */
#infra{height: auto; padding: 120px 0;}
#infra .infra_style{}
#infra .infra_style .txtArea{}
#infra .infra_style .txtArea .list dl{padding:30px 20px;}



/* ALL IN ONE PLATFORM */ 
#platform{padding: 100px 0;}
#platform .platform_guide{margin: 0 auto 70px;}
#platform .platform_txt{}
#platform .platform_txt .mTit{} 
#platform .platform_txt .num_list{padding: 20px 0 0;}
#platform .platform_txt .btnArea{padding: 40px 0 0;}

#platform .platform_lnb{width: 200px;}
#platform .platform_lnb li{margin:0 0 8px;}
#platform .platform_lnb li a{font-size:14px; line-height: 30px;}
#platform .platform_lnb li span{ margin: -2px 15px 0 0;}





}

/*******************************************************************************
    @media  ~980px                body,html{font-size:14px; }     3%
*******************************************************************************/
@media all and (max-width:980px){

/* 비주얼 */
#visual .visual_in{width: calc(100% - 20px); margin: 10px auto;}
#visual .visual_in:after{height: 80px;}
#visual .visual_in .radius{width: 20px; height: 20px;}
#visual .visual_in .radius3{bottom: 79px;}
#visual .visual_in .radius4{bottom: 79px;}

#visual .visual_in .v_txt .icon{width:42px;}
#visual .visual_in .v_txt h2{font-size:50px;}
#visual .visual_in .v_txt p{font-size:18px; padding: 30px 0 0;}
#visual .scr{font-size:11px; bottom:62px;}
#visual .scr span{margin: 10px auto 0; width: 15px;}


/* css공통 */
.mTit{font-size:32px;}
.mTit.eng{font-size:36px;}
.mTit small{font-size:14px;}
.titArea{padding:0 0 30px;}
.titArea .txt{padding:15px 0 0;}

.mTxt{font-size:22px;}


.moreBtn{width:180px; height: 50px; padding:0 20px;}
.moreBtn:before{width: 25px; height: 25px; right:12px; font-size:20px; margin-top: -12px;} 
.moreBtn font{line-height: 48px; font-size:14px;}
.moreBtn .arrow{width: 25px; height: 25px; line-height: 25px; right:12px; font-size:16px; margin-top: -12px;}

.num_list li{padding:0 0 12px 26px;}
.num_list li:before{width: 20px; height:20px; line-height:20px; font-size:11px; top:1px;}

.check_list{}
.check_list > li,
.check_list > dd{padding:0 0 4px 24px;}
.check_list > li:before,
.check_list > dd:before{width: 18px; height: 18px; line-height: 18px; top:0; font-size:18px;}

.dot_list{}
.dot_list > li,
.dot_list > dd{padding:0 0 4px 9px;}
.dot_list > li:before,
.dot_list > dd:before{top:9px;}



/* AI INFRA */
#infra{padding: 80px 0;}
#infra .infra_style{}
#infra .infra_style > div{width:calc(50% - 10px);}
#infra .infra_style .txtArea{}
#infra .infra_style .txtArea .list dl{padding:20px 15px;}
#infra .infra_style .txtArea .list dl:after{height: calc(100% - 5px);}
#infra .infra_style .txtArea .list dt{width: 60px;}
#infra .infra_style .txtArea .list dd{width:calc(100% - 60px); padding:0 20px 0 0;}
#infra .infra_style .txtArea .list dd .mTxt{padding:0 0 0 20px;}
#infra .infra_style .txtArea .list dd .mTxt span{font-size:14px;}
#infra .infra_style .txtArea .list dd .txt{padding:6px 0 0;}



/* AI INFRA SOLUTION */
#solution{}
#solution .solution_style{width: 631px; height: 520px;}
#solution .solution_style .ellipse{width: 631px; height: 300px;}
#solution .solution_style .ellipse span{width:250px; height:250px;}
#solution .solution_style .ellipse span.three{margin-left: -125px;}
#solution .solution_style .ellipse span.four{margin-right: -125px;}
#solution .solution_style .line{width: 520px; height: 520px; margin-left: -260px;}
#solution .solution_style .line:after{width:20px; height:20px; top:-10px; margin-left: -10px;}
#solution .solution_style .ci{width: 400px;}
#solution .solution_style .txtArea{top:52%;}
#solution .solution_style .txtArea h2{font-size:60px;}
#solution .solution_style .txtArea .btnArea{margin: 20px auto 0;}

/* 효과 */
#solution .solution_style.aos-animate .solution_style1 .ellipse span.one{margin-left: -125px;} 
#solution .solution_style.aos-animate .solution_style1 .ellipse span.two{margin-right: -125px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.three{margin-left: -200px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.four{margin-right: -200px;}



/* ALL IN ONE PLATFORM */ 
#platform{padding: 80px 0;}
#platform .platform_guide{margin: 0 auto 50px;}
#platform .platform_txt{}
#platform .platform_txt .mTit{} 
#platform .platform_txt .num_list{padding: 15px 0 0;}
#platform .platform_txt .btnArea{padding: 30px 0 0;}
#platform .platform_img{}

#platform .platform_lnb{width: 50px;}
#platform .platform_lnb li{margin:0 0 6px;}
#platform .platform_lnb li a{font-size:0; line-height: 20px;}
#platform .platform_lnb li span{ margin: -2px 10px 0 0; width: 8px; height: 8px;}





/* USE CASES */
#cases{}
#cases .cases_roll{background-size:280px auto;}
#cases .cases_roll .roll{}
#cases .cases_roll .roll > div{width:calc(50% - 10px);}
#cases .cases_roll .txtArea{padding: 0 0 0 10px;}
#cases .cases_roll .txtArea .cate{min-width: 50px; height: 26px; line-height: 24px; font-size:12px; margin: 0 0 10px;}
#cases .cases_roll .txtArea .txt{padding:8px 0 0;}
#cases .cases_roll .txtArea .check_list{padding: 15px 0 0; margin:10px 0 0;}
#cases .slick-arrow{width: 40px; height:40px; bottom: -40px;} 
#cases .slick-prev{margin-right: 45px;}
#cases .slick-arrow:after{font-size:20px;}



/* TECHONOLOGY */
#techonology .txtArea{width:400px;}
#techonology .txtArea .txtArea_in .btnArea{padding:30px 0 0;}
#techonology .imgArea{width: calc(100% - 400px);}
#techonology .imgArea .techonology_roll{}
#techonology .imgArea .techonology_roll .roll{margin-right: 25px;} 
#techonology .imgArea .techonology_roll .roll:nth-child(odd){margin-top:40px;}
#techonology .imgArea .techonology_roll .roll:nth-child(even){margin-bottom:40px;}
#techonology .imgArea .techonology_roll .roll a{padding: 200px 20px 45px; width: 260px;} 
#techonology .imgArea .techonology_roll .roll dt{clip-path: circle(80px at 50% 120px);}
#techonology .imgArea .techonology_roll .roll dd{padding: 25px 0 0;} 
#techonology .imgArea .techonology_roll .roll dd h5{font-size:18px;} 
#techonology .imgArea .techonology_roll .roll dd .txt{padding:12px 0 0;} 



}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* 비주얼 */
#visual{height: calc(var(--vh, 1vh) * 100) !important;}
#visual .visual_in{height: calc(var(--vh, 1vh) * 100) !important;}
#visual .visual_in:after{height: 60px;}
#visual .visual_in .radius{width: 15px; height: 15px;}
#visual .visual_in .radius3{bottom: 59px;}
#visual .visual_in .radius4{bottom: 59px;}
#visual .visual_in .v_txt .icon{width:35px; margin: 0 auto 8px;}
#visual .visual_in .v_txt h2{font-size:30px;}
#visual .visual_in .v_txt p{font-size:15px; padding: 20px 0 0;}
#visual .scr{bottom:42px;}



/* css공통 */
.mTit{font-size:24px;}
.mTit.eng{font-size:26px;}
.mTit small{font-size:13px; padding:0 0 6px;}
.titArea{padding:0 0 20px;}
.titArea .txt{padding:10px 0 0;}

.mTxt{font-size:17px;}

.moreBtn{width:150px; height: 40px; padding:0 15px;}
.moreBtn:before{width: 20px; height: 20px; margin-top: -10px;} 
.moreBtn font{line-height: 38px; font-size:13px;}
.moreBtn .arrow{width: 20px; height: 20px; line-height: 20px; font-size:14px; margin-top: -10px;}



/* AI INFRA */
#infra{padding: 60px 0;}
#infra .infra_style{flex-wrap:wrap;}
#infra .infra_style > div{width:100%;}
#infra .infra_style .txtArea{padding: 20px 0 0;}
#infra .infra_style .txtArea .list dt{width: 50px;}
#infra .infra_style .txtArea .list dd{width:calc(100% - 50px);}
#infra .infra_style .txtArea .list dd .mTxt span{font-size:13px;}



/* AI INFRA SOLUTION */
#solution{}
#solution .solution_style{width: 420px; height: 346px;}
#solution .solution_style .ellipse{width: 420px; height: 200px;}
#solution .solution_style .ellipse span{width:180px; height:180px;}
#solution .solution_style .ellipse span.three{margin-left: -90px;}
#solution .solution_style .ellipse span.four{margin-right: -90px;}
#solution .solution_style .line{width: 346px; height: 346px; margin-left: -173px;}
#solution .solution_style .line:after{width:16px; height:16px; top:-8px; margin-left: -8px;}
#solution .solution_style .ci{width: 300px;}
#solution .solution_style .txtArea{top:52%;}
#solution .solution_style .txtArea h2{font-size:35px;}
#solution .solution_style .txtArea .btnArea{margin: 15px auto 0;}

/* 효과 */
#solution .solution_style.aos-animate .solution_style1 .ellipse span.one{margin-left: -90px;} 
#solution .solution_style.aos-animate .solution_style1 .ellipse span.two{margin-right: -90px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.three{margin-left: -150px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.four{margin-right: -150px;}


/* ALL IN ONE PLATFORM */ 
#platform{padding: 60px 0;}
#platform .platform_guide{margin: 0 auto 30px; display: block;}
#platform .platform_txt{width: 100%; position: relative; left: auto; right: auto; top:auto; bottom: auto; transform:translateY(0);}
#platform .platform_txt.fixed{position: relative; left: auto; right: auto; top:auto; bottom: auto; transform:translateY(0);}
#platform .platform_txt .mTit{transform:translateY(0); opacity: 1;} 
#platform .platform_txt .num_list{padding: 10px 0 0; transform:translateY(0); opacity: 1;}
#platform .platform_txt .btnArea{padding: 20px 0 0; opacity: 1;}
#platform .platform_img{width: 100%; padding:0 0 10px; text-align:center;}
#platform .platform_img img{max-width:70%; opacity: 1;}

#platform .platform_lnb{display: none;}





/* USE CASES */
#cases{}
#cases .cases_roll{background-size:150px auto; background-position:right bottom;}
#cases .cases_roll .roll{flex-wrap:wrap;}
#cases .cases_roll .roll > div{width:100%;}
#cases .cases_roll .txtArea{padding: 20px 0 0;}
#cases .cases_roll .txtArea .cate{min-width: 40px; height: 22px; line-height: 20px; font-size:10px; margin: 0 0 8px;}
#cases .cases_roll .txtArea .txt{padding:6px 0 0;}
#cases .cases_roll .txtArea .check_list{padding: 10px 0 0; margin:8px 0 0; width: 100%;}


/* TECHONOLOGY */
#techonology .txtArea{width:400px;}
#techonology .txtArea .txtArea_in .btnArea{padding:20px 0 0;}
#techonology .imgArea{width: calc(100% - 400px);}
#techonology .imgArea .techonology_roll{}
#techonology .imgArea .techonology_roll .roll{margin-right: 15px;} 
#techonology .imgArea .techonology_roll .roll:nth-child(odd){margin-top:30px;}
#techonology .imgArea .techonology_roll .roll:nth-child(even){margin-bottom:30px;}
#techonology .imgArea .techonology_roll .roll a{padding: 150px 10px 20px; width: 200px;} 
#techonology .imgArea .techonology_roll .roll dt{clip-path: circle(60px at 50% 90px);}
#techonology .imgArea .techonology_roll .roll dd{padding: 15px 0 0;} 
#techonology .imgArea .techonology_roll .roll dd h5{font-size:16px;} 
#techonology .imgArea .techonology_roll .roll dd .txt{padding:8px 0 0;} 



}
/*******************************************************************************
    @media ~480px                body,html{font-size:13px; }
*******************************************************************************/
@media all and (max-width:480px){



/* AI INFRA SOLUTION */
#solution{}
#solution .solution_style{width: 300px; height: 300px;}
#solution .solution_style .ellipse{width: 300px; height: 140px;}
#solution .solution_style .ellipse span{width: 140px; height: 140px;}
#solution .solution_style .line{width: 300px; height: 300px; margin-left: -150px;}
#solution .solution_style .ci{width: 280px;}
#solution .solution_style .txtArea{top:52%;}
#solution .solution_style .txtArea h2{font-size:30px;}
#solution .solution_style .txtArea .btnArea{margin: 10px auto 0;}

/* 효과 */
#solution .solution_style.aos-animate .solution_style1 .ellipse span.one{margin-left: -70px;} 
#solution .solution_style.aos-animate .solution_style1 .ellipse span.two{margin-right: -70px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.three{margin-left: -100px;}
#solution .solution_style.aos-animate .solution_style1 .ellipse span.four{margin-right: -100px;}





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}