@charset "UTF-8";
/*
* @data 2019-08-20
* Author: Alyshia Lee #7711
*
* E.SUN CREDITCARD ADDITIONAL FILE Stylesheet
-----------------------------------
   1. Universe
   2. Nav
   3. Btn
   4. Note
   5. Footer
   6. Progress Bar
   7. RWD
-----------------------------------
*/


		/*===============================
			1. Universe
		================================*/
		html, body{
			height: 100%;
		}
		body{
			margin: 0;
			padding: 0;
			font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
			font-size: 14px;
			color: #222;

			line-height: 1.3;/*2019/08/14 NEW*/
			letter-spacing: .03em;/*2019/08/14 NEW*/
		}
		a{
			text-decoration: none;
		}
		/*--10/30 NEW--*/
		ul, li{
			padding: 0;
			margin: 0;
		}
		#pageWarpper{
			min-height: 100%;
			position: relative;
			/*background: linear-gradient(#1B9E9E, #EDFAF9);*/
				background: #1B9E9E; /* Old browsers */
				/* IE9 SVG, needs conditional override of 'filter' to 'none' */
				background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiOWU5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGZhZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
				background: -moz-linear-gradient(top, #1B9E9E 0%, #EDFAF9 100%); /* FF3.6-15 */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1B9E9E), color-stop(100%,#EDFAF9)); /* Chrome4-9,Safari4-5 */
				background: -webkit-linear-gradient(top, #1B9E9E 0%,#EDFAF9 100%); /* Chrome10-25,Safari5.1-6 */
				background: -o-linear-gradient(top, #1B9E9E 0%,#EDFAF9 100%); /* Opera 11.10-11.50 */
				background: -ms-linear-gradient(top, #1B9E9E 0%,#EDFAF9 100%); /* IE10 preview */
				background: linear-gradient(to bottom, #1B9E9E 0%,#EDFAF9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1B9E9E', endColorstr='#EDFAF9',GradientType=0 ); /* IE6-8 */

				background-attachment: fixed;
				background-repeat: no-repeat;
		}

		
		#footerWarpper{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
		}
		
		#contentWarpper{
			padding-bottom: 180px;/*footer height*/
		}
		@media screen and (max-width: 385px) {
			#contentWarpper{
				padding-bottom: 195px;
			}
		}
		/*--[if gte IE9]--*/
		.gradient{
			filter: none;
		}

		.contentContainer{
			width: 98%;
			max-width: 1200px;
			margin: 0 auto;
		}

		/*===============================
			2. Nav
		================================*/
		nav{
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			font-weight: bold;
			letter-spacing: 1px;
			background: url(../../images/ui/headerPromotion.png) repeat-x #FFF;
			border-bottom: 1px solid #FFF;
			margin-bottom: 40px;
		}
		nav a{
			text-decoration: none;
		}
		nav .navFront{
			float: left;
		}
		nav .navFront a{
			float: left;
		}
		nav .navLogo{
			margin-left: 20px;
			width: 240px;
			height: 40px;
			background-image: url(../../images/ui/ic_nav_esunicon.png);
			background-repeat: no-repeat;
			background-size: 240px 40px;
			float: left;
		}
		nav .navFront font{
			color: #C3C3C3;
			font-weight: normal;
			font-size: 24px;
		}
		nav .navFront a{
			color: #009E96;
		}
		nav .navHome a{
			color: #9B9B9B;
			font-size: 16px;
			position: absolute;
			right: 20px;
		}
		nav .navHome img{
			width: 20px;
			height: 40px;
			float: left;
			margin-right: 5px;
		}
		/*==RWD==*/
		@media screen and (max-width: 640px){
			nav .navLogo{
				width: 140px;
			}
			nav .navHome font{
				display: none;
			}
		}
		@media screen and (max-width: 385px){
			nav .navLogo{
				width: 30px;
			}
		}
		
		/*===============================
			3. Btn
		================================*/
		.btnStyle{
			display: block;
			appearance: none;
			-webkit-appearance: none;
			border: none;
			height: 44px;
			line-height: 40px;
			-moz-border-radius: 22px;
			-webkit-border-radius: 22px;
			border-radius: 22px;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			margin: 0 auto;
			cursor: pointer;
			font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		}
		.subBtnStyle{
			display: block;
			appearance: none;
			-webkit-appearance: none;
			border: none;
			height: 36px;
			line-height: 34px;
			-moz-border-radius: 18px;
			-webkit-border-radius: 18px;
			border-radius: 18px;
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			margin: 0 auto;
			cursor: pointer;
			padding: 0 20px;
			font-family: "微軟正黑體", "Microsoft JhengHei", Arial, sans-serif;
		}
		.btnGreen{
			color: #FFF;
			border: 1px solid #009E96;
			background: #009E96;
		}
		.btnGreen:hover{
			border-top-color:#009E96;
			background: #28B8B0;
		}
		.btnWhite{
			color: #009E96;
			border: 1px solid #009E96;
			background: #FFF;
		}
		.btnWhite:hover{
			border-top-color:#009E96;
			background: #EFEFEF;
		}
		.btnDarkGray{
			color: #FFF;
			border: 1px solid #6B6B6B;
			background: #6B6B6B;
		}
		.btnDarkGray:hover{
			background: #747474;
		}
		.btnYellow{
			color: #FFF;
			border: 1px solid #EB8300;
			background: #EB8300;
		}
		.btnYellow:hover{
			background: #ED9018;
		}
		.btnRed{
			color: #FFF;
			border: 1px solid #F94E4E;
			background: #F94E4E;
		}
		.btnRed:hover{
			background: #FD5E5E;
		}
		input.btnStyle:disabled,
		input.subBtnStyle:disabled {
		    background: #C3C3C3;
		    border: 1px solid #C3C3C3;
		    color: #FFF;
		    cursor: not-allowed;
		}
		.btn-s{
			width: 125px;
		}
		.btn-l{
			width: 285px;
		}

		/*===============================
			4. Note
		================================*/
		.noteContainer{
			background: #eff9e2;
			border: #d9efc1 1px solid;
			margin: 35px auto;
			padding: 15px;
			border-radius: 5px;
		}
		.noteContainer ul, .noteContainer li{
			padding: 0;
			margin: 0;
		}
		.noteContainer ul{
			padding-left: 20px;
			position: relative;
		}
		.noteContainer li{
			list-style: none;
			font-size: 14px;
			line-height: 22px;
			text-align: justify;
			margin-bottom: 5px;
		}
		.noteContainer li:last-child{
			margin-bottom: 0;
		}
		.noteContainer li:before{
			content: "※";
			position: absolute;
			left: 0;
		}

		/*===============================
			5. Footer
		================================*/
		#bottomfooter{
			clear: both;
			position: relative;
			left: 0;
			bottom: 0;
			width: 100%;
			height: auto;
			line-height: 30px;
			background-color: #1D4A52;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			z-index: 1;
			/* margin-top: 156px; */
			margin-top: auto;
		}
		/* line1 */
		#bottomfooter ul {
			margin-bottom: 0;
		}
		
		#bottomfooter .service {
			width: 100%;
			background: #eee;
			text-align: center;
			padding: 6px 0;
		}
		
		#bottomfooter .service li {
			display: inline-block;
			color: #888;
			font-size: 13px;
			margin: 0 5px;
		}
		
		#bottomfooter .service li span {
			margin: 0 5px;
		}
		
		#bottomfooter .service li a {
			color: #009e96;
			border-left: #888888 1px solid;
			border-right: #888888 1px solid;
			padding: 0 15px;
		}
		
		/* line2 */
		
		.anchor {
			text-align: center;
			padding: 10px 0;
			font-family: Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體", sans-serif;
		}
		
		.anchor li {
			display: inline-block;
			font-size: 13px;
			letter-spacing: 0.06em;
			color: #fff;
			font-family: Arial, "微軟正黑體", "Microsoft JhengHei", "新細明體", sans-serif;
		}
		
		.anchor li a {
			display: inline;
			font-weight: normal;
			color: #fff;
			text-decoration: none;
			cursor: pointer;
		}
		
		
		.anchor li:before {
			content: "|";
			padding: 0 5px 0 1px;
		}
		
		.anchor li.first:before {
			content: "";
			padding: 0 5px 0 0;
		}
		
		.anchor li:before {
			color: #30ABAF;
		}
		
		.anchor li i.copyright:after {
			content: "©";
			font-size: 14px;
			margin: 2px 4px 0 0;
		}
		
		@media only screen and (max-width:767px){
			#bottomfooter .service li{
				font-size: 1rem;
			}
			.anchor li{
				font-size: 1.1rem;
			}
		}

		/*===============================
			6. Progress Bar
		================================*/
		.progressBar{
			display: inline-block;
			font-size: 18px;
			font-weight: bold;
			color: #9B9B9B;
			margin-bottom: 20px;
		}
		.progressBar ul,
		.progressBar ul li{
			padding: 0;
			margin: 0;
		}
		.progressBar ul{
			position: relative;
		}
		.progressBar ul li{
			list-style: none;
			float: left;
			position: relative;
			height: 44px;
			line-height: 44px;
			padding-right: 20px;
			border-radius: 22px;
			-moz-border-radius: 22px;
			-webkit-border-radius: 22px;
			background: #D5D5D5;
			margin-right: 30px;
			opacity: .5;
		}
		.progressBar ul li:last-child{
			margin-right: 0;
		}
		.progressBar ul li.now,
		.progressBar ul li.done {
			background: #16444E;
			color: #FFF;
			opacity: 1;
		}
		/*==Number==*/
		.progressBar .progressNo{
			float: left;
			width: 30px;
			height: 30px;
			line-height: 30px;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			margin: 7px 10px 7px 7px;
			text-align: center;
			background: #EBEBEB;
		}
		.progressBar ul li.now .progressNo{
			background: #FFF;
			color: #009E96;
		}
		.progressBar ul li.done .progressNo{
			background: #16444E;
			color: rgba(0, 0, 0, 0);
			background-image: url(../../images/ui/ic_checkbox_checked.png);
			background-size: 30px 30px;
			background-repeat: no-repeat;
			background-position: center;
		}
		.progressBar .progressTitle{
			display: inline-block;
		}
		.progressBar .progressTitle font{
			font-size: 16px;
			font-weight: normal;
			color: #7FCCC8;
			margin-left: 5px;
			display: none;
		}
		.progressBar ul li.now .progressTitle font{
			display: inline-block;
		}
		/*==Percentage==*/
		.progressBar .progressPerc{
			color: #FFF;
			font-size: 16px;
			line-height: 1;
			width: 45px;
			text-align: center;
			font-weight: normal;
			position: absolute;
			left: 0;
			top: -30px;
			display: none;
		}
		/*.progressBar ul li.now .progressPerc{
			display: block;
		}*/
		.progressBar .progressPerc::after{
			display: block;
			content: "";
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 6px 4px 0 4px;
			border-color: #FFF transparent transparent transparent;
			position: absolute;
			left: 18px;
			margin-top: 3px;
		}
		/*==Line==*/
		.progressBar ul li::before{
			display: block;
			content: "";
			width: 30px;
			height: 3px;
			background: #D5D5D5;
			position: absolute;
			left: -30px;
			top: 20px;
		}
		.progressBar ul li.now::before,
		.progressBar ul li.done::before{
			background: #16444E;
		}
		.progressBar ul li:first-child::before{
			display: none;
		}
		/*==RWD==*/
		@media screen and (max-width:768px){
			.progressBar ul li{
				height: 36px;
				padding-right: 0;
				border-radius: 18px;
				-moz-border-radius: 18px;
				-webkit-border-radius: 18px;
				margin-right: 10px;
				margin-top: 4px;
			}
			.progressBar ul li.now,
			.progressBar ul li.done{
				height: 44px;
				line-height: 44px;
				padding-right: 20px;
				border-radius: 22px;
				-moz-border-radius: 22px;
				-webkit-border-radius: 22px;
				margin-top: 0px;
			}
			.progressBar ul li.done{
				padding-right: 0;
			}
			.progressBar .progressNo{
				width: 24px;
				height: 24px;
				line-height: 24px;
				border-radius: 12px;
				-moz-border-radius: 12px;
				-webkit-border-radius: 12px;
				margin: 6px;
				font-size: 16px;
			}
			.progressBar ul li.now .progressNo,
			.progressBar ul li.done .progressNo{
				width: 30px;
				height: 30px;
				line-height: 30px;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
				margin: 7px 10px 7px 7px;
				font-size: 18px;
			}
			.progressBar ul li.done .progressNo{
				margin: 7px;
			}
			.progressBar .progressTitle{
				display: none;
			}
			.progressBar ul li.now .progressTitle{
				display: inline-block;
			}
			.progressBar ul li.now .progressTitle font{
				font-size: 14px;
			}
			.progressBar ul li::before{
				top: 16px;
				width: 10px;
				left: -10px;
			}
			.progressBar ul li.now::before,
			.progressBar ul li.done::before{
				top: 20px;
			}
		}
		
		@media screen and (max-width:350px){
			.progressBar ul li{
				height: 30px;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-webkit-border-radius: 15px;
				margin-top: 3px;
				font-size: 16px;
			}
			.progressBar ul li.now,
			.progressBar ul li.done{
				height: 36px;
				line-height: 36px;
				border-radius: 18px;
				-moz-border-radius: 18px;
				-webkit-border-radius: 18px;
				margin-top: 0px;
			}
			.progressBar .progressNo{
				width: 18px;
				height: 18px;
				line-height: 18px;
				border-radius: 9px;
				-moz-border-radius: 9px;
				-webkit-border-radius: 9px;
				font-size: 14px;
			}
			.progressBar ul li.now .progressNo,
			.progressBar ul li.done .progressNo{
				width: 24px;
				height: 24px;
				line-height: 24px;
				border-radius: 12px;
				-moz-border-radius: 12px;
				-webkit-border-radius: 12px;
				margin: 6px 10px 6px 6px;
				font-size: 16px;
			}
			.progressBar ul li.done .progressNo{
				margin: 6px;
			}
			.progressBar ul li.now .progressTitle font{
				display: none;
			}
			.progressBar ul li::before{
				top: 13px;
			}
			.progressBar ul li.now::before,
			.progressBar ul li.done::before{
				top: 16px;
			}
		}
		@media screen and (max-width:300px){
			.progressBar ul li{
				display: none;
			}
			.progressBar ul li.now{
				display: block;
			}
			.progressBar ul li.now::before{
				display: none;
			}
		}

		/*===============================
			7. RWD
		================================*/
		@media screen and (max-width: 1024px){
			.contentContainer{
				width: 90%;
			}
		}
		@media screen and (max-width: 768px){
			.btn-l{
				width: 90%;
				max-width: 285px;
			}
		}
		@media screen and (max-width: 360px){
			.btn-s{
				width: 40%;
				max-width: 125px;
			}
		}