/*
Name : style.css
Type : Default Style
*/


/* FONT LOAD
----------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Sansita:wght@200;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap');


/* SKELTON STRUCTURE
----------------------------------*/
body {
  	font-family: 'Montserrat', sans-serif;
  	font-size: 13px;
	overflow: hidden;
	background-color: #34CBC2;
	/*background-image: linear-gradient(90deg, #3EBBB4, #34CBC2);*/
}
h1, h2, h3, h4, h5 {
	margin: 0;
	padding: 0;
}
h1 {
	font-size: 24px;
	margin-bottom: 10px;
}
ul {
	margin: 0;
	padding: 0;
}
a:focus {
	outline: none;
}
a:hover {
	text-decoration: none;
}
textarea {
   resize: none;
}
audio, canvas, progress, video {
	display: inline;
	width: 100%;
}
*:focus {
    outline: 0 !important;
}
/*img {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	margin: 0 auto;
}
.img-reset {
	width: inherit;
	height: inherit;
	background-size: auto;
	margin: inherit;
}*/
.no-bg {
	background: none !important;
}


/* MARGIN PADDING DEFAULT
----------------------------------*/
.no-margin {
	margin: 0 !important;
}
.no-ml {
	margin-left: 0 !important;
}
.no-mr {
	margin-right: 0 !important;
}
.no-mt {
	margin-top: 0 !important;
}
.no-mb {
	margin-bottom: 0 !important;
}
.no-padding {
	padding: 0 !important;
}
.no-pl {
	padding-left: 0 !important;
}
.no-pr {
	padding-right: 0 !important;
}
.no-pt {
	padding-top: 0 !important;
}
.no-pb {
	padding-bottom: 0 !important;
}


/* HEADING TAG STYLE
----------------------------------*/
h1 {
	font-family: 'Sansita', sans-serif;
	font-weight: 700;
	font-size: 72px;
	color: #F1F454;
}
h1 span {
	font-size: 42px;
	color: #000;
}


