@media (max-width:1160px){
    
        
/*메인화면*/
    header{height: 70px;}
    header h1{top: 15px; left:14px;}
    header h1 a{background: url(../images/logo_b.png)center no-repeat;}
    header.header_h .hbox{height:70px;}
    header.header_n .hbox{display: block; top: -23px;}
    header button{top: 9px; right:10px;}
    .hoverlogo,.menu:hover ~ .hoverlogo{display: none;}
    .menu{display: none;} 
    header .menu{left: 0; margin-left: 0; height: auto; width: 100%;}
    header.on .menu{display: block; top: 72px;}
    .on .menusubbg{height: 429px;}
    header.header_n button{background: url(../images/menu_b.png)center no-repeat}
    
header.on .menusubbg, .menu:hover ~ .menusubbg{ top:-33px;
-webkit-animation-name:sumenu; 
     animation-name:sumenu;	
	
     -webkit-animation-iteration-count:1;
     animation-iteration-count:1;
	
    -webkit-animation-duration: 0.3s; 
    animation-duration:0.3s;}
@keyframes sumenu {
0% {top:-270px; opacity:0;}
100% {top:-33px; opacity:1;}
}   

@-webkit-keyframes sumenu {
0% {top:-270px; opacity:0;}
100% {top:-33px; opacity:1;}
} 
  

  header.header_h .hbox{top:0;  box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);opacity:1;
    -webkit-animation-name:down; 
     animation-name:down;	
	
     -webkit-animation-iteration-count:1;
     animation-iteration-count:1;
	
    -webkit-animation-duration: 0.5s; 
    animation-duration:0.5s;}

@keyframes down {
0% {top:0; opacity:1;}
100% {top:0; opacity:1;}
}   

@-webkit-keyframes down {
0% {top:0; opacity:1;}
100% {top:0; opacity:1;}
} 
  
 header.header_n .hbox{ top:-35px;
    -webkit-animation-name:up; 
     animation-name:up;	
	
     -webkit-animation-iteration-count:1;
     animation-iteration-count:1;
	
    -webkit-animation-duration: 0.5s; 
    animation-duration:0.5s;}
@keyframes up {
0% {top:-35px; opacity:1;}
100% {top:-35px; opacity:1;}
}   

