@font-face {
	font-family: 'JhengHei';
	src: url('../../fonts/Microsoft JhengHei.eot');
  	src: url('../../fonts/Microsoft JhengHei.eot?#iefix') format('embedded-opentype'),
       	url('../../fonts/Microsoft JhengHei.woff') format('woff'),
       	url('../../fonts/Microsoft JhengHei.ttf')  format('truetype'),
       	url('../../fonts/Microsoft JhengHei.svg#svgFontName') format('svg');
}

.center-flex{
    justify-content: center ;
    align-items: center;
    display: flex;
}

.form-group label {  
    padding-left: 0;
    padding-right: 0; 
    float:left; 
    text-align:right; 
    
}

/*20190516*/
.AMC {
	display: none!important;
}

#mobile-footer{
    display: none;
}

/*AK*/
#colCut {
	display: inline-block;
}

#privacylink {
	display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
}

#step2-p{
	left: -3%;
}

.resAddr {
    top: 0rem;
}

.emailAddr {
    top: 1rem;
}

.typeRes {
    top: 0rem;
}
   	
div#surnameDiv {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

div#givennameDiv {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.row.nameRow {
    width: 96%;
}

.name-input {
    float: left;
    width: 74%;
}

/*AK*/
.categoryIcon {
	align-items: center!important;
	justify-content: center!important;
	display: flex!important;
	text-align: center;
}

.totalPpl {
    margin-top: 2rem;
}

@media screen and (max-width:576px){
    #mobile-footer{
        display: block;
    }
    #desktop-footer{
        display: none;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }

}


@media screen and (max-width:767px) {
    .form-group label {  
        text-align:left;       
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    label#livepeoplelabel {
	    margin-top: calc(2.5rem);
	}
	
	div#surnameDiv {
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	    position: relative;
	    width: 100%;
	    min-height: 1px;
	}
	
	div#givennameDiv {
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	    position: relative;
	    width: 100%;
	    min-height: 1px;
	}
	
	.row.nameRow {
	    width: 106%;
	}
	
	.name-input {
	    width: 86%;
	}
	
	#colCut {
		display: none;
	}
	
	#privacylink {
		display: block;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
}

.eng-span{
    float: left;
    position: relative;
    top: 0.5em;
    left: 11%;
}

/*AK: 92% original*/
.year-unit-eng{
    position: relative;
    top: -1.5rem;
    left: 80%;
}



body {
    font-family: JhengHei !important;
    min-height:100vh;
    width: 100vw;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 10px;
}


.navbar-toggler:focus,
.navbar-toggler:active {
    outline: 0;
}

.navbar-toggler span {
   display: block;
   background-color: #444;
   height: 3px;
   width: 25px;
   margin-top: 4px;
   margin-bottom: 4px;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   position: relative;
   left: 0;
   opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
   -webkit-transition: transform .35s ease-in-out;
   -moz-transition: transform .35s ease-in-out;
   -o-transition: transform .35s ease-in-out;
   transition: transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
    height: 12px;
    visibility: hidden;
    background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
    top: -12px;    
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
    opacity: 0.9;
}


/* define bootstrap 5 columns */

.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-1-5 {
    width: 20%;
    float: left;
}

@media (min-width: 576px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 768px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-lg-1-5 {
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 20% !important;
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }

}

@media (min-width: 1200px) {
    .col-xl-1-5 {
        width: 20%;
        float: left;
    }
}

html, body {
   /* overflow-x: hidden;*/
}


.statement::-webkit-scrollbar-track
{
	border-radius: 10px;
}


.statement::-webkit-scrollbar
{
    width: 6px;
}

.statement::-webkit-scrollbar-thumb
{
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}





.scroll-to-top {
    width: 40px;
    height: 40px;
    line-height: 45px;
    z-index: 99;
}

.scroll-to-top:focus,
.scroll-to-top:hover {
    color: white;
}

/*AK -2rem*/
.scroll-to-top img {
    top: 1rem;
    position: relative;
}

.navbar-underline {
    border-bottom: 2px solid #BFBFBF;
}

.navbar-nav-inline {
    display: inline-block;
}

.left {
    float: left;
}

.hide {
    display: none;
}

.right {
    float: right;
}

.purple {
    color: #48458e;
}

.font25 {
    font-size: 25px;
}

#Chinesebtn {
    margin-top: 8px;
    padding-right: 15px;
    border-right: 2px solid #c1c1c1;
}

#Englishbtn:hover {
    color: #c1c1c1;
}

.navbar-nav-inline a {
    color: #c1c1c1;
}

.navbar-nav-inline a.active {
    color: #48458e;
}

.arrow-down {
    position: relative;
    top: 2rem;
    left: -1rem;
}

.card-chose-display{
    display: inline;
}




