@charset "utf-8";

/** bootstrap **/
@import url(bootstrap.css);

/** 文字icon **/
@import url(font-awesome.min.css);

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

/** 視差 **/
@import url(aos.css);

/** font **/
@import url(Noto+Sans+TC-Work+Sans.css);

*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{width:100%; height:auto;}
body{background:#ffffff; margin:0; padding:0; width:100%; height:auto; font-size:17px;line-height: 1.8;font-family: "Work Sans", "Noto Sans TC", sans-serif;word-break: break-word;letter-spacing: 0px; overflow-y: scroll;}
a,a:hover{text-decoration:none;transition: all 0.5s ease 0s;cursor: pointer;}
img{border:0; vertical-align:middle; max-width:100%;}
input{vertical-align:middle;border-radius: 0; }
input:focus, select:focus, textarea:focus, button:focus{outline:0;}
/** 取消ios按鈕樣式 **/
input[type="button"], input[type="submit"], input[type="reset"], button[type="button"], button[type="submit"], button[type="reset"], a[type="button"], a[type="submit"], a[type="reset"], textarea{border-radius: 0; -webkit-appearance: none;-moz-appearance: none;appearance: none;}
.slicknav_menu{display:none;}
table{border-collapse:inherit;}

/** 表單預設文字顏色設定 **/
::-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;}

