/*---------------- 熱銷個案 ----------------*/

.cube {
    padding: 50px;
}

@media only screen and (max-width: 992px) {
    .cube {
        padding: 50px 0;
    }
}

/*---------------- 建築工藝 ----------------*/

.TitleText2 {
    font-size: 20px;
    font-weight: bolder;
    color: #000;
    padding: 4px;
    border: 1px solid #ccc;
    width: 150px;
    margin: 0 auto;
    border-radius: 10px;
}

/*---------------- 最新消息 ----------------*/

.CaseTitle2 {
    font-size: 40px;
    font-weight: bolder;
    color: #000;
    padding-top: 50px;
}

@media only screen and (max-width: 992px) {
    .CaseTitle2 {
        padding-top: 0px;
    }
}

/*---------------- 建築工藝 ----------------*/

.MethodFrame {
    padding: 50px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    margin-top: 4%;
}

/*---------------- 熱銷個案、作品業績 ----------------*/

.CaseTitle {
    font-size: 40px;
    font-weight: bolder;
    color: #000;
}

/*---------------- 關於渥吉 ----------------*/

.PageTitleImg {
    margin-top: 80px;
    width: 100%;
}

.PageTitleText {
    position: absolute;
    z-index: 1;
    bottom: 40px !important;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 35px;
    letter-spacing: 5px;
    color: #fff;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}

.AboutBG04 {
    background-image: url("../images/about008.jpg");
    background-position: bottom;
    background-attachment: scroll;
    background-size: cover !important;
}

.AboutBG05 {
    background-image: url("../images/about009.jpg");
    background-position: bottom;
    background-attachment: scroll;
    background-size: cover !important;
}

.About01 {
    font-size: clamp(22px, 5.2vw, 70px);
    color: #000;
    font-weight: bolder;
    text-align: center;
    margin: 8% 0 2% 0;
}

.About02 {
    font-size: clamp(12px, 1.9vw, 30px);
    color: #000;
    font-weight: bolder;
    text-align: center;
    margin: 0 0 6% 0;
    line-height: clamp(20px, 2.9vw, 50px);
}

.About03 {
    max-width: 90%;
}

.About04 {
    padding-bottom: 55%;
}

.About05 {
    padding-bottom: 10%;
}

@media only screen and (max-width: 992px) {
    .PageTitleImg {
        margin-top: 0px;
        width: 100%;
    }

    .About03 {
        max-width: 100%;
    }
}

@media only screen and (max-width: 768px) {
    .PageTitleText {
        bottom: -40px !important;
        font-size: 25px;
        letter-spacing: 2px;
    }
}

/*---------------- 首頁 ----------------*/

.BG01 {
    background-image: url("../images/BG01.jpg");
    background-attachment: scroll;
    background-size: cover;
    margin-top: 80px;
}

.mySwiper {
    overflow: visible;
}

.swiper-button-prev,
.swiper-button-next {
    padding: 0 3% !important;
    color: #fff !important;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 4vw !important;
}

.swiper-pagination-bullet-active {
    background: #fff !important;
}

.swiper-pagination-bullet {
    background: #fff !important;
}

.Frame01 {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    padding: 10px;
}

.BG02 {
    background-image: url("../images/BG02.jpg");
    background-position: top;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: cover;
}

.Frame02 {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    padding: 0;
}

.TitleText {
    font-size: 25px;
    font-weight: bolder;
    color: #000;
    padding: 6px;
    border: 1px solid #000;
    width: 180px;
    margin: 0 auto;
    border-radius: 20px;
}

@media only screen and (max-width: 992px) {
    .BG01 {
        margin-top: 0px;
    }
}

/*---------------- 單元標題 ----------------*/

.UnitTitle01 {
    font-size: 2.5em;
    color: #ae8239;
    line-height: 1em;
    letter-spacing: 2px;
    margin: 200px 0 0 0;
}

.UnitTitle02 {
    font-size: 1.6em;
    color: #ae8239;
    font-weight: 500;
    line-height: 1.8em;
    letter-spacing: 2px;
    margin: 0 0 70px 0;
}

/*平板直式*/
@media (orientation: portrait) and (min-width: 576px) and (max-width: 1366px) {
    .UnitTitle01 {
        margin: 100px 0 0 0;
    }
}

/*手機直式*/
@media only screen and (max-width: 576px) {
    .UnitTitle01 {
        margin: 100px 0 0 0;
    }
}

/*---------------- 案件按鈕 ----------------*/

.piechartText {
    position: absolute;
    margin: 0 auto;
    text-align: center;
    top: 32px;
    left: 0%;
    right: 0%;
}

/*---------------- 位置 ----------------*/

.VideoPos {
    padding: 80px 0 0 0;
}

.UnitTitle {
    max-width: 30%;
    padding: 100px 0;
}

.Logo2 {
    width: 40%;
}

.BrandText {
    padding: 0;
}

.NewsText {
    padding: 0 30px;
}

/* 首行縮排兩個字的距離 */
p {
    text-indent: 2em;
}

.BGtrans {
    background-color: rgba(255, 255, 255, 0) !important;
}

.BG001 {
    background-image: url("../images/BG001.jpg");
    background-position: left top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/*平板直式*/
@media (orientation: portrait) and (min-width: 576px) and (max-width: 1366px) {
    .VideoPos {
        padding: 0 0 0 0;
    }

    .UnitTitle {
        max-width: 40%;
        padding: 50px 0;
    }

    .Logo2 {
        width: 50%;
    }

    .BrandText {
        padding: 20px 0 0 0;
    }

    .NewsText {
        padding: 20px;
    }
}

/*手機直式*/
@media only screen and (max-width: 576px) {
    .VideoPos {
        padding: 0 0 0 0;
    }

    .UnitTitle {
        max-width: 65%;
        padding: 35px 0;
    }

    .Logo2 {
        width: 80%;
    }

    .BrandText {
        padding: 20px 0 0 0;
    }

    .NewsText {
        padding: 20px;
    }

    .BG001 {
        background-image: url("../images/BG001.jpg");
        background-position: left top;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

/*---------------- 全局樣式 ----------------*/
body,
button,
input,
select,
textarea,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "メイリオ", "맑은 고딕", sans-serif !important;
}

.NoteSerifTC {
    font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", "メイリオ", "맑은 고딕", sans-serif !important;
    /*---------------- font-family: 'Noto Serif TC', serif !important; ----------------*/
}

.Cinzel {
    font-family: "Cinzel", serif !important;
}

.FSmin {
    font-family: "Noto Serif TC", serif !important;
}

.FSminFS {
    font-size: 50px !important;
    line-height: 60px;
}

@media only screen and (max-width: 992px) {
    .FSminFS {
        font-size: 35px !important;
        line-height: 40px !important;
    }

    .FSminFSEdge {
        padding: 0 30px;
    }
}

.tenor {
    font-family: "Tenor Sans", sans-serif !important;
}

.Nanum {
    font-family: "Nanum Gothic", sans-serif !important;
}

.container {
    width: 1500px !important;
    max-width: 100% !important;
    padding: 0 30px;
}

.container2 {
    width: 80%;
    margin: 0 auto;
}

@media only screen and (max-width: 992px) {
    .container2 {
        width: 100%;
        margin: 0 auto;
    }
}

/*---------------- 文字樣式 ----------------*/

a:link.one {
    color: #333 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.one {
    color: #333 !important;
    text-decoration: none !important;
}

a:hover.one {
    color: #c36e23 !important;
    text-decoration: none !important;
}

a:link.two {
    color: #666 !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.two {
    color: #999 !important;
    text-decoration: none !important;
}

a:hover.two {
    color: #999 !important;
    text-decoration: none !important;
}

a:link.three {
    color: #aaa !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.three {
    color: #aaa !important;
    text-decoration: none !important;
}

a:hover.three {
    color: #d3b243 !important;
    text-decoration: none !important;
}

a:link.four {
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.four {
    color: #fff !important;
    text-decoration: none !important;
}

a:hover.four {
    color: #ffe282 !important;
    text-decoration: none !important;
}

a:link.five {
    color: #fff !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

a:visited.five {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 4px solid #fff;
}

a:hover.five {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0) !important;
    text-decoration: none !important;
}

.TextBlock {
    white-space: nowrap;
    display: inline-block;
}

.parallax-bottom {
    background-position: 10% 70% !important;
}

/*---------- 社群選單（手機） ----------*/

.MobileCall {
    position: fixed;
    z-index: 2000;
    bottom: 0px;
    width: 100%;
    background-color: #dbc198;
    padding: 6px 0 0px 0;
    border-top: 1px solid #af8d57;
}

/*---------- 主選單 ----------*/

.MenuRight {
    position: absolute;
    top: 30px;
    right: 30px;
}

.Menu01 {
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

.Menu02 {
    color: #000;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

.Menu03 {
    font-size: 14px;
    font-family: "Trirong", serif !important;
    color: #bbb;
    letter-spacing: 1px;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

.Menu01:hover {
    background-color: #efe9d6;
}

.Menu01:hover .Menu02 {
    color: #fff;
}

.Menu01:hover .Menu03 {
    color: #666;
}

.Menu01Active {
    background-color: #efe9d6;
}

.Menu01Active .Menu02 {
    color: #fff;
}

.Menu01Active .Menu03 {
    color: #666;
}

.Menu01Active:hover {
    background-color: #efe9d6;
}

#header,
#topNav,
#topMain {
    display: flex !important;
}

/*平板橫式*/
@media (orientation: landscape) and (min-width: 576px) and (max-width: 1366px) {
    .Menu01 {
        padding: 30px 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s !important;
        -webkit-transition: all 0.3s !important;
        -moz-transition: all 0.3s !important;
    }
}

/*---------- 滾動式選單 ----------*/

#navbar {
    background-color: #fff;
    position: fixed;
    top: 0px;
    width: 100%;
    transition: top ease-out 0.2s;
    z-index: 1000;
}

.ScrollDownLogo {
    text-align: left;
    max-width: 200px;
    margin: 15px 0 0 30px;
}

.ScrollDownMenu {
    color: #f2f2f2;
    padding: 12px 12px;
    text-decoration: none;
    font-size: 18px;
}

.ScrollDownMenu:hover {
    background-color: #fff;
    color: #333;
}

.ScrollDownMenuOn {
    background-color: #fff;
    color: #333;
}

/*---------- 圓形數字列表清單 ----------*/

.ListN {
    width: 24px;
    height: 10px;
    background-color: #ff005e;
    border-radius: 100px;
    font-size: 13px;
    color: #fff;
    padding: 6px;
}

.ListA {
    width: 14px;
    height: 14px;
    background-color: #b20000;
    border-radius: 100px;
    font-size: 16px;
    color: #fff;
    padding: 4px 8px;
}

.TextN {
    color: #ff005e;
    font-weight: bold;
}

.number-circle-list {
    list-style: none;
    padding-left: 0rem;
    counter-reset: circle-counter;
}

.number-circle-list--list-item {
    counter-increment: circle-counter;
    margin-bottom: 0.1rem;
}

.number-circle-list--list-item:before {
    content: counter(circle-counter);
    background-color: #e1e1e1;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: black;
    text-align: center;
    margin-right: 0.5rem;
    position: relative;
    top: -2px;
}

.number-circle-list--list-item:last-child {
    margin-bottom: 0;
}

.number-circle-list--list-item .number-circle-list--list-item {
    margin-left: 0.25rem;
}

.number-circle-list--primary-color .number-circle-list--list-item:before {
    background-color: #000;
    color: #fff;
}

.LiFix {
    display: list-item;
    margin-top: -23px;
    margin-left: 27px;
    font-size: 18px;
}

.number-circle-list--list-item2 {
    counter-increment: circle-counter;
    margin-bottom: 0.1rem;
}

.number-circle-list--list-item2:before {
    content: counter(circle-counter);
    background-color: #e1e1e1;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: black;
    text-align: center;
    margin-right: 0.5rem;
    position: relative;
    top: -2px;
}

.number-circle-list--list-item2:last-child {
    margin-bottom: 0;
}

.number-circle-list--list-item .number-circle-list--list-item2 {
    margin-left: 0.25rem;
}

.number-circle-list--primary-color .number-circle-list--list-item2:before {
    background-color: #ff005e;
    color: #fff;
}

/*---------- unitegallery ----------*/
.ug-lightbox .ug-textpanel-title {
    text-align: center !important;
}

/*---------------- 分隔線 ----------------*/
.Dividers001 {
    border-top: 1px dashed #444;
    margin: 100px 0;
}

/*---------------- 行動裝置選單 ----------------*/
.sidepanel_btn {
    position: fixed;
    z-index: 99;
    top: 13px;
    right: 5px;
    text-align: center;
    padding: 7px 11px;
}

.sidepanel-light {
    overflow: auto !important;
}

.sidepanel-dark {
    overflow: auto !important;
}

#sidepanel ul ul > li {
    padding: 5px 0 5px 0px !important;
}

/*---------------- owl-carousel-2 ----------------*/

.owl-carousel-2 .owl-dots {
    position: absolute;
    left: 10%;
    right: 10%;
    margin-top: 4% !important;
    background-color: rgba(255, 255, 255, 0) !important;
}

.owl-dot span {
    width: 12px !important;
    height: 12px !important;
    background-color: #c1c1c1 !important;
    font-size: 12px !important;
    color: #000;
    padding: 4px;
    margin: 3px !important;
    border-radius: 20px !important;
    transition: all 0.3s !important;
    -webkit-transition: all 0.3s !important;
    -moz-transition: all 0.3s !important;
}

.owl-carousel-2 .owl-dots .owl-dot.active span {
    background-color: #ae8239 !important;
    color: #fff;
    font-weight: bolder !important;
    width: 22px !important;
    height: 12px !important;
}

.owl-dots {
    counter-reset: dots;
}

body .owl-nav {
    position: absolute;
    top: -40px;
    width: 100%;
    left: 0px;
    visibility: hidden !important;
}

body .owl-nav div {
    position: absolute;
    top: 26%;
    border: 1px solid #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

body .owl-prev {
    left: -10px;
    display: flex;
    background: #fff;
}

body .owl-next {
    right: -10px;
    display: flex;
    background: #fff;
}

body .owl-prev i,
body .owl-next i {
    margin: auto;
}

#owl-example .owl-item {
    box-sizing: border-box;
    padding: 40px;
    text-align: center;
}

#owl-example .owl-item p {
    font-size: 25px;
}

.owl-carousel-2:hover .owl-nav div.owl-next {
    right: -2%;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
}

.owl-carousel-2:hover .owl-nav div.owl-prev {
    left: -2%;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
}

.owl-carousel-2:hover .owl-nav div.owl-next,
.owl-carousel-2:hover .owl-nav div.owl-prev {
}

/*平板直式*/
@media (orientation: portrait) and (min-width: 576px) and (max-width: 1366px) {
    .owl-carousel-2 {
        margin-bottom: 80px !important;
    }
}

/*---------------- 語法範本 ----------------*/

/*平板橫式*/
@media (orientation: landscape) and (min-width: 576px) and (max-width: 1366px) {
}

/*平板直式*/
@media (orientation: portrait) and (min-width: 576px) and (max-width: 1366px) {
}

/*手機直式*/
@media only screen and (max-width: 576px) {
}