@charset "utf-8";
/* ==========================================================================
   shop_nplay_custom.css — NPLAY custom DIY
   ========================================================================== */

/* --------------------------------------------------------------------------
   tokens — CSS variables
   -------------------------------------------------------------------------- */
:root { --nplay-font-family: var(--font-pretendard); --nplay-color: #ce0e2d; --nplay-layout-padding: 40px; --opt-select-box-width: 212px; --opt-select-box-height: 40px; }
/* --------------------------------------------------------------------------
   responsive — ≤1024px
   -------------------------------------------------------------------------- */
@media all and (max-width:1024px) {
 :root { --nplay-layout-padding: 20px; }
}
/* --------------------------------------------------------------------------
   responsive — ≤768px
   -------------------------------------------------------------------------- */
@media all and (max-width:768px) {
 :root { --opt-select-box-height: 50px; }
}

/* --------------------------------------------------------------------------
   nplay_diy_main — 커스텀 메인 뷰
   -------------------------------------------------------------------------- */
.nplay_diy_main { margin-bottom: 130px; }
.nplay_diy_main .nplay_main_inner { font-family: var(--nplay-font-family); position: relative; max-width: 1440px; margin: 0 auto; padding: 0 80px; }
.nplay_top { position: relative; height: 100vh; overflow: hidden; }
.nplay_top .videobox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.nplay_top .videobox video { display: block; width: 100%; height: 100%; object-fit: cover; }
.nplay_top .videobox video[poster] { width: 100%; height: 100%; object-fit: cover; }
.nplay_top .descbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 129px 0; }
.nplay_top .descbox:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; display: block; mix-blend-mode: multiply; background: rgba(0, 0, 0, 0.3); }
.nplay_top .descbox .nplay_main_inner { display: flex; flex-direction: column; z-index: 1; height: 100%; }
.nplay_top .descbox .title { margin-top: auto; }
.nplay_top .descbox .txt { position: relative; top: -6px; font-size: 20px; font-weight: 500; color: #fff; }
.nplay_top .descbox .btnbox { display: flex; margin-top: 25px; }
.nplay_top .descbox .link { width: 169px; height: 39px; background: var(--nplay-color); color: #fff; font-size: 16px; font-weight: 600; border-radius: 4px; text-align: center; line-height: 39px; margin-right: 10px; }
.nplay_intro { background: #f9f2ef; max-width: 100%; padding: 92px 0; margin-bottom: 0; }
.nplay_intro * {letter-spacing:-0.03em;color:#000;}
.nplay_intro .intro_header { max-width: 100%; margin-bottom: 38px; }
.nplay_intro .intro_header:after { display: none; }
.nplay_intro .intro_header .title {display:flex;margin-bottom:35px;}
.nplay_intro .intro_header .title span { display:block; margin-left:5px; padding-top: 0; line-height: 69px; align-self: end; font-weight:700; font-size:27px; }
.nplay_intro .intro_header .title span:first-child { margin-left: 0; }
.nplay_intro .intro_header .sub_title { font-weight: 600; margin-bottom:12px; font-size:30px; }
.nplay_intro .intro_header .txt { font-size:20px;line-height:1.5;word-break: keep-all; }
.nplay_service_info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nplay_service_info img { max-width: 100%; height: auto; }
.nplay_service_info .info_box { background: #fff; border-radius: 10px; padding: 40px; height: auto; }
.nplay_service_info .title_box { margin-bottom: 16px; }
.nplay_service_info .title_box span { display: block; margin-bottom: 10px; }
.nplay_service_info .title_box p { font-size: 23px; font-weight: 500; }
.nplay_service_info .content_type { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; width: calc(100% + 28px); margin-left: -14px; gap: 18px 4px; }
.nplay_service_info .content_type .name { font-size: 15px; font-weight: 500; color: #000; }
.nplay_service_info .name i { color: var(--nplay-color); }
.nplay_service_info .content_type .info { font-size: 12px; color: #959595; letter-spacing: -0.05em; }
.nplay_service_info .color_cate { display: flex; width: 100%; padding: 5px 0 10px; }
.nplay_service_info .color_cate:first-child { border-bottom: 1px solid #efefef; margin-bottom: 20px; }
.nplay_service_info .color_cate .cate_name { width: 90px; flex-shrink: 0; font-size: 18px; line-height: 1; font-weight: 500; }
.nplay_service_info .cate_name small { display: block; font-size: 12px; margin-top: 0.5em; }
.nplay_service_info .color_cate .color_list { flex: 1; margin-top: -3px; }
.nplay_service_info .color_list li { color: var(--nplay-color); font-size: 18px; font-weight: 500; margin-bottom: 0.3em; }
.nplay_service_info .color_list small { color: inherit; font-size: 14px; font-weight: inherit; }
.nplay_service_info .engrave_cate { display: flex; width: 100%; padding: 5px 0 10px; }
.nplay_service_info .engrave_cate .cate_name { width: 48px; flex-shrink: 0; font-size: 18px; line-height: 1; font-weight: 500; }
.nplay_service_info .engrave_list { flex: 1; }
.nplay_service_notice { padding: 20px 0; }
.nplay_service_notice .txt { color: #8d8582; line-height: 1.7; font-size: 14px; word-break: keep-all; padding-left: 6px; text-indent: -6px; }
.nplay_service_notice .txt strong { color: var(--nplay-color); }

.nplay_intro .info_box { opacity: 0; visibility: hidden; transform: translate3d(0, -120px, 0); will-change: transform; transition: opacity 0.6s ease-in, transform 0.6s ease-in; }
.nplay_intro .info_box.show { visibility: visible; }
.nplay_intro .info_box.show.fade-down { transform: translate3d(0, 0, 0); opacity: 1; }

/* --------------------------------------------------------------------------
   responsive — ≤1440px
   -------------------------------------------------------------------------- */
@media all and (max-width:1440px) {
	.nplay_diy_main .nplay_main_inner { padding: 0 20px; }
	.nplay_top .descbox { padding: 102px 0; }
}
/* --------------------------------------------------------------------------
   responsive — ≤1280px
   -------------------------------------------------------------------------- */
@media all and (max-width:1280px) {
	.nplay_top .descbox { padding: 76px 0; }
	.nplay_intro { padding: 73px 0; }
	.nplay_intro .intro_header .sub_title { font-size: 27px; }
	.nplay_intro .intro_header .txt { font-size: 18px; }
	.nplay_service_info .info_box { padding: 24px; }
	.nplay_service_info .title_box p { font-size: 21px; }
	.nplay_service_info .content_type { width: calc(100% + 20px); margin-left: -12px; }
	.nplay_service_info .content_type .info { font-size: 11px; }
	.nplay_service_info .color_cate .cate_name,.nplay_service_info .color_list li,.nplay_service_info .engrave_cate .cate_name { font-size: 16px; }
	.nplay_service_notice .txt { font-size: 13px; }
	.nplay_service_notice { padding: 16px 0; }
}
/* --------------------------------------------------------------------------
   responsive — ≤1024px
   -------------------------------------------------------------------------- */
@media all and (max-width:1024px) {
 .nplay_top .descbox { padding: 52px 0; }
	.nplay_intro { padding: 55px 0; }
	.nplay_diy_main .nplay_main_inner { max-width: 768px; }
	.nplay_service_info { display: block; }
	.nplay_service_info .info_box { padding: 32px; margin-bottom: 17px; }
	.nplay_service_info .info_box:last-child { margin-bottom: 0; }
	.nplay_service_notice .txt { font-size: 12px; }
}
/* --------------------------------------------------------------------------
   responsive — ≤768px
   -------------------------------------------------------------------------- */
@media all and (max-width:768px) {
	.nplay_top { min-height: 100vw; }
	.nplay_top .descbox .txt { margin-top: 10px; top: 0; font-size: 18px; }
	.nplay_top .descbox .btnbox { margin-top: 30px; }
	.nplay_top .descbox .btnbox { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5.5px; }
	.nplay_top .descbox .link { height: 35px; line-height: 35px; border-radius: 2px; font-size: 13px; margin: 0; width: auto; }
	.nplay_intro { padding: 34px 0; }
	.nplay_intro .intro_header { padding: 0; margin-top: 12px; margin-bottom: 32px; }
	.nplay_intro .intro_header .title { margin-bottom: 14px; }
	.nplay_intro .intro_header .title span { line-height: 54px; }
	.nplay_intro .intro_header .sub_title { font-size: 22.5px; }
	.nplay_intro .intro_header .txt { font-size: 13px; }
	.nplay_intro .intro_header .sub_title { font-size: 22.5px; margin-bottom: 6px; }
	.nplay_intro .intro_header .txt { font-size: 13px; }
	.nplay_service_info .title_box { margin-bottom: 12px; }
	.nplay_service_info .title_box p { font-size: 19px; }
	.nplay_service_info .title_box span { margin-bottom: 8px; }
	.nplay_service_info .content_type .name { font-size: 12px; }
	.nplay_service_info .content_type .info { font-size: 10px; }
	.nplay_service_info .color_cate .color_list { margin-top: -2px; }
	.nplay_service_info .color_cate .cate_name,.nplay_service_info .color_list li,.nplay_service_info .engrave_cate .cate_name { font-size: 14px; }
	.nplay_service_info .color_cate .cate_name { width: 70px; }
	.nplay_service_info .cate_name small { font-size: 10px; }
	.nplay_service_info .engrave_cate { padding-bottom: 6px; }
	.nplay_service_info .engrave_cate .cate_name { width: 40px; }
	.nplay_service_notice { padding: 12px 0; }
	.nplay_service_notice .txt { font-size: 9px; padding-left: 4px; text-indent: -4px; }
}

/* --------------------------------------------------------------------------
   nplay_diy — DIY 편집
   -------------------------------------------------------------------------- */
.nplay_inner { position:relative; max-width:1440px; margin:0 auto;padding-top:100px;}

.nplay_diy * { font-family: var(--nplay-font-family); }
.nplay_prd { padding: 128px 0 45px; background: #fcf8f7; overflow: hidden; }
.nplay_prd .nplay_inner { margin-top: 0; padding-top: 35px; }
.nplay_prd .inner_sub_title {position: absolute; right:0; top:0; padding:35px 40px 0 40px;}
.nplay_prd .title, .nplay_prd .sub_title { position: relative; z-index: 1; }
.nplay_prd .title { padding: 0 var(--nplay-layout-padding); }
.nplay_prd .sub_title { padding: 4px var(--nplay-layout-padding) 21px; font-size: 20px; color: var(--nplay-color); letter-spacing: -0.075em; }

.nplay_prd .mix_case_wrap { position: relative; max-width: 1440px; margin: 0 auto 26px; padding: 0 var(--nplay-layout-padding); }
/* .nplay_prd .mix_case_wrap:before { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); content: ""; display: block;
	width: 1441px; height: 179px; margin-top: -18px; background: url(/resources/images/shop/nplay/custom/diy/bg_prd_text.png) no-repeat 50% 50% / 100% auto; } */
.nplay_prd .mix_case_wrap:before {position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);content: "";display: block;
	width: 100vw;height: 179px;margin-top: -18px;background-image: url(/resources/images/shop/nplay/custom/diy/bg_prd_text.png);background-repeat: repeat-x;background-size: auto;animation: slide 20s linear infinite;}
.nplay_prd .mix_case { z-index: 1; position: relative; width: 614px; height: 387px; margin: 0 auto; }
.nplay_prd .mix_case img { max-width: 100%; }
.nplay_prd .mix_case .img_case_w { display: block; }
.nplay_prd .mix_case .img_case_m { display: none; }
.nplay_diy .mix_ux { position: absolute; left: calc((63 / 614) * 100%); top: calc((55 / 387) * 100%); width: calc((457 / 614) * 100%); height: calc((240 / 387) * 100%); border-radius: 6px; overflow: hidden; }
.nplay_diy .mix_ux .mix_select { box-shadow: inset 2px 2px 0 rgba(76, 68, 65, 0.14); position: absolute; top: 0; height: 100%; overflow: hidden; }
.nplay_diy .mix_ux .palette_item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }
.mix_case .mix_select1 { background: #c3c1c0; }
.mix_case .mix_select2 { background: #d3d2d1; }
.mix_case .mix_select3 { background: #c3c1c0; }

@keyframes slide {
	from { background-position: 0 0; }
	to   { background-position: 100% 0; }
}

.mix_case.type_01 .mix_select { left: 0; width: 100%; }
.mix_case.type_01 .mix_select:not(.mix_select1) { display: none; }
.mix_case.type_02 .mix_select { left: 0; width: 100%; }
.mix_case.type_02 .mix_select:not(.mix_select1) { display: none; }
.mix_case.type_03 .mix_select { width: 59.58%; }
.mix_case.type_03 .mix_select.mix_select1 { z-index: 2; left: 0; transform-origin: bottom; transform: skewX(16deg); }
.mix_case.type_03 .mix_select.mix_select2 { right: 0; }
.mix_case.type_03 .mix_select.mix_select3 { display: none; }
.mix_case.type_04 .mix_select { width: 40%; }
.mix_case.type_04 .mix_select.mix_select1 { left: 0; }
.mix_case.type_04 .mix_select.mix_select2 { z-index: 2; left: 29.56%; width: 33.72%; transform-origin: bottom; transform: skewX(-8.5deg); }
.mix_case.type_04 .mix_select.mix_select3 { right: 0; }
.mix_case.type_05 .mix_select { width: 50%; }
.mix_case.type_05 .mix_select.mix_select1 { left: 0; }
.mix_case.type_05 .mix_select.mix_select2 { right: 0; }
.mix_case.type_05 .mix_select.mix_select3 { display: none; }
.mix_case.type_06 .mix_select { width: 33.4%; }
.mix_case.type_06 .mix_select.mix_select1 { left: 0; }
.mix_case.type_06 .mix_select.mix_select2 { z-index: 2; left: 33.33%; width: 33.33%; }
.mix_case.type_06 .mix_select.mix_select3 { right: 0; }

.mix_case .mix_stamp { position: absolute; z-index: 2; left: calc((63 / 614) * 100%); top: calc((60 / 387) * 100%); width: calc((457 / 614) * 100%); height: calc((230 / 387) * 100%); border-radius: 6px; overflow: hidden; }
.mix_case .mix_stamp .stamp_select { position: absolute; top: 0; height: 100%; overflow: hidden; left: 0; width: 100%; }
.mix_case .mix_stamp .stamp_select:not(.stamp_select1) { display: none; }
.mix_case .mix_stamp .engrave_item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }

.mix_case.type_05 .mix_stamp .stamp_select { width: 50%; }
.mix_case.type_05 .mix_stamp .stamp_select2 { display: block; left: 50%; }
.mix_case.type_06 .mix_stamp .stamp_select { width: 33.3%; }
.mix_case.type_06 .mix_stamp .stamp_select2 { display: block; left: 33.3%; }
.mix_case.type_06 .mix_stamp .stamp_select3 { display: block; left: 66.6%; }

.mix_case .type_txt { transform: translate3d(0, -50%, 0); position: absolute; right: -194px; top: 50%; margin-top: -18px; width: 180px; }
.mix_case .type_txt p { font-weight: 500; font-size: 14px; color: #000; }

.nplay_diy .nplay_step { padding: 0; border-bottom: 0; }
.nplay_diy .nplay_step .nplay_option { padding: 0 var(--nplay-layout-padding); }
.nplay_step .option_inner { display: flex; max-width: 1440px; margin: 0 auto; }
.nplay_step .nplay_option { border-bottom: 1px solid #f1ecea; }
.nplay_step .nplay_option .title_box { padding: 22px 0; width: 160px; flex-shrink: 0; }
.nplay_step .nplay_option .option_title { color: var(--nplay-color); font-size: 22px; font-weight: 600; }
.nplay_step .option_wrap { display: flex; flex: 1; flex-wrap: wrap; }
.nplay_step .type_item { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 168px; height: 168px; padding: 28px 0; text-align: center; transition: background-color 0.2s; }
.nplay_step .type_item.active { background: #f9f2ef; }
.nplay_step .type_item .imgbox { position: static; }
.nplay_step .imgbox img { margin: 0 auto; }
.nplay_step .type_item .name { font-size: 16px; font-weight: 500; color: #000; line-height: 1; padding: 5px 0 6px; }
.nplay_step .type_item .name i { color: var(--nplay-color); }
.nplay_step .type_item .info { font-size: 12px; color: #535353; }
.nplay_step .type_item button { display: block; position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; }

.nplay_step .select_color .option_wrap { display: block; flex: 0 1 calc(100% - 160px); padding: 7px 0 12px; }
.nplay_step .step_color { display: none; padding-bottom: 11px; }
.nplay_step .step_color.active { display: flex; }
.nplay_step .step_color .color_type { width: 109px; flex-shrink: 0; font-size: 17px; color: #000; padding-top: 30px; line-height: 1; }
.nplay_step .chip_list { display: flex; flex: 1; flex-wrap: wrap; }
.nplay_step .colorchip { padding: 4px; text-align: center; }
.nplay_step .chip_list .chip_name { padding-bottom: 4px; font-size: 12px; line-height: 1; color: #707070; opacity: 0; transition: opacity 0.2s; }
.nplay_step .colorchip.on .chip_name { opacity: 1; }
.nplay_step .colorchip button { position: relative; width: 37px; height: 37px; border-radius: 50%; background-position: 50% 50%; background-repeat: no-repeat; background-size: 175px 175px; }
.nplay_step .colorchip button:disabled { opacity: 0.4; cursor: not-allowed; }
.nplay_step .colorchip button:disabled:after { content: ""; position: absolute; width: 1px; left: 50%; right: 0; top: 0; bottom: 0; background: #fff; transform: rotateZ(45deg); }
.nplay_step .colorchip button span { position: absolute; top: 5px; left: 5px; width: 27px; height: 27px; border-radius: 50%; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 15.7px; line-height: 27px; letter-spacing: -0.05em; }

.nplay_step .select_engrave_opt { margin-right: 16px; }
.nplay_step .engrave_wrap { flex: 1; padding: 48px 0; }
.nplay_step .engrave_type { display: none; }
.nplay_step .engrave_type.active { display: flex; }
.select_engrave.nplay_option .title_box { padding: 48px 0; }
.select_engrave .select_box { position: relative; width: var(--opt-select-box-width); height: var(--opt-select-box-height); }
.select_engrave .option_select_button { position: relative; z-index: 1; width: var(--opt-select-box-width); height: var(--opt-select-box-height); border-radius: 6px; border: 1px solid #928d8c; padding: 6px 14px; background: #fff; cursor: pointer; }
.select_engrave .option_select_button:after { position: absolute; right: 8px; top: 50%; content: ""; width: 14px; height: 8px; margin-top: -4px; background-position: 0 0; background-size: 12.75px 7.75px; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.75' height='7.75'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='.5' d='m1.25 1.25 4.999 4.999L11.25 1.25'/%3E%3C/svg%3E"); }
.select_engrave .active .option_select_button:after { transform: rotate(180deg); }
.select_engrave .option_select_button .option_selected { display: flex; width: 100%; height: 26px; padding: 3px 0; font-size: 16px; color: #000; }
.select_engrave .option_selected .option_name { min-width: 16px; line-height: 21px; font-size: 13px; color: #000; }
.select_engrave .option_selected .option_thumb { display: none; width: 20px; height: 20px; margin-left: auto; border-radius: 0; background-size: 16px 16px; }
.select_engrave .option_select_box { display: none; z-index: 2; position: absolute; width: var(--opt-select-box-width); height: 128px; overflow: hidden; margin-top: -6px; padding-top: 6px; border: 1px solid #928d8c; border-radius: 0 0 6px 6px; border-top: 0; background: #fff; }
.select_engrave .select_box.active .option_select_box { display: block; }
.select_engrave .option_select_box .list { border-top: 1px solid #edebea; overflow-y: auto; height: 100%; }
.select_engrave .list::-webkit-scrollbar { width: 6px; }
.select_engrave .list::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
.select_engrave .list::-webkit-scrollbar-thumb { background: #e2e2e2; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.select_engrave .option_select_li { padding: 7px 14px; }
.select_engrave .option_select_li button { display: flex; width: 100%; height: 26px; padding: 3px 0; }
.select_engrave .option_name { font-size: 13px; color: #7d7d7d; min-width: 16px; line-height: 21px; }
.select_engrave .option_select_box .option_thumb { width: 20px; height: 20px; margin-left: auto; border-radius: 0; background-size: 16px 16px; background-position: 50% 50%; background-repeat: no-repeat; }
.select_engrave.type_02_disabled .option_select_button { opacity: 0.5; background-color: #f5f5f5; }
.select_engrave.type_02_disabled .option_select_box { pointer-events: none; }
.select_engrave.type_02_disabled .option_select_li button { opacity: 0.5; }

/* stamp option thumbs (static IMAGE_BASE_URL → /resources/images) */
.option_thumb--engrave-00 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/engrave_option_00.png); }
.option_thumb--engrave-01 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/engrave_option_01.png); }
.option_thumb--engrave-02 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/engrave_option_02.png); }
.option_thumb--tile-02-logo { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_02_logo.png); }
.option_thumb--tile-02-square { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_02_square.png); }
.option_thumb--tile-02-dotted { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_02_dotted.png); }
.option_thumb--typo-01 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_01.png); }
.option_thumb--typo-02 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_02.png); }
.option_thumb--typo-03 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_03.png); }
.option_thumb--typo-04 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_04.png); }
.option_thumb--typo-05 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_05.png); }
.option_thumb--typo-06 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_06.png); }
.option_thumb--typo-07 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_07.png); }
.option_thumb--typo-08 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_08.png); }
.option_thumb--typo-09 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_09.png); }
.option_thumb--typo-10 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_10.png); }
.option_thumb--typo-11 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_11.png); }
.option_thumb--typo-12 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_12.png); }
.option_thumb--typo-13 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_13.png); }
.option_thumb--typo-14 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_14.png); }
.option_thumb--typo-15 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_15.png); }
.option_thumb--typo-16 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_16.png); }
.option_thumb--typo-17 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_17.png); }
.option_thumb--typo-18 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_18.png); }
.option_thumb--typo-19 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_19.png); }
.option_thumb--typo-20 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_20.png); }
.option_thumb--typo-21 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_21.png); }
.option_thumb--typo-22 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_22.png); }
.option_thumb--typo-23 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_23.png); }
.option_thumb--typo-24 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_24.png); }
.option_thumb--typo-25 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_25.png); }
.option_thumb--typo-26 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_26.png); }
.option_thumb--typo-27 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_27.png); }
.option_thumb--typo-28 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_28.png); }
.option_thumb--typo-29 { background-image: url(/resources/images/shop/nplay/custom/diy/stamp/tile_engrave_03_typo_29.png); }

