@charset "utf-8";
/*
 *
 * ECM入稿登記活動用CSS-v1.2
 * 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外
 */
 
 /*20220902新增*/
.Area_danji { margin: 0 auto }
	@media screen and (max-width:767px){
		.Area_danji { width: 100%; margin: 0 auto 5vw; }
	}
  
/* 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}


    

: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: 155px; right: 66%; }

    
    /*登記按鈕卡控*/
    .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: 99%;  }

    /*活動說明&查詢*/
    .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: 64%; left: 26%;}

    /*圖片卡控*/
    .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; }
    

}


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

/*通知浮層*/
.agreeArea { z-index:1;  position: relative; top: 5%; 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:#000000; }

/*內容*/
.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(100% - 5em); 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-title {display: none;}
.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 {position: relative; width: calc(465px);}
.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; justify-content: flex-start; align-items: stretch; font-weight: bold;}
.agreeArea .itemwrap-gift-info .PD_slide .row p { padding: 6px 6px 6px 18px; border: 1px solid #CCC; vertical-align: middle;}
.agreeArea .itemwrap-gift-info .PD_slide .row:nth-child(odd) { background: #eee; }
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(1) {display: flex; align-items: center; }
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(1) {min-width: 25%; max-width: 25%;}
.agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(2) {width: 100%;}

@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;}
    .agreeArea .itemwrap-gift-info .PD_slide .row p:nth-child(1) {min-width: 34%; max-width: 34%;}
}