/* BUTTON THEMES STYLE
----------------------------------*/
.btn {
	border-radius: 0;
	-webkit-appearance: none;
	-webkit-transition: background-color 0.2s linear;
	-moz-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
.btn-grey {
	font-size: 20px;
	font-weight: 700;
	border-radius: 20px;
	background: #DFDFDF;
	color: #898989;
	height: 41px;
	width: 130px;
}
.btn-grey:hover {
	background: linear-gradient(180deg, #FAAE3C 0%, #F3BC2D 100%);
	color: #fff;
	border: 1px solid;
}


/* BORDER THEMES STYLE
----------------------------------*/
.no-border {
	border: none !important;
}


/* MAIN WRAPPER STYLE
----------------------------------*/
.main-wrapper {
	padding: 0;
	margin: 0;
}
.container {
	position: relative;
	z-index: 1000;
	width: 1070px;
}


/* ANIMATION STYLE
----------------------------------*/
.fade-up {
  transform: translateY(150px);
  animation: fade-up 1.3s ease forwards;
}
@keyframes fade-up {
  to { transform: translateY(0); }
}
.fade-bottom {
  transform: translateY(-150px);
  animation: fade-bottom 1.3s ease forwards;
}
@keyframes fade-bottom {
  to { transform: translateY(0); }
}
.fade-left {
  transform: translateX(-150px);
  animation: fade-left 1.3s ease forwards;
}
@keyframes fade-left {
  to { transform: translateX(0); }
}
.fade-right {
  transform: translateX(150px);
  animation: fade-right 1.3s ease forwards;
}
@keyframes fade-right {
  to { transform: translateX(0); }
}
.fade-right-inverse {
  transform: translateX(1050px);
  animation: fade-right-inverse 1.3s ease forwards;
}
@keyframes fade-right-inverse {
  to { transform: translateX(450px); }
}

.fade-up-full {
  transform: translateY(0);
  animation: fade-up-full 1.3s ease forwards;
}
@keyframes fade-up-full {
  to { transform: translateY(-1000%); }
}
.fade-bottom-full {
  transform: translateY(0);
  animation: fade-bottom-full 1.3s ease forwards;
}
@keyframes fade-bottom-full {
  to { transform: translateY(300px); }
}


/* PANEL STYLE
----------------------------------*/
.panel,
.panel .bgdot-outside {
	position: relative;
}
.panel {
	background-color: transparent;
}
.panel .bgdot-outside {
	position: fixed;
	width: 100%;
	height: auto;
	top: 0;
}

.panel.bgdot-inside:before,
.panel.bgdot-inside:after,
.panel .bgdot-outside:before,
.panel .bgdot-outside:after {
	content: '';
	position: absolute;
	background-image: url(../images/dot-left.svg);
	background-position: top left;
	background-repeat: no-repeat;
	width: 270px;
	height: 320px;
}
.panel.bgdot-inside:after,
.panel .bgdot-outside:after {
	right: 0;
	background-image: url(../images/dot-right.svg);
	background-position: top right;
}

.panel .bgciti-scape,
.loading .bgciti-scape {
	position: fixed;
	background-image: url(../images/citi-scape.svg);
	background-position: top center;
	background-repeat: repeat-x;
	width: 100%;
	height: 280px;
	bottom: 0;
}


/* CUSTOM PANEL STYLE
----------------------------------*/
.slide1 h1 {
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 5%;
}


/* CONTENT STYLE
----------------------------------*/
.slide2 .content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 907px;
	z-index: 1001;
}
.slide2 .content .wrap:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 103%;
	top: 20px;
	left: -20px;
	padding: 0 12px 0 12px;
	border: 4px dashed #0D605A;
	border-radius: 18px;
}
.slide2 .content .wrap {
	position: absolute;
	top: -70px;
	padding: 60px 60px 20px 60px;
	background-color: #FFFDF7;
	border-radius: 18px;
	-webkit-transition:top 0.8s ease 0.4s;
	transition:top 0.8s ease 0.4s;
}
.slide2 .content .wrap.move {
	top: 100px;
}
.slide2 .content .wrap .shadow {
	background-color: #27A59D;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 10px;
	left: 10px;
	border-radius: 18px;
}
.slide2 .content .wrap p {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: #404040;
	margin-bottom: 25px;
}
.slide2 .content .wrap hr {
	border: 1px solid #E8E1CB;
}
.slide2 .content .wrap p:last-child {
	margin-bottom: 0;
}
.slide2 .content .wrap form {
	position: relative;
	z-index: 1;
}
.slide2 .content .wrap form .input-group {
	width: 90%;
    /* max-width: 580px; */
    margin: 0 auto;
    display: block;
    text-align: center;
}
.slide2 .content .wrap form .input-group-addon {
	font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #fff;
    color: #888;
    border: none;
    padding: 0;
    width: 36px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    left: 70px;
    z-index: 100;
    top: 5px;
    position: absolute;
}
.slide2 .content .wrap form .form-control {
	font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #fff;
    color: #888;
    border: 2px solid #DBDBDB;
    box-sizing: border-box;
    border-radius: 20px;
    height: 41px;
    width: 100%;
    box-shadow: none;
    max-width: 440px;
    float: inherit;
    margin-right: 15px;
    padding-left: 50px;
}
.slide2 .content .wrap form .input-group-addon:focus {
	position: relative;
	left: 20px;
}
.slide2 .content .wrap form .form-control:focus {
	font-size: 20px;
}
#setSalary:valid:focus {
	box-shadow: none;
}
#setSalary:valid + .btn-grey,
#setSalary:valid:focus + .btn-grey {
    background: linear-gradient(180deg, #FAAE3C 0%, #F3BC2D 100%);
    color: #fff;
}


.slide3 .content {
	font-family: 'Sansita', sans-serif;
	font-weight: 700;
	color: #fff;
	margin-top: 60px;
}
.slide3 .content .title {
	font-size: 22px;
}
.slide3 .content .totalSalary {
	font-size: 32px;
    line-height: 32px;
    margin-bottom: 32px;
}
.slide3 .content img {
	display: block;
	margin: 0 auto 30px auto;
}
.slide3 .content .time {
	font-size: 54px;
	line-height: 54px;
	margin-bottom: 15px;
}
.slide3 .content .subtitle {
	font-size: 19px;
}
.slide3 .content .border {
	position: relative;
	height: 80vh;
	border-right: 3px dashed #fff;
	opacity: 0;
}
.slide3 .content .left,
.slide3 .content .right {
	padding: 50px;
}
.slide3 .content .left {
	padding-right: 25px; 
}
.slide3 .content .right {
	padding-left: 25px; 
}


.slide4 .content,
.slide5 .content,
.slide6 .content {
	font-family: 'Sansita', sans-serif;
	font-weight: 700;
	color: #fff;
	margin-top: 30px;
}
.slide4 .content .title,
.slide5 .content .title,
.slide6 .content .title {
	font-size: 53px;
	text-align: center;
}
.slide4 .content .title.move {
	top: 69px !important;
	/*transition: all 1.5s ease 0s;*/
	-webkit-transition:top 0.8s ease 0s;
	transition:top 0.8s ease 0s;
}
.slide4 .content .title.move2 {
	top: 69px !important;
	/*transition: all 1.5s ease 0s;*/
	-webkit-transition:top 0.8s ease 0s;
	transition:top 0.8s ease 0s;
}


