@charset "utf-8";
.fix_btn_padding { position: relative; padding-bottom: 100px; }

/** button **/
.btn_box_wrap { position: relative; width: 100%; background: #FFF; }
.btn_box_wrap::before { position: absolute; left: 0; top: -23px; width: 100%; height: 24px; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); content: ''; display: block; }
.btn_box_wrap.type_fixed { position: fixed; bottom: 0; max-width: 480px; min-width: 320px; padding: 20px 24px; z-index: 10; }
.btn_box_wrap.type_bottom { position: absolute; bottom: 0; max-width: 480px; min-width: 320px; padding: 20px 24px; z-index: 10; }
.btn_box_wrap.type_double { display: flex; align-items: center; justify-content: space-between; }
.btn_box_wrap.type_double .btn { width: calc(50% - 4px); }
.btn_box_wrap.type_double .btn.wid60 { width: calc(62% - 8px); }
.btn_box_wrap.type_double .btn.wid40 { width: 38%; }
.btn_box_wrap .btn { position: relative; display: block; width: 100%; height: 52px; font-size: 18px; font-weight: 600; color: #FFF; line-height: 20px; text-align: center; padding: 16px; background: var(--purple); border: 1px solid var(--purple); border-radius: 8px; box-sizing: border-box; }
.btn_box_wrap .btn.btn_cancle { color: var(--color-main); background: #FFF; border: 1px solid var(--color-main); }
.btn_box_wrap .btn.type_black { background: #222; border: 1px solid #222; }
.btn_box_wrap .btn.type_arrow::after { width: 20px; height: 20px; background: url(../../resources/image/icon/icon_btn_arrow.svg) no-repeat center center; background-size: 24px; content: ''; display: inline-block; vertical-align: -4px; margin-left: 6px; }
.btn_box_wrap .btn:disabled,
.btn_box_wrap .btn.disabled { color: var(--gray-400); background: var(--gray-200); border: var(--gray-200); pointer-events: none; }
.btn_box_wrap .btn_sub_text { display: block; font-size: var(--font-small); font-weight: 700; color: var(--color-main); line-height: 24px; text-align: center; margin-bottom: 12px; }
.btn_box_wrap .btn_text { text-align: center; }

.btn > span { display: inline-block; }
.btn .btn_count { position: absolute; left: 16px; top: 16px; min-width: 20px; height: 20px; font-size: 14px; font-weight: 700; color: var(--purple); padding: 0 5px; background: #FFF; border-radius: 10px; overflow: hidden; }
.btn .btn_price { position: absolute; right: 16px; top: 16px; font-size: 13px; font-weight: 700; }
.btn.btn_cart { height: 56px; }
.btn.btn_cart > em { display: inline-block; }
.btn.btn_cart .price { display: inline-block; color: #ffffff; content: ''; display: inline-block ; }
.btn.btn_cart .price::before { width: 3px; height: 3px; background: rgba(255, 255, 255, 0.50); border-radius: 50%; content: ''; display: inline-block; vertical-align: 4px; margin: 0 6px; }
.btn.btn_cart .count { display: inline-block; width: 22px; font-size: 14px; font-weight: 700; color: #2AAD5C; line-height: 22px; text-align: center; padding-right: 1px; background: #ffffff; border-radius: 50%; vertical-align: 1px; margin-left: 6px; }