/*/*==================================================================================
Digital Media(Web & Mobile App) R&D Service Strategy, UI/UX/UR R&D Consulting
www.forcnc.co.kr / (02)322-0637 
2018~2019.COMPASSION KOREA.Project
==================================================================================*/

/*
 * 공통 
 *------------------------------------------*/
.bg-white {
    background-color: #fff;
}

/* Tab */
.wrap-tab1 {
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid rgba(191,195,198,0.8);
}

    .wrap-tab1 > a {
        font-family: 'noto_m';
        font-size: 14px;
        line-height: 1.33;
        color: #262626;
        text-align: center;
        flex: 1;
        padding: 12px 5px;
        border-bottom: 2px solid transparent;
    }

        .wrap-tab1 > a.selected {
            color: #005eb8;
            border-color: #005eb8;
        }

/* Label */
.label-child {
    display: inline-block;
    box-sizing: border-box;
    height: 24px;
    padding: 0 10px 2px;
    border: 1px solid #0155A6;
    border-radius: 12px;
}

    .label-child .label-txt {
        font-family: 'noto_m';
        font-size: 12px;
        line-height: 20px;
        color: #0155A6;
    }

    .label-child.group {
        border-color: #B13363;
    }

        .label-child.group .label-txt {
            color: #B13363;
        }

    .label-child.waiting {
        border-color: #DF4523;
    }

        .label-child.waiting .label-txt {
            color: #DF4523;
        }

    .label-child.inviting {
        border-color: #0B9E5F;
        background-color: rgba(11, 158, 95, 0.1);
    }

        .label-child.inviting .label-txt {
            color: #0B9E5F;
        }


/*
 * GNB 
 *------------------------------------------*/
.wrap-gnb {
    background-image: none;
    background-color: #005eb8;
}

    /*2019.01.10 주석*/
    /*.wrap-gnb .open-lnb {
        right: 9px;
        top: 3px;
        display: inline-block;
        width: 44px;
        height: 44px;
        background: url(/common/img/bu/lnb-list.png) no-repeat;
        background-size: contain;
    }*/

    .wrap-gnb .gnb-alarm {
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
        position: absolute;
        right: 56px;
        top: 3px;
        display: inline-block;
        width: 44px;
        height: 44px;
        background: url(/common/img/bu/gnb-alarm.png) no-repeat;
        background-size: contain;
        cursor: pointer;
        z-index: 5;
    }

    /*2019.01.10 주석*/
    /*.wrap-gnb.type-main .open-lnb {
        background-image: url(/common/img/bu/lnb-list-main.png);
    }*/

    .wrap-gnb.type-main .gnb-alarm {
        background-image: url(/common/img/bu/gnb-alarm-main.png);
    }

.gnb-alarm .gnb-alarm-noti {
    font-family: 'noto_b';
    font-size: 9px;
    line-height: 15px;
    color: #fff;
    text-indent: 0;
    text-align: center;
    position: absolute;
    right: 3px;
    top: 4px;
    display: inline-block;
    min-width: 17px;
    height: 17px;
    border-radius: 10px;
    background-color: #F44A51;
}

/* 알림 레이어 */
.gnb-alarm-layer {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 100px);
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .15);
    z-index: 11;
}

    .gnb-alarm-layer:before {
        content: '';
        position: absolute;
        right: 71px;
        top: -6px;
        display: inline-block;
        width: 10px;
        height: 10px;
        transform: rotate(45deg);
        border: 1px solid #ccc;
        border-width: 1px 0 0 1px;
        background-color: #fff;
        ;
    }

    .gnb-alarm-layer .gnb-alarm-list {
        padding: 5px 20px;
        margin: 0;
    }

    .gnb-alarm-layer .gnb-alarm-item {
        height: auto;
        padding: 10px 0;
        float: none;
    }

    .gnb-alarm-layer .gnb-alarm-anchor {
        line-height: 1.33;
        color: #121212;
        display: table;
        width: 100%;
        height: auto;
        table-layout: fixed;
        margin: 0;
    }

    .gnb-alarm-layer .gnb_alarm_anchor:hover .gnb_alarm-title {
        color: #121212;
        text-decoration: underline;
    }

    .gnb-alarm-layer .gnb-alarm-anchor .gnb-alarm-icon-area,
    .gnb-alarm-layer .gnb-alarm-anchor .gnb-alarm-info-area {
        display: table-cell;
        vertical-align: top;
    }

    .gnb-alarm-layer .gnb-alarm-anchor .gnb-alarm-icon-area {
        width: 60px;
        padding-right: 15px;
    }

    .gnb-alarm-layer .gnb-alarm-anchor .gnb-alarm-title {
        font-family: 'noto_r';
        font-size: 16px;
        line-height: 1.33;
        color: #121212;
        margin-bottom: 3px;
    }

    .gnb-alarm-layer .gnb-alarm-anchor .gnb-alarm-date {
        font-size: 14px;
        line-height: 1.33;
        color: #767676;
    }

    .gnb-alarm-layer .gnb-alarm-btns {
        padding: 10px 20px 20px;
    }

    .gnb-alarm-layer .gnb-alarm-more {
        font-size: 14px;
        line-height: 1.33;
        color: #767676;
        text-align: center;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 10px 20px;
        border: 1px solid #CCC;
        border-radius: 4px;
    }

    .gnb-alarm-layer .gnb-alarm-icon {
        display: inline-block;
        width: 45px;
        height: 45px;
        text-align: center;
        border-radius: 50%;
        vertical-align: top;
    }

        .gnb-alarm-layer .gnb-alarm-icon.type1 {
            background-color: #8AC1E1;
        }

        .gnb-alarm-layer .gnb-alarm-icon .icon-gnb-alarm-type1 {
            margin-top: 14px;
        }

        .gnb-alarm-layer .gnb-alarm-icon.type2 {
            background-color: #E5DBAA;
        }

        .gnb-alarm-layer .gnb-alarm-icon .icon-gnb-alarm-type2 {
            margin-top: 13px;
        }

        .gnb-alarm-layer .gnb-alarm-icon.type3 {
            background-color: #F99F9F;
        }

        .gnb-alarm-layer .gnb-alarm-icon .icon-gnb-alarm-type3 {
            margin-top: 12px;
        }

    .gnb-alarm-layer .gnb-alarm-item.gnb-alarm-checked .gnb-alarm-title {
        color: #999;
    }

/* alarm icon */
.icon-gnb-alarm {
    display: inline-block;
    vertical-align: top;
    background: url(../img/common/icon-gnb-alarm.png) no-repeat;
    background-size: 200px;
}

.icon-gnb-alarm-type1 {
    width: 20px;
    height: 16px;
    background-position: left top;
}

.icon-gnb-alarm-type2 {
    width: 20px;
    height: 20px;
    background-position: -30px top;
}

.icon-gnb-alarm-type3 {
    width: 22px;
    height: 19px;
    background-position: -60px top;
}

/* iscroll 적용 */
.gnb-alarm-layer .iscroll {
    position: absolute;
    z-index: 1;
    top: 10px;
    bottom: 70px;
    left: 0;
    width: 100%;
    overflow: hidden;
}

.gnb-alarm-layer .iscroll_content {
    position: absolute;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}


/*
 * LNB 
 *------------------------------------------*/
.wrap-lnb .link-support ul {
    display: flex;
    flex-wrap: wrap;
    margin: -10px 0;
}

    .wrap-lnb .link-support ul > li {
        position: relative;
        margin: 10px 0;
    }

        .wrap-lnb .link-support ul > li:nth-child(1),
        .wrap-lnb .link-support ul > li:nth-child(2),
        .wrap-lnb .link-support ul > li:nth-child(3),
        .wrap-lnb .link-support ul > li:nth-child(4) {
            flex: none;
            display: block;
            width: 50%;
            background: none;
        }

            .wrap-lnb .link-support ul > li:nth-child(2):before,
            .wrap-lnb .link-support ul > li:nth-child(4):before {
                content: '';
                position: absolute;
                left: 0;
                top: 5px;
                bottom: 5px;
                border-left: 1px dashed #a6a6a6;
            }

        .wrap-lnb .link-support ul > li:nth-child(3) {
            background: none;
        }

        .wrap-lnb .link-support ul > li a {
            padding: 50px 0 0 0;
            background-size: 44px;
            background-repeat: no-repeat;
            background-position: center top;
        }

        .wrap-lnb .link-support ul > li:nth-child(1) a {
            background-image: url('/common/img/icon/lnb-support1.png')
        }

        .wrap-lnb .link-support ul > li:nth-child(2) a {
            background-image: url('/common/img/icon/lnb-support2.png')
        }

        .wrap-lnb .link-support ul > li:nth-child(3) a {
            background-image: url('/common/img/icon/lnb-support3.png')
        }

        .wrap-lnb .link-support ul > li:nth-child(4) a {
            background-image: url('/common/img/icon/lnb-support4.png')
        }


/*같이양육 숨김(기존 3개 표시) 2019.02.08*/
.wrap-lnb .link-support-three {
    display: block;
    padding: 18px 15px 22px 15px;
    border-bottom: 1px solid #ccc;
    background-color: #eee
}

    .wrap-lnb .link-support-three strong {
        display: block;
        font-size: 14px;
        line-height: 16px;
        color: #121212;
        font-weight: normal;
        margin-bottom: 20px
    }

    .wrap-lnb .link-support-three ul {
        display: table;
        width: 100%
    }

        .wrap-lnb .link-support-three ul > li:nth-child(1) {
            display: table-cell;
            width: 33%
        }

        .wrap-lnb .link-support-three ul > li:nth-child(2) {
            display: table-cell;
            width: 34%;
            background: url('/common/img/bu/gapline3.png') 0 top no-repeat;
            background-size: 1px 44px
        }

        .wrap-lnb .link-support-three ul > li:nth-child(3) {
            display: table-cell;
            width: 33%;
            background: url('/common/img/bu/gapline3.png') 0 top no-repeat;
            background-size: 1px 44px
        }

        .wrap-lnb .link-support-three ul > li a {
            display: block;
            font-size: 12px;
            line-height: 16px;
            color: #444;
            text-align: center;
            word-spacing: -1px
        }

        .wrap-lnb .link-support-three ul > li:nth-child(1) a {
            display: block;
            background: url('/common/img/icon/lnb-support-three1.png') center top no-repeat;
            background-size: 44px;
            padding: 50px 0 0 0
        }

        .wrap-lnb .link-support-three ul > li:nth-child(2) a {
            display: block;
            background: url('/common/img/icon/lnb-support-three3.png') center top no-repeat;
            background-size: 44px;
            padding: 50px 0 0 0
        }

        .wrap-lnb .link-support-three ul > li:nth-child(3) a {
            display: block;
            background: url('/common/img/icon/lnb-support-three2.png') center top no-repeat;
            background-size: 44px;
            padding: 50px 0 0 0
        }
/*END - 같이양육 숨김(기존 3개 표시) 2019.02.08*/

/*
 * 메인
 *------------------------------------------*/
/* 메인 - 공통 */
.main-title {
    text-align: center;
    padding: 50px 0 30px;
}

    .main-title .title-box {
        position: relative;
    }

        .main-title .title-box:before {
            content: '';
            display: block;
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            border-top: 1px solid #b5b5b5;
        }

    .main-title .title-txt {
        font-family: 'noto_r';
        font-size: 24px;
        line-height: 1.33;
        color: #171717;
        position: relative;
        display: inline-block;
        max-width: calc(100vw - 100px);
        padding: 0 10px;
        background-color: #fff;
        z-index: 1;
    }


/* 메인 - 어린이 */
.main-child {
    padding: 0 18px;
}

.child-set .img-child {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
}

    .child-set .img-child img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
    }

.child-set .textWrap {
    text-align: center;
    padding: 30px 0;
}

.child-set .label-child {
    height: 28px;
    border-radius: 14px;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 8px;
}

    .child-set .label-child .label-txt {
        font-size: 15px;
        line-height: 26px;
    }

.child-set .textWrap .title {
    font-family: 'noto_m';
    font-size: 20px;
    line-height: 1.33;
    color: #171717;
    margin-bottom: 15px;
}

.child-set .textWrap .con {
    font-family: 'noto_r';
    font-size: 15px;
    line-height: 1.5;
    color: #555;
    margin-bottom: 25px;
}

.child-set .child-set-btns {
    display: flex;
    flex-wrap: wrap;
}

.child-set .btn-more1,
.child-set .btn-more2 {
    font-family: 'noto_r';
    font-size: 15px;
    line-height: 44px;
    color: #005eb8;
    text-align: center;
    white-space: nowrap;
    flex: 1;
    margin: 0;
    box-sizing: border-box;
    display: inline-block;
    padding: 0 10px;
    border: 1.5px solid #005eb8;
    border-radius: 5px;
    vertical-align: top;
}

.child-set .btn-more2 {
    color: #fff;
    background-color: #005eb8;
    /*margin-left: 3px;*/
    border-color: transparent;
}

    .child-set .btn-more1:hover,
    .child-set .btn-more2:hover {
        text-decoration: none;
    }

.child-set .btn-more1:hover {
    transition-property: background-color, color;
    transition-duration: .3s;
    background-color: #005eb8;
    color: #fff;
}

.child-set .btn-more2:hover {
    transition-property: background-color;
    transition-duration: .3s;
    background-color: #005297;
}