@media Screen and (max-width: 992px) {
    .category-move{
        position: relative;
        left: 16%;
        /*AK: align category icon with text*/
	    text-align: center;
	    align-content: center;
	    align-items: center;
    }

    #navbar--1{
        display: none;
    }

    .card-check {
        top: -1rem !important;
        left: 83% !important;
    }

    .arrow-down {
        top: 1rem;
    }
    .mobile-border{
        border-radius: 6px;
        border: 1px solid #48458e;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: left;
    }
}



.card-title {
    font-size: 2vw;
}

@media Screen and (max-width: 768px) {
    .card-title {
        font-size: 3 vw;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
}

.text-center {
    text-align: center;
}

.credit-card-category {
    background-color: #eef0fd;
    height: 100%;
    border-radius: 10px;
}

.credit-card-category-option-img {
    width: 43px;
    height: 50px;
    /*margin-left: 8px;*/
}

.JAL-Mobile-check{
    display: none !important;
}

#credit-card-img-4 {
    margin: 0;
}

.credit-card-category-p {
    margin-top: 8px;
}

.inlineflex {
    display: inline-flex;
}

.accordionpic {
    height: 29px;
}

.m-auto {
    margin: auto;
}

.bg-purple {
    background-color: #eef0fd !important;
}

.bg-deeppurple {
    background-color: #48458e;
}

.detail-btn {
    padding: 2px;
    border-radius: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
}

.font-border {
    font-weight: bold;
}

.iserror {
    color: #C31F59 !important;
}

.iserror-border-b {
    border-bottom-color: #C31F59 !important;
}

/*AK: 20180703*/
.iserror-border-all {
    border-color: #C31F59 !important;
}

.errorMSG {
    display: none;
}

.credit-card {
    width: 50%;
}

.p-relative {
    position: relative;
}

.navbar .icon{
    background-image: url("../image/side-Menu.svg");    
}

.navbar-light .navbar-toggler {
    border-color: #fff !important;
}

.icon{
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.p-absolute {
    position: absolute;
}

.divRecommend {
    padding: 0;
    margin: 0;
    list-style: none;
}

.creditcard .pic {
    width: 90%;
    margin: 0 auto 10px;
}

.creditcard .pic img {
    width: 100%;
    vertical-align: middle;
    border: 0;
}

/*AK: 20180703*/
.creditcard .title {
    font-weight: 400;
    color: #2a2a2a;
    width: 100%;
    /*height: 12%;*/
    font-size: 14px;
    margin-bottom: 10px;
}

.block {
    display: block;
}

.center {
    margin-left: auto;
    margin-right: auto;
}

/*accordion head animation*/

.card {
    border: none !important;
}

.importantborder {
    border: 1px solid #48458E !important;
    border-radius: 10px !important;
}

.border-radius {
    border-radius: 30px !important;
}

.accordicon {
    margin-top: 18px;
    -moz-user-select: none;
    /* for Firefox */
    -webkit-user-select: none;
    /* for Chrome */
}

#heading1 {
    transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    -o-transition: 1s;
}

#heading1[aria-expanded="true"] {
    background-color: #fff !important;
}

.headingExpanded {
	background-color: #fff !important;
}

#heading2{
    transition: 1s
}

#heading2[aria-expanded="true"] {
    background-color: #fff !important;
}

#heading3 {
    transition: 1s
}

#heading3[aria-expanded="true"] {
    background-color: #fff !important;
}

#heading4 {
    transition: 1s
}

#heading4[aria-expanded="true"] {
    background-color: #fff !important;
}

#heading5 {
    transition: 1s
}

#heading5[aria-expanded="true"] {
    background-color: #fff !important;
}

/* END accordion head animation*/

/* application page */

.alert-text {
    background-color: #48458e;
    font-size: 1rem;
    color: white;
    border-radius: 3px;
    padding: 7px;
}

.f1 {
    background: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.f1-steps {
    position: relative;
    margin-top: 20px;
}

.f1-progress {
    position: absolute;
    top: 24px;
    left: 12px;
    width: 87%;
    height: 2px;
    background: #c1c1c1;
}

.f1-progress-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    background: #f7941d;
    width: 0%;
}

.f1-step {
    position: relative;
    float: left;
    width: 33.333333%;
    padding: 0 5px;
}

.f1-step-icon {
    position: relative;
    z-index: 3;
    text-align: center;
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
    margin-top: 4px;
    background: #fff;
    font-size: 16px;
    color: #c1c1c1;
    line-height: 40px;
    border: 1px solid #c1c1c1;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.f1-step.activated .f1-step-icon {
    background: #fff;
    color: #fff;
    border: 1px solid #f7941d;
    color: #f7941d;
    line-height: 38px;
}

.f1-step.active .f1-step-icon {
    color: #fff;
    width: 2em;
    height: 2em;
    margin-top: 0;
    background: #f7941d;
    border: 1px solid #f7941d;
    font-size: 22px;
    line-height: 48px;
}

