@charset "UTF-8";
/*
* @data 2018-8-1
*
* E.SUN PAY Stylesheet
--------------------------------
   1. Universe
   2. Nav
   3. Breadcrumb
   4. Btn
   5. Note
   6. Footer(original)
   7. RWD
--------------------------------
*/


		/*===============================
			1. Universe
		================================*/
		html, body{
			min-height: 100%;
		}
		body{
			margin: 0;
			padding: 0;
			font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
			font-size: 14px;
			color: #222;
		}
		a{
			text-decoration: none;
		}
		body{
			/*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;
			height: 100%;
		}
		/*--[if gte IE9]--*/
		.gradient{
			filter: none;
		}

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

		/*===============================
			2. Nav
		================================*/
		nav{
			color: #009E96;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			letter-spacing: 1px;
			background: url(../IMG/headerPromotion.png) repeat-x #FFF;
			border-bottom: 1px solid #FFF;
			margin-bottom: 40px;
		}
		/*==MENU BAR==*/
		#menuIcon{
			position: absolute;
			top: 0px;
			left: 20px;
			width: 30px;
			height: 30px;
			margin: 0 auto;
			text-align: left;
		}
		#menuBar, div#menuBar::before, div#menuBar::after{
			margin: 0 auto;
			margin-top: 20px;
			padding: 0;
			content: "";
			width: 25px;
			height: 2px;
			background: #6C6C6C;
		}
		div#menuBar::before{
			top: -8px;
		}
		div#menuBar::after{
			top: 8px;
		}
		div#menuBar::before, div#menuBar::after{
			position: absolute;
			transition: all .4s ease 0s;
			-webkit-transition: all .4s ease 0s;
			-moz-transition: all .4s ease 0s;
			-ms-transition: all .4s ease 0s;
			-o-transition: all .4s ease 0s;
		}
		#menuIcon:hover #menuBar::before, #menuIcon:hover #menuBar::after{
			width: 12px;
			transform-origin: right;
			-webkit-transform-origin: right;
			-moz-transform-origin: right;
			-ms-transform-origin: right;
			-o-transform-origin: right;

			transition: all .4s ease 0s;
			-webkit-transition: all .4s ease 0s;
			-moz-transition: all .4s ease 0s;
			-ms-transition: all .4s ease 0s;
			-o-transition: all .4s ease 0s;
		}
		#menuIcon:hover #menuBar::before{
			transform: rotate(40deg) translate(16px, -3px);
			-webkit-transform: rotate(40deg) translate(16px, -3px);
			-moz-transform: rotate(40deg) translate(16px, -3px);
			-ms-transform: rotate(40deg) translate(16px, -3px);
			-o-transform: rotate(40deg) translate(16px, -3px);			
		}
		#menuIcon:hover #menuBar::after{
			transform: rotate(-40deg) translate(16px, 3px);
			-webkit-transform: rotate(-40deg) translate(16px, 3px);
			-moz-transform: rotate(-40deg) translate(16px, 3px);
			-ms-transform: rotate(-40deg) translate(16px, 3px);
			-o-transform: rotate(-40deg) translate(16px, 3px);
		}
		
		/*===============================
			3. Breadcrumb
		================================*/
		.breadcrumb ul{
			margin: 10px 0;
			padding: 0;
			height: 25px;
			color: #FFF;
		}
		.breadcrumb li{
			margin: 0;
			padding: 0 3px;
			height: 25px;
			line-height: 25px;
			display: inline-block;
			list-style-type: none;
			float: left;
		}
		.breadcrumb li img{
			width: 25px;
			height: 25px;
		}
		.breadcrumb li:not(:first-child):before {
		    content:"／";
		    display:inline-block;
		    padding:0 3px 0 0;
		}
		.breadNow{
			font-weight: bold;
		}

		/*===============================
			4. Btn
		================================*/
		.btnStyle{
			display: block;
			appearance: none;
			-webkit-appearance: none;
			border: none;
			border: 1px solid #009E96;			
			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;
		}
		.btnGreen{
			color: #FFF;
			background: #009E96;
		}
		.btnGreen:hover{
			background: #28B8B0;
		}
		.btnWhite{
			color: #009E96;
			background: #FFF;
		}
		.btnWhite:hover{
			background: #EFEFEF;
		}
		input.btnStyle:disabled {
		    background: #C3C3C3;
		    border: 1px solid #C3C3C3;
		    color: #FFF;
		    cursor: not-allowed;
		}
		.btn-s{
			width: 125px;
		}
		.btn-l{
			width: 285px;
		}

		/*===============================
			5. 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;
		}
        .formContent .noteContainer li:before {
            content: "";
            position: absolute;
            left: 0;
        }
		/*===============================
			6. Footer(original)
		================================*/
		#bottomFooter {
			width: 100%;
			height: 110px;/*97*/
			position: relative;
			bottom: 0;
			left: 0;
			background: url("../IMG/footer_background.gif") repeat-y center bottom;
		}
		/* line1 */
		#bottomFooter .service {
			width: 100%;
			background: #eee;
			text-align: center;
			padding: 15px 0;
		}
		#bottomFooter .service li {
			display: inline-block;
			*display: inline;
			*zoom: 1;
			color: #888;
			font-size: 13px;
			margin: 0 5px;
		}
		#bottomFooter .service li span {
			margin: 0 5px;
		}
		#bottomFooter .service li a {
			color: #009e96;
			padding: 0 15px;
			border-left: #888888 1px solid;
			border-right: #888888 1px solid;
		}
		/* line2 */
        #bottomFooter .esun {
            display: block;
            width: 90%;
            max-width: 1000px;
            margin: 0 auto;
            color: #fff;
            padding: 12px 0px 0px 40px;
        }
		#bottomFooter .esun li {
			float: left;
			list-style-type: none;
		}
		#bottomFooter .esun .logo {
			margin: 0px 0 3px 0;
			background-image: url(../IMG/footer_logo.png);
			background-size: 232px 36px;
			width: 232px;
			height: 36px;
		}
		#bottomFooter .esun li a {
			display: inline-block;
			background: url("../IMG/footer_vertical_line.gif") repeat-y left top;
			color: #fff;
			margin: 14px 0 0 8px;
			padding-left: 7px;
		}
		#bottomFooter .esun .copyright { 
			float: right;
			display: inline-block;
			margin-top: 15px;
		}
		#bottomFooter .esun .copyright:before {
			content: "©";
			font-size: 16px;
			float: left;
			margin: 0 4px 0 0;
		}
		/*== RWD ==*/
		@media screen and (max-width: 768px) {
			#bottomFooter .esun .copyright { display: none; }
			/*#bottomFooter .esun { width: 460px; }*/
		}
		@media screen and (max-width: 640px) {
			#bottomFooter { height: 120px;/*114px*/ }	
		}
		@media screen and (max-width: 532px) {
			#bottomFooter .esun li a {
		  	display: none;
		  	}
		  	#bottomFooter .esun { width: 232px; }
		}
		@media screen and (max-width: 404px) {
			#bottomFooter { height: 144px; } /*iphone 4s 會有問題 修正144px*/
		}

		/*===============================
			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;
			}
		}