@charset "UTF-8";
/*
* @data 2019-03-21
* Author: Alyshia Lee #7711
*
* E.SUN CREDITCARD ADDITIONAL FILE Stylesheet
-----------------------------------
   1. General
   2. Input
   3. Select
   4. Annotation/Alert
   5. Checkbox
   6. Radio
   7. Loader
   8. 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);
		}
		header{
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 25px;
		}
		.headerAnnotation{
			font-size: 16px;
			font-weight: normal;
			margin-top: 5px;
		}
		.subTileContainer{
			margin-bottom: 20px;
			display: inline-block;
		}
		.subTitle{
			font-size: 20px;
			font-weight: bold;
			float: left;
			margin-right: 10px;
		}
		.subTitleType{
			font-size: 20px;
			font-weight: bold;
			color: #1B9E9E;
			float: left;
		}
		.formContent ul, .formContent li{
			margin: 0;
			padding: 0;
		}
		.formContent ul{
			padding-left: 160px;
		}
		.formContent ul.noDeco{
			padding-left: 140px;/*.noDeco label: left*/
		}
		.formContent li{
			position: relative;
			list-style: none;
			padding-top: 24px;/*For label space*/
			margin-top: 15px;
		}
		.formContent ul.noDeco li{
			padding-top: 0px;
			margin-top: 15px;
		}
		.formContent li:before{
			content:url(../../images/ui/ic_input_gray.png);
			display: inline-block;
			width: 18px;
			height: 18px;
			position: absolute;
			left: -35px;
			top: 27px;
		}
		.formContent ul.noDeco li:before{
			display: none;
		}
		.formContent .formMain li.focus:before {
			content:url(../../images/ui/ic_input_green_now.png);
		}
		.formContent .formMain li.done:before {
			content:url(../../images/ui/ic_input_green_done.png);
		}
		.formContent .formMain li.alert:before {
			content:url(../../images/ui/ic_input_yellow_alert.png);
		}
		.formContent .formMain li.noDot:before{
			display: none;
		}
		.formContent .formMain ul.noDot li:before{
			display: none;
		}
		.formContent .formMain li:after{
			content: "";
			display: inline-block;
			width: 2px;
			height: calc(100% - 18px);/*75%*//*18px=before icon height*/
			background: #9D9D9D;
			position: absolute;
			left: -27px;
			top: 52px;
		}
		.formContent .formMain li.done:after,
		.formContent .formMain li.alert:after{
			background: rgba(0, 158, 150, .5);
		}
		.formContent .formMain li:last-child:after,
		.formContent ul.noProgressLine li:after,
		.formContent ul.noDeco li:after{
			display: none;
		}
		/*=FORM:RWD=*/
		.formContent{
			width: 100%;
			display: inline-block;
		}
		.formContentOne{
			margin: 0 auto;
		}
		.formContentFirst{
			float: left;
			width: 46%;
			display: inline-block;
			position: relative;
			margin-right: 3%;
		}
		.formContentSec{
			width: 46%;
			display: inline-block;
			position: relative;
		}
		/*=Form Zone=*/
		.formZone{
			background: #F7FCFC;
			border-radius: 5px;
			border: 1px solid #ACDEDC;
			border-top: 5px solid #009E96;
			padding: 20px;
			display: inline-block;
			width: calc(100% - 40px);
			margin-bottom: 20px;
		}
		.formZone:last-child{
			margin-bottom: 0;
		}
		.formZoneLabel{
			padding: 10px 20px;
			font-size: 18px;
			font-weight: bold;
			background: #009E96;
			color: #FFF;
			display: inline-block;
			border-radius: 5px 5px 0 0;
		}
		.formZone.withLabel{
			border-radius: 0 5px 5px 5px;
		}
		.formZone .row{
			display: inline-block;
			width: 100%;
		}
		.formZone .row:last-child{
			margin-bottom: 20px;
		}
		.formZoneFirst{
			float: left;
			width: 48%;
			display: block;
			position: relative;
			margin-right: 3%;
		}
		.formZoneSec{
			float: left;
			width: 48%;
			display: block;
			position: relative;
		}
		@media screen and (max-width: 1024px){
			.formZoneFirst{
				float: none;
				width: 100%;
				display: block;
				position: static;
				clear: both;
				margin-right: 0;
			}
			.formZoneSec{
				float: none;
				width: 100%;
				display: block;
				position: static;
				clear: both;
			}
		}
		
		/*===============================
			2. Input
		================================*/
		.formField{
			position: relative;
		}
		.formField input[type="text"]{
			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;
			background: rgba(255, 255, 255, 0);
		}
		.formField input[type="text"]:focus{
			outline: 0;
			border-bottom: 1px solid #1B9E9E;
		}
		.formContent li.alert input[type="text"],
		.formContent li.alert input[type="text"]:focus,
		.formContent li.alert select,
		.formContent li.alert select:focus{
			outline: 0;
			border-bottom: 1px solid #EB8300;
		}
		.formContent li.error input[type="text"],
		.formContent li.error input[type="text"]:focus{
			outline: 0;
			border-bottom: 1px solid #F94E4E;
		}
		.formField input[type="text"]:disabled{
			outline: 0;
			appearance: none;
			-webkit-appearance: none;
			-ms-appearance: none;
			background: rgba(255, 255, 255, 0);
			border-bottom: 1px solid rgba(195, 195, 195, 0);
			color: #16444E;
		}
		/*INPUT:RWD*/
		.formField label, .formField input[type="text"]{
			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;
		}
		.fixedLable .formField label{
			color: #1B9E9E;
		}
		.noDeco .formField label{
			left: -140px;/*ul.noDeco: padding-left*/
			top: 4px;
			text-align: right;
			width: 120px;
			color: #1B9E9E;
		}
		.formField input[type="text"]:focus + label,
		.formMain li.done label{
			color: #1B9E9E;
		}
		.formMain li.alert label{
			color: #EB8300;
		}
		::-webkit-input-placeholder{/*Chorme/Opera/Safari*/
			color: #C3C3C3;
		}
		::-ms-input-placeholder{/*IE 10+*/
			color: #C3C3C3;
		}
		::-moz-placeholder{/*Firefox 19+*/
			color: #C3C3C3;
		}
		:-moz-placeholder{/*Firefox 18-*/
			color: #C3C3C3;
		}
		/*===============================
			3. 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;
		}
		
		.formSel {
			display: inline-block;
			line-height: 30px;
			height: 30px;
			width: 95%;
		    background: url("../../images/ui/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;
		}
		.formSel:focus{
			outline: 0;
			border-bottom: 1px solid #1B9E9E;
			background: url("../../images/ui/ic_arrow_green_up.png") 97% no-repeat;
			background-size: 15px, 9px;
		}
		
		.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;
		}
		.noDeco .formField select:focus + label{
			left: -140px;
			top: 4px;
		}
		.selectPH{
			display: block;
			font-size: 18px;
			color: #9D9D9D;
			position: absolute;
			left: 0;
			top: 0;
		}
		.formField select:focus + .selectPH{
			display: none;
		}
		.selectPH.selected{
			display: none;
		}

		/*===============================
			4. Annotation/Alert
		================================*/
	    .formAnnotation{
			color: #9D9D9D;
			max-width: 95%;
			text-align: justify;
	    }
	    .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;
		}
		/*==Error==*/
		.formError{
	    	display: none;
	    }
		.formContent li.error .formError{
			display: block;
			color: #F94E4E;
		}
		/*===============================
			5. Checkbox
		================================*/
		.checkboxField{
			/*display: inline-block;
			width: 100%;*/
			position: relative;
			margin-bottom: 10px;
		}
		.checkboxField:last-child{
			margin-bottom: 0;
		}
		.checkboxField input[type="checkbox"]{
			display: none;
			opacity: 0;
			visibility: hidden;
		}
		.checkboxField input[type="checkbox"] + label{
			display: block;
			font-size: 16px;
			color: #222;
			font-weight: normal;
			border: 1px solid #C3C3C3;
			background: #FFF;
			border-radius: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			padding: 10px 10px;
			min-height: 30px;/*checkbox icon height*/
			margin: 0;
			cursor: pointer;
			position: static;
			width: auto;
		}
		.checkboxField input[type="checkbox"]:disabled + label{
			background: #F6F6F6;
			cursor: not-allowed;
		}
		.checkboxIcon{
			float: left;
			display: block;
			width: 30px;
			height: 30px;
			border: 1px solid  #C3C3C3;
			background-image: url(../../images/ui/ic_checkbox_normal.png);
			background-size: 30px 30px;
			background-repeat: no-repeat;
		}
		.checkboxText{
			display: block;
			margin-left: 45px;
			text-align: justify;
			margin-top: 3px;
		}
		.checkboxField input[type="checkbox"]:checked + label{
			border: 1px solid #1B9E9E;
		}
		.checkboxField input[type="checkbox"]:checked + label .checkboxIcon{
			background: #1B9E9E;
			border: 1px solid #1B9E9E;
			background-image: url(../../images/ui/ic_checkbox_checked.png);
			background-size: 30px 30px;
		}
		/*==Checkbox Form==*/
		.checkboxForm{
			float: noen;
			clear: both;
			display: inline-block;
			margin-bottom: 5px;
		}
		.checkboxForm .checkboxField{
			position: relative;
			float: left;
			display: block;
			width: auto;
			margin-right: 20px;
			margin-bottom: 10px;
		}
		.checkboxForm .checkboxField:last-child{
			margin-bottom: 10px;
		}
		.checkboxForm .checkboxField input[type="checkbox"] + label{
			border: none;
			background: none;
			border-radius: 0px;
			-moz-border-radius: 0px;
			-webkit-border-radius: 0px;
			padding: 0;
			margin: 0;
			cursor: pointer;
			position: static;
			width: auto;
		}
		.checkboxForm .checkboxIcon{
			float: left;
			display: block;
			width: 30px;
			height: 30px;
			border: 1px solid  #C3C3C3;
			background: #FFF;
			background-image: url(../../images/ui/ic_checkbox_normal.png);
			background-size: 30px 30px;
			background-repeat: no-repeat;
			margin-right: 5px;
		}
		.checkboxForm .checkboxText{
			display: inline-block;
			margin-left: 0;
			text-align: left;
			margin-top: 0;
			font-size: 18px;
			color: #222;
			font-weight: normal;
			line-height: 32px;
		}
		.checkboxForm .checkboxField input[type="checkbox"]:checked + label{
			border: none;
		}
		.checkboxForm .checkboxField input[type="checkbox"]:checked + label .checkboxIcon{
			background: #1B9E9E;
			border: 1px solid #1B9E9E;
			background-image: url(../../images/ui/ic_checkbox_checked.png);
			background-size: 30px 30px;
		}
		/*===============================
			6. Radio
		================================*/
		.radioForm{
			float: noen;
			clear: both;
			display: inline-block;
			margin-bottom: 5px;
		}
		.radioField{
			position: relative;
			float: left;
			display: block;
			width: auto;
			margin-right: 20px;
			margin-bottom: 10px;
		}
		.radioField:last-child{
			margin: 0;
		}
		.radioField input[type="radio"]{
			display: none;
			opacity: 0;
			visibility: hidden;
		}
		.radioField input[type="radio"] + label{
			display: block;
			cursor: pointer;
			position: static;
			text-align: left;
			width: auto;
		}
		.radioField input[type="radio"] + label .radioIcon{
			width: 30px;
			height: 30px;
			border-radius: 15px;
			background: #FFF;
			border: 1px solid #C3C3C3;
			float: left;
			margin-right: 5px;
			position: relative;
		}
		.radioField input[type="radio"] + label .radioIcon .radioInsideCircle{
			width: 22px;
			height: 22px;
			border-radius: 11px;
			background: #FFF;
			position: absolute;
			top: 4px;
			left: 4px;
		}
		.radioField input[type="radio"]:checked + label .radioIcon{
			border: 1px solid #1B9E9E;
		}
		.radioField input[type="radio"]:checked + label .radioIcon .radioInsideCircle{
			background: #1B9E9E;
		}
		.radioField .radioText{
			color: #222;
			font-weight: normal;
			font-size: 18px;
			height: 32px;
			line-height: 32px;
			display: inline-block
		}
		/*===============================
			7. Loader
		================================*/
		.loaderContainer{
			width: 25px;
			height: 22px;
			padding-top: 3px;
			position: absolute;
			left: -35px;
			top: 27px;
			display: block;
		}
		.loader{
			width: 18px;
			height: 18px;
			border-radius: 100%;
			position: relative;
			margin: 0 auto;
		}
		.loader:before, .loader:after{
			content: "";
			position: absolute;
			top: -2px;
			left: -2px;
			width: 100%;
			height: 100%;
			border-radius: 100%;
			border: 2px solid transparent;
			border-top-color: #9B9B9B;
		}
		.loader:before{
		  	z-index: 100;
		  	animation: spin 1s infinite;
		}
		.loader:after{
		  	border: 2px solid #DFDFDF;
		}
		@keyframes spin{
		  0%{
		    -webkit-transform: rotate(0deg);
		    -ms-transform: rotate(0deg);
		    -o-transform: rotate(0deg);
		    transform: rotate(0deg);
		  }
		  100%{
		    -webkit-transform: rotate(360deg);
		    -ms-transform: rotate(360deg);
		    -o-transform: rotate(360deg);
		    transform: rotate(360deg);
		  }
		}
		/*===============================
			8. RWD
		================================*/
		@media screen and (max-width: 1024px){
			.formContent{
				display: block;
				height: auto;
			}
			.formContentFirst{
				float: none;
				width: 100%;
				display: block;
				position: static;
				clear: both;
			}
			.formContentSec{
				width: 100%;
				display: block;
				position: static;
				clear: both;
			}
		}
		@media screen and (max-width: 768px){
			.formContentOne{
				margin: 0;
			}
			.formContent ul{
				margin-top: 25px;
				padding-left: 35px;
			}
			.formContent ul.noDeco{
				margin-top: 0px;
				padding-left: 0px;
			}
			/*==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;
			}
			.formMain li.alert label{
				color: #9D9D9D;
			}
			.formField input:placeholder-shown + label{
				white-space:nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			::-webkit-input-placeholder{/*Chorme/Opera/Safari*/
				opacity: 0;
				transition: inherit;
				color: #C3C3C3;
			}
			::-ms-input-placeholder{/*IE 10+*/
				opacity: 0;
				transition: inherit;
				color: #C3C3C3;
			}
			::-moz-placeholder{/*Firefox 19+*/
				opacity: 0;
				transition: inherit;
				color: #C3C3C3;
			}
			:-moz-placeholder{/*Firefox 18-*/
				opacity: 0;
				transition: inherit;
				color: #C3C3C3;
			}
			.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;
			}
			.formMain li.alert input:not(:placeholder-shown) + label,
			.formMain li.alert input:focus + label{
				color: #EB8300;
			}
		    #browserIE.fixedLable label.ieChange{
		    	font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
		        text-align: left;
			}
			/*== fixed label==*/
			.fixedLable .formField label{
		    	font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
		        text-align: left;
			}
			.fixedLable .formField input:placeholder-shown + label{
				white-space:nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			::-webkit-input-placeholder{/*Chorme/Opera/Safari*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			::-ms-input-placeholder{/*IE 10+*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			::-moz-placeholder{/*Firefox 19+*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			:-moz-placeholder{/*Firefox 18-*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			/*==noDeco Input==*/
			.formContent ul.noDeco li{
				padding-top: 24px;
			}
			ul.noDeco .formField label{
				font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
		        text-align: left;
			}
			ul.noDeco li.alert .formField input + label{
				color: #EB8300;
			}
			ul.noDeco .formField input:placeholder-shown + label{
				white-space:nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			ul.noDeco ::-webkit-input-placeholder{/*Chorme/Opera/Safari*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			ul.noDeco ::-ms-input-placeholder{/*IE 10+*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			ul.noDeco ::-moz-placeholder{/*Firefox 19+*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			ul.noDeco :-moz-placeholder{/*Firefox 18-*/
				opacity: 1;
				transition: inherit;
				color: #C3C3C3;
			}
			/*==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;
			}
			/*==noDeco Select==*/
			ul.noDeco .formField select:focus + label{
		        font-size: 16px;
		        position: absolute;
		        left: 0;
		        top: -24px;
		        cursor: pointer;
		        color: #1B9E9E;
		        font-weight: bold;
			}
			
			/*==Checkbox==*/
			.checkboxField input[type="checkbox"] + label{
				font-size: 16px;
				color: #222;
				font-weight: normal;
				position: static;
				width: auto;
			}
			.checkboxField input[type="checkbox"]:disabled + label{
				background: #F6F6F6;
			}
			.formMain li.alert .checkboxField input[type="checkbox"] + label{
				color: #222;
			}

			.checkboxForm{
				margin: 10px 0;
			}
			.checkboxForm .checkboxField{
				float: none;
				clear: both;
				margin-right: 0;
			}
			/*==Radio==*/
			.radioForm{
				margin: 10px 0;
			}
			.radioField{
				float: none;
				clear: both;
				margin-right: 0;
			}
		}