@-webkit-keyframes up {
0% {top:-35px; opacity:1;}
100% {top:-35px; opacity:1;}
} 
   
    

    header ul li{width:50%; height: 162px; text-align: center; border-bottom: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; box-sizing: border-box;}  
    header ul li:nth-child(2n){border-right: none;}
    header ul li .menuname{ font-size: 18px; line-height:56px; height:52px;}
    .menu_sub{position: static; padding-top: 0; height: auto; text-align: center;}
    .menu_sub li{height: auto; width: 100%; border-bottom:none; border-right:none;}
    .menu_sub li a{height: 30px; line-height: 30px; }
    
    .main_img_box{position: relative; height:550px;}
    .maintxt{top:118px; height:228px; width:100%;}
    .maintxt p.smtxt{font-size: 20px; line-height: 25px;}
    .maintxt p{font-size:34px; line-height: 40px; top: 38px;}
    
    .mainconten, .mainconten.top50, .mainconten.top100{position: static; margin-top: 0;}
    .scrol{display: none;}
    .yj-slider .yj-pager{ top: auto;  bottom:40px; margin-top: 0;}
    
    
    .project_con{height: 673px;}
    .btn_slide{bottom:30px;}
    .ezgo{right: 20px; font-size: 15px; line-height: 38px; height: 40px; width: 150px; top: 150px;}
    .project_area{padding: 70px 20px;}
    .mainconten h2{font-size: 25px; line-height: 30px}
    .mainconten h2 span:first-child{font-size: 15px; top: 32px; left: 20px;}
    
    .reference_con{height: 264px;}
    .reference_area{padding:70px 20px; height: 264px;}
    .member_con{height: 264px;}
    .member_area{padding:70px 20px;height: 264px;}
    
    
    .reference_num{display: none}
   
    footer{height: 179px;}
    
    /*서브페이지*/
    .subtop{height:375px;}
    .subtop h2{width: 100%; left: 20px; margin-left: 0; font-size: 30px; line-height:35px; bottom: 20px;}
    .subtop h2 span{font-size: 14px;}
    .subtopimg{width: 140px; height:140px; margin-left: -65px; top: 130px;}
    .subtopimg img{width: 100%; margin: 0;}
    .subnavBox{height:40px;}
    .subnav{display: none;}
    .subcontenbox{width: 100%;}
    .dan, .welfarebox .dan{padding:31px 20px;}
    .dan h3{font-size: 21px; float: none; height:60px;}
    .right_conten{float: none; width: 100%;}
    
    /*회사소개*/
    .com1 .bigtxt{font-size: 25px; line-height:30px;}
    .com1 p{font-size: 14px; line-height: 20px;}
    .com1{background:none; }
    .history > li{padding: 20px 0; background: url(../images/com_arrow_off.png)right 32px no-repeat}
    .history .list_on{background: url(../images/com_arrow_on.png)right 32px no-repeat}
    .history .year{font-size:22px; width: 51px; overflow: hidden;}
    .companylist{width: 80%; margin-left: 2%;}
    .mon {width: 48px;}
    .list_detail{width: 81%;}
    .list_detail li{height: auto; line-height: 21px; padding-right: 20px; box-sizing: border-box; font-size: 15px;}
    .com2 img{width:100%;}
    
    /*보유면허*/
    .licens{width: 100%; padding:31px 20px;}
    .licens li{width: 47.5%; margin-right:5%; height: auto; margin-bottom: 40px;}
    .licens li:nth-child(2n){margin-right: 0;}
    .licens li img{width: 100%;}
        
    /*찾아오시는길*/
    .waybox{width: 100%; padding:31px 20px;}
    .waybox img{width: 100%;}
    .waydown p.btxt{font-size: 22px; line-height: 25px;}
    
    /*제품소개*/
    .productbox{width: 100%; padding:31px 0;}
    .prezgo{width:320px; height: 57px; font-size: 15px; line-height: 17px; padding-top: 8px; background: url(../images/pr_arrow.png) 92% 28px no-repeat;}
    .productcon{width: 100%; left: 0; margin-left: 0; height:575px;}
    
    .productconbox li{height:535px;}
    .productconbox .pttxt{width:100%; padding:0 10px; box-sizing: border-box; text-align: left; bottom: 9px;}
    .prtitle{font-size: 25px; line-height: 25px; color: #000;}
    .prinfo{font-size: 14px; line-height: 17px; margin: 10px 0;}
    .productcon a{font-size: 14px; line-height: 20px; height: 25px; float: left;}
    .pc{width:400px; bottom:47px;}
    .diagram{width:80%;}
    .productconbox .prbgbox{right: 0; left: 0; height: 259px;}
    
    /*터널통합관리*/
.pr1 .pc{background: url(../images/pr_pc1.png)center no-repeat; right: auto; background-size:70%;}
.pr1 .diagram{background: url(../images/pr_img1.png)left top no-repeat; left: auto; right: 0; background-size:100%;}
/*영상유고관리*/
.pr2 .pc{background: url(../images/pr_pc2.png)center no-repeat; left: auto;  background-size:70%;}
.pr2 .diagram{background: url(../images/pr_img2.png)right 57px no-repeat; right: 0; background-size:100%;}
/*CCTV관리*/
.pr3 .pc{background: url(../images/pr_pc3.png)center no-repeat; right:auto;  background-size:70%;}
.pr3 .diagram{background: url(../images/pr_img3.png)left top no-repeat; left: auto; right: 0; top: -10px; background-size:100%;}
/*스마트교차로*/
.pr4 .pc{background: url(../images/pr_pc4.png)center no-repeat; left:auto;  background-size:70%;}
.pr4 .diagram{background: url(../images/pr_img4.png)right top no-repeat; right:0; top: 4px; background-size:100%;}
/*ITS*/
.pr5 .pc{background: url(../images/pr_pc5.png)center no-repeat; right: auto;  background-size:70%;}
.pr5 .diagram{background: url(../images/pr_img5.png)left top no-repeat; left: auto; right: 0; top: 0; background-size:100%;}
/*BIS*/
.pr6 .pc{background: url(../images/pr_pc6.png)center no-repeat; left:auto;  background-size:70%;}
.pr6 .diagram{background: url(../images/pr_img6.png)right top no-repeat; right:0; top: 0; background-size:100%;}
    
    
    
    
    
    
    /*고객사*/
    .partnerbox .right_conten li{width:50%;}
    
    /*채용정보*/
    .member{padding:31px 20px 0 20px;}
    .info{font-size: 23px; line-height:30px;}
    .memberinfotop{margin: 31px 0 0 0}
    .memberinfotop li{width: 100%; margin-bottom: 10px; padding:129px 20px 20px 20px; height: 309px;}
    .memberinfotop .mem1{background: url(../images/member_icon1.png)center 20px no-repeat;}
    .memberinfotop .mem2{background: url(../images/member_icon2.png)center 20px no-repeat;}
    .memberinfotop .mem3{background: url(../images/member_icon3.png)center 20px no-repeat;}
    .memberinfotop .txt{font-size: 15px; line-height:20px;}
    .memberstep li{width: 50%; padding-right: 10px; background: url(../images/step_arrow.png)99% 39% no-repeat; margin-bottom: 15px;}
    .memberstep li img{width: 80%;}
    .memberstep li:last-child{padding-right: 10px;}
    .memberstep li p{font-size: 14px; margin-top: 7px; line-height: 18px;}
    
    /*복리후생*/
    .welfare{padding:31px 20px 0 20px;}
    .welfareinfotop{margin: 31px 0 0 0 }
    .welfareinfotop li{width: 49%; margin-right:2%;}
    .welfareinfotop li:nth-child(2n){margin-right: 0;}
    .welfareinfotop li:nth-child(3n){margin-right: 2%;}
    .welfareinfotop li:nth-child(6), .welfareinfotop li:last-child{margin-right:0!important;}
    
    .welfareinfotop li.wel1{background: url(../images/wel1.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel2{background: url(../images/wel2.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel3{background: url(../images/wel3.jpg)center top no-repeat; background-size: 100% 230px; }
.welfareinfotop li.wel4{background: url(../images/wel4.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel5{background: url(../images/wel5.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel6{background: url(../images/wel6.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel7{background: url(../images/wel7.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel8{background: url(../images/wel8.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel9{background: url(../images/wel9.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel10{background: url(../images/wel10.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel11{background: url(../images/wel11.jpg)center top no-repeat; background-size: 100% 230px;}
.welfareinfotop li.wel12{background: url(../images/wel12.jpg)center top no-repeat; background-size: 100% 230px;}
    
    .raontecpicture li{width: 49%; margin-right:2%;}
    .raontecpicture li.raon1{background: url(../images/raon1.jpg)center no-repeat;  background-size: 100% 280px;}
.raontecpicture li.raon2{background: url(../images/raon2.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon3{background: url(../images/raon3.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon4{background: url(../images/raon4.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon5{background: url(../images/raon5.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon6{background: url(../images/raon6.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon7{background: url(../images/raon7.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon8{background: url(../images/raon8.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon9{background: url(../images/raon9.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon10{background: url(../images/raon10.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon11{background: url(../images/raon11.jpg)center no-repeat; background-size: 100% 280px}
.raontecpicture li.raon12{background: url(../images/raon12.jpg)center no-repeat; background-size: 100% 280px}
    
    /*채용문의*/
    .inquirebox{margin: 31px 0 70px 0;}
    .inqubox li{width: 30%; padding-left: 5px; font-size: 15px; height: 47px; line-height: 44px;}
    .inqudan{padding:25px 0 30px 0; }
    .inqudan dd{margin-right: 0; width: 100%;}
    .inqudan .inqucon{margin-top: 29px;}
    .inqudan .inqucon dd{height: 220px;}
    .inqubtn{margin-top: 30px}
    
    
}

@media (max-width:527px){
    /*고객사*/
    .partnerbox .right_conten li{width:100%;}
    /*복리후생*/
    .welfareinfotop li{width:100%; margin-right:0; height: 254px;}
    .welfareinfotop li:nth-child(3n){margin-right: 0;}
        .welfareinfotop li.wel1{background: url(../images/wel1.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel2{background: url(../images/wel2.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel3{background: url(../images/wel3.jpg)center top no-repeat; background-size: 100% 150px; }
.welfareinfotop li.wel4{background: url(../images/wel4.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel5{background: url(../images/wel5.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel6{background: url(../images/wel6.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel7{background: url(../images/wel7.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel8{background: url(../images/wel8.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel9{background: url(../images/wel9.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel10{background: url(../images/wel10.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel11{background: url(../images/wel11.jpg)center top no-repeat; background-size: 100% 150px;}
.welfareinfotop li.wel12{background: url(../images/wel12.jpg)center top no-repeat; background-size: 100% 150px;}

    .welfareinfotop li dl{padding: 20px; height: 97px;}
    .welfareinfotop li dl dt{font-size: 21px; line-height: 20px;}
    .raontecpicture li{width:100%; margin-right:0; height: 200px}
        .raontecpicture li.raon1{background: url(../images/raon1.jpg)center no-repeat;  background-size: 100% 200px;}
.raontecpicture li.raon2{background: url(../images/raon2.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon3{background: url(../images/raon3.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon4{background: url(../images/raon4.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon5{background: url(../images/raon5.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon6{background: url(../images/raon6.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon7{background: url(../images/raon7.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon8{background: url(../images/raon8.jpg)center no-repeat; background-size: 100% 200px}

.raontecpicture li.raon9{background: url(../images/raon9.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon10{background: url(../images/raon10.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon11{background: url(../images/raon11.jpg)center no-repeat; background-size: 100% 200px}
.raontecpicture li.raon12{background: url(../images/raon12.jpg)center no-repeat; background-size: 100% 200px}
}



@media (max-width:523px){
    .diagram{width:100%;}
    .pc{width:100%; bottom:47px;}
        
    /*터널통합관리*/
.pr1 .pc{background: url(../images/pr_pc1.png)center no-repeat; right: auto; background-size:270px;}
/*영상유고관리*/
.pr2 .pc{background: url(../images/pr_pc2.png)center no-repeat; left: auto;  background-size:270px;}
/*CCTV관리*/
.pr3 .pc{background: url(../images/pr_pc3.png)center no-repeat; right:auto;  background-size:270px;}
/*스마트교차로*/
.pr4 .pc{background: url(../images/pr_pc4.png)center no-repeat; left:auto;  background-size:270px;}
/*ITS*/
.pr5 .pc{background: url(../images/pr_pc5.png)center no-repeat; right: auto;  background-size:270px;}
/*BIS*/
.pr6 .pc{background: url(../images/pr_pc6.png)center no-repeat; left:auto;  background-size:270px;}



@media (max-width:499px){
    .productconbox li{height: 495px;}
    .productcon{height:520px; }
    
    /*터널통합관리*/
    .pr1 .pc{background: url(../images/pr_pc1.png)center no-repeat; right: auto; background-size:70%;}
    .pr1 .diagram{background: url(../images/pr_img1.png)left top no-repeat; left: 0; background-size:100%;}
    /*영상유고관리*/
    .pr2 .pc{background: url(../images/pr_pc2.png)center no-repeat; right: auto; background-size:70%;}
    .pr2 .diagram{background: url(../images/pr_img2.png)right 57px no-repeat; right: 0; background-size:100%;}
    /*CCTV관리*/
    .pr3 .pc{background: url(../images/pr_pc3.png)center no-repeat; right: auto; background-size:70%;}
    .pr3 .diagram{background: url(../images/pr_img3.png)left top no-repeat; left: 0; top: -10px; background-size:100%;}
    /*스마트교차로*/
    .pr4 .pc{background: url(../images/pr_pc4.png)center no-repeat; right: auto; background-size:70%;}
    .pr4 .diagram{background: url(../images/pr_img4.png)right top no-repeat; right: 0; top: 4px; background-size:100%;}
    /*ITS*/
    .pr5 .pc{background: url(../images/pr_pc5.png)center no-repeat; right: auto; background-size:70%;}
    .pr5 .diagram{background: url(../images/pr_img5.png)left top no-repeat; left: 0; top: 0; background-size:100%;}
    /*BIS*/
    .pr6 .pc{background: url(../images/pr_pc6.png)center no-repeat; right: auto; background-size:70%;}
    .pr6 .diagram{background: url(../images/pr_img6.png)right top no-repeat; right: 0; top: 0; background-size:100%;}
}