@charset "utf-8";
@import https://fonts.googleapis.com/earlyaccess/notosanstc.css;

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

body {
font-family:'Noto Sans TC',"Microsoft JhengHei",sans-serif;
-webkit-overflow-scrolling:touch;
overflow-x:hidden;
height:inherit;
background:url(../images/background_report.png);
background-position:top right;
background-repeat:no-repeat
}

#top-block {
 background:#7f896d;
 height:35px
}

#header {
//background:url(../images/menu_bg.png);
//height:100px
}

#header .row {
height:inherit
}

nav.col-md-7 ul {
padding:0;
margin:0;
list-style-type:none
}

nav.col-md-7 > ul > li {
display:inline-block;
margin:0 15px 0 0;
position:relative
}

nav.col-md-7 > ul > li > ul {

        position: absolute;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: none;
    width: 200%;
    
}

nav.col-md-7 > ul > li > ul > li {
padding:5px 0
}

.center {
text-align:center
}

nav.col-md-7 > ul > li a {
color:#484848;
text-decoration:none;
transition:all .5s ease
}

nav.col-md-7 > ul > li:after {
content:'';
height:100%;
position:absolute;
right:-10px;
top:0;
width:1px;
background:#484848
}

nav.col-md-7 > ul > li a:hover {
color:#48710c;
transition:all .5s ease;
text-decoration:none
}

#main .row,#about-main .row {
padding:25px 0
}

#main .row > div:first-child,#about-main .row > .col-md-3 {
background:url(../images/index_image_01.jpg);
height:699px;
background-size:cover;
background-repeat:no-repeat
}

#main .row > div:nth-child(2) {
background:url(../images/index_image_02.jpg);
height:699px;
background-size:cover;
background-repeat:no-repeat
}

#main .row > div:nth-child(3) {
background:url(../images/index_image_03.jpg);
height:699px;
background-size:cover;
background-repeat:no-repeat
}

#main .row > div:nth-child(4) {
background:url(../images/index_image_04.jpg);
height:699px;
background-size:cover;
background-repeat:no-repeat
}


#main .row > div a {

    
    writing-mode: tb-rl;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    color: #fff;
    padding-top: 25px;
    text-decoration: none;
    text-shadow: #999 0 0 1px;
    font-size: 1.2rem;
    display: block;
    height: inherit;
    width: 100%;
    
    
    
}


footer {
background:#c6c6c6;
padding:15px 0
}

footer p {
text-align:center;
margin:0
}


footer .d-flex.justify-content-center div {
margin-right:15px
}

.mm-menu.mm-current {
transition:all .5s ease;
z-index:3
}

.mm-menu {
background:#7f896d
}

a#m-menu {
position:absolute;
top:50px;
left:15px;
color:#666;
font-size:2rem;
cursor:pointer
}

.notice {
color:red;
font-weight:700
}

.underline {
text-decoration:underline;
font-weight:700
}

.master-title {
color:#334905
}

.master-p {
color:#334905;
margin:0;
margin-bottom:15px;
padding-left:90px
}

#service-main .row > .col-md-2 ul {
padding:0;
margin:0;
list-style-type:none
}

#service-main .row > .col-md-2 ul li {
text-align:center;
margin-bottom:0;
padding:8px;
transition:all .5s ease
}

#service-main .row > .col-md-2 ul li:hover {
background:#708d50;
transition:all .5s ease
}

#service-main .row {
margin:15px 0
}

#service-main .row > .col-md-2 ul li:hover a {
color:#fff
}

#service-main .row > .col-md-2 ul li a {
color:#494948;
text-decoration:none
}

.case-ul {
padding:0;
margin:15px 0 50px;
list-style-type:none
}


.case-ul li {
border:#5c7c38 solid 3px
}


.more {
color:#5c7c38;
display:block;
text-align:right
}

.case-title {
background:#cce3ac;
padding:5px
}

.case-title p {
margin:0;
font-size:.8rem
}

figure.case-images {
padding:10px;
margin:0
}

.case-main {
padding:0 10px
}


a.more {
margin:5px 0;
font-size:.85rem;
text-decoration:none
}

