@charset "UTF-8";

/* ==========================================================================
   Style Guide CSS
   ========================================================================== */

#contents .h3 {
    background: url('../../images/resource/bul-h3.png') no-repeat left 11px;
    padding: 0 0 0 25px;
    font-size: 23px;
    font-family: 'Noto Medium';
    font-weight: normal;
    line-height: 1.4;
    color: #00428e;
}

#contents .h4 {
    position: relative;
    padding: 15px 0 0 0;
    font-size: 20px;
    font-family: 'Noto Medium';
    font-weight: normal;
    line-height: 1.4;
    color: #2c2f35;
}

#contents .h4:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30px;
    height: 2px;
    background: #3e3e3e;
}

#contents .h5 {
    font-size: 20px;
    font-family: 'Noto Regular';
    font-weight: normal;
    line-height: 1.4;
    color: #3974db;
}

#contents .h6 {
    position: relative;
    padding: 0 0 0 23px;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    font-family: 'Noto Medium';
    color: #000;
}

#contents .h6:after {
    content: '';
    position: absolute;
    left: 3px;
    top: 9px;
    width: 12px;
    height: 3px;
    background: #0178dd;
}

#contents .p {
    line-height: 1.7;
    font-size: 15px;
    font-family: 'Noto Regular';
    color: #666;
}

#contents .p.indent {
    padding: 0 0 0 23px;
}


/*간격*/

.space10 {
    margin-bottom: 10px;
}

.space15 {
    margin-bottom: 15px;
}

.space20 {
    margin-bottom: 20px;
}

.space25 {
    margin-bottom: 25px;
}

.space30 {
    margin-bottom: 30px;
}

.space35 {
    margin-bottom: 35px;
}

.space40 {
    margin-bottom: 40px;
}

.space45 {
    margin-bottom: 45px;
}

.space50 {
    margin-bottom: 50px;
}

.space55 {
    margin-bottom: 55px;
}

.space60 {
    margin-bottom: 60px;
}

.space65 {
    margin-bottom: 65px;
}

.space70 {
    margin-bottom: 70px;
}

.space70 {
    margin-bottom: 70px;
}

.space75 {
    margin-bottom: 75px;
}

.space80 {
    margin-bottom: 80px;
}

.space85 {
    margin-bottom: 85px;
}

.space90 {
    margin-bottom: 90px;
}

.space95 {
    margin-bottom: 95px;
}

.space100 {
    margin-bottom: 100px;
}

.space105 {
    margin-bottom: 105px;
}

.space110 {
    margin-bottom: 110px;
}

.space115 {
    margin-bottom: 115px;
}


/*포인트 컬리*/

.p-color1 {
    color: #00428e;
    font-weight: normal;
}

.p-color2 {
    color: #0178dd;
    font-weight: normal;
}

.p-color3 {
    color: #ffa409;
    font-weight: normal;
}


/*목차*/

.list-type1 li {
    position: relative;
    padding: 2px 0 2px 15px;
    font-size: 15px;
    font-family: 'Noto Regular';
    color: #666;
}

.list-type1 li:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 11px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #959595;
}

.list-type1.indent {
    padding: 0 0 0 23px;
}


/*테이블*/

.table-type1 {
    position: relative;
}

.table-type1:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 2px;
    background: #353e4d;
}

.table-type1 thead th {
    padding: 15px;
    background: #f3f5f7;
    border-right: 1px solid #b7c3ce;
    border-bottom: 1px solid #b7c3ce;
    font-weight: normal;
    color: #333;
}

.table-type1 thead th:last-child {
    border-right: 0px;
}

.table-type1 tbody th {
    padding: 15px;
    background: #f3f5f7;
    border-bottom: 1px solid #b7c3ce;
    border-right: 1px solid #b7c3ce;
    font-family: 'Noto Regular';
    font-weight: normal;
    font-size: 15px;
    color: #333;
}

.table-type1 tbody td {
    padding: 15px;
    border-right: 1px solid #dddee0;
    border-bottom: 1px solid #dddee0;
    font-size: 15px;
    font-family: 'Noto Light';
    color: #666;
}

.table-type1 tbody td:last-child {
    border-right: 0px;
}

.table-type1 .align-l {
    text-align: left;
}

.table-type2:after {
    background: #3974db;
}


/*박스*/

.box-type1 {
    padding: 30px 40px 50px 250px;
    background: #f7f7f7 url('../../images/contents/bg-box-type1.png') no-repeat 45px center;
    border: 1px solid #e6e6e6;
}

.box-type1 strong {
    font-family: 'Noto Medium';
    font-weight: normal;
    font-size: 24px;
    color: #0178dd;
}

.box-type1 p {
    font-family: 'Noto DemiLight';
    font-size: 16px;
    color: #666;
}

.box-type2 {
    padding: 5px;
    background: url(../../images/resource/line-location-home.png) left top;
}

.box-type2 .row {
    background-color: #fff;
    padding: 25px 60px;
    font-size: 16px;
    font-family: 'Noto DemiLight';
}


/*버튼*/

.button-type1 {
    display: inline-block;
    min-width: 140px;
    padding: 8px 15px 8px 15px;
    border: 1px solid #222222;
    font-family: 'Noto Medium';
    font-size: 16px;
    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);
    text-align: center;
}

.button-type1:hover {
    border: 1px solid #3c4c5d;
    background: #3c4c5d;
    color: #fff;
    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}

.button-type2 {
    display: inline-block;
    padding: 10px 30px 10px 15px;
    background: #a28948 url("../../images/common/btn_link2.png") no-repeat right center;
    border: 1px solid #786431;
    color: #fff;
    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}

.button-type2:hover {
    background: #c7a448 url("../../images/common/btn_link2.png") no-repeat right center;
    border: 1px solid #a28948;
    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}

.button-type3 {
    display: inline-block !important;
    padding: 10px 38px 10px 15px;
    background: url("../../images/common/btn_down.png") no-repeat right center;
    border: 1px solid #e1e1e1;
    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}

.button-type3:hover {
    border: 1px solid #2060aa;
    transition: all 0.25s cubic-bezier(0.7, 0, 0.3, 1);
}

.link-inline {
    display: inline-block !important;
}

/* ==========================================================================
   Custom Mode
   ========================================================================== */

@media all and (max-width:600px) {
    .box-type1 {
        padding: 210px 30px 30px 30px;
        background-position: center 30px;
    }
    .box-type1 strong {
        font-size: 18px;
    }
    .box-type1 p .no-br {
        display: none;
    }
}


/* ==========================================================================
   Mobile Mode
   ========================================================================== */

@media all and (max-width:420px) {
    /* ==========================================================================
       Style Guide CSS
       ========================================================================== */
    #contents .h3 {
        font-size: 24px;
    }
    #contents .p {
        font-size: 14px;
    }
    .table-type1 tbody th {
        font-size: 14px;
    }
    .table-type1 tbody td {
        font-size: 14px;
    }
    .table-scroll {
        overflow-x: scroll;
        width: 100%;
    }
    .table-icon {
        position: relative;
    }
    .table-icon:after {
        display: none;
        content: '';
        position: absolute;
        right: 0px;
        top: -55px;
        width: 25px;
        height: 45px;
        background: url("../../images/common/icon-scroll-table.png") no-repeat center top;
    }
    .table-type1 {
        width: 800px;
    }
    .button-type1 {
        display: block !important;
        width: 100%;
        margin: 0 0 10px 0;
    }
}