@media (max-width:800px) { /* 모바일용 */

#w_header { transition:0.3s; overflow: hidden; height: 60px; }
#w_header.down { height: 100vh; background: rgba(0,0,0,0.9); color:#fff;}
#w_header .wrap { height: 60px; display: block; }
#w_header h1 { padding-top: 15px; }
#w_header h1 a img { height: 30px; }
#w_header #w_gnb { width:240px; margin:60px auto 0; display: block; }
#w_header #w_gnb li { padding:0; border-bottom:1px solid rgba(255,255,2550,0.8); }
#w_header #w_gnb li:last-child { border-bottom:none; }
#w_header #w_gnb li a { display: block; line-height:50px; text-align: center; font-size:18px;  }
#w_header .lang { position: relative; width: 240px; margin:10px auto 0; }
#w_header .lang select { width: 100%; height: 44px; padding-left: 30px; font-size:16px; }
#w_header .lang i { right: 30px; }

#nav_btn { position:absolute; right:0; top:12px; }
#nav_btn .line {  width: 30px; height: 2px; background-color: #0a302e; 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);} 

.index #nav_btn .line { background-color:#fff; }
#w_header.down h1 img { filter: brightness(0) invert(1); }
#w_header.down #nav_btn .line { background-color:#fff; }
#w_header.down select { background:none; border-color:#fff;}

#w_footer { padding:40px 0 0;}
#w_footer .wrap { display: block; }
#w_footer .wrap > div { margin-bottom: 40px; }
#w_footer .info ul { line-height:normal; }
#w_footer strong:after { margin:6px 0 14px; }
#w_footer .sns ul li { margin-right: 10px; }
#w_footer .sns ul li:last-child { margin-right: 0; }
#w_footer .sns ul li img { height: 40px; }
#w_footer .top { width: 150px; position: absolute; right: 0; bottom: 0; }
#w_footer p.f14 { height: 60px; margin-top: 40px; }



/* index */
#main .mainSlide { height: 500px; }
#main .mainSlide .arrow { display: none; }
#main .mainSlide .swiper-pagination { bottom: 20px; }
#main .mainSlide article { top: 100px; width: 100%; padding:0 3%; box-sizing: border-box; }
#main .mainSlide article p { font-size:13px; line-height:1.6; margin-top: 10px; word-break: keep-all; }
#main .mainSlide article .more { margin-top: 20px; }

#slogun h2:after { margin:20px auto; }

#prd { background: #0a302e; }
#prd ul { margin-top: 60px; display: block; }
#prd li { width: auto; margin-bottom: 40px; }
#prd li:last-child { margin-bottom: 0; }
#prd li figure { height: auto; }
#prd li figure img { width: 100%; transform: scale(1) !important; }
#prd li dl { background: #fff; padding:14px 0; }
#prd li dl dt { font-weight: 600; }
#prd li dl dd { color:#000; }

#diff .wrap > img { height: 26px; }
#diff h2 { margin-top: 30px; }
#diff ul { margin-top: 60px; display: block; }
#diff ul li { width:auto; margin-bottom: 60px; }
#diff ul li:last-child { margin-bottom: 0; }
#diff ul li:after { right: 15px; top: auto; bottom:-30px; width: calc(100% - 30px); height: 1px; }
#diff ul li figure { height: 40px; }
#diff ul li figure img { height: 40px; }
#diff ul li dt { margin-top: 14px; margin-bottom: 6px; }

#inside .wrap { width: 100%; }
#inside .prdSlide { padding:60px 0; }
#inside .prdSlide .swiper-slide { transform: scale(1); }
#inside .prdSlide .swiper-slide-active { transform: scale(1); }
#inside .prdSlide .swiper-pagination { margin-top: 60px; width:80%; }
#inside .prdSlide .swiper-pagination-progressbar-fill { background: #0a302e; }
#inside .prdSlide .arrow { border:1px solid #0a302e; width: 44px; height: 44px; font-size:28px; display:flex; align-items: center; justify-content: center; transition:0.3s; top:230px; }
#inside .prdSlide .arrow:hover { color:#fff; background: #0a302e; }
#inside .prdSlide .arrow:after { display: none; }
#inside .prdSlide .xi-arrow-left { left:414px;}
#inside .prdSlide .xi-arrow-right { right:414px; }

#from ul { margin-top: 40px; display: block; }
#from ul li { width: auto; margin-bottom: 20px; }
#from ul li:last-child { margin-bottom: 0; }
#from ul li a > img { width: 100%; }
#from ul li:hover a > img { transform: scale(1); }
#from ul li div { padding:20px; }
#from ul li div img { width: 50px; }

/* sub layout */
section.title { height: 200px; padding-top: 120px; }
section.title h2 { font-size:30px; }

.sv .wrap { height: 360px; }
.sv h2 { font-size:28px; }
.sv p { margin-top: 20px; font-size:14px; }
#sv1 { background:url(../images/bg_sub1.png) no-repeat center/cover;}
#sv2 { background:url(../images/bg_sub2.png) no-repeat center/cover;}
#sv3 { background:url(../images/bg_sub3.png) no-repeat center/cover;}


/* about */
.tit img { height: 24px; }
.tit p { font-size: 30px; line-height:1.2; }
#vision .tit { width:auto; float:none; }
#vision .right { width:auto; float:none; margin-top: 20px; }
#vision .right li { padding:20px 0; padding-left: 70px; position: relative; }
#vision .right li:first-child { padding-top: 20px; }
#vision .right li img { left: 14px; width: 30px;}

#craft .wrap > p { margin-top: 20px; font-size:14px; }
#craft ul { display: block; margin-top: 20px; }
#craft ul li { width: auto; height: 45vw; margin-top: 20px;  }
#craft ul li figure { height: 30px; }
#craft ul li figure img { height: 30px; }
#craft ul li span { margin-top: 4px; }

#mean .wrap { display: block; }
#mean em { margin-top: 20px; display: block; font-size:14px;  }
#mean .wrap > img { width: 100%; margin-top: 40px; }

#comm { display: block; }
#comm > div { width: auto; }
#comm dl { height: auto; width: auto; padding:40px 3%;}
#comm > div:nth-child(1) dl { margin-left: 0; }
#comm > div:nth-child(2) dl { padding-left: 3%; } 
#comm dl dt:after { margin:10px 0; }
#comm dl dd { line-height:1.6; font-size:14px; }

/* tech */
#prm ul { margin-top: 0; display: block; }
#prm ul li { margin-top: 20px; width: auto; height: 240px; }
#prm ul li dl { width: 310px; height: auto; padding:10px; background:rgba(255,255,255,0.6); }

#adv ul { margin-top: 20px; display: block; }
#adv ul li { width: auto; height: auto; padding:40px 0; }
#adv ul li:before { width: 280px; height: 1px; right: auto; left:50%; top:auto; bottom:0; transform: translateX(-50%); }
#adv ul li img { height: 30px; }
#adv ul li h3 { margin-top: 20px; }
#adv ul li h3 br { display: none; }

#inno .wrap { display: block; }
#inno span { margin-top: 20px; font-size:14px;  }
#inno article + img { width: 100%; margin-top: 20px; }

#story { background-position:right center; }
#story .wrap { display: block; }
#story span { margin-top: 20px; font-size:14px; }
#story figure { border-width:6px; margin-top: 40px;  }
#story figure img:first-child { width: 100%; }
#story figure img:last-child { height: 50px;  }


/* prd */
#cate .tit ul { margin-top: 20px; margin-bottom: 60px; justify-content: space-between; }
#cate .tit ul li { margin-right: 0; width: 32%; text-align: center; }
#cate .tit ul li a { line-height:1.2;  }

.tab .bnr ul { margin-top: 40px; display: block; }
.tab .bnr ul li { width: auto; height: auto; padding:20px; margin-top: 20px; position: relative;  }
.tab .bnr ul li figure { width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; }
.tab .bnr ul li figure img { transform: scale(0.7); }
.tab .bnr ul li dl { margin-top: 0; }
.tab .bnr ul li dl dd { font-size:14px; }
.tab .bnr ul li dl dd:before { content:"-"; position: absolute; left: 0; }

.tab .prdList li { margin-top: 50px; width: 46vw; }
.tab .prdList li img { width: 100%; }
.tab .prdList li p { font-size:14px; }


/* why */
#sub4 .cont1 { display: block; }
#sub4 .cont1 ul { display: block; width: auto; }
#sub4 .cont1 ul li { width: auto; height: auto; padding:20px 20px 30px; margin-bottom: 0; margin-top: 20px;  }
#sub4 .cont1 ul li figure { height: 50px; margin-bottom: 10px; }
#sub4 .cont1 ul li figure img { height: auto; transform: scale(0.8); margin-left: -4px; }
#sub4 .cont1 ul li dl dd { margin-top: 10px; }

#sub4 .cont2 .voices { margin-top: 30px; padding-bottom: 60px; }
#sub4 .cont2 .swiper-slide article { padding:20px 14px; }
#sub4 .cont2 .swiper-slide article p { height: 44px; }

#sub4 .cont3 { display: block; }
#sub4 .cont3 > img { padding-top: 40px; width: 100%; }
#sub4 .cont3 span { margin-top: 20px; font-size:14px; } 

#sub4 .cont3 #trustedContainer { width: auto; padding-top: 40px; }
#sub4 .cont3 #trustedContainer figure { height: 60px; width:calc((100% - 20px) / 3);}
#sub4 .cont3 #trustedContainer figure:nth-child(3) { }
#sub4 .cont3 #trustedContainer figure img { max-width:90%; max-height: 50%; }

#sub4 .cont4 { display: block; }
#sub4 .cont4 li { width: auto; margin-top: 20px; }
#sub4 .cont4 li > img { width: 100%; }
#sub4 .cont4 li div { padding:60px 20px 0; }
#sub4 .cont4 li div figure img { transform: scale(0.8); margin-left: -4px; }
#sub4 .cont4 li div dl dt:after { margin:14px 0; }


/* journal */
#sub5 .cont1 > div { margin-bottom: 60px; }
#sub5 h2.f32 { margin-bottom: 20px; }
#sub5 h2.f32:after { display: none; }
#sub5 .list { display: block; }
#sub5 .list li { position: relative; margin-top: 20px; }
#sub5 .list li > img { width: 100%; }
#sub5 .list li a { width: 280px; height: auto; padding:20px 14px 40px; box-sizing: border-box;  }
#sub5 .list li a p { margin-top: 8px; }
#sub5 .list li a img { left: 14px; bottom: 20px; height: 8px; } 

#sub5 .cont4 ul { margin-top: 30px; display: block; }
#sub5 .cont4 ul li { width: auto; }
#sub5 .cont4 ul li div a { margin-top: 20px; }
#sub5 .cont4 ul li div a i { margin-left: 10px; }

#sub5 .cont5 a i { margin-left: 10px; }

/* contact */
#sub6 .cont1 { display: block; }
#sub6 .cont1 iframe { margin-top: 20px; width: 100%; height: 300px; }
#sub6 .cont1 ul { position: static; }
#sub6 .cont1 ul li { padding: 20px 20px 20px 50px; }
#sub6 .cont1 ul li i { font-size:40px; }
#sub6 .cont1 ul li:last-child i { font-size:30px; left: 4px; }

#sub6 .cont2 ul { margin-top: 40px; display: block; }
#sub6 .cont2 ul li { width: auto; height: auto; padding: 40px 0 50px; margin-top: 20px; }
#sub6 .cont2 ul li h3 { font-size:18px; }
#sub6 .cont2 ul li img { transform: scale(0.8); }
#sub6 .cont2 ul li p { line-height:1.4; font-size:16px; }

#sub6 .cont3 { display: block; }
#sub6 .cont3 article { width: auto; padding:20px 20px 40px 20px; background-size:140px; }
#sub6 .cont3 article span i { font-size:20px; }
#sub6 .cont3 article a i { font-size:18px; }
#sub6 .cont3 > img { width: 100%; height: 240px; }

#sub6 .cont4 span { margin-top: 20px; }
#sub6 .cont4 .map { margin-top: 40px; height:auto;  }
#sub6 .cont4 .map .area { height: 400px; }
#sub6 .cont4 .map .area img { width: 100%; height: 100%; }

#sub6 .cont4 .map .loc { position: static; width: auto; height:auto; }
#sub6 .cont4 .loc .shop { height:auto; overflow: auto; }

#sub6 .cont4 .page { height: 50px; margin-top: 20px; }
#sub6 .cont4 .page a { width: 40px; height: 40px; font-size:16px; display:flex; align-items:center; justify-content:center; border-radius: 40px; }
#sub6 .cont4 .page a.select { background: #0a302e; color:#fff; }







































}