@charset "utf-8";
@import url(./common.css);

body{
    font-family:'NotoSansKR';
}
header{
    background-image: url(../img/sub_header_bg.png);
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
}

header .gnb li.active{
    background-color:#CCE0FF;
    border-radius: 10px;
}
header .wrap_header nav ul li:hover a{
    color:#007ADE;
}
/* 서브 공통  -----------------------------------------------------*/
.Wrap_sub{
    width:100%;
    height: 100%;
    position: relative;
}
.Wrap_sub .gnb_sub{
    display: flex;
    justify-content: center;
    height:5rem;
    border-bottom: 1px solid #E2E2E2;
}
.Wrap_sub .gnb_sub li{
    display: inline-flex;
    margin-top:2.5rem;
    height: 2.5rem;
    line-height: 1.875rem;
    padding:0 10px;
    margin-right:5rem;
    justify-content: center; 
}
.Wrap_sub .gnb_sub li a{
    font-size: 1.25rem;
    font-weight: 500;
}
.Wrap_sub .gnb_sub li.active{
    border-bottom:3px solid #007ADE;
}
.Wrap_sub .gnb_sub li:hover a{
    color: #007ADE;
}
.sub_content{
    width:100%;
    height:auto;
    position: relative;
}
.sub_content .wrap_panel{
    position: relative;
    /* width: calc(100% - 303px); */
    width: 85%;
    min-height: 1480px;
    height: auto;
    margin-bottom: 80px;
    padding:0 70px 80px;
    left: 160px;
    top:80px;
}
.sub_content .wrap_panel .panel{
    position: relative;
    display: none;
    width:100%;
    height: 100%;
}
.sub_content .wrap_panel .panel.active{
    display: block;
}
.sub_content .panel h1{
    font-size: 1.875rem;
    font-weight: 600;
}
.sub_content .panel h3{
    margin-top:1.875rem;
    line-height: 2rem;
    font-weight: 500;
    font-size: 1rem;
}
.sub_content .panel h2{
    position:absolute;
    right:3%;
    top:0;
}
.sub_content .panel h2 img{
    width:100%;
}
.sub_content .panel .content{
    width:100%;
    border:1px solid #007ADE;
    margin-top:5rem;
    border-radius: 10px;
    padding:20px 30px;
}
.sub_content .panel .content h4{
    width:99%;
    height: 3.75rem;
    background-color: #CCE0FF;
    color:#00345E;
    font-size: 1.25rem;
    font-weight:500;
    border-radius: 10px;
    line-height: 3.75rem;
    padding-left:3.125rem;
    position:relative;
    top:-50px;
    left:0.25rem;
}

/* 디아이캐스트 -----------------------------------------------*/
#dicast .dicast_content1 ul{
    height: auto;
    width:100%;
    background-color: #ECECEC;
    margin:1.25rem 0;
    border-radius: 0.625rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
#dicast .dicast_content1 ul.content_top{
    margin-top:-20px;
}
#dicast .dicast_content1 ul li{
    width:14%;
    display: block;
    text-align: center;
    padding:1%;
}
#dicast .dicast_content1 ul.content_top li:first-child{
    width:15%;
    height: 100%;
    background-color: #C2C2C2;
    text-align: center;
    line-height: 10.3125rem;
    border-radius: 10px;
    font-size: 1.125rem;
    font-weight: 500;
}
#dicast .dicast_content1 ul li .icon_list{
    display: block;
}
#dicast .dicast_content1 ul li .icon_list span{
    margin-top:0.625rem;
    display: block;
    text-align: center;
    font-size: 1rem;
}

