@charset "utf-8";
/*
 * ECM入稿登記活動用CSS-v25.0523
 * ----------------------------------------------
 * 2022-08-31 整合 danji.css + registerCSS.css 兩隻檔案
 * 2022-09-02 調整區塊寬度至CSS
 * 2022-11-09 新增3分鐘後開放登記之警告文案
 * 2023-03-27 活動說明浮層改線上入稿 by Shyu
 * 2024-01-11 調整登記樣式
 * 2024-01-19 調整警語樣式可移出Area_danji外
 * 2024-05-23 調整間距css
 * 2024-06-03 調整登記樣式
 * 2024-12-09 調整刪除不要的css設定
 * 2025-01-09 調整為系統組活動文案  by klyang
 * 2025-01-10 PC/MB共用HTML、重構CSS by tsshih
 * 2025-03-10 修改為系統帶贈品圖片 by Kevin
 * 2025-04-02 修改浮層高度60vh
 * 2025-05-23 調整為系統組活動文案(定案)
 * ----------------------------------------------
 */

 /*顏色參數設定*/
 .Area_danji {
    --btn-bg-color1: #FFF;
    --btn-bg-color2: #FFF;
    --btn-bg-color3: #FFF;
    --btn-bg-color4: #FFF;
    --btn-bg-color5: #FFF;    
    --btn-color1: #000;
    --btn-color2: #000;
    --btn-color3: #000;
    --btn-color4: #000;
    --btn-color5: #000;
    --btn-color6: #5d5d5d;
    --btn-color7: #fff;
    --btn-color8: #f2f2f2;
}
/*文字&背景顏色*/
.Area_danji .btn_reg .activityText p { color:var(--btn-color1);}
.Area_danji .btn_reg .activityText .Tip { color:var(--btn-color6);}
 .Area_danji .btn_reg .content p { /*background: var(--btn-bg-color1); */color:var(--btn-color1);} 

/*登記入稿區塊*/
.Area_danji { margin: 0 auto; font: 16px/1.3 "Century Gothic", "微軟正黑體", sans-serif; }
.Area_danji img { flex-shrink: 0; }
.Area_danji .danji_box { position: relative; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start; box-sizing: border-box; }
.Area_danji .danji_box ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; overflow: visible; justify-content: center;}
.Area_danji .danji_box ul li { position: relative; padding: 0; margin: 0; list-style: none; }
.Area_danji .danji_box ul li a { display: block; height: 100%; width: 100%;}
.Area_danji .danji_box ul li img { width: 100%; aspect-ratio:960/236; }
    @media screen and (max-width:767px){
		.Area_danji .danji_box { width: 100%; margin-bottom: 0.5em; }
        .Area_danji .danji_box .box_1 { margin-bottom: 0.2em}
        .Area_danji .danji_box ul li { display: block; height: 100%; width: 100%; margin-bottom: 0.2em; }
    }
    @media screen and (min-width:768px){
        .Area_danji .danji_box { width: 1020px; margin-bottom: 17px; } 
        .Area_danji .danji_box ul li { padding-bottom:17px; }
    }


/*活動贈品*/
.Area_danji .danji_box ul li .activityImg { position: absolute; width: 16%; top: 7%; left: 2%;    }
.Area_danji .danji_box ul li .activityImg img { aspect-ratio: 1; border-radius: 10px; }
@media screen and (min-width:767px){
.Area_danji .danji_box ul li .activityImg { position: absolute; width: 16%; top: 8%; left: 2%;   }
.Area_danji .danji_box ul li .activityImg img { aspect-ratio: 1; border-radius: 10px; }
}

/*活動文案*/
.Area_danji .danji_box ul li .activityText  { position: absolute; top: 50%; left: 22%; transform: translateY(-50%);  max-width: 64%; }
.Area_danji .danji_box ul li .activityText p { margin: 0; white-space: nowrap;  overflow: hidden; text-overflow:ellipsis; height: 1.3em; line-height: 1.3em; font-weight: 400; white-space: nowrap; text-align: left; }
.Area_danji .danji_box ul li .activityText .gifts { font-weight: 800; margin-bottom: 0.2em;}
    @media screen and (max-width:767px){
        .Area_danji .danji_box ul li .activityText .gifts { font-size: 1.2em; letter-spacing: -0.05em;}
        .Area_danji .danji_box ul li .activityText .Tip { font-size: 0.85em; }
    }
    @media screen and (min-width:768px){
        .Area_danji .danji_box ul li .activityText .gifts { font-size: 2.2em;}
        .Area_danji .danji_box ul li .activityText .Tip { font-size: 1.8em; }
    }

