@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/becky/fonticons/css/style.css');
/* 以下是 圖示文字 new ver. 的 CSS */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Righteous&display=swap');

/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');

/*以下是大圖*/
	.page_ban{
		position: relative;
	}
	.page_ban_img{
		width: 100%;
	    height: auto;
	    vertical-align: top;
	}
	.page_ban_txt{
		position: absolute;
	    text-align: center;
	    top: 30%;
	    left: 50%;
	    transform: translate(-50%,-50%);
	    display: block;
	    font-size: 3rem;
	    font-weight: bold;
	    white-space: nowrap;
	    padding: 1.5rem 2.5rem 1.5rem 2.75rem;
	    box-sizing: border-box;
	    letter-spacing: 0.25rem;
	    background-color: rgba(0,0,0,0.5);
	    color: #FFF;
	    border-radius: 5px;
	    transition: all .5s;
	}
	.paysign_fee_img{
		position: absolute;
	    top: 65%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    background-color: rgba(255,255,255,.6);
	    padding: 0.5rem 2.5rem;
	    border-radius: 10px;
	    transition: all .5s;
	}
/* 下拉按鈕 */
	.sliderdownbtn{
		cursor: pointer;
		position: absolute;
		z-index: 110;
		bottom: 10%;
		left: 50%;
		transform: translateX(-50%);

		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		border: 2px solid rgba(0,0,0,0);
		background-color: rgba(255,255,255,0.3);
		color: rgba(0,0,0,0.8);
		font-size: 2em;
		padding: 0.5em;
		box-sizing: border-box;
		border-radius: 50%;
		
		transition: all 1s;
	}
	.sliderdownbtn:hover{
		background-color: rgba(255,255,255,1);
		color: rgba(0,0,0,1);
	}
/*需檢附文件*/
	.paysign_box h2{
		text-align: center;
	    margin-bottom: 2rem;
	    letter-spacing: 10px;
	    font-size: 2.5rem;
	}
	.paysign_p{
		list-style: decimal;
	    list-style-position: inside;
	    padding: 15px;
	    border: 2px solid #DDD;
	    border-radius: 10px;
	    min-height: 100px;
	    margin: 1rem 0;
	}
	.paysign_p li{
		text-indent: -1rem;
		padding: 0.25rem;
		padding-left: 1.5rem;
	}
	.paysign_main_n > h3, .paysign_main_h > h3{
		width: 60%;
		text-align: center;
	    letter-spacing: 5px;
	    margin: 0.25rem auto;
	    font-size: 1.5rem;
	    border-bottom: 2px solid #FF0000;
	    position: relative;
	}
	.paysign_main_n > h3:after, .paysign_main_h > h3:after{
		content: "";
		display: block;
		position: absolute;
		left: 50%;
    	transform: translate(-50%,0);
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 20px 0 20px;
		border-color: #FF0000 transparent transparent transparent;
	}
	.paysign_fee{
		text-align: center;
	    width: 50%;
	    margin: 0 auto 1rem auto;
	    position: relative;
	    background-color: #ff0000;
	    color: #FFF;
	    letter-spacing: 0.25rem;
	    font-size: 2rem;
	}
	.paysign_fee:before{
		content: "";
	    display: block;
	    width: 8%;
	    height: 100%;
	    position: absolute;
	    top: 10px;
	    right: 100%;
	    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 50% 50%, 0 0);
	    clip-path: polygon(100% 0, 100% 100%, 0 100%, 50% 50%, 0 0);
	    background-color: #ff0000;
	}
	.paysign_fee:after{
		content: "";
	    display: block;
	    width: 8%;
	    height: 100%;
	    position: absolute;
	    top: 10px;
	    left: 100%;
	    -webkit-clip-path: polygon(100% 0%, 50% 50%, 100% 100%, 0 100%, 0 0);
	    clip-path: polygon(100% 0%, 50% 50%, 100% 100%, 0 100%, 0 0);
	    background-color: #ff0000;
	}
	.paysign_box > .paysign_fee > span{
		font-size: 2.5rem;
	    color: #FFF;
	    font-family: 'Righteous', cursive;
	}
