@charset "UTF-8";
/*
* @data 2015-11-5
* Author: Linda Lu
*
* E.SUN eCardForm Stylesheet
--------------------------------
   step1: auth
   step2: card
   step3: form
   step4: confirm
   step5: upload
--------------------------------
*/

/*=====================================================
   step1: auth
=====================================================*/
.cmxform .cardNum {
	float: left;
	border-radius: 4px;
    border: 1px solid #ddd;
	width: 234px;
}
.cmxform .cardNum.error {
	border-color: #fcd089;
    background-color: #fff9ed;
}
.cmxform .cardNum.error input {
	background-color: #fff9ed;
}
.cmxform .cardNum input {
	width: 63px;
	border: none;
	width: 45px;
	font-size: 14px;
	outline: 0;
	text-align: center;
}
.cardNum i { color: #d3d3d3; }
#cardNumError {
	display: none;
	line-height: 32px;
	color: #eb8300;
    padding: 8px 0 0 10px;
}
#numCaptcha { margin-right: 10px; }
.genCaptcha { height: 32px; margin-bottom: -10px; margin-right: -10px; width: 100px; }
.agreeBox a { color: #333; border-bottom: 1px solid #333; padding-left: 2px; }

/*=====================================================
   	step2: card
=====================================================*/
.respond-field-input.transformSelect-down-div {
	margin-top: 6px;
}
.cardSlider  {
	position: relative;
	z-index: 5;
	min-width: 90%;
	list-style-type: none;
	vertical-align: top;
}
.cardSlider li {
	padding: 0 10px;
	display: inline-block;
	text-align: center;
}
.cardSlider li.active {
	width: 249px;
	padding: 0;
}
.cardSlider li .cardImg {
	display: block;
	padding: 0;
	width: 160px;
	height: 100px;
	margin: 0 auto 14px auto;
	cursor: pointer;
}
.cardSlider li.active .cardImg {
	width: 230px;
	height: 144px;
	margin: 0 auto;
}

.cardSlider li.active .cardImg2 {
	 width: 144px;
	height: 230px;
}

.cardSlider li .cardImg2 {
	 width: 100px;
	height: 160px;
}

.cardSlider .shadow {
	display: none;
	width: 249px;
	height: 14px;
	background: url(/EsunCreditweb/images/card/cardShadow.png) center no-repeat;
}
.cardSlider li.active .shadow {
	display: block;
}
.cardSlider a {
    background-image: url("/EsunCreditweb/images/public/bxsliderSprite.png");
    background-repeat: no-repeat;
    top: 65px;
    width: 43px;
    height: 44px;
}
.cmxform .cardSlider label {
	text-align: center;
	cursor: pointer;
}
.cardSliderController {
	position: absolute;
	z-index: 2;
	width: 960px;
}
.cardSliderController .arrow {
	display: inline-block;
    width: 20px;
    height: 141px;
    vertical-align: middle;
    background: no-repeat center center;
    cursor: pointer;
}
.cardSliderController .arrow.prev {
	background-image: url(/EsunCreditweb/images/public/arrow_left_grey.png);
}
.cardSliderController .arrow.prev:hover {
	background-image: url(/EsunCreditweb/images/public/arrow_left_green.png);
}
.cardSliderController .arrow.next {
	float: right;
	background-image: url(/EsunCreditweb/images/public/arrow_right_grey.png);
}
.cardSliderController .arrow.next:hover {
	float: right;
	background-image: url(/EsunCreditweb/images/public/arrow_right_green.png);
}
.giftSlider  {
	position: relative;
	z-index: 5;
	min-width: 90%;
	list-style-type: none;
	vertical-align: top;
}
.giftSlider li {
	padding: 0 10px;
	display: inline-block;
	text-align: center;
}
.giftSlider li.active {
	width: 249px;
	padding: 0;
}
.giftSlider li .giftsImg {
	display: block;
	padding: 0;
	width: 160px;
	height: 100px;
	margin: 0 auto 14px auto;
	cursor: pointer;
}
.giftSlider li.active .giftsImg {
	width: 230px;
	height: 144px;
	margin: 0 auto;
}
.giftSlider .shadow {
	display: none;
	width: 249px;
	height: 14px;
	background: url(/EsunCreditweb/images/card/cardShadow.png) center no-repeat;
}
.giftSlider li.active .shadow {
	display: block;
}
.giftSlider a {
    background-image: url("/EsunCreditweb/images/public/bxsliderSprite.png");
    background-repeat: no-repeat;
    top: 65px;
    width: 43px;
    height: 44px;
}
.cmxform .giftSlider label {
	text-align: center;
	cursor: pointer;
}
.giftSliderController {
	position: absolute;
	z-index: 2;
	width: 960px;
}
.giftSliderController .arrow {
	display: inline-block;
    width: 20px;
    height: 141px;
    vertical-align: middle;
    background: no-repeat center center;
    cursor: pointer;
}
.giftSliderController .arrow.prev {
	background-image: url(/EsunCreditweb/images/public/arrow_left_grey.png);
}
.giftSliderController .arrow.prev:hover {
	background-image: url(/EsunCreditweb/images/public/arrow_left_green.png);
}
.giftSliderController .arrow.next {
	float: right;
	background-image: url(/EsunCreditweb/images/public/arrow_right_grey.png);
}
.giftSliderController .arrow.next:hover {
	float: right;
	background-image: url(/EsunCreditweb/images/public/arrow_right_green.png);
}
#allCards {
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
}
#allGifts {
	width: 90%;
	overflow: hidden;
	margin: 0 auto;
}
.cardGiftList  {
	position: relative;
	z-index: 5;
	list-style-type: none;
	vertical-align: top;
}
.cardGiftList li { 
	display: inline-block;
	text-align: center;
}
.cardGiftList li.inline {
	border: 1px solid #dfdfdf;
	border-radius: 4px;
	padding: 0 5px;
}
.cardGiftList li.twoSet { 
	width: 49%;
	background: #f1fbfb;
	border: 1px solid #dfdfdf;
	border-radius: 5px;
	padding-bottom: 15px;
}
.cardGiftList li.twoSet .imgBox {
	padding: 10px 0;
	margin-bottom: 15px;
	background: #fff;
	border-radius: 5px 5px 0 0;
	padding: 10px 0; 
}
p.noESUNcard {
	display: block;
	font-size: 12px;
	color: #888;
	margin: 5px 0 0 15px;
}
.cardGiftList li.twoSet.floatR { float: right; }
.cardGiftList li.twoSet.floatL { float: left; }
.cmxform .cardGiftList .twoSet label {
	width: 90%;
	text-align: left;
	vertical-align: top;
}
.cmxform .cardGiftList .twoSet label i {
	display: block;
	color: #009d99;
	margin: 3px 0 5px -3px;
}

