@charset "utf-8";

header{position:fixed; z-index:1000;}
.h_inner{
    margin:0px auto;
}
.h_inner > h1{
    width:200px;
    float:left;
    margin-left:20px;
    padding:5px 0px;
    box-sizing:border-box;
}
.h_inner > h1 img{
    width:100%;
}
.gnb{
    width:700px;
    float:right;
}
.gnb > ul{
    width:100%; 
    display:flex;
    justify-content:space-around;
    margin-top:25px;
    text-align:center;
}
.gnb > ul > li{
    width:100%;
    position:relative;
}
.gnb > ul > li > a{
    display:block;
    font-size:15px;
    font-weight:bold;
    transition:0.3s;
    padding:5px 0px;
}
.gnb > ul > li > a::after{
    content:"";
    display:block;
    width:0%; height:7px;
    background:#fff;
    position:absolute;
    bottom:-10px; left:28px;
    border-radius:20px;
    transition:0.5s;
}
.gnb > ul > li > a:hover::after{
    width:60%;
    background-image:url(../images/background_img2.jpg);
    background-size:100%;
    color:#fff;
}
.gnb > ul > li > a:hover{
    color:mediumaquamarine;
    transform:translateY(-2px);
}

/* 배너 슬라이드 */

#slide{
    overflow:hidden;
    position:relative;
}
#slide ul{
    width:2840px; height:800px;
    display:flex;
    position:relative;
}
#slide ul > li{
    position:relative;
}
#slide ul > li > h3{
    position:absolute;
    font-size:45px;
    color:#ffffff;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    text-align:center;
    line-height:60px;
    letter-spacing:-2px;
}
#slide ul > li > a > img{
    width:1920px; height:800px;
    z-index:100;
}

#slide > .main_slide .swiper-button-next{
    margin-right:20px;
    color:#fff;
}
#slide > .main_slide .swiper-button-prev{
    margin-left:10px;
    color:#fff;
}
#slide > .main_slide .swiper-pagination{}
#slide > .main_slide .swiper-pagination-bullet{
    width:80px;
    border-radius:0px;
    background:#333;
    margin:0px;
}


.act{
    background:#333 !important;
}
.technology{
    padding:0px 26px; 
    box-sizing:border-box;
}
.technology > h2{
    text-align:center;
    font-size:24px;
    font-weight:bold;
    padding:130px 0px 20px 0px;
}
.technology > p{
    text-align:center;
    font-size:16px;
}
.tech_menu{
    display:flex;
    margin-top:120px;
}
.tech_menu > li{    
    width:393px;
    margin-right:20px;
    border:1px solid rgba(0, 0, 0, .1);
    background:#ffffff;
    transition:0.3s;
}
.tech_menu > li:hover{
    box-shadow:0px 0px 15px #ccc;
}
.tech_menu > li > a > div{
    padding:35px 25px;
    box-sizing:border-box;
}
.tech_menu > li > a > div > h3{
    font-size:16px;
    font-weight:bold;
    
}
.tech_menu > li > a > div > p{
    font-size:14px;
    line-height:17px;
    padding-top:30px;
}
.back_img{
    background-image:url(../images/background_img.jpg);
    text-align:center;
    padding:120px 0px;
    box-sizing:border-box;
    color:#ffffff;
}
.back_img > h3{
    font-size:30px;
    font-weight:bold;
    padding:25px 0px;
}
.back_img > p{
    font-size:20px;
}