.slide5 .content .scane1 {
	position: fixed;
	background-image: url(../images/scane1.svg);
	background-position: top center;
	background-repeat: repeat-x;
	z-index: 100;
	width: 100%;
	height: 285px;
	bottom: -40px;
}
.slide5 .content .scane2 {
	position: fixed;
	background-image: url(../images/scane2.svg);
	background-position: top center;
	background-repeat: repeat-x;
	width: 100%;
	height: 370px;
	bottom: -110px;
}
.slide6 .content .scane3 {
	position: fixed;
	background-image: url(../images/scane3.svg);
	background-position: top center;
	background-repeat: no-repeat;
	width: 380px;
	height: 104px;
	bottom: 0;
	z-index: 1000;
}
.slide5 .content .scane1-wrapper {
	position: relative;
}
.slide5 .content .information1,
.slide6 .content .information2 {
	position: absolute;
	/*left: 15%;*/
	top: 150px;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 12.5075px;
	color: #04334D;
	padding: 15px 30px;
	max-width: 230px;
	z-index: 1000;
	transition: 1s;
}
.slide5 .content .information1 {
	left: 40%;
}
.slide6 .content .information2 {
	left: inherit;
	right: 15%;
}
.slide5 .content .information1 .subtitle,
.slide6 .content .information2 .subtitle {
	font-weight: 700;
	font-size: 20px;
}
.slide5 .content .information1 .point,
.slide6 .content .information2 .point {
	font-size: 46px;
}
.slide5 .content .information1 .point span,
.slide6 .content .information2 .point span {
	font-size: 20px;
}
.slide5 .content .information1 p,
.slide6 .content .information2 p {
	font-family: 'Montserrat', sans-serif;
	font-weight: 200;
	font-size: 11px;
}
.slide6 .content .information2 p.style2 {
	font-size: 7px;
}
.slide5 .content .move {
	transform: translateY(0);
	animation: slideMove 0.5s ease forwards;
}
.slide5 .content .move.no-animation {
	animation: inherit;
	bottom: 0;
}
@keyframes slideMove {
  	to { transform: translateY(-40px); }
}
.slide5 .content .move2 {
	transform: translateY(0);
	animation: slideMove2 0.5s ease forwards;
}
.slide5 .content .move2.no-animation {
	animation: inherit;
	bottom: 0;
}
@keyframes slideMove2 {
  	to { transform: translateY(-110px); }
}
.slide6 .content .or {
	position: absolute;
	left: 50%;
	top: 250px;
	transform: translate(-50%, -50%);	
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 30px;
}

.slide7 .content {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 19px;
	color: #fff;
	margin-top: 60px;
}

.slide7 .content ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.slide7 .content ul > li {
	margin-bottom: 15px;
}

.slide7 .content .footer {
	position: fixed;
	left: 0;
	bottom: 30px;
	width: 100%;
}
.slide7 .content .footer img {
	display: block;
	margin: 0 auto 10px auto;
}
.slide7 .content .footer img.last {
	margin-bottom: 15px;
}

/* OTHER STYLE
----------------------------------*/
/* loading */
.loading {
	display:    none;
	position:   fixed;
	z-index:    10000;
	top:        0;
	left:       0;
	height:     100%;
	width:      100%;
	background: #34CBC2
	            50% 50% 
	            no-repeat;
}
.loading:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(92,102,128,0.9);
}
.loading-wrapper {
	background-color: #fff;
	border-radius: 10px;
	padding: 30px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}
.loading-wrapper img {
	display: block;
	margin: 0 auto;
}

/* socmed */
.socmed {
	list-style: none;
	display: inline-block;
	width: 100%;
}
.socmed > li {
	display: inline-block;
	text-align: center;
	margin: 0 10px !important;
}
.socmed > li > a {
	color: #fff;
	font-size: 16px;
	line-height: 30px;
}
.socmed > li > a:hover {
	color: #f5f5f5;
}

#back-to-top {
	width: 105px;
	height: 50px;
	/*position: fixed;*/
	position: absolute;
	z-index: 100;
	bottom: 210px;
	left: 85%;
	outline: none !important;
	text-align: center;
	color: #333 !important;
	font-size: 22px;
	cursor: pointer;
	text-decoration: none;
}
#back-to-top span {
	font-family: 'Montserrat', sans-serif;
  	font-size: 12px;
  	color: #fff;
}

.navbar-detail{
	position: fixed;
	top: 10px;
	left: 15px;
	z-index: 99;
}