.section-container {
    padding-top: 150px
}

@media only screen and (max-width:750px) {
    .section-container {
        padding-top: 120px
    }
}

h1 {
    font-size: 120px;
    line-height: 1
}

@media only screen and (max-width:1280px) {
    h1 {
        font-size: 90px
    }
}

@media only screen and (max-width:750px) {
    h1 {
        font-size: 50px
    }
}

h2 {
    margin-bottom: 20px;
    font-size: 46px;
    letter-spacing: -3px;
    line-height: 1
}

h2 p {
    margin-bottom: 20px;
    font-size: 60px;
    letter-spacing: -3px;
    line-height: 1
}



@media only screen and (max-width:1440px) {
    h2 {
        font-size: 50px
    }

    h2 p {
        font-size: 50px;
    }
}

@media only screen and (max-width:750px) {
    h2 {
        margin-bottom: 25px;
        font-size: 38px
    }
}

.content-group {
    font-size: 16px;
    font-weight: 500;
    line-height: 2;
}

section {
    position: relative;
    margin-bottom: 10vw
}

@media only screen and (max-width:1440px) {
    section {
        margin-bottom: 11vw
    }
}

@media only screen and (max-width:750px) {
    section {
        margin-bottom: 10px
    }
}

/* 企業文化 */


.qywh {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qywh>div {
    text-align: center;
    padding: 40px;
    /* background-color: #fff; */
}

.qywh>div h5 {
    font-size: 48px;
}

.about_two .cons {
    justify-content: space-between;
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.about_two .cons .left {
    /* width: calc(100% - 196px); */
    /* width: -webkit-calc(100% - 196px); */
    /* width: -moz-calc(100% - 196px); */
    width: 100%;
    justify-content: space-between;
    display: flex;
}

.about_two .cons .left .img {
    /* width: 53.4%; */
    max-width: 661px;
}

.about_two .cons .left .img img {
    width: 100%;
}

.about_two .cons .left .txts {
    width: 44.6%;
    /* max-width: 472px; */
}

.about_two .cons .left .txts .desc {
    overflow: hidden;
    /* color: #333333; */
    margin-top: 3%;
}
.about_two .cons .left .txts .desc p {
    line-height: 2;
}
.about_two .cons .left .txts .counter {
    text-align: left;
    font-size: 28px;
    padding-top: 30px;
}

.about_two .cons .left .txts .counter ul li {
    display: block;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
    margin-top: 10%;
}

.about_two .cons .left .txts .counter ul li .txts2 {}

.about_two .cons .left .txts .counter ul li .nums {
    line-height: 1;
}

.about_two .cons .left .txts .counter span {
   
}

.about_two .cons .left .txts .counter .h6 label {
    display: block;
    /*font-weight:lighter;*/
    font-size: 16px;
    /* color: #343434; */
    margin-left: 5px;
    margin-top: 24px;
}

.about_two .cons .left .txts .counter .h6 em {
    font-weight: normal;
    display: block;
    font-style: normal;
    font-size: 22px;
    overflow: hidden;
    line-height: 24px;
    height: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #343434;
}

.about_two .cons .right {
    width: 196px;
    color: rgba(158, 130, 91, 0.5);
    writing-mode: vertical-rl;
    font-weight: bold;
    margin-top: -170px;
}

.about_two .cons .right .p {
    font-size: 155px;
    line-height: 0.8em;
}

.about_two .cons .right .p2 {
    font-size: 94px;
    line-height: 0.7em;
    margin-right: 8px;
}

.section-05 {
    /* background: url("../images/bg.jpg"); */
    background-color: #8f6e4c;
}

section .pattern {
    position: absolute
}

.container .image-wrapper {
    position: absolute;
    overflow: hidden
}

@media only screen and (max-width:1280px) {
    .container .image-wrapper {
        position: relative
    }
}

@media only screen and (max-width:750px) {
    .about_two .cons .left .txts{
        width: 99%;
    }
    .container .image-wrapper {
        width: calc(100% + 30px);
        left: -15px !important
    }
}

.container .image-wrapper img {
    width: 100%
}

.container .content-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    font-size: 16px
}

@media only screen and (max-width:750px) {
    .container .content-group {
        font-size: 12px
    }
}

.container .content-group .btn-connect {
    position: relative
}

.title-section {
    margin-bottom: 100px
}

@media only screen and (max-width:750px) {
    .title-section {
        margin-bottom: 55px
    }
}

.title-section .title-container .description {
    font-size: 18px;
    /* color: #a56f13; */
    margin-top: 15px
}

@media only screen and (max-width:750px) {
    .title-section .title-container .description {
        font-size: 16px
    }
}

.brand-brief-section {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.brand-brief-section .pattern-1 {
    position: absolute;
    top: -18%;
    left: -15%;
    width: 25%;
    max-width: 465px
}

@media only screen and (max-width:1700px) {
    .brand-brief-section .pattern-1 {
        top: -5%
    }
}

@media only screen and (max-width:1280px) {
    .brand-brief-section .pattern-1 {
        top: auto;
        bottom: 30%;
        left: -20%;
        width: 30%
    }
}

@media only screen and (max-width:750px) {
    .brand-brief-section .pattern-1 {
        display: none
    }
}

.brand-brief-section .pattern-1 img {
    width: 100%
}

.brand-brief-section .pattern-2 {
    top: -28%;
    right: 0;
    width: 20%;
    max-width: 187px
}

@media only screen and (max-width:750px) {
    .brand-brief-section .pattern-2 {
        top: -16vw;
    }
}

.brand-brief-section .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 760px
}

@media only screen and (max-width:1280px) {
    .brand-brief-section .container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-flow: column-reverse;
        flex-flow: column-reverse;
        height: auto;
    }
}

