@charset "utf-8";

.boardGalleryList { width:100%; padding:20px; }
.boardGalleryList > ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.boardGalleryList > ul > li { width:100%; margin:0 0 40px 0; }
.boardGalleryList > ul > li:last-of-type{margin-bottom: 0}
.boardGalleryList > ul > li > a { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.boardGalleryList > ul > li > a > span { width:100%; display:inline-block; height:192px;background:#D9D9D9; position:relative; overflow: visible; border-radius: 2px; margin:0 0 12px 0; }
.boardGalleryList > ul > li > a > span > .eventDone { position: absolute; color:#2A303C; bottom: -10px; left: 8px; display: inline-block; padding: 2px 12px; border-radius: 15px; background-color: #EAECF0; font-size: 11px; font-weight: 700; line-height: 15px; z-index: 2;}
.boardGalleryList > ul > li > a > span > .end-event { width: 100%; height: 100%; opacity: 0.75; background-color: #2A303C; position: relative; z-index: 1}
.boardGalleryList > ul > li > a > span > img { position:absolute; left:0; top:0; width:100%; object-fit: cover; object-position: center center;height: 100% }
.boardGalleryList > ul > li > a > strong { width:100%; font-size:15px; line-height: 22px; color:#2A303C; font-weight: 400; margin:0 0 15px 0; }
.boardGalleryList > ul > li > a > em { font-size:12px; color:#798493; font-weight: 400; }
.boardGalleryList > ul > li > a > i { font-size:12px; color:#798493; font-weight: 400; margin-left:auto; display:inline-block; padding:0 20px 0 0;
    background:url('../svg/icon_textfile_arrow_right.svg') no-repeat right center;
}
.boardGalleryList > ul > li.no-benefit .no-benefit-image { height: 100%;display: flex;align-items: center;justify-content: center;background: #F6F7F8; }
.boardGalleryList > ul > li.no-benefit .no-benefit-image > span { font-size: 14px;font-weight: 400;color: #798493; }
.boardGalleryList > ul > li.no-benefit a { cursor: default; }

.boardGalleryView { width:100%; padding:40px 20px 20px 20px; }
.boardGalleryView .boardTitle { width:100%; padding-bottom: 8px; display: flex; /*align-items: center;*/ flex-direction: column;  border-bottom:#EAECF0 1px solid; justify-content: space-between}
.boardGalleryView .boardTitle > h3 { font-size:16px; font-weight: 700; color:#2A303C;  }
.boardGalleryView .boardTitle > em { font-size:12px; font-weight: 400; color:#798493; margin-top: 8px;}
.boardGalleryView .boardContents { padding:28px 0; font-size:12.5px; color:#2A303C; font-weight: 400; width:100%; }
.boardGalleryView .boardContents > * {font-size: 15px;}
.boardGalleryView .boardContents img { width:auto ; height:auto !important; max-width: 100%;  display: inline-block; margin:0 0 15px 0;}
.boardGalleryView .boardContents.benefitContents img {margin: 0;}
.boardOtherContents { width:100%; padding:5px 0; border-top:#EAECF0 1px solid; border-bottom:#EAECF0 1px solid; }
.boardOtherContents > ul { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.boardOtherContents > ul > li { width:100%; margin:0 0 0 0; }
.boardOtherContents > ul > li > a { width:100%; margin:0 0 0 0; display:flex; align-items: center; flex-wrap: wrap; height:30px; }
.boardOtherContents > ul > li > a > i { display:inline-block; width:45px; font-size:12.5px; color:#5C6272; font-weight: 400; margin: 0 0 0 0; }
.boardOtherContents > ul > li > a > strong { font-size:12.5px; color:#2A303C; font-weight: 400; display:inline-block; word-break: break-all; white-space: nowrap; text-overflow: ellipsis;
    overflow: hidden; width:calc(100% - 110px); }
.boardOtherContents > ul > li > a > em {color: #5C6272; display:inline-block; width:65px; margin-left:auto; text-align: right; }

.boardButtonWrap { width:100%; display:flex; align-items: center; justify-content: flex-start; flex-wrap: wrap;  margin:25px 0;}
.boardButtonWrap > * { display:inline-block; height:34px; line-height: 34px; background:#F6F7F8; padding:0 18px; font-size:12px; color:#2A303C; font-weight: 400; }
.boardButtonWrap .btn_list { margin-left:auto; }
.PcTabOrder{display: none}
.noticeDetail .boardTitle{justify-content: flex-start}
.noticeDetail .boardTitle > em{color: #5C6272; white-space: nowrap; margin-left: 20px}
.rsizeGalleryview .boardTitle{display: block}
.rsizeGalleryview .boardTitle > h3{margin-bottom: 8px;}
.rsizeGalleryview .boardContents > p span{font-size: 12.5px !important;}
.rsizeGalleryview .boardTitle > em{font-size: 11.5px}
.boardGalleryView .noticeTitle{flex-direction: row}
.noticeDetail .boardTitle{justify-content: space-between}
.boardOtherContents > ul > li > a > strong:active{font-weight: 700}
.totalBenefits > h2{color: #431F88; font-size: 16.5px; font-weight: 700; line-height: 23px; letter-spacing: -0.5px; margin-bottom: 20px;}
.totalBenefits > ul > li > a > strong{margin: 0 8px 8px 8px; line-height: 21px}
.totalBenefits > ul > li > a > em{margin-left: 8px; margin-right: 8px}
.totalBenefits > ul > li > a > i{display: none}
.totalBenefits > ul > li > a > span{height: 200px}
.progress-benefits{margin-bottom: 38px}
.boardGalleryView .newstyleBoardTitle > .progressing{display: inline-block; width: 42px; padding: 2px 8px; border-radius: 15px; background-color: #431F88; color: #FFF; font-size: 9px; font-weight: 400; line-height: 14px;  text-align: center; margin-bottom: 4px; white-space: nowrap}
.boardGalleryView .newstyleBoardTitle > .benefitsEnd { display: inline-block; width: 42px; padding: 2px 8px; border-radius: 15px; background-color: #EAECF0; color: #2A303C; font-size: 9px; font-weight: 400; line-height: 14px;  text-align: center; margin-bottom: 4px; }
.benefitDetail .boardTitle > h3{font-size: 19px; line-height: 27px; letter-spacing: -0.5px; color: #2A303C}
.benefitDetail .boardTitle > em{margin-top: 12px}
.benefitDetail .boardTitle{border-bottom: none; padding-bottom: 0}
.benefitDetail .boardContents{padding-top: 15px; padding-bottom: 0}
.benefitBtn{margin: 32px 0 0 0 }
.benefitDetail{padding: 34px 24px 80px 24px}
.benefitBtn .btn_list{padding: 0 20px; font-size: 12px; line-height: 34px; letter-spacing: -0.5px; color: #2A303C}
.totalBenefits{padding-top: 40px}
.pressRelease > ul > li > a > i{background: url("../img/read_board_arrow.png") no-repeat right center; color: #798493; background-size: 8px 4.5px; font-size: 12.5px; line-height: 16.5px; font-weight: 400;     background-size: auto; height: 20px; display: flex; align-items: center}
.boardGalleryList > ul.progress-total:first-of-type{margin-bottom: 78px}

.rsizeGalleryview .boardContents > *{font-size: 12.5px !important; color: #5C6272 !important; font-weight: 400 !important; line-height: 17px !important;}
.rsizeGalleryview .boardContents span{font-size: 12.5px !important; color: #5C6272 !important; font-weight: 400 !important; line-height: 17px !important;}
.rsizeGalleryview .boardContents font{font-size: 12.5px !important; color: #5C6272 !important; font-weight: 400 !important; line-height: 17px !important}

@media only screen and (min-width: 768px) {
    .PcTabOrder{display: block}

    .boardGalleryList > ul > .boardGallery-li strong, em, i { padding: 0 10px; }
    .boardGalleryList > ul > .boardGallery-li > a > i { margin-right: 10px }
    .boardGalleryList > ul > .boardGallery-li > a > strong { margin: 0 0 12px 0 }

    .boardTitle {display: flex; align-items: center; flex-direction: row !important;}
    .boardGalleryView .boardTitle > h3{margin-bottom: 0; font-size: 20px; padding-left: 20px}
    .boardGalleryView .boardTitle > em{font-size: 14px; font-weight: 400; margin-left: 20px}
    .boardOtherContents > ul > li > a > strong{width: 597px; font-size: 14px;}
    .boardOtherContents > ul > li > a > i{font-size: 14px; width: 144px; text-align: center}
    .boardOtherContents > ul > li > a > em{font-size: 12px; margin-right: 30px}
    .boardOtherContents > ul > li > a > strong:hover{font-weight: 700}
    .boardButtonWrap > *:active{background-color: #2A303C; color: white}
    .boardGalleryList > ul > li{width: 31.67%; margin: 0 0.8% 60px 0.8%; max-width: 380px;}

    .noticeDetail > ul > li > a > i{color: #798493}
    .boardGalleryList, .boardGalleryView { max-width: 1320px; margin:40px auto 0; padding:0; }
    .boardGalleryList > ul { margin-bottom:30px; }
    .boardGalleryList > ul.progress-total:first-of-type{margin-bottom: 106px}
    .boardGalleryList > ul > li > a > span { height:240px; position: relative; overflow: visible}
    .boardGalleryList > ul > li > a > span > .eventDone { position: absolute; color: #2A303C; bottom: -10px; left: 18px; display: inline-block; padding: 2px 12px; border-radius: 15px; background-color: #EAECF0; font-size: 11px; font-weight: 700; line-height: 16px; z-index: 2;}
    .boardGalleryList > ul > li > a > span > .end-event { width: 100%; height: 100%; opacity: 0.75; background-color: #2A303C; position: relative; z-index: 1}


    .boardGalleryView .boardTitle > h3 { padding-left:15px; }
    .boardGalleryView .boardContents { padding:60px 15px; font-size:18px; line-height: 26px; min-height: 300px; }
    .noticeDetail .boardOtherContents > ul > li > a > em{color: #798493; font-weight: 400}
    .rsizeServiceTabs .boardGalleryList > ul > li{width: 31.33%; margin: 0 1%; margin-bottom: 50px;}
    /*.brandStoryWrap{max-width: 1320px; margin: 0 auto; width: 100%}*/
    .brandStoryWrap{width: 100%}
    .noticeDetail .boardContents{padding: 40px 15px 100px 15px}

    .rsizeGalleryview .boardTitle{display: block}
    .rsizeGalleryview .boardTitle > h3{margin-bottom: 8px;}
    .rsizeGalleryview .boardTitle > em{font-size: 12px; margin-left: 15px;}
    .rsizeGalleryview .boardContents p font{font-size: 14px !important;  font-weight: 400 !important; line-height: 26.5px !important}
    .rsizeGalleryview .boardContents > *{font-size: 14px !important;}
    .noticeDetail .boardTitle{justify-content: flex-start}
    .noticeBardbtn > *{height: 40px; font-size: 14px; line-height: 40px; font-weight: 400; padding: 0 31px}
    .noticeBardbtn > a:active{background-color: #2A303C; color: #FFFFFF}
    .boardGalleryList > ul.progress-total{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 66px 36px;  }
    .boardGalleryList > ul.progress-total > li{width: 100%; margin: 0; }
    .boardGalleryList > ul.progress-total > li:nth-of-type(3n+3){margin-right: 0}
    .totalBenefits > ul > li > a > strong{margin: 0 18px 8px 18px}
    .totalBenefits > ul > li > a > em{margin-left: 18px; margin-right: 18px; padding: 0}
    .totalBenefits > ul > li > a > strong{font-size: 18px; line-height: 26.5px; letter-spacing: -0.5px}
    .totalBenefits > ul > li > a > em{color: #2A303C; font-size: 12px; line-height: 19px; letter-spacing: 0.5px}
    .boardGalleryView .newstyleBoardTitle{display: block}.benefitsEnd
                                                         .boardGalleryView .newstyleBoardTitle > .progressing{display: inline-block; width: 56px; padding: 2px 12px; border-radius: 15px; background-color: #431F88; color: #FFF; font-size: 11px; font-weight: 700; line-height: 16px;  text-align: center; margin-bottom: 4px;}
    .boardGalleryView .newstyleBoardTitle > .benefitsEnd{display: inline-block; width: 56px; padding: 2px 12px; border-radius: 15px; background-color: #EAECF0; color: #2A303C; font-size: 11px; font-weight: 700; line-height: 16px;  text-align: center; margin-bottom: 4px;}
    .benefitDetail .boardTitle > h3{font-size: 20px; line-height: 29px; letter-spacing: -0.5px; margin-bottom: 4px; padding: 0}
    .boardGalleryView .newstyleBoardTitle > em{margin-left: 0; color: #2A303C; font-size: 12px; line-height: 19px; letter-spacing: -0.5px; padding: 0}
    .boardGalleryView .benefitContents{padding: 40px 0 24px 0}
    .benefitBtn{margin: 0}
    .benefitBtn .btn_list{margin: 0; height: 40px; padding: 0 31px; font-size: 14px; line-height: 40px; letter-spacing: -0.5px}
    .benefitDetail{margin-bottom: 120px}
    .rsizeGalleryview .boardContents > *{font-size: 14px !important;  font-weight: 400 !important; line-height: 26.5px !important;}
    .rsizeGalleryview .boardContents > p span{font-size: 14px !important;  font-weight: 400 !important; line-height: 26.5px !important;}
    .rsizeGalleryview .boardContents span{font-size: 14px !important;  font-weight: 400 !important; line-height: 26.5px !important;}
    .boardGalleryList > ul > li > a > span > img { position:absolute; left:0; top:0; width:100%; object-fit: cover; object-position: center center;height: 100% }
}

@media only screen and (max-width: 500px) {
    .boardGalleryList > ul > li > a > span > img{width: 100%; height: 100%; object-fit: fill}
}

.boardGalleryView .boardContents img { width:auto ; height:auto !important; max-width: 100%;  display: block; margin:0 0 0 0;}
.boardGalleryView .boardContents b { font-weight: bold; }
.boardGalleryView .boardContents i { font-style: italic; }
.boardGalleryView .boardContents u { text-decoration: underline; }
.boardGalleryView .boardContents strike { text-decoration: line-through; }
.boardGalleryView .boardContents li { display: list-item; }
.boardGalleryView .boardContents ol,
.boardGalleryView .boardContents ul {
    margin-top: 0;
    margin-bottom: 10px;
}
.boardGalleryView .boardContents ol { list-style-type: decimal; margin-top: 0; margin-bottom: 10px; }
.boardGalleryView .boardContents ul { list-style-type: disc; margin-top: 0; margin-bottom: 10px; }
.boardGalleryView .boardContents .table-bordered {
    border: 1px solid #ddd;
}
.boardGalleryView .boardContents .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
.boardGalleryView .boardContents .table-bordered>tbody>tr>td,
.boardGalleryView .boardContents .table-bordered>tbody>tr>th,
.boardGalleryView .boardContents .table-bordered>tfoot>tr>td,
.boardGalleryView .boardContents .table-bordered>tfoot>tr>th,
.boardGalleryView .boardContents .table-bordered>thead>tr>td,
.boardGalleryView .boardContents .table-bordered>thead>tr>th {
    border: 1px solid #ddd;
}

.boardGalleryView .boardContents .table>tbody>tr>td,
.boardGalleryView .boardContents .table>tbody>tr>th,
.boardGalleryView .boardContents .table>tfoot>tr>td,
.boardGalleryView .boardContents .table>tfoot>tr>th,
.boardGalleryView .boardContents .table>thead>tr>td,
.boardGalleryView .boardContents .table>thead>tr>th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

/*댓글*/
.board-comment-wrap { width:100%; margin:30px 0; padding-top:30px; border-top:#d9d9d9 1px solid; }
.board-comment-wrap > h3 { width:100%; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin:0 0 25px 0; }
.board-comment-wrap > h3 > strong { font-size: 23px; font-weight: 700; color:#000; margin:0 20px 0 0; }
.board-comment-wrap > h3 > span { font-size: 14px; font-weight: 400; color:#2A303c; }

.commentForm { width:100%; display:flex; flex-wrap: nowrap; margin:30px 0; padding-bottom:30px; border-bottom:#d9d9d9 1px solid; }
.commentForm.hide { display:none; }
.commentForm.show { display:flex; }
.commentForm > ul {
    width: calc(100% + 20px); margin: 0 -10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.commentForm > ul > li { flex:1 1 auto; margin:0 10px 20px 10px; }
.commentForm > ul > li:last-child { margin-bottom:0; }
.commentForm > ul > li.w100 { flex:1 1 100%; width:100%; }
.commentForm > ul > li.f-row { display:flex; justify-content: flex-end; align-items: flex-end; flex-wrap: wrap; }
.commentForm > ul > li.f-row > * { margin:0 10px; }
.commentForm > ul > li.f-row > *:first-child { margin-left:0; }
.commentForm > ul > li.f-row > *:last-child { margin-right:0; }
.commentForm > ul > li.f-row > label { width:calc(100% - 140px); }
.commentForm > ul > li > label.matter-checkbox { padding-left:20px; font-size:13px; }
.commentForm > ul > li > label.matter-checkbox > input { position:absolute; left:0; }
.commentForm > ul > li > label {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    padding-top: 28px;
}
.commentForm > ul > li > label input[type='text'],
.commentForm > ul > li > label input[type='password'],
.commentForm > ul > li > label textarea {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: #BBC0C9 1px solid;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    transition: border-color 0.3s;
}
.commentForm > ul > li > label input:focus,
.commentForm > ul > li > label textarea:focus { border-color:#431F88; }
.commentForm > ul > li > label textarea { height:50px; padding:11px 15px; }
.commentForm > ul > li > label > span {
    font-size: 14px;
    margin: 0 0 0 0;
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 20px;
    color: #2A303C !important;
    display: flex;
    width: 100%;
    word-break: keep-all;
    white-space: nowrap;
}
.commentForm .btn-submit { height: 45px; line-height: 45px; display:inline-block;  padding:0 20px; font-size:14px; color:#fff; background:#431F88;
    border-radius: 2px; border:0; cursor: pointer; text-align: center; width:120px;
}
.commentForm .btn-submit:disabled { color: #BBC0C9; background-color: #F1F2F3; }

.board-comment-list > h5 { width:100%; font-size: 23px; font-weight: 700; color:#000; margin:0 0 20px 0; }
.board-comment-list > ul > li { position:relative; padding-bottom:20px; margin-bottom:20px; border-bottom:#e3e3e3 1px solid; }
.board-comment-list .comment-content { width:100%; display:flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; font-size: 16px; font-weight: 400; color:#2A303c; }
.board-comment-list .comment-content .co_content { width:100%; font-size: 16px; font-weight: 400; color:#2A303c; }
.board-comment-list .comment-content .co_content a { margin-left: 10px; text-decoration: underline; font-weight: 400; }
.board-comment-list .btn-wrap { width:100%; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin:12px 0 0 0; }
.board-comment-list .btn-wrap > strong { font-size:13px; color:#5C6272; font-weight: 400; width:auto; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.board-comment-list .btn-wrap > strong > span { margin:0 10px; }
.board-comment-list .btn-wrap > div { width:auto; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-left:auto; }
.board-comment-list .btn-wrap button { background:#fff; border:#d9d9d9 1px solid; border-radius: 2px; font-size:12px; display:inline-block; height:24px; line-height: 24px;
    padding:0 7px; margin-left:3px;
}

.edit { min-width: 120px; height: 45px; line-height: 45px; background: #F6F7F8; border-radius: 4px; padding:0 10px; position:relative; margin:0 10px 10px 0; }
.board-comment-list .comment-content .co_content.edit { margin:0 0 10px 0; width:calc(100% - 100px); }
.btn-modify-submit { display:none; }
.board-comment-list .comment-content .co_content.edit + .btn-modify-submit { border-radius: 2px; display:inline-block; height:45px; line-height: 45px;
    padding:0 0; margin-left:20px; width:80px; text-align: center; font-size:13px; color:#fff; background:#431F88; border:0; }

.checkPasswordPop { display:none; }
.checkPasswordPop.show { display:inline-block !important; }

.empty { width:100%; height:100px; line-height: 100px; background:#fff; color:#BBC0C9; font-size:20px; text-align: center; font-weight: 400; }

@media (max-width: 768px) {
    .board-comment-wrap > h3 > span { font-size:12px; margin-top:5px; }
    .commentForm > ul > li.f-row { justify-content: center; }
    .commentForm > ul > li.f-row > label { width:100%; margin:0; }
    .commentForm .btn-submit { width:100%; margin:20px 0 0 0 !important; }
    .board-comment-list .comment-content .co_content a { word-break: break-all; }
}

.indent-box {
    font-size: 11pt;
    font-family: '맑은 고딕';
    color: black;
}

.indent-line {
    padding-left: 6em;
    text-indent: -4.4em;
}

@media screen and (max-width: 768px) {
    .indent-line {
        padding-left: 3em !important;
        text-indent: -2.2em !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
   
    .boardGalleryList{padding-left: 40px; padding-right: 40px;}
}