section.explore { margin:0 auto; width:100%; max-width:1128px; padding: 0px 20px; }

section.explore article.title h1     { font-weight: 800; font-size: 48px !important; line-height: 100%; display:inline-block; }
section.explore article.title button { float:right; }

section.explore article.search input { width:100%; height:56px; line-height:56px; border:1px solid #BFBFBF; border-radius:8px; background-image:url(/common/css/import/icons/search.svg); background-repeat: no-repeat; background-position: 16px; text-indent:50px; outline: none; } 
section.explore article.search input::placeholder { color: var(--color-G5); }
section.explore article.search input:focus { border: 2.5px solid #FF6929 !important }
section.explore article.search i.icon { position: absolute; margin-top: 14px; margin-left: -35px; cursor:pointer } 
section.explore article.search input:placeholder-shown + i.icon { display: none; }

section.explore article.filter { display:flex; justify-content: space-between; align-items: center; }

section.explore article.filter ul.filter_controll    { z-index:99; background-color:#fff }
section.explore article.filter ul.filter_controll li { display:inline-block; font-size:14px; background-image:url(/common/css/import/icons/arrow_down.svg); background-repeat:no-repeat; background-position:right; padding-right:16px; margin-right:16px; background-size: 12px 12px; cursor:pointer }
section.explore article.filter ul.filter_controll li img { width: 20px; height: 20px; vertical-align: text-bottom; margin-right: 5px; }

section.explore article.filter ul.list_type { display:flex; background-color:#F0F0F0; border-radius:10px; overflow:hidden; padding:4px; }
section.explore article.filter ul.list_type li { width:34px; height:34px; padding-top: 4px; text-align:center; margin-right:4px; border-radius:10px; cursor:pointer }
section.explore article.filter ul.list_type li i { vertical-align: top }
section.explore article.filter ul.list_type li.on { background-color:#fff; box-shadow: 1px 1px 2px 0px #00000008; }
section.explore article.filter ul.list_type li:last-child { margin-right:0px }

section.explore article.filter_list_wrap      { position:fixed; left:0px; top:0px; width:100vw; height:100vh; display:none; cursor:default; }
section.explore article.filter_list_wrap > ul { position:fixed; left:0px; top:0px; display:inline-block; width:auto; max-height:50vh; border:1px solid var(--color-G3); background-color:#fff; border-radius:12px; padding:5px; overflow-y: scroll;  box-shadow: 0px 3px 4px 0px #0000001A; }
section.explore article.filter_list_wrap > ul li { min-width:213px; height:34px; line-height:34px; color:var(--color-G7); font-weight:700; font-size:14px; padding:0px 6px; cursor:pointer; pointer-events: auto; }
section.explore article.filter_list_wrap > ul li img { width: 20px; height: 20px; vertical-align: bottom; margin-right: 5px; }
section.explore article.filter_list_wrap > ul li.title { height:31px; line-height:31px; font-size:12px; color:var(--color-G5); cursor:default; }
section.explore article.filter_list_wrap > ul li.on    { background-color:var(--color-G2); border-radius:12px; }

section.explore article.filter_list_wrap > ul.sort li.on { background-image: url(/common/css/import/icons/check.svg); background-repeat: no-repeat; background-position: calc(100% - 5px) center; }

@media (max-width: 800px) {
	section.explore article.title h1 { font-size: 30px !important; padding-bottom:20px }	
	section.explore article.filter ul.list_type  { display:none }
}

/* grid */
ul.list_grid    { display:flex; gap: 15px; flex-wrap: wrap; }
ul.list_grid > li { width:calc((100% - 30px)/3); font-size:12px; line-height:24px; color:var(--color-G5); cursor:pointer }
ul.list_grid > li div.visual { height:240px; background-color:#CCCCCC; border-radius:15px; padding:15px; margin-bottom:12px; position: relative; overflow: hidden; z-index:-1 }
ul.list_grid > li div.visual img { float:left; width:40px; height:40px; }
ul.list_grid > li div.visual i   { float:right; }
ul.list_grid > li div.visual.sample::after{ content: ""; position: absolute; right: 0px; bottom: 0px; width: 72px; height: 62px; background: url("/common/report_viewer/img/label_sample.svg") no-repeat; background-size: contain; background-position: right bottom; pointer-events: none; z-index: 5; }
ul.list_grid > li b { font-size:16px; font-weight:700; line-height:24px; color:#000 }
@media (max-width: 1200px) {
	ul.list_grid > li { width:calc((100% - 15px)/2); } 
}
@media (max-width: 800px) {
	ul.list_grid > li { width:100%; }
}
ul.list_grid > li.empty { width:100%; padding:120px 0px; text-align:center; font-weight:800; color:var(--color-G5); font-size:14px }
ul.list_grid > li.empty b { color:var(--color-BL); }

/* list */
table.list_list { width:100%; }
table.list_list thead tr td { color:var(--color-G5); font-size:12px; text-align:center }
table.list_list tbody tr    { cursor:pointer }
table.list_list tbody tr td { color:var(--color-G8); font-size:12px; text-align:center; font-weight:700; padding:10px 0px }
table.list_list tr td:nth-child(1),
table.list_list tr td:nth-child(2) { text-align:left; }
table.list_list tbody tr td img { width:23px; height:23px; margin-right: 5px; vertical-align: top; }
table.list_list tbody tr td span { font-weight:normal }
table.list_list tbody tr td.empty { width:100%; padding:120px 0px; text-align:center; font-weight:800; color:var(--color-G5); font-size:14px }
table.list_list tbody tr td.empty b { color:var(--color-BL); }