/********************* header *********************/ 
.header_inner{padding: 30px 0;/*  max-width: 1400px;  */width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
.header_inner .logo{cursor: pointer; z-index: 2; width: 210px; height: 45px; background: center / cover no-repeat url(../img/logo.png);position: absolute;left:0;top:50%;transform: translateY(-50%);}
.header_inner .nav{width: 100%;}
.header_inner .nav .depth01{display: flex;position: relative;width: 100%;justify-content: flex-end;}
.header_inner .nav .depth01 > li{padding: 0 40px; font-size: 17px; font-weight: 500; color: #333;}
.header_inner .nav .depth01 > li >a{padding-bottom:30px; position: relative;}
/* 페이지에 머물고 있을 때 나타나는 표시 */
.header_inner .nav .depth01 > li >a.on::after{content: ""; width: 110%; height: 8px; background: #8639a5; position: absolute; top: 24%; left: 50%; transform: translateX(-50%); opacity: 0.3;}
.header_inner .nav .depth01 > li >a:hover{color: #8639a5; font-weight: 400;}
.header_inner .nav .depth01 > li:last-child{padding-right: 0;}

.header_inner{position: relative;}
/* .header_inner::before{content:'';display: block;width: 150%;background: #fff;position: absolute;height: 170%;top:100px;left:50%;transform: translateX(-50%);z-index: 9;} */
.header_inner .nav .sub_ul{padding:100px 0;width: 100%;z-index: 99;position: absolute;left: 0;top: 55px;}


.header_inner .depth01 > li:hover .sub_ul{display: block;}
.header_inner .nav .sub_ul {background: #fff;display: none; box-shadow: 0 10px 10px -6px rgb(0 0 0 / 5%)}
.header_inner .nav .sub_ul::before {content: '';display: block;width: 150%;height: 100%;;position: absolute;left:50%;transform: translateX(-50%);top:0;    background: #fff;border-top:1px solid #ddd;}


.header_inner .nav .sub_ul i{position: absolute;left:0;top:50%;transform: translateY(-50%);display: block;width: 30%;height: 80%; background: center / 100% auto no-repeat;}
.header_inner .nav .about_ul i{background-image: url(../img/product/cutting_link06.jpg);}
.header_inner .nav .products_ul i{background-image: url(../img/product/thick_bold09.jpg);}


.header_inner .nav .depth02{width: 100%;margin-left:auto;display: flex; justify-content: flex-end;}
.header_inner .nav .depth02 li{margin-right:30px;padding-right:20px;position: relative;opacity: 0.8;color:#333;font-weight:500;}
.header_inner .nav .depth02 li:hover{color: #8639a5;}
.header_inner .nav .depth02 li::after{content: '';display: block;width: 2px;height: 15px;background: #ddd;position: absolute;right:0;top:45%;transform: translateY(-50%);}
.header_inner .nav .depth02 li:last-child:after{display: none;}

header input{font-size: 0;border:none !important;background: #fff;width: 0;;}


/********************* mo_nav *********************/ 
.mo_navi {display: none;}
.mo_navi .close_but{width: 40px;height: 40px;position: absolute;z-index: 999;display: flex;flex-wrap: wrap;right: 0;top:48%;transform: translateY(-50%);z-index: 999;transition-duration: 0.3s;}
.mo_navi .close_but span{width: 50%;position: relative;transition-duration: 0.3s;}
.mo_navi .close_but span::before{content:'';width: 5px;height: 5px;background: #666;display: block;border-radius: 5px;    position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

.mo_navi .close_but.on { width:15px;height:15px;  right:10px;;transition-duration: 0.3s;}

/* .mo_navi .close_but.on::before{content:'';display: block;width:80px;height:100vh;background: #d61d2f;position: absolute;left:49%;top:-30px;transform: translateX(-50%);z-index: -2;} */
.mo_navi .close_but.on span{transform: rotate(180deg);}
.mo_navi .close_but.on span:before{width: 20px;    height: 3px;}
.mo_navi .close_but.on span:nth-child(1):before{    transform:rotate(45deg) translate(-7px, 6px)}
.mo_navi .close_but.on span:nth-child(2):before{    transform: rotate(-45deg) translate(-7px, -9px)}
.mo_navi .close_but.on span:nth-child(3):before{ transform:rotate(-45deg) translate(-4px, -10px)}
.mo_navi .close_but.on span:nth-child(4):before{ transform:rotate(45deg) translate(-11px, 5px)}
.mo_navi .depth01{position: absolute; width: 110%; left:50%; transform: translateX(-50%); background: #fff; top: 70px; border-top: 1px solid #ddd; z-index: 9; padding: 20px 50px; display: none;}
.mo_navi .depth01 > li> a.cate{font-size: 1.125rem;font-weight: 500;color: #666; padding: 15px 0;}

.mo_navi .depth01 a{padding: 3px 0;display: block;}

.mo_navi .depth02{display: none;}
.mo_navi .depth02{display: none;}
.mo_navi .depth02 a{font-size: 16px; font-weight: 400; color: #aaa;}



/********************* footer *********************/ 
footer{position: relative; border-top: 1px solid #eee;}
footer .f_top{padding:22px 0 20px;border-bottom:1px solid #eee;}
footer .f_top ul{display: flex;justify-content: space-between;}
footer .f_top ul li{display: flex;font-weight: 400;}
footer .f_top ul li:first-child span{margin-right:20px;padding-right:20px;position: relative;}
footer .f_top ul li:first-child span:first-child::after{content: '';display: block;width: 1px;height: 18px;position:absolute;background: #bbb;right:0;top:50%;transform: translateY(-50%);}
footer .f_top ul li:first-child span:nth-child(2)::after{content: '';display: block;width: 1px;height: 18px;position:absolute;background: #bbb;right:0;top:50%;transform: translateY(-50%);}
footer .f_top ul li:last-child i{margin-left:30px;}

footer .f_bot{text-align: center;padding:20px 0; color: #777;}
footer .f_bot p{font-size: 1em; font-weight: 400;}
footer .top_but{z-index: 9999; width:60px;height:60px;position: fixed; right: 3%; bottom: 8%; background: #8639a5; color:#fff; font-weight: 400; padding:10px; cursor: pointer; border-radius: 5px; box-shadow: 0 0 6px 6px rgb(0 0 0 / 8%);}
footer .top_but i{transform: rotate(-90deg);display: block;width: 30%;margin:0 auto;}
footer .top_but input{border:none;color:#fff;font-size: 1.125rem;padding:0;;}
/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){

    header{padding:0 20px;}
   
   
    
}

/* ********************************************* *
* 1400px
* ********************************************* */
@media screen and (max-width: 1400px){

 


    footer .f_top {padding: 22px 0 20px; padding-right: 100px;}
    footer .top_but { right: 20px;}
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
    .header_inner .nav .sub_ul {padding: 30px 0;}

    .header_inner .nav .depth02 li{margin-right: 15px; padding-right: 15px;}
  
}

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

    .header_inner .nav .depth02 {width: 100%;}    
    .header_inner .nav .sub_ul i{display: none;}
    .header_inner .nav .depth02 { display: block;}
    .header_inner .nav .depth01 > li {padding: 0 40px;position: relative;}
    .header_inner .nav .sub_ul::before {width: 100%;display: none;}
    .header_inner .nav .sub_ul {padding: 20px 30px; box-shadow: 0 17px 17px 0px rgb(0 0 0 / 12%);}
    .header_inner .nav .depth02 li::after{display: none;}
    .header_inner .nav .depth02 li{margin:0;padding:0;    text-align: center;margin-bottom:10px;}
    .header_inner .nav .depth02 li:last-child{margin-bottom:0px;}


}


/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){

    .header_inner .logo {width: 170px;height: 36px;}

}
/* ********************************************* *
* 840px
* ********************************************* */
@media screen and (max-width: 840px){
    .header_inner .nav .depth01 > li {padding: 0 20px !important;}

    header {padding: 0 15px;}
    .mo_navi {display: block;}

    .header_inner .logo {width: 140px;height: 30px;position: initial;    transform: none;}
    .header_inner .nav{display: none;}
    .header_inner {padding: 20px 0;}
}



/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 

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

    footer .f_top {padding-right: 100px;}



}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){

    .mo_navi .depth01{padding: 20px 30px;}


    footer .f_top ul{flex-direction: column;}
    footer .f_top ul li:last-child{    justify-content: flex-end;}
    footer {font-size: 0.9rem;}
    footer p{font-size: 0.9rem;}

    footer .top_but {width: 40px;height: 40px;}
    footer .top_but input {font-size: 0.8rem;transform: translateY(-3px);}
    footer .top_but i {transform: rotate(-90deg) translateX(2px);}
    footer .f_top {padding-right: 60px;}
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){

    footer .f_top ul li:first-child span {margin-right: 10px;padding-right: 10px;}  
    footer .f_top ul li:first-child span:first-child::after { height: 13px;    top: 42%;}
    footer .f_top ul li:last-child i {margin-left: 20px;}

    footer {font-size: 0.8rem;}
    footer p{font-size: 0.8rem;}
    
    footer .top_but {display: none;}
    footer .f_top {padding-right: 0px;}

}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){

    .header_inner .logo {width: 120px; height: 25px;}

    .mo_navi .depth01{padding-left: 20px; padding-right: 20px; width: 115%;}

    .mo_navi .close_but {width: 30px;height: 30px;}
    .mo_navi .close_but.on span:nth-child(1):before {transform: rotate(45deg) translate(-12px, 5px);}
    .mo_navi .close_but.on span:nth-child(2):before {transform: rotate(-45deg) translate(-2px, -9px);}
    .mo_navi .close_but.on span:nth-child(3):before {transform: rotate(-45deg) translate(-8px, -9px);}
    .mo_navi .close_but.on span:nth-child(4):before {transform: rotate(45deg) translate(-6px, 5px);}

    .mo_navi .depth01 {top: 60px;}
    .mo_navi .depth01 > li> em {font-size: 1rem;font-weight: 500;}
    .mo_navi .close_but.on span:before {width: 10px;height: 2px;}

    footer .f_top ul li:last-child{margin-top: 10px;}
    footer .f_top ul li:first-child{display: block;;}
    footer .f_top ul li:first-child span:first-child::after { display: none;}

    footer .f_top ul li:first-child span{display: block;;}
    footer .f_top ul li:first-child span:first-child{margin-bottom:5px;;;}
    

}