.trans-point-content{}
.trans-item{width:20%; margin: 10px 2.5%; float: left;}
.trans-point-content .change_n{ color:#333; font-size:16px; line-height:20px; font-weight:bold; text-align:center; padding:5px 0; height:40px; overflow:hidden;}
.trans-point-content .change_n span.target{ font-size:20px; font-weight:bold;}
.trans-point-content .change_p_BOX{ color:#444; text-align:center; border-bottom:none; height:170px}
.trans-point-content .change_p{ font-size: 16px; color:#444; text-align:center; padding:45px 10px; height: 160px; width:100%; border:1px solid #e9e9e9; border-bottom:none; box-sizing: border-box;}
.trans-point-content .change_p span.key{ font-size:25px; font-weight:bold; color:#bb2525;}
.trans-point-content .change_hr{ height:10px; color:#fff; border:0;}
.c1{ background-color:#e74c3c; }
.c2{ background-color:#f89406;}
.c3{ background-color:#36d7b7;}
.c4{ background-color:#59abe3;}
.c5{ background-color:#9F88FF;}
.c6{ background-color:#007e60;}
.c7{ background-color:#d736b4;}
.c8{ background-color:#006666;}
.c9{ background-color:#ff0000;}
.c10{ background-color:#facf00;}
.c11{ background-color:#009999;}
.c12{ background-color:#003399;}
.c13{ background-color:#ff0066;}
.btn_trans{ color:#fff; height:45px; line-height:45px; font-size:20px; text-align:center; display:block; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.btn_trans.c1:hover, .btn_trans.c2:hover, .btn_trans.c3:hover, .btn_trans.c4:hover, .btn_trans.c5:hover, .btn_trans.c6:hover, .btn_trans.c7:hover, .btn_trans.c8:hover, .btn_trans.c9:hover, .btn_trans.c10:hover, .btn_trans.c11:hover, .btn_trans.c12:hover, .btn_trans.c13:hover{ background-color:#49576c;}

.container.trans-point{border: 0px solid #e3e3e3;
                       -webkit-border-radius: 5px;
                       -moz-border-radius: 5px;
                       border-radius: 5px;
                       padding: 20px 30px;
                       margin-bottom: 25px;}
.contentArea
{
    padding:0;
    margin:0 auto;
    font-family: "微軟正黑體", Helvetica;
    font-size:16px;
    line-height:28px;
    color:#555;
    width:750px;
}
.transBOX2 {height: 72px;}
.transBOX2 li{ width:44%; margin:0 2.5%; margin-bottom:10px; height:auto;}
.btHWGreen2{ min-width:auto; background-color:#34BF49; font-size:20px; display:inline; padding:10px 0; margin-bottom:20px; margin-right:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-style:solid; border-color:#34BF49;}
.btHWGreen2 b{ padding:8px 8px 0px 8px; color:#fff !important; display:inline-block;}
.btantiHWGreen2{ min-width:auto; background-color:#ffffff; font-size:20px; display:inline; padding:10px 0; margin-bottom:20px; margin-right:10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-style:solid; border-color:#34BF49;}
.btantiHWGreen2 b{ padding:8px 8px 0px 8px; color:#34BF49 !important; display:inline-block;}

.content_box{ width:100%; padding:15px 30px; background-color:#f2f2f2; color:#444; box-sizing: border-box; text-align: left;}
body.hasHover .content_box button:hover{color: #000;}
input[type="text"].typeit{ border:1px solid #e3e3e3; border-radius: 5px; padding:5px 15px; box-sizing: border-box; background: none;}
input[name="cpc_cardno"].typeit{width:250px; }
input[name="trans_point"].typeit{width:180px; }
#terms_box {font-size: 16px; margin-top: 30px;}
#terms_box h4{padding-bottom: 10px;}

.cpc {width: 500px; margin: 0 auto; text-align: center;}
.cpc.step1{position: relative;}
.cpc button{border:none; padding: 5px 25px; background-color: #ff7746; color: #FFF; margin: 10px 0;}
.cpc p{color: #000; font-size: 20px; font-weight: 700; text-align: center;}
img.hptocpc {width:65%; margin: 10px 0 15px;}
.cpc .small_text{width:100%; text-align: left;}
.cpc .small_text{text-align: center;}
.cpc span a{color: #337ab7; padding-bottom: 1px;}
.redtext{color: red;}
#change_remind{font-size: 14px;}

#popUp {position: absolute; top:0; height: 100%; width:100%; background-color: rgba(0,0,0,0.1);}
#popUp {display: flex; align-items: center; justify-content: center;}
.alert-view {background-color: white; padding: 25px 50px; width: auto; height:auto; border: black solid 1px;}
.alert-view .alert-button {background-color: #CCC; border: black 1px solid; color: black; padding: 0px 15px;}
@media (max-width: 991px){
.trans-point-content .change_n span.target {font-size: 18px;}
.trans-point-content .change_p {font-size: 14px; padding: 30px 8px; height: 130px;}
.btn_trans{font-size: 18px;}
}
@media screen and (max-width: 768px){
    .transBOX2 li{ width:44%; margin:0 1.5%}
    .trans-item{width:50%; margin: 10px 0; float: left;}
    .contentArea{width:100%;}
    .cpc {width: 100%;}
    .cpc button{margin: 20px 15px 0 15px;}
    .container.trans-point{ padding: 20px 0px; border: none;}
}

@media (max-width: 576px){
    /* 為了對抗input[type=text] width: 95% !important;*/
    .small-size-text-align-left{text-align: left;}
    .small-size-text-align-left span {padding-left: 16px;}
}