.brand-brief-section .content-group {
    margin-top: 120px;
    padding: 96px 103px;
    max-width: 650px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    background: #d2c7bb;
    z-index: 1
}

@media only screen and (max-width:1280px) {
    .brand-brief-section .content-group {
        margin-top: -120px;
        left: -20px;
        padding: 48px 52px
    }
}

@media only screen and (max-width:750px) {

     .brand-brief-section .container {
        display: none;

    }
    .brand-brief-section .content-group {
        margin-top: -90px;
        left: -15px;
        padding: 35px 38px 42px 42px
    }
}

.brand-brief-section .content-group .btn-view-more {
    margin-top: 40px
}

@media only screen and (max-width:750px) {
    .brand-brief-section .content-group .btn-view-more {
        margin-top: 30px
    }
}

.brand-brief-section .image-wrapper {
    top: 0;
    right: -325px
}

@media only screen and (max-width:1280px) {
    .brand-brief-section .image-wrapper {
        right: -30px;
        margin-left: auto;
        width: 80%
    }
}

@media only screen and (max-width:750px) {
    .brand-brief-section .image-wrapper {
        /* width: calc(100% + 30px) */
        width: 100%;
    }
}

.sustainability-section .full-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    /* align-items: center; */
    margin: 0 auto;
    /* max-width: 2240px */
}

