@charset "utf-8";

/* 본문 바로가기 */
.skip-navi {display: block; position: absolute; top: -100px; color: #000; text-align: center;}
.skip-navi:focus {position: static;}


/* Article top */
.article-top {display: table; position: relative; width: 100%; height: 40px;}
.article-top > * {display: table-cell; width: 50%;}
.article-top .left-col h3 {position: absolute; left: 0; top: 7px;}
.article-top .right-col {text-align: right;}


/* Board */
.board-top {display: table; width: 100%; margin-top: 30px;}
.board-top > * {display: table-cell; width: 50%;}
.board-top .right-col {text-align: right;}
.board-top .result-count {display: inline-block; height: 40px; color: #666; font-weight: 600; line-height: 40px; letter-spacing: -0.4px;}
.board-top .result-count span {letter-spacing: 0;}

.board-list {margin-top: 10px; border-top: 1px solid #000; background: #fff;}
.board-list table td {padding: 5px 8px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; color: #666; font-size: 14px; text-align: center; line-height: 20px;}
.board-list table td:last-child {border-right: 0;}
.board-list table td .lnk {color: #5431b0; text-decoration: underline;}
.board-list table .head td,
.board-list table td.total {color: #222; font-weight: 700; letter-spacing: -2px; background: #eee;}
.board-list table td.hidden {padding: 0; border: 0; font-size: 0;}
.board-list table .selected td {background: #fffdf7;}
.board-list table td pre {color: #666; font-family: AppleGothic, 'Malgun Gothic', sans-serif; font-size: 14px; line-height: 20px;}

.board-list.scroll-horizontal {overflow-x: auto; overflow-y: hidden;}
.board-list.scroll-horizontal table {width: auto;}

.board-list .list-card-img {height: 40px;}

.board-detail {margin-top: 10px;}
.board-detail table {background: #fff;}
.board-detail table td {padding: 10px 20px; border-bottom: 1px solid #ddd; color: #666; font-size: 14px;}
.board-detail table td.tit {color: #222; font-weight: 700; background: #eee; letter-spacing: -1px;}
.board-detail table td .req {display: inline-block; font-size: 0;}
.board-detail table td .req::before {content: "*"; margin-left: 3px; color: #ff0000; font-size: 14px;}
.board-detail.bdt-line {border-top: 1px solid #ddd;}
.board-detail table td .btn-type.type03 {margin-top: 5px;}
.board-detail table td input[type=checkbox],
.board-detail table td input[type=radio] {vertical-align: -1px;}
.board-detail table td.bar-l {border-left: 1px solid #ddd;}

.board-bottom {position: relative; margin-top: 30px;}
.board-bottom .left-col {position: absolute; left: 0; top: 0;}
.board-bottom .paging {font-size: 0; text-align: center;}
.board-bottom .paging button {width: 30px; height: 30px; margin-right: -1px; border: 1px solid #ddd; font-size: 0; text-indent: -9999px; background: #fff; vertical-align: top;}
.board-bottom .paging .first {background: #fff url(../images/ico_paging_first.png) no-repeat center;}
.board-bottom .paging .prev {margin-right: 8px; background: #fff url(../images/ico_paging_prev.png) no-repeat center;}
.board-bottom .paging .next {margin-left: 8px; background: #fff url(../images/ico_paging_next.png) no-repeat center;}
.board-bottom .paging .last {background: #fff url(../images/ico_paging_last.png) no-repeat center;}
.board-bottom .paging .num button {width: 31px; color: #666; font-size: 10px; font-weight: 400; text-indent: 0;}
.board-bottom .paging .num button span {display: inline-block;}
.board-bottom .paging .num button.cur {border: 0; color: #222; font-weight: 500; background: #ffcc00;}
.board-bottom .right-col {position: absolute; right: 0; top: 0;}

.board-bottom02 {margin-top: 30px; text-align: right;}

.board-req-guide {height: 20px; text-align: right;}
.board-req-guide span {display: inline-block; height: 20px; color: #888; font-size: 14px; line-height: 16px; letter-spacing: -0.2px; vertical-align: top;}
.board-req-guide i {display: inline-block; font-size: 0; text-indent: -9999px; vertical-align: top;}
.board-req-guide i::before {content: "*"; display: inline-block; margin-right: 2px; color: #ff0000; font-size: 14px;}


/* Top Notice area */
.noti {margin-top: 10px; padding: 20px; border: 1px solid #ddd; border-radius: 8px; line-height: 24px; background: #fff;}


/* Button */
.btn-type {display: inline-block; border: 0; cursor: pointer;}
.btn-type.type01 {width: 100px; height: 30px; border: 1px solid #ddd; border-radius: 15px; color: #666; font-size: 14px; font-weight: 400; text-align: center; letter-spacing: -0.35px; background: #fff;}
.btn-type.type02 {height: 40px; padding: 0 14px; border: 1px solid #222; color: #222; font-size: 14px; font-weight: 500; text-align: center; background: #fff;}
.btn-type.type03 {height: 30px; color: #666; font-size: 14px; font-weight: 500; text-align: center; letter-spacing: -1px; background: #f1f1f1;}
.btn-type.type04 {height: 30px; padding: 0 10px; color: #fff; font-size: 14px; font-weight: 500; text-align: center; background: #222;}
.btn-type.type05 {height: 40px; color: #fff; font-size: 16px; font-weight: 500; line-height: 24px; background: #444;}
.btn-type.type06 {height: 40px; padding: 0 14px; color: #fff; font-size: 16px; letter-spacing: -0.4px; background: #303030;}
.btn-type.type07 {height: 40px; padding: 0 14px; border: 1px solid #aaa; color: #222; font-size: 14px; font-weight: 500; text-align: center; background: #fff;}
.btn-type.type08 {width: 100px; height: 30px; border: 1px solid #fff; border-radius: 15px; color: #fff; font-size: 14px; font-weight: 400; text-align: center; letter-spacing: -0.35px; background: transparent;}

.btn-type.excel {width: 138px; height: 40px; padding-left: 49px; border: 1px solid #aaa; color: #222; font-size: 14px; font-weight: 500; text-align: left; letter-spacing: -1.5px; background: #fff url(../images/ico_excel.png) no-repeat 20px center;}

.btn-delete {width: 20px; height: 20px; font-size: 0; text-indent: -9999px; background: url(../images/ico_delete.png) no-repeat;}

.scrolltop {display: none; position: fixed; right: 37px; bottom: 40px; width: 50px; height: 50px;}
.scrolltop button {display: block; width: 50px; height: 50px; border-radius: 50%; background: #313131 url(../images/ico_arrow_up_scrolltop.png) no-repeat center 11px;}
.scrolltop span {display: block; position: absolute; left: 0; top: 23px; width: 100%; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -0.2px; }


/* Condition */
.condition {position: relative; padding: 20px 0 18px 0; background: #fff;}
.condition > * {display: table-cell;}
.condition .left-col {width: auto;}
.condition .left-col table {width: 100%;}
.condition .left-col table td {padding-bottom: 10px;}
.condition .left-col table tr:last-child td {padding-bottom: 0;}
.condition .left-col table td.tit {padding: 0 10px 0 25px; color: #222; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; vertical-align: top;}
.condition .left-col table td.tit span {display: inline-block; height: 40px; line-height: 38px;}
.condition .right-col {width: 130px; padding: 0 20px 2px 20px; vertical-align: top;}
.condition .right-col button {display: block; width: 100%; min-height:40px; color: #fff; font-size: 18px; font-weight: 700; background: #303030;}/* [21-07-05:변경] min-height 추가 */
.condition table td .req {display: inline-block; font-size: 0;}
.condition table td .req::before {content: "*"; margin-left: 3px; color: #ff0000; font-size: 14px;}

/* Form */
.f-ipt-txt {height: 40px; padding: 0 15px; border: 1px solid #ddd;}

.f-select {display: inline-block; position: relative;}
.f-select::after {content: ""; display: block; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 8px; height: 5px; background: url(../images/ico_combo_down8x5.png) no-repeat;}
.f-select select {width: 100%; height: 40px; padding: 0 27px 0 15px; border: 1px solid #ddd; color: #666; font-size: 14px; line-height: 24px; letter-spacing: -0.35px;}

.f-txtar {padding: 15px; border: 1px solid #ddd; outline: none; resize: none;}

.dates {display: inline-block; position: relative; width: 150px;}
.dates::after {content: ""; display: block; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; background: url(../images/ico_calendar.png) no-repeat;}
.dates input {position: relative; width: 100%; height: 40px; padding: 0 15px; border: 1px solid #ddd; z-index: 1;}

.file-attach input[type=file] {position: absolute; left: -9999px; top: -9999px;}

.ipt-group {display: flex;}
.ipt-group > * {flex-grow: 1;}
.ipt-group input[type=text] {width: 100%;}

.f-in-txt {color: #aaa; line-height: 36px;}


/* Icon */
.ico {display: inline-block;}


/* Title */
.tit01 {height: 32px; color: #222; font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: -0.4px;}
.tit02 {height: 32px; color: #222; font-size: 20px; font-weight: 700; line-height: 32px; letter-spacing: -0.4px;}
.tit03 {height: 24px; color: #666; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.2px;}


/* Tab */
.tab-type01 > ul::after {content: ""; display: block; clear: both;}
.tab-type01 > ul > li {float: left;}
.tab-type01.two > ul > li {width: 50%;}
.tab-type01.three > ul > li {width: 33.33%;}
.tab-type01.three > ul > li:last-child {width: 33.34%;}
.tab-type01.four > ul > li {width: 25%;}
.tab-type01.five > ul > li {width: 20%;}
.tab-type01 > ul > li > a {display: block; height: 60px; color: #666; font-size: 16px; text-align: center; line-height: 60px; background: #fff;}
.tab-type01 > ul > li > a.on {color: #222; font-weight: 700; background: #ffcc00;}

.tab-contents .tab-item {display: none;}
.tab-contents .tab-item:first-child {display: block;}


/* Text */
.txt01 {color: #ff0000 !important; font-size: 14px;}


 /* Select-box */
 .select-box {display: flex;}
 .select-box .l {flex-grow: 1;}
 .select-box select {width: 100%; height: 150px; margin-top: 10px; border: 1px solid #ddd;}
 .select-box .c {position: relative; width: 60px; flex-shrink: 0; text-align: center;}
 .select-box .c > span {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
 .select-box .c button {display: block; width: 30px; height: 30px; background: url(../images/btn_goright.png) no-repeat;}
 .select-box .c button + button {margin-top: 4px; background: url(../images/btn_goright.png) no-repeat; transform: rotate(180deg);}
 .select-box .r {flex-grow: 1;}


 /* Loading bar */
 .loading-dim {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000;}
 .loading-bar {z-index: 10001; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; background: url(../images/loading_bar.gif) no-repeat;}

/* Tree menu app */
.tree-menu {margin-top: 10px; background: #fff;}

 /* Etc */
.img-box button {vertical-align: 4px;}

.event-txt button {vertical-align: 4px;}

.select-screen .btn-delete {vertical-align: 4px;}

.before-after {display: table; position: relative; width: 100%;}
.before-after::before {content: ""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: url(../images/icon_arrow_right40x40.png) no-repeat center; background-size: contain;}
.before-after > div {display: table-cell; width: 50%; padding-right: 30px;}
.before-after > div + div {padding-left: 30px; padding-right: 0;}

.etc001 {position: relative; margin-top: 30px;}
.etc001::after {content: ""; display: block; clear: both;}
.etc001 > div {float: left; width: 50%;}
.etc001 .l {padding-right: 30px;}
.etc001 .c {float: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto;}
.etc001 .c button {display: block; width: 30px; height: 30px; font-size: 0;}
.etc001 .c .go-r {background: url(../images/btn_goright.png) no-repeat;}
.etc001 .c .go-l {margin-top: 4px; background: url(../images/btn_goright.png) no-repeat; transform: rotate(180deg);}
.etc001 .r {padding-left: 30px;}

/* [21-09-10] 홈컬러 세팅 */
.color-code-align .color-code {display:inline-block;width:100px;height:40px;vertical-align:top;border:1px solid #eee;}

/* 230307_추가 : [Plus탭] 전체 콘텐츠 어드민 개발 */
.w-350 {width: 350px !important;}
.fc_blue {color:#1a8aea !important;}
.disp-fl {display:flex;}
.board-req-guide i.type02::before {color:#1a8aea;}
.board-detail table td .req.type02::before {color:#1a8aea;}
.board-req-guide.type-02 {text-align:left; height:auto;}
.board-req-guide.type-02 i {text-indent:0;}

.submenu_left {position:relative; min-height:410px; max-height:500px;}
.submenu_left > ul li {font-size:14px; margin-bottom:5px; position:relative; line-height:24px;}
.submenu_left > ul li.on {font-weight:bold; color:#1a8aea;}
.submenu_left > ul li.on span {text-decoration:underline;}
.submenu_left > .btn-group {position:absolute; bottom:20px;}
.submenu_left .drag_on li:hover {color:#1a8aea; font-weight:bold;}
.submenu_left .drag_on li:hover::after {content:"="; color:#1a8aea; position:absolute; right:0; line-height:24px;}
.submenu_left > ul li span.not_post {display:inline-block; float:right; text-decoration:none; color:#ccc; font-weight:normal; padding-right:20px;}

.pop_menu li {font-size:14px; margin-bottom:8px;}
.pop_menu li > a {color:#000; border-bottom:1px solid #ddd; display:block; position:relative; line-height:2.5; margin:15px 0;}
.pop_menu li > a::after {content:"√"; display: block; position: absolute; right: 12px; top:0; width: 10px; height: 10px; color:#1a8aea; font-weight:bold;}

.condition-type02 {position: relative; padding: 20px 0 18px 0; background: #fff;}
.condition-type02 > * {display: table-cell;}
.condition-type02 .left-col {width: auto;}
.condition-type02 .left-col table {width: 100%;}
.condition-type02 .left-col table td {padding-bottom: 10px;}
.condition-type02 .left-col table tr:last-child td {padding-bottom: 0;}
.condition-type02 .left-col table td.tit {padding: 0 10px 0 25px; color: #222; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; vertical-align: top;}
.condition-type02 .left-col table td.tit span {display: inline-block; height: 40px; line-height: 38px;}
.condition-type02 .right-col {width: 130px; padding: 0 20px 2px 20px; vertical-align: top;}
.condition-type02 table td .req {display: inline-block; font-size: 0;}
.condition-type02 table td .req::before {content: "*"; margin-left: 3px; color: #ff0000; font-size: 14px;}
.l-pop-wrap .condition-type02 {background:#f8f8f8;}
.l-pop-wrap .condition-type02 .f-ipt-txt {background:#fff;}

.board-list table .end td {background-color:#eee;}

.ipt-group > .f-select {flex-grow:inherit;}
.l-pop-wrap.scroll-y {max-height:700px; overflow-y:scroll;}



/* 별점 */
.star_result{display:inline-block;width:120px;height:24px;font-size:0;color:transparent;background:url(https://img1.kbcard.com/LT/cxl/mlife/images/shpn2020/common/bg/star_m.png) no-repeat 0 0 / 120px auto;vertical-align:top;}
.star_result.st0{background-position:0 0;}
.star_result.st1{background-position:0 -24px;}
.star_result.st2{background-position:0 -48px;}
.star_result.st3{background-position:0 -72px;}
.star_result.st4{background-position:0 -96px;}
.star_result.st5{background-position:0 -120px;}
.star_result.large{width:200px;height:40px;background:url(https://img1.kbcard.com/LT/cxl/mlife/images/shpn2020/common/bg/star_m.png) no-repeat 0 0 / 200px auto;}
.star_result.large.st0{background-position:0 0;}
.star_result.large.st1{background-position:0 -40px;}
.star_result.large.st2{background-position:0 -80px;}
.star_result.large.st3{background-position:0 -120px;}
.star_result.large.st4{background-position:0 -160px;}
.star_result.large.st5{background-position:0 -200px;}
.star_result.black{width:80px;height:16px;background:url(https://img1.kbcard.com/LT/cxl/mlife/images/shpn2020/common/bg/star_s.png) no-repeat 0 0 / 80px auto;}
.star_result.black.st0{background-position:0 0;}
.star_result.black.st1{background-position:0 -16px;}
.star_result.black.st2{background-position:0 -32px;}
.star_result.black.st3{background-position:0 -48px;}
.star_result.black.st4{background-position:0 -64px;}
.star_result.black.st5{background-position:0 -80px;}

.td_ellipsis {white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}