@charset "utf-8";
@import "font-awesome.min.css";
/* CSS Document */
body { width:100%; height:auto; margin:0; padding:0; font-family:"微軟正黑體",arial; font-size: 16px; line-height: 1.8;}
html { width:100%; height:auto;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}/* End hide from IE-mac */
a { text-decoration:none;}
img { border:0; vertical-align:middle;max-width: 100%;}
input { vertical-align:middle;}
input:focus, select:focus, textarea:focus, button:focus{outline: 0;}

/** padding and border no width **/
*{-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */}

/** 表單預設文字顏色設定 **/
/** 通用 **/
::-webkit-input-placeholder { color:#999999; }
::-moz-placeholder { color:#999999; } /* firefox 19+ */
:-ms-input-placeholder { color:#999999; } /* ie */
input:-moz-placeholder { color:#999999; }

/** webkit专用 **/
#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; }

/** mozilla专用 **/
#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; }

/** banner **/
.banner-main{overflow: hidden;/* max-width: 1600px; */margin: auto;}
.banner-main:after{content: "";display: block;width: 100%;height: 125px;background: url(../images/banner-after.png)no-repeat center top;background-size: contain;margin: -50px 0 0 0;position: relative;}
.banner{position: relative;}
.banner-font-main01{position: absolute;top: 0%; left:10%;width:80vw;}
.banner-font{display: flex;align-items:flex-end;}
.banner-font-content-01{}
.banner-font-content-01-02{}
.banner-font-main02{position: absolute;top: 9%; left:10%;width:80vw;}
.banner-font-content-02{}
.banner-font-content-02-02{}
.banner-font-main03{position: absolute;top: 25%; left:10%;width:80vw;}
.banner-font-content-03{display:none;}
.banner-font-main04{position: absolute;top: 18%; left:10%;width:80vw;}
.banner-font-content-04{}
.banner-font-content-04-02{}
.banner-font-main05{position: absolute;bottom: 50%;right:10%;width:40vw;}
.banner-font-content-05{}
.banner-font-main06{position: absolute;bottom: 40%;right:2%;width:50vw;}
.banner-font-content-06{}

@keyframes banner-font-content-01
{
0% {position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
@-moz-keyframes banner-font-content-01 /* Firefox */
{
0% {position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
@-webkit-keyframes banner-font-content-01 /* Safari 和 Chrome */
{
0% {position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
@-o-keyframes banner-font-content-01 /* Opera */
{
0% {position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
.banner-font-content-01 {
animation: banner-font-content-01 4s ease;
-moz-animation: banner-font-content-01 4s ease;	/* Firefox */
-webkit-animation: banner-font-content-01 4s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-01 4s ease;	/* Opera */
}
@keyframes banner-font-content-01-02
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-moz-keyframes banner-font-content-01-02 /* Firefox */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-webkit-keyframes banner-font-content-01-02 /* Safari 和 Chrome */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-o-keyframes banner-font-content-01-02 /* Opera */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
.banner-font-content-01-02 {
animation: banner-font-content-01-02 5s ease;
-moz-animation: banner-font-content-01-02 5s ease;	/* Firefox */
-webkit-animation: banner-font-content-01-02 5s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-01-02 5s ease;	/* Opera */
}
@keyframes banner-font-content-02
{
0% {position: relative;left: -50%;opacity: 0;}
25%{position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
@-moz-keyframes banner-font-content-02 /* Firefox */
{
0% {position: relative;left: -50%;opacity: 0;}
25%{position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
@-webkit-keyframes banner-font-content-02 /* Safari 和 Chrome */
{
0% {position: relative;left: -50%;opacity: 0;}
25%{position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
@-o-keyframes banner-font-content-02 /* Opera */
{
0% {position: relative;left: -50%;opacity: 0;}
25%{position: relative;left: -50%;opacity: 0;}
50%{position: relative;left:0%;opacity: 1;}
}
.banner-font-content-02 {
animation: banner-font-content-02 4s ease;
-moz-animation: banner-font-content-02 4s ease;	/* Firefox */
-webkit-animation: banner-font-content-02 4s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-02 4s ease;	/* Opera */
}
@keyframes banner-font-content-02-02
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-moz-keyframes banner-font-content-02-02 /* Firefox */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-webkit-keyframes banner-font-content-02-02 /* Safari 和 Chrome */
{
0% {position:relative;right: -100%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -100%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-o-keyframes banner-font-content-02-02 /* Opera */
{
0% {position:relative;right: -100%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -100%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
.banner-font-content-02-02 {
animation: banner-font-content-02-02 5s ease;
-moz-animation: banner-font-content-02-02 5s ease;	/* Firefox */
-webkit-animation: banner-font-content-02-02 5s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-02-02 5s ease;	/* Opera */
}
@keyframes banner-font-content-03
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left:0%;opacity: 1;}
}
@-moz-keyframes banner-font-content-03 /* Firefox */
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left:0%;opacity: 1;}
}
@-webkit-keyframes banner-font-content-03 /* Safari 和 Chrome */
{
0% {position: relative;top: -100%;opacity: 0;}
25%{position: relative;top: -100%;opacity: 0;}
50%{position: relative;top: -100%;opacity: 0;}
75%{position: relative;top: 0%;opacity: 1;}
}
@-o-keyframes banner-font-content-03 /* Opera */
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left:0%;opacity: 1;}
}
.banner-font-content-03 {
animation: banner-font-content-03 5s ease;
-moz-animation: banner-font-content-03 5s ease;	/* Firefox */
-webkit-animation: banner-font-content-03 5s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-03 5s ease;	/* Opera */
}
@keyframes banner-font-content-04
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left: -100%;opacity: 0;}
100%{position: relative;left:0%;opacity: 1;}
}
@-moz-keyframes banner-font-content-04 /* Firefox */
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left: -100%;opacity: 0;}
100%{position: relative;left:0%;opacity: 1;}
}
@-webkit-keyframes banner-font-content-04 /* Safari 和 Chrome */
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left: -100%;opacity: 0;}
100%{position: relative;left:0%;opacity: 1;}
}
@-o-keyframes banner-font-content-04 /* Opera */
{
0% {position: relative;left: -100%;opacity: 0;}
25%{position: relative;left: -100%;opacity: 0;}
50%{position: relative;left: -100%;opacity: 0;}
75%{position: relative;left: -100%;opacity: 0;}
100%{position: relative;left:0%;opacity: 1;}
}
.banner-font-content-04 {
animation: banner-font-content-04 4s ease;
-moz-animation: banner-font-content-04 5s ease;	/* Firefox */
-webkit-animation: banner-font-content-04 4s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-04 5s ease;	/* Opera */
}
@keyframes banner-font-content-04-02
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
75%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
100%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-moz-keyframes banner-font-content-04-02 /* Firefox */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
75%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
100%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-webkit-keyframes banner-font-content-04-02 /* Safari 和 Chrome */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
75%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
100%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
@-o-keyframes banner-font-content-04-02 /* Opera */
{
0% {position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
25%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
50%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
75%{position:relative;right: -50%;transform:rotate(0deg);opacity: 0;}
100%{position:relative;right: 0%;transform:rotate(0deg);opacity: 1;}
}
.banner-font-content-04-02 {
animation: banner-font-content-04-02 5s ease;
-moz-animation: banner-font-content-04-02 5s ease;	/* Firefox */
-webkit-animation: banner-font-content-04-02 5s ease;	/* Safari 和 Chrome */
-o-animation: banner-font-content-04-02 5s ease;	/* Opera */
}
@keyframes banner-font-content-05
{
0% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
25% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
50% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
75%{position:relative;right: 0%;transform: scale(1.5);opacity: 1;}
100%{position:relative;right: 0%;transform: scale(1);opacity: 1;}
}
@-moz-keyframes banner-font-content-05 /* Firefox */
{
0% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
25% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
50% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
75%{position:relative;right: 0%;transform: scale(1.5);opacity: 1;}
100%{position:relative;right: 0%;transform: scale(1);opacity: 1;}
}
@-webkit-keyframes banner-font-content-05 /* Safari 和 Chrome */
{
0% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
25% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
50% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
75%{position:relative;right: 0%;transform: scale(1.5);opacity: 1;}
100%{position:relative;right: 0%;transform: scale(1);opacity: 1;}
}
@-o-keyframes banner-font-content-05 /* Opera */
{
0% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
25% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
50% {position:relative;right: 0%;transform: scale(0);opacity: 0;}
75%{position:relative;right: 0%;transform: scale(1.5);opacity: 1;}
100%{position:relative;right: 0%;transform: scale(1);opacity: 1;}
}
.banner-font-content-05 {
animation: banner-font-content-05 7s ease-in;
-moz-animation: banner-font-content-05 7s ease-in;	/* Firefox */
-webkit-animation: banner-font-content-05 7s ease-in;	/* Safari 和 Chrome */
-o-animation: banner-font-content-05 7s ease-in;	/* Opera */
}
@keyframes banner-font-content-06
{
0% {position:relative;right: -50%;opacity: 0;}
25%{position:relative;right: -50%;opacity: 0;}
50%{position:relative;right: -50%;opacity: 0;}
75%{position:relative;right: -50%;opacity: 0;}
100%{position:relative;right: 0%;opacity: 1;}
}
@-moz-keyframes banner-font-content-06 /* Firefox */
{
0% {position:relative;right: -50%;opacity: 0;}
25%{position:relative;right: -50%;opacity: 0;}
50%{position:relative;right: -50%;opacity: 0;}
75%{position:relative;right: -50%;opacity: 0;}
100%{position:relative;right: 0%;opacity: 1;}
}
@-webkit-keyframes banner-font-content-06 /* Safari 和 Chrome */
{
0% {position:relative;right: -50%;opacity: 0;}
25%{position:relative;right: -50%;opacity: 0;}
50%{position:relative;right: -50%;opacity: 0;}
75%{position:relative;right: -50%;opacity: 0;}
100%{position:relative;right: 0%;opacity: 1;}
}
@-o-keyframes banner-font-content-06 /* Opera */
{
0% {position:relative;right: -100%;opacity: 0;}
25%{position:relative;right: -100%;opacity: 0;}
50%{position:relative;right: -100%;opacity: 0;}
75%{position:relative;right: -100%;opacity: 0;}
100%{position:relative;right: 0%;opacity: 1;}
}
.banner-font-content-06 {
animation: banner-font-content-06 5s ease-out;
-moz-animation: banner-font-content-06 5s ease-out;	/* Firefox */
-webkit-animation: banner-font-content-06 5s ease-out;	/* Safari 和 Chrome */
-o-animation: banner-font-content-06 5s ease-out;	/* Opera */
}
@media screen and (max-width:1000px){
.banner-main:after{height:90px;margin: -30px 0 0 0;}
}
@media screen and (max-width:750px){
.banner-font-main01{left:5%;width:90vw;}
.banner-font-main02{left:5%;width:90vw;}
.banner-font-main03{left:5%;width:90vw;}
.banner-font-main04{left:5%;width:90vw;}
.banner-font-main05{right:5%;}
.banner-font-main06{right:5%;}
}
@media screen and (max-width:650px){
.banner-main:after{height:60px;margin: -20px 0 0 0;}
}
@media screen and (max-width:500px){
.banner-font-main01{top:-1%;left:5%;}
.banner-font-main02{top:8%;left:5%;}
.banner-font-main03{top:16%;left:5%;}
.banner-font-main04{top:18%;left:5%;}
.banner-font-main05{bottom:50%;right:15%;}
.banner-font-main06{bottom:40%;right:2%;}
}

/** 內容 **/
.content-main{font-size: 24px;color: #323232;background: #fff url(../images/content_bg.png)no-repeat center bottom;padding:0 10px 100px 10px;}
.content{max-width: 1200px; margin: 0 auto;text-align: center;}
.content p{margin: 12px 0;padding: 0;}
.font001{font-size: 30px;color: #b70003;font-weight: bold;}
.font002{font-size: 26px;color: #ffffff;font-weight: bold;text-align: center;display: table;padding: 5px 30px;border-radius: 5px;margin:17px auto;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7f5823+50,d2ad55+50 */
background: rgb(127,88,35); /* Old browsers */
background: -moz-linear-gradient(left, rgba(127,88,35,1) 50%, rgba(210,173,85,1) 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(127,88,35,1) 50%,rgba(210,173,85,1) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(127,88,35,1) 50%,rgba(210,173,85,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f5823', endColorstr='#d2ad55',GradientType=1 ); /* IE6-9 */}
.font002:after{content: "";display: block;background: url(../images/content-after.png)no-repeat top center;background-size:contain;width: 100%; height: 34px;margin:5px 0 -39px 0; }

/** 洽詢按鈕 **/
.contact-button{display:table;margin:80px auto 0 auto;position: relative;}
.contact-button-icon{position: absolute;top:calc(50% - 44.5px);left:30px;}
.contact-button input{width: 100%; border: 0;font-size: 32px; color: #ffffff;font-weight:bold;font-family: 微軟正黑體;border-radius: 50px;padding: 10px 30px 10px 140px;box-shadow: 0 5px 20px 0 rgba(0,0,0,.6);/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3134+0,7c0709+100,7c0709+100 */
background: rgb(255,49,52); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,49,52,1) 0%, rgba(124,7,9,1) 100%, rgba(124,7,9,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,49,52,1) 0%,rgba(124,7,9,1) 100%,rgba(124,7,9,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,49,52,1) 0%,rgba(124,7,9,1) 100%,rgba(124,7,9,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3134', endColorstr='#7c0709',GradientType=0 ); /* IE6-9 */}
.contact-button input:hover{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7c0709+0,ff3134+100 */
background: rgb(124,7,9); /* Old browsers */
background: -moz-linear-gradient(top, rgba(124,7,9,1) 0%, rgba(255,49,52,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(124,7,9,1) 0%,rgba(255,49,52,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(124,7,9,1) 0%,rgba(255,49,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c0709', endColorstr='#ff3134',GradientType=0 ); /* IE6-9 */}
@keyframes contact-button-icon
{
0% {transform:rotate(-8deg);}
50%{transform:rotate(8deg);}
100%{transform:rotate(-8deg);}
}
@-moz-keyframes contact-button-icon /* Firefox */
{
0% {transform:rotate(-8deg);}
50%{transform:rotate(8deg);}
100%{transform:rotate(-8deg);}
}
@-webkit-keyframes contact-button-icon /* Safari 和 Chrome */
{
0% {transform:rotate(-8deg);}
50%{transform:rotate(8deg);}
100%{transform:rotate(-8deg);}
}
@-o-keyframes contact-button-icon /* Opera */
{
0% {transform:rotate(-8deg);}
50%{transform:rotate(8deg);}
100%{transform:rotate(-8deg);}
}
.contact-button-icon {
animation:contact-button-icon 1s linear infinite;
-moz-animation: contact-button-icon 1s linear infinite;	/* Firefox */
-webkit-animation: contact-button-icon 1s linear infinite;	/* Safari 和 Chrome */
-o-animation: contact-button-icon 1s linear infinite;	/* Opera */
}
@media screen and (max-width:550px){
.content-main{font-size: 20px;padding:0 10px 80px 10px;}
.font001{font-size: 28px;}
.font002{font-size: 24px;}
.contact-button{margin:60px auto 0 auto;}
.contact-button input{font-size: 28px;padding: 10px 30px 10px 135px;}
.contact-button-icon{left:30px;top:calc(50% - 40px);}
.contact-button-icon img{width: 90px;}
}

/** 馬上洽詢表單 **/
.lightbox-target {position: fixed;top: -100%;width: 100%;background: rgba(0, 0, 0, 0.7);opacity: 0;-moz-transition: opacity 0.5s ease-in-out;-o-transition: opacity 0.5s ease-in-out;-webkit-transition: opacity 0.5s ease-in-out;transition: opacity 0.5s ease-in-out;overflow: hidden;z-index: 1100;}
.lightbox-target .contact-content {padding: 20px; width: 80vh;height:calc(100vh - 20vh);overflow-y: auto; background: #fff url(../images/contact_bg.png)no-repeat right bottom;border-radius: 10px; color: #333;margin:10vh auto;position: absolute;top: 0;left: 0;right: 0;bottom: 0;max-height: 0%;max-width: 0%;border: 6px solid #c61f22;box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);box-sizing: border-box;-moz-transition: ease-in-out 0.5s;-o-transition: ease-in-out 0.5s;-webkit-transition: ease-in-out 0.5s;transition: ease-in-out 0.5s;}
.lightbox-target:target {opacity: 1;top: 0;bottom: 0;left: 0;}
.lightbox-target:target .contact-content, .lightbox-target:target img {max-height: 100%;max-width: 100%;}
.lightbox-target:target .lightbox-close {top: 0;}
.lightbox-close {display: block;width: 40px;height: 40px;box-sizing: border-box;background: #222;border-radius: 0 4px 0 4px; color: #fff;position: absolute;top:0%;right: 0;-moz-transition: ease-in-out 0.5s;-o-transition: ease-in-out 0.5s;-webkit-transition: ease-in-out 0.5s;transition: ease-in-out 0.5s;}
.lightbox-close:before, .lightbox-close:after {content: " ";display: block;height: 30px;width:2px;background: #fff;position: absolute;left: 20px;top: 5px;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.lightbox-close:after {-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.contact-note{font-size: 14px; color: #f00;}
.star{background: #f00;color: #fff;border-radius: 50px;width:20px; height:20px;display: inline-block;text-align: center;padding:0;margin: 0 5px;line-height: 1.6;}
.star02{color: #f00;margin: 0 5px;}
.form-box {}
.form-box input, .form-box img { vertical-align:middle;}
.form-style01 { font-size:14px; font-family:"微軟正黑體"; color:#4E4E4E; padding:5px 0 10px 0; line-height:20px; width:100%;}
.opinion {padding: 10px 5px;border-bottom: 1px #a38f8f dashed;display: flex;position: relative;}
.opinion-left01 { background:none;width:110px;min-width: 110px; padding:5px 15px; font-size:16px; font-family:"微軟正黑體"; color:#333; line-height:1.8;}
.input-main-style01 { background:#fbf6f6; flex: 1; width:100%; border: 1px #f6e8e8 solid; margin:0; padding:5px 46px 5px 15px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;min-height:39px;}
.input-main-style01 + label{position: absolute;top:10px;right:8px;width: 39px; height: 39px;color: #d5c2c2;font-size: 20px;display: flex;align-items: center;justify-content: center;}
.input-main-style02 { background:#fbf6f6; flex: 1; width:100%; border: 1px #f6e8e8 solid; margin:0; padding:5px 46px 5px 15px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;min-height:39px;}
.input-main-style02[name="verifycode"]{flex:none; width:auto;}
.input-main-style02 + label{position: absolute;top:10px;right:8px;width: 39px; height: 39px;color: #d5c2c2;font-size: 20px;display: flex;align-items: center;justify-content: center;}
.input-main-style03 {background:#fbf6f6; flex: 1; width:100%; border: 1px #fbf6f6 solid; margin:0; padding:5px 146px 5px 15px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8;min-height:39px;}
.input-main-style03 + label{position: absolute;top:10px;right:8px;width: 39px; height: 39px;color: #d5c2c2;font-size: 20px;display: flex;align-items: center;justify-content: center;}
.input-style01 { background:#fbf6f6;border: 1px #fbf6f6 solid;padding:5px 46px 5px 15px; font-size:15px; font-family:"微軟正黑體"; color:#333; line-height:1.8; flex: 1; width:100%;min-height: 147px; }
.input-style01 + label{position: absolute;top:10px;right:8px;width: 39px; height:147px;color: #d5c2c2;font-size: 20px;display: flex;align-items: center;justify-content: center;}
.input-main-style02:focus,.input-main-style03:focus,.input-style01:focus{outline: 0;border: 1px #dc1e1e solid;background: #fff;}
.input-main-style02:focus + label{color: #dc1e1e;}
.input-main-style03:focus + label{color: #dc1e1e;}
.input-style01:focus + label{color: #dc1e1e;}
.cart-btn { display: flex;align-content: center;justify-content: flex-end;margin: 0;padding: 5px 0;flex: 1;}
.btn-send { font-size:13px;} 
button.btn-send { background: #de1515; padding: 5px 20px; text-align:center; font-size:14px; color:#fff; width:100px; margin:2px;font-family: 微軟正黑體;border: 0;}
button.btn-send:hover { background: #f23f3f;}
button.btn-reset { background:#565656;  padding: 5px 20px; text-align:center; font-size:14px; color:#fff; width:100px; margin:2px;font-family: 微軟正黑體;border: 0;}
button.btn-reset:hover { background:#828282;}
img.code { width:100px; height:37px;position: absolute;top: 11px; right: 47px;}
a.btn-send { background: #de1515; padding: 5px 20px; text-align:center; font-size:14px; color:#fff; width:100px; margin:2px;font-family: 微軟正黑體;border: 0;}
a.btn-send:hover { background: #f23f3f;}
a.btn-reset { background:#565656;  padding: 5px 20px; text-align:center; font-size:14px; color:#fff; width:100px; margin:2px;font-family: 微軟正黑體;border: 0;}
a.btn-reset:hover { background:#828282;}

/** 社群 **/
.b-c{display: flex;flex-direction: row-reverse;margin: 10px 0;align-items: center;}
.community-c{flex: 1;display: flex;justify-content: flex-start;}
.community-c ul{list-style: none;padding: 0;margin: 0;display: flex;justify-content: flex-end;}
.community-c ul li{padding: 0;margin: 5px;width: 50px;}
.community-c ul li a{display: block;}
.community-c ul li img{filter:drop-shadow(2px 2px 0px rgba(78,8,8,.3));transform:rotateY(0deg);transition: all 0.6s ease 0s;}
.community-c ul li:hover img{transform:rotateY(360deg);transition: all 0.6s ease 0s;}
@media screen and (max-width: 750px) {
.lightbox-target .contact-content {padding: 10px;width: 90%;}
}
@media screen and (max-width: 500px) {
.opinion {display: block;}
.opinion-left01 {display: block; width:100%;min-width:inherit; padding:5px 5px ;}
.input-main-style02 + label{top:48px;right:6px;}
.input-main-style03 + label{top:48px;right:6px;}
.input-style01 + label{top:48px;right:6px;}
img.code {top:49px; right: 47px;}
.b-c{display:block;}
.cart-btn {justify-content:center;}
.community-c{justify-content:center;}
}
<!--bootstrap css -->
@media (min-width: 576px)
.container {
    max-width: 100vw;
}
@media (min-width: 768px)
.container {
    max-width: 100vw;
}

/** 下版 **/
footer{background: #ffefef;margin: 0;}
footer:before{content: "";display: block;width: 100%;height: 55px;background: url(../images/footer-before.png)no-repeat bottom center;background-size: contain;position: relative;top: -55px;margin: 0 0 -55px 0;}
.footer{max-width: 1200px; margin: 0 auto;display: flex;align-items: center;padding: 0 0 5px 0;}
.footer .f-logo{width: 176px;margin: 0 25px 0 0;}
.footer .f-information{flex: 1;font-size: 14px; color: #323232;}
.footer .f-information span img{padding: 0 5px;}
.footer .f-information span{padding:2px 5px;display: inline-block;}
.footer .f-information a{ color: #323232;}
.footer .f-information a:hover{text-decoration: underline;}
@media screen and (max-width:750px){
.footer{padding:  5px 0;display: block;}
.footer .f-logo{margin: 0 auto;}
.footer .f-information{text-align: center;}
}