/*** 行動裝置模式 ***/
.mobile-tag-svg,
.mobile-tag-svg-end-arrow
{
    width: 51px;
    height: 300px;
}
.mobile-tag-svg-end-arrow
{
    width: 121px;
}
.arrow-line-half
{
    height: 105px;
}
.mobile-tag-materials-line,
.mobile-tag-cells-line,
.mobile-tag-battery-modules-line
{
    display: flex;
    flex-direction: row;
}
.mobile-tag-materials-line-box,
.mobile-tag-cells-line-box,
.mobile-tag-battery-modules-line-box
{
    display: flex;
    flex: 1;
    justify-content: center;
}
.mobile-tag-battery-modules-line-box
{
    height: 300px;
}
.mobile-inx-content
{
    display: none;
    flex-direction: column;
    width: 80%;
    margin: auto auto 30px;
}
.mobile-tag-size
{
    display: flex;
    height: 120px;
    position: relative;
}
.mobile-tag-materials-block,
.mobile-tag-cells-block,
.mobile-tag-battery-modules-block,
.mobile-tag-application-block
{
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 20px;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}
.mobile-tag-application-block div
{
    display: block;
    margin: 10px 0;
    font-size: 20px;
}
.mobile-tag-materials-content-text,
.mobile-tag-cells-content-text,
.mobile-tag-battery-modules-content-text
{
    display: flex;
    flex-direction: row;
    width: 100%;
    z-index: 50;
    position: absolute;
}
.mobile-tag-materials-indigo-text-box,
.mobile-tag-materials-red-text-box,
.mobile-tag-cells-red-text-box,
.mobile-tag-battery-modules-indigo-text-box
{
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;
    background: #f5f8fb;
}
.mobile-tag-cells-red-text-box
{
    width: 50%;
    flex: unset;
    margin: auto 0 auto auto;
}
.mobile-tag-materials-indigo-text-box,
.mobile-tag-battery-modules-indigo-text-box
{
    padding: 0 5px 0 10px;
    color: #366092;
}
.mobile-tag-battery-modules-indigo-text-box
{
    width: 50%;
    flex: unset;
    margin: auto auto auto 0;
}
.mobile-tag-materials-red-text-box,
.mobile-tag-cells-red-text-box
{
    padding: 0 10px 0 5px;
    color: red;
}
.mobile-tag-materials-indigo-text,
.mobile-tag-materials-red-text,
.mobile-tag-cells-red-text,
.mobile-tag-battery-modules-indigo-text
{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    justify-content: center;
    margin: 2px 0;
    height: 84px;
}
.mobile-tag-materials-indigo-text,
.mobile-tag-battery-modules-indigo-text
{
    border: 2px dashed #4a7dba;
}
.mobile-tag-materials-red-text,
.mobile-tag-cells-red-text
{
    border: 2px dashed red;
}
/* --> 當裝置寬小於 1130 時顯示 */
@media screen and (max-width: 1130px) {
    .index-tag-block .index-tag-block-content
    {
        width: 25%;
    }

    .inx-tag-content-flex-1column
    {
        width: 75%;
    }
    .inx-tag-content-flex-2column
    {
        width: 25%;
    }
    .indigo-arrow-line
    {
        width: calc(95.5% - 15px);
    }
    .indigo-svg-tag-arrow
    {
        right: 5.5%;
    }
    .inx-content-column-indigo-dashed
    {
        right: 5%;
    }
    .flex-battery-modules-1content-box
    {
        padding-right: 0;
        padding-left: 7%;
    }
}

