#main-visual{position:relative;width:100%; height:100vh;overflow:hidden}
#main-visual .slid-txt{position:absolute;z-index:99;width:80%;font-size:28px;font-weight:200; text-align:left; 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%);text-shadow:5px 5px 5px rgba(0,0,0,.5)}
#main-visual .slid-txt .tit{font-size:80px;font-weight:600;margin-bottom:20px;line-height:1.1;font-family:'GmarketSans';}
.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}
.visual-03{background:url(../images/main/visual-01.png) no-repeat 50% 50%; background-size:cover}
#main-visual .button-next{background:url(../images/common/main-prev.png) 0 0; width:50px; height:23px;position:absolute; top:50%;left:50px;z-index:999;cursor:pointer}
#main-visual .button-prev{background:url(../images/common/main-next.png) 100% 0; width:50px; 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}

.prod-area{margin:80px auto; width:90%; max-width:1400px;}
.prod-area h2{font-size:3rem; letter-spacing:-1px}
.prod-area h2 span{display:block;font-weight:normal;font-size:1.55rem}
.prod-wrap ul{display:flex; flex-wrap:wrap; justify-content:space-between;overflow:hidden;}
.prod-wrap li *{-webkit-box-sizing: border-box;  box-sizing: border-box;  -webkit-transition: all 0.45s ease-in-out;  transition: all 0.45s ease-in-out;}
.prod-wrap li{width:calc(25% - 20px);margin-top:30px;color:#fff;}
.prod-wrap li:first-child{width:calc(50% - 14px)}
.prod-wrap li:first-child a{width:100%; height:0; padding-bottom:calc(40% - 10px);}
.prod-wrap li a{display:inline-block;position:relative;width:100%; height:0; padding-bottom:80%;overflow:hidden;}
.prod-wrap li strong{font-family:'GmarketSans';font-size:2rem;display:block;}
.prod-wrap li span{position:absolute;z-index:99;width:80%; top:50%; left:10%;text-align:center;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);line-height:1.2}
.prod-wrap li:first-child span{top:50px; text-align:left;-webkit-transform: translateY(0%); -moz-transform: translateY(0%);-ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%);}
.prod-wrap li div{position:absolute;z-index:9;width:100%; height:100%;}
.prod-wrap li.prod-01 div{background:url(../images/main/prod-01.jpg) no-repeat 50% 50%; background-size:cover}
.prod-wrap li.prod-02 div{background:url(../images/main/prod-02.jpg) no-repeat 50% 50%; background-size:cover}
.prod-wrap li.prod-03 div{background:url(../images/main/prod-03.jpg) no-repeat 50% 50%; background-size:cover}
.prod-wrap li.prod-04 div{background:url(../images/main/prod-04.jpg) no-repeat 50% 50%; background-size:cover}
.prod-wrap li.prod-05 div{background:url(../images/main/prod-05.jpg) no-repeat 50% 50%; background-size:cover}
.prod-wrap li.prod-06 div{background:url(../images/main/prod-06.jpg) no-repeat 50% 50%; background-size:cover}
.prod-wrap li.prod-07 div{background:#848c94; background-size:cover}
.prod-wrap li:hover div{ -webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2); -o-transform: scale(1.2);transform: scale(1.2);}

