/* header */
header{position:fixed;top:0; z-index:9999;  width:100%; margin:0 auto; min-height:90px; border-bottom: 1px solid rgba(255,255,255,0.4); box-sizing:border-box; box-shadow: 0 2px 10px rgba(0,0,0,.05);background:#fff}
header:hover {background: #fff;}
.logo{position:relative;z-index:123; float:left;width:15%; height:90px; line-height:90px;}
.logo img {position:absolute; left:0; top: 50%; transform: translateY(-50%);}
nav{position:relative;width:90%; max-width: 1200px; margin:0 auto;}
#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile{border:0;list-style:none;line-height:1px;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#cssmenu:after,#cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}
#cssmenu #head-mobile{display:none}
#cssmenu > ul{float:right;}
#cssmenu > ul > li{float:left; box-sizing:border-box; padding: 0 20px;}
#cssmenu > ul > li > a{text-transform: uppercase; font-size:18px;letter-spacing:1px; color:#000;font-weight:400; line-height:100px;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a{color:#5165b3}
header:hover #cssmenu > ul > li > a {color:#000;}
#cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0}
#cssmenu ul ul{position:absolute;left:-9999px; border-top: 1px solid #fff;}
#cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-ms-transition:all .25s ease;background:#1b336a; transition:all .25s ease}
#cssmenu li:hover > ul{left:auto}
#cssmenu li:hover > ul > li{height:45px}
#cssmenu ul ul ul{margin-left:100%;top:0}
#cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:0 15px;line-height:45px;width:180px;font-size:13px;text-decoration:none;color:#fff;font-weight:400;}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:rgba(255,255,255,0.8)}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#404040;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
header .sns{display:none}

#main-visual{position:relative;width:100%; height:600px;overflow:hidden;margin-top:100px;}
#main-visual .slid-txt{position:absolute;z-index:99;width:80%;font-size:28px;font-weight:200; text-align:center; top:50%; left:10%; color:#fff;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);font-weight:400}
#main-visual .slid-txt .tit{font-size:50px;font-weight:800;line-height:1.1;}
.visual-01{background:url(../images/main/visual-01.png) no-repeat 50% 50%; background-size:cover}
.visual-02{background:url(../images/main/visual-02.png) no-repeat 50% 50%; background-size:cover}
#main-visual .button-next{background:url(../images/common/main-prev.png); width:114px; height:23px;position:absolute; top:50%;left:50px;z-index:999;cursor:pointer}
#main-visual .button-prev{background:url(../images/common/main-next.png); width:114px; height:23px;position:absolute; top:50%;right:50px;z-index:999;cursor:pointer}
#main-visual .swiper-pagination-bullet{background:#fff;width:12px; height:12px;opacity:.5}
#main-visual .swiper-pagination-bullet-active{background:#fff;opacity:1}
#main-visual .swiper-pagination{bottom:30px}

#main-visual .movie{position:absolute;left:0; top:50%; width:100%; height:0; padding-bottom:70%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
#main-visual iframe,
#main-visual object,
#main-visual embed {position: absolute;z-index:9;top:0;left: 0%;width:100%;height:100%;}


.product-list{position:relative;width:90%; max-width:1200px;margin:80px auto;}
.product-list .prod-slidwrap{width:100%;max-width:1200px;overflow:hidden;}
.product-list .swiper-button-next,.product-list  .swiper-container-rtl .swiper-button-prev{right:-40px}
.product-list .swiper-button-prev,.product-list  .swiper-container-rtl .swiper-button-next{left:-40px}
.product-list .swiper-slide{border:1px solid #ddd}
.product-list .swiper-slide .con{padding:15px;text-align:center;font-size:.9rem}
.product-list .swiper-slide .con img{width:100%}
.product-list .swiper-slide .con .tit{font-size:1.3rem;text-align:center;font-weight:400}
.product-list .swiper-slide .con span{display:inline-block; width:100%; border:1px solid #ddd; height:50px; line-height:50px;margin-top:15px;padding:0 20px;text-align:left; background:url(../images/main/btn-arrow.png) no-repeat calc(100% - 20px) 50%}
.swiper-slide.slide-more{width:100%; height:auto !important;}
.swiper-slide.slide-more a{display:inline-block;position:relative;width:100%; height:100%;text-align:center;}
.swiper-slide.slide-more a span{position:absolute; top:50%; text-align:center; width:100%; left:0;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);
}
.swiper-slide.slide-more a img{width:auto}
.product-list .swiper-slide img{width:100%}
.btn-more{text-align:center; margin-top:30px}

.main-company{background:url(../images/main/com-bg.png);padding:150px 0}
.main-company > div{color:#fff;width:90%; max-width:1200px; margin:0 auto;}
.main-company > div p{font-size:2.2rem;font-weight:700;margin-bottom:20px}

.latest-wrap{display:flex; flex-wrap:wrap;margin:80px auto 0 auto; width:90%; max-width:1200px;}
.latest-wrap .notice-wrap{width:30%;}

.latest-wrap .notice-wrap li{display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:10px}
.latest-wrap .notice-wrap li a{display:inline-block;width:calc(100% - 100px);text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;overflow:hidden;}
.latest-wrap .notice-wrap li span{display:inline-block; width:100px; font-size:.9rem;text-align:right; color:#888}
.latest-wrap .gallery{width:70%; padding-left:50px}
.latest-wrap .gallery ul{display:flex; flex-wrap:wrap; justify-content:space-between}
.latest-wrap .gallery li{margin-top:10px;position:relative;width:calc(33.3% - 10px);overflow:hidden}
.latest-wrap .gallery li a{display:inline-block; width:100%; height:0; padding-bottom:65%;}
.latest-wrap .gallery li img{position:absolute; top:50%; left:0; width:100%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.main-ban{display:flex; flex-wrap:wrap;justify-content:space-between;margin:80px auto 0 auto;width:90%; max-width:1200px;}
.main-ban > div{width:calc(50% - 15px);text-align:center; color:#fff; font-size:1.8rem;font-weight:500}
.main-ban > div a{display:inline-block; width:100%; padding:40px 20px}
.main-ban > div.bg-tech{background:url(../images/main/tech-bg.png) no-repeat 50% 50%; background-size:cover}
.main-ban > div.bg-online{background:url(../images/main/online-bg.png) no-repeat 50% 50%; background-size:cover}

footer{width:100%; background:#333333;color:#fff;padding:40px 0;margin-top:80px}
footer > div{width:90%; max-width:1200px;margin:0 auto;font-size:.9rem}
footer > div strong{font-size:1.05rem}
footer > div span{display:inline-block; margin-right:25px}

.sub-visual{background:#000;margin-top:100px; color:#fff}
.sub-tit{position:relative;width:90%;padding:100px 0;text-align:center;max-width:1200px; margin:0 auto;}
.sub-tit h2{font-size:2.5rem}
.bg-01{background:url(../images/sub/bg-01.jpg) no-repeat 50% 50%; background-size:cover}
.bg-02{background:url(../images/sub/bg-02.jpg) no-repeat 50% 50%; background-size:cover}
.bg-03{background:url(../images/sub/bg-03.jpg) no-repeat 50% 50%; background-size:cover}
.bg-04{background:url(../images/sub/bg-04.jpg) no-repeat 50% 50%; background-size:cover}
.bg-05{background:url(../images/sub/bg-05.jpg) no-repeat 50% 50%; background-size:cover}
.bg-06{background:url(../images/sub/bg-06.jpg) no-repeat 50% 50%; background-size:cover}
.bg-07{background:url(../images/sub/bg-07.jpg) no-repeat 50% 50%; background-size:cover}


#sub-container{width:90%; margin:80px auto; max-width:1200px;}
#sub-container h3,.company-prod h3{text-align:center; font-size:2.3rem;font-weight:600;margin-bottom:50px; color:#111}
#sub-container h4{text-align:left; font-size:1.8rem;font-weight:600;margin-bottom:20px; color:#111;margin-top:50px}
#sub-container h5{text-align:left; font-size:1.5rem;font-weight:600;margin-bottom:10px; color:#3242a4;margin-top:30px;background:url(../images/sub/ico-h5.png) no-repeat 0 50%; padding-left:15px}
.company-prod h3{color:#fff;margin-bottom:30px}

.map-info{display:flex; flex-wrap:wrap;margin-top:30px}
.map-info > div{display:flex; flex-wrap:wrap;align-items:center;width:40%}
.map-info > div em{width:80px;}
.map-info > div span{width:calc(100% - 80px);padding-left:20px}
.map-info > div span strong{display:block;margin-bottom:5px; font-size:1rem}
.map-info > div:last-child{ width:20%;color:#fff; text-align:center;}
.map-info > div:last-child a{display:inline-block; width:100%;background:#1b336a ;padding:20px 10px}

.cert-list {display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:50px}
.cert-list li{width:calc(25% - 20px);cursor:pointer;margin-bottom:30px}
.cert-list li img{max-width:100%;border:15px solid #21478d;border-bottom:15px solid #163368;border-top:15px solid #163368;box-shadow:10px 10px 10px rgba(0,0,0,.1);margin-bottom:15px}
.cert-list li strong{font-weight:600}

.gretting-wrap{text-align:left;font-size:1rem}
.gretting-wrap img{display:block;margin:10px auto;}
.gretting-wrap .name{text-align:right; display:inline-block; width:100%;margin-top:20px}
.gretting-wrap .name strong{font-size:1.2em}

.company-info{display:flex; flex-wrap:wrap;margin-top:70px;border-top:1px solid #ddd;padding-top:70px}
.company-info li{width:50%;display:flex; flex-wrap:wrap;margin-top:10px}
.company-info li strong,.company-info li span{display:inline-block;}
.company-info li strong{color:#222;font-weight:500;width:100px;}
.company-info li strong:before{content:"- "}
.company-info li span{width:calc(100% - 100px)}

.overview-bg{margin-bottom:50px;background:url(../images/sub/overview.jpg);background-size:cover;padding:150px 50px;color:#fff;font-size:1.1rem;text-align:center}
.overview-bg strong{display:block;font-size:2rem; line-height:1.3;margin-bottom:20px}
.company-prod{background:url(../images/sub/compord-bg.jpg) no-repeat 50% 50%; background-size:cover; padding:150px 0;color:#fff;text-align:center;}
.company-prod .txt{max-width:1200px; width:90%; margin:0 auto}

.ide{display:flex; flex-wrap:wrap; justify-content:space-between;background:#3242a4; color:#fff}
.ide li{width:25%;;padding:50px 30px;text-align:center}
.ide li:nth-child(even){background:rgba(0,0,0,.3)}
.ide li span{display:block;margin-bottom:10px}

.point li{display:flex; flex-wrap:wrap;margin-top:10px}
.point li em{width:40px; height:40px; line-height:40px; background:#3242a4; color:#fff; display:inline-block;text-align:center; border-radius:100%;}
.point li span{margin-top:10px;padding-left:10px; display:inline-block; width:calc(100% - 40px)}
.point.w2{display:flex; flex-wrap:wrap;}
.point.w2 li{width:50%}

.ide2,.vision,.value{text-align:center}
.ide2 .tit,.vision .tit,.value .tit{font-size:2rem; color:#3242a4;font-weight:600}
.ide2 .tit span,.vision .tit span,.value .tit span{border-bottom:1px solid #3242a4}
.ide2 > div{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:30px}
.ide2 > div dl{width:30%;border:1px solid #ddd;padding:30px 20px}
.ide2 > div dt{color:#3242a4; font-weight:600; font-size:1.2em;margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid #ddd}
.ide2 > div dt span{display:block;;margin-bottom:10px; }
.ide2 > div dd{color:#666; font-size:.9em}

.vision,.value{margin-top:50px;}
.vision ul{margin-top:50px; position:relative;font-size:0}
.vision ul:after{content:'';position:absolute;z-index:-1;width:250px; height:250px;left:50%; top:55%; border:3px dashed #ddd; border-radius:50%;-webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.vision li{position:relative;display:inline-block;width:250px;height:0; padding-bottom:250px;background:#d57e17;border-radius:100%;margin:10px;font-size:1rem;box-shadow:5px 5px 5px rgba(0,0,0,.3)}
.vision li:nth-child(3){background:#42a57c;margin:10px 20px}
.vision li:nth-child(4){background:#4e42a5;margin:10px 20px}
.vision li p{position:absolute;top:50%; width:80%; left:10%;font-size:1.25em; color:#fff;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);font-weight:600}
.vision li p span{display:block;font-size:.8em; font-weight:400;margin-top:5px}

.value ul{display:flex; flex-wrap:wrap;justify-content:space-between;margin-top:30px;background:#3242a4}
.value li{width:33.3%;padding:40px;font-size:.9em;color:#fff}
.value li:nth-child(even){background:rgba(0,0,0,.2)}
.value li strong{display:block; width:100%;font-size:1.4em;color:#f7eb63;margin-bottom:5px}

.history-wrap{display:flex; flex-wrap:wrap}
.history-wrap .history-con{width:33.3%;border-top:1px solid #ddd;padding:30px 20px 70px 40px}
.history-wrap .history-con p{position:relative;font-size:1.5em;font-weight:600; color:#3242a4;margin-bottom:15px}
.history-wrap .history-con p:before{content:'';position:absolute;width:14px; height:14px; border:4px solid #3242a4;border-radius:30px;left:-23px;top:-37px;background:#fff}
.history-wrap .history-con p:after{content:'';position:absolute;z-index:-1;width:1px;height:50px;background:#ddd;left:-17px;top:-30px}
.history-wrap .history-con li{display:flex; flex-wrap:wrap;line-height:1.5; font-size:0.95em; color:#666}
.history-wrap .history-con li img{max-width:100%;margin-top:10px}

.organ{position:relative;margin:50px auto;text-align:center}
.organ .ceo{position:relative;display:inline-block; width:100%;max-width:200px; height:60px; background:#21478d;color:#fff;margin:0 auto}
.organ .ceo:after{content:"";position:absolute;z-index:-1;width:1px; height:40px;background:#ddd; left:50%;bottom:-40px}
.organ .ceo span,.organ .depth2 dt span{display:inline-block;position:absolute; width:100%;top:50%;left:0;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.organ .depth1 dl{width:45%;float:right;display:flex; flex-wrap:wrap; align-items:center}
.organ .depth1 > div{overflow:hidden;position:relative;}
.organ .depth1 > div:after{content:''; position:absolute; width:1px; height:calc(100% + 30px); background:#ddd; left:50%;}
.organ .depth1 > div:before{content:''; position:absolute; width:5%; height:1px; background:#ddd; left:50%;top:50%}
.organ .depth1 dt{width:50%; max-width:200px;background:#2996c9;color:#fff; height:60px;position:relative }
.organ .depth1 dt span{position:absolute; top:50%; left:0; padding:0 5px; width:100%;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.organ .depth1 dd{background:#f6f6f6;width:50%; max-width:200px; padding:20px; text-align:left;line-height:1.5;margin-left:20px;position:relative}
.organ .depth1 dd:before{content:''; position:absolute; width:20px; height:1px; background:#ddd; left:-20px;top:50%}
.organ .depth2{clear:both;display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:70px;position:relative;}
.organ .depth2:after{content:"";position:absolute;z-index:-1;width:1px; height:40px; background:#ddd; top:-70px;left:50%;}
.organ .depth2 dl{position:relative;width:20%;padding:0 10px }
.organ .depth2 dl:before{content:"";position:absolute;z-index:-1;width:100%; height:1px; background:#ddd; top:-35px;left:50%;}
.organ .depth2 dl:last-child:before{left:auto; right:50%}
.organ .depth2 dt{position:relative;background:#85c226; height:60px;color:#fff}
.organ .depth2 dt:before{content:"";position:absolute;z-index:-1;width:1px; height:40px;background:#ddd; left:50%;top:-35px}
.organ .depth2 dd{background:#f6f6f6; padding:15px 10px;margin-top:5px}

.partner{display:flex; flex-wrap:wrap;}
.partner li{width:25%}
.partner li img{width:100%}

select#srch_cate{display:none}

.equi-wrap{display:flex; flex-wrap:wrap;}
.equi-wrap li{position:relative;width:calc(25% - 1px);margin-right:1px}
.equi-wrap li img{max-width:100%}
.equi-wrap li span{position:absolute;bottom:0; left:0;display:inline-block; width:100%; background:rgba(0,0,0,.8); color:#fff;padding:10px 20px}

.step{display:flex; flex-wrap:wrap; justify-content:space-between}
.step li{position:relative;width:calc(25% - 20px);border:2px solid #3242a4;padding:30px;text-align:center;}
.step li:nth-child(n+5){width:calc(33.3% - 20px);margin-top:30px}
.step li span{display:block;margin-bottom:10px}
.step li:after{content:'';position:absolute;right:-15px;top:50%; margin-top:-15px; width:30px; height:30px; background:url(../images/sub/step-arrow.png); background-size:cover} 

.prod-list{display:flex; flex-wrap:wrap; justify-content:space-between}
.prod-list li{position:relative;width:calc(50% - 10px)}
.prod-list li img{width:100%}
.prod-list li span{position:absolute;top:50%; left:0; width:100%;color:#fff; font-size:2rem;font-weight:600;text-align:center;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.prod-list li:nth-child(n+3){margin-top:20px}
.dot-list li{background:url(../images/sub/ico-dot.png) no-repeat 0 7px;padding-left:10px;margin-top:10px}
.dot-list.w2{display:flex; flex-wrap:wrap}
.dot-list.w2 li{width:50%}

.sidebar{margin:100px 0; height:1px; width:100%; background:#ddd;border:0}

.imgcon-flex{display:flex; flex-wrap:wrap;align-items:center}
.imgcon-flex .img{width:40%;}
.imgcon-flex .img img{max-width:100%;}
.imgcon-flex .con{width:60%; padding-left:50px}
.imgcon-flex .con h4{margin-top:0 !important}
.imgcon-flex .con h4 span{font-weight:400; font-size:.8em}

.prod-flexwrap{display:flex; flex-wrap:wrap; justify-content:space-between}
.prod-flexwrap li{width:calc(50% - 20px)}
.prod-flexwrap li img{width:100%}

.prod-etc{display:flex; flex-wrap:wrap; }
.prod-etc li{width:25%;border:1px solid #fff;}
.prod-etc li img{max-width:100%}


	/*온라인문의*/
.sub_time_wrap{width:100%; overflow:hidden; display:table;}
.sub_time_wrap > div {width:50%; display:table-cell;}
.time_bg {text-align:center; vertical-align: middle; background-image:url(/images/sub/time_bg.jpg); background-size:cover; background-position:center; background-repeat:no-repeat; color:#fff; font-size:60px; font-weight:600;}
.time_tit {font-size:33px; color:#1b336a; font-weight:300;}
.time_txt {padding:50px; box-sizing:border-box; background: #eef6f9; text-align: center;}
.time_w  {width:450px; margin: 0 auto; overflow:hidden; text-align: left;}
.time_w li {width:100%; overflow:hidden; border-bottom: 1px dashed #ddd; padding-bottom: 15px; margin-bottom: 15px; font-size:20px; font-weight: 500;}
.time_w li:first-child {border-top: 1px dashed #ddd; padding-top: 15px;}
.time_w  div:nth-child(2n-1) {width:100px; float:left; overflow:hidden;color:#777;}
.time_w  div:nth-child(2n) {width:calc(100% - 100px); float:left; overflow:hidden; color:#000; font-weight:500;}
.time_c {margin: 5px 0 20px 0; font-size:22px; color:#4f75c2; line-height: 1.2;}
.time_c span {font-size:16px;}
.time_txt div {font-weight: 300;}	

.board-tab{display:flex; flex-wrap:wrap;margin-bottom:20px}
.board-tab li{width:25%;border-top:1px solid #fff;border-left:1px solid #fff}
.board-tab li a{height:60px; line-height:60px;width:100%;display:inline-block;;background:#f6f6f6;text-align:center}
.board-tab li.active a{background:#1b336a; color:#fff}


.quick-sns{position:fixed;z-index:999; top:45%;right:30px; width:50px;}
.quick-sns a{display:inline-block;width:50px; height:50px; background:#f6f6f6; border-radius:100%;text-align:center; line-height:50px;margin-top:10px}
.quick-sns a img{width:30px}

.coming{text-align:center}

.img-box.w3 {font-size:0}
.img-box.w3 img{width:calc(100%/3 - 10px); margin:0 5px}

.img-w2{display:flex; flex-wrap:wrap;justify-content:space-between;margin-bottom:20px}
.img-w2 li{width:calc(100%/2 - 20px);}
.img-w2 li img{width:100%;}
.img-w2 li:nth-child(n+3){margin-top:40px}

.txt-img{display:flex; flex-wrap:wrap;justify-content:space-between}
.txt-img li{width:calc(100%/3 - 10px);text-align:center}
.txt-img li img{display:block; width:100%;margin-bottom:10px}
.txt-img p.tit{background:#222; color:#fff; padding:10px}

.robot-wrap{overflow:hidden;}
.robot-wrap .img{float:left;display:flex; flex-wrap:wrap;justify-content:space-between;width:calc(100% - 400px); padding-right:50px}
.robot-wrap .img li{width:calc(50% - 5px)}
.robot-wrap .img li:nth-child(n+3){margin-top:10px}
.robot-wrap .dot-list{float:right;width:400px}
.robot-wrap .con{float:right;width:400px}
#sub-container .robot-wrap .con h4{margin-top:0}
#sub-container .robot-wrap .con h4 span{font-weight:400; font-size:.8em}

@media (max-width:1200px){
#cssmenu > ul > li{padding:0 15px}
#cssmenu > ul > li > a{font-size:17px}

.organ .depth1 dt{width:50%; max-width:150px;}
.organ .depth1 dd{max-width:170px;font-size:13px; padding:15px}
.organ .depth1 dd:before{content:''; position:absolute; width:20px; height:1px; background:#ddd; left:-20px;top:50%}

}



@media screen and (max-width:1024px){

header {min-height:70px; background: #fff; border-bottom: none; position:fixed;}

.logo img {left:15px;}
.logo{position:absolute;top:0;left: 0;width:100%;height:70px; line-height:70px; text-align:center;float:none}
nav{width:100% !important; margin:0 auto;}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none; background: #1b336a;}
#cssmenu ul li{width:100%;border-bottom:1px solid rgba(255,255,255,0.2);}
#cssmenu > ul > li {padding:0 !important}
#cssmenu > ul > li > a{line-height:46px !important; padding-left:10px; font-size:16px; color:#fff;}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a {color:#fff;}
#cssmenu ul li.active {background:#fff !important;-webkit-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto;}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0;}
#cssmenu > ul > li{float:none;}
#cssmenu ul ul li {background:#f9f9f9;}
#cssmenu ul ul ul li a{padding-left:35px;}
#cssmenu ul ul li a{color:#000;background:none;}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#000 !important;}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left;}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none;}
#cssmenu #head-mobile{display:block;height:70px;color:#000;font-size:12px;font-weight:700;}
.button{width:55px;height:70px;position:absolute;right:0;top:0;cursor:pointer;z-index: 12399994; color:#000;}
.button:after{position:absolute;top:35px;right:20px;display:block;height:8px;width:20px;border-top:2px solid #000;border-bottom:2px solid #000;content:'';}
.button:before{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;position:absolute;top:29px;right:20px;display:block;height:2px;width:20px;background:#000;content:'';}
.button.menu-opened:after{-webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:33px;border:0;height:2px;width:19px;background:#000;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.button.menu-opened:before{top:33px;background:#000;width:19px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid rgba(255,255,255,0.2);height:46px;width:46px;cursor:pointer;}
#cssmenu .submenu-button.submenu-opened{background:rgba(255,255,255,0.7);}
#cssmenu ul ul .submenu-button{height:34px;width:34px;}
#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#fff;content:'';}
#cssmenu ul ul .submenu-button:after{top:15px;right:13px;}
#cssmenu .submenu-button.submenu-opened:after{background:rgba(0,0,0,0.2);}
#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#fff;content:'';}
#cssmenu ul ul .submenu-button:before{top:12px;right:16px;}
#cssmenu .submenu-button.submenu-opened:before{display:none;}
#cssmenu ul ul ul li.active a{border-left:none;}
header:hover #cssmenu > ul > li > a {color:#fff;}
#cssmenu ul ul li a {width:100%  !important;}
#cssmenu ul ul li:hover {background: #eee;}

header .sns{position:absolute;z-index:999;top:20px;right:50px;display:block; width:150px;text-align:center;}
header .sns a{display:inline-block;width:25px;margin:0 5px}

#main-visual{margin-top:70px; height:500px}
.sub-visual{margin-top:70px}


.ide li{width:50%}
.ide li:nth-child(3){background:rgba(0,0,0,.3)}
.ide li:nth-child(4){background:none}

.point.w2 li{width:100%}

.ide2 .tit, .vision .tit, .value .tit{font-size:1.6rem}
.ide2 > div dl{width:calc(32%)}

.product-list{width:80%;margin:50px auto}
.product-list .swiper-button-next, .product-list .swiper-container-rtl .swiper-button-prev{right:-25px}
.product-list .swiper-button-prev, .product-list .swiper-container-rtl .swiper-button-next{left:-25px}

#sub-container{margin:60px auto;font-size:16px}
#sub-container h3{font-size:1.9rem;margin-bottom:30px}
#sub-container h4{font-size:1.2rem}

.cert-list{justify-content:flex-start;}
.cert-list li{width:calc(33.3% - 10px);margin-right:15px;margin-bottom:30px}
.cert-list li:nth-child(3n){margin-right:0}

.gretting-wrap strong{font-size:1.5rem}
.gretting-wrap img{width:80%; max-width:400px}

.map-info > div{font-size:1rem}

.history-wrap .history-con{width:50%}

.partner li{width:33.3%}


.latest-wrap .notice-wrap,.latest-wrap .gallery{width:100%}
.latest-wrap .gallery{padding-left:0;margin-top:50px}
.main-ban > div{width:calc(50% - 10px);font-size:1.4rem}

.prod-list li span{font-size:1.5rem}

.step li,.step li:nth-child(n+5){width:calc(33.3% - 20px);padding:20px;font-size:.9rem}
.step li:nth-child(n+4){margin-top:30px}

.quick-sns{display:none}
.dot-list.w2 li{width:100%}

.img-w2 li{width:calc(100%/2 - 10px);}
.img-w2 li:nth-child(n+3){margin-top:20px}

.robot-wrap .img{width:calc(100% - 300px);padding-right:30px}
.robot-wrap .dot-list,.robot-wrap .con{width:300px}
.robot-wrap .dot-list li:first-child{margin-top:0}

.organ .depth1 dt{width:50%; max-width:130px;font-size:16px}
.organ .depth1 dd{max-width:170px;font-size:13px; padding:15px}
.organ .depth1 dd:before{content:''; position:absolute; width:20px; height:1px; background:#ddd; left:-20px;top:50%}

}

@media(max-width:768px){
.logo img{width:100px}
#main-visual{height:350px}
#main-visual .slid-txt{font-size:17px}
#main-visual .slid-txt .tit{font-size:35px}

#sub-container{margin:30px auto;font-size:13px}
#sub-container h3,.company-prod h3{font-size:1.3rem;margin-bottom:25px}
#sub-container h5{font-size:1.1rem;margin-top:20px}

.overview-bg{padding:70px 30px;font-size:.75rem}
.gretting-wrap,.company-prod .txt{font-size:.85rem}
.gretting-wrap strong{font-size:1.1rem}
.gretting-wrap br{display:none}
.gretting-wrap img{width:80%; max-width:250px}
.company-info {padding-top:50px}
.company-info li{width:100%}
.company-prod{padding:70px 0}


.map iframe{height:350px}
.map-info > div{width:100%;margin-top:20px}
.map-info > div:last-child{width:100%}

.cert-list{margin-top:30px;justify-content:space-between;}
.cert-list li{width:calc(50% - 10px);}
.cert-list li{margin-right:0}
.cert-list li img{border: 10px solid #21478d;border-bottom: 10px solid #163368;border-top: 10px solid #163368;}

.history-wrap .history-con{width:100%}

.organ{margin-top:30px}
.organ .depth2{margin-top:0px}
.organ .depth2 dl{width:50%;margin-top:20px}
.organ .depth2 dl:before{height:calc(100% + 50px); width:1px;top:0; left:auto; right:-1px}
.organ .depth2 dt:before{content:'';width:10px; height:1px;top:50%;left:auto;right:-10px}
.organ .depth2 dl:nth-child(even) dt:before{left:-10px; right:auto}
.organ .depth2 dl:nth-child(even):before{display:none} 
.organ .depth2 dl:nth-child(n+3):before{display:none}
.organ .depth1 dt{width:100%; max-width:90%;}
.organ .depth1 dt span{font-size:13px}
.organ .depth1 dd{width:100%;max-width:90%;font-size:13px; padding:15px; margin-left:0}
.organ .depth1 dd:before{display:none}
.organ .depth2:after{top:0}

.partner li{width:50%}

.product-list .swiper-slide .con p{display:none}
.product-list .swiper-slide .con p.tit{display:block;font-size:1rem;letter-spacing:-1px}

.main-company{padding:100px 0}
.main-company > div{font-size:.85rem;text-align:center}
.main-company > div p{font-size:1.5rem}
.main-company > div br{display:none}
.latest-wrap .gallery li:nth-child(n+3){display:none}
.latest-wrap .gallery li{width:calc(50% - 5px)}
.main-ban,.latest-wrap{margin-top:30px}
.main-ban > div{width:100%;font-size:1.2rem}
.main-ban > div:last-child{margin-top:10px}

footer > div{font-size:.75rem}

.sub-tit{padding:50px 0; font-size:.75rem}
.sub-tit h2{font-size:1.5rem}


.ide2 > div dl{width:100%}
.ide2 > div dl:nth-child(n+2){margin-top:10px}
.ide li span img{max-width:50px}
.ide li{padding:30px 10px}

.vision ul{margin-top:20px}
.vision li{width:100%;;height:auto; padding:20px;border-radius:15px}
.vision li p{font-size:.9rem;position:relative; top:auto;-webkit-transform: translateY(0%); -moz-transform: translateY(0%);-ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%);}
.vision li:nth-child(3),.vision li,.vision li:nth-child(4){margin:10px auto}
.value li{width:100%}

.map-info > div em{width:60px}
.map-info > div em img{max-width:100%}
.map-info > div span{width:calc(100% - 60px); font-size:.8rem}

.prod-list li{width:calc(50% - 5px)}
.prod-list li:nth-child(n+3){margin-top:10px}
.prod-list li span{font-size:1rem;padding:0 10px}

.imgcon-flex .img{width:100%}
.imgcon-flex .con{width:100%;padding-left:0;margin-top:15px}
.sidebar{margin:50px 0}

.equi-wrap li{width:calc(50% - 1px)}

.step li,.step li:nth-child(n+5){width:100%;font-size:.8rem}
.step li:nth-child(n+2){margin-top:20px}
.step li:after{right:auto; left:50%; margin-left:-15px;top:auto; bottom:-15px;transform:rotate(90deg)}
.prod-etc li{width:33.3%}


/* 게시판 */
.estimateW .cellTh{font-size:.8rem !important}
.estimateW .tableRow div.wd30 {display:flex !important; flex-wrap:wrap; justify-content:space-between}
.wd30 input, .wd30 select{width:calc(33.3% - 10px) !important; min-width:auto}
.list tbody td.subject a{width:100%}

.swiper-button-prev, .swiper-button-next{width:15px !important; height:24px !important}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{background-size:cover !important}


.sub_time_wrap > div {width:100%; display:block;}
.time_bg {height: 140px;}

.time_tit {font-size:20px; line-height: 1.3;}
.time_c {font-size:16px; margin: 5px 0 10px 0;}
.time_txt div, .time_c span {font-size:12px;}
.time_txt {padding: 20px;}

.board-tab li{width:33.3%}

.img-box.w3 img,.txt-img li{width:100%; margin:0 0 10px 0}
.txt-img li{margin-bottom:30px}

.img-w2 li{width:100%;}
.img-w2 li:nth-child(n+2){margin-top:10px}

.robot-wrap .img,.robot-wrap .dot-list,.robot-wrap .con{width:100%;}
.robot-wrap .img{padding:0}
.robot-wrap .dot-list{margin-top:20px}
#sub-container .robot-wrap .con h4{margin-bottom:0}
.imgcon-flex .img img{width:100%}
}