@charset "UTF-8";
/*
* @data 2018-8-2
*
* E.SUN PAY Stylesheet
--------------------------------
   1. General
   2. Top Label
   3. Input
   4. Select
   5. Annotation/Alert
   6. Checkbox
   7. RWD
--------------------------------
*/

		/*===============================
			1. General
		================================*/
		.formContainer{
			background: #FFF;
			border-radius: 5px;
			padding: 25px 5%;
			margin-bottom: 100px;

			box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
			-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
			-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
			-ms-box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
			-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
		}
		.formContainer.withTopLabel{
			border-radius: 0 0 5px 5px;
		}
		header{
			font-size: 24px;
			margin-bottom: 25px;
		}
		.formContent ul, .formContent li{
			margin: 0;
			padding: 0;
		}
		.formContent ul{
			padding-left: 160px;
		}
		.formContent li{
			position: relative;
			list-style: none;
			padding-top: 24px;/*For label space*/
			margin-top: 15px;
		}
        .formContent .noteContainer li {
            position: relative;
            list-style: none;
            padding-top: 0px; /*For label space*/
            margin-top: 0px;
        }
		.formContent .formRequired li:before{
			content:url(../IMG/ic_input_gray.png);
			display: inline-block;
			width: 18px;
			height: 18px;
			position: absolute;
			left: -35px;
			top: 27px;
		}
		.formContent .formRequired li.focus:before {
			content:url(../IMG/ic_input_green_now.png);
		}
		.formContent .formRequired li.done:before {
			content:url(../IMG/ic_input_green_done.png);
		}
		.formContent .formRequired li.alert:before {
			content:url(../IMG/ic_input_yellow_alert.png);
		}
		.formContent .formRequired li:after{
			content: "";
			display: inline-block;
			width: 2px;
			height: 75%;
			background: #9D9D9D;
			position: absolute;
			left: -27px;
			top: 52px;
		}
		.formContent .formRequired li.done:after,
		.formContent .formRequired li.alert:after{
			background: rgba(0, 158, 150, .5);
		}
		.formContent .formRequired li.formNoLine:after{
			display: none;
		}
		/*=FORM:RWD=*/
		.formContent{
			width: 100%;
			display: inline-block;
		}
		.formContentFirst{
			float: left;
			display: block;
			width: 46%;
			display: inline-block;
			position: relative;
			margin-right: 3%;
		}
		.formContentSec{
			width: 46%;
			display: inline-block;
			position: relative;
		}
		/*===============================
			2. Top Label
		================================*/
		.formContainer.withTopLabel{
			border-radius: 0 0 5px 5px;
			display: block;
		}
		.topLabelUnSel{
			display: none;
		}
		.topLabelSel{
			display: block;
		}
		.formContent{
			height: auto;
		}
		/*==Label==*/
        .topLabelContainer {
            float: none;
            display: inline-block;
            width: 100%;
            margin-bottom:-5px;
        }
		.topLabel{
			float: left;
			display: block;
			height: 60px;
			line-height: 60px;
			border-radius: 5px 5px 0 0;
			background: rgba(255, 255, 255, .1);
			text-align: center;
			font-weight: bold;
			font-size: 20px;
			color: rgba(255, 255, 255, .4);
			cursor: pointer;
		}
		.twoLabel{
			width: 50%;
		}
		.labelRemarkFont{
			font-size: 20px;
			font-weight: normal;
		}
		.topLabel.labelSel{
			background: #FFF;
			color: #1B9E9E;
			cursor: default;
		}
		/*=LABEL:RWD=*/
		.labelTwoLines{
			line-height: 60px;
			padding-top: 0;
			height: auto;
			margin: 0 auto;
			width: 244px;
		}
		.labelTwoLines div{
			float: left;
		}
		.labelTwoLines .labelRemarkFont{
			font-size: 20px;
		}
		/*===============================
			3. Input
		================================*/
		.formField{
			position: relative;
		}
		.formField input{
			font-size: 18px;
			border: 0;
			border-bottom: 1px solid #C3C3C3;
			font-family: inherit;
			border-radius: 0;
			padding: 0;
			cursor: text;
			height: 30px;
			width: 95%;
			appearance: none;
			-webkit-appearance: none;
			margin-bottom: 5px;
		}
		.formField input:focus{
			outline: 0;
			border-bottom: 1px solid #1B9E9E;
		}
		.formContent li.alert input,
		.formContent li.alert input:focus,
		.formContent li.alert select,
		.formContent li.alert select:focus{
			outline: 0;
			border-bottom: 1px solid #EB8300;
		}
		/*INPUT:RWD*/
		.formField label, .formField input{
			transition: none;
			touch-action: manipulation;
		}
		.formField label{
			font-size: 16px;
			color: #9D9D9D;
			position: absolute;
			font-weight: bold;
			left: -170px;
			top: 0;
			text-align: right;
			width: 120px;
		}
		.formField input:focus + label,
		.formContent .formRequired li.done label{
			color: #1B9E9E;
		}
		.formContent .formRequired li.alert label{
		}
		/*===============================
			4. Select
		================================*/
		.formField select {
		    font-family: inherit;
		    font-size: 18px;
		    font-weight: inherit;
			border-radius: 0;
			padding: 0;
		    border: 0;
			border-bottom: 1px solid #C3C3C3;
			font-family: inherit;
			margin-bottom: 5px;
		}
		.formField select.formSel:focus{
			outline: 0;
			border-bottom: 1px solid #1B9E9E;
			background: url("../IMG/ic_arrow_green_up.png") 97% no-repeat;
			background-size: 15px, 9px;
		}
		.formSel {
			display: inline-block;
			line-height: 30px;
			height: 30px;
			width: 95%;
		    background: url("../IMG/ic_arrow_green.png") 97% no-repeat;
			background-size: 15px, 9px;
			color: #222;
			cursor: pointer;
			-webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		    text-indent: 1px;
		}
		.formField select::-ms-expand {
		    display: none;
		}
		.formSel option {
			color: #222;
			font-size: 18px;
			font-family: Arial,"微軟正黑體","Microsoft JhengHei","新細明體", sans-serif;
		}
		/*SELECT:RWD*/
    	.formField select:focus + label, label.selected{
	        font-size: 16px;
	        position: absolute;
	        left: -170px;
			top: 0;
	        cursor: pointer;
	        color: #1B9E9E;
	        font-weight: bold;
	    }
		.selectPH{
			display: block;
			font-size: 18px;
			color: #9D9D9D;
			position: absolute;
			left: 0;
			top: 0;
		}
		.formField select:focus + .selectPH{
			display: none;
		}
		.selectPH.selected{
			display: none;
		}

		/*===============================
			5. Annotation/Alert
		================================*/
	    .formAnnotation{
	    	color: #9D9D9D;
	    }
		.formReminder{
			color: #ff0000;
		}
	    .formAlert{
	    	display: none;
	    }
		.formContent li.alert .formAlert{
			display: block;
			color: #EB8300;
		}
		/*==Other Alert==*/
		.otherAlert{
			color: #222;
		}
		.otherAlert .emp{
			color: #EB8300;
			font-weight: bold;
		}
		.otherAlert a{
			text-decoration: none;
			color: #1B9E9E;
			cursor: pointer;
		}

		/*===============================
			6. Checkbox
		================================*/
		.checkboxField{
			height: auto;
			display: block;
		}
		.checkboxField input[type="checkbox"]{
			display: none;
			opacity: 0;
			visibility: hidden;
		}
        .checkboxField input[type="checkbox"] + label {
            display: block;
            font-size: 18px;
            color: #222;
            font-weight: bold;
            border: 1px solid #C3C3C3;
            border-radius: 5px;
            height: 44px;
            line-height: 44px;
            padding: 0;
            margin: 0;
            width: 100%;
            cursor: pointer;
            text-align: left;
        }
        .checkboxIcon {
            float: left;
            display: block;
            width: 44px;
            height: 44px;
            background: #C3C3C3;
            border-radius: 4px 0 0 4px;
            margin-right: 15px;
            background-image: url(../IMG/ic_checkbox_normal.png);
            background-size: 44px 44px;
            background-repeat: no-repeat;
        }
        .checkboxField input[type="checkbox"]:checked + label {
            border: 1px solid #1B9E9E;
        }
		.checkboxField input[type="checkbox"]:checked + label .checkboxIcon{
			background: #1B9E9E;
			background-image: url(../IMG/ic_checkbox_checked.png);
			background-size: 44px 44px;
			background-repeat: no-repeat;
		}
        .linkTerm {
            margin-top: 10px;
            color: #222;
            text-decoration: underline;
            cursor: pointer;
            font-size: 16px;
            font-weight: normal;
            line-height: 24px;
        }
        .linkTerm img {
            width: 15px;
            height: 15px;
            margin-left: 5px;
        }
        .checkboxField input[type="checkbox"]:checked + label + .linkTerm {
            color: #1B9E9E;
        }
		/*===============================
			7. RWD
		================================*/
		@media screen and (max-width: 1024px){
			.formContainer{
				margin-bottom: 60px;
			}
			.formContent{
				display: block;
				height: auto;
			}
			.labelTwoLines .labelRemarkFont{
				font-size: 20px;
			}
			
			.formContentFirst{
				float: none;
				width: 100%;
				display: block;
				position: static;
				clear: both;
			}
			.formContentSec{
				width: 100%;
				display: block;
				position: static;
				clear: both;
			}
			.formContent .formRequired li:last-child:after{
				display: none;
			}
			.formNotRequired .checkboxField{
				position: static;
				width: 95%;
			}
		}
		@media screen and (max-width: 768px){
			.formContent ul{
				margin-top: 25px;
				padding-left: 35px;
			}
			.labelTwoLines{
				line-height: 22px;
				padding-top: 12px;
				height: 48px;
				width: auto;
			}
			.labelTwoLines div{
				clear: both;
				text-align: center;
				width: 100%;
			}
			.labelTwoLines .labelRemarkFont{
				font-size: 14px;
			}
			/*==INPUT==*/
			.formField label, .formField input{
				transition: all .2s;
				-webkit-transition: all .2s;
				-moz-transition: all .2s;
				-ms-transition: all .2s;
				-o-transition: all .2s;

				touch-action: manipulation;
			}
			.formField label{
				font-size: 18px;
				color: #9D9D9D;
				position: absolute;
				font-weight: normal;
				left: 0;
				top: 0;
				text-align: left;
				width: auto;
			}
			.formField input:placeholder-shown + label{
				white-space:nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			::-webkit-input-placeholder{/*Chorme/Opera/Safari*/
				opacity: 0;
				transition: inherit;
				color: #9D9D9D;
			}
			::-ms-input-placeholder{/*IE 10+*/
				opacity: 0;
				transition: inherit;
				color: #9D9D9D;
			}
			::-moz-placeholder{/*Firefox 19+*/
				opacity: 0;
				transition: inherit;
				color: #9D9D9D;
			}
			:-moz-placeholder{/*Firefox 18-*/
				opacity: 0;
				transition: inherit;
				color: #9D9D9D;
			}
			.formField input:focus::-webkit-input-placeholder{
				opacity: 1;
			}
			.formField input:focus::-ms-input-placeholder{
				opacity: 1;
			}
			.formField input:focus::-moz-placeholder{
				opacity: 1;
			}
			.formField input:not(:placeholder-shown) + label,
	    	.formField input:focus + label {
		        font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
		    }
		    #browserIE.fixedLable label.ieChange{
		    	font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
		        text-align: left;
		    }
			/*==SELECT==*/
	    	.formField select:focus + label, label.selected{
		        font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
		    }
		    .selectPH{
		    	display: none;
		    }
		}