/*已登記/剩餘文案*/
.Area_danji .danji_box ul li .content  { position: absolute; top: 77%; left: 10%; transform: translateX(-50%);}
.Area_danji .danji_box ul li .content p { margin: 0; height: 1.3em; line-height: 1.3em; font-weight: 600; white-space: nowrap; border-radius: 2em; }
.Area_danji .danji_box ul li .content p span { padding: 0 .1em .15em; font-size: 1em; font-weight: 600; }
    @media screen and (max-width:767px){
        .Area_danji .danji_box ul li .content { width: auto; }
        .Area_danji .danji_box ul li .content p { padding: .2em .5em .1em; font-size: 0.75em; letter-spacing: -0.05em;}
    }
    @media screen and (min-width:768px){
        .Area_danji .danji_box ul li .content p { padding: .2em 1em; min-width: 100px; }
    }

/*活動說明/查詢登記*/
.Area_danji .danji_box .box_2 { display: flex; flex-direction: row; justify-content: center}
.Area_danji .btn_info img { width: 100%; aspect-ratio:240/40; }
.Area_danji .btn_list img { width: 100%; aspect-ratio:240/40; }
    @media screen and (max-width:767px){
        .Area_danji .danji_box .box_2 { width: 50%; margin-bottom: 0.4em; }
    }
    @media screen and (min-width:768px){        
        .Area_danji .danji_box .box_2 { margin-bottom: 30px; }       
    }

/* 登記警告文案 */
.warningTxt h3 { margin: 0; color:#FFF; text-align: center; font-weight: 400;}
@media screen and ( max-width:767px) {
    .warningTxt h3 { font-size: 0.8rem; line-height: 1em; padding: 0 0 0.5em; }
}
@media screen and ( min-width:768px) {
    .warningTxt h3 { font-size: 1rem; line-height: 1.2em; padding: 0 0 1.5em; }
}

/*警告文案詳情查詢按鈕顏色*/
.Area_btnblack .danji_box .box_2 img { filter: brightness(0%);}
.Area_btnblack .warningTxt  h3 { color:var(--btn-color1); }

/*文案白色*/
.Area_Textwhite .btn_reg .activityText p { color:var(--btn-color7);}
.Area_Textwhite .btn_reg .activityText .Tip { color:var(--btn-color8);}
.Area_Textwhite .btn_reg .content p { color:var(--btn-color7);}

/*浮層嘿嘿*/
.blackBox { clear: both; display:none; z-index:999; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); width:100%; height:100%; background-color: rgba(34,34,34,0.75); }
.blackBox * { font-family:"微軟正黑體", "Microsoft JhengHei", Arial; box-sizing:border-box;}
.blackBox  a { text-decoration:none;}
.blackBox_play { z-index: 99; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(34,34,34,0.75);}

