@charset "utf-8";
/**
 * --------------------------------
 * customer CSS
 * creator : leejeha
 * --------------------------------
*/

/* common */
.customer{text-align:right;}
.customer::after{content:'';display:block;clear:both;}
.customer .h2-title{margin-top:40px;}
.customer .h3-title{margin-bottom:16px;}
.customer .detail-title{position:relative;margin-top:60px;padding-bottom:8px;}
.customer .detail-title h2{position:relative;color:#000;font-size:2.4rem;font-weight:500;text-align:left;}
.customer .detail-title h2 .txt-date{display:block;padding-top:8px;color:#999;font-size:1.4rem;font-weight:400;}
.customer .detail-title h2 .txt-status{display:block;font-size:1.6rem;text-align:left;}
.customer .detail-title .del-list{position:absolute;bottom:8px;right:0;width:auto;height:2rem;padding-left:16px;padding-right:0;color:#999;font-size:1.4rem;line-height:17px;vertical-align:middle;border:none;cursor:pointer;}
.customer .detail-title .del-list:before{content:'';display:inline-block;width:1.6rem;height:1.6rem;vertical-align:top;background:url('../img/common/bg_delete.png') no-repeat 0 0 / cover;}
.customer .detail-title + .grid-area{border-top:0.1rem solid #ccc;}
.customer .grid-area .bg-gray{width:100%;padding:30px 10px;background:#F5F5F5;color:#555;font-size:1.6rem;text-align:left;}
.customer .area-answer{margin-top:80px;}
.customer .visual-gray{width:100%;height:16rem;margin-top:80px;padding:50px 16px;background-color:#F5F5F5;text-align:center;}
.customer .visual-gray .visual-text{position:relative;display:inline-block;padding-left:7.6rem;color:#555;font-size:1.8rem;font-weight:500;text-align:center;}
.customer .visual-gray .visual-text::before{content:'';display:block;position:absolute;top:0;left:0;width:6rem;height:6rem;background:url('../img/common/ico_chat.svg') no-repeat 0 0 / 100%;}
.customer .no-data{padding:98px 0;text-align:center;border-top:0.1rem solid #ccc;border-bottom:0.1rem solid #E1E1E1;}
.customer .no-data p{margin-top:20px;color:#2E2E2E;font-size:1.6rem;}

/* FAQ */
.faq .search-area{width:500px;margin:25px auto 40px;}
.faq .search-area input{height:4.6rem;font-size:1.6rem;font-weight:400;border:0.1rem solid #B2B2B2;}
.faq .search-area .btn{height:4.6rem;max-height:4.6rem;font-size:1.6rem;font-weight:500;}
.faq .visual-gray{margin-top:0px;}
.faq-content {margin-bottom:80px;}
.faq-content .tab .tab-list{padding-bottom:16px;}
.faq-content .tab .tab-list a{display:block;float:left;height:4rem;line-height:3.8rem;margin-left:8px;padding:0 16px;background-color:#fff;color:#999;font-size:1.6rem;border-radius:30px;border:0.1rem solid #B2B2B2;transition:all 0.4s;}
.faq-content .tab .tab-list a:first-child{margin-left:0;}
.faq-content .tab .tab-list a:hover,
.faq-content .tab .tab-list a.active{background-color:#152865;color:#fff;border:0.1rem solid #152865;}

/* accordian */
.faq-content .list-accordion li{border-top:0.1rem solid #E1E1E1;text-align:left;}
.faq-content .list-accordion li:first-child{border-top:0.1rem solid #ccc;}
.faq-content .list-accordion li:last-child{border-bottom:0.1rem solid #E1E1E1;}
.faq-content .list-accordion a{display:block;position:relative;padding:27px 24px 27px 20px;text-align:left;}
.faq-content .list-accordion .ico-quest{display:inline-block;width:3.2rem;height:3.2rem;line-height:32px;margin-right:16px;background-color:#B2B2B2;color:#fff;font-size:1.7rem;font-weight:400;font-family:'Roboto', sans-serif;text-align:center;border-radius:50%;}
.faq-content .list-accordion .text-quest{font-size:1.8rem;font-weight:400;vertical-align:middle;}
.faq-content .list-accordion .ico-arrow{display:block;position:absolute;top:30px;right:24px;width:2.4rem;height:2.4rem;}
.faq-content .list-accordion .ico-arrow svg{display:block;width:100%;margin-top:8px;transition:all 0.2s;}
.faq-content .list-accordion .box-answer{display:none;width:100%;height:auto;padding:30px;background-color:#F5F5F5;color:#555;font-size:1.6rem;}
.faq-content .list-accordion li.active + li{border-top:none;}
.faq-content .list-accordion li.active .ico-quest{background-color:#152865;color:#fff;}
.faq-content .list-accordion li.active .ico-arrow svg {transform:rotate(180deg);}
.faq-content .list-accordion li.active .ico-arrow svg path{fill:#2E2E2E;}
.faq-content .list-accordion li.active .box-answer{display:block;}
/*  공지사항 */
.notice .gridlist-area .col.priority::before{content:'';display:block;width:2.8rem;height:2.8rem;margin:0 auto;background:url('../img/common/ico_priotiry.png') no-repeat center / 100%;}

/* 자료실 grid */
.refer .grid-list{margin-left:-50px;}
.refer .grid-list > li{width:366px;height:502px;margin-left:50px;}
.refer .grid-list > li:nth-of-type(4){margin-top:30px !important;}
.refer .grid-list .grid-item a{position:relative;}
.refer .grid-list .grid-item a .grid-image{position:relative;height:auto;}
.refer .grid-list .grid-item a .grid-image .thumb-disabled .text-disabled{line-height:366px;}
.refer .grid-list .grid-item a .thumb-tag{display:none;position:absolute;bottom:0;left:0;padding:8px 16px;background:#2E2E2E;color:#fff;font-size:2rem;}
.refer .grid-list .grid-item .item-title{max-height:52px;line-height:25px;margin-top:12px;}
.refer .grid-list .grid-item .txt-date{display:block;margin-top:5px;color:#999;font-size:1.4rem;text-align:left;}

@media screen and (min-width:360px) and (max-width:1260px){

    /* file-attach */
    .file-attach p{margin-top:8px;font-size:1.2rem;}
    .file-attach strong{display:none;}
    .file-attach .filelist{margin-top:0;}
    .file-attach strong + .filelist{margin-top:0;padding-left:0;}
    .file-attach .filelist:first-child{margin-top:0;}
    .file-attach .filelist li{position:relative;margin-top:8px;padding:10px 24px 10px 8px;background:#F5F5F5;border-radius:3px;}
    .file-attach strong + .filelist li::before{content:'';display:inline-block;width:2.4rem;height:2.4rem;background:url('../img/common/ico_attach.png') no-repeat 0 0 / 100%;vertical-align:top;}
    .file-attach .filelist li:first-child{margin-top:0;}
    .file-attach .filelist li > *{display:inline-block;vertical-align:top;}
    .file-attach .filelist li span{width:calc(100% - 100px);color:#2E2E2E;font-size:1.4rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;}
    .file-attach .filelist li em{position:absolute;top:12px;right:8px;margin-left:1%;color:#999;font-size:1.2rem;}
    .file-attach .filelist li .link{width:calc(100% - 100px);color:#009CD8;font-size:1.4rem;font-weight:600;text-decoration:underline;} /* 파일 링크 강조할 경우 */
    .file-attach .filelist li .btn-del{position:absolute;top:13px;right:6px;width:16px;height:16px;margin-top:0;margin-left:0;background:url("../img/common/btn_del.png") no-repeat 0 0;}

    /* list table */
    .customer .table-box .title-area{margin-bottom:16px;padding-top:0;padding-bottom:42px;}
    .customer .table-box .total,
    .customer .table-box .search-area{float:none;}
    .customer .table-box .total {position:absolute;bottom:0;right:0; height:auto;line-height:normal;}
    .customer .table-box .search-area .select{display:block;width:100% !important;margin-bottom:8px;}
    .customer .table-box .search-area input{width:calc(100% - 76px);margin-left:0;}

    /* customer */
    .customer{padding:0 16px;}
    .customer .h2-title{display:none;}
    .customer .h3-title{font-size:1.6rem;}
    .customer .search-area{width:100%;}
    .customer .visual-gray{height:11rem;margin-top:40px;padding:16px 16px 22px;}
    .customer .visual-gray .visual-text{padding-left:0;}
    .customer .visual-gray .visual-text::before{position:static;margin:0 auto;width:4.4rem;height:4.4rem;}
    .customer .link-transparent{text-align:center;}
    .customer .gridlist-area .col.number{font-size:0; text-indent:-9999px;}
    .customer .gridlist-area .gridhead{display:none;}
    .customer .gridlist-area .col-box{display:block;padding:12px 4px;}
    .customer .gridlist-area .col.status{width:70px;min-width:70px;letter-spacing:-0.02em;}
    .customer .grid-area .col-box .col{display:inline-block;padding:0;vertical-align:top;}
    .customer .grid-area .col-box .col.number{width:0 !important;min-width:0 !important;height:auto !important;}
    .customer .grid-area .col-box .col.priority{width:3rem !important;min-width:3rem !important;height:24px !important;}
    .customer .grid-area .col-box .col.title{width:calc(100% - 46px);}
    .customer .grid-area .col-box .col.title > a{display:block;width:100%;}
    .customer .grid-area .col-box .col.date{display:block;width:100%;min-width:100%;margin-top:4px;color:#999;font-size:1.4rem;}
    .customer .grid-area + .btn-wrap{margin-top:20px;}
    .customer .col.priority + .col.title{padding-left:12px;}
    .customer .gridbody > li:first-child{border-top:0.1rem solid #e1e1e1;}
    .customer .col-box.col2{padding:0;border:none;}
    .customer .detail-title{position:relative;margin-top:70px;padding-bottom:8px;}
    .customer .detail-title h2{font-size:1.6rem;}
    .customer .detail-title h2 .txt-date{font-size:1.4rem;padding-top:4px;}
    .customer .detail-title + .grid-area{border:none;}
    .customer .detail-title .del-list{font-size:1.3rem;}
    .customer .detail-title .del-list:before{vertical-align:middle;}
    .customer .no-data{padding:40px 0;}
    .customer .no-data svg{width:4.6rem;height:4.6rem;}
    .customer .no-data p{margin-top:12px;font-size:1.4rem;}
    
    /* faq */
    .faq .search-area{margin-top:20px;}
    .faq .search-area input{width:calc(100% - 72px);height:4rem;line-height:38px;font-size:1.4rem;}
    .faq .search-area .btn.medium{min-width:6.4rem;height:4rem;line-height:38px;font-size:1.4rem;}
    .faq-content .tab .tab-list{width:100%;text-align:left;overflow-x:auto;white-space:nowrap;}
    .faq-content .tab .tab-list::-webkit-scrollbar{display:none;}
    .faq-content .tab .tab-list a{display:inline-block;float:none;height:3.6rem;margin-left:8px;font-size:1.4rem;line-height:34px;}
    .faq-content .list-accordion a{padding:14px 60px 14px 3px;}
    .faq-content .list-accordion .ico-quest{margin-right:16px;}
    .faq-content .list-accordion .text-quest{display:inline-block;width:calc(100% - 60px); font-size:1.4rem;}
    .faq-content .list-accordion .ico-arrow{top:18px;right:0;}
    .faq-content .list-accordion .box-answer{padding:20px 12px;font-size:1.4rem;}
    
    /* consultation */
    .consultation .title-area{padding-bottom:20px;}
    .consultation .grid-area .col-box .col.title{width: calc(100% - 74px);}
    .consultation .visual-gray{margin-top:40px;}
    .consultation .detail-title h2 .txt-status{display:inline-block;}
    .consultation .grid-area .bg-gray{padding:20px 12px;}
    .consultation .gridlist-area .col2 .ch, .consultation .gridlist-area .col2 .cd{height:4rem;line-height:38px;border-bottom:0.1rem solid #E1E1E1;}
    .consultation .gridlist-area .col2 .ch{width:10rem;margin-bottom:0;background:#F5F5F5;}
    .consultation .gridlist-area .col2 .cd{width:calc(100% - 10.6rem);padding-left:16px;}
    .consultation .enroll-table .gridbody > li:first-child{margin-top:8px;border-top:none;}
    .consultation .enroll-table .col-box .col{display:block;margin-bottom:16px;}
    .consultation .enroll-table .col2 .ch,
    .consultation .enroll-table .col2 .cd{width:100%;height:unset;padding-left:0;line-height:normal;background:none;border:none;}
    .consultation .enroll-table .col2 .ch{margin-bottom:8px;}
    .consultation .enroll-wrap .file-attach{height:100%;min-height:75px;padding-bottom:42px !important;}
    .consultation .enroll-wrap .file-attach .btn.plus{position:absolute;bottom:0;left:0;width:100%;}
    .consultation .enroll-wrap .file-attach p{margin-top:0;}
    .consultation .enroll-wrap .file-attach .filelist{margin-top:8px;margin-bottom:20px;}

}

/* 2023.02.15추가 */
@media screen and (min-width:360px) and (max-width:719px){

    /* grid-list : references */
    .refer .grid-list{margin-left:-2%;}
    .refer .grid-list > li{position:relative;width:48%;height:auto;margin-left:2%;margin-top:30px;}
    .refer .grid-list .grid-item a .thumb-tag{bottom:156px;padding:6px 12px;font-size:1.4rem;}
    .refer .grid-list .grid-item .item-title{width:100%;height:42px;margin-top:12px;font-size:1.4rem;line-height:20px;}
    .refer .grid-list .grid-item .txt-date{font-size:1.3rem;}

}
@media screen and (min-width:720px) and (max-width:1259px){

    /* grid-list : references */
    .refer .grid-list{margin-left:-2%;}
    .refer .grid-list li{position:relative;width:31.3333%;height:auto;margin-left:2%;margin-top:30px;}
    .refer .grid-list > li:nth-of-type(3){margin-top:0px !important;}
    .refer .grid-list .grid-item a .thumb-tag{bottom:156px;padding:6px 12px;font-size:1.4rem;}
    .refer .grid-list .grid-item .item-title{width:100%;height:42px;margin-top:12px;font-size:1.4rem;line-height:20px;}
    .refer .grid-list .grid-item .txt-date{font-size:1.3rem;}
}