@font-face {
    font-family:"Roboto_Light";
    src: url('fonts/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family:"Roboto_Regular";
    src: url("fonts/Roboto-Regular.ttf") format('truetype');
}
@font-face {
    font-family:"Roboto_Thin";
    src: url("fonts/Roboto-Thin.ttf") format('truetype');
}

body{
	background-color: #fff;
	color: #282a2b;
	margin: 0;
	font-family: Roboto_Light, Helvetica, Arial, sans-serif;
}

.header {
	background: url(images/top-bg.jpg) no-repeat top center #e84ba5;
	height: 680px;
	min-width: 1250px;
	position: relative;
}

.header-inner,
.header-top-inner,
.post-block,
.footer-inner {
	margin: 0 auto;
	width: 1250px;
}

.top-banner-wrap {
	height: 862px;
	top: 88px;
	left: 0;
	overflow: hidden;
	position: absolute;
	width: 100%;
}

.top-banner {
	height: 573px;
	left: 50%;
	top: 165px;
	margin-left: -390px;
	position: absolute;
	width: 945px;
	z-index: 2;
}

.ban-yellow,
.ban-orange,
.ban-red,
.ban-blue,
.ban-green,
.ban-top,
.ban-main-top-shadow,
.ban-main-top,
.ban-bottom-shadow {
	height: 318px;
	position: absolute;
	left: 59px;
	width: 825px;
}

.ban-yellow {
	background: url(images/banner/ban-yelow.png) no-repeat 0 0;
	bottom: 122px;

	-webkit-transform : translate(1358px, 85px);
	-ms-transform : translate(1358px, 85px);
	transform : translate(1358px, 85px);

	-webkit-transition: -webkit-transform 1s ease-out 0.7s;
	-ms-transition: -ms-transform 1s ease-out 0.7s;
	transition: transform 1s ease-out 0.7s;
}
.ban-orange {
	background: url(images/banner/ban-orang.png) no-repeat 0 0;
	bottom: 130px;
	-webkit-transform: translate(1358px, 68px);
	-ms-transform: translate(1358px, 68px);
	transform: translate(1358px, 68px);

	-webkit-transition: -webkit-transform 0.3s ease-out 0.5s;
	-ms-transition: -ms-transform 0.3s ease-out 0.5s;
	transition: transform 0.3s ease-out 0.5s;
}
.ban-red {
	background: url(images/banner/ban-red.png) no-repeat 0 0;
	bottom: 138px;

	-webkit-transform: translate(1358px, 51px);
	-ms-transform: translate(1358px, 51px);
	transform: translate(1358px, 51px);

	-webkit-transition: -webkit-transform 0.3s ease-out 0.4s;
	-ms-transition: -ms-transform 0.3s ease-out 0.4s;
	transition: transform 0.3s ease-out 0.4s;
}
.ban-blue {
	background: url(images/banner/ban-blue.png) no-repeat 0 0;
	bottom: 147px;

	-webkit-transform: translate(1358px, 34px);
	-ms-transform: translate(1358px, 34px);
	transform: translate(1358px, 34px);

	-webkit-transition: -webkit-transform 0.3s ease-out 0.3s;
	-ms-transition: -ms-transform 0.3s ease-out 0.3s;
	transition:transform 0.3s ease-out 0.3s;
}
.ban-green {
	background: url(images/banner/ban-green.png) no-repeat 0 0;
	bottom: 156px;

	-webkit-transform: translate(1358px, 17px);
	-ms-transform: translate(1358px, 17px);
	transform: translate(1358px, 17px);

	-webkit-transition: -webkit-transform 0.3s ease-out 0.2s;
	-ms-transition: -ms-transform 0.3s ease-out 0.2s;
	transition: transform 0.3s ease-out 0.2s;
}
.ban-top {
	background: url(images/banner/ban-top.png) no-repeat 0 0;
	bottom: 164px;

	-webkit-transform: translate(1358px, 0);
	-ms-transform: translate(1358px, 0);
	transform: translate(1358px, 0);

	-webkit-transition: -webkit-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}

.ban-main-top {
	background: url(images/banner/ban-main-top.png) no-repeat 0 0;
	left: 112px;
	bottom: 235px;
	height: 229px;
	width: 623px;

	-webkit-transform: translate(1358px, -137px);
	-ms-transform: translate(1358px, -137px);
	transform: translate(1358px, -137px);

	-webkit-transition: -webkit-transform 1s ease-out 0.7s;
	-ms-transition: -ms-transform 1s ease-out 0.7s;
	transition: transform 1s ease-out 0.7s;
}

.ban-main-top-shadow {
	background: url(images/banner/ban-main-top-shadow.png) no-repeat 0 0;
	bottom: 216px;
	left: 112px;
	height: 251px;
	width: 630px;

	-webkit-transform: translate(1358px, -107px);
	-ms-transform: translate(1358px, -107px);
	transform: translate(1358px, -107px);

	-webkit-transition: -webkit-transform 1s ease-out 0.7s;
	-ms-transition: -ms-transform 1s ease-out 0.7s;
	transition: transform 1s ease-out 0.7s;
}

.ban-bottom-shadow {
	background: url(images/banner/ban-bottom-shadow.png) no-repeat 0 0;
	left: 0;
	bottom: 0;
	height: 436px;
	width: 945px;

	-webkit-transform: translate(1358px, 0);
	-ms-transform: translate(1358px, 0);
	transform: translate(1358px, 0);

	-webkit-transition: -webkit-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out
}


.anim-first-ban .ban-yellow {
	-webkit-transform: translate(0, 85px);
	-ms-transform: translate(0, 85px);
	transform: translate(0, 85px);
}
.anim-first-ban .ban-orange {
	-webkit-transform: translate(0, 68px);
	-ms-transform: translate(0, 68px);
	transform: translate(0, 68px);
}
.anim-first-ban .ban-red {
	-webkit-transform: translate(0, 51px);
	-ms-transform: translate(0, 51px);
	transform: translate(0, 51px);
}
.anim-first-ban .ban-blue {
	-webkit-transform: translate(0, 34px);
	-ms-transform: translate(0, 34px);
	transform: translate(0, 34px);
}
.anim-first-ban .ban-green {
	-webkit-transform: translate(0, 17px);
	-ms-transform: translate(0, 17px);
	transform: translate(0, 17px);
}
.anim-first-ban .ban-main-top {
	-webkit-transform: translate(0, -55px);
	-ms-transform: translate(0, -55px);
	transform: translate(0, -55px);
}
.anim-first-ban .ban-top {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}
.anim-first-ban .ban-main-top-shadow {
	-webkit-transform: translate(0, -22px);
	-ms-transform: translate(0, -22px);
	transform: translate(0, -22px);
}
.anim-first-ban .ban-bottom-shadow {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);
}


