@charset 'utf-8';

/* =========================================================
 * 整頁區塊
 * ========================================================= */
:root{
    --headerBgColor: #FFFFFF;
    --bodyBgColor: #FFFFFF;
    --bodyFontColor: #000000;
    --bodyFontColorBlue: #0046A0;
    --bodyFontFamily: "Lucida Grande","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --bodyFontFamilyTitle: 'Calisto MT', 'Times New Roman', Arial;
    --darkBlockBackground: #F5F5F5;
    --footerBgColor: #121E4A;
    --footerContentColor: #FFFFFF;
    --mainDarkBlueColor: #121E4A;
    --mainBlueColor: #0046A0;
    --mainWhiteColor: #FFFFFF;
}

html{
    color: var(--bodyFontColor);
    font-family: var(--bodyFontFamily);
    font-size: 14px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html{
        font-size: 3.7333vw;
    }
}

*{
    font-family: var(--bodyFontFamily);
}

.portraitDisplay,
.portraitOnly{
    display: none !important;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .portraitDisplay,
    .portraitOnly{
        display: flex !important;
    }
    .landscapeDisplay,
    .landscapeOnly{
        display: none !important;
    }
}

body>#wrap{
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    body>#wrap{
        position: absolute;
        top: 0px;
        left: 0px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
.hidden{
    width: 1px !important;
    height: 1px !important;
    padding: 1px 0px 0px 1px !important;
    position: fixed !important;
    top: -1px !important;
    left: -1px !important;
    overflow: hidden !important;
}

.checkRWDLandscapeItem{
    display: flex;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .checkRWDLandscapeItem{
        display: none;
    }
}
.checkRWDPortraitItem{
    display: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .checkRWDPortraitItem{
        display: flex;
    }
}

/* 共用 Banner 滑動 */
.horizontalSliderArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
.horizontalSliderArea>.mask{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
}
.horizontalSliderArea>.mask>ul.slider{
    width: inherit;
    min-width: max-content;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    white-space: nowrap;
    position: relative;
}
.horizontalSliderArea>.mask>ul.slider>li{
    width: inherit;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.horizontalSliderArea>.mask>ul.slider>li:before{
    content: '';
    display: block;
    margin-top: 26.0417%;
}
.horizontalSliderArea>.mask>ul.slider>li[onclick]:not([onclick='']){
    cursor: pointer;
}
.horizontalSliderArea>.mask>ul.slider>li>figure{
    width: inherit;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}
.horizontalSliderArea>.mask>ul.slider>li>figure>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .horizontalSliderArea>.mask>ul.slider>li>figure>img{
        -webkit-user-select: unset;
        -moz-user-select: unset;
        -ms-user-select: unset;
        user-select: unset;
        -webkit-user-drag: unset;
    }
}
.horizontalSliderArea>ul.page{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 6.25%;
    bottom: 7.2727%;
    z-index: 2;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .horizontalSliderArea>ul.page{
        display: none;
    }
}
.horizontalSliderArea>ul.page>li{
    display: flex;
    margin: 0px 10px;
}
@media only screen and (max-width: 1440px){
    .horizontalSliderArea>ul.page>li{
        margin: 0px 5px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .horizontalSliderArea>ul.page>li{
        margin: 0px 0.7037vw;
    }
}
.horizontalSliderArea>ul.page>li>input{
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 100%;
    color: transparent;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .horizontalSliderArea>ul.page>li>input{
        width: 1.241vw;
        height: 1.241vw;
    }
}
.horizontalSliderArea>ul.page>li.current>input{
    background: #FFFFFF;
}

/* 共用 Contact 下拉 checkbox 工具 */
.checkboxArea{
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px;
    position: relative;
    -webkit-user-select: none;
}
.checkboxArea>input[type='checkbox']{
    display: none;
}
.checkboxArea>input[type='checkbox'] ~ span{
    width: calc(1.05vw - 1px * 2);
    height: calc(1.05vw - 1px * 2);
    background-color: rgb(255, 255, 255);
    border: 1px solid #000000;
    display: flex;
    position: relative;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .checkboxArea>input[type='checkbox'] ~ span{
        width: calc(3vw - 1px * 2);
        height: calc(3vw - 1px * 2);
    }
}
.checkboxArea>input[type='checkbox']:active ~ span,
.checkboxArea>input[type='checkbox']:checked ~ span{
    background-color: #FFFFFF;
}
.checkboxArea>input[type='checkbox'] ~ span:after{
    content: '';
    width: 0.221vw;
    height: 0.443vw;
    border: solid #000000;
    border-width: 0px 0.2vw 0.2vw 0px;
    display: none;
    position: absolute;
    left: 0.283vw;
    bottom: 0.177vw;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .checkboxArea>input[type='checkbox'] ~ span:after{
        width: 0.6314vw;
        height: 1.2657vw;
        border-width: 0px 0.5714vw 0.5714vw 0px;
        left: 0.8086vw;
        bottom: 0.5057vw;
    }
}
.checkboxArea>input[type='checkbox']:active ~ span:after,
.checkboxArea>input[type='checkbox']:checked ~ span:after{
    display: block;
}
.checkboxArea>input[type='checkbox'] ~ p{
    margin: 0px 0px 0px 10px;
}

/* 共用 Insight / News Search 下拉選單 */
.selectMenuArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .selectMenuArea{
        display: none;
    }
}
.selectMenuArea>div{
    width: calc(100% - 30px);
    cursor: pointer;
    overflow: hidden;
}
.selectMenuArea>ul{
    width: 100%;
    background: #FFFFFF;
    border: 0px;
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.selectMenuArea>ul>li{
    width: calc(100% - 10px * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 10px;
    cursor: pointer;
}
.selectMenuArea>ul>li.current,
.selectMenuArea>ul>li.current:hover{
    background-color: var(--mainBlueColor);
    color: var(--mainWhiteColor);
}
.selectMenuArea>ul>li:hover{
    background: #EEEEEE;
    color: var(--bodyFontColorBlue);
}
.selectMenuArea>ul>li:first-child{
    padding: 10px 10px 5px 10px;
}
.selectMenuArea>ul>li:last-child{
    padding: 5px 10px 10px 10px;
}

/* 共用 Insight Subscribe / Unsubscribe / News Media Contact */
.noticeArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background-color: transparent;
    background-image: url(/images/subscribeBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin: 0px 0px 0px 0px;
    padding: 35px calc((100% - 1360px) / 2);
    position: relative;
}
@media only screen and (max-width: 1440px){
    .noticeArea{
        width: calc(100% - 6.85% * 2);
        padding: 1.66667vw 6.85%;
    }
}
@media only screen and (max-width: 1149px){
    .noticeArea{
        width: calc(100% - 6.85% * 2);
        align-items: stretch;
        padding: 1.66667vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .noticeArea{
        width: calc(100% - 4.8vw * 2);
        background-image: url(/images/subscribeBackgroundPortrait.jpg);
        flex-direction: column;
        padding: 10.6667vw 4.8vw;
    }
}
.noticeArea>.contentArea{
    color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
@media only screen and (max-width: 1149px){
    .noticeArea>.contentArea{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
}
.noticeArea>.contentArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .noticeArea>.contentArea>h2{
        font-size: 2.8571rem;
    }
}
.noticeArea>.contentArea>p{
    max-width: 100%;
    line-height: 200%;
    margin: 0px 0px 0px 15px;
}
@media only screen and (max-width: 1149px){
    .noticeArea>.contentArea>p{
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .noticeArea>.contentArea>p{
        margin: 1rem 0px 0px 0px;
    }
}
.noticeArea>.contentArea>p>a{
    color: #FFFFFF;
    text-decoration: underline;
}
.noticeArea>.buttonArea{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: stretch;
    margin: 0px 0px 0px 0px;
}
@media only screen and (max-width: 1149px){
    .noticeArea>.buttonArea{
        align-items: flex-end;
        padding: 0px 0px 8px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .noticeArea>.buttonArea{
        width: 100%;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 0px;
    }
}
.noticeArea>.buttonArea>input[type='email']{
    min-width: 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .noticeArea>.buttonArea>input[type='email']{
        width: 100%;
        font-size: 1rem;
        margin: 1rem 0px 0px 0px;
        padding: 4vw 0px;
    }
}
.noticeArea>.buttonArea>input[type='email']::placeholder{
    color: #FFFFFF;
}
.noticeArea>.buttonArea>input[type='email']:-ms-input-placeholder{
    color: #FFFFFF;
}
.noticeArea>.buttonArea>input[type='email']::-ms-input-placeholder{
    color: #FFFFFF;
}
.noticeArea>.buttonArea>input[type='button']{
    min-width: calc(200px - 15px * 2);
    background-color: transparent;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 20px;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .noticeArea>.buttonArea>input[type='button']{
        width: 100%;
        min-width: unset;
        height: 12vw;
        font-size: 1.1429rem;
        margin: 6.6667vw 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
}
.noticeArea>.formArea{
    display: none;
}

/* 共用 文章區塊 */
.articleArea .banner{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
.articleArea .banner>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
.articleArea .banner>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.articleArea .banner>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

.articleArea article{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 4.6875vw 0px 6.5104vw 0px;
    padding: 0px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    .articleArea article{
        width: calc(100% - 6.85% * 2);
        padding: 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article{
        width: calc(100% - 4.8vw * 2);
        margin: 0px;
        padding: 10.6667vw 4.8vw;
    }
}
.articleArea article>.titleArea{
    width: 100%;
    border-bottom: 1px solid #0058D9;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 25px 0px;
}
.articleArea article>.titleArea>h1{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.5714rem;
    font-weight: normal;
    line-height: 130%;
}
@media only screen and (max-width: 1440px){
    .articleArea article>.titleArea>h1{
        font-size: 2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.titleArea>h1{
        font-size: 2.1429rem;
    }
}
.articleArea article>.titleArea>p.date{
    margin: 15px 0px 0px 0px;
}
.articleArea article>.contentArea{
    width: 100%;
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
.articleArea article>.contentArea ul{
    width: calc(100% - 2rem);
    list-style-type: disc;
    margin: 1rem 0px 0px 0px;
    padding: 0px 0px 0px 2rem;
}
.articleArea article>.contentArea ul>li{
    margin: 1rem 0px 0px 0px;
}
.articleArea article>.contentArea ul>li:first-child{
    margin: 0px;
}
.articleArea article>.contentArea ol{
    width: calc(100% - 2rem);
    list-style-type: number;
    margin: 1rem 0px 0px 0px;
    padding: 0px 0px 0px 2rem;
}
.articleArea article>.contentArea ol>li{
    margin: 1rem 0px 0px 0px;
}
.articleArea article>.contentArea ol>li:first-child{
    margin: 0px;
}
.articleArea article>.contentArea>p{
    width: 100%;
    margin: 1rem 0px 0px 0px;
}
.articleArea article>.contentArea>*:first-child{
    margin: 0px;
}
.articleArea article>.contentArea *{
    max-width: 100% !important;
}
.articleArea article>.contactArea{
    width: 100%;
    line-height: 150%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 2.6042vw 0px 0px 0px;
}
.articleArea article>.contactArea>p{
    color: #0058D9;
    margin: 1rem 0px 0px 0px;
}
.articleArea article>.contactArea>p>a{
    color: #0058D9;
    text-decoration: underline;
}
.articleArea article>.authorsArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 2.6042vw 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.authorsArea{
        margin: 10.6667vw 0px 0px 0px;
    }
}
.articleArea article>.authorsArea>h2{
    width: 100%;
    border-bottom: 1px solid #000000;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
    padding: 0px 0px 25px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.authorsArea>h2{
        font-size: 1.7143rem;
        padding: 0px 0px 5.3333vw 0px;
    }
}
.articleArea article>.authorsArea>.author{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 35px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.authorsArea>.author{
        flex-direction: column;
        padding: 5.3333vw 0px 0px 0px;
    }
}
.articleArea article>.authorsArea>.author>.photo{
    width: 200px;
    height: 200px;
    background-image: radial-gradient(circle, #231815 70%, transparent 70%);
    background-size: contain;
    background-position: center center;
    border-radius: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.authorsArea>.author>.photo{
        width: 26.6667vw;
        height: 26.6667vw;
    }
}
.articleArea article>.authorsArea>.author>.photo>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
.articleArea article>.authorsArea>.author>.photo>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.articleArea article>.authorsArea>.author>.photo>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
.articleArea article>.authorsArea>.author>.info{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 0px 35px;
    padding: 20px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.authorsArea>.author>.info{
        margin: 5.3333vw 0px 0px 0px;
        padding: 0px;
    }
}
.articleArea article>.authorsArea>.author>.info>h3{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
}
.articleArea article>.authorsArea>.author>.info>p{
    line-height: 150%;
    margin: 25px 0px 0px 0px;
}

.articleArea article>.othersArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 35px 0px 0px 0px;
}
.articleArea article>.othersArea>h2{
    width: 100%;
    border-bottom: 1px solid #000000;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
    padding: 0px 0px 25px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.othersArea>h2{
        font-size: 1.7143rem;
        padding: 0px 0px 5.3333vw 0px;
    }
}
.articleArea article>.othersArea>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 1rem 0px 0px 0px;
}
.articleArea article>.othersArea>ul>li{
    line-height: 120%;
    margin: 1rem 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.othersArea>ul>li{
        line-height: normal;
    }
}
.articleArea article>.othersArea>ul>li>a{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.3714rem;
    line-height: normal;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .articleArea article>.othersArea>ul>li>a{
        font-size: 1.2857rem;
    }
}
.articleArea article>.tags{
    width: 100%;
    margin: 2.6042vw 0px 0px 0px;
}

/* 共用 文章 tags */
.tags{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.tags>h2{
    width: 100%;
    border-bottom: 1px solid #000000;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
    margin: 0px 0px 17.5px 0px;
    padding: 0px 0px 25px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .tags>h2{
        border-bottom: 0px;
        font-size: 2.3333rem;
        margin: 0px;
        padding: 0px;
    }
}
.tags>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
.tags>ul>li{
    min-width: calc(200px - 15px * 2);
    border: 1px solid #C9CACA;
    color: #9FA0A0;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 7.5px 15px 7.5px 0px;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .tags>ul>li{
        min-width: unset;
        margin: 2.5px 5px 2.5px 0px;
    }
}
.tags>ul>li:after{
    content: '+';
    margin: 0px 0px 0px 5px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .tags>label{
        width: 100%;
        border-bottom: 1px solid #0058D9;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
    .tags>label>select{
        width: 100%;
        background: transparent;
        border: 0px;
        color: #727171;
        font-size: 1rem;
        display: flex;
        padding: 1rem 30px 1rem 0px;
        outline: none;
    }
}

/* 左右滑動按鈕 */
div.prevBtn,
div.nextBtn{
    width: 60px;
    height: 80px;
    border: 0px;
    color: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    div.prevBtn,
    div.nextBtn{
        width: 40px;
        height: 60px;
    }
}
div.prevBtn{
    left: 0px;
}
div.nextBtn{
    right: 0px;
}
div.prevBtn:hover,
div.nextBtn:hover{
    transform: translateY(-50%) scale(1.2);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    div.prevBtn:hover,
    div.nextBtn:hover{
        transform: translateY(-50%);
    }
}
div.prevBtn:hover{
    left: calc(60px * 0.2 / 2);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    div.prevBtn:hover{
        left: 0px;
    }
}
div.nextBtn:hover{
    right: calc(60px * 0.2 / 2);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    div.nextBtn:hover{
        right: 0px;
    }
}
div.prevBtn:after,
div.nextBtn:after{
    content: '';
    width: 35px;
    height: 35px;
    filter: drop-shadow(0px 0px 6px #000000);
    border-style: solid;
    border-color: var(--mainWhiteColor);
    border-width: 0 2px 2px 0;
    position: absolute;
    left: 50%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    div.prevBtn:after,
    div.nextBtn:after{
        width: 21px;
        height: 21px;
    }
}
div.prevBtn:after{
    transform: translateX(-15%) rotate(135deg);
}
div.nextBtn:after{
    transform: translateX(-85%) rotate(-45deg);
}


/* 共用 Popup Window */
.popupWindow{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 101;
}
.popupWindow>.detail{
    max-width: calc(100% - 6.85% * 2);
    background: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .popupWindow>.detail{
        max-width: calc(100% - 4.8vw * 2);
    }
    .popupWindow.leaders>.detail{
        max-width: 100%;
    }
}
.popupWindow>.detail>.content{
    min-width: 290px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
.popupWindow>.detail>input[type='button']{
    width: 15px;
    height: 15px;
    background-color: transparent;
    background-image: url(/images/iconCloseGray.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 0px;
    color: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: 30px;
    left: 30px;
    cursor: pointer;
}
.popupWindow.leaders>.detail>input[type='button']{
    filter: drop-shadow(1px 1px 1px #000000);
}
.popupWindow>.detail>input[type='button']:hover{
    transform: scale(1.5);
}


body>.loading{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
}
body>.loading>img{
    width: 4vw;
    height: 4vw;
    opacity: 0;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    body>.loading>img{
        width: 12vw;
        height: 12vw;
    }
}

*::placeholder{
    color: #C5C6C6;
}
*:-ms-input-placeholder{
    color: #C5C6C6;
}
*::-ms-input-placeholder{
    color: #C5C6C6;
}

@keyframes animationFadeIn{
    0%  { opacity: 0; }
    100%{ opacity: 1; }
}
@keyframes animationFadeOut{
    0%  { opacity: 1; }
    100%{ opacity: 0; }
}


/* =========================================================
 * Header 區塊
 * ========================================================= */
#wrap>header{
    width: calc(100% - 100px * 2);
    height: 70px;
    background-color: var(--headerBgColor);
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 0px 100px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
}
@media only screen and (max-width: 1440px){
    #wrap>header{
        width: calc(100% - 6.85% * 2);
        padding: 0px 6.85%;
    }
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header{
        width: calc(100vw - 4.8vw * 2);
        height: auto;
        flex-direction: column;
        padding: 0px 4.8vw;
    }
    #wrap>header.open{
        height: 100%;
        flex-direction: column;
        padding: 0px 4.8vw;
    }
}

/* left */
#wrap>header>.left{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.left{
        width: 100%;
        height: 70px;
    }
}
@media screen and (orientation: portrait){
    #wrap>header>.left{
        height: 16vw;
    }
}
#wrap>header>.left>.logo{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#wrap>header>.left>.logo>a{
    width: 100%;
    height: 100%;
    display: flex;
}
#wrap>header>.left>.logo img{
    height: 36px;
    display: flex;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.left>.logo img{
        width: auto;
        height: 36px;
        padding: 0px;
    }
}
@media screen and (orientation: portrait){
    #wrap>header>.left>.logo img{
        width: 31.721vw;
        height: 8vw;
    }
}

/* right */
#wrap>header>.right{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right{
        width: 100%;
        flex-direction: column;
        overflow: hidden;
    }
}
#wrap>header>.right>div{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>div{
        width: 100%;
        height: auto;
        justify-content: flex-end;
        align-items: flex-end;
    }
}
#wrap>header>.right>.mainMenu{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu{
        display: none;
    }
    #wrap>header.open>.right>.mainMenu{
        width: 100%;
        background: #FFFFFF;
        display: flex;
        flex-grow: 0;
        flex-shrink: 1;
        padding: 0px;
        overflow-y: auto;
    }
}
#wrap>header>.right>.mainMenu>nav{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav{
        width: 100%;
        flex-direction: column;
    }
}
#wrap>header>.right>.mainMenu>nav>ul{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav>ul{
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
    }
}
#wrap>header>.right>.mainMenu>nav>ul>li{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px 2.0833vw 0px 0px;
    position: relative;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav>ul>li{
        width: 100%;
        height: auto;
        border-bottom: 1px solid #121E4A;
        flex-grow: 1;
        align-items: flex-start;
        padding: 15px 0px;
    }
}
@media screen and (orientation: portrait){
    #wrap>header>.right>.mainMenu>nav>ul>li{
        padding: 0px;
    }
}
#wrap>header>.right>.mainMenu>nav>ul>li>a,
#wrap>header>.right>.mainMenu>nav>ul>li>div,
#wrap>header>.right>.mainMenu>nav>ul>li>div>a{
    color: var(--mainDarkBlueColor);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.2857rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
