@charset "UTF-8";
/*
* @data 2019-08-20
* Author: Alyshia Lee #7711
*
* E.SUN CREDITCARD ADDITIONAL FILE Stylesheet
-----------------------------------
   2_FileUpload
-----------------------------------
*/
		header.uploadHeader{
			float: left;
			margin-right: 15px;
		}
		.uploadType{
			font-size: 20px;
			font-weight: bold;
			color: #1B9E9E;
			float: left;
			padding-top: 4px;
		}
		.uploadForm .noteContainer{
			margin-top: 10px;
		}
		.uploadAnnotation{
			margin-top: 20px;
		}
		.uploadSectionTitle{
			font-size: 20px;
			font-weight: bold;
			padding-left: 10px;
			border-left: 3px solid #1B9E9E;
			margin-bottom: 10px;
		}
		@media screen and (max-width: 768px){
			header.uploadHeader{
				float: none;
				clear: both;
				margin-right: 0px;
				margin-bottom: 0;
			}
			.uploadType{
				float: none;
				clear: both;
				padding-top: 0px;
				margin-bottom: 25px;
			}
		}
		/*===========================
			Upload Zone
		============================*/
		.uploadRow{
			display: inline-block;
			width: 100%;
			margin-bottom: 30px;
		}
		.uploadRow:last-child{
			margin-bottom: 20px;
		}
		.uploadRow.twoUpload{
			width: 700px;
			margin: 0 auto;
			display: block;
		}
		.uploadRow.oneUpload{
			width: 400px;
			margin: 0 auto;
			display: block;
		}
		.uploadSet{
			position: relative;
			display: inline-block;
			/*width: 48%;
			height: 17%;
			min-height: 295px;*/
			width: 32%;
			height: 350px;/*== 0224 NEW ==*/
			background: #F7F7F7;
			border-radius: 5px;
			border: 1px dashed #C3C3C3;
			background-image: url(../../images/ui/ic_upload_file.png);
			background-size: 65px 65px;
			background-repeat: no-repeat;
			background-position: center;
			overflow: hidden;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		.uploadSet.noIcon{
			background-image: none;
		}
		.twoUpload .uploadSet{
			width: 48%;
		}
		.oneUpload .uploadSet{
			width: 100%;
		}
		.uploadSet .uploadTitle{
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			color: #1B9E9E;
			margin-top: 10px;
			margin-bottom: 5px;
		}
		.uploadMsg {
			text-align: center;
			font-size: 15px;
			font-weight: bold;
			color: #f05743;
		}
		.uploadMsgTop {
			text-align: center;
			font-size: 15px;
			font-weight: bold;
			color: #f05743;
			padding-bottom: 20px;
		}
		.alertPB {
			color: red;
			padding-bottom: 15px;
			font-size: 15px;
		}

		/*=== Upload Btn ===*/
		.uploadSet .uploadBtn{
			position: absolute;
			left: calc((100% - 106px) / 2);
			bottom: 10px;
		}
		.uploadSet .clearBtn{
			width: 25px;
			height: 25px;
			background-image: url(../../images/ui/ic_gray_x.png);
			background-size: 22px 22px;
			background-repeat: no-repeat;
			position: absolute;
			top: 12px;
			right: 12px;
			cursor: pointer;
		}
		.uploadSet .clearBtn:hover{
			background-image: url(../../images/ui/ic_darkgray_x.png);
			background-size: 22px 22px;
			background-repeat: no-repeat;
		}
		/*=== Progress Bar ===*/
		.progressBarContainer{
			padding: 0 20px;
			position: absolute;
			width: calc(100% - 40px );
			bottom: 10px;
			display: none;
		}
		.progressBarContainer.show{
			display: block;
		}

		/*=== Add New Upload ===*/
		.uploadSet.addNew{
			background: #FFF;
			background-image: url(../../images/ui/ic_upload_green_add.png);
			background-size: 65px 65px;
			background-repeat: no-repeat;
			background-position: center;
			cursor: pointer;
		}
		.uploadSet.addNew:hover{
			background: #F7FCFC;
			background-image: url(../../images/ui/ic_upload_lightgreen_add.png);
			background-size: 65px 65px;
			background-repeat: no-repeat;
			background-position: center;
			border: 1px dashed #ACDEDC;
		}
		.uploadSet.addNew .uploadTitle{
			color: #C3C3C3;
		}
		

		@media screen and (max-width: 1024px){
			.uploadSet{
				width: 45%;
			}
			.oneUpload .uploadSet{
				max-width: 400px;
				margin: 0 auto;
				display: block;
				float: none;
				clear: both;
			}
			.uploadRow.twoUpload, .uploadRow.oneUpload{
				width: 100%;
				margin: 0 auto;
				display: inline-block;
			}
		}
		@media screen and (max-width: 768px){
			.uploadRow{
				width: 100%;
				margin: 0 auto 30px;
			}
			.uploadRow:last-child{
				margin: 0 auto;
			}
			.uploadSet{
				width: 100%;
				max-width: 400px;
				background-image: url(../../images/ui/ic_upload_camara.png);
				margin: 0 auto 10px;
				display: block;
				cursor: pointer;
				float: none;
				clear: both;
			}
			.twoUpload .uploadSet{
				width: 100%;
			}
		}

		/*===========================
			Top Arrow
		============================*/
		.topArrow{
			position: fixed;
			right: 30px;
			bottom: 50px;
			z-index: 10;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #4A4A4A;
			color: #FFFFFF;
			font-size: 28px;
			text-align: center;
			opacity: .3;
			cursor: pointer;
			transition: .3s;
			-webkit-transition: .3s;
			   -moz-transition: .3s;
				-ms-transition: .3s;
				 -o-transition: .3s;
		}
		.arrowContainer{
			padding-top: 9px;
		}
		.arrowContainer img{
			width: 32px;
			height: 32px;
		}
		.topArrow:hover{
			opacity:.8;
			transition: .3s;
			-webkit-transition: .3s;
			   -moz-transition: .3s;
				-ms-transition: .3s;
				 -o-transition: .3s;
			transform: scale(1.1, 1.1);
			-webkit-transform: scale(1.1, 1.1);
			   -moz-transform: scale(1.1, 1.1);
				-ms-transform: scale(1.1, 1.1);
				 -o-transform: scale(1.1, 1.1);
		}

		/*===========================
			Popup
		============================*/
		#clearAlertPopup .popupContent .popupText{
			font-size: 20px;
		}
		#myDataPopup .popupContent .popupText{
			margin: 30px auto;
			font-size: 16px;
		}
		#myDataPopup .popupContent .popupText ul li{
			padding-left: 18px;
		}
		#myDataPopup .popupContent .popupText ul li::before{
			display: block;
			content:'';
			height: 6px;
			width: 6px;
			border-radius: 50%;
			background-color: #222;
			position: absolute;
			left: 4px;
			top: 7px;
		}
		#myDataPopup .popupContent .popupText .notice ul li::before{
			background-color: #EB8300;
		}