.chkGiftRadio .inline .imgBox {
	width: 179px;
	border-radius: 5px 5px 0 0;
	cursor: pointer;
}
.chkGiftRadio label {  cursor: pointer; }
.chkGiftRadio .inline label {
	max-width: 180px;
	word-break: break-all;
	text-align: center;
	vertical-align: top;
	height: 35px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

/*=====================================================
   	step3: form
=====================================================*/
#iInputEXMY_M, #iInputEXMY_Y { width: 112px; }
#iInputEXMY_Y { margin-left: 10px; }
#iEnd01, #iEnd02 { width: 112px; }
#iEnd02 { margin-left: 10px; }
#expires-error { padding-left: 3px; }
#MASTS_confirm, #EDUCD_confirm, #BILLADD_S, #eSENDTYPE,
#slectAUTOPAY3, #BUSI_confirm, #BUSI2_confirm { width: 234px; }
#iADD1_1, #iADD1_2, #iADD2_1, #iADD2_2, #ADD3_1_name, #ADD3_2_name { width: 112px; margin-right: 8px; }
.eBillNote { display: none; }
.eBillNote.showDesktop { display: block; }
#eBillOption { display: inline-block; margin: 10px 0 0 -10px; }
#eBillOption label { color: #009d99; }
.sendAddr .ml { margin-left: 6px; }
#sendTypeText {
	margin-left: 15px;
	vertical-align: top; line-height: 32px;
}
.etagInputStyle .respond-field-input { display: block; }
.etagInputStyle .respond-field-input.oddBg input { background: #f5fcfc; }
.etagInputStyle input { text-transform: uppercase; }
.carInputAsterisk {
	display: inline-block;
	width: 20px;
	text-align: center;
	font-style: normal;
}
.carInputBtn {
	display: inline-block;
	width: 41px;
	height: 32px;
	vertical-align: bottom;
	margin-left: 8px;
	cursor: pointer;
}
.carInputBtn.add { background: url(/EsunCreditweb/images/form/addCarInput.png) no-repeat; }
.carInputBtn.del { background: url(/EsunCreditweb/images/form/delCarInput.png) no-repeat; }
.chargingTable { width: 100%; background: #fff; margin: 10px 0;  }
.chargingTable td { border: 1px solid #a3e4e3; padding: 5px 10px; font-size: 13px; color: #333; }
.chargingTable .TDitem { background: #f1fbfb; color: #000; }
.chargingTable .TDtitle { display: none; }
.chargingTable td .bright { color: #e4007f; }
.chargingTable td ul { list-style-type: square; margin-left: 20px; }
.chargingTable td ul li { color: #555; text-align: justify; }
.TwoColorTitle.toggle {
	background: #fefefe url(/EsunCreditweb/images/form/btnBg.png) bottom repeat-x;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding-top: 13px;
	margin: 5px 0 0 0;
	cursor: pointer;
}
.TwoColorTitle.toggle.first { margin-top: 20px; }
.TwoColorTitle.toggle .Text { border: none; font-size: 1.2em; padding: 0 10px 10px 10px; }
.TwoColorTitle.mt { margin-top: 20px; }
.TwoColorTitle .arrowDown { margin-right: 3px; }
.TwoColorTitle.toggle:hover .arrowDown {
	background: url(/EsunCreditweb/images/form/arrowDownHover.png) no-repeat center;
}
/*=====================================================
   	step4: confirm
=====================================================*/
.listStyle.etcListItem li { padding: 8px 0; }
.listStyle.etcListItem .fieldNote { margin: 0 3px; line-height: 16px; }
.listStyle.etcListItem .imp { font-weight: 600; letter-spacing: 0.01em; color: #333;}
.etcCardNum { padding: 18px 20px 0 8px; font-weight: normal; }

/*=====================================================
   	step5: upload
=====================================================*/
#nowUploadBtn { color: #009d99; padding: 0 4px 0 2px; cursor: pointer; }
#nowUpload { display: none; }

img.upload {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: -5px 2px -5px 4px;	
}
.textDone {
	display: block;
	font-size: 18px;
	line-height: 22px;
	font-weight: bold;
	text-indent: 20px;
	color: #36B2AB;
	padding: 10px 0;
	background: #eff1f0;
	margin: -20px -20px 15px -20px;
}
.textDone img.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: -5px 5px -5px 0;
}
.applyInfo { display: block; margin-top: 15px; }
.applyInfo li { letter-spacing: 0.06em; line-height: 20px; color: #686868; }
.fileBlock .fileList { margin-top: 10px 0 8px 0; }
.fileUploadGroup { margin-top: 15px; }
.fileUpload {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 32px;
}
.fileUpload .btn {
	display: inline-block;
	margin-right: 8px;
    padding: 3px 15px;
    background: linear-gradient(#FFF, #e5e5e5);
    -pie-background: linear-gradient(#FFF, #e5e5e5);
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    cursor: pointer;
	outline: 0;
}
.fileUpload input.upfile {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 32px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
 }
 .btnNote {
	display: inline-block;
    text-align: center;
    color: #999;
    word-wrap: break-word;
    word-break: break-all;
}
/*=====================================================
   	RWD
=====================================================*/
@media screen and (max-width: 960px) {
	.cardSliderController {
		display: block;
		position: absolute;
		width: 90%;
		left: 5%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0 10px;
	}
	.giftSliderController {
		display: block;
		position: absolute;
		width: 90%;
		left: 5%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		padding: 0 10px;
	}
	.cardSliderController .arrow { height: 185px; }
	#allCards { max-width: 249px; overflow: hidden; }
	.cardSlider { left: 0; text-align: left; overflow: hidden; margin: 20px auto; }
	.cardSlider li { float: left; text-align: center; padding: 0; }
	.cardSlider li .cardImg { width: 230px; height: 144px; margin-bottom: 0; }
	.cardSlider li .shadow { display: block; }
	.giftSliderController .arrow { height: 185px; }
	#allGifts { max-width: 249px; overflow: hidden; }
	.giftSlider { left: 0; text-align: left; overflow: hidden; margin: 20px auto; }
	.giftSlider li { float: left; text-align: center; padding: 0; }
	.giftSlider li .giftsImg { width: 230px; height: 144px; margin-bottom: 0; }
	.giftSlider li .shadow { display: block; }
	.cmxform .cardGiftList .twoSet label, .cmxform .cardSlider .giftSlider label { font-size: 16px;}
	.cardGiftList  { margin-left: 12px; }
	.cardGiftList li.twoSet { display: block; width: 45%; }
	.cardGiftList li.twoSet.floatR, 
	.cardGiftList li.twoSet.floatL { float: left; margin-bottom: 10px; }
	.cardGiftList li.inline { margin-bottom: 10px; }
	.cardGiftList li.inline .giftImg { padding: 10px 0; }
	.sendAddr .ml, .sendAddr .ml15 { margin-left: 10px; }
	ul.ideographic { max-height: 150px; overflow: auto; }
	.etcCardNum { padding: 0 0 0 3px; }
}
@media screen and (max-width: 640px) {
	#seniorityM { margin-left: 0; }
	#cardNumError { display: inline-block; padding: 3px 0 0 0; }
    .cmxform .cardNum input[type="password"] { width: 45px; }
	.cmxform .cardNum { width: 98.5%; padding: 0 5px; text-align: center; }
	.cmxform .cardNum.error { width: 96.5%; padding: 0 5px; text-align: center; }
	.cmxform .cardNum input[type="password"] { width: 20%; }	
	.cardNumError { padding: 10px 0 8px 0; }
	.cardGiftList li.twoSet { width: 98%; margin-left: 0; }
	.cardGiftList li.inline { width: 98%; }
	.chkGiftRadio .inline .imgBox { width: 100%; }
	.chkGiftRadio .inline label { display: inline-block; max-width: 80%; }
	.chargingTable .TDtitle { font-style: normal; display: block; color: #e4007f; margin: 5px 0; }
	.chargingTable .TDtitle:before { content: url(/EsunCreditweb/images/form/TDtitleBefore.png); width: 9px; height: 14px; }
	.chargingTable .TDitem { background: none; display: none; }
	.chargingTable { background: none; margin: 0;  }
	.chargingTable td { border: 0; line-height: 18px; padding: 0; font-size: 14px; }
	.chargingTable td ul { list-style-type: decimal; }
	.infoTable { width: 100%; }	
	.genCaptcha { display: block; margin: 10px 0 -12px 0; }
	.applyInfo { letter-spacing: 0.07em; color: #555; text-align: justify; margin-top: 20px; }
	.applyInfo li { display: inline; font-size: 16px; line-height: 24px; }
	.textDone { font-size: 24px; line-height: 24px; padding-top: 15px; }
	.textDone img.icon { margin: -5px 5px -3px 0; }
}
@media screen and (max-width: 532px) {
	.header.mailloan li.link,
	.TwoColorTitle.mailloan .Text i,
	.eBillNote.showDesktop { 
		display: none;
	}
	.cardGiftList, p.noESUNcard, .sendAddr .ml, .sendAddr .ml15 {
		margin-left: 0;
	}
	#sendTypeText { 
		color: #888888;
		line-height: 16px;
		margin-left: 0;
		margin-bottom: 10px;
	}
	.etagInputStyle .respond-field-input { margin: 10px 0; }
	#iCardNum1,#iCardNum2,#iCardNum3,#iCardNum4 { width: 15%; }
	#iEnd02, #iEnd01 { width: 47.5%; }
	#iEnd02 { float: right; }
	#iInputEXMY_Y, #iInputEXMY_M { width: 47.5%; }
	#iInputEXMY_Y { float: right; }
	#iADD1_1, #iADD1_2, #iADD2_1, #iADD2_2, #iADD3_1, #iADD3_2
	{
		width: 48.5%;
	    margin-bottom: 10px;
	}
	#iBAGE1, #iBAGE2
	{
		width: 30%;
	    margin-bottom: 10px;
	}
	#slectAUTOPAY3 { width: 100%; }
	#iADD1_2, #iADD2_2, #iADD3_2 { margin-right: 0; float: right; }
	#MASTS_confirm, #EDUCD_confirm, #BILLADD_S, #eSENDTYPE, #BUSI_confirm, #BUSI2_confirm { width: 100%; }
	#ebillHead.ebill { display: inline-block; }
	.respond-field-detail.noneBorder { border: none; padding: 0; }
	.TwoColorTitle.toggle { margin: 5px -10px 0 -10px; }
	.TwoColorTitle.toggle .Text { font-size: 24px; }
	.agreeBox ul.ideographic {
		overflow-x: hidden;
		overflow-y: auto;
		height: 250px;
		font-size: 15px;
		text-align: left;
	}
	.agreeBox ul.ideographic {
		list-style-position: inside;
		width: 95%;
		margin: 0 auto;
		padding: 0;
	}
	.listStyle.ETCListItem { color: #333; }	
}
@media screen and (max-width: 414px) {
	#iPHONE3_2 { width: 48.5%; }
}
@media screen and (max-width: 360px) {
	#iADD1_1, #iADD1_2, #ADD3_1_name, #ADD3_2_name, #slectAUTOPAY3 { float: none; width: 100%; }
	#iPHONE3_2 { width: 45%; }
	#seniorityY, #seniorityX { width: 48%; }
}