/*浮層基本*/
.blackBox .box .button { border-top: 1px solid #d6d6d6; text-align: center; font-size: 1.25rem; line-height: 3.5rem; font-weight: bold;}
.blackBox .box .button a{ text-decoration: none;}
.blackBox .box .but-close { clear: both; width: 100%;}
.blackBox .box .but-close a { display: block; color: #333;}
.blackBox .box h3 span.close { position: absolute; top: 6px; right: 5px; display: block; border: 2px solid #000; border-radius: 5px; width: 63px; height: 33px; font-size: 1rem; line-height: 2rem; text-align: center;}
.blackBox .box h3 span.close a { display: inline-block; width: 100%; height: 100%; color: #000; text-decoration: none;}

/*顏色控制*/
.spcolor{ color:#d62772;}
.agreeArea .box h3{background-color:#d62772;}

/*通知浮層*/
.agreeArea { z-index:10;  position: relative; top: 50%!important; transform: translateY(-50%); margin: 0 auto 30px; width: 94%; max-width: 900px; font-family:"Century Gothic", "微軟正黑體", sans-serif;  }
.agreeArea img { width:100%; height:auto;}
.agreeArea .box { border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color: #fff; overflow: hidden;}
.agreeArea .box h3 { padding: 0; margin: 0; height: 3rem; font-size: 1.25rem; font-weight: 800; line-height: 3rem; text-align: center; color:#ffffff; }

/*內容*/
.agreeArea .txtArea { position: relative; height:60vh; overflow:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; text-align: left; color: #333;}
.agreeArea .txtArea h2,.agreeArea .txtArea h4,.agreeArea .txtArea p { margin: 0; padding: 0;}
.agreeArea .txtArea .itemwrap-title-box { position: relative; margin: 0;}
.agreeArea .txtArea .itemwrap-title-box h2 { margin: 0; padding: 0.5em 1em 1em 1em; font-size: 1.45rem;}
.agreeArea .txtArea .itemwrap-list-style .PD_wrapper  {margin: 0; padding-left: 1em; list-style-type: decimal;}
.agreeArea .txtArea .itemwrap-list-style .PD_wrapper .PD_slide { margin-bottom: 1em;}
.agreeArea .itembox { position: relative; display: flex; width: 100%; margin-bottom: 1em;}
.agreeArea .itembox .itembox_box { position: relative;  width:calc(65%); margin:0; padding:0 1em 0 0; font-size:1rem; text-align:left; line-height:1.65rem; color:#000;font-weight:500;}
.agreeArea .itembox .item-title { /*min-width:calc(100% - 35em);*/ margin:0; padding:0; font-size:1.25rem; font-weight:800; line-height:1; text-align:left; color:#000; box-sizing: border-box; padding: 0 1em; white-space: nowrap;}
.agreeArea .itembox .item-information { font-size: 1rem; text-align: left; line-height: 1.65rem; color: #000; font-weight: 500; padding-right: 1rem;}
.agreeArea .container .PD_wrapper .PD_slide .itembox:first-child {margin-bottom: 0;}
.agreeArea .container .PD_wrapper .PD_slide .itembox:first-child .item-information  { margin: 0; padding: 0.5em 1em 1em 1em; font-size: 1.45rem; font-weight: bolder;}
.agreeArea .txtArea .PD_wrapper  {margin: 0; padding: 0; list-style: none;}
    @media screen and ( max-width:736px) {
        /* .agreeArea .itembox .item-title {min-width:calc(100% - 11em); max-width: calc(100% - 11em);} */
        .agreeArea .itembox.itemwrap {flex-wrap: wrap}
        .agreeArea .itembox.itemwrap .itembox_box { width:100%; margin-bottom: 2em; }
        .agreeArea .itembox.itemwrap .itembox_box { padding:1em 2em 0 2em; }
    }
    .agreeArea .itembox ul,
    .agreeArea .itembox ol { margin: 0; padding-left: 1em;}
    .agreeArea .itembox li {line-height: 1.65rem;}
    .agreeArea .box .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;}
    .agreeArea .box .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; }
    .agreeArea .box .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; }
    .agreeArea .box .agree_table th a{ color:#c70026; text-decoration:underline;}
    .agreeArea .box .xxx{ display:block; width:80%; height:40px; font-size:1.5em; text-align:center; line-height:40px; color:#FFF; background-color:#7048A0; margin:0 auto; margin-bottom:20px; margin-top:10px; font-weight:bold; border-radius:10px;}
    .agreeArea .box .qrcodeimg { text-align:center; }
    .agreeArea .box .qrcodeimg a { color:#006afe;}
    .agreeArea .box .qrcodeimg img { width:100%; height:auto;}

/* 門檻說明線上入稿 */
.agreeArea .itemwrap-gift-info .itembox_box .PD_wrapper { display: grid; gap: 1rem; }
.agreeArea .itemwrap-gift-info .PD_slide .row { display: flex; font-size: 1rem; line-height: 1.5; font-weight: bold;}
.agreeArea .itemwrap-gift-info .PD_slide p { padding: 6px 18px; vertical-align: middle; line-height: 1.75;}
.agreeArea .itemwrap-gift-info .PD_slide .row-title p { flex-basis: 100%; text-align: center; background: #000000; color: #ffffff;}
.agreeArea .itemwrap-gift-info .PD_slide .row-info p { border: 1px solid #cccccc;}
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(1) { flex-shrink: 0;}
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(2) { flex-grow: 1;}
.agreeArea .itemwrap-gift-info .PD_slide .row-info:nth-of-type(even) { background: #eeeeee;}
    @media screen and ( max-width:736px) {
        .agreeArea .itemwrap-gift-info .PD_slide .row { display: flex; font-size: 0.9rem; line-height: 1.5; justify-content: flex-start; align-items: stretch; font-weight: bold;}
    }