@charset 'utf-8';


@keyframes gnbOpenGround {
    0% { background: #00000000; }
    100% { background: #00000066; }
}
@keyframes gnbOpen {
    0% { right:-300px; }
    100% { right:0; }
}
@keyframes asideOpen {
    0% { left:-280px; }
    100% { left:0; }
}

/*@media (max-width:1480px) {*/
/*	div#contents.home div.sectors div.sector div.title {margin-bottom:10px;font-size:1.25em;}*/
/*	div#contents.home div.sector.news { width:30%; }*/
/*	div#contents.home div.sector.news div.list a span.subject  {font-size:1.05em;}*/
/*	div#contents.home div.sector.contact { width:67%; }*/
/*	div#contents.home div.sector.contact ul { width:60%; }*/
/*	div#contents.home div.sector.contact li {font-size:1.05em;}*/
/*	div#contents.home div.sector.contact div.map {width:40%;}*/
/* 	div#product div.list ul a span.cate, div#product div.list ul a span.info {display:block;}*/
/* 	div#product div.list ul a span.cate {margin-bottom:7px;border:none;}*/
/*	#prodDetail div.header div.summary div.title {font-size:2.8em;}*/
/*}*/
@media (max-width: 1390px) {
#visual { position:relative;  width:100%; height:771px; background: url('../images/bgExtra.svg') no-repeat; background-size:cover }
#visual div.innerWrap div { display:block; }
#visual div.hiddenImg { display:none }
}

@media (max-width: 1199px) {
#visual { position:relative;  width:100%; height:auto; background: none }
#visual div.innerWrap div { display:none; }
#visual div.hiddenImg { display:block;   }
#visual div.hiddenImg table { background: url('../images/bg.svg') no-repeat; background-size:cover }
}

@media (max-width: 1199px) {

	#header div#gnb div.navi ul.navi li.product div.child ul.navi { display:block; margin-left:0px}
	#header div#gnb div.navi ul.navi li.product div.child ul.navi li{ float:none !important;}
	#contents div.innerWrap div.aside{ display:none;  }
	#contents div.innerWrap div.content { width:100% }


    div.innerWrap { width: 100%; padding:0 0.5em; min-width: auto; }
    #wrap { min-width: 320px; }
    #header { position: sticky; top: 0; height:5.5em; background: #FFF; }
    #wrap.home #header { position: sticky; }
    #header:hover::after { display: none; }
	
	#header div.headerTop  h1 { display:inline-block; margin-right:-5px; width:49.5% }
    #header div.innerWrap { min-width:auto; }
	#header div.headerTop div.topRight { display:inline-block;  vertical-align: top;  margin-right:-5px; width:49.5%; text-align:right } 
	#header div.headerTop div.topRight div.search { display: none; }
	#header div.headerTop div.topRight div.hembugger { display:inline-block; width:38px; vertical-align: top; margin:12px 0 0}
    
	
	#header div#gnb div.navi{ display: none; }
	#header div#gnb { display: none;   }
	#header div#gnb div.navi { display: none;  }
	#header.active div#gnb { display:block;  }
    #header.active div#gnb div.navi { display:block; position: fixed; right:0; top:4em; width:100%; height:calc(100% - 4em); background: #00000066; animation: gnbOpenGround 0.3s; }
    #header.active div#gnb div.navi ul.navi { width:auto; display: block; overflow-y:auto; padding-bottom: 1em; }
    #header.active div#gnb div.navi > ul.navi { background: #FFF; position: absolute; right:0; top:0; padding-top:20px; padding-bottom:2em;  min-width:250px; animation: gnbOpen 0.3s;}
    #header.active div#gnb div.navi ul.navi.depth1 > li { padding:0.5em 0; }
    #header.active div#gnb div.navi ul.navi li a::after { display:none; }
    #header.active div#gnb div.navi ul.navi a { padding:0 1em; }
    #header.active div#gnb div.navi ul.navi div.child { display: block; position: relative; padding-left:1em; font-size:0.9em; top:auto; left:auto; background: none;}
    #header.active div#gnb div.navi ul.navi li:hover div.child { position: relative; animation: none; }
    #header.active div#gnb div.navi ul.navi div.child ul { border:0; }
	#header.active div#gnb div.navi ul.navi div.child ul.navi li { padding:0 0.25em;  }
    #header.active div#gnb div.navi ul.navi div.child ul.navi a { padding:0.5em 0; transition: 0.3s;  }
    #header.active div#gnb div.navi ul.navi div.child li a::before { content:'-'; margin-right:7px; }
	#header.active div#gnb div.navi ul.navi div.child li a.selected,
	#header.active div#gnb div.navi ul.navi div.child li a:hover { padding-left:0.75em; color:#FFF; transition: 0.3s;  }
    #header.active div.control button#gnbSwitch { display:block; }
	#header.active div#gnb div.navi ul.navi a:hover span {color:#26688d} 
	#header.active div#gnb div.navi ul.navi.depth1 > li > a.selected { font-weight:600; color:#26688d;}

	#visualSub { max-height:403px; min-height:200px;  height:auto; background: url('../images/subVisual01.png') no-repeat; background-size:cover; display: flex; align-items: center; justify-content: flex-end;   }
	
	#header.active div#gnb div.navi ul.navi li { display: block; padding:0 0px; line-height:35px; position:relative;  }
	#header.active div#gnb div.navi ul.navi li a { height:100%; overflow:hidden; position: relative; color:#333; font-weight:bold }

	#header.active div#gnb div.navi ul.navi div.child ul.naviSub { width:100%; font-weight: 300; font-size:1em;  background: none;  padding:0 10px; Border-radius:5px;  }
	#header.active div#gnb div.navi ul.navi div.child ul.naviSub li { padding:0 0; display:block; width:100%; border-top:1px solid #e5e5e5; text-align:left; line-height:40px;  }
		#header.active div#gnb div.navi ul.navi div.child ul.naviSub li a { font-weight:normal; font-size:1em; color:#333 }

	#header.active div.headerTop div.topRight  div.control button#gnbSwitch .bar.bar1 {top:25px;transform:rotate(45deg);}
	#header.active div.headerTop div.topRight  div.control button#gnbSwitch .bar.bar2 {opacity:0;}
	#header.active div.headerTop div.topRight  div.control button#gnbSwitch .bar.bar3 {top:25px;transform:rotate(-45deg);}


	 #contents div.innerWrap div.content div.certificate ul li{ display:inline-block; margin-right:-5px; width:32%; margin-bottom:65px; margin-left:2%; }
	 #contents div.innerWrap div.content div.certificate ul li a span.thumb { display: flex; align-items: center; justify-content: center; width:100%; height:auto; border:1px solid #e5e5e5; border-radius: 5px; }

	#contents div.innerWrap div.content div.list ul li{ display:inline-block; margin-right:-5px; width:32%; margin-bottom:65px; margin-left:2%; }
	#contents div.innerWrap div.content div.list ul li a span.thumb { display: flex; align-items: center; justify-content: center; width:100%; max-height:264px; border:1px solid #e5e5e5; border-radius: 5px; transition: all 0.8s ease; }
	
	#contents div.innerWrap div.content div.gallery ul li{ display:inline-block; margin-right:-5px; width:32%; margin-bottom:65px; margin-left:2%; }
	#contents div.innerWrap div.content div.gallery ul li a span.thumb { display: flex; align-items: center; justify-content: center; width:100%; max-height:264px; border:1px solid #e5e5e5; border-radius: 5px;  }

	#contents div.innerWrap div.content div.greetings { width:100%; }  
	#contents div.innerWrap div.content div.greetings img { width:100% }
	#aside { display: none; }

	#steel{ display:block;  width:100%; }
	#steel div.content { border:1px solid #e5e5e5; border-radius: 5px; padding:2% }
	#steel div.content div.thumb {width:100%; text-align:center }
	#steel div.content div.desc { width:100%;  }
	#steel div.content div.desc table thead tr td:nth-child(1){ width:95%;}
	#steel div.content div.desc table thead tr td:nth-child(1) span { width:98% }
	#steel div.content div.desc table thead tr td:nth-child(2){ width:5%;  }

	#icon { width:100%; display:block;  vertical-align: top; margin-top:30px }
	#icon div{ display:inline-block;  vertical-align: top;  width:32%; max-height:165px;  }
	#icon div a { display:block; width:100%; height:100%; border-radius: 5px; text-align:center; padding-top:110px; }
	#icon div a span { display:block;  color:#fff; font-size:18px; font-weight:bold }
	#icon div.youtube { margin:0px 0 0 0px }
	#icon div.youtube a{ background: url('../images/youtub.png') center 30px no-repeat #FF0000;  transition: all 0.8s ease;}
	#icon div.pds {  margin:0px 0 0 1% }
	#icon div.pds a{ background: url('../images/server-solid.svg') center 30px no-repeat #39AEE5; transition: all 0.8s ease; }
	#icon div.estimate { margin:0px 0 0 1% }
	#icon div.estimate a{ background: url('../images/clipboard-regular.svg') center 30px no-repeat #EA7B41;  transition: all 0.8s ease;}


    div#contents.home div#visual { height: auto; padding:2em 0;  }
    div#contents.home div#visual div.parts a { width:114px; height:114px; }
    div#contents.home div#visual div.parts a span.title { padding-top:1em; }
    div#contents.home div#visual div.parts a span.thumb { padding-bottom:1em; }

	#veyor div.innerWrap ul li{ display:inline-block;  width:23.75%; margin-left:1.6%; margin-right:-0.4%  }
	#veyor div.innerWrap ul li a span.thumb { display: flex; align-items: center; justify-content: flex-end; border:1px solid #e5e5e5; width:100%; max-height:208px; text-align:center; border-radius: 5px; transition: all 0.8s ease; }
	#Almight div.innerWrap ul li{ display:inline-block;  width:23.75%; margin-left:1.6%; margin-right:-0.4%; border:1px solid #e5e5e5; border-radius: 5px; background:#fff  }
	#Almight div.innerWrap ul li a span.thumb { display: flex; align-items: center; justify-content: center;  width:100%; height:260px; text-align:center;  }

    #contents div.visual.sub div.innerWrap { flex-direction: column; padding:0 1em; }
    #contents div.visual.sub div.title { flex-direction: row; align-items: center; font-size:0.9em; flex-wrap: wrap; }
    #contents div.visual.sub div.title span.title { margin:0 0.5em; }
    #contents div.visual.sub div.brands { width:auto; }
    #contents div.visual.sub div.brands div.brand { justify-content: center; }
    #contents div.visual.sub div.brands div.brand span { padding:0 1em; max-width: initial; }
	

    #prodDetail div.summary div.info { width:calc(100% - 340px - 20px); }

    div#content.prod.design div.chart { overflow-x: auto; position: relative; }
    div#content.prod.design div.chart::before { content:'좌우로 드래그하여 표의 숨겨진 부분을 확인하세요'; display: block; position: sticky; left:0; text-align: right; font-size:0.8em; color:#999;}
    div#content.prod.design div.chart table { min-width: 1024px; }

	#contents div.innerWrap div.content div.detail div.view{ display:inline-block; width:37%; vertical-align: top; margin-right:25px }
	#contents div.innerWrap div.content div.detail div.info { display:inline-block; width:60%; vertical-align: top; margin-right:-5px; border-top:1px solid #707070 }
	#contents div.innerWrap div.content div.detail div.view div.small div a span { width:129px; height:84px; border:1px solid #e5e5e5;  display: flex; align-items: center; justify-content: center; border-radius: 5px; }
}

@media (max-width: 900px) {
    img { height:auto !important;}

    div.tableSet { overflow-x: auto; position: relative; }
    div.tableSet::before { content:'좌우로 드래그하여 표의 숨겨진 부분을 확인하세요'; display: block; position: sticky; left:0; text-align: right; font-size:0.8em; color:#999;}
    div.tableSet table { min-width: 1024px; }

    div#contents.home div#visual div.parts a { width:110px; height:110px; }

    div#contents.home div.sector.products div.panels div.panel { display: block; }
    div#contents.home div.sector.products div.panels div.panel div.header { width:auto; padding-top:1em; align-items: center; }
    div#contents.home div.sector.products div.panels div.panel div.content { width:auto; padding:0 1em ; }
}

@media (max-width: 877px) {
#contents div.innerWrap div.content div.vision ul li div.thumb { width:100%; height:auto; border-radius: 5px;  }
#contents div.innerWrap div.content div.vision ul li div.desc { width:100%;  vertical-align: top; margin-left:0px; color:#999 }
}

@media (max-width: 1098px) {
#contents div.innerWrap div.content div.detail div.view{ display:inline-block; width:100%; vertical-align: top; margin-right:0px }
#contents div.innerWrap div.content div.detail div.info { display:inline-block; width:100%; vertical-align: top; margin-right:-5px; border-top:1px solid #707070 }
#contents div.innerWrap div.content div.detail div.view div.small { margin-top:10px; margin:10px auto 30px; text-align:center; }
#contents div.innerWrap div.content div.detail section article { overflow-x: scroll}
}


@media (max-width: 820px) {
#contents div.innerWrap div.content div.history { min-height:500px; background:none }
#contents div.innerWrap div.content div.history ul { width:100% }
}


@media (max-width: 749px) {
   	#veyor div.innerWrap ul li{ display:inline-block;  width:46.9%; margin-bottom:65px; margin-left:3%; }
	#veyor div.innerWrap ul li a span.thumb { display: flex; align-items: center; justify-content: flex-end; border:1px solid #e5e5e5; width:100%; max-height:208px; text-align:center; border-radius: 5px; transition: all 0.8s ease; }
	#veyor div.innerWrap ul li:nth-child(odd) { margin-left:0%;  }
	#veyor div.innerWrap ul li:nth-child(even) {margin-left:3%; }
	#Almight div.innerWrap ul li{ display:inline-block; width:46.9%; margin-bottom:65px; margin-left:3%; border:1px solid #e5e5e5; border-radius: 5px; background:#fff  }
	#Almight div.innerWrap ul li a span.thumb { display: flex; align-items: center; justify-content: center;  width:100%; height:100px; text-align:center;  }
	#Almight div.innerWrap ul li:nth-child(odd) { margin-left:0%;  }
	#Almight div.innerWrap ul li:nth-child(even) {margin-left:3%; }
}

@media (max-width: 655px) {
	#contents div.innerWrap div.content div.list dl dt:nth-child(4) { display:none }
	#contents div.innerWrap div.content div.list dl dd:nth-child(4) { display:none }
	#contents div.innerWrap div.content div.list dl dt:nth-child(2) { width:77%;  text-align:center }
	#contents div.innerWrap div.content div.list dl dd:nth-child(2) { width:77%;  text-align:left }
}


@media (max-width: 648px) {
	#contents div.innerWrap div.content div.category { text-align:left; margin-bottom:30px  }
	#contents div.innerWrap div.content div.category a { display:inline-block; width:48%; border:1px solid #e5e5e5; padding:15px 0px; margin-right:5px; border-radius: 5px; margin-bottom:10px; text-align:center }
	#contents div.innerWrap div.content div.title { display:block; width:100%;  font-size:1.8em; font-weight:bold; text-align:center; margin-bottom:20px;  }
}

@media (max-width: 550px) {
#contents div.innerWrap div.content div.history ul li span.desc { display:block; margin-left:0px; margin-top:10px;  line-height:24px; }
#contents div.innerWrap div.content div.certificate ul li{ display:inline-block; margin-right:-5px; width:46.9%; margin-bottom:65px; margin-left:3%; }
#contents div.innerWrap div.content div.certificate ul li a span.thumb { display: flex; align-items: center; justify-content: center; width:100%; height:auto; border:1px solid #e5e5e5; border-radius: 5px; }
#contents div.innerWrap div.content div.certificate ul li:nth-child(odd) { margin-left:0%;  }
#contents div.innerWrap div.content div.certificate ul li:nth-child(even) {margin-left:3%; }

#contents div.innerWrap div.content div.list ul li{ display:inline-block; margin-right:-5px; width:46.9%; margin-bottom:65px; margin-left:3%; }
#contents div.innerWrap div.content div.list ul li a span.thumb { display: flex; align-items: center; justify-content: center; width:100%; max-height:264px; border:1px solid #e5e5e5; border-radius: 5px;  }
#contents div.innerWrap div.content div.list ul li:nth-child(odd) { margin-left:0%;  }
#contents div.innerWrap div.content div.list ul li:nth-child(even) {margin-left:3%; }

#contents div.innerWrap div.content div.gallery ul li{ display:inline-block; margin-right:-5px; width:46.9%; margin-bottom:65px; margin-left:3%; }
#contents div.innerWrap div.content div.gallery ul li a span.thumb { display: flex; align-items: center; justify-content: center; width:100%; max-height:264px; border:1px solid #e5e5e5; border-radius: 5px;  }
#contents div.innerWrap div.content div.gallery ul li:nth-child(odd) { margin-left:0%;  }
#contents div.innerWrap div.content div.gallery ul li:nth-child(even) {margin-left:3%; }

#visualSub div.innerWrap div span { font-size:2em; font-weight:bold;  color:#fff }
#veyor div.innerWrap div.title{ display:block; font-size:1.6em; font-weight:bold; letter-spacing:-0.02em; text-align:center; transition: all 0.8s ease; }
#Almight div.innerWrap div.title{ display:block; font-size:1.6em; font-weight:bold; letter-spacing:-0.02em; text-align:center; color:#fff; transition: all 0.8s ease;  }
#steel div.title{ display:block; font-size:1.6em; font-weight:bold; letter-spacing:-0.02em; text-align:center;  transition: all 0.8s ease; }
#footer div.footerMenu  { background:#EEEEEE; text-align:center; height:80px }
#footer div.footerMenu div.innerWrap a { display:inline-block; line-height:auto; margin-right:5px; text-align:center; }

#footer div.innerWrap div.customer{ display:block; clear:both; font-size:1.5em;  font-weight:bold; margin-top:20px  }
#footer div.innerWrap div.customer span { display:block; font-size:0.6em; font-weight:normal; margin:10px 0  10px }
#footer div.innerWrap div.info { font-size:14px; color:#999 }
#footer div.innerWrap div.info span { display:inline-block; margin-right:15px; margin-bottom:10px }
#footer div.footerMenu div.innerWrap a span { font-size:14px; color:#333; }
#footer div.footerMenu  { background:#EEEEEE; height:auto; min-height:100px;  }
#footer div.footerMenu div.innerWrap div.iconArea { display:block; clear:both;  width:100%; float:none; margin-top:0px; margin-bottom:0px }
#footer div.innerWrap div.copyright { display:block; font-size:14px; color:#999; margin-top:20px; padding-bottom:20px  }
}

@media (max-width: 516px) {
	#contents div.innerWrap div.content div.inquiry ul li{ display:block; border-bottom:1px solid #e5e5e5; line-height:33px; padding:10px 0}
	#contents div.innerWrap div.content div.inquiry ul li span.title{ width:100%; display:block; margin-right:-0px;  padding-left:20px;  vertical-align: top; }
	#contents div.innerWrap div.content div.inquiry ul li span.value{ width:100%; display:block; margin-right:0px;  padding: 0 20px 0 20px  }
	#contents div.innerWrap div.content div.inquiry ul li span.value input { width:100% !important;  }
	h1 img { min-height:55px; width:100% }
}


@media (max-width: 420px) {
    #icon { width:100%; display:block;  vertical-align: top; margin-top:30px }
	#icon div{ display:inline-block;  vertical-align: top;  width:100%; max-height:60px;  }
	#icon div a { display:block; width:100%; height:100%; border-radius: 5px; text-align:center; padding-top:20px; }
	#icon div a span { display:block;  color:#fff; font-size:18px; font-weight:bold }
	#icon div.youtube { margin:0px 0 0 0px }
	#icon div.youtube a{ background: url('../images/youtub.svg') 30px 18px no-repeat #FF0000; background-size:12%}
	#icon div.pds {  margin:10px 0 0 0% }
	#icon div.pds a{ background: url('../images/server-solid.svg') 28px 14px no-repeat #39AEE5; background-size:12%}
	#icon div.estimate { margin:10px 0 0 0% }
	#icon div.estimate a{ background: url('../images/clipboard-regular.svg') 36px 6px no-repeat #EA7B41; background-size:9%}

}

@media (max-width: 416px) {
   #contents div.innerWrap div.content div.detail div.view div.small div { width:31%; display:inline-block; margin-right:5px; vertical-align: top; }
   #contents div.innerWrap div.content div.detail div.view div.small div a span { width:100%; height:84px; border:1px solid #e5e5e5;  display: flex; align-items: center; justify-content: center; border-radius: 5px; }
}

@media (max-width: 400px) {
   #contents div.innerWrap div.content div.detail div.view div.small div { width:31%; display:inline-block; margin-right:5px; vertical-align: top; }
   #contents div.innerWrap div.content div.detail div.view div.small div a span { width:100%; height:84px; border:1px solid #e5e5e5;  display: flex; align-items: center; justify-content: center; border-radius: 5px; }
}

@media (max-width: 365px) {
	#contents div.innerWrap div.content div.category { text-align:left; margin-bottom:30px  }
	#contents div.innerWrap div.content div.category a { display:block; width:100%; border:1px solid #e5e5e5; padding:15px 0px; margin-right:0px; border-radius: 5px; margin-bottom:10px; text-align:center }
}

@media (max-width: 360px) {
    
	#visualSub { max-height:403px; min-height:100px;  height:auto; background: url('../images/subVisual01.png') no-repeat; background-size:cover; display: flex; align-items: center; justify-content: flex-end;   }
    #contents div.visual.sub div.title { font-size:0.7em; }

    div#product div.list ul a span.thumb { height:150px; }
	div#product div.gallery ul a span.thumb { height:150px; }
}