@charset "utf-8";

/*水晶商城所有基礎通用設定*/

.item_redemption_guide main .step_block {
    width: 100%;
    max-width: 1250px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto var(--block-margins-s);
    padding-top: var(--block-margins-s) 0;
    gap:var(--block-margins-s);
}

.item_redemption_guide main .step_block .setp1,
.item_redemption_guide main .step_block .setp2 {
    flex: 1 1 calc(50% - 1rem); box-sizing: border-box;
}

.item_redemption_guide main .step_block .setp3 {
    width: 100%; margin-top:0;
}

.item_redemption_guide main .step_block section {
    display: flex;
    flex-direction: column;
    margin: var(--block-margins-s) 0;
}

.item_redemption_guide main .step_block section .tex_box {
    padding: var(--block-margins-ss)  var(--block-margins-s);
    width: 100%;
    /* border: var(--border-wt-style); */
    box-shadow: var(--box-shadow-light);
    border-radius: var(--border-radius-ss);
    background: var(--form-bg);
    gap: calc(var(--block-margins-ss) *1.5);
     display: flex;
    height: 100%;

}
.item_redemption_guide .step_block .tex_box .txt {
  flex-grow: 1; /* 讓文字塊自動填滿可用高度 */
  display: flex;
  flex-direction: column;
  padding: var(--block-margins-ss) 0;
}
/* .item_redemption_guide main .step_block .setp1 .tex_box .txt p{
    vertical-align: middle; 
} */
.item_redemption_guide main .step_block .setp1 .tex_box .txt .icon{
    width: 23px; display: inline-flex;  vertical-align: middle;
    height: 23px; top: -1.5px;  position: relative;
     aspect-ratio: 1/1; margin-left: 4px;
      background-size: 100% 100%; 
   background-image: url(../images/svg/mail_ui.svg);
}
.item_redemption_guide main .step_block .setp1 .tex_box .txt .icon{
  
   /* background-color:var(--gray02); */
}
.item_redemption_guide .step_block .tex_box .txt h2{
    font-weight: 600; font-size: calc(var(--normal-txt-size) *1.25);
    padding-bottom: calc(var(--block-margins-ss) * 0.5) ;
}
.item_redemption_guide main .step_block section .tex_box h1 {
    position: relative; flex: 0 0 auto; /* 不允許縮放，也不撐大 */
    font-family: 'Noto Serif HK';
    font-weight: 700;
    width:clamp(60px,5vw,80px);
    aspect-ratio: 1 / 1;
    font-size: calc(var(--normal-btn-size) * 1.7);
    color: #fff;
    overflow: hidden;
    z-index: 0;
    display: flex; align-items: center; justify-content: center;
}

.item_redemption_guide main .step_block section .tex_box h1 span {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}

.item_redemption_guide main .step_block section .tex_box h1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--blue-gradient);
    mask-image: url("../../images/svg/star.svg");
    -webkit-mask-image: url("../../images/svg/star.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    z-index: -1;
    /* 往下壓，避免遮住文字 */
    pointer-events: none;
}

.item_redemption_guide main .step_block .pic {
    width: 100%;
    height: auto;
    background-position: center;
    margin: 0 auto;
}
.item_redemption_guide main .step_block .setp1 .pic {
    aspect-ratio: 618/465;
    max-width: 618px;
    background: url('../images/item_redemption_guide/pic_01.webp') no-repeat;
    background-size: cover;
}

.item_redemption_guide main .step_block .setp2 .pic {
    aspect-ratio: 618/465;
    max-width: 618px;
    background: url('../images/item_redemption_guide/pic_02.webp') no-repeat;
    background-size: cover;
}

.item_redemption_guide main .step_block .setp3 .pic {
    aspect-ratio: 1280/555;
    max-width: 1280px;
    background: url('../images/item_redemption_guide/pic_03.webp') no-repeat;
    background-size: cover;
}


@media (max-width: 767px) {

    .item_redemption_guide main .step_block{
        flex-direction: column;
    }
.item_redemption_guide main .step_block>section{
   width: 100%; flex:auto;
}
.item_redemption_guide main .step_block .setp1 .pic, .item_redemption_guide main .step_block .setp2 .pic  {
     aspect-ratio: 618/425;
    height: calc(100% - 10px);
    background-size: 100% auto;
}
}
@media (max-width: 350px) {
    .item_redemption_guide main .step_block section .tex_box {
    padding: calc(var(--block-margins-ss) *1.2);
}
}
@media (max-width: 250px) {
    .item_redemption_guide main .step_block section .tex_box {
    display: flex; flex-direction: column; gap: 0; justify-content: center;
     padding: calc(var(--block-margins-ss) *2); padding-top: 0;
}
.item_redemption_guide main .step_block section .tex_box h1 {
  margin: 0 auto;
  font-size: calc(var(--normal-btn-size) * 1.5);
}

.item_redemption_guide main .step_block section .tex_box h1::before {
    width: 75%;
    height: 75%;
}
.item_redemption_guide .step_block .tex_box .txt {
    padding-top: 0;
}
}