.design_page * { box-sizing: border-box; font-family: notokr_400; font-size: 12px; }
.design_div { display: none; }
.design_page:not(.popup) { margin-bottom: 50px; }

.design_page .mb10 { margin-bottom: 10px; }
.design_page .mb20 { margin-bottom: 20px; }
.design_page .mb30 { margin-bottom: 30px; }

.design_bg { width: 805px; margin: 0 auto; border-style: solid; border-width: 25px 25px 0 25px; border-color: #f5f5f5; }
.design_bg .subtitle { margin-top: 30px; margin-bottom: 10px; padding-left: 5%; text-align: left; }

/* 상품군 */
.design_bg .sel1 { width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); }
.design_bg .sel1 .item { border-style: solid; border-width: 1px 1px 1px 0; border-color: #c7c7c7; height: 30px; line-height: 30px; }
.design_bg .sel1 .item:nth-child(5n+1) { border-left: solid 1px #c7c7c7; }
.design_bg .sel1 .item:nth-child(n+6) { border-top: none; }
.design_bg .sel1 .item.active { background-color: #e93c58; color: #fff; border-color: #e93c58; }

/* 업종 */
.design_bg .sel2 { width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.design_bg .sel2 .item { border-style: solid; border-width: 1px 1px 1px 0; border-color: #c7c7c7; height: 30px; line-height: 30px; }
.design_bg .sel2 .item:nth-child(4n+1) { border-left: solid 1px #c7c7c7; }
.design_bg .sel2 .item:nth-child(n+5) { border-top: none; }
.design_bg .sel2 .item.active { background-color: #e93c58; color: #fff; border-color: #e93c58; }

.design_bg .item:hover { cursor: pointer; }
.design_bg .msg_loading { text-align: center; }

.design_template { width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.design_template.lists { text-align: left; }
.design_template.second-style { width: 90%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }

.dt_info { margin-bottom: 8px; }
.dt_code { color: #6c6c6c; font-weight: bold; font-size: 15px; }
.btn-copy { background-color: #c2c2c2; color: #fff; border-radius: 9px; padding: 2px 10px; }
.btn-copy:hover, .dt_box .dt_img:hover { cursor: pointer; }
.dt_box .dt_img { height: 119px; background-size: contain; background-position: center; background-repeat: no-repeat; }
/* 각티슈, 큐브메모함 등 2x2 스타일 */
.design_template.second-style .dt_box .dt_img { height: 200px; }
.dt_nodata { text-align: center; color: #999; font-size: 20px; letter-spacing: -2px; font-weight: bold; grid-column: 1 / -1; }

#option_image_preview { display: none; }
#option_image_preview img { max-width: 100%; }

#pageindex { text-align: center; margin-top: 30px; padding-bottom: 25px; }
#pageindex span.pi { font-size: 12px; display: inline-block; background-color: #fefefe; color: #a39f9e; border: solid 1px #ddd; padding: 4px 5px; border-radius: 1px; font-weight: bold; }
#pageindex span.pi:first-child { margin-right: 4px; }
#pageindex span.pi:not(:first-child) { margin: 0 2px; }
#pageindex span.pi.active { background-color: #222; border-color: #222; color: #fff; }
#pageindex span.pi:not(.active):not(.off):hover { background-color: #848484; color: #fff; box-shadow: 2px 2px 5px #999; cursor: pointer; }
#pageindex span.pi.off { color: #aaa; }

.design_search_container { position: absolute; right: 40px; top: -6px; }
.design_search_container::after { content: ""; display: table; clear: both; }
.design_search_title { font-size: 16px; font-weight: bold; margin-right: 15px; }
.design_search_keyword { border: solid 1px #e0e0e0; margin-right: 5px; ime-mode: disabled; text-transform: uppercase; height: 27px; padding-left: 5px; outline: none; color: #333; width: 100px; }
.design_search_keyword:focus { border-color: #646464; }
.design_search_button { border: solid 1px #646464; background-color: #6c6c6c; color: #fff; height: 27px; }
.design_search_button:hover { cursor: pointer; }