.label-color {
    color: #2D3E4F;
    font-size: 1rem;
}

.detail-layout{
    color:white !important;
    width:38%;
    text-decoration: none;
}

.detail-layout:hover{
    color:#fff;
    text-decoration:none;
}



.mui-select select {
    background-image: url("../image/cd-down-icon.svg") !important;
    width: 86% !important;
    color: #c1c1c1   !important;

}

.mui-select select:focus {
    border-width: 1px !important;
    border-color: rgba(0, 0, 0, .26) !important;
}

.label-form {
    padding-top: calc(1.2rem + 1px);
    color: #2D3E4F;
    font-size: 1rem;
    line-height: 1.5;
    position: relative;
}

.label-nation {
    left: 10px;
}

.nation-input {
    width: 86%;
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    color: black;
    white-space: nowrap;
    text-wrap-mode: wrap;
}

input[type="checkbox"]+label span {
    display: inline-block;
    width: 23px;
    height: 23px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #c1c1c1;
    border-radius: 6px;
    cursor: pointer;
}

input[type="checkbox"]:checked+label span {
    border: 1px solid #c1c1c1;
    border-radius: 3px;
    background: url("../image/tick-01.svg");
}

.label-ID {
    left: -5.2rem;
}

.label-married {
    left: -2.2rem;
}

.label-location {
    left: -2.2rem;
}

.label-years-live {
    left: -5rem;
}

.live-input-years {
    float: left;
    width: 37%;
    margin-right: 5%;
}

.bank-select {
    left: -1rem;
}

.live-with-position {
    position: relative;
    left: -4.7rem;
    top: 1.3rem;
    padding: 0;
}

.date-semicolon {
    font-size: 1.5rem;
    position: relative;
    top: 1rem;
    left: 1rem;
}

.house-phone {
    left: -3rem;
}

.JAL-number {
    left: -11.3rem;
}

.email-address {
    left: -2.7rem;
}

.live-with {
    position: relative;
    left: -2.7rem;
}

.step3-p {
    width: 75%; /*66*/
    position: relative;
    right: 20%;
}

.working-conditions {
    left: -3.2rem;
}

.job-titles {
    left: -1rem;
}

.month-unit {
    position: relative;
    top: -1.5rem;
    left: 15.2rem;
}

.region {
    left: -0.5rem;
}

#year-select-id {
    width: 100% !important;
    left: -1.3rem;
    position: relative;
}

#inside-phone {
    position: relative;
    left: 1.6rem;
}


.lang-label{
    position: relative;
    left: 12%;
}

.lang-label p{
    position: relative;
    left: 1%;
    font-size: 1.3em;
}

.lang-chose{
    position:relative;
    left:73%;
    top: -0.35em;
}




@media (min-width: 768px) and (max-width: 992px) {
    .back-btn-style a{
       padding: 13px 20% !important;
    }
    .continue-btn-style a{
        padding: 13px 20% !important;
     }
 

    .btn-move{
        position: relative !important;
        left: 7% !important;
    }

    .btn-cancel {
        padding: 13px 14% !important;
    }

    .btn-previous-1{
        padding: 13px 14% !important;                
    }

    .btn-previous-2{
        padding: 13px 14% !important;        
    }

	/*AK 18%*/
    .btn-previous-3{
        padding: 13px 14% !important;        
    }

	/*AK 14px 17% %*/
    .btn-submit {
        padding: 13px 14% !important;
    }

	/*AK 14px 13% %*/
    .btn-next {
        padding: 13px 14% !important;
    }


    .live-with-position {
        top: 1.3rem;
        left: 0rem;
    }
    #live-check-2 {
        left: -1rem;
    }
    #live-check-3 {
        left: -2rem;
    }

    #live-check-5 {
        left: -1rem;
    }
    .month-unit {
        left: 9.3rem;
    }
    #year-select-id{
        left: 0rem;
        width: 86% !important;
    }
    #month-semicolon {
        left: -0.5rem;
    }
    #year-semicolon {
        left: -1.4rem;
    }
    #inside-phone {
        left: 0;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: left;
    }
    
    .resAddr {
	    top: -1rem;
	}
}

