/* 공통 */
.list-num {list-style: decimal-leading-zero; margin-left: 10px;}
em {font-weight: 500; font-style: normal;}
.chinese {font-family: 'Noto Sans SC', sans-serif;font-weight: 100;}
.icon-30 {height: 30px;}
.pd-10 {margin: 10px;}
.hide {display: none;}
.border-r-none {border-right: none !important}
.border-b-none {border-bottom: none !important}
.display-none {display: none;}
.f-basis-100 {flex-basis: 100% !important;}
.dropdown-menu h6 a {color: unset}
.header-nav .dropdown-menu h6 a {width: 100%;}
.nav-num {float: right;}
.width-50-calc1 {width: calc(50% - 0.5rem);}
.card-body-wide {padding: 3rem;}
.background-f0 {background: #f0f2f5 !important;}
.select-step {color: var(--bs-info); font-weight: 600;}
.search-input-ico {position: absolute; right: 0.25rem; top: 50%; transform: translate(0, -50%); z-index: 9}
.m-icon-lg {font-size: 2.5rem;}
.border-radius-0 {border-radius: 0 !important;}
.date .form-control[readonly], .date .form-control:disabled {background-color: var(--bs-gray-200) !important;}
.select-items {max-height: 300px; overflow-y: scroll !important;}
.text-gray-400 {color: var(--bs-gray-400)}


.faq .faq-keyword-list .btn {padding: 0.25rem 1rem; margin: 0 0.25rem 0.5rem 0.25rem;}
.faq .faq-keyword-list .btn:hover a {color: var(--bs-info);}
.faq .faq-keyword-list .btn.keyword-select {background:var(--bs-info);}
.faq .faq-keyword-list .btn a {font-weight: 500;}
.faq .faq-keyword-list .btn.keyword-select > a {color: #fff;}
.faq .group-name {color: var(--bs-info); padding-right: 0.5rem;}
.faqList .accordion-button {font-size: var(--bs-body-font-size);}

 
.custom-select { position: relative; }
.custom-select select { display: none; /*hide original SELECT element:*/ }
.select-selected { background-color: #fff !important; border-radius: 0.375rem; border: 1px solid #d2d6da; }
.select-selected:after { position: absolute; content: ""; top: 60%; right: 0.75rem; width: 0; height: 0; transform: translateY(-50%); border: 6px solid transparent; border-color: var(--bs-body-color) transparent transparent transparent; }
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after { border-color: transparent transparent var(--bs-body-color) transparent; top: 45%; transform: translateY(-50%); }
.select-items {border-radius: 0.5rem; overflow: hidden; box-shadow: 0 0.3125rem 0.625rem 0 rgba(0, 0, 0, 0.12);}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected { padding: 8px 16px; border-bottom: 1px solid var(--bs-gray-300); cursor: pointer; user-select: none; }
.custom-select .select-selected {border: 1px solid #d2d6da; padding: 0.625rem 0.75rem !important;}
.custom-select .select-selected2 {background-color:var(--bs-gray-300);border: none; padding: 0.625rem 0.75rem !important;}
/*style items (options):*/
.select-items { position: absolute; background-color: #fff; top: 100%; left: 0; right: 0; z-index: 9999; }
/*hide the items when the select box is closed:*/
.select-hide {display: none;}
.select-items div:hover, .same-as-selected {background: #f8f9fa; color: #1A73E8; }
/* 선택된 항목이 비활성화되었을 때 */
.select-selected.disabled { background-color: #e9ecef; color: #6c757d; cursor: not-allowed;}
/* 드롭다운 목록 비활성화 (숨김) */
.select-items.disabled {display: none !important;}



.board-box-list label {margin-bottom: 0;}
.board-box-list .board-header {border-top: 1px solid #dee2e6; border-bottom: 4px double #dee2e6; background: #f0f2f5; padding: 0.5rem 0.75rem; flex-wrap: wrap;}
.board-box-list .num {width: 60px; text-align: left;}
.board-box-list .num input[type="checkbox"] { margin-top: 4px;}
.board-box-list .board-listing-title {width: calc(100% - 300px);}
.board-box-list .board-listing-title a:hover {color: var(--bs-secondary);}
.board-box-list .board-header *, .board-box-list .board-right * {margin: 0;}
.board-box-list .board-right {list-style: none; display: flex;}
.board-box-list .board-right li {text-align: center;}
.board-box-list .board-listing-wrap {margin: 0; padding: 0;}
.board-box-list .board-listing {display: flex; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom:  1px solid #dee2e6; align-items: center; flex-wrap: wrap;}
.board-box-list .board-right {list-style: none; display: flex; padding: 0; width: 240px; justify-content: space-between; margin-bottom: 0;}
.important-post .num span {color: var(--bs-primary);}
.important-post .num span, .important-post a {font-weight: 600;}

.img-board .board-listing {display: flex; flex-direction: column; border: none;}
.img-board .thum {width: 100%; height: 0; padding-bottom: 100%; border-radius: 0.5rem; position: relative; overflow: hidden; background: #f0f2f5;}
.img-board .thum img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.img-board .board-listing-title {width: 100%;}
.img-board a {display: block; width: 100%; height: 100%;}


.index-page .board-box-list .num {width: 30px !important;}
.index-page .board-box-list .board-right {width: auto !important;}
.index-page .board-box-list .board-right li:first-child {display: none}
.index-page .board-box-list .board-listing-title {width: calc(100% - 80px) !important;text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.index-page .board-box-list .board-listing-title a {display: inline-block;}



/* ---슬라이드--- */
.slider { width: 100%; height: auto; position: relative; overflow: hidden; padding-top: 1rem; display: flex}
.slide {transition: all 0.7s;}
.slide-btn { position: absolute; width: 40px; height: 40px; padding: 10px; border: none; border-radius: 50%; z-index: 10; cursor: pointer; background-color: rgb(0 0 0 / 20%); font-size: 18px; }
.slide-btn:active { transform: scale(1.1); }
.slide-btn.btn-prev { top: 50%; left: 0; transform: translateY(-50%);}
.slide-btn.btn-next { top: 50%; right: 0;  transform: translateY(-50%);}
.slide-btn.btn-prev::before, .slide-btn.btn-next::before {content: ''; width: 40%; height: 40%; border: 2px solid #fff; position: absolute; left: 43%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);}
.slide-btn.btn-prev::before {border-right: none; border-top: none; left: 57%;}
.slide-btn.btn-next::before {border-left: none; border-bottom: none;}

/* .product-slider .slide {margin-left: -25%;} */
.product-slider .slide:first-child {margin-left: 0 !important;}


/* 오른쪽아래 카카오상담 */
.quick {position: fixed; right: 2rem; bottom: 2rem; z-index: 9999;}
.quick a {display: block; border-radius: 100%;}
.quick .dropdown.dropdown-hover .dropdown-menu, .dropdown .dropdown-menu.ballon {left: auto !important; top: 25% !important; margin-top: 0 !important; right: calc(100% + 1rem) !important; min-width: 95px !important; padding: 0.5rem; background: #fff;}
.quick .ballon:before {
  content: "" !important;
  width: 0 !important; height: 0 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 10px solid #fff !important;
  border-right: none !important;
  top: 50% !important; left: auto !important; right: -10px !important;
  transform: translateY(-50%) !important;
  transition: none !important;
  font-size: 0 !important;
}
.quick.dropdown.dropdown-hover:after {content: none !important;}
    
/* 오른쪽 중간 - 선택상품 */
.iteminfo {position: fixed; right: 2rem; bottom: 30rem; z-index: 9999;}
.iteminfo a {display: block; border-radius: 100%;}
/* 선택상품 ul - 아래로 펼쳐짐, 삼각형 숨김 */
.iteminfo-list {
  min-width: 180px !important;
}
.iteminfo-list:before {
  display: none !important;
}



/* 가이드 */
.guide-nav {width: 20%;}
.guide-left {width: 20%;max-width: 20%;}
.guide-right {width: 80%;max-width: 80%;}

.transport-guide-left .btn {width: 100%;}
.transport-guide .transport-description .row {width: 100%; justify-content: space-between;}
/* .guide-step-list2 {display: flex; flex-direction: row;
    flex-wrap: wrap;border-bottom: 1px solid #dee2e6;} */
.guide-step-list2 li a {opacity: 0.6;}
.guide-step-list2 li a.active {opacity: 1;}
.guide-step-list2 li {width:14.2%; cursor: pointer; position: relative;}
.guide-step-list2 li img {width: 3rem; display: block; margin: 0 auto;}
.guide-step-list2 li .nav-link {padding-top: 0.75rem !important; position: relative;}


/* 메인 */
.index-page .guide-step-list2 .nav-link:hover {opacity: 1;}
.index-page .guide-step-list2 .nav-item {border-bottom: 2px solid var(--bs-gray-600); position: relative;}
.index-page .guide-step-list2 .nav-item::before {content: ''; width: 15px; height: 15px; border: 2px solid var(--bs-gray-500); position: absolute; bottom: -7.5px; left: 50%; transform: translateX(-50%); border-radius: 100%; background: var(--bs-gray-400);}
.index-page .guide-step-list2 .nav-item::after {position: absolute; left: 50%; bottom: -2rem; transform: translateX(-50%); font-size: 1rem; font-weight: 600;}
.index-page .guide-step-list2 .nav-item:first-child::after {content: '1';}
.index-page .guide-step-list2 .nav-item:nth-child(2):after {content: '2';}
.index-page .guide-step-list2 .nav-item:nth-child(3)::after {content: '3';}
.index-page .guide-step-list2 .nav-item:nth-child(4)::after {content: '4';}
.index-page .guide-step-list2 .nav-item:nth-child(5)::after {content: '5';}
.index-page .guide-step-list2 .nav-item:nth-child(6)::after {content: '6';}
.index-page .guide-step-list2 .nav-item:nth-child(7)::after {content: '7';}


.step-icon-wrap h6 {text-align: center; margin: 0.5rem 0 0.25rem;}

.guide-step-inner .guide-step {padding-top: 1rem; display: none;}
.guide-step-inner .guide-step.active {display: block;}
.step-icon-wrap li.opacity-6 .material-icons {display: none;  }
.step-icon-wrap li .material-icons {display: block;text-align: center; font-size: 2rem; line-height: 0.05; padding-top: 1rem; color: #dee2e6;}
.step-icon-wrap .span-tit {display: none;}
.nav.nav-pills.guide-step-list2 .moving-tab {height: calc(100% - 0.5rem);}
.nav.nav-pills.guide-step-list2 .moving-tab .active {height: 100%;}


/* -----------------검수 및 주의사항 페이지--------------- */

.table-guide  {border-collapse:collapse;border-spacing:0;}
.table-guide tr {border-bottom: 1px solid #e1e4e9;}
.table-guide tr:last-child {border-bottom: none;}
.table-guide tr .tg-kftd {font-size: 1rem; font-weight: 600;}
.table-guide td{overflow:hidden; padding:0.75rem;word-break:normal; background: #f8f9fa; border-right: 1px solid #e1e4e9;}
.table-guide td:first-child {text-align: center; background:#f0f2f5;}
/* .table-guide td:last-child {border-right: none;} */
.table-guide th{overflow: hidden; padding: 10px 5px; word-break: normal; text-align: center; background: #d2d6da; border-radius: 10px 10px 0 0; border-right: 1px solid #fff0; color: #344767;}
.table-guide th:last-child {border-right: none;}
.table-guide ul {padding-left: 1.25rem; margin-bottom: 0;}

.step-narrow {display: none;}



.customs-prc li {text-align: center; }
.customs-prc-cmm {display: flex;flex-direction: row; flex-wrap: wrap;justify-content: center; align-items: flex-start}
.customs-prc .prc-tit{margin: 1vw 0 0 0 !important; box-shadow: 2px 5px 7px 0px rgb(0 0 0 / 10%), 5px 0px 9px -2px rgb(0 0 0 / 5%) !important; padding: 0.4vw 1vw; display: inline-block; min-width: 9vw; border-radius: 0.5rem;font-size: 1rem; font-weight: 500; position: relative; background: #fff; z-index: 9;  word-break: keep-all; border: 1px solid #ebebeb;}
.customs-prc .prc-tit::before, .customs-prc-bottom-bar::after  {content: ''; width: 2px; background: #cbcbcb; height: 1vw; position: absolute; left: 50%; bottom: calc(100% + 1px);}
.customs-prc-bottom-bar::after {bottom: auto; top: calc(100% + 1px);}
.customs-prc-top-bar, .customs-prc-top-bar2, .customs-prc-bottom-bar {position: relative;}
.customs-prc-top-bar::before, .customs-prc-top-bar2::before{content: '';position: absolute; left: calc(50% + 1px); bottom: calc(100% + -2px); width: 50%; transform: translateX(-50%); height: 2px; background: #cbcbcb;}
.customs-prc-top-bar2::before {width: 50%; height: 105%; left: 42%; background: 0; border: 2px solid #cbcbcb; border-top: none; z-index: 0;}
.customs-prc-cmm.cst-sh > li:first-child {width: 33.333%;}
.customs-prc-cmm.cst-sh > li:nth-child(2) {width: 66.666%;}
.customs-prc-right-bar::after {content: '';right: 0; top: 50%; width: 20px; height: 80%; border: 2px solid #ebebeb;}
.customs-prc-depth2 {position: relative}
.customs-prc-depth2::before {content: ''; width: 60%; height: 2px; background: #cbcbcb; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.customs-prc .none-bf::before {content: none;}
.customs-prc-cmm.cst-sh > li:last-child > p {transform: translateX(-35%);}
.margin-bt-cst1 {margin-bottom: 1vw;}

.list-simplify-clearance .table-guide td:first-child {background: #f8f9fa;}


.cst-import-clearance ol {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.cst-import-clearance ol li {width: 33.333%; position: relative}
.cst-import-clearance ol li::before {content: '>'; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}



/* 로그인 */
.sign-in .sns-login-btn {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0; background: #f0f2f5; margin-bottom: 0;}
.login-input {position: relative;}



/* flatPicker */
.flatpickr-calendar .flatpickr-day.today {background: var(--bs-gray-500) !important;}

/*토스트 그리드*/
.tui-grid-tree-icon {display:none}
.tui-grid-tree-wrapper-valign-center {margin-left: -30px;}
.tui-grid-cell.split {background:#ededed}

/* 메인 팝업 */
.main-popup {display: flex; gap: 1rem;}
.main-popup .popup {position: fixed; z-index: 9999; background:#fff}
.main-popup .popup.center {left: 50%; top: 50%; transform: translate(-50%, -50%);}
.main-popup .popup-body img {max-width: 100%;}
.main-popup .popup-footer {padding-top: 0.5rem; display: flex; justify-content: space-between}
.main-popup .popup-footer .btn {margin: 0; padding: 0.25rem; box-shadow: none;}


/* 서브 팝업*/
.sub-popup {height: 100vh; position: fixed; background: #00000045; left: 0; top: 0; width: 100vw; z-index: 9;}
.sub-popup .popup-footer {justify-content: flex-end}

@media screen and (max-width: 1400px) {
    .customs-prc .prc-tit {min-width: 10vw;}
}

@media screen and (max-width: 1050px) {
	
	/*메뉴 navbar*/
    .header-right-btn {width:80px}
}

@media screen and (max-width: 991.98px) {
    .m-icon-lg {font-size: 2.2rem;}


    #navigation .header-right-btn.ms-3 {margin-left: 0 !important; text-align: center;}
    #navigation .header-right-btn .btn-per-set {border: 2px solid; display: block; margin: 0.5rem 1rem 0.5rem 1rem !important; }

        /* 메인 해외직구 진행절차 */
    .index-page .guide-step-list2 .nav-item {width: 25%;}
    .index-page .guide-step-list2 .nav-link {display: flex; flex-direction: column; align-items: center;;}
    .index-page .guide-step-list2 li img {margin: 0;}
    .index-page .main-right-info {grid-row: 1 / 2;}
    .index-page .main-left-info {grid-row: 2 / 3;}
    .index-page .main-left-info > .d-grid > div:first-child {grid-column: 1 / 2; grid-row: 1 / 2;}
    .index-page .main-left-info > .d-grid > div:nth-child(2) {grid-column: 2 / 3; grid-row: 1 / 2;}
    .index-page .main-left-info > .d-grid > div:nth-child(3) {grid-column: 3 / 4; grid-row: 1 / 2;}

    .transport-guide .guide-step-list {display: none;}
    .transport-guide .card-guide-right {padding-top: 3rem;}
    .guide-step-list2 {}
    .transport-guide .nav.nav-pills .moving-tab {height: 3.2rem}
    .guide-step-list2 li {width: 100%; padding: 0.5rem;}
    .guide-step-list2 li img {float: left;}
    .guide-step-list2 li h6 {float: left;}
    .guide-step-list2 li .nav-link {padding-top: 0.25rem !important;}
    .guide-step-list2 li img {width: 2rem; margin: 0 1rem 0 0;}
    .transport-guide .step-icon-wrap li .material-icons {display: none;}
    .transport-guide .step-icon-wrap h6 {margin: 0 0.75rem 0 0;}
    .transport-guide .step-icon-wrap .span-tit {display: block;}

    .step-narrow {display: block;}
    .step-wide {display: none;}
    .card-body-wide {padding: 1.5rem;}


    .customs-prc .prc-tit {font-size: 2vw; padding: 1.5vw 0.8vw; min-width: 15vw; margin: 2vw 0 0 0 !important;}
    .customs-prc .prc-tit::before, .customs-prc-bottom-bar::after {height: 2vw;}
    .customs-prc-cmm.cst-sh > li:first-child {width: 50%;}
    .customs-prc-cmm.cst-sh > li:nth-child(2) {width: 50%;}
    .customs-prc-depth2::before {width: 65%; transform: translateX(-46%);}
    .customs-prc-top-bar2::before {left: 50%;}
    .customs-prc-cmm.cst-sh > li:last-child > p {transform: translateX(0);}
    .margin-bt-cst1 {margin-bottom: 2vw;}

    .table-guide td {padding: 0.5rem 0.4rem;}

    /* 공지사힝 게시판 */
    .board-box-list.notice-board .num {width: 40px;}
    .board-box-list.notice-board .board-right {width: 150px;}
    .board-box-list.notice-board .board-listing-title {width: calc(100% - 190px)}
}

@media screen and (max-width: 768px) {
    
.m-icon-lg {font-size: 2rem;}
  
}

@media screen and (max-width: 640px) {
    .customs-prc .prc-tit {font-size:2.5vw;min-width: auto; width: calc(100% - 1.5vw);}
}

@media screen and (max-width: 575.98px) {
    .index-page .main-left-info > .d-grid > div:first-child {grid-column: 1 / 3; grid-row: 1 / 2; background: var(--bs-gray-300); text-align: center;}
    .index-page .main-left-info > .d-grid > div:nth-child(2) {grid-column: 1 / 3; grid-row: 2 / 3; background: var(--bs-gray-300); text-align: center;}
    .index-page .main-left-info > .d-grid > div:nth-child(3) {grid-column: 1/ 3; grid-row: 3 / 4;}
}


/* 필수입력사항 체크 */
input ~ small {display: none;position: absolute; bottom: -1rem; left: 0; color: var(--bs-primary);}
input.error ~ small {display: block;}
form input.error {background-size: 100% 100% !important;}
.input-group small {display: none;position: absolute; bottom: -1rem; left: 0;}
.form-check.form-switch.error small {left: 3rem;}
.input-group .error ~ small, .form-check.form-switch.error small {display: block; color: var(--bs-primary)}

.custom-select.required.error {border: 1px solid var(--bs-primary);border-radius: 0.5rem}


/* FontAwesome 폰트 미존재로 인한 dropdown 화살표 X 마크 문제 수정
   material-kit.css의 font-family:"FontAwesome" content:"\f0d8" 대신 border 트릭으로 삼각형 표시 */

/* 공통 dropdown-menu:before 기본 스타일 */
.dropdown .dropdown-menu:before {
  font-family: inherit !important;
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-bottom: 12px solid rgba(189, 189, 189, 0.5) !important;
  font-size: 0 !important;
  position: absolute !important;
  top: -16px !important;
  left: 40px !important;
  right: auto !important;
  transform: translateX(0) !important;
  transition: top 0.35s ease !important;
}

/* dropdown-menu-end 일 때 - 버튼 중앙에 맞게 right 값 조정 */
.dropdown .dropdown-menu.dropdown-menu-end:before {
  left: auto !important;
  right: 40px !important;
  transform: translateX(0) !important;
}

/* hover/show 시에도 top 유지 */
.dropdown.dropdown-hover:hover > .dropdown-menu:before,
.dropdown .dropdown-menu.show:before {
  top: -16px !important;
}

@media (max-width: 991.98px) {
  .navbar-toggler+.navbar-collapse .dropdown:not(.nav-item) .dropdown-menu:before {
    font-family: inherit !important;
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-bottom: 12px solid #fff !important;
    font-size: 0 !important;
    position: absolute !important;
    top: -16px !important;
    left: 40px !important;
    right: auto !important;
    transform: translateX(0) !important;
    transition: top 0.35s ease !important;
  }
}

/* 이용안내 메뉴: 패널이 왼쪽 기준이지만 버튼은 패널 오른쪽 끝 근처에 있으므로 삼각형을 right 기준으로 */
.nav-menu-info:before {
  left: auto !important;
  right: 40px !important;
}

/* dropdown-subitem 서브메뉴: 패널 왼쪽면에 ◀ 방향 삼각형 - 부모 메뉴 아이템 중앙에 위치 */
.dropdown .dropdown-menu .dropdown-item+.dropdown-menu:before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 10px solid rgba(189, 189, 189, 0.5) !important;
  border-left: none !important;
  position: absolute !important;
  top: 28px !important;
  left: -10px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  transition: left 0.35s ease !important;
  font-size: 0 !important;
}