#dicast .dicast_content1 p{
    line-height: 1.875rem;
    padding-left:1.25rem;
    font-size: 1rem;
}
#dicast .dicast_content1 p span{
    font-weight: 600;
    font-size: 1rem;
}
#dicast .dicast_content1 ul.content_bottom li{
    width:48%;
}
#dicast .dicast_content1 ul.content_bottom li img.w-671{
    width:100%;
    height: 239px;
}
#dicast .dicast_content1 ul.content_bottom li:nth-child(2){
    width:6%;
    line-height: 276px;
}
#dicast .dicast_content2 ul{
    height: auto;
    width:100%;
    background-color: #ECECEC;
    margin:1.25rem 0;
    border-radius: 0.625rem;
    display: flex;
    justify-content:flex-start;
    align-items: center;
}
#dicast .dicast_content2 ul.content_top{
    margin-top:-20px;
}
#dicast .dicast_content2 ul li{
    width:14%;
    display: block;
    text-align: center;
    padding:1%
}
#dicast .dicast_content2 ul.content_top li:first-child{
    width:15%;
    height: 100%;
    background-color: #C2C2C2;
    text-align: center;
    line-height: 10.3125rem;
    border-radius: 10px;
    font-size: 1.125rem;
    font-weight: 500;
}
#dicast .dicast_content2 ul li .icon_list{
    display: block;
}
#dicast .dicast_content2 ul li .icon_list span{
    margin-top:0.625rem;
    display: block;
    text-align: center;
    font-size: 1rem;
}
#dicast .dicast_content2 ul.content_bottom li{
    width:48%;
}
#dicast .dicast_content2 ul.content_bottom li:nth-child(2){
    width:6%;
    line-height: 276px;
}
#dicast .dicast_content2 ul.content_bottom li img.w-671{
    width:100%;
    height: 239px;
}
#dicast .dicast_content2 ul.content_bottom li:last-child img.w-671{
    padding:10px;
    width:100%;
}
#dicast .dicast_content3 img{
    display: block;
    width:100%;
    margin-top:-30px;
}
/* 모두솔라 ------------------------------------------------------*/
#modusolra h3 br{
    display: none;
}
#modusolra .modusolra_content1 img{
    display: block;
    margin-top:-30px;
    width:100%;
}
#modusolra .modusolra_content1 p{
    margin-top:10px;
    font-size: 1rem;
}
#modusolra .modusolra_content2 .solra_monitoring_text{
    margin-top:-20px;
}
#modusolra .modusolra_content2 .solra_monitoring_text p{
    line-height: 2rem;
    font-size: 1rem;
}
#modusolra .modusolra_content2 .solra_monitoring ul{
    width:100%;
    height: 755px;
    margin-top:20px;
}
#modusolra .modusolra_content2 .solra_monitoring ul li{
    width:50%;
    float: left;
}
#modusolra .modusolra_content2 .solra_monitoring ul li img{
    width:100%;
}
/* 모두에어 -----------------------------------------------------------*/
#moduair .round_title{
    margin-top:20px;
}
#moduair .round_title ul.air_title{
    width:68%;
    height: 60px;
}
#moduair .round_title ul.air_title li{
    background-color: #FFDBBB;
    color:#F47320;
    font-size: 1.25rem;
    font-weight: 600;
    width:30%;
    height: 60px;
    line-height: 60px;
    float: left;
    text-align: center;
    margin-right: 3%;
    border-radius: 60px;
}
#moduair .round_title ul.ai_title{
    margin-top:20px;
    width:68%;
    height: 60px;
}
#moduair .round_title ul.ai_title li{
    background-color: #D5EFCF;
    color:#2F9A53;
    font-size: 1.25rem;
    font-weight: 600;
    width:30%;
    height: 60px;
    line-height: 60px;
    float: left;
    text-align: center;
    margin-right: 3%;
    border-radius: 60px;
}
#moduair .moduair_content1{
    width:49%;
    float: left;
}
#moduair .moduair_content1 p{
    margin-top:-30px;
    line-height: 2rem;
    margin-bottom: 10px;
    font-size: 1rem;
}
#moduair .moduair_content1 img{
    height: 340px;
    width:100%;
    box-shadow: 2px 4px 10px #ccc;
}
#moduair .moduair_content2{
    width:49%;
    float: right;
}
#moduair .moduair_content2 p{
    margin-top:-30px;
    line-height: 2rem;
    margin-bottom: 10px;
    font-size: 1rem;
}
#moduair .moduair_content2 img{
    height: 340px;
    width:100%;
    box-shadow: 2px 4px 10px #ccc;
}
#moduair .moduair_content3{
    width:49%;
    float: left;
    margin-top: 60px;
}
#moduair .moduair_content3 p{
    margin-top:-30px;
    line-height: 2rem;
    margin-bottom: 10px;
    font-size: 1rem;
}
#moduair .moduair_content3 img{
    height: 340px;
    width:100%;
    box-shadow: 2px 4px 10px #ccc;
}
#moduair .moduair_content4{
    width:49%;
    float: right;
    margin-top: 60px;
}
#moduair .moduair_content4 p{
    margin-top:-30px;
    line-height: 2rem;
    margin-bottom: 10px;
    font-size: 1rem;
}
#moduair .moduair_content4 img{
    height: 340px;
    width:100%;
    box-shadow: 2px 4px 10px #ccc;
}
/* 지능형 미세먼지 서비스 -------------------------------------------*/
#mise .content img.mise1{
    padding-left:30px;
    width:100%;
}
#mise .content .Wrap_detail{
    width:100%;
    position: relative;
    margin-top:50px;
}
#mise .content .Wrap_detail .detail_content{
    width:49%;
    border:1px solid #C6C6C6;
    border-radius: 10px;
    position:relative;
    padding:50px 20px 20px;
    height: 32%;
}

