/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */

body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
	margin: 0;
	padding: 0;
	border: 0;
  	font-family: 'Ubuntu', Helvetica, Arial, sans-serif, "Heiti TC", "LiHei Pro", "Noto Sans", "Microsoft JhengHei", "微軟正黑體", "Apple Color Emoji", "Noto Color Emoji";
}

a:active, a:hover { outline: 0; }

@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

/* for accessibility */
.accessibility { height: 0px; width: 0px; display: inline-block; overflow: hidden; margin: 0;padding: 0;font-size: 0; text-indent: -9999px; position: absolute; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 49.9375em) {
	.js .nav-collapse {
		position: relative;
	}
	.js .nav-collapse.closed {
		max-height: none;
		line-height: 6.6rem;
	}
	.nav-toggle {
		display: none;
	}
	.menu-item img { display: inline-block; padding-right: 0.25rem; vertical-align: middle; }
}


/* ------------------------------------------
  BASIC STYLES
--------------------------------------------- */

body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-size-adjust: 100%;
	max-width: 1260px;
	width: 100vw;
	margin: 0 auto;
	padding-top: 105px;
	color: #37302a;
	background: #ffffff;
	font: normal 95%/1.4 sans-serif;
}

section {
	border-bottom: 0px solid #999;
	background-color: #fff;
	text-align: left;
	padding: 0;
	min-height: 6rem;
	width: 100%;
	float: left;
}
section:last-of-type { padding-bottom: 10vw; }