.support-list {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
}

    .support-list .support-item {
        flex: auto;
        width: 50%;
        padding-left: 15px;
        margin-bottom: 30px;
    }

        .support-list .support-item .img-area {
            position: relative;
        }

            .support-list .support-item .img-area .img-shape {
                width: 100%;
                border-radius: 4px;
                overflow: hidden;
            }

        .support-list .support-item .prefix-support {
            font-family: 'noto_b';
            font-size: 12px;
            line-height: 22px;
            color: #fff;
            text-align: center;
            position: absolute;
            left: 4px;
            top: 4px;
            display: inline-block;
            height: 24px;
            min-width: 60px;
            padding: 0 10px;
            background-color: rgba(0, 93, 171, .8);
            border-radius: 4px;
            z-index: 1;
        }

        .support-list .support-item .txt-area {
            margin-top: 10px;
            padding-right: 5px;
        }

    .support-list .support-title {
        font-family: 'noto_m';
        font-size: 18px;
        line-height: 1.33;
        color: #171717;
        margin-bottom: 5px;
    }

    .support-list .support-desc {
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 1.33;
        color: #666;
    }

    .support-list .support-item.nation {
        width: 100%;
    }

        .support-list .support-item.nation .map {
            width: 100%;
            height: 230px;
            border-radius: 4px;
        }

        .support-list .support-item.nation .support-title {
            margin-top: 15px;
        }

        .support-list .support-item.nation .txt-area {
            position: relative;
        }

    .support-list .support-item .support-nation-detail {
        position: absolute;
        right: 0;
        top: -5px;
    }

    .support-list .support-item .anchor-nation {
        font-size: 13px;
        line-height: 1.33;
        color: #808080;
        display: inline-block;
        padding: 8px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }


/* 메인 - 링크배너 */
.main-link-banner {
    padding: 50px 18px;
    background-color: #005eb8;
}

    .main-link-banner .banner-miracle,
    .main-link-banner .banner-rule {
        text-align: center;
        box-sizing: border-box;
        padding: 30px 30px;
        border-radius: 10px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
    }

    .main-link-banner .banner-rule {
        margin-top: 10px;
    }

    .main-link-banner .lb-graphic {
        text-align: center;
    }

        .main-link-banner .lb-graphic img {
            display: inline-block;
        }

    .main-link-banner .lb-title {
        font-family: 'noto_m';
        font-size: 23px;
        line-height: 1.33;
        color: #005eb8;
        margin-top: 20px;
    }

    .main-link-banner .lb-desc {
        font-family: 'noto_r';
        font-size: 15px;
        line-height: 1.5;
        color: #005eb8;
        margin-top: 12px;
    }

    .main-link-banner .btn-lb-anchor {
        font-size: 17px;
        line-height: 1.33;
        color: #fff;
        text-align: center;
        display: inline-block;
        width: 155px;
        padding: 12px 20px 14px;
        margin-top: 25px;
        border-radius: 4px;
        background-color: #005eb8;
        box-shadow: 0 4px 8px rgba(31, 95, 178, .25);
    }

        .main-link-banner .btn-lb-anchor:hover {
            text-decoration: none;
            background-color: #005297;
            transition: background-color, .3s;
        }


/* 메인 - 후원금원칙 */
.main-rule {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 18px 0;
    background-color: #1F5FB2;
}

    .main-rule .rule-info,
    .main-rule .rule-graphic {
        flex: 1;
    }

    .main-rule .rule-info {
        padding-right: 50px;
        padding-bottom: 30px;
    }

    .main-rule .rule-title {
        font-family: 'noto_m';
        font-size: 24px;
        line-height: 1.33;
        color: #fff;
        text-align: center;
        flex: none;
        width: 100%;
        margin-bottom: 20px;
    }

    .main-rule .rule-info-txt1 {
        font-size: 18px;
        line-height: 1.33;
        color: #fff;
        text-align: center;
        flex: none;
        width: 100%;
        margin-bottom: 30px;
    }

        .main-rule .rule-info-txt1 b {
            font-family: 'noto_m';
        }

    .main-rule .rule-info-txt2 {
        font-family: 'noto_l';
        font-size: 13px;
        line-height: 1.7;
        color: #fff;
    }

        .main-rule .rule-info-txt2 b {
            font-family: 'noto_m';
        }

    .main-rule .btn_b_type3 {
        display: inline-block;
        width: auto;
        height: 46px;
        font-family: 'noto_m';
        font-size: 14px;
        color: #fff;
        text-align: center;
        line-height: 42px;
        text-decoration: none;
        vertical-align: middle;
        padding: 0 5px 2px;
        border: 1px solid #fff;
        border-radius: 4px;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        margin-top: 15px;
    }

        .main-rule .btn_b_type3:hover {
            background: #fff;
            color: #1F5FB2;
            text-decoration: none;
        }

    .main-rule .rule-graphic {
        flex: none;
        align-self: stretch;
        width: 100px;
        margin-right: 10px;
        min-height: 200px;
        text-align: center;
    }

    .main-rule .rule-arrow {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        width: 100px;
        height: 100%;
        padding-top: 70px;
    }

        .main-rule .rule-arrow .rule-arrow_top {
            border: 70px solid transparent;
            border-bottom-color: #0B3A77;
            position: absolute;
            top: -70px;
            left: calc(50% - 70px);
        }

        .main-rule .rule-arrow .rule-arrow_bottom {
            position: relative;
            display: block;
            height: 100%;
            background-color: #0B3A77;
        }

    .main-rule .rule-graphic-txt1 {
        font-family: 'noto_l';
        font-size: 12px;
        line-height: 1.33;
        color: #fff;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: -35px;
    }

    .main-rule .rule-graphic-txt2 {
        font-family: 'noto_b';
        font-size: 33px;
        line-height: 1;
        color: #fff;
        text-align: center;
        padding-top: 5px;
    }

        .main-rule .rule-graphic-txt2 i {
            font-size: 17px;
            font-style: normal;
        }

    .main-rule .rule-graphic-txt3 {
        font-family: 'noto_l';
        font-size: 15px;
        line-height: 1.33;
        color: #9DAFC7;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20px;
    }

        .main-rule .rule-graphic-txt3 b {
            font-family: 'noto_m';
        }

/* 메인 - 컴패션소식 */
.main-news {
    padding: 0 18px 30px;
}

    .main-news .news-list {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .main-news .news-item {
        flex: none;
        width: calc(50% - 5px);
        margin-bottom: 10px;
    }

        .main-news .news-item:nth-child(odd) {
            margin-left: 5px;
        }

        .main-news .news-item:nth-child(even) {
            margin-right: 5px;
        }

        .main-news .news-item.wide {
            width: 100%;
            margin-left: 0;
        }

    .main-news .news-anchor {
        position: relative;
        display: block;
    }

    .main-news .txt-area {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        padding: 10px 15px;
        background-color: rgba(0, 0, 0, .5);
    }

        .main-news .txt-area .txt-wrap {
            flex: 1;
            width: 100%;
            align-self: center;
        }

    .main-news .item-cate {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #fff;
        display: none;
        margin-bottom: 15px;
    }

    .main-news .item-title {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #fff;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .main-news .item-desc {
        font-family: 'noto_r';
        font-size: 15px;
        line-height: 20px;
        color: rgba(255, 255, 255, .8);
        display: none;
        max-height: calc(20px * 6);
        overflow: hidden;
        margin-bottom: 15px;
    }

    .main-news .wide .item-desc {
        max-height: calc(20px * 8);
    }

    .main-news .item-date {
        font-family: 'noto_r';
        font-size: 15px;
        line-height: 1.33;
        color: rgba(255, 255, 255, .7)
    }


/*
 * 일대일 후원
 *------------------------------------------*/
/*
/* 후원자 후기 */
.sponsor-nurture .sponsor-review {
    margin-top: 30px;
    margin-bottom: 50px;
    text-align: center;
}

    .sponsor-nurture .sponsor-review .bar {
        background: #428dce;
        display: inline-block;
        width: 2px;
        height: 30px;
        margin-bottom: 30px;
        opacity: 0.6;
    }

    .sponsor-nurture .sponsor-review .review-item {
        margin-bottom: 30px;
        border-bottom: 1px solid #e0e0e0;
    }

        .sponsor-nurture .sponsor-review .review-item:last-child {
            border-bottom: none;
        }

    .sponsor-nurture .sponsor-review .img {
        margin-bottom: 15px;
    }

    .sponsor-nurture .sponsor-review .review {
        font-size: 14px;
        word-break: keep-all;
        margin-bottom: 6px;
    }

    .sponsor-nurture .sponsor-review .sponsor-name {
        font-size: 13px;
        color: #4a4a4a;
        font-family: 'noto_m';
        margin-bottom: 20px;
    }

/* 후원자 바로가기 링크 */
.sponsor-nurture .sponsor-link {
    margin: 30px -20px 0;
    padding: 20px 20px;
    background-color: #005eb8;
}

    .sponsor-nurture .sponsor-link .link-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sponsor-nurture .sponsor-link .quick-link {
        flex: none;
        min-width: 150px;
        margin: 20px 20px;
    }

    .sponsor-nurture .sponsor-link .img-quick-link {
        width: 60px;
        height: 60px;
        margin: 0 auto 10px;
        display: block;
    }

    .sponsor-nurture .sponsor-link .bt-type1 {
        width: 100%;
        line-height: 1.5;
    }


/*
 * 같이양육 - 결제
 *------------------------------------------*/
/* 공통 */

.icon-process.icon-process-p1 {
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    margin-top: 12px;
}

.icon-process.icon-process-p2 {
    width: 30px;
    height: 30px;
    background-position: -30px -30px;
    margin-top: 12px;
}

.icon-process.icon-process-p3 {
    width: 30px;
    height: 30px;
    background-position: -60px -30px;
    margin-top: 12px;
}

.icon-process.icon-process-p4 {
    width: 30px;
    height: 30px;
    background-position: -90px -30px;
    margin-top: 12px;
}

.active .icon-process.icon-process-p1 {
    width: 30px;
    height: 30px;
    background-position: 0 -30px;
    margin-top: 12px;
}

.active .icon-process.icon-process-p2 {
    width: 30px;
    height: 30px;
    background-position: -30px -30px;
    margin-top: 12px;
}

.active .icon-process.icon-process-p3 {
    width: 30px;
    height: 30px;
    background-position: -60px -30px;
    margin-top: 12px;
}

.active .icon-process.icon-process-p4 {
    width: 30px;
    height: 30px;
    background-position: -90px -30px;
    margin-top: 12px;
}

.icon-process {
    display: inline-block;
    background: url('/common/img/page/sponsor/pay-group.png') no-repeat;
    /*background-size: 100px;*/
    background-size: 150px;
    vertical-align: middle;
}

.spon-process .wrap-header {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 8px;
    padding-top: 15px;
}

.wrap-header .txt-title {
    font-family: 'noto_m';
    font-size: 15px;
    line-height: 18px;
    color: #333;
}

.spon-process .wrap-bt {
    margin-bottom: 30px;
}


/*
 * 같이양육 - 결제 
 *------------------------------------------*/
.spon-process .process-list{
    position:relative;
    padding:0px 0 28px;
    margin-bottom:6px;
    text-align:center;
    border-bottom:solid 1px #E6E6E6;
}
/*.spon-process .process-list:before{
    content:' ';
    position:absolute;
    left:calc(50% - 120px);
    right:calc(50% - 120px);
    top:106px;
    height:1px;
    background-color:#C3CFD9;
}*/
.spon-process .process-list::after{
    content:' ';
    position:absolute;
    width:100%;
    bottom:-7px;
    left:0;
    height:6px;
    background-color:#F7F7F7;
}
.spon-process .process-item{
    position:relative;
    text-align:center;
    display:inline-block;
    /*width:110px;*/
    width:80px;
    z-index:1;
}
.spon-process .process-anchor{
    display:block;
}
.spon-process .process-anchor .icon-area{
    text-align:center;
    display:inline-block;
    width:8px;
    height:8px;
    background-color:#fff;
    border:1px solid #C3CFD9;
    border-radius:50%;
    vertical-align:middle;
}
.spon-process .process-item.active .icon-area{
    width:12px;
    height:12px;
    background-color:#005eb8;
    box-shadow:0 3px 3px rgba(0, 93, 171, 0.2);
}
.spon-process .process-anchor .icon-area .icon-process{
    margin-top:15px;
}
.spon-process .process-item.active .txt-area{
    color:#005eb8;
    font-size:12px;
    font-family:'noto_m';
}
.spon-process .process-item .txt-area{
    color:#8596A6;
    font-size:12px;
    font-family:'noto_r';
    margin-bottom:4px;
}


/* 같이 양육 종류 확인 */
.spon-process .type-confirm .content-sect {
    background: #F3F3F3;
    padding: 20px 20px 28px;
    margin-left: -20px;
    margin-right: -20px;
}

.spon-process .type-confirm .content-tit {
    text-align: center;
    padding-bottom: 8px;
    font-size: 18px;
    color: #005eb8;
    font-family: 'noto_m';
}

.spon-process .type-confirm .info-item {
    font-size: 15px;
    font-family: 'noto_d';
    word-break: keep-all;
    text-indent: -10px;
    padding-left: 10px;
}

.spon-process .type-confirm .wrap-bt {
    margin-top: 40px;
    margin-bottom: 0px;
}

/* 후원자 정보입력 */
.spon-process .choice-account {
    padding: 36px 0 0px;
}

/* 후원 구좌 선택 */
.account-content {
    margin: 50px 0 30px; /*2019.01.10 수정 30px추가*/
}

.account-graphic {
    position: relative;
    text-align: center;
}

.account-chart {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
}

.child-box {
    position: absolute;
    left: calc(50% - 45px);
    top: -145px;
    width: 90px;
    height: 90px;
    overflow: hidden;
    background-color: #C6C6C6;
    z-index: 10;
}

    .child-box .child-current {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 0;
        display: block;
        background-color: #005eb8;
    }

    .child-box .child-mask {
        position: relative;
        margin: -5px;
        width: 100px;
        height: 100px;
        z-index: 5;
        background-image: url('../img/page/etc/child_mask.png');
        background-size: 100px;
    }

.account-btns {
    text-align: center;
    margin: 30px 0;
}

    /* 2019.03.04 정다솜 [Nto1] .account_btns .btns_disc span 추가 (item-group.ascx 사용) */
    .account-btns .btns_disc, .account_btns .btns_disc span {
        font-size: 14px;
        color: #333;
        font-family: 'noto_b';
        margin-bottom: 10px;
    }

    .account-btns .btns-wrap {
        display: inline-block;
        text-align: left;
        max-width: 325px;
    }

    .account-btns .bt-type10 {
        margin: 5px;
    }

        .account-btns .bt-type10.active {
            color: #fff;
            background-color: #005eb8;
            border: 1px solid #005eb8;
            box-shadow: 2px 4px 6px rgba(0,93, 171, 0.3);
        }

/* 후원자 정보 입력 */
.member-join .txt-title {
    background-position-y: 3px;
}

    .member-join .txt-title.title-except {
        font-size: 12px;
        color: #767676;
        font-family: 'noto_d';
    }

/* 후원 그룹 정보 카드 */
.spon-complete {
    font-size: 13px;
    line-height: 1.5;
    color: #767676;
    text-align: center;
    padding: 15px 0 10px;
    word-break: keep-all;
}

    .spon-complete em {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.5;
        color: #005eb8;
        font-style: normal;
        display: block;
    }

.process-content-body .sponsor-card {
    margin-top: 16px;
}

.sponsor-card .card-left {
    position: relative;
    background-color: #005eb8;
    padding: 10px 16px;
}

    .sponsor-card .card-left .group-card-title {
        color: #fff;
        font-size: 18px;
        font-family: 'noto_m';
    }

    .sponsor-card .card-left .group-number {
        color: #B3CCE6;
        font-size: 15px;
    }

    .sponsor-card .card-left .group-info {
        position: absolute;
        top: 13px;
        right: 16px;
    }

    .sponsor-card .card-left .label-child {
        background-color: #fff;
        border-color: transparent;
        margin-bottom: 5px;
    }

.sponsor-card .card-right {
    flex: 1;
    background-color: #fff;
    font-size: 0;
    padding: 16px 16px 0;
    border: 1px solid #E3E3E3;
}

.sponsor-card .sponsor-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100%;
}

