body,html{margin: 0;padding:0;background: #eee;width: 100%;height: 100%;}

.warpArea{max-width: 1000px;display: block;margin: 0 auto;padding: 10px;-webkit-text-size-adjust:none;}
.warpArea .topArea{margin: 0 0 10px 0;background: url(img/logo.png) no-repeat center/100% auto;width: 160px;height: 40px;}
.warpArea .topArea_CallCenter{margin: 0 0 10px 0;background: url(img/logo.png) no-repeat center/100% auto;width: 160px;height: 40px;}
.warpArea .warpContent{background: #fff;border-radius: 5px;box-sizing: border-box;padding: 15px 50px;box-shadow: 0px 0px 20px #ccc;margin: 0}
.warpArea .warpContent .textBlock h4{margin: 10px 0;font:17px/20px Helvetica,Microsoft JhengHei,sans-serif;color: #444;}
.warpArea .warpContent .textBlock p{margin: 0;display: inline-block;font: 15px/20px Helvetica,Microsoft JhengHei,sans-serif;text-indent: 2em;box-sizing: border-box;color: #444;width: 100%;}
.warpArea .warpContent .textBlock p span{letter-spacing: initial;margin: 0 5px;}
.warpArea .warpContent .textBlock ul{padding: 0 0 0 20px;margin: 20px 0;position: relative;}
.warpArea .warpContent .textBlock ul::before{content: "";display: block;width: 8px;height: 100%;background: #ccc;position: absolute;top: 0;left: 0;}
.warpArea .warpContent .textBlock ul li{list-style: none;display: block;font: 14px/20px Helvetica,Microsoft JhengHei,sans-serif;color: #888;margin-bottom: 5px;}
.warpArea .warpContent .textBlock ul li span{color:#d62872;margin: 0 5px}

.warpArea .warpContent .uploadBlock{border: 1px solid #ccc;box-sizing: border-box;border-radius: 5px;}
.warpArea .warpContent .uploadBlock th{background: #d62872;color: #fff;font:15px/30px Helvetica,Microsoft JhengHei,sans-serif;letter-spacing: 2px}
.warpArea .warpContent .uploadBlock tr:nth-child(2n+1){background: #eee}
.warpArea .warpContent .uploadBlock tr th:nth-child(1),.warpArea .warpContent .uploadBlock tr th:nth-child(3),.warpArea .warpContent .uploadBlock tr th:nth-child(4){width: 20%;}
/* 後台身分 */
.warpArea .warpContent .uploadBlock.backStage tr th{width: calc(100% / 3)}

.warpArea .warpContent .uploadBlock td{text-align: center;padding: 10px 0;font:14px/0px Helvetica,Microsoft JhengHei,sans-serif;}
.warpArea .warpContent .uploadBlock td .fileDel{border:none;background-color: transparent;background: url(img/trashcan.png)no-repeat center/40px;width: 50px;height: 50px;cursor: pointer;}
.warpArea .warpContent .uploadBlock td .uploadImg{width: 100px;height: 100px;border: 1px solid #ccc;display: inline-block;box-sizing: border-box}
.warpArea .warpContent .uploadBlock td .uploadImg img{width: 100%;height:auto;}
.warpArea .warpContent .uploadBlock td label{width: 120px;height: 40px;display:inline-block;background: #ddd;border-radius: 3px;font: 14px/40px Helvetica,Microsoft JhengHei,sans-serif;color: #444;cursor: pointer;border: 1px solid #888;box-sizing:border-box;}
.warpArea .warpContent .uploadBlock td label input{display: none;}
.warpArea .warpContent .uploadBlock td label span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #eee;margin: 10px 5px 10px 0;vertical-align: top;position: relative;}
.warpArea .warpContent .uploadBlock td label span::before{content: "";display: block;width: 70%;height: 4px;background: #444;border-radius: 15px;position: absolute;top: calc(50% - 2px);left: calc(50% - 35%);}
.warpArea .warpContent .uploadBlock td label span::after{content: "";display: block;width: 4px;height: 70%;background: #444;border-radius: 15px;position: absolute;top: calc(50% - 35%);left: calc(50% - 2px);}

.warpArea .warpContent .footerBlock{display: inline-block;width: 100%;margin: 10px 0;padding: 0;font-size: 0;}
.warpArea .warpContent .footerBlock dt{display: inline-block;width: 50%;text-align:left;vertical-align: middle;font:15px/40px Helvetica,Microsoft JhengHei,sans-serif;}
.warpArea .warpContent .footerBlock dt label{cursor: pointer;}
.warpArea .warpContent .footerBlock dt label a{color: #3366ff;margin: 0 5px}
.warpArea .warpContent .footerBlock dd{display: inline-block;width: 50%;text-align: right;vertical-align: top;margin: 0;}
.warpArea .warpContent .footerBlock dd button{font:15px/40px Helvetica,Microsoft JhengHei,sans-serif;background: #d62872;color: #fff;box-sizing: border-box;padding: 0 10px;border-radius: 3px;letter-spacing: 1px;cursor: pointer;width: 130px;border: 1px solid transparent;}
.warpArea .warpContent .footerBlock dd button.disable{background: #eee;color:#888;border: 1px solid #ccc;cursor: initial;}

.warpArea .warpContent .totalUpload{margin: 0;font:14px/30px Helvetica,Microsoft JhengHei,sans-serif;padding-left: 10px;}
.warpArea .warpContent .totalUpload span{margin: 0 5px;color: #d62872;font:17px/30px Helvetica,Microsoft JhengHei,sans-serif;}
.warpArea .warpContent .mobUploadBtn{display: none;}

/* 浮層 */
.blackBG{width: 100%;height: 100%;background: rgba(0,0,0,0.7);position: fixed;top: 0;left: 0;z-index: 2;display: none}
.msgFloatLayer{position: fixed;background: #fff;z-index: 111;border-radius: 5px;display: none}
.msgFloatLayer .floatBox{padding: 10px 15px 20px 15px;font-size: 0;box-sizing: border-box;display: inline-block;}

.msgFloatLayer .floatBox .floatContent table{counter-reset: num ;}
.msgFloatLayer .floatBox .floatContent table tr td{font:15px/20px Microsoft jhenghei, sans-serif; text-align: left; padding: 0 0 5px 5px;}
.msgFloatLayer .floatBox .floatContent table tr{font:15px/20px Microsoft jhenghei, sans-serif; text-align: right;}
.msgFloatLayer .floatBox .floatContent table tr::before{counter-increment: num; content:counter(num)'. ';}

.msgFloatLayer .floatBox h4{text-align: center;font:bold 25px/60px Helvetica,Microsoft JhengHei,sans-serif;margin: 0;position: relative;}
.msgFloatLayer .floatBox h4 .closeBtn{width: 40px;height: 40px;display: inline-block;position: absolute;right: 0;top:calc(50% - 20px);cursor: pointer;}
.msgFloatLayer .floatBox h4 .closeBtn::before{content: "";display: block;width: 5px;height:100%;background: #ccc;border-radius: 15px;position: absolute;transform: rotate(45deg);right: 20px;}
.msgFloatLayer .floatBox h4 .closeBtn::after{content: "";display: block;width: 5px;height:100%;background: #ccc;border-radius: 15px;position: absolute;transform: rotate(-45deg);right: 20px;}

.msgFloatLayer .floatBox .floatContent{width: 100%;background: #eee;display: inline-block;padding: 10px 15px;box-sizing: border-box;overflow: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;-webkit-text-size-adjust:none;}
.msgFloatLayer .floatBox .floatContent p{margin: 0 0 10px 0;font: 16px/23px Helvetica,Microsoft JhengHei,sans-serif;}

/* 有按鈕 */
.msgFloatLayer.msgBox{max-width: 800px;}
.msgFloatLayer.alterBox{max-width: 450px;}
.msgFloatLayer.alterBox .floatBox{padding: 10px}
.msgFloatLayer.alterBox .btnGp{font:17px/40px Helvetica,Microsoft JhengHei,sans-serif;display: block;margin: 10px auto 0px auto;background: #d62872;color: #fff;text-align: center;width: 120px;border-radius: 3px;text-decoration: none}

/* 小網調整 */
@media screen and (max-width:540px){
    .warpArea .topArea{width: 220px;margin-bottom: 5px}
    .warpArea .warpContent{padding: 15px;}
    .warpArea .warpContent .textBlock p{text-indent: initial;}

    .warpArea .warpContent .uploadBlock{border: none}
    .warpArea .warpContent .uploadBlock tr th{font:13px/20px Helvetica,Microsoft JhengHei,sans-serif;}
    .warpArea .warpContent .uploadBlock tr th:nth-child(1),.warpArea .warpContent .uploadBlock tr th:nth-child(5){display: none}
    .warpArea .warpContent .uploadBlock tr td:nth-child(1),.warpArea .warpContent .uploadBlock tr td:nth-child(5){display: none}
    .warpArea .warpContent .uploadBlock tr th:nth-child(2){width: 20%;}

    .warpArea .warpContent .totalUpload{padding-left:0;text-align: center;font: 13px/20px Helvetica,Microsoft JhengHei,sans-serif}
    .warpArea .warpContent .totalUpload span{font: 13px/20px Helvetica,Microsoft JhengHei,sans-serif}
    .warpArea .warpContent .footerBlock{margin: 0}
    .warpArea .warpContent .footerBlock dt{width: 100%;text-align: center;font: 15px/30px Helvetica,Microsoft JhengHei,sans-serif;margin-bottom: 10px}
    .warpArea .warpContent .footerBlock dd{width: 100%;text-align: center}

    .warpArea .warpContent .mobUploadBtn{display: inline-block;vertical-align: top;border:2px dotted #ddd;box-sizing: border-box;text-align: center;margin: 10px 0 20px 0;width: 100%;}
    .warpArea .warpContent .mobUploadBtn label{display: inline-block;font:14px/40px Helvetica,Microsoft JhengHei,sans-serif;width: 100%;color: #888;letter-spacing: 2px}
    .warpArea .warpContent .mobUploadBtn label input{display: none}
    .warpArea .warpContent .mobUploadBtn label span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #ddd;margin: 10px 5px 10px 0;vertical-align: top;position: relative;}
    .warpArea .warpContent .mobUploadBtn label span::before{content: "";display: block;width: 70%;height: 4px;background: #fff;border-radius: 15px;position: absolute;top: calc(50% - 2px);left: calc(50% - 35%);}
    .warpArea .warpContent .mobUploadBtn label span::after{content: "";display: block;width: 4px;height: 70%;background: #fff;border-radius: 15px;position: absolute;top: calc(50% - 35%);left: calc(50% - 2px);}

    /* 浮層 */
    .msgFloatLayer .floatBox{padding: 10px 10px 20px 10px;}
    .msgFloatLayer .floatBox h4{font:bold 18px/40px Helvetica,Microsoft JhengHei,sans-serif;}
    .msgFloatLayer .floatBox h4 .closeBtn{width: 30px;height: 30px;top:calc(50% - 15px);}
    .msgFloatLayer .floatBox h4 .closeBtn::before{right: 10px;}
    .msgFloatLayer .floatBox h4 .closeBtn::after{right: 10px;}
    .msgFloatLayer .floatBox .floatContent{padding: 10px;}
    .msgFloatLayer .floatBox .floatContent p{font: 15px/23px Helvetica,Microsoft JhengHei,sans-serif;}
}