/*表單*/
	.paysign_main{
		display: flex;
    	justify-content: space-around;
	}
	.paysign_main_n, .paysign_main_h{
		width: 45%;
	}
	.paysign_from{
		width: 95%;
	    max-width: 800px;
	    margin: 2rem auto;
	}

	.paysign_table{
		width: 100%;
    	border-collapse: collapse;
	}
	.paysign_table tbody tr th{
		width: 30%;
		border: 1px solid #DDD;
	    padding: 1rem;
	    box-sizing: border-box;
	    font-size: 1.15rem;
	}
	.paysign_table tbody tr td{
	    width: 70%;
	    border: 1px solid #DDD;
	    padding: 1rem;
	    box-sizing: border-box;
	    font-size: 1.15rem;
	}
	.paysign_input_checkbox{
		width: 1.25rem;
	    min-width: 1.25rem;
	    height: 1.25rem;
	}
	.paysign_text{
		width: 100%;
		font-size: 1.1rem;
	    padding: 0.25rem 0.5rem;
	    box-sizing: border-box;
	    line-height: 1.5rem;
	}

	.paysign_submit{
		display: block;
	    width: 90%;
	    max-width: 300px;
	    margin: 1rem auto;
	    letter-spacing: 0.25rem;
	    padding: 0.25rem 0 0.25rem 0.25rem;
	    box-sizing: border-box;
	    background-color: #ED1C24;
	    color: #FFF;
	    border: 1px solid #ED1C24;
	    border-radius: 7px;
	    font-size: 1.25rem;
	    transition: all .3s;
	}
	.paysign_submit:hover{
	    background-color: #FFF;
	    color: #ED1C24;
	}
	.contact_p{
		text-align: center;
	    letter-spacing: 0.25rem;
	    padding: 0.5rem;
	    box-sizing: border-box;
	    font-weight: bold;
	}
	.contact_p2{
		text-align: center;
	    letter-spacing: 0.25rem;
	    padding: 0.5rem;
	    box-sizing: border-box;
	    font-weight: bold;
	    font-size: 1.25rem;
	    color: red;
	}
	.paysign_table > tbody > tr > .paysign_table_google{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
@media all and (max-width: 1250px){
	.page_ban_txt{
		padding: 0.75rem 1.5rem 0.75rem 1.75rem;
		font-size: 2.5rem;
	}
	.paysign_fee_img{
		height: 70px;
		padding: 0 1.5rem;
	}
	.sliderdownbtn{
		bottom: 2.5%;
	}
}

@media all and (max-width: 920px){
	.page_ban_txt{
		font-size: 2rem;
		padding: 0.5rem 1rem 0.5rem 1.25rem;
	}
	.paysign_fee_img{
		height: 50px;
		padding: 0 1rem;
	}
	.sliderdownbtn{
		font-size: 1.5rem;
	}
}
@media all and (max-width: 768px){
	.paysign_main{
		display: block;
	}
	.paysign_main_n, .paysign_main_h{
		width: 90%;
		margin: 0 auto;
	}
}

@media all and (max-width: 680px){
	.paysign_table tbody tr{
		display: flex;
    	flex-direction: column;
	}
	.paysign_table tbody tr th{
		width: 90%;
	    margin: 0 auto;
	    border: none;
	    border-bottom: 1px solid #DDD;
	}
	.paysign_table tbody tr td{
		width: 90%;
	    margin: 0 auto;
	    border: none;
	    text-align: center;
	}
	.page_ban_txt{
		font-size: 1.5rem;
	}
	.sliderdownbtn{
		display: none;
	}
	.paysign_fee{
		width: 75%;
	}
	.paysign_table > tbody > tr > .paysign_table_google{
		justify-content: center;
	}
}
@media all and (max-width: 550px){

	.paysign_fee_img{
		top: 80%;
		height: 40px;
	}
}
@media all and (max-width: 425px){
	.paysign_box h2{
		font-size: 1.75rem;
	}
	.paysign_box h3{
		font-size: 1.5rem;
	}
	.paysign_box > .paysign_fee > span{
		font-size: 2rem;
	}
}
@media all and (max-width: 320px){
	.paysign_table > tbody > tr > .paysign_table_google{ width: 300px; }
}