.sponsor-card .sponsor-item {
    margin-bottom: 20px;
}

.sponsor-card .sponsor-item {
    flex: none;
    display: table;
    width: 100%;
    table-layout: fixed;
}

.sponsor-card .sponsor-left {
    width: 72px;
}

.sponsor-card .sponsor-left, .sponsor-card .sponsor-info, .sponsor-card .sponsor-btns {
    display: table-cell;
    vertical-align: top;
}

    .sponsor-card .sponsor-left .sponsor-thumb {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 50%;
        vertical-align: middle;
        display: inline-block;
    }

.sponsor-card .sponsor-right {
    display: table-cell;
    vertical-align: middle;
}

.sponsor-card .sponsor-info .sponsor-name {
    font-size: 17px;
    line-height: 1.33;
    font-family: 'noto_m';
    color: #171717;
    vertical-align: middle;
    padding-right: 4px;
}

.sponsor-card .sponsor-info .sponsor-label {
    display: inline-block;
    vertical-align: middle;
}

.sponsor-card .sponsor-label {
    position: relative;
}

.sponsor-card .sponsor-info .sponsor-desc {
    font-size: 15px;
    line-height: 1.33;
    color: #171717;
    display: block;
    margin-top: 3px;
}

    .sponsor-card .sponsor-info .sponsor-desc.unset {
        color: #DF4523;
    }

.sponsor-card .sponsor-btns {
    text-align: right;
    display: flex;
    justify-content: space-between;
    width: 230px;
    margin-top: 10px;
}

.my-mychild .sponsor-card {
    margin-bottom: 20px;
    overflow: hidden;
    border-width: 0;
    border-radius: 2px;
    box-shadow: 0px 3px 4px 0px rgba(191,195,198,0.8);
}

    .my-mychild .sponsor-card .card-right {
        border-width: 0;
    }


/*
 * 같이양육 - 후원자정보 입력
 *------------------------------------------*/
/* 후원프로세스 - 콘텐츠 - 공통 - 체크 */
.process-check {
    display: inline-block;
}

    .process-check .input-pcheck {
        visibility: hidden;
        position: absolute;
    }

    .process-check .label-pcheck {
        text-align: center;
        display: inline-block;
        width: 200px;
        height: 38px;
        border-radius: 4px;
        background-color: #f5f5f5;
        cursor: pointer;
    }

        .process-check .label-pcheck .txt {
            font-size: 13px;
            line-height: 36px;
            color: #444;
        }

            .process-check .label-pcheck .txt:before {
                content: '';
                display: inline-block;
                width: 13px;
                height: 10px;
                margin-right: 7px;
                background: url(/common/img/page/sponsor/icon-process.png) left top no-repeat;
                background-size: 50px;
            }

    .process-check .input-pcheck:checked + .label-pcheck {
        background-color: #444;
    }

        .process-check .input-pcheck:checked + .label-pcheck .txt {
            color: #fff;
        }

            .process-check .input-pcheck:checked + .label-pcheck .txt:before {
                background-position: left -15px;
            }

/* 자세히보기 */
.process-frm-set {
    position: relative;
    margin-top: 10px;
}

.detail-wrap {
    display: inline-block;
    margin-left: 10px;
}

.detail-wrap .btn-process-detail {
    position: relative;
    display: inline-block;
    height: 32px;
    padding: 0 15px;
    border-radius: 16px;
    background-color: #f5f5f5;
    vertical-align: middle;
}

.detail-wrap .btn-process-detail .btn-txt {
    font-size: 13px;
    line-height: 30px;
    color: #333;
}

.detail-wrap .btn-process-detail .btn-txt:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-left: 8px;
    background: url(/common/img/page/sponsor/icon-process.png) -30px top no-repeat;
    background-size: 50px;
    opacity: .3;
}

.detail-wrap .layer-detail {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    max-width: 500px;
    padding: 20px;
    border-radius: 7px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    z-index: 1;
}

.detail-wrap .layer-detail:after {
    content: '';
    position: absolute;
    left: 260px;
    top: -7px;
    display: inline-block;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background-color: #fff;
    border: 0px solid #d9d9d9;
    border-left-width: 1px;
    border-top-width: 1px;
    z-index: 1;
}

.detail-wrap .detail-list {
    margin: 0;
    padding: 0;
}

.detail-wrap .detail-item {
    font-size: 14px;
    line-height: 1.33;
    color: #5e5e5e;
    position: relative;
    margin: 8px 10px;
    word-break: keep-all;
}

.detail-wrap .detail-item:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 7px;
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #5e5e5e;
}

.detail-wrap.active .btn-process-detail .btn-txt:after {
    transform: rotate(180deg)
}


/*
 * 마이컴패션 - 공통
 *------------------------------------------*/
.sub-mymenu > ul > li.i-alarm {
    background: url('/common/img/icon/my-lnb-alarm.png') 15px center no-repeat;
    background-size: 23px 22px;
}

.sub-mymenu > ul > li.i-letter {
    background: url('/common/img/icon/my-lnb-letter.png') 15px center no-repeat;
    background-size: 23px;
}

.my-main {
    padding-bottom: 0;
}