/* --> 當裝置寬小於 960 時顯示 */
@media screen and (max-width: 960px) {
    /* 僅行動裝置模式顯示 */
    .mobile
    {
        display: block;
    }

    .mobile-inx-content
    {
        display: flex;
    }

    /* 頁首 logo */
    .header-log-menu-btn-position
    {
        padding: 5px 5px 0;
        width: 100%;
        height: 100%;
    }

    /* 導航欄區塊 */
    .header-nav
    {
        display: none;
        position: absolute;
        top: 71px;
        z-index: 500;
        width: 100%;
        background: #ffffff;
        padding: 0;
        max-height: calc(100vh - 71px);
        overflow: auto;
    }
    /* 導航欄清單 */
    .header-item
    {
        flex-direction: column;
        padding: 0 10px 5px;
        box-sizing: border-box;
    }
    .header-item li
    {
        padding: 10px 0;
        border-bottom: 1px solid #e4e4e4;
    }

    /* 選單按鈕圖示與動畫 */
    .header-li-menu-btn-position
    {
        display: flex;
        position: absolute;
        right: 16px;
        top: 16px;
    }
    .header-li-menu-btn
    {
        width: 40px;
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-content: center;
    }
    .header-li-menu-btn span
    {
        width: 100%;
        height: 5px;
        display: block;
        background: #333399;
        border-radius: 5px;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    .header-menu-animation-close span:nth-child(1)
    {
        position: absolute;
        -moz-animation-name: menu-animation-close-first;
        -moz-animation-duration: 0.5s;
        -moz-animation-fill-mode: both;

        -webkit-animation-name: menu-animation-close-first;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;

        animation-name: menu-animation-close-first;
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }
    @-moz-keyframes menu-animation-close-first {
        from
        {
            -moz-transform: rotate(0deg);
        }
        to
        {
            -moz-transform: rotate(45deg);
        }
    }
    @-webkit-keyframes menu-animation-close-first {
        from
        {
            -webkit-transform: rotate(0deg);
        }
        to
        {
            -webkit-transform: rotate(45deg);
        }
    }
    @keyframes menu-animation-close-first {
        from
        {
            transform: rotate(0deg);
        }
        to
        {
            transform: rotate(45deg);
        }
    }
    .header-menu-animation-close span:nth-child(2)
    {
        position: absolute;
        -moz-animation-name: menu-animation-close-middle;
        -moz-animation-duration: 0.5s;
        -moz-animation-fill-mode: both;

        -webkit-animation-name: menu-animation-close-middle;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;

        animation-name: menu-animation-close-middle;
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }
    @-moz-keyframes menu-animation-close-middle {
        from
        {
            opacity: 1;
        }
        to
        {
            opacity: 0;
        }
    }
    @-webkit-keyframes menu-animation-close-middle {
        from
        {
            opacity: 1;
        }
        to
        {
            opacity: 0;
        }
    }
    @keyframes menu-animation-close-middle {
        from
        {
            opacity: 1;
        }
        to
        {
            opacity: 0;
        }
    }
    .header-menu-animation-close span:nth-last-child(1)
    {
        position: absolute;
        -moz-animation-name: menu-animation-close-last;
        -moz-animation-duration: 0.5s;
        -moz-animation-fill-mode: both;

        -webkit-animation-name: menu-animation-close-last;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;

        animation-name: menu-animation-close-last;
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }
    @-moz-keyframes menu-animation-close-last {
        from
        {
            -moz-transform: rotate(0deg);
        }
        to
        {
            -moz-transform: rotate(-45deg);
        }
    }
    @-webkit-keyframes menu-animation-close-last {
        from
        {
            -webkit-transform: rotate(0deg);
        }
        to
        {
            -webkit-transform: rotate(-45deg);
        }
    }
    @keyframes menu-animation-close-last {
        from
        {
            transform: rotate(0deg);
        }
        to
        {
            transform: rotate(-45deg);
        }
    }
    .header-menu-animation-btn span:nth-child(1)
    {
        position: static;

        -moz-animation-name: menu-animation-btn-first;
        -moz-animation-duration: 0.5s;
        -moz-animation-fill-mode: both;

        -webkit-animation-name: menu-animation-btn-first;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;

        animation-name: menu-animation-btn-first;
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }
    @-moz-keyframes menu-animation-btn-first {
        from
        {
            -moz-transform: rotate(45deg);
        }
        to
        {
            -moz-transform: rotate(0deg);
        }
    }
    @-webkit-keyframes menu-animation-btn-first {
        from
        {
            -webkit-transform: rotate(45deg);
        }
        to
        {
            -webkit-transform: rotate(0deg);
        }
    }
    @keyframes menu-animation-btn-first {
        from
        {
            transform: rotate(45deg);
        }
        to
        {
            transform: rotate(0deg);
        }
    }
    .header-menu-animation-btn span:nth-child(2)
    {
        position: static;

        -moz-animation-name: menu-animation-btn-middle;
        -moz-animation-duration: 0.5s;
        -moz-animation-fill-mode: both;

        -webkit-animation-name: menu-animation-btn-middle;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;

        animation-name: menu-animation-btn-middle;
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }
    @-moz-keyframes menu-animation-btn-middle {
        from
        {
            opacity: 0;
        }
        to
        {
            opacity: 1;
        }
    }
    @-webkit-keyframes menu-animation-btn-middle {
        from
        {
            opacity: 0;
        }
        to
        {
            opacity: 1;
        }
    }
    @keyframes menu-animation-btn-middle {
        from
        {
            opacity: 0;
        }
        to
        {
            opacity: 1;
        }
    }
    .header-menu-animation-btn span:nth-last-child(1)
    {
        position: static;

        -moz-animation-name: menu-animation-btn-last;
        -moz-animation-duration: 0.5s;
        -moz-animation-fill-mode: both;

        -webkit-animation-name: menu-animation-btn-last;
        -webkit-animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;

        animation-name: menu-animation-btn-last;
        animation-duration: 0.5s;
        animation-fill-mode: both;
    }
    @-moz-keyframes menu-animation-btn-last {
        from
        {
            -moz-transform: rotate(-45deg);
        }
        to
        {
            -moz-transform: rotate(0deg);
        }
    }
    @-webkit-keyframes menu-animation-btn-last {
        from
        {
            -webkit-transform: rotate(-45deg);
        }
        to
        {
            -webkit-transform: rotate(0deg);
        }
    }
    @keyframes menu-animation-btn-last {
        from
        {
            transform: rotate(-45deg);
        }
        to
        {
            transform: rotate(0deg);
        }
    }

    /* 導航欄項目及下拉列表 */
    .header-li-position
    { 
        flex-direction: column;
        padding: 0;
    }
    .header-li-ul-title-position
    {
        width: 100%;
        justify-content: center;
        display: flex;
    }
    .header-li-ul
    {
        display: block;
        background: #ffffff00;
        position: initial;
        border: 0;
        border-top: 1px solid #dfdfdf;
        margin-top: 10px;
    }
    .header-li-ul li
    {
        border: 0;
        font-weight: bold;
    }
    .header-li-ul li:nth-child(1), .header-li-ul li:nth-last-child(1)
    {
        border-radius: 0;
    }

    /* 導航欄下拉列表 - 語系 */
    .header-lang li:active,
    .header-lang .act,
    .header-lang .act:hover
    {
        font-weight: bold;
    }

    /* 頁尾 */
    .footer
    {
        height: 60px;
    }
    /* 頁尾文字 */
    .footer-text-position
    {
        flex-direction: column;
    }
    .footer-text
    {
        position: unset;
    }
    .footer-text:nth-child(1)
    {
        left: 0;
        justify-content: center;
    }

    /* 各頁面標題 */
    .main-title-bg-flex
    {
        position: relative;
        height: 140px;
        width: 100%;
        overflow: hidden;
    }
    .main-title-img
    {
        display: block;
        width: calc(2* 100vw);
        position: absolute;
        height: 140px;
        left: 0;
        top: 0;
    }
    .main-title-bg
    {
        width: 100vw;
        float: left;
    }

    /* 首頁 */
    .index-tag-block,
    .inx-tag-content
    {
        display: none;
    }

    /* 技術和產品左欄列表 */
    #technology_list,
    #product_list
    {
        display: none;
    }

    /* 關於 */
    .about-img-row
    {
        margin: 50px auto 10px;
        flex-direction: column;
    }
    .about-img-div-column
    {
        width: 100%;
        margin-bottom: 10px;
    }

    /* 技術 */
    .technology-column
    {
        padding: 0;
    }
    .technology-width
    {
        width: 80%;
    }

    /* 技術 -  */
    .technology-road-ul
    {
        padding-left: 1em;
        box-sizing: border-box;
    }

    /*電池區塊*/
    .battery-block
    {
        margin-right: 0;
    }

    /* 產品 */
    .product-content
    {
        padding-bottom: 90px;
    }
    .product-width
    {
        width: 80%;
    }
    .product-column:nth-child(2)
    {
        padding-right: 0;
    }
    .product-red-text
    {

        text-align: center;
        margin: 30px 0 28px 0;
    }

    .product-li-img
    {
        height: 85px;
        width: 115px;
    }
    .product-li-img2
    {
        width: 180px;
    }
    
    .product-li-img2-mobile
    {
        display: flex;
    }
    .product-li-img2-pc
    {
        display: none;
    }

    .product-column-ssbb
    {
        padding: 30px 0;
    }
    .product-part2-ssbb
    {
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 20px;
    }
    .product-part2-text-ssbb
    {
        padding-right: 0;
    }
    .product-part2-img-ssbb
    {
        margin-top: 20px;
        justify-content: center;
    }
}

/* --> 當裝置寬小於 530 時顯示 */
@media screen and (max-width: 530px) {
    /* 電池區塊 */
    .battery-center .arrow-text
    {
        max-width: calc(100% - 30px);
    }
    .line-left
    {
        right: 20px;
    }
    .line-right
    {
        left: 20px;
    }
}

/* --> 當裝置寬小於 510 時顯示 */
@media screen and (max-width: 510px) {
    /* 首頁 */
    .mobile-tag-size
    {
        height: 100px;
    }
    .mobile-inx-content
    {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }

    /* 關於 */
    .about-content
    {
        padding: 0 25px 60px;
    }
    .about-p
    {
        width: 100%;
    }
    .about-img-row
    {
        margin: 30px auto 10px;
    }
    .about-img-div-column
    {
        flex-direction: column;
        margin-bottom: 0;
    }
    .about-img-div
    {
        margin-bottom: 10px;
    }

    /* 服務 */
    .service-content
    {
        padding: 20px 25px 50px;
    }
    .service-ul
    {
        width: 100%;
    }

    /* 技術 */
    .technology-content
    {
        padding: 0 25px 60px;
    }
    .technology-width
    {
        width: 100%;
    }

    /* 產品 */
    .product-content
    {
        padding: 0 25px 80px;
    }
    .product-width
    {
        width: 100%;
    }

    .product-li
    {
        flex-direction: column;
    }
    .product-li.product-li-img2-mobile
    {
        flex-direction: row;
    }
    .product-li-text
    {
        padding: 0;
        margin-bottom: 15px;
    }
    .product-li-img
    {
        height: 125px;
        width: 180px;
        margin: auto;
    }
    .product-li-flex3
    {
        padding-right: 10px
    }

    .product-part3-ssbb
    {
        width: auto;
    }

    .product-part2-sspe
    {
        flex-direction: column;
    }
    .product-part2-text
    {
        padding: 0;
    }
    .product-part2-imgtext-pos-sspe
    {
        margin-top: 20px;
    }

    /* 電池區塊 */
    .battery-block
    {
        width: calc(100vw - 10px);
    }
    .battery-center div
    {
        font-size: 15px;
    }
    .battery-text
    {
        font-size: 14px;
    }
    .battery-center .arrow-text
    {
        max-width: calc(100% - 10px);
    }
    .line-level
    {
        width: 15px;
    }
    .line-left
    {
        right: 10px;
    }
    .line-right
    {
        left: 10px;
    }
}

/* --> 當裝置寬小於 450 時顯示 */
@media screen and (max-width: 450px) {
    /* 首頁 */
    .mobile-tag-size
    {
        height: 70px;
    }
    .mobile-tag-materials-block, 
    .mobile-tag-cells-block, 
    .mobile-tag-battery-modules-block, 
    .mobile-tag-application-block
    {
        font-size: 14px;
    }
    .mobile-tag-materials-indigo-text-box,
    .mobile-tag-battery-modules-indigo-text-box
    {
        padding: 0 2.5px 0 0;
    }
    .mobile-tag-materials-red-text-box, 
    .mobile-tag-cells-red-text-box
    {
        padding: 0 0 0 5px;
    }
}

/* --> 當裝置寬小於 400 時顯示 */
@media screen and (max-width: 400px) {
    /* 頁首 */
    #header,
    .header
    {
        height: 60px;
    }
    /* 頁首 logo */
    .header-log-menu-btn-position
    {
        padding: 0 5px 0 0;
    }
    .header-logo
    {
        padding-right: 5px;
    }
    .img-logo
    {
        justify-content: center;
        align-items: center;
        margin: auto;
    }

    /* 導航欄區塊 */
    .header-nav
    {
        top: 61px;
    }

    /* 選單按鈕圖示 */
    .header-li-menu-btn-position
    {
        /* position: relative; */
        right: 10px;
        top: 0;
        align-items: center;
        height: 100%;
        margin: auto 0 auto auto;
    }

    /* 分隔線 */
    .line
    {
        margin-top: 0;
    }

    /* 每頁標題和內容 */
    #main
    {
        margin-top: 65px;
    }
    .main-title-text-pos,
    .main-title-text
    {
        font-size: 40px;
    }

    /* 頁尾 */
    .footer-text
    {
        font-size: 16px;
    }

    /* 產品 */
    .product-li-flex3
    {
        padding: 0;
    }
    .product-li.product-li-flex3 .product-li-text-img
    {
        display: flex;
    }
    .product-ul .product-li-img1-mobile
    {
        display: none;
    }
}