h1 { font-size: 2.5rem; line-height: 3.5rem; font-size: 8vw; line-height: 11vw; font-weight: 500; }
h1 { margin-bottom: 5vw; }
h1.extra { font-size: 8vw; line-height: 11vw; font-weight: 500; margin-bottom: 2.875rem; }
h1.extra-zh { font-size: 12vw; line-height: 15vw; font-weight: 500; margin-bottom: 2.875rem; }
h2 { font-size: 4.5vw; line-height: 7vw; font-weight: 500; }
h3 { font-size: 6vw; line-height: 8vw; font-weight: 500; }
h4 { font-size: 6.5vw; line-height: 13vw; line-height: 11vw; font-weight: 700; }
h5 { font-size: 14vw; line-height: 14vw; font-weight: 700; }
h6 { font-size: 5vw; line-height: 7.5vw; font-weight: 700; color: #fff;}
h6.zh { font-size: 6.75vw; line-height: 9vw; font-weight: 700; color: #fff;}
h6 { margin-bottom: 2.5vw; }
a { color: #005083; text-decoration: none; }
p { font-size: 1.4375rem; line-height: 2.3125rem; font-size: 5.25vw; line-height: 8.125vw; font-weight: 300; }
p { width: 100%; margin: 0 0; margin-bottom: 2.375rem; }
button { border: none; cursor: pointer; margin-bottom: 0.125rem; }
button:focus {outline:0;}
button, button a { display: inline-block; font-size: 3vw; color: #005083; }
button.readmore { width: auto; height: auto; padding: 0rem; white-space: nowrap; background: url('../img/btn-readmore.png') left center no-repeat; background-color: rgba(255,255,255,0.7); border: solid 0px #e2ecf6; border-radius: 20px; display: inline-block; }
button.readmore:hover, button.readmore:active { color: #3b82c5; background-color: #ffffff; border-top: solid 0px #005083; background: url('../img/btn-readmore-on.png') left center no-repeat; }
button.readmore:hover a, button.readmore:active a { color: #3b82c5; }
button.readmore a { padding: 0.5rem 0.75rem 0.5rem 2.125rem;  }
button.readmore a img { width: auto; height: auto; display: inline-block; vertical-align: middle; margin-top: -0.25rem; }
button.open { background: url('../img/btn-open.png') no-repeat !important; /*width: 35px; height: 34px;*/ }
button.open-zh { background: url('../img/btn-open.png') no-repeat !important; /*width: 35px; height: 34px;*/ }
button.open a:after { content:"Read more"; font-size: 3vw; white-space: nowrap; padding-left: 30px; }
button.open-zh a:after { content:"了解更多"; font-size: 3vw; white-space: nowrap; padding-left: 30px; }
button.more { background: url('../img/btn-more.png'); width: 34px; height: 34px; }
button span { font-size: 1rem !important; white-space: nowrap; padding-left: 2.125rem; padding-top: 0.45rem; display: none; }
button:hover span { display: inline-block; }
#slide-btn button { background: url('../img/btn-close.png') center no-repeat; width: auto; min-width: 34px; height: 34px; }
#slide-btn-zh button { background: url('../img/btn-close.png') center no-repeat; width: auto; min-width: 34px; height: 34px; }
.btn-contaner { width: 100%; margin-top: 4vw; text-align: center; cursor: pointer; display: inline-block; }
.btn-contaner:hover button { background: url('../img/btn-close-on.png') center no-repeat !important; color: #3b82c5; }
.btn-contaner:hover button.open { background: url('../img/btn-open-on.png') no-repeat !important; color: #3b82c5 !important; }
.btn-contaner:hover button.open-zh { background: url('../img/btn-open-on.png') no-repeat !important; color: #3b82c5 !important; }
.btn-contaner:hover button.open a:after { color: #3b82c5; }
.btn-contaner:hover button.open-zh a:after { color: #3b82c5; }
footer { float: left; width: 100%; border-top: solid 1px #000; background-color: white; }
footer .warp { padding: 1rem 1.625rem 2rem; padding: 5vw 0vw 5vw; }
footer span { padding: 0 5.5vw 1rem; display: block; }
footer a { text-decoration: none; color: #005083; padding: 0 0.5rem;}
footer a:first-child { padding-left: 0;}
footer a:last-child { padding-right: 0;}
.divider { float: left; min-height: 0vw; margin-top: 8vw; margin-bottom: 6vw; }
.divider img { width: 100vw; }
.content { float: left; padding: 0 5.5vw; }
.center { text-align: center; }
.wide img { float: left; width: 100vw; margin-bottom: 4vw; }
.desktop-only { display: none; }
.mobile-only { display: block; }
br {display: none;}
#strategies .extra br {display: block;}
/*#strategies .extra br, #strategies h3 br {display: block;}*/

@media screen and (min-width: 49.9375em) {
	body { min-width: 1260px; background: #dfdfdf; }
	section:last-of-type { padding-bottom: 5rem; }
	h1 { font-size: 3.125rem; line-height: 4rem; font-weight: 500; }
	h1 { margin-bottom: 1.875rem; }
	h1.extra { font-size: 4rem; line-height: 4.75rem; font-weight: 500; margin-bottom: 2.875rem; }
	h1.extra-zh { font-size: 5rem; line-height: 7rem; font-weight: 500; letter-spacing: 1.25rem; margin-bottom: 2.875rem; }
	h2 { font-size: 1.325rem; line-height: 1.8125rem; font-weight: 500; }
	h3 { font-size: 2.21875rem; line-height: 2.6875rem; font-weight: 500; }
	h4 { font-size: 2.500rem; line-height: 3rem; font-weight: 700; }
	h5 { font-size: 3.875rem; line-height: 4rem; font-weight: 700; }
	h6 { font-size: 1.8125rem; line-height: 2.375rem; font-weight: 700; color: #fff;}
	h6.zh { font-size: 2.21875rem; line-height: 2.6875rem; font-weight: 700; color: #fff;}
	h6 { margin-bottom: 1.25rem; }
	p { font-size: 1.5375rem; line-height: 2.3125rem; font-weight: 300; }
	p a:hover { color: #f5821f; }
	p.extra { font-size: 1.6rem; line-height: 2.5rem; font-weight: 300; }
	section { padding: 0 0 2rem 0; }
	br {display: inline-block;}

	.desktop-only { display: block; }
	.mobile-only { display: none; }
	.divider { float: left; width: 100%; height: auto; margin-top: 2rem; margin-bottom: 2.5rem; }
	.divider img { width: 100%; height: auto; margin-top: 1rem; margin-bottom: 1.5rem; }
	.content { float: left; width: auto; padding: 0 5.25rem; display: block; }
	.content.margin { margin-left: 5.625rem; margin-right: 5.625rem; }
	.content .title { float: left; width: 22.75rem; width: 32%; padding-right: 0rem; }
	.content .intro { float: left; width: 68%; padding-right: 0rem; }
	.wide { float: left; width: 100%; margin-bottom: 2.5rem; }
	.wide img { width: 100%; margin-bottom: 0; }
	.left { float: left; }
	.right { float: right; }
	#slide-btn button { background: url('../img/btn-close.png') center no-repeat; /*width: 120px;*/ height: 34px; }
	#slide-btn-zh button { background: url('../img/btn-close.png') center no-repeat; width: 120px; height: 34px; }
	.btn-contaner { width: 100%; text-align: center; margin-top: 1rem; display: inline-block; }
	button, button a { display: inline-block; font-size: 1rem; color: #005083; }
	button.readmore { width: auto; height: auto; padding: 0rem; white-space: nowrap; background: url('../img/btn-readmore.png') left center no-repeat; background-color: rgba(255,255,255,0.35); border: solid 0px #e2ecf6; border-radius: 20px; display: inline-block; }
	button.chart { background: url('../img/btn-chart.png'); width: 30px; height: 28px;  }
	button.open { background: url('../img/btn-open.png'); width: auto; /*height: 34px;*/ }
	button.close { background: url('../img/btn-close.png'); width: 34px; height: 34px; }
	button.open a:after { padding-left: 2rem; font-size: 1rem; }
	button.open-zh a:after { padding-left: 2rem; font-size: 1rem; }
	footer { float: left; width: 100%; border-top: solid 1px #000; background-color: white; }
	footer .warp { padding: 1rem 1.625rem 4rem; }
	footer span { padding: 0; }
	footer a { text-decoration: none; color: #005083; padding: 0 0.5rem;}
	footer a:last-child { padding-right: 0;}
}

/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
	background: none;
	position: fixed;
	z-index: 3;
	width: 100vw;
	left: 0;
	top: 0;
}

.nav-container { max-width: 1260px; height: 105px; background: #fff; margin: 0 auto; position: relative; }

header .logo {
	background: url(../img/logo.png) no-repeat center center;
	width: 257px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (min-width: 49.9375em) {
	header { width: 100%; }
}

/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
	-webkit-transition: opacity 300ms;
	-moz-transition: opacity 300ms;
	transition: opacity 300ms;
	background: rgba(0,80,131, .5);
	visibility: hidden;
	position: fixed;
	opacity: 0;
	z-index: 2;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
}

.android .mask {
	-webkit-transition: none;
	transition: none;
}

.js-nav-active .mask {
	visibility: visible;
	opacity: 1;
}

@media screen and (min-width: 49.9375em) {
	.mask {
		display: none !important;
		opacity: 0 !important;
	}
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
}

.nav-collapse,
.nav-collapse * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
	list-style: none;
	width: 100%;
	float: left;
}

@media screen and (min-width: 49.9375em) {
	.nav-collapse {
		float: right;
		width: auto;
	}
}

.nav-collapse li {
	  float: left;
	  width: 100%;
	}

@media screen and (min-width: 49.9375em) {
	.nav-collapse li {
		width: auto;
	}
}

.nav-collapse a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	border-top: 1px solid #7fa7c1;
	text-decoration: none;
	background: #005083;
	padding: 0.7rem 2rem;
	color: #fff;
	width: 100%;
	float: left;
}

.nav-collapse a:active,
.nav-collapse .active a { background: #fff; }

@media screen and (min-width: 49.9375em) {
	.nav-collapse a {
		border-left: 0px solid #005083;
		background: #fff;
		color: #005083;
		padding: 0rem 0rem;
		text-align: center;
		border-top: 0;
		float: left;
		margin: 0;
	}
	.nav-collapse a:hover {
		color: #3b82c5;
	}
	.nav-collapse li:last-child {
		padding-right: 1.5rem;
	}

	.nav-collapse li:not(:last-child) a:after {
		content: "|";
		padding: 0 0.75rem;
	}
}

.nav-collapse ul ul a {
	background: #ca3716;
	padding-left: 2em;
}

@media screen and (min-width: 49.9375em) {
	.nav-collapse ul ul a { display: none; }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 105px;
  float: right;
}

.nav-toggle:before {
  color: #005083; /* Edit this to change the icon color */
  font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 28px;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\78"; /* Close icon */
}


/* ------------------------------------------
  SLIDE BANNER
--------------------------------------------- */

.banner { float: left; width: 100%; position: relative; }
.banner-cover { z-index: 0; position: absolute; right: 0; bottom: 0; }
.banner-cover img { width: 100vw; height: auto; }
.bx-wrapper .bx-controls-direction a { top: 0% !important; width: 6rem !important; height: 100% !important; margin-top: 0 !important; z-index: 1 !important; background-color: none; }
.bx-wrapper .bx-prev { left: 0 !important; }
.bx-wrapper .bx-next { right: 0 !important; }

@media screen and (min-width: 49.9375em) {
	.bxslider img { width: 1260px; height: 500px; }
	.banner-cover img { width: 1260px; height: 242px; }
}


/* ------------------------------------------
  CHAIRMAN
--------------------------------------------- */

#chairman h1 { color: #f5821f; }
img.chairman { width: 100vw; margin-bottom: 4vw; }
#chairman .content { padding: 0; }
#chairman .letter { margin: 0 5.5vw; }
#chairman .letter .link60th { font-weight: 400; }
#chairman .letter .link60th-zh { font-weight: 700; }

@media screen and (min-width: 49.9375em) {
	img.chairman { width: auto; margin-left: 5.625rem; margin-bottom: 0; }
	#chairman .letter { width: 43%; margin: 0; padding-right: 5.25rem; }
}

/* ------------------------------------------
  HIGHLIGHTS
--------------------------------------------- */

#highlights h1 { color: #0d5989; }
#highlights h2 { color: #005083; }
#highlights h4 { color: #3b82c5; }
#highlights h5 { color: #005083; }
#highlights span { font-size: 4.6875rem; font-size: 14vw; }
#highlights .box-header { float: left; }
#highlights .box-highlights { float: left; background-color: #e2ecf6; margin: 0 0 18px 0; width: calc(89vw - 14vw); padding: 5vw 7vw 3vw 7vw; }
#highlights .btn-chart { float: left; width: 100%; margin-top: 0; }
.box-highlights .dollar { margin-top: 3.5vw; }
.box-highlights .change { float: right; font-size: 10vw; line-height: 10vw; }
.box-highlights .change.special {  font-size: 8.5vw;}

@media screen and (min-width: 49.9375em) {
	#highlights .content { padding-left: 5.625rem; padding-right: 5.25rem; }
	#highlights span { font-size: 4.6875rem; }
	#highlights .box-header { float: left; width: 326px; height: auto; }
	#highlights .box-highlights { float: left; width: 293px; height: 242px; background-color: #e2ecf6; margin: 0 0 18px 18px; padding: 32px 33px 25px 36px; }
	#highlights .box-highlights:nth-child(4) { margin-left: 8.9375rem }
	#highlights .btn-chart { float: left; width: 100%; margin-top: -54px; }
	.box-highlights .data { height: 75%; }
	.box-highlights .dollar { margin-top: 1.5rem; }
	.box-highlights .change { font-size: 3.875rem; line-height: 4rem; font-weight: 700; }
	.box-highlights .change.special {  font-size: 3.5rem;}
	#highlights .box-highlights.zh { height: auto; }
	#highlights .box-highlights .data h4.dollar.zh { font-size: 2rem; }
	#highlights .box-highlights .data span.large-data.zh { font-size: 3.688rem; }
	#highlights .box-highlights .change.zh { font-size: 2.875rem; }
}

/* ------------------------------------------
  STRATEGIES
--------------------------------------------- */

#strategies .panel { float: left; display: none; }
#strategies h1 { color: #0d5989; }
#strategies h1.extra, #strategies h1.extra-zh { float: left; width: 100%; margin-bottom: 1.875rem; padding: 0 5.5vw; text-align: left; padding: 0; text-align: center; }
#strategies h3 { padding: 0; text-align: left; text-align: center; }
#strategies h3.strategy1 { color: #f5821f; }
#strategies h3.strategy2 { color: #472f92; }
#strategies h3.strategy3 { color: #0099bf; }
#strategies h3.strategy4 { color: #939d25; }
#strategies h3.strategy5 { color: #d60078; }
#strategies h3 { margin: 2vw 0; }
#strategies h4 { color: #3b82c5; }
#strategies p { color: #005083; }
#strategies p.large { width: auto; text-align: center; padding: 0vw; margin-top: 6vw; text-align: center; }
.strategy1-2 {  float: left; width: 100%; text-align: center; }
.strategy1-3 {  float: left; width: 100%; text-align: center; }

@media screen and (min-width: 49.9375em) {

	.strategy1-2 {  float: left; width: 50%; text-align: center; }
	.strategy1-3 {  float: left; width: 33.333%; text-align: center; }
	#strategies .graphic { width: 100%; height: auto; }
	#strategies p.large { width: auto; text-align: center; padding: 0; margin-top: 3rem; display: block; }
	#strategies #5strategies { padding-top: 110px; margin-top: -110px; }
}

/* ------------------------------------------
  OPERATIONS
--------------------------------------------- */

#operations h1 { color: #462e92; }
#operations .content { }
#operations .header-line { margin-bottom: 1vw; }
.zoom-block { overflow: hidden; position: relative; cursor: pointer; }
.zoom-block .header, .zoom-block .header-zh { position: absolute; top: 0; }
.operation1, .operation2, .operation3, .operation4 { float: left; width: 89vw; height: 89vw; margin-right: 0rem; margin-bottom: 1rem; }
.operation-bg { height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.operation1 .operation-bg { background: url('../img/operations1m.jpg'); background-size: cover; }
.operation2 .operation-bg { background: url('../img/operations2m.jpg'); background-size: cover; }
.operation3 .operation-bg { background: url('../img/operations3m.jpg'); background-size: cover; }
.operation4 .operation-bg { background: url('../img/operations4m.jpg'); background-size: cover; }
.operation1 .header, .operation2 .header, .operation3 .header, .operation4 .header { width: auto; min-width: 44vw; height: 33.425vw; padding: 5vw 3vw; padding-left: 5vw; }
.operation1 .header-zh, .operation2 .header-zh, .operation3 .header-zh, .operation4 .header-zh { width: auto; min-width: 44vw; height: 33.425vw; padding: 5vw 3vw; padding-left: 5vw; }
.operation1 .header, .operation1 .header-zh { background: url('../img/operations1m-color.png'); background-size: cover; }
.operation2 .header, .operation2 .header-zh { background: url('../img/operations2m-color.png'); background-size: cover; }
.operation3 .header, .operation3 .header-zh { background: url('../img/operations3m-color.png'); background-size: cover; width: 44vw; }
.operation4 .header, .operation4 .header-zh { background: url('../img/operations4m-color.png'); background-size: cover; }
.operation1 .header, .operation3 .header, .operation4 .header { padding-right: 36vw; min-width: 48vw; max-width: 48vw; }
.operation1 .header-zh, .operation3 .header-zh, .operation4 .header-zh { padding-right: 56vw; min-width: 28vw; max-width: 28vw; }
.operation2 .header { padding-left: 40vw; min-width: 46vw; max-width: 46vw; }
.operation2 .header-zh { padding-left: 44vw; min-width: 39vw; max-width: 39vw; padding-right: 6vw; }
.zoom-block button { opacity: 1; border: solid 0px #e2ecf6; background-position-x: 0.5rem; padding: 0.5rem 0.75rem 0.5rem 2.5rem; }
.zoom-block button:hover { border: 0px; background: url('../img/btn-readmore.png') 0.5rem center no-repeat; background-color: rgba(255,255,255,0.8); color: #005083; }

.zoom-block:hover .operation-bg, .zoom-block:focus .operation-bg {
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.zoom-block:hover button, .zoom-block:focus button { opacity: 1; }

@media screen and (min-width: 49.9375em) {
	#operations .content { padding: 0 3.25rem; }
	#operations .header-line { margin-bottom: 0.5rem; }
	.zoom-block { overflow: hidden; position: relative; cursor: pointer; }
	.zoom-block .header, .zoom-block .header-zh { position: absolute; top: 0; }
	.operation1 { float: left; width: 570px; height: 746px; margin-right: 0rem; margin-bottom: 1rem; }
	.operation2 { float: left; width: 570px; height: 622px; margin-right: 0rem; margin-bottom: 1rem; }
	.operation3 { float: left; width: 570px; height: 380px; margin-right: 0rem; margin-bottom: 1rem; }
	.operation4 { float: left; width: 570px; height: 505px; margin-right: 0rem; margin-bottom: 1rem; }
	.operation-bg { height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
	.operation1 .operation-bg { background: url('../img/operations1.jpg'); }
	.operation2 .operation-bg { background: url('../img/operations2.jpg'); }
	.operation3 .operation-bg { background: url('../img/operations3.jpg'); }
	.operation4 .operation-bg { background: url('../img/operations4.jpg'); }

	.operation4 { margin-top: -125px; }
	.operation1 .header, .operation1 .header-zh { width: 506px; min-width: 506px; height: 239px; padding: 2rem 2rem; background: url('../img/operations1-color.png'); }
	.operation2 .header, .operation2 .header-zh { width: 506px; min-width: 506px; height: 156px; padding: 2rem 2rem; background: url('../img/operations2-color.png'); }
	.operation3 .header, .operation3 .header-zh { width: 506px; min-width: 506px; height: 118px; padding: 2rem 2rem; background: url('../img/operations3-color.png'); }
	.operation4 .header, .operation4 .header-zh { width: 506px; min-width: 506px; height: 156px; padding: 2rem 2rem; background: url('../img/operations4-color.png'); }
	.operation-spacer { float: left; width: 1rem; height: 1rem; display: block; }
}

/* ------------------------------------------
  FINANCIAL
--------------------------------------------- */

#financial h1 { color: #0099bf; }

@media screen and (min-width: 49.9375em) {

}

/* ------------------------------------------
  SUSTAINABLE
--------------------------------------------- */

#sustainable h1 { color: #d60078; }

@media screen and (min-width: 49.9375em) {

}

/* ------------------------------------------
  DOWNLOAD
--------------------------------------------- */

#download .divider { margin-top: 0; }
#download h1 { color: #d60078; }
#download .full-report { width: 386px; width: 89vw; height: 100%; display: block; margin-bottom: 8vw; }
#download .full-report .link a { background-image: url('../img/btn-download.png'); background-repeat: no-repeat; padding-left: 2.5rem; }
#download .full-report .link a { display: inline-block; vertical-align: middle; }
#download .full-report .link span { display: block; }
#download .cover img { width: 50vw; height: auto; border: solid 2px #ccc; }
#download .cover { display: inline-block; padding-right: 4vw; padding-bottom: 1vw; }
#download .sections-dl .table-row { display: table-row; cursor: pointer; }
#download .sections-dl .table-row-no { display: table-row; }
#download .sections-dl .table-row:active .table-cell { color: #fff; background-color: #008ccf; }
#download .sections-dl .table-header { font-weight: 700; color: #008ccf; padding: 0.5rem 0rem; display: table-cell; }
#download .sections-dl .table-cell { font-weight: normal; color: #008ccf; padding: 0.5rem 0.25rem; display: table-cell; }
#download .sections-dl .table-cell.lvl2 { background-image: url('../img/dot.gif'); background-repeat: no-repeat; background-position: 0.25rem 0.85rem; padding-left: 1.5rem; }
#download .sections-dl .table-row:active .table-cell.lvl2 { background-image: url('../img/dot-hover.gif'); }
#download .sections-dl { width: 89vw; display: table; }
#download .sections-dl .col-a { width: 80%; }
#download .sections-dl .col-b { display: none; }
#download .sections-dl .col-c { width: 20%; text-align: right; }


@media screen and (min-width: 49.9375em) {

	#download .full-report { width: 386px; width: 302px; height: 100% }
	#download .cover { display: inline-block; padding-right: 0; padding-bottom: 1rem; }
	#download .cover img { width: 248px; height: auto; }
	#download .full-report .link a { background-image: url('../img/btn-download.png'); background-repeat: no-repeat; padding-left: 2.5rem; }
	#download .sections-dl { width: 874px;  width: 790px; display: table; }
	#download .sections-dl .col-a { width: 60%; }
	#download .sections-dl .col-b { width: 20%; text-align: center; }
	#download .sections-dl .col-c { width: 20%; text-align: center; }
	#download .sections-dl .table-header { font-weight: 700; color: #008ccf; padding: 0.5rem 2rem; display: table-cell; }
	#download .sections-dl .table-cell { font-weight: normal; color: #008ccf; padding: 0.5rem 2rem; display: table-cell; }
	#download .sections-dl .table-cell.lvl2 { background-image: url('../img/dot.gif'); background-repeat: no-repeat; background-position: 2rem; padding-left: 3.25rem; }
	#download .sections-dl .table-row:hover .table-cell,
	#download .sections-dl .table-row:active .table-cell { color: #fff; background-color: #008ccf; }
	#download .sections-dl .table-row:hover .table-cell.lvl2 { background-image: url('../img/dot-hover.gif'); }

}

/* ------------------------------------------
  SLIDEANIM
--------------------------------------------- */

.slideanim {
    visibility:hidden;
    visibility:visible\9;/*For old IE browsers IE6-8 */
}
.slideanim.slide {                  
    visibility: visible;                  
    animation: slide 1s;
}
.slideanim::after {
    /* useful when its child elements are float:left; */
    content: "";
    display: table;
    clear: both;
}

@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(75%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0);
    } 
}