@charset "utf-8";
/* font */
@font-face { font-family:'Pretendard'; font-weight:700; font-display:block; src:local('Pretendard Bold'),url(../font/Pretendard-Bold.woff) format('woff'),url(../font/Pretendard-Bold.woff2) format('woff2'), url(../font/Pretendard-Bold.ttf) format('ttf'); }
@font-face { font-family:'Pretendard'; font-weight:500; font-display:block; src:local('Pretendard Medium'), url(../font/Pretendard-Medium.woff) format('woff'),url(../font/Pretendard-Medium.woff2) format('woff2') url(../font/Pretendard-Medium.ttf) format('ttf'); }
@font-face { font-family:'Pretendard'; font-weight:400; font-display:block; src:local('Pretendard Regular'), url(../font/Pretendard-Regular.woff) format('woff'),url(../font/Pretendard-Regular.woff2) format('woff2'), url(../font/Pretendard-Regular.ttf) format('ttf'); }

/* common */
* { font-family:'Pretendard'!important; box-sizing:border-box; }
/* :root{ font-size:10px;} */
*::before,
*::after { box-sizing:border-box; }
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6,
p, pre, a, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, summary, tbody, tfoot, thead, tr, th, td,
article, aside, section, canvas, details, figure, figcaption, footer, header, hgroup,
b, u, i, mark, time, em { padding:0; margin:0; border:0; font-size:100%; font-family: 'pretendard', 'sans-serif';  }
:is(html,body) { width:100%;  font-family:'Pretendard'!important; font-size:14px;line-height:1.2; color:#666;font-weight: 500; position:relative;}
a { display:inline-block; text-decoration:none; }
ul, ol { list-style-type:none; padding:0; margin:0; }
img { display:inline-block; vertical-align:middle; width: 100% !important; display:block;}
button{border: 0;  background-color: unset; padding:0; margin:0;}
iframe {overflow: hidden!important;}

/* layout */
.wrap{min-height: 100%;}
.contents{padding-top: calc(50px + env(safe-area-inset-top));  padding-bottom: calc(20px + 20px);}
.header{ position: fixed; top:0; left:0; background-color: #fff; display: flex; z-index: 20; width: 100%; height: calc(50px + env(safe-area-inset-top)); -webkit-box-align: center;align-items: center; justify-content:center; padding: calc(env(safe-area-inset-top)) 0 0; padding:10px 24px;}
/* .header.fixed{position: fixed;top:0; left:0;} */
.bg{background-color:#f0f4f8;}
.header .btn_back{position: absolute;top:14px; left:24px; width: 24px; height: 24px; background-image: url(../../pub_m/img/btn_header_back.svg); background-repeat: no-repeat; background-size:24px;}
.header .close{position: absolute; top: 12px; right:24px;font-size: 0; background: url(../img/icon_24_close.svg) no-repeat; background-size: 24px; width: 24px; height: 24px;}
.header .header_title{font-weight: 600; color:#000; font-size: 14px; flex: 2;text-align: center; padding: 0 24px;}
.header .btn_right{position: absolute; top: 14px; right: 24px;width:auto; height: 24px;font-size:12px; color:#d8dfde;font-weight: 500;}
.header .btn_right.active{color:#666;}
.inner{padding:0 24px;}
.footer {position:relative;width:100%;}
.footer.fixed{position: fixed; padding:0 24px; width: 100%; bottom: 34px;}
button.btn_top {position:fixed;right:24px;bottom:30px;width:76px;height:76px; font-size: 0; visibility: hidden; background: url(../img/icon_topbutton.svg); background-size: 76px; }
button.btn_top.active {visibility: visible; z-index: 20;}

/* 정렬 */
.flex{display: flex; justify-content: flex-start; align-items: center;}
.flex1{flex:1;}
.flex2{flex:2;}

/* 컬러 */
.color000{color:#000!important;} 
.color444{color:#444!important;}
.colortypeA{color: #6178f6!important;}
.colortypeB{color: #009178!important;}
.colortypeC{color:#ddd!important;}

/* margin */
.mt24{margin-top:24px!important;}
.mt40{margin-top: 40px!important;}
.ml0{margin-left:0!important;}
.mb0{margin-bottom: 0!important;}
.mb12{margin-bottom: 12px!important;}
/* padding */
.pt0{padding-top: 0!important;}
.pt74{padding-top:74px!important;}
.pb24{padding-bottom: 24px!important;}

/* button */
.btn_wrap{display:flex;width:100%; gap:10px;}
.btn{z-index: 20; cursor: pointer;width:100%;height:52px;padding:12px 16px;text-align: center; border-radius: 6px; background-color: #fff; color:#fff;font-size:16px;transition:all .5s; font-weight: 600;}
.btn.btn_typeA{background-color:#009178;}
.btn.btn_typeB{background-color:#66706f;}
.btn.btn_line{border:1px solid #444; color:#444;}
.btn:disabled{background-color:#d8dfde; color:#788482;}

/* badge */
.badge{background-color:#e5f3f1; color:#277b6f; font-size:10px; padding:4px 6px; font-weight: 700; display: inline-block; border-radius: 2px;}
.badge.typeA{background-color: #f0ecfa; color: #7b5bc5;}
.badge.typeB{background-color: #e4f0ff; color: #4b89d7;}
.badge.typeC{background-color: #ddfcc9; color: #5f973b;}
.badge.typeD{background-color: #fff7d4; color: #ffb41d;}
.badge.typeE{background-color: #faecf9; color: #c447bb;}
.badge.typeF{background-color: #ffebeb; color: #f75757;}
.badge.typeG{background-color: #f5fcc9; color: #97ad0d;}
.badge.typeH{background-color: #fff2e9; color: #ff9347;}
.badge.typeI{background-color: #fffbda; color: #ff9347;}
.badge.typeJ{background-color: #e5e5e5; color: #888;}
.badge.line{border:1px solid #009178; color: #009178; background-color: #fff;}
/* hightchart */
.highcharts-data-table table {font-family: Verdana, sans-serif;border-collapse: collapse;border: 1px solid #ebebeb;margin: 10px auto;text-align: center;width: 100%;max-width: 500px;}
.highcharts-data-table caption {padding: 1px 0;font-size: 12px;color: #555;}
.highcharts-data-table th {font-weight: 600;padding:5px;}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {padding: 5px}
.highcharts-data-table thead tr,.highcharts-data-table tr:nth-child(even) {background: #f8f8f8;}
.highcharts-data-table tr:hover{background: #f1f7ff;}
.highcharts-description {margin: 3px 10px;}
.highcharts-title, .highcharts-subtitle {display:none;}
.highcharts-credits {color:#fff !important}
.highcharts-label {stroke-opacity: 0;}
.chart_area {position: relative;}

/* form */
/* input */
.inp_wrap{position: relative; display: flex; justify-content: center; align-items: center;}
.inp{width:100%;height:52px;font-weight: 500; padding:0 16px;border:1px solid #ddd;border-radius:8px;color:#000;background-color:#fff;}
.inp:disabled,
.inp[disabled],
.inp[readonly]{color:#eaeaea;background-color:#b2b8b7;}
.inp:focus{outline:0;border:1px solid #009178;}
.inp::placeholder {color: #888;font-weight: 500;}
.inp:value{color:#222; font-weight: 500;}
.btn.delete{background-image: url(../img/icon_delete.svg); background-repeat: no-repeat; background-size:24px;width:24px; height:24px;padding:0;}
.inp_wrap.togle .inp{padding-right: 4px;}
.inp_wrap.togle .btn.delete{position: absolute; top:15px;  right: 16px; }
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none; appearance: none; display: none; opacity: 0;}


/* select */
.select_wrap{position: relative; padding-right:12px; font-size: 12px;}
.select_wrap::after{position: absolute; top:0; right:0; width:1px; height: 100%; background-color:#e5e5e5; content:'';}

/* checkbox */
.inp_chk_wrap { position:relative; display:inline-block; vertical-align:middle; }
.inp_chk_wrap + .inp_chk_wrap { margin-left:12px; }
.inp_chk_wrap .inp_chk { overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; border:0; clip:rect(0 0 0 0); clip-path:polygon(0 0, 0 0, 0 0); background:none; }
.inp_chk_wrap .inp_chk:checked + .inp_label::before { background-image:url(../img/icon_chk_checked.svg); }
.inp_chk_wrap .inp_label { position:relative; display:block; padding-left:28px; line-height:21px; font-weight: 600; color:#444;}
.inp_chk_wrap .inp_label::before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background-image:url(../img/icon_chk.svg); background-position:0 0; background-repeat:no-repeat; background-size:20px; transition:all .2s; }
.inp_chk_wrap .inp_chk:disabled + .inp_label { color:#888; cursor:default; }
.inp_chk_wrap .inp_chk:disabled + .inp_label::before { background-image:url(../img/icon_chk_checked_disabled.svg); cursor:default; }
.inp_chk_wrap .inp_chk:checked:disabled + .inp_label { color:#888; }
.inp_chk_wrap .inp_chk:checked:disabled + .inp_label::before { background-image:url(../img/icon_chk_checked_disabled.svg); }

/* radio */
.inp_rdo_wrap { position:relative; display:inline-block; vertical-align:middle; }
.inp_rdo_wrap .inp_rdo { overflow:hidden; position:absolute; width:1px; height:1px; margin:-1px; border:0; clip:rect(0 0 0 0); clip-path:polygon(0 0, 0 0, 0 0); background:none; }
.inp_rdo_wrap .inp_rdo:checked + .inp_label::before { background-image:url(../img/icon_rdo_checked.svg); }
.inp_rdo_wrap .inp_label { position:relative; display:block; padding-left:26px; line-height:21px; font-weight: 600; color:#444; }
.inp_rdo_wrap .inp_label::before { content:''; position:absolute; top:0; left:0; width:20px; height:20px; background-image:url(../img/icon_rdo.svg); background-position:0 0; background-repeat:no-repeat; background-size:20px; transition:all .2s; }
.inp_rdo_wrap .inp_rdo:disabled + .inp_label { color:#888; cursor:default; }
.inp_rdo_wrap .inp_rdo:disabled + .inp_label::before { background-image:url(../img/icon_rdo_disabled.svg); cursor:default;  } 
.inp_rdo_wrap .inp_rdo:checked:disabled + .inp_label { color:#888; }
.inp_rdo_wrap .inp_rdo:checked:disabled + .inp_label::before { background-image:url(../img/icon_rdo_checked_disabled.svg); }

/* loading */
/* loading */
.loading_wrap {position:fixed;left:0;top:0;z-index:21;width:100%;height:100%;}
.loading_wrap::before {display:block;content: '';clear: both;position:absolute;left:0;top:0;width:100%;height:100%;background-color: #000;opacity:0.6;}
.loading {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); width: 120px; height: 120px;}
.loading_wrap.suv{position:sticky; }
.loading_wrap.suv::before{border-radius: 0 16px 0 0;}

/* switch */
.switch_area{display: flex;}
.switch input[type="checkbox"]:not(.terms_layout input){ opacity: 0;}
.switch_area .label_tit { color: #666;  margin-right:8px;line-height: 24px; font-size:12px;}
.switch { width: 44px; height:24px; position: relative;}
.switch .switch_toggle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color:#d8dfde; -webkit-transition: .4s; transition: .4s; border-radius: 20px;}
.switch .switch_toggle:before { position: absolute; width: 16px; height:16px; top: 4px; left: 4px; box-shadow: none; background-color: #fff; transition: .4s;border-radius: 50%; content: "";}
.switch input:checked + .switch_toggle {background-color: #009178;}
.switch input:checked + .switch_toggle:before { -webkit-transform: translateX(20px); transform: translateX(20px);}

/* 검색결과가 없을때 */
.nodata{display: flex;justify-content: center;align-items: center;height: 100vh; padding-top:0!important; padding:0;}
.no_data{text-align: center; padding-top: 164px;}
.no_data.typeA{background:url(../img/icon_none_typeA_70.svg)no-repeat center top; background-size: 70px;padding-top:86px; }/* 접근금지,설문 */
.no_data.typeB{background:url(../img/icon_none_typeB_70.svg)no-repeat center top; background-size: 70px;padding-top:86px; }/* 하나클럽상세 */
.no_data.typeC{background:url(../img/icon_none_typeC_70.svg)no-repeat center top; background-size: 70px;padding-top:86px; }/* 명함 */
:is(.no_data > p){font-size: 12px; color:#222; font-weight: 600;}
.no_data .tit{color:#222;}
.no_data .tt{ color:#888; margin-top: 6px; font-weight: 500; line-height: 18px;}

/* popup */
.modal_wrap{position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: none; opacity: 0;  transition: opacity 0.3s ease-in-out;}
.modal_wrap::before{display: block; background-color: rgba(0,0,0,0.6); width: 100%; height: 100%; content: '';}
.modal_wrap.active{opacity: 1; }
.madal_header{margin: 15px 0 9px; height: 40px;justify-content: flex-start; align-items: center; gap: 4px;}
.modal_header_title{font-size: 16px; line-height: 24px; color:#000; font-weight: 700;}
.madal_header .link_tit{margin-left:auto; font-size:12px;color: #666; line-height: 24px; text-decoration: underline;}
.madal_header .cont{margin-left:auto; font-size:12px; color:#888; font-weight: 500;}
.modal_container{padding: 0 24px 24px;position: fixed;bottom: 0;left: 50%; width: 100%; background-color: #fff; z-index: 1000;min-height: auto; border-radius: 16px 16px 0 0;transform: translate(-50%, 100%);transition: transform 0.3s ease-in-out;}
.modal_wrap.active .modal_container { transform: translate(-50%, 0);}
.modal_container.typeA{padding:0 24px 24px;}
.modal_contents{margin-bottom: 76px;}
.modal_contents.h300{min-height: 300px; max-height: 315px; overflow-y: scroll; margin-bottom: 12px;}
.modal_contents .modal_txt{font-size: 12px; color:#888; margin-top: 12px;}
.list_chk > li{border: 1px solid #ddd; padding:17px 16px; border-radius:8px;margin-bottom:12px;position: relative;}
.list_chk > li > button{font-size:14px; color:#666;}
.list_chk > li.active{background-color: #f7fffe;border: 1px solid #009178; background-image: url(../img/icon_chk_active.svg); background-repeat: no-repeat; background-size: 24px; background-position: center right 16px;}
.list_chk > li.active .btn_list{color:#009178; font-weight: 600;}
.list_chk > li:last-child{margin-bottom: 0;}
.modal_btn_close{position: absolute; top: 0; right: 0; width: 50px; height:50px;}
.modal_footer{position: fixed; bottom: 0; left:0; width: 100%; height:76px; padding:0 24px 0; background-color:#fff;}
/* popup pull */
.modal_pull .modal_container.pull{padding:0; top: 0;right: 0;left: 0;border-radius: 0; width: 100%; height: 100%; transform: none; overflow-y: auto;}
.modal_pull .modal_container.pull .madal_header{z-index: 1;background-color: #fff; position: fixed;top: 0;width: 100%;height: 50px;margin: 0;text-align: center;display: flex; justify-content: center;}
.modal_container.pull .madal_header .popup_close{position: absolute; top: 12px; right:24px;font-size: 0; background: url(../img/icon_24_close.svg) no-repeat; background-size: 24px; width: 24px; height: 24px;}
.modal_pull .modal_container.pull .modal_contents{padding-top: 50px;}

/* layer popup */
.modal_container.layer{text-align: center; padding:30px 16px 16px;top: 50%; right: 24px; left: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 16px; width: auto; height: max-content;}
.modal_wrap.active .modal_container.layer{transform: translate(0, -50%);}
.modal_container.layer .madal_header{height: auto; margin: 0;}
.modal_container.layer .modal_contents{margin:10px 0 0;}
.modal_container.layer .modal_contents > p{font-size:14px; color: #444; line-height:21px;}
.modal_container.layer .modal_footer{display:flex;gap:8px;padding:28px 0 0; height: auto; position: revert;}
.modal_container.layer .modal_footer .Btn{height:44px}
/* toast popup */
.toast_wrap { position: fixed;bottom:24px; left:24px; right:24px;height: 52px; padding: 15px 0;font-weight: 600; border-radius: 8px; background-color: rgba(0, 0, 0, .8); text-align: center; opacity: 0; transition: all .2s;  z-index: 1;}
.toast_wrap .txt {font-size:14px; line-height: 21px; font-weight: 600; color: #fff;}
.toast_wrap.active {bottom:50px; opacity: 1;}
/* text popup */
.text_popup{position: absolute; top:50px;left:0; width: 100%; padding:12px 24px; height: 60px; background-color:#1d222a;color:#fff;}
.text_popup .flex{position: relative;}
.text_popup > p{color:#e5e5e5;line-height: 18px; font-size: 12px;}
.text_popup > a,.text_popup .link{color:#bbb; text-decoration: underline;line-height: 18px; font-size: 12px;position: absolute; top:0; right: 0;}
.text_popup .link.initial{position: initial; color:#bbb; text-decoration: underline;line-height: 18px; font-size: 12px;}
.text_popup .popup_btn_close{background-image:url(../img/icon_popup_close.svg); background-repeat: no-repeat;position: absolute; top: 12px; right: 12px; background-size:20px; background-position: center top; width: 20px; height: 20px;}
.text_popup.language{z-index: 10; position: fixed;display: none; padding:16px 24px 12px; height: 50px; }
.text_popup.language .lang{ font-size:12px; font-weight: 500; color:#fff; padding:0 14px; position: relative; background-image: url(../img/icon_select_small.svg); background-repeat: no-repeat; background-size: 12px; background-position: center right;}
.text_popup.language .lang::after{position: absolute; top:1px; left:0; width: 12px; height: 12px; background-image: url(../img/icon_lang.svg); background-repeat: no-repeat; background-size: 12px; content: '';} 
.text_popup.language .tit{color:#bbb; margin-bottom: 0; padding:0 20px; position: relative;}
.text_popup.language .tit::after{position: absolute; top:4px; left:10px; width:1px; height:10px; background-color: #666; content: ''; }
.text_popup.language .popup_btn_close{position: static; margin-left: auto;}

/* summernote */
.note-editor .note-toolbar, .note-popover .popover-content{padding: 0 0 5px 15px !important;display: flex; align-content: center; justify-content: flex-start;gap:5px; z-index: 20;}
.note-btn-group{display:flex; gap:5px;}
.note-btn-group.note-color{gap:0;}
.note-fontsize,.note-current-color-button{margin-left:-1px !important;}
.dropdown-toggle{margin-right:-1px;}
/* .note-editor.note-frame .note-editing-area .note-editable {padding:0!important;} */
.note-btn{width:34px;height: 34px;}
.btn-primary{width: auto !important; line-height: 10px;}
.note-btn-primary { background-color: #009178;}
.note-btn-primary:disabled{background-color:#d8dfde;}
.dropdown-toggle{width: 55px;}
.note-fontsize{margin-right:0!important;}
.note-icon-font.note-recent-color{background-color: rgb(255, 255, 0);}
.note-statusbar{display: none;}
@media screen and (max-width: 375px) {
  .note-btn{width:32px;height: 32px;}
  .dropdown-toggle{width: 50px;}
}
.note-editor.note-frame .note-placeholder, .note-editor.note-airframe .note-placeholder{padding:24px;}
.note-editor.note-frame .note-editing-area .note-editable{padding:0!important;}

/* 하나클럽 MOB-CLB-716.html */
.push_notice{height: 60px;display:flex;align-items: center; justify-content:space-between;padding: 18px 24px; background-color: #f5f5f5;}
.select{color:#444;font-weight: 600;background-image: url(../img/icon_select.svg);background-repeat: no-repeat; background-size:16px;padding-right: 18px; background-position: center right; }
.push_notice .switch_area{margin-left: auto;}
.tag_wrap{position: fixed; left:0; bottom:0;width: 100%; height:68px; padding:13px 24px; border-top: 1px solid #e5e5e5;background-color: #fff;}
.tag_wrap .tag_title{font-size:12px; color:#000; font-weight: 600; margin-right: 4px;}
.tag{width: 18px; height: 18px;line-height: 18px; text-align: center; background-color: #009178; border-radius: 18px; color:#fff;font-size: 12px;}
.tag.typeA{padding:0 8px; width: auto;}
.tag_inp_wrap .input_wrap{margin:0 -24px; border-bottom:1px solid #009178;}
.tag_inp_wrap .input_wrap .tag_tt{padding-left: 24px;}
.tag_inp_wrap .input_wrap .inp.typeA{border:0;padding:0 8px 0 4px;flex: 2; height:54px; font-weight: 500;}
.tag_inp_wrap .input_wrap .btn.delete{background-image: url(../img/icon_delete.svg); background-repeat: no-repeat; background-size:24px;width: 24px; height: 24px;margin-right: 18px;}
.tag_inp_wrap .input_wrap .btn_sign{font-size:12px; color:#009178;text-decoration: underline;padding-right:24px; font-weight: 500;}
.tag_list_wrap{min-height: 112px;}
.tag_list_wrap .tag_list{margin:12px -5px; font-size: 0;}
.tag_list .typeA{width: auto; height: auto; background-image:url(../img/icon_popup_close.svg); background-repeat: no-repeat;font-weight: 700; background-size:16px; background-position:center right 12px; color:#666; margin:7px 5px; border:1px solid #ddd; padding:10px 36px 10px 16px; font-size:12px;display:inline-block; border-radius:30px;}

/* 하나클럽 MOB-CLB-718.html */
.cont_view_tit{margin:24px 0 16px;padding: 0 24px 16px;  border-bottom: 1px solid #e5e5e5; position: relative;}
.cont_view_tit .img{position: absolute; top: 0; left: 24px;width:36px; height:36px; }
.cont_view_tit .img > img{width:36px; height:36px;border-radius:36px; }
.cont_view_tit .title{font-size: 16px; color:#000; font-weight: 700; margin:8px 0; line-height: 24px;}
.cont_view_tit .status_info{font-size: 0;}
.cont_view_tit .status_info span{font-weight: 600; color:#888; font-size: 12px;padding-right:16px;position: relative;}
.cont_view_tit .status_info span:after{position: absolute; top: 2px;left: -8px; width: 1px; height: 10px;background-color: #e5e5e5; content: '';}
.cont_view_tit .status_info span:first-child:after{background-color: #fff;}
.cont_view_tit .status_info span.day{color:#009178;}
.cont_view_tit .btn_more{position: absolute; top: 0; right: 24px;margin-left:auto; width:36px;height:36px; background-image:url(../img/icon_more.svg); background-repeat: no-repeat; background-position: center right; background-size:36px;}
.cont_view_tit.typeA{ display: table; width: 100%;}
.cont_view_tit.typeA .img{vertical-align: top !important;}
.cont_view_tit.typeA .img,.cont_view_tit.typeA .view_text{display: table-cell; vertical-align: middle;position: static;}
.cont_view_tit.typeA .title{padding:0 18px 0 12px; margin:0 0 2px 0; font-size:14px; line-height:21px; color:#009178;} 
.cont_view_tit.typeA .status_info{padding-left:12px;}
.cont_view_tit.typeB .title{padding-right: 18px;}
.cont_view_tit.typeB .btn_more{top: 25px;}
.tag_view{margin:-5px;}
.tag_view > a{display:inline-block; margin: 5px;font-size: 12px; color: #666;font-weight: 600; }
.tag_view.typeA > a{background-color:#e5f3f1; color:#277b6f;padding:5px 10px; border-radius:4px;}

/* 하나공지 MOB-NTC-020.html */
.btn_util{display:flex; align-items: center; justify-content: flex-start; gap:10px;}
.btn_util .btn{border-radius: 34px;color: #000;width:34px;height:34px; border:1px solid #ddd;background-color:#fff; font-size: 0; z-index: 1;}
.btn_util .btn.language{background: url(../img/btn_language.svg) no-repeat; background-size:16px; background-position: center center;}
.btn_util .btn.language.active{background: url(../img/btn_language_active.svg) no-repeat; background-size:16px; background-position: center center; }
.btn_util .btn.share{background: url(../img/btn_share.svg) no-repeat; background-size:16px; background-position: center center;}
.btn_util .btn.bookmark{background: url(../img/btn_bookmark.svg) no-repeat; background-size:16px; background-position: center center;}
.btn_util .btn.bookmark.active{background: url(../img/btn_bookmark_active.svg) no-repeat; background-size:16px; background-position: center center;}
.file_viwe_wrap{margin: 24px 0;}
.file_viwe{background-color: #f5f5f5;padding:13px 16px; border-radius: 4px;margin-top: 12px;}
.file_viwe:first-child{margin-top: 0;}
.file_viwe .btn_file{padding-left:20px;position: relative;display: flex;}
.file_viwe .btn_file .ellipsis{overflow:hidden; text-overflow:ellipsis; word-break:break-word; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; width:100%; }
.file_viwe .btn_file::before{position: absolute; top:-1px; left:0; width: 18px; height: 18px; background-image: url(../img/icon_flie.svg); background-repeat: no-repeat; background-size: 18px; content: '';}
:is(.file_viwe .btn_file > p){font-size:12px; color:#666;text-decoration: underline; }

/* 하나쉼터 MOB-CLB-870.html */
.division .flex{border-bottom: 1px solid #f5f5f5; padding:11px 24px; gap:4px;}
.division .title{font-size: 12px; margin-right: 20px; color:#444; font-weight: 700;}
.division .btn.line{border:1px solid #ddd; border-radius: 100px; padding:9px 10px; text-align: center; font-size:12px; color:#666; font-weight: 600;height:36px;width:60px;}
.division .btn.line.active{border:1px solid #009178; color:#009178;}
.inp_custom{padding:18px 24px; height: 60px; position: relative;}
.inp_custom .inp{border:0; height: 20px;padding: 0;}
.custom_placeholder {position: absolute; left: 24px; top: 50%; transform: translateY(-50%);pointer-events: none; font-size:14px; color: #888; font-weight: 500;}
.custom_placeholder .required {color: #009178;}

/* 미션비전핵심가치 MOB-MVN-010.html */
.mvn_view{border-top:8px solid #f5f5f5;}
.mvn_view > img{width: 100%; height: 100%; object-fit: cover;}

/* 모바일리플렛 MOB-LFT-020.html */
.push_notice.version{background-color:#fff; height:40px; padding:0;}
.share_wrap .share_tit{display: inline-block; font-size: 12px; color:#888;margin-right:12px; font-weight: 500;}
.m_card{border:1px solid #1d222a; border-radius: 8px;  padding:16px;display: flex; align-items: center; gap:12px}
.m_card .img > img{width:36px!important; height:36px;}
.m_card .title{font-size: 0;}
.m_card .title > span{font-size:12px; color:#444; padding-right: 16px; position: relative; font-weight: 600;line-height: 18px;}
.m_card .title > span::before{position: absolute;top:2px; left:-8px; background-color:#e5e5e5; width: 1px; height: 10px; content: '';}
.m_card .title > span:first-child:before{background-color:#fff;}
.m_card .title .last_tt{margin-top: 4px; display: block;}
.m_card .title .last_tt::before{background-color:#fff;}

/* 알림메세지함 MOB-NTM-020.html */
.view_cont{margin-bottom: 40px;}

/* 알기쉬운청탁금지법 MOB-CMP-010.html */
.tab_list{height: 44px; display:flex; padding:10px 24px;border-bottom: 1px solid #ddd;}
.tab_list .tab > a{margin-right:28px; color:#666; font-weight: 500;}
.tab_list .tab.active > a{color:#222; font-weight: 700; position: relative;}
.tab_list .tab.active > a::before{position: absolute;bottom:-18px; left:0;right: 0; background-color: #222; width: 100%; height: 2px; content: '';}
.tab_cont_item{display: none;}
.tab_cont_item.active{display: block;}
.title_bg{padding:24px 0; text-align: center; background-color:#f5f5f5;}
.title_bg .bold{font-size:16px; color:#222;font-weight: 600; line-height: 24px;}
.title_bg .middle{margin:8px 0 6px;font-weight: 500; color: #444; }
.title_bg .small{font-size:12px; font-weight: 500;}
.section{margin-top:30px;}
.section + .section{margin-top:40px;}
.section .tit{color:#009178; font-weight: 700;}
.disc{list-style-type: disc; padding-left: 20px; margin-top: 16px;}
.disc > li:first-child{margin-top:0;}
.disc > li{color:#000; line-height: 21px; margin-top: 16px; font-weight: 600;word-break: keep-all;}
.disc.mt4{margin-top: 8px;}
.disc.mt4 > li{margin-top: 4px;}
.bg_area{background-color:#f5f5f5; padding:16px 24px; margin-top: 16px;}
.bg_area .list + .list{margin-top: 6px;}
.bg_area > p{color:#444; line-height: 21px; word-break: keep-all;}
.bg_area .list .tt{color:#222;margin-bottom:4px; font-weight: 600; font-size:14px;}
.bg_area .list + .list{margin-top: 6px;}
.left18 > li{ font-weight: 500; margin-top:8px; line-height: 21px;word-break: keep-all; color:#666;}
.left18 > li:first-child{margin-top:4px;}
.left18 > li > strong{color:#000; font-weight: 600;}
.left18 > li .left18_sm{font-size: 12px; color:#888; margin-top:4px; line-height: 18px;word-break: auto-phrase;}
.left18.typeA > li{padding-left:10px; position: relative;}
.left18.typeA > li::before{position: absolute; top:0; left:0; bottom: 0; width: 1px; height:1px;content: "-"; }
.dashed{margin-top:16px; padding-top: 12px; border-top: 1px dashed #ddd;}
.dashed .txt{font-size:12px; color:#666; padding-left: 16px; position: relative; line-height: 18px;}
.dashed .txt::before{position: absolute; top:1px; left:0; width: 12px; height: 12px; background: url(../img/icon_info.svg)no-repeat; background-size: 12px; content: '';}
.dashed.typeA .txt{color:#ff5955;}
.dashed.typeA .txt::before{background: url(../img/icon_info_typeA.svg)no-repeat; background-size: 12px; content: '';}
.dashed.nodashed{ padding-top: 0; border-top: 0;}
.color_red{color:#ff5955;}
.border_box{border:1px solid #6178f6; padding:16px 24px; border-radius: 0 8px 0 0;}
.border_box > p{color:#222; line-height: 21px;}
.border_box > p.color{color:#6178f6;font-weight: 600; display: inline;}
.border_box > p.underline{text-decoration: underline;font-weight: 600;}
.img_area > img{ margin: 16px 0 8px;}
.text_list .item{border:1px solid #e5e5e5; border-radius: 0 8px 0 0; padding:20px; margin-top: 16px;}
.text_list .item .tit{font-weight:700; color:#009178; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f5f5f5; }
.table_list dl{display:table; margin-top: 12px;}
.table_list dl dt,.table_list dl dd{display: table-cell; vertical-align: top;font-weight: 500;}
.table_list dl:first-child{margin-top:0;}
.table_list dl dt{color:#666;width: 70px;}
.table_list dl dd{color:#000;}
.text_list.typeA .item{padding: 0 20px;}
.text_list.typeA ul > .area{display:flex; padding:18px 0; line-height: 18px; border-top: 1px solid #f5f5f5; font-size: 12px; color: #666; font-weight: 600;}
.text_list.typeA ul > .area:first-child{border: 0;}
.text_list.typeA ul > .area .number{font-size: 12px; color: #666; font-weight: 600;}
.text_list.typeA ul > .area > p{padding-left: 6px;}
.sm_tit{color:#666; font-size: 12px; margin-top: 2px;}
.dd_list li{position: relative;padding-left:10px; line-height: 21px;}
.dd_list li::before{position: absolute; top:0; left:0; bottom: 0; width: 1px; height:1px; content: "-"; }
.qa_list .item{border-bottom: 1px solid #f5f5f5; }
.qa_list .item .list_top,.qa_list .item .list_bot{padding:16px 24px;}
.qa_list .item .list_top .number,.qa_list .item .list_bot .number{font-weight: 700; color:#009178; margin-bottom: 4px;}
.qa_list .item .list_top .tit,.qa_list .item .list_bot .tit{color:#000; line-height:21px; font-weight: 500; word-break: keep-all;}
.qa_list .item .list_bot{display:none;}
.qa_list .item.active .list_top{background-color:#f7fffe; border-bottom: 1px dashed #009178; border-top: 1px solid #009178; margin-top: -2px;}
.qa_list .item.active .list_bot{display:block; border-bottom: 1px solid #009178;}
.point{color:#ff5955; display: block;}
.cmp_area .select_wrap{padding:24px; height: 60px; border-bottom: 1px solid #f5f5f5;}
.cmp_area .select_wrap .select{width: 100%; text-align: left; background: url(../img/icon_select_24.svg) no-repeat; background-size:24px; background-position:right;}
.cmp_area .select_wrap::after{background-color: initial;}
.cmp_area .inp_wrap{height: 60px; border-bottom: 1px solid #009178;}
.cmp_area .inp_wrap .inp{border: 0; padding: 0 50px 0 24px; height: auto;}
.inp_wrap.seach .btn_seach{position:absolute; top:18px; right: 23px; width:24px; height: 24px; background:url(../img/btn_seach.svg) no-repeat; background-size: 24px;}
.inp_wrap.seach .btn_seach.active{background:url(../img/btn_seach_active.svg) no-repeat; background-size: 24px;}
.note_wrap{padding:24px 0;}
.note_list .tit{font-size: 12px; color: #000; font-weight: 700;margin-bottom: 12px;}
.note_list > ul{list-style-type: disc;padding-left: 18px;}
.note_list > ul > li:first-child{margin-top: 0;}
.note_list > ul > li{font-size: 12px; color:#444; font-weight: 500; word-break: keep-all; line-height: 18px; margin-top: 8px;}
.note_list > ul > li.color{color:#ff5955;}
.note_list > ul > li > p{color:#666; margin-top: 2px;}
.note_list > ul > li > a{color:#6178f6;text-decoration: underline;}
.result_list_wrap .totel{font-size: 0;padding:21px 24px; height: 60px;}
.result_list_wrap .totel > span{font-size: 12px; font-weight: 700;}
.result_list_wrap .totel > span.number{color:#009178;margin-left: 2px;}
.result_list_wrap .result_list .item{padding:16px 24px;border-top: 1px solid #f5f5f5;}
.result_list .item .tt{font-size: 12px; color:#009178; font-weight: 700; line-height: 18px;}
.result_list .item .tit{font-size:14px; color:#000; margin:2px 0 6px;line-height:21px;} 
.result_list .item .host{font-size: 12px; color:#666;line-height: 18px;}

/* 설문조사 MOB-SUV-030.html */
.notice_banner{border: 1px solid #6178f6; border-radius:4px; padding:12px 16px; margin-top: 20px;}
.notice_banner > p{font-size: 12px; color:#6178f6; background: url(../img/icon_notice_12.svg)no-repeat; background-size:14px; padding-left:18px;}
.survey_wrap .survey_item:first-child{margin-top:24px;}
.survey_wrap .survey_item{margin-top:32px;}
.survey_item .ques{margin-bottom:14px; text-align: left;}
.survey_item .ques .number{font-weight: 700; font-size: 16px; color:#009178; line-height: 24px;}
.survey_item .ques .title{color:#444; line-height:21px;font-weight: 600; margin-top: 4px;}
:is(.survey_item .ques .tt){color:#888; line-height:18px;font-weight: 600; margin-top: 4px; font-size: 12px;}
.survey_item .ques .total_number{color:#009178; position: relative;padding-left: 16px;}
.survey_item .ques .total_number::after{position: absolute; top:4px; left:8px; width:0.10px; height: 10px; background-color:#e5e5e5; content:'';}
.survey_item .area {margin-top: 12px;border: 1px solid #ddd; border-radius: 8px;}
.survey_item .area:first-child{margin-top: 0;}
.survey_item .area.active{border: 1px solid #009178;}
.survey_item .area.active .area_top{background-color:#f7fffe; border-radius: 8px;}
.survey_item .area.active .area_img,.survey_item .area.active .area_textarea{border-top: 1px solid #009178;}
.survey_item.disabled .area{background-color:#f5f5f5; }
.area_rating .inp_rdo_wrap.disabled{border: 1px solid #888 !important; z-index: 1; }
.area_rating .inp_rdo_wrap.disabled:first-child{border-radius: 8px 0 0 8px; }
.area_rating .inp_rdo_wrap.disabled:last-child{border-radius:0 8px 8px 0; }
.survey_item .area .area_top{padding:16px 20px; }
.survey_item .area .area_top.disabled{border:1px solid #888;border-radius: 8px; margin: -1px;}
.survey_item .area .area_img{padding:20px; border-top:1px solid #ddd;}
.survey_item .area .area_img > img{width: 100%; height: 182px; border-radius: 0 16px 0 0;}
.survey_item .area.input{border:0;}
.area.area_textarea{border-left:0; border-right: 0; border-bottom: 0; border-radius: 0 0 8px 8px; margin-top: 0;}
.area_textarea.active{border:1px solid #009178;}
.area_textarea{background-color: #fff; padding:16px;border: 1px solid #ddd; border-radius: 8px;}
.area_textarea .textarea{padding:0; width: 100%; height: 80px; border: 0; resize:none; outline: none;}
.textarea::placeholder{color:#888;}
.area_textarea .total {font-size: 0;text-align: right; }
.area_textarea.typeA{height: 140px;}
.area_textarea.typeA.active{border:1px solid #009178;}
:is(.area_textarea .total > span){font-size: 12px; color:#888;}
.survey_item.disabled .area_textarea,.survey_item.disabled .area_textarea .textarea{background-color: #f5f5f5; color:#888;border-radius: 8px;}
.survey_item.disabled .area.area_textarea{border-left:0; border-right: 0; border-bottom: 0; border-radius:0 0 8px 8px; margin-top: 0;}
.survey_item.disabled .area_textarea .total > span{color: #ddd;}
.filebox{border: 1px dotted #ddd; padding:0 20px; height: 52px; text-align: center; border-radius:8px;}
.filebox input[type="file"] { position: absolute;  width: 0; height: 0; padding: 0;overflow: hidden; border: 0;} 
.filebox .text{font-size:12px; color:#666; line-height: 52px;text-decoration: underline; }
.area_img_upload .area_img_upload_tt{margin-top: 10px; font-size: 12px; color: 888;}
.area_img_upload .img_upload{width: 100%; height: 210px; background-color:#f5f5f5; margin-bottom: 10px; border-radius: 0 16px 0 0; position: relative;}
.area_img_upload .img_upload .img_data{position: absolute;top: 0;left: 0;width: 100%; height: 210px; border-radius: 0 16px 0 0;}
.area_img_upload .img_upload .btn_close{position: absolute; top:10px; right:10px; width:24px; height: 24px; background-size: 24px; background: url(../img/icon_img_close.svg) no-repeat;}
.area_rating .flex{border:1px solid #ddd; border-radius: 8px;}
.area_rating .flex.disabled{background-color:#f5f5f5;}
.area_rating .flex .inp_rdo_wrap{flex:1;border-left: 1px solid #ddd; text-align: center; padding: 15px;}
.area_rating .flex .inp_rdo_wrap.active{border:1px solid #009178; background-color: #f7fffe;margin: -1px -2px;}
.area_rating .flex .inp_rdo_wrap.active:first-child{border-left: 1px solid #009178; border-radius:8px 0 0 8px;}
.area_rating .flex .inp_rdo_wrap.active:last-child{border-left: 1px solid #009178; border-radius:0 8px 8px 0;margin:-1px; }
.area_rating .flex .inp_rdo_wrap:first-child{border-left: 0;}
.area_rating .flex .inp_rdo_wrap .inp_label{padding-top:26px; padding-left: 0;}
.area_rating .flex .inp_rdo_wrap .inp_label::before{top:2px; left: 50%; transform: translateX(-10px);}
.graph_wrap .flex{border: 0; margin-top: 4px;}
:is(.graph_wrap .flex p){font-size:12px; color:#888;}
.graph_wrap .img_graph{margin-top:14px;}
.graph_wrap .flex .right{margin-left: auto; color:#009178;}
.agree_wrap{padding-top:32px; margin-top: 32px; border-top: 8px solid #f5f5f5;}
.agree_wrap .agree_item + .agree_item{margin: 32px 0 40px;}
.agree_wrap .agree_item .item_title{font-weight: 600; font-size:14px; color:#000;}
.agree_wrap .agree_item .agree_box{border-radius: 8px; background-color: #f5f5f5; padding:20px; margin:14px 0;}
.agree_wrap .agree_item .agree_box .txt{word-break: keep-all;font-size:14px; color:#222; margin-bottom: 12px; line-height:21px;}
.agree_wrap .agree_item .agree_box .list_tit > li{word-break: keep-all; color:#666; line-height:21px;    padding-left: 10px; position: relative;}
.agree_wrap .agree_item .agree_box .list_tit > li::before{position: absolute; top: 0; left:0; color:#666;content: "-"; }
.agree_wrap .agree_item .inp_chk_wrap{border:1px solid #ddd; border-radius: 8px;padding: 16px; width: 100%;}
.agree_wrap .agree_item .inp_chk_wrap .inp_label{color:#666;}
.agree_wrap .agree_item .inp_chk_wrap.active{background-color: #f7fffe; color:#009178; border:1px solid #009178;}

/* 설문조사 MOB-SUV-040.html */
.list_area{border:1px solid #ddd; border-radius: 8px;}
.list_area .item{padding: 20px; border-top: 1px solid #ddd; text-align: left;}
.list_area .item:first-child{ border-top: 0}
.list_area .item .number{padding-left:24px; font-size:14px; color:#222; font-weight: 600;margin-bottom: 12px; position: relative;}
/* 20개 컬러 */
.list_area .item .number::after{z-index: -1; position: absolute; top:0; left:0; width:16px; height: 16px; background-color:#009178; border-radius:0.20px; content: '';}/*1번*/
.list_area .item .number.typeA::after{ background-color:#74c399; content: '';}/*2번*/
.list_area .item .number.typeB::after{ background-color:#d6f3d5; content: '';}/*3번*/
.list_area .item .number.typeC::after{ background-color:#61cdbb; content: '';}/*4번*/
.list_area .item .number.typeD::after{ background-color:#a8f1e4; content: '';}/*5번*/
.list_area .item .number.typeE::after{ background-color:#60acf4; content: '';}/*6번*/
.list_area .item .number.typeF::after{ background-color:#3583cd; content: '';}/*7번*/
.list_area .item .number.typeG::after{ background-color:#6290b9; content: '';}/*8번*/
.list_area .item .number.typeH::after{ background-color:#f1e15b; content: '';}/*9번*/
.list_area .item .number.typeI::after{ background-color:#f1b05b; content: '';}/*10번*/
.list_area .item .number.typeJ::after{ background-color:#e8c1a0; content: '';}/*11번*/
.list_area .item .number.typeK::after{ background-color:#5040ab; content: '';}/*12번*/
.list_area .item .number.typeL::after{ background-color:#4951c9; content: '';}/*13번*/
.list_area .item .number.typeN::after{ background-color:#7981ed; content: '';}/*14번*/
.list_area .item .number.typeM::after{ background-color:#f3a09c; content: '';}/*15번*/
.list_area .item .number.typeO::after{ background-color:#df7570; content: '';}/*16번*/
.list_area .item .number.typeP::after{ background-color:#f47560; content: '';}/*17번*/
.list_area .item .number.typeQ::after{ background-color:#ff6161; content: '';}/*18번*/
.list_area .item .number.typeR::after{ background-color:#335a7d; content: '';}/*19번*/
.list_area .item .number.typeS::after{ background-color:#317986; content: '';}/*20번*/
/* e.20개 컬러 */
.list_area .item .number.one{color:#222; padding-left: 0;}
.list_area .item .number.one::after{background-color:inherit;}
.list_area .item .tit{font-size:14px; color: #666; line-height:21px;} 
.list_area.img{display: grid; gap:12px;border: 0;grid-template-columns: repeat(2, 1fr)}
.list_area.img .item{ padding: 0; border-top: 0 ;}
.list_area.img .item .list_img{width: 100%; height: 100px; border-radius: 0 16px 0 0;}

/* 설문조사 MOB-SUV-050.html, MOB-SUV-060.html 팝업 */
.survey_item.view .ques{padding:0 24px 16px; border-bottom: 1px solid #e5e5e5;margin: 24px 0;}
.survey_item.view .ques .title{margin: 8px 0;}
.survey_item.view .chart_wrap{padding:0 24px;}
.survey_item.view .list_area .item .number.one{color: #009178; font-size: 12px;margin-bottom: 4px;}

/* 모바일명함  MOB-PRF-021.html */
.intro_area{background-color:#fff; border-radius: 8px; padding:24px; margin-bottom: 20px;box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.06);}
.intro_area:first-child{margin-top: 24px;}
:is(.name_wrap .flex > p){font-size:16px; color:#000; font-weight: 700; line-height:21px;}
.name_wrap .flex .name_en{color:#009178; position: relative; width:78%;}
:is(.name_wrap .info_tt){font-size:14px; color:#222; line-height:21px;margin-top: 8px;}
.name_wrap .flex > p:nth-child(2){padding:0 5px;}
.name_wrap .info_tt:last-child{margin-top: 0;}
.name_wrap .info_text{margin-top: 9px; color:#222; line-height: 21px;}
.intro_area .item .info_list > li{border-top: 1px solid #f5f5f5;padding: 16px 0; }
.intro_area .item .info_list > li:first-child{margin-top: 16px;}
.intro_area .item .info_list > li:last-child{padding-bottom: 0;}
.intro_area .item .info_list > li .flex{ justify-content: space-between;}
.intro_area .item .info_list > li .flex .tit,.intro_area .item .info_list > li .flex .sub_tit{font-size:14px; color:#222; font-weight: 600;line-height: 21px;}
.intro_area .item .info_list > li .flex .tit.colortypeB{font-size: 12px;}
.intro_area .item .info_list > li .flex .sub_tit{margin-top: 4px; font-weight: 500;}
.intro_area .item .info_list > li .profille.togle, .intro_area .item .info_list > li .area_textarea.togle,
.intro_area .item .info_list > li .inp_wrap.togle, .link_txt.togle,.text_area.togle{display: none;margin-top: 16px;}
/* .switch_area input[type="checkbox"]:checked ~ .profille.togle,.area_textarea.togle{display: block;} */
.intro_area .item .info_list > li .profille.togle{border-top: 1px #f5f5f5;padding-top: 16px; text-align: center;}
.profille.togle .profille_img{width: 110px;height: 110px;position: relative;}
.profille.togle .profille_img::before{position:absolute; bottom:0; right:0;width: 30px; height: 30px; background: url(../img/icon_camera.svg) no-repeat; background-size: 30px; content: '';}
.profille.togle .profille_img .img{width: 110px; height: 110px; border-radius: 110px;}
.profille.togle .tit{margin-top:8px; font-size: 10px; color:#888;}
.link_txt {text-align: right; margin-top: 8px!important;}
.link_txt > a{ text-decoration: underline; font-size: 12px; color:#666;}
.intro_area .item .info_list > li .text_area > p{font-size:14px; color:#666;line-height:21px; margin-top: 16px;}
.intro_area .item .info_list > li .text_area.branch{padding-top: 16px; margin-top: 16px; border-top: 1px dotted #f5f5f5;}
.intro_area .item .info_list > li .text_area.branch .branch_list{margin-top: 16px;}
.intro_area .item .info_list > li .text_area.branch .branch_list:first-child{margin-top:0;}
:is(.intro_area .item .info_list > li .text_area.branch .branch_list > dt,.intro_area .item .info_list > li .text_area.branch .branch_list > dd){font-size:14px;color:#222;line-height:21px;}
.intro_area .item .info_list > li .text_area.branch .branch_list > dt{color:#009178; font-weight: 600; margin-bottom:4px; font-size: 12px;}
.terms_cont{margin:20px 0 30px; list-style-type: disc; padding-left: 20px;}
.terms_cont .area{font-size: 12px; color:#666; margin-top: 8px; word-break: keep-all;}
.terms_cont .area:first-child{margin-top: 0 ;}

/* 모바일 명함 외부브라우저 */
/* .contents.browser{padding-top: 6rem; } */
.header.bg_bk{background-color:#1d222a;display: flex;justify-content: space-between; align-items: center; height: 60px; gap: 20px; border-bottom: 1px solid #2C3035;}
.header.bg_bk .logo{flex: 1;}
.header.bg_bk .logo a > img{height: 24px;}
.header.bg_bk .home{width: 20px; height: 20px;}
.header.bg_bk .home > a{display:block; font-size:0; background: url(../img/icon_home.svg) no-repeat; background-size:20px; width: 20px; height: 20px;}
.name_card{ padding:40px 24px; height: auto;}
.name_card .card_tit{text-align: center; font-size: 12px; color:#7a8893; margin-top:20px;}
.icon_img{width:36px; height:36px; background: url(../img/btn_namecardA.svg) no-repeat; background-size: 36px;}
.icon_img.typaB{background: url(../img/btn_namecardB.svg) no-repeat; background-size: 36px;}
.icon_img.typaC{background: url(../img/btn_namecardC.svg) no-repeat; background-size: 36px;}
.icon_img.typaD{background: url(../img/btn_namecardD.svg) no-repeat; background-size: 36px;}
.icon_img.typaE{background: url(../img/btn_namecardE.svg) no-repeat; background-size: 36px;}
.standard_tit.w80{width: 80%;}

/* --bg-background:#1D222A; */  /* --clr-3: #d3eee9; *//* var(--clr-3), */
/* 명함 케이스 */
@property --gradient-angle {syntax: "<angle>";initial-value: 90deg;inherits: false;}
:root {  --clr-card: #009178; --clr-1: #009178; --clr-2: #d3eee9; }

.card_item { position: relative; height: auto; width: 100%; border-radius:12px; background-color: #fff;}
.card_item::after,
.card_item::before {content: " ";position: absolute;z-index: -1; inset:-2px;background: conic-gradient(from var(--gradient-angle), var(--clr-card),var(--clr-1), var(--clr-2), var(--clr-2),  var(--clr-1),var(--clr-card)); border-radius: inherit;animation: rotate 2.5s linear infinite;}
@keyframes rotate {
  0% {
    --gradient-angle: 0deg;
  }
  100% {
    --gradient-angle: 360deg;
  }
}
.card_item .card_item_in{ padding:16px 18px;}
.card_item .top.flex{align-items: flex-start; gap: 6px;}
.card_item .top .card_name{margin-left: auto; text-align: right; width: 69%;}
.card_item .top .card_name .tt{font-size: 20px; color:#000; line-height: 30px; font-weight: 700;}
.card_item .top .card_name .tt.font14{font-size:14px;line-height: 21px;}
:is(.card_item .top .card_name .tit){font-size: 12px; line-height: 18px; color:#666}
.card_item .top .corporate_img{width: 84px; height: 80px;}
.card_item .top .corporate_img.profile > img{border-radius: 80px; width: 70px !important; height: 70px; object-fit: cover;}
.card_item .bottom{margin-top:25px;}
.card_item .bottom .card_logo > img{width: auto !important; height: 22px;margin-bottom: 6px;}
.card_item .bottom .number_txt{font-size: 0;}
.card_item .bottom .number_txt.ml10{margin-left: 10px;}
.card_item .bottom .number_txt.ml10 > strong{margin-right:2px}
.card_item .bottom .number_txt > strong,.card_item .bottom .number_txt > span{display: inline-block;font-size: 12px; font-weight: 500; color:#000;line-height: 18px; margin-right: 4px;}
.card_item .bottom .number_txt > strong{width: 11px;}
.card_item .bottom .number_txt > span{ color: #444; margin-right: 0; }
.card_item .bottom .w_logo{margin-left: auto;}
.card_item .bottom .w_logo > img{width: auto!important; height: 18px;}
.card_item .bzcardimg{border-radius: 10px;}
@media (min-width: 700px) {
  .card_item{width: 350px; margin:0 auto;}
}

/* html로 받아오는 개발화면 */
.html_view{padding:15px 24px 24px;}

/* 허브 다운로드 MOB-ETC-100 */
.contents.etc{padding:0;}
.etc_wrap_top{position: relative; height: 600px;}
.etc_wrap_top .img > img{width: 100%; height: 600px;}
.etc_wrap_top .title {padding: 0 24px; position: absolute; top: 73px;left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center;}
.etc_wrap_top .title .tit{font-size: 16px; color:#009178; line-height: 24px; margin-bottom: 4px; font-weight: 600;}
.etc_wrap_top .title .txt{font-size: 24px; color:#1d222a; line-height: 36px; font-weight: 700;}
.etc_wrap_top .group_wrap{display: flex; border-bottom: 1px solid #CDECEB; padding: 24px 0 10px; margin-bottom: 34px;}
.etc_wrap_top .group_wrap .hub_logo{margin-left: auto;}
.etc_wrap_top .icon_download{position: absolute; bottom: 40px; left:0; width: 100%; padding: 0 24px;}
.etc_wrap_top .icon_download .btn{width:100%; padding:16px 20px; border:1px solid #444; margin-top: 10px;display: flex;  align-items: center; justify-content: center;}
.etc_wrap_top .icon_download .btn_dow{color:#222; padding-left:28px;}
.etc_wrap_top .icon_download .btn_dow.aos{ background: url(../img/icon_aos24.svg) no-repeat; background-size: 24px;background-position: top -1px left -3px;}
.etc_wrap_top .icon_download .btn_dow.ios{  background: url(../img/icon_ios24.svg) no-repeat; background-size: 24px;background-position: top -1px left -3px;}
.etc_wrap_top .icon_download .btn .ver{color:#666; padding-left: 4px; font-weight: 500; font-size: 12px;}
.tab_wrap.etc .tab_list {padding: 10px 0; text-align: center; margin-top: 16px;}
.tab_wrap.etc .tab_list .tab{width: 50%;}
.tab_wrap.etc .tab_list .tab > a{margin-right: 0; display: block;}
.tab_wrap.etc .tab_list .tab > a::before{bottom: -18px;}
.etc_area .title{font-size: 16px; line-height: 24px; color:#222;margin:30px 0 24px; font-weight: 400;}
.etc_area .title > strong{display: block; font-weight: 700;}
.etc_area .item{border:1px solid #e5e5e5; border-radius: 0 8px 0 0; padding: 20px; margin-top: 16px;}
.etc_area .item .left_tit{display: flex; justify-content: left;margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5;}
.etc_area .item .left_tit .tt{color:#009178; font-weight: 700;}
.etc_area .item .left_tit .link_arr{margin-left: auto; font-size: 12px; color: #666; padding-right:20px; background: url(../img/icon_arr20.svg) no-repeat; background-size: 20px;background-position: top -2px right;}
.etc_area .item .box .list_style > li.flex{align-items: baseline; gap:6px; margin-top: 16px;}
.etc_area .item .box .list_style > li .number{width:16px; height: 16px; background: #1d222a; border-radius: 16px; color: #fff; font-size:10px; text-align: center; line-height: 15px;}
.etc_area .item .box .list_style > li .left{width: 95%;}
.etc_area .item .box .list_style > li .left.w100{width: 100%;}
.etc_area .item .box .list_style > li .left .blod{color:#222;line-height: 21px;font-weight: 500;}
.etc_area .item .box .list_style > li .left .sm{margin-top: 4px; color:#666; font-size: 12px;}
.etc_area .btn_wrap{margin:24px 0 30px;}
.btn_wrap.etc{padding:0 24px; margin:24px 0 30px; }
.notandum{border-top: 12px solid #f5f5f5; padding: 30px 24px 40px;}
.notandum_box{background-color: #f0f4f8; padding:24px 20px; border-radius: 8px;}
.notandum_box .box_area .tt{font-size:12px; color:#009178; margin-bottom: 6px; font-weight: 700;}
.notandum_box .box_area .tit{font-size:12px; color:#666; margin-bottom: 8px;word-break: keep-all; line-height: 18px;}
.notandum_box .box_area .tit:last-child{margin-bottom: 12px; border-bottom: 1px solid #e5e5e5; padding-bottom: 12px;}
.notandum_box .box_area .flex + .flex{margin-top: 12px;}
.notandum_box .box_area .flex .icon_call{margin-left: auto; width:38px; height: 36px; background: url(../img/btn_namecardB.svg) no-repeat; background-size: 36px;}
.notandum_box .box_area .fontS{font-size: 10px; color:#666; margin-bottom:4px;} 
.notandum_box .box_area .fontL{color:#000;}
.copyright{font-size: 10px; color:#666; text-align: center; margin-top: 30px;}

/* 허브 다운로드 MOB-ETC-P01 */
.modal_wrap.etc .madal_header,.modal_wrap.etc .modal_container {background-color: #f5f5f5!important;}
.modal_contents.flex{text-align: center;height: 100%;display: flex;justify-content: center;align-items: center; margin-bottom: 0;position: relative; padding-bottom: 50px;}
.slide_title .tit{font-weight: 700; color:#1d222a;margin-bottom:5px; line-height: 21px;}
.slide_title .txt{font-size:20px; font-weight: 600; color:#009178; line-height: 30px;display:inline-block; box-shadow:inset 0px -0.8rem 0 0 #D8EAE7; width: fit-content;}
.slide_img > img{width:100%; margin:24px 0;}
.bot_tit{font-weight: 600; font-size: 16px; color:#222; line-height: 24px; margin-bottom: 24px;}
.swiper-txt-navi { margin-bottom: 23px; }
.swiper-pagination-bullet{background-color: #ddd!important; opacity: inherit !important;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background-color: #888!important; width: 16px; height: 6px; border-radius: 16px;}

/* 신문스크랩 MOB-CLP-021 */
.clp_list .item:first-child{margin-top: 16px;}
.clp_list .item{margin-top: 32px;}
.clp_list .item .title{font-weight: 700; margin-bottom: 8px; color:#222;}
.clp_list .item .link_box{background-color: #f5f5f5; padding:8px 12px;}
.clp_list .item .link_box > a{color:#6178f6; font-size: 12px; line-height: 18px; text-decoration: underline;display: block; word-wrap: break-word;}