/**
 * Table of Contents
 *
 * 00.0 - Font
 * 01.0 - Layout
 * 02.0 - Header
 * 03.0 - Parallax
 * 04.0 - Section
 * 05.0 - Back to Top
 * 06.0 - Additional AOS Animation
 * 07.0 - For IE10+ Only
 * 08.0 - Footer
 * 09.0 - CSS for Mobile
 */



/**
 * 00.0 - Font
 */
@font-face {
    font-family: 'CenturyGothic';
    src: url('../font/CenturyGothic.eot');
    src: url('../font/CenturyGothic.eot?#iefix') format('embedded-opentype'),
        url('../font/CenturyGothic.woff2') format('woff2'),
        url('../font/CenturyGothic.woff') format('woff'),
        url('../font/CenturyGothic.ttf') format('truetype'),
        url('../font/CenturyGothic.svg#CenturyGothic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad MM';
    src: url('../font/MyriadMM.eot');
    src: url('../font/MyriadMM.eot?#iefix') format('embedded-opentype'),
        url('../font/MyriadMM.woff2') format('woff2'),
        url('../font/MyriadMM.woff') format('woff'),
        url('../font/MyriadMM.ttf') format('truetype'),
        url('../font/MyriadMM.svg#MyriadMM') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

/**
 * 1.0 - Layout
 */
nav {width: 100%; }
h2 {font-size: 9vw; font-family: 'CenturyGothic', Arial, 'Noto Sans TC'; text-shadow: 0rem 0.5rem 0.1rem rgba(0,0,0,.5); letter-spacing: -0.6rem; line-height: 0.9;}
.zh-Hant h2 {font-weight: 400; letter-spacing: 1rem; font-size: 7vw;}
h3 {font-size: 7vw; font-family: 'CenturyGothic', Arial, 'Noto Sans TC'; text-shadow: 0rem 0.5rem 0.1rem rgba(0,0,0,.5); letter-spacing: -0.6rem; line-height: 0.9;}
.zh-Hant h3 {font-weight: 400;}
h4 {font-size: 1.5rem; line-height: 1; letter-spacing: 0.1rem;}
h5 {font-size: 2rem; line-height: 1; letter-spacing: 0.1rem;}
h6 {font-size: 3rem; line-height: 1; letter-spacing: 0.1rem;}
h7 {font-size: 2.9rem; line-height: 1; letter-spacing: 0.1rem;}
h8 {font-size: 3.5rem; line-height: 1.5; letter-spacing: 0.1rem;}
h9 {font-size: 1.7rem; line-height: 1; letter-spacing: 0.1rem;}
h10 {font-size: 0.7rem; color: #fff;}
.zh-Hant h9 {font-weight: 500;}
header .container, footer .container {max-width:1300px;}
.container-fluid {padding-left: 0; padding-right: 0;}
.text-orange {color: #eaa515}
.text-grey {color: #414042;}
.rotated-text {writing-mode: tb-rl;transform: rotate(-180deg);}
.zh-Hant .rotated-text {transform: rotate(0deg); text-align: right; bottom: 20px;}
.ceo_accordion label{ 
    display:block;
    padding-top: 20px; 
    cursor: pointer; 
    text-decoration: underline;
}
.ceo_accordion .ceo_hiddentext{ 
    visibility: hidden; 
    opacity: 0; 
    display: none;
    text-align: left;
    margin-top: 0px;
}
#ceo_text:checked ~ .ceo_hiddentext{
    display: block;
    visibility: visible;
    opacity: 1;
}
input#ceo_text {display: none; position: relative;}
/**
 * 2.0 - Header
 */
header {background-image: linear-gradient(to right, #fff 26%, #12436f 26%);}
.logo-background {
    border-top: 96px solid #fff;
	border-left: 0px solid transparent;
	border-right: 60px solid transparent;
	height: 0;
	width: 381px;
    position: absolute;
    top: 0px;
    z-index: 9;}
header .navbar-brand img {z-index: 10; position: relative;}
header .navbar-nav {margin-bottom: -0.5rem;}
header .nav-link {color: #fff; padding: 1rem;}
header .nav-link:hover {color: rgba(255,255,255,.5);}
header .nav-item {font-family: 'Myriad MM', Arial, 'Noto Sans TC'; line-height: 1.2rem; letter-spacing: 0.05rem;}
.navbar-toggler-icon {width: 3rem; height: 3rem;}
.bar1, .bar2, .bar3 {
  width: 40px;
  height: 3px;
  background-color: #fff;
  margin: 9px 0;
  transition: 0.4s;
}
button[aria-expanded="true"] .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 10px);
  transform: rotate(-45deg) translate(-9px, 10px);
}
button[aria-expanded="true"] .bar2 {opacity: 0;}
button[aria-expanded="true"] .bar3 {
  -webkit-transform: rotate(45deg) translate(-6px, -9px);
  transform: rotate(45deg) translate(-6px, -9px);
}
.zh-Hant header .nav-item {font-weight: 400;}
.lang-link {font-family: 'Myriad MM', Arial, 'Noto Sans TC'; position: absolute; bottom: 4rem; right: 1.75rem; font-size: 0.8rem; color: rgba(255,255,255,0.4);}
.zh-Hant .lang-link {right: 2.5rem;}
.lang-link:hover {color: rgba(255,255,255,1);}
.dropdown-toggle::after {display: none;}
.dropdown:hover > ul.dropdown-menu {display: flex;}
header .dropdown-menu {width:100vw; background-color: rgba(159, 127, 77,.75); padding: 0; margin: 0; border: 0; border-radius: 0; top: auto;}
.active .dropdownmenu.drop {
    display: flex;
    z-index: 9999;
    top: 0px;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.6s; /* Safari 4.0 - 8.0 */
    animation-name: menudrop;
    animation-duration: 0.6s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes menudrop {
  from {top: -51px;}
  to {top: 0px;}
}

/* Standard syntax */
@keyframes menudrop {
  from {top: -51px;}
  to {top: 0px;}
}

.menu1 {max-width: 120px;}
@media (min-width: 576px) {
    .navbar-expand-xl .navbar-nav .nav-link {padding-right: 0.75rem; padding-left: 0.75rem;}
    .zh-Hant .navbar-expand-xl .navbar-nav .nav-link {padding-right: 1.5rem; padding-left: 1.5rem;}
}

/**
 * 3.0 - Parallax
 */

.container-fluid section {
  text-align: center;
  position: relative;
}
.container-fluid section .image {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 998;
}
.container-fluid section .stuff {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  color: #fff;
  z-index: 999;
  position: relative;
}

/**
 * 04.0 - Section
 */
#sustainability, #ceo-msg, #the-report, #verification-statement, #vision, #response, #capabilities, #corporate, #ambitions, #focusareas, #asmp, #compliance, #innovation-top, #recentinnovations, #forward, #resources-top, #actionscecp, #re-wayforward, #community-top, #impactstocomm, #wayforward, #people-top, #peoplestrategies, #primeobjective, #engagementhighlight, #pplwayforward {height: 90vh;}
#about, #alliance  {height: 70vh;}
#about .image, #alliance .image {background-size: cover; background-position: center center;}
#sustainability h2 {padding-bottom: 6rem;}
#about h2 {margin-bottom: 0;}
.zh-Hant #about h2 {line-height: 0.15; font-weight: 400;}
#about .section-fixed-bottom, #alliance .section-fixed-top {z-index: 999;}
.section-fixed-top {position: absolute; top: 0; width: 100%; color: #fff;}
.section-fixed-bottom, .fixed-bottom {position: absolute; bottom: 0; width: 100%; margin: 0; color: #fff; z-index: 999;}
.vision-position {position: absolute; top: 15vh; width: 100%; z-index: 999;}
.vision-position img {width: 100%;}
.subtitle1 {font-family: 'Myriad MM', Arial, 'Noto Sans TC'; font-size: 2.9rem; line-height: 2.6; background-image: linear-gradient(to bottom, rgba(77,130,148, 0.7), rgba(77,130,148,0.2));}
.subtitle1 .layer { background-image: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.3));}
section .row {font-family: 'Eurostile', Arial, 'Noto Sans TC'; color: #fff; font-size: 1.3rem;}
.zh-Hant section .row {font-weight: 100; line-height: 2.5;}
.zh-Hant #milestone .row {line-height: 1.7;}
section.orange {background-color: #eaa515;}
section.blue {background-color: #12436f;}
section.grey {background-color: #414042;}
section.white {background-color: #fff;}
#sustainability-text {height: auto;}
.line {height: 75px; max-width:1px; border-left: 2px solid #fff;}
.long-middle-line {height: 100px; max-width:1px; border-left: 2px solid #fff; padding: 0; margin: 0 30px;}
.section-head {font-size: 2.9rem; line-height: 1.2; padding-top: 45px; padding-bottom: 40px; word-spacing: 0.7rem;}
.zh-Hant .section-head {font-weight: 400;}
.section-head-left {font-size: 3rem; line-height: 1; word-spacing: 0.7rem;}
.section-head-right {font-size: 2.3rem; line-height: 2.2; word-spacing: 0.7rem;}
.zh-Hant .section-head-left, .zh-Hant .section-head-right {font-weight: 400;}
.video {margin-left: 100px;}
.feedback-title {font-size: 4rem; line-height: 1.2; letter-spacing: 0.3rem; font-family: 'Eurostile', Arial, 'Noto Sans TC';}
.zh-Hant .feedback-title {font-weight: 700;}
section dt {font-size: 2rem; padding-bottom: 20px;}
.zh-Hant section dt {font-weight: 500; line-height: 1;}
section dd {padding-bottom: 40px;}
#vision-iconbox dt {color: #eaa515;}
.download-box {border: 2px solid #fff; border-radius: 30px; margin: 20px; padding-right: 0px; padding-left: 0px;}
.download-box:hover, .download-container:hover {background-color: rgba(255,255,255,.3);}
.download-box:hover a, .download-container:hover a {text-decoration: none;}
.download-title {font-size: 1.7rem; color: #fff; padding-top: 20px; padding-bottom: 20px; line-height: 1.5;}
.download-icon {background: url(../img/PDFIcon.png) no-repeat; height: 79px; background-position: center;}
.download-item {color: #fff; line-height: 1; padding-top: 20px; padding-bottom: 20px;}
.zh-Hant .download-item {padding-top: 30px; padding-bottom: 30px;}
#milestone .year {color: #000; font-size: 2rem; line-height: 1;}
#milestone .pin img {max-width: 30px;}
#milestone .content {padding-bottom: 1.5rem;}
.milestone-row {margin-top: -20px;}
.milestone-row ul {padding-left: 20px; padding-inline-start: 20px;}
#capabilities-text .map img:hover {opacity: 0.9;}
.rounded-border {border: 2px solid #fff; border-radius: 3vw; padding: 3vw; overflow: hidden;}
.zh-Hant .rounded-border div {line-height: 1.7;}
.rounded-border.icon-row .row {padding: 15px 0;}
.rounded-border.icon-row .row:last-child {padding-bottom:0;}
.rounded-border .title, #engagement-info .title {color: #eaa515; font-size: 2rem; line-height: 1.1; padding-bottom: 20px;}
.zh-Hant .rounded-border .title {font-weight: 500; line-height: 1;}
.rounded-border.icon-row .icon img {max-width: 100px;}
.zh-Hant .rounded-border.icon-row ul {line-height: 1.7;}
.rounded-border ul {padding-left: 20px; padding-inline-start: 20px;}
.circular-title {font-family: 'Eurostile', Arial, 'Noto Sans TC'; font-size: 4.5rem; line-height: 0.9; color: #fff; position: relative; bottom: -3px; word-spacing: 1rem; padding-bottom: 10px;}
.zh-Hant .circular-title {font-weight: 700; line-height: 1;}
.structure-title {font-family: 'Eurostile', Arial, 'Noto Sans TC'; font-size: 5rem; line-height: 1; color: #414042; position: relative; word-spacing: 1rem;}
.zh-Hant .structure-title {line-height: 0.9;}
.engagement-title {font-family: 'Eurostile', Arial, 'Noto Sans TC'; font-size: 3.5rem; line-height: 1; color: #12436f; letter-spacing: 0.2rem; padding-bottom: 10px;}
.zh-Hant .engagement-title {font-weight: 700;}
.ASA2030-title {font-family: 'Eurostile', Arial, 'Noto Sans TC'; font-size: 3.5rem; line-height: 0.9; color: #EFB64E; letter-spacing: 0.2rem; padding-top: 40px;}
.zh-Hant .ASA2030-title {font-weight: 700; line-height: 1.2;}
.structure-circle {background: url(../img/P4-circle.png) no-repeat; height: 220px; background-position: center;}
.joins {width: 78%;}
.structure-bg {background: url(../img/P4-structure-bg.svg) no-repeat; width: 100%; background-position: bottom;}
#structure-text h4 {max-width: 200px; margin: 0 auto;}
.zh-Hant #structure-text h4 {font-weight: 400; line-height: 1.5;}
#structure-icon img {max-width: 200px; width: 100%;}
#asmp h2 {font-size: 14vw;}
.zh-Hant #asmp h2 {font-size: 9vw;}
#compliance-text .video {margin-left: 0px; margin-right: 60px;}
#engagement-info {overflow: hidden;}
#engagement-info .info-row {padding: 40px 0;}
#engagement-info .icon img {max-width: 200px;}
#engagement-info .tag-container {padding-right: 30px;}
#engagement-info .description-container {font-size: 1rem; padding-right: 40px;}
#engagement-info .description-head {padding-bottom: 30px;}
#engagement-info .description-container ul {padding-left: 15px; padding-inline-start: 15px;}
#engagement-info .download-container {border-left: 1px solid #eaa515;}
#engagement-info .download-title2 {font-size: 1.2rem; color: #fff;}
#engagement-info .download-icon2 {background: url(../img/PDFIcon-Yellow.png) no-repeat; height: 79px; margin: 15px 0;}
#engagement-info .download-item2 { font-size: 1rem; color: #fff; max-width: 90px;}
.zh-Hant #engagement-info .title {font-weight: 500; line-height: 1.5;}
.zh-Hant #engagement-info .description-content {line-height: 1.5;}
.zh-Hant #engagement-info .download-item2 {line-height: 1.5;}
.ambition-triangle-container {margin-top: -130px; margin-bottom: -60px; margin-right: 0; margin-left: 0;}
.triangle-container { z-index: 12; text-align: right; margin-right: -873px;}
.ie-triangle-container {display: none;}
.ambition-triangle {width: 1200px;}
.trianle-title-container { z-index: 13; max-width: 200px; bottom: 112px; text-align: center; margin-right: -100px;}
.triangle-info-container { z-index: 11; bottom: 112px; text-align: left; max-width: 71vw; padding-right: 0; overflow: hidden;}
.zh-Hant .triangle-info-container div {line-height: 1.5;}
.trianle-title-container div {height: 100px; margin-bottom: 15px; line-height: 7;}
.zh-Hant .trianle-title-container div {font-weight: 500;}
.triangle-info-container img {position: absolute;}
.triangle-info-container .row {height: 100px; margin-bottom: 15px; margin-left: 0px; margin-right: 0px;}
.ambition_bar_1 {background: url(../img/P3_ambition_bar_1.svg) no-repeat; background-size: cover;}
.ambition_bar_2 {background: url(../img/P3_ambition_bar_2.svg) no-repeat; background-size: cover;}
.ambition_bar_3 {background: url(../img/P3_ambition_bar_3.svg) no-repeat; background-size: cover;}
.ambition_bar_4 {background: url(../img/P3_ambition_bar_4.svg) no-repeat; background-size: cover;}
.ambition_bar_5 {background: url(../img/P3_ambition_bar_5.svg) no-repeat; background-size: cover;}
.triangle-info-container .row:nth-child(2) {padding-left: 66px;}
.triangle-info-container .row:nth-child(3) {padding-left: 132px;}
.triangle-info-container .row:nth-child(4) {padding-left: 198px;}
.triangle-info-container .row:nth-child(5) {padding-left: 264px;}
.triangle-info-container ul {font-size: 0.8rem; margin-bottom: 0;}
.triangle-info-container ul:nth-child(1) {padding-inline-start: 45px; padding-left: 45px;}
.triangle-info-container ul:nth-child(2) {padding-inline-start: 55px; padding-left: 55px;}
.triangle-info-container ul:nth-child(3) {padding-inline-start: 67px; padding-left: 67px;}
.triangle-info-container ul:nth-child(4) {padding-inline-start: 79px; padding-left: 79px;}
#ASA2030 h5 {color: #EAA515;}
.response-row-container, #actionscecp-text .row-container, #managementao-text .row-container, #activitiesincomm-text .row-container, #peoplestrategies-text .row-container {border-bottom: 2px solid #fff;}
#response-text .response-row-container:last-child, #actionscecp-text .row-container:last-child, #managementao-text .row-container:last-child, #activitiesincomm-text .row-container:last-child, #peoplestrategies-text .row-container:last-child {border-bottom: 0px; padding-bottom: 150px;}
.response-title {font-family: 'Eurostile', Arial, 'Noto Sans TC'; font-size: 3.5rem; line-height: 1.2; color: #eaa515; letter-spacing: 0.2rem; padding-top: 70px; padding-bottom: 30px;}
.zh-Hant .response-title {font-weight: 700;}
.response-section1, .response-section2 {padding-right: 50px;}
.response-section2 {padding-bottom: 30px;}
.response-section2 img {border: 3px solid #fff; width: 100%; margin-top: 15px; margin-bottom: 15px;}
.response-section3 ul {padding-inline-start: 20px; padding-left: 20px;}
.zh-Hant .response-section3 {line-height: 1.5;}
.response-section3 li {padding-bottom: 30px; padding-left: 30px;}
#innovation-top-text .container {overflow: hidden;}
.dotted-bottom-border {border-bottom: 2px dotted #fff;}
.remove-side-padding {padding-right: 0; padding-left: 0;}
#innovation-top-text .title, #actionscecp-text .title, #activitiesincomm-text .title {font-size: 2rem; color: #12436f; line-height: 1; font-weight: 500;}
.recentinnovations-number {font-size: 7rem; line-height: 1; letter-spacing: -8px;}
.recentinnovations-no-title {font-size: 2rem; line-height: 1.3; padding: 20px 0 0 40px;}
.zh-Hant .recentinnovations-no-title {font-weight: 500; padding: 60px 0 0 40px;}
#recentinnovations-text-2 .rounded-sm-border {border: 1px solid #fff; border-radius: 13px; padding: 13px; margin: 15px 0;}
#recentinnovations-text-2 .rounded-sm-border-text {line-height: 1;}
.zh-Hant #recentinnovations-text-2 .rounded-sm-border-text {line-height: 1.3; font-weight: 500; font-size: 1.1rem;}
#recentinnovations-text-2 .down-arrow {width: 10px;}
.rounded-sm-border img {width: 40px;}
.perfhighlights-title {font-size: 4rem; line-height: 0.9; letter-spacing: 0.3rem; font-family: 'Eurostile', Arial, 'Noto Sans TC'; padding-bottom: 10px;}
.zh-Hant .perfhighlights-title {font-weight: 700;}
.zh-Hant #highlights-text .row {line-height: 1.15;}
.info-box {border: 2px solid #fff; border-radius: 20px; padding: 20px; margin: 0 20px 30px 20px; line-height: 1.2;}
#perfhighlights-text .info-box {padding: 40px 20px;}
.zh-Hant #ourawards-text .info-box {padding: 20px 5px;}
.info-box-row1 {width: 100%; font-size: 2rem; color: #fff;}
.zh-Hant .info-box-row1 {font-size: 1.7rem; font-weight: 500;}
.info-box-row2 {width: 100%; font-size: 3rem; color: #eaa515; padding-top: 20px;}
.zh-Hant .info-box-row2 {padding-top: 10px; font-weight: 500;}
.info-box-row3 {width: 100%; font-size: 1.5rem; color: #fff; padding-top: 20px;}
.zh-Hant .info-box-row3 {font-size: 1.7rem; font-weight: 500; padding-top: 10px;}
.info-box-row4 {width: 100%; color: #fff;}
.zh-Hant .info-box-row4 {font-weight: 500; line-height: 1.5; font-size: 1.5rem; letter-spacing: 3px;}
.info-box-row5-text {color: #eaa515; padding-top: 45px; padding-left: 5px; padding-right: 5px;}
.zh-Hant .info-box-row5-text {color: #fff; padding-top: 0;}
.info-box-row5-number {font-size: 3rem; color: #eaa515; padding-top: 40px; padding-left: 0; padding-right: 0;}
.zh-Hant .info-box-row5-number {padding-top: 0px;}
.info-box-row6 {width: 100%; font-size: 1.5rem; color: #fff;}
.info-box-row7 {width: 100%; font-size: 1rem; color: #fff; padding-top: 3px; padding-left: 0; padding-right: 0;}
.info-box-row8 {width: 100%; font-size: 2rem; color: #eaa515; line-height: 1;}
.zh-Hant .info-box-row8 {font-weight: 500; line-height: 1.5;}
.info-box-row9 {font-size: 0.8rem;}
.info-box-row9.text {line-height: 1.2; padding-bottom: 10px;}
.info-box-row10 {width: 100%; font-size: 2rem; color: #fff; line-height: 1.5; font-weight: 500;}
.info-bars>.row {padding: 0 15px;}
.info-bars .row .col-3, .info-bars .row .col-12 {padding: 0 10px;}
.square-1 {height: 10px; width: 10px; background-color:#eaa515;}
.square-2 {height: 10px; width: 10px; background-color:#eaa515;}
.square-3 {height: 10px; width: 10px; background-color:#eaa515;}
.square-4 {height: 10px; width: 10px; background-color:#eaa515;}
.info-box .row-container {padding-top: 15px; padding-bottom: 15px;}
.info-box .row-container img {max-width: 110px;}
.info-box-head {width: 100%; font-size: 1rem; color: #eaa515; line-height: 1.2; padding-bottom: 10px;}
.info-box-desc {width: 100%; font-size: 1rem; line-height: 1.3;}
.info-box-desc ul {padding-left: 15px; padding-inline-start: 15px;}
#actionscecp-text .row-container, #activitiesincomm-text .row-container, #peoplestrategies-text .row-container {padding-top: 60px; padding-bottom: 60px;}
#actionscecp-text .left-container, #activitiesincomm-text .left-container {padding-right: 100px;}
#actionscecp-text .row-container img, #activitiesincomm-text .row-container img, #peoplestrategies-text .row-container img {width: 100%;}
#managementao-text ul {padding-left: 100px; padding-top: 40px;}
#managementao-text li {padding-left: 30px;}
#highlights-text .info-box .col-sm-2 {margin-left: 10px; margin-right: 10px;}
#peoplestrategies-text .title {color: #eaa515; font-size: 2rem; line-height: 1; letter-spacing: 0.1rem; padding-top: 20px;}
.zh-Hant #peoplestrategies-text .title {font-weight: 500;}
#ourawards-text .info-box.col-xl-3 {max-width: 245px;}
#primeobjective-text .header-line {position: absolute; top: 0; border-bottom: 2px solid #fff; height: 80px; width: 100%;}
#primeobjective-text .header-content .col-5 {max-width: 410px;}
#primeobjective-text .case-studies h5 {color: #000; line-height: 1.5;}
.zh-Hant #primeobjective-text .case-studies h5,
.zh-Hant #primeobjective-text .case-studies h8 {font-weight: 500;}
#primeobjective-text .case-studies .case-row {padding-top: 15px; padding-bottom: 15px;}
#primeobjective-text .case-studies .case-row:last-child {padding-bottom: 90px;}
#primeobjective-text .case-studies .case-row ul {padding-left: 60px; padding-inline-start: 60px;}
#primeobjective-text .case-studies .case-row ul li {padding-left: 20px;}


/**
 * 05.0 - Back to Top
 */
#myBtn {display: none; position: fixed; bottom: 20px; right: 30px; z-index: 999; border: none; background-color: rgba(255,255,255,.5); padding: 15px; padding-bottom: 5px; border-radius: 4px;}

#myBtn:hover {background-color: #555;}

i {border: solid #f4f4f4; border-width: 0 5px 5px 0; display: inline-block; padding: 5px;}

.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}

/**
 * 06.0 - Additional AOS Animation
 */
[data-aos=fade-rotate-half] {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari 3-8 */
    transform: rotate(180deg);
}html:not(.no-js)

[data-aos="px100-95"].aos-animate {
    animation-name: px100-95;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes px100-95 {
  from {height:100px;}
  to {height:95px;}
}
/* Standard syntax */
@keyframes px100-95 {
  from {height:100px;}
  to {height:95px;}
}

[data-aos="px100-48"].aos-animate {
    animation-name: px100-48;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes px100-48 {
  from {height:100px;}
  to {height:48px;}
}
/* Standard syntax */
@keyframes px100-48 {
  from {height:100px;}
  to {height:48px;}
}

[data-aos="px100-0"].aos-animate {
    animation-name: px100-0;
    animation-duration: 2s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes px100-0 {
  from {height:100px; background-color: #fff;}
  to {height:0px; background-color: #fff;}
}
/* Standard syntax */
@keyframes px100-0 {
  from {height:100px; background-color: #fff;}
  to {height:0px; background-color: #fff;}
}

[data-aos="px300-7"].aos-animate {
    animation-name: px300-7;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes px300-7 {
  from {height:300px; background-color: #eaa515;}
  to {height:50px; background-color: #eaa515;}
}
/* Standard syntax */
@keyframes px300-7 {
  from {height:300px; background-color: #eaa515;}
  to {height:50px; background-color: #eaa515;}
}

[data-aos="px300-4"].aos-animate {
    animation-name: px300-4;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes px300-4 {
  from {height:300px; background-color: #eaa515;}
  to {height:40px; background-color: #eaa515;}
}
/* Standard syntax */
@keyframes px300-4 {
  from {height:300px; background-color: #eaa515;}
  to {height:40px; background-color: #eaa515;}
}

[data-aos="px300-3"].aos-animate {
    animation-name: px300-3;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes px300-3 {
  from {height:300px; background-color: #eaa515;}
  to {height:30px; background-color: #eaa515;}
}
/* Standard syntax */
@keyframes px300-3 {
  from {height:300px; background-color: #eaa515;}
  to {height:30px; background-color: #eaa515;}
}

/**
 * 07.0 - For IE10+ Only 
 */

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    .ambition-triangle-container {display: none;}
    .ie-triangle-container {display: block; text-align: center;}
    .ie-triangle-container img {width: 100%; max-width: 1400px; margin-top: -100px; margin-bottom: -100px;}
}


/**
 * 08.0 - Footer
 */
footer {background-color: #58595b;}
footer .navbar-nav {margin-bottom: -0.5rem;}
footer .nav-link {color: #fff; padding: 1rem;}
.zh-Hant footer .nav-link {font-weight: 400;}
footer .nav-link:hover {color: rgba(255,255,255,.5);}
footer .nav-item {font-family: 'Myriad MM', Arial, 'Noto Sans TC'; line-height: 1.2rem; letter-spacing: 0.05rem;}

/**
 * 09.0 - CSS for Mobile
 */

@media only screen and (max-width: 1199.98px) { /*xl*/
    h2 {font-size: 11vw; letter-spacing:0; text-shadow: 0rem 0.2rem 0.1rem rgba(0,0,0,.5);}
    h3 {font-size: 8vw; letter-spacing: 0; text-shadow: 0rem 0.2rem 0.1rem rgba(0,0,0,.5);}
    .zh-Hant h2 {font-size: 11vw;}
    .zh-Hant h3 {font-size: 10vw;}
    header {background-color: #12436f; background-image: none;}
    header .logo-background {left: -30px;}
    header .dropdown:hover > ul.dropdown-menu, header .active .dropdownmenu.drop {display: none;}
    header ul.navbar-nav {-ms-flex-align:center!important; align-items: center!important;}
    .navbar-nav {padding-top: 10px;}
    .lang-link {bottom: 1rem;}
    .navbar-brand {width: 258px;}
    .subtitle1 {font-size: 2rem;}
    
    section .row {font-size: 1rem;}
    .section-head {font-size: 2rem;}
    
    .embed-responsive-cs {position: relative; display: block; width: 100%; padding: 0; overflow: hidden; margin-bottom: 20px;}
    .embed-responsive-cs::before {display: block; content: "";}
    .embed-responsive-cs .embed-responsive-item {position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0;}
    .video {margin-left: 0;}
    
    #ceo-msg .image {background-position: 17% center!important;}
    .feedback-title {font-size: 2.7rem;}
    
    #ASA2030 .ie-triangle-container {display: block;}
    #ASA2030 .ie-triangle-container img {width: 100%;}
    #ASA2030 .ambition-triangle-container {display: none;}
    
    #compliance-text figure img {width: 100%!important; height: auto!important;}
    
    #highlights-text .info-box {max-width: 80vw;}
    
    #primeobjective-text .row {overflow: hidden;}
    #primeobjective-text .header-line {height: 65px;}
    #primeobjective-text h8 {font-size: 3rem;}
    #primeobjective-text h5 {font-size: 1.8rem;}
    
    #ourawards-text .info-box.col-xl-3 {max-width: 100%;}
    #ourawards-text .row {padding-bottom: 0px!important; overflow: hidden;}
}

@media only screen and (max-width: 991.98px) { /*lg*/
    .section-head-left {font-size: 1.5rem; word-spacing: 0;}
    .long-middle-line {height: 65px; margin: 0;}
    .section-head-right {font-size: 1.3rem; word-spacing: 0; line-height: 1.3; padding-top: 15px;}
    
    #milestone .year {font-size: 1.2rem;}
    #milestone .content {font-size: 0.9rem;}
    #milestone .pin {padding-right: 5px; padding-left: 5px;}
    #milestone .pin img {width: 15px;}
    
    #capabilities-text .map img {padding-left: 0!important; padding-top: 20px;}
    #capabilities-text .rounded-border {margin: 5px;}
    #capabilities-text .rounded-border .icon {padding-bottom: 15px;}
    #capabilities-text .rounded-border .title {font-size: 1.7rem;}
    
    #circular-text .line {margin-left: 12vw!important; height: 60px;}
    #circular-text img { padding-top: 0px; padding-bottom: 30px;}
    #circular-text .section-head {margin-left: 0!important;}
    
    #engagement .line {margin-left: 0!important;}
    
    #engagement-info .tag-container {padding: 15px;}
    #engagement-info .description-container {padding-right: 15px;}
    
    .response-section1, .response-section2 {padding-right: 15px;}
    
    .structure-circle {height: 150px; background-size: contain;}
    #structure-text h4.structure-text {font-size: 1rem; max-width: 150px;}
    #structure-text h4 {font-size: 0.6rem;}
    #structure-text .team-text .col-3{padding-right: 5px; padding-left: 5px;}
    
    #recentinnovations-text-2 .last-div, .zh-Hant #recentinnovations-text-2 .last-div {padding-right: 15px!important;}
    
    #actionscecp-text .left-container, #activitiesincomm-text .left-container {padding-right: 15px; padding-bottom: 20px;}
    
    #perfhighlights-text .info-box {min-width: 300px;}
    #perfhighlights-text .award .info-box-row2 {font-size: 3.8vw;}
    
    #rmapproach-text .container {overflow: hidden;}
    #rmapproach-text .text-1 {padding-right: 15px!important; padding-bottom: 30px;}
    #rmapproach-text .row-1 {padding-bottom: 0px!important;}
    
    #highlights-text .remark {padding-top: 30px!important; padding-right: 0; padding-left: 0;}
    
    #peoplestrategies-text .left-container {padding-bottom: 20px;}
    
    #primeobjective-text .header-line {height: 45px;}
    #primeobjective-text h8 {font-size: 3vw; line-height: 1.5}
    #primeobjective-text h5 {font-size: 2.5vw;}
    #primeobjective-text .col-12>h5 {padding-top: 15px;}
    
}

@media only screen and (max-width: 767.98px) { /*md*/
    #primeobjective-text .header-line {height: 30px;}
    #primeobjective-text h8 {font-size: 1.7rem; line-height: 0.8;}
    #primeobjective-text h5 {font-size: 1.2rem;;}
    #primeobjective-text .col-12>h5 {padding-top: 10px;}
    
    .zh-Hant #primeobjective-text h8 {font-size: 1.6rem; line-height: 0.8;}
    .zh-Hant #primeobjective-text h5 {font-size: 1.2rem;;}
    .zh-Hant #primeobjective-text .col-12>h5 {padding-top: 0px;}    
}

@media only screen and (max-width: 575.98px) { /*col-*/
    .navbar-brand img {height: 50px; width: auto;}
    header .logo-background {left: -95px;}
    .logo-background {border-top: 78px solid #fff;}
    .navbar-toggler {padding-right: 0; padding-top: 0.5rem;}
    .navbar-brand {width: 184px;}
    
    .circular-title {font-size: 10vw;}
    .engagement-title {font-size: 10vw;}
    #ASA2030 .ASA2030-title {font-size: 10vw;}
    .response-title {font-size: 10vw;}
    .structure-title {font-size: 10vw;}
    .perfhighlights-title {font-size: 10vw;}
    
    .dotted-bottom-border {margin-right: 0px; margin-left: 0px;}
    
    .recentinnovations-number {font-size: 20vw;}
    .recentinnovations-no-title {font-size: 6vw; padding-top: 10px;}
    .zh-Hant .recentinnovations-no-title {padding-top: 10px; padding-right: 15px;}
    
    #managementao-text ul {padding-left: 10vw;}

    .zh-Hant #resources-top-text .container {padding-bottom: 150px!important;}
    
    #rmapproach-text .col-sm-3 img {padding-bottom: 10px;}
    
    #highlights-text .info-box .row.justify-content-center .col-2 {padding-left: 10px; padding-right: 10px;}
    
    .info-box-row9 {font-size: 0.7rem; line-height: 0;}
    
    .full-row-info .info-box, .full-row-info .info-box .col-4.info-bars, .info-bars>.row, .col-1.rotated-text {padding-left: 10px; padding-right: 10px;}

    .info-bars .row .col-3, .info-bars .row .col-12 {padding: 0 7px;}
    
    h10 {font-size: 0.5rem;}
    
    #primeobjective-text .header-line {height: 35px;}
    #primeobjective-text h8 {font-size: 2rem; line-height: 0.8;}
    #primeobjective-text h5 {font-size: 1.3rem;}
    #primeobjective-text .col-12>h5 {padding-top: 10px;}
    #primeobjective-text img {max-width: 65px;}

    .zh-Hant #primeobjective-text h8 {font-size: 1.8rem; line-height: 0.7;}
    .zh-Hant #primeobjective-text h5 {font-size: 1.2rem;}
    .zh-Hant #primeobjective-text .col-12>h5 {padding-top: 0px;}
    
    
}