#mise .content .Wrap_detail .detail_content:nth-child(2){
    right:0;top:0;
    position:absolute;
}
#mise .content .Wrap_detail .detail_content h5{
    background-color: #E6E6E6;
    color:#1C1C1C;
    font-weight: 600;
    font-size: 1.125rem;
    height: 60px;
    padding:0 30px;
    line-height: 60px;
    text-align: center;
    border-radius: 60px;
    position:absolute;
    top:-30px;
    left: 20px;
}
#mise .content .Wrap_detail .detail_content p{
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 1rem;
}
#mise .content .Wrap_detail .detail_content img{
    width:100%;
    box-shadow: 2px 4px 10px #ccc;
}
#mise .content .Wrap_detail .detail_content img.detailimg2{
    padding: 0 40px;
}
#mise .content .Wrap_detail .detail_content:last-child{
    width:100%;
    margin-top:50px;
    height: 490px;
}
#mise .content .Wrap_detail .detail_content:last-child ul li{
    float: left;
    width:49%;
    padding:1rem;
}
/* 뉴스 --------------------------------------------------------- */

#news {
    min-height:900px;

}
#news h3{
    position: relative;
    font-size: 1rem;
}
#news h3::before{
    content: "";
    background: linear-gradient(90deg, #EFF5FF 0%, #007ADE 100%);
    width:82%;
    height: 1px;
    position:absolute;
    right: 0;
    bottom:5px;
}
#news .Wrap_notice_table{
    width: 100%;
    margin-top:30px;
    position: relative;
}
#news .Wrap_notice_table .searchAria{
    position: relative;
    right: 0;
    height: 40px;
}