@media (min-width: 576px) and (max-width: 768px) {
    .btn-move{
        position: relative !important;
        left: -16% !important;
    }

	/*AK 13px 37.5% %*/
    .btn-cancel {
        display: block;
        padding: 13px 39.8% !important;
        position: relative;
        top: 5em;
    }

	/*AK 14px 30% %*/
    .btn-previous-1{  
        left: -5%;
        display: block;
        padding: 13px 40% !important;
        position: relative;
    }

	/*AK 14px 36.5% %*/
    .btn-previous-2{
        white-space: nowrap;        
        display: block;
        padding: 13px 40% !important;
        position: relative;
        top: 5em;
    }
    
    /*AK 14px 53.5% %*/
    .btn-previous-3{
        margin-top: 0rem !important;
        margin-right: 0rem !important;       
        white-space: nowrap;        
        display: block;
        padding: 13px 40% !important;
        position: relative;
        top: 5em;
        left: -13%;
    }

	/*AK 13px 40% %*/
    .btn-next {
        white-space: nowrap;        
        display: block;
        padding: 13px 40% !important;
        position: relative;
        top: -3em;
    }

	/*AK 13px 40% %*/
    .btn-submit {
        margin-top: 0rem !important;
        margin-left: 0rem !important ;        
        white-space: nowrap;        
        display: block;
        padding: 13px 40% !important;
        position: relative;
        top: -3em;
        left: -13%;
        
    }

    .lang-label{
        position: relative;
        left: 5%;
    }
    
    /*AK: 72% original*/
    .lang-chose{
        position:relative;
        left:62%;
        top: -0.35em;
    }

    .month-unit {
        left: 8rem;
    }
    .live-with-position {
        top: 1.3rem;
        left: 0rem;
    }
    .mobile-hint {
        position: relative;
        top: 1rem;
    }
    #bank {
        width: 86% !important;
    }

    #month-semicolon {
        left: -0.8rem;
    }
    #year-semicolon {
        left: -2.4rem;
    }
    #year-select-id {
        width: 100% !important;
        left: 0rem;
    }
    .arrow-down {
        top: 2rem;
    }
    .card-title {
        font-size: 4vw;
    }
    #card-card-pic {
        width: 20% !important;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    #card-card-pic {
    	vertical-align: -webkit-baseline-middle;
	}
}


@media Screen and (max-width:433px){
    .scroll-to-top img {
        top: 0.4rem;
        position: relative;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    /*AK*/
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 63%;
	}

}

@media Screen and (max-width: 368px) {
    .step3-p {
        width: 60%;
        right: 2px;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    /*AK*/
    #live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 62%;
	}
}

@media (min-width: 368px) and (max-width: 576px) {
    .step3-p {
        width: 60%;
        right: 2px;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
}

@media (min-width: 322px) and (max-width: 415px) { /*I5 - I8 plus*/

    .card-check {
        top: -0.6rem !important;
        left: 76% !important;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
}

@media (min-width: 376px) and (max-width: 576px) { /*I5 - I8 plus*/
    /*AK: -13% original*/
    #step3-p{
        position: relative;
        left: -5%;
    }
    #month-semicolon {
        left: -0.3rem;
    }
    #year-semicolon {
        left: -1.5rem;
    }
    #year-select-id {
        width: 100% !important;
        left: -4rem;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    /*AK*/
    #live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 62.9%;
	}

}


@media (min-width: 322px) and (max-width: 376px) { /*I5 - I8*/
    
    /*AK: -9% original*/
    #step3-p{
        position: relative;
        /*left: -20%;*/
    }
    
        
    #step2-p{
	    left: -10%;
	    position: relative;
   	}
   	
   	/*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    /*AK*/
    #live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 62.3%;
	}
    
}



@media Screen and (max-width: 321px) {             /* iphone 5 */
    .direct-sales-i5-position{
        left: -10%;
        position: relative; 
    }
    #month-semicolon {
        left: 0rem;
    }

    #year-semicolon {
        left: -1.3rem;
    }
    #year-select-id {
        width: 150% !important;
        left: -3.5rem;
    }


    .card-check {
        top: -0.5rem !important;
        left: 73% !important;
    }

    .lang-label{
        position: relative;
        left: 2%;
    }

	/*AK: 34% original*/
    .lang-chose{
        position:relative;
        left:34%;
        top: -0.3em;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
    
    /*AK*/
    #live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 61.5%;
	}
}

