* {padding:0;margin:0;}
.displaynone{display:none!important;}
:clearfix{content:'';display:block;clear:both;}
body,th,td,textarea,h1,h2,h3,h4,h5,h6 {font-size:12px;font-family: 'Gothic', sans-serif;}
ul{list-style:none;}
a{text-decoration:none;color:#000}
/* Ŭ·¡½º */
.screen_out{display:none;font-size:0;opacity:0;text-indent:-99999px;overflow:hidden;}
.mid{width:90%;max-width:1400px;margin:180px auto 0;overflow:hidden}
.sub .mid{margin-top:100px}
.large{width:100%;margin-top:180px}
.sub .large{margin-top:100px}
.noto{font-family: 'Noto Sans KR', sans-serif;}

.sub .mid:after{content:'';display:block;clear:both;}


:root{


--fontB: 18px;
--fontM: 16px ;
--fontS: 14px;;
--fontXS : 12px;
}

/* ·Î±×ÀÎ ¸Þ´º */
#M_member_loginmenu{position:absolute;display:block;text-align:right;width:100%;z-index:100;display:none}
#M_member_loginmenu .log_inner{}
#M_member_loginmenu a{color:#fff;transition:all ease .3s;margin-left:20px;line-height:30px;font-size:12px}
#M_member_loginmenu a:hover{color:#ccc}

.left #M_member_loginmenu{text-align:left;margin-top:30px;bottom:40px;}
.left #M_member_loginmenu a{margin-left:0;margin-right:20px;}



/* ž¸Þ´º */
body.on{overflow:hidden}
#topmenu{position:fixed;top:0;left:0;z-index:1000;height:150px;width:100%;}
#wrap:not(.sub) #topmenu{transition:background ease .5s,height ease .5s}
#topmenu .inner{width:90%;margin:0 auto;height:100%;position:relative;}
#topmenu h1{position:absolute;top:50%;left:0;transform:translate(0,-50%)}
#topmenu h1 a{padding:10px;display:block;}
#topmenu .inner .menu{float:right;height:100%;}
#topmenu .inner .menu>ul{float:left;}
#topmenu .inner .menu>ul>li{float:left;position:relative;margin-top:25px;transition:margin-top ease .5s}
#topmenu .inner .menu>ul>li>a{color:#fff;letter-spacing:2px;font-size:var(--fontB);line-height:100px;display:block;padding:0 35px;}

#topmenu .inner .menu .sub_menu{background-color:#f5f5f5;display:none;white-space:nowrap;padding:15px 0;position:absolute;min-width:150px;opacity:0;left:-10px;}
#topmenu .inner .menu .sub_menu a{display:block;padding:7px 35px 7px 35px;color:#666;letter-spacing:2px;transition:all ease .3s;font-size:var(--fontS)}
#topmenu .inner .menu .sub_menu a:hover{padding-left:40px;color:#ccc;padding-right:30px}

   /* ½ºÅ©·Ñ ½Ã ¸Þ´º */
#topmenu.scroll,
.sub #topmenu{height:100px;background-color:#222}
#topmenu.scroll .inner .menu>ul>li,
.sub #topmenu .inner .menu>ul>li{margin-top:0}






/* ¸Þ´º¹öÆ° */
.menu .menu_btn{display:none;}
.menu .menu_btn{float:left;position:relative;width:40px;height:100%;margin-left:35px;z-index:3000}
.menu_btn a{display:block;padding:5px;position:absolute;right:0;top:50%;transform:translate(0,-50%);width:30px;height:30px}
.menu_btn a span{width:30px;height:2px;display:block;background-color:#fff;margin:4px 0;float:right;clear:both;transition:all ease .3s}
.menu_btn a:not(.on):hover span:first-child{width:15px;}
.menu_btn a:not(.on):hover span:nth-child(2){width:25px}
.menu_btn a:not(.on):hover span:nth-child(3){width:20px}

.menu_btn a.on span:first-child{transform:rotate(-44deg);transform-origin:top right;}
.menu_btn a.on span:nth-child(2){width:0}
.menu_btn a.on:hover span{background-color:#aaa}
.menu_btn a.on span:nth-child(3){transform:rotate(44deg);transform-origin:bottom right}

/* Àüü ¸Þ´º */
.all_menu{position:fixed;width:100%;top:0;height:0;background-color:rgba(51,51,51,0);z-index:2000;overflow:hidden;transition:background ease .5s}
.all_menu.on{background-color:rgba(51,51,51,.7)}
.all_menu .left{position:absolute;left:-35%;width:35%;background-color:#222;height:100%;padding:80px 4%;box-sizing:border-box;overflow:hidden;opacity:0}
.all_menu .cover{width:100%;height:100%;position:relative;}
.all_menu .left .menu{position:absolute;top:50%;transform:translate(0,-50%);}
.all_menu .left .menu>ul>li>a{color:#fff;font-size:15px;font-weight:600;letter-spacing:3px;line-height:50px;transition:color ease .3s;font-family: 'Noto Sans', sans-serif;}
.all_menu .left .menu>ul>li>a:hover,
.all_menu .left .menu>ul>li.on>a{color:#999}
.all_menu .left .sub_menu2{overflow:hidden;height:0;transition:all ease .5s;opacity:0}
.all_menu .left li.on .sub_menu2{opacity:1}
.all_menu .left .sub_menu2 a{color:#999;font-family: 'Noto Sans', sans-serif;font-size:12px;letter-spacing:1px;transition:color ease .3s;line-height:20px;}
.all_menu .left .sub_menu2 a:hover{color:#fff}
.all_menu .left .sns{position:absolute;bottom:0;}
.all_menu .left .sns p{display:inline-block;margin-right:15px}
.all_menu .left .sns a{display:block;width:15px;height:15px;font-size:0;text-indent:-99999px;background:url('../img/upload/img/insta.png') center;background-size:cover;transition:opacity ease .3s}
.all_menu .left .sns a:hover{opacity:.5}
.all_menu .left .sns .insta a{background-image:url('../img/upload/img/insta.png')}
.all_menu .left .sns .twitter a{background-image:url('../img/upload/img/twitter.png')}
.all_menu .left .sns .face a{background-image:url('../img/upload/img/face.png')}
.all_menu .right{position:absolute;right:-65%;width:65%;height:100%;background:url('../img/upload/img/menu_img.jpg') center;background-size:cover;padding:80px 4%;box-sizing:border-box;overflow:hidden;opacity:0}

/* ÇÏ´Ü */
footer{background-color:#222;position:relative;margin-top:180px}
.main+footer{margin-top:0;}
footer .inner{width:100%;max-width:1400px;margin:auto;overflow:hidden;position:relative;padding:70px 0}
footer .inner h2{width:25%;display:block;float:left;margin-top:30px}
footer .inner>div{float:left;color:#fff;position:relative;}
footer .inner>.info{width:50%;line-height:22px;letter-spacing:.1em;font-size:var(--fontXS);}
footer .inner>.info span{margin-right:15px}
footer .inner>.sns{width:25%}

footer .inner .sns ul{text-align:right;margin-top:25px}
footer .inner .sns li{display:inline-block;margin-left:25px}
footer .inner .sns a{display:block;width:18px;height:18px;font-size:0;text-indent:-99999px;background:url('../img/upload/img/insta.png') center;background-size:cover;transition:opacity ease .3s}
footer .inner .sns a:hover{opacity:.5}
footer .inner .sns .insta a{background-image:url('../img/upload/img/insta.png')}
footer .inner .sns .twitter a{background-image:url('../img/upload/img/twitter.png')}
footer .inner .sns .face a{background-image:url('../img/upload/img/face.png')}

#top{position:fixed;right:3%;bottom:100px;width:50px;height:50px;z-index:100;display:none}
#top a{display:block;width:100%;height:100%;text-align:center;line-height:50px;font-size:0;background:url("../img/upload/img/top_btn.png") rgba(0,0,0,.7) no-repeat center; background-size:20px;}


.header_sns .sns{line-height:100px;}
.header_sns .sns li{display:inline-block;margin-left:25px;}
.header_sns .sns li img{vertical-align:middle;}


.mid.prd_mid{margin-top:0;}
.mid.prd_mid:after{content:'';display:block;clear:both;}
.mid.prd_mid .prd_cate{float:left;width:15%;text-align:center;}
.mid.prd_mid > table{width:85%;float:left;padding-left:50px;box-sizing:border-box;margin-top:100px;}

.mid.prd_mid .prd_cate > p{width:100%;border-right:0.5px solid #ddd; border-left:0.5px solid #ddd; border-top:00px solid #ddd;border-bottom:0.5px solid #666;color:#fff;font-size:15px;line-height:60px;display:block;width:100%;letter-spacing:.1em;box-sizing:border-box;background:#666; }


.major img{width:100%;}
.major .mid > div span{text-align:center;display:block;padding:24px 0;font-size:18px;font-weight:bold;color:#222;}







/* ¸ÞÀν½¶óÀ̵å */
.slide.swiper-container {
width: 100%;
height:900px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

/* È­»ìÇ¥ */
#wrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next,
#wrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image:url('../img/upload/img/prev.png');left:10%;background-size:8px auto;width:50px;height:50px;border-radius:100px;background-color:rgba(255,255,255,0);transition:background-color ease .3s}
#wrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev{background-image:url('../img/upload/img/next.png');left:auto;right:10%}
#wrap .swiper-button-prev:hover, .swiper-container-rtl .swiper-button-next:hover{background-color:rgba(255,255,255,.3)}
#wrap .swiper-button-next:hover, .swiper-container-rtl .swiper-button-prev:hover{background-color:rgba(255,255,255,.3)}
/* remote */
#wrap .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:7%}
#wrap .swiper-pagination-bullet{width:33px;height:6px;background-color:#666;opacity:1;border-radius:0;margin:0 8px}
#wrap .swiper-pagination-bullet-active{background-color:#fff}


/* º»¹® */

/* 3´Ü ¹è³Ê */

.main .bg_box{}
.main .bg_box ul{}
.main .bg_box ul:after{content:'';display:block;clear:both}
.main .bg_box li{float:left;width:30%;margin-right:5%;box-sizing:border-box;text-align:center;}
.main .bg_box li:last-child{margin-right:0;}
.main .bg_box li a img{width:100%;height:auto;vertical-align:top;}




/* about us */
.main h2.title{color:#000;font-size:25px;letter-spacing:2px;font-weight:normal;margin-bottom:50px;}
.main .about_us>div{width:30%;margin-right:5%;float:left;border:1px solid #ccc;height:450px;box-sizing:border-box;text-align:center;background-size:cover;background-position:center}
.main .about_us>div:hover{}
.main .about_us>div:last-child{margin-right:0;}


.main .about_us .brand{background-image : url('../img/upload/img/about1.jpg')}
.main .about_us .business{background-image:url('../img/upload/img/about2.jpg')}
.main .about_us .product{background-image:url('../img/upload/img/about3.jpg')}

.main .about_us>div a{display:block;width:100%;height:100%;box-sizing:border-box;padding:0 5%;background-color:rgba(255,255,255,1);transition:background ease .5s;}
.main .about_us>div a img{margin:90px 0;opacity:.5;transition:opacity ease .5s}
.main .about_us>div a h3{font-size:var(--fontM);color:#222;font-weight:normal;letter-spacing:2px;margin-bottom:30px}
.main .about_us>div a p{font-size:var(--fontS);color:#999;line-height:20px;transition:color ease .5s}
.main .about_us>div a:hover{background-color:rgba(255,255,255,.7);}
.main .about_us>div a:hover img{opacity:1}
.main .about_us>div a:hover p{color:#222;}

/* trust */
.main .trust{overflow:hidden;display:flex;align-items:flex-end;}
.main .trust>div{float:left;width:50%}
.main .trust>div:first-child img{width:80%}
.main .trust>div:last-child{margin-top:100px}
.main .trust>div:last-child h3{font-size:30px;letter-spacing:.4em;font-weight:600;font-family: 'Noto Sans KR', sans-serif;}
.main .trust>div:last-child h4{font-size:var(--fontM);letter-spacing:.4em;font-weight:600;font-family: 'Noto Sans KR', sans-serif;margin-top:10px}
.main .trust>div:last-child h4::after{content:"";display:block;height:1px;width:10%;background-color:#000;margin:30px 0}
.main .trust>div:last-child p{font-size:var(--fontM);color:#222;letter-spacing:1px;line-height:25px}

/* ¹è³Ê */
.main .ban1{background:url('../img/upload/img/ban_back.jpg') center no-repeat;background-attachment:fixed;height:500px;background-size:cover;position:relative;}
.main .ban1 .inner{position:absolute;left:0;top:50%;transform:translate(0,-50%);text-align:center;color:#fff;width:100%}
.main .ban1 .inner h2{font-size:25px;letter-spacing:.1em;margin-bottom:15px}
.main .ban1 .inner p{margin-bottom:40px}
.main .ban1 .inner .btn a{border:1px solid #fff;display:inline-block;color:#fff;letter-spacing:.2em;padding:13px 40px;background-color:rgba(255,255,255,0);transition:all ease .3s;}
.main .ban1 .inner .btn a:hover{background-color:rgba(255,255,255,1);color:#000}

/* ÁÖ¼Ò */

.main .map .map_icon ul{max-width:1400px;margin:auto;overflow:hidden;padding:130px 0;text-align:center;background-color:#f5f5f5}
.main .map .map_icon li{width:25%;display:inline-block;text-align:center;}
.main .map .map_icon li div{text-indent:-99999px;overflow:hidden;display:block;width:50px;height:50px;margin:auto;background:url('../img/upload/img/map.png') no-repeat center;background-size:cover;margin-bottom:30px}
.main .map .map_icon li div.add{background-image:url('../img/upload/img/map.png');background-size:50px auto}
.main .map .map_icon li div.call{background-image:url('../img/upload/img/phone.png');background-size:45px auto}
.main .map .map_icon li div.mail{background-image:url('../img/upload/img/sms.png');background-size:42px auto}
.main .map .map_icon li p,
.main .map .map_icon li a{font-size:var(--fontB);color:#222;line-height:25px;transition:color ease .3s}
.main .map .map_icon li a:hover{color:#888}
.main .map .map_cover{width:1400px;max-width:100%;margin:0 auto;height:500px;}

@media (max-width:1400px){

#topmenu .inner .menu>ul>li>a{padding:0 20px}
#topmenu .inner .menu .sub_menu a{padding:7px 20px}
#topmenu .inner .menu .sub_menu a:hover{padding-left:25px}
.slide.swiper-container{height:800px}
.swiper-slide img{width:30%}

.main .trust>div:last-child h3{font-size:25px;letter-spacing:.3em}
.main .trust>div:last-child h4{font-size:14px;letter-spacing:.3em}
.main .trust>div:last-child p{font-size:12px;letter-spacing:0;line-height:25px}

}
@media (max-width:1024px){
#topmenu .inner .menu>ul{display:none}
.menu .menu_btn{display:block;}
.all_menu .left{width:50%}
.all_menu .right{width:50%}
.slide.swiper-container{height:700px}
.swiper-slide img{width:35%}
.main .trust{display:block;}
.main .trust>div{width:100%}

.main .trust>div:first-child img{width:100%}
.main .trust>div:last-child{margin-top:50px;text-align:center;}
.main .trust>div:last-child h3{font-size:20px;letter-spacing:.2em}
.main .trust>div:last-child h4{font-size:14px;letter-spacing:.2em}
.main .trust>div:last-child h4::after{margin:20px auto;}
.main .trust>div:last-child p{font-size:12px;letter-spacing:0;line-height:20px}
}
@media (max-width:769px){
.mid{width:95%;max-width:1400px;margin:100px auto 0;overflow:hidden}
.main .bg_box li{width:100%;margin-right:0;margin-bottom:10px;}


.sub .mid{margin-top:100px}
.large{width:100%;margin-top:100px}
.sub .large{margin-top:100px}
.all_menu .left{width:100%;padding:50px 4%}
.all_menu .right{display:none}
.all_menu .left h2{text-align:center;}
.all_menu .left h2 img{width:100px}
.all_menu .left .menu{left:50%;transform:translate(-50%,-50%);text-align:center;}
.all_menu .left .sns{left:50%;transform:translate(-50%,0)}
.all_menu .left .sns p{margin:0 8px}

#topmenu.scroll,
.sub #topmenu,
#topmenu{height:80px}
#topmenu h1 img{width:80px}

footer .inner{padding:40px 0}
footer .inner h2 img{width:80px}
footer .inner>h2{float:none;margin:auto;text-align:center;}
footer .inner>div{float:none;margin:auto;width:100%;}
footer .inner>.info{text-align:center;width:95%;margin-top:30px;font-size:10px;line-height:18px;letter-spacing:0}
footer .inner>.sns{width:100%}
footer .inner .sns ul{text-align:center;}
footer .inner .sns li{margin:0 10px}

/* ¸ÞÀÎ */
.slide.swiper-container{height:500px}
.swiper-slide img{width:40%}
#wrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right:0;}
#wrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left:0;}
#wrap .swiper-pagination-bullet{height:3px;width:25px}

.main h2.title{text-align:center;font-size:20px}
.main .about_us>div{width:100%;height:300px;margin-bottom:10px}
.main .about_us>div a img{margin:45px 0;width:50px}

.main .ban1{height:400px}
.main .ban1 .inner h2{font-size:20px}
.main .ban1 .inner p{line-height:20px}

.main .map .map_icon ul{padding:50px 0}
.main .map .map_icon ul li{width:100%;}
.main .map .map_icon li p, .main .map .map_icon li a{font-size:12px;line-height:20px}
.main .map .map_icon li div.add{background-size:40px auto}
.main .map .map_icon li div.call{background-size:35px auto}
.main .map .map_icon li div.mail{background-size:32px auto}
.main .map .map_cover{height:300px}

}