/*intro*/

.subWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:1920px; height:1113px; position:relative;}

.header{width:0%; height:954px; background:#222; float:left;}
.header .headerBg{width:200px; height:954px; background:#222;}
 .logo{opacity:0.9; padding:80px 0;}
 .nav .inner > ul.navMenu{position:relative; z-index:200;}
 .nav .inner > ul.navMenu > li{width:200px; height:60px;  margin-top:0px; text-align:center; color:#fff; position:relative;}
 .nav .inner > ul.navMenu > li:nth-child(1){margin-top:80px;}
 .nav .inner > ul.navMenu > li a{line-height:60px; font-weight:500;}
 .nav .inner > ul.navMenu > li:hover > .navBg{width:200px; height:; background:#fff; left:200px; top:0; position:absolute;}

 .nav .inner > ul > li.mobile{display:none;}
 .gnb .inner > ul > li{width:200px; margin-top:20px; text-align:center; color:#fff;}
 .gnb .inner > ul > li:nth-child(1){margin-top:150px;}

 .nav .inner > ul.navMenu li:hover{background:#fff;}
 .nav .inner > ul.navMenu li:hover a{color:#000;}
 .nav .inner > ul.navMenu > li > ul.navSub{width:240px; height:; background:#fff; display:none;}
 .nav .inner > ul.navMenu > li:hover > ul.navSub{display:block; position:absolute; width:240px; left:200px; top:0px; }
 .nav .inner > ul.navMenu > li:hover > ul.navSub > li{width:200px; border-bottom:1px solid #000; text-align:left; margin-left:20px;}
 .nav .inner > ul.navMenu > li:hover > ul.navSub > li:last-child{border-bottom:0px solid #000;}
 .nav .inner > ul.navMenu > li:hover > ul.navSub a{color:#000;}

 .nav .inner > ul.navMenu > li:hover > ul.navSub > ul.navSub01{}

 .quick{overflow:hidden; }
 .quick .inner01 > ul{width:200px; text-align:center; margin:20px;}
 .quick .inner01 > ul > li{float:left; margin:6px;}

.contWrap{width:1920px; height:954px; border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.contTit{color:#fff; margin-left:300px; position: absolute; margin-right:20%;}
.contTit .menuList{margin-top:100px; }
.contTit h1{margin-top:120px;font-weight:bold; font-size:2.500em;}

.contents{width:1000px; height:954px;  color:#fff;  position: absolute; margin-left:200px;}
.contents .contTxt01{width:500px;  margin:350px auto 0;}
.contents .contTxt02{width:750px;  margin:350px auto 0;}

.contents .contTxt01 h2{font-weight:bold; font-size:1.125em;}
.contents .contTxt01 span{font-weight:bold; font-size:1.125em;}

footer{color:#fff; font-size:0.875em;margin-left:200px; height:159px; padding-top:0;position:absolute;}
footer p:nth-child(1){margin-top:30px; margin-bottom:0px; position:relative;}

/*portfolio*/
.contents .contTxt01 .portfolio{width:900px;}
.contents .contTxt01 .portfolio .portlist > p{font-size:1.250em; margin:15px 0;}
.portlist > ul.portMenu{display:inline-block;}
.portlist > ul.portMenu > li{border:1px solid #fff; margin:5px;width:190px; height:55px; text-align:center; line-height:55px;}
span.port_ov{width:191px; height:200px; background:#fff; display:block; position:absolute; opacity:0; margin-top:-55px;}
span.port_ov > p{color:#000; font-weight:200; font-size:0.813em; line-height:25px; text-align:left; margin:20px;}
ul.portMenu > li:hover > span.port_ov{opacity:1;}

/*vision*/
.contBox01 .contTxt02{padding-top:350px; width:100%;}
.contBox01 .contTxt02 > p{font-size:1.250em; margin:15px 0;}
.contBox01 .contTxt02 > img{width::100%; height:100%;}
/*ci*/
.ciBox{margin-bottom:20px;}
.ciBox p.ciTit{margin:20px;}
.ciBox > ul > li{float:left; margin:20px;}
.ciBox > ul > li.symbTxt{width:333px; height:201px; font-size:0.875em;}
.ciBox > ul > li.symbTxt > p{margin-bottom:30px;}
.ciBox > ul > li.symbTxt div > ul{display: inline-block;}
.ciBox > ul > li.symbTxt div > ul > li{float:left;}
.ciBox > ul > li.symbTxt div > ul > li img{margin-right:10px;}

/*contact*/
.contactWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:100%; height:1113px;}
.contactBoxWrap{width:500px; height:250px;}
.contTxt01 .contactBox{float:left; margin:20px 60px 20px 0; text-align: center;}
.contTxt01 .contactBox ul li > img{margin-bottom:30px;}
.contTxt01 .loc p.locTit{font-weight:bold; position:relative;}
.contTxt01 .loc > img{margin:20px 0; width:100%; height:100%;}

















/*가로 폭이 320px 이상이고 768px 이하일 때*/
@media screen and (min-width:321px) and (max-width:768px){
    .subWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:100%; height:900px;position:relative;}
    .header{width:0%; height:954px; background:#222; float:left;}
    .header .headerBg{width:200px; height:954px; background:#222;}
     .logo{opacity:0.9; padding:80px 0;}
     .nav .inner > ul.navMenu > li{width:200px; height:60px;  margin-top:0px; text-align:center; color:#fff; position:relative;}
     .nav .inner > ul.navMenu > li:nth-child(1){margin-top:80px;}
     .nav .inner > ul.navMenu > li a{line-height:60px; font-weight:500;}
     .nav .inner > ul.navMenu > li:hover > .navBg{width:200px; height:; background:#fff; left:200px; top:0; position:absolute;}
     .nav .inner > ul > li.mobile{display:none;}
     .gnb .inner > ul > li{width:200px; margin-top:20px; text-align:center; color:#fff;}
     .gnb .inner > ul > li:nth-child(1){margin-top:150px;}
     .nav .inner > ul.navMenu li:hover{background:#fff;}
     .nav .inner > ul.navMenu li:hover a{color:#000;}
     .nav .inner > ul.navMenu > li > ul.navSub{width:240px; height:; background:#fff; display:none;}
     .nav .inner > ul.navMenu > li:hover > ul.navSub{display:block; position:absolute; width:240px; left:200px; top:0px; }
     .nav .inner > ul.navMenu > li:hover > ul.navSub > li{width:200px; border-bottom:1px solid #000; text-align:left; margin-left:20px;}
     .nav .inner > ul.navMenu > li:hover > ul.navSub > li:last-child{border-bottom:0px solid #000;}
     .nav .inner > ul.navMenu > li:hover > ul.navSub a{color:#000;}
     .quick{overflow:hidden;}
     .quick .inner01 > ul{width:200px; text-align:center; margin:20px;}
     .quick .inner01 > ul > li{float:left; margin:6px;}
    
    
    .contWrap{width:1920px; height:554px; border-bottom:1px solid rgba(255, 255, 255, 0.3);}
    .contTit{color:#fff; margin-left:0px; position: absolute; margin-right:20%; padding-left:30px;}
    .contTit .menuList{margin-top:100px; }
    .contTit h1{margin-top:120px;font-weight:bold; font-size:2.500em;}
    .contents{width:100%; height:954px; border-bottom:1px solid rgba(255, 255, 255, 0.3); color:#fff;  position: absolute; margin-left:00px; padding-left:30px;}
    .contents .contTxt01{width:100%;  margin:350px auto 0;}
    .contents .contTxt01 h2{font-weight:bold; font-size:1.125em;}
    .contents .contTxt01 span{font-weight:bold; font-size:1.125em;}
    footer{color:#fff; font-size:0.875em;margin-left:30px; height:0px; padding-top:0; position:absolute;}
    footer p:nth-child(1){margin-top:980px; margin-bottom:0px; position:relative;}    
    /*contact*/
/*
    
.contactWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:100%; height:1200px;}
    .contTxt01{width:768px; }
    .contactBoxWrap{width:768px; height:10px;}
.contTxt01 .contactBox{float:left; margin:20px 60px 20px 0; text-align: center;}
.contTxt01 .contactBox ul li > img{margin-bottom:30px;}
    
    .contTxt01 .loc{margin-top:500px;}
.contTxt01 .loc p.locTit{font-weight:bold; position:relative; float:none;}
.contTxt01 .loc > img{margin:20px 0; width:100%; height:100%;}
*/
    
    
/*
    .contactWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:100%; height:1500px;}
    .contactWrap .contents{width:100%; height:1350px; border-bottom:1px solid rgba(255, 255, 255, 0.3); color:#fff; position:relative; margin-left:0px;}
    .contBox01 .contTxt01 .contactBox{float:none; margin:0; text-align: center;}
    .contBox01 .contTxt01 .contactBox ul li > img{margin-bottom:10px;}
    .contBox01 .contTxt01 .contactBox ul li > p{margin-bottom:10px;}
    .contBox01 .contTxt01 .loc p.locTit{font-weight:bold;}
    .contBox01 .contTxt01 .loc > img{margin:20px 0; width:100%; height:100%;}
*/
    
}
/*가로 폭이 320px 이하일 때*/
@media screen and (max-width:320px){
    /*intro 320px*/.subWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:100%; height:1113px;position:relative;}
    .header{width:0%; height:954px; background:#222; float:left;}
    .header .headerBg{width:0px; height:0px; background:#222;}
     .logo{opacity:0.9; padding:80px 0;}
     .nav .inner > ul.navMenu > li{width:200px; height:60px;  margin-top:0px; text-align:center; color:#fff; position:relative;}
     .nav .inner > ul.navMenu > li:nth-child(1){margin-top:80px;}
     .nav .inner > ul.navMenu > li a{line-height:60px; font-weight:500;}
     .nav .inner > ul.navMenu > li:hover > .navBg{width:200px; height:; background:#fff; left:200px; top:0; position:absolute;}

     .nav .inner > ul > li.mobile{display:none;}
     .gnb .inner > ul > li{width:200px; margin-top:20px; text-align:center; color:#fff;}
     .gnb .inner > ul > li:nth-child(1){margin-top:150px;}

     .nav .inner > ul.navMenu li:hover{background:#fff;}
     .nav .inner > ul.navMenu li:hover a{color:#000;}
     .nav .inner > ul.navMenu > li > ul.navSub{width:240px; height:; background:#fff; display:none;}
     .nav .inner > ul.navMenu > li:hover > ul.navSub{display:block; position:absolute; width:240px; left:200px; top:0px; }
     .nav .inner > ul.navMenu > li:hover > ul.navSub > li{width:200px; border-bottom:1px solid #000; text-align:left; margin-left:20px;}
     .nav .inner > ul.navMenu > li:hover > ul.navSub > li:last-child{border-bottom:0px solid #000;}
     .nav .inner > ul.navMenu > li:hover > ul.navSub a{color:#000;}

     .nav .inner > ul.navMenu > li:hover > ul.navSub > ul.navSub01{}

     .quick{overflow:hidden;}
     .quick .inner01 > ul{width:200px; text-align:center; margin:20px;}
     .quick .inner01 > ul > li{float:left; margin:6px;}


    .contTit{color:#fff; margin-left:0px; position: absolute; margin-right:20%; padding-left:30px;}
    .contTit .menuList{margin-top:100px; }
    .contTit h1{margin-top:120px;font-weight:bold; font-size:2.500em;}

    .contents{width:100%; height:954px; border-bottom:1px solid rgba(255, 255, 255, 0.3); color:#fff;  position: absolute; margin-left:00px; padding-left:30px;}
    .contents .contTxt01{width:100%;  margin:350px auto 0;}

    .contents .contTxt01 h2{font-weight:bold; font-size:1.125em;}
    .contents .contTxt01 span{font-weight:bold; font-size:1.125em;}
    
    footer{color:#fff; font-size:0.875em;margin-left:30px; height:0px; padding-top:0; position:absolute;}
    footer p:nth-child(1){margin-top:980px; margin-bottom:0px; position:relative;}
    /*contact*/
    .contactWrap{background-image:url(../Images/Company/subwrap.jpg); background-repeat:no-repeat; background-attachment:fixed; width:100%; height:1400px;}
    
    .contactWrap .contents{width:100%; height:1200px; border-bottom:1px solid rgba(255, 255, 255, 0.3); color:#fff; position:relative; margin-left:0px;}
    .contBox01 .contTxt01 .contactBox{float:none; margin:0; text-align: center;}
    .contBox01 .contTxt01 .contactBox ul li > img{margin-bottom:10px;}
    .contBox01 .contTxt01 .contactBox ul li > p{margin-bottom:10px;}
    .contBox01 .contTxt01 .loc p.locTit{font-weight:bold;}
    .contBox01 .contTxt01 .loc > img{margin:20px 0; width:100%; height:100%;}
    
}