.anim-second-ban .ban-layer {
	-webkit-transform: translate(0, 0);
	-ms-transform: translate(0, 0);
	transform: translate(0, 0);

	-webkit-transition: -webkit-transform 0.3s ease-out;
	-ms-transition: -ms-transform 0.3s ease-out;
	transition: transform 0.3s ease-out
}





.header-inner {
	position: relative;
}

.header-top {
	border-bottom: 1px solid #d23d7f;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .15);
	height: 88px;
}

.bx-logo {
	background: url(images/logo.png) no-repeat 0 0;
	margin: 28px 0 0 68px;
	float: left;
	height: 35px;
	width: 178px;
}

.bx-link-btn {
	background: url(images/composite-land-sprite.png?1) no-repeat right -356px;
	border: 2px solid #fff;
	border-radius: 23px;
	color: #fff;
	font-size: 18px;
	font-family: "Roboto_Regular", Helvetica, Arial, sans-serif;
	float: right;
	margin: 20px 65px 0 ;
	min-width: 108px;
	height: 46px;
	line-height: 46px;
	text-decoration: none;
	padding: 0 33px 0 21px;
}

.bx-link-btn:hover {
	background-color: #fff;
	background-position: right -753px;
	color: #df2d93;
	text-decoration: none;
}

.top-title {
	color: #fff;
	font-family: "Roboto_Thin", Helvetica, Arial, sans-serif;
	font-size: 85px;
	font-weight: normal;
	margin: 26px 0 6px;
	text-align: center;
}

