html {background-color: #fff;}
body{
background-image: url(../img/Banner/bodyImg.jpg);
background-position: top center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
}
/* Typography */
p, a {font-weight: 400;}
.h2 {font-size: 40px;}
.h3 {font-size: 28px;}
.light-300 {
font-weight: 300;
}
.regular-400 {
font-weight: 400;
}
.semi-bold-600 {
font-weight: 600;
}
/*-- Nav --*/
.navbarBtn{color: #e8f2e7;}
#main_nav .nav-item .nav-link {color: #e8f2e7;}
#main_nav .nav-item .nav-link:hover {background-color: #e8f2e7; color: #003f25;}
.IndexNav{
background: linear-gradient(#81c055, #81c055, #6ca348);
}
@media (max-width:991px) {
.IndexNav{
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.Introduction{
margin-top: 4.5em;
}
.navbar-nav{margin-top: 1em;}
}
@media (min-width:992px) {
.IndexNav{
margin: 0 auto;
width: 80%;
margin-bottom: 15em;
background: linear-gradient(#81c055, #6ca348);
border-radius: 10px;
}
#main_nav{padding-top: 3em;}
}
/*--// Nav --*/
/*-- HeaderTitle hover --*/
.link--yaku {
font-weight: 600;
font-size: 42px;
overflow: hidden;
padding: 0 0 10px;
}
.link--yaku::before {
content: '';
position: absolute;
height: 100%;
width: 100%;
left: 0;
-webkit-transform: translate3d(-101%,0,0);
transform: translate3d(-101%,0,0);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
.link--yaku:hover::before {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link--yaku span {
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
}
.link--yaku:hover span {
color: #d7b4b4;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,360deg);
transform: perspective(1000px) rotate3d(0,1,0,360deg);
}
.link--yaku span:nth-child(4),
.link--yaku:hover span:first-child {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.link--yaku span:nth-child(3),
.link--yaku:hover span:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.link--yaku span:nth-child(2),
.link--yaku:hover span:nth-child(3) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.link--yaku span:first-child,
.link--yaku:hover span:nth-child(4) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
/*-- //HeaderTitle hover --*/
/*-- Footer_資訊&版權分界線 --*/
.Bottom-WhiteLine{
border-bottom: 1px solid #80d4bc55;
}
/*-- BANNER輪播箭頭 --*/
.Introduction .carousel-control-prev,
.Introduction .carousel-control-next {
color: #085133 !important;
text-decoration: none;
font-size: 4em;
padding: 10px;
}
@media (max-width:576px) {
.Introduction .carousel-control-prev,
.Introduction .carousel-control-next {
font-size: 2em;
}
}
/*-- //BANNER輪播箭頭 --*/
/*-- BANNER輪播圖 手機高度 --*/
@media (max-width:991px){
.BANNERheight img{
height: 300px;
}
}
@media (min-width:991px){
.BANNERheight img{
height: 800px;
}
}
/*-- //BANNER輪播圖 手機高度 --*/
/*-- MediaBlock輪播箭頭 --*/
.MediaBlock .carousel-control-prev,
.MediaBlock .carousel-control-next {
color: #085133 !important;
text-decoration: none;
font-size: 4em;
padding: 10px;
}
@media (max-width:576px) {
.MediaBlock .carousel-control-prev,
.MediaBlock .carousel-control-next {
font-size: 2em;
}
}
.MediaBlock .carousel-control-prev{
margin-left: -3em;
}
.MediaBlock .carousel-control-next{
margin-right: -3em;
}
@media (max-width:1800px){
.MediaBlock .carousel-control-prev{
margin-left: -2em;
}
.MediaBlock .carousel-control-next{
margin-right: -2em;
}
}
@media (max-width:1050px){
.MediaBlock .carousel-control-prev{
margin-left: -1em;
}
.MediaBlock .carousel-control-next{
margin-right: -1em;
}
}
@media (max-width:1600px){
#Media_carousel{
width: 80%;
margin: 0 auto;
}
}
#Media_carousel .carousel-inner{
height: 45em;
}
.MediaBlock .carousel-indicators{
bottom: -4em;
}
@media (max-width:1600px){
#Media_carousel .carousel-inner{
height: 36em;
}
}
@media (max-width:1300px){
#Media_carousel .carousel-inner{
height: 30em;
}
.MediaBlock .carousel-indicators{
bottom: -1em;
}
}
@media (max-width:1100px){
#Media_carousel .carousel-inner{
height: 26em;
}
}
@media (max-width:992px){
#Media_carousel .carousel-inner{
height: 20em;
}
.MediaBlock .carousel-indicators{
bottom: -4em;
margin-bottom: 2.5em;
}
}
@media (max-width:768px){
#Media_carousel .carousel-inner{
height: 15em;
}
}
.MediaBlock .carousel-indicators li{
background-color:#085133;
opacity: .3;
height: 12px;
width: 12px;
border-radius: 50%;
margin-right: 6px;
margin-left: 6px;
}
.MediaBlock .carousel-indicators .active{opacity:1}
/*-- //MediaBlock輪播箭頭 --*/
/*-- float-bar --*/
.float-bar {
position: fixed;
top: 60%;
right: 0;
z-index: 99;
}
.float-bar .float-bar__inner ul {
list-style: none;
margin: 0;
padding: 0;
}
.float-bar .float-bar__inner ul li {
line-height: 16px;
}
.float-bar .float-bar__inner .icon-box {
display: inline-block;
background-color: rgba(255, 255, 255, 0.47);
width: 50px;
height: 50px;
margin-top: 6px;
border-radius: 50%;
}
.float-bar .icon-box-image img {
width: 50px;
}
/*-- //float-bar --*/
/*-- ScrollTop --*/
.ScrollTop-bar {
position: fixed;
bottom: 10%;
transform: translateY(50%);
right: 0;
z-index: 99;
}
.ScrollTop {
display: inline-block;
color: #e8f2e7;
background-color: #003f25;
width: 40px;
height: 40px;
margin: 5px;
border-radius: 5px;
text-align: center;
padding: 5px;
padding-top: 8px;
}
/*-- //ScrollTop --*/
/*-- 商品小圖 --*/
.ListgroupRWD img{
width: 100%
}
@media (max-width:576px){
.ListgroupRWD{
width: 25%!important;
}
.list-group-item{
padding: 0.5em .2em;
}
}
/*-- //商品小圖 --*/
/*-- Modal Product img --*/
.modal-body img{
box-shadow: 0 0 10px 0.25rem rgba(0, 0, 0, 0.2);
}
/*-- //Modal Product img --*/
/*-- Traffic googlemap img --*/
.googlemap img{
box-shadow: 0 0 10px 0.25rem rgba(0, 0, 0, 0.2);
}
/*-- //Traffic googlemap img --*/