body { font-family: "Open Sans","Roboto","Microsoft JhengHei UI","Microsoft JhengHei",Helvetica,Arial,sans-serif;
    margin: 0; width: 100%; background:#FFF url(/images/bg.png) no-repeat; background-size: 100% 500px; }
#header { display: flex; justify-content: space-between; align-items: center; height: 3.38vw;
    min-height: 45px; max-height: 55px; padding: 0 2.6vw; border-bottom: 1px #9EE6DF solid; }
#header > .title { font-size: 20px;}
#header > .translate { position: relative; width: 21.6px; height: 20.16px; cursor: pointer; flex-shrink: 0;
    background: url(/images/translate.png) no-repeat; background-size: contain; }
.translate > .translate-buttons { position: absolute; background: #ffffff; border-radius: 6px;
    padding: 5px 0; top: 28px; right: 0; width: 140px; display: none;box-shadow: 0px 2px 4px 0px rgba(158,158,158,0.50); }
.translate > .translate-buttons > a { display: block; text-decoration: none; text-align: center;
    color: #333333; font-size: 16px; height: 42px; line-height: 42px; }
.translate > .translate-buttons > a:hover { background: #eff9f8; }
#header-logo > .logo { position: absolute; left: 0; top: 0; width: 259px; height: 235px;
    background: url(/images/logo-bg.png) no-repeat; background-size: contain; z-index: -1; }
#header-logo > .logo2 { position: absolute; right:   0; top: 80px; width: 401px; height: 269px;
    background: url(/images/logo2.png) no-repeat; background-size: contain; z-index: -1; }
#header-logo > .logo-text { position: absolute; left: 2.6vw;  top: 100px; width: 188px; height: 36px;
    background: url(/images/logo-text.png) no-repeat; background-size: contain; z-index: -1; }
#header-logo > .logo-text-pt { position: absolute; left: 2.6vw;  top: 100px; width: 443px; height: 26px;
    background: url(/images/logo-text-pt.png) no-repeat; background-size: contain; z-index: -1; }
#header-logo > .logo-text-en { position: absolute; left: 2.6vw;  top: 100px; width: 443px; height: 26px;
    background: url(/images/logo-text-en.png) no-repeat; background-size: contain; z-index: -1; }
#footer { padding: 40px 36px 20px; display: flex; flex-direction: row; justify-content: flex-end; color: #666666; font-size: 18px; line-height: 18px; }
#footer > .link { margin-right: 45px; }
#footer > .link > .divider { margin: 0 20px; }
#footer a { color: #009688; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

@media only screen and (min-height: 1000px) {
    .footer { position: absolute; bottom: 0; left: 0; right: 0; }
}
@media only screen and (max-width: 576px) and (min-height: 800px) {
    .footer { position: absolute; left: 0; right: 0; width: 100%; }
}
@media only screen and (max-width: 576px) {
    body { background-size: 100% 260px; }
    #header, #header2 { padding: 0 16px !important; }
    #header > .title { font-size: 18px; }
    #footer { display: flex; flex-direction: column; align-items: center; padding: 20px 0; border-top: 1px #ECECEC solid; }
    #footer > .link { margin-right: 0; margin-bottom: 12px; }
    #footer > .link > .divider { margin: 0 25px; }
}

/* pt */
@media only screen and (max-width: 1034px) {
    .pt #footer { display: flex; flex-direction: column; align-items: center; padding: 20px 0; border-top: 1px #ECECEC solid;margin-top: 25px;}
    .pt #footer > .link { margin-right: 0; margin-bottom: 12px; }
    .pt #footer > .link > .divider { margin: 0 45px; }
}
@media only screen and (max-width: 576px) {
    .pt #header > .title { width: 260px; font-size: 16px; line-height: 18px; }
    .pt #footer > .link > .divider { margin: 0 40px; }
}
@media only screen and (max-width: 500px) {
    .pt #footer .terms-of-use-url { width: 95px; }
    .pt #footer .privacy-statement-url { width: 88px; }
    .pt #footer > .link { display: flex; width: 245px; justify-content: space-between; align-items: center;}
    .pt #footer > .link > .divider { margin: 0 10px; }
    .pt #footer .safp-url { width: 250px; text-align: center; }
}

/* en */
@media only screen and (max-width: 1034px) {
    .en #footer { display: flex; flex-direction: column; align-items: center; padding: 20px 0; border-top: 1px #ECECEC solid;margin-top: 25px;}
    .en #footer > .link { margin-right: 0; margin-bottom: 12px; }
    .en #footer > .link > .divider { margin: 0 45px; }
}
@media only screen and (max-width: 576px) {
    .en #header > .title { width: 260px; font-size: 16px; line-height: 18px; }
    .en #footer > .link > .divider { margin: 0 40px; }
}
@media only screen and (max-width: 500px) {
    .en #footer .terms-of-use-url { width: 100px; }
    .en #footer .privacy-statement-url { width: 54px; }
    .en #footer > .link { display: flex; width: 230px; justify-content: space-between; align-items: center;}
    .en #footer > .link > .divider { margin: 0 10px; }
    .en #footer .safp-url { width: 240px; text-align: center; }
}

.ribbon { background-color: rgba(170, 0, 0, 0.5); left: -138px; overflow: hidden; position: fixed;top: 58px;
    transform: rotate(-45deg); moz-transform: rotate(-45deg); ms-transform: rotate(-45deg); o-transform: rotate(-45deg);
    webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
    white-space: nowrap; width: 458px; z-index: 9999; pointer-events: none; opacity: 0.75; font-size: 60px; height: 60px; }
.ribbon a { font-size: 24px; line-height: 60px; color: #fff; display: block; font-weight: 400; margin: 1px 0;
    text-align: center; text-decoration: none; text-shadow: 0 0 5px #444; pointer-events: none; }