.top-title-description {
	color: #fff;
	display: block;
	font-size: 24px;
	text-align: center;
}


.top-left-side {
	color: #ffffff;
	top: 178px;
	left: 64px;
	font-size: 24px;
	position: absolute;
}

.top-left-100 {
	display: block;
	font-family: "Roboto_Thin", Helvetica, Arial, sans-serif;
	font-size: 185px;
	line-height: 174px;
}

.top-right-side {
	top: 206px;
	right: 65px;
	position: absolute;
}

.right-side-item {
	background: url(images/composite-land-sprite.png?1) no-repeat left 100px;
	color: #fff;
	font-size: 12px;
	font-family: "Roboto_Regular", Helvetica, Arial, sans-serif;
	padding-left: 21px;
	line-height: 21px;
}

.right-side-item-green {
	background-position: left -640px;
}
.right-side-item-blue {
	background-position: left -665px;
}
.right-side-item-red {
	background-position: left -689px;
}
.right-side-orang {
	background-position: left -713px;
}
.right-side-item-yellow {
	background-position: left -736px;
}

.post-block {
	padding-bottom: 64px;
}

.post-block-border {
	border-top: 1px solid #e8e8e8;
}

.post-title {
	color: #000;
	font-size: 52px;
	font-family: "Roboto_Light", Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin: 53px 0 78px;
	text-align: center;
}

.video-block-wrap {
	margin-top: 64px;
	overflow: hidden;
	position: relative;
}

.video-block {
	background: url(images/video-bg.jpg) no-repeat right top;
	float: left;
	height: 314px;
	margin: 0 44px 0 0;
	position: relative;
	width: 763px;
}

.video-wrap {
	left: 290px;
	top: 18px;
	height: 256px;
	position: absolute;
	width: 409px;
}

.video-text {
	color: #000;
	float: left;
	font-size: 18px;
	width: 389px;
}

.btn {
	display: inline-block;
	border-radius: 33px;
	height: 65px;
	font-size: 24px;
	line-height: 63px;
	font-family: "Roboto_Regular", Helvetica, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	min-width: 214px;
}

.btn:hover {
	text-decoration: none;
}

