.fv{
    background-image: linear-gradient( rgba(20,20,20, .5), rgba(20,20,20, .5)), url(../images/fv_contact.jpg);
}
.cont{
    color: #555;
    line-height: 2em;
}
.en{
    font-weight: 100;
}
.contact h2, .contact h3 {
    font-weight: 100;
}
@media screen and (min-width:801px){
    .fv{
        margin: 40px 0 10px;
        max-height: 420px;
    }
    .fv .text{
        padding: 17% 0;
        line-height: 3em;
    }
    .text h1 {
        font-size: 35px;
    }
    .text h3 {
        font-size: 30px;
    }
    .cont{
        padding: 50px 20px;
    } 
    .contact{
        line-height: 2.5em;
        margin: 2em 0;
    } 
    .main-text{
        float: left;
    } 
    .main-text {
        width: 450px;
    }
    
    .btn_more-contact a {
        padding: 0.6em 1em 0.8em!important;
    }
    .btn_more{
        margin: 90px auto 70px!important;
    }
    form{
        float: right;
        width: 500px;
    }
    form input {
        font-size: 14px;
        padding: 0.6em;
        width: 500px;
        height: 3em;
        margin: 0.5em 0;
        border: 2px solid;
        border-color: #dec497;
    }
    textarea {
        font-size: 14px;
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 100;
        padding: 0.6em;
        width: 500px;
        height: 13em;
        border: 2px solid;
        border-color: #dec497;
        max-width: 500px;
        margin: 0.5em 0;
        font-family: sans-serif;
    }
    .btn-more {
        color: #274357;
        float: right;
        box-shadow: #274357 4px 4px;
        font-size: 1em;
        border: 2px solid #dec497;
        margin: 0.5em 0;
        padding: 0.3em 1.7em;
        background-color: #fff;
    }
    button:hover{
        -moz-transform: translate(4px, 4px);
        -ms-transform: translate(4px, 4px);
        -o-transform: translate(4px, 4px);
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);
        transition-duration: 0.3s;
        box-shadow: #274357 0 0;
      }
      .btn_more:active{
        transform: translate(4px, 10px);
        -moz-transform: translate(4px, 10px);
        -ms-transform: translate(4px, 10px);
        -o-transform: translate(4px, 10px);
        -webkit-transform: translate(4px, 10px);
        
      }
      .contact img {
        width: 200px;
    }
      
}
@media screen and (max-width:800px){
    .fv{
        height: 8em;
        position: relative;
    }
    .text{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .text h1 {
        font-size: 6.5vw;
    }
    .text h3 {
        font-size: 6vw;
    }
    .wrapper{
        padding: 5%;
    }
    .contact{
        line-height: 2.5em;
        margin: 1em 0;
    } 
    .contact .left {
        width: 40%;
        margin-left: -4%;
    }
    .contact img {
        width: 90%;
        margin-bottom: 10px;
    }

    .contact .right {
        margin-top: 15px;
        font-size: 4vw;
        line-height: 6.3vw;
    }
    .cont{
        box-sizing: border-box;
        width: 100%;
        padding: 3% 5%;
    }
    form{
        float: right;
        width: 100%;
    }
    form input {
        font-size: 14px;
        padding: 0.6em;
        width: 100%;
        height: 3em;
        margin: 0.5em 0;
        border: 2px solid;
        border-color: #dec497;
    }
    textarea {
        font-size: 14px;
        font-family: 'Noto Sans TC', sans-serif;
        font-weight: 100;
        padding: 0.6em;
        width: 100%;
        height: 13em;
        border: 2px solid;
        border-color: #dec497;
        margin: 0.5em 0;
        font-family: none;
    }
    .btn-more {
        color: #274357;
        float: right;
        background-color: #fff;
        font-size: 1em;
        border: 2px solid #dec497;
        margin: 0.5em 0;
        padding: 0.3em 1.7em;
    }
   
}


#map_pc .mapouter{
    position:relative;
    text-align:right;
    height:500px;
    width:1000px;
}
#map_pc .gmap_canvas {
    overflow:hidden;
    background:none!important;
    height:500px;
    width:1000px;
}
#map_sp .mapouter{
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 75%;
}
#map_sp iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}