/* LESS Document */

/*--網頁顏色載入--*/
@import (less) "colorSet.less?v=3";



/*--基本設定--*/
* {
    color: @webTxtColor;
}
*, body, h1, h2, h3, h4, h5, h6, a, p, select  {
	font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Arial, Helvetica;
}


/*文字反選顏色*/
::selection, ::-moz-selection {
	background: @SelectColor;
	color: #ffffff;
}

/*a:focus {
	background-color: #F7AD00 !important;
}*/

a {
	transition: .5s;
}

/*a:hover {
	filter:brightness(110%);
	transition: .5s;
}*/

/*a:focus img {
	-webkit-filter:saturate(0.2);
}*/


/*--行動版隱藏--*/
.mob {
	display: none !important;
}


html {
	height: 100%;
	margin: 0;
}

body {
	margin: 0;
	min-height: 100%;
    background: @webBgColor;
}

/*清除格式*/
.CleanFormat { 
	clear: both;
}

#article, section, header, .pageContent {
    &::after {
        content: "";
        display: block;
        clear: both;
    }
}

/*分隔線*/
.Dividers {
	margin: 10px auto;
	width: 100%;
	height: 1px;
	border-bottom: 1px dotted #373b80;
}

/*------------------------WebStart----------------------*/
#wrap {
	display: block;
	position: relative;
}


/*-------------------------Header 頁首 //放選單按鈕的地方-----------------------*/
header {
    display: block;
    position: relative;
    background: @headerBg;
    box-shadow: 0 0px 5px 0px #3D4B5B;
    padding: 10px 0;
    z-index: 10;
}

#header {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 95%;
    max-width: 1200px;
    font-size: 0;
}

.Logo {
    display: inline-block;
    vertical-align: middle;
    width: 150px;
    height: auto;
    img {
        display: block;
        width: 100%;
        height: auto;
    }
}

/*---------------------------Menu-----------------------*/
nav.MenuBk {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 160px);
    margin-left: 10px;
    text-align: right;
    font-size: 0;
    position: relative;
    transition: .5s;
}


#Menu {
    display: block;
    margin-top: 10px;
}

#community {
    display: inline-block;
    margin-right: 20px;
}

#Menu, #community {
    ul {
        display: block;
        font-size: 0;
    }
    li {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
    li:last-child {
        margin-right: 0;
    }

}

#Menu a {
    display: block;
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding: 5px 10px;
    color: @btnBk;
    border-radius: 3rem;
    :hover {
        font-weight: bold;
    }
}

#Menu li.active a {
    background: @btnBk;
    color: @btnTxt;
    font-weight: bold;
}

#community a {
    display: block;
}

.WebSearch {
    display: inline-block;
    width: 35px;
    vertical-align: middle;
}

#community svg, .WebSearch svg {
    width: 30px;
    display: block;
}
    
.icon-fbbg {
    fill:@icon_fbbg;
}
.icon-igbg {
    fill:@icon_igbg;
}
.icon-twbg {
    fill:@icon_twbg;
}
.icon-linebg {
    fill:@icon_linebg;
}
.icon-ytbg {
    fill:@icon_ytbg;
}
.iconColor {
    fill: @iconColor;
}

.icon-Linkbg {
    fill:@icon_Linkbg;
}

.icon-search path {
    fill: @icon_search;
}

.icon-download {
    fill: @icon_download;
}

.icon-shop {
    fill: @icon_shop;
}


/*--語言選擇--*/
/*--增加語言選擇--*/
.Lan {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    margin-left: 20px;
    .LanIcon {
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        margin-right: 5px;
        svg {
            display: block;
            width: 100%;
            height: auto;
            fill : @Color1;
        }
    }
    
    ul.LanList {
        list-style: none;
        display: inline-block;
        vertical-align: middle;
        a {
            font-size: 1rem;
            color: #777;
        }
    }
}




