@charset "utf-8";
/*
 *
 * ECM入稿登記活動用CSS-v1.23
 * Shyu 2023.03.27
 * klyang 2024.01.19
 * -----------------------
 * 2022-08-31 整合 danji.css + registerCSS.css 兩隻檔案
 * 2022-09-02 調整區塊寬度至CSS
 * 2022-11-09 新增3分鐘後開放登記之警告文案
 * 2023-03-27 活動說明浮層改線上入稿
 * 2024-01-11 調整登記樣式
 * 2024-01-19 調整警語樣式可移出Area_danji外
 * 2024-05-23 調整間距css
 * 2024-06-03 調整登記樣式
 */
 



  
/* CSS Document */
.Area_danji { 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 .content  { position: absolute;}
.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 0 .15em; font-size: 1.1em; font-weight: 600; }
.Area_danji .danji_box .box_2 { display: flex; flex-direction: row; justify-content: center}
.Area_danji { margin: 0 auto }
	@media screen and (max-width:767px){
        .Area_danji .danji_box .box_1 { margin-bottom: 0.2em}
		.Area_danji .danji_box{ width: 100%; margin: 0 auto 0.5em; }
	}
    

:root {
    --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;
}

/*間距&定位&顏色  */
    .Area_danji[data-danji-num="1"] .btn_reg .content p { background: var(--btn-bg-color1); color:var(--btn-color1);}
    .Area_danji[data-danji-num="2"] .btn_reg .content p { background: var(--btn-bg-color2); color:var(--btn-color2);}
    .Area_danji[data-danji-num="3"] .btn_reg .content p { background: var(--btn-bg-color3); color:var(--btn-color3);}
    .Area_danji[data-danji-num="4"] .btn_reg .content p { background: var(--btn-bg-color4); color:var(--btn-color4);}
    .Area_danji[data-danji-num="5"] .btn_reg .content p { background: var(--btn-bg-color5); color:var(--btn-color5);}

/*PC設定*/
@media screen and (min-width:768px){

    .Area_danji .danji_box ul li .content  { position: absolute; transform: translateX(50%); }
    .Area_danji .danji_box ul li .content p { padding: 0.2em 1em; min-width: 100px; }

    /*寬度*/
    .Area_danji .danji_box { width: 1020px; } 

    .Area_danji .danji_box .box_2 { flex-direction: row;} 

    /*PC已登記位置*/
    .Area_danji .danji_box ul li .content { top: 160px; right: 68%; }

    
    /*登記按鈕卡控*/
    .Area_danji .danji_box ul li { overflow: hidden; padding-bottom:17px; }
    .Area_danji .danji_box .box_2 { margin-bottom: 30px; } 
    
    .Area_danji .danji_box ul li img { width: 100%;  }

    /*活動說明&查詢*/
    .Area_danji .btn_info img { width: 100%; }
    .Area_danji .btn_list img { width: 100%; }

}

/*Phone設定*/
@media screen and (max-width:767px){


    .Area_danji .danji_box .box_2 { width: 50%; margin-bottom: 0.4em }
    .Area_danji .danji_box ul li { display: block; height: 100%; width: 100%; margin-bottom: 0.2em; }
 
    /*mb已登記/剩餘文案*/
    .Area_danji .danji_box ul li .content p { padding: .2em .6em .1em; border-radius: 2em; font-size: 0.785em; }
    .Area_danji .danji_box ul li .content p span {  font-size: 1em; }

    .Area_danji .danji_box ul li .content { top: 70%; left: 24%;}

    /*圖片卡控*/
    .Area_danji .danji_box ul li img { aspect-ratio:960/237; }
    .Area_danji .btn_info img { aspect-ratio:240/40; }
    .Area_danji .btn_list img { aspect-ratio:240/40; }
    

}


/*浮層嘿嘿*/
.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:1;  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:600px; 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 .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;}
.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;}

/*手機*/
@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;}






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

/*手機*/
@media screen and ( max-width:736px) {
    .warningTxt h3 { color:#FFF; text-align: center; font-size: 0.8rem; line-height: 1em; font-weight: 400; padding: 0 0 0.5em; margin: 0}
}


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



/* 門檻說明線上入稿 */
.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;}

}