@media (min-width: 321px)and (max-width: 376px) {     /* iphoneX  */

    .lang-label{
        position: relative;
        left: 2%;
    }

	/*AK: 62% original*/
    .lang-chose{
        position:relative;
        left:42%;
        top: -0.35em;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
}

@media (min-width: 377px) and (max-width: 575px) {     /* iphone678 */
    .lang-label{
        position: relative;
        left: 2%;
    }
    
    /*AK: 68% original*/
    .lang-chose{
        position:relative;
        left:58%;
        top: -0.35em;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
}

@media Screen and (max-width: 576px) {
    .tab1,.tab2{
        padding-left: 1em;
    }
    .JAL-desktop-check{
        display: none !important;
    }
    .JAL-Mobile-check{
        display: block !important;
    }
    
    /*20190516*/
    .AMC{
        display: none !important;
    }
    
    /*AK*/
    /*#cellphoneinput{
        border: 1px solid rgba(0,0,0,.26) !important;
    }
    #emailaddressinput{
        border: 1px solid rgba(0,0,0,.26) !important;        
    }*/


    .detail-layout {
        color: white !important;
        width: 50%;
        text-decoration: none;
    }

    .title-height{
        min-height: 62px; /*42px*/
    }

    .card-chose-display{
        display: block;
    }   

    .card-pic{
        left: 35%;
        position: relative;
    }

    .card-pic01{
        left: 6% !important;
        position: relative;
        width: 20% !important;
    }
    .card-title01{
        position: relative;
        left: 6% !important;
    }


    .card-title{
        position: relative;
        left: 29%;
    }
    .arrow-down{
        position: relative;
        top: -2.5em;
        left: -26%;
    }
    .btn-move{
        position: relative !important;
        left: -16% !important;
    }

	/*AK  13px 35.5%  %*/
    .btn-cancel {
        white-space: nowrap;
        display: block;
        padding: 14px 35.8% !important;
        position: relative;
        top: 5em;
    }

	/*AK  13px 28%  %*/
    .btn-previous-1{
        white-space: nowrap;
        display: block;
        padding: 14px 36% !important;
        position: relative;
        left: -5%;
    }

	/*AK  13px 34%  %*/
    .btn-previous-2{
        white-space: nowrap;
        display: block;
        padding: 14px 36% !important;
        position: relative;
        top: 5em;
    }
    
    /*AK  13px 41%   %*/
    .btn-previous-3{
        margin-top: 0rem !important;
        margin-left: 0rem !important ;  
        white-space: nowrap;
        display: block;
        padding: 14px 36% !important;
        position: relative;
        top: 5em;
    }

	/*AK  14px 42%  %*/
    .btn-next {
        white-space: nowrap;
        display: block;
        padding: 14px 36% !important;
        position: relative;
        top: -3em;
    }

	/*AK  14px 42%  %*/
    .btn-submit{
        margin-top: 0rem !important;
        margin-left: 0rem !important ;  
        white-space: nowrap;
        display: block;
        padding: 14px 36% !important;
        position: relative;
        top: -3em;
    }


    .name-move{
        position: relative;
        left: 4%;
    }

    .name-input {
        float: left;
        width: 86%;
    }

    .JAL-number {
        left: 0rem;
    }
    .career {
        right: -3%;
        position: relative;
    }
    .job-titles {
        left: 0rem;
    }
    #inside-phone {
        left: -0.4rem;
    }
    .region {
        left: 0rem;
    }
    .working-conditions {
        left: 0;
    }
    .live-with {
        left: 0rem;
    }
    .bank-select {
        left: 0rem !important;
    }
    .email-address {
        left: 0rem;
    }
    .mobile-hint {
        position: relative;
        top: 1rem;
    }
    .live-with-position {
        top: 1.3rem;
        left: 0rem;
    }
    .card-title {
        font-size: 4vw;
    }
    #card-card-pic {
        width: 30% !important;
    }
    .label-married {
        left: 0;
    }
    .label-ID {
        left: 0;
    }
    .label-birthday {
        left: 0 !important;
    }
    .label-nation {
        left: 0;
    }
    .label-location {
        left: 0;
    }
    .label-years-live {
        left: 0;
    }
    .month-unit {
        left: 103%;
    }
    .label-people-count {
        left: 0 !important;
    }
    .label-house-style {
        left: 0 !important;
    }
    .house-phone {
        left: 0;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: center;
    }
}

