/* common */
/* body { height:100vh; overflow-y: hidden; } */
body { background: #F6F9FC; }
/* scroll */
::-webkit-scrollbar { width: 3px; height: 5px; background: #B7C1CC; }
::-webkit-scrollbar-thumb { background: #999; }
::-webkit-scrollbar-track { position: absolute; }
/* loading */
.loading-bg { width: 100%; height:100%; background: rgb(14, 26, 47, 0.3); position: fixed; top:0; left:0; z-index: 1002; }
.loading-wrap { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.loading { display: inline-block; width: 50px; height: 50px; border: 5px solid rgba(255,255,255,.4); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); }
}
/* btn start */
.btn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-radius: 5px; border: none; line-height: 1; text-align: center; font-weight: 400; cursor: pointer; }
.btn.purple { background: var(--color-subColor01); color:#fff; }
.btn.purpleLine { background: #fff; border:1px solid var(--color-subColor01); color: var(--color-subColor01); box-shadow: 0 3px 6px rgba(0,0,0,0.11); }
.btn.navy { background: var(--color-mainColor); color:#fff; }
.btn.gray { background: rgba(136, 152, 170, 0.6); color:#fff; }
.btn.navyline { border:1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); }
.btn.popSub { width: 95px; height:40px; }
/* btn end */
/* login */
.login-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height:100vh; background: url("../img/bg_logo.png") no-repeat 50% 50% #11CDEF; color:#172B4D; overflow-y: auto; }
.login-wrap { padding: 70px 0; }
.login-box { max-width:670px; margin: 0 auto; padding: 55px 50px 60px; background: #F7FAFC; border-radius: 10px; box-shadow: 0 3px 17px rgba(45, 41, 41,0.11); }
.logo-title { text-align: center; }
.logo-title h1 { }
.login-cont { margin: 50px 0 0; }
.login-cont .login-write { margin-bottom: 40px; }
.login-cont .login-write .id-area input[type="text"],
.login-cont .login-write .id-area input[type="number"],
.login-cont .login-write .id-area input[type="password"] { width:100%; height:70px; padding: 10px 80px; box-sizing: border-box; border-radius: 5px; border:none; box-shadow: 0 2px 4px rgba(23, 23, 23,0.18); background: url("../img/ic_login_mail.png") no-repeat 30px 50% #fff; font-size: 19px; color:#172B4D; }
.login-cont .login-write .id-area input[type="text"]::placeholder,
.login-cont .login-write .id-area input[type="number"]::placeholder,
.login-cont .login-write .id-area input[type="password"]::placeholder { color:#172B4D; }
.login-cont .login-write .pw-area { margin-top: 40px; }
.login-cont .login-write .pw-area input[type="password"] { width:100%; height:70px; padding: 10px 80px; box-sizing: border-box; border-radius: 5px; border:none; box-shadow: 0 2px 4px rgba(23, 23, 23,0.18); background: url("../img/ic_login_lock.png") no-repeat 30px 50% #fff; font-size: 19px; color:#172B4D; }
.login-cont .login-write .pw-area input[type="password"]::placeholder { color:#172B4D; }
.login-cont .login-add { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.login-cont .login-add .id-save input[type="checkbox"] { display: none; }
.login-cont .login-add .id-save input[type="checkbox"].checkBoxCust + label { display: flex; flex-wrap: wrap; align-items: center; cursor: pointer; }
.login-cont .login-add .id-save input[type="checkbox"].checkBoxCust + label span { display: block; width: 40px; height:40px; margin: 0 auto; background: #fff; border-radius: 6px; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,0.13); }
.login-cont .login-add .id-save input[type="checkbox"]:checked.checkBoxCust + label span { background: url("../img/ic_check_login.png") no-repeat 50% 50% var(--color-subColor02); border-color: var(--color-subColor02); box-shadow: 0 3px 6px rgba(0,0,0,0.11); }
.login-cont .login-add .id-save input[type="checkbox"].checkBoxCust + label em { margin-left: 20px; font-size: 16px; }
.login-cont .login-add .pw-find a { font-size: 16px; }
.login-cont .login-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.login-cont .login-btn-wrap .btn.sign { width: 155px; height:70px; border:none; background: #11CDEF; border-radius: 4px; font-size: 23px; color:#fff; }
.login-wrap .exp { margin-top: 40px; font-size: 16px; color:#fff; text-align: center; }
.login-wrap .partnerUl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 30px; }
.login-wrap .partnerUl li { padding: 0 30px; position: relative; }
.login-wrap .partnerUl li:last-child::after { content:""; width: 1px; height: 50px; background: #fff; position: absolute; top:50%; left:0; transform: translateY(-50%); }
/* header */
.top-header { width: 100%; height:80px; padding-left: 290px; background: var(--color-mainColor); color: #fff; position: fixed; top:0; left:0; z-index: 999; transition: padding 0.5s ease; }
.top-header .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:100%; padding: 0 40px; }
.top-header .top-left { display: flex; align-items: center; }
.top-header .top-left .title { font-size: 32px; font-weight: 700; }
.top-header .top-left .est-info-sub { display: flex; flex-wrap: wrap; margin-left: 20px; }
.top-header .top-left .est-info-sub li { margin-left: 15px; font-size: 13px; position: relative; }
.top-header .top-left .est-info-sub li:first-child { margin-left: 0; }
.top-header .top-left .est-info-sub li:after { content:"-"; position: absolute; top:0; left:-10px; }
.top-header .top-left .est-info-sub li:first-child:after { display: none; }
.top-header .top-right { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.top-header .top-right .btn.est-new { padding: 15px; font-size: 20px; }
.top-header .top-right .btn.est-new::before { content:"+"; padding-right: 5px; }
.top-header .top-right .login-info { margin-left: 20px; padding-right: 20px; background: url("../img/ic_show_down.png") no-repeat right 50%; font-size: 14px; cursor: pointer; }
.top-header .top-right .info_chan { position: absolute; right: 0; bottom: 0; display: block; background: #fff; padding: 20px; border-radius: 5px; color: #333; width: 190px; box-shadow: 1px 1px 1px 1px rgba(59, 59, 59, 0.226); }
/* .top-header .top-right .info_chan.mem_on { opacity: 1; } */
/* .top-header .top-right.mem_on .h_mem_info { display: block; } */
.top-header .top-right .h_mem_info { position: relative; top: 90px; display: none; }
/* .top-header .top-right .h_mem_info .info_chan:hover { background: #fafafa; } */

.side-menu { width: 290px; height:100%; background: var(--color-mainColor); color: #fff; position: fixed; top:0; left:0; z-index: 999; transition: left 0.5s ease; }
.side-menu .side-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:80px; padding: 0 40px; background: rgba(0,0,0,0.2); }
.side-menu .side-top .logo a { display: block; font-size: 0; }
.side-menu .side-top .logo a img { width: 135px; }
.side-menu .side-top .btn-side-toggle { cursor: pointer; }
.side-menu .side-bottom { height:100%; margin-top: 40px; }
.side-menu .side-bottom .menu li { display: flex; flex-wrap: wrap; justify-content: flex-end; padding-left: 20px; }
.side-menu .side-bottom .menu li:not(:first-child) { margin-top: 10px; }
.side-menu .side-bottom .menu li a { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; width: 100%; height:60px; padding: 15px 20px; border-radius: 30px 0 0 30px; transition: width 0.5s ease, padding 0.5s ease, border-radius 0.5s ease; }
.side-menu .side-bottom .menu li a .ic { display: block; width: 30px; height: 30px; margin-right: 15px; }
.side-menu .side-bottom .menu li a .ic.dash { background: url("../img/ic_menu_dash.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .ic.home { background: url("../img/ic_menu_home.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .ic.est { background: url("../img/ic_menu_est.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .ic.user { background: url("../img/ic_menu_user.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .ic.cust { background: url("../img/ic_menu_cust.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .ic.setting { background: url("../img/ic_menu_setting.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .ic.stats { background: url("../img/ic_menu_stats.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li a .menu-num { font-size: 18px; font-weight: 700; display: none; }
.side-menu .side-bottom .menu li a em { width: calc(100% - 45px); font-size: 20px; line-height: 1; overflow: hidden; white-space: nowrap; transition: width 0.5s ease, margin 0.5s ease; }
.side-menu .side-bottom .menu.depth3 { height:calc(100% - 200px); margin-top: 10px; padding-bottom: 60px; overflow-y: auto; }
.side-menu .side-bottom .menu.depth3 li a em { font-size: 18px; font-weight: 700; }
.side-menu .side-bottom .menu li.on a { background: #F6F9FC; color: var(--color-mainColor); }
.side-menu .side-bottom .menu li.on a .ic.dash { background: url("../img/ic_menu_dash_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li.on a .ic.home { background: url("../img/ic_menu_home_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li.on a .ic.est { background: url("../img/ic_menu_est_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li.on a .ic.user { background: url("../img/ic_menu_user_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li.on a .ic.cust { background: url("../img/ic_menu_cust_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li.on a .ic.setting { background: url("../img/ic_menu_setting_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .menu li.on a .ic.stats { background: url("../img/ic_menu_stats_on.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .depth1Menu { margin-top: -40px; padding: 0 40px; background: rgba(0,0,0,0.2); }
.side-menu .side-bottom .ic-menu { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding: 0 0 10px; border-bottom: 1px solid rgba(255,255,255,0.1); transition: width 0s ease; }
.side-menu .side-bottom .ic-menu li a .ic { display: block; width: 30px; height: 30px; }
.side-menu .side-bottom .ic-menu li a .ic.home { background: url("../img/ic_menu_home.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .ic-menu li a .ic.est { background: url("../img/ic_menu_est.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .ic-menu li a .ic.user { background: url("../img/ic_menu_user.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .ic-menu li a .ic.cust { background: url("../img/ic_menu_cust.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .ic-menu li a .ic.setting { background: url("../img/ic_menu_setting.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .ic-menu li a .ic.stats { background: url("../img/ic_menu_stats.png") no-repeat 50% 50%/cover; }
.side-menu .side-bottom .depth2Tit { padding: 15px 40px 20px; background: rgba(0,0,0,0.2); border-bottom: 2px solid #fff; font-size: 20px; font-weight: 700; }
.side-menu .btn-menu-toggle { width: 20px; height:40px; border:none; border-radius: 0 4px 4px 0; background: url("../img/ic_menu_toggle.png") no-repeat 50% 50% var(--color-mainColor); position: absolute; top:50%; right: -20px; transform: translateY(-50%); text-indent: -9999px; cursor: pointer; }
/* header 접었을 때 */
.side-menu.narrow .side-bottom .menu li { padding-right: 15px; }
.side-menu.narrow .side-bottom .menu li a { width: 60px; padding: 15px; border-radius:30px; justify-content: center; }
.side-menu.narrow .side-bottom .menu li a .ic { margin: 0; }
.side-menu.narrow .side-bottom .menu li a .menu-num { display: block; }
.side-menu.narrow .side-bottom .menu li a em { width: 0%; margin: 0; transition: width 0s ease, margin 0s ease; }
.side-menu.narrow .side-bottom .depth1Menu { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.side-menu.narrow .side-bottom .ic-menu { width: 30px; margin-right: -8px; transition: width 0.5s ease; }
.side-menu.narrow .side-bottom .ic-menu li:not(:first-child) { display: none; }
/* content */
.content { height:calc(100% - 100px); margin-top: 80px; margin-left: 290px; transition: margin 0.5s ease; position: relative; }
.content .inner { height:100%; }
.grayTxt { color: #999; }
/* wrap size */
.wrap { min-width: fit-content; height:100%; padding: 40px 40px 50px; }
.wrap-flex { display: flex; justify-content: space-between; }
.wrap-1600 {width: 100%; max-width:1600px; min-width:740px;}
.wrap-1200 { width: 100%; max-width:1200px; min-width:740px; }
.wrap-740 { width: 100%; max-width:740px; min-width:740px; }
.wrap-full { width: 100%; max-width:100%; min-width:740px; }
.wrap-240 { width: 100%; max-width:240px; min-width:240px; }
.ht-100 { height:calc(100vh - 190px); }
.ht-100 form { height:100%; }
.ht-100 .est-write-wrap { height:100%; }
.ht-100 .est-write-wrap .est-write { height:100%; }
/* dashboard main */
.dash-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px; }
.dash-group { width: calc(70% - 4px); max-width: 780px; }
.dash-group .dgUl { display: flex; flex-wrap: wrap; justify-content: space-between; }
.dash-group .dgUl li { display: flex; flex-wrap: wrap; width: calc((100% - 60px) / 3); padding: 20px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
.dash-group .dgUl li:nth-child(n+4) { margin-top: 30px; }
.dash-group .dgUl li .txt { width: calc(100% - 50px); }
.dash-group .dgUl li .txt.space { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: space-between; }
.dash-group .dgUl li .txt span { display: block; font-size: 11px; font-weight: 500; color: #8898AA; }
.dash-group .dgUl li .txt p { margin: 10px 0 25px; font-size: 16px; color: #4D4F5C; }
.dash-group .dgUl li .txt a { display: inline-block; font-size: 13px; color: #4D4F5C; }
.dash-group .dgUl li .ic { width: 50px; font-size: 0; }
.notify-group { width: calc(30% - 26px); max-width: 310px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
.notify-group .ntf-tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 30px; border-bottom: 1px solid rgba(136, 152, 170, 0.5); }
.notify-group .ntf-tit h3 { font-size: 16px; line-height: 1.056; color:var(--color-mainColor); }
.notify-group .ntf-tit a { display: inline-block; font-size: 13px; color: #4D4F5C; }
.notify-group .ntf-wrap { height:calc(100% - 80px); padding: 25px 30px 30px; }
.notify-group .ntf-wrap .ntf-list { height:100%; display: flex; flex-wrap: wrap; flex-direction: column; }
.notify-group .ntf-wrap .ntf-list li { height:calc(100% / 3); display: flex; flex-wrap: wrap; position: relative; }
.notify-group .ntf-wrap .ntf-list li::after { content:""; width: 1px; height:calc(100% - 40px); border-left: 1px dashed rgba(136, 152, 170, 0.8); position: absolute; top:40px; left:19px; }
.notify-group .ntf-wrap .ntf-list li a { display: block; height:100%; display: flex; flex-wrap: wrap; }
.notify-group .ntf-wrap .ntf-list li:last-child::after { display: none; }
.notify-group .ntf-wrap .ntf-list li .ic { width: 40px; position: relative; z-index: 2; }
.notify-group .ntf-wrap .ntf-list li .txt { width: calc(100% - 40px); padding-left: 15px; }
.notify-group .ntf-wrap .ntf-list li .txt span { display: block; padding-top: 15px; font-size: 11px; color: #8898AA; }
.notify-group .ntf-wrap .ntf-list li .txt p { height:2.8em; margin-top: 10px; overflow: hidden; font-size: 13px; color: #172B4D; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; }
/* dashboard list */
.content .minWidthScroll { min-width: 1200px; height: 100%; overflow-x: auto; }
.content .minWidthScroll.ht-100 { height:calc(100vh - 100px); }
.content .sub-ctrl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 30px 40px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.11); position: relative; z-index: 2; }
.content .sub-ctrl .stateUl { display: flex; flex-wrap: wrap; }
.content .sub-ctrl .stateUl li:not(:first-child) { margin-left: 20px; }
.content .sub-ctrl .stateUl li a { font-size: 16px; font-weight: 500; color:#999; }
.content .sub-ctrl .stateUl li.on a { color: var(--color-mainColor); }
.content .sub-ctrl .btnWrap { display: flex; flex-wrap: wrap; align-items: center; }
.content .sub-ctrl .btnWrap li:not(:first-child) { margin-left: 10px; }
.content .sub-ctrl .btnWrap li .btn { width:120px; height:40px; appearance: auto; }
.content .dash-list { height: calc(100vh - 280px); background: #fff; background: #F6F9FC; overflow-y: auto; }
.content .dash-list::-webkit-scrollbar {height: 10px;}
.content .dash-list::-webkit-scrollbar-thumb {background:#7764e4;}
.content .dash-list .dash-table { width: 100%; max-height:100%; table-layout: fixed; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.content .dash-list .dash-table thead { position: sticky; top:0; z-index: 1; background: #F1F3F9; }
.content .dash-list .dash-table thead tr th { padding: 10px 5px; text-align: center; font-size: 12px; font-weight: 500; color:#8898AA; vertical-align: middle; }
.content .dash-list .dash-table thead tr th.dash-header-cell-num { width: 65px; padding: 10px 0; }
.content .dash-list .dash-table thead tr th:first-child { padding-left: 40px; }
.content .dash-list .dash-table thead tr th:last-child { padding-right: 40px; }
.content .dash-list .dash-table thead tr th .ovt { width:100%; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content .dash-list input[type="checkbox"] { display: none; }
.content .dash-list input[type="checkbox"].checkBoxCust + label span { display: block; width: 25px; height:25px; margin: 0 auto; background: #fff; border:1px solid #8898AA; border-radius: 6px; cursor: pointer; }
.content .dash-list input[type="checkbox"]:checked.checkBoxCust + label span { background: url("../img/ic_check.png") no-repeat 50% 50% var(--color-subColor02); border-color: var(--color-subColor02); box-shadow: 0 3px 6px rgba(0,0,0,0.11); }
.content .dash-list .dash-content-scroll { max-height:calc(100% - 45px); overflow-y: auto; }
.content .dash-list .dash-table tbody tr { cursor: pointer; }
.content .dash-list .dash-table tbody tr:nth-child(2n) td { background: #F7FAFC; }
.content .dash-list .dash-table tbody tr td { padding: 10px 5px; background: #fff; text-align: center; font-size: 13px; vertical-align: middle; }
.content .dash-list .dash-table tbody tr:hover td { background: #eaeef2; }
.content .dash-list .dash-table tbody tr td.dash-content-cell-num { width: 65px; padding: 10px 0; }
.content .dash-list .dash-table tbody tr td:first-child { padding-left: 40px; }
.content .dash-list .dash-table tbody tr td:last-child { padding-right: 40px; position: relative; }
.content .dash-list .dash-table tbody tr td .ovt { width:100%; word-break: break-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content .dash-list .dash-table tbody tr td .progressItems { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; border-radius: 4px; background: #F7FAFC; overflow: hidden; }
.content .dash-list .dash-table tbody tr td .progressItems .progressItem { display: block; width: calc((100% - 3px) / 4); height:8px; background: #C1CDD9; }
.content .dash-list .dash-table tbody tr td .progressItems .progressItem.write-end { background: var(--color-subColor03); }
.content .dash-list .dash-table tbody tr td .progressItems .progressItem.approval { background: var(--color-subColor02); }
.content .dash-list .dash-table tbody tr td .progressItems .progressItem.hold { background: var(--color-subColor04); }
.content .dash-list .dash-table tbody tr td .noteBtn { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 30px; height:30px; margin: 0 auto; padding: 5px; background: #F7FAFC; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,0.11); cursor: pointer; }
.content .dash-list .dash-table tbody tr td .noteBtn span { display: block; width: 4px; height:4px; background: #172B4D; border-radius: 50%; }
.content .dash-list .dash-table tbody tr td .est-note-popup { width: 140px; background: #fff; border:1px solid #BEBEBE; box-shadow: 0 2px 4px rgba(23, 23, 23,0.18); border-radius: 5px; position: absolute; top:10px; right:40px; z-index: 99; display: none; }
.content .dash-list .dash-table tbody tr:nth-last-child(1) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-last-child(2) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-last-child(3) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-last-child(4) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-last-child(5) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-last-child(6) td .est-note-popup { top:auto; bottom:10px; }
.content .dash-list .dash-table tbody tr:nth-child(1) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-child(2) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-child(3) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-child(4) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-child(5) td .est-note-popup,
.content .dash-list .dash-table tbody tr:nth-child(6) td .est-note-popup { top:10px; bottom:auto; }
.content .dash-list .dash-table tbody tr td .est-note-popup > ul li a { display: block; padding: 20px; text-align: left; font-size: 15px; }
.content .dash-list .dash-table tbody tr td .est-note-popup > ul li a:hover { color: var(--color-subColor01); font-weight: 700; }
.content .page-box .writeWrap { position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 0; }
.content .page-box .writeWrap .inputBox { margin-top: 15px; }
.content .page-box .writeWrap .writeUl { justify-content: end; margin-right: 20px; }
.content .page-box .writeWrap .writeUl li { width: 80px; }
.content .page-box .writeWrap .writeUl > li .inputBox select { padding: 7px 10px; background: url(../img/ic_select.png) no-repeat calc(100% - 10px) 50% #fff; }
.content .writeWrap .ww-imgview-area { position: relative; }
.content .writeWrap .ww-imgview-area .btn-elim { position: absolute; top: 5px; right: 5px; }

.searchPopupBg { width: 100%; height:100%; background: rgba(0,0,0,0.4); z-index: 999; overflow: auto; position: fixed; top:0; left: 0; display: none; }
.searchPopup { max-width: 740px; margin: 100px auto 150px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease; position: relative; top:-30px; opacity: 0; }
.searchPopup.on { top:0; opacity: 1; }
.searchPopup .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:60px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.searchPopup .tit span { position: relative; }
.searchPopup .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.searchPopup .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.searchPopup .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.searchPopup .writeWrap { padding: 20px 40px; }
.fieldSetBg { width: 100%; height:100%; background: rgba(0,0,0,0.4); z-index: 999; overflow: auto; position: fixed; top:0; left: 0; display: none; }
.fieldSetBox { width: 425px; height:100%; background: #fff; position: absolute; top:0; right:-425px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: right 0.5s ease; }
.fieldSetBox.on { right:0; }
.fieldSetBox .inner { height:100%; }
.fieldSetBox .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:80px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.fieldSetBox .tit span { position: relative; }
.fieldSetBox .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.fieldSetBox .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.fieldSetBox .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.fieldSetBox .settingList { height:calc(100% - 84px); margin: 2px; }
.fieldSetBox .settingList .scrollBox { height:100%; padding: 20px 40px; overflow: auto; }
.fieldSetBox .settingList .fieldUl li { border:1px solid #999; border-radius: 5px; box-shadow: 0 2px 4px rgba(23, 23, 23,0.18); }
.fieldSetBox .settingList .fieldUl li:not(:first-child) { margin-top: 12px; }
.fieldSetBox .settingList .fieldUl li input[type="checkbox"] { display: none; }
.fieldSetBox .settingList .fieldUl li input[type="checkbox"].checkBoxCust + label { display: flex; flex-wrap: wrap; align-items: center; padding: 12px; cursor: pointer; }
.fieldSetBox .settingList .fieldUl li input[type="checkbox"].checkBoxCust + label span { display: block; width: 24px; height:24px; background: #fff; border:1px solid #999; border-radius: 3px; cursor: pointer; }
.fieldSetBox .settingList .fieldUl li input[type="checkbox"]:checked.checkBoxCust + label span { background: url("../img/ic_popup_close_purple.png") no-repeat 50% 50% #fff; border-color: var(--color-subColor01); }
.fieldSetBox .settingList .fieldUl li input[type="checkbox"].checkBoxCust + label em { margin-left: 8px; font-size: 15px; }
/* page */
.page-box { width: 100%; min-width:1210px; background: #F6F9FC; position: absolute; bottom:0; left:0; }
.page-btn-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height:80px; }
.page-btn-wrap .page { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 35px; height:35px; margin: 0 5px; background: #fff; border:1px solid rgba(136,152,170,0.5); border-radius: 50%; text-align: center; font-size: 13px; color:var(--color-subColor01); }
.page-btn-wrap .page.page-prev { background: url("../img/ic_prev.png") no-repeat 50% 50% #fff; text-indent: -9999px; }
.page-btn-wrap .page.page-next { background: url("../img/ic_next.png") no-repeat 50% 50% #fff; text-indent: -9999px; }
.page-btn-wrap .page.page-num:hover { background: #F7FAFC; }
.page-btn-wrap .page.page-num.on { background: var(--color-subColor01); color:#fff; border-color: var(--color-subColor01); box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
/* write element */
.est-infoBtnBox { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; }
.est-infoBtnBox.fix { position: fixed; top:120px; width:740px; z-index: 99; }
.est-infoBtnBox.fix + .est-write-wrap { margin-top: 60px; }
.est-infoBtnBox .est-infoBtn { width: 480px; height:40px; border-radius: 5px; overflow: hidden; border:1px solid #8898AA; box-shadow: 0 2px 3px rgba(0,0,0,0.05); }
.est-infoBtnBox .est-infoBtn ul { display: flex; flex-wrap: wrap; height:100%; }
.est-infoBtnBox .est-infoBtn ul li { width: calc(100% / 4); border-right: 1px solid #8898AA; }
.est-infoBtnBox .est-infoBtn ul li:last-child { border-right: none; }
.est-infoBtnBox .est-infoBtn ul li a { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height:100%; background: #fff; text-align: center; color: var(--color-mainColor); }
.est-infoBtnBox .est-infoBtn ul li.on a { background: var(--color-subColor01); color:#fff; }
.est-infoBtnBox .est-infoBtn.col2 { width: 240px; }
.est-infoBtnBox .est-infoBtn.col2 ul li { width: calc(100% / 2); }
.est-infoBtnBox .btnSubmit { width: 80px; height: 40px; font-size: 14px; }
.est-write { margin-top: 20px; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
.est-write:first-child { margin-top: 0; }
.est-write .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:60px; padding: 10px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.est-write .tit span { position: relative; }
.est-write .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.est-write .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.est-write .writeWrap + .tit { padding-top: 0; padding-bottom: 0; }
.est-write .tit .titBtnWrap { display: flex; flex-wrap: wrap; }
.est-write .tit .titBtnWrap .btn + .btn { margin-left: 10px; }
.est-write .tit .titBtnWrap .btn-title { width: 90px; text-align: right; }
.est-write .tit .btn.purpleLine { width: 80px; height: 40px; font-size: 14px; }


.writeWrap { padding: 40px; }
.writeWrap + .writeWrap { padding-top: 0; }
.writeWrap.apiArea { padding: 0; background: #ccc; }
.writeWrap.apiArea > * { width: 100%; }
.writeWrap.apiArea > iframe { display: block; width: 100%; font-size: 0; }
.writeWrap .write-tit { }
.writeWrap .write-tit b { font-weight: 700; }
.writeWrap .writeUl { display: flex; flex-wrap: wrap; margin-top: 15px; padding-bottom: 20px; gap: 30px; }
.writeWrap .writeUl:first-child { margin-top: 0; }
.writeWrap .writeUl.col1 > li { width: 100%; }
.writeWrap .writeUl.col2 > li { width: calc((100% - 30px) / 2);}
.writeWrap .writeUl.col3 > li { width: calc((100% - 60px) / 3); }
.writeWrap .writeUl.col3-2 > li { width: calc(66.66667% - 10px); }
.writeWrap .writeUl.col3-3 > li { width: calc(40% - 10px); }
.writeWrap .writeUl.col3-3 > li:nth-child(2) { width: 30%; }
.writeWrap .writeUl.col3-3 > li:not(:first-child) { margin-left: 30px; }
.writeWrap .writeUl.col3-4 { padding-bottom: 30px; }
.writeWrap .writeUl.col3-4 > li { width: 410px; }
.writeWrap .writeUl.col3-5 > li { width: 410px; }
.writeWrap .writeUl.col3-5 > li { width: 315px; }
.writeWrap .writeUl.col3-5 > li:not(:first-child) { margin-left: 40px; }
.writeWrap .writeUl.col3-5 > li:nth-child(2) { width: calc(100% - 355px); }
.writeWrap .writeUl.col4 > li { width: calc((100% - 90px) / 4);}
.writeWrap .writeUl.col6 > li { width: calc((100% - 150px) / 6); }
.writeWrap .writeUl > li .titWrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.writeWrap .writeUl > li .titWrap h5 { line-height: 1; position: relative; }
.writeWrap .writeUl > li .titWrap h5 b { font-weight: 700; }
.writeWrap .writeUl > li .titWrap h5 strong { color:#0F33FF; }
.writeWrap .writeUl > li .titWrap h5 em { font-size: 0.8em; color: var(--color-subColor04); }
.writeWrap .writeUl > li .titWrap.ess h5::after { content:"*"; color:var(--color-subColor04); }
.writeWrap .writeUl > li .titWrap.ess2 h5::after { content:"(*)"; }
.writeWrap .writeUl > li .titWrap.red h5 { color:var(--color-subColor04); }
.writeWrap .writeCheck input[type="checkbox"] { display: none; }
.writeWrap .writeCheck input[type="checkbox"].checkBoxCust + label { display: flex; flex-wrap: wrap; cursor: pointer; }
.writeWrap .writeCheck input[type="checkbox"].checkBoxCust + label span { display: block; width: 18px; height:18px; margin: 0 auto; background: #fff; border:1px solid #8898AA; border-radius: 4px; }
.writeWrap .writeCheck input[type="checkbox"]:checked.checkBoxCust + label span { background: url("../img/ic_check.png") no-repeat 50% 50% var(--color-subColor02); border-color: var(--color-subColor02); box-shadow: 0 3px 6px rgba(23,23,23,0.11); }
.writeWrap .writeCheck input[type="checkbox"].checkBoxCust + label em { margin-left: 5px; font-size: 12px; color:#999999; vertical-align: middle; }
.writeWrap .radioFlex { display: flex; flex-wrap: wrap; padding-top: 4px; }
.writeWrap .cheeseradio { width: 50%; }
.writeWrap input[type="radio"] { display: none; }
.writeWrap input[type="radio"].radioBoxCust + label { display: flex; flex-wrap: wrap; align-items: center; cursor: pointer; }
.writeWrap input[type="radio"].radioBoxCust + label span { display: block; width: 30px; height:30px; background: #fff; border:3px solid var(--color-mainColor); border-radius: 50%; opacity: 0.4; }
.writeWrap input[type="radio"]:checked.radioBoxCust + label span { border-color: var(--color-subColor01); opacity: 1; position: relative; }
.writeWrap input[type="radio"]:checked.radioBoxCust + label span::after { content:""; display: block; width: 14px; height:14px; background: var(--color-subColor01); border-radius: 50%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.writeWrap input[type="radio"].radioBoxCust + label em { margin-left: 8px; color:#999999; vertical-align: middle; }
.writeWrap input[type="radio"]:checked.radioBoxCust + label em { color: var(--color-subColor01); }
.writeWrap .writeUl > li .inputBox { margin-top: 25px; position: relative; }
.writeWrap .writeUl > li .titWrap + .inputBox { margin-top: 0; }
.writeWrap .writeUl > li .inputBox + .inputBox { margin-top: 40px; }
.writeWrap .writeUl > li .inputBox input[type="text"],
.writeWrap .writeUl > li .inputBox input[type="number"],
.writeWrap .writeUl > li .inputBox input[type="password"] { width: 100%; height:40px; padding: 10px 20px; border-radius: 5px; border:1px solid #BEBEBE; background: #fff; box-sizing: border-box; box-shadow: 0 2px 4px rgba(23,23,23,0.18); }
.writeWrap .writeUl > li .inputBox input[type="text"]::placeholder,
.writeWrap .writeUl > li .inputBox input[type="number"]::placeholder,
.writeWrap .writeUl > li .inputBox input[type="password"]::placeholder { color: #8898AA; }
.writeWrap .writeUl > li .inputBox input[type="text"]:focus,
.writeWrap .writeUl > li .inputBox input[type="number"]:focus,
.writeWrap .writeUl > li .inputBox input[type="password"]:focus { border-color: var(--color-subColor01); }
.writeWrap .writeUl > li .inputBox input[type="text"]:focus::placeholder,
.writeWrap .writeUl > li .inputBox input[type="number"]:focus::placeholder,
.writeWrap .writeUl > li .inputBox input[type="password"]:focus::placeholder { color: var(--color-subColor01); }
.writeWrap .writeUl > li .inputBox input[type="text"]:disabled,
.writeWrap .writeUl > li .inputBox input[type="number"]:disabled,
.writeWrap .writeUl > li .inputBox input[type="password"]:disabled { background: #F7FAFC; }
.writeWrap .writeUl > li .inputBox input[type="text"][readonly],
.writeWrap .writeUl > li .inputBox input[type="number"][readonly],
.writeWrap .writeUl > li .inputBox input[type="password"][readonly] { background: #F7FAFC; }
.writeWrap .writeUl > li .inputBox input[type="text"][readonly='readonly'],
.writeWrap .writeUl > li .inputBox input[type="number"][readonly='readonly'],
.writeWrap .writeUl > li .inputBox input[type="password"][readonly='readonly'] { background: #F7FAFC; }
.writeWrap .writeUl > li .inputBox.notify.data input[type="text"],
.writeWrap .writeUl > li .inputBox.notify.data input[type="number"],
.writeWrap .writeUl > li .inputBox.notify.data input[type="password"] { border-color:var(--color-subColor04); }
.writeWrap .writeUl > li .inputBox.notify.data input[type="text"]::placeholder,
.writeWrap .writeUl > li .inputBox.notify.data input[type="number"]::placeholder,
.writeWrap .writeUl > li .inputBox.notify.data input[type="password"]::placeholder { color:var(--color-subColor04); }
/* .writeWrap .writeUl > li .inputBox p { display: none; } */
.writeWrap .writeUl > li .inputBox.notify p { display: block; width: 100%; margin-top: 7px; font-size: 12px; color:#999999; position: absolute; top:40px; left:0; }
.writeWrap .writeUl > li .inputBox.notify textarea + p { position: static; }
.writeWrap .writeUl > li .inputBox.notify.data p { color:var(--color-subColor04); }
.writeWrap .writeUl > li .searchCust { display: flex; flex-wrap: wrap; position: relative; }
.writeWrap .writeUl > li .searchCust.notify p { display: block; width: 100%; margin-top: 7px; font-size: 12px; color:#999999; position: absolute; top:40px; left:0; }
.writeWrap .writeUl > li .searchCust.notify .inputBox { width: calc(100% - 85px); margin-top: 0; margin-right: 5px; }
.writeWrap .writeUl > li .searchCust .btn.search { width: 80px; height:40px; border:1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); font-weight: 700; line-height: 1.5; }
.writeWrap .writeUl > li .inputBox select { width: 100%; height:40px; padding: 10px 20px; border-radius: 5px; border:1px solid #BEBEBE; background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #fff; box-sizing: border-box; -webkit-appearance: none; box-shadow: 0 2px 4px rgba(23,23,23,0.18); color:#8898AA; }
.writeWrap .writeUl > li .inputBox select:focus { border-color: var(--color-subColor01); color: var(--color-subColor01); }
.writeWrap .writeUl > li .inputBox select:disabled { background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #F7FAFC; opacity: 1; color:#999; }
.writeWrap .writeUl > li .inputBox select[readonly] { background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #F7FAFC; opacity: 1; color:#999; }
.writeWrap .writeUl > li .inputBox select[readonly='readonly'] { background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #F7FAFC; opacity: 1; color:#999; }
.writeWrap .writeUl > li .inputBox textarea { width: 100%; height:180px; padding: 15px 20px; border-radius: 5px; border:1px solid #BEBEBE; background: #fff; box-sizing: border-box; box-shadow: 0 2px 4px rgba(23,23,23,0.18); resize: none; }
.writeWrap .writeUl > li .inputBox textarea.accbox {height:40px;}
.writeWrap .writeUl > li .inputBox select option { color: #333; }
.writeWrap .writeUl > li .inputBox textarea:focus { border-color: var(--color-subColor01); }
.writeWrap .writeUl > li .inputBox textarea:focus::placeholder { color: var(--color-subColor01); }
.writeWrap .writeUl > li .inputBox textarea:disabled { background: #F7FAFC; }
.writeWrap .writeUl > li .inputBox textarea[readonly] { background: #F7FAFC; }
.writeWrap .writeUl > li .inputBox textarea[readonly='readonly'] { background: #F7FAFC; }
.writeWrap .box_style {width: 100%; height:200px; margin-top:20px;resize:none;}
.writeWrap .writeUl > li .inputBox.notify.data textarea { border-color:var(--color-subColor04); }
.writeWrap .writeUl > li .inputBox.notify.data textarea::placeholder { color:var(--color-subColor04); }
.writeWrap .writeUl > li .inputBox .redioWrap .radioUl { display: flex; flex-wrap: wrap; }
.writeWrap .writeUl > li .inputBox .redioWrap .radioUl li { width:calc((100% - 10px) / 2); margin-right: 10px; }
.writeWrap .writeUl > li .inputBox .redioWrap .radioUl li:nth-child(2n) { margin-right: 0; }
.writeWrap .writeUl > li .inputBox .redioWrap .radioUl li input[type="radio"].insurance { display: none; }
.writeWrap .writeUl > li .inputBox .redioWrap .radioUl li input[type="radio"].insurance + label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height:40px; background: #8898AA; border-radius: 5px; color:#fff; text-align: center; opacity: 0.6; cursor: pointer; }
.writeWrap .writeUl > li .inputBox .redioWrap .radioUl li input[type="radio"]:checked.insurance + label { background: var(--color-mainColor); opacity: 1; }
.writeWrap .writeUl > li .inputBox input[type="text"].dateInput { padding: 10px 55px 10px 20px; background: url("../img/ic_calendar.png") no-repeat calc(100% - 20px) 50% #fff; }
.writeWrap .writeUl > li .inputBox.period { position: relative; }
.writeWrap .writeUl > li .inputBox.period::before { content:"~"; position: absolute; top:50%; left:-20px; transform: translateY(-50%); }
.writeWrap input[type="file"] { display: none; }
.writeWrap input[type="file"].fileCust + label { display: flex; flex-wrap: wrap; cursor: pointer; position: relative; }
.writeWrap input[type="file"].fileCust + label span { display: block; width: 100%; height:40px; margin: 0 auto; padding: 10px 125px 10px 20px; background: #fff; border:1px solid var(--color-subColor01); border-radius: 5px; box-shadow: 0 3px 6px rgba(23,23,23,0.11); line-height: 1.9; }
.writeWrap input[type="file"].fileCust + label em { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 105px; height:40px; background: #fff; border:1px solid var(--color-mainColor); border-radius: 5px; position: absolute; top:0; right:0; }
.writeWrap .picUploadList { margin-top: -50px; padding: 70px 20px 20px; background: #fff; border:1px solid #BEBEBE; border-radius: 5px; display: none; }
.writeWrap .picUploadList > ul { max-height:190px; overflow: auto; }
.writeWrap .picUploadList > ul > li { display: flex; flex-wrap: wrap; color: var(--color-subColor01); }
.writeWrap .picUploadList > ul > li:not(:first-child) { margin-top: 15px; }
.writeWrap .picUploadList > ul > li span.name { display:block; max-width: calc(100% - 50px); margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.writeWrap .picUploadList > ul > li .fileDeleteBtn { display: block; width: 24px; height:24px; border-radius: 6px; background: url("../img/ic_file_delete.png") no-repeat 50% 50% #BEBEBE; box-shadow: 0 3px 6px rgba(44,40,40,0.11); text-indent: -9999px; cursor: pointer; }
/* .writeWrap .picUploadList > ul::-webkit-scrollbar { background: rgba(136, 152, 170,0.5); }
.writeWrap .picUploadList > ul::-webkit-scrollbar-thumb { background: #999; } */
.writeWrap .public-category { border:1px solid #BEBEBE; border-radius: 5px; box-shadow: 0 2px 4px rgba(23,23,23,0.18); }
.writeWrap .public-category h5 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom:1px solid rgba(136,152,170,0.6); font-weight: 700; line-height: 1; position: relative; }
.writeWrap .public-category .cateList { padding: 0 20px; }
.writeWrap .public-category .cateList li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 0; }
.writeWrap .public-category .cateList li:not(:last-child) { border-bottom:1px solid rgba(136,152,170,0.6); }
.writeWrap .public-category .cateList li span { width: 30px; }
.writeWrap .public-category .cateList li em { width: calc(100% - 50px); color:#999; text-align: right; }
.writeWrap .public-category .cateList li em input[type="text"] { height:25px; padding: 5px 10px; text-align: right; }
.writeWrap .writeUl > li .inputBox.pub * { margin-top: 25px; }
.writeWrap .writeUl > li .inputBox.pub h6 { margin-top: 0; position: absolute; top:0; left:0; }
/*.writeWrap .writeUl > li .inputBox.pub h6.ess::after { content:"*"; color:var(--color-subColor04); }*/
.writeWrap .writeUl > li .inputBox.price input[type="text"],
.writeWrap .writeUl > li .inputBox.price input[type="number"],
.writeWrap .writeUl > li .inputBox.price input[type="password"] { text-align: right; }
.wrap-flex .wrap-full { transition: max-width 0.5s ease, min-width 0.5s ease; }
.wrap-full .est-write .writeWrap { min-height: calc(100vh - 230px); }
.wrap-flex .wrap-240 { display: none; }
.wrap-240 .est-write .tit { padding: 10px 35px; }
.wrap-240 .est-write .writeWrap.pic { padding-right:20px; }
.est-write .writeWrap .picListWrap { max-height: calc(100vh - 310px); min-height: calc(100vh - 310px); padding-right:20px; }
/* .est-write .writeWrap .picListWrap::-webkit-scrollbar { background: rgba(136, 152, 170,0.5); }
.est-write .writeWrap .picListWrap::-webkit-scrollbar-thumb { background: #999; } */
.est-write .writeWrap .picListWrap .picListUl li img { width: 100%; }
/* .est-write .writeWrap .picListWrap .picListUl li:not(:first-child) { margin-top: 20px; } */
.est-write .tableWrap .write-tit { padding: 40px 40px 0; }
.est-write .writeWrap.tableWrap .write-tit { padding: 0; }
.est-write .tit + .tableWrap .write-tit { padding-top: 0; }
.est-write .tableWrap + .tableWrap .write-tit { padding: 0 40px 0; }
.est-write .tableWrap + .writeWrap.tableWrap .write-tit { padding: 0; }
.est-write .tableWrap .write-tit b { font-weight: 700; }
.picPopupBg { width: 100%; height:100%; background: rgba(0,0,0,0.4); z-index: 999; overflow: auto; position: fixed; top:0; left: 0; display: none; }
.picPopup { max-width: 740px; margin: 100px auto 150px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease; position: relative; top:-30px; opacity: 0; }
/* .picPopup { max-width: 740px; margin: 100px auto 150px; height: calc(100% - 200px); background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease; position: relative; top:-30px; opacity: 0; } */
.picPopup.on { top:0; opacity: 1; }
.picPopup .inner { height:100%; }
.picPopup .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:80px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.picPopup .tit span { position: relative; }
.picPopup .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.picPopup .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.picPopup .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.picPopup .picWrap { height:calc(100% - 80px); padding: 40px 20px; }
.picPopup .picWrap .picWrapScroll { height:100%; padding: 0 20px; font-size: 0; }
.picPopup .picWrap img { max-width:100%; }
.picPopup .pic-slider-pad { padding: 50px; display: flex; align-items: center; }
.picPopup .pic-slider-pad .img-box { width: 100%; height: initial; }
.picPopup .pic-slider-pad .img-box img { width: 100%; height: 100%; object-fit: cover; }
.picPopup .swiper-nav .swiper-button-prev { background-image: url(../img/picSlider_prev.png); background-size: 30px 30px; width: 30px; height: 30px; top: inherit; }
.picPopup .swiper-nav .swiper-button-next { background-image: url(../img/picSlider_next.png); background-size: 30px 30px; width: 30px; height: 30px; top: inherit; }
/* datepicker */
.ui-datepicker { width: 370px; padding: 30px 20px 20px; }
.ui-datepicker .ui-datepicker-title { display: flex; flex-wrap: wrap; justify-content: center; }
.ui-widget-header { background: none; border:none; }
.ui-widget-header .ui-icon.ui-icon-circle-triangle-w { width: 9px; height:15px; background: url("../img/ic_prev.png") no-repeat 50% 50%; cursor: pointer; }
.ui-widget-header .ui-icon.ui-icon-circle-triangle-e { width: 9px; height:15px; background: url("../img/ic_next.png") no-repeat 50% 50%; cursor: pointer; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top:2px; }
.ui-datepicker .ui-datepicker-next-hover { right:2px; }
.ui-datepicker .ui-datepicker-next-hover.ui-state-hover,
.ui-widget-content .ui-datepicker-next-hover.ui-state-hover { background: none; }
.ui-datepicker .ui-datepicker-prev-hover { left:2px; }
.ui-datepicker .ui-datepicker-prev-hover.ui-state-hover,
.ui-widget-content .ui-datepicker-prev-hover.ui-state-hover { background: none; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { border:none; text-align: center; font-weight: 700; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 36px; height:36px; border-radius: 50%; border: none; background: #fff; color:#666; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background: #F1F3F9; color:#333; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border:none; background: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover { background: rgba(119, 100, 228, 0.1); }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover { background: rgba(119, 100, 228, 0.2); color:#7764E4; font-weight: 700; }
/* table style */
.tableWrap { padding-bottom: 60px; position: relative; }
.listTable { width: 100%; margin-top: 20px; /* table-layout: fixed; */ }
.listTable thead tr th { padding: 10px 5px; background: #F1F3F9; font-size: 12px; text-align: center; color:#8898AA; vertical-align: middle; }
.listTable thead tr th.part-check { width: 80px; padding: 5px 5px; vertical-align: middle; }
.listTable thead tr th.num { width: 80px; }
.listTable thead tr th.code { width: 210px; }
.listTable thead tr th.date { width: 105px; }
.listTable thead tr th:first-child { padding-left: 40px; }
.listTable thead tr th:last-child { padding-right: 40px; }
.writeWrap.tableWrap .listTable thead tr th:first-child { padding-left: 5px; }
.writeWrap.tableWrap .listTable thead tr th:last-child { padding-right: 5px; }
.listTable tbody tr td { padding: 15px 5px; text-align: center; font-size: 13px; vertical-align: middle; }
.listTable.fs-sm tbody tr td {font-size: 11px;}
.clamp { display: -webkit-box; max-height:2.4em; overflow: hidden; word-break: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; text-overflow: ellipsis; }
.listTable tbody tr td.ov { word-break: break-all; }
.listTable thead tr th.th-ellipsis { width: 150px; max-width: 150px; }
.listTable tbody tr td.td-ellipsis { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.listTable tbody tr td.part-check { padding: 5px 5px; vertical-align: middle; }
.listTable tbody tr td.tal { text-align: left; }
.listTable tbody tr td.price { text-align: right; }
.listTable tbody tr td:first-child { padding-left: 40px; }
.listTable tbody tr td:last-child { padding-right: 40px; }
.listTable tbody tr td b { font-weight: 700; }
.listTable tbody tr td a { color: var(--color-subColor01); }
.listTable tbody tr td a:hover { text-decoration: underline; }
.listTable tbody tr td img { vertical-align: middle; }
.writeWrap.tableWrap .listTable tbody tr td:first-child { padding-left: 5px; }
.writeWrap.tableWrap .listTable tbody tr td:first-child.checkTb { padding-left: 0; }
.writeWrap.tableWrap .listTable tbody tr td:last-child { padding-right: 5px; }
.listTable tbody tr:nth-child(2n) td { background: #F7FAFC; }
.listTable tbody tr td input[type="text"],
.listTable tbody tr td input[type="number"],
.listTable tbody tr td input[type="password"] { width: 100%; height:25px; padding: 5px 10px; border-radius: 5px; border:1px solid #BEBEBE; background: #fff; box-sizing: border-box; box-shadow: 0 2px 4px rgba(23,23,23,0.18); font-size: 13px }
.listTable tbody tr td.long input[type="text"],
.listTable tbody tr td.long input[type="number"],
.listTable tbody tr td.long input[type="password"] { width: 180px; }
.listTable tbody tr td input[type="text"]::placeholder,
.listTable tbody tr td input[type="number"]::placeholder,
.listTable tbody tr td input[type="password"]::placeholder { color: #8898AA; font-size:13px; }
.listTable tbody tr td input[type="text"]:focus,
.listTable tbody tr td input[type="number"]:focus,
.listTable tbody tr td input[type="password"]:focus { border-color: var(--color-subColor01); }
.listTable tbody tr td input[type="text"]:focus::placeholder,
.listTable tbody tr td input[type="number"]:focus::placeholder,
.listTable tbody tr td input[type="password"]:focus::placeholder { color: var(--color-subColor01); }
.listTable tbody tr td input[type="text"]:disabled,
.listTable tbody tr td input[type="number"]:disabled,
.listTable tbody tr td input[type="password"]:disabled { background: #F7FAFC; }
.listTable tbody tr td input[type="text"][readonly],
.listTable tbody tr td input[type="number"][readonly],
.listTable tbody tr td input[type="password"][readonly] { background: #F7FAFC; }
.listTable tbody tr td input[type="text"][readonly='readonly'],
.listTable tbody tr td input[type="number"][readonly='readonly'],
.listTable tbody tr td input[type="password"][readonly='readonly'] { background: #F7FAFC; }
.listTable tbody tr td select { width: 100%; height:25px; padding: 3px 10px; border-radius: 5px; border:1px solid #BEBEBE; background: url("../img/ic_select.png") no-repeat calc(100% - 10px) 50% #fff; box-sizing: border-box; -webkit-appearance: none; box-shadow: 0 2px 4px rgba(23,23,23,0.18); color:#8898AA; font-size:13px; }
.listTable tbody tr td.long select { width: 180px; }
.listTable tbody tr td select:focus { border-color: var(--color-subColor01); color: var(--color-subColor01); }
.listTable tbody tr td select:disabled { background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #F7FAFC; opacity: 1; color:#999; }
.listTable tbody tr td select[readonly] { background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #F7FAFC; opacity: 1; color:#999; }
.listTable tbody tr td select[readonly='readonly'] { background: url("../img/ic_select.png") no-repeat calc(100% - 20px) 50% #F7FAFC; opacity: 1; color:#999; }
.listTable tbody tr td select option { color: #333; }
.listTable tr .checkTb { width: 65px; padding: 10px 0; }
.listTable.line thead tr:first-child th { border-top:1px solid #000; }
.listTable.line tbody tr:last-child td { border-bottom:1px solid #000; }
/* .listTable tbody tr td a { color: var(--color-subColor01); }
.listTable tbody tr td .status.dis { color: var(--color-subColor04); } */
.amountBox { display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 0 40px; }
.amountBox.atop { margin-top: 40px; }
.listTable + .amountBox { margin-top: 20px; }
.btn.amount { width:fit-content; height:40px; padding: 0 20px 0 40px; border:1px solid var(--color-mainColor); background: #fff; box-shadow: 0 3px 6px rgba(44,40,40,0.11); font-size: 15px; font-weight: 700; color:var(--color-mainColor); cursor: auto; }
.amountBox.btw { justify-content: space-between; }
.btn.delete { width: 80px; height:40px; border: 1px solid var(--color-subColor04); background: #fff; color:var(--color-subColor04); font-size: 14px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
.est-write .writeWrap .writeUl > li .addCust { display: flex; flex-wrap: wrap; position: relative; }
.est-write .writeWrap .writeUl > li .addCust.notify p { display: block; width: 100%; margin-top: 7px; font-size: 12px; color:#999999; position: absolute; top:50px; left:0; }
.est-write .writeWrap .writeUl > li .addCust.notify .inputBox { width: calc(100% - 85px); margin-top: 0; margin-right: 5px; }
.est-write .writeWrap .writeUl > li .addCust .btn.add { width: 80px; height:40px; border:1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); font-weight: 700; line-height: 1.5; }
.listTable input[type="checkbox"] { display: none; }
.listTable input[type="checkbox"].checkBoxCust + label { display: flex; flex-wrap: wrap; cursor: pointer; }
.listTable input[type="checkbox"].checkBoxCust + label span { display: block; width: 25px; height:25px; margin: 0 auto; background: #fff; border:1px solid #8898AA; border-radius: 6px; }
.listTable input[type="checkbox"]:checked.checkBoxCust + label span { background: url("../img/ic_check.png") no-repeat 50% 50% var(--color-subColor02); border-color: var(--color-subColor02); box-shadow: 0 3px 6px rgba(23,23,23,0.11); }
.listTable input[type="checkbox"].checkBoxCust + label em { margin-left: 5px; font-size: 12px; color:#999999; vertical-align: middle; }
.tableWrap .addBox { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.tableWrap .addBox .btn.add { width: 80px; height:40px; border:1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); font-weight: 700; line-height: 1.5; }
.activeWrap .activeUl > li { display: none; }
.activeWrap .activeUl > li.active { display: block; }
.partBtnWrap { display: flex; flex-wrap: wrap; }
.partBtnWrap > button:last-child { margin-left: 10px; }
.partBtnWrap .btn.download { width: 200px; height:40px; border:1px solid var(--color-mainColor); background: #fff; box-shadow: 0 3px 6px rgba(44,40,40,0.11); font-size: 15px; color:var(--color-mainColor); }
.partBtnWrap .btn.upload { width: 200px; height:40px; border:1px solid var(--color-mainColor); background: #fff; box-shadow: 0 3px 6px rgba(44,40,40,0.11); font-size: 15px; color:var(--color-mainColor); }
.page-table .page-btn-wrap { height:fit-content; margin-top: 40px; }
.regBox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 0 40px; }
.regBox + .regBox { margin-top: 35px; }
.regBox p { font-size: 12px; color:#999; }
.btn.reg { width: 80px; height:40px; border: 1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); font-size: 14px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
/* 견적 출력 */
.downloadBtnWrap { display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 40px 40px 0; }
.btn.downloadBtn { width: 120px; height:40px; font-size: 14px; }
.listTable.output thead tr th:nth-child(6) { width: 120px; }
.estBtnWrap { display: flex; flex-wrap: wrap; justify-content: flex-end; padding:0 40px; position: absolute; bottom:55px; right:0; }
.btn.estBtn { width: 80px; height: 40px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); }
.btn.estBtn:last-child { margin-left: 10px; }
.tit-est-date { display: flex; flex-wrap: wrap; position: relative; }
.tit-est-date::after { content: ""; width: 100%; height: 1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left: 0; bottom: 0; }
.tit-est-date > span { display: block; width: 50%; padding: 30px 10px; text-align: center; position: relative; }
.tit-est-date > span::before { content: ""; display: block; width: 1px; height: 40px; background: #C1CDD9; position: absolute; top:50%; left:0; transform: translateY(-50%); }
.tit-est-date > span:first-child::before { display: none; }
.listTable.line { border-top:1px solid #000; border-bottom:1px solid #000; font-size: 13px; }
.listTable.line tbody tr th { padding: 10px 5px; border-bottom: 1px solid #C1CDD9; background: #F1F3F9; color:#8898AA; font-weight: 500; vertical-align: middle; text-align: center; }
.listTable.line tbody tr:nth-child(8) th { border-bottom: 1px solid #000; }
.listTable.line tbody tr td { padding: 10px 5px; border-bottom: 1px solid #C1CDD9; }
.listTable.line tbody tr td:first-child { padding-left: 20px; }
.listTable.line tbody tr th:first-child + td { padding-left: 20px; }
.listTable.line tbody tr td:first-child.sortImg, .listTable.line thead tr th:first-child.sortImg { padding: 0; text-align: left; }
.listTable.line tbody tr td.sortImg { position: relative; }
.listTable.line tbody tr td.sortImg img { position: absolute; top: 0; left: 0; width: 18px; height: 18px; }
.listTable.line tbody tr img { width: 22px; height: 22px; }
.listTable.line tbody tr:nth-child(2n) td { background: none; }
.listTable.line tbody tr:last-child td { border-bottom: none; }
.listTable.line tbody tr:nth-child(7) th:first-child { border-bottom: none; }
.listTable.line tbody tr:last-child th { border-bottom: none; }
/* .listTable.line tbody tr.grayTxt td { color:#999; } */
/* .listTable.line tbody tr.grayTxt td:nth-child(n+5) { color:inherit; } */
/* .listTable tbody tr.titTr { background: #F7FAFC; border-top: 1px solid #C1CDD9; font-weight: 600; } */
/* .listTable tbody tr.grayTr { background: #f0f0f0; }
.listTable tbody tr.redTr { background: #fbe8e8; } */
.listTable tbody tr.total { background: #F7FAFC; }
.listTable tbody tr.total td.pr-td { padding: 20px 25px; }
.listTable tbody tr td.nope { text-decoration: line-through; color:var(--color-subColor04); }
.listTable tbody tr td span { color:#0F33FF; }
.listTable.line.est-output tbody tr td { padding-right: 0; }
.listTable.line.est-output tbody tr td:last-child { padding-right: 20px; }
.listTable.line.est-output tbody tr td:nth-last-child(2n+1) { color:#666; }
.listTable.line.summary tbody tr td { padding: 5px; border-bottom: none; }
.listTable.line.summary tbody tr td:nth-child(2n+1) { padding-left: 12px; }
.listTable.line.summary tbody tr td:nth-child(2n) { padding-right: 12px; }
.listTable.line.summary tbody tr:first-child td { padding-top: 20px; }
.listTable.line.summary tbody tr:nth-last-child(2) td { padding-bottom: 20px; }
.listTable.line.summary tbody tr.total td { padding: 20px; }
.summary-box { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }
.summary-box ul { display: flex; flex-wrap: wrap; padding: 15px 40px; background: #F7FAFC; }
.summary-box ul li { padding: 0 10px; position: relative; }
.summary-box ul li::after { content:""; display: block; width: 1px; height:13px; background: #C1CDD9; position: absolute; top:50%; right: 0; transform: translateY(-50%); }
.summary-box ul li:last-child::after { display: none; }
.modifyP { margin: -40px 0 0; padding: 0 40px; position: relative; }
.writeUl.repair { padding-bottom: 0; }
.writeUl.repair li div { height:120px; background: #BEBEBE; }
.writeUl.repair li{ height:120px;}
.writeUl.repair li img{ width: 100%; height: 100%;}
.repairEtcUl { margin-top: 20px; }
.repairEtcUl li:not(:first-child) { margin-top: 5px; }
.repairEtcUl li > a { max-width: calc(100% - 65px); color: #999; }
.repairEtcUl li > a em { display: inline-block; margin-left: 10px; vertical-align: middle; }
.tb-info { margin-top: 20px; padding: 0 40px 0; }
.tb-info-ul { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.tb-info-ul li { display: flex; flex-wrap: wrap; align-items: center; }
.tb-info-ul li:last-child { margin-left: 20px; }
.tb-info-ul li .color-red { width: 20px; height:20px; background: #fbe8e8; border: 1px solid #aaa; }
.tb-info-ul li .color-gray { width: 20px; height:20px; background: #f0f0f0; border: 1px solid #aaa; }
.tb-info-ul li p { margin-left: 5px; font-size: 13px; }
.send-popup { max-width: 740px; min-width: 740px; max-height:0; overflow: hidden; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease, max-height 0s ease 0.1s, margin 0s ease 0.1s; position: relative; top:-30px; opacity: 0; }
.send-popup.on { margin: 100px auto 150px; top:0; opacity: 1; max-height:1200px; transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease, max-height 0s ease, margin 0s ease; }
.send-popup .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:80px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.send-popup .tit span { position: relative; }
.send-popup .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.send-popup .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.send-popup .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.send-popup .writeWrap { padding: 20px 40px; }
.send-popup .writeWrap .writeUl { padding-bottom: 0; }
.send-popup .writeWrap .writeUl + .writeUl { margin-top: 40px; }
.compare-popup { font-size: 1vw; }
.compare-popup { width:calc(100% - 80px); max-width: 1840px; min-width: 1600px; max-height:0; overflow: hidden; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease, max-height 0s ease 0.1s, margin 0s ease 0.1s; position: relative; top:-30px; opacity: 0; }
/* .compare-popup { width:calc(100% - 80px); max-width: 1840px; min-width: 1600px; max-height:0; overflow: hidden; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease, max-height 0s ease 0.1s, margin 0s ease 0.1s; position: relative; top:-30px; opacity: 0; } */
.compare-popup.on { margin: 100px auto 150px; top:0; opacity: 1; max-height:10000px; transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease, max-height 0s ease, margin 0s ease; }
.compare-popup .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:60px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.compare-popup .tit span { position: relative; }
.compare-popup .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.compare-popup .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.compare-popup .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.compare-popup .tit.date { justify-content: center; font-size: 15px; color: #333; }
.compare-popup .writeWrap { padding: 20px 40px; }
.est-compare-box .est-compare-ul { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 40px 40px; }
.est-compare-box .est-compare-ul > li { width: calc((100% - 40px) / 2); }
.compare-popup .listTable thead tr th:first-child { padding-left: 15px }
.compare-popup .listTable thead tr th:last-child { padding-right: 15px }
.compare-popup .listTable.line.summary tbody tr td:nth-child(2n+1) { padding-left: 12px }
.compare-popup .listTable.line.summary tbody tr td:nth-child(2n) { padding-right: 12px }
.popup-bg::-webkit-scrollbar { width: 3px; height: 15px; background: #B7C1CC; }
.popup-bg::-webkit-scrollbar-thumb { background: #585857; }


/* 고객지원 */
.twinUl { display: flex; flex-wrap: wrap; justify-content: space-between; }
.twinUl li { width: calc((100% - 15px) / 2); }
.saveBtnWrap > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.saveBtnWrap > ul li:not(:first-child) { margin-left: 10px; }
.saveBtnWrap .btn { margin: 0 auto; }
.okBtnWrap > ul { display: flex; flex-wrap: wrap; justify-content: center; }
.okBtnWrap > ul li:not(:first-child) { margin-left: 10px; }
.okBtnWrap .btn { margin: 0 auto; }
.regBtnWrap { margin-top: 20px; }
.regBtnWrap .btn { margin: 0 auto; height:40px; font-weight: 700; }
.regBox .searchCust { display: flex; flex-wrap: wrap; position: relative; }
.regBox .searchCust .inputBox { width: calc(100% - 85px); margin-top: 0; margin-right: 5px; }
.regBox .searchCust .inputBox input[type="text"],
.regBox .searchCust .inputBox input[type="number"],
.regBox .searchCust .inputBox input[type="password"] { width: 345px; height:40px; padding: 10px 20px; border-radius: 5px; border:1px solid #BEBEBE; background: #fff; box-sizing: border-box; box-shadow: 0 2px 4px rgba(23,23,23,0.18); }
.regBox .searchCust .inputBox input[type="text"]::placeholder,
.regBox .searchCust .inputBox input[type="number"]::placeholder,
.regBox .searchCust .inputBox input[type="password"]::placeholder { color: #8898AA; }
.regBox .searchCust .inputBox input[type="text"]:focus,
.regBox .searchCust .inputBox input[type="number"]:focus,
.regBox .searchCust .inputBox input[type="password"]:focus { border-color: var(--color-subColor01); }
.regBox .searchCust .inputBox input[type="text"]:focus::placeholder,
.regBox .searchCust .inputBox input[type="number"]:focus::placeholder,
.regBox .searchCust .inputBox input[type="password"]:focus::placeholder { color: var(--color-subColor01); }
.regBox .searchCust .inputBox input[type="text"]:disabled,
.regBox .searchCust .inputBox input[type="number"]:disabled,
.regBox .searchCust .inputBox input[type="password"]:disabled { background: #F7FAFC; }
.regBox .searchCust .inputBox input[type="text"][readonly],
.regBox .searchCust .inputBox input[type="text"][readonly='readonly'],
.regBox .searchCust .inputBox input[type="number"][readonly],
.regBox .searchCust .inputBox input[type="number"][readonly='readonly'],
.regBox .searchCust .inputBox input[type="password"][readonly],
.regBox .searchCust .inputBox input[type="password"][readonly='readonly'] { background: #F7FAFC; }
.regBox .searchCust .btn.search { width: 80px; height:40px; border:1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); font-weight: 700; line-height: 1.5; }
.tit + .tableWrap { margin-top: 40px; }
.flexBtnWrap { display: flex; flex-wrap: wrap; }
.flexBtnWrap .btn:last-child { margin-left: 10px; }
.popup-bg { width: 100%; height:100%; background: rgba(0,0,0,0.4); overflow: auto; position: fixed; top:0; left:0; z-index: 999; overflow-y: auto; display: none; }
.reg-popup { max-width: 740px; max-width: 740px; margin: 100px auto 150px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease; position: relative; top:-30px; opacity: 0; }
.reg-popup.on { top:0; opacity: 1; }
.reg-popup .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:80px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.reg-popup .tit span { position: relative; }
.reg-popup .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.reg-popup .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.reg-popup .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.reg-popup .writeWrap { padding: 20px 40px; }
.reg-popup .writeWrap input[type="file"].fileCust + label span { width: calc(100% - 115px); padding: 10px 20px; background: #fff; border:1px solid #999; color: var(--color-subColor01); }
.reg-popup .writeWrap input[type="file"].fileCust + label em { position: static; }
/* 사용자 가이드 상세 페이지 */
.viewWrap { padding: 40px; }
.viewWrap .view-header { padding: 10px 0 20px; border-bottom: 1px solid #C1CDD9; }
.viewWrap .view-header .view-tit { font-size: 16px; font-weight: 700; }
.viewWrap .view-header .view-date { margin-top: 20px; font-size: 13px; color:#999; }
.viewWrap .view-cont { padding: 40px 0; }
.viewWrap .view-file-wrap { padding: 20px 0; border-top: 1px solid #C1CDD9; border-bottom: 1px solid #C1CDD9; }
.viewWrap .view-file-wrap .view-file { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; }
.viewWrap .view-file-wrap .view-file > h6 { width: 65px; color: #999; }
.viewWrap .view-file-wrap .view-file > a { max-width: calc(100% - 65px); color: #999; }
.viewWrap .view-file-wrap .view-file > a em { display: inline-block; margin-left: 10px; vertical-align: middle; }
/* 환경설정 */
.groupBox { display: flex; flex-wrap: wrap; justify-content: space-between; height:calc(100% - 80px); padding:40px; }
.groupBox .writeWrap { width: calc((100% - 40px) / 2); padding: 0; }
.groupBox .writeWrap .writeUl { margin-top: 0; }
.groupApiBox { width: calc((100% - 40px) / 2); height:100%; padding: 10px; background: #fff; border:1px solid rgb(136, 152, 170, 0.5); }
.groupApiBox .groupBtnBox { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.groupApiBox .groupBtnBox .btn { width: 60px; height: 30px; font-size: 13px; }
.groupApiBox .groupBtnBox .btn:last-child { margin-left: 10px; }
.groupApiBox .groupApiScroll { height:calc(100% - 40px); overflow: auto; }
.groupApiBox .groupApiScroll::-webkit-scrollbar { width: 12px; height: 12px; }
.groupApiBox .groupApiScroll .scroll { width: 700px; height:2000px; }
.writeWrap .saveCheck { margin: 10px 0 20px; }
.writeWrap .saveCheck input[type="checkbox"] { display: none; }
.writeWrap .saveCheck input[type="checkbox"].checkBoxCust + label { display: flex; flex-wrap: wrap; cursor: pointer; }
.writeWrap .saveCheck input[type="checkbox"].checkBoxCust + label span { display: block; width: 25px; height:25px; margin-top: -2px; background: #fff; border:1px solid #8898AA; border-radius: 6px; }
.writeWrap .saveCheck input[type="checkbox"]:checked.checkBoxCust + label span { background: url("../img/ic_check.png") no-repeat 50% 50% var(--color-subColor02); border-color: var(--color-subColor02); box-shadow: 0 3px 6px rgba(23,23,23,0.11); }
.writeWrap .saveCheck input[type="checkbox"].checkBoxCust + label em { margin-left: 5px; color:#999999; vertical-align: middle; }
.shd-account-list { margin-top: 20px; }
.shd-account-list ul { border-top: 1px solid #F7FAFC; border-bottom: 1px solid #F7FAFC; }
.shd-account-list ul li { display: flex; flex-wrap: wrap; }
.shd-account-list ul li:nth-child(2n) { background: #F7FAFC; }
.shd-account-list ul li div { width: calc((100% - 220px) / 2); padding: 20px 10px; text-align: center; }
.shd-account-list ul li div:first-child { padding-left: 20px; text-align: left; }
.shd-account-list ul li div:last-child { padding-right: 40px; }
.shd-account-list ul li div.a-id { width: 160px; }
.shd-account-list ul li div.a-delete { width: 60px; color: #F53C56; }
.findPopupBg { width: 100%; height:100%; background: rgba(0,0,0,0.4); z-index: 999; overflow: auto; position: fixed; top:0; left: 0; display: none; }
.findPopup { max-width: 740px; margin: 100px auto 150px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px rgba(44,40,40,0.11); transition: transform 0.5s ease, top 0.5s ease, opacity 0.5s ease; position: relative; top:-30px; opacity: 0; }
.findPopup.on { top:0; opacity: 1; }
.findPopup .tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; height:80px; padding: 20px 40px; font-size: 16px; font-weight: 700; color:var(--color-mainColor); line-height: 1.1; position: relative; }
.findPopup .tit span { position: relative; }
.findPopup .tit span.ess::after { content:"*"; color:var(--color-subColor04); }
.findPopup .tit::after { content:""; width: 100%; height:1px; background: #8898AA; transform: scaleY(0.5); opacity: 0.6; position: absolute; left:0; bottom:0; }
.findPopup .tit .popupClose { width: 12px; height:12px; border:none; background: url("../img/ic_popup_close.png") no-repeat 50% 50%; text-indent: -9999px; cursor: pointer; }
.findPopup .writeWrap { padding: 20px 40px; }
.findPopup .writeWrap input[type="radio"].radioBoxCust + label { justify-content: center; }
.findPopup .writeWrap input[type="radio"].radioBoxCust + label span { display: block; width: 26px; height:26px; background: #fff; border:3px solid var(--color-mainColor); border-radius: 50%; opacity: 0.4; }
.findPopup .writeWrap input[type="radio"]:checked.radioBoxCust + label span { border-color: var(--color-subColor01); opacity: 1; position: relative; }
.findPopup .writeWrap input[type="radio"]:checked.radioBoxCust + label span::after { content:""; display: block; width: 12px; height:12px; background: var(--color-subColor01); border-radius: 50%; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.findPopup .writeWrap.tableWrap { margin-top: -40px; padding-top: 0; }
.findPopup .page-table .page-btn-wrap { margin-top: 20px; }
.popupBtnWrap { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.popupBtnWrap .btn { width: 95px; height:40px; }
.popupBtnWrap .btn:nth-child(2) { margin-left: 10px; }
.page-table + .popupBtnWrap { margin: 20px auto 0; }
.searchNdown { display: flex; flex-wrap: wrap; }
.searchNdown .dateSearchCust { width: calc(100% - 240px); }
.writeWrap .writeUl > li .dateSearchCust { display: flex; flex-wrap: wrap; position: relative; }
.writeWrap .writeUl > li .dateSearchCust .inputBox { width: calc(100% - 95px); margin-top: 0; margin-right: 15px; }
.writeWrap .writeUl > li .dateSearchCust .btn.search { width: 80px; height:40px; border:1px solid var(--color-mainColor); background: #fff; color:var(--color-mainColor); font-weight: 700; line-height: 1.5; }
.searchNdown .btn.navyline { width: 200px; height:40px; margin-left: 40px; line-height: 1.5; }
.writeWrap + .viewWrap { padding-top: 0; }
.chart { height:500px; background: #f7f7f7; }
.mem_detaile .popupBtnWrap .btn { margin-top: 15px; }
/* responsive */
@media screen and (max-width:1300px){
    .writeWrap .writeUl.col3-5 > li { width: 200px; }
    .writeWrap .writeUl.col3-5 > li:nth-child(2) { width: calc(100% - 240px); }
}
@media screen and (max-width:1200px){
    .writeWrap .writeUl.col3-5 > li { width: 150px; }
    .writeWrap .writeUl.col3-5 > li:nth-child(2) { width: calc(100% - 180px); }
    .writeWrap .writeUl.col3-5 > li:not(:first-child) { margin-left: 30px; }
    .searchNdown .dateSearchCust { width: calc(100% - 160px); }
    .searchNdown .btn.navyline { width: 130px; margin-left: 30px; }
}

/* 스크롤 슬라이드 테스트 */
/* .picSlider .swiper-slide { height:600px; background: #ccc; } */

.h-auto {height: auto !important;}
.mb-1 {margin-bottom: 0.25rem !important;}
.align-items-center {align-items: center !important;}