@charset "UTF-8";

/*
Theme Name:V2-原後綜合法律事務所 Theme
Description:原後綜合法律事務所 Theme
Theme URI: http://www.hap-law.com/
Author: Stove & Lantern
Author URI: https://stoveandlantern.com/
Version: 1.0
*/

/* --------------------------
 * title
-------------------------- */
.title {margin-bottom: 100px;color: #000;}
.title.border {margin-bottom: 100px;padding-bottom:50px;color: #000;position: relative;text-align: center;}
.title.border::before {content: '';width: 30px;height: 2px;background-color: #00A29A;display: block;position: absolute;left: 50%;margin-left: -15px;bottom: 0;}
.title.center {text-align: center;}
.title.right {text-align: right;}
.title .en {font-family: 'Playfair Display', serif;font-size:4rem;margin-bottom: 25px;letter-spacing: 4px;}
.title .en.min {font-size: 3.6rem;letter-spacing: 0;}
.title .ja {font-size: 1.6rem;letter-spacing: 3px;}
.title .text {font-size: 1.5rem;letter-spacing: 2px;margin-top: 50px;display: block;line-height: 2.4em;}
@media screen and (max-width: 1023px) {
    .title .en {font-size: 3rem;letter-spacing: 3px;margin-bottom: 20px;}
    .title .ja {font-size: 1.4rem;}
    .title .text {font-size: 1.3rem;letter-spacing: 1px;margin-top: 35px;line-height: 2em;}
    .title .text br {display: none;}
}
@media screen and (max-width: 767px) {
    .title {text-align: center;margin-bottom: 40px;}
    .title .en {font-size: 2.4rem;letter-spacing: 2px;margin-bottom: 15px;}
    .title .ja {font-size: 1.2rem;}
}

/* --------------------------
 * header
-------------------------- */
#header {display: block;z-index: 999;width: 100%;height: 120px;position:absolute;top:0px; left: 0px;overflow: hidden;padding-left: 100px;}
#header h1 {width: 250px;margin-left: 0px;height: auto;margin-top: 40px;position: relative;z-index: 99;}
#header #gnav {position: absolute;right: 0px;top: 25px;width: 100%;padding-right: 85px;line-height: 95px;}
#header #gnav > ul {font-size: 0;text-align: right;}
#header #gnav > ul > li {position: relative;display: inline-block;font-size: 1.4rem;padding: 0 15px;letter-spacing: 1px;}
#header #gnav > ul > li > a {position: relative;overflow: hidden;display: block;color: #000;}
#header #gnav > ul > li > a::before {z-index: -1;content: '';background-color: #00A29A;position: absolute;display: block;width: 100%;height: 2px;left:0;bottom: 0;transform-origin: right top;transform:scale(0, 1);transition: transform .2s;-webkit-transition:transform .2s ease;}
#header #gnav > ul > li > a:hover::before {transform-origin: left top;transform: scale(1, 1);}
#header #gnav > ul > li > a:hover {color: #00A29A;}
#header p {display: block;height: 30px;line-height: 45px;width:auto;position: absolute;top: 0;right: 100px;font-size:1.1rem;letter-spacing: 1px;}
#header p a {color: #00A29A;}
#header p a::before {content:'';width: 6px;height: 6px;background-color:#00A29A;display: block;transform: rotate(45deg);position: absolute;top: -3px;left: 50%;margin-left: -3px;}
#header p a:hover {opacity: 0.5;}
.home #header h1 {opacity: 0;}
.home #header #gnav {opacity: 0;}
.home #header.current h1 {-webkit-animation: leftin .75s .5s forwards;animation: leftin .75s .5s forwards;}
.home #header.current #gnav {-webkit-animation: leftin .75s .6s forwards;animation: leftin .75s .6s forwards;}
@media screen and (max-width: 1199px) {
    #header {display: block;z-index: 999;width: 100%;height: 80px;position:absolute;top:0px; left: 0px;overflow: hidden;padding-left: 60px;}
    #header p,
    #header #gnav {display: none;}
    #header h1 {width: 200px; height: auto;margin-top: 35px;}
}
@media screen and (min-width: 1024px) {
    #header.fixed {z-index: 9999;background-color: #fff;position:fixed;top:0px; left: 0px;-webkit-animation: topin .3s forwards;animation: topin .3s forwards;border-bottom: 1px solid #f5f5f5;}
    #header.fixed h1 {margin-top: 30px;transition: inherit;-webkit-transition:inherit;}
    #header.fixed p {display: none;}
    #header.fixed #gnav {position: absolute;right: 0px;top: 5px;transition: inherit;-webkit-transition:inherit;}
    #header.fixed {height: 90px;}
    @media screen and (min-width: 1200px) {
        #header.fixed {height: 100px;}
    }
}
@media screen and (max-width: 1023px) {
    #header {padding-left: 35px;position: fixed;background-color: #fff;height: 80px;}
    #header h1 {width: 200px; height: auto;margin-top: 25px;}
}
@media screen and (max-width: 767px) {
    #header {height: 60px;padding-left: 20px;}
    #header h1 {width:150px; height: auto;margin-top: 18px;}
}

/* --------------------------
 * map_canvas
-------------------------- */
#map_canvas {background-color: #ccc;width:100%;height: 500px;display: block;position: relative;z-index: 1;}
#map_canvas p {border-radius: 20px;-webkit-border-radius: 20px;overflow:hidden;border: 1px solid #333;font-size: 1.2rem;z-index: 9999;width: 200px;height: 42px;line-height: 40px;display: block;text-align: center; color: #fff;position: absolute;left: 50%;margin-left: -100px;bottom: -20px;}
#map_canvas p a {background: #fff;color: #000;display: block;height: 40px;line-height: 40px;}
#map_canvas p a:hover {color: #fff;background-color: #00A29A;}
#map_canvas p:hover {border: 1px solid #00A29A;}
@media screen and (max-width: 1023px) {
    #map_canvas {height: 400px;margin-left: 0px;}
}
@media screen and (max-width: 767px) {
    #map_canvas {height: 300px;margin-left: 0px;}
    #map_canvas p {border-radius: 15px;-webkit-border-radius: 15px;font-size: 1.1rem;width: 180px;height: 32px;line-height: 30px;margin-left: -90px;bottom: -15px;}
    #map_canvas p a {background: #fff;color: #000;display: block;height: 30px;line-height: 30px;}
}


/* --------------------------
 * contact
-------------------------- */
#contact {position: relative;background-color: #00A29A;margin: 0;padding: 20px 0;margin-top: 50px;}
#contact .container-sm {display: block;margin: 0 auto!important;padding: 0!important;height:60px;}
#contact .container-sm figure {width: 40px;position: absolute;left: 0;top: 16px;}
#contact .container-sm h1 {padding-left: 60px;height: 60px;line-height: 60px;color: #fff;font-size: 1.6rem;display: block;}
#contact .container-sm .btn {width: 200px!important;position: absolute;right: 0;top: 0px;}
#contact .container-sm .btn::before {background:#00635E;}
#contact.detail .container-sm .btn  {width: 300px!important;position:relative;right:inherit;top:inherit;margin: 0 auto;}
#contact.detail .container-sm .btn::before {background:#00635E;}
@media screen and (max-width: 1124px) {
    #contact .container-sm figure {left: 50px;}
    #contact .container-sm h1 {padding-left: 120px;font-size: 1.4rem;}
    #contact .container-sm .btn {width: 180px!important;right: 50px;}
}
@media screen and (max-width: 1023px) {
    #contact .container-sm figure {left: 50px;top: 13px;}
    #contact .container-sm h1 {padding-right: 260px;padding-left: 120px;font-size: 1.3rem;line-height: 1.6em;height:auto;padding-top: 7px;padding-bottom: 5px;}
    #contact .container-sm .btn {width: 180px!important;right: 50px;}
}
@media screen and (max-width: 767px) {
    #contact {position: relative;background-color: #00A29A;margin: 0;padding: 20px 0;margin-top: 0px;}
    #contact .container-sm {display: block;height:auto;}
    #contact .container-sm figure {left: 20px;top: 5px;width: 30px;}
    #contact .container-sm h1 {padding-right:20px;padding-left: 70px;font-size: 1.2rem;letter-spacing: 0.5px;line-height: 1.8em;height:auto;padding-top: 0px;padding-bottom: 20px;}
    #contact .container-sm .btn {width: 180px;position: inherit;right: inherit;top: inherit;margin: 0 auto;}

}

/* --------------------------
 * footer
-------------------------- */
#footer {padding: 100px 0 80px;}
#footer h1 {width: 300px;height: auto;margin: 0px;}
#footer .container-sm {height: 350px;}
#footer .container-sm .footNav {position: absolute; right:0px;top: 100px;}
#footer .container-sm .footNav h2 {font-weight: bold;margin-bottom: 15px;margin-left: -15px;}
#footer .container-sm .footNav ul {width: 200px; float: left;}
#footer .container-sm .footNav ul.min {width: 130px; float: left;}
#footer .container-sm .footNav ul li {position: relative;letter-spacing: 1px;line-height: 1em;display:block;font-size: 1.4rem;margin-bottom: 20px;letter-spacing: 1px;}
#footer .container-sm .footNav ul li::before {content: '';width: 5px; height: 1px;background-color: #0A162D;position: absolute; top: 7px;left:-15px;}
#footer .container-sm .footNav ul li a {display: block;}
#footer .container-sm .address {font-size: 1.4rem;position: absolute; top: 100px;left: 0px;line-height: 1.8em;}
#footer .container-sm .address span {display: block;margin-bottom: 10px;font-size: 1.4rem;}
#footer .container-sm .address a {text-decoration: underline;margin-left: 20px;display: block;}
#footer .container-sm .address a:hover {opacity: 0.5;}
#footer .container-sm .subNav {position: absolute; bottom: 0px;right: 0px;display: block;margin:0;padding: 0;}
#footer .container-sm .subNav ul {font-size: 0;line-height: 1em;margin:0;padding: 0;}
#footer .container-sm .subNav ul li {line-height: 1em;display:inline-block;margin-left: 25px;font-weight: 400;letter-spacing: 2px;font-size: 1rem;}
#footer .container-sm .subNav ul li a {position: relative;display: block;overflow: hidden;}
#footer .container-sm .subNav ul li a::before {content: '';height: 1px; width: 100%;position: absolute;left: 0;top: 50%;background-color:#697269;transform-origin: right top;transform:scale(0, 1);transition: transform .3s ease;-webkit-transition:transform .3s ease;}
#footer .container-sm .subNav ul li a:hover::before {transform-origin: left top;transform: scale(1, 1);}
#footer .container-sm .copyright {font-family: 'Lato', serif;font-weight:300;letter-spacing: 2px;position: absolute;bottom: 15px;left: 0;width: 50%;line-height: 1em;font-size: 1.2rem;}
#footer .container-sm .copyright span {font-size: 1rem;}
@media screen and (max-width: 1124px) {
    #footer h1 {width: 240px;}
    #footer .container-sm .footNav {right: 50px;}
    #footer .container-sm .address {left: 50px;}
    #footer .container-sm .copyright {left: 50px;}
}
@media screen and (max-width: 1023px) {
    #footer {padding: 75px 0;}
    #footer h1 {width: 240px;height: auto;margin: 0px auto 50px;}
    #footer .container-sm {height:auto;}
    #footer .container-sm .footNav {display: none;}
    #footer .container-sm .address {position: relative;top: inherit;left: inherit;width: 100%;text-align: center;margin-bottom: 50px;line-height: 2em;}
    #footer .container-sm .address a {margin-left: 0;display: block;}
    #footer .container-sm .copyright {font-size: 1rem;position: relative;bottom: inherit;left: inherit;width: 100%;text-align:center;}
    #footer .container-sm .copyright span {display:none;}
}
@media screen and (max-width: 767px) {
    #footer {padding: 50px 0;}
    #footer h1 {margin: 0px auto 35px;width: 210px;}
    #footer .container-sm .address {font-size: 1.1rem;}
}