@media (min-width: 1200px){
    .Residential-Address-eng{
        top: -1rem;
    }
    
    /*AK: -1.5rem original*/
    .YaA-eng{
        top: -0.8rem;
    }
    .mobile-eng{
        top: 1.5rem;
    }
    .YaA-w{
        width:89%;
    }




    .working-conditions-eng{
        left: -3.2rem;
    }
    .company-name-eng{
        left: -5rem;
    }
    .Company-Address-eng{
        left: -4.6rem;
    }
    .region-eng{
        left:3rem;
    }
    .company-phone-eng{
        left: -4.6rem;
    }
    .job-titles-eng{
        left: 0.3rem;
    }
    .YoS-eng{
        left: -4.6rem;        
    }
    .Monthly-Income-eng{
        left: -3.5rem;
    }
    .Name-of-University-eng{
        left: -5rem; 
    }

    .people-unit-eng{
        top: 1.3rem;
        left: -4rem;
    }
    
    .people-unit{
        position: relative;
	    top: -1.5rem;
	    left: 90%;
    }
    
        

    .nation-eng{
        left: 0.6rem;
    }
    
    /*AK: 89% original*/
    .month-unit-eng{
        position: relative;
        top: -1.5rem;
        left: 80%;
    }


    .btn-next-eng{
        display: inline-block;
        color: #fff !important;
        background-color: #48458e;
        padding: 14px 17%;
        border-radius: 5px;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .Residential-Address-eng{
        top: -1rem;
    }
    .YaA-eng{
        top: -1.5rem;
    }
    .CCB-eng{
        top: -0.5rem;        
    }
    .mobile-eng{
        top: 1.5rem;
    }
    .ToR-eng{
        top: -1rem;        
    }
    .YaA-w{
        width:89%;
    }


    .house-phone-eng{
        left: -2.2rem;
    }
    .mobile-phone-eng{
        left: 0.4rem;
    }
    .email-address-eng{
        left: -1.2rem;
    }
    .Card-Collection-eng{
        left: -6.9rem;        
    }
    .people-unit-eng{
        top: 1.3rem;
        left: -4rem;
    }
    .people-unit{
        position: relative;
	    top: -1.5rem;
	    left: 88%;
    }

    .working-conditions-eng{
        left: -3.2rem;
    }
    .company-name-eng{
        left: -5rem;
    }
    .Company-Address-eng{
        left: -4.6rem;
    }
    .region-eng{
        left:3rem;
    }
    .nation-eng{
        left: 0.6rem;
    }
    .company-phone-eng{
        left: -4.6rem;
    }
    .job-titles-eng{
        left: 0.3rem;
    }
    .YoS-eng{
        left: -4.6rem;        
    }
    .Monthly-Income-eng{
        left: -3.5rem;
    }
    .Name-of-University-eng{
        left: -5rem; 
    }
	
	/*AK: 87% original*/
    .month-unit-eng{
        position: relative;
        top: -1.5rem;
        left: 80%;
    }

    .btn-next-eng{
        display: inline-block;
        color: #fff !important;
        background-color: #48458e;
        padding: 14px 17%;
        border-radius: 5px;
    }
    
    /*AK*/
    #card-chose-name {
    	text-align: left;
    }
    
    .categoryIcon {
		align-items: baseline !important;
		justify-content: inherit !important;
		display: block !important;
		text-align: center;
	}
}
@media (min-width: 768px) and (max-width: 991px) {

    
    .Residential-Address-eng{
        top: -1rem;
    }
    .YaA-eng{
        top: -1.5rem;
    }
    .CCB-eng{
        top: -1rem;        
    }
    .mobile-eng{
        top: 1.5rem;
    }
    .ToR-eng{
        top: -1rem;        
    }
    .MS-eng{
        top: -0.6rem;
    }
    .telephone-eng{
        top: 0rem;
    }
    .YaA-w{
        width:89%;
    }

    .working-conditions-eng{
        left: -4rem;
    }
    .company-name-eng{
        left: -5.7rem;
    }
    .Company-Address-eng{
        left: -5.4rem;
    }
    .region-eng{
        left:2.2rem;
    }
    .company-phone-eng{
        left: -5.2rem;
    }
    .job-titles-eng{
        left: -0.4rem;
    }
    .YoS-eng{
        left: -5.3rem;        
    }
    .Monthly-Income-eng{
        left: -4.2rem;
    }
    .Name-of-University-eng{
        left: -5,8rem; 
    }

    .Salutation-eng{
        left: -1rem;
    } 
    .name-eng{
        left: 1rem;
    }
    .nation-eng{
        left: -0.5rem;           
    }
    .birthday-eng{
        left: -2.6rem;        
    }
    .HKID-eng{
        left: -0.7rem;
    }
    .married-eng{
        left: -3.2rem;
    }
    .location-eng{
        left: -6rem;
    }
    .Area-eng{
        left: 2.5rem;
    }
    .years-live-eng{
        left: -5.5rem;
    }
    .live-with-eng{
        left: -0.7rem;
    }
    .people-count-eng{
        left: 2rem;
    }
    .house-style-eng{
        left: -4.7rem;
    }
    .house-phone-eng{
        left: -3.3rem;
    }
    .mobile-phone-eng{
        left: -0.7rem;
    }
    .email-address-eng{
        left: -2.3rem;
    }
    .Card-Collection-eng{
        left: -4rem;     
        top: -1.3rem;   
    }
    .over-eng{
        left: 1rem;
        position: relative;
    }
    
    /*AK: 82% original*/
    .month-unit-eng{
        top: -1.6rem;
        position: relative;
        left: 73%;
    }
    .people-unit-eng{
        left: -3rem;
        top: 1rem;
    }
    
    .people-unit{
        position: relative;
	    top: -1.5rem;
	    left: 80%;
    }

    #month-semicolon-eng{
        position: relative;
        left: -1.5rem;
    }
    #year-semicolon-eng{
        position: relative;
        left: -0.2rem;
    }
    .btn-next-eng{
        display: inline-block;
        color: #fff !important;
        background-color: #48458e;
        padding: 14px 16%;
        border-radius: 5px;
    }

	/*AK*/
    #card-chose-name {
    	text-align: left;
    }
	
	.totalPpl {
	    margin-top: 2rem;
	}
	
	.typeRes {
	    top: -1rem;
	}

}

