@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
/* font-family: 'Noto Sans KR', sans-serif; */

.popup {
    position:fixed;
    left:100px;
    top:100px; 
    z-index:9999999999999;
    background:#707272;
    padding:20px; color:#000;
    display: none;
    width:400px;
    height: 400px;
}
.popup .popself { color: #fff; text-align: center;
}
.popup .popself .popselfd { font-size: 35px; font-family: 'Black Han Sans', sans-serif; padding-top: 20px; }
.popup .popself > p { font-size: 20px; color: #f8f8f8; font-weight: bold;
    padding:30px 10px; display: inline-block;
}

.popup .che { margin-top:6px; position:absolute; bottom: 10px; left: 10px;
        right:10px; border-top:1px solid #000 ;
             } 
.popup .che a { position:absolute; top:0; right:0; border: 1px solid #fff;
    border-radius: 5px;
    background: #fff; padding: 0px 5px;
}
.che input,label { vertical-align: middle;}


 
/* 기본화면 1900px 이상 */
.row { max-width:1440px; margin:0 auto; }
body { font-family: 'Noto Sans KR', sans-serif; }
/* 헤더시작 */
#header { position: fixed; top: 0; left: 0; width: 100%;
    z-index:999999999 ; background: #fff; 
}
#header .pcmob { display: none;}
#header .pcmob .depth2 { font-size: 14px; font-weight: bold; color: #777;}
#header .pcmob .depth2 > li { padding: 10px 10px; }
#header .headertopbg {background-color: #05141f;}
#header .headertop {
    height: 30px;
    font-size:13px; color: rgba(255,255,255,0.6);
    display: flex; justify-content:space-between  ;
    align-items: center;
} 
#header .headertop ul li { padding-right: 25px;}
#header .headertop ul li a::after{
content:''; width: 1px; height: 9px; background-color:rgba(255,255,255,0.3) ;
position: relative; left: 13px; top:0px; display: inline-block; line-height: 9px;
}
#header .headertop ul li:last-child a::after{ display:none }
#header .headertop ul li a:hover { border-bottom:1px solid #fff;
color: #fff;
}
#header .headerinfo { display: flex;
} 
.searchinput { display: none;
} 
#header .headerself { display: flex; } 
#header .headerbottombg { background: transparent; color: #000;
transition: all 0.1s; border-bottom: 1px solid rgba(255,255,255,0.6);
z-index: 999999;box-shadow: 10px 5px 5px gray;
}
#header .headerbottombg:hover { background:rgba(255,255,255,0.6); color: #000; }
#header .headerbottombg.on { background:#fff; color: #000; }
#header .headerbottom {
    font-size: 17px;  font-weight: bolder
    ;height: 120px;display: flex; justify-content:space-between  ;
    align-items: center; position: relative;
}
#header .headerbottom ul li { padding-right:30px ; margin: 0 -5px;}
#header .headerbottom ul li a:hover { border-bottom: 1px solid #000;}
#header .headerbottom .headerbottominfo {
    display: flex; 
}

#header .headerbottom .headerbottominfo .dth1_l { position: relative; 
    padding:56px 0px 46px; padding-right:30px;}
#header .headerbottom .hamb { display: none;}
#header .headerbottom .headerbottominfo .dth1_l .dth2_u {
    position: absolute; left: 0; top: 100%; background: #fff; width: 240px;
    border: 1px solid #777; overflow: hidden; display: none;}
#header .headerbottom .headerbottominfo .dth1_l:hover .dth2_u { display: block;}
#header .headerbottom .headerbottominfo .dth1_l .dth2_u .dth2_l { position: relative; width: 100%;}   
#header .headerbottom .headerbottominfo .dth1_l .dth2_u .dth2_l > a { 
    padding: 17px 60px 15px 18px; font-size: 15px; display: block;  position: relative; border:none; transition: all 0.2s;
}
#header .headerbottom .headerbottominfo .dth1_l .dth2_u .dth2_l > a:hover { color: #777;}
#header .headerbottom .logo { width:100px;
     position:absolute; top: 50%; align-items: flex-start;
    left: 50%; transform: translate(-50%,-50%); margin: 0;
} 
#header .headerbottom .logo img { width: 100%;}
#header .headerbottom .search { display: none;}
#header .headerbottom .headerbottombrand{
    display: flex; 
} 

#footer {
    background-color: #707272;
    padding:100px 0 50px;
}
#footer .row { position:relative; bottom:25px}
#footer .bmenu { font-size: 18px; color:#f2eded}
#footer .bmenu a { padding:0 15px; position: relative; transition:all 0.3s }
#footer .bmenu a:first-child { padding-left: 0px;}
#footer .bmenu a::after{
    content:' '; width: 1px; height: 13px; background-color: #b2b2b2;