.box-hastitle {
    padding: 0;
    display: block;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 3px 4px 0px rgba(191,195,198,0.8);
}

    .box-hastitle .box-head {
        text-align: center;
        display: flex;
        height: 50px;
        background-color: #005eb8;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

        .box-hastitle .box-head .box-tit {
            font-family: 'noto_r';
            font-size: 15px;
            line-height: 1.33;
            color: #fff;
            flex: 1;
            align-self: center;
        }

    .box-hastitle .box-body {
        padding: 18px;
    }

.wrap-sectionsub-my {
    padding-bottom: 30px;
}


/*
 * 마이컴패션 - 메인
 *------------------------------------------*/
/* 후원자 정보 */
.wrap-mysupporter {
    padding: 25px 10px 10px;
    background-color: #005eb8;
    text-align: center;
}

    .wrap-mysupporter p:nth-of-type(1) {
        font-family: 'noto_r';
        font-size: 19px;
        line-height: 1.33;
        color: #fff;
        float: none;
        width: auto;
    }

        .wrap-mysupporter p:nth-of-type(1) > .sponsor-name {
            font-family: 'noto_b';
        }

    .wrap-mysupporter p:nth-of-type(2) {
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 1.33;
        color: rgba(255, 255, 255, .5);
        float: none;
        width: auto;
        margin-top: 5px;
    }

        .wrap-mysupporter p:nth-of-type(2) .no {
            padding: 0;
            margin: 0;
            background: none;
        }

            .wrap-mysupporter p:nth-of-type(2) .no:before {
                content: '·';
                margin-left: 5px;
                margin-right: 5px;
            }

    .wrap-mysupporter .btn-area {
        margin-top: 25px;
    }

        .wrap-mysupporter .btn-area .btn-edit {
            font-family: 'noto_m';
            font-size: 13px;
            line-height: 1.33;
            color: #fff;
            display: block;
            padding: 10px 20px 12px;
            border-radius: 5px;
            background-color: #003E7E;
        }

/* 새로운 알림 */
.my-alarm {
    margin-top: 15px;
}

    .my-alarm ul {
        margin: 0;
        padding: 0;
    }

    .my-alarm li {
        margin: 10px 0;
    }

        .my-alarm li:first-child {
            margin-top: 0;
        }

        .my-alarm li:last-child {
            margin-bottom: 0;
        }

        .my-alarm li .anchor {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .my-alarm li .alarm_desc {
            font-family: 'noto_m';
            font-size: 15px;
            line-height: 1.33;
            color: #171717;
        }

        .my-alarm li .alarm_date {
            color: #a2a2a2;
            margin-top: 2px;
        }

/* 나의 어린이 */
.my-main .my-mychild {
    margin-top: 15px;
    padding-bottom: 0;
}

    .my-main .my-mychild li {
        margin-top: 0;
    }

.my-main .no-supporter {
    padding: 90px 0 0;
    margin-top: 0 !important;
    border-top-width: 0;
    background-position: center top;
}

.my-main .recommandchild {
    margin-top: 15px;
}

.my-main .btn-mychildren {
    font-family: 'noto_m';
    font-size: 15px;
    line-height: 1.33;
    color: #fff;
    text-align: center;
    display: block;
    padding: 12px 15px;
    margin-top: 5px;
    background-color: #23abe2;
    border: 1px solid #ccc;
    box-shadow: 0px 3px 4px 0px rgba(191,195,198,0.8);
}

/* 기도 나눔 */
.my-pray {
    margin-top: 15px;
}

    .my-pray .pray-tit {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.5;
        color: #171717;
    }

    .my-pray .pray-date {
        color: #a2a2a2;
        margin-top: 10px;
    }

/* 대시보드 */
.my-main .recent-dash {
    padding: 0;
}

.recent-dash .dash-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.recent-dash .dash-item {
    position: relative;
    box-sizing: border-box;
    flex: none;
    width: 50%;
    height: 65px;
    margin-top: 8px;
}

    .recent-dash .dash-item:nth-child(odd) {
        padding-left: 4px;
    }

    .recent-dash .dash-item:nth-child(even) {
        padding-right: 4px;
    }

    .recent-dash .dash-item:first-child {
        width: 100%;
        height: 55px;
        margin-top: 0;
        padding-left: 0;
    }

.recent-dash .box-mywhite {
    height: 100%;
    padding: 12px;
}

.recent-dash .dash-tit {
    font-family: 'noto_r';
    font-size: 15px;
    line-height: 1.33;
    color: #171717;
}

.recent-dash .dash-num {
    font-family: 'noto_l';
    font-size: 15px;
    line-height: 1.33;
    color: #005eb8;
    float: right;
}

.recent-dash .dash-item:first-child .dash-tit {
    margin-top: 7px;
}

.recent-dash .dash-item:not(:first-child) .dash-num {
    margin-top: 10px;
    padding-left: 10px;
}

.recent-dash .dash-num em {
    font-family: 'noto_r';
    font-size: 30px;
    line-height: 1;
    font-style: normal;
    margin-right: 3px;
}

/* 퀵메뉴 */
.my-main .list-quicklink {
    display: flex;
    flex-wrap: wrap;
}

    .my-main .list-quicklink li {
        flex: none;
        width: 50%;
        margin: 8px 0 0 0;
    }

        .my-main .list-quicklink li:nth-child(1),
        .my-main .list-quicklink li:nth-child(2) {
            margin-top: 0;
        }

        .my-main .list-quicklink li:nth-child(even) {
            padding-left: 4px;
        }

        .my-main .list-quicklink li:nth-child(odd) {
            padding-right: 4px;
        }

.my-main .my-quicklink .list-quicklink li a {
    text-align: left;
    position: relative;
    padding: 20px 12px;
    background-image: none;
}

    .my-main .my-quicklink .list-quicklink li a:after {
        content: '';
        position: absolute;
        right: 10px;
        top: 21px;
        display: inline-block;
        width: 6px;
        height: 20px;
        background: url(/common/img/page/my/icon-my.png) -270px top;
        background-size: 300px;
    }

.my-main .list-quicklink li .txt {
    font-family: 'noto_m';
    font-size: 15px;
    line-height: 20px;
    color: #777;
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

/* 탭 영역 */
.my-tab {
    margin-top: 20px !important;
}

    .my-tab .tab-content {
        padding: 10px 20px;
        background-color: #fff;
        border-bottom: 1px solid #e8e8e8;
    }

    .my-tab .wrap-header {
        position: relative;
        margin-top: 15px;
    }

        .my-tab .wrap-header .txt-title {
            display: block;
            font-family: 'noto_m';
            font-size: 15px;
            line-height: 18px;
            color: #333;
        }

            .my-tab .wrap-header .txt-title em {
                font-style: normal;
                font-family: 'noto_d';
                color: #767676
            }

        .my-tab .wrap-header .more {
            padding: 7px 25px;
            position: absolute;
            right: 0;
            top: -7px;
            z-index: 2
        }

    .my-tab .tab-board-list {
        margin: 10px 0 0 0;
        padding: 0;
    }

    .my-tab .tab-board-item {
        border-bottom: 1px solid #e8e8e8;
    }

        .my-tab .tab-board-item:last-child {
            border-bottom-width: 0;
        }

    .my-tab .tab-board-anchor {
        display: block;
        padding: 15px 0;
    }

    .my-tab .tab-board .item-tit {
        font-family: 'noto_m';
        font-size: 13px;
        line-height: 1.33;
        color: #333;
        margin-bottom: 6px;
    }

    .my-tab .tab-board .detail-info-list {
        margin: 0;
        padding: 0;
    }

    .my-tab .tab-board .detail-info-item {
        font-size: 12px;
        line-height: 1.33;
        color: #767676;
        position: relative;
        display: inline-block;
        margin-left: 8px;
        padding-left: 10px;
    }

        .my-tab .tab-board .detail-info-item:before {
            content: '';
            position: absolute;
            left: 0;
            top: 2px;
            bottom: 2px;
            width: 1px;
            background-color: #d9d9d9;
        }

        .my-tab .tab-board .detail-info-item:first-child {
            padding-left: 0;
            margin-left: 0;
        }

            .my-tab .tab-board .detail-info-item:first-child:before {
                display: none;
            }

        .my-tab .tab-board .detail-info-item em {
            font-size: 19px;
            line-height: 1.33;
            color: #555;
            font-style: normal;
            display: inline-block;
            margin-top: -3px;
        }

        .my-tab .tab-board .detail-info-item.answer {
            font-family: 'noto_m';
            color: #555;
        }

    .my-tab .tab-board-item.no-result {
        font-size: 13px;
        line-height: 1.33;
        color: #767676;
        text-align: center;
        padding: 30px 0
    }

        .my-tab .tab-board-item.no-result .wrap-bt {
            margin-top: 15px
        }

            .my-tab .tab-board-item.no-result .wrap-bt a {
                display: inline-block
            }

    .my-tab .board-alarm .alarm-date-item.fixed {
        margin-left: -20px;
        margin-right: -20px;
    }

        .my-tab .board-alarm .alarm-date-item.fixed:first-child {
            margin-top: 20px;
            border-top: 1px solid #e5e5e5;
        }

/*2019.01.02 신규 추가*/
.tab-show {
    display: block;
}

.tab-hide {
    display: none;
}

.tab-board-item ul > li:last-child {
    border-bottom: 0px;
}

/* 아이콘 */
.icon-my {
    display: inline-block;
    background: url(/common/img/page/my/icon-my.png) no-repeat;
    vertical-align: middle;
    background-size: 300px;
}

.icon-my-q1 {
    width: 22px;
    height: 20px;
    background-position: left top;
}

.icon-my-q2 {
    width: 22px;
    height: 20px;
    background-position: -30px top;
}

.icon-my-q3 {
    width: 22px;
    height: 20px;
    background-position: -60px top;
}

.icon-my-q4 {
    width: 22px;
    height: 20px;
    background-position: -90px top;
}

.icon-my-q5 {
    width: 22px;
    height: 20px;
    background-position: -120px top;
}

.icon-my-q6 {
    width: 22px;
    height: 20px;
    background-position: -150px top;
}

.icon-my-q7 {
    width: 22px;
    height: 20px;
    background-position: -180px top;
}

.icon-my-q8 {
    width: 22px;
    height: 20px;
    background-position: -210px top;
}


/*
 * 마이컴패션 - 나의어린이 - 리스트 
 *------------------------------------------*/
/* 나의어린이 */
.my-mychild .search-mychild {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 0 !important;
}

    .my-mychild .search-mychild .action {
        border-radius: 2px;
    }

/* 마이컴패션-나의어린이-리스트, 후원어린이없음 */
.my-mychild .wrap-caption,
.my-mychild .recommandchild .wrap-caption {
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
    min-height: auto;
    text-align: inherit;
    background-color: transparent;
}

    .my-mychild .wrap-caption .left-area,
    .my-mychild .wrap-caption .right-area {
        display: table-cell;
        vertical-align: middle;
    }

    .my-mychild .wrap-caption .right-area {
        text-align: right;
    }

.my-mychild .mychild-anchor {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 20px 0;
}

    .my-mychild .mychild-anchor .pos-photo {
        position: relative;
        left: auto;
        top: auto;
        display: table-cell;
        width: 105px;
        vertical-align: top;
    }

    .my-mychild .mychild-anchor .mychild-info {
        display: table-cell;
        vertical-align: middle;
    }

.my-mychild .mychild-info .txt-name {
    color: #171717;
    padding: 0;
    margin-bottom: 5px;
}

.my-mychild .mychild-info .txt-note {
    color: #333;
    padding-left: 0;
}

.list-mychild .wrap-bt > a {
    width: 32%;
}

    .list-mychild .wrap-bt > a:nth-child(1) {
        float: left;
    }

    .list-mychild .wrap-bt > a:nth-child(3) {
        float: right;
    }

.my-mychild .btn-mychild-action {
    display: inline-block;
    width: 32%;
    padding: 12px 5px;
    background-color: #F1F2F4;
    border-radius: 2px;
}

.view-mychild .btn-mychild-action {
    border-radius: 6px;
}

.my-mychild .btn-mychild-action .txt {
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 1.33;
    color: #444;
    text-align: center;
    display: block;
}

.my-mychild .btn-mychild-action.letter {
    float: left;
    background-color: #ffdd33;
}

.my-mychild .btn-mychild-action.album {
    float: right;
}

.my-mychild .btn-mychild-action .icon {
    display: block;
    height: 32px;
    margin-bottom: 5px;
    background: no-repeat center center;
    background-size: 32px;
}

.my-mychild .btn-mychild-action.letter .icon {
    background-image: url(/common/img/page/my/mychild-letter.png);
}

.my-mychild .btn-mychild-action.gift .icon {
    background-image: url(/common/img/page/my/mychild-gift.png);
}

.my-mychild .btn-mychild-action.album .icon {
    background-image: url(/common/img/page/my/mychild-diary.png);
}


/*
 * 마이컴패션 - 나의어린이 - 상세
 *------------------------------------------*/
.my-mychild .wrap-tab1 {
    margin: 20px -10px 10px;
}

.my-mychild .view-mychild .pos-photo .photo {
    width: 120px;
    height: 120px;
}

.my-mychild .view-mychild .txt-name {
    font-family: 'noto_b';
    font-size: 19px;
    line-height: 1.33;
    color: #262626;
}

    .my-mychild .view-mychild .txt-name em {
        font-family: 'noto_d';
        font-size: 19px;
        line-height: 1.33;
        font-style: normal;
        display: inline;
        margin-left: 5px;
    }

.my-mychild .view-mychild .description {
    margin-top: 0;
}

.box-ProjectInfo .box-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-bottom: 30px;
}

.box-ProjectInfo .box_type7,
.box-ProjectInfo .box_type8 {
    flex: 1;
    float: none;
    vertical-align: top;
    margin-top: 5px;
}

.box-ProjectInfo .box_type7 {
    padding-right: 5px;
}

.box-ProjectInfo .box_type8 {
    padding-left: 5px;
}

.box-ProjectInfo .box_type9 {
    min-height: auto;
}

/* 알림탭 */
.my-mychild .alarm-date-item:not(.fixed):first-child {
    padding-top: 0;
}

.board-alarm .tac {
    padding-top: 20px;
    text-align: center;
}

    .board-alarm .tac .bt-type10 {
        font-size: 13px;
        padding-right: 8px;
        padding-left: 8px;
    }

.wrap-sectionsub-my .child-alarm {
    padding-top: 15px;
    padding-bottom: 15px;
}


/*
 * 마이컴패션 - 나의어린이 - 앨범
 *------------------------------------------*/
.wrap-layerpop .header {
    background: #005eb8;
    padding: 16px 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.wrap-layerpop .contents {
    padding: 20px 16px 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.wrap-layerpop .close {
    right: 15px;
    top: 15px;
}

.wrap-layerpop .ic-close {
    width: 20px;
    height: 20px;
    background: url('/common/img/bu/close.png') no-repeat;
    background-size: contain;
}

.wrap-layerpop.child-album .wrap-bt {
    background-color: #F3F3F3;
    padding: 20px 20px;
    margin: 20px -16px 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
}

.wrap-layerpop.child-album .album-number {
    position: absolute;
    right: 20px;
    padding-top: 6px;
}

    .wrap-layerpop.child-album .album-number em {
        color: #005eb8;
        font-family: 'noto_m';
        font-style: normal;
    }


/*
 * 마이컴패션 - 선물내역
 *------------------------------------------*/
.tab-content .giftmoney {
    margin-top: 10px;
    margin-bottom: 30px;
}

    .tab-content .giftmoney .page-count-indicator {
        margin-top: 10px;
    }


/*
 * 마이컴패션 - 편지 - 리스트
 *------------------------------------------*/
.wrap-sectionsub-my .unread-letter {
    display: block;
    background-color: #f7f7f7;
    font-family: 'noto_r';
    font-size: 13px;
    line-height: 19px;
    color: #666;
    word-spacing: -1px;
    text-align: center;
    padding: 15px 0
}

    .wrap-sectionsub-my .unread-letter a {
        display: inline-block;
        color: #666;
        background: url('/common/img/bu/arrow-right.png') no-repeat right 5px;
        background-size: 6px auto;
        padding-right: 15px;
    }

        .wrap-sectionsub-my .unread-letter a .icon {
            display: inline-block;
            width: 23px;
            height: 23px;
            background: url('/common/img/icon/letter.png') no-repeat;
            background-size: 23px 19px;
            vertical-align: middle;
            margin-right: 5px;
        }

    .wrap-sectionsub-my .unread-letter em {
        font-style: normal;
        font-size: 15px;
        line-height: 19px;
        color: #005eb8
    }


/* 편지함 */
.wrap-sectionsub-my .howto-letter .txt-link {
    display: inline-block;
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 19px;
    color: #666;
    padding-right: 14px;
    cursor: pointer;
    float: right;
    position: relative;
}

    .wrap-sectionsub-my .howto-letter .txt-link .bu {
        display: block;
        background: url('/common/img/bu/arrow-down.png') no-repeat;
        background-size: contain;
        width: 9px;
        height: 6px;
        position: absolute;
        right: 0;
        top: 7px;
        z-index: 2;
    }

.wrap-sectionsub-my .howto-letter .open .bu {
    background: url('/common/img/bu/arrow-down.png') right center no-repeat;
    background-size: 9px 6px;
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.wrap-sectionsub-my .howto-letter .box-howto {
    display: none;
    border: 1px solid #d9d9d9;
    background-color: #f7f7f7;
    padding: 0 0 10px 0;
    margin-top: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

    .wrap-sectionsub-my .howto-letter .box-howto a {
        display: block;
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 19px;
        color: #333;
        padding: 14px 15px 14px 15px;
        position: relative;
    }

        .wrap-sectionsub-my .howto-letter .box-howto a > .bu {
            display: block;
            background: url('/common/img/bu/arrow-right.png') no-repeat;
            background-size: contain;
            width: 8px;
            height: 15px;
            position: absolute;
            right: 15px;
            top: 16px;
        }

    .wrap-sectionsub-my .howto-letter .box-howto .wrap-bt {
        border-top: 1px solid #d9d9d9;
        padding: 10px 15px 0 15px;
        margin-top: 0;
    }

    .wrap-sectionsub-my .howto-letter .box-howto .bt-type6 {
        color: #fff;
    }

.wrap-sectionsub-my .list-letter {
    margin-top: 15px;
    padding-bottom: 30px;
}

    .wrap-sectionsub-my .list-letter > li {
        border: 1px solid #d9d9d9;
        background-color: #fff;
        margin-top: 15px;
        padding: 15px 15px 15px 15px;
        position: relative;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
    }

        .wrap-sectionsub-my .list-letter > li:first-child {
            margin-top: 0
        }

        .wrap-sectionsub-my .list-letter > li .txt-name {
            display: inline-block;
            font-family: 'noto_m';
            font-size: 15px;
            line-height: 19px;
            color: #333;
            padding: 8px 4px 0 100px;
            word-spacing: -1px;
            vertical-align: top;
        }

        .wrap-sectionsub-my .list-letter > li .label-child {
            vertical-align: top;
            margin-top: 4px;
        }

        .wrap-sectionsub-my .list-letter > li .txt-letter {
            display: block;
            font-family: 'noto_r';
            font-size: 13px;
            line-height: 19px;
            color: #666;
            padding: 15px 0 0 100px;
            word-spacing: -1px;
        }

            .wrap-sectionsub-my .list-letter > li .txt-letter > em {
                display: inline-block;
                font-style: normal;
                font-family: 'noto_m';
                font-size: 17px;
                color: #005eb8;
                margin-left: 2px;
            }

        .wrap-sectionsub-my .list-letter > li .photo {
            position: absolute;
            left: 15px;
            top: 15px;
        }

            .wrap-sectionsub-my .list-letter > li .photo .thumb {
                display: block;
                width: 84px;
                height: 84px;
                background-position: center top !important;
                background-size: cover !important;
                border-radius: 42px;
                -webkit-border-radius: 42px;
                -moz-border-radius: 42px;
            }

        .wrap-sectionsub-my .list-letter > li .ic-new {
            display: block;
            width: 22px;
            height: 22px;
            position: absolute;
            left: 60px;
            top: 60px;
            z-index: 5;
        }

        .wrap-sectionsub-my .list-letter > li .wrap-bt {
            display: block;
            margin-top: 15px;
        }

        .wrap-sectionsub-my .list-letter > li .row {
            display: block;
            min-height: 84px;
        }


/*
 * 마이컴패션 - 편지함
 *------------------------------------------*/
.wrap-sectionsub-my .more-page {
    display: block;
    background-color: #e8e8e8;
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 19px;
    color: #767676;
    word-spacing: -1px;
    text-align: center;
    padding: 12px 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px
}

    .wrap-sectionsub-my .more-page em {
        display: inline-block;
        font-style: normal;
        color: #005eb8;
        margin-left: 6px
    }

/* 공통 */
.wrap-sectionsub-my .in-letterbox .box,
.wrap-sectionsub-my .out-letterbox {
    display: block;
    border: 1px solid #d9d9d9;
    position: relative;
    padding: 18px 14px;
    border-radius: 4px;
}

/* 받은편지 */
.wrap-sectionsub-my .in-letterbox {
    display: block;
    position: relative;
    padding: 0 0 0 105px;
    margin-top: 20px
}

    .wrap-sectionsub-my .in-letterbox .photo {
        display: block;
        width: 84px;
        height: 84px;
        background-size: cover !important;
        background-position: center top !important;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 42px;
        -webkit-border-radius: 42px;
        -moz-border-radius: 42px
    }

    .wrap-sectionsub-my .in-letterbox .box {
    }

        .wrap-sectionsub-my .in-letterbox .box .txt {
            display: block;
            font-family: 'noto_m';
            font-size: 13px;
            line-height: 19px;
            color: #333;
            letter-spacing: -1px
        }

        .wrap-sectionsub-my .in-letterbox .box .link {
            display: inline-block;
            font-family: 'noto_r';
            font-size: 13px;
            line-height: 19px;
            color: #767676;
            letter-spacing: -1px;
            background: url('/common/img/bu/arrow-right2.png') right 5px no-repeat;
            background-size: 5px 8px;
            padding-right: 12px;
            margin-top: 3px
        }

        .wrap-sectionsub-my .in-letterbox .box .edge {
            display: block;
            width: 11px;
            height: 14px;
            background: url('/common/img/app/edge-arrow.png') no-repeat;
            background-size: contain;
            position: absolute;
            left: -10px;
            top: 42%;
            z-index: 2
        }

    .wrap-sectionsub-my .in-letterbox .ic-new {
        display: block;
        width: 22px;
        height: 22px;
        position: absolute;
        left: 60px;
        top: 60px;
        z-index: 5
    }

/* 보낸편지 */
.wrap-sectionsub-my .out-letterbox {
    padding-bottom: 0;
    margin: 20px 11px 0 0;
}

    .wrap-sectionsub-my .out-letterbox .row {
        display: block;
        background-color: #f4f4f4;
        border-top: 1px solid #d9d9d9;
        padding: 10px 14px;
        margin: 18px -14px 0 -14px;
        *zoom: 1
    }

        .wrap-sectionsub-my .out-letterbox .row:after {
            content: ".";
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
            font-size: 0;
            line-height: 0
        }

    .wrap-sectionsub-my .out-letterbox .txt {
        display: block;
        font-family: 'noto_m';
        font-size: 13px;
        line-height: 19px;
        color: #333;
        letter-spacing: -1px
    }

    .wrap-sectionsub-my .out-letterbox .link {
        display: inline-block;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 19px;
        color: #767676;
        letter-spacing: -1px;
        background: url('/common/img/bu/arrow-right2.png') right 5px no-repeat;
        background-size: 5px 8px;
        padding-right: 12px;
        margin-top: 3px
    }

    .wrap-sectionsub-my .out-letterbox .type-chk1 {
        display: inline-block;
        font-family: 'noto_m';
        font-size: 12px;
        line-height: 16px;
        color: #fff;
        letter-spacing: -1px;
        background-color: #949494;
        padding: 6px 0;
        text-align: center
    }

    .wrap-sectionsub-my .out-letterbox .type-chk2 {
        display: inline-block;
        font-family: 'noto_m';
        font-size: 12px;
        line-height: 16px;
        color: #fff;
        letter-spacing: -1px;
        background-color: #00a3c6;
        padding: 6px 0;
        text-align: center
    }

    .wrap-sectionsub-my .out-letterbox .modify {
        display: inline-block;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 19px;
        color: #767676;
        letter-spacing: -1px;
        background: url('/common/img/icon/modify.png') 0 center no-repeat;
        background-size: 13px 12px;
        padding-left: 16px;
        margin: 4px 0 0 0
    }

    .wrap-sectionsub-my .out-letterbox .cancel {
        display: inline-block;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 19px;
        color: #767676;
        letter-spacing: -1px;
        background: url('/common/img/bu/close3.png') 0 center no-repeat;
        background-size: 9px 10px;
        padding-left: 12px;
        margin: 4px 0 0 12px
    }

    .wrap-sectionsub-my .out-letterbox .edge {
        display: block;
        width: 11px;
        height: 14px;
        background: url('/common/img/app/edge-arrow.png') no-repeat;
        background-size: contain;
        position: absolute;
        right: -10px;
        top: 22%;
        z-index: 2;
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.wrap-sectionsub-my .no-letterbox {
    display: block;
    background: url('/common/img/icon/letter4.png') center top no-repeat;
    background-size: 38px 28px;
    font-size: 13px;
    line-height: 19px;
    color: #767676;
    text-align: center;
    padding-top: 50px
}


/*
 * 마이컴패션 - 편지 - 상세
 *------------------------------------------*/
.wrap-sectionsub-my .wrap-postbox {
    position: relative
}

    .wrap-sectionsub-my .wrap-postbox .prev-post {
        display: block;
        width: 40px;
        height: 83px;
        background: url('/common/img/app/page-nav.png') center top no-repeat;
        background-size: contain;
        font-size: 0;
        ine-height: 0;
        text-indent: -9999px;
        position: fixed;
        left: 0;
        top: 40%;
        z-index: 5;
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .wrap-sectionsub-my .wrap-postbox .next-post {
        display: block;
        width: 40px;
        height: 83px;
        background: url('/common/img/app/page-nav.png') center top no-repeat;
        background-size: contain;
        font-size: 0;
        ine-height: 0;
        text-indent: -9999px;
        position: fixed;
        right: 0;
        top: 40%;
        z-index: 5;
    }


/*
 * 마이컴패션 - 편지쓰기 - 발송완료
 *------------------------------------------*/
.wrap-sectionsub-my .letterwrite-example {
    margin-top: 20px
}

    .wrap-sectionsub-my .letterwrite-example .txt-caption {
        display: block;
        font-family: 'noto_m';
        font-size: 17px;
        line-height: 19px;
        color: #333;
        text-align: center;
        margin-bottom: 15px
    }

    .wrap-sectionsub-my .letterwrite-example .tab-lang {
        display: table;
        position: absolute;
        right: 0;
        top: 9px;
        z-index: 2
    }

        .wrap-sectionsub-my .letterwrite-example .tab-lang > a {
            display: table-cell;
            width: 50px;
            font-size: 13px;
            line-height: 27px;
            color: #444;
            height: 28px;
            text-align: center;
            background-color: #f5f5f5
        }

            .wrap-sectionsub-my .letterwrite-example .tab-lang > a.selected {
                color: #fff;
                background-color: #444
            }

            .wrap-sectionsub-my .letterwrite-example .tab-lang > a:nth-of-type(1) {
                border-radius: 2px 0 0 2px;
                -webkit-border-radius: 2px 0 0 2px;
                -moz-border-radius: 2px 0 0 2px
            }

            .wrap-sectionsub-my .letterwrite-example .tab-lang > a:nth-of-type(2) {
                border-radius: 0 2px 2px 0;
                -webkit-border-radius: 0 2px 2px 0;
                -moz-border-radius: 0 2px 2px 0
            }

    .wrap-sectionsub-my .letterwrite-example .list-example {
        border-top: 1px solid #d9d9d9;
        width: 100%
    }

        .wrap-sectionsub-my .letterwrite-example .list-example > li {
            position: relative;
            border-bottom: 1px solid #d9d9d9;
            padding: 12px 100px 12px 0;
            font-family: 'noto_r';
            font-size: 15px;
            line-height: 22px;
            color: #333;
            word-spacing: -1px
        }

        .wrap-sectionsub-my .letterwrite-example .list-example .ic-new {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 0 0 4px
        }

        .wrap-sectionsub-my .letterwrite-example .list-example .ic-txt {
            display: inline-block;
            font-family: 'noto_m';
            font-size: 12px;
            line-height: 27px;
            color: #fff;
            text-align: center;
            background-color: #00a3c6;
            width: 38px;
            height: 28px;
            margin: -5px 0 -5px 5px;
            vertical-align: middle
        }

        .wrap-sectionsub-my .letterwrite-example .list-example .ex-layer {
            display: none;
            font-size: 13px;
            line-height: 19px;
            color: #666;
            padding: 18px 12px;
            margin: 10px -100px -12px 0;
            border-top: 1px solid #d9d9d9;
            background-color: #f7f7f7;
            overflow-y: auto
        }

.wrap-sectionsub-my .letterwrite-sendok {
    display: block;
    font-size: 13px;
    line-height: 19px;
    color: #767676;
    text-align: center;
    margin-top: 40px;
    word-spacing: -1px
}

    .wrap-sectionsub-my .letterwrite-sendok .pic {
        display: inline-block;
        width: 213px;
        height: 213px;
        background-size: cover !important;
        margin-bottom: 30px;
        border-radius: 110px;
    }

    .wrap-sectionsub-my .letterwrite-sendok strong {
        display: block;
        font-size: 17px;
        line-height: 21px;
        color: #121212;
        margin-bottom: 20px
    }


/*
 * 마이컴패션 - 편지쓰기 - 발송준비중
 *------------------------------------------*/
.wrap-sectionsub-my .result-count {
    display: block;
    font-family: 'noto_r';
    font-size: 15px;
    line-height: 19px;
    color: #666;
    margin-bottom: 10px
}

    .wrap-sectionsub-my .result-count > em {
        font-style: normal;
        color: #005eb8
    }

.wrap-sectionsub-my .list-tempsave > li {
    border: 1px solid #d9d9d9;
    margin-top: 15px;
    padding: 18px 14px 0 14px;
    font-size: 13px;
    line-height: 19px;
    color: #666;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px
}

    .wrap-sectionsub-my .list-tempsave > li:first-child {
        margin-top: 0
    }

    .wrap-sectionsub-my .list-tempsave > li .row {
        display: block;
        background-color: #f4f4f4;
        border-top: 1px solid #d9d9d9;
        padding: 10px 14px;
        margin: 18px -14px 0 -14px;
        *zoom: 1
    }

        .wrap-sectionsub-my .list-tempsave > li .row:after {
            content: "";
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
            font-size: 0;
            line-height: 0
        }

    .wrap-sectionsub-my .list-tempsave > li .txt-name {
        display: block;
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 19px;
        color: #333;
        margin-bottom: 10px
    }

    .wrap-sectionsub-my .list-tempsave > li .modify {
        display: inline-block;
        background: url('/common/img/icon/modify.png') 0 0 no-repeat;
        background-size: 13px 12px;
        padding-left: 15px;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 15px;
        color: #767676;
        cursor: pointer
    }

    .wrap-sectionsub-my .list-tempsave > li .delete {
        display: inline-block;
        background: url('/common/img/icon/delete.png') 0 0 no-repeat;
        background-size: 11px 12px;
        padding-left: 13px;
        margin-left: 10px;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 15px;
        color: #767676;
        cursor: pointer
    }

    .wrap-sectionsub-my .list-tempsave > li .cancel {
        display: inline-block;
        background: url('/common/img/bu/close3.png') 0 2px no-repeat;
        background-size: 9px 10px;
        padding-left: 13px;
        margin-left: 10px;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 15px;
        color: #767676;
        cursor: pointer
    }

    .wrap-sectionsub-my .list-tempsave > li.no-result {
        text-align: center;
        padding: 60px 0;
    }


/*
 * 마이컴패션 - 편지쓰기 - 어린이선택
 *------------------------------------------*/
.wrap-sectionsub-my .top-childselect {
    display: block;
    background: url('/common/img/app/bg-img1.jpg') center top no-repeat;
    background-size: cover;
    height: 126px;
    overflow: hidden;
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 19px;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    letter-spacing: -1px
}

.wrap-sectionsub-my .top-sendready {
    display: block;
    background: url('/common/img/app/bg-img2.jpg') center top no-repeat;
    background-size: cover;
    height: 82px;
    overflow: hidden;
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 19px;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    letter-spacing: -1px
}

.wrap-sectionsub-my .list-checkboxchild > li {
    display: table;
    border: 1px solid #d9d9d9;
    margin-top: 15px;
    width: 100%;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px
}

    .wrap-sectionsub-my .list-checkboxchild > li .field-th {
        display: table-cell;
        background-color: #f4f4f4;
        text-align: center;
        vertical-align: middle;
        padding: 15px 0;
        width: 30%
    }

    .wrap-sectionsub-my .list-checkboxchild > li .field-td {
        display: table-cell;
        padding: 15px 15px
    }

    .wrap-sectionsub-my .list-checkboxchild > li .txt-name {
        display: block;
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 19px;
        color: #333;
        margin-bottom: 10px
    }

    .wrap-sectionsub-my .list-checkboxchild > li .txt-info {
        display: block;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 19px;
        color: #555
    }

        .wrap-sectionsub-my .list-checkboxchild > li .txt-info em {
            font-style: normal;
            font-family: 'noto_d';
            color: #767676
        }

        .wrap-sectionsub-my .list-checkboxchild > li .txt-info .color1 {
            color: #767676
        }


/*
 * 마이컴패션 - 편지쓰기(1:1)
 *------------------------------------------*/
/* 편지함 (그룹 ,1:1 공통) */
.wrap-sectionsub-my .member-join {
    margin: 0;
}

.wrap-sectionsub-my .link-child {
    display: inline-block;
    font-family: 'noto_r';
    font-size: 13px;
    line-height: 19px;
    color: #767676;
    letter-spacing: -1px;
    background: url('/common/img/bu/arrow-right2.png') right 5px no-repeat;
    background-size: 5px 8px;
    padding-right: 12px;
    margin-top: 3px;
}

.wrap-sectionsub-my .txt-title {
    margin-top: 20px;
    color: #333;
    *zoom: 1;
}

    .wrap-sectionsub-my .txt-title:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
    }

    .wrap-sectionsub-my .txt-title .txt-commt {
        display: inline-block;
        font-family: 'noto_r';
        font-size: 12px;
        line-height: 19px;
        color: #767676;
        margin-left: 10px;
    }

    .wrap-sectionsub-my .txt-title .action {
        float: right;
        width: 25px;
        height: 26px;
        margin-top: -3px;
    }

.wrap-sectionsub-my .txt-stitle {
    font-family: 'noto_m';
    font-size: 15px;
    line-height: 19px;
    color: #333;
    *zoom: 1;
}

    .wrap-sectionsub-my .txt-stitle:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
    }

    .wrap-sectionsub-my .txt-stitle .action {
        float: right;
        width: 25px;
        height: 26px;
        margin-top: -4px;
    }

.wrap-sectionsub-my .linebar {
    margin: 20px 0;
}

.wrap-sectionsub-my .reg-letterimg {
    display: block;
    background-color: #fbfbfb;
    text-align: center;
}

    .wrap-sectionsub-my .reg-letterimg .txt-noimg {
        display: block;
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 19px;
        color: #767676;
        background: url('/common/img/common/img-photo.gif') center 40px no-repeat;
        background-size: 30px 30px;
        padding: 80px 0 40px 0;
    }

.wrap-sectionsub-my .frm-row {
    display: block;
    position: relative;
    margin-top: 10px;
}

    .wrap-sectionsub-my .frm-row.box {
        display: block;
        border: 1px solid #d8d8d8;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
    }

        .wrap-sectionsub-my .frm-row.box textarea {
            border: 0;
        }

.wrap-sectionsub-my .txt-byte {
    font-size: 13px;
    line-height: 17px;
    color: #767676;
    text-align: right;
    padding: 4px 10px 6px 0;
}

    .wrap-sectionsub-my .txt-byte > em {
        font-style: normal;
        font-family: 'noto_m';
        color: #005eb8;
    }

.wrap-sectionsub-my .list-lettertype {
    *zoom: 1;
}

    .wrap-sectionsub-my .list-lettertype:after {
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
        font-size: 0;
        line-height: 0;
    }

    .wrap-sectionsub-my .list-lettertype > li {
        float: left;
        font-size: 13px;
        word-spacing: -1px;
        padding-bottom: 8px;
        height: 30px;
    }

        .wrap-sectionsub-my .list-lettertype > li:nth-child(1) {
            width: 36%;
        }

        .wrap-sectionsub-my .list-lettertype > li:nth-child(2) {
            width: 36%;
        }

        .wrap-sectionsub-my .list-lettertype > li:nth-child(3) {
            width: 28%;
        }

        .wrap-sectionsub-my .list-lettertype > li:nth-child(4) {
            width: 36%;
        }

        .wrap-sectionsub-my .list-lettertype > li:nth-child(5) {
            width: 64%;
        }

.wrap-sectionsub-my .link-letter-example {
    display: block;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    padding: 14px 30px 15px 0;
    margin: 20px 0;
    background: url('/common/img/bu/arrow-right3.png') right 15px no-repeat;
    background-size: 8px 15px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.wrap-sectionsub-my .app-sel-child {
    border: 1px solid #d8d8d8;
    font-size: 13px;
    line-height: 31px;
    color: #555;
    background: url('/common/img/bu/arrow-down2.png') right center no-repeat #fff;
    background-size: 22px 5px;
    height: 32px;
    padding: 0 32px 0 15px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px
}

/* 편지함 (그룹) */
.wrap-sectionsub-my .member-join .letter-notice-list {
    padding: 20px 10px 20px 18px;
    background-color: #F7F7F7;
}

.wrap-sectionsub-my .member-join .letter-notice-item {
    word-break: keep-all;
    color: #333333;
    font-family: 'noto_d';
    padding: 2px;
}

    .wrap-sectionsub-my .member-join .letter-notice-item::before {
        content: '•';
        margin-left: -11px;
    }

.wrap-sectionsub-my .member-join .letter-subject {
    padding-top: 10px;
    border-top: 1px solid #e8e8e8;
}

.wrap-sectionsub-my .member-join .subject-tit {
    font-family: 'noto_m';
    font-size: 13px;
    padding-bottom: 4px;
}

.wrap-sectionsub-my .member-join .subject-list {
    padding-left: 11px;
}

.wrap-sectionsub-my .member-join .subject-item {
    word-break: keep-all;
}

    .wrap-sectionsub-my .member-join .subject-item:before {
        content: '•';
        margin-left: -11px;
    }

/*
 * 마이컴패션 - 편지 - 스마트레터신청
 *------------------------------------------*/
/* 공지 */
.wrap-sectionsub-my .smart-notice {
    background-color: #E8E8E8;
    padding: 20px 10px;
}

.wrap-sectionsub-my .smart-notice-txt {
    font-size: 15px;
    color: #333;
    word-break: keep-all;
    line-height: 1.7;
}

    .wrap-sectionsub-my .smart-notice-txt em {
        color: #DF4523;
        font-style: normal;
    }

/* 카드 서비스 종류 */
.wrap-sectionsub-my .card-service {
    margin-top: 36px;
    margin-bottom: 50px;
}

.wrap-sectionsub-my .card-service-item {
    padding: 12px 20px 18px;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
}

    .wrap-sectionsub-my .card-service-item .service-tit {
        font-size: 17px;
        font-family: 'noto_m';
        color: #333333;
        padding-bottom: 10px;
    }

    .wrap-sectionsub-my .card-service-item .service-info {
        font-size: 15px;
        color: #333333;
    }

.wrap-sectionsub-my .card-service .service-info {
    margin-right: -10px;
}

.wrap-sectionsub-my .card-service .css-label {
    word-break: keep-all;
}

/* 더 알고 싶어요! */
.wrap-sectionsub-my .more-info {
    padding-bottom: 50px;
}

    .wrap-sectionsub-my .more-info .more-info-tit {
        font-size: 17px;
        color: #005eb8;
        font-family: 'noto_m';
        padding-bottom: 10px;
    }

    .wrap-sectionsub-my .more-info .info-list {
        padding-left: 8px;
    }

    .wrap-sectionsub-my .more-info .info-item {
        font-size: 14px;
        color: #333333;
        word-break: keep-all;
        padding-bottom: 4px;
    }

        .wrap-sectionsub-my .more-info .info-item::before {
            content: '•';
            margin-left: -11px;
        }


/*
 * 마이컴패션 - 편지 - 편지유형선택
 *------------------------------------------*/
/* title */
.letter-category-wrap .txt-title {
    background: url(/common/img/icon/yellowchk.png) 0 center no-repeat;
    background-size: 14px;
    font-family: 'noto_m';
    font-weight: normal;
    font-size: 15px;
    color: #555;
    margin: 30px 0 14px 0;
    padding-left: 20px;
}

/* 편지유형 선택 박스 */
.letter-category-wrap {
    margin-bottom: 50px;
}

    .letter-category-wrap .letter-category {
        margin-bottom: 24px;
    }

    .letter-category-wrap .letter-category-head {
        background-color: #005eb8;
        display: table;
        table-layout: fixed;
        width: 100%;
        padding: 10px 20px;
    }

.letter-category.option .letter-category-head {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.letter-category.single .letter-category-head {
    border-radius: 5px;
}

.letter-category .write-letter-left {
    display: table-cell;
    width: 65px;
    padding-right: 20px;
    vertical-align: middle;
}

.letter-category .ico-write-letter {
    background: url('/common/img/page/letter/letter-category.png') no-repeat;
    background-size: 100px;
    vertical-align: middle;
}

    .letter-category .ico-write-letter.alone {
        width: 45px;
        height: 31px;
        background-position: 0 0;
    }

    .letter-category .ico-write-letter.group {
        width: 45px;
        height: 31px;
        background-position: -50px 0;
    }

.letter-category .write-letter-right {
    display: table-cell;
    vertical-align: top;
}

.letter-category .write-letter-tit {
    color: #fff;
    font-size: 15px;
    font-family: 'noto_m';
}

.letter-category .write-letter-disc {
    font-size: 13px;
    color: #81AED5;
    word-break: keep-all;
}

.letter-category .category-list {
    background: #FBFBFB;
    border-bottom: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
}

.letter-category .category-item {
    border-bottom: 1px solid #E2E2E2;
}

    .letter-category .category-item:last-child {
        border-bottom: none;
    }

    .letter-category .category-item .category-anchor {
        text-align: center;
        padding: 20px 20px;
        display: block;
        font-size: 16px;
        color: #4A4A4A;
    }


/*
 * 마이컴패션 - 알림
 *------------------------------------------*/
.board-alarm .alarm-date-item {
    padding: 18px 0;
    border-bottom: 1px solid #ccc;
}

    .board-alarm .alarm-date-item:last-child {
        border-bottom: none;
    }

    .board-alarm .alarm-date-item .date-area {
        margin-bottom: 12px;
    }

.board-alarm .alarm-item {
    padding: 15px 0;
    border-bottom: 1px dashed #e5e5e5;
}

    .board-alarm .alarm-item:first-child {
        padding-top: 0;
    }

    .board-alarm .alarm-item:last-child {
        padding-bottom: 0;
        border-bottom-width: 0;
    }

    .board-alarm .alarm-item.checked .alarm-title,
    .board-alarm .alarm-item.checked .alarm-desc {
        color: #999;
    }

.board-alarm .label-alarm {
    display: inline-block;
    padding: 3px 12px;
    border: 1px solid #0155A6;
    border-radius: 20px;
}

    .board-alarm .label-alarm .label-txt {
        font-family: 'noto_m';
        font-size: 13px;
        line-height: 1.33;
        color: #0155A6;
    }

.board-alarm .alarm-title {
    font-size: 16px;
    line-height: 1.33;
    color: #0155A6;
    font-family: 'noto_m';
    word-break: keep-all;
}

.board-alarm .alarm-desc {
    font-size: 13px;
    line-height: 18px;
    color: #000;
    word-break: keep-all;
    margin-top: 4px;
}
/* 접혀있는 경우 */
.board-alarm .alarm-item .alarm-desc {
    overflow: hidden;
}

.board-alarm .alarm-more {
    margin-top: 10px;
}

.board-alarm .btn-more {
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 1.33;
    color: #000;
    text-decoration: underline;
}
/* 상단고정(공지사항) */
.board-alarm .alarm-date-item.fixed {
    margin-left: -18px;
    margin-right: -18px;
    padding: 18px;
    background-color: #f9f6f1;
}

    .board-alarm .alarm-date-item.fixed:first-child {
        margin-top: -18px;
    }

    .board-alarm .alarm-date-item.fixed .label-alarm {
        border-color: #df4523;
    }

    .board-alarm .alarm-date-item.fixed .label-txt {
        color: #df4523;
    }

    .board-alarm .alarm-date-item.fixed .alarm-title {
        color: #000;
    }


/*
 * 마이컴패션 - 개인정보 수정
 *------------------------------------------*/
/* 공통 */
.mypersonal-info .input-div {
    margin-top: 28px;
    margin-bottom: 28px;
}

    .mypersonal-info .input-div.line {
        border-bottom: 1px solid #ECECEC;
    }

    .mypersonal-info .input-div td {
        padding-bottom: 8px;
    }

    .mypersonal-info .input-div .field {
        font-size: 14px;
        color: #171717;
        font-family: 'noto_m';
    }

    .mypersonal-info .input-div .data {
        color: #7B7B7B;
        font-size: 13px;
        display: inline-block;
        float: right;
    }

    .mypersonal-info .input-div .login-input {
        margin-top: 16px;
    }

.mypersonal-info input[type="text"] {
    border: none;
    padding: 0px;
    height: auto;
    vertical-align: top;
}

.mypersonal-info td.line {
    border-bottom: 1px solid #ECECEC;
    padding: 12px 0;
}

.mypersonal-info .tbl-join {
    width: 100%;
}

.mypersonal-info .radio-ui {
    margin-right: 0;
}

.mypersonal-info .css-label {
    margin-right: 10px;
}

    .mypersonal-info .css-label:last-child {
        margin-right: 0;
    }

.mypersonal-info .desc-set {
    margin: 10px 0;
}

.mypersonal-info .desc-tit {
    font-family: 'noto_m';
    font-size: 13px;
    line-height: 1.33;
    margin: 0 0 5px 8px
}

.mypersonal-info .desc-item {
    position: relative;
    padding-left: 7px;
    word-break: keep-all;
    margin-bottom: 4px;
}

    .mypersonal-info .desc-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        display: inline-block;
        width: 3px;
        height: 3px;
        background-color: #555;
        border-radius: 50%;
    }


/* id/pw */
.mypersonal-info .icon-my-info1 {
    width: 15px;
    height: 15px;
    background-position: -30px -30px;
    margin-right: 6px;
}

.mypersonal-info .field-txt {
    font-size: 15px;
    color: #555555;
    font-family: 'noto_m';
    vertical-align: middle;
}

.mypersonal-info .input-div .tbl-join td {
    font-size: 13px;
    color: #555555;
    font-family: 'noto_d';
    vertical-align: top;
    padding-bottom: 10px;
}

.mypersonal-info .input-div .change-pw {
    display: block;
    width: 100%;
    height: 34px;
    font-size: 13px;
    color: #555555;
    padding: 7px 0 0 10px;
    background: #fdfdfd url('/common/img/bu/sel-bg1.png') no-repeat right center;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}

    .mypersonal-info .input-div .change-pw.on {
        background: #fdfdfd url('/common/img/bu/sel-bg1-on.png') no-repeat right center;
    }

/* 기본정보 */
.mypersonal-info .row-birthday span:first-child {
    float: left;
    margin-right: 10px;
}

.mypersonal-info .row-birthday span:last-child {
    float: right;
}

.mypersonal-info .input-div .tbl-join .form-disabled {
    display: inline-block;
    width: calc(33.3% - 6px);
    height: 34px;
    font-size: 13px;
    color: #333;
    padding: 7px 10px 0;
    background: #e9e9e9 url('/common/img/bu/sel-bg1.png') no-repeat right center;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    position: relative;
}

.mypersonal-info .input-div .tbl-join .cert {
    width: 100%;
    background: #e9e9e9 url(screen.ui.css);
}

.mypersonal-info input.input-type2 {
    width: 100%;
    height: 34px;
    font-family: 'noto_d';
    font-size: 13px;
    color: #767676;
    padding: 0 10px;
    border: 1px solid #D8D8D8;
    border-radius: 4px;
    vertical-align: middle;
}

.mypersonal-info .tbl-join .tar {
    text-align: right;
}

.mypersonal-info .tbl-join .posL {
    color: #333;
    position: absolute;
    left: 10px;
    top: 2px;
}

.mypersonal-info .tbl-join .posR {
    color: #767676;
    position: absolute;
    right: 10px;
}

.mypersonal-info .tbl-join .icon-my-guide {
    width: 23px;
    height: 23px;
    background-position: left -30px;
    vertical-align: middle;
}

.mypersonal-info .tbl-join .half-td {
    display: inline-block;
    width: calc(50% - 4px);
}

.mypersonal-info .input-type2:disabled {
    background: #f1f1f1;
}

.mypersonal-info .btn-s-type1 {
    display: inline-block;
    width: auto;
    height: 34px;
    font-family: 'noto_d';
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 34px;
    background: #005eb8;
    text-decoration: none;
    vertical-align: middle;
    padding: 0 10px;
    border-width: 0;
    border-radius: 2px;
}

.mypersonal-info .btn-s-type2 {
    display: inline-block;
    width: auto;
    height: 34px;
    font-family: 'noto_d';
    font-size: 13px;
    color: #fff;
    text-align: center;
    line-height: 34px;
    background: #929292;
    text-decoration: none;
    vertical-align: middle;
    padding: 0 10px;
    border-width: 0;
    border-radius: 2px;
}

.mypersonal-info .btn-wrap {
    display: inline-block;
    margin-bottom: 5px;
}

.mypersonal-info .addr-road {
    margin-top: 5px;
}

.mypersonal-info .addr-jibun {
    margin-top: 5px;
}

.mypersonal-info .btn-arr-type1 {
    display: inline-block;
    font-size: 13px;
    color: #121212;
    margin: 5px 0 5px 12px;
    text-decoration: none;
    border-bottom: 1px solid #121212;
}

    .mypersonal-info .btn-arr-type1 span {
        display: inline-block;
        width: 5px;
        height: 10px;
        background: url('/common/img/bu/arr-1.png') no-repeat;
        background-position: 0 0;
        margin-left: 7px;
        vertical-align: middle;
    }

.mypersonal-info .open {
    border: 0;
    text-indent: -9999px;
}

.mypersonal-info .tac {
    text-align: center;
}

.mypersonal-info .bg-box {
    background-color: #fbfbfb;
    padding: 20px 10px;
    border-radius: 4px;
}

    .mypersonal-info .bg-box .btn-withdraw {
        display: inline-block;
        font-size: 13px;
        color: #005eb8;
        margin-left: 10px;
        text-decoration: underline;
    }

/* select - height 34 */
.sel-type2 {
    display: inline-block;
    vertical-align: middle;
}

    .sel-type2 .sbHolder {
        position: relative;
        width: 100%;
        height: 34px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
    }
    /* 기본 레이아웃 */
    .sel-type2 .sbSelector {
        display: block;
        width: 100%;
        height: 34px;
        font-family: 'noto_d';
        font-size: 13px;
        color: #767676;
        text-align: left;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 0;
        padding: 7px 0 0 10px;
    }
        /* 기본 텍스트 스타일 */
        .sel-type2 .sbSelector.on {
            color: #767676;
            font-weight: 600;
        }
    /* 오픈시 select 텍스트 스타일 */
    .sel-type2 .sbToggle {
        display: block;
        width: 100%;
        height: 32px;
        position: absolute;
        left: 0;
        top: 0;
        background: #fdfdfd url('/common/img/bu/sel-bg1.png') no-repeat right center;
        border-radius: 4px;
    }
    /* 닫힌 화살표 */
    .sel-type2 .sbToggleOpen {
        height: 32px;
        background: #fdfdfd url('/common/img/bu/sel-bg1-on.png') no-repeat right center;
    }
    /* 열린 화살표 */
    .sel-type2 .sbOptions {
        width: 100%;
        background: #fff;
        border: solid 1px #d9d9d9;
        position: absolute;
        left: -1px;
        top: 32px !important;
        z-index: 1;
        overflow-y: auto;
        box-sizing: content-box;
        padding: 5px 0;
        border-radius: 4px;
    }
        /* 옵션테두리 */
        .sel-type2 .sbOptions a {
            display: block;
            width: 100%;
            height: auto;
            font-size: 13px;
            color: #666;
            text-align: left;
            border-bottom: 0;
            padding: 6px 0 6px 10px;
        }

            .sel-type2 .sbOptions a:hover {
                color: #767676;
                background: #fff;
                text-decoration: underline;
            }

            .sel-type2 .sbOptions a.selected {
                color: #767676;
                font-weight: normal;
                background: #fff;
            }
        /* 선택된 옵션 표시 */
        .sel-type2 .sbOptions li.last a {
            border-bottom: none;
        }

        .sel-type2 .sbOptions .sbDisabled {
            display: block;
            width: 100%;
            height: auto;
            color: #aaa;
            background: #f1f1f1;
            border-bottom: solid 1px #f2f2f2;
            padding: 6px 0 6px 20px;
        }
    /* 옵션 disabled */
    .sel-type2 .sbHolderDisabled .sbToggle {
        background: #f1f1f1 url('/common/img/bu/sel-bg1.png') no-repeat right center;
    }
/* 기본 disabled */



/*
 * 개인정보수정 - 비밀번호 확인
 *------------------------------------------*/
/* 비밀번호 */
.mypersonal-info .modify-pw {
    text-align: center;
    padding: 40px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid #e8e8e8;
}

    .mypersonal-info .modify-pw .txt {
        font-family: 'noto_r';
        font-size: 18px;
        color: #333;
        margin-bottom: 15px;
        word-break: keep-all;
    }


/*
 * 개인정보수정 - 회원탈퇴
 *------------------------------------------*/
.withdraw .sub-desc .txt2 {
    font-family: 'noto_r';
    font-size: 22px;
    color: #333;
    text-align: center;
    line-height: 30px;
    padding: 30px 0;
}

.withdraw .sub-desc .em1 {
    display: inline-block;
    font-family: 'noto_r';
    font-size: 22px;
    color: #005eb8;
    font-style: normal;
}

.withdraw .sub-desc .em2 {
    display: inline-block;
    font-family: 'noto_r';
    font-size: 18px;
    color: #005eb8;
    font-style: normal;
}

.withdraw .withdraw-info {
    padding: 30px 20px 20px;
    border: 1px solid #e8e8e8;
}

    .withdraw .withdraw-info ul li {
        margin-bottom: 15px;
    }

        .withdraw .withdraw-info ul li span {
            display: inline-block;
            font-size: 15px;
            color: #666;
            padding-left: 8px;
            line-height: 22px;
            background: url('../img/bu/rect_01.png') no-repeat 0 10px;
        }

            .withdraw .withdraw-info ul li span em {
                color: #005eb8;
                font-style: normal;
            }

.withdraw .agree {
    text-align: center;
    padding: 30px 0;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 30px;
}

.withdraw .tac {
    text-align: center;
}

.withdraw .css-label.font2 {
    font-family: 'noto_r';
    font-size: 14px;
    color: #7d7d7d;
}


/*
 * 같이양육 - 소개페이지
 *------------------------------------------*/
/* section-왜 */
.sponsor-nurture.group .life-change {
    text-align: center;
}

    .sponsor-nurture.group .life-change .box strong {
        padding-top: 55px;
        background-size: 48px;
    }

    .sponsor-nurture.group .life-change .box .ic1 {
        background-image: url(/common/img/page/sponsor/icon-group-1.png);
    }

    .sponsor-nurture.group .life-change .box .ic2 {
        background-image: url(/common/img/page/sponsor/icon-group-2.png);
    }

    .sponsor-nurture.group .life-change .box .ic3 {
        background-image: url(/common/img/page/sponsor/icon-group-3.png);
    }

    .sponsor-nurture.group .life-change .box .ic4 {
        background-image: url(/common/img/page/sponsor/icon-group-4.png);
    }

/* section-어떻게 */
.sponsor-nurture.group .group-how {
    text-align: center;
    padding: 30px 0;
}

    .sponsor-nurture.group .group-how .img-wrap {
        margin: 30px 18px;
    }

    .sponsor-nurture.group .group-how .sub-btn {
        color: #000;
        text-decoration: underline;
        padding-top: 10px;
    }

.sponsor-nurture.group .how-detail ul {
    margin: 0;
    padding: 0;
}

.sponsor-nurture.group .how-detail-item {
    margin: 35px 0;
}

    .sponsor-nurture.group .how-detail-item .icon-area {
        margin-bottom: 15px;
    }

    .sponsor-nurture.group .how-detail-item .icon-shape {
        display: inline-block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #005eb8;
    }

        .sponsor-nurture.group .how-detail-item .icon-shape .icon-group {
            margin-top: 20px;
        }

    .sponsor-nurture.group .how-detail-item .txt-type1 {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #333;
        margin-bottom: 5px;
    }

    .sponsor-nurture.group .how-detail-item .txt-type2 {
        font-family: 'noto_r';
        font-size: 12px;
        line-height: 1.5;
        color: #333;
    }

/* section-종류 */
.sponsor-nurture.group .group-sort {
    position: relative;
    box-sizing: border-box;
    height: 250px;
    padding: 30px 0;
    background: url(/common/img/page/sponsor/img-group-sort.jpg) center bottom no-repeat;
    background-size: cover;
}

    .sponsor-nurture.group .group-sort:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .4);
    }

    .sponsor-nurture.group .group-sort .txt-caption {
        color: #fff;
        position: relative;
        z-index: 1;
    }

    .sponsor-nurture.group .group-sort .btn-area {
        position: relative;
        z-index: 1;
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
    }

    .sponsor-nurture.group .group-sort .bt-type2 {
        text-align: center;
        display: block;
        margin: 5px auto;
    }

    .sponsor-nurture.group .group-sort .sub-btn {
        text-align: center;
        text-decoration: underline;
        padding-top: 10px;
    }

    .sponsor-nurture.group .group-sort .link {
        color: #fff;
    }

/*.sponsor-nurture.group .group-sort .btn-sort {
        font-family: 'noto_m';
        font-size: 14px;
        line-height: 38px;
        color: #fff;
        text-align: center;
        display: block;
        width: 220px;
        height: 40px;
        margin: 5px auto;
        border-radius: 20px;
        background-color: rgba(2, 81, 147, .9);
    }*/


/* 같이양육-아이콘 */
.icon-group {
    display: inline-block;
    background: url(/common/img/page/sponsor/icon-group.png) no-repeat;
    background-size: 300px;
}

.icon-group-detail1 {
    width: 40px;
    height: 40px;
    background-position: left top;
}

.icon-group-detail2 {
    width: 40px;
    height: 40px;
    background-position: -50px top;
}

.icon-group-detail3 {
    width: 40px;
    height: 40px;
    background-position: -100px top;
}

.icon-group-detail4 {
    width: 40px;
    height: 40px;
    background-position: -150px top;
}

.icon-group-detail5 {
    width: 40px;
    height: 40px;
    background-position: -200px top;
}

.icon-group-detail6 {
    width: 40px;
    height: 40px;
    background-position: -250px top;
}


/*
 * 팝업
 *------------------------------------------*/
/* 공통 */
.pop-invitation {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 310px;
    margin-left: -155px;
}


.pop-invitation-cover {
    position: fixed;
    left: 0;
    right: 0;
    top: -400px;
    bottom: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .6);
    z-index: 1000;
}

/* 초대장 공통 */
.pop-invitation .inv-head {
    position: absolute;
}

.pop-invitation .inv-body {
    padding: 80px 20px 30px;
    background-color: #fff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    text-align: center;
}

    .pop-invitation .inv-body img {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 20px;
    }

    .pop-invitation .inv-body .inv-tit {
        font-size: 22px;
        line-height: 1.33;
        color: #171717;
        font-family: 'noto_m';
        margin-bottom: 15px;
    }

    .pop-invitation .inv-body .inv-txt {
        font-size: 14px;
        line-height: 1.6;
        color: #4D4D4D;
        font-family: 'noto_d';
    }

    .pop-invitation .inv-body .inv-time {
        font-size: 13px;
        line-height: 1.33;
        color: #F44A51;
        font-family: 'noto_d';
        margin-top: 8px;
    }

    .pop-invitation .inv-body .inv-code {
        font-size: 16px;
        line-height: 1.33;
        color: #F44A51;
        font-family: 'noto_m';
        margin-top: 20px;
    }

.pop-invitation .inv-foot .btn-inv-foot {
    padding: 18px 25px;
    width: 100%;
    background-color: #005eb8;
    border-color: #005eb8;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.pop-invitation .inv-foot .btn-txt {
    font-size: 18px;
    color: #fff;
    font-family: 'noto_m';
}

/* 초대장이 도착했어요 */
.pop-invitation .inv-head.arrive {
    top: -50px;
    left: 55px;
}

    .pop-invitation .inv-head.arrive img {
        width: 200px;
    }

/* 후원 모집 마감 */
.pop-invitation .inv-head.alarm {
    top: -55px;
    left: 85px;
}

    .pop-invitation .inv-head.alarm img {
        width: 140px;
    }
/* 다시 시작되는 후원 */
.pop-invitation .inv-head.again {
    top: -55px;
    left: 85px;
}

    .pop-invitation .inv-head.again img {
        width: 140px;
    }



/*
 * 앱 메인 
 *------------------------------------------*/
.appmain-child.main-child {
    padding: 0;
    margin: 20px 0 35px 0;
}

.appmain-child h2 {
    font-family: 'noto_m';
    font-weight: normal;
    font-size: 17px;
    line-height: 19px;
    color: #005eb8;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.appmain-child .child-set .textWrap {
    padding: 20px 0 0;
}

.appmain-child .child-set .label-child {
    height: auto;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
}

    .appmain-child .child-set .label-child .label-txt {
        font-size: 12px;
        line-height: 20px;
    }

.appmain-child .child-set .textWrap .title {
    font-size: 15px;
    margin-bottom: 10px;
}

.appmain-child .child-set .textWrap .con {
    font-size: 13px;
    margin-bottom: 15px;
}

.appmain-child .child-set .btn-more1,
.appmain-child .child-set .btn-more2 {
    font-size: 14px;
    line-height: 40px;
    border-radius: 2px;
    border-width: 1px;
}


/*
 * 컴패션 소개
 *------------------------------------------*/
/* 공통 */
.menu-sympathy ul {
    padding-left: 10px;
    padding-right: 10px;
}

.menu-sympathy li:first-child > a {
    padding: 12px 5px;
}

.wrap-sectionsub .about-introduce .dir-intro .title,
.wrap-sectionsub .about-introduce .dir-role .title,
.wrap-sectionsub .about-introduce .dir-operate .title,
.wrap-sectionsub .about-introduce .row .title {
    height: auto;
    background: unset;
}

.nurture-edu .txt-slogon,
.nurture-poverty .txt-slogon {
    font-family: 'noto_m';
    font-size: 15px;
    line-height: 1.33;
    color: #fff;
}

    .nurture-edu .txt-slogon:after,
    .nurture-poverty .txt-slogon:after {
        content: '';
        display: block;
        width: 1px;
        height: 25px;
        margin: 15px auto;
        background-color: #fff;
    }


/*
 * 컴패션 소개 - 컴패션 양육
 *------------------------------------------*/
/* 전인적 양육 */
.nurture-whole .whole-title {
    text-align: center;
    padding-bottom: 30px;
    margin-top: 20px;
    border-bottom: 1px solid #d8d8d8;
}

    .nurture-whole .whole-title .title {
        font-family: 'noto_m';
        font-size: 20px;
        line-height: 1.33;
        color: #121212;
    }

    .nurture-whole .whole-title .desc {
        font-family: 'noto_r';
        font-size: 16px;
        line-height: 1.33;
        color: #333;
        margin-top: 15px;
    }

        .nurture-whole .whole-title .desc em {
            font-family: 'noto_m';
            color: #005eb8;
            font-style: normal;
        }

.nurture-whole .whole-curriculum {
    text-align: center;
}

    .nurture-whole .whole-curriculum .bar {
        display: block;
        width: 1px;
        height: 25px;
        margin: 20px auto;
        background-color: #005eb8;
        opacity: 1;
    }

.nurture-whole .curr-title {
    font-family: 'noto_m';
    font-size: 20px;
    line-height: 1.33;
    color: #005eb8;
    margin-bottom: 25px;
}

.nurture-whole .curr-outcome {
    padding: 25px 15px;
    margin-bottom: 25px;
    background-color: #005eb8;
}

    .nurture-whole .curr-outcome .outcome-txt1 {
        font-family: 'noto_m';
        font-size: 16px;
        line-height: 1.33;
        color: #fff;
    }

    .nurture-whole .curr-outcome .outcome-txt2 {
        font-family: 'noto_r';
        font-size: 13px;
        line-height: 1.33;
        color: #fff;
        margin-top: 10px;
    }

.nurture-whole .curr-set {
    text-align: left;
}

.nurture-whole .curr-set-title {
    padding: 15px 20px;
    background-color: #F1F2F5;
    border-bottom: 1px solid #E8E8E8;
}

    .nurture-whole .curr-set-title .curr-cate {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #121212;
        padding-bottom: 8px;
    }

    .nurture-whole .curr-set-title .curr-desc {
        font-family: 'noto_r';
        font-size: 15px;
        line-height: 1.33;
        color: #121212;
    }

.nurture-whole .age-item {
    border-bottom: 1px solid #E8E8E8;
}

    .nurture-whole .age-item .btn-age {
        font-family: 'noto_r';
        font-size: 15px;
        line-height: 1.33;
        color: #121212;
        text-align: left;
        position: relative;
        width: 100%;
        padding: 15px 20px;
        background-color: #fff;
        border-width: 0;
    }

        .nurture-whole .age-item .btn-age:after {
            content: '';
            position: absolute;
            right: 20px;
            top: calc(50% - 3px);
            display: inline-block;
            width: 12px;
            height: 7px;
            background: url(/common/img/bu/arrow-down.png) no-repeat;
            background-size: 12px;
        }

    .nurture-whole .age-item.on .btn-age:after {
        transform: rotate(180deg)
    }

    .nurture-whole .age-item .content-age {
        display: none;
    }

.nurture-whole .curr-list {
    padding: 10px 20px;
    border-top: 1px solid #e8e8e8;
}

.nurture-whole .curr-item {
    padding: 7px 0;
}

    .nurture-whole .curr-item .curr-cate {
        font-family: 'noto_m';
        font-size: 14px;
        line-height: 1.33;
        color: #121212;
        padding-bottom: 5px;
    }

    .nurture-whole .curr-item .curr-desc {
        font-size: 14px;
        line-height: 1.33;
        color: #767676;
    }

.nurture-whole .suppl-item {
    display: inline-block;
    min-width: 80px;
    margin: 20px 30px 0 0;
    vertical-align: top;
}

    .nurture-whole .suppl-item:last-child {
        margin-right: 0;
    }

    .nurture-whole .suppl-item .icon-area {
        width: 40px;
        height: 40px;
        margin: 5px auto;
        background: url(/common/img/page/about/suppl-icon.png) no-repeat;
    }

    .nurture-whole .suppl-item:nth-child(1) .icon-area {
        background-position: left top;
    }

    .nurture-whole .suppl-item:nth-child(2) .icon-area {
        background-position: -40px top;
    }

    .nurture-whole .suppl-item:nth-child(3) .icon-area {
        background-position: -80px top;
    }

    .nurture-whole .suppl-item:nth-child(4) .icon-area {
        background-position: -120px top;
    }

    .nurture-whole .suppl-item:nth-child(5) .icon-area {
        background-position: -160px top;
    }

    .nurture-whole .suppl-item:nth-child(6) .icon-area {
        background-position: -200px top;
    }

    .nurture-whole .suppl-item:nth-child(7) .icon-area {
        background-position: -240px top;
    }

    .nurture-whole .suppl-item .txt-area {
        font-size: 13px;
        line-height: 1.33;
        color: #767676;
        text-align: center;
    }

/* 교육 */
.nurture-edu .edu-bg {
    text-align: center;
    padding: 50px 20px;
    margin-top: 60px;
    background: url(/common/img/page/about/visual-edu.jpg) no-repeat center top;
}

    .nurture-edu .edu-bg .bar {
        margin: 25px 0;
    }

    .nurture-edu .edu-bg .s-tit6 {
        font-family: 'noto_m';
        font-size: 13px;
        line-height: 1.33;
        color: #fff;
        margin-bottom: 10px;
    }

    .nurture-edu .edu-bg .con-wh {
        font-size: 13px;
        line-height: 1.5;
        color: #fff;
    }

.nurture-edu .edu-feature {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    margin: 0 auto;
    border-bottom: 1px solid #e8e8e8;
}

    .nurture-edu .edu-feature .feature-item {
        text-align: center;
        flex: 1;
        margin: 10px 20px;
        min-width: 200px;
    }

    .nurture-edu .edu-feature .img-area img {
        margin: 0 auto;
    }

    .nurture-edu .edu-feature .txt-area {
        margin-top: 20px;
    }

        .nurture-edu .edu-feature .txt-area .title {
            font-family: 'noto_m';
            font-size: 15px;
            line-height: 1.33;
            color: #333;
        }

        .nurture-edu .edu-feature .txt-area .desc {
            font-size: 13px;
            line-height: 1.5;
            color: #767676;
            margin-top: 5px;
        }

.nurture-edu .edu-chkl .chkl-title {
    font-size: 15px;
    line-height: 1.33;
    color: #005eb8;
}

.nurture-edu .edu-chkl .chk-list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    padding: 10px 0;
    background-color: #F5F5F5;
}

.nurture-edu .edu-chkl .chk-item {
    text-align: center;
    flex: 1;
    min-width: 50%;
    padding: 20px 0;
    position: relative;
}

    .nurture-edu .edu-chkl .chk-item:nth-child(1):after,
    .nurture-edu .edu-chkl .chk-item:nth-child(3):after {
        content: '';
        position: absolute;
        right: 0;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background-color: #e8e8e8;
    }

    .nurture-edu .edu-chkl .chk-item:nth-child(3):before,
    .nurture-edu .edu-chkl .chk-item:nth-child(4):before {
        content: '';
        position: absolute;
        left: 20px;
        right: 20px;
        top: 0;
        height: 1px;
        background-color: #e8e8e8;
    }

    .nurture-edu .edu-chkl .chk-item .item-title {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #005eb8;
    }

    .nurture-edu .edu-chkl .chk-item .item-desc {
        font-size: 13px;
        line-height: 1.8;
        color: #767676;
        margin-top: 10px;
    }

/* 가난 */
.nurture-poverty .poverty-bg {
    text-align: center;
    padding: 50px 20px;
    margin-top: 60px;
    background: url(/common/img/page/about/visual-poverty.jpg) no-repeat center top;
}

    .nurture-poverty .poverty-bg .con-wh {
        font-size: 13px;
        line-height: 1.5;
        color: #fff;
    }

.nurture-poverty .poverty-lie {
    text-align: center;
    padding: 30px 0;
    background-color: #f5f5f5;
}

    .nurture-poverty .poverty-lie .lie-title {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #333;
    }

    .nurture-poverty .poverty-lie .lie-quotation {
        font-size: 13px;
        line-height: 1.5;
        color: #767676;
        margin-top: 10px;
    }

    .nurture-poverty .poverty-lie .lie-source {
        font-size: 12px;
        line-height: 1.33;
        color: #767676;
        margin-top: 15px;
    }

.nurture-poverty .poverty-with {
    text-align: center;
}

    .nurture-poverty .poverty-with .with-txt {
        font-family: 'noto_m';
        font-size: 15px;
        line-height: 1.33;
        color: #333;
    }

        .nurture-poverty .poverty-with .with-txt:before {
            content: '';
            display: block;
            width: 1px;
            height: 25px;
            margin: 15px auto;
            background-color: #333;
        }


/*
 * 컴패션 소개 - 공통
 *------------------------------------------*/
.wrap-sectionsub .about-introduce .txt-caption1 {
    display: block;
    font-family: 'noto_m';
    font-size: 20px;
    line-height: 24px;
    color: #fff;
    word-spacing: -1px;
    text-align: center;
}

    .wrap-sectionsub .about-introduce .txt-caption1 .color1 {
        color: #333;
    }

    .wrap-sectionsub .about-introduce .txt-caption1 .color2 {
        color: #005eb8;
    }


/*
 * 컴패션 소개 - 조직도
 *------------------------------------------*/
/* 조직도 */
.wrap-sectionsub .about-introduce .img-wrap {
    margin-top: 20px;
    margin-bottom: 40px;
    text-align: center;
}

    .wrap-sectionsub .about-introduce .img-wrap img {
        max-width: 600px;
    }

.wrap-sectionsub .about-introduce .dir-intro {
    background-color: #005eb8;
    padding: 28px 20px;
}

    .wrap-sectionsub .about-introduce .dir-intro .txt-title {
        font-family: 'noto_m';
        font-size: 20px;
        line-height: 24px;
        word-spacing: -1px;
        text-align: center;
        background: url(/common/img/page/about/bg-gap.png) center 35px no-repeat;
        background-size: 1px 25px;
    }

    .wrap-sectionsub .about-introduce .dir-intro .txt-sub {
        color: #fff;
    }

/* 이사회 역할과 기준 */
.wrap-sectionsub .about-introduce .dir-role {
    padding: 28px 0px;
}

    .wrap-sectionsub .about-introduce .dir-role .title .txt > strong {
        color: #000;
    }

    .wrap-sectionsub .about-introduce .dir-role .ul-wrap {
        padding: 10px;
        margin-top: 20px;
        border: 1px solid #ededed;
        text-align: left;
        border-radius: 4px;
    }

    .wrap-sectionsub .about-introduce .dir-role .list-title {
        font-size: 13px;
        font-family: 'noto_m';
        margin-bottom: 10px;
        color: #000;
        margin-bottom: 8px;
    }

    .wrap-sectionsub .about-introduce .dir-role .dir-item {
        word-break: keep-all;
        position: relative;
        padding-left: 7px;
        margin-bottom: 4px;
    }

        .wrap-sectionsub .about-introduce .dir-role .dir-item::before {
            content: " ";
            position: absolute;
            left: 0;
            top: 8px;
            display: inline-block;
            width: 3px;
            height: 3px;
            background-color: #555;
            border-radius: 50%;
        }

/* 이사회 운영과 공시 */
.wrap-sectionsub .about-introduce .dir-operate {
    background-color: #f5f5f5;
    padding: 28px 20px;
}

    .wrap-sectionsub .about-introduce .dir-operate .title .txt > strong {
        color: #005eb8;
    }

        .wrap-sectionsub .about-introduce .dir-operate .title .txt > strong::after {
            background-color: #005eb8;
        }

    .wrap-sectionsub .about-introduce .dir-operate .txt-sub {
        word-break: keep-all;
    }

/* 이사회 */
.wrap-sectionsub .about-introduce .row {
    padding: 28px 0px 40px;
}

    .wrap-sectionsub .about-introduce .row .title .txt > strong {
        color: #000;
    }

        .wrap-sectionsub .about-introduce .row .title .txt > strong:after {
            height: 0;
        }


/*
 * 컴패션 소개 - 컴패션의 정신
 *------------------------------------------*/
.wrap-sectionsub .about-introduce .compassion-soul {
    text-align: center;
    word-break: keep-all;
    min-height: auto;
}

.about-introduce .compassion-soul .txt-slogon {
    padding-bottom: 10px;
}

.wrap-sectionsub .about-introduce .compassion-soul .txt-subtit {
    display: block;
    font-style: normal;
    font-size: 13px;
    line-height: 17px;
    color: #333;
    padding-top: 30px;
    font-family: 'noto_m';
    margin-bottom: 10px;
}