@charset "utf-8";

/** bootstrap **/
@import "bootstrap-4.2.1.css";

/** 文字icon **/
@import "font-awesome.min.css";

/** 手機選單 **/
@import url("slicknav.css") screen and (max-width:767px);

/** 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:medium/1.5 "Microsoft JhengHei","Arial";}
.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: var(--secondary);}
.slicknav_icon-bar{background-color:var(--primary);}
.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{background:var(--primary);}
.border-color{border-left:7px #A0A0A0 solid;}
.slicknav_nav .slicknav_arrow{font-family:Arial;}

/** 色調 **/
:root{
    --primary: #01385e;
    --secondary: #5c86b4;
    --mark: #bdd8f6;
}

/** 上版 **/
header{background:#ffffff;padding: 0 10px;}
.head-main{max-width:1200px; margin:0 auto; height:90px; padding:0;display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; transition: all 0.3s;}
.head-main .logo{width: 300px; max-width: 300px; height:auto; transition: all 0.3s;}
.head-main .logo a{display: block;}
.head-main .logo img{width:100%; height:auto;}

@media screen and (max-width:1000px){
    .head-main .logo{width: 250px;}
}

@media screen and (max-width:767px){
	.head-main{height:50px;}
    .head-main .logo{width: 180px;}
	.head-main .logo img{width:100%; height:auto;}
}

/** 主選單與下拉 **/
.menu{padding:0; list-style:none; position:relative; margin:0 auto; display:flex; background: #fff;}
.menu>li{color:#fff; font-size:16px; font-weight: 300; letter-spacing: 1px; text-align:center; position:relative; line-height:1.8; cursor:pointer; padding:0; margin-right:30px; transition: all 0.3s;}
.menu>li:last-of-type{margin: 0;}
.menu>li>a{color:#333; display:block; padding:10px 5px; margin:0; position: relative;}
.menu>li>a:after{content: ""; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; background: var(--primary); transition: all 0.3s; }
.menu>li>a:hover::after{width: 100%; }
.menu>li.sub>ul.sub-menu{background:none; 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:1000px){
    .menu>li{ margin-right: 0; }
    .menu>li>a{padding: 10px 5px;}
}
@media screen and (max-width:767px){
	.slicknav_menu{display:none;}
	#menu{display:none;}
	.slicknav_menu{display:block;}
}

/** 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;}

/** 配置 **/
.warpper{background:#fff; max-width:100%; margin:0 auto;}
.main{padding-top:0px;}

/** 首頁最新消息 **/
.i-news{padding: 0 10px;}
.i-news .i-news-main{max-width: 1200px;margin: 0 auto; padding: 70px 0;}
.i-news-main .owl-carousel .item h4{font-size: 16px;color: #333;padding: 15px;box-shadow: 1px 5px 13px -5px #aaa;
    border-radius: 10px; transition: all 0.3s;}
.i-news-main .owl-carousel .item h4:hover{box-shadow: 1px 1px 5px -1px #aaa;}
.i-news-main .owl-carousel .item{padding-right: 5px;}
.i-news-main .owl-carousel .item h4 a {
    color: #333;
    display: flex;
    flex-wrap: wrap; align-items: center;
    font-weight: 300;
}
.news-date{
    font-size: 14px;
    text-align: center;
    font-family: "Arial";color: #666;
    width: 80px;
    margin-right: 15px;
}
.news-date .day{
    font-size: 40px;
    font-weight: 600;
    color: var(--primary);
    position: relative;
}
.news-date .day::after{
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 1px;
    background: var(--secondary);
}
.i-news-main .owl-carousel .item h4 a .news-content{
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
    letter-spacing: 1px;
}
@media screen and (max-width:575px){
    .i-news .i-news-main{
        padding: 40px 0;
    }
}


/** 首頁關於我們 **/
.i-about{ padding: 50px 10px 0; background: url("../images/i-about02.jpg") no-repeat top center; margin: 0 0 70px;}
.i-about-main{ max-width: 1200px; margin: 0 auto;}
.i-about-main .i-about-title{ text-align: center; color: #fff; font-size: 24px; font-weight: 400; letter-spacing: 1px; line-height: 1.5; margin-bottom: 40px;}
.i-about-main .i-about-title .i-about-photo{ margin-bottom: 10px; padding-bottom: 10px; position: relative;}
.i-about-main .i-about-title .i-about-photo::after{content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);  width: 20px; height: 1px;  background: #fff;}
.i-about-main .i-about-content{ display: flex; flex-wrap: wrap;background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 1px 5px 13px -5px #aaa; }
.i-about-main .i-about-content .i-about-photo{width:600px; overflow: hidden; margin-right: 10px;}
.i-about-main .i-about-content .i-about-text-box{ flex: 1; padding: 20px; display: flex; align-items: center; flex-direction: column; justify-content: space-between;}
.i-about-main .i-about-content .i-about-text-box .line{ display: block; width: 20px; height: 1px; background: var(--secondary); margin: 45px 0;}
.i-about-main .i-about-content .i-about-text-box .i-about-text .text-style{ color: #333; letter-spacing: 1px; line-height: 1.5; margin: 0;}
.i-about-main .i-about-content .i-about-text-box .i-about-text{ overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; white-space: normal;}
.i-about-main .i-about-content .i-about-text-box .i-about-btn{margin-top: 20px;position: relative; z-index: 1; overflow: hidden; }
.i-about-main .i-about-content .i-about-text-box .i-about-btn::after{
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--secondary);
    z-index: -1;
    transition: all 0.3s;
}
.i-about-main .i-about-content .i-about-text-box .i-about-btn:hover::after{
    left: 0;
}
.i-about-main .i-about-content .i-about-text-box .i-about-btn a{display: block;width: 200px;padding: 5px;color: var(--secondary);border: 1px solid var(--secondary); text-align: center; z-index: 1;}
.i-about-main .i-about-content .i-about-text-box .i-about-btn:hover a{
    color: #fff;
}

@media screen and (max-width: 1020px){
    .i-about-main .i-about-content .i-about-photo{width: 50%;}
    .i-about-main .i-about-content .i-about-text-box .i-about-btn a{width: 150px;}
    .i-about-main .i-about-content .i-about-text-box .i-about-text{  -webkit-line-clamp: 5;}
}

@media screen and (max-width: 767px){
    .i-about-main .i-about-content{flex-direction: column;}
    .i-about-main .i-about-content .i-about-photo{ width: 100%;height: 350px; margin: 0;}
    .i-about-main .i-about-content .i-about-text-box .line{margin: 20px;}
    .i-about-main .i-about-content .i-about-text-box .i-about-text{ -webkit-line-clamp: 3;}
}

@media screen and (max-width: 575px){
    .i-about{ padding: 20px 10px;margin-bottom: 10px;}
    .i-about-main .i-about-title{font-size: 18px; margin-bottom: 20px;}
    .i-about-main .i-about-title .i-about-photo{ margin-bottom: 5px; padding-bottom: 5px;}
    .i-about-main .i-about-content .i-about-photo{height: 250px;}
    .i-about-main .i-about-content .i-about-text-box .line{margin: 10px 0 15px;}
    .i-about-main .i-about-content .i-about-text-box{padding: 10px;}
}

/** 首頁產品 **/
.i-pro{padding: 0 10px; margin-bottom: 70px; transition: all 0.3s;}
.i-pro-main{max-width: 1200px; margin: 0 auto;}
.i-pro-main .i-pro-title{ padding: 0 0 15px; text-align:center; font-weight:normal; margin:0 0 25px;position: relative; transition: all 0.3s;}
.i-pro-main .i-pro-title::after{ content:""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background: var(--secondary);}
.i-pro-main .i-pro-title .i-pro-title-en{ color: #aaa; font-size: 20px; margin-bottom: 10px; transition: all 0.3s;}
.i-pro-main .i-pro-title .i-pro-title-ch{ font-size:40px; color:#333; transition: all 0.3s;}
.i-pro-main ul{margin:0; padding:5px; list-style:none; display:flex; flex-wrap:wrap;}
.i-pro-main ul li{width:25%; margin:0; padding:10px; text-align:center; transition: all 0.3s;}
.i-pro-main ul li:hover{box-shadow: 0px 0px 9px -3px #aaa;border-radius: 5px;}
.pro-line{position: relative; margin:25px 0 5px; padding: 0 15px; transition: all 0.3s;}
.pro-line::after{content:""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background: var(--secondary); transition: all 0.3s;}
.i-pro-main ul li .pro-line h4{font-size:18px; color:#333; line-height:1.5; font-weight:normal; margin: 0; padding:0; position: relative;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; transition: all 0.3s;}
.pro-photo{background:#fff; width:100%; position:relative; border-radius: 5px; overflow: hidden;}
.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:670px){
	.i-pro ul li{width:50%;}
}

@media screen and (max-width: 575px){
    .i-pro{ margin-bottom: 40px; }
    .i-pro-main .i-pro-title{padding: 0 0 10px; margin:0 0 10px;}
    .i-pro-main .i-pro-title .i-pro-title-ch{ font-size: 25px;}
    .i-pro-main .i-pro-title .i-pro-title-en{ font-size: 15px; margin-bottom: 5px;}
    .i-pro-main ul li .pro-line{ margin: 15px 0 5px; padding: 0 5px;}
    .i-pro-main ul li .pro-line::after{ top: -5px;}
    .i-pro-main ul li .pro-line h4{font-size: 16px; }
}

@media screen and (max-width:400px){
    .i-pro ul li{width:100%; padding:5px;}
}

/** 內頁banner **/
.inside-banner{background:#fff; padding:0; position: relative;}
.inside-banner .banner-photo{ width: 100%;}
.inside-banner .banner-title{padding:0; text-align: center;width: 100%;
height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;position: absolute;top: 0;left: 0;}
.inside-banner .banner-title .banner-title-en{font-size: 100px; color: #fff; opacity: 0.6; font-weight: 500;}
.inside-banner .banner-title .banner-title-ch{ font-size: 30px; color: var(--primary); margin-top: -60px; z-index: 1; position: relative; padding: 0 0 10px;}
.inside-banner .banner-title .banner-title-ch::after{ content: "";  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background: var(--primary);}
.inside-banner .banner-photo-bg{ position: absolute; bottom: -8px;}

@media screen and (max-width:575px){
    .inside-banner .banner-title .banner-title-en{ font-size: 18px; color: #666;}
    .inside-banner .banner-title .banner-title-ch{ margin-top: 0; font-size: 24px;}
    .inside-banner .banner-title .banner-title-ch::after{ content: none;}
}


/** Breadcrumb **/
.breadcrumb{display:flex; flex-wrap:wrap; justify-content: flex-end; width:100%; max-width:1200px; margin:0 auto; padding:0.75rem 1rem 0.75rem 0; list-style:none; background-color:#fff; border-radius:0.25rem;}
.breadcrumb-item{padding-left:0.5rem;}
.breadcrumb-item + .breadcrumb-item::before{display:inline-block; padding-right:0.5rem; color: var(--secondary); content:"-";}
.breadcrumb-item a{text-decoration:none; color:#333;}
.breadcrumb-item a:hover{color: var(--secondary); text-decoration:none;}




/** 內頁架構 **/
.content-body{max-width:1200px; margin:0 auto; background:#ffffff; padding:20px 0;}
.page-title{font-size:24px; color:var(--primary); padding:5px 0; margin:0; position: relative;}
.page-title::after{ content: ""; position: absolute; top: -5px; left: 0; width: 20px; height: 1px; background: var(--secondary);}

.page-main{padding:0; font-size:16px; color:#333;}

@media screen and (max-width:575px){
    .page-title{ font-size: 20px;}
}
/** 左邊分類 **/
.left-menu-title{background:#e9ecef; text-align:center; font-size:18px; font-weight:bold; padding:8px 0; border-radius:5px 5px 0 0; margin-bottom:3px; border-bottom:2px solid #6d6d6d; color:#525252;}
.in-left-menu>ul{margin:0; padding:0; list-style:none;}
.in-left-menu>ul>li{ font-size:16px; color:#666; padding:0;margin: 15px 0;}
.in-left-menu>ul>li:hover{background: var(--secondary); border-radius: 10px; } 
.in-left-menu>ul>li>a{background:none; color:#333;display:block; padding:10px 5px 10px 25px; line-height:1.5em; border:1px solid var(--mark);border-radius: 10px;}
.in-left-menu>ul>li:hover>a{color: #fff;}
.in-left-menu>ul>li>.current{background: var(--secondary); color: #fff; border-radius: 10px;}
.in-left-menu>ul>li ul{margin:5px 0 0 30px; padding:0; list-style:square;}
.in-left-menu>ul>li ul li{border-top:1px #CCC dotted; padding:5px 5px 5px 0;}
.in-left-menu>ul>li ul li a{font-size:13px; color:#666; display:block;}
.in-left-menu>ul>li ul li a:hover{color:#71743D;}
.left-beautify img{width:100%; height:auto; margin-top:0px;}
.m_classLink{display:none;}

@media screen and (max-width:575px){
	.classBox{padding:0 0 20px 0;}
	ul.classLink{display:none;}
	.m_classLink{display:block; position:relative;border-radius: 10px; border:1px solid var(--mark);}
	.m_classLink a.main{display:block; background:none; font-size:16px; font-family:"Microsoft JhengHei", "新細明體", sans-serif; color:#333; position:relative; padding:8px;}
	.m_classLink a.main i{display:block; font-size:16px; background:var(--mark); border-radius: 0 10px 10px 0; 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 var(--mark); border-radius: 0 0 10px 10px;position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box; overflow: hidden;}
	.m_classLink ul li{margin:0; padding:0;}
	.m_classLink ul li a{display:block; padding:8px; border-top:1px solid var(--mark); font-family:"Microsoft JhengHei", "新細明體", sans-serif; font-size:16px; color:#222;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background: var(--mark);}
	.m_classLink ul li ul{display:block; margin:0 10px 10px 10px; padding:0; list-style:none; width:calc(100% - 20px); background:#FFF; border:1px solid #d1d1d1; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
	.left-menu-title{display:none;}
	.left-beautify{display:none;}
}


/** 關於我們 **/
.about-text-style{position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; margin-bottom: 20px;}
.about-text-style:after{ content: ""; position: absolute; left: 40px; top: 40px; width: 30%; height: 70%; background: #efefef;}
.about-text-style .about-text{ width: 50%; position: absolute; left: 0; top: 150px; z-index: 1;}
.about-text-style .about-text:after{ content: ""; position: absolute; top: -40px; left: 0; width: 100px; height: 5px; background: var(--secondary);}
.about-text-style .about-photo{ width: 60%; position: relative;}
.about-text-style .about-photo .img{ background-repeat: no-repeat; background-size: 100% 100%; margin: 0 auto;}
.about-text-style .about-photo .img::after{ content: ""; display: block; padding-bottom: 75%;}
.about-text-style:nth-child(2){ justify-content: flex-start;}
.about-text-style:nth-child(2) .about-text{ left: auto; right: 0;}
.about-text-style:nth-child(2) .about-text:after{ left: auto; right: 0;}
.about-text-style:nth-child(2):after{ left: auto; right: 40px;}
.about-text-style .about-text b.mark{ background: var(--mark); font-weight: normal; padding: 2px 5px; margin: 5px;}

@media screen and (max-width:767px){
    .about-text-style{ flex-direction: column; margin-bottom: 30px;}
    .about-text-style:after{ left: auto; right: 20px; top: 20px; width: 80%; height: 40%;}
    .about-text-style .about-text{ position: static; width: 100%;}
    .about-text-style .about-text:after,.about-text-style:nth-child(2) .about-text:after{ top: -15px; left: 0; width: 50px; height: 2px;}
    .about-text-style .about-photo{ width: 100%;  margin-top: 20px; z-index: 1;}
    .about-text-style:nth-child(2){ flex-direction: column-reverse; }
}



/** 服務項目 **/
.service-title{ text-align: center; font-size: 24px; position: relative; margin-bottom: 25px; padding: 10px; color: var(--primary);}
.service-title::after{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 1px; background: var(--secondary);}
.service-style ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.service-style ul li{display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 10px; width: calc(100% / 9 - 20px); background: #fff; border-radius: 10px; position: relative; z-index: 1; padding: 10px; border: 1px solid var(--mark); box-shadow: 1px 1px 7px -2px #aaa;}
.service-style ul li::after{content: ""; position: absolute; top: 50%; right: -50px; transform: translateY(-50%); height: 1px; width: 50px; background: var(--primary); z-index: -1;}
.service-style ul li:last-of-type::after{content: none;}
.service-style ul li .service-photo{width: 100%; display: flex; align-items: center; justify-content: space-around; margin-bottom: 5px;}
.service-style ul li h4{ font-size: 18px; font-weight: normal; text-align: center;}
.service-style02{ display: flex; flex-wrap: wrap; align-items: center; z-index: 1; overflow: hidden;}
.service-style02 .service-photo{ width: 50%; margin-left: 20px;}
.service-style02 .text-style{ flex: 1; padding: 10px; position: relative; z-index: 1;}
.service-style02 .text-style::after{content: ""; position: absolute; top: -30px; right: 5px; width: 80px; height: 1px; background: var(--secondary);}
.service-style02 .text-style::before{ content: ""; position: absolute; top: -55px; right: 25px; width: 50%; height: 50%; background: #efefef;z-index: -1;}
 
@media screen and (max-width:1100px){
    .service-style ul li{width: calc(100% / 7 - 20px);}
    .service-style ul li:nth-child(7n)::after{content: none;}
}

@media screen and (max-width:980px){
    .service-style ul li{ width: calc(100% / 5 - 20px);}
    .service-style ul li:nth-child(7n)::after{ content: "";}
    .service-style ul li:nth-child(5n)::after{ content: none; }
}

@media screen and (max-width:767px){
    .service-style ul li .service-photo{width: 80%;}
}

@media screen and (max-width:680px){
    .service-title{ margin-bottom: 10px; font-size: 20px;}
    .service-style ul li{ width: calc(100% / 3 - 20px);}
    .service-style ul li:nth-child(5n)::after{content: "";}
    .service-style ul li:nth-child(3n)::after{ content: none;}
    .service-style ul li .service-photo{ width: 50%;}
    .service-style ul li h4{ font-size: 14px;}
    .service-style02{ flex-direction: column;}
    .service-style02 .service-photo{ width: 100%; margin: 0; }
    .service-style02 .text-style::after,.service-style02 .text-style::before{content: none;}
}

/** 最新消息 **/
.news ul{margin:0; padding:0; list-style:none;}
.news ul li{clear:both;}
.news ul li:nth-child(even){ background: #e7f1fb;}
.news ul li a{color:#333; display:flex; align-items:center; padding:8px 10px;}
.news ul li a:hover{background:#a1d0ff;}
.news ul li a:hover .news-date,.news ul li a:hover .news-date .day{color: #fff;}
.news ul li a:hover .news-date .day::after{ background: #fff;}
.news ul li .news-date{width:100px; color:#b9b9b9; font-size:14px; text-align:center; margin:0 15px 0 0;}
.news ul li .news-content{flex:1; font-size:16px; color:#333;}
.news-detail-date{color:#b9b9b9; padding:10px 0; border-bottom:1px #D7D7D7 dotted; text-align: right;position: relative; z-index: 1;}
.news-detail-date::after{ content: ""; position: absolute; bottom: 11px; right: 10px; width: 100px; height: 20%; background: var(--mark); z-index: -1;}

@media screen and (max-width:400px){
    .news ul li .news-date .day{ font-size: 24px;}
	.news ul li a{display:block;}
    .news ul li a{ padding: 5px;}
	.news ul li .news-date{width:100%; text-align:center; margin-bottom: 5px;}
}





/** 產品列表介紹 **/
.pro-store-info{font-size:16px; color:#666; padding:10px; margin-bottom:20px;}
.pro-list ul{max-width:1200px; margin:0 auto; padding:0; list-style:none; display:flex; flex-wrap:wrap;}
.pro-list ul li{width:25%; margin:0; padding:10px; text-align:center;}
.pro-list ul li:hover{box-shadow: 0px 0px 9px -3px #aaa;}
.pro-list ul li h4{font-size:16px; color:#504f4d; line-height:1.5em; font-weight:normal; padding:0; margin:0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;}
.pro-list ul li .pro-store{color:#938c83; padding:10px 0 0px 0; display:block; text-decoration:line-through;}
.pro-list ul li .pro-price{color:#b83400; font-size:20px; padding:5px; display:block;}

@media screen and (max-width:767px){
    .pro-line{ padding: 0 5px;}
	.pro-list ul li{width:33.3333%;}
}

@media screen and (max-width:575px){
	.pro-list ul li{width:50%; padding:5px;}
}

/** 實績案例 **/
.project-title{ font-size: 24px; color: var(--primary); position: relative; padding: 5px 0; margin-bottom: 10px; z-index: 1;}
.project-title::before{ content: ""; position: absolute; left: -5px; top: -5px; width: 25px; height: 50px; background: #efefef; z-index: -1;}
.project:nth-child(even) .project-title::before{ background: #fff;}
.project-title::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 90px; height: 2px; background: var(--secondary);}
.project-list .project{ margin-bottom: 20px; padding: 20px 15px;}
.project-list .project:nth-child(even){background: #e7f1fb;}

@media screen and (max-width:767px){
	.project-list .project { margin-bottom: 5px; padding: 10px 15px;}
    .project-list .project .pro-list ul li{width:25%;}
}

@media screen and (max-width:575px){
    .project-list .project .pro-list ul li{width:50%;}
    .project-title{ font-size: 20px; }
}





/** 聯絡我們 **/
.contact-body{  }
.contact-note{padding:10px 0; font-weight:bold; font-size:16px; color:#900;}
.googlemap{ margin-bottom: 40px;}
.contact-title{ color: var(--primary);position: relative;padding: 0 100px 0 0;}
.contact-title::after,.contact-title::before{ content: ""; position: absolute;}
.contact-title::after{ bottom: 0; right: 10px; width: 80px; height: 1px; background: var(--secondary);}
.contact-title::before{ bottom: -3px; right: 20px; width: 100px; height: 10px; background: #efefef;}
.contact-info a:link{color: #333;}
.contact-info ul{list-style: none; margin: 0; padding: 0;}
.contact-info ul li{ padding: 5px 0 5px 30px ; margin: 0 0 10px; background: url("../images/icon.png") no-repeat left center; background-size: 20px;}
.contact-info .line{ display: flex; flex-wrap: wrap; align-items: center;}
.contact-info .contact-photo{opacity: 0.6; height: 300px; overflow: hidden;}

@media screen and (max-width:767px){
    .contact-info{margin-bottom: 40px;}
}

@media screen and (max-width:575px){
    .googlemap{margin-bottom: 20px;}
    .contact-info{margin-bottom: 20px;}
}

/** 表單欄位 **/
.form-box input, .form-box img{vertical-align:middle;}
.opinion{display:flex; flex-wrap:wrap; margin:5px 0;overflow:hidden;}
.opinion-left01{width:110px; min-width:110px; padding:5px 15px; font-weight:bold; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; display:flex; align-items:center;}
.input-main-style01{flex:1; width:100%; border:1px solid #eee; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-style02{background:none; flex:1; width:100%; border:1px solid #eee; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-style03{background:#f4f8fb; flex:1; width:100%; border:0; margin:5px 0 0 0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
.input-main-select{background:none; flex:1; width:100%; border:1px solid #eee; margin:0; padding:5px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; display:flex; flex-wrap:wrap;}
.input-main-select select{background:#f4f8fb; width:calc(50% - 2.5px); margin-right:5px; padding:5px 15px; line-height:1.8; border:0; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; min-height:37px;}
.input-main-select select:nth-child(2){margin-right:0;}
.select-style{background:#8a6e0c; font-size:16px; color:#ffffff; line-height:20px; padding:5px 10px; border:0;}
.input-style01{background:#f4f8fb; flex:1; width:100%; border:0; margin:0; padding:5px 15px; font-size:16px; font-family:"Microsoft JhengHei"; color:#333; line-height:1.8; min-height:37px;}
input:disabled{background-color:#fff; color:#2d7fb9; cursor:no-drop;}
.btn.openlink{margin:3px 0; padding:0 10px; text-align:center; font-size:16px; line-height:1.5; font-weight:bold; background-color:#2d7fb9; color:#fff; border-radius:5px;}
.btn.openlink:hover{background-color:#ffbe00;}
img.code{width:100px; height:37px; margin:0; vertical-align:middle; display:inline-block;}
.pay-main{padding:0;font-size: 16px; color: #333333;border-radius:0;margin: 15px 0 ;}
@media screen and (max-width:400px){
	.opinion{display:block;}
	.opinion-left01{width:100%;}
	.input-main-style02{width:calc(100% - 104px); display:inline-block;}
}

/** 按鈕 **/
.cart-btn{padding:20px 0; text-align:center; margin-top:40px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; letter-spacing: 1px;}
.cart-btn a{ position: relative;overflow: hidden;}
.cart-btn a::after{ content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%;  transition: all 0.3s; z-index: -1;}
.cart-btn a.btn-reset:hover::after{
    background:#aaa;
}
a.btn-send:hover::after,a.btn-send-over:hover::after{
    background: var(--secondary);
}
a.btn-send:hover::after,a.btn-reset:hover::after,a.btn-send-over:hover::after{left: 0;}

a.btn-send:hover,a.btn-reset:hover,a.btn-send-over:hover{color: #fff; z-index: 1;}
a.btn-send{ padding: 5px 30px; text-align: center; font-size: 15px; color: var(--secondary); min-width: 100px; margin: 2px; border: 1px solid var(--secondary);}
a.btn-reset{ padding: 5px 30px; text-align: center; font-size: 15px; color: #aaa; min-width: 100px; margin: 2px; border: 1px solid #aaa;}
a.btn-send-over{ padding: 5px 30px; text-align: center; font-size: 15px; color: var(--secondary); min-width: 100px; margin: 2px; border: 1px solid var(--secondary);}

@media screen and (max-width:575px){
	a.btn-send{padding:5px 10px; width:calc(50% - 4px);}
	a.btn-reset{padding:5px 10px; width:calc(50% - 4px);}
	a.btn-send-over{padding:5px 10px; width:calc(50% - 4px);}
}

/** 頁次 **/
.page{font:13px/2.4 "Microsoft JhengHei"; color:#333; text-align:center; clear:both; margin:15px 0;}
.page a{  color: var(--secondary); padding:4px 20px; position: relative;  border: 1px solid var(--secondary); transition: all 0.3s;}

.page a:hover{
    color: #fff;
    background: var(--secondary);
}
.page br{display:none;}

@media screen and (max-width:640px){
	.page br{display:block;}
}

/** 下版 **/
footer{background: var(--secondary);padding: 0 10px;}
footer .bottom-info-main{max-width:1200px; margin:0 auto; display: flex; flex-wrap: wrap;align-items: center; justify-content: space-between; font-size:14px;padding: 30px 0; color:#ffffff;}
footer .bottom-info-main a:link{color: #fff;}
footer .bottom-info-main .footer-logo{max-width: 115px; width: 115px; margin-right: 30px;transition: all 0.3s;}
footer .bottom-info-main .footer-logo img{width: 100%;}
footer .bottom-info-main .bottom-info-content{flex: 1; margin: 0;padding: 0; list-style: none; display: flex; flex-wrap: wrap;}
footer .bottom-info-main .bottom-info-content>li{width: calc(100%/3); padding-right: 15px;}
footer .bottom-info-main h3{font-size:16px; color:#ffffff;padding-left:30px; margin:0 0 10px;position: relative;}
footer .bottom-info-main h3:after{content: ""; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 1px; background: #fff; }
footer .bottom-info-main ul.text-style{list-style:none; margin:0; padding:0;}
footer .bottom-info-main p.text-style{margin: 0;}
footer .bottom-info-main .text-style02{font-weight: 600; font-size: 18px; font-family: "Arial";margin: 0;}
footer .bottom-info-main .bottom-info-service{display: flex; flex-wrap: wrap; justify-content: space-between;transition: all 0.3s;}
footer .bottom-info-main .bottom-info-service>ul{list-style: none; margin: 0 15px 0 0;padding: 0;display: flex; flex-wrap: wrap; flex-direction: column;justify-content: space-between; transition: all 0.3s;}
footer .bottom-info-main .bottom-info-service .line{position: relative; margin-right: 10px; transition: all 0.3s;}
.line img{width: 115px; max-width: 115px; transition: all 0.3s;}
footer .bottom-info-main .bottom-info-service .line .line-id{position: absolute; top: 10px; right: -175px; background: var(--primary); padding: 5px 15px; border-radius: 5px; transition: all 0.3s;
}
.line-code a{color:#fff;}
footer .bottom-info-main .bottom-info-service .line .line-id::after{ content: ""; position: absolute; top: 6px; left: -15px; width: 0; height: 0; border-style: solid; border-width: 10px 20px 10px 0; border-color: transparent var(--primary) transparent transparent;}
footer .bottom-info-main .bottom-info-copytight{display: flex;flex-wrap: wrap;flex-direction: column;justify-content: flex-end;align-items: flex-end;text-align: right;}
footer .bottom-info-main .bottom-info-copytight a{color: #fff; transition: all 0.3s;}
footer .bottom-info-main .bottom-info-copytight a:hover{color: var(--primary);}

@media screen and (max-width:1170px){
    footer .bottom-info-main{flex-direction: column;}
    footer .bottom-info-main .footer-logo{margin: 0 0 20px; width: 115px;}
    footer .bottom-info-main .bottom-info-content{width: 100%; margin-top: 20px;}
    footer .bottom-info-main .bottom-info-content>li{ width: calc(100%/2);}
    footer .bottom-info-main .bottom-info-content>li:nth-child(2){padding: 0;}
    footer .bottom-info-main li.bottom-info-copytight{width: 100%; text-align: center; align-items: center; margin-top: 40px;}
     footer .bottom-info-main .bottom-info-service .line{ margin-right: 0px; display: flex; align-items: center; flex-direction: column;}
    footer .bottom-info-main .bottom-info-service .line{margin: 0;}
    footer .bottom-info-main .bottom-info-service .line img{ width: 80px;}
    footer .bottom-info-main .bottom-info-service .line .line-id{ position: static; margin-top: 10px;}
    footer .bottom-info-main .bottom-info-service .line .line-id::after{ content: none;}
}
@media screen and (max-width: 720px){
    footer .bottom-info-main .footer-logo{margin-bottom: 10px;}
    footer .bottom-info-main .bottom-info-content>li{width: 100%;padding: 0;margin-top: 20px;}
}
@media screen and (max-width: 575px){
    footer .bottom-info-main .bottom-info-service>ul{ margin: 0 5px 0 0;}
    footer .bottom-info-main .bottom-info-service .line .line-id{ font-size: 10px; padding: 5px 10px;}
}