/* about */
.ab_vis_1 {position:absolute; width:2000px; height:700px; left:calc(50% - 550px); top:180px; background-position:0px 0px; animation:ab_1 3s 0s ease-in-out normal forwards; opacity:.2; background-size:95% 95%;}
@keyframes ab_1 {
  0% {
    opacity:.2;
	background-size:95% 95%;
  }
  100% {
    opacity:1;
	background-size:100% 100%;  
  }
}
.ab_bg_1 {background:url('../img/sub/s_vis_work_1.jpg') no-repeat;}
.ab_bg_2 {background:url('../img/sub/s_vis_work_3.jpg') no-repeat;}
.ab_bg_3 {background:url('../img/sub/s_vis_work_4.jpg') no-repeat;}
.ab_bg_4 {background:url('../img/sub/s_vis_work_5.jpg') no-repeat;}

.ab_vis_txt_1 {position:absolute; top:300px; left:calc(50% - 700px); font-size:60px; font-weight:800; color:#fff; letter-spacing:-2px; line-height:120%; text-align:center; text-shadow:0px 0px 15px rgba(0,0,0,.15); animation:ab_2 2.5s 0.5s ease normal forwards; opacity:0; word-break:keep-all;}
@keyframes ab_2 {
  0% {
    opacity:0;
	left:calc(50% - 620px); 
  }
  100% {
    opacity:1;
	left:calc(50% - 700px);  
  }
}

.ab_vis_txt_2 {position:absolute; top:460px; left:calc(50% - 350px); font-size:17px; font-weight:400; color:rgba(255,255,255,.9); letter-spacing:normal; line-height:140%; text-align:left; text-shadow:0px 0px 15px rgba(0,0,0,.35); animation:ab_3 2.5s 1s ease normal forwards; opacity:0; word-break:keep-all;}
@keyframes ab_3 {
  0% {
    opacity:0;
	left:calc(50% - 300px); 
  }
  100% {
    opacity:1;
	left:calc(50% - 350px);  
  }
}

.wo_txt_1 {position:relative; width:60%; font-size:18px; font-weight:300; color:rgba(255,255,255,.8); text-align:left; line-height:160%; letter-spacing:-0.2px; word-break:keep-all; padding-bottom:30px;}
.wo_txt_1:hover .wo_sqa_box {border:solid 1px rgba(226,1,1,.6);}
.wo_cont_wrap {position:relative; width:100%; margin-bottom:150px;}
.wo_col {color:#fff; letter-spacing:normal; font-weight:800;}
.wo_btbox {position:relative; width:130px; height:56px; border:solid 1px rgba(255,255,255,.15); opacity:.7; background:url('../img/svg/arr_5.svg') no-repeat calc(100% - 10px) 50%; background-size:16px; transition:all 0.5s ease 0s;}
.wo_btbox:hover {opacity:1; border:solid 1px rgba(255,255,255,.25); width:140px;}
.wo_btbox a {display:block; width:100%; height:54px; color:#fff; font-size:15px; font-weight:400; letter-spacing:-0.2px; line-height:100%; padding-top:20px; padding-left:15px;}
.wo_sqa_box {position:absolute; width:90%; height:calc(100% + 70px); top:-40px; left:-100px; border:solid 1px rgba(255,255,255,0); transition:all 1s ease 0s;}
.wo_sqa_act {left:-20px; border:solid 1px rgba(255,255,255,.12);}
.wo_vis_space {position:relative; width:100%;}
.wo_vis_1 {position:absolute; width:1080px; height:600px; left:850px; top:-350px; background:url('../img/sub/s_vis_work_2.jpg') no-repeat 0px 0px; background-size:95% 95%; transition:all 2s ease 0s; opacity:.1; z-index:-1;}
.wo_vis_act_1 {background-size:100% 100%; opacity:1; left:800px;}

.wo_vis_2 {position:absolute; width:1080px; height:600px; left:550px; top:-750px; background:url('../img/sub/s_vis_work_6.jpg') no-repeat 0px 0px; background-size:95% 95%; transition:all 2s ease 0s; opacity:.1; z-index:-1;}
.wo_vis_act_2 {background-size:100% 100%; opacity:1; left:500px;}

.wo_vis_3 {position:absolute; width:700px; height:700px; left:600px; top:-450px; background:url('../img/sub/s_vis_work_7.jpg') no-repeat 0px 0px; background-size:95% 95%; transition:all 2s ease 0s; opacity:.1; z-index:-1;}
.wo_vis_act_3 {background-size:100% 100%; opacity:1; left:550px;}

.wo_vis_4 {position:absolute; width:600px; height:600px; left:600px; top:-450px; background:url('../img/sub/s_vis_work_8.jpg') no-repeat 0px 0px; background-size:95% 95%; transition:all 2s ease 0s; opacity:.1; z-index:-1;}
.wo_vis_act_4 {background-size:100% 100%; opacity:1; left:550px;}

.wo_new_contbox {position:relative; width:100%; padding-top:30px;}
.wo_new_contbox ul li {position:relative; float:left; width:30%; margin-right:40px; margin-bottom:30px; font-size:16px; font-weight:300; line-height:150%;}
.wo_new_plc_box {position:relative; width:100%; height:1px;}
.wo_new_plc_pic {position:absolute; width:300px; height:340px; background:url('../img/sub/planch.png') no-repeat 0px 0px; left:500px; top:-200px;}
.wo_col_2 {color:#fff; letter-spacing:normal; font-weight:800; padding-top:20px; display:inline-block;}
.wo_col_3 {padding-top:15px; display:inline-block;}



/* ÅÂºí¸´ CSS */
@media all and (max-width:1600px){
	.ab_vis_1 {position:absolute; width:1285px; height:450px; left:150px; top:160px;}
	.ab_vis_txt_1 {width:100%; top:220px; left:110px; font-size:30px; letter-spacing:-0.5px; text-align:left; line-height:130%;}
	@keyframes ab_2 {
	  0% {
		opacity:0;
		left:110px; 
	  }
	  100% {
		opacity:1;
		left:70px;  
	  }
	}
	
	.ab_vis_txt_2 {width:70%; top:315px; left:150px; font-size:15px; letter-spacing:-0.1px; line-height:140%; color:rgba(255,255,255,.85);}
	@keyframes ab_3 {
	  0% {
		opacity:0;
		left:150px; 
	  }
	  100% {
		opacity:1;
		left:110px;  
	  }
	}
	
	.wo_cont_wrap {margin-bottom:135px;}
	.wo_txt_1 {position:relative; width:70%; font-size:15px; font-weight:300; letter-spacing:normal; padding-bottom:27px; color:rgba(255,255,255,.75);}
	.wo_btbox {border:solid 1px rgba(255,255,255,.15); opacity:1; transition:none;}
	.wo_btbox:hover {opacity:1; border:solid 1px rgba(255,255,255,.15); width:130px;}
	.wo_btbox a {font-size:14px; letter-spacing:normal;}
	.wo_sqa_box {width:calc(100% + 20px); top:-40px; left:-50px;}
	.wo_sqa_act {left:-10px; border:solid 1px rgba(255,255,255,.1);}
	.wo_vis_1 {left:650px; top:-200px; width:450px; height:250px;}
	.wo_vis_act_1 {left:600px;}
	
	.wo_vis_2 {position:absolute; width:540px; height:300px; left:350px; top:-450px;}
	.wo_vis_act_2 {background-size:100% 100%; opacity:1; left:300px;}
	
	.wo_vis_3 {position:absolute; width:500px; height:500px; left:300px; top:-380px;}
	.wo_vis_act_3 {background-size:100% 100%; opacity:1; left:250px;}
	
	.wo_vis_4 {position:absolute; width:330px; height:330px; left:450px; top:-270px;}
	.wo_vis_act_4 {background-size:100% 100%; opacity:1; left:400px;}
	
	.wo_new_contbox ul li {width:calc(50% - 30px); margin-right:30px; margin-bottom:30px; font-size:15px; font-weight:300;}	
	.wo_new_plc_pic {width:220px; height:249px; left:400px; top:-150px; background-size:220px 249px;}
}


/* ¸ð¹ÙÀÏ CSS */
@media all and (max-width:480px){
	.ab_vis_1 {position:absolute; width:1285px; height:450px; left:100px; top:160px;}
	.ab_vis_txt_1 {width:100%; top:220px; left:60px; font-size:22px; letter-spacing:-0.5px; text-align:left; line-height:130%;}
	@keyframes ab_2 {
	  0% {
		opacity:0;
		left:60px; 
	  }
	  100% {
		opacity:1;
		left:20px;  
	  }
	}
	
	.ab_vis_txt_2 {width:70%; top:295px; left:90px; font-size:14px; letter-spacing:-0.1px; line-height:140%; color:rgba(255,255,255,.85);}
	@keyframes ab_3 {
	  0% {
		opacity:0;
		left:90px; 
	  }
	  100% {
		opacity:1;
		left:50px;  
	  }
	}
	
	br.s_br_del {display:none;}
	.work_bg_left {background-position:-120px 0px;}
	.work_bg_left_2 {background-position:-320px 0px;}
	.work_bg_left_3 {background-position:-610px 0px;}
	.work_bg_left_4 {background-position:-520px 0px;}
	.wo_cont_wrap {margin-bottom:125px;}
	.wo_txt_1 {position:relative; width:85%; font-size:14px; font-weight:300; letter-spacing:normal; padding-bottom:27px; color:rgba(255,255,255,.75);}
	.wo_btbox {width:100%; border:solid 1px rgba(255,255,255,.15); opacity:1; transition:none;}
	.wo_btbox:hover {opacity:1; border:solid 1px rgba(255,255,255,.15); width:100%;}
	.wo_btbox a {font-size:14px; letter-spacing:normal;}
	.wo_sqa_box {width:calc(100% + 20px); top:-40px; left:-50px;}
	.wo_sqa_act {left:-10px; border:solid 1px rgba(255,255,255,.1);}
	.wo_vis_1 {position:relative; width:450px; height:250px; left:100px; top:-80px;}
	.wo_vis_act_1 {background-size:100% 100%; opacity:1; left:50px;}
	
	.wo_vis_2 {position:absolute; width:450px; height:250px; left:100px; top:-620px;}
	.wo_vis_act_2 {background-size:100% 100%; opacity:1; left:50px;}
	
	.wo_vis_3 {position:absolute; width:450px; height:450px; left:150px; top:-320px;}
	.wo_vis_act_3 {background-size:100% 100%; opacity:1; left:100px;}
	
	.wo_vis_4 {position:absolute; width:300px; height:300px; left:220px; top:-220px;}
	.wo_vis_act_4 {background-size:100% 100%; opacity:1; left:170px;}
	
	.wo_new_contbox ul li {float:none; width:100%; margin-right:0px; margin-bottom:25px; font-size:14px; font-weight:300;}
	.wo_new_plc_box {position:relative; width:100%; height:226px;}
	.wo_new_plc_pic {width:200px; height:226px; left:0px; top:0px; background-size:200px 226px;}
	
}