a.more:hover {
color:#5c7c38
}

.case-title {
text-align:center;
color:#5c7c38
}

.case-title i {
color:#cc6427;
transform:rotate(-15deg)
}

.case-ul.owl-theme .owl-controls {
margin:0;
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%
}

.case-ul.owl-theme .owl-prev {
left:-50px!important;
position:absolute;
border-radius:150px!important;
width:35px;
height:35px;
margin:0!important;
line-height:25px
}

.case-ul.owl-theme .owl-next {
right:-50px!important;
position:absolute;
border-radius:150px!important;
width:35px;
height:35px;
margin:0!important;
line-height:25px
}

.x {
color:#708d50;
font-size:1.4rem;
font-weight:700
}

h3.master-title {
font-size:1rem
}

.flex-manu a {
background:#f9e5cc;
background:-moz-linear-gradient(top,rgba(249,229,204,1) 1%,rgba(255,214,175,1) 100%);
background:-webkit-linear-gradient(top,rgba(249,229,204,1) 1%,rgba(255,214,175,1) 100%);
background:linear-gradient(to bottom,rgba(249,229,204,1) 1%,rgba(255,214,175,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9e5cc',endColorstr='#ffd6af',GradientType=0);
margin-right:15px;
border-radius:10px;
padding:3px 10px;
color:#6a3906;
text-align:center;
text-decoration:none;
transition:all .5s ease;
border:#e5c5a5 solid 1px
}

.flex-manu a:hover {
background:#fcbc6c;
background:-moz-linear-gradient(top,rgba(252,188,108,1) 0%,rgba(251,164,80,1) 100%);
background:-webkit-linear-gradient(top,rgba(252,188,108,1) 0%,rgba(251,164,80,1) 100%);
background:linear-gradient(to bottom,rgba(252,188,108,1) 0%,rgba(251,164,80,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcbc6c',endColorstr='#fba450',GradientType=0);
text-decoration:none;
transition:all .5s ease
}

.row.before-after span {
display:block;
color:#708d50;
text-align:center
}

.contact-title span {
background:#708d50;
color:#fdf9a5;
border-radius:5px;
padding:3px 8px
}

.contact-title {
margin:15px 0
}

#contacr-box {
    background: #e2e8dc;
    padding: 70px 25px;
    margin-bottom: 50px;
}

a.send {
background:#708d50;
color:#fff;
padding:3px 15px;
border-radius:5px
}

.send-box {
text-align:center
}

#contact-main p {
color:#494948;
margin:0
}

.g-map {
margin:15px 0
}

#contacr-box input.form-control.form-control-sm {
margin:0 0 5px
}

#contacr-box .row div:first-child {
    color: #708d50;
    font-weight: bold;
}




@media (max-width: 769px) {
#main .row > div,#about-main .row > .col-md-3 {
height:150px!important;
background-size:cover;
background-position:center!important;
background-repeat:no-repeat
}

#main .row,#about-main .row {
padding:
}

footer .d-flex.justify-content-center div {
margin-right:0;
flex:100%;
text-align:center
}

footer .d-flex.justify-content-center {
flex-wrap:wrap
}

h2.master-title {
margin-top:.5rem
}

.case-ul.owl-theme .owl-prev {
left:inherit!important;
position:relative;
border-radius:150px!important;
width:35px;
height:35px;
margin:5px!important;
line-height:25px
}

.case-ul.owl-theme .owl-next {
left:inherit!important;
position:static;
border-radius:150px!important;
width:35px;
height:35px;
margin:5px!important;
line-height:25px
}

.case-ul.owl-theme .owl-controls {
margin:0;
position:static;
top:inherit;
transform:translateY(0);
width:100%
}

#service-main .row > .col-md-2 ul {
padding:0;
margin:0 0 15px;
list-style-type:none;
display:flex;
justify-content:center
}

.flex-manu a {
margin-right:5px;
margin-bottom:5px;
flex:48%
}

#service-main .row > .col-md-2 ul li {
padding:8px 5px
}
}

@media (max-width: 577px) {
#main .row {
padding:0
}

.col-md-5.center.align-self-center {
padding-left:65px;
padding-right:15px
}
}