/** 手機選單、選單 色塊-變色 **/
.b-color, .slicknav_menu{}
.slicknav_icon-bar{background-color:#222222;}
.b-color>li:hover, .b-color>li>ul>li>a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover{background:#00b050;color: #ffffff;}
.border-color{border-left:7px #A0A0A0 solid;}
.slicknav_nav .slicknav_arrow{font-family:Arial;position: absolute;top: 15px;right: 15px;font-size: 12px;}

/** 上版 **/
header{padding: 0 4.2%;position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;transition: all 0.5s ease 0s;}
.head-main{margin:0 ; display: flex;align-items: center;border-bottom: 1px #ffffff solid;transition: all 0.5s ease 0s;}
.head-main .logo-main{width: 482px; height:auto;filter: brightness(0) invert(1);transition: all 0.5s ease 0s;}
.head-main .logo-main a{display: flex;align-items: center;}
.head-main .logo-main img{width:100%; height:auto;}
.head-main .logo-main .logo{width: 80px;margin: 0 10px 0 0;transition: all 0.5s ease 0s;}
.head-main .logo-main .logo-font{flex: 1; line-height: 1.2;}
.head-main .logo-main .logo-font .logo-font-en{font-size: 36px;font-weight: 700;color: #333333;transition: all 0.5s ease 0s;}
.head-main .logo-main .logo-font .logo-font-tc{font-size: 17px;color: #444444;letter-spacing: 3px;transition: all 0.5s ease 0s;}
.header-height{background: #ffffff;border-bottom: 1px #dddddd solid;transition: all 0.5s ease 0s;}
.header-height .head-main{border-bottom: 0;transition: all 0.5s ease 0s;}
.header-height .head-main .logo-main{filter: brightness(1);transition: all 0.5s ease 0s;}
.header-height .head-main .logo-main .logo{width: 60px;transition: all 0.5s ease 0s;}
.header-height .head-main .logo-main .logo-font .logo-font-en{font-size: 28px;transition: all 0.5s ease 0s;}
.header-height .head-main .logo-main .logo-font .logo-font-tc{font-size: 14px;letter-spacing: 1.6px;transition: all 0.5s ease 0s;}
@media screen and (max-width:1400px){
    header{padding: 0 15px;}
    .head-main .logo-main{width: 430px;}
    .head-main .logo-main .logo{width: 70px;}
    .head-main .logo-main .logo-font .logo-font-en{font-size: 32px;}
    .head-main .logo-main .logo-font .logo-font-tc{font-size: 16px;letter-spacing: 2px;}
}
@media screen and (max-width:1024px){
    .head-main{border-bottom: 0;}
    .head-main .logo-main{width: 295px;position: fixed;top: 8.5px;left: 15px;z-index: 10000;filter: brightness(1);}
    .head-main .logo-main .logo{width: 44px;}
    .head-main .logo-main .logo-font .logo-font-en{font-size: 22px;}
    .head-main .logo-main .logo-font .logo-font-tc{font-size: 12px;letter-spacing: 0px;}
    .header-height{background: none;border-bottom:0;}
    .header-height .head-main .logo-main .logo{width: 44px;}
    .header-height .head-main .logo-main .logo-font .logo-font-en{font-size: 22px;}
    .header-height .head-main .logo-main .logo-font .logo-font-tc{font-size: 12px;letter-spacing: 0px;}
}
@media screen and (max-width:374px){
    .head-main .logo-main{width: 240px;top: 13px;}
    .head-main .logo-main .logo{width: 36px;margin: 0 8px 0 0;}
    .head-main .logo-main .logo-font .logo-font-en{font-size: 18px;}
    .head-main .logo-main .logo-font .logo-font-tc{font-size: 11px;}
    .header-height .head-main .logo-main .logo{width: 36px;}
    .header-height .head-main .logo-main .logo-font .logo-font-en{font-size: 18px;}
    .header-height .head-main .logo-main .logo-font .logo-font-tc{font-size: 11px;}
}

/** 主選單與下拉 **/
nav{flex: 1;}
.menu{padding:0; list-style:none; position:relative; margin:0; display:flex;justify-content: flex-end;}
.menu>li{color:#fffffff; text-align:center; position:relative;cursor:pointer; padding:0; margin:0;width: auto;transition: all 0.5s ease 0s;}
.menu>li>a{ color:#ffffff; display:block; padding:39.71px 20px; margin:0;transition: all 0.5s ease 0s;position: relative;}
.menu>li>a:before{content: "";display: block;width: 1px; height: 0;background: #ffffff;position: absolute;bottom: 0;left: calc(50% - 0.5px);transition: all 0.5s ease 0s;}
.menu>li>a:hover{ color:#ffffff;transition: all 0.5s ease 0s;}
.menu>li>a:hover:before{height: 25px;transition: all 0.5s ease 0s;}
.menu>li.sub>ul.sub-menu{background:rgba(255,255,255,.9); display:none; position:static; z-index:999; margin:0; padding:0;border: 1px #dddddd solid;overflow:hidden;transition: all 0.5s ease 0s;}
.menu>li.sub:hover ul.sub-menu{position:absolute; display:block; width:280px; left:calc(50% - 140px); top:110px;transition: all 0.5s ease 0s;}
.menu>li.sub>ul.sub-menu>li{display:block; border-bottom:1px #dddddd solid;font-size: 16px;}
.menu>li.sub>ul.sub-menu>li:last-of-type{ border-bottom:0;}
.menu>li.sub>ul.sub-menu>li>a{display:block; color:#666666; padding:8px 10px; margin:0;}
.menu>li.sub>ul.sub-menu>li>a:hover{background:#00b050;color: #ffffff;}
.header-height .menu>li{color:#222222;transition: all 0.5s ease 0s;}
.header-height .menu>li>a{color:#222222;padding:24.71px 20px;transition: all 0.5s ease 0s;}
.header-height .menu>li>a:before{background: #00b050;transition: all 0.5s ease 0s;}
.header-height .menu>li>a:hover{ color:#00b050; transition: all 0.5s ease 0s;}
.header-height .menu>li>a:hover:before{height: 15px;transition: all 0.5s ease 0s;}
.header-height .menu>li.sub>ul.sub-menu{background:rgba(255,255,255,1);transition: all 0.5s ease 0s;}
.header-height .menu>li.sub:hover ul.sub-menu{top:80px;transition: all 0.5s ease 0s;}
@media screen and (max-width:1400px){
    .menu>li>a{padding:39.71px 12px; }
    .header-height .menu>li>a{padding:24.71px 12px;}
}
@media screen and (max-width:1024px){
	#menu{display:none;}
	.slicknav_menu{display:block;background: #ffffff;border-bottom: 1px #dddddd solid;position: fixed;top: 0;left: 0;width: 100%;z-index: 10000;}
}

/** 首頁banner **/
.i-banner-main{background:#99a411 ; height: calc(100vh + 4vw);position: relative;overflow: hidden;padding: 0 0 4vw 0;}
.i-banner-main:after{content: "";display: block;width: 100%;height: 100%;background: linear-gradient(to top, rgba(0,0,0,0) 62%, rgba(0,0,0,.5));position: absolute;top: 0;left: 0;z-index: 1;}
.i-banner{height: 100vh;}
.i-banner img{width: 100%;height: 100%;object-fit: cover;object-position: center bottom;animation: i-banner-photo ease-in-out 15s infinite;}
.i-banner-content{color: #ffffff;width: 100%;height: 100%; text-align: center;margin: 0;position: absolute;top: 0;left: 0;z-index: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;padding:125px 15px calc(15px + 4vw) 15px;}
.i-banner-content .i-banner-title{font-size: 100px; font-weight: 700;padding: 0;margin: 0 0 25px 0;line-height: 1.1;animation: i-banner-title ease-in-out 5s infinite 1s;}
.i-banner-content .i-banner-info{font-size: 30px; font-weight: 400;padding: 0;margin:  0;line-height: 1.4;}
.ml10 {position: relative;}
.ml10 .text-wrapper {position: relative;display: inline-block;padding-top: 0.2em;padding-right: 0.05em;padding-bottom: 0.1em;overflow: hidden;}
.ml10 .letter {display: inline-block;transform-origin: 0 0;}
@keyframes i-banner-title
{
0% {text-shadow: 0 0 0px rgba(255,255,255,0);}
50%{text-shadow: 0 0 15px rgba(255,255,255,.7);}
100%{text-shadow: 0 0 0px rgba(255,255,255,0);}
}
@-moz-keyframes i-banner-title /* Firefox */
{
0% {text-shadow: 0 0 0px rgba(255,255,255,0);}
50%{text-shadow: 0 0 15px rgba(255,255,255,.6);}
100%{text-shadow: 0 0 0px rgba(255,255,255,0);}
}
@-webkit-keyframes i-banner-title /* Safari 和 Chrome */
{
0% {text-shadow: 0 0 0px rgba(255,255,255,0);}
50%{text-shadow: 0 0 15px rgba(255,255,255,.6);}
100%{text-shadow: 0 0 0px rgba(255,255,255,0);}
}
@-o-keyframes i-banner-title /* Opera */
{
0% {text-shadow: 0 0 0px rgba(255,255,255,0);}
50%{text-shadow: 0 0 15px rgba(255,255,255,.6);}
100%{text-shadow: 0 0 0px rgba(255,255,255,0);}
}
@keyframes i-banner-photo
{
0% {transform: scale(1);}
50%{transform: scale(1.05);}
100%{transform: scale(1);}
}
@-moz-keyframes i-banner-photo /* Firefox */
{
0% {transform: scale(1);}
50%{transform: scale(1.05);}
100%{transform: scale(1);}
}
@-webkit-keyframes i-banner-photo /* Safari 和 Chrome */
{
0% {transform: scale(1);}
50%{transform: scale(1.05);}
100%{transform: scale(1);}
}
@-o-keyframes i-banner-photo /* Opera */
{
0% {transform: scale(1);}
50%{transform: scale(1.05);}
100%{transform: scale(1);}
}
@media screen and (max-width:1400px){
    .i-banner-content .i-banner-title{font-size: 80px;margin: 0 0 20px 0;}
    .i-banner-content .i-banner-info{font-size: 24px;}
}
@media screen and (max-width:1024px){
    .i-banner-main{ height: calc(60vh + 50px);margin: 61px 0 0 0;padding: 0 0 50px 0;}
    .i-banner{height: 60vh;}
    .i-banner-content{padding:15px 15px 65px 15px;}
}
@media screen and (max-width:767px){
    .i-banner-content .i-banner-title{font-size: 60px;margin: 0 0 15px 0;}
    .i-banner-content .i-banner-info{font-size: 20px;}
}
@media screen and (max-width:575px){
    .i-banner-content .i-banner-title{font-size: 40px;}
    .i-banner-content .i-banner-info{font-size: 18px;}
}
@media screen and (max-width:374px){
    .i-banner-content .i-banner-title{font-size: 34px;}
    .i-banner-content .i-banner-info{font-size: 16px;}
}

/** 配置 **/
.warpper{}
.main{}
.photo-main{overflow: hidden;}
.photo{background-color:#ffffff;background-position: center center;background-repeat: no-repeat;background-size: contain;}
.i-title-main{margin: 0 0 15px 0;}
.i-title-main .i-title{font-size: 40px; font-weight: 700;padding: 0;margin: 0;line-height: 1.2;color: #ffffff;}
.more{display: flex;font-size: 18px; color: #ffffff;margin:40px 0 0 0 ;}
.more a{display: flex;align-items: center;justify-content: center; color: #ffffff;background: #00b050;border: 1px #ffffff solid;border-radius: 0; padding: 0 0 0 20px;overflow: hidden;}
.more a:hover{color: #00b050;background: #ffffff;border-radius: 3px;}
.more a i{width: 48px;height: 48px;margin: 0 0 0 10px; background: #00b050;border: 1px #00b050 solid;display: flex;align-items: center;justify-content: center;border-radius: 0;transition: all 0.5s ease 0s;}
.more a i img{width: 10px; height: 10px;filter: brightness(100); transition: all 0.5s ease 0s;}
.more a:hover i{ background:#00b050;border-radius: 3px;transition: all 0.5s ease 0s;}
@media screen and (max-width:1024px){
    .i-title-main{margin: 0 0 10px 0;}
    .i-title-main .i-title{font-size: 32px; }
    .i-title-main .i-title br{display: none;}
    .more{font-size: 16px;margin:30px 0 0 0 ;}
    .more a{padding: 0 0 0 15px;}
    .more a i{width: 44px;height: 44px;margin: 0 0 0 8px;}
}

/** 首頁關於我們 **/
.i-about-main{padding: 0 15px 30px 15px;margin: -4vw 0 0 0;position: relative;z-index: 9;overflow:hidden;}
.i-about-main:after{content: "";display: block;width: 100%;height:62%;background: #99a411;position: absolute;top: 4vw;left: 0;z-index: -1;}
.i-about{max-width: 1600px; margin: 0 auto;display: flex;flex-direction: row-reverse;}
.i-about .i-about-photo{flex: 1.05;margin: 0 6.6vw 0 0;position: relative;z-index: 1;}
.i-about .i-about-photo:after{content: "";display: block;width:100%;height: 100%;background: rgba(255,255,255,.2);border: 1px #99a411 solid;position: absolute;top: 30px; left: 30px;z-index: -1;border-radius: 50px 0 250px 0;}
.i-about .i-about-photo img{object-fit: cover;object-position: center;width: 100%;height: 100%; border-radius: 50px 0 250px 0;}
.i-about .i-about-content{flex: 1;display: flex;flex-direction: column;justify-content: center;}
.i-about .i-about-content .i-about-info{color: #ffffff;}
.i-about .i-about-content .i-about-info .i-about-note{font-size: 20px; font-weight: 600;margin: 0 0 12px 0;}
.i-about .i-about-content .i-about-info .i-about-dep{ overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
.i-about .more{color: #99a411;justify-content: flex-end;}
.i-about .more a{ color: #99a411;background: #ffffff;border: 1px #99a411 solid;}
.i-about .more a i{background: #ffffff;border: 1px #ffffff solid;}
.i-about .more a:hover{color: #99a411;}
.i-about .more a i img{filter: brightness(1); }
.i-about .more a:hover i{ background:#99a411;}
.i-about .more a:hover i img{filter:brightness(100);transition: all 0.5s ease 0s;}
@media screen and (max-width:1400px){
    .i-about-main:after{height:70%;}
}
@media screen and (max-width:1024px){
    .i-about-main{margin: -50px 0 0 0;padding: 0 15px 15px 15px;}
    .i-about-main:after{top:50px;height:66%;}
    .i-about{display: block;}
    .i-about .i-about-photo{flex: initial;width: 100%; margin:30px 0 0 0;}
    .i-about .i-about-photo:after{top: 15px; left:15px;border-radius: 20px 0 80px 0;}
    .i-about .i-about-photo img{border-radius: 20px 0 80px 0;}
    .i-about .i-about-content{flex: initial;width: 100%;}
    .i-about .i-about-content .i-about-info .i-about-note{font-size: 18px;margin: 0 0 5px 0;}
}

/** 首頁影片 **/
.i-video-main{}
.i-video{}
.video-content {height: 200vh;position: relative;}
.video-info {position: sticky;top: 0;height: 100vh;z-index: 10;}
.video-info video {width: 100%;height: 100%;object-fit: cover;object-position: center;position: absolute;top: 0;left: 0;z-index: 0;}
.video-info svg.mask-layer, .video-info svg.overlay-layer {position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;}
.video-info svg.overlay-layer circle {fill: none;stroke-width: 1;}

/** 首頁最新消息 **/
.i-news-main{padding: 7% 15px;background: url("../images/news_bg.jpg")no-repeat center center fixed;background-size: cover;}
.i-news{max-width: 1600px;margin: 0 auto;}
.i-news .i-title-main{text-align: center;}
.i-news .more{justify-content: center;}
.i-news>ul{list-style:none; padding:0px; margin:0;display: flex;flex-wrap: wrap;}
.i-news>ul>li{padding:0; margin: 15px;width: calc(100%/2 - 30px); }
.i-news>ul>li a{display:flex; padding:20px 0;background: rgba(255,255,255,.9);position: relative;z-index: 1;}
.i-news>ul>li a:after{content: "";display: block;width: 0%;height: 100%;background: #ffffff; position: absolute;top: 0;left: 0;z-index: -1;transition: all 0.5s ease 0s;}
.i-news>ul>li a:hover{}
.i-news>ul>li a:hover:after{width: 100%;transition: all 0.5s ease 0s;}
.i-news>ul>li .i-news-date{width: 164px; font-size:30px ;color: #00b050;font-weight: 600;padding: 0 30px;border-right: 1px #cccccc solid;line-height: 1.4;display: flex;flex-direction: column;justify-content: center;}
.i-news>ul>li .i-news-date span{font-size:16px ;color: #222222;font-weight: 400;width: 40px;width: 100%;}
.i-news>ul>li .i-news-content{flex: 1; padding: 0 40px;display: flex;flex-direction: column;justify-content: center;}
.i-news>ul>li .i-news-content h3{padding: 0;margin: 0;line-height: 1.8;font-size: 17px; color: #222222;font-weight: 400;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.i-news>ul>li:hover .i-news-date{border-right:1px #00b050 solid;}
@media screen and (max-width:1024px){
    .i-news-main{padding: 40px 15px;background: url("../images/news_bg.jpg")no-repeat center center;background-size: cover;}
    .i-news>ul>li{margin: 10px 0;width: 100%; }
    .i-news>ul>li a{padding:15px 0;}
    .i-news>ul>li .i-news-date{width: 124px; font-size:24px ;padding: 0 20px;}
    .i-news>ul>li .i-news-date span{font-size:15px ;}
    .i-news>ul>li .i-news-content{padding: 0 20px;}
}
@media screen and (max-width:575px){
    .i-news>ul>li a{display:block;padding: 5px 15px;}
    .i-news>ul>li .i-news-date{width: 100%;border-right:0;border-bottom: 1px #cccccc solid;padding:10px 0;}
    .i-news>ul>li .i-news-content{flex: initial;width: 100%;padding:10px 0;}
    .i-news>ul>li:hover .i-news-date{border-right: 0;border-bottom:1px #00b050 solid;}
}

/** 首頁產品介紹 **/
.i-pro-main{padding: 7% 15px}
.i-pro{max-width: 1600px; margin: 0 auto;display: flex;align-items: center;}
.i-pro .i-title-main .i-title{color: #222222;}
.i-pro .more a{border: 1px #00b050 solid;}
.i-pro .more a:hover i{border: 1px #ffffff solid;}
.i-pro .i-pro-title{flex: 1;margin: 0 4vw 0 0;}
.i-pro .i-pro-title .i-pro-note{font-size: 20px;color: #444444;line-height: 1.6;margin:25px 0;}
.i-pro .i-pro-content{flex: 3;}
.i-pro .i-pro-content>ul{list-style: none;padding: 0;margin: 0;display: flex;}
.i-pro .i-pro-content>ul>li{padding: 0;margin: 10px;width: calc(100%/3 - 20px);transition: all 0.5s ease 0s;}
.i-pro .i-pro-content>ul>li a{display: block;position: relative;}
.i-pro .i-pro-content>ul>li a:hover{}
.i-pro .i-pro-content>ul>li .photo-main{;}
.i-pro .i-pro-content>ul>li .photo{background-size: cover;}
.i-pro .i-pro-content>ul>li .i-pro-info{background: rgba(0,0,0,.4);width: 100%;height: 100%;height: 472.31px;display: flex;align-items: center;justify-content: center;text-align: center;padding: 15px;}
.i-pro .i-pro-content>ul>li .i-pro-info h3{padding: 0;margin: 0;font-size: 30px; font-weight: 700;color: #ffffff;line-height: 1.4;}
.i-pro .i-pro-content>ul>li:hover {width: calc(100%/3 - 20px);transition: all 0.5s ease 0s;}
.i-pro .i-pro-content>ul>li:hover .i-pro-info{background: rgba(0,0,0,.7);transition: all 0.5s ease 0s;}
.i-pro .i-pro-content>ul>li.active {width: calc(100%/2 - 20px);transition: all 0.5s ease 0s;}
.i-pro .i-pro-content>ul>li.active .i-pro-info{background: rgba(0,0,0,.7);transition: all 0.5s ease 0s;}
@media screen and (max-width:1024px){
    .i-pro-main{padding: 40px 15px;}
    .i-pro{display: block;}
    .i-pro .i-pro-title{flex:initial;width: 100%; margin: 0 0 20px 0;}
    .i-pro .i-pro-title .i-pro-note{font-size: 18px;margin: 0;}
    .i-pro .i-pro-content{flex:initial;width: 100%; }
    .i-pro .i-pro-content>ul>li .i-pro-info h3{font-size: 24px; }
}
@media screen and (max-width:575px){
    .i-pro .i-pro-content>ul{flex-wrap: wrap;}
    .i-pro .i-pro-content>ul>li{margin: 10px 0;width:100%;}
    .i-pro .i-pro-content>ul>li .i-pro-info{height: 300px;}
    .i-pro .i-pro-content>ul>li.active {width:100%;}
}

/** 內頁banner **/
.inside-banner{ padding:calc(110px + 6%) 15px 6% 15px;background-position: center center;background-repeat: no-repeat;background-size: cover;overflow: hidden;position: relative;}
.inside-banner:after{content: "";display: block;width: 100%;height: 100%;background: linear-gradient(to top, rgba(0,0,0,0) 62%, rgba(0,0,0,.5));position: absolute;top: 0;left: 0;z-index: 1;}
.banner{max-width:1600px; font-size:18px; color:#ffffff; margin:0 auto; padding:0;text-align: center;position: relative;z-index: 2;}
.banner .banner-title{font-size: 60px; font-weight: 700;padding: 0;margin: 0;line-height: 1.2;color: #ffffff;letter-spacing: 3px;}
@media screen and (max-width:1024px){
    .inside-banner{ padding:101px 0 40px 0;}
    .banner .banner-title{font-size: 40px;letter-spacing: 2px; }
}
@media screen and (max-width:767px){
    .inside-banner{ padding:91px 0 30px 0;}
    .banner .banner-title{font-size: 30px;letter-spacing: 0px; }
}

/* banner影片區塊 */
.banner-video {position: relative;height: 100vh;overflow: hidden;}
.banner-video:after{content: "";display: block;width: 100%;height: 100%;background: linear-gradient(to top, rgba(0,0,0,0) 38%, rgba(0,0,0,.5));position: absolute;top: 0;left: 0;z-index: 1;}
.banner-video video {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);min-width: 100%;min-height: 100%;object-fit: cover;z-index: -1;}
.section {height: 100vh;display: flex;align-items: center;justify-content: center;font-size: 2rem;position: relative;z-index: 2; padding:calc(110px + 6%) 15px 6% 15px;}
@media screen and (max-width:1024px){
    .section{ padding:101px 0 40px 0;}
}
@media screen and (max-width:767px){
    .section{ padding:91px 0 30px 0;}
}

/** Breadcrumb **/
nav[aria-label="breadcrumb"]{padding:0;font-size: 14px;position: relative;z-index: 1;font-weight: 300;margin: 5px 0 0 0;}
.breadcrumb{display:flex; flex-wrap:wrap;justify-content:center; width:100%; margin:0 ; padding:0; list-style:none; background-color:transparent;}
.breadcrumb-item{padding-left:0;}
.breadcrumb-item + .breadcrumb-item::before{display:inline-block; padding-right:0.5rem; color:#ffffff; content:"/";}
.breadcrumb-item a{display: inline-block;text-decoration:none; color:#ffffff;}
.breadcrumb-item a:hover{color:#deff27; text-decoration:none;}
.breadcrumb-item.active{color:#ffffff;}

/** 內頁架構 **/
.content-body-main{padding: 4% 15px;overflow: hidden;}
.content-body{max-width:1600px; margin:0 auto; background:#ffffff;}
.page-title{font-size:30px; color:#222222;font-weight: 500;line-height: 1.4; padding:4px 0 4px 60px; margin:0 0 20px 0;background: url("../images/title-icon.svg")no-repeat left top ;background-size: 50px;}
.page-main{font-size:17px; color:#222222;}
.page-main a{color:#666666;}
.page-main a:hover{color:#00b050;}
.font001{margin: 40px 0 20px 0;font-size: 24px;background: #00b050;color: #ffffff;display: table;font-weight: 500;line-height: 1.4;padding:10px 20px 10px 0;border-radius: 0 50px 50px 0;position: relative;}
.font001:after{content: "";display: block;width: 100%;height:100%;background: #00b050;position: absolute;left:-100%;top:0;}
.font002{margin: 30px 0 20px 0;font-size: 20px;color: #ff0000; font-weight: 400;line-height: 1.4;position: relative;padding: 0 0 15px 0;}
.font002:after{content: "";display: block;width: 8px;height:8px;background: #ff0000;position: absolute;left:0;bottom: 0;}
.font003{margin: 0 auto 20px auto;font-size: 24px;background: #00b050;color: #ffffff;display: table;font-weight: 500;line-height: 1.4;padding:10px 20px;border-radius:50px;text-align: center;}
.content{display: flex;}
.content .content-info{flex: 1;}
.content .content-photo{flex: 1; margin: 0 0 0 5vw;display: flex;align-items: flex-end;}
.content .content-photo .photo001{flex: 1.3; margin: 0;height: 100%;}
.content .content-photo .photo002{flex: 1; margin: 0 0 0 30px;height: 100%;}
.content .content-photo img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.content-video{position: relative;padding-bottom: 56.25%;padding-top: 0px;height: 0;overflow: hidden;margin: 30px 0;}
.content-video video {position: absolute;top:0;left: 0;width: 100%;height: 100%;}
@media screen and (max-width:1024px){
    .content-body-main{padding: 30px 15px;}
    .page-title{font-size:24px;padding:4px 0 4px 50px; background: url("../images/title-icon.svg")no-repeat left top ;background-size: 40px;}
    .font001{margin: 30px 0 15px 0;font-size: 20px;}
    .font002{margin: 20px 0 15px 0;font-size: 18px;}
    .font002:after{width:6px;height:6px;}
    .font003{font-size: 20px;}
    .content{display:block;}
    .content .content-info{flex: initial;width: 100%;}
    .content .content-photo{flex: initial;width: 100%;margin:30px 0 0 0;}
    .content .content-photo .photo002{margin: 0 0 0 15px;}
    .content-video{margin: 20px 0;}
}

/** 左邊分類 **/
.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-main{padding: 0 15px;background: #f3f3f3;position: relative;z-index: 2;}
.in-left-menu{}
.in-left-menu>ul{margin:0; padding:0; list-style:none;display: flex;;flex-wrap: wrap;justify-content: center;}
.in-left-menu>ul>li{ color:#444444; padding:0;margin:0;position: relative;}
.in-left-menu>ul>li>a{color:#444444; display:block; padding:20px;border-bottom:1px #cccccc solid;position: relative;}
.in-left-menu>ul>li>a:after{content: "";display: block;width: 20px; height: 4px; background: #444444;position: absolute;bottom: -3px;left: 0;z-index: 1; transition: all 0.5s ease 0s;}
.in-left-menu>ul>li>a:hover:not(.current){color: #ff0000;position: relative;z-index: 10;}
.in-left-menu>ul>li>a:hover:not(.current):after{background: #ff0000; width: 100%;transition: all 0.5s ease 0s;}
.in-left-menu>ul>li>.current{ background: #ffffff;position: relative;color: #00b050;z-index: 10;}
.in-left-menu>ul>li>.current:after{content: "";display: block;width: 40px; height: 4px; background: #00b050;position: absolute;bottom: -3px;left: 0;}
.in-left-menu>ul>li:hover>ul{display: block;}
.in-left-menu>ul>li>ul{margin:0; padding:0; list-style:none;border:1px #cccccc solid;background: #f3f3f3; position: absolute;top: 70.59px;left: calc(50% - 125px);width: 250px;display: none;}
.in-left-menu>ul>li>ul>li{border-top:0;padding: 0; font-size: 16px; color: #666666;text-align: center;border-bottom: 1px #cccccc dashed;position: relative;}
.in-left-menu>ul>li>ul>li:last-of-type{border-bottom: 0;}
.in-left-menu>ul>li>ul>li>.current{color:#00b050;}
.in-left-menu>ul>li>ul>li a{ color:#666666;padding:10px 15px; display:block;}
.in-left-menu>ul>li>ul>li a:hover:not(.current){background: #ffffff; color:#ff0000; }
.in-left-menu>ul>li>ul>li:hover>ul{display: block;}
.in-left-menu>ul>li>ul>li>ul{margin:0; padding:0; list-style:none;border:1px #cccccc solid;background: #ffffff; position: absolute;top: -1px;right: 100%;width: 250px;display: none;}
.in-left-menu>ul>li>ul>li>ul>li{border-top:0;padding: 0; font-size: 16px; color: #666666;text-align: center;border-bottom: 1px #cccccc dashed;}
.in-left-menu>ul>li>ul>li>ul>li:last-of-type{border-bottom: 0;}
.in-left-menu>ul>li>ul>li>ul>li>.current{color:#00b050;}
.in-left-menu>ul>li>ul>li>ul>li a{ color:#666666;padding:10px 15px; display:block;}
.in-left-menu>ul>li>ul>li>ul>li a:hover:not(.current){background: #f3f3f3; color:#ff0000; }
.left-beautify img{width:100%; height:auto; margin-top:0px;}
.m_classLink{display:none;}
@media screen and (max-width:991px){
	.classBox{padding:0;}
	ul.classLink{display:none;}
	.m_classLink{display:block; position:relative; background-color:#ffffff; border:1px solid #00b050;}
	.m_classLink a.main{display:block; background:none; font-size:17px; color:#222222; position:relative; padding:10px 65.59px 10px 15px;}
	.m_classLink a.main i{display:block; font-size:17px; background:#00b050; width:50.59px; height:100%; text-align:center; color:#FFF; line-height:50.59px; position:absolute; right:0; top:0;}
	.m_classLink a.main b{font-weight: 400;}
	.m_classLink ul{display:none; margin:0; padding:0; list-style:none; width:100%; background:#FFF; border:1px solid #00b050; position:absolute; left:0; top:100%; z-index:99; box-sizing:border-box;}
	.m_classLink ul li{margin:0; padding:0;}
	.m_classLink ul li a{display:block; padding:10px 15px; border-top:1px solid #00b050; font-size:17px; color:#222;}
	.m_classLink ul li:first-child a{border:none;}
	.m_classLink ul li a:hover{background:#00b050;color: #ffffff;}
	.m_classLink ul li ul{display:block;background: #f3f3f3; margin:0 ; padding:0; list-style:none; width:100%; border:0; position:inherit; left:inherit; top:inherit; z-index:999; box-sizing:border-box;}
    .m_classLink ul li ul>li{font-size: 16px; color: #666666;}
    .m_classLink ul li ul>li a{border-top:0;border-bottom:1px #cccccc dashed;font-size: 16px; color: #666666;}
    .m_classLink ul li ul>li:first-of-type a{border-bottom:1px #cccccc dashed;}
    .m_classLink ul li ul>li:last-of-type a{border-bottom:0;}
    .m_classLink ul li ul>li a:hover{color:#00b050;background: none;}
    .m_classLink ul li ul>li ul{background: #ffffff;}
    .m_classLink ul li ul>li ul>li:last-of-type a{border-bottom:1px #cccccc dashed;}
    .m_classLink ul li ul>li ul>li a:hover{color:#00b050;background: none;}
    .in-left-menu-main{padding: 15px;}
	.left-menu-title{display:none;}
	.left-beautify{display:none;}
}

/** 公司介紹 **/
.company{display: flex;flex-wrap: wrap;}
.company-content{width: calc(100%/2 - 30px);margin: 15px;}
.company-content02{width: calc(100%/1 - 30px);}
.company-content>ul{list-style: none;padding: 0;margin: 0;display: block;}
.company-content>ul>li{padding:15px 15px;margin:0;width:100%;border-left: 2px #444444 solid;background: #fffffff;}
.company-content>ul>li:nth-child(even){background: #f6f8ef;}
.company-content>ul>li .job-title{color: #666666;}
.company-content>ul>li .team-name{color: #222222;font-weight: 500;font-size: 18px;}
@media screen and (max-width:1024px){
	.company-content{width:100%;margin:10px 0;}
    .company-content>ul>li .team-name{font-size: 17px;}
}

/** 董事會 **/
.directors{}
.directors>ul{list-style: none;padding: 0;margin: 0;}
.directors>ul>li{padding: 0;margin: 0;display: flex;flex-wrap: wrap; border-bottom: 1px #cccccc solid;}
.directors>ul>li .directors-title{width: 100%; color: #00b050;font-weight: 500;font-size: 20px;padding: 15px;background: #f6f8ef;}
.directors>ul>li .directors-title span{color: #666666;font-weight: 400;display: block;width: 100%;font-size: 17px;}
.directors>ul>li .directors-info{flex: 1;padding: 15px;}
.directors>ul>li .directors-info>ul{list-style: none;padding: 0;margin: 0;}
.directors>ul>li .directors-info>ul>li{padding: 0;margin: 0;display: flex;}
.directors>ul>li .directors-info>ul>li .directors-info-title{width: auto;margin: 0 15px 0 0;color: #222222;font-weight: 500;}
.directors>ul>li .directors-info>ul>li .directors-info-content{flex: 1;}
.directors>ul>li .directors-content{flex: 2;color: #444444;padding: 15px;}
@media screen and (max-width:1024px){
	.directors>ul>li{display:block;}
    .directors>ul>li .directors-title{font-size: 18px;}
    .directors>ul>li .directors-info{flex:initial;width: 100%;border-bottom: 1px #cccccc dashed;}
    .directors>ul>li .directors-content{flex:initial;width: 100%;}
}

/** 里程碑 **/
.history{margin: 40px 0 0 0;}
.history>ul{list-style: none;padding: 0;margin: 0;}
.history>ul>li{padding: 0;margin: 0 calc(50% - 80px) 0 0;display: flex;flex-direction: row-reverse;}
.history>ul>li:nth-child(even){margin: 0 0 0 calc(50% - 80px);flex-direction: row;}
.history>ul>li .history-year{width: 120px; height: 120px;font-weight: 500;font-size: 30px; background: #00b050;color: #ffffff;display: flex;align-items: center;justify-content: center;border-radius: 120px;margin:-15px 20px 30px 20px;position: relative;z-index: 1;padding: 10px;}
.history>ul>li .history-year:after{content: "";display: block;width: 0;height: 0;border-style: solid;border-width: 6px 10px 6px 0;border-color: transparent #00b050 transparent transparent;position: absolute;left: -8px;top: calc(50% - 6px);}
.history>ul>li:nth-child(even) .history-year:after{border-width: 6px 0 6px 10px;border-color: transparent transparent transparent #00b050;right: -8px;left: inherit;}
.history>ul>li .history-content{flex: 1;border-right: 1px #00b050 solid;margin: 0 -80.5px 15px 0;padding: 15px 80.5px 15px 15px;background: #f6f8ef;}
.history>ul>li:nth-child(even) .history-content{border-right: 0;border-left: 1px #00b050 solid;margin: 0 0 15px -80.5px;padding: 15px 15px 15px 80.5px;}
@media screen and (max-width:1024px){
	.history>ul>li{margin: 0;}
    .history>ul>li:nth-child(even){margin: 0;}
    .history>ul>li .history-year{width: 100px; height: auto;font-size: 24px;margin:-10px 0 20px 0;border-radius: 5px;}
    .history>ul>li .history-content{border-right: 0;margin: 0 -50px 30px 0;padding: 15px 75px 15px 15px;}
    .history>ul>li:nth-child(even) .history-content{border-left:0;margin: 0 0 30px -50px;padding: 15px 15px 15px 75px;}
}
@media screen and (max-width:767px){
    .history{margin:15px 0 0 0;}
	.history>ul>li{display: block;margin: 15px 0;}
    .history>ul>li .history-year{width:auto; margin:0 0 -21px 0 ;padding: 0 15px;display: table;}
    .history>ul>li .history-year:after{border-width: 6px 0 6px 10px;border-color: transparent transparent transparent #00b050;right: -8px;left: inherit;}
    .history>ul>li .history-content{margin: 0;padding:36px 15px 15px 15px;}
    .history>ul>li:nth-child(even) .history-content{margin: 0 ;padding: 36px 15px 15px 15px;}
}

/** 投資人關係 **/
.investors{}
.investors>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.investors>ul>li{width: calc(100%/3 - 30px);padding: 0;margin: 15px;}
.investors>ul>li a{display: block;border: 1px #afd135 solid;border-radius: 3px;background: #ffffff;padding: 15px 15px 15px 50px;position: relative;height: 100%;}
.investors>ul>li a:before{content: "";display: block;width: 20px; height: 100%;background: #afd135;position: absolute;top: 0;left: 15px;transition: all 0.5s ease 0s;}
.investors>ul>li a:after{content: "";display: block;width: 0;height: 0;border-style: solid;border-width: 0 10px 10px 10px;border-color: transparent transparent #ffffff transparent;position: absolute;bottom: -20px;left: 15px;transition: all 0.5s ease 0s;}
.investors>ul>li a:hover{color: #00b050;border: 1px #00b050 solid;}
.investors>ul>li a:hover:before{height: 40px;background: #00b050;transition: all 0.5s ease 0s;}
.investors>ul>li a:hover:after{bottom: calc(100% - 40px);transition: all 0.5s ease 0s;}
.investors-pic{margin: 0 0 30px 0;}
.investors-pic>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.investors-pic>ul>li{padding: 0;margin: 15px;width: calc(100%/3 - 30px);}
.investors-pic>ul>li .photo-main{border-radius: 10px;overflow: hidden;border: 10px #ffffff solid;box-shadow: 0 0 0 1px #cccccc, 5px 5px 0 0 #cccccc;}
.investors-pic>ul>li .photo{background-size: cover;}
@media screen and (max-width:1024px){
	.investors>ul>li{width: calc(100%/2 - 20px);margin: 10px;}
    .investors-pic>ul>li{margin: 10px;width: calc(100%/3 - 20px);}
}
@media screen and (max-width:767px){
	.investors>ul>li{width: 100%;margin: 10px 0;}
    .investors-pic>ul>li{width: calc(100%/2 - 10px);margin: 5px;}
    .investors-pic>ul>li .photo-main{border: 5px #ffffff solid;box-shadow: 0 0 0 1px #cccccc, 3px 3px 0 0 #cccccc;}
}

/** 最新消息 **/
.news{}
.news>ul{list-style:none; padding:0px; margin:0;display: flex;flex-wrap: wrap;}
.news>ul>li{padding:0; margin: 15px;width: calc(100%/2 - 30px); }
.news>ul>li a{display:flex; padding:20px 0;background: #f6f8ef;position: relative;z-index: 1;}
.news>ul>li a:after{content: "";display: block;width: 0%;height: 100%;background: #ffffff; position: absolute;top: 0;left: 0;z-index: -1;transition: all 0.5s ease 0s;}
.news>ul>li a:hover{box-shadow: 0 10px 15px 0 rgba(0,0,0,.2);position: relative;z-index: 1;}
.news>ul>li a:hover:after{width: 100%;transition: all 0.5s ease 0s;}
.news>ul>li .news-date{width: 164px; font-size:30px ;color: #00b050;font-weight: 600;padding: 0 30px;border-right: 1px #cccccc solid;line-height: 1.4;display: flex;flex-direction: column;justify-content: center;}
.news>ul>li .news-date span{font-size:16px ;color: #222222;font-weight: 400;width: 40px;width: 100%;}
.news>ul>li .news-content{flex: 1; padding: 0 40px;display: flex;flex-direction: column;justify-content: center;}
.news>ul>li .news-content h3{padding: 0;margin: 0;line-height: 1.8;font-size: 17px; color: #222222;font-weight: 400;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.news>ul>li:hover .news-date{border-right: 1px #00b050 solid;}
.news-detail-date {width: auto;background:#00b050;color: #ffffff; line-height: 1.4;margin: 20px 0;padding:5px 15px;border-radius: 5px;display: table;text-transform: uppercase;}
@media screen and (max-width:1024px){
    .news>ul>li{margin: 10px 0;width: 100%; }
    .news>ul>li a{padding:15px 0;}
    .news>ul>li .news-date{width: 124px; font-size:24px ;padding: 0 20px;}
    .news>ul>li .news-date span{font-size:15px ;}
    .news>ul>li .news-content{padding: 0 20px;}
}
@media screen and (max-width:575px){
    .news>ul>li a{display:block;padding: 5px 15px;}
    .news>ul>li .news-date{width: 100%;border-right:0;border-bottom: 1px #cccccc solid;padding:10px 0;}
    .news>ul>li .news-content{flex: initial;width: 100%;padding:10px 0;}
    .news>ul>li:hover .news-date{border-right: 0;border-bottom:1px #00b050 solid;}
}

/** 產品搜尋 **/
.search{padding:0;}
.search-input{padding:0px 0 10px 0; position:relative; color:#333;}
.search-input img{position:absolute; right:0; top:0px;}
.search input{background:#eeeeee; font-size:16px; color:#333; padding:5px 66px 5px 15px; width:100%; border:0; margin:0; vertical-align:middle; min-height:31px; font-family:"Microsoft JhengHei";}
.search img{vertical-align:middle;}
.pro-search-info{font-size:18px; color:#64691F; line-height:1.5em; border-bottom:1px #CCC dotted; margin-bottom:20px; text-align:center; padding-bottom:10px;}

/** 產品列表介紹 **/
.pro-store-info{font-size:16px; color:#666; padding:10px; margin-bottom:20px;}
.pro{margin: 30px 0;}
.pro>ul{list-style: none;padding: 0;margin: 0;display: flex;}
.pro>ul>li{padding: 0;margin: 10px;width: calc(100%/3 - 20px);transition: all 0.5s ease 0s;}
.pro>ul>li a{display: block;position: relative;}
.pro>ul>li a:hover{}
.pro>ul>li .photo-main{;}
.pro>ul>li .photo{background-size: cover;}
.pro>ul>li .pro-info{background: rgba(0,0,0,.4);width: 100%;height: 100%;height: 500px;display: flex;align-items: center;justify-content: center;text-align: center;padding: 15px;}
.pro>ul>li .pro-info h3{padding: 0;margin: 0;font-size: 30px; font-weight: 700;color: #ffffff;line-height: 1.4;}
.pro>ul>li:hover {width: calc(100%/3 - 20px);transition: all 0.5s ease 0s;}
.pro>ul>li:hover .pro-info{background: rgba(0,0,0,.7);transition: all 0.5s ease 0s;}
.pro>ul>li.active {width: calc(100%/2 - 20px);transition: all 0.5s ease 0s;}
.pro>ul>li.active .pro-info{background: rgba(0,0,0,.7);transition: all 0.5s ease 0s;}
@media screen and (max-width:1024px){
    .pro{flex:initial;width: 100%;margin: 20px 0; }
    .pro>ul>li .pro-info h3{font-size: 24px; }
}
@media screen and (max-width:575px){
    .pro>ul{flex-wrap: wrap;}
    .pro>ul>li{margin: 10px 0;width:100%;}
    .pro>ul>li .pro-info{height: 300px;}
    .pro>ul>li.active {width:100%;}
}

/** 產品明細 **/
.pro-detaile-title{font-size:24px; color:#222222; padding:10px 20px; margin:0 0 20px 0; font-weight:500;background: #f6f8ef;}
.pro-pic{margin: 0 0 30px 0;}
.pro-pic>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;}
.pro-pic>ul>li{padding: 0;margin: 15px;width: calc(100%/4 - 30px);text-align: center;}
.pro-pic>ul>li .photo-main{border-radius: 10px;overflow: hidden;border: 10px #ffffff solid;box-shadow: 0 0 0 1px #cccccc, 5px 5px 0 0 #cccccc;}
.pro-pic>ul>li .photo{background-size: cover;}
.pro-pic>ul>li .pro-pic-info{margin: 20px 0;}
.pro-pic>ul>li .pro-pic-info h3{padding: 0;margin: 0;font-size: 18px;font-weight: 500;line-height: 1.4;}
.pro-detaile-box{display:flex; flex-wrap:wrap; margin:0 0 15px 0;}
.pro-detaile-photo-box{width:calc(50% - 25px); margin:0 25px 0 0;}
.pro-detaile-spe-box{width:50%; position:relative; padding-bottom:210px;}
.pro-detaile .pro-photo-box{background:#fff; width:100%; margin:0; padding:0;}
.pro-detaile .pro-photo-box img{width:100%; height:auto;}
.pro-list-time{background:url(../images/time.png) left center no-repeat; font-size:12px; color:#968c69; padding-left:20px;}
.pro-specification{font-size:16px; color:#333; position:relative;}
.cart-info{position:absolute; width:100%; bottom:0;}
.cart-info .price{font-size:22px; font-weight:bold; color:#F00; vertical-align:middle; display:block; text-align:right;}
.cart-info .price.origin{font-size:smaller; color:#666; text-decoration:line-through;}
.cart-info .price.special{font-size:smaller; color:#000;}
h3.pro-introduce{background:#999; font-weight:normal; border-left:5px #111111 solid; padding:8px 10px; font-size:20px; color:#fff; margin:25px 0 15px 0;}
.pro-content{padding:0px 0; font-size:16px; color:#333; clear:both;}
@media screen and (max-width:1024px){
    .pro-detaile-title{font-size:20px; padding:10px 15px;}
    .pro-pic>ul>li{margin: 10px;width: calc(100%/3 - 20px);}
    .pro-pic>ul>li .pro-pic-info{margin: 10px 0;}
    .pro-pic>ul>li .pro-pic-info h3{font-size: 17px;}
}
@media screen and (max-width:767px){
	.pro-detaile-box{display:block;}
	.pro-detaile-photo-box{width:100%; margin:0 0 15px 0;}
	.pro-detaile-spe-box{width:100%; padding-bottom:0;}
	.cart-info{position:inherit; bottom:inherit;}
    .pro-pic>ul>li{width: calc(100%/2 - 10px);margin: 5px;}
    .pro-pic>ul>li .photo-main{border: 5px #ffffff solid;box-shadow: 0 0 0 1px #cccccc, 3px 3px 0 0 #cccccc;}
}

/** 聯絡我們 **/
.contact-body{}
.contact-note{padding:10px 0; font-weight:400; font-size:15px; color:#ff0000;text-align: right;}
.contact-main{display: flex;margin:0 0 30px 0;}
.contact{flex: 1;margin: 0 30px 0 0;}
.contact-title{margin: 0 0 20px 0;font-size: 24px;background: #00b050;color: #ffffff;display: table;font-weight: 500;line-height: 1.4;padding:10px 20px 10px 0;border-radius: 0 50px 50px 0;position: relative;}
.contact-title:after{content: "";display: block;width: 100%;height:100%;background: #00b050;position: absolute;left:-100%;top:0;}
.contact ul{list-style: none;padding: 0;margin: 0;}
.contact ul li{padding:0;margin:15px 0;display: flex; width: 100%;color: #222222;}
.contact ul li .contact-icon{width: 20px;height: 20px;display: flex;align-items: center;justify-content: center; margin: 0 15px 0 0;padding: 15px 0;}
.contact ul li .contact-content{flex: 1;}
.contact ul li .contact-content span{font-size: 18px; color:#222222;font-weight: 500;display: block;width: 100%;}
.contact ul li .contact-content a{color:#222222;display: block;}
.contact ul li .contact-content a:hover{color:#00b050;}
.googlemap {flex: 1; position: relative;padding-bottom: 28%;padding-top: 30px;height: 0;overflow: hidden;margin:0;}
.googlemap iframe {position: absolute;top:0;left: 0;width: 100%;height: 100%;}
@media screen and (max-width:1024px){
	.contact-main{display: block;}
    .contact{flex: initial;width: 100%; margin: 0 0 20px 0;}
    .contact-title{font-size: 20px;}
    .googlemap {flex: initial;width: 100%;padding-bottom: 50%;}
}
@media screen and (max-width:767px){
    .googlemap {padding-bottom: 70%;}
}

/** 表單欄位 **/
.star{color: #ff0000;padding: 0 10px;font-size: 12px;}
label{min-width: 80px;}
.form-box input, .form-box img{vertical-align:middle;}
.opinion-main{display:flex;}
.opinion{flex: 1; display:flex; flex-wrap:wrap; margin:10px 0;overflow:hidden;}
.opinion-left01{width:100%; padding:8px 0; display:flex; align-items:center;font-weight: 500;}
.input-main-style01{background: #f3f3f3 ;flex:1; width:100%; border:1px #f3f3f3 solid; margin:0; padding:8px 15px; color: #222222; min-height:46.8px;}
.input-main-style02{background: #f3f3f3 ; flex:1; width:100%; border:1px #f3f3f3 solid; margin:0; padding:8px 15px;color: #333333;min-height:46.8px;}
.input-main-style03{background: #f3f3f3 ; flex:1; width:100%; border:1px #f3f3f3 solid; margin:5px 0 0 0; padding:8px 15px; color: #222222; min-height:46.8px;}
.input-main-select{background:none; flex:1; width:100%; border:0; margin:0; padding:0; color: #222222; display:flex; flex-wrap:wrap;}
.input-main-select select{background: #f3f3f3 ;flex: 1; margin:0; padding:8px 15px; line-height:1.8; border:0;  color: #222222; min-height:46.8px;}
.select-style{background:#8a6e0c;  color:#ffffff; line-height:20px;padding:8px 15px; border:0;}
.input-style01{background: #f3f3f3 ; flex:1; width:100%; border:0; margin:0;padding:8px 15px; color: #222222; min-height:46.8px;}
input:disabled{background-color:#fff; color:#2d7fb9; cursor:no-drop;}
.btn.openlink{margin:3px 0; padding:0 10px; text-align:center; 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:46.8px; margin:0; vertical-align:middle; display:inline-block;}
.pay-main{padding:0;font-size: 16px; color: #222222;border-radius:0;margin: 15px 0 ;}
.input-main-style01:focus,.input-main-style02:focus,.input-main-style03:focus,.input-main-select select:focus{background: #ffffff;border: 1px #ff0000 solid;}
@media screen and (max-width:767px){
	.opinion-main{display:block;}
	.opinion{display:block;}
	.opinion-left01{width:100%;}
	.input-main-style02{width:calc(100% - 108px); display:inline-block;}
}

/** 按鈕 **/
.cart-btn{ text-align:center; margin-top:30px; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.cart-btn i{margin: 0 8px 0 0;}
.btn-send{font-size:17px;}
a.btn-send{background: #ff0000; padding:8px 25px; text-align:center; font-size:16px; color:#ffffff; min-width:100px; margin:5px 0 5px 10px; border-radius:3px;}
a.btn-send:hover{background:#00b050;color:#ffffff;}
a.btn-reset{background:#666666; padding:8px 25px; text-align:center; font-size:16px; color:#ffffff; min-width:100px; margin:5px 0 5px 10px;border-radius: 3px;}
a.btn-reset:hover{background:#222222; color:#ffffff; }
a.btn-send-over{background:#7ea2c5; padding:6px 20px; text-align:center; font-size:16px; color:#fff; min-width:100px; margin:5px 0 5px 10px; border-radius: 3px;}
a.btn-send-over:hover{background:#96b9dc; border:2px solid #96b9dc;}
@media screen and (max-width:767px){
	a.btn-send{padding:8px 15px; width:calc(50% - 10px);margin:5px;}
	a.btn-reset{padding:8px 15px; width:calc(50% - 10px);margin:5px;}
	a.btn-send-over{padding:8px 15px; width:calc(50% - 10px);margin:5px;}
}

/** 送出訊息 **/
.jump-window-box{max-width:500px; margin:0 auto; border:1px #dddddd solid;background: #ffffff; padding:20px; border-radius:5px;overflow: hidden;}

/** 頁次 **/
.page{font-size: 14px; color:#222222; text-align:center; clear:both; margin:40px 0 0 0;padding:0;display: flex;align-items: center; justify-content: center;}
.page a{background:#222222; color:#ffffff; padding:6px 20px;display: inline-block;margin: 10px;border-radius: 50px;}
.page a:hover{background:#00b050; color:#fff;}
.page br{display:none;}
@media screen and (max-width:767px){
	.page {display:block;}
	.page br{display:block;}
}

/** 下版 **/
footer{background:#012f16;padding: 2.5% 4.2%;}
footer .footer{margin:0 ;padding: 0;color: #ffffff;font-size: 16px;display: flex;}
.f-logo-copyright{min-width: 250px; width: 250px;margin: 0 4% 0 0;text-align: center;}
.f-logo-main{margin: 0 0 15px 0;}
.f-logo-main .f-logo{width: 80px;margin: 0 auto;}
.f-logo-main .f-logo img{filter: brightness(0) invert(1);}
.f-logo-main .f-logo-font{width: 100%; line-height: 1.4;margin: 8px 0 0 0;}
.f-logo-main .f-logo-font .f-logo-font-en{font-size: 22px;font-weight: 700;color: #ffffff;margin: 0 0 5px 0;}
.f-logo-main .f-logo-font .f-logo-font-tc{font-size: 16px;color: #ffffff;letter-spacing: 3px;}
.copyright{font-size: 12px; color: #587867;text-transform: uppercase;line-height: 1.2;}
.copyright span{display: block;width: 100%;}
.copyright span a{display: block;color: #587867;}
.copyright span a:hover{color: #00b050;}
.f-contact{}
.f-contact>ul{list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;}
.f-contact>ul>li{padding: 0;margin: 10px;width: calc(100%/2 - 20px);}
.f-contact>ul>li h2{padding: 0;margin: 0 0 18px 0;line-height: 1.4;font-size: 20px; font-weight: 700;width: 100%;}
.f-contact>ul>li .f-contact-content{width: auto;}
.f-contact>ul>li .f-contact-content>ul{list-style: none;padding: 0;margin: 0;}
.f-contact>ul>li .f-contact-content>ul>li{padding: 0;margin:2px 0;display:block;}
.f-contact>ul>li .f-contact-content>ul>li a{color: #ffffff;}
.f-contact>ul>li .f-contact-content>ul>li a:hover{color: #00b050;}
@media screen and (max-width:1400px){
    footer{padding: 30px 15px;}
}
@media screen and (max-width:1024px){
    footer .footer{display: block;}
    .f-logo-copyright{margin: 0 0 10px 0;width: 100%;}
    .f-logo-main{display: flex;justify-content: center;margin: 0 0 10px 0;}
    .f-logo-main .f-logo{width: 70px;margin: 0 10px 0 0;}
    .f-logo-main .f-logo-font{width: auto;text-align: left;}
    .f-logo-main .f-logo-font .f-logo-font-en{font-size: 24px;margin: 0;}
    .f-logo-main .f-logo-font .f-logo-font-tc{font-size: 15px;letter-spacing: 2px;}
    .copyright span{display: inline-block;padding: 0 0 0 15px;width: auto;}
    .copyright span a{display:inline-block;}
    .f-contact{width: 100%;}
    .f-contact>ul>li{margin: 15px 0;width: 100%;}
    .f-contact>ul>li h2{margin: 0 0 10px 0;font-size: 18px; }
}
@media screen and (max-width:575px){
    .f-logo-main .f-logo{width: 60px;}
    .f-logo-main .f-logo-font .f-logo-font-en{font-size: 22px;}
    .f-logo-main .f-logo-font .f-logo-font-tc{font-size: 14px;letter-spacing: 1px;}
}
@media screen and (max-width:374px){
    .f-logo-main .f-logo-font .f-logo-font-en{font-size: 20px;}
    .f-logo-main .f-logo-font .f-logo-font-tc{font-size: 13px;letter-spacing: 0px;}
}

/** top **/
#scrollUp {width: 40px; height: 120px; bottom: 0;right:10px;writing-mode: vertical-rl;background:#00b050 url("../images/icon-top.svg")no-repeat right 10px center;background-size: 18px;font-size: 12px; color: #ffffff; text-transform: uppercase;padding:42px 12px 10px 12px;border-radius: 5px 5px 0 0;}