@charset "utf-8";

p { transform: rotate(0.03deg); }
.wrap .inner { min-height: calc(100vh - 50px); }
.ico { width: 3px; height: 18px; background-color: #002c5f; position: absolute; top: 2px; left: 0; }
#contents { height: auto; padding: 60px 0 60px; }

.board .tit { text-align: center; }
.board .tit .ico {margin: 0 auto; position: static; width: 30px; height: 3px; background-color: #002c5f; display: block; }
.board .tit p { margin-top: 10px; font-weight: 800; color: #002c5f;}
.board .tit .en_tit {font-size: 20px; font-weight: 300; }
.board .tit .ko_tit {font-size: 30px; letter-spacing: 0.3px; }

.board .box { width: calc((100% - 30px) / 2); height: 250px; border: 5px solid #002c5f; background-color: #fff;  box-sizing: border-box;}
.board .box a { display: block; width: 100%; height: 100%; padding: 50px 10%; box-sizing: border-box; transition: all .3s ease-in-out; }
.board .box a span.con_ico { display: inline-block; width: 136px; height: 136px; background:#002c5f url("../img/main/main_ico_new.png")no-repeat 22px 33px; border-radius: 150px; vertical-align: middle; margin-right: 12%; transition: all .3s ease-in-out; }
.board .box.answer a span.con_ico { background: #002c5f url("../img/main/main_ico_new.png")no-repeat right 30px top 33px; transition: all .3s ease-in-out;}
.board .box a span.txt { display: inline-block; width: calc(88% - 140px); color: #002c5f; font-weight: 800; letter-spacing: 7px; vertical-align: middle; transition: all .3s ease-in-out; }
.board .box a span.txt:before { content: ""; display: block; width: 20px; height: 2px; background-color: #002c5f; margin: 0 auto 12px; }
.board .box a span.txt .en { display: block; font-size: 20px; font-weight: 600; letter-spacing: 8px; text-align: center; }
.board .box a span.txt .ko { display: block; font-size: 30px; margin-top: 5px; text-align: center; }

.main.board .cont_wrap { display: flex; justify-content: space-between; }


/*의견하기*/
span.ico { display: inline-block; }
h2 { color: #002c5f; font-weight: 800; font-size: 20px; position: relative; padding-left: 10px; }

.report .table { border-top: 2px solid #251714; margin-top: 16px; }
.report .table .tb_wrap { width: 100%; display: table; }
.report .table .tit,
.report .table .txt { display: table-cell; box-sizing: border-box; vertical-align: middle; border-bottom: 1px solid #ddd; }
.report .table .tit { width: 20%; background-color: #f0f0f0; text-align: right; padding: 10px 2%; font-weight: 600; border-right: 1px solid #ddd; }
.report .table .txt { width: 80%; padding: 10px 7px; background-color: #fff; }
.report .table .txt input { width: 100%; border: 0; transform: rotate(0.03deg); }
.report .table .txt textarea { border: 0; padding: 5px; resize: none; transform: rotate(0.03deg); }
.report .table .txt input:focus,
.report .table .txt textarea:focus { outline: 1px solid #eee; }
.report .table .txt input[type="text"]::placeholder,
.report .table .txt input[type="password"]::placeholder, 
.report .table .txt textarea::placeholder { font-size: 15px; color: #999; }
.report .table .txt label.select-file { display: inline-block; padding: 12px 20px; font: 500 15px / 100% 'HyundaiSansText'; color: #fff; vertical-align: middle; background-color: #251714; cursor: pointer; }
.report .table .txt input[type="file"] { width: 0; height: 0; padding: 0; overflow: hidden; border: 0; position: absolute; }
.report .table .txt label.file-name-txt { display: inline-block; font: 300 15px / 140% 'HyundaiSansText'; color: var(--sub-black); margin-left: 7px; }
.report .table .txt .file-box { transform: rotate(0.03deg); }

.reg_btn {text-align: center; margin-top: 50px;}
.reg_btn a { display: inline-block; width: 150px; height: 50px; background-color: #251714; text-align: center; line-height: 50px; transition: all .3s ease-in-out; color: #fff; font-weight: 600px;}

.ntc { font-size: 14px; color: #002c5f; margin-top: 10px; word-break: keep-all; padding-left: 8px; box-sizing: border-box; position: relative; line-height: 150%;}
.ntc:before { content: "*"; display: inline-block; position: absolute; top: 3px; left: 0; }


/*의견등록완료*/
.finish .chk-wrap { max-width: 720px; margin: 60px auto 20px; border: 1px solid #d7c8ba; }

.finish .txt-box { display: table; width: 100%; }
.finish .txt-box .tit { display: table-cell; width: 30%; padding: 30px 0; background-color: #E2D8CE; color: #251714; border-bottom: 1px solid #d7c8ba; }
.finish .txt-box .tit > span { font: 500 17px/100% 'HyundaiSansHead'; }
.finish .txt-box .txt { display: table-cell; width: 70%; padding: 15px; font-size: 15px; border-bottom: 1px solid #d7c8ba; position: relative; vertical-align: middle; }
.finish .cont_wrap:last-child .txt-box .txt { border-bottom: 0; }
.finish .txt-box .txt span { display: inline-block; width: 100%; text-align: left; }
.finish .txt-box .txt > p { line-height: 135%; }

.finish .txt-box .txt input { width: 100%; border: 0; background: transparent; }
.finish .txt-box .txt input::placeholder { font-size: 15px; color: #777; }
.finish .txt-box .txt input:focus { border-radius: 4px; outline: 1px solid #eee; }

.finish .caution { max-width: 720px; margin: 0 auto; }
.finish .def-btn { width: 100%; max-width: 200px; margin: 40px auto 0; }
.finish .def-btn > button { display: block; width: 100%; padding: 20px; background-color: #251714; color: #fff; font: 700 17px/100% 'HyundaiSansText'; border: 0; border-radius: 0; transition: all 0.3s ease; cursor: pointer; transform: rotate(0.03deg); }


/*답변보기*/
.answer .txt span.num { padding: 8px 10px; }
.answer .txt span.num.num input { width: 100%; border: 0; text-align: center; }
.answer .txt span.num.num input::placeholder { font-size: 15px; }

/* 답변보기 리스트 */
.answer-list th { padding:18px 2px; background-color:#f0f0f0; font-weight:600; border-bottom:1px solid #ddd; }
.answer-list td { padding:18px 2px; border-bottom:1px solid #ddd; text-align: center; vertical-align: middle; }
    table .col-10 { width: 10%; }
    table .col-12 { width: 12%; }
    table .col-15 { width: 15%; }
    table .col-18 { width: 18%; }
    table .col-20 { width: 20%; }
    table .col-25 { width: 25%; }
    table .col-40 { width: 40%; }
    table .list-title { padding-left: 30px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table .list-title span { cursor: pointer; }
    table .list-title span:hover { text-decoration: underline; text-underline-offset: 2px; }
    table .rep-status > p { width:72px; height:28px; border-radius:40px; font:500 14px/28px 'HyundaiSansText'; color:white; transform: rotate(0.03deg); margin:0 auto; }
    table .rep-status .rep-apply { background-color: #002c5f; }
    table .rep-status .rep-ing { background-color: #251714; }
    table .rep-status .rep-cmpl { background-color: #251714; }
    table .view-detail { padding:0px 10px; border: 1px solid #002c5f; background:white; color:#002c5f; cursor: pointer; font:500 14px/24px 'HyundaiSansText'; transform: rotate(0.03deg); transition: 0.3s ease-out; }
    table .view-detail:hover { background:#f0f0f0; }

     /* 팝업 관련 */
     .modal-box { width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.12); position: fixed; z-index: 200; left:0px; top:0px; visibility: hidden; }
     .modal-box.active { visibility: visible; }
     .modal-box-inner { width:96%; padding: 4px; max-width: 850px; background:white; position: fixed; left:50%; top:50%; transform: translate(-50%,-40%); z-index: 200; transition: 0.3s ease-out; box-shadow: 2px 3px 8px rgba(177,204,239,0.4); }
     .modal-box.active .modal-box-inner { transform: translate(-50%,-50%); }
     .modal-box-cont { padding:40px 30px 15px; max-height: calc(100vh - 300px); overflow-y: auto; }
     .modal-box-cont::-webkit-scrollbar { width: 5px; }
     .modal-box-cont::-webkit-scrollbar-thumb { max-height:80%; background-color: #4d332d; border-radius: 7px; }
     .modal-box-cont::-webkit-scrollbar-track { background: #E2D8CE; border-radius: 7px;}
     .modal-box-close { width:48px; height: 48px; position: absolute; right:0px; top:0px; cursor: pointer; text-indent: -9999px; overflow: hidden; z-index: 1; }
     .modal-box-close span { width: 60%; height: 2px; position: absolute; left:50%; top:50%; background: #251714; transform: translate(-50%,-50%) rotate(45deg); }
     .modal-box-close span:last-child { transform: translate(-50%,-50%) rotate(-45deg); }

     .modal-box  div.add_btn_wrap { margin-top: 15px; margin-bottom: 30px; }
     .modal-box  a.add_qus_btn {  transition:none; }
 

/*답변확인*/
h3 { font-size: 18px; font-weight: 600; margin-top: 32px; }

.table .txt .cont { line-height: 150%; padding: 10px; box-sizing: border-box; } 

.file a { display: block; width: 100%; vertical-align: middle; background: url("../img/cmt_ico.png")no-repeat -83px 1px; padding-left: 22px; box-sizing: border-box; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 680px; line-height: 120%; }

.cmt_wrap { margin-top: 16px; border-top: 2px solid #000; }
.cmt_wrap .cmt_box:first-child { margin-top: 0; }
.cmt_wrap .cmt_box { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: -1px; }
.cmt_wrap .cmt_box .cmt { display: table; width: 100%; }
.cmt_wrap .cmt_box .cmt div { display: table-cell; padding: 20px; vertical-align: top; box-sizing: border-box; }
.cmt_wrap .cmt_box .cmt div.icon { width: 20%; text-align: right; border-right: 1px solid #ddd; padding: 15px 20px; }
.cmt_wrap .cmt_box .cmt div.cmt_txt { width: 80%; padding: 0; }
.cmt_wrap .cmt_box .cmt div.cmt_txt p { padding: 20px; box-sizing: border-box; line-height: 150%; word-break: break-all; }
.cmt_wrap .cmt_box .cmt div.icon span { width: 30px; height: 30px; display: inline-block; background: url("../img/ico_profile.png?ver=240805")no-repeat center/ contain; }
.cmt_wrap .cmt_box .cmt div.cmt_txt p.file { border-top: 1px solid #ddd;padding: 10px 20px; }
.cmt_wrap .cmt_box.admin .cmt div.icon span { background: url("../img/ico_admin_profile.png?ver=240805")no-repeat center/ contain; vertical-align: middle; margin-right: 5px; }
.cmt_wrap .cmt_box.admin .cmt div.icon p.pp { display: inline-block; vertical-align: middle; margin-top: 3px; }

.cmt_wrap p.no_cmt { padding: 20px; box-sizing: border-box; border-bottom: 1px solid #ddd; text-align: center; }

.answer-detail .admin-rep { margin-top: 36px; }
.answer-detail .admin-rep .cmt_wrap { border-top: 0; }

.writer-wrap { width: 100%; padding: 25px; text-align: center; background-color: #f5f5f5; margin-bottom: 40px; box-sizing: border-box; position: relative; }
.writer-wrap .writer { line-height: 30px; }
.writer-wrap .writer > span { display: inline-block; margin-right: 3px; font: 500 19px/30px 'HyundaiSansText'; color: #002c5f; padding-left: 36px; position: relative; }
.writer-wrap .writer > span::before { content: ''; display: block; width: 30px; height: 30px; background: url("../img/ico_profile.png?ver=240805")no-repeat center/ contain; position: absolute; left: 0; top: calc(50% - 15px); }
.writer-wrap .rep-status { width: 72px; height: 28px; border-radius: 40px; color: #fff; text-align: center; overflow: hidden; position: absolute; right: 25px; top: 25px; }
.writer-wrap .rep-status > p { font: 500 14px/28px 'HyundaiSansText'; display: none; }
.writer-wrap .rep-status > p.active { display: block; }
.writer-wrap .rep-status > p.rep-apply { background-color: #002c5f; }
.writer-wrap .rep-status > p.rep-ing { background-color: #251714; }
.writer-wrap .rep-status > p.rep-cmpl { background-color: #251714; }


/*문의 답변*/
.add_wrap {padding-top: 80px;}

.add_wrap .cont_wrap { padding-bottom: 100px; position: relative; }
.add_wrap .cont_wrap:after { content: ""; display: block; width: 100%; height: 1px; position: absolute; bottom: 25px; border-top: 2px dotted #555; }
.add_wrap .cont_wrap:last-child { padding-bottom: 0; }
.add_wrap .cont_wrap:last-child:after { display: none; }

.cmt_wrap .cmt_box .cmt div.cmt_txt { position: relative; }
.cmt_wrap .cmt_box .cmt div.cmt_txt > div { display: block; width: 100%; min-height: 120px; padding: 20px 20px 45px; }
.cmt_wrap .cmt_box .cmt div.cmt_txt p.reply-txt { padding: 0; }
.cmt_wrap .cmt_box .cmt div.cmt_txt p.reply-date { padding: 0; position: absolute; left: 20px; bottom: 20px; color: #999; }
.cmt_wrap .cmt_box .cmt div.cmt_txt p.reply-date > span { font-size: 14px; }

div.add_btn_wrap { text-align: center; margin-top: 50px; }
a.add_qus_btn { display: inline-block; width: 150px; height: 50px; line-height: 50px; vertical-align: middle; background-color: #251714; transition: all .3s ease-in-out; color: #fff; text-align: center;}
a.add_qus_btn .ico { display: inline-block; width: 19px; height: 19px;margin-right: 5px; vertical-align: text-top; background: url("../img/main/add_que_ico.png")no-repeat center;}


/* 240724 추가 스타일*/
.board#contents { padding-top: 80px; }

.inform { margin-bottom: 40px; padding: 25px; background-color: #f5f5f5; border: 1px solid #eee; }
.inform .box-tit { font: 400 20px/150% 'HyundaiSansText'; padding-bottom: 25px; } 
.inform .box-tit > span { display: block; line-height: 150%; }
.inform .box-tit > .bold { font-weight: 700; }
.inform .box-txt .txt { display: block; font-size: 16px; padding-left: 10px; margin: 12px 0; position: relative; }
.inform .box-txt .txt b { font-weight: 700; }
.inform .box-txt .txt::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #251714; position: absolute; left: 0; top: calc(50% - 2px); }

.report .inf_box { padding: 0px 20px; }
.report .inf_box p:first-child { margin-top: 20px; }
.report .inf_box .ct { color: #002c5f; }
.report .inf_box .ct:before { background-color: #002c5f; }

.report .table .txt input::placeholder { font-size: 15px; color: #777; }
.report .table_wrap textarea { padding: 12px; font: 400 16px/150% 'HyundaiSansText'; }
.report .table .txt label.file-name-txt { width: 240px; line-height: 39px; padding-left: 10px; background-color: #eee; margin-left: -4px; }
.report .table .txt > div { display: flex; align-items: center; margin-bottom: 10px; }
.report .table .txt > div > p { width: 12%; min-width: 90px; font-size: 14px; font-weight: 700; padding-left: 10px; }

.report .chk_wrap { display: inline-block; }
.report .chk_wrap input[type="checkbox"] { display: inline-block; width: 14px; height: 14px; vertical-align: middle; }
.report .chk_wrap label { vertical-align: middle; }

.report .pu_btn { display: inline-block; padding: 5px 10px; text-align: center; background-color: #ddd; border-radius: 50px; box-sizing: border-box; margin-left: 10px; font-size: 14px; transition: all .3s ease-in-out; vertical-align: middle; }

.caution { margin-top: 30px; }
.caution .title { position: relative; padding-left: 10px; font-weight: 600; transform: rotate(0.03deg);}
.caution .title:before { content: ""; width: 3px; height: 16px; background-color: #251714; position: absolute; left: 0; top: 1px; }
.caution p { position: relative; margin-top: 10px; padding-left: 18px; font-size: 14px; line-height: 150%; }
.caution p:before { content: "※"; position: absolute; top: 0px; left: 0px; display: inline-block; }
.caution p > span { display: block; line-height: 140%; }


/* 개인정보동의 팝업 */
.popup { position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); top: 0; left: 0; display: none; }

.popup .pu_wrap { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); background-color: #fff; height: 50%; width: 60%; }
.popup .pu_wrap .title { font-size: 20px; font-weight: 600px; background-color: #002c5f; color: #fff; text-align: center; padding: 15px 0; }

.popup .cont_wrap { margin: 0; padding: 20px; box-sizing: border-box; height: calc(100% - 92px); overflow: auto; }
.popup .cont_wrap .tit {position: relative; font-weight: 600; padding-left: 17px;}
.popup .cont_wrap .tit:before {width: 10px; height: 10px; content: ""; background-color: #251714; top: 6px; left: 0; position: absolute; display: inline-block;}
.popup .cont_wrap p {margin-top: 20px;}
.popup .cont_wrap ul {margin-top: 20px;}
.popup .cont_wrap ul li {margin-top: 10px; position: relative; padding-left: 15px;}
.popup .cont_wrap ul li:before {width: 5px; height: 5px; content: ""; border: 1px solid #251714; border-radius: 15px; top:4px; left: 0; position: absolute;}
.popup .cont_wrap ul li:first-child{margin-top: 0;}
.popup .cont_wrap .cont {margin-top: 30px;}
.popup .cont_wrap .cont:first-child {margin-top: 0;}

.popup .cls_btn {position: fixed; bottom: 0;left: 0; width: 100%; padding: 10px; box-sizing: border-box; background-color: #f5f5f5; text-align: right;}
.popup .cls_btn a {display: inline-block; }
.popup .cls_btn a span {width: 14px; font-size: 12px; height: 14px; display: inline-block; margin-right: 5px; border: 1px solid #251714; text-align: center; line-height: 14px; vertical-align: middle;}



@media (hover: hover){
    .board .box a:hover { background-color: #002c5f; }
    .board .box a:hover .txt { color: #fff; }
    .board .box a:hover .txt:before { background-color: #fff; }

    .reg_btn a:hover { background-color: #251714; }
    .def-btn > button:hover { background-color: #251714; }
    a.add_qus_btn:hover { background-color: #251714; } 

    .file a:hover {text-decoration: underline; }

    .board .box a:hover .con_ico { background: #fff url("/resources/img/main/main_ico_new.png")no-repeat left 22px bottom 33px; }
    .board .box.answer a:hover .con_ico { background: #fff url("/resources/img/main/main_ico_new.png")no-repeat right 30px bottom 33px; }

    .report .pu_btn:hover { opacity: .8; }
}

@media screen and (max-width: 1200px){
    .answer-list th { transform: rotate(0.03deg); }
}
@media screen and (max-width: 1024px){
    .board .box { height: auto; }
    .board .box a span.con_ico { display: block; margin: 0 auto; }
    .board .box a span.txt { display: block; width: 100%; text-align: center; margin-top: 24px; }
    
    .report .table .txt.email .inp_wrap {width: 69%;}
    .report .table .txt.email input {width: 46.5%;}
    .report .table .txt.email select {width: 30%; float: right;}
    
    .file a {max-width: 510px;}
    
    .popup .pu_wrap {width: 80%;}

    .inform .box-tit { line-height: 135%; }
    .inform .box-txt .txt { line-height: 125%; }
    .inform .box-txt .txt::after { top: 6px; }
}

@media screen and (max-width: 768px) {
    #contents  { padding: 40px 0; }
    .report .table { border-top: 0; }
    .report .table .tb_wrap { display: block; }
    .report .table .tit { display: block; width: 100%; border: 0; text-align: left; border-right: none; background: transparent; margin-top: 8px; transform: rotate(0.03deg); }
    .report .table .txt { display: block; width: 100%; border: 0; padding: 5px; margin-top: 5px; margin-bottom: 20px; }
    .report .table .txt label.select-file { position: relative; top: -1px; }

    .file a {max-width: 100%; width: 100%;} 
    
    .report .inf_box {padding: 0px;}
    .report .table_wrap textarea { font-size: 15px; }

    .board .box { width: calc((100% - 16px) / 2) }
    .board .box a span.con_ico { width: 120px; height: 120px; background-size: 560px; }
    .board .box.answer a span.con_ico { background: #002c5f url('../img/main/main_ico_new.png') no-repeat -471px 33px/560px; }
    .board .box a span.txt .en { font-size: 18px; }
    .board .box a span.txt .ko { font-size: 24px; }

    .inform .box-tit { font-size: 19px; }

    
    .answer-detail .rep_wrap h2 { padding-bottom: 15px; border-bottom: 1px solid #002c5f; }
    .answer-detail.report .table .tit { background-color: #e0e0e0; padding: 12px; }
    .answer-detail .rep_wrap { padding: 20px 10px; background-color: #f0f0f0; }
    .answer-detail .cmt_wrap .cmt_box .cmt { display: block; }
    .answer-detail .cmt_wrap .cmt_box .cmt div.icon { display: block; width: 100%; background-color: #002c5f; color: #fff; text-align: left; }
    .cmt_wrap .cmt_box.admin .cmt div.icon span { }
    .answer-detail .cmt_wrap .cmt_box .cmt div.cmt_txt { display: block; width: 100%; background-color: #fff; }
    /* .answer-detail .admin-rep { width: 95%; margin-left: 5%; } */

    table .mob-none { display: none; }
    
}

@media screen and (max-width: 650px){
    .report .table .txt.email input {width: 46%;}
    
    .writer-wrap .rep-status { position: static; margin: 15px auto 0; }
}
@media screen and (max-width: 500px){
    .board .tit .ko_tit { font-size: 22px; }
    .board .box { float: none; width: 100%; }
    .board .box a { padding: 30px 0; }
    
    footer p { font-size: 12px; }
    
    .report .table { margin-top: 12px; }
    .report .table .txt > div { display: block; }
    .report .table .txt > div > p { padding: 12px 0 12px 10px; margin-top: 5px; }

    .report .table .txt label.file-name-txt { width: calc(100% - 110px); margin-left: -2px; }

    .report .table .txt.email .inp_wrap { width: 100%; }
    .report .table .txt.email select { float: none; width: 100%; margin-top: 10px; } 
    
    .report .table .txt.email input { width: 47%; float: left; }
    .report .table .txt.email input.email_b { float: right; }
    .report .table .txt.email .inp_wrap span { display: inline-block; width: 6%; vertical-align: sub; text-align: center; }
    
    .cmt_wrap { margin-top: 12px; }
    .cmt_wrap .cmt_box .cmt div.icon { text-align: center; }

    .finish .chk-wrap { margin: 40px auto 20px; }
    .finish .txt-box { display: block; width: 100%; box-sizing: border-box; }
    .finish .txt-box .tit,
    .finish .txt-box .txt { display: block; width: 100%; padding: 20px; box-sizing: border-box; }
    
    .finish.answer .txt-box .tit { text-align: left; font-weight: 500; }
    .finish.answer .txt-box .txt { border: 0; padding: 10px; }

    div.add_btn_wrap { text-align: center; }

    .board#contents { padding-top: 30px; }
    .inform { margin-bottom: 30px; padding: 20px }
    .inform .box-tit { font-size: 18px; padding-bottom: 15px; }

    .main.board .cont_wrap { flex-direction: column; gap: 8px 0; }
    .board .box a { display: flex; justify-content: space-around; align-items: center; gap: 0 20px; padding: 36px; }
    .board .box a span.con_ico { width: 96px; height: 96px; margin: 0; background: #002c5f url('../img/main/main_ico_new.png') no-repeat 16px 25px/460px; }
    .board .box.answer a span.con_ico { background: #002c5f url('../img/main/main_ico_new.png') no-repeat -387px 27px / 460px; }
    .board .box a span.txt { width: calc(100% - 116px); margin-top: 0; }

    table .rep-status > p { width: 64px; height:24px; font-size: 13px; line-height: 24px; }

    .modal-box-cont { padding:40px 10px 15px; }
    .modal-box div.add_btn_wrap { margin-bottom: 20px; }
    .modal-box a.add_qus_btn { line-height: 40px; height:40px; width: 100px; }

    .inform .box-tit > span { display: inline; }
}