*,
*::before,
*::after {
    box-sizing: border-box;
}
a:hover { text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { margin: 0; }

#wrapSearchResult { padding: 20px; }

#wrapSearchResult .top { display: flex; justify-content: space-between; align-items: center; width: 100%; border-radius: 15px; background-color: var(--color-new-orange); overflow: hidden; }
#wrapSearchResult .top .box-txt { display: flex; flex-direction: column; justify-content: space-between; padding: 15px 40px 15px; width: 100%; height: 100%; color: #fff; font-weight: 700; }
#wrapSearchResult .top .box-txt h1 { display: block; padding: 10px; font-size: 32px; font-weight: 700; border-bottom: 1px solid #fff; }
#wrapSearchResult .top .box-txt h2 { display: block; font-size: 26px; font-weight: 700; }
#wrapSearchResult .top .box-txt h3 { display: block; font-size: 26px; }
#wrapSearchResult .top .box-txt h4 { display: block; font-size: 18px; }
#wrapSearchResult .top .box-txt2 { padding: 10px; }
#wrapSearchResult .top .box-image { flex: none; margin-right: 20px; width: 220px; height: 100%; overflow: hidden; border-radius: 10px; aspect-ratio: 1.8 / 1; overflow: hidden; }
#wrapSearchResult .top .box-image img { width: 100%; height: 100%; object-fit: cover; }
#wrapSearchResult .top .box { display: flex; align-items: center; padding: 15px 0 0; }

#wrapSearchResult .middle { display: flex; margin-top: 45px; }
#wrapSearchResult .middle .leftMenu { flex: none; margin-right: 20px; padding-right: 20px; width: 250px; border-right: 1px solid #DFDFDF; }
#wrapSearchResult .middle .leftMenu .box-list { line-height: 160%; }
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 {  }
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li { padding: 15px; border-radius: 10px; background-color: #f9f9f9; }
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li + li { margin-top: 20px; }
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li > a { display: block; position: relative; font-size: 20px; font-weight: 500; color: #333; }
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li > a:hover,
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li > a.on { color: var(--color-new-orange); }
#wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li > a.on:before { background-color: var(--color-new-orange); }
#wrapSearchResult .middle .leftMenu .box-list ul.depth2 { margin-top: 15px; padding-left: 15px; }
#wrapSearchResult .middle .leftMenu .box-list ul.depth2 > li {  }
#wrapSearchResult .middle .leftMenu .box-list ul.depth2 > li > a { display: block; position: relative; padding-left: 12px; font-size: 16px; font-weight: 300; color: #333; }
#wrapSearchResult .middle .leftMenu .box-list ul.depth2 > li > a:hover,
#wrapSearchResult .middle .leftMenu .box-list ul.depth2 > li > a.on { color: var(--color-new-orange); }
#wrapSearchResult .middle .leftMenu .box-list ul.depth2 > li > a:before { content: ""; position: absolute; top: 9px; left: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #DFDFDF; }

#wrapSearchResult .middle .leftMenu .box-list ul.depth2 > li > a strong { display: block; font-weight: 500; }

#wrapSearchResult .middle .rightContent { width: 100%; }
#wrapSearchResult .middle .rightContent .box-content {  }
#wrapSearchResult .middle .rightContent ul.list-content {}
#wrapSearchResult .middle .rightContent ul.list-content + ul { margin-top: 10px; padding-top: 20px; border-top: 1px solid #DFDFDF; }
#wrapSearchResult .middle .rightContent ul.list-content > li { position: relative; }
#wrapSearchResult .middle .rightContent ul.list-content > li + li { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
/*#wrapSearchResult .middle .rightContent ul.list-content > li + li:before { content: ""; position: absolute; top: 0; left: 50%; width: 200px; height: 1px; background-color: #eee; transform: translateX(-50%); }*/
#wrapSearchResult .middle .rightContent ul.list-content > li h5 { display: block; position: relative; padding-left: 8px; font-size: 20px; font-weight: 500; color: #333; }
#wrapSearchResult .middle .rightContent ul.list-content > li h5:before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 12px; transform: translateY(-50%); background-color: var(--color-new-orange); }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-txt { padding: 8px; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-txt p { font-size: 16px; color: #333; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-txt p.description { margin-top: 10px; font-size: 14px; color: var(--color-new-orange);; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga { display: flex; font-size: 16px; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga div { display: flex; align-items: center; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga div + div { margin-left: 40px; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga div span { display: block; position: relative; margin-left: 13px; width: 15px; height: 15px; border-radius: 50%; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga div span:before { content: ""; display: block; position: absolute; top: -5px; left: -5px; width: 5px; height: 24px; border: 1px solid #DFDFDF; border-right: none; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga div span:after { content: ""; display: block; position: absolute; top: -5px; right: -5px; width: 5px; height: 24px; border: 1px solid #DFDFDF; border-left: none; }
#wrapSearchResult .middle .rightContent ul.list-content > li .box-jaga div.checked span { background-color: var(--color-new-orange); }

#wrapSearchResult .middle .rightContent .box-codeList {  }
#wrapSearchResult .middle .rightContent .box-codeList .row { display: flex; padding: 0 22px; min-height: 50px;  }
#wrapSearchResult .middle .rightContent .box-codeList .row.head { margin-bottom: 10px; border-bottom: 1px solid #dfdfdf; font-weight: 500; }
#wrapSearchResult .middle .rightContent .box-codeList .row.item { border: 1px solid #DFDFDF; border-radius: 10px; cursor: pointer; }
#wrapSearchResult .middle .rightContent .box-codeList .row.item + .row.item { margin-top: 10px; }
#wrapSearchResult .middle .rightContent .box-codeList .col { display: flex; justify-content: center; align-items: center; padding: 5px; font-size: 15px; color: #333; line-height: 160%; }
#wrapSearchResult .middle .rightContent .box-codeList .col.code { flex: none; width: 80px; color: var(--color-new-orange); }
#wrapSearchResult .middle .rightContent .box-codeList .col.title1 { flex: none; width: 210px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.title2 { flex: none; width: 210px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.explain { width: 100%; }
#wrapSearchResult .middle .rightContent .box-codeList .col.basic { flex: none; width: 120px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.simple { flex: none; width: 120px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.jaga { flex: none; width: 60px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.basic { flex: none; width: 80px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.normal { flex: none; width: 80px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.over { flex: none; width: 80px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.arrow { flex: none; width: 50px; }
#wrapSearchResult .middle .rightContent .box-codeList .col.arrow:after { content: ""; display: block; width: 12px; height: 12px; border-top: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF; transform: rotate(45deg); }
#wrapSearchResult .middle .rightContent .box-codeList .row.item:hover,
#wrapSearchResult .middle .rightContent .box-codeList .row.item.on { border-color: var(--color-new-orange); }
#wrapSearchResult .middle .rightContent .box-codeList .row.item:hover .arrow:after { border-color: var(--color-new-orange); }
#wrapSearchResult .middle .rightContent .box-codeList .row.item.on .arrow:after { display: none; }
#wrapSearchResult .middle .rightContent .box-codeList .row.head .arrow:after { display: none; }

#wrapSearchResult .middle .rightContent #wrapSICodeData ul.list-content + ul.list-content { margin: 0; padding: 0; border: 0; }
#wrapSearchResult .middle .rightContent #wrapSPCodeData ul.list-content + ul.list-content { margin: 0; padding: 0; border: 0; }

#wrapSearchResult .box-tab { margin-bottom: 25px; padding: 10px; background-color: #f9f9f9; border-radius: 10px; }
#wrapSearchResult .box-tab ul { display: flex; flex-direction: column; gap: 10px; }
#wrapSearchResult .box-tab li { border-radius: 10px; border: 1px solid #DFDFDF; background-color: #fff; transition: border-color .1s linear; }
#wrapSearchResult .box-tab li:hover,
#wrapSearchResult .box-tab li.active { border-color: var(--color-new-orange); }
#wrapSearchResult .box-tab li a { display: block; padding: 5px 10px; width: auto; height: 100%; font-size: 14px; color: #333; }
#wrapSearchResult .box-tab li a span { display: block; font-size: 12px; color: #3a3a3a; }
/*#wrapSearchResult .box-tab li:hover a,*/
/*#wrapSearchResult .box-tab li.active a { color: #fff; }*/

#wrapHSCodeSelect { display: flex; }
#wrapHSCodeSelect .box-select + .box-select { margin-left: 10px; }
#wrapHSCodeSelect .box-select select { padding: 5px 10px; font-size: 18px; border: none; outline: none; }
#wrapHSCodeSelect .box-select select:focus { box-shadow: none; outline: none; }




/*#wrapSICodeData { margin-top: 10px; padding-top: 20px; border-top: 1px solid #DFDFDF; }*/
#wrapHSCodeData { margin-top: 10px; padding-top: 20px; border-top: 1px solid #DFDFDF; }
/*#wrapSPCodeData { margin-top: 10px; padding-top: 20px; border-top: 1px solid #DFDFDF; }*/

#wrapCCodeData ul.list-content { display: none; }
#wrapCCodeData ul.list-content.active { display: block; }

#btnLeftMenuToggle { display: none; position: absolute; top: 0; right: -60px; width: 40px; height: 40px; border-radius: 5px; border: none; background-color: #fff; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); }

@media all and (max-width: 1300px) {
    #wrapSearchResult .middle .rightContent .box-codeList .col.title1 { display: none; }
    #wrapSearchResult .middle .rightContent .box-codeList .col.title2 { width: 150px; }
}

@media all and (max-width: 1024px) {
    #wrapSearchResult .top .box-txt { padding: 15px 20px 15px; }
    #wrapSearchResult .top .box-txt h1 { padding: 5px; font-size: 28px; }
    #wrapSearchResult .top .box-txt h2 { font-size: 22px; }
    #wrapSearchResult .top .box-txt h3 { font-size: 20px; }

    #wrapSearchResult .middle .leftMenu { width: 200px; }
    #wrapSearchResult .middle .leftMenu .box-list ul.depth1 > li > a { font-size: 16px; }

    #wrapSearchResult .middle .rightContent .box-codeList .row.head { display: none; }
    #wrapSearchResult .middle .rightContent .box-codeList .row { flex-direction: column; padding: 10px 15px; }
    #wrapSearchResult .middle .rightContent .box-codeList .col { flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 0; font-size: 14px; color: #666; }
    #wrapSearchResult .middle .rightContent .box-codeList .col:before { display: block; color: #333; font-size: 15px; }
    #wrapSearchResult .middle .rightContent .box-codeList .col + .col { margin-top: 5px; }
    #wrapSearchResult .middle .rightContent .box-codeList .col.arrow { display: none; }
    #wrapSearchResult .middle .rightContent .box-codeList .col.code { flex-direction: column; width: 100%; font-size: 18px; }
    #wrapSearchResult .middle .rightContent .box-codeList .col.title2 { width: 100%; }
    /*#wrapSearchResult .middle .rightContent .box-codeList .col.code:before { content: "업종코드"; }*/
    #wrapSearchResult .middle .rightContent .box-codeList .col.title2:before { content: "• 세세분류";  }
    #wrapSearchResult .middle .rightContent .box-codeList .col.explain:before { content: "• 적용 범위 및 기준"; }
    #wrapSearchResult .middle .rightContent .box-codeList .col.basic:before { content: "• 기준경비율"; }
    #wrapSearchResult .middle .rightContent .box-codeList .col.simple:before { content: "• 단순경비율"; }
}

@media all and (max-width: 767px) {
    #wrapSearchResult .top .box { flex-direction: column; align-items: flex-start; }
    #wrapSearchResult .top .box-image { width: 100%; }

    #wrapSearchResult .middle .leftMenu { position: fixed; top: 110px; left: 0; margin: 0; padding: 0; height: 70vh; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #fff; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); transform: translateX(-210px); transition: transform .3s ease-in-out; z-index: 1; }
    #wrapSearchResult .middle .leftMenu .box-list { padding: 20px 10px; height: 100%; overflow: auto; }
    #wrapSearchResult .middle .leftMenu.open { transform: translateX(0px); }

    #btnLeftMenuToggle { display: block; }
    #btnLeftMenuToggle:before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; border-radius: 1px; background-color: #7B7B7B; transform: translate(-50%, calc(-50% - 3.5px)) rotate(-45deg); transition: transform .2s ease-in-out; }
    #btnLeftMenuToggle:after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 10px; border-radius: 1px; background-color: #7B7B7B; transform: translate(-50%, calc(-50% + 3.5px)) rotate(45deg); transition: transform .2s ease-in-out; }

    #wrapSearchResult .middle .leftMenu.open #btnLeftMenuToggle:before { transform: translate(-50%, calc(-50% - 3.5px)) rotate(45deg); }
    #wrapSearchResult .middle .leftMenu.open #btnLeftMenuToggle:after { transform: translate(-50%, calc(-50% + 3.5px)) rotate(-45deg); }

    #wrapSearchResult .middle .rightContent ul.list-content > li .box-txt p { text-wrap: auto; }
}