.nplay_diy .nplay_notice { padding: 40px var(--nplay-layout-padding) 30px; }
.nplay_diy .nplay_notice .nplay_inner { padding-top:0; }
.nplay_diy .nplay_notice .notice_title { color: var(--nplay-color); font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.nplay_diy .nplay_notice .notice_txt { color: #8d8582; font-size: 12px; line-height: 1.6; word-break: keep-all; }

.nplay_info { margin-top: 0; }
.nplay_info .nplay_info_inner {padding:82px 0;}
.nplay_info .shop_information {padding-bottom:0;background-color:#fbfafa;}
.nplay_info .shop_information * {word-break:keep-all;}
.nplay_info .shop_information .info_inner {padding-top:15px;}
.nplay_info .shop_information .infoView {cursor:pointer;}
.nplay_info .shop_information dl {background:transparent;}
.nplay_info .shop_information dl:after {position:absolute;right:0;top:50%;margin-top:-18px;content:"";display:block;width:36px;height:36px;cursor:pointer;background-repeat:no-repeat;background-position:50% 50%;background-size:22.25px 14.25px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.25' height='14.25'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='m2.749 1.75 8.001 7.999 7.999-7.999'/%3E%3C/svg%3E");
}
.nplay_info .shop_information ul li:first-child dt {border:0;}
.nplay_info .info_star > li:after {mix-blend-mode: multiply;}

/* --------------------------------------------------------------------------
   responsive — ≤1440px
   -------------------------------------------------------------------------- */
@media all and (max-width:1440px) {
	#engraveType_2 .select_engrave_opt { width: 33.3%; margin-right: 12px; }
	#engraveType_2 .select_engrave_opt:last-child { margin-right: 0; }
	#engraveType_2 .select_box,
	#engraveType_2 .option_select_button,
	#engraveType_2 .option_select_box { width: 100%; }
	.nplay_prd .mix_case_wrap:before { width: 100%; height: 179px; }
	/* .nplay_prd .mix_case_wrap:before { width: 100%; height: calc((179 / 1440) * 100vw); } */
}
/* --------------------------------------------------------------------------
   responsive — ≤1280px
   -------------------------------------------------------------------------- */
@media all and (max-width:1280px) {
	.nplay_step .nplay_option .title_box { width: 128px; }
	.nplay_step .type_item { width: calc((100% / 6)); }
	.nplay_diy .select_type { padding-right: 0; }
}
/* --------------------------------------------------------------------------
   responsive — ≤1024px
   -------------------------------------------------------------------------- */
@media all and (max-width:1024px) {
	.nplay_prd { padding-bottom: 60px; }
	.nplay_prd .title,.nplay_prd .sub_title { text-align: center; }
	.nplay_prd .inner_sub_title {padding:35px 20px 0 0;}
	.nplay_prd .title img { margin: 0; }
	/* .nplay_prd .title img { margin: 0 auto; } */
	.mix_case .type_txt { right: 0; top: auto; bottom: -40px; transform: none; width: 100%; margin-top: 0; text-align: center; }
	.nplay_step .option_inner { max-width: 768px; margin: 0 auto; }
	.nplay_step :not(.select_type) .option_inner { display: block; }
	.nplay_step .nplay_option:not(.select_type) .title_box { width: 100%; padding: 40px 0 16px; }
	.nplay_diy .nplay_step .select_type { padding: 0; }
	.nplay_diy .select_type .option_wrap { max-width: 504px; }
	.nplay_diy .select_type .title_box { padding-top: 40px; }
	.nplay_step .type_item { width: 168px; }
	.nplay_step .step_color .color_type { width: 128px; }
	.nplay_step .engrave_wrap { padding: 3px 0 25px; margin-bottom: 25px; }
	.nplay_step .engrave_wrap .select_engrave_opt { padding: 15px 0; }
	.nplay_diy .nplay_notice .nplay_inner { max-width: 768px; }
	.nplay_info .nplay_info_inner {max-width:1024px;}
	.nplay_info .shop_information dl {padding:0 80px 0 60px;}
	.nplay_info .shop_information dl:after {right:20px;}
	.nplay_info .shop_information dt {font-size:19px;}
	.nplay_info .shop_information dd {padding-left:268px;}
}
/* --------------------------------------------------------------------------
   responsive — ≤768px
   -------------------------------------------------------------------------- */
@media all and (max-width:768px) {
	.nplay_prd { padding-top: 70px; }
	.nplay_prd .sub_title { font-size: 15px; padding-top: 0; margin-top: -1px; }
	.nplay_prd .mix_case_wrap { margin: 60px auto 12px; max-width: 640px; }
	.nplay_prd .mix_case_wrap:before { width: calc(100% + 20px); max-width: 790px; height: 0; margin-top: 5px; padding-bottom: 80%; background: url(/resources/images/shop/nplay/custom/diy/bg_prd_text_m.png) no-repeat 50% 0 / 100% auto; }
	.nplay_prd .mix_case { width: 100%; max-width: 656px; height: auto; }
	.nplay_prd .mix_case .img_case_w { display: none; }
	.nplay_prd .mix_case .img_case_m { display: block; width: 100%; height: auto; }
	.mix_case .mix_stamp { left: calc((63 / 614) * 100%); top: calc((60 / 414) * 100%); width: calc((457 / 614) * 100%); height: calc((257 / 414) * 100%); border-radius: 3px; }
	.mix_case .type_txt { bottom: -32px; }
	.mix_case .type_txt p { font-size: 12px; }
	.nplay_diy .select_type.nplay_option { padding: 0 var(--nplay-layout-padding); }
	.nplay_diy .select_type .option_inner { display: block; }
	.nplay_diy .select_type.nplay_option .title_box { width: 100%; padding: 40px 0 16px; }
	.nplay_diy .select_type .option_wrap { max-width: 100%; padding-bottom: 35px; }
	.nplay_step .type_item { width: 33.3%; height: calc((100vw - 40px) / 3); }
	.nplay_step .type_item .name { font-size: 15px; }
	.nplay_step .nplay_option:not(.select_type) .title_box { padding: 34px 0 12px; }
	.nplay_diy .nplay_step .select_color { padding-bottom: 22px; }
	.nplay_step .select_color { display: block; padding-bottom: 0; }
	.nplay_step .step_color { padding-bottom: 15px; }
	.nplay_step .step_color.active { display: block; }
	.nplay_step .select_color .option_wrap { padding: 0; }
	.nplay_step .step_color .color_type { width: 100%; font-size: 20px; line-height: 1.25; padding: 14px 0 0; }
	.nplay_step .chip_list { width: calc(100% + 8px); margin-left: -4px; }
	.nplay_step .colorchip button { width: 45px; height: 45px; }
	.nplay_step .colorchip button span { width: 35px; height: 35px; line-height: 35px; font-size: 20px; }
	.nplay_step .engrave_type.active { display: block; }
	.nplay_step .engrave_wrap { padding: 0; }
	.select_engrave .select_box { width: 100%; }
	.nplay_step .select_engrave_opt,#engraveType_2 .select_engrave_opt { margin-right: 0; width: 100%; }
	.select_engrave .option_selected .option_name { font-size: 16px; }
	.select_engrave .option_select_button { width: 100%; padding: 11px 14px; }
	.select_engrave .option_select_box { width: 100%; }
	.select_engrave .option_name { font-size: 16px; }
	.nplay_diy .nplay_notice { padding-top: 20px; padding-bottom: 15px; }
	.nplay_diy .nplay_notice .notice_title { font-size: 12px; margin-bottom: 5px; }
	.nplay_diy .nplay_notice .notice_txt { font-size: 11px; line-height: 1.4; }
	.nplay_info .nplay_texture { padding-top: 44px; }
}
/* --------------------------------------------------------------------------
   responsive — ≤480px
   -------------------------------------------------------------------------- */
@media all and (max-width:480px) {
	.mix_case .type_txt p { font-size: 10px; }
	.nplay_step .type_item { width: 50%; height: calc((100vw - 40px) / 2); }
	.nplay_step .colorchip { width: calc(100% / 6); }
}

.nplay_step .colorchip .new {margin-top:3px; color:var(--nplay-color); font-size: 13px; font-weight:500;}

/* --------------------------------------------------------------------------
   nplay_order_complete — 주문 완료
   -------------------------------------------------------------------------- */
.nplay_order_complete { height: 100vh; background: #f9f2ef; display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; }
.nplay_order_complete img { margin: 0 auto; }
.nplay_order_complete .icon_complete { margin-bottom: 34px; }
.nplay_order_complete .inner { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; text-align: center; background: url(/resources/images/shop/nplay/custom/complete/bg_complete.png) no-repeat 50% 50% / 100% auto; }
.nplay_order_complete .order_finished { font-family: var(--nplay-font-family); padding: 0; padding-top: 30px; }
.nplay_order_complete .title { font-size: 30px; font-weight: 500; color: var(--nplay-color); margin-bottom: 0.3em; }
.nplay_order_complete .txt { font-size: 20px; line-height: 1.5; margin-bottom: 43px; color:#000; letter-spacing:-0.02em; }
.nplay_order_complete .link { width: 156px; height: 39px; line-height: 39px; border-radius: 4px; font-size: 16px; font-weight: 600; background-color: var(--nplay-color); display:inline-block; color:#fff; text-align:center; background:#d31016; }

/* --------------------------------------------------------------------------
   responsive — ≤1280px
   -------------------------------------------------------------------------- */
@media all and (max-width:1280px) {
	.nplay_order_complete .title { font-size: 24px; }
	.nplay_order_complete .txt { font-size: 16px; }
}
/* --------------------------------------------------------------------------
   responsive — ≤768px
   -------------------------------------------------------------------------- */
@media all and (max-width:768px) {
	.nplay_order_complete { min-height: 100vw; background: #f9f2ef url(/resources/images/shop/nplay/custom/complete/bg_complete_m.png) no-repeat 50% 100% / 113.86% auto; }
	.nplay_order_complete .icon_complete { margin-bottom: 24px; }
	.nplay_order_complete .inner { background: none; }
	.nplay_order_complete .order_finished { margin: 0; padding-top: 20px; }
	.nplay_order_complete .title { font-size: 20px; }
	.nplay_order_complete .txt { font-size: 15px; line-height: 1.4; margin-bottom: 34px; }
	.nplay_order_complete .link { width: 145px; height: 35px; line-height: 35px; border-radius: 4px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   locale — en/jp overrides
   -------------------------------------------------------------------------- */
html:not([lang="ko"]) .shop_information dl{min-height:150px}
html:not([lang="ko"]) .shop_information dt{line-height:1.5;top:45px;}
html:not([lang="ko"]) .shop_information dd{padding-right:35px;}
html:not([lang="ko"]) .shop_information dl.rates{min-height:125px;border-top: 1px solid #efefef;}
html:not([lang="ko"]) .shop_information dl.rates:after{background:url(/resources/images/shop/arrow_pop.png) no-repeat center center;transform: rotate(0deg) !important;}

/* --------------------------------------------------------------------------
   responsive — ≤1023px
   -------------------------------------------------------------------------- */
@media only all and (max-width:1023px){
	html:not([lang="ko"]) .shop_information dl{min-height:inherit !important}
	html:not([lang="ko"]) .shop_information dl.rates{border-top:0;}
	html:not([lang="ko"]) .shop_information dl:after{background-size:cover !important;}
	html:not([lang="ko"]) .shop_information dt{padding:24px 20px 24px 0;top:inherit}
	html:not([lang="ko"]) .shop_information dt br{display:none}
}
/* --------------------------------------------------------------------------
   responsive — ≤768px
   -------------------------------------------------------------------------- */
@media only all and (max-width:768px){
	html:not([lang="ko"]) .fxb_ea{margin-bottom: 5px;}
}