/*===========================
			Animate Loading
			2019-09-19
		============================*/
		.blockArea {
			padding-bottom: 100%;
			display: none;
		}
		.spinner {
			 padding-top:50px;
			 height: 60px;
			 text-align: center;
			 font-size: 10px;
		}
		.spinner > div {
		  background-color: #28B8B0;
		  height: 100%;
		  width: 6px;
		  display: inline-block;
		   
		  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
		  animation: stretchdelay 1.2s infinite ease-in-out;
		}
		.spinner .rect2 {
		  -webkit-animation-delay: -1.1s;
		  animation-delay: -1.1s;
		}
		.spinner .rect3 {
		  -webkit-animation-delay: -1.0s;
		  animation-delay: -1.0s;
		}
		.spinner .rect4 {
		  -webkit-animation-delay: -0.9s;
		  animation-delay: -0.9s;
		}
		.spinner .rect5 {
		  -webkit-animation-delay: -0.8s;
		  animation-delay: -0.8s;
		}
		@-webkit-keyframes stretchdelay {
		  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
		  20% { -webkit-transform: scaleY(1.0) }
		}
		 
		@keyframes stretchdelay {
		  0%, 40%, 100% {
		    transform: scaleY(0.4);
		    -webkit-transform: scaleY(0.4);
		  }  20% {
		    transform: scaleY(1.0);
		    -webkit-transform: scaleY(1.0);
		  }
		}