@charset "utf-8";



/** bootstrap **/

@import "bootstrap-4.2.1.css";



/** 文字icon **/

@import "font-awesome.min.css";



/** 手機選單 **/

@import url("slicknav.css") screen and (max-width:870px);



/** edm **/

@import "edm.css";



/** PhotoSwipe Repository **/

@import "../dist/photoswipe.css";

@import "../dist/default-skin/default-skin.css";



*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

html{width:100%; height:auto;}

body{background:#fff; margin:0; padding:0; width:100%; height:auto; font:16px/1.5 "Microsoft Yahei,Microsoft JhengHei";}

.clearfix:after{content:""; display:block; height:0; clear:both; visibility:hidden;}

* html .clearfix{height:1%;}

a,a:hover{text-decoration:none;}

img{border:0; vertical-align:middle; max-width:100%;}

input{vertical-align:middle;}

.slicknav_menu{display:none;}

input.select-box{margin-bottom:5px; padding:5px 3%; width:20px; height:20px; text-align:center; border:1px solid #cbcbcb;}

input:focus, select:focus, textarea:focus, button:focus{outline:0;}



/** 表單預設文字顏色設定 **/

::-webkit-input-placeholder{color:#999999;}

::-moz-placeholder{color:#999999;}

:-ms-input-placeholder{color:#999999;}

input:-moz-placeholder{color:#999999;}

#field2::-webkit-input-placeholder{color:#999999;}

#field3::-webkit-input-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}

#field4::-webkit-input-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}

#field2::-moz-placeholder{color:#999999;}

#field3::-moz-placeholder{color:#999999; background:lightgreen; text-transform:uppercase;}

#field4::-moz-placeholder{font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999999;}

.writing-mode-vertical{writing-mode:tb-lr; -ms-writing-mode:tb-lr; -webkit-writing-mode:vertical-lr; -moz-writing-mode:vertical-lr; -ms-writing-mode:vertical-lr; writing-mode:vertical-lr;}



/** 手機選單、選單 色塊-變色 **/

.b-color, .slicknav_menu{background:linear-gradient(#151515, #2e2e2e);}

.slicknav_icon-bar{background-color: #fff;}

.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{background:var(--fourth);}

.border-color{border-left:7px #A0A0A0 solid;}

/*** 顏色、文字設定 ***/
:root{
    --primary: #006699;
    --secondary: #6ea4e0;
    --third: #357dce;
    --fourth: #0099ff;
    --purple: #8b008b;
    --red: #ff0000;
    --brown: #CC3300;
    --fontSize: 16px;

}

/** 上版 **/

header{background: var(--third); border-bottom: 4px solid #86bffe;}

.head-main{background: url("../images/header_bg.jpg") no-repeat center center; max-width:1280px; margin:0 auto; height:120px; padding:0; position:relative; transition: 500ms;}

.head-main .logo{max-width: 133px; position:absolute; left:20px; top:15px; height:auto; transition: 500ms;}

.head-main .logo a{color:#000000; display: block;}

.head-main .logo img{width:100%; height:auto;}

.home{display:none;}



@media screen and (max-width:870px){
    .head-main{
        height: 80px;
    }
    .head-main .logo{
        top:28px;
    }
}
@media screen and (max-width:575px){
    .head-main{
        height: 60px;
    }
    .head-main .logo{
        top: 15px;
    }
}



/** 主選單與下拉 **/

.menu{max-width:1280px; padding:0 18px; list-style:none; margin:0 auto; display:flex; position: absolute;bottom: 20px;right: 15px; background: linear-gradient(#151515, #2e2e2e); border-radius: 20px;}

.menu>li{text-align:center; position:relative;cursor:pointer; padding:0; margin:0;}

.menu>li:after{
    content:"";
    position: absolute;
    left: 0;
    top: 0;
    margin: 14px 0;
    width: 1px;
    height: 15px;
    background:#fff;
}
.menu>li:first-child:after{
    display: none;
}

.menu>li>a{color:#fff; display:block; padding:8px 24px; margin:0;}

.menu>li>a:hover{ background:var(--fourth);}


.menu>li.sub>ul.sub-menu{background:rgba(0,0,0,0.5); display:none; position:static; z-index:999; margin:0; padding:0; border-radius:0 0 5px 5px; overflow:hidden;}

.menu>li.sub:hover ul.sub-menu{position:absolute; display:block; width:100%; left:0; top:47px;}

.menu>li.sub>ul.sub-menu>li{display:block; border-top:1px #fff dotted;}

.menu>li.sub>ul.sub-menu>li>a{display:block; color:#fff; padding:5px 10px; margin:0;}

.menu>li.sub>ul.sub-menu>li>a:hover{background:#000000;}



@media screen and (max-width:870px){
	#menu{display:none;}

	.slicknav_menu{
        display:block;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
        background: none;
        width: 100%;
        height: 0;
    }

}


/** edm輪播 **/

.edm{background:#ffffff; max-width:100%;/* EDM滿版 max-width:100%; */ margin:0 auto; position:relative;}

.edm img{vertical-align:middle; width:100%; height:auto; position:absolute;}


/** 左邊分類 **/
.in-left-menu{
    width: 20%;
    font-size: var(--fontSize);
    margin: 5px 0;
    padding: 0 5px
}

.left-menu-title{background:var(--primary); color: #fff; font-size: var(--fontSize); text-align:left;padding: 5px 10px; border-bottom: 2px solid var(--secondary); position: relative; overflow: hidden;}
.left-menu-title:after{
    content: "";
    position: absolute;
    left: 80px;
    bottom: 5px;
    height: 4px;
    width: 70%;
    background: var(--secondary);
}
.left-menu-title span{
    font-size: 6px;
    position: absolute;
    right: 5px;
    bottom: 10px;
}

.in-left-menu>ul{margin:0; padding:0; list-style:none;}

.in-left-menu>ul>li{padding:0; position: relative;}

.in-left-menu>ul>li:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: url("../images/left-menu.png") center center no-repeat;
}
.in-left-menu>ul>li.current{
    display: none;
    
}

.in-left-menu>ul>li>a{color:#000; display:block; padding:14px 36px;}

.in-left-menu>ul>li>a:hover{color: #FF3300; background: url("../images/left-menu-icon.png") 10px center no-repeat;}

.in-left-menu>ul>li>.current{}

.in-left-menu>ul>li:hover>ul{ display: block;}

.in-left-menu>ul>li ul{ display: none; position: absolute;top: 0;right: -168px; z-index: 999; background: #aaa;margin: 0; padding:0; list-style:none; font-size:var(--fontSize); overflow-y: scroll; height: 166px;border-bottom: 1px solid #fff;}

.in-left-menu>ul>li ul li{border:1px solid #fff; padding:0;margin: 0;}

.in-left-menu>ul>li ul li a{ color:#fff; display:block;padding: 5px 30px; background: var(--fourth);}

.in-left-menu>ul>li ul li a:hover{background: var(--primary);}

.left-beautify img{width:100%; height:auto; margin-top:0px;}

.m_classLink{display:none;}



@media screen and (max-width:767px){
	.classBox{padding:0 15px 20px; width: 100%; margin: 0 auto;}

	ul.classLink{display:none;}

	.m_classLink{display:block; position:relative; background-color:#eeeeee; border:1px solid #d1d1d1;}

	.m_classLink a.main{display:block; background:none; color:#333; position:relative; padding:8px;}

	.m_classLink a.main i{display:block;background:var(--primary); width:45px; height:100%; text-align:center; color:#FFF; line-height:40px; position:absolute; right:0; top:0;}

	.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #d1d1d1; position:absolute; left:0; top:100%; z-index:99;}

	.m_classLink ul li{margin:0; padding:0;}

	.m_classLink ul li a{display:block; padding:8px; border-top:1px solid #d1d1d1;color:#222;}


	.m_classLink ul li a:hover{background:var(--primary); color: #fff;}

	.m_classLink>ul>li ul{display:block; margin:0 10px 10px; padding:0;width:calc(100% - 20px); border: none; position:inherit; left:inherit; top:inherit; z-index:999;}

	.left-menu-title{display:none;}

	.left-beautify{display:none;}

}



/** 配置 **/

.warpper{background:#fff; max-width:1280px; margin:0 auto;}

.main{padding-top:10px; display: flex; flex-wrap: wrap;}
 
.main-box{width: 80%;padding: 0 10px;margin: 5px 0;}

@media screen and (max-width:767px){
    .main{
        flex-direction: column;
    }
    .main-box{
        width: 100%;
        /* padding: 24px 15px; */
    }
}

/** 首頁共通 **/
.i-title{background:url("../images/bar_bg.jpg") left center repeat-x; font-size: 18px; padding: 5px 20px; margin: 10px 0; color: #fff; position: relative; overflow: hidden;}
.i-title .i-en{
    color: var(--secondary);
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
}
.i-title .i-num{
    position: absolute;
    left: -55px;
    top: -8px;
    color: #fff;
    font-size: 45px;
    opacity: 0.3;
    padding: 5px 0;
}

/** 首頁-最新消息 **/
.i-news-box{
    display: flex;
    font-size: 18px;
    /* margin-bottom: 80px; */
    padding: 20px;
}
.i-news-img{
    max-width: 300px;
    margin-bottom: 20px;
}
.i-news-img img{
    border-radius: 10px;
    padding: 4px;
    border:2px solid var(--secondary);
    box-shadow: 1px 1px 5px 2px #aaa;
}
.i-news-text{
    padding: 1rem;
    flex: 1;
    font-weight: bold;
}
.i-news-box h4{
    font-size: 24px;
    font-weight: bold;
}
.i-news-box ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.i-news-box ul li{
    margin: 20px 0;
    padding: 2px;
}
.i-news-box a{
    color: var(--purple);
    font-size: 24px;
    display: block;
    /* margin-top: 45px; */
} 
.i-news-box a:hover{
    text-decoration: underline;
}


@media screen and (max-width:767px){
    .i-news-box{
        flex-direction: column;
    }
    .i-news-text{
        padding: 6px;
    }
}




/** 熱門產品 **/

.i-pro{margin:0 auto;}

.i-pro-title{font-size:24px; color:#333; padding:10px 0; text-align:center; font-weight:normal; border-bottom:3px #DFDFDF solid; margin:10px 0;}

.i-pro ul{margin:0; padding:5px; list-style:none; display:flex; flex-wrap:wrap;}

.i-pro ul li{width:25%; margin:0; padding:10px; text-align:center;}

.i-pro ul li:hover{background:#f8f6f6;}

.pro-photo{width:100%; position:relative;}

.pro-photo a{display:flex; height:100%; vertical-align:middle; text-align:center; align-items:center; justify-content:center;}

.pro-photo img.index-pro-img{width:auto; height:auto; flex-shrink:0;}




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

	.i-pro ul li{width:50%; padding:5px;}

}



/** 內頁banner **/

.inside-banner{background:#8c8c8c; padding:25px 0;}

.inside-banner .banner-title{max-width:1280px; font-size:18px; color:#ffffff; margin:0 auto; padding:0;}



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

	.inside-banner{padding:25px 10px;}

}


/** 內頁架構 **/


.page-title{font-size:20px; color:var(--primary); padding:0 0 10px; margin:0;}

.page-main{padding:0 5px;color: #000;}/* 編輯器外框 */

.box_flex{
    display: flex;
}


@media screen and (max-width:950px){
    .box_flex{
        flex-direction: column;
}
}

/** Breadcrumb **/

.breadcrumb{display:flex;align-items: center;background: #d1e7ffc2;color:var(--primary);padding: .5rem;/* margin:0; */}

.breadcrumb-item + .breadcrumb-item{padding: 0; position: relative}

.breadcrumb-item + .breadcrumb-item::before{
    content: ">";
    position: relative;
    top: 0;
    right: 0;
    padding: 0 10px;
    color: var(--primary)
}


.breadcrumb-item a{color:var(--primary);}

.breadcrumb-item a:hover{color: var(--purple); text-decoration:underline;}

nav.en-family{
    width: 100%;
}

@media screen and (max-width:767px){
    .breadcrumb{
        /* padding: 0.2rem 15px 1rem; */
        margin: 0;
    }
}

/** 關於我們 **/

.about_img{
    max-width: 410px;
    padding: 10px;
}
.about_text{
    flex: 1;
    padding: 5px;
}
@media screen and (max-width:767px){
    
    .about_img,.about_text{
        padding: 0;
    }
}

/** 產品列表介紹 **/
.pro_title{
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
}
.pro-list{
    flex-direction: column; align-items: center;
}

.pro-list ul{padding:0; list-style:none; display:flex; flex-wrap:wrap; width:100%;}

.pro-list ul li{width:calc(100%/4 - 10px); margin:5px; padding:8px;}

.pro-list ul li a{
    display: block;
}
.pro-list a.pro_box{
    border: 1px solid #000;
    padding: 5px;
}

.pro-list ul li h4{font-size: var(--fontSize); color:var(--primary);font-weight:normal; padding:5px 0; margin:0;
overflow : hidden;
  text-overflow : ellipsis;
  white-space : nowrap;
  width : 98%;
}

.pro-list02 ul li{
    width: calc(100%/5 - 10px);
    box-shadow: 2px 2px 3px 2px #ddd;
    border: 1px solid #aaa;
}
.pro-list02 ul li:hover h4{
    color: var(--purple);
    text-decoration: underline;
}

.pro-photo,.pro-photo02{
    position: relative;
}
.pro-photo img,.pro-photo02 img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
@media screen and (max-width: 870px){
    .pro-list ul li{
        width: calc(100%/2 - 8px);
        padding: 2px;
        margin: 4px;
    }
    .pro-list02 ul li{
        width: calc(100%/3 - 10px);
    }
}
@media screen and (max-width: 575px){
    .pro-list02 ul li{
        width: calc(100%/2 - 10px);
    }
}


/** 產品明細 **/

.pro_detail_photo_spe{
    display: flex;
    margin-bottom: 20px;
}
.pro_detail_img01{
    padding: 5px;
    width: 240px;
    margin: 0 20px 10px 0;
}
.pro_detail_spe{
    flex: 1;
}
.pro_detail_red{
    color: var(--brown)
}
/*
.pro_detail_table{
    margin: 10px 0;
    border: 1px;
}
*/
/*
.pro_detail_table table{
    width: 100%;
}
.pro_detail_table table tr:last-child{
    border-bottom: 1px solid #000;
}
.pro_detail_table table tr:nth-child(even){
    background: #F0F0F0;
}
.pro_detail_table table tr td{
    padding: 5px;
    vertical-align: top;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}
*/
.pro_detail_introduce{
    flex: 1;
}
@media screen and (max-width:787px){
    .pro_detail_photo_spe{
        flex-direction: column;
    }
}
@media screen and (max-width:575px){
    
/*
    .pro_detail_table{
        width: 85vw;
        overflow-x: scroll;
        border: 1px solid #000;
    }
*/
/*
    .pro_detail_table table{
        display: block;
        white-space: nowrap;
    }
*/
}

/** 最新消息 **/



/** 聯絡我們 **/
.contact_title{
    font-size: var(--fontSize);
    padding: 0;
}
.contact_text{
    margin:0 0 20px 0;
    flex: 1;
}

.contact_img{
    max-width:340px;
}

@media screen and (max-width:950px){
    .contact_text{
        margin: 0 0 20px;
    }
}

/** FAQ **/
.faq_title{
    font-size: 18px;
    padding: 5px 0;
    margin: 0 0 10px;
}
.faq_list,.faq_text{
    padding: 5px;
}

.faq_list ul{list-style:none; padding:0; margin:0 0 5px;}

.faq_list ul li{padding: 0; margin: 0;border-top: 1px solid #000;border-left: 1px solid #000;}

.faq_list ul li:last-child{
    border-bottom: 1px solid #000;
}

.faq_list ul li .faq_list_content{padding: 5px 10px; text-align:left; margin:0;   word-break: break-all;border-right: 1px solid #000;}

.faq_list ul li .faq_list_title{
    background: #F0F0F0;
    text-align: center;
    border-right: 1px solid #000;
}

.faq{display:none;}

.faq_content{flex:1;}

.faq_text ul{
    list-style: none;
    padding-left: 50px;
}
.faq_text ul li{
    margin: 10px 0;
}



@media screen and (max-width:767px){
    .faq_list ul li{padding:20px 10px; border-top: 1px solid #000;border-left: none;}
    .faq_list ul li:nth-child(even){
        background: #F0F0F0;
    }
    .faq_list ul li:first-of-type{display:none;}
    
    .faq_list ul li .faq_list_content{
        border: none;
    }
	

	.faq{display:inline-block; color:#000; width:150px; margin:0;}

	.faq_content{width:100%; max-width:100%; text-align:left;}

}

/** 檔案下載 **/
.download_img{
    max-width: 18px;
    margin: 0 10px 0 5px;
}
.download_text{
    flex: 1;
    padding: 5px;
}
.download_text .download_title{
    padding: 20px 30px;
    background: url("../images/download_icon.gif") left center no-repeat;
    font-size: 18px;
}
.download_text .download_title a{
    color: var(--primary);
}
.download_text .download_title a:hover{
    color: var(--purple);
    text-decoration: underline;
}
.download_text ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.download_text ul li{
    margin: 10px 0;
}
.download_text ul li a{
    margin-left: 5px;
    text-decoration: underline;
    word-break: break-all;
    
}
.download_text ul li a:hover{
    color: #007bff;
}
@media screen and (max-width:1186px){
    .download_text ul li a{
        display: block;
    }
}
@media screen and (max-width:900px){
}


/** 頁次 **/

.page{text-align:center;margin:15px 0;}

.page a{background:#4a4a4a; color:#fff; padding:4px 10px;}

.page a:hover{background:#848484; color:#fff;}

.page br{display:none;}



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

	.page br{display:block;}

}





/** 下版 **/

footer{background: var(--secondary); border-top:3px solid var(--primary);}

footer .footer{max-width:1280px; margin:0 auto; text-align:left; padding:4px 20px; font-size: var(--fontSize); display: flex; justify-content: space-between; align-items: flex-end;}

.footer ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer ul li{
    display: inline-block;
    margin-right: 20px;
}

.footer .copyright{
    color: #666666;
    display: flex;
    align-items: flex-end;
}

.footer .copyright a{
    margin:3px 5px;
}

@media screen and (max-width:620px){
    footer .footer{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .footer ul{
        margin-bottom: 10px;
    }
    .footer .copyright{
        align-items: center;
    }
}
/** faq配置網格 **/

.o-col-sm, .o-col-sm-1, .o-col-sm-10, .o-col-sm-11, .o-col-sm-12, .o-col-sm-2, .o-col-sm-3, .o-col-sm-4, .o-col-sm-5, .o-col-sm-6, .o-col-sm-7, .o-col-sm-8, .o-col-sm-9, .o-col-sm-auto{position:relative; width:100%; min-height:1px; padding-right:15px; padding-left:15px;}

.o-col-sm{-ms-flex-preferred-size:0; flex-basis:0; -ms-flex-positive:1; flex-grow:1; max-width:100%;}

.o-col-sm-auto{-ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:none;}

.o-col-sm-1{-ms-flex:0 0 8.333333%; flex:0 0 8.333333%; max-width:8.333333%;}

.o-col-sm-2{-ms-flex:0 0 16.666667%; flex:0 0 16.666667%; max-width:16.666667%;}

.o-col-sm-3{-ms-flex:0 0 25%; flex:0 0 25%; max-width:25%;}

.o-col-sm-4{-ms-flex:0 0 33.333333%; flex:0 0 33.333333%; max-width:33.333333%;}

.o-col-sm-5{-ms-flex:0 0 41.666667%; flex:0 0 41.666667%; max-width:41.666667%;}

.o-col-sm-6{-ms-flex:0 0 50%; flex:0 0 50%; max-width:50%;}

.o-col-sm-7{-ms-flex:0 0 58.333333%; flex:0 0 58.333333%; max-width:58.333333%;}

.o-col-sm-8{-ms-flex:0 0 66.666667%; flex:0 0 66.666667%; max-width:66.666667%;}

.o-col-sm-9{-ms-flex:0 0 75%; flex:0 0 75%; max-width:75%;}

.o-col-sm-10{-ms-flex:0 0 83.333333%; flex:0 0 83.333333%; max-width:83.333333%;}

.o-col-sm-11{-ms-flex:0 0 91.666667%; flex:0 0 91.666667%; max-width:91.666667%;}

.o-col-sm-12{-ms-flex:0 0 100%; flex:0 0 100%; max-width:100%;}



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

	.o-col-sm, .o-col-sm-1, .o-col-sm-10, .o-col-sm-11, .o-col-sm-12, .o-col-sm-2, .o-col-sm-3, .o-col-sm-4, .o-col-sm-5, .o-col-sm-6, .o-col-sm-7, .o-col-sm-8, .o-col-sm-9, .o-col-sm-auto{width:100%; max-width:100%; flex:inherit;}

}