@media (max-width:800px) { /* 모바일용 */
#w_header, section, #w_footer { font-size:14px; }
.wrap { width: 94%; }
.pad { padding:80px 0 160px; }

#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 ease-in-out;}
#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);} 


/* header & footer */
#w_header { height: 60px; }
#w_header.down { height: 100vh; background: rgba(0,0,0,0.95); }

#w_header:before { top: 60px; }
#w_header h1 { position: static; padding-top: 10px; }
#w_header h1 img { height: 40px; }

#w_header #w_gnb { position:static; width: 300px; margin:80px auto 0; padding-top: 0;  }
#w_header #w_gnb > li { float:none; margin-right: 0; border-bottom:1px solid rgba(255,255,255,0.5); text-align: center; }
#w_header #w_gnb > li:hover > a:after { display: none; }
#w_header #w_gnb > li > a { display: block; line-height:50px; padding:0; font-size:24px;  }
#w_header #w_gnb ul { position: static; display: none; padding-top: 0; }
#w_header #w_gnb ul li { line-height: 50px; border-top:1px dashed #ddd; margin-bottom: 0; }    
#w_header #w_gnb ul li a { padding:0; font-size:18px; padding-bottom: 0; border:none !important; }    

#w_header .lang { font-size:18px; right: 70px; top: 17px; }
    
#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 ease-in-out; }
#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 { text-align: center; }
#w_footer img { height: 40px; }
#w_footer address { margin-top: 20px;  }   
#w_footer address strong { margin-bottom: 10px; }   
#w_footer p { position: static; margin-top: 20px; }

.w_top { bottom:10px; right:10px; width:40px; height:40px; }


/* index */
div#fp-nav { display: none; }
.arrow:before { width: 20px; }
@keyframes arr { 
    0%, 100% { width: 20px; }
    50% { width: 60px; }
}

.space h2 + div { margin-top: 30px; }
.space h2 + div p { margin-top: 30px; }


#section1 .ment { width: auto; }
#section2 .circle { right: 0; width: 140px; height: 140px; }
#section2 .circle img { width: 100%; }
#section2 .ment { width: auto; }
#section3 .ment { color:#fff; width: auto;}
#section3 .ment h3 { margin-top: 40px; }
#section3 .ment .f50 { color:#fff; }
#section3 .ment .arrow:before { background: #fff; }
#section3 .ment .arrow:after { border-color:#fff; }



/* sub layout */
.sv { height: 240px; }
.sv h2 { padding-top: 40px; }

nav.sm ul { display: none; }
nav.sm select { border:none; height: 50px; background: #000; color:#fff; width: 100%; appearance: none; font-size:16px; font-family: stm; padding:0 3%; box-sizing: border-box; }

nav.sm i { position: absolute; right: 3%; top:50%; transform: translateY(-50%); }


@keyframes bg_sv {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}


/* sub1_1 */
#sub1_1 .cont1 { display: block; }
#sub1_1 .cont1 figure { border-radius: 20px; overflow: hidden; }
#sub1_1 .cont1 figure img { width: 100%; aspect-ratio: 1 / 1; }
#sub1_1 .cont1 article { width: auto; margin-top: 40px;  }
#sub1_1 .cont1 article img { margin-top: 30px; height: 80px;  }
#sub1_1 .cont1 article div { position: static; width: auto; margin-top: 40px; }
#sub1_1 .cont1 article div span { opacity: 0; }
#sub1_1 .cont1 article div p { margin-top: 20px; }

#sub1_1 .cont2 ul { display: block; margin-top: 0; }
#sub1_1 .cont2 li { width: auto; border-right:none; border-bottom:2px solid #12683f; padding:40px 0;}
#sub1_1 .cont2 li:last-child { border-bottom:none; }
#sub1_1 .cont2 li figure { height: 90px; }
#sub1_1 .cont2 li figure img { scale:0.5; }

#sub1_1 .cont3 img { height: 280px; }
#sub1_1 .cont3 article { left: 3%; top: 50%; transform: translateY(-50%); width: 94%; }
#sub1_1 .cont3 article p { word-break: keep-all; }

#sub1_1 .cont4 ul { margin-top: 40px; }
#sub1_1 .cont4 ul li { display: block; }
#sub1_1 .cont4 ul li img { width: 100%; }
#sub1_1 .cont4 ul li article { width:auto; padding:20px; } 
#sub1_1 .cont4 ul li article dl { position: static; margin-top: 20px; }

.left { width: auto; float:none; }
.right { width: auto; float:none; margin-top: 20px; }

#sub1_1 .cont5 .graph li p { display: flex; align-items: end; justify-content: start;}
#sub1_1 .cont5 .graph li p span { font-size:70px; line-height:1; margin-right: 10px; position: relative; top: 6px;  }
#sub1_1 .cont5 .graph li div em { left: 20px; }
#sub1_1 .cont5 .graph li div i { left:70%; }
#sub1_1 .cont5 .graph li:first-child em { left:16px; }
#sub1_1 .cont5 .graph li.aos-animate:nth-child(2) div b { width: 34%;}
#sub1_1 .cont5 .graph li.aos-animate:nth-child(3) div b { width: 45%;}
#sub1_1 .cont5 .graph li.aos-animate:nth-child(4) div b { width: 58%;}

#sub1_1 .cont6 ul li img { max-height:70px; max-width:70px; }

/* sub1_2 */
#sub1_2 .cont1 img { width: 200px;}
#sub1_2 .cont3 { display: block; }
#sub1_2 .cont3 li { margin-top: 20px; }
#sub1_2 .cont3 figure img { width: 100%; }
#sub1_2 .cont3 article { height: auto; padding:20px; }

#sub1_2 .cont4 .prdSlide { position: relative; width:104%; }
#sub1_2 .cont4 ul li { border-radius: 14px; }
#sub1_2 .cont4 ul li img { height: 240px; }
#sub1_2 .cont4 ul li article a { right: 20px; top: 20px; }
#sub1_2 .cont4 ul li article p { left: 30px; bottom: 30px; }
#sub1_2 .cont4 .prdSlide .swiper-button-next { left:80%; width: 50px; height: 50px; }
#sub1_2 .cont4 .prdSlide .swiper-button-next:after { font-size:22px; font-weight: 900; margin-left: 4px;}


/* sub1_3 */
#sub1_3 .cont10 .right li { width: 48.5%; margin:0 3% 3vw 0; }


    
#sub1_3 .cont2 { display: block; }
#sub1_3 .cont2 .left img { border-radius: 14px; margin-left: 0; height: auto; aspect-ratio: 1 / 1; width: 100%; object-position: bottom; }
#sub1_3 .cont2 .right { margin-top: 40px; }
#sub1_3 .cont2 .right ul li { width: auto; height: auto; border-radius: 14px; float:none; margin:20px 0 0; padding:20px; }
#sub1_3 .cont2 .right ul li figure { right: 20px; top: 20px; width: 80px; height: 80px; }
#sub1_3 .cont2 .right ul li figure img { width: 100%; height: 100%;  }
#sub1_3 .cont2 .right ul li figure i { font-size:40px; padding-top: 14px; }
#sub1_3 .cont2 .right ul li figure:after { width: 30px; }
#sub1_3 .cont2 .right ul li dl { position: static; margin-top: 40px; }

#sub1_3 .cont3 .drag { overflow-x: auto; }
#sub1_3 .cont3 .drag:after { display: block; content:"* 표를 좌우로 드래그하여 확인하세요."; color:#12683f; font-size:13px; margin-top: 10px; }
#sub1_3 .cont3 .drag img { width: 1000px; }
#sub1_3 .cont3 div:nth-child(2) img { margin-left: 0; }
#sub1_3 .cont3 ul li { margin-top: 10px; }
#sub1_3 .cont3 ul li strong { width: 24px; }

#sub1_3 .cont4 { display: block; }
#sub1_3 .cont4 img { width: 100%; }
#sub1_3 .cont4 article { width: auto; margin-top: 40px; }
#sub1_3 .cont4 strong { margin-top: 20px; }
#sub1_3 .cont4 ul { width: auto; margin:20px auto 0;  }
#sub1_3 .cont4 ul:before { width: 300px; height: 300px; top:calc(50% + 10px); }
#sub1_3 .cont4 ul li { width: calc((100% - 20px) / 2); height: auto; aspect-ratio:1 / 1; margin-top: 20px;}

#sub1_3 .cont5 div.fl { width: auto; margin:50px auto 0; display: block;}
#sub1_3 .cont5 div.fl > div { width: auto; margin-bottom:100px; }
#sub1_3 .cont5 div.fl > div ul { height: auto; overflow: hidden;} 
#sub1_3 .cont5 div.fl > div ul li:last-child { position: static; }

#sub1_3 .cont6 img { height: 500px; }
#sub1_3 .cont6 .right { margin-top: 60px; }

#sub1_3 .cont7,
#sub1_3 .cont7 .right { display: block; }


#sub1_3 .cont7 h3 { width: 200px; height: 200px; margin:0 auto; }
#sub1_3 .cont7 h3:before { display: none; }
#sub1_3 .cont7 h3:after { display: none; }

#sub1_3 .cont7 ul li { width: auto; margin-top: 20px;}
#sub1_3 .cont7 ul li:first-child { margin-top: 20px; }
#sub1_3 .cont7 ul li .gt { display: none; }
#sub1_3 .cont7 ul li figure { width: 160px; height: 160px; margin-right: 20px; }
#sub1_3 .cont7 ul li figure img { height: 40px; }
#sub1_3 .cont7 ul li:nth-child(1),
#sub1_3 .cont7 ul li:nth-child(3) { margin-left: 0; }

#sub1_3 .cont8 { width: 94%; border-radius: 14px; padding:40px 0; margin-top: 40px; }
#sub1_3 .cont8 li { margin-top: 40px; }
#sub1_3 .cont8 li img { max-height: 80px;}

#sub1_3 .cont9 img { height: 400px; }
#sub1_3 .cont9 p { left: 3%; width: 94%; text-align: center; }


#sub1_3 .cont10 .right li { width: 48.5%; margin:0 3% 3vw 0; }
#sub1_3 .cont10 .right li:nth-child(2n) { margin-right: 0; }


.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 9999; }
.modal.on { display:flex; }
.modal img { max-width: 60vw; max-height: 70vh; }



/* sub2_1 */
#sub2_1 .cont2 li { width: auto; margin-right: 0; margin-bottom: 20px; } 
#sub2_1 .cont2 li div p { font-size:20px; }
#sub2_1 .cont2 li div a { font-size:16px; }


/* detail */
.prdCate { font-size: 16px; }

.detail .cont1 { display: block; }
.detail .cont1 figure { width: auto; }
.detail .cont1 article { width: auto; margin-top: 40px;  }
.detail .cont1 article a { margin:40px auto 0; position: static; }
.detail .cont1 article a i { margin-left: 10px; position: relative; top: -1px; }

.detail .cont2 { height: 1000px;  }
.detail .cont2 .xi-arrow-down { font-size:40px; }


/* sub4_1 */
#sub4_1 form ul li { float:none; width:auto; margin:0 0 20px 0; }
#sub4_1 form ul li input { font-size:16px; padding:0 20px; }
#sub4_1 form ul li textarea { font-size:16px; padding:20px; }
#sub4_1 form input[type="submit"] { width: 100%; box-sizing: border-box; font-size:16px; } 


/* sub4_2 */
#sub4_2 .right li { padding-left: 70px; }
#sub4_2 .right iframe { height: 400px; }

/* sub4_3 */
#sub4_3 .right { width: auto; }
#sub4_3 #bo_gall .gall_li { width: 48.5%; margin-right:3%; }
#sub4_3 #bo_gall .gall_li:nth-child(2n) { margin-right: 0; }
#sub4_3 #bo_gall .gall_li:nth-child(2n+1) { clear: both; }
#bo_gall .gall_text_href a { padding-right: 30px; }





}