#product{
    padding:50px 150px;
    box-sizing:border-box;
}
#product > h2{
    text-align:center;
    font-size:24px;
    font-weight:bold;
    padding:30px 0px;
}
#product > .pro_box{
    width:1300px;
    /* overflow:hidden; */
    margin:0px auto 0px auto;
}
#product > .pro_box > .pro_slide{
    padding:70px 10px 30px 10px;
    box-sizing:border-box;
}
#product > .pro_box > .pro_slide > ul{
    width:100%;
    display:flex;
    text-align:center;
    z-index:2000;
}
#product > .pro_box > .pro_slide > ul > li{
    width:404px !important; height:569px;
    border:1px solid rgba(150, 150, 150, 0.5);
}
#product > .pro_box > .pro_slide > ul > li > a > img{
    width:100%; height:350px;
}
#product > .pro_box > .pro_slide > ul > li > a > div{
    padding:20px;
    box-sizing:border-box;
}
#product > .pro_box > .pro_slide > ul > li > a > div > h3{
    font-size:21px;
    font-weight:bold;
    margin:20px 0px 30px 0px;
}
#product > .pro_box > .pro_slide > ul > li > a > div > p{
    font-size:17px;
    line-height:23px;
    margin:30px 0px;
}
#product > .pro_box > .pro_slide > ul > li > a > div > span{
    background-color:rgba(216, 216, 216, 0.8);
    font-size:12px;
    display:block;
    width:80px;
    padding:10px 5px;
    border-radius:5px;
    float:right;
    margin-bottom:15px;
    transition:0.1s;
}
#product > .pro_box > .pro_slide > ul > li > a > div > span:hover{
    background-image:url(../images/background_img2.jpg);
    background-size:100%;   
    color:#fff;
}

#product > .pro_box > .pro_slide > .swiper-button-next{
    position:absolute;
    top:30px;
    color:#333;
    z-index:1000;
}
#product > .pro_box > .pro_slide > .swiper-button-prev{
    position:absolute;
    top:30px;
    color:#333;
    z-index:1000;
}
#product > .pro_box > .pro_slide > .swiper-pagination{
    position:absolute;
    top:20px;
}
#product > .pro_box > .pro_slide .swiper-pagination-bullet{
    background-color:#333;
    width:100px;
    border-radius:0px;
    margin:1px;
    transition:0.3s;
}
#product > .pro_box > .pro_slide .swiper-pagination-bullet:active{
    background-color:#333;
}


.smarthome{
    background-image:url(../images/background_img2.jpg);
}
.smarthome > h3{
    text-align:center;
    font-size:25px;
    font-weight:bold;
    color:#ffffff;
    padding:50px 0px 30px 0px;
}
.smarthome > p{
    font-size:18px;
    color:#ffffff;
    text-align:center;
    line-height:23px;
}

#smart_grid{
    width:1280px; height:590px;
    margin:40px auto 0px auto;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    background-color:#ffffff;
    text-align:center;
}
#smart_grid img{
    width:100%; height:99%;
    transition:0.3s;
}
#smart_grid img:hover{
    transform:scale(.99);
    box-shadow: 0px 0px 8px#000;
}
#smart_grid h3{
    font-size:18px;
    font-weight:bold;
    margin:70px 0px 60px 0px;
}
#smart_grid p{
    font-size:14px;
    line-height:17px;
    font-weight:lighter;
}


.hire{}
.hire > h3{
    text-align:center;
    font-size:24px;
    font-weight:bold;
    padding:60px 0px 70px 0px;
}
.hire > .hire_inner{
    width:100%; height:242px;
    background:rgba(0, 0, 0, .8);
    padding:30px 0px;
    box-sizing:border-box;
}
.hire > .hire_inner > .naver{
    float:right;
    transform:translate(-15px, -20px);
    color:rgb(62, 202, 43);
    font-weight:bold;
    font-size:13px;
}
.hire > .hire_inner > div{
    width:800px; height:60px;
    margin:15px 0px 30px 40px;
}
.hire > .hire_inner > div > h3{
    width:210px; height:60px;
    border:2px solid #fff;
    border-radius:30px;
    text-align:center;
    font-size:20px;
    color:#ffffff;
    padding:13px 0px;
    box-sizing:border-box;
    display:inline-block;
}
.hire > .hire_inner > div > h3 > .fa{
    font-size:25px;
    color:#ffffff;
    font-weight:bold;
    padding-left:10px;
}
.hire > .hire_inner > div > p{
    color:#ffffff;
    display:inline-block;
    font-size:16px;
    padding:0px 60px;
}
.hire > .hire_inner > div > p > sup{
    font-size:12px; 
    font-weight:bold;
    color:#ff0000;
    margin-left:5px;
}
.hire > .hire_inner > .hire_box01 > p{
    transform:translatey(7px);
    line-height:22px;
    font-size:18px;
}
.hire > .hire_inner > .hire_box02 > p{
    color:#ccc;
}
.hire > .hire_inner > .span01 > a{
    background-color:#fff;
    padding:10px 20px;
    border-radius:10px;
    float:right;
    margin:0px 10px 0px 0px;
    transform:translatey(-25px);
    transition:0.3s;
}
.hire > .hire_inner > .span01 > a:hover{
    background-image:url(../images/background_img2.jpg);
    background-size:100%;
    color:#fff;
}
.hire > ul{
    display:flex;
    width:930px;
    margin:100px auto 0px auto;    
}
.hire > ul > li{
    width:100%; height:273px;
    border-left:5px solid rgb(122, 122, 122);
    padding:0px 40px;
    line-height:20px;
}
.hire > ul > li:last-child{
    border-right:5px solid rgb(122, 122, 122);
}
.hire > ul > li > h3{
    font-size:20px;
    margin-top:20px;
    font-weight:bolder;
}
.hire > ul > li > .p01{
    font-size:18px;
    margin:40px 0px;
    font-weight:bold;
}
.hire > ul > li> .p02{
    font-size:14px;
}