@media screen and (orientation: portrait){
    #wrap>header>.right>.mainMenu>nav>ul>li>a,
    #wrap>header>.right>.mainMenu>nav>ul>li>div,
    #wrap>header>.right>.mainMenu>nav>ul>li>div>a{
        width: 100%;
        font-size: 1.4286rem;
        padding: 4.8vw 0px;
    }
}
@media screen and ((orientation: landscape) and (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav>ul>li>a,
    #wrap>header>.right>.mainMenu>nav>ul>li>div,
    #wrap>header>.right>.mainMenu>nav>ul>li>div>a{
        width: 100%;
        font-size: 1.4286rem;
        padding: 1rem 0px;
    }
}
#wrap>header>.right>.mainMenu>nav>ul>li.current>a,
#wrap>header>.right>.mainMenu>nav>ul>li.current>div,
#wrap>header>.right>.mainMenu>nav>ul>li.current>div>a{
    color: #0058D9;
}
#wrap>header>.right>.mainMenu>nav>ul>li>ul{
    background: #FFFFFF;
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    top: 70px;
    left: -20px;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav>ul>li>ul{
        width: 100%;
        background: transparent;
        box-shadow: unset;
        display: flex;
        flex-grow: 1;
        align-items: flex-start;
        padding: 0px;
        position: relative;
        top: 0px;
        left: 0px;
    }
}
#wrap>header>.right>.mainMenu>nav>ul>li>ul>li{
    width: max-content;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav>ul>li>ul>li{
        flex-grow: 1;
        padding: 15px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait){
    #wrap>header>.right>.mainMenu>nav>ul>li>ul>li{
        padding: 4.8vw 0px 0px 0px;
    }
}
#wrap>header>.right>.mainMenu>nav>ul>li>ul>li>a{
    width: calc(100% - 10px * 2);
    min-width: max-content;
    color: var(--mainDarkBlueColor);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.2857rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 10px;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.mainMenu>nav>ul>li>ul>li>a{
        width: 100%;
        font-size: 1.0714rem;
        padding: 0px;
    }
}
#wrap>header>.right>.mainMenu>nav>ul>li>ul>li.current>a{
    color: #0058D9;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.others{
        flex-grow: 1;
    }
}
#wrap>header>.right>.others>.social{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.others>.social{
        display: none;
    }
    #wrap>header.open>.right>.others>.social{
        width: 100%;
        background: #FFFFFF;
        display: flex;
        justify-content: flex-end;
        padding: 20px 0px;
    }
}
@media screen and (orientation: portrait){
    #wrap>header.open>.right>.others>.social{
        padding: 4.8vw 0px;
    }
}
#wrap>header>.right>.others>.social>li{
    height: 25px;
    opacity: 0.9;
    margin: 0px 0px 0px 10px;
    position: relative;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.others>.social>li{
        height: 40px;
        opacity: 1;
        margin: 0px 0px 0px 15px;
    }
}
@media screen and (orientation: portrait){
    #wrap>header>.right>.others>.social>li{
        height: 9.6vw;
        margin: 0px 0px 0px 3.2vw;
    }
}
#wrap>header>.right>.others>.social>li:hover{
    opacity: 1;
}
#wrap>header>.right>.others>.social>li>a{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>header>.right>.others>.social>li>a>img{
    height: 100%;
}
#wrap>header>.right>.others>.social>li>a+div{
    background: #FFFFFF;
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    top: calc(25px + (70px - 25px) / 2);
    right: 0px;
}
@media only screen and (min-width: 959px){
    #wrap>header>.right>.others>.social>li>a:hover+div{
        display: flex;
    }
}
@media only screen and (min-width: 959px){
    #wrap>header>.right>.others>.social>li.open>a+div{
        display: flex;
    }
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.others>.social>li.open>a+div{
        top: unset;
        bottom: 0;
        right: calc(9.6vw + 4px);
    }
}
#wrap>header>.right>.others>.social>li.wechat>.qrCode>img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center center;
}
#wrap>header>.right>.menuIcon{
    display: none;
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header>.right>.menuIcon{
        width: 39.1308px;
        height: 36px;
        background-color: transparent;
        background-image: linear-gradient(
            0deg,
            #121E4A calc(4.3478% * 2),
            transparent calc(4.3478% * 2),
            transparent calc(50% - 4.3478%),
            #121E4A calc(50% - 4.3478%),
            #121E4A calc(50% + 4.3478%),
            transparent calc(50% + 4.3478%),
            transparent calc(100% - 4.3478% * 2),
            #121E4A calc(100% - 4.3478% * 2)
        );
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        align-items: center;
        padding: 0px;
        position: absolute;
        top: calc((70px - 36px) / 2);
        right: 4.8vw;
    }
}
@media screen and (orientation: portrait){
    #wrap>header>.right>.menuIcon{
        width: 6.6667vw;
        height: 6.1333vw;
        top: 4.8vw;
    }
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header.open>.right>.menuIcon{
        background-image: none;
    }
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header.open>.right>.menuIcon:before,
    #wrap>header.open>.right>.menuIcon:after{
        content: ' ';
        width: 1.7145px;
        height: 36px;
        background-color: var(--mainDarkBlueColor);
        position: absolute;
        left: 50%;
    }
}
@media screen and (orientation: portrait){
    #wrap>header.open>.right>.menuIcon:before,
    #wrap>header.open>.right>.menuIcon:after{
        width: 0.2667vw;
        height: 5.6vw;
    }
}
@media screen and ((orientation: portrait) or (max-width: 959px)){
    #wrap>header.open>.right>.menuIcon:before{
        transform: translateX(-50%) rotate(45deg);
    }
    #wrap>header.open>.right>.menuIcon:after{
        transform: translateX(-50%) rotate(-45deg);
    }
    #wrap>header>.right>.menuIcon>input[type='button']{
        width: 100%;
        height: 100%;
        background-color: transparent;
        border: 0px;
        color: transparent;
        padding: 0px;
        z-index: 2;
    }
}


/* =========================================================
 * 頁面 區塊
 * ========================================================= */
#wrap>.page{
    width: 100%;
    background: var(--bodyBgColor);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 70px 0px 0px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>.page{
        padding: 16vw 0px 0px 0px;
    }
}
#wrap>.page>.viewArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}


/* =========================================================
 * Home Page
 * ========================================================= */
/* Banner */
html.index .horizontalSliderArea>.mask>ul.slider>li:before{
    content: '';
    display: block;
    margin-top: 26.0417%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .horizontalSliderArea>.mask>ul.slider>li:before{
        margin-top: 100%;
    }
}


