@charset "utf-8";
/* CSS Document */

#headBanner {background:#F5FFFF;padding:0 0px 50px 0px;}

/*--Banner--*/
.bannerBlock {padding:50px 0 0 0;}

.bannerBlock .bannerRight {position:relative;}
.bannerBlock .bannerRight img.homeNewImage {width:65%;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);}
.bannerBlock .bannerRight .bannerRightImageList {width:100%;height:100%;position:absolute;z-index:9;}
.bannerBlock .bannerRight .bannerRightImageList li {position:absolute;z-index:99;border-radius:15px;padding:20px 30px;top:0;left:0;text-align:center;color:#5B5B5B;font-size:18px;transition:.5s;}

.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(1) {top:5%;left:25%;width:200px;}
.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(2) {top:10%;right:15%;left:auto;width:200px;}
.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(3) {top:32%;left:5%;width:200px;}
.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(4) {top:30%;right:5%;left:auto;width:200px;}

.bannerBlock .bannerRight .bannerRightImageList li .check {width:44px;height:44px;text-align:center;border-radius:100%;padding:3px;position:absolute;top:0;left:0;}
.bannerBlock .bannerRight .bannerRightImageList li .check .checkInner {width:38px;height:38px;border-radius:100%;padding:5px;}
.bannerBlock .bannerRight .bannerRightImageList li .check .checkInner img {width:100%;}

.bannerBlock .bannerRight .bannerRightImageList li.orangeBg {background:#FCEEE8;}
.bannerBlock .bannerRight .bannerRightImageList li.orangeBg .check {background:#FBCDB9;top:-10px;left:-10px;}
.bannerBlock .bannerRight .bannerRightImageList li.orangeBg .checkInner {background:#FC5106;}

.bannerBlock .bannerRight .bannerRightImageList li.orangeBg:hover {background:#FFA883;color:#fff;}
.bannerBlock .bannerRight .bannerRightImageList li.orangeBg:hover .check {background:#FF8C5A;}
.bannerBlock .bannerRight .bannerRightImageList li.orangeBg:hover .checkInner {background:#CE3F00;}

.bannerBlock .bannerRight .bannerRightImageList li.purpleBg {background:#DFDFFE;}
.bannerBlock .bannerRight .bannerRightImageList li.purpleBg .check {background:#D5C2F3;top:-10px;left:-10px;}
.bannerBlock .bannerRight .bannerRightImageList li.purpleBg .checkInner {background:#6200F7;}

.bannerBlock .bannerRight .bannerRightImageList li.purpleBg:hover {background:#AEAEFF;color:#fff;}
.bannerBlock .bannerRight .bannerRightImageList li.purpleBg:hover .check {background:#B789FF;}
.bannerBlock .bannerRight .bannerRightImageList li.purpleBg:hover .checkInner {background:#5100CC;}

.bannerBlock .bannerLeft h3 {font-size:33px;font-weight:700;color:#5375E2;margin:0 0 0 0;padding:0;}
.bannerBlock .bannerLeft h3 span {color:#FF7D56;}
.bannerBlock .bannerLeft p {color:#5C616E;font-size:17px;font-weight:400;margin:0;padding:0;}

.bannerBlock .formBlock {box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);padding:25px;border-radius:12px;margin-top:30px;width:100%;float:left;background:#fff;}
.bannerBlock .formBlock h4 {color:#FF7D56;font-size:19px;font-weight:500;margin:0 0 8px 0;padding:0 0 8px 0;font-style:italic;border-bottom:1px solid #FF7D56;display:inline-block;}
.bannerBlock .formBlock h4 .fa {font-size:22px;}
.bannerBlock .formBlock h6 {color:#000;font-size:14px;font-weight:400;margin:0 0 30px 0;padding:0 0 0 0;}
.bannerBlock .formBlock ul li {width:100%;float:left;margin-bottom:2%;}
.bannerBlock .formBlock ul li:nth-of-type(2), .bannerBlock .formBlock ul li:nth-of-type(3) {width:49%;}
.bannerBlock .formBlock ul li:nth-of-type(3) {float:right;}
.bannerBlock .formBlock ul li input,.bannerBlock .formBlock ul li textarea {width:100%;border:1px solid #DADADA;border-radius:12px;padding:18px 12px;color:#707070;font-size:14px;}
.bannerBlock .formBlock ul li input[type=submit] {background:#5375E2;border:0px;padding:18px;color:#fff;font-size:14px;font-weight:500;text-transform:uppercase;width:100%;transition:.5s;}
.bannerBlock .formBlock ul li input[type=submit]:hover {background:#FC5106;}
.bannerBlock .formBlock ul li h6 {color:#5C616E;font-size:15px;margin:10px 0 5px 0;}

.bannerBlock .radioContainer{position:relative;padding-left:25px;margin-bottom:12px;cursor:pointer;font-size:15px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:12px;color:#23305E;}
.bannerBlock .radioContainer input{position:absolute;opacity:0;cursor:pointer}
.bannerBlock .radioContainer .checkmark{position:absolute;top:0;left:0;height:20px;width:20px;background-color:#eee;border-radius:50%}

.bannerBlock .radioContainer:hover input~.checkmark{background-color:#D6CDCD}
.bannerBlock .radioContainer input:checked~.checkmark{background-color:#5375E2}
.bannerBlock .radioContainer .checkmark:after{content:"";position:absolute;display:none}
.bannerBlock .radioContainer input:checked~.checkmark:after{display:block}
.bannerBlock .radioContainer .checkmark:after{top:5px;left:6px;width:9px;height:9px;border-radius:50%;background:#fff}

#worriedFuture {padding:100px 0px;}
#worriedFuture .futureLeft img {width:80%;}
#worriedFuture .futureRight {padding:100px 0 0 0;}
#worriedFuture .futureRight h2 {font-size:40px;font-weight:700;color:#23305E;margin:0 0 0 0;padding:0;}
#worriedFuture .futureRight h2 span {color:#FF7D56;display:block;}
#worriedFuture .futureRight p {color:#707070;font-size:16px;font-weight:400;margin:10px 0 0 0;padding:0;}
#worriedFuture .futureRight a {color:#032D70;font-size:22px;font-weight:600;margin:20px 0 8px 0;padding:0 0 8px 0;font-style:italic;border-bottom:2px solid #6ED2EF;display:inline-block;font-style:italic;transition:.5s;}
#worriedFuture .futureRight a:hover {color:#6ED2EF;}

#careerMistakes {background:#f0fcfc;clip-path:polygon(0 10%, 100% 0, 100% 100%, 0 90%);padding:12rem 0px 10rem 0px;}
#careerMistakes h2 {font-size:35px;font-weight:700;color:#5375E2;margin:0 0 55px 0;padding:0;text-align:center;}

#careerMistakes .timelineInner {display:flex;flex-direction:row;flex-wrap:wrap;}

#careerMistakes .timelineInner .timelineLeft {flex:50%;}
#careerMistakes .timelineInner .timelineLeft li {float:left;position:relative;margin-top:120px;}
#careerMistakes .timelineInner .timelineLeft li:last-child {margin-top:40px;}
#careerMistakes .timelineInner .timelineLeft li:after {content:'';position:absolute;right:0;top:20%;width:0;height:0;border:13px solid transparent;border-left-color:#fff;border-right:0;margin-right:-13px;}
#careerMistakes .timelineInner .timelineLeft li:before {content:'';position:absolute;right:-55px;top:20%;width:22px;height:22px;background:#FF7D56;border:4px solid #fff;border-radius:100%;box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);}

#careerMistakes .timelineInner .timelineRight {flex:50%;position:relative;}
#careerMistakes .timelineInner .timelineRight:before {position:absolute;content:'';width:3px;height:100%;background:#FF7D56;left:0;top:0;}
#careerMistakes .timelineInner .timelineRight li {float:right;position:relative;}
#careerMistakes .timelineInner .timelineRight li:before {content:'';position:absolute;left:0;top:20%;width:0;height:0;border:13px solid transparent;border-right-color:#fff;border-left:0;margin-left:-13px;}
#careerMistakes .timelineInner .timelineRight li:after {content:'';position:absolute;left:-53px;top:20%;width:22px;height:22px;background:#FF7D56;border:4px solid #fff;border-radius:100%;box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);}
#careerMistakes .timelineInner .timelineRight li:nth-of-type(2) {margin:40px 0;}
#careerMistakes .timelineInner ul li {list-style-type:none;width:90%;text-align:center;padding:20px;border-radius:12px;background:#fff;box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);}
#careerMistakes .timelineInner img {height:100px;margin:0 auto;float:none;}
#careerMistakes .timelineInner h5 {font-size:17px;font-weight:600;color:#23305E;margin:20px 0 0 0;padding:0;text-align:center;}

#helpingBlock {padding:100px 0px;}
#helpingBlock h2 {font-size:35px;font-weight:700;color:#5375E2;margin:0 0 55px 0;padding:0;text-align:center;}
#helpingBlock ul li {box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);-moz-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);padding:15px;border-radius:12px;margin-bottom:30px;width:100%;float:left;transition:.5s;}
#helpingBlock ul li:last-child {margin-botom:0px;}
#helpingBlock ul li img {width:23%;float:left;transition:inherit;border:2px solid #fff;border-radius:20px;}
#helpingBlock ul li .helpingDetail {width:68%;margin-left:4%;float:left;}
#helpingBlock ul li .helpingDetail h4 {color:#000000;font-size:17px;position:relative;margin:0 0 8px 0;padding:0;font-weight:500;transition:inherit;}
#helpingBlock ul li .helpingDetail p {color:#707070;font-size:14px;font-weight:400;margin:0;padding:0;}
#helpingBlock .helpingImage {width:100%;margin-top:15%;transition:inherit;}

#helpingBlock ul li:nth-of-type(1):hover {background:rgba(3,45,112,.2);}
#helpingBlock ul li:nth-of-type(1):hover h4 {color:rgb(3,45,112);}
#helpingBlock ul li:nth-of-type(1):hover p {color:rgb(3,45,112);}

#helpingBlock ul li:nth-of-type(2):hover {background:rgba(25,209,65,.2);}
#helpingBlock ul li:nth-of-type(2):hover h4 {color:rgb(25,209,65);}
#helpingBlock ul li:nth-of-type(2):hover p {color:rgb(25,209,65);}

#helpingBlock ul li:nth-of-type(3):hover {background:rgba(226,57,4,.2);}
#helpingBlock ul li:nth-of-type(3):hover h4 {color:rgb(226,57,4);}
#helpingBlock ul li:nth-of-type(3):hover p {color:rgb(226,57,4);}

#helpingBlock ul li:nth-of-type(4):hover {background:rgba(56,0,112,.2);}
#helpingBlock ul li:nth-of-type(4):hover h4 {color:rgb(56,0,112);}
#helpingBlock ul li:nth-of-type(4):hover p {color:rgb(56,0,112);}

#contactBlock {background:#fff;}

@media screen and (max-width:1024px)
{
	#careerMistakes {clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);padding:4rem 0;}
}

@media screen and (max-width:812px)
{
	.bannerBlock .bannerLeft {width:100%;}
	.bannerBlock .bannerRight {width:100%;margin-top:50px;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(1) {left:10%;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(2) {right:10%;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(3), .bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(4) {top:62%;}
	
	#worriedFuture .futureLeft {width:100%;}
	#worriedFuture .futureRight {width:100%;margin-top:50px;padding-top:0px;}
	
	#helpingBlock .helpLeft {width:100%;}
	#helpingBlock .helpRight {width:100%;}
	#careerMistakes .timelineInner .timelineLeft {flex:100%;}
	#careerMistakes .timelineInner .timelineRight {flex:100%;margin-top:30px;}
	#careerMistakes .timelineInner .timelineLeft li, #careerMistakes .timelineInner .timelineRight li {margin-top:0px;width:100%;}
	#careerMistakes .timelineInner .timelineRight:before, #careerMistakes .timelineInner .timelineRight li:after, #careerMistakes .timelineInner .timelineRight li:before, #careerMistakes .timelineInner .timelineLeft li:before, #careerMistakes .timelineInner .timelineLeft li:after {display:none;}
}

@media screen and (max-width:420px)
{
	.bannerBlock .bannerRight img.homeNewImage {width:100%;}
	.bannerBlock .bannerRight .bannerRightImageList li .check {top:-20px;left:-20px;}
	.bannerBlock .bannerRight .bannerRightImageList li {padding:15px;width:180px!important;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(1) {top:-10%;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(2) {top:20%;right:2%;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(3) {top:60%;}
	.bannerBlock .bannerRight .bannerRightImageList li:nth-of-type(4) {top:90%;}
}