#news .Wrap_notice_table .searchAria input{
    right: 100px;
    position: absolute;
    height: 35px;
    border:1px solid #ccc;
    border-radius: 5px;
    width:300px;
}
#news .Wrap_notice_table .searchAria button{
    position:absolute;
    right: 0;
    width:80px;
    height: 35px;
    background-color:#007ADE ;
    color:#fff;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
}
#news .Wrap_notice_table .notice_table{
    margin-top:10px;
    width:100%;
}
#news .Wrap_notice_table .notice_table table{
    width:100%;
}
#news .Wrap_notice_table .notice_table table thead{
    background-color: #CCE0FF;
    color:#00345E;
    height: 60px;
    border-top:1px solid #00345E;
}
#news .Wrap_notice_table .notice_table table thead tr{
    text-align: center;
    line-height: 60px;
}
#news .Wrap_notice_table .notice_table table thead tr th{
    font-weight: 500;
    font-size: 1.125rem;
}
#news .Wrap_notice_table .notice_table table tbody tr{
    height: 50px;
    border-bottom: 1px solid #C6C6C6;
    line-height: 50px;
    text-align: center;
    font-weight: 400;
}
#news .Wrap_notice_table .notice_table table tbody tr td{
    font-size: 1rem;
}
#news .Wrap_notice_table .notice_table table tbody tr td:nth-child(2){
    text-align: left;
    padding:0 50px;
    font-weight: 500;
}
#news .Wrap_notice_table .notice_table table tbody tr:hover{
    background-color: #f7f7f7;
}
#news .Wrap_notice_table .pagination{
    height: 40px;
    display: flex;
    justify-content: center;
    margin-top:50px;
}
#news .Wrap_notice_table .pagination li{
    padding:10px 20px;
    display: inline-flex;
    justify-content: center;
}
#news .Wrap_notice_table .pagination li.prev,
#news .Wrap_notice_table .pagination li.next
{
    border:1px solid #ccc;
    border-radius: 3px;
}
#news .Wrap_notice_table .pagination li.active{
    color:#007ADE;
}
/* contactUs --------------------------------------------------- */
#contactUs{
    background-image: url(../img/contactus_bg.png);
    width:100%;
    background-size: 1400px 768px;
    background-repeat: no-repeat;
    background-position: top right;
}
#contactUs .sub_content{
    padding:50px 160px;
}
#contactUs .sub_content h1{
    font-family: 'Mukta', sans-serif;
    font-size: 6.25rem;
    font-weight: 700;
}
#contactUs .sub_content h2{
    font-size: 1.25rem;
    line-height: 68px;
    font-weight: 500;
}
#contactUs .sub_content h3{
    line-height: 24px;
    font-size: 1rem;
}
#contactUs .sub_content h3 p{
    font-size: 1rem;
}
#contactUs .sub_content h3 br{
    display: none;
}
#contactUs .sub_content .text_form{
    width:43%;
    height: 487px;
    background-color: #F7F7F7;
    border:1px solid #C6C6C6;
    margin-top:30px;
    padding:30px;
    position: relative;
}
#contactUs .sub_content .text_form form{
    width:100%;
}
#contactUs .sub_content .text_form .form{
    width: 48%;
    height: 65px;
    float: left;
    margin-left: 2%;
}
#contactUs .sub_content .text_form .form1,
#contactUs .sub_content .text_form .form3{
    margin-left:0;
}
#contactUs .sub_content .text_form .form label{
    font-weight: 500;
    width:100%;
    display: block;
    line-height: 1.25rem;
    font-size: 1rem;
}
#contactUs .sub_content .text_form .form input{
    width:100%;
    height: 35px;
    border:1px solid #C6C6C6;
    border-radius: 3px;
    margin-top:5px;
}
#contactUs .sub_content .text_form .form5{
    float: left;
    width:100%;
    height: 11.25rem;
    margin-top:10px;
}
#contactUs .sub_content .text_form .form5 label{
    width:100%;
    display:block;
    line-height: 24px;
    font-weight: 500;
    font-size: 1rem;
}
#contactUs .sub_content .text_form .form5 textarea{
    width:100%;
    height: 150px;
    border:1px solid #C6C6C6;
    border-radius: 3px;
    margin-top:5px;
}
#contactUs .sub_content .text_form .form_check{
    height: 35px;
    margin-top:20px;
    float: left; 
}
#contactUs .sub_content .text_form .form_check label{
    font-size: 1rem;
}
#contactUs .sub_content .text_form .submit{
    position:absolute;
    width:120px;
    height: 45px;
    bottom:20px;
    left: 50%;
    transform: translate(-50%);
    background-color: #007ADE;
    color:#fff;
    border-radius: 45px;
    font-weight: 500;
    cursor: pointer;
}
#contactUs .sub_content .policy{
    width:100%;
    margin-top:30px;
}
#contactUs .sub_content .policy h5{
    font-weight: 500;
}
#contactUs .sub_content .policy ul{
    width:100%;
    border:1px solid #C6C6C6;
    margin-top:10px;
    height: 380px;
    padding:20px 50px;
}
#contactUs .sub_content .policy ul li{
    float: left;
    width:48%;
}
#contactUs .sub_content .policy ul li.desh_bar{
    width: 1%;
    margin-right:1%;
}
#contactUs .sub_content .policy ul li p{
    color:#585858;
    line-height: 30px;
}