@media only screen and (max-width:1280px) {
    .sustainability-section .full-container {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.sustainability-section .image-group {
    width: 50%;
    position: relative;
    margin-top: 96px;
}

@media only screen and (max-width:1280px) {
    .sustainability-section .image-group {
        width: 80%
    }
}

@media only screen and (max-width:750px) {
    .sustainability-section .image-group {
        width: 100%;
        margin-top: 0;
    }
}

.sustainability-section .image-wrapper {
    position: relative;
    right: 0;
    width: 120%;
    overflow: hidden;
}

.sustainability-section .image-wrapper img {
    width: 100%
}

.sustainability-section .content-group {
    width: 50%
}

.sustainability-section:after {
    content: '';
    position: absolute;
    width: 25%;
    max-width: 485px;
    height: 74%;
    bottom: -45%;
    right: 0;
    background: url(../images/jin5.png) no-repeat;
    background-size: contain;
    z-index: 5;
}
@media only screen and (max-width:1600px) {

    .sustainability-section:after {
        display: none;
    }
}

@media only screen and (max-width:1280px) {
    .sustainability-section .content-group {
        width: 100%;
        margin-top: -120px
    }
}

@media only screen and (max-width:750px) {
    .sustainability-section .content-group {
        margin-top: -90px
    }

    .sustainability-section:after {
        display: none;
    }

}

.sustainability-section .content-group:after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    top: -50%;
    right: 0;
    background: url(../images/about/pattern_landing-02.png) no-repeat;
    background-size: cover
}

@media only screen and (max-width:1280px) {
    .sustainability-section .content-group:after {
        top: auto;
        bottom: -50%;
        width: 50%;
        height: 90%
    }
}

.sustainability-section .content-group__card {
    position: relative;
    padding: 100px;
    width: 110%;
    /* background: url(../images/book_now_background.jpg);
    background-size: cover;
    background-repeat: no-repeat; */
    background: #ebdfcf;
    z-index: 5;
    /* margin-top: 110px; */
    /* left: -10%; */
}

.sustainability-section .content-group__card .content-group__card-wrapper {
    position: relative;
    /* margin: 0 auto; */
    width: 100%;
    max-width: 645px;
}

@media only screen and (max-width:1280px) {
    .sustainability-section .content-group__card {
        margin-left: auto;
        padding: 48px 52px;
        width: 90%
    }
}

@media only screen and (max-width:750px) {
    .sustainability-section .content-group__card {
        padding: 35px 42px 42px 38px;

        background: url(../images/book_now_background.jpg);
        background-size: cover;
        background-repeat: no-repeat;

    }

    .perks-and-privileges-section .content-group__card {
        background: url(../images/book_now_background.jpg);
        background-size: cover;
        background-repeat: no-repeat;

    }

}

@media only screen and (max-width:1700px) {
    .sustainability-section .content-group__card h2 {
        font-size: 50px
    }
}

@media only screen and (max-width:1280px) {
    .sustainability-section .content-group__card h2 {
        font-size: 46px
    }
}

@media only screen and (max-width:750px) {
    .sustainability-section .content-group__card h2 {
        font-size: 34px
    }


}

.sustainability-section .content-group .btn-view-more {
    margin-top: 40px
}

@media only screen and (max-width:750px) {
    .sustainability-section .content-group .btn-view-more {
        margin-top: 30px
    }
}


.pattern-quote {
    margin-top: 40px;
    margin-bottom: 40px;
}

.section-02__item .quote-item__description {
    width: 1100px;
    margin-right: 100px;
    margin-bottom: 40px;
    margin-top: 50px;
}

.section-02__item .about-sanyou {
    display: block;
    margin-left: 20%;
}




.perks-and-privileges-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media only screen and (max-width: 1280px) {
    .perks-and-privileges-section {
        margin-bottom: 120px
    }
}

@media only screen and (max-width: 750px) {
    .perks-and-privileges-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        margin-bottom: 70px
    }
}

.perks-and-privileges-section .pattern {
    /* top: 6%; */
    right: -50%;
    width: 70%
}

.perks-and-privileges-section .content-group,
.perks-and-privileges-section .image-group {
    position: relative;
    width: 50%
}

@media only screen and (max-width: 750px) {

    .perks-and-privileges-section .content-group,
    .perks-and-privileges-section .image-group {
        width: 100%
    }
}

@media only screen and (max-width: 750px) {
    .perks-and-privileges-section .content-group {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        z-index: 5
    }
}

.perks-and-privileges-section .content-group__card-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 645px;

}

.perks-and-privileges-section .content-group__card {
    position: relative;
    margin-top: 100px;
    padding: 100px;
    width: 110%;
    background: #ebdfcf;
    /* background: url(../images/book_now_background.jpg);
    background-size: cover;
    background-repeat: no-repeat; */

    /* z-index: 5 */
}

@media only screen and (max-width: 1280px) {
    .perks-and-privileges-section .content-group__card {
        padding: 50px
    }
}

@media only screen and (max-width: 750px) {
    .perks-and-privileges-section .content-group__card {
        margin-top: -96px;
        padding: 45px;
        width: 95%
    }
}

