@charset "UTF-8";

/* 思源宋體 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@800&family=Cormorant+Garamond:wght@700&family=Playfair+Display:wght@800&family=DM+Serif+Display&display=swap');

body {
	background-color: #fff;
    font-family: Microsoft JhengHei;
}
main {
    overflow: hidden;
}


/* header-custom 頁首-自定義css */

.header-custom {
    width:100%;
    position: fixed !important;
    background-color: rgba(0,0,0,0.2);
    z-index:1;
}
.header-custom .area {
    width:100%;
    z-index:1000;
    padding:0;
    /*background:#fff;*/
    /*border-bottom:1px solid #bfbfbf;*/
}

/* 上方連結 ------------------------------------------------------------------*/
.header-custom .skybar {
    background: none;
    display:none;
    min-height: 0;
    margin-bottom: 0;
    border: 0;
    border-radius:0;
    padding:0 8%;
}
.header-custom .skybar ul li {
    position:relative;
    list-style-type: none;
    display: inline-block;
    padding: 0 8px;
    line-height: 28px;
    color:#eee;
}
.header-custom .skybar a {
    color: #eee;
    text-decoration: none;
}
.header-custom .skybar a:hover {
    color: #fff;
}
.header-custom .skybar .open .dropdown-menu {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding:0;
    border-radius:0;
}
.header-custom .skybar .nav-fit {
    float: right;
}
/* 搜尋 */
.header-custom .search {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
}
/* 搜尋框 */
.header-custom .search .stylish-input-group {
    position: absolute;
    right:0;
    top:-23px;
}
.header-custom .search input.form-control {
    border: none;
    padding: 0px;
    width: 25px;
    box-shadow: none !important;
    height:28px;
    background-color: #fff;
    color: #000 !important;
    opacity:0;
}
/* 搜尋框內文字 */
.header-custom .search .input-group.stylish-input-group input::placeholder {
 color: #bbb !important;
}
/* 搜尋框開啟 */
.header-custom .search .input-group:hover.stylish-input-group input.form-control {
    padding:0 10px;
    width: 150px;
    opacity:1;
}
.header-custom .search input.form-control,
.header-custom .search .search-icon-btn {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* 搜尋按鈕 */
.header-custom .search-submit {
    position: absolute;
    border:none;
    background: transparent;
    right: 0;
    outline: none;
    z-index: 100;
    font-size:0.9em;
    padding: 0 5px;
}
.header-custom .search-submit svg {
    position: relative;
    bottom:-2px;
}
.header-custom .search-submit:hover svg,
.header-custom .search-submit:focus svg,
.header-custom .input-group:hover svg,
.header-custom .input-group:focus svg {
    color:#333;
}
@media (max-width: 1040px) {
    .header-custom .skybar {
        display:none;
    }
}

/* logo ------------------------------------------------------------------*/
.header-custom .logo {
    min-height: 0px;
    text-align:left;
    /*height:100px;*/
    padding:15px 8%;
}
.header-custom .logo a {
    position:relative;
    display:inline-block;
    padding: 0;
    margin: 0;
    line-height: 0 !important;
}
.header-custom .logo img {
    height:40px;
}
@media (max-width: 1040px) {
    .header-custom {
    background-color: rgba(0,0,0,0.5);
}
    .header-custom .logo {
        height: auto;
        padding:10px 20px;
    }
    .header-custom .logo a {
    }
    .header-custom .logo img {
        height: 40px;
    }
}

/* mainMenu主選單 ------------------------------------------------------------------*/
.header-custom .mainMenu {
    margin-bottom:0;
    padding:0 8%;
    border:none;
    border-radius: 0px;
    width: 100%;
    min-height: 0px;
}
.header-custom .mainMenu>nav {
    position: relative;
    margin-top: 0px;
}
.header-custom .mainMenu .menulist {
    position:absolute;
    display:block;
    top: -60px;
    right:0;
}
.header-custom .menulist > li {
    display: inline-block;
    text-align: center;
    font-size:1.3rem
}
.header-custom .menulist > li:before {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0px;
    height: 5px;
    -webkit-transition-property: right;
    transition-property: right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    background: #fff;
}
.header-custom .menulist > li:hover:before,
.header-custom .menulist > li.open:before {
    right: 0;
}
.header-custom .mainMenu .menulist>li a {
    display: inline-block;
    padding:20px 17px;
    width:100%;
    z-index:900;
    color: #fff;
}
.header-custom .mainMenu .menulist>li>a {
    filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.4));
}
.header-custom .mainMenu .menulist>li:hover a,
.header-custom .mainMenu .menulist>li.open a {
    color: #fff;
}
.header-custom .mainMenu .menulist>li.open>a {
    background: transparent;
}
.header-custom .mainMenu .menulist>li .dropdown-submenu > a:hover:after,
.header-custom .mainMenu .menulist>li.open .dropdown-submenu > a:hover:after {
    border-left-color: #fff;
}

.header-custom .mainMenu .menulist>li a.caret {
    position:absolute;
    display:block;
    width:15px;
    height:40px;
    padding:0;
    border:none;
    font-family: FontAwesome;
    z-index:1010;
    top:10px;
    right:0;
    cursor:pointer;
    z-index:1000;
    line-height:40px;
    text-align:center;
}
@media (max-width: 1040px) {
    .header-custom .mainMenu .menulist>li>a {
        filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0));
    }
}