/* 서브 반응형 ------------------------------------------------ */
@media all and (min-width: 768px) and (max-width:1024px){
    html{
        font-size: 14px;
    }
    body{
       min-width:1024px;
    }
    header{
        min-width: 1024px;
    }
    header .wrap_header nav ul li{
        padding:15px 20px;
    }
    .sub_content .wrap_panel{
        width: calc(100% - 0px);
        left: 0;
    }
    .sub_content .panel h2{
        right: -260px;
        top:0;
    }
    .sub_content .panel h2 img{
        width:50%;
    }
    #dicast .dicast_content1 ul li .icon_list img{
        width:100%;
    }
    #dicast .dicast_content1 ul li .icon_list span{
        font-size: 1rem;
    }
    /* #dicast .dicast_content1 ul.content_bottom li img{
        width:100%;
    } */
    #dicast .dicast_content2 ul li .icon_list img{
        width:70%;
    }
    #dicast .dicast_content2 ul li .icon_list span{
        font-size: 1rem;
    }
    #dicast .dicast_content2 ul.content_bottom li img.w-671{
        width:100%;
    }

    #modusolra h3 br,
    #moduair h3 br{
        display: block;
    }

    #modusolra h2,
    #moduair h2{
        right:-150px;
        top:30px;
    }
    #modusolra .modusolra_content2 .solra_monitoring_text p{
        font-size: 1rem;
    }
    #modusolra .modusolra_content2 .solra_monitoring ul{
        height: 470px;
    }
    #modusolra .modusolra_content2 .solra_monitoring ul li img{
        width:100%;
    }

    #moduair .round_title ul.air_title li{
        margin-right:10px;
    }
    #moduair .round_title ul.ai_title li{
        margin-right:10px;
    }
    #moduair .moduair_content1 p{
        font-size: 1rem;
        word-break: keep-all;
        line-height: 1.6rem;
    }
    #moduair .moduair_content1 p br{
        display: none;
    }
    #moduair .moduair_content1 img{
        width:100%;
        height: 100%;
    }
    #moduair .moduair_content2 p{
        font-size: 1rem;
        word-break: keep-all;
        line-height: 1.6rem;
    }
    #moduair .moduair_content2 p br{
        display: none;
    }
    #moduair .moduair_content2 img{
        width:100%;
        height: 100%;
    }
    #moduair .moduair_content3 p{
        font-size: 1rem;
        word-break: keep-all;
        line-height: 1.6rem;
    }
    #moduair .moduair_content3 p br{
        display: none;
    }
    #moduair .moduair_content3 img{
        width:100%;
        height: 90%;
    }
    #moduair .moduair_content4 p{
        font-size: 1rem;
        word-break: keep-all;
        line-height: 1.6rem;
    }
    #moduair .moduair_content4 p br{
        display: none;
    }
    #moduair .moduair_content4 img{
        width:100%;
        height: 100%;
    }
    #mise h3 br{
        display: none;
    }
    #mise .content img.mise1{
        width:100%;
    }
    #mise .content .Wrap_detail .detail_content{
        height: 35%;
    }
    #mise .content .Wrap_detail .detail_content p{
        font-size: 1rem;
    }
    #mise .content .Wrap_detail .detail_content img{
        width:100%;
    }
    #mise .content .Wrap_detail .detail_content:last-child{
        height: 322px;
    }
    #mise .content .Wrap_detail .detail_content:last-child ul li{
        margin-left: 1%;
    }

    #news h3::before{
        width: 75%;
    }
    #contactUs{
        background-size: 60%;
    }
    
    #contactUs .sub_content h3 br{
        display: block;
    }
    #contactUs .sub_content{
        padding:50px;
    }
    #contactUs .sub_content .text_form{
        width:100%;
    }
    #contactUs .sub_content .policy ul{
        padding:20px;
        height: 365px;
    }
    #contactUs .sub_content .policy ul li{
        padding:5px;
    }
    #contactUs .sub_content .policy ul li p{
        font-size: 1rem;
        line-height: 1.5rem;
    }
    

}
@media all and (max-width:767px){
    html{
        font-size: 12px;
    }
    body{
        min-width:1024px;
    }
    header{
        min-width: 1024px;
    }
    header .wrap_header nav ul li{
        padding:15px 20px;
    }
    .sub_content .wrap_panel{
        padding: 0 20px 80px;
        left: 0;
    }
    #dicast h2{
        right:-260px;
    }
    #modusolra h2{
        right:-150px;
        top:-2%;
    }
    #moduair h2{
        top:-4%;
    }
    .sub_content .panel h2 img{
        width:50%;
    }
    .sub_content .panel h3 {
        word-break: keep-all;
    }
    .sub_content .panel .content{
        padding:20px;
    }
    .sub_content .panel .content h4{
        top:-40px;
    }
    /* #dicast .dicast_content1 ul.content_bottom li img{
        width:100%;
    } */
    #dicast .dicast_content1 ul li .icon_list img{
        width:80%;
    }
    #dicast .dicast_content2 ul li .icon_list img{
        width:80%;
    }
     #moduair .round_title ul.air_title{
        width:100%;
    }
    #moduair .round_title ul.ai_title{
        width:100%;
    }
    #mise .content .Wrap_detail .detail_content:last-child{
        height: 315px;
    }
    #news{
        top:30px;
    }
    #news h3::before{
        width:50%;
    }
    #news .Wrap_notice_table .searchAria input{
        width:70%;
    }
    #news .Wrap_notice_table .notice_table table tbody tr td:nth-child(2){
        padding:0 10px;
    }

    #contactUs{
        background-size: 80%;
    }
    #contactUs .sub_content{
        padding:20px;
    }
    #contactUs .sub_content h1{
        font-size: 3rem;
    }
    #contactUs .sub_content .text_form{
        width:100%;
        height: 460px;
        padding:20px 10px;
    }
    #contactUs .sub_content .text_form .form5{
        height: 17.25rem;
    }
    #contactUs .sub_content .policy ul{
        padding: 10px;
        height: 388px;
    }

   






}