position: absolute; right: -3px; top:6px;
}
#footer .bmenu a:last-child::after { display: none;}
#footer .bmenu a:hover { color:#fff;border-bottom: 1px solid #fff;}

#footer .info { color:#bbb; font-size: 15px; padding-top:10px}
#footer .sns  { position:absolute; top:0; right: 0;}
#footer .sns a { padding:0 3px }

.gotop { position: fixed; right:30px; bottom:20px;  }

/** ss **/
#header .headertopbg{padding:0 15px}
#header .headerbottom{padding-left:25px}
#footer{padding-left:15px; padding-right:15px}

@media screen and (max-width:1200px){
    
    .enes1 .seom{padding:0 15px}
    .enes2 .seom1{padding:0 15px 
    }
    .slideInner .text .roll_txtline {
     font-size:33px;
     
    }
}
@media screen and (max-width:1000px){
    #header .headerbottom .hamb { display: block; font-size: 20px; padding-left: 20px;}
    #header .headerbottom .headerbottominfo { display: none;}
    #header .headerbottom .headerbottominfo .dth1_l{padding-right:18px}
    #header .headerbottom .headerbottombrand { display: none;}
    .slideInner .text .roll_txtline{font-size:30px}

  
    #header .headertopbg {display: none;
    }
    .slideInner .text .roll_txtline {
        font-size:23px;
       }
    .enes1 .seom { 
        font-size: 22px; text-align: center; margin: 0 auto;
    }   
    .enes2 .seom1 { font-size: 22px; text-align: center;
    }
    #header .headerbottom .logo { width:70px; 
        position:absolute; top: 50%; 
        left: 50%; transform: translate(-50%,-50%); margin: 0; 
   } 
   #header .headerbottom {
    font-size: 17px;  font-weight: bolder
    ; height: 100px; display: flex; justify-content:space-between  ;
    align-items: center; position: relative;
    }
    #header .headerbottom .search { display: block; color: #000; padding-right: 20px; font-size: 20px;}
    .searchinput { position: absolute; top: 100%; width: 100%; left: 0;
        padding: 20px; display: none; background: rgba(0,0,0,0.5); text-align: center;
    }
    .searchinput input { width: 80%; height:35px; background: #fff;
        border: none; padding: 0 10px;
    }  
    .searchinput button {
        height: 35px; border: none; background: #000; color: #fff;
        padding: 0 15px;
    }
    #header .pcmobcover { display: none; position: fixed; top: 0; left:0; right: 0; overflow-y: auto;
        height: 100%; background: rgba(0,0,0,0.7); z-index:99999999999; 
        }
    #header .pcmob { display:block; 
        position:absolute; height:auto; width:40%; background:#fff; 
        top:-100%; left:0%; 
        transition: all 0.5s;
    }
    #header .pcmob.on { top:0;}
    #header .pcmob > ul > li > a:hover > span { border-bottom: 1px solid #000;} 
    #header .pcmob .logobox { border-bottom: 2px solid #777; position: relative; height:100px ;}
    #header .pcmob .logobox .close  {position: absolute; top:50%; right:26px;
        transform: translateY(-50%);
    }
    #header .pcmob .logo1 { width:100px; padding-left:20px; padding-top: 10px;}
    #header .pcmob > ul > li { font-size:17px; font-weight: bold; color: #000; position: relative;
     padding:0;  border-bottom: 1px solid #777;
    }
    #header .pcmob > .depth1 > li > a { position: relative; display: block; padding: 17px 25px;}  
    #header .pcmob > .depth1 > li > a.on { background: #000; color: #fff;}
    #header .pcmob > .depth1 > li > a > i { color: #777; position: absolute; top: 50%; right:25px; transform: translateY(-50%);}
    #header .pcmob > .depth1 > li > a.on > i { color: #fff;}
    #header .pcmob > .depth11 > li { padding: 17px 25px;}
    #header .pcmob > .depth111 > li {
        font-size: 12px; color: #000; font-weight: bold;
        float:left; width:50%; border-left:1px solid #777 ;
        background-color: #b2b2b2; padding: 14px 25px;
    } 
    #header .pcmob > .depth111 > li:nth-child(1) { border-left: none;}
    #header .pcmob > .depth111 > li:nth-child(3) { border-left: none;}
    #header .pcmob > .depth111 > li:nth-child(5) { border-left: none;}
 
    #header .pcmob .depth2 { display: none;}
 
}   
@media screen and (max-width:750px) {
    #header .pcmob {
        display:block; position:absolute; height:auto; width: 100%; background:#fff;  top:-100%; left:0%; transition: all 0.5s;
    }  
    #footer .sns  { position:absolute; top:-50px; right: 0;}
    #footer .sns a { padding:0 3px }
   
    
}