/* Insight 區塊 */
html.index .insightArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 5.2083vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.index .insightArea{
        width: calc(100% - 6.85% * 2);
        padding: 5.2083vw 6.85%;
    }
}
@media only screen and (max-width: 1200px){
    html.index .insightArea{
        flex-direction: column;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea{
        width: calc(100% - 4.8vw * 2);
        padding: 8vw 4.8vw;
    }
}
html.index .insightArea>.titleArea{
    width: calc(18.75vw - 2.3438vw - 2.8646vw);
    max-width: calc(360px - 2.3438vw - 2.8646vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 15px 2.8646vw 0px 2.3438vw;
    position: relative;
}
@media only screen and (max-width: 1200px){
    html.index .insightArea>.titleArea{
        width: 100%;
        max-width: unset;
        padding: 0px 0px 2.8646vw 0px;
        margin: 0px 0px 2.8646vw 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.titleArea{
        width: calc(100% - 6.6667vw);
        padding: 0px 0px 0px 6.6667vw;
    }
}
html.index .insightArea>.titleArea:before{
    content: '';
    width: 0.5208vw;
    height: 100%;
    background-image: linear-gradient(180deg, #121E4A 0%, #121E4A 11.8029vw, #0052BD 11.8029vw, #0052BD 100%);
    position: absolute;
    top: 0px;
    left: 0px;
}
@media only screen and (max-width: 1200px){
    html.index .insightArea>.titleArea:before{
        width: 100%;
        height: 0.5208vw;
        background-image: linear-gradient(90deg, #121E4A 0%, #121E4A 11.8029vw, #0052BD 11.8029vw, #0052BD 100%);
        top: unset;
        bottom: 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.titleArea:before{
        content: '';
        width: 1.6vw;
        height: 100%;
        background-image: linear-gradient(180deg, #121E4A 0%, #121E4A 11.8029vw, #0052BD 11.8029vw, #0052BD 100%);
        position: absolute;
        top: 0px;
        left: 0px;
    }
}
html.index .insightArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.index .insightArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.index .insightArea>.titleArea>p{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.titleArea>p{
        font-size: 1rem;
        line-height: 150%;
        margin: 5px 0px 0px 0px;
    }
}
html.index .insightArea>.insights{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
}
html.index .insightArea>.insights>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    margin: 25px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li{
        margin: 4.8vw 0px 0px 0px;
    }
}
html.index .insightArea>.insights>li:first-child{
    margin: 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li:first-child{
        margin: 4.8vw 0px 0px 0px;
    }
}
html.index .insightArea>.insights>li>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: stretch;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure{
        flex-direction: column;
    }
}
html.index .insightArea>.insights>li>figure>picture{
    width: 25.4688vw;
    max-width: 490px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>picture{
        width: 100%;
        flex-direction: column;
    }
}
html.index .insightArea>.insights>li:nth-child(even)>figure>picture{
    order: 2;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li:nth-child(even)>figure>picture{
        order: unset;
    }
}
html.index .insightArea>.insights>li>figure>picture:before{
    content: '';
    display: block;
    margin-top: 52%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>picture:before{
        margin-top: 51.8292%;
    }
}
html.index .insightArea>.insights>li>figure>picture:after{
    content: '';
    width: 22.2222%;
    max-width: 426px;
    height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 95%);
    position: absolute;
    top: 0px;
    right: 0px;
    transition: all 0.5s ease-out;
}
html.index .insightArea>.insights>li:nth-child(even)>figure>picture:after{
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0) 100%);
    right: unset;
    left: 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>picture:after,
    html.index .insightArea>.insights>li:nth-child(even)>figure>picture:after{
        width: 100%;
        height: 45%;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 95%);
        top: unset;
        right: 0px;
        bottom: 0px;
        left: 0px;
    }
}
html.index .insightArea>.insights>li:hover>figure>picture:after{
    width: 30%;
    transition: all 0.5s ease-out;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li:hover>figure>picture:after{
        width: 100%;
        height: 0px;
    }
}
html.index .insightArea>.insights>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.index .insightArea>.insights>li>figure>figcaption{
    width: calc(100% - 25.4688vw - 2.0833vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 0px 0px 2.0833vw;
    position: relative;
    left: 0px;
    transition: all 0.5s ease-out;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>figcaption{
        width: 100%;
        padding: 0px;
    }
}
html.index .insightArea>.insights>li:hover>figure>figcaption{
    left: -0.5vw;
    transition: all 0.5s ease-out;
}
html.index .insightArea>.insights>li:nth-child(even)>figure>figcaption{
    padding: 0px 2.0833vw 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li:nth-child(even)>figure>figcaption{
        padding: 0px;
    }
}
html.index .insightArea>.insights>li:nth-child(even):hover>figure>figcaption{
    left: 0.5vw;
    transition: all 0.5s ease-out;
}
html.index .insightArea>.insights>li>figure>figcaption>h3{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.8571rem;
    font-weight: normal;
    line-height: 120%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin: 8px 0px 0px 0px;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>figcaption>h3{
        font-size: 1.7143rem;
    }
}
html.index .insightArea>.insights>li>figure>figcaption>p{
    width: 100%;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin: 0.8em 0px;
    padding: 0.8em 0px 0px 0px;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>figcaption>p{
        line-height: 150%;
    }
}
html.index .insightArea>.insights>li>figure>figcaption>div{
    color: var(--bodyFontColorBlue);
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 0px 0px 10px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .insightArea>.insights>li>figure>figcaption>div{
        font-size: 0.8571rem;
    }
}
html.index .insightArea>.insights>li>figure>figcaption>div:after{
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 1px 0px 0px;
    display: flex;
    margin: 0px 0px 0px 0.3rem;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Newscenter 區塊 */
html.index .newscenterArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background: var(--darkBlockBackground);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 2.6042vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.index .newscenterArea{
        width: calc(100% - 6.85% * 2);
        padding: 2.6042vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea{
        width: calc(100% - 4.8vw * 2);
        padding: 10.6667vw 4.8vw 4.8vw 4.8vw;
    }
}
html.index .newscenterArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
html.index .newscenterArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.index .newscenterArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.index .newscenterArea>.titleArea>p{
    width: 50%;
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.titleArea>p{
        width: 100%;
        font-size: 1rem;
        line-height: 150%;
        margin: 5px 0px 0px 0px;
    }
}
html.index .newscenterArea>.news{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 1.8229vw 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news{
        flex-direction: column;
        margin: 0px;
    }
}
html.index .newscenterArea>.news>li{
    width: calc((100% - (27px * 2 + 1px) * 3) / 4);
    border-right: 1px solid #0058D9;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 27px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news>li{
        width: 100%;
        border-right: 0px;
        margin: 4.8vw 0px;
        padding: 0px;
    }
}
html.index .newscenterArea>.news>li:first-child{
    padding: 0px 27px 0px 0px;
}
html.index .newscenterArea>.news>li:last-child{
    border-right: 0px;
    padding: 0px 0px 0px 27px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news>li:last-child{
        padding: 0px;
    }
}
html.index .newscenterArea>.news>li>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
html.index .newscenterArea>.news>li>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
html.index .newscenterArea>.news>li>figure>picture:before{
    content: '';
    display: block;
    margin-top: 75%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news>li>figure>picture:before{
        margin-top: 85.3659%;
    }
}
html.index .newscenterArea>.news>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
html.index .newscenterArea>.news>li:hover>figure>picture>img{
    transform: scale(1.05);
}
html.index .newscenterArea>.news>li>figure>figcaption{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1em 0px 0px 0px;
}
html.index .newscenterArea>.news>li>figure>figcaption>h3{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.8571em;
    font-weight: normal;
    line-height: 120%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news>li>figure>figcaption>h3{
        font-size: 1.7143rem;
    }
}
html.index .newscenterArea>.news>li>figure>figcaption>p{
    width: 100%;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin: 1rem 0px;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news>li>figure>figcaption>p{
        line-height: 150%;
    }
}
html.index .newscenterArea>.news>li>figure>figcaption>div{
    color: var(--bodyFontColorBlue);
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>.news>li>figure>figcaption>div{
        font-size: 0.8571rem;
    }
}
html.index .newscenterArea>.news>li>figure>figcaption>div:after{
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 1px 0px 0px;
    display: flex;
    margin: 0px 0px 0px 0.3rem;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
html.index .newscenterArea>input[type='button']{
    width: 18.75vw;
    max-width: 360px;
    height: 3.125vw;
    max-height: 60px;
    background: var(--mainBlueColor);
    border: 0px;
    color: var(--mainWhiteColor);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.7143rem;
    cursor: pointer;
}
@media only screen and (max-width: 1440px){
    html.index .newscenterArea>input[type='button']{
        font-size: 1.2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .newscenterArea>input[type='button']{
        width: 100%;
        max-width: unset;
        height: 12vw;
        background: var(--mainDarkBlueColor);
        font-size: 1.4286rem;
        margin: 4.8vw 0px 0px 0px;
    }
}


/* Our Partners 區塊 */
html.index .ourPartnersArea,
html.about .ourPartnersArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5.2083vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.index .ourPartnersArea,
    html.about .ourPartnersArea{
        width: calc(100% - 6.85% * 2);
        padding: 5.2083vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .ourPartnersArea,
    html.about .ourPartnersArea{
        width: calc(100% - 4.8% * 2);
        padding: 13.3333vw 4.8%;
    }
}
html.index .ourPartnersArea>.titleArea,
html.about .ourPartnersArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
html.index .ourPartnersArea>.titleArea:after,
html.about .ourPartnersArea>.titleArea:after{
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px solid #0058D9;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}
html.index .ourPartnersArea>.titleArea>h2,
html.about .ourPartnersArea>.titleArea>h2{
    background: #FFFFFF;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    position: relative;
    padding: 0px 2.60417vw;
    z-index: 2;
}
@media only screen and (max-width: 1440px){
    html.index .ourPartnersArea>.titleArea>h2,
    html.about .ourPartnersArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .ourPartnersArea>.titleArea>h2,
    html.about .ourPartnersArea>.titleArea>h2{
        font-size: 2.2857rem;
    }
}
html.index .ourPartnersArea>.partnersArea,
html.about .ourPartnersArea>.partnersArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 2.6042vw 0px 0px 0px;
}
html.index .ourPartnersArea>.partnersArea>.mask,
html.about .ourPartnersArea>.partnersArea>.mask{
    width: inherit;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html.index .ourPartnersArea>.partnersArea>.mask>ul,
html.about .ourPartnersArea>.partnersArea>.mask>ul{
    width: inherit;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
html.index .ourPartnersArea>.partnersArea>.mask>ul>li,
html.about .ourPartnersArea>.partnersArea>.mask>ul>li{
    width: calc(100% / 6 - 6px * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 6px;
}
@media only screen and (max-width: 1440px){
    html.index .ourPartnersArea>.partnersArea>.mask>ul>li,
    html.about .ourPartnersArea>.partnersArea>.mask>ul>li{
        width: calc(100% / 5 - 6px * 2);
    }
}
@media only screen and (max-width: 1200px){
    html.index .ourPartnersArea>.partnersArea>.mask>ul>li,
    html.about .ourPartnersArea>.partnersArea>.mask>ul>li{
        width: calc(100% / 4 - 6px * 2);
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .ourPartnersArea>.partnersArea>.mask>ul>li,
    html.about .ourPartnersArea>.partnersArea>.mask>ul>li{
        width: calc(100% / 3 - 6px * 2);
    }
}
html.index .ourPartnersArea>.partnersArea>.mask>ul>li[onclick]:not([onclick='']),
html.about .ourPartnersArea>.partnersArea>.mask>ul>li[onclick]:not([onclick='']){
    cursor: pointer;
}
html.index .ourPartnersArea>.partnersArea>.mask>ul>li>figure,
html.about .ourPartnersArea>.partnersArea>.mask>ul>li>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
html.index .ourPartnersArea>.partnersArea>.mask>ul>li>figure:before,
html.about .ourPartnersArea>.partnersArea>.mask>ul>li>figure:before{
    content: '';
    display: block;
    margin-top: 42.8571%;
}
html.index .ourPartnersArea>.partnersArea>.mask>ul>li>figure>img,
html.about .ourPartnersArea>.partnersArea>.mask>ul>li>figure>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Contact Us 區塊 */
html.index .contactUsArea,
html.product .contactUsArea,
html.contact .contactUsArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background-color: transparent;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 2.5vw calc((100% - 1360px) / 2);
}
html.contact .contactUsArea{
    padding: 0px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.index .contactUsArea,
    html.product .contactUsArea{
        width: calc(100% - 6.85% * 2);
        padding: 2.5vw 6.85%;
    }
    html.contact .contactUsArea{
        width: 100%;
        padding: 0px;
    }
}
@media only screen and (max-width: 1200px){
    html.index .contactUsArea,
    html.product .contactUsArea{
        width: calc(100% - 6.85% * 2);
        flex-direction: column;
        padding: 5.2083vw 6.85%;
    }
    html.contact .contactUsArea{
        width: 100%;
        flex-direction: column;
        padding: 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea,
    html.product .contactUsArea{
        width: calc(100% - 4.8% * 2);
        background-color: var(--footerBgColor);
        background-image: var(--contactUsAreaPortrait-backgroundImage) !important;
        padding: 10.6667vw 4.8%;
    }
}
html.index .contactUsArea>.titleArea,
html.product .contactUsArea>.titleArea,
html.contact .contactUsArea>.titleArea{
    width: calc(330px - 40px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 40px 0px 0px;
    position: relative;
}
@media only screen and (max-width: 1200px){
    html.index .contactUsArea>.titleArea,
    html.product .contactUsArea>.titleArea,
    html.contact .contactUsArea>.titleArea{
        width: 100%;
        margin: 0px 0px 40px 0px;
        padding: 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.titleArea,
    html.product .contactUsArea>.titleArea,
    html.contact .contactUsArea>.titleArea{
        margin: 0px;
    }
}
html.index .contactUsArea>.titleArea>h2,
html.product .contactUsArea>.titleArea>h2,
html.contact .contactUsArea>.titleArea>h2{
    color: #FFFFFF;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.index .contactUsArea>.titleArea>h2,
    html.product .contactUsArea>.titleArea>h2,
    html.contact .contactUsArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.titleArea>h2,
    html.product .contactUsArea>.titleArea>h2,
    html.contact .contactUsArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.contact .contactUsArea>.titleArea>h2{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.titleArea>p,
html.product .contactUsArea>.titleArea>p,
html.contact .contactUsArea>.titleArea>p{
    color: #FFFFFF;
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.titleArea>p,
    html.product .contactUsArea>.titleArea>p,
    html.contact .contactUsArea>.titleArea>p{
        font-size: 1rem;
        line-height: 150%;
    }
}
html.contact .contactUsArea>.titleArea>p{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form,
html.product .contactUsArea>.form,
html.contact .contactUsArea>.form{
    border-left: 1px solid #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 0px 0px 40px;
}
html.contact .contactUsArea>.form{
    border-left: 1px solid #000000;
}
@media only screen and (max-width: 1200px){
    html.index .contactUsArea>.form,
    html.product .contactUsArea>.form,
    html.contact .contactUsArea>.form{
        border-left: 0px;
        padding: 0px;
    }
}
html.index .contactUsArea>.form>.row,
html.product .contactUsArea>.form>.row,
html.contact .contactUsArea>.form>.row{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 1rem 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row,
    html.product .contactUsArea>.form>.row,
    html.contact .contactUsArea>.form>.row{
        flex-direction: column;
        margin: 0px;
    }
}
html.index .contactUsArea>.form>.row:first-child,
html.product .contactUsArea>.form>.row:first-child,
html.contact .contactUsArea>.form>.row:first-child{
    margin: 0px;
}
html.index .contactUsArea>.form>.row.buttonArea,
html.product .contactUsArea>.form>.row.buttonArea,
html.contact .contactUsArea>.form>.row.buttonArea{
    justify-content: center;
    margin: 38px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row.buttonArea,
    html.product .contactUsArea>.form>.row.buttonArea,
    html.contact .contactUsArea>.form>.row.buttonArea{
        margin: 2rem 0px 0px 0px;
    }
}
html.index .contactUsArea>.form>.row>.column,
html.product .contactUsArea>.form>.row>.column,
html.contact .contactUsArea>.form>.row>.column{
    width: calc(50% - 40px);
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 0px 0px 40px;
    padding: 1em 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column,
    html.product .contactUsArea>.form>.row>.column,
    html.contact .contactUsArea>.form>.row>.column{
        width: 100%;
        margin: 0px;
        padding: 2rem 0px 1rem 0px;
    }
}
html.contact .contactUsArea>.form>.row>.column{
    border-bottom: 1px solid #000000;
}
html.index .contactUsArea>.form>.row>.column:first-child,
html.product .contactUsArea>.form>.row>.column:first-child,
html.contact .contactUsArea>.form>.row>.column:first-child{
    margin: 0px;
}
html.index .contactUsArea>.form>.row>.column>label,
html.product .contactUsArea>.form>.row>.column>label,
html.contact .contactUsArea>.form>.row>.column>label{
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>label,
    html.product .contactUsArea>.form>.row>.column>label,
    html.contact .contactUsArea>.form>.row>.column>label{
        min-width: 25%;
        font-size: 1rem;
    }
}
html.contact .contactUsArea>.form>.row>.column>label{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>.column.required>label:after,
html.product .contactUsArea>.form>.row>.column.required>label:after,
html.contact .contactUsArea>.form>.row>.column.required>label:after{
    content: '*';
    margin: 0px 0px 0px 5px;
}
html.index .contactUsArea>.form>.row>.column>input,
html.product .contactUsArea>.form>.row>.column>input,
html.contact .contactUsArea>.form>.row>.column>input{
    width: 100%;
    min-width: 0px;
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 1em;
    -webkit-tap-highlight-color: #FFFFFF;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>input,
    html.product .contactUsArea>.form>.row>.column>input,
    html.contact .contactUsArea>.form>.row>.column>input{
        font-size: 1rem;
    }
}
html.contact .contactUsArea>.form>.row>.column>input{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>.column>div.telArea,
html.product .contactUsArea>.form>.row>.column>div.telArea,
html.contact .contactUsArea>.form>.row>.column>div.telArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode{
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 1em;
    padding: 0px 0px 0px 0px;
    position: relative;
    -webkit-tap-highlight-color: #FFFFFF;
}
html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after{
    content: '';
    width: 7.6px;
    height: 7.6px;
    border: solid #FFFFFF;
    border-width: 0px 1px 1px 0px;
    display: flex;
    position: absolute;
    top: 4px;
    right: 5px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 0;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after,
    html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after,
    html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after{
        top: 3px;
        right: 4px;
    }
}
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode:after{
    border: solid #000000;
    border-width: 0px 1px 1px 0px;
}
html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode.open:after,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode.open:after,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode.open:after{
    top: 10px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}
html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select{
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    padding: 0px 20px 0px 5px;
    -webkit-tap-highlight-color: #FFFFFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 2;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select,
    html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select,
    html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select{
        font-size: 1rem;
    }
}
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select{
    color: var(--bodyFontColor);
}

html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select:invalid,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select:invalid,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select:invalid{
    color: #999999;
}
html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select option,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select option,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select option{
    color: #000000;
}
html.index .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select option:disabled,
html.product .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select option:disabled,
html.contact .contactUsArea>.form>.row>.column>div.telArea>div.contryCode>select option:disabled{
    color: #999999;
}

html.index .contactUsArea>.form>.row>.column>div.telArea>input,
html.product .contactUsArea>.form>.row>.column>div.telArea>input,
html.contact .contactUsArea>.form>.row>.column>div.telArea>input{
    width: 100%;
    min-width: 0px;
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 5px;
    -webkit-tap-highlight-color: #FFFFFF;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>input,
    html.product .contactUsArea>.form>.row>.column>input,
    html.contact .contactUsArea>.form>.row>.column>input,
    html.index .contactUsArea>.form>.row>.column>div.telArea>input,
    html.product .contactUsArea>.form>.row>.column>div.telArea>input,
    html.contact .contactUsArea>.form>.row>.column>div.telArea>input{
        font-size: 1rem;
    }
}
html.contact .contactUsArea>.form>.row>.column>input,
html.contact .contactUsArea>.form>.row>.column>div.telArea>input{
    color: var(--bodyFontColor);
}

html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after{
    content: '';
    width: 7.6px;
    height: 7.6px;
    border: solid #FFFFFF;
    border-width: 0px 1px 1px 0px;
    display: flex;
    position: absolute;
    top: 8px;
    right: 0px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after,
    html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after,
    html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after{
        top: 3px;
        right: 4px;
    }
}
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea:after{
    border: solid #000000;
    border-width: 0px 1px 1px 0px;
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea.open:after,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea.open:after,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea.open:after{
    top: 14px;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input{
    width: calc(100% - 2px * 2 - 1em - 20px);
    min-width: 0px;
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 1em;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input,
    html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input,
    html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input{
        font-size: 1rem;
    }
}
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>input{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu{
    width: calc(100% - 10px * 2 - 1em);
    background: #FFFFFF;
    border: 0px;
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 0px 1em;
    padding: 10px;
    position: absolute;
    top: calc(100% + 1em);
    left: 0px;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0px 0px 0px;
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li:first-child,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li:first-child,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li:first-child{
    margin: 0px;
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li>.checkboxArea,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li>.checkboxArea,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>ul.selectMenu>li>.checkboxArea{
    font-size: 1rem;
}
html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select,
html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select,
html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select{
    display: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select,
    html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select,
    html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select{
        width: 100%;
        height: 100%;
        background: transparent;
        border: 0px;
        color: transparent;
        display: block;
        position: absolute;
        left: 0px;
        top: 0px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    html.index .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select option:checked,
    html.product .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select option:checked,
    html.contact .contactUsArea>.form>.row>.column>.selectCheckedMenuArea>select option:checked{
        background-color: transparent;
        color: transparent;
    }
}
html.index .contactUsArea>.form>.row>.column>textarea,
html.product .contactUsArea>.form>.row>.column>textarea,
html.contact .contactUsArea>.form>.row>.column>textarea{
    width: calc(100% - 2px * 2);
    min-width: 0px;
    max-height: calc(1.0714rem * 20 * 1.35);
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    resize: vertical;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.column>textarea,
    html.product .contactUsArea>.form>.row>.column>textarea,
    html.contact .contactUsArea>.form>.row>.column>textarea{
        max-height: calc(1rem * 20 * 1.38);
        font-size: 1rem;
        resize: none;
    }
}
html.contact .contactUsArea>.form>.row>.column>textarea{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>.column>textarea::placeholder,
html.product .contactUsArea>.form>.row>.column>textarea::placeholder{
    color: #FFFFFF;
}
html.index .contactUsArea>.form>.row>.column>textarea:-ms-input-placeholder,
html.product .contactUsArea>.form>.row>.column>textarea:-ms-input-placeholder{
    color: #FFFFFF;
}
html.index .contactUsArea>.form>.row>.column>textarea::-ms-input-placeholder,
html.product .contactUsArea>.form>.row>.column>textarea::-ms-input-placeholder{
    color: #FFFFFF;
}
html.contact .contactUsArea>.form>.row>.column>textarea::placeholder{
    color: var(--bodyFontColor);
}
html.contact .contactUsArea>.form>.row>.column>textarea:-ms-input-placeholder{
    color: var(--bodyFontColor);
}
html.contact .contactUsArea>.form>.row>.column>textarea::-ms-input-placeholder{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>.privacy,
html.product .contactUsArea>.form>.row>.privacy,
html.contact .contactUsArea>.form>.row>.privacy{
    color: #FFFFFF;
    font-size: 0.7143rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.privacy,
    html.product .contactUsArea>.form>.row>.privacy,
    html.contact .contactUsArea>.form>.row>.privacy{
        font-size: 0.8571rem;
        margin: 2rem 0px 0px 0px;
    }
}
html.contact .contactUsArea>.form>.row>.privacy{
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>.gcode,
html.product .contactUsArea>.form>.row>.gcode,
html.contact .contactUsArea>.form>.row>.gcode{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
html.index .contactUsArea>.form>.row>.gcode>#gCodeImg,
html.product .contactUsArea>.form>.row>.gcode>#gCodeImg,
html.contact .contactUsArea>.form>.row>.gcode>#gCodeImg{
    width: 180px;
    min-height: 45px;
    background: #EEEEEE;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.gcode>#gCodeImg,
    html.product .contactUsArea>.form>.row>.gcode>#gCodeImg,
    html.contact .contactUsArea>.form>.row>.gcode>#gCodeImg{
        width: calc(50% - 5px);
        min-height: unset;
    }
}
html.index .contactUsArea>.form>.row>.gcode>input#gCode,
html.product .contactUsArea>.form>.row>.gcode>input#gCode,
html.contact .contactUsArea>.form>.row>.gcode>input#gCode{
    width: calc(180px - 2px * 2);
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.0714rem;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 10px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>.gcode>input#gCode,
    html.product .contactUsArea>.form>.row>.gcode>input#gCode,
    html.contact .contactUsArea>.form>.row>.gcode>input#gCode{
        width: calc(50% - 5px - 2px * 2);
        flex-shrink: 0;
    }
}
html.contact .contactUsArea>.form>.row>.gcode>input#gCode{
    border-bottom: 1px solid #000000;
    color: var(--bodyFontColor);
}
html.index .contactUsArea>.form>.row>input[type='submit'],
html.product .contactUsArea>.form>.row>input[type='submit'],
html.contact .contactUsArea>.form>.row>input[type='submit']{
    width: calc(200px - 1px * 2);
    height: calc(45px - 1px * 2);
    background: transparent;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: stretch;
    margin: 0px 0px 0px 10px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.index .contactUsArea>.form>.row>input[type='submit'],
    html.product .contactUsArea>.form>.row>input[type='submit'],
    html.contact .contactUsArea>.form>.row>input[type='submit']{
        width: calc(100% - 1px * 2);
        height: calc(12vw - 1px * 2);
        font-size: 1.1429rem;
        margin: 2rem 0px 0px 0px;
    }
}
html.contact .contactUsArea>.form>.row>input[type='submit']{
    border: 1px solid #000000;
    color: var(--bodyFontColor);
}


/* =========================================================
 * About
 * ========================================================= */
/* About 區塊 */
html.about .aboutArea{
    width: 100%;
    height: 41.6667vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea{
        height: auto;
        flex-direction: column-reverse;
        justify-content: flex-start;
    }
}
html.about .aboutArea>.titleArea{
    width: calc(100% - 52.0833vw - 14.5833vw - 2.0833vw);
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    padding: 0px 2.0833vw 0px 14.5833vw;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.about .aboutArea>.titleArea{
        width: calc(100% - 52.0833vw - 6.85% - 2.0833vw);
        padding: 0px 2.0833vw 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea>.titleArea{
        width: calc(100% - 4.8vw * 2);
        height: auto;
        padding: 12vw 4.8vw;
    }
}
html.about .aboutArea>.titleArea>h2{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.about .aboutArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.about .aboutArea>.titleArea>h2+p{
    margin: 1.5625vw 0px 0px 0px;
    padding: 1.5625vw 0px 0px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea>.titleArea>h2+p{
        margin: 5.3333vw 0px 0px 0px;
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.about .aboutArea>.titleArea>h2+p:before{
    content: '';
    width: 5.4688vw;
    height: 1px;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea>.titleArea>h2+p:before{
        width: 28.1807vw;
    }
}
html.about .aboutArea>.titleArea>p{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea>.titleArea>p{
        font-size: 1rem;
        margin: 1rem 0px 0px 0px;
    }
}
html.about .aboutArea>.imgArea{
    width: 52.0833vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .aboutArea>.imgArea{
        width: 100%;
    }
}
html.about .aboutArea>.imgArea>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Our Focus 區塊 */
html.about .ourFocusArea{
    width: 100%;
    background-color: var(--mainDarkBlueColor);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 50px 0px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea{
        width: calc(100% - 4.8vw * 2);
        background-image: var(--aboutOurFocusPortrait-backgroundImage) !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 10.6667vw 4.8vw;
    }
}
html.about .ourFocusArea>.pictureArea{
    width: calc(50% - ((100% - 1360px) / 2));
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px calc((100% - 1360px) / 2);
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.about .ourFocusArea>.pictureArea{
        width: calc(50% - 6.85%);
        margin: 0px 0px 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.pictureArea{
        width: 100%;
        margin: 0px;
    }
}
html.about .ourFocusArea>.pictureArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}
html.about .ourFocusArea>.pictureArea>ul:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .ourFocusArea>.pictureArea>ul:after{
    content: '';
    width: 71%;
    height: 71%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 64.2647%, transparent 64.2647%);
    background-size: cover;
    background-position: center center;
    border: 1px solid #FFFFFF;
    border-radius: 100%;
    position: absolute;
}
html.about .ourFocusArea>.pictureArea>ul>li{
    width: 64.2647%;
    height: 64.2647%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
}
html.about .ourFocusArea>.pictureArea>ul>li:after{
    content: '';
    width: 4.8241%;
    height: 4.8241%;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 35%, transparent 35%);
    border-radius: 100%;
    display: block;
    position: absolute;
}
html.about .ourFocusArea>.pictureArea>ul>li.current:after{
    border: 2px solid #FFFFFF;
}
html.about .ourFocusArea>.pictureArea>ul>li.icDesign:after{
    top: -5.2%;
    right: 30.45%;
}
html.about .ourFocusArea>.pictureArea>ul>li.icDesign.current:after{
    top: -5.65%;
    right: 29.8%;
}
html.about .ourFocusArea>.pictureArea>ul>li.foundry:after{
    top: 14.25%;
    right: 3.25%;
}
html.about .ourFocusArea>.pictureArea>ul>li.foundry.current:after{
    top: 13.75%;
    right: 2.75%;
}
html.about .ourFocusArea>.pictureArea>ul>li.osat:after{
    top: 50%;
    right: -7.75%;
    transform: translateY(-50%);
}
html.about .ourFocusArea>.pictureArea>ul>li.osat.current:after{
    right: -8.25%;
}
html.about .ourFocusArea>.pictureArea>ul>li.hpc:after{
    bottom: 14.25%;
    right: 3.25%;
}
html.about .ourFocusArea>.pictureArea>ul>li.hpc.current:after{
    bottom: 13.75%;
    right: 2.75%;
}
html.about .ourFocusArea>.pictureArea>ul>li.automotive:after{
    bottom: -5.2%;
    right: 30.45%;
}
html.about .ourFocusArea>.pictureArea>ul>li.automotive.current:after{
    bottom: -5.65%;
    right: 29.8%;
}
html.about .ourFocusArea>.pictureArea>ul>li.xr:after{
    bottom: -5.2%;
    left: 30.45%;
}
html.about .ourFocusArea>.pictureArea>ul>li.xr.current:after{
    bottom: -5.65%;
    left: 29.8%;
}
html.about .ourFocusArea>.pictureArea>ul>li.camera:after{
    bottom: 14.25%;
    left: 3.25%;
}
html.about .ourFocusArea>.pictureArea>ul>li.camera.current:after{
    bottom: 13.75%;
    left: 2.75%;
}
html.about .ourFocusArea>.pictureArea>ul>li.display:after{
    top: 50%;
    left: -7.75%;
    transform: translateY(-50%);
}
html.about .ourFocusArea>.pictureArea>ul>li.display.current:after{
    left: -8.25%;
}
html.about .ourFocusArea>.pictureArea>ul>li.android:after{
    top: 14.25%;
    left: 3.25%;
}
html.about .ourFocusArea>.pictureArea>ul>li.android.current:after{
    top: 13.75%;
    left: 2.75%;
}
html.about .ourFocusArea>.pictureArea>ul>li.apple:after{
    top: -5.2%;
    left: 30.45%;
}
html.about .ourFocusArea>.pictureArea>ul>li.apple.current:after{
    top: -5.65%;
    left: 29.8%;
}

html.about .ourFocusArea>.pictureArea>ul>li>figure{
    width: 71.6247%;
    height: 100%;
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;

}
html.about .ourFocusArea>.pictureArea>ul>li.current>figure{
    display: flex;
}
html.about .ourFocusArea>.pictureArea>ul>li>figure>picture{
    width: 100%;
    height: calc(100% - 37.7574% - 11.0294%);
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-end;
    padding: 0px 0px 11.0294% 0px;
}
html.about .ourFocusArea>.pictureArea>ul>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.about .ourFocusArea>.pictureArea>ul>li>figure>figcaption{
    width: 100%;
    height: calc(37.7574% - 5.7208%);
    font-size: 2.4728rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    padding: 5.7208% 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.about .ourFocusArea>.pictureArea>ul>li>figure>figcaption{
        font-size: 2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.pictureArea>ul>li>figure>figcaption{
        font-size: 1rem;
    }
}
html.about .ourFocusArea>.pictureArea>ul>li.icDesign>figure>picture>img{
    width: 42.8115%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.icDesign>div{
    width: 14.8741%;
    position: absolute;
    top: calc(-5.9497% - 14.8741%);
    right: 16.4760%;
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.icDesign>div:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .ourFocusArea>.pictureArea>ul>li.foundry>figure>picture>img{
    width: 42.8115%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.foundry>div{
    width: 15.6739%;
    position: absolute;
    top: 4.8055%;
    right: calc(-0.8% - 15.6739%);
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.foundry>div:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .ourFocusArea>.pictureArea>ul>li.osat>figure>picture>img{
    width: 42.8115%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.osat>div{
    width: 14.8741%;
    position: absolute;
    top: 50%;
    right: calc(-10.1195% - 15.6739%);
    transform: translateY(-50%);
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.osat>div:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .ourFocusArea>.pictureArea>ul>li.hpc>figure>picture>img{
    width: 59.2939%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.hpc>div{
    width: 19.2813%;
    position: absolute;
    bottom: 5.6827%;
    right: -17.3913%;
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.hpc>div:before{
    content: '';
    display: block;
    margin-top: 67.0671%;
}
html.about .ourFocusArea>.pictureArea>ul>li.automotive>figure>picture>img{
    width: 79.5628%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.automotive>div{
    width: 25.8150%;
    position: absolute;
    bottom: calc(-7.4371% - (25.8150% * 0.362203));
    right: 11.4798%;
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.automotive>div:before{
    content: '';
    display: block;
    margin-top: 36.2203%;
}
html.about .ourFocusArea>.pictureArea>ul>li.xr>figure>picture>img{
    width: 50.7292%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.xr>div{
    width: 16.3605%;
    position: absolute;
    bottom: calc(-6.6362% - (16.3605% * 0.664228));
    left: 18.9169%;
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.xr>div:before{
    content: '';
    display: block;
    margin-top: 66.4228%;
}
html.about .ourFocusArea>.pictureArea>ul>li.camera>figure>picture>img{
    width: 43.0977%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.camera>div{
    width: 14.8741%;
    position: absolute;
    bottom: 4.6275%;
    left: calc(2.0595% - 14.8741%);;
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.camera>div:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .ourFocusArea>.pictureArea>ul>li.display>figure>picture>img{
    width: 74.3815%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.display>div{
    width: 23.2730%;
    position: absolute;
    top: 50%;
    left: calc(-9.9542% - 23.2644%);
    transform: translateY(-50%);
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.display>div:before{
    content: '';
    display: block;
    margin-top: 55.4611%;
}
html.about .ourFocusArea>.pictureArea>ul>li.android>figure>picture>img{
    width: 23.9617%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.android>div{
    width: 9.8335%;
    position: absolute;
    top: 3.3778%;
    left: calc(-3.2528% - 9.8335%);
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.android>div:before{
    content: '';
    display: block;
    margin-top: 199.0759%;
}
html.about .ourFocusArea>.pictureArea>ul>li.apple>figure>picture>img{
    width: 38.8324%;
    height: auto;
}
html.about .ourFocusArea>.pictureArea>ul>li.apple>div{
    width: 14.1876%;
    position: absolute;
    top: calc(-5.8352% - (14.1876% * 1.1634));
    left: 17.5439%;
    overflow: hidden;
}
html.about .ourFocusArea>.pictureArea>ul>li.apple>div:before{
    content: '';
    display: block;
    margin-top: 116.34%;
}
html.about .ourFocusArea>.pictureArea>ul>li>div>input[type='button']{
    width: 100%;
    height: 100%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 99.9999% auto;
    background-position: center center;
    border: 0px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}
html.about .ourFocusArea>.pictureArea>ul>li.icDesign>div>input[type='button']{
    background-image: url(/images/iconOurFocusIcDesign.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.foundry>div>input[type='button']{
    background-image: url(/images/iconOurFocusFoundry.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.osat>div>input[type='button']{
    background-image: url(/images/iconOurFocusOsat.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.hpc>div>input[type='button']{
    background-image: url(/images/iconOurFocusHpc.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.automotive>div>input[type='button']{
    background-image: url(/images/iconOurFocusAutomotive.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.xr>div>input[type='button']{
    background-image: url(/images/iconOurFocusXr.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.camera>div>input[type='button']{
    background-image: url(/images/iconOurFocusCamera.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.display>div>input[type='button']{
    background-image: url(/images/iconOurFocusDisplay.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.android>div>input[type='button']{
    background-image: url(/images/iconOurFocusAndroid.svg);
}
html.about .ourFocusArea>.pictureArea>ul>li.apple>div>input[type='button']{
    background-image: url(/images/iconOurFocusApple.svg);
}

html.about .ourFocusArea>.pictureArea>div.circle{
    width: calc(71% - 5px + 1px);
    border: 5px solid #FFFFFF;
    border-radius: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    clip-path: polygon(34% 0%, 50% 50%, 66.5% 0%);
    -webkit-clip-path: polygon(34% 0%, 50% 50%, 66.5% 0%);
    transition: 0.5s all ease;
}
@media only screen and (max-width: 1199px){
    html.about .ourFocusArea>.pictureArea>div.circle{
        width: calc(71% - 4px);
        border: 4px solid #FFFFFF;
    }
}
html.about .ourFocusArea>.pictureArea>div.circle:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .ourFocusArea>.pictureArea>div.circle.icDesign{
    transform: rotate(0deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.foundry{
    transform: rotate(36deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.osat{
    transform: rotate(72deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.hpc{
    transform: rotate(108deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.automotive{
    transform: rotate(144deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.xr{
    transform: rotate(180deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.camera{
    transform: rotate(215deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.display{
    transform: rotate(252deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.android{
    transform: rotate(288deg);
}
html.about .ourFocusArea>.pictureArea>div.circle.apple{
    transform: rotate(324deg);
}

html.about .ourFocusArea>.titleArea{
    width: calc(100% - 52.0833% - ((100% - 1360px) / 2) - 55px - 3.125%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0px calc((100% - 1360px) / 2) 0px 55px;
    margin: 0px 0px 100px 0px;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.about .ourFocusArea>.titleArea{
        width: calc(100% - 52.0833% - 6.85% - 50px - 3.125%);
        margin: 0px 0px 50px 0px;
        padding: 0px 6.85% 0px 50px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.titleArea{
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
}
html.about .ourFocusArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.about .ourFocusArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}

html.about .ourFocusArea>.titleArea>.info{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: stretch;
    margin: 30px 0px 0px 0px;
    padding: 30px 0px 0px 0px;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.titleArea>.info{
        margin: 5.3333vw 0px 0px 0px;
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.about .ourFocusArea>.titleArea>.info:before{
    content: '';
    width: 17%;
    height: 1px;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.titleArea>.info:before{
        width: 28.1807vw;
    }
}
html.about .ourFocusArea>.titleArea>.info>li{
    width: inherit;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
html.about .ourFocusArea>.titleArea>.info>li>h3{
    font-size: 2.1429rem;
}
@media only screen and (max-width: 1440px){
    html.about .ourFocusArea>.titleArea>.info>li>h3{
        font-size: 2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.titleArea>.info>li>h3{
        font-size: 1.7143rem;
    }
    html.about .ourFocusArea>.titleArea>.info>li>div{
        margin: 2.1333vw 0px 0px 0px;
    }
}
html.about .ourFocusArea>.titleArea>.info>li>div>p{
    font-size: 1.2rem;
    margin: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .ourFocusArea>.titleArea>.info>li>div>p{
        font-size: 1rem;
        margin: 1rem 0px 0px 0px;
    }
}

/* Opinion Leader 區塊 */
html.about .opinionLeaderArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4.9479vw calc((100% - 1360px) / 2);
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.about .opinionLeaderArea{
        width: calc(100% - 6.85% * 2);
        padding: 4.9479vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea{
        width: calc(100% - 4.8vw * 2);
        padding: 10.6667vw 4.8vw;
    }
}
html.about .opinionLeaderArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.titleArea{
        align-items: flex-start;
    }
}
html.about .opinionLeaderArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.about .opinionLeaderArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.about .opinionLeaderArea>.titleArea>p{
    width: 81.9118%;
    font-size: 1.2rem;
    text-align: center;
    hyphens: auto;
    word-wrap: break-word;
    margin: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.about .opinionLeaderArea>.titleArea>p{
        width: 90%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.titleArea>p{
        width: 100%;
        font-size: 1rem;
        text-align: left;
        margin: 1rem 0px 0px 0px;
    }
}
html.about .opinionLeaderArea>.leaders{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders{
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.about .opinionLeaderArea>.leaders.less{
    justify-content: center;
}
html.about .opinionLeaderArea>.leaders>li{
    width: calc((1360px - (20px * 3)) / 4);
    height: calc(((1360px - (20px * 3)) / 4) / 313.8462 * 418.4616);
    opacity: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 40px 20px 0px 0px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(-180deg) scale(0.5);
    transition: 1s all ease;
    perspective: 1000px;
}
@media only screen and (min-width: 1441px) and (max-width: 1920px){
    html.about .opinionLeaderArea>.leaders>li{
        width: calc((1360px - (1.5625vw * 3)) / 4);
        height: calc(((1360px - (1.5625vw * 3)) / 4) / 313.8462 * 418.4616);
        margin: 40px 1.5625vw 0px 0px;
    }
}
@media only screen and (max-width: 1440px){
    html.about .opinionLeaderArea>.leaders>li{
        width: calc(((100vw - (100vw - 100% / ((100 - 6.85 * 2) / 100))) * ((100 - 6.85 * 2) / 100) - 1.5625vw * 3) / 4);
        height: calc(((100vw - (6.85vw * 2) - (1.5625vw * 3)) / 4) / 313.8462 * 418.4616);
        margin: 40px 1.5625vw 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li{
        width: 100%;
        height: calc((100vw - 4.8vw * 2) / 313.8462 * 418.4616);
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.about .opinionLeaderArea>.leaders>li[onclick]:not([onclick='']){
    cursor: pointer;
}
html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n+1){
    animation: 1.5s linear 0.2s normal forwards 1 animationFadeIn;
    transform: rotateY(0deg) scale(1);
    transition-delay: 0s;
}
html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n+2){
    animation: 1.5s linear 0.9s normal forwards 1 animationFadeIn;
    transform: rotateY(0deg) scale(1);
    transition-delay: 0.7s;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n+2){
        animation: 1.5s linear 0.2s normal forwards 1 animationFadeIn;
        transition-delay: 0s;
    }
}
html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n+3){
    animation: 1.5s linear 1.6s normal forwards 1 animationFadeIn;
    transform: rotateY(0deg) scale(1);
    transition-delay: 1.4s;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n+3){
        animation: 1.5s linear 0.2s normal forwards 1 animationFadeIn;
        transition-delay: 0s;
    }
}
html.about .opinionLeaderArea>.leaders>li:nth-child(4n){
    margin: 40px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li:nth-child(4n){
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n){
    animation: 1.5s linear 2.3s normal forwards 1 animationFadeIn;
    transform: rotateY(0deg) scale(1);
    transition-delay: 2.1s;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li.viewed:nth-child(4n){
        animation: 1.5s linear 0.2s normal forwards 1 animationFadeIn;
        transition-delay: 0s;
    }
}
html.about .opinionLeaderArea>.leaders>li>figure{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 0px;
    left: 0px;
}
html.about .opinionLeaderArea>.leaders>li>figure>picture{
    width: 100%;
    height: 100%;
    background: #9FA0A0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
html.about .opinionLeaderArea>.leaders>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
html.about .opinionLeaderArea>.leaders>li:hover>figure>picture>img{
    transform: scale(1.05);
}
html.about .opinionLeaderArea>.leaders>li>figure>figcaption{
    width: calc(59.2357% - 6.3898% * 2);
    background: #121E4A;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0.78125vw 6.3898%;
    position: absolute;
    right: 0px;
    bottom: 1.5625vw;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li>figure>figcaption{
        width: calc(59.2357% - 6.3898% * 2);
        padding: 4vw 6.3898%;
        bottom: 6.6667vw;
    }
}
html.about .opinionLeaderArea>.leaders>li>figure>figcaption>h4{
    color: #FFFFFF;
    font-weight: normal;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li>figure>figcaption>h4{
        font-size: 1.0714rem;
    }
}
html.about .opinionLeaderArea>.leaders>li>figure>figcaption>h3{
    color: #FFFFFF;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.7778em;
    font-weight: normal;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .opinionLeaderArea>.leaders>li>figure>figcaption>h3{
        font-size: 1.9106rem;
        margin: 0.5rem 0px 0px 0px;
    }
}
html.about .opinionLeaderArea>.leaders>li>.info{
    display: none;
}

@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow{
        align-items: flex-start;
        overflow-y: auto;
    }
    html.about .popupWindow>.detail{
        width: 100%;
    }
    html.about .popupWindow>.detail>.content{
        flex-direction: column-reverse;
    }
}
html.about .popupWindow>.detail>.content>.profile{
    width: calc(450px - 30px * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 30px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>.content>.profile{
        width: calc(100% - 8vw * 2);
        padding: 8vw;
    }
}
html.about .popupWindow>.detail>.content>.profile>h4{
    width: 100%;
    font-size: 1.1429rem;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>.content>.profile>h4{
        font-size: 1.1429rem;
    }
}
html.about .popupWindow>.detail>.content>.profile>h3{
    width: 100%;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>.content>.profile>h3{
        font-size: 2.2858rem;
        margin: 1.6vw 0px 0px 0px;
    }
}
html.about .popupWindow>.detail>.content>.profile>.description{
    width: 100%;
    border-top: 1px solid #0058D9;
    font-size: 0.6786rem;
    margin: 20px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>.content>.profile>.description{
        margin: 5.3333vw 0px 0px 0px;
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.about .popupWindow>.detail>.content>.profile>.description>p{
    text-align: justify;
    margin: 20px 0px 0px 0px;
}
html.about .popupWindow>.detail>.content>.profile>.description>p:first-child{
    margin: 0px;
}
html.about .popupWindow>.detail>.content>.photo{
    width: 350px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>.content>.photo{
        width: 100%;
    }
}
html.about .popupWindow>.detail>.content>.photo:before{
    content: '';
    display: block;
    margin-top: 142.8571%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>.content>.photo:before{
        margin-top: 141.3333%;
    }
}
html.about .popupWindow>.detail>.content>.photo>figure{
    width: 100%;
    height: 100%;
    background: #9FA0A0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
html.about .popupWindow>.detail>.content>.photo>figure>picture{
    width: 100%;
    height: 100%;
    background: #9FA0A0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
html.about .popupWindow>.detail>.content>.photo>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .popupWindow>.detail>input[type='button']{
        left: unset;
        right: 30px;
    }
}

/* Global Customer 區塊 */
html.about .globalcustomerArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background: var(--darkBlockBackground);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 3.6458vw calc((100% - 1360px) / 2) 2.8646vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.about .globalcustomerArea{
        width: calc(100% - 6.85% * 2);
        padding: 3.6458vw 6.85% 2.8646vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea{
        width: calc(100% - 4.8vw * 2);
        padding: 10.6667vw 4.8vw;
    }
}
html.about .globalcustomerArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
html.about .globalcustomerArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.about .globalcustomerArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.about .globalcustomerArea>.titleArea>p{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.titleArea>p{
        font-size: 1rem;
        margin: 1rem 0px 0px 0px;
    }
}
html.about .globalcustomerArea>.customerMap{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
html.about .globalcustomerArea>.customerMap>li{
    width: calc((100% - 54px * 2) / 3);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row
    justify-content: center;
    align-items: center;
    margin: 2.8646vw 54px 0px 0px;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customerMap>li{
        width: calc((100% - 1.6vw * 2) / 3);
        margin: 8vw 1.6vw 0px 0px;
    }
}
html.about .globalcustomerArea>.customerMap>li:nth-child(3n){
    margin: 2.8646vw 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customerMap>li:nth-child(3n){
        margin: 8vw 0px 0px 0px;
    }
}
html.about .globalcustomerArea>.customerMap>li:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.about .globalcustomerArea>.customerMap>li>img{
    width: 100%;
    height: 100%;
    opacity: 0;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: scale(0.5);
    transition: 1s all ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.about .globalcustomerArea>.customerMap>li.viewed:nth-child(3n+1)>img{
    animation: 1.5s linear 0.2s normal forwards 1 animationFadeIn;
    transform: scale(1);
    transition-delay: 0s;
}
html.about .globalcustomerArea>.customerMap>li.viewed:nth-child(3n+2)>img{
    animation: 1.5s linear 0.9s normal forwards 1 animationFadeIn;
    transform: scale(1);
    transition-delay: 0.7s;
}
html.about .globalcustomerArea>.customerMap>li.viewed:nth-child(3n+3)>img{
    animation: 1.5s linear 1.6s normal forwards 1 animationFadeIn;
    transform: scale(1);
    transition-delay: 1.4s;
}
html.about .globalcustomerArea>.customers{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 25px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers{
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 8vw 0px 0px 0px;
    }
}
html.about .globalcustomerArea>.customers>li{
    width: calc((100% - 54px * 2) / 3);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 54px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers>li{
        width: 100%;
        margin: 0px;
    }
}
html.about .globalcustomerArea>.customers>li:nth-child(3n){
    margin: 0px 0px 0px 0px;
}
html.about .globalcustomerArea>.customers>li>.countries{
    width: 100%;
    opacity: 0;
    display: table;
}
html.about .globalcustomerArea>.customers>li.viewed:nth-child(3n+1)>.countries{
    animation: 1.5s linear 0.5s normal forwards 1 animationFadeIn;
}
html.about .globalcustomerArea>.customers>li.viewed:nth-child(3n+2)>.countries{
    animation: 1.5s linear 1.2s normal forwards 1 animationFadeIn;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers>li.viewed:nth-child(3n+2)>.countries{
        animation: 1.5s linear 0.5s normal forwards 1 animationFadeIn;
    }
}
html.about .globalcustomerArea>.customers>li.viewed:nth-child(3n+3)>.countries{
    animation: 1.5s linear 1.9s normal forwards 1 animationFadeIn;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers>li.viewed:nth-child(3n+3)>.countries{
        animation: 1.5s linear 0.5s normal forwards 1 animationFadeIn;
    }
}
html.about .globalcustomerArea>.customers>li>.countries>li{
    display: table-row;
}
html.about .globalcustomerArea>.customers>li>.countries>li>label{
    color: var(--bodyFontColorBlue);
    font-size: 1.0986rem;
    display: table-cell;
    white-space: nowrap;
    vertical-align: middle;
    padding: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers>li>.countries>li>label{
        min-width: 24vw;
        font-size: 0.8571rem;
        padding: 3.2vw 0px 0px 0px;
    }
}
html.about .globalcustomerArea>.customers>li>.countries>li>label>em{
    font-style: normal;
    margin: 0px 0px 0px 5px;
}
html.about .globalcustomerArea>.customers>li>.countries>li>.bar{
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    padding: 20px 0px 0px 20px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers>li>.countries>li>.bar{
        padding: 3.2vw 0px 0px 4vw;
    }
}
html.about .globalcustomerArea>.customers>li>.countries>li>.bar>.total{
    width: 100%;
    height: 4px;
    background: #FFFFFF;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.about .globalcustomerArea>.customers>li>.countries>li>.bar>.total{
        height: 0.843vw;
    }
}
html.about .globalcustomerArea>.customers>li>.countries>li>.bar>.total>.used{
    width: 0%;
    height: 100%;
    background: var(--bodyFontColorBlue);
}


/* =========================================================
 * Product
 * ========================================================= */
/* Product 區塊 */
html.product .productArea{
    width: 100%;
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}
html.product .productArea>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 1180px){
    html.product .productArea>figure{
        flex-direction: column;
    }
}
html.product .productArea>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
html.product .productArea>figure>picture:before{
    content: '';
    display: block;
    margin-top: 26.0417%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .productArea>figure>picture:before{
        /*margin-top: 100%;*/
        margin-top: 66.6667%;
    }
}
html.product .productArea>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.product .productArea>figure>figcaption{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4.1667vw calc((100% - 1360px) / 2);
    position: absolute;
    left: 0px;
    bottom: 0px;
}
@media only screen and (max-width: 1560px){
    html.product .productArea>figure>figcaption{
        width: calc(100% - 6.85% * 2);
        padding: 4.1667vw 6.85%;
    }
}
@media screen and (max-width: 1180px){
    html.product .productArea>figure>figcaption{
        /*width: calc(100% - 4.8vw * 2);*/
        color: #000000;
        /*padding: 10.6667vw 4.8vw;*/
        position: relative;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .productArea>figure>figcaption{
        padding: 10.6667vw 4.8vw;
    }
}
html.product .productArea>figure>figcaption>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    text-shadow: 0px 0px 15px #000000;
}
@media only screen and (max-width: 1440px){
    html.product .productArea>figure>figcaption>h2{
        font-size: 2.6rem;
    }
}
@media screen and (max-width: 1180px){
    html.product .productArea>figure>figcaption>h2{
        font-size: 2.8571rem;
        text-shadow: unset;
    }
}
html.product .productArea>figure>figcaption>p{
    width: 50.7353%;
    font-size: 1.2rem;
    line-height: 200%;
    hyphens: auto;
    text-shadow: 0px 0px 10px #000000;
    word-wrap: break-word;
    margin: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1560px){
    html.product .productArea>figure>figcaption>p{
        width: 60%;
        line-height: 150%;
        margin: 15px 0px 0px 0px;
    }
}
@media only screen and (max-width: 1200px){
    html.product .productArea>figure>figcaption>p{
        width: 85%;
    }
}
@media screen and (max-width: 1180px){
    html.product .productArea>figure>figcaption>p{
        width: 100%;
        font-size: 1rem;
        text-shadow: unset;
    }
}

/* Semiconductor 區塊 */
html.product .semiconductorArea{
    width: 100%;
    min-height: calc(23.9583vw - 30px * 2);
    background: var(--darkBlockBackground);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea{
        width: 100%;
        min-height: unset;
        flex-direction: column-reverse;
        padding: 6.6667vw 0px;
    }
}
html.product .semiconductorArea>.titleArea{
    width: calc(100% - 46.875vw - 14.5833vw - 2.0833vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 2.0833vw 0px 14.5833vw;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea{
        width: calc(100% - 46.875vw - 6.85% - 2.0833vw);
        padding: 0px 2.0833vw 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea{
        width: calc(100% - 4.8vw);
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 0px 0px 0px 4.8vw;
    }
}
html.product .semiconductorArea>.titleArea>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
html.product .semiconductorArea>.titleArea>.iconArea>img{
    height: 171px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.iconArea>img{
        height: 100px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea>.iconArea>img{
        width: 13.3333vw;
        height: auto;
        position: absolute;
        top: 4vw;
        transition: unset;
    }
}
html.product .semiconductorArea:hover>.titleArea>.iconArea>img{
    transform: scale(1.05);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea:hover>.titleArea>.iconArea>img{
        transform: unset;
    }
}

html.product .semiconductorArea>.titleArea>.info{
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0px 0px 0px 40px;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.info{
        margin: 0px 0px 0px 20px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea>.info{
        margin: 0px;
        padding: 0px 4.8vw 0px 0px;
    }
}
html.product .semiconductorArea>.titleArea>.info>h2{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.info>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea>.info>h2{
        min-height: calc(13.3333vw + 4vw * 2);
        font-size: 2.2857rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 0px 0px calc(13.3333vw + 3.2vw);
    }
}
html.product .semiconductorArea>.titleArea>.info>h2+p{
    margin: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.info>h2+p{
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea>.info>h2+p{
        margin: 1rem 0px 0px 0px;
    }
}
html.product .semiconductorArea>.titleArea>.info>p{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 15px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.info>p{
        font-size: 1.3rem;
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea>.info>p{
        font-size: 1rem;
        margin: 1rem 0px 0px 0px;
    }
}
html.product .semiconductorArea>.titleArea>.info>ul{
    list-style-type: disc;
    margin: 5px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.info>ul{
        margin: 0px;
    }
}
html.product .semiconductorArea>.titleArea>.info>ul>li{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 15px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .semiconductorArea>.titleArea>.info>ul>li{
        font-size: 1.3rem;
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.titleArea>.info>ul>li{
        margin: 1rem 0px 0px 0px;
    }
}
html.product .semiconductorArea>.imgArea{
    width: 46.875vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .semiconductorArea>.imgArea{
        width: calc(100% - 4.8vw);
        padding: 0px 0px 0px 4.8vw;
    }
}
html.product .semiconductorArea>.imgArea>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Smartphone 區塊 */
html.product .smartphoneArea{
    width: 100%;
    min-height: calc(23.9583vw - 30px * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea{
        width: 100%;
        min-height: unset;
        flex-direction: column;
        padding: 6.6667vw 0px;
    }
}
html.product .smartphoneArea>.imgArea{
    width: 46.875vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.imgArea{
        width: calc(100% - 4.8vw);
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 0px 4.8vw 0px 0px;
    }
}
html.product .smartphoneArea>.imgArea>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.product .smartphoneArea>.titleArea{
    width: 46.875vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea{
        width: calc(100% - 4.8vw);
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 0px 0px 0px 4.8vw;
    }
}
html.product .smartphoneArea>.titleArea>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
html.product .smartphoneArea>.titleArea>.iconArea>img{
    height: 171px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
@media only screen and (max-width: 1440px){
    html.product .smartphoneArea>.titleArea>.iconArea>img{
        height: 100px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea>.iconArea>img{
        width: 8.9341vw;
        height: auto;
        position: absolute;
        top: 4vw;
        transition: unset;
    }
}
html.product .smartphoneArea:hover>.titleArea>.iconArea>img{
    transform: scale(1.05);
}

html.product .smartphoneArea>.titleArea>.info{
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0px 0px 0px 40px;
}
@media only screen and (max-width: 1440px){
    html.product .smartphoneArea>.titleArea>.info{
        margin: 0px 0px 0px 20px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea>.info{
        margin: 0px;
        padding: 0px 4.8vw 0px 0px;
    }
}
html.product .smartphoneArea>.titleArea>.info>h2{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.product .smartphoneArea>.titleArea>.info>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea>.info>h2{
        min-height: calc(13.3333vw + 4vw * 2);
        font-size: 2.6667rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 0px 0px calc(8.9341vw + 3.2vw);
    }
}
html.product .smartphoneArea>.titleArea>.info>h2+p{
    margin: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .smartphoneArea>.titleArea>.info>h2+p{
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea>.info>h2+p{
        margin: 1rem 0px 0px 0px;
    }
}
html.product .smartphoneArea>.titleArea>.info>p{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 15px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .smartphoneArea>.titleArea>.info>p{
        font-size: 1.3rem;
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea>.info>p{
        font-size: 1rem;
        margin: 1rem 0px 0px 0px;
    }
}
html.product .smartphoneArea>.titleArea>.info>p.small{
    font-size: 1rem;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .smartphoneArea>.titleArea>.info>p.small{
        font-weight: normal;
    }
}

/* Customized Projects 區塊 */
html.product .customizedProjectsArea{
    width: 100%;
    min-height: calc(23.9583vw - 30px * 2);
    background: var(--darkBlockBackground);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea{
        width: 100%;
        min-height: unset;
        flex-direction: column-reverse;
        padding: 6.6667vw 0px;
    }
}
html.product .customizedProjectsArea>.titleArea{
    width: calc(100% - 46.875vw - 14.5833vw - 2.0833vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 2.0833vw 0px 14.5833vw;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.product .customizedProjectsArea>.titleArea{
        width: calc(100% - 46.875vw - 6.85% - 2.0833vw);
        padding: 0px 2.0833vw 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea{
        width: calc(100% - 4.8vw);
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 0px 0px 0px 4.8vw;
    }
}
html.product .customizedProjectsArea>.titleArea>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
html.product .customizedProjectsArea>.titleArea>.iconArea>img{
    height: 171px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
@media only screen and (max-width: 1440px){
    html.product .customizedProjectsArea>.titleArea>.iconArea>img{
        height: 100px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea>.iconArea>img{
        width: 11.3218vw;
        height: auto;
        position: absolute;
        top: 10vw;
        transition: unset;
    }
}
html.product .customizedProjectsArea:hover>.titleArea>.iconArea>img{
    transform: scale(1.05);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea:hover>.titleArea>.iconArea>img{
        transform: unset;
    }
}

html.product .customizedProjectsArea>.titleArea>.info{
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0px 0px 0px 40px;
}
@media only screen and (max-width: 1440px){
    html.product .customizedProjectsArea>.titleArea>.info{
        margin: 0px 0px 0px 20px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea>.info{
        margin: 0px;
        padding: 0px 4.8vw 0px 0px;
    }
}
html.product .customizedProjectsArea>.titleArea>.info>h2{
    width: 60%;
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.product .customizedProjectsArea>.titleArea>.info>h2{
        width: 100%;
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea>.info>h2{
        max-width: calc(100% - (11.3218vw + 3.2vw));
        min-height: calc(13.3333vw + 4vw * 2);
        font-size: 2.6667rem;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin: 4vw 0px 0px 0px;
        padding: 0px 0px 0px calc(11.3218vw + 3.2vw);
    }
}
html.product .customizedProjectsArea>.titleArea>.info>h2+p{
    margin: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .customizedProjectsArea>.titleArea>.info>h2+p{
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea>.info>h2+p{
        font-size: 1.1429rem;
        font-weight: bold;
        margin: 1rem 0px 0px 0px;
    }
}
html.product .customizedProjectsArea>.titleArea>.info>p{
    font-size: 1.2rem;
    hyphens: auto;
    word-wrap: break-word;
    margin: 15px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.product .customizedProjectsArea>.titleArea>.info>p{
        font-size: 1.3rem;
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea>.info>p{
        font-size: 1.1429rem;
        font-weight: bold;
        margin: 1rem 0px 0px 0px;
    }
}
html.product .customizedProjectsArea>.titleArea>.info>p.small{
    font-size: 1rem;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.titleArea>.info>p.small{
        font-weight: normal;
    }
}
html.product .customizedProjectsArea>.imgArea{
    width: 46.875vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .customizedProjectsArea>.imgArea{
        width: calc(100% - 4.8vw);
        padding: 0px 0px 0px 4.8vw;
    }
}
html.product .customizedProjectsArea>.imgArea>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Sample 區塊 */
html.product .sampleArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 4.9479vw calc((100% - 1360px) / 2);
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media only screen and (max-width: 1440px){
    html.product .sampleArea{
        width: calc(100% - 6.85% * 2);
        padding: 4.9479vw 6.85%;
    }
}
@media only screen and (max-width: 1199px){
    html.product .sampleArea{
        flex-direction: column;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea{
        width: 100%;
        padding: 10.6667vw 0px;
    }
}
html.product .sampleArea>.samplesBlock{
    width: 785px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.product .sampleArea>.samplesBlock{
        width: calc((100vw - 6.85vw * 2) * 0.5772);
    }
}
@media only screen and (max-width: 1199px){
    html.product .sampleArea>.samplesBlock{
        width: 100%;
        margin: 30px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.samplesBlock{
        order: 2;
        margin: 0px;
    }
}
html.product .sampleArea>.samplesBlock>.samples{
    width: calc(100% - 4.8vw * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 4.8vw;
    position: relative;
    overflow: hidden;
}
html.product .sampleArea>.samplesBlock>.samples:before{
    content: '';
    display: block;
    margin-top: 77.7777%;
}
html.product .sampleArea>.samplesBlock>.samples>li{
    width: inherit;
    height: 100%;
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
}
html.product .sampleArea>.samplesBlock>.samples>li:first-child,
html.product .sampleArea>.samplesBlock>.samples>li.current{
    display: flex;
}
html.product .sampleArea>.samplesBlock>.samples>li>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.product .sampleArea>.titleArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 0px 30px;
}
@media only screen and (max-width: 1199px){
    html.product .sampleArea>.titleArea{
        margin: 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea{
        width: calc(100% - 4.8vw * 2);
        padding: 0px 4.8vw;
        order: 1;
    }
}
html.product .sampleArea>.titleArea>h2{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.product .sampleArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.product .sampleArea>.titleArea>.info{
    width: 100%;
    display: -webkit-box;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: stretch;
    margin: 30px 0px 0px 0px;
    padding: 30px 0px 0px 0px;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>.info{
        margin: 4vw 0px 0px 0px;
        padding: 4vw 0px 0px 0px;
    }
}
html.product .sampleArea>.titleArea>.info:before{
    content: '';
    width: 17%;
    height: 1px;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}
html.product .sampleArea>.titleArea>.info>li{
    width: inherit;
    display: none;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    top: 30px;
    left: 0px;
}
html.product .sampleArea>.titleArea>.info>li:first-child,
html.product .sampleArea>.titleArea>.info>li.current{
    display: flex;
}
html.product .sampleArea>.titleArea>.info>li>h3{
    font-size: 2.1429rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.product .sampleArea>.titleArea>.info>li>h3{
        font-size: 2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>.info>li>h3{
        font-size: 1.5rem;
    }
}
html.product .sampleArea>.titleArea>.info>li>p{
    margin: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>.info>li>p{
        margin: 1rem 0px 0px 0px;
    }
}
html.product .sampleArea>.titleArea>.info>li>ul{
    list-style-type: disc;
    list-style-position: outside;
    padding: 0px 0px 0px 2rem;
}
html.product .sampleArea>.titleArea>.info>li>ul>li{
    margin: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>.info>li>ul>li{
        margin: 1rem 0px 0px 0px;
    }
}

html.product .sampleArea>.titleArea>p{
    color: #9FA0A0;
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>p{
        display: none;
    }
}
html.product .sampleArea>.titleArea>p>a{
    color: #9FA0A0;
}
html.product .sampleArea>.titleArea>ul.page{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 30px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>ul.page{
        display: none;
    }
}
html.product .sampleArea>.titleArea>ul.page>li{
    display: flex;
    margin: 0px 10px;
}
html.product .sampleArea>.titleArea>ul.page>li:last-child{
    margin: 0px;
}
html.product .sampleArea>.titleArea>ul.page>li>input{
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 100%;
    color: transparent;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.titleArea>ul.page>li>input{
        width: 1.241vw;
        height: 1.241vw;
    }
}
html.product .sampleArea>.titleArea>ul.page>li.current>input{
    background: #000000;
}

@media screen and (orientation: portrait) and (max-width: 1023px){
    html.product .sampleArea>.note{
        width: calc(100% - 4.8vw * 2);
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: flex-start;
        align-items: flex-start;
        order: 3;
        margin: 8vw 0px 0px 0px;
        padding: 0px 4.8vw;
    }
    html.product .sampleArea>.note>p{
        color: #9FA0A0;
        margin: 1rem 0px 0px 0px;
    }
    html.product .sampleArea>.note>p>a{
        color: #9FA0A0;
    }
}


/* =========================================================
 * Insight
 * ========================================================= */
/* Banner */
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .horizontalSliderArea>.mask>ul.slider>li:before{
        margin-top: 66.6667%;
    }
}

/* Insight 表頭區塊 */
html.insight .titleArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 6.5104vw 0px 0px 0px;
    padding: 0px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.insight .titleArea{
        width: calc(100% - 6.85% * 2);
        padding: 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea{
        width: calc(100% - 4.8vw * 2);
        margin: 10.6667vw 0px 0px 0px;
        padding: 0px 4.8vw;
    }
}
html.insight .titleArea>h1{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.insight .titleArea>h1{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>h1{
        font-size: 2.8571rem;
    }
}
html.insight .titleArea>.searchBar{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 2.6042vw 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar{
        flex-wrap: wrap;
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.insight .titleArea>.searchBar>label{
    color: #0058D9;
    border-bottom: 1px solid #0058D9;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar>label{
        font-size: 1.2857rem;
    }
}
html.insight .titleArea>.searchBar>label[for='categories']{
    width: 49.2647%;
    display: flex;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar>label[for='categories']{
        width: 100%;
    }
    html.insight .titleArea>.searchBar>label[for='categories']:after{
        content: '';
        width: 7px;
        height: 7px;
        border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
        border-style: solid solid solid solid;
        border-width: 1px;
        position: absolute;
        right: 3px;
        bottom: calc(1rem + 7px);
        transform: rotate(135deg);
        cursor: pointer;
    }
}
html.insight .titleArea>.searchBar>label[for='categories']>select{
    display: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar>label[for='categories']>select{
        font-size: 1rem;
        display: flex;
    }
}
html.insight .titleArea>.searchBar>label[for='categories'] .selectMenuArea:after{
    content: '';
    width: 7px;
    height: 7px;
    border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
    border-style: solid solid solid solid;
    border-width: 1px;
    position: absolute;
    right: 3px;
    bottom: calc(1rem + 7px);
    transform: rotate(135deg);
    cursor: pointer;
}


html.insight .titleArea>.searchBar>label[for='keywords']{
    width: 47.7941%;
    display: flex;
    margin: 0px 0px 0px 1.04167vw;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar>label[for='keywords']{
        width: auto;
        flex-grow: 1;
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.insight .titleArea>.searchBar>label>select{
    width: 100%;
    background: transparent;
    border: 0px;
    padding: 1rem 30px 1rem 0px;
    outline: none;
}
html.insight .titleArea>.searchBar>label>.selectMenuArea>div{
    padding: 1rem 30px 1rem 0px;
}
html.insight .titleArea>.searchBar>label>input[type='search']{
    width: 100%;
    background: transparent;
    border: 0px;
    padding: 1rem 0px;
    outline: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar>label>input[type='search']{
        font-size: 1rem;
    }
}
html.insight .titleArea>.searchBar>input[type='submit']{
    background-color: transparent;
    background-image: url(/images/iconSearch.svg);
    background-repeat: no-repeat;
    background-size: auto 1rem;
    background-position: bottom calc(1rem + 3px) center;
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #0058D9;
    color: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.3s ease-out;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .titleArea>.searchBar>input[type='submit']{
        flex-grow: 0;
    }
}
html.insight .titleArea>.searchBar>input[type='submit']:hover{
    background-size: auto 1.2rem;
}

/* Insight 列表區塊 */
html.insight .insightList{
    width: calc(100% - ((100% - 1360px) / 2 - 25px - 12.5px) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 4.5573vw 0px 0px 0px;
    padding: 0px calc((100% - 1360px) / 2 - 25px - 12.5px);
}
@media only screen and (max-width: 1440px){
    html.insight .insightList{
        width: calc(100% - (6.85% - 25px - 12.5px) * 2);
        padding: 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList{
        width: calc(100% - 4.8vw * 2);
        margin: 0px;
        padding: 0px 4.8vw;
    }
}
html.insight .insightList>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul{
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
html.insight .insightList>ul::after{
    content: '';
    flex: auto;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul::after{
        display: none;
    }
}
html.insight .insightList>ul>li{
    width: calc((100% - (25px + 12.5px) * 2 * 3) / 3);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 12.5px;
    padding: 25px;
    cursor: pointer;
}
@media only screen and (max-width: 1199px){
    html.insight .insightList>ul>li{
        width: calc((100% - (25px + 12.5px) * 2 * 2) / 2);
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li{
        width: 100%;
        margin: 10.6667vw 0px 0px 0px;
        padding: 0px;
    }
}
html.insight .insightList>ul>li:hover{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li:hover{
        box-shadow: unset;
    }
}
html.insight .insightList>ul>li>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
html.insight .insightList>ul>li>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
html.insight .insightList>ul>li>figure>picture:before{
    content: '';
    display: block;
    margin-top: 60.2564%;
}
html.insight .insightList>ul>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.insight .insightList>ul>li>figure>figcaption{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 1em 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption{
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.insight .insightList>ul>li>figure>figcaption>.categories{
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption>.categories{
        font-size: 1.1667rem;
    }
}
html.insight .insightList>ul>li>figure>figcaption>.categories>li:before{
    content: '．';
}
html.insight .insightList>ul>li>figure>figcaption>.categories>li:first-child:before{
    display: none;
}
html.insight .insightList>ul>li>figure>figcaption>h3{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.8571em;
    font-weight: normal;
    line-height: 120%;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    margin: 1rem 0px 0px 0px;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption>h3{
        font-size: 1.7143rem;
    }
}
html.insight .insightList>ul>li>figure>figcaption>p{
    width: 100%;
    flex-grow: 1;
    margin: 1rem 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption>p{
        line-height: 150%;
    }
}
html.insight .insightList>ul>li>figure>figcaption>.bottomArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
html.insight .insightList>ul>li>figure>figcaption>.bottomArea>.date{
    color: #898989;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption>.bottomArea>.date{
        font-size: 1.1667rem;
    }
}
html.insight .insightList>ul>li>figure>figcaption>.bottomArea>.more{
    color: var(--bodyFontColorBlue);
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption>.bottomArea>.more{
        font-size: 1.1667rem;
    }
}
html.insight .insightList>ul>li>figure>figcaption>.bottomArea>.more:after{
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 1px 0px 0px;
    display: flex;
    margin: 0px 0px 0px 0.3rem;
    position: relative;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>ul>li>figure>figcaption>.bottomArea>.more:after{
        top: 0.1rem;
        right: 0px;
    }
}

html.insight .insightList>input[type='button']{
    width: calc((100% - (25px + 12.5px) * 2 * 3) / 3);
    height: 45px;
    background: var(--mainBlueColor);
    border: 0px;
    color: var(--mainWhiteColor);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.7143rem;
    margin: 2.3438vw 0px 0px 0px;
    cursor: pointer;
}
@media only screen and (max-width: 1440px){
    html.insight .insightList>input[type='button']{
        font-size: 1.2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .insightList>input[type='button']{
        width: 100%;
        max-width: unset;
        height: 12vw;
        background: var(--mainDarkBlueColor);
        font-size: 1.4286rem;
        margin: 4.8vw 0px 0px 0px;
    }
}

/* Insight Tags */
html.insight .tags{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    margin: 3.125vw 0px 6.5104vw 0px;
    padding: 0px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.insight .tags{
        width: calc(100% - 6.85% * 2);
        padding: 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .tags{
        width: calc(100% - 4.8vw * 2);
        display: none;
        margin: 12vw 0px 0px 0px;
        padding: 0px 4.8vw;
    }
    html.insight .tags>label{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
    html.insight .tags>label:after{
        content: '';
        width: 7px;
        height: 7px;
        border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
        border-style: solid solid solid solid;
        border-width: 1px;
        position: absolute;
        right: 3px;
        bottom: calc(1rem + 7px);
        transform: rotate(135deg);
        cursor: pointer;
    }
}
html.insight .noticeArea>.contentArea{
    align-items: flex-end;
}
@media only screen and (max-width: 1149px){
    html.insight .noticeArea>.contentArea{
        align-items: flex-start;
    }
}
html.insight .noticeArea>.contentArea>h2{
    margin: 0px 15px 0px 0px;
}
html.insight .noticeArea>.contentArea>p{
    margin: 0px 0px 5px 0px;
}
@media only screen and (max-width: 1149px){
    html.insight .noticeArea>.contentArea>p{
        margin: 10px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .noticeArea>.contentArea>p{
        margin: 1rem 0px 0px 0px;
    }
}


html.insight .popupWindow.subscribeForm>.detail>.content,
html.insightDetail .popupWindow.subscribeForm>.detail>.content{
    min-width: calc(580px - 50px - 30px);
    max-width: calc(100% - 50px - 30px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 40px 50px 30px 30px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .popupWindow.subscribeForm>.detail>.content,
    html.insightDetail .popupWindow.subscribeForm>.detail>.content{
        min-width: unset;
        max-width: calc(100% - 6.6667vw * 2);
        padding: 13.3333vw 6.6667vw 6.6667vw 6.6667vw;
    }
}
html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea,
html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea,
    html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea{
        padding: 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea,
    html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea{
        width: 100%;
        flex-wrap: wrap;
        margin: 6.6667vw 0px 0px 0px;
        padding: 0px;
    }
}
html.insight .popupWindow.subscribeForm>.detail>.content>input[type='email'],
html.insightDetail .popupWindow.subscribeForm>.detail>.content>input[type='email']{
    width: 100%;
    min-width: 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #000000;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 5px 0px;
    padding: 20px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .popupWindow.subscribeForm>.detail>.content>input[type='email'],
    html.insightDetail .popupWindow.subscribeForm>.detail>.content>input[type='email']{
        font-size: 1rem;
    }
}
html.insight .popupWindow.subscribeForm>.detail>.content>input[type='email']::placeholder,
html.insightDetail .popupWindow.subscribeForm>.detail>.content>input[type='email']::placeholder{
    color: #C9CACA;
}
html.insight .popupWindow.subscribeForm>.detail>.content>input[type='email']:-ms-input-placeholder,
html.insightDetail .popupWindow.subscribeForm>.detail>.content>input[type='email']:-ms-input-placeholder{
    color: #C9CACA;
}
html.insight .popupWindow.subscribeForm>.detail>.content>input[type='email']::-ms-input-placeholder,
html.insightDetail .popupWindow.subscribeForm>.detail>.content>input[type='email']::-ms-input-placeholder{
    color: #C9CACA;
}

html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>#gCodeImg,
html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea>#gCodeImg{
    width: 180px;
    min-height: 45px;
    background: #EEEEEE;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>#gCodeImg,
    html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea>#gCodeImg{
        width: calc(50% - 5px);
    }
}
html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>input#gCode,
html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>input#unsubscribeGCode,
html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea>input#gCode{
    width: calc(180px - 2px * 2);
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #000000;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 10px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>input#gCode,
    html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>input#unsubscribeGCode,
    html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea>input#gCode{
        width: calc(50% - 5px - 2px * 2);
    }
}
html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>input[type='submit'],
html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea>input[type='submit']{
    width: calc(200px - 15px * 2);
    background-image: linear-gradient(90deg, #121E4A 4.3379%, #0046A0 95.2055%);
    border: 0px;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 10px;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.insight .popupWindow.subscribeForm>.detail>.content>.buttonArea>input[type='submit'],
    html.insightDetail .popupWindow.subscribeForm>.detail>.content>.buttonArea>input[type='submit']{
        width: 100%;
        height: 12vw;
        font-size: 1.1429rem;
        margin: 6.6667vw 0px 0px 0px;
        padding: 0px;
    }
}
html.insight .popupWindow>.detail>input[type='button'],
html.insightDetail .popupWindow>.detail>input[type='button']{
    top: 20px;
    right: 20px;
    left: unset;
}



/* =========================================================
 * Newscenter
 * ========================================================= */
/* Banner */
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .horizontalSliderArea>.mask>ul.slider>li:before{
        margin-top: 66.6667%;
    }
}

html.news .newsListArea{
    width: calc(100% - ((100% - 1360px) / 2 - (25px + 12.5px)) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin: 6.5104vw 0px;
    padding: 0px calc((100% - 1360px) / 2 - (25px + 12.5px));
}
@media only screen and (max-width: 1560px){
    html.news .newsListArea{
        width: calc(100% - (6.85% - (25px + 12.5px))* 2);
        padding: 0px calc(6.85% - (25px + 12.5px));
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea{
        width: calc(100% - 4.8vw * 2);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0px;
        padding: 10.6667vw 4.8vw;
    }
}
html.news .newsListArea>.leftArea{
    width: calc(100% - 300px - 80px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea{
        width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

/* Newscenter 表頭區塊 */
html.news .newsListArea>.leftArea>.topArea{
    width: calc(100% - (25px * 2 + 12.5px));
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 25px 0px calc(25px + 12.5px);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea{
        width: 100%;
        flex-wrap: nowrap;
        flex-direction: column;
        margin: 0px;
    }
}
html.news .newsListArea>.leftArea>.topArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
html.news .newsListArea>.leftArea>.topArea>.titleArea>h1{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.news .newsListArea>.leftArea>.topArea>.titleArea>h1{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.titleArea>h1{
        font-size: 2.8571rem;
    }
}
html.news .newsListArea>.leftArea>.topArea>.titleArea>.language{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 12px 0px;
    position: relative;
}
html.news .newsListArea>.leftArea>.topArea>.titleArea>.language:before{
    content: '';
    width: calc(20px + 10px);
    height: 20px;
    background-color: transparent;
    background-image: url(/images/iconLanguage.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    margin: 0px 10px 0px 0px;
}
html.news .newsListArea>.leftArea>.topArea>.titleArea>.language>select{
    display: none;
}
html.news .newsListArea>.leftArea>.topArea>.titleArea>.language>.selectMenuArea>div{
    padding: 0px 30px 0px 0px;
}
html.news .newsListArea>.leftArea>.topArea>.titleArea>.language .selectMenuArea:after{
    content: '';
    width: 7px;
    height: 7px;
    border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
    border-style: solid solid solid solid;
    border-width: 1px;
    margin: 3px 0px 0px 0px;
    position: absolute;
    right: 3px;
    transform: rotate(135deg);
    cursor: pointer;
}

html.news .newsListArea>.leftArea>.topArea>.searchBar{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 2.6042vw 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar{
        flex-wrap: wrap;
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label{
    color: var(--bodyFontColorBlue);
    border-bottom: 1px solid var(--bodyFontColorBlue);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar>label{
        font-size: 1.2857rem;
    }
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='categories']{
    width: 49.2647%;
    display: flex;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='categories']{
        width: 100%;
    }
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='categories']>select{
    display: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='categories']>select{
        font-size: 1rem;
        display: flex;
    }
    html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='categories']:after{
        content: '';
        width: 7px;
        height: 7px;
        border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
        border-style: solid solid solid solid;
        border-width: 1px;
        position: absolute;
        right: 3px;
        bottom: calc(1rem + 7px);
        transform: rotate(135deg);
        cursor: pointer;
    }
}

html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='keywords']{
    width: 47.7941%;
    display: flex;
    margin: 0px 0px 0px 1.04167vw;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='keywords']{
        width: auto;
        flex-grow: 1;
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label>select{
    width: 100%;
    background: transparent;
    border: 0px;
    padding: 1rem 30px 1rem 0px;
    outline: none;
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label[for='categories'] .selectMenuArea:after{
    content: '';
    width: 7px;
    height: 7px;
    border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
    border-style: solid solid solid solid;
    border-width: 1px;
    position: absolute;
    right: 3px;
    bottom: calc(1rem + 7px);
    transform: rotate(135deg);
    cursor: pointer;
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label>.selectMenuArea>div{
    padding: 1rem 30px 1rem 0px;
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>label>input[type='search']{
    width: 100%;
    background: transparent;
    border: 0px;
    padding: 1rem 0px;
    outline: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar>label>input[type='search']{
        font-size: 1rem;
    }
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>input[type='submit']{
    background-color: transparent;
    background-image: url(/images/iconSearch.svg);
    background-repeat: no-repeat;
    background-size: auto 1rem;
    background-position: bottom 1rem center;
    border: 0px;
    border-radius: 0px;
    border-bottom: 1px solid #0058D9;
    color: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    transition: all 0.3s ease-out;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.topArea>.searchBar>input[type='submit']{
        flex-grow: 0;
    }
}
html.news .newsListArea>.leftArea>.topArea>.searchBar>input[type='submit']:hover{
    background-size: auto 1.2rem;
}

/* News 列表區塊 */
html.news .newsListArea>.leftArea>.newsList{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 40px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList{
        width: 100%;
        margin: 9.3333vw 0px 0px 0px;
        padding: 0px;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul{
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li{
    width: calc(100% - (25px * 2 + 12.5px));
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 12.5px 0px 12.5px 12.5px;
    padding: 25px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li{
        width: 100%;
        margin: 10.6667vw 0px 0px 0px;
        padding: 0px;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li:hover{
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li:hover{
        box-shadow: unset;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
}
@media only screen and (max-width: 1199px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure{
        flex-direction: column;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>picture{
    width: 390px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 1440px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>picture{
        width: 300px;
    }
}
@media only screen and (max-width: 1199px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>picture{
        width: 100%;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>picture:before{
    content: '';
    display: block;
    margin-top: 60.2564%;
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 0px 0px 35px;
}
@media only screen and (max-width: 1199px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption{
        padding: 35px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption{
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.date{
    color: #898989;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.date{
        font-size: 1.1667rem;
    }
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.categories{
        font-size: 1.1667rem;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.categories>li:before{
        content: '．';
    }
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.categories>li:first-child:before{
        display: none;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>h3{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.8571em;
    font-weight: normal;
    line-height: 120%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 15px 0px 0px 0px;
    display: -webkit-box;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>h3{
        font-size: 1.7143rem;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>p{
    width: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 1rem 0px;
    overflow: hidden;
}
@media only screen and (max-width: 1440px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>p{
        flex-grow: 0;
        -webkit-line-clamp: 2;
    }
}
@media only screen and (max-width: 1199px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>p{
        -webkit-line-clamp: 3;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>p{
        line-height: 150%;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>.categories{
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>.date{
        color: #898989;
        font-size: 1.1667rem;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>.categories{
        font-size: 1.1667rem;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>.categories>li:before{
    content: '．';
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>.categories>li:first-child:before{
    display: none;
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>div.more{
    color: var(--bodyFontColorBlue);
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>div.more{
        font-size: 1.1667rem;
    }
}
html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>div.more:after{
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 1px 0px 0px;
    display: flex;
    margin: 0px 0px 0px 0.3rem;
    position: relative;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>ul>li>figure>figcaption>.bottomArea>div.more:after{
        top: 0.1rem;
        right: 0px;
    }
}
html.news .newsListArea>.leftArea>.newsList>input[type='button']{
    width: calc((100% - (25px + 12.5px) * 2 * 3) / 3);
    height: 45px;
    background: var(--mainBlueColor);
    border: 0px;
    color: var(--mainWhiteColor);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.7143rem;
    margin: 2.3438vw 0px 0px 0px;
    cursor: pointer;
}
@media only screen and (max-width: 1440px){
    html.news .newsListArea>.leftArea>.newsList>input[type='button']{
        font-size: 1.2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.leftArea>.newsList>input[type='button']{
        width: 100%;
        max-width: unset;
        height: 12vw;
        background: var(--mainDarkBlueColor);
        font-size: 1.4286rem;
        margin: 4.8vw 0px 0px 0px;
    }
}

html.news .newsListArea>.rightArea{
    width: 300px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px calc(25px + 12px) 0px 80px;
    padding: calc(3.8571rem + 2.6042vw + 1rem + 1rem + 1rem * 2 + 5px - 2.2857rem - 17.5px) 0px 0px 0px;
    overflow: hidden;
}
@media only screen and (max-width: 1440px){
    html.news .newsListArea>.rightArea{
        width: 250px;
        margin: 0px calc(25px + 12px) 0px 5.5556%;
        padding: calc(2.6rem + 2.6042vw + 1rem + 1rem + 1rem * 2 + 5px - 2.2857rem - 17.5px) 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.rightArea{
        width: 100%;
        margin: 12vw 0px 0px 0px;
        padding: 0px;
    }
}

/* News Tags */
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.news .newsListArea>.rightArea>.tags{
        width: 100%;
        display: none;
    }
    html.news .newsListArea>.rightArea>.tags>label{
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex-grow: 0;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }
    html.news .newsListArea>.rightArea>.tags>label:after{
        content: '';
        width: 7px;
        height: 7px;
        border-color: var(--bodyFontColorBlue) var(--bodyFontColorBlue) transparent transparent;
        border-style: solid solid solid solid;
        border-width: 1px;
        position: absolute;
        right: 3px;
        bottom: calc(1rem + 7px);
        transform: rotate(135deg);
        cursor: pointer;
    }
}
html.news .newsListArea>.rightArea>.tags>ul>li{
    width: 100%;
    border: 0px;
    text-align: left;
    margin: 7.5px 0px;
    display: inline;
}



/* =========================================================
 * Career
 * ========================================================= */
/* Career 區塊 */
html.career .careerArea{
    width: 100%;
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .careerArea{
        background: var(--darkBlockBackground);
    }
}
html.career .careerArea>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .careerArea>figure{
        flex-direction: column;
    }
}
html.career .careerArea>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
html.career .careerArea>figure>picture:before{
    content: '';
    display: block;
    margin-top: 26.0417%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .careerArea>figure>picture:before{
        margin-top: 100%;
    }
}
html.career .careerArea>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.career .careerArea>figure>figcaption{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4.1667vw calc((100% - 1360px) / 2);
    position: absolute;
    left: 0px;
    bottom: 0px;
}
@media only screen and (max-width: 1560px){
    html.career .careerArea>figure>figcaption{
        width: calc(100% - 6.85% * 2);
        padding: 4.1667vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .careerArea>figure>figcaption{
        width: calc(100% - 4.8vw * 2);
        color: #000000;
        padding: 10.6667vw 4.8vw;
        position: relative;
    }
}
html.career .careerArea>figure>figcaption>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 4.6429rem;
    font-weight: normal;
    text-shadow: 0px 0px 15px #000000;
}
@media only screen and (max-width: 1440px){
    html.career .careerArea>figure>figcaption>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .careerArea>figure>figcaption>h2{
        font-size: 2.8571rem;
        text-shadow: unset;
    }
}
html.career .careerArea>figure>figcaption>p{
    width: 75%;
    line-height: 200%;
    hyphens: auto;
    text-shadow: 0px 0px 10px #000000;
    word-wrap: break-word;
    margin: 10px 0px 0px 0px;
}
@media only screen and (max-width: 1560px){
    html.career .careerArea>figure>figcaption>p{
        width: 60%;
        line-height: 150%;
        margin: 15px 0px 0px 0px;
    }
}
@media only screen and (max-width: 1200px){
    html.career .careerArea>figure>figcaption>p{
        width: 85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .careerArea>figure>figcaption>p{
        width: 100%;
        text-shadow: unset;
    }
}

/* Our Values 區塊 */
html.career .ourValuesArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 5.2083vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.career .ourValuesArea{
        width: calc(100% - 6.85% * 2);
        padding: 5.2083vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourValuesArea{
       width: calc(100% - 4.8vw * 2);
       padding: 10.6667vw 4.8vw;
    }
}
html.career .ourValuesArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourValuesArea>.titleArea{
        align-items: flex-start;
    }
}
html.career .ourValuesArea>.titleArea:after{
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px solid #0058D9;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourValuesArea>.titleArea:after{
        display: none;
    }
}
html.career .ourValuesArea>.titleArea>h2{
    background: #FFFFFF;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    position: relative;
    padding: 0px 2.60417vw;
    z-index: 2;
}
@media only screen and (max-width: 1440px){
    html.career .ourValuesArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
html.career .ourValuesArea>.values{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 45px 0px 0px 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values{
        flex-wrap: nowrap;
        flex-direction: column;
    }
}
html.career .ourValuesArea>.values>li{
    width: calc((1360px - (14px * 4)) / 5);
    height: calc(((1360px - (14px * 4)) / 5) / 260 * 320);
    background-color: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 14px 0px 0px;
    position: relative;
    cursor: pointer;
    perspective: 1000px;
    overscroll-behavior: contain;
}
@media only screen and (min-width: 1441px) and (max-width: 1920px){
    html.career .ourValuesArea>.values>li{
        width: calc((1360px - (0.7292vw * 4)) / 5);
        margin: 0px 0.7292vw 0px 0px;
    }
}
@media only screen and (max-width: 1440px){
    html.career .ourValuesArea>.values>li{
        width: calc((100% - (0.6944vw * 4)) / 5);
        margin: 0px 0.6944vw 0px 0px;
    }
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li{
        width: 100%;
        height: 55vw;
        margin: 0px 0px 15px 0px;
    }
}
html.career .ourValuesArea>.values>li:nth-child(5n){
    margin: 0px;
}
html.career .ourValuesArea>.values>li>div{
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: transform 0.8s ease-out;
    overscroll-behavior: contain;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div{
        transition: transform 1.5s ease-out;
    }
}
html.career .ourValuesArea>.values>li.clicked>div{
    transform: rotateX(180deg);
}
html.career .ourValuesArea>.values>li>div>div.frontend{
    width: calc(100% - 30px * 2 - 1px * 2);
    height: calc(100% - 40px - 35px - 1px * 2);
    background: #FFFFFF;
    border: 1px solid #0058D9;
    border-radius: 1.9231%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 30px 35px 30px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.frontend{
        width: calc(100% - 20px * 2 - 1px * 2);
        height: calc(100% - 20px * 2 - 1px * 2);
        border-radius: 1.3333vw;
        flex-direction: row;
        padding: 20px;
    }
}
html.career .ourValuesArea>.values>li>div>div.frontend>figure{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.frontend>figure{
        flex-direction: row;
    }
}
html.career .ourValuesArea>.values>li>div>div.frontend>figure>picture{
    width: 70.38462%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 15.3846% 0px 0px 0px;
    overflow: hidden;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.frontend>figure>picture{
        width: 29.3333vw;
        margin: 0px;
    }
}
html.career .ourValuesArea>.values>li>div>div.frontend>figure>picture:before{
    content: '';
    display: block;
    margin-top: 100%;
}
html.career .ourValuesArea>.values>li>div>div.frontend>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.career .ourValuesArea>.values>li>div>div.frontend>figure>figcaption{
    width: 100%;
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 9.6154% 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.career .ourValuesArea>.values>li>div>div.frontend>figure>figcaption{
        font-size: 1.8571rem;
    }
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.frontend>figure>figcaption{
        font-size: 1.9167rem;
        flex-direction: row;
        margin: 0px 0px 0px 2.6667vw;
    }
}
html.career .ourValuesArea>.values>li>div>div.backend{
    width: calc(100% - 25px * 2 - 1px * 2);
    height: calc(100% - 50px * 2 - 1px * 2);
    background-color: var(--mainBlueColor);
    border: 1px solid #0058D9;
    border-radius: 1.9231%;
    color: var(--mainWhiteColor);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 50px 25px;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: rotateX(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.backend{
        width: calc(100% - 4vw * 2 - 1px * 2);
        height: calc(100% - 4vw * 2 - 1px * 2);
        border-radius: 1.3333vw;
        display: block;
        padding: 4vw;
    }
}
html.career .ourValuesArea>.values>li>div>div.backend>h3{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857rem;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 20px 0px;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.career .ourValuesArea>.values>li>div>div.backend>h3{
        font-size: 1.8571rem;
    }
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.backend>h3{
        font-size: 2rem;
        justify-content: flex-start;
        margin: 0px 0px 2.6667vw 0px;
        padding: 0px;
    }
}
html.career .ourValuesArea>.values>li>div>div.backend>h3:after{
    content: '';
    width: 60px;
    height: 1px;
    border-bottom: 1px solid #FFFFFF;
    position: absolute;
    bottom: 0px;
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.backend>h3:after{
        display: none;
    }
}
html.career .ourValuesArea>.values>li>div>div.backend>p{
    font-size: 1rem;
    text-align: center;
    line-height: 150%;
}
@media only screen and (max-width: 1440px){
    html.career .ourValuesArea>.values>li>div>div.backend>p{
        font-size: 0.8571rem;
    }
}
@media screen and (orientation: portrait){
    html.career .ourValuesArea>.values>li>div>div.backend>p{
        font-size: 1.1667rem;
        text-align: left;
    }
}

/* What We Look For 區塊 */
html.career .whatWeLookForArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background: var(--darkBlockBackground);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 3.125vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.career .whatWeLookForArea{
        width: calc(100% - 6.85% * 2);
        padding: 3.125vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea{
        width: 100%;
        padding: 0px;
    }
}
html.career .whatWeLookForArea>.pictures{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.pictures{
        flex-wrap: nowrap;
        flex-direction: column;
    }
}
html.career .whatWeLookForArea>.pictures>li{
    width: calc(100% / 3);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 45px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.pictures>li{
        width: 100%;
        margin: 0px;
    }
}
html.career .whatWeLookForArea>.pictures>li>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
html.career .whatWeLookForArea>.pictures>li>figure:before{
    content: '';
    display: block;
    margin-top: 62.4724%;
}
html.career .whatWeLookForArea>.pictures>li>figure>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.career .whatWeLookForArea>.titleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.titleArea{
        width: calc(100% - 4.8vw * 2);
        align-items: flex-start;
        padding: 10.6667vw 4.8vw 0px 4.8vw;
    }
}
html.career .whatWeLookForArea>.titleArea:after{
    content: '';
    width: 100%;
    height: 1px;
    border-top: 1px solid #0058D9;
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.titleArea:after{
        display: none;
    }
}
html.career .whatWeLookForArea>.titleArea>h2{
    background: var(--darkBlockBackground);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    position: relative;
    padding: 0px 2.60417vw;
    z-index: 2;
}
@media only screen and (max-width: 1440px){
    html.career .whatWeLookForArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.titleArea>h2{
        font-size: 2.8571rem;
        padding: 0px;
    }
}
html.career .whatWeLookForArea>.infoArea{
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.infoArea{
        width: calc(100% - 4.8vw * 2);
        margin: 3.2vw 0px 0px 0px;
        padding: 0px 4.8vw 10.6667vw 4.8vw;
    }
}
html.career .whatWeLookForArea>.infoArea>p{
    font-size: 1.2rem;
    line-height: 200%;
    text-align: center;
    hyphens: auto;
    word-wrap: break-word;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .whatWeLookForArea>.infoArea>p{
        font-size: 1rem;
        line-height: 150%;
        text-align: left;
        margin: 1rem 0px 0px 0px;
    }
}

/* Your Interview Journey 區塊 */
html.career .yourInterviewJourneyArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 3.125vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.career .yourInterviewJourneyArea{
        width: calc(100% - 6.85% * 2);
        padding: 3.125vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea{
        width: 100%;
        flex-direction: column;
        padding: 0px;
    }
}
html.career .yourInterviewJourneyArea>.titleArea{
    width: calc(100% - 40% * 2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.titleArea{
        width: calc(100% - 40% - 4.8vw * 2);
        padding: 10.6667vw calc(40% + 4.8vw) 10.6667vw 4.8vw;
    }
}
html.career .yourInterviewJourneyArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.career .yourInterviewJourneyArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.career .yourInterviewJourneyArea>.journeys{
    width: calc(40% * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.journeys{
        width: 100%;
        flex-direction: column;
    }
}
html.career .yourInterviewJourneyArea>.journeys>li{
    width: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.journeys>li{
        width: 100%;
    }
}
html.career .yourInterviewJourneyArea>.journeys>li>figure{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
html.career .yourInterviewJourneyArea>.journeys>li>figure>picture{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
html.career .yourInterviewJourneyArea>.journeys>li>figure>picture:before{
    content: '';
    display: block;
    margin-top: 60%;
}
html.career .yourInterviewJourneyArea>.journeys>li>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.career .yourInterviewJourneyArea>.journeys>li>figure>figcaption{
    width: calc(100% - 27%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 25px 0px 0px 0px;
    padding: 0px 27% 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.journeys>li>figure>figcaption{
        width: calc(100% - 4.8vw * 2);
        margin: 0px;
        padding: 10.6667vw 4.8vw;
    }
}
html.career .yourInterviewJourneyArea>.journeys>li>figure>figcaption>h3{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 2.2857em;
    font-weight: normal;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.journeys>li>figure>figcaption>h3{
        font-size: 1.7143rem;
    }
}
html.career .yourInterviewJourneyArea>.journeys>li>figure>figcaption>p{
    line-height: 200%;
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .yourInterviewJourneyArea>.journeys>li>figure>figcaption>p{
        line-height: 150%;
        margin: 1rem 0px 0px 0px;
    }
}

/* Job Opportunities 區塊 */
html.career .jobOpportunitiesArea{
    width: 100%;
    height: calc(36.4583vw - 4.1667vw * 2);
    background-color: transparent;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 4.1667vw 0;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.career .jobOpportunitiesArea{
        height: calc(500px - 4.1667vw * 2);
        padding: 4.1667vw 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea{
        height: calc(160vw - 10.6667vw * 2);
        padding: 10.6667vw 0px;
    }
}
html.career .jobOpportunitiesArea>.titleArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.career .jobOpportunitiesArea>.titleArea{
        width: calc(100% - 6.85% * 2);
        padding: 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.titleArea{
        width: calc(100% - 4.8vw * 2);
        padding: 0px 4.8vw;
    }
}
html.career .jobOpportunitiesArea>.titleArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    text-shadow: 0px 0px 15px #000000;
}
@media only screen and (max-width: 1440px){
    html.career .jobOpportunitiesArea>.titleArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.titleArea>h2{
        font-size: 2.8571rem;
    }
}
html.career .jobOpportunitiesArea>.sliderArea{
    width: calc(100% - ((100% - 1360px - 6px * 2) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 25px 0px 0px 0px;
    padding: 0px calc((100% - 1360px - 6px * 2) / 2);
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media only screen and (max-width: 1440px){
    html.career .jobOpportunitiesArea>.sliderArea{
        width: calc(100% - (6.85% - 6px) * 2);
        padding: 0px calc(6.85% - 6px);
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea{
        width: calc(100% - (4.8vw - 6px) * 2);
        margin: 4.8vw 0px 0px 0px;
        padding: 0px calc(4.8vw - 6px);
    }
}
html.career .jobOpportunitiesArea>.sliderArea>.mask{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider{
    width: inherit;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li{
    width: calc((1360px + 6px * 2) / 3 - 25px * 2 - 6px * 2);
    background: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 6px;
    padding: 20px 25px;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li{
        width: calc(100% / 3 - 25px * 2 - 6px * 2);
    }
}
@media only screen and (max-width: 1140px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li{
        width: calc(100% / 2 - 25px * 2 - 6px * 2);
    }
}
@media only screen and (max-width: 899px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li{
        width: calc(100% - 25px * 2 - 6px * 2);
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li{
        width: calc(100% - 11.7333vw * 2 - 6px * 2);
        padding: 6.6667vw 11.7333vw;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>h3{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.8571rem;
    font-weight: normal;
    line-height: 120%;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px 0px 10px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>h3{
        font-size: 2rem;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>ul{
    width: 100%;
    border-top: 1px solid #0058D9;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>ul{
        padding: 15px 0px;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>ul>li{
    width: 100%;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px 0px 0px 0px;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>ul>li:before{
    content: '';
    width: 20px;
    height: 20px;
    display: flex;
    flex-shrink: 0;
    margin: 0px 10px 0px 0px;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>ul>li.location:before{
    background-color: transparent;
    background-image: url(/images/iconLocation.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>ul>li.scope:before{
    background-color: transparent;
    background-image: url(/images/iconScope.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
}
html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>.buttonArea>input[type='button']{
    min-width: 160px;
    background-image: linear-gradient(270deg, #121E4A 0%, #0046A0 57.3059%);
    border: 0px;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>.mask>ul.slider>li>.buttonArea>input[type='button']{
        width: 100%;
        min-width: unset;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>ul.page{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 25px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>ul.page{
        display: none;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>ul.page>li{
    display: flex;
    margin: 0px 10px;
}
@media only screen and (max-width: 1440px){
    html.career .jobOpportunitiesArea>.sliderArea>ul.page>li{
        margin: 0px 5px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>ul.page>li{
        margin: 0px 0.7037vw;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>ul.page>li>input{
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #FFFFFF;
    border-radius: 100%;
    color: transparent;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .jobOpportunitiesArea>.sliderArea>ul.page>li>input{
        width: 1.241vw;
        height: 1.241vw;
    }
}
html.career .jobOpportunitiesArea>.sliderArea>ul.page>li.current>input{
    background: #FFFFFF;
}

/* Our Benefits 區塊 */
html.career .ourBenefitsArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 100px 0px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea{
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 0px 0px 10.6667vw 0px;
    }
}
html.career .ourBenefitsArea>.ourBenefitsBlock{
    width: 52.0833%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.ourBenefitsBlock{
        width: 100%;
    }
}
html.career .ourBenefitsArea>.ourBenefitsBlock>.ourBenefits{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
html.career .ourBenefitsArea>.ourBenefitsBlock>.ourBenefits:before{
    content: '';
    display: block;
    margin-top: 70%;
}
html.career .ourBenefitsArea>.ourBenefitsBlock>.ourBenefits>li{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
}
html.career .ourBenefitsArea>.ourBenefitsBlock>.ourBenefits>li>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

html.career .ourBenefitsArea>.contentArea{
    width: calc(100% - 52.0833% - ((100% - 1360px) / 2) - 20px - 3.125%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0px calc((100% - 1360px) / 2) 0px 20px;
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.career .ourBenefitsArea>.contentArea{
        width: calc(100% - 52.0833% - 6.85% - 20px - 3.125%);
        padding: 0px 6.85% 0px 20px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea{
        width: calc(100% - 4.8vw * 2);
        padding: 10.6667vw 4.8vw;
    }
}
html.career .ourBenefitsArea>.contentArea>h2{
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.career .ourBenefitsArea>.contentArea>h2{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>h2{
        font-size: 2.8571rem;
    }
}

html.career .ourBenefitsArea>.contentArea>.info{
    width: 540px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: stretch;
    margin: 30px 0px 0px 0px;
    padding: 30px 0px 0px 0px;
    position: relative;
    overflow: hidden;
}
@media only screen and (max-width: 1440px){
    html.career .ourBenefitsArea>.contentArea>.info{
        width: calc(100vw - 52.0833vw - 6.85vw - 20px - 3.125vw);
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>.info{
        width: 100%;
        margin: 5.3333vw 0px 0px 0px;
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.career .ourBenefitsArea>.contentArea>.info:before{
    content: '';
    width: 17%;
    height: 1px;
    border-color: var(--bodyFontColorBlue);
    border-style: solid;
    border-width: 1px 0px 0px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}
html.career .ourBenefitsArea>.contentArea>.info>li{
    width: 540px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
@media only screen and (max-width: 1440px){
    html.career .ourBenefitsArea>.contentArea>.info>li{
        width: calc(100vw - 52.0833vw - 6.85vw - 20px - 3.125vw);
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>.info>li{
        width: 100%;
    }
}
html.career .ourBenefitsArea>.contentArea>.info>li>h3{
    font-size: 2.1429rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    html.career .ourBenefitsArea>.contentArea>.info>li>h3{
        font-size: 2rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>.info>li>h3{
        font-size: 1.5rem;
    }
}
html.career .ourBenefitsArea>.contentArea>.info>li>p{
    margin: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>.info>li>p{
        margin: 1rem 0px 0px 0px;
    }
}

html.career .ourBenefitsArea>.contentArea>ul.page{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 30px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>ul.page{
        display: none;
    }
}
html.career .ourBenefitsArea>.contentArea>ul.page>li{
    display: flex;
    margin: 0px 10px;
}
html.career .ourBenefitsArea>.contentArea>ul.page>li:last-child{
    margin: 0px 0px 0px 10px;
}
html.career .ourBenefitsArea>.contentArea>ul.page>li>input{
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #000000;
    border-radius: 100%;
    color: transparent;
    padding: 0px;
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .ourBenefitsArea>.contentArea>ul.page>li>input{
        width: 1.241vw;
        height: 1.241vw;
    }
}
html.career .ourBenefitsArea>.contentArea>ul.page>li.current>input{
    background: #000000;
}

/* Want to try something new 區塊 */
html.career .positionsArea,
html.job .positionsArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background-image: linear-gradient(90deg, #121E4A 4.3379%, #0046A0 95.2055%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 35px calc((100% - 1360px) / 2);
    position: relative;
}
@media only screen and (max-width: 1440px){
    html.career .positionsArea,
    html.job .positionsArea{
        width: calc(100% - 6.85% * 2);
        padding: 1.6667vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .positionsArea,
    html.job .positionsArea{
        width: calc(100% - 4.8vw * 2);
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 9.3333vw 4.8vw 6.6667vw 4.8vw;
    }
}
html.career .positionsArea>.contentArea,
html.job .positionsArea>.contentArea{
    max-width: 100%;
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
}
html.career .positionsArea>.contentArea>h2,
html.job .positionsArea>.contentArea>h2{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .positionsArea>.contentArea>h2,
    html.job .positionsArea>.contentArea>h2{
        font-size: 2.8571rem;
    }
}
html.career .positionsArea>.contentArea>p,
html.job .positionsArea>.contentArea>p{
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .positionsArea>.contentArea>p,
    html.job .positionsArea>.contentArea>p{
        margin: 1rem 0px 0px 0px;
    }
}
html.career .positionsArea>.buttonArea,
html.job .positionsArea>.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .positionsArea>.buttonArea,
    html.job .positionsArea>.buttonArea{
        width: 100%;
    }
}
html.career .positionsArea>.buttonArea>input,
html.job .positionsArea>.buttonArea>input{
    min-width: 160px;
    background-color: transparent;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .positionsArea>.buttonArea>input,
    html.job .positionsArea>.buttonArea>input{
        width: 100%;
        height: 12vw;
        font-size: 1.1429rem;
        margin: 4vw 0px 0px 0px;
        padding: 0px;
    }
}
html.career .positionsArea>.formArea,
html.job .positionsArea>.formArea{
    display: none;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow,
    html.job .popupWindow{
        align-items: flex-start;
        overflow-y: auto;
    }
}
html.career .popupWindow>.detail,
html.job .popupWindow>.detail{
    max-width: 80%;
    max-width: 1050px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 1440px){
    html.career .popupWindow>.detail,
    html.job .popupWindow>.detail{
        width: 90%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail,
    html.job .popupWindow>.detail{
        width: 100%;
    }
}
html.career .popupWindow>.detail>.content,
html.job .popupWindow>.detail>.content{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content,
    html.job .popupWindow>.detail>.content{
        flex-direction: column;
        align-items: flex-start;
    }
}
html.career .popupWindow>.detail>.content>.photo,
html.job .popupWindow>.detail>.content>.photo{
    width: calc(100% - 55.2381%);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.photo,
    html.job .popupWindow>.detail>.content>.photo{
        width: 100%;
        height: 80vw;
    }
}
html.career .popupWindow>.detail>.content>.photo>figure,
html.job .popupWindow>.detail>.content>.photo>figure{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
html.career .popupWindow>.detail>.content>.photo>figure>picture,
html.job .popupWindow>.detail>.content>.photo>figure>picture{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
}
html.career .popupWindow>.detail>.content>.photo>figure>picture>img,
html.job .popupWindow>.detail>.content>.photo>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.career .popupWindow>.detail>.content>.photo>figure>figcaption,
html.job .popupWindow>.detail>.content>.photo>figure>figcaption{
    width: calc(100% - 60px * 2);
    color: #FFFFFF;
    font-family: var(--bodyFontFamilyTitle);
    font-size: 5rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 60px;
    position: absolute;
    top: 50px;
    left: 0px;
}
@media only screen and (max-width: 1440px){
    html.career .popupWindow>.detail>.content>.photo>figure>figcaption,
    html.job .popupWindow>.detail>.content>.photo>figure>figcaption{
        width: calc(100% - 40px * 2);
        font-size: 4rem;
        padding: 0px 40px;
        top: 40px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.photo>figure>figcaption,
    html.job .popupWindow>.detail>.content>.photo>figure>figcaption{
        width: calc(100% - 6.6667vw * 2);
        font-size: 2.8571rem;
        padding: 6.6667vw;
        top: unset;
        bottom: 0px;
    }
}
html.career .popupWindow>.detail>.content>.form,
html.job .popupWindow>.detail>.content>.form{
    width: calc(55.2381% - 60px - 40px);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    padding: 40px 60px 40px 40px;
}
@media only screen and (max-width: 1440px){
    html.career .popupWindow>.detail>.content>.form,
    html.job .popupWindow>.detail>.content>.form{
        padding: 30px 60px 30px 40px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form,
    html.job .popupWindow>.detail>.content>.form{
        width: calc(100% - 6.667vw * 2);
        padding: 6.6667vw;
    }
}
html.career .popupWindow>.detail>.content>.form>.row,
html.job .popupWindow>.detail>.content>.form>.row{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 15px 0px;
    margin: 25px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.career .popupWindow>.detail>.content>.form>.row,
    html.job .popupWindow>.detail>.content>.form>.row{
        padding: 10px 0px;
        margin: 15px 0px 0px 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form>.row,
    html.job .popupWindow>.detail>.content>.form>.row{
        font-size: 1.1667rem;
        padding: 4vw 0px;
        margin: 2.6667vw 0px 0px 0px;
    }
}
html.career .popupWindow>.detail>.content>.form>.row.firstName,
html.career .popupWindow>.detail>.content>.form>.row.lastName,
html.career .popupWindow>.detail>.content>.form>.row.email,
html.career .popupWindow>.detail>.content>.form>.row.phone,
html.job .popupWindow>.detail>.content>.form>.row.firstName,
html.job .popupWindow>.detail>.content>.form>.row.lastName,
html.job .popupWindow>.detail>.content>.form>.row.email,
html.job .popupWindow>.detail>.content>.form>.row.phone{
    border-bottom: 1px solid #000000;
}
html.career .popupWindow>.detail>.content>.form>.row.resume,
html.career .popupWindow>.detail>.content>.form>.row.coverLetter,
html.job .popupWindow>.detail>.content>.form>.row.resume,
html.job .popupWindow>.detail>.content>.form>.row.coverLetter{
    padding: 0px;
}
@media only screen and (max-width: 1440px){
    html.career .popupWindow>.detail>.content>.form>.row.resume,
    html.career .popupWindow>.detail>.content>.form>.row.coverLetter,
    html.job .popupWindow>.detail>.content>.form>.row.resume,
    html.job .popupWindow>.detail>.content>.form>.row.coverLetter{
        margin: 25px 0px 0px 0px;
    }
}
html.career .popupWindow>.detail>.content>.form>.row>label,
html.job .popupWindow>.detail>.content>.form>.row>label{
    min-width: 100px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form>.row>label,
    html.job .popupWindow>.detail>.content>.form>.row>label{
        min-width: calc(1.6667rem * 4.5);
    }
}
html.career .popupWindow>.detail>.content>.form>.row.require>label:after,
html.job .popupWindow>.detail>.content>.form>.row.require>label:after{
    content: '*';
}
html.career .popupWindow>.detail>.content>.form>.row>input[type='text'],
html.career .popupWindow>.detail>.content>.form>.row>input[type='email'],
html.career .popupWindow>.detail>.content>.form>.row>input[type='tel'],
html.job .popupWindow>.detail>.content>.form>.row>input[type='text'],
html.job .popupWindow>.detail>.content>.form>.row>input[type='email'],
html.job .popupWindow>.detail>.content>.form>.row>input[type='tel']{
    min-width: 0px;
    background: transparent;
    border: 0px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
html.career .popupWindow>.detail>.content>.form>.row input[type='file'],
html.job .popupWindow>.detail>.content>.form>.row input[type='file']{
    display: none;
}
html.career .popupWindow>.detail>.content>.form>.row>input.uploadButton,
html.job .popupWindow>.detail>.content>.form>.row>input.uploadButton{
    width: 16px;
    height: 20px;
    background-color: transparent;
    background-image: url(/images/iconAttachement.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 0px;
    color: transparent;
    overflow: hidden;
    cursor: pointer;
}
html.career .popupWindow>.detail>.content>.form>.row>p,
html.job .popupWindow>.detail>.content>.form>.row>p{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 0px 10px;
    overflow: hidden;
    cursor: pointer;
}
html.career .popupWindow>.detail>.content>.form>p,
html.job .popupWindow>.detail>.content>.form>p{
    color: #9FA0A0;
    font-size: 0.7143rem;
    margin: 25px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form>p,
    html.job .popupWindow>.detail>.content>.form>p{
        font-size: 1rem;
    }
}
html.career .popupWindow>.detail>.content>.form>.row.gcode,
html.job .popupWindow>.detail>.content>.form>.row.gcode{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
}
html.career .popupWindow>.detail>.content>.form>.row.gcode>#gCodeImg,
html.job .popupWindow>.detail>.content>.form>.row.gcode>#gCodeImg{
    width: 180px;
    min-height: 45px;
    background: #EEEEEE;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form>.row.gcode>#gCodeImg,
    html.job .popupWindow>.detail>.content>.form>.row.gcode>#gCodeImg{
        width: calc(50% - 5px);
        min-height: unset;
    }
}
html.career .popupWindow>.detail>.content>.form>.row.gcode>input#gCode,
html.job .popupWindow>.detail>.content>.form>.row.gcode>input#gCode{
    width: calc(180px - 2px * 2);
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #000000;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 10px;
}
@media only screen and (max-width: 1440px){
    html.career .popupWindow>.detail>.content>.form>.row.buttonArea,
    html.job .popupWindow>.detail>.content>.form>.row.buttonArea{
        padding: 0px;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form>.row.gcode>input#gCode,
    html.job .popupWindow>.detail>.content>.form>.row.gcode>input#gCode{
        width: calc(50% - 5px - 2px * 2);
        flex-shrink: 0;
    }
}
html.career .popupWindow>.detail>.content>.form>.row.buttonArea>input[type='submit'],
html.job .popupWindow>.detail>.content>.form>.row.buttonArea>input[type='submit']{
    width: 100%;
    background-image: linear-gradient(90deg, #121E4A 4.3379%, #0046A0 95.2055%);
    border: 0px;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>.content>.form>.row.buttonArea>input[type='submit'],
    html.job .popupWindow>.detail>.content>.form>.row.buttonArea>input[type='submit']{
        height: 12vw;
        font-size: 1.3333rem;
        padding: 0px;
    }
}
html.career .popupWindow>.detail>input[type='button'],
html.job .popupWindow>.detail>input[type='button']{
    right: 30px;
    left: unset;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.career .popupWindow>.detail>input[type='button'],
    html.job .popupWindow>.detail>input[type='button']{
        filter: drop-shadow(1px 1px 1px #000000);
    }
}



/* =========================================================
 * Job
 * ========================================================= */
html.job .jobArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
}
html.job .jobArea>.titleArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 3.9063vw calc((100% - 1360px) / 2) 0px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.job .jobArea>.titleArea{
        width: calc(100% - 6.85% * 2);
        padding: 3.9063vw 6.85% 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.titleArea{
        width: calc(100% - 4.8vw * 2);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 10.6667vw 4.8vw 0px 4.8vw;
    }
}
html.job .jobArea>.titleArea>.info{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
}
html.job .jobArea>.titleArea>.info>h1{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 4.6429rem;
    font-weight: normal;
    text-align: left;
}
@media only screen and (max-width: 1440px){
    html.job .jobArea>.titleArea>.info>h1{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.titleArea>.info>h1{
        font-size: 2.1429rem;
    }
}
html.job .jobArea>.titleArea>.info>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 20px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.titleArea>.info>ul{
        margin: 4vw 0px 0px 0px;
    }
}
html.job .jobArea>.titleArea>.info>ul>li{
    width: 100%;
    font-size: 1.2857rem;
    font-weight: bold;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.titleArea>.info>ul>li{
        font-size: 1.1667rem;
        margin: 2.6667vw 0px 0px 0px;
    }
}
html.job .jobArea>.titleArea>.info>ul>li:before{
    content: '';
    width: 25px;
    height: 25px;
    display: flex;
    flex-shrink: 0;
    margin: 0px 10px 0px 0px;
}
html.job .jobArea>.titleArea>.info>ul>li.location:before{
    background-color: transparent;
    background-image: url(/images/iconLocation.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
html.job .jobArea>.titleArea>.info>ul>li.scope:before{
    background-color: transparent;
    background-image: url(/images/iconScope.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
html.job .jobArea>.titleArea>.buttonArea{
    width: 29.4118%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-end;
    margin: 0px 0px 0px 3.125vw;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.titleArea>.buttonArea{
        width: 100%;
        margin: 6.6667vw 0px 0px 0px;
    }
}
html.job .jobArea>.titleArea>.buttonArea>input[type='button']{
    background-image: linear-gradient(270deg, #121E4A 0%, #0046A0 57.3059%);
    border: 0px;
    color: #FFFFFF;
    font-size: 1.1429rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.titleArea>.buttonArea>input[type='button']{
        width: 100%;
        height: 12vw;
        font-size: 1.3333rem;
        padding: 0px;
    }
}
html.job .jobArea>.contentArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    border-top: 1px solid #0058D9;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 35px calc((100% - 1360px) / 2) 0px calc((100% - 1360px) / 2);
    padding: 35px 0px 0px 0px;
}
@media only screen and (max-width: 1440px){
    html.job .jobArea>.contentArea{
        width: calc(100% - 6.85% * 2);
        margin: 35px 6.85% 0px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.contentArea{
        width: calc(100% - 4.8vw * 2);
        margin: 5.3333vw 4.8vw 0px 4.8vw;
        padding: 5.3333vw 0px 0px 0px;
    }
}
html.job .jobArea>.contentArea>figure{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
html.job .jobArea>.contentArea>figure>picture{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
html.job .jobArea>.contentArea>figure>picture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
html.job .jobArea>.contentArea>.detail{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 35px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.contentArea>.detail{
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.job .jobArea>.contentArea>.detail>div,
html.job .jobArea>.relatedArea>div{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 35px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.contentArea>.detail>div,
    html.job .jobArea>.relatedArea>div{
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.job .jobArea>.contentArea>.detail>div:first-child,
html.job .jobArea>.relatedArea>div:first-child{
    margin: 0px;
}
html.job .jobArea>.contentArea>.detail h2,
html.job .jobArea>.relatedArea h2{
    color: var(--bodyFontColorBlue);
    font-size: 1.4286rem;
    margin: 35px 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.contentArea>.detail h2,
    html.job .jobArea>.relatedArea h2{
        font-size: 1.5rem;
        margin: 5.3333vw 0px 0px 0px;
    }
}
html.job .jobArea>.contentArea>.detail h2:first-child,
html.job .jobArea>.relatedArea h2:first-child{
    margin: 0px;
}
html.job .jobArea>.contentArea>.detail>div>h2,
html.job .jobArea>.relatedArea>div>h2{
    margin: 0px;
}
html.job .jobArea>.contentArea>.detail ul,
html.job .jobArea>.relatedArea ul{
    list-style-type: disc;
    margin: 0px;
    padding: 0px 0px 0px 2rem;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.contentArea>.detail ul,
    html.job .jobArea>.relatedArea ul{
        font-size: 1.16667rem;
    }
}
html.job .jobArea>.contentArea>.detail ul>li,
html.job .jobArea>.relatedArea ul>li{
    margin: 1rem 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.contentArea>.detail ul>li,
    html.job .jobArea>.relatedArea ul>li{
        margin: 1.1667rem 0px 0px 0px;
    }
}
html.job .jobArea>.relatedArea{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background: var(--darkBlockBackground);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 35px 0px 0px 0px;
    padding: 35px calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.job .jobArea>.relatedArea{
        width: calc(100% - 6.85% * 2);
        padding: 35px 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.job .jobArea>.relatedArea{
        width: calc(100% - 4.8vw * 2);
        padding: 9.3333vw 4.8vw;
    }
}


/* =========================================================
 * Contact
 * ========================================================= */
html.contact .viewArea>.contact{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background-color: transparent;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 9.375vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    html.contact .viewArea>.contact{
        width: calc(100% - 6.85% * 2);
        padding: 7.8125vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.contact .viewArea>.contact{
        width: calc(100% - 4.8vw * 2);
        background-color: var(--mainWhiteColor);
        background-image: var(--contactUsAreaPortrait-backgroundImage) !important;
        padding: 10.6667vw 4.8vw;
    }
}
html.contact .contactInfoArea{
    width: 100%;
    border-top: 1px solid #000000;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: stretch;
    margin: 4.16667vw 0px 0px 0px;
    padding: 1vw 0px 0px 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.contact .contactInfoArea{
        margin: 16vw 0px 0px 0px;
        padding: 13.3333vw 0px 0px 0px;
    }
}
html.contact .contactInfoArea>ul{
    display: table;
    margin: 0 auto;
    border-spacing: 2.2857rem 1.4286rem;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.contact .contactInfoArea>ul{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        border-spacing: unset;
        margin: 0px;
    }
}
html.contact .contactInfoArea>ul>li{
    display: table-row;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.contact .contactInfoArea>ul>li{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 2.2857rem 0px 0px 0px;
    }
    html.contact .contactInfoArea>ul>li:first-child{
        margin: 0px;
    }
}
html.contact .contactInfoArea>ul>li>div{
    display: table-cell;
    font-size: 1rem;
    line-height: 200%;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    html.contact .contactInfoArea>ul>li>div{
        font-size: 1.1667rem;
        line-height: 150%;
    }
}
html.contact .contactInfoArea>ul>li>div a{
    color: var(--bodyFontColor);
}



/* =========================================================
 * Privacy Policy / Terms of Use
 * ========================================================= */
.policyArea>article{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background-color: transparent;
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 4.1667vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    .policyArea>article{
        width: calc(100% - 6.85% * 2);
        padding: 4.1667vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .policyArea>article{
        width: calc(100% - 4.8vw * 2);
        padding: 10.6667vw 4.8vw;
    }
}
.policyArea>article>h1{
    font-family: var(--bodyFontFamilyTitle);
    font-size: 3rem;
    font-weight: normal;
}
@media only screen and (max-width: 1440px){
    .policyArea>article>h1{
        font-size: 2.6rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .policyArea>article>h1{
        font-size: 2.1429rem;
    }
}
.policyArea>article>.content{
    margin: 2.6042vw 0px;
}
.policyArea>article>.content h2{
    border-bottom: 1px solid #0058D9;
    color: var(--bodyFontColorBlue);
    font-family: var(--bodyFontFamilyTitle);
    font-size: 1.8571rem;
    margin: 2.2886rem 0px 1.1429rem 0px;
    padding: 0px 0px 1.1429rem 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    .policyArea>article>.content h2{
        font-size: 1.6667rem;
    }
}
.policyArea>article>.content h3{
    color: var(--bodyFontColorBlue);
    font-size: 1.1429rem;
    margin: 1.1429rem 0px;
}
.policyArea>article>.content h4{
    font-size: 1.1429rem;
    margin: 1.1429rem 0px;
}
.policyArea>article>.content ul{
    width: calc(100% - 2.2886rem);
    list-style-type: disc;
    margin: 1.1429rem 0px 0px 0px;
    padding: 0px 0px 0px 2.2886rem;
}
.policyArea>article>.content ul.noStyle{
    list-style-type: none;
}
.policyArea>article>.content ul>li{
    font-size: 1.1429rem;
    margin: 1.1429rem 0px 0px 0px;
}
.policyArea>article>.content ul>li:first-child{
    margin: 0px;
}
.policyArea>article>.content p{
    font-size: 1.1429rem;
    margin: 1.1429rem 0px 0px 0px;
}


/* =========================================================
 * 頁尾區塊
 * ========================================================= */
#wrap>footer{
    width: calc(100% - ((100% - 1360px) / 2) * 2);
    background-color: var(--footerBgColor);
    color: var(--footerContentColor);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    padding: 1.6667vw calc((100% - 1360px) / 2);
}
@media only screen and (max-width: 1440px){
    #wrap>footer{
        width: calc(100% - 6.85% * 2);
        padding: 1.66667vw 6.85%;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer{
        width: 100%;
        flex-wrap: wrap;
        padding: 7vw 0px;
        position: relative;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer{
        width: calc(100% - 4.8vw * 2);
        padding: 10.6667vw 4.8vw;
    }
}
#wrap>footer>section{
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    padding: 0.5208vw 0px 0.7813vw 0px;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section{
        flex-direction: column;
        padding: 0px;
    }
}
#wrap>footer>section:first-child{
    padding: 0px 0px 0.7813vw 0px;
}
#wrap>footer>section:last-child{
    border: 0px;
    padding: 0.5208vw 0px 0px 0px;
}
#wrap>footer>section>.social{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.social{
        width: 100%;
        justify-content: flex-start;
        order: 2;
        margin: calc(8vw - 6.6667vw) 0px 8vw 0px;
    }
}
#wrap>footer>section>.social>li{
    height: 1.1979vw;
    opacity: 0.9;
    margin: 0px 0.5208vw 0px 0px;
    position: relative;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.social>li{
        height: 9.6vw;
        opacity: 1;
        justify-content: flex-start;
        order: 2;
        margin: 0px 3.4vw 0px 0px;
    }
}
#wrap>footer>section>.social>li:hover{
    opacity: 1;
}
#wrap>footer>section>.social>li:last-child{
    margin: 0px;
}
#wrap>footer>section>.social>li>a{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>footer>section>.social>li>a>img{
    height: 100%;
}
#wrap>footer>section>.social>li>a+div{
    background: #FFFFFF;
    box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.1);
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    position: absolute;
    bottom: calc(1.1979vw + 1.6667vw);
    left: 0px;
}
@media only screen and (min-width: 1024px){
    #wrap>footer>section>.social>li>a:hover+div{
        display: flex;
    }
}
@media only screen and (max-width: 1023px){
    #wrap>footer>section>.social>li.open>a+div{
        display: flex;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.social>li.open>a+div{
        bottom: calc(9.6vw + 4px);
    }
}
#wrap>footer>section>.social>li.wechat>.qrCode>img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center center;
}

#wrap>footer>section>.menu{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.menu{
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}
#wrap>footer>section>.menu>li{
    height: 1.0714rem;
    border-right: 1px solid #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 1.0417vw;
    position: relative;
}
@media only screen and (max-width: 1140px){
    #wrap>footer>section>.menu>li{
        font-size: 1rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.menu>li{
        height: auto;
        border-right: 0px;
        font-size: 1.0714rem;
        margin: 0px 8vw 6.6667vw 0px;
        padding: 0px;
    }
}
#wrap>footer>section>.menu>li:last-child{
    border: 0px;
    padding: 0px 0px 0px 1.0417vw;
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.menu>li:last-child{
        margin: 0px 0px 6.6667vw 0px;
        padding: 0px;
    }
    #wrap>footer>section>.menu>li.insightWeeklyMarketCommentary,
    #wrap>footer>section>.menu>li.insightMonthlyIndustryInsights{
        width: 100%;
        margin: 0px 0px 6.6667vw 0px;
    }
}

#wrap>footer>section>.menu>li>a{
    color: var(--footerTitleColor);
}

#wrap>footer>section>.copyright{
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media only screen and (max-width: 1140px){
    #wrap>footer>section>.copyright{
        font-size: 1rem;
    }
}
@media screen and (orientation: portrait) and (max-width: 1023px){
    #wrap>footer>section>.copyright{
        margin: 8vw 0px 0px 0px;
    }
}

#wrap>footer>section>.othersLink{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-end;
    align-items: center;
}
#wrap>footer>section>.othersLink>li{
    height: 1.0714rem;
    border-right: 1px solid #FFFFFF;
    font-size: 1.0714rem;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 1.0417vw;
    position: relative;
}
@media only screen and (max-width: 1140px){
    #wrap>footer>section>.othersLink>li{
        font-size: 1rem;
    }
}
#wrap>footer>section>.othersLink>li:last-child{
    border: 0px;
    padding: 0px 0px 0px 1.0417vw;
}
#wrap>footer>section>.othersLink>li>a{
    color: var(--footerTitleColor);
}