@charset "UTF-8";

body {
    background-color: #393939;
    background-image: url(../images/bg.png);
    -webkit-background-size: 50%;
    background-size: 50%;
}

.bannerBox .bannerSlick .innerImg {
    padding-top: 40%;
}

.outerWrap {
    padding-top: 10%;
    padding-bottom: 10%;
}


/*-----aboutArea-----*/
.aboutArea {
    padding-bottom: 5%;
}

.aboutArea .titleBox {
    padding: 10px 0;
    padding-top: 25%;

}

.aboutArea .titleBox:before {
    content: '';
    width: 110%;
    height: 1px;
    position: absolute;
    bottom: 0%;
    left: 0;
    background-color: #999;
}

.aboutArea .titleBox:after {
    /*content: 'ZEN-YUAN Construction Co., Ltd';*/
    position: absolute;
    top: 105%;
    font-size: 10px;
    color: #888;
}

/*-----ImgBox-----*/
.aboutArea .ImgBox {
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.3);
}

.aboutArea .ImgBox:before {
    content: '';
    position: absolute;
    width: 0%;
    height: 0%;
    padding-top: 0%;
    border: 0.5px solid #ceaa6e;
    z-index: -1;
    opacity: 0.3;
    transform: translate(-15%, 20%);
    transition: all 5s 3.5s;
    opacity: 0;
}

.show .aboutArea .ImgBox:before {
    width: 100%;
    height: 100%;

    padding-top: 100%;
    transition: all 5s 3s;
    opacity:1;

}



.aboutArea .ImgBox .innerImg {
    padding-top: 130%;
    z-index: 10;

}

.aboutArea .ImgBox .innerImg .image {
    background-position: center;
}


/*-----conceptArea 理念-----*/
.aboutArea .conceptArea .TxtBox {
    background-color: #f7f7f7;
    padding: 10%;
    padding-top: 30%;
    padding-right: 20%;
    z-index: 5;
    transform: translateY(-180px);
    color: #333;
}

/*BusinessBox 事業内容*/
.BusinessBox h3 {
    border-bottom: 1px solid #999;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.BusinessBox span {
    font-weight: 100;
}

.BusinessBox b {
    font-size: 10px;
    font-weight: 300;
}

.BusinessBox .item {
    text-align: center;
    margin-bottom: 1rem;
}

.BusinessBox .item a {
    display: block;
    color: #eee;
    padding: 30% 25px;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    /*min-height: 350px;*/
    height: 450px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);

    transition: all 0.6s ease;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.BusinessBox .item:hover a {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);

}

.BusinessBox .item:hover a .list {
    opacity: 0;
}

.BusinessBox .item a:before {
    content: '';
    top: 0;
    bottom: -1px;
    right: 0;
    left: 0;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.85);
    -webkit-filter: saturate(0.5);
}

.BusinessBox .item a:after {
    content: 'READ MORE';
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    border: 1px solid #999;
    padding: 10px;
    transform: translate(-50%, -50%) rotateY(180deg);
}

.BusinessBox .item:hover a:after {
    opacity: 1;
}

.BusinessBox .item:hover a:before {
    background-color: rgba(0, 0, 0, 0.9);

}

.BusinessBox .item:nth-child(1) a {
    background-image: url(../images/about/bsn01.jpg);
}

.BusinessBox .item:nth-child(2) a {
    background-image: url(../images/about/bsn02.jpg);
}

.BusinessBox .item:nth-child(3) a {
    background-image: url(../images/about/bsn03.jpg);
}





.BusinessBox .item .bs_num {
    font-size: 10px;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    opacity: .5;
}

.BusinessBox .item .title {
    width: 100%;
}

.BusinessBox .title b {
    letter-spacing: 2px;
    font-size: 2rem;
}

.BusinessBox .title span {
    display: block;
    font-size: 0.5rem;
    font: ;
    ont-family: 'Prata', serif;
    font-weight: 100;
}

.BusinessBox .bs_text {
    font-size: 1rem;
    color: #d0d0d0;
}


.BusinessBox .item .icon {
    display: block;
    width: 100%;
    height: 80px;
    margin: 10px auto;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center;
}

.BusinessBox .item:nth-child(1) .icon {
    background-image: url(../images/about/bsn01_icon.svg);
}

.BusinessBox .item:nth-child(2) .icon {
    background-image: url(../images/about/bsn02_icon.svg);
}

.BusinessBox .item:nth-child(3) .icon {
    background-image: url(../images/about/bsn03_icon.svg);
}

.fancybox-container {
    color: #333;
}

.fancybox-container .title {
    text-align: center;
    width: 100%;
    padding: 5% 0;
}

.fancybox-container .title span {
    font-size: 10px;
    display: block;
    color: #999;
}

.fancybox-container .Img {
    height: 100%;
}

.fancybox-container .Img .innerImg {
    height: 100%;
}


.fancybox-container .btnBox {
    padding-top: 5%;
    text-align: center;
}

@media(max-width: 1200px) {
    .aboutArea .titleBox {
        display: none;
    }

    header {
        padding-top: 20%;
    }
}

@media(max-width: 768px) {


    .aboutArea .ImgBox .innerImg .image {
        background-position: 25%;
    }
}

@media(max-width: 768px) {
    .BusinessBox .item {
        text-align: left;

    }

    .BusinessBox .item a {
        padding: 5% 10px;
        height: auto;
        background: #999 !important;
    }



    .BusinessBox .item .list {
        flex-wrap: nowrap;
        padding-left: 30%;
        padding-right: 15%;
    }

    .BusinessBox .item .icon {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 30%;
    }

    .BusinessBox .bs_text:after {
        content: 'READ MORE';
        display: block;
        margin-top: 1rem;
        font-size: 14px;

        padding-top: 10px;
        border-top: 1px solid #999;
    }
}

@media(max-width: 480px) {

    header {
        padding-top: 30%;
    }

    .aboutArea .conceptArea .TxtBox {
        transform: none;
        padding: 10% 15px;
    }

    .BusinessBox {
        padding-top: 30%;
    }

    .BusinessBox .title b {
        font-size: 1.5rem;
    }

    .BusinessBox .item .list {
        padding-right: 0;
    }

    .fancybox-content {
        padding: 5% 10px;
    }
}