@charset "UTF-8";
/*
* @data 2019-08-20
* Author: Alyshia Lee #7711
*
* E.SUN CREDITCARD ADDITIONAL FILE Stylesheet
-----------------------------------
   3_Successful
-----------------------------------
*/


		.formSuccess .formContentFirst{
			width: 38%;
			margin-right:2%;
		}
		.formSuccess .formContentSec{
			width: 59%;
		}
		
		/*===========================
			Success Icon
		============================*/
		.successIcon{
			width: 280px;
			height: 280px;
			margin: 0 auto;
		}
		.successIcon img{
			width: 280px;
			height: 280px;
		}
		
		/*===========================
			Success Content
		============================*/
		.successContent {
			margin-top: 40px;
		}
		.successContent .mainContent.desktop{
			display: block;
		}
		.successContent .mainContent.mobile{
			display: none;
		}
		.successContent .mainContent{
			font-size: 26px;
			line-height: 1.5;
		}
		.successContent .mainContent font.emp{
			color: #009E96;
		}
		.successContent .subContent{
			font-size: 20px;
			line-height: 1.5;
		}
		.successContent .subContent font.emp{
			color: #EB8300;
		}

		.formContent .noteNoArea{
			margin-top: 40px;
			margin-bottom: 35px;
		}
		.formContent .noteNoArea ul{
			padding-left: 20px;
			position: relative;
		}
		.formContent .noteNoArea li{
			position: static;
			list-style: none;
			padding-top: 0;
			margin-top: 0;
		}
		.formContent .noteNoArea li:before{
			content: "※";
			position: absolute;
			left: 0;
			top: 0;
			display: block;
		}
		.noteNoArea font.emp{
			color: #009E96;
			font-weight: bold;
		}
		.noteNoArea ul li font {
			color: red;
		}
		.noteNoArea ul li a{
			color:#009E96;
			font-weight: bold;
		}
		/*===========================
			Buttom Btn
		============================*/
		.formButBtn.twoBtn{
			display: inline-block;
			width: calc(100% - ((100% - 285px - 285px - 3%) / 2));
			padding-left: calc((100% - 285px - 285px - 3%) / 2);
			margin-top: 30px;
		}
		.formButBtn.twoBtn input[type="button"]{
			float: left;
			margin-right: 3%;
		}
		.formButBtn.twoBtn a:last-child input[type="button"]{
			margin-right: 0;
		}
		/*RWD*/
		@media screen and (max-width: 1024px){
			.formSuccess .formContentFirst{
				width: 100%;
			}
			.formSuccess .formContentSec{
				width: 100%;
			}
			.successIcon{
				width: 100%;
				height: auto;
				margin: 0 auto;
				text-align: center;
			}
			.successIcon img{
				width: 30%;
				min-width: 200px;
				height: auto;
			}
			.successContent {
				margin-top: 20px;
			}
			.successContent .mainContent{
				text-align: center;
			}
			.successContent .subContent{
				margin-bottom: 10px;
			}
			.formContent .noteNoArea{
				margin-top: 20px;
			}
		}
		@media screen and (max-width: 768px){
			.successIcon img{
				width: 50%;
				max-width: 280px;
				height: auto;
			}
			.successContent .mainContent.desktop{
				display: none;
			}
			.successContent .mainContent.mobile{
				display: block;
			}
			.successContent .mainContent{
				font-size: 22px;
			}
			.successContent .subContent{
				font-size: 16px;
			}
			.formContent .noteNoArea ul{
				margin-top: 0;
			}

			.formButBtn.twoBtn{
				display: block;
				width: 100%;
				padding-left: 0;
			}
			.formButBtn.twoBtn input[type="button"]{
				float: none;
				clear: both;
				margin: 0 auto;
			}
			.formButBtn.twoBtn a:last-child input[type="button"]{
				margin: 15px auto 0;
			}
		}
		@media screen and (max-width: 330px){
			.successContent .mainContent{
				font-size: 20px;
			}
			.successContent .subContent{
				font-size: 16px;
			}
		}