/*-------手機版選單---------*/
.MobileMenu {
    display: none;
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 1;
    a {
        display: block;
        width: 40px;
        height: 40px;
        transition: .5s;

        span {
            display: block;
            background: @Color1;
            height: 3px;
            border-radius: 3px;
            position: absolute;
            right: 0;
            transition: .5s;
            &:first-child {
                width: 33%;
                margin-bottom: 8px;
                top: 0;
            }
            &:nth-child(2) {
                width: 66%;
                margin-bottom: 8px;
                top: 10px;
            }
            &:nth-child(3) {
                top: 20px;
                width: 100%;
            }
        }

        p {
            position: absolute;
            bottom: 0;
            font-size: 0.7rem;
            letter-spacing: 1.2px;
            font-weight: bold;
            line-height: 0.7rem;
            color: @Color1;
            transition: .5s;
            width: 100%;
            text-align: center;
        }
    }
}

.MobileMenu.active {
    a {
        span:first-child {
            width: 100%;
            top: 30%;
            transform: rotate(45deg);
        }
        span:nth-child(2) {
            opacity: 0;
            right: 22%;
        }
        span:nth-child(3) {
            top: 30%;
            transform: rotate(-45deg);
        }
        p {
            letter-spacing: 0.9px;
        }    
    } 
} 



/*----------搜尋框----------*/
#SearchToolBk {
    display: none;
    width: 280px;
    padding: 10px 15px;
    box-shadow: 0 0 5px 0 #272727;
    position: absolute;
    top: 100px;
    right: 0;
    border-radius: 10px;
    background: @headerBg;
    z-index: 50;
    
    /*搜尋表單*/
    .SearchTool {
        font-size: 0;
        input {
            display: inline-block;
            vertical-align: middle;
            border: none;
            &[type="search"] {
                border-bottom: 1px solid;
                padding: 5px;
                font-size: 1rem;
                width: calc(100% - 60px);
                margin-right: 5px;
                background: @headerBg;
                color: @Color1;
                border-radius: 0;
            }
            &[type="button"] {
                color: @btnTxt;
                background: @btnBk;
                height: 30px;
                font-size: 1rem;
                width: 55px;
                border-radius: 5px;
            }
        }

    }
}



/*-------------------------BODY 區塊-------------------------*/
article {
	position: relative;
    padding: 20px 0 50px;
}
section {
    position: relative;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
/*-------------------------FOOTER 頁尾-----------------------*/
footer {
    background: @footerBg;
    color: @footerTxt;
    padding: 30px 0 10px;
    
    #footer {
        display: block;
        width: 95%;
        max-width: 1200px;
        margin: 0 auto 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid @footerBorder;
        font-size: 0;
    }
    
    .copyright {
        display: block;
        text-align: center;
        padding: 0 10px;
        color: @footerTxt;
    }
}