.qna{
    background-image:url(../images/background_img3.jpg);
    color:#ffffff;
    font-family:'맑은 고딕', arial, 'sans-serif';
}
.qna > .qna_box{
    width:1280px;
    margin:0px auto;
}
.qna > .qna_box > .sub_title{
    float:left;
    margin:100px 0px 0px 50px;
}
.qna > .qna_box > .sub_title > h3{
    font-size:30px;
    padding:20px 0px;
    font-weight:bold;
}
.qna > .qna_box > .sub_title > p{
    font-size:18px;
    line-height:25px;
}
.qna > .qna_box > form > fieldset{
    float:left;
    margin:100px 0px 0px 180px;
}
.qna > .qna_box > form > fieldset > legend{display:none;}   
.qna > .qna_box > form > fieldset > p{font-size:16px;}   
.qna > .qna_box > form > fieldset > p > label{
    display:block;
    padding:20px 0px;
}   
.qna > .qna_box > form > fieldset > p > input{
    width:520px; height:40px;
}  
.qna > .qna_box > form > fieldset > p > textarea{
    width:520px; height:200px;
}
.qna > .qna_box > form > fieldset li > input{
    width:150px; height:50px;
    border-radius:30px;
    background:#fff;
    font-size:16px;
    margin-top:30px;
    border:none;
    cursor:pointer;
    box-shadow:0px 0px 6px #111;
    transition:0.2s;
}
.qna > .qna_box > form > fieldset > #message{padding:10px; box-sizing:border-box;}
.qna > .qna_box > form > fieldset li > input:hover{
    background-image:url(../images/background_img2.jpg);
    background-size:100%;
    color:#fff;
    box-shadow:none;
}

.f_inner{
    clear:both;
    position:relative;
    color:#ffffff;
}
.f_inner > h2{
    width:200px;
    position:absolute;
    left:90px; top:30px;
}
.f_inner > h2 img{width:100%;}
.f_inner > address{
    position:absolute;
    font-size:14px;
}
.f_inner > .add01{
    bottom:40px; left:10px;
}
.f_inner > .add02{
    top:50%; left:50%;
    transform:translate(-50%, -50%);
}


.f_inner > .sns{
    display:flex;
    position:absolute;
    right:120px; top:40px;
}
.f_inner > .sns > li{
}
.f_inner > .sns > li > a{
    font-size:30px;
    color:#fff;
    padding:1px 10px;
}
.f_inner > .sns > li > a:hover{}


.f_inner > .f_lnb{
    display:flex;
    position:absolute;
    right:30px; bottom:40px;
}
.f_inner > .f_lnb > li{
    border-right:1px solid #fff;
}
.f_inner > .f_lnb > li:last-child{border:none;}
.f_inner > .f_lnb > li > a{
    display:block;
    padding:1px 7px;
    font-size:14px;
    color:#ffff;
}
.f_inner > .f_lnb > li > a:hover{}



.top{
    position:fixed;
    bottom:30px; right:30px;
    width:70px; height:70px;
    box-sizing:border-box;
    border-radius:50%;
    background-image:url(../images/background_img2.jpg);
    opacity:.4;
    text-align:center;
    transition:0.2s;
}
.top > a{
    display:block;
    font-size:20px;
    padding:24px 16px;
    color:#fff;
}
.top:hover{
    opacity:1;  
}