/*
    整體頁面通用格式設定
    版面字大小:16 px;
    標題: 1.75em
    次標及內容: 1em
    主色系: #4F9E56;
*/
a {
     outline: none; /* for Firefox Google Chrome  */
     behavior:expression(this.onFocus=this.blur()); /* for IE */
}

a:link {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {text-decoration: none;}
a:visited {text-decoration: none;}

img:focus {
    outline: none;
}
/*img.member-float-right:hover,img.member-float-left:hover {
   transition-duration: 1s;
   transform:rotate(360deg);
}*/   
.custom-col:hover {
    border: 1px solid #e9b129;
}

    

h1.introduction-title {
    font-size: 1.75em;
    font-weight: bold;
    color: #4D4D4D;
    margin: 20px auto!important;
}
h1.farmer-title {
    color: white;
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
    margin: 20px auto!important;

}
h2.sub-title {
    border-radius: 6px;
    letter-spacing: 0.5px;
    border: 1px dotted #4F9E56;
    color: #4F9E56;
    text-align: center;
    font-size: 1em;
    padding: 10px;
    display: inline-block;
}
    h2.sub-title-farmer {
    border-radius: 6px;
    letter-spacing: 0.5px;
    border: 1px dotted white;
    color: white;
    text-align: center;
    font-size: 1em;
    padding: 10px;
    display: inline-block;
}
.introduction-content {
    font-size: 1em;
    color: #B3B3B3;
}

.message-body {
    position: absolute;
    text-align: justify;
    /*top: 50%;*/       
    transform: translateX(-50%) translateY(-50%);
    font-size: 1em;
    padding: 5px;
    border-radius: 10px;
    height: 166px;
    width: 90%;        
}
.message-body-right {
    left: 55%;
}
.message-body-left {
    left: 45%;
}

.message-box {
    display: flex;
    align-items: center;
    padding: 0px;
}
div.farmer-frame:hover {
    background-color: rgba(79, 158, 86, 0.58);
    top: 1%;
}

.section-farmer {
    background-color: #4F9E56;
    text-align: center;
    padding-top: 20px;
    min-height: 300px;
}
img.cetner-img {
    margin: 0 auto;
}
p.farmer-name {
    color: white;
    font-size: 1em;
    margin-top: 10px;
}
.custom-col {
    width: 20%;
    float: left;
}



    .imgcenter:hover {
        opacity: 0.8;
    }

.button-padding {
    padding: 0px 10px;
    position: relative;
}
.origin-img-hover {
    display: none;
}

ul#farmer-slide>li:hover{
    transform: translateY(0.75em);
}
p.cooperate-p {
    display: none;
}



/*
    版面細節調整
*/
@media (min-width: 320px) {
.custom-col {
    width: 50%;
    float: left;
}

.personal-message {
    position: relative;
    width: 250px;
}

.message-body {
    top: 60%;       
}
.Member-NickName {
    font-size: 12px;        
}
.team-padding {
    display: flex;
    padding: 15px 0px;
}

.Member-NickName {
    margin: 0px;
    display: inline-flex;
}
.Member-Name {
    color: #4f9e56;
    font-size: 1em;
    display: inline-flex;
    margin: 0px;
    letter-spacing:-0.5px;
}

    p.cooperate-p {
        display:inline-block;
        position: absolute;
        color: #fffFFF;
        text-align: left;
        background-color: #4F9E56;
        top: 25%;
        left: 36%;
    }
}
@media (min-width: 768px) {
.custom-col {
    width: 50%;
    float: left;
}
.Member-NickName {
    font-size: 1em;       
}
.message-box-group1 {
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.message-box-group2 {
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.message-box-group3 {
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.message-box-group4 {
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}
.message-body {
    
    padding: 5px 10px;      
}
.Member-NickName {
    margin-bottom: 5px;
    display: inline-flex;
}
.Member-Name {
    color: #4f9e56;
    font-size: 1em;
    display: inline-flex;
}
}
@media (min-width: 769px) {
    .custom-col {
        width: 33.33%;
        float: left;
    }
    .personal-message {
        max-width: 300%;
    }

    .message-body {
        top: 50%; 
         padding: 5px 15px;      
    }

    .team-padding {
        display: flex;
        padding: 15px 5px;
    }
}
@media (min-width: 1024px) {
    .custom-col {
        width: 25%;
        float: left;
    }
    .message-box-group1 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}
    .message-box-group2 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
    }
    .message-box-group3 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
    }
    .message-box-group4 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px;
    }

    .member-float-left {
        position: relative;
        left: -10%;
    }
    .member-float-right {
        position: relative;
        left: 10%;
    }
    .button-padding {
    padding: 0px 10px!important;
    position: relative;
}

}
@media (min-width: 1240px) {
    .custom-col {
        width: 20%;
        float: left;
    }
    .custom-col>a>img {
        padding: 10px 20px;
    }
            .member-float-left {
        position: relative;
        left: -20%;
    }
    .member-float-right {
        position: relative;
        left: 20%;
    }
    /*shit*/
    p.cooperate-p {
        display:inline-block;
        position: absolute;
        color: #fffFFF;
        text-align: left;
        background-color: #4F9E56;
        top: 25%;
        left: 36%;
    }

    cooperate-hover-color {
    color: #4F9E56;
    background-color:#ffFFFF;
    }
}

    .font-color-white {
    color: white;
}