.FootCoInfo {
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    width: calc(100% - 120px);
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px dotted @footerBorder;
    
    /*LOGO*/
    .FootLogo {
        display: inline-block;
        vertical-align: middle;
        width: 150px;
        margin-right: 10px;
        padding-right: 10px;
        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }
    
    /*資訊*/
    .FootCoContent {
        display: inline-block;
        vertical-align: middle;
        
        
        
        .FootWebSiteName {
            font-size: 1.8rem;
            font-weight: bold;
            margin-bottom: 5px;
            color: @footerTxt;
        }
        
        ul li {
            display: block;
            font-size: 0;
            margin-bottom: 10px;
            
            &:last-child {
                margin-bottom: 0;
            }
            
            .FootIcon {
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
                text-align: center;
                width: 20px;
                height: 20px;
                svg {
                    path {
                        fill: @footerIcon;
                    }
                    rect {
                        fill: @footerIcon;
                    }
                } 
            }

            .FootTxt {
                font-size: 1rem;
                display: inline-block;
                vertical-align: middle;
                letter-spacing: 1px;
                color: @footerTxt;
                a {
                    font-size: inherit;
                    color: @footerTxt;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
        
    }
}

.FootMenu {
    display: inline-block;
    vertical-align: middle;
    width: 99px;
    text-align: center;
    
    li {
        margin-bottom: 5px;
        &:last-child {
            margin-bottom: 0;
        }
        a {
            color: @footerTxt;
            font-size: 1rem;
        }
    } 
}



/*--------------------------共用項目-------------------------------*/
/*區塊標題*/
.Bktitle {
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    padding-bottom: 10px;
    color: @Color1;
    border-bottom: 2px solid @Color1;
}

/*-----置頂按鈕-----*/
.MoreBtn {
    padding: 20px 0 10px;
    text-align: center;
    a {
        display: inline-block;
        padding: 5px 20px;
        font-size: 1.2rem;
        background: @btnBk;
        color: @btnTxt;
        border-radius: 50px;
        &hover {
            filter: brightness(1.5);
        }
    }

}


/*-----麵包屑-----*/

.BreadcrumbIcon {
    display: inline-block;
    vertical-align: middle;
    svg {
        display: inline-block;
        width: 20px;
        vertical-align: middle;
    }
    span {
        display: inline-block;
        font-size: 1rem;
        font-weight: bold;
        color: @Color2;
        vertical-align: middle;
    }
}

.BreadIconColor {
    fill:@Color1;
} 

nav#Breadcrumb {
    display: block;
    margin: 0 auto;
    width: 95%;
    max-width: 1200px;
    padding: 5px 0;
    ol {
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        li {
            display: inline-block;
            vertical-align: middle;
            &::after {
                content: "\\";
                margin: 0 5px;
                font-size: 1rem;
                color: @Color2;
            }
            &:last-child::after {
                display: none;
            }
            a {
                font-size: 1rem;
                color: @Color2;
                text-decoration: underline;
            }
            &.current {
                font-size: 1.2rem;
                font-weight: bold;
                color: @Color1;
            }
        }
    }
}


/*-----頁面標題-----*/
#About, #contact {
     h1 {
        font-size: 2.5rem;
        text-align: center;
        color: @Color1;
        margin-bottom: 30px;
        &:after {
            content: "";
            display: block;
            width: 60px;
            height: 5px;
            margin: 0 auto;
            background: @Color1;
        }
    }
}


/*-----頁碼控制-----*/
.arrowColor {
    fill:@Color1;
}
.PageCtrl {
    display: block;
    text-align: center;
    ol {
        display: block;
        font-size: 0;
        li {
            display: inline-block;
            vertical-align: middle;
            margin-right: 15px;
            &:last-child {
                margin-right: 0;
            }
            a {
                display: block;
                font-size: 1.2rem;
                color: @Color1;
                svg {
                    display: block;
                    height: 1rem;
                }
            }
            &.active a {
                width: 2.5rem;
                height: 2.5rem;
                background: @btnBk;
                color: @btnTxt;
                font-size: 1.5rem;
                line-height: 2.5rem;
                border-radius: 3rem;
            }
        }
    }
}


/*-----分享按鈕-----*/
.NewsShare {
    padding-top: 30px;
}

.ShareTxt {
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
    color: @Color1;
    &::after {
        content: "";
        display: block;
        margin: 0 auto;
        width: 30px;
        height: 5px;
        background: @Color1;
    }
}


.ShareList {
    ul {
        display: block;
        font-size: 0;
        text-align: center;
        li {
            display: inline-block;
            width: 50px;
            height: auto;
            vertical-align: middle;
            margin-right: 20px;
            &:last-child {
                margin-right: 0;
            }
            a {
                display: block;
                width: 100%;
                border-radius: 50px;
                &:hover {
                    filter: brightness(1.1);
                }
            }
        }
    }
}


.copyComplete {
    display: block;
    position: fixed;
    padding: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 5px 0px #333;
    bottom: -100vh;
    border-radius: 10px 10px 0 0;
    font-size: 1.5rem;
    transition: .5s;
    &.active {
      bottom: 0;  
    }
}




/*-----內容編輯器項目-----*/
.pageContent{
    font-size: 0;
    ul li {
        list-style: disc;
        margin-left: 2rem;
    }
    ol li {
        list-style: decimal;
        margin-left: 2rem
    }
    p {
        font-size: 1.2rem;
    }
    a {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        text-decoration: inherit;
    }
    img {
        width: auto;
        height: auto;
        max-width: 100%;
    }
    span {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        text-decoration: inherit;
    }
    strong {
        color: inherit;
        font-size: inherit;
        font-weight: bold;
        font-style: inherit;
        text-decoration: inherit;
    }
    u {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        text-decoration: underline;
    }
    
    em {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: italic;
        text-decoration: inherit;
    }
} 

/*--後台--*/
.fr-view {
    ul li {
        list-style: disc;
        margin-left: 2rem;
    }
    ol li {
        list-style: decimal;
        margin-left: 2rem
    }
    p {
        font-size: 1.2rem;
    }
    a {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        text-decoration: inherit;
    }
    span {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        text-decoration: inherit;
    }
    strong {
        color: inherit;
        font-size: inherit;
        font-weight: bold;
        font-style: inherit;
        text-decoration: inherit;
    }
    u {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: inherit;
        text-decoration: underline;
    }
    em {
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        font-style: italic;
        text-decoration: inherit;
    }
}

/*--------------------------內容開始-------------------------------*/
/*----------首頁----------*/
#indexBanner {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 0;
    
    .BannerW, .BannerM {
        background-size: cover !important;
        background-position: center !important;
    }
    
    .BannerW {
        display: block;
        width: 100%;
        padding-top: 49.5%;
    }

    .BannerM {
        display: none !important;
        width: 100%;
        padding-top: 100%;
    }

}