@media (min-width: 576px) and (max-width: 768px) {



    .mobile-eng{
        top: 1.5rem;
    }
    .ToR-eng{
        top: -1rem;        
    }
    .MS-eng{
        top: -0.6rem;
    }

    .DoB-eng{
        top: -1rem;                
    }
    .YaA-w{
        width:93%;
    }
    .EA-eng{
        top: 1rem;
    }


	/*AK*/
    #card-chose-name {
    	text-align: center;
    	vertical-align: -webkit-baseline-middle;
    	vertical-align: middle;
    }


    /*AK: 10.5rem original*/
    .month-unit-eng{
        top: -1.6rem;
        position: relative;
        left: 70%;
    }
    #month-semicolon-eng{
        position: relative;
        left: -2rem;
    }
    #year-semicolon-eng{
        position: relative;
        left: -0.6rem;
    }

    .people-unit-eng{
        left: -2rem;
        top: 1rem;
    }
    
    .people-unit{
        position: relative;
	    top: -1.5rem;
	    left: 80%;
    }
    
    
    
    .btn-next-eng{
        display: inline-block;
        color: #fff !important;
        background-color: #48458e;
        border-radius: 5px;
        white-space: nowrap;
        padding: 14px 39% !important;
        position: relative;
        top: -3em;
    }
    
    .emailAddr {
	    top: 0rem;
	}
	
	.totalPpl {
	    margin-top: 1rem;
	}
	
	.typeRes {
	    top: -1rem;
	}
}

@media Screen and (max-width: 576px) {

    /*#live-check-eng-3{
        position: relative;
        top: 3.5rem;
        right: 63%;  
	    top: 3.8rem;
	    right: 63.7%;            
    }*/



    .mobile-eng{
        top: 1.5rem;
    }
    .MS-eng{
        top: -0.6rem;
    }
    .DoB-eng{
        top: -1rem;                
    }
    .YaA-w{
        width:93%;
    }
    .EA-eng{
        top: 1rem;
    }

	/*AK*/
    #card-chose-name {
    	text-align: center;
    }
	
	/*AK: 74% original*/
    .month-unit-eng{
        top: -1.5rem;
        position: relative;
        left: 50%;
    }

    #month-semicolon-eng{
        position: relative;
        left: -1.2rem;
    }
    #year-semicolon-eng{
        position: relative;
        left: -0.1rem;
    }
    .btn-next-eng{
        display: inline-block;
        color: #fff !important;
        background-color: #48458e;
        border-radius: 5px;
        white-space: nowrap;
        padding: 14px 37% !important;
        position: relative;
        top: -3em;
    }
    .people-unit-eng{
        left: -20%;
        top: 1rem;
    }
    
    .people-unit{
	    position: relative;
	    top: -1.5rem;
	    left: 75%;
    }
        
    #BD-DD{
        padding: 0 !important;
    }
    #BD-MM{
        padding: 0 !important;        
    }
    #year-select-id-eng{
        padding: 0 !important;                
    }
    
    .emailAddr {
	    top: 0rem;
	}
	
	.totalPpl {
	    margin-top: 1rem;
	}
	
	.typeRes {
	    top: -1rem;
	}
}



@media (min-width: 992px){

	/*AK*/
    #card-chose-name {
    	text-align: left;
    }

    .detail-layout{
        width:46%;
    }
    .title-height{
        /*min-height: 42px;*/
        min-height: 62px;
    }

    .btn-move{
        position: relative !important;
        left: 5% !important;
    }

    #navbar--2{
        display:none;
    }


    #live-check-2 {
        left: -1rem;
    }
    #live-check-3 {
        left: -2rem;
    }
    #live-check-4 {
        left: -1rem;
    }
    #live-check-5 {
        left: -3rem;
    }

    .navENG{
        position: relative;
        left: -3.5%;
    }

    .name-input {
        float: left;
        width: 86%;
    }

    .name-move{
        padding-left: 0;
        position: relative;
        left: -5%;
    }
}



@media (min-width: 992px) and (max-width: 1200px) { 

    .month-unit {
        left: 102%;
    }
    #year-semicolon {
        left: 1rem;
    }
    
    /*AK*/
	.people-unit {
	    position: relative;
	    top: -1.5rem;
	    left: 88%;
	}
	
	/*AK*/
    #card-chose-name {
    	text-align: left;
    }
    
    .categoryIcon {
		align-items: baseline !important;
		justify-content: inherit !important;
		display: block !important;
		text-align: center;
	}
}

.label-people-count {
    left: -2.7rem;
}

.label-birthday {
    position: relative;
    left: -2rem;
}