.company-bg{background:url(../images/main/company-bg.png) no-repeat 50% 50%; padding:220px 0;text-align:center;color:#fff;font-family:'GmarketSans';;font-size:1.3rem}
.company-bg .tit{font-size:2.8rem;margin-top:0; line-height:1.3}
.company-bg p{margin-top:20px}
.company-bg .btn {margin-top:40px}
.company-bg .btn a{width:100%; max-width:250px;border:1px solid rgba(255,255,255,.5); display:inline-block; height:60px; line-height:60px;font-size:1rem}
.company-bg .btn a:hover{color:#000; background:#fff}

.quick{display:flex; flex-wrap:wrap;width:90%; max-width:1400px;margin:100px auto;background:url(../images/main/quick-bg.png) no-repeat 100% 100%;background-size:cover;text-align:center; color:#fff;font-family:'GmarketSans';}
.quick li{width:25%;border-left:1px solid rgba(255,255,255,.3);font-size:1.5rem}
.quick li a{display:inline-block; width:100%;padding:200px 0;}
.quick li a:hover{background:rgba(23,186,235,.5)}
.quick li:first-child{border-left:0}
.quick li img{display:block;margin:0 auto 15px auto}

footer{border-top:1px solid #ddd;padding:50px 0;}
footer > div{position:relative;width:90%; max-width:1400px;margin:0 auto;color:#888}
footer > div .btn-top{position:absolute; right:0; top:50%; margin-top:-31px;margin-right:0}
footer > div .copy{margin-top:20px}
footer > div span{display:inline-block;margin-right:20px}

.sub-visual{position:relative;height:500px;}
.bg-01{background:#000 url(../images/sub/bg-01.png) no-repeat 50% 50%;background-size:cover}
.bg-02{background:#000 url(../images/sub/bg-02.png) no-repeat 50% 50%;background-size:cover}
.bg-03{background:#000 url(../images/sub/bg-03.png) no-repeat 50% 50%;background-size:cover}
.bg-04{background:#000 url(../images/sub/bg-04.png) no-repeat 50% 50%;background-size:cover}
.bg-05{background:#000 url(../images/sub/bg-05.png) no-repeat 50% 50%;background-size:cover}

.sub-visual .sub-tit{position:absolute;top:55%; left:0; width:100%; text-align:center; color:#fff;font-size:24px;font-weight:200;-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%);-ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);font-family:'GmarketSans';}
.sub-visual .sub-tit h2{font-size:50px;font-weight:400;}

#sub-container{padding:100px 0;width:90%; max-width:1200px;margin:0 auto;font-size:18px; color:#666}
#sub-container .h3-tit{color:#1366ad; font-weight:500; text-align:center;font-family:'Montserrat';margin-bottom:30px;line-height:1}
#sub-container h3{font-size:35px;text-align:center; letter-spacing:-1px;font-family:'GmarketSans';line-height:1.2;margin-bottom:30px;color:#000;font-weight:400}
#sub-container h4{position:relative;font-size:28px;text-align:left; letter-spacing:-1px;font-family:'GmarketSans';line-height:1.2;margin-bottom:20px;color:#0b7cc1;font-weight:400;margin-top:80px}
#sub-container h4.mt-0{margin-top:0}
#sub-container h5{font-size:22px;text-align:left; letter-spacing:-1px;font-family:'GmarketSans';line-height:1.2;margin-bottom:10px;color:#333;font-weight:400;margin-top:40px}
#sub-container h5:before{content:"- "}
#sub-container h6{font-size:20px;text-align:left; letter-spacing:-1px;font-family:'GmarketSans';line-height:1.2;margin-bottom:10px;color:#1366ad;font-weight:400;margin-top:30px}

.list,.noData{font-size:.9rem}

.greeting-tit{text-align:center;font-size:1.3rem}
.greeting-tit strong{color:#0b7cc1;font-family:'GmarketSans';display:block;font-size:1.6rem;font-weight:400}

.greeting-img,.prod-img{margin:30px auto;display:flex; flex-wrap:wrap}
.greeting-img li,.prod-img li{width:33.3%}
.greeting-img li img{width:100%}
.greeting-img.w2,.prod-img.w2 {justify-content:space-between}
.greeting-img.w2 li{position:relative;width:calc(50% - 5px)}
.greeting-img.w2 li span{position:absolute;z-index:99;left:0; bottom:0;display:inline-block; width:100%; background:rgba(0,0,0,.5); color:#fff; padding:10px 20px}
.company-info{display:flex; flex-wrap:wrap;}
.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:400;width:100px;}
.company-info li strong:before{content:"- "}
.company-info li span{width:calc(100% - 100px)}

.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:#0b7cc1;margin-bottom:15px;font-family:'GmarketSans';}
.history-wrap .history-con p:before{content:'';position:absolute;width:14px; height:14px; border:4px solid #0b7cc1;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:#0b7cc1;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 .depth1 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{display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:70px;}
.organ .depth1 dl{position:relative;width:25%;padding:0 10px }
.organ .depth1 dl:before{content:"";position:absolute;z-index:-1;width:100%; height:1px; background:#ddd; top:-35px;left:50%;}
.organ .depth1 dl:last-child:before{left:auto; right:50%}
.organ .depth1 dt{position:relative;background:#32b292; height:60px;color:#fff}
.organ .depth1 dt:before{content:"";position:absolute;z-index:-1;width:1px; height:40px;background:#ddd; left:50%;top:-35px}

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

.cert-list {display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:50px}
.cert-list li{position:relative;width:calc(30% - 20px);cursor:pointer;margin-bottom:30px;text-align:center}
.cert-list li img{max-width:100%;box-shadow:10px 10px 10px rgba(0,0,0,.1);margin-bottom:15px}
.cert-list li strong{font-weight:600}

.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:#0b7cc1 ;padding:20px 10px}

.prod-img{background:#f6f6f6}
.prod-img li img{width:100%;}
.prod-img.w2 li{width:50%;text-align:center}

.num-list li{display:flex; flex-wrap:wrap;margin-top:10px}
.num-list em,.num-list span{display:inline-block;}
.num-list em{width:30px; height:30px; line-height:30px; background:#0b7cc1; color:#fff; font-family:'GmarketSans';text-align:center;border-radius:100%;font-size:.9rem;}
.num-list span{width:calc(100% - 30px);padding-left:7px;}

.box-border{border:1px solid #ddd; padding:50px 30px;text-align:center}
.dot-list li{background:url(../images/sub/ico-dot.png) no-repeat 0 11px;padding-left:10px;margin-top:10px}

.tit-overlap{display:flex; flex-wrap:wrap;justify-content:space-between;}
.tit-overlap li{position:relative;width:calc(50% - 5px);border:1px solid #ddd;margin-top:10px;padding-bottom:40px}
.tit-overlap li span{position:absolute; bottom:0;display:inline-block; background:rgba(29,82,141,1); color:#fff; width:100%;padding:10px 20px;text-align:center}
.tit-overlap li img{max-width:100%}
.tit-overlap.w4 li{width:calc(25% - 5px);}

.cfd-color{display:inline-block;color:#f9c100; margin-right:5px}
.cfd-color2{display:inline-block;color:#f90000; margin-right:5px;margin-left:15px}

.result-tbl{width:100%; table-layout:fixed;margin-top:20px;font-size:1rem; }
.result-tbl thead th{background:#d3dcf6;color:#222; font-weight:500;padding:15px 10px;border-left:1px solid #fff}
.result-tbl tbody th{background:#e6e9f1;color:#222; font-weight:500;padding:15px 10px;border-left:1px solid #fff;border-bottom:1px solid #fff}
.result-tbl tbody td{padding:15px 10px;text-align:center; border-bottom:1px solid #ddd;border-right:1px solid #ddd; }
.result-tbl tbody td:last-child{border-right:0}
.result-tbl tbody tr:last-child th{border-bottom:1px solid #ddd}

.txt-red{color:#fe0101}

/*220223추가*/
.img-w2{display:flex; flex-wrap:wrap; justify-content:space-between; margin:20px auto}
.img-w2 li{width:calc(50% - 10px)}
.img-info .tit{background:rgba(11, 124, 193, 1);padding:15px 30px; color:#fff;font-size:20px;text-align:center}
.img-info ul{background:#f6f6f6; padding:30px}
.img-info li:first-child{margin-top:0}
.img-info em{font-size:12px;vertical-align:top}

.img-tit_wrap{display:flex; flex-wrap:wrap; justify-content:space-between;margin-top:30px}
.img-tit_wrap .img{width:350px;border:1px solid #ddd}
.img-tit_wrap .img img{width:100%}
.img-tit_wrap .con{width:calc(100% - 400px);}

@media(max-width:1200px){
.prod-wrap li strong{font-size:1.5rem}
}

@media(max-width:1000px){
#main-visual {height:650px}
#main-visual .slid-txt .tit{font-size:60px}
#main-visual .slid-txt{font-size:20px}
#main-visual .button-next,#main-visual .button-prev{display:none}

.prod-area{width:90%}
.prod-area h2{font-size:2.5rem}
.prod-area h2 span{font-size:1.3rem}
.prod-wrap li{width:calc(50% - 15px);font-size:.9rem}
.prod-wrap li:first-child{width:100%}
.prod-wrap li strong{font-size:1.2rem}


.company-bg .tit{font-size:2rem}
.company-bg{font-size:1.1rem;padding:150px 0}

.quick li{font-size:1.2rem}
.quick li a{padding:130px 0}
.quick li img{max-width:80px}

footer{font-size:.9rem}

.sub-visual{height:350px}
.sub-visual .sub-tit h2{font-size:40px}
.sub-visual .sub-tit{font-size:18px}

#sub-container{font-size:16px}
#sub-container h3{font-size:30px}
#sub-container h4{font-size:24px}
#sub-container h5{font-size:19px}
.greeting-tit strong{font-size:1.3rem}
.greeting-tit{font-size:1.1rem}
.partner li{width:33.3%}
.history-wrap .history-con{width:50%}
.cert-list li{width:calc(30% - 10px)}

}

@media(max-width:768px){
#main-visual {height:500px}
#main-visual .slid-txt .tit{font-size:40px}
#main-visual .slid-txt{font-size:1rem}
.prod-area h2{font-size:2rem}
.prod-area h2 span{font-size:1.05rem}
.company-bg .tit{font-size:1.5rem}
.company-bg{font-size:.8rem;padding:100px 0}
.quick{background-position:75% 50%}
.quick li{width:50%;font-size:.9rem}
.quick li a{padding:50px 0}
.quick li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.3)}

.prod-wrap li{width:calc(50% - 10px);margin-top:20px;font-size:.8rem}
.prod-wrap li strong{font-size:1.1rem}

.quick li img{width:60px}
footer{font-size:.8rem;}
footer > div{padding-right:40px}
footer > div .btn-top{width:40px; }
footer > div .btn-top img{width:100%}

.sub-visual{height:220px}
.sub-visual .sub-tit h2{font-size:25px}
.sub-visual .sub-tit{font-size:14px}

#sub-container{font-size:13px;padding:50px 0}
#sub-container h3{font-size:23px}
#sub-container h4{font-size:20px;margin-top:40px;margin-bottom:10px}
#sub-container h5{font-size:16px;margin-top:20px}

.greeting-tit strong{font-size:1.1rem}
.greeting-tit{font-size:.9rem}
.company-info li{width:100%}
.company-info li strong{width:80px}
.company-info li span{width:calc(100% - 80px)}
.partner li{width:50%}
.history-wrap .history-con{width:100%}
.organ .depth1 dl{padding:0 5px}
.organ .depth1 dt,.organ .ceo{height:50px; line-height:50px}
.cert-list li{width:calc(50% - 10px)}
.map iframe{height:250px}
.map-info > div,.map-info > div:last-child{width:100%;margin-top:20px}
.map-info > div:first-child{margin-top:0}
.map-info > div em{width:60px;}
.map-info > div em img{max-width:100%}
.map-info > div span{width:calc(100% - 60px)}
.greeting-img li, .prod-img li,.prod-img.w2 li{width:100%}
.tit-overlap li{width:100%}
.tit-overlap.w4 li {width:50%}
.box-border{padding:20px 10px}
.mtbl-wrap{width:100%; overflow-x:auto;}
.mtbl-wrap .result-tbl{width:800px;}
.result-tbl{font-size:.8rem}
.tit-overlap li{padding-bottom:34px}
.tit-overlap li span{font-size:.6rem;padding:10px}
.dot-list li{background-size:4px;background-position:0 8px}

.img-w2 li{width:100%}
.img-w2 li img{width:100%}
.img-w2 li:nth-child(n+2){margin-top:10px}
.img-info .tit{padding:10px; font-size:16px}
.img-info ul{padding:15px 20px}

.img-tit_wrap .img,.img-tit_wrap .con{width:100%}

}