.IndexNewsBk {
    display: block;
    position: relative;
    font-size: 0;
    margin-bottom: 50px;
    
    > div {
        display: inline-block;
        vertical-align: middle;
    }
    
    /*左側消息*/
    .indexNews {
        width: calc(100% - 450px);
        margin-right: 50px;

        .articleList li {
            border-bottom: 1px dashed @Color1;
            &:last-child {
                border-bottom: 2px solid @Color1;
            }
            a {
                font-size: 0;
                display: block;
                padding: 10px;
                &:hover {background: #eeeeee;}
            }
        }
    }
    
    /*右側圖片*/
    .IndexNewsAD {
        width: 400px;
        a {
            display: block;
            width: 100%;
            padding-top: 100%;
            background-size: cover !important;
            background-position: center !important;
        }
    }
}


.articleType {
    display: inline-block;
    vertical-align: middle;
    background: @btnBk;
    color: @btnTxt;
    padding: 2px 3px;
    font-weight: bold;
    font-size: 1rem;
    width: 100px;
    border-radius: 50px;
    text-align: center;
    margin-right: 5px;
}

.articleTitle {
    display: inline-block;
    vertical-align: middle;
    color: @Color2;
    font-size: 1.2rem;
    width: auto;
    max-width: calc(100% - 111px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.IndexAD {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin-bottom: 50px;
    a {
        display: block;
        width: 100%;
        padding-top: 33.334%;
        background-position: center !important;
        background-size: cover !important;
    }
}






.IndexProductsList {
    padding: 20px 0;
    ul {
        display: block;
        font-size: 0;
        li {
            display: inline-block;
            vertical-align: top;
            width: 24%;
            margin-right: calc(4% / 3);
            text-align: center;
            &:last-child {
                margin-right: 0;
            }
        }
    }
}






/*----------產品列表----------*/
a .ProductsImg {
    display: block;
    width: 100%;
    padding-top: 100%;
    background-size: auto 100% !important;
    background-position: center !important;
    margin-bottom: 5px;
    filter: brightness(1);
    transition: .5s;
}

a:hover .ProductsImg {
    background-size: auto 105% !important;
    filter: brightness(1.03);
}


.ProductsType {
    font-size: 1rem;
    font-weight: bold;
    display: block;
    /*max-width: calc(100% - 20px);*/
    color: @Color1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ProductsName {
    font-size: 1.2rem;
    font-weight: bold;
    color: @Color2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}



#porductsList section {
    display: block;
    position: relative;
    font-size: 0;
}

.ProductsTypeList {
    display: inline-block;
    vertical-align: top;
    position: sticky;
    top: 20px;
    height: auto;
    max-height: calc(100vh - 40px);
    margin-right: 18px;
    ul {
        display: block;
        border: 1px solid @Color1;
        padding: 10px;
    }
    li {
        display: block;
        border-bottom: 1px solid @Color1;
        @media (min-width: 861px) {
            &:last-child {
                border-bottom: none;
            }
        }
        a {
            display: block;
            padding: 5px;
            width: 200px;
            font-size: 1.2rem;
            color: @Color1;
            transition: .5s;
            &:hover {
                background: #eee;
                font-weight: bold;
            }

        }
        &.active a {
            background: @btnBk;
            color: @btnTxt;
            font-weight: bold;
        }
    }
    #TypeListOpenBtn {display: none;}
}



.ProductsListBk {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 250px);
    position: relative;
    
    .ProductsAD {
        display: block;
        margin-bottom: 50px;
        .ProductsADList {
            a {
                display: block;
            }
            div {
                width: 100%;
                background-position: center !important;
                background-size: cover !important;
            }
            .BannerW {
                display: block;
                padding-top: 36.843%;
            }
            .BannerM {
                display: none;
                padding-top: 100%;
            }
        }
    }
    
    .ProductsList {
        display: block;
        width: 100%;
        ul {
            display: block;
            font-size: 0;
            margin-bottom: 20px;
            li {
                display: inline-block;
                width: 30%;
                vertical-align: top;
                margin-right: 5%;
                margin-bottom: 30px;
                @media (min-width: 681px) {
                    &:nth-child(3n) {
                        margin-right: 0;
                    }
                }
                a {
                    text-align: center;
                }

            }
            
        }

    }
}



/*----------產品頁----------*/
.ProductsHead {
    display: block;
    position: relative;
    font-size: 0;
    margin-bottom: 30px;
    .ProductsImg {
        display: inline-block;
        width: 50%;
        margin-right: 5%;
        vertical-align: top;
    }
}

.ProductsHeadTxt {
    font-size: 1.3rem;
    font-weight: bold;
    color: @Color1;
    border-left: 5px solid @Color1;
    padding-left: 5px;
    line-height: 1.5rem;
}

.ProductsImg {
    li div {
        display: block;
        width: 100%;
        padding-top: 100%;
        background-size: cover !important;
        background-position: center !important;
    }
    .ProductsLImg {
        margin-bottom: 20px; 
        li {
            div {
                cursor: e-resize;
            }
        }
        .slick-next {
            right: 10px;
        }
        .slick-prev {
            left: 10px;
            z-index: 10;
        }
    }
    .ProductsSImg{
        li {
            margin: 0 5px;
            div {
                cursor: pointer;
            }
        }
        .slick-next {
            right: 10px;
        }
        .slick-prev {
            left: 10px;
            z-index: 10;
        }

    } 
}


.ProductsInfo {
    display: inline-block;
    width: 45%;
    vertical-align: top;
    .productsType {
        font-size: 1.5rem;
        color: @Color2;
        font-weight: bold;
    }
    h1 {
        font-size: 3rem;
        color: @Color1;
        margin-bottom: 10px;
        line-height: 3.3rem;
    }
    
    .ProductsInfoTxt{
        margin-bottom: 10px;
        color: @Color2;
        font-size: 1.2rem;
        p, div, span, b, i {
            color: inherit;
            font-size: inherit;
        }
    }

}


.ProductsShare {
    display: block;
    font-size: 0;
    margin-bottom: 10px;
    
    .ProductsHeadTxt {
        display: inline-block;
        vertical-align: middle;
        &::after {
            content: ":";
            display: inline-block;
            margin: 0 10px 0 5px;
            font-size: 1.3rem;
            line-height: 1.5rem;
        }
    }
    > ul {
        display: inline-block;
        vertical-align: middle;
        font-size: 0;
        li {
            display: inline-block;
            width: 30px;
            vertical-align: middle;
            margin-right: 10px;
            &:last-child {
                margin-right: 0;
            }
            .ProductsShareBtn svg {
                display: block;
            }

        }
    }
}


.ProductsDowload {
    margin-bottom: 20px;
    .ProductsHeadTxt {
        margin-bottom: 5px;
    }
    
    li {
        display: block;
        margin-bottom: 5px;
        padding-left: 15px;
        a:hover {
            filter: brightness(2);
        }
        svg {
            display: inline-block;
            vertical-align: middle;
            width: 20px;
        }
        div {
            display: inline-block;
            vertical-align: middle;
            font-size: 1.2rem;
            color: @Color1;
            text-decoration: underline;
        }
    }

} 


.ProductsShop {
    .ProductsHeadTxt {
        margin-bottom: 5px;
    }
    ul {
        display: block;
        font-size: 0;
        padding-left: 15px;
        li {
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 20px;
            height: 30px;
            vertical-align: middle;
            a:hover {
                display: block;
                filter: brightness(1.5);
                height: 100%;
            }
            img {
                display: block;
                width: auto;
                height: 100%;
            }
            svg {
                height: 100%;
            }
        }

    }

}




#ProductsContentMenu {
    display: block;
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid @btnBk;
    z-index: 10;
    ul {
        font-size: 0;
        text-align: center;
        li {
            display: inline-block;
            vertical-align: bottom;
            a {
                display: block;
                padding: 5px 10px;
                border: 1px solid @btnBk;
                border-right: none;
                border-bottom: none;
                font-size: 1.4rem;
                font-weight: bold;
                color: @btnBk;
            }
            &:first-child a {
                border-radius: 10px 0 0 0;
            }
            &:last-child a {
                border-right: 1px solid @btnBk;
                border-radius: 0 10px 0 0;
            }
            &.active a {
                color: @btnTxt;
                background: @btnBk;
            }
        }
    }
}


#ProductsContent > .pageContent {
    display: none;
    padding-top: 10px;
}