.count-input {
    float: left;
    width: 85%;
}

.count-input-w86 {
    float: left;
    width: 86%;
}

.label-house-style {
    left: -2.7rem;
}



.active-p-position{
    top: -3px;
    position: relative;
}

.spouse-title {
    color: #48458e !important;
    background-color: #eef0fd !important;
    width: 100%;
    padding: 20px;
    font-size: 1.5rem;
    font-weight: bold;
}

.direct-sales-block {
    width: 100%;
    padding: 1rem;
    border: 1px solid #c1c1c1;
    border-radius: 5px;
}

.btn-cancel {
    display: inline-block;
    color: #48458e !important;
    border: 1px solid #48458e;
    padding: 13px 16%;
    border-radius: 5px;
}

.card-check {
    width: 15% ;
    z-index: 1001 ;
    position: absolute ;
    top: -0.7rem ;
    left: 78%;
}

.btn-next {
    display: inline-block;    
    color: #fff !important;
    background-color: #48458e;
    padding: 14px 15%;
    border-radius: 5px;
}

.btn-submit{
    margin-top: 0.5rem ;
    margin-left: 0.25rem;   
    display: inline-block;    
    color: #fff !important;
    background-color: #48458e;
    padding: 14px 19%;
    border-radius: 5px;
}

.card-chose {
    color: #48458e !important;
    background-color: #eef0fd !important;
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    font-size: 2em;
}

.card-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-animation-name: fadeIn;
    /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
}

.card-modal-content {
    margin: 0 auto;
    width: 80%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}

/* Add Animation */

@-webkit-keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

@keyframes slideIn {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

/*---------------------*/

.tab1 {
    display: block;
}

.tab2 {
    display: none;
}

.tab3 {
    display: none;
}

#have-jobs {
    display: none;
}

#student {
    display: none;
}

#have-married {
    display: none;
}

#btns {
    display: none;
}

#JAL {
    display: none;
}

#one-piece {
    display: none;
}

#JAL-notice {
    display: none;
}

#JAL-form {
    display: none;
}

.pic-active {
    border: 7px solid #b3325a;
    border-radius: 8px;
}

.title-active {
    top: -0.3rem;
    position: relative;
}

.card-btn-active {
    position: relative;
    top: -0.35rem;
}

.btn-previous-1 {
    display: inline-block;    
    color: #fff !important;
    background-color: #48458e;
    padding: 13px 10%;
    border-radius: 5px;
}

.btn-previous-2 {
    display: inline-block;    
    color: #48458e !important;
    border: 1px solid #48458e;
    padding: 13px 16%;
    border-radius: 5px;
}

.btn-previous-3{
    margin-top: 0.5rem;
    margin-right: .25rem;
    display: inline-block;    
    color: #48458e !important;
    border: 1px solid #48458e;
    padding: 13px 20%;
    border-radius: 5px;
}

.statement {
    border: 1px solid #bfbfbf;
    padding: 1rem;
    border-radius: 15px;
}

.confirm {
    background-color: #f3f3f3;
    padding: 1rem;
    border-radius: 10px;
}

.confirm-input {
    height: 2.5rem;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
}


.mui-select__menu {
    z-index: 2000 !important;
}

.mui-textfield input:focus {
    color: #48458e !important;
    border-color: #48458e !important;
    border-width: 1px !important;
}

.mui-textfield textarea:focus {
    color: #48458e !important;
    border-color: #48458e !important;
    border-width: 1px !important;
}

.mui-select__menu div:not(.mui-optgroup__label):not(.mui--is-disabled):hover {
    background-color: #eef0fd !important;
    color: #48458e !important;
    font-weight: bold;
}

.mui-select__menu div.mui--is-selected {
    background-color: #fff !important;
}

.mui-select:focus select {
    border-color: #48458e !important;
}

.grow-wrap {
  display: grid;
}
.grow-wrap::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
}
.grow-wrap > textarea {
  resize: none;
  overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
  border: 1px solid rgba(0,0,0,.26);
  padding: 0.8rem !important;
  font: inherit;
  grid-area: 1 / 1 / 2 / 2;
}

.iserror > textarea {
  border: 1px solid #C31F59 !important;
}

@media (max-width: 576px) and (min-width: 542px){
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 63.8%;
	}
}

@media (max-width: 541px) and (min-width: 490px){
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 63.5%;
	}
}

@media (max-width: 489px) and (min-width: 460px){
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 63.3%;
	}
}

@media (max-width: 459px) and (min-width: 430px){
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 63.1%;
	}
}

@media (max-width: 429px) and (min-width: 400px){
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 62.8%;
	}
}

@media (max-width: 399px) and (min-width: 376px){
	#live-check-eng-3 {
	    position: relative;
	    top: 3.8rem;
	    right: 62.5%;
	}
}