@media only screen and (max-width: 750px) {
    .perks-and-privileges-section .image-group {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
}

.perks-and-privileges-section .image-group .image-wrapper {
    position: relative;
    right: 0;
    width: 100%;
    overflow: hidden
}

@media only screen and (max-width: 750px) {
    .perks-and-privileges-section .image-group .image-wrapper {
        border-radius: 0
    }
}

.perks-and-privileges-section .image-group img {
    width: 100%
}


.section-02 .container {
    max-width: 1100px;
}
.section-02__message {
    margin-right: 0;
    margin-left: auto;
    width: 100%;
    max-width: 660px;
    font-size: 18px;
}

.section-02__video_container {
    position: relative;
    margin-top: 100px
}

@media only screen and (max-width: 750px) {
    .section-02__video_container {
        margin-top: 92px
    }

    .section-02__item .quote-item__description {
        width: 100%
    }

    .section-02__item .about-sanyou {
        margin-left: 0;
        width: 100%;
    }

}

.section-02__video_container .thumbnail_wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    max-width: 1324px;
    height: 620px;
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    z-index: 1;
    /* background-color: #fff; */
}
.section-02__video_container .thumbnail_wrapper video{
    border-radius: 15px;
}

.section-02__video_container .thumbnail_wrapper .btn_video {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    transform: translate(-50%, -50%);
    z-index: 2;
}

@media only screen and (max-width: 750px) {
    .section-02__video_container .thumbnail_wrapper {
        height: 56.25vw
    }

    #video2 {
        width: 100%;
        height: auto;
    }
}

.section-02__video_container .thumbnail_wrapper svg {
    -webkit-transition: all .3s;
    transition: all .3s
}

.section-02__video_container .thumbnail_wrapper:hover svg {
    opacity: .8
}

.section-02__video_container .pattern-01 {
    position: absolute;
    top: -100px;
    left: -450px
}

@media only screen and (max-width: 750px) {
    .section-02__video_container .pattern-01 {
        top: -50px;
        left: -20vw;
        width: 50vw
    }
}

/* 三友發展 */

.hero-promotion-section {
    background-color: #9e825b;
    padding-top: 80px;
    padding-bottom: 10px;

}

.hero-promotion-section h2 {
    color: #fff;
}


.hero-promotion-container {
    position: relative;
    /* margin-bottom: 95px; */
    /* padding: 0 55px 55px 65px; */
    overflow: hidden
}
@media only screen and (max-width: 1280px) {
    .hero-promotion-container {
        margin-bottom: 45px
    }
    
}

@media only screen and (max-width: 750px) {
    .hero-promotion-container {
        margin-bottom: 40px;
        padding: 0 7px 35px;
        overflow: visible
    }
}


.promotion-hero-card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #9e825b;
    /* background-image: url(../images/book_now_background.jpg);
    background-size: cover */
}

