@media (max-width:800px) { /* 모바일용 */
/* header & footer */
#w_header { height: 60px; }
#w_header.up { top:-61px; }
#w_header.down { height: 100vh; }

#w_header h1 { padding-top: 13px; }
#w_header h1 img { height: 34px; }
#w_header #w_gnb { position: static; width: 280px; margin:100px auto 0; display: block; text-align: center; }
#w_header #w_gnb > li { border-bottom:1px solid #ddd; }
#w_header #w_gnb > li:last-child { border-bottom:none; }
#w_header #w_gnb > li > a { line-height:50px; padding:0; font-size:20px; display: block;  }
#w_header #w_gnb > li > a:after { display: none; }
#w_header #w_gnb ul { position: static; padding-left: 0; font-size:18px; color:#999; display: none; }
#w_header #w_gnb ul li { padding-top: 0; border-top:1px dashed #ddd; }
#w_header #w_gnb ul li a { display: block; line-height:50px; }
#w_header #w_gnb ul li a:after { display: none; }
#w_header .contact { position: static; width: 280px; height: 50px; line-height: 44px; margin:0 auto; display: block; font-size:20px; }
#w_header .contact:hover { background: #fff; color:#000;}
#w_header .lang { right: 60px; top: 18px; }
#w_header .lang select { font-size:16px; }


#w_header.wh #nav_btn .line { background-color: #fff;}
#w_header.fix #nav_btn .line,
#w_header.down #nav_btn .line { background-color: #000;}

#nav_btn { position:absolute; right:0; top:12px; }
#nav_btn .line {  width: 30px; height: 2px; background-color: #000; 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 { padding:40px 0; }
#w_footer .wrap { display: block; }
#w_footer address p { margin-top: 10px; }
#w_footer address span { margin-bottom: 6px; }

#w_footer .copy { margin-top: 20px; display: flex; flex-direction: column-reverse; }
#w_footer .copy ul { justify-content: space-evenly; margin-top: 20px;  }
#w_footer .copy ul li:first-child { margin-right: 0; }
#w_footer .copy p { text-align: left; position: static; }

/* index */
#main { height: 400px; }
#main .swiper-button-next { display: none; }
#main .swiper-button-prev { display: none; }
#main .swiper-pagination { bottom:20px; }
#main .swiper-pagination .swiper-pagination-bullet { margin:0 4px; }
#main h2 { font-size:24px; width: 94%; }

#about p { margin-top: 30px; }
#about .more { margin-top: 40px; }
#about .prd { display: block; }
#about .prd li { width: auto; margin-bottom: 20px; }
#about .prd li img { width: 100%; aspect-ratio: 1 / 1; }
#about .prd li a { padding:30px; }
#about .prd li a div:last-child { top:auto; bottom:30px; }
#about .prd li a div:last-child h4 { margin-bottom: 10px; }

#process .wrap { display: block; }
#process article { text-align: center; width: auto; margin-bottom: 40px;  }
#process article h2 { font-size:18px; }
#process article dl { margin-top: 30px; }
#process article dl dd { margin-top: 10px; }


#process .proSlide { width: auto; }
#process .proSlide i { right: 14px; top: 14px; }
#process .swiper-pagination .swiper-pagination-bullet { margin-left: 10px; }

#process .control { position: static; width: auto; margin-top: 20px;  }
#process .control .btn > div { width: 44px; height: 44px; }
#process .control .btn > div:after { font-size: 16px; }
#process .control .btn + div { height: 44px; }
#process .control .btn + div { width:auto; position: static; height: 60px; }

#rndb { margin-top: 100px; margin-bottom: 100px;  }
#rndb img { height: 300px; }
#rndb .wrap { left: 0; transform: none; width: 100%; padding-top: 0; height:100%; display:flex; flex-direction: column; align-items: center; justify-content: center; }
#rndb h2 { font-size:18px; }
#rndb p { margin-top: 30px; }

#cata ul { width:calc(140px * 16); }
#cata ul li { margin-right: 20px; }
#cata ul li img { width: 120px; height: 120px; border-radius: 14px;  }
#cata > a { margin-top: 40px; }
#cata > a i {font-size:18px; }

#contact .wrap { display: block; }
#contact article p { margin-top: 10px; font-size:14px; }
#contact article > a { margin-top: 20px; }
#contact article div { margin-top: 10px; }

#formmail { width: auto; margin-top: 40px; }
#formmail ul li { float:none; width: auto; margin-right: 0; margin-bottom: 20px; }
#formmail ul li input { border-radius: 10px; padding:0 20px; }
#formmail ul li textarea { border-radius: 10px; padding:20px; }
#formmail .more { width: 200px; display: block; margin:0 auto; }

/* sub layout */
.sv { height: 260px; padding-top: 60px; }
.sv h2 { font-size:28px; }

.subVisual img { height: 140px; }

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

/* sub1_1 */
#sub1_1 .cont1 p { margin-top: 10px; }

#sub1_1 .cont2 li { width:48.5%; margin-bottom: 3vw; }
#sub1_1 .cont2 li img { width:100%; }

#sub1_1 .cont3 > div { margin-top: 30px; display: block; }
#sub1_1 .cont3 img { width: 100%; }
#sub1_1 .cont3 article { width: auto; margin-top: 20px; }
#sub1_1 .cont3 article h3 { margin-bottom: 0; }
#sub1_1 .cont3 article ul li { margin-top: 10px; padding-left: 24px; }

#sub1_1 .cont4 .box { overflow-x: scroll; padding:30px 0; }
#sub1_1 .cont4 .box:before { border-width:5px; width: 200px; left: calc(200px - 5px); top: 26px; height: 80.6% ;}
#sub1_1 .cont4 .box:after { content:"* 표를 옆으로 드래그해서 확인하세요."; display: block; margin-top: 10px; font-size:12px; }
#sub1_1 .cont4 table { margin-top: 0; width: 800px; }
#sub1_1 .cont4 table td { padding:10px; }
#sub1_1 .cont4 a { width: 160px; height: 160px; margin:40px auto 0; }
#sub1_1 .cont4 a i { margin-right: 10px; font-size:28px; }


/* sub1_4 */
#sub1_4 .right div { height: 150px; padding:40px 30px; box-sizing: border-box; color:#fff; position: relative; transition:0.3s; }
#sub1_4 .right div.on { height: 240px; }
#sub1_4 .right div h3 { padding-left: 30px; }
#sub1_4 .right div p { margin-top: 20px; padding-left: 30px; }
#sub1_4 .right i { font-size:24px; margin:10px 0; }


/* sub2_1 */
#sub2_1 .cont1 h3 { margin-bottom: 10px; }
#sub2_1 .cont1 img { margin-top: 40px; }

#sub2_1 .cont3 .left { width: auto; display:flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
#sub2_1 .cont3 .left:after { display: none; }
#sub2_1 .cont3 .left li { font-size:14px; }
#sub2_1 .cont3 .left li a i { display: none; }
#sub2_1 .cont3 .right ul li { width: 48.5%; margin-right: 3%; margin-bottom: 20px; }
#sub2_1 .cont3 .right ul li:nth-child(2n) { margin-right: 0; }
#sub2_1 .cont3 .right ul li img { width: 100%; height: auto; aspect-ratio: 297 / 235; }
#sub2_1 .cont3 .right ul li p { margin-top: 10px; }


/* sub3_1 */
#sub3_1 .cont1 .left p { margin-top: 10px;  }

/* sub3_2 */
#sub3_2 .cont1 .left { margin-bottom: 20px; }

/* sub3_3 */
#sub3_3 .cont1 .right { margin-top: 20px; }
#sub3_3 .cont1 .right li p { padding:10px 26px 10px 30px; }
#sub3_3 .cont1 .right li p i { top:13px; }
#sub3_3 .cont1 .right li div { padding:10px 0 30px 30px; }

/* sub4_1 */
.bg4 + .subVisual img { height: 400px; }

#sub4_1 .cont1 { display: block; }
#sub4_1 .cont1 img { width: 100%; }
#sub4_1 .cont1 article { width: auto; margin-top: 40px;  }
#sub4_1 .cont1 article h2 { position: static; }
#sub4_1 .cont1 article strong { margin-bottom: 20px; margin-top: 20px; }
#sub4_1 .cont1 article p.f22 { margin-top: 20px; }
#sub4_1 .cont1 article p.f22 span { margin-right: 4px; }

#sub4_1 .cont2 { margin-top: 160px; }
#sub4_1 .cont2 img { height: 240px; }
#sub4_1 .cont2 p { width: 94%; left: 3%; transform: translate(0, -50%); }

#sub4_1 .cont3 { margin-top: 160px; }
#sub4_1 .cont3 h2 { margin-bottom: 40px; text-align: center; }
#sub4_1 .cont3 p { width: 74px; height: 74px; text-align: center; line-height:1.4; }
#sub4_1 .cont3 .lv1 p { width: 120px; height: 120px; }
#sub4_1 .cont3 .lv1 p:before { height: 156px; }
#sub4_1 .cont3 .lv2 p { margin-left: calc(50% + 40px); width: 100px; height: 100px; }
#sub4_1 .cont3 .lv2 p:before { width: 40px; }

#sub4_1 .cont3 .lv3 { margin-top: 94px; position: relative;}
#sub4_1 .cont3 .lv3:before { width: calc(100% - 73px); left:37px; top:-39px }
#sub4_1 .cont3 .lv3 p:before,
#sub4_1 .cont3 .lv4 p:before { height: 40px; }
#sub4_1 .cont3 .lv3 p:nth-child(2):after { content:""; width: 1px; height: 40px; position: absolute; background: #000; left:50%; top:100%; display: block; }
#sub4_1 .cont3 .lv4 { width: 200px; margin-left: 10%; margin-top: 79px; }
#sub4_1 .cont3 .lv4:before { width: calc(100% - 73px); left:37px; }
#sub4_1 .cont3 .lv4:after { display: none; }


/* sub4_2 */
.mission img { height: 240px; }
.mission article { width: 94%; left: 3%; transform: translate(0, -50%); }
.mission article p { word-break: keep-all; }

#sub4_2 .cont1 > div.fl { margin-top: 30px; display: block; padding:0 3%; box-sizing: border-box; }
#sub4_2 .cont1 figure { width:100%; }
#sub4_2 .cont1 article { margin-left: 0px; width:auto; }
#sub4_2 .cont1 article ul li { line-height:40px; }
#sub4_2 .cont1 article p { position: static; margin-top: 20px; font-size:18px; }
#sub4_2 .cont1 article p i:nth-child(2) { margin-left: -12px; }

#sub4_2 .cont2 { margin-top: 80px; }
#sub4_2 .cont2 h2 { margin-bottom: 50px; }
#sub4_2 .cont2 figure { margin-top: 20px; padding:40px 0; }
#sub4_2 .cont2 figure img { max-width: 150px; }

#sub4_2 .cont3 .left:after { content:""; display: block; clear: both; } 
#sub4_2 .cont3 .left h2 { margin-bottom: 30px; }
#sub4_2 .cont3 .left a { width: 48.5%; padding-left: 20px; margin-top: 0px; float:left; margin-right: 3%; }
#sub4_2 .cont3 .left a:last-of-type { margin-right: 0; }
#sub4_2 .cont3 .left a i { right: 20px; font-size:16px; }
#sub4_2 .cont3 .right div { margin-bottom: 0; margin-top:40px;  }
#sub4_2 .cont3 .right p { margin-bottom: 20px; }
#sub4_2 .cont3 .right figure { width: 48.5%; height: 120px; }
#sub4_2 .cont3 .right figure:first-of-type img { width: 80px; }
#sub4_2 .cont3 .right figure img { max-width: 130px; }

#sub4_2 .cont4 .color { margin-top: 20px; }
#sub4_2 .cont4 .color > li { border-radius: 20px; }
#sub4_2 .cont4 .color > li div strong { left: 20px; bottom: 30px; }
#sub4_2 .cont4 .color > li ul { padding:20px 0 20px 20px; line-height:26px; }

/* sub4_3 */
#sub4_3 ul { margin-top: 40px; margin-bottom: 40px; }
#sub4_3 ul li { padding-left: 60px; font-size:14px; }
#sub4_3 ul li strong { position: absolute; left: 0; }
#sub4_3 iframe { height: 300px; }
#sub4_3 .maplink { margin-top: 20px; justify-content: space-between; }
#sub4_3 .maplink a { width: 32%; margin:0; height: 40px; }
#sub4_3 .maplink a i { margin-left: 0px; }


/* sub4_4 */
#sub4_4 .cont2 .left { position:static; display: flex; align-items: center; justify-content: space-evenly; padding:10px 0; }
#sub4_4 .cont2 .left:after { display: none; }
#sub4_4 .cont2 .left li { margin-bottom: 20px; }
#sub4_4 .cont2 .left li.select { opacity: 1; }
#sub4_4 .cont2 .year > li { padding-left: 30px; margin-bottom: 80px;}
#sub4_4 .cont2 .year > li ul li { padding-left: 70px; margin-top: 20px; }
#sub4_4 .cont2 .year > li h2:before,
#sub4_4 .cont2 .year > li ul li:before { left: -30px; }
#sub4_4 .cont2 .year > li h2:before { left: 0; } 
#sub4_4 .cont2 .year figure { width:calc(100% + 70px); margin-left: -70px; }
#sub4_4 .cont2 .year figure img { width: 100%; }



















}


@media (min-width:801px) { /* PC용 */
    #sub2_1 .cont3 .right ul li:nth-child(3n) { margin-right: 0; }
};