/* 主選單第二層 ------------------------------------------------------------------*/
.header-custom .menulist .dropdown-menu {
    min-width:130px;
    text-align:center;
    font-size: 1.1rem;
    border-radius: 0px;
    box-shadow: none;
    padding: 0;
}
.header-custom .menulist .dropdown-menu li {
    position:relative;
    min-width:100%;
    text-align:center;
}
.header-custom .menulist>li:hover>.dropdown-menu,
.header-custom .menulist>li.open>.dropdown-menu {
    margin-top: 0px;
}
.header-custom .mainMenu > li {
    padding: 20px 10px;
}
.header-custom .mainMenu > li > a {
    padding: 20px 10px;
}
/* 主選單第二層以後顏色 */
.header-custom .dropdown-menu {
    color: #333;
    background-color: #f2f3f5;
    border: none;
}
.header-custom .dropdown-menu li a {
    color: #333!important;
}
.header-custom .dropdown-menu li a:hover {
    background: #d75d07;
    color: #fff !important;
}
.header-custom .dropdown-menu > .active > a,
.header-custom .dropdown-menu > .active > a:focus,
.header-custom .dropdown-menu > .active > a:hover {
    background: #d75d07 !important;
    color: #fff !important;
}


@media (max-width: 1040px) {
    /* 主選單第二層以後 */
    .header-custom .menulist .dropdown-menu {
        font-size: 1.05rem;
        margin: 0;
        background-color: #fff;
        border: 0px solid transparent;
    }
}

/* 主選單第三層以後 */
.header-custom .menulist>li.dropdown>ul .dropdown-menu {
    position:absolute;
    top:0;
    margin-top:0;
    left:100%;
}
.header-custom .menulist>li li:hover>.dropdown-menu {
    display:block;
}

@media (min-width: 1041px) {
    .header-custom .dropdown:hover>.dropdown-menu {display: block;}
}
@media (max-width: 1040px) {
    .header-custom .mainMenu {
        padding: 0;
        border: none;
    }
    .header-custom .mainMenu .menulist {
        position: relative;
        display:block;
        float:none;
        top: 0px;
        text-align: center;
        margin-bottom: 0;
    }
    .header-custom .mainMenu .nav-menu {
        float:none;
        background: #5e5e5e;
    }
    .header-custom .menulist > li:before {
        content: "";
        position: absolute;
        left: 0;
        right: 100%;
        bottom:0;
        height:0;
        background: none;
    }
    .header-custom .mainMenu .menulist>li a {
    }
    .header-custom .mainMenu .menulist>li a.caret {
        width:60px;
        height:60px;
        line-height:60px;
        top: 0;
    }
    .header-custom .menulist>li:hover>.dropdown-menu,
    .header-custom .menulist>li.open>.dropdown-menu {
        margin-top: 0;
    }
    .header-custom .dropdown.open > .dropdown-menu {
        background-color: #fff;
    }
    .header-custom .mainMenu .menulist>li:hover>a,
    .header-custom .mainMenu .menulist>li.open>a {
        background-color: #000 !important;
        color: #fff;
    }
    .header-custom .dropdown-menu li a:hover  {
        background-color: #000 !important;
        color: #fff;
    }
    .header-custom .open .dropdown-menu {
        display: block;
        margin-top: 0px;
        position: relative;
        width: 100%;
    }
    /*主選單第三層以後*/
    .header-custom .menulist>li.dropdown>ul .dropdown-menu {
        position: relative;
        top: 0;
        left:0;
    }
    .header-custom .menulist>li.dropdown>ul .dropdown-menu a {
        padding: 20px 5px 20px 40px !important;
    }
    /*漢堡選單*/
    .navbar-default .navbar-header {
        height: inherit ;
        position: absolute;
        top: -50px;
        right: 0;
    }
    .navbar-default .navbar-toggle {
        display: block;
        z-index: 3000;
       padding: 12px 12px;
       margin-top: 0;
       margin-right: 8px;
       margin-bottom: 0;
       border-radius: 4px;
    }
    .navbar-default .navbar-toggle .icon-bar {
        width: 30px;
        height: 2px;
        background-color: #fff !important;
    }
    .navbar-toggle .icon-bar+.icon-bar {
        margin-top: 7px;
    }
    .navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
        background-color: #fff !important;
    }
    .navbar-default .navbar-toggle {

        border-color: none;
        border: none;
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #5e5e5e;
        border-color: #5e5e5e;
    }
    
    /* dropdown-menu (第二層以後的選單) */
    .header-custom .menulist > li > a:hover, 
    .header-custom .menulist > .open > a, 
    .header-custom .menulist > .open > a:focus, 
    .header-custom .menulist > .open > a:hover {
        color: #fff;
        font-weight:normal;
        background-color: #d75d07;
    }
    .header-custom .menulist > li > a:before {
        background: #d75d07;
    }
    .header-custom .menulist > li > a:hover:before {
        background: #d75d07;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    .header-custom .menulist > li > a:focus,
    .header-custom .menulist > li > a:hover {
        color: #d75d07;
        background-color: transparent;
    }
    .header-custom .menulist > .active > a,
    .header-custom .menulist > .active > a:focus,
    .header-custom .menulist > .active > a:hover {
        background-color: transparent;
    }
      /* ff only */
      @-moz-document url-prefix() {
         .dropdown-submenu > a:after {
         margin-top: -10px;
        }
    }
}

@media screen and (min-width: 992px) and (max-width: 1040px) {
    .nav-fit {
        position: absolute;
        padding: 0px;
        z-index: 600;
    }
    .navbar-collapse > .nav-menu {
        margin-top: 0px !important;
    }
}