.hero-promotion-section .about_sanyou{
    color: #fff;
    margin: 40px auto;
    padding-top: 40px;
    border-top: solid 1px rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-promotion-section .about_sanyou h5{
    /* margin-top: 20px;
    margin-bottom: 20px; */
    /* color: #343434; */
    /* margin-right: 20%; */
    margin-left: 12px;

}
.hero-promotion-section .about_sanyou img{
    width: 40px;
}
.hero-promotion-section .about_sanyou svg{
    width: 22px;
    height: 18px;
    display:inline-block;
    color: #fff;
    margin-left: 5px;

   -moz-transition: all 0.4s ease-in-out;
   -webkit-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;

}
.hero-promotion-section .about_sanyou:hover svg{
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
}




@media only screen and (max-width: 750px) {
    .promotion-hero-card {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        padding: 25px 15px 45px
    }
}

.hero-promotion-container .promotion-hero-card-pattern {
    position: absolute;
    bottom: 0;
    left: -24px;
    width: 42%;
    max-width: 530px
}

@media only screen and (max-width: 750px) {
    .hero-promotion-container .promotion-hero-card-pattern {
        left: -15px;
        width: 74%
    }
}

.promotion-hero-card .info {
    /* -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1; */
    position: relative;
    /* left: 55px; */
    /* max-width: 493px */
}

@media only screen and (max-width: 1280px) {
    .promotion-hero-card .info {
        left: 45px
    }
}

@media only screen and (max-width: 750px) {
    .promotion-hero-card .info {
        /* -webkit-box-ordinal-group:3;
        -ms-flex-order: 2;
        order: 2; */
        left: 0;
        max-width: 100%
    }
}

.promotion-hero-card .info .type {
    margin-bottom: 12px;
    color: #b18a48;
    text-transform: uppercase
}

.promotion-hero-card .info .title {
    margin-bottom: 25px;
    font-size: 50px;
    line-height: 1;
    text-transform: uppercase
}

@media only screen and (max-width: 750px) {
    .promotion-hero-card .info .title {
        font-size: 24px
    }
}

.promotion-hero-card .info .description {
    /* margin-bottom: 45px; */
    font-size: 16px;
}

@media only screen and (max-width: 750px) {
    .promotion-hero-card .info .description {
        /* font-size: 12px */
    }
}

.promotion-hero-card .cover-image,
.promotion-hero-card .info {
    width: 100%
}

@media only screen and (max-width: 750px) {

    .promotion-hero-card .cover-image,
    .promotion-hero-card .info {
        width: 100%
    }
}

@media only screen and (max-width: 750px) {
    .promotion-hero-card .cover-image {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        right: auto;
        margin-bottom: 20px;
        padding: 0 5px;
        max-width: 100%
    }
}

.promotion-hero-card .cover-image img {
    width: 100%
}

.promotion-hero-card .cover-image .cover-image-title {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 60px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.logo {
    width: 300px;
    height: 300px;
    margin: auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* 三友發展 結束 */


.section-03 {
    background: url("../images/book_now_background.jpg")
}

.section-02 {
    margin-top: -100px;
}

.section-02 .pattern {
    position: absolute;
    bottom: -207px;
    right: -20px
}



@media only screen and (max-width: 750px) {
    .section-02 .pattern {
        bottom: -130px;
        right: 0;
        width: 140px
    }

    .section-02 {
        margin-top: 0;
    }

    .section-02 section .container {
        padding: 0 30px;
    }
}

.xmzl {
    margin-left: 20px;
    color: #fff;
}

.xmzl li {
    margin-bottom: 10px;
    list-style: disc;
    color: #fff;
}

table {
    padding: 15px;
    border-top: solid 1px #a17658;
    border-bottom: solid 1px #a17658;

    width: 50%;
}

.about_two table tr{
    /* border-bottom: solid 1px #a17658; */
}
.about_two table tr.line{
     border-bottom: solid 1px #a17658;
}


.about_two .cons .left table th,.about_two .cons .left table td{
    margin: 5px;
    padding: 10px;
    vertical-align: middle;
    border: none;
    font-weight: 500;
    /* border: solid 2px #a17658; */
    /* display: block; */
}
.about_two .cons .left table th{
    /* padding: 10px 3px; */
    text-align: center;
    width: 140px;
}
.about_two .cons .left table tr:nth-child(2n+1) td,.about_two .cons .left table tr:nth-child(2n+1) th{
    /* background-color: rgba(235, 223, 207, 0.4); */
    /* color: #fff; */
}

@media only screen and (max-width: 750px) {
    .about_two .cons .left{
        display: block;
    }
    table {
        width: 100%;
    }
}



.section-container h1 {
    margin-bottom: 50px;
    font-size: 100px
}

@media only screen and (max-width: 1280px) {
    .section-container h1 {
        margin-bottom:30px;
        font-size: 60px
    }
}

@media only screen and (max-width: 750px) {
    .section-container h1 {
        margin-bottom:20px;
        font-size: 50px
    }
}

.unordered-list li span{
    display: inline-block;
    width: 40px;
    text-align: center;
}
/* .unordered-list li{
    list-style-type:upper-roman !important;
    list-style: upper-roman !important;
    list-style-position: inside !important;
}
.unordered-list li::marker{
    text-align: center !important;
} */