.video-btn {
	background-color: #d63f52;
	background-image: -webkit-linear-gradient(top, #c63a7c, #e94525);
	background-image:    -moz-linear-gradient(top, #c63a7c, #e94525);
	background-image:     -ms-linear-gradient(top, #c63a7c, #e94525);
	background-image:      -o-linear-gradient(top, #c63a7c, #e94525);
	background-image:         linear-gradient(to bottom, #c63a7c, #e94525);
	color: #fff;
	bottom: 0;
	right: 230px;
	position: absolute;
}

.video-btn:hover {
	background-color: #f72944;
	background-image: -webkit-linear-gradient(top, #ef2685, #ff2b01);
	background-image:    -moz-linear-gradient(top, #ef2685, #ff2b01);
	background-image:     -ms-linear-gradient(top, #ef2685, #ff2b01);
	background-image:      -o-linear-gradient(top, #ef2685, #ff2b01);
	background-image:         linear-gradient(to bottom, #ef2685, #ff2b01);
}

.post-block-inner {
	padding: 0 40px;
	text-align: center;
}

.post-item {
	display: inline-block;
	vertical-align: top;
	width: 33%;
}

.post-circle-wrap {
	background: url(images/circle-shadow.png) no-repeat 0 0;
	display: inline-block;
	height: 222px;
	margin-right: -67px;
	width: 222px;
}

.post-circle {
	background: url(images/composite-land-sprite.png?1) no-repeat 500px 500px;
	border: 2px solid;
	border-color: #c63a95 #d94560 #ec502a;
	border-radius: 50%;
	height: 148px;
	width: 148px;
}

.post-item-response .post-circle {
	background-position: center 42px;
}
.post-item-ranging .post-circle {
	background-position: center -79px;
}
.post-item-conversion .post-circle {
	background-position: center -215px;
}

.post-item-text {
	margin-top: -40px;
	font-size: 20px;
}

.middle-banner {
	background: url(images/middle-bg.jpg) no-repeat center top;
	color: #fff;
	font-size: 52px;
	font-weight: normal;
	height: 411px;
	min-width: 1250px;
	text-align: center;
}

.middle-banner-title {
	color: #fff;
	font-size: 52px;
	font-family: "Roboto_Light", Helvetica, Arial, sans-serif;
	font-weight: normal;
	margin: 0 0 24px;
	padding-top: 43px;
}

.middle-banner-description {
	font-size: 20px;
	margin-bottom: 42px;
}

.middle-banner-btn {
	border: 2px solid #fff;
	color: #ffffff;
	height: 61px;
	line-height: 60px;
}

.middle-banner-btn:hover {
	background-color: #ffffff;
	color: #df2d93;
}

.title-description {
	display: block;
	margin-top: -53px;
	text-align: center;
	font-size: 20px;
}

.toggle-block {
	margin-top: 43px;
	text-align: center;
}

.toggle-link {
	display: inline-block;
	font-size: 18px;
	line-height: 20px;
	margin-top: 3px;
	vertical-align: top;
}

.toggle-link-normal,
.toggle-block-composite .toggle-link-composite {
	color: #000;
	cursor: default;
	border-bottom: none;
}

.toggle-link-composite,
.toggle-block-composite .toggle-link-normal {
	border-bottom: 1px dashed #e94524;
	color: #e94524;
	cursor: pointer;
}




.toggle {
	background-color: #d74050;
	background-image: -webkit-linear-gradient(top, #c73a7a, #e84526);
	background-image:    -moz-linear-gradient(top, #c73a7a, #e84526);
	background-image:     -ms-linear-gradient(top, #c73a7a, #e84526);
	background-image:      -o-linear-gradient(top, #c73a7a, #e84526);
	background-image:         linear-gradient(to bottom, #c73a7a, #e84526);
	border-top: 1px solid #dd89b0;
	border-bottom: 1px solid #f0836d;
	border-radius: 14px;
	cursor: pointer;
	display: inline-block;
	height: 25px;
	margin: 0 22px;
	position: relative;
	vertical-align: top;
	width: 59px;
}

.toggle-btn {
	background-color: #fff;
	-webkit-box-shadow: 6px 4px 3px rgba(5, 5, 5, 0.17);
	box-shadow: 6px 4px 3px rgba(5, 5, 5, 0.17);
	height: 25px;
	border-radius: 50%;
	left: 1px;
	top: 0;
	position: absolute;
	width: 25px;

	-webkit-transition: left 0.15s linear;
	transition: left 0.15s linear;
}

.toggle-block-composite .toggle-btn {
	left: 33px;
}

.chart-wrap {
	margin-top: 70px;
	padding:10px 0 56px;
}


.post-title-chart {
	margin-top: 53px;
}

.chart-block {
	background: url(images/grid-bg.png) repeat 0 0;
	margin: 0 auto;
	height: 256px;
	position: relative;
	width: 1056px;
}

.chart-item {
	border-radius: 14px;
	color: #fff;
	font-size: 12px;
	height: 29px;
	line-height: 28px;
	font-family: "Roboto_Regular", Helvetica, Arial, sans-serif;
	text-align: center;
	position: absolute;

	-webkit-transition: left 0.3s ease-out;
	transition: left 0.3s ease-out;
}

.chart-item-green {
	background-color: #75a227;
	background-image: -webkit-linear-gradient(top, #598918, #94b946);
	background-image:    -moz-linear-gradient(top, #598918, #94b946);
	background-image:     -ms-linear-gradient(top, #598918, #94b946);
	background-image:      -o-linear-gradient(top, #598918, #94b946);
	background-image:         linear-gradient(to bottom, #598918, #94b946);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	left: 0;
	top: 29px;
	overflow: hidden;
	width: 441px;

	-webkit-transition: width 0.3s ease-out;
	transition: width 0.3s ease-out;
}

.chart-item-green-text {
	display: inline-block;
	margin: 0 40px;
	white-space: nowrap;
}

.chart-item-yellow {
	background-image: -webkit-linear-gradient(top, #f7ab11, #fcd958);
	background-image:    -moz-linear-gradient(top, #f7ab11, #fcd958);
	background-image:     -ms-linear-gradient(top, #f7ab11, #fcd958);
	background-image:      -o-linear-gradient(top, #f7ab11, #fcd958);
	background-image:         linear-gradient(to bottom, #f7ab11, #fcd958);
	left: 374px;
	top: 63px;
	overflow: hidden;
	width: 0;

	-webkit-transition: width 0.3s ease-out, left 0.3s ease-out;
		transition: width 0.3s ease-out, left 0.3s ease-out;
}

.chart-item-blue {
	background-color: #37bfdd;
	background-image: -webkit-linear-gradient(top, #23abd1, #59d0e6);
	background-image:    -moz-linear-gradient(top, #23abd1, #59d0e6);
	background-image:     -ms-linear-gradient(top, #23abd1, #59d0e6);
	background-image:      -o-linear-gradient(top, #23abd1, #59d0e6);
	background-image:         linear-gradient(to bottom, #23abd1, #59d0e6);
	left: 442px;
	top: 106px;
	width: 339px;
}

.chart-item-red {
	background-color: #c22521;
	background-image: -webkit-linear-gradient(top, #ac1613, #d1433e);
	background-image:    -moz-linear-gradient(top, #ac1613, #d1433e);
	background-image:     -ms-linear-gradient(top, #ac1613, #d1433e);
	background-image:      -o-linear-gradient(top, #ac1613, #d1433e);
	background-image:         linear-gradient(to bottom, #ac1613, #d1433e);
	left: 442px;
	top: 146px;
	width: 408px;
}

.chart-item-orange {
	background-color: #f88e3a;
	background-image: -webkit-linear-gradient(top, #f67326, #fba95c);
	background-image:    -moz-linear-gradient(top, #f67326, #fba95c);
	background-image:     -ms-linear-gradient(top, #f67326, #fba95c);
	background-image:      -o-linear-gradient(top, #f67326, #fba95c);
	background-image:         linear-gradient(to bottom, #f67326, #fba95c);
	left: 442px;
	top: 192px;
	width: 479px;
}

.chart-delimiter {
	background: url(images/grid-separator.png) repeat-y 0 0;
	height: 283px;
	top: -9px;
	position: absolute;
	width: 1px;

	-webkit-transition: left 0.3s ease-out;
	transition: left 0.3s ease-out;
}

.chart-delimiter-first {
	left: 442px;
}

.toggle-block-composite .chart-delimiter-first {
	left: 34px;
}

.toggle-block-composite .chart-delimiter-first .chart-delimiter-text {
	display: none;
}

.toggle-block-composite .chart-delimiter-second {
	left: 514px;
}

.chart-delimiter-second {
	left: 852px;
}

.chart-delimiter-text {
	color: #000;
	font-size: 14px;
	font-family: "Roboto_Regular", Helvetica, Arial, sans-serif;
	top: 290px;
	left: -125px;
	position: absolute;
	text-align: center;
	width: 250px;
	white-space: nowrap;
}

.chart-delimiter-second-text {
	display: none;
}

.toggle-block-composite .chart-delimiter-text {
	display: none;
}

.toggle-block-composite .chart-delimiter-second-text {
	display: block;
}

.chart-text-grey {
	color: #6f848e;
}

.toggle-block-composite .chart-item-green {
	width: 33px;
}
.toggle-block-composite .chart-item-blue,
.toggle-block-composite .chart-item-red,
.toggle-block-composite .chart-item-orange,
.toggle-block-composite .chart-item-yellow{
	left: 35px;
}

.toggle-block-composite .chart-item-yellow {
	width: 338px;
}



.post-howitwork-item {
	min-height: 147px;
	margin:0 0 58px 96px;
	padding-left: 307px;
	position: relative;
}

.post-howitwork-divide {
	background: url(images/divide-img.jpg) no-repeat 0 0;
	margin-top: 80px;
}

.post-howitwork-cache {
	background: url(images/cache-img.jpg) no-repeat 0 0;
}

.post-howitwork-download {
	background: url(images/download-img.jpg) no-repeat 0 0;
}

.post-howitwork-item-text {
	font-size: 26px;
}

.post-howitwork-item-description {
	font-size: 18px;
}

.post-bus {
	background: url(images/bus-box.png) no-repeat right bottom;
	border-bottom: 1px solid #edeff0;
	font-size: 18px;
	min-height: 343px;
	margin-top: 71px;
	padding:0 560px 0 99px;
	/*width: 591px;*/
}

.post-bus-text {
	min-height: 195px;
}

.btn-bus {
	border: 2px solid;
	border-color: #c63a94 #d94560 #eb502c;
	color: #e94524;
	font-size: 18px;
	height: 49px;
	line-height: 48px;
	min-width: 186px;
}

.btn-bus:hover {
	background-color: #f8293b;
	background-image: -webkit-linear-gradient(top, #ef2685, #ff2b01);
	background-image:    -moz-linear-gradient(top, #ef2685, #ff2b01);
	background-image:     -ms-linear-gradient(top, #ef2685, #ff2b01);
	background-image:      -o-linear-gradient(top, #ef2685, #ff2b01);
	background-image:         linear-gradient(to bottom, #ef2685, #ff2b01);
	color: #fff;
	border-color: #ef2685 #f72944 #ff2b01;
}

.post-block-footer {
	height: 75px;
	margin-top: -30px;
	text-align: center;
	padding-bottom: 0;
}

.post-block-footer-text {
	color: #6f848e;
	display: inline-block;
	font-size: 16px;
	margin-right: 33px;
	vertical-align: middle;
}

.bx-composite-btn {
    background: url("images/bx-white-logo.png") no-repeat right 5px #e94524;
    border-radius: 23px;
    color: #fff !important;
    display: inline-block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
	font-weight: bold;
    height: 31px;
    line-height: 30px;
    padding: 0 42px 0 17px;
    text-decoration: none;
    vertical-align: middle;
}

.bx-composite-btn:hover {
	text-decoration: none;
}

.footer {
	background-color: #51626b;
	color: #a5b0b5;
	height: 119px;
	min-width: 1250px;
}

.footer-inner {
	overflow: hidden;
	padding-top: 19px;
}

.footer-left {
	font-size: 14px;
	float: left;
	margin-top: 4px;
	padding-left:70px;
}

.footer-right {
	color: #bec8cc;
	float: right;
	font-size: 16px;
}

.bx-link{
	color: #fff;
	text-decoration: none;
}

.bx-link:hover {
	text-decoration: underline;
}
.aic-block {
	padding-top: 20px;
	text-align: right;
}

.aic-link {
	background: url(images/composite-land-sprite.png?1) no-repeat right -475px;
	color: #bcc3c8;
	display: inline-block;
	font-size: 14px;
	text-decoration: none;
	height: 21px;
	padding:3px 45px 0 0;
}

.aic-link:hover {
	text-decoration: none;
}