@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700&display=swap&subset=korean');



/*reset*/
*{margin: 0;padding: 0;box-sizing: border-box;}
ul,ol,li{list-style:none;}
img{width:100%}
div.wrapper img{width:auto}
a{text-decoration: none;}
body{font-family: 'Noto Sans KR', sans-serif;}




/*----폰트-----*/
html,body {
    -webkit-text-size-adjust: antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;}

/*웹 메인 메뉴 - 대메뉴*/
.font1{font-weight:400;letter-spacing:-1px;font-size:17px}
/*웹 메인 메뉴 - 소메뉴*/
.font2{font-weight:400;letter-spacing:-1px;font-size:15px}

/*배너-대제목*/
.font3{font-weight:700;letter-spacing:0px;font-size:55px;color:white;line-height:55px;margin-bottom:25px;}
/*배너-내용*/
.font4{font-weight:400;letter-spacing:0px;font-size:25px;color:white;line-height:30px;margin-bottom:25px;}

/*section-제목*/
.font5{font-weight:700;font-size:25px;color:#281E14;margin-bottom:15px;text-align: center;}
/*section-소제목*/
.font6{font-weight:400;font-size:25px;color:#666;margin-bottom:15px;text-align: center;}
/*sec1-제품이름*/
.font7{font-weight:500;font-size:18px;color:#333;}
/*sec1-제품설명*/
.font8{font-weight:300;font-size:15px;color:#666;word-spacing:-1px;}

/*sec2-텍스트박스 헤드라인*/
.font9{font-weight:500;font-size:18px;color:#333;}
/*sec2-텍스트박스 헤드라인*/
.font10{font-weight:300;font-size:16px;color:#333;}

/*sec3-헤드라인*/
.font11{font-weight:700;font-size:25px;color:white;margin:15px 0}
/*sec3-서브라인*/
.font12{font-weight:400;font-size:18px;color:white;}

/*footer-회사소개*/
.font14{font-weight:300;font-size:12px;color:white;}



header.headerM{height:75px;}
header.headerM h1.logoM{width:100px;float: left;margin:15px 0 0 10px;}
header.headerM div.menuBtnWrap{width:40px;height:36px;float: right;margin:20px 20px 0 0;position: relative;transition:all 0.2s}
header.headerM div.menuBtnWrap span{position: absolute;width:40px;height: 6px;background-color:#281E14;border-radius:3px;display: inline-block;transition:all 0.2s}
header.headerM div.menuBtnWrap span:first-child{top:0;left:0}
header.headerM div.menuBtnWrap span:nth-child(2){top:14px;left:0}
header.headerM div.menuBtnWrap span:nth-child(3){top:28px;left:0}


/*버튼 클릭시 반응*/
header.headerM div.menuBtnWrap.click{transform: rotate(-90deg)}
header.headerM div.menuBtnWrap.click span{height:8px;transform: scaleX(0.25);border-radius: 50%}


div.menuWrapM{position: absolute;text-align: center;width:100%;height:100vh;background-color:rgba(0,0,0,0.7);z-index:100;top:75px;left:-100%;transition:all 0.2s ease-in}
div.menuWrapM>ul>li{display:block;background-color:#281E14;color:white;padding:15px 0 15px 0}
div.menuWrapM>ul>li>ul>li{display:none;background-color: #4e4e4e;padding:8px 0;}
div.menuWrapM>ul>li>ul>li a{color:white;font-weight:300;font-size:14px;}

/*버튼 클릭시 메뉴 반응*/
body.click{overflow-y: hidden}
div.menuWrapM.click{left:0}


header.headerW{display:none;}








footer.forAsp{background: #141e30; /* fallback for old browsers */
  background: -webkit-linear-gradient(9deg, #000000, #281E14); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(9deg, #000000, #281E14); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */text-align: center;
padding:40px 20px;}
footer.forAsp div.footerTop{border-bottom:3px double rgba(255,255,255,0.6);}
footer.forAsp div.footerTop div.footerLogo{width:150px;margin:20px auto 40px auto;}
footer.forAsp div.footerTop div.footerMenu ul>li{margin:20px;}
footer.forAsp div.footerTop div.footerMenu ul>li>a{font-family: 'Noto Sans KR', sans-serif;font-weight:400;font-size:15px;color:white;}
footer.forAsp div.footerTop div.footerMenu ul>li>ul{display:none}

footer.forAsp div.footerBottom{}
footer.forAsp div.footerBottom div.ect ul li{display: inline-block;margin:20px;}
footer.forAsp div.footerBottom div.ect ul li a{font-family: 'Noto Sans KR', sans-serif;font-weight:300;font-size:14px;color:white;}
footer.forAsp div.footerBottom div.company{text-align:left;}



/*Vertical Spacer*/
.spacer5{margin-bottom:5px;}
.spacer10{margin-bottom:10px;}
.spacer20{margin-bottom:20px;}
.spacer30{margin-bottom:30px;}
.spacer40{margin-bottom:40px;}
.spacer50{margin-bottom:50px;}
.spacer60{margin-bottom:60px;}
.spacer70{margin-bottom:70px;}
.spacer80{margin-bottom:80px;}
.spacer90{margin-bottom:90px;}
.spacer100{margin-bottom:100px;}








/*웹모드일때*/
@media screen and (min-width:968px ){


    div.wrap2{max-width:1200px;margin:auto;}

    header.headerM{display:none;}
    div.menuWrapM{display:none;}
    header.headerW{display:block;height:100px;background-color:white;transition:all 0.2s;position:fixed;width:100%;top:0;left:0;z-index:1000;}



    header.headerW div.wrap{height:100%;position: relative !important;}
    header.headerW h1.logoW{width:170px;display: inline-block;margin-top:22px;float:left;margin-right:60px;}

    header.headerW ul.menuW{display: inline-block;}
    header.headerW ul.menuW>li{display: inline-block;line-height:100px;margin-right:30px;transition: all 0.2s;position:relative;font-size:17px;}
    header.headerW ul.menuW>li ul{background-color:rgba(255,255,255,0.85);position: absolute;width:165px;overflow:auto;top:100px;left:-20px;z-index:3;text-align: left;line-height: 45px;padding-left:20px;display:none;}

    header.headerW ul.menuW>li>ul>li{display: inline-block;line-height:30px;width:100%}
    header.headerW ul.menuW>li>ul>li a{color:black;}
    header.headerW div.direct{float: right;line-height:100px;transition: all 0.2s;}
    header.headerW div.direct span.icon{display: inline-block;width:25px;height: 20px;vertical-align:top}
    header.headerW div.direct a{color:black;}
    header.headerW div.direct span.icon>img{vertical-align: middle;}


/* 제품군들 펼쳐지는 부분*/
    header.headerW ul.menuW>li ul.products{width:323px;}
    header.headerW ul.menuW>li>ul.products>li{width:150px;margin:0px;}

/*스크롤내려서 fixed 클래스 붙었을 때 반응*/
    header.headerW.fixed {background-color:rgba(0,0,0,0.83);color:white;height:50px;}
    header.headerW.fixed h1.logoW {margin:0px 20px 0 40px;text-align: center;height:100%;line-height:46px;}
    header.headerW.fixed h1.logoW img{width:17px;}
    header.headerW.fixed ul.menuW>li{line-height:50px;}
    header.headerW.fixed ul.menuW>li ul{background-color:rgba(0,0,0,0.75);width:160px;overflow: hidden;top:50px;left:-20px;padding-left:20px}
    header.headerW.fixed ul.menuW>li ul li{;line-height:30px;vertical-align:top;}
    header.headerW.fixed ul.menuW>li ul li a{color:white;}
    header.headerW.fixed div.direct{line-height:50px}
    header.headerW.fixed div.direct a{color:white;}
    header.headerW.fixed ul.menuW>li ul.products{width:300px}
    header.headerW.fixed ul.menuW>li ul.products li{width:45%;}






/*푸터 반응*/
    footer{text-align:left}
    footer div.footerTop{padding-bottom:20px}
    footer div.footerTop div.footerLogo{width:150px;display: inline-block;margin:0 15vw 0 0;vertical-align:top;}
    footer div.footerTop div.footerMenu{display: inline-block;}
    footer div.footerTop div.footerMenu ul>li{margin:5px 0;display: inline-block;vertical-align:top;width:155px}

    footer div.footerTop div.footerMenu ul>li>ul{display:block}
    footer div.footerTop div.footerMenu ul>li>ul>li>a{font-family: 'Noto Sans KR', sans-serif;font-weight:100;font-size:15px;color:white;}




}



@media screen and (min-width:1120px ){

    header.headerW ul.menuW>li{margin-right:60px;}


}