@media only screen and (max-width: 1040px) {
    /* menu settings (行動版選單設定) */
     .nav-fit .hidden-sm {
        display: none;
    }
     .navbar-form {
        padding: 0 15px;
        width: auto;
    }
     .navbar-nav > li:first-child {
    }
     .navbar-nav > li > a {
        line-height: 20px;
    }
     .nav > li > a {
        position: relative;
        display: block;
        padding: 10px;
    }
     .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
        color: #fff;
    }
     .navbar-collapse > .nav-menu {
        margin-top: 0px;
    }
     .navbar-collapse > .nav-fit {
        display: block;
        width: 100%;
    }
     .navbar-collapse.collapse {
        display: none !important;
        background: #5e5e5e;
        overflow:visible;
    }
    
     .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-collapse.collapse .menulist {
        -webkit-animation: click 0.3s linear;
        overflow: hidden;
    }
    .navbar-collapse.collapse.in .menulist {
    }

    @-webkit-keyframes "click" {
        0% {
          height: 0;
        }
        100% {
          height: 300px;
        }
      }
    

     .collapsing {
        overflow: hidden !important;
    }
     .navbar-right {
        float: none !important;
    }
     .navbar-top .nav-fit .navbar-form {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
     .nav-menu li {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }
     .dropdown.open > .dropdown-menu {
        width: 100% !important;
        position: static;
        float: none;
        border: none;
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border-color: #000;
        border: none;
    }
}


/* -- 常駐選單 --------------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 999;
    filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.4));
}

.media-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 30px;
    width: 48px;
    margin-bottom: 10px;
}

.media-link a {
    text-decoration: none;
}

.go-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 30px;
}

.media-link,
.go-top {
    background: #d6bc85;
}

.tab-opt a {
    position: relative;
    text-align: center;
    text-decoration: none;
    padding: 10px 0px;
    font-size: 1.2rem;
    color: #fff;
    padding: 15px 0px;
    filter: drop-shadow( inset 2px 3px 5px rgba(0, 0, 0, 0.5));
    transition: 0.3s;
}

.tab-opt a:hover {
    color: #333;
    text-decoration: none;
}

.media-link a::after {
    content: '';
    width: 100%;
    height: 100%;
    border-width: 0;
    border-right: 1px solid;
    border-image: linear-gradient(rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0)) 1 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    transform: rotateZ(-90deg);
}

.media-link a:first-of-type::after {
    display: none;
}

.media-link a span {
    display: none;
}

@media screen and (max-width: 1000px) {
    .sidebar {
        top: unset;
        left: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 999;
        filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
        transform: translateY(0%);
    }
    .media-link {
        flex-direction: row;
        justify-content: space-around;
        align-self: center;
        border-radius: 0px;
        width: 100%;
        margin-bottom: 0px;
    }
    .media-link a {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .media-link a span {
        display: inline;
        font-size: 12px;
        margin-top: 6px;
    }
    .media-link .icon-arrow-up {
        display: block;
    }
    .go-top {
        display: none;
    }
    .media-link a::after {
        transform: rotateZ(180deg);
    }
    .media-link,
    .go-top {
        background-color: rgba(0,0,0,0.7);
    }
}

.num {
    writing-mode: horizontal-tb;
    transform: translate(-10px, 5px);
}

@media screen and (max-width:375px) {
    .num {
        display: contents;
    }
}
.pc {
    display: block;
}
.mb {
    display: none;
}
@media screen and (max-width:1000px) {
    .pc {
        display: none !important;
    
    }
    .mb {
        display: block;
    }
}

/* -- 主視覺 --------------------------------------------------------------------------------- */
.index_mainbanner-01 {
    position: relative;
    text-align: center;
}

/* 文字 */
.index_mainbanner-01 .text {
    position: absolute;
    right: 10%;
    top: 20%;
    font-size: 1.5rem;
    color: #fff;
    font-family: 'Noto Serif TC',serif;
    writing-mode: vertical-rl;
    line-height: 1.5;
    text-align: left;
}
.index_mainbanner-01 .text p {
    border-left: 1px solid #fff;
}
.index_mainbanner-01 .text span {
    display: inline-block;
    font-size: 3rem;
    position: relative;
    left: -5px;
    padding-bottom: 10px;
}
.index_mainbanner-01 .text2 {
    position: absolute;
    display: inline-block;
    width: 30%;
    left: 8%;
    bottom: 16%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Noto Serif TC',serif;
    line-height: 1.8;
    text-align: left;
}
.index_mainbanner-01 .text2 span {
    font-size: 2rem;
    border-bottom: 1px solid;
    width: 100%;
    display: inline-block;
    padding-bottom: 10px;
}
.index_mainbanner-01 .logo-mark {
    position: absolute;
    display: inline-block;
    width: 100px;
    bottom: 40%;
    background: none;
    transform: translateX(-50%);
}