/*----------關於我們----------*/
.aboutMenu {
    text-align: center;
    margin-bottom: 30px;
    ul {
        display: block;
        font-size: 0;
        li {
            display: inline-block;
            &::after {
                content: "|";
                display: inline-block;
                vertical-align: middle;
                margin: 0 5px;
            }
            &:last-child::after {
                display: none;
            }
            a {
                display: inline-block;
                vertical-align: middle;
                font-size: 1.2rem;
                padding: 2px 10px;
                color: @btnBk;
            }
            &.active a {
                background: @btnBk;
                border-radius: 5px;
                color: @btnTxt;
                font-weight: bold;
            }
        }
    }
}




/*----------最新消息----------*/
.NewsList {
    display: block;
    ul {
        display: block;
        font-size: 0;
        li {
            display: inline-block;
            width: 32%;
            vertical-align: top;
            margin-right: 2%;
            margin-bottom: 50px;
            
            @media (min-width: 681px) {
                &:nth-child(3n) {
                    margin-right: 0;
                }
            }
            a .NewsImg {
                display: block;
                width: 100%;
                padding-top: 52.53%;
                background-size: auto 100% !important;
                background-position: center !important;
                transition: .5s;
                background-repeat: no-repeat !important;
            }
            
            a:hover .NewsImg {
                background-size: auto 105% !important;
                filter: brightness(1.03);
            }
        }
    }

}

