﻿
/* main */
.main_img{height:370px;background:url(../images/main_img_test.png) no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}
.main_img .text_wrap{padding-top:0px;padding-left:0px;}
.main_img .text_wrap h5{font-size:2em;color:#0b0b0b;font-weight:600;}
.main_img .text_wrap h3{font-size:4.1em;color:#e0002a;margin-bottom:12px;margin-top:10px;line-height:4.5rem;}
.main_img .text_wrap p > *{font-size:1.2em;}

.service{margin-top:40px;margin-bottom:40px;display:flex;flex-wrap:wrap;}
.service:after{display:block;content:'';clear:both;}
.service > div{position:relative;float:left;width:calc(25% - 28.5px);margin:0 19px;padding-bottom:80px;}
.service > div:nth-child(4n+1){margin-left:0;}
.service > div:nth-child(4n){margin-right:0;}
.service > div a{display:block;}
.service > div h4{font-size:1.6em;margin-bottom:0px;margin-top:0;}
.service > div p{font-size:1.1em;color:#ff6633;}
.service > div ol{margin-top:8px;counter-reset:ol-counter;}
.service > div ol > li a{position:relative;display:block;padding:4px 0 4px 23px;font-size:1.06em;}
.service > div ol > li a::before{display:block;counter-increment: ol-counter;content:counter(ol-counter);position:absolute;top:6px;left:0;width:18px;height:18px;line-height:18px;background-color:#ff6633;border-radius:100px;text-align:center;font-size:0.8em;color:#fff;}
.service > div p.icon{position:absolute;bottom:0;left:0;width:100%;height:55px;background-color:#ccc;font-size:1.2em;color:#fff;font-weight:700;letter-spacing:0.1px;}
.service > div p.icon span{display:block;position:absolute;bottom:20px;left:20px;font-size:1.2em;color:#fff;}
.service > div p.icon:before{display:block;content:'';position:absolute;bottom:0;right:0;width:60%;height:116px;background:url(../images/service1.png) no-repeat bottom right;}
.service > div:nth-child(2) p.icon:before{background-image:url(../images/service2.png);}
.service > div:nth-child(3) p.icon:before{background-image:url(../images/service3.png);}
.service > div:nth-child(4) p.icon:before{background-image:url(../images/service4.png);}

.more{display:block;position:absolute;top:3px;right:0;width:22px;height:22px;text-indent:-99999px;overflow:hidden;}
.more:before, .more:after{display:block;content:'';position:absolute;top:5px;left:10px;width:2px;height:12px;background-color:#666;}
.more:after{transform:rotate(90deg);}

.banner{background-color:#e74143;}
.banner li{float:left;width:calc(25% - 28.5px);margin:0 19px;}
.banner li:nth-child(4n+1){margin-left:0;}
.banner li:nth-child(4n){margin-right:0;}
.banner li a{display:block;position:relative;width:100%;height:100%;padding:20px 0;text-align:left;}
.banner li a::before{display:inline-block;position:absolute;content:'';width:77px;height:77px;background:#fff url(../images/banner1.png) no-repeat center;border-radius:100px;margin:0px 20px 0px 0px;}
.banner li:nth-child(4) a::before{background-image:url(../images/banner5.png);}
.banner li:nth-child(3) a::before{background-image:url(../images/banner3.png);}
.banner li:nth-child(2) a::before{background-image:url(../images/banner4.png);}
.banner li h4{position:relative;font-size:1.46em;color:#fff;font-weight:500;margin-bottom:0;margin-top:0;display:block;padding-left:100px;}
.banner li p{color:#fff;opacity:0.5;display:inline-block;padding-left:100px;}
.banner li em{display:none;}

.tel{margin-top:40px;}
.tel li{position:relative;display:flex;flex-direction:row;float:left;width:calc(33.333% - 26px);margin:0 19.5px;padding:20px 30px;border:1px solid #999;}
.tel li:nth-child(3n+1){margin-left:0;}
.tel li:nth-child(3n){margin-right:0;}
.tel li h4{font-size:1.2em;font-weight:700;padding-right:20px;margin-top:0;}
.tel li h6{font-size:0.93em;color:#999;font-weight:400;}
.tel li .number{font-size:1.33em;}
.tel li:before{display:block;content:'';position:absolute;top:20px;right:30px;width:45px;height:45px;background:url(../images/tel1.png) no-repeat right top;}
.tel li.system:before{background-image:url(../images/tel2.png);}

.sub_tel{margin-top:35px;}
.sub_tel li{padding:15px 5px 15px 15px;border:1px solid #999;margin-bottom:9px;}
.sub_tel li h4{float:left;width:48px;font-weight:400;font-size:1em;margin-top:0;}
.sub_tel li h6{font-size:0.8em;color:#999;font-weight:400;}
.sub_tel li .number{font-size:1.27em;color:#333;line-height:125%;}


/* 오픈 팝업 */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 100;
    display: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
}

.popup1 {
    width: 100%;
    margin: 0 auto;
    display: none;
    position: fixed;
    z-index: 101;
}

.popup_con {
    min-width: 450px;
    width: 450px;
    min-height: 170px;
    background: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -225px;
    margin-top: -188px;
    z-index: 103;
    padding: 30px 30px 0px 30px;
    box-shadow: 0 2px 5px #000;
    border: 15px solid #e74143;
}

    .popup_con .tit {
        margin: 0px 0px 20px 0px;
        font-size: 26px;
        line-height: 32px;
        text-align: center;
        font-family: 'Noto Sans KR' !important;
    }

        .popup_con .tit .po1 {
            color: #e74143;
            font-size: 26px;
            line-height: 32px;
            font-family: 'Noto Sans KR' !important;
        }

        .popup_con .tit .po2 {
            color: #ff7a00;
            font-size: 26px;
            line-height: 32px;
            font-family: 'Noto Sans KR' !important;
        }

    .popup_con .txt01 {
        margin: 0px 0px 15px 0px;
        padding: 0px 0px 15px 0px;
        border-bottom: 1px dashed #ddd;
    }

    .popup_con .txt02 {
        width: 100%;
    }

        .popup_con .txt02 dt {
            display: inline-block;
            color: #e74143;
        }

        .popup_con .txt02 dd {
            display: inline-block;
        }

            .popup_con .txt02 dd a:hover {
                color: #ff7a00;
                text-decoration: underline;
            }

    .popup_con .txt03 {
        margin: 10px 0px 0px 0px;
        text-align: center;
    }

    .popup_con .x {
        float: right;
        height: 35px;
        left: 10px;
        position: relative;
        width: 34px;
        color: #ff7a00;
    }

        .popup_con .x:hover {
            cursor: pointer;
        }