/* 滾輪記號 */
.scroll-icon-wrap {
    display: inline-block;
    position: absolute;
    bottom: 80px; 
    color:#fff;
    transform: translateX(-50%);
}
.scroll-icon{
    display:inline-block;
    width: 30px;height: 60px; border: 1.5px solid #fff; border-radius: 30px; margin: auto;
    position: relative;
}
.scroll-icon-wrap p{margin:5px 0 0 0;text-align: center;}
.scroll-icon::before{content:'';position: absolute; width: 2px;height: 20%;background: #fff;border-radius:2px ; top: 50%; left: 50%; transform: translate(-50%,-100%);opacity: 0; animation: scroll-mouse 1s ease-in-out infinite;}
@keyframes scroll-mouse{
    0%{ transform: translate(-50%,-120%);opacity: 0;}
    50%{ transform: translate(-50%,-50%);opacity: 1;}
    100%{ transform: translate(-50%,100%);opacity: 0;}
}


@media screen and (max-width: 1000px) {
    .mobile_banner {
        display: block;
    }
    .pc_banner {
        display: none;
    }
    .index_mainbanner-01 .text {
        position: absolute;
        right: 0;
        top: 80px;
        font-size: 0.9rem;
        color: #fff;
        font-family: 'Noto Serif TC',serif;
        writing-mode: vertical-rl;
        line-height: 1.3;
        text-align: left;
    }
    .index_mainbanner-01 .text span {
        font-size: 1.7rem;
        left: -5px;
        padding-bottom: 5px;
    }
    .index_mainbanner-01 .text2 {
        width: 90%;
        left: 20px;
        bottom: 170px;
        font-size: 0.85rem;
        font-weight: normal;
        color: #fff;
        font-family: 'Noto Serif TC',serif;
        line-height: 1.7;
        text-align: left;
    }
    .scroll-icon-wrap {
        bottom: 50px;
    }
}

img.demo {
    width: 100%;
}


.area {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    height: 100%;
}
.area:after {
    display: table;
    content: " ";
    clear: both;
}
.area .cont,
.area .pic {
    position: relative;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.area.anti .cont,
.area.anti .pic {
    float: right;
}
.area .cont {
    width: 50%;
    padding: 0;
    line-height: 1.7;
}
.area .sub {
    position: relative;
    font-family: 'Noto Serif TC',serif;
    display: block;
    font-size: 3vmax;
    padding-bottom: 10px;
    font-weight: bold;
    line-height: 1;
    letter-spacing:4px;
    white-space:nowrap;
    color: #424242;
    /*text-shadow: 0 2px white, 2px 0 white, -2px 0 white, 0 -2px white;
    z-index: 1;*/
}
.area .title {
    position: relative;
    padding: 0;
    text-align: center;
}
.area .article {
    position: relative;
    padding: 0;
    text-align: center;
}
.cont p {
    padding-bottom: 20px;
}
.area .pic {
    width: 50%;
    padding: 0 0 0 20px;
}
.area .cont .btn {
    text-align: center;
    padding-bottom: 10px;
}
.btn-area {
    text-align: center;
    padding-top: 20px;
}
.btn-area .btn {
    display: inline-block;
    border: 2px solid #000;
    border-radius: 50px;
    font-size: 19px;
    padding: 10px 0;
    width: 160px;
    margin: 0;
    transition: 0.3s;
    color: #333;
    text-align: center;
    line-height: 1;
    background: none;
    transition: 0.3s;
}
.btn-area .btn:hover {
    background: #d6bc85;
    border: 2px solid #857a65;
    color: #fff;
    transition: 0.3s;
}
@media screen and (max-width: 1000px) {
    .area .cont,
    .area .pic {
        width: 100%;
    }
    .area .cont {
        padding: 0px;
    }
    .area .sub {
    }
    .area .article {
    }
    .area .cont p {
    }
     .area .pic {
    }
    .area .cont .bg {
    }
}

/* 公司理念 */
.company {
    height: 500px;
    color: #fff;
    display: flex;
    align-items: center;
} 

.company .text {
    position: absolute;
    display: inline-block;
    width: 35%;
    right: 8%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Noto Serif TC',serif;
    line-height: 1.8;
    text-align: left;
    text-shadow: rgb(3, 3, 3) 0px 1px 4px;
    padding-left: 40px;
    border-left: 1px solid #fff;
}

@media screen and (max-width: 1000px) {
    .company {
        height: auto;
        color: #fff;
        display: flex;
        align-items: center;
        background: url('images/photos/bg.jpg') no-repeat center!important;
        background-size:cover !important;
        height: auto;
        display: none;
    } 
    .company .text {
        position: relative;
        display: inline-block;
        width: 100%;
        right: auto;
        font-size: 1rem;
        color: #fff;
        font-family: 'Noto Serif TC',serif;
        line-height: 1.8;
        text-align: left;
        text-shadow: rgb(3, 3, 3) 0px 1px 4px;
        padding: 20px;
        border-left: none;
    }
}

/* 002 */
.area.--002,
.area.--003 {
    background: repeat center url("../image/.jpg");
}
.area.--002 {
    /*background: url("../images/bg-deco-flow-top.png")  left top no-repeat;*/
    background-size: 60% auto;
    padding: 60px 6%;
    display: flex;
    align-items: center;
}
.area.--002::before {
    content: '';
    width: 20%;
    height: 800px;
    position: absolute;
    left: 0px;
    top: -50%;
    background: url(../images/golden-circle-left-bottom.png) left no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

.area.--003 {
    padding: 0 10% 60px;
}
.area.--002 .title,
.area.--003 .title {
    padding: 0 0 10px;
}
.area.--002 .cont,
.area.--003 .cont {
    width: 45%;
}
.area.--002 .pic,
.area.--003 .pic {
    width: 55%;
}
.area.--003 .pic {
    padding: 0 20px 0 0;
}
.area .sub-bg {
    display: inline-block;
    /*transform: translate(-50%);*/
    width: 100%;
    max-width: 470px;
    margin-top: -100px;
}
.area.--002 .bg,
.area.--003 .bg {
    margin: 0 -20px !important;
    text-align: center;
}
.area.--002 .bg img,
.area.--003 .bg img {
    width: 100%;
    max-width: 470px;
    margin-bottom: -40px;
}
@media screen and (max-width: 1000px) {
    .area.--002 {
        padding: 0;
        margin: 10px 0;
        /*border: 5px #eee solid;*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .area.--002 .cont {
        padding: 20px;
        /*border: 5px #eee solid;*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .area.--003 {
        padding: 20px;
    }
    .area.--002 .cont,
    .case .cont,
    .area.--002 .pic,
    .case .pic {
        width: 100%;
    }
    .area.--002 .pic,
    .area.--003 .pic {
        padding: 0;
    }
    .area.--002 .pic {
        border-bottom: none;
    }
}
@media screen and (max-width: 470px) {

}
.area.--002 .text {
}
@media screen and (max-width: 1000px) {
}


/* 業績 case */

.case {
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    height: 100%;
    padding: 60px 6%;
}

.case::before {
    content: '';
    width: 20%;
    height: 800px;
    position: absolute;
    right: 0px;
    top: -400px;
    background: url(../images/golden-circle-left-bottom.png) left no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
    transform:rotate(180deg);
}

.case:after {
    display: table;
    content: " ";
    clear: both;
}

.case .item {
    background-size: 60% auto;
    padding: 30px;
    margin: 30px 0;
    border: 5px #eee solid;
    display: flex;
    align-items: center;
    justify-content: center;
}

.case .title {
    position: relative;
    padding: 0 0 10px;
    text-align: center;
}

.case .sub {
    position: relative;
    font-family: 'Noto Serif TC',serif;
    display: block;
    font-size: 3vmax;
    padding-bottom: 10px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 4px;
    white-space: nowrap;
    color: #424242;
}
.case .cont {
    width: 600px;
    color: #333;
    line-height: 1.7;
    text-align: left;
}
.case .article {
    position: relative;
    padding: 0;
    text-align: center;
    font-family: "微軟正黑體";
}

.case .pic {
    width: 400px;
}

.area .sub-bg {
    display: inline-block;
    /*transform: translate(-50%);*/
    width: 100%;
    max-width: 470px;
    margin-top: -100px;
}

.case .anti {
    flex-direction: row-reverse;
}
.case .anti::before {
    content: '';
    width: 20%;
    height: 800px;
    position: absolute;
    left: 0px;
    bottom: 30%;
    background: url(../images/golden-circle-left-bottom.png) left no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}


@media screen and (max-width: 1000px) {
    .case {
        padding: 0 10px;
    }
    .case .item {
        padding: 20px;
        margin: 10px 0;
        border: 5px #eee solid;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .case .pic {
        width: 100%;
    }
    .case .cont {
        font-size: 1.2vmax;
        padding: 20px 0 0;
    }
    .case .article {
        display: none;
    }
    .case .btn-area {
        text-align: center;
        padding-top: 0px;
    }
    .btn-area .btn {
        font-size: 14px;
    }

    
}


/* 004 影片 */
.area.--004 {
    position: relative;
}
.area.--004 .title {
    height: 68px;
    background: url(../image/004-title.jpg) no-repeat;
    background-position: center;
    color:rgba(255,255,255,0)
}
.area.--004 .vedio {
    display: flex;
    width: 100%;
    padding: 60px;
}
.area.--004 .vedio .item {
    width: 30%;
    padding: 0 20px;
    box-sizing: border-box;
}
.area.--004 .vedio .item h3 {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #e96805;
    color: #fff;
    text-align: center;
    font-size: 24px;
    margin: 10px 0 30px;
}
@media screen and (max-width: 1000px) {
    .area.--004 .vedio {
        padding: 30px 0;
        flex-direction: column;
    }
    .area.--004 .vedio .item {
        width: 100%;
    }
    .area.--004 .vedio .item h3 {
        font-size: 19px;
    }
}

/* life 一畝田 */

.field {
    height: 600px;
    color: #fff;
    display: flex;
    align-items: center;
}

.field .title {
    position: absolute;
    left: 8%;
    top: 10%;
    font-size: 5rem;
    color: #fff;
    font-family: 'Noto Serif TC',serif;
    writing-mode: vertical-rl;
    line-height: 1.5;
    text-align: left;
    text-shadow: rgb(3, 3, 3, .6) 0px 0px 4px;
    border-left: 1px solid #fff;
}

.field .text {
    position: absolute;
    display: inline-block;
    width: 35%;
    right: 8%;
    bottom: 15%;
    font-size: 1.2rem;
    color: #fff;
    font-family: 'Noto Serif TC',serif;
    line-height: 1.8;
    text-align: left;
    text-shadow: rgb(3, 3, 3) 0px 1px 4px;
    padding-left: 40px;
    border-left: 1px solid #fff;
}

@media screen and (max-width: 1000px) {
    .field {
        height: auto;
        color: #fff;
        display: flex;
        align-items: center;
        background: url('images/photos/bg.jpg') no-repeat center!important;
        background-size:cover !important;
        height: auto;
    }

    .field .title {
        position: relative;
        left: auto;
        top: auto;
        font-size: 5rem;
        color: #333;
        font-family: 'Noto Serif TC',serif;
        writing-mode: vertical-rl;
        line-height: 1.5;
        text-align: left;
        text-shadow: rgb(3, 3, 3, 0) 0px 0px 4px;
        border-left: none;
    }

    .field .text {
        position: relative;
        display: inline-block;
        width: 100%;
        right: auto;
        font-size: 1rem;
        color: #333;
        font-family: 'Noto Serif TC',serif;
        line-height: 1.8;
        text-align: left;
        text-shadow: rgb(3, 3, 3, 0) 0px 1px 4px;
        padding: 20px 20px 20px 0;
        border-left: none;
        background: none;
    }
}

/* photos 相片集 */
.photos {
    
}
.photos ul.life {
    margin-bottom: 0%;
}
.photos .slider-wrap {
    margin-left: unset;
    background: #fff;
    padding: 5px 0;
}

.photos .slick-list {
    margin: 0px;
}

.photos .slick-list a:focus {
    outline: none;
    outline-offset: 0;
}

a:focus, a:hover {
    color: #23527c;
    text-decoration: underline;
}

.photos .slick-dots {
    /*justify-content: center;
    display: none !important;*/
}

.photos .slick-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: unset;
    right: 6%;
    transform: translateY(-50%);
    background-color: #000;
    border: 1px solid #000;
}

.photos .slick-prev {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 6%;
    transform: translateY(-50%);
    z-index: 5;
    background-color: #000;
    border: 1px solid #000;
}

.photos .public-item {
    position: relative;
    padding: 0px 3px;
}

.photos .public-item a {
    position: relative;
    display: block;
    height: 250px;
}

.photos .public-item img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
}

.photos .public-item::after {
    content: '';
    position: absolute;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #ddd;
    bottom: 10px;
    right: 25px;
}

.photos .photo-info {
    left: calc(0% + 10px);
    bottom: calc(0% + 0px);
}

.photos hr {
    width: 80%;
    background-color: #e9ce77;
    height: 1px;
    border: none;
    margin: 50px auto;
}

@media screen and (max-width: 1599px) {
    .photos .main-content-wrap p {
        width: 80%;
    }
}

@media screen and (max-width: 1199px) {
    /* .photos .uk-container {
        padding-bottom: 4vmax;
    } */
    .photos .photo-info {
        left: calc(0% + 10px);
        bottom: calc(0% + 0px);
    }
}

@media screen and (max-width: 767px) {
    .photos .public-item::after {
        font-size: 15px;
        bottom: 10px;
        right: 15px;
        color: #fff;
    }
    .photos .photo-text {
        left: calc(0% + 5px);
        bottom: calc(0% + 0px);
    }
    .photos .main-content-wrap p {
        width: 100%;
        margin-left: unset;
        font-size: 1rem;
    }
}

@media screen and (max-width: 766px) {
    .photos .public-item {
        padding: 0px 5px;
    }
}

@media screen and (max-width: 600px) {
    .photos .public-item::after {
        font-size: 12px;
        bottom: 10px;
        right: 15px;
        color: #fff;
    }
    .photos hr {
        margin: 20px auto;
    }
}

/* -- slick ------------------------------------------------------------------------------------ */
.pic-slider {
    width: 100%;
    max-width: 1000px;
}

.slick-prev {
    cursor: pointer;
    position: absolute;
    border-radius: 30px;
    border: 1px #333;
    height: 40px;
    width: 40px;
    left: 10px;
    top: 48%;
    z-index: 1;
    color: transparent;
    background: url(../image/arrow-prev.svg) no-repeat #333;
    background-position: center;
    background-size: 80% auto;
}

.slick-next {
    cursor: pointer;
    position: absolute;
    border-radius: 30px;
    border: 1px #333;
    height: 40px;
    width: 40px;
    right: 10px;
    top: 48%;
    z-index: 1;
    color: transparent;
    background: url(../image/arrow-next.svg) no-repeat #333;
    background-position: center;
    background-size: 80% auto;
}

.slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}
.slick-dots li{
    margin-right: 10px;
}
.slick-dots li:nth-last-of-type(1){
    margin-right: 0px;
}
.slick-dots li button {
    cursor: pointer;
    color: transparent;
    border: 1px solid #40220f;
    border-radius: 30px;
    height: 12px;
    width:12px;
    background-color: transparent;
}
.slick-dots li.slick-active button {
    border: 1px solid #40220f;
    background-color: #40220f;
}
.slick li .pic-info {
    display: block; position: absolute; font-family: 'Noto Sans TC',sans-serif; font-size: 16px; font-weight: 300; color: #fff; bottom: 10px; right: unset; left: 20px;}
@media screen and (max-width:1023px) {
    .slider-wrap .uk-dotnav{ position: unset; flex-direction: row;}
    .slider-wrap .uk-dotnav li{ padding-left: 5px; padding-bottom: 0px;}
    .slick-dots li button{  height: 10px; width:10px;}
}

/* 書店合作 store */
.area.store {
    position: relative;
    /*background: url("../images/bg-deco-flow-top.png")  left top no-repeat;*/
    background-size: 60% auto;
    padding: 60px 6%;
}
.area.store>.flex {
    display: flex;
    align-items: center;
}
.area.store::before {
    content: '';
    width: 20%;
    height: 800px;
    position: absolute;
    right: 0px;
    top: -50%;
    background: url(../images/golden-circle-left-bottom.png) left no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
    transform: rotate(180deg);
}
.area.store .title {
    padding: 0 0 10px;
}
.area.store .cont {
    width: 45%;
}
.area.store .pic {
    width: 55%;
}
.area .sub-bg {
    display: inline-block;
    /*transform: translate(-50%);*/
    width: 100%;
    max-width: 470px;
    margin-top: -100px;
}
.area.store .bg {
    margin: 0 -20px !important;
    text-align: center;
}
.area.store .bg img {
    width: 100%;
    max-width: 470px;
    margin-bottom: -40px;
}
.area.store video {
        width: 100%;
    }
@media screen and (max-width: 1000px) {
    .area.store {
        padding: 0;
        margin: 10px 0;
        /*border: 5px #eee solid;*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .area.store>.flex {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .area.store .cont {
        padding: 20px;
        /*border: 5px #eee solid;*/
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .area.store video {
        width: 100%;
    }
    .area.store .pic {
        padding: 0;
        border-bottom: none;
    }
    .area.store .cont,
    .area.store .pic {
        width: 100%;
    }
}

/* 公益活動 */
.public {
    height: 400px;
    color: #333;
    display: flex;
    align-items: center;
    background: url('../images/public/bg.jpg') no-repeat center;background-size:cover;
} 

.public .title {
    position: absolute;
    left: 8%;
    font-size: 4rem;
    font-family: 'Noto Serif TC',serif;
    writing-mode: vertical-rl;
    line-height: 1.5;
    text-align: left;
    border-left: 1px solid #333;
}

.public .text {
    position: absolute;
    display: inline-block;
    width: 35%;
    right: 8%;
    bottom: 100px;
    font-size: 1.2rem;
    color: #333;
    font-family: 'Noto Serif TC',serif;
    line-height: 1.8;
    text-align: left;
    padding-left: 40px;
    border-left: 1px solid #333;
}

@media screen and (max-width: 1000px) {
    .public {
        height: auto;
        color: #fff;
        display: flex;
        align-items: center;
        background-size:cover !important;
        height: auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        background: url('../images/public/bg2.jpg') no-repeat center;background-size:cover;
    }
    .public .title {
        position: relative;
        left: auto;
        top: auto;
        font-size: 3rem;
        color: #333;
        font-family: 'Noto Serif TC',serif;
        writing-mode: rl-tb;
        line-height: 1.5;
        text-align: left;
        text-shadow: rgb(3, 3, 3, 0) 0px 0px 4px;
        border-left: none;
    }
    .public .text {
        position: relative;
        display: inline-block;
        width: 100%;
        right: auto;
        font-size: 1rem;
        padding: 0 20px 20px;
        border-left: none;
        bottom: auto;
    }
} 

/* -- 預約表單 --------------------------------------------------------------------------------- */
.contact {
    display: block;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 40px;
}

@media screen and (max-width: 1000px) {
    .contact {
        background-size: auto;
        background-position: top center;
        padding-bottom: 0;
    }
}

.contact .form_box,
.contact .map {
    position: relative;
    width: 50%;
    float: left;
    /*background-repeat: no-repeat;
    /*background-size: cover;
    /*background-color: #fff;
    /*background-blend-mode: multiply;
    /*box-shadow: 0px 5px 15px 1px rgb(0 0 0 / 50%);*/
}

.form-horizontal .form-group {
    margin-right: 0px;
    margin-left: 0px;
}

.contact .map {
    padding: 20px 5% 0 0;
    box-sizing: border-box;
}
.contact .map iframe {
    height: 400px;
}
.contact .map div:first-child iframe {
    margin-bottom: 20px;
}
@media screen and (max-width: 1000px) {
    .contact .form_box,
    .contact .map {
        width: 100%;
        float: none;
    }
    .contact .map {
        padding: 0;
        margin-bottom: 0;
    }
    .contact .map iframe {
        height: 250px;
    }
    .contact .map div:first-child iframe {
        margin-bottom: 0;
    }
    .contact .btn-area {
        padding: 20px 0;
    }
}
.form_box {
}
.contact .title {
    font-size: 38px;
    font-weight: lighter;
    text-align: center;
    letter-spacing: 10px;
    text-indent: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 40px 0 20px;
    margin: 0 5% 20px;
    border-bottom: 1px solid #333;
}
.form_box .form-wrap {
    width: 80%;
    margin: 0 auto;
}

.contact .btn-area {
    text-align: center;
    /* padding-top: 20px; */
}

@media screen and (max-width: 1000px) {
    .contact .title {
        padding: 20px 0 10px;
        margin: 0 20px 20px;
    }
    .contact .intro_title {
        width: 100%;
        font-size: 1.6rem;
        letter-spacing: 4px;
        text-indent: 4px;
    }
    .contact .form_box {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .form_box .form-wrap {
        width: 100%;
    }
}

.contact .title div:first-child,
.contact .title div:last-child {
    width: 20%;
    height: 1px;
    background-color: #333;
    display: none;
    
}
.contact .title div:first-child {
    margin-left: 5%;
}
.contact .title div:last-child {
    margin-right: 5%;
}
.contact .title div:nth-child(2) {
    width: 30%;
}

@media screen and (max-width: 1000px) {
    .contact .title div:nth-child(2) {
        width: 100%;
    }
}

.form_box label.name::after,
.form_box label.mobile::after {
    content: '*';
    color: red;
}

.form_box label.gender::after,
.form_box label.time::after {
    content: "*";
    color: transparent;
}

.form_box label {
    display: block;
    color: #333;
    margin: auto;
    font-size: 22px;
}

.form_box .ipt_name,
.form_box .ipt_mobile,
.form_box .ipt_time,
.form_box .slt_gender,
.form_box .slt_time {
    display: block;
    margin: auto;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 0px;
    outline: none;
    width: 100%;
    font-size: 20px;
    border: 1px solid #333;
    /* padding: 10px; */
    text-indent: 5px;
    line-height: 30px;
}
.form_box .ipt_content {
    display: block;
    margin: auto;
    margin-top: 10px;
    outline: none;
    width: 100%;
    font-size: 20px;
    border: 1px solid #333;
    text-indent: 5px;
    line-height: 30px;
    box-sizing: border-box;
}

@media screen and (max-width: 1000px) {
    .form_box label {
        font-size: 18px;
    }
    .form_box .ipt_name,
    .form_box .ipt_mobile,
    .form_box .ipt_time,
    .form_box .slt_gender,
    .form_box .slt_time {
        font-size: 16px;
    }
    .form_box .ipt_name,
    .form_box .ipt_mobile,
    .form_box .ipt_time,
    .form_box .slt_gender,
    .form_box .slt_time {
        margin-bottom: 10px;
    }
}

.form_box .slt_gender {
    background-color: #fff;
    height: 30px;
    /* padding: 4px; */
    text-indent: 1px;
}
.form_box .slt_time{
    text-indent: 5px;
}
.form_box .send {
    margin-right: 10px;
}
.form_box .send,
.form_box .clear {
    background-color: #f28314;
    color: #333;
    width: 180px;
    height: 50px;
    outline: none;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .3s ease-in-out;
}
@media screen and (max-width: 1000px) {
    .form_box .send,
    .form_box .clear {
        width: 40%;
    }
}
.form_box .send:hover,
.form_box .clear:hover {
    background-color: #fff;
    border: 1px solid #cd4024;
    color: #cd4024;
}

.over-border {
    width: 100%;
}
.over-border form>.control-group:last-child {
    padding-bottom: 5%;
}
#form1 .privacy-remark{
    font-size: 14px;
    margin-bottom: 20px;
    color: #333;
}
#form1 .privacy-remark li{ padding-bottom: unset;}

#form1 .privacy-remark span{
    display: block;
    margin: auto;
}
#form1 .privacy-remark ul{
    display: block;
    margin: auto;
    line-height: 1.44;
    margin-top: 10px;
    padding-left: unset;
}
/* 加入官方line按鈕 */
.btn-line {
    text-align: center;
}
.btn-line a {
    display: inline-block;
    border-top: 1px solid #fff;
    padding: 20px 0;
    text-align: center;
    width: 80%;
}
.btn-line a img {
    width: 100%;
    max-width: 300px;
}
@media screen and (max-width: 1000px) {
    .btn-line a {
        width: 100%;
    }
}

/* 顏色 */
.contact .title,
.contact .title div:first-child,
.contact .title div:nth-child(2),
.form_box label ,
#form1 .privacy-remark {
    color: #333;
}
.contact .title div:first-child,
.contact .title div:last-child {
    background-color: #fff;
}

/* = sweetalert
-------------------------------------------------------------- */
#swal2-content{ text-align: justify; height: 200px; overflow-y: scroll; line-height: 1.44;}
.swal2-header{ margin-top: 0.75em;}
.swal2-title{ margin: 0 0 0.6em;}

/* -- 頁尾 footer ------------------------------------------------------------------------------------- */
.footer-custom {
    
    margin:0;
    background:#fff;
    color: #333;
    border-top: 1px solid #333;
}
.footer-custom>.row {
    padding: 40px 8% 20px;
    margin:0;
    background:#fff;
    color: #333;
}
.footer-custom a {
    color: #333;
}
.footer-custom a:hover {
    opacity:0.7;
}
.footer-custom .left {
    padding:0 20px 0 0;
}
.footer-custom .right {
    padding:0 0 0 5%;
    border-left: 1px solid #333;
}

/* LOGO */
.footer-custom .logo {
    height:55px;
    padding:0 0 15px;
}
.footer-custom .logo a {
}

/* copyright */
.footer-custom .copyright {
    padding: 10px 8%;
    font-size:1.05rem;
    text-align: center;

}

/* info */
.footer-custom .info {
    padding-bottom:10px;
}
.footer-custom .info li {
    margin-bottom:4px;
    line-height:1.4;
}
.footer-custom .info li:last-child {
    margin-bottom:0;
}
.footer-custom .info li svg {
    width:25px;
    text-align:center;
    margin-right:5px;
}

/* social */
.footer-custom .social {
    margin-bottom:10px;
}
.footer-custom .social ul {
    margin: 0 auto;
    padding: 5px;
}
.footer-custom .social li {
    margin-right: 5px;
    list-style: none;
    display: inline-block;
    line-height:50px;
}
.footer-custom .social li>a {
    position:relative;
    display: block;
    width: 50px;
    height: 50px;
    text-align:center;
    color: #333;
    background-color: transparent;
    border: 1px solid #333;
    border-radius: 50%;*/
    overflow:hidden;
    padding-top:3px;
}
.footer-custom .social svg {
    font-size: 1.7rem;
    text-align: center;
}

/* link */
.footer-custom .link {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    font-size: 0;
}
.footer-custom .link a{
    color:#333;
    font-size: 1.05rem;
}
.footer-custom .link li {
    display: inline-block;
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid #999;
}
.footer-custom .link li:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
}
a:focus {
    text-decoration:none;
}

@media only screen and (max-width: 991px) {
    .footer-custom {
        padding: 20px;
    }
    .footer-custom>.row {
        padding: 0;
        margin: 0;
    }
    .footer-custom .logo {
        padding:0 0 15px;
        text-align: center;
    }
    .footer-custom .left {
        padding:0 0 10px;
        text-align: center;
    }
    .footer-custom .right {
        padding:0;
        border: none;
        text-align: center;
    }
    .footer-custom .copyright {
        text-align: center;
        padding-bottom: 60px;
    }
}