@media (max-width:800px) { /* 모바일용 */
.pc { display: none !important; }
.wrap { width: 94%; }

:root {
    --title1 : 24px; 
    --title2 : 20px; 
}    
    
/* header & footer */
#w_header { height: 60px; }
#w_header.on { height: 100vh; }
#w_header .wrap { width: 94%; }
#w_header h1 { padding-top: 15px; }
#w_header #w_gnb { position: static; text-align: center; margin:60px auto 0; width: 260px; }
#w_header #w_gnb > li { font-size:22px; float:none; margin-left: 0; border-bottom:1px solid #ddd;  }
#w_header #w_gnb > li:last-child { border-bottom: none; }
#w_header #w_gnb > li > a { padding: 0; }
#w_header #w_gnb > li.select > a:after { display: none; }
#w_header #w_gnb ul { position: static; line-height:40px; font-size:18px; display: none; padding-top: 0; }    
#w_header #w_gnb ul li { border-top:1px dotted #ddd;   }    
#w_header.fix #nav_btn .line, #w_header.on #nav_btn .line { background: #fff; }
    
#nav_btn { position:absolute; right:0; top:12px; }
#nav_btn .line{  width: 30px; height: 2px; background-color: #fff; display: block; margin: 8px auto; transition: all 0.3s; }
#w_header.index #nav_btn .line{ background-color:#333; }
#w_header.fix #nav_btn .line{ background-color:#fff; }
#nav_btn:hover{ cursor: pointer;}
#nav_btn.act .line:nth-child(2){ opacity: 0;}
#nav_btn.act .line:nth-child(1){ transform: translateY(10px) rotate(45deg);}
#nav_btn.act .line:nth-child(3){ transform: translateY(-10px) rotate(-45deg);} 

#w_footer { padding:40px 0; font:13px/2 str;  }
#w_footer img { height: 24px; margin-bottom: 20px; }
#w_footer address { margin-bottom: 20px;  }
    
    
/* index */
#main { background:url(/images/m_main1.jpg) no-repeat center/cover; }
#main .fl { height: 400px; justify-content: center; text-align: center; position: relative; width: 100%; }
#main .fl:before { content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); }
#main dl { padding-bottom: 0; color:#fff; position: relative; z-index: 1; text-shadow: 2px 2px 2px rgba(0,0,0,0.7); }
#main dl dt { font-size:28px; }
#main dl dd { margin-top: 20px; font-size:16px; }    
    
#slo { padding:80px 0; text-align: center; }
#slo h2 { float:none; width: auto; }    
#slo p { float:none; width: auto; font-size:14px; line-height:1.6; margin-top: 20px; }   
    
#a_prd { margin-bottom:100px;  }
#a_prd article { width:auto; height: auto; margin:0 0 10px 0; float:none; padding:20px; }
#a_prd article:before { transition: none; z-index: -1; }
#a_prd article:hover:before { transform: scale(1); }
#a_prd article h2 { font-size:24px; }
#a_prd article p { font-size:16px; margin-top: 20px; word-break: keep-all; }
#a_prd article img { transform: scale(0.5); transform-origin: 0 0;  }
#a_prd article dl { position: static; }
#a_prd article dl dt { font-size:20px; }
#a_prd article dl dd { font-size:14px; margin-top: 10px; }
#a_prd article a { display: block; position: static; transition: none; margin-top: 10px; font-size:12px;  }
#a_prd article:hover a { background: #fff; color:var(--color); }

#ment { padding:80px 3%; margin-top: 20px; }
#ment img { height: 40px; }
#ment p { font-size:14px; margin-top: 30px; word-break: keep-all; }    
    
#kind { padding:80px 0; }
#kind p { font-size:14px; }
#kind ul { margin-top: 40px; }
#kind ul li { width: 48.5%; margin:0 3% 3vw 0;  }
#kind ul li:nth-child(2n) { margin-right: 0; }
#kind ul li:nth-child(2n+1) { clear:both; }
#kind ul li a { padding:20px 0 30px; }
#kind ul li figure { transform: scale(0.6); }
#kind ul li strong { font-size:16px; margin-top: 0px; }    
    
#contact { padding:80px 0; }
#contact article { width: auto; float:none; }
#contact .con strong { font-size:20px; margin-bottom: 30px; }
#contact .con ul li { font:13px/1.6 str; padding-left: 50px; word-break: keep-all; }
#contact .inq { margin-top: 80px; }
#contact .inq h2 { padding-left: 0px; }
#contact .inq table th { padding:10px; font-size:13px;  } 
#contact .inq table th:first-child { padding-left:0; } 
#contact .inq table th:last-child { padding-right:0; } 
#contact .inq table td { padding:0 10px}
#contact .inq table td:first-child { padding-left:0}
#contact .inq table td:last-child { padding-right:0}
#contact .inq table input[type=text], #contact .inq table textarea {border-radius: 14px; font-size:13px;  } 
#contact .inq table tr:last-child td { text-align: center; }
#contact .inq table td input[type=submit] { border-radius: 14px; font-size:13px; }    
    
/* sub layout */
.sv .wrap { height: 260px; font-size:28px; padding-top: 60px; justify-content: center; }

.sm { font-size:13px; justify-content: space-evenly; text-align: center; }
.sm.fix { top:60px;  }    
.sm a { padding:0; }
.sm.fix + .blank { height: 60px; }

.pad { padding:80px 0 160px; }
.left { float:none; width: auto; }
.right { float:none; width: auto; font:13px/1.6 str; margin-top: 40px;  }

.left em { font:normal var(--title2)/1.4 steb; }


/* sub1_1 */
#sub1_1 figure { margin-top:30px; }
#sub1_1 figure img { height: 20px; }
#sub1_1 .right > img { margin-top: 60px; }    
    
/* sub1_2 */
#sub1_2 .history { padding-top: 0; }
#sub1_2 .history li { padding-left: 80px; }
#sub1_2 .history li em { left: 44px; }
#sub1_2 .history li img { width: 100%; margin-top: 14px; margin-bottom: 40px;  }    
    
    
/* sub1_3 */
#sub1_3 .cont1 {  padding:80px 0; }    
#sub1_3 .cont1 h2 { font:18px/1.4 steb; }
#sub1_3 .cont1 p { font:16px/1.6 str; }
#sub1_3 .cont2 { padding:80px 0; }
#sub1_3 .cont2 ul li { margin-bottom: 20px; font-size:14px; }
#sub1_3 .cont2 ul li strong { font-size:18px; }
#sub1_3 .cont2 ul + div { margin-top: 40px; }
#sub1_3 .cont2 ul + div h3 { width: 80px; height: 80px; font-size:14px; line-height: 1.2; }
#sub1_3 .cont2 ul + div h3:first-child ~ h3 { margin-left: -10px; }
#sub1_3 .cont2 ul + div figure { width: 80px; height: 80px; }
#sub1_3 .cont2 ul + div figure:before { width:100px; left: -40px; }
#sub1_3 .cont2 ul + div figure img { width: 40px; }
#sub1_3 .cont3 { margin-top: 80px; }
#sub1_3 .cont3 ul { margin-top: 40px; }
#sub1_3 .cont3 ul li { border-radius: 10px; width: 48.5%; margin-bottom: 3vw;  padding:70px 10px 10px; background-size:auto 40px !important; background-position: 10px 20px !important;  }
#sub1_3 .cont3 ul li:nth-child(3), #sub1_3 .cont3 ul li:nth-child(4) { height: 180px; }
#sub1_3 .cont3 ul li dt { font:16px steb; }
#sub1_3 .cont3 ul li dd { font-size:13px; }  
    
    
/* sub1_4 */
#sub1_4 ul { padding-top: 0; }
#sub1_4 ul li { margin-bottom: 14px; padding-left: 60px; }
#sub1_4 ul li span { font-family: steb; position: absolute; left: 0; }
#sub1_4 iframe { margin-top: 40px; }  
    
/* sub1_5 */
#sub1_5 .right div.fl { width: 140px; height: 140px; font-size:16px; }
#sub1_5 .right div.ceo:after { bottom:-143px; height:143px; }
#sub1_5 .right div.tech { left:180px; }
#sub1_5 .right div.tech:after { left:-111px; width:111px; }
#sub1_5 .right ul { margin-top: 0px; display: block; }
#sub1_5 .right ul:before { display: none; }
#sub1_5 .right ul:after { display: none; }
#sub1_5 .right ul li { padding-top: 20px; display: block; padding-left: 160px; position: relative;   }
#sub1_5 .right ul li:before { left:69px; top:0px; height: 20px; }
#sub1_5 .right ul li div { margin:0; }
#sub1_5 .right ul li p { font-size:14px; text-align: left; margin-left: 14px; }  
#sub1_5 .right > ul > li:after { left: 150px; top:87px; height:270px; }
#sub1_5 .right > ul > li:nth-child(1):after { height:89px; }
#sub1_5 .right > ul > li:nth-child(2):after { height:268px; }
#sub1_5 .right > ul > li:nth-child(3):after { height:178px; }
#sub1_5 .right > ul > li:nth-child(4):after { height:128px; }
    
#sub1_5 .right > ul > li div.fl { position: absolute; left: 0; }   
#sub1_5 .right > ul > li div.fl:before { bottom:-280px; height:280px; }
#sub1_5 .right > ul > li:last-child div.fl:before { display: none; }
#sub1_5 .right > ul > li div.fl ~ div { margin-top: 20px; }
#sub1_5 .right > ul > li div.fl + div { margin-top: 45px; }
#sub1_5 .right > ul > li div h3 { font:16px/40px steb; }
#sub1_5 .right > ul > li div h3:before { top:22px; width:10px; left:-10px; }
#sub1_5 .right > ul > li div.fl + div h3:before { width: 20px; left: -20px; }
#sub1_5 .right > ul > li p { font:13px/1.4 stb; position: static; padding-left: 10px; margin-top: 6px;  }
#sub1_5 .right > ul > li p:before { position: relative; top:2px  }        
    
    

    
/* sub2_1_1 */
.prd { padding-top: 80px; position: relative; }
.prd .left { border-top:none; width: auto; position:relative; top:0; }
.prd .right { width: auto; margin-top: 40px; border:none;  }

.prd .left h2 { font:20px steb; position: static; }
.prd .left .lnb.mob { border:none; width:100%; outline:none; font:16px stm; margin-top: 10px; border:1px solid var(--color); padding:10px 0; border-right:none; border-left:none; color:var(--color); }

.prd .right h2 { font:24px stb; padding-top: 10px; margin-bottom: 30px; }
.prd .right h3 { font:24px stb; padding-top: 10px; margin-bottom: 30px; }
    
.prd .right .mt40 { margin-top: 30px; }
.prd .right .mt100 { margin-top: 80px; }

.prd .right .w50 { display:block; }
.prd .right .w50 img { width: 100%; margin-bottom: 10px; }

.prd .right strong { margin-top: 30px; }

.prd .right .list li { padding-left: 14px; position: relative; }
.prd .right .list li:before { position: absolute; left: 0; }

.prd .right .drag { overflow-x: auto; }
.prd .right .drag:after { content:"* 표를 드래그하여 내용을 확인하세요."; color:#600; display:block; margin-top: 10px; }
.prd .right table { width: 700px; }
    
.prd .right ul.nav { justify-content: space-between; margin-bottom: 30px;  }
.prd .right ul.nav.w2 li { width: 49.5%; }
.prd .right ul.nav.w3 li { width: 32.666%; }
.prd .right ul.nav.w4 li { width: 24.25%; }
.prd .right ul.nav li a { height:50px; padding:0; display:flex; align-items: center; justify-content: center; line-height:1.4;  }
    
.prd .right .w20 { flex-wrap: wrap; justify-content: flex-start; }    
.prd .right .w20 img { width: calc((100% - 20px) / 3); margin:0 10px 10px 0; }    
.prd .right .w20 img:nth-child(3n) { margin-right: 0; }    
    
    
/* sub3_1 */
#sub3_1 ul { width: auto; }
#sub3_1 ul li { width: 48%; margin:0 4% 4vw 0; }
#sub3_1 p { font-size:14px; }
#sub3_1 span { font-size:13px; }
#sub3_1 .part1 li:nth-child(even):before { width: 70px; height: 70px; bottom:-70px; left:-70px; }

#sub3_1 .part2 { width: 150px; height: 150px; }
#sub3_1 .part2 span { line-height:40px; padding-top: 14px; }
#sub3_1 .part2 p { height:86px; }
#sub3_1 .part2:before { width: 70px; height: 70px; left:-42px; }
#sub3_1 .part2:after { width: 70px; height: 70px; right:-42px; }

#sub3_1 .part3 li { margin:3vw 4% 0 0; }
#sub3_1 .part3 li:before { content:""; width: 14px; height: 45px; background:url(/images/a5.png) no-repeat center; position: absolute; bottom:-45px; left:calc(50% - 7px); }
#sub3_1 .part3 li:nth-child(4):before, #sub3_1 .part3 li:nth-child(5):before { display: none; }    
    
    
/* sub3_2 */
#sub3_2 ul li { width: 48.5%; margin:0 3% 30px 0; }
#sub3_2 ul li:nth-child(2n) { margin-right: 0; }
#sub3_2 ul li:nth-child(2n+1) { clear: both; }  
    
    
/* sub4_2 */
#sub4_2 table th { width: 80px; font-size:14px;  }
#sub4_2 table tr:last-child td { text-align: center; }
#sub4_2 table td input[type=text] { font-size:13px; width:100%; }
#sub4_2 table td textarea { font-size:13px; }
#sub4_2 table td input[type=submit] { font-size:13px; }    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}

@media (min-width:801px) { /* PC용 */
.mob { display: none !important; }

/* index */    
#kind ul li:nth-child(3n) { margin-right: 0; }    
#kind ul li:nth-child(3n+1) { clear:both;  }    
    
#a_prd article:nth-child(3n) { margin-right: 0; }    
#a_prd article:nth-child(3n+1) { clear:both;  }        
    

/* sub3_2 */
#sub3_2 ul li:nth-child(3n) { margin-right: 0; }
#sub3_2 ul li:nth-child(3n+1) { clear: both; }    
}