.NewsInfo {
    padding: 5px;
    text-align: center;
    
    .NewsDate {
        font-size: .9rem;
        color: @Color3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .NewsType {
        font-size: 1rem;
        font-weight: bold;
        color: @Color1;
    }

    .NewsTitle {
        font-size: 1.2rem;
        color: @Color2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

}




/*-----內容頁-----*/
.NewsHead {
    text-align: center;
    margin-bottom: 10px;
    .NewsType {
        font-size: 1.5rem;
        padding: 0px 10px;
        border: 1px solid @Color1;
        margin: 0 auto;
        display: inline-block;
        color: @Color1;
    }
    h1 {
        font-size: 2rem;
        color: @Color1;
        display: block;
    }
    .NewsDate {
        color: @Color3;
    }
}

.BackLink {
    border-top: 2px solid #000;
    margin-top: 10px;
    padding-top: 10px;
    text-align: center;
    a {
        display: inline-block;
        padding: 5px 20px;
        font-size: 1.2rem;
        background: @btnBk;
        color: @btnTxt;
        border-radius: 50px;
    }
}


/*----------聯絡我們----------*/
.contactForm {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    li {
        margin-bottom: 20px;
        input[type="text"], input[type="tel"], input[type="email"] {
            border: none;
            border-bottom: none;
            width: 100%;
            font-size: 1.3rem;
            text-align: center;
            color: @Color1;
            background: #eee;
            padding: 5px 0;
            border-radius: 10px;
        }
        textarea {
            padding: 5px;
            width: calc(100% - 12px);
            border: none;
            height: 5rem;
            background: #eee;
            border-radius: 10px;
        }
    }
}

.ginder {
    display: block;
    font-size: 0;
    text-align: center;
    label {
        display: inline-block;
        border: 1px solid @btnBk;
        color: @Color1;
        font-size: 1.2rem;
        padding: 5px 10px;
        border-radius: 50px;
        text-align: center;
        position: relative;
        font-weight: bold;
        margin-right: 30px;
        cursor: pointer;
        input[type="radio"] {
            width: 1;
            height: 1;
            opacity: 0;
            position: absolute;
        }
        &:last-child {
            margin-right: 0;
        }
        &.active {
            background: @btnBk;
            color: @btnTxt;
        }
    }
    
}

.vCode{
    font-size: 0;
    input {
        width: calc(100% - 110px) !important;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
    }
    a {
        display: inline-block;
        vertical-align: middle;
        img {
            display: block;
            width: 100px;
            height: auto;
        }
    }
} 



.SendBtn input {
    cursor: pointer;
    display: block;
    width: 150px;
    color: @btnTxt;
    background: @btnBk;
    font-size: 1.5rem;
    border: none;
    border-radius: 50px;
    padding: 5px 0;
    font-weight: bold;
    letter-spacing: 5px;
    padding-left: 5px;
    margin: 0 auto;
    &:hover {
        filter: brightness(1.5);
    }

}

.privacy {
    text-align: center;
    display: block;
    margin-bottom: 10px;
    label {
        font-size: 1.2rem;
        
        a {
            font-size: inherit;
            color: @Color1;
            font-weight: bold;
            text-decoration: underline;
        }
    }
}

    
.GoogleMap {
    width: 100%;
    display: block;
    iframe {
        width: 100%;
        height: 350px;
        display: block;
    }
}


#privacy {
    > h2 {
        color: @Color1;
        font-size: 2rem;
        text-align: center;
        font-weight: bold;
        margin-bottom: 20px;
    }
    h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    p {
        margin-bottom: 10px;
    }
}

.contactTxt {
    margin-bottom: 30px;
}


/*----------全站搜尋----------*/
.SearchResultHead {
    margin-bottom: 50px;
        .SearchWhat {
        font-size: 2rem;
        font-weight: bold;
        color: red;
        text-align: center;
        &::before, &::after {
            content: "\"";
            display: inline;
        }
    }


    .SearchResultTxt {
        text-align: center;
        font-size: 1.2rem;
            span {
            font-size: inherit;
            color: red;
            font-weight: bold;
            display: inline-block;
            margin: 0 10px;
        }
    }
}


.searchResultTitle {
    font-size: 1.5rem;
    font-weight: bold;
    color: @Color1;
    border-bottom: 1px solid  @Color1;
    span {
        color: red;
        font-size: inherit;
        font-weight: inherit;
    }
}

.searchResultPlace {
    color: @Color3;
    font-size: 1rem;
}

.searchResultInfo {
    font-size: 1.2rem;
    color: @Color2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.SearchList {
    margin-bottom: 50px;
    > ul > li {
        margin-bottom: 30px;
    }
    > ul > li:last-child {
        margin-bottom: 0;
    }

}


/*---------------------------自適應內容----------------------------*/
/*--高--*/
@media only screen and (max-height: 820px) {

}
@media only screen and (max-height: 600px) {

}

/*--寬--*/
@media only screen and (max-width: 1650px) {

}

@media only screen and (max-width: 1300px) {

}

@media only screen and (max-width: 1235px) {

}

@media only screen and (max-width: 1100px) {

}

@media only screen and (max-width: 1050px) {

}

@media only screen and (max-width: 980px) {
.IndexNewsBk {
     > div {
        display: block;
    }
    .indexNews {
        margin: 0 0 30px 0;
        width: 100%;
    }
    .IndexNewsAD {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}

}

@media only screen and (max-width: 900px) {

}

@media only screen and (max-width: 860px){
.ProductsTypeList {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
    background: #fff;
    z-index: 1;
    top: 0;
    padding: 10px 0;
    transition: .5s;
    ul {
        font-size: 0;
        transition: .5s;
        li {
            display: inline-block;
            width: 49%;
            margin-right: 2%;
            &:nth-child(even) {
                margin-right: 0;
            }
            a {
                width: calc(100% - 10px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }

}


.ProductsListBk {
    display: block;
    width: 100%;
}
    
    
#TypeListOpenBtn {
    padding: 5px 0;
    height: 15px;
    display: none;
    a, svg {
        display: block;
        height: 100%;
    }
    svg {
        margin: 0 auto;
        transition: .5s;
        fill:@Color1;
    }
}


.TypeMenuZip {
    ul {
        padding: 0 10px;
        height: 0;
        overflow: hidden;
    }
    #TypeListOpenBtn {
        display: block;
    }
}
    
.openZip {
    ul {
        height: auto;
        padding: 10px;
    }
    #TypeListOpenBtn svg {
        transform: rotate(180deg);
    }
}
    
}
	
@media only screen and (max-width: 800px){

.FootMenu {
    display: block;
    width: 100%;
    ul {
        font-size: 0;
        li {
            display: inline-block;
            margin: 0 5px;
        }
    }
}


.FootCoInfo {
    display: block;
    border-right: none;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 10px;
    border-bottom: 1px dotted #fff;
    padding-bottom: 10px;
    width: 100%;
    .FootLogo {
        display: block;
        margin: 0 auto 10px;
        padding-right: 0;
    }
    .FootCoContent {
        text-align: center;
        display: block;
    }
} 

    
    
}

@media only screen and (max-width: 700px){

}

@media only screen and (max-width: 680px){
/** {
    font-size: 12px;
} */   
    
.ProductsInfo h1, #About h1, #contact h1, .NewsHead h1 {
    font-size: 1.8rem;
    line-height: 2.5rem;
}
    
.FootCoInfo .FootCoContent .FootWebSiteName, .ShareTxt {
    font-size: 1.4rem;
}
.NewsHead .NewsType {
    font-size:  1.2rem;
}
.FootMenu li a {
    font-size: 0.9rem;
}  
    
    
    
    
    
    
    
    
#warp {
    padding-top: 63.33px;
}    
    
header {
    position: fixed;
    width: 100%;
    top: 0;
    padding: 5px 0;
    z-index: 50;
}

.Logo {
    width: 100px;
}
    
.MobileMenu {
    display: block;
    a p {
        font-size: 0.9rem;
    }
}
    

nav.MenuBk {
    display: block;
    position: fixed;
    top: 0;
    right: -100vw;
    width: calc(100% - 20px);
    height: calc(100% - 100px);
    background: #fff;
    margin: 0;
    z-index: 0;
    padding: 80px 10px 20px;
    text-align: center;
    &.active {
        right: 0;
    }
}
    

#community {
    display: block;
    margin-right: 0;
    margin-bottom: 30px;
}

.Lan {
    display: block;
    margin: 0 auto 20px;
}    
    
.WebSearch {
    display: none;
}

#Menu {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 50px;
    li {
        display: block;
        margin: 0 auto 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }

}

#SearchToolBk {
    display: block;
    position: relative;
    width: 100%;
    max-width: 300px;
    padding: 0;
    margin: 0 auto;
    top: 0;
    box-shadow: none;
}
    
    
    
    
    
    
#indexBanner {
    .BannerM {
        display: block !important;
    }
    .BannerW {
        display: none !important;
    }    
    
}

.articleType {
    display: block;
    margin: 0 auto 5px;
}

.articleTitle {
    display: block;
    max-width: none;
    text-align: center;
} 
    

.IndexProductsList {
    padding-bottom: 0;
    ul li {
        width: 49%;
        margin-bottom: 20px;
        &:nth-child(even) {
            margin-right: 0;
        }
    }
}
    
    
    
.NewsList ul li {
    width: 49%;
    &:nth-child(even) {
        margin-right: 0;
    }    

}

    

.ProductsTypeList {
    top: 63px;
}    
    
.ProductsListBk .ProductsList ul li {
    width: 49%;
    margin-right: 2%;
    &:nth-child(even) {
        margin-right: 0;
    }    
}
    
.ProductsListBk .ProductsAD {
    .BannerW {
        display: none !important;
    } 
    .BannerM {
        display: block !important;
    }
}
    
#ProductsContentMenu {
    top: 63.33px;
    ul li a {
        font-size: 1.1rem;
    }
}
    
    
.ProductsHead {
    .ProductsImg {
        display: block;
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
    }
    .ProductsInfo {
        display: block;
        width: 100%;
    }
}

.ProductsShop ul li {
    height: 20px;
}    
    

}


@media only screen and (max-width: 650px) {
	
}

@media only screen and (max-width: 600px) {

}

@media only screen and (max-width: 550px) {

}
	
@media only screen and (max-width: 500px) {

}

@media only screen and (max-width: 460px) {

}

@media only screen and (max-width: 420px) {

}

@media only screen and (max-